En la cabecera <head> de la página hay que:
Al desactivar la hoja de estilo se pueden identificar las siguientes etiquetas:
En la vista con estilo, los párrafos que contienen las fechas tiene color de fondo, lo que indica que se ha utilizado alguna etiqueta de texto en línea. Por tratarse de una fecha, lo lógico es utilizar la etiqueta <time>.
En la vista con estilo algunos fragmentos de texto se ven de forma diferente al resto (en un caso con fondo blanco y color rojo, en otro caso de color azul), pero al quitar el estilo esos fragmentos se ven con letra normal. Como además el contenido no corresponde a ninguna etiqueta de texto en línea concreta, se debe utilizar la etiqueta <span>.
A los elementos <time> hay que añadirles el atributo datetime ya que el formato de la fecha no es uno de los admitidos. El valor del atributo puede seguir el formato AAAA-MM-DD y se hará coincidir con el valor contenido por cada etiqueta.
En la página hay dos tipos de párrafos <p>:
Esta situación se puede resolver usando dos clases, una para cada tipo de párrafo, o usando un clase (dando clase sólo a uno de los tipos de párrafos). En este caso, yo he dado solamente clase a los párrafos con las fechas:
En la página hay también dos clases de <span>. En este caso, he definido dos clases:
En este ejercicio se utiliza el tipo de letra genérico sans-serif.
Para que el título <h1> se vea pegado al borde de la ventana, es necesario poner a 0 el margen margin de <body> y de <h1>.
Para que al final de la página, el texto no quede pegado al borde inferior de la ventana, se puede poner margen margin-bottom a <body>.
Los márgenes laterales de la página margin-left y margin-right varían de tamaño cuando la ventana se hace más estrecha o ancha, por lo que están expresados en %
Para que el texto de <h1> no se vea pegado al borde de la ventana, es necesario poner padding a <h1>.
El color de fondo de los párrafos con fechas no se ve de lado a lado de la pantalla sino que solamente afecta al texto, así que la propiedad background-color hay que ponérsela a la etiqueta de texto en línea <time> y no al párrafo <p class="fecha">. El margen entre el texto y el borde se consigue con padding en <time>.
Las líneas negras que separan cada apartado se pueden asignar como border-top a los párrafos <p class="fecha">. Para separarlos del texto es necesario poner márgenes margin-top y padding-top.
Las líneas grises son bordes border-bottom de <h2>.
Al restablecer el estilo se pueden identificar las propiedades utilizadas:
El código HTML del ejercicio puede consultarse abriendo la página web del ejercicio Déjà vu 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 Déjà vu.
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.