Comentarios al ejercicio Software libre 3

Páginas

Este ejercicio consta de dos páginas (escritorio.html e internet.html) enlazadas entre sí.

La hoja de estilo es común, por lo que las dos páginas web enlazan a la misma hoja de estilo (software-libre-3.css).

Cabecera

En la cabecera <head> de cada 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 nav main article h2 p article h2 p

En vez de la etiqueta <article> se podría haber utilizado <section>.

Etiquetas

Además de las etiquetas que se muestran en la imagen del apartado anterior (<h1>, <header>, <main>, <article> y <h2>), la página sólo contiene párrafos <p>.

El bloque de navegación <nav> contiene dos párrafos <p> que contienen enlaces <a>.

Posicionamiento

El único elemento con posicionamiento de esta página es el bloque de navegación <nav>, concretamente con posicionamiento fijo. Es suficiente con establecer la posición de la esquina superior izquierda con top y left, no hace falta darle altura y anchura, ya que el navegador ajustará el tamaño al contenido.

Los elementos <main> y <article> no necesitan posicionamiento. Es suficiente darles márgenes laterales para mostrarlos en la posición deseada.

El dibujo siguiente muestra cómo se podría definir la posición del bloque de navegación <nav>, <main> y <article>:

body header h1 nav left top main margin-left margin-right article margin-left margin-right

Estilos

Estas son las propiedades CSS utilizadas:

Solución del ejercicio

El código HTML del ejercicio puede consultarse abriendo las páginas del ejercicio Software libre de escritorio o Software libre de Internet 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 3.

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.