En la cabecera <head> de la página hay que:
En la vista con estilo 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:
Al encabezado <header> se le da posicionamiento fijo, pero se podría haber dado posicionamiento fijo a <h1> y no haber creado la sección <header>.
Al bloque <main> se le da un margen superior bastante grande para que se muestre inicialmente por debajo del <header>. Se podría no haber creado el bloque <main>, pero entonces a la primera sección <section> se le tendría que haber dado una clase o un id para darle un margen superior mayor que a la segunda sección.
En este ejercicio se han utilizado secciones <section>, pero no se les aplica ninguna propiedad CSS, por lo que se podrían omitir.
En vez de las etiquetas <article> y <section>, se podrían haber utilizado sólo una u otra, o haberlas utilizado al revés.
Además de las etiquetas que se muestran en la imagen del apartado anterior (<header>, <h1>, <main>, <section>, <h2>, <article> y <h3>), la página sólo contiene párrafos <p>.
En esta página no se necesitan definir clases o id.
El único elemento con posicionamiento de esta página es el encabezado <header>, concretamente con posicionamiento fijo. Se sitúa al principio de la página con top: 0, left: 0, ocupando todo el espacio con width: 100%. No hace falta darle altura.
Como el encabezado tiene posicionamiento, no se tiene en cuenta al colocar el resto de elementos de la página. Para que el bloque <main> no se oculte detrás del encabezado, se le puede dar un margin grande (expresado en rem, para que sea proporcional al tipo de letra).
Estas son las propiedades CSS utilizadas:
El código HTML del ejercicio puede consultarse abriendo la página web del ejercicio Software libre 2 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 Software libre 2.
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.