Comentarios al ejercicio Necrológicas 2014

Cabecera

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

Secciones

En la vista con estilo se reconocen agrupaciones con color de fondo común o con un borde común, para las que tiene sentido utilizar secciones.

El dibujo siguiente muestra una posible elección de elementos de secciones para esta página:

body h1 article h2 div div article h2 div div

Las necrológicas utilizan la etiqueta <article> porque cada necrológica tiene sentido en sí mismo y no necesita el resto de la página para su comprensión, pero también podría haberse utlizado <section>.

Etiquetas

Además de las etiquetas que se muestran en la imagen del apartado anterior (<h1>, <article>, <h2>, y <div>), la página sólo contiene párrafos <p>.

Clases

En la página hay dos tipos de artículos <article> (los dedicados a futbolistas/deportistas, de color marrón, y los dedicados a escritores, de color violeta)

En cada <article> hay dos secciones, la dedicada a los datos de nacimiento y muerte, de color de fondo más oscuro, y la dedicada a la biografía, de color de fondo más claro.

Así, se pueden definir cuatro clases:

Para definir en la hoja de estilo cada tipo de sección en cada tipo de artículo, se deben utilizar selectores de descendientes:

Fuentes

En este ejercicio se utiliza el tipo de letra genérico sans-serif y las fuentes de Google Fonts Cabin Sketch y Gabriela, pero también se pueden cargar localmente.

Estilos

Las propiedades CSS utilizadas son las siguientes:

Solución del ejercicio

El código HTML del ejercicio puede consultarse abriendo la página web del ejercicio Necrológicas 2014 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 Necrológicas 2014.

Tenga en cuenta que en estos ejercicios hay a menudo varias maneras de conseguir el mismo resultado, por lo que la solución no es nunca única.