Comentarios al ejercicio Software libre 2

Cabecera

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

Secciones

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:

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

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.

Etiquetas

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

Clases

En esta página no se necesitan definir clases o id.

Posicionamiento

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

body header left: 0 top: 0 width h1 main margin

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