UD2 Ejercicios

UNIDAD 2: Lenguajes para la visualizacin de informacin
Documento con los ejercicios del tema 2, referentes a XHTML y CSS
U.2: Lenguajes para la visualizacin de la informacin
Tema 2: XHTML
1. Elaboracin de la primera pgina web. Se crea una carpeta en el disco duro para
guardar las pginas web. Se abre el Bloc de notas para crear la web y se escribe el
siguiente texto.
<html>
<head>
<title> Mi primera pgina web
</head>
Este es el cuerpo de mi pgina web

</body>
Nmbrala actividad1.html y gurdala en la carpeta creada. Si detectas algn error,

corrgelo.
Visualiza la pgina utilizando algn navegador web. Asegrate que es vlida segn la
W3C.
2. Confeccionar el titular de un peridico con un ttulo de nivel 1. Luego definir dos

ttulos de segundo nivel con los textos (Noticias polticas y Noticias deportivas),
en cada una de estas secciones definir dos titulares de tercer nivel con un prrafo
cada una. Al final de la pgina mostrar un ttulo de cuarto nivel con el nombre de
la empresa propietaria del peridico.

3. Determinar el cdigo HTML correspondiente a la siguiente pgina:
4. Estructurar y marcar el siguiente texto extrado de la Wikipedia:

http://es.wikipedia.org/wiki/Exploracin_espacial

5. Estructurar y marcar el siguiente texto para que el navegador lo muestre con el
aspecto de la siguiente imagen:
Cosas a tener en cuenta:
Utilizamos dos acrnimos:

o JPL: Laboratorio de Propulsin a Chorro.
o NASA: National Aeronautics and Space Administration
6. Realiza los cambios oportunos en el ejercicio anterior para definir la palabra

perenne con la ayuda de la etiqueta <dfn>
Tenemos la definicin de perenne, que es: que dura todo el ao
7. Determinar el cdigo HTML que corresponde al siguiente documento:
8. Determinar el cdigo HTML que corresponde a la siguiente lista anidada simple:

9. Determinar el cdigo HTML que corresponde a la siguiente lista anidada:
10. A partir de la estructura de directorios y archivos indicada en la siguiente imagen:

a) Crear la siguiente pgina llamada indice.html que sirva como pgina principal
del sitio:
b) Crear la pgina de ndice del portfolio:

11. Modificar la pgina de ndice del portfolio del ejercicio 10 para mostrar
directamente las imgenes de los proyectos.
12. Enlazar el favicon en todas las pginas del ejercicio 10 y aadir todos los
atributos posibles a los enlaces.
13. Determinar el cdigo HTML necesario para crear la siguiente tabla que se
muestra a continuacin:
Utilizar las celdas de cabecera donde sea necesario y aadir todos los atributos
posibles.

14. Determinar el cdigo HTML necesario para crear la tabla que se muestra en la
siguiente imagen. Utilizar las celdas de cabecera donde sea necesario y aadir
todos los atributos posibles.

15. Determinar el cdigo HTML necesario para crear la tabla que se muestra en la
siguiente imagen:
Emplear las etiquetas <table>, <tr>, <td>, <th>, <caption> y los atributos colspan,
rowspan, abbr, scoop, summary.
10

16. Determinar el cdigo HTML necesario para crear el formulario que se muestra en
la siguiente imagen:
a) Elegir el mtodo ms adecuado para el formulario (GET o POST) y cualquier

otro atributo necesario.
b) La aplicacin que se encarga de procesar el formulario se encuentra en la raz
del servidor, carpeta "php" y archivo "insertar_cv.php" .
c) El nombre puede tener 30 caracteres como mximo, los apellidos 80
caracteres y la contrasea 10 caracteres como mximo.
d) Asignar los atributos adecuados al campo del DNI.
e) Por defecto, debe estar marcada la casilla de suscripcin al boletn de
novedades.
11

17. Determinar el cdigo HTML necesario para crear el formulario que se muestra en
la siguiente imagen:
12
Ejercicios CSS
18. A partir del cdigo HTML y CSS que se muestra, aadir los selectores CSS que
faltan para aplicar los estilos deseados. Cada regla CSS incluye un comentario en
el que se explica los elementos a los que debe aplicarse:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejercicio de selectores</title>
<style type="text/css">
/* Todos los elementos de la pagina */
{ font: 1/1.3em Arial, Helvetica, sans-serif; }
/* Todos los parrafos de la pagina */

{ color: #555; }
/* Todos los prrafos contenidos en #primero */

{ color: #336699; }
/* Todos los enlaces la pagina */

{ color: #CC3300; }
/* Los elementos "em" contenidos en #primero */

{ background: #FFFFCC; padding: .1em; }
/* Todos los elementos "em" de clase "especial" en toda la pagina */

{ background: #FFCC99; border: 1px solid #FF9900; padding: .1em; }
/* Elementos "span" contenidos en .normal */

{ font-weight: bold; }
</style>
</head>
13
<body>
<div id="primero">
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>.
Praesent blandit nibh at felis. Sed nec diam in dolor vestibulum aliquet.
Duis ullamcorper, nisi non facilisis molestie, <em>lorem sem aliquam
nulla</em>, id lacinia velit mi vestibulum enim.</p>
</div>
<div class="normal">
<p>Phasellus eu velit sed lorem sodales egestas. Ut feugiat. <span><a
href="#">Donec porttitor</a>, magna eu varius luctus,</span> metus massa
tristique massa, in imperdiet est velit vel magna. Phasellus erat. Duis
risus. <a href="#">Maecenas dictum</a>, nibh vitae pellentesque auctor,
tellus velit consectetuer tellus, tempor pretium felis tellus at metus.</p>
<p>Cum sociis natoque <em class="especial">penatibus et magnis</em> dis

parturient montes, nascetur ridiculus mus. Proin aliquam convallis ante.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Nunc aliquet. Sed eu metus. Duis justo.</p>
<p>Donec facilisis blandit velit. Vestibulum nisi. Proin volutpat, <em

class="especial">enim id iaculis congue</em>, orci justo ultrices tortor, <a
href="#">quis lacinia eros libero in eros</a>. Sed malesuada dui vel quam.
Integer at eros.</p>
</div>
</body>
</html>
14

19. Implementa una pgina para que tenga el mismo aspecto que el de la siguiente
imagen:
En este ejercicio, se deben utilizar los colores: teal, red, blue, orange, purple, olive,
fuchsia y green.
15

20. Implementar una pgina Web que muestre vuestro horario. Los mdulos los
identificaremos como acrnimos y contendrn un enlace a la parte inferior de la
pgina donde escribiremos el nombre completo de cada mdulo.
Podra quedar como la figura siguiente:
16

21. Determinar las reglas CSS necesarias para mostrar la siguiente tabla con el
aspecto final mostrado en la imagen (modificar el cdigo HTML que se considere
necesario aadiendo los atributos class oportunos).
Tabla original:
Tabla original:
Ayuda:
Alinear el texto de las celdas, cabeceras y ttulo. Definir los bordes de la tabla,
celdas y cabeceras (color gris oscuro #333).
Formatear las cabeceras de fila y columna con la imagen de fondo

correspondiente en cada caso (fondo_gris.gif, euro.png, dolar.png, yen.png,
libra.png). Modificar el tipo de letra de la tabla y utilizar Arial. El color azul
claro es #E6F3FF.
Mostrar un color alterno en las filas de datos (color amarillo claro #FFFFCC).
17

22. Definir las reglas CSS que permiten mostrar los enlaces con los siguientes estilos:
En su estado normal, los enlaces se muestran de color rojo.

Cuando el usuario pasa su ratn sobre el enlace, se muestra con un color de
fondo rojo y la letra de color blanco.
Los enlaces visitados se muestran en color gris claro.
18

23. Crea varias pginas que muestren datos de las capitales europeas. La actividad
consta de una pgina principal (indice.html) con enlaces que accedern a las
dems pginas creadas. Para cada capital se crear una pgina (madrid.html,
roma.html, paris.html) en la que aparezca un prrafo con informacin sobre ella
y una fotografa de la misma.
Para body: Relleno a la izquierda de 12em, letra Arial, color de letra negro y
color de fondo amarillo.
Para la cabecera h1: Tipo de letra Comic Sans.
Para la lista de los enlaces: Relleno y margen a 0, posicin fija y en una
posicin de 50px a la izquierda y 100px arriba.
Para las imgenes: Colcalas de forma que floten a la derecha.
Para el prrafo: Relleno de 10px en todas las posiciones, margen a la derecha
de 30em, color de fuente negra, color de fondo gris y un borde de color
marrn y de 5px.
Guarda los estilos en un archivo de estilos y enlzalo dentro de cada una de las
pginas.
19

24. Utiliza el cdigo de la actividad anterior y cambia la lista por un men con el
siguiente aspecto.
25. Realiza una pgina Web cuyo resultado sea el que se muestra a continuacin:
Los mens tendrn el siguiente aspecto:
20

26. Modificar el men vertical sencillo para que muestre el siguiente
comportamiento:
Los elementos deben mostrar una imagen de fondo (flecha_inactiva.png):
Cuando se pasa el ratn por encima de un elemento, se debe mostrar una

imagen alternativa (flecha_activa.png):
El color de fondo del elemento tambin debe variar ligeramente y mostrar un

color gris ms oscuro (#E4E4E4) cuando se pasa el ratn por encima.
21

UD2 Ejercicios

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

UD2 Ejercicios

Caricato da

Copyright:

Formati disponibili

UNIDAD 2: Lenguajes para la visualizacin de informacin

Documento con los ejercicios del tema 2, referentes a XHTML y CSS

U.2: Lenguajes para la visualizacin de la informacin

Este es el cuerpo de mi pgina web

Nmbrala actividad1.html y gurdala en la carpeta creada. Si detectas algn error,

2. Confeccionar el titular de un peridico con un ttulo de nivel 1. Luego definir dos

U.2: Lenguajes para la visualizacin de la informacin

4. Estructurar y marcar el siguiente texto extrado de la Wikipedia:

U.2: Lenguajes para la visualizacin de la informacin

Cosas a tener en cuenta:

Utilizamos dos acrnimos:

6. Realiza los cambios oportunos en el ejercicio anterior para definir la palabra

Tenemos la definicin de perenne, que es: que dura todo el ao

U.2: Lenguajes para la visualizacin de la informacin

7. Determinar el cdigo HTML que corresponde al siguiente documento:

8. Determinar el cdigo HTML que corresponde a la siguiente lista anidada simple:

U.2: Lenguajes para la visualizacin de la informacin

10. A partir de la estructura de directorios y archivos indicada en la siguiente imagen:

U.2: Lenguajes para la visualizacin de la informacin

b) Crear la pgina de ndice del portfolio:

U.2: Lenguajes para la visualizacin de la informacin

U.2: Lenguajes para la visualizacin de la informacin

U.2: Lenguajes para la visualizacin de la informacin

U.2: Lenguajes para la visualizacin de la informacin

a) Elegir el mtodo ms adecuado para el formulario (GET o POST) y cualquier

U.2: Lenguajes para la visualizacin de la informacin

U.2: Lenguajes para la visualizacin de la informacin

/* Todos los parrafos de la pagina */

/* Todos los prrafos contenidos en #primero */

/* Todos los enlaces la pagina */

/* Los elementos "em" contenidos en #primero */

/* Todos los elementos "em" de clase "especial" en toda la pagina */

/* Elementos "span" contenidos en .normal */

U.2: Lenguajes para la visualizacin de la informacin

<p>Cum sociis natoque <em class="especial">penatibus et magnis</em> dis

<p>Donec facilisis blandit velit. Vestibulum nisi. Proin volutpat, <em

U.2: Lenguajes para la visualizacin de la informacin

U.2: Lenguajes para la visualizacin de la informacin

U.2: Lenguajes para la visualizacin de la informacin

Formatear las cabeceras de fila y columna con la imagen de fondo

U.2: Lenguajes para la visualizacin de la informacin

En su estado normal, los enlaces se muestran de color rojo.

U.2: Lenguajes para la visualizacin de la informacin

U.2: Lenguajes para la visualizacin de la informacin

Los mens tendrn el siguiente aspecto:

U.2: Lenguajes para la visualizacin de la informacin

Los elementos deben mostrar una imagen de fondo (flecha_inactiva.png):

Cuando se pasa el ratn por encima de un elemento, se debe mostrar una

El color de fondo del elemento tambin debe variar ligeramente y mostrar un

Potrebbero piacerti anche