# Comentarios al ejercicio Fuentes de Roma

## Etiquetas utilizadas

La posición en la que se han insertado las imágenes se ve fácilmente al ver la página sin aplicar la hoja de estilo, pero es conveniente ser capaz de deducir el punto de inserción de las imágenes viendo la página aplicando la hoja de estilo. Así que es conveniente pensar donde se insertarían las imágenes antes de ver la página sin estilo y después comprobarlo quitándole el estilo. En general, la imagen suele estar insertada al principio del bloque con el que está alineada la parte superior de la imagen. En este ejercicio las imágenes están insertadas al principio de los párrafos o de los títulos.

Cuando hay dos imágenes flotando a la misma altura, no es importante el orden en que se inserten. Yo suelo insertar primero la imagen que flota a la izquierda y luego la que flota a la derecha, simepre al principio del bloque.

Al ver la página sin aplicar la hoja de estilo se pueden identificar las siguientes etiquetas:

- Las etiquetas de bloque utilizadas son <h1>, <h2>, <p> y <address>.
- Hay líneas horizontales <hr /> separando los apartados dedicados a cada personaje.

## Estilos utilizados

Al ver la página aplicando la hoja de estilo se pueden identificar las propiedades utilizadas:

- tipo de letra: font-family.
- colores: color y background-color. El color de fondo de la página se puede definir en la etiqueta <body>.
- alineación: text-align
- tamaño de letra: font-size. Está expresado en porcentaje (ya veremos en su momento por qué).
- mayúsculas: text-transform.
- cursivas: font-style. Esta propiedad se utiliza tanto para poner como para quitar la cursiva.
- anchura de la línea horizontal: width (en %)
- altura de la línea horizontal: height (en px)
- Las imágenes flotan a la izquierda o a la derecha, por tanto es necesario definir dos clases de imágenes (se podría hacer con una sola, pero en estos primeros ejercicios quizás sea más fácil empezar asignando clases a todas las imágenes). Una clase se puede llamar izquierda y la otra derecha. Cada clase debe tener la propiedad float : left o right, un margin-left o margin-right y margin-bottom (en este caso, definidas en px).
- Al utilizar la propiedad float en las imágenes, hay que utilizar la propiedad clear en algún elemento, para que no se monte todo. En esta página, el elemento es <hr />.

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