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
Secciones
En la vista con estilo se reconocen agrupaciones con color de fondo común o con un borde común, para que las que tiene sentido utilizar secciones.
El dibujo siguiente muestra una posible elección de elementos de secciones para esta página:
la página tiene un encabezado <header> que contiene únicamente el título principal de la página <h1>
el conjunto de fichas de escritores tiene dos bordes laterales, que indican la presencia de una etiqueta que agrupa todo el contenido de la página, <main>
cada grupo de fichas de escritores por siglo tiene un fondo común, que indica la presencia de <article>, que contiene:
un título <h1> con el siglo en el que nacieron los escritores
las fichas de escritores correspondientes a ese siglo
cada ficha de escritor tiene un fondo común, que indica la presencia de <article>, que contiene:
un título <h1> con el nombre del escritor
un elemento <aside> que contiene una imagen del escritor y su nombre
unos párrafos <p> con la biografía del escritor
la página tiene un pie de página <footer> con un párrafo un ella
El encabezado <header> contiene únicamente el título <h1>, por lo que se podría no haber utilizado <header>.
Cada ficha dedicada a un escritor es un artículo <article> porque cada ficha tiene sentido en sí mismo y no necesita el resto de la página para su comprensión, pero también podría haberse utilizado <section>.
Cada apartado dedicada a los escritores nacidos en un siglo determinado es también un artículo <article> porque cada apartado tiene sentido en sí mismo y no necesita el resto de la página para su comprensión, pero también podría haberse utilizado <section>.
Las imágenes de escritores y su nombre se han insertado dentro de una sección <aside>.
Los títulos empleados son <h1>, <h2> y <h3>.
Etiquetas
Además de las etiquetas que se muestran en la imagen del apartado anterior (<header>, <main>, <article>, <aside>, <h1> y <span>), la página sólo contiene párrafos <p> e imágenes <img>.
Clases
Para distinguir los artículos <article> dedicados a las biografías individuales de los artículos <article> que agrupan las biografías de un siglo determinado (y los elementos que contienen, por ejemplo, los títulos <h1>, se ha utilizado una sola clase:
clase siglo: para los <article> que agrupan las biografías de un siglo determinado.
En la hoja de estilo se pueden utilizar selectores de descendientes para referirse a determinados elementos:
article.siglo para los artículos de los siglos
article article para los artículos de las biografías individuales
Fuentes
En este ejercicio se utiliza el tipo de letra genérico sans-serif y la fuente de Google Fonts Playball, cargada localmente.
Estilos
Las propiedades CSS utilizadas son las siguientes:
Fuentes web (@font-face)
nombre: font-family
ubicación: src
Página (body):
margen: margin
color de fondo: background-color
tipo de letra: font-family
tamaño de letra: font-size
alineación: text-align
Cabecera (header):
color de fondo: background-color
color: color
Título (h1):
margen: margin
margen interior: padding
tamaño de letra: font-size
mayúsculas / capitales: text-transform
Contenido principal (main):
tipo de caja: display
borde izquierdo: border-left
borde derecho: border-right
margen: margin
margen interior: padding
Artículo (article):
fin de posicionamiento flotante: clear
Artículo de siglos (article.siglo):
margen: margin
margen interior inferior: padding-bottom
color de fondo: background-color
Título de artículo de siglos y de escritores (h2 y h3):
margen: margin
margen interior inferior: padding-bottom
color de fondo: background-color
color: color
Artículo de escritores (article.siglo article):
desbordamiento: overflow
margen: margin
margen interior inferior: padding-bottom
color de fondo: background-color
Párrafos de los artículos de escritores (article article p):