para el título y una tabla para el resto. No añadas ninguna etiqueta de formato.

Crea, del mismo modo, una página para la película película "El método" y llámala " el_metodo.html". El texto y las imágenes están disponibles con el material que se te ha facilitado f acilitado para hacer los ejercicios. El título se hace con un encabezado

y el resto con una tabla. Enlaza las dos páginas como aparece en las figuras.

Ejercicios de CSS

2

Ejercicio 02

Formatea las dos páginas anteriores usando un único archivo CSS, llamado "ejercicio_02.css". En él debes definir los siguientes aspectos del formato: -

Para todo el cuerpo de la página: color de fondo (amarillo pálido), color del texto (negro), alineación del texto (centrado), tamaño del texto (10 puntos) y fuente (verdana)

-

Para el encabezado

: fuente (verdana), tamaño (24 puntos), color (naranja), y márgenes con el párrafo anterior y posterior (6 puntos)

-

Para las celdas de la tabla: fuente (verdana negrita), tamaño (10 puntos)

-

Para el texto de los enlaces (): deben verse en color azul marino en lugar de negro, sin subrayar y volviéndose de color naranja al situar el ratón encima.

 Además de este formato general, aplicaremos los siguientes formatos a zonas específicas del texto: -

-

En la página principal o

El texto "Comedia" tendrá una fuente "Comic Sans MS" negrita de 14 puntos en color verde.

o

El texto "Acción" usará una fuente "Impact" de 14 puntos en color marrón.

o

El texto "Drama" usará una fuente "Book Antiqua" cursiva de 14 puntos en color azul.

En la página de la película, las celdas de la izquierda tendrán el fondo gris plata y el texto en color blanco.

 Al final, el aspecto de las dos páginas debe ser el siguiente:

Ejercicios de CSS

3

Ejercicio 03

Crea la página de la película "Wallace & Gromit". Llámala " wallace.html" y enlázala con la página principal. Utiliza exactamente el mismo formato que en el caso de la página de "El método". Observa cómo, con CSS, se pueden crear páginas de formato similar de f orma mucho más rápida que sólo con HTML, porque, una vez que se ha definido el formato en el archivo CSS, puede reutilizarse todas las veces que sea necesario.

Ejercicios de CSS

4

Ejercicio 04

Cambia el archivo CSS para que la fuente por defecto de las celdas de las tablas sea "Century Gothic" normal (no negrita). Fíjate en que basta con cambiar una línea del archivo CSS para modificar de golpe el formato de todas las páginas. Ejercicio 05

Este es un pequeño ejercicio para formatear listas con CSS. Intenta reproducir la página que aparece aquí abajo y guarda el archivo con el nombre " ejercicio_05.html" (En este caso, puedes insertar el código CSS dentro del archivo HTML en lugar de escribirlo en un archivo a parte, ya que no lo vamos a reutilizar en otras páginas)

-

Tipo de viñeta: square Fuente: Arial de 14 puntos Color: azul

-

Tipo de viñeta: guitarra.gif  Fuente: Times de 16 puntos, negrita Color: Marrón Margen izquierdo de 2 cm

-

Tipo de viñeta: números romanos en mayúscula Fuente: Arial de 14 puntos Color: Verde

Ejercicios de CSS

5

Ejercicio 06

Practica con los cuadros/capas de CSS para intentar conseguir una página web como la de la figura. Guárdala con el nombre " ejercicio_06.html"

Ejercicios de CSS

6

Ejercicio 07

Mezcla tus habilidades adquiridas con HTML y CSS para conseguir un diseño complejo como el de la figura. Hay varias formas de resolverlo, pero puede ser buena idea usar una tabla y luego cambiar  ligeramente la posición de las celdas con CSS. Lo único que está prohibido es usar etiquetas y atributos de formato de HTML (como la etiqueta , el atributo "border", el atributo "cellpadding", etc). En su lugar, utiliza reglas y atributos de CSS. En el número correspondiente de PC-Cuadernos (págs. 41 - 45) tienes un resumen de los atributos y valores más importantes de CSS. Úsalo para descubrir atributos nuevos que te hagan falta para conseguir el resultado buscado. No olvides probar el resultado con varios navegadores, porque puede haber diferencias importantes.

Ejercicios de CSS

7

Ejercicio 08 (de ampliación)

Más difícil todavía. Intenta reutilizar el código anterior para, con pequeñas modificaciones, conseguir  esta otra página. El resultado debería ser lo suficientemente flexible como para que se pudiera cambiar con facilidad la ubicación de cada ficha, o bien añadir más fichas al diseño. Cuando termines, pruébalo con varios navegadores.