Comentarios al ejercicio Efemérides 14 de diciembre

Cabecera

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

Secciones

En la página se reconocen agrupaciones con color de fondo común o con un borde común, para las que tiene sentido utilizar secciones.

El dibujo siguiente muestra una posible elección de elementos de secciones para esta página:

body h1 main section h2 article h3 p article h3 p section h2 article h3 p article h3 p article h3 p footer p

En vez de las etiquetas <article> y <section>, se podrían haber utilizado sólo una u otra, o haberlas utilizado al revés.

Las secciones <section> y <article> contienen títulos <h2> y <h3> respectivamente.

Etiquetas

La página sólo contiene las etiquetas que se muestran en la imagen del apartado anterior (<main>, <h1>, <section>, <h2>, <article>, <h3>, <footer> y <p>.

Clases

No es necesario utilizar clases para distinguir los párrafos de las efemérides del párrafo del pie de página, ya que podemos utilizar selecctores de descendientes (article p o footer p).

Posicionamiento

Internet Explorer requiere que el bloque main tenga la propiedad display con el valor block.


Las tres secciones section tienen el mismo ancho y todos los artículos article tiene también el mismo ancho, mientras que las alturas de cada elemento dependen del contenido. Eso indica que sólo se ha establecido el ancho width, en unidades absolutas (rem o px, por ejemplo).

Las secciones se muestran una al lado de la otra. Además, al hacer zoom o al estrechar o ensanchar la ventana, el número de secciones por fila se ajusta automáticamente. Eso se puede conseguir con posicionamiento flotante.

Los artículos se muestran uno al lado del otro. Al estrechar o ensanchar la ventana no cambia la posición de los artículos, pero al hacer zoom el número de artículos por fila se ajusta automáticamente. Eso se puede conseguir con posicionamiento flotante.

El pie de página no se pone al lado de las secciones, lo que indica que el pie de página incluye la propiedad clear.

Para que el tamaño del bloque main tenga en cuenta las secciones flotantes se debe incluir la propiedad overflow con el valor auto. De esa manera las secciones se ven rodeadas con el fondo blanco del bloque main.

Estilos

Estas son las propiedades CSS utilizadas:

Solución del ejercicio

El código HTML del ejercicio puede consultarse abriendo la página web del ejercicio 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 Efemérides 14 de diciembre.

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.