Comentarios al ejercicio Tom Strong

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.

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.
• 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.
• anchura de la línea horizontal: width (en %)
• 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.