Curso de HTML

CURSO DE HTML
I. INTRODUCCION
En este manual aprenders a crear pginas en Html, desde qu tipo de programas
podemos usar para la creacin de nuestra pgina web, hasta como usar mapas, imgenes,
marcos o frames, introducir msica o videos en una pgina Web, etc.
I.1. Qu programa debo usar?

Para empezar a programar con Html, se necesita un programa en el cual podamos
introducir nuestro cdigo y as, crear nuestra web. Existen varios programas (editores web)
con los cuales puedes ayudarte, entre los ms conocidos estn DreamWeaver, Frontpage
y HomeSite. Sin embargo, el mejor sigue siendo DreamWeaver por ser tan completo.
Existe tambin la posibilidad de usar el Bloc de Notas (Notepad ++), el cual recomiendo
para que aprendas las etiquetas y no te las escriba automticamente el programa.
Desde mi punto de vista (y de muchos otros webmasters, claro) el cdigo Html solo hay
que usarlo para aadir el contenido en la web, pero no para darle formas, colores ni nada
que signifique "adornar" la web. Para eso usaremos los Estilos CSS que veremos
despus de terminar este curso de Html. Es por eso que prescindiremos de todo el Html
que se usa para adornos. Repito, Html solo para aadir informacin, CSS para darle
forma.
I.2. Resumen de Pasos para construir una Web

A continuacin como complemento al curso muestro una serie de pasos, escogidos de
diferentes pginas y/o encuestas en el internet, de que pasos se deben seguir para crear
una pgina web.
0.- Tener claro "qu" quieres hacer. Escoger un tema del que hablar en la web.
1.- Trazar un esquema de apartados y secciones de la web, con todo aquello que se te
ocurra (con papel y lpiz). Luego ordenarlo todo para elaborar el esquema final (aunque
podr cambiar ir cambiando despus).
2.- Hacer un "boceto" de la pgina que deseas, a lpiz! Usa colores para darle forma y
buen aspecto.
3.- Obtener un espacio para la pgina web en algn "Servidor", ya sea de pago o gratuito.
4.- Crear una "carpeta" en el disco duro, donde guardar los archivos de la nueva pgina
web.
5.- "Obtener" un programa de diseo web. (Ejemplo, Dreamweaver, o Html-Kit).
6.- "Instalar" el programa de diseo y "configurar" el sitio web en l.
7.- "Crear" una pgina web muy muy simple, para comprobar que el espacio web funciona.
8.- Comenzar el diseo de nuestra pgina web en nuestro ordenador.
9.- Actualizar nuestra pgina web (subirla al servidor)
10.- Mejorar nuestra pgina aadiendo foros, libro de visitas, etc.
11.- Ir pensando en comprar un dominio propio (unos 14 a 20 dlares al ao).
12.- Promocionar la pgina web con directorios, etc.
13.- Buscar algn medio para obtener beneficio econmico, si nos hace falta para...
14.- Ampliar nuestros conocimientos de cdigo HTML, CSS, Php, Javascript, etc.
I.3. Qu es una pgina web?

Pues de entrada podemos preguntarnos qu es una pgina web. Habran dos respuestas:
para el internauta y para el diseador.
Para el internauta una pgina WEB es una pantalla en su monitor que le muestra
la informacin que va buscando y enlaces a otros sitios relacionados.
Para el diseador una pgina WEB es un documento construido para mostrar
informacin en la pantalla de un monitor, que contiene adems de la informacin
una serie de instrucciones para indicar como se ha de mostrar esa informacin.
Estas instrucciones se escriben siguiendo un lenguaje llamado HTML
Como ves el diseador define la pgina web como algo ms completo y tcnico que el
simple internauta. La pgina web se concreta en un documento con un nombre terminado
con la extensin .htm o .html.
Una serie de pginas web interconectas e interrelacionadas de alguna forma (el mismo
tema, el mismo objetivo...) forman un sitio web, que habitualmente est almacenado en un
servidor.
II. CODIGO HTML

II.1. Qu es Html?
Html es el lenguaje con el que al escribir etiquetas creamos pginas web. Las pginas se
visualizan por medio de un navegador (Internet Explorer, Netscape, Mozilla Firefox...) Con
Html puedes crear tablas, colocar imgenes, reproducir audio y/o video, etc.
El Html no es el nico lenguaje que existe, es simplemente el bsico, ya que los dems
lenguajes como Php, Asp, Javascript, y otros... tambin requieren de algunos cdigos de
Html para poder funcionar.
Debido a que hay distintos navegadores, a veces se pueden omitir o agregar cdigos para
que otros navegadores puedan tambin visualizar una pgina. Tal vez te estars
preguntando Qu extensin es para lo archivos HTML?, bueno pues pueden ser dos tipos
.htm y .html, cualquiera de las dos extensiones nos sirven, ya ser su decisin cual poner.
II.2. Estructura y etiquetas

Como hemos mencionado, el Html es un lenguaje (de programacin) que contiene
etiquetas, las cuales nos permiten configurar nuestra web. Las etiquetas se escriben entre
< > y (la mayora) tienen la etiqueta de cierre < / >, que es la misma etiqueta solo que con
la barra / despus de <. Lo que est entre las dos etiquetas recibe el efecto.
Toda pgina web hecha con Html, por complicada que parezca, se divide en dos partes
bien diferentes a las que llamaremos Cabecera (HEAD) y Cuerpo (BODY).
Adems, todas las pginas web empiezan con la palabra mgica (o etiqueta) <html> y
terminan con la etiqueta </html>. Cada pgina web adems, solo tiene una sola cabecera
y un solo cuerpo. Dejamos los dobles cuerpos y dobles cabezas para la mitologa, ok?
Para tener una idea, esto sera una pgina web con todas las de la Ley, eso s, vaca.
<html>
<head>
</head>
<body>
</body>
</html>
Buscando un smil, podramos decir que todo el cdigo va metido en un armario llamado
html y que a su vez tiene dos compartimentos separados, uno llamado head y otro
llamado body.
El contenido correspondiente a la cabecera (head) tendr que ir siempre entre la etiqueta
<head> que indica inicio de la cabecera, y la etiqueta </head> que indica el fin de la
cabecera. Estas dos etiquetas se diferencian por la barra que tiene delante la que indica
fin: /.
La que no tiene la barra siempre indica que a partir de ah el cdigo pertenece a esa
etiqueta (head, body o lo que sea), mientras que la que s lleva la barra indica siempre que
el cdigo de esa parte ha terminado.
Lo mismo ocurre con el Cuerpo (body), cuyo contenido ha de estar siempre entre la
etiqueta <body> que indica comienzo del Cuerpo, y la etiqueta </body> que indica su final.
Para qu una etiqueta de cierre? bueno es para limitar nuestra etiqueta, o sea, como no
queremos que todo este subrayado (por ejemplo) donde ya no queremos que sea as
escribimos el cierre. La etiqueta <u> y su etiqueta de cierre, </u>, indica subrayar un texto.
Ejemplo:
<u> Texto subrayado </u> Texto Normal, el resultado es:
Texto subrayado Texto Normal
Con esto queda claro que la barra "/" indica siempre final de una parte, importante
elemento para q no nos traiga problemas en el siguiente cdigo q escribamos a
continuacin, ya q si una etiqueta no se cierra correctamente, podra incluir elementos que
no son parte de su cdigo y entonces nuestra pgina se vera afectada.
Ilustracin de Estructura:
Nota: Existen cosillas que solo podremos colocar dentro del encabezado (head) y otras
cosas que solo funcionarn dentro del cuerpo (body), pero esas cosillas las iremos viendo
conforme avancemos.
A continuacin muestro debajo el cdigo de una pgina web vaca, pero esta ves con
algunas cosillas ms. Este cdigo es el que tiene una pgina de esas que creas con
FrontPage, Dreamweaver, Html-Kit o programas por el estilo, nada ms de empezar, es
decir, cuando an no has metido cdigo alguno en ella.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF">
</body>
</html>
Vemos en este cdigo las palabras mgicas comentadas antes, html, head, body y sus
correspondientes cierres con la barra "/". A estas palabras encerradas con los smbolos <
y > recuerden, las llamaremos etiquetas.
Aparecen algunas cosas nuevas, pero las veremos con detenimiento ms adelante. Con
esto que saben hasta ahora, ya pueden mirar el cdigo Html de cualquier pgina web e
identificar dnde empieza su cdigo html, dnde termina, y dnde empiezan y acaban la
cabecera y el body.
II.3. Mis primeras pginas

Ya tenemos los conceptos para empezar a crear nuestra primera pgina. Ahora vamos a
crear una pgina con texto en negritas y con espacio de una lnea. La etiqueta <b> indica
texto en negrita, y la etiqueta <p> indica prrafo y salto de lnea (deja una lnea de
separacin).
El cdigo sera el siguiente:
<html>
<head>
<title>Msica</title>
</head>
<body>
<p><b>Bienvenido,</b></p>
<p>Estas en la mejor pgina.</p>
<p>La mejor msica solo aqu.</p>
</body>
</html>
Copiemos y peguemos este cdigo en el editor y guardmoslo con un nombre con
extensin .htm - .html (pag.html, por ejemplo).
Nota: Se recomienda no usar espacios, maysculas o caracteres especiales (# $ % ) en el
nombre de tu archivo, para evitar problemas de lectura con el navegador.
Podras utilizar guiones ( - ) o guiones bajos ( _ ) para reemplazar a los espacios y nombrar
a tu archivo algo as: pagina_1.html
Ya tenemos una sencilla pgina creada con texto en negritas y con espacios. Ahora vemos
otro ejemplo:
Mi_2da_pagina.htm
<HTML>
<HEAD>
<TITLE>Mi segunda pagina web </TITLE>
</HEAD>
<BODY>
<H1 align="center" >Mi Segunda pagina web </H1>
<HR>
<P>Esto que ves tan sencillo es una verdadera pgina web, aunque le falta el contenido,
pero calma, todo llegar</P>
</BODY>
</HTML>
II.4. La explicacin
Si nos fijamos en la pgina que vemos con el explorador solo se ve parte de lo que hemos
escrito, concretamente todo lo que no est encerrado entre los smbolos < y >. Eso es el
contenido de la pgina, pero y lo que est entre esos parntesis angulares? pues
recordar que esas son las etiquetas que le dicen al explorador como mostrar el contenido:
en grande, con colores, centrado, el ttulo de la pgina, etc. Si se fijan cada etiqueta tiene
un comienzo y un fin:
<ETIQUETA parmetros> ... </ETIQUETA>
Como ves una apertura y un cierre. Algunas etiquetas (como <BR> cambio de lnea o
<HR> lnea horizontal) no llevan cierre. Fijmonos que lo primero que tenemos es la
etiqueta <HTML> cerrada al final del documento con </HTML>, eso quiere decir que
estamos ante un HTML:
<HTML> ... </HTML>
Dentro de ese documento vemos una parte llamada cabecera, que la reconocers porque
est limitada con la etiqueta <HEAD> </HEAD>. l contenido de esta parte no siempre es
visible, y si lo es nunca se muestra en la pgina en si. Contiene por ejemplo el ttulo que se
ve en la ventana del explorador, arriba a la izquierda. La cabecera queda por tanto:
<HEAD>
<TITLE>Mi segunda pgina web</TITLE>
</HEAD>
Puede contener muchas otras cosas, pero eso lo dejamos para ms adelante.
II.5. El cuerpo del documento

La otra parte es el cuerpo o <BODY> </BODY>, es el contenido de la pgina web. Tiene
una etiqueta con cierre:
<BODY> ... </BODY>
Y ahora el contenido:
<H1 align="center"> Mi segunda pgina web</H1>
Con esto colocaremos el texto en formato <H1> (o cabecera 1) y centrado (align="center"),

o sea, en tamao grande y centrado en la pgina, una forma de resaltar la frase. Ahora
separamos esa frase por medio de una lnea horizontal:
<HR>
Como ves este es un ejemplo de etiqueta sin cierre. Y por ltimo colocamos un texto
explicativo en un prrafo (<P></P>), o sea, un bloque de texto con un espacio por delante
y otro por detrs:
<P>Esto que ves tan sencillo es una verdadera pgina web, aunque le falta el contenido,
pero calma, todo llegar</P>
Para empezar no est mal, no es as?, por supuesto existen muchas ms etiquetas con
misiones diferentes a la de mostrar texto, pero eso lo iremos viendo poquito a poco.
Nota: La pgina principal de tu sitio, o sea la primera pgina que aparece, debemos
nombrarla index, seguida de un punto y el tipo d extensin (en este caso .htm o .html),
as: index.html o index.htm
II.6. Resumiendo la Estructura del documento

La estructura de un documento HTML se puede resumir as:
tipo de documento
<HTML>
<HEAD>
<TITLE>titulo de la pgina</TITLE>
cosas que afectan a la pgina pero no a su contenido
</HEAD>
<BODY parmetros>
contenido de la pgina
</BODY>
</HTML>
III. TIPO DE DOCUMENTO

Aunque he dicho antes que la primera etiqueta con la que ha de empezar el cdigo de una
pgina web deba ser la etiqueta <html>, realmente la primera lnea, antes de esa
etiqueta, debe ser la de definicin del tipo de documento.
Lo dicho sigue siendo cierto, pues la lnea de la que hablo ahora no es cdigo Html sino
solo un modo de indicar al navegador qu tipo de documento le estamos presentando.
Mediante esa lnea por tanto, podemos indicar al navegador que lo que contiene el archivo
que estamos creando es cdigo Html y qu tipo de Html concretamente, pues hay varias
formas de escribirlo en funcin de la versin de Html que vayamos a usar al escribir el
cdigo.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Ejemplos de Tipos de Documentos:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
Cumple el estndar HTML 2.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://w3.org/TR/REC-html40/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://w3.org/TR/REC-html40/strict.dtd">
Cumple el estndar HTML 4.0 y no contiene adems elementos desaconsejable
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://w3.org/TR/REC-html40/frameset.dtd">
Es una definicin de marcos que cumple el estndar HTML 4.0
Nota: El HTML 4.0 considera desaconsejables aquellos elementos que, an siendo
soportados, han sido sustituidos por otros ms potentes y, por ello, es posible que sean
eliminados del estndar HTML en el futuro.
<!DOCTYPE html>
Html5, la ltima versin de Html por el momento (es bien corta su definicin).
Anteriormente, para otras versiones de Html, la lnea para definir el tipo de documento era
ms larga y liosa, como puedes ver en los ejemplos anteriores pero ahora en Html5 es as
de cortica.
De modo que, una pgina web vaca, pero con el tipo de documento ya declarado
correctamente, sera as, y si es una versin anterior escoger cualquiera de los ejemplos
vistos arriba segn corresponda:
<!DOCTYPE
<html>
<head>
</head>
<body>
</body>
</html>
html>
IV. LA CABECERA
Suele ser el lugar ms indicado para colocar aquellos elementos de la pgina que no
alteren el contenido de la misma, aunque s la forma de presentarlo y su comportamiento.
Es por eso que es el lugar ms recomendable para colocar los scripts y las hojas de estilo,
como veremos en los captulos correspondientes.
Hay tambin otro elemento interesante que podremos incluir en nuestras cabeceras.
Cuando especificamos una URL relativa en un enlace, en principio es para acceder a una
pgina situada en nuestro mismo servidor.
Sin embargo, si especificamos:
<BASE HREF="http://www.misitio.com/">
Ahora todas nuestras
http://www.misitio.com
URLs
relativas
se
encontrarn
dentro
del
servidor
IV.1. Titulo o Title

Como he mencionado antes, hay una serie de elementos que no se ven directamente en el
contenido de las pginas, y el title o ttulo definido en la cabecera, es uno de estos y,
adems, es importantsimo.
Con las etiquetas <title> y </title> se define el ttulo de cada una de las pginas de una
web. No de la web completa, sino de cada pgina del sitio web. Por ejemplo, si tienes una
web que habla de cocina, tendr dentro, una pgina que hable de una sopa, otra de tarta
de fresa, etc. Pues cada una de esas pginas debe tener un ttulo que represente a esa
pgina, no uno genrico de la web, sino un <title> concreto para cada una de sus pginas.
Fjense que tenemos una etiqueta para indicar que empieza el ttulo y otra para indicar que
el ttulo ha terminado, <title> y </title>, ok?
La lnea completa de un cdigo de pgina sera por ejemplo este:
<title>Ttulo de esta pgina</title>
Quedando el cdigo completo de nuestro ejemplo de este modo:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
</html>
Lo que pongamos entre esas etiquetas <title> ser lo que va a aparecer en la barrita azul
que hay en la parte superior de los navegadores, pero no aparece dentro de la ventana del
navegador, solo en esa barrita de arriba. Sirven no solo para indicar al visitante qu va a
encontrar en esa pgina, sino tambin a los buscadores para saber de qu hablas en esa
pgina.
Es muy muy importante que el ttulo de cada una de las pginas de tu web sea distinto
de unas a otras. Como tengas dos titles exactamente iguales en varias de las pginas de
tu sitio web, los buscadores (por ejemplo Google) creern que tienes dos pginas idnticas
(que una es copia de la otra) de modo que solo har caso a una de ellas, solo indexar
una de las dos. Cuida que todas sean distintas para aumentar la cantidad de pginas que
los buscadores conocen de tu web y conseguir as aumentar las visitas de tu web.
Se recomienda, adems de no repetirse en las distintas pginas de tu web, que el
contenido del title no tenga ms de 65 letras o caracteres ni ms de 15 palabras.
Aprovecha para incluir en los ttulos palabras clave de esa pgina, es decir, algunas de
aquellas palabras por las que crees que podras ser encontrado si alguien est interesado
en encontrar una pgina como esa. Qu escribira un usuario en Google para
encontrarla?. Pues esas son tus palabras clave para esa pgina concreta.
Nota: Adems, no se pueden colocar dos etiquetas title dentro de la cabecera de una
misma pgina, tan solo una por pgina.
IV.2. Meta Name

Adems del ttulo de la pgina, uno de los elementos que se pueden incluir aqu es el
META. Entre otras cosas, sirven para indicar propiedades de la pgina como pueda ser el
nombre de su autor. Por ejemplo,
<meta name="Description" content="descripcin de la pgina">
<META NAME="GENERATOR" CONTENT="Mozilla/4.03 [es] (Win95; I) [Netscape]">
Esto nos indicara la herramienta con que hemos creado la pgina (en este caso la versin
4.03 en espaol para Windows 95 del Composer de Netscape). Como se ve el uso es muy
simple, en NAME colocamos el nombre de la etiqueta y en CONTENT colocamos su valor,
ambos entre comillas y con el signo igual por delante.
Actualmente los buscadores (incluido Google) solo hacen caso de las meta etiquetas title
y description. Recordar que el contenido de estas dos etiquetas ha de ser diferente en
cada una de las pginas de tu web, no olvidemos pues es un error muy comn, incluso en
pgina de cierta importancia. Se recomienda que el contenido dentro de la meta etiqueta
description no tenga ms de 150 caracteres ni ms de 30 palabras. Recordar que es una
descripcin, no una ristra de palabras sin sentido. No colocar dos lneas de description
dentro de la cabecera de una misma pgina, ok? Recordar, igual que con title, que se
coloca solamente un description.
Estas son las propiedades ms comunes:
Name
AUTHOR
Content
Autor de la pgina.
Palabras que permite clasificar la pgina dentro de un buscador
CLASSIFICATION
jerrquico (como Yahoo).
Palabras clave por las que encontrarn la pgina en los buscadores.
KEYWORDS
Google no le hace mucho caso.
GENERATOR
Herramienta utilizada para hacer la pgina.
DESCRIPTION
Descripcin del contenido de la pgina. Google le hace algn caso.
IV.3. Meta http-equiv

Son etiquetas usadas tambin para dar informacin al navegador y complementan las
etiquetas Meta vistas en el apartado anterior. En algunos casos existen etiquetas Meta
Name y http-equiv similares. Su uso es similar a las etiquetas Meta Name, por ejemplo:
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
La nica diferencia est en que en lugar de NAME usamos HTTP-EQUIV, el resto es igual.
Cuando el contenido conste de ms de varios valores, estos se separan con (;). Veamos
algunos tipos:
HTTP-EQUIV
expires
pragma
CONTENT
Fecha desde la que la pgina debe ser recargada por los navegadores
El contenido debe ser no-cache y sirve para que el navegador no
guarde la pgina en el ordenador del internauta.
Content-Language Idioma en el que est escrita la pgina. Se usan las iniciales como:
es_ES: espaol Espaa, en_US: ingles americano...
Refresh
Indica al navegador el tiempo (en segundos) que debe esperar para
recargar la pgina automticamente y la pgina a la que debe ir.
Ambos datos se separan con un punto y coma.
Content-Type
Tipo de documento y juego de caracteres usado. Lo habitual es
colocar
el
valor:
text/html;
charset=iso-8859-1
Si n o se usa los caracteres especiales (letras acentuadas, ) pueden
quedar ilegibles .
IV.4. Tipo de Codificacin (META)

Es posible que al escribir el ttulo de tu web del modo que he enseado antes, veamos que
aparecen caracteres extraos en esa barra superior del navegador. Sobre todo al usar
acentos o "ees". Por qu ocurre esto? Cmo lo evitamos?
Imaginas la cantidad de caracteres extraos que existen? Cosas en hebreo, en chino, o
sino las letras rusas esas tan raras, jeje. Para no volver locos a los navegadores tenemos
que indicarles qu tipo de codificacin vamos a usar en nuestras pginas web. Por
ejemplo, para escribir en espaol o castellano y evitar que aparezcan smbolos raros al
escribir los acentos, tenemos que avisar que estamos tratando de escribir en ese idioma.
Para que se muestren caracteres chinos y no una ristra de cosas sin sentido, tendramos
que avisarle igualmente al navegador que mostrar los caracteres segn esa codificacin.
Pues bien, para que se muestren correctamente las tildes o acentos que escribamos en el
contenido de nuestras pginas, tenemos que aadir una lnea que indique ese tipo de
codificacin. Como eso es algo que no se ve directamente en el navegador, sino que es un
tipo de definicin, est claro que esa lnea de cdigo ha de ir en la cabecera.
La lnea para que los caracteres en castellano aparezcan bien en los navegadores cuando
se escribe cdigo Html5 sera esta:
<meta charset="utf-8" />
Esa lnea ha de ir en todas las pginas de nuestras webs, o al menos, en las que no
hablemos en chino. Puede ser que en algunas versiones de navegadores ya no haga falta
esta codificacin, pues ya lo traen implcito y lo pueden reconocer sin problemas.
Veremos que esta etiqueta empieza por la palabra meta y que no tiene etiqueta de cierre
(no se pone </meta> al final de la lnea). Es un caso un poco especial pues normalmente
casi siempre hay una etiqueta de cierre tras una etiqueta de apertura. En el caso de que
una etiqueta no use la correspondiente etiqueta de cierre, se coloca en su lugar una barra
al final de la lnea de apertura. En este caso la puedes ver al final del cdigo que he
colocado antes.
Ahora que tenemos claro que el cdigo Html va a tener una codificiacin del tipo UTF-8,
hemos de asegurarnos de que cada vez que guardamos un archivo de cdigo, ha de
guardarse como tal, como UTF-8. Si lo guardamos sin especificar esto y por defecto se
guardara con otra codificacin, podramos tener los problemas comentados atrs, como
que los acentos aparezcan raros, etc.
Y este es el cdigo que llevamos hecho por el momento en este tutorial y que conocemos
ya perfectamente, lnea a lnea:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
</html>
Nota: Antes de seguir aadiendo lneas y lneas de cdigo Html a nuestros ejemplos,
recordar que la lnea que especifica el charset="utf-8" tiene que ser la primera lnea que
haya justo despus de <head>, pq en caso contrario, podra no ser leda por los
navegadores. (Debe estar dentro de los primeros 512 caracteres del archivo).
V. El CUERPO
El cuerpo es el contenido de la pgina propiamente dicho, o sea, lo que se ve, en el es
donde colocarn prcticamente todos los elementos que vamos a ir viendo por este
manual. Los atributos que admite esta etiqueta <BODY>:
BACKGROUND
Coloca una imagen como fondo de la pgina.
BGCOLOR
Define el color de fondo de la pgina.
BGPROPERTIES
Cuando es igual a FIXED el grfico definido como fondo de la pgina

permanecer inmvil aunque utilicemos las barras de desplazamiento.
TEXT
Color del texto.
LINK
Color de un enlace no visitado (por defecto azul).
VLINK
Color de un enlace ya visitado (por defecto prpura).
ALINK
Color que toma un enlace mientras lo estamos pulsando (por defecto

rojo).
LEFTMARGIN
TOPMARGIN
y Nmero de pixels que dejar de margen entre el borde de la ventana y

el contenido de la pgina.
MARGINWIDTH
MARGINHEIGHT
Equivalentes a los anteriores, pero stos funcionan en Netscape.
Nota: No resulta recomendable cambiar los colores del texto y enlaces a no ser que exista
alguna dificultad al leerlos por haber cambiado el fondo, ya que en muchas ocasiones el
usuario ha podido cambiarlos en las opciones de su navegador y estarn ya a su gusto.
V.1. Formato a nivel de bloques

Evidentemente en las pginas no todo el contenido es igual y por tanto no todo se ha de
mostrar en la misma forma, por eso HTML nos permite modificar el aspecto del texto.
Podemos darle diferentes formatos, modificando desde el aspecto de los caracteres (tipo
de letra) hasta el color. Podemos formatear desde las letras una por una hasta bloques
completos de texto.
V.1.1. Prrafos
Con lo explicado antes seguimos teniendo una pgina vaca. Explicamos ahora algunos
elementos que podemos usar en nuestras pginas web, y empezaremos por los prrafos.
Lo ms bsico que podemos insertar en nuestra nueva pgina an en blanco, son
palabras. Vamos a ver como se pone en cdigo Html un prrafo.
En primer lugar decir que todos los elementos (o casi todos los elementos) de una web, ir
dentro del body que ya conocen, es decir, entre <body> y </body>.
Existen otras cosas que no son "visibles" y esas irn en el head principalmente. Las
lneas que vimos para especificar el tipo de codificacin no es algo visible, mientras un
prrafo que intenta transmitir algo a los visitantes, obviamente si que es visible.
Para escribir un prrafo, lo haremos dentro de la zona visible (el body) encerrando lo que
queremos escribir entre los smbolos <p> y </p> que son las etiquetas para escribir
prrafos. Como ves, la primera etiqueta indica comienzo de prrafo (de ah la "p" de
prrafo) y la segunda situada al final indica el final del prrafo, y lleva por tanto la barra "/".
Por ejemplo, si queremos que en nuestra web aparezca el siguiente prrafo:
Hola amigos, esta es mi nueva Web
Tendremos que escribir, entre <body> y </body> la siguiente lnea:
<p>Hola amigos, esta es mi nueva Web</p> entonces quedara asi:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi Nueva Web</title>
</head>
<body>
<p>Hola amigos, esta es mi nueva Web</p>
</body>
</html>
Como vemos, en este ejemplo se ha puesto ya el ttulo a la pgina. En concreto se le ha

llamado "Mi Nueva Web".
Si ahora queremos aadir otro prrafo, simplemente colocamos otra lnea ms antes o
despus de la escrita antes, segn quieras que la nueva aparezca encima o debajo del
prrafo antiguo.
Por ejemplo, si quiero que antes del prrafo "Hola amigos...." aparezca la palabra
"BIENVENIDOS" el cdigo HTML debera quedar como sigue:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<p>BIENVENIDOS!</p>
</body>
</html>
Aunque a veces funcione sin etiqueta de cierre, no olvides nunca indicar el final del prrafo
con </p>. Te evitar problemas ms adelante.
V.1.2. Estilos de prrafos

Resulta comn querer hacer espacios entre prrafos. Antes vimos que la etiqueta <p>
dejaba una lnea en blanco y despus se escriba el texto, pero esta no es la nica etiqueta
que puede hacer esto.
Existe tambin la etiqueta <br> que deja una lnea de espacio. Podemos repetir la etiqueta
para dejar dos lneas de espacio.
Ejemplo:
Texto 1<br> Texto 2<br><br>Texto3
Resultado:
Texto 1
Texto 2
Texto 3
Tambin podemos colocar una lnea para separar, con la etiqueta <hr> y podemos ponerle
el tamao con la propiedad size, el ancho con width y el color con color, ejemplo:
<hr size="3" color="purple" width="75%">
Nota: Las etiquetas <br> y <hr> son unas de las etiquetas que no tienen cierre, as que no
es necesario poner la que sera etiqueta de cierre </br> o </hr>.
A continuacin muestro una Tabla con algunos de los estilos que pueden tener los prrafos
en HTML:
Estos estilos o formatos actan a nivel de prrafo:
Etiqueta
Significado
Resultado
<P>
Soy un prrafo: fjate en los

Sirve para delimitar un prrafo. Inserta una
espacios de antes y de
lnea en blanco antes del texto.
despus.
<p ALIGN=x> ... </p>
Alineacin izquierda
Texto centrado
Justificar el texto del prrafo a la izquierda
Alineacin derecha
(ALIGN=LEFT), derecha (RIGHT), al centro
Texto justificado o sea,
(CENTER) o a ambos mrgenes (JUSTIFY
alineado a ambos lados sin
html4 )
dejar, escalones en el
margen derecho.
<CENTER>
</CENTER>
... Permite centrar todo el bloque de texto Alineacin por defecto

encerrado.
Texto centrado
<PRE WIDTH=x>
</PRE>
Representa el texto encerrado en ella con un

... tipo de letra de paso fijo. El parmetro
Estoy en paso fijo
WIDTH especifica el nmero mximo de
caracteres en una lnea.
<BLOCKQUOTE>
</BLOCKQUOTE>
...
Mete sangras de prrafo tanto a derecha Si quieres ver el texto

como a izquierda. Suele usarse como indentado
por
ambos
tabulador
mrgenes usa el Blockquote.
V.2. Los encabezados

El HTML nos ofrece seis etiquetas distintas para mostrar cabeceras o ttulos.
Etiqueta
Resultado
<H1> ... </H1> Cabecera de nivel 1

Actan a nivel de prrafo, es decir, el texto encerrado en <h1></h1> lleva una lnea en
blanco por delante y por detrs. Habitualmente se utilizan para destacar ttulos de los
diferentes apartados o secciones de un texto.
Usando esto en los ejemplos:
......
<body>
<h1>BIENVENIDOS!</h1>
.......
Si ahora guardamos el archivo del ejemplo y lo abrimos como pgina web, se mostrar
este otro resultado.
La apariencia es sin duda alguna distinta, como si de un titular de peridico se tratara.
Existen otras etiquetas de ttulos en Html, h2, h3, h4, h5.... y hasta el 6, aunque no creo
que se pase del h2 o h3 normalmente. El aspecto de estos otros tipos de titular es menos
cantoso, menos destacado, conforme mayor es el numerito que sigue a la letra h.
Nota: Como estndar se usa h1 para titulares principales y h2 para titulares secundarios.
Si se diera el caso tambin los h3 para titulares menores, y as sucesivamente si aparecen
mas elementos de menor jerarqua.
V.3. Resaltar Textos

Con el tag <p> ya sabemos poner un texto simple. Pero quizs en algn momento
queramos escribir texto en negrita, o subrayado, o cursiva, etc. verdad?. Pues tambin
para esos estilos existe un "tag" o una etiqueta determinada.
V.3.1. Textos en Negrita

Si encerramos un texto entre <b> y </b> ste aparecer en negrita. El tag <b> representa
a la propiedad "bold" que significa negrita.
Podemos aplicar a la vez los tags <p>, <b> y cualquiera de los que se explican abajo.
Un ejemplo de un prrafo simple con una palabra en negrita, la palabra "negrita":
<p>Este prrafo es normal y esta palabra va en <b>negrita</b>, lo ves? </p>
V.3.2. Textos en Cursiva

Si encerramos un texto entre <i> y </i> ste aparecer en cursiva. El tag <i> representa a
la propiedad cursiva. Al igual que "b" representa "bold", "i" representa "italic" que significa
cursiva.
Podemos aplicar a la vez los tags <p>, <b>, <i> y cualquiera de los que se explican abajo.
Un ejemplo de un prrafo simple con dos palabras en cursiva, las palabras "cursiva" y
"ves":
<p>Este prrafo es normal y esta palabra va en <i>cursiva</i>, lo <i>ves</i>? </p>
V.3.3. Textos Subrayados

Si encerramos un texto entre <u> y </u> ste aparecer subrayados. El tag <u>
representa a la propiedad subrayado. Podemos aplicar a la vez los tags <p>, <b>, <i> y
<u>, entre otros.
Un ejemplo de un prrafo simple con un trozo subrayado:
<p>Este prrafo <u>tiene un trozo subrayado</u> Te gusta? </p>
V.3.4. Textos con Varios Estilos a la Vez

Como he dicho antes, podemos combinar todos estos estilos HTML. Eso s, debemos
respetar una cosilla. A ver... "no podemos cerrar una etiqueta fuera de la etiqueta que la
contiene". Para explicar esto vamos a ver un ejemplo...
Miren esta lnea:
<p>Hola amigos y amigas</p>
Todo eso es un prrafo, pues est encerrado entre <p> y </p>. Ahora vamos a poner todo
en negrita:
<p><b>Hola amigos y amigas</b></p>
Ahora todo est en negrita. Esto est bien, pues hemos cerrado la etiqueta "b" dentro de la
que la contiene, es decir, dentro de la etiqueta "p", de prrafo.
Vamos a ver un ejemplo mal hecho:
<p><b>Hola amigos y amigas</p></b>
Esta lnea est mal, pues se ha cerrado la etiqueta "b" fuera (detrs) de la etiqueta que la
contiene, es decir, fuera de "p".
Vamos a ver un tercer ejemplo mal hecho:
<p>Este <u>es un <b>ejemplo de etiquetas</u></b> en html</p>
Esa lnea est mal hecha, pues hemos cerrado "b" fuera de "u". Como "b" empieza dentro
de "u", debe cerrarse tambin dentro de "u".
El mismo ejemplo pero bien hecho sera:
<p>Este <u>es un <b>ejemplo de etiquetas</b></u> en html</p>
Espero que se hayan aclarado con esto.
Adems quiero que sepan que las etiquetas pueden escribirse en maysculas o
minsculas, da lo mismo.
Otro elemento importante es que todas las etiquetas deben cerrarse siempre. No vale abrir
una etiqueta, por ejemplo <p> y no cerrarla al final con </p>.
Es muy posible que a pesar de no cerrarla, parezca que funciona, pero se recomienda
cerrarlas siempre para evitar problemas a la gente que le visite con otros navegadores
distintos al vuestro.
Nota: Tambin se recomienda, siempre escribir las etiquetas en minscula.
A continuacin una tabla donde se muestran la mayora de las etiquetas que pueden
afectarme o modificarme un texto.
Todas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del tipo de
letra que estemos utilizando y se pueden utilizar dentro de un prrafo.
Etiqueta
Utilidad
Resultado
<B> ... </B>
Pone el texto en negrita.
Soy un texto negro como el

tizn
<I> ... </I>
Representa el texto en cursiva.
Estoy ladeado
<U> ... </U>
Para subrayar algo.
Como soy muy

estoy subrayado
Para tachar.
A m, en cambio, nadie me
quiere
<S> ... </S>
importante
<TT> ... </TT>
Permite representar el texto en un tipo de

No soy variable
letra de paso fijo.
<SUP> ... </SUP>
Letra superndice.
E=mc
<SUB> ... </SUB>
Letra subndice.
ai,j=bi,j+1
Incrementa el tamao del tipo de letra.
Soy GRANDE
Disminuye el tamao del tipo de letra.
Cre ver un lindo gatito
<BIG> ... </BIG>

<SMALL>
...
</SMALL>
V.3.5. Estilos de texto

Son formatos predefinidos aplicables a caracteres individuales (y a grupos). Realmente no
se usan demasiado, salvo que se controlen mediante los estilos CSS.
Etiqueta
Significado
Efectos
<CITE> ... </CITE>
Cita, por ejemplo de un texto
Esta frase no es ma
<CODE> ... </CODE>
Cdigo
int x=0;
<STRONG>
</STRONG>
Fuerte, negrita.
Hay cosas importantes.
<EM> ... </EM>
Enfasis.
Para poner nfasis
<KBD> ... </KBD>
Teclado
El usuario debe teclear Multivac

es el mejor.
<VAR> ... </VAR>
Representar variables de un cdigo.
La
variable
anteriormente...
<SAMP> ... </SAMP>
Para representar una

caracteres literalmente.
<ABBR>
...
de
definida
Estoy en un literal
...
Abreviaturas.
</ABBR>
serie
x,
La WWW usa el protocolo http
V.3.6. Otros elementos

Estas etiquetas realmente no son formato ni de prrafo ni de texto, pero hay que ponerlas
en algn sitio:
Etiqueta Significado
Resultado
<BR>
Cambio de lnea. Simple salto de linea
<HR>
Barra horizontal.
 Comentarios.
No se ve el contenido
V.4. Alineacin
Ya sabemos como dejar espacio, pero nos falta algo que es la alineacin. Si yo quisiera
que despus de dejar el espacio en blanco se escriba el texto al centro, o a la derecha,
entonces me tocara escoger una etiqueta que puede ayudarnos con eso.
Para esto tenemos dos etiquetas <p>, que adems de dejar espacio en blanco, puede
alinear o <div>. Usando alguna de estas dos etiquetas y agregando un atributo llamado
align, seguido del signo = y despus la posicin, escrita en ingls (left, right, center)
entre comillas ( " ).
Veamos un ejemplo para entenderlo mejor:
<p align="center">Texto Centrado</p>,
resultado:
Texto Centrado
Tambin podemos hacerlo con la otra etiqueta, <div>:
<div align="center">Texto centrado</div>,
resultado:
Texto
Centrado
Consejo: No olvides de poner las comillas ( " ) al valor del atributo, es decir, si alineas un
texto al centro pon entre comillas center. Esto es porque algunos navegadores no
reconocen el valor, aunque en la mayora de los casos no es necesario.
Nota: No es necesario agregar el valor left a un atributo de alineacin, o sea, nunca
deberas poner por ejemplo: <div align="left">, debido a que predeterminadamente todo se
alinea a la izquierda sin tener que indicarlo.
V.5. Los Comentarios

Para insertar un comentario solo necesitamos encerrarlo entre estos dos smbolos o
etiquetas:
 ( y con esto se termina el comentario)
Por ejemplo, esto que sigue es un comentario:


Otro ejemplo es este, donde vemos que podemos meter ms guiones por si queremos
dejarlo ms visible:

pero como mnimo debe tener los dos guiones tanto al principio como al final, adems del
resto de la etiqueta, .
Los comentarios no aparecen en la pgina cuando la visita alguien. En realidad no hacen
nada de nada de nada. Solo sirven para que el autor de la web, cuando mire su cdigo,
sepa qu es cada trozo de cdigo.
Es decir, podemos insertar comentarios en alguna parte del cdigo Html de nuestra pgina
para saber qu hace ese trozo, para dejarnos notas a nosotros mismos. De ese modo, si
pasado el tiempo revisamos la pgina, es posible que ni nos acordemos de qu es ese
trozo de cdigo tan raro, pero al haber puesto esos comentarios podremos acordarnos
fcilmente.
Podemos poner en una pgina un comentario para recordar que la parte <head> o
cabecera es donde debemos insertar la "metatags". El da que las insertemos, podemos
quitarlo, pero mientras, nos recordar dnde hay que ponerlas. El cdigo sera el siguiente:
<!DOCTYPE html>
<html lang="es">
<head>

</head>
<body>
<p>BIENVENIDOS!</p>
</body>
</html>
En Dreamweaver o en algunos editores de texto plano es muy fcil identificar esos
comentarios, pues al ver el cdigo de cualquier web con l, los comentarios aparecen en
gris claro.
Otra utilidad que tienen los comentarios es la siguiente. Si deseas anular algn trozo de tu
web, pero no quieres borrar su cdigo, pues no sabes si ms adelante te har falta, o
simplemente, porque quieres ver que tal se ve la web sin cierto elemento, solo tienes que
encerrar todo ese trozo de cdigo entre los smbolos de comentario y ese trozo quedar
anulado, pero no lo borrars y lo puedes activar (descomentar) despus.
Por ejemplo, para evitar que en el ejemplo de aqu arriba (de la ventana de fondo blanco)
aparezca la frase "Bienvenidos", bastara con poner los smbolos de comentario al inicio y
final de esa lnea, as:

<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>

</body>
</html>
V.6. Formateo de caracteres

Cuando hablamos del formato en un tema anterior adelantbamos que podramos dar
formato al texto a nivel de carcter, y que la cosa no se iba a quedar solo en poner
subrayados o negritas y cursivas.
V.6.1. Atributos del texto

En este captulo aprenderemos a darle color a un texto, modificar el tamao y el tipo de
fuente. La etiqueta que debemos usar es <font> (y su etiqueta de cierre) con los atributos
color, face (tipo de letra) y size (tamao), sin embargo en prximas versiones de Html
puede ser que esta etiqueta quede sin funcionar, as que es mejor estudiar despus de
este manual, el de CSS (mejor conocidas como hojas de estilo cascada), pero por el
momento usaremos esta etiqueta.
V.6.2. Diferentes atributos de esta etiqueta <Font>:

Face: Indica el tipo de letra que se le quiere dar al texto. Hay muchos tipos de fuentes,
entre las ms conocidas se encuentran Times New Roman, Arial y Verdana.
A veces, es recomendable poner varias fuentes separadas por comas (,) debido a que
cada navegador dispone de otros tipos de fuentes.
Esto se indica despus del signo = y entre comillas (").
Ejemplo:
<font face="Verdana, Comic Sans Ms, Arial">Fuentes Arial - Verdana - Comic Sans
MS</font>
Resultado:
Fuentes Arial - Verdana - Comic Sans MS
As, el navegador comprobar que est disponible la primera fuente, sino se va a la
segunda, y as hasta encontrar una fuente que est disponible, y si ya no hay fuentes
disponibles para este navegador, pone la predeterminada (que es Times New Roman).
Size: Este atributo indica el tamao del texto. Los valores pueden ser del 1 al 7 y se
escriben como cualquier valor, despus del signo = y entre comillas (").
Ejemplo:
<font size="5">Texto con tamao 5</font>
Resultado:
Texto con tamao 5
Color: Este atributo indica el color del texto. Hay dos formas de indicar el color que
deseamos poner:
1. Escribiendo el nombre del color que queremos, pero en ingls, si queremos que algo
est en rojo el valor del atributo color sera red.
2. Indicando el valor de RGB (Red Green Blue - Rojo Verde Azul) con numeracin
hexadecimal (del 0 al 9 y de la A a la F) despus del signo de nmero ( # ). Este suele ser
un poco ms complicado, pero si queremos indicar colores ms exactos debemos usar
este mtodo.
Un valor se conseguira poniendo los valores RRGGBB. Ejemplo:
<font color="#FF00FF"> Texto rosa</font>
Resultado:
Texto rosa
Tambin podramos incluir estos 3 atributos:
<font color="#CC0000" size="4" face="Comic Sans MS">Texto con todos los
atributos</font>
Resultado:
Texto con todos los atributos
V.6.3. El color
Podemos cambiar el color de cualquier carcter mediante el uso del parmetro COLOR. La
manera de especificarle el color es comn a todas las etiquetas HTML: o bien indicando el
nombre, si es un color normal, o bien especificando los componentes de rojo, verde y azul
(cdigo RGB) del mismo.
Los colores reconocidos son los siguientes:
Black Silver Gray White Maroon Red Purple Fuchsia
Green Lime Olive Yellow Navy
<FONT color="blue">Soy azul como el mar</FONT>
Blue Teal
Aqua
El modo de indicar el color RGB es el mediante los componentes RGB para lo que se usa
un cdigo de seis dgitos hexadecimales: 00 a FF. Por ejemplo:
<FONT COLOR="#FF0000">Cdigo para rojo es #FF0000D</FONT>
Cdigo para rojo es #FF0000
<FONT COLOR="#00FF00">Cdigo para verde es #00FF00</FONT>
Cdigo para verde es #00FF00
<FONT COLOR="#0000FF">Cdigo para Azul es #0000FF</FONT>
Cdigo para azul es #0000FF
<FONT COLOR="#0000FF">Y ahora mezclemos colores con #10A2FF</FONT>
Y ahora mezclemos colores con #10A2FF
V.6.4. Tamao del texto

El parmetro utilizado para indicar el tamao es SIZE. Puede utilizarse para indicar
tamaos absolutos:
SIZE=1 SIZE=2 SIZE=3 SIZE=4
SIZE=5 SIZE=6 SIZE=7
El tamao por defecto es 3. Tambin se puede utilizar los modificadores + y - para indicar
un incremento (o decremento) relativo del tamao del tipo de letra. As, por ejemplo, si
indicamos que queremos un tamao de -2 estaremos pidiendo al navegador que nos
muestre el tipo de letra dos veces ms pequeo.
<FONT SIZE=2><font size="2">Tamao 2</font><FONT SIZE="+3">
<font size="2"><font size="+3">Tamao 6</font></font></FONT></FONT>
V.6.5. Tipo de Letra

Por ltimo, podemos especificar el nombre del tipo de letra que queremos utilizar gracias al
parmetro FACE. Pero ojo esto no es realmente muy utilizable.
El navegador usar el tipo de letra indicado en este atributo si tiene esa fuente instalada. Si
sales de la Times New Roman, Arial, Helvtica, Verdana o Courier corres el riesgo de que
el usuario no llegue a ver la pgina como t la has diseado, sino de una manera que
puede llegar a ser desastrosa para el diseo.
Si el navegador no encuentra ninguno de las fuentes indicada en este parmetro utilizar
la fuente por defecto:
<FONT FACE="Helvetica,Arial,Times">
<font face="Helvetica,Arial,Times">
No s como voy a salir exactamente</font></FONT>
V.6.6. Caracteres extendidos en HTML

Cualquier carcter, especial o no, puede mostrarse en una pgina usando su cdigo
ASCII, es decir, el nmero que tiene asignado, encerrado entre &# y ;.
Por ejemplo el smbolo @ tiene como cdigo ASCII el 64, as podemos representarlo
como:
@
Si ussemos el nmero 127 obtendremos nuestra tilde ~ . No obstante muchos caracteres
especiales tienen sinnimos que nos facilitan su insercin en las pginas web:
Cdigo
Resultado
á, Á, é, É,... , , , , , , , , y

ñ y Ñ
¿
¡
º
ª
™
©
®

Espacio en blanco
V.6.7. Caracteres reservados

En el HTML existen cuatro caracteres de control, que se usan para formar etiquetas,
establecer parmetros, etc. Para poder emplearlos sin riesgo deberemos escribir los
siguientes cdigos:
Cdigo Resultado
<
<
>
>
&
&
"
"
V.6.8. Atributos de <BODY> FIN
Primera Clase ITB
Hay algunos atributos que se aaden a <body> (y tambin a tablas, filas, celdas...) para
cambiar el color de fondo, poner una imagen como fondo, hacer ms grueso el margen,
definir el color de un enlace (mejor conocido como link), definir un color para todo el texto
de la pgina. Adems de estos hay mucho ms, pero por el momento solo usaremos
estos.
Los atributos son:
bgcolor: Sirve para poner un color fijo de la pgina. Como ya indicamos en el

captulo anterior se indica con el nombre del color (en ingls) o el valor RGB. <body
bgcolor="#00CCFF">
background: Coloca una imagen de fondo de la pgina, esta se repite varias veces
hasta llenar toda la pgina. Pueden ser fondos con extensin JPG, GIF, BMP o
PNG, solo escribimos el nombre de la imagen y su extensin.
<body background="fondo.jpg">
Nota: Cuando ponemos un fondo en una pgina, tambin podemos indicarle otro
atributo, que es el de fijar el fondo (este efecto solo funciona si hay ms espacio y
tenemos que usar las barras de desplazamiento).
<body background="fondo.jpg" bgproperties="fixed">
text: Indica el color para todo el texto de la pgina, que por defecto es el negro
(black - #000000 ). Adems, podemos indicar el color de los enlaces (links) para
diferenciar del resto del texto, por defecto vienen subrayados (esto se puede
mejorar con css).
link: El color del link normal, es decir, uno que no ha sido visitado (que no se ha
hecho click sobre l). Por defecto es el azul ( #FF0000 ).
vlink: Es el color de un link visitado (que se ha hecho click).
Por defecto es el morado ( #800080 ).
alink: Indica el color de un enlace activo, quiere decir, cuando un enlace est
presionado (este casi no se nota). Por defecto es el rojo ( #FF0000 ).
Tambin podemos indicar el margen de la pgina, quiere decir, desde donde se va a

escribir, los valores debern ser en pixeles y son 4 propiedades:
leftmargin: Indica el espacio de los lados de la pgina (derecha e izquierda).

topmargin: Indica el espacio del borde superior e inferior.
marginwidth: Es el equivalente a leftmargin.
marginheight: Es el equivalente a topmargin.
<body leftmargin="2" topmargin="2" marginwidth="0" marginheight="1">

Importante: Las primeras dos propiedades (leftmargin y topmargin) son vlidas solo
para Internet Explorer, y las otras dos (marginwidth y marginheight) son vlidas para
Netscape.
Vamos a juntar todas estas propiedades:
<body background="../Images/backy.jpg" bgproperties="fixed" text="#000099"
link="#FF0000" vlink="#009900" alink="#009900" topmargin="8" leftmargin="4"
marginwidth="4" marginheight="8">
<h3>Texto normal</h3>
<a href="http://microsoft.com">Ejemplo de Link</a>
</body>
V.7. Enlaces web

V.7.1. Enlaces
Las pginas web no son ms que un caso particular de documentos de hipertexto, es
decir, documentos cuyo contenido no es solo el texto simple que podemos leer sino
tambin el contenido de otras fuentes a las que accedemos desde el documento. En el
caso de las pginas web estas otras fuentes pueden estar situadas en cualquier parte de la
red, y a ellos se accede mediante los enlaces o links: unos elementos interactivos del
documento que aparentemente son solo eso una palabra o un grfico que habitualmente
destacan por su color o su forma. Es prcticamente imposible que una pgina web no
posea uno de estos enlaces.
Los enlaces que nos encontramos en cualquier pgina pueden ser de dos tipos:
Internos a la propia pgina,

Externos a otra pgina.
Un enlace (o link) puede ser para ver otra pgina, descargar archivos o ir a otro sitio.
Los enlaces se pueden identificar si el texto es de otro color o al pasar el mouse se
produce un efecto (cambia de color, se subraya...).
Tambin podemos enlazar una imagen, es decir, que una imagen nos sirva como enlace y
al presionar sobre esta nos lleve a otra pgina.
Para hacer un enlace se usa la etiqueta <a> (y la etiqueta de cierre), seguida de la
propiedad href, que su valor ser el enlace.
V.7.2. La etiqueta <A>

La etiqueta <A></A> (<a></a>) nos sirve para delimitar la zona de la pgina que constituye
el enlace. Lo que est encerrado en esta etiqueta ser mostrado por el navegador de
forma resaltada, bien sea por el color si es texto o por un borde si es una imagen (a menos
que modifiquemos el formato), y si pulsamos con el cursor del ratn sobre esa zona el
navegador se dirigir al lugar apuntado por ese enlace. El formato completo de esta
etiqueta es el que sigue:
<A HREF="direccin de destino" target="destino">Pulsar para saltar</A>
La direccin de destino ser la pgina web especificada mediante una URL, en formato
absoluto o relativo. En ambos casos el destino puede incluso ser un elemento concreto
dentro de la pgina. En este caso se ha usado un texto pero igualmente podramos colocar
una imagen.
Si ya has navegado un poco por internet, te habrs dado cuenta de que al pulsar enlaces
en ocasiones te aparece la pgina de destino en la misma ventana del navegador (internet
explorer, firefox o el que sea) y en otras ocasiones en una ventana nueva, aparte de la que
estabas mirando, no?
El atributo target es una manera de decirle al navegador en que ventana debe abrir esa
nueva pgina. Este atributo puede tomar los siguientes valores:
target="_top": Se usa esta opcin cuando queremos que el archivo enlazado se muestre
en una pantalla completa de la ventana eliminando los frames o marcos si los hay. Esta
opcin se utiliza solo cuando nuestra pgina web est hecha con frames o marcos.
target="_parent": Con esta opcin la pgina destino se muestra en marco anterior al
marco o frame en el que est el enlace. Pues no pasa nada, pues es tambin para usar
cuando tienes marcos y no va a ser el caso.
target="_self": Con esta tercera opcin, la pgina de destino a la que apunta en vnculo se
mostrar en la misma ventana del navegador del visitante, es decir, no se abrir en una
ventana aparte. Esta opcin es la que se toma por defecto, la que se activa si no se
indica ninguna propiedad target y por tanto tampoco la usaremos
target="_blank": Esta es la que mas nos interesa. Con esta opcin la pgina enlazada se
abrir en una ventana nueva del navegador. Resulta til cuando queremos enviar a las
visitas a una pgina externa, fuera de nuestra web. As se mantendr nuestra web abierta
en otra ventana y no perdemos esa visita, pues tiene nuestra pgina a mano. Tambin la
puedes usar cuando quieres mostrar otra pgina de tu web, pero sin que el visitante pierda
de vista la pgina en la que estaba.
Resumiendo, si queremos que la pgina de destino se abra en otra ventana del navegador
usaremos target="_blank" y en caso contrario no colocamos esa propiedad target.
V.7.3. Tipos de Enlaces

Como dijimos anteriormente, existen varios tipos de enlaces:
Internos: Nos llevan a otras partes dentro de la misma pgina.
Locales: Son los enlaces que nos dirigen a otras pginas del mismo sitio.
Remotos: Nos dirigen a otro sitio o a una pgina de otro sitio (sitio externo al nuestro).
E-Mail: Como dice, enva un mensaje a un e-mail.
Archivos: Sirven para descargar o ver archivos (exe, doc, pdf, mp3...).
Internos: Este tipo de enlaces nos manda a una parte de la pgina en la que estamos.
Normalmente, se usan cuando una pgina es muy grande y se necesita ir a una parte
especfica. Esto se hace con la etiqueta <a>, la propiedad href, despus el signo de
nmero ( # ) y el nombre que colocaremos en la parte donde queramos que vaya el
visitante.
Ejemplo:
<a href="#texto">Ir al texto</a> y en la parte donde queramos ir <a name="texto"></a>
Locales: Los sitios web estn formados de pginas, que muestran diferentes contenidos.
Las propiedades de la etiqueta son las mismas que en los enlaces internos, pero sin el
signo de nmero (a menos que en la otra pgina queramos abrirla e ir a una parte
especfica). Se tendra que escribir el nombre del archivo seguido de un punto y la
extensin. Entre la etiqueta se deber escribir el texto que aparecer.
Ejemplo:
<a href="1.html">Ir al ejemplo de Body</a>, resultado: Ir al ejemplo de Body.
Si hay pginas en otro directorio (o carpeta), deberemos poner el nombre de la carpeta,

despus una barra ( / ) y la pgina.
Ejemplo:
<a href="Images/titulo.png">Ver logo del manual</a>
Resultado:
Ver logo del manual (esto sera un vinculo a la carpeta images y dentro de esta, la imagen
titulo.png)
Si tenemos un archivo (cualquier tipo) en una subcarpeta y queremos enlazar a una
imagen (o cualquier otro tipo de archivo) que est en la carpeta principal u otra subcarpeta,
deberamos poner en la ruta dos puntos (..), seguida de la carpeta que contiene el archivo
y despus el nombre del archivo.
Para enlazar desde indice.html a excavando.gif, pones
<a href="Images/excavando.gif">Enlace</a>
Para enlazar desde body.html a excavando.gif, pones

<a href="../Images/excavando.gif>Enlace</a>
Si existira una subcarpeta dentro de otra subcarpeta, por ejemplo, dentro de la subcarpeta
Samples, una subcarpeta Archivos, dentro de esta hay un archivo, y enlazamos desde
body.html, ponemos dos puntos, una barra, dos puntos, otra barra y el nombre del archivo.
Ejemplo:
<a href="../../Archivos/imagen.gif>Imagen</a>
Para ir a otra pgina e ir a una parte en especfico, pones el nombre de la pgina seguido
del signo de nmero y el nombre de la seccin.
Ejemplo:
<a href="indice.html#Ind">Ir al indice</a>
Existe un atributo ms, que al pasar el mouse por algn enlace, aparezca un texto.
El atributo es title y el valor es el texto que se quiera mostrar:
<a href="#" title="Texto del enlace">Enlace</a>
Resultado (pon el mouse sobre el texto):
Enlace
Remotos: Este tipo de enlaces son para acceder a pginas que estn fuera de nuestros
sitios. Es igual que un enlace local, pero el URL (nombre del sitio) debe empezar por
http://.
Ejemplo:
<a href="http://microsoft.com">Microsoft</a>, resultado: Microsoft.
Pero tambin tiene 4 propiedades, junto con el atributo target para abrir de distintas
formas un enlace:
blank: Esta propiedad hace que la ventana se abra en una pgina por aparte, una
ventana nueva.
top: Se abre a pantalla completa, sin frames (pginas independientes, que veremos
en los ltimos captulos).
self: Esta propiedad abre el enlace en la misma pgina en la que est, es la
propiedad por defecto.
parent: El enlace se abre sobre su padre, si no hay un padre se abre en la misma
pgina.
E-mail: Estos enlaces nos dirigen a una direccin de mail. Se coloca el atributo mailto:
despus del href, seguido del mail.
Ejemplo:
<a href="mailto:leoj90@gmail.com">leoj90@gmail.com</a>,
resultado: leoj90@gmail.com.
Tambin se puede agregar el asunto y una copia para que se enve a otro mail, con las
propiedades subject?= y &cc.
Ejemplo:
<a href="mailto:leoj90@gmail.com?subject=Informacion de
producto&ccinfo@microsoft.com">leoj90@gmail.com</a>
el resultado es el mismo aparentemente, pero pon el mouse sobre el siguiente enlace y ve
la barra de estado (abajo donde normalmente dice Listo):
leoj90@gmail.com
Importante: Este mtodo no es muy comn para enviar un e-mail, mas adelanta se detalla
ms sobre esto.
Archivos: Este tipo de enlace se usa para ver o descargar un archivo. Si es ZIP o EXE, al
hacer click se muestra un cuadro de dilogo para ver o descargar, otros formatos, como de
audio y/o video (mp3, mpg, avi, wav, mov, wmv...) abren el programa predeterminado del
usuario para reproducirlo.
Para evitar esto, podras poner un mensaje que diga "Haz click con el botn derecho del
mouse y selecciona 'Guardar destino como...' para descargar el archivo".
Vamos a ver cual es el cdigo para descargar el Msn Plus! (por ejemplo):
<a href="http://download.msgplus.net/files/MsgPlus-361.exe">Descargar Msn Plus!</a>,
resultado: Descargar Msn Plus!
V.7.4. Las URLs

Cualquier elemento conectado a la red internet se identifica por un conjunto de cuatro
nmeros entre 0 y 255, algo as como 84.234.12.122, cualquier sitio de Internet est
identificado por esta direccin.
Pero como quiera que recordar esos nmeros no es nada fcil existen unos servidores de
nombre que transforman esas direcciones en nombres ms humanos como
www.espaciolatino.com. A estas direcciones se les llama Universal Resource Locator, o
URL, es la forma de localizar cualquier pgina en internet.
En general tiene el siguiente formato:
protocolo://mquina:puerto/ruta/fichero@usuario
donde protocolo puede ser uno de los siguientes:
http
Es el protocolo para la transmisin de documentos HTML, es decir, el que
habitualmente usamos para ver las pginas en nuestro navegador.
https
Es similar al anterior pero con la particularidad de que la informacin viaja
codificada mediante tcnicas de encriptacin.
ftp
Es un protocolo para la transmisin de ficheros (File Transfer Protocol). Permite
intercambiar ficheros con sitios en los que se ejecuten servidores ftp. Los
navegadores actuales permiten acceder a estos servidores FTP, pero lo ms
normal es usasr unos programas al efecto denominados clientes de FTP.
mailto
Otro protocolo para la transmisin de datos, pero en este caso a travs de
servidores de correo.
news
Mediante este protocolo accedemos a los denominados grupos de noticias, listas
de distribucin de mensajes relativos a temas concretos. Habitualmente se accede
a estos servidores mediante el cliente de correo.
telnet
Es un Terminal de acceso remoto en modo texto. Es un sistema bastante inseguro
por lo que no es habitual en servidores donde la seguridad est bien pensada.
Lo ms normal en nuestras pginas ser acceder a elementos de otros pginas y por tanto
lo habitual ser usar URL del estilo http://servidor.dom/pgina.htm o similar.
En un enlace podremos usar la URL como hemos escrito ms arriba, URL absoluta, pero
tambin podremos usar formatos como /pagina.htm, parece que faltara la primera parte de
la direccin verdad? Pues no, en estos casos el navegador completa esa parte con la
correspondiente de la pgina en la que est el enlace, son las URL relativas.
Por ejemplo si miramos la URL de una pgina que es
http://www.espaciolatino.com/tutorhtml/tema6.html
Pues bien si en esta pgina se colocara un enlace en la forma
<A href="tema3.htm">Tema 3</A>
Esta direccin realmente apuntara a
http://www.espaciolatino.com/tutorhtml/tema3.html
Como ltimo detalle a tener en cuenta es el uso de la / como forma de referirse a la raz del
sitio. As este enlace
<A href="/index.htm">Portada</A>
Estara apuntando a http://www.espaciolatino.com/index.htm.
V.7.5. Anclas
Como dijimos antes, es posible acceder a una posicin dentro del documento HTML. Para
ello lo primero que tenemos que hacer es colocar marcas de destino en el documento al
que queremos acceder:
<A NAME="ancla">
A estos elementos se les llama anclas. Su uso es muy simple: en una etiqueta de enlace
colocamos el smbolo # seguido del nombre del ancla de esta manera:
<A HREF="#ancla">Ancla en esta pgina</A>
Al pulsar sobre este enlace se mostrar en la ventana la parte de la pgina actual que
contiene el ancla. Si queremos acceder a un ancla en otra pgina basta indicarlo al final de
su URL. Como en este ejemplo:
<A HREF="1- 1ra_pag.html#ancla">Ancla en la pgina 1-1ra_pag.html </A>
Usando las anclas o anclajes puedes hacer que cuando las visitas pulsen sobre ese
enlace, la ventana del navegador corra hacia esa parte concreta de la misma pgina o
bien, pase a otra pgina distinta, pero no a su comienzo, sino a la parte media o a la parte
que t desees de esa otra pgina.
Para verlo ms claro an, imagina que en una misma pgina de tu web hablas de pelculas
de accin, y luego, debajo, de pelculas de humor, y bajo sta parte, de pelculas de
ciencia ficcin. Si defines un ancla o un anclaje en cada uno de sus ttulos puedes luego
colocar vnculos de modo que al pulsarlos se dirija justo a esa parte de la pgina.
Si defines un ancla al principio del contenido y colocas un enlace en la parte inferior
indicando "Ir al principio de la pgina", al pulsarlo se dirigir automticamente a la parte
superior, an siendo la misma pgina.
Si queremos enviar a las visitas a la parte superior, lo normal es colocar el enlace en la

parte inferior (si el usuario est arriba, para que darle la opcin de ir arriba si ya est all,
no?).
Esto se puede hacer con por ejemplo esta lnea de Html:
<a href="#arriba" title="Ir Arriba">Ir arriba</a>
Del mismo modo, podramos colocar arriba de la pgina otro enlace que permitiera a las
visitas ir al parte inferior.
<a href="#abajo" title="Ir Abajo">Ir abajo</a>
Si en una pgina de tu web escribes mucho texto y tiene digamos 3 partes diferenciadas (3
ttulos por ejemplo) podras definir un ancla en cada uno de esos ttulos, y luego colocar
un men en la parte inferior, o en la parte superior, o en ambas, dando la opcin a las
visitas a dirigirse, dentro de esa misma pgina, a la seccin que deseen.
En ese caso colocaras al principio (o al final) ese men, de este modo por ejemplo:
<a href="#titulouno" title="Ir al ttulo uno">Ir al ttulo uno</a>
<a href="#titulodos" title="Ir al ttulo dos">Ir al ttulo dos</a>
<a href="#titulotres" title="Ir al ttulo tres">Ir al ttulo tres</a>
Y ahora solo te faltara colocar esas 3 anclas justo al lado de esos ttulos, lneas de cdigo
como sta:
<h1>Ttulo Uno</h1><a name="titulouno"></a>
<p>Este es el texto correspondiente al ttulo uno, aunque debera ser ms largo para que
se note el efecto.</p>
<h1>Ttulo Dos</h1><a name="titulodos"></a>
<p>Este es el texto correspondiente al ttulo dos, aunque debera ser ms largo para que
<h1>Ttulo Tres</h1><a name="titulotres"></a>
<p>Este es el texto correspondiente al ttulo tres, aunque debera ser ms largo para que
Si en lugar de querer enviar a las visitas a una parte concreta de esa misma pgina,
quieres enviarlas a una parte concreta de otra pgina de tu web, has de definir ese ancla
en la pgina y lugar que quieres elegir de destino, como en este ejemplo, pero en el enlace
has de colocar adems del ancla, la ruta de esa otra pgina, tal y como aparece aqu
abajo:
<a href="pagina-de-destino.html#nombre-del-ancla">Enlace hacia el ancla</a>
Es decir, si en una pgina de tu web quieres colocar un enlace hacia el ttulo dos que
hemos visto en el ejemplo de antes, si esa pgina que contiene los tres ttulos se llama
titulares.html, entonces en la otra pgina tendras que poner esta lnea:
<a href="titulares.html#titulodos">Ir al ttulo dos de la pgina titulares</a>
FIN 2da Clase ITB (Recordar el tema de los Url)
VI. El FORMATO LISTAS

Muchas veces queremos hacer una lista de nuestros productos, numerar captulos...
El lenguaje HTML nos permite crear listas en las pginas web de una manera casi tan
simple y efectiva como en un procesador de textos, para ello utiliza las etiquetas de listas,
de las que existen varios tipos. Todas ellas se pueden anidar (meter unas dentro de otras)
formando rboles ms o menos complejos. Todo esto se puede hacer con distintos tipos
de listas:
Todos los tipos siguen el mismo formato:
<tipo_lista>
<LI>Primer elemento
<LI>Segundo elemento
</tipo_lista>
tipo_lista puede ser una de las siguientes: UL, OL, DL.
VI.1. Listas desordenadas

Para este tipo de listas se usa la etiqueta <ul> (y la etiqueta de cierre). UL proviene de las
palabras en ingls unorder list (lista desordenadas). Cada elemento se pone con la
etiqueta <li>, sin etiqueta de cierre, y se corresponde con las vietas en los procesadores
de texto: son listas donde cada elemento est precedido de un smbolo como un punto o
un disco.
EL formato es el que sigue:
<UL>
<LI>Juan Pedro
<LI>Luisa
</UL>
se ver como:
Juan Pedro
Luisa
Ejemplo:
<p>Pases distribuidores</p>
<ul>
<li>Mxico
<li>Estados Unidos
<li>Canad
</ul>
</p>
Resultado:
Pases distribuidores
Mxico
Estados Unidos
Canad
Tambin podemos cambiar el tipo de vieta (el punto), hay tres tipos:
o circle
square
disc
Estos se pueden poner con el atributo type, ya sea en la etiqueta <ul> o <li>:
Ejemplo:
<ul type="square">
<li>Mxico
<li type="circle">Estados Unidos
<li>Canad
</ul>
Resultado:
Mxico
o Estados Unidos
Canad
A partir del HTML 3.2 la etiqueta <UL> admite estos parmetros:
Parmetro
Significado
Resultado
COMPACT
Indica al navegador que debe representar la lista de la

manera ms compacta posible.
TYPE="disc",
"circle", "square"
Indica al navegador el dibujo que preceder a cada

elemento de la lista. Para mayor flexibilidad se admite
tambin como parmetro de <LI>.
Primer
elemento
Segundo
elemento
Tipo disc
Tipo circle
Tipo square
VI.2. Listas ordenadas

Se usa la etiqueta <OL>. OL proviene de la palabra en ingls Ordered List (lista
ordenada), y nos permite presentar listas como esquemas numerados de un solo nivel, o
sea, que cada elemento de la lista lleva un nmero de orden.
Por ejemplo:
<OL>
<LI>Primer elemento
<LI>Segundo elemento
</OL>
Se ver como
1. Primer elemento
2. Segundo elemento
Como la otra lista, cada elemento se pone con <li>:
<p>Reglas</p>
<ol>
<li>No fumar
<li>No gritar
<li>Tener paciencia
</ol>
Resultado:
Reglas
1. No fumar
2. No gritar
3. Tener paciencia
As como para las listas desordenadas se puede cambiar el tipo de vieta, en listas
ordenadas se puede cambiar el tipo de numeracin que se indique en el atributo type y
pueden ser:
1 Ordena con nmeros
a Ordena alfabticamente en minsculas
A Ordena alfabticamente en maysculas
i Ordena con nmeros romanos en minsculas
I Ordena con nmeros romanos en maysculas
<p>Ordenamos por nmeros</p>
<ol type="1">
<li>Elemento 1
<li> Elemento 2
</ol>
<p>Ordenamos por letras</p>
<ol type="a">
<li>Elemento a
<li> Elemento b
</ol>
Resultado:
Ordenamos por nmeros
I. Elemento I
II. Elemento II
Ordenamos por letras
A. Elemento A
B. Elemento B
Si queremos que empiece a contar desde otro nmero, por ejemplo 10 o X en vez de 1 o I,
lo haramos con el atributo start seguido del nmero o letra por el que queramos empezar:
<p>Ordenamos por nmeros romanos empezando por el 10</p>
<ol type="i" start="10">
<li>Elemento 10
<li>Elemento 11
</ol>
<p>Ordenamos por nmeros romanos empezando por el 10 (en romano)</p>
<ol type="i" start="10">
<li>Elemento x
<li>Elemento xi
</ol>
Resultado:
Ordenamos por nmeros romanos empezando por el 10
10. Elemento 10
11. Elemento 11
Ordenamos por nmeros romanos empezando por el 10 (en romano)
x. Elemento x
xi. Element xi
Podemos juntar los estilos y hacer una lista mixta:
<p>Pases distribuidores</p>
<ul>
<li>Canad
<ol>
<li>Toronto
<li>Calgary
</ol>
<li>Estados Unidos
<ol>
<li>Nueva York
<li>Los Angeles
<li>Miami
</ol>
</ul>
Resultado:
Pases distribuidores
Canad
1. Toronto
2. Calgary
Estados Unidos
1. Nueva York
2. Los Angeles
3. Miami
El HTML 3.2 se admiten estos parmetros para la etiqueta <OL>:

Parmetro
Significado
Indica al navegador que debe representar la lista de la

manera ms compacta posible.
COMPACT
TYPE="1",
"A", "i", "I"
Resultado
1. Primer
elemento
2. Segundo
elemento
1. Tipo 1
b. Tipo a
Indica al navegador el tipo de numeracin que
C. Tipo A
"a",
preceder a cada elemento de la lista. Para mayor iv.
Tipo i
flexibilidad se admite tambin como parmetro de <LI>.V.
Tipo I
START="num"
Indica al navegador el nmero por el que se empezar

a contar los elementos de la lista.
3. Primer
elemento
4. Segundo
elemento
1. Primer
elemento
VALUE="num"
Atributo de <LI>, acta como START pero a partir de un

elemento predeterminado.
4. Segundo
elemento
5. Tercer
elemento
VI.3. Listas de definiciones

Este tipo de lista utiliza las etiquetas <DT>y <DD> en lugar de <LI>. En estas listas cada
elemento tiene una entrada de texto indentada respecto a dicho elemento. Es como si
tuviramos una lista de conceptos y sus definiciones (el texto indentado).
Para entenderlo lo mejor es verlas en marcha:
<DL>
<DT>HTML<DD>Es un lenguaje de definicin de pginas web.
<DT>JAVA<DD>Es un lenguaje de programacin.
</DL>
se ver como:
HTML
Es un lenguaje de definicin de pginas web.
JAVA
Es un lenguaje de programacin.
La etiqueta <DL> slo admite como parmetro el ya conocido COMPACT, que tiene el
mismo comportamiento que con los otros dos tipos de lista anteriores. Un elemento <DT>
puede contener varios elementos <DD>.
VII. IMAGENES
Una pgina web sin alguna imagen es como el mar sin sal. Sin duda lo mejor de una
pgina web son las imgenes. Como dijimos hay varios tipos de imgenes: JPG, BMP, GIF
y PNG.
La etiqueta para insertar una imagen es <img> (no tiene etiqueta de cierre) y sus
propiedades son:
src: El nombre completo (con la extensin) de la imagen.
border: El tamao de borde para la imagen.
alt: El texto que se muestra al pasar el mouse sobre la imagen.
width: Ancho de la imagen (en pxeles o en porcentaje).
height: Alto de la imagen (en pxeles o en porcentaje).
vspace - hspace: Indica el espacio (en pxeles) libre de la imagen y lo que la rodea
(texto, otra imagen...)
Hagamos un ejemplo con todas estas propiedades:

<img src="imagen.jpg" alt="Sistemas" width="47" height="46" vspace="1" hspace="1"
border="0">
Veamos el resultado en un fichero ejemplo en la carpeta (juegue con los atributos).
Consejo: Intenta no agrandar tanto la imagen (especialmente con GIF) de su tamao
original, esto puede ocasionar que pierda un poco de resolucin y calidad (este tipo de
arreglos se hacen en software de diseos como el photoshop)
VII.1. Imgenes y enlaces

Recordar que al hablar de los enlaces decamos que en el contenido de la etiqueta <A>
poda ir texto o una imagen. En este caso el navegador destaca la imagen colocndole un
borde del color que use para sealar los enlaces de texto.
Algo bastante lgico pero que en la mayora de los casos queda poco esttico,
afortunadamente podemos eliminar ese borde poniendo a 0 el atributo BORDER.
Se podra colocar una imagen como enlace, poniendo la imagen entre la etiqueta <a>:
<a href="http://microsoft.com" target="blank"><img src="Images/Usa.gif" border="0"></a>
Resultado en la carpeta de ejemplos, clic sobre la imagen:
Consejo: Pon el valor de 0 a la propiedad border, porque si la imagen es un enlace tendr
el borde de color de los enlaces de la pgina.
VIII. Alineacin respecto al texto

Podemos alinear una imagen agregando un <div> - <p> o la propiedad align dentro de la
imagen, que justifica la imagen del lado que deseamos a la vez que ponemos texto en el
lado opuesto:
<div align="center"><img src=" imagen.jpg " border="0" alt="Sistemas"></div>
<p align="center"><img src=" imagen.jpg " border="0" alt=" Sistemas "></p>
Ejemplo del atributo align en una imagen:
<img src=" imagen.jpg" border="0" alt="Sistemas" align="left"> Texto a la derecha de la
imagen, porque el valor de align es 'left'....... Aqu sigue el texto que se pone despus de la
imagen.
Resultado:
(Imagen) Texto a la derecha de la imagen, porque el valor de align es 'left'.......
Aqu sigue el texto que se pone despus de la imagen
Como hemos visto HTML nos permite controlar la disposicin de las imgenes en la pgina
con relacin al texto, para ello usamos el parmetro ALIGN:
ALIGN=
Significado
TOP
Coloca el punto ms alto de la imagen coincidiendo con

ms alto de la lnea de texto actual.
MIDDLE
BOTTOM
LEFT
RIGHT
Alinea el punto medio (en altura) de la imagen con la base

del texto.
Alinea el punto ms bajo de la imagen con la base del
texto.
Muestra
Este es el texto
Este es el texto
Este es el texto
Coloca la imagen a la izquierda del texto.
Este es el texto
y esta es otra
lnea
Coloca la imagen a la derecha del texto.
Este es el texto
y esta es otra
lnea
Hay que aclarar que la base del texto es la lnea donde descansan casi todas las letras del
alfabeto excepto algunas como la p, la g o la j.
IX. PROPIEDAD REL

La nueva versin de Html5 ha mantenido, modificado y creado algunos valores para la
propiedad rel que nos interesa conocer. Con ellos ayudamos a los navegadores a conocer
qu tipo de enlaces estamos incluyendo realmente en nuestras pginas web. Ser
interesante especialmente en dispositivos mviles, y tambin en las nuevas versiones de

los navegadores habituales. Veamos los ms destacados.
IX.1. Dnde se colocan?

Las propiedades rel que vamos a ver se colocan dentro de la etiqueta de apertura del
enlace o vnculo. Puedes colocar varias, una o ninguna.
Veamos un ejemplo de un enlace con dos propiedades rel:
<a href="tema/pagina.html" title="bla bla bla bla" rel="next" rel="prefetch">Anchor Text</a>
IX.2. Propiedad rel="archives"

Cuando a la propiedad rel le colocamos el valor archives estamos indicando al navegador
que la pgina a la que se est enlazando esta archivada, que ha dejado de tratar un tema
de actualidad, o que ha podido quedar incluso obsoleto. No se ha eliminado la pgina por
contener an informacin interesante, pero se avisa que se desea mantener en estado de
archivo. Podra ser el caso de noticias ya pasadas, pginas con contenidos algo pasados
de moda o sustituidos por versiones ms actuales pero que no eliminamos para no perder
el posicionamiento que nos puedan estar generando.
IX.3. Propiedad rel="author"

Se utilizan sobretodo en blogs y pginas de contenido de autor. Se coloca a aquellos
enlaces que se dirigen hacia la web personal del autor del artculo, o a aquellas en las que
se habla de ellos.
IX.4. Propiedad rel="prev", rel="start" y rel="next"

Son idneas para informar a los navegadores de cul es la pgina inicial de una seccin,
cul es la siguiente y cul la anterior respecto de la pgina donde se encuentra el visitante.
Son geniales para colocar en las tpicas flechitas de adelante y atrs y logran que los
navegadores se puedan hacer una idea del orden de las pginas de una web, si es que
estn ordenadas, claro.
IX.5. Propiedad rel="first", rel="last" y rel="up"

Muy similares a las anteriores, salvo que en estos casos se informa al navegador que la
pgina enlazada es la primera o la ltima en el orden de la seccin a la que pertenece.
Adems, tenemos el valor up para indicar que la pgina vinculada pertenece a un nivel
jerrquico superior al de la pgina actual..
IX.6. Propiedad rel="prefetch"

Con el valor prefetch se est ordenando al navegador que vaya leyendo y memorizando
una pgina distinta, que presumimos que ser la siguiente que va a leer el visitante. De
ese modo, cuando as sea y el visitante pulse ese enlace, el navegador la tendr en su
cach preparada para mostrarla en cuanto el enlace sea pulsado, pues ha estado
cargando la informacin mientras el lector permaneca leyendo en la pgina anterior. Lo
idneo sera saber cules son las pginas hacia donde se dirigen las visitas, claro. En caso
de que stas se decidan por visitar otra distinta, no ocurrir nada malo, pero si acertamos
la velocidad ser mucho mayor, claro. Tampoco es cuestin de colocar ese valor a todos
los enlaces de tus pginas.
IX.7. Otros valores para la propiedad rel

Existen un montn de valores posibles que considero menos importantes, pero que quiero
citar por si a alguien le interesa utilizar, como el tpico nofollow que indica que el destino
no tiene nada que ver con la temtica de la web, sidebar que no est an muy definido,
search para pginas que muestran resultados de bsquedas, noreferer para que el
navegador haga caso omiso de las posibles variables de referencia aadidas a la url, el
tpico pingback de los blogs y alguno que otro ms.
Advertencia: No todos los navegadores saben interpretar an todos estos valores. De
hecho algunos no son reconocidos por ningn navegador todava, pero la especificacin
Html5 existe, de modo que no tardarn mucho en aplicarlos. De cualquier manera en caso
de no ser interpretados, tampoco ocasionan errores, por lo que quizs decidas usarlos
desde ya y no esperar a que los navegadores aprendan esta leccin.
X. EJEMPLO HASTA AHORA

Antes de seguir con ms cdigo Html, veamos un ejemplo el que aplicamos todo lo que
hemos visto hasta el momento. Revisarlo a fondo y preguntar todo lo que no entiendas
antes de continuar para ir ms suelto con el resto de las explicaciones.
El resultado del ejemplo es de lo ms sencillo y muy poco vistoso. No preocuparnos por
eso, pues como he mencionado antes, el darle un aspecto ms profesional, con mrgenes
adecuados, colores de fondo y todo tipo de adornos, lo veremos en el curso de CSS.
Recuerden que los ms importante es que estamos colocando Contenido, solo el
contenido, y en el curso de CSS aprenderemos a adornarlo hasta obtener un aspecto
totalmente profesional, sin nada que envidiar a cualquiera otra pgina web.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<a name="arriba"></a>
<img src="imagenes/logotipo.gif" alt="En ComoCrearTuWeb puedes aprender a disear
pginas web" width="270px" height="80px" />
<h1>Men de Contenidos</h1>
<a href="#titulouno" title="Ir al ttulo uno">Ir al ttulo uno</a>
<a href="#titulodos" title="Ir al ttulo dos">Ir al ttulo dos</a>
<a href="#titulotres" title="Ir al ttulo tres">Ir al ttulo tres</a>
<h2>Ttulo Uno</h2>
<a name="titulouno"></a>
<p>Este es el <u>texto correspondiente</u> al ttulo uno, aunque debera ser ms
largo para que se note el efecto.</p>
<p>Este es el texto correspondiente al ttulo uno, aunque debera ser ms largo para
que se note el efecto.</p>

<p>Este es el texto correspondiente al ttulo uno, aunque debera ser ms largo para
<h2>Ttulo Dos</h2>
<a name="titulodos"></a>
<p>Este es el <i>texto correspondiente</i> al ttulo dos, aunque debera ser ms
<p>Este es el texto correspondiente al ttulo dos, aunque debera ser ms largo para
<p>Este es el texto correspondiente al ttulo dos, aunque debera ser ms largo para
<h2>Ttulo Tres</h2>
<a name="titulotres"></a>
<p>Este es el <b>texto correspondiente</b> al ttulo tres, aunque debera ser ms
<p>Este es el texto correspondiente al ttulo tres, aunque debera ser ms largo para
<p>Este es el texto correspondiente al ttulo tres, aunque debera ser ms largo para
<a href="http://www.comocreartuweb.com" target="_blank" title="Todo sobre diseo
de pginas web">ComoCrearTuWeb</a>
<p>Adios <b>Amigos</b>!</p>
<a href="#arriba" title="Ir Arriba">Ir Arriba</a>
</body>
</html>
FIN 3ra Clase ITB

XI. TABLAS
Bueno hemos aprendido un montn de cdigo Html ya, verdad? Sabemos definir
correctamente la cabecera de las pginas, colocar textos, vnculos, imgenes y tambin
sabemos dnde y cmo colocar nuestras palabras clave de modo que los buscadores nos
posicionen en los primeros lugares para aumentar la cantidad de visitas a nuestra web.
Estudiaremos ahora el uso de las tablas, un buen modo de organizar datos. Tambin
aprenderemos a asignar indicadores (uso de capas o divs) a cada elemento de la web, de
modo que podamos darles color y detalles ms tarde con los estilos CSS.
Una tabla en Html no es ms que un modo de presentar una serie de datos que guardan
cierto orden y relacin entre ellos. Un ejemplo de tabla es la siguiente:
Podemos pensar que las tablas no son necesarias porque no vamos a crear ninguna
agenda, ni listas, ni nada por el estilo. Pero las tablas no solamente hacen esto, nos
permiten colocar en partes de una pgina o de un espacio, diferentes objetos.
Un ejemplo de esto es un men, como seguramente has visto en muchas pginas, el men
est en una tabla.
Todo esto se logra con la etiqueta <table> la etiqueta <tr> (crea filas) y la etiqueta <td>
(crea columnas).
Veamos un ejemplo para entender mejor:
<table>
<tr>
<td> Celda 1, fila 1-</td>
<td>-Celda 2, fila 1</td>
</tr>
<tr>
<td> Celda 1, fila 2-</td>
<td>-Celda 2, fila 2</td>
</tr>
</table>
Resultado:
Celda 1, fila 1- -Celda 2, fila 1
Celda 1, fila 2- -Celda 2, fila 2
Para la creacin de una tabla hay varios atributos importantes:
border: Indica el tamao (en pixeles) del borde de la tabla (0 es sin borde).
cellspacing: Indica el espacio entre las celdas y filas (en pixeles)
cellpadding: El espacio desde el borde de la celda (en pixeles)
bgcolor: El color de la tabla.
background: Imagen de fondo de la tabla.
width: Ancho de la tabla (en pixeles o porcentaje).
height: Alto de la tabla (en pixeles o porcentaje), no es necesario ponerlo porque la
tabla se hace tan alta como se necesita.
bordercolor: Color del borde (si se puso un valor mayor o igual a 1 en border).
align: Alinea el texto de una celda (right o center).
La etiqueta <td>, que sirve para crear columnas, adems de las propiedades de la tabla
(bgcolor, background, width, height y align) tiene otras:
valign: Podemos escoger si queremos que el texto est alineado arriba (top), en
medio (middle) o abajo (bottom) en la celda (alineacin verticalmente).
colspan: Expande una celda horizontalmente.
rowspan: Expande una celda verticalmente.
Veamos un ejemplo con todos estos atributos:

<div align="center"><table cellpadding="4" cellspacing="1" border="1"
bordercolor="#999999" width="350">
<tr bgcolor="#DDEEFF"><td align="center" colspan="2">Celda con colspan 2</td></tr>

<tr><td align="center" width="50%">Celda 1</td>
<td align="center" width="50%">Celda 2</td></tr>
</table>
<br>
<table cellpadding="2" cellspacing="3" border="1" bordercolor="#999999" width="350">
<tr><td align="center" valign="top" bgcolor="#DDEEFF" rowspan="2">Celda con
rowspan="2" y valign="top"</td> <td>Fila 1</td></tr>
<tr><td>Fila 2</td<></tr> </table></div>
Podemos crear tablas dentro de otras, dentro de un <td> y que en vez de que las
columnas sean celdas, sern tablas:
<div align="center"><table cellpadding="0" cellspacing="0" border="1" width="500"
bordercolor="#FF0000"><tr bgcolor="#FA5D00">
<td align="center" colspan="2">2 Tablas en dentro de un <b>td</b></td></tr>
<tr><td>
<table cellpadding="1" cellspacing="0" border="0" width="250"><tr
bgcolor="#00CCFF"><td align="center">Fila 1</td></tr>
<tr bgcolor="#00FF00"><td align="center">Fila 2</td></tr>
<tr bgcolor="#00CCFF"><td align="center">Fila 3</td></tr>
<tr bgcolor="#00FF00"><td align="center">Fila 4</td></tr></table></td>
<td valign="top"> <table cellpadding="0" cellspacing="1" border="2" bordercolor="#111111"
width="250"><tr bgcolor="#FFCC00"><td align="center">Fila 1</td></tr>
<tr bgcolor="#0000FF"><td align="center">Fila 2</td></tr>
</table>
</td></tr></table></div>
Como ves, usando tablas puedes organizar los datos de modo que aparezcan ordenados
en filas y columnas. Tambin puedes hacer que aparezca un borde alrededor de cada dato
y, como puedes ver en la imagen de abajo, combinar algunas celdas:
Una vez entendido esto, se pueden imaginar las aplicaciones que se le pueden dar, desde
por ejemplo, colocar datos ordenadamente, como en el ejemplo anterior, hasta usarla para
darle forma a una web, si en lugar de meros datos, lo que colocas en cada celda son
imgenes y conjuntos de datos. Otro ejemplo, se puede colocar una imagen de fondo en la
primera fila con aspecto de borde superior, otra con aspecto de borde inferior en la fila de
abajo, un men en una celda lateral, y dejar los textos principales de la web para las
celdas de la parte central, tal que as:
El uso de tablas para dar forma a una pgina web ya no se estila, no se recomienda en
absoluto, aunque funcionar funciona. Para dar forma a una web es mejor usar capas o
DIVs. Desde que sali la versin HTML5 incluso se tiende a no usar ni siquiera capas o
DIVs, sino algunas etiquetas nuevas de HTML5.
Recuerda que en esta seccin solo veremos Html, de modo que solo veremos cmo se
usan y definen las tablas. Si luego quieres una anchura concreta para alguna celda o
columna, una altura distinta, un borde ms o menos grueso o invisible, imgenes de fondo
para cierta fila etc. debes aprender a definirlas usando los estilos css. En html tambin se
puede definir, pero no merece la pena, es mucho mejor hacerlo con estilos.
XI.1. Etiquetas de Tablas

Esto es similar a lo que vimos para la construccin de las listas, solo que en este caso se
define el comienzo de una tabla con la etiqueta <table> y su final con la etiqueta de cierre
correspondiente, es decir, con la barrita, </table>. Una vez definida la tabla, hay que
colocar las filas y columnas en su interior. Has de recordar que las tablas de dividen en
filas horizontales y que luego esas filas se dividen a su vez en trocitos, dando lugar a las
columnas. Por lo tanto, en el cdigo Html tendremos que colocar primero tantas etiquetas
de apertura y cierre de filas como filas queramos, y luego, en el interior de cada fila,
colocaremos las celdas en las que queramos dividir cada una de esas filas.
Las etiquetas que indican apertura y cierre de una fila (las filas son las horizontales y las
columnas las verticales) son <tr> y </tr>, mientras que las que definen el inicio y final de
una celda dentro de una fila son <td> y </td>.
XI.2. Estructura de las Tablas

Ya conocemos las tres etiquetas principales que se usan para formar una tabla en cdigo
Html. Veamos ahora de forma prctica cmo colocarlas para obtener las tablas que
queramos. Para empezar veamos cul es la estructura de una tabla formada tan solo por
una celda. Todas las celdas pertenecen obligatoriamente a una fila, de modo que la
estructura sera esta:
<table>
<tr>
<td>contenido1</td>
</tr>
</table>
Dentro de la nica celda, es decir, entre las etiquetas <td> y </td>, he colocado la palabra
contenido1, que es lo que se mostrar dentro de la celda. Todos los contenidos de una
tabla siempre van dentro de celdas, nunca directamente dentro de una fila o una tabla, ok?
El resultado del cdigo anterior sera este:
Realmente no se ve as en el navegador. He colocado algunos bordes y colores de fondo

para que se vea clara la diferencia de lo que es tabla, fila y celda. En la imagen de arriba,
el recuadro rosa o rojo claro corresponde a la tabla. Dentro puede verse un recuadro con
fondo azulado, que corresponde a la fila. Y dentro de esa fila hay otro recuadro con fondo
amarillo que sera finalmente la celda, con la palabra contenido, pues la hemos escrito
dentro de las etiquetas de la celda.
Vamos a ver ahora cmo sera una tabla con dos celdas dentro de esa nica fila anterior.
El cdigo Html sera este:
<table>
<tr>
<td>contenido1</td><td>contenido2</td>
</tr>
</table>
En este caso, tenemos dos celdas dentro de la nica fila que tiene la tabla. Podemos
colocar todas las que queramos y aparecern siempre una al lado de la otra, pues todas
estn dentro de la misma fila, entre las etiquetas <tr> y </tr>
El siguiente ejemplo lo haremos con dos filas. Una tabla con dos filas y con una celda en
cada fila tendra este cdigo Html:
<table>
<tr>
<td>contenido1</td>
</tr>
<tr>
<td>contenido2</td>
</tr>
</table>
En este caso basta con duplicar el cdigo anterior, es decir, colocar otras lneas de
apertura y cierre para la nueva fila y escribir dentro la celda con el contenido.
El ltimo ejemplo por el momento sera una tabla con dos filas y dos celdas en cada una
de ellas. Tendra este cdigo Html:
<table>
<tr>
</tr>
<tr>
</tr>
</table>
Los recuadros azules son las filas, cada recuadro amarillo es una celda, y el conjunto es la
tabla completa. Adems, se pueden combinar celdas, pero eso lo vemos en las pginas
siguientes.
XI.3. Combinacin de Celdas
En ocasiones crear una tabla de ese modo tan cuadriculado no se acerca mucho a lo que
queremos. A veces nos viene mejor que una de las celdas sea ms larga o ms alta que
las otras, es decir, que ocupe varias celdas. Para lograr esto hay que recurrir a combinar
celdas.
El ejemplo ms clarito que se me ocurre ahora mismo es la de una tabla con, por ejemplo,
tres columnas (verticales) pero en la que aparezca una sola celda arriba del todo,
ocupando la anchura total de la tabla. Algo como esto:
Para conseguir eso, tenemos que colocar en esa primera fila una sola celda, pero hay que
ponerle una palabra mgica para indicar a cuntas celdas corresponde o lo que es lo
mismo, cuantas celdas hemos de combinar para conseguir esa tan ancha.
Como el resto de filas tiene tres celdas, est claro que la superior ha de combinar tambin
3.
Primero coloco el cdigo Html completo de una celda de cinco filas (horizontales) y tres
columnas, o tres celdas por fila, que es lo mismo. En la primera fila solo colocar una
celda, por ahora sin la palabra mgica para ver cmo queda:
<table>
<tr>
<td>Nmeros de Telfono</td>
</tr>
<tr>
<td>Nombre</td><td>Apellido</td><td>Telfono</td>
</tr>
<tr>
<td>Pablo</td><td>Garcia</td><td>123456789</td>
</tr>
<tr>
<td>Pedro</td><td>Sanchez</td><td>234567890</td>
</tr>
<tr>
<td>Antonio</td><td>Fernandez</td><td>345678901</td>
</tr>
</table>
Si copias ese cdigo y lo pegamos en un archivo ponindole la extensin .html podrs ver
el resultado haciendo doble clic sobre ese archivo. Eso si, no vers los bordes pues no los
hemos definido an. Yo los he puesto en las imgenes para que se vea ms clara la tabla,
pero para que aparezcan hay que especificarlo. El resultado con el cdigo de arriba sera
algo as:
Por mucho que queramos, esa celda de arriba nunca podr ser ms ancha que la celda
que tiene debajo, pues la tabla tiende a guardar el espacio de su derecha para otras
celdas, que en este caso no existen. Para conseguir que esa primera celda ocupe todo el
ancho de la tabla es necesario indicar que equivale a tres celdas. De ese modo ocupar
todo el ancho, o el ancho de tres celdas.
El cdigo Html que hay que aadirle a la etiqueta <td> para indicar que equivale a tres
celdas es el siguiente:
<td colspan="3">Nmeros de Telfono</td>
Aadiendo esa palabra mgica conseguimos lo que decamos al principio, una celda
superior que ocupa todo el ancho, tres celdas combinadas:
En la pgina siguiente vemos cmo combinar varias celdas verticales, ok?
XI.3.1. Combinar Verticalmente

Al igual que se pueden combinar celdas horizontales para formar una sola ms ancha,
tambin existe una palabra mgica para conseguir combinar dos o ms celdas verticales
para formar una de ms altura.
Veamos cmo se hace.
Imaginemos una tabla inicial ahora de tres filas y tres celdas por cada una de ellas, es
decir, de 3x3, tal y como esta:
El cdigo Html de esa tabla sera algo como esto:

<table>
<tr>
<td>imagen</td><td>contenido1</td><td>contenido2</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Imagina que no es esa la estructura que quiero, sino que prefiero colocar una sola imagen
a la izquierda, ocupando todo el alto de la tabla y no tres huecos para tres imgenes como
hay ahora. La solucin es combinar las tres celdas verticales para dejarla de este modo:
La palabra mgica a colocar en este caso de combinaciones de celdas en vertical ser:

<td rowspan="3">.
Es decir, colspan para combinar celdas horizontales y rowspan para combinar celdas
verticales, ok?
Hay que colocar la cantidad de celdas que quieres que ocupe la que combinamos. En
nuestro ejemplo queremos combinar las tres celdas en una, por tanto en el cdigo inicial
tendramos que eliminar el cdigo Html correspondiente a las celdas de imagen de la
segunda y tercera fila y, en la que queda, colocarle <td rowspan="3">, quedando as:
<table>
<tr>
<td rowspan="3">imagen</td><td>contenido1</td><td>contenido2</td> </tr>
<tr>
<td>contenido3</td><td>contenido4</td> </tr>
<tr>
</tr>
</table>
El resultado sera el de la ltima imagen que pusimos arriba. Como ves, en el cdigo de la
primera fila se colocan las etiquetas td de la celda de la imagen, y las otras dos de su
derecha. En cambio en las otras dos filas solo se colocan las etiquetas td de los contenidos
y nada de la celda de imagen, pues est toda contenida ya en el cdigo de la fila primera.
Con la palabra <td rowspan="3"> se indicaba ya que la celda ocupara las otras dos de
debajo de esa, por lo que no es necesario colocar nada de cdigo en las filas dos y tres
correspondientes a la celda de imagen.
XI.3.2. Otras Combinaciones

Lamentablemente (o no tanto) solo podemos combinar celdas de una misma fila o de una
misma columna, pero no se pueden combinar grupos de por ejemplo 2x2 celdas (un
rectngulo de dos celdas de ancho por dos de alto no se pueden agrupar en una sola).
Tampoco se pueden agrupar celdas que no estn juntas, ni agrupar celdas en diagonal.
En los ejemplos anteriores hemos visto cmo combinar todas las celdas de esa fila o de
esa columna, pero eso no significa que no se puedan combinar tan solo dos de ellas. El
modo de hacerlo es el mismo pero colocando un 2 en lugar del 2 que apareca en el
colspan (para combinaciones horizontal) o en el rowspan (para combinar en vertival).
Si en una tabla de 3x3 como la del cdigo de aqu debajo:
<table>
<tr>
<td>contenido1</td><td>contenido2</td><td>contenido3</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Quisiramos combinar tan solo las dos celdas de abajo a la derecha, el cdigo Html
correcto sera el siguiente:
<table>
<tr>
</tr>
<tr>
</tr>
<tr>
<td>contenido7</td><td colspan="2">contenido8</td>
</tr>
</table>
Se ve claro? Colocamos <td colspan="2"> en la segunda celda de la tercera fila (se
coloca el colspan en la celda en la que empieza la combinacin, en este caso en la
segunda celda de la tercera columna que es lo que queramos en este ejemplo), le
escribimos un 2, pues queremos combinar tan solo dos celdas, y eliminamos el cdigo
correspondiente al contenido 9 (<td>contenido9</td>), pues ya no tiene sentido esa tercera
celda para la tercera fila.
XI.4. Varias Tablas

Ya vimos cmo podemos combinar celdas dentro de una misma tabla para conseguir el
resultado, esquema o organizacin que queramos conseguir. Pero tambin hemos visto
que existen ciertas limitaciones, como el no poder combinar grupos de celdas horizontales
y verticales a la vez. Es decir, con una sola tabla no podramos conseguir esto:
En esa imagen se muestra una tabla de 4 filas por 4 columnas en la que se desean
combinar las celdas del interior, quizs para alojar ah el contenido principal de la web
dejando las celdas de los alrededores para mens, logotipos, publicidad, o lo que sea. Eso
no se puede conseguir combinando celdas de una tabla, pero... podemos usar varias
tablas para obtener esa estructura!
Se trata pues de dividir esa estructura en varias tablas, hasta conseguir lo que deseamos.
Se me ocurre por ejemplo, separar la primera fila en una sola tabla (de una sola fila y
cuatro celdas), otra tabla ms para las filas segunda y tercera (sera una tabla con dos filas
y 3 columnas solo) y finalmente para terminar ese diseo, colocar abajo de las tablas
anteriores otra tabla como la primera, con una sola fila y cuatro celdas. Es decir, la
siguiente divisin:
De este modo s que podemos conseguir esa estructura. Bastara tan solo combinar
verticalmente las filas centrales de la segunda tabla para conseguir lo que desebamos al
principio.
El cdigo Html completo de con las tres tablas sera este:
<table>
<tr>
<td>a1</td><td>a2</td><td>a3</td><td>a4</td>
</tr>
</table>
<table>
<tr>
<td>b1</td><td rowspan="2">central</td><td>b4</td>
</tr>
<tr>
<td>c1</td><td>c4</td>
</tr>
</table>
<table>
<tr>
<td>d1</td><td>d2</td><td>d3</td><td>d4</td>
</tr>
</table>
Solo tendras ahora que eliminar los mrgenes o separaciones que pudieran existir entre
esas tres tablas para que quedaran totalmente pegadas para conseguir lo que queramos.
Pero recuerda, todo lo que tenga que ver con mrgenes, anchuras, etc, lo dejamos para
los estilos CSS. Por lo que en cuanto a Html ya lo tendramos terminado. Cualquier otra
combinacin seguro que se puede conseguir sin ms que darle un poco de rienda suelta a
la imaginacin. Tambin podras colocar una tabla dentro de la celda de otra tabla si fuera
necesario. Son cosas raras ya, pero es posible, claro.
XI.5. Sobre el uso de Tablas

Como ves, una vez comprendidas y dominadas las tablas y su cdigo Html, se te pueden
ocurrir mil utilidades. La primera utilidad es para cuando queramos colocar una serie de
datos ordenados por el ndice que le pongamos arriba, como en el caso de la primera
imagen que te puse al principio de estas lecciones sobre tablas. De hecho, es para eso
para lo que se ha inventado este cdigo.
Otro uso bastante utilizado es el de organizar mediante tablas el contenido completo de

una web, como vimos en otro de los ejemplos. Es decir, crear una tabla con tantas celdas
como cachitos de contenido vayamos a colocar en una pgina web y colocar luego el
cdigo correspondiente dentro de cada celda. As, se puede maquetar o dar forma a una
pgina web y conseguir mantener la forma que deseamos para ella. Un logotipo de la fila
de arriba, un pie de pgina en la de ms abajo, men lateral en una celda de la izquierda,
contenidos a su derecha.... resulta bastante sencillo de este modo.
Una alternativa al uso de las tablas a la hora de maquetar o dar forma al diseo de una
pgina web es el uso de las capas o Divs. Es un concepto totalmente distinto que veremos
ms adelante dentro de este curso de Html y recomiendo que lo aprendan bien, pues
seguramente prefiera esa forma cuando quieras crear tu diseo.
XII. MARQUESINAS
Las marquesinas son palabras o textos que se desplazan de un lado a otro, ya sea
horizontal (izquierda a derecha o viceversa) o vertical (arriba hacia abajo o viceversa).
Lo podemos usar para noticias, imgenes, enlaces...
La etiqueta para esto es <marquee>, pero tambin podemos agregar diferentes atributos:
direction: Indica la direccin hacia donde se desplazar el texto, up (hacia arriba), down
(abajo), left (izquierda) o right (derecha).
width: Indica el ancho de la marquesina (en pixeles o porcentaje).
height: Indica el alto de la marquesina (en pixeles o porcentaje).
scrollAmount: Velocidad a la que se desplaza el texto.
Ejemplo:
<div align="center"><marquee scrollAmount="3" width="300" height="90"
direction="up">Texto<br>desplazado<br>hacia<br>arriba</marquee></div>
Hay un atributo ms, que sirve para mover el texto de derecha a izquierda y de izquierda a
derecha, pero con este el texto no desaparece: alternate=behavior, ejemplo:
<marquee behavior="alternate">Texto de derecha a izquierda y de izquierda a
derecha</marquee>
FIN 4ta Clase ITB
XIII. FORMULARIOS
Realmente, escribir y publicar contenidos en nuestras pginas web seria algo totalmente a
ciegas si no conocemos la opinin de nuestros lectores. Por otro lado, no se me ocurre
cmo podramos gestionar un pedido de compra sin dar la oportunidad a los visitantes a
comunicarnos qu y cunto quieren, verdad? Para estas cuestiones y para muchas
aplicaciones ms, surgen los formularios.
Los formularios son recuadritos donde las visitas pueden escribir datos, datos que luego
sern procesados para una u otra accin. Ser enviados a una direccin de email que le
indiquemos, o pasados a un departamento de ventas para procesar un pedido, o incluso ir
a parar a un foro en forma de mensaje o respuesta. Es uno de los mtodos ms bsicos y
utilizados para la comunicacin entre webmaster y visitantes.
Las etiquetas que abren y cierran un formulario son <form> y </form> (apertura sin barra
y cierre con barra, como siempre). Adems, en la etiqueta de apertura se aade qu
queremos que se haga con los datos que se recojan, o mejor dicho, qu archivo va a
procesar esos datos.
Mira este ejemplo de abajo:
......
<form method="post" action="mostrardatosenpagina.php">
......
</form>
.......
Es un formulario vaco, pero se ve cmo se indica a qu archivo se van a enviar los datos
recogidos por el formulario. Otro estudio ser cmo crear ese archivo, pero ya escapa del
alcance de este apartado en el que solo veremos puro Html. Las pginas webs no son solo
permiten presentar documentos de forma ms o menos atractiva al destinatario final, sino
que tambin proporcionan elementos para interactuar con l.
De esta manera el usuario final puede enviar su opinin de la pgina al autor, o realizar
una compra en lnea.
Ahora, entre esas dos etiquetas, hemos de colocar los recuadritos que recopilarn la
informacin del visitante. Existen recuadros de muchos tipos. Unos son para recoger
algunas palabras, otras para grandes textos, tambin los hay para recoger contraseas, o
desplegables en los que se muestran varias opciones de las que el visitante ha de recoger
una o varias de ellas, adems de casillas de verificacin que se pueden activar o
desactivar, etc.
Un ejemplo sencillo de formulario:
Tu nombre:
Ests registrado?
Si
No
<FORM ACTION="" METHOD="POST" name="formul">
Tu nombre:<BR>
<INPUT NAME="nombre" TYPE="TEXT" SIZE="32"/><BR>
¿Estás registrado?<br>
<label><input type="radio" name="Si" value="1">Si</label><br>
<label><input type="radio" name="Si" value="0">No</label><br><BR>
<INPUT TYPE="Submit" VALUE="Enviar">
<input name="Reset" type="reset" id="Reset" value="Borrar">
</FORM>
El formulario est formado por una serie de elementos (cajas de texto, casillas de
verificacin, botones...) encerrados entre las etiquetas <FORM> </FORM>.
Mediante el envo de formularios se pueden enviar datos de un artculo, de una encuesta o
normalmente para enviar un mensaje a un e-mail.
Para hacer esto deberamos saber un poco sobre los lenguajes de tipo servidor, ASP o
PHP, pero por el momento seguiremos con html.
La etiqueta para un formulario, como ya sabemos es <form>, y sus atributos son los
siguientes:
method: Indica el mtodo por el que se enviarn los datos. Existen 2:
POST: Enva datos por la entrada estndar STDIO (utilizado normalmente).
GET:
Enva datos por medio de un URL (enlace).
action: Indica el mail a donde se enviarn los datos o el nombre del archivo .php o .asp
Ejemplo:
<form action="mail@dominiio.com" method="post"></form> o <form action="form.php"
method="post"></form>
name: es el nombre que identifica al formulario, til si se usan scripts dentro de la pgina.
XIII.1. Elementos
Para enviar datos en un formulario se necesitan cuadros de texto.
La etiqueta que se usa es <input> (no tiene etiqueta de cierre) y tiene varios atributos:
type: Define el tipo de texto que se introduce en el cuadro, sus valores pueden ser:
text: Cualquier tipo de texto como el nombre, e-mail, direccin...
password: Se usa para ocultar las claves o datos confidenciales (al escribir en
este, muestra *******.
hidden: Datos escondidos, asunto, e-mail de destino...
button: Crea un botn.
image: Hace que una imagen sea el enlace (la imagen se muestra con el atributo
src).
submit: Enva el formulario.
reset: Borra los campos del formulario.
value: Indica el valor de un atributo o el nombre que se mostrar (en el cuadro).
name: Nombre del campo.
maxlength: Indica el nmero de caracteres mximo para escribir.
size: Indica el tamao del cuadro de texto.
Ejemplo:
<form method="post">
Nombre <input type="text" name="nombre" maxlength="10" size="15">
Password <input type="password" name="contrasea" maxlength="10" size="15">
<input type="submit" name="enviar" value="Enviar">

<input type="reset" name="Borrar" value="Borrar Todo">
</form>
Si queremos que una persona enve algn comentario o sugerencia, ponemos un cuadro
de texto grande, con la etiqueta <textarea>
Sus atributos son:
rows: Filas que tendr el cuadro.
cols: Columnas que tendr el cuadro.
Ejemplo:
<textarea cols="30" rows="4" name="comentario"></textarea>
XIV. LISTA DE OPCIONES

Son listas en las que se pueden especificar una o varias opciones.
Podramos poner pases, asuntos... y que el usuario seleccione la adecuada. La etiqueta
para hacer esto es <select>, y cada opcin se define por la etiqueta <option>.
Adems, deben contener los atributos value y name, ejemplo:
<select name="pais">
<option value="Arg">Argentina</option>
<option value="Br">Brasil</optiont>
<option value="Ch">Chile</option>
<option value="Eu">Estados Unidos</option>
<option value="Mx">Mxico</option>
<option value="Vz">Venezuela</option>
</select>
Se puede seleccionar una opcin por defecto, con el atributo selected en la opcin que
queramos. Podemos cambiar la lista de opciones, para que se pueda seleccionar ms de
una opcin. Esto se hace con el atributo multiple y size (indica el nmero de valores a
mostrar):
<select name="pais" size="3" multiple>
</select>
Nota: Manteniendo presionada la tecla Ctrl o Shift se puede seleccionar ms de una opcin
de la lista.
XIV.1. Botones de crculo

Si queremos que solo se pueda seleccionar una opcin, adems de las listas
desplegables, tenemos los botones en forma de crculo. Se usa la etiqueta input, pero con
el valor radio en el atributo type.
Para seleccionar una opcin por defecto, es el atributo checked:
<input type="radio" name="pais" value="Arg">Argentina<br>
<input type="radio" name="pais" value="Br">Brasil<br>
<input type="radio" name="pais" value="Ch">Chile<br>
<input type="radio" name="pais" value="Eu">E.U.<br>
<input type="radio" name="pais" value="Mx" checked>Mxico<br>
<input type="radio" name="pais" value="Vz">Venzuela<br>
XIV.2. Cuadros de seleccin

Adems de poner el valor mltiple en las listas desplegables para poder seleccionar ms
de una opcin, podemos utilizar el valor checkbox en el atributo type, y con el atributo
checked se selecciona una (o varias) opcin(es):
<input type="checkbox" name="pais" value="Arg"> Argentina

<input type="checkbox" name="pais" value="Br"> Brasil
<input type="checkbox" name="pais" value="Ch"> Chile
<input type="checkbox" name="pais" value="Eu"> E.U.
<input type="checkbox" name="pais" value="Mx" checked> Mxico
<input type="checkbox" name="pais" value="Vz"> Venezuela
Un ejemplo de un formulario:
<form action="mail@dominio.com" method="post">
Nombre: <input type="text" name="nombre" size="15" maxlength="20"> <br>
E-Mail: <input type="text" name="email" size="15" maxlength="20"> <br>
Pas: <select name="pais">
</select><br>
Sexo: <input type="radio" name="sexo" value="hombre"> Hombre
<input type="radio" name="sexo" value="mujer"> Mujer<br>
Urgente: <input type="checkbox" name="prioridad" value="si"> S
Comentario: <textarea rows="3" cols="40" name="comentario"></textarea><br><br>
<input type="submit" value="Enviar"> <input type="reset" value="Borrar">
</form>
Y en nuestro e-mail recibiramos algo asi:
nombre: Leo
email: anonimo@dominio.com
pais: Mx
sexo: hombre
prioridad=on
comentario: hola, quiero informacin.
Nota: Si est activada el cuadro de seleccin, el valor al recibir el mail ser on, si no se
activ el valor ser off.
Consejo: Para alinear la descripcin de los campos y los campos, podras crear una tabla
con dos columnas.
Importante: En esta ocasin se abrir el programa de envos de mail por defecto de la
computadora del usuario (suele ser Outlook Express).
XV. CAJAS DE TEXTO

Ya vimos algo de esto pero reiteremos, por la importancia de su aprendizaje, los controles
o cajas de texto permiten al usuario escribir texto en el formulario.
Pueden ser cajas de una solo lnea o cuadros de texto con varias lneas.
Las primeras usan la etiqueta <INPUT> y pueden ser de texto simple (se ve lo que
escribimos) o de tipo password (lo que escribimos es visto como una serie de asteriscos).
<INPUT TYPE=TEXT>
<INPUT TYPE=PASSWORD>
Ojo, el dato escrito en el segundo campo no se ve pero eso no quiere decir que est
codificado en ninguna manera. Ambos tipos comparten todos sus atributos que son:
Parmetro
Significado
SIZE
Tamao en columnas de la caja de texto.
MAXLENGTH Nmero mximo de caracteres que se pueden teclear.

VALUE
Texto por defecto que aparecer en el campo.
Pero si necesitamos que el usuario escriba ms lneas de texto pues usamos la etiqueta
<TEXTAREA></TEXTAREA>:
Comienza a escribir
<TEXTAREA>Comienza a escribir </TEXTAREA>
Si escribimos algn texto dentro de esta etiqueta, ese texto aparecer por defecto en ese
rea de texto. Admite estos parmetros:
Parmetro Utilidad
ROWS
Filas que ocupar la caja de texto.
COLS
Columnas que ocupar la caja de texto.
XV.1. Opciones
Para que el usuario pueda marcar una de entre varias opciones podemos usar un campo
INPUT de tipo RADIO. En nuestro ejemplo lo hemos usado:
Si<INPUT
NAME="Registrado" Si
TYPE=RADIO VALUE="1"><BR>
No<INPUT
NAME="Registrado" No
TYPE=RADIO VALUE="0"><BR>
Fjate que ambos INPUT usan el mismo atributo NAME, de esa manera el navegador los
reconoce como un juego de respuestas alternativas.
Parmetro Significado
VALUE
Este es el valor que asignar a la variable.
CHECKED Si lo indicamos en una de las opciones esta ser la que est activada por defecto.
XV.2. Listas de opciones

Hay una alternativa al control de seleccin de alternativas: las listas desplegables.
Mediante este control el usuario puede seleccionar una opcin de entre un grupo que
aparece en una lista desplegable. La lista se encierra en etiquetas <SELECT></SELECT>,
y las opciones se ponen en etiquetas <OPTION></OPTION>:
<SELECT NAME="Idioma">
<OPTION>Espaol</OPTION>
<OPTION>Ingls</OPTION>
<OPTION>Francs</OPTION>
<OPTION>Alemn</OPTION>
</SELECT>
Los parmetros que admite SELECT son las siguientes:
SIZE
El nmero de opciones que podremos ver. Si es mayor que 1 veremos una lista de
seleccin con un scroll y, si no, veremos una lista desplegable.
MULTIPLE Si lo indicamos podremos elegir ms de una opcin, para ello el usuario utilizar la tecla
CTRL y el botn activo del ratn.
Y OPTION estos:
VALUE
Este es el valor que asignar a la variable.
SELECTED La opcin con esta propiedad ser la que aparezca seleccionada por defecto.
XV.3. Botones del formulario

Existen dos clases de botones: uno que se utiliza para poner en marcha la operacin
indicada por ACTION (botones submit) y otro que sirve para resetear el formulario
borrando el contenido de todos los controles:
<INPUT TYPE=SUBMIT>
<INPUT TYPE=RESET>
En ambos casos su puede usar el parmetro VALUE para el texto que aparece dentro del
botn. El botn de submit puede ser una imagen, por ejemplo
<input name="imageField" type="image"
src="imgs/botonel.gif"
width="85" height="46" border="0">
Este botn acta como un botn tipo SUBMIT, pero enva con los datos del formulario las
coordenadas X Y del punto de la imagen donde puls el usuario.
XV.3.1. Marcas de verificacin

Son controles parecidos a los campos de opciones pero que no van agrupados, o sea no
son excluyentes, Sirven para que el usuario coloque una marca de si o no (verdadero o
falso, marcado o no marcado). Lo podremos conseguir por medio de controles de
confirmacin:
<INPUT NAME="Opina" TYPE=CHECKBOX>Te gusta el curso?
Te gusta el curso?
Si queremos que el control est activado por defecto le aadiremos el parmetro

CHECKED.
XV.3.2. Campos ocultos

Mediante un formulario podemos tambin enviar datos al programa encargado de
procesarlo. Esto se realiza mediante los llamados campos ocultos, que son campos INPUT
de tipo HIDDEN, y se llaman as porque no se ven en la pgina web, o sea, el usuario no
los ve a menos que se mete en la vista de cdigo de la pgina, digo esto porque no
vayamos a pensar que con estos campos podemos pasar informacin privada mediante
los formularios.
El cdigo para este tipo de campos es algo como esto:
<INPUT TYPE=HIDDEN NAME="Curso" VALUE="Javascript">
De esta manera si en un sitio tengo muchos formularios sabr que estos datos en concreto
vienen de la pgina de Javascript. Su uso realmente no lo vers hasta que no escribas o
utilices programas para gestionar los formularios.
XV.4. Controles avanzados en formularios

Con lo que has visto en la seccin anterior de formularios podrs perfectamente incorporar
estos elementos de interaccin a tu pgina web, pero los navegadores modernos (MSIE 5+
y Netscape 6+) permiten el uso de algunas caractersticas extras aadidas por el estndar
HTML 4.0, caractersticas que bsicamente mejoran la esttica y facilitan el uso de estos
elementos.
XV.4.1. Botones
Una importante mejora en el HTML 4 es el nuevo control <BUTTON> que permite
enriquecer la etiqueta de texto que hasta ahora tenan los botones de formulario. Ahora
estos elementos pueden tener cualquier contenido HTML, como por ejemplo imagen con
un texto.
Por ejemplo el siguiente cdigo:
<BUTTON
TYPE="button">
Inicio
<img
src="imgs/im_crear/bolamas.gif"
width="10" height="10">
</BUTTON>
Los parmetros de dicha etiqueta son TYPE, que podr tomar los valores SUBMIT (por
defecto), RESET y BUTTON, NAME y VALUE.
XV.4.2. Etiquetas
Los controles tipo LABEL permiten asociar etiquetas a los controles de formulario. Es decir
ahora el texto que suele acompaar a los campos que debe rellenar el usuario son solo
eso texto, pero con esta etiqueta ese texto se convierte en un elemento activo que forma
parte del campo y podemos seleccionar ste pulsando sobre la etiqueta.
Observa el uso del atributo for usado para asociar la etiqueta al campo cuyo ID tenga el
mismo valor que este for
<INPUT ID="Curso" TYPE=CHECKBOX>
<LABEL for="Curso"> Me gusta este curso
</LABEL>
Me gusta este curso
Compara con este otro ejemplo aparentemente igual al anterior.

<INPUT NAME="Curso" TYPE=CHECKBOX>
Me gusta este curso/a
Me gusta este curso
En el primer caso el click sobre la etiqueta acta igual que sobre el control.
XV.4.3. Agrupando elementos

HTML 4 nos presenta una forma sencilla de estructurar los formularios sin necesidad de
acudir a las socorridas tablas. Ahora podemos agrupar visualmente varios controles
encerrndolos dentro de la etiqueta FIELDSET, veremos que alrededor de ellos se ve un
rectngulo con el ttulo que le demos mediante la etiqueta LEGEND.
<FIELDSET>
<LEGEND>Tus datos</LEGEND>
<LABEL>
Tus datos Nombre:
Nombre:
<INPUT TYPE="text" name="nombre">
Edad:
<br>Edad:
<INPUT TYPE="text" name="edad">
</LABEL>
</FIELDSET>
La posicin del ttulo (LEGEND) puede controlarse usando el parmetro ALIGN, que por
defecto es TOP (arriba), pero puede ser BOTTOM (abajo) a la LEFT (Izquierda) o RIGHT
(derecha) .
XV.4.4. Desactivando elementos

Todos los controles de un formulario se pueden desactivar, impidiendo as al usuario que
los sobrescriba. Se seguirn mostrando en pantalla, aunque con un aspecto distinto para
indicar que no son editables. Para ello slo tenemos que indicarle el parmetro
DISABLED:
<LABEL
DISABLED>Origen:
<INPUT TYPE=TEXT Origen:
DISABLED>
</LABEL>
XVI. Agrupando Elementos (DIV y SPAN)

Ahora que conoces las principales etiquetas Html que vas a poder necesitar para hacer
una pgina web y tras haberte comentado en ocasiones que en el Html no deberamos
colocar nada de cdigo que tenga que ver con la esttica de sus elementos (anchuras,
colores, fondos, mrgenes, etc.) toca el turno de presentaros estas dos maravillosas
etiquetas, <div> y <span> que hemos ido viendo en ejemplos pero no profundizamos en
ellas.
Por qu digo esto? Porque esas dos etiquetas son las encargadas de agrupar uno o
varios elementos de una web y de darles un identificador, que usaremos luego en la hoja
de estilos CSS para relacionarlos.
Ejemplo, imagina que quiero crear una lista de elementos como vimos pginas atrs. Pero
queremos que tenga una imagen de fondo que tenemos por ah guardada, y queremos
darle cierta anchura, y un borde de color marrn que sea un poquito ancho, y ya puestos
que el tamao de sus textos sea pequeito y... y muchas cosas ms.
Como ves, todo esto son detalles estticos y segn mis recomendaciones no deben
definirse dentro del cdigo Html. Correcto? Pero vemosle ahora en el cdigo.
Todos esos detalles los vamos a definir en un archivo aparte, no en el archivo .html de la
pgina web sino en lo que llamaremos hoja de estilos, un pequeo archivo con extensin
.css que ya veremos en el curso de estilos ms adelante.
Pero cmo podra saber el navegador que nuestra querida lista ha de tomar todos esos
estilos o detalles? Ah es donde aparecen nuestras nuevas amigas, las etiquetas <div> y
<span>. Con ellas podremos, en el cdigo Html, darle un nombre a esa lista. As, cuando
el navegador la vea en nuestra web, ver que tiene un nombre y buscar qu estilos han
de tener las listas con ese nombre en la hoja de estilo. El navegador leer esos estilos o
detalles y se los aplicar a la lista, quedando tal y como la queramos.
Ahora estamos en el curso de Html, de modo que no profundizaremos mucho en los
estilos. Te sobra con saber que para asignarle nombres a elementos o grupos de
elementos del Html y poder darle estilos, usaremos las etiquetas <div> y <span>.
Veamos cmo se hace en las pginas siguientes.
XVI.1. CON SPAN

La etiqueta <span> se utiliza para asignar un nombre a un trocito de un elemento de
nuestra pgina web. Como deca en la pgina anterior, cuando el navegador vea que ese
trozo de elemento tiene asignado un nombre, ir a ver si existen definidos algunos estilos
para l y en caso de encontrar alguno, los aplicar.
Pero vemoslo con un ejemplo, que parece que se entiende mejor, no? Imagina, ahora
que sabes escribir textos en Html, que tenemos una pgina web con el siguiente prrafo:
<p>Estamos aprendiendo a utilizar la etiqueta span de Html en este tutorial.</p>
Imagina que queremos que aparezcan las palabras "etiqueta span" en negrita y de color
rojo. Tal y como hemos visto hasta ahora, debemos evitar aplicar ese tipo de detalles en el
cdigo Html, verdad? Lo que haremos ser darle a esas dos palabras un identificador o
nombre y, ms tarde, en la hoja de estilo, definirle a ese nombre la propiedad negrita y

color rojo.
El nombre que vamos a escoger va a ser "resaltado", y para aplicrselo a esas dos
palabras usaremos el siguiente cdigo:
<p>Estamos aprendiendo a utilizar la <span class="resaltado">etiqueta span</span> de
Html en este tutorial </p>
De este modo, el navegador al leer el cdigo Html ver que a esas dos palabras
encerradas ha de aplicarles los estilos que tenga el identificador resaltado" en la hoja de
estilos. Ya ves que no es muy complicado..
Has de saber que se usa la etiqueta <span> cuando quieres encerrar trocitos o parte de
un elemento. Un prrafo entero es un elemento, pero esas dos palabras son "un trocito" de
elemento y por lo tanto hay que seleccionarlas con un <span>. Para seleccionar no partes
sino conjuntos de elementos (como por ejemplo varios prrafos) hay que usar la etiqueta
que veremos en la pgina siguiente, la etiqueta <div>.
Personalmente, yo solo uso <span> para esto, para dar un estilo diferente a una parte de
un prrafo, como por ejemplo una sola palabra o solo unas pocas del prrafo.
Pensando... quizs otra utilidad podra ser la de enfatizar la primera letra de un prrafo, tal
y como hacen algunos peridicos, es decir, colocar la primera letra en negrita y de un
tamao bastante mayor que el resto del prrafo. Esto se podra lograr aplicando la etiqueta
<span> tan solo a la primera letra del prrafo, de este modo:
<p><span class="capital">L</span>a primera letra de este prrafo, la "ele", tendr un estilo
diferente, si es que lo defino en la hoja de estilos, claro.</p>
Debera aparecer ms o menos as, si defino en la hoja de estilos que sea negrita, de color
azul y de un tamao mayor que el resto del prrafo:
La primera letra de este prrafo, la "ele", tendr un estilo diferente, si es que lo defino en la
hoja de estilos, claro.
XVI.2. CON DIV

Ya coment en la pgina anterior que para cachitos de elemento se usa la etiqueta <span>
y para bloques o grupos de elementos la etiqueta <div>. Vamos a verla con ms
detenimiento.
La forma de usarla es muy similar al caso anterior. Basta con colocar la etiqueta de
apertura antes de donde empiece el grupo, indicando el nombre dentro de esa etiqueta, y
colocar luego la etiqueta de cierre al final del grupo. Muy sencillo. Para agrupar dos
prrafos podramos escribir este cdigo de abajo, por ejemplo:
<div class="letra-grande">
<p>Este es el primer prrafo de este grupo.</p>
<p>Que listo eres, si, este es el segundo, je je je.</p>
</div>
Por tanto se usa la etiqueta Html <div> cuando queremos darle un nombre o identificador
no a un trozo de elemento, sino a un elemento entero (el prrafo completo) o ms
habitualmente, a un grupo de elementos, varios prrafos, varias imgenes, un bloque
formado por varios prrafos e imgenes, o incluso la pgina completa. De ese modo,
podemos darle los estilos definidos a ese nombre en la hoja de estilos, a todos los
elementos de ese grupo.
De nuevo, veamos algunos ejemplos concretos para aclarar el concepto. Imagina que
queremos darle un ancho concreto a toda la web. Podramos crear un estilo en la hoja de
estilos llamado "anchura", darle el valor de 800px de ancho y.... a quin se lo aplico? Pues
por ejemplo, a toda la web, no? Para eso bastara con colocar la lnea:
......
</head>
<body>
<div class="anchura">
......
al principio del contenido de la web, es decir, justo despus de la etiqueta <body> y luego,
antes de </body> colocar el cierre de ese div con esta otra lnea:
.
</div>
</body>
</html>
O imagina que tenemos una lista de elementos construida con las etiquetas que vimos
atrs, las etiquetas <ul> y <li> con las que hemos hecho el men lateral. Para darle la
forma, anchura y colores que queramos podramos encerrarla dentro de un div y darle el
nombre de "menu" de este modo:
......
<div class="menu">
<ul>
<li>enlace 1</li>
<li>enlace 2</li>
<li>enlace 3</li>
</ul>
</div>
......
Pasamos ahora a ver un par de propiedades relacionadas con estas dos etiquetas tan
prometedoras. Antes destacar que cualquier elemento o conjunto de elementos encerrados
por la etiqueta <div> es una capa.
Si, las capas no son ms que eso, agrupaciones de elementos entre esas etiquetas con el
fin de poder aplicarle estilos a lo que tenga en el interior. Ya sabes entonces q son las
famosas capas, esa tecnologa tan moderna para hacer webs profesionales!!
XVI.3. CLASE E ID
En las pginas anteriores, mientras hablbamos de las etiquetas <div> y <span>, pusimos
la propiedad class para indicar el nombre que identificara a ese grupo o cachito de
elemento, recuerdas? No coment nada ms para no mezclar unas cosas con otras, pero
ahora que sabemos manejar las etiquetas <div> y <span> puedo comentar ya lo siguiente.
Existen dos formas de asignar un nombre a un <div> o a un <span>. Una la hemos visto
en los ejemplos anteriores, la propiedad class, pero existe otra ms, la propiedad id.
Vamos a ver cundo se utiliza una y cundo la otra.
Podramos decir que existen dos tipos de estilos. Los que se definen para objetos
concretos, como el men lateral, la cabecera de la pgina, el pie de pgina, etc, y los
estilos que usamos a discrecin, como los estilos para resaltar ciertos textos, o para dar
unas propiedades caractersticas a ciertos enlaces.
Estilos estos ltimos que podemos aplicar a este elemento de aqu o a aquel otro de all.
Entonces, asignaremos un nombre con la propiedad id cuando pertenezca a un objeto
que solo aparece una vez en cada pgina web. Es el caso del pie de pgina (no suele
haber dos), o a la cabecera (suele haber uno solo), o del men lateral. Son objetos que en
caso de aparecer en una de las pginas de nuestra web, lo hacen una sola vez.
En cambio hay otros estilos que podemos aplicar a discrecin y repetidas veces. Si creo un
estilo llamado "resaltado" que puedo aplicar a una palabra de cierto prrafo, y a otro grupo
de palabras de otro prrafo distinto, y a aquel enlace de ah arriba, etc. es decir, que
vamos a aplicar varias veces en una pgina de nuestra web, usaremos en lugar de la
propiedad id la propiedad class para asignar el nombre de estilo, ok?
XVII. MAPAS
Recordemos que los enlaces en las pginas web podan escribirse con un texto o con una
imagen. Es decir podamos tener una imagen que al ser pulsada con el ratn nos llevaba a
otra pgina. Pues bien un mapa de imagen es algo parecido pero en el que l imagen no
tienen asociado un solo enlace sino varios: depende de que parte de la imagen pises para
ir a uno u otro destino. Esto se puede hacer de dos maneras:
Gestionando el mapa en el navegador.

Gestionando el mapa en el servidor.
Los ms utilizados sin duda actualmente son los primeros, los mapas del lado del cliente,
pues no exigen ningn apoyo del servidor y por tanto los puede usar cualquier webmaster
en su propia pgina.
XVII.1. Mapas Lado Cliente

Un mapa no es ms que una imagen en la que se definen zonas activas, o sea, zonas que
al ser pulsadas con el ratn actan como un enlace y nos llevan a otras pginas. Su
creacin tienen dos partes: una definir el mapa y otra asociar el mapa con una imagen:
<MAP NAME="mapa_enlaces">
<AREA SHAPE=... COORDS=... ALT="Enlace a..">
...
</MAP>
La descripcin del mapa es de lo ms simple: le damos nombre (para luego poderle

asociar la imagen) y definimos las zonas activas (formas geomtricas como vers a
continuacin):
SHAPE
Define la forma de la zona: rectangular, circular o poligonal.
COORDS
Coordenadas (separadas por comas) que definen la zona. El nmero y significado de

esas coordenadas depender de la forma.
HREF
URL del enlace corespondiente a esta zona.
NOHREF
Zona inactiva
ALT
Texto alternativo, etiqueta idntica al ALT de IMG
Como podemos ver, para declarar correctamente una zona necesitamos conocer cmo se
definen exactamente las formas y coordenadas:
SHAPE
COORDENADAS
Rectangular
RECT
"x1,y1,x2,y2" siendo (x1,y1) la esquina superior izquierda y (x2,y2) la

inferior derecha.
Circular
CIRC
"x,y,r" siendo (x,y) el centro del crculo y r el radio.
Polgono
irregular
POLY
"x1,y1,x2,y2,x3,y3,..." definiendo cada pareja (x,y) una esquina del

polgono. La ltima pareja de coordenadas se unir a la primera para
cerrar el polgono.
Toda
imagen
la
DEFAULT No se necesitan
Usando los mapas

Una vez definido como es el mapa lo asignamos a una imagen:
<IMG SRC=... USEMAP="#mapa_enlaces">
Siempre hay que aadir al comienzo del nombre de nuestro mapa una almohadilla (#).
Vamos a ver un ejemplo:
<MAP NAME="navegadores">
<AREA SHAPE=RECT COORDS="0,0,24,31"
HREF="http://www.apache.org" ALT="Servidor Apache">
<AREA SHAPE=RECT COORDS="26,0,53,31"
HREF="http://www.w3c.org" ALT="la W3C">
<AREA SHAPE=DEFAULT NOHREF ALT="por defecto">
</MAP>
<IMG SRC="mapa.gif" WIDTH=198 HEIGHT=51 BORDER=0 USEMAP="#deinteres">
Se ve tal que as:
Nota: Hay que tener en cuenta que, cuando dos zonas se solapan, la que est declarada
primero es la que tiene preferencia. Por eso declaramos al final una zona que no conduce
a ningn URL por si el usuario pulsa fuera de las zonas activas.
XVIII. FRAMES o MARCOS

Denodados por unos y adorados por otros los marcos o frames son una forma de insertar
varias pginas web en una sola. Mal utilizados pueden arruinar la mejor pgina web, pues
no hemos de olvidar que la pantalla del monitor est fsicamente limitada. Cada marco que
compone la pgina poseer sus propios bordes y barras de scroll, comportndose como
ventanas independientes. Su situacin en la pgina es rgida, no podemos colocarlos en
las posiciones que deseemos, si tenemos cuatro marcos se situarn en cada uno de los
cuatro cuadrantes de la pantalla. Si tenemos dos la pantalla se dividir en dos filas o en
dos columnas para alojarlos. Pueden ser tiles para compartir un cierto contenido por todo
el sitio web, por ejemplo para una barra de navegacin.
Su uso puede parecer algo complejo pero es muy simple. Bsicamente se trata de definir
una pgina contenedora de los marcos y de colocar en cada uno de ellos la pgina cuyo
contenido mostrarn. Por supuesto tambin concretaremos el tamao y posicin y otros
atributos de cada marco.
Los frames (pginas independientes) son una manera de partir (o dividir) la pgina en
distintos espacios (o reas) independientes unos de los otros, de modo que en cada
espacio se coloca una pgina distinta que se codifica en un fichero (.html en este caso)
distinto.
Cada frame contiene dentro, la pgina que le indiquemos, como cada uno es
independiente, tiene sus barras de desplazamiento (flechas de la derecha). Generalmente
se usan los frames para poner el men y que al presionar en algn enlace, siempre quede
visible (el men) y no desaparezca ni por unos segundos. Los frames pueden ser en
columnas, en filas o de los dos.
<HTML>
<HEAD>
<TITLE>Los frames: pginas multiventana</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME NAME="indice" SRC="indice.htm">
<FRAME NAME="principal" SRC="principal.htm">
<NOFRAMES>
<P align="center">Al parecer tu navegador
no soporta marcos, actualzate.</P>
</NOFRAMES>
</FRAMESET>
</HTML>
Fijmonos en las diferencias y coincidencias con una pgina HTML habitual:
- en lugar de BODY ahora tenemos una etiqueta FRAMESET. Cada una de estas
FRAMESET son una pgina o ventana dentro de la pgina contenedora que estar
compuesta por varias zonas definidas con los parmetros COLS o ROWS. En el ejemplo
se trata de dos marcos uno junto al otro: uno ocupa el 20% de la ventana del explorador y
el otro el 80% restante.
- Dentro del <FRAMESET> definimos los marcos que componen el conjunto y la accin
alternativa para navegadores que no soporten marcos. A cada uno de los marcos le
ponemos un nombre y especificamos qu pgina HTML se mostrar en l (etiqueta
<FRAME>). Slo queda definir lo que ver el usuario en el supuesto de que su navegador
no soporte frames (etiqueta <NOFRAMES>).
Para indicar en cuantas partes dividiremos la pgina, debemos indicar el tamao de cada
parte separado de una coma ( , ). Por ejemplo, si van a ser solo dos frames, indicaramos
as: 40%,60%. As, el primer frame ocupar el 40% de la pgina, y el segundo el 60% de
la pgina.
XVIII.1. Etiqueta FRAMESET

Los parmetros COLS y ROWS nos permiten controlar el tamao de los marcos
presentados en la ventana del navegador. Existen tres formas de establecer estos
tamaos:
Porcentajes: podemos definir el tamao de un marco como un porcentaje del

espacio total disponible (el ancho o alto de la ventana del navegador)
Absolutos: Podemos especificar el ancho o alto del marco en pixels.
Calculado: Podemos colocar el ancho o alto de un marco y dejar que el tamao del
otro lo calcule el navegador, usando para ello un asterisco en lugar de un valor o
porcentaje. Por ejemplo si tenemos tres marcos y colocamos cols=" 10%, 30%, *",
el ltimo ocupar el 60% (el espacio sobrante 100 - 10 -30). Si colocamos el *
varios marcos se repartirn el espacio equitativamente, pero podemos tambin
hacer que un marco sea doble o triple de otro. As, un marco con un espacio de 3*
ser tres veces ms grande que el que contenga un asterisco.
Se pueden combinar los tres mtodos. Por ejemplo:

<FRAMESET COLS="10%,*,300,3*">
Supongamos que el ancho total de la ventana son 800 pixels. El primer marco ocupar el
10%, es decir, 84 pixels. El tercero necesita 300, en total tenemos 384 ocupados luego
quedan 800-384, 416 pixels libres. Los otros se repartirn este espacio en funcin de los
asteriscos: 416/4 = 104 pixels para el de un asterisco y 312 para el otro. En total tenemos
ocupados los 800 pixels. Lo ms recomendable es dejar un marco con tamao calculado, o
sea, con el asterisco para.
Y bueno si queremos que los marcos se distribuyan de una forma algo ms irregular
podemos aprovechar la posibilidad de anidarlos, en otras palabras: un marco puede
contener una pgina que a su vez contenga otros marcos. Esto se hace poniendo otro
<FRAMESET> donde normalmente colocamos las etiquetas <FRAME> tal que as:
<FRAMESET COLS="20%,80%">
<FRAME NAME="indice" SRC="indice.htm">
<FRAMESET ROWS="*,80">
<FRAME NAME="principal" SRC="superior.htm">
<FRAME NAME="ejemplos" SRC="principal.htm">
</FRAMESET>
</FRAMESET>
La etiqueta principal es <frameset> y sus atributos son:
cols: Indica el tamao de las columnas (en pixeles o porcentaje).

rows: Indica el tamao de las filas (en pixeles o porcentaje).
framespacing: Indica el tamao (en pixeles) entre cada frame.
border: Indica el ancho del borde (en pixeles).
frameborder: Indica si los frames tendrn bordes (Yes - No).
XVIII.2. Etiqueta FRAME

Y la etiqueta donde debemos indicar la pgina que va a contener el frame es <frame> (no
tiene etiqueta de cierre). Sus atributos son:
src: Aqu escribimos la pgina que contiene el frame.

name: Indicamos el nombre del frame.
scrollbar: Indicar si el frame contiene las barras de desplazamiento o no (Yes o
No).
noresize: Bloquea el frame para que no podamos achicarlo o expandirlo
Debemos crear un archivo principal, que es el que contiene frames, y el ttulo que se
ponga en este, ser el que se mostrar. Los valores del atributo cols o rows podemos
indicarlos en pxeles o en porcentaje, pero si se indica en pxeles, debido a que existen
varios tipos de resoluciones, como 800x600 - 1024x78 (las ms usadas), podemos utilizar
un comodn (*) para cubrir el espacio que sobra.
Veamos unos ejemplos para entender mejor:
Creamos el archivo principal (index.html -por ejemplo), con dos frames que estarn en dos
columnas, la primera ocupar el 20% y la segunda el 80%.
Cdigo index.html:
<html>
<head> <title>Pgina Principal (Index)</title></head>
<frameset cols="400,*">
<frame src="pagina1.html" scrolling="no" name="frame1" noresize>
<frame src="pagina2.html" scrolling="yes" name="frame_2" noresize>
</frameset>
</html>
Ahora creamos los otros 2 archivos (pagina1.html y pagina2.html) que estarn en la pgina
principal (index.html). En este caso solo pondremos unas palabras y cambiamos el color
de fondo:
pagina1.html:
<html>
<head> <title>Pgina 1</title></head>
<body bgcolor="#CC0000">
<font size="4">Texto de la p1</font>
</body>
</html>
pagina2.html:
<html>
<body bgcolor="#0000FF">
<font size="4" color="#FFFF00">Texto de la p2</font>
</body>
</html>
Como se puede ver, en el frame de la izquierda (rojo), no tiene barras de desplazamiento
porque el valor del atributo scrolling (en el archivo principal) fue no.
El de la derecha si tiene, porque el valor fue yes.
Ahora vamos a poner 3 frames, pero en filas y el tamao lo pondremos en pxeles, tambin
eliminamos el borde entre frames. La primera fila ocupar 43 pxeles (de alto), la segunda
colocamos un * (comodn) para que ocupe el espacio que sobre, y la tercera fila 200
pxeles.
Creamos el archivo principal (frames.html -en este caso) que contiene las 3 pginas:
frames.html
<html>
<head> <title>Pgina Principal (Frames.html)</title></head>
<frameset rows="43,*,200" framesborder="no" border="0">
<frame src="frame1.html" scrolling="no" name="frame_1" noresize>
</frameset>
</html>
frame1.html
<html>
<body bgcolor="#00CCFF">
<font size="4" color="#FFFF00">Texto de la p1</font>
</body>
</html>
frame2.html
<html>
<body bgcolor="#00CC00">
<font size="4" color="#000055">Texto de la p2</font>
<a href="body.html" target="frame_2">Ir a la pgina del ejemplo de BODY</a> </body>
</html>
frame3.html
<html>
<body bgcolor="#111111">
<font size="4" color="#FFFFFF">Texto de la p3</font><br><br>
</body>
</html>
Importante: En el archivo principal (el que contiene los frames) no debe contener la
etiqueta
<body>.
Si queremos abrir una pgina en otro frame, debemos poner el nombre del frame (con el
atributo name) igual que el valor del atributo target del enlace. Ejemplo:
frames.html (archivo principal)
<html>
<head> <title>Pgina Principal (Frames.html)</title></head>
<frameset rows="43,*,200" framesborder="no" border="0">
</frameset>
</html>
frame2.html
<html>
<body bgcolor="#00CC00">
<font size="4" color="#000055">Texto de la p2</font>
<a href="body.html" target="frame_2">Ir a la pgina del ejemplo de BODY</a> </body>
</html>
Ahora un ejemplo de como hacer una pgina con 3 frames, dos de ellos son columnas y
uno es fila. Ponemos 2 <frameset>, en el de la fila, el segundo valor ser el comodn ( * ) y
cerraremos los dos hasta el final:
Cdigo:
3frames.html (archivo principal)
<html>
<head> <title>Pgina Principal (3frames.html)</title></head>
<frameset rows="60,*">
<frame src="pagina1.html">
<frameset cols="20%,80%">
<frame src="pagina2.html">
<frame src="pagina3.html"> </frameset> </frameset>
</html>
XVIII.3. Marcos flotantes <IFRAME>

Una excelente alternativa a los marcos fijos son los marcos flotantes, actualmente
soportados por todos los navegadores. La idea de este elemento ideado por Explorer,
sigue siendo la misma: incluir una pgina externa dentro de otra, pero en este caso el
marco puede quedar totalmente integrado en la pgina contenedora. Es como un include.
La descripcin de este elemento es muy parecida a los frames: es necesario decir de

donde viene la pgina y como se ha de ver el marco (bordes, mrgenes scroil...) Esto se
hace mediante los parmetros ya vistos:
NAME
Asigna un nombre a un marco, de esta manera luego podemos usarlo como

destino de un enlace.
ALIGN
Alineacin del marco respecto al texto que lo rodea (botton, right, left, middle)
SRC
Indica la URL del documento HTML que ocupar el marco.
HEIGHT
Altura del marco
WIDTH
Anchura del marco
FRAMEBORDER Ssi lo igualamos a cero el borde de este marco desaparece

SCROLLING
Coloca o no las barras de scroll. Su valor es por defecto AUTO, aparecern si

son necesarias. Las otras opciones que tenemos son YES o colocarlas y NO, no
ponerlas.
MARGINWIDTH
Permite cambiar los mrgenes horizontales dentro de un marco. Se representa

en pixels.
MARGINHEIGHT Igual al anterior pero con mrgenes verticales.

allowtransparency Si es true La pgina origen puede tener como color de fondo transparent.
La etiqueta es <iframe> y tiene los mismos atributos que un frame. Debemos cerrar la
etiqueta sin poner nada en medio, indicamos si queremos borde y/o barras de
desplazamiento.
Veamos un ejemplo:
Incluiremos el archivo interno.html en la pgina:
<div align="center"><iframe src="interno.html" name="pag" width="300" height="250"
frameborder="no"></iframe></div>
XVIII.4. Acceso a otros marcos

Si vimos la seccin dedicada a los enlaces recordars que cuando pulsas un enlace en la
ventana del navegador aparecer otra pgina, pero podamos colocar el atributo target
para hacer que la nueva pgina se abriera en otra ventana. Pues bien esta otra ventana
puede ser otro marco. As en un marco puedo colocar un enlace que abra la pgina en otro
marco de la misma pgina.
Este parmetro se puede colocar en tres etiquetas: <A>, <AREA> y <BASE>. En las dos
primeras sirve para indicar el marco en el que abriremos ese enlace en particular y el
ltimo modificaremos el marco en el que por defecto se nos muestran todos los enlaces.
Para indicarle el marco que deseamos le asignaremos el nombre del mismo. As, en los
ejemplos anteriores, si en el marco llamado indice tenemos un enlace que queremos se
abra en el marco principal pondremos:
<A HREF="pagina.html" TARGET="principal">
Tambin existen cuatro nombres reservados que podremos utilizar en el parmetro
TARGET:
_top : Elimina todos los marcos existente y muestra la nueva pgina en la ventana original
sin marcos.
_blank : Muestra la nueva pgina en una ventana nueva y sin nombre del navegador.
_self : Muestra la nueva pgina en el marco donde est declarado el enlace.
_parent : Muestra la nueva pgina en el <FRAMESET> que contiene al marco donde se
declara el enlace. En el ejemplo que pusimos de <FRAMESET> anidados, una enlace
situado en el marco ejemplo cuyo parmetro TARGET fuese igual a _parent eliminara la
separacin entre los marcos ejemplo y principal y mostrara en ese nuevo marco la nueva
pgina.
XIX. INSERTAR AUDIO Y VIDEO

A veces, es bueno que pongamos msica en nuestra pgina web para que se vea mejor.
Tambin podemos tambin compartir algn video de nosotros o alguna pelcula. Debemos
colocar el archivo (de audio o video) en el mismo directorio (o carpeta) que est el archivo
de la pgina (html -en este caso). Los cdigos aqu escritos, son para reproducir solo con
el Reproductor de Windows Media y visualizarlos con Internet Explorer.
Debemos tener en cuenta varias cosas:
No toda la gente tiene internet de banda ancha, para cargar rpido el archivo.
Al subir un archivo a la web va FTP (ve el manual de FTP), generalmente tarda unos
minutos, a menos que tengas internet de 512Kbps (o ms).
Si comprimes mucho un archivo (de audio o video), puede ser que al escucharlo (o verlo)
est con mala calidad.
Existen 2 formas para colocar audio-video en una pgina web:
bgsound: Con esta etiqueta (y los siguientes atributos) colocamos solamente archivos de
audio, sta etiqueta se pone entre la etiqueta <HEAD>...</HEAD>. Lo nico que tenemos
que hacer es indicar algunos valores. Es importante saber que con esta etiqueta, se
reproduce un sonido y se puede repetir, pero no hay un botn en especfico que detenga el
sonido (aunque con Esc se detiene).
Atributos:
src: Indica la ruta (donde est el archivo) y el nombre del archivo (por ej: musica.mp3).
loop: Indica si se repite o no el sonido, y si se repite indica cuantas veces se repite (el
valor -1 indica reproducir infinitamente).
volume: El volmen que se escuchar el sonido (mnimo -10,000 y mximo 0).
Cdigo:
<head> <bgsound src="Samples/My_Heart_Will_Go_On.mid" loop="-1" volume="0">

</head>
object: Con esta etiqueta se reproduce un tipo de archivo (audio y video). Podemos indicar
que empiece la reproduccin automticamente o manualmente, el tamao del
"reproductor" que aparece en la pgina, mostrar u ocultar la barra del reproductor (botones
de reproducir, detener...).
Atributos:
classid="identificador del objeto": Indica la ruta del objeto o un componente para

reproducir el archivo.
type="tipo de archivo": Indica el tipo de archivo.

width: Indica el ancho del reproductor.
standby: Muestra un mensaje mientras se carga el archivo.
height: Indica la altura del reproductor.
Existen algunos parmetros para indicar el aspecto del reproductor y mostrar u ocultar
objetos (aqu pongo los ms importantes). El cdigo de un parmetro es:
<param NAME="Nombre del parmetro" VALUE="Valor (True=S / False=No)">
autostart: Reproducir automticamente o no.
filename: Indica la ruta y nombre del archivo.
ShowStatusBar: Muestra u oculta la barra de estado del reproductor.
Un ejemplo de un archivo de audio:
Cdigo:
<object CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95"
CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Versi
on=5,1,52,701" standby="Cargando los componentes del Reproductor de Windows Media"
type="application/x-oleobject" NAME="MC1" ID="MC1" height="52" width="300">
<param NAME="FileName" VALUE=" My_Heart_Will_Go_On.mid">
<param NAME="AutoStart" VALUE="True">
<param NAME="ShowStatusBar" VALUE="True">
<param NAME="ShowGotoBar" VALUE="False">
<param NAME="TransparentAtStart" VALUE="False">
<param NAME="Volume" VALUE="-10000">
<param NAME="Loop" VALUE="-1"> </object>
Ahora, un ejemplo de un video (Trailer de Harry Potter y El Cliz de Fuego).
<object CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95"
CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Versi
on=5,1,52,701" standby="Cargando los componentes del Reproductor de Windows Media"
type="application/x-oleobject" NAME="MC1" ID="MC1" height="250" width="350">
<param NAME="FileName"
VALUE="http://raincloud.warnerbros.com/harrypotter/us/med/goblet/teaser/teaser_100.asx"
>
<param NAME="AutoStart" VALUE="True">
<param NAME="ShowStatusBar" VALUE="True">
<param NAME="ShowGotoBar" VALUE="False">
<param NAME="TransparentAtStart" VALUE="True">
<param NAME="Volume" VALUE="-10000">
<param NAME="Loop" VALUE="-1"> </object>

Curso de HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Curso de HTML

Uploaded by

Copyright:

Available Formats

CURSO DE HTML

I.1. Qu programa debo usar?

I.2. Resumen de Pasos para construir una Web

I.3. Qu es una pgina web?

II. CODIGO HTML

II.2. Estructura y etiquetas

II.3. Mis primeras pginas

II.5. El cuerpo del documento

Con esto colocaremos el texto en formato <H1> (o cabecera 1) y centrado (align="center"),

II.6. Resumiendo la Estructura del documento

III. TIPO DE DOCUMENTO

IV.1. Titulo o Title

IV.2. Meta Name

IV.3. Meta http-equiv

IV.4. Tipo de Codificacin (META)

Coloca una imagen como fondo de la pgina.

Define el color de fondo de la pgina.

Cuando es igual a FIXED el grfico definido como fondo de la pgina

Color del texto.

Color de un enlace no visitado (por defecto azul).

Color de un enlace ya visitado (por defecto prpura).

Color que toma un enlace mientras lo estamos pulsando (por defecto

y Nmero de pixels que dejar de margen entre el borde de la ventana y

Equivalentes a los anteriores, pero stos funcionan en Netscape.

V.1. Formato a nivel de bloques

Como vemos, en este ejemplo se ha puesto ya el ttulo a la pgina. En concreto se le ha

V.1.2. Estilos de prrafos

Soy un prrafo: fjate en los

<p ALIGN=x> ... </p>

... Permite centrar todo el bloque de texto Alineacin por defecto

Representa el texto encerrado en ella con un

Mete sangras de prrafo tanto a derecha Si quieres ver el texto

V.2. Los encabezados

<H1> ... </H1> Cabecera de nivel 1

V.3. Resaltar Textos

V.3.1. Textos en Negrita

V.3.2. Textos en Cursiva

V.3.3. Textos Subrayados

V.3.4. Textos con Varios Estilos a la Vez

<B> ... </B>

Pone el texto en negrita.

Soy un texto negro como el

<I> ... </I>

Representa el texto en cursiva.

<U> ... </U>

Para subrayar algo.

Como soy muy

<S> ... </S>

<TT> ... </TT>

Permite representar el texto en un tipo de

<SUP> ... </SUP>

<SUB> ... </SUB>

Incrementa el tamao del tipo de letra.

Disminuye el tamao del tipo de letra.

Cre ver un lindo gatito

<BIG> ... </BIG>

V.3.5. Estilos de texto

<CITE> ... </CITE>

Cita, por ejemplo de un texto

<CODE> ... </CODE>

Hay cosas importantes.

<EM> ... </EM>

Para poner nfasis

<KBD> ... </KBD>

á, Á, é, É,... , , , , , , , , y