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).
En la cabecera <head> de cada 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:
En vez de la etiqueta <article> se podría haber utilizado <section>.
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>.
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>:
Estas son las propiedades CSS utilizadas:
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.