Ejercicios de CSS

C.F.G.S. Administracin de Sistemas Informticos I.E.S. Celia Vias. Curso 2005/2006

Ejercicio 01 Crea la pgina ejercicio_01.html imitando la que aparece ms abajo. Utiliza en encabezado <h1> para el ttulo y una tabla para el resto. No aadas ninguna etiqueta de formato.

Crea, del mismo modo, una pgina para la pelcula "El mtodo" y llmala "el_metodo.html". El texto y las imgenes estn disponibles con el material que se te ha facilitado para hacer los ejercicios. El ttulo se hace con un encabezado <h1> y el resto con una tabla. Enlaza las dos pginas como aparece en las figuras.

Ejercicios de CSS

Ejercicio 02 Formatea las dos pginas 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 pgina: color de fondo (amarillo plido), color del texto (negro), alineacin del texto (centrado), tamao del texto (10 puntos) y fuente (verdana) Para el encabezado <h1>: fuente (verdana), tamao (24 puntos), color (naranja), y mrgenes con el prrafo anterior y posterior (6 puntos) Para las celdas de la tabla: fuente (verdana negrita), tamao (10 puntos) Para el texto de los enlaces (<a>): deben verse en color azul marino en lugar de negro, sin subrayar y volvindose de color naranja al situar el ratn encima. En la pgina principal
o o o El texto "Comedia" tendr una fuente "Comic Sans MS" negrita de 14 puntos en color verde. El texto "Accin" usar una fuente "Impact" de 14 puntos en color marrn. El texto "Drama" usar una fuente "Book Antiqua" cursiva de 14 puntos en color azul.

Adems de este formato general, aplicaremos los siguientes formatos a zonas especficas del texto: -

En la pgina de la pelcula, las celdas de la izquierda tendrn el fondo gris plata y el texto en color blanco.

Al final, el aspecto de las dos pginas debe ser el siguiente:

Ejercicios de CSS

Ejercicio 03 Crea la pgina de la pelcula "Wallace & Gromit". Llmala "wallace.html" y enlzala con la pgina principal. Utiliza exactamente el mismo formato que en el caso de la pgina de "El mtodo". Observa cmo, con CSS, se pueden crear pginas de formato similar de forma mucho ms rpida que slo 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

Ejercicio 04 Cambia el archivo CSS para que la fuente por defecto de las celdas de las tablas sea "Century Gothic" normal (no negrita). Fjate en que basta con cambiar una lnea del archivo CSS para modificar de golpe el formato de todas las pginas. Ejercicio 05 Este es un pequeo ejercicio para formatear listas con CSS. Intenta reproducir la pgina que aparece aqu abajo y guarda el archivo con el nombre "ejercicio_05.html" (En este caso, puedes insertar el cdigo CSS dentro del archivo HTML en lugar de escribirlo en un archivo a parte, ya que no lo vamos a reutilizar en otras pginas)

Tipo de vieta: square Fuente: Arial de 14 puntos Color: azul

Tipo de vieta: guitarra.gif Fuente: Times de 16 puntos, negrita Color: Marrn Margen izquierdo de 2 cm

Tipo de vieta: nmeros romanos en mayscula Fuente: Arial de 14 puntos Color: Verde

Ejercicios de CSS

Ejercicio 06 Practica con los cuadros/capas de CSS para intentar conseguir una pgina web como la de la figura. Gurdala con el nombre "ejercicio_06.html"

Ejercicios de CSS

Ejercicio 07 Mezcla tus habilidades adquiridas con HTML y CSS para conseguir un diseo complejo como el de la figura. Hay varias formas de resolverlo, pero puede ser buena idea usar una tabla y luego cambiar ligeramente la posicin de las celdas con CSS. Lo nico que est prohibido es usar etiquetas y atributos de formato de HTML (como la etiqueta <font>, el atributo "border", el atributo "cellpadding", etc). En su lugar, utiliza reglas y atributos de CSS. En el nmero correspondiente de PC-Cuadernos (pgs. 41 - 45) tienes un resumen de los atributos y valores ms 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

Ejercicio 08 (de ampliacin) Ms difcil todava. Intenta reutilizar el cdigo anterior para, con pequeas modificaciones, conseguir esta otra pgina. El resultado debera ser lo suficientemente flexible como para que se pudiera cambiar con facilidad la ubicacin de cada ficha, o bien aadir ms fichas al diseo. Cuando termines, prubalo con varios navegadores.