En la cabecera <head> de la página hay que:
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:
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.
Además de las etiquetas que se muestran en la imagen del apartado anterior (<h1>, <section>, <h2>, <article> y <h3>), la página sólo contiene párrafos <p>.
Las dos secciones <section> (programas de escritorio y programas de Internet) no se distinguen en su aspecto visual, pero sí en su posición, por lo que se deben utilizar clases o ids para distinguirlas.
En este caso se ha preferido utilizar id, porque los valores de esos atributos no se deberían repetir (no querríamos que dos secciones <section> se mostraran en el mismo lugar).
Así, se pueden definir dos id:
Cada grupo de programas (<section>) está una posición independiente. Eso se puede conseguir con posicionamiento absoluto (aunque en este caso también se podría conseguir con posicionamiento flotante).
Al variar el ancho de la ventana se puede observar que el ancho de las secciones cambia, pero su posición relativa no. Eso indica que tanto el ancho width como la posición left y right están definidos en porcentaje (%).
Sin embargo, al hacer zoom, las secciones suben y bajan en función del tamaño del título. Eso indica que la posición superior top está definida en rem.
Por otro lado, la altura de cada sección se adapta al contenido, lo que indica que no se ha definido ni la altura height ni la posición inferior bottom en la hoja de estilo.
Estas son las propiedades CSS utilizadas:
El código HTML del ejercicio puede consultarse abriendo la página web del ejercicio Software libre 1 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 1.
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.