Comentarios al ejercicio Chistes de hombres y mujeres

Etiquetas utilizadas

Al quitar el estilo se puede observar que las etiquetas de bloque utilizadas son <h1>, <h2> y <p>.

Al poner el estilo se puede observar que los chistes de hombres y de mujeres forman dos fichas, por tanto hay divisiones agrupando cada grupo de chistes.

Al quitar el estilo se puede observar que se utiliza la etiqueta en línea <br /> en cada chiste (cada chiste es un párrafo). Los párrafos vacíos entre chiste y chiste se pueden borrar una vez añadidos los saltos de línea <br />.

Clases utilizadas

Los chistes de hombres y mujeres tienen un color y una posición distinta, así que hay que dar una clase o un id distinto a cada una.

No es necesario dar clase a los títulos <h2>, ya que se pueden utilizar que forman parte de divisiones con clase o id y se pueden utilizar los selectores de descendientes div#hombres h2 y div#mujeres h2.

Otros

El título <h1> y cada división <div> de grupo de chistes están en posiciones independientes. Eso se puede conseguir con posicionamiento absoluto. Al modificar el ancho de la ventana se puede observar que la posición y tamaño de los tres elementos están definidos en porcentaje %.

Al modificar el tamaño del tipo de letra se puede observar que la posición del borde superior de los dos grupos de chistes van cambiando. Eso indica que la posición vertical top de esas divisiones están definida en em.

Al modificar el tamaño del tipo de letra se puede observar que la altura de cada grupo de chistes va cambiando. Eso indica que la altura height de las divisiones no está definida (el ancho sí).

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.