# Comentarios al ejercicio Londres

## Etiquetas utilizadas

Al quitar el estilo se puede observar que las únicas etiquetas de bloque utilizadas son <h1>, <h2> y <p>.

Al poner el estilo se puede observar que la información sobre cada monumento forma una ficha, por tanto hay divisiones agrupando cada nombre, foto y descripción de los monumentos.

## Clases utilizadas

El párrafo con los enlaces es distinto al resto de párrafos, por tanto necesita una clase.

Hay tres clases de fichas (con tonos gris, verde y azul), por lo que parecería que se necesitan 3 clases de divisiones. Pero en realidad es suficiente con dos clases.

La idea es dejar sin clase las divisiones cuyo estilo es el más utilizado (en este caso, los grises) y definir su estilo con el selector

- div

.. y dar clase a las otras divisiones y definir su estilo con los selectores

- div.uno
- div.dos

Las imágenes se encuentran a izquierda y derecha y con bordes distintos, por lo que parecería que se necesitan también tres clases de imágenes. Pero en realidad no es necesaria ninguna clase, ya que las imágenes que están dentro de divisiones con la misma clase son iguales, así que se puede utilizar un selector de descendientes, por ejemplo:

- div img
- div.uno img

El primer selector haría referencia a las imágenes contenidas en los divisiones grises (que no tienen clase). El segundo selector haría referencia a las imágenes contenidas en las divisiones azules (por ejemplo).

## Otros

Las imágenes tienen borde. Además se ve una franja de color entre la imagen y el borde. Esta franja se consigue definiendo un margen interior (padding) y un color de fondo (background-color) en la imagen.

Como las imágenes flotan, habrá que poner la propiedad clear a algún elemento para que no se amontonen las fichas.

Al hacer clic en los enlaces, Firefox salta al principio de las divisiones, por tanto los destinos de los enlaces son las divisiones.

## Solución del ejercicio

El código XHTML del ejercicio puede consultarse abriendo la página web del ejercicio y eligiendo el menú Ver > Código fuente de la página en Firefox o Ver > Código fuente en Internet Explorer.

La hoja de estilo del ejercicio puede consultarse abriendo este enlace a la hoja de estilo del ejercicio.

Tenga en cuenta que en estos ejercicios hay a menudo varias maneras de conseguir lo mismo, por lo que la solución no es nunca única.

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.