Comentarios al ejercicio Cuatro museos de Londres

Cabecera

En la cabecera <head> de la página hay que:

Secciones

Una posible elección de elementos de secciones para esta página es la siguiente:

body h1 p nav p section h2 p section h2 p

Cada museo utiliza la etiqueta <section>, aunque también se podría haber utlizado <article>.

Etiquetas

Además de las secciones <section>, al quitar el estilo se puede identificar las siguientes etiquetas:

Clases

El párrafo que contiene los enlaces es distinto a los demás párrafos (está centrado y en negrita). Esto se puede conseguir de dos formas:

En esta página se ha optado por la segunda solución.

Hay dos tipos de secciones, por lo que se necesitan dos clases de <section>:

Hay también dos tipos de imágenes (flotantes a izquierda o derecha y con bordes distintos). Esto se puede conseguir de dos formas:

En esta página se ha optado por la segunda solución.

Fuentes

En este ejercicio se utiliza el tipo de letra genérico sans-serif.

Imágenes

Observando la alineación de la parte superior de las imágenes con el texto, se deduce que todas las imágenes están insertadas en los títulos <h2>. Se aconseja insertarlas al principio, antes del texto.

Observando además la alineación de los lados izquierda y derecha de la imágenes flotantes con el texto, se deduce que:

Observando la separación entre las imágenes y el texto posterior se deduce que las imágenes tienen margen inferior.

Como hay imágenes flotantes, se deberá aplicar la propiedad clear a algún elemento. En este caso se puede aplicar en las secciones.

Si se reduce el tamaño, se puede observar que las imágenes flotantes no sobresalen por fuera de las secciones. Para que la imagen se tenga en cuenta al calcular el tamaño de la sección, se utilizará la propiedad overflow: auto.

Enlaces

Esta página contiene dos tipos de enlaces

Estilos

Al restablecer el estilo se pueden identificar las propiedades utilizadas:

Solución del ejercicio

El código HTML del ejercicio puede consultarse abriendo la página web del ejercicio Cuatro museos de Londres y abriendo el código fuente (Ctrl+U).

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

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