Lenguaje HTML

Instituto Tecnolgico de Orizaba
Herramientas para desarrollo Web
Lenguaje HTML
Qu es la World Wide Web?
La World Wide Web (Web), en castellano "Tejido Mundial", es una red de
recursos de informacin. La Web se basa en tres mecanismos para hacer que
estos recursos estn listos y a disposicin de la mayor audiencia posible:
Un esquema uniforme de nombres para localizar recursos en la Web

(p.ej., URIs).
Protocolos, para acceder a recursos con nombre en la Web (p.ej., HTTP).
Hipertexto, para navegar fcilmente entre recursos (p.ej., HTML).
Las relaciones entre los tres mecanismos son evidentes a todo lo largo de esta
especificacin.
Introduccin a los URIs

Todos los recursos disponibles en la Web -- documentos HTML, imgenes,
videoclips, programas, etc. -- tienen una direccin que puede ser codificada
mediante unUniversal Resource Identifier, o "URI", es decir, un Identificador
Universal de Recursos. Los URIs se componen normalmente de tres partes:
El esquema de nombres del mecanismo usado para acceder al recurso.

El nombre de la mquina que aloja el recurso.
El nombre en s del recurso, dado en forma de "path" o "ruta de acceso".
Consideremos el URI que designa la pgina de Informes Tcnicos del W3C:

http://www.w3.org/TR
Este URI puede leerse de la siguiente manera: Hay un documento disponible a
travs del protocolo HTTP (ver [RFC2616]), que se encuentra en la mquina
www.w3.org, accesible a travs de la ruta "/TR". Entre otros esquemas que
pueden encontrarse en documentos HTML se incluyen "mailto" para correo
electrnico y "ftp" para FTP.
Aqu tenemos otro ejemplo de URI. ste se refiere al buzn de correo
electrnico de un usuario:
...aqu va texto...
Para cualquier comentario, enve un mensaje a
<A href="mailto:jose@algunsitio.com">Jose Chvere</A>.

Nota. La mayora de los lectores estar familiarizado con el trmino "URL" y no
con el trmino "URI". Los URLs forman un subconjunto del esquema de nombres
URI, que es ms general.
Qu es HTML?
Definindolo de forma sencilla, "HTML es lo que se utiliza para crear todas las
pginas web de Internet". Ms concretamente, HTML es el lenguaje con el que
se "escriben" la mayora de pginas web.
Los diseadores utilizan el lenguaje HTML para crear sus pginas web, los
programas que utilizan los diseadores generan pginas escritas en HTML y los
navegadores que utilizamos los usuarios muestran las pginas web despus de
leer su contenido HTML.
Aunque HTML es un lenguaje que utilizan los ordenadores y los programas de
diseo, es muy fcil de aprender y escribir por parte de las personas. En
realidad, HTML son las siglas de HyperText Markup Language.
El lenguaje HTML es un estndar reconocido en todo el mundo y cuyas normas
define un organismo sin nimo de lucro llamado World Wide Web Consortium,
ms conocido como W3C. Como se trata de un estndar reconocido por todas
las empresas relacionadas con el mundo de Internet, una misma pgina HTML
se visualiza de forma muy similar en cualquier navegador de cualquier sistema
operativo.
El propio W3C define el lenguaje HTML como "un lenguaje reconocido
universalmente y que permite publicar informacin de forma global". Desde su
creacin, el lenguaje HTML ha pasado de ser un lenguaje utilizado
exclusivamente para crear documentos electrnicos a ser un lenguaje que se
utiliza en muchas aplicaciones electrnicas como buscadores, tiendas online y
banca electrnica.
Historia de HTML
El origen de HTML se remonta a 1980, cuando el fsico Tim Berners-Lee,
trabajador del CERN (Organizacin Europea para la Investigacin Nuclear)
propuso un nuevo sistema de "hipertexto" para compartir documentos.
Los sistemas de "hipertexto" haban sido desarrollados aos antes. En el mbito
de la informtica, el "hipertexto" permita que los usuarios accedieran a la
informacin relacionada con los documentos electrnicos que estaban
visualizando. De cierta manera, los primitivos sistemas de "hipertexto" podran
asimilarse a los enlaces de las pginas web actuales.

Tras finalizar el desarrollo de su sistema de "hipertexto", Tim Berners-Lee lo
present a una convocatoria organizada para desarrollar un sistema de
"hipertexto" para Internet. Despus de unir sus fuerzas con el ingeniero de
sistemas Robert Cailliau, presentaron la propuesta ganadora llamada
WorldWideWeb (W3).
El primer documento formal con la descripcin de HTML se public en 1991 bajo
el nombre "HTML Tags" (Etiquetas HTML) y todava hoy puede ser consultado
online a modo de reliquia informtica.
La primera propuesta oficial para convertir HTML en un estndar se realiz en
1993 por parte del organismo IETF (Internet Engineering Task Force). Aunque
se consiguieron avances significativos (en esta poca se definieron las etiquetas
para imgenes, tablas y formularios) ninguna de las dos propuestas de estndar,
llamadas HTML y HTML+ consiguieron convertirse en estndar oficial.
En 1995, el organismo IETF organiza un grupo de trabajo de HTML y consigue
publicar, el 22 de septiembre de ese mismo ao, el estndar HTML 2.0. A pesar
de su nombre, HTML 2.0 es el primer estndar oficial de HTML.
A partir de 1996, los estndares de HTML los publica otro organismo de
estandarizacin llamado W3C (World Wide Web Consortium). La versin HTML
3.2 se public el 14 de Enero de 1997 y es la primera recomendacin de HTML
publicada por el W3C. Esta revisin incorpora los ltimos avances de las
pginas web desarrolladas hasta 1996, como applets de Java y texto que fluye
alrededor de las imgenes.
HTML 4.0 se public el 24 de Abril de 1998 (siendo una versin corregida de la
publicacin original del 18 de Diciembre de 1997) y supone un gran salto desde
las versiones anteriores. Entre sus novedades ms destacadas se encuentran
las hojas de estilos CSS, la posibilidad de incluir pequeos programas o scripts
en las pginas web, mejora de la accesibilidad de las pginas diseadas, tablas
complejas y mejoras en los formularios.
La ltima especificacin oficial de HTML se public el 24 de diciembre de 1999 y
se denomina HTML 4.01. Se trata de una revisin y actualizacin de la versin
HTML 4.0, por lo que no incluye novedades significativas.
Desde la publicacin de HTML 4.01, la actividad de estandarizacin de HTML se
detuvo y el W3C se centr en el desarrollo del estndar XHTML. Por este
motivo, en el ao 2004, las empresas Apple, Mozilla y Opera mostraron su
preocupacin por la falta de inters del W3C en HTML y decidieron organizarse
en una nueva asociacin llamada WHATWG (Web Hypertext Application
Technology Working Group).

La actividad actual del WHATWG se centra en el futuro estndar HTML 5, cuyo
primer borrador oficial se public el 22 de enero de 2008. Debido a la fuerza de
las empresas que forman el grupo WHATWG y a la publicacin de los
borradores de HTML 5.0, en marzo de 2007 el W3C decidi retomar la actividad
estandarizadora de HTML.
De forma paralela a su actividad con HTML, W3C ha continuado con la
estandarizacin de XHTML, una versin avanzada de HTML y basada en XML.
La primera versin de XHTML se denomina XHTML 1.0 y se public el 26 de
Enero de 2000 (y posteriormente se revis el 1 de Agosto de 2002).
XHTML 1.0 es una adaptacin de HTML 4.01 al lenguaje XML, por lo que
mantiene casi todas sus etiquetas y caractersticas, pero aade algunas
restricciones y elementos propios de XML. La versin XHTML 1.1 ya ha sido
publicada en forma de borrador y pretende modularizar XHTML. Tambin ha
sido publicado el borrador de XHTML 2.0, que supondr un cambio muy
importante respecto de las anteriores versiones de XHTML.
Especificacin oficial
El organismo W3C (World Wide Web Consortium) elabora las normas que deben
seguir los diseadores de pginas web para crear las pginas HTML. Las
normas oficiales estn escritas en ingls y se pueden consultar de forma gratuita
en las siguientes direcciones:
Especificacin oficial de HTML 4.01
Especificacin oficial de XHTML 1.0
El estndar XHTML 1.0 incluye el 95% del estndar HTML 4.01, ya que slo
aade pequeas mejoras y modificaciones menores. Afortunadamente, no es
necesario leer las especificaciones y recomendaciones oficiales de HTML para
aprender a disear pginas con HTML o XHTML. Las normas oficiales estn
escritas con un lenguaje bastante formal y algunas secciones son difciles de
comprender. Por ello, en los prximos captulos se explica de forma sencilla y
con decenas de ejemplos la especificacin oficial de XHTML.

HTML y XHTML
El lenguaje XHTML es muy similar al lenguaje HTML. De hecho, XHTML no es
ms que una adaptacin de HTML al lenguaje XML. Tcnicamente, HTML es
descendiente directo del lenguaje SGML (Standard Generalized Markup
Language), mientras que XHTML lo es del XML (que a su vez, tambin es
descendiente de SGML).
Esquema de la evolucin de HTML y XHTML
Las pginas y documentos creados con XHTML son muy similares a las pginas
y documentos HTML. Las discusiones sobre si HTML es mejor que XHTML o
viceversa son recurrentes en el mbito de la creacin de contenidos web,
aunque no existe una conclusin ampliamente aceptada.
Actualmente, entre HTML 4.01 y XHTML 1.0, la mayora de diseadores
escogen XHTML. En un futuro cercano, si los diseadores deben elegir entre
HTML 5 y XHTML 1.1 o XHTML 2.0, quizs la eleccin sea diferente.
HTML y CSS
Originalmente, las pginas HTML slo incluan informacin sobre sus contenidos
de texto e imagenes. Con el desarrollo del estndar HTML, las pginas
empezaron a incluir tambin informacin sobre el aspecto de sus contenidos:
tipos de letra, colores y mrgenes.

La posterior aparicin de tecnologas como JavaScript, provocaron que las
pginas HTML tambin incluyeran el cdigo de las aplicaciones (llamadas
scripts) que se utilizan para crear pginas web dinmicas.
Incluir en una misma pgina HTML los contenidos, el diseo y la programacin
complica en exceso su mantenimiento. Normalmente, los contenidos y el diseo
de la pgina web son responsabilidad de diferentes personas, por lo que es
conveniente separarlos.
CSS es el mecanismo que permite separar los contenidos definidos mediante

XHTML y el aspecto que deben presentar esos contenidos:
Esquema de la separacin de los contenidos y su presentacin
Una ventaja aadida de la separacin de los contenidos y su presentacin es

que los documentos XHTML creados son ms flexibles, ya que se adaptan mejor
a las diferentes plataformas: pantallas de ordenador, pantallas de dispositivos
mviles, impresoras y dispositivos utilizados por personas discapacitadas.
De esta forma, utilizando exclusivamente XHTML se crean pginas web "feas"
pero correctas. Aplicando CSS, se pueden crear pginas "bonitas" a partir de las
pginas XHTML correctas.

Estructura de una pgina HTML

Las pginas HTML estn estructuradas en tres partes diferenciadas:
<!Tipo de documeto>
la HEAD (cabecera) y
el BODY (cuerpo).
Ejemplo de pgina
<!Tipo de documento>
<HTML>
<HEAD>
<TITLE> Documento de prueba </TITLE>
</HEAD>

<BODY>
<H1> Esto es una "demo" de documento HTML </H1>
Esto es el ms sencillo de los documentos HTML.
</BODY>
</HTML>
El tipo de documento no es obligatorio a efectos prcticos, es decir que la

pgina se ver igual tanto si se escribe como si no. Slo sirve como
identificacin del tipo de contenido del fichero a los efectos de cumplir las
especificaciones de estndar recomendadas por el consorcio W3C, que es el
organismo que regula el lenguaje. Por ejemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://w3.org/TR/REC-html40/loose.dtd">
Indica que cumple el estndar HTML 4.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://w3.org/TR/REC-html40/strict.dtd">
Significa que cumple el estndar HTML 4.0 y, adems, no contiene elementos

desaconsejables.
Y esta es una definicin de marcos que cumple el estndar HTML 4.0:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://w3.org/TR/REC-html40/frameset.dtd">

En el HTML 4.0 se consideran desaconsejables aquellos elementos que, an
siendo soportados, han sido sustituidos por otros y, por ello, es posible que sean
eliminados en el futuro. En cualquier caso, el que un elemento escrito en las
pginas se vea o no, depender siempre del navegador utilizado y/o de su
versin, no de lo que diga el estndar.
Para escribir comentarios en la pgina (que slo se ven en el texto fuente, pero
no en el visualizador) se utilizar el elemento :

cuidado: el que no se vea de forma normal en el navegador, no significa que no

pueda verse el cdigo fuente. Nunca se deben escribir comentarios con claves
de acceso o datos confidenciales.

Cabecera (HEAD) de un documento HTML.

La HEAD es la primera de las dos partes en que se estructura un documento
HTML.
En la HEAD reside informacin acerca del documento, y generalmente no se ve
cuando se navega por l.
En la HEAD se pone el elemento <TITLE> :
que es una breve descripcin que identifica la pgina.

Es lo que el navegador se guarda en el "Bookmarks" (libro de marcas o
libro de direcciones), con lo que crea la lista que aparece en la orden "Go"
de la barra de rdenes, lo que aparece en la esquina superior izquierda
cuando se imprime el documento, y lo que aparece en el marco de la
ventana del navegador.
Tambin lo guarda en su cach, y servir para mostrar la pgina, cuando
sea llamada otra vez, sin necesidad de conectarse de nuevo al servidor
de origen.
No hay que confundir el elemento <TITLE> con el nombre del fichero.

<HEAD>
<TITLE>Head de un documento </TITLE>
</HEAD>
Dentro de la HEAD puede utilizarse otro elemento: META. Por ejemplo, si se

escribe:
<HEAD>
<META HTTP-EQUIV="Refresh" CONTENT="10">
</HEAD>
Esto hace que el visualizador vuelva a cargar la pgina activa al cabo de 10

segundos. Tambin puede hacerse a un servidor. As:
<HEAD>
<META HTTP-EQUIV="Refresh" CONTENT="10;
URL=http://miservidor/mipagina.htm">
</HEAD>
Utilizar esto con precaucin. Si se sabe que el contenido de la pgina no va a

cambiar, es intil hacer esto, y si se hace contra un servidor, se puede
sobrecargar. Este elemento, slo tendr utilidad en casos muy especiales.

Otra opcin es forzar la expiracin inmediata en la cach del navegador de la
pgina recibida, lo que provoca que la pgina sea solicitada de nuevo al servidor
cada vez, en lugar de cargar la copia que ya existe en la mquina del cliente. Se
escribe as:
<HEAD>
<META HTTP-EQUIV="Expires" CONTENT="Tue, 20 Aug 1996 14:25:27 GMT">
</HEAD>
Si se pone una fecha ya pasada, como la que hay en el ejemplo, el navegador

elimina inmediatamente de la cach la pgina recibida, y si no es pasada, lo
har en el momento indicado por la misma. Tambin se le puede dar valor cero
a la fecha de expiracin:
<HEAD>
<META HTTP-EQUIV="Expires" CONTENT="0">
</HEAD>
Otra opcin es impedir directamente que el navegador guarde en cach la

pgina. Esto es especialmente til cuando se trabaja con formularios que
consultan datos dinmicos:
<HEAD>
<META HTTP-EQUIV="Expires" CONTENT="no-cache">
</HEAD>
Si se tiene inters en que las pginas aparezcan en los grandes buscadores de

Internet, y puedan ser encontradas con facilidad, se pueden poner las palabras
clave que contiene la pgina separadas por comas. Por ejemplo:
<HEAD>
<META NAME="keywords" CONTENT="HTML, internet
</HEAD>
">
Este otro sirve para que los buscadores puedan ofrecer un breve resumen de los
contenidos de la pgina:
<HEAD>
<META NAME="description" CONTENT="Manual para escribir HTML.">
</HEAD>
Se pueden poner todos los elementos <META> que se crean necesarios, pero
sin repetirlos.
10

Todos los navegadores, por defecto, siempre que reciben una pgina de un
servidor se hacen una copia de la misma en el disco de la mquina. Con esto se
pretende que si se vuelve a solicitar la misma pgina, en lugar de pedirla de
nuevo al servidor, se mostrar la que tiene guardada en el disco. A esta rea del
disco donde el navegador va poniendo las pginas visitadas, se le denomina
cach. El tamao de la cach se puede modificar desde las opciones de
configuracin del navegador, e incluso se puede dar tamao cero, con lo que
siempre que se vea una pgina, sta habr sido solicitada al servidor
independientemente de lo que digan las instrucciones META.
11

Cuerpo (BODY) de un documento

El cuerpo (BODY) es la segunda y ltima de las dos partes en que se estructura
un documento HTML.
Por supuesto es obligatoria, ya que es aqu donde reside el verdadero contenido
de la pgina, y por tanto, al contrario de la HEAD s se ve cuando navegamos
por ella.
Se escibir asi:
<BODY>
texto texto texto texto texto texto texto texto texto texto texto texto
</BODY>
Los navegadores, por defecto, presentan el texto de una pgina ajustando los
contenidos a la esquina superior izquierda de la pantalla. El elemento BODY
tiene parmetros que permiten modificar los mrgenes por defecto. Lo malo es
que cada navegador los interpreta de una manera. Por ejemplo:
Netscape utiliza solamente dos instrucciones que afectan simultneamente a los
mrgenes superior e inferior e izquierdo y derecho respectivamente:
marginwidth="pixels", para los mrgenes izquierdo y derecho.

marginheight="pixels", para los mrgenes superior e inferior.
En cambio, el Internet Explorer, utiliza uno para cada cual:
leftmargin="pixels", para el margen izquierdo

topmargin="pixels", para el margen superior
rightmargin="pixels", para el margen derecho
bottommargin="pixels", para el margen inferior
Donde pixels es el nmero de pixels que se quiere mover cada margen hacia el
interior de la pgina. Estos parmetros tambin son accesibles desde
instrucciones de estilo.
Otro problema que suele presentarse con los mrgenes es que a la hora de
imprimir una pgina, cada impresora, junto con el navegador, se las ingeniarn
para hacer justo lo contrario de lo que se desea... Tal vez algun dia todo esto
funcione bien.
12

Otra cosa que puede controlarse desde BODY es el color que tomarn los links
que pongamos en la pgina.
Por ejemplo, para hacer que los links sean amarillos antes de ser visitados, azulverde cuando son activados, y verdes despus de haber sido utilizados, se
escribe:
<BODY LINK="#FFFF00" VLINK="#22AA22" ALINK="#0077FF">
Tamaos y tipos de letra en HTML.

Para definir distintos tamaos de letra, en HTML se utiliza el elemento <Hx>
</Hx> donde x es un nmero que puede variar entre 1 y 6, siendo 1 el tamao
mayor.
Se escribirn as:
<H1>
<H2>
<H3>
<H4>
<H5>
<H6>
Texto
Texto
Texto
Texto
Texto
Texto
de
de
de
de
de
de
prueba
prueba
prueba
prueba
prueba
prueba
(H1)</H1>.
(H2)</H2>
(H3)</H3>
(H4)</H4>
(H5)</H5>
(H6)</H6>
y este sera el resultado:
Texto de prueba (H1)


No olvidar poner el cierre </Hx> a cada elemento utilizado.Este tipo de elemento

se suele utilizar para escribir encabezamientos, ya que despus del cierre
automticamente el visualizador inserta un salto de prrafo.
13

Por ejemplo: si se escribe
<H1> Texto en H1 </H1> <H3> Texto en H3 </H3>
se ver:
Texto en H1
Texto en H3
Y no una cosa al lado de la otra, como se pudiera esperar. Este elemento admite
un parmetro de alineacin. As, si se escribe:
<H3 align=center> Texto en H3 </H3>
Texto en H3
Otra forma de cambiar los tamaos de letra es utilizar el elemento <FONT > con
el atributo VALOR, que es un nmero entre 1 y 7. El valor por defecto del texto
es 3. La gran diferencia de esta notacin respecto a la anterior es que no se
produce un salto de prrafo despus de cada cambio, por lo que pueden
hacerse cosas como esta:
<FONT SIZE=3>A</font><FONT SIZE=4>A</font><FONT SIZE=5>A</font>
<FONT SIZE=6>A</font><FONT SIZE=7>A</font><FONT SIZE=6>A</font>
<FONT SIZE=5>A</font><FONT SIZE=4>A</font><FONT SIZE=3>A</FONT>
Dar como resultado:
AAAAAA
AAA
Se puede cambiar el tamao por defecto (3) de toda la pgina con el elemento
<BASEFONT SIZE=valor>.
El texto tomar el tamao indicado por valor y lo mantendr hasta que aparezca
otro elemento <BASEFONT SIZE=valor> y lo restaure o lo cambie por otro
diferente.
Tanto si se ha establecido un valor base como si se utiliza el valor por defecto,
los tamaos tambin pueden indicarse de forma relativa, por lo que el valor
puede ser positivo (+) o negativo (-) respecto al tamao base.
14

Por ejemplo estos dos valores dan el mismo resultado:
<FONT SIZE=5>ABcde</FONT>
<FONT SIZE=+2>ABcde</FONT>
ABcde
ABcde
Con la versin 3.0 de Netscape se ha implementado un nuevo atributo del
elemento <FONT> que permite elegir tipos de letra entre los varios de que
dispone por defecto Windows. Se trata del atributo FACE. Este atributo permite
forzar el tipo de letra que el diseador de la pgina quiere que vea el cliente, sin
importar el que por defecto tenga establecido el visualizador.
Si se escribe
<FONT FACE="arial">Texto de prueba 12345 con tipo ARIAL</FONT>
<FONT FACE="times new roman">Texto de prueba 12345 con tipo TIMES NEW
ROMAN</FONT>
<FONT FACE="courier new">Texto de prueba 12345 con tipo COURIER
NEW</FONT>
<FONT FACE="courier">Texto de prueba 12345 con tipo COURIER</FONT>
<FONT FACE="roman">Texto de prueba 12345 con tipo ROMAN</FONT>
<FONT FACE="small fonts">Texto de prueba 12345 con tipo SMALL
FONTS</FONT>
Se ver:
Texto de prueba 12345 con tipo ARIAL
Texto de prueba 12345 con tipo TIMES NEW ROMAN
Texto de prueba 12345 con tipo COURIER NEW
Texto de prueba 12345 con tipo COURIER
Texto de prueba 12345 con tipo ROMAN
Texto de prueba 12345 con tipo VERDANA
Texto de prueba 12345 con tipo SMALL FONTS
Este atributo es compatible con todos los dems ya conocidos, como color y
tamao. Por ejemplo, si se escribe :
<FONT FACE="impact" SIZE=6 COLOR="red">
Texto de prueba 12345 con tipo IMPACT</FONT>
Se ver:
Texto de prueba 12345 con tipo IMPACT

15

Se pueden hacer todas la combinaciones que se quieran, pero hay que tener
presente que si en la mquina cliente no est instalada una determinada fuente,
sta no se ver y en su lugar aparecer la fuente por defecto del visualizador.
No es interesante por tanto, definir tipos raros, que probablemente, no llegarn a
verse nunca.
Si a pesar de todo, se define un tipo del que se tienen dudas de que exista en el
cliente, se pueden indicar otros tipos alternativos, de forma que el navegador si
no tiene el primer tipo, utilizar el siguiente, y si tampoco lo tiene el prximo, etc.
As:
<FONT FACE="raro, courier" SIZE=4 COLOR="red">
Texto de prueba 12345 con tipos alternativos</FONT>
Se ver:
Texto de prueba 12345 con tipos alternativos

Como se puede ver, se ha declarado como primer tipo de letra el llamado "raro"
que, por supuesto, no existe, y el navegador pasa a utilizar el siguiente,
"courier", que s es habitual.
Texto en color
Se puede controlar el color del texto utilizando el elemento <FONT> con el
atributo COLOR="xxx", donde "xxx" es el nombre en ingls del color que se
desea. Hay que tener presente que algunos no se vern o se vern mal si la
mquina no soporta, por lo menos, 256 colores. Por supuesto, este efecto es
anidable con el de tamao y todos los dems.
Si se escribe:
<B><FONT COLOR="red">Texto ROJO </FONT>
<br>
<FONT COLOR="blue">Texto AZUL </FONT>
<br>
<FONT COLOR="navy">Texto AZUL MARINO </FONT>
<br>
<FONT COLOR="green">Texto VERDE </FONT>
<br>
<FONT COLOR="olive">Texto OLIVA </FONT>
<br>
<FONT COLOR="yellow">Texto AMARILLO </FONT>
<br>
<FONT COLOR="lime">Texto LIMA </FONT>
<br>
16

<FONT
<br>
<FONT
<br>
<FONT
<br>
<FONT
<br>
<FONT
<br>
<FONT
<br>
<FONT
<br>
<FONT
<br>
</B>
COLOR="magenta">Texto MAGENTA </FONT>

COLOR="purple">Texto PURPURA </FONT>
COLOR="cyan">Texto CYAN </FONT>
COLOR="brown">Texto MARRON </FONT>
COLOR="black">Texto NEGRO </FONT>
COLOR="gray">Texto GRIS </FONT>
COLOR="teal">Texto TEAL </FONT>
COLOR="white">Texto BLANCO </FONT>
Se ver:
Texto ROJO
Texto AZUL
Texto AZUL MARINO
Texto VERDE
Texto OLIVA
Texto AMARILLO
Texto LIMA
Texto MAGENTA
Texto PURPURA
Texto CYAN
Texto MARRON
Texto NEGRO
Texto GRIS
Texto TEAL
He aqu una combinacin de colores y tamaos: Si se escribe:
<FONT SIZE=6 COLOR="red">E</FONT><FONT SIZE=4>sto es una </FONT>
<FONT SIZE=6 COLOR="red">P</FONT><FONT SIZE=4>rueba </FONT>
Resulta:
Esto es una Prueba

Los colores tambin se pueden definir en hexadecimal (por ejemplo el rojo es
<FONT COLOR=#FF0000>). Cuando son colores bsicos, como los del ejemplo
de arriba, es ms cmodo escribir el nombre aunque sea en ingls, pero cuando
se trata de definir un color que "no tiene nombre" no hay ms remedio que usar
la codificacin hexadecimal.
17

Las distintas definiciones de los bloques. Separadores.

Si se analiza una pgina cualquiera se vera que, en realidad, est compuesta de
distintos bloques.
Es algo as como un mosaico en el que cada parte de la composicin final tiene
sus propios contenidos, que pueden ser texto, grficos o las dos cosas.
Dependiendo de la composicin que se quiera hacer, habr que elegir los
elementos ms convenientes para que nuestros contenidos aparezcan
finalmente con la alineacin debida, el tamao apropiado, etc.
Se comenzara con el elemento <Hx> </Hx> donde x es un nmero que puede
variar entre 1 y 6, siendo 1 el tamao mayor.
Se escribirn as:
<H1>
<H2>
<H3>
<H4>
<H5>
<H6>
Texto
Texto
Texto
Texto
Texto
Texto
de
de
de
de
de
de
prueba
prueba
prueba
prueba
prueba
prueba
(H1)</H1>.
(H2)</H2>
(H3)</H3>
(H4)</H4>
(H5)</H5>
(H6)</H6>


No hay que olvidar poner el cierre </Hx> a cada elemento utilizado.

Este tipo de elemento suele emplearse para escribir encabezamientos, ya que
despus del cierre, automticamente, el visualizador inserta un salto de prrafo.
18

Por ejemplo, si se escribe:
<H1> Texto en H1 </H1> <H3> Texto en H3 </H3>
se ver:
Texto en H1
Texto en H3
Y no una cosa al lado de la otra, como cabra esperar. Este elemento admite un
parmetro de alineacin. As, si escribes:
<H3 align=center> Texto en H3 </H3>
Texto en H3
Para definir los prrafos se utiliza el elemento <P> </P> (por Paragraph).
Aunque a menudo no se utiliza el cierre </P>, ya que el texto continuar
normalmente hasta que encuentre otro prrafo <P>, es conveniente
acostumbrarse a ponerlo siempre. En la nueva definicin del XHTML el cierre es
obligatorio.
Se escribir as:
<P> Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 1 Texto 1 </P>
<P> Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2
</P>
Y este sera el resultado:

Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2
Como puede verse, hay una lnea en blanco entre los dos bloques. Si no se
quiere dejar esa lnea vaca entre los dos prrafos puede utilizarse el elemento
<BR> (por BReak). Es decir, que el elemento <BR> es un separador, no un
indicador de bloque.
19

Se escribir as:
<P>Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 1 Texto 1 <BR>
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P>

Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2
El elemento <P> admite cuatro atributos de alineacin: ALIGN=LEFT (por
defecto), ALIGN=RIGHT , ALIGN=CENTER y ALIGN=JUSTIFY
Se escribirn as:
<P ALIGN=LEFT>
Texto 1 Texto 1 Texto
<P ALIGN=RIGHT>
<P ALIGN=CENTER>
<P ALIGN=JUSTIFY>
1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1

1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 </P>
4 Texto 4 Texto 4
4 Texto 4 Texto 4
Texto 4 Texto 4 Texto 4

Texto 4 Texto 4 Texto 4 </P>

Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto
Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 Texto 4 Texto 4
Texto 4 Texto 4 Texto 4 tex Texto 4 Texto 4 Texto 4 Texto 4 tex Texto 4 Texto 4 tex
Texto 4 Texto 4 tex Texto tex 4 Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4
tex Texto tex 4 Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto tex 4
Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto 4 Texto 4 tex Texto tex 4 Texto 4
20

Un elemento que se comporta de forma parecida a <BR> es <DIV> pero que
admite los mismos atributos que <P>: ALIGN=LEFT ALIGN=RIGHT y
ALIGN=CENTER
Se escribe as:
<DIV ALIGN=LEFT>
texto1 texto1 texto1
</DIV>
<DIV ALIGN=RIGHT>
< /DIV>
<DIV ALIGN=CENTER>
</DIV>
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto1
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto2
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
texto3
Fijarse en que aqu s se utiliza el cierre </DIV>. Este sera el resultado:

texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1 texto1
Como se puede ver, salvo por las alineaciones, que ya se hacen con <P>, no
tiene ninguna utilidad prctica, y en general solamente se utiliza para definir
bloques especiales definidos con instrucciones de estilo (bordes, tamao,
situacin, alineacin, color, etc., etc.)
21

Otro elemento que es casi igual que <DIV> pero que no admite atributos de
alineado, y no produce separacin de prrafo ni de lnea es <SPAN>. En
realidad, de forma directa no sirve para nada, y ha sido creado tambin para
aplicar las hojas de estilo.
Se escribe as:
<SPAN>
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
</SPAN>
Otro interesante efecto es el elemento <BLOCKQUOTE> que sirve para

presentar prrafos adentrados (como si estuviesen tabulados).
Se escribir as:
<BLOCKQUOTE>
texto texto texto
texto texto texto
<BLOCKQUOTE>
texto texto texto
texto texto texto
</BLOCKQUOTE>
</BLOCKQUOTE>
texto texto texto texto texto texto texto


texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto
Fijarse que en este ejemplo hay un anidamiento, y por tanto, debe haber dos
cierres </BLOCKQUOTE> al final.
Otro separador de bloques de texto es el elemento vaco <HR> (por Horizontal
Rule). Este sera el resultado:
22

El elemento <HR> admite dos parmetros: WIDTH y SIZE. El primero define la
longitud de la lnea y el segundo su anchura. No es obligado usar los dos a la
vez.
<HR WIDTH=400 SIZE=5>
El resultado ser:
El valor del atributo WIDTH se puede expresar, como en el ejemplo anterior, en

nmero de puntos (pxels), o en tantos por ciento referidos al ancho total de la
ventana. As:
<HR WIDTH=80% SIZE=5>
El resultado ser:
Adems se puede indicar su posicin respecto a los mrgenes de la ventana con

los atributos ALIGN=CENTER (por defecto) ALIGN=LEFT y ALIGN=RIGHT. Por
ejemplo:
<HR WIDTH=80% SIZE=5 ALIGN=LEFT>
El resultado ser:
O bien:
<HR WIDTH=80% SIZE=5 ALIGN=RIGHT>
El resultado ser:
23

Hay otro elemento, aparecido en la versin 6 de Netscape, que permite rodear
un texto con un marco, y opcionalmente ponerle una etiqueta. Se trata del
elemento: <FIELDSET>. Recuerda que si no tienes la versin adecuada de
navegador, en los siguientes ejemplos slo vers el texto, pero no los
enmarcados.
Si se escribe:
<FIELDSET>
Esto es una prueba de enmarcado
</FIELDSET>
Se obtiene:
Este elemento tiene un parmetro que permite etiquetar el recuadro: <LEGEND>
Si se escribe:
<FIELDSET>
<LEGEND>Esto es una etiqueta</LEGEND>
</FIELDSET>
Se obtiene:
Esto es una etiqueta
El parmetro <LEGEND> tiene tres atributos que indican la posicin de la
etiqueta: LEFT (por defecto), RIGHT y CENTER, aunque no funciona en todos
los navegadores. Por ejemplo:
<FIELDSET>
<LEGEND ALIGN=CENTER> Esto es una etiqueta </LEGEND>
</FIELDSET>
Se obtiene:
Esto es una etiqueta
Si en estos ejemplos no se ve el recuadro o la etiqueta no est donde debiera,
es porque no se tiene una versin de navegador adecuada.
Por supuesto, dentro del recuadro generado por <FIELDSET> se puede poner
cualquier cosa: formularios, imgenes, texto, etc.
24

Textos preformateados
Cuando se escribe un texto con un editor, a la hora de ver lo hecho con el
visualizador, algunas cosas no estn como se pusieron... Como por ejemplo
poner dos o tres espacios en blanco entre palabras, o intentar encolumnar los
datos de una pequea tabla: acaba todo junto y en la misma lnea!
Este efecto se puede eliminar con el elemento <PRE> . Al texto que va dentro
del elemento PRE se le pueden aplicar todos los elementos que se quiera,
siempre que sean elementos que no alteren la posicin del texto. Por ejemplo si
se utiliza el elemento <H>, se rompera el preformateo pero no ocurrir lo mismo
con <FONT SIZE>. Por defecto, los textos preformateados se ven con tipo de
letra "curier", y los no preformateados en "Times New Roman". Estos tipos son
configurables en el visualizador.
Se escribir as:
<PRE>
1
9 10 11 12 13 14
<B>Esto es una demostracion de</B>

texto preformateado.
15 16 17 18 19 20 21
</PRE>
1
9 10 11 12 13 14
Esto es una demostracion de

texto preformateado.
15 16 17 18 19 20 21
Dentro de un bloque preformateado tambin se pueden poner links a otros

documentos y codificacin para caracteres especiales.
El navegador, por defecto, elimina varios espacios en blanco y los convierte en

uno solo. Si lo que se desea es separar una palabra de otra ms de un espacio,
se puede recurrir a una instruccin especial que le indica esto al navegador,
pero hay que darla codificada; funciona como un avance de carro, y aunque en
pantalla cumple su objetivo, cuando se imprime la pgina, no todas las
impresoras son capaces de interpretarlo correctamente.
Se escribe: y como alias se utiliza:
25

texto texto texto texto
Se ve as:
texto texto
texto texto
Otros efectos en el texto

Una o varias lneas de texto, pueden estar centradas respecto a los mrgenes
de la ventana. Esto afecta slo al texto que hay entre <CENTER> y
</CENTER>, pero no a todo el prrafo. Por ejemplo:
<CENTER>texto centrado texto centrado</CENTER>
Se ver:
texto texto texto texto texto texto texto texto texto txto texto texto texto texto texto texto
texto
texto centrado texto centrado
texto texto texto texto texto texto texto texto texto txto texto texto texto texto texto texto
texto
Esto, adems , se puede aplicar a una tabla, una imagen o cualquier otra cosa.
Quedan algunos otros elementos que modifican el aspecto del texto.
Texto en negrita:
<B>Texto en negrita</B>
Texto realzado:
<STRONG>Texto realzado</STRONG>
Texto en itlica:
<I>Texto en itlica</I>
Texto con nfasis:

<EM>Texto con nfasis</EM>
Texto ejemplo de cdigo:
<CODE>Texto ejemplo de cdigo</CODE>
Texto teletipo:
<TT>Texto teletipo</TT>
Texto subrayado:
26

<U>Texto subrayado</U>
Texto tachado:
<STRIKE>Texto tachado</STRIKE>
Texto de direccin:
<ADDRESS>Texto de direccin</ADDRESS>
Texto intermitente
<BLINK>Texto intermitente</BLINK>
Texto superndice
Texto normal
<SUP>Texto Superndice</SUP>
Texto subndiceTexto
nomal
<SUB>Texto Subndice</SUB>
Texto grande
<BIG>Texto grande</BIG>
Texto pequeo
<SMALL>Texto pequeo</SMALL>
En los navegadores de ltima generacin se ha implementado un efecto que

permite incluir explicaciones ocultas que aparecen al pasar el ratn por encima
(sin pulsar), pero sin cambiar de pgina ni abrir ninguna ventana nueva.
<ACRONYM TITLE="Hyper Text Markup Language">HTML</ACRONYM>
Al pasar el ratn sobre la palabra HTML, se desvela su significado: HTML
27

Listas y mens
Hay elementos que permiten crear texto con varios formatos de listado: Estos
pueden ser :
ordenados <OL> (se refiere a numerados, no ordenados por algun

criterio),
desordenados <UL> (no numerados),
directorios <DIR>,
menu <MENU> y
listados de definicin <DL>.
Esto es una lista ordenada (numerada):

1. Primera linea
2. Segunda linea
Se escribe:
<OL>
<LI>Primera linea
<LI>Segunda linea
</OL>
Fijarse en que los elementos <LI> no necesitan cierre. Terminan cuando

aparece otro igual o se cierra la lista. Puede ser conveniente poner el cierre
</LI> si se van a aplicar instrucciones de estilo.
Esto es una lista desordenada ( no numerada):
Primera linea
segunda linea
Se escribe:
<UL>
<LI>Primera linea
<LI>Segunda linea
</UL>
En este caso los nmeros han sido sustituidos por unos puntos gruesos. Esa es
la apariencia por defecto; se puede cambiar usando el atributo TYPE con tres
valores (el valor por defecto es DISC). Con el valor CIRCLE se ver:
o
o
Primera linea
segunda linea
28

Se escribe:
<UL TYPE=CIRCLE>
<LI>Primera linea
<LI>Segunda linea
</UL>
Tambin puede usarse el valor SQUARE. As:
Primera linea
segunda linea
Se escribe:
<UL TYPE=SQUARE>
<LI>Primera linea
<LI>Segunda linea
</UL>
Las listas ordenadas no slo se pueden ordenar con nmeros. Tambin se

pueden utilizar letras y numeracin romana tanto en maysculas como
minsculas.
Para esto se utiliza el atributo TYPE del elemento <OL> con los siguientes
valores: TYPE=1 (por defecto) para nmeros, TYPE=A para letras maysculas,
TYPE=a para letras minsculas, TYPE=I para numeracin romana en
maysculas y TYPE=i para numeracin romana en minsculas.
Esto es una lista ordenada con letras maysculas:
A.
B.
C.
D.
Primera linea
Segunda linea
Tercera linea
Cuarta linea
Se escribe:
<OL TYPE=A>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>
29

Esto es una lista ordenada con letras minsculas:
a.
b.
c.
d.
Primera linea
Segunda linea
Tercera linea
Cuarta linea
Se escribe:
<OL TYPE=a>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>
Esto es una lista ordenada con numeracin romana en maysculas:

I.
II.
III.
IV.
Primera linea
Segunda linea
Tercera linea
Cuarta linea
Se escribe:
<OL TYPE=I>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>
Esto es una lista ordenada con numeracin romana en minsculas:

i.
ii.
iii.
iv.
Primera linea
Segunda linea
Tercera linea
Cuarta linea
Se escribe:
<OL TYPE=i>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>
30

En algunos casos puede interesar que la lista no comience por el nmero 1 (por
ejemplo si es una lista que continua en otra pgina). Se puede conseguir con el
atributo START combinado con TYPE.
Esto es una lista ordenada con letras maysculas y que comienza por la E:
E.
F.
G.
H.
Primera linea
Segunda linea
Tercera linea
Cuarta linea
Se escribe:
<OL TYPE=A START=5>
<LI>Primera linea
<LI>Segunda linea
<LI>Tercera linea
<LI>Cuarta linea
</OL>
El nmero que se pone en el atributo START indica en que nmero o letra

comenzar la lista. la E es la quinta letra.
Esto es un men:
Primera linea
Segunda linea
Se escribe:
<MENU>
<LI>Primera linea
<LI>Segunda linea
</MENU>
La diferencia entre un men y una lista desordenada, es que las lneas en la lista
desordenada comienzan en el margen izquierdo y las del men unas posiciones
ms a la derecha (aunque eso depende del visualizador, con Netscape se ven
igual).
31

Esto es un directorio:
Primera linea
Segunda linea
Se escribe:
<DIR>
<LI>Primera linea
<LI>Segunda linea
</DIR>
Esto es una lista de definicion:

Primera linea
Segunda linea
Se escribe:
<DL>
<DT>Primera linea
<DD>Segunda linea
</DL>
Fijarse que ahora en lugar del elemento <LI> se utiliza <DT> y <DD>, y como
tipo <DL>. Estos tres nuevos elementos tambin se pueden usar con cualquiera
de los anteriores tipos de lista, alterando por completo su apariencia.
32

Ejemplos de listas y mens

Desordenadas
Desordenada simple con marcas
Linea de texto 1
Linea de texto 2
Linea de texto 3
Se escribe:
<UL>
<LI>Linea de texto 1
</UL>
Desordenada simple sin marcas. Comienzo en margen izquierdo

Linea de texto 1
Linea de texto 2
Linea de texto 3
Se escribe:
<DL>
<DT>Linea de texto 1
</DL>
Desordenada simple sin marcas. Comienzo una posicin a la derecha

Linea de texto 1
Linea de texto 2
Linea de texto 3
Se escribe:
<UL>
</UL>
Desordenada simple con marcas. Comienzo una posicin a la derecha
Linea de texto 1
Linea de texto 2
Linea de texto 3
Se escribe:
33

<UL>
</UL>
Desordenada simple sin marcas. Comienzo dos posiciones a la derecha

Linea de texto 1
Linea de texto 2
Linea de texto 3
Se escribe:
<UL>
<DD>Linea de texto 1
</UL>
Desordenada simple sin marcas. Comienzo tres posiciones a la derecha

Linea de texto 1
Linea de texto 2
Linea de texto 3
Se escribe:
<UL>
<UL>
</UL>
</UL>
Desordenada simple con marcas. Comienzo dos posiciones a la derecha

o
o
o
Linea de texto 1
Linea de texto 2
Linea de texto 3
Se escribe:
<UL>
<UL TYPE=DISC>
</UL>
</UL>
Desordenada con 4 niveles sin marcas

Linea de texto 1
Linea de texto 2
Linea de texto 3
Linea de texto 3.1
Linea de texto 3.2
34

Linea de texto 3.2.1
Linea de texto 3.2.2.1
Linea 4 de texto
Se escribe:
<DL>
<DL>
<DT>Linea de texto 3.1
<DT>Linea de texto 3.2
<DL>
<DT>Linea de texto 3.2.1
<DT>Linea de texto 3.2.2
<DL>
<DT>Linea de texto 3.2.2.1
<DT>Linea de texto 3.2.2.2
</DL>
</DL>
</DL>
<DT>Linea 4 de texto
</DL>
Desordenada con 4 niveles con marcas
Linea de texto 1
Linea de texto 2
Linea de texto 3
o Linea de texto 3.1
o Linea de texto 3.2
Linea 4 de texto
Se escribe:
<UL>
<UL>
<LI>Linea de texto 3.1
<UL>
<LI>Linea de texto 3.2.1
<UL>
<LI>Linea de texto 3.2.2.1
35

</UL>
</UL>
</UL>
<LI>Linea 4 de texto
</UL>
Ordenadas
Ordenada simple
1. Linea de texto 1
2. Linea de texto 2
3. Linea de texto 3
Se escribe:
<OL>
</OL>
Ordenada con 4 niveles, todos ordenados

1. Linea de texto 1
2. Linea de texto 2
3. Linea de texto 3
1. Linea de texto 3.1
1. Linea de texto 3.2.1
2. Linea de texto 3.2.2
1. Linea de texto 3.2.2.1
2. Linea de texto 3.2.2.2
4. Linea de texto 4
Se escribe:
<OL>
<OL>
<OL>
<OL>
36

</OL>
</OL>
</OL>
</OL>
Ordenada con 4 niveles, todos ordenados. Numeracin romana en maysculas y

minsculas
I.
II.
III.
IV.
Linea de texto 1
Linea de texto 2
Linea de texto 3
i.
Linea de texto 3.1
ii. Linea de texto 3.2
i.
ii.
i.
ii. Linea de texto 3.2.2.2
Linea de texto 4
Se escribe:
<OL TYPE=I>
<OL TYPE=i>
<OL TYPE=i>
<OL TYPE=i>
</OL>
</OL>
</OL>
</OL>
Ordenada con 4 niveles, 2 desordenados con marcas

1. Linea de texto 1
2. Linea de texto 2
3. Linea de texto 3
37


4. Linea de texto 4
Se escribe:
<OL>
<OL>
<UL TYPE=SQUARE>
<UL TYPE=CIRCLE>
</UL>
</UL>
</OL>
</OL>
Ordenada con 4 niveles, 2 desordenados sin marcas

1. Linea de texto 1
2. Linea de texto 2
3. Linea de texto 3
4. Linea de texto 4
Se escribe:
<OL>
<OL>
<DL>
<DD>Linea de texto 3.2.1
<DD>Linea de texto 3.2.2
<DL>
<DD>Linea de texto 3.2.2.1
38

<DD>Linea de texto 3.2.2.2
</DL>
</DL>
</OL>
</OL>
39

Tablas.
Las tablas son sin duda uno de los elementos ms potentes del HTML. Con
pocos elementos se pueden conseguir efectos espectaculares.
En el interior de las celdas de una tabla, que pueden ser con borde visible o
invisible, se puede poner cualquier cosa: texto de cualquier tamao y color,
imgenes, links...
Por supuesto, adems de permitir cualquier contenido, tienen sus propios
atributos de alineacin tanto horizontal como vertical, y atributos de
dimensionado.
Por defecto se autodimensionan, es decir, se adaptan en tamao a su contenido,
pero tambin es posible definirlo de forma fija. Las tablas han sido utilizadas
largo tiempo para maquetar el contenido de las pginas, y aunque las nuevas
tendencias aconsejen hacer esto con bloques (capas XHTML), no es un
elemento que vaya a desaparecer, y es mucho ms sencillo de utilizar.
El elemento bsico de definicin de tabla es <TABLE> </TABLE> y en su
interior se disponen los sub elementos <TR> para definir una fila (Row) <TH>
para definir una cabecera (Header) <TD> para definir una celda de datos (Data).
Estos sub elementos tambin han de llevar sus correspondientes cierres: </TR>
</TH> </TD>.
Una cabecera <TH> es lo mismo que una celda de datos <TD> pero de forma
automtica el texto de su contenido recibe los atributos de negrita y centrado.
Slo es posible definirlas al principio de las filas, de las columnas o de ambas a
la vez.
He aqu una tabla-resumen de los elementos utilizados y los atributos que
admite cada uno:
TABLE TR TD TH CAPTION
BORDER
BORDERCOLOR
ROWSPAN
COLSPAN
ALIGN
VALIGN
WIDTH
HEIGTH
40

CELLPADDING
CELLSPACING
NOWRAP
X
X X
Resumen de tablas
EVENTS
Significado de cada atributo:
BORDER Indica el ancho de los bordes de la tabla. Se mide en pxels. Si no se

escribe este atributo, es equivalente a BORDER=0 (por defecto).
BORDERCOLOR Establece el color de los bordes de la tabla. No funciona
igual en todos los navegadores.
CELLSPACING Indica el nmero de pxels que separan una celda de otra.
Aunque pueda parecerlo, no hace lo mismo que BORDER. Su valor por defecto
es 2.
CELLPADDING Indica los pxels de separacin entre el borde de la celda y su
contenido. Su valor por defecto es 1.
WIDTH Segn donde se escriba, sirve para controlar el ancho de toda la tabla o
de sus columnas. Si se incluye en <TABLE> puede indicar el tamao tanto en
pxels como en porcentaje respecto al ancho de la pantalla.
ALIGN Indica la alineacin horizontal de los datos dentro de las celdas. Puede
tener tres valores: LEFT (izquierda), RIGHT (derecha) y CENTER (centro).
VALIGN Indica la alineacin vertical de los datos dentro de las celdas. Puede
tener tres valores: TOP (arriba), BOTTOM (abajo) y MIDDLE (centro).
ROWSPAN Se utiliza en la definicin de una celda (<TD>) o cabecera (<TH>)
para indicar que su anchura o altura son equivalentes a un determinado nmero de
filas.
COLSPAN Se utiliza en la definicin de una celda (<TD>) o cabecera (<TH>)
para indicar que su anchura o altura son equivalentes a un determinado nmero de
columnas.
NOWRAP Para impedir que las lneas de texto dentro de una celda se trunquen
en los espacios en blanco.
EVENTS Se pueden capturar todos los eventos tpicos de los navegadores en
cualquiera de las partes de una tabla. Para ello es necesario JavaScript, y no es
compatible con todos los navegadores.
Por ejemplo:
<TABLE BORDER onMouseOver="javascript:alert('Aviso')">
... </TABLE>
Recientemente se han implementado al elemento <TABLE> algunos atributos
muy interesantes que permiten definir qu bordes o lneas de la tabla se
mostrarn:
41

Este atributo sirve para definir qu bordes del marco de la tabla sern visibles:
<TABLE FRAME="valor"> ... </TABLE> donde valor puede ser:
void - Ningn lado (por defecto).

above - Slo el borde superior
below - Slo el borde inferior.
hsides - Slo los bordes superior e inferior.
vsides - Slo los lados derecho e izquierdo.
lhs - Slo el lado izquierdo.
rhs - Slo el lado derecho.
box - Los cuatro lados.
border - Los cuatro lados (no es lo mismo que el ya conocido)
Y este otro sirve para definir qu bordes de la tabla sern visibles:

<TABLE RULES="valor"> ... </TABLE> donde valor puede ser:
none - Ninguna lnea de divisin (por defecto).

groups - Slo aparecen lneas de divisin entre grupos de filas y grupos de
columnas.
cols - Slo aparecern lneas de divisin entre filas.
rows - Slo aparece lneas de divisin entre columnas.
Estos ltimos atributos no funcionan igual en todos los navegadores, y no

funcionan en absoluto si no son de la ltima generacin. Segn el navegador de
que se trate, puede que haya que combinar ms de un atributo para conseguir el
efecto deseado. Lo mejor es hacer pruebas con algunas versiones para
asegurarse.
Ejemplos de tablas
Tabla bsica de 3x2
ABC
DE F
<TABLE BORDER>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>
42

Dos ejemplos de lnea expandida <ROWSPAN>
Item 1
Item 3
Item 2
Item 4
Item 5
<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD ROWSPAN=2>Item 2</TD>
<TD>Item 3</TD>
</TR>
<TR>
<TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>
Item 1
Item 2 Item 3 Item 4

<TABLE BORDER>
<TR>
<TD ROWSPAN=2>Item 1</TD>
<TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
<TR>
</TR>
</TABLE>
Ejemplo de columna expandida <COLSPAN>

Item 1 Item 2
<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD COLSPAN=2>Item 2</TD>
</TR>
<TR>
</TR>
</TABLE>
Tabla con cabeceras <TH>

Head1 Head2 Head3
A
<TABLE BORDER>
<TR>
<TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH>
</TR>
<TR>
43

</TR>
<TR>
</TR>
</TABLE>
Combinacin de columna expandida y cabecera

Head1 Head2
A B C D
E
F G H
<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>
Combinacin de cabeceras mltiples y columnas expandidas

Head1
Head2
Head 3 Head 4 Head 5 Head 6
A
<TABLE BORDER>
<TR>
</TR>
<TR>
<TH>Head 3</TH> <TH>Head 4</TH>
<TH>Head 5</TH> <TH>Head 6</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>
Cabeceras laterales
Head1 Item 1 Item 2 Item 3
44

<TABLE BORDER>
<TR><TH>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD></TR>
<TR><TH>Head2</TH>
<TR><TH>Head3</TH>
</TABLE>
Combinacin de cabeceras laterales y lneas expandidas

Item 1 Item 2 Item 3 Item 4
Head1
Item 5 Item 6 Item 7 Item 8
Head2 Item 9 Item 10 Item 3 Item 11
<TABLE BORDER>
<TR><TH ROWSPAN=2>Head1</TH>
<TD>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item
4</TD>
</TR>
<TR><TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> <TD>Item
8</TD>
</TR>
<TR><TH>Head2</TH>
<TD>Item 9</TD> <TD>Item 10</TD> <TD>Item 3</TD> <TD>Item
11</TD>
</TR>
</TABLE>
Combinacin de cabeceras superiores y laterales. Tabla centrada. Contenidos

centrados. Ttulo al pie.
TABLE TR TD TH CAPTION
BORDER
ROWSPAN
COLSPAN
ALIGN
VALIGN
WIDTH
HEIGTH
CELLPADDING
X
- CELLSPACING
Resumen de tablas
<CENTER>
<TABLE BORDER>
<CAPTION ALIGN=bottom>Resumen de tablas</CAPTION>
<TR>
45

<TD><TH>TABLE</TH><TH>TR</TH><TH>TD</TH><TH>TH</TH><TH>CAPTION</TH></TD
>
</TR>
<TR ALIGN=CENTER>
<TH>BORDER</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>ROWSPAN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>X</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>COLSPAN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>X</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>ALIGN</TH><TD>-</TD><TD>X</TD><TD>X</TD><TD>X</TD><TD>X</TD>
</TR>
<TR ALIGN=CENTER>
<TH>VALIGN</TH><TD>-</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>WIDTH</TH><TD>X</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>HEIGTH</TH><TD>X</TD><TD>-</TD><TD>X</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>CELLPADDING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD>
</TR>
<TR ALIGN=CENTER>
<TH>CELLSPACING</TH><TD>X</TD><TD>-</TD><TD>-</TD><TD>-</TD><TD>-</TD>
</TR>
</TABLE>
</CENTER>
Ejemplo con todos los elementos y parmetros

Media
Altura Peso
Sexo
Hombres 1.9
Mujeres 1.7
85
60
<TABLE BORDER>
<TR>
<TD><TH ROWSPAN=2></TH>
<TH COLSPAN=2>Media</TH></TD>
</TR>
<TR>
<TD><TH>Altura</TH><TH>Peso</TH></TD>
</TR>
<TR>
<TH ROWSPAN=2>Sexo</TH>
46

<TH>Hombres</TH><TD>1.9</TD><TD>85</TD>
</TR>
<TR>
</TR>
</TABLE>
<TH>Mujeres</TH><TD>1.7</TD><TD>60</TD>
Otro ejemplo de lnea y columna expandidos

12
A
34
C D
<TABLE BORDER>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
<TR>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD>
<TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD>
</TR>
<TR>
</TR>
</TABLE>
Ajustando mrgenes y bordes

Tabla sin bordes
Item 1
Item 3
Item 2
Item 4
Item 5
<TABLE>
<TR>
<TD>Item 1</TD> <TD ROWSPAN=2>Item 2</TD> <TD>Item
3</TD>
</TR>
<TR>
</TR>
</TABLE>
Aqu no es visible el borde de las celdas debido a que se ha omitido el atributo BORDER
del elemento <TABLE>. La omisin o no es equivalente a parametrizarlo; se consigue lo
mismo as: BORDER=0, y como ya habrs deducido, el valor de BORDER puede ser
variable. Mira el siguiente ejemplo:
Tabla con borde de 10 puntos
47

Item 1 Item 2
Item 3 Item 4
<TABLE BORDER=10>
<TR>
<TD>Item 1</TD> <TD> Item 2</TD>
</TR>
<TR>
</TR>
</TABLE>
Dimensionado de celdas
A
<TABLE BORDER CELLPADDING=10 CELLSPACING=0>

<TR>
</TR>
<TR>
</TR>
</TABLE>
A B C
D E F
<TR>
</TR>
<TR>
</TR>
</TABLE>

<TR>
</TR>
<TR>
</TR>
</TABLE>
48

<TABLE BORDER=5 CELLPADDING=10 CELLSPACING=10>

<TR>
</TR>
<TR>
</TR>
</TABLE>
Alineacin, ttulos y subtablas

Lneas mltiples en un tabla
Enero
Febrero
Celda 1 Celda 2
Celda 4
Marzo
Otra celda
Celda 3
y esta
Celda 6
es la celda 5
<TABLE BORDER>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
<TD>Otra celda<br> Celda 3</TD>
</TR>
<TR>
<TD>Celda 4</TD>
<TD>y esta<br>es la celda 5</TD>
<TD>Celda 6</TD>
</TR>
</TABLE>
Alineado horizontal del contenido de las celdas. ALIGN=LEFT | RIGHT | CENTER

Se puede aplicar individualmente a una celda o a toda la lnea
49

Enero
Febrero
Marzo
Todas alineadas al centro
Celda 2
Otra celda
Celda 3
Alineado a la derecha Alineado al centro
Por defecto
Alineado a la izquierda
<TABLE BORDER>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR ALIGN=center>
<TD>Todas alineadas al centro</TD>
<TD>Celda 2</TD>
<TD>Otra celda<br> Celda 3</TD>
</TR>
<TR>
<TD ALIGN=right>Alineado a la derecha</TD>
<TD ALIGN=center>Alineado al centro</TD>
<TD>Por defecto<br>Alineado a la izquierdat</TD>
</TR>
</TABLE>
Alineado vertical del contenido de las celdas. VALIGN=TOP | BOTTOM | MIDDLE

Se puede aplicar individualmente a una celda o a toda la columna
Enero
Febrero
Todas alineadas arriba Esta es la

Celda 2
Alineado arriba
Marzo
Celda 3
Por defecto
Alineado abajo Alineado al centro
<TABLE BORDER>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR VALIGN=top>
<TD>Todas alineadas arriba</TD>
<TD>Esta es la<br>Celda 2</TD>
<TD>Celda 3</TD>
</TR>
<TR>
<TD VALIGN=top>Alineado arriba</TD>
<TD VALIGN=bottom>Alineado abajo</TD>
<TD>Por defecto<br>Alineado al centro</TD>
</TR>
</TABLE>
50

Titulando las tablas. CAPTION=TOP | BOTTOM
Ttulo arriba
Enero Febrero Marzo
Celda 1 Celda 2 Celda 3
<TABLE BORDER>
<CAPTION ALIGN=top>Titulo arriba</CAPTION>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
<TD>Celda 3</TD>
</TR>
</TABLE>
Enero Febrero Marzo

Celda 1 Celda 2 Celda 3
Ttulo abajo
<TABLE BORDER>
<CAPTION ALIGN=bottom>Titulo abajo</CAPTION>
<TR>
<TH>Enero</TH>
<TH>Febrero</TH>
<TH>Marzo</TH>
</TR>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
<TD>Celda 3</TD>
</TR>
</TABLE>
Anidando tablas. La tabla ABCD dentro de la tabla 12345

3
12 AB
C D
456
<TABLE BORDER>
<TR> 
<TD>1</TD>
<TD>2</TD>
<TD>3
<TABLE BORDER>
<TR> 
51

<TD>A</TD>
<TD>B</TD>
</TR>
<TR> 
<TD>C</TD>
<TD>D</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR> 
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
</TABLE>
Longitud horizontal de las tablas

Tabla que ocupa el 50 % de la pantalla, y cuyas celdas estn dimensionadas al 50 %
cada una respecto a la longitud total de la tabla
Width=50%
Width=50%
Celda 3
Celda 4
<TABLE BORDER WIDTH="50%">

<TR><TD>Width=50%</TD><TD>Width=50%</TD>
</TR>
<TR><TD>Celda 3</TD><TD>Celda 4</TD>
</TR>
</TABLE>
Tabla dimensionada al 50 % de la pantalla, celdas sin dimensionar. Obsvese que se

alargan ms de lo que lo haran sin forzar la longitud de la tabla
Celda 1
Celda 3

<TR><TD>Celda 1</TD><TD>2</TD>
</TR>
<TR><TD>Celda 3</TD><TD>4</TD>
</TR>
</TABLE>
El mismo efecto anterior, pero con la tabla dimensionada al 100 %

WIDTH=100%
Celda 2
Celda 4
52

<TR><TD>WIDTH=100%</TD><TD>Celda 2</TD>
</TR>
<TR><TD>3</TD><TD>Celda 4</TD>
</TR>
</TABLE>
Centrado de una tabla en la pgina

A
B
D
<CENTER>
<TR>
</TR>
<TR>
</TR>
</TABLE>
</CENTER>
Tabla forzada al 50 % de la pgina, conteniendo otra tabla anidada en una de sus

celdas. La segunda tabla est forzada a ocupar el 100 % de la celda receptora.
Item 1
Item 2
Item A
Item B
Item 4

<TR><TD>Item 1</TD><TD>Item 2</TD>
</TR>
<TR><TD>
<TABLE BORDER WIDTH=100%>
<TR><TD>Item A</TD><TD>Item B</TD>
</TR>
</TABLE>
</TD>
<TD>Item 4</TD>
</TR>
</TABLE>
Longitud vertical de las tablas

Tabla que ocupa el 50 % horizontal de la pantalla, y el 25 % vertical. HEIGHT=25%
HEIGHT=25%
Item 2
<TABLE BORDER WIDTH="50%" HEIGHT="25%">

<TR><TD>HEIGHT=15%</TD> <TD>Item 2</TD>
</TR>
53

<TR><TD>3</TD><TD>4</TD>
</TR>
</TABLE>
Fondos de colores o grficos en las tablas

Una tabla de cuatro celdas. Cada una de un color.
Texto ROJO Texto VERDE
Texto AZUL Texto AMARILLO
<TABLE BORDER>
<TR><TD BGCOLOR="RED">Texto ROJO</TD>
<TD BGCOLOR="green">Texto VERDE</TD>
</TR>
<TR><TD BGCOLOR="blue">Texto AZUL</TD>
<TD BGCOLOR="YELLOW">Texto AMARILLO</TD>
</TR>
</TABLE>
En este ejemplo se ha dado color individualmente a cada celda. El atributo

BGCOLOR="color" puede utilizarse en cada elemento de la tabla para efectos globales.
Por ejemplo, para hacer toda la tabla en rojo, slo sera necesario escribir:
<TABLE BORDER BGCOLOR="red">
....
....
</TABLE>
Para toda la lnea:

<TABLE BORDER>
<TR BGCOLOR="red"><TD> texto </TD></TR>
....
</TABLE>
Tambin se puede usar una imagen como fondo de toda la tabla:

<TABLE BORDER BACKGROUND="yellow_r.gif">
....
....
</TABLE>
De slo una celda:

<TABLE BORDER>
<TR><TD BACKGROUND="yellow_r.gif"> texto </TD></TR>
....
</TABLE>
O de toda la fila:
<TABLE BORDER >
<TR BACKGROUND="yellow_r.gif"><TD> texto </TD></TR>
....
</TABLE>
Bordes de colores en las tablas

54

Se puede cambiar el color de los bordes de una tabla, aunque este atributo no funciona
igual en todos los navegadores, ya que en el IE el color afecta a todas las lneas de la
tabla, y en Mozilla solamente a los bordes exteriores. Por ejemplo:
Ejemplo de bordes de color rojo
Ejemplo de bordes de color rojo
<TABLE BORDER=2 bordercolor="red" >
<TR><TD> Ejemplo de bordes</TD><TD> de color rojo </TD></TR>
<TR><TD> Ejemplo de bordes</TD><TD> de color rojo </TD></TR>
</TABLE>
Atributos de ltima generacin

Tabla que solamente muestra los cuatro bordes
ABC
DEF
<TABLE FRAME="border" RULES="none">
<TR>
</TR>
<TR>
</TR>
</TABLE>
Tabla que solamente muestra los bordes superior e inferior

ABC
DEF
<TABLE FRAME="hsides" RULES="none">
<TR>
</TR>
<TR>
</TR>
</TABLE>
Tabla que solamente muestra los bordes izquierdo y derecho

ABC
DEF
<TABLE FRAME="vsides" RULES="none">
<TR>
</TR>
<TR>
</TR>
</TABLE>
55

Tabla que solamente muestra las lneas de divisin entre columnas
ABC
DEF
<TABLE FRAME="void" RULES="cols">
<TR>
</TR>
<TR>
</TR>
</TABLE>
Tabla que solamente muestra las lneas de divisin entre filas

ABC
DEF
<TABLE FRAME="void" RULES="rows">
<TR>
</TR>
<TR>
</TR>
</TABLE>
Ejemplo de tabla con agrupamientos de columnas y filas

Ejemplo de grupos de columnas y lneas
Columna1 Columna2 Columna3 Columna4 Columna5 Columna6 Columna7
C1L1
C2L1
C3L1
C4L1
C5L1
C6L1
C7L1
C1L2
C2L2
C3L2
C4L2
C5L2
C6L2
C7L2
C1L3
C2L3
C3L3
C4L3
C5L3
C6L3
C7L3
C1L4
C2L4
C3L4
C4L4
C5L4
C6L4
C7L4
C1L5
C2L5
C3L5
C4L5
C5L5
C6L5
C7L5
C1L6
C2L6
C3L6
C4L6
C5L6
C6L6
C7L6
C1L7
C2L7
C3L7
C4L7
C5L7
C6L7
C7L7
<TABLE border="1" frame="border" rules="groups">

<CAPTION>Ejemplo de grupos de columnas y lneas</CAPTION>
<COLGROUP align="center">
<COLGROUP align="left">
<COLGROUP align="center" span="2">
<THEAD valign="top">
<TR>
56

<TH>Columna1</TH>
<TH>Columna2</TH>
<TH>Columna3</TH>
<TH>Columna4</TH>
<TH>Columna5</TH>
<TH>Columna6</TH>
<TH>Columna7</TH></TR>
<TBODY>
<TR><TD>C1L1<TD>C2L1<TD>C3L1<TD>C4L1<TD>C5L1<TD>C6L1<TD>C7L1</TR>
<TBODY>
<TFOOT>
</TABLE>
Como se puede ver, existe un agrupamiento desde la lnea 1 a la 4, y otro de la

5 a la 6. A su vez, las columnas 3 y 4 forman un grupo, y la 5, 6 y 7 otro.
Los dos agrupamientos de columnas se definen con las instrucciones:
Hay cuatro grupos de filas: La que aparece debajo de las cabeceras la escribe
<THEAD> Las dos lneas que separan los grupos de filas centrales las producen
las dos instrucciones <TBODY>, Y la ltima la produce <TFOOT>. Por supuesto,
no es obligado que esten todas, se puede poner solamente las que se
necesiten. Todo esto funciona solamente si en la definicin de la tabla se incluye
el atributo rules="groups"
Tablas con efectos compatibles con todos los navegadores...

Como ya se ha podido ver, muchos de los efectos de ltima generacin
mostrados no funcionan igual, o no funcionan en absoluto con todos los
navegadores. Qu hacer entonces para conseguir tablas cuyas lneas de
bordes se vean siempre bien? Pues la nica solucin es usar una tabla sin
bordes. Pero si utilizando atributos de tabla para poner lneas de bordes donde
queramos hay problemas con algunos navegadores, la solucin es utilizar otros
recursos del HTML que sean admitidos por todos. No es ninguna solucin
mgica: solamente tienes que crear un grfico con un punto (preferiblemente
cuadrado) del color y grosor que se quiera dar a las lneas... y listo.
Supongamos que queremos conseguir con una tabla representar un recuadro
con bordes rojos. Para ello, utilizando cualquier editor de grficos creamos un
fichero que contenga un punto de color rojo. Solamente uno, ser casi invisible.
No se necesita ms. Le llamaremos rojo.gif
57

Ejemplo de recuadro con ngulos rectos.

Y este sera el cdigo necesario:
<table width="300" height="50"
cellspacing="0" cellpadding="0" border="0" bgcolor="#6a7da5"
align="center">
<tr>
<td rowspan="3" width="1" height="50">
<img src="rojo.gif" width="1px" height="50" border="0"
alt=""></td>
<td colspan="4" height="1">
<img src="rojo.gif" width="300" height="1" border="0"
alt=""></td>
<td rowspan="3" width="1">
<img src="rojo.gif" width="1px" height="50" border="0"
alt=""></td>
</tr>
<tr>
<td colspan="4" align="center" height="48">
<font color="white"><b>Ejemplo de recuadro con ngulos
rectos.</b></font></td>
</tr>
<tr>
<td colspan="4" height="1">
<img src="rojo.gif" width="300" height="1" border="0"
alt=""></td>
</tr>
</table>
Como se puede ver, el truco consiste en definir celdas alrededor de la celda que
lleva el texto. Estas celdas que rodean a la principal solamente contienen el
fichero grfico con el punto. Para conseguir que aparezcan las lneas, slo hay
que "estirar" el punto contenido en nuestro fichero grfico rojo.gif. Esto nos
permite "dibujar" las lneas que se quieran y donde se quieran, sin problemas de
compatibilidad, ya que estos atributos del elemento <IMG> son completamente
estandarizados (por lo menos de momento). Fjarse en que adems de atributos
propios del elemento IMG tambin se utiliza una instruccin de estilo:
width="1px" para asegurar un grosor mnimo de la lnea. Este es el aspecto de
la misma tabla con los bordes visibles:
Vertical
izquierda
Horizontal arriba
Ejemplo de recuadro
con ngulos rectos.
Horizontal abajo
--------------------
58
Vertical
derecha

Utilizando una tcnica parecida, tambin se pueden conseguir recuadros con las
esquinas redondeadas. Al igual que en el anterior ejemplo, es necesario tener un
grfico previamente, pero este dar algo ms de trabajo. Con cualquier editor de
grficos (el "Paint" de Windows, por ejemplo) se genera un crculo del color que
se quiera, y con el borde transparente o de otro color. A continuacin lo cortas
en cuatro porciones, como una tarta, y guardas cada trozo con un nombre
cualquiera, por ejemplo, angulo1, angulo2, etc. As
Recuadro con ngulos redondeados
Y este es el cdigo necesario:

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#DDE0FC" width="20"><img src="angulo1.gif"
height="20">
<td bgcolor="#DDE0FC">
height="20">
</tr>
<tr>
<td bgcolor="#DDE0FC" width="20">
<td bgcolor="#DDE0FC">Recuadro con ngulos redondeados
<td bgcolor="#DDE0FC" width="20">
</tr>
<tr>
height="20">
<td bgcolor="#DDE0FC">
<td bgcolor="#E5E7FD" width="20"><img src="angulo3.gif"
height="20">
</tr>
</table>
59
width="20"
width="20"
width="20"
width="20"

Cdigos hexadecimales de color

Estos cdigos de color se pueden utilizar como valor de atributo en los
elementos <FONT COLOR> y <BODY BGCOLOR FGCOLOR TEXT LINK
VLINK ALINK>. Algunos no funcionarn en ciertos visualizadores, as como si
Windows no est configurado con 256 colores al menos.
La codificacin de estos colores est basada en mezclas cromticas RGB (RED
GREEN BLUE), es decir, se mezclan ciertas cantidades de los tres colores
bsicos (rojo verde y azul), para conseguir el color deseado.
La cantidad de cada color est definida por el cdigo que se utilice, que tiene
seis dgitos en hexadecimal. Si se corta en 3 grupos de dos de izquierda a
derecha, se obtendra la cantidad (en hexadecimal) de cada color.
La sintaxis para cambiar el fondo de la pgina (background) a color rojo es:
<BODY BGCOLOR=#FF0000>.
Lista de cdigos RGB

White rgb=#FFFFFF
Red rgb=#FF0000
Green rgb=#00FF00
Blue rgb=#0000FF
Magenta rgb=#FF00FF
Cyan rgb=#00FFFF
Yellow rgb=#FFFF00
Black rgb=#000000
Aquamarine rgb=#70DB93
Baker's Chocolate rgb=#5C3317
Blue Violet rgb=#9F5F9F
Brass rgb=#B5A642
Bright Gold rgb=#D9D919
Brown rgb=#A62A2A
Bronze rgb=#8C7853
Bronze II rgb=#A67D3D
Cadet Blue rgb=#5F9F9F
Cool Copper rgb=#D98719
Copper rgb=#B87333
Coral rgb=#FF7F00
Corn Flower Blue rgb=#42426F
Dark Brown rgb=#5C4033
Dark Green rgb=#2F4F2F
Dark Green Copper rgb=#4A766E
Dark Olive Green rgb=#4F4F2F
Dark Orchid rgb=#9932CD
60

Dark Purple rgb=#871F78
Dark Slate Blue rgb=#6B238E
Dark Slate Grey rgb=#2F4F4F
Dark Tan rgb=#97694F
Dark Turquoise rgb=#7093DB
Dark Wood rgb=#855E42
Dim Grey rgb=#545454
Dusty Rose rgb=#856363
Feldspar rgb=#D19275
Firebrick rgb=#8E2323
Forest Green rgb=#238E23
Gold rgb=#CD7F32
Goldenrod rgb=#DBDB70
Grey rgb=#C0C0C0
Green Copper rgb=#527F76
Green Yellow rgb=#93DB70
Hunter Green rgb=#215E21
Indian Red rgb=#4E2F2F
Khaki rgb=#9F9F5F
Light Blue rgb=#C0D9D9
Light Grey rgb=#A8A8A8
Light Steel Blue rgb=#8F8FBD
Light Wood rgb=#E9C2A6
Lime Green rgb=#32CD32
Mandarian Orange rgb=#E47833
Maroon rgb=#8E236B
Medium Aquamarine rgb=#32CD99
Medium Blue rgb=#3232CD
Medium Forest Green rgb=#6B8E23
Medium Goldenrod rgb=#EAEAAE
Medium Orchid rgb=#9370DB
Medium Sea Green rgb=#426F42
Medium Slate Blue rgb=#7F00FF
Medium Spring Green rgb=#7FFF00
Medium Turquoise rgb=#70DBDB
Medium Violet Red rgb=#DB7093
Medium Wood rgb=#A68064
Midnight Blue rgb=#2F2F4F
Navy Blue rgb=#23238E
Neon Blue rgb=#4D4DFF
Neon Pink rgb=#FF6EC7
New Midnight Blue rgb=#00009C
New Tan rgb=#EBC79E
Old Gold rgb=#CFB53B
Orange rgb=#FF7F00
Orange Red rgb=#FF2400
61

Orchid rgb=#DB70DB
Pale Green rgb=#8FBC8F
Pink rgb=#BC8F8F
Plum rgb=#EAADEA
Quartz rgb=#D9D9F3
Rich Blue rgb=#5959AB
Salmon rgb=#6F4242
Scarlet rgb=#8C1717
Sea Green rgb=#238E68
Semi-Sweet Chocolate rgb=#6B4226
Sienna rgb=#8E6B23
Silver rgb=#E6E8FA
Sky Blue rgb=#3299CC
Slate Blue rgb=#007FFF
Spicy Pink rgb=#FF1CAE
Spring Green rgb=#00FF7F
Steel Blue rgb=#236B8E
Summer Sky rgb=#38B0DE
Tan rgb=#DB9370
Thistle rgb=#D8BFD8
Turquoise rgb=#ADEAEA
Very Dark Brown rgb=#5C4033
Very Light Grey rgb=#CDCDCD
Violet rgb=#4F2F4F
Violet Red rgb=#CC3299
Wheat rgb=#D8D8BF
Yellow Green rgb=#99CC32
62

Por qu hay que usar cdigos?

Existen diversos sistemas operativos dentro del mundo de los ordenadores.
Estos sistemas no son otra cosa que unos programas especiales que se
ejecutan inmediatamente despus de encender el ordenador, y son los que se
encargan de darle "vida" a la mquina.
Junto con estos programas, los ordenadores cargan en memoria unas tablas
especiales que coinciden con los caracteres que tiene el teclado y algunos ms
que no estn en el mismo, pero que se pueden escribir en pantalla por otros
medios.
Estas tablas, desafortunadamente, no son siempre las mismas, y varan de un
sistema a otro, de una marca de ordenador a otra, y por supuesto, de un idioma
a otro. Por ejemplo, no se ven igual las letras con acentos desde un PC que
desde un MACintosh, o una terminal UNIX, si las escribimos directamente desde
el teclado.
Dado que el HTML pretende ser un lenguaje universal, y que una pgina debe
verse como su creador desea, sin importar si estamos ante un ordenador que
"habla" en ingls o en espaol, o que tiene tal o cual sistema operativo, se ha
creado una tabla de caracteres "conflictivos" (en realidad estn todos, pero
generalmente slo se usa para caracteres especiales) que se escriben con un
cdigo en lugar de pulsar la tecla que lo contiene directamente.
Por ejemplo, "" se escribir:
Ñ o bien Ñ
Esto habr que hacerlo con todos los caracteres que no sean las letras del
alfabeto (maysculas y minsculas), los nmeros y unos pocos signos, como el
punto, la coma, el guin y algunos otros. A este conjunto de caracteres, comn
para todos los sistemas, se le denomina cdigo ASCII, y desde luego hay que
codificar todas las letras acentuadas, ees, cedillas, etc., etc.
Como se puede ver, la tabla tiene una columna con el carcter deseado seguida
de su cdigo numrico en base decimal, una descripcin del carcter y despus
un nombre corto (una especie de alias) que para los ms habituales se llegan a
memorizar, y para cosas cortas, ayudan. No todos tienen ese nombre corto, y
esos hay que escribirlos con el cdigo numrico.
63

Tabla de cdigos de caracteres

Caracter
!
Cdigo
!
Descripcin
Cerrar exclamacin
Alias
--
"
"
Dobles comillas
--
#
Signo de nmero
--
$
Dlar
--
%
Tanto por ciento
--
‰
Tanto por mil
--
&
&
Ampersand
amp
'
'
Apstrofe
--
(
Cerrar parntesis
--
)
Abrir parntesis
--
*
Asterisco
--
+
Signo ms
--
,
Coma
--
-
Guin
--
.
Punto
--
/
Barra de divisin
--
0-9
0 - 9
Dgitos del al 0-9
--
:
Dos puntos
--
;
Punto y coma
--
<
<
Menor
--
<
<
Menor
lt
=
Igual
--
>
>
Mayor
--
>
>
Mayor
gt
?
Cerrar interrogacin
--
@
Arroba
--
A-Z
A - Z
Letras A-Z
--
[
Cerrar corchete (izquierdo)
--
\
Barra inversa
--
]
Abrir corchete
--
^
Circunflejo
--
64

_
_
Subrayado
--
`
Acento agudo
--
a-z
a - z
Letras a-z
--
{
Abrir llave
--
|
Barra vertical
--
}
Cerrar llave
--
~
Tilde
--

Espacio sin separacin
nbsp
¡
Abrir exclamacin
iexcl
¢
Centavo
cent
£
Libra Esterlina
pound
¤
Signo de divisa general
curren
¥
Yen
yen
¦
Barra vertical partida (pipe)
brvbar
§
Seccin
sect
¨
Diresis
uml
©
Copyright
copy
ª
Doa
ordf
«
Abrir comillas francesas
laquo
¬
No (smbolo lgico)
not

Guin dbil
shy
®
Registrado
reg
¯
Macrn
macr
°
Grados
deg
±
Ms-menos
plusmn
²
Dos superndice
sup2
³
Tres superndice
sup3
´
Acento agudo
acute
µ
Micro
micro
¶
Fin de prrafo
para
·
Punto medio
middot
¸
Cedilla
cedil
¹
Uno superndice
sup1
º
Gnero masculino
ordm
»
Cerrar comillas francesas
raquo
65

¼
Un cuarto
frac14
½
Un medio
frac12
¾
Tres cuartos
frac34
⅛
Un octavo
--
⅜
Tres octavos
--
⅝
Cinco octavos
--
⅞
Siete octavos
--
¿
Abrir interrogacin
iquest
À
A mayscula, acento grave
Agrave
Á
A mayscula, acento agudo
Aacute
Â
A mayscula, acento circunflejo
Acirc
Ã
A mayscula, tilde
Atilde
Ä
A mayscula, diresis
Auml
Å
A mayscula, anillo
Aring
Æ
AE mayscula
AElig
Ç
C cedilla mayscula
Ccedil
È
E mayscula, acento grave
Egrave
É
E mayscula, acento agudo
Eacute
Ê
E mayscula, acento circunflejo
Ecirc
Ë
E mayscula, diresis
Euml
Ì
I mayscula, acento grave
Igrave
Í
I mayscula, acento agudo
Iacute
Î
I mayscula, acento circunflejo
Icirc
Ï
I mayscula, diresis
Iuml
Ð
Eth mayscula
ETH
Ñ
Ee mayscula
Ntilde
Ò
O mayscula, acento grave
Ograve
Ó
O mayscula, acento agudo
Oacute
Ô
O mayscula, acento circunflejo
Ocirc
Õ
O mayscula, tilde
Otilde
Ö
O mayscula, diresis
Ouml
×
Signo de multiplicacin
times
Ø
O barrada mayscula
Oslash
Ù
U mayscula, acento grave
Ugrave
Ú
U mayscula, acento agudo
Uacute
66

Û
U mayscula, acento circunflejo
Ucirc
Ü
U mayscula, diresis
Uuml
Ý
Y mayscula, acento agudo
Yacute
Þ
THORN mayscula
THORN
ß
Beta minscula
szlig
à
a minscula, acento grave
agrave
á
a minscula, acento agudo
aacute
â
a minscula, acento circunflejo
acirc
ã
a minscula, tilde
atilde
ä
a minscula, diresis
auml
å
a minscula, anillo
aring
æ
ae mnuscula
aelig
ç
c cedilla minscula
ccedil
è
e minscula, acento grave
egrave
é
e minscula, acento agudo
eacute
ê
e minscula, acento circunflejo
ecirc
ë
e minscula, diresis
euml
ì
i minscula, acento grave
igrave
í
i minscula, acento agudo
iacute
î
i minscula, acento circunflejo
icirc
ï
i minscula, diresis
iuml
ð
eth minscula
eth
ñ
ee minscula
ntilde
ò
o minscula, acento grave
ograve
ó
o minscula, acento agudo
oacute
ô
o minscula, acento circunflejo
ocirc
õ
o minscula, tilde
otilde
ö
o minscula, diresis
ouml
÷
Signo de divisin
divide
ø
o barrada minscula
oslash
ù
u minscula, acento grave
ugrave
ú
u minscula, acento agudo
uacute
û
u minscula, acento circunflejo
ucirc
ü
u minscula, diresis
uuml
ý
y minscula, acento agudo
yacute
67

þ
thorn minscula
thorn
ÿ
y minscula, diresis
yuml
&#8364
Euro
euro
≠
Distinto de
ne
≤
Menor o igual que
le
≥
Mayor o igual que
ge
√
Radical
radic
Ω
Omega
--
↑
Flecha arriba
uarr
↓
Flecha abajo
darr
←
Flecha izquierda
larr
→
Flecha derecha
rarr
↔
Flecha izq-der
harr
№
--
▲
Flecha ar
--
►
Flecha de
--
▼
Flecha ab
--
◄
Flecha iz
--
■
Cuadrado lleno
--
□
Cuadrdo vacio
--
▪
Mini cuadrado lleno
--
▫
Mini cuadrado vacio
--
●
Punto lleno
--
○
Punto vacio
--
◊
Rombo vacio
loz
68

Creacin de enlaces (links).

El siguiente es sin duda el elemento ms importante del HTML, ya que permite
realmente "navegar" por uno o varios documentos, que pueden residir en
cualquier parte, pareciendo que siempre se esta en el mismo; a esto se le llama
hipertexto ya que con esta posibilidad, en realidad, el documento puede ser
infinito...
En efecto, para la persona que este leyendo sobre un determinado tema, no hay
diferencias ostensibles que le hagan notar dnde est el documento que lee.
Para el lector, todo parece un mismo documento, cuando en realidad,
probablemente el conjunto de lo que lee est repartido por medio mundo, o en
un plano ms modesto, el documento ledo puede estar compuesto en realidad
por varios cientos de pginas que "saltan" de unas a otras sin notarlo.
Todo esto lo consigue el elemento <A> (por Anchor, en ingls = ancla o punto
de anclaje). En lo sucesivo se le llamara enlace o simplemente link (en ingls
link=eslabn o enlace).
Pero seguramente se preguntar qu es eso de un "link". Pues un link es un
rea de la pantalla, que puede contener una o varias palabras o una imagen,
que es "sensible" al puntero del ratn, y al ponerlo sobre ella y pulsar el botn
izquierdo el visualizador llamar a la pgina que tiene asignada el link.
Habitualmente por defecto los visualizadores sealan un rea linkada
subrayndola, si es texto, o ponindole un borde si es una imagen, ambas cosas
en color azul. Por supuesto, eso se puede cambiar en las configuraciones de
visualizador. Si no se desea que aparezca el subrayado para mejorar la esttica
en algunos casos, se puede parametrizar con una instruccin de estilo.
Se escribir:
<A HREF="http://www.miservidor.es/mifichero.htm"> Link de prueba
</A>.
Y se vera as:
Link de prueba
Si lo que se desea es que aparezca sin subrayado o de otro color, o ambas
cosas, se puede recurrir a una instruccin de estilo. As:
<A HREF="http://www.miservidor.es/mifichero.htm"
style="color:red; text-decoration:none";> Link de prueba
</A>.
69

Y se vera as:
Link de prueba
(Esto puede que no funcione en algunos navegadores antiguos)
El elemento <A> tiene dos atributos: HREF y NAME.
En el ejemplo de arriba al atributo HREF se le asigna el valor que aparece entre
comillas: "http://www.miservidor.es/mifichero.htm".
El texto sobre el que se monta el enlace es Link de prueba y realiza un link con
el fichero mifichero.htm que est en el servidor www.miservidor.es.
Esta forma de escribir la ruta del link de forma completa, se utiliza cuando hay
que saltar de una mquina a otra, si el enlace es para otra pgina del propio
servidor es suficiente escribir la ruta virtual corta: /mifichero.htm o bien:
/otro_directorio/mifichero.htm segn proceda.
Como se ha visto, el punto de enlace se realiza en el texto escrito antes del
cierre del elemento </A>, pero tambin puede hacerse con una imagen
cualquiera, que ira en lugar del texto, incluso se puede poner el texto junto con
una imagen. Por ejemplo para hacer un link que nos lleve al ndice desde una
bola roja, se escribe:
Ir al ndice <A HREF="indice.htm"> <img src="bolaroja.gif"> </A>.

Ir al ndice
Al igual que el texto aparece subrayado en azul cuando forma parte de un
enlace, los grficos reciben un borde azul alrededor de toda la imagen, lo que a
veces puede resultar poco esttico. Esto tambin tiene solucin, pero aqu se
hace en la instruccin de la imagen:
Ir al ndice <A HREF="indice.htm"> <img src="bolaroja.gif"
border=0> </A>.

Ir al ndice
El valor de los atributos hay que escribirlos EXACTAMENTE como se deba. En
el ejemplo anterior no funcionara el link si se escribiera www.miservidor.es en
maysculas o con alguna otra diferencia, eso es un nombre de mquina y sera
interpretado como OTRA mquina.
70

Esto es aplicable a todos los parmetros: servicio (http://) servidor
(www.miservidor.es) y fichero (mifichero.htm).
Dentro de los parmetros pasados a HREF, se podr ver que al principio se
pone http://, esto es, el tipo de servicio al que el visualizador va a llamar, y hay
varios :
Servicio
Descripcin
Ejemplo
Efecto
http://
Servicios WWW <A HREF="http://www.uv.es/"> WWW</A> WWW
ftp://
Servicios FTP
<A HREF="ftp://ftp.uv.es/">FTP</A>
FTP
news:// Servicios NEWS <A HREF="news://news.uv.es/">NEWS</A> NEWS

mailto:// Servicios E-mail <A HREF="mailto:jac@uv.es/">E-mail</A> E-mail
file:///C| Fichero local
<A HREF="indice.htm/">Fichero</A>
Fichero
Adems de HREF, el elemento <A> puede tener otro atributo: TARGET. Se

utiliza para ordenar la apertura de otra ventana del visualizador con la pgina
que se desee. Se escribir:
<A HREF="indice.htm" TARGET="Ventana-2"> </A>
Esta instruccin mostrar la pgina indice.htm pero con otra ventana del
visualizador, es decir tendremos lanzado el visualizador 2 veces.
Del mismo modo, el atributo TARGET puede utilizarse para salir de una pantalla
compuesta de frames. En efecto, si estamos en una pantalla con, por ejemplo,
dos frames, cualquier link invocado desde cualquiera de ellos, hace que la
pgina llamada aparezca en ese mismo frame. Para volver a una pantalla
"normal" sin frames, se puede escribir un link con la sintaxis siguiente:
<A HREF="indice.htm" TARGET="_parent"> </A>
Existen otros valores para TARGET:

TARGET="_blank": Para que el enlace se muestre en una nueva ventana vaca.
Tambin puede darse un nombre cualquiera con el mismo efecto.
TARGET="_self": Para mostrar el enlace en la misma ventana o frame que lo referencia
(valor por defecto).
TARGET="_top": El documento solicitado se cargar en la pantalla actual, ocupando
toda la ventana y destruyendo la estructura de frames anterior, si existe.
71

El atributo HREF sirve para enlazar con otro documento, que puede estar en un
servidor o ser un fichero local, pero que siempre se nos presentar desde la
primera lnea del mismo.
El atributo NAME se utiliza para definir algo as como "un punto de aterrizaje" en
cualquier lnea del documento de destino, de forma que nos aparecer en
pantalla desde la lnea deseada y no desde el principio. Esto es muy til cuando
se trata de documentos largos divididos en secciones.
Se escribir as:
En el documento activo:
<A HREF="http://www.miservidor.es/mifichero.htm#punto1"> Ir al punto
1</A>
En el documento destino:
<A NAME="punto1"></A>
NAME tambin puede utilizarse para saltar de una lnea a otra dentro de un
mismo documento. Se escribir as:
Dentro del documento activo En la lnea de partida:
<A HREF="#punto1">Ir al punto 1</A>
En la lnea de destino
<A NAME="punto1"></A>
Como se ha visto en el cuadro de arriba, es posible enviar un e-mail desde un

link con la instruccin:
<A HREF="mailto:jac@uv.es">Enviar e-mail</A>.
Con esta sintaxis se invoca al cliente de correo predeterminado para que abra
una ventana con la direccin deseada ya escrita. Si adems se quiere que dicha
ventana se abra con el asunto (subject) y el texto (body) ya escritos se puede
conseguir as:
<A HREF="mailto:jac@uv.es?&subject=Asunto de prueba&body=Texto de
prueba">Enviar e-mail</A>
72

Con los links, al igual que con los formularios, es posible moverse usando la
tecla de tabulacin, para conseguir que el enfoque salte de un link a otro en un
cierto orden. Para ello se utiliza el atributo tabindex.
<A HREF="tablas.htm" tabindex="2">Tablas</A>
<A HREF="imagen1.htm" tabindex="3">Imgenes</A>
<A HREF="body.htm" tabindex="1">Body</A>
Esto solamente funciona con versiones recientes de navegadores. Otro atributo

reciente de los links es title que permite escribir una descripcin del link sin
necesidad de pulsar en l, simplemente poniendo encima el puntero del ratn.
Por ejemplo:
<A HREF="tablas.htm" title="Saltar a la seccin de tablas">Tablas</A>
Se debe saber que...
El texto que se ponga despus del smbolo # puede ser cualquiera,

siempre que no tenga espacios en blanco, caracteres especiales ni
caracteres codificados, y por supuesto, que no est repetido en el mismo
documento de destino.
Si en el documento de destino no existe el punto definido en el
documento de origen, el visualizador presentar en pantalla la ltima lnea
del mismo.
Cuando se haga un link, es preferible utilizar direcciones relativas. Si se
utilizan direcciones absolutas y despus se tienen que mover los ficheros
por cualquier razn, se tendrn que modificar todas las direcciones.
Si al hacer un link, despus del nombre de la mquina no se pone el
nombre de un fichero, por defecto el servidor entiende que se le pide la
"home page" (pgina inicial) de ese directorio. Generalmente (aunque
depende de la configuracin del servidor) el fichero inicial de un directorio
suele ser index.htm o default.htm
Si un servidor no tiene definida pgina inicial, simplemente mostrar una
lista de todos los ficheros y directorios que tenga en el directorio definido
como raz si el servidor tiene activada la opcin de listar directorios, en
caso contrario, dar un error.
Si despus de la direccin de la mquina a la que le se hace el link en
lugar de un nombre de fichero se pone el de un directorio, generalmente
el servidor s mostrar un simple listado de los ficheros y directorios que
ste contenga si el servidor tiene activada la opcin de listar directorios,
en caso contrario, dar un error.
No slo se puede montar el link sobre un texto, tambin se puede hacer
sobre una imagen cualquiera. Es decir, despus del link y antes de </A>
se puede poner lo que se quiera.
73

El arte de escribir buen HTML reside en dar una buena estructura a la

informacin. Siempre que se pueda huir de crear pginas muy largas. Se
crean cuantas se necesiten, con buena estructura y enlzarlas con
cuantos links sean precisos.
Recordar: si el trabajo HTML no va a residir en un servidor en red, y se ha
utilizado direcciones absolutas, al hacer un link, no empezar con aquello
de: "http://....". No funcionar.
Si se continua deseando poner direcciones absolutas con ficheros
locales, se tendr que ser as file:///C:/MIDIRECTORIO/mifichero.htm
Despus de C (que puede ser A, B, D o la unidad de disco que se quiera)
fjarse en que las barras que separan los directorios y ficheros son barras
a la derecha.
Insertar imgenes
Insertar imgenes en un documento permite crear pginas mucho ms
atractivas. Segn el tipo de grficos utilizado se pueden conseguir efectos
realmente sorprendentes.
Para insertar una imagen en un documento HTML se utiliza el elemento <IMG>.
Este elemento puede ir acompaado de los atributos SRC ALT ISMAP ALIGN
WIDTH HEIGTH BORDER VSPACE HSPACE. Con las nuevas
implementaciones que Netscape hace del elemento, se consiguen efectos de
imagen flotante y por tanto se ha hecho necesario dotar al elemento <BR> del
atributo CLEAR.
Las imgenes utilizadas pueden estar en formato GIF o JPG. Estos formatos son
interpretados directamente por el navegador.
La diferencia entre estos dos formatos es su nivel de compresin. En efecto, el
JPG tiene una compresin mucho mayor que el GIF, por lo que suele ser el
formato ms utilizado en el mundo web, donde siempre se debe perseguir que
las pginas sean lo ms ligeras posible.
Por contra, cuanta mayor compresin tenga un grfico menor calidad se
consigue, pero para usos generales el JPG es perfectamente vlido.
Se puede usar cualquier otro formato como el MPG o el AVI (ambos de vdeo),
pero entonces el visualizador llamar a un programa auxiliar, que previamente le
habrs definido, para que sea ste el que visualice el fichero.
74

La desventaja de las imgenes en formatos no tratados por el propio
visualizador es que no se vera el texto junto con la imagen, y por tanto no
se podra imprimir la pgina compuesta. para evitar esto, se utilizan los
llamados "plug-in" que consisten en pequeos programas que permiten
llamar a aplicaciones especficas ejecutndose como ventanas del
navegador. Un ejemplo muy comn son los ficheros .pdf.
Algunos navegadores no son capaces de tratar imgenes, o aunque el
navegador s pueda, tal vez el cliente est navegando en modo solo texto, es
decir, sin ver las imgenes, lo que permite moverse ms rpido. Para estos
casos se puede recurrir al atributo ALT (por alternativo) para definir un texto que
aparecer en lugar de la imagen. Esto es importante cuando una imagen,
adems de ser un elemento decorativo o informativo, soporta un link. El uso de
ALT es recomendado por la W3.
Ejemplos del uso de <IMG>:
Imagen alineada a la izquierda (por defecto)

<IMG SRC="sugeren.gif">texto texto texto texto
texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto
Imagen con un texto alternativo
Sirve para que, si no es posible cargar la imagen, aparezca un texto en su lugar.
Tambin se utiliza para que al colocar el puntero del ratn sobre la imagen, sin
pulsar, aparezca el texto. Para verlo se tiene que deshabilitar la opcin de cargar
imgenes del visualizador (slo es posible con Netscape).
<IMG SRC="sugeren.gif" ALT="AQUI VA UNA IMAGEN">
75

Imagen alineada a la izquierda.Texto alineado arriba
<IMG SRC="sugeren.gif" ALIGN=TOP> texto texto texto texto texto
texto exto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto
Imagen alineada a la izquierda.Texto alineado abajo

<IMG SRC="sugeren.gif" ALIGN=BOTTOM> texto texto texto texto texto
Imagen alineada a la izquierda.Texto alineado al centro

<IMG SRC="sugeren.gif" ALIGN=MIDDLE> texto texto texto texto texto
texto texto texto texto texto texto texto texto texto
Imagen alineada a la izquierda.Texto alineado a la derecha de la imagen

<IMG SRC="sugeren.gif" ALIGN=LEFT> texto texto texto texto texto
Imagen alineada a la izquierda.Texto envolviendo la imagen

<IMG SRC="sugeren.gif" ALIGN=LEFT> texto texto texto texto texto <BR
CLEAR> texto texto texto texto texto
Imagen alineada a la derecha.Texto alineado a la izquierda de la imagen
<IMG SRC="sugeren.gif" ALIGN=RIGHT> texto texto texto texto texto
76

Si el visualizador no soporta esto, hay un truco para conseguir algo parecido:
<TABLE> <TR><TD>texto texto texto texto texto texto texto texto texto texto
texto texto</TD><TD align=center><IMG SRC="sugeren.gif"></TD></TR>
</TABLE>
texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto
Imagen redimensionada a ms.Texto alineado a la derecha de la imagen
<IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=272 HEIGTH=92 > texto texto
texto texto texzto texto texto texto texto
texto.
Aqu la imagen es la misma de los ejemplos anteriores, pero ha sido
redimensionada por el visualizador. Su tamao original es de 136x46 puntos.
Este es su aspecto al doble: 272x92.
Imagen redimensionada a menos.Texto alineado a la derecha de la imagen

<IMG SRC="sugeren.gif" ALIGN=LEFT WIDTH=75 HEIGTH=20 > texto texto
texto
texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texzto texto texto
texto texto texto texto texto.
Aqu la imagen es la misma de los ejemplos anteriores, pero ha sido
redimensionada por el visualizador. Su tamao original es de 136x46 puntos.
Este es su aspecto a la mitad: 75x23
Consideraciones sobre WIDTH y HEIGTH
Estos dos atributos, adems de para variar el tamao de un grfico, tambin
pueden (casi deben) utilizarse con los valores naturales del mismo. Es decir, que
no se pretende alterar las dimensiones del grfico. La razn estriba en cmo
funcionan los navegadores. Cuando el navegador solicita una pgina y
comienza a recibirla, lo primero que hace es leer la cabecera, a
continuacin lee el cdigo del BODY y por ltimo carga las imgenes que
contenga la pgina haciendo nuevas conexiones al servidor para cada una
de ellas.
77

Esta forma de trabajar tiene como consecuencia, que si en el cdigo del BODY
no hay instrucciones sobre el espacio que hay que reservar en pantalla para
cada imagen, cuando stas lleguen en el ltimo paso de la carga de la pgina, el
texto ya estar compuesto, pero al no saber el tamao de las imgenes, no se
habr reservado el espacio adecuado para insertarlas, por lo que todo el texto
ser desplazado hacia abajo, con la consiguiente prdida del formato original de
la pgina, ya que el navegador no va a recomponer el texto que ya estaba
escrito.
Imagen alineada a la izquierda con marco.Texto alineado a la derecha de la
imagen
<IMG SRC="sugeren.gif" ALIGN=LEFT BORDER=5> texto texto texto texto texto
Imagen alineada a la izquierda.Texto alineado a la derecha de la imagen.

Espacios verticales y horizontales vacos forzados.
texto texto texto texto texto texto texzto texto texto texto texto texto
<IMG SRC="sugeren.gif"> ALIGN=LEFT HSPACE=100 VSPACE=30> texto
texto texto
Usar una imagen como punto de montaje de un link

texto texto <A HREF="indice.htm"><IMG SRC="sugeren.gif" ></A>texto texto.
Como se puede ver, la imagen aparece rodeada de un marco de color como es
habitual en los puntos de link (en el texto es el subrayado). Si se quiere eliminar
el marco, se escribe:
.... IMG SRC="sugeren.gif" BORDER=0 >
Mapeado de una imagen para usarla como direccionador

<A HREF="/cgi-bin/imagemap/mimapa"><IMG SRC="sugeren.gif" ISMAP></A>
Si se mueve el ratn por encima de la imagen, se ver que en la ventanita de
estado del navegador (en la parte inferior izquierda de la ventana) aparecen
junto a un interrogante unos nmeros que cambian segn muevas el ratn. Con
cuidado intenta poner el puntero en la esquina superior izquierda y en la inferior
derecha. Vers las cifras 1,1 y 136,46, respectivamente, que son las medidas en
78

puntos que tiene el grfico. Como ya se habr supuesto, esto es un sistema de
coordenadas, y para que nuestra imagen funcione como un men direccionador,
lo que se necesita es que algn elemento convierta esas coordenadas en una
direccin del estilo ya conocido: "http://miservidor.es/mifichero.htm".
Esto siginifica que con un solo link se puede obtener un enorme nmero de
direcciones, tericamente tantas como pares de coordenadas tiene la imagen.
En la prctica sern menos, ya que andar intentando atinar en el punto 11,32,
por ejemplo, es un poco engorroso.
Existen multitud de programas llamados mapeadores que parten la imagen en
imaginarios trozos, y cada uno de ellos indica un link con alguna parte. Estos
programas generan un fichero con todas las direcciones:
rect http://miservidor.es/mifichero1.htm 12,35
Este podra ser el aspecto del fichero del ejemplo, el llamado mimapa. El
parmetro rect significa rectngulo, y nos indica que la imagen ha sido troceada
en rectngulos y las coordenadas indican la esquina superior izquierda y la
inferior derecha. Tambin podra ser en crculos (circ) o polgonos (poly).
Resto de instrucciones del ejemplo:
<A HREF="/cgi-bin/imagemap/mimapa"><IMG SRC="sugeren.gif" ISMAP></A>
La primera parte A HREF ya se conoce, es un link. Despus viene un directorio:
cgi-bin. Este es un directorio especial que tienen los servidores http, donde se
ejecutan los programas auxiliares del servidor, y al que normalmente slo puede
acceder el administrador del sistema. En ese directorio hay un fichero llamado
imagemap (segn el sistema puede ser otro) que es un programa que se
encarga de leer tu fichero mimapa, capturar las coordenas que seale el
puntero del ratn y servir la direccin que tiene asociada, con lo que se acaba
obteniendo un link normal. Ya por ltimo, aparece ISMAP que es el que
convierte una simple imagen en una potente herramienta.
Slo queda por decir que el fichero mimapa tiene que estar en otro directorio
especial que tiene el servidor a estos efectos, y al que por supuesto, solo puede
acceder el administrador del sitema.
Todo esto es suponiendo que el servidor est en una mquina UNIX. Si reside
en un PC con Windows o en un MAC (que los hay), se tendra que ver las
instrucciones concretas del programa servidor. La forma de montar el mapa
79

puede variar de un programa servidor a otro, pero la base de funcionamiento es
siempre la misma.
Pero, una vez ms, Netscape ha propuesto una solucin mucho ms simple: que
sea el propio visualizador quien haga las veces de programa conversor. En
efecto, un recurso tan bueno como los mapas, no debe depender de tener la
mquina en red y de que haya un servidor http que atienda. Adems, eso resta
portabilidad a los documentos locales y a los trabajos personales en disquete.
Para ello se ha implementado el elemento MAP que acompaar a IMG.
Por ejemplo, en la siguiente imagen, la mitad izquierda nos enva a indice.htm y
la mitad derecha a intro.htm. Mueve el puntero del ratn horizontalmente sobre
la imagen y observar la ventanita de estado que hay en la parte inferior izquierda
de la pantalla, se vera como cambia el nombre del link.
Se escribe as:
<MAP NAME="nombre1">
<AREA SHAPE="rect" COORDS="1,1,75,46" HREF="indice.htm">
<AREA SHAPE="rect" COORDS="76,1,136,46" HREF="intro.htm">
</MAP>
<IMG SRC="sugeren.gif" USEMAP="#nombre1">
En primer lugar se tiene el elemento MAP, que lo que est haciendo es definir
un mapa de coordenadas. Va acompaado del atributo NAME que da nombre al
mapa. Es necesario nombrarlo porque podra haber ms de uno en la misma
pgina, y evidentemente, sus nombres no debern repetirse.
A continuacin se tiene el atributo AREA que define las reas de la imagen.
El parmetro SHAPE="rect" indica la figura geomtrica que se esta utilizando
para ello. Al igual que con los otros mapas, puede ser rect circ y poly.
El parmetro COORDS fcilmente se adivina que indica las coordenadas del
rea, en este caso vrtice superior izquierdo e inferior derecho, respectivamente.
HREF ya se sabe que hace: indica un link con una pgina, pero esta vez no va
acompaando al elemento <A>, digamos que es un atributo prestado.
80

Hay un rea por cada link definido. Si un rea no se quiere que tenga link se
definir con NOHREF.
IMG SRC tambin son conocidos: hacen que se visualice la imagen.
Y por fin, USEMAP dice qu mapa de coordenadas hay que aplicar a la imagen.
A una misma imagen se le pueden aplicar distintos mapas si se desea. Fjarse
en que nombre1, (el nombre del mapa) va precedido del smbolo #. Esto se
debe a que, en este caso, el mapa al que se hace referencia est en la misma
pgina que la instruccin IMG. Podra estar en otra, y en ese caso el smbolo
tendra que estar despus del nombre de la pgina. Por ejemplo:
otrapagina.htm#nombre1
Como ya se ha dicho ms arriba, hay tres figuras geomtricas definibles para las
reas: rect, circle y poly. El rectngulo ya se conoce; consiste en parejas de
coordenadas que indican los vrtices superior izquierdo e inferior derecho
respectivamente del rea. Para el cculo (circ) son necesarios tres valores: x,y
r donde x,y es el par de coordenas que indican el punto donde est el centro del
cculo, y r es el radio del crculo medido en puntos. Para los polgonos (poly) se
necesitan tantas parejas de coordenadas como vrtices tenga el polgono,
procurando que la ltima pareja quede unida a la primera, ya que la figura debe
estar cerrada. No es obligatorio que sean figuras regulares. En el caso de que se
quiera emplear todo el grfico como rea de enlace, es decir, un solo link, se
puede emplear default, y no es necesario indicar ninguna coordenada.
81

Cmo se escriben los formularios ?

La base del formulario es el elemento <FORM>, y es el que define una zona de
la pgina como formulario. En una pgina puede haber varias zonas definidas
como formulario, en cuyo caso es conveniente darles distintos nombres a cada
uno. Dentro de este elemento, que es un objeto, se insertan otros elementos,
que a su vez son sub-objetos del objeto FORM, que son los que realmente
dibujan en pantalla los componentes del formulario. Se ver con detalle el
concepto de objeto en las secciones de programacin de esta guia, ya que
ahora no lo necesitamos. Hay tres clases de estos sub-objetos:
<INPUT>
Campos de entrada por teclado.
Botones de seleccin.
Casillas de marca.
Botones de proceso.
Botones de inicializacin (reset).
Imgenes sensibles al ratn.
<SELECT>
Listas desplegables de valores.
Listas fijas de valores.
<TEXTAREA>
Ventanas de escritura libre.
Este sera el ms elemental de los formularios, con slo un campo y un botn de
envo:
Principio del formulario
Procesar
Final del formulario

Analicemos cmo se escribe:
<FORM NAME="MI_FORMULARIO" METHOD="POST"
ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi">
<INPUT NAME="campo1">
<INPUT TYPE="submit" VALUE="Procesar"></FORM>
En la primera lnea vemos el elemento de definicin de formulario: <FORM>. Va
acompaado de tres atributos: NAME, METHOD y ACTION.
82

NAME, evidentemente, se refiere al nombre que se le asigne al formulario. No
es obligatorio, pero si el formulario va a ser utilizado en pginas ASP, PHP, o
simplemente en VBScript o JavaScript, se necesitar un nombre, ya que el
formulario ser considerado como un objeto.
METHOD se refiere al mtodo que emplearemos para enviar los datos al
servidor, y pueden ser dos: POST y GET. El optar por uno u otro obedece a
complejas cuestiones de programacin basadas en la mxima longitud de
registro que puede enviarse; cada uno usa un canal de salida distinto. El que
soporta ms longitud es POST, y ser el que utilicemos en casi todos los
ejemplos. Si el formulario solamente se utiliza para llamar a otras pginas, se
utiliza el mtodo GET, y si se trata de envio de datos POST.
Fjate en las variables QUERY_STRING e INPUT. Por la primera llegarn los
datos cuando se utilice METHOD=GET y por la segunda cuando es POST el
mtodo elegido.
ACTION se refiere a la accin que queremos que ejecute el formulario en un
servidor
http
o
en
local.
Con
el
valor
del
ejemplo
ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi" se le est
indicando que ejecute un programa llamado test2-cgi que est en el directorio
/cgi-bin del servidor http miserver.midominio.mipais
Adems de enviar datos a un servidor, ACTION tambin puede realizar una
accin en local, por ejemplo traer una pgina:
Se escribe:
<FORM METHOD="POST" ACTION="indice.htm">
......
</FORM>
En este caso el formulario funcionara igual que un link.
Otra cosa que puede hacer ACTION, y que adems tiene la ventaja de que no
sera preciso disear un CGI, es enviar un e-mail (correo electrnico) a un
usuario o a una lista de usuarios. Los datos enviados por el formulario, tendrn
la forma que ya conocemos, pero una vez recibidos por esta va, pueden ser
tratados con programas de edicin de texto, y convertidos al formato que se
quiera.
83

Se escribe:
<FORM METHOD="POST" ACTION="mailto:mi-usuario@miservidor-e-mail">
......
</FORM>
Si no quieres complicarte la vida con descodificaciones (depende de lo que se
vaya a hacer con los datos recibidos), el navegador puede remitirlos con un
formato ms sencillo y ya descodificado. Para ello slo hay que aadir el
parmetro ENCTYPE con el valor TEXT/PLAIN.
Se escribe as:
<FORM METHOD="POST" ACTION="mailto:mi-usuario@miservidor-e-mail"
ENCTYPE="TEXT/PLAIN">
......
</FORM>
Resumiendo: sin poner ningun parmetro al elemento ACTION los datos te
llegarn as:
CAMPO1=Esto+es+una&CAMPO2=demostracion+de+formularios
y poniendo ENCTYPE="TEXT/PLAIN" as:
CAMPO1=Esto es una
CAMPO2=demostracion de formularios
Al igual que con el elemento <A> es posible hacer que el asunto (subject) del email se reciba con el texto que quieras, pero omitiendo la parte correspondiente
al cuerpo (body) del mismo, ya que en este caso el contenido del e-mail son los
campos del formulario:
<FORM METHOD="POST" ACTION=
"mailto:mi-usuario@miservidor-e-mail?&subject=asunto de prueba"
ENCTYPE="TEXT/PLAIN">
......
</FORM>
Esto funcionar siempre que en la mquina del cliente haya instalado algun
programa que permita enviar correo electrnico, si no es as hay que recurrir a
un programa CGI o de otro tipo en el servidor que se encargue de hacerlo. No es
buena idea presuponer que todo el mundo tiene un cliente de correo instalado
en su mquina.
84

El elemento INPUT
INPUT sin ningn atributo define por defecto una ventana de escritura de 20
caracteres de longitud por una lnea de ancho:
Se escribe:
<FORM> <INPUT> </FORM>
<INPUT> admite varios atributos:
SIZE define la longitud de la ventana de texto.
MAXLENGTH define la mxima longitud de la cadena que se puede escribir
dentro de la ventana.
NAME define el nombre de la ventana (que en realidad es un campo dentro del
registro, que en conjunto, es el formulario). Si escribes:
<FORM> <INPUT SIZE=10 MAXLENGTH=10 NAME="campo1"></FORM>

Como puedes comprobar, slo se pueden escribir 10 caracteres dentro de la
ventana, que tambin es de longitud 10. No es obligatorio que concidan ambos
valores, puedes definir la ventana al valor que quieras y la longitud de la cadena
puede ser mayor o menor.
VALUE sirve para que la ventana aparezca con un valor predeterminado, y no
vaca como hace por defecto:
HOLA

Se escribe:
<FORM> <INPUT VALUE="HOLA"> </FORM>
El valor puede ser modificado o barrado por el usuario.
85

READONLY Sirve para que el valor de la ventana, que contiene un valor
predeterminado, no pueda ser modificado por el usuario.
HOLA

Se escribe:
<FORM> <INPUT VALUE="HOLA" READONLY> </FORM>
No funciona en versiones antiguas de los navegadores.
TYPE=TEXT Es el valor por defecto de TYPE. Puede omitirse.
TYPE=PASSWORD para que el valor predeterminado de la ventana est en
formato oculto:
Se escribe:
<FORM> <INPUT TYPE="PASSWORD" VALUE="HOLA"> </FORM>
TYPE=HIDDEN define que el valor predeterminado de la ventana y la ventana
misma estn en formato oculto:
Se escribe:
<FORM> <INPUT TYPE="HIDDEN" VALUE="HOLA"> </FORM>
Esta opcin se utiliza cuando es necesario enviar un valor fijo al servidor, pero
no se desea que el usuario intervenga o que lo vea. CUIDADO, esto no es un
formato encriptado, viendo el documento fuente se puede saber el valor de la
ventana.
86

TYPE=SUBMIT para generar un botn que al ser pulsado cierra la captura de
datos del formulario y procede a ejecutar lo definido en el atributo ACTION que
ya conocemos.
Procesar

Se escribe:
<FORM
METHOD="POST"
ACTION="http://miserver.midominio.mipais/cgibin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar"></FORM>
VALUE puede acompaar a SUBMIT , y en este caso sirve para definir el texto
que queremos que tenga el botn en su interior. Si se omite, por defecto el
visualizador le da el valor "Submit Query".
Existe otro tipo llamado TYPE=BUTTON que genera un botn igual al generado
por el tipo submit, pero que no realiza ninguna accin; es simplemente un botn
"muerto" en cuanto a acciones directas. Suele utilizarse para asociarle
instrucciones en JavaScript o VBScript mediante el evento onClick.
Se escribe:
<FORM
METHOD="POST"
<INPUT TYPE="BUTTON" VALUE="No hace nada"></FORM>
TYPE=RESET para generar un botn que al ser pulsado inicializa todos los
componentes del formulario.
Inicializar

Se escribe:
87

<FORM
METHOD="POST"
<INPUT TYPE="RESET" VALUE="Inicializar"></FORM>
VALUE puede acompaar a RESET , y en este caso sirve para definir el texto
que queremos que tenga el botn en su interior. Si se omite, por defecto el
visualizador le da el valor "Reset".
TYPE=FILE Este es un nuevo tipo que slo funciona con Netscape 3.0 o
superior, y sirve para enviar un fichero a una mquina remota (hacer FTP), pero
no funciona solo, necesita de ciertos acompaantes que hacen su uso un poco
ms complicado:
Aqu hay que echar mano de un atributo parametrizado de <FORM>:
ENCTYPE="multipart/form-data" para generar un botn que permitir buscar
un fichero en nuestra mquina, ponerlo en una ventanita de entrada como las ya
conocidas (por tanto tanbin se puede escribir directamente el nombre del
fichero en lugar de buscarlo) y junto con un botn tipo submit enviar el fichero.
Enviar fichero
Enviar el fichero:
Se escribe:
<FORM enctype="multipart/form-data"
ACTION="ftp://miservidor/" METHOD="POST">
Enviar el fichero:
<INPUT NAME="mifichero" TYPE="FILE">
<INPUT TYPE="SUBMIT" VALUE="Enviar fichero"></FORM>
el botn generado aparece con el texto "Browse.." y no sirve de nada aadirle el
parmetro VALUE para darle otro nombre, como se puede hacer con el botn de
tipo submit.
En este ejemplo se hara una conexin al servicio FTP general de la mquina
remota, pero se puede hacer a un directorio en particular de un usuario concreto.
Slo habra que cambiar la lnea
ACTION="ftp://miservidor/" METHOD="POST">
y escribir:
ACTION="ftp://miusuario@miservidor/" METHOD="POST">
88

Otra forma ms directa de hacer un FTP en las dos direcciones, es desde la
ventana "Location" del visualizador. La sintaxis de los parmetros de ACTION
son vlidos en esa ventana.
Por supuesto, todo esto si no tienes cuenta y permiso de escritura en la mquina
remota, no sirve para nada...
Como ya se ha dicho antes, el atributo ACTION es capaz de enviar el contenido
del formulario por correo electrnico, pero no slo es capaz de enviar el
formulario: tambin puede adjuntar al e-mail un fichero cualquiera. Lo nico que
hay que hacer es aadirle un instruccin como la que acabamos de ver para el
FTP. As:
<FORM enctype="multipart/form-data"
ACTION="mailto:mi-usuario@miservidor-e-mail/" METHOD="POST">
Adjuntar el fichero:
<INPUT NAME="mifichero" TYPE="FILE">
<INPUT TYPE="SUBMIT" VALUE="Adjuntar fichero"></FORM>
TYPE=IMAGE hace que el visualizador presente una imagen que es sensible al
ratn. Lo que el formulario enva al servidor es un registro cuyos campos son el
nombre definido para la imagen seguido de los parmetros .x=n .y=n donde n
son los nmeros de las coordenas x y del punto en el que estaba el ratn en el
momento del envo. Para presentar la imagen se utiliza el atributo SRC del
elemento IMG. Este sera un ejemplo de respuesta:
imagen.x=99&imagen.y=15
Prueba a pulsar en cualquier parte de esta imagen:

Se escribe:
<FORM
METHOD="POST"
<INPUT TYPE=IMAGE NAME="imagen" SRC="sugeren.gif">
</FORM>
Los formularios que utilicen este tipo de recursos pueden prescindir del tipo
SUBMIT, ya que el formulario se cierra con la imagen.
89

TYPE=RADIO genera botones circulares que permiten seleccionar un valor

predeterminado o activar una opcin
Procesar
Inicializar
Clase A
Clase B
Se escribe:
<FORM
METHOD="POST"
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
Clase A
<INPUT TYPE="RADIO" NAME="clase" VALUE="A">
Clase B
<INPUT TYPE="RADIO" NAME="clase" VALUE="B"></form>
En este ejemplo, los botones permiten seleccionar la clase A, la clase B o
ninguna de las dos. Si se desea que por defecto un valor est seleccionado, por
ejemplo clase B, hay que aadir el parmetro CHECKED despus del valor:
... VALUE="B" CHECKED></form>
TYPE=CHECKBOX genera casillas de marca que permiten seleccionar un valor
predeterminado o activar una opcin
Procesar
Inicializar
Clase A
Clase B
Se escribe:
<FORM
METHOD="POST"
Clase A
<INPUT TYPE="CHECKBOX" NAME="clase" VALUE="A">
Clase B
<INPUT TYPE="CHECKBOX" NAME="clase" VALUE="B"></form>
90

En este ejemplo, las casillas de marca permiten seleccionar la clase A, la clase
B, ninguna, o las dos. Si se desea que por defecto un valor est seleccionado,
por ejemplo clase B, hay que aadir el parmetro CHECKED despus del valor:
... VALUE="B" CHECKED></form>
El elemento SELECT
SELECT sin ningn atributo define por defecto una lista desplegable de toda la
pantalla de alto y una columna de ancho:
Se escribe:
<FORM> <SELECT> </SELECT> </FORM>
Como evidentemente esto no es muy prctico, hay que parametrizar el
elemento. En primer lugar se le da nombre, ya que ste es un campo ms del
formulario, la diferencia es que no hay que escribir en l sino escoger un valor
de los que nos muestre al desplegarlo, se usar el atributo NAME, y para entrar
valores en la lista se usa el atributo OPTION.
Procesar
Inicializar
Valor 1

Se escribe:
<FORM
METHOD="POST"
<SELECT NAME="lista1">
<OPTION>Valor 1
<OPTION>Valor 2
<OPTION>Valor 3
</SELECT>
</FORM>
91

Se deben tener en cuenta varias cosas respecto a SELECT:
La longitud de la ventana de seleccin se autoajusta al valor ms largo de la
lista.
La ventana de seleccin, por defecto, muestra una lnea, si se quieren mostrar
ms se utilizar el atributo SIZE.
Se debe procurar que los contenidos de los campos sean lo ms cortos posibles;
una excesiva longitud implica mayor trfico por la red, pero se deben construir
las listas de forma clara, y que resulten de fcil lectura al usuario, lo que puede
aumentar la longitud de los valores. Para enviar un valor diferente del que
aparece en la lista, se utiliza el parmetro VALUE asociado al atributo OPTION.
Prueba con el valor 5 de la siguiente lista:
Procesar
Inicializar
Valor 1
Valor 2
Valor 3

Se escribe:
<FORM
METHOD="POST"
<SELECT NAME="lista1" SIZE=3>
<OPTION>Valor 1
<OPTION>Valor 2
<OPTION>Valor 3
<OPTION>Valor 4
<OPTION VALUE="Valor 5">Este es el Valor 5
<OPTION>Valor 6
<OPTION>Valor 7
</SELECT>
</FORM>
Esto siginifica que cuando selecciones "Este es el valor 5" en realidad lo que se
enva al servidor es "Valor 5".
Con las listas desplegables es obligatorio seleccionar siempre un valor, y si no
hay ninguno seleccionado, por defecto el visualizador enviar el primer valor de
la lista.
Se puede hacer que haya un valor preseleccionado aadiendo el parmetro
SELECTED al atributo OPTION, y si se quiere permitir ms de una seleccin, se
pondr el atributo MULTIPLE al elemento SELECT. Para seleccionar y
deseleccionar hay que atenerse a las normas de Windows.
92

Procesar
Inicializar
Valor 1
Valor 2
Valor 3

Se escribe:
<FORM
METHOD="POST"
<SELECT NAME="lista1" MULTIPLE SIZE=3>
<OPTION>Valor 1
<OPTION SELECTED>Valor 2
<OPTION>Valor 3
<OPTION>Valor 4
<OPTION>Valor 5
<OPTION>Valor 6
<OPTION>Valor 7
</SELECT>
</FORM>
Puede ocurrir que interese agrupar los valores de la lista desplegable, a fin de
que resulte ms fcil encontrar la opcin adecuada, sobre todo si la lista es
larga. Para ello se puede utilizar el parmetro optgroup. Por ejemplo:
Ninguno
Y se escribe:
<select name="coches">
<option selected value="0">Ninguno
<optgroup label="Coches de lujo">
<option value="1">Rolls Royce
<option value="2">Ferrari
<option value="3">Mercedes
</optgroup>
<optgroup label="Coches normales">
<option value="4">Renault
<option value="5">Peugeot
<option value="6">Seat
</optgroup>
</select>
93

El elemento TEXTAREA
Este elemento, como su nombre indica, permite definir un rea de texto en la
pantalla en la que podemos escribir cualquier cosa. Se debe escribir ya
parametrizada en cuanto a dimensiones, con los atributos ROWS (lneas) y
COLS (COLUMNAS). No tiene otros atributos o posibles variantes. Por
supuesto, para que sea operativo, deber ir acompaado de los componentes
necesarios para enviar e inicializar.
Procesar
Inicializar

Se escribe:
<FORM
METHOD="POST"
<TEXTAREA NAME="texto1" ROWS=5 COLS=40 ></TEXTAREA>
</FORM>
Aunque no es habitual, dentro de un rea de texto puede haber un contenido por
defecto (que puede ser borrado o modificado por el usuario). Para ello
simplemente se escribir el texto entre <TEXTAREA> y </TEXTAREA>. As:
<TEXTAREA NAME="texto1" ROWS=5 COLS=40>
Contenido del area de texto
</TEXTAREA>
El tratamiento de los datos recibidos en el servidor desde los formularios

requiere conocer la tabla de conversin hexadecimal que utilizan la mayora de
visualizadores. Recuerda que las palabras en destino aparecen separadas por el
signo +, y las letras acentuadas y otros caracteres, por valores hexadecimales
precedidos del smbolo %
Se puede proceder a la descodificacin en el programa CGI que recibe los
datos, o bien definir macros en programas auxiliares que sern ejecutados
despus.
94

Estilos en los formularios
En las ltimas versiones de los dos navegadores ms utilizados, pueden
aplicarse cambios de estilo a los formularios, lo que permite una presentacin
ms sofisticada.
ATENCION: Hay que tener en cuenta que los estilos no estan estandarizados, y
hay cosas que se ven bien en unos navegadores y no se ven en otros, y hay
solo unos pocos efectos que se vean en todos ellos.
En los elementos de formulario pueden redefinirse casi todos los parmetros:
colores de fondo, tipo y anchura de bordes, color y tipo de letra del texto, altura y
anchura del elemento, alineacin del texto dentro del elemento, etc. Por ejemplo:
Solo lectura

Se escribe as:
<FORM METHOD="GET" ACTION="">
<INPUT
TYPE="text"
NAME="campo1">
STYLE="background:yellow;color:red"
<INPUT TYPE="text" STYLE="border:1;background:yellow;color:blue"

readonly
NAME="campo2" VALUE="Solo lectura">
<INPUT
TYPE="button"
VALUE="Procesar">
STYLE="background:transparent;color:red"
</FORM>
Problemas de privacidad en los formularios

En las ltimas versiones del navegador Internet Explorer de Microsoft, ha
aparecido una nueva prestacin consistente en memorizar los datos introducidos
en cualquier formulario de uso habitual. En efecto, muchas veces se utilizan
formularios para tareas repetitivas, en las que casi siempre hay que introducir los
mismos datos. Esto nos puede ahorrar tener que escribir cada vez lo mismo, y
Microsoft pens que sera buena idea facilitar la labor del usuario haciendo que
el navegador guarde en una lista desplegable todos los datos que se van
escribiendo en cada transaccin, de manera que cuando se accede a la pgina,
cada campo de texto (<INPUT TYPE="text">) queda convertido en una lista
95

desplegable (<SELECT>) cuyo contenido son los datos que se han introducido
en ese mismo campo en ocasiones anteriores.
Visto as suena incluso interesante.... a condicin de que el usuario sea siempre
el mismo, claro. Porque, qu ocurre si el formulario est incluido en una pgina
que es utilizada por numerosas personas en una sala comn con mquinas
pblicas, como una sala de usuarios o un cibercaf? Pues que si el siguiente
usuario se conecta a la misma pgina, puede ver los datos que escribi su
antecesor en esa mquina.
Para evitarlo, existe un parmetro, poco conocido en general, que debe incluirse
en la definicin del formulario, y que no tiene ningn efecto en los navegadores
que no tienen la costumbre de ser tan indiscretos. As:
<FORM
NAME="MI_FORMULARIO"
AUTOMPLETE="OFF">
...
...
</FORM>
METHOD="POST"
Orden de tabulacin en los formularios

De forma predeterminada, el orden de tabulacin es el mismo que el orden en
que los elementos se han escrito. Puede darse el caso de que necesites que el
orden de tabulacin de los elementos de un formulario no sea el mismo en el
que estan escritos. Para ello se puede incluir en todos los elementos el
parmetro TABINDEX=n donde n es el nmero de orden deseado de cada uno.
Si se va a alterar el orden natural de tabulacin, conviene hacerlo con todos los
elementos del formulario. En cualquier caso, el navegador hace dos grupos de
tabulacin, los que tienen el parmetro TABINDEX y los que no. Seguir el
orden de los valores y a continuacin pasar a los que no tengan numeracin,
siguiendo el orden de escritura. He aqu un ejemplo de la sintaxis:
<FORM NAME="MI_FORMULARIO" METHOD="POST">
<INPUT
TYPE="text"
NAME="Campo1"
<INPUT TYPE="text" NAME="Campo2" TABINDEX=1>
</FORM>
TABINDEX=2>
En este caso, "Campo2" sera el primero en recibir el cursor. Todo esto slo
funciona con navegadores de versiones recientes.
96

Desactivar elementos en los formularios
Con casi todos los navegadores modernos se pueden bloquear los elementos
que forman un formulario, todos o algunos de ellos. Y puede que te preguntes
qu inters tiene bloquear un formulario. Puede ser necesario en aplicaciones
dinmicas en las que interese bloquear partes del formulario segn el usuario
cumplimente unos opciones u otras. Para ello se utiliza el parmetro DISABLED.
Este parmetro es accesible desde JavaScript y VBScript. Se escribe:
<FORM NAME="MI_FORMULARIO" METHOD="POST">
<INPUT TYPE="text" NAME="Campo1" VALUE="Control
DISABLED>
<INPUT TYPE="text" NAME="Campo2">
</FORM>
desactivado"
Se puede aplicar a cualquier objeto contenido en el formulario. Este sera el

resultado:
Control desac

Como puedes ver, el efecto es parecido al que se consigue con la opcin de
estilo readonly, pero con DISABLED se impide incluso el que se pueda
seleccionar el contenido del control (no se produce el evento onFocus) y con
readonly no.
97

Ejemplos de formularios
Juego de botones direccionados a pginas LOCALES.
Esto slo funciona abriendo la pgina como file:/// no como servicio http://.
Indice
Notas
Cmo funciona?
<TABLE>
<TR>
<TD>
<FORM METHOD="GET" ACTION="indice.htm">
<INPUT TYPE="SUBMIT" VALUE="Indice">
</FORM>
</TD>
<TD>
<FORM METHOD="GET" ACTION="notas.htm">
<INPUT TYPE="SUBMIT" VALUE="Notas">
</FORM>
</TD>
<TD>
<FORM METHOD="GET" ACTION="como.htm">
<INPUT TYPE="SUBMIT" VALUE="Cmo funciona?">
</FORM>
</TD>
</TR>
</TABLE>
Juego de botones direccionados a pginas REMOTAS.

Puede funcionar abriendo la pgina como servicio http:// o como file:///. pero deber
utilizarse METHOD=GET en lugar de METHOD=POST.
Indice
Notas
Cmo funciona?
<TABLE>
<TR>
<TD>
<FORM METHOD="GET"
ACTION="http://sestud.uv.es/manual.esp/indice.htm">
<INPUT TYPE="SUBMIT" VALUE="Indice">
</FORM>
</TD>
<TD>
<FORM METHOD="GET" ACTION="http://sestud.uv.es/manual.esp/notas.htm">
<INPUT TYPE="SUBMIT" VALUE="Notas">
</FORM>
</TD>
<TD>
<FORM METHOD="GET" ACTION="http://sestud.uv.es/manual.esp/como.htm">
<INPUT TYPE="SUBMIT" VALUE="Cmo funciona?">
</FORM>
98

</TD>
</TR>
</TABLE>
1 campo vaco. Longitud no limitada.

1 campo vaco. Longitud limitada a 10
Procesar
Inicializar
<FORM METHOD="POST" ACTION="http://miservidor/cgi-bin/test2-cgi">

<INPUT NAME="campo2" SIZE=10 MAXLENGTH=10>
<P>
<INPUT TYPE="submit" VALUE="Procesar">
<INPUT TYPE="reset" VALUE="Inicializar"></FORM>
1 campo vaco. Longitud no limitada.

1 campo con contenido visible.
1 campo con contenido oculto
TEXTO VISIBL
Procesar
Inicializar
<form method="POST" action="http://miservidor/cgi-bin/test2-cgi">

<input name="campo1">
<input name="campo2" VALUE="TEXTO VISIBLE">
<input type="password" name="campo3" VALUE="TEXTO OCULTO">
<P>
<input type="submit" value="Procesar">
<input type="reset" value="Inicializar"></form>
1 campo vaco. Longitud sin limitar.

1 campo vaco. Longitud limitada a 10.
2 botones de seleccin.
Clase A
Procesar
Clase B
Inicializar

<P>
Clase A <INPUT TYPE="RADIO" NAME="clase" VALUE="A">
Clase B <INPUT TYPE="RADIO" NAME="clase" VALUE="B">
99

<P>
</form>
1 campo vaco. Longitud sin limitar.

1 campo vacio. Longitud limitada a 10.
2 botones seleccin
2 casillas seleccin
Clase A
Tipo 1
Procesar
Clase B
Tipo 2
Inicializar

<P>
Clase A <INPUT TYPE="RADIO" NAME="clase" VALUE="A">
Clase B <INPUT TYPE="RADIO" NAME="clase" VALUE="B">
<P>
Tipo 1 <INPUT TYPE="CHECKBOX" NAME="tipo" VALUE="1">
Tipo 2 <INPUT TYPE="CHECKBOX" NAME="tipo" VALUE="2">
<P>
</form>
1 lista desplegable de 3 valores. 1 visible

Procesar
Inicializar
Valor 1

<SELECT NAME="lista1">
<OPTION>Valor 1
<OPTION>Valor 2
<OPTION>Valor 3
</SELECT>
</FORM>
1 lista desplegable de 5 valores. 3 visibles.

Valor 1
Valor 2
Valor 3
100

Procesar
Inicializar

<SELECT NAME="lista1" SIZE=3>
<OPTION>Valor 1
<OPTION>Valor 2
<OPTION>Valor 3
<OPTION>Valor 4
<OPTION>Valor 5
</SELECT>
<P>
</FORM>
1 Ventana de texto de 5x40
Procesar
Inicializar

<TEXTAREA NAME="texto1" ROWS=5 COLS=40 ></TEXTAREA>
<P>
</FORM>
Un tpico y complejo formulario

Nombre:
F.Nac.:
Apellidos:
Calle y nmero:
Cdigo Postal:
Ciudad:
Provincia:
Opcin:
Telfono:
OPCION 1
Escoja una opcin
Comentarios
personales:
101
DNI:

Pulse aqu:
Enviar datos
Borrar los datos
<FORM ACTION="http://miserver.midominio.mipais/cgi-bin/test2-cgi"
METHOD=POST>
<CENTER>
<TABLE BORDER>
<TR>
<TD>Nombre:</TD>
<TD> <INPUT TYPE="text" NAME="nombre" SIZE=18 MAXLENGTH=18> F.Nac.:
<INPUT TYPE="text" NAME="edad" SIZE=8 MAXLENGTH=8> DNI:
<INPUT TYPE="text" NAME="dni" SIZE=8 MAXLENGTH=8></TD>
<TR>
<TD>Apellidos:</TD>
<TD> <INPUT TYPE="text" NAME="apellidos" SIZE=48 MAXLENGTH=48></TD>
<TR>
<TD>Calle y nmero:</TD>
<TD> <INPUT TYPE="text" NAME="domicilio" SIZE=48 MAXLENGTH=48></TD>
<TR>
<TD>Cdigo Postal:</TD>
<TD> <INPUT TYPE="text" NAME="postal" SIZE=5 MAXLENGTH=5>Ciudad:
<INPUT TYPE="text" NAME="localidad" SIZE=36 MAXLENGTH=36></TD>
<TR>
<TD>Provincia: </TD>
<TD> <INPUT TYPE="text" NAME="provincia" SIZE=20 MAXLENGTH=20>
Telfono:
<INPUT TYPE="text" NAME="telefono" SIZE=19 MAXLENGTH=19></TD>
<TR>
<TD>Opcin:</TD>
<TD> <SELECT NAME="OPCION">
<OPTION>OPCION 1
<OPTION>OPCION 2
<OPTION>OPCION 3
<OPTION>OPCION 4
<OPTION>OPCION 5
</SELECT>Escoja una opcin</TD>
<TR>
<TD>Comentarios<BR> personales:</TD>
<TD> <TEXTAREA NAME="coment" ROWS=2 COLS=48></TEXTAREA></TD>
<TR>
<TD><B>Pulse aqu:</B></TD>
<TD ALIGN=CENTER>
<INPUT TYPE="submit" VALUE="Enviar datos ">
<INPUT TYPE="reset" VALUE="Borrar los datos"></TD>
</TABLE>
</CENTER>
</FORM>
102

Multimedia
De un modo similar a como se inserta una imagen se puede insertar un fichero
de sonido o de vdeo.
Sonido de fondo al cargar la pgina
En este caso la etiqueta depende del navegador, ya que se implementa de
forma diferente en el Explorer y el Netscape. Los formatos ms usados
son mid (para temas musicales sin voces) , wav y au.
Netscape
La etiqueta bsica para que se cargue el fichero de msica con la pgina, sin
intervencin del usuario, es en Netscape (siendo obligatorio especificar el
tamao):
<EMBED SRC="gifs/derroche.mid" WIDTH=144 HEIGHT=30>
En Netscape se ver para WIDTH=160
HEIGHT=70 como:
La etiqueta EMBED tiene multitud de atributos, he aqu
algunos.
AUTOSTART= FALSE (por defecto) y TRUE. Este ltimo hace que suene
inmediatamente despus de cargar la pgina sin necesidad de pulsar el botn.
HIDDEN=TRUE, oculta la consola y slo tiene este valor . Como no se podra
activar el sonido pulsando el botn, suene al cargar la pgina
LOOP=FALSE ,TRUE(por defecto),N para oir el fichero una vez, infinitas o el
nmero que especifiquemos en N
CONTROLS=SMALLCONSOLE, aparece una consola pequeita
Si pones esta etiqueta, las versiones ms recientes del Explorer (desde la 4.0)
tambin la interpretan correctamente, salvo LOOP. El Explorer lee el fichero una
vez para LOOP=0 y lo repite indefinidamente para N igual a otro valor
cualquiera.
103

Explorer
El Explorer ofrece menos posibilidades para manejar estos ficheros. La etiqueta

bsica para que se cargue la msica con la pgina es:
<BGSOUND SRC="fichero de sonido" LOOP= n INFINITE>
donde n es el nmero de veces que se oye el fichero: 1, 2, 3 ... o infinitas
Sonido de fondo en los dos navegadores
Si deseas que suene la msica al cargar la pgina con los dos navegadores
debes escribir las etiquetas para ambos.
Es decir debes poner:
<bgsound src="../gifs/houston.mid">
<embed src="../gifs/houston.mid" Hidden="true" >
para que suene una vez

o bien:
<BGSOUND SRC="../gifs/cantina.wav" LOOP=infinite>
<EMBED SRC="../gifs/cantina.wav" WIDTH=200 HEIGHT=55 AUTOSTART="true"
LOOP="true" HIDDEN="true">
para que se ejecute indefinidamente.
Sonido desde un enlace en la pgina
Si no quieres que se cargue la msica con la pgina, algo que llega a resultar
bastante pesado a veces, debes poner un enlace al fichero de sonido, lo que
funciona con ambos navegadores: Netscape y Explorer.
Tambin puedes poner cualquier otro tipo de ficheros de sonido, como mp3, que
comprime hasta 12 veces la msica, sin prdida apreciable de calidad.
104

Vdeo
El gran problema de los ficheros de vdeo es su tamao, ya que unos pocos

segundos pueden representar varios Mb (mega bytes) de tamao.
Probablemente en el futuro se ir generalizando su uso, ya que aumentar la
velocidad
en
la
Red.
Los
formatos
que
se
emplean
son
variados: avi, mpeg, ram, mov, etc, que pueden reproducir a la vez sonido y
vdeo.
Los ficheros avi y mpeg se reproducen con el Reproductor Multimedia de
Windows, pero los dems necesitan visores propios que se deben instalar
previamente. Por ejemplo los ficheros ram se visualizan con Real Player, los
mov con Quick Time, etc.
Son los llamados plug-in
En Netscape, la etiqueta es muy parecida a la de sonido, siendo obligatorio
especificar tambin las dimensiones:
<EMBED SRC="video.avi" HEIGHT=300 WIDTH=400 AUTOSTART=false LOOP=false>
En explorer debes llamar al fichero con un enlace

<A HREF="gifs/jordan.avi">Mira el vdeo de Jordan</A>
lo que abrir el programa asociado al tipo de vdeo elegido cuando lo pulses. En

el Netscape tambin puedes hacer esto mismo.
105

Lenguaje HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lenguaje HTML

Uploaded by

Copyright:

Available Formats

Instituto Tecnolgico de Orizaba

Herramientas para desarrollo Web

Un esquema uniforme de nombres para localizar recursos en la Web

Introduccin a los URIs

El esquema de nombres del mecanismo usado para acceder al recurso.

Consideremos el URI que designa la pgina de Informes Tcnicos del W3C:

Instituto Tecnolgico de Orizaba

Instituto Tecnolgico de Orizaba

Instituto Tecnolgico de Orizaba

Instituto Tecnolgico de Orizaba

Esquema de la evolucin de HTML y XHTML

Instituto Tecnolgico de Orizaba

CSS es el mecanismo que permite separar los contenidos definidos mediante

Esquema de la separacin de los contenidos y su presentacin

Una ventaja aadida de la separacin de los contenidos y su presentacin es

Instituto Tecnolgico de Orizaba

Estructura de una pgina HTML

El tipo de documento no es obligatorio a efectos prcticos, es decir que la

Indica que cumple el estndar HTML 4.0

Significa que cumple el estndar HTML 4.0 y, adems, no contiene elementos

Instituto Tecnolgico de Orizaba

cuidado: el que no se vea de forma normal en el navegador, no significa que no

Instituto Tecnolgico de Orizaba

Cabecera (HEAD) de un documento HTML.

que es una breve descripcin que identifica la pgina.

No hay que confundir el elemento <TITLE> con el nombre del fichero.

Dentro de la HEAD puede utilizarse otro elemento: META. Por ejemplo, si se

Esto hace que el visualizador vuelva a cargar la pgina activa al cabo de 10

Utilizar esto con precaucin. Si se sabe que el contenido de la pgina no va a

Instituto Tecnolgico de Orizaba

Si se pone una fecha ya pasada, como la que hay en el ejemplo, el navegador

Otra opcin es impedir directamente que el navegador guarde en cach la

Si se tiene inters en que las pginas aparezcan en los grandes buscadores de

Instituto Tecnolgico de Orizaba

Instituto Tecnolgico de Orizaba

Cuerpo (BODY) de un documento

marginwidth="pixels", para los mrgenes izquierdo y derecho.

En cambio, el Internet Explorer, utiliza uno para cada cual:

leftmargin="pixels", para el margen izquierdo

Instituto Tecnolgico de Orizaba

Tamaos y tipos de letra en HTML.

y este sera el resultado:

Texto de prueba (H1)

Texto de prueba (H2)

Texto de prueba (H4)

No olvidar poner el cierre </Hx> a cada elemento utilizado.Este tipo de elemento

Instituto Tecnolgico de Orizaba

Dar como resultado:

Instituto Tecnolgico de Orizaba

Texto de prueba 12345 con tipo IMPACT

Instituto Tecnolgico de Orizaba

Texto de prueba 12345 con tipos alternativos

Instituto Tecnolgico de Orizaba

COLOR="magenta">Texto MAGENTA </FONT>

Esto es una Prueba

Instituto Tecnolgico de Orizaba

Las distintas definiciones de los bloques. Separadores.

y este sera el resultado:

Texto de prueba (H1)

Texto de prueba (H2)

Texto de prueba (H4)

No hay que olvidar poner el cierre </Hx> a cada elemento utilizado.

Instituto Tecnolgico de Orizaba

Y este sera el resultado: