Separata HTML

HTML
Para poder transferir de forma adecuada los diferentes documentos de hipertexto por INTERNET se cre
un protocolo de red especfico, el HTTP (Hipertext Transfer Protocol), basado en el envi de documentos de texto
plano en formato ASCII y de ciertas cabeceras que aportan la informacin necesaria para la transmisin.
Para poder identificar un documento o recurso de Internet de forma unvoca fue necesario asignar a cada
uno de ellos una especie de direccin nica, que se denomin URL (Uniform Resource Locator), que indica tanto la
localizacin exacta del recurso como el protocolo necesario para su transferencia. La forma genrica de la URL de
una pgina web es: http://www.servidor.dominio/carpeta/pagina.html
Como por ejemplo:
http://www.htmlweb.net/redes/redes.html
Aunque en realidad la parte servidor.dominio se corresponde con lo que en la tecnologa TCP/IP se denomina
direccin IP.
Para poder dar formato a los datos presentes en el documento web se desarroll un lenguaje especfico, el
HTML (HyperText Mark-up Language Lenguaje de Marcas de Hipertexto), que permita asignar un formato
especial de presentacin a los elementos del documento contenidos entre unas etiquetas especiales, denominadas
marcas o tags.
Por ltimo, para poder interpretar y visualizar correctamente los documentos as creados fue necesario
crear unas interfaces especficas, que se denominaron browsers (navegadores).
Estas fueron los pilares esenciales de los cuales se construy la WWW (World Wide Web), la gran telaraa mundial
de pginas web (documentos web visualizados en un navegador). El WWW es un sistema de informacin global,
pblico e independiente, mediante el cual un usuario cualquiera puede acceder a documentos HTML almacenados en
diferentes servidores ubicados en cualquier parte del mundo, pudiendo saltar de un servidor a otro de forma
instantnea mediante los enlaces de hipertexto contenidos en las pginas web.
Extensin
image/png
.png
Sonido
audio/basic
.au, .snd
audio/x-au
.au
audio/midi
.mid, .midi
audio/x-midi
.mid, .midi
audio/x-wav
.wav
audio/mod
.mod
audio/x-mod
.mod
audio/mpeg3
.mp3
audio/x-mpeg-3
.mp3
audio/x-pn-realaudio
.ra, .ram
audio/x-pn-realaudio
.ra, .ram
Video
TIPOS MIME
El protocolo HTML fue diseado para transportar por red ficheros en formato ASCII, formados por texto plano.
Ahora bien, con el progreso de las tecnologas y con la inclusin dediferentes tipos de ficheros no ASCII en las
aplicaciones por Internet (imgenes, vdeos, sonidos, etc.), surgi la necesidad de transformar estos formatos a tipo
ASCII (u otros juegos de caracteres compatibles), para su correcta recepcin en el navegador web.
Este problema se produjo inicialmente en las aplicaciones de correo electrnico, cuando se necesit enviar por mail
ficheros no formados por texto plano, y por tanto, no compatibles con los juegos de caracteres permitidos.
Para solucionar este problema el Internet Engineering Task Force (IETF) cre en 1992 los tipos Mime (Multipurpose
Internet Mail Extensions), especificaciones para dar formato a mensajes no-ASCII, de forma que pudieran ser
enviados por Internet e interpretados correctamente por los programas de correo locales.
Fue tan importante la ampliacin que se di con los tipos Mime al correo que pronto se aplicaron tambin a los
documentos web, lo que permiti incluir en las pginas HTML ficheros varios (inicialmente imgenes, y luego
vdeos, sonidos, applets de Java, etc.), que dieron nueva vida a la web.
Los tipos MIME especifican los tipos de datos, como por ejemplo texto, imagen, audio, etc., que los archivos
contienen. MIME adjunta a cada fichero un archivo de cabecera donde se indica el tipo y el subtipo del contenido de
los datos del mismo. Gracias a esta informacin, tanto el servidor como el navegador pueden manejar y presentar los
archivos correctamente.
Los principales tipos Mime soportados por los navegadores web son:
Tipo
Tipo
Extensin
Imagen
image/bmp
.bmp, .bm
image/x-windows-bmp
.bmp
image/gif
.gif
image/jpeg
.jpe
image/jpeg
.jpg
video/avi
.avi
video/x-motion-jpeg
.mjpg
video/quicktime
.mov
video/mpeg
.mpg
application/x-shockwave-flash
.swf
ESTRUCTURA DE UN DOCUMENTO WEB

ESTRUCTURA BSICA DE UN DOCUMENTO.Vamos a definir una pgina web como aquello que el usuario ve en la ventana de su navegador, mientras que un
documento web ser el cdigo interno que genera la pgina, y que por lo tanto contendr elementos visibles en la
pgina web y otros elementos que no sern visibles en ningn momento en la ventana del navegador.
Ambos conceptos se suelen identificar, y no ocurre nada por hacerlo as. Nosotros vamos a separar ambos conceptos
tan slo con vistas a un mejor entendimiento de las explicaciones.
Pues bien, un documento web consta bsicamente de dos partes o secciones bien diferenciadas:
1. Cabecera o head: porcin de cdigo comprendida entre las etiquetas <HEAD> y </HEAD>, cuyo contenido no
es visible en la ventana del navegador.
2. Cuerpo o body: porcin de cdigo comprendida entre las etiquetas <BODY> y </BODY>, cuyo contenido si es
visible en la ventana del navegador.
Ambas secciones se encuentran siempre dentro de la pareja de etiquetas delimitadoras <HTML> y </HTML>, que
son las que fundamentalmente delimitan el contenido de todo documento web:
<html>
<head>
Cabecera
1
</head>
<body>
Cuerpo
</body>
</html>
Opcionalmente, podemos encontrar otras dos secciones en el documento:
3. Precabecera: zona del documento situada desde el inicio del mismo hasta la etiqueta <HTML>, que puede
contener etiquetas o instrucciones especiales.
4. Seccin final: zona del documento situada desde la etiqueta </HTML> hasta el final del mismo, que puede
contener ciertas instrucciones especiales de cdigo, generalmente de tipo script.
Es posible, y as lo hacen algunas personas, prescindir de la inclusin de alguna de las etiquetas, ya que los
navegadores estn preparados para conocer qu elementos pertenecen a la cabecera de un documento y cules
pertenecen al cuerpo. Pero esta prctica es totalmente desaconsejable, ya que las etiquetas y sus correspondientes
parejas de cierre tienen un motivo de ser, estn ah para delimitar con claridad las diferentes partes de un documento,
hacindolo ms claro y estructurado. Y esto es aplicable a todas las etiquetas HTML, sin excepcin de ningn tipo.
Cabecera (HEAD)
La cabecera abarca todo el cdigo entre las etiquetas <HEAD> y </HEAD>, su contenido no es visible en la ventana
del navegador y puede contener los siguientes elementos:
Titulo de la pgina
Etiquetas BASE, LINK, ISINDEX

META Tags
_blank: los enlaces se abren en una ventana nueva.

_top: los enlaces se abren en la ventana actual, ocupando toda ella y sustituyendo a la pgina de
declaracin de frames.
_self: los enlaces se abren en la misma ventana o marco que est el enlace. Es el valor por defecto,
en que est activo si no indicamos el atributo TARGET.
_parent: los enlaces se abren en la ventana o marco padre de la que contiene el enlace.
nombre_ventana: si especificamos el nombre de un frame o ventana existente, en ella se abrirn las
pginas contenidas en los enlaces.
El atributo href es obligatorio, y se suele emplear cuando queremos incluir en el documento actual imgenes o
ficheros que se encuentran en otra direccin (URL) o en otro servidor web diferente de la del documento.
El atributo target es opcional, y se usa sobre todo en pginas que contienen frames, como la tpica disposicin de un
frame lateral con un men cuyos enlaces se deben abrir siempre en otro frame central, consiguiendo con ello no
tener que indicar el nombre de ste en cada enlace del men. Si no se especifica, se toma por defecto el valor _self,
es decir, las pginas enlazadas se abrirn en la ventana actual, en la que se encuentra el enlace.
Ejemplo:
<base href="http://www.htmlweb.net/manuales/">
La etiqueta LINK define relaciones concretas entre el documento actual y otros documentos o ficheros
relacionados con l.
Pose los siguientes atributos:
href="url", que sirve para establecer la url del documento o fichero relacionado con el actual.
Declaraciones de estilos, mediante la etiqueta STYLE

Cdigos de lenguajes de script en cliente: JavaScript, VBScript, etc.
Cdigos de lenguajes en servidor: JSP, Java, ASP, PHP, etc.
La etiqueta TITLE establece el ttulo de la pgina web, que ser visible en la barra de ttulo del navegador (parte
superior de la ventana), salvo en el caso de una pgina de frames, en el que ser visible siempre el ttulo de la pgina
madre. Adems de este ttulo, cada navegador aade un texto identificativo propio.
En una etiqueta de uso obligado, ya que personaliza cada pgina de nuestro sitio web, y se escribe siempre con
etiqueta de cierre. Aunque no existe un lmite establecido para el contenido de esta etiqueta, conviene que el texto en
la misma no supere los 56-64 caracteres, existiendo buscadores que solo admiten 40 y otros que admiten hasta 100.
Ejemplo:
<html>
<head>
<title>HTMLWeb, Manual de HTML. Ejemplo de TITLE</title>
</head>
...
Si no estipulamos el ttulo y trabajamos con un editor web, generalmente nos aparecer como ttulo por defecto la
palabra "Undefined", que queda muy feo en una pgina.
La etiqueta BASE especifica una URL que se tomar como base para todos las rutas que se especifiquen luego en el
documento web, es decir, especifica un directorio en el que localizar las imgenes y dems ficheros enlazados en la
pgina distinto del correspondiente al que se encuentra sta.
Tambin sirve para especificar la ventana por defecto en la que se abrirn los enlaces contenidos en la pgina.
Su sintaxis general es del tipo:
<base href="url_base" target="ventana">
donde:
url_base: es la url completa del directorio que se toma como raz (base) para las rutas de los ficheros
enlazados en la pgina. Obligatorio.
ventana: ventana en la que se abrirn los enlaces de la pgina por defecto. Puede ser:
rel="relacion", que sirve para definir el tipo de ralacin existente entre el documento actual y el
referenciado mediante el atributo href. El parmetro "relacion" puede tener bastantes valores (alternate,
appendix, contents, chapter, glossary, etc.), pero los ms usados y tiles son:
stylesheet, que establece la relacin con un fichero externo de declaraciones de estilos (fichero
CSS), de tal forma que los estilos en l declarados se consideran como si lo estuvieran en el
documento html actual.
shortcut icon, que se utiliza para fijar un icono propio como imagen representativa de la
pgina cuando el usuario la incluya en su carpeta "Mis Favoritos".
type="tipo", que define el tipo de fichero relacionado con el actual, y que puede tomar dos valores:
text/javascript, para el caso de ficheros de cdigo JavaScript.
media="soporte", que define los casos en que deber actuar el fichero relacionado. Se suele usar en
caso de ficheros externos CSS, permitiendo con ello definir un fichero CSS para el caso de que la pgina
se presente en pantalla, otro para el caso en que se vaya a imprimir su contenido, etc. Los principales
valores posibles del parmetro "soporte" son:
Screen, para presentaciones en pantalla.
text/css, para el caso de ficheros de estilos CSS.
Print, para salida por impresora.

Braille, para salida por dispositivos especiales para invidentes.
Si no se especifica el tipo, el valor por defecto es "screen", es decir, salida por pantalla.
title="titulo", que especifica un ttulo o mensaje explicativo para la relacin establecida entre el
documento y el fichero externo.
Ejemplos:
<link rel="stylesheet" type="text/css" href="css/estilos.css">
Que establece como fichero de estilos externo para la pgina a "estilos.css", situado en la carpeta "css".
<link rel="shortcut icon" href="images/icono.gif">
Que establece el icono "icono.gif", contenido en la carpeta "images", como imagen representativa de la pgina
cuando se aada a "Mis Favoritos".
2
Las etiquetas META son sin duda de las ms valiosas que se pueden (y se deben) incluir en una pgina web, ya que
proporcionan informacin especial complementaria sobre el documento, fundamental por ejemplo a la hora de
conseguir que los buscadores de Internet indexen nuestra pgina en sus bases de datos.
Bsicamente, existen dos tipos diferentes de etiquetas META:
Metas http-equiv, que pueden servir bien para dar informacin a los robots de los buscadores de
Internet, bien para enviar una serie de cabeceras HTTP al navegador del usuario con informacin de
diverso tipo para un mejor tratamiento de esta.
Metas name, que complementan la informacin para los robots o para el contenido del documento.
Ejemplo:
<meta http-equiv="Content-language" content="es">
No vamos a insistir aqu en la importancia de las etiquetas META, ni en su sintaxis, pero disponis de un completo
Manual de Promocin Web, en el que se explican a fondo. Destacar aqu que las etiquetas META no tienen pareja de
cierre.
La etiqueta ISINDEX tiene como misin establecer unos identificadores concretos a la pgina en la que se
encuentra, con vistas a posteriores operaciones de bsqueda por medio de un programa que se ejecuta en el servidor
web. No la estudiamos por estar casi desechada, al existir en la actualidad otras alternativas de establecer bsquedas
ms funcionales.
La etiqueta STYLE en cambio es una de las que ms importancia toma da a da, ya que permite definir una serie
de estilos particulares para los elementos de la pgina, basados en definiciones CSS (Cascading Stylesheet o Hojas
de Estilos en Cascada).
Mediante CSS podemos separar totalmente el contenido del documento web de su presentacin, permitindonos
definir la presentacin individual o por grupos de cada uno de los elementos del mismo: tamao de las fuentes,
familia, color, peso, etc.
Sus principales atributos son:
type="tipo": que define el lenguaje usado para la definicin de estilos, y que puede tener los valores:
text/javascript: estilos definidos mediante JavaScript.
El valor normal es text/css.

media="soporte": fija el medio de salida de presentacin de los estilos. Sus principales valores son:
text/css: estilos definidos mediante CSS.
screen: para presentacin del documento web en pantalla.

print: para presentacin del documento en impresora.
all: para todas las presentaciones posibles. Es el valor por defecto.
title="titulo": define un ttulo explicativo para los estilos definidos en el bloque. Es til cuando tenemos
varios bloques de estilos diferentes en una pgina, para resumir el mbito de aplicacin de cada uno de
ellos.
Ejemplo:
<style type="text/css" title="estilos para la tabla central">
P{font-size:12px;font-family:Verdana;color:red;}
</style>
Donde hemos definido un estilo concreto para los textos contenidos dentro de las etiquetas <P>...</P> de nuestro
documento web. Observad cmo la etiqueta <STYLE> siempre lleva su correspondiente pareja de cierre,
</STYLE>.
La etiqueta SCRIPT sirve para definir bloques de cdigo de script que se deban ejecutar en nuestra pgina. Este
cdigo puede estar escrito en diferentes lenguajes de programacin, siendo los ms comunes JavaScript (para su
ejecucin en el navegador cliente) y VBScript o PHP (para su ejecucin en el servidor web).
La etiqueta <SCRIPT> siempre lleva paraja de cierre, </SCRIPT>, y sus principales atributos son:
language="lenguaje": que define el lenguaje de script usado en el bloque de cdigo, pudiendo tomar los
valores:
JavaScript, en cuyo caso podemos adems definir la versin usada (1.1 o 1.2)
VBScript
Php
type="tipo": que indica el tipo de lenguaje usado. Puede tomar los valores text/javascript (JavaScript),
text/jscript (versin Microsoft de JavaScript), text/vbscript (VBScript) y text/php (PHP), principalmente.
Aunque parezca redundante el uso de ste atributo, es conveniente su uso, ya que indica al navegador qu
tipo concreto de lenguaje de script estamos usando y en qu codificacin.
src="ruta_fichero": se usa para establecer como cdigo de script de la pgina el contenido en un fichero
externo. En este caso, cuando el navegador est cargando la pgina solicitar al servidor web el fichero
de script indicado, considerando luego el cdigo del mismo como incluido en el del propio documento a
todos los efectos.
Este atributo toma como valor la ruta en la que se encuentra el fichero de script externo (que hay que
poner siempre entre comillas dobles o simples), pudiendo ser una ruta relativa a la estructura de carpetas
de nuestro sitio web (ej: src="carpeta/fichero.js") o una ruta absoluta referente a nuestro servidor web o a
otro diferente (ej: src="http://www.dominio.com/directorio/carpeta/fichero.js), pudiendo referirnos en
este caso incluso a un fichero almacenado en un servidor FTP.
runat="server": que establece que el cdigo contenido en el vloque se debe ejecutar en el servidor web.
La principal ventaja que tiene el uso de ficheros de cdigo script externo es que podemos reutilizar su cdigo en
todas las pginas que deseemos, con tan slo establecer en enlace al mismo dentro de cada una de ellas, con lo que
nos evitamos tener que repetir el mismo cdigo varias veces.
Ejemplo 1:
<script language="JavaScript" type="text/javascript">
function alerta(mensaje)
{
alert(mensaje)
}
</script>
Ejemplo 2:
<script language="VBScript" type="text/vbscript" runat="server">
Dim Nombre
Nombre="Carlos"
Response.Write("Tu nombre es " & Nombre)
</script>
Ejemplo 3:
<script language="JavaScript 1.1" type="text/javascript" src="js/funciones.js"></script>
Aconsejo al lector el estudio de en buen libro o manual de JavaScript, ya que es un lenguaje bsico y necesario para
la construccin de pginas web actuales y dinmicas.
CUERPO (BODY).
Comprende todo el cdigo situado entre las etiquetas <BODY> y </BODY>, su contenido si es visible en la ventana
del navegador y puede contener los siguientes elementos:
Elementos estndares HTML: prrafos, formularios, tablas, listas, etc.
Capas definidas mediante etiquetas <div></div> o <span></span>

3
Codigos de lenguajes en servidor: JSP, Java, ASP, PHP, etc.
Objetos incrustados: Applets, animaciones Flahs, etc.

Todos estos elementos los iremos estudiando en los temas sucesivos, pero es importante ahora centrarnos en una
serie de atributos propios de la etiqueta BODY que, si bien en la actualidad han sido en su mayora sustituidos por
sus equivalentes mediante CSS, an podemos verlos en multitud de pginas.
La etiqueta BODY posee un grupo de atributos que determinan la apariencia del fondo de la pgina:
background="ruta_imagen": que define una imagen de fondo para la pgina web, y en donde
"ruta_imagen" es la ruta en la que se encuentra la imagen de fondo, pudiendo estar referida a la estructura
relativa local de carpetas o ser la URL global del fichero de imagen respecto a nuestro servidor web. Un
factor a destacar es que si la imagen es de un tamao inferior al de la resolucin de pantalla usada, se
repetir horizontal y verticalmente hasta rellenar la totalidad de la pantalla. En algunos textos podris
encontrar el atributo bgproperties="fixed" para la etiqueta BODY, cuyo fin es que la imagen no se
repita, pero tericamente slo es compatible con Internet Explorer, y prcticamente no da resultados, por
lo que es mejor no usarla. Es posible evitar la repeticin de la imagen de fondo mediante atributos de
CSS, que veremos luego.
bgcolor="color": que establece un color de fondo para la pgina, y en donde "color" puede venir
expresado mediante el nombre web ingls estndar o mediante el cdigo hexadecimal del color (Ver
captulo sobre el color en la web).
Ejemplo de imagen de fondo:
<html>
<head>
<title>HTMLWeb, Manual de HTML. Ejemplo background</title>
</head>
<body background="images/logo.gif">
</body>
</html>
Ejemplo de color de fondo:
<html>
<head>
<title>HTMLWeb, Manual de HTML. Ejemplo bgcolor</title>
</head>
<body bgcolor="red">
</body>
</html>
Entendemos por mrgenes de pgina la distancia existente entre cada uno de los laterales de la misma y su
contenido interior ms cercano. As, el margen superior de la pgina ser la distancia existente entre el borde
superior de la ventana til del navegador y el contenido de la pgina ms cercano a l. Y lo mismo para los dems
bordes de la pgina.
La etiqueta BODY posee una serie de atributos que nos van a permitir configurar los mrgenes de la pgina, si
bien sern diferentes segn el navegador usado.
En el caso de Internet Explorer, disponemos de un atributo para fijar cada uno de los mrgenes de la pgina:
leftmargin="n", para el margen izquierdo
topmargin="n", para el margen superior
marginheight="n", para los mrgenes superior e inferior.

Donde, al igual que antes, "n" es un nmero entero, que expresa los pixels de separacin. Como vemos, Nestcape
fija los mrgenes en parejas, permitindonos con ello menos posibilidades de configuracin.
Para poder establecer unos mrgenes de pgina compatibles con ambos navegadores, deberemos establecer las
etiquetas correspondientes a los dos. Ejemplo:
<html>
<head>
<title>HTMLWeb, Manual de HTML. Ejemplo de margenes</title>
</head>
<body topmargin="100" leftmargin="50" marginheight="100" marginwidth="50">
<p>Este BODY tiene margenes</p>
</body>
</html>
Otro grupo de atributos de la etiqueta BODY es el formado por aquellos que permiten al diseador web fijar el
color que va a tener el texto de la pgina y el color de los enlaces de la misma , aclarando que un enlace puede
tener tres estados generales: normal (el enlace no ha sido activado todava), activo (cuando se ha activado y tiene
todava el foco) y visitado (una vez que ha sido activado y regresamos a la pgina que contiene el enlace). Los
atributos correspondientes son:
text="color", para el texto de la pgina.
alink="color", para los enlaces activos.
vlink="color", para los enlaces visitados.

En todos ellos "color" puede venir expresado mediante su nombre web ingls estndar o mediante su cdigo
hexadecimal.
Destacar que un enlace que ya ha sido visitado puede permanecer en ese estado aunque cerremos el navegador y
volvamos a la pgina que lo contiene posteriormente. Esto es as porque el navegador guarda en su cach un registro
de los enlaces visitados.
Ejemplo:
<html>
<head>
<title>HTMLWeb, Manual de HTML. Ejemplo de color en texto y enlaces</title>
</head>
<body bgcolor="#ffff99" text="green" link="red" alink="#663300" vlink="#ff33ff">
<a href="www.yahoo.es">Yahoo</a><br><br>
<a href="www.google.com">Google</a><br><br>
<a href="www.terra.com">Terra</a>
</body>
</html>
Por ltimo, la etiqueta BODY admite otros tres atributos, relacionados todos ellos con el uso de CSS, y que sirven
para definir estilos que afectarn a toda la pgina en su conjunto. Estos atributos son:
style="propiedad:valor;propiedad:valor;...", que permite asignar estilos "en lnea".
rightmargin="n", para el margen derecho
bottommargin="n", para el margen inferior

En todos los casos anteriores, "n" es un nmero entero, que expresa los pixels de separacin.
Para el navegador Nestcape Navigator, en todas sus versiones actuales, los atributos para configuracin de los
mrgenes son:
marginwidth="n", para los mrgenes izquierdo y derecho.
link="color", para los enlaces normales.
id="identificador", que permite asignar al cuerpo de la pgina una serie de estilos nicos, cuya
definicin estar en la cabecera de la pgina (dentro de un bloque <STYLE>...</STYLE) o en un fichero
de estilos externo.
class="clase", que permite asignar al cuerpo de la pgina una serie de estilos compartidos, definidos en
un grupo de ellos denominado clase, cuya definicin estar en la cabecera de la pgina (dentro de un
bloque <STYLE>...</STYLE) o en un fichero de estilos externo.
Ejemplo:
<html>
<head>
4
<title>HTMLWeb, Manual de HTML. Ejemplo de estilos en el BODY</title>

</head>
<body style="background:#99cc66;font-size:18px;font-family:Comic Sans MS;color:red;"222>
<div align="center">Hola, amigos</div>
</body>
</html>
Estilos para el BODY.CSS nos permite definir un gran conjunto de estilos diferentes para la etiqueta BODY, que afectarn a todos los
contenidos del mismo, siempre y cuando estos contenidos no se encuentren incluidos en un bloque de pgina que
tenga asignados sus propios estilos.
Esto es debido a la propia naturaleza de las Hojas de Estilo en Cascada, que se llaman precisamente as (en Cascada)
porque los estilos se van asignando mediante niveles jerrquicos, predominando siempre los estilos definidos ms
cerca del elemento a considerar.
Un factor a tener en cuenta siempre que hablemos en delante de propiedades CSS es que, bien no son soportadas de
forma estndar por todos los navegadores comunes, bien son interpretadas de forma ms o menos diferente. Por este
motivo, explicaremos solo las propiedades compatibles con los principales navegadores o aquellas que, por su
utilidad prctica o porque haya una forma alternativa que permita su uso, indicando en este ltimo caso los
navegadores que la soportan.
Otro aspecto importante es que existen determinadas propiedades que se heredan por los bloques contenidos en el
que se han definidos los estilos. Por ejemplo, si la propiedad CSS "P" se establece en la etiqueta BODY y es
heredable, todos los bloques incluidos dentro de <BODY>...</BODY> tendrn asignado esa misma propiedad, y
con el mismo valor, salvo que posean una definicin propia de estilos que afecte redefina la propiedad "P".
Las principales propiedades CSS que acepta la etiqueta BODY son (para informacin sobre CSS y sus propiedades:,
consulta en apndice correspondiente):
Propiedades de las fuentes: font, font-size, font-family, font-weight, font-style.
Ejemplo:
<body style="font-size:13x;font-family:Comic Sans MS;font-weight:bold">
Ejemplo de estilos en fuentes
</body>
Propiedades de los textos: color, line-height, text-align, text-decoration, text-indent, text-transform, letter-spacing
(no Nestcape 4x).
Ejemplo:
<style type="text/css">
body{color:red;text-align:center;text-decoration:underline;letter-spacing:12px;}
</style>
<body>
Ejemplo de estilos de textos
</body>
Propiedades del fondo: background, background-color; background-image, background-repeat; backgroundattachment (no Nestcape 4x), background-position (no Nestcape 4x).
Ejemplo:
.cuerpo{
background-image:url(../images/logo.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:100px 200px;
}
</style>
<body class="cuerpo">
</body>
Propiedades de mrgenes: margin, margin-left, margin-top, margin-right, margin-bottom.

Ejemplo:
body{margin-left:40px;margin-top:20px;margin-right:40px;}
</style>
<body>
Ejemplo de mrgenes en el BODY
</body>
Propiedades de acolchado: padding, padding-left, padding-top, padding-right y padding-bottom son soportadas
correctamente.
Propiedades de bordes: todas las posibles, de acuerdo con las limitaciones. Es importante experimentar en este
caso con cada una de las propiedades en cada uno de los navegadores, ya que la forma de renderizar cada propiedad
(width, color, style, lateral individual) vara mucho de un navegador a otro, e incluso no son soportadas.
Ejemplo:
<body style="border:2px solid red>
Ejemplo de estilos en bordes
</body>
Propiedades de posicionamiento y tamao: aunque no tienen significado en esta etiqueta (los posicionamientos
son siempre respecto al elemento padre, y BODY es el padre de todos los elementos), saber que Nestcape Navigator
soporta la propiedad position, situando el contenido de la pgina en las coordenadas dadas por left top. Pero no se
deben usar, al ser incompatibles con I. Explorer. Igual ocurre con las propiedades de tamao, width, height y clip,
siendo aceptadas por Nestcape Navigator, pero no por Internet Explorer.
Propiedades de visibilidad: la propiedad visibility es soportada por Internet Explorer y Nestcape 6x, y la propiedad
display slo por Internet Explorer. Aunque estas propiedades parecen no tener utilidad prctica, se pueden usar en
pginas concretas por ejemplo para ocultar el contenido de un frame sin tener que cargar en l una nueva pgina,
pero slo se debe usar en aplicaciones desarrolladas para los navegadores que las soportan.
Propiedades del cursor: soportadas slo por Internet Explorer, en todas sus variantes (default, hand, move, help,
etc.).
PRECABECERA
Comprende el espacio de cdigo comprendido entre el inicio del documento y la etiqueta <HTML>.
Esta seccin, as como el cdigo que puede contener, es opcional, por lo que podemos escribir un documento HTML
cualquiera sin que aparezca la misma.
Ahora bien, si queremos escribir un documento HTML bien formado, de acuerdo con las recomendaciones del W3C,
es necesario incluir en esta seccin una etiqueta especial, que va a definir el tipo de documento HTML que estamos
creando. Esta etiqueta es DOCTYPE, cuya sintaxis general es del tipo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
En ella se define el DTD (Definicin de tipo de documento) que estamos usando en la construccin de la pgina, y
que variar dependiendo de si el cdigo se adapta a las definiciones del lenguaje HTML 4.0 de forma estricta o no, o
si estamos construyendo pginas de definicin de frames.
.
Opcionalmente, la Precabecera tambin puede incluir cdigos de script, tanto del lado cliente como del lado
servidor: JavaScript, VBScript, JSP, etc., aunque generalmente los script contenidos en esta seccin son de
definicin del lenguaje de script de servidor usado en la pgina, como en el caso de pginas ASP o JSP.
As, podis encontrar la etiqueta <%@ Language="VBScript"%>, que sirve para especificar cdigo VBScript de
ejecucin en servidor (generalmente en pginas ASP), etiquetas include, etc.
SECCIN FINAL
5
Aunque no es normal su presencia, a veces se precisa incluir en esta seccin, que est situada tras la etiqueta
</HTML> y hasta el final del documento, ciertas funciones propias de lenguajes de script o de cdigo de servidor.
JavaScript, VBScript, JSP, etc.
Generalmente son funciones que deseamos que se ejecuten una vez cargado el resto de contenido del documento, al
contener variables que apuntan a objetos del BODY (campos de formulario,por ejemplo), ya que si no se han
cargado cuando se ejecuta la funcin, obtendremos un error.
Ejemplo.Vamos a ver por ltimo un ejemplo de cdigo de una pgina web sencilla:
<html>
<head>
<title>Pagina de Bienvenida</title>
<META NAME="AUTHOR" CONTENT="Felipe Martos">
<META HTTP-EQUIV="Content-language" CONTENT="es">
<META NAME="DESCRIPTION" CONTENT="Pagina de bienvenida a Mundo Aventura, sitio web dedicado a
los viajes de aventura">
<META NAME="KEYWORDS" CONTENT="Mundo Aventura, excursiones, viajes, riesgo, acampada">
</head>
<body>
<h2 align="center">Bienvenidos a Mundo Aventura</h2>
<p>El sitio web de los amantes de la acampada y los viajes de riesgo</p>
<p>Para recibir nuestro boletin, introduce tu e-mail:</p>
<form>
<input type="text" name="email"><br><br>
<input type="submit" value="enviar">
</form>
</body>
</html>
En el cdigo podemos apreciar los siguientes elementos:
1. Una etiqueta DOCTYPE en la seccin de Precabecera, que define el documento como ajustado a las
especificaciones del HTML 4.0, variedad Transacional (permite ciertas desviaciones del estndar ms formal, el
HTML 4.0 Estricto).
2. La etiqueta <html>, que inicia el contenido estndar del documento.
3. La etiqueta <head>, que abre el contenido de la cabecera.
4. El ttulo de la pgina, con sus correspondientes etiquetas de inicio y cierre.
5. Cuatro etiquetas META, especficamente las correspondientes al autor de la pgina, al idioma usada en la misma,
la descripcin del contenido de la pgina y las palabras clave. Estas dos ltimas son fundamentales para que los
robots de los buscadores de Internet puedan indexar luego la pgina en sus bases de datos.
6. La etiqueta </head>, que cierra la cabecera.
7. La etiqueta <body>, que inicia el cuerpo del documento, a la que hemos aadido el atributo bgcolor, para dar un
color de fondo a la pgina. Todo lo que incluyamos a partir de ahora y hasta el correspondiente cierre del body ser
vsito por el usuario en la ventana del navegador.
8. Un header o cabecero de pgina, definido por la pareja de etiquetas <h2>...</h2>, conteniendo un texto que da la
bienvenida al usuario, dos prrafos, definidos por <p>...</p> y un formulario para introduccin del e-mail de nuestro
visitante, con una caja de texto para ello y un botn de envo de datos.
9. La etiqueta </body>, de cierre del contenido del cuerpo del documento
10. La etiqueta </html>, que cierra el documento total HTML y finaliza el mismo.
EL TEXTO EN LAS PGINAS WEB

El lenguaje HTML posee gran cantidad de etiquetas que facilitan este trabajo, y desde le surgimiento de
las Hojas de Estilos en Cascada el diseador web dispone de todas las herramientas necesarias para conseguir
pginas adecuadas a las exigencias del pblico actual.
En este captulo vamos a estudiar el conjunto de herramientas de que disponemos para conseguir estos objetivos, y
en l aprenderemos desde las clsicas etiquetas HTML hasta el mtodo adecuado de disponer los textos en nuestras
pginas, pasando por las Hojas de Estilo en Cascada.
ESTILOS FSICOS Y LGICOS.Los estilos fsicos causan siempre el mismo efecto (negrita, cursiva, etc.), mientras que los lgicos indican un tipo de
texto (citas, nombres, etc.) que por su definicin tienen un modo propio de presentarse. Los puristas del HTML
recomiendan que se use siempre un estilo lgico, argumentando que los estilos fsicos dependen del navegador y
caractersticas graficas del ordenador del usuario. Pero actualmente los ordenadores son muy potentes y tienen un
buen comportamiento grafico, por lo que esta recomendacin carece ya de sentido practico real.
Vamos a estudiar a continuacin las etiquetas que nos ofrece HTMl para trabajar con ambos estilos, dejando para el
final el formateo de textos mediante Hojas de Estilos en Cascada (CSS).
ETIQUETAS DE ESTILO LGICO.Las principales etiquetas que nos ofrece HTML para el formateo lgico de un texto son:
<ADDRESS>...</ADDRESS>, (Direccin), que se utiliza para especificar direcciones personales o de
correo electrnico. Ejemplo:
morenocerro2@terra.es
<BLOCKQUOTE>...</BLOCKQUOTE>, que introduce citas textuales o texto destacado (Cita de

Bloque). El texto contenido entre estas etiquetas aparecera normalmente sangrado respecto a los
margenes izquierdo y derecho. Ejemplo:
En HTML disponemos de etiquetas fsicas y lgicas, y normalmente siempre encontraremos etiquetas de
ambos tipos equivalentes, que produzcan el mismo resultado. La diferencia principal entre ambos estilos
reside en su propia concepcin.
<CITE>...</CITE>, que se utiliza tambin para introducir citas textuales o ttulos de libros, etc. (Cita).
El texto afectado aparerera en cursiva pero sin sangrar. Ejemplo:
<DFN>...</DFN>, (Definicin), que se usa para especificar definiciones de trminos. El efecto sobre el
texto es anlogo al de la etiqueta anterior. Ejemplo:
<CODE>...</CODE>, (Cdigo), que indica que el texto afectado es una porcin de cdigo fuente de un
lenguage de programacin, por lo que aparecera en un tamao de fuente menor y en fuente
monoespaciada, tipo teletype. Ejemplo:
<SCRIPT LANGUAGE = " JavaScript ">
function desab( i ) {
document.forms[i].caja.disabled=true;
}
function hab(i) {
document.forms[i].caja.disabled=false;
}
</SCRIPT>
<EM>...</EM>, (Emphasis), que indica que el texto afectado debe ser enfatizado. Su resultado final es el
de presentar el texto en cursiva, por lo que es anlogo al de la etiqueta CITE. Ejemplo:
Volveran las oscuras golondrinas...
6
<KBD>...</KBD>, que indica un texto que ha sido introducido desde el teclado, aunque no esta bien
implementado y el texto entre etiquetas no se ve afectado de ninguna forma, por lo que carece de inters.
<SAMP>...</SAMP>, (Sample=Ejemplo), que indica que el texto corresponde a un ejemplo o a un
mensaje de estado del ordenador. El texto aparecera en pantalla de menor tamao que el resto y en fuente
teletype, al igual que ocurre con la etiqueta CODE.
<STRIKE>...</STRIKE>, que indica que estamos ante un texto que ya no es valido, por lo que
aparecera tachado. Su uso esta ya desaconsejado por el W3C. Ejemplo:
este texto ya no es valido
<DEL>...</DEL>, (Delete), de efecto anlogo a la anterior, se utiliza para destacar partes del texto que
se han corregido y ya no son validas, presentando el texto tachado.
<INS>...</INS>, (Insert), complementaria de la anterior, indica el texto que sustituye al que ya no es
valido, presentandolo subrayado. Ejemplo:
este es el nuevo texto
<STRONG>...</STRONG>, (Fuerte), que se usa para indicar textos importantes, por lo que estos
aparecen resaltados en negrita. Ejemplo:
Este texto es importante
<VAR>...</VAR>, (Variable), que se usa para indicar variables de programacin. El texto afectado
aparece en cursiva. Ejemplo:
var strName="Pepe";
<ACRONIM>...</ACRONIM>, (Acrnimo), que se usa para presentar abreviaturas. Su uso esta
desaconsejado por el W3C, y en la practica no afecta al texto entre ellas.
<XMP>...</XMP>, (Example), destinadas a presentar ejemplos de textos fuente, representando el texto
afectado en fuente monoespaciada. Estan desaconsejadas ya por el W3C, por lo que no conviene usarlas.
Ejemplo:
ETIQUETAS DE ESTILO FSICO.Entre las principales etiquetas que nos facilita HTML para el formateo fsico de un texto destacan:
<B>...</B>, que pone un texto en negrita. Ejemplo:
Este texto va en negrita
<I>...</I>, que pone el texto en cursiva. Ejemplo:
Este texto va en cursiva
<U>...</U>, utilizada para subrayar un texto, aunque no es reconocida por todos los navegadores. Su uso
esta desaconsejado por el W3C. Ejemplo:
Este texto va subrayado
<TT>..</TT>, que presenta el texto afectado por ellas en typo de fuente teletype y de tamao menor al
del texto normal. Ejemplo:
Este texto va en teletype
Este texto es un ejemplo.
<PLAINTEXT>...</PLAINTEX>, (TextoPlano), destinadas slo para la presentacin de textos de una

forma no formateada. Estan desaconsejadas ya por el W3C, por lo que no conviene usarlas.
<LISTING>...</LISTING>, (Listado), destinadas para presentar cdigo fuente de programas. Estan
desaconsejadas ya por el W3C, por lo que no conviene usarlas.
NOTA.- Estas trs ltimas etiquetas no se deben usar, sustituyndolas por las etiquetas
<PRE>...</PRE>.
<PRE>...</PRE>, (Preformatted), que presenta el texto con longitud fija de fuente y con el formato real
que presente como texto mismo, es decir, los espacios, indentaciones, sangras y avances de lnea que
presente el texto se mantienen en su presentacin en pantalla, elementos que de otra forma no seran
tomados en cuenta por el navegador a la hora de renderizar el texto. Ademas, el texto se presenta en
fuente monoespaciada (generalmente tipo Courier) y en un tamao menor que el del texto normal. Este
tipo de estilo se puede aplicar para presentar listados de cdigo fuente de programas o para presentar
datos en forma de tablas sin tener que usar las etiquetas especficas de HTML para ello. Admite como
atributo width="n", que fija la anchura maxima de los renglones preformateados, aunque slo es
interpretada por Internet Explorer 5x y Nestcape Navigator 6x. Ejemplo:
Este
es un
texto
preformateado
<BDO>...</BDO>, (BiDireccional Overwrite), que se usa junto con el atributo universal DIR para poder
cambiar la direccin del texto en casos puntuales, cuando por incompatibilidades entre etiquetas anidadas
no es posible hacerlo con estas. Esto es especialmente til cuando queremos representar en nuestra
pgina una porcin de texto en alguno de los idiomas en los que el texto fluye de derecha a izquierda.
As:
<BDO DIR="rtl">soida</BDO>
da lugar a:
soida
<BLINK>...</BLINK>, (Parpadeante), que transforma el texto entre ambas en un texto con efecto
parpadeante. Slo es soportada por Nestcape Navigator, por lo que no conviene su uso.
<SUP>...</SUP>, que sirve para obtener superndices. Ejemplo:
esta habitacin tiene 25 m<SUP>2</SUP>
que nos da:
esta habitacin tiene 25 m2
<SUB>...</SUB>, para obtener subndices. Ejemplo:
el smbolo qumico del agua es H2O
<S>...</S>, que repersenta el texto tachado. Su uso esta desaconsejado por el W3C. Ejemplo:
Este texto va tachado
<BIG>...</BIG>, que aumenta el tamao del texto respecto del tamao del texto normal del documento.
Ejemplo:
Este texto es grande
<SMALL>...</SMALL>, que acta en sentido inverso a la anterior, disminuyendo el tamao relativo del
texto que afecta, y que se puede anidar co ella misma. Ejemplo:
Este es un texto pequeo
CREACIN DE BLOQUES DE TEXTO.Creacin de parrafos.Los parrafos en HTML se definen mediante las etiquetas <P>...</P>, que engloban en un nuevo parrafo todo el texto
comprendido entre ellas.
No es estrctamente necesaria la etiqueta de cierre </P>, ya que los navegadores asumen que comienza un nuevo
parrafo en cuanto se encuentran con una etiqueta <P>, salvo en el caso de que parrafos sucesivos usen una
alineacin diferente, en cuyo caso s que es necesaria cada etiqueta de cierre. De todas formas, y como regla general
en todo el cdigo HTML, es siempre conveniente poner las etiquetas de cierre, ya que as evitamos posibles errores
y obtenemos un cdigo limpio y claro.
Por lo tanto, a la hora de escribir nuestros textos en HTML deberemos estudiar los diferentes bloques que lo
componen y distribuir cada uno de ellos dentro de una pareja de etiquetas <P>...</P>. Cada vez que acaba un parrafo
se produce un salto de lnea con espaciado incluido, por lo que entre dos parrafos habra siempre una lnea en blanco.
Si te fijas en la distribucin del texto en esta pgina podras apreciar este salto entre parrafos, como ocurre si ir mas
lejos con el parrafo que viene a continuacin.
La forma primaria de construir bloques de texto en HTML pasa por la utilizacin de los parrafos.
La etiqueta <P> admite una serie de atributos que la complementan, entre los cuales destacan:
<P ALIGN="left / center / right / justify">...</P>, que nos permite alinear el texto del parrafo a la
izquierda (por defecto), centrado, a la derecha o justificado, en cuyo caso las lneas de texto ocuparan
7
siempre la misma anchura total, encargandose el navegador de crear espaciados entre las palabra de cada
linea para conseguir este efecto. Ejemplos:
<P ALIGN="left">parrafo alineado a la izquierda</P>
<P ALIGN="center">parrafo centrado</P>
<P ALIGN="right">parrafo alineado a la derecha</P>
que nos da:
parrafo alineado a la izquierda
parrafo centrado
parrafo alineado a la derecha
<P TITLE="texto">...</P>, que asigna un ttulo determinado al texto contenido en el parrafo y que
origina que al situar el cursor sobre cualquier parte de este texto aparezca un "bocadillo" con el texto
introducido en el ttulo. Se puede usar para introducir una pequea explicacin sobre el texto contenido
en el parrafo. Ejemplo:
HTMLWeb - Diseo Web
<P STYLE="atributos de estilo">...</P>, cuya finalidad es la de asignar un estilo definido al texto
incluido en el parrafo, y del que haremos un estudio mas amplio en el captulo de Hojas de Estilo en
Cascada (CSS) aplicadas a los textos.
<P CLASS="clase">...</P>, analoga a la anterior, pero que ahora hace referencia a una clase de estilo
definida bien en la cabecera de la pgina, bien en un fichero de estilos externo.
<P ID="identificador">...</P>, analoga a las anteriores, pero que ahora define una serie de
caractersticas de estilo y/o posicionamiento exclusivas de ese parrafo en concreto. Estudiremos esto en el
tema de CSS.
Otros bloques de texto.La pareja de etiquetas <P>...</P> es la basica para la creacin de bloques de texto con unos atributos de estilo
propios, pero tambin disponemos de otro par de parejas de etiquetas que nos permiten conseguir lo mismo y que
son:
<DIV>...</DIV>, analoga del todo a la anterior y con los mismos atributos, pero que en vez de crear un
salto de lnea con separacin crea un salto de lnea simple entre dos bloques. Por ejemplo:
<DIV>esto es un bloque creado con DIV</DIV>
<DIV>y este es el siguiente, tambin creado con DIV</DIV>
que nos da:
esto es un bloque creado con DIV
y este es el siguiente, tambin creado con DIV
<SPAN>...</SPAN>, tambin parecida a las anteriores, pero que no posee el atributo ALIGN y que
ademas no crea salto de lnea, por lo que el contenido de dos bloque SPAN se vera uno a continuacin del
otro, en la misma lnea. Ejemplo:
<SPAN>esto es un bloque creado con SPAN</SPAN>
<SPAN>y este es el siguiente, tambin creado con SPAN</SPAN>
que nos da:
esto es un bloque creado con SPAN y este es el siguiente, tambin creado con SPAN
NOTA.- Estas ltimas parejas de etiquetas, DIV y SPAN adquieren todo su significado con la aplicacin
de Hojas de Estilos, suponiendo un antes y un despus en el formateo y posicionamiento de elementos en
HTML. Las estudiaremos a fondo en el captulo correspondiente.
Centrado de textos.La etiqueta usada habitualmente para centrar un texto (o un bloque formado por textos, imagenes, etc) ha sido
<CENTER>...</CENTER>, que centra en pantalla todos aquellos elementos HTML incluidos entre ellas. Ejemplo:
<CENTER>este texto esta centrado<CENTER>

que nos da:
este texto esta centrado
Pero esta etiqueta se encuentra ya en la lista negra del W3C, lo que significa que en prximas versiones de HTML
sera borrada del estandar, por lo que conviene abandonar su uso a favor de las etiquetas:
<DIV ALIGN="center">...</DIV>
<P ALIGN="center">...</P>
siendo la primera opcin la mas aconsejada.
Cabeceras.Las cabeceras se utilizan en HTML para poner ttulos a las pginas. Estos ttulos son muy tiles en las pginas que
poseen mucho texto, al igual que ocurre en el mundo tipografico, del que el diseo en HTML hereda muchas de sus
caractersticas, pus nos van a permitir, mediante el uso de diferentes tamaos en los ttulos, dividir un documento
en secciones mediante una jerarqua de ttulos que van a destacar las diferentes importancias de los bloque de texto
que van a formar el documento completo.
Para introducir cabeceras en HTML se utiliza la pareja de etiquetas <Hn>...</Hn>, donde n es un nmero entero que
va desde 1 a 6 segn la importancia relativa del cabecero, correspondiento el tamao estandar al tamao 3.
Esta son etiquetas que pertenecen al estilo lgico, y presenta el texto incluido entre ellas en negrita, creando ademas
un salto de lnea doble entre la cabecera y el texto que le rodea en el documento.
La presentacin de cada uno de los tamaos es la que sigue:
cabecera H1
cabecera H2
cabecera H3
cabecera H4
cabecera H5
cabecera H6
La etiqueta Hn admite los mismos atributos que la etiqueta <P>, a saber, ALIGN, TITLE, STYLE, CLASS e ID.
Lneas horizontales.Otra de las formas de que disponemos en HTML para crear separaciones entre textos (o bloques del documento en
general) es la utilizacin de lneas horizontales, lo que se consigue con el uso de la pareja de etiquetas
<HR>...</HR>, (del ings Horizontal Rules), que origina en el documento una lnea horizontal embutida en el
fondo del mismo. La etiqueta HR no precisa etiqueta de cierre, pero por lo que ya hemos explicado antes es siempre
conveniente ponerla siempre.
La etiqueta HR admite los siguientes atributos:
<HR WIDTH="anchura"></HR>, donde el valor de la anchura puede venir expresado mediante un
nmero entero, que representa una longitud en pixels (valor absoluto) o mediante un tanto por ciento,
p.ej. 40%, que representa la porcin que va a ocupar la lnea del ancho total de la pantalla del navegador
(tamao relativo). El valor por defecto es el 100%, es decir, si no especificamos ancho para la lnea
horizontal esta ocupara todo el ancho de la pantalla. Ejemplos:
<HR WIDTH="200"></HR>
<HR WIDTH="50%"></HR>
que nos dan:
<HR ALIGN= " left / center /right"></HR>, que en el caso de que el ancho no sea todo el de la
pantalla alineara la lnea horizontal a la izquierda, la centrara en pantalla (valor por defecto) o la alineara
a la derecha de esta. Ejemplos:
<HR ALIGN="left" WIDTH="300"></HR>
<HR ALIGN="center" WIDTH="30%"></HR>
8
<HR ALIGN="right" WIDTH="150"></HR>

que nos da:
<HR COLOR="color"></HR>, que nos va a permitir definir el color de la lnea horizontal, y en donde
el color puede venir definido por su valor hexadecimal o por su nombre web estandar. El valor por
defecto es el que por defecto tengamos configurado en nuestro PC. Ejemplos:
<HR WIDTH="300" COLOR="red"></HR>
<HR WIDTH="300" ALIGN="LEFT" COLOR="#003366"></HR>
que nos dan:
<HR NOSHADE></HR>. Por defecto la lnea se nos va a presentar con un efecto de sombra
tridimensional. Mediante este atributo podemos evitar este efecto, presentandose entonces la lnea con
forma de dibujo plano, sin sombras ni efectos tridimensionales. Generalmente, si asignamos un color
determinado a la lnea horizontal se elimina este efecto automaticamente. Ejemplos:
<HR WIDTH="300"></HR>
<HR WIDTH="300" NOSHADE></HR>
que nos dan:
<HR SIZE="nmero"></HR>, que nos permite definir la altura o espesor de la lnea horizontal. Su
valor por defecto suele equivaler al un tamao SIZE="2". Ejemplos:
<HR WIDTH="300" SIZE="1" COLOR="red"></HR>
<HR WIDTH="300" SIZE="6" COLOR="red"></HR>
que nos dan:
<HR TITLE="texto></HR>, que asigna un texto identificativo a la lnea, que aparece en forma de
"bocadillo" al situar el cursor sobre ella.
<HR STYLE="estilo" / CLASS="clase" / ID="identificador"></HR>, para asignar estilos propios a
la lnea horizontal (ver tema de Hojas de Estilo en Cascada aplicadas al formateo de texto)
Esta es una lnea de texto.

Y esta es la siguiente.
En cuanto a la introduccin de espacios en blanco en nuestro texto, recordemos que en HTML los espacios en blanco
obtenidos mediante el uso de la barra espaciadora o el tabulador no son tenidos en cuenta, por lo que para conseguir
este efecto deberemos recurrir al caracter , (non breaking space = no romper espacio), que introduce cada
uno de ellos un espacio en blanco que s es representado por el navegador. Ejemplo:
vamos al cine
nos dara:
vamos al cine.
Ademas, con el uso de estos caracteres especiales podemos evitar que una lnea se parta por llegar al fin del ancho
de la pantalla, forzando a seguir el texto en la misma lnea.
Conviene aqu matizar que al usar editores HTML como HomeSite, Dreamweaver, etc., podemos escribir el texto de
nuestra pgina como si se tratase un editor de textos normal, sin necesidad de ir poniendo caracteres a cada
momento; pero esto es debido a que el editor va convirtiendo automaticamente estos espacios metidos con la barra
espaciadora en caracteres . Pero podemos tener problemas por ejemplo al utilizar una tabla en la que alguna
de las celdas debe estar vaca, sin contenido, ya que si no colocamos en su interior en espacio en blanco (o una
imagen), definido por un caracter , Nestcape Navigator 4x pintara mal esa celda, causandonos en la mayora
de los casos efectos de diseo no deseados.
La etiqueta FONT.A la hora de formatear el texto en HTML sin duda alguna la estrella ha sido durante mucho tiempo la pareja de
etiquetas <FONT>...</FONT>, ya que podemos aplicarla a cualquier porcin de nuestro texto, permitindonos
variar el tamao, el tipo de letra y el color de la misma, aunque esta etiqueta se encuentra ya en la lista negra del
W3C, lo que significa que en prximas versiones de HTML sera borrada del estandar, por lo que conviene
abandonar su uso a favor de las Hojas de Estilos en Cascada.
Los principales atributos de la etiqueta FONT son:
<FONT SIZE="tamao">...</FONT>, que fija el tamao del texto entre etiquetas, y donde el tamao viene
representado por un nmero entero que puede variar entre 1 (tamao menor) y 7 (tamao mayor), siendo su
valor por defecto 3. Ejemplos:
fuente tamao 1
fuente tamao 2
fuente tamao 3
fuente tamao 4
fuente tamao 5
fuente tamao 6
Saltos de lnea, lneas en blanco y espacios.Otra de las herramientas de que disponemos a la hora de dar formato al texto de nuestra pgina es el uso de saltos de
lnea y lneas en blanco.
Para obtener en HTML un salto de lnea simple podemos usar la etiqueta <BR>, (break=romper), que no posee
etiqueta pareja de cierre. Por ejemplo, con:
Esta es una lnea de texto.<BR>Y esta es la siguiente.
obtendremos:
Esta es una lnea de texto.
Y esta es la siguiente.
Y para conseguir un salto de lnea doble (con lnea vaca en medio) podemos usar la combinacin de dos etiquetas
<BR> Ejemplo:
Esta es una lnea de texto.<BR><BR>Y esta es la siguiente.
que nos da:
fuente tamao 7
El tamao de la fuente tambin podemos darlo en forma relativa respecto al tamao de la fuente base de
nuestro documento. As, si no hemos especificado un tamao base distinto al estandar, que es de un tamao 3,
las etiquetas:
<FONT SIZE="+3">tamao relativo +3</FONT>
<FONT SIZE="-2">tamao relativo -2</FONT>
nos daran:
tamao relativo +3
tamao relativo -2
que corresponden respectivamente a unos tamaos absolutos 6 y 1.

9
El tamao base para las fuentes de un documento se establece en el correspondiente a <FONT SIZE="3">, que
afectara a todo el documento, que es el que usa la etiqueta anterior como base de tamaos relativos. Si
queremos cambiar este tamao por defecto deberemos usar la etiqueta <BASEFONT SIZE="n">, donde n
sera el tamao estandar para todas las fuentes relativas de la pgina.
<FONT COLOR="color">...</FONT>, que fija el color con el que va a aparecer el texto afectado, y donde
el color puede venir expresado mediante su valor hexadecimal o mediante su nombre web estandar. Ejemplos:
<FONT COLOR="red">texto en color rojo</FONT>
<FONT COLOR="#336600">texto en color verdoso</FONT>
que nos da:
texto en color rojo
texto en color verdoso
<FONT FACE="familia">...</FONT>, que va a determinar el tipo de letra con la que aparecera el texto,
definido mediante el nombre de la familia correspondiente.
Se pueden especificar varios tipos de fuente, separados por comas, de tal forma que se usara la primera de ellas
especificada, siempre que el ordenador del usuario disponga la tenga instalada. Si no es as, se usara la
siguiente especificada en la lista, y as sucesivamente.
Ejemplo:
<FONT SIZE="4" FACE="Comic Sans,Helvetica, Serif">este texto es de prueba<FONT>
con lo que obtenemos:
este texto es de prueba

NOTA.-El uso de la etiqueta FONT posee muchas ventajas, pero tambin muchos inconvenientes. Entre sus ventajas
se incluyen el que es una etiqueta facil de usar y que se pueden anidar cualquier nmero de ellas, y entre sus defectos
estan el que no nos permite un control total del texto, ya que los tamaos posibles son siempre relativos y por lo
tanto dependen de la resolucin del ordenador del usuario y del tamao de fuente que tenga este configurado como
estandar.Por todo esto el W3C recomienda que evitemos su uso, decantandose para el formateo del texto por las
Hojas de Estilo en Cascada.
Los tamaos de fuentes definidos mediante la etiqueta <FONT SIZE="n"> tienen validez para todos los elementos
de texto del documento, pero no tendran validez global en las tablas, por lo que deberemos definir en cada una de las
celdas el tamao de fuente deseado para el texto incluido en ella.
Comentarios.Siempre que escribamos cdigo HTML, y al igual que pasa en otros lenguajes de programacin (Atencin, pregunta:
Es actualmente el HTML un lenguaje de programacin?), es siempre til y yo dira que hasta obligatorio la
introduccin de lneas de texto que expliquen o comenten qu es lo que estamos haciendo en cada momento, no slo
por claridad en el cdigo, si no porque si en un tiempo futuro deseamos retocar el cdigo necesitaremos saber
porqu escribimos unas etiquetas u otras.
Para poder conseguir esto necesitamos poder escribir lneas de texto que aparezcan en el cdigo pero que luego no
sean visibles en el navegador, es decir debemos usar comentarios, que en HTML se consiguen mediante el par de
etiquetas . Todo el texto incluido entre ellas sera considerado como un comentario por el navegador, por lo
que no lo mostrara en pantalla. Ejemplo:

Estas etiquetas tambin nos pueden servir para ocultar cdigo no soportado por el navegador, como es el caso de
cdigo JavaScript, VBScript, Hojas de estilo, etc.
FORMATEO DE TEXTO MEDIANTE HOJAS DE ESTILOS EN CASCADA
Con la aparicin y puesta en uso de las Hojas de Estilos en Cascada (CSS) disponemos de una
herramienta potente y versatil para trabajar con textos en HTML, hasta el punto que el W3C recomienda
constantemente su uso, llegando al extremo de desaconsejar gran parte de las etiquetas estandar de HTMl en favor
de las Hojas de Estilos.
Mediante esta tcnica, perfectamente implementada en Internet Explorer 4 y superiores y en Nestcape
Navigator 6x, y parcialmente en Nestcape Navigator 4x, podemos tener un control casi total sobre el texto de nuestro
documento, mediante unas sencillas reglas de construccin y uso, que simplifican notablemente nuestro trabajo.
No es el objetivo de este captulo un estudio exaustivo del estandar CSS, que ya va por su versin 2, si no
el estudio de cmo podemos formatear el texto en HTML, por lo que vamos a ver slo aquellas partes de CSS que
nos facilitan esta tarea.
Uso general de las Hojas de Estilos.La misin basica de las Hojas de Estilos es definir bloques o porciones de texto en nuestra pgina que van a tener
unas propiedades de estilo de texto determinadas. Mediante el uso de la sintaxis propia de CSS podemos establecer o
fijar cada una de las propiedades de formato que debe tener cada una de estas porciones de texto.
La asignacin de un determinado estilo se puede hacer de diversas formas:
1. En lnea: consiste en establecer dentro de la etiqueta definitoria del bloque una serie de caractersticas de
estilo, que afectaran a todo el texto comprendido en el bloque. Esto se consigue con el uso del atributo
STYLE, que posee a su vez una serie de sub-atributos y parametros, cada uno de los cuales se encarga de
definir una propiedad del estilo del texto. Por ejemplo:
2.
3. <P STYLE="font-size:11px; font-family:Verdana;">parrafo con estilo en lnea</P>
4.
5. con lo que todo el texto comprendido entre las etiquetas de parrafo aparecera con un tamao fijo de 11
pixels y con un tipo de letra Verdana, y cuyo resultado es:
parrafo con estilo en lnea

6.
Mediante una clase o identificador: una clase es un conjunto de propiedades de formato agrupadas, a
las que se les da un nombre representativo. Cuando queramos asignar a un bloque de texto las
propiedades de esta clase slamente tenemos que fijar que el bloque pertenece a esa clase, y eso lo
conseguimos con el uso del atributo CLASS. La definicin de las propiedades de estilo de la clase se
hace normalmente bien dentro del HEAD de la pgina, con el uso de la pareja de etiquetas <STYLE
TYPE="text/css">...</STYLE>, e incluyendo dentro de ellas el nombre de la clase que deseamos crear
asociado con los atributos de estilo que deseemos. Por ejemplo:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.cabecera{ font-size:15px; font-family:Verdana; font-weight:bold;}
</STYLE>
</HEAD>
<BODY>
<SPAN CLASS="cabecera">Este texto es de la clase cabecera</SPAN>
</BODY>
</HTML>
que nos da:
Este texto es de la clase cabecera

En este cdigo lo primero que hacemos es definir en la cabeza de nuestra pgina una clase de estilo, dentro de las
etiquetas STYLE, que llamamos cabecera, y que indicamos que es una clase mediante la colocacin de un punto
delante del nombre. Esta clase de estilo la definimos como de texto de tamao 15 pixels, de fuente tipo Verdana y de
peso bold (negrita). Posteriormente, en el cuerpo de la pgina, asignamos a un bloque SPAN esta clase de estilo,
mediante el uso del atributo CLASS, por lo que todo el texto contenido en este bloque se mostrara con las
caractersticas de estilo de la clase cabecera.
10
Otra forma de asignar estilos en la cabeza de la pgina es mediante el uso del atributo ID. En esta forma, definimos,
dentro del HEAD de la pgina y dentro de las etiquetas STYLE, un estilo de formato de texto mediante la sintaxis
#nombre{atributos de estilo}, y luego en el BODY, y mediante el atributo ID="nombre", asignamos a un bloque
el estilo as definido. Por ejemplo:
<HTML>
<HEAD>
#cabecera{ font-size:15px; font-family:Verdana; font-weight:bold;}
</STYLE>
</HEAD>
<BODY>
<DIV ID="cabecera">Este texto es de la clase cabecera</DIV>
</BODY>
</HTML>
que nos da:
Este texto es de la clase cabecera

con lo que obtenemos un resultado en todo analogo al obtenido mediante la definicin de una clase con CLASS,
siendo la nica diferencia entre ellas (aunque muy importante) a nivel conceptual: mientras que una clase puede ser
usada por todos los bloques que deseemos, un identificador ID slo puede ser asignado a un nico bloque, al que a
partir de ese momento podemos referirnos en cualquier momento mediante su nombre identificador. Esto es de
especial importancia a la hora del tratamiento del bloque mediante HTML Dinamico o JavaScript.
Una vez establecidas una serie de clases de estilo o de identificadores de bloque podemos sacar estos fuera de la
cabeza de la pgina y llevarlos a un fichero aparte, externo. Entonces, para poder usar en nuestra pgina los estilos
en l definidos debemos vincularlo a la misma, lo que se consigue introduciendo en la cabeza de nuestra pgina la
instruccin:
<LINK REL="stylesheet" TYPE="text/css" HREF="ruta fichero">
Las ventajas que este uso supone son enormes, ya que mediante su uso podemos establecer en un slo fichero el
estilo general que van a tener todas las pginas que formen nuestro sitio web, con tan slo hacer referencia al fichero
externo al comienzo de cada pgina y asignando luego la clase que deseemos a cada bloque la pgina. Si
posteriormente deseamos cambiar un estilo determinado o parte de l no necesitaremos editar cada una de las
pginas de nuestro sitio, si no que bastara con cambiar el estilo deseado en el fichero de estilos externo.
El fichero de estilos externo debe contener tan slo las definiciones de las clases y de los identificadores, en formato
de texto plano, y se deben guardar con la extensin .css.
Por ejemplo, un fichero de estilos externo, llamado estilos1.css, podra ser:
.celda{fon-size:10px;font-family:Helvetica;}
#ejemplo1{margin-left:20pt;color:red;}
Si observamos la sintaxis que hemos usado para vincular un fichero de estilos externo o para definir los estilos en
cabeza de pgina mediante las etiquetas STYLE, vemos que aparecen una serie de atributos hasta ahora
desconocidos. Su significado es:
REL="stylesheet", indica que nos estamos refiriendo a un fichero de Hojas de Estilo.
TYPE="text/css", indica que el lenguaje empleado para definir estilos va a ser el CSS. Esto es as
porque tambin podemos definir estilos mediante JavaScript, siendo la sintaxis de ambos mtodos muy
parecida, aunque no es conveniente usar este ltimo tipo, ya que slo es soportado bien por Nestcape
Navigator 4x y superiores.
HREF="ruta del fichero", que sirve para indicar al navegador dnde se encuentra el fichero de estilos
externo. La ruta puede ser relativa a la estructura de carpetas local del servidor o disco local, o puede ser
absoluta, en cuyo caso deberemos especificar el URL completo donde se encuentra el fichero.
NOTA.- El tema de los ficheros de estilo externos es especialmente delicado en Nestcape Navigator 4x, ya que si
establecemos una ruta equivocada o el fichero de estilos asignado no existe normalmente este navegador se queda
"colgado" y no acaba de cargar la pgina web.
Unidades en CSS.A la hora de trabajar con atributos de estilo vamos a tener que estar usando constantemente unidades de medida. Las
unidades pueden ser:
relativas, son aquellas que van a depender de la resolucin de la pantalla del ordenador del usuario o del
tipo de letra que usemos en la pgina. A este tipo de unidades pertenecen em (anchura o altura de la M
mayscula) y ex (altura de la letra x).
absolutas:, que son aquellas unidades de medida que no dependen ni de la resolucin cliente ni del tipo
de fuente personalizada en el navegador. A este tipo pertenecen los puntos tipograficos, pt, los pixels, px,
las picas, pc, las pulgadas, in, los milmetros, mm, y los centmetros, cm.
Cuando conviene usar un tipo u otro de unidades?.
En general, el uso de unidades relativas esta aconsejado cuando en nuestra pgina dispongamos de espacio mas que
suficiente para presentar los datos, sin miedo a que por ejemplo los datos de una tabla se descoloquen al aumentar el
tamao de la fuente, cuando deseemos crear una pgina accesible por usuarios con problemas de visin, ya que estos
pueden tener configurado el tamao de las fuentes del navegador grande, etc.
Por el contrario, conviene usar unidades absolutas cuando deseemos tener un control total de la presentacin final de
nuestra pgina, ya que con este tipo de unidades nunca nos veremos ante situaciones imprevistas o condicionadas.
En el prximo captulo vamos a ver los principales atributos de estilo con CSS.
PRINCIPALES ATRIBUTOS DE ESTILOS DE TEXTO EN CSS.Vamos a estudiar ahora los atributos de estilo de texto de CSS mas usados, y para ello los vamos a dividir en
apartados, correspondiendo cada uno de ellos a una propiedad diferente. Asmismo, vamos a ir utilizando
variadamente tanto la definicin de estilos en lnea como en cabecera mediante clases o identificadores.
La sintaxis general de los atributos para estilos en lnea es la siguiente:
<P STYLE="atributo_1:valor; atributo_2:valor;...;atributo_n:valor">
para estilos definidos en una clase es:
.nombre_clase{atributo_1:valor; atributo_2:valor;...;atributo_n:valor}
y por ltimo, para estilos asignados mediante un identificador:
#nombre_identificador{atributo_1:valor; atributo_2:valor;...;atributo_n:valor}
Margenes de bloque.Mediante Hojas de Estilos podemos establecer los margenes que va a tener cada uno de los bloques de texto de
nuestra pgina, entendiendo por margen el espacio existente entre el bloque y el borde correspondiente de la pantalla
activa del navegador. As, el margen izquierdo sera la distancia entre el lado izquierdo del bloque y el borde
izquierdo de la pantalla del navegador.
Los atributos CSS que fijan estos espacios son:
margin-left:valor-unidad
(margen izquierdo)
margin-top:valor-unidad
(margen superior)
margin-right:valor-unidad
(margen derecho)
margin-bottom:valor-unidad
(margen inferior)
margin:valor-unidad
(conjunto de todos los margenes)
Ejemplo:
<P STYLE="margin-left:100px;">parrafo con margen izquierdo<P>
que nos da:
parrafo con margen izquierdo
Espaciado interno.El espaciado interno o "acolchado" (padding en ingls) fija la distancia que va a haber entre el bloque y el texto
(imagenes, tablas,etc.) que contiene. Para definirlo se utilizan los atributos:
padding-left:valor-unidad
(espaciado izquierdo)
padding-top:valor-unidad
(espaciado superior)
padding-right:valor-unidad
(espaciado derecho)
padding-bottom:valor-unidad
(espaciado inferior)
padding:valor-unidad
(espaciado del conjunto de todos)
Ejemplo:
<HTML>
<HEAD>
11
.bloque{ padding-left:50px;}
</STYLE>
</HEAD>
<BODY>
<SPAN CLASS="bloque">parrafo con acolchado izquierdo</SPAN>
</BODY>
</HTML>
que nos da:
parrafo con acolchado izquierdo
Color de los bordes.Como complemento a los bordes de un bloque, tambis podemos mediante CSS asignar un color determinado a uno
de los bordes de un bloque o a todos ellos, mediante los atributos:
border-left-color:color
(borde izquierdo)
border-right-color:color
(borde superior)
border-top-color:color
(borde derecho)
border-bottom-color:color
(borde inferior)
(conjunto de todos los
border-color:color
bordes)
donde el parametro color puede venir expresado mediante el nombre ingls web estandar o mediante su valor
hexadecimal.
As pus, mediante el grupo de atributos de borde podemos configurar de formas muy diferentes los bordes de cada
uno de nuestros bloques, con lo que podemos conseguir diferentes efectos muy tiles. Veamos algunos ejemplos:
</TR>
</TABLE>
</BODY>
</HTML>
que nos da:
celda primera
celda segunda
Tipo de fuente.Analogamente el tamao de las fuentes, podemos tambin mediante CSS fijar el tipo de fuente de cada una de las
partes de nuestra pgina, mediante el atributo font-family:familia. El parametro family puede ser cualquiera de las
fuentes estandar que poseen los ordenadores, al igual que suceda con el atributo <FONT FACE="familia"> Un
ejemplo de su uso es el siguiente:
<P STYLE="font-size:14px;font-family:Comic Sans MS,Verdana;">texto divertido</P>
que nos da:
texto divertido
donde vemos que podemos establecer mas de una familia de fuente para una clase determinada, separadas por
comas; si la primera familia establecida no se encuentra instalada en el ordenador del usuario se tomara la siguiente,
y as sucesivamente. Si no se encuentra instalada ninguna de las familias establecidas en la clase, el navegador
presentara el texto en la fuenta por defecto del ordenador. Para evitar este factor es conveniente siempre establecer
en la lista una de las fuentes que suelen tener instaladas por defecto los ordenadores, como son Verdana para PC's y
Helvetica para Mac.
Color del texto.-
Ejemplo nmero 1
Podemos asignar a nuestros textos practicamente el color que deseemos mediante el atributo color:color, donde
color puede venir expresado mediante el nombre estandar en ingls o mediante su valor hexadecimal. Por ejemplo:
<P STYLE="font-size:14px;font-family:Arial, Serif;color:blue;">texto con color</P>
que nos da:
<span style="border-width:2mm;border-style:double;border-color:#003366;">Ejemplo nmero 1</span>
texto con color
<span style="border-width:4px;border-style:solid;border-color:red;">Ejemplo nmero 1</span>
Ejemplo nmero 2
<span style="border-width:medium;border-style:inset;border-color:Yellow;">Ejemplo nmero 1</span>
Ejemplo nmero 3
Tamao de la fuente.CSS tambin posee unos atributos propios que nos van a permitir definir con toda exactitud el tamao de las fuentes
del texto contenido en un bloque, celda de tabla, lista, elementos de formulario, etc. Para ello contamos con el
atributo font-size:valor-unidad, donde unidad puede ser cualquiera de las unidades absolutas o relativas estudiadas
antes. La sintaxis de uso en el caso de la celda de una tabla es del tipo:
<HTML>
<HEAD>
.celda1{font-size:12px;}
.celda2{font-size:16px;}
</STYLE>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD CLASS="celda1" WIDTH="200">celda primera</TD>
<TD CLASS="celda2" WIDTH="200">celda segunda</TD>
Peso de la fuente.Otro de los elementos para formatear nuestros textos es el peso que va a tener este, es decir la cantidad de "negrita"
con que se va a presentar en pantalla o impresora, factor que esta relacionado directamente con la importancia
relativa que va a tener una porcin de texto respecto al conjunto del mismo.
En CSS disponemos de un atributo que nos va a permitir asignar diferentes grados de peso a un texto; este atributo
es font-weight:peso, donde el peso puede estar definido mediante un nmero, que pude ir de 100 (menor peso) a
900 (peso maximo), o mediante uno de los valores lighter, normal (valor por defecto), bold o bolder. Los
resultados de cada uno de estos pesos es el que se puede apreciar a continuacin:
font-weight:100
peso 100
font-weight:200
peso 200
font-weight:300
peso 300
font-weight:400
peso 400
(conjunto de todos los
font-weight:500
bordes)
font-weight:600
peso 600
font-weight:700
peso 700
font-weight:800
peso 800
font-weight:900
peso 900
font-weight:lighter
peso lighter
font-weight:normal
peso normal
font-weight:bold
peso bold
font-weight:bolder
peso bolder
12
donde vemos que si asignamos valores numricos los resultados no corresponden a una escala progresiva, ya que
hay valores que no afectan al resultado final, otros que originan el mismo resultado. El efecto total suele depender
del navegador y el tipo de fuente usado, pus si el tamao de la fuente lo vamos reduciendo llega un momento en
que no admite un peso bold, ya que entonces el texto en pantalla sera borroso, e igualmente se puede apreciar que
hay familias de fuentes a las que afecta de forma diferente un mismo peso. Como en todo, el resultado ptimo se
obtiene realizando pruebas, siendo la experiencia un factor determinante.
Estilo de la fuente.Otro atributo CSS que nos ayuda a dar formato a nuestros textos es el que fija el estilo que va a tener este, cosa que
se consigue mediante el atributo font-style:normal / italic, siedo el valor por defecto el correspondiente a una
fuente normal. El resultado obtenido con el valor italic muestra el texto afectado en italica, y se corresponde con el
obtenido en HTML con la etiqueta <I>...</I>.
Ejemplo:
<P STYLE="font-style:italic;">este texto esta en italica</P>
que nos da:
este texto esta en italica
Interlineado.Mediante CSS podemos fijar el interlineado de nuestro texto, es decir, la distancia vertical que va a haber entre dos
lneas consecutivas de texto. El atributo correspondiente es line-height:valor, donde valor puede venir expresado
como un mmero, una longitud, un porcentaje o mediante la palabra normal, que es valor por defecto, y que depende
del navegador, de la resolucin y del tamao por defecto de la fuente que usemos. El efecto que se consigue lo
podemos apreciar en el siguiente ejemplo:
<P STYLE="line-height:50px;">ejemplo de parrafo en el que el texto <BR>esta interlineado 50 pixels.</P>
que nos da:
El atributo de CSS que nos permite aplicar una transformacin a nuestro texto es text-transform:none / capitalize /
uppercase / lowercase, que corresponden respectivamente a un texto normal ( valor por defecto), texto con la
primera letra en mayscula, texto en maysculas y texto en minsculas, y que podemos apreciar en los siguientes
ejemplos:
<span style="text-transform:capitalize;">la primera en maysculas</span>
la primera en maysculas
<span style="text-transform:uppercase;">texto en maysculas</span>
TEXTO EN MAYSCULAS
<span style="text-transform:lowercase;">TEXTO EN MINSCULAS</span>
TEXTO EN MINSCULAS
Alineamiento del texto.Para alinear el texto mediante CSS disponemos del atributo text-align:left / center / right / justify, que
corresponden a una alineacin a la izquierda (valor por defecto), centrado, a la derecha o justificado, y cuyo
resultado es el siguiente:
<p style="width:745px;text-align:left;">texto a la izquierda</p>
texto a la izquierda
<p style="width:745px;text-align:center;">texto centrado</p>
texto centrado
<p style="width:745px;text-align:right;">texto a la derecha</p>
texto a la derecha
Indentacin del texto.Igualmente podemos fijar la indentacin de nuestro texto, usando el atributo text-indent:valor, donde el valor puede
venir expresado mediante una pareja cantidad-unidad o mediante un valor porcentual del ancho de la pantalla visible
del navegador. Ejemplos de la aplicacin de este atributo son los que siguen:
<p style="text-indent:25px;">texto indentado 25 pixels</p>
texto indentado 25 pixels
<p style="text-indent:30%;">texto indentado el 30%</p>
ejemplo de parrafo en el que el texto

texto indentado el 30%
esta interlineado 50 pixels.
Enlaces en HTML
Espacio entre letras.Tambin podemos con CSS establecer el espaciado que va a haber entre cada una de las letras de nuestro texto,
mediante el atributo letter-spacing:medida/unidad. Por ejemplo:
<P STYLE="letter-spacing:10px">texto con espaciado entre letras<P>
que nos da:
t
e
x
Decoracin del texto.Tambin es posible mediante CSS asignar un tipo de decoracin a nuestros textos mediante el uso del atributo textdecoration:none / underline / overline / line-through / blink, que corresponden respectivamente a un texto normal
(valor por defecto), subrayado, con rayado superior, tachado o parpadeante (slo en Nestcape Navigator). El caso
text-decoration:none es especialmente til cuando queremos que los links de nuestra pgina no aparezcan con el
subrayado tpico de estos elementos. El resultado de aplicar cada uno de estos valores lo podemos ver a
continuacin.
<a href="index.html" style="text-decoration:none;">pgina principal</a>
pgina principal
<span style="text-decoration:underline">texto subrayado</span>
texto subrayado
<span style="text-decoration:overline">texto con rayado superior</span>
texto con rayado superior
<span style="text-decoration:line-through">texto tachado</span>
texto tachado
<span style="text-decoration:blink">texto parpadeante</span>
texto parpadeante
Transformacin del texto.-
LA ETIQUETA ANCHOR- PROPIEDADES (I).La base de todo nuestro manual va a ser la etiqueta Anchor, definida en HTML mediante la siguiente sintaxis:
<A propiedad="valor" propiedad="valor"...>hiperenlace</A>
y que pose las siguientes propiedades:
* HREF="ruta"
Que define el nombre del anclaje o la ruta URL ( o la URI) del documento con el que va a conectarnos el
hiperenlace.
En el caso de un documento, ste normalmente ser otra pgina web, pero puede ser cualquier otro tipo de
documento: imgenes, documentos de texto, de Word, hojas de clculo, ficheros JavaScript, CSS, etc. Si tenemos
nuestro navegador configurado para abrir el tipo de documento solicitado en el hiperenlace, se abrir en la propia
ventana de ste, y si no es as, se nos abrir un cuadro de dialogo para que permitamos abrirlo con el programa
asociado al fichero o guardarlo en nuestro disco duro.
Las nicas restricciones que tenemos respecto a los valores que puede tomar esta propiedad es que la URI o URL del
fichero enlazado tenga una sintaxis correcta y que el documento exista en el servidor web. Si no es as, obtendremos
el conocido ERROR 404, que corresponde a un documento no encontrado.
Vamos a ver unos ejemplos. Si el documento se abre en sta misma pgina, usad el botn Back de la barra de
navegacin para volver aqu.
Ejemplo de enlace a otar pgina de ste servidor:
<a href="enlaces_1.html">primera pgina</a>
que nos da:
primera pgina
13
Ejemplo de enlace a un fichero grfico:

<a href="../../images/logo.gif>logo deHTMLWeb
logo de HTMLWeb
que como vis se abre normalmente en el mismo navegador, al soler estar estos configurados por defecto para abrir
los ficheros grficos aceptados.
Ejemplo de enlace a fichero CSS:
<a href="../../css/general.css">estilos para Intenet Explorer</a>
estilos para Intenet Explorer
* TARGET="nombre"
Esta propiedad va a fijar la ventana en la que se va a abrir el documento solicitado en el hiperenlace (siempre que
sea un fichero que pueda abrir el propio navegador). Si imaginamos que trabajamos en una pgina con frames, los
posibles valores que puede tomar el atributo nombre son:
1) nombre_ventana: que es el valor del atributo name que le hayamos dado en una pgina de frameset a un frame o
a una ventana flotante en la que queramos que se abra el documento.
2) _self: representa al propio frame o ventana en que se encuentra el enlace, y es el valor por defecto. El documento
solicitado se cargar en la pgina actual, reemplazando a la que lo ha solicitado.
3) _parent: representa al frame padre del que contiene la pgina con el enlace, es decir, al que se encuentra
inmediatamente por encima del actual en la jerarqua de frames de la pgina.
4) _top: que representa al frame padre de todos los de la ventana del navegador, con lo que el documento solicitado
se cargar en la pantalla actual, ocupando toda la ventana y destruyendo la estructura de frames anterior.
5) _blank: que representa a una pantalla en blanco, por lo que el documento se abrir en una nueva ventana del
navegador.
* NAME="nombre"
Que fija un nombre identificador nico para el enlace.
Es sta una propiedad muy importante, ya que por un lado va a ser la referencia de llamada en el caso de que usemos
anclajes en una pgina, y por otro es el identificador mediante el cual podremos acceder dinmicamente a las
propiedades del enlace mediante lenguajes como JavaScript.
La nica limitacin que tendremos a la hora de elegir un nombre ser la propia del lenguaje de script que usemos.
As, si vamos a acceder luego al link mediante JavaScript, que ser lo ms normal, el nombre no puede empezar por
un caracter numrico, por un smbolo extrao ni por un caracter que no pertenezca al conjunto de caracteres
anglosajn (una , por ejemplo).
Como ejemplo, y aunque sea meternos un poco en JavaScript, vamos a ver cmo podemos acceder mediante el
nombre a un link y leer su propiedad href:
<script language="JavaScript">
function nombre()
{
var referencia=document.links('miEnlace').href;
alert(referencia);
}
</script>
<a name="miEnlace" href="enlaces_1.html" onClick="nombre();return false">pgina 1</a>
* ID="nombre"
Podemos acceder a las propiedades de un enlace considerandolo como pertenecienta al objeto links de JavaScript
por su nombre asignado mediante NAME, y podemos acceder a esas mismas propiedades si lo consideramos un
objeto de la coleccin all o getElementById mediante su nombre asignado con ID.
Podemos asociar a un enlace, usando CSS, un estilo propio de fuente, color, tamao, etc., mediante la asignacin de
los estilos al nombre definido en ID precedido de una smbolo almohadilla:
#nombre{font-size:12px; color:red;.....}
* CLASS="clase"
El atributo CLASS sirve para asignar una clase de estilos CSS al texto contenido dentro del enlace. La diferencia
fundamental entre este atributo e ID es que mediante CLASS podemos asignar al enlace una clase de estilos
compartida con otros elementos de la pgina, no siendo necesario pus que el nombre de la clase sea nico. Ejemplo:
<STYLE type=text/css>
.azul{font-size:18px;font-family:Comic Sans MS;color:#000080;}
</STYLE>
<a class="azul" href="enlaces_1.html">pgina 1</a>
que nos da:
Mi enlace
* STYLE="propiedad:valor;propiedad:valor;...."
Esta propiedad permite establecer un estilo en lnea para un enlace, mediante las parejas propiedad-valor
caractersticas de CSS. Podemos as fijar la familia de fuente en que va a aparecer el texto del enlace, el tamao de la
fuente, el color, etc.
Tiene una utillidad parecida a la de la propiedad CLASS, diferencindose de sta en que mediante STYLE
deberemos establecer las propiedades CSS cada vez que la usemos.
Ejemplo:
<a href="pagina.html" style="font-size:18px;color:#993300;">enlace</a>
que nos da:
enlace
* TITLE="cadena"
Mediante esta propiedad podemos fijar un texto descriptivo del destino del enlace o de la funcionalidad del mismo,
que aparecer cuando el puntero del ratn se pocicione sobre el enlace, en forma del conocido "tip" o bocadillo
explicativo, comn a diferentes aplicaciones. El mensaje a mostrar quedar definido mediante el valor "cadena".
Ejemplo:
<a href="#" title="si pinchas saldra una ventana flotante" onClick="alert('te lo dije');return false">enlace</a>
que nos da:
enlace
* TABINDEX="n"
Mediante sta propiedad podemos determinar la secuencia de focos que se va a producir cuando se pulse
repetidamente la tecla tabulador, es decir, dnde se va a ir el foco (y por lo tanto, qu elemento se va a poder activar)
trs pulsar sobre el tabulador. El orden de cada enlace en la secuencia viene dado por el nmero entero "n", por lo
que para que funcione bien esta propiedad no podremos repetir este valor en dos enlaces diferentes.
Es especialmente til su uso en los enlaces para permitir la navegacin en un men mediante el tabulador. Una vez
recibido el foco el enlace deseado, basta pulsar ENTER para acceder al destino del enlace.
Ejemplo:
<a href="pagina_1.html" tabindex="1">enlace 1</a><br><br>
y podis ver su efecto si pinchis sobre el enlace 1 y luego pulsis dos veces la tecla del tabulador:
enlace 1
enlace 2
enlace 3
Es una propiedad que bien usada puede favorecer notablemente la accesibilidad de nuestras pginas, al ser aplicable
tambin a otros elementos HTML, como elementos de un formulario, con lo que podemos establecer una navegacin
en nuestra pgina mediante teclado slamente.
Como pega, decir que no est implementada por Nestcape Navigator 4x.
USO DE LA ETIQUETA <A>.La pareja de etiquetas <A...>...</A> se suele usar principalmente introduciendo dentro de ellas un texto o una
imagen, que van a ser el elemento identificador de dnde va a llevar el enlace.
* En el caso de un texto, la sintaxis es muy simple:
14
<A HREF="ruta_pagina" PROPIEDAD="valor".....>texto del enlace</A>

Ejemplo:
<a href="http://www.yahoo.es" target="_blank">Yahoo</a>
que nos da:
Yahoo
* Y en el caso de una imagen, lo mismo, salvo que ahora la propia etiqueta <IMG> pose unas propiedades
particulares que podemos establecer para controlar su presentacin:
<a href="http://www.yahoo.es" target="_blank"><img src="images/yahoo.gif" width="66" height="20"></a>
Para ms informacin sobre la etiqueta <IMG> y sus propiedades podis consultar el manual de imgenes en HTMl
dentro de sta misma seccin de HTMLWeb.
Fijaros como al usar un texto como enlace ste aparece de color azul y subrayado, y en el caso de una imagen, sta
aparece con un borde azul alrededor. Cuando se ha visitado el enlace, el color azul pasa a ser morado claro. Esto es
siempre as, por defecto, pero se puede cambiar de tal forma que es posible configurar los enlaces para que
aparezcan con la apariencia que deseemos. El caso de los textos lo veremos en un captulo posterior, pero en el caso
de las imgenes, para quitarles el borde azul basta con aadir a la etiqueta <IMG> su propiedad BORDER igualada a
cero.
Ejemplo:
<a href="http://www.yahoo.es" target="_blank"><img src="images/yahoo.gif" width="66" height="20"
border="0"></a>
que nos da:
Bueno, ya sabemos cmo debemos establecer los enlaces en nuestra pgina. Vamos a ver ahora los tipos de enlaces
existentes segn el destino al que nos lleven.
TIPOS DE ENLACES
Podemos clasificar los links segn el destino al que nos lleven al pinchar sobre ellos, clasificacin que adems sigue
el proceso histrico de la etiqueta <A>, tal como explicamos someramente el el captulo introductorio de este
manual. De acuerdo pus con este concepto podemos estudiar:
* ENLACES DENTRO DE UNA MISMA PGINA:

Podemos usar la etiqueta <A> para implementar enlaces que nos lleven a diferentes partes o secciones de la pgina
en que estn incluidos, pudiendo con ellos navegar dentro de una pgina. Este tipo de enlaces recibe el nombre
genrico de anchors o anclas, y para establecerlos necesitamos crear dos elementos diferentes.
Por un lado, necesitamos fijar el punto de la pgina donde va a ir el enlace, cosa que conseguimos escribiendo en ese
punto la siguiente etiqueta:
<A NAME="nombre_anclaje">texto/imagen_de_referencia</A>
Y por otro lado, necesitamos crear el texto o imagen que nos va a llevar al punto definido anteriormente, lo que
conseguimos mediante el cdigo:
<A HREF="#nombre_anclaje">texto_explicativo</A>
OJO: Noten la almohadilla (#) justo antes del nombre del anclaje. Hay que ponerla siempre en este tipo de enlaces.
Una consideracin: si fijamos un anclaje introduciendo dentro de las etiquetas <A>...</A> un texto o imagen de
referencia, estos presentarn el aspecto normal de un enlace (azul subrayado, con borde, etc), cosa que no nos puede
interesar por chocar con el diseo de la pgina. Incluso puede ser que no deseemos que aparezca ningn elemento
diferenciador visible en el punto de anclaje. Esto se resuelve fcilmente, ya que podemos escribir la pareja de
etiquetas de enlace sin ningn elemento en su interior, de la forma:
<A NAME="nombre_anclaje"></A>
Vamos a ver un ejemplo. Establecemos en esta pgina un anclaje en el inicio de la misma, justo al lado del ttulo del
captulo, y lo hacemos mediante una pareja de etiquetas sin contenido de referencia interior, para que el usuario no
vea nada que le indique de antemano que ah hay un anclaje. El cdigo a usar ser:
<a name="inicio"></a>
Tipos de enlaces.Y ahora, en el punto en que nos encontramos de la pgina, introducimos el enlace que nos lleva al anclaje, mediante:
<a href="#inicio">Ir al inicio</a>
* Enlaces a otra pgina de nuestro sitio web:

Aunque los anclajes pueden ayudarnos a navegar por una pgina, necesitamos tambin crear enlaces que nos
permitan acceder a otras pginas de nuestro sitio web, para poder as navegar entre ellas. En este caso no hace falta
establecer un anclaje de referencia, bastando con usar las etiquetas de un enlace simple:
<A HREF="ruta_pagina" .....>texto_descriptivo</A>
donde ruta_pagina es la ruta local de acceso a la pgina segn la estructura de directorios del servidor.
Normalmente tendremos estructurado nuestro sitio web en una serie de carpetas: una o varias para las pginas web,
una para las imgenes, otra para los ficheros JavaScript, etc.
Si la pgina a la que queremos acceder se encuentra en la misma carpeta que la que hace la llamada ( en la que
estamos situando el enlace), bastar con poner su nombre completo directamente como ruta:
<a href="enlaces_5.html" target="_blanck">pgina anterior</a>
que no da:
pgina anterior
Si la pgina se encuentra en una subcarpeta de la que contiene a la actual, la forma de acceso ser
HREF="subcarpeta/pagina". Como ejemplo, mirad primero en la siguiente imagen mi estructura de directorios local:
En este entorno, si esta pgina est en la carpeta "enlaces" y quiero llamar a una pgina que est dentro de la
subcarpeta "ejemplos", el cdigo a emplear ser:
<a href="ejemplos/ejemplo_1.html" target="_blank">ejemplo 1</a>
que nos da:
ejemplo 1
Si la pgina a enlazar se encuentra en una carpeta a un nivel superior en la jerarqua del sitio, el enlace ser del tipo:
<A HREF="../carpeta/pagina.html">pagina 1</A>
etc, etc. Deberemos usar un conjunto de caracteres "../" por cada nivel que queramos subir en la jerarqua de
carpetas. Normalmente, si usis un editor HTML como Homesite, FrontPage o Dreamweaver, cuando establezcis
un enlace a otra de vuestras pginas l se encargar de poneros la ruta correcta.
* ENLACES A UN ANCLAJE DENTRO DE OTRA PGINA DE TU SITIO:

La dos formas anteriores de establecer un enlace podemos combinarlas en el caso de que queramos enlazar una de
las pginas de nuestro sitio web con otra del mismo, pero que la pgina nueva se cargue directamente mostrando el
contenido a partir de una anclaje en la misma. El cdigo a usar en ste caso es del tipo:
<A HREF="pagina.html#nombre_anclaje">texto_explicativo</A>
OJO: Noten la almohadilla (#) justo antes del nombre del anclaje. Hay que ponerla siempre en este tipo de enlaces.
Como ejemplo, el siguiente enlace va a abrir una nueva ventana del navegador y va a cargar la pgina en un anclaje
situado en la mitad de la misma. En la pgina que se va a abrir deberemos estableces el ancla, y para ello
escribiremos:
<a name="#ancla1"></a>
Y en esta pgina ponemos el enlace:
<a href="ejemplos/ejemplo_2.html#ancla1" target="_blank">ejemplo 2</a>
y su resultado lo tenis aqu:
ejemplo 2
Vis que el enlace es un hbrido de los dos tipos anteriores, en el que ponemos un enlace normal y despus del
nombre de la pgina a enlazar situamos la almohadilla y el nombre del ancla.
* ENLACES A UNA PGINA WEB DE OTRO SERVIDOR:

15
Por ltimo, vamos a ver cmo se establecen enlaces a otras pginas en Internet, que normalmente estarn en un
servidor muy lejano al nuestro.
La forma de escribir el link en este caso en del todo anloga al del una pgina de nuestro sitio, salvo que ahora
ruta_pagina ser una direccin URL completa, del tipo:
<A href="http://www.servidor.com/carpeta/pagina.html">
Como ejemplo, vamos a abrir una ventana nueva con la pgina de Yahoo Espaa:
<a href="http://www.yahoo.es" target="_blank">Yahoo</a>
que nos da:
Yahoo
En este caso no hemos puesto en la URL ni carpeta ni pgina alguna porque el enlace est creado a la pgina
principal de Yahoo (index.html, index.html, etc), que se carga por defecto.
Si queremos acceder al directorio de Literatura de Yahoo, ahora s tendremos que poner una URL del tipo general:
<a href="http://es.dir.yahoo.com/Arte_y_cultura/Literatura/" target="_blank">Yahoo Literatura</a>
que da:
Yahoo Literatura
Como ejemplo final, vamos a enlazar ahora con la pgina principal de HTML de ste mismo sitio web, pero
mediante su URL completa:
<a href="http://www.terra.es/personal6/morenocerro2/manual/html.html" target="_blank">Seccin de HTML</a>
y ste es su resultado:
Seccin de HTML
* OTROS TIPOS DE ENLACES:

Slo deciros como complemento que as es cmo podemos facilitar la descarga de ficheros ZIP, de imgenes, de
documentos PDF, etc. Si el usuario tiene configurado su navegador para ejecutar ese tipo de ficheros o tiene
instalado el plugin que se necesite, el fichero se mostrar en la propia ventana del navegador. Si no es as, se le
presentar una ventana de aviso en la que se le pregunta si desea ejecutar el fichero con el programa asociado o si
por el contrario desa guardarlo en su disco duro. El siguiente ejemplo permite descargar un fichero ZIP:
<a href="ejemplos/ejemplo.zip">ejemplo ZIP</a>
ejemplo ZIP
Otro tema importante es que podemos usar enlaces usando otros protocolos HTTP, como FTP, GOPHER, etc. Los
protocolos soportados por los enlaces son:
servicio descripcin
Ejemplo
efecto
http://
Servicios
WWW
<A rEF.="http://www.yahoo.es/"> Yahoo</A>
Yahoo
ftp://
Servicios FTP
<A
FTP
HREF="ftp://ftp.is.co.za/simtelnet/msdos/gif/cg89a.gif">FTP</A>
gopher://
Servicios
GOPHER
<A HREF="gopher://gopher.uv.es/">GOPHER </A>
GOPHER
news://
Servicios
NEWS
<A HREF="news://news.uv.es/">NEWS</A>
NEWS
mailto://
Servicios
mail
file:///C| Fichero local
E<A HREF="mailto:morenocerro2@terra.es/">E-mail</A>
<A HREF="ejemplos/ejemplo_1.html">Fichero</A>
E-mail
Fichero
Como vis, es posible acceder a casi cualquier servicio de Internet por medio de un enlace.
Es especialmente til el que se usa para correo electrnico, implementado por medio de la instruccin:
mailto:usuario@servidor.extension"
Con esto, se abrir el programa de correo que el usuario tenga instalado, y aparecer rellano ya el campo
correspondiente al destinatario. Si adems queremos que aparezca relleno el campo "asunto", basta con aadir lo
siguiente:
mailto:usuario@servidor.extension?subjet=loquesea
Por ejemplo, si pulsis en siguiente enlace me mandaris a m un correo con el asunto "saludos":
<a href="mailto:morenocerro2@terra.es?subject=saludos">saldame</a>
Y anlogamente es posible especificar si enviamos el mensaje con copia y a quin:

mailto:usuario@servidor.extension?subjet=loquesea&CC=nombre
EVENTOS
Vamos a ver ahora una de las partes ms importantes sobre la etiqueta <A>, y es la correspondiente a los eventos que
soporta.
La importancia de este aspecto se basa en que los links son verdaderos "disparadores" de eventos, ya que soportan
casi todos los tipos de ellos que existen en HTML, permitindonos entonces extender la captura de determinados
eventos a otros elementos HTML que no los soportan bien o por completo. Vamos a ver primero qu eventos
podemos manejar con esta etiqueta y luego explicamos esto con ms detalle. Para mostrar ejemplos vamos a usar el
mtodo de JavaScript alert, que lanza una ventana con un mensaje.
Los principales eventos soportados por la etiqueta <A> son:
* Eventos de ratn:
- onmouseOver, que salta cuando se pasa el puntero del ratn sobre un enlace:
<a href="#" onmouseOver="alert('Evento MOUSEOVER')">onmouseOver</a>
- onmouseOut , que salta cuando, trs pasar el puntero del ratn por el enlace, nos vamos de l.
<a href="#" onmouseOut="alert('Evento MOUSEOUT')">onmouseOut</a>
- onmouseDown, que salta cuando pulsamos sobre el enlace con el puntero del ratn, sin necesidad de despulsar. Es
decir, salta con el slo hecho de bajar el botn izquierdo o derecho del ratn sobre el enlace:
<a href="#" onmouseDown="alert('Evento MOUSEDOWN')">onmouseDown</a>
- onmouseUp, que salta cuando, trs haber pulsado con uno de los botones del ratn sobre el enlace, dejamos libre
ese botn del ratn, sin necesidad de sacar el puntero del enlace:
<a href="#" onmouseUp="alert('Evento MOUSEUP)">onmouseUp</a>
- onmouseMove, que salta cuando movemos el puntero del ratn sobre el texto o imagen del enlace. No voy a usar
ahora el mtodo alert, ya que si as lo hiciera saltara el la ventana constantemente. Deciros que mediante este evento
podemos por ejemplo capturar las coordenadas del puntero del ratn (podis ver varios ejemplos en la seccin
WebScript). Un ejemlpo de sintaxis sera:
<a href="#" onmouseMove="funcion()">onmouseMove</a>
- onClick, que salta cuando se pincha sobre el enlace con el botn izquierdo del ratn :
<a href="#" onClick="alert('Evento CLICK)">onClick</a>
- onDblclick, que salta cuando se hace doble click sobre el enlace con el botn izquierdo del ratn :
<a href="#" onDblclick="alert('Evento DBLCLICK)">onDblclick</a>
* Eventos de teclado:
- onKeydown, que salta cuando, teniendo el foco el enlace, se comienza a pulsar una cualquiera de las teclas del
teclado. Para comprobar el siguiente ejemplo, pincha primero sobre el enlace y luego una tecla cualquiera:
<a href="#" onKeydown="alert('Evento KEYDOWN)">onKeydown</a>
- onKeypress, que salta cuando,teniendo el foco el enlace, se acaba de pulsar una cualquiera de las teclas del
teclado. Para comprobar el siguiente ejemplo, pincha primero sobre el enlace y luego una tecla cualquiera:
<a href="#" onKeypress="alert('Evento KEYPRESS)">onKeypress</a>
- onKeyup, que salta cuando, teniendo el foco el enlace, y trs haber pulsado una cualquiera de las teclas del
teclado, se libera dicha tecla. Para comprobar el siguiente ejemplo, pincha primero sobre el enlace, luego una tecla
cualquiera y despus la sueltas:
<a href="#" onKeyup="alert('Evento KEYUP)">onKeyup</a>
* Eventos de foco:
- onFocus, que salta cuando el enlace recibe el foco, bien al ser pulsado con el puntero del ratn, bien al acceder a l
mediante el tabulador o una funcin de JavaScript:
<a href="#" onFocus="alert('Evento FOCUS)">onFocus</a>
Una de las diferencias entre este evento y onClick es que con l slo se lanza una vez el evento mientras que el
enlace tenga el foco, mientras que con onClick se lanzar cada vez que pinchemos el enlace.
16
- onBlur, que salta cuando, trs haber recibido el foco el enlace, pasamos el foco a otro elemento de la pgina:
<a href="#" onBlur="alert('Evento BLUR)">onBlur</a>
Para probar el ejemplo anterior, pinchar primero sobre el enlace, y despus sobre otra parte cualquiera de la ventana
del navegador.
COLORES DE LOS ENLACES.Antes de entrar en ms detalles debemos saber que un enlace puede tener 4 estados diferentes, que son:
- enlace sin visitar: corresponde a un enlace que an no ha sido pulsado ninguna vez en nuestra visita a la pgina.
- enlace sobrepasado: corresponde al enlace sobre el que estamos en ese momento pasando el puntero del ratn sobre
l.
- enlace activo: corresponde al enlace que ha acaba de ser pulsado.
- enlace visitado: corresponde al enlace que ya ha sido activado con anterioridad en nuestra visita.
Cada uno de estos estados puede tener asociado un color y unas caractersticas de estilo diferentes, que tericamente
se deberan poner a cero cada vez que entremos de nuevo en la pgina, aunque esto no ocurre as del todo porque
muchas veces el navegador mantiene en su memoria cach las pginas que hemos visitado con anterioridad, por lo
que los enlaces que en una visita anterior hayamos visitado pueden aparecer como tales cuando entremos de nuevo
en esa pgina. La forma de evitar esto es borrar la cach del navegador, con lo que el sistema volver a su estado
inicial.
Vamos a ver las diferentes tcnicas que podemos usar para controlar los estilos de los enlaces.
* CONTROLANDO LOS ENLACES CON HTML:

El lenguaje HTML nos proporciona tres propiedades de la etiqueta BODY que nos permiten establecer el color de
los enlaces:
- link= "color", que asigna color a los enlces normales, los que an no han sido visitados.
- alink= "color" , que lo asigna al enlace queest activo
- vlink= "color", que define el color de los enlaces queya hayansido visitados.
Estas propiedades del BODY se complementan con otra que asigna el color al texto normal de la pgina (el que no
es un enlace), que es la propiedad text= "color". En todas ellas el valor "color" debe ser un color vlido expresado
bien por su nombre compatible web en ingls, bien por su valor hexadecimal.
Vamos a ver un ejemplo de aplicacin prctica de estas propiedades del BODY, y luego comentamos algn detalle.
Una posible asignacin de los colores del texto en nuestrapgina sera la siguiente:
<body alink="green" link="red" vlink="#fa8072" text="blue" bgcolor="#ffff99">
Este es un texto normal
<br><br>
<a href="#" onClick="return false">enlace 1</a><br>
</body>
en la que normal ser la clase de estilos por defecto del enlace, cursor va a ser la que va a tomar cuando se pase el
cursor sobre il y activa ser la que le vamos a asociar cuando se haga click sobre el mismo. Ya slo nos queda
establecer el enlace, en al que los cambios de clase vamos a controlarlos mediante los eventos MOUSEOVER y
CLICK:
<a class="normal" href= "a.html"onmouseOver="this.className= 'cursor'"onClick="this.className='activa';return
false">enlace 1</a>
donde vemos que para cambiar la clase basta usar this, que hace referencia al propio objeto en el que se encuentra el
evento, es decir, el enlace.
LISTAS EN HTML
Existen dos tipos generales de listas, las listas regulares (ordenadas y de vietas) y las listas de definiciones o
glosario.
LISTAS REGULARES ORDENADAS.El primer tipo de listas que vamos a ver son aquellas que muestran una serie de elementos ordenados en una
secuencia jerrquica lgica. Todas las listas de este tipo se construyen partiendo de la pareja de etiquetas base
<OL>...</OL> (Ordered List=Lista Ordenada).
Estas etiquetas base forman un bloque por s mismas, deben siempre ir en parejas apertura-cierre y contienen en su
interior un nmero variable de etiquetas <LI>...</LI> , que son las que van a definir los diferentes elementos
textuales de las lista.
Atributos de la etiqueta <OL>.
La etiqueta <OL> pose una serie de atributos que nos van a permitir configurar el aspecto que va a tener la lista.
Los principales son:
* type="tipo": define el tipo de secuenciador a usar en la lista. Los secuenciadores en una lista van en su orden
natural lgico. El parmetro tipo puede tomar los valores:
type="1", que define una lista ordenada mediante nmeros enteros consecutivos seguidos de un punto.
Es el valor que toma el atributo type por defecto. Ejemplo:
<ol type="1">
<li>primer elemento</li>
<li>segundo elemento</li>
<li>tercer elemento</li>
</ol>
Bueno. amigos. Lo que sigue se va un poco del simple HTML, pero no quiero finalizar el tema de los colores en los
enlaces sin comentar un aspecto importante del mismo, ya que puede afectar al diseo de la pgina en s.
El manejo de los estilos mediante JavaScript lo vamos a basar en lo siguiente: una vez definida una clase general
para el enlace, que va a definir su aspecto inicial, podemos cambiar dinmicamente esta clase asociada mediante la
instruccin className, que define la clase de estilos asociada a un elemento. Para poder cambiarla necesitaremos
asignar un ID al enlace.
Supongamos entondes que tenemos las siguientes clases de estilo:
.normal{font-family:Verdana;font-size:12px;color:black;text-decoration:none;}
.cursor{font-family:Verdana;font-size:12px;color:red;text-decoration:none;}
.activa{font-family:Verdana;font-size:12px;color:red;font-weight:bold;text-decoration:none;}
</style>
A.
B.
C.
primer elemento
segundo elemento
tercer elemento
type="a", que define una lista ordenada mediante letras minsculas consecutivas seguidas de un punto.
Ejemplo:
<ol type="a">
</ol>
primer elemento
segundo elemento
tercer elemento
type="A", que define una lista ordenada mediante letras maysculas consecutivas seguidas de un punto.
Ejemplo:
<ol type="A">
</ol>
* CONTROLANDO LOS ENLACES CON JAVASCRIPT:
1.
2.
3.
a.
b.
c.
primer elemento
segundo elemento
tercer elemento
type="I", que define una lista ordenada mediante nmeros romanos en mayscula consecutivos seguidos
de un punto. Ejemplo:
17
<ol type="I">
</ol>
I.
II.
III.
primer elemento
segundo elemento
tercer elemento
type="i", que define una lista ordenada mediante nmeros romanos en minscula consecutivos seguidas
de un punto. Ejemplo:
<ol type="i">
</ol>
i.
ii.
iii.
primer elemento
segundo elemento
tercer elemento
* start="x": define el primer secuenciador de la serie de elementos de la lista, es decir, cul va a ser el primer
identificador que va a aparecer. Los valores del parmetro "x" son siempre nmeros enteros a partir de 1. Si no se
especifica este atributo, la lista empezar siempre por el primer elemento. Ejemplos:
<ol type="1" start="3">
<li>cuarto elemento</li>
<li>quinto elemento</li>
</ol>
<ol type="A" start="4">
<li>cuarto elemento</li>
<li>quinto elemento</li>
<li>sexto elemento</li>
</ol>
3.
4.
5.
D.
E.
F.
tercer elemento
cuarto elemento
quinto elemento
cuarto elemento
quinto elemento
sexto elemento
1.
2.
3.
El segundo tipo de listas regulares son aquellas que muestran una serie de elementos que no estn dispuestos segn
un patrn especfico de ordenacin, es decir, que estn definidos los diferentes elementos mediante un signo
determinado comn a todos ellos, signo que normalmente se denomina vieta o topo. Todas las listas de este tipo se
construyen partiendo de la pareja de etiquetas base <UL>...</UL> (Unordered List=Lista Sin ordenar).
Estas etiquetas base forman un bloque por s mismas, deben siempre ir en parejas apertura-cierre y contienen en su
interior un nmero variable de etiquetas <LI>...</LI>, que son las que van a definir los diferentes elementos
textuales de las lista.
Atributos de la etiqueta <UL>.
La etiqueta <UL> pose una serie de atributos similares a los de la etiqueta OL, que nos van a permitir configurar el
aspecto que va a tener la lista. Los principales son:
* type="tipo": define el tipo de topo o vieta a usar en la lista. El parmetro tipo puede tomar los valores:
type="disc", que define cada elemento de la lista mediante un pequeo crculo negro (disco). Ejemplo:
<ul type="disc">
</ul>
* title="mensaje": establece un mensaje o ttulo asociado a la lista, que se mostrar en forma de tip o bocadillo
cuando el usuario site el cursor sobre la lista. Se puede usar para explicar la finalidad de las lista, si sta no est lo
suficientemente explicada por un texto anterior a ella o por el contexto en el que se encuentra. No conviene usar esta
etiqueta, ya que los tips suelen despistar y molestar al usuario. Ejemplo (situad el cursor encima de la lista de la
izquierda):
<ol title="ejemplo del atributo title">
</ol>
LISTAS REGULARES SIN ORDENAR.-
primer elemento
segundo elemento
tercer elemento
* dir="ltr / rtl": establece el sentido del texto de los elementos de la lista, y puede ser ltr=left to right (de izquierda
a derecha) o rtl=right to left (de derecha a izquierda). El valor por defecto es ltr, que corresponde a los idiomas
occidentales ms comunes. El valor rtl se utiliza en idiomas como el rabe, en los que el texto fluye en los escritos
desde la derecha hacia la izquiera. Vamos a ver un ejemplo de este tipo, con <ol dir= "rtl">:
primer elemento
segundo elemento
tercer elemento
.1
.2
.3
* lang="idioma": que define el idioma usado en los textos de la lista. Los valores posibles son abreviaturas
comunes del idioma usado, como es (espaol), en (ingls) o it (italiano).
La etiqueta <OL> pose adems otras serie de atributos como el conjunto formado por STYLE, CLASS e ID, que se
usan para asignar estilos a la lista mediante CSS (Hojas de Estilos en Cascada), y que veremos ms adelante.
segundo elemento
tercer elemento
type="circle", que define cada elemento de la lista mediante una pequea circunferencia negra (aunque
la traduccin sera circulo). Ejemplo:
<ul type="circle">
</ul>
primer elemento
primer elemento
segundo
elemento
tercer elemento
type="square", que define cada elemento de la lista mediante un pequeo cuadradito negro. Ejemplo:
<ul type="square">
</ol>
primer elemento
segundo elemento
tercer elemento
title="mensaje": establece un mensaje o ttulo asociado a la lista, que se mostrar en forma de tip o bocadillo
dir="ltr / rtl": establece el sentido del texto de los elementos de la lista, y puede ser ltr=left to right (de izquierda a
derecha) o rtl=right to left (de derecha a izquierda).
lang="idioma": que define el idioma usado en los textos de la lista. Los valores posibles son abreviaturas comunes
del idioma usado, como es (espaol), en (ingls) o it (italiano).
LA ETIQUETA <LI>.Los posibles tipos de listas regulares se definen cada uno mediante una etiqueta propia, <OL> y <UL,
pero hay una pieza constructora comn a ellas, y es que los diferentes elementos que forman la lista se definen
mediante las parejas de etiquetas <LI>...</LI>.
Se debe usar una pareja de estas etiquetas por cada uno de los elementos de la lista, ya que aunque los navegadores
permiten no escribir las etiquetas de cierre </LI> o escribir slamante la correspondiente al ltimo elemento (as lo
hace por defecto HomeSite), se deben siempre cerrar todas las etiquetas HTML que posan pareja de cierre.
Atributos de la etiqueta <LI>.
Los principales atributos de la etiqueta <LI> son:
18
* type="tipo": define el tipo de secuenciador a usar en la lista. Los secuenciadores en una lista ordenada van en su
orden natural lgico. El parmetro tipo puede tomar los valores:
type="tipo" , que va a definir el smbolo definitorio de cada elemento de la lista. A diferencia del
atributo anlogo de las etiquetas <OL> y <UL>, en este caso se pueden fijar smbolos diferentes para
cada uno de los elementos de una misma lista, siempre que pertenexcan al mismo tipo. Por este motivo, el
valor del parmetro "tipo" puede ser cualquiera de los vistos para la etiqueta <OL> o cualquiera de los
vistos para la etiqueta <UL>. Ejemplos:
<ol>
<li type="A">segundo elemento</li>
<li type="I">tercer elemento</li>
</ol>
<ul type="disc">
<li type="square">segundo elemento</li>
<li type="A">tercer elemento</li>
</ul>
1.
A.
I.
primer elemento
segundo elemento
tercer elemento
* title="mensaje": establece un mensaje o ttulo asociado a un elemento particular de la lista, que se mostrar en
forma de tip o bocadillo cuando el usuario site ;el cursor sobre dicho elemento. Ejemplo (situad el cursor encima
del segundo elemento de la lista de la izquierda):
primer elemento
segundo elemento
tercer elemento
* dir="ltr / rtl": establece el sentido de desarrollo del texto de un elemento concreto de la lista, y puede ser ltr=left
to right (de izquierda a derecha) o rtl=right to left (de derecha a izquierda). El valor por defecto es ltr, que
corresponde a los idiomas occidentales ms comunes. El valor rtl se utiliza en idiomas como el rabe, en los que el
texto fluye en los escritos desde la derecha hacia la izquiera. Ejemplo:
<ul>
<li dir="rtl">segundo elemento</li>
</ul>
primer elemento
segundo elemento
Primer elemento
Es el primero de la lista
Segundo elemento
Es el que va despus del primero
La etiqueta <DL> pose los mismos atributos que <OL> y <UL>, salvo type, ya que esta clase de listas no llevan
smbolo ninguno antes de los elementos que la forman, estando maquetada la lista con las indentaciones existentes
entre los elementos y sus correspondientes definiciones. En cuanto a las etiquetas <DT> y <DD>, ocurre lo mismo
respecto a la etiqueta <LI>.
ANIDAMIENTO DE LISTAS.-
primer elemento
segundo elemento
tercer elemento
<ul>
<li title="ste es el segundo elemento">segundo elemento</li>
</ul>
<dl>
<dt>Primer elemento
<dd>Es el primero de la lista
<dt>Segundo elemento
<dd>Es el que va despus del primero
</dl>
tercer elemento
Como vis, el elemento de la lista afectado se sita a la derecha de la pantalla, y se empieza a completar hacia la
izquierda, aunque en ordenadores configurados para lenguajes "normales" el texto fluir en su sentido habitual.
* lang="idioma": que define el idioma usado en el texto de un elemento en concreto de la lista. Los valores
posibles son abreviaturas comunes del idioma usado, como es (espaol), en (ingls) o it (italiano).
* value="valor": que asigna un valor concreto a un elemento de la lista, que se suele usar en casos de diferentes
posibilidades entre un conjunto de posibles valores. Su uso es a nivel de cdigo, y no origina efecto visible en la
ventana del navegador.
La etiqueta <LI> pose adems otras serie de atributos como el conjunto formado por STYLE, CLASS e ID, que se
usan para asignar estilos a la lista mediante CSS (Hojas de Estilos en Cascada), y que veremos ms adelante.
LISTAS DE DEFINICIONES.Las listas de definiciones se caracterizan por presentar los elementos que la forman dispuestos segn un esquema de
tipo glosario, apareciendo una serie de elementos con sus correspondientes definiciones.
Las listas de definiciones se construyen partiendo de la pareja de etiquetas de bloque <DL>...</DL> (Definitions
List), y dentro de ellas se van estableciendo los elementos mediante la etiqueta <DT>, y su definicin
correspondiente mediante la etiqueta <DD>. Las etiquetas <DT> y <DD> no posen pareja de cierre, pero la
etiqueta padre <DL> se debe cerrar siempre con su correspondiente pareja </DL>.
Ejemplo:
Las listas son elementos que definen bloques en un documento HTML, entendiendose por bloque una entidad
particular con caractersticas propias. Bloques son tambin los prrafos, los bloques DIV o SPAN, etc.
Al tener las listas caractersticas de bloque es posible anidar unas con otras sin ningn tipo de problema, al igual que
ocurre con las tablas. Y esta anidacin puede tener cuantos niveles queramos, con tan slo respetar la sintaxis propia
y tener cuidado de cerrar bien las etiquetas abiertas.
La forma de anidar sucesivamente varias listas es siempre la misma. Dentro de una etiqueta <LI> se introduce el
bloque completo de la lista anidada, cuidando de cerrar correctamente tanto el bloque hijo (con su correspondiente
etiqueta </OL> p.e.) como el elemento <LI> padre (con su correspondiente etiqueta </LI>).
Ejemplos:
<ol>
<ul type="disc">
<li>primer sub-elemento</li>
<li>segundo sub-elemento</li>
<li>tercer sub-elemento</li>
</ul>
</ol>
1.
2.
primer elemento
segundo elemento
primer sub-elemento
segundo sub-elemento
tercer sub-elemento
tercer elemento
3.
<ul type="square">
<li>sub-elemento 1-1</li>
</ul>
<ul type="square">
</ul>
</ul>
primer elemento
sub-elemento 1-2
sub-elemento 1-3
segundo elemento
sub-elemento 1-1
sub-elemento 2-1
sub-elemento 2-2
tercer elemento
Tres anidamientos:
<ol>
<ol type="a">
</ol>
1.
2.
primer elemento
a.
sub-elemento 1-1
b.
sub-elemento 1-2
c.
sub-elemento 1-3
segundo elemento
a.
sub-elemento 2-1
i.
sub-elemento 2-1-1
19
<ul type="a">
<ol type="i">
<li>sub-elemento 2-1-1</li>
<li>sub-elemento 2-1-2</li>
</ol>
</ul>
</ol>
3.
ii.
sub-elemento 2-1-2
b.
sub-elemento 2-2
tercer elemento
Anidando otros elementos.Tambis es posible anidar otros elementos de HTML dentro de los componentes de una lista, como enlaces, prrafos,
tablas, etc.
Como ejemplo vamos a ver cmo se anida una tabla dentro de un elemento de lista:
<ul>
primer elemento
segundo elemento
<table border="1">
celda 1-1 celda 1-2
<tr>
celda 2-1 celda 2-2
<td>celda 1-1</td>
<td>celda 1-2</td>
tercer elemento
</tr>
<tr>
<td>celda 2-1</td>
<td>celda 2-2</td>
</tr>
</table>
</li>
</ul>
LISTAS CON ESTILO

Desde la aparicin de las Hojas de Estilos en Cascada (CSS) el ideal siempre buscado de la separcin de contenido y
formato se convirti en una grata realidad. Es cierto que muchos de los elementos recomendados por el W3C no se
han implementado en su totalidad, y que cada empresa hace una interpretacin propia de otros elementos, pero lo
cierto es que con el uso de CSS aplicado a los elementos de un documento HTML podemos conseguir
presentaciones que se adapten a nuestras necesidades.
* Estilos para los textos.Vamos a explicar los estilos suponiendo que los implementamos en la cabecera de la pgina.
Podemos configurar qu fuente van a tener los textos de las listas, qu tamao y qu color, definiendo una clase de
estilos para una etiqueta global:
ol{font-size:12px; font-family:Comic Sans MS,Verdana;color:red;}
</style>
que nos pondra todos los elementos de todas las listas ordenadas de la pgina con una fuente Comic Sans de 12
pixels y de color rojo.
O podemos definir una clase general aplicable a cualquier elemento HTML que la admita:
.listadoA{font-size:12px; font-family:Comic Sans MS,Verdana;color:green;}
</style>
que nos pondra con el estilo definido slo los elementos que hicieran referencia a dicha clase (observa el punto
antes del nombre de la clase).
Por ejemplo, vamos a aplicar la clase anterior a una lista entera y luego slo a un elemento de ella:
<ol class="listadoA">
</ol>
1.
2.
3.
<ol>
<li
class="listadoA">segundo
elemento</li>
</ol>
1.
2.
3.
primer elemento
segundo elemento
tecer elemento
primer elemento
segundo elemento
tecer elemento
Tambin es posible (aunque algunas de estas propiedades de estilo slo funcionan en Internet Explorer y Nestcape
6x) configurar el espaciado de las letras del texto de los elementos, su indentacin respecto al topo, etc.:
.listadoB{letter-spacign:10px;text-indent:20px;}
</style>
<ol class="listadoB">
</ol>
1 .
2 .
p
s
e l e m
3 .
t
r
e
e
e
i
g
n
r
m
u
t
c
e r
e l e m e n t o
n d o
o
e r
e l e m e n t o
Si los estilos definidos vamos a usarlos para una sla lista o un slo elemento en particular, y adems deseamos
cambiar dinmicamente mediante JavaScript (DHTML) una o ms propiedades de estilo en tiempo real, deberemos
asignar a dicha lista o elemento un nombre identificador nico mediante el atributo id, definiendo entonces los
estilos para ese elemento usando una sintaxis parecida a la de definicin de una clase, pero sustituyendo el punto por
un caracter almohadilla (#):
#identificador1{font-size:12px;font-family:Verdana;}
</style>
<ul>
<li id="identificador1">primer elemento</li>
</ul>
primer elemento
segundo elemento
* Estilos de bloque.
Al ser una lista un elemento de bloque, podemos aplicarle los estilos caractersticos de este tipo de elementos. As,
podemos definir el color de fondo del bloque completo o slo de alguno o todos los elementos de la lista:
.listadoC{background-color:yellow;}
</style>
<ol class="listadoC">
</ol>
1.
2.
3.
primer elemento
segundo elemento
tecer elemento
O asignar una imagen de fondo a la lista:

.listadoD{background-image:url("images/12.gif");}
</style>
Podemos asignar un tipo cualquiera de bordes soportados por CSS al bloque:
20
.listadoE{border:solid 2px red;}
</style>
<ol class="listadoD">
</ol>
1.
2.
3.
primer elemento
segundo elemento
tecer elemento
* Configurando los topos:

Una de las mejores pociones que nos da CSS para las listas es la posibilidad de configurar los topos a nuestro gusto,
ya que nos permite definir como tal cualquier imagen que deseemos. Veamos un ejemplo de la sintaxis adecuada y
de su efecto en una lista:
.listadoF{list-style-image:url("images/topo_1.gif");}
</style>
</ol>
1.
2.
3.
primer elemento
segundo elemento
tecer elemento
Observad atentamente la sintaxis:

list-style-image:url("ruta_imagen")
Si no ponemos la instruccin correctamente, la imagen no nos aparecer.
Adems de poder usar imgenes, CSS tambin permite configurar el topo estndar que se usar en una lista o
elemento de ella, mediante la sintaxis:
list-style-type: tipo_topo
donde tipo_topo puede ser alguno de los ya vistos antes: square, disc, circle, A, I, 1, etc.
Ejemplo:
.listadoG{list-style-type: square;}
</style>
</ol>
primer elemento
segundo elemento
tecer elemento
TABLAS EM HTML
Las tablas son una de las herramientas mas tiles de que disponemos en HTML, ya que nos van a
permitir en cierto modo "maquetar" nuestro documento, ayudandonos a situar dentro del mismo los diferentes
elementos que lo componen, siendo esta la nica forma coherente de distribucin que haba antes de la
introduccin de las Hojas de Estilo y de las capas.
Es por esta facilidad a la hora de organizar con tablas nuestras pginas el que el 99% de las que
veamos en Internet las usen, aunque muchas veces no las veamos directamente porque estan "ocultas".
Por eso se debe conocer bien todas las etiquetas y atributos de que disponemos para la creacin de
tablas, as como unos cuantos truquillos que veremos mas en el desarrollo de este captulo.
Estructura de una tabla
Las tablas estan formadas por filas, columnas y celdas. Cada espacio horizontal continuado es una fila y cada
espacio vertical continuado es una columna, definindose una celda como el espacio formado por la
interseccin de una fila y una columna.
columna 1 columna 2 columna 3
fila 1
fila 2
fila 3
celda(1,1)
celda(1,2)
celda(1,2)
celda(2,1)
celda(2,2)
celda(2,3)
celda(3,1)
celda(3,2)
celda(3,3)
Lo primero que tenemos que hacer cuando queremos introducir una tabla es decirle al navegador dnde empieza
y dnde acaba esta; esto se consigue mediante la etiqueta de inicio <TABLE> y su correspondiente de cierre
</TABLE>.
Seguidamente debemos decirle cuantas filas vamos a tener en nuestra tabla, cosa que hacemos con las etiqueta
de inicio de fila <TR>> y su correspondiente de cierre de fila</TR>, por lo que deberenos insertar una pareja de
etiquetas por cada fila que queramos que tenga la tabla.
Por ltimo, dentro de cada fila deberemos indicar cuantas celdas va a haber, que inicialmente deben
corresponderse con el nmero de columnas que deseemos tenga la tabla. Esto se consigue mediante las parejas
de etiquetas <TD> y </TD>.
De esta forma, y siguiendo con nuestra tabla inicial de Ejemplo, el esquema de etiquetas sera el siguiente:
<TABLE>
<TR>
<TR>
<TR>
<TD>...</TD> <TD>...</TD> <TD>...</TD>

<TD>...</TD> <TD>...</TD> <TD>...</TD>
<TD>...</TD> <TD>...</TD> <TD>...</TD>
</TR>
</TR>
</TR>
</TABLE>
Este es el esquema general de toda tabla simple, que traducido a cdigo HTML quedara de la forma:
<TABLE>
<TR>
<TD> celda(1,1) </TD>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
La visualizacin de una tabla se genera automaticamente a partir de las filas y las columnas definidas. Sin
embargo para un navegador no es facil interpretar a tiempo como debe aparecer la tabla. Primero tiene que leer
la tabla completa antes de poder visualizar alguna cosa. En caso de tablas muy grandes eso puede conducir a
21
que en la pantalla aparecen espacios vacios desagradables mientras que la pgina se carga. HTML 4.0 ofrece
una nueva sintaxis para comunicarle al navegador al principio de la tabla cuantas columnas tiene. De esta
manera el navegador puede cargar la tabla mucho ms rapido, o sea que una parte de la tabla es visualizada
antes de que la totalidad de la tabla haya sido leda. Esto se debe implementar mediante las etiquetas
<COLGROUP>...</COLGROUP> y sus hijas <COLS>. No obstante, estas etiquetas, que veremos mas
adelante, slo son compatibles con Internet Explorer, cosa que las hace desaconsejables para nuestras pginas,
pus debemos siempre crear pginas compatibles con todos los navegadores de cuarta generacin y todas las
resoluciones habituales.
Etiqueta <TABLE> y sus atributos

<TABLE> y </TABLE> son las etiquetas principales de definicin de una tabla, que acotan el espacio en
el que podemos definir filas y celdas. Sus principales atributos son:
* WIDTH="p", donde p puede venir expresado en pxeles en tanto por ciento (%). Este atributo
determina la anchura que va a tener la tabla. Si le damos un valor en pxeles la anchura sera absoluta, con
esa medida independientemente del tamao de la pantalla o del elemento que contenga la tabla, mientras
que si le damos un valor en % la anchura sera relativa al tamao de pantalla del elemento que contenga la
tabla. As, si queremos que la tabla ocupe toda la ventana del navegador, bastara con especificar
WIDTH="100%".
<TABLE WIDTH="100" BORDER="1">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
UNO
<TABLE WIDTH="100" HEIGHT="100" BORDER="1">

<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
DOS
UNO
DOS
* BORDER= "n", donde n es un nmero entero. Este atributo va a permitir que veamos los bordes de la
tabla y de las celdas que la componen, que van a tener una anchura de n pxeles, Si no se usa este atributo
no veremos los bordes, ya que su valor por defecto es BORDER=0.Las celdas sin contenido no apareceran
con bordes, por lo que si queremos que se muestren deberemos insertar en la celda un gif transparente de
1x1 pxeles, un espacio ( ) o una etiqueta <BR>.
Ejemplo<TABLE WIDTH="100" BORDER="0">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
<TABLE WIDTH="50%" BORDER="1">

<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
UNO
Ejemplo-
UNO
DOS
UNO
DOS
* BORDERCOLOR= "color", donde color puede venir expresado mediante su nombre web en ingls
mediante su cdigo hexadecimal. Ntense las comillas que encierran la definicin del color.Este atributo
nos permite definir el color en que se vera el borde, pero mientras que en Iexplorer se veran de ese color
tanto los bordes exteriores de la tabla como los interiores de las celdas, en Nestcape slo se veran del color
especificado los bordes exteriores de la tabla, permaneciendo los interiores del color gris predeterminado.
Otra diferencia entre ambos navegadores es que en Iexplorer se ven los bordes lisos, mientras que en
Nestcape se ven con estilo slido.Lgicamente, para que se vean los bordes de color esta etiqueta debe ir
acompaada de BORDER=1,2,., es decir, tenemos que haber definido previamente un ancho de borde.
Ademas, existen dos atributos de color de borde que slo se ven en Internet Explorer:
DOS
<TABLE WIDTH="100%" BORDER="1">

<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
- BORDECOLORDARK, que establece los colores exteriores del borde derecho y del borde inferior y los
interiores del borde izquierdo y del borde superior.
- BORDECOLORLIGHT, que los establece al contrario.
Ejemplos.-
UNO
DOS
* HEIGHT= "p", donde p puede venir expresado como un entero (pxeles) como tanto por ciento (%).
Este atributo nos permite determinar lo alta que va a ser la tabla, y con l ocurre ocurre igual que con
WIDTH en lo que respecta a los valores abolutos (pxeles) y relativos (%). Normalmente el alto de la tabla
no se especifica, ya que su valor lo va a determinar el texto y/o las imagenes que vamos a introducir en las
celdas de la misma.
<TABLE BORDER="1" BORDERCOLOR="red" CELLSPACING="0">

<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
UNO DOS
22
<TABLE
BORDER="5"
CELLSPACING="0">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
BORDERCOLOR="#003366"
de la misma.
Ejemplos.-
* BGCOLOR= "color", donde color va a venir expresado lo mismo que ocurra en BORDERCOLOR, es
decir, o mediante su nombre web en ingls o mediante su cdigo hexadecimal. Con este atributo podemos
definir el color de fondo que va a tener la tabla.
Ejemplos.<TABLE BORDER="1" BGCOLOR="red">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
<TABLE BGCOLOR="#66FFFF">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
UNO DOS
<TABLE BORDER="1" CELLSPACING="3">

<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
UNO DOS
UNO DOS
* CELLPADDING= "n", con n=n entero=n de pxeles. Este valor nos va a determinar el espacio interior
en las celdas, es decir, el espacio que habra entre los bordes de la celda y el texto, imagen o componente que
hay dentro de esta.
Ejemplos.UNO DOS
* BACKGROUND= "ruta imagen", que nos va a permitir establecer una imagen de fondo para toda la
tabla, y en donde "ruta imagen" va a ser la ruta de directorios o una URL de Internet en la que se encuentra la
imagen . As, si tenemos nuestra pagina colgando del directorio raiz de la aplicacin web y dentro de este hay
una carpeta "images" que contiene a nuestra imagen de fondo "fondo1.gif", la sintaxis correcta sera:
<TABLE WIDTH="200" HEIGHT="750" BORDER="1"
BACKGROUND="images/fondo1.gif">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
<TABLE BORDER="1" CELLSPACING="0">

<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
UNO
<TABLE BORDER="1" CELLPADDING="0">

<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
UNO DOS
DOS
mientras que si la imagen se encuentra en un servidor web, deberemos escribir: (es solo un ejemplo, ya que la
ruta depende del servidor):
<TABLE WIDTH="200" HEIGHT="750" BORDER="1"
BACKGROUND="http://www.miservidor.com/midirectorio/images/fondo1.gif">
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
<TR>
* CELLSPACING= "n", donde n es un nmero entero. Nos permite establecer el espacio que va a haber
entre las celdas, con lo que podemos dar una mayor o menor separacin a las mismas, determinado por n=n
de pxeles entre ellas. Si la tabla esta definida con bordes, este atributo modificara en grosor del borde interior
23
<TABLE BORDER="1" CELLPADDING="10">

<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
UNO
DOS
*ALIGN= "a". Este atributo nos va a permitir alinear la tabla respecto a la pantalla activa o respecto al
elemento que contiene a la tabla, dependiendo de los posibles valores del atributo a, que son:
- a=LEFT alinea la tabla a la izquierda. Es el valos por defecto.
- a=CENTER situa la tabla en el centro .
- a=RIGHTsitua la tabla a la derecha del elemento contenedor.
Ejemplos.<TABLE BORDER="1" ALIGN="LEFT">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
<TABLE BORDER="1" ALIGN="center">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
<TABLE BORDER="1" ALIGN="right">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
UNO DOS
UNO DOS
UNO DOS
<TABLE BORDER="1" CELLSPACING="0" FRAME="vsides">

<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
UNO DOS
*RULES= "none / groups / rows / cols / all ". Complementa al atributo BORDER, y permite especificar qu
bordes internos se veran.Slo funciona en Internet Explorer.
- none - no se ven los bordes interiores.
- groups - muestra los bordes entre los grupos de tabla, especificados mediante las etiquetas <THEAD>
<TBODY>, <TFOOT> y <COLGROUP>.
- rows - muedtra los bordes entre filas
- cols - muestra los ordes entre columnas.
- all - muestra todos los bordes interiores.
- basic -genera lneas divisorias entre THEAD, TFOOT y TBODY.
Ejemplos.- (Slo para Explorer)
UNO DOS
* FRAME=" void / above / below / hsides /lhs / rhs / vsides / box /border ". Este atributo es
complementario a BORDER y slo funciona con Internet Explorer, y posibilita, en una tabla con bordes,
especificar cual o cuales de los exteriores seran visibles. Podemos especificar pus:
- void - no se ven los bordes.
- above - borde superior.
- below - borde inferior.
- hsides - bordes superior e inferior.>
- lhs - borde izquierdo.
- rhs - borde derecho.
- vsides - bordes laterales.
- box - todos los bordes.
- border - todos los bordes.
Ejemplos.- (Slo para Explorer)
<TABLE BORDER="1" CELLSPACING="0" FRAME="above">

<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
<TABLE BORDER="1" RULES="rows">

<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
<TABLE BORDER="1" RULES="cols">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
UNO DOS
UNO DOS
UNO DOS
UNO DOS
* HSPACE= "p ", donde p=n entero=n pxeles. Permite especificar el espacio horizontal que habra entre la
tabla y el texto circundante.Permite aadir mas espacio a la derecha y a la izquierda de la tabla, entre el borde
y el contexto.
* VSPACE= "p ", donde p=n entero=n pxeles. Permite especificar el espacio vertical que habra entre la
tabla y el texto circundante. Permite aadir mas espacio arriba y abajo de la tabla, entre el borde y el contexto.
24
* SUMMARY="descripcion". Permite introducir un resumen, o un comentario para especificar el objeto y /

o contenido de la tabla. No se muestra en el navegador.
* CHAR= " char ", donde char es un caracter de determinado por nosotros. Este atributo define el el caracter
que queremos usar como referencia para alinear el texto de las celdas de la tabla, es decir, especifica el caracter
sobre el que se alineara la celda. Solamente vale si en ALIGN se ha puesto el valor "char".
* CHAROFF="n". Asume un valor cuantitativo (en unidades o porcentaje) que especifica la compensacin
del caracter de alineacin. Solamente vale si en ALIGN se ha puesto el valor "char.
* STYLE="atributo:valor;atributo:valor;". Especifica informacin de estilo sobre un simple elemento del
documento. Este atributo y sus parametros vienen de las especificaciones del W3C sobre Cascading Style
Sheet (Hojas de Estilo en Cascada), y con l se puede modificar completamente la presentacin de la tabla y
de su contenido. Alguno de sus atributos y valores slo se ven en Internet Explorer.
<TABLE BORDER="1" ALIGN="center" STYLE="background-color:yellow;fontsize:12pt; text-align:center;">
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
UNO DOS
UNO DOS
* TITLE="titulo", para titular un documento o una seccin del mismo. Algunos programas visores pueden
colocar el valor de este atributo como texto insertado o audio.
* CLASS="clase". En la actualidad se utiliza segn las especificaciones del W3C para establecer una clase de
estilos a la tabla y su contenido. Para mas informacin consultar manuales de CSS.
* ID="nombre". Analogo al atributo CLASS, pero identifica la tabla como un objeto nico, con sus atributos
de estilo definidos en lnea mediante el atributo STYLE, en la cabecera del documento HTML o en un archivo
externo de extensin .css. Ver manuales de CSS.
* DIR="direccion". Se usa para indicar la direccin del texto y de las columnas. Asume los valores: ltr (de
izquierda a derecha) y rtl (derecha a izquierda). Cuando el valor es rtl, el ordenamiento de las columnas
comenzara por el tope arriba a la derecha.
ETIQUETA <TR> Y SUS ATRIBUTOS.

<TR>.</TR>. Esta pareja de etiquetas es necesaria para especificar y delimitar cada una de las filas que va a
tener la tabla, y entre ellas iran las parejas de etiquetas <td>.</td> y <th>.</th>, que veremos mas adelante.
Sus principales atributos son:
<TR BGCOLOR="orange">
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
* ALIGN = " left /center /right / justify / char ". Este atributo va a definir si el texto o la imagen que va a ir
en cada celda de esa fila van a estar alineados a la izquierda, en el centro o a la derecha de cada celda. Su valor
por defecto es LEFT, por lo que si no especificamos nada las celdas de la fila apareceran alineadas a la
izquierda.
Ejemplo<TABLE BORDER="1" WIDTH="200">
<TR ALIGN = "center ">
<TD WIDTH="100">UNO</TD>
<TD WIDTH="100">DOS</TD>
</TR>
<TR ALIGN = "right ">
</TR>
</TABLE>
UNO
DOS
UNO
DOS
* VALIGN = " top / middle / baseline / bottom ". Nos permite alinear verticalmente el contenido de las
celdas de la fila en la parte superior, en medio, a la altura del texto de la celda colindante o abajo
respectivamente.
Ejemplo<TABLE
BORDER="1"
WIDTH="200"
HEIGHT="150">
<TR WIDTH="100" VALIGN = "top ">
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
<TR WIDTH="200" VALIGN = "bottom ">
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
UNO
DOS
UNO
DOS
* SUMMARY="descripcion". Permite introducir un resumen, o un comentario para especificar el objeto y /

o contenido de la fila de la tabla. No se muestra en el navegador.
* BGCOLOR= " color", donde color puede venir en su nombre web en ingls o en su valor hexadecimal. al
igual que con la etiquetas <TABLE> y <TR>, este atributo va a esTABLEcer el color del fondo de cada celda,
prevaleciendo este color sobre el que hayamos definido para la tabla en conjunto y para la fila en general.
* CHAR= " char ", donde char es un caracter de determinado por nosotros. Este atributo define el el caracter
que queremos usar como referencia para alinear el texto de las celdas de la fila, es decir, especifica el caracter
sobre el que se alineara la celda. Solamente vale si en ALIGN se ha puesto el valor "char".
Ejemplos.-
* CHAROFF="n". asume un valor cuantitativo (en unidades o porcentaje) que especifica la compensacin
del caracter de alineacin. Solamente vale si en ALIGN se ha puesto el valor "char.
<TABLE
BGCOLOR="#CCFF00">
BORDER="0"
UNO DOS
UNO DOS
* STYLE="atributo:valor;atributo:valor;.". Especifica informacin de estilo sobre las celdas de la fila.

Este atributo y sus parametros vienen de las especificaciones del W3C sobre Cascading Style Sheet (Hojas de
25
Estilo en Cascada), y con l se puede modificar completamente la presentacin de la tabla y de su contenido.

alguno de sus atributos y valores slo se ven en Internet Explorer.
<TR STYLE="background-color:yellow;fontsize:12pt; text-ALIGN:center;">
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
UNO DOS
UNO DOS
* TITLE="titulo", para titular un documento o una seccin del mismo. algunos programas visores pueden
colocar el valor de este atributo como texto insertado o audio.
* CLaSS="clase". En la actualidad se utiliza segn las especificaciones del W3C para esTABLEcer una clase
de estilos a la fila y su contenido. Para mas informacin consultar manuales de CSS.
* ID="nombre". analogo al atributo CLaSS, pero identifica la fila como un objeto nico, con sus atributos de
estilo definidos en lnea mediante el atributo STYLE, en la cabecera del documento HTML o en un archivo
externo de extensin .css. Ver manuales de CSS.
* DIR="direccion". Se usa para indicar la direccin del texto y de las columnas. asume los valores: ltr (de
izquierda a derecha) y rtl (derecha a izquierda). Cuando el valor es rtl, el ordenamiento de las columnas
comenzara por el tope arriba a la derecha.
7 <THEAD> <TBODY> <TFOOT> . La etiqueta <THEaD> introduce la cabecera de la tabla. Despus de la
etiqueta puede situarse una fila o mas de la tabla pertenecientes a la cabecera de la tabla, cerrandose luego la
misma con la etiqueta</THEaD>.
El cuerpo de la tabla se introduce con la etiqueta<TBODY>. Despus de la etiqueta puede anotar el campo
para los datos de la tabla, o sea su cuerpo. Con </TBODY> se cierra el cuerpo de la tabla.
El pie de la tabla lo introduce con la etiqueta <TFOOT>. Despus de la etiqueta puede anotar una fila o mas
pertenecientes al pie de la tabla. Con </TFOOT> cierra el pie de la tabla.
La utilidad de estas etiquetas es mas bien estructural que practica, ya que su misin es subdividir en el cdigo
la tabla en secciones, con lo que resulta mas claro en su lectura.
ETIQUETAS <TD> <TH> Y SUS ATRIBUTOS.

<TD></TD>, <TH></TH>. Con esta pareja de etiquetas definiremos y delimitaremos cada una de las celdas de las
filas de la tabla. Las dos parejas de etiquetas son equivalentes, siendo su diferencia que mediante <TH></TH>
definiremos encabezados de columna, por lo que el texto que figure en su interior aparecera en negrita y centrado.
Los principales atributos son:
* BGCOLOR= " color", donde color puede venir en su nombre web en ingls o en su valor hexadecimal. Al igual
que con la etiquetas <TABLE> y <TR>, este atributo va a establecer el color del fondo de cada celda, prevaleciendo
este color sobre el que hayamos definido para la tabla en conjunto y para la fila en general.
Ejemplos.<TABLE BORDER="0" BGCOLOR="blue">
<TR BGCOLOR="orange">
<TD BGCOLOR="#003366">UNO</TD>
UNO DOS
UNO DOS
<TD>DOS</TD>
</TR>
<TR>
<TD>UNO</TD>
<TD BGCOLOR="red">DOS</TD>
</TR>
</TABLE>
* BACKGROUND= " ruta de imagen ", donde ruta de imagen puede ser la ruta relativa en el directorio de
archivos del servidor o una URL de Internet dnde se encuentra la imagen. Este atributo es del todo analogo al de
las etiquetas <TABLE>> y <TR>, tiene sus mismas limitaciones respecto a especificar una ruta URL y nos permite
definir una imagen de fondo para toda una fila.
Hay que tener mucho cuidado, ya que la imagen utilizada debe ser del mismo tamao que la fila de la tabla, ya que
si no el efecto no sera el correcto.
Ejemplo<TABLE BORDER="1">
<TR>
<TD BACKGROUND= "fondo1.gif ">UNO</TD>
<TD>DOS</TD>
</TR>
<TR>
<TD>UNO</TD>
<TD BACKGROUND= "fondo1.gif ">DOS</TD>
</TR>
</TABLE>
UNO DOS
UNO DOS
* ALIGN = " left /center /right / justify / char ". Este atributo va a definir si el texto o la imagen que va a ir en la
celda va a estar alineados a la izquierda, en el centro o a la derecha de cada celda. Su valor por defecto es LEFT, por
lo que si no especificamos nada el contenido de la celda aparecera alineado a la izquierda.
Ejemplo<TABLE BORDER="1" WIDTH="200">
<TR >
<TD WIDTH="100" ALIGN = "center ">UNO</TD>
</TR>
<TR >
<TD WIDTH="100" ALIGN = "right ">DOS</TD>
</TR>
</TABLE>
UNO
DOS
UNO
DOS
* VALIGN = " top / middle / baseline / bottom ". Nos permite alinear verticalmente el contenido de la celda en la
parte superior, en medio, que todas las celdas sean alineadas a una lnea base comn (o sea, de tal manera que el
primer rengln de cada celda comienza a una misma altura) o abajo respectivamente. Su valor por defecto es
MIDDLE, situando el contenido de la celda verticalmente en medio de la misma
Ejemplo<TABLE BORDER="1" WIDTH="200" HEIGHT="150">
<TR>
<TD VALIGN = "top">UNO</TD>
UNO
DOS
UNO
DOS
26
<TD>DOS</TD>
</TR>
<TR>
<TD>UNO</TD>
<TD VALIGN = "bottom">DOS</TD>
</TR>
</TABLE>
* WIDTH= "n", donde n=n de pxeles tanto por ciento. Con este atributo se especifica el ancho que va a tener
cada celda. Si queremos que las celdas sean del mismo tamao es necesario que especifiquemos el ancho en tanto
por ciento, ya que si no es as, dependiendo del espacio que necesite el contenido de la celda, esta se ampliara por s
sola.
* HEIGHT= "n", donde n=n de pxeles tanto por ciento. Con este atributo se especifica el alto que va a tener
cada celda. Normalmente el alto de la celda se suele dejar que lo coja ella misma, adptandose a las necesidades del
texto o imagen que contiene. La especificacin HEIGHT, al contrario de la especificacin WIDTH, no es estandar
HTML, sin embargo es interpretada por los navegadores que interpretan tablas.
Ejemplos.<TABLE WIDTH="50%" ALIGN="right" BORDER="1">
<TR>
<TD WIDTH="50%">UNO</TD>
<TD WIDTH="50%">DOS</TD>
</TR>
</TABLE>
<TABLE WIDTH="75%" HEIGHT="40"

BORDER="3">
<TR>
</TR>
</TABLE>
UNO
UNO
DOS
ALIGN="center"
<TR>
<TD WIDTH="33%">TRES</TD>
</TR>
<TR>
<TD WIDTH="33%">TRES</TD>
</TR>
</TABLE>
*ROWSPAN= "n". donde n = n entero. Este atributo nos permite combinar varias celdas en una sola, de tal forma
que esta ocupara todo el espacio reservado para las que contiene.
*COLSPAN= "n". donde n = n entero. Este atributo nos permite combinar varias columnas en una sola, de tal
forma que esta ocupara todo el espacio reservado para las que contiene.
Estos dos ltimos atributos son de los mas tiles de los que disponemos para crear tablas, pero su uso entraa ciertas
dificultades, que slo se evitan con un buen conocimiento y practica.
Ejemplos.<TABLE WIDTH="50%" CELLPADDING="5" CELLSPACING="0" BORDER="1">
<TR>
<TD COLSPAN="3" ALIGN="center">CELDA ESPANDIDA</TD>
</TR>
UNO
DOS
TRES
UNO
DOS
TRES
<TABLE WIDTH="75%" CELLPADDING="2" CELLSPACING="0" BORDER="1">

<TR>
<TD ROWSPAN="3">CELDA ESPANDIDA</TD>
</TR>
<TR>
</TR>
<TR>
</TR>
</TABLE>
CELDA ESPANDIDA
DOS
CELDA ESPANDIDA
UNO
DOS
UNO
DOS
UNO
DOS
*NOWRAP. Este atributo evita que el texto de un parrafo contenido en la celda d un salto de lnea automatico
cuando se llaga al lmite derecho de la celda. Como conclusin, si se utiliza este atributo, cuando se llega al final de
ancho especificado por WIDTH, la celda seguira abrindose mas y mas, para dar cabida al texto que la contiene. Si
no se utiliza NOWRAP, al llegar el texto al lmite derecho de la celda se produce un salto de lnea. Como
observacin, no siempre implementan muy bien este atributo los navegadores, comportandose a veces la tabla de
una forma inesperada.
Ejemplo<TABLE WIDTH="30%" BORDER="1">
<TR>
<TD WIDTH="50%">SUPERCALIFRAGILISTICO<</TD>
</TR>
</TABLE>
SUPERCALIFRAGILIS
DOS
TICO
27
<TABLE WIDTH="30%" BORDER="1" NOWRAP>

<TR>
<TD WIDTH="50%">SUPERCALIFRAGILISTICO<</TD>
</TR>
</TABLE>
<CAPTION></CAPTION>. Esta pareja de etiquetas permite asociar un titular a la tabla. Slo admite el
atibuto ALIGN, que puede tomar los valores TOP ,LEFT, RIGTH y BOTTOM, que situaran el ttular arriba
centrado (titulo de tabla),arriba a la izquierda, arriba a la derecha o abajo centrado (pie de tabla). El valor por
defecto es TOP.
SUPERCALIFRAGILISTICO DOS
<table width="150" cellpadding="2" border="1">

<caption align="bottom">Mi tabla</caption>
<tr>
<td>UNO</td>
<td>DOS</td>
</tr>
</table>
Ejemplos.-
* SUMMARY="descripcion". Permite introducir un resumen, o un comentario para especificar el objeto y / o

contenido de la celda. No se muestra en el navegador.
* CHAR= " char ", donde char es un caracter de determinado por nosotros. Este atributo define el el caracter que
queremos usar como referencia para alinear el texto de la celdas, es decir, especifica el caracter sobre el que se
alineara la celda. Solamente vale si en ALIGN se ha puesto el valor "char".
UNO
* CHAROFF="n". Asume un valor cuantitativo (en unidades o porcentaje) que especifica la compensacin del
caracter de alineacin. Con este atributo se puede especificar en que posicin el smbolo debe aparecer por primera
vez. Solamente vale si en ALIGN se ha puesto el valor "char.
NOTA: Ni Netscape niInternet Explorer interpretan esta especificacin de alineacin por smbolos en la versin 4.x
de sus productos.
* STYLE="atributo:valor;atributo:valor; ...". Especifica informacin de estilo sobre la celda de la tabla. Este
atributo y sus parametros vienen de las especificaciones del W3C sobre Cascading Style Sheet (Hojas de Estilo en
Cascada), y con l se puede modificar completamente la presentacin de la tabla y de su contenido. Alguno de sus
atributos y valores slo se ven en Internet Explorer.
<TR>
<TD STYLE="background-color:yellow;font-size:12pt; textalign:center;">UNO</TD>
<TD>DOS</TD>
</TR>
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
<TABLE WIDTH="150" CELLPADDING="2" BORDER="1">

<CAPTION ALIGN="right">Mi tabla</CAPTION>
<TR>
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
</TABLE>
Mi tabla
UNO
UNO
DOS
UNO
DOS
* TITLE="titulo", para titular un documento o una seccin del mismo. Algunos programas visores pueden colocar
el valor de este atributo como texto insertado o audio.
* CLASS="clase". En la actualidad se utiliza segn las especificaciones del W3C para establecer una clase de
estilos a la celda y su contenido. Para mas informacin consultar manuales de CSS.
* ID="nombre". Analogo al atributo CLASS, pero identifica la celda como un objeto nico, con sus atributos de
estilo definidos en lnea mediante el atributo STYLE, en la cabecera del documento HTML o en un archivo externo
de extensin .css. Ver manuales de CSS.
* DIR="direccion". Se usa para indicar la direccin del texto y de las columnas. Asume los valores: ltr (de
izquierda a derecha) y rtl (derecha a izquierda). Cuando el valor es rtl, el ordenamiento de las columnas comenzara
por el tope arriba a la derecha.
Mas etiquetas de tabla
DOS
Mi tabla
DOS
7 <COLGROUP>...</COLGROUP>. Se utilizan para comunicarle al navegador al principio de la tabla

cuantas columnas tiene la misma, para que as pueda cargar la tabla mucho mas rapido, o sea que una parte de
la tabla sea visualizada antes de que la totalidad de la tabla haya sido leda. Sin embargo navegadores antiguos
(Netscape 3.x, MS Internet Explorer 3.x) no interpretan tales especificaciones. La etiqueta </COLGROUP> es
opcional, pero se recomienda colocarla siempre, al igual que ocurre con las demas etiquetas, por claridad de
cdigo.
Ejemplo.<table border>
<colgroup>
<col width="80" bgcolor="red">
<col width="100" bgcolor="yellow">
<col width="220" bgcolor="blue">
</colgroup>
<tr>
<td>primer rengln, primera columna</td>
<td>primer rengln, segunda columna</td>
<td>primer rengln, tercera columna</td>
</tr>
</table>
primer
rengln,
primera
columna
primer
rengln,
segunda
columna
primer
rengln,
tercera
columna
Si no se aaden las etiquetas <COL> con su anchura dada por WIDTH=" x ", entonces las anchura de cada
columna sera la necesaria para contener lo que situemos en el interior de la celda mas ancha de ella.
28
Si queremos obtener una tabla con columnas de igual anchura deberemos aadir a la etiqueta <COLGROUP>
los atributos SPAN="n" y WIDTH="x", con lo que obtendremos n columnas de x pixels cada una.
Ejemplo.<table border>
<colgroup span="3" width="200">
</colgroup>
<tr>
<td>primer rengln, primera columna</td>
<td>primer rengln, segunda columna</td>
<td>primer rengln, tercera columna</td>
</tr>
</table>
primer
rengln,
primera
columna
primer
rengln,
segunda
columna
primer
rengln,
tercera
columna
Para especificar el ancho de las celdas mediante el atributo WIDTH disponemos de 3 opciones:
1) mediante un nmero, con lo que la anchura sera absoluta y vendra dada en pxeles.
2) mediante un tanto por ciento, con lo que la anchura sera relativa, viniendo determinado el ancho de cada
columna por su % en relacin al ancho total de la tabla.
3) mediante una relacin de anchura relativa de las columnas entre s, independientemente de la anchura de la
tabla en relacin con la ventana de visualizacin, dando al atributo de anchura un valor del tipo WIDTH="n*".
La estrella es tan slo una seal para el navegador, para que no interprete el nmero anterior como pxel. Este
procedimiento debera funcionar bien, pero slo lo hace en ocasiones.
Tambin la etiqueta <col> puede contener el atributo span=. De tal forma no agrupa varias columnas en una,
sino que los atributos de esa columna son validos para las prximas columnas dadas. Por ejemplo si aade
<col span="3" width="100">, entonces esa y las siguientes 2 columnas obtienen una anchura de 100 pxeles.
La etiqueta <colgroup> puede contener ademas los atributos span= y width= ,si debajo
de ella, son definidas etiquetas <col>. En tal caso la cantidad de etiquetas <col>
definidas reemplaza las especificacionesque han sido hechas con la etiqueta <colgroup
span= > y el atributo width= dentro de la etiqueta <col> tiene primaca sobre el atributo
width= en la etiqueta<colgroup>.
TABLAS ANIDADAS
Las tablas se pueden anidar unas con otras, es decir, podemos situar una tabla o tablas dentro de otra, para
conseguir un efecto complejo de maquetacin.
La forma de operar es teoricamente sencilla: basta con introducir una tabla con toda su estructura dentro de
una celda de la tabla madre. Ahora bien, en la practica en un proceso un tanto lioso, por lo que es
recomendable efectuar este proceso mediante un editor web de tipo visual, como Dreamweaver, Homesite o
FrontPage, y luego limpiar el cdigo que originan.
Un factor a tener en cuenta es, si no deseamos lo contrario, tener especial cuidado en fijar los atributos de
BORDER, CELLSPACING Y CELLPADDING de la tabla hija a cero, para no producir efectos indeseados.
Se pueden anidar cuantas tablas queramos, pero es recomendable practicar antes, pues obtenemos un cdigo
denso y complicado, que puede marearnos bastante.
Ejemplo-

<TR ALIGN="center">
<TD>UNO</TD>
<TD>DOS</TD>
</TR>
<TR>
<TD>TRES</TD>
<TD>
<TABLE WIDTH=100%>
<TR>
<TD>HIJO 1</TD>
<TD>HIJO 2</TD>
</TR>
<TR>
<TD>HIJO 3</TD>
<TD>HIJO 4</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
UNO
DOS
TRES
HIJO 1
HIJO 3
HIJO 2
HIJO 4
USO DE LAS TABLAS

7 MAQUETACION.
Una de las principales aplicaciones de las tablas va a ser permitirnos maquetar y distribuir adecuadamente el
contenido de nuestras paginas web, de una forma analoga a como se maquetan los periodicos. Esa forma de
operar slo se poda conseguir con tablas hasta la entrada en vigor de las Hojas de Estilo en Cascada, CSS, y
mas concretamente de CSS-Positioning.
De esta forma, si queremos distribuir el contenido de una pagina en columnas tendremos que crear un tabla
que tenga tantas celdas en una fila como columnas deseemos en nuestra pagina, y en cada una de las celdas
colocaremos el contenido de cada columna. Eso s, deberemos tener especial cuidado en no sobrepasar con el
contenido en alto de cada celda en la pagina, ya que si no es as se nos descolocara todo, al intentar adaptarse
la celda a su contenido. Por esto, es conveniente siempre establecer una alineacin vertical a las celdas, para
evitar descompensaciones, mediante el atributo VALIGN="top". Introduciremos por ahora un valor
CELLPADDING="8", para que no se nos junten los bloques de texto.
Conviene comenzar asignando un borde de 1 pxel a la tabla, para referenciarnos bien, y cuando hayamos
finalizado le quitamos el borde. Esto es lo que se llama una "tabla oculta".
Ejemplo,<TABLE WIDTH="100%" BORDER="0" CELLPADDING="8">
<TR VALIGN="top">
<TD WIDTH="33%">Este es el contenido de la primera columna de nuestra maravillosa pagina
web...</TD>
<TD WIDTH="33%">Seguimos con el contenido de la segunda columna, para que nos quede un acabado
profesional....</TD>
<TD WIDTH="33%">Y acabamos con todo lo que queramos poner en la ltima columna. ?A que ha
quedado todo muy bonito?.</TD>
</TR>
</TABLE>
29
Este es el contenido de la primera Seguimos con el contenido de la Y acabamos con todo lo que
columna de nuestra maravillosa segunda columna, par que nos queramos poner en la ltima
pagina web...
quede un acabado profesional....
columna. ?A que ha quedado todo
muy bonito?.
? Y si queremos que entre las columnas haya una lnea vertical de color?.
Bueno, podramos pensa que mediante el atributo BORDERCOLOR Podramos lograr algo parecido, pero
esta no es la solucin adecuada, ya que los atributos de borde de color slo los posee Internet Explorer, y si los
quisieramos de color gris, asequibles para ambos navegadores, se nos pintaran todos los bordes, con lo que no
conseguiramos el efecto deseado.
La solucin correcta pasa por introducir celdas que contengan una imagen en formato gif, del color que
deseemos, que tenga un ancho igual al que nosotros deseemos para la lnea de separacin y un ancho igual al
alto de la celda. El inconveniente de este mtodo es que segn la resolucin de pantalla y del navegador usado,
la lnea puede aparecer un poco mas alta o un poco mas baja.
Otra posible solucin sera mediante el atributo BGCOLOR, situando una celda de ancho 1 2 pxeles entre
cada celda de texto, y dandole un color de fondo, pero en este caso deberemos introducir un gif de 1x1 pxeles,
de color transparente, en cada una de estas celdas. El motivo de esto se explica mas abajo.
Ejemplo,- Creamos una imagen "linea.gif", de 10px de alto y 1px de ancho. Luego le daremos el alto que nos
convenga...
<TABLE WIDTH="100%" BORDER="0" CELLPADDING="8">
<TR VALIGN="top">
<TD><IMG SRC="images /linea.gif" WIDTH="1" HEIGHT="70" BORDER="0"></TD>
web...</TD>
</TR>
</TABLE>
Este es el contenido de la
primera columna de nuestra
maravillosa pagina web...
Seguimos con el contenido de

la segunda columna, par que
nos
quede
un
acabado
profesional....
Y acabamos con todo lo que

queramos poner en la ltima
columna. ?A que ha quedado
todo muy bonito?.
Hemos visto arriba que al introducir un valor CELLPADDING= "8"para separar las celdas el resultado
obtenido no es el deseado. Si queremos dejar espacio entre las columnas deberemos olvidarnos de los atributos
CELLSPACING o CELLPADDING, ya que el resultado no sera el deseado, pues las celdas se nos abriran por
todos lados.
La solucin pasa por dejar una columna (celda) de ancho la separacin que deseemos entre cada columna de
texto. Pero si situamos celdas vacias no siempre nos cogeran el ancho que deseemos, ya que entonces los
navegadores no reconocen con exactitud el atributo WIDTH. Para solucionar esto, situaremos dentro de las
celdas de separacin un espacio ( ) o un gif transparente o del color del fondo de 1x1 pxeles. El cdigo y su
resultado seran:
<TABLE WIDTH="90%" BORDER="0" CELLPADDING="8">
<TR VALIGN="top">
web...</TD>
<TD WIDTH="20"> </TD>
<TD WIDTH="20"> </TD>
</TR>
</TABLE>
maravillosa pagina web...
Seguimos con el contenido de

la segunda columna, par que
nos quede un acabado
profesional....

columna. ?A que ha quedado
todo muy bonito?.
Otra cuestin que podemos resolver con tablas es cuando queremos una distribucin de pagina tal que tenga
unas cabeceras digamos a 5 pxeles del extremo izquierdo y luego una serie de celdas abajo cuyo contenido se
situe mas a la izquierda, digamos a 20 pxeles. Para conseguir esto introduciremos una imagen en unas celdas
de separacin. En el siguiente ejemplo vamos a introducir una imagen de 1x1 pxeles, de color rojo para que la
podais ver, aunque en un caso real la pondramos transparente, para que no se apreciara, con lo que el efecto
conseguido sera el correcto.
El cdigo necesario para lograr esto sera del tipo:
<TABLE CELLSPACING="0" CELLPADDING="5" BORDER="0">
<TR>
<TD COLSPAN="2">Cabecera</TD>
</TR>
<TR>
<TD WIDTH="5"><IMG SRC="images/punto.gif" WIDTH="1" HEIGHT="1" BORDER="0"></TD>
<TD>Texto 1</TD>
</TR>
<TR>
<TD>Texto 2</TD>
</TR>
<TR>
<TD>Texto 3</TD>
</TR>
</TABLE>
Esquema
Resultado
Cabecera
Cabecera
Texto 1
Texto 1
Texto 2
30
Texto 2
Texto 3
contina
columna...
la
primera
Y contina la
gusta...! A practicar!
segunda...
Texto 3
Notas:
1.
2.
3.
La imagen "punto.gif" debe ser transparente o del mismo color del fondo, y en este caso debe ser
de un color de paleta web. Recordemos que Nestcape posee por defecto una paleta con 256 colores
nicamente. Si el color no pertenece a esta paleta, el punto se vera de otro color que el fondo,
estropeando el efecto que buscamos.
El atributo de tabla CELLPADDING debe tener el valor que deseemos que tenga de separacin la
cabecera del margen izquierdo.
Por lo tanto, el ancho de las celdas de la imagen debe ser= 20(que queramos)-(5+5) que nos da el
CELLPADDING en la celda de imagen-5 que nos da el CELLPADDING en las celdas de los
textos. Resumiendo, con un poco de entrenamiento obtendremos el resultado deseado siguiendo
este mtodo.
* Si queremos una disposicin de pagina en la que haya columnas con bloques de texto separados por una
lnea horizontal entre ellos, podemos hacer dos cosas:
i.
Establecer celdas horizontales que contengan una imagen de 1 pxel de alto y de ancho igual al de
la celda.
ii.
Establecer bloques verticales de texto, introduciendo al final de cada uno un salto de lnea y una
imagen como la del apartado anterior.
Ejemplo<TABLE WIDTH="100%" CELLPADDING="8" BORDER="0">
<TR VALIGN="top">
<TD WIDTH="30%">Este es el contenido de la primera columna de nuestra maravillosa pagina web...
<BR>
<IMG SRC="images/puntorojo.gif" WIDTH="200" HEIGHT="1" BORDER="0">
<BR>
y ahora continuamos con e texto que queramos...
</TD>
profesional....
<BR>
<BR>
y ahora continuamos con el texto de la segunda...
</TD>
<TD WIDTH="30%">Y acabamos con todo lo que queramos poner en la ltima columna.
<BR>
<BR>
?A que ha quedado todo muy bonito?.
</TD>
</TR>
</TABLE>
maravillosa pagina web.
Y
ahora
Seguimos con el contenido

de la segunda columna, para
que nos quede un buen
acabado.

columna.
Pus si te
Si no queremos usar una imagen podemos situar una lnea horizontal mediante la etiqueta <HR>, pero
entonces slo podremos darle color para Internet Explorer, usando hojas de estilo, pero en Nestcape se vera
siempre del color grs estandar.
RECUADROS CON BORDE.
Otro uso de las tablas es cuando queremos obtener una cuadrado enmarcado por un borde de color. Este
efecto no se puede conseguir adecuadamente con los atributos de borde de tabla ni con los de color de fondo;
ni siquiera aplicando "capas" (<DIV> o <SPAN>) con bordes, ya que Nestcape no admite bien estas
propiedades. Para conseguirlo, deberemos crear una tabla que tenga una celda superior, una inferior y dos
laterales, con una imagen de 1 pxel del color que queramos, quedando una celda en el interior para colocar el
contenido de celda deseado. Y esto lo logramos mediante los atributos COLSPAN y ROWSPAN.
La idea es crear una tabla de 3 filas x 6 columnas, y luego espandir celdas o columnas para quedarnos con
una nica celda interior enmarcada. Deberemos establecer CELLPADDING="0" y CELLSPACING="0", para
que no se nos abran las celdas de borde.
Ejemplo.Esquema de la tabla (observa que he introducido una imagen de 1 pxel para que las celdas cogan su
tamao adecuado. Esta imagen esta en todas las celdas, al no tener estas ningn contenido en el esquema):
El cdigo HTML correspondiente es:

<table width="380" height="50" cellspacing="0" cellpadding="0" border="0" bgcolor="#6a7da5"
align="center">
<tr>
<td rowspan="3" width="1" height="50"><img src="images/puntorojo.gif" width="1px" height="50"
border="0" alt=""></td>
<td colspan="4" height="1"><img src="images/puntorojo.gif" width="380" height="1" border="0"
alt=""></td>
<td rowspan="3" width="1"><img src="images/puntorojo.gif" width="1px" height="50" border="0"
alt=""></td>
</tr>
<tr>
<td colspan="4" align="center" height="48"><font color="white"><b>Texto de tabla</b></font></td>
</tr>
<tr>
<td colspan="4" height="1"><img src="images/puntorojo.gif" width="380" height="1" border="0"
alt=""></td>
</tr>
</table>
31
Y el resultado obtenido:
Texto de tabla
Hay que observar:

1.
El alto de la tabla nos lo va a determinar al atributo HEIGHT de las imagenes laterales.
2.
El ancho de la tabla lo fijamos en pxeles en el atributo WIDTH de <TABLE> y le damos el mismo
ancho a las imagenes de las celdas superior e inferior.
3.
A la celda expandida central le damos un ancho de 2 pxeles menos que a la tabla en general, para
descontar los dos pxeles que suman las dos imagenes laterales.
4.
Hay que fijar bordes de tabla y espacios entre celdas y celdas y contenido en cero pxeles.
5.
Si damos color de fondo a la celda central, obtendremos un bonito resultado.
para lo que
esquema:
usamos
el
7 SEGMENTACIN DE IMaGENES.
Otro uso de las tablas es la divisin de imagenes de gran tamao o peso en una serie de partes, que luego
podremos ir colocando en celdas de una tabla, de forma que la suma de todas las piezas nos muestre la imagen
total.
Esto es muy til cuando tenemos imagenes que por su tamao o peso van a tardar mucho en descargarse del
servidor, lo que puede originar que nuestro visitante se canse de esperar y nos deje. Una solucin alternativa a
este problema es el uso de imagenes con interlazado o descarga progresiva.
Tambin es til este mtodo cuando queremos crear un gif animado con una imagen de gran tamao en la que
slo una/unas partes van a tener animacin. Podemos entonces establecer unas partes fijas para la imagen y
otras con animacin, con lo que el tiempo de carga sera mucho menor.
Asmismo, podemos crear una especie de mapa de imagen, en la que cada pieza de la imagen enlazara con
una pagina diferente.
Ahora construimos el cdigo HTML de la tabla, que tendra 2 filas y 3 columnas, y en la que vamos a
expandir varias celdas, de acuerdo con nuestras necesidades:
Para conseguir todas estas opciones, los pasos a seguir son:

1.
hacernos un esquema de divisin de la imagen y otro de la tabla que deberemos crear para esa
forma de divisin, procurando que sean compatibles.
2.
cargar la imagen en un programa grafico, procediendo a su divisin, teniendo muy en cuenta el
tamao en pxeles que tiene cada una de ellas, para poder construir luego la tabla a su medida.
3.
por ltimo, construir la tabla que va a contener las pieza, teniendo en cuenta que la tabla debe tener
como atributos BORDER="0", CELLSPACING="0" y CELLPADDING="0", para que las pieza
encajen con exactitud.
4.
<TABLE WIDTH="175" height="250" BORDER="0" CELLPADDING="0" CELLPADDING="0"

ALIGN="center">
<TR>
<TD ROWSPAN="2" WIDTH="59" HEIGHT="250" VALIGN="top">
<img src="images/pieza_1.jpg" width="59" height="250" border="0" alt="pieza 1">
</TD>
<TD COLSPAN="2" WIDTH="116" HEIGHT="1020" VALIGN="top">
</TD>
</TR>
<TR>
<TD WIDTH="74" HEIGHT="148" VALIGN="top">
</TD>
<TD WIDTH="41" HEIGHT="148" VALIGN="top">
</TD>
5.
Ejemplo.- Supongamos que queremos "partir" la siguiente imagen:
Cargamos la imagen en un programa grafico (PhotoShop, Corel Draw, Adobe Ilustrator, etc.) y la dividimos
en las 4 partes del esquema, teniendo especial cuidado en anotar sus dimensiones, para dimensionar luego la
tabla adecuadamente.
Una vez hecho obtenemos las siguientes piezas.
32
<TD WIDTH="15">15</TD>
</TR>
</TABLE>
Lo que nos da:
</TR>
</TABLE>
14 7 58 125 2 00 26
* Esta tcnica se puede utilizar tambin para crear graficos de barras, pero ahora el ancho de la imagen debe
ser fijo, variando la altura de la misma en cada celda. Podemos as hacer graficos estaticos, y mediante un
programa CGI o mediante el uso de las tecnologas ASP o JSP podremos modificar el parametro HEIGHT de
cada barra, creando as graficos dinamicos.
Con lo que obtendremos nuestra imagen "entera".
7 CDIGOS DE BARRAS.
Otro uso que podemos darle a las tablas es la creacin de cdigos de barras de una forma sencilla. Slo nos
hace falta un imagen del color que queramos que tengan las barras.
La idea es crear una tabla con dos filas y tantas columnas como barras queramos. El la fila superior iran las
barras, creadas con celdas que contendran una imagen de alto constante y de ancho el que queramos que tenga
la barra. En la fila inferior iran los nmeros que correspondan a las barras.
Ejemplo.<TABLE CELLSPACING="2" CELLPADDING="2" BORDERr="0">
<TR>
<TD WIDTH="15"><IMG SRC=" images/punto.gif" WIDTH="10" HEIGHT="70" BORDER="0"
ALT="">
<TD WIDTH="15"><IMG SRC=" images/punto.gif" WIDTH="5" HEIGHT="70" BORDER="0" ALT="">
</TD>
</TD>
<TD WIDTH="15"><IMG SRC=" images/punto.gif" WIDTH="10" HEIGHT="70" BORDER="0"
ALT="">
</TD>
</TD>
</TD>
</TR>
<TR>
<TD WIDTH="15">112</TD>
. MARCOS PARA IMGENES

Otro uso de las tablas es la creacin de marcos para mostrar imagenes, pudiendo dar con ellas la sensacin de
que nuestro imagen se incluye en un verdadero marco, como si fuese un cuadro. Estas presentaciones son
faciles de hacer y resultan muy vistosas. Se hacen utilizando los atributos BORDER, BGCOLOR,
CELLPADDING y CELLSPACING.
Ejemplo.<TABLE CELLSPACING=0 CELLPADDING=1 BGCOLOR="#663333" BORDER=4 ALIGN="center">
<TR>
<TD COLSPAN= "2">
<TABLE CELLSPACING=0 CELLPADDING=14 BORDER=1 BGCOLOR="#FFFFFF">
<TR>
<TD><img src="images/Image1.gif" WIDTH="79" HEIGHT="89" BORDER="0" ALT="">
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
33
ONKEYPRESS: es un atributo definido como un "evento intrnseco". Este evento o suceso esta
definido por el valor del atributo, que es un pequeo programa script (JavaScript, VBScript o Tcl). En
este caso, el suceso ocurre cuando una llave o clave es presionada o soltada sobre un elemento. (HTML
4.0).
ONKEYDOWN: es un atributo definido como un "evento intrnseco". Este evento o suceso esta
este caso, el suceso ocurre cuando una llave o clave es mantenida presionada sobre un elemento. (HTML
4.0).
ONKEYUP: es un atributo definido como un "evento intrnseco". Este evento o suceso esta
este caso, el suceso ocurre cuando una llave o clave es soltada sobre un elemento. (HTML 4.0).
Todos estos eventos se pueden aplicar a la tabla en su totalidad (dentro de la etiqueta <TABLE> ), a una fila o
filas (en la etiqueta <TR> ) o a una celda o celdas (dentro de <TD> o <TH> ).
Veremos ejemplos de eventos en tablas cuando desarrollemos el tema de JavaScript y el de CSS. Como
muestra, un botn: (slo funciona en Internet Explorer)
EVENTOS PARA TABLAS

Un evento es una accin en el tiempo que efecta el usuario de una aplicacin, en nuestro caso la persona que
esta viendo nuestra pagina, y que origina una respuesta predeterminada de dicha aplicacin o pagina web.
Podemos establecer diferentes eventos para las tablas, que nos van a permitir modificar alguno de sus
atributos, llamar funciones de JavaScript, etc.
Los eventos soportados por las tablas son:
ONCLICK: es un atributo definido como un "evento intrnseco". Este evento o suceso esta
este caso, el suceso ocurre cuando se toca un botn sobre determinado elemento desplegado en pantalla.
(HTML 4.0).
ONDBLCLICK: es un atributo definido como un "evento intrnseco". Este evento o suceso esta
este caso, el suceso ocurre cuando se toca dos veces el botn. (HTML 4.0).
ONMOUSEDOWN: es un atributo definido como un "evento intrnseco". Este evento o suceso

esta definido por el valor del atributo, que es un pequeo programa script (JavaScript, VBScript o Tcl).
En este caso, el suceso ocurre cuando se presiona un botn sobre un elemento. (HTML 4.0).
ONMOUSEUP: es un atributo definido como un "evento intrnseco". Este evento o suceso esta
este caso, el suceso ocurre cuando se suelta el botn. (HTML 4.0).
ONMOUSEOVER: es un atributo definido como un "evento intrnseco". Este evento o suceso esta
este caso, el suceso ocurre cuando la flecha sealizadora se mueve sobre un elemento. (HTML 4.0).
ONMOUSEMOVE es un atributo definido como un "evento intrnseco". Este evento o suceso esta
este caso, el suceso ocurre cuando cuando la flecha sealizadora se mueve sobre un elemento.
ONMOUSEOUT: es un atributo definido como un "evento intrnseco". Este evento o suceso esta
este caso, el suceso ocurre cuando la flecha sealizadora se mueve lejos de un elemento. (HTML 4.0).
<table
align="center"
width="25%"
cellspacing="2"
onMouseOver="javascript:alert('hola,?qu tal?')">
<tr>
<td width="50%" align="center">UNO</td>
<td width="50%" align="center">DOS</td>
</tr>
</table>
para ver el efecto, pasa el cursor por encima de la tabla:
UNO
cellpadding="2"
border="1"
DOS
CONSEJOS PARA TABLAS

* A veces, al disear una tablas, vemos que nos aparecen espacios indeseados entre las celdas o filas. Esto
puede ser devido a varias causas:
a.
Una razn es no colocar CELLPADDING y CELLSPACING en 0. Los valores por defecto son
habitualmente 1 y 2 respectivamente.
b.
- Otra razn son retornos de carro entre las celdas:
c.
Si nuestro cdigo es
d.
<TD>
e.
CELDA 1
f.
</TD>
g.
h.
debemos cambiarlo por:
i.
j.
<TD>CELDA 1</TD>
k.
l.
Si nuestro cdigo es:
m.
n.
<TD>
o.
CELDA 1
p.
MAS
q.
AMPLIA
34
r.
s.
t.
u.
v.
w.
x.
y.
z.
aa.
bb.
cc.
dd.
ee.
</TD>
debemos cambiarlo por:
<TD>CELDA 1 MAS AMPLIA </TD>
Si quieremos aadir retornos de carro, debemos hacerlo dentro de las sentencias, mejor que fuera
de ellas:
<TD
BGCOLOR="red"
WIDTH="300"
ALIGN="center"><IMG
WIDTH="150"
HEIGHT="100"
ALT= "logo"></TD></li>< /li>< /li>
* Si usamos las imagenes como enlaces debemos asegurarnos de que el atributo BORDER="0" esta en la
sentencia de la imagen o puede que no slo tengas espacios, sino marcos azules alrededor de secciones enteras
(azul o el color elegido para los enlaces). Es una buena practica incluir BORDER="0" en todas las sentencias
de imagen porque algunos navegadores pueden tenerlo activado por defecto.
Recuerda que estos problemas se pueden presentar solos o combinados. Tambin puede suceder que, una vez
descartadas estas causas, el problema sea indirecto.
* Si usamos tablas invisibles para posicionar los elementos de nuestra pagina deberemos tener en cuenta que
las tablas son visualizadas por los navegadores tan slo despus de que hayan ledo el contenido, o sea en el
momento en que el navegador sabe exactamente de que tamao y anchura es la tabla. Eso significa que los
usuarios tienen que esperar mucho mas hasta que pueda ver algo en la pantalla. En estos casos es conveniente
utilizar el atributo de tabla COLS para predefinir al navegador el n de columnas que va a tener que dibujar.
* Maquetando con tablas debemos poner atencin a que el contenido de todas las columnas definidas tengan
mas o menos el mismo tamao y que no contengan mas contenido que lo que se puede presentar en una
pantalla de 640 x 480 pxeles. As se evita que el usuario siempre "scrolle". Si deseamos poner mas
informacin, entonces es mejor hacer una nueva tabla con las siguientes 3 filas. En caso de que tengamos
encabezamientos o lneas de separacin, que se extienden sobre las tres columnas, debemos tambin hacer otra
tabla. En lugar de tres celdas, es mejor hacer tan slo una y extenderla con la especificacin colspan=3 sobre
las tres columnas.
* Si vamos a usar la tabla para maquetar en su interior un formulario debemos tener especial cuidado en las
limitaciones de ciertos navegadores, como es el caso de Nestcape 4x, ya que si colocamos en una misma celda
de la tabla dos elementos de formulario, como pueden ser dos cajas de texto, o un elemento y un texto
explicativo, este navegador en la mayora de los casos nos parte la celda, produciendo un indeseado salto de
lnea que nos estropea todo el trabajo. En estos casos es necesario introducir cada elemento en una celda
independiente, conlo que resolvemos el problema.
cuyo
esquema es:
Construimos ahora nuestra tabla, cuyo esquema general quedara de la forma:
logo
banner
menu 1
menu 2
menu 4
menu 5
separacin: imagen de 1x1 pxeles transparente
MAQUETACIN AVANZADA
Como aplicacin de todo lo visto con tablas, vamos a ver cmo podemos maquetar una pagina web compleja
desde el principio hasta el fin.
Lo primero que debemos hacee es crearnos un boceto o dibujo de cmo va a ser la pagina, qu elementos va
a tener y cmo van a estar dispuestos.
Por ejemplo, nuestra pagina va a ser del tipo:
35
enlace 1
enlace 2
enlace 3
enlace 4
Contenido
principal
enlace 5
enlace 6
INTRODUCCIN A LOS FRAMES

Un frame es una especie de marco o recuadro independiente en el que podemos cargar una pagina
web. Podemos as dividir una pgina web en diferentes partes o ventanas, cada una con sus propios bordes y
barras de desplazamiento, pudiendo cargar dentro de cada una de ellas una pgina externa independiente.
Pero los frames no se usan aisladamente, si no que una de las caractersticas ms importantes de los frames es
que pulsando un enlace situado en un frame, se puede cargar en otro frame una pgina determinada.
Los frames se definen en una pagina especial, que en su cdigo slo contiene la definicin de los frames o
divisiones y la pgina que se va a cargar dentro de cada uno de ellos, por lo que deberemos crear aparte cada
una de las pginas que van a contener los marcos.
En la pgina donde hemos de definir los frames diremos el nmero de los mismos que queremos que haya, su
tamao y la pgina que van a contener.
La principal diferencia que va a haber a la hora de crear una pgina de frames es que en vez de utilizar la
etiqueta BODY, que sirve normalmente para delimitar lo que se va a ver en la pantalla, se hace uso de la
etiqueta FRAMESET.
El uso de las frames es til para cierto tipo de documentos, pero puede llegar a dificultar la navegacin, ya que
dentro de un documento con frames no tendran utilidad los botones de documento previo (back) ni documento
siguiente (forward), ya que ambos nos trasladaran fuera del documento con frames. Para ver el documento
previo en una de las frames debemos utilizar el botn derecho del ratn sobre ella y seleccionar la opcin volver
en el frame (Back in Frame). Esto hace que cuando se utilicen frames haya que cuidar la correcta transicin
entre documentos.
Etiqueta <FRAMESET>
Las etiquetas <FRAMESET></FRAMESET> son las que van a decirle al navegador dnde empiezan y
dnde acaban los marcos, y el tipo y forma de estos. Entre una y otra irn las definiciones de los diferentes
frames.
Estas etiquetas se deben situar entre <HTML> y </HTML>, pero podemos hacerlo tambin entre </HEAD> y
<BODY>, en incluso podemos no utilizar <BODY></BODY>.
Sus principales atributos o parametros son:
* COLS= " x,y,z,", para definir el n de columnas o marcos verticales que va a tener la ventana, y donde las
variables x,y,z van a definir el tamao de cada marco vertical, pudiendo definirse en pxeles o en porcentaje.
Tambin podemos fijar el tamao de una columna o columnas como * , y en este caso el tamao de esta sera
todo aquel que quede despus de definir mediante puntos o porcentajes las demas columnas.
Si definimos tamaos en pxeles, estos seran absolutos, En este caso si todas las frames se indican de este modo,
los valores se ajustaran para que las frames ocupen la totalidad del espacio de la ventana del navegador, no
guardando siempre la proporcin con la que se definen las frames.
Por el contrario, si empleamos medidas en porcentaje, en este caso si los porcentajes suman un valor distinto del
100%, se ajustaran para que coincidan con el tamao de la ventana. Se podra combinar con el apartado anterior
de forma que algunas frames se definan en valor absoluto y otras en porcentaje.
Posibles combinaciones seran:
1) COLS="100,700"que nos dividira la ventana en dos columnas, una de 100 puntos y la otra de 700.
2) COLS="10%,*"que nos dara una columna con el 10% de la ventana y otra con el resto.
3) COLS="20%,*,*"obteniendo con ello una columna del 20% de la ventana y otras dos que se repartirian
por igual el tamao restante.
4) COLS="*,2*"que nos creara dos columnas, teniendo la segunda el doble de ancho que la primera, es decir,
la primera ocupara el 33% de la ventana y la segunda el 66% restante.
* ROWS=" x,y,z,", para definir el n de filas o marcos horizontales que va a tener la ventana, y donde las
variables x,y,z van a definir el tamao de cada marco horizontal, pudiendo definirse en pxeles o en
porcentaje. Tambin podemos fijar el tamao de una fila o filas como * , y en este caso el tamao de esta sera
todo aquel que quede despus de definir mediante pxeles o porcentajes las demas filas. Las combinaciones
posibles son muchas, siendo su estructura analoga a las vistas para COLS.
Si definimos tamaos en pxeles, estos seran absolutos, En este caso si todas las frames se indican de este modo,
los valores se ajustaran para que las frames ocupen la totalidad del espacio de la ventana del navegador, no
guardando siempre la proporcin con la que se definen las frames.
Por el contrario, si empleamos medidas en porcentaje, en este caso si los porcentajes suman un valor distinto del
100%, se ajustaran para que coincidan con el tamao de la ventana. Se podra combinar con el apartado anterior
de forma que algunas frames se definan en valor absoluto y otras en porcentaje.
* FRAMEBORDER= " 0 / 1 / no / yes ", que nos permite definir si los marcos creados van a tener borde o no.
Los valores 0 y no son equivalentes, eliminando los bordes, as como 1 y yes, que los muestran. Su valor por
defecto es yes / 1 , por lo que si no especificamos nada se veran los bordes de todos los marcos.
Si ademas queremos que no se vean los huecos que originan los bordes invisibles hay que aadir el atributo
FRAMESPACING=0 para Internet Explorer y BORDER=0 para Nestcape.
Ejemplo.<html>
<head>
<title>Mi pagina</title>
</head>
<frameset rows="20%,*" >
<frame name="" src="a.html" marginwidth="10" marginheight="10" scrolling="auto" >
<frame name="" src="b.html" marginwidth="10" marginheight="10" scrolling="auto" >
</frameset>
</html>
O bien sin bordes:
<html>
<head>
</head>
<frameset rows="20%,*" frameborder="0" framespacing="0" border="0">
</frameset>
</html>
36
* BORDER= " n ", con n = n entero = n de pxeles. En el caso de que se haya establecido
FRAMEBORDER=" 1 " o no se haya especificado, este atributo nos permite definir el grosor del borde. Slo
funciona con Nestcape.
* FRAMESPACING= " n ", con n = n entero = n de pxeles. Nos permite definir el espacio entre los marcos,
y en el caso de que se haya establecido FRAMEBORDER=" 1 " o no se haya especificado, este atributo nos
permite definir el grosor del borde. Slo funciona con Explorer.
* BORDERCOLOR= " color ", donde color puede venir especificado mediante su nombre web en ingls o
mediante su cdigo hexadecimal. Nos permite establecer el color de los bordes de los marcos.
Ejemplo.<html>
<head>
</head>
<frameset rows="20%,*" bordercolor="red">
</frameset>
</html>
Etiqueta <FRAME>
La etiqueta <FRAME> define cada uno de los marcos que va a haber en la ventana. Debe ir colocada siempre
entre <FRAMESET> y </FRAMESET>, y debe haber tantas etiquetas como marcos hayamos definido con
COLS y ROWS. Sus atributos son:
Estas etiquetas se deben situar entre <HTML> y </HTML>, pero podemos hacerlo tambin entre </HEAD> y
<BODY>, en incluso podemos no utilizar <BODY></BODY>.
* SRC=" ruta pagina html", que especifica qu pagina se va a cargar en el frame. La ruta de la pagina debe
especificar su localizacin en el sistema de archivos local del servidor web o una URL completa.
Ejemplos.<frame src="principal.html">
<frame src="http://www.yahoo.es">
* NAME=" nombre ", que especifica qu pagina se va a cargar en el frame. La ruta de la pgina debe
especificar su localizacin en el sistema de archivos local del servidor web o una URL completa.
Sirve para asignar un nombre al marco. Es un atributo muy importante, ya que cuando queramos luego cargar
una pagina en un marco mediante un enlace, deberemos decir en qu marco queremos hacerlo, y esto se
consigue haciendo referencia al nombre del marco en el atributo TARGET de la etiqueta <A> del enlace.
Este parametro TARGET esta relacionado con pulsar un enlace en un marco y cargar la pagina enlazada en otro.
Su sintaxis general dentro de la etiqueta <A> es:
<A HREF=" manual.html " TARGET= " cuerpo ">Manual HTML</a>
donde cuerpo es el nombre asisnado a un frame mediante el atributo NAME. Con esto, al pulsar el enlace se
cargara la pagina manual.html dentro del marco llamado cuerpo.
<A HREF=" manual.html " TARGET= " _blank">Manual HTML</a>
y ahora se cargara la pagina en una ventana nueva del navegador, por lo que tendremos dos ventanas abiertas.
<A HREF=" manual.html " TARGET= " _self "</a>
En este caso el la pagina llamada se va a cargar en el propio frame que la llama. Es equivalente a no colocar el
parametro TARGET, por lo que casi no se usa. Se puede usar para modificar el valor dado por BASE.
<A HREF=" manual.html " TARGET= " _parent</a>
y la pagina se mostrara en el marco o <FRaMESET> que llam al documento actual. Si no hay ningn
<FRAMESET> anterior, la pagina llamada se mostrara a pantalla completa, suprimiendo todos los marcos de la
pantalla. Indica que se muestre en la ventana completa, eliminando la estructura de frames que tenga la ventana.
<BASE TARGET= " nombre" </a>

que especifica el frame en el que se mostrara por defecto todos los hiperenlaces del documento actual. Se debe
especificar en la cabecera del documento (HEAD).
<AREA SHAPE=RECT COORDS="x,y,..." HREF="url" TARGET="frame" </a>
que en la definicin de imagenes sensibles en el cliente, indica el frame donde se vera el documento que se
activa en la zona correspondiente de la imagen.
<FORM ACTION="url" TARGET="nombre"</a>
que indica al formulario al que se mandan los datos el frame de destino del resultado de los mismos.
* MARGINWIDTH=" x ", con x = n pxeles o porcentaje. Sirve para definir el margen horizontal que
queremos que haya dentro del frame, entre l os lmites de este y su contenido.
que indica al formulario al que se mandan los datos el frame de destino del resultado de los mismos.
* MARGINHEIGHT=" x ", con x = n pxeles o porcentaje. Nos define el margen vertical que queremos que
haya dentro del frame, entre los lmites de este y su contenido.
Ejemplo.<html>
<head>
</head>
<frame src="a.html" marginwidth="50" marginheight="30">
<frame src="b.html" marginwidth="10" marginheight="0">
</frameset>
</html>
* SCROLLING= " yes / no / auto ", que nos va a permitir establecer si el marco tendra o no barra deslizadora
cuando el contenido del marco exceda al tamao de este.
Sus posibles valores son:
- yessiempre aparecera la barra deslizadora.
- nonunca aparecera. Por lo tanto, si el contenido es mayor que el texto slo podremos ver lo que quepa en el
marco.
- autoslo aparecera el scroll si es necesario para poder visualizar el contenido completo del marco. Este es el
valor por defecto
* NORESIZE. Este atributo impide que el marco pueda ser redimensionado por el visitante arrastrando su
borde. Si no se indica este atributo el marco podra ser redimensionado.
* BORDECOLOR= " color ", con color = nombre color web en ingls o en hexadecimal. Sirve para definir el
color del borde del marco concreto al que se aplica.
* FRAMEBORDER= " 1 / 0 ". Si se ha establecido BORDECOLOR, si su valor es 0 se mostrara el borde sin
efecto 3D en el marco (se percibe mejor en Explorer), y si es 1 s se mostrara este efecto. Adems, si lo
igualamos a cero se eliminara el borde con todos los marcos contiguos que tengan tambin este valor a cero.
Ejemplos.<html>
<head>
</head>
<frame src="a.html" marginwidth="50" marginheight="30" frameborder="0" >
<frame src="b.html" marginwidth="10" marginheight="0" frameborder="0">
</frameset>
37
</html>
O tambin
<html>
<head>
</head>
<frame src="b.html" marginwidth="10" marginheight="0" >
</frameset>
</html>
<html>
<head>
</head>
<frame src="b.html" marginwidth="10" marginheight="0" frameborder="1">
</frameset>
</html>
Etiquetas <NOFRAMES></NOFRAMES>
Este par de etiquetas no son atributos de <FRAME>. Se utiliza para prevenir el caso de que el navegador del
visitante no soporte frames. Deben situarse antes de </FRAMESET>, y dentro de ellas se incluyen <BODY>
texto de aviso </BODY>. Si el navegador no reconoce los frames los ignorara, mostrando el mensaje de aviso.
Este atributo esta actualmente en dehuso, ya que todos los modernos navegadores soportan frames.
Un ejemplo completo de una pagina simple con frames sera:
<html>
<head>
<title>Pagina con frames</title>
</head>
<frameset rows="20%,*" frameborder="yes" bordercolor="yellow" >
<frame name="uno" src="a.html" marginwidth="50" marginheight="30" >
<frame name="dos" src="b.html" marginwidth="30" marginheight="40" >
<noframes>
<body>
Lo siento. Su navegador no soporta frames. Pulse <a href="noframes.html">AQU</a> para acceder a una
pagina sin frames.
</body>
</noframes>
</frameset>
</html>
Frames anidados
Hasta ahora hemos definido frames simples, es decir, la forma de dividir una pgina en una serie de filas o de
columnas que nos posibilitan cargar una pgina html independiente dentro de cada marco.
Pero este diseo de pagina, aunque util, es muy simple. Podemos ir mas alla anidando frames, es decir
introduciendoo frames dentro de otros previamente definidos. As, podemos dividir una fila en columnas, una
columna en filas, etc.
Pero este procedimiento es bastante complejo en su cdigo, por lo que es conveniente ayudarse de alguno de los
muchos programas de creacin web que existen.
Como ejemplo de esta tcnica veamos el siguiente cdigo:

<html>
<head>
</head>
<frameset rows="10%,*" frameborder="1" bordercolor="Green">
<frame name="top" src="top.html" marginwidth="10" marginheight="10" scrolling="no" "noresize
frameborder="0">
<frameset cols="20%,*" >
<frame name="a" src="a.html" marginwidth="10" marginheight="10" scrolling="no" noresize
frameborder="0">
<frame name="b" src="b.html" marginwidth="10" marginheight="10" scrolling="auto" noresize
frameborder="0">
</frameset >
</frameset>
</html>
en la que hemos creado primero dos filas, una con el 10% del alto de ventana y otra con el resto, y luego
hemos sustituido esta ltima fila por dos columnas.
Otro ejemplo sera:
<html>
<head>
</head>
<frameset cols="19%,*" frameborder="1" bordercolor="Green">
<frame name="a" src="a.html" marginwidth="10" marginheight="10" scrolling="no" frameborder="1">
<frame name="top" src="top.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
<frameset cols="50%,*">
<frame name="b" src="b.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="1">
<frame name="c" src="c.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="1">
</frameset>
</frameset >
</frameset>
</html>
FRAMES FLOTANTES
Es posible situar en nuestras pginas web una especie de frames o marcos "flotantes", queriendo decir con esto
que son como frames pero que podemos situarlos en la posicin que queramos dentro de nuestra pgina,
situando mediante coordenadas su vrtice superior izquierdo. Estas ventanas son configurables, pudiendo
definir ademas de su posicin su tamao y otra serie de propiedades.
El mayor inconveniente que encontramos con estas ventanas flotantes es que su implementacin es diferente en
Internet Explorer y en Nestcape. Cada navegador posse una etiqueta y atributos diferentes para crear este tipo
de marcos, no reconociendo uno las marcas del otro. Esta es otra de las consecuencias de la lucha entre ambas
compaas, que como siempre hemos de pagar los creadores web.
Internet Explorer 3.0 y superiores implementa las etiquetas <IFRAME>...</IFRAME>, que van a definir el
principio y fin del marco flotante. Estas etiquetas deben situarse dentro del cuerpo de la pagina que contiene al
marco, es decir, entre <BODY> y </BODY>.
Los principales atributos de la etiqueta <IFRAME> son:
* NAME=" nombre ", analogo al atributo de <FRAME>, sirve para identificar unvocamente al marco
flotante, con vistas a referenciar su contenido mediante un enlace por medio del parametro TARGET.
* WIDTH= " x ", donde x = n pxeles. Con este atributo definimos la anchura que va a tener el marco flotante.
38
* HEIGHT= " x ", donde x = n pxeles. Con este atributo definimos la altura que va a tener el marco flotante.
* ALIGN= " left / center / right ", Va a definir si el marco va a estar alineado a la izquieda en la ventana del
navegador, centrado o a la derecha.
Ejemplo.- (Slo para I.Explorer)
<html>
<head>
</head>
<body>
<iframe align="left" src="a.html"></iframe>
<iframe align="center" src="b.html"></iframe>
</html>
* FRAMEBORDER= " 0 / 1 ", Este atributo hace que el marco aparezca sin borde o con borde (valor por
defecto) respectivamente.
<html>
<head>
</head>
<body>
<iframe src="a.html" frameborder="0" align="center" ></iframe>
</html>
* VSPACE= " x ", donde x = n pxeles. Nos sirve para posicionar el marco, y define la distancia entre el borde
superior del marco y el lmite superior de la ventana del navegador.
* HSPACE= " x ", donde x = n pxeles. Nos sirve para posicionar el marco, y define la distancia entre el
borde izquierdo del marco y el lmite izquierdo de la ventana del navegador.
<html>
<head>
</head>
<body>
<iframe src="a.html" hspace="100" vspace="20"></iframe>
</html>
* MARGINHEIGHT= " x ", donde x = n pxeles. Nos define el espacio en pxeles que va a haber entre el
borde superior del marco y su contenido.
* MARGINWIDTH= " x ", donde x = n pxeles. Nos define el espacio en pxeles que va a haber entre el
borde izquierdo del marco y su contenido.
<html>
<head>
</head>
<body>
<iframe src="a.html" frameborder="1" marginwidth="60" marginheight="30"></iframe>
</html>
* SCROLLING= " yes / no / auto ", que nos va a definir si el marco va a tener barra deslizadora siempre,
nunca o slo cuando sea necesario por exceder el contenido al tamao del mismo. Su valor por defecto es auto.
* SRC= " ruta pagina html ", que nos va a definir la pagina web que se va a cargar dentro del marco flotante.
Podemos especificar bien la ruta completa de la pagina en el directorio de nuestro servidor web o bien una URL
completa de Internet.
* STYLE= " parametro-valor / parametro-valor / ", Este atributo es una aplicacin directa de las Hojas
de Estilo en Cascada (CSS), y nos permiten definir la posicin y tamao del marco en la ventana del navegador.
Si el frame flotante no contiene una pagina web referenciada mediante SRC y contiene texto, tambin es posible
aplicar estilos a este texto, como color, fuente, tamao, etc.
<html>
<head>
</head>
<body>
<iframe src="a.html" style="position:absolute; left:100px;top:140px;width:400px;height:150px;" >
</iframe>
</html>
* CLASS= " clase ". analogo al anterior, pero ahora refiriendo el estilo del marco flotante (posicin y tamao)
de acuerdo con una clase de estilos definida en la seccin de la pagina que contiene al marco o en un archivo
externo de extensin ".css"
* ID= " identificador ". En todo semejante al anterior, pero con la diferencia que ahora el nombre de
identificador asignado debe ser nico para cada marco en concreto. Tambin posibilita cambiar dinamicamente
las propiedades del marco usando un lenguaje de script, como JavaScript.
Si queremos, podemos colocar un texto alternativo entre las etiquetas <IFRAME>> e </IFRAME>, con el
objeto de que aquellas personas cuyo navegador no soporte los marcos flotantes puedan contemplar un mensaje
alternativo.
Nestcape Navigator 3.0 y superiores implementa las etiquetas <ILAYER>...</ILAYER>, que van a definir el
principio y fin del marco flotante. Estas etiquetas deben situarse dentro del cuerpo de la pagina que contiene al
marco, es decir, entre <BODY> y </BODY>.
Los principales atributos de la etiqueta <IFRAME> son:
* SRC= " ruta pagina html ", que nos va a definir la pagina web que se va a cargar dentro del marco flotante.
Podemos especificar bien la ruta completa de la pagina en el directorio de nuestro servidor web o bien una URL
completa de Internet.
* NAME=" nombre ", donde nombre va a ser la referencia que vamos a tener para cargar luego otras paginas
web dentro del marco mediante enlaces con el atributo TARGET.
* PAGEX= " x ", con x = n de pxeles. Define la posicin horizontal de la esquina superior izquierda del
ILAYER respecto a la ventana del navegador.
* PAGEY= " y ", con y = n de pxeles. Define la posicin vertical de la esquina superior izquierda del
ILAYER respecto a la ventana del navegador.
* LEFT= " x ", donde x = n pxeles. Es analogo a PAGEX en lo que respecta al elemento ILAYER.
* TOP= " x ", donde x = n pxeles. Es analogo a PAGEY en lo que respecta al elemento ILAYER.
* WIDTH= " x ", donde x = n pxeles. Con este atributo definimos la anchura que va a tener el marco flotante.
* HEIGHT= " x ", donde x = n pxeles. Con este atributo definimos la altura que va a tener el marco flotante.
* CLIP= " h,v ", Nos va a permitir " recortar " el marco, de tal forma que slo va a ser visible del mismo h
pxeles de ancho y v pxeles de alto. Esta operacin va a ser necesaria hacerla siempre, ya que si no
"recortamos" el marco flotante Nestcape va a mostrar slo aquella parte del mismo necesaria para mostrar la
pagina, la imagen o el texto que contenga.
Ejemplos.- (Slo paraNestcape)
<html>
<head>
</head>
<body>
<ilayer src="a.html></ilayer>
</body>
</html>
<html>
<head>
</head>
<body>
39
<ilayer src="a.html" clip="300,200"></ilayer>

</body>
</html>
* BACKGROUND= " ruta imagen ", que nos permite definir una imagen de fondo para el marco flotante,
especificando su ruta completa. La pagina cargada dentro del marco se mostrara encima de este fondo de
imagen.
Ejemplo.- (Slo para Nestcape)
<html>
<head>
</head>
<body>
<ilayer background="images/fondo.jpg" width="200" height="150" clip="200,150"></ilayer>
</html>
* BGCOLOR= " color ", donde color viene expresado por su nombre web en ingls o por su cdigo
hexadecimal, y que nos permite definir un color de fondo para el marco flotante. La pagina cargada dentro del
marco se mostrara encima de este color de fondo.
Ejemplo.- (Slo para Nestcape)
<html>
<head>
</head>
<body>
<ilayer bgcolor="#0099ff" width="200" height="150" clip="200,150"></ilayer>
</html>
* VISIBILITY= " hide / show / inherit ", que nos va a determinar si el marco flotante sera oculto, se vera o si
heredara esta propiedad del elemento que lo contiene.
* Z-INDEX= " n ", que nos da una coordenada de profundidad del marco, y que sera la que determine cual
marco se va a ver en el caso de que varios se superpongan. Se vera el marco que tenga mayor valor de ZINDEX. Esta etiqueta es dificultosa de usar en los marcos flotantes, ya que Nestcape tiende a situarlos " a su
aire" cuando hay varios definidos en la misma pagina. Esto es debido a que una vez que asigna un espacio de
pantalla para el primer ILAYER, se resiste a situar otro en ese espacio reservado. Este paramero, Z-INDEX,
adquiere todo su significado en el tratamiento de capas generadas con las etiquetas <DIV> y <SPAN>.
* ABOVE. Indica que el ILAYER debe situarse encima de otro especificado.
* BELOW. Indica que el ILAYER debe situarse debajo de otro especificado.
Tanto la etiqueta <IFRAME> de Explorer como la <ILAYER> de Nestcape estan en dehuso, ya que lo correcto
es crear cdigo til para ambos navegadores.
Un truco para conseguir esto sera introducir dentro de un <IFRAME> un <ILAYER>. as, Explorer entendera
la primera etiqueta e ignorara la segunda, y con Nestcape ocurrira al revs.
Ejemplo.- (ambos navegadores)
<head>
</head>
<body>
<iframe src="a.html" width="300" height="150" vspace="75" hspace="150">
<ilayer src="a.html" width="300" height="150" clip="300,150" top="75" left="150"> </ilayer>
</iframe>
</html>
USO DE LOS FRAMES

La tcnica de los frames ha sido una de las mas empleadas a la hora de construir pginas web, debido a la
facilidad que tiene para crear ventanas independientes en las que cargar pginas a partir de mens. Hasta la
introduccin de HTML dinamico fu la nica herramienta de que disponamos para estos fines.
Sin duda su uso nos facilita mucho la navegacin y la presentacin en un sitio web, aunque tambin origina
muchos problemas secundarios.
Entre los principales usos que podemos dar a los frames en nuestras pginas se encuentran:
* Mens de navegacin.
Podemos crear con frames un sistema de navegacin por nuestras pginas mediante un marco lateral en el que
situamos enlaces y un marco principal en el que se iran cargando las pginas llamadas.
El esquema de construccin puede ser crear tres marcos: uno superior fijo, en el que podemos situar nuestro
logo y/o un bannner o mensaje, otro lateral con el menu y otro central para cargar las pginas.
Para conseguir esto debemos crear 4 pginas web:
1) pgina index.html con la definicin de los frames.
2) pgina top.html con el logo, banner , etc.
3) pgina menu.html con los enlaces
4) pgina de principal.html de entrada incial en el frame central.
Mas las diferentes pginas de nuestro sitio web, que iremos llamando desde el men lateral y cargando en el
frame central.
El cdigo a crear sera del tipo:
pgina index.html
<html>
<head>
</head>
<frameset rows="18%,*">
<frame name="superior" src="arriba.html" marginwidth="10" marginheight="10" scrolling="no"
rameborder="1">
<frame name="menu" src="menu2.html" marginwidth="10" marginheight="10" scrolling="auto"
rameborder="0">
<frame name="ventana" src="central_1.html" marginwidth="10" marginheight="10" scrolling="auto"
rameborder="0">
<frameset>
<frameset>
</html>
pgina menu.html
<html>
<head>
</head>
<body>
<a href="central_1.html" target="ventana">pgina 1</a>
<a href="central_2.html" target="ventana">pgina 2</a>
</body> </html>
y luego creamos arriba.html, que es una pgina simple con una imagen como logo y un texto aclarativo, y
central_1.html y central_2.html que son dos pginas que contendran aquellos elementos web que deseemos.
Como podemos ver, al pinchar sobre el enlace "pgina 1" lo que hacemos es cargar en el frame central dicha
pgina, y lo mismo ocurre al pinchar el enlace "pgina 2", con lo que sustituimos el contenido de diho frame. Y
esto podemos hacerlo con todos los enlaces y pginas que deseemos.
Si hablamos de proporciones de frames y ventana, lo mas comn es utilizar aproximadamente el cuarto
izquierdo de la pgina para el ndice fijo y los tres cuartos restantes para la informacin, en el caso de que slo
haya dos frames verticales, y si tenemos tres frames, como en el ejemplo, aproximadamente el quinto/sexto
superior de la pgina para el encabezado con el logo, y de lo que resta, el cuarto izquierdo es para el men y los
tres cuartos derechos para la informacin.
* a partir de este esquema basico podemos extender las utilidades del men mediante frames. Por ejemplo,
podemos hacer que al pinchar el enlace del men se nos cambie a la vez tanto el contenido de la ventana central
como el de el marco superior, para conseguir as mostrar un mensaje o banner diferente para cada enlace
40
pulsado. Para poder hacer esto necesitamos una funcin JavaScript actuando en la pgina menu.html y varias
pginas que se vayan alternando tanto en el frame superior como en el central.
Ejemplo.- ( menu.html)
<html>
<head>
<SCRIPT language="JavaScript" type="text/javascript">
<!-function twoinone(nr){
if (nr==1){
parent.superior.location.href="superior1.html"
parent.ventana.location.href="a.html"
}
if (nr==2){
parent.superior.location.href="superior2.html"
parent.superior.location.href="b.html"
}
}
//-->
</SCRIPT>
</head>
<body>
<a HREF="JavaScript:twoinone(1)">Link 1</a>
<a HREF="JavaScript:twoinone(2)">Link 2</a>
</body>
</html>
* Y siguiendo con esta tcnica podemos imaginar cualquier combinacin para montar el sistema de
navegacin de nuestro sitio web. Podemos montar dos frames laterales, uno con el men y otro con
informacin o enlaces relacionados.
Ejemplo.<html>
<head>
</head>
<frame name="superior" src="superior.html" marginwidth="10" marginheight="10" scrolling="no"
rameborder="0">
<frame name="menu" src="menu.html" marginwidth="10" marginheight="10" scrolling="no" frameborder="0">
<frame name="ventana" src="principal.html" marginwidth="10" marginheight="10" scrolling="no"
rameborder="0">
<frame name="lateral" src="enlaces1.html" marginwidth="10" marginheight="10" scrolling="no"
rameborder="0">
</frameset>
</frameset>
</frameset>
</html>
* Podemos tambin utilizar la tcnica de los frames flotantes para situar uno en una zona en concreto de nuestra
pgina y cargar en l, mediante enlaces, diferentes pginas. Pero nos encontramos entonces con la limitacin de
Nestcape, que no permite que los <ILaYER> tengan barra de scroll, con lo que deberemos entonces fijar un
tamao de marco y tener en cuenta que la pgina que se carge dentro no exceda este tamao, porque entonces
no se vera completa. Con Explorer no tendremos este problema, ya que si el contenido excede al marco
aparecera una barra de deslizamiento que nos permitira ver todo el contenido.
Y as sucesivamente, hasta donde la imaginacin nos lo permita.
* ADAPTAR NUESTRA PAGINA A LA RESOLUCIN DEL NAVEGADOR.
Imaginemos que hemos creado una pagina web para una resolucin de 800x600 pxeles. Cuando la visualice un
visitante con una resolucin de 640x480 no pasara nada, slo que necesitara usar las barras de desplazamiento
para poder visualizarla entera. Pero si nuestro visitante esta utilizando una resolucin de 1024x768 o superior
nuestra pagina, si la hemos definido con unidades absolutas, le quedara situada en la parte superior derecha de
la ventana del navegador, quedando una gran parte de la pantalla vaca.
Este efecto es indeseable, y podemos corregirlo usando una funcin de JavaScript que detecte la resolucin que
usa el visitante. Si esta es de 640x860 de 800x600 le redireccionara a nuestra pagina original, pero si la
resolucin es de 1024x768 por ejemplo, le enviara a una pagina con frames en la que en la ventana central
estara cargada nuestra pagina original. Con esto la pagina quedara centrada en la pantalla. Hay otras formas de
conseguir esto, pero esta con frames es totalmente viable.
Primero necesitamos una pagina index.html, que es la que se va a encragar de detectar la resolucin y de
redireccionar adecuadamente:
<html>
<SCRIPT language="JavaScript" type="text/javascript">
<!-var width = screen.width;
var res =(((!(640-width))*1)+((!(800-width))*2)+((!(1024-width))*3)+
((!(1152-width))*4)+((!(1280-width))*5)+((!(1600-width))*6));
if(!(res)) res = 1;if (res=='1') {window.location='800.html'}
if (res=='2') {window.location=800.html}
if (res=='3') {window.location='1024.html'}
if (res!='1' && res!='2' && res!='3') {window.location='1024.html'}
//-->
</SCRIPT>
</head>
<body>
</body>
</html>
y ahora creamos tres paginas: 800.html, que va a ser nuestra pagina normal, 1024.html, que va a ser una
pagina con frames:
<html>
<head>
</head>
<frameset cols="300,*">
<frame name="lateral" src="nada.html" marginwidth="10" marginheight="10" scrolling="no" frameborder="0">
<frameset rows="75,*">
<frame name="superior" src="nada.html" marginwidth="10" marginheight="10" scrolling="no"
rameborder="0">
<frame name="ventana" src="800.html" marginwidth="10" marginheight="10" scrolling="auto"
rameborder="0">
</frameset>
</frameset>
</html>
y nada.html, que va a ser una pagina vacia. La nica condicin es que tenga el mismo color de fondo que
nuestra pagina principal 800.html.
Es decir, hemos creado una especie de "contenedor" para nuestra pagina principal a base de frames, que slo se
activara en el caso de que la resolucin del navegador sea de 1024 o superior, en cuyo caso nos la situara en
medio de la pantalla. Este efecto de puede conseguir de una forma mejor con Javascript puro, posicionando la
pagina en la ventana segn la resolucin, pero tambin es viable hacerlo con frames, como se ha explicado.
41
* Frames ocultos.
Una de las posibilidades que tenemos a la hora de usar trabajar con frames es el uso de frames ocultos, es decir
frames que no se van a ver en pantalla. Esto es facil de conseguir, ya que basta definir un frame horizontal o
vertical que quede fuera de los lmites de la pantalla.
As por ejemplo podemos crear un frame horizontal oculto mediante:
<html>
<head>
</head>
<frame name="principal" src="a.html" marginwidth="10" marginheight="10" frameborder="0">
<frame frame name="oculto" src="b.html" scrolling="no" frameborder="0">
<frameset>
</html>
y queda oculto porque por propia definicin del FRaMESET el primer frame ocupara el 100% del tamao de la
ventana.
Lo mismo podamos heber hecho con un frame vertical, e incluso podemos definir varios frames ocultos.
Una vez construido este frame escondido, lo podemos usar para diferentes fines:
1) Ocultar una clave de acceso: si queremos disponer en nuestra pagina de un control de acceso mediante
claves y no queremos procesar estas en un programa en el servidor (que es lo aconsejable, por seguridad),
podemos esconder las claves correctas de acceso en el frame oculto, y cuando el visitante introduzca las claves
en los campos correspondientes de la pagina principal, hacer una comprobacin mediante JavaScript con las
claves que tenemos escondidas.
2) Ocultar objetos o funciones de JavaScript: un ejemplo tpico de este mtodo es la creacin de mens de
arbol, incluyendo en el frame aculto la funcin de JavaScript que "dibujara" el men en un frame lateral visto,
de tal forma que si el visitante observa el cdigo fuente de este, slo vera cdigo HTML puro, pero no el de la
funcin que lo crea.
3) almacenamiento de variables de sesin: a veces puede interesarnos ir almacenando algunas variables y
valores a lo largo de la visita de una persona a nuestras paginas. Por ejeplo, podemos ir creando un perfil de
usuario en unas pocas paginas iniciales, para luego dirigir a nuestro visitante a una zona en concreto de
nustro sitio web. Para ello, podemos crear un frame oculto e ir " escribiendo " en l mediante JavaScript las
variables que nos interesen, pudiendo recuperar su valor cuando lo necesitemos. Esto lo hacen muchas
aplicaciones de todo tipo, si bien para programacin web se suelen utilizar otras tcnicas basadas en el
almacenamiento de las variables en el servidor o en el equipo cliente mediante cookies, ya que si lo
hacemos por el mtodo explicado en este apartado en cuanto el cliente refresque la pagina perderemos el
valor de las variables, a no ser que le indiquemos medianto cdigo de Script qu frames debera recargar en
esos casos, aunque de todas formas esta solucin es complicada.
*Ocultar el cdigo fuente de la pagina.
Si queremos ocultar el cdigo de nuestra pagina (por favor, deja el cdigo a la vista y claro, para que otras
personas puedan aprender de t), siempre podemos crear un frame ico que ocupe el 100% de la pantalla, y
cargar en l la pagina a la que queremos ocultarle el cdigo. El visitante, al ir al men VER > CDIGO
FUENTE slo visualizara el cdigo de creacin del frame, no el de la pagina que contiene. Pero y si el
visitante selecciona la opcin ver cdigo fuente mediante el botn derecho del ratn?. En ese caso todo
nuestro esfuerzo habra sido en vano. Aunque podemos entonces crear una funcin JavaScript que desactive
el botn derecho, con lo que la proteccin de nuestro cdigo sera total. O no es as?...NO!!, ya que
siempre que cargamos una pagina de Internet, para poder nuestro navegador visualizarla lo primero que
hace es cargarla en la cach del navegador. Por lo tanto, si queremos ver el cdigo fuente o salvar una
imagen o cualquier elemento de la pagina que ya haya sido visualizado en el navegador, lo nico que
tenemos que hacer es irnos al directorio WIDOWS o WINNT de nuestro odenador y buscar en la carpeta
archivos temporales de Internet, y all estaran guardados todos los elementos de las paginas que hayamos
visualizado, incluyendo las propias paginas con su cdigo fuente.
FORMULARIOS
Los formularios son una de las herramientas de que disponemos a la hora de hacer nuestras paginas
web interactivas, en el sentido de que nos permiten recopilar informacin de la persona que ve la pagina,
procesarla y responder a ella, pudiendo de esta forma responder adecuadamente a sus acciones o peticiones.
El proceso comienza con la creacin en nuestra pgina de un formulario de entrada de datos, que va a
contener diversos campos diferentes en su funcionalidad y que nos van a permitir recopilar toda aquella
informacin que deseemos de la persona que ve la pagina. Estos datos, una vez completado el formulario,
seran enviados normalmente al servidor para su procesamiento o a nosotros directamente, mediante correo
electrnico.
Etiquetas <FORM>...</FORM>
Estas etiquetas son las que delimitan el comienzo y el final de un formulario. Si queremos mostrar en una
pagina un elemento aislado de un formulario, aunque sea con otra finalidad diferente a la del envo de los
datos que contenga al servidor (por ejemplo para tratar esa informacin mediante Javascript), es necesario
delimitar ese elemento de formulario mediante las etiquetas <FORM> y</FORM>. Si no lo hacemos as,
I.Explorer s mostrara el elemento, pero Nestcape no.
La pareja de etiquetas se introduce en el cdigo HTML dentro del BODY de la pagina, en el lugar en que
queramos que nos aparezcan los elementos del formulario.
* action = "ruta_programa". Indica el programa del servidor que va a "tratar" las variables que se enven
con el formulario o el envo de los datos mediante correo electrnico mediante el valor "mailto:
direccion_de_correo", en cuyo caso deberemos aadir el parametro ENCTYPE="text/plain" para que lo que
recibamos resulte legible. Tambin puede ser una URL usando el mtodo GET (por ejemplo, un botn para ir
a otra pgina).
En el caso de que definamos aqu un programa para el tratamiento de datos deberemos especificar su ruta
relativa respecto al directorio de carpetas del servidor en dnde tengamos situado nuestra aplicacin web o
bien una URL completa, si el programa esta en otra direccin de Internet.
* method = " POST / GET " . Indica el mtodo segn el que se van a transferir las variables del formulario.
POST enva los datos, normalmente al programa CGI definido en action o por correo si en action hemos
utilizado mailto. El mtodo GET aade los argumentos del formulario al URL recogido en action (utilizando
como separador de las variables la "?"). El mtodo de uso mas normal es POST, y en el caso de que estemos
mandando el formulario a nuestra direccin de correo electrnico es obligado usarlo.
Con GET los datos son encadenados al URL especificado en action , utilizando el tipo de codificacin
especificado en el atributo enctype. Este mtodo se utiliza cuando los datos no modifican la base de datos,
por ejemplo, al realizar una bsqueda, y los caracteres a enviar tienen que pertenecer obligariamente al
conjunto ASCII, por lo que para que se reconozcan los espacios en blanco debes separarlos mediante un
signo mas (+),pero en su representacin hexadecimal, lo que se puede hacer antes de enviar los datos con
funciones propias del mtodo de programacin utilizado o sustituyendo dirctamente los signos + por su
equivalente hexadecimal de 16 bits (smbolo %20).
Con el mtodo POST se realiza una transaccin mediante el protocolo HTTP, utilizando la codificacin
enctype, con lo que se envan los parametros en un encabezado independiente http, que se recibe por
separado. Se utiliza para aplicaciones que modifican la base de datos de destino.
* enctype =" tipo ". Indica el tipo de documento en formato MIME. El mas usado para que lleguen el
contenido a travs de un mail con el mtodo post sera "text/plain". Especifica el tipo de encriptacin que se
va a realizar con los datos que se van a enviar. Este atributo solamente se aplica si method es POST. Indica
como se codificara el formulario si utiliza el mtodo POST. Por defecto es "application/x-www-formurlencoded". Otro posibles valor es "multipart/form-data". Mas adelante veremos en que caso se utiliza uno u
otro tipo.
42
* accept =" tipo MIME ", que indica al servidor qu tipos de archivo MIME se van a aceptar en el envo.
Normalmente no se usa, pero si nos es necesario el administrador de nuestro servidor web nos puede indicar
cuales son aceptados.
* accept-charset = "charset ", que especifica la lista de caracteres permitidos que deben ser interpretados
correctamente por el servidor receptor. Por ejemplo, si el servidor admite como caracteres permitidos cdigo
HTML, en valor de charset sera "text/html".
* target= " nombre ". . Este atributo funciona igual que el homnimo de las etiquetas <A> y<FRAME>, e
indica en qu ventana de una pagina con frames se debe mostrar el resultado del proceso de datos mediante
el programa CGI.
Ejemplo.<form action="cgi-bin/control.exe" method="post" enctype="text/plain" name="miform">
...
...elementos del formulario
...
</form>
<form action="mailto:yo@miservidor.com" method="post" enctype="text/plain" name="miform">

marca tu equipo favorito:
<input type="Radio" name="equipo" value= "madrid"checked>Real Madrid
<input type="Radio" name= "equipo"value="atletico">Atltico de Madrid
<input type="Radio" name= "equipo"value="barcelona">Barcelona
</form>
con el que obtenemos:
Etiqueta <INPUT>
La etiqueta <INPUT> va a definir la mayora de los diferentes elementos que va a contener el formulario.
Sus atributos y valores son:
* TYPE = " tipo ", donde tipo puede ser uno cualquiera de los elementos que veremos a continuacin:
text, que sirve para introducir una caja de texto simple, y admite los parametros:
o name=" nombre", que asigna de forma unvoca un nombre identificador a la variable que se
introduzca en la caja de texto.
o maxlenght=" n ", que fija el nmero maximo de caracteres que se pueden itroducir en la caja de
texto.
o size=" n ", que establece el tamao de la caja de texto en pantalla.
o value=" texto ", que establece el valor por defecto del texto que aparecera en inicialmente en la
caja de texto.
o disabled, que desactiva la caja de texto, por lo que el usuario no podra escribir nada en ella.
o accept = " lista de content-type", Indica el tipo de contenido que aceptara el servidor.
o Sus posibles valores son:
1.
text/html
2.
application/msexcel
3.
application/msword
4.
application/pdf
5.
image/jpg
6.
image/gif
7.
8.
etc.
o readonly, que establece que el texto no puede ser modificado por el usuario.
o tabindex = " n ", que especifica el orden de tabulador que tendra el campo respecto todos los
elementos que incluye el formulario.
o alt= " texto ", que asigna una pequea descripcin al elemento.
Ejemplo.<form action="cgi-bin/control.exe" method="post" enctype="text/plain" name="miform">
introduce tu nombre:
<input type="text" maxlength="10" size="10" name="nombre">
</form>
introduce tu nombre:
radio, que define un conjunto de elementos de formulario de tipo circular, en los que el usuario debe optar por
uno solo de ellos, que se marca con el ratn o tabulador. Admite los parametros:
o name=" nombre", que asigna un nombre identificador nico a la variable definida por el elemento.
Este identificador debe ser el mismo para todos los elementos radio de un grupo.
o value =" valor ", que define un valor posible de la variable para cada uno de los radio botones.
o checked, que marca por defecto uno de los radio botones del grupo.
o disabled, que desactiva el radio botn, por lo que el usuario no podra marcarlo.
Ejemplo.-
marca tu equipo favorito:

Real Madrid
Barcelona
Atltico de Madrid
checkbox, que define una o mas casillas de verificacin, pudiendo marcar el usuario las que desee del conjunto
total. Si pinchamos una casilla con el ratn o la activamos con el tabulador y le damos a la barra espaciadora la
casilla se marca; si volvemos a hacerlo, la casilla se desmarca. Sus parametros complementarios son:
o name=" nombre", que asigna un nombre identificador nico a la variable definida por el elemento.
Este identificador debe ser el mismo para todos los elementos conjunto de casillas.
o value =" valor ", que define un valor posible de la variable para cada uno de casillas de
verificacin.
o checked, que marca por defecto una o mas de las casillas del grupo.
o disabled, que desactiva la casilla de verificacin, por lo que el usuario no podra marcarla.
Ejemplo.<form action="mailto:yo@miservidor.com" method="post" enctype="text/plain" name="miform">
marca tu msica favorita:
<input type="checkbox" name="musica" value= "rock"checked>Rock
<input type="checkbox" name="musica" value= "pop"checked>Pop
<input type="checkbox" name= "musica"value="heavy">Heavy
<input type="checkbox" name= "musica"value="tecno">Tecno
</form>
marca tu msica favorita: Rock
Pop
Heavy
Tecno
button, que define un botn estandar. Este botn puede ser usado para diferentes acciones, pero normalmente
se le da utilidad mediante JavaScript, mediante el evento "OnClick". Sus parametros son:
43
o
o
o
o
name=" nombre", que asigna un nombre al botn, que nos puede servir para acciones con lenguaje de
script.
value=" valor ", que define el texto que va a figurar en el botn.
disabled, que desactiva el botn, de tal forma que no se produce ninguna accin cuando se pulsa, pus
permanece inactivo.
tabindex = " n ", que especifica el orden de tabulador que tendra el campo respecto todos los elementos
que incluye el formulario.
Ejemplo.-
<form action="mailto:yo@miservidor.com" method="post" enctype="text/plain" name="miform">

<input type="Button" name="boton" value="pulsame">
</form>
image, que introduce un botn definido por una imagen, en vez del formato estandar de botones, con lo que
podemos as personalizar el botn. Inicialmente su funcin era contener una localizacin de las coordenadas
que pinchara el usuario, para que luego el programa CGI realizara una accin u otra dependiendo de estas. Pero
actualmente se usa mas para personalizar un botn de envo de datos; es decir, su funcionalidad es analoga a la
de submit, pero nos permite personalizar este elemento. Ademas aadira como informacin en el formulario las
coordenadas x e y donde el usuario lo puls. Admite los parametros:
o name=" nombre", que asigna un nombre al botn para identificarlo de forma nica y poder
as acceder luego a sus propiedades.
o src= " ruta imagen ", que establece la ruta dnde localizar el fichero de imagen. Esta ruta
puede ser relativa al directorio web en el servidor o una URL absoluta que define
unvocamente la lozalizacin de la imagen.
o width= " w ", que fija la anchura del botn de imagen.
o height= " h ", que fija la altura del botn de imagen.
o align= " left / middle / right / bottom / baseline...", que define la posicin del texto que
rodea el botn respecto a este.
o hspace= " x ", que fija el espacio horizontal que habra entre el botn y el texto que lo
circunda.
o vspace= " x ", que fija el espacio vertical que habra entre el botn y el texto que lo circunda.
o alt = " texto ", que asocia un texto explicativo al botn de imagen. Al situar el cursor encima
del botn se mostrara este texto en forma de tip de Windows. Siempre es conveniente poner
este atributo, para que en caso de navegadores de slo texto, de que la imagen no se encuentre
en la ruta por cualquier motivo o de que la pagina tarde mucho en cragarse por su peso, el
usuario puede ver qu hace el botn de imagen y pueda en consecuencia utilizarlo para tal fin.
o disabled, que desactiva el botn, de tal forma que no se produce ninguna accin cuando se
pulsa, pus permanece inactivo
o usemap= " #nombre de mapa ", que nos permite el uso de un mapa de imagenes en el
cliente como un dispositivo mas de entrada de datos.
<input type="image" name="boton" src="images/1.jpg" width="50" height="20" hspace="10"
align="middle">
</form>
pulsa aqu
password, que define una caja de texto para contener una clave o password, por lo que el texto que
introduzca el usuario aparecera como asteriscos, por motivos de seguridad. Sus parametros opcionales
son los mismos que los del tipo text.
<input type="password" size="15" maxlength="10">
</form>
introduce la clave de acceso:
hidden, que define un campo invisible, por lo que no se ve en pantalla. Aunque parece as definido que
no tiene utilidad, sus usos son varios e importantes, y los veremos ms tarde. Sus atributos son:
o name=" nombre", que asigna un nombre identificador nico al campo oculto.
o value=" valor ", que va a ser el valor fijo que se le va a pasar al programa del servidor, ya
que el usuario no puede modificarlo. En realidad este valor no tiene porqu ser fijo, ya que lo
vamos a poder modificar mediante cdigo de script, lo que nos va a permitir ir pasando una
serie de variables ocultas de una pagina a otra.
<input type="hidden" name="contrasea" value="123ABC">
</form>
file, que define un archivo que puede ser enviado junto con los datos del formulario. En este tipo de
elemento encontramos asociados una caja de texto y un botn en el que encontramos escrito bien
"examinar..." bien "browse..." , dependiendo del lenguaje de nuestro navegador, que al ser pulsado nos
abre la tpica ventana de exploracin de nuestras unidades de disco, para que seleccionemos el archivo
que queremos enviar al servidor. Cuando elegimos uno su ruta aparece en la caja de texto.
Ejemplo.Sus principales atributos son:
o title="titulo": que muestra un texto en tipo tip al situar el cursor encima del botn de
examinar (slo en Internet Explorer).
o accept="tipo_archivo":que determina el tipo de archivo que se admite como para enviar.
o disabled : que desactiva tanto el botn como la caja de texto, impidiendo al usuario
seleccionar un archivo (slo Internet Explorer y Nestcape 6x).
o size="numero_entero": que fija la anchura de la caja de texto asociada.
submit, que incorpora al formulario un botn de envo de datos. Cuando el usuario pulsa este botn los
datos que ha introducido en los diferentes campos del formulario son enviados al programa del servidor o
a la direccin de correo indicada en action. Sus atributos son:
o value=" valor ", que define el texto que va a aparecer en el botn de envo.
o disabled, que desactiva el botn, de tal forma que no se produce ninguna accin cuando se
pulsa, pus permanece inactivo.
44
tabindex = " n ", que especifica el orden de tabulador que tendra el campo respecto todos los
reset, que define un botn que al ser pulsado por el usuario borra todos los datos que hubiera introducido
en cualquiera de los campos del formulario. Sus atributos son los mismos que los de SUBMIT.
Etiquetas <SELECT>...</SELECT>
Mediante esta etiqueta podemos definir una entrada de datos en forma de lista desplegable, que presenta
varias opciones de eleccin, de tal forma que el usuario puede elegir una o varias de ellas, si as se
especifica.
name=" nombre", que asigna un nombre identificador al campo, de tal forma que al enviar
los datos del formulario la opccin elegida sera asociada a este nombre.
size= " n ", con n= n entero, que define el nmero de opciones visibles. Si n=1 el campo de
seleccin se presenta como una lista desplegable, mientras que si se indica otro valor se
presenta como una caja de lista con barra de desplazamiento.
multiple, que permite elegir varias de las opciones a la vez. Si no se especifica este atributo
solamente se podra escoger una de las opciones. Para ello hay que mantener pulsada la tecla
CONTROL mientras se seleccionan y/o deseleccionan las diversas opciones.
disabled, que desactiva la lista, de tal forma que no se produce ninguna accin cuando se
pulsa una opcin, pus permanece inactiva.
tabindex = " n ", que especifica el orden de tabulador que tendra el campo respecto todos los
Para introducir cada una de las diferentes opciones de la lista se utiliza la etiqueta <OPTION>, que
admite como parametros:
value, que fija el valor que sera asociado al parametro name de <SELECT> cuando se enve
el formulario. Este valor debe ser nico para cada opcin.
selected, que establece la opcin por defecto. Si no se especifica este parametro en ninguna
opcin se tomara la primera de ellas por defecto.
La anchura de la lista desplegable vendra determinado por el nmero de caracteres de la opcin que mas
tenga.
<option value="dos">dos
<option value="tres">tres
</select>
</form>
selecciona un de los siguientes valores:

<form action="cgi-bin/control.exe" method="post" enctype="text/plain" name="miform">
selecciona una de los siguientes valores:
<select size="3" multiple>
<option value="uno">uno
</select>
</form>
Etiquetas <TEXTAREA>...</TEXTAREA>
Esta pareja de etiquetas inserta una caja de texto de mltiples lneas, que normalmente se utiliza
para introducir comentarios o datos largos en un formulario. Si no se introduce ningn texto entre ambas
etiquetas la caja de texto aparecera vaca, para que el usuario lo introduzca, pero si introducimos algn texto
entre ambas este aparecera inicialmente en la caja. Si el texto que contiene supera el espacio disponible en la
caja aparecera una barra de desplazamiento vertical.
name=" nombre",que asigna un nombre identificador al campo, que sera asociado en el envo del formulario
al texto introducido en la caja de texto.
cols=" x ", que define el nmero de columnas visibles de la caja de texto.
Ejemplos.<form action="cgi-bin/control.exe" method="post" enctype="text/plain" name="miform">

<select>
</select>
</form>
rows= " y ", que define el nmero de filas visibles de la caja de texto.
wrap= " valor ", que justifica automaticamente el texto en el interior de la caja. Este atributo es de uso
complicado.
Segn las recomendaciones si su valor es VIRTUAL se enviara todo el texto seguido, en una lnea, mientras
que si vale PHYSICAL el texto se enviara separado en lneas fsicas, pero as como se define no lo admiten
los navegadores. Usemos cual usemos de los dos el resultado es el mismo: justificacin por lneas fsicas, y as
y todo se producen saltos de lnea indeseados.
Si construimos la pagina web con un programa de ayuda tipo HomeSite nos encontramos con tres posibles
valores de wrap: SOFT y HARD, que hacen lo mismo, alineando el contenido en lneas fsicas, como en los
casos anteriores y es el valor por defecto, y OFF, que coloca todo el texto de la caja en una sla lnea,
apareciendo entonces una barra de desplazamiento horizontal para poder visualizar todo el contenido de la
caja.
disabled, que desactiva la caja de texto. Su utilidad es escasa.
readonly, que impide que el contenido de la caja sea modificado por el usuario.
tabindex = " n ", que especifica el orden de tabulador que tendra el campo respecto todos los elementos que
incluye el formulario.
Ejemplos.-

<select size="3">

introduce un comentario:
<textarea name="comentario" cols="20" rows="10">
</textarea>
45
</form>
Etiquetas <BUTTON>...</BUTTON>
</textarea>
</form>

<textarea name="comentario" cols="20" rows="10" wrap="off">
</textarea>
</form>
A partir de la implementacin de los estandares HTML 4.0 contamos con varias etiquetas nuevas
para construir formularios, siendo BUTTON una de ellas, bastante util por cierto. La pega es que las versiones
de 4 de Nestcape se lanzaron antes de estas implementaciones, por lo que estas nuevas etiquetas slo se pueden
visualizar correctamente con Internet Explorer 4 y superiores.
Esta etiqueta proporcina un mtodo nico para la implementacin de cualquier tipo de botn de formulario. Sus
principales atributos son:
type= " tipo ", que puede tomar los ya conocidos valores submit (por defecto), reset y button.
name= " nombre ", que asigna un nombre identificador nico al botn.
value= " texto ", que define el texto que va a aparecer en el botn.
La principal ventaja que aporta estas etiquetas es que ahora vamos a poder introducir dentro de ellas cualquier
elemento de HTML, como imagenes y tablas.
<button name="boton_1" type="button">
<table width="10" cellspacing="0" cellpadding="2" border="1">
<tr>
<td>uno</td>
<td>dos</td>
</tr>
<tr>
<td>tres</td>
<td>cuatro</td>
</tr>
</table>
</button>
</form>
con el que obtenemos: (en Nestcape slo se vera la tabla, no el botn)
uno dos
tres cuatro

<textarea name="comentario" cols="20" rows="10" readonly>
ahora no puedes escribir nada.
</textarea>
</form>

<button name="boton_1" type="button">
<img src="images/pajaro.gif" width="75" height="30" border="0" alt="enviar">
</button>
</form>
con el que obtenemos: ( en Nestcape slo se vera la imagen, no el botn)
Etiquetas <LABEL>...</LABEL>
Hasta hora, el texto que acompaaba a los campos de entrada no estaba asociado a los mismos de
ninguna manera. As, por ejemplo, si pulsabamos en el texto que acompaaba a un control de confirmacin, no
46
suceda nada. Ahora, en cambio, si utilizamos la etiqueta LABEL, el control cambiara de estado (slo
disponible en Netscape 5).
<label>
<input type="checkbox" name="correo">
deseo que me enven correo
</label>
</form>
FORMULARIOS CON ESTILO

Los formularios constituyen una buena herramienta con la que podemos volver nuestras paginas web
mas interactivas, pero los diferentes elementos que los componen presentan bastantes limitaciones a la hora del
diseo "esttico" de la pagina. Esto es debido a que son objetos predefinidos, y como tales tienen una
propiedades que hasta hace poco eran fijas e inmutables.
Hace poco Microsoft, en su empeo por convertir cada elemento HTML en un objeto libre con sus propiedades
y mtodos, implement el uso de Hojas de Estilo en Cascada (CSS) a estos elementos, permitiendo con ello
modificar a nuestro gusto diversas caractersticas de los componentes de un formulario, dandonos con ello un
gran abanico de posibilidades de diseo. Por desgracia, casi todas estas implementaciones son ignoradas por
Nestcape, con lo que el poder que podamos conseguir con esta tcnica queda disminuido notablemente. La
nica solucin viable pus si queremos modificar el funcionamiento estandar de los elementos de un formulario
es intentar compaginar un diseo personalizado de nustra pagina para aquellos navegantes que nos visiten
usando Explorer con un diseo estandar valido para los que lo hagan con Nestcape. Y esto mismo nos va a
ocurrir con casi todos los elementos HTML.
* ESTILOS PARA CAJAS DE TEXTO.
Las cajas de texto presentan varias limitaciones en cuanto a su diseo clasico. Para empezar, el tamao de las
mismas viene definido mediante el atributo size="n", y mediante diferentes valores de n podemos aumentar o
disminuir la anchura de la caja. Pero estas unidades de medida no son todo lo exactas que a veces podemos
necesitar, ya que el aumento de una unidad en el valor de n se traduce en un aumento de anchura de 6 - 7
pxeles, que puede ser excesivo margen para nustro gusto, por ejemplo si trabajamos en una pagina en que
estamos condicionados a disear "al pxel".
Ejemplos.<form>
<input type="Text" style="width:100px;height:20px;background-color:red;color:yellow;font-size:10pt;
family:Verdana;text-align:center;">
</form>
que nos da:
font-
<form>
<input type="Text" style="width:200px;height:50px;background-color:yellow;color:blue;font-size:14pt;fontfamily: Comic Sans MS;text-align:right;padding-right:10px;">
</form>
que nos da:
<form>
<input type="text" style="width:70px;height:30px;font-size:12pt;font-family:Helvetica;font-weight:bold;
color:green;border-width:thin;border-style:solid;border-color:green;background-image:url(images/1.jpg);">
</form>
que nos da:
Los atributos de CSS que se manejan son:

width, que fija la anchura de la caja.
height, que fija la altura de la caja.

background, que determina el color de fondo, y cuyo valor puede venir dado en su nombre web en
ingls o como formato hexadecimal.
color, que define el color de la fuente, y cuyo valor puede venir dado en su nombre web en ingls o como
formato hexadecimal.
font-family, que fija el tipo de la fuente.
text-align, que define la alineacin del texto en la caja.
padding-right (left / top/ bottom), que fija el margen entre el extremo derecho (izquierdo / superior
/inferior) de la caja y el texto que contiene.
border-width (thin / medium / thick / none), que define el ancho del borde.
border-style (none / solid / double / groove / ridge / inset / outset), que fija el estilo del borde.
border-color, que define el color del borde.
background-image, que establece una imagen de fondo para la caja de texto.. Este atributo no es
soportado por Nestcape 4x en ninguno de los elementos de formulario, y simplemente lo ignora.
Y de igual forma se pueden usar todos aquellos atributos CSS que consideremos necesarios. En estos
ejemplos Nestcape 4x slo aceptara el tamao de la fuente y el tipo de esta, adaptando la altura de la caja a
la fuente, y los bordes los pintara aparte de la caja, como un elemento independiente, con lo que el
resultado no es el deseado.
* ESTILOS PARA BOTONES DE RADIO.
El planteamiento es analogo al de las cajas de texto que hemos visto, pero debido a que este campo
de formulario es slo un botn sin texto intrnseco, las propiedades de CSS que podremos usar son mas
limitadas.
Ejemplos.<form>
<input type="radio" name="opcion" value="uno" style="width:200px;height:50px;background-color:yellow;">
<input type="radio" name="opcion" value="dos" style="width:200px;height:50px;backgroundcolor:blue;border-width:thick;border-style:solid;
border-color:red;">
</form>
<form>
<input type="radio" style="width:70px;height:30px;border-width:thin;border-style:solid;
border-color:green;color:#000000;background-image:url(images/1.jpg);">
</form>
que nos da:
* ESTILOS PARA CHECKBOX.
Al igual que con los botones de radio podemos utilizar aquellos atributos CSS que no afecten al texto,
teniendo los mismos atributos y problemas respecto a los navegadores.
Ejemplos.<form>
<input type="checkbox" style="width:50px;height:50px;background-color:yellow;">
<input type="checkbox" style="width:50px;height:50px;background-color:blue;border-width:thick;
border-style:double;border-color:red;">
47
</form>
<form>
<input type="checkbox" name="valor" value="uno" style="width:70px;height:30px;border-width:thin;borderstyle:solid;border-color:green;
color:#000000;background-image:url(images/1.jpg);"">
</form>
* ESTILOS PARA BOTONES.
Los botones (type button, submit y reset) admiten los siguientes atributos CSS de estilo:
width, que fija la anchura del botn.
height, que fija la altura del botn.

background-color, que determina el color de fondo, y cuyo valor puede venir dado en su nombre web en
ingls o como formato hexadecimal.
background-image, que determina una imagen de fondo.
color, que define el color de la fuente, y cuyo valor puede venir dado en su nombre web en ingls o como
formato hexadecimal.
font-family, que fija el tipo de la fuente del texto del botn.
font-size, que define el tamao del texto del botn.
font-weight, que fija el peso de la fuente (cantidad de negrita).
text-align, que define la alineacin del texto en el botn.
padding-right (left / top/ bottom), que fija el margen entre el extremo derecho (izquierdo / superior
/inferior) del botn y el texto que contiene.
border-width (thin / medium / thick / none), que define el ancho del borde.
border-style (none / solid / double / groove / ridge / inset / outset), que fija el estilo del borde.
border-color, que define el color del borde.
Ejemplos.<form>
<input type="button" style="width:50px;height:50px;.background-color:yellow; value="botn">
<input
type="button"
style="width:70px;height:50px;background-color:blue;border-width:thin;borderstyle:solid;
border-color:red;color:#ffffff;font-size:12pt;font-family:Verdana;font-weight:bold;" value="botn">
</form>
<form>
<input type="button" name="boton" value="uno" style="width:70px;height:30px;border-width:thin;borderstyle:solid;border-color:green;
color:#000000;background-image:url(images/1.jpg);">
</form>
* ESTILOS PARA BOTONES DE IMAGEN.
Admiten los atributos CSS de anchura, altura y bordes. De ellos slo es nuevo el referente a bordes,
ya que en los propios atributos del botn imagen podemos definir su tamao mediante width y height. En
cuanto a los bordes, Nestcape los muestra aparte del botn, mostrando este con unos bordes azules por defecto
si ni incluimos el atributo de imagen border="0".
Ejemplo.<form>
<input type="button" style="width:50px;height:50px;.background-color:yellow; value="botn">
<input type="image" src="images/1.jpg" width="70" height="30" border="0"

style="width:70px;height:30px;border-width:thin;border-style:solid;border-color:red;">
</form>
NOTA: Si queremos definir un botn con un color de fondo. que sea visible en ambos navegadores, y
puesto que Nestcape no admite este atributo, deberemos utilizar un botn de tipo image, estableciendo
como imagen de fondo simplemente un grafico del color que deseemos. El inconveniente es que este tipo
de botones no admiten el parametro value, por lo que si queremos que aparezca un texto en el botn debera
estar este incluido en la propia imagen de fondo.
NOTA: En Nestcape, puesto que no reconoce para este tipo de botn los atributos de estilo de anchura y
altura deberemos especificar estos como parametros width y height del propio botn ya que si no es as
mostrara la imagen con sus dimensiones originales. Es por eso que no los introducimos dentro de style, si
no como atributos de botn.
* ESTILOS PARA LISTAS DE SELECCIN.
I.Explorer admite practicamente todos los atributos de estilo, salvo los de bordes y el de imagen de fondo.
No admite este, pero s el de color de fondo, admitiendolo tanto para toda la lista, si lo incluimos en el
estilo de la etiqueta SELECT como opcin por opcin, si lo incluimos dentro de cada etiqueta OPTION.
Nestcape no admite ninguna de ellos, y para determinar en l el tamao de fuente y la clase de la misma
hay que recurrir a las etiquetas<FONTSIZE="tamao"FACE="familia">, con los inconvenientes que
utilizar estas etiquetas ya depreciadas conlleva. En este caso, la anchura y la altura de la lista dependera del
tamao y tipo de fuente elegido (para Nestcape).
Ejemplos.<form>
<font face="Courier" size="1">
<select style="width:170px;height:50px;color:red;background-color:yellow;font-size:12px;font-family:courier;">
<optionvalue="uno">uno
<optionvalue="dos">dos
<optionvalue="tres">tres
</font>
</form>
<form>
<font face="Comic Sans MS" size="2">
<select style="width:100px;height:50px;font-size:12px;font-family:Comic Sans MS;">
<option value= "uno"style="color:red;background-color:yellow;">uno
<option value= "dos"style="color:#333300;background-color:#ccff00;">dos
<option value= "tres"style="color:#996600;background-color:#66ccff;">tres
<select>
</font>
</form>
* ESTILOS PARA CAJAS DE TEXTO MLTIPLES.

Las cajas de texto de varias lneas y columnas, definidas por la pareja de etiquetas
<TEXTAREA>...</TEXTAREA>, admiten en Explorer todas los atributos de estilo, incluyendo una
imagen de fondo para la caja. Nestcape no reconoce ningn atributo de estilo, debiendo especificar el
tamao y la familia de la fuente dentro de la etiqueta FONT.
Ejemplos.<form>
<font face="Comic Sans MS" size="3">
48
<textarea name="comentario" cols="20" rows="5" style="width:200px;height:100px;font-size:12px;fontfamily:Comic Sans MS;background-image:url(images/1.jpg);color:red;asdas">

</textarea>
</font>
</form>
<form>
<font face="Helvetica" size="3">
<textarea name="comentario" cols="20" rows="5" style="width:200px;height:100px;font-size:12px;fontfamily:Helvetica;background-color:green;color:yellow;">
</textarea>
</font>
</form>
Con la aparicin de Internet Explorer 5.5 tambn podemos dar estilo a las barras de desplazamiento de las Textarea,
mediante el cdigo:
<textarea cols="10" rows="5" style="scrollbar-face-color:#DFFFBF;scrollbar-shadowcolor:green;"></textarea>
que nos da:
* ESTILOS PARA ETIQUETAS BUTTON.

Esta etiqueta no es reconocida por Nestcape, por lo que lo que digamos en adelante es slo aplicable
a Explorer. Este reconoce todas la etiquetas de estilo, presentando este elemento de formulario la gran ventaja
de que admite tanto imagen de fondo como texto y cualquier otro elemento HTML en su interior, por lo que
presenta mltiples usos. Como observacin, si empleamos elementos HTML dentro del botn, como por
ejemplo una tabla, los estilos de color de texto deben ser definidos bien mediante la etiqueta FONT dentro de la
tabla, bien dando estilo de texto mediante CSS a la tabla en s; si no lo hacemos as normalmente el texto
aparecera en color negro. El tipo de fuente y el tamao s lo cogen directamente del estilo del botn. La pena es
que no podremos usarla para construir paginas que deban ser visualizadas en ambos navegadores, con lo que su
uso es por esto desaconsejable. En el caso de un botn de este tipo con una tabla dentro, Nestcape slo
visualizara la tabla.
Ejemplo.<form>
<button name="boton_1" type="button" style="color:blue;width:100px;height:60px;font-size:12px;fontfamily:Comic Sans MS;background-image:url(images/1.jpg);">
<table width="50%" height="50%" cellspacing="0" cellpadding="2" border="1">
<tr>
<td>uno</td>
<td>dos</td>
</tr>
<tr>
<td>tres</td>
<td>cuatro</td>
</tr>
</table>
</button>
</form>
uno
dos
tres
cuatro
NOTA IMPORTANTE.Todo lo explicado hasta ahora para estilos en elementos de formualrio es totalmente valido para
Internet Explorer y para Nestcape 6x, pero no as para Nestcape 4x, ya que este navegador tiene una
manera parcial de interpretar los estilos en estos elementos. As, si tenemos un radio botn contenido en
una tabla con un determinado color de fondo, Nestcape 4x va a colocar alrededor del radio botn un
cuadrado del mismo color que tenga asignado el BODY de la pagina, factor este que crea un efecto
indeseado que afeara nuestra pagina. La solucin para por asignar mediante estilos un fondo al radio de
igual color que la tabla, pero esto slo se logra a veces, ya que si por ejemplo hay en la pagina, por encima
del radio, otro elemento de formulario al que hemos aplicado algn estilo, el estilo del radio no funciona,
con lo que seguiremos con el indeseado marco alrededor del mismo. Y esto ocurre igualmente con otros
elementos de formulario.
Si nuestra tabla es de color rojo y queremos la pagina con fondo blanco el cdigo necesario sera:
<bodyonLoad="document.bgColor="red">
<table width="100%" bgcolor="white" height="100%">
<tr>
<td>
<table...bgcolor="red"> (la tabla del formulario
</td>
</tr>
</table>
</body>
* POSICIONAMIENTO DE ELEMENTOS DE FORMULARIO.
Para posicionar elementos de formulario dentro de la ventana de nuestro navegador deberemos
introducir los parametros position (absolute / relative), top. (normalmente en pxeles, y define la posicin de la
esquina superior izquierda del elemento respecto al borde superior de la ventana del navegador) y left
(normalmente en pxeles, que determina la distancia respecto al borde izquierdo de la ventana del navegador)
dentro del atributo style del elemento.
La sintaxis general sera del tipo:
<form>
<input type="Text" style="width:100px;height:20px;background-color:red;color:yellow;font-size:10pt;
font-family:Verdana;text-align:center;position:absolute;top:50px;left:200px;">
</form>
que nos situara la caja de texto a 50 pxeles por debajo del borde superior de la ventana del navegador y a
200 pxeles del borde izquierdo.
En el caso de que varios elementos se superpusieran aparecera aquel que estuviera situado antes en la
estructura del cdigo HTML de la pagina. Esto se puede cambiar mediante el atributo z-index, que define
una coordenada z o de profundidad de los elementos en la pagina.
<form action="cgi-bin/control.cgi" method="post" enctype="text/plain" name= "miform">
49
<textarea name="comentario2" cols="20" rows="10" style="position:absolute;top:50px;left:50px;zindex:1;">

</textarea>
<textarea name="comentario2" cols="20" rows="10" style="position:absolute;top:70px;left:70px;zindex:2;">
</textarea>
</form>
* POSICIONAMIENTO MEDIANTE CAPAS.
El gran inconveniente de posicionar elementos de formulario mediante estilos directos es que
aquellos visitantes que usen Nestcape Navigator no veran una pagina agradable entonces. ?Qu podemos
hacer si queremos posicionar un elemento para que sea visible en ambos navegadores?.
La solucin pasa por colocar los elementos dentro de una capa, creada mediante las etiquetas <DIV> y/o
<SPAN>, con sus respectivas de cierre. Con esto, podemos posicionar estas capas, y con ellas los
elementos que contienen, en nuestra pagina, y esto sera comtemplado adecuadamente por los dos
navegadores.
Un ejemplo de esto sera, basandonos en el anterior:
<form action="cgi-bin/control.cgi" method="post" enctype="text/plain" name= "miform">
<div style="position:absolute;top:50px;left:50px;width:200px;height:200px;clip:rect(0,200,200,0);zindex:1;">
<textarea name="comentario1" cols="20" rows="10"></textarea>
</div>
<div style="position:absolute;top:90px;left:90px;width:200px;height:200px;clip:rect(0,200,200,0);zindex:2;">
<textarea name="comentario2" cols="20" rows="10"></textarea>
</div> </form>
MAQUETACIN DE FORMULARIOS
Hemos visto hasta ahora cmo implementar los diferentes elementos que forman un formulario,
pero de una forma aislada, y esta no es la forma en que estos trabajan. Para que un formulario sea atractivo
para un visitante y logre romper ese miedo innato que todos tenemos a la hora de introdugir nuestros datos
personales, lo primero que debe tener es una buena - magnfica apariencia esttica.Y luego, por supuesto,
que est realizado tcnicamente bien y que el programa que lo vaya a gestionar en el servidor sea el
adecuado.
Para dar un buen aspecto a nuestro formulario deberemos primero estudiar, antes de hacer nada, qu datos
queremos recopilar, eliminando los superfluos, (no debemos agobiar al visitante con demasiadas preguntas)
y hacer un esquema en papel de cmo van a estar dispuestos los diferentes elementos en la pagina.
Una vez definido el formulario que deseamos...?Cmo lo llevamos a la realidad?. Bien, podemos
construirlo usando principalmente dos tcnicas distintas, aunque la basada en capas o posicionamientos
directos de elementos slo sera valida si estamos diseando para I. Explorer, es decir, que no debemos
usarla nunca, ya que siempre debemos crear paginas para ambos navegadores. A ttulo terico veremos esta
forma, pero slo para eso.
* MAQUETACIN MEDIANTE TABLAS.

La tcnica mas general para maquetar una pagina es la basada en tablas, y a esto tampoco escapan los
formularios. Vamos pus a maquetar nuestro formulario usando una tabla, teniendo siempre en cuenta las
limitaciones que estas tienen (vease el captulo correspondiente a tablas en este mismo manual).
La idea general es crear una tabla compuesta de dos columnas y tantas filas como nos sean necesarias. En
la primera columna van a ir los mensajes de cada campo, y el la segunda los propios campos del
formulario.
Deberemos tener en cuenta:
* hay que especificar correctamente las anchuras de la tabla en su totalidad y de las celdas que la van a
componer. Hay que tener en cuenta que todas las celdas se van a adaptar a la de mayor contenido, por lo
que conviene elegir unos mensajes de campo de longitud parecida.
* si vamos a dar algn color de fondo a las celdas, para hacer la tabla mas presentable, es conveniente dejar
un pequeo margen entre las celdas, mediante el atributo celspacing.
* si utilizamos en la maquetacin celdas "vacias" deberemos introducir dentro de ellas un espacio ( )
o una imagen transparente de 1 pxel, para que se mantengan las anchuras de estas celdas.
* es conveniente disponer todo el formulario en la visual de la ventana del navegador para que el usuario
no tenga que moverse a lo largo del mismo mediante las barras de desplazamiento, ya que esto es
incmodo para l. Para ello deberemos, si es necesario, disponer el formulario en varias columnas de
introduccin de datos.
* si necesitamos separa elementos que estn dentro de la misma celda lo haremos con tantos espacios
( ) como sea necesario.
Ejemplo.<form action="cgi-bin/mailto.cgi" method="post" enctype="application/x-www-form-urlencoded">
<table width="60%" cellspacing="2" cellpadding="2" border="0">
<th colspan="2" bgcolor="Fuchsia">Por favor, rellena estos datos</th>
<tr>
<td bgcolor="#ccff33" width="180"><b>Nombre:</b></td>
<td bgcolor="#ccffff"><input type="text" maxlength="15" size="35" name="nombre"></td>
</tr>
<tr>
<td bgcolor="#ccff33" width="180"><b>Apellidos:</b></td>
<td bgcolor="#ccffff""><input type="text" maxlength="25" size="35" name="apellidos"></td>
</tr>
<tr>
<td bgcolor="#ccff33" width="180"><b>Direcin:</b></td>
<td bgcolor="#ccffff""><input type="text" maxlength="35" size="35" name="direccion"></td>
</tr>
<tr>
<td bgcolor="#ccff33" width="180"><b>Cdigo Postal:</b></td>
<td bgcolor="#ccffff""><input type="text" maxlength="5" size="4" name="direccion"></td>
</tr>
<tr>
<td bgcolor="#ccff33" width="180"><b>Marca tu equipo favorito:</b></td>
<td bgcolor="#ccffff"">
<input type="Radio" name="equipo" value="madrid" checked>Real Madrid
     <input type="Radio" name="equipo" value="atletico">Atltico de
Madrid
</tr>
<tr>
<td bgcolor="#ccff33" width="180"><b>Marca tu msica favorita:</b></td>
<input type="checkbox" name="musica" value="rock" checked>Rock
  <input type="checkbox" name="musica" value="pop" checked>Pop
  <input type="checkbox" name="musica" value="heavy">Heavy
  <input type="checkbox" name="musica" value="tecno">Tecno
</td>
</tr>
<tr>
<td bgcolor="#ccff33" width="180"><b>Elige un escritor:</b></td>
<select style="width:100px;">
<option value="Cervantes">Cervantes
50
<option value="Reverte">Reverte
<option value="Asimov">Asimov
</select>
</td>
</tr>
<tr>
<td bgcolor="#ccff33" width="180" valign="top"><b>?Algn comentario?</b></td>
</textarea>
</td>
</tr>
<tr>
<td bgcolor="#ccff33" width="180" align="right"><input type="submit" value="enviar"></b></td>
<td bgcolor="#ccffff" align="left"><input type="reset" value="borrar"></td>
</tr>
</table>
</form>
* MAQUETACIN MEDIANTE CAPAS.

Otra forma de maquetar un formulario es utilizando capas, definidas mediante las parejas de
etiquetas <DIV>...</DIV> y/o <SPAN>...</SPAN>, que vamos a situar en nuestra pagina mediante los
atributos de style position, top y left. Ya hemos dicho antes que este mtodo suele traer bastantes
quebraderos de cabeza en Nestcape.
La idea ahora es ir creando y posicionando las capas, introduciendo en cada una de ellas bien un mensaje
de campo bien el propio campo.
De esta forma podramos escribir el siguiente cdigo:
<html>
<head>
<title>formularios - ejemplo 6</title>
.mensaje{width:195px;height:25px;clip:rect(0,195,25,0);background-color:#ccff33;layer-backgroundcolor:#ccff33;padding-left:5px;font-family:Verdana;font-size:8pt;font-weight:bold;padding-top:3px;}
.mensaje2{width:195px;height:168px;clip:rect(0,195,168,0);background-color:#ccff33;layer-backgroundcolor:#ccff33;padding-left:5px;font-family:Verdana;font-size:8pt;font-weight:bold;padding-top:3px;}
.boton{width:195px;height:30px;clip:rect(0,195,30,0);background-color:Fuchsia;layer-backgroundcolor:Fuchsia;padding-left:5px;padding-top:3px;font-family:Verdana;font-size:8pt;font-weight:bold;}
.boton2{width:265px;height:30px;clip:rect(0,265,30,0);background-color:Fuchsia;layer-backgroundcolor:Fuchsia;padding-left:5px;padding-top:3px;font-family:Verdana;font-size:8pt;font-weight:bold;}
.campo{width:265px;height:25px;clip:rect(0,265,25,0);background-color:#ccffff;layer-backgroundcolor:#ccffff;padding-left:5px;padding-top:1px;}
.campo2{width:265px;height:168px;clip:rect(0,265,168,0);background-color:#ccffff;layer-backgroundcolor:#ccffff;padding-left:5px;padding-top:1px;}
#cabecera{position:absolute;top:22px;left:20px;width:464px;height:25px;clip:rect(0,464,25,0);backgrou
nd-color:Fuchsia;layer-background-color:Fuchsia;text-align:center;font-family:Verdana;fontsize:8pt;font-weight:bold;padding-top:5px;}
#capaA0{position:absolute;top:50px;left:20px;}
#capaA1{position:absolute;top:50px;left:220px;}
#capaB0{position:absolute;top:80px;left:20px;}
#capaB1{position:absolute;top:80px;left:220px;}
#capaC0{position:absolute;top:110px;left:20px;}
#capaC1{position:absolute;top:110px;left:220px;}
#capaD0{position:absolute;top:140px;left:20px;}
#capaD1{position:absolute;top:140px;left:220px;}
#capaE0{position:absolute;top:170px;left:20px;}
#capaE1{position:absolute;top:170px;left:220px;}
#capaF0{position:absolute;top:200px;left:20px;}
#capaF1{position:absolute;top:200px;left:220px;}
#capaG0{position:absolute;top:230px;left:20px;}
#capaG1{position:absolute;top:230px;left:220px;}
#capaH0{position:absolute;top:260px;left:20px;}
#capaH1{position:absolute;top:260px;left:220px;}
#capaI0{position:absolute;top:433px;left:20px;padding-left:100px;}
#capaI1{position:absolute;top:433px;left:220px;}
</style>
</head>
<body>
<form name="miform">
<div id="cabecera">Por favor, rellena estos datos</div>
<div id="capaA0" class="mensaje">Nombre:</div>
<div
id="capaA1"
class="campo"><input
type="text"
maxlength="15"
size="35"
name="nombre"></div>
<div id="capaB0" class="mensaje">Apellidos:</div>
<div
id="capaB1"
type="text"
maxlength="25"
size="35"
name="apellidos"></div>
<div id="capaC0" class="mensaje">Direcin:</div>
<div
id="capaC1"
type="text"
maxlength="35"
size="35"
name="direccion"></div>
<div id="capaD0" class="mensaje">Cdigo Postal:</div>
<div
id="capaD1"
type="text"
maxlength="5"
size="4"
name="direccion"></div>
<div id="capaE0" class="mensaje">Marca tu equipo favorito:</div>
<div id="capaE1" class="campo">
<input type="Radio" name="equipo" value="madrid" checked>Real Madrid
     <input type="Radio" name="equipo" value="atletico">Atltico de
Madrid
</div>
<div id="capaF0" class="mensaje">Marca tu msica favorita:</div>
<div id="capaF1" class="campo">
<input type="checkbox" name="musica" value="rock" checked>Rock
  <input type="checkbox" name="musica" value="pop" checked>Pop
  <input type="checkbox" name="musica" value="heavy">Heavy
  <input type="checkbox" name="musica" value="tecno">Tecno
</div>
<div id="capaG0" class="mensaje">Elige un escritor:</div>
<div id="capaG1" class="campo">
<select style="width:100px;">
<option value="Cervantes">Cervantes
<option value="Reverte">Reverte
<option value="Asimov">Asimov
</select>
</div>
<div id="capaH0" class="mensaje2">?Algn comentario?</div>
<div id="capaH1" class="campo2">
</textarea>
</div>
<div id="capaI0" class="boton"><input type="submit" value="enviar" onclick="alert('botn de prueba.
No esta activo');"></div>
51
<div id="capaI1" class="boton2"><input type="reset" value="borrar"></div>

</form>
</body>
</html>
IMGENES EN HTML
LA ETIQUETA <IMG>.El lenguaje HTML 4.0 posee una etiqueta especfica para la introduccin de una imagen dentro del
documento de una pgina web, la etiqueta <IMG>. Con ella deberemos insertar todas las imgenes que deseemos
que tenga nuestra pgina, y es una etiqueta que carace de pareja de cierre, es decir, no se debe poner nunca </IMG>.
La sintaxis general de esta etiqueta es:
<IMG atributo="valor" atributo= "valor".......>;
En esta sintaxis vemos que la etiqueta IMG posee una serie de atributos que permiten definir adecudamente cmo
se debe situar y comporta la imagen dentro de la pgina.
Los principales atributos de la etiqueta IMG son:
* SRC="ruta_imagen": que establece la localizacin de la imagen que queremos insertar mediante la etiqueta
IMG, y en donde la ruta puede ser relativa a la estructura de carpetas del sitio web o absoluta, en cuyo caso se debe
dar la URI completa del fichero grfico. Ejemplos:
<IMG SRC="images/bandera.jpg"> (ruta relativa)
<IMG SRC="http://www.mi_dominio.com/images/bandera.jpg"> (ruta absoluta)
y con cualquiera de ellas tendremos ya la imagen incluida dentro de nuestra pgina, como vis a continuacin:
Dnde se deben guardar las imgenes en un sitio web?. Lo ms usual es hacerlo en una carpeta propia, que cuelga
del directorio raiz, y que en las mayora de los sitios web recibe el nombra de "images".
Qu ruta es mejor usar, la relativa o la absoluta?. Bueno, depende. Lo normal es establecer rutas relativas cuando
las pginas forman parte de un sitio web propio, que va a permanecer siempre en su lugar actual, por lo que la ruta
relativa siempre ser correcta. Pero si pensamos cambiar la carpeta de las pginas dentro del esquema de nuestro
sitio, o si queremos tener un conjunto de pginas destinado a poder ser seccionado del total (como por ejemplo, este
manual de imgenes, si quiero crear con l un zip para que podis descargarlo independientemente), lo mejor
entonces en establecer rutas absolutas, ya que as siempre estaris seguros de que las imgenes van a estar
disponibles.
Tambin existe otra posibilidad de ruta para las imgenes. Si nuestra pgina va a tener contenido dinmico, porque
por ejemplo vaya a ser una pgina JSP (con cdigo Java), y va a estar situada en un servidor dinmico, lo correcto es
establecer las rutas a partir de la raiz de la aplicacin, por lo que su sintaxis en este caso sera, por ejemplo:
<IMG SRC="/carpeta_padre/carpeta_hijo/images/bandera.jpg">
ya que esta es la forma correcta de establecer rutas en este caso, no slo para imgenes, tambin para archivos CSS o
js. Lo que ocurre entonces es que muchas veces no verenos bien las pginas si no lo hacemos a travs de un servidor
web, es decir, puede que en este caso no se vean las pginas en local.
* WIDTH- HEIGHT="valor": que van a establecer la anchura y la altura de la imagen. Son estos unos atributos
muy importantes, que hay que usar siempre. El parmetro valor es un nmero que representa la medida del atributo
en pixels.
Cuando el navegador recibe una pgina web del servidor empieza a leer el cdigo HTML de esta, empezando por
arriba, y cuando llega al contenido del BODY empieza a pintarlo en pantalla. Si se encuentra una etiqueta IMG, lo
que hace el navegador es realizar una nueva peticin HTTP al servidor, para que le enve la imagen correspondiente,
pero no se queda parado esperando la imagen, si no que sigue leyendo el contenido del BODY y presentndolo en
pantalla. Se produce con ello un desfase entre la presentacin de la imagen, que todava no le ha llegado (sobre todo
si es una imagen pesada, de muchos Ks) y el resto del contenido de la pgina.
Si hemos establecido las medidas de la imagen con los atributos WIDTH y HEIGHT, el navegador reserva este
espacio para ella, y cuando la imagen se acabe de cargar se visualiza en pantalla, sin sufrir el diseo de la pgina.
Pero si no hemos establecido las medidas, el navegador no sbe el tamao fsico de la imagen, con lo que no reserva
el espacio adecuado en pantalla, por lo que cuando llega esta y aparece, se produce un salto de todo el contenido de
la pgina, para dejar el espacio que necesita la imagen. Este efecto es muy feo y se debe evitar. En la siguiente
ventana vemos un ejemplo de este efecto indeseado , un poco exagerado para que lo veis bien.
Adems, hay que usar para WIDTH y HEIGHT exactamente los tamaos que tenga en realidad la imagen, ya que si
no es as, sta se deforma. Esta deformacin se notar poco si la imagen es plana y de pocos colores, pero si contiene
texto o si es una imagen de muchos colores o que representa un objeto conocido, la deformacin arruinar
totalmente la apariencia de la misma. En el siguiente ejemplo podis ver la misma imagen, con las medidas bien y
mal definidas.
Para saber el tamao exacto de una imagen podis abrirla con cualquier programa grfico y en l ver sus
propiedades, o tambin abrirla con Internet Explorer, por ejemplo, y pulsaldo sobre ella con el botn derecho
seleccionar "propiedades", con lo que tendris sus dimensiones y su tamao en Ks.
Tambin es posible expresar el tamao de una imagen mediante porcentajes. En un mtodo no recomendado por los
estndares, y que slo es til en el caso de tener una imagen con la que queramos hacer una lnea horizontal o usarla
para construir un men grfico, pero en este caso, si usamos celdas de tabla, es mejor asignar la imagen como fondo
de la celda
Un ejemplo de imagen definida en tantos por ciento es el siguiente:
<IMG SRC="bg.gif" WIDTH="70%" HEIGHT="10">
* BORDER="valor": que establece el borde lateral que va a tener la imagen, y donde valor es un nmero en pixels.
Si la imagen no est establecida como enlace, el tamao del borde es nulo por defecto, pero si esta est dentro de un
enlace aparecer un borde azul alrededor de ella si no indicamos nada. Si deseamos que este borde desaparezca
deberemos establecer un borde cero con este atributo. Ejemplos:
Imagen sin enlace ni atributo BORDER:
<IMG SRC="boton.jpg" WIDTH="137" HEIGHT="33">
Imagen sin enlace con borde asignado:

<IMG SRC="boton.jpg" WIDTH="137" HEIGHT="33" BORDER="3">
Imagen con enlace pero sin atributo BORDER:

<A HREF="loquesea.html"><IMG SRC="boton.jpg" WIDTH="137" HEIGHT="33"></A>
Imagen con enlace y BORDER puesto a cero:

<A HREF="loquesea.html"><IMG SRC="boton.jpg" WIDTH="137" HEIGHT="33" BORDER="0"></A>
* ALIGN="left / right / top / middle /bottom": que establece la alineacin que va a tener la imagen en la pgina.
Las alineacines pueden ser de tipo horizontal (left a la izquierda - right a la derecha) o verticales (top en lo alto,
middle en medio y bottom abajo). El valor por defecto es left. Vamos a analizar las diferentes posibilidades una a
una, ya que ofrecen matizes que conviene explicar.
52
Si no establecemos una alineacin determinada, hemos dicho que por defecto se toma left, pero hay una diferencia
entre no poner nada y asignar una alineacin a la izquierda. Si no ponemos nada y colocamos una imagen "a pelo"
entre dos trozos de texto, esta ocupar su posicin natural en la pgina. Ejemplo:
ejemplo de<IMG SRC= "images/bandera.jpg" WHIDTH="55" HEIGHT= "37">imagen entre texto y sin alineacin
que nos da:
ejemplo de
imagen entre texto y sin alineacin
donde vemos que la imagen se sita entre las dos porciones de texto, sin ruptura de lnea.
Pero si asignamos un valor ALIGN="left", ya no se produce este efecto. Ahora el texto se sita rodeando la imagen,
envolvindola. Ejemplo:
ejemplo de<IMG SRC= "images/bandera.jpg" WHIDTH= "55" HEIGHT= "37" ALIGN= "left">imagen entre texto
y alineacin...
que nos da:
ejemplo de imagen entre texto y con alineacin imagen entre texto y con alineacin imagen entre texto
y con alineacin imagen entre texto y con alineacin imagen entre texto y con alineacin imagen entre
texto y con alineacin
En el caso de ALIGN="right" ocurrelo mismo. Ejemplo:
ejemplo de<IMG SRC= "images/bandera.jpg" WHIDTH= "55" HEIGHT= "37" ALIGN="right">imagen entre
texto y alineacin...
ejemplo de imagen entre texto y con alineacin imagen entre texto y con alineacin imagen entre texto
y con alineacin imagen entre texto y con alineacin imagen entre texto y con alineacin imagen entre
texto y con alineacin
En ambos casos, si colocamos en el cdigo primero la imagen con alineacin y despus el texto, este
rellenar el espacio lateral disponible, sin que aparezca entonces la primera lnea encima de la imagen. Ejemplo:
<IMG SRC= "images/bandera.jpg" WHIDTH= "55" HEIGHT="37" ALIGN= "left">imagen entre texto y
alineacin...
imagen entre texto y con alineacin imagen entre texto y con alineacin imagen entre texto y con
alineacin imagen entre texto y con alineacin imagen entre texto y con alineacin imagen entre texto y
con alineacin
Este efecto conseguido, en el que el texto parece flotar alrededor de la imagen es conocido como
Imgenes Flotantes.
disponen de navegadores de slo texto. En estos casos, si la imagen no se muestra en pantalla, s que lo hace el texto
contenido en el atributo ALT, dando con ello una descripcin de la imagen al usuario.
Esto es de especial importancia en el caso de que la imagen contenga un enlace para navegar, ya que si el usuario no
puede ver la imagen y no se establece este atributo, no podr saber dnde lleva ese enlace.
Resulta tambin til el el caso de un usuario que tenga activada la carga de imgenes, ya que mientras vienen estas
del servidor podr conocer mediante el texto asociado qu tipo de imagen est esperando, y lo mismo ocurre en el
caso de que la imagen no se reciba por cualquier motivo, como por ejemplo, si la ruta especificada para ella en
incorrecta.
En el siguiente ejemplo voy a provocar un error en la carga, haciendo referencia a una imagen que no existe,
y tambin voy a cargar la imagen correcta, para que veis el uso del atributo ALT:
<IMG SRC="images/noexiste.gif" WIDTH="100" HEIGHT="50" BORDER="0" ALT="fotografa de un cuadro">
<IMG SRC="images/cuadro.gif" WIDTH="100" HEIGHT="50" BORDER="0" ALT="fotografa de un cuadro">
Si situis el cursor sobre la imagen anterior veris como aparece un bocadillo con el contenido del atributo ALT, por
lo que otro uso de este es proporcionar al usuario una descripcin complementaria a la imagen en s. Si se ve este
ejemplo en Internet Explorer, podremos apreciar un pequeo rectngulo con una cruz roja, que indica que la imagen
no se ha encontrado en el servidor o que est desabilitada la opcin de mostrar imgenes, y tambin veris el texto
descriptivo establecido en ALT. Pero si vis esta pgina con Nestcape 4x observaris que no aparece el texto
alternativo directamente, slo lo hace al situar el cursor encima del cuadro vaco de la imagen, mostrando en este
una fea imagen con en interrogante en colores, indicando que la imagen pedida no est disponible. Por ltimo, si la
vis en Nestcape 6x, apreciaris que en el caso de la imagen desaparecida no se muestra ni si quiera el rectngulo
que ocupara, aunque s el texto definido mediante ALT, y si situis el cursor encima de la imagen que se ve no
aparecer el bocadillo con el texto del ALT; esto ocurre porque este navegador utiliza como fuente de este bocadillo
el atributo TITLE, que vemos ms abajo.
Puede darse el caso de que no nos interese la aparicin de este bocadillo o del texto alternativo a una imagen, como
es el caso de que creemos una lnea horizontal con una imagen. Podramos para ello no establecer el atributo ALT en
la etiqueta IMG, pero entonces no estaramos siguiendo las recomendaciones del W3C, que dice que hay que
ponerlo siempre. La solucin es poner el atributo, pero sin contenido. Ejemplo:
<P ALIGN="center"><IMG SRC="images/bj.gif" WIDTH="400" HEIGHT="2" BORDER="0" ALT=""></P>
si situas el cursor encima de la barrita vers como ahora no aparece ningn bocadillo.
* HSPACE="valor" / VSPACE="valor": que van a establecer el espacio horizontal y el espacio vertical que va a
haber entre la imagen y el texto que la rodea. El parmetro valor es un nmero que representa la medida del atributo
en pixels. Ejemplos:
<IMG SRC= "images/bandera.jpg" WHIDTH= "55" HEIGHT="37" ALIGN= "left" HSPACE="40">imagen entre
texto y alineacin...
imagen entre texto y con alineacin imagen entre texto y con alineacin imagen entre texto y
con alineacin imagen entre texto y con alineacin imagen entre texto y con alineacin
imagen entre texto y con alineacin
<IMG SRC= "images/bandera.jpg" WHIDTH= "55" HEIGHT="37" ALIGN= "left"
VSPACE="10">imagen entre texto y alineacin...
imagen entre texto y con alineacin imagen entre texto y con alineacin imagen entre texto y con
alineacin imagen entre texto y con alineacin imagen entre texto y con alineacin imagen entre texto y
con alineacin
* ALT="texto_alternativo": que establece un texto alternativo a la imagen, que debe describir el contenido de la
misma o el fin de ella en nuestra pgina.
Este atributo es de uso obligado en HTML 4.0 segn los estndares del W3C, y su misin es facilitar la accesibilidad
de la pgina a aquellas personas que o bien han desabilitado en su navegador la opcin de presentar imgenes (por
ejemplo, por tener una conexin a Internet de banda estrecha o por querer agilizar la carga de las pginas), o bien
* TITLE="texto_descriptivo": que establece un texto descriptivo de la imagen, que aparece en Nestcape 6x

cuando situamos el cursor sobre la imagen. Esto ocurre as, en vez de con ALT, porque se estn buscando
actualmente unos estndares en los usos de la etiquetas, y en muchas de ellas la misin de mostrar el bocadillo
explicativo corresponde al atributo TITLE (en los enlaces mediante <A>, por ejemplo), por lo que Nestcape 6x ha
adoptado este estndar, anulando as el efecto del atributo ALT. As pus, este muestra el texto que aparece en el
espacio que corresponde a la imagen en caso de que esta no aparezca o mientras se carga, mientras que TITLE se
encarga de mostrar un texto descriptivo de la imagen al situar el cursor sobre ella.
* LOWSRC="ruta_imagen": que permite establecer una imagen sustituta de la principal, normalmente una
versin reducida de ella, y que se carga en primer lugar. El parmetro ruta_imagen especifica la URI de la misma,
bien sea como ruta local relativa o como ruta absoluta.
Este atributo se usa cuando debemos mostrar en pantalla una imagen de mucho peso en Ks, y que por lo tanto
tardar mucho en cargarse en pantalla. Mediante SRC establecemos la ruta de la imagen completa, y con LOWSRC
establecemos la ruta de una imagen alternativa, copia de la principal pero con menos resolucin (y por lo tanto,
menos peso). Con ello, el navegador cargar primero la imagen de baja resolucin indicada en LOWSRC, y cuando
se acabe de cargar la imagen principal, la presentar en pantalla, en lugar de la inicial. Lgicamente, este efecto slo
se notar si la imagen inicial es de mucho peso en comparacin con su equivalente de baja resolucin o si la
conexin que tenemos es de banda estrecha. Ejemplo:
<IMG SRC="images/chica.jpg" LOWSRC="images/chica_2.jpg" WIDTH="512" HEIGHT="384" BORDER="0"
ALT="chica">
53
* NAME="nombre_identificador": que permite asignar un nombre identificador nico a la imagen, para luego
poder acceder a sus propiedades mediante lenguajes de script. No es el objetivo de este manual entrar en estos temas,
por lo que para ms informacin podis consultar el tema correspondiente dentro de la seccin JavaScript. Slo decir
aqu que de esta forma se consigue, por ejemplo, crear el efecto de rollover, por el cual se cambia la imagen cuando
se pasa el cursor sobre ella.
* USEMAP="nombre_mapa" : que permite utilizar una definicin de mapa de imgenes en el lado cliente. La
estudiaremos ms adelante con ms detalle.
*ISMAP: que permite usar la imagen como un mapa de imgenes en el lado servidor.
Exiten adems una serie de atributos que son soportados slamente por algn o algunos navegadores en particular,
por lo que no se recomienda su uso, al no conseguir con ellos la compatibilidad total. Entre ellos destacan:
* SUPRESS: que impide la visualizacin de la imagen mientras esta se descarga, anulando adems el bocadillo de
texto que aparece como consecuencia del atributo ALT. Slo es soportada por Nestacape Navigator.
* DYNSRC="ruta_fichero": que permite introducir una secuencia de video o un fichero de realidad virtual
(formato VRML). Si se usa, se complementa con otro atributo, LOOP, que indica cuntas veces debe repetirse la
visualizacin del video o fichero VRML. Slo es soportada por Internet Explorer.
* CLASS="nombre_clase": que permite asignar estilos CSS a una imagen mediante la asignacin de una clase, con
lo que podemos, por ejemplo, posicionar esta en pantalla. Slo es admitida por Internet Explorer y por Nestcape 6x.
Estudiaremos los estilos en imgenes ms adelante.
* ID="nombre_identificador": que permite asignar a una imagen un identificador nico, con el que podemos
asignarle un estilo determinado. La estudiaremos ms adelante
USOS DE UN GIF TRANSPARENTE.Vista la forma general de proceder con las imgenes en nuestras pginas, vamos ahora a ver algunas aplicaciones
ms especficas.
Cuando diseamos una tabla en para nuestra pgina, muchas veces deseamos que alguna de las celdas de la misma
no tenga contenido visibe en pantalla. Esto puede ocurrir en el cado de celdas sin datos o en el de columnas de
separacin de mrgenes, por ejemplo. Pero si dejamos la celda vaca, smplemente escribiendo <TD
WIDTH="10"></TD>, lo ms normal es que esta anchura que hemos especificado no sa respetada por el
navegador, y si la tabla tiene asignado un color de fondo Nestcape Navigator adems no pintar dicho color a esa
celda, pintando slo un rectngulo blanco.
Esto se puede evitar de dos maneras: introduciendo un espacio en la celda ( ) o introduciendo en ella un gif
transparente de 1x1 pixel. este ltimo mtodo es el ms usado y el mejor. Observemos el siguiente cdigo HTML
que define una tabla, en la que hemos establecido un margen lateral izquierdo de 15 pixels:
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#669933" align="center">
<tr>
<td rowspan="3" width="15"> <img src="images/bs.gif" width="1" height="1" alt="" border="0"></td>
<td>celda 1</td>
</tr>
<tr>
<td>celda 2</td>
</tr>
<tr>
<td>celda 3</td>
</tr>
</table>
Y mira el resultado del mismo, en el que se aprecia clramente que el margen lateral tiene exactamente la anchura
deseada:
celda 1
celda 2
celda 3
Si no hubisemos introducido el gif transparente en la celda lateral el resultado hubiera sido imprevisible,
dependiendo de la constitucin total de la tabla. A veces Nestcape Navigator no coge tampoco bien este efecto, y no
asigna al margen el tamao adecuado. Esto se soluciona asignando un ancho igual tanto a la celda como al gif
transparente:
<td rowspan="3" width="15"><img src="images/bs.gif" width="15" height="1" alt="" border="0"></td>
Este mismo esquema general se sigue si lo que deseamos es una tabla con mrgenes laterales y superiores, es decir,
una tabla enmarcada. Si esta contiene una sla celda es ms facil obtener este efecto mediante el atributo
CELLSPACING de la etiqueta TABLE, pero si la tabla contiene muchas celdas el resultado no ser el deseado, ya
que entonces no podremos controlar el espaciado entre celdas, y adems la tabla no presentara un color de fondo
contnuo. El siguiente cdigo consigue ste efecto usando un gif transparente:
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#339933">
<tr>
<td rowspan="4" width="15"><IMG height=1 alt="" src="images/bs.gif" width=1 border=0></td>
<td colspan="2" height="15"><IMG height=1 alt="" src="images/bs.gif" width=1 border=0></td>
<td rowspan="4" width="15"><IMG height=1 alt="" src="images/bs.gif" width=1 border=0></td>
</tr>
<tr align="center">
<td width="100">celda 1,1</td>
</tr>
<tr align="center">
<td>celda 2,1</td>
<td>celda 2,2</td>
</tr>
<tr>
<td colspan="2" height="15"><IMG height=1 alt="" src="images/bs.gif" width=1 border=0></td>
</tr>
</table>
cuyo resultado es:
celda 1,1
celda 2,1
celda 1,2
celda 2,2
Vamos ahora a ver cmo podemos usar nuestro gif transparente para crear una tabla con un borde exterior de color.
El mtodo es totalmente anlogo al anterior, pero ahora establecemos unos mrgenes de 1 pixel y un color de fondo
para estos diferente del de la tabla. Mira el cdigo:
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffff66">
<tr>
<td rowspan="4" width="1" bgcolor="red"><IMG height=1 alt="" src="images/bs.gif" width=1
border=0></td>
<td colspan="2" height="1" bgcolor="red"><IMG height=1 alt="" src="images/bs.gif" width=1
border=0></td>
<td rowspan="4" width="1" bgcolor="red"><IMG height=1 alt="" src="images/bs.gif" width=1
border=0></td>
</tr>
<tr align="center">
</tr>
<tr align="center">
<td>celda 2,1</td>
<td>celda 2,2</td>
54
</tr>
<tr>
<td colspan="2" height="1" bgcolor="red"><IMG height=1 alt="" src="images/bs.gif" width=1
border=0></td>
</tr>
</table>
y mira el resultado:
celda 1,1
celda 2,1
celda 1,2
celda 2,2
Mapas de imgenes en el cliente.Para acabar el tema de las imgenes, vamos a estudiar qu son y cmo se construyen mapas de imgenes en HTML.
Un mapa de imagen es una imagen que tiene la propiedad de estar dividida en diferentes partes o sectores, de forma
que cada una de ellas funciona como un enlace estndar HTML.
Los mapas de imgenes pueden ser mapas del lado cliente, en los que el cdigo necesario para la definicin de las
diferentes partes de la imagen se encuentra en la propia pgina que contiene el mapa, y que por lo tanto se ejecuta en
el navegador cliente, y mapas del lado servidor, en los que ste cdigo se encuentra en una escritura de script en un
fichero del servidor web.
Sin duda alguna los ms empleados son los del lado cliente, que son los que vamos a estudiar aqu, ya que los del
lado servidor precisan para su implementacin permisos especiales en el servidor web, permisos que son difciles de
obtener.
Un mapa de imagen en el lado cliente precisa para su implementacin en una pgina web de dos partes. Por un lado
necesitamos definir el mapa en s, para lo cual se usa la etiqueta siguiente:
<MAP NAME="nombre_mapa">
<AREA SHAPE="rect / circle / poly / default" COORDS="x1,y1,x2,y2,......." HREF="enlace1.html">
<AREA SHAPE="rect / circle / poly / default" COORDS="x1,y1,x2,y2,......." HREF="enlace2.html">
....
<AREA SHAPE="rect / circle / poly / default" COORDS="x1,y1,x2,y2,......." HREF="enlaceN.html">
</MAP>
en donde:
1) nombre_mapa es un nombre identificador nico que damos a cada
mapa.
2) SHAPE establece la forma que va a tener cada rea de enlace
(rectngular, circular, poligonal o por defecto).
3) COORDS define las coordenadas de los sucesivos puntos que
forman la forma establecida en SHAPE. As, si elegimos una forma
rectngular deberemos dar las coordenadas de los vrtices superior
izquierdo e inferior derecho del rectngulo, si es una forma circular
daremos las coordenadas del centro del crculo y la longitud del
radio, y si es una forma poligonal deberemos especificar las
coordenadas de los sucesivos puntos que forman el polgono.
4) HREF asigna el enlace al que lleva cada una de las reas definidas
en el mapa.
Una vez definido el mapa deberemos asignarlo a la imagen en
concreto a la que debe mapear, lo que conseguimos mediante el
atributo USEMAP de la etiqueta IMAGE:
<IMG
SRC="ruta"
WIDTH="anchura"
HEIGHT="altura"
BORDER="0" ALT="texto" USEMAP="#nombre_mapa">
Nota la almoadilla (#) delante del nombre del mapa en USEMAP. Si
no la pones, el mapa no funciona.
Sea, por ejemplo, la siguiente imagen, en la que deseamos establecer dos reas activas, representadas por los
rectngulos blancos, y en la que mediante un programa cualquiera de diseo grfico (Paint Shop Pro en este caso)
hemos obtenido las coodenadas correspondientes a sus vertices definitorios.
La etiqueta MAP nos quedara:

<map name="cuadro">
<area shape="rect" coords="29,68,83,120" href="javascript:alert('primer enlace');" title="primer enlace">
<area shape="rect" coords="85,34,144,87" href="javascript:alert('segundo enlace');" title="segundo enlace">
</map>
<img src="images/mapa.jpg" width="176" height="250" border="0" alt="ejemplo de mapa de imagen" usemap=
"#cuadro">
Donde como enlaces hemos puesto una llamada a un mtodo alert de JavaScript, que nos sacar una ventana flotante
con un mensaje determinado. Para que el enlace sa a una pgina en concreto, basta sustituir esta llamada por la ruta
de la pgina a la que queremos enlazar. El resultado del cdigo anterior es el siguiente:
Observa cmo al situar el cursor encima de cada una de las reas definidas este pasa a ser una mano, como ocurre en
cualquier enlace estndar, y que como hemos aadido a cada uno el atributo title, en Internet Explorer y en Nestcape
Navigator 6x aparecer un bocadillo flotante con un texto explicatorio de cada enlace en concreto.
LAS ETIQUETAS OLVIDADAS

El problema de los caracteres y los idiomas.Existen una serie de juegos de caracteres diferentes, que puedan cubrir la totalidad de los idiomas comnmente
usados en Internet. Los ms empleados estn formados por un conjunto de caracteres comunes a todos ellos, los 128
primeros de la lista ( la famosa tabla de caracteres ASCII 160)(ASCII: American Standard Coding for the
Interchange of Information), que incluyen todos los caracteres alfabticos y numricos comunes, junto con la
mayora de los smbolos presentes en los teclados estndar, y los dems hasta el 256 son propios de un idioma
determinado.
La etiqueta META HTT-EQUIV="Content-Type".Como podis comprender, trabajar en este entorno limita sobremanera las posibilidades del diseador web. Si quiere
que su pgina sea vista por todos los posibles visitantes del mundo debe pasar a referencias todos aquellos caracteres
y smbolos que no pertenezcan al conjunto ASCII, para buscar la compatibilidad total. Pero y si su idioma posee
letras que no tienen una referencia de caracter?. Y qu pasa con las idiomas orientales, el chino, por ejemplo?.
Afortunadamente los navegadores web actuales ofrecen una solucin para estos casos, ya que son capaces de
mostrar un mismo documento usando diferentes juegos de caracteres. Podemos configurar nuestro navegador para
que use un conjunto determinado de ellos; para ello basta ir al men ver > codificacin y elegir all el conjunto
deseado. Pero adems, es posible usar una etiqueta estndar HTML para decirle al navegador qu conjunto de
caracteres debe usar para presentar nuestras pginas. Esta etiqueta es el
META HTT-EQUIV="Content-Type". Su sintaxis general es:
<META HTTP-EQUIV= "Content-Type"CONTENT="text/html;charset=juego_caracteres_a_usar">
El atributo CHARSET va a fijar el conjunto de caracteres de la pgina, de tal forma que cuando un usuario pida esta
al servidor web lo primero que va a recibir su navegador va a ser un cabecero HTTP con esta etiqueta META, con lo
que este pedir al sistema operativo que cargue dichos caracteres, para poder as presentar la pgina adecuadamente.
Si el usuario no tiene instalado en su sistema dicho conjunto de caracteres, el navegador presentar una ventana de
aviso, informando que para ver corrctamente la pgina es necesario descargarlo de Internet, y proceder
automticamente a sus descarga e instalacin, salvo que el usuario no desee que se realice dicha operacin y la anule
manualmente.
Una vez descargado el paquete, la pgina ser presentada adecuadamente, de acuerdo a como el diseador la
construy.
Si, por ejemplo escribimos una pgina en chino, deberemos establecer la etiqueta META:
<META HTTP-EQUIV= "Content-Type"CONTENT="text/html;charset= chinese">
Esta etiqueta es pus muy til, al darnos la flexibilidad de trabajo necesaria, pero hay que tener en cuenta que hay
navegadores web que no admiten esta etiqueta META, aunque s los ms usados y actuales.
55
Para las pginas en castellano, cataln o vasco deberemos usar el conjunto de caracteres ISO 8859-1, tambin
denominado Latin1, que comprende las letras acentuadas (, `, etc) y la letra , tanto en maysculas como en
minsculas, y entonces la etiqueta META adecuada sera:
<META HTTP-EQUIV= "Content-Type"CONTENT="text/html;charset= ISO-8859-1">
Esta etiqueta se debe situar en la cabeza de la pgina, preferiblemente entre <HEAD> y <TITLE> para que de
entrada, si el ttulo de la pgina contiene caracteres no ASCII, se muestre correctamente. Ejemplo:
<HEAD>
<META HTTP-EQUIV= "Content-Type"CONTENT="text/html;charset=ISO-8859-1">
<TITLE>pgina de programacin espaola</TITLE>
...
...
El estndar ISO 8859.Segn hemos visto disponemos de una etiqueta HTML estndar para la definicin del conjunto de caracteres que
debe emplear el navegador para presentar nuestra pgina. Vamos ahora a ver de cuntos conjuntos de caracteres
disponemos.
Para nuestras necesidades primarias disponemos del estndar ISO 8859, formado por diferentes paquetes de
caracteres que nos van a permitir trabajar con las lenguas ms comunes. Este estndar fu definido por la Asociacin
de Fabricantes Europeos de Computadoras (ECMA) en 1980, y aprobado posteriormante pos la Organizacin
Internacional de Normas (ISO), y es el que se debe usar en el lenguaje HTML.
Las principales familias de caracteres pertenecientes al ISO 8859 son:
* ISO-8859-1 (Latin1): cubre las lenguas de Europa del Oeste, incluyendo francs, espaol, cataln, vasco,
portugus, italiano, albans, holands, alemn, ingls, sueco, noruego y otras ms. Esta familia es la base actual del
juego de caracteres de HTML.
Existe una versin particular de esta familia creada por Microsoft para sus sistemas Windows, que adems de los
caracteres anteriores contiene el smbolo del Euro, y que es denominada Windows-1252.
* ISO-8859-2 (Latin2): cubre las lenguas de Europa Central y Occidental, como checo, polaco, rumano, crota y
esloveno.
* ISO-8859-3 (Latin3): usado para escribir en esperanto y malts.
* ISO-8859-4 (Latin4): que cubre el estonio, el letn, lituano y lapn.
* ISO-8859-5 (alfabeto cirlico): que contiene las letras cirlicas, con las que se pueden escribir en blgaro,
bielorruso, macedonio, ruso, servio y ucraniano.
* ISO-8859-6 (alfabeto rabe): que comprende las letras bsicas de la lengua rabe, aunque no incluye las
extensiones necesarias para el persa ni el paquistan. Aunque contiene las bases de del rabe, hay que tener en cuenta
que las letras de esta lengua pueden tener hasta cuatro formas de representacin diferente, por lo que para su correcta
presentacin en una pgina hace falta a menudo un programa independiente que analice el contexto en el que se
encuentran las letras y le de la intrepretacin adecuada.
* ISO-8859-7 (griego): que cubre todas las letras de la lengua griega.
* ISO-8859-8 (hebreo): que abarca los caracteres necesarios para escribir en hebreo y Ydish.
* ISO-8859-9 (Latin5): que ampla los conjuntos de caracteres latinos anteriores, aadiendo las letras que faltaban
para poder escribir completamente en turco y en islands.
* ISO-8859-10 (Latin6): que completa al anterior Latin4, aadiendo los smbolos que faltaban para poder escribir
en letn, el esquimal, el lapn y las dems lenguas nrdicas.
Juegos de caracteres anteriores.A menudo nos encontramos en las etiquetas HTML una declaracin del juego de caracteres usado del tipo EN, por
ejemplo, que designa a la lengua inglesa, o incluso en-us, que corresponde a la variante norteamericana de la lengua
inglesa. Este tipo de declaraciones del juego de caracteres usado corresponde a las especificaciones ISO-639-1 e
ISO-639-2, anteriores a la ISO-8559.
Slo comentar de ella que todava se puede usar con toda normalidad, y que las siglas correspondientes a la lengua
espaola son es, por lo que para definir el conjunto de caracteres para una pgina en castellano habra que escribir la
etiqueta:
<META HTTP-EQUIV= "Content-Type"CONTENT="text/html;charset=es">
o
<META HTTP-EQUIV= "Content-Type"CONTENT="text/html;charset=spa">
Si deseis ver la tabla completa de siglas para las diferentes lenguas en esta especificacin, podis hacerlo en
http://lcweb.loc.gov/standards/iso639-2/
Juegos de caracteres avanzados: UCS y UNICODE.Al igual que se pas del estndar ASCII al ISO-8559 buscando la posibilidad de escribir y transferir documentos por
Internet en ms lenguas, el estndar ISO-8559 se ha mostrado con el tiempo insuficiente para atender todas las
peticiones que llegan desde diversas partes del mundo. Adems, la divisin de este estndar en diferentes juegos de
caracteres crea una confusin sobre cual de ellos es el correcto para cada lengua.
Por todo esto surgi la necesidad de establecer un nuevo conjunto de caracteres estndar que simplificara las cosas y
que comprendiera todos los caracteres universales.
Para cubrir esta necesidad se han creado dos nuevos juegos de caracteres, ms completos y unificados: el UCS
(Juego Universal de Caracteres), que es en realidad el ISO-10646, evolucin del estndar ISO-8859, y el
UNICODE, que actualmente tiene como versin estable la 2.1, aunque ya se est trabajando en las versiones 3.0 (de
prxima implementacin) y 4.0, que es la que se pretende que se haga el estndar para la transmisin de textos en
Internet.
Estos juego de caracteres a veces se confunden entre s, y aunque son diferentes en origen, son iguales en la prctica,
ya que actualmente comprenden los mismos caracteres e igual implementacin.
Ambos estndares se basan en asignar un nmero hexadecimal a cada caracter significativo de las principales
lenguas mundiales, buscando un acuerdo universal para las comunicaciones en Internet. Este nmero es nico para
cada caracter, y permite representar a este por medio de una sintaxis del tipo U+abcd, es decir, el prefijo U seguido
del signo + y del nmero hexadecimal asignado al caracter.
Adems de este nmero nico, tambin se establece un nombre representativo del caracter, dado en el idioma ingls
oficial.
Al igual que el ASCII, el estndar UNICODE distingue maysculas de minsculas, pero a diferencia de este
distingue caracteres por la escritura, no por la lengua, por lo que un mismo cdigo puede ser usado por dos idiomas,
adoptando en cada uno la apariencia necesaria. Esto hace necesario especificar en la pgina qu lengua en concreto
de debe representar, lo que se puede conseguir, por ejemplo, mediante la Meta etiqueta:
<META HTTP-EQUIV="Content-Language" CONTENT="idioma-variante">
UNICODE 2.0 permite escribir en rabe, armenio, bengal, en alfabeto cirlico, georgiano, hebreo, latino, tibetano y
algunas lenguas ms de menos uso.
Para cualquier consulta respecto a los conjuntos UNICODE consultar la pgina web de la propia organizacin,
http://www.unicode.org/
ventana con el juego de caracteres UNICODE
La etiqueta DOCTYPE.Cambiamos de tercio, y vamos a pasar al estudio de otra de las etiquetas ms desconocidas, la etiqueta DOCTYPE.
Cuando diseis una pgina web usando un editor como HomeSite, por ejemplo, habris visto que siempre este
programa agrega al inicio del documento HTML una instruccin del tipo:
pero seguro que muchos de vosotros no sabis qu significa ni para qu sirve.
De acuerdo con el estndar HTML 4.0 es necesario realizar una declaracin de tipo de documento al principio de
cada pgina, especificando en l de qu tipo de cocumento en concreto se trata.
Y qu es eso del tipo de documento?
Para comprender esto necesitamos antes conocer por encima qu es SGML (Standard Generalized Markup
Language). Es sta una metodologa de edicin de documentos, en la que se produce una separacin entre el
contenido de los mismos y su formato de presentacin (algo as como lo que se consigue con las Hojas de Estilos en
Cascadas en HTML), consiguiendo establecer esta por medio de un conjunto definido de etiquetas (tags). SGML es,
en lneas generales, un metalenguaje que permite el diseo y control de un conjunto de etiquetas y de una sintaxis de
construccin, permitiendo su adaptacin a las necesidades del usuario o de la aplicacin que las necesite. Digamos
que es como un creador de lenguajes de etiquetas, o un modelo de comportamiento general de cmo deben ser este
tipo de lenguajes, que fu creado con el objetivo de permitir el intercambio de informacin entre distintas
plataformas, soportes fsicos y sistemas de presentacin. Hijos del metalenguaje SGML son el HTML y el XML,
entre otros.
56
La adaptacin del SGMGL a unas necesidades de uso concretas es lo que se conoce con el nombre de DTD,
Declaracin de Tipo de Documento. Mediante un DTD se definen con precisin aquellos elementos necesarios para
la elaboracin concreta de un documento o grupo de ellos estructurados de manera similar. Dentro de las mltiples
posibilidades del SGML, el HTML es una adaptacin de ste al lenguaje de etiquetas necesario para crear pginas
web, adaptacin que queda definida mediante las definiciones de tipo de documento necesarias, por lo que podemos
decir que el HTML es un DTD concreto dentro del conjunto de DTDs posibles en SGML. lioso?. Ms claro, HTML
es un subconjunto de SGML, una aplicacin concreta de ste, y los DTDs de HTML definen excatamente qu se
permite dentro del documento que forma una pgina y qu no.
Y qu se consigue con todo esto? os pregunatris. Pus bien, definir que estamos creando una pgina web de
acuerdo con los estndares del lenguaje HTML, consiguiendo con ello que no slo los navegadores, si no tambin
las aplicaciones que estos puedan necesitar para visualizar nuestra pgina, sepan de forma clara cmo tienen que
tratarla, consiguiendo as la mxima compatibilidad y accesibilidad.
En HTML es posible establecer tres tipos diferentes de documento:
1) HTML 4.0 Strict: o tipo de documento HTML 4.0 estricto, en el que prima la estructura del mismo sobre su
presentacin, es decir, que el documento debe tener estar conformado de acuerdo con las reglas del estndar HTML
4.0 de una forma estricta, sin desviarse de l en lo ms mnimo.
Por ello, no se permite en el documento la presencia de elementos o atributos desaprobados por el estndar HTML
4.0 (etiquetas IMG sin el atributo ALT, definiciones de mrgenes del BODY mediante atributos TOPMARGIN,etc.),
y para lograr esto hace falta la declaracin de estilos mediante Hojas de Estilos en Cascada (CSS) y una perfecta
definicin de todos los atributos establecidos como necesarios para cada etiqueta. Como ventaja presenta el que con
un documento de esta forma tenemos garantizada la accesibilidad y compatibilidad de nuestra pgina, y como
defectos el que navegadores antiguos no lo soportan y que la construccin del documento no es flexible en absoluto
(no se admiten errores en el cdigo).
La declaracin de este tipo de documentos se consigue mediante la etiqueta:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.O//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
Tambin es posible precindir en la etiqueta anterior de la ltima parte, en la que se da la URI del documento DTD,
con lo que queda:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.O//EN">
2) HTML 4. Transitional: o tipo de documento HTML 4.0 transicional, es decir, que adems de incluir los
elementos y atributos del HTML 4.0 estricto aade elementos de presentacin y elementos desaprobados por el
Consorcio para este estndar. Con l damos apoyo a navegadores que soportan mal las Hojas de Estilos en Cascadas
(CSS) y disponemos de ms flexibilidad a la hora de escribir el cdigo de nuestra pgina, a costa de no entrar de
lleno en el estndar y de perder un poco de accesibilidad.
La etiqueta para establecer este tipo de documento es:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.O Transitional//EN" "http://www.w3.org/TR/REChtml40/loose.dtd">
donde es posible tambin usar la etiqueta abreviada:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.O Transitional//EN">
sin especificar la URI del documento de definicin del Consorcio.
3) HTML 4.0 Frameset: que es una variacin del HTML 4.0 Transitional para aquellos documentos que emplen
frames. En estos documentos el elemento FRAMESET sustituye al BODY.
La declaracin de este tipo se realiza mediante la etiqueta:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.O Frameset//EN" "http://www.w3.org/TR/REChtml40/frameset.dtd">
cuya versin corta es:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.O Frameset//EN">
Es todas esta etiquetas se utilizan las dobles barras (//) como elementos separadores de las palabras claves de la
declaracin, la palabra PUBLIC hace referncia al tipo de disponibilidad del documento (en nuestro caso pblico, por
lo que est a disposicin de toda la WWW), el signo - indica que las organizacin W3C, que es la que ha establecido
el DTD, no es ISO certificada, y las letras EN indican que el sistema de caracteres en el que est escrito el DTD es el
correspondiente a la lengua inglesa.
SONIDO EN HTML
Caractersticas del sonido digital.-
Vamos a estudiar algunos de los conceptos bsicos del sonido digital, aunque sin entrar en demasiadas
consideraciones tcnicas. Para aquellos que deseen ms informacin, existen multitud de sitios web que estudian
especficamente el sonido digital y el hardware necesario para su captura y reproduccin.
El sonido tiene una naturaleza ondulante, es decir, se propaga en forma de ondas analgicas desde el objeto que lo
produce. Las caractersticas propias de cualquier sonido (desde el producido por un automvil hasta una bella
cancin), sus diferentes tonos y notas dependen precisamente de las propiedades fsicas de las ondas que lo forman.
Para poder viajar desde el emisor al receptor, las ondas de sonido precisan de un medio fsico de soporte, ya sea el
aire de la atmsfera, al agua, etc. Tanto es as que en el espacio exterior, donde no hay medio fsico soporte, no se
pueden transmitir sonidos.
Si representamos en un grfico un sonido complejo, obtendremos la siguiente figura:
En la que podemos apreciar los diferentes valores de onda que va tomando el sonido.
Todos sabemos que los equipos informticos no trabajan con datos analgicos, sino que lo hacen con datos digitales,
formados por estados binarios. Por lo tanto, para representar un sonido, desde el punto de vista informtico, es
preciso capturarlo en una naturaleza binaria, para lo que se hace un muestreo del mismo, tomando determinados
valores de las ondas y representando dichos valores en formato digital. En cada captura obtendremos un punto de la
grfica anterior.
Pero, Cuntas muestras deberemos tomar?. Este es el verdadero meollo de la cuestin, ya que cuantas ms muestras
tomemos, ms fiel ser el sonido capturado respecto al original, con lo que tendr ms calidad.
Para medir el nmero de capturas utilizamos la frecuencia del muestreo. Como un Herzio es un ciclo por segundo, la
frecuencia de una captura en Herzios representa el nmero de capturas que realizamos en un segundo. As, una
frecuencia de muestreo de 20 KHz (20 Kilo Herzios = 20000 Herzios) realizar 20000 capturas de puntos cada
segundo.
El odo humano es captar de captar la asombrosa cantidad de 44000 sonidos por segundo, es decir, 44 KHz. Por lo
tanto, para que un sonido digital tenga suficiente calidad deber estar basado en una frecuencia similar a sta. En
general, el valor estndar de captura de sonidos de calidad es de 44,1 Khz (calidad CD), aunque hay capturadoras de
sonido profesionales que llegan hasta los 100 Khz, con objeto de obtener un mayor nmero de puntos sobre la
muestra, consiguiendo una calidad mxima.
Otro concepto del que habris odo hablar en torno al sonido digital es el nmero de bits de una tarjeta de sonido. El
origen de esta magnitud es que, a la hora de capturar el sonido, no slo es importante el nmero de muestreos
tomados, sino tambin la cantidad de informacin capturada en cada uno de esos muestreos.
Una vez capturado el sonido, para su posterior reproduccin en un equipo informtico es necesario mandar una serie
de impulsos o posiciones a los altavoces para que creen el sonido a partir de ellos. Cmo?. Bien, produciendo a
partir de esas posiciones movimientos de las membranas de los altavoces, movimientos que transforman de nuevo el
sonido digital en analgico, estado en el que es capaz de viajar por el aire y producir los estmulos necesarios en
nuestros tmpanos, con lo que somos capaces de percibir el sonido original. Cuantas ms posiciones de
informacin se enven a los altavoces, mejor calidad tendr el sonido reproducido.
57
Con estas bases, se define el nmero de bits de un sonido digital como el nmero de impulsos de informacin
(posiciones) que se envan a los altavoces para su transformacin en ondas analgicas.
Las tarjetas de sonido actuales trabajan normalmente con 8 bits de informacin, con los que se pueden obtener
28=256 posiciones (ceros y unos binarios), aunque hay algunas de mayor calidad que son capaces de trabajar con
capturas de 16 bits, que originan 216 = 65536 posiciones de informacin.
Como dato de referencia, los CDs actuales estn basados en sonido grabado a 44 Khz y con un tamao de muestra
de 16 bits. Estas medidas se conocen con el nombre de sonido de calidad CD.
Por ltimo, una vez que el sonido digital llega a nuestros odos, impactan contra los tmpanos, verdaderas
membranas especializadas que vuelven a transformar las ondas analgicas en impulsos elctricos, que viajan hasta
nuestro cerebro, donde son interpretados y producen las sensaciones auditivas que todos conocemos.
Una excepcin al sonido anteriormente descrito, que podemos denominar "de datos de sonido", es el sonido
sintetizado, en el que no se realiza ninguna captura de ondas sonoras reales, sino que es sonido totalmente digital,
generado directamente en el equipo informtico por en reproductor digital conocido con el nombre de MIDI (Music
Instrument Digital Interface). Cuando se desea reproducir una nota musical concreta, se enva un comando MIDI al
chip sintetizador, que se encarga de traducir ese comando en una vibracin especial que produce la nota. Mediante
este sistema es posible crear melodas bastante aceptables, aunque nunca tendrn la calidad ni riqueza de una onda
sonora natural capturada.
En busca de la compatibilidad, si usamos Windows como sistema operativo conviene usar para ficheros musicales a
reproducir directamente en el navegador los formatos WAV y MIDI, que son los ms compatibles.
En cambio, si lo que deseamos es poder brindar a nuestros visitantes la opcin de navegar con msica ejecutable
desde un programa externo, lo mejor es usar ficheros en formato MP3, ya que en la actualidad la mayora de los
navegantes tienen instalado en su equipo algn programa reproductor adecuado, pudiendo valer desde software
incluido en Windows, como Windows Media Player, hasta aplicaciones esternas, como Winamp. En este caso, bsata
colocar un enlace normal en nuestras pginas, apuntando al fichero de sonido.
Como ejemplo, si queremos enlazar en nuestra pgina un fichero MP3, bastara con escribir:
<a href="sonidos/mp3.mp3" target="_blank">Pincha aqu para oir mi msica.</a>
Formatos de sonido.A la hora de incluir ficheros de sonido en nuestras pginas web debemos distinguir entre los que pueden ser
directamente ejecutados por el navegador y aquellos que deben ser abiertos por un programa propio, que deber
tener el usuario instalado en su equipo para poder reproducir el fichero.
De forma general, podemos incluir en la web los siguietes tipos de ficheros de audio.
* WAV (Wave form Audio File format): formato tpico de la casa Windows, de elevada calidad, usado en las
grabaciones de CDs, que trabaja a 44 Khz y a 16 bits. Consta bsicamente de tres bloques: el de identificacin, el
que especifica los parmetros del formato y el que contiene las muestras. Su principal inconveniente es el elevado
peso de los ficheros, por lo que su uso queda limitado en Internet a la reproduccin de ruidos o frases cortas. La
extensin de estos ficheros es .wav. Es soportado por Internet Explorer y Netscape 4x.
* AU (Audio File format): formato creado por la casa Apple para plataformas MAC, cuyos ficheros se guardan con
la extensin .au
* MIDI:formato de tabla de ondas, que no guardan el sonido a reproducir, sino un cdigo que nuestra tarjeta de
sonido tendr que interpretar. Por ello, este tipo de ficheros no puede almacenar sonidos reales, como voces o msica
rela grabada; slo puede contener sonidos almacenables en tablas de ondas. Como contarpartida, los ficheros MIDI,
que se guardan con extensin .mid, son de pequeo tamao, lo que los hace idneos para la web. Es soportado por
Internet Explorer y Netscape 4x.
* MP3 (MPEG 1 Layer 3): desarrollado por el MPEG (Moving Picture Expert Group), obtiene una alta compresin
del sonido y una muy buena calidad basndose en la eliminacin de los componentes del sonido que no estn entre
20 hz y 16 Kh (los que puede oir el ser humano normal). Tiene en cuenta el sonido envolvente (surround) y la
extensin multilinge, y guarda los ficheros con la extensin .mp3, y permite configurar el nivel de compresin,
consiguindose calidades similares a las del formato WAVE pero con hasta 10 veces menos tamao de fichero. Es
soportado directamente slo por Internet Explorer 5.5 y superiores.
* MOD: especie de mezcla entre el formato MIDI y el formato WAV, ya que por un lado almacena el sonido en
forma de instrucciones para la tarjeta de sonido, pero por otro puede almacenar tambin sonidos de dintrumentos
musicales digitalizados, pudiendo ser interpretados por cualquier tarjeta de sonido de 8 bits. No es un formato
estndar de Windows, por lo que su uso es ms indicado para sistemas Mac, Amiga o Linux. La extensin de los
ficheros es .mod
* -Law Format: de calidad similar al formato WAV, es original de las mquinas NeXt, y guarda sus ficheros con la
extensin .au
* Real Audio: de calidad media, aunque permite ficheros muy comprimidos, que guarda con extensin .rmp o .ra.
Para su reproduccin hace falta tener instalado el plugin Real Audio.
A la hora de trabajar con estos formatos de sonido, deberemos tener en cuenta las limitaciones en su uso, ya que
muchos de ellos no pueden ser reproducidos ms que en sistemas operativos concretos, y an as, con plugins o
programas especficos.
INCLUIR SONIDOS EN LA WEB.Una vez elegidos nuestros ficheros de sonido, es hora de incluirlos en nuestra pgina web. Lgicamente, para que un
fichero de audio pueda ser reproducido por un navegador es necesario que su mquina tenga incluida una tarjeta de
sonido y un par de altavoces.
Existen diversas formas de incluir un fichero de audio en una pgina, formas que dependen del tipo de fichero y del
navegador usado, y podemos usar diferentes etiquetas para cada una de ellas.
BGSOUND
La etiqueta bgsound incorpora sonidos de fondo en una pgina web, sonidos que se ejecutan automticamente al
cargarse la pgina. Es una etiqueta propietaria de Microsoft, por lo que slo es interpretada por Internet Explorer,
admitiendo los formatos de audio MID y WAV, aunque generalmente tambin acepta AU y MP3, en versiones
actuales del nevagador o mediante plugins de uso general.
Su sintaxis general, con sus atributos ms importantes, es del tipo:
<bgsound src="ruta_fichero" loop="l" balance="b" volume="v"></bgsound>
Donde:
src="ruta_fichero" fija la ruta en la que se encuentra el fichero de audio a reproducir. La

ruta puede ser relativa a nuestro sistema de carpetas local, absoluta respecto el sistema de
carpetas del servidor web o una URL completa que localice el fichero en Internet.
loop="l" determina el nmero de veces (l) que se debe ejecutar el fichero de audio. Si le
damos el valor infinite, el fichero se reproducir indefinidamente.
balance="b" determina el balance del sonido entre los dos altavoces del equipo, es decir, la
potencia o intensidad con que se oir en cada uno de ellos (derecho e izquierdo). Sus valores
pueden estar entre -10,000 y +10,000, correspondiendo el valor 0 a un balance equilibrado
entre los dos altavoces.
volume="v" fija el volumen al que se oir el sonido, y sus valores pueden variar entre
-10,000 (mnimo) y 0 (mximo). No es soportado por los equipos MAC.
Ejemplo:
58
<bgsound src="../sonidos/wav.wav" balance=0 volume=0></bgsound>

La etiqueta bgsound admite muchas ms propiedades (disabled, delay, id, class, controls, etc.). Asmismo,
esta etiqueta es accesible en Internet Explorer mediante cdigo JavaScript, pudiendo modificar en tiempo real sus
propiedades balance, loop, src, y volume, aunque sta ltima slo es accesible en plataformas PC. Para una
informacin completa sobre todas las propiedades y funcionalidades de este etiqueta podis visitar la pgina
correspondiente de Microsoft:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/bgsound.asp
2. Atributos referentes a la consola:
EMBED
Nestcape Navigator implement la etiqueta embed para incorporar ficheros de audio. Es sta una etiqueta
de caracter general, que se usa para la inclusin en las pginas web de todos aquellos archivos ajenos al navegador y
que necesitan por lo tanto la ejecucin de algn plugin para su interpretacin.
Paradjicamente, Internet Explorer asumi despus el uso de esta etiqueta para la inclusin de ficheros de audio,
para llegar a interpretarla mejor y ampliarla con ms atributos y propiedades, de tal forma que la ejecucin de
sonidos con embed es actualmente ms cmoda con este navegador, al incorporar la suite de Microsoft sus propios
plugins para la interpretacin de los diferentes formatos de audio. En cambio, si usamos Netscape Navigator nos
encontraremos en muchos casos con un fallo en la reproduccin o con un engorroso mensaje de necesidad de algn
plugin especial (sobre todo en las versiones 6x), lo que nos obligar a visitar la pgina de Netscape para su descarga
e instalacin, que muchas veces no ser efectiva.
Sea como sea, hay que indicar que esta etiqueta nos va a incluir en la pgina web un objeto especial, una especie de
consola de mando, denominada Crescendo, que consta de tres botones, similares al de cualquier reproductor de
audio: un botn Play, para comenzar la reproduccin (si no est establecida a automtica), un botn Pause, para
detenerla momentneamente y un botn Stop, para detenerla definitivamente (puesta a cero). Esta consola es
diferente segn el navegador usado; en el caso de Internet Explorer se muestra la tpica consola de Windows Media,
cuyo tamao podemos configurar, mientras que en Netscape se muestra una consola propia, de tamao fijo definido.
La sintaxis general de la etiqueta embed es del tipo:
<embed atributo1="valor1" atributo2="valor2"...atributoN="valorN"></embed>
Y en el caso que nos ocupa, de la inclusin de ficheros de audio, los atributos podemos dividirlos en dos tipos:
1. Atributos referentes al sonido:
src="ruta_fichero", que fija la ruta en la que se encuentra el fichero de audio a reproducir.

La ruta puede ser relativa a nuestro sistema de carpetas local, absoluta respecto el sistema de
carpetas del servidor web o una URL completa que localice le fichero en Internet.
loop="l/true/false", que determina el nmero de veces que se debe ejecutar el fichero de
audio. Los valores admitidos son l (nmero entero de veces), true (infinitas veces) y false
(slo una vez). Slo es reconocida por Netscape Navigator.
playcount="n", que define el nmero de veces (n) que se debe ejecutar en fichero de audio
en el caso de Internet Explorer.
type="tipo_fichero", atributo importante, que declara el tipo de fichero de audio que
estamos usando, con lo que el navegador web puede ejecutar el programa o plugin adecuado
para la reproduccin del fichero. Puede ser audio/midi, audio/wav, etc.
autostart="true/false", que determina si el fichero de audio debe empezar a reproducirse
por s slo al cargarse la pgina o si por el contrario ser preciso la actuacin del usuario (o de
cdigo de script) para que comience la audicin.
pluginspage="URL", que establece, en caso de ser necesario un plugin especial para
reproducir el fichero, la pgina web donde se puede descragar el mismo. Slo se activa en el
caso de que el navegador no sea capaz de reproducir el fichero por s mismo, y es soportada
tan slo por Netscape Navigator.
name="nombre", que asigna un nombre identificador (debe ser nico en la pgina) a una
etiqueta embed determinada, con objeto de ser accedida luego por lenguajes de script.
volume="v", que determina el volumen de reproduccin del sonido, y que puede variar entre
0 y 100.
hidden="true/false", que establece si la consola va a ser visible (false) o no (true). Es ste

un aspecto polmico, ya que si ocultamos la consola obligamos al usuario a oir nuestro
fichero, sin posibilidad de detenerlo ni de modificar el volumen, y si la mostramos estaremos
incrustando en la pantalla un objeto que muchas veces nos romper el esquema de diseo de
nuestra pgina. Queda determinar su uso en cada caso concreto.
width="w", que determina el ancho visible de la consola, en pixels. height="h", que
determina el alto visible de la consola, en pixels. Estos atributos son tambin muy
importantes, caso de que hayamos establecido hidden= "false", ya que de su valor va a
depender la correcta visulazacin de la consola. En el caso de Internet Explorer, que muestra
un logo de Windows Media sobre los controles, el tamao mnimo aceptable debe ser de
140x100 pixels, ya que si no la consola saldr deformada en exceso o recortada. Y en el caso
de Netscape Navigator, deberemos asignar unos valores de 145x60 pixels, que es lo que
ocupa la consola; si ponemos un tamao menor, la consola ser recortada, perdiendo
funcionalidades, y si asignamos un tamao mayor, aparecern espacios grises alrededor de la
consola, afeando el aspecto de la pgina.
align="top/bottom/center/baseline/left/right/texttop/middle/absmiddle/absbotom",
anlogo al de la etiqueta IMG, define la alineacin horizontal o vertical de la consola respecto
de los elementos de la pgina.
hspace="hs", que establece la separacin horizontal, vspace="vs", que establece la
separacin vertical, en pixels, entre la consola y los elementos de la pgina que la redean.
Anloga a sus equivelentes de la etiqueta IMG.
Estos son los atributos principales, aunque podemos encontrar referencias de otros admitidos, aunque no suelen ser
operativos en la realidad, ya que no suelen funcionar de forma correcta o son especficos de Nestcape (como toda la
serie de atributos que configuran los controles de la consola.
Ejemplo sin consola:
<embed src="../sonidos/mid.mid" hidden="true" type="audio/midi" autostart="true"></embed>
Ejemplo con consola:
<embed
src="../sonidos/mid.mid"
height="100"></embed>
hidden="false"
type="audio/midi"
autostart="false"
width="150"
La etiqueta A.Efectivamente, los enlaces son la base del hipertexto, base a su vez de la web, y dentro de sus mltiples usos
podemos considerar el enlace a ficheros de audio. El fichero enlazado puede ser interpretado directamente por el
navegador (porque sea de reproduccin directa o se tenga instalado el plugin adecuado) o puede ser ejecutado por un
programa independiente que se abra automticamente (Winamp, Real Audio, etc.), siendo este el caso ms comn.
Si el usuario no dispone del programa o plugin adecuado, se le abrir una ventana de descarga del fichero, con lo que
podr guardarlo hasta disponer de la aplicacin necesaria para su reproduccin.
La sintaxis general en este caso ser del tipo:
<a href="ruta_fichero">Mensaje</a>
Ejemplo de fichero MID:
<a href="../sonidos/watermark.mid">Msica para t</a>
Ejemplo de fichero MP3:
<a href="../sonidos/mp3.mp3">Madonna</a>
59
VIDEO EN LA WEB
Formatos de video.Formato AVI
El formato Audio Video Interleave (audio y video entrelazado) es propietario de Microsoft y requiere disponer de
tarjeta para realizar la captura y la compresin, pero no requiere de ningn tipo de hardware especial para la
descompresin y reproduccin, por lo que rpidamente se ha convertido en un estndar. Alcanza resoluciones de 320
x 240 pixels y 30 frames/segundo.
En un fichero AVI los datos de audio y vdeo son almacenados consecutivamente en capas, en las que un segmento
de datos de vdeo es seguido inmediatamente por otro de datos de audio. De ah el nombre de entrelazado
(Interleave).
Formato Quick Time
Tambin conocido como MOV, es un formato propietario de la casa Apple, usado inicialmente en las mquinas
Macintosh. Produce ficheros de menor tamao que los AVI, que adems pueden incluir capacidades interactivas.
Proporciona una resolucin de 320 x 240 y 30 frames/segundo, sin necesidad de hardware especial.
Dentro de un fichero de QuickTime podemos encontrar audio, vdeo o una presentacin bajo una misma extensin,
siendo un sistema compatible con las diversas plataformas que soportan el estndar, que permite adems insertar
otros ficheros como AVI, MPEG o JPEG directamente en su interior.
Los ficheros resultantes tienen la extensin .qt o .mov
Aunque las ltimas versiones de Windows Media Player permiten visualizar ficheros MOV, es conveniente tener
instalado el programa Quick Time correspondiente a nuestra plataforma (Apple, PC o Unix), que podemos descargar
desde la web de Apple:
Los videos RTV estn diseados para su transmisin en directo a travs de Internet, utilizando la tecnologa
conocida con el nombre de streaming, mediante la cual el navegador no precisa descargar todo el fichero de video
desde el servidor, para visualizarlo al final, sino que va presentando en pantalla los datos segn le van llegando, sin
esperar a los siguientes en la serie. Para ello, se dispone un servidor especial (RealServer), que se encarga de ir
mandando los datos del video de modo secuencial, mientras que en la parte cliente un plugin especial (RealPlayer)
se encarga de ir recomponiendo los datos y visualizar el video en pantalla.
Podemos descargar Real Player desde la web hispana de la compaa Real:
http://www.realnetworks.com.mx/
Inclusin de ficheros de video.El lenguaje HTML nos ofrece varias etiquetas de llamada a ficheros de video, unas para incrustarlos en la
pgina, otras para ejecutarlos independientemente mediante el programa adecuado. Al igual que ocurre con otras
etiquetas, cada una ser vlida para uno o ms navegadores, parcial o totalmente, ya que cada casa fabricante ha ido
ampliando el lenguaje HTML a su propio gusto o necesidad.
Etiqueta IMG
Internet Explorer habilit la etiqueta estndar IMG para la inclusin de ficheros de video en el cuerpo de una pgina
web, aadindole para ello los atributos siguientes:
http://www.apple.com/es/quicktime/download/
Adems de videos en formato MOV, el programa Quick Time, con sus diferentes codecs, nos permite visualizar
tambin ficheros MPEG, VR (realidad virtual), scene, etc.
Formato MPEG
Formato creado por el Moving Pictures Expert Group, cuyos miembros pertenecen a empresas como Sony y Apple,
y que se unieron en 1988, bajo el auspicio de la ISO, para crear un formato de video estndar para comprimir
ficheros audio y video en formato digital, con una ligera perdida de calidad visual pero con una notable reduccin en
el tamao del fichero. Actualmente se encuentra operativa la versin MPEG-2 mejorada, se est perfeccionando la
versin MPEG-4 (pensada para difusin a travs de Internet, puede conseguir una calidad muy prxima a la del
DVD, pero con una compresin considerablemente mayor) y se acaba de presentar la versin MPEG-7.
MPEG-1 es un estndar para el CD-Rom audio y video, que codifica secuencias de vdeo y su audio asociado a 1,5
Megas/seg, con resolucin de 352 x 240 pixels. MPEG-2 es un estndar para transmisiones video de alta calidad a
pantalla completa, que utiliza tasas entre 3 y 10 Mb/segundo, para resoluciones que oscilan entre 352 x 480 y 1920 x
1080 pixels. MPEG-4 es un estndar para la video-telefona, usado en entornos GSM.
MPEG suele usar para la codificacin imgenes en formato JPEG, a las que aplica simplificaciones usando un
sistema de compresin basado en la comparacin entre imgenes consecutivas y la eliminacin de los datos
redundantes. En cuanto al audio, utiliza las mismas frecuencias de muestreo que los CD de audio digital de las
Cintas de Audio Digital (DAT), 44.1 KHz, 48 KHz, 32 KHz, todas a 16 bits.
La calidad obtenida con MPEG es excelente y es el sistema que utilizan los DVD. Sin embargo, el software para la
grabacin y edicin de vdeos MPEG es ms complejo que el de los otros formatos.
Los ficheros MPEG tienen la extensin .mpeg o .mpg, y pueden ser visualizados por medio de Windows Media
Player y Quict Time.
Formato RTV
El formato Real Time Video, de Intel, permite alcanzar ratios de hasta 150:1. La tecnologa usada est basada en la
codificacin de cada imagen, su comparacin con la anterior y posterior y la eliminacin de toda informacin
redundante. Para disponer de 60 Minutos de vdeo DVI a pantalla completa se necesitan cerca de 550 MB de disco
duro.
dynsrc="ruta_fichero_video", que especifica la localizacin del fichero, y donde

ruta_fichero_video puede ser una ruta local relativa, una ruta a partir del directorio raz del
servidor web o una URL completa de localizacin del fichero en Internet.
loop="n /infinite", que fija el nmero de veces que se debe visualizar el fichero de video (n
veces o infinitas). El valor por defecto es 1.
start="fileopen /mouseover", que establece si el fichero se debe empezar a ejecutar al abrir
la pgina (valor por defecto) o cuando se pase el puntero del ratn sobre l.
Tambin podemos encontrar en las referencias otros atributos, pero que slo tienen efecto en versiones antiguas de
Internet Explorer: controls, que tericamente debera hacer aparecer los controles de la consola del visualizador,
loopdelay="m", que especifica el tiempo en milisegundos (m) que hay entre una y otra reproduccin del video.
Esta forma de presentar videos no es compatible con los navegadores Netscape, por lo que no se aconseja su uso. En
caso de querer usarla, podemos especificar una imagen principal en la etiqueta IMG mediante su atributo SRC, de tal
forma que en los navegadores Netscape se ver dicha imagen, mientras que en Internet Explorer se mostrar el
video.
Ejemplo:
<img src="images/video_1.png" dynsrc="ejemplos/video_1.mpg" loop="2">
Adems de los atributos anteriores, podemos usar los que admite una imagen estndar: align, border, width, height,
etc., pero teniendo en cuenta que algunos de ellos se vern limitados a las caractersticas propias de un fichero de
video. Por ejemplo, si modificamos la altura del video mediante el atributo height, la anchura del mismo tambin se
modificar de forma equivalente, para mantener las proporciones originales.
Etiqueta EMBED
Otra forma de insertar un fichero de video en nuestras pginas es mediante la etiqueta EMBED, que ya vimos para la
inclusin de audio. Funciona exactamente igual para ambos tipos de ficheros, con las salvedades propias de cada uno
de ellos.
La introduccin de este etiqueta para visualizar videos la llev a cabo Netscape, pero en la prctica no funciona bien
en sus navegadores, ya que al intentar ver un video mediante ella suele salir el tpico mensaje de necesidad de
instalacin de un plugin especial. Tras descargar e instalar el plugin Quick Time, en las versiones 4x de Netscape
Navigator slo se visualizan bien los ficheros AVI, mientras que en las versiones 6x se visualizan tambin los
ficheros MPEG.
Internet Explorer la soporta bien, aunque lanza diferentes visualizadores segn el tipo de fichero, generalmente la
consola de video de Media Player para los ficheros MPEG y la de Quick Time para los ficheros AVI.
60
En cuanto a los ficheros MOV, todos los navegadores precisan un plugin especial autoinstalable, que una vez
instalado nos permite ver los videos con toda normalidad.
Los atributos principales de la etiqueta EMBED aplicada a ficheros de video son:
src="ruta_fichero", que fija la ruta en la que se encuentra el fichero de video a reproducir.

La ruta puede ser relativa a nuestro sistema de carpetas local, absoluta respecto el sistema de
carpetas del servidor web o una URL completa que localice le fichero en Internet.
loop="true/false", que determina el nmero de veces que se debe ejecutar el fichero de
video. Los valores admitidos son true (infinitas veces) y false (slo una vez).
type="tipo_fichero", atributo importante, que declara el tipo de fichero de video que
estamos usando, con lo que el navegador web puede ejecutar el programa o plugin adecuado
para la reproduccin del fichero. Puede ser video/avi, video/quicktime (.mov), video/mpeg,
etc.
pluginspage="URL", que establece, en caso de ser necesario un plugin especial para
reproducir el fichero, la pgina web donde se puede descargar el mismo. Slo se activa en el
caso de que el navegador no sea capaz de reproducir el fichero por s mismo.
showcontrols="1/0" , que fija si se debe de ver (valor por defecto) o no la barra inferior de
controles de la consola de video. Slo funciona bien en Netscape 4x.
showdisplay="1/0", que fija si se debe mostrar (valor por defecto) o no una banda inferior
en la consola con informacin sobre el fichero de video (nombre, autor, copyright, etc.). Slo
funciona bien en Netscape 4x.
showstatusbar="1/0", que fija si se debe mostrar (valor por defecto) o no una banda inferior
en la consola con informacin temporal sobre la visualizacin del video y sobre el sonido del
mismo. Slo funciona bien en Netscape 4x.
name="nombre", que asigna un nombre identificador (debe ser nico en la pgina) a una
etiqueta embed determinada, con objeto de ser accedida luego por lenguajes de script.
volume="v", que determina el volumen de reproduccin del sonido que acompaa al video,
y que puede variar entre 0 y 100. Es slo soportada por Netscape Navigator.
width="w", que determina el ancho visible de la consola de video, en pixels. height="h",
que determina el alto visible de la consola de video, en pixels.
align="top/bottom/center/baseline/left/right/texttop/middle/absmiddle/absbotom",
anlogo al de la etiqueta IMG, define la alineacin horizontal o vertical de la consola de
video respecto de los elementos de la pgina.
hspace="hs", que establece la separacin horizontal, vspace="vs", que establece la
separacin vertical, en pixels, entre la consola y los elementos de la pgina que la rodean.
Anloga a sus equivalentes de la etiqueta IMG.
Efectivamente, al enlazar directamente el fichero, el sistema operativo llamar a la aplicacin adecuada, que se
abrir independientemente y permitir visualizar el video con sus dimensiones y caractersticas propias, siempre y
cuando el usuario tenga instalado en su mquina dicha aplicacin. Si la aplicacin de video ha instalado plugins para
los navegadores, el fichero se abrir incrustado en una ventana del navegador usado. Si el usuario no dispone ni de la
aplicacin ni del plugin, tendr la opcin de guardar el fichero en su disco duro, con lo que podr instalar el
programa necesario con tranquilidad y visualizarlo cuando desee.
La sintaxis para enlazar un fichero de video ser del tipo:
<a href="ruta_fichero">Mensaje</a>
Ejemplo de fichero MOV:
<a href="ejemplos/mov_1.mov" target="_blank">pinchando aqu</a>
Ejemplo de fichero AVI:
<a href="ejemplos/heart_1.avi" target="_blank">pinchandoaqu</a>
Ejemplo de fichero MPEG:
<a href="ejemplos/mov_1.mov" target="_blank">pinchando aqu</a>
Ejemplo:
<embed src= "ejemplos/mov_1.mov"type="video/quicktime" autostart="True" width="165" height="140">
La etiqueta A
Si con ficheros MPEG tenemos problemas en los navegadores Netscape, eso no es nada cuando queremos ofrecer a
nuestros visitantes un video clip realizado en otro cualquiera de los posibles formatos de video. Adems, por mucho
que quede bonito un video incrustado en una pgina, el control que sobre el mismo podemos ejercer en todos los
casos bastante limitado.
Una buena solucin a estos problemas pasa por dejar que el video lo visualice directamente la aplicacin adecuada
para ello, sin las limitaciones que le impone el navegador web. Esta forma de acceder al fichero de video podemos
implementarla mediante la etiqueta estndar A, que crea un enlace al mismo.
61

Separata HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Separata HTML

Enviado por

Direitos autorais:

Formatos disponíveis

HTML

ESTRUCTURA DE UN DOCUMENTO WEB

Etiquetas BASE, LINK, ISINDEX

_blank: los enlaces se abren en una ventana nueva.

Declaraciones de estilos, mediante la etiqueta STYLE

text/javascript, para el caso de ficheros de cdigo JavaScript.

text/css, para el caso de ficheros de estilos CSS.

Print, para salida por impresora.

text/javascript: estilos definidos mediante JavaScript.

El valor normal es text/css.

text/css: estilos definidos mediante CSS.

screen: para presentacin del documento web en pantalla.

Capas definidas mediante etiquetas <div></div> o <span></span>

Codigos de lenguajes en servidor: JSP, Java, ASP, PHP, etc.

Objetos incrustados: Applets, animaciones Flahs, etc.

topmargin="n", para el margen superior

marginheight="n", para los mrgenes superior e inferior.

alink="color", para los enlaces activos.

vlink="color", para los enlaces visitados.

rightmargin="n", para el margen derecho

bottommargin="n", para el margen inferior

link="color", para los enlaces normales.

<title>HTMLWeb, Manual de HTML. Ejemplo de estilos en el BODY</title>

Propiedades de mrgenes: margin, margin-left, margin-top, margin-right, margin-bottom.

EL TEXTO EN LAS PGINAS WEB

<BLOCKQUOTE>...</BLOCKQUOTE>, que introduce citas textuales o texto destacado (Cita de

Este texto es un ejemplo.

<PLAINTEXT>...</PLAINTEX>, (TextoPlano), destinadas slo para la presentacin de textos de una

Este texto es grande

<CENTER>este texto esta centrado<CENTER>

<HR ALIGN="right" WIDTH="150"></HR>

Esta es una lnea de texto.

que corresponden respectivamente a unos tamaos absolutos 6 y 1.

este texto es de prueba

FORMATEO DE TEXTO MEDIANTE HOJAS DE ESTILOS EN CASCADA

parrafo con estilo en lnea

Este texto es de la clase cabecera

Este texto es de la clase cabecera

Color del texto.-

<span style="border-width:2mm;border-style:double;border-color:#003366;">Ejemplo nmero 1</span>

texto con color

<span style="border-width:4px;border-style:solid;border-color:red;">Ejemplo nmero 1</span>

ejemplo de parrafo en el que el texto

Transformacin del texto.-

Ejemplo de enlace a un fichero grfico:

<A HREF="ruta_pagina" PROPIEDAD="valor".....>texto del enlace</A>

* ENLACES DENTRO DE UNA MISMA PGINA:

* Enlaces a otra pgina de nuestro sitio web:

* ENLACES A UN ANCLAJE DENTRO DE OTRA PGINA DE TU SITIO:

* ENLACES A UNA PGINA WEB DE OTRO SERVIDOR:

* OTROS TIPOS DE ENLACES:

<A rEF.="http://www.yahoo.es/"> Yahoo</A>

<A HREF="gopher://gopher.uv.es/">GOPHER </A>

file:///C| Fichero local

Y anlogamente es posible especificar si enviamos el mensaje con copia y a quin:

* CONTROLANDO LOS ENLACES CON HTML:

* CONTROLANDO LOS ENLACES CON JAVASCRIPT:

LISTAS REGULARES SIN ORDENAR.-

LISTAS CON ESTILO

O asignar una imagen de fondo a la lista:

* Configurando los topos:

Observad atentamente la sintaxis:

Estructura de una tabla

<TD>...</TD> <TD>...</TD> <TD>...</TD>