Este ejercicio consiste en cinco páginas conectadas mediante enlaces. El ejercicio proporciona un único fichero (escritores.html) que contiene el texto de todos las páginas. Haciendo copias de este fichero, renombrando las copias y borrando lo que sobra en cada caso, se obtienen los cuatro ficheros:
La hoja de estilo es común, por lo que las cinco páginas web enlazan a la misma hoja de estilo (escritores.css).
En la cabecera <head> de cada página hay que:
El dibujo siguiente muestra una posible elección de elementos de secciones para cada una de las páginas:
La página index.html podría tener la siguiente estructura:
Las páginas de escritores podrían tener la siguiente estructura:
Las imágenes de escritores se han insertado dentro de una sección <aside>, pero podría no haberse hecho así.
Además de las secciones comentadas en el apartado anterior, en este ejercicio se han utilizado las siguientes etiquetas:
En este ejercicio se han utilizado los siguientes atributos:
En la página index.html los párrafos con las imágenes tienen un tipo de letra más grande que el resto. Esto se puede conseguir de dos formas:
En esta página se ha optado por la segunda solución.
En este ejercicio se utiliza la fuente de Google Fonts Playball descargándola previamente (es decir, utilizando la regla-arroba @font-face). Para facilitar la realización del ejercicio, la fuente en formato woff se han incluido en el archivo comprimido.
En la página index.html, observando la alineación de las imágenes con el texto, se deduce que todas las imágenes están insertadas en los párrafos, como un carácter más, al final del párrafo. Al dar estilo, el texto y la imagen están alineadas en vertical, lo que indica el uso de la propiedad vertical-align.
En las páginas de biografías, las imágenes flotan en el lado derecho. Las propiedades float, border y margin se puede asignar a la etiqueta <aside>.
Al haber elementos flotantes, se deberá aplicar la propiedad clear a algún elemento. En este caso se puede aplicar al pie de página <footer>.
En la página principal hay dos tipos de enlaces
En las páginas de escritores hay un enlace para volver a la página principal index.html
Estas son las propiedades CSS utilizadas en este ejercicio:
El código HTML del ejercicio puede consultarse abriendo las diferentes páginas web del ejercicio Escritores españoles (index.html, fernan-caballero.html, gustavo-adolfo-becquer.html, emilia-pardo-bazan.html y vicente-blasco-ibanez.html) 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 Escritores españoles.
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.