Comentarios al ejercicio Escritores españoles

Páginas

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).

Cabecera

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

Secciones

El dibujo siguiente muestra una posible elección de elementos de secciones para cada una de las páginas:

La página idex.html podría tener la siguiente estructura:

html body h1 nav p p footer p

Las páginas de escritores podrían tener la siguiente estructura:

html body h1 p p aside p footer p

Las imágenes de escritores se han insertado dentro de una sección <aside>, pero podría no haberse hecho así.

Etiquetas

Además de las secciones comentadas en el apartado anterior, en este ejercicio se han utilizado las siguientes etiquetas:

Atributos

En este ejercicio se han utilizado los siguientes atributos:

Clases

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.

Fuentes

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.

Imágenes

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>.

Enlaces

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

Estilos

Estas son las propiedades CSS utilizadas en este ejercicio:

Solución del 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.