En este primer ejercicio vamos a hacer una pequeña web de ejemplo utilizando las tablas de HTML para estructurar el contenido. Nuestra tabla va a tener cuatro filas y una única columna. Cada una de estas cuatro celdas tendrá un identificador (header, nav, content, footer) para poder asignar el estilo apropiado.

En la primera fila vamos a crear la cabecera (identificador header) con el logo del curso (logo.jpg) y el texto "DADM". La imagen tendrá un alto de 50 píxeles y el texto será de color blanco con tamaño de 16 puntos.

A continuación incluiremos la barra de navegación con identificador "nav". Dentro de esta celda vamos a crear a su vez otra tabla con una única fila y tres columnas. Cada columna será de la clase "navElement" y contendrán los textos "Inicio", "Contenidos" y "Profesorado". Como estilo indicaremos que la clase "navElement" tenga el color de fondo "#f0f0f0" y que cambie al color "#005682" cuando el ratón pase por encima.

En la tercera celda de la tabla principal estará el cuerpo del documento, a esta celda le pondremos como identificador "content". Además para los 4 últimos párrafos crearemos una lista del tipo UL (lista no ordenada). Cada uno de los párrafos los tendremos que identificar como elementos de esta lista (mediante las etiquetas LI).

A la última celda le pondremos como identificador "footer" e incluiremos el texto "Dept. Ciencia de la Computación e IA". Como estilo le aplicaremos el color gris.

En este ejercicio vamos a modificar la Web que hemos hecho para el primer ejercicio, y en lugar de utilizar una tabla para la disposición lo vamos a hacer mediante elementos DIV.

Para la cabecera crearemos un DIV con identificador "header", en el que incluiremos el logo del curso (logo.jpg, con un alto de 50px) y el texto "DADM".

Para la barra de navegación crearemos un elemento DIV con identificador "nav", y dentro de este a su vez crearemos 3 cajas tipo DIV de la clase "navElement". Las cajas tendrán los textos "Inicio", "Contenidos" y "Profesorado".

En la sección central solo tendremos que escribir la etiqueta DIV de apertura, con el identificador "content", y la etiqueta DIV de cierre al final de este contenido.

El pie de página lo crearemos también utilizando una etiqueta DIV con el identificador "footer" y el texto "Dept. Ciencia de la Computación e IA".

Ahora tenemos que terminar de ajustar los estilos CSS para que la página se vea correctamente. Es importante fijarse en los cambios de esta hoja de estilo con respecto a la utilizada para las tablas. Para los elementos "header", "nav", "content" y "footer" definiremos un ancho del 100% e indicaremos que no se permiten elementos por su lado izquierdo (es decir, que deben de estar en una nueva línea, esto lo haremos mediante clear: left;). Para el estilo "navElement" indicaremos que se tiene que situar a continuación del anterior (en la misma línea, esto lo haremos mediantefloat: left;).

En este ejercicio vamos a terminar la web de ejemplo que hemos hecho para el ejercicio 2, añadiéndole el contenido de los enlaces que faltan. En primer lugar, dado que no tenemos plantilla, copiamos el fichero resultado del ejercicio anterior y lo renombramos a "sesion01-ejercicio3.html". En este fichero vamos a modificar las opciones de menú para añadir enlaces a Inicio (un enlace a este mismo fichero),Contenidos (enlace a "sesion01-ejercicio3_contenidos.html") y Profesorado (enlace a "sesion01-ejercicio3_profesorado.html").

Al añadir estos enlaces se modificará su apariencia, por lo que tendremos que modificar la hoja de estilo. Añadiremos dos nuevos estilos ".navElement a" para indicar que el color de los enlaces es negro y que no se dibuje la línea de subrayado del enlace (text-decoration: none;). Y otro estilo ".navElement a:hover" para que el enlace cambie a color blanco cuando el ratón pase por encima.

El siguiente paso es pasar todos estos estilos a un fichero independiente, llamado "sesion01-ejercicio3_css.css". Simplemente tendremos que crear este fichero y cortar y pegar en él todos los estilos que ya tenemos creados. En el fichero principal HTML tendremos que cargar esta hoja de estilo, quedando solo una línea ().

Ahora vamos a crear los dos ficheros HTML que nos faltan. Para esto realizaremos dos copias del fichero HTML principal y las renombraremos a "sesion01-ejercicio3_contenidos.html" y "sesion01-ejercicio3_profesorado.html". En cada una de estas copias solo tendremos que cambiar el contenido de la zona central. Para el fichero de contenidos buscaremos el índice general de contenidos del curso y lo añadiremos en una lista no numerada (UL). Y para el fichero de profesorado añadiremos también en una lista no numerada los nombres de los profesores.

Por último vamos a hacer que al cambiar de sección se quede marcado el enlace correspondiente. Esto lo haremos añadiendo el estilo "visited" a la clase del enlace actual visitado, por lo que este enlace tendrá dos estilos. Para añadir más de un estilo a un elemento HTML lo podemos hacer separando los estilos con espacios, de la forma:"