En la cabecera <head> de la página hay que:
Una posible elección de elementos de secciones para esta página es la siguiente:
Cada museo utiliza la etiqueta <section>, aunque también se podría haber utilizado <article>.
Además de las secciones <section>, al quitar el estilo se puede identificar las siguientes etiquetas:
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.
En este ejercicio se utiliza el tipo de letra genérico sans-serif.
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.
Esta página contiene dos tipos de enlaces
Al hacer clic en los enlaces del segundo párrafo, el navegador salta a cada uno de los apartados. Observando que al saltar a los apartados se ve el borde de las secciones <section>, se puede deducir que los destinos de los enlaces son las propias secciones <section>. Es decir, las secciones tienen atributos id (por ejemplo, british, tate, national y natural).
Los enlaces visitados cambian de color, por lo que se debe definir la pseudo clase de enlace a:visited.
Al hacer clic en las imágenes, se abren las páginas de inicio de los diferentes museos. Cada etiqueta de imagen <img> debe estar incluida en una etiqueta de enlace <a> con la dirección absoluta de cada página de museo.
Al restablecer el estilo se pueden identificar las propiedades utilizadas:
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.