Comentarios al ejercicio Florencia

Cabecera

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

Etiquetas

Al desactivar la hoja de estilo se puede identificar las siguientes etiquetas:

Clases

Cada una de las tres imágenes tiene una posición distinta:

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:

Observando además la alineación de los lados izquierda y derecha de las imágenes primera y tercera 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.

Elementos flotantes

La primera y tercera imagen tienen posicionamiento flotante. Concretamente:

Si se reduce el tamaño de la página, se observa que el título <h2> "Santa Croce" y la sección <address> final no se colocan al lado de las imágenes flotantes, lo que indica que ambos elementos tienen la propiedad clear.

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 Florencia 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 Florencia.

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.