Prctica

HTML, CSS y JavaScript

Ejercicio 1. Maquetar con CSS a travs de un ejemplo
Se pide:
a) Descomprimir el archivo MaquetaryCSS-ej.zip en una carpeta denominada css.
b) Descomprimir el archivo pack-imgenes.zip en una carpeta denominada css/images.
c) Ejecutar todos los pasos del tutorial denominado Maquetar una pgina con CSS,
utilizando como editor de HTML y CSS el Crimson Editor.

Ejercicio 2. Maquetar con CSS Mi sitio web

Dada la pgina MiSitioWeb.html sin estilo (Figuras 1a y 1b) y con estilo (Figura 2), se pide:
a) Programar el cdigo HTML correspondiente la pgina web MiSitioWeb.html de las Figuras
1a y 1b.
b) Determinar las reglas CSS necesarias para mostrar la pgina web MiSitioWeb.html con el
estilo de la Figura 2.
c) Incluir una foto o imagen cualquiera y los iconos del validador de CSS y de XHTML.

Dpto. LSI, Escuela Universitaria de Ingeniera de Vitoria-Gasteiz.

HTML, CSS y JavaScript

Figura 1a

2
Gasteiz.

Dpto. LSI, Escuela Universitaria de Ingeniera de Vitoria-

HTML, CSS y JavaScript

Figura 1b

Dpto. LSI, Escuela Universitaria de Ingeniera de Vitoria-Gasteiz.

HTML, CSS y JavaScript

Figura 2

Ejercicio 3. HTML, CSS y JavaScript

Crear la pgina Acceso.html y codificar la validacin de sus datos en JavaScript en un fichero
denominado Validacion.js.

Se deben tener en cuenta los siguientes aspectos:

4
Gasteiz.

Dpto. LSI, Escuela Universitaria de Ingeniera de Vitoria-

HTML, CSS y JavaScript

El formulario, el campo de texto del DNI y el botn de seleccin de la letra se

denominan frmAcceso, txtDNI y sLetra respectivamente.

Los controles a validar del formulario son que el DNI es obligatorio y numrico y que
la seleccin de la letra debe ser correcta. En caso de error, se deben visualizar segn sea el
caso los mensajes Completar el campo txtDNI, Teclear un DNI (sin letras, slo
nmeros) y La letra del NIF es incorrecta. Seleccionar la letra . En los puntos
suspensivos tiene que aparecer la letra que el usuario debe elegir nuevamente.

El algoritmo para calcular la letra del NIF es:

-

Calcular el resto de dividir el nmero del DNI por 23.

La letra del NIF corresponde al carcter obtenido de la cadena TRWAGMYFPDXBNJZSQVHLCKE en funcin del valor del resto (ver Tabla 1).
Rest
o
0
1
2
3
4
5

Letr
a
T
R
W
A
G
M

Rest
o
6
7
8
9
10
11

Letr
a
Y
F
P
D
X
B

Rest
o
12
13
14
15
16
17

Letr
a
N
J
Z
S
Q
V

Rest
o
18
19
20
21
22

Letra
H
L
C
K
E

Tabla 1
Se pide:
a) A partir del cdigo ya obtenido en la prctica anterior, codificar algunas de las siguientes
reglas CSS en un archivo denominado estilo.css.
El texto IDENTIFICACIN MEDIANTE EL NIF se puede incluir en un contenedor
denominado cabecera con un fondo de color gris y con un tamao de letra de 24px
en color rojo.
Los textos DNI y Letra y los campos de entrada de datos se pueden incluir en otro
contenedor denominado principal con un borde de color negro y de grosor 5px y con
un tipo de letra Verdana y de tamao 14px.
Los botones se pueden incluir en otro contenedor denominado fondo y se pueden
mostrar como enlaces, que cambian de color cuando son activados, visitados, etc.
b) Crear una nueva pgina web denominada Bienvenid@.html que muestre el texto
BIENVENID@ AL EXAMEN con las mismas caractersticas del contenedor cabecera
del fichero estilo.css.

Dpto. LSI, Escuela Universitaria de Ingeniera de Vitoria-Gasteiz.

HTML, CSS y JavaScript

c) Modificar el/los fichero/s necesarios con la instruccin window.open(.html), para

que se vea la pgina web anterior, cuando los datos introducidos en Acceso.html sean
correctos.

Ejercicio 4. Reglas CSS

Se debe tener en cuenta los contenidos de las Figuras 1a y 1b:

La etiqueta h1 corresponde a Mi sitio web.

La etiqueta h2 corresponde a Ttulo del contenido.

La etiqueta h3 corresponde a los subapartados.

La etiqueta h4 corresponde a las secciones.

La etiqueta p corresponde a Escribo algo para rellenar.

Se pide:
a) Crear una carpeta denominada Estilos que va a contener todas las hojas de estilo para
este ejercicio.

1.css: Escribir una regla para que el texto de los elementos h1 y h3 sea rojo.

2.css: Escribir una regla para que todos los elementos de la pgina aparezcan en verde.

3.css: Escribir una clase que defina un fondo amarillo a los elementos h1 y p.

4.css: Escribir clases para los siguientes estilos: fondogris, textoverde y

textoamarillo y aplicar la primera y la tercera a un prrafo o elemento p, y la
primera y la segunda al texto de una divisin o elemento div.

5.css: Escribir una regla que establezca fondo rojo para los elementos que tengan un
atributo id y cuyo valor sea menu.

6.css: Escribir una regla que establezca el color del texto en negro sobre fondo rojo
para todos los elementos que tengan un atributo id.

7.css: Escribir las reglas que seleccione los prrafos incluidos en body y los muestre
como texto de color gris, y los prrafos incluidos en div y los muestre con texto
marrn.

8.css: Escribir una regla que muestre en azul el texto de los elementos span dentro de
los prrafos o elementos p y cuyo texto sea algo para rellenar.

6
Gasteiz.

Dpto. LSI, Escuela Universitaria de Ingeniera de Vitoria-

HTML, CSS y JavaScript

9.css: Escribir las reglas necesarias para que en una lista los elementos li se muestren
en fondo verde y para que los enlaces con texto Vnculo se muestren en color rojo al
pasar el ratn por encima o al hacer clic.

Dpto. LSI, Escuela Universitaria de Ingeniera de Vitoria-Gasteiz.