Aplicaciones Web (Tema 2 El Lenguaje HTML)

TEMA 2 El lenguaje HTML
1.Introduccin
Una pgina web HTML no es ms que un archivo de texto con un formato especial que son visualizadas
con una aplicacin llamada Navegador o Browser.
Dicha pgina contiene una serie de etiquetas de apertura para que el navegador sepa qu tiene que hacer
para mostrar la informacin en pantalla. Por ejemplo un navegador cuando encuentre la etiqueta <table>
sabr que en ese lugar de la pgina se mostrar una tabla.
Una etiqueta adems puede contener atributos que le darn al navegador informacin de cmo debe de
hacer la tarea indicada por dicha etiqueta. Si un navegador se encuentra con una la etiqueta <table
border=1> sabr que deber pintar una tabla con borde de grosor 1. El valor del atributo debe ir seguido
del igual y encerrado entre comillas dobles.
Por tanto mediante el uso de etiquetas y sus atributos le indicamos al navegador cmo representar el texto,
con qu fuente, color o formato, o dnde debe situar las tablas e imgenes que luego se vern en pantalla.
Las etiquetas se construyen utilizando los smbolos de menor < y mayor > encerrando el nombre de la
etiqueta junto con sus atributos. Pudindose escribir en mayscula o minscula pero por razones de
compatibilidad con el lenguaje XHTML lo haremos en minscula.
Normalmente la mayora de ellas contienen una etiqueta de cierre encerrada entre los smbolos < y />
que marca el fin del rea que se ve afectada por dicha etiqueta.
<b> Este es un texto en negrita </b> pero este texto no.
Sin embargo existen etiquetas que no tienen por qu cerrarse . Ahora bien, en XHTML, que es una evolucin
de HTML con una sintaxis ms estricta, todas las etiquetas se tienen que cerrar.
Ejemplo HTML:
<img src=gato.jpg>
Ejemplo XHTML:
<img src=gato.jpg />
Las etiquetas no se muestran obviamente en el navegador, pero la mayora de ellos permiten ver el cdigo
HTML si se desea:
Aplicaciones Web (Tema 2: El lenguaje HTML)

Aunque existen programas especializados para la creacin de pginas web (como DreamWeaver,
Frontpage) , y que nos facilitan mucho esta tarea, podramos crear una web con tan slo un editor de
textos, siempre y cuando tengamos un cierto conocimiento del lenguaje HTML.
En este tema nos centraremos en algunas de las principales etiquetas usadas en HTML versin 4.
2. Estructura bsica de una pgina HTML
Toda pgina web HTML deber comenzar con la etiqueta <html> y finalizar con la etiqueta </html>:
<html> : Marca el comienzo del documento HTML.

</html>: Marca el final de la pgina.
Ejercicio 1: Abre un editor de texto (bloc de notas), crea la pgina web mnima ,gurdala con el nombre
mi_primera_web.html y brela en el navegador.
<html>
</html>
Toda pgina debe contener una cabecera indicada con la etiqueta <head> y su cierre </head> dicha etiqueta
es el prlogo de la pgina.
A continuacin le sigue el cuerpo de la pgina encerrado entre las etiquetas <body> y su cierre </body>
que encerrar el contenido propiamente dicho de la web:
<html>
<head>
</head>
<body>
</body>
</html>
Una etiqueta puede contener a otra, a esto se le llama anidamiento de etiquetas. Si nos fijamos en el
ejemplo anterior la etiqueta HTML engloba tanto primero a la cabecera como al cuerpo que le sigue.

Sin embargo hay que tener cuidado en hacer anidamientos correctamente, es decir una etiqueta que se abri
antes que otra no puede cerrarse antes que la que contiene. Vemoslo el siguiente ejemplo errneo:
<html>
<head>
</head>
<body>
</html>
</body>
Ejercicio 2: Indica si el siguiente anidamiento de etiquetas es correcto o no:
<etiquetaA>
<etiquetaC>
<etiquetaB>
</etiquetaB>
</etiquetaC>
</etiquetaA>
El navegador ignora los saltos de lnea ni espacios en blanco que coloquemos entre las etiquetas por tanto
los 2 ejemplos siguientes seran equivalentes:
<html>
<body>
Hola mundo
</body>
</html>
<html> <body> Hola Mundo </body></html>
*La cabecera de la pgina <head>: Contiene informacin sobre la pgina en s y su contenido (salvo el
ttulo) no lo muestra el navegador.
Puede contener la etiqueta <title> que contiene el ttulo de la web que se mostrar en la barra de ttulo del
navegador:
<html>
<head>
<title> Diario Online de Granada </title>
</head>
</html>
O la etiqueta <meta /> que se utiliza para aadir informacin sobre la pgina. Esta informacin puede ser
utilizada por los buscadores.
La etiqueta tiene el atributo name que le da nombre al tipo de informacin .Para indicar el tipo de
informacin podemos utilizar cualquier palabra que deseemos, como puede ser "Autor", "Palabras clave",
"Descripcin", etc. Pero debido a que la mayora de buscadores estn en ingls, es preferible que el tipo de
informacin se especifique en ingls. Y se pueden especificar los siguientes atributos:

Tipo Significado
author Autor de la pgina
classification Palabras para clasificar la pgina en los

buscadores
description Descripcin del contenido de la pgina
generator Programa utilizado para crear la pgina
keywords Palabras clave
Y el atributo content con la informacin que contendr.
<head>
<meta name=author content=Rodolfo Torres />
<meta name=description content=educacion />
<meta name=keywords content= gratis cursos informatica online andalucia />
</head>
Tambin se puede utilizar la etiqueta <meta> para darle informacin al navegador sobre algo que deba hacer,
para ello usar el atributo http-equiv en lugar del name.
Por ejemplo, imaginemos que por algn motivo queremos que nuestra pgina se actualice automticamente
cada 30 segundos. En ese caso, deberamos utilizar la accin Refresh (actualizar). Podramos utilizar el
siguiente cdigo:
<html>
<head>
<meta http-equiv="Refresh" content="30" />
</head>
Ahora imaginemos que hemos cambiado la direccin en la que se encuentra nuestra pgina web, y queremos
que cuando algn usuario visite la pgina en la direccin antigua, a los 5 segundos el navegador lo redirija
automticamente a la direccin nueva. En ese caso podramos insertar el siguiente cdigo en la pgina que
se encuentra en la direccin antigua:
<html>
<head>
<meta http-equiv="Refresh" content="5; URL=http://www.juntadeandalucia.es"/>
</head>
</html>
Ejercicio 3: Investiga si existe alguna forma de indicar al navegador que no guarde la pgina en la memoria
cach.
*El cuerpo de la pgina <body>: El contenido de la pgina web est encerrado entre las etiquetas <body>.
El atributo bgcolor permite especificar el color de fondo de la web, bien con el nombre del color en ingls:
Valor Color Valor Color

black Negro olive Oliva
white Blanco purple Prpura
blue Azul lime lima
yellow Amarillo silver Plata
green Verde navy Azul marino
gray Gris fuchsia fucsia
maroon Marron aqua Agua
red Rojo teal teal

<body bgcolor=red>
</body>
Tambin podemos especificar la combinacin de 24 bits de color mediante el smbolo # seguido de 6

dgitos hexadecimales (los dos primeros indican la intensidad del rojo, los dos de en medio del verde y los
dos ltimos del azul):
<body bgcolor=#00ff3a>
</body>
Ejercicio 4: Entra en la siguiente web para ver los diferentes cdigos de color:
http://www.webtaller.com/utilidades/csscoder/colores.php
El atributo background permite establecer una imagen de fondo en la pgina, para ello habr que indicarle
como valor la URL del fichero de imagen.
<body background=http://www.otrapagina.com/fondo.jpg>
...
</body>
Si la imagen est en nuestro propio dominio bastar con indicarle la ruta y nombre del fichero:
<body background=imagenes/fondo.jpg>
...
</body>
Podemos obviar la ruta si la imagen est en la misma carpeta que el fichero html dentro del servidor:
<body background=fondo.jpg>
...
</body>
Si la imagen no es lo suficientemente grande para rellenar la pantalla, el navegador la repetir por todo el
cuerpo de la pgina.
Ejercicio 5: Prueba cambiar el fondo primero con una imagen pequea y luego con otra ms grande.
Podemos cambiar el color del texto normal de la pgina mediante el atributo text especificando bien un
color predefinido o bien el cdigo hexadecimal.
<body text=#009c11>
..
</body>
De la misma manera podemos cambiar el color por defecto de los enlaces con el atributo link y el de los
enlaces ya visitados con vlink:
<body link=green vlink=red >

<a href=http://www.google.es> Esto es un enlace</a>
</body>

Ejercicio 6: Crea una pgina en la que el color de los enlaces tanto visitado como no visitados sea naranja
mediante cdigo hexadecimal.
Se pueden tambin modificar los mrgenes superior , inferior, izquierdo y derecho con los atributos
topmargin, bottommargin, leftmargin y rightmargin respectivamente indicando los valores bien en
pxeles:
<body topmargin=100px leftmargin=50px >

Este es el contenido de la pgina
</body>
3. Saltos de lnea , prrafos y caracteres especiales
Todos los saltos de lnea que realicemos dentro del cdigo html son ignorados por el navegador a la hora de
interpretar la pgina. Es decir aunque escribamos el siguiente cdigo:
<html>
<body>
Este texto
Aparece
en una sola lnea.
</body>
</html>
El resultado aparecer en una sola lnea. Si queremos forzar a que el navegador inserte un salto de lnea
debemos utilizar la etiqueta <br/>. Esta etiqueta originalmente en HTML no tena cierre, pero en XHTML
es a la vez de apertura y cierre:
<html>
<body>
Este texto <br/>
aparece <br/>
en varias lneas.<br/>
</body>
</html>
Para evitar tener que poner estos saltos de lnea, usamos <p> , la etiqueta de prrafo y su cierre </p>. Todo
lo que encerremos entre estas etiquetas constituye un nico prrafo que el navegador interpretar como tal.
Adems podemos usar el atributo aling para alinear el prrafo a la izquierda (left, valor por defecto),
derecha (right), centro (center) o justificado (justify):
<html>
<body>
<p align=left>Esto es un prrafo justificado a la izquierda</p>
<p align=center>Esto es un prrafo justificado al centro</p>
<p align=right>Esto es un prrafo justificado a la derecha</p>
</body>
</html>
El navegador, al igual que no reconoce los saltos de lnea, tampoco reconoce los espacios en blanco.
Vemoslo en el siguiente ejemplo:
<html>

<body>
Este texto estar contiguo.
</body>
</html>
El espacio en blanco es un carcter especial y la nica forma de introducirlo es mediante el cdigo de su

carcter especial correspondiente ( ).
<html>
<body>
Este texto no estar contiguo.
</body>
</html>
Algunos de los caracteres especiales que podemos usar son:
Smbolo Carcter especial

Espacio en blanco
á
é
í
ó
ú
Á
É
Í
Ó
Ú
"
< <
> >
Por tanto si queremos que en una pgina web se visualice correctamente una palabra con tilde deberamos de
usar caracteres especiales en lugar de escribirlo directamente con tilde en el cdigo HTML:
<body>
Web de Educación
</body>
Ejercicio 7: Investiga en Internet sobre otros caracteres especiales que pueden usarse en HTML.
Ejercicio 8:Escribe una web que muestre el mensaje La etiqueta <b> se usa para la negrita con caracteres
especiales.
En muchas ocasiones nos puede interesar que el navegador no modifique el aspecto de un prrafo porque ya
tiene el deseado, de esta manera respetar todos los espacios y saltos de lnea que pongamos. En ese caso
usaremos la etiqueta <pre> y su cierre </pre> para encerrar el texto preformateado:
<html>
<body>
<pre>
Este texto
se ver
tal cual aparece
</pre>
</body>
</html>
4. Formato del texto en una web

El formato del texto dentro del cuerpo de la pgina puede modificarse aplicando los siguientes formatos:
-Negrita (bold): Se encierra el texto entre las etiquetas <b> y </b>.
Esta <b> palabra </b> aparecer en negrita.
-Itlica o cursiva (italic): Se encierra el texto entre las etiquetas <i> y </i>.
Esta <i> palabra </i> aparecer en cursiva.
-Subrayado (underline): Se encierra el texto entre las etiquetas <u> y </u>.
Esta <u> palabra </u> aparecer en cursiva.
-Subndice: Se encierra el texto entre las etiquetas <sub> y </sub>.
La formula del agua es H <sub>2</sub>O
-Superndice: Se encierra el texto entre las etiquetas <sup> y </sup>.
El resultado de 2 <sup>3</sup> es 8
Podemos combinar varios formatos anidando sus etiquetas, por ejemplo si queremos escribir un texto en
negrita y cursiva, podremos hacerlo de las siguientes formas siempre y cuando se aniden correctamente:
<u><i>Texto</i></u>
<i><u>Texto</u></i>
Ejercicio 9: Crea una pgina web que muestre el siguiente contenido:
No slo se puede modificar el aspecto del texto, tambin se puede cambiar su tamao, tipo o color mediante
la etiqueta <font> .
Dicha etiqueta utiliza el atributo size para cambiar el tamao aceptando valores desde el 1 (muy pequeo)
hasta el 7 (muy grande). Si no se indica nada el valor por defecto es el 3:
<body>
El texto puede cambiar de <font size=6>tamao</font>
</body>
Ejercicio 10: Crea una pgina web que muestre el siguiente contenido:
Se puede cambiar de igual manera el color del texto mediante el atributo color con colores predeterminados
o en hexadecimal:
<body>
<font color=blue>Este texto est de color azul</font>
</body>
Ejercicio 11: Modifica el ejercicio anterior para que los nmeros aparezcan con los siete colores del arcoiris.

Otro atributo de <font> es face que permite cambiar el tipo de fuente usado por defecto indicndolo como
valor:
<body>
Este texto est en la fuente por defecto.
<font face=Impact>Este texto est en otro tipo de fuente</font>
</body>
El tipo de fuente deber de estar instalado en el ordenador del cliente, si no , el navegador emplear el tipo
de letra por defecto (Times New Roman), haciendo que el aspecto de la pgina sea imprevisible, por esa
razn debemos de usar tipos de fuente estndar.
Para evitar esto podemos secuenciar varios tipos de letra separados con comas para en caso de no encontrar
uno pruebe con el siguiente:
<body>
<font face=Impact, Arial>Caminante no hay camino</font>
</body>
Ejercicio 12: Crea un archivo html con que muestre tu nombre en Arial , tamao 4 y color azul, y tus
apellidos en Courier New, rojo y subrayado.
Cuando diseamos una web se debe organizar la informacin por temas, captulos , secciones o cualquier
otra divisin que nos permita hacerla ms legible. Para ello se pueden utilizar las etiquetas de encabezado
<hx> donde x es un valor del 1 al 6 segn la importancia en nuestra web:
<body>
<h1> Encabezado de nivel 1</h1>
</body>
Adems estos encabezados admiten el atributo align para alinearlos en la izquierda (left), derecha (right) o
centrados (center):
<body>
<h1 align=center> El Quijote: Prlogo </h1>
</body>
5.Comentarios en el cdigo
A medida que crece el tamao de un fichero HTML se puede hacer muy difcil seguir el cdigo escrito hasta
para la persona que lo est diseando. Para facilitar su seguimiento se pueden aadir comentarios a modo de
notas por medio de la etiqueta de apertura 
<html>

<hr width=50%/> 
</body>
</html>
Tambin admite el atributo align , pudiendo tomar por valores left, right o center (valor por defecto):
<hr width=50% align=left/> 
As como el grosor de la lnea con el atributo size expresado en pxeles:
<hr width=70% size=13/>
Para desactivar la sombra en la lnea usaremos el atributo noshade al que no se le asigna ningn valor:
<hr width=70% size=13 noshade/>
O colorearla con el atributo color:
<hr width=70% size=13 noshade color=red/>
8. Las imgenes
Un documento web podr contener imgenes si hacemos uso de la etiqueta <img> (no tiene etiqueta de
cierre). Con el atributo src (que proviene de SouRCe) podemos indicarle la URL del fichero de imagen que
tomar como fuente.
<img src=fotos/paisaje.jpg/>
Si no especificamos nada la imagen se mostrar con su tamao real pero podemos cambiarlo con los
atributos width y height indicando al navegador el ancho y alto respectivamente de la imagen tanto en
pxeles como en porcentaje con respecto al elemento que lo contiene:
<img src=fotos/paisaje.jpg width=50% height=200px/>
Podemos asignarle un borde a la imagen de un determinado grosor mediante el atributo border o incluso
hacer que se muestre un texto alternativo con alt , para que , cuando la imagen no pueda ser cargada , nos
hagamos una idea de su contenido.
<img src=fotos/paisaje.jpg border=2px alt=Paisaje martimo/>

La alineacin del texto con respecto a la imagen tambin es posible mediante align tanto horizontalmente a
la izquierda (left) o derecha (right) como verticalmente arriba (top) , abajo (bottom) o en medio (middle):
<img src=fotos/paisaje.jpg align=middle/>
Cuando tenemos ms de una imagen podemos determinar el espacio horizontal y vertical entre ellas con los
respectivos atributos hspace y vspace. Especificando la separacin entre ellas:
<img src=imagen1.jpg hspace=10px/>

<img src=imagen2.jpg hspace=10px/>
<img src=imagen3.jpg/>
Ejercicio 13: Descarga de Internet una imagen pequea y realiza con ella un mosaico de 2 columnas por 5
filas con una separacin entre ellas de 8 pxeles.
9. Los Enlaces (Links)
Los enlaces o hipervnculos son justamente la caracterstica ms importante del lenguaje HTML. Un enlace
es una conexin directa entre un elemento del documento web (ya sea hipertexto, imgenes, botones) y:
-Otro documento HTML.

-Otro punto del mismo documento HTML (ancla o anchor)
-Otro recurso de Internet (por ejemplo un archivo PDF).
Se basan en la etiqueta <A>, todo aquel elemento de la web encerrado entre esta etiqueta constituyen un
enlace. Para indicar el recurso enlazado se usa el atributo href con la URL del mismo que puede ser:
*Un recurso perteneciente a un dominio diferente que el documento: Habr que indicar la URL completa
del recurso (incluido el protocolo):
Pinche en <a href=http://www.ideal.es>este </a> enlace para ver el diario Ideal
Ejercicio 14: Crea una pgina web llamada indice.html con tus 5 enlaces favoritos.
*Un recurso perteneciente al mismo dominio que el documento: Cuando el enlace es a otro documento web
dentro de nuestro propio dominio bastar con indicar el nombre del recurso si ste est en la misma carpeta:
Pinche en <a href=temaprimero.html>este </a> enlace para el tema 1
O la ruta en caso de estar en diferentes carpetas:
Pinche en <a href=temario/temaprimero.html>este </a> enlace para el tema 1
Ejercicio 15: Crea dentro del escritorio 2 carpetas llamadas realmadrid y barcelona, en cada una de ellas
habr un documento web llamado plantilla.html con los nombres de sus jugadores. Escribe un archivo
HTML llamado indice.html en el escritorio que enlace a cada una de las plantillas.
*A otro punto del mismo documento (ancla, anchors o enlace interno): Para crear un enlace dentro de
nuestro mismo documento HTML primero debemos de definir cada una de las posiciones o anclas donde

queremos enlazar. Los anclas se crean con el atributo name seguido del nombre que queramos darle.
Cuando queramos enlazarlos basta con poner # seguida del nombre que le dimos al ancla. Vemoslo en el
siguiente ejemplo:
<html>
<body>
<h1>INDICE</h1>
<p><a href="#primera">Pinche aqui para ir a la primera seccin</a></p>
<p><a href="#segunda">Pinche aqui para ir a la segunda seccin</a></p>
<p><a href="#tercera">Pinche aqui para ir a la tercera seccin</a></p>
<hr/>
<a name="primera"></a> 
<h2>Seccion primera</h2>
<p>Contenido de la seccion 1</p>
<a name="segunda"></a> 
<h2>Seccion segunda</h2>
<a name="tercera"></a> 
<h2>Seccion tercera</h2>
</body>
</html>
Tambin podemos acceder a las anclas de un documento desde otro, por ejemplo si quisiramos acceder
desde otro documento a la seccin segunda del ejemplo anterior (supongamos que se guard en un fichero
llamado libro.html) :
Pinche <a href=libros.htm#segunda>aqu </a> para ver la seccin 2 de la otra web
Ejercicio 16: Escribe un documento web con tu currcum vitae y gurdalo con el nombre cv.html, crea
otro llamado indice.html con un ndice de enlaces que accedan a cada uno de los apartados del CV (datos
personales, formacin acadmica y experiencia laboral).
Para cambiar la ventana donde se abrir el enlace utilizaremos el atributo target que puede tomar los
siguientes valores:
- _self : Abrir el enlace en el mismo frame o marco que lo contena (es el valor por defecto).
- _blank: Fuerza al enlace a abrirse en una nueva ventana (o pestaa) del navegador.
- _parent: Abre el enlace en el conjunto de marcos (frameset) padre del marco actual.
- _top: Fuerza al enlace a abrirse en el 100% de la ventana del navegador.
- nombre_del_marco: Abre el enlace en el marco indicado.
Pinche <a href=libros.htm#segunda>aqu </a> para ver la seccin 2 de la otra web

Podemos crear imgenes que a la vez sean enlaces para ello bastar con anidar la etiqueta <img> dentro de
la etiqueta <a>:
<a href=http://www.google.es><img src=logo_google.jpg/></a>
Para facilitar agilizar la carga de pginas en Internet se suelen usar los thumbnails o miniaturas que son
versiones reducidas de ellas que permiten previsualizarlas y descargar la imagen entera slo en caso de estar
interesados. Para crear este tipo de imgenes existen multitud de programas , un ejemplo de ellos es
eXcale.
Ejercicio 17: Descarga de Internet las imgenes completas de los escudos de 10 de los clubs espaoles de
ftbol , y crea un ndice llamado escudos.html formado por sus correspondientes thumbnails dispuestos en
horizontal de manera que al pinchar sobre cada uno se abra la imagen completa del escudo en una nueva
ventana.
Ejercicio 18: Crea un lbum de fotos web con los 4 lugares ms interesantes de tu ciudad usando thumbnails
de manera que al pinchar sobre cada una de ellas se abra una nueva ventana/pestaa con la foto en grande
junto con una breve descripcin de cada uno.
10. Mapas
Un mapa en HTML es una especie de combinacin entre una imagen y varios enlaces. De manera que ,
dependiendo de la zona de la imagen que pinchemos , accederemos a un enlace u a otro. Los mapas son
usados frecuentemente para acceder a las diferentes web de una empresa por medio de una imagen del pas o
territorio por el que se extiende.
Un mapa se define con la etiqueta <map> especificando su nombre mediante el atributo name.
La etiqueta <map> contendr a su vez etiquetas <area> que definirn las distintas zonas de la imagen que
sern enlaces.
Cada una de las etiquetas <area> contendr un atributo shape que indicar la forma del rea definida
pudiendo tomar los siguientes valores:
rectangle o rect para definir una zona rectangular.

circle o circ si es un rea circular
polygon o poly si es una zona con forma de polgono.
default se utiliza para referirse al resto de la imagen que no ha sido definida con ninguna regin.
Para cada tipo de rea habr que definir sus coordenadas mediante el atributo coords que vara su valor en
funcin del tipo de forma escogida:
Para los rectngulos habr que indicar las coordenadas de la esquina superior izquierda (x1,y1) y la
esquina inferior derecha (x2,y2).
Si es un crculo habr que especificar el centro (x,y) junto con el radio r
Si es un polgono habr que dar las coordenadas de cada uno de sus vrtices (x1,y1), (x2,y2), .
(xN,yN).
Con el atributo href indicaremos la URL a la que enlazar dicha rea, en caso de no desear establecer ningn
enlace sustituiremos este atributo por nohref (al que no le acompaa ningn valor).
Al igual que en las imgenes, se puede usar alt para mostrar un texto alternativo en el caso que el navegador
no pueda mostrarla.
Veamos la utilidad de los mapas con un ejemplo:
<map name=mapa_ejemplo>
<area shape=circle coords=100,50,20 href=www.enlace1.html/>
<area shape=rectangle coords=40,45,84,110 href=www.enlace2.html/>
<area shape=poly coords=10,10,50,220,70,100 href=www.enlace3.html/>
<area shape=default nohref>
</map>
<img src=imagen.gif usemap=#mapa_ejemplo>
Por ltimo habr que indicarle a la imagen que haga uso de las zonas o reas definidas mediante el atributo
usemap asignando como valor el nombre que le dimos al mapa.
En el caso que dos reas se solapen, la zona solapada pertenecer a aquella rea que la haya definido
previamente.
Ejercicio 19: Crea una web que contenga una imagen con un rectngulo en rojo de manera que al pinchar
sobre l accedamos a una web llamada acierto.html con un mensaje de xito, en caso de clickear sobre el
resto de la imagen accederemos a otro archivo llamado error.html con un mensaje de fallo.
Ejercicio 20: Crea una web con la siguiente imagen de manera que muestre un documento web con el
nombre de la figura al pinchar sobre ella. Adems al pasar el ratn sobre cualquiera de ellas mostrar un
texto alternativo con el nombre del color.
(Puedes obtener la imagen capturando esta pantalla)

Ejercicio 21: Crea un mapa que permita acceder a cada una de los enlaces encerrados en las figuras.
(Puedes obtener la imagen capturando esta pantalla)
Ejercicio 22: Crea un mapa en HTML con la siguiente imagen, de manera que al pinchar sobre el fondo azul
abra una web llamada agua.html con el contenido Agua y al pinchar sobre el marrn acceda a otro
llamado tierra.html de contenido Tierra.
Para ello debers crear 2 reas de tipo circular superpuestas con otra de tipo rectangular.

Ejercicio 23: Disea un documento con el mapa de Andaluca de forma que al pinchar sobre cada provincia
se acceda a la web de su ayuntamiento. Para ello toma como mnimo 10 coordenadas para cada provincia.
Cuando se haga clic fuera de la regin se abrir un archivo llamado error.html informando de que debe
pincharse en una de las 8 provincias (a los 5 segundos se redireccionar de nuevo a la pgina del mapa)
11.Listas
En muchas ocasiones nos puede interesar disponer de una lista de elementos en una pgina web, para
mostrar contenidos de forma ordenada. En HTML existen 3 tipos de listas:
*Lista no numerada: Son una sucesin de elementos o tems sin enumerar para ello utilizaremos la etiqueta
<ul> y su cierre </ul> para indicar el comienzo y fin de la lista no ordenada (Unordered List). Dicha
etiqueta encerrar los diferentes elementos (List tem) indicados por la etiqueta <li> y su cierre </li>

Podemos usar el atributo type para indicar el smbolo a emplear para cada elemento, sus posibles valores
son circle ,disc (valor por defecto), o square:
<ul type=circle>
<li>Disco duro</li>
<li>Memoria RAM </li>
<li>Pantalla</li>
</ul>
*Lista numerada: Son una sucesin de elementos o tems enumerados. Utilizaremos la etiqueta <ol> y su
cierre </ol> para indicar el comienzo y fin de la lista ordenada (Ordered List). Dicha etiqueta encerrar sus
diferentes elementos (List tem) indicados por la etiqueta <li> y su cierre </li>
<ol type=A>
<li>Disco duro</li>
<li>Pantalla</li>
</ol>
Al igual que las listas no numeradas, admiten el atributo type para indicar el tipo de numeracin utilizada,
siendo los posibles valores:
-A para utilizar letras maysculas.

-a para letras minsculas.
-I para nmeros romanos en mayscula
-i para nmeros romanos en minscula.
-1 para nmeros rabes. (valor por defecto)
Se puede modificar el nmero con el que comenzar la lista numerada a travs de su atributo Start e incluso
modificarlo en mitad de la lista con el atributo value.
<ol start="3">
<li>Disco duro</li>
<li value="20">Pantalla</li>
<li>Teclado</li>
<li>Tarjeta de red</li>
</ol>

*Lista de definiciones: Se utilizan para mostrar una sucesin de definiciones (normalmente en diccionarios
web o textos legales). Para ello se utilizan las siguientes etiquetas:
<dl> y </dl> : Indica el comienzo y fin de la lista de definiciones

<dt> y </dt> : Encierra el trmino que se va a definir (normalmente suele destacarlo tabulando la
definicin)
<dd> y </dd> : Encierra a la definicin.
<dl>
<dt>Casa:</dt>
<dd>Construccin con el fin de ser habitada.</dd>
<dt>Edificio:</dt>
<dd>Construccin en varios niveles de altura.</dd>
</dl>
Las listas pueden anidarse, para ello basta con introducir una etiqueta de lista dentro de una etiqueta <li>:
<ol type="A">
<li>Dispositivos Magnticos:
<ul type="square">
<li>Disco Duro</li>
<li>Disquette</li>
</ul>
</li>
<li>Dispositivos pticos:
<ul type="circle">
<li>CD-ROM</li>
<li>DVD</li>
</ul>
</li>
</ol>

Ejercicio 24: Escribe el cdigo HTML necesario para mostrar la siguiente lista:
12.Tablas
*Definicin de una tabla:
Uno de los elementos ms importantes en HTML son las tablas , ya que stas nos van a permitir distribuir y
tener ordenados en la pantalla los elementos de nuestra web.
Para definir el comienzo y fin de una tabla se utilizan las etiquetas <table> y </table>.
Uno de los atributos que admite es border que permite especificar la anchura en pxeles de sus bordes. Y el
atributo bordercolor para especificar el color de sus bordes.
Para definir su anchura se utilizar width y para su altura height indicando el valor absoluto en pxeles o en
porcentaje de pantalla ocupado. Si a estos atributos no se le asigna valor la tabla se ajustar al tamao de su
contenido.
Para alinear emplearemos el atributo align permite alinear la tabla horizontalmente a la izquierda (left),
derecha (right) o centro (center).
<table border=2px bordercolor=red width=50% height=400px align=center

bgcolor=green>
...
</table>
El atributo bgcolor se usa para asignar un color de fondo a la tabla.

*Definicin de una fila:
Una fila es cada una de las divisiones horizontales de la tabla y estar formada por una o ms celdas.
Las filas (Table Row) se definen con las etiquetas <tr> y </tr>
Se puede cambiar el color de una fila usando bgcolor.
*Definicin de una celda:
Una fila es cada una de las divisiones verticales de una fila .
Las celdas se definen con las etiquetas <td> y </td>
Podemos especificar la alineacin del contenido de una celda tanto horizontalmente utilizando align (left,
right o center) como verticalmente utilizando valign (top,middle o bottom).
Podemos modificar el ancho de una celda utilizando width y su alto usando height , escribindolo bien en
pxeles o bien en porcentaje con respecto a toda la fila.
Tanto los atributos align, valign como width y height se pueden aplicar a la etiqueta <tr> si queremos que
esos valores se apliquen a todas las celdas de una fila.
<table border="5px" width="600px">

<tr bgcolor="yellow" align="center">

<td width="70%">
Artculo
</td>
<td width="30%">
Precio
</td>
</tr>

<tr>
<td>
Zapatos de piel
</td>
<td align="right">
60 €
</td>
</tr>
</table>
*Espaciado en las celda:

Podemos especificar los mrgenes internos de cada celda, es decir el espacio entre sus bordes y su contenido
mediante el atributo cellpadding , se expresa en pxeles y su valor por defecto es 1.
As mismo se podr indicar tambin la separacin entre los bordes de 2 celdas contiguas con el atributo
cellspacing, su valor por defecto es 2.
Ambos atributos irn en la etiqueta <table>
*Expandir celdas:
Por defecto, cada una de las filas de una tabla debe tener el mismo nmero de celdas pero en ocasiones
puede convenir que una celda de una determinada fila expanda el espacio ocupado por otra contigua.
Para ello se utilizan los atributos colspan indicando el nmero de celdas a la derecha que queremos que
expanda:
<tr>
<td>
celda 1
<td>
celda 2
</td>
</tr>
<tr>
<td colspan="2">
celda 3 expandida con celda 4
</td>
</tr>
</table>
Ejercicio 25: Crea en HTML una tabla similar a la siguiente:
Ejercicio 26: Crea tu horario en HTML.

O el atributo rowspan indicando el nmero de celdas hacia abajo que ocupar:
<tr>
<td rowspan="2">
celda 1 expandida <br/> con celda 3
</td>
<td>
celda 2
</td>
</tr>
<tr>
<td>
celda 4
</td>
</tr>
</table>
Ejercicio 27: Crea en HTML la siguiente tabla:

*Uso de las tablas para organizar una web:
Como hemos mencionado anteriormente, uno de los usos ms frecuentes de las tablas es para organizar el
contenido de una web. Para este fin se usan tablas con el borde igual a cero, de manera que la tabla en s no
es visible pero conseguimos que cada elemento de la web est en su lugar.
<table border="0px" width="600px" align="center">


<tr align="center">
<td><h1> Don Quijote </h1> </td>
</tr>


<tr align="center">
<td><img src="quijote.jpg" width="300px" height="300px"/></td>
</tr>
</table>
Ejercicio 28: Crea en HTML una web que tenga la siguiente distribucin (Nota: la tabla con los bordes
discontinuos representa a una tabla con borde igual a cero).
13.Formularios
*Estructura de un formulario:

Un sitio web , no solamente nos proporciona informacin , a veces es el usuario el que le suministra o enva
informacin a la web aadiendo interactividad a la misma.
Una de las formas de enviar informacin es a travs de los formularios que tienen la misma utilidad que los
formularios de papel en la vida cotidiana.
Los formularios se construyen por medio de la etiqueta <form> y su cierre </form> que marcar el
comienzo y fin del mismo.
El atributo principal de <form> es action que le indica qu debe hacer con los datos, uno de los posibles
valores que podra tomar es malito:direccionemail@dominio para mandar los datos escritos a una
determinada direccin de correo. Tambin puede indicar la URL del script al que se enviarn los datos (ste
caso se estudiar en el tema de PHP).
El atributo method indica cmo debe enviarse la informacin, siendo 2 sus posibles valores:
-GET: La informacin se enva junto con la URL de la web.

-POST: La informacin se enva dentro del paquete de peticin HTTP.
Con el atributo enctype especificamos cmo debe codificarse la informacin durante su transmisin. El
valor que se le suele asignar es text/plain que indica que los datos se enviaran como texto plano.
<form action=mailto:profe@servi.com method=get enctype=text/plain>

<input ../>
<input ../>
</form>
Dentro de la etiqueta <form> encontraremos etiquetas <input/> que marcan cada uno de los campos de
entrada del formulario por los que se le solicita informacin al usuario. Toda entrada ha de identificarse con
el atributo name , por ejemplo le daremos de valor a una entrada CP si lo que vamos a pedirle all es su
Cdigo Postal. Los diferentes tipos de entradas que se pueden usar se suele indicar mediante el atributo
type cuyos posibles valores veremos a continuacin.
*Entradas de tipo texto:
Se indican escribiendo el atributo type con valor igual a text y se usan para pedirle al usuario la
introduccin de un dato en formato de texto.

Apellidos:<input name=apellidos type=text/>
</form>
Si se aade el atributo value hace que la entrada tome un determinado valor inicial o por defecto:

Provincia:<input name=provincia type=text value=granada/>

</form>
Otro atributo admitido es size que permite establecer el tamao de la caja de texto en caracteres. Con el
atributo maxlength se puede indicar la longitud mxima de caracteres permitida para esa entrada de texto.
Ejercicio 29: Crea en HTML un formulario para registrar el nombre de una persona (el tamao de la caja
ser 20 y la longitud mxima 30.
*Entradas de tipo password:
Se indican con el atributo type igual a password , sus caractersticas son iguales (admite tambin los
atributos value, size y maxlength) pero ocultando los caracteres tecleados.
Ejercicio 30: Define una caja tipo password , asgnale de nombre clave y establece la longitud mxima en
8 caracteres.
*Botones de opcin (Radio Button):
Se usa cuando hay varias opciones y se quiere que el usuario elija slo una de ellas. El valor empleado en el
atributo type es radio , para que el navegador sepa que estn relacionadas todas las opciones se les debe
poner a todas el mismo nombre. Si queremos que una de las opciones me aparezca ya seleccionada aadir
el atributo sin valor checked. Si agregamos el atributo sin valor disabled el botn aparecer desactivado

<input name=sexo type=radio/>Hombre<br>
<input name=sexo type=radio/>Mujer<br>
</form>
*Botones de verificacin (Check Box):
A diferencia del Radio Button permite marcar ms de una opcin a la vez. El valor utilizado para type es
checkbox.
Otra diferencia con Radio Button es que en este caso s se le dar un nombre diferente a cada entrada:

<input name=moto type=checkbox checked/>Tengo coche<br>
<input name=coche type=checkbox checked/>Tengo moto<br>
<input name=casa type=checkbox/>Tengo casa propia<br>
</form>
Admite tambin el atributo checked pudiendo estar en ms de una opcin.
*Lista de seleccin (Pull Down List):

Permite elegir una opcin entre varias posibles. Se suele emplear cuando la lista de opciones es demasiado
extensa para usar un Radio Button. Esa lista se despliega al hacer click sobre ella.
La manera de escribir esta entrada ya no es a travs de la etiqueta <input> sino con la etiqueta <select> y su
cierre </select> que contendrn las diferentes opciones indicadas mediante la etiqueta <option/>
<form action="mailto:profe@servi.com" method="get" enctype="text/plain">

<select name="provincia">
<option value="Almera"/>Almera
<option value="Cdiz"/ selected >Cdiz
<option value="Crdoba"/>Crdoba
<option value="Granada"/>Granada
<option value="Jan"/>Jan
<option value="Huelva"/>Huelva
<option value="Mlaga"/>Mlaga
<option value="Sevilla"/>Sevilla
</select>
</form>
El atributo selected permite seleccionar una opcin por defecto.
*rea de texto:
Se usa cuando queremos que el usuario introduzca un texto de ms de una lnea (prrafo). Se suele emplear
para recoger opiniones o comentarios.
No utiliza tampoco la etiqueta <input/> sino las etiquetas <textarea> y su cierre </textarea>.
Los atributos que admite son name (para el nombre de la entrada) , cols (para indicar el nmero de
columnas que tendr expresado en caracteres) y rows (para indicar el nmero de filas que se tendr).
Otro atributo que admite es wrap siendo stos sus posibles valores:
-off: No parte la lnea automticamente y el texto se enva tal .Si se quiere partir la lnea habr que pulsar
el retorno de carro. El texto se manda tal y como se tecle.
-soft: Al llegar al final del recuadro automticamente contina escribiendo en la lnea de abajo. El texto se
manda tal y como se tecle.
-hard: Al llegar al final del recuadro automticamente contina escribiendo en la lnea de abajo. El texto se
manda tal y como se ve en pantalla

Comentarios y sugerencias:<br>
<textarea name="comentario" cols="30" rows="10" wrap="hard">
</textarea>
</form>

*Botn enviar (Submit):
Para enviar los datos del formulario debemos crear un botn de enviar, para este fin se usa la etiqueta
<input> con su atributo type con valor submit de manera que cuando el usuario pinche sobre l se
ejecutar la accin indicada en el atributo action del formulario.
Se puede usar el atributo value para cambiar el texto por defecto que aparece en el botn.

Nombre:<input name=nombre type=text/><br>
Apellidos:<input name=apellidos type=text/><br>
<input type=submit value=Enviar el formulario/>
</form>
Podemos usar una imagen como botn de enviar utilizando el valor image en lugar de submit para el
atributo type.

<input type=image src=boton.jpg width=30px height=30px/>
</form>
Acepta los atributos propios de la etiqueta <img>
*Botn borrar (Reset):
Si se quieren borrar los datos escritos en un formulario haremos uso del atributo type con el valor reset.
Acepta tambin el atributo value para cambiar el texto mostrado.

<input type=submit value=Enviar el formulario/>
<input type=reset value=Borrar datos/>

</form>
*Organizacin de las entradas de un formulario:
Cuando utilizamos formularios con una gran cantidad de entradas se puede organizar el formulario
mediante conjuntos de entradas, para ello se encerrarn las entradas con las etiquetas <fieldset> y
</fieldset> que adems pueden contener la etiqueta <legend> y </legend> para encerrar el nombre del
conjunto.
<fieldset>
<legend>Datos Personales</legend>
Nombre:<input name="nombre" type="text"/><br/>
Apellidos:<input name="apellidos" type="text"/><br/>
</fieldset>
<fieldset>
<legend>Datos Bancarios</legend>
Nmero de cuenta:<input name="cuenta" type="text"/>
</fieldset>
<input type="submit"/>
</form>
Ejercicio 31: Crea una web HTML para introducir los datos de un Currculum Vital.
Ejercicio 32: Disea un documento HTML para registrar en una clnica veterinaria los datos de un cliente y
su mascota.
Ejercicio 33: Escribe una pgina web de una empresa on-line para que un cliente nuevo realice un pedido de
hasta 4 de los productos de los que dispone la empresa. Adems de esto el cliente tiene la opcin de pagar
por adelantado o cuando reciba el paqueta.
Ejercicio 34: Crea un documento web que permita al cliente de una empresa de telefona ponerse en
contacto con los tcnicos para describir el problema con su fija/mvil. El cliente deber indicar como datos
identificativos: su DNI, telfono y clave de acceso.

Ejercicio 35: Crea un formulario de bsqueda para una supuesta inmobiliaria on-line. Toma como ejemplo
alguna web existente en Internet. El formulario deber estar dentro de una tabla de color gris de fondo y
centrada en la pgina.
14. Marcos (Frames)
*El conjunto de marcos (frameset):
Los marcos son divisiones de la ventana del navegador, de manera que cada uno de ellos puede mostrar una
web diferente. Cada marco se comporta como una pgina HTML independiente y tiene su propio cdigo
fuente. Por tanto existir un documento HTML por cada marco y un domento HTML global o
contenedor que indicar como debe de realizar las divisiones.
El archivo global o contenedor no tendr cuerpo, en el lugar de la etiqueta <body> ir la etiqueta

<frameset> y su cierre </frameset> . Dicha etiqueta debe contener los atributos cols y/o rows para dividir
la pgina en columnas o filas. Pudiendo recibir valores tanto en porcentaje como en pxeles.
Por ejemplo si queremos dividir la pantalla en 2 columnas que ocupen el 25% y 75% respectivamente lo
realizaremos del siguiente modo:
<frameset cols=25%,75%>
...
</frameset>
Tambin se puede expresar en pxeles, por ejemplo si queremos dividir la pantalla del navegador en 3 filas
de 200,400 y 300 pxeles respectivamente:
<frameset rows=200px,400px,300px>
...
</frameset>
Lo habitual es dejar que el ltimo marco ocupe el resto de la pantalla, para lo cual usaremos el asterisco (*).
<frameset rows=200px,400px,*>
...
</frameset>
Incluso podemos especificar proporciones de lo que queda de pantalla, por ejemplo si queremos crear una
web dividida en tres columnas cuyo primer marco ocupe 100 pxeles , el segundo ocupe un tercio del resto
de pantalla y el tercer marco 2 tercios del resto de pantalla se utilizara el siguiente cdigo:
<frameset cols=100px,*,2*>
...
</frameset>

*Definiendo un marco (frame):
Dentro de la etiqueta del conjunto de marcos <frameset> se encerrarn las definiciones de cada uno de los
marcos mediante la etiqueta sin cierre <frame/>.
Para indicar el archivo HTML que se mostrar en dicho marco debemos emplear su atributo src asignndole
como valor la URL de dicho archivo. En este atributo podremos escribir bien la ruta de un archivo de
nuestro servidor, bien la direccin de otra web o bien la URL de una imagen que queramos mostrar en dicho
marco.
<frameset cols=25%,25%,*>
<frame src=productos.html/>
<frame src=http://www.google.es/>
<frame src=paisaje.jpg/>
</frameset>
Por defecto se suelen mostrar bordes para cada uno de los marcos, para controlar si tendr borde o no
usaremos el atributo frameborder con los valores yes o no.
El ancho del borde puede controlarse con su atributo border as como el color por medio del atributo
bordercolor.
<frameset cols=25%,75%>
<frame src=productos.html border=2px bordercolor=#ffa301/>
</frameset>
Para controlar los mrgenes horizontales y verticales del marco emplearemos marginwidth y marginheight
respectivamente.
<frameset cols=50%,*
<frame src=productos.html marginwidth=70px marginheight=90px/>
</frameset>
El atributo scrolling se usa para especificar si se desea o no barra de desplazamiento en el marco siendo 3
sus posibles valores:
-yes: Muestra siempre la barra de desplazamiento.

-no: Nunca aparece
-auto: Aparece slo cuando es necesaria.
Ejercicio 36: Prueba los 3 posibles valores del atributo scrolling.
Con el atributo noresize se puede impedir que el usuario cambie el tamao de un marco, este atributo no
lleva asignado valor.
*Navegadores que no soportan marcos:

Aunque hoy en da raramente encontramos un navegador que no soporte marcos, HTML defini la etiqueta
<noframes> y su cierre </noframes> para encerrar el cdigo HTML a mostrar en ese caso.
<frameset rows=25%,*>
<frame src=menu.html/>
<frame src=principal.html/>
<noframes>
<body>
Lo sentimos, pero su navegador no soporta marcos.
</body>
</noframes>
</frameset>
*Anidamiento de marcos:
Al igual que vimos con las tablas, un marco puede contener a su vez a otro conjunto de marcos, para ello
bastar introducir otro <frameset> dentro del documento HTML mostrado dentro de alguno de los dos
marcos.
Supongamos que queremos hacer una web que tenga la siguiente divisin de marcos:
Marco1 Marco2
Marco3
La primera divisin que haremos ser la de las 2 columnas, para ello crearemos un archivo llamado
principal.html con el siguiente cdigo:
<frameset cols=50%,*>
<frame src=izquierda.html/>
<frame src=derecha.html/>
</frameset>
El Marco1 contendr una web llamada izquierda.html y el otro marco otra web llamada derecha.html
con el siguiente contenido:
<frameset rows=50%,*>
<frame src=arriba.html/>
<frame src=abajo.html/>
</frameset>
A su vez hemos dividido el archivo de la columna derecha en 2 marcos (Marco2 y Marco3) que contendrn
a su vez los documentos arriba.html y abajo.html respectivamente.
Ejercicio 37: Crea una web que muestre 4 webs diferentes en 2 filas y 2 columnas.
Ejercicio 38: Crea la siguiente web con marcos, mostrando en cada marco una web diferente:

*Enlaces y marcos:
Podemos abrir una pgina en un marco determinado para ello debemos antes darle un nombre en el archivo
contenedor mediante el atributo name de la etiqueta <frame> :
<frameset cols=20%,*>
<frame src=enlaces.html name=marco_izq/>
<frame src=principal.html name=marco_der/>
</frameset>
Dentro del archivo enlaces.html crearamos los enlaces especificando mediante el atributo target el
nombre del marco donde queremos abrir el link:
<a href=http://www.google.es target=marco_der>Ir a google</a>

<a href=http://www.yahoo.com target=marco_der>Ir a yahoo</a>
Ejercicio 39: Crea un documento web dividido en dos marcos:
-Uno superior que ocupe 100 pxeles y que contenga 4 imgenes-enlaces de 4 equipos de fbol (nombra al
archivo escudos.html y al marco marco_sup)
-Otro inferior que ocupe el resto de la pantalla, donde se mostrar la web oficial de cada equipo al pinchar
sobre su escudo. (nombra al archivo principal.html y al marco marco_inf)
Inicialmente en el marco inferior se mostrar un archivo llamado principal.html con el mensaje Pinche en
el escudo para ir a la web oficial del equipo.
Ejercicio 40: Disea una web que permita cambiar de equipo (a elegir entre 5 equipos) a 5 jugadores de
ftbol. Para ello divide la pantalla en 3 marcos:

Ejercicio 41: Escribe el cdigo HTML necesario para realizar el catlogo web de un criadero de perros.
Para ello divide la pgina en 2 marcos (uno superior y otro inferior). En el marco de abajo inicialmente
aparecer una web llamada bienvenida.html con un mensaje de bienvenida junto con el logo del criadero.
Al pinchar sobre cada raza en el marco de abajo aparecer un archivo contenedor dividido a su vez en 2
marcos, el de la izquierda tendr una lista de las camadas de esa raza y el de la derecha mostrar la foto y la
informacin de la camada al pinchar sobre el enlace de esa camada:
Ejercicio 42: Disea una web para la reserva on-line de un club de pdel. Dicho club posee 4 pistas que
pueden ser alquiladas desde las 10:00 de la maana a las 22:00 por horas completas de lunes a sbado. La
web debe dividirse en 2 marcos, uno a izquierda y otro a derecha. En el izquierdo se mostrar una lista con
un enlace por cada pista. En el derecho se mostrar iniciamente una web llamada bienvenida.html con el
logo del club. Al pinchar sobre el enlace de cualquier pista se abrir un horario con las horas descritas desde
el lunes hasta el sbado con la palabra Reserva dentro de cada casilla. Al pinchar sobre Reserva se
abrir en una ventana nueva un formulario para poder enviar la peticin de reserva con los datos del socio
(nde socio, nombre , apellidos y eleccin de tarifa que puede ser Normal o Reducida).
Ejercicio 43: Crea una web utilizando marcos , para mostrar las principales especies de la fauna marina
mediterrnea. Utiliza tambin thumbnails.
Ejercicio 44: Divide una web en 2 marcos (superior e inferior). En inferior se mostrar informacin sobre al
menos 6 personajes histricos de tu pas (con una foto y un prrafo de informacin sobre cada uno). En el
superior se mostrar un enlace interno por cada personaje de manera que se muestre en el marco de abajo el
personaje escogido (utiliza anclas para ello).
15.Capas
*Definicin de capa:
Un cambio importante en los navegadores web fue la interpretacin de cdigo HTML Dinmico
(DHTML). ste permita el uso de capas o layers que son porciones de pgina que pueden tratarse de
forma independiente y ser modificada de diferentes formas, por ejemplo moverla de un lado a otro, poner
una capa encima de otra, etc.
El uso de capas permite mejorar el aspecto de nuestra pgina aplicndole efectos especiales, por
ejemplo hacer que determinados objetos sean visibles slo cuando hagan falta.
*Creacin de capas:
Netscape utilizaba la etiqueta <layer> para definir una capa, esta etiqueta era incompatible en los
navegadores Internet Explorer que soporta una versin reducida de ellas representada en la etiqueta <div> y
su cierre </div>.

Entre esas etiquetas podemos escribir cualquier cosa (texto, imgenes , tablas o incluso otra capa).
La etiqueta <div> puede incluir el atributo id que incluir el identificador utilizado para referirnos a esa
capa.
El atributo style indicar el estilo aplicado a la capa, aunque esto lo estudiaremos a fondo en el prximo
tema, veremos brevemente algunos de las posibles propiedades que se pueden aplicar a style:
position: indica la posicin de la capa con respecto a la totalidad de la ventana del navegador
(absolute) o con respecto a la capa que lo contiene (relative)
top: indica la posicin vertical en pxeles en la que empezar la esquina superior-izquierda de la
capa.
left: indica la posicin horizontal en pxeles en la que empezar la esquina superior-izquierda de la
capa.
background: nos permite indicar el color de fondo de la capa aceptando tanto colores predefinidos
como cdigos hexadecimales.
width y height : indican el ancho y alto de la capa respectivamente. Acepta tanto porcentajes como
pxeles.
z-index: establece el orden en el que el navegador debe mostrar cada capa, si tiene el valor 1 indica
que ser la primera que el navegador visualizar, el 2 la siguiente y as sucesivamente, por lo tanto
cuanto mayor sea el nmero ms encima estar una capa del resto.
La sintaxis de los estilos es la siguiente propiedad:valor y se separan entre ellas mediante ;
A continuacin veremos un ejemplo de cmo crear una capa de 100x100 pxeles de color azul situada a 150
pxeles de distancia vertical y 300 pxeles de distancia de la esquina superior-izquierda del navegador:
<html>
<body>
<div id=micapa style=position:absolute; top:150px; left:300px; background:blue;

width:100px;height:100px; >
</div>
</body>
</html>
Ahora veremos el uso de la propiedad z-index para ello crearemos una capa de color rojo sobre la capa
anterior, pero desplazada 20 pxeles hacia abajo y hacia la derecha:
<div id=capa_azul style=position:absolute; top:150px; left:300px; background:blue;

width:100px;height:100px;z-index:1 >
</div>
<div id=capa_roja style=position:absolute; top:170px; left:320px; background:red;

</div>

En el ejemplo de ahora, utilizaremos la propiedad z-index para crear sombra en un texto. Para ello
definiremos una capa con el texto Bienvenido en color negro y otra capa debajo con el mismo texto pero
en color gris desplazada 5 pxeles hacia abajo y hacia la derecha:
<div id=capa_primera style=position:absolute; top:50px; left:300px; width:200px;height:200px;z-

index:1 >
<font size=7 color=black>Bienvenido</font>
</div>
<div id=capa_segunda style=position:absolute; top:55px; left:305px;

<font size=7 color=gray>Bienvenido</font>
</div>
IMPORTANTE: Si no especificamos la propiedad z-index las capas se mostrarn en el orden en el que se

escribieron (es decir primero se visualizar la que se escriba antes).
Ejercicio 45: Usando 2 capas, crea una web con los colores de la bandera espaola.
Ejercicio 46: Usando 2 capas, crea una web con los colores de la bandera italiana.

Ejercicio 47: Utilizando 1 o 2 capas, crea una web que simule la bandera suiza
Ejercicio 48: Haciendo uso de 2 capas (una de ellas con una imagen centrada) simula la bandera chilena:
Ejercicio 49: Crea una web con 2 capas de color prpura situadas en las esquinas superiores. Ambas tendrn
una altura de 100px y una anchura del 10% con respecto a la anchura total de la ventana. Si la ventana se
redimensiona la anchura de las capas tambin lo har.
Ejercicio 50: Disea la siguiente web con dos capas sabiendo que la capa azul ocupar 100 pxeles de ancho
y el 80% de altura y la capa amarilla 10 pxeles de anchura y el 90 % de altura:
Ejercicio 51: Usando las imgenes porteria_arriba.jpg , porteria_abajo.jpg, centro_arriba.jpg y

centro_abajo.jpg crea una web que simule un campo de ftbol que se vaya redimensionando segn
cambiamos la ventana de tamao. Para ello utiliza 3 capas:

-Una llamada fondo_norte de color verde de fondo, contendr una tabla sin bordes de dos filas con las
imgenes porteria_arriba.jpg y centro_arriba.jpg
-Una capa central blanca de 2 pxeles de altura.
-Una llamada fondo_sur de color verde de fondo, contendr una tabla sin bordes de dos filas con las
imgenes porteria_abajo.jpg y centro_abajo.jpg
Ejercicio 52: Modifica el ejercicio anterior aadiendo una capa ms por encima de las dems con los
nombres de los jugadores que componen la alineacin del equipo.
Ejercicio 53: Utilizando las imgenes fondo.gif, vitruvio1.gif y vitruvio2.gif crea una web que forme
el dibujo del Hombre de Vitruvio de Leonardo Da Vinci utilizando 3 capas:
Ejercicio 54: Utilizando 4 capas anidadas crea la web mostrada a continuacin, sabiendo que la separacin
tanto vertical como horizontal entre capas es del 10 % (usa para ello la propiedad position con valor
relative):

Ejercicio 55: Haciendo uso de 2 capas que ocuparn cada una la mitad del ancho de la ventana crear la
siguiente web:
Ejercicio 56: Utilizando 4 capas y 4 imgenes, crea un borde original para una pgina web (por ejemplo un
marco que muestre la ventana como una televisin, un marco de fotos
IES Al-ndalus (Almucar)

Manuel Gonzlez Domenech

Aplicaciones Web (Tema 2 El Lenguaje HTML)

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aplicaciones Web (Tema 2 El Lenguaje HTML)

Enviado por

Direitos autorais:

Formatos disponíveis

TEMA 2 El lenguaje HTML

<b> Este es un texto en negrita </b> pero este texto no.

<img src=gato.jpg />

Aplicaciones Web (Tema 2: El lenguaje HTML)

2. Estructura bsica de una pgina HTML

<html> : Marca el comienzo del documento HTML.

Aplicaciones Web (Tema 2: El lenguaje HTML)

Ejercicio 2: Indica si el siguiente anidamiento de etiquetas es correcto o no:

<html> <body> Hola Mundo </body></html>

Aplicaciones Web (Tema 2: El lenguaje HTML)

classification Palabras para clasificar la pgina en los

Y el atributo content con la informacin que contendr.

Valor Color Valor Color

Aplicaciones Web (Tema 2: El lenguaje HTML)

Tambin podemos especificar la combinacin de 24 bits de color mediante el smbolo # seguido de 6

<body link=green vlink=red >

Aplicaciones Web (Tema 2: El lenguaje HTML)

<body topmargin=100px leftmargin=50px >

3. Saltos de lnea , prrafos y caracteres especiales

Aplicaciones Web (Tema 2: El lenguaje HTML)

El espacio en blanco es un carcter especial y la nica forma de introducirlo es mediante el cdigo de su

Algunos de los caracteres especiales que podemos usar son:

Smbolo Carcter especial

4. Formato del texto en una web

Aplicaciones Web (Tema 2: El lenguaje HTML)

-Negrita (bold): Se encierra el texto entre las etiquetas <b> y </b>.

Esta <b> palabra </b> aparecer en negrita.

Esta <i> palabra </i> aparecer en cursiva.

-Subrayado (underline): Se encierra el texto entre las etiquetas <u> y </u>.

Esta <u> palabra </u> aparecer en cursiva.

-Subndice: Se encierra el texto entre las etiquetas <sub> y </sub>.

La formula del agua es H <sub>2</sub>O

-Superndice: Se encierra el texto entre las etiquetas <sup> y </sup>.

Ejercicio 9: Crea una pgina web que muestre el siguiente contenido:

Aplicaciones Web (Tema 2: El lenguaje HTML)

Aplicaciones Web (Tema 2: El lenguaje HTML)

As como el grosor de la lnea con el atributo size expresado en pxeles:

<hr width=70% size=13/>

<hr width=70% size=13 noshade/>

O colorearla con el atributo color:

<hr width=70% size=13 noshade color=red/>

<img src=fotos/paisaje.jpg width=50% height=200px/>

<img src=fotos/paisaje.jpg border=2px alt=Paisaje martimo/>

Aplicaciones Web (Tema 2: El lenguaje HTML)

<img src=fotos/paisaje.jpg align=middle/>

<img src=imagen1.jpg hspace=10px/>

9. Los Enlaces (Links)

-Otro documento HTML.

Pinche en <a href=http://www.ideal.es>este </a> enlace para ver el diario Ideal

Pinche en <a href=temaprimero.html>este </a> enlace para el tema 1

O la ruta en caso de estar en diferentes carpetas:

Pinche en <a href=temario/temaprimero.html>este </a> enlace para el tema 1

Aplicaciones Web (Tema 2: El lenguaje HTML)

Pinche <a href=libros.htm#segunda>aqu </a> para ver la seccin 2 de la otra web

Pinche <a href=libros.htm#segunda>aqu </a> para ver la seccin 2 de la otra web

Aplicaciones Web (Tema 2: El lenguaje HTML)

<a href=http://www.google.es><img src=logo_google.jpg/></a>

rectangle o rect para definir una zona rectangular.

Aplicaciones Web (Tema 2: El lenguaje HTML)

Veamos la utilidad de los mapas con un ejemplo:

<img src=imagen.gif usemap=#mapa_ejemplo>

Aplicaciones Web (Tema 2: El lenguaje HTML)

Aplicaciones Web (Tema 2: El lenguaje HTML)

Aplicaciones Web (Tema 2: El lenguaje HTML)