añadir la etiqueta <metaname="viewport" ... > necesaria en dispositivos móviles
añadir la etiqueta <link rel="stylesheet" ... > de enlace a la hoja de estilo
Etiquetas
Al desactivar la hoja de estilo se puede identificar las siguientes etiquetas:
Se han utilizado las etiquetas de sección <h1>, <h2> y <address>.
Se ha utilizado las etiquetas de bloque <p>.
Se ha utilizado la etiqueta en línea <strong>.
Hay tres imágenes jpg insertadas con la etiqueta <img>.
En el bloque <address> hay un salto de línea <br> al final de la primera línea.
Clases
Cada una de las tres imágenes tiene una posición distinta:
la primera y la tercera están flotando a la izquierda y a la derecha, respectivamente, por lo que se necesitarán dos clases de imágenes <img>:
clase izquierda: imagen a la izquierda.
clase derecha: imagen a la derecha.
la segunda está centrada en un párrafo, por lo que se necesita un clase de párrafo <p>:
clase centrado: contenido centrado (en este caso el contenido es únicamente la imagen).
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:
La imagen de Santa Maria del Fiore está insertada en el título <h2>. Se aconseja insertarla al principio del párrafo, antes del texto.
La imagen de la Santa Croce está insertada en un primer párrafo <p> del apartado. Este párrafo no contiene texto, únicamente contiene la imagen.
La imagen de Santa Maria Novella está insertada en el primer párrafo <p> del apartado. Se aconseja insertarla al principio del párrafo, antes del texto.
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:
La imagen situada a la izquierda está alineada por la izquierda con el texto posterior y por la parte derecha está separada del texto, por tanto sólo tiene margen derecho.
La imagen situada a la derecha está alineada por la derecha con el texto anterior y posterior y por la parte izquierda está separada del texto, por tanto sólo tiene margen izquierdo.
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:
La imagen de Santa Maria del Fiore tiene posicionamiento flotante a la izquierda, puesto que el texto posterior fluye a su derecha.
La imagen de Santa Maria Novella tiene posicionamiento flotante a la derecha, puesto que el texto posterior fluye a su izquierda.
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: