Margin Collapse

Contactar con el profesor

Ejercicio dejavu

La etiqueta time se usa para marcar fechas y horas en un formato que entiendan los ordenadores. Dicha fecha puede ser el contenido de la etiqueta o puede ir en el atributo datetime con lo cual el contenido puede ser cualquier cosa.

Descomponiendo la página en rectángulos (divs)

Si tratas de descomponer esta página rectángulos, verás que cuenta con cinco artículos. Cada uno de esos artículos en un rectángulo (un div). Es la estructura típica que tienen los blogs, y la forma en que se maquetan es exactamente igual: cuando tienes una página con varios artículos, cada artículo está delimitado por un rectángulo.

Además, este ejercicio tiene una peculiaridad. En muchas ocasiones, todo el contenido de una web está embebido en una capa contenedora. En este caso, ocurre así, salvo por la capa superior de la cabecera, que no pertenece al container.

Este ejercicio no debería resultar especialmente largo. No tienes por qué respetar los textos que yo he introducido. Puedes meter cualquier otro texto, lorem ipsum, etc. Una vez que hayas concluído la maquetación del primer artículo… ya está todo hecho. Los otros cuatro restantes son prácticamente iguales, sólo que aplicando los estilos a otras porciones de texto.

Para maquetar los textos, lo correcto sería identificar cada estilo de texto con un class diferente y utilizarlo cuando sea necesario. Como verás, los diferentes estilos de texto utilizados en este ejericio son:

  1. Texto rojo sobre fondo blanco
  2. Texto azul
  3. Punteado rojo sobre texto grande
  4. Texto en negrita

Recomendación

Aunque el ejercicio es sencillo, tiene bastantes detalles. No sería muy complicado hacer una web que se pareciese remotamente y decir: “el ejercicio ya está hecho :D”. Vamos a intentar hacer las cosas bien. Vamos a intentar que la web que hagas sea un calco (en lo que se refiere a estilos, no en contenido) a la que te he propuesto. Ese es el objetivo.

← display:block, inline, inline-block
Padding y width →

Aviso Legal | Política de privacidad