1.

Introduccin al lenguaje HTML

El World Wide Web (WWW) es un sistema que contiene una
cantidad de informacin casi infinita. Pero esta informacin debe
estar ordenada de alguna forma de manera que sea posible
encontrar lo que se busca. La unidad bsica donde est
almacenada esta informacin son las pginas Web. Estas pginas
se caracterizan por contener texto, imgenes, animaciones... e
incluso sonido y video.
Una de las caractersticas ms importantes de las pginas Web es
que son hipertexto. Esto quiere decir que las pginas no son
elementos aislados, sino que estn unidas a otras mediante los
links o enlaces hipertexto. Gracias a estos enlaces el navegante de
Internet puede pulsar sobre un texto (texto al que llamaremos de
ahora en adelante activo) de una pgina para navegar hasta otra
pgina. Ser cuestin del programador de la pgina inicial decidir
que palabras o frases sern activas y a donde nos conducir pulsar
sobre ellas.
En algunos ambientes se discute que el World Wide Web ya no es
un sistema hipertexto sino hipermedia. Los que defienden el cambio
se apoyan en que aunque en sus orgenes el WWW constaba
nicamente de texto en la actualidad es un sistema principalmente
grfico y se puede hacer que las zonas activas sean, no slo texto,
sino imgenes, videos, botones,... en definitiva cualquier elemento
de una pgina. An as, el trmino original no ha sido reemplazado
todava y por tanto ser el empleado a lo largo de esta obra.
Figura 1.1. Aunque al principio el texto predominaba en el
WWW, en la actualidad las imgenes son mayora como
podemos observar en una de las principales webs del proyecto
KDE.

Caractersticas del lenguaje HTML

Pero empecemos ya con lo que nos interesa. Cmo se hace una
pgina Web? Cuando los diseadores del WWW se hicieron esta
pregunta decidieron que se deban cumplir, entre otras, las
siguientes caractersticas:
El Web tena que ser distribuido: La informacin repartida en
pginas no muy grandes enlazadas entre s.
El Web tena que ser hipertexto y deba ser fcil navegar por l.
Tena que ser compatible con todo tipo de ordenadores (PCs,
Macintosh, estaciones de trabajo...) y con todo tipo de sistemas
operativos (Windows, MS-DOS, UNIX, MAC-OS,...).
Deba ser dinmico: el proceso de cambiar y actualizar la
informacin deba ser gil y rpido.
Estas caractersticas son las que marcaron el diseo de todos los
elementos del WWW incluida la programacin de pginas Web.
Como respuesta a todos estos requisitos se creo el lenguaje HTML
(HiperText Markup Language), cuyas siglas significan "lenguaje
hipertexto de marcas".
Este lenguaje ser el encargado de convertir un inocente archivo de
texto inicial en una pgina web con diferentes tipos y tamaos de
letra, con imgenes impactantes, animaciones sorprendentes,
formularios interactivos, etc.
Qu se necesita para crear una pgina web
Una de las caractersticas de este lenguaje ms importantes para el
programador es que no es necesario ningn programa especial
para crear una pgina Web. Gracias a ello se ha conseguido que se
puedan crear pginas con cualquier ordenador y sistema operativo.
El cdigo HTML, como hemos adelantado en el prrafo anterior, no
es ms que texto y por tanto lo nico necesario para escribirlo es un

editor de texto como el que acompaan a todos los sistemas

operativos: edit en MS-DOS, block de notas en Windows,vien UNIX,
etc. Por supuesto estos no son los nicos editores de texto que
pueden ser usados, sino cualquier otro. Tambin se puede usar
procesadores de texto, que son editores con capacidades aadidas,
compo pueden ser Microsoft Word o WordPerfect pero hay que
tener cuidado porque en ocasiones hacen traducciones automticas
del cdigo HTML que no siempre son deseadas. En estos dos
ltimos casos, tambin hay que tener en cuenta que deberemos
guardar el archivo en modo texto.
Figura 1.2. Un editor de texto simple, como el block de notas de
Windows, es todo lo necesario para crear una pgina Web

Una vez hemos escrito el cdigo deberemos guardar el archivo (con

formato de texto) con la extensin .html ( o .htm en MS-DOS,
Windows 3.1 o cualquier otro sistema que slo acepte tres letras en
la extensin. Los siguientes son nombres vlidos de archivos que
contengan cdigo HTML: index.html, index.htm,principal.html,
PRINCIPAL.htm, etc...
NOTA: Si el editor o procesador de textos usado para crear la
pgina obliga a usar la extensin .txt al guardar el archivo en modo
texto, deberemos guardarlo con esta extensin, por ejemplo como
index.txt, y posteriormente cambiar el nombre del archivo desde
fuera del programa a index.html o index.htm . Para ello usaremos el
comando rename en MS-DOS; en Windows 3.1 lo haremos
mediante el administrador de archivos y en Windows 95 con el
explorador. En otros entornos, como Linux, es mas raro que se de
esta situacin.
ATENCIN: El World Wide Web es un sistema que diferencia las
maysculas de las minsculas. Es un error comn llamar a un

archivo index.html y luego referirse a l como Index.html. Aunque en

nuestro ordenador puede funcionar al publicarlo seguramente no lo
har. Por esta razn es una norma general usar siempre
minsculas para los nombres de los archivos html.
ltimamente han aparecido nuevas alternativas que facilitan la
programacin de pginas Web. Son los editores HTML. Podemos
dividir estos editores en dos grupos:
Asistentes: ayudan a crear el cdigo HTML e incluyen plantillas de
cdigo
prefabricadas,
por
ejemplo
HotDog
(Win),
HomeSite(Win),HTML Editor (Mac), Quanta (Linux, KDE) o Bluefish,
(Linux, GNOME).
Conversores: son programas con otra funcin que la de la
programacin Web pero que permiten convertir a HTML. Son
ejemplos de conversores Microsoft Word ,Quark XPress y
PageMaker.
Editores WYSIWYG (What You See Is What You Get, lo que ves es
lo que obtienes): estos editores permiten crear pginas web sin
escribir cdigo HTML como si se tratase de un programa de dibujo
por ordenador. Algunos ejemplos de este tipo de editores son
Macromedia Dreamweaver, HotMetal o Microsoft Frontpage.
Figura 1.3. Algunos editores WYSIWYG permiten, adems,
modificar el cdigo HTML directamente.

Algunas razones para usar HTML

Todos estos editores HTML tipos pueden ser de gran ayuda y tienen
sus ventajas e inconvenientes, pero la experiencia demuestra que
conocer el lenguaje HTML ofrece bastantes ventajas:
Seremos capaces de aprovechar todas las caractersticas de este
lenguaje, incluso las ms nuevas.
Aunque se use inicialmente un editor WYSWYG tendremos los
conocimientos suficientes para modificar posteriormente el cdigo
que ste ha creado. As se pueden corregir errores o incluir
etiquetas no soportadas por el editor.
No dependeremos de la disponibilidad de una herramienta concreta
para poder crear pginas web. Con un simple editor de textos ser
suficiente.
El principal problema de usar editores conversores y WYSIWYG es
la necesidad de trabajar con dos archivos-fuentes por separado, por
un lado el archivo del editor y por otro el archivo del cdigo HTML
una vez generado, lo que nos complica la vida a la hora de realizar
cambios en nuestro Web. Sin embargo su utilidad es innegable y su
combinacin con un buen conocimiento del lenguaje HTML nos
convertir en unos grandes programadores de pginas Web
capaces de realizar creaciones impactantes visualmente y de gran
calidad tcnica.
HTML es un lenguaje descriptivo
Probablemente el lector ha usado alguna vez un procesador de
texto (Abiword, Microsoft Word o KWord) o un programa de
descripcin de pginas (QuarkXPress). Con este tipo de
aplicaciones el usuario tiene un control total sobre los elementos del
documento: se le puede decir al programa "pon este texto con este
tamao", "sitalo a 1 cm. del borde", "usa este sangrado para los
prrafos", etc... Con HTML el programador no tiene este tipo de
control sobre los elementos que incluir en su pgina. El objetivo de
este lenguaje ser simplemente describir cmo es una pgina de
manera que examinando esa descripcin el navegador del usuario
final sea capaz de mostrarlo de la mejor manera posible. Con HTML
podremos indicarle al navegador que este es un titular, aqu
comienza un prrafo, estos son elementos de una lista, etc.
posteriormente el navegador decidir como mostrar esos
elementos.
Figura 1.4. Los navegadores en modo texto como Lynx tambin
pueden mostrar pginas Web gracias al carcter descriptivo de
HTML.

Por qu funciona as? En un principio esta caracterstica del HTML

puede resultar molesta para el creador de la pgina, que no puede
saber como ser vista su pgina ms que de una forma
aproximada. Sin embargo es fundamental para conseguir que el
World Wide Web pueda ser navegado con cualquier tipo de
ordenador (dicho con otras palabras, que el WWW sea
multiplataforma). Debemos tener en cuenta que no todos los
sistemas operativos son grficos, que incluso usando un mismo
sistema operativo existen diferentes resoluciones de pantalla, ... Por
esta razn el lenguaje necesario para crear pginas debe ser
descriptivo y como consecuencia tras crear una pgina el
programador debe ver como es mostrada con varios navegadores
distintos como Netscape Navigator o Microsoft Internet Explorer
incluyendo algn navegador de texto como Lynx.
Pero una consecuencia ms importante an de esta caracterstica,
es que ha permitido que aparezcan navegadores vocales, que leen
las pginas en vez de mostrarlas. Gracias a ello personas ciegas
tambin han podido disfrutar del WWW. Es ms, esta misma
tecnologa esta siendo usada para los nuevos navegadores
embarcados en coches que leen la pgina al conductor para que no
se distraiga.
NOTA: Una vez creada una pgina es recomendable probar nuestra
pgina, no slo con varios navegadores, sino tambin con varias
resoluciones de pantalla distintas como por ejemplo: 640x480,
800x600 y 1024x768. Si existe la posibilidad de probarlo adems
con un navegador vocal, mucho mejor an.
Un buen ejemplo de este carcter descriptivo es la definicin de
titulares, tambin llamados encabezados, en HTML. Vamos a
adelantarnos un poco en esta introduccin para mostrar este
ejemplo, en l se muestra como poner el titular de una pgina:

<h1>Bienvenido a la pgina de La Super Editorial</h1>

Con este cdigo estamos describiendo el texto Bienvenido a la
pgina de La Super Editorial como el texto de mxima importancia
en nuestra pgina, es el titular. En los navegadores ms usados
como el Netscape Navigator o el Microsoft Internet Explorer este
titular ser mostrado como un texto en negrita y de tamao grande
(el tamao ms grande posible). Sin embargo repetimos una vez
ms que existen navegadores como pueden ser Lynx o Emacs-W3
que son bastante usados por la comunidad acadmica y
universitaria que slo pueden mostrar texto y no pueden variar el
tamao de la letra. Por esta razn la etiqueta <h1> no dice que el
texto que encierra debe ser de tal tamao o si debe ser negrita o no.
Esta etiqueta slo le dice que este texto es el ms importante de la
pgina, el titular. Sabiendo esto el navegador que funcione en modo
texto puede resaltar dicho titular con los medios de que dispone,
como por ejemplo ponindolo en maysculas o usando distintos
sangrados.
Tambin podemos encontrar ventajas de la descripcin mirando al
futuro. Imaginemos que la informtica evoluciona hasta tal punto
que los monitores de dentro de unos aos pueden mostrar objetos
en tres dimensiones. Sera muy interesante que el titular de nuestra
pgina fuese en 3-D de manera que resaltase lo mximo posible.
Pues bien, si lo hemos definido como cabecera principal (y no como
letra de tamao 20 puntos y en negrita, por ejemplo) el navegador
sabe que queremos que ese texto sea el ms importante y puede
actuar de manera inteligente ponindolo automticamente en tres
dimensiones, sin que nosotros hayamos cambiado una sola lnea
de nuestro cdigo! Parece interesante no?
Una vez a quedado claro cual es el espritu de HTML, hay que decir
que ltimamente se han introducido mtodos para conseguir un
mayor control sobre las pginas. Estos mtodos permiten controlar
aspectos como el tamao de la letra la disposicin (aproximada) de
imgenes y texto de manera que se facilita la labor del
programador. Pero hay que tener siempre en mente que siempre
habr ligeras diferencias entre como vern las pginas unos
usuarios u otros y no debemos pretender poder controlar la
presentacin y diseo de nuestra pgina hasta el mnimo detalle.
1.5. Las bases de HTML
Una vez repasadas unas nociones bsicas de HTML y de la
programacin de pginas Web en general entraremos de lleno en la
programacin con este lenguaje. Pronto nos daremos cuenta de la
sencillez de este lenguaje lo que le convierte en un lenguaje muy

fcil de aprender y que nos permitir crear pginas con mayor

facilidad an.
Las rdenes de este lenguaje estarn formadas por unos comandos
llamados etiquetas que pueden tener o bien la siguiente estructura:
<NOMBRE_ETIQUETA>
O bien esta otra:
<NOMBRE_ETIQUETA> TEXTO </NOMBRE ETIQUETA>
Como vemos, la primera estructura est formada por una nica
instruccin y la segunda por dos: una que marca el inicio de la
etiqueta y otra que marca el final, con texto entre ambas.
Por ejemplo, para indicarle al navegador que queremos que pinte
una lnea horizontal debemos escribir:
<hr>
As de sencillo. Como vemos, el nombre de la etiqueta va delimitado
por los smbolos menor que (<) y mayor que (>), todas las
instrucciones de HTML deben ir encerradas entre estos dos
smbolos.
Pero las etiquetas no se limitan a indicar ordenes tan sencillas,
estas rdenes tienen en ocasiones parmetros. Por ejemplo la
etiqueta <hr> tal y como lo hemos hecho anteriormente dara lugar
a la lnea que vemos en la figura 1.5, es decir le dice al navegador
que dibuje una lnea horizontal en la pantalla. Esta lnea tiene un
grosor predeterminado y un ancho variable en funcin del tamao
de la ventana del navegador.
Figura 1.5. Uso bsico de una etiqueta HTML sin ningn tipo de
parmetros. Ejemplo usando la etiqueta <hr> para crear una
lnea horizontal.

Sin embargo hay muchas formas de pintar una lnea y sera

deseable poder elegir detalles tales como la anchura y el grosor que
va a tener dicha lnea. Para especificar este tipo de detalles se
crearon los atributos de las etiquetas. Este nuevo elemento se
introduce en una etiqueta de la siguiente manera:

<etiqueta atributo="valor">
Es decir, en primer lugar ponemos el nombre de la etiqueta,
despus el nombre del atributo seguido por un signo igual y
posteriormente el valor que queramos darle a ese atributo
encerrado entre comillas una etiqueta puede tener tantos atributos
como se deseen y en ocasiones son necesarios para que la
etiqueta tenga algn significado.
En nuestro ejemplo de la lnea horizontal existe un atributo llamado
SIZE, que significa tamao en ingls, que permite controlar el
grosor de la lnea que ser dibujada en pantalla. Veamos un
ejemplo, en la figura 1.6 podemos ver la lnea horizontal con
diferentes grosores.
Figura 1.6. Las etiquetas tienen atributos para cambiar
aspectos del efecto que producen. En este ejemplo vemos
como se puede cambiar el grosor de una lnea con el atributo
SIZE.

El valor que toma el atributo size determina el nmero de puntos de

pantalla o pixeles que debe ocupar, en grosor, la lnea. En
posteriores captulos estudiaremos en detalle la etiqueta <hr> y
todos sus atributos.
En la figura 1.6 vemos que el valor numrico que le damos al
atributo size no va entrecomillado, por ejemplo en <hr size=5>. En
HTML no es necesario entrecomillar los valores de los atributos
cuando estn formados nicamente por nmeros [0-9], letras [a-z,
A-Z], guiones y puntos. En todo caso es muy recomendable incluir
las comillas siempre. De esta forma no tenemos que preocuparnos
de cuando ponerlas y cuando no y a la vez cumplimos el nuevo

estndar XHTML. Para los curiosos adelantaremos que XHTML es

idntico a HTML pero con algunas restricciones adicionales del
mundo de XML.
Antes de empezar con el cdigo HTML bsico conviene hacer saber
al lector que aunque en todos los ejemplos usados hasta ahora las
etiquetas usadas estaban escritas en maysculas en realidad es
indiferente el uso de estas o de minsculas. Sin embargo las
maysculas son de uso comn para que sea ms fcil distinguirlas
del texto y por tanto seguiremos usando este convenio a lo largo del
curso.
En los ejemplos tambin usaremos distinto sangrado (alineacin de
los prrafos) para los diferentes elementos del cdigo para mostrar
los niveles de anidamiento. Este sangrado no es necesario y el
lector puede optar por ignorarlo si decide copiar los ejemplos para
verlos en su navegador, sin embargo facilita la lectura del cdigo y
no afecta al modo en que los objetos de nuestra pgina sern
mostrados.
2. Primeros pasos con HTML
Anterior | Inicio | Siguiente
Conocidas ya las principales caractersticas de HTML estamos listos
para aprender sus principales etiquetas y para crear nuestra
primera pgina.
2.1. Estructura de una pgina
Todo documento HTML est formado por los bloques que podemos
apreciar en la figura 2.1. Pasemos a explicar cada uno de ellos.
Figura 2.1. Estructura de bloques de un documento HTML.

En primer lugar deberemos especificar que el archivo de texto que

estamos escribiendo es un documento HTML, para ello usamos las
instrucciones de inicio y fin de la etiqueta <html> al principio y al
final de la pgina respectivamente:
<html>
Cdigo de la pgina
</html>

El cdigo de la pgina esta formado a su vez por dos grandes

bloques, la cabecera y el cuerpo.
La cabecera de la pgina est delimitada por las instrucciones de
inicio y fin de la etiqueta head. Estas instrucciones deben estar
dentro de la etiqueta HTML de la siguiente manera:
<html>
<head>
Elementos de la cabecera
</head>
... Resto de cdigo de la pgina ...
</html>
En la cabecera de la pgina se introduce toda aquella informacin
que afectar a toda la pgina. En un principio esta informacin se
limitar al ttulo. Este ttulo se indicar con la etiqueta title usando la
siguiente sintaxis:
<html>
<head>
<title>Mi primera pgina WEB</title>
</head>
</html>
El resultado de ver esta pgina con nuestro navegador es el que se
observa en la figura 2.2. Como vemos, el rea de la pantalla donde
suele estar la pgina est todava vaca, pero si nos fijamos en la
cabecera de la ventana del navegador vemos que el ttulo a pasado
de ser Microsoft Internet Explorer a "Mi primera pgina WEB Microsoft Internet Explorer". Es decir el ttulo que le demos a
nuestra pgina con la etiqueta <TITLE> pasar a ser el ttulo de la
ventana del navegador.
Figura 2.2. El ttulo de la pgina es mostrado en la parte
superior de la ventana del navegador.

Adems cuando un usuario vea nuestra pgina y decida incluirla en

su lista de webs preferidos con la opcin agregar a favoritos del
men Favoritos del navegador (en este caso el explorer) aadir el
nombre que le hemos dado a nuestra pgina en dicho men, tal y
como podemos apreciar en la figura 2.3. Aunque el nombre con el
que se almacena un Favorito puede ser cambiado por el usuario, si
hemos puesto un buen ttulo, lo suficientemente descriptivo a cada
una de nuestras pginas le evitaremos esa molestia.
Figura 2.3. Cuando los navegantes incluyan nuestra pgina a
su men de favoritos en su men aparecer el ttulo que le
hayamos dado a nuestra pgina con la etiqueta <TITLE> .

Es importante resaltar que nada de lo que se ponga en la cabecera

de la pgina ser mostrado en la zona del navegador dedicada a
mostrar el contenido, es decir, en la zona que vemos en blanco en
la figura 2.2.
Esto nos induce a pensar que existe otra forma de indicar como
ser el contenido de la pgina, pues as es: el cuerpo es el siguiente
gran bloque de nuestro documento HTML, ste quedar delimitado
por la etiqueta body. En su interior introduciremos todos aquellos
elementos de los que queremos que conste nuestra pgina como
pueden ser testo, imgenes, tablas, etc. Conociendo la etiqueta
body podemos ampliar el ejemplo anterior para que incluya texto.
<html>
<head>
<title>Mi primera pgina WEB</title>
</head>
<body>
Hola a todos, como han deducido por el titulo esta es la
primera pagina web que hago, espero que les
guste. Fdo. Jorge
</body>
</html>
En la figura 2.4 podemos apreciar como muestra el Internet Explorer
este cdigo. Como vemos todo el texto que hemos escrito entre las
instrucciones de inicio y fin forman ahora el cuerpo de nuestra
pgina.

Figura 2.4. En esta figura observamos la zona de la ventana en

la que los navegadores mostrarn el texto que pongamos en el
cuerpo de la pgina.

NOTA: Es posible que aunque no incluyamos las etiquetas html o

body nuestras pginas sean visualizadas con algunos navegadores.
Sin embargo no debemos confiarnos ya que lo ms seguro es que
con el resto de navegadores no se vean bien. Por esta razn es
muy recomendable usar ambas etiquetas tal y como se ha descrito.
Una vez que ya sabemos insertar contenido en una pgina
pasaremos a estudiar las diferentes etiquetas que sirven para darle
formato a ese contenido.
2.2. Los encabezados
Usualmente un documento tiene, adems de texto llano, una serie
de encabezados o titulares. Para ello el lenguaje HTML posee una
serie de etiquetas que permiten disponer de titulares de hasta 6
niveles de importancia.
Estas etiquetas son: <h1>, <h2>, <h3>, <h4>, <h5> y <H6>. La letra
"h" al principio del nombre de estas etiquetas provien de la
abreviatura de la palabra inglesa heading que significa encabezado.
Siguiendo a la hache hay un nmero del uno al seis que indica la
importancia del titular siendo el ms importante el uno y el menos

importante el seis. En la figura 2.5 se puede ver un ejemplo de

cmo muestra las cabeceras Internet Explorer.
Figura 2.5. Distintos tipos de encabezados vistos con Microsoft
Internet Explorer.

El cdigo usado en este ejemplo es el siguiente:

<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>
NOTA: Los encabezados empiezan siempre en una lnea nueva y el
texto que les sigue comenzar en la lnea siguiente. Adems el
navegador podr mostrar un espacio vertical adicional entre el
encabezado y el texto anterior y posterior.
En l observamos que todos los titulares estn en negrita y el
tamao de la fuente usada para cada encabezado va decreciendo
conforme decrece la importancia del titular. Pero hay que tener en
cuenta, tal y como comentbamos en la introduccin, que este es

slo un ejemplo y que otros navegadores pueden mostrar estos

encabezados de manera diferente.
Por otro lado los navegadores ms usados hoy en da son el
Internet Explorer y el Netscape Navigator y es normal prestarles una
atencin especial (aunque no exclusiva). Y en la figura 2.6 podemos
apreciar cmo con este ltimo se muestra los encabezados de una
manera prcticamente idntica. Por esta razn podemos estar casi
seguros de que los usuarios vern los encabezados de la forma
mostrada en ambas figuras.
Figura 2.6. Distintos tipos de encabezados vistos con Netscape
Navigator

Hay que destacar que los encabezados de h1 a h4 pueden ser

usados como ttulos ya que los navegadores suelen usar un tamao
de letra mayor que el habitual para mostrarlos. Sin embargo los
encabezados h5 y h6 suelen ser mostrados con letra ms pequea
an que el texto y por esta razn se usan como notas a pie de
pgina o comentarios de poca importancia.
2.3. El ejemplo mejorado
Ahora que sabemos usar encabezados los utilizaremos para
mejorar ligeramente nuestra pgina. En la figura 2.7 podemos ver
cmo se muestran las modificaciones.
Figura 2.7. Ejemplo de pgina Web con dos tipos de
encabezados y dos prrafos.

Esta pgina ha sido creada con el siguiente cdigo:

<html>
<head>
<title>Mi primera pgina WEB</title>
</head>
<body>
<h1>Mi primera pgina WEB</h1>
<h2>Bienvenida</h2>
Hola a todos, como han deducido por el titulo esta es la
primera pagina web que hago, espero que les guste. Fdo.
Jorge
<h2>Proposito</h2>
En esta pgina ir practicando con los conocimientos que
adquiera en el curso de HTML
</body>
</html>

3. Parrafos en HTML
Anterior | Inicio | Siguiente
Ha llegado el momento de aprender a introducir un texto en una
pgina web, pero antes es necesario comprender cmo ser
interpretado este texto. Cuando un navegador lee el cdigo HTML
de una pgina y lo interpreta para mostrar la pgina, todos los
espaciados mltiples, tabulados o saltos de lnea que se haya
incluido en los textos sern interpretados como un nico espacio.
Esta caracterstica suele sorprender (e incluso molestar) al principio,
pero es innegable que esta forma de actuar es necesaria y
concuerda con el carcter descriptivo de HTML.

La mejor manera de habituarse es probar, para ello proponemos los

siguientes ejemplos de cdigo que sern mostrados de la misma
forma por el navegador aunque algunos contengan saltos de lnea,
otros tabulados entre las palabras, etc.
<h1>El conductor del coche le pregunto si se encontraba
mal</h1>
<h1>
El conductor del coche le pregunt si se encontraba mal
</h1>
<h1>
El conductor del coche
le pregunto si se encontraba mal </h1>
En estos ejemplos podemos observar diversos saltos de lnea y
separaciones en el texto, sin embargo el navegador mostrar un
solo espacio entre las palabras y producir saltos de lnea donde
sea necesario en funcin del tamao de la ventana. Las figuras 2.1
y 2.2 son ejemplos de cmo muestra el Explorer los cdigos
anteriores para diferentes tamaos de ventana.
Figura 2.1. Uso bsico de una etiqueta HTML sin ningn tipo de
parmetros. Ejemplo usando la etiqueta <hr> para crear una
lnea horizontal.

Figura 2.2. Las etiquetas tienen atributos para cambiar

aspectos del efecto que producen. En este ejemplo vemos
como se puede cambiar el grosor de una lnea con el atributo
'size'

Conocida esta caracterstica es momento de adentrarse en las

distintas etiquetas que permiten tener un mayor control sobre el
texto de nuestras pginas.
Saltos de lnea
En ocasiones puede ser conveniente introducir un punto y aparte
cuando estamos escribiendo un texto. En HTML para hacer esto
puede usarse la etiqueta <br>. Cuando el navegador se encuentra
con esta etiqueta provoca un salto de lnea y sigue mostrando el
contenido de la pgina. Veamos un ejemplo:
Estaba internndose en lo desconocido. <br>
Durante todo el trayecto hasta Woodfield no dej de pensar en los
aspectos econmicos, con el temor de estar cometiendo...
En este texto podemos observar cmo tras el primer punto era
necesario un cambio de lnea, por lo que hemos usado <br>.
Cmo se insertan prrafos
Un prrafo es un conjunto de frases sobre un mismo asunto. En
HTML para demarcar un prrafo se usa la etiqueta p, situndose la
instruccin de inicio <p> al comienzo del prrafo y la instruccin de
fin </p> tras la ltima frase. Entre ellas pueden insertarse tantos
saltos de lnea como se deseen as como muchos otros elementos
HTML. A continuacin se muestra un ejemplo:

<p>
Estaba internndose en lo desconocido.
</p>
<p>
Durante todo el trayecto hasta
Woodfield no dej de pensar en los aspectos econmicos, con el
temor de estar cometiendo...
</p>
Otra opcin hubiera sido crear un nico prrafo e insertar un salto
de lnea tras la primera frase:
<p>
Estaba internndose en lo desconocido.
<br>
Durante todo el trayecto hasta
Woodfield no dej de pensar en los aspectos econmicos, con el
temor de estar cometiendo...
</p>
En la figura 2.3 se puede observar la diferencia entre los dos
ejemplos en Explorer. Puede observarse que en general los
navegadores dejan un espacio vertical antes y despus de cada
prrafo, algo que no ocurre con los saltos de lnea.
Figura 2.3. Ejemplo de un prrafo con un salto de lnea y la
divisin del mismo texto en dos prrafos.

Uso incorrecto de la etiqueta p

La etiqueta p es usada en muchas pginas de forma incorrecta.
El error consiste en emplearla simplemente para introducir un

espacio (vertical) entre lneas. La forma adecuada es introducir

las instrucciones de inicio y fin para marcar el comienzo y el fin de
un prrafo.
Espacio entre lneas
Para introducir un espacio vertical entre lneas debe usarse la
etiqueta <br>. Si se ponen varias seguidas no se mostrar ms
espacio, pero esto puede solucionarse insertando entre las
etiquetas la cadena " ". Por ejemplo para insertar tres lneas en
blanco puede usarse:
<br> &nbsp;
<br> &nbsp;
<br> &nbsp;
El atributo 'align' en la etiqueta <p> permite especificar la alineacin
del prrafo. Puede tener tres valores: "center", "left" y "right", para
obtener un prrafo centrado, alineado a la izquierda o alineado a la
derecha respectivamente. En la figura 2.4 se muestra el prrafo del
cdigo anterior con los tres tipos de alineacin.
Figura 2.4. Con el atributo 'align' se pueden crear prrafos
alineados a la derecha, centrados o alineados a la izquierda.

Lneas horizontales para separar prrafos

Si lo que se necesita es separar dos secciones diferentes de una

pgina, ya sea texto o no, puede emplearse una nueva etiqueta:
<hr>. Su nombre proviene del ingls Horizontal Rule (lnea
horizontal). Esta etiqueta est formada por una nica instruccin y
provoca que el navegador inserte una lnea horizontal como la
mostrada en la figura 2.3 que separaba los dos prrafos que se
estaban comparando. Existen cuatro atributos que permiten
modificar su apariencia. Estos son:
'align':
Permite cambiar la alineacin de la lnea. Puede tomar tres
valores:"left", "center" y "right" para conseguir alineacin a la
izquierda, centro y derecha respectivamente.
'noshade':
'noshade', que en ingls significa sin sombra, existe porque algunos
navegadores grficos como Navigator o Explorer muestran las
lneas horizontales con un efecto tridimensional con sombra. Al
incluir este atributo se elimina este efecto de manera que el
navegador slo mostrar una lnea horizontal negra.
'size':
Con este atributo se puede controlar el grosor de la lnea. Como
valor de este atributo se debe especificar el valor deseado en
pixeles (puntos de pantalla).
'width':
Este atributo permite especificar el ancho de la lnea. El valor puede
ser dado de una manera absoluta, especificando el ancho en
pixeles (por ejemplo width=100) o de manera relativa respecto al
ancho de la ventana del navegador usando porcentajes (por
ejemplo width="90%"). Es ms que recomendable usar este ltimo
sistema de manera que obtengamos un resultado apropiado
independientemente del tamao que cada usuario quiera dar a la
ventana de su navegador.
Estos atributos pueden ser usados conjuntamente para combinar
sus efectos. En la figura 2.5 podemos ver el efecto de cada uno por
separado en Explorer junto con los valores empleados en cada
caso.
Figura 2.5. Con los nuevos atributos de la etiqueta <hr>
podemos controlar el ancho, grosor alineamiento y sombra de
la lnea horizontal.

La etiqueta <blockquote>... </blockquote>

Otra etiqueta relacionada con el formato de prrafos en HTML es
<blockquote>, que consta de una instruccin de inicio y una de fin y que indica que
el prrafo que encierra es un texto parafraseado. Al usar esta etiqueta el navegador
mostrar el texto en u nuevo prrafo con mrgenes a la izquierda y a la derecha. En la
figura 2.6 puede verse un uso tpico de esta etiqueta.

No abusar de las lneas horizontales

Es conveniente no usar mucho las lneas horizontales,
limitndolas al comienzo y fin de la pgina. La razn de esto es
que las lneas en medio de la pgina dificultan la lectura de esta.
Si se desea separar secciones un espacio vertical del tamao
adecuado es ms efectivo.
Figura 2.6. La etiqueta <blockquote> es usada para insertar
bloques de texto que citan a otro autor. Los navegadores
suelen introducir un sangrado en este texto.

Que se corresponde con el cdigo:

Mi poema favorito es aquel de Federico Garca Lorca que reza:
<blockquote>
Mi corazn, como una sierpe<br>
se ha desprendido de su piel,<br>
y aqu la miro entre mis dedos<br>
llena de heridas y de miel<br>
</blockquote>
La etiqueta <address>... </address>
Muy relacionada con la anterior, es la etiqueta <address>, que en
ingls significa direccin. Esta etiqueta est compuesta, igualmente,
por dos instrucciones y se usa para incluir informacin sobre el
autor de una pgina WEB o elementos relacionados. Puede
encontrarse un ejemplo de su uso en las coletillas existentes al final
de muchas pginas en las que se incluye informacin variada para
el usuario como puede ser, adems del autor, la fecha de la ltima
modificacin, la fecha actual, la URL de la pgina, etc. como se
muestra en la figura 2.7.
Figura 2.7. En esta pgina se observa como al final de la pgina
se han incluido datos de los autores y de la pgina. Para ello se
ha usado la etiqueta <address>.

La etiqueta <center>... </center>

Acabamos de ver una serie de etiquetas que permiten cambiar de
lnea, crear distintos tipos de prrafos o insertar lneas que les
separen. Tambin hemos visto que alguna de las etiquetas
utilizadas tienen el atributo 'align' que permite indicar el
alineamiento.
En ocasiones puede ser muy til indicar que algn texto, imagen o
algn otro elemento de la pgina deba ser centrado. Sin embargo
no todas las etiquetas tienen el atributo 'align'. La solucin es
emplear una nueva etiqueta: center. sta est compuesta por una
instruccin de inicio y una de fin de manera que todo lo que
quedaba entre ellas, fuese lo que fuese, estuviese centrado. Por
ejemplo en el ejemplo del verso de Lorca podemos centrarlo
escribiendo:
Mi poema favorito es aquel de Federico Garca Lorca que reza:
<center>
<blockquote>
Mi corazn, como una sierpe <br>
se ha desprendido de su piel,<br>
y aqu la miro entre mis dedos<br>
llena de heridas y de miel <br>
</blockquote>
</center>
Y el resultado obtenido hubiese sido el de la figura 2.8
Figura 2.8. Con la etiqueta <center> es posible centrar
cualquier elemento de nuestra pgina como por ejemplo el
verso de Lorca de la figura 2.6.

Actualmente existen alternativas mejores que la etiqueta center

para especificar el alineamiento. En particular la etiqueta div y las
hojas de estilo en cascada que sern tratadas a lo largo de este
curso.
4. Cmo insertar imagenes en una pagina
Anterior | Inicio | Siguiente
En el cuarto captulo de la obra trataremos con detalle el mundo de
las imgenes en el WWW y aprenderemos todas las posibilidades
grficas que ofrece. En este captulo aprenderemos, como
introduccin, a insertar imgenes para dar mas vida a nuestra
pgina.
La etiqueta usada para insertar imgenes es: <img >. Esta etiqueta
est compuesta por una nica instruccin y por tanto </img> no
existe y su uso est prohibido. Podemos insertar una imagen en
medio de una frase como si fuese una palabra ms de ella y ser
mostrada por el navegador a continuacin del texto (o cualquier otro
elemento anterior) como podemos ver en el ejemplo de la figura 2.9.
Figura 2.9. Al insertar una imagen esta se entremezcla con el
texto. Cuando la imagen es pequea se crean interesantes
efectos como este.

En ella se puede observar como hemos insertado una flecha en

medio de la frase y despus de la imagen hemos seguido
escribiendo. Aunque podemos crear este efecto con imgenes de
todos los tamaos no es recomendable hacerlo con aquellas que
tengan una altura mucho mayor que la del texto.
Para insertar una imagen en una pgina WEB necesitamos tenerla
en un archivo aparte. Existen multitud de formatos para almacenar
una imagen en un archivo: BMP, GIF, JPEG, XPM, XBM, PNG, TIFF,
etc. cada uno de los cuales tienen unas caractersticas. El formato
elegido en el World Wide Web es el formato GIF que distingue a sus
archivos porque tienen la terminacin ".gif". Podramos decir que
todos los navegadores son capaces de mostrar las imgenes
incluidas en este formato. Los navegadores en modo texto suelen
proporcionar mtodos para ver las imgenes usando algn
programa visor externo. Un segundo formato que se ha introducido
en el WWW y que es soportado por la gran mayora de los
navegadores (incluyendo al Explorer y al Navigator ) es el JPEG.
Este formato es especialmente til para las fotos ya que es capaz
de comprimir este tipo de imagen de manera que ocupen hasta 4
veces menos que las imgenes con formato GIF. Los archivos que
contienen imgenes con formato JPEG suelen tener la terminacin
".jpg".
Una vez tenemos la imagen en un archivo aparte es hora de escribir
el cdigo HTML que nos permitir insertarla en la pgina. Como
hemos comentado usamos la etiqueta <img> y para indicar el
nombre del archivo usamos el atributo 'src'. En el ejemplo de la
figura 2.9 el cdigo usado para insertar la flecha es:
Pulsa en la flecha <img
src="flecha1.gif"> para pasar a la
pgina siguiente.
5. Cmo crear enlaces hipertexto
Anterior | Inicio | Siguiente
Una vez visto como introducir distintos tipos de texto y prrafos as
como insertar imgenes en una pgina, lo nico que queda por
aprender para ser capaces de crear una pgina Web bastante
completa son los enlaces hipertexto. Con ellos se pueden activar
frases o palabras de la pgina para que al pulsar sobre ellas se
salte a cualquier otra pgina de Internet que decidamos.
Estos enlaces hipertexto (en ingls links) no son ms que unas
zonas (habitualmente palabras o frases) especiales de nuestro texto
que ofrecen la posibilidad de pulsar sobre ellas para ir a otras

pginas. El concepto del hipertexto no es nuevo, la mayora de los

lectores lo habrn usado ya en la ayuda de Windows o en otros
muchos sistemas, lo realmente novedoso que ofrecen estos enlaces
en el WWW es la posibilidad de pulsar y navegar hasta pginas que
se encuentren en el otro extremo de la tierra. El navegante puede
moverse de Espaa a Japn con una nica pulsacin sobre el texto
adecuado. En seguida se ver lo sencillo que es incluir esta
impresionante tecnologa en una pgina web.
Los enlaces pueden clasificarse en dos tipos, los internos o locales
y los externos:
Los enlaces internos son aquellos que enlazan las pginas que
componen un mismo sitio web (web site). Todas estas pginas
estarn (generalmente) en el mismo servidor WWW, y por tanto
estarn tambin en el mismo ordenador. Por esta razn slo ser
necesario indicar en nuestro cdigo el nombre del archivo donde
est la pgina que queremos enlazar y el directorio en el que se
encuentra. Un ejemplo direccin de un enlace interno es:
/hobbies/index.html
Los enlaces externos permiten saltar desde una pgina hasta otra
puede estar en cualquier otro lugar del mundo en otro servidor web.
Al crear estos enlaces es necesario especificar la direccin
completa de Internet (la URL) de la pgina que queremos enlazar.
Por ejemplo:
http://www.otroservidor.com/hobbies/index.html
Por ltimo, cabe resaltar que aunque la mayora de las veces los
links se usan para enlazar una pginas con otras tambin pueden
usarse con imgenes, sonido, vdeo y prcticamente cualquier tipo
de fichero.
La etiqueta <a>... </a>
Esta etiqueta, de nombre sencillo, es la que va a permitir incluir en
las pginas enlaces hipertexto. Su atributo 'href' permite indicar cual
es la pgina a la que debe saltar el usuario al pulsar sobre el texto
adecuado. El texto del enlace ser aquel que se introduzca entre la
instruccin de inicio y la instruccin de final de la etiqueta y debe ser
resaltado por el navegador para que el usuario sepa que puede
pulsar en l. La estructura de un link es:
<a href="direccin_URL">
Texto que ser sensible (hipertexto)
</a>

Los navegadores grficos como Netscape Navigator y Microsoft

Internet Explorer resaltan este texto mostrndolo de un color
diferente y subrayndolo, adems el cursor cambiar al situarlo
sobre el texto. Los navegadores que funcionan en modo texto como
Lynx resaltan los enlaces hipertexto cambiando el color del texto y
de su fondo.
Veamos un ejemplo sencillo del uso de enlaces. Se ha creado un
sitio web personal con 2 pginas. La pgina principal se encuentra
en el archivo index.html y se quiere que en ella haya un enlace a
otra pgina donde se han escrito sobre los hobbies del creador del
sitio web y que se encuentra en el archivo hobbies.html. El enlace
podra ser algo as:
Tambin puedes conocer mis <a
href="hobbies.html">hobbies</a>
El resultado es el que puede apreciarse en la figura 2.10 donde la
palabra hobbies aparece resaltada.
Figura 2.10. Al pulsar sobre un enlace hipertexto saltaremos a
otra pgina de Internet. Los navegadores resaltan estos
enlaces para que sea fcil identificarlos.

Si no funciona un link conviene comprobar la sintaxis del cdigo

HTML. Un error comn es no cerrar las comillas que tras poner la
direccin de la pgina enlazada. Si se comete este error, adems
de no funcionar el enlace, es posible que desaparezcan otros
elementos de la pgina al visualizarla.
Pginas en otros directorios
Si la pgina a la que queremos crear el enlace no se encuentra en
el mismo directorio que la actual es necesario indicar el directorio (o
ruta de directorios, path) donde est. Si en el ejemplo anterior la
pgina hobbies.html estuviese en el directorio varios el ejemplo
anterior debera sustituirse por:
Tambin puedes conocer mis
<a href="varios/hobbies.html">hobbies</a>

Como vemos, para separar el nombre del directorio del nombre del
archivo se usa el smbolo "/". Tambin se usara, si fuese necesario,
para separar varios directorios.
Enlaces externos
La verdadera fuerza de Internet estriba en la posibilidad de navegar
con una sola pulsacin por informacin que se encuentre en
cualquier lugar del mundo. Para convertir esto en realidad existen
los enlaces externos.
Algunos diseadores web recomiendan que no se creen enlaces
externos desde la pgina principal o home page de nuestro sitio
Web para no incitar al visitante a que se vaya de la pgina.
La creacin de uno de estos enlaces es muy similar a la creacin de
los enlaces locales. El nico cambio radica en que el valor dado al
atributo 'href' es la direccin completa de Internet, sea otra pgina
web, una imagen o cualquier otro archivo. Por ejemplo, para incluir
un enlace desde cualquier pgina a la de DMOZ (Open Directory
Project) . Para ello puede emplearse:
Enlace a <a href="http://www.dmoz.org">Directorio DMOZ</a>
As de fcil. Para referirse a un archivo especfico del servidor de
DMOZ hay que especificar la ruta de directorios y el nombre del
archivo. Un ejemplo de uso podra consistir en construir un enlace a
la seccin sobre Internet de este buscador. Para ello hay que incluir
el siguiente link:
<a
href="http://www.dmoz.org/Computers/Internet/">
Seccin de Internet de DMOZ </a>
Un aspecto destacable de este ejemplo es que se ha especificado
la ruta de directorios pero no el nombre del archivo. Con ello se
consigue acceder al archivo por defecto de ese directorio. Todos los
servidores web tienen un archivo por defecto de manera que si no
se introduce el nombre ninguno ese archivo ser el mostrado. En la
mayora de servidores el nombre elegido es index.html por lo que la
direccin usada antes sera equivalente a:
http://www.yahoo.com/computers/internet/index.html
Si un sitio Web consta de varias pginas es usual incluir todos los
enlaces externos en una pgina especial dedicada a ellos como
la que se muestra en la figura 2.11.
Figura 2.11. Pgina que agrupa todos los enlaces de un sitio
web

6. PRCTICA 1: La pagina web de "La chistera"

Anterior | Inicio | Siguiente
La propuesta
En esta primera prctica de la obra se propone crear un sitio Web
REAL poniendo en prctica los conocimientos adquiridos hasta
ahora. En l incluiremos imgenes, varios titulares prrafos de texto
de distinto tipo y enlaces hipertexto a otras pginas.
En la figura 2.12 se muestra una captura de un navegador visitando
la pgina tal y como debe quedar al final. Se propone al lector
intentar imitar la apariencia de esta pgina usando nicamente las
etiquetas HTML explicadas hasta ahora.
Figura 2.12. La prctica 1 propone realizar un pgina a partir de
lo mostrado en esta figura.

Para empezar a realizar la pgina debe abrirse un editor de textos o

de HTML (es indiferente). Algunos ejemplos de programas que
pueden servir son notepad, emacs, vi, HomeSite, etc. Una vez
abierto se puede empezar a escribir la pgina tal y como se ha
explicado, comenzando por la cabecera y siguiendo con el resto de
la pgina. A continuacin se muestran las primeras lneas que
podra contener el archivo a modo de elemplo:
<html>
<head>
<title>
La chistera - Humor y magia
</title>
</head>
<body>
Tras escribir el cdigo debe guardarse con terminacin ".html" y ya
est lista para ser visualizada con cualquier navegador. Tras abrir

ste hay que seleccionar la opcin Archivo/Abrir...Examinar... (o

similar) y elegir el archivo en el que habamos guardado la pgina.
En ese momento debe mostrarse en pantalla la pgina creada. Lo
habitual es tener que realizar cambios en el cdigo HTML, volver al
navegador, volver a hacer cambios y as hasta que se obtiene el
resultado deseado. suerte!
La solucin
En esta primera prctica se va a mostrar a continuacin el cdigo
completo de la pgina resultado. Por supuesto, conviene intentarlo
antes de mirarlo. Tambin hay que tener en cuenta que no hay un
nico resultado y es posible que un cdigo ligeramente diferente de
lugar a una pgina prcticamente idntica al verla con el navegador.
<html>
<head>
<title>
La chistera - Humor y magia
</title>
</head>
<body>
<center>
<h1>
<img src="imagenes/chistera.gif">
LA CHISTERA - Humor y magia
</h1>
</center>
<h2>
Quienes somos
</h2>
<p>La chistera es un grupo de artistas
dedicados al mundo de la magia, la comedia y el espectculo.
Entre nosotros podrs encontrar humoristas, magos, showmen,
etc.</p>
<p>Si usted o su empresa necesita crear
un espectculo y no quiere quedar decepcionado no dude en
escribirnos AHORA MISMO. Nuestra direccin es:</p>
<center>
[email protected]
</center>
<h2>
Un ejemplo de nuestro repertorio
</h2>

<p>Cada da le mostramos ejemplos

distintos de nuestro amplsimo y novedoso repertorio de chistes:
<blockquote>
Era un to tan gafe, tan gafe, que se sent en un pajar y se
clav la aguja.
</blockquote>
<blockquote>
Doctor, Doctor, cuanto tiempo me queda de vida?
<br>
5... 4... 3... 2...
</blockquote>
</p>
<h2>
Enlaces a pginas relacionadas
</h2>
<p>
<a href="http://www.ciudadfutura.com/areirse
">A Rerse Toca, Ja, ja, ja!
</a>: Si te aburres, ests deprimido,
o simplemente quieres rer, psate por mi pgina y disfrutars
de los ms de 110 chistes que tiene. Con posibilidad de enviar
t el tuyo!
<p>
<a
href="http://www.geocities.com/BourbonStreet/Delta/3543/"
>1er Concurso de feos por
Internet</a>: 1er Concurso de Feos por
Internet participa y gana tu premio. </p>
<p>
<a
href="http://www.geocities.com/Hollywood/8620">Albert
Grau's Web</a>
: En esta pagina encontrars un listado de dichos
populares, y las 50 cosas que se deberan cambiar para mejorar
la vida terrcola de nuestro querido planeta Tierra
</p>
<hr size="5">
<address>
Pgina creada por el equipo de programacin Web de LA
CHISTERA
<br> Ultima actualizacin: 32-12-1997 ;-)
</address>
</body>

</html>
Una vez hemos comprobado que con nuestro navegador habitual
la pgina es mostrada correctamente conviene probarla con otros
incluyendo alguno en modo texto (Lynx) y diferentes tamaos de
pantalla. A veces las diferencias sern sorprendentes.
7. Anclas (I)
Anterior | Inicio | Siguiente
Despus de realizar nuestra primera prctica continuamos los
enlaces hipertexto con unos elementos muy relacionados con ellos:
las anclas, que nos permitirn crear enlaces especificando a que
lugar concreto de una pgina queremos saltar.
Qu es un ancla?
Un enlace normal tiene la estructura que podemos ver en la figura
2.13.
Figura 2.13. Estructura de los enlaces normales. Al pulsar
sobre el texto activo no podemos elegir el lugar de la pgina al
que saltamos, iremos siempre al comienzo.

Desde una pgina cualquiera y en cualquier lugar de ella se escribe

el cdigo para crear un enlace. Cuando se pulsa sobre el texto
activo se salta al comienzo de otra pgina, tal y como indica la
flecha. Usando enlaces a anclas se puede cambiar este
comportamiento.
Un ancla es una marca que se sita en un punto determinado de
una pgina. Posteriormente se podr crear un enlace a ese ancla
de manera que al pulsar sobre el texto apropiado en vez de saltar a

otra pgina se salta al lugar donde est el ancla, es decir, ya no se

va al comienzo de la pgina como con los enlaces vistos hasta
ahora. Dicho de otra forma usando anclas es posible que un enlace
apunte al lugar concreto de una pgina que se desee.
Creando anclas
Para crear anclas usamos, al igual que para crear enlaces, la
etiqueta <a>, sin embargo no debe confundirse el lector porque
aunque ambos elementos estn relacionados y se use la misma
etiqueta para crearlos las funciones de cada uno son radicalmente
diferentes. Las anclas slo son marcas y son invisibles cuando
visualizamos la pgina con el navegador. Por esta razn las anclas
no definen ningn texto activo.
A pesar de ello es habitual encontrar texto entre las instrucciones de
inicio y de fin como en el siguiente ejemplo:
<a name="nombreAncla">Comienzo</a>
Este texto no tiene ningn significado especial y ser interpretado
por los navegadores de igual forma que el texto de alrededor.
Como se ha adelantado en el ejemplo anterior, al crear anclas no se
emplea el atributo 'href'. En su lugar se usa otro llamado 'name'.
Con este atributo se da un nombre al ancla que luego nos servir
para referirse a ella.
Un ejemplo donde la utilidad de las anclas se hace evidente es en
aquellas pginas en las que nos encontramos una lista ordenada
alfabticamente. Si la lista es muy larga moverse hasta la letra S,
por ejemplo puede hacerse molesto. Pero usando anclas el autor de
la pgina puede incluir todas las letras al principio de manera que si
se pulsa sobre una letra se salta al lugar de la lista donde empiecen
las entradas de la letra S. En la figura 2.14 podemos ver un ejemplo
real capturado de la pgina del buscador espaol OZ .
Figura 2.14. En la seccin superior puede verse ver una serie
de enlaces (las letras maysculas) a anclas. En la seccin
superior se muestra el lugar al que se ha saltado al pulsar
sobre la letra S. Podemos deducir que antes de la palabra
Salud hay un ancla.

En este caso se detallan todas las secciones del Web ordenadas

alfabticamente. Al principio de la pgina hay un listado con todas
las letras del abecedario de manera que al pulsar sobre una letra
vas al lugar de la pgina donde estn las secciones que empiezan
con esa letra. Cmo se hace esto? Es muy sencillo, el proceso
consta de dos pasos:
Primero hay que insertar el ancla en el lugar de la pgina donde se
quiere poder saltar. Tomando como ejemplo una una pgina web
que contiene un diccionario se empleara el siguiente cdigo:
...
<a name="S">
</a>
Salud
Santa Claus
Seguridad
...

En segundo lugar se crea un enlace al principio de la pgina un que

apunte al ancla. En este ejemplo el cdigo usado es:
<a href="#S">S
</a>
En este ejemplo al pulsar sobre la letra S se salta directamente al
lugar de la pgina donde se encuentra la palabra salud, que es la
primera de las que comienzan con "S", que es el efecto deseado.
Para especificar que el enlace apunta a un ancla se ha incluido un
signo # seguido del nombre del ancla.
La estructura de un enlace a un ancla que se encuentre en la
misma pgina como el de este ejemplo es la que puede verse en la
figura 2.15.
Figura 2.15. Estructura de un enlace a un ancla de la misma
pgina. Cuando pulsamos sobre el enlace el navegador nos
transporta hasta el lugar de la pgina donde est el ancla.

En ella hemos usado un dibujo de un ancla para sealar donde

existe un ancla, en un documento real en realidad no existe ningn
elemento visual que la identifique, tal y como hemos visto en el
ejemplo de OZ.
Enlaces a anclas de otras pginas
Tambin es posible crear un enlace a un ancla de otra pgina. Para
ello hay que incluir la pgina, bien sea mediante su direccin URL o
mediante su ruta de directorios, y posteriormente poner el smbolo
"#" seguido del nombre del ancla. En este caso es obligatorio poner
el nombre del archivo, aunque sea index.html. Siguiendo con el

ejemplo anterior para crear un enlace a los trminos que empiezan

por 'S' de la pgina donde se situ el ancla puede emplearse el
siguiente cdigo:
<a href="http://www.ozu.es/a-z.html#S">Letra S</a>
Suponiendo que el diccionario estaba en un archivo llamado az.html en el servidor de nombre www.ozu.es.
La estructura de los enlaces es ligeramente ms complicada que los
anteriores. Para crearlos hay que seguir los siguientes pasos:
Se parte de un ancla existente en otra pgina o se crea uno
Se crea un enlace a esa pgina
Se aade a la direccin del enlace el smbolo '#' seguido del
nombre del ancla
En primer lugar deberemos crear un ancla en la pgina objetivo.
Despus deberemos escribir el enlace con la sintaxis explicada
anteriormente indicando el nombre de la pgina y el nombre del
ancla. La flecha de la figura 2.16 nos indica el salto que se
producir al pulsar sobre el enlace. Ya no iremos al comienzo de la
pgina como pasaba con los enlaces normales sino que iremos al
lugar concreto que hemos elegido (y donde hay un ancla).
Figura 2.16. Estructura de un enlace a un ancla de otra pgina.
Cuando pulsamos sobre el enlace vamos hasta otra pgina,
pero no al comienzo sino al lugar concreto donde est el ancla.

Aunque pueden crearse enlaces a anclas que se encuentren en

pginas creadas por otros, no es posible modificar las anclas
existentes o aadir anclas nuevas con lo que debemos confiar
que el autor haya puesto una donde interese. Para averiguar si es

as se puede revisar el cdigo de dicha pgina buscando una

cadena de la forma <a name="...">. Hay que tener cuidado con
este tipo de enlaces porque el autor de la otra pgina puede
decidir quitar el ancla y todos los enlaces que hagan referencia a
ella quedarn inutilizados.
8. Anclas (II)
Anterior | Inicio | Siguiente
Uso de enlace y ancla en la misma etiqueta
Hasta ahora hemos visto el uso de la etiqueta <a ...>..</a%gt; de
dos maneras diferentes: para crear enlaces hipertexto o para crear
anclas. En el primero de los casos se usaba el atributo 'href' para
especificar la pgina que se queras enlazar. En el segundo caso, al
crear el ancla, se usaba el atributo 'name' para darle un nombre con
el que poder identificarle. Pero qu ocurre si usamos los dos
atributos a la vez?, Est permitido? La respuesta es S. En ese
caso se estar creando ambas cosas a la vez un enlace o un ancla.
Por ejemplo:
<a href="http://es.gnome.org" name="enlace_gnome_hispano">
GNOME Hispano
</a>
En este caso al pulsar sobre la palabra 'GNOME Hispano' se salta a
la pgina de GNOME Hispano. Y por otro lado se puede acceder al
lugar de la pgina donde est este enlace creando una referencia al
ancla denominada 'enlace_gnome_hispano'. Es decir, la lnea
anterior es equivalente a poner las dos siguientes:
<a name="enlace_gnome_hispano">
<a href="http://es.gnome.org">
GNOME Hispano
/a>
Todava puede plantearse otra pregunta: para que puede servir un
enlace-ancla? Esta pregunta tiene mucha lgica porque para lo
nico que sirve un ancla es para crear un enlace a ella. En el
ejemplo anterior se podras escribir en algn otro lugar de la pgina:
<a href="#enlace_gnome_hispano">
pgina de GNOME Hispano</a>
Pero por qu no poner directamente?:
<a href="http://es.gnome.org">
pgina de GNOME Hispano

</a>
Parece ms lgico y as no se forza al visitante de la pgina a dar
dos pasos en vez de uno. Sin embargo puede encontrar casos en
que el enlace-ancla puede ser conveniente. Por ejemplo, puede
ocurrir que se desee poner un enlace a la pgina de GNOME
Hispano desde una pgina principal. Pero tambin se quiere hacer
caso al consejo de ciertos diseadores web experimentados de no
poner enlaces externos en ella. Cmo solucionarlo? Seguramente
el lector ya lo sabr: se puede tener una pgina especial con todos
los enlaces externos llamada por ejemplo links.html donde
estuviese el enlace-ancla anterior. Entonces desde la pgina
principal se escribira:
<a href="links.html#enlace_gnome_hispano">
GNOME Hispano</a>
Con lo que adems hemos conseguido que el usuario visite otra de
nuestras pginas, que en definitiva es uno de los objetivos de todo
programador Web: que sus pginas sean vistas.
El atributo 'title'
El lenguaje HTML define, adems de los vistos, otro atributo
interesante para la etiqueta <a>..</a>: 'title'. Con este atributo
puede escribirse un ttulo o una descripcin breve del link. Los
navegadores pueden mostrar esta informacin al usuario de varias
maneras:
En un margen de la pantalla o mediante una caja de texto (en
ocasiones llamadas bocadillos) que aparezca cuando se siten el
ratn encima de la zona activa del link. Este es el mtodo usado por
Explorer .
Cuando el link ya ha sido pulsado y se est esperando recibir la
pgina puede mostrarse como texto de espera o anticipo a lo que
va a llegar.
Leyendo el texto (con un sintetizador de voz) cuando se selecciona
o se pasa por encima
etc.
No es habitual encontrar el atributo 'title' en muchas pginas,
quiz porque Netscape ha decidido ignorarlo y sus usuarios no
vern la informacin que introduzcamos en l de ninguna manera.
Para ver un ejemplo de su uso se utiliz la pgina titulada "La
chistera - Humor y magia" realizada en la primera prctica. En ella
se cambia la lnea de cdigo:
<p><a
href="http://www.ciudadfutura.com/areirse">

A Rerse Toca, Ja, ja, ja!</a>

</p>
Por esta otra con el atributo 'title':
<p><a
href="http://www.ciudadfutura.com/areirse"
title="Yo me re mucho">A Rerse Toca, Ja,
ja, ja! </a></p>.
El resultado puede verse en la figura 2.17. Al pasar el cursor por
encima del texto activo nos aparece un bocadillo con el texto del
atributo 'title'.
Figura 2.17. Con el atributo 'title' podemos incluir informacin
adicional sobre el Link. Explorer mostrar esta informacin con
un bocadillo.

Es aconsejable usar 'title' siempre. De esta manera aquellos

usuarios (que visiten la pgina) con navegadores que entiendan
este atributo (como Explorer) disfrutarn de una informacin extra
y los que usen otros navegadores que no lo entiendan (como
Netscape) se quedarn como si no hubiramos incluido dicha
informacin, pero en ningn caso saldrn perjudicados.
Los atributos 'rel' y 'rev'
Antes de terminar con la etiqueta <a> ...</a> es conveniente
comentar algunos atributos ms que completan su repertorio y que
no han sido mencionados hasta ahora porque no son muy usados.
Entre estos destacan 'rel' y 'rev' porque en los ltimos estndares
de HTML en los que han trabajado conjuntamente Microsoft,
Netscape y muchas otras compaas y organizaciones, se les ha
dado mayor importancia de la que tienen actualmente.

Estos atributos fueron creados para establecer relaciones entre las

pginas enlazadas entre s. Sin embargo no se ha especificado
todava para que pueden servir estas relaciones. 'rel' y 'rev' slo
existen con vistas a que en un futuro se les d algn uso. El nombre
'rel' proviene de la palabra inglesa relation (relacin) mientras que
'rev' proviene de REVerse relation (relacin inversa).
Un ejemplo podra consistir en un libro publicado en Internet donde
cada captulo se ha escrito en una pgina (capitulo1.html,
capitulo2.html, etc.) Puede ser interesante establecer una relacin
entre cada una de las pginas. As en el captulo 4 se podra
emplear lo siguiente:
<a href="capitulo3.html"
rel="anterior">Captulo 3
</a>
<a href="capitulo5.html" rel="siguiente">
Captulo 5</a>
Es decir el captulo 3 se relaciona con el actual (el cuarto) en que es
el anterior y el 5 en que es el siguiente. Un posible uso (futuro) que
podra darse a este tipo de relaciones podra ser con vistas a
imprimir el libro completo.
El atributo 'rev' establece la misma relacin que 'rel' pero a la
inversa. En el ejemplo anterior hubiese sido equivalente escribir:
<a href="capitulo3.html" rev="anterior">
Captulo 3
</a>
<a href="capitulo5.html" rev="siguiente">
Captulo 5</a>
El captulo actual es el siguiente al tercero y el anterior al quinto.
Por ltimo, para terminar por completo la etiqueta < a>...</a>, slo
nos queda comentar dos atributos: 'urn' y 'methods'. Estos dos
atributos existan en los orgenes del lenguaje HTML pero fueron
eliminados por su poca utilidad. Los mencionamos nicamente para
que el lector no se extrae si los ve en alguna pgina, pero no
recomendamos su uso.
9. Formato de texto
Anterior | Inicio | Siguiente
El lenguaje HTML permite dar varios tipos de formatos al texto de
nuestras pginas. Para ello usa una serie de etiquetas, compuestas
todas por una instruccin de inicio y otra de fin, que realizan efectos
o formatos diversos en el texto que encierran. Estas etiquetas se

dividen en dos grupos: las etiquetas de estilo lgico y las etiquetas

de estilo fsico.
Etiquetas de estilo fsico
Las etiquetas de estilo fsico son aquellas que especifican
exactamente cmo debe ser formateado el texto que modifican. Es
decir, una etiqueta de estilo fsico es aquella que dice: 'este texto
debe estar en negrita' sin ms, no ofrece al navegador otra posible
forma de mostrar ese texto. Este tipo de etiquetas contradice el
espritu descriptivo que debe tener el HTML, por lo que son muy
criticados por los puristas de este lenguaje. Estos puristas sugieren
que las etiquetas de estilo fsico sean sustituidas por las de estilo
lgico que se vern en el siguiente apartado. A pesar de todo las
etiquetas de estilo fsico son de uso comn y por ello las trataremos
en detalle.
En la figura 3.1 se muestran ver ejemplos de las etiquetas de este
tipo ms usadas
Figura 3.1. Con el tipo de letra Times New Roman no todas las
letras ocupan lo mismo.

que son las que sirven para...

Poner un texto en negrita: para ello se usa la etiqueta <B>..</B>
como abreviatura de la palabra inglesa Bold que significa,
precisamente, negrita. La manera de usar esta etiqueta es como
cualquier otra compuesta por instruccin de inicio e instruccin de
fn, es decir debe introducirse el texto sobre el que se quiere actuar
entre ambas instrucciones. Su forma de uso es la siguiente:

<B>TEXTO EN NEGRITA</B>
Por ejemplo podra usarse en la siguiente frase:
Desde esta pgina puede adquirir la ltima versin de
nuestro programa
<B>
'gratis'
</B>
En la que la palabra 'gratis' ser mostrada en negrita tal y como
podemos ver en la figura 3.1.
Poner un texto en cursiva: en este caso se usa la etiqueta <I>..</I >
como abreviatura de la palabra inglesa Italics que significa cursiva.
Su uso es muy similar al anterior.
<I>
TEXTO EN CURSIVA
</I>
Esta etiqueta suele usarse para dar nfasis a alguna frase o texto
pero sin que resalte demasiado. Otro uso comn es para dar un
formato especial a palabras de otro idioma o a ttulos como por
ejemplo:
El ltimo libro que me he ledo es
<I>
El mdico
</I>
En el que 'El mdico' ser mostrado con letra cursiva como vemos
tambin en la figura 3.1
Poner un texto con letras de tamao fijo: como el lector sabr
existen diversos tipos de letra (llamadas fuentes) como Times New
Roman, Arial,Courier New, etc. En algunos de estos tipos el tamao
de las letras no est prefijado y de esta manera la letra 'i' no ocupa
lo mismo que la letra 'm'. Este es el caso de la fuente Times New
Roman que es el usado por la mayora de los navegadores para
mostrar el texto. En la figura 3.2 se muestra ver un ejemplo de este
tipo de letra.
Figura 3.2. Con el tipo de letra Courier todas las letras ocupan
lo mismo (monoespaciadas)

Sin embargo en ocasiones puede ser conveniente que el tamao de

las letras est prefijado y que todas las letras ocupen lo mismo (tipo
de letra monoespaciado). En estas ocasiones se usa otro tipo de
fuente, generalmente Courier New. En la figura 3.3 se observa ver
la diferencia con el tipo de letra anterior.
Figura 3.3. Los navegadores grficos como Explorer pueden
mostrar perfectamente todos los tipos de estilos lgicos como
vemos en esta figura.

La etiqueta <TT>..</TT> que proviene del vocablo ingls TeleType,

traducido al espaol TeleTipo, nos permite decirle al navegador que
use un tipo de letra monoespaciado. Esta etiqueta es usada
habitualmente para resaltar algn tipo de comando, cdigo, nombre
de archivo o similares. Por ejemplo:
Para obtener un listado de todas tus pginas Web en UNIX
debers escribir:
<TT>
ls*.htm *.html
</TT>
Tachar una palabra o frase: aunque no es muy comn en ocasiones
puede ser conveniente que una palabra o frase aparezcan tachadas
por una lnea horizontal. La etiqueta de HTML que permite hacer
esto es <STRIKE>..</STRIKE >, en ingls strike significa 'tachado'
(Tambin se puede usar la abreviatura <S>..</S>) En ocasiones se
usa esta etiqueta para simular un texto borrado, por ejemplo:
Yo
<STRIKE>
CASI
</STRIKE>
NUNCA me equivoco

Todas las etiquetas vistas hasta ahora tienen sus etiquetas de estilo
lgico equivalentes. A continuacin se muestran otras para las que
no ocurre igual y que realmente se muestran a medio camino entre
el estilo lgico y el estilo fsico.
Aumentar el tamao del texto: En ocasiones queremos resaltar una
palabra o frase haciendo que est escrita con una letra de tamao
mayor al texto adyacente. Para ello se usa la etiqueta <BIG>..<
/BIG> con cual conseguimos un ligero aumento de tamao en el
texto que es afectado por ella. Si queremos conseguir un aumento
de tamao an mayor podemos anidar varias de estas etiquetas
como observamos en el ejemplo:
Esto es texto normal,
<BIG>
este es grande
<BIG>
y este es mayor
</BIG>
</BIG>
Reducir el tamao del texto: En otras ocasiones podemos pretender
lo contrario: Hacer que una frase sea ms pequea que las
anteriores. Para ello se usa la etiqueta SMALL que funciona de
manera muy similar a la etiqueta BIG, como podemos ver en su
ejemplo:
Esto es texto normal,
<SMALL>
este es pequeo
<SMALL>
y este es menor
</SMALL>
</SMALL>
Poner subndices y superndices: existen dos etiquetas que
permiten poner subndices y superndices en una pgina HTML.
Estas etiquetas son SUB y SUP respectivamente. Veamos un
ejemplo:
El 1
<SUP>
er
</SUP>
componente qumico que estudiamos fue el agua o H
<SUB>
2

</SUB>0.
Y por ltimo, poner texto subrayado: el texto encerrado entre las
instrucciones de inicio y fin de la etiqueta U se muestra simple. El
nombre de la etiqueta proviene de la palabra inglesa Underline que
significa precisamente subrayado. En general un texto se muestra
subrayado para resaltar una informacin importante, por ejemplo:
El plazo lmite para la entrega de solicitudes es el
<U>
15 de Junio
</U>
En la figura 3.4 se pueden apreciar todos los ejemplos de estilos
fsicos tal y como son vistos con un navegador de texto (en concreto
Lynx).
Figura 3.4. El navegador Lynx slo puede mostrar texto y usa
los medios a su alcance para formatear el texto que debera ser
negrita, cursiva...

Etiquetas de estilo lgico

En contraposicin con los estilos fsicos estn las etiquetas de estilo

lgico. Este tipo de etiquetas est mucho ms en concordancia con
la filosofa del lenguaje HTML y los puristas las recomiendan como
sustitutos a las de estilo fsico. La funcin de estas etiquetas ya no
ser decirle al navegador 'pon esto en negrita' ni similares, sino que
simplemente describirn el texto, por ejemplo 'este texto es
importante', 'esto es un cdigo', etc. Usando esta descripcin el
navegador lo mostrar de la manera ms conveniente que en gran
parte de los casos ser igual a si hubisemos usado las etiquetas
de estilo fsico correspondientes.
Al igual que las anteriores, las etiquetas de estilo lgico estn
formadas por una instruccin de inicio y otra de fin que encierran un
texto. Las principales etiquetas de este tipo son las siguientes :
<STRONG>...< /STRONG>: El nombre de esta etiqueta significa
fuerte o grueso, y sirve para indicar que el texto que modifique es
un texto de mayor importancia que el que le rodea y es necesario
resaltarlo de algn modo. Los navegadores grficos en general
muestran el texto afectado por esta etiqueta en negrita, por lo que
puede usarse en sustitucin de la etiqueta B. El siguiente es un
ejemplo tpico de su uso:
<STRONG>
No puedes
</STRONG>
perderte la ltima versin de nuestro
editor HTML.
<EM>...< /EM>: Esta etiqueta proviene de la palabra inglesa
EMphasize, que significa enfatizar. El texto sobre el que acta esta
etiqueta suele estar mostrado en cursiva, tal y como puede verse en
la figura 3.5 como resultado del siguiente cdigo:
El autor del libro es
<EM>
Noah Gordon
</EM>.
<CODE>...< /CODE>: con esta etiqueta sealamos un texto que
forma parte de un cdigo, de instrucciones de ordenador,... La
palabra inglesa code significa, precisamente, cdigo. Con Explorer y
Navigator el texto delimitado por esta etiqueta ser mostrado con un
tipo de letra monoespaciada (por ejemplo Courier) y de tamao
ligeramente menor al habitual. Esta etiqueta puede usarse, por
ejemplo, para insertar cdigo en C:
<CODE>

#include "stdio2.h"
</CODE>
<SAMP>...< /SAMP>: el nombre de esta etiqueta proviene del
ingls SAMPle (muestra) y suele utilizarse para formatear ejemplos,
muestras, cdigos de scripts, etc. El texto formateado con esta
etiqueta suele ser mostrado de la misma manera que el formateado
con <CODE>.
<VAR>...< /VAR>: delimita texto escrito por el usuario, variables,
argumentos de comandos... Tanto el Explorer como el Navigator
mostrarn este texto como cursiva. Un ejemplo de su uso podra
ser:
La direccin de esa pgina es
<VAR>
www.towercom.es
</VAR>
<CITE>...< /CITE>: Esta etiqueta suele ser usada para introducir
una cita o una referencia (significado de la palabra inglesa cite). Al
igual que la etiqueta anterior provoca que el texto que encierra sea
mostrado en cursiva:
<CITE>
Pienso, luego existo
</CITE>
dijo Descartes
<DFN>...< /DFN>: En este caso el objeto de la etiqueta es introducir
una DeFiNicin, pero el texto ser mostrado igualmente en cursiva:
Pensar:
<DFN>
Discurrir, considerar, imaginar
</DFN>.
<KBD>...< /KBD>: Tiene la funcin de formatear texto de entrada
(input) del teclado (KeyBoarD en ingls) con un tipo de letra
monoespaciado. Aunque esta etiqueta pertenece al HTML no es
soportada por Explorer. recomendable
Pueden verse todos los ejemplos anteriores, tal y como los muestra
Explorer, en la figura 3.5:
Figura 3.5. En esta figura observamos los estilos lgicos con
Explorer. La gran mayora de ellos son mostrados como letra
en negrita o cursiva.

Todos estas etiquetas son entendidas por los navegadores en modo

texto y usan los medios de que disponen para resaltar las frases
que encierran. En la figura 3.6 se incluyen todos los ejemplos tal y
como los muestra Lynx.
Figura 3.6. Usando estilos lgicos no se nota tanto la diferencia
entre Explorer y Lynx aunque los medios de este sean ms
limitados.

Una caracterstica que llama la atencin de estas etiquetas es que

varias de ellas llevan a cabo el mismo cometido, o eso parece. Esto
es as porque se est describiendo el texto, no indicando como
sern formateados. Porqu no se unen las etiquetas que hacen lo
mismo en una sola?, porque se supone que describen texto lo
suficientemente diferente como para que aunque si es conveniente
puedan ser formateadas de forma diferente.

Ya se han visto los estilos lgicos y los fsicos, as como las

diferencias entre ellas. Como se ha dicho es recomendable usar los
primeros siempre que sea posible.
10. La etiqueta FONT
Anterior | Inicio | Siguiente
Las etiquetas de los apartados anteriores permiten modificar ciertos
aspectos de la apariencia del texto de una pgina, pero es
suficiente?. Cuando el WWW se hizo ms y ms popular y la
apariencia de las pginas comenz a adquirir la importancia actual
se hizo evidente que no.
Para poder controlar en mayor medida an la apariencia del texto
se cre la etiqueta FONT. A continuacin se explicarn sus virtudes,
aunque cabe destacar que actualmente existe una alternativa mejor:
las hojas de estilo en cascada o CSS que ser tratada en los
ltimos captulos del curso.
Cambiando el tamao del texto
La etiqueta FONT permite tener un gran control sobre el tamao de
un texto. Este tamao se especifica con su atributo SIZE y afectar
al texto que encierren la instruccin de inicio (<FONT SIZE=" ">) y
de fin (</FONT>).
La forma de especificar el tamao del texto consistir en darle el
valor deseado al atributo SIZE, si bien hay dos formas de hacerlo:
La primera de ellas es indicar un tamao absoluto de 1 a 7.
Correspondiendo 7 al tamao mayor y 1 al menor. El tamao por
defecto del texto es el equivalente al nmero 3. Veamos un ejemplo:
Esto es texto normal
<FONT SIZE="6">
y esto es grande
</FONT>
En la figura 3.7 podemos ver una comparacin de todos los
tamaos.
Figura 3.7. Ejemplo de uso de la etiqueta FONT y su atributo
SIZE para cambiar el tamao del texto.

La segunda consistir en indicar un tamao relativo respecto al que

haya por defecto. Por ejemplo, para poner un tamao 6 y
suponiendo un tamao por defecto 3 se usara:
Texto de tamao 3
<FONT SIZE="+3">
Tamao 6
</FONT>
Es necesario hacer notar que el aumento de tamao se tomar
siempre respecto al que se tenga por defecto (y que ser 3 mientras
el usuario no cambie las preferencias de su navegador), por tanto
anidando varias etiquetas FONT no se ir aumentando el tamao
del texto como ocurra con la etiqueta BIG. Por ejemplo:
Texto normal (tamao 3),
<FONT SIZE="+1">
Texto de tamao 4 ,
<FONT SIZE="+1">
este texto sigue teniendo tamao 4
</FONT>
</FONT>
En la figura 3.7 se puede ver un ejemplo de ambos modos de uso.
Figura 3.7. Ejemplo de uso de la etiqueta FONT y su atributo
SIZE para cambiar el tamao del texto.

Cuando se indica el tamao del texto usando el mtodo relativo

(+n o -n) ser necesario usar comillas. Aunque algunos
navegadores podran entender el valor aunque no se usen la
nica manera de estar seguro de que la visualizacin ser
correcta en todos ellos ser entrecomillar el valor dado al atributo
SIZE.
Conocidos estos dos mtodos es el momento de introducir una
nueva etiqueta muy relacionada con FONT: la etiqueta BASEFONT.
Esta permite modificar el tamao por defecto del texto de la pgina
Web. Su modo de uso es el siguiente:
<BASEFONT SIZE="n">
Donde n es un nmero del 1 al 7 (por defecto vale 3) y las comillas
son obligatorias. Podemos observar como esta etiqueta est
formada por una nica instruccin cuya funcin ser modificar el
tamao de todo el texto a partir de su inclusin. La nica excepcin
que escapa al efecto de esta etiqueta son los encabezados, que
mantienen su tamao.
En general cuando se usa esta etiqueta se introduce como la
primera despus de <BODY>, no usarla es lo mismo que usar
<BASEFONT SIZE="3">.
A continuacin se incluyen dos ejemplos con distintos tamaos de
letra por defecto:
<BASEFONT SIZE="3">
Esto es texto de tamao 3,
<FONT SIZE="+3">
esto es de tamao 6,
</FONT>
<FONT SIZE="+4">
y esto es de tamao 7
</FONT>

Como se ve, para hallar el tamao de un texto hay que sumar el

tamao relativo (+3 o +4 en este caso) al tamao por defecto del
resto del texto (en este caso 2). Otro ejemplo ms:
<BASEFONT SIZE="4">
Esto es texto de tamao 4,
<FONT SIZE="+3">
esto es de tamao 7,
</FONT>
<FONT SIZE="+4"
y esto sigue siendo de tamao 7
</FONT>
En este segundo ejemplo se ve, adems, que en ningn caso se
puede conseguir un tamao superior a siete. De igual manera
nunca se puede poner un tamao menor que uno.
En la figura 3.8 podemos ver ambos ejemplos.
Figura 3.8. Los tamaos del texto que hallamos modificado
usando el mtodo relativo se calcularn a partir del al tamao
por defecto del texto normal, pero sin pasar nunca de 7.

Cambiando el color del texto

Con otro atributo de la etiqueta FONT: COLOR se puede cambiar el
color del texto con la misma facilidad con la que hasta ahora se ha
cambiado su tamao. En un principio la nica forma de indicar un
color consista en usar un cdigo hexadecimal de la siguiente
manera:
<FONT COLOR="#RRGGBB">
Dnde hay que sustitur RR por dos nmeros hexadecimales que
indican la cantidad de rojo (desde 00 que es ausencia de color a FF

que es mxima cantidad de color), GG por otros dos que indican la

cantidad de verde y BB por dos que indican la cantidad de azul.
Combinando estos tres colores en diferentes proporciones se
pueden crear hasta 16 millones de colores. Este sistema suele
parecer ligeramente complicado en un principio, pero con la prctica
o con ayuda de herramientas grficas de seleccin de colores se
convierte en un mtodo bastante sencillo e increblemente potente.
Existe un segundo mtodo de indicar el color que sin duda le
resultar al lector ms sencillo. Este mtodo consiste en poner
como valor de COLOR el nombre del color en ingls. Los colores
aceptados son: Black (negro), white (blanco),green (verde), maroon
(marron rojizo), olive (verde oliva), Navy (azul marino), purple
(violeta), red (rojo), yellow (amarillo), blue (azul), teal (verde
azulado), lime (verde lima), aqua (azul claro), fuchsia (fusia), silver
(gris claro). Aunque adems de estos existen otros valores, no son
soportados en todos los navegadores.
Y la forma de usarlas queda clara en el siguente ejemplo:
<H1>
<FONT COLOR="FUCHSIA">
Colores en el Web
</FONT>
</H1>
ya podemos decir que sabemos poner colores en las pginas
Web,
<FONT COLOR="green">
verde
</FONT>,
<FONT COLOR="blue">
azul
</FONT>
<FONT COLOR="red">
rojo
</FONT>,
etc. Ninguno se nos resiste.
cuyo resultado podemos ver en la figura 3.9 :
Figura 3.9. Gracias a la etiqueta FONT y a su atributo COLOR
nuestras pginas tomarn un colorido totalmente diferente.

11. Texto preformateado

Anterior | Inicio | Siguiente
En ocasiones es interesante mantener los espacios o saltos de
lnea de un prrafo tal y como estn en el cdigo HTML. Para
conseguir esto hay que alterar el comportamiento habitual del
navegador que, como se ha visto, ignora este formato. Un ejemplo
muy simple que muestra esto es la firma de pginas con dibujos de
texto como el de la figura 3.10.
Figura 3.10. Como se puede ver se pueden crear firmas muy
originales usando nicamente caracteres y sin necesidad de
imgenes.

Se podra crear una imagen con l e insertarla en el documento,

pero este es un dibujo hecho con caracteres y podra aprovecharse

para que pudiese verse tambin con navegadores que trabajan en

modo texto como Lynx. Algo importante en este caso ya que
interesa que TODO el mundo vea la firma, adems de que el tenerla
como texto hace ms fcil su modificacin.
Sin embargo todos los espacios mltiples se convertirn en un
nico espacio, y por tanto si se escribiese el dibujo junto con el
cdigo HTML el navegador lo mostrara como vemos en la figura
3.11 :
Figura 3.11. Si no usamos la etiqueta de texto preformateado la
figura construida con caracteres se convertir en algo ilegible.

que sin duda no es el resultado que esperbamos.

Aunque este es un ejemplo entre muchos, el objetivo era resaltar
que en ocasiones esa caracterstica de HTML de eliminar todo
formato manual en el texto es verdaderamente incmoda. Pero todo
problema tiene solucin, y en este caso la solucin es una nueva
etiqueta: <PRE>...</PRE> . El nombre asignado a esta etiqueta
proviene de la palabra "PREformateado" (o PREformatted en ingls)
y su funcin es mantener todo formateado manual que sea hecho
en el texto escrito entre la instruccin de inicio (<PRE>) y la
instruccin de fin (</PRE>).
Continuando con el ejemplo de nuestra firma, el problema se podra
solucionar si al insertarla la incluimos dentro de la etiqueta PRE de
la siguiente manera:
<PRE>
(@@)
---------oOOo-(_)-oOOo--------|
|
| Juan Juanito Juanez
|
| E-mail: [email protected] |
|
|
-----------------Oooo.---------

.oooO ( )
( )
)/
\(
(_/
\_)
</PRE%gt;
En este caso la visualizacin ser la esperada, es decir la de la
figura 3.10.
Es comn en los nuevos programadores que descubren la
etiqueta PRE usarla abundantemente, sin embargo, esto puede
causar problemas de visualizacin de esas pginas con algunos
tamaos de ventana, resoluciones de pantalla o tipos de monitor
distintos del nuestro. Recordemos que esta era la razn por la
que los navegadores ignoraban el formato manual y debido a ello
el uso de PRE debe estar limitado a los casos en los que sea
realmente necesario.
Uso de otras etiquetas dentro de <PRE>...</PRE>
A efectos de HTML estndar, el contenido de la etiqueta PRE es el
mismo que el de un prrafo creado con P. Las nicas excepciones
son aquellos elementos que producen cambios en el tamao de la
letra como por ejemplo IMG, BIG, SMALL, SUB, SUP y FONT. Esto
excluye tambin a todas aquellas etiquetas que provocan un cambio
de lnea (son las llamadas etiquetas de nivel de bloque, block-level
tags) como son: H1,..., H6, BLOCKQUOTE, ADDRESS, HR, etc.
Tanto Netscape como Explorer permiten el uso de todo tipo de
etiquetas dentro del texto preformateado, incluso aquellas
etiquetas de nivel de bloque. En estas ltimas hay ligeras
diferencias entre Explorer y Netscape, valga como ejemplo que
los encabezados en Explorer mantienen el tipo de letra del texto
preformateado (generalmente Courier New) mientras que
Netscape los muestra con el tipo de letra normal (generalmente
Times New Roman).
12. Acentos y otros caracteres especiales
Anterior | Inicio | Siguiente
Algunos caracteres distintos de los habituales en los lenguajes
anglosajones son considerados en el mundo de la informtica como
caracteres especiales. Dentro de estos se incluyen las letras
acentuadas ni la letra ee.
En los ltimos aos se ha avanzado mucho en conseguir que
cualquier ordenador pueda leer todos los caracteres de todos los
idiomas. En concreto es ya poco habitual que no se soporten los
caracteres latinos. En cualquier caso es interesante saber que

HTML ofrece mecanismos para insertar estos y otros caracteres

especiales en aquellos sistemas donde no estn soportados.
Una regla mnemotcnica para recordar qu caracteres son
considerados especiales por HTML es la siguiente : " Si se puede
escribir un carcter pulsando sobre una sola tecla del teclado o
usando como ayuda las teclas MAYSCULAS o ALT-GR
entonces ese carcter es vlido". En el teclado espaol hay que
hacer tres excepciones: la letra '' y los smbolos '' y '' que no
son vlidas.
El mecanismo ofrecido por HTML consiste en unos cdigos
especiales que todos los navegadores pueden entender. A estos
cdigos se les llama entidades de caracteres o con el nombre
ingls: character entities. Todos estos cdigos comienzan por el
smbolo '&' (ampersand) y terminan con el smbolo ';' (punto y
coma). Puede distinguirse entre dos tipos:
Entidades de caracteres con nombre: son aquellas en las que los
smbolos '&' y ';' se pone el nombre (o abreviatura) asignado a ese
carcter. Slo existen para los caracteres especiales ms usados.
En la figura 3.12 se puede ver un ejemplo de este tipo de entidades
en el que vemos la estructura general que todas tienen.
Figura 3.12. Una entidad de caracter con nombre tiene tres
partes: '& ' + 'nombre' + ';'

Entidades de caracteres numricas: en este tipo de entidades entre

'&' y ';' se escribe el nmero asignado a ese carcter en el estndar
ISO-Latin-1 precedido de una almohadilla: '#'. Este tipo de
entidades son menos usadas que las anteriores aunque tienen la
ventaja de abarcar cualquier letra posible en cualquier idioma. En la
figura 3.13 se muestra la estructura de este tipo de entidades
usando de nuevo como ejemplo la letra A mayscula y acentuada.
Figura 3.13. Una entidad de caracter numrica tiene cuatro
partes: ' &' + '#' + 'nmero' + ';'

Entidades de caracteres para caracteres espaoles

Sin duda, en Espaa los caracteres considerados cmo especiales
en el resto del mundo que ms se usan son los acentos, la letra ee
y los smbolos de apertura de interrogacin () y admiracin (). En
la tabla 3.1 se puede ver un un listado con dichos caracteres en los
que mostramos las entidades de caracteres con nombre y
numricas que tienen asociados.
Figura 3.1. Entidades de caracteres numricas y nominales
para caracteres acentuados, 'u' con diresis y ee.

Es muy importante respetar las maysculas y minsculas en las

entidades de caracteres. Si se usan indistintamente el resultado
obtenido no ser el deseado o bien la entidad simplemente no
funcionar.
Entidades de caracteres para caracteres reservados
En el lenguaje HTML existen una serie de caracteres que tienen un
significado especial. La gran mayora de estos caracteres ya los
conocemos y estamos acostumbrados a usarlos para programar un
pgina Web. Algunos de estos caracteres son: <, >, & y ". Pero
qu ocurre si se quiere incluir alguno de estos caracteres en
alguna pgina? Por ejemplo, si se desea escribir sobre los formatos
lgicos en HTML y se quiere poner la cadena "'<B>'" en una pgina.
Si la se pone tal cual, el navegador la confundir con una etiqueta
ms y pondr el texto siguiente en negrita. Existe entonces alguna
forma de escribir el nombre de una etiqueta? La respuesta es,
obviamente, S. Y la solucin es usar las entidades de los
caracteres reservados de HTML en vez del propio carcter. Estas
entidades son las mostradas en la tabla 3.2.

Figura 3.2. Entidades de caracter numricas y nominales para

caracteres reservados del lenguaje HTML.

Por ejemplo en vez de escribir:

Para poner texto en negrita se usa la etiqueta <B>
Debera escribirse:
Para poner texto en negrita se usa la etiqueta <B>
Este segundo ejemplo se visualizar correctamente en el
navegador, el lector est invitado a probar los dos ejemplos.
Otras entidades de caracteres
Adems de las vistas hasta ahora existen otras entidades de
caracteres que son de especial utilidad en la creacin de pginas
Web. Estos son los de la tabla 3.3
Figura 3.3. Entidades de caracteres numricas y nominales
para algunos caracteres especiales de uso comn.

El espacio requiere un comentario especial. El nombre de su

entidades de caracteres, nbsp, significa non breaking space que
quiere decir espacio que no puede ser roto (o eliminado). Este tipo
de espacios no es ignorado por los navegadores. Debe recordarse
que si incluimos varios espacios en nuestra pgina el navegador los
reduce a uno slo, pues esto no ocurre con este tipo de espacios. Si
se escribe &nbsp; cinco veces el navegador mostrar cinco
espacios, con lo cual se pueden crear mrgenes y sangrados
manualmente.
En los archivos extra de este captulo se incluye un listado de
todos los caracteres del conjunto ISO-Latin-1 junto con sus
nmeros asociados. Este listado va en el archivo (especial.html),
para que pueda ser visualizado con diferentes navegadores y en
dos imgenes GIF que corresponden a la visualizacin de dicho
archivo HTML con Internet Explorer 4.0. (escape.gif y latin1.gif).
Esta informacin esta dividida en dos tablas, en la primera se
incluyen todos aquellos caracteres que tienen una entidades de
caracter nominal asociada. En una segunda tabla se incluyen
todos los caracteres visualizables (por ejemplo el carcter retorno
de carro no se puede ver), del ISO-Latin-1 junto con su nmero

asociado. A partir de este nmero podremos construir la

entidades de caracter numrica.
El porqu de los caracteres especiales. Explicacin tcnica
En los comienzos de la informtica se cre un cdigo llamado
ASCII (American Standard Code for Information Interchange) para
representar los caracteres. Este cdigo asignaba a cada carcter
un nmero (de 7 bits) que al fin y al cabo es lo nico con lo que
un ordenador sabe trabajar. Debido al tamao de ese nmero (7
bits) ese cdigo constaba nicamente de 128 caracteres que
inclua las letras, nmeros y algunos caracteres habituales. Estos
caracteres son entendidos en cualquier ordenador y por tanto
pueden ser usados con libertad en un documento HTML. Con la
evolucin y expansin de los ordenadores pronto surgi la
necesidad de aadir nuevos caracteres, como por ejemplo
aquellos especficos de cada idioma. Por esta razn se crearon
extensiones del cdigo ASCII que aadan un bit al nmero
asociado a cada carcter con lo que el nmero de caracteres
representable aumentaba a 256. El problema es que no hubo un
acuerdo en este ASCII extendido y se crearon varias versiones en
los que haba ligeras diferencias. Los documentos HTML pueden
tener todo tipo de caracteres pertenecientes al IS-Latin-1 (ISO8859-1) que es una de estas extensiones. An as los caracteres
que no pertenezcan al cdigo ASCII de 7 bits deben introducirse
con la secuencia de escape correspondiente para evitar
problemas con ordenadores que no soporten el ISO-Latin-1 sino
otra extensin del ASCII. El prximo estndar del lenguaje HTML
(HTML 4.0) ha llevado ms lejos la extensin del cdigo ASCII
soportando el conjunto de caracteres UNICODE. Este conjunto
incluye los caracteres del ASCII (a los que asigna el mismo
nmero y por tanto es compatible), pero aade todos los
caracteres de todos los idiomas del mundo (incluidos los chinos y
japoneses). Esto es importante porque UNICODE se est
imponiendo como uno de los estndares del presente y del futuro.
13. Listas en HTML (I)
Anterior | Inicio | Siguiente
Junto con los prrafos y los encabezados, las listas son uno de los
elementos HTML ms comnmente usados en las pginas web.
Tras este captulo sabremos, no slo crear listas, sino crear varios
estilos de estas, una para cada ocasin. Y no tardaremos en
ponerlas en prctica ya que al final del captulo crearemos la
segunda pgina de la cual podemos ver un anticipo en la figura 4.1.

Figura 4.1. En esta figura podemos apreciar la presentacin de

la segunda prctica del curso que realizaremos al final del
captulo.

Una lista, o listado, es una enumeracin de dos o ms elementos y

suelen disponerse de tal forma que se facilite la distincin entre
ellos.
El lenguaje HTML define los siguientes tipos de listas:
Numerada u ordenada.
No ordenada.
Listas de glosario o de definicin.
Mens.
Usadas con prrafos cortos.
Listas de directorio.
Pronto sabremos como crear cada una de ellas y cuando es
conveniente usar una u otras, y comprobaremos, una vez ms, la
gran sencillez del lenguaje HTML una vez nos hemos habituado a
l.
Etiquetas necesarias para crear listas
La forma de crear listas difiere ligeramente de los elementos HTML
vistos hasta ahora, ya que consta de dos pasos. Primero hay que
definir el tipo de lista y despus deben insertarse cada uno de los
elementos de lista.
Al crear una lista deberemos indicar su inicio y su fin. Para empezar
la lista usaremos la instruccin de inicio de la etiqueta de esa lista.

Existe una etiqueta para cada tipo distinto de lista, por ejemplo, para
crear una lista no ordenada ser necesario usar la etiqueta UL (su
instruccin de inicio ser <UL>). Una vez hemos abierto la lista
deberemos insertar, como hemos dicho antes, cada uno de los
elementos de lista. Para ello usaremos una nueva etiqueta (o dos
en algn caso) que depender del tipo de lista. En el caso de la lista
no ordenada los elementos se introducen con la etiqueta de una
nica instruccin LI, por ejemplo:
Yo practico:
<UL>
<LI>Ftbol
<LI>Baloncesto
<LI>Tenis
<LI>etc.
</UL>
En la figura 4.2 podemos ver como muestra Internet Explorer este
cdigo
Figura 4.2. Como aperitivo mostramos una lista no numerada
en la que ya se pueden apreciar las caractersticas
fundamentales que tienen en HTML.

El ltimo paso, que ya hemos anticipado en este ejemplo, ser

cerrar la lista, para lo cual usaremos la instruccin de fin de UL:
</UL>.
Y a todo esto, dnde est la diferencia?. Pues bien, la diferencia
es la etiqueta LI (En otras listas se usar tambin LI o alguna
etiqueta similar, como luego veremos). La etiqueta UL no tiene
ningn significado por s sola, necesita a LI. Y por otro lado LI no
puede ser usada como una etiqueta independiente sino que debe ir
dentro de UL. Por esta razn en ocasiones se suele llamar a LI
subetiqueta.

Algunos navegadores permiten el uso de <LI> fuera de ninguna

lista como si se tratara de una etiqueta independiente. Estos
navegadores mostrarn el elemento de lista como si fuese
perteneciese a una lista no numerada pero sin sangrado. Sin
embargo esta forma de usar <LI> no est admitida por el
estndar y por tanto no es recomendable si queremos que todos
los navegadores entiendan nuestras intenciones.
Antes de comenzar haremos un comentario ms. La etiqueta <LI>
tiene instruccin de fin (</LI>) que delimita el final del elemento de
lista actual, pero es opcional usarla o no. Si no se hace se
considera que el elemento termina cuando empieza el siguiente o
cuando termina la lista. De hecho algunos navegadores al
interpretar el cdigo HTML ignoran completamente esta instruccin
y slo entienden que el elemento de lista ha terminado cuando se
empieza otro o se acaba la lista.
Vista la teora nos adentramos en los distintos tipos de listas en las
que veremos varios ejemplos prcticos.
Listas no ordenadas
Probablemente el tipo de listas ms usados en las pginas web son
las listas no ordenadas. Como hemos adelantado antes a modo de
ejemplo, este tipo de lista queda delimitada por la etiqueta
<UL>...</UL> (UL proviene de Unordered List, que significa lista no
ordenada). Dentro de estas etiquetas insertaremos cada elemento
con la etiqueta <LI>. Veamos un ejemplo ligeramente ms completo
que el anterior:
Mi ordenador tiene las siguientes caractersticas:
<UL>
<LI>Procesador Pentium 166
<LI>CD-ROM 8x
<LI>Tarjeta de sonido 16 bits
<LI>Tarjeta de vdeo con 2 Mb
</UL>
En la figura 4.3 podemos ver como muestra esta lista el navegador
Explorer. Vemos que est ligeramente sangrada hacia la derecha y
con un smbolo grfico para distinguir cada elemento de lista, este
smbolo recibe el nombre de vieta.
Figura 4.3. Los elementos de las listas no numeradas van
precedidos de una vieta. En Explorer esta vieta es
habitualmente un punto grande.

En la figura 4.4 vemos como a falta de vietas grficas Lynx

diferencia cada elemento con un asterisco (*).
Figura 4.4. Lista no ordenada en Lynx. Cada uno de los
elementos de lista comienza con un asterisco simulando a los
smbolos grfico que usan Netscape o Explorer.

Listas ordenadas
Este tipo de listas numera los elementos de lista en el orden en el
que se han introducido en el cdigo HTML. La numeracin se
realiza con nmeros empezando por el 1.
Las ltimas extensiones de HTML permiten elegir entre distintos
tipos de numeracin para las listas ordenadas. Estas extensiones
sern cubiertas en un captulo posterior.
Este tipo de listas queda delimitado por la etiqueta <OL>...</OL>
(OL: Ordered List, Lista ordenada), y cada elemento se inserta, al
igual que en el caso de listas no ordenadas, con la etiqueta <LI>.
En la figura 4.5 vemos un ejemplo de uso de listas ordenadas
Figura 4.5. En las listas ordenadas cada uno de los elementos
de lista aparecen numerados y sangrados hacia la derecha.

que se corresponde con el siguiente cdigo:

Un buen equipo adaptado a las nuevas tecnologas consta de:
<OL>
<LI>CPU rpida
<LI>Impresora a color de buena definicin.
<LI>Altavoces y cmara de vdeo.
<LI>Mdem de velocidad 28K o superior.
</OL>
El navegador automticamente numera los elementos de lista. Si en
algn momento queremos insertar un nuevo elemento entre los
existentes usando, de nuevo, <LI>, se realiza automticamente una
renumeracin de los elementos de la lista. Tal y como podemos ver
en la figura 4.6.
Figura 4.6. Cuando insertamos un nuevo elemento de lista en
una lista ordenada los elementos siguientes son
automticamente renumerados.

que se corresponde con este cdigo:

Un buen equipo adaptado a las nuevas tecnologas consta de:
<OL>
<LI>CPU rpida
<LI>Impresora a color de buena definicin.
<LI>Altavoces y cmara de vdeo.
<LI>Escaner color
<LI>Mdem de velocidad 28K o superior.
</OL>
En el navegador Lynx las listas numeradas se muestran como
vemos en la figura 4.7.
Figura 4.7. En el caso de las listas numeradas la diferencia
entre la visualizacin con Lynx y con Explorer es menor.

14. Listas en HTML (II)

Anterior | Inicio | Siguiente
Listas de glosario
Este tipo de listas es usado, como su nombre indica, para crear
glosarios, es decir listas de definiciones o de descripciones. El
principio y final de este tipo de listas se delimitan con la etiqueta
<DL>...</DL > (DL: Definition List, Lista de definicin). La insercin

de elemento es ligeramente distinta a la del resto de listas ya que

no se usa la etiqueta <<LI>>. Esto es as porque en este caso cada
uno de los elementos de lista est compuesta de dos partes:
La palabra que queremos definir: para insertar la palabra usaremos
la etiqueta <DT> que proviene de Definition Term (Trmino de
definicin). Esta nueva etiqueta funciona de forma muy similar a
<LI> y la instruccin de fin (</DT>) es igualmente optativa.
La definicin o descripcin de esa palabra: una vez indicada la
palabra es hora de poner su definicin. Para ello usamos otra nueva
etiqueta: <DD> cuyas siglas significan Definition Descriptin (parte
de la definicin que contiene la descripcin). La definicin suele ser
un prrafo y ser mostrado por los navegadores sangrado con
respecto al texto anterior.
En la figura 4.8 podemos ver un ejemplo de listas de glosario vistas
con Internet Explorer.
Figura 4.8. Las listas de glosario constan de dos partes la
palabra de definicin y la propia de definicin que es mostrada
como un nuevo prrafo con sangrado.

En la figura 4.9 se muestra la misma vista con el navegador Lynx.

Figura 4.9. Listas de glosario en Lynx. De nuevo las diferencias
respecto a la visualizacin con Explorer son escasas.

En ambos ejemplos el cdigo usado es el siguiente:

<DL>
<DT>Hipertexto
<DD>Se llama documento hipertexto a aquel
que tiene zonas activas donde el
usuario puede pulsar con el ratn
para acceder a otro documento. Estas
zonas pueden ser imgenes o texto.
<DT>Ancho de banda de una red
<DD>Es, en pocas palabras, la capacidad
de transmisin que soporta y est
muy relacionada con la velocidad de
transmisin que se puede alcanzar.
<DT>HTML
<DD>HiperText Markup Language, Lenguaje
de marcas hipertexto. Lenguaje para
disear pginas del World Wide Web.
</DL>
Directorios y mens
Las listas vistas hasta ahora son, sin duda, las ms usadas, pero
existen otros dos tipos que estn algo ms olvidadas por los
creadores de webs: las listas de directorio y las listas de men.
Las listas de men son usadas cuando los elementos de lista son
frases de una sola lnea mientras que las listas de directorio fueron
creadas para ser usadas cuando son trminos cortos que pueden
ser mostrados en mltiples columnas.
A pesar de las recomendaciones del estndar HTML los
principales navegadores muestran las listas de directorios y
mens de igual manera (o muy similar) a las listas no ordenadas.

Por esta razn es aconsejable usar nicamente los tres primeros

tipos de lista vistos.
A continuacin mostramos un ejemplo de listas de men y listas de
directorio. En la figura 4.10 podemos ver dos ejemplo ambos tipos
en Explorer y en la figura 4.11 el mismo ejemplo tal y como se vera
en Lynx.
Figura 4.10. En Explorer las listas de men (<MENU>) y de
directorio (<DIR>) son mostradas de igual manera que las listas
no numeradas (<UL>).

Figura 4.11. En Lynx las listas de men y de directorio son

mostradas simplemente insertando cada elemento de lista en
una nueva lnea.

El cdigo usado es:

<MENU>
<LI>Cancin 1: Tranquilo majete
<LI>Cancin 2: Lluvia en soledad
<LI>Cancin 3: La mujer barbuda
<LI>Cancin 4: Madera de colleja
<LI>etc.

</MENU>
<DIR>
<LI>Juegos
<LI>Grficos
<LI>Internet
<LI>Programacin
</DIR>
Anidamiento de listas
Vistos todos los tipos de listas se nos puede plantear una pregunta:
Se puede incluir una lista dentro de otra?. La respuesta es SI. El
lenguaje HTML permite insertar unas listas dentro de otras ya sean
del mismo o de distinto tipo. A esta posibilidad se le llama
anidamiento de listas y la forma de realizarlo es incluir todo el
cdigo de una lista dentro de uno de los elementos de la otra. En el
siguiente ejemplo combinaremos algunos de los ejemplos anteriores
para dar lugar a un listado con varios listas anidadas unas dentro de
otras:
Los temas del nmero de este mes de nuestra revista son:
<MENU>
<LI>Un nuevo Internet: IPv6
<LI>El WWW cobra vida: ha llegado el
HTML dinmico
<LI>Qu ordenador comprarse:
<OL>
<LI>CPU rpida. Con las siguientes
caractersticas:
<UL>
<LI>Procesador Pentium 166
<LI>CD-ROM 8x
<LI>Tarjeta de sonido 16 bits
<LI>Tarjeta de vdeo con 2 Mb
</UL>
<LI>Impresora a color de buena
definicin.
<LI>Altavoces y cmara de vdeo.
<LI>Escaner color.
<LI>Mdem de velocidad 28K o
superior.
</OL>
</MENU>

En las figuras 4.12 y 4.13 podemos ver como se muestra este

ejemplo en los navegadores Explorer y Netscape Navigator. Aunque
hay ligeras diferencias, en ambos se puede observar cmo cada
nuevo nivel de anidamiento se produce un sangrado en la lista.
Adems se observa que en la segunda lista no numerada la vieta
que precede cada elemento ha cambiado, lo que ayuda a
diferenciar entre ambas listas.
Figura 4.12. Gracias al anidamiento podemos crear listas muy
complejas en HTML. El segundo nivel de lista no numerada usa
una vieta distinta.

Figura 4.13. Comparando esta figura con la 4.8 podemos ver las
ligeras diferencias que existen en los distintos tipos de listas
entre Netscape y Explorer .

15. Comentarios en HTML

Anterior | Inicio | Siguiente
Se llama comentario en el mbito de HTML las notas que el autor o
autores ponen en el cdigo para facilitar su entendimiento. Estos
comentarios no son mostrados por el navegador y por tanto slo
sern visibles al leer el cdigo HTML de la pgina web.
En general es recomendable ir insertando comentarios al crear una
pgina para marcar determinadas partes y as encontrarlas ms
fcilmente. Algunos usos que suelen darse a los comentarios son:
Notas para recordar detalles del cdigo la prxima vez que
vayamos a cambiarlo, como por ejemplo para indicar por qu
hemos usado una etiqueta y no otra, por qu hemos usado una lista
numerada y no una no numerada, etc. Este tipo de comentarios son
muy usados cuando las pginas son complejas.
Apuntar que queda por hacer en una determinada seccin o como
es conveniente cambiarla. O bien para indicar el comienzo o fin de
una determinada seccin de la pgina.
Para identificar fcilmente partes importantes del cdigo o aquellas
que cambian ms a menudo.
Usos particulares de cada webmaster. De hecho los comentarios
pueden usarse para cualquier cosa y cada programador de pginas
web tiene su propio modo de usarlos.
Creacin de comentarios en HTML

Para crear un comentario no se usa una etiqueta, aunque es una

estructura parecida. En primer lugar ponemos una cadena que
indica el comienzo del comentario: <!--, esto es, el smbolo menor
que, seguido del smbolo fin de exclamacin y de dos guiones, todo
ello sin espacios entre ellos. Todo el texto que le siga ser parte de
comentario, que terminar cuando insertemos la cadena de fin: --> ,
dos guiones y el smbolo mayor que. La estructura de un
comentario es por tanto:
<!--Esto es un comentario-->
Suele ser recomendable dejar un espacio entre ambas cadenas y el
texto anterior y posterior, tal y como acabamos de mostrar.
Veamos algunos ejemplos prcticos de comentarios:
<!--Aqu comienza el cuerpo de la pgina-->
<!--Cambiar este prrafo para que se entienda mejor-->
<!--Debera aadir ms enlaces en esta pgina-->
En la figura 4.14 podemos ver un ejemplo de un comentario junto
con otro cdigo HTML y el resultado de visualizar ese cdigo con el
navegador. Como observamos el navegador ignora los contenidos
del interior de los comentarios.
Figura 4.14. Al mostrar la pgina los navegadores actan como
si los comentarios no existieran. Como vemos Explorer permite
comentarios multilnea y con etiquetas dentro.

Para terminar slo queda hacer una aclaracin. Tal y como hemos
dicho todo el texto entre los smbolos "<!-- " y "-->" es un comentario
sea lo que sea y tenga el nmero de lneas que tenga. Sin embargo
el estndar de HTML recomienda que los comentarios se limiten a

una sola lnea, y si debe ocupar varias necesariamente se aconseja

incluir los smbolos de comentario en cada una de ellas.
16. Practica 2: Un sitio web completo
Anterior | Inicio | Siguiente
Ya podemos dar por concluida la primera fase del aprendizaje del
HTML. En poco tiempo hemos aprendido:
Como es la estructura general de una pgina: para crear esta
estructura usbamos las etiquetas HTML, HEAD y BODY.
Como dar ttulo a la pgina con la etiqueta TITLE.
Como crear encabezados con las etiquetas H1, H2, H3, H4, H5, H6.
Como introducir prrafos de texto normal con la etiqueta P y
alinearlos a nuestro gusto.
Como crear otros prrafos con BLOCKQUOTE y ADDRESS, y en
este mismo captulo prrafos preformateados con PRE.
Como dividir el texto con saltos de lnea o lneas horizontales de
distintos grosores y tamaos.
Tambin hemos aprendido a insertar en nuestras pginas los dos
elementos que ms fama han dado al World Wide Web: los enlaces
hipertexto y las imgenes.
Vimos tambin como dar distintos formatos al texto, tanto formatos
lgicos (EM, STRONG, CODE, etc.) como fsicos (B, I, TT, BIG,
SMALL, SUB, SUP, etc.).
Y por ltimo en este breve resumen hemos de mencionar la
creacin, recin aprendida de diversos tipos de listas (UL, OL, DL,
MENU y DIR)
Como vemos la lista es bien larga y ya estamos equipados con
conocimientos suficientes para crear una pgina compleja.
Para afianzar estas bases lo ms importante es la prctica, y para
no quedarnos slo en las palabras vamos a empezar ya con la
segunda prctica del curso. sta consistir en la realizacin de un
sitio web completo que, aunque es sencillo (dos pginas), permitir
al lector hacerse una idea de los procesos que hay que llevar a
cabo en la elaboracin de webs en el mundo profesional actual.
El sitio web que crearemos puede ser o bien de una empresa de
nuestra propiedad, o de una que ha contratado nuestros servicios.
Hemos elegido como ejemplo una agencia de viajes, pero invitamos
al lector a buscar otro tema, ficticio o real, y crear su propia pgina
web, si as lo prefiere.
A lo largo de la creacin de la pgina iremos detallando los pasos
seguidos para que el lector pueda ir repitindola o creando otra
similar en su ordenador.
En el archivo practica-2.tgz se incluye el sitio web completo listo
para ser visualizado y en l puede observarse el cdigo completo.

Los documentos HTML son los llamados index.html y mes.html.

Las imgenes necesarias para la realizacin de las pginas se
encuentran en el subdirectorio img.
Planificacin
El primer paso en la creacin de una pgina es la planificacin. Si
estamos creando el web de nuestra propia empresa deberemos
llevarla a cabo por nosotros mismos (en nuestro caso ficticio
tambin tendremos que realizarla nosotros), pero si creramos el
web para otra empresa deberamos encargarle ciertos deberes :
presentacin de la empresa, presentacin de su catlogo,
promociones especiales, etc. Tal vez ya tenga un proyecto
publicitario en marcha y quiere que el web este en lnea con este.
En nuestro caso, por no aburrir al lector, no entraremos demasiado
en este tipo de aspectos del diseo de pginas, pero queremos
resaltar la importancia que tiene a la hora de conseguir xito con las
pginas que hemos creado.
Secciones de la pgina
Una vez conocidos todos los requisitos que debe cumplir el web es
hora de hacer el primer borrador. En l debemos incluir las distintas
secciones que debe tener el sitio web.
De ahora en adelante nos referiremos al conjunto de documentos
HTML que estamos creando como sitio web, website en ingls, y
llamaremos pgina o pgina web a cada uno de esos documentos.
A la hora de realizar este primer borrador hay que tener en
consideracin varios aspectos. La informacin de la pgina debe
tener una estructura jerrquica, con una pgina principal con
enlaces a las distintas secciones. En esta prctica hemos decidido
dividir la informacin en cuatro secciones y hemos creado una
pantalla de presentacin que nos permita acceder a ellas:
Pantalla de presentacin: Es lo primero que se ver al visitar la
pgina. En ella debe verse el nombre de la agencia as como un
men con las opciones que presenta la pgina. Podramos pensar
en poner el titular con un encabezado de tipo H1, pero para crear un
mayor impacto esttico crearemos un titular grfico e incluiremos el
logotipo (ficticio) de la agencia a su izquierda. Despus incluiremos
un men con enlaces a las diferentes secciones y por ltimo alguna
foto de lugares donde se pueda viajar con la agencia 'Los Alpes'. En
la figura 4.1 al comienzo de este captulo podemos ver esta pantalla
de presentacin.
Nuestras principales OFERTAS del mes: En esta seccin
informaremos de los viajes que la agencia de viajes 'Los Alpes'
oferta a precios especiales en el mes actual. Esta seccin tiene una
longitud considerable, por lo que a pesar de la sencillez de este web

decidimos crearla en un documento aparte, al que llamaremos

mes.html. En la figura 4.15 vemos la presentacin de esta pgina
que como vemos guarda una armona con la presentacin anterior.
Figura 4.15. Pantalla de presentacin de la segunda pgina web
de nuestro website. Es importante mantener un parecido entre
todas las pginas que lo componen.

Los Alpes 20 aos a su servicio: En esta seccin daremos

informacin de la empresa. Esta seccin es tpica en todas las
pginas del WWW y suele denominarse la pgina del Quin
Soy/Quienes somos. Podemos apreciar esta seccin en la figura
4.16
Figura 4.16. En la seccin 'Los Alpes - 20 aos a su servicio'
podemos apreciar el uso de la etiqueta BLOCKQUOTE y de una
lista no ordenada.

Viajes a su medida: Unos de los puntos fuertes que pretende

promocionar nuestra empresa es la creacin de viajes a la medida
del cliente. Si eres joven te har descuentos especiales, los
ejecutivos no tendrn que soportar tiempos de espera
innecesarios,... Deberemos dar constancia de ello en el web y por
eso le dedicamos una seccin entera. En la figura de la pgina
completa podremos apreciar esta seccin y la siguiente.
Dnde encontrarnos: Esta es otra seccin que debe existir
obligatoriamente en las pginas de toda empresa que tenga oficinas
de servicio al cliente. El objetivo de la pgina ser abarcar una
mayor cantidad de pblico, pero tambin se pretender que los
clientes se pongan en contacto con la agencia personalmente, por
ello es importante resaltar bien sus direcciones, telfonos, fax, etc.
Las tres ltimas secciones sern demasiado breves por lo que
estarn incluidas en la pgina principal a la que llamaremos, como
es comn, index.html. Al principio de cada una de estas secciones
incluiremos un ancla de manera que podamos referirnos a ellas
posteriormente usando enlaces a anclas.
Una vez hecho el boceto de borrador hay que ponerse manos a la
obra y disearlo el aspecto grfico y realizar la programacin HTML.
Diseo grfico
Este es un aspecto fundamental al crear pginas web. En funcin
de la apariencia de nuestro sitio web conseguiremos o no que los
futuros visitantes se queden en l o incluso que lo visiten con
regularidad. La presentacin grfica deber ser lo ms atractiva
posible, pero sin que la pgina est demasiado sobrecargada. En el

siguiente captulo trataremos a fondo el diseo grfico y todas las

posibilidades avanzadas que el lenguaje HTML nos ofrece a este
respecto.
Los aspectos grficos que ms destacan en nuestra pgina son los
que pertenecen a la pantalla de presentacin entre estos destacan
el LOGO de la pgina que vemos reproducido en la figura 4.17
Figura 4.17. Logo de los alpes.

y el ttulo de esta, que vemos en la figura 4.18.

Figura 4.18. Letrero de 'Los Alpes' que, junto con el logo,
aparecer en todas las pginas del sitio web.

Estas dos imgenes han sido creadas con un programa de dibujo

vectorial, como pueden ser Corel Draw, FreehandKontour, etc. y
retocadas con un programa de retoque fotogrfico como pueden ser
Photofinish, PhotoShop, The GIMP o Paint Shop Pro (Shareware).
Las fotos inferiores de la pantalla de presentacin han sido
obtenidas de alguno de los nmerosos cliparts de imgenes
gratutos de los cuales podemos encontrar en Internet una buena
muestra.
Programacin en HTML
Una vez creadas las imgenes es hora de usarlas. El primer paso
que seguiremos consistir en la creacin de una plantilla que servir
como modelo para cada uno de las pginas.
Es importante que las pginas de un sitio web sean similares o,
dicho de otra forma, que tengan uniformidad. Eso le aportar una
apariencia profesional y permitir al visitante, por ejemplo, identificar
las pginas como de Los Alpes y no de ninguna otra agencia.
La plantilla estar compuesta por el logo, el letrero de "Los Alpes
Agencia de viajes" y de una firma de los creadores de la pgina. El
cdigo de esta plantilla es:
<HTML>
<HEAD>

<TITLE>
Agencia de viajes LOS ALPES
</TITLE>
</HEAD>
<BODY>
<A NAME="arriba">
<CENTER>
<IMG SRC="img/logo.gif">
<IMG SRC="img/losalpes.gif">
</CENTER>
Contenido de la pgina
<HR>
<ADDRESS>
Web realizado por el equipo de
<FONT COLOR="#800000">
Conquista la web
</FONT>
<BR>
ltima actualizacin: Enero de 2001
</ADDRESS>
</BODY>
</HTML>
Una vez tenemos hecha esta plantilla la guardamos con el nombre
plantilla.html para utilizarla posteriormente con todos los
documentos del sitio web.
El siguiente paso es programar la presentacin, esta consta de un
eslogan, una lista de enlaces a las secciones de la pgina y dos
imgenes atractivas, todo ello centrado:
<CENTER>
<UL>
<LI>
<A HREF="mes.html">
Nuestras principales OFERTAS del mes
</A>
<LI>

<A HREF="#alpes">
LOS ALPES - 20 aos a su servicio
</A>
<LI>
<A HREF="#medida">
Viajes a su medida
</A>
<LI>
<A HREF="#donde">
Dnde encontrarnos
</A>
</UL>
<IMG SRC="img/ski.gif">
<IMG SRC="img/montanas.gif">
</CENTER>
Como vemos el primer link nos enlaza con el archivo mes.html
mientras que el resto son enlaces a las anclas creadas al principio
de cada seccin en el mismo index.html.
El resto de detalles no entraan demasiada dificultad y el lector que
haya seguido el curso desde el principio ser capaz de realizar la
pgina completa sin problemas fijndose en las figuras incluidas.
Como pista listaremos el resto de etiquetas y atributos (entre
parntesis) usados en la pgina:
HR (con WIDTH y SIZE), H3, BIG, STRONG, BLOCKQUOTE,
CITE,
P (ALIGN), OL y PRE.
El documento mes.html tampoco presenta ningn problema de
realizacin. Cabe destacar que es importante incluir al final de este
un enlace que nos devuelva a la pgina principal.
Slo ser necesario comentar dos aspectos del cdigo. Para
separar las palabras enlaces a los distintos viajes se ha usado
repetidamente la secuencia de escape &nbsp; de la siguiente
manera:
<A HREF="#Andorra">
ANDORRA
</A>

&nbsp;&nbsp;&nbsp;
<A HREF="#Orlando">
ORLANDO
</A>
El segundo aspecto reseable es que para insertar cada una de las
lneas informativas de cada viaje se ha usado el siguiente cdigo:
<P ALIGN="center">
...
</P>
No queda ms por comentar, recomendamos al lector la realizacin
completa de esta prctica para adquirir prctica y soltura con las
etiquetas HTML vistas hasta ahora con vistas a comprender mejor y
ms rpidamente los siguientes captulos en los que trataremos el
cdigo HTML avanzado.
17. Usando color en el WWW
Anterior | Inicio | Siguiente
Existen diversas etiquetas y atributos en HTML que permiten
cambiar el color de los elementos de una pgina o incluso el color
del fondo de esta. Pero antes de ver estas etiquetas es necesario
explicar algunas cosas sobre como usar el color en las pginas
Web.
En el tercer captulo ya adelantamos, cuando aprendimos a dar
color al texto, que existan dos mtodos para indicar el color, estos
mtodos son:
Usar un nmero hexadecimal que identifica a ese color, por ejemplo
#FF0000 ser refiere al color rojo.
Usar uno de los nombres (en ingls) predeterminados por los
navegadores para los colores ms usados, por ejemplo para poner,
al igual que antes, el color rojo usaramos: 'red'.
Por supuesto para el programador es mucho ms sencillo
aprenderse los nombres de los colores en ingls que no un cdigo
hexadecimal que nos resulta mucho ms extrao. Sin embargo usar
nombre de colores tiene algunas limitaciones. Por un lado slo
abarca unos pocos colores y por otro tiene el inconveniente de que
no todos los navegadores son capaces de entenderlos, mientras
que s entienden el cdigo hexadecimal. Aun as podemos encontrar
16 colores que son entendidos por gran parte de los navegadores y
por supuesto tambin Netscape Navigator y Explorer que son los
ms usados.
En la tabla 5.1 podemos encontrar estos diecisis colores junto con
su nombre en ingls y el cdigo hexadecimal asociado.

Figura tabla 5.1. Colores usados ms frecuentemente

Aunque los nombres asignados a estos 16 colores son ampliamente

aceptados en realidad existen muchos ms, pero su uso no es
recomendado ya que slo Netscape los soporta. Entre estos otros
colores estn indigo, ivory, khaki y muchos ms.
El segundo mtodo, basado en usar el cdigo hexadecimal
asociado al color no es tan complicado como puede parecer en un
principio. Y tiene dos grandes ventajas sobre usar nombres:
Lo entienden todos los navegadores.
Puedes indicar ms de 16 millones de colores.
Para construir el cdigo de un color se usa un mtodo que podemos
comparar con el de un pintor con una paleta de tan slo tiene 3
colores y los mezcla para conseguir el resto de los que necesita
para pintar un cuadro. En el cdigo usado por el lenguaje HTML
estos tres colores son el rojo, el verde y el azul, es decir, se usa la
paleta RGB (Red, Green, Blue). Para crear todos los colores se
usan mezclas de estos en distintas cantidades. Estas cantidades se
indican con un nmero del 0 al 255, correspondiendo el 255 a la
mxima cantidad de color posible. Si ponemos cero de todos los
colores obtendremos el color negro, si ponemos 255 de todos
obtendremos el blanco. Para crear amarillo, por ejemplo, podemos
mezclar 255 de rojo, 255 de verde y nada de azul; y si en vez de
poner 255 de rojo y verde ponemos 230 de cada obtendremos un
amarillo ms oscuro.
Sin embargo todava queda una complicacin y es que el nmero
tendremos que ponerlo en hexadecimal.
Un cdigo hexadecimal est basada en una numeracin que est
compuesta por 16 smbolos en lugar de 10 como el sistema
decimal. Estos 16 smbolos son 1, 2, 3, 4, 5, 6, 7, 8, 9, A (10), B

(11), C (12), D (13), E (14) y F (15). Por ejemplo, el siguiente

nmero, el 16, se escribe en hexadecimal: '10', mientras que el
nmero hexadecimal '1F'se corresponde con el 31 decimal.
Usando el cdigo hexadecimal podemos indicar la cantidad de color
del 0 al 255 con slo dos dgitos (del 0 al FF), y una vez que nos
hemos acostumbrado no resulta tan complicado.
Afortunadamente
existen
editores
HTML
que
ponen
automticamente el nmero hexadecimal de los colores. Tambin
existen programas independientes como HTMLib Colour Wizard
que permite indicar color en decimal o incluso seleccionarlo de
una paleta y l te genera el cdigo HTML.
Para proseguir vamos a fijarnos en los cdigos que adelantbamos
en la tabla 5.1, como vemos todos empiezan por el smbolo
sostenido o almohadilla: '#'. Posteriormente siguen 6 nmeros
(siempre deben ser seis) en hexadecimal. Los dos primeros
corresponden a la cantidad de rojo (RR), los siguientes a la cantidad
de verde (GG) y los siguientes a la cantidad de azul (BB). Es decir
la estructura general es:
#RRGGBB
De ahora en adelante usaremos la cadena '#RRGGBB' para indicar
un cdigo de color en hexadecimal y debemos tener en cuenta que
puede ser sustituido tambin por un nombre de color.
Examinemos alguno de los cdigos anteriores, por ejemplo el usado
para obtener verde azulado (Teal). Este cdigo indica que el color
no tiene nada (0) de rojo, 128 unidades (80 en hexadecimal) de
verde y otras tantas de azul. Con lo que obtenemos el tono
deseado.
18. Cmo cambiar la apariencia de una pagina
Anterior | Inicio | Siguiente
Una vez conocemos a la perfeccin la manera de insertar colores
ya podemos empezar a aprovechar las posibilidades que nos ofrece
el lenguaje HTML para controlar la apariencia de una pgina Web.
Como primera aplicacin prctica aprenderemos a cambiar el color
del fondo, luego cambiaremos el color del texto y por ltimo
crearemos el efecto ms impactante de todos, pondremos un
imagen de fondo.
Color de fondo
Para cambiar el color de fondo de nuestras pginas usaremos un
nuevo atributo de la, ya conocida, etiqueta BODY.
El nuevo atributo se llama BGCOLOR y debe ser aadido a la
etiqueta BODY existente:

<body bgcolor="#RRGGBB">
Por ejemplo para crear una pgina con el fondo de color azul
podemos usar:
<body bgcolor="#0000FF">
O bien:
<body bgcolor="Blue">
El resultado es en ambos casos el que podemos apreciar en la
figura 5.2
Figura 5.2. El lenguaje HTML nos permite cambiar el color de
fondo de nuestras pginas. Podemos indicar el color por su
nombre en ingls o con su nmero RGB.

NOTA: Algunos navegadores, como Explorer, permiten poner el

cdigo en decimal. Para ello hay que omitir el smbolo # y usar 3
dgitos decimales (nmeros del 0 al 255) para especificar la
cantidad de cada color en el mismo orden (rojo, verde y azul). Sin
embargo no recomendamos el uso de esta caracterstica porque de
esta forma provocaremos que slo los visitantes con ese navegador
puedan apreciar el colorido de nuestras pginas y realmente el
esfuerzo de poner el cdigo en hexadecimal no es tan grande.
Es importante resaltar que si no usamos el atributo BGCOLOR el
color de fondo de nuestras pginas ser el que cada usuario haya
especificado en su navegador. En algunos navegadores el color por

defecto es el blanco, mientras que en otros es el gris plateado

habitual en Windows.
Color del texto y Links
Igual que se puede cambiar el color del fondo de la pgina se puede
cambiar el color de su texto. Para ello se usan cuatro nuevos
atributos de la etiqueta BODY. Lo primero que deberemos hacer es
pensar en el color y el cdigo de este, y una vez lo tengamos
cambiaremos el color del texto usando:
TEXT
Sirve para controlar el color que tendr el texto normal de la pgina,
es decir todo aquel que no sea un enlace hipertexto. Su valor por
defecto es negro.
LINK
Permite cambiar el color con el que son mostrados los enlaces
hipertexto o links de la pgina. Su valor por defecto es azul.
VLINK
Permite cambiar el color por defecto de los links visitados (Visited
LINK). Los links visitados de una pgina son aquellos que ya hemos
seleccionado alguna vez. El valor por defecto de estos enlaces es
morado.
ALINK
Sirve para controlar el color de los enlaces activos (Active LINK). El
significado de enlace activo vara en funcin del navegador. Para
Netscape un enlace activo es aquel sobre el que se ha pulsado con
el ratn pero todava no se ha soltado. El color por defecto de los
links activos es el rojo.
Vistas todas las etiquetas pasemos a crear un ejemplo, para l
seleccionaremos un color de pantalla negro, texto blanco, enlaces
verdes, enlaces visitados verde azulado y enlaces activos rojos. El
cdigo usado es por tanto:
<body bgcolor="#000000" text="#FFFFFF"
link="#00FF00" vlink="#008080" alink="#FF0000">
En la figura 5.3 podemos ver el resultado de este cdigo.
Figura 5.3. Tambin podemos cambiar el color del texto, de los
enlaces, de los enlaces visitados y de los enlaces activos a
nuestro gusto, igual que hacamos con el fondo.

Imgenes de fondo
Las posibilidades que nos ofrece el lenguaje HTML para cambiar la
apariencia de una pgina no se limitan a cambiar los colores,
tambin se pueden poner imgenes ya sean dibujos o fotos como
fondo de una pgina. Las imgenes debern estar en formato GIF o
JPEG al igual que las imgenes normales que aprendimos a
insertar en el captulo 2.
Para incluir una imagen de fondo deberemos usar el atributo
BACKGROUND de la etiqueta BODY. Como habr podido
comprobar el lector a estas alturas dentro de esta etiqueta se
engloban todos los parmetros que cambian las caractersticas
globales de la Web, es decir aquellas que afectan a toda la pgina.
El funcionamiento de BACKGROUND es idntico al del atributo
SRC de la etiqueta IMG, esto es, deberemos indicar como valor el
nombre de la imagen, junto con su ruta de directorios (path) si es
necesario o bien la direccin completa de Internet (URL) si no se
encuentra en nuestro sitio Web.
Veamos un primer ejemplo de una pgina con una imagen de fondo,
para ello usamos el siguiente cdigo en el que hemos usado la
imagen fondo1.jpg que se encuentra en el mismo directorio que la
pgina donde est el cdigo:
<body background="fondo1.jpg">
En la figura 5.4 podemos ver el resultado en el que hemos incluido,
adems, un encabezado que contraste con el fondo.

Figura 5.4. Para crear un mayor impacto visual podemos usar

como fondo una imagen, esta imagen se replicar (es puesta
en mosaico) por toda la pgina, luego los bordes deben
coincidir.

Las imgenes que insertemos como fondo de la pgina sern

mostradas en mosaico, es decir, se replicar la imagen tanto
horizontal como verticalmente hasta ocupar todo el rea de la
pgina. Por esta razn no todas las imgenes quedan bien como
fondo de una pgina Web. De hecho se recomienda que slo se
usen dos tipos de imgenes:
Imgenes con pocos colores que muestran un logo sobre un relleno
slido y que interfiere poco con el contenido de la pgina. En la
Web de la figura 5.5 podemos ver un ejemplo de este tipo de
imgenes en la que no se aprecian los bordes de la imagen al ser el
fondo de esta de un solo color slido (gris oscuro en este caso).
Figura 5.5. En esta ocasin la imagen de fondo es un logo
sobre un fondo de color slido (gris). Esta es una manera
sencilla para que no se noten los bordes cuando el navegador
la pone en mosaico.

Imgenes especiales cuyos bordes encajan perfectamente y parece

que todo del fondo es una nica imagen. La imagen de la figura 5.4
es un ejemplo de ello ya que su tamao real es de 90x90 pixeles.
En la figura 5.6 vemos esa imagen por s sola. Es difcil apreciar
que los bordes encajarn cuando se creen las rplicas, de hecho
ese efecto debe ser hecho con programas especiales.
Figura 5.6. Esta es la imagen usada como fondo en la pgina de
la figura 5.4. Como vemos, es de pequeo tamao, pero al
coincidir sus bordes simula una imagen que ocupa toda la
pantalla.

Por lo general la creacin de fondos requiere adems de programas

especiales, bastante cuidado para asegurarnos que no
sobrecarguen demasiado la pgina, por lo que un gran nmero de
programadores de Webs optan por usar alguno de los fondos de los
cliparts gratuitos que podemos encontrar en Internet, por ejemplo en
las direcciones:
www.specialweb.com
www.dewa.com
www.teleportcom
Si usamos una imagen normal como fondo de una pgina, los
bordes no encajarn y se vern claramente los lmites de la imagen.
Podemos ver un ejemplo de este efecto en la figura 5.7. En esta
misma figura vemos tambin que poner una foto de fondo suele

provocar que la pgina est demasiado sobrecargada, adems

sera difcil leer el texto que hubiese en esa imagen.
Figura 5.7. Tambin podemos poner fotos como fondo de la
pgina, pero hay que tener cuidado porque los bordes no
encajan y adems la pgina queda demasiado sobrecargada.

No use imgenes demasiado oscuras o con demasiados colores

como fondo de la pgina. Si an as debe usarla utilice los
atributos TEXT, LINK, VLINK y ALINK de la etiquetas BODY para
poner colores de texto que permitan que el texto sea legible.
Por ltimo, queremos terminar este apartado con un consejo. Como
hemos repetido, la creacin de imgenes de fondo es complicada y
delicada. Si no las hemos hecho nosotros deberemos elegir bien, en
general suelen ser mas apropiadas las imgenes con tonos claros
sobre los que se puede leer sin problemas texto negro. Pero antes
de incluir la imagen deberemos volver a hacernos unas preguntas
Es realmente necesaria? Mejora realmente el aspecto grfico?
que con frecuencia nos hacen ver las cosas ms claras. Una vez
hemos probado la imagen debemos tener mucho cuidado y hacer
pruebas con otras personas para comprobar que el texto de la
pgina se lea bien. Piense que por muy espectacular que sea la
pgina, si no conseguimos que lea lo que tenemos que decir el
objetivo no estar cumplido.
19. Imagenes en las paginas Web (I)
Anterior | Inicio | Siguiente

En el segundo captulo: 'Nuestra primera pgina Web', aprendimos

a insertar imgenes en una Web. Ahora empezaremos recordando
brevemente aquel captulo, para continuar con las distintas tcnicas
que nos ofrece el lenguaje HTML no slo para incluir imgenes, sino
para manejarlas, cambiar su apariencia o controlar su disposicin
respecto a los dems elementos de la pgina.
Insertando Imgenes
Recordemos que para insertar una imagen en una pgina Web era
imprescindible guardarla en un archivo independiente del
documento HTML. Dicho archivo poda contener la imagen en
varios formatos, siendo los de mayor uso GIF y JPEG que pueden
ser vistos con la prctica totalidad de navegadores. Cuando
tenemos una imagen con estos formatos suelen tener la extensin
.gif en el caso del formato GIF y .jpg o .jpeg en el caso de imgenes
JPEG.
Algunas aplicaciones de retoque de imgenes guardan las
imgenes GIF y JPEG con la extensin en maysculas (.GIF,
.JPEG). Esta terminacin es vlida, pero los nombres de los
archivos que contienen imgenes, igual que los de los
documentos HTML, son sensibles a maysculas/minsculas y por
tanto .gif no es lo mismo que .GIF con lo que al referirnos al
archivo debemos escribir su nombre y terminacin respetando las
maysculas y minsculas. Si las hemos confundido cuando
probemos las pginas en el ordenador local probablemente
funcionen, pero dejarn de hacerlo cuando las publiquemos, es
decir, cuando las pongamos en el servidor Web.
El formato de una imagen es el cdigo usado para almacenarla
en un archivo. Los formatos simples simplemente guardan una
tabla con el color de cada punto de pantalla (pixel) de la imagen.
Sin embargo si guardamos una imagen grande con este formato
ocupar demasiado. Por esta razn se crearon formatos ms
complicados basados en complejas frmulas matemticas, que
consiguen reducir el tamao de la imagen. GIF y JPEG son
ejemplos de estos formatos. Los navegadores usan la extensin
(los tres/cuatro ltimos caracteres tras un punto) de los archivos
para averiguar el formato en que estn codificadas, si cambiamos
manualmente esa extensin no tendrn esa informacin y la
imagen no podr ser visualizada.
Es importante resaltar cambiando la extensin de una imagen no
cambiamos el formato de dicha imagen, pero podemos dejarla intil.
Ms adelante trataremos a fondo estos dos formatos y
comentaremos cuando es conveniente usar uno u otro.

Una vez tenemos la imagen en un archivo aparte (por ejemplo

img.gif) con el formato adecuado insertamos la imagen usando la
etiqueta IMG de la siguiente manera:
<img src="img.gif">
Como ya comentamos, esta etiqueta consta de una nica
instruccin. Pero aunque slo vimos uno de sus atributos, SRC,
contiene muchos ms que iremos estudiando a lo largo del captulo.
Pero antes de comenzar a ver nuevos conceptos...
Imgenes y texto
Cuando insertamos una imagen sta se sita justo en el lugar
donde est la etiqueta IMG independientemente de si hay texto
alrededor o no, por esta razn este tipo de imgenes reciben el
nombre de imgenes en lnea o imgenes inline. Usando esta
caracterstica podamos insertar imgenes pequeas como si
fuesen parte de un prrafo.
Si queremos insertar una imagen en el interior de un elemento de
nivel de bloque, pongamos por ejemplo un encabezado, no
tendremos ms que poner la etiqueta en el interior de ese elemento
(entre las instrucciones de inicio y fin). Si no lo hiciramos as,
despus de la imagen se producira un salto de lnea antes del
encabezado. Para entender esto mejor podemos fijarnos en la
figura 5.8 y comparar entre los siguientes cdigos:
Figura 5.8. Podemos apreciar la diferencia entre insertar una
imagen dentro del encabezado o insertarla fuera, en cuyo caso
queda en la lnea superior.

<img src="imagenes/chistera.gif">
<h2>LA CHISTERA-Humor y magia</h2>
<h2>
<img src="imagenes/chistera.gif">LA
magia</h2>

CHISTERA-Humor

que nos resultarn familiares de la primera prctica.

Como vemos, en el primer caso la instruccin de inicio del
encabezado, <h2>, provocar una salto de lnea y el efecto no ser
el deseado. En el siguiente caso hemos incluido la etiqueta IMG
dentro del encabezado, es decir, estamos diciendo al navegador
algo as: 'el encabezado consta de esta imagen y este texto'. En
este caso, como resulta totalmente lgico, el resultado es el
deseado.
An as el ejemplo anterior no resuelve todos los problemas que
podran plantearse al insertar imgenes. Como ya vimos en un
ejemplo del captulo 2 (fig. 2.9), que ahora reproducimos en la figura
5.9 cuando las imgenes son pequeas pueden incluirse junto con
el texto sin problemas, pero qu ocurre si queremos insertar una
imagen de dimensiones mayores? Podemos usar el mtodo
anterior, pero entonces obtendramos resultados como el de la
figura 5.10, que sin duda no es el deseado y provoca que el texto
sea difcilmente legible.

Figura 5.9. Como veamos en el fascculo 2 (fig. 2.9) cuando la

imagen es pequea puede entremezclarse con el texto sin
problema.

Figura 5.10. Cuando la imagen es grande, al insertarla en una

lnea de texto sta queda muy separada de la lnea anterior en
lugar de envolver la imagen.

Una opcin para solucionar este problema es provocar un salto de

lnea antes y despus de la imagen, tal y como hacamos en la
prctica 2 para las imgenes de la pgina de presentacin.
Podemos usar diversas etiquetas para conseguir los saltos de lnea:
P, CENTER, BLOCKQUOTE, BR, etc. por ejemplo:
<p>
<img src="montanas.html">
</p>
<center>

<img src="montanas.html">
</center>
Sin embargo no siempre nos conformamos con esto. Habitualmente
lo que queremos es que la imagen se inserte junto con el texto y
que este se site alrededor suyo, tal y como vemos en peridicos u
otras publicaciones. De esta forma podramos conseguir el efecto
de la figura 5.11. Afortunadamente es posible conseguir ese efecto
usando las capacidades de alineamiento de imgenes del HTML.
Figura 5.11. Con las tcnicas de alineamiento del lenguaje
HTML que estudiamos en este captulo podemos crear
interesantes efectos como texto envolviendo a una imagen.

20. Imagenes en las paginas Web (II)

Anterior | Inicio | Siguiente
Alineamiento de imgenes
En los ejemplos vistos al principio, en los que insertbamos
imgenes junto con texto normal, la parte inferior de la imagen
quedaba alineada con la parte inferior del texto. La etiqueta IMG
tiene un atributo llamado ALIGN que nos permite controlar el
alineamiento vertical de la imagen en funcin del texto que le rodee
o de otras imgenes de la misma lnea. El atributo ALIGN puede
tomar cinco valores diferentes. En primer lugar veremos aquellos

que nos permiten controlar la alineacin vertical de la imagen. Para

cada uno de ello mostraremos dos ejemplos, en ambos la imagen
que ser alineada es un cuadrado rojo con una lnea que marca su
centro. En el primero la imagen ir seguida de tres lneas de texto y
en el segundo ir precedida de una imagen el doble de alto que
marcar los lmites verticales de la lnea.
align=top:
Alinea la parte superior de la imagen con la parte superior de la
lnea. Para determinar cual es el lmite superior de la lnea se
tendrn en cuenta todos los elementos de esta (ya sean texto,
imgenes u otros), tanto los anteriores como los posteriores a la
imagen que estamos insertando. En la figura 5.12 podemos ver dos
ejemplos de align=top. El primer caso es sencillo de entender, pero
el segundo requiere alguna explicacin. La primera imagen se
alinea (por defecto) con su parte inferior a la misma altura que la
base del texto, despus nuestro cuadrado rojo, alinea su parte
superior con la parte superior de dicha imagen.
Figura 5.12. Ejemplos de align=top. En el primer caso la parte
superior de la imagen coincide con la del texto y en el segundo
con la parte superior de la imagen azul.

align=middle:
Alinea el centro (vertical) de la imagen con el centro de la lnea. Si
la lnea esta compuesta nicamente por texto el se tomar la base

de ste como centro de la lnea. Si hay ms elementos el

navegador calcula cual es el centro de la lnea en funcin de todos
ellos. En la figura 5.13 podemos ver unos ejemplos.
Figura 5.13. Ejemplos de align=middle. En el primer caso el
centro de la imagen coincide con la base del texto, en el
segundo intenta centrarse con la imagen azul.

align=bottom:
Alinea la parte inferior de la imagen con la parte inferior de la lnea
de texto. En este caso no se tendrn en cuenta otros elementos a
parte del texto para realizar el alineamiento. De nuevo podemos ver
ejemplos de este alineamiento en este caso en la figura 5.14.
Figura 5.14. Ejemplos de align=bottom. En ambos casos la
parte inferior de la imagen se alinea con la base del texto,
aunque la imagen azul baje por debajo.

NOTA: Es posible que nos encontremos alguna pgina en la que

haya una imagen con el atributo align=center. Este nuevo valor
(center) slo funciona con Internet Explorer y tiene el mismo
significado que align=middle y adems su nombre puede
confundirnos y creer que la imagen se mostrar como si estuviese
encerrada por la etiqueta <center>..</denter>. Por estas dos
razones recomendamos el uso de align=middle en su lugar.
Estos tres son los nicos tipos de alineamiento que inclua el
lenguaje HTML en sus orgenes. Sin embargo, aunque son tiles,
no nos permiten controlar la disposicin de las imgenes tanto
como querramos. Por ejemplo, todava no podemos insertar una
imagen y que el texto la bordee tal y como veamos en la figura
5.11. De hecho en todos los valores anteriores slo la primera lnea
de texto introducida despus de la imagen se situaba a la derecha
de esta, aunque esta lnea estuviese en la parte superior de la
imagen como ocurra en el primer caso de la figura 5.12. La
segunda lnea y las siguientes seran mostradas debajo de la
imagen.
Texto que envuelve a las imgenes o alineamiento horizontal
Vista la necesidad de nuevos mtodos de alineamiento se crearon
dos nuevos valores para el atributo align: left y right, que nos
permitirn controlar el alineamiento horizontal de las imgenes (esto

es, izquierda o derecha). Estos valores se han convertido en los

ms usados de las pginas Web por su enorme utilidad. En seguida
veremos como funcionan.
NOTA: Las imgenes pueden alinearse vertical y horizontalmente,
pero nunca a la vez. Esto es as porque ambos tipos de
alineamiento usan el atributo. align, y slo puede incluirse uno de
estos atributos dentro de la etiqueta img. Si ponemos ms el
navegador se quedar con el primer valor e ignorar el resto.
Antes es necesario hacer una matizacin. Aunque en un captulo
prximo estudiaremos con ms detenimiento las diferentes
versiones del lenguaje HTML, adelantaremos que los tres primeros
valores estudiados: top, middle y bottom, pertenecen al estndar
HTML 2.0. Sin embargo los dos nuevos valores que vamos a
explicar fueron introducidos en la versin HTML 3.2. El lector se
preguntar y para que quiero saber yo eso? Pues bueno, todos los
navegadores entienden HTML 2.0, pero alguno no entiende HTML
3.2 y por tanto no entendern align=left ni align=right. Sin embargo
no debemos preocuparnos en este caso, ya que es difcil a estas
alturas encontrar un navegador que no soporte HTML 3.2 y por
tanto podremos estar casi seguros que nuestros visitantes
disfrutarn de nuestras imgenes alineadas.
Por otro lado aquellos visitantes de la pgina que usen un
navegador muy antiguo vern lo mismo que si no hubisemos
puesto el atributo align, pero no tendrn ningn otro problema, por
tanto concluiremos que podemos usar los nuevos valores sin
demasiada preocupacin.
Y despus de esta matizacin pasamos ya a explicar el significado
de estos atributos.
align=left
La palabra left significa, en ingls, izquierda, por tanto al usar este
valor la imagen se sita a la izquierda de la pgina. Pero su efecto
es an ms importante, ya que si a continuacin de la imagen
introducimos texto o cualquier otro elemento del Web ste rodear a
la imagen, no pasar a la siguiente lnea.
Como es importante entender bien el significado de esta etiqueta
para usarla adecuadamente vamos a explicar ms detenidamente
como reacciona un navegador cuando se encuentra una imagen
alineada a la izquierda entre un prrafo de texto: en primer lugar se
pasa a la siguiente lnea y se inserta la imagen, alineada, como
hemos dicho antes, a la izquierda. Despus si el navegador se
encuentra con ms texto y queda sitio en la lnea anterior a la
imagen lo rellena con ese texto, cuando se acabe la lnea seguir
mostrando el texto en las lneas sucesivas, rodeando la imagen. En

la figura 5.15 podemos ver un ejemplo de su funcionamiento. Como

vemos aunque insertamos la etiqueta img tras la palabra imagen
tras insertar sta el texto posterior a esta etiqueta sigue
mostrndose como si la imagen no hubiera sido insertada.
Figura 5.15. Alineando una imagen a la izquierda con align=left
conseguiremos que el texto envuelva a la imagen.

align=right
Probablemente el lector ya haya deducido que este otro valor sirve
para indicar que la imagen estar alineada a la derecha (right
significa precisamente derecha en ingls). El efecto provocado por
align=right es idntico al anterior, solo que ahora la imagen se
situar a la derecha de la pgina y el texto la bordear por la
izquierda. En la figura 5.16 podemos apreciar el mismo cdigo de la
figura 5.15 pero cambiando el alineamiento de la imagen.
Figura 5.16. Usando align=right conseguimos igualmente que el
texto envuelva a la imagen pero ahora sta se situar a la
derecha de la pgina.

NOTA: Existen otros modos de alineamiento, pero no funcionan en

todos los navegadores, ni forman parte del lenguaje HTML. Esos
modos de alineamiento han sido creados por los fabricantes de un
determinado navegador y por tanto no funcionan con el resto. En
posteriores captulos hablaremos de este tema y de otras
extensiones de los navegadores y comentaremos los otros tipos de
alineamiento existentes.
21. Imagenes en las paginas Web (III)
Anterior | Inicio | Siguiente
Como terminar el texto envolvente
En la figura 5.11 adelantbamos un ejemplo de cmo quedaba una
imagen con texto que envolvindola. En ese caso usbamos una
fotografa de tamao considerable, y por tanto haba numerosas
lneas de texto a su izquierda. Despus de la primera frase pusimos
un punto y aparte, que como ya sabemos, se hace en HTML con la
etiqueta <br>, y continuamos: "Desde las...".
Pero podemos imaginar otro caso, como el de la figura 5.17 en el
que lo nico que queremos es escribir unas pocas lneas que
comenten la imagen pero continuar el resto del texto despus
(debajo) de la imagen. Si ponemos br sin ms pasaremos a la
siguiente lnea, pero no al final de la imagen. Un primer mtodo que
se nos podra ocurrir para conseguir este efecto sera poner la
etiqueta br muchas veces, tantas como lneas quepan hasta el final
de la imagen. Sin embargo este sistema a parte de ser molesto, no
funciona como puede comprobar el lector si decide probarlo.

Figura 5.17. Usando el atributo clear de la etiqueta br podemos

terminar el texto envolvente y seguir escribiendo debajo de la
imagen.

Pero entonces existe alguna otra forma de conseguirlo? La

respuesta es SI. Cuando se aadieron los valores right y left a los
modos de alineamiento se introdujo tambin un nuevo atributo en la
etiqueta br que nos permitiera tratar con este tipo de alineamiento.
Ese atributo se llama clear, puede tomar los siguientes valores.
left
Provoca un salto de lnea hasta el primer margen libre a la
izquierda. Esto quiere decir que provocar un salto hasta la primera
lnea en la que no hay una imagen a la izquierda y por tanto se usa,
en general, cuando hay una imagen alineada a ese lado. Este valor
es el que hemos usado en el ejemplo de la figura 5.17. Su modo de
uso es el siguiente:
<br clear=left>
right
Provoca un salto de lnea hasta el primer margen libre a la derecha,
por lo dems funciona idnticamente al valor anterior:
<br clear=right>

all
Provoca un salto hasta la primera lnea que tiene tanto el margen
izquierdo como el margen derecho libres. Es decir provoca el efecto
de los dos valores anteriores combinados.
br clear=all
Ya empezamos a sentir que tenemos una gran control sobre la
disposicin de las imgenes en nuestra pgina, pero an podemos
manejar un parmetro ms en relacin a estas y al texto que las
envuelve: el espaciado que hay entre ellas.
Mrgenes alrededor de las imgenes
Para poder controlar los mrgenes se crearon dos nuevos atributos
ms para la etiqueta img: vspace y hspace que controlan el tamao
de los mrgenes vertical (vspace proviene de Vertical SPACE que
significa espaciado vertical) y horizontal (hspace proviene de
Horizontal SPACE, espaciado horizontal) respectivamente. Estos
atributos suelen acompaar al uso de align=left y align=right.
El tamao de los mrgenes se indicar en pixeles (puntos de
pantalla). Veamos ahora un ejemplo con amplios mrgenes para
que podamos apreciar bien el efecto de estos atributos. El cdigo
usado es:
<img align=left vspace=35 hspace=35>
Y podemos ver el resultado en la figura 5.18
Figura 5.18. Usando los atributos hspace y vspace podemos
controlar la separacin entre la imgen y el texto que la
envuelve.

Imgenes enlace
A estas alturas del curso de HTML dominamos la creacin de
enlaces hipertexto y conocemos como insertar imgenes en
nuestras Web. Uniendo ambos conocimientos vamos a crear
imgenes que nos servirn como enlaces a otros lugares del World
Wide Web.
No ser necesario aprender nada nuevo, lo nico que
necesitaremos es combinar los efectos de las etiquetas a y img. En
primer lugar deberemos insertar la instruccin de inicio de a,
despus incluir la etiquequeta img y por ltimo insertamos la
etiqueta de fin de a. Un ejemplo muy tpico del uso de imgenes
enlace, como suelen ser denominadas, son las flechas para
avanzar o volver atrs en una pgina. En nuestra prctica del
captulo pasado usamos estas flechas pero solo como indicacin de
el resultado de pulsar sobre el texto adjunto. Ahora convertiremos
esas imgenes en enlace para que se pueda pulsar sobre ellas. El
cdigo a usar es:
<a href="index.htm">
<img src="img/izda.gif">

</a>
Invitamos al lector a que haga el mismo cambio en el resto de
imgenes usadas en aquella prctica.
Invitamos al lector a que haga el mismo cambio en el resto de
imgenes usadas en aquella prctica.
Figura 5.19. Combinando las etiquetas img y a adecuadamente
podemos crear imgenes enlace. Los navegadores indican esto
mostrando un borde azul alrededor de estas imgenes.

Nuestro siguiente objetivo ser aprender a controlar este borde as

como crear otros muchos efectos con las imgenes.
22. Cmo cambiar la apariencia de las imagenes
Anterior | Inicio | Siguiente
Borde de las imgenes
El lenguaje HTML permite recuadrar a las imgenes que incluyamos
en nuestras pginas con un borde de grosor variable. En general
este borde es invisible, a nos ser que especifiquemos lo contrario.
Sin embargo cuando vimos las imgenes enlace observamos que
alrededor de estas imgenes apareca un borde azul indicando que
se poda pulsar sobre ellas. Como enseguida veremos que es
posible conseguir que las imgenes normales SI tengan ese borde y
que las imgenes enlace no lo tengan o que sea de otro grosor
distinto al que aparece por defecto.
La manera de controlar el borde es usar un nuevo atributo,
BORDER, que debe ser usado dentro de la etiqueta IMG. Este
atributo toma como valor el nmero de pixeles que debe tener el
borde. Si nuestro objetivo no es aadir un borde sino quitarlo, o
asegurarnos que no lo tendr debemos usar BORDER=0. De esta
forma podremos conseguir que desaparezca el borde en las
imgenes enlace. En la figura 5.20 podemos ver tres ejemplos de
imgenes enlace:

Figura 5.20. Las imgenes enlace tienen un borde azul por

defecto, pero podemos quitarlo o variar su grosor usando el
atributo BORDER de la etiqueta IMG.

En el primero de ellos no hemos usado el atributo BORDER:

<A HREF="otra.htm">
<IMG SRC="izda.gif">
</A>
En el segundo lo hemos usado dndole el valor cero para eliminar
el borde:
<A HREF="otra.htm">
<IMG SRC="izda.gif" BORDER=0>
</A>
Y en el tercero le hemos dado el valor 10:
<A HREF="otra.htm">
<IMG SRC="izda.gif" BORDER=10>
</A>
El uso de BORDER=0 es especialmente til en los llamados iconos
de navegacin. Estos iconos son imgenes enlace que incluimos en
las pginas y que suelen tener la apariencia de botones, flechas y
similares y cuya funcin es ayudar al visitante a navegar por nuestra
pgina. En la figura 5.21 podemos ver varios de estos iconos. En
todos estos casos la aparicin de un borde alrededor de la imagen
perjudicara su apariencia.

Figura 5.21. Las imgenes enlace se usan a menudo para crear

iconos de navegacin como los que aqu vemos. En estos
casos es conveniente quitar el borde usando BORDER=0.

Sin embargo no debe parecer que el atributo BORDER slo tiene

utilidad en las imgenes enlace, ya que podemos usarlo con todo
tipo de imgenes y en ocasiones nos ayuda a crear interesantes
efectos. En la figura 5.22 podemos ver ejemplos de imgenes
normales sin borde o con borde de distinto grosor.
Figura 5.22. Las imgenes normales tambin pueden tener un
borde de grosor variable, aunque en este caso el color no es
azul, sino negro.

En estos ejemplos observamos que si las imgenes no son links el

borde es negro en vez de azul. No existe por ahora ningn medio
de elegir el color del borde.
Pero adems de poder aadir un borde a las imgenes, el
HTMLnos permite realizar alguna otra modificacin en la apariencia
de las imgenes ms importante an, como puede ser modificar su
tamao. De esta forma podremos usar una misma imagen varias
veces y con diferentes tamaos en una pgina Web sin tener crear
un archivo GIF o JPG diferente para cada una.
Modificando el tamao de las imgenes
Tanto las imgenes GIF como las JPEG son imgenes
rectangulares, esto es, su tamao est determinado nicamente por
dos propiedades: su anchura y su altura. Tanto una como otra
suelen tener valores dados en pixeles o puntos de pantalla.

El lenguaje HTML nos permitir modificar estas propiedades de las

imgenes a incluir en una pgina de manera que podamos
adaptarlas al tamao que necesitemos. La forma de hacer realidad
esta transformacin es usar dos nuevos atributos de la etiqueta
IMG: WIDTH y HEIGHT, que significan en ingls anchura y altura
respectivamente. A cada uno de estos atributos deberemos darle un
tamao en pixeles que suele oscilar entre 20 y 600 en los casos
habituales.
Existen dos formas de usar estos atributos. La primera de ellas
consiste en dar valores tanto a WIDTH como a HEIGHT con lo cual
estaremos determinando por completo el tamao con el que el
navegador debe mostrar la pgina. El otro mtodo consiste en usar
slo uno de ellos, o bien WIDTH o bien HEIGHT. Al hacer esto la
dimensin que no usemos se adaptar para mantener la proporcin
de la imagen. Por ejemplo, si tenemos una imagen de 500x250, es
decir de anchura 500 y de altura 250, pero al insertarla en la pgina
usamos el siguiente cdigo:
<IMG SRC="imagen.gif" WIDTH=250>
La imagen ser mostrada por el navegador con una tamao de
250x125. Como vemos la relacin entre la anchura y la altura sigue
siendo la misma, y por tanto la imagen no aparecer deformada. Si
lo que queramos era conseguir un tamao de 250x250 debamos
haber escrito el siguiente cdigo:
<IMG SRC="imagen.gif" WIDTH=250 HEIGHT=250>

En la figura 5.23 hemos usado una imagen de tamao original

290x192 y la hemos aplicado diferentes transformaciones.
Figura 5.23. Usando los atributos WIDTH y HEIGHT podemos
variar el tamao de las imgenes. Si slo usamos uno la otra
dimensin se ajusta para mantener las proporciones.

En la primera de ellas hemos fijado una anchura mitad de la original

usando WIDTH=145, pero sin incluir el atributo HEIGHT. En este
caso la altura se ajusta automticamente a 96 pixels (la mitad del
original) para que se mantengan las proporciones. En la siguiente
imagen hemos usando los dos atributos, tanto HEIGHT como
WIDTH con lo cual obtenemos una imagen con las dimensiones
deseadas, pero deformada, ya que no se mantienen las
proporciones originales.
En general no se usan los atributos WIDTH y HEIGHT para obtener
imgenes de mayor tamao que el original, ya que el resultado
obtenido tendra muy poca calidad. El lector puede hacer la prueba.
El mtodo que usan la mayora de los navegadores para reducir
el tamao de las imgenes consiste en eliminar filas y columnas
completas de pixeles elegidas aleatoriamente. Para aumentar el
tamao se duplican filas y columnas elegidas de manera
igualmente aleatoria. Este mtodo es usado por su rapidez, pero
en ocasiones la calidad ofrecida no es la deseable, especialmente
si en la imagen hay texto. Por esta razn si es importante una
buena visualizacin de la imagen conviene usar un programa de
retoque fotogrfico para modificar el tamao de la imagen en vez
de usar los atributos WIDTH y HEIGHT.
Vamos a terminar esta seccin dedicada a cambiar la apariencia de
las imgenes de una pgina Web con un interesante truco. Gracias
a l conseguiremos una visualizacin ms rpida de nuestras
pginas. La idea es simple, y consiste en incluir SIEMPRE el
tamao de las imgenes con los atributos WIDTH y HEIGHT (es
necesario incluir los dos) al insertar una imagen en la pgina. Este

truquillo que parece inocente en un principio tiene dos importantes

ventajas:
Los navegadores cuando les llega una imagen calculan sus
dimensiones para saber como deben mostrarlas, al drselas
directamente con el cdigo ganaremos el tiempo que el navegador
perdera realizando este clculo.
La segunda, y quiz ms importante ventaja, consiste en que el
navegador podr colocar todos los elementos de la pgina desde un
principio sin esperar a que lleguen las imgenes. Para entender
porque ocurre esto es necesario aprender un poco ms sobre el
funcionamiento del protocolo HTTP. Sin adentrarnos en detalles
muy tcnicos diremos que los navegadores, cuando se les pide una
pgina, cargan (o bajan) del WWW el archivo HTML con el cdigo.
Tras leerlo y mostrar el texto empiezan a cargar los archivos con las
imgenes. Cuando llega una imagen el navegador la coloca en su
sitio, pero como no saba cuanto iba a ocupar de antemano
probablemente le haba dejado un espacio demasiado pequeo,
con lo cual es necesario recolocar todos los elementos de la pgina,
y esto ocurre con cada imagen! Al incluir los tamaos de las
imgenes en el cdigo el navegador reserva el espacio adecuado y
evita tener que recolocar todo sucesivas veces con el consiguiente
ahorro de tiempo. En la figura 5.24 podemos ver la pgina de la
prctica 2 antes tras leerse el cdigo, pero antes de mostrar las
imgenes. Como vemos, el navegador (Explorer en este caso) ya
ha reservado el tamao para las imgenes que quedan por llegar.
Figura 5.24. Si incluimos junto con la imagen la informacin de
sus dimensiones el navegador podr reservar espacio para
ellas con slo leer el cdigo.

En ocasiones este ahorro de tiempo es considerable, por lo que

nuestra recomendacin es que, sin duda, merece la pena usar este
truco. Para averiguar el tamao de las imgenes podemos recurrir a
programas de retoque o visualizacin de imgenes como Paint
Shop Pro (Shareware) o IrfanView(Freeware), aunque los ms
modernos editores de HTML como FrontPageo HomeSite realizan
esta labor por nosotros.
23. Alternativas a las imagenes inline (I)
Anterior | Inicio | Siguiente
El atributo ALT
Hasta ahora hemos hablado de la importancia de las imgenes y el
diseo grfico en general en el World Wide Web. Sin duda la
abundancia de grficos y otros contenidos multimedia han
provocado su gran expansin. Sin embargo, como ya hemos
comentado antes a lo largo de esta obra, existen algunos
navegadores que slo son capaces de mostrar texto. Tambin
hemos mencionado e incluso hemos mostrado imgenes del ms
conocido y usado: Lynx. Quiz el lector se haga an la pregunta
porqu querra alguien acceder al WWW para ver slo texto? Las
razones pueden ser de distinto tipo, pero podemos encontrar dos
que tienen gran importancia. La primera consiste en que es posible
que el navegante acceda a la red desde su trabajo o desde el
laboratorio de una universidad donde los equipos son todava
antiguos o trabaja con terminales conectados a una estacin de
trabajo, que slo son capaces de mostrar texto, en estos casos es
obligatorio usar un navegador en modo texto . Otra razn puede ser

que an teniendo un magnfico ordenador (y monitor) ltimo

modelo, queramos acceder al WWW a toda velocidad para acceder
a cierta informacin, en este caso los navegadores modo texto son
enormemente tiles ya que alcanzan velocidades mucho mayores.
Sea como fuere nuestra labor como programadores de pginas
Web ser conseguir que nuestras pginas puedan ser visitadas por
todo el mundo. De esta manera tendrn ms xito. Por ello
debemos ofrecer alternativas a las imgenes que incluimos en
nuestras pginas.
El atributo ALT, de la etiqueta IMG, permite especificar un texto
alternativo que ser mostrado por los navegadores en caso de que
la imagen no pueda ser vista. Ese texto ser introducido
entrecomillado como valor del atributo ALT, de la siguiente forma:
<IMG SRC="montanas.gif"
ALT="Fotografa de unas montaas nevadas de
los Alpes">

Las razones por las que una imagen puede no ser mostrada son
diversas pero las podemos agrupar en tres:
El primer caso es el anteriormente comentado de navegadores en
modo texto. En este caso es necesario hacer un comentario
especial. Cada vez que el navegador se encuentra con una imagen
(es decir con una etiqueta IMG en el cdigo HTML ) en vez de
mostrarla la sustituye por el siguente texto: [IMAGE] (image significa
imagen en ingls). Sin duda esta palabra no es muy descriptiva, y
adems es la misma para todas las imgenes. Para solucionarlo el
programador puede usar el atributo ALT, en ese caso el texto
[IMAGE] ser sustituido por el que se indique como valor de este
atributo, que sin duda explicar mejor el contenido de la imagen. En
ocasiones es conveniente usar el atributo ALT sin ningn texto
(ALT=" ") para evitar la aparicin de [IMAGE], pero esto no debe
hacerse muy a menudo.
Un segundo caso puede ser que el usuario haya decidido desactivar
la opcin de ver las imgenes de las pginas. Tanto Explorer (en
Opciones de Internet/Opciones avanzadas/Multimedia) como
Netscape (en Preferences/Advanced) ofrecen esta opcin. Si
ponemos un texto alternativo suficientemente descriptivo el visitante
podr decidir si merece la pena cargar la imagen o no.
Un tercer caso ocurre cuando hay un problema en la transmisin de
la imagen o porque se ha indicado un nombre incorrecto. En este

caso los navegadores muestran un smbolo grfico acompaado del

texto alternativo. En la figura 5.25 podemos ver este caso con
Explorer y Netscape, donde hemos usado el cdigo anterior usando
el atributo ALT para que sea mostrado un texto alternativo.
Figura 5.25. Con el atributo ALT podemos especificar un texto
alternativo a las imgenes. En esta figura vemos como lo
muestran Explorer y Netscape.

En previsin de todos estos casos el uso del atributo ALT en las

pginas que programemos es ms que recomendable. De esta
forma estaremos dando calidad a nuestras pginas y estaremos
mostrando que nos preocupamos por todo tipo de audiencia.
Para terminar hemos de decir que los navegadores Internet
Explorer y Netscape dan un segundo uso al atributo ALT. ste
consiste en mostrar su contenido en forma de bocadillo cuando el
usuario sita el puntero del ratn encima de la imagen tal y como
podemos ver en la figura 5.26:
Figura 5.26. Algunos navegadores como Explorer muestran el
texto de ALT como un bocadillo que aparece cuando ponemos
el cursor encima de la imagen.

en la que hemos modificado el cdigo usado en la prctica 2 para

aadir el atributo ALT:
<IMG SRC="img/logo.gif"
ALT="Logotipo de la compaa">

Si bien el uso del atributo ALT ofrece un interesante mtodo para

ofrecer una alternativa a las imgenes con un texto existe otro con
una utilidad mucho ms amplia y que consiste en usar, en lugar de
las imgenes inline vistas hasta ahora, las llamadas imgenes
externas.
Imgenes externas
Estas imgenes no se visualizan junto con el resto de la pgina,
sino que se proporciona al visitante un enlace para que pueda
acceder a ellas. Las razones por las que en ciertas ocasiones se
usan la imgenes externas y por las que merece la pena
mencionarlas aqu son muchas, pero las podemos resumir en
cuatro:
La gran mayora de navegadores grficos soportan los formatos GIF
y JPEG, y algunos de ellos soportan algn otro formato pero no es
lo habitual. Sin embargo gran parte de los navegadores, grficos o
no, soportan un rango mucho ms amplio de formatos de imgenes
con la ayuda de aplicaciones externas, por lo que usando imgenes
externas podremos usar otros formatos distintos de GIF y JPEG y el
navegador se encargar de llamar a la aplicacin que necesite para
visualizarlo.
Como hemos comentado repetidas veces los navegadores en modo
texto no pueden mostrar imgenes inline, sin embargo si pueden
mostrar imgenes externas ayudndose de algn programa de
visualizacin o edicin grfica.

Mientras las imgenes inline deben tener un tamao reducido para

no provocar grandes esperas al navegante al visitar nuestra pgina,
las imgenes externas pueden ser de mayor tamao ya que slo las
vern aquellos que lo pidan y por tanto hemos de suponer que les
interesa lo suficiente como para esperar. En todo caso si el tamao
supera los 100 Kbytes es conveniente indicar dicho tamao entre
parntesis junto con el texto identificativo de la imagen.
Nos ofrece la posibilidad de combinar imgenes inline con
imgenes externas para que las pginas se carguen ms
rpidamente. De esta forma crearemos los llamados thumbnails que
veremos con ms detalle un poco ms adelante.
La creacin de imgenes externas vara de las vistas hasta ahora
en que ya no se usa la etiqueta IMG. A cambio haremos uso de la
etiqueta de creacin de links: <A ...> </A>, pero en esta ocasin lo
enlazado no ser otra pgina HTML sino la propia imagen externa.
El cdigo que debemos usar es:
<A HREF="imagen.xxx"<
imagen externa
</A>
siendo xxx la extensin correspondiente al formato de la imagen. En
la tabla 5.2 podemos ver algunos formatos y extensiones
comnmente usados.
Figura 5.2. Extensiones y breve descripcin de los principales
formatos de imgenes usados en el WWW.

Cuando el visitante pulse sobre el texto activo, en este caso

'imagen externa' el navegador bajar la imagen de Internet y luego
la mostrar o ejecutar otra aplicacin que pueda mostrarla.
Aunque hasta ahora hemos usado los links para enlazar otras
pginas HTML y en este mismo apartado para insertar imgenes
externas en realidad la utilidad de esta etiqueta va mucho ms all.

De hecho podemos enlazar a nuestra pgina cualquier tipo de

archivo, en la mayora de los navegadores actuales cuando el
usuario selecciona un enlace a un archivo que ellos mismos no
pueden visualizar le ofrece dos opciones: guardar el archivo en el
disco duro o llevar a cabo una accin en funcin del tipo de archivo.
Esta ltima opcin consiste en ejecutar el archivo si es ejecutable,
usar un programa descompresor si es un archivo comprimido,
visualizarlo con un programa adecuado si es un vdeo, etc.
Thumbnails
Como hemos adelantado antes, con este nombre se conoce al
resultado de la combinacin de imgenes inline con imgenes
externas. El objetivo de los thumbnails es proporcionar una
previsualizacin, un aperitivo, de la imagen completa (que ser
externa) usando una imagen inline de menor tamao. Esta imagen
inline es, de hecho, la que recibe el nombre de thumbnail, y ser o
bien una versin de dimensiones reducidas de la imagen final o una
parte de ella. En general, o bien el propio thumbnail, o bien un texto
adjunto (o ambas cosas) servirn como enlace para obtener la
imagen completa tal y como podemos ver en la figura 5.27.
Figura 5.27. Ejemplos de Thumnails. En el primer caso se
muestra un trozo de la imagen y en el segundo la imagen
completa reducida, el efecto es similar en ambos casos.

que muestra dos ejemplos de thumbnails de la imagen completa de

la figura 5.28.
Figura 5.28. Imagen completa que ser mostrada cuando el
visitante seleccione los enlaces que acompaan a los
thumbnails de la figura 5.27

Como vemos, el uso de thumbnails permite al visitante si decide

cargar la imagen completa elegir entre el formato GIF, de mayor
tamao y calidad, o en formato JPEG con calidad ligeramente peor
pero mucho menor tamao. Sobre las imgenes de aperitivo hay
que decir que en el primer caso se ha usado un trozo de la imagen
mientras que en el segundo se ha usado la imagen entera que ha
sido reducida en tamao con un programa de edicin de imgenes.
En ambos casos el tamao de la imagen a quedado reducido a
unos 15-20Kb que las hace ms apropiadas para incluirlas como
imgenes inline.
Es importante resaltar que para la creacin de thumbnails no se
pueden usar los atributos WIDTH y HEIGHT ya que se perdera
su utilidad. El objetivo del thumbnail es tener una imagen en un
archivo aparte que sea de menor tamao en bytes que la original
para que cargue ms rpido. Al usar WIDTH y HEIGHT la imagen
sigue siendo la misma, y por tanto su tamao tambin, luego no
conseguiremos reducir el tiempo de carga.
El uso apropiado imgenes externas y de thumbnails nos permitir
crear pginas de gran contenido grfico y de pequeo tamao.
24. Alternativas a las imagenes inline (II)

 Anterior | Inicio | Siguiente

Imgenes mapa
Empezamos a adentrarnos ya en algunas de las caractersticas ms
avanzadas del lenguaje HTML. En este caso es el turno de las
imgenes mapa.
Con bastante probabilidad el lector habr visitado alguna pgina en
la que haba alguna imagen en la que se poda pulsar en diferentes
partes para acceder a diferentes destinos. Estas son las llamadas
imgenes mapa y en la gran mayora de pginas Web podemos
encontrar una. En un principio para realizar las imgenes mapa era
necesario usar determinados programas especiales que deban
estar en el servidor Web, sin embargo con el estndar HTML 3.2 se
incluyeron algunas etiquetas HTML que nos permitirn realizar
estas imgenes mapa con mayor facilidad.
Imgenes mapa en el servidor
Este era el nico mtodo usado inicialmente para crear las
imgenes mapa, para usarlo debemos instalar en el servidor Web
(si tenemos acceso a l) algn programa dedicado a este fin. Los
ms usados son los del CERN y NCSA. Para usar este mtodo
debemos llevar a cabo los siguientes pasos:
Crear un archivo de configuracin del mapa con el cdigo del
programa usado para indicar las zonas activas y donde nos dirigirn
el pulsar sobre ellas. Para averiguar como es el cdigo a usar
tendremos que leer la documentacin que acompae al programa,
pero en general no ser muy complicado. El archivo con el cdigo
tiene en general la terminacin '.map'.
Escribir el cdigo HTML de manera que la imagen sea un enlace al
archivo con su cdigo. Adems debemos incluir el atributo ISMAPen
la etiqueta IMG:
<A HREF="img.map"<
<IMG SRC="img.gif" ISMAP>
</A>
En la pgina de POST-IT, figura 5.29, podemos ver un ejemplo de
imagen mapa en el servidor.
Figura 5.29. En la pgina principal de POST-IT vemos un
excelente ejemplo de la utilidad de las imgenes mapa.

En este caso la imagen representa una mesa con diferentes objetos

encima cada uno de los cuales representa una seccin del sitio
Web al que saltaremos si pulsamos sobre l.
La gran ventaja de este mtodo consiste en que funcionar con
cualquier navegador, el nico requisito es tener el programa en el
servidor Web. El principal inconveniente es que, por lo general no
todo el mundo tiene acceso al servidor Web y no puede instalar los
programas que necesita, por otro lado tener el cdigo del mapa en
un archivo aparte complica su modificacin.
Para resolver estos problemas apareci el segundo mtodo en el
que el cdigo de todas las imgenes mapa de una pgina podrn
estar en esa misma pgina y adems se crear usando etiquetas
del lenguaje HTML.
Imgenes mapa en el cliente
Este tipo de imgenes reciben el nombre de imgenes mapa en el
cliente porque ser el navegador de cada usuario (cada cliente) el
que se encargar de leer el cdigo cuando se pulsa sobre la imagen
mapa y averiguar la direccin de destino. No es necesario ningn
programa especial en el servidor Web.
En este caso nos bastar usar la etiqueta IMG para crear la imagen,
eso s con un nuevo atributo: USEMAP . Por otro lado ahora
deberemos usar algunas otras etiquetas nuevas para crear el mapa
de la imagen. La creacin de este tipo de imgenes mapa consta
por tanto de dos pasos:

Definicin de la imagen como imagen mapa, as como informar de

dnde est el mapa a usar. La sintaxis es sencilla:
<IMG SRC="imagen.gif"
USEMAP="#mapa1">

La imagen es, en este caso, una con formato GIF de nombre

imagen.gif. En este ejemplo usamos un mapa llamado mapa1,
como vemos la forma de referirnos a l es igual que con las anclas:
anteponiendo el smbolo '#'. En esta ocasin el mapa estar en el
mismo documento HTML, pero esto no tiene porque ser as. Si, por
ejemplo, usamos una imagen mapa en todas y cada una de las
imgenes de un sitio Web, podemos poner el mapa en la pgina
principal (index.htm) y despus referirnos a l como:
<IMG SRC="imagen.gif"
USEMAP="index.htm#mapa1">

Ms an, no estamos limitados a que el mapa est en nuestro sitio

Web, puede estar en cualquier lugar del WWW, para referirnos a l
tendremos que poner la direccin URL de la pgina dnde est
seguido por un # y el nombre del mapa.
El segundo paso es la creacin del mapa. Para ello usaremos una
nueva etiqueta: MAP. Esta etiqueta tendr una instruccin de inicio,
<MAP ...> , y otra de fin,</MAP> entre las cuales definiremos las
diferentes zonas activas de la imagen mapa. El nico atributo de
esta etiqueta es el necesario para darle un nombre: NAME, y se
usar de la siguiente manera:
<MAP NAME="mapa1">
...
</MAP>
A continuacin debemos crear las formas a las que nos referamos
antes. Para llevar a cabo esta labor usaremos otra etiqueta ms:
AREA que deber ser una vez para cada zona de la imagen mapa y
que consta de cuatro atributos:

HREF: Este atributo es idntico al del mismo nombre de la etiqueta

A. Con l debemos indicar la pgina o direccin URL a la que
saltaremos cuando pulsemos sobre esta zona activa.
ALT: Sirve para incluir un texto alternativo.
SHAPE: Define la forma de la zona, puede tener tres valores: rect
(zona rectangular), circle (zona circular) y poly (zona poligonal).
COORDS: Coordenadas de la zona, su valor depende de la forma
de esta. En la figura 5.30:
Figura 5.30. En esta figura podemos ver los valores que puede
tomar el atributo COORDS en funcin de si la zona es
rectangular, circular o poligonal.

podemos ver como ser en funcin de si el valor de SHAPE es...

rect: COORDS toma 4 valores separados por comas que
representan las coordenadas de el vrtice superior izquierdo y el
inferior derecho.
circle: COORDS toma 3 valores. Los dos primeros son las
coordenadas del centro y el tercero es el radio.
poly: COORDS tiene un nmero indefinido de valores que
representan las coordenadas de cada uno de sus vrtices.
Como ejemplo vamos a imaginar una imagen de 300x100 y vamos
a crear un mapa que la divida en dos:
<MAP NAME="mapa2">
<AREA SHAPE="rect"
COORDS="0,0,150,100"
HREF="izda.htm">
<AREA SHAPE="rect"
COORDS="150,0,300,100"
HREF="dcha.htm">

</MAP>
No ha sido complicado, no?
Las coordenadas vistas hasta ahora estn dadas en pixeles.
Tambin pueden darse en porcentajes, aunque esto slo suele
ser til para el caso de zonas rectangulares. La sintaxis a usar
sera por ejemplo: COORDS="0,0,50%,40%"
Existe un quinto atributo, NOHREF, que puede usarse en lugar de
HREF para indicar que una determinada zona no debe conducir a
ningn sitio al pulsar sobre ella. Este atributo no toma ningn valor.
Si dos o ms zonas se superponen se impone la que fuera definida
primero. Por esta razn si existe alguna zona con NOHREF suele
ponerse la primera de la lista.
El problema las imgenes mapa en cliente radica en que no todos
los navegadores estn preparado para este tipo de imgenes mapa,
y por tanto no podemos estar seguros de que todos los vistantes
vayan a poder disfrutar de nuestra imagen mapa.
Siempre que usemos una imagen enlace y especialmente si esta
es una imagen mapa es importante crear esos mismos enlaces
con textos para que se pueda acceder a ellos con navegadores
de slo texto o por si existe algn problema con la visualizacin
de las imgenes.
Hay que tener mucho cuidado con el uso de los atributos WIDTH
y HEIGHT con las imgenes mapa, ya que la imagen variar sus
dimensiones, pero el mapa no, por tanto las zonas que hayamos
definido no servirn.
EJERCICIO 5.1: Llegados a este punto queremos proponer un
ejercicio sencillo a los lectores. ste consistir en la creacin de un
mapa para la imagen de la figura 5.31:
Figura 5.31. Imagen mapa que puede sustituir el menu en forma
de lista de la pgina de la agencia de viajes Los Alpes.

incluida en el archivo ej5-1.zip, y usarla para sustituir el men

creado con una lista en la pgina de la agencia de viajes Los Alpes

creada en la prctica 2. Adems habr que proporcionar enlaces en

modo texto alternativos a la imagen (lo habitual es que estn en una
sola lnea. En el mismo archivo (extra.zip) se ofrece una solucin a
este ejercicio.
25. Mejoras en las imagenes
Anterior | Inicio | Siguiente
Tanto el formato GIF como el formato JPEG pueden ser vistos con
casi la prctica totalidad de los navegadores. Sin embargo Cundo
es conveniente usar uno y cuando es conveniente usar el otro?,
Puedo convertir las imgenes de un tipo a otro?, Qu ventajas
ofrece cada uno?. Conocer las respuestas a estas preguntas nos
permitir usar de una manera mucho ms eficiente y profesional las
imgenes en nuestras pginas. En este apartado nos dedicaremos
a responderlas y veremos las ltimas novedades del formato GIF
que permite crear imgenes transparentes e imgenes con
movimiento. Para terminar comentaremos algunos consejos para
aprovechar al mximo y eficientemente las posibilidades del HTML
en lo que a las imgenes se refiere.
Formatos GIF y JPEG
El formato GIF (Graphics Interchange Format, Formato de
intercambio de grficos) fue creado por CompuServe con el objetivo
de que fuese entendido por todo tipo de ordenadores. La primera
versin de este formato es actualmente conocida como GIF87 y sus
principales caractersticas son:
Limitada a 256 colores, si usamos menos la imagen tendr menor
tamao.
Compresin sin prdidas.
Lo que le convierte en un formato idneo para logos, iconos e todo
tipo de dibujos con colores slidos. Poco despus apareci una
segunda versin del formato conocido como GIF89a que aada las
siguientes caractersticas:
Posibilidad de crear imgenes con entrelazado.
Transparencia.
Imgenes con movimiento.
Actualmente los principales problemas del formato GIF es su
limitacin 256 colores, su mala compresin de fotografas y que
est patentada por CompuServe, que quiere empezar a cobrar por
su uso
El formato JPEG (Joint Photographic Experts Group) fue creado por
un grupo de expertos en fotografa por lo que est pensado
especialmente para este tipo de imgenes. Sus principales
caractersticas son:

Puede almacenar 16 millones de colores. Adems, al contrario de lo

que ocurra con el formato GIF, el tamao es independiente del
nmero de colores usados.
Ofrece un algoritmo de compresin que reduce grandemente el
tamao de las fotografas.
Esta compresin produce prdidas, es decir, la imagen sufre
deterioro.
Esta ltima caracterstica es el gran contratiempo que tiene el
formato JPEG pero en la mayora de las ocasiones es inapreciable.
Al comprimir una imagen en formato JPEG se puede elegir un nivel
de compresin de 1 a 99. Cuanto mayor sea este nivel mayor ser
la compresin pero tambin habr un mayor deterioro de la seal.
En la figura 5.32:
Figura 5.32. Mientras que el tamao de la imagen JPEG es
mucho menor la prdida de calidad apenas es apreciable.

podemos ver una comparacin entre la imagen de la ballena en

formato GIF y formato JPEG con un nivel de compresin 80 (lo
habitual es 20). Existe prdida de calidad, pero no es muy
apreciable, mientras que la disminucin de tamao es
impresionante y para imgenes de mayor tamao la diferencia es
an mayor.
Una vez conocidas las caractersticas de los dos formatos ha
llegado el momento de decidir cuando es conveniente usar uno y
cuando es conveniente usar el otro. Por lo general:
Conviene usar GIF si la imagen es pequea y hay pocos colores,
con mayor motivo an si hay bloques de la imagen con todos los
pixels del mismo color, como ocurre en los logos y dibujos similares.
Es recomendable usar JPEG siempre que la imagen sea muy
grande y/o tenga muchos colores como sucede en las fotografas.
EJERCICIO 5.2: Llegados a este punto podemos darnos cuenta que
en la prctica 2 usamos el formato GIF en algunas fotografas y que
el resultado hubiese sido mucho mejor usando el formato JPEG.
Este segundo ejercicio tendr como objetivo usar un programa de

retoque fotogrfico para convertir de formato estas imgenes

(montanas.gif y ski.gif). Los programas que pueden usarse para
llevar a cabo este propsito son muchos: PhotoShop y Paint Shop
Pro son una buena muestra de ellos. En el archivo ej5-2.zip se
incluyen las dos imgenes ya convertidas con un nivel de
compresin 60. De esta forma hemos conseguido reducir
montanas.gif de 13 Kb a 6'5 Kb y ski.gif de 10 Kb a 4'6 Kb. Aunque
en un principio puede parecer poco cuando una pgina tiene
bastantes imgenes escogiendo adecuadamente el formato de cada
uno conseguiremos que cargue mucho ms rpido.
Adems de GIF y JPEG existen otros formatos que no son usados
habitualmente en el WWW, pero merece la pena comentar los
formatos que entienden los dos principales navegadores:
Netscape soporta los formatos de imgenes GIF, JPEG, XPM y
XBM.
Explorer soporta los formatos GIF, JPEG, PNG y BMP.
Entre todos estos hay uno que destaca: PNG (Portable Network
Graphics), porque representa el futuro de los formatos de
almacenamiento de imgenes y combina las ventajas de GIF y
JPEG junto con otras nuevas:
Buena compresin tanto para logos como para fotos.
Posibilidad de transparencia y entrelazado.
16 Millones de colores.
Compresin sin prdidas.
Capacidad de aadir comentarios e informacin extra junto con la
imagen.
El formato PNG est pensado como un sustituto para el formato
GIF, ya que JPEG seguir siendo mejor con las fotografas. Por otro
lado todava habr que esperar algn tiempo para que sea
ampliamente aceptado. Aquellos lectores interesados en el tema
pueden obtener ms informacin al respecto en las siguientes
direcciones:
http://www.boutell.com/boutell/png
http://quest.jpl.nasa.gof/PNG/
Transparencia, Entrelazado y GIFs animados
Estas son las tres principales caractersticas que fueron aadidas al
formato GIF en la revisin GIF89a. Vayamos una por una:
Las imgenes transparentes consisten simplemente en elegir un
color de la imagen que no ser pintado por el visualizador (en
nuestro caso ser el navegador) al mostrarla. El uso de imgenes
transparentes es especialmente til cuando usamos una pgina con
fondos. Por ejemplo, en la figura 5.33:

Figura 5.33. En ocasiones, especialmente si usamos una

imagen como fondo, se consigue un efecto mucho mejor
haciendo que nuestras imgenes sean transparentes.

podemos ver la imagen de Los Alpes con transparencia y sin

transparencia en una pgina con una imagen de fondo. En general
las nicas imgenes que podemos considerar como candidatas a
convertirse en imgenes transparentes son aquellas con un color de
fondo dominante. Si intentramos hacer transparente una fotografa
los resultados no seran los deseados.
Las imgenes entrelazadas son imgenes muy similares a las
normales. La nica diferencia radica en la manera en que se va
mostrando la imagen en el navegador segn llega. Cuando un
navegador carga una imagen normal va mostrndola desde el
principio y va avanzando hacia abajo. Las imgenes entrelazadas
por el contrario se muestran al principio como una imagen borrosa
que se va aclarando segn la imagen termina de llegar, esto ocurre
por el mtodo especial de almacenamiento que se usa en este tipo
de imgenes. El entrelazado es especialmente til cuando se aplica
a las imgenes mapa, ya que en ocasiones no es necesario ver la
imagen a la perfeccin para elegir una opcin.
La tercera novedad del formato GIF89a es probablemente la que
ms xito ha tenido. Como el lector ya ha adivinado estamos
hablando de las imgenes animadas o GIFs animados. En los
primeros aos del WWW la nica forma de tener una animcin en
nuestras pginas consista en usar un applet (programilla) de Javao
similar, con los inconvenientes que esto representaba. Con la
aparicin de los GIFs animados todo se simplific, estos en realidad
no son ms que varias imgenes en formato GIFalmacenadas en
un nico archivo y que se van alternando ordenadamente para crear
el efecto de la animacin. Cada una de estas imgenes deben ser
creadas por separado y despues juntadas con algun programa

especial como Microsoft Gif Animator, GIF Movie Gear, etc. Otra
manera de obtener imgenes es acudir a las nmerosas pginas de
internet con colecciones de estas imgenes a nuestra disposicin.
En el directorio pblico DMOZ puede encontrarse una gran cantidad
de enlaces a estas pginas en su seccin de GIFs animados.
No es conveniente usar muchas imgenes animadas en una
misma pgina. Primero porque ocupan bastante tamao, segundo
porque pueden ser mareantes para el visitante y tercero porque
provocarn que el navegador vaya muy lento si el ordenador no
tiene mucha memoria. Por estas razones nuestra recomendacin
es usar un mximo de 2 imgenes animadas por pgina.
EJERCICIO 5.3: Este es el ejercicio final de este largo captulo
dedicado a las imgenes y al color en las pginas Web. En l
pretendemos que el lector aplique los conocimientos que ha
adquirido para mejorar el aspecto grfico de las pginas que
creamos en la prctica 2. En concreto proponemos los siguientes
cambios:
Poner un fondo en ambas pginas. El fondo debe ser
preferiblemente de tonos claros para que se pueda leer el texto con
facilidad. Si es necesario deberemos cambiar el color de este para
facilitar la legibilidad.
Hacer que tanto los enlaces normales y los visitados sean de color
verde y los activos morados.
Aadir los tamaos de las imgenes con los atributos WIDTH y
HEIGHT.
Incluir un texto alternativo (ALT) en todas y cada una de las
imgenes.
Aadir alguna imagen externa en los viajes con temas relacionados
con el destinos.
Mejorar el aspecto grfico general con ideas propias del lector.
Usar adecuadamente los tipos de imgenes para conseguir una
pgina con gran contenido grfico de un tamao total (el documento
HTML y todas las imgenes) de 40 Kb o menor.
En el archivo clip.zip se ofrecen algunas imgenes que pueden
ayudar a realizar este ejercicio y en el archivo pract2++.zip se
muestra una posible solucin a este de la que podemos ver un
anticipo en la figura 5.34.
Figura 5.34. Aspecto final de la pgina de Los Alpes despus
de aplicar los conocimientos sobre imgenes que hemos
adquirido en este captulo.

26. Cmo se crea una tabla HTML (I)

Anterior | Inicio | Siguiente
Para crear las tablas ser necesario usar una nueva etiqueta:
TABLE, que significa, en ingls, tabla. Esta etiqueta consta de
instruccin de inicio, <TABLE> , e instruccin de fin, </TABLE> .
Entre ambas debemos introducir otras tres etiquetas, que definirn
la estructura de la tabla. Estas etiquetas son:
TR: La etiqueta Table Row nos permitir insertar filas en la tabla. La
tabla tendr tantas filas como apariciones de esta etiqueta haya
entre <TABLE> y </TABLE>. La instruccin de inicio de TR, <TR>,
marca el comienzo de la lnea, la instruccin de fin, </TR%gt;,
marca su final. La instruccin de fin es optativa, si no se usa se
considera que una lnea ha acabado cuando comienza otra o
cuando acaba la tabla. Entre el comienzo y el fin de la lnea
debemos insertar las celdas de la tabla.
TH: Este es el primero de los dos tipos de celdas existentes en el
lenguaje HTML. El nombre de la etiqueta proviene del ingls Table
Header, encabezado de tabla. Al igual que la etiqueta anterior el
comienzo del encabezado viene dado por la instruccin de inicio,
<TH> y finaliza con la instruccin de fin, </TH>, o con el comienzo
de otra celda. En general entre el comienzo y el fin se suele insertar
texto, que ser mostrado en negrita o subrayado y centrado.

TD: Este es el segundo tipo de celda de las tablas HTML. El nombre

de la etiqueta, Table Data (Datos de tabla), nos induce a pensar que
su funcin ser introducir todos los datos que queramos en las
celdillas definidas de esta forma. Y as ser, de hecho podemos
insertar cualquier elemento de HTML: imgenes, listas, texto
formateado e incluso otras tablas. La diferencia de esta celda con la
anterior es pequea, y su existencia separada slo tiene sentido si
consideramos el carcter descriptivo del HTML. En la prctica la
diferencia principal es que el texto de los encabezados de tabla
aparecer resaltado y centrado y el de las celdas normales (TD) no.
El uso de las instrucciones de fin de TR, TD y TH es, como
hemos dicho, optativo. Sin embargo en las primeras versiones del
lenguaje HTML era obligatorio usarlas y por esta razn algunos
navegadores antiguos las necesitan para poder entender las
tablas. Es por ello que nuestra recomendacin es usar siempre
dichas instrucciones de fin para seguir con nuestro objetivo de
llegar a la mayor cantidad de pblico posible.
Con una mera descripcin de las etiquetas es difcil entender por
completo como se crean tablas en HTML, as que vamos a ver unos
ejemplos.
Para empezar crearemos una tabla sencilla de dos filas y dos
elementos. Vayamos por pasos:
En primer lugar ponemos la instruccin de inicio y fin de la etiqueta
TABLE dejando un espacio entre ellas para insertar posteriormente
el resto de etiquetas:
<TABLE>
...Otras etiquetas...
</TABLE>
A continuacin insertamos las filas. La tabla que nos hemos
propuesto crear consta de dos filas. Por tanto debemos usar la
etiqueta TR dos veces. Lo que insertemos en la primera (entre la
instruccin de inicio y la instruccin de fin) ser el contenido de la
primera fila y lo que insertemos en la segunda ser el contenido de
la segunda fila:
<TABLE>
<TR> </TR>
<TR> </TR>
</TABLE>

El tercer paso ser definir el contenido de cada fila. Como nos

habamos propuesto que la tabla tuviese dos columnas en cada fila
debemos insertar dos celdas en cada una. Como hemos explicado
antes, para crear una celda debemos usar la etiqueta TD. Entre la
instruccin de inicio y la instruccin de fin de est etiqueta ser
donde insertaremos el verdadero contenido de la tabla. En este
primer ejemplo sencillo ser simplemente texto, pero puede ser
cualquier otro elemento web como imgenes o listas. Volviendo a
nuestro ejemplo, para cada fila debemos escribir el siguiente
cdigo:
<TR>
<TD>
Columna1
</TD>
<TD>
Columna2
</TD>
</TR>
En los ejemplos que veremos a lo largo de este curso
sangraremos las etiquetas a distintos niveles para que sea ms
sencillo saber que etiquetas estn dentro de otras. No es
necesario realizar esto para que el cdigo funcione, de hecho
podramos escribir el cdigo en una sola lnea y tambin
funcionara, pero si es recomendable ya que nos facilita mucho su
lectura.
El cuarto paso es ponerlo todo junto, repitiendo el cdigo anterior
para cada fila. El cdigo final de la tabla ser:
<TABLE>
<TR>
<TD>
Fila1,Columna1
</TD>
<TD>
Fila1,Columna2
</TD>
</TR>
<TR>
<TD>

Fila2,Columna1
</TD>
<TD>
Fila2,Columna2
</TD>
</TR>
</TABLE>
En la figura 7.2 podemos ver como muestra Explorer esta tabla.
Figura 7.2. Ya hemos creado nuestra primera tabla, aunque es
sencilla ya podemos observar varias cosas curiosas en ella,
por ejemplo que por defecto no se dibujan los bordes.

Quiz el hecho que ms nos sorprenda es que la tabla no tiene

bordes, y que las celdas no estn dibujadas. Ms adelante
comentaremos algo ms sobre ello y aprenderemos a incluir bordes
de diferentes tamaos. Lo que ms nos interesa ahora es
comprender la estructura de la tabla anterior. Como hemos podido
comprobar, esta tabla se va creando por filas, y dentro de cada fila
se insertan las celdas, cada una de las cuales aparecern en una
columna.

A continuacin mostramos una tabla ligeramente ms complicada,

en la que, ahora s, haremos uso de los encabezados de tabla. En
ella observaremos adems que ocurre cuando una fila tiene ms
celdas que otra. Para la creacin del cdigo de esta tabla habr que
llevar a cabo los mismos pasos que en el ejemplo anterior. El cdigo
final que define la tabla ser:
</TABLE>
Este ejemplo es mostrado en la figura 7.3.
Figura 7.3. En esta segunda tabla ya podemos ver como son
mostrados los encabezados de tabla.

Como habamos comentado, el texto de los encabezados es

resaltado, en este caso (usando Explorer) es mostrado en negrita y
centrado con respecto al resto de los elementos de su columna. Por
otro lado en este ejemplo observamos el efecto de la existencia de
una fila con ms celdas (ms columnas) que el resto. En la primera
fila insertamos tres celdas usando la etiqueta TH y sin embargo en
las siguientes filas slo creamos dos celdas. Aunque lo pueda
parecer esto no es ningn problema. El navegador crear una tabla
de 3 filas y 3 columnas, pero algunas de las celdas estarn vacas.
Borde de las tablas
El siguiente paso en el aprendizaje de las tablas consiste en
aadirles un borde. Esto es tan sencillo como aadir un nuevo
atributo a la instruccin de inicio de la etiqueta TABLE. El atributo
del que hablamos es BORDER, que significa borde en ingls. Este

atributo puede tomar un valor en pixeles que representa el grosor

del borde a mostrar. Si incluimos BORDER sin ningn valor es
equivalente a BORDER="1" Repitamos el segundo de los ejemplos
vistos antes pero aadindole un borde de grosor 5.
<TABLE BORDER="5">
<TR>
<TH>
Encabezado1
</TH>
<TH>
Encabezado2
</TH>
<TH>
Encabezado3
</TH>
</TR>
<TR>
<TD>
Fila1,Columna1
</TD>
<TD>
Fila1,Columna2
</TD>
</TR>
<TR>
<TD>
Fila2,Columna1
</TD>
<TD>
Fila2,Columna2
</TD>
</TR>
</TABLE>
En la figura 7.4 podemos ver el resultado de este cdigo. En ella
observamos como Explorer le da un aspecto tridimensional al borde
de las pginas.
Figura 7.4. Tabla con bordes. En esta tabla podemos observar
lo que ocurre cuando una fila tiene ms celdas que otra o
cuando insertamos una celda sin nada dentro.

Un aspecto interesante a resaltar de la figura 7.4 es que las celdillas

que estn vacas, es decir, no tienen ni texto ni ningn otro
elemento en su interior no son dibujadas por los navegadores. En
este caso ni siquiera habamos puesto las instrucciones <TD> y
</TD > correspondientes a esas celdas, aunque si las hubisemos
puesto, pero sin ningn contenido dentro, es decir, si hubiramos
escrito:
<TR>
<TD>
Fila2,Columna1
</TD>
<TD>
Fila2,Columna2
</TD>
<TD></TD>
</TR>
El resultado habra sido el mismo.
Si queremos que s sean dibujadas debemos insertar la etiqueta TD
con un salto de lnea (<BR>) o un espacio creado con una
secuencia de escape, , para definirla. Esto es, en el caso anterior
podamos haber escrito.

<TABLE BORDER="5">
<TR>
<TH>
Encabezado1
</TH>
<TH>
Encabezado2
</TH>
<TH>
Encabezado3
</TH>
</TR>
<TR>
<TD>
Fila1,Columna1
</TD>
<TD>
Fila1,Columna2
</TD>
<TD>
<BR>
</TD>
</TR>
<TR>
<TD>
Fila2,Columna1
</TD>
<TD>
Fila2,Columna2
</TD>
<TD>
</TD>
</TR>
</TABLE>
En este caso habramos obtenido el resultado de la figura 7.5.
Figura 7.5. Tabla con celdas vacas. Poniendo <BR> o las
celdas que antes no existan ahora si son dibujadas, pero sin
nada dentro.

Como vemos, <BR> y consiguen el mismo resultado.

27. Cmo se crea una tabla HTML (II)
Anterior | Inicio | Siguiente
Insertar un ttulo para la tabla
El siguiente elemento importante a destacar en las tablas y del que
todava no hemos hablado es el ttulo. Este ser un texto que
acompaa a la tabla podr estar situado encima o debajo de ella.
Para insertarlo haremos uso de una nueva etiqueta: CAPTION (que
se puede traducir al espaol como ttulo), que deber ser usada
entre las instrucciones <TABLE> y </TABLE >, de la siguiente
manera:
<TABLE>
<CAPTION>
Titulo de la tabla
</CAPTION>
... Cdigo de la tabla ...
</TABLE>
El texto que servir de ttulo ser insertado entre las instrucciones
de inicio y fin. Este texto podr ser formateado por otras etiquetas
siempre y cuando sean de nivel de texto, esto es, que su inclusin
no provoque un salto de lnea. Esto, desgraciadamente, excluye a

los encabezados (H1 ,H2, etc.), pero no a las etiquetas de nivel de

texto o a FONT.
Los ttulos de la tabla sern mostrados por defecto en la parte
superior de esta, pero la etiqueta CAPTION permite el uso de un
atributo (cuyo nombre nos resultar familiar), ALIGN , que nos
permitir elegir que dichos ttulos sean mostrados como pie de la
tabla. El atributo ALIGN, puede tomar dos valores top y bottom. El
primero de ellos, top, significa en ingls arriba o parte superior y su
efecto ser que el ttulo sea mostrado encima de la tabla. Bottom,
por su parte puede ser traducido como abajo o parte inferior. El uso
de este atributo provocar el efecto antes comentado: el ttulo ser
mostrado al pie de la tabla. El siguiente cdigo es un ejemplo del
uso este tipo de alineamiento del ttulo:
<TABLE>
<CAPTION ALIGN="bottom">
Pie de la tabla
</CAPTION>
... Cdigo de la tabla ...
</TABLE>
A continuacin veremos un ejemplo completo de tabla con ttulo. Es
necesario resaltar dos aspectos de este ejemplo. El primero es que
aunque usemos ALIGN="top" para el ttulo, en realidad no es
necesario, ya que este es el alineamiento que aparece por defecto.
El segundo es que para resaltar el ttulo nos hemos ayudado de las
etiquetas BIG y B que ya conocemos, algo perfectamente vlido
dentro de la etiqueta CAPTION.
Un ejemplo de inclusin de un encabezado es el siguiente:
<TABLE>
<CAPTION ALIGN="top">
<BIG>
<B>
Tabla de ejemplo
</B>
</BIG>
</CAPTION>
<TR>
<TD>
Fila1,Columna1
</TD>

<TD>
Fila1,Columna2
</TD>
<TR>
<TD>
Fila2,Columna1
</TD>
<TD>
Fila2,Columna2
</TD>
</TABLE>
Cuyo resultado podemos apreciar en la tabla izquierda de la figura
7.6.
Figura 7.6. Con la etiqueta CAPTION podemos poner un ttulo a
la tabla. Este ttulo puede situarse encima (ALIGN="top") o
debajo (ALIGN="bottom") de la tabla.

La tabla de la derecha corresponde al mismo cdigo pero con

ALIGN="bottom".
Tamao de las tablas
Todava queda un tema de gran importancia en la creacin de
tablas que debemos comentar: su tamao. Quiz tras haber hecho
algunos ejemplos el lector se habr dado cuenta que el tamao de
las tablas no es siempre el mismo. Lo ms probable es que este

hecho no nos haya sorprendido, an as es importante la manera en

que los navegadores calculan el tamao de las tablas y sus celdas
no es tan sencilla y suele ser muy til conocerla bien.
Posteriormente aprenderemos a cambiar este tamao a mano.
Cuando al leer una pgina el navegador encuentra una tabla calcula
cual es el tamao tanto horizontal como vertical necesario para
mostrar el contenido de cada una de las celdas. En este momento
hay que tener en cuenta que todas las celdas de una misma
columna deben tener un mismo ancho y que todas las celdas de
una misma fila deben tener la misma altura. La altura de cada fila
quedar determinada por el elemento ms alto (o el texto con ms
lneas) de todas las celdas de la fila. De manera similar se calcula el
ancho de las columnas. Vistos estos conceptos probablemente se
haya quedado el lector un poco confundido, esta parte es un poco
complicada al principio pero se comprende rpidamente una vez
hemos practicado un poco con tablas.
Llegados a este punto ya podemos afirmar que sabemos todo lo
necesario para crear tablas. Ahora nos queda conocer algunos
aspectos ms avanzados y realizar algunos ejemplos para adquirir
destreza en su uso. Pero antes, practiquemos un poco.
Ejercicio 7.1
En este ejercicio se propone la creacin de tablas con elementos de
diferentes tamaos en sus celdas para observar como varan sus
tamaos. En el archivo extra.zip se ofrecen imgenes de diferentes
tamaos como ayuda. Las tablas que se proponen realizar son:
Una tabla de 2 filas y 3 columnas. El contenido de todas las celdas
ser la palabra: TABLA.
Se sustituye la palabra TABLA en cada una de las celdas anteriores
por un texto lo suficientemente largo para que ocupe varias lneas.
Crear dos tablas iguales a las dos anteriores pero con la imagen
montana.gif en la segunda celda de la primera fila.
Combinar el texto escrito en el segundo caso, la imagen
montana.gif, y la imagen spot.gif en diferentes celdas para ver el
cambio de tamao que sufren.
28. Alineamiento de tablas
Anterior | Inicio | Siguiente
Hasta ahora las tablas que hemos visto no tenan ningn tipo de
alineamiento especial. Se situaban en el margen izquierdo y se
extendan hasta donde ocuparan por la derecha. Pero por supuesto
el lenguaje HTML nos permite tener un mayor control sobre la
disposicin de las tablas con el uso de un nuevo atributo de la
etiqueta TABLE: ALIGN. Este atributo nos permitir alinear la tabla a

la derecha, a la izquierda o centrada respecto a la ventana del

navegador, para ello toma los siguientes valores:
ALIGN="left": Alinea la tabla a la izquierda de la ventana del
navegador. La manera de actuar del navegador cuando se
encuentra con una tabla alineada a la izquierda es idntica a su
comportamiento con imgenes con este mismo tipo de
alineamiento, y por tanto tambin podemos conseguir que un texto
envuelva la tabla tal y como hacamos con las figuras y como
podemos ver en la figura 7.7.
Figura 7.7. Con el atributo ALIGN podemos controlar el
alineamiento de la tabla. Si elegimos ALIGN="left" el texto
bordear a la tabla al igual que ocurra con las imgenes.

La forma de usar este tipo de alineamiento es:

<TABLE ALIGN="left">
...Cdigo de la tabla...
</TABLE>
Para escribir texto al final de una tabla alineada a derecha o
izquierda deberemos usar, al igual que hacamos con las imgenes,
la etiqueta BR con el atributo CLEAR. El siguiente ejemplo
funcionara en ambos casos de alineamiento:
<BR CLEAR="all">
ALIGN="right": En esta ocasin la tabla ser alineada a la derecha.
El texto tambin la envolver como ocurra con las imgenes
alineadas a este lado. En la figura 7.8:
Figura 7.8. Usando alineamiento a la derecha (ALIGN="right")
conseguimos un efecto muy similar al alineamiento a la
izquierda.

podemos ver el efecto de usar este modo de alineamiento:

<TABLE ALIGN="right">
...Cdigo de la tabla...
</TABLE>
ALIGN="center": Usando este mtodo de alineamiento obtendremos
una tabla centrada respecto al ancho total de la ventana del
navegador. El resultado de usar ALIGN="center" es idntico al que
obtendramos si introdujramos la tabla entre las instrucciones
<CENTER> y </CENTER >. En este tipo de alineamiento
<TABLE ALIGN="center">
...Cdigo de la tabla...
</TABLE>
el texto no envuelve a la tabla como podemos apreciar en la figura
7.9.
Figura 7.9. Con ALIGN="right" la tabla se sita en el centro de
la ventana del navegador y el texto ya no la envuelve.

Hasta la aparicin de las versiones 4 de Explorer y Navigator

ningn navegador soportaba el alineamiento ALIGN="center " en
las tablas. Por esta razn es recomendable usar adems la
etiqueta CENTER encerrando la tabla para asegurarnos que esta
aparecer centrada. En este caso le estaremos diciendo al
navegador dos veces que alineamiento tiene la tabla, esto no es
problema siempre que los dos alineamientos coincidan, y por otro
lado conseguiremos que todos los navegadores centren la tabla
ya que si no entienden ALIGN="center" entendern la etiqueta
CENTER y viceversa.
29. Alineamiento de celdas y filas
Anterior | Inicio | Siguiente
Hasta ahora hemos estudiado el alineamiento de las tablas con
respecto a la ventana del navegador. El siguiente paso ser
aprender los diferentes tipos de alineamiento de los elementos de
las diferentes celdas con respecto a estas. Estos tipos de
alineamiento se dividen en dos: alineamiento vertical y alineamiento
horizontal. En la figura 7.10 podemos ver una tabla en la que se
ilustran las posibilidades de tipos de alineamiento.
Figura 7.10. Distintas posibilidades de los alineamientos
vertical y horizontal de las celdas de una tabla.

Alineamiento horizontal: Para seleccionar el tipo de alineamiento

horizontal de las celdas hay que usar el atributo ALIGN de las
etiquetas TH o TD en funcin del tipo de celda. Este atributo

permitir seleccionar entre un alineamiento a la izquierda

(ALIGN="left"), centrado (ALIGN="center") o a la derecha
(ALIGN="right"), tal y como veamos en la figura 7.10.
Alineamiento vertical: En este caso usaremos un nuevo atributo:
VALIGN (Vertical Align, alineamiento vertical). Las diferentes
opciones con este tipo de alineamiento son las que veamos en la
figura 7.10: Alineamiento con la parte superior de la celda
(VALIGN="top"),
alineamiento
en
medio
de
la
celda
(VALIGN="middle") y alineamiento con la parte inferior de la celda
(VALIGN=" bottom").
Por defecto las celdas de encabezado (TH) estn centradas tanto
horizontal como verticalmente, mientras que las celdas normales
(TD) estn alineadas a la izquierda y verticalmente se sitan en el
centro de la celda. El punto azul de la figura 7.11 representa el
alineamiento por defecto en ambos tipos de celdas.
Figura 7.11. El punto azul de esta figura nos permite observar el
alineamiento por defecto de los encabezados de tabla (TH) y de
las celdas normales (TD).

Este alineamiento por defecto puede ser cambiado para toda una
fila usando los atributos ALIGN y VALIGN en la etiqueta TR. Por
ejemplo si creamos una fila con el siguiente cdigo:
<TR ALIGN="right"
VALIGN="bottom">
... Etiquetas para crear las celdas ...
</TR>
Todas las celdas de esa fila tendrn se alinearn por defecto a la
derecha y abajo. Por supuesto si en alguna de las celdas (TD o TH)
de esa fila se vuelven a usar ALIGN y VALIGN con unos valores
distintos sern estos ltimos los que determinarn el alineamiento
de esa celda en concreto. Por ejemplo:
<TABLE BORDER="1">
<TR ALIGN="right"

VALIGN="bottom">
<TD>
Celda1
</TD>
<TD>
Celda2
</TD>
<TD ALIGN="left"
VALIGN="top">
Celda3
</TD>
</TR>
</TABLE>
El resultado de este cdigo es que todas las celdas de esa fila
tendrn como alineamiento por defecto ALIGN="right" y
VALIGN="bottom", pero en la tercera celda especificamos
ALIGN="left" VALIGN="top" y cambiamos el alineamiento de esa
celda en concreto como podemos ver en la figura 7.12
Figura 7.12. Usando los atributos ALIGN y VALIGN en la
etiqueta TR cambiamos el alineamiento por defecto de las
celdas de esa fila, pero an podemos modificar ese
alineamiento usando los mismos atributos en cada celda.

Si el lector prueba este ltimo ejemplo probablemente no pueda

apreciar el efecto del cambio de alineamiento porque la tabla es
demasiado pequea. Para poder apreciar dicho efecto ser
necesario aumentar el tamao de la tabla con los mtodos que

aprenderemos en el siguiente apartado.

30. Ancho de tablas y celdas
Anterior | Inicio | Siguiente
Como vimos antes en este captulo, el ancho de las tablas queda
determinado por el tamao necesario para mostrar el contenido de
sus celdas. Sin embargo el lenguaje HTML nos permite especificar
el tamao que deseemos por medio de un nuevo atributo de la
etiqueta TABLE: WIDTH (que traducido significa ancho). Este
atributo se usa igual que los vistos hasta ahora, y su valor
representar el ancho en pixeles de la tabla:
<TABLE WIDTH="500">
... Cdigo de la tabla ...
</TABLE>
Es importante resaltar que si con ese tamao no se pueden mostrar
todos los elementos de la tabla, por ejemplo si en la tabla anterior
hay una imagen de ancho 550 que no cabe en una tabla de 500
pixeles de ancho, el navegador ignorar el atributo WIDTH. Si la
tabla nicamente contiene texto la etiqueta WIDTH tiene una mayor
utilidad, ya que el texto se adaptar a ese ancho, ocupando ms
lneas si es necesario.
El tamao del ancho de una tabla tambien se puede especificar
en porcentaje respecto al ancho total de la ventana del
navegador. Por ejemplo:
<TABLE WIDTH="50%">
... Cdigo de la tabla ...
</TABLE>
hace que la tabla sea la mitad de la ventana. Si el usuario hace
ms pequea la ventana la tabla tambin se har ms pequea.
Tamao de las celdas
Al igual que hemos modificado el ancho de la tabla completa
tambin podremos modificar el tamao de cada celda por separado.
En este caso tendremos ms posibilidades an, ya que podremos
modificar tambin la altura de la celda usando el atributo HEIGHT.
Al igual que antes, las dimensiones que especifiquemos con WIDTH
y HEIGHT slo sern respetadas si en ese espacio cabe su
contenido. Por ejemplo en el siguiente caso:
<TABLE>

<TR>
<TD WIDTH="50"
HEIGHT="50">
<IMG SRC="img.gif"
WIDTH="100"
HEIGHT="100">
</TD>
</TR>
</TABLE>
la nica celda de la tabla tendr un tamao de 100 por 100, que es
el tamao de la imagen que hemos insertado en ella. En este caso
no pueden respetarse los atributos WIDTH y HEIGHT de la etiqueta
TD ya que en una celda de las dimensiones indicadas en ellas no
cabra la imagen. Si en su lugar hubisemos usado < TD
WIDTH="150" HEIGHT="150"> estas dimensiones SI se hubiesen
respetado.
EJERCICIO 7-2
Como la mejor manera de aprender es practicar vamos a realizar un
sencillo ejercicio pero que agrupa gran parte de los conocimientos
adquiridos hasta ahora sobre tablas. El objetivo ser crear una tabla
con dos celdas y dos columnas de tamao 100x100 todas ellas.
Deberemos insertar en cada una de ellas la imagen spot.gif y
alinearla de tal manera que consigamos el resultado de la figura
7.13.
Figura 7.13. Este ser el objetivo del ejercicio 7.2. Una pista:
debemos usar los atributos WIDTH, HEIGHT, ALIGN y VALIGN.

La tabla deber estar centrada y tener un grosor de 5 pixeles. [En el

archivo ej7-2.zip se ofrece la solucin de este ejercicio]
El atributo NOWRAP
Para completar nuestro aprendizaje sobre el tamao de tablas y
celdas y como modificarlo nos queda por comentar un ltimo
atributo: NOWRAP. Este atributo no toma ningn valor, es decir, su
forma de uso es:
<TABLE>

<TR>
<TD NOWRAP>
Texto
</TD>
</TR>
</TABLE>
Su efecto ser que el texto de esa celda no puede ser partido en
varias lneas, para adecuarse al tamao de la celda. Cuando esto
sucede se dice que la tabla ha envuelto (wrap en ingls) el texto. El
significado de NOWRAP es por tanto no envolver el texto. Si es
necesario para mantener el texto en una sola lnea se ignorarn los
atributos WIDTH y HEIGHT si fueron usados. En la figura 7.14
observamos una primera tabla con una nica celda en la que no
hemos usado el atributo NOWRAP, en la segunda tabla mostramos
la misma tabla pero poniendo NOWRAP en dicha celda.
Figura 7.14. Usando el atributo NOWRAP evitamos que el texto
sea partido en varias lneas, sin embargo no es recomendable
usarlo en lneas muy largas como esta.

Como vemos en este segundo caso la lnea de texto no cabe en el

tamao de la ventana y por tanto se extiende ms all de esta.
Hay que tener mucho cuidado usando el atributo NOWRAP, ya

que si despus escribimos un texto muy largo sin incluir ningn

salto de linea (BR) todo l ser mostrado en una nica lnea, que
no cabr en pantalla y por tanto obligar al visitante a usar las
barras de desplazamiento.
31. Celdas que abarcan varias filas o columnas
Anterior | Inicio | Siguiente
Es hora ya de comenzar con dos de los atributos ms interesantes
en la creacin de tablas: ROWSPAN y COLSPAN. Gracias a estos
atributos podremos crear tablas mucho ms complejas y que se
adapten a nuestras necesidades. Estos dos atributos sirven tanto
para las celdas normales, TD, como para las celdas encabezado,
TH, y su funcin ser extender una fila (ROWSPAN) o una columna
(COLSPAN) para que ocupen el tamao de varias. Para
comprender el significado del concepto extender lo mejor es ver un
ejemplo:
<TABLE BORDER="1">
<TR>
<TH COLSPAN="2">
Celda de dos columnas
</TH>
</TR>
<TR>
<TD ROWSPAN="2">
Celda de dos filas
</TD>
<TD>
Fila2,Columna2
</TD>
</TR>
<TR>
<TD>
Fila3,Columna2
</TD>
</TR>
</TABLE>
En la figura 7.15 podemos ver la tabla resultado de este cdigo:
Figura 7.15. Los atributos COLSPAN y ROWSPAN nos permiten
crear celdas que se extiendan varias columnas o varias filas.

como vemos la primera celda se extiende para ocupar dos

columnas y la primera celda de la segunda fila ocupa dos filas. En
este momento invitamos al lector a practicar con los atributos
ROWSPAN y COLSPAN incluso con celdas de mayor tamao, ya
que esta es la mejor manera de habituarse a ellos, ms adelante
seguiremos realizando ejemplos prcticos con estos y otros
atributos de las tablas.
32. Margenes y separacin de celdas
Anterior | Inicio | Siguiente
El nico aspecto que nos queda por aprender sobre las tablas en
HTML es el correspondiente a los mrgenes en las celdas y la
separacin entre ellas. Antes de nada es conveniente comentar que
el lenguaje HTML considera a cada celda como un elemento
individual con sus propios bordes que no comparte con las celdas
adyacentes. Basndonos en esta forma de ver las tablas podemos
cambiar la distancia que existe entre los bordes de las clulas
adyacentes usando el atributo CELLSPACING (Espaciado de
celdas). El valor por defecto de este atributo es 1. En general se
suele usar para eliminar el espaciado entre celdas (como veremos
en el ejercicio 7-3) o para aumentarlo para crear un efecto como el
del siguiente ejemplo:
<TABLE CELLSPACING="10"
BORDER="1">
... Cdigo de la tabla ...
</TABLE>

cuyo resultado podemos observar en la figura 7.16:

Figura 7.16. El atributo CELLSPACING controla el espaciado
entre los bordes de cada una de las celdas de la tabla.

Una segunda propiedad de las tablas de gran importancia es el

margen que existe entre los elementos de las celdas y sus bordes.
Esta separacin es nula por defecto, pero puede aumentarse
usando el atributo CELLPADDING. La forma de usar este atributo
queda descrita en el siguiente ejemplo:
<TABLE CELLPADDING="10"
BORDER="1"
ALIGN="LEFT">
... Cdigo de la tabla ...
</TABLE>
y en la figura 7.17:
Figura 7.17. Con el atributo CELLPADDING podemos aumentar
los mrgenes entre el contenido de las celdas y su borde.

Tanto en el atributo CELLPADDING como en el atributo

CELLSPACING el valor entre comillas representa un tamao en
pixeles.
Para practicar un poco el uso de estos dos atributos se propone un
ejercicio con el que conseguiremos crear el efecto de una imagen
entera a partir de sus trozos.
Ejercicio 7.3
Este ejercicio consiste en la divisin de una imagen grande en
cuatro partes de igual tamao. El objetivo ser volver a juntarlas.
Para ello usaremos una tabla de 2x2 con una de las partes en cada
celda, sin borde y con mrgenes y espaciado de las celdas nulo. El
resultado buscado debe parecerse al de la figura 7.18 (exceptuando
las flechas y las letras rojas que son indicativas):
Figura 7.18. Ejercicio 7.3. Aunque pueda parecer que hay una
sola imagen, en realidad hay cuatro cuidadosamente
colocadas.

Las imgenes a usar, as como una posible solucin, a este

ejercicio pueden encontrarse en el archivo ej7-3.zip .
Conclusin
Bueno, ya podemos respirar tranquilos, ya sabemos todo lo que se
puede saber sobre la creacin de tablas en el lenguaje HTML
estndar. Sin duda es como para estar orgullosos, porque el mtodo
que usa este lenguaje no es excesivamente sencillo. Por esta razn
no debe desanimarse el lector que llegado a este punto no recuerde
parte de las etiquetas y atributos descritos en este captulo. Nuestro
objetivo no era ese, sino que como buenos creadores de pginas
web conozcamos las etiquetas del lenguaje HTML sin llegar a
saberlas de memoria pero lo suficiente para reconocer su funcin,
conocer las posibilidades de las tablas y poder crear rpidamente
tablas sencillas. Para la creacin de tablas muy complicadas es
recomendable usar un asistente como los que incluyen FrontPage o
HomeSite (la versin shareware ser incluida en el archivo
FrontPage.zip y HomeSite.zip). Aunque estos asistentes no siempre
nos ofrecen justo lo que queremos, nosotros ya conocemos lo
suficiente para retocar el cdigo de la tabla una vez creada.
33. Anidamiento
Anterior | Inicio | Siguiente
Lo que vamos a contar ahora no es nuevo, ya lo hemos comentado
antes a lo largo de nuestro aprendizaje del lenguaje HTML y de las
tablas, pero dado que es una de sus caractersticas ms usadas es
importante repetirla y ensalzarla, estamos hablando del anidamiento
de tablas. Y qu es el anidamiento?. Ya hemos usado este nombre
anteriormente en el curso, con lo que es probable que el lector ya
tenga una idea de a qu nos referimos con este nombre, pero es
conveniente dar una descripcin ms detallada de en que consiste.

Una definicin tcnica sera: "El anidamiento consiste en el uso de

una etiqueta dentro (entre la instruccin de inicio y la instruccin de
fin, [Ver figura 6.20]) de otra, de manera que los efectos de ambas
se sumen o combinen". Las imgenes enlace eran un perfecto
ejemplo del uso del anidamiento. En ese caso usbamos la etiqueta
IMG para insertar la imagen y despus usbamos la etiqueta A para
convertirla en un enlace. Se combinaban los efectos de las dos
etiquetas:
<A HREF="enlace.htm">
<IMG SRC="img.gif"> <!-- Imagen dentro de la etiqueta A -->
</A>
Figura 6.20. Las etiquetas anidadas son aquellas que se
encuentran entre la instruccin de inicio y la instruccin de fin
de otra etiqueta. De esta forma conseguimos que los efectos de
ambas se sumen.

Otro ejemplo que vimos anteriormente consista en el uso de dos o

ms etiquetas formateadoras de texto que anidbamos para sumar
sus efectos. Por ejemplo:
<B> <!--Negrita -->
<U> <!-- Subrayado -->
Texto en negrita y subrayado
</U> <!-- Fin subrayado -->
</B> <!-- Fin negrita -->
Este caso es ligeramente ms complicado que el anterior, ya que
ambas etiquetas tienen instruccin de inicio e instruccin de fin. Es
por ello que tendremos que tener un cuidado especial. Si no
insertamos las instrucciones en el orden correcto los resultados
sern imprevisibles. Un ejemplo de uso incorrecto del anidamiento
sera:
<B> <!--Negrita -->
<U> <!-- Subrayado -->
Texto en negrita y subrayado
</B> <!-- Fin negrita -->

</U> <!-- Fin subrayado -->

Una vez aclarado el concepto de anidamiento estamos en
disposicin de aplicarlo a las tablas. Cuando vimos la etiqueta de
definicin de celdas, TD, comentamos que podramos insertar en
ellas prcticamente cualquier otra etiqueta del lenguaje HTML. Si lo
que insertamos es otra etiqueta estaremos ante un caso de
anidamiento de tablas. En la figura 6.21 vemos un ejemplo donde
se observa la utilidad del anidamiento de tablas. El cdigo usado es:
Figura 6.21. En este ejemplo vemos como anidando una tabla
dentro de otra podemos crear interesantes efectos en las
pginas Web.

<TABLE BORDER="1">
<TR>
<TD>
<!-- TABLA ANIDADA DENTRO DE OTRA-->
<TABLE BORDER="1">
<TR>
<TD><A HREF="mes.htm">Nuestras principales OFERTAS del
mes</A>
</TD>
</TR>
<TR>
<TD><A HREF="#alpes">LOS ALPES - 20 aos a su
servicio</A>
</TD>
</TR>
<TR>
<TD><A HREF="#medida">Viajes a su medida</A>
</TD>
</TR>
<TR>

<TD><A HREF="#donde">Dnde encontrarnos</A>

</TD>
</TR>
</TABLE>
<!-- FIN TABLA ANIDADA -->
</TD>
<TD><IMG SRC="losalpes.gif"></TD>
</TR>
</TABLE>
Como vemos, anidando dos tablas conseguimos crear efectos
complejos obteniendo como resultado un gran control sobre la
disposicin los elementos de nuestra pgina.
El ejemplo de la figura 6.21 poda haberse realizado usando una
nica tabla de 4 filas y el atributo ROWSPAN en la segunda
columna, sin embargo en ocasiones resulta ms fcil usar el
anidamiento de tablas y adems da lugar a un cdigo ligeramente
ms intuitivo.
34. Practica 3 - Tabla de Datos
Anterior | Inicio | Siguiente
La primera de las prcticas consistir en la creacin de una tabla de
datos. Ser ms complicada que los ejemplos vistos hasta ahora y
se parecer ms a lo que necesitaremos en el mundo real.
Nuestro objetivo ser crear la tabla de la figura 6.22, pero vayamos
paso por paso.
Antes de empezar ser til desglosar la tabla objetivo en sus
columnas y filas. Esto nos ser de gran ayuda segn vayamos
crendola y nos permitir hacernos una idea inicial de la estructura
de cdigo que necesitamos. En la figura 6.23 podemos ver como
hemos realizado este desglose, en este caso vemos que ser
necesaria una tabla de 5 filas y 5 columnas, existiendo celdas que
se extienden varias columnas (COLSPAN) y otras que se extienden
varias filas (ROWSPAN). Debemos recordar en este momento que
las celdas que se expanden deben ser definidas (con TD o TH) en
la primera de las filas y/o primera de las columnas que ocupan.
Figura 6.22. Nuestro objetivo en esta prctica 3 ser realizar
esta tabla. Para su realizacin necesitaremos usar gran parte
de los atributos que hemos aprendido.

Figura 6.23. Una vez que sabemos como queremos que quede
la tabla es muy til desglosarla en columnas y filas para no
liarnos al escribir el cdigo.

Vamos all con la creacin de la tabla, para seguir mejor el proceso

recomendamos al lector que se ponga de su editor de texto o editor
de HTML favorito y vaya escribiendo el cdigo.
Paso 1
En primer lugar crearemos la estructura bsica de la pgina y de la
tabla, incluyendo, de paso, el titulo de sta con la etiqueta
CAPTION:
<HTML>
<HEAD>
<TITLE>Practica 3</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<CAPTION>SuperOFERTA viaje a Nueva Zelanda</CAPTION>
... Aqu iremos insertando el resto del cdigo ...
</TABLE>

</BODY>
</HTML>
Paso 2
A continuacin vamos a crear la primera de las filas. La primera de
las celdas, que estar vaca ocupa dos filas y dos columnas. El
cdigo para definirla debemos ponerlo en la celda de la primera
columna de la primera fila, y ser:
<TR><TH ROWSPAN=2 COLSPAN=2></TH>
A continuacin sigue una celda que ocupa 2 columnas y otra que
ocupa dos filas. En definitiva el cdigo necesario para crear la
primera fila ser:
<TR>
<TH ROWSPAN=2 COLSPAN=2></TH>
<TH COLSPAN=2>Hoteles 3 estrellas</TH>
<TH ROWSPAN=2>Hoteles 4 estrellas</TH>
</TR>
Paso 3
Ahora crearemos la segunda de las filas, esta no es la que
comienza con la celda "1 semana", sino la anterior porque la
primera celda en la fila anterior se extendi dos filas. En este caso
slo debemos escribir el cdigo de dos celdas, ya que el resto son
celdas que comenzaron en la primera fila y se expanden a esta
segunda. No ser necesario definir esas celdas, ni siquiera para
dejarlas vacas, simplemente hay que ser consciente del espacio
que ocuparn. Teniendo esto en cuenta el cdigo usado ser:
<TR>
<TH>Slo alojamiento</TH>
<TH>Pensin completa</TH>
</TR>
Es posible que resulte un poco difcil ver que de slo con este
cdigo las dos nicas celdas que hemos insertado se colocarn en
la tercera y cuarta columna, pero recordemos las dos primeras ya
estn ocupadas por la primera celda de la primera fila. Este es un
buen momento para probar con un navegador lo que hemos hecho
hasta ahora. Guardemos el cdigo y abramos el archivo HTML con
un navegador. En la figura 6.24 podemos ver la tabla tal y como la
muestra Internet Explorer.

Figura 6.24. Ya tenemos hecha una parte de la tabla, algunas de

las celdas se expanden 2 filas, 2 columnas o ambas, aunque en
algn caso todava no es apreciable.

Paso 4
Siguiente fila. La primera celda y la ltima se expanden 2 filas, por
lo que usaremos el atributo ROWSPAN=2 en ellas:
<TR>
<TH ROWSPAN="2">1 semana</TH>
<TH>Avin turista</TH>
<TD>700 USD</TD>
<TD>1000 USD</TD>
<TD ROWSPAN="2" ALIGN="center">1500 USD</TD>
</TR>
La siguiente fila, la cuarta, ser muy similar a la segunda, ya que
sus celdas no usan ROWSPAN ni COLSPAN y tendremos que tener
en cuenta las celdas de la fila anterior que se expanden hasta la
cuarta. El cdigo que debemos usar ser:
<TR>
<TH>Avin preferente</TH>
<TD>850 USD</TD>
<TD>1150 USD</TD>
</TR>
Ya hemos llegado a la ltima de las filas. A estas alturas ya nos
resultar fcil. La primera celda se expande dos columnas, con lo
que tendremos que definir un total de 4 celdas para completar las 5
columnas:
<TR>
<TH COLSPAN="2">2 semanas</TH>

<TD>1300 USD</TD>
<TD>1850 USD</TD>
<TD>2600 USD</TD>
</TR>
Tras haber escrito todo este cdigo es momento de volver a ver el
resultado con un navegador. En este caso obtendremos la tabla de
la figura 6.25. Ya est prcticamente terminada nuestra tabla
objetivo, slo nos quedan algunos detalles.
Figura 6.25. Ya tenemos la tabla prcticamente terminada. Slo
quedan algunos detalles para darla por concluida.

Paso 5
En este quinto y ltimo paso daremos los ltimos acabados a la
pgina. Primero daremos formato al texto del ttulo. Para ello
usaremos la etiqueta FONT. Para elegir el color rojo (#FF0000
usando el cdigo hexadecimal) usaremos el atributo COLOR y para
aumentar el tamao usaremos el atributo SIZE:
<CAPTION>
<FONT SIZE="+2" COLOR="#FF0000">
SuperOFERTA viaje a Nueva Zelanda
</FONT>
</CAPTION>
Por ltimo debemos centrar las celdas donde estn los precios de
los distintos viajes. Estas celdas son las creadas con la etiqueta TD
y deberemos usar el atributo ALIGN de la siguiente manera:
<TD ALIGN="center">700 USD</TD>
Repitiendo esto para el resto de las celdas ya tenemos la tabla
terminada. El cdigo final ser:
<TABLE CELLSPACING="2" CELLPADDING="2" BORDER="1">

<CAPTION><FONT
SIZE="+2"
COLOR="#FF0000">SuperOFERTA
viaje
a
Nueva
Zelanda</FONT></CAPTION>
<TR><TH ROWSPAN="2" COLSPAN="2"></TH>
<TH COLSPAN="2">Hoteles 3 estrellas</TH>
<TH ROWSPAN="2">Hoteles 4 estrellas</TH>
</TR>
<TR><TH>Slo alojamiento</TH>
<TH>Pensin completa</TH>
</TR>
<TR><TH ROWSPAN="2">1 semana</TH>
<TH>Avin turista</TH>
<ALIGN="center">700 USD</TD>
<TD ALIGN="center">1000 USD</TD>
<TD ROWSPAN="2" ALIGN="center">1500 USD</TD>
</TR>
<TR><TH>Avin preferente</TH>
<TD ALIGN="center">850 USD</TD>
<TD ALIGN="center">1150 USD</TD>
</TR>
<TR><TH COLSPAN="2">2 semanas</TH>
<TD ALIGN="center">1300 USD</TD>
<TD ALIGN="center">1850 USD</TD>
<TD ALIGN="center">2600 USD</TD>
</TR>
</TABLE>
Una vez escrito por completo guardamos el archivo y volvemos a
verlo con el navegador eligiendo la opcin (o pulsando el botn)
actualizar o reload Si hemos conseguido crear esta tabla es
indudable que somos capaces de crear cualquier otra. Como ya
comentamos anteriormente el mtodo usado por el lenguaje HTML
para crear tablas no es muy sencillo y el proceso se hace algo
pesado. Por esta razn en ocasiones es conveniente usar algn
asistente o wizard de creacin de tablas. Un excelente ejemplo de
este tipo de asistentes es el que acompaa al editor de HTML
HomeSite 3.0 y que podemos ver en la figura 6.26. El problema de
este tipo de asistentes es que no siempre permiten aprovechar
todas las posibilidades del lenguaje HTML y adems en ocasiones
no obtenemos con ellos el resultado deseado. Pero ahora nosotros
ya conocemos las etiquetas y atributos de creacin de tablas del
lenguaje HTML, con lo que no nos resultar complicado retocar el
cdigo creado con el asistente.

Figura 6.26. Los asistente (wizard) para la creacin de tablas

como este, incluido con el editor de HTML HomeSite, son de
gran ayuda en la creacin de tablas complicadas.

Un buen truco para hacer compatibles las con los navegadores

que no entiendan la etiqueta TABLE ni sus subetiquetas es incluir
la etiqueta <BR> al final de cada fila (antes de </TR>). De esta
manera forzaremos un cambio de lnea que simula, a grosso
modo, un cambio de fila.
35. Practica 4 - Pagina Web con una estructura creada con tablas
Anterior | Inicio | Siguiente
Es el momento de realizar de la cuarta prctica del curso de HTML.
En ella seguiremos desarrollando el sitio Web de la agencia de
viajes Los Alpes, pero esta vez aadiremos un gran avance de
complejidad de acuerdo con los conocimientos que ahora tenemos.
El sitio Web constar de un total de cuatro pginas, y contar con
gran contenido grfico. Adems usaremos las tablas tanto para
insertar datos como para controlar la disposicin de los elementos
de las pginas, con lo que nos servir para practicar lo recin
aprendido en este captulo.
Pero sin perder ms tiempo vamos a comenzar con la realizacin
de las nuevas pginas. Vayamos por pasos:
Paso 1 - Planificacin

En todo proceso de creacin y diseo de pginas Web el primer

paso a llevar a cabo ser la planificacin, antes incluso de escribir la
primera lnea de cdigo. En esta planificacin deberemos:
Fijar cuales son nuestros objetivos con la creacin las pginas
Pensar que tipo de personas visitarn nuestra pgina para adaptar
su contenido a ellas.
Planear el contenido que queremos incluir en las pginas.
Planificar la estructura general del sitio Web y la informacin que
debe haber en cada una de las pginas.
Disear la disposicin de los elementos en cada una de las pginas.
En general la pgina principal ser ligeramente distinta al resto pero
debe mantener suficientes similitudes.
Lo ms probable es que existan otras tareas a llevar a cabo
especficas del Web en concreto que estemos realizando.
Para la realizacin de las tareas cuarta y quinta debemos ser
conscientes de los conocimientos y herramientas con los que
contamos para no proponernos objetivos irrealizables. Tener un
buen conocimiento del lenguaje HTML, como ocurre en nuestro
caso, nos permitir eliminar muchas limitaciones que aparecen en
este punto de la planificacin.
Vayamos paso por paso realizando cada una de las tareas que
acabamos de nombrar:
Nuestro objetivo ser que las personas que visiten las pginas se
interesen por las ofertas y se pongan en contacto con la agencia
para contratar el viaje. Un segundo objetivo ser dar una buena
imagen de la compaa.
Todo tipo de personas podrn acceder a nuestras pginas por lo
que ser conveniente que puedan ser vistas con cualquier
navegador.
En las pginas informaremos sobre el prestigio de la agencia y sus
ofertas de viajes ms atrayentes.
La pgina principal dar informacin general sobre la empresa y
como contactar con ella y ofrecer enlaces para ir a las distintas
secciones del sitio Web: Ofertas, Viajes a su medida y la
superOferta. En total el sitio Web quedar compuesta por cuatro
pginas: la principal y tres pginas de contenido que estarn
adems interconectadas entre s. En la figura 6.27 podemos ver la
estructura del sitio Web de Los Alpes tal y como lo hemos planeado.
Figura 6.27. Estructura del sitio Web de Los Alpes. La pgina
principal tendr enlaces a las otras tres que adems estarn
enlazadas entre s.

Es hora de disear la disposicin de los elementos en cada una de

las pginas. Aqu es donde ms variarn las pginas con respecto a
las de las prcticas anteriores. Usando tablas para insertar el
contenido tendremos una gran libertad en la colocacin de los
distintos elementos de la pgina. Para la estructura de la pgina
principal usaremos dos tablas, la primera para la cabecera con el
logo e imagen de Los Alpes y la segunda para dividir el cuerpo en
dos columnas. En la de la izquierda pondremos las diferentes
opciones del sitio Web y a la derecha el texto. En la figura 6.28
podemos ver un boceto de cmo quedar la pgina. Las lneas
azules discontinuas representan los bordes de las tablas que
necesitaremos usar.
Figura 6.28. Boceto de la disposicin de los elementos en la
pgina principal y las tablas que vamos a necesitar crear para
conseguir esa visualizacin.

Un buen truco para cuando creemos la estructura de un

documento HTML basndonos en tablas es mantener el borde
visible, BORDER="1", para asegurarnos que toma la forma que
deseamos. Cuando ya sepamos que funciona bien eliminaremos
el borde, BORDER="0".
El resto de pginas sern ligeramente distintas. La tabla del
encabezado tendr una fila ms con las opciones del sitio Web y
con un botn para volver a la pgina principal. El cuerpo se dividir

en el texto (derecha), y una serie de anclas a las distintas secciones

(izquierda) de ese mismo documento HTML. En la figura 6.29
podemos ver la estructura general de estas pginas.
Figura 6.29. Boceto de la disposicin de los elementos del
resto de pginas. Aunque conserva un parecido con la pgina
principal hay algunos cambios.

Una vez hemos creado la estructura del sitio Web y ya tenemos una
idea de cmo va a ser la disposicin de los elementos en el sitio
Web es hora de empezar a escribir el cdigo.
Cdigo bsico
En primer lugar ejecutamos nuestro editor texto o editor de HTML
favorito, ya sea el bloc de notas, el editor HTML de FrontPage o
cualquier otro, y creamos un archivo nuevo. Es recomendable crear
un archivo nuevo porque aunque usaremos parte del cdigo escrito
en la prctica 2 y 3 los cambios sern significativos y modificar ese
cdigo sera algo complicado.
Como parte del cdigo que usaremos ser igual al que utilizamos
para las prcticas 2 y 3 recomendamos a aquellos lectores que
tengan esta posibilidad que en vez de escribir de nuevo dicho
cdigo lo copien de lo que ya tienen. Para ello lo ms cmodo es
usar las opciones de cortar y pegar que ofrecen tanto Windows
como MacOS y Unix. Ser necesario tener tanto el documento
HTML nuevo como el archivo del que queremos copiar el cdigo
abierto. Estando activo este ltimo seleccionamos la seccin de
cdigo a copiar y elegimos en el men archivo la opcin copiar
(figura 6.30). En algunos programas la manera de copiar ser
distinta pero en todo caso ser muy similar. Despus vamos al
archivo que estamos escribiendo, situamos el cursor en el punto
donde queremos insertar el cdigo copiado y elegimos la opcin
pegar del men edicin. Ya hemos copiado el cdigo y nos
hemos ahorrado el trabajo de volver a escribirlo.
Figura 6.30. Usando las opciones de cortar y pegar nos
ahorraremos el proceso reescribir el cdigo de las prcticas
anteriores.

Una vez tenemos delante un archivo nuevo escribimos las etiquetas

que definen la estructura del documento HTML:
<HTML>
<HEAD>
<TITLE>Agencia de viajes LOS ALPES</TITLE>
</HEAD>
<BODY>
<!-- Resto del cdigo -->
</BODY>
</HTML>
36. Practica 4 - Pagina Web con una estructura creada con tablas
Anterior | Inicio | Siguiente
Paso 3 - Estructura de la pgina principal
El siguiente paso consistir en dar la estructura a las pginas y aqu
es donde empezamos a poner en prctica nuestros conocimientos
sobre tablas. Por ahora vamos a centrarnos en crear la pgina
principal, index.htm. En la figura 6.28 veamos cmo planeamos
colocar los distintos elementos. Es hora de escribir el cdigo
necesario para llevar esa planificacin a la prctica. Sern
necesarias dos tablas ambas de una fila y dos columnas.
<TABLE ALIGN="center">
<TR>
<TD><!-- Logo --></TD>
<TD><!-- Los alpes --></TD>
</TR>

</TABLE>
<TABLE WIDTH="100%">
<TR>
<TD><!-- Opciones --></TD>
<TD><!-- texto --></TD>
</TR>
</TABLE>
La primera de las tablas la hemos centrado usando el atributo
ALIGN. La segunda nos convendr que ocupe todo el ancho
posible, por lo que usamos WIDTH="100%". Despus de la
segunda tabla simplemente pondremos datos relacionados con la
elaboracin de la pgina (direccin Webmaster, Copyright, fecha
actualizacin, etc.). A este tipo de informacin incluida generalmente
al final de las pginas se le denomina en ocasiones coletilla. A
continuacin podemos ver el cdigo de nuestra coletilla.
<ADDRESS>
<SMALL>
Web
realizado
por:
<FONT
COLOR="#EDB301">TowerWeb</FONT>
<BR>
Copyright 1998 Los Alpes - Agencia de viajes<BR>
ltima actualizacin: 9 de marzo de 1998
</SMALL>
</ADDRESS>
En la figura 6.31 vemos el resultado de este cdigo. En esta figura
vemos un adelanto de la imagen de fondo y color del texto que ms
adelante incluiremos en la pgina, adems hemos incluido un texto
adicional (slo en la pgina principal) para animar a los visitantes a
hacer sugerencias sobre la pgina.
Figura 6.31. La coletilla aporta un toque de profesionalidad a
nuestra pgina adems de ofrecer informacin interesante a
los visitantes.

Como vemos, hemos usado la etiqueta SMALL para que el texto de

la coletilla sea menor que el del resto de la pgina.
Esta coletilla la repetiremos en cada una de nuestras pginas, y
posteriormente iremos cambiando la fecha de la ltima actualizacin
en cada una individualmente.
Paso 4 - Estructura del resto de pginas
La disposicin de los elementos Web en el resto de pginas ser
muy similar a la de la pgina principal. En este caso crearemos en
primer lugar una pgina con el cdigo que deben compartir todas
las pginas del sitio Web y lo guardaremos en un archivo de
nombre plantilla.htm. Para crear el resto de pginas usaremos como
base el cdigo de este archivo, que ser: el cdigo base que
escribimos en el paso 2 ms:
<TABLE ALIGN="center">
<TR>
<TD><!-- Logo --></TD>
<TD><!-- Los alpes --></TD>
</TR>
<TR>
<TD><!-- Opciones --></TD>
</TR>
</TABLE>
<TABLE WIDTH="100%">
<TR>
<TD><!-- Secciones --></TD>
<TD><!-- texto --></TD>
</TR>
</TABLE>
Tambin podremos aadir una coletilla con datos sobre la pgina
Web al igual que hacamos en el caso de la pgina principal.
Paso 5 - Contenido de la pgina principal

Terminada la planificacin y una vez creada la estructura de las

pginas ahora es cuando empezaremos a ver los resultados de
nuestro trabajo. Empezaremos ponindole contenido a la pgina
principal. En este momento recuperamos el cdigo que escribimos
en el paso 3 y empezamos a rellenar las celdas de las tablas.
Empezamos con la primera tabla. En la celda de la derecha
ponemos el logo de Los Alpes y en la de la derecha ponemos el
letrero. Como en ambos casos debemos insertar imgenes usamos
la etiqueta IMG de la siguiente manera:
<CENTER>
<TABLE ALIGN="center">
<TR>
<TD><IMG SRC="img/logo.gif" WIDTH=90 HEIGHT=99
ALT="[LOGO]"></TD>
<TD><IMG SRC="img/losalpes.gif" WIDTH=440 HEIGHT=99
ALT="LOS ALPES - Agencia de Viajes"></TD>
</TR>
</TABLE>
</CENTER>
Para preparar las pginas para los visitantes que usen
navegadores en modo texto hemos rellenado el atributo ALT de la
etiqueta IMG. Adems hemos usado los atributos WIDTH y
HEIGHT, pero no para modificar su tamao, sino porque de esta
manera conseguimos una carga ms rpida de las pginas, como
comentamos en el captulo 5.
Es el momento de rellenar la segunda de las tablas. La columna de
la derecha la planeamos para insertar el texto de la pgina. En ella
insertamos una breve descripcin de la Agencia de viajes Los Alpes
para darla a conocer (podremos ver este texto completo en la figura
6.32). A continuacin ponemos las direcciones de las sedes en
Madrid y Barcelona de los Alpes. Si recordamos en la prctica 2
usamos la etiqueta PRE para introducir dichas direcciones. Ahora
podemos usar las tablas para conseguir el mismo efecto y con
mejores resultados:
Figura 6.32. Pgina principal de la agencia de viajes Los Alpes.
Aunque no podemos ver los bordes de las tablas podemos
intuir por donde iran.

<TABLE WIDTH="100%">
<TR>
<TD><!-- Opciones --></TD>
<TD><!-- texto -->
<P>La agencia de viajes Los Alpes goza de un gran prestigio en el
mundo de los ...
<TABLE BORDER="1" CELLSPACING=5>
<TR><TD>
<STRONG><U>MADRID</U></STRONG><BR>
C/JOSE ACANA, 9 BAJO<BR>
28333 MADRID<BR>
TELF. 921 99 39<BR>
FAX. 921 99 38<BR>
</TD><TD>
<STRONG><U>BARCELONA</U></STRONG><BR>
C/ALBERTO BUSQUETS,13 QUINTO A<BR>
08333 BARCELONA<BR>
TELF. 933 33 23<BR>>
FAX. 933 33 24<BR></TD></TR>
</TABLE>
</TD>

</TR>
</TABLE>
Ya podemos dar por terminada la columna de la derecha de la
pgina principal. La columna de la izquierda tendr enlaces a las
distintas pginas del sitio Web y volveremos sobre el cdigo usado
en el paso 6 al hablar del contenido grfico. Por ahora podemos ver
un adelanto de cmo va a quedar esta pgina principal mostrado en
la figura 6.32.
37. Practica 4 - Pagina Web con una estructura creada con tablas
Anterior | Inicio | Siguiente
Paso 6 - Contenido grfico
La apariencia de un Web es uno de los aspectos ms importantes
en la creacin de este. Por ello dedicamos un largo captulo 5 a l.
Ahora es el momento de poner en prctica de nuestros
conocimientos. A la hora de insertar grficos tenemos dos
posibilidades:
Crear nuestros propios grficos usando un programa de dibujo
vectorial y/o un programa de retoque fotogrfico. Esta es, sin duda,
la mejor de las dos opciones, pero tambin es la que lleva ms
tiempo as como varios programas y amplios conocimientos de su
uso por parte del creador de los grficos. Por esta razn es comn
recurrir a la segunda de las posibilidades.
Crear nuestros propios grficos usando un programa de dibujo
vectorial y/o un programa de retoque fotogrfico. Esta es, sin duda,
la mejor de las dos opciones, pero tambin es la que lleva ms
tiempo as como varios programas y amplios conocimientos de su
uso por parte del creador de los grficos. Por esta razn es comn
recurrir a la segunda de las posibilidades.
En nuestro caso vamos a optar por la segunda opcin. Hemos
usado algunos grficos del clipart que acompaa a Microsoft
FrontPage, en concreto al tema Travel.Posteriormente hemos
retocado alguno de estos grficos con Paint Shop Pro(podramos
haber usado cualquier otro programa de retoque fotogrfico, pero
hemos elegido este por ser shareware). Usando este programa
hemos creado una especie de botones (tranque servirn como
enlace a las distintas pginas de la Web. Ahora ya podemos escribir
el cdigo usado:
<TABLE ALIGN="center">
<TR>
<TD><IMG SRC="img/logo.gif" WIDTH=90 HEIGHT=99
BORDER=0 ALT="[LOGO]"></TD>
<TD><IMG SRC="img/losalpes.gif" WIDTH=440 HEIGHT=99

BORDER=0 ALT="LOS ALPES - Agencia de Viajes"></TD>

</TR>
</TABLE>
</CENTER>
<TABLE CELLPADDING="10">
<TR>
<TD VALIGN="top">
<!-- Opciones -->
<A
HREF="medida.htm"><IMG
SRC="img/tranvha1.jpg"
WIDTH=136 HEIGHT=48 BORDER=0 ALT="Viajes a su
medida"></A>
<A HREF="mes.htm"><IMG SRC="img/tranvha2.jpg" WIDTH=136
HEIGHT=48 BORDER=0 ALT="Ofertas del Mes"></A>
<A HREF="superofe.htm"><IMG SRC="img/tranvha3.jpg"
WIDTH=136
HEIGHT=48
BORDER=0
ALT="La
superOFERTA"></A>
</TD>
<TD>
<!-- texto -->
<P><FONT SIZE="+2">L</FONT>a agencia de viajes Los Alpes
goza de un gran prestigio en el mundo de...
Tambin podamos usar una tabla de tres filas dentro de esta
celda para tener un mayor control sobre la disposicin de los
botones, poniendo cada uno en una de las filas. Dejamos la
realizacin de esta mejora como ejercicio para el lector.
Figura 6.33. Visualizacin de medida.htm

Paso 7 - Cambiar el fondo y color del texto

Hemos elegido usar una imagen de fondo, y como esta imagen es

oscura debemos adems cambiar el color del texto y los enlaces.
Todo ello lo hacemos con los atributos de la etiqueta BODY:
<BODY LINK="#FED354" VLINK="#EDB301" ALINK="#FFFF00"
BGCOLOR="#335142"
TEXT="#71AC84"
BACKGROUND="img/tratilea.jpg">
Este cdigo deberemos usarlo en todas y cada una de las pginas.
En l hemos usado el atributo BGCOLOR para poner un color de
fondo similar al color de la imagen, de esta forma si hay algn
problema con la imagen el color de fondo especificado se usar en
su lugar y la pgina no perder mucho.
Figura 6.34. Resultado final de la pgina mes.htm

Paso 8 - Realizacin del resto de las pginas

Lo que queda es ya muy similar a lo que llevamos hecho. Usando la
plantilla creada en el paso 4 y ciertas imgenes (aunque invitamos
al lector a crear las suyas) no nos ser difcil. Para que sea ms
fcil ah van algunas pistas:
En las figuras 6.33, 6.34 y 6.35 hemos ido mostrando el resultado
final de estas pginas.
Para la pgina mes.htm hemos creado 5 nuevos botones para cada
uno de los viajes y los hemos situado en la columna de la derecha
de la segunda tabla, tal y como habamos planeado.
Igualmente hemos creado botones para la pgina medida.htm.
El ltimo comentario es que para el archivo SuperOFE.htm al final
suprimimos la segunda de las tablas por ser innecesaria. En esta
pgina usamos la tabla creada en la prctica 3.
Figura 6.35. Resultado final de la pgina superOFE.htm

Paso 9 - Retoques, pruebas, revisin y mantenimiento

El ltimo paso es el ms largo de todos y consta de varias tareas.
En primer lugar se pueden retocar las imgenes para que queden
mejor y/o ocupen menos se puede aumentar el tamao de la
primera letra de cada prrafo (como hemos hecho nosotros) y en

definitiva cualquier mejora del aspecto de las pginas. Despus hay

que hacer pruebas de la pgina. Son especialmente importantes las
pruebas con otros navegadores, con varias resoluciones de pantalla
(600x480 y 800x600 especialmente) y con distintas cantidades de
colores, en concreto debemos ver si con 256 colores los grficos
todava se ven bien.
Si este fuese un sitio Web real deberamos adems deberamos
realizar continuas revisiones de las pginas y mantener un
contenido actualizado constantemente.
Una vez hemos creado el Web completo podemos tomarnos un
descanso y ensear las pginas a nuestros conocidos. Sin duda es
como para estar orgullosos de lo que ya somos capaces de hacer.
De ahora en adelante aprenderemos los aspectos ms avanzados,
y a la vez ms interesantes, del lenguaje HTML.
38. Estandares y extensiones del lenguaje HTML (I)
Anterior | Inicio | Siguiente
El lenguaje HTML empez a usarse a gran escala a partir de 1990
cuando Tim Berners Lee, mientras trabajaba en el laboratorio
Europeo de Fsica de Partculas (CERN) en Suiza (ver figura 7.2)
desarroll un novedoso sistema de distribucin de informacin
basado en pginas independientes, llamadas pginas web (web
pages) o simplemente webs, con posibilidad de hipertexto. Era el
nacimiento del World Wide web (de ahora en adelante WWW), que
podra traducirse como la telaraa mundial.
Figura 7.2. En el CERN (http://www.cern.ch ), un instituto de
fsica con poca relacin con Internet, se engendr la idea del
World Wide Web.

A partir de entonces el WWW no ha parado de crecer y lo que

empez como un pequeo proyecto se convirti en un sistema
usado en todo el mundo a travs de la red Internet. En 1995 el
WWW se convirti en el servicio de esta red ms utilizado por sus
usuarios por delante incluso del e-mail o el FTP (sistema usado
para transporte de ficheros).
HTML era el lenguaje usado para crear las pginas individuales que
formaban esa telaraa mundial. Este era un lenguaje muy sencillo
que permita incluir texto, encabezados, imgenes, formularios
simples y muy poco ms. Debido a la gran expansin del WWW el
HTML empez a ser usado ampliamente y diversas empresas se
dieron cuenta del potencial que representaba y empezaron a
comercializar programas, posteriormente llamados navegadores,
exploradores o browsers, capaces de encontrar pginas de esta
telaraa en Internet e interpretar el cdigo HTML para presentar la
informacin de las pginas.
Pero entonces surgi el desorden. Cada una de las empresas u
organismos que elaboraban los navegadores propona su propia
interpretacin del lenguaje y programaba sus aplicaciones para que
fuesen fieles a esa interpretacin. Esto causaba verdaderos
quebraderos de cabeza a los programadores de webs ya que si
preparaba su pgina para que funcionase con un navegador no

funcionaba con otro o las diferencias eran ms importantes de lo se

puede considerar como aceptable.
El estndar HTML 2.0
Para solucionar este desorden se cre un organismo, el World Wide
Web Consortium (de ahora en adelante W3C), que se encargara de
estandarizar todos los temas relacionados con el WWW y por
supuesto el lenguaje HTML entraba en sus objetivos. En la figura
7.3 podemos ver la pgina de esta organizacin.
Figura 7.3. El World Wide Web Consortium, o W3C, fue creado
para regular el World Wide Web. Esta regulacin incluye una
estandarizacin del lenguaje HTML.

El primer estndar serio que vio la luz fue el HTML 2.0. Este
estndar pretenda contentar a todos los navegadores existentes y
en un principio lo consigui. De hecho podemos considerar que
todos los navegadores existentes actualmente soportan este
estndar, por lo tanto cualquier pgina escrita usando cdigo HTML
2.0 podr ser visualizado en cualquiera de ellos. Este estndar
inclua:
Texto normal y algunos pocos estilos fsicos y lgicos, pero no se
poda variar ni el tamao ni el color. Tambin inclua alguna etiqueta
de prrafos como <P> o <BR> pero sin ningn atributo.
Seis niveles de encabezados.
Formularios bsicos.
Enlaces (tambin llamados links).
Imgenes.

Y muy poco ms. Pronto se demostr que este estndar era

insuficiente, y muy pronto las principales empresas que haban
creado navegadores, como Netscape Navigator y ms tarde Internet
explorer. Empezaron a inventarse nuevas etiquetas HTML que, por
supuesto, slo seran vlidas si se usaba su navegador. A estas
nuevas etiquetas se las llam extensiones y entre las ms
importantes destacan las tablas, frames, imgenes de fondo, etc. El
desorden surgi de nuevo.
El estndar HTML 3.2
El W3C se apresur en publicar un nuevo estndar, HTML 3.0, que
inclua algunas de las extensiones de mayor xito. Sin embargo
este estndar era excesivamente diferente a HTML 2.0. Introduca
muchas etiquetas nuevas, y algunas de dudosa utilidad. Por esta
razn el propio Web Consortium aconsej que dejase de usarse.
Poco tiempo despus apareci una revisin de este estndar el
HTML 3.2 que es el que rige actualmente. En este estndar se
incluyeron:
Nuevos elementos para introducir en la cabecera como <SCRIPT>
para incluir cdigo de JavaScript o VBScript y otros como <STYLE>
, <META>, <BASE > y <LINK>
Nuevos atributos para la etiqueta BODY para poner color o
imgenes de fondo y para cambiar el color del texto y links.
Nuevos atributos para la mayora de las etiquetas existentes,
La posibilidad de cambiar el tamao y color del texto con la etiqueta
<FONT>.
Y por ltimo, y probablemente la ms importante, la posibilidad de
usar tablas.
Sin embargo no todas las extensiones que haban creado los
fabricantes de navegadores fueron introducidas en el estndar.
Algunas de ellas muy extendidas, como por ejemplo los frames
(explicados ms adelante) se dejaron fuera, con lo que no se
consigui satisfacer a todo el mundo. Adems, Microsoft ya haba
entrado de lleno en el mundo Internet con su navegador Internet
Explorer, lo que propici una explosin de extensiones. Hoy en da
los programadores de pginas web deben tener en cuenta no slo
el lenguaje HTML estndar sino las etiquetas y atributos que van
incluyendo Microsoft y Netscape. Ambas compaas crearon
pginas con informacin sobre cmo hacer pginas web
aprovechando todas las caractersticas de sus navegadores, al
margen de los estndares. La figura 7.4 muestra estas pginas tal y
como se presentaban hace algunos aos.
Figura 7.4. Tanto Microsoft como Netscape crearon sitios web
especialmente dedicados a programadores de Internet en el

que informan de las tecnologas propietarias soportadas por

sus navegadores.

39. Estandares y extensiones del lenguaje HTML (II)

Anterior | Inicio | Siguiente
HTML 4.0 y XHTML
Dado el gran incremento de incompatibilidades entre los diferentes
navegadores, el W3C hizo un gran esfuerzo para reunir a las
principales compaas y crear un nuevo estndar que todas se
comprometan a cumplir: HTML 4.0. Este estndar incluye muchas
novedades, algunas muy usadas como los frames.
HTML 4.0 es tremendamente completo y hay pocas excusas para
crear pginas web que usen extensiones. Parece que los creadores
de navegadores han empezado a dar una mayor importancia al
soporte de estndares, lo que permite crear pginas web HTML que
se vean correctamente por todo el mundo. En particular es
destacable el esfuerzo del proyecto Mozilla (http://mozilla.org), que
ha tomado las riendas del desarrollo del navegador Netscape
Navigator como software libre. En este proyecto han demostrado un
fuerte compromiso por el soporte de los estndares y el abandono
de las extensiones propietarias.
En la figura 7.5 podemos ver el comienzo del documento que define
este estndar as como la direccin donde podemos encontrarlo:

Figura 7.5. En el servidor web del W3C podemos ver la

especificacin del nuevo estndar HTML 4.0. La direccin
concreta es: http://www.w3c/TR/PR-html40/

Desde hace ya algn tiempo todos los navegadores soportan el

estndar HTML 4.0: Internet Explorer, Netscape Navigator, Mozilla,
Konqueror, Opera, etc. Su uso ser una garanta de compatibilidad
para nuestros sitios webs.
Si bien es cierto que usando nicamente etiquetas de HTML 4.0
conseguimos crear pginas que se vean en cualquier navegador
han aparecido otras tecnologas como CSS, JavaScript, Applets
Java, Flash, etc cuyo soporte vara mucho de unos navegadores
a otros. Estas tecnologas no sern tratadas en este curso, pero
si queremos advertir de la importancia de que sean usadas de
forma que no se obligue al visitante a tener un navegador
concreto.
Y qu es exctamente XHTML? Pues es una variante de HTML
que tiene las mismas etiquetas que HTML 4.0 (en concreto es
idntica a la revisin HTML 4.0.1), pero con una serie de
restricciones de sintaxis para ser compatible con XML. Para un
navegador no hay diferencias entre usar HTML o XHTML, pero este
ltimo puede ser til para poder emplear herramientas de
tratamiento de XML al crear una pgina web. Las principales
normas que debemos cumplir para que una pgina HTML sea
compatible con XHTML (y por tanto compatible con XML) son:
La primera lnea del archivo debe ser:

<?xml version="1.0"?>
Todas las etiquetas deben tener instruccin de inicio e instruccin
de fin. No est permitido no poner </p> al final de un prrafo on /li>
al final de un elemento de una lista, como es habitual en HTML.
Las etiquetas de una nica instruccin deben terminar con />. Por
ejemplo:
<img src="img.gif"/>
Todos los valores de los atributos deben ir entrecomillados.
El futuro de HTML
El lenguaje HTML seguir evolucionando y continuar siendo, con
toda probabilidad, la base de las pginas web. Conocerlo ser
imprescindible para poder aprovechar todas sus ventajas. Por ello
seguir usndose directamente para crear pginas web muy
cuidadas mientras que en otros casos ser ocultado por
herramientas que permitan crear pginas al estilo de un procesador
de texto. Adems de esto seguirn adquiriendo mayor y mayor
importancia nuevas tecnologas que aaden nuevas caractersticas
a las pginas web como dinamismo o interaccin con el usuario.
Entre estas tecnologas nos encontramos con los ya habituales
lenguajes de Script (JavaScript y VBScript). Estos son lenguajes de
programacin que se insertan en las pginas web junto con el
cdigo HTML y que nos permitir aumentar la interactividad con el
visitante respondiendo a algunas de sus acciones como pulsar un
botn, pasar con el ratn por encima de una imagen, etc.
Por supuesto tambin hemos de mencionar las hojas de estilo que
facilitan el mantenimiento de la apariencia en las pginas web
adems de darnos ms potencia.
La suma de HTML con los lenguajes de script y las hojas de estilo
ha sido denominado HTML dinmico. Desgraciadamente este ha
sido el comienzo de una nueva serie de caractersticas
incompatibles entre navegadores. En particular es habitual
encontrar pginas que slo pueden verse correctamente en el
navegador dominante en la actualidad: Internet Explorer.
Esperemos que entre todos los creadores de pginas web podamos
presionar para que se tienda a una mayor compatibilidad entre
navegadores. Mientras tanto tendremos que tener cuidado en hacer
pginas que puedan verse en todos ellos.
Conclusiones
Bien, ya sabemos todo lo que necesitamos saber sobre la historia
del lenguaje HTML, sus estndares y las extensiones de los

distintos navegadores. Es probable que el lector se haga dos

preguntas en este momento a qu estndar pertenecen las
etiquetas vistas hasta ahora? y Cules puedo usar libremente?.
Todas las etiquetas vistas hasta ahora pertenecen en su mayor
parte al estndar HTML 2.0. De hecho siempre que no hemos
hecho mencin explcita de que cierta etiqueta o atributo era nuevo
pertenecan a esta versin. Tambin hemos visto gran parte de las
etiquetas del estndar HTML 3.2, en general las ms importantes y
de mayor uso. En ocasiones hemos dicho explcitamente que esta o
aquella etiqueta pertenecan al HTML 3.2, ahora sabemos que
sentido tena remarcarlo.
Porqu lo hemos hecho as? Uno de los objetivos que nos
planteamos desde el principio fue que nuestras pginas pudiesen
ser vistas por todo el mundo, de esta manera podramos llegar a la
mayor cantidad de pblico posible. Con esta finalidad hemos
aprendido a usar etiquetas que pueden ser vistas por casi todo el
mundo. Las etiquetas de HTML 2.0 pueden ser vistas por todo el
mundo mientras que las etiquetas del lenguaje HTML 3.2 vistas
hasta ahora estn muy extendidas y causan problemas al ser vistas
con navegadores antiguos. En definitiva, todas las etiquetas que ya
conocemos pueden ser usadas con gran libertad con la garanta de
no estar limitando que nuestras pginas puedan ser vistas
nicamente por los usuarios de las ltimas versiones de Navigator o
Explorer. Si tenemos mayores requerimientos y queremos estar
seguros de que nadie tendr problemas al ver nuestras pginas
debemos considerar algunos aspectos ms.
El W3C ha puesto un servicio pblico que permite ver si una
determinada pgina cumple los estndares o no. Est disponible en
http://validator.w3.org/
Tambin hay un programa, llamado Tidy que permite hacer la
validacin en un archivo local, sin tener que publicarlo en Internet.
Este programa es software libre y est disponible en
http://tidy.sourceforge.net/.
Qu etiquetas debo usar y cmo?
Podemos asumir que todas las etiquetas del estndar HTML 4.0 son
entendidas por cualquier navegador. Eso s debemos tener en
cuenta que el uso de frames o tablas complicadas puede dificultar
su interpretacin correcta en navegadores de texto o hablados
(como los usados por personas ciegas o en coches).
Si optamos por emplear una extensin hay que ser consciente de
qu navegadores lo soportan y cmo afectar a los usuarios de el
resto. Teniendo esto en cuenta hay que considerar:

Si los usuarios a los que va dirigido el web poseen alguno de dichos

navegadores.
Que perjuicios tendrn aquellos usuarios que no lo tengan. Por
ejemplo, nunca debemos incluir informacin vital usando una
extensin si existe el riesgo de que cierto tipo de usuarios con
navegadores antiguos no puedan acceder a ella. Es decir, la
informacin muy importante debe ser incluida con etiquetas de
HTML 2.0 para que todo el mundo pueda verla.
Si usamos con cuidado las extensiones, podemos evitar que causen
mucho perjuicio a los usuarios que usen navegadores que no las
soporten, y los usuarios que si que tengan los navegadores
adecuados saldrn beneficiados. Para conseguir esto es necesario
conocer bien estas extensiones y el comportamiento de un
navegador cuando se encuentra con alguna etiqueta o atributo que
no soporta (que no entiende). Esto ltimo no es difcil de entender:
si un navegador se encuentra con una etiqueta que no conoce
simplemente la ignora y lo mismo ocurre con los atributos.
Qu queda por aprender?
En este mismo captulo veremos las etiquetas del estndar HTML
3.2 que todava nos queda por ver a excepcin de los formularios
que sern vistos prximamente. En los siguientes captulos
aprenderemos a usar las extensiones de Microsoft Explorer y
Netscape Navigator para aprovechar las ltimas capacidades de
estos navegadores pero sin causar problemas a los usuarios de los
navegadores ms antiguos o navegadores en modo texto. Segn
vayamos estudiando estas nuevas etiquetas aprenderemos tambin
a usarlas adecuadamente. Un buen ejemplo de una de las ms
importantes extensiones del lenguaje HTML, los frames, es la
pgina web de la figura 7.6:
Figura 7.6. En esta figura vemos un excelente uso de los
frames o marcos, que dividen la pantalla en cuatro partes para
facilitar la navegacin.

En ella podemos ver como adelanto al captulo posterior en el que

trataremos esta extensin a fondo, que los frames sirven para dividir
la pantalla en varios marcos con una pgina diferente en cada una.
En este caso se ha dividido la pantalla en cuatro marcos.
En los captulos que seguirn trataremos las tcnicas para incluir
contenido dinmico en nuestras pginas, incluido el nuevo lenguaje
HTML Dinmico que constituye por s slo una nueva revolucin en
el World Wide Web.
En definitiva nos queda por estudiar las etiquetas ms novedosas
del lenguaje HTML y otros acompaantes que nos ayudarn en la
programacin de pginas web y nos permitirn crear efectos
realmente impactantes y sorprendentes. Empecemos con ello sin
perder ms tiempo.
40. Extensiones a las listas (I)
Anterior | Inicio | Siguiente
Las etiquetas y atributos que aprendimos a crear en el captulo 4
pertenecen al estndar HTML 2.0. Con ellas podamos crear listas
de diferentes tipos y anidarlas para crear interesantes efectos. Sin
embargo tras unos aos trabajando con estas etiquetas los
programadores de HTML empezaron a sugerir algunas ideas para
conseguir un mayor control sobre las listas.
El primer paso para satisfacer estas ideas fue la insercin de
nuevos atributos en el estndar HTML 3.2 y estos son los que
veremos a continuacin.
El siguiente paso se ha dado con la creacin de las hojas de

estilo. Estas no son ms que un mtodo nuevo con el que se nos

ofrece a los programadores la posibilidad de especificar las
caractersticas de cada uno de los elementos de nuestras pginas
web. En lo que a listas se refiere podemos indicar que la vieta
de una lista no numerada sea de una manera determinada, que el
tamao de los elementos de la lista vayan decreciendo, etc. O
incluso podemos crear diferentes subtipos de listas. Las hojas de
estilo son de reciente aparicin y por tanto no estn bien
soportadas por los navegadores aunque ya podemos aprovechar
gran parte de sus ventajas y por ello sern adecuadamente
cubiertas en un captulo posterior.
Las novedades que esta nueva versin del estndar introdujo se
refieren a las listas ordenadas, OL, y a las listas no ordenadas, UL,
que son en definitiva las ms usadas. Estas novedades afectan
tambin a la subetiqueta LI.
Listas no ordenadas
Para aumentar el control sobre la apariencia de las listas no
numeradas o no ordenadas se introdujo un nuevo atributo: TYPE.
Con l podremos cambiar el tipo de vieta de los elementos de la
lista. Los tipos de vietas disponibles son:
TYPE="Circle": El smbolo es un crculo, es decir, una circunferencia
no rellena.
TYPE="Square": La vieta es un cuadrado.
TYPE="Disk": Similar a Circle, pero ahora la circunferencia si est
rellena. Este tipo es el que apareca por defecto cuando no
usbamos el atributo TYPE.
Quiz al lector que haya practicado con anidamiento de listas le
resulten familiares estos tipos de vietas. Si recordamos al anidar
listas el tipo de vieta de cada nivel de anidamiento era distinto.
Pero ahora nosotros tendremos libertad para elegir cuando debe
usarse cada uno.
Veamos algunos ejemplos. El primero de ellos ser una lista de tipo
Disk. En l se muestra un listado de algunos de los principales
navegadores, y el cdigo usado es:
<UL TYPE="circle">
<LI>
Ms Internet Explorer
<LI>
Netscape Navigator
<LI>
Opera
<LI>

Lynx
</UL>
Si queremos hacer esta misma lista pero con vietas cuadradas
tendremos que escribir:
<UL TYPE="square">
<LI>
Ms Internet Explorer
<LI>
Netscape Navigator
<LI>
Opera
<LI>
Lynx
</UL>
En la figura 7.7 podemos ver ambos ejemplos junto con un tercero
que se obtiene no usando el atributo TYPE o usndolo con el valor
TYPE="disc".
Figura 7.7. En HTML 3.2 existen 3 tipos de vietas para las
listas no ordenadas. Con el atributo TYPE podemos elegir entre
ellos.

En la figura 7.8 vemos estos tres ejemplos de nuevo, pero esta vez
visualizndolos con Netscape Navigator.
Figura 7.8. Comparando esta figura con la anterior vemos la
similitud entre las distintas vietas de los elementos de las
listas usadas por Netscape Navigator e Internet Explorer.

Es importante apreciar que no existen prcticamente diferencias,

quiz la nica sea la variacin de tamao de los smbolos de
algunas vietas.
Hasta ahora hemos usado el atributo TYPE en la etiqueta que
defina el tipo de lista, es decir, en la etiqueta UL. De esta forma el
cambio en el tipo de vieta afectaba a todos los elementos de lista.
Sin embargo tambin puede usarse en la etiqueta LI, y de esta
forma conseguimos que el cambio de vieta slo afecte a un
elemento de lista concreto. La mejor manera de ver este efecto es
con un ejemplo y por ello vamos a retomar el primero de los tres
vistos antes pero cambiando el tipo de vieta del navegador Lynx.
Esto podra servirnos en un ejemplo real para indicar que este
navegador es un navegador en modo texto, mientras que los dems
son navegadores grficos. El cdigo que debemos usar es:
<UL TYPE="circle">
<LI>
Ms Internet Explorer
<LI>
Netscape Navigator
<LI>
Opera
<LI TYPE="disc">
Lynx
</UL>
En la figura 7.9 podemos ver el resultado.
Figura 7.9. Usando el atributo TYPE en una etiqueta LI
podemos cambiar la vieta de un nico elemento de lista sin
afectar a los dems.

Con esto podemos dar por terminadas las novedades de las listas
no ordenadas, pasemos a las ordenadas.
41. Extensiones a las listas (II)
Anterior | Inicio | Siguiente
Listas ordenadas
Este tipo de listas tiene alguna novedad ms que las anteriores.
Para empezar tambin le ha sido aadido un atributo cuyo nombre
es TYPE. Pero ahora la funcin que desempea es ligeramente
distinta, si antes cambiaba el tipo de vieta ahora cambiar el tipo
de numeracin. En la tabla 7.1 podemos ver los cinco tipos distintos
que hay y el valor que debe tomar el atributo TYPE para elegir cada
uno:
Figura 7.1. Los cinco tipos distintos que puede tomar el
atributo TYPE para listas ordenadas

Siguiendo con la lista usada como ejemplo anteriormente, ahora

podramos numerar los elementos de lista con letras escribiendo el
siguiente cdigo:
<OL TYPE="a">

<LI>
Ms Internet Explorer
<LI>
Netscape Navigator
<LI>
Opera
<LI;>
Lynx
</OL>
Cambiando el valor del atributo TYPE por cada uno de los que
veamos en la tabla 7.1 obtendremos todos los tipos de numeracin
tal y como apreciamos en la figura 7.10:
Figura 7.10. Con el atributo TYPE podemos elegir entre 5 tipos
distintos de numeracin en las listas de HTML. En esta figura
vemos los 4 nuevos.

Al igual que en el caso de las listas no ordenadas podemos usar el

atributo TYPE con cada una de las etiquetas LI. Sin embargo ahora
el efecto es menos til que antes, ya que, en general, cambiar el
tipo de numeracin (OJO, no se vuelve a empezar desde cero) para
algunos de los elementos de lista confunde al navegante que vaya a
verla.
La siguiente novedad introducida por la versin 3.2 del estndar del
lenguaje HTML para las listas ordenadas es el atributo START. Si
bien las listas que hemos creado hasta ahora comenzaban siempre
por 1 (o por a, A, i, I, segn el tipo de numeracin) con este atributo
podemos elegir porqu nmero (o letra) comenzar el primer
elemento de lista. Esto suele ser til cuando tenemos que partir una
lista en dos porque queremos insertar algo en medio y queremos
retomar la numeracin despus. Este atributo tiene como valores
posibles todos los nmeros naturales (1, 2, 3, ...)

Si en cada uno de los ejemplos de la figura 7.10 ponemos el

atributo START con el valor 10 obtendremos el resultado de la figura
7.11:
Figura 7.11. Si usamos el atributo START podemos variar el
nmero (o letra en estos casos) por los que se empiezan a
numerar los elementos de la lista.

Aunque en esta figura no est el tipo de numeracin arbigo (1, 2,

3, ...) los resultados de este tipo de numeracin son fcilmente
previsibles.
El atributo START no puede ser usado de manera independiente en
cada elemento de lista, LI. Si embargo si que existe otro atributo
que nos permitir cambiar el nmero que precede a cada elemento
de lista: VALUE. Este atributo funciona de manera muy similar a
START, toma como valor un nmero natural y lo convierte al tipo de
numeracin que usa esa lista. Por ejemplo podramos crear una
lista con numeracin romana impar de la siguiente manera:
<OL TYPE="i">
<LI VALUE=1>
Ms Internet Explorer
<LI VALUE=3>
Netscape Navigator
<LI VALUE=5>
Opera
<LI VALUE=7;>
Lynx
</OL>
Que nos da el resultado de la figura 7.12:
Figura 7.12. Con el atributo VALUE podemos indicar el valor de
la numeracin de cada uno de los elementos de las listas
numeradas.

Con este atributo ya podemos dar por terminadas las novedades

introducidas por HTML 3.2 en la creacin de listas. Pero an queda
por comentar un ltimo atributo que existe desde las primeras
versiones del lenguaje HTML:COMPACT. Este atributo puede ser
usado en cualquiera tipo de lista: UL, OL, MENU, DIR y DL, y su
funcin es decirle al navegador que intente comprimir el tamao que
ocupa la lista al mximo, por ejemplo reduciendo el espacio entre
cada uno de los elementos de lista. La forma de usar este atributo
es simple y no toma ningn valor. Siguiendo con el ejemplo usado
hasta ahora podramos usar el siguiente cdigo:
<OL COMPACT;>
<LI>
Ms Internet Explorer
<LI>
Netscape Navigator
<LI>
Opera
<LI>
Lynx
</OL>
El problema de este atributo es que en general los navegadores lo
ignoran y muestran la lista exactamente igual que las dems. Si el
lector prueba el cdigo de este ltimo ejemplo en Navigator o
Explorer probablemente no notar ninguna diferencia por haber
usado COMPACT, aun as hemos considerado recomendable
comentar su existencia.

42. Alineamiento
Anterior | Inicio | Siguiente
Este no es un tema nuevo. En gran parte de las etiquetas que
hemos visto hasta ahora exista el atributo llamado ALIGN, que
aunque variaba en su funcionamiento ligeramente de unas a otras
cumpla la funcin principal de permitirnos elegir el alineamiento de
los elementos en la pgina. Algunos ejemplos de etiquetas donde
nos encontramos con este atributo son IMG, P y TABLE. Tambin
vimos la etiqueta CENTER. Con ella podamos centrar cualquier
elemento que insertramos en una pgina web sin ms que situar el
cdigo correspondiente entre la instruccin de inicio <CENTER > y
la instruccin de fin </CENTER> . De esta forma conseguamos
alinear elementos cuyas etiquetas no tuviesen el atributo ALIGN.
Y...hace falta algo ms? Quiz lo nico que se echa en falta es
algo de uniformidad. El atributo ALIGN surgi en algunas etiquetas
por la inexistencia de otro medio de alineamiento. La etiqueta
CENTER no perteneca al HTML 2.0 y fue una invencin de
Netscape . A pesar de ello empez a usarse masivamente y el web
Consortium se vio obligado a incluirla en el estndar HTML 3.2.
Pero su enfoque del tema era algo distinto y por ello adems de
incluir la etiqueta CENTER se cre una nueva: DIV . La funcin de
esta etiqueta es realizar divisiones en las pginas de manera que
podamos indicar las propiedades de cada una de estas divisiones
por separado. Por ahora la nica propiedad que podemos controlar
es el alineamiento horizontal haciendo uso del conocido atributo
ALIGN. Este atributo puede tomar los, ya conocidos, valores: LEFT,
CENTER, RIGHT. Es decir, para usar esta etiqueta deberemos
escribir el siguiente cdigo:
<DIV ALIGN="CENTER">
... Cualquier etiqueta ...
</DIV>
En este caso hemos usado como ejemplo el valor CENTER, en la
figura 7.13 podemos ver un ejemplo con cada uno de los tres
valores posibles en los que hemos alineado de una vez un prrafo
una lista y una imagen.
Figura 7.13. Con la nueva etiqueta DIV podemos cambiar el
alineamiento de todo tipo de elementos HTML (imgenes,
listas, prrafos, etc.) de una sola vez.

En su idea original usar <DIV ALIGN="center" > deba ser

equivalente a usar <CENTER > pero por unas razones o por otras
el efecto no es el mismo y por ello la etiqueta DIV no es muy
usada.
En el estndar HTML 4.0 la funcin de la etiqueta DIV sufrir un cambio fundamental.
En este estndar se desaconseja su uso para elegir el tipo de alineamiento, ya que se
aconseja que eso se haga con hojas de estilo. La funcin de DIV ser entonces

seleccionar el idioma usado u otras caractersticas relacionadas con las hojas de estilo
que veremos ms adelante.

Internet Explorer introdujo como extensin el valor

ALIGN="justify". Ms tarde ha sido adoptado por Netscape y
tambin ha sido incluido en el estndar HTML 4.0 (Cougar). La
funcin de este atributo es justificar los mrgenes tanto derecho
como izquierdo de la misma manera en que lo estn estas
columnas de texto de esta publicacin.
43. La etiqueta META
Anterior | Inicio | Siguiente
Uno de los mejores mtodos para aprender nuevas tcnicas en la
programacin HTML consiste en examinar el cdigo de las pginas
que han creado otros. Desde hace ya algn tiempo empez a
proliferar el uso de una etiqueta, de nombre META, que, si bien
existe desde los comienzos del lenguaje HTML, era una gran
desconocida. Incluso hoy en da muchos programadores de pginas
web no conocen el significado de esta etiqueta. A grandes rasgos
podramos decir que la etiqueta META sirve para describir las
caractersticas de la pgina web. La forma en que esta informacin
es usada no est siempre determinada, con lo que la mejor forma
de aprender a usar la etiqueta META es mediante una serie de
ejemplos.
Carga automtica de pginas
Esta es, sin duda, la funcin ms til de todas las que puede
desempear la etiqueta META y consiste en cargar
automticamente una pgina desde la actual transcurridos unos
segundos sin que el usuario tenga que hacer nada. Para conseguir
esto debe incluirse en la cabecera del documento HTML, es decir
entre <HEAD > y </HEAD> la siguiente lnea:
<META HTTP-EQUIV="Refresh"
CONTENT="5"
URL="http://es.gnome.org">
Cuando una pgina tenga esta lnea de cdigo cargar la pgina
es.gnome.org pasados 5 segundos de la carga de dicha pgina. Por
supuesto el nmero de segundos y la direccin a la que queremos
que se salte se pueden cambiar. Ambos datos deben estar entre
comillas y separados por punto y coma, tal y como se muestra en el
ejemplo anterior.
Informacin para los buscadores

Todos los navegantes del WWWW hemos usado en alguna ocasin

alguno de los buscadores como Yahoo (figura 7.14), Altavista, Ole,
Oz, o algn otro.
Figura 7.14. Los buscadores permiten a los navegantes
encontrar la informacin que buscan. Usando la etiqueta META
podemos proporcionarles datos para que incluyan nuestras
pginas en sus bases de datos.

Estos buscadores tienen una serie de programas llamados araas,

webbots o bots que navegan por la red reclutando pginas para
incluir en su buscador. Si incluimos en nuestra pgina cierta
informacin es muy probable que incluya nuestra pgina en la base
de datos del buscador. Entre la informacin que puede necesitar el
webbot est el autor de la pgina, una breve descripcin de la
misma, palabras clave que la definan, etc. Para insertar estos datos
haremos uso de los atributos NAME y CONTENT de la etiqueta
META. Por ejemplo en la pgina de Los Alpes ser conveniente
aadir:
<META NAME="author"
CONTENT="WebMaster de Los Alpes">
<META NAME="keywords"
CONTENT="viajes, ofertas, Los Alpes, Orlando, Nueva
Zelanda">

<META NAME="description"
CONTENT="La agencia de viajes Los Alpes tiene un
gran prestigio en el mundo de las empresas y
combina una gran calidad con unos excelentes
precios.">

Otros usos
La etiqueta META tiene tres atributos HTTP-EQUIV, NAME y
CONTENT. Normalmente se pone una de las dos primeras para
indicar el nombre de la informacin que vamos a incluir y siempre
se usa CONTENT para insertar dicha informacin. El atributo HTTPEQUIV sirve para insertar informacin relacionada con el protocolo
HTTP. Este es el lenguaje con el que habla el ordenador donde hay
un navegador para pedirle pginas a un servidor web y con el que
responde este al servir (mandar) dicha pgina. Un ejemplo de su
uso es el que veamos al principio de solicitar otra pgina
transcurridos unos segundos. Otro posible ejemplo sera indicar una
fecha a partir de la cual la pgina no debe ser servida.
El atributo NAME tiene un significado mucho ms general y puede
ser usado con multitud de propsitos. Ya hemos visto que puede
servir para mandar informacin a los buscadores y tambin suelen
ser usados por los editores HTML que generan el cdigo HTML
automticamente para incluir informacin especfica.
44. Otras etiquetas del lenguaje HTML 3.2
Anterior | Inicio | Siguiente
Ya casi podemos dar por concluido el aprendizaje del lenguaje
HTML 3.2. Conocemos prcticamente todas las etiquetas y todos
los atributos que existen en este estndar. En este apartado vamos
a explicar lo poco que nos quedan para dar por terminado del todo
nuestro aprendizaje de esta versin del estndar. Las etiquetas que
vamos a comentar a continuacin no tienen demasiada relacin
entre s, y no han sido explicadas hasta ahora por que son
raramente usadas, porque muchos navegadores no las entienden o
porque necesitamos conocer algunas cosas ms para entender su
funcionamiento.
Descriptor de tipo de documento
Pero antes de empezar vamos a introducir un nuevo concepto que
todava no habamos mencionado: el descriptor de tipo de
documento. Aunque suene extrao, no lo es, nos referimos a una

declaracin que segn el estndar todas las pginas web deben

tener para ser consideradas como HTML. Esta declaracin ocupa
una sola lnea e incluir tambin informacin sobre la versin de
HTML que hemos usado. No es necesario incluir este descriptor en
nuestras pginas para que los navegadores la interpreten como
HTML, sin embargo incluirlo no causa demasiado trabajo, y
estaremos cumpliendo con el estndar. Algunos de estos
descriptores
ms
comnmente
usados
son:
|| <!DOCTYPE HTML PUBLIC "-W3CDTD HTML 3.2 FinalEN"> <!
DOCTYPE HTML PUBLIC "-IETFDTD HTML 2.0EN"> ||
Todos empiezan por la cadena <!DOCTYPE ..., el resto no es
necesario entender que significa a excepcin de la cadena HTML
3.2 del primero que indica que hemos usado etiquetas del ese
estndar y HTML 2.0 del segundo que indica lo mismo esta vez con
la versin 2.0 del estndar. El descriptor de tipo de documento debe
ser la primera lnea de la pgina, con lo que ahora la estructura
bsica
ser:
|| <!DOCTYPE HTML PUBLIC "-W3CDTD HTML 3.2 FinalEN">
<HTML> <HEAD>...</HEAD> <BODY> ... Cdigo ... </BODY>
</HTML> ||
Otras etiquetas
Existen unas pocas etiquetas del lenguaje HTML 3.2 que no hemos
comentado todava por diversos motivos. Hemos querido
enumerarlas y dar una breve descripcin para que el lector pueda
dar por concluido el aprendizaje de la versin estndar de este
lenguaje. En los siguientes captulo abordar a fondo las
extensiones
de
Netscape
y
Microsoft
.
Las etiquetas de HTML 3.2 que todava no hemos visto son:
APPLET: Esta es la etiqueta que se usa para insertar applets de
Java y ser estudiada ms adelante.
STYLE: Esta etiqueta est compuesta por una instruccin de inicio,
<STYLE> y otra de fin </STYLE> y debe ser usado en la cabecera
de la pgina. En su interior se introduce el cdigo de las hojas de
estilo que trataremos ms a fondo en los ltimos captulos
dedicados al lenguaje HTML.
SCRIPT: Aunque el estndar HTML 3.2 no soporta los lenguajes de
script si admite la existencia de esta etiqueta admitiendo que en un
futuro ser usada con este fin. Las extensiones de Netscape y

Explorer la usan para insertar JavaScript y VBScript. Estos

lenguajes son muy importantes en la programacin Internet y por
tanto tambin estn incluidos en esta obra.
FORM: Con la etiqueta FORM y una serie de subetiquetas
podremos crear formularios interactivos mediante los cuales un
usuario podr mandarnos datos. La creacin de estos formularios
no se limita a la programacin HTML, sino que tambin hay que
tratar de alguna forma la informacin que se recibe. Por esta razn
hemos preferido explicar los formularios un poco ms adelante.
ISINDEX: Este es un mtodo antiguo para crear formularios
interactivos. Su uso est desaconsejado y por tanto slo
comentaremos su existencia.
Ahora si, ya podemos dar por terminado el aprendizaje del lenguaje
HTML estndar. A partir de ahora aprenderemos a crear los efectos
ms atractivos que podemos encontrar hoy en da en el World Wide
web.
45. El atributo TARGET
Anterior | Inicio | Siguiente
El atributo TARGET es, al igual que los frames, una extensin
introducida por Netscape y adoptada posteriormente por Explorer y
Opera. El principal uso de este atributo es cuando se usa en la
etiqueta A para crear enlaces y su funcin es indicar el objetivo
(TARGET significa diana u objetivo) en el que se debe cargar la
pgina a la que saltamos tras seleccionar el texto o imagen de ese
enlace. La forma de usar este atributo es:
<A HREF="URL" TARGET="nombre_ventana">
...
</A>
Aunque este atributo fue creado para los frames y es en ellos donde
adquiere su verdadera utilidad tambin puede ser usado aunque
estos no existan. Cuando el navegante selecciona un enlace que
usa el atributo TARGET busca una ventana o frame (posteriormente
veremos como se crean y cmo se les da nombre) cuyo nombre
coincida con el que hemos indicado como valor de TARGET. Si
existe, muestra la pgina a la que nos conduce el enlace en esa
ventana o frame, pero si no existe abre una nueva ventana del

navegador y la da el nombre indicado. En la figura 8.3 vemos una

pgina con dos frames:
Figura 8.3. Usando el atributo TARGET podremos lograr que
pulsando el enlace de un frame el resultado se muestre en otro.

En la de la derecha hemos incluido un enlace usando como destino

(TARGET) el frame de al lado. La flecha nos indica que al pulsar
sobre el enlace aparece una nueva pgina en el frame de al lado.
Posteriormente tendremos tiempo para practicar con frames, ahora
vamos a ver un ejemplo del uso de este atributo en una pgina sin
ellos, como las que hemos visto hasta ahora. Abrimos nuestro editor
de texto o HTML favorito y creamos un archivo nuevo al que
llamaremos madre.htm con este cdigo:
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>
Ventana Madre
</TITLE>
</HEAD>
<BODY BGCOLOR="#EDB301">
<H1>
Esta es la ventana Madre que generar el resto
</H1>

<P>
<A HREF="ventana1.htm"
TARGET="primera_ventana">
Abrir
</A>
una nueva ventana llamada primera_ventana
<p>
<A HREF="ventana2.htm"
TARGET="segunda_ventana">
Abrir
</A>
una nueva ventana llamada segunda_ventana
<P>
<A HREF="ventana3.htm"
TARGET="primera_ventana">
Poner
</A>
contenido <STRONG>nuevo
</STRONG> en la primera_ventana
</BODY>
</HTML>
Posteriormente debemos crear los archivos ventana1.htm,
ventana2.htm y ventana3.htm, que tendrn un cdigo muy simple
en el que simplemente debemos poner un texto que diga que
ventana es esa. Por ejemplo en el caso de ventana1.htm podemos
escribir el siguiente cdigo.
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>
Pgina 1
</TITLE>
</HEAD>

<BODY>
<H1>
Esta es la pgina 1
</H1>
Esta pgina debe mostrarse en la ventana
<STRONG>primera_ventana
</STRONG>
</BODY>
</HTML>
Creamos el resto de archivos con un cdigo similar a este y abrimos
el archivo madre.htm con el navegador que prefiramos. A
continuacin seguimos los siguientes pasos:
Pulsamos sobre el primero de los enlaces. Observaremos que se
crea una nueva ventana con el contenido de pagina1.htm.
Pulsamos sobre el segundo enlace. Se vuelve a crear una nueva
ventana, esta vez con el contenido de pagina2.htm.
Pulsamos sobre la palabra 'Poner' para activar el tercero de los
enlaces. En este caso el navegador busca una ventana de nombre
primera_ventana y la encuentra, porque fue creada en el paso 1.
Una vez encontrada muestra en ella el contenido de pagina3.htm
quitando el contenido de pagina1.htm.
Tras llevar a cabo estos pasos deberamos obtener el resultado de
la figura 8.4, en la que vemos la ventana madre y las otras dos
abiertas:
Figura 8.4. Este debe ser el resultado final tras llevar a cabo
todos los pasos en el ejemplo de uso del atributo TARGET para
crear varias ventanas.

Hemos puesto un color de fondo a ventana3.htmpara que resalte

ms.
46. La etiqueta BASE
Anterior | Inicio | Siguiente
Cuando en el captulo 2 aprendimos a crear enlaces vimos que
haba dos formas de especificar la direccin de destino. La primera
era poniendo la direccin relativa. Por ejemplo, desde un archivo
llamado index.htm situado en freek.futurnet.es podramos enlazar
una pgina llamada pag.htm y situada en el directorio varios usando
el cdigo:
<A HREF="varios/pag.htm">
...
</A>
Una segunda forma para enlazar esta misma pgina era poniendo
la direccin completa (URL) de Internet, siguiendo con el ejemplo
anterior debemos usar el siguiente cdigo:
<A HREF="http://freek.futurnet.es/varios/pag.htm">
...
</A>

Comparando los dos ejemplos anteriores podemos deducir que

cuando ponemos una direccin relativa el navegador le aade la
direccin completa (exceptuando el nombre del archivo) de la
pgina actual. Es decir, al usar en este caso la direccin relativa, el
navegador ve que la pgina actual est en freek.futurnet.es y se lo
aade a la direccin relativa para obtener una direccin absoluta.
Esta direccin que es aadida a las direcciones relativas para
obtener la direccin completa recibe el nombre de direccin base, y
en todos los casos que hemos visto hasta ahora la direccin base
coincida con la direccin de la pgina actual.
Pues bien, la etiqueta BASE nos permitir cambiar esa direccin
base, y ahora podremos elegir cualquier direccin del WWW como
base para todos los enlaces con direcciones relativas de la pgina.
Esta etiqueta debe ser usada en la cabecera del documento, entre
<HEAD> y </HEAD>, dado que afectar a todo este. Para
especificar la direccin se usar un atributo llamado HREF .
Veamos un ejemplo, si queremos poner como direccin base de un
documento HTML la direccin freek.jorgeferrer.com debemos
escribir:
<HEAD>
...Ms cdigo...
<BASE HREF="http://freek.jorgeferrer.com/">
</HEAD>
O bien:
<HEAD>
...Ms cdigo...
<
BASE HREF="http://freek.jorgeferrer.com/index.htm"
>
</HEAD>
En la figura 8.5 podemos ver la diferencia entre usar y no usar
BASE y como afecta ello al significado de una direccin relativa.
Figura 8.5. Variando la direccin de base con la etiqueta BASE
variar el significado de las direcciones relativas.

Las direcciones que pongamos como valor del atributo HREF de

la etiqueta BASE deben ser siempre absolutas (completas).
Es importante resaltar que aunque en todos los ejemplos que
hemos puesto hasta ahora slo hemos considerado los enlaces
hipertexto la direccin base afecta a todas aquellas etiquetas en las
que debemos especificar una direccin y podemos hacerlo de forma
relativa, como por ejemplo en las imgenes. Por ejemplo si usamos
BASE como hemos indicado en el cdigo anterior y posteriormente
insertamos una imagen con el cdigo:
<IMG SRC="imagen.gif">
Esta imagen debe estar en freek.jorgeferrer.com/imagen.gif y no en
el mismo directorio que la pgina actual como suceda hasta ahora
cuando no usbamos la etiqueta BASE.
La etiqueta BASE existe desde la primera versin del estndar
HTML: el HTML 2.0. Sin embargo hemos preferido no comentarla
hasta ahora porque, como enseguida veremos, es con los frames
donde realmente su uso es importante, casi imprescindible.
La pregunta que quiz nos hagamos ahora es para qu puede
servirnos cambiar la direccin base?. Puede haber diversas causas,
por ejemplo existe la posibilidad de que tengamos nuestra pgina
principal en un servidor, pero el resto de las pginas y enlaces en
otro o simplemente que estn todas en otro directorio. En ambos
casos podemos ahorrarnos poner el otro servidor o directorio
especificndolo como direccin base.
Sin duda esta forma de usar la etiqueta BASE puede llegar a ser
til, pero cuando se convierte en imprescindible es al usar un
segundo atributo: TARGET. Hemos visto un poco antes que cuando
trabajamos con pginas con varios frames se puede incluir el

atributo TARGET en los enlaces para indicar el frame en el que

debe mostrarse la pgina enlazada. Pues bien usando este mismo
atributo en la etiqueta BASE lo que conseguimos es establecer el
frame base donde se mostrar la pgina enlazada cuando
pulsemos uno de los enlaces del frame actual. Porqu es esto tan
til? Lo entenderemos un poco mejor en cuanto empecemos a
trabajar con frames, pero podemos adelantar un caso en el que su
utilidad resulta obvia. En la figura 8.6 vemos un ejemplo simple pero
que ilustra lo que queremos a la perfeccin:
Figura 8.6. En este Web pulsando sobre los enlaces del frame
izquierdo nos movemos por los diferentes temas del frame
derecho.

La pgina contiene una serie de enlaces organizados por temas y

est dividida en dos frames. En el frame de la izquierda hay un
listado de los diferentes temas y en el de la derecha los enlaces en
s. Pulsando sobre los temas del frame izquierdo se muestran los
enlaces de ese tema en el frame derecho. En este caso es claro
que todas las pginas a las que apuntan los enlaces deben ser
mostradas en el frame derecho y por tanto lo ms cmodo (y as es
como est hecho en realidad) es usar (suponiendo que el nombre
del frame derecho es derecho ):
<BASE TARGET="derecho">
En el cdigo del frame de la izquierda, con lo que nos ahorramos
usar el atributo TARGET en cada uno de sus enlaces.

Ya hemos aprendido todo lo necesario para comenzar con la

construccin de pginas con frames, as que sin perder ms tiempo
pasamos ya a estudiar las etiquetas del lenguaje HTML que
debemos usar.
47. Creacin de paginas con frames
Anterior | Inicio | Siguiente
El hecho de usar frames no slo cambia por completo la apariencia
de nuestra pgina, sino que tambin cambia el proceso de su
realizacin. Si hasta ahora los Webs estaban formados por un nico
documento HTML donde estaba el contenido, al usar frames ser
necesario un documento HTML para definir la estructura de la
pgina (nmero de frames a usar y disposicin de estos), y
posteriormente tantos documentos HTML extra como frames
tengamos para insertar su contenido. En la figura 8.7 vemos un
ejemplo con una pgina Web compuesta por 3 frames:
Figura 8.7. Los Webs con frames constarn de varios
documentos HTML. En este ejemplo al haber tres frames sern
necesarios 4 documentos HTML.

En este caso sern necesarios 4 documentos HTML. El primero

simplemente contiene el cdigo que le indica al navegador el
nmero de frames de la pgina, su tamao, su posicin y el nombre
de los archivos donde est el contenido de los 3 frames, a este
documento HTML le llamaremos documento de definicin de frames
. Los otros 3 documentos HTML tienen el contenido de cada uno de
los tres frames y deben ser creados de la misma manera que
hemos venido creando los documentos HTML hasta ahora, eso s,
hay que tener en cuenta que ese contenido ser mostrado en un
espacio reducido (el del frame correspondiente) y no en toda la
ventana del navegador.
48. Creacin del documento de definicin de frames (I)
Anterior | Inicio | Siguiente

La estructura del documento de definicin de frames es parecida a

la estructura de las pginas creadas hasta ahora. La principal
diferencia ser que este documento no tendr contenido y por tanto
no debe usarse la etiqueta BODY. A cambio ha de usarse una
nueva etiqueta: FRAMESET. Esta ser la etiqueta clave en la
creacin de los frames. La estructura bsica del documento de
definicin ser por tanto la que observamos en la figura 8.8:
Figura 8.8. La estructura de las pginas con frames es diferente
a las que no tienen. La principal diferencia es la sustitucin de
BODY por FRAMESET.

En ella se observa claramente como la etiqueta FRAMESET

sustituye a BODY. Se podra decir que estas dos etiquetas son
exclusivas, cuando est una no puede estar la otra.
El siguiente paso en la creacin de nuestra pgina con frames ser
decidir cuantos queremos crear como sern. Aunque
posteriormente veremos cmo se pueden crear divisiones tan
complejas como queramos, por ahora crearemos pginas en las
que la ventana del navegador est dividida en filas o en columnas.
Divisin en columnas
Para crear una pgina Web formada por varios frames que dividen
la ventana del navegador en columnas usamos el atributo COLS de
la etiqueta FRAMESET. Este atributo toma como valores separados
por comas la anchura de los diferentes frames:
<FRAMESET COLS="ancho_col1, ancho_col2, ...">

Existen diversas formas de indicar el ancho de las columnas, una

de ellas es usando porcentajes. Con este mtodo podramos dividir
la ventana en dos columnas usando el siguiente cdigo:
<HTML>

<HEAD>
</HEAD>
<FRAMESET COLS="20%,80%">
</FRAMESET>
</HTML>
En la que estamos diciendo que la primera columna (la de la
izquierda) ocupar el 20% del ancho de la ventana del navegador y
la segunda ocupar el 80% (ver figura 8.9).
Figura 8.9. Como vemos la ventana del navegador ha quedado
dividida en dos columnas con un ancho del 20% y del 80% del
ancho total de la ventana.

Si el lector decide probar el ejemplo anterior probablemente no

obtenga el resultado deseado en su navegador. Esto es as
porque por ahora slo hemos dicho que queremos que la ventana
del navegador se divida en dos columnas pero para indicar que
sern frames (lo cual es necesario para obtener el resultado de la
figura 8.9) ser necesario aadir algo ms de cdigo que
veremos un poco ms adelante.
Si quisiramos dividir la ventana en 5 columnas simplemente
deberamos especificar cinco valores separados por comas, por
ejemplo:
<FRAMESET COLS="10%,50%,15%,20%,5%">

Por supuesto la suma de todos los porcentajes debe ser igual a

100.
El lenguaje HTML no fija ningn lmite en el nmero de filas,
columnas o frames en general en que puede dividirse una pgina.
Sin embargo no es recomendable crear ms de 4 frames en total,
porque si no el espacio dedicado a cada uno de ellos ser muy
pequeo. Debemos recordar que muchos de los navegantes
vern nuestras pginas con un monitor de 14 pulgadas y una
resolucin de 640x480.
El mtodo de especificar los tamaos de las columnas en
porcentajes es sencillo de entender, sin embargo no siempre es til.
Por ello existen otros mtodos que es importante comentar.
Uno de ellos consiste en especificar el ancho de las columnas en su
tamao absoluto en pixeles directamente. Sin embargo existe un
problema: existen varias resoluciones de pantalla distintas y sera
muy extrao que todos los navegantes que visiten nuestras pginas
tengan una misma anchura de pantalla. Por esta razn no podemos
saber cul ser el ancho total de la ventana del navegador y esto
sera imprescindible para poder indicar el ancho de las columnas en
pixeles. Para solucionar este problema Netscape invento el
asterisco (*). Cuando se pone un asterisco como ancho de una
columna estamos indicando al navegador que use todo el espacio
sobrante para ese frame. Por ejemplo si escribimos:
<FRAMESET COLS="100,300,*">
se crearn tres columnas, la primera de 100 pixeles, la segunda de
300 y la tercera ocupar todo el espacio que reste y que depender
del tamao de la ventana del navegador con el que se visualicen las
pginas. Si el navegante usa una configuracin de 640x480 es de
esperar que la ventana de su navegador tenga un ancho entre 600
y 640 pixeles y la tercera columna tendra una anchura de 200-240
pixeles. Si tiene una configuracin de 800x600 el ancho ser 760800 pixeles y por tanto la tercera columna ocupara en este caso
360-400 pixeles de ancho. Esta es la resolucin que hemos usado
para obtener la figura 8.8.
Figura 8.10. Las dos primeras columnas ocupan un ancho
absoluto de 100 y 300 pixeles. La tercera al haber usado el
asterisco ocupar el resto, que en este ejemplo son 372
pixeles.

Estas son las dos configuraciones ms extendidas y las que por

tanto debemos tener en cuenta. Si queremos cuidar mucho estos
detalles debemos tener en cuenta las configuraciones de 1024x800
o mayores y el hecho de que los usuarios pueden cambiar el
tamao de la ventana del navegador a su antojo. Sin embargo, por
lo general, no es en absoluto necesario llegar hasta esos extremos
de cuidado.
El siguiente mtodo para especificar el ancho de las columnas
consiste en combinar todos los anteriores. La mejor forma de
repasarlos es estudiando unos cuantos ejemplos. Para ellos vamos
a suponer un navegador de 800 pixeles de ancho:
<FRAMESET COLS="*,*"> : Al usar dos veces el asterisco se divide
el resto entre las dos columnas a partes iguales. Es decir, cada una
ocupar la mitad de la ventana del navegador (unos 400 pixeles
cada una). Este ejemplo es idntico a usar < FRAMESET
COLS="50%,50%">.
<FRAMESET COLS="100,*,*"> : Divide la ventana en tres
columnas. La primera de 100 pixeles y entre las otras dos divide a
partes iguales el espacio sobrante (700 pixeles) con lo que
(suponiendo el ancho total de 800 pixeles) cada una tendr un
ancho de 350 pixeles.
Algunos de estos ejemplos requieren algn tiempo de prctica.
En caso de tener alguna dificultad entendiendo alguno de ellos es
mejor seguir practicando con frames usando los mtodos algo
menos complejos. Una vez hayamos adquirido ms prctica
trabajando con frames podremos volver sobre estos ejemplos y
para practicar con ellos.
<FRAMESET COLS="200,2*,*">: La primera columna ocupar un
tamao absoluto de 200 pixeles. El resto (600 pixeles) es divido
entre las dos siguientes columnas, pero ahora no ser a partes
iguales, sino que la columna central debe ser el doble que la
columna izquierda (este detalle se indica anteponiendo un 2 al
asterisco). Por tanto del espacio sobrante, dos tercios (que

equivalen a 400 pixeles en este caso), sern para la columna

central y un tercio (200 pixeles) ser para la tercera.
Si hubisemos querido que una columna fuese el triple de la otra
deberamos haber usado el cdigo COLS="200,3*, *". Y si
quisiramos una relacin 4:5 no tendramos ms que escribir
COLS="200,4*,5*".
<FRAMESET COLS="100,50%,*">: La primera columna ocupa 100
pixeles, la segunda la mitad del ancho de la pantalla (400 pixeles) y
la tercera el resto, que en este caso ser 300 pixeles. En la figura
8.11 podemos ver un ejemplo en el que se realiza esta divisin de
columnas en un ordenador con configuracin 800x600:
Figura 8.11. En esta ocasin vemos un ejemplo del uso de
FRAMESET combinando los distintos modos de indicar el
tamao y el ancho resultante de cada uno para una ventana
con 800 pixeles de ancho.

Los tamaos absolutos deben usarse slo en ocasiones que

realmente lo requieran y siempre que los utilicemos debe haber al
menos una de las otras columnas con un tamao definido usando
un asterisco (*).
49. Creacin del documento de definicin de frames (II)
Anterior | Inicio | Siguiente
Divisin en filas
Hasta ahora hemos aprendido a dividir la ventana en columnas,
pero como es de esperar tambin se puede dividir en filas. En esta
ocasin ser necesario usar el atributo ROWS (rows significa
precisamente filas en ingls). El funcionamiento del atributo ROWS
es muy similar al de COLS:
<FRAMESET ROWS="alto_fila1, alto_fila2, ...">

Es importante hacer notar que cuando dividimos la ventana en

filas y usamos tamaos relativos, estos se refieren al alto de la
ventana, y no tienen en cuenta lo larga que puedan ser las
pginas o si hay que usar las barras de desplazamiento o no para
moverse por ella.
En este caso es ms importante, si cabe, tener en cuenta que ni
podemos saber el alto de la ventana del navegador de aquellos que
visiten nuestras pginas. Por esta razn el uso de tamaos relativos
o del asterisco (*) es an ms usual. Veamos algunos ejemplos:
<FRAMESET ROWS="200,*,100">: Divide la ventana en tres filas:
una superior de 200 pixeles en la que se podra poner un
encabezado; una inferior de 100 pixeles en la que puede ponerse
una coletilla o una barra de navegacin; y una central que ocupa el
espacio sobrante y donde se podra situar el contenido principal.
<FRAMESET ROWS="15%,*,3*">: Se divide la ventana en una
primera fila que ocupa el 15% de la altura; la siguiente fila ocupar
un cuarto del resto y la tercera tres cuartos.
No son necesarios ms ejemplos para comprender el
funcionamiento, as que vamos ya a definir el contenido de cada
una de las divisiones que hemos aprendido a crear. Cuando
insertemos este contenido, la divisin se convertir en lo que
realmente se llama frame. Mientras tanto sta estar sujeta a ms
divisiones como veremos un poco ms adelante.
Combinando COLS y ROWS
Los atributos COLS y ROWS pueden ser usados simultneamente
en una misma etiqueta FRAMESET. Si hacemos esto dividiremos la
ventana del navegador en cuadrculas de diferentes tamaos.
Podramos interpretar el resultado de usar ambos atributos
simultneamente como que cada una de las filas definidas por
ROWS es subdividida en el nmero de columnas que indica COLS.
La pgina que mostramos en la figura 8.1 es una muestra del uso
de COLS y ROWS simultneamente. En ese caso el cdigo usado
fue:
<FRAMESET COLS="*,*" ROWS="*,*">
...
</FRAMESET>
Tambin se pueden crear combinaciones ms complejas como por
ejemplo:

<FRAMESET COLS="100,50,*,*"
ROWS="15%,*,3*">
... Ms cdigo ...
</FRAMESET>
Que da lugar a la pgina de la figura 8.12:
Figura 8.12. Es posible usar los atributos COLS y ROWS
simultneamente para dividir la ventana en varias filas y
columnas.

La etiqueta FRAME
La etiqueta usada para insertar el contenido en las filas, columnas o
divisiones en general, hechas con la etiqueta FRAMESET, es
FRAME. Esta etiqueta debe ser usada una vez por cada una de las
divisiones que hallamos creado. Cada una de estas veces debemos
usar un atributo, SRC, que servir para indicar el documento HTML
donde se encuentre el contenido que queremos insertar en esa
divisin:
<FRAME SRC="docum.htm">
Esta etiqueta consta de una nica instruccin, es decir la instruccin
de fin </FRAME> no existe, y debe ser insertada entre la instruccin
de inicio y la instruccin de fin de la etiqueta FRAMESET.

Otro de los atributos ms importantes de la etiqueta FRAME es

NAME. Con este atributo le daremos un nombre al frame para poder
referirnos posteriormente a l con el atributo TARGET o con los
lenguajes de script. La forma de usar este atributo es:
<FRAME SRC="docum.htm"
NAME="primer_frame">

Si posteriormente queremos crear un enlace a este frame desde

otro de la misma pgina no tendremos ms que escribir:
<A HREF="otro.htm"
TARGET="primer_frame">

Con los conocimientos adquiridos hasta ahora en este captulo,

junto con lo que ya sabemos, estamos en disposicin de crear
nuestra primera pgina completa con frames.
50. Pagina completa con frames
Anterior | Inicio | Siguiente
El primer paso ser crear el documento de definicin de frames.
Abrimos nuestro editor y creamos un nuevo archivo. En este caso lo
llamaremos index.htm y escribimos en l el siguiente cdigo:
<HTML>
<HEAD>
<TITLE>
Primera pgina con frames
</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME SRC="izquierd.htm">
<FRAME SRC="derecha.htm">
</FRAMESET>
</HTML>

Con esto tendremos una pgina que dividir la ventana del

navegador en una columna izquierda y otra derecha que ocupan el
20% y el 80% del ancho respectivamente. El contenido de cada una
de estas columnas estar en los archivos izquierda.htm y
derecha.htm. El siguiente paso ser la creacin de estos archivos.
Volvemos a abrir un archivo nuevo en nuestro editor y le llamamos
izquierd.htm. En este archivo podemos escribir todo el cdigo HTML
que queramos siempre teniendo en cuenta sus limitadas
dimensiones. Para empezar podemos escribir:
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="#99FF99">
<H1>
Frame izquierdo
</H1>
Este frame podra servir de ndice:
<UL>
<LI>Tema 1
<LI>Tema 2
<LI>Tema 3
</UL>
</BODY>
</HTML>
A continuacin abrimos otro archivo nuevo y le llamamos
derecha.htm. El cdigo a incluir en este tercer documento HTML
ser:
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>
Este es el frame Derecho
</H1>
<P>
En este frame podra ir el contenido principal del Web.

</P>
</BODY>
</HTML>
El ltimo paso ser visualizar el documento de definicin de frames,
index.htm, con el navegador que prefiramos. Por supuesto se
podra ver cada uno de los documentos HTML por separado, y de
hecho suele ser muy til hacerlo mientras escribamos el cdigo
para ir comprobando que lo estamos haciendo bien, sin embargo
una vez hemos terminado los documentos derecha.htm y
izquierd.htm slo tienen significado como contenido de frames, y no
como pginas Web individuales. Por esta razn el nico archivo que
debe ser visto desde fuera debe ser el documento de definicin de
frames (en este caso llamado index.htm). Una vez abierto index.htm
con nuestro navegador deberamos ver una pgina similar a la que
observamos en la figura 8.13.
Figura 8.13. Ejemplo completo de una pgina con frames
formado por un frame izquierdo pequeo que puede servir de
ndice y otro derecho con el contenido principal.

La creacin de pginas con frames es algo ms compleja que la

creacin de las pginas que hemos hecho hasta ahora, y por ello es
comn cometer errores, sobre todo al principio. Si al intentar ver
una pgina con frames no observamos el resultado obtenido es
recomendable comprobar los siguientes detalles:
Al igual que con el resto de pginas debemos asegurarnos de haber
encerrado todo el cdigo entre las instrucciones < HTML> y
</HTML> y de que hemos guardado todos los archivos con
terminacin .htm o .html.
Comprobar que los nombres de los archivos coinciden con los
nombres indicados como valor del atributo SRC. En algunos casos

es necesario que los nombres coincidan en maysculas y

minsculas. Este ser el caso si vamos a publicar nuestras pginas
en un servidor UNIX (la mayora lo son).
Es importante que nos aseguremos de no haber usado la etiqueta
BODY en el archivo index.htm. Si lo hemos hecho debemos quitarla
para que funcione nuestro ejemplo.
Si hemos solucionado todos los problemas anteriores y la pgina
sigue sin visualizarse correctamente probablemente estaremos
usando un navegador que no soporte frames.
51. Atributos de la etiqueta FRAME
Anterior | Inicio | Siguiente
Adems del atributo SRC y NAME, la etiqueta FRAME tiene otros
que nos permitirn modificar algunas caractersticas de los frames.
Todos los atributos que veremos a continuacin han sido aceptados
en el estndar HTML 4.0.
SCROLLING: Usando este atributo podemos controlar la aparicin o
no de barras de desplazamiento. Los valores que puede tomar este
atributo son:
SCROLLING="auto": Este es el valor por defecto y provoca que el
navegador slo inserte barras de desplazamiento si el contenido del
frame ocupa ms del espacio dedicado para l.
SCROLLING="yes": Las barras de desplazamiento aparecern
siempre.
SCROLLING="no": Las barras de desplazamiento no aparecern
nunca. Hay que tener mucho cuidado si usamos esta opcin porque
si la pgina ocupa ms que el espacio de la ventana dedicado al
frame la informacin que no quepa en un principio no podr ser
vista.
NORESIZE: Por defecto los usuarios pueden mover los bordes de
los frames sin ms que situar el ratn sobre ellos y arrastrarlos. Si
incluimos este atributo en la etiqueta FRAME evitaremos que el
borde de ese frame pueda ser movido. Es necesario notar que este
atributo no toma ningn valor.
MARGINHEIGHT: Ajusta el margen superior que debe respetar el
contenido de ese frame. El tamao debe ser dado en pixeles.
MARGINWIDTH: Ajusta el margen lateral que debe respetar el
contenido del frame. Al igual que antes, el margen debe ser dado en
pixeles.
Para terminar vamos a ver un ejemplo del uso de todos ellos:
<FRAMESET COLS="110,*" ROWS="110,*">

<FRAME NAME="Imagen"
SRC="cuadrado.gif"
MARGINWIDTH="0"
MARGINHEIGHT="0"
SCROLLING="No"
FRAMEBORDER="No"
<FRAME SRC="f2.htm"
<FRAME SRC="rect.gif" SCROLLING="no">
<FRAME SRC="f4.htm"
MARGINWIDTH="100"
MARGINHEIGHT="100"
</FRAMESET>
que puede ser visto en la figura 8.14:
Figura 8.14. Usando los diferentes atributos de la etiqueta
FRAME podemos tener un mayor control sobre las diferentes
caractersticas de los frames.

En esta figura observamos, entre otras cosas, que aunque la figura

rect.gif no cabe en el tercer frame (abajo izquierda) no aparecen las
barras de desplazamiento. Otros aspectos interesantes estn
comentados en rojo sobre la figura.

En general es muy til establecer unos mrgenes iguales a cero

en los frames cuya funcin sea la de barra de navegacin. En los
frames con contenido, especialmente si este es texto, se suele
poner un margen de 10 pixeles.
52. Compatibilidad: NOFRAME
Anterior | Inicio | Siguiente
Hasta ahora hemos supuesto que los navegantes que vieran
nuestras pginas con navegadores con soporte para frames, sin
embargo qu ocurre si las pginas son visualizadas con un
navegador que no los soporte?. Este es un aspecto clave a
considerar porque hoy por hoy los frames no forman parte del
estndar y aunque Explorer, Netscape y Opera los entienden hay
muchos otros que no lo hacen.
Afortunadamente los inventores de los frames tuvieron este aspecto
en cuenta y crearon una nueva etiqueta, NOFRAME, pensada para
este tipo de navegadores. Esta etiqueta debe ser usada entre
<FRAMESET> y </FRAMESET> de la siguiente manera:
<FRAMESET ...>
...Cdigo de definicin de frames...
<NOFRAME>
...Cdigo alternativo...
</NOFRAME>
</FRAMESET>
Los navegadores que tengan soporte para frames simplemente
ignorarn todo lo que haya entre la instruccin de inicio,
<NOFRAME >, y la instruccin de fin, </NOFRAME> . Por su parte
los navegadores que no entiendan frames, directamente ignorarn
todas estas etiquetas (no las entienden) y pasarn a interpretar las
etiquetas que siguen a <NOFRAME >. Entre ellas debe estar la
etiqueta BODY, ya que esta etiqueta era imprescindible para las
pginas sin frames, y para los navegadores que no las soporten
todas las pginas son sin frames. En esta ocasin BODY no
provocar problemas con FRAMESET porque, como hemos dicho,
los navegadores que entiendan esta ltima ignorarn todo el cdigo
entre <NOFRAME> y < /NOFRAME>.
Un uso habitual de NOFRAME es:
<FRAMESET COLS="200,*">
<FRAME SRC="f1.htm">
<FRAME SRC="f2.htm">

<NOFRAME>
<BODY>
<P>Esta pgina usa frames y su
navegador no los soporta, por favor vaya a
<A HREF="sinframe.htm">
nuestras pginas sin frames
</A>
</BODY>
</NOFRAME>
</FRAMESET<
Si no hubiramos usado la etiqueta NOFRAME el resultado de ver
la pgina con este cdigo con un navegador sin soporte para
frames sera simplemente una pantalla en blanco como la que
vemos en la figura 8.15:
Figura 8.15. El navegador NCSA Mosaic no soporta frames, con
lo que los usuarios de dicho navegador no vern nada si no
usamos la etiqueta NOFRAME.

usndola se obtendr el resultado mucho ms explicativo de la

figura 8.16.
Figura 8.16. En este caso s hemos usado NOFRAMES
ofreciendo al navegante un enlace para ver una versin sin
frames de las pginas.

53. Anidamiento de framesets

Anterior | Inicio | Siguiente
Hasta ahora hemos aprendido a dividir la ventana del navegador en
dos o ms filas con el atributo ROW, sin embargo las posibilidades
del lenguaje HTML no acaban ah.
Tanto a lo largo de este captulo, como en el captulo anterior hemos
ido viendo algunos ejemplos de frames (figuras 7.1, 7.6 y 8.2) que
presentaban pginas Web que dividan la pantalla del navegador de
una forma ms compleja que simplemente dividir en filas o
columnas. Cmo lo hacen? La respuesta es simple, anidando
FRAMESETs. En la figura 8.17 podemos ver una explicacin grfica
de lo que esto significa. Vamos a explicarla paso a paso.
Figura 8.17. Para conseguir estructuras de frames ms
complejas puede anidarse la etiqueta FRAMESET. En esta
figura se indica cmo hacerlo.

Empezamos con el siguiente cdigo:

<frameset cols="150,*">
... ms cdigo ...
<frameset>
Con l estamos dividiendo la ventana del navegador en dos
columnas. Como hemos visto un poco antes en este captulo
podemos insertar contenido en cada una de las divisiones creadas
usando la etiqueta FRAME, por ejemplo:
<frameset cols="150,*">
<frame src="frame1.htm"/>
<frame src="frame2.htm"/>
<frameset>
Pero existe otra posibilidad. En vez de usar la etiqueta FRAME para
insertar contenido en la segunda de las divisiones podemos volver a
usar la etiqueta FRAMESET (anidndola dentro de la anterior

aparicin de esta misma etiqueta) para subdividir la parte derecha

en dos, es decir:
<frameset cols="150,*">
<frame src="frame1.htm"/>
<frameset rows="100,*">
... Ms cdigo ...
</frameset>
</frameset>
Ahora tendremos una pgina Web formada por tres frames. El
primero esta situado a la izquierda de la pantalla y tendr 200
pixeles de ancho. Los otros dos ocupan el espacio sobrante. Uno
ocupa los 100 pixeles superiores y el otro el resto. Por supuesto, al
haber dos frames ms, debemos volver a usar la etiqueta FRAME
para insertar contenido en ellos. El cdigo total quedara por tanto.
<frameset cols="150,*">
<frame src="frame1.htm"/>
<frameset rows="100,*" >
<frame src="frame21.htm"/>
<frame src="frame22.htm"/>
</frameset>
</frameset>
No existe ningn lmite en el nmero de niveles de anidamiento
de la etiqueta FRAMESET que pueden usarse. La nica limitacin
que debemos tener en cuenta es el tamao y resolucin de
pantalla que usarn los navegantes para ver nuestras pginas. Si
usamos muchos anidamientos los frames sern muy pequeos y
se podr ver poca informacin en cada uno de ellos, con lo que
se har necesario usar las molestas barras de desplazamiento.
El hecho de haber elegido esta estructura de tres frames para el
ejemplo no es casualidad. Como hemos visto en las capturas de
pginas reales mostradas hasta ahora, es una de las ms usadas.
El frame izquierdo puede usarse como ndice y el superior como un
espacio para incluir un banner o encabezado grfico. Estos dos
frames pueden mantener su contenido constante mientras en el
tercero y ms grande de los frames se presenta el contenido
principal de la pgina y es sobre el que se va navegando.
Para tener la pgina Web completa slo nos quedara crear los
archivos extra/ejem18/frame1.htm, extra/ejem18/frame21.htm y
extra/ejem18/frame22.htm. Nosotros hemos creado unos de

ejemplo, incluyendo un encabezado grfico para el frame superior y

hemos obtenido el resultado que vemos en la fig8-18.
Figura 8.18. Nuestra primera pgina con frames. La ventana
est dividida en 3 apartados (los frames) el izquierdo es el
ndice, el superior el ttulo y el central el que tiene el contenido.

Todos los aspectos relacionados con los frames que hemos visto
hasta ahora son iguales para todos los navegadores y han sido
adoptados en el estndar HTML 4.0. Esto quiere decir que son
entendidos por los navegadores Microsoft Internet Explorer 3.0 o
posterior, Netscape Navigator 2.0 o posterior, Opera 3.0 o posterior
y los navegadores grficos que aparezcan de ahora en adelante
con soporte completo de HTML 4.0.
Debemos recordar que los frames fueron una invencin de
Netscape y posteriormente Explorer y otros lo adoptaron. Sin
embargo tambin cambiaron algunas caractersticas. Por esta razn
en los atributos y etiquetas que veamos a partir de ahora haremos
mencin explcita de que diferencias existen entre la interpretacin
del cdigo de los frames por parte de Netscape y Explorer, y lo
indicaremos cuando alguna etiqueta, atributo o valor determinado
haya sido adoptado por el estndar HTML 4.0.
54. Bordes de los frames
Anterior | Inicio | Siguiente
Cuando creamos pginas con frames estos aparecen divididos por
unas lneas horizontales y verticales (ver 8-19) que adems el

usuario que vea nuestra pgina podr mover a su antojo (a no ser

que usemos el atributo NORESIZE).
Figura 8.19. En general los navegadores dibujan lneas con
aspecto 3-D para separar los frames.

Desde la aparicin de los frames los programadores de pginas

Web han estado reclamando un mayor control sobre la disposicin
sobre estos bordes y con la aparicin de Netscape 3.0 e Internet
Explorer 3.0 se introdujeron nuevos mtodos para definir sus
caractersticas.
Estos mtodos no son ms que la inclusin de tres nuevos atributos
para las etiquetas FRAME y FRAMESET. Estos son
BORDERCOLOR y FRAMEBORDER para FRAME y BORDER para
FRAMESET. Aprendamos a usarlos uno por uno.
Cambiando el color del borde
El primero de los atributos, BORDERCOLOR, nos permitir cambiar
el color del borde. El color puede indicarse tanto con el nmero
hexadecimal RGB (por ejemplo #99CC99) o bien usando uno de los
nombres predeterminados que vimos en el captulo 5. Por ejemplo
para poner el borde de color rojo podramos usar:
<FRAME BORDERCOLOR="red">
O bien:
<FRAME BORDERCOLOR="#FF0000">
Dado que los bordes son compartidos por varios frames, en el caso
de que cada uno de los bordes indique un color diferente el
resultado es impredecible y depende del navegador. Por esta razn
no podemos fiarnos de que si se da esta situacin lo que nosotros

con nuestro navegador ser lo mismo que vean los navegantes y

por tanto debemos evitarla en lo posible.
Si en cada uno de los frames de las pginas creadas en la seccin
anterior usamos este atributo para indicar bordes rojos obtendremos
el resultado de la figura 8.20. El cdigo usado es:
<FRAMESET COLS="150,*">
<FRAME SRC="frame1.htm" BORDERCOLOR="#FF0000">
<FRAMESET ROWS="100,*">
<FRAME SRC="frame21.htm" BORDERCOLOR="#FF0000">
<FRAME SRC="frame22.htm" BORDERCOLOR="#FF0000">
</FRAMESET>
</FRAMESET>
Figura 170. Con el atributo BORDERCOLOR podemos elegir el
color que queramos para los bordes de los frames.

Hay que admitir que el cambio en la apariencia de la pgina no es

muy importante, sin embargo puede ser muy til en ciertos Webs en
los que los colores estn muy cuidados.
El navegador Netscape permite tambin usar el atributo
BORDERCOLOR en la etiqueta FRAMESET, en este caso el valor
que demos a este atributo afectar a todos los frames dentro de ese
frameset. De esta manera podramos habernos evitado escribir
BORDERCOLOR="#FF0000" tres veces en el ejemplo anterior. Sin
embargo debemos tener en cuenta que esta posibilidad slo la

ofrece Netscape Navigator y no Explorer ni otro navegador. Adems

tampoco ha sido aceptada por el estndar HTML 4.0.
Como quitar el borde
Muchos diseadores de Webs que haban sido detractores de los
frames cambiaron su opinin sobre ellos una vez se ofreci la
posibilidad de quitar los bordes de estos. De esta forma se puede
crear la ilusin de que existe un slo frame (o una pgina sin
frames), mientras aprovechamos las posibilidades para mantener
siempre visibles ciertas partes de la pgina.
La etiqueta FRAME tiene un atributo que puede ser usado para
quitar los bordes de los frames: FRAMEBORDER. Este atributo
puede tomar dos valores: "1" y "0" que significan mostrar los bordes
y ocultarlos respectivamente. El valor por defecto es mostrar los
bordes (FRAMEBORDER="1") y si queremos que estos
desaparezcan debemos escribir explcitamente:
<FRAME FRAMEBORDER="0">
Al igual que antes se pueden producir conflictos si un borde es
compartido por dos frames uno de los cuales indica
FRAMEBORDER="0" y el otro FRAMEBORDER="1". La decisin
que tome el navegador en esta situacin es impredecible y por tanto
debe ser evitada en la medida de lo posible.
Aunque no ha sido aceptado por el estndar HTML 4.0, es
importante hacer notar que tanto Netscape como Explorer admiten
el uso del atributo FRAMEBORDER en la etiqueta FRAMESET. De
esta forma podemos conseguir quitar todos los bordes de una vez
poniendo FRAMEBORDER="0" en la primera etiqueta FRAMESET
en lugar de repetirla para cada uno de las apariciones de FRAME.
El atributo FRAMEBORDER surgi como extensin al estndar
de HTML. Inicialmente los valores vlidos eran yes y no. Sin
embargo HTML 4.0 introdujo el soporte de frames en el estndar
y los valores aceptados de FRAMEBORDER son 1 y 0. La
conclusin es que aunque en las pginas existentes podamos
encontrarnos cualquier combinacin de los valores anteriores, en
las pginas nuevas deberamos usar slo los valores numricos
estndar.
Figura 171. Usando FRAMEBORDER="0" ocultamos los bordes
de los frames con lo que se consigue una gran mejora en la
apariencia.

En la mayora de las ocasiones quitando el borde de los frames se

consigue una apariencia muy mejorada de nuestras pginas. Para
conseguir este efecto en las pginas creadas en el ejemplo anterior
slo tenemos que cambiar ligeramente el cdigo para incluir el
atributo FRAMEBORDER="0":
<FRAMESET COLS="150,*">
<FRAME SRC="frame1.htm" FRAMEBORDER="0">
<FRAMESET ROWS="100,*">
<FRAME SRC="frame21.htm" FRAMEBORDER="0">
<FRAME SRC="frame22.htm" FRAMEBORDER="0">
</FRAMESET>
</FRAMESET>
Con este cdigo obtendramos el resultado de la figura 8.21 en la
que no se distinguen los bordes de los frames y por lo tanto no se
pueden redimensionar. Sin embargo si hacemos la ventana del
navegador ms pequea aparecern en cada uno de los frames
unas barras de desplazamiento que delatarn su presencia, como
vemos en la figura 8.22.
Figura 8.22. An usando el atributo FRAMEBORDER si
hacemos la ventana del navegador pequea aparecern barras
de desplazamiento en cada uno de los frames.

Grosor del borde

Una de las ltimas extensiones de Netscape Navigator relacionadas
con los frames es el atributo BORDER. Con l podemos indicar el
grosor del borde que separa los frames asignndole un valor en
pixeles. La forma de usar este atributo es:
<FRAMEBORDER BORDER="TamaoBordeEnPixeles">
...
</FRAMEBORDER>
Si existen varias etiquetas FRAMEBORDER en una misma pgina
(es decir si las hemos anidado) podemos usar el atributo BORDER
en cualquiera de ellas, pero es conveniente usarla una nica vez.
Vamos a usarla con nuestro ejemplo para crear un borde grueso
entre las dos divisiones del segundo de los FRAMESETS. Para ello
usamos el cdigo:
<FRAMESET COLS="150,*">
<FRAME SRC="frame1.htm">
<FRAMESET ROWS="100,*" BORDER="20">
<FRAME SRC="frame21.htm">
<FRAME SRC="frame22.htm">
</FRAMESET>
</FRAMESET>
Con lo que obtenemos el resultado de la figura 8.23.
Figura 8.23. Con el atributo BORDER podemos cambiar el
grosor de los bordes. En este caso el borde horizontal tiene un
grosor de 20 pixeles.

55. Valores especiales del atributo TARGET

Anterior | Inicio | Siguiente
Ya conocemos todo lo que necesitamos sobre los frames, pero
antes de empezar la siguiente prctica es importante conocer una
serie de valores de TARGET con significado especial.
Como hemos visto, el atributo TARGET nos permite mostrar el
resultado de un enlace en el frame que queramos indicando el
nombre de dicho frame. Existen, adems, ciertos valores que puede
tomar este atributo que tienen un significado especial:
TARGET="_blank"
Fuerza que el documento referenciado por el enlace sea mostrado
en una nueva ventana del navegador.
TARGET="_self"
Usando este valor el documento enlazado ser mostrado en el
mismo frame o ventana donde est el enlace. Este valor es
especialmente til cuando se ha usado la etiqueta BASE para
especificar un frame destino por defecto distinto del actual.
TARGET="_parent"
Este valor provoca que el documento sea mostrado en el
FRAMESET padre del frame actual.
TARGET="_top"
Fuerza a que el enlace sea mostrado usando todo el espacio de la
ventana del navegador destruyendo toda estructura deframes. Este
valor debe ser usado siempre que creemos un enlace a una pgina
externa a nuestro sitio web.

En la figura 8.24 podemos ver una representacin del significado de

cada uno de estos valores que nos ayudar a resolver las dudas
que tengamos sobre ellos.
Figura 8.24. Representacin de los cuatro valores especiales
del atributo TARGET: _self, _parent, _topy _blank.

Ejercicio con TARGET

A continuacin es aconsejable realizar algunas prcticas para
habituarse al uso de estos valores. Cree una pgina sencilla de
prueba:
<HTML>
<HEAD></HEAD>
<BODY>
<H1>Pgina de prueba</H1>
</BODY>
</HTML>
Gurdela con el nombre prueba.htm. A continuacin usaremos el
ejemplo de pgina con 3 frames creado anteriormente. A partir del
archivo extra/ejem18/frame22.htm> edtelo, incluya el siguiente
cdigo en l y gurdelo en el mismo directorio que prueba.htm:
<A HREF="prueba.htm" TARGET="_self">
Enlace a la pgina de prueba
</A>
Para comprobar el efecto que se ha conseguido hay que abrir con el
navegador la pgina index.htm, que era la que contena los

framesets y pulsar sobre el enlace. La pgina de prueba sustituir al

frame donde estaba el enlace.
A continuacin editamos de nuevo el archivo sustituyendo
TARGET="_self" por TARGET="_parent" y volvemos a probar el
enlace en el navegador. Seguidamente probamos los otros dos
valores especiales. Este es un buen momento tambin para
practicar usando los nombres de los frames como valor del atributo
TARGET.
56. Practica 5: Web de Los Alpes con frames
Anterior | Inicio | Siguiente
El objetivo de nuestra quinta prctica consistir en realizar una
versin con frames del sitio Web de la agencia de viajes Los Alpes
que creamos en la prctica 4 (figura 8.25). Como es nuestro primer
gran proyecto con frames nos limitaremos a la divisin de la
ventana del navegador en dos frames fila evitando as las
dificultades del anidamiento de frames. Nuestra recomendacin
para el lector avanzado es que realice la prctica tal y como aqu se
expone y una vez completada con xito intente mejorarla
introduciendo un tercer frame. Este tercer frame puede servir por
ejemplo para mantener siempre visible los botones de las pginas
mes.htm y medida.htm. Para ello aconsejamos crear una divisin en
dos columnas reservando la izquierda para los botones y usando la
derecha para mostrar el contenido principal.
Figura 175. Pgina Web de Los Alpes creada en la prctica 4 de
este curso. Ahora la modificaremos para crear una versin con
frames.

Documento de definicin de frames

Volvamos a la versin de dos frames. El frame superior (banner) lo
usaremos para mantener siempre visible el logo de Los Alpes junto
con los botones que nos llevan a las distintas secciones de la
pgina. En el frame inferior (principal) iremos mostrando cada una
de las pginas de las que se compone el sitio Web. Estas debern
ser modificadas ya que el logo y los botones ya no deben
mostrarse. En su momento veremos que cambios son necesarios.
Por ahora empezaremos con el documento de definicin de frames.
Este ser ahora el archivo inicial de nuestro sitio Web por lo que
debe llamarse index.htm. El documento HTML con el contenido
principal deber ser renombrado. En esta ocasin hemos elegido
darle el nombre main.htm.
Debemos dividir la ventana en dos filas. La fila superior debe tener
una altura mnima de 163 pixeles para que quepan las imgenes
que queremos incluir. La fila inferior ocupar el resto del espacio. El
cdigo que define esta estructura es por tanto:
<FRAMESET ROWS="163,*">
... contenido frames ...
</FRAMESET>
Que nos divide la ventana en dos tal y como vemos en la figura
8.26.
Figura 176. El frame superior ser de 163 pixeles, mientras que
el inferior ocupar el resto del espacio de la ventana del
navegador.

El contenido del primero de los frames ser el archivo banner.htm.

El contenido del segundo ser el archivo main.htm.
Adems de insertar el contenido de los frames debemos incluir un
cdigo alternativo para los navegadores que no soporten frames en
el que mostraremos un texto acompaado de un enlace a una
versin de las pginas sin frames. Para crear esta segunda versin
creamos un directorio de nombre noframes y copiamos a l todos
los documentos de la prctica 4. Con todo esto el cdigo completo
queda:
<HTML>
<HEAD>
<TITLE>Agencia de viajes LOS ALPES</TITLE>
</HEAD>
<FRAMESET ROWS="163,*">
<FRAME
SRC="banner.htm"
NAME="banner"
MARGINWIDHT="0"
MARGINHEIGHT="0">
<FRAME SRC="main.htm" NAME="principal">
</FRAMESET>
<NOFRAMES>

<BODY>
Esta pgina tiene frames y su navegador no los
soporta. Por favor, visite nuestras pginas especialmente
preparadas para navegadores
<A HREF="noframes/index.htm">sin frames</A>.
</BODY>
</NOFRAMES>
</HTML>
Un aspecto que es necesario comentar de este cdigo es que
hemos usado los atributos MARGINWIDTH y MARGINHEIGHT
dndoles el valor cero en el frame superior. Esta es una prctica
muy habitual en los frames que contengan imgenes ya al eliminar
los mrgenes podremos reducir el tamao del frame.
En un captulo anterior aprendimos a usar la etiqueta META, para
cargar automticamente otra pgina (o refrescar la misma)
pasados unos segundos. Para ello debamos incluir en la
cabecera del documento HTML el siguiente cdigo:
<META
HTTP-EQUIV="refresh"
CONTENT="5;URL=otrapagina.htm">
Podemos usar esta tcnica para redirigir a los usuarios de
navegadores sin soporte para frames a otras pginas que no los
tengan pasados 5 segundos.
El frame Banner
El contenido de este frame debe estar en un archivo que hemos
decidido llamar banner.htm, y el siguiente paso en nuestro proyecto
ser escribir su cdigo. Para ello no tenemos ms que copiar las
primeras lneas del archivo mes.htm (en realidad vale cualquiera
menos main.htm). En estas primeras lneas se inclua el cdigo para
insertar el logo de Los Alpes y los botones que nos dirigan a las
distintas secciones del sitio Web. Nuestro objetivo ser que todo
ello sea mostrado en este frame para que permanezca siempre
visible y se muestre como en la figura 8.27 independientemente del
contenido del frame inferior.
Figura 177. El contenido de banner.htm, el logo y encabezado
de Los Alpes as como los botones de navegacin, sern
mostrados en el frame superior.

Este es el momento de tener en cuenta un detalle importante de la

creacin de toda pgina con frames. En este documento hay una
serie de enlaces (los botones) y debemos elegir cual ser el destino
donde se mostrar las pginas a las que nos conducen dichos
enlaces. Si no especificamos ningn destino cuando pulsemos, por
ejemplo, sobre el botn OFERTAS, el documento mes.htm sustituir
a banner.htm en el frame superior. Esto no es lo que queremos ya
que precisamente el objetivo de este frame era mantenerse siempre
visible. Queda claro por tanto que el mes.htm debe mostrarse en el
frame principal. Ya sabemos como hacerlo, no hay ms que usar el
atributo TARGET en la etiqueta que defina el enlace:
<A HREF="mes.htm" TARGET="principal">
<IMG SRC="img/boton2.jpg" WIDTH=136 HEIGHT=48
BORDER=0 ALT="Ofertas del Mes">
</A>
El siguiente paso sera aadir el atributo TARGET en el resto de
enlaces de banner.htm ya que todos ellos deben mostrar el
resultado en el frame principal (figura 8.28). Sin embargo, si
recordamos, en estos casos podamos usar la etiqueta BASE en la
cabecera del documento para indicar cual es el frame destino de
todos los enlaces del documento. El cdigo que debe emplearse es:
<BASE TARGET=principal">

Figura 178. Todos los botones tienen como destino el frame

principal. Por tanto es conveniente usar la etiqueta BASE con
el atributo TARGET=principal.

Es importante recordar que la etiqueta BASE deba incluirse en la

cabecera del documento, entre las instrucciones <<HEAD>> y
</</HEAD>>.
El cdigo completo del archivo banner.htm es:
<HTML>
<HEAD>
<TITLE>LOS ALPES - Encabezado</TITLE>
<BASE TARGET="principal">
</HEAD>
<BODY LINK="#FED354" VLINK="#EDB301" ALINK="#FFFF00"
BGCOLOR="#335142" TEXT="#71AC84"
BACKGROUND="img/tratilea.jpg">
<A NAME="arriba"></A>
<CENTER>
<TABLE ALIGN="center" border="0">
<TR>
<TD><IMG SRC="img/logo.gif" WIDTH=90 HEIGHT=99
BORDER=0
ALT="[LOGO]"></TD>
<TD><IMG SRC="img/losalpes.gif" WIDTH=440

HEIGHT=99 BORDER=0 ALT="LOS ALPES - Agencia de

Viajes"></TD>
</TR>
<TR>
<TD COLSPAN="2">
<A HREF="main.htm"><IMG SRC="img/boton0.jpg"
WIDTH=110 HEIGHT=48 BORDER=0 ALT="Pgina
principal"></A>
<A HREF="medida.htm"><IMG SRC="img/boton1.jpg"
WIDTH=136 HEIGHT=48 BORDER=0 ALT="Viajes a su
medida"></A>
<A HREF="mes.htm"><IMG SRC="img/boton2.jpg"
WIDTH=136 HEIGHT=48 BORDER=0 ALT="Ofertas del
Mes"></A>
<A HREF="superofe.htm"><IMG SRC="img/boton3.jpg"
WIDTH=136 HEIGHT=48 BORDER=0 ALT="La
superOFERTA"></A></TD>
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Frame principal
El frame inferior ser nuestro frame principal, su contenido ir
cambiando cuando el visitante navegue por nuestras pginas,
mientras que el frame con el banner se mantendr siempre igual.
Este contenido ser el de los documentos mes.htm, superofe.htm,
medida.htm y main.htm. La manera de pasar de unos a otros ser
pulsar sobre los botones del frame banner.
Estas pginas ya existen y estn creadas, sin embargo todas ellas
contienen una cabecera con el ttulo y la navegacin. Estos
elementos ya no son necesarios, dado que se encuentran en el
frame superior. Por ello ser necesario editar los archivos y quitar
esa parte de cada uno. En la figura 8.29 se muestra el documento
mes.htm una vez se le ha quitado la cabecera.
Figura 179. Pgina sin cabecera, lista para ser insertada en un
frame.

ltimos retoques
El ltimo paso en la creacin del sitio Web de los Alpes en su
versin con frames consistir en dar los ltimos retoques. Suele ser
aconsejable asegurarnos que todo lo anterior funciona antes de
realizarlos.
Los retoques abarcan redimensionar los tamaos de los frames
para adaptarlo al contenido final que se ha incluido en ellos,
cambiar el fondo de algunos de ellos para que contrasten mejor,
incluir mrgenes para los prrafos, eliminar los bordes, etc.
Nosotros nos centraremos en estas dos ltimas modificaciones.
Para eliminar el borde debemos editar de nuevo el archivo
index.htm e incluir los atributos necesarios para hacer los bordes
invisibles. En un principio, y para cumplir el estndar incluimos
FRAMEBORDER="0" en las dos etiquetas FRAME que tena el
documento. Posteriormente, para asegurar compatibilidad con todos
los navegadores incluimos adems: FRAMEBORDER="0",
BORDER="0" y FRAMESPACING="0" en la etiqueta FRAMESET.
Por otro lado editaremos el archivo main.htm que contena el texto
de bienvenida al sitio Web y daremos formato a dicho prrafo
incluyendo mrgenes a la izquierda y a la derecha suyo. Para crear
los mrgenes usaremos la tcnica comentada en el captulo
dedicado a las tablas. Crearemos una de tres columnas. La
izquierda estar vaca (contendr un espacio vaco, &nbsp;) y
constituir un margen con un ancho igual al 10% de la pantalla. La
columna derecha, igualmente vaca, tendr un ancho del 5% y
constituye el margen derecho. En la columna central ir, por
supuesto el texto, y ocupar el resto del espacio.

La prctica ha terminado. El resultado final se distribuye junto con

este curso en un archivo comprimido: practica5.tgz. El resultado
final se puede apreciar en la figura 8.30.
Figura 180. Estructura de frames mostrando la pgina main.htm
en el frame central.

57. Frames flotantes

Anterior | Inicio | Siguiente
Los frames flotantes son muy parecidos a los que hemos visto hasta
ahora, siendo su principal diferencia que pueden ser insertados en
cualquier lugar de una pgina web, y su funcin ya no ser dividir la
ventana del navegador en varias partes, sino insertar en medio de
un documento HTML el contenido de otro en un rea del tamao
que indiquemos.
Los frames flotantes fueron originalmente una extensin de
Internet Explorer que posteriormente pas a formar parte de el
estndar HTML 4.0. Casi todos los navegadores usados
actualmente lo soportan con la excepcin de Netscape Navigator
4.x.
Para crear frames flotantes debemos usar la etiqueta IFRAME que
significa Inline Frame por su similitud con las imgenes inline que se
insertan en cualquier lugar de la pgina con la etiqueta IMG. La
etiqueta IFRAME es un contenedor, esto es, est formada por una
instruccin de inicio, <<IFRAME>>, donde se especifican todos las
caractersticas del frame por medio de atributos, y una instruccin
de fin, </</IFRAME>>. Entre estas dos instrucciones se puede

incluir cdigo alternativo para aquellos navegadores que no

soporten los frames flotantes. Los que si lo hagan ignorarn dicho
cdigo. Dicho esto ya podemos escribir el cdigo (de manera
general) necesario para insertar un frame flotante:
<IFRAME ...>
...Cdigo alternativo...
</IFRAME>
Este cdigo puede ser insertado en cualquier parte del cuerpo de
una pgina. Esto quiere decir que para insertar un frame flotante no
es necesaria ser una pgina especial para poder insertar frames.
Tambin es importante destacar que podemos insertar tantos
frames flotantes como queramos.
Atributos de los frames flotantes
En el cdigo anterior incluimos tres puntos suspensivos en el
interior de la instruccin <FRAME>, estos representan los atributos
que debemos usar para indicar el documento HTML donde se
encuentra el contenido que queremos insertar en el frame flotante,
el tamao de ste, el alineamiento y otras caractersticas variadas.
El atributo SRC es de uso obligatorio y toma como valor la direccin
URL, absoluta o relativa, del documento HTML que servir como
contenido. Conocido este atributo ya podemos escribir un primer
ejemplo de una pgina web con un frame flotante:
<HTML>
<HEAD>
<TITLE>Frames flotante</TITLE>
</HEAD>
<BODY>
<H2>A continuacin vemos un ejemplo de un
frame flotante:</H2>
<IFRAME SRC="doc.htm">
Tu navegador no soporta frames flotantes, para ver
el contenido ve a <A HREF="doc.htm">doc.htm</A>
</IFRAME>
</BODY>
</HTML>
A continuacin guardamos este archivo con el nombre iframe.htm,
por ejemplo, y creamos el archivo doc.htm con un cdigo HTML
sencillo (nosotros hemos incluido un poco de texto, una imagen y un

fondo azul) y visualizamos iframe.htm con Explorer obtendremos el

resultado de la figura 8.31.
Figura 181. Los frames flotantes nos permiten insertar un
documento HTML completo en una pgina Web.

Unas barras de desplazamiento delatan la presencia de un frame.

Un aspecto a destacar de esta figura es que Explorer asigna un
tamao por defecto a dicho frame en el que mostrar todo el
contenido del documento HTML que le hayamos indicado
independientemente de lo largo que este sea.
Si esta misma pgina es visualizada por un navegador sin soporte
para frames flotantes, por ejemplo Netscape Navigator 4.0, se
mostrara el cdigo que hemos introducido entre la instruccin de
inicio y la de fin, como vemos en la figura 8.32.
Figura 182. Los navegadores que no soporten frames flotantes
mostrarn el cdigo alternativo incluido entre las instrucciones
<<IFRAME>> y </</IFRAME>>

Adems del atributo SRC la etiqueta IFRAME tiene los siguientes:

NAME

Este atributo nos permitir asignarle un nombre al frame de manera

que podamos referirnos a l por ejemplo para usarle como destino
de un enlace usando el atributo TARGET.
WIDTH y HEIGTH
En la figura 8.30 hemos visto que Internet Explorer asignaba un
tamao por defecto al frame flotante. Usando estos dos atributos
podremos indicar la anchura y altura respectivamente que no
queramos. El valor dado ser interpretado como un nmero en
pixeles. Si en el cdigo usado para obtener dicha figura aadimos
un tamao lo suficientemente grande desaparecer la barra de
desplazamiento.
FRAMEBORDER
Este atributo funciona de igual manera que en los frames normales:
sirve
para
quitar
y
poner
los
bordes.
Escribiendo
FRAMBORDER="0" en el ejemplo realizado anteriormente
obtenemos el resultado de la figura 8.33, en la que vemos que el
borde del frame ha desaparecido. Sin embargo no hemos ampliado
el tamao del frame con los atributos WIDTH y HEIGHT con lo que
el documento es ms grande que el espacio asignado y la barra de
desplazamiento sigue ah.
SCROLLING
Este atributo nos permitir quitar o mostrar la barra de
desplazamiento. Puede tomar tres valores:
value
Es el valor por defecto e indica que la barra de desplazamiento slo
ser mostrada si es necesario (es decir si el documento HTML
completo no cabe en el espacio reservado al frame)
yes
significa que las barras de desplazamiento deben mostrarse
siempre
no
indica que no se mostrarn nunca.
HSPACE y MARGINWIDTH
Al igual que ocurra con las imgenes se puede especificar un
margen alrededor del frame flotante. Con estos atributos concretos
indicaremos la distancia mnima en pixeles que debe haber entre el
frame y cualquier otro elemento que est a su derecha o izquierda
(margen horizontal). Es decir, sirve para especificar la anchura del
margen. La nica diferencia entre ambos atributos es que
MARGINWIDTH es el nombre aceptado por el estndar y HSPACE
est considerado como una extensin de Explorer.
VSPACE y MARGINHEIGHT

Con estos atributos indicaremos la altura en pixeles del margen del

frame. Al igual que antes MARGINHEIGHT es el nombre aceptado
por el estndar y VSPACE est considerado como una extensin de
Explorer.
ALIGN
Permite alinear el frame respecto a la ventana del navegador y
respecto al resto de elementos de la pgina. De nuevo, este atributo
funciona exactamente igual que con las imgenes y puede tomar
los mismos valores: left, middle, right, top y bottom.
En la figura 8.34 podemos ver un ejemplo con dos frames flotantes
uno alineado a la izquierda (ALIGN="left") y el otro a la derecha
(ALIGN="right"). En el frame izquierdo hemos incluido un margen de
100 pixeles (MARGINWIDTH=100) y en el derecho hemos quitado
la barra de desplazamiento (SCROLLING=no).
BORDER
Este atributo es una extensin de Explorer y tiene la misma funcin
que el atributo del mismo nombre de la etiqueta FRAME, indicar el
grosor en pixeles del borde que delimita el frame.
BORDERCOLOR
Con este atributo podremos cambiar el color del borde. Es, al igual
que el anterior, una extensin de Explorer no aceptada por el
estndar HTML 4.0.
Figura 183. Usando FRAMBORDER=0 podemos eliminar el
borde del frame. Sin embargo si el contenido no cabe en frame
la barra de desplazamiento s se mostrar.

Figura 184. Con los atributos ALIGN, MARGINWIDTH y SCROLL

podremos controlar las diversas caractersticas de los frames
flotantes.

Con esto terminamos el aprendizaje del uso de frames en pginas

web. En el prximo captulo del curso nos adentraremos en el
mundo de los sonidos, vdeos y otros contenidos multimedia en el
World Wide Web.
58. Sonido vdeo y otros ficheros externos
Anterior | Inicio | Siguiente
Para enlazar un fichero multimedia externo a una pgina Web no
hay ms que crear un enlace a ese documento:
<A HREF="fichero_multimedia">
Un fichero multimedia
</A>
El siguiente paso vendr por parte del navegante que debe
seleccionar dicho enlace (esto significa pulsar sobre el texto en
Navegadores grficos, pero no olvidemos a los dems). Y qu
ocurre entonces?. Para algunos tipos de ficheros, como pueden ser
imgenes, archivos de texto o, por supuesto, documentos HTML, el
propio navegador puede ser capaz de mostrar el contenido en su
misma ventana. En muchos otros casos, sin embargo, el navegador
bajar el fichero al ordenador del navegante y una vez all se lo
pasar a otro programa que sea capaz de entenderlo. Estos
programas reciben el nombre de aplicaciones auxiliares o, en
ingls, helper applications, y pueden ser configurados por el usuario
del navegador para elegir que aplicaciones deben ser usadas para
cada uno de los tipos de archivos. En la figura 10.2 podemos ver el
cuadro de dilogo de configuracin de Netscape Navigator 4.0, por
su parte las ltimas versiones de Microsoft Internet Explorerusan
directamente la configuracin de Windows para averiguar que
programa debe llamar en cada ocasin:

Figura 10.2. Netscape Navigator permite configurar en este

cuadro de dilogo las aplicaciones externas asociadas a cada
navegador.

Si un navegador no es capaz de averiguar cual es el formato de un

fichero mostrar un mensaje preguntando al usuario qu debe
hacer: guardar el fichero en el disco duro, elegir un programa que
entienda el fichero o alguna otra opcin.
Una pregunta que nos podemos hacer es cmo es capaz el
navegador de reconocer que tipo de fichero es el que hemos
enlazado?. Sin duda debe hacerlo de alguna forma, porque si no,
no podra decidir a que aplicacin llamar o si debe mostrarlo el
mismo. De hecho no existe un solo mtodo, sino dos. Por un lado la
extensin del fichero: Las pginas HTML deben tener la extensin
.html o .htm, las imgenes GIF deben tener la extensin .gif, los
ficheros PKZIP deben tener terminacin .zip, etc. Cuando el
navegador lee ficheros directamente del disco duro usa la extensin
para determinar de que tipo de fichero se trata.
Cuando el navegador obtiene una pgina de un servidor Web entra
en funcionamiento el segundo de los mtodos, que consiste en
averiguar el tipo de fichero MIME asociado al archivo o contenttype. Este es un cdigo que usan los servidores Web para indicar
que tipo de fichero estn mandando. Algunos ejemplos de contenttype son: text/plain (texto normal), text/html (documento HTML),

image/gif (imagen GIF), vdeo/mpeg (vdeo con formato MPEG) o

application/msword (Documento de Microsoft Word). Tanto el
navegador como el servidor Web tienen tablas que relacionan las
extensiones con el tipo de fichero (content-type) asociado. Y el
navegador tiene un dato adicional: la aplicacin que debe usar con
ese tipo de fichero.
Ficheros de sonido
Para incluir un enlace a un fichero de sonido desde una de nuestras
pginas Web dicho fichero debe estar un formato apropiado para
contener sonido, tal y como ocurra con las imgenes. Al igual que
con estas existen multitud de formatos distintos y ser nuestra labor
elegir el ms apropiado. A continuacin haremos un repaso de los
formatos ms importantes.
El formato AU creado por Sun Microsystems es el nico que es
soportado por todas las diferentes plataformas de Internet, entre
ellas Windows, UNIX y Macintosh. Este formato permite varios tipos
de codificacin de sonido, aunque el ms popular es la codificacin
de 8 bits conocida como u-law por lo que en ocasiones el formato
AU se llama directamente formato u-law. Los ficheros AU tienen una
calidad aceptable, pero sin ser demasiado buena debido a la
codificacin de 8 bits que provoca un efecto parecido al del sonido
telefnico.
Para conseguir mayor calidad de sonido pueden usarse los
formatos WAVE (.wav) para Windows, AIFF para Macintosh o
MPEG sound. El principal problema de los dos primeros es que slo
funcionan en sus respectivas plataformas y en ninguna otra. El
formato MPEG sin estar tan extendido como AU si est presente en
multitud de plataformas y puede usarse con mayor libertad.
Por ltimo nos encontramos con el formato Real Audio que ha sido
desarrollado especficamente para reproducir ficheros de sonido en
Internet y en el World Wide Web. En la figura 10.3 podemos ver la
pgina Web creada por RealAudio que ofrece gran cantidad de
informacin as como el software necesario para crear y escuchar
este tipo de sonido:
Figura 10.3. RealAudio es un formato de sonido
especificamente creado para la red el software necesario para
su reproduccin puede ser obtenido a travs de su Web.

La gran ventaja que ofrecen frente al resto de formatos es que,

mientras que en estos es necesario esperar a que llegue todo el
fichero para poder escucharlo, Real Audio soporta una tcnica
conocida como streaming que nos permitir escuchar el sonido
segn va llegando y slo una pequea pausa ocurre al principio
antes de empezar a orse. El nico inconveniente que tiene este
formato consiste en que es necesario instalar un servidor especial
para poder enviar este tipo de ficheros y enlazarlos a la pgina
requiere una tcnica ligeramente distinta que veremos un poco ms
adelante.
Para que un navegador reconozca el tipo de sonido es necesario
que el fichero tenga la extensin adecuada. En la tabla 10.1
podemos ver la extensin asociada a cada uno de los distintos
formatos vistos hasta ahora.
Figura tabla 10.1.

Una vez tenemos el fichero de sonido con el formato adecuado no

tenemos ms que escribir el cdigo necesario para incluirlo en la
pgina Web. Por ejemplo:
<A HFER="sinfonia_5.au">
quinta sinfona

</A>
En este caso hemos usado el formato AU por ser el ms extendido.
Si queremos mayor calidad debemos usar alguno de los otros tres
formatos, pero en ese caso es recomendable ofrecer no slo un
formato sino varios, a travs de diferentes enlaces para
asegurarnos que todo el mundo tiene acceso al sonido si as lo
desea.
Ficheros de vdeo
Al igual que los ficheros de sonido, existen multitud de formatos
para codificar vdeo. El estndar actual en el World Wide Web es
MPEG vdeo, que ser entendido en multitud de plataformas. Este
formato, al igual que MPEG audio, ha sido creado por una
organizacin de expertos en vdeo y sonido que tienen presencia en
Internet en la direccin www.mpeg.org (ver figura 10.4).
Figura 10.4. La organizacin MPEG es la creadora de este
estndar que permite la codificacin de audio y vdeo de gran
calidad en archivos de pequeo tamao.

Otras opciones son el formato AVI creado por Microsoft para su

sistema Windows y que necesita de la aplicacin Vdeo For
Windows para ser visto o QuickTime, creado por Apple y que
ltimamente se ha estado extendiendo por el Web gracias a la
expansin de diversos visualizadores en diversas plataformas. En la
tabla 10.2 vemos las extensiones asociadas a cada uno de estos
tres archivos:
Figura tabla 10.2.

Al igual que ocurra con las imgenes el ltimo paso consistir en

insertar el cdigo HTML:
Recin llegado de EEUU
<A HREF="show1.mpeg">
unas escenas
</A>
de la ltima pelcula de George Lucas.
Un truco usado en ocasiones y con el que se consigue un
interesante efecto consiste en convertir algn fotograma del vdeo a
imagen y hacer que esta misma sea un enlace al vdeo, en este
caso no debemos olvidar incluir en una descripcin del vdeo en la
etiqueta ALT:
<A HREF="show1.mpeg">
<IMG SRC="foto02.gif"
ALT="Escenas de la ltima pelcula de George
Lucas">
</A>
Otros tipos de archivos
Los enlaces a archivos externos no estn limitados a imgenes y
vdeo. Actualmente el World Wide Web est plagada de multitud de
otros formatos entre los que destacan los archivos comprimidos ZIP
(.zip o .gz [UNIX]), los ejecutables (.exe) y archivos PDF (Portable
Document Format) que pueden ser vistos por Acrobat Reader que
se distribuye gratuitamente. Tambin se encuentran a menudo
imgenes en multitud de formatos como Corel Draw (.cdr), Adobe
Freehand o Adobe Photoshop (.psd) entre otros.
Cuando un enlace a uno de estos ficheros sea pulsado el
navegador nos permitir guardarlo en el disco duro o bien abrirlo
usando una aplicacin externa si es un archivo de tipo conocido. En
la figura 10.5 vemos un caso en el que hemos pulsado sobre un
enlace a un archivo con formato ZIP e Internet Explorer nos
preguna si deseamos abrirlo o guardarlo en el disco duro:

Figura 10.5. Al pulsar sobre un enlace a un archvo que no

puede mostrar l mismo, Internet Explorer muestra este cuadro
de dilogo preguntando al usuario que quiere hacer.

Netscape Navigator acta de forma prcticamente idntica, en la

figura 10.6 vemos el cuadro de dilogo que muestra la versin 4.0
en ingls:
Figura 10.6. Cuadro de dilogo para archivos externos
mostrado por Netscape Navigator. Si elejimos open la
aplicacin externa asociada ser ejecutada.

59. Multimedia Inline (I)

 Anterior | Inicio | Siguiente

Hasta hace muy poco el nico sistema disponible en el WWW para
incluir contenido multimedia era usar archivos externos como
acabamos de ver. Sin embargo gracias a las iniciativas de Microsoft
y Netscape estn apareciendo nuevas etiquetas y atributos del
lenguaje HTML junto con nuevas tcnicas que permiten al diseador
de pginas Web incluir dicho contenido en una pgina.
Vdeo inline
Uno de los primeros mecanismos fue introducido en Microsoft
Internet Explorer. Este navegador incluye extensiones a la etiqueta
IMG que permiten insertar vdeo con formato AVI. Estas extensiones
han sido adoptadas tambin por el navegador Opera, pero por
ningn otro, y tampoco por el estndar HTML 4.0 pero al ser
ignorado por los navegadores que no lo soportan no impide la
legibilidad de la pgina para los usuarios de estos.
La extensin en la que se basa la inclusin de vdeo inline es el
atributo DYNSRC. Este atributo se usa de manera muy similar al ya
conocido SRC, pero ahora el valor deber ser la direccin de un
vdeo en formato AVI en lugar de una imagen. Una de las grandes
ventajas de este sistema para insertar vdeo consiste en la
posibilidad (de hecho es obligatorio) de usar simultneamente los
dos atributos mencionados, SRC y DYNSRC, de manera que si el
navegador soporta la inclusin de vdeo en la pgina mostrar el
vdeo y en caso contrario mostrar la imagen. Veamos un ejemplo:
<IMG DYNSRC="baile.avi"
SRC="baile.gif"
ALT="[Un baile]">
Tambin es posible usar el resto de atributos de la etiqueta IMG
como ALIGN, VSPACE, HSPACE, WIDTH, HEIGHT, etc. Pero
adems de estos, Microsoft introdujo otros nuevos como
acompaamiento del atributo DYNSRC y que nos permitirn tener
un mayor control sobre el vdeo, estos son:
CONTROLS: Este es un atributo que no toma ningn valor. Si es
incluido, muestra el vdeo AVI junto con una serie de controles para
que el usuario pueda parar y reproducir el vdeo a su antojo.
LOOP: Toma como valor un nmero que determina el nmero de
veces que el vdeo ser mostrado. Por ejemplo con LOOP="5" el
vdeo volver a reproducirse desde el principio 5 veces y luego
parar. Con un valor LOOP= "-1" el vdeo ser repetido infinitas
veces.

START: Determina cuando debe empezar a reproducirse el vdeo.

Puede tomar dos valores: con START="FILEOPEN" (valor por
defecto) el vdeo se reproducir tan pronto como la pgina y el
fichero de vdeo lleguen al ordenador; con START="MOUSEOVER"
el vdeo no empezar a reproducirse hasta que el usuario site el
cursor sobre l.
LOOPDELAY: [Solo Internet Explorer 4.0] Con este atributo
podemos especificar el retardo en milisegundos que el navegador
esperar tras acabar antes de empezar a reproducir el vdeo de
nuevo.
El atributo LOWSRC
Este atributo es una extensin de Netscape a la etiqueta IMG. Su
funcin es ofrecer la posibilidad al programador de especificar una
segunda imagen, junto con la indicada con SRC, que sirva de
previsualizacin de la imagen final. Esta previsualizacin suele ser
la misma imagen pero con peor calidad, por ejemplo en formato
JPEG con alto grado de compresin, y de mucho menor tamao. De
esta forma cargar mucho antes y el navegante podr hacerse una
idea de cmo ser la imagen completa antes de que esta llegue:
<IMG SRC="alta_calidad.gif"
LOWSRC="baja_calidad.gif">
Los navegadores que no entiendan esta etiqueta simplemente la
ignorarn, y no mostrarn nada hasta que la imagen de alta calidad
llegue, exactamente igual que si no hubiramos usado LOWSRC.
Por tanto podemos concluir que este atributo no causa ningn
prejuicio para los usuarios de dichos navegadores. LOWSRC no ha
sido aceptado por el estndar HTML 4.0.
Animaciones usando LOWSRC
Pronto los diseadores de pginas Web se dieron cuenta que
podan usar el atributo LOWSRC para algo ms que para mostrar
una previsualizacin de la imagen. Existen varios Webs que
destacan por su excepcional diseo que se sirven de este atributo
para crear una sencilla animacin formada nicamente por dos
imgenes. Un excelente ejemplo de este efecto puede ser visto en
la pgina creada por Josh Feldman que encontramos en la
direccin:
www.spectacle.com/zoloft/initiation/letter.html
En esta pgina se usa el atributo LOWSRC para mostrar una
imagen de un sobre cerrado y SRC para mostrar ese mismo sobre
de fondo pero en primera instancia la carta ya abierta. En la figura
10.7 podemos ver la pgina tal y como aparece inicialmente con el

sobre cerrado (imagen LOWSRC) y la carta final abierta que es

mostrada pocos segundos despus.
Figura 10.7. Usando el atributo LOWSRC se pueden crear
animaciones sencillas pero impactantes como es el caso del
web de Spectacle.

Sonidos Inline
Microsoft Internet Explorer tambin ha introducido una nueva
etiqueta para posibilitar la inclusin de sonido en las pginas Web.
Este sonido ser cargado junto con la pgina y empezar a ser
tocado sin requerir ninguna accin por parte del usuario. Para incluir
un sonido de fondo como ste debemos usar la etiqueta
BGSOUND. Veamos un ejemplo:
<BGSOUND SRC="sinfonia_5.au">
Esta etiqueta no producir ningn efecto visual en la pgina,
simplemente si empezar a reproducirse el sonido de fondo. Los

usuarios de otros navegadores no sern perjudicados por la

inclusin de este atributo, simplemente no podrn or el sonido.
El resto de atributos son:
LOOP: Al igual que con el vdeo este atributo permite controlar el
nmero de veces que el fichero de sonido ser reproducido. Si
usamos LOOP="-1" se reproducir repetidamente hasta que el
navegante abandone la pgina.
BALANCE: (Slo Internet Explorer 4.0 o posterior) Este atributo
permitir al programador Web cambiar el balance de sonidos
estreo. Puede tomar un valor entre -10000 y 10000. El efecto de
cada uno de los dos extremos depender de la configuracin del
navegante, pero en cualquier caso ambos significarn que el sonido
se oir nicamente por uno de los dos altavoces. Con los valores
intermedios controlamos el balance en uno u otro.
TITLE: (Slo Internet Explorer 4.0 o posterior). Con este atributo
damos un ttulo al sonido. Este ttulo es solo informativo y no se
mostrar ningn indicativo visual.
VOLUME: (Slo Internet Explorer 4.0 o posterior). El volumen con el
que se reproducir el sonido puede ser controlado gracias a este
atributo que puede tomar un valor entre -10000 y 0. Si usamos
VOLUME="0" (mximo volumen) el sonido se reproducir al 100%
de la configuracin actual del usuario. Usando un valor menor el
volumen bajar, no hay ninguna forma usando HTML de aumentar
el volumen por encima de la configuracin elegida en su ordenador
por cada persona.
Es muy importante no poner un sonido que pueda resultar
molesto a los visitantes de nuestras pginas, ya que con ello
conseguiremos que las abandonen rpidamente para dejar de
orlo.
Microsoft Internet Explorer soporta tres formatos de sonido inline:
AU: El formato de Sun que usa la codificacin u-law.
WAV: Muestras de sonido especficas para Windows.
MIDI: Estos ficheros deben tener la extensin .mid.
Hay que tener mucho cuidado a la hora de incluir sonidos en
nuestras pginas, ya que en general este tipo de ficheros son de
gran tamao y pueden incrementar enormemente el tiempo de
carga. Por otro lado no es recomendable que sea reproducido ms
de una vez, ya que la repeticin cansar a los visitantes.
En el directorio Sonido hemos incluido un ejemplo (sonido1.htm)
que usa la etiqueta BGSOUND para reproducir como sonido de
fondo un archivo en formato MIDI.
Al igual que ocurra con las extensiones para vdeo de Microsoft la
etiqueta BGSOUND no es soportada por ningn otro navegador y

tampoco ha sido aceptado por el estndar HTML 4.0. Sin embargo

existe otro mtodo que veremos un poco ms adelante mucho ms
extendido basado en PLUG-INs y en una etiqueta llamada EMBED.
60. Multimedia Inline (I)
Anterior | Inicio | Siguiente
Marquesinas animadas
Cuando de HTML se trata, una marquesina animada consiste en
una lnea de texto que se desplaza por la pantalla de izquierda a
derecha, de derecha a izquierda o en ambas direcciones
alternativamente. La etiqueta especfica de Internet Explorer
MARQUEE nos permitir crear este tipo de marquesina con gran
facilidad y rapidez. No sern necesarias imgenes ni vdeos. Tal y
como ocurra con las dos extensiones que acabamos de ver, la
etiqueta MARQUEE sigue siendo especfica de Explorer y no es
soportada por ningn otro navegador ni ha sido aceptada por el
estndar HTML 4.0
El funcionamiento de esta etiqueta es muy sencillo, consta de una
instruccin de inicio y otra de fin, entre ellas debemos escribir el
texto que queremos que se desplace. Por ejemplo:
<MARQUEE>
Me estoy moviendo
</MARQUEE>
Si visualizamos este cdigo con Internet Explorerveremos aparecer
el texto "Me estoy moviendo" por la derecha de la pantalla y
desplazarse hacia la izquierda hasta llegar al borde izquierdo de la
pantalla. Entonces volvera a aparecer de nuevo por la derecha y
as indefinidamente. Es difcil plasmar con una figura el movimiento
de la marquesina, por esta razn hemos incluido todos los ejemplos
de esta seccin en el en el archivo marquee.htm. Adems en la
figura 10.8 hemos capturado una pgina con este cdigo en siete
instantes de tiempo consecutivos para que el lector pueda hacerse
una idea del funcionamiento de la marquesina animada:
Figura 10.8. La marquesina animada muestra un texto que va
movindose de derecha a izquierda en la ventana del
navegador. En esta figura vemos 7 momentos consecutivos.

El texto de una marquesina se sita siempre en una nueva lnea, y

el es mostrado con las mismas caractersticas que sera cualquier
texto normal de la pgina, por ello podemos usar las etiquetas para
formatear texto que conocemos para cambiar el formato del texto de
una marquesina. Por ejemplo para conseguir un encabezado de
tamao 1 movindose podramos usar:
<H1>
<MARQUEE>
Me estoy moviendo
</MARQUEE>
</H1>
Igualmente podemos cambiar el color o el tipo de fuente del texto
encerrando la marquesina con la etiqueta FONT:
<FONT COLOR="#FF0000"
FACE="arial"
SIZE="4">
<MARQUEE>
Me estoy moviendo
</MARQUEE>
</FONT>
Internet Explorer 3.0 ignora todo el cdigo HTML existente entre
la instruccin de inicio, <MARQUEE>, y la instruccin de fin,
</MARQUEE>. Sin embargo en Internet Explorer 4.0 esta poltica

ha cambiado y es posible usar las etiquetas formateadoras de

texto o saltos de lnea en su interior. Por esta razn debemos
tener en cuenta que si usamos estas nuevas posibilidades los
usuarios de Internet Explorer 3.0 (que son muchos) no podrn
apreciar el formato del texto.
Cmo cambiar la apariencia
Adems de estos mtodos la propia etiqueta MARQUEE consta de
una serie de atributos que nos permitirn cambiar su apariencia:
BGCOLOR: Especificando un color en cdigo RGB (#RRGGBB) o
por nombre (blue, red, etc.) cambiaremos el color de fondo de la
marquesina.
HEIGHT y WIDTH: Determinan la altura y anchura respectivamente
de la marquesina. Ambos atributos pueden tomar un valor en
pixeles o bien como porcentaje de la ventana del navegador. Por
ejemplo HEIGHT="50%" provocar que la marquesina tenga una
altura mitad de la de la ventana del navegador. Estos atributos no
afectan al tamao del texto.
HSPACE y VSPACE: Determinan los mrgenes entre los bordes de
la marquesina y el texto u otros elementos de la pgina. HSPACE
determina el margen a cualquiera de los lados y VSPACE los
mrgenes superior e inferior.
ALIGN: Este atributo controla el alineamiento vertical del texto que
bordea la marquesina. Puede tomar cinco valores diferentes:
ALIGN="top" (arriba), ALIGN="middle" (centro), ALIGN="bottom"
(abajo), ALIGN="left" (izquierda) ALIGN="right" (derecha) que tienen
un comportamiento idntico al que tenan con las imgenes. Este
atributo no modifica la posicin del texto en el interior de la
marquesina, ya que este esta siempre en la parte superior.
Una vez vistos estos atributos nos queda por hacer un ejemplo que
los use. Nuestro objetivo ser crear una marquesina con el fondo
rojo, que ocupe una anchura mitad de la pantalla y est alineado a
la derecha. El cdigo que debemos usar es:
<H1>
<MARQUEE ALIGN="RIGHT"
BGCOLOR="#FF0000"
HEIGHT="20%"
WIDTH="50%">
Gran oferta del MES: Un Mercedes a precio de coste
</MARQUEE>
</H1>
En la figura 10.9 podemos ver el resultado obtenido:

Figura 10.9. La etiqueta MARQUEE est acompaada de

numerosos atributos que nos permiten controlar la apariencia
de la marquesina.

Para una mejor apreciacin es recomendable visualizarlo con

Internet Explorer por lo que este ejemplo est incluido en el
directorio Ejemplo4 (ejemplo 4).
Cmo cambiar el comportamiento
Como hemos comentado antes, cuando creamos una marquesina el
texto se desplaza de derecha a izquierda desapareciendo
totalmente antes de volver a mostrarse por la derecha. Este efecto
contina indefinidamente lo suficientemente despacio para
posibilitar su lectura. Este comportamiento, direccin, nmero de
repeticiones y velocidad de movimiento puede ser modificado con 5
atributos de la etiqueta MARQUEE:
BEHAVIOR: Este atributo nos permite cambiar el comportamiento
del texto y puede tomar tres valores. BEHAVIOR="scroll" es el valor
por defecto y consiste en el efecto de desaparecer por un lado y
aparecer por el otro. Si usamos BEHAVIOR="slide" el texto tiene un
comportamiento similar pero para en cuanto llega al borde derecho.
La ltima opcin es BEHAVIOR="alternate", en este caso el texto
aparecer igualmente por la derecha, pero una vez llegue al borde
izquierdo rebotar y volver hacia la derecha donde volver a
rebotar repitiendo este comportamiento indefinidamente. Los
ejemplos 5 y 6 de la pgina de ejemplos marquee.htm muestran
estas dos ltimas posibilidades.
DIRECTION: Con este atributo podemos controlar la direccin de
desplazamiento del texto cuando este es de tipo SCROLL. Puede
tomar dos valores: LEFT (izquierda) y RIGHT (derecha) siendo el
primero el valor por defecto (movimiento de derecha a izquierda).
En el ejemplo 7 del archivo antes mencionado podemos ver un
ejemplo de este atributo.
LOOP: Determina cuantas veces se repetir el desplazamiento del
texto por la pantalla. Por ejemplo con SCROLL="4" el texto se

desplazar por la pantalla nicamente 4 veces, mientras que si

usamos SCROLL="-1" o bien SCROLL="infinity" seguir
desplazndose indefinidamente.
SCROLLAMOUNT: Aunque haya sensacin de movimiento el texto
se desplaza a pequeos saltos. Este atributo determina el nmero
de pixeles que debe desplazarse el texto en cada uno de ellos.
Junto con el siguiente atributo podemos controlar la velocidad del
movimiento. Si ponemos un valor alto el texto se mover ms
rpidamente pero con saltos ms bruscos (ejemplos 8 y 9).
SCOLLDELAY: Determina el tiempo de espera entre cada uno de
los saltos. Este tiempo debe estar dado en milisegundos. Valores
mayores tambin provocan mayor rapidez y brusquedad.
Experimentando con SCROLLAMOUNT y SCROLLDELAY
encontraremos la combinacin con la que satisfacemos nuestras
necesidades de velocidad y suavidad de desplazamiento (ejemplos
10 y 11).
Texto que parpadea
Junto con el navegador Navigator 1.0, Netscape introdujo una
extensin al lenguaje HTML que permite insertar texto que
parpadea. Esta extensin consiste en una nica etiqueta: BLINK. Su
funcionamiento es simple, todo el texto que introduzcamos entre la
instruccin de inicio y la instruccin de fin parpadear. Por ejemplo:
<BLINK>
Este texto parpadea
</BLINK>
En el WWW encontramos en numerosas ocasiones con esta
etiqueta siendo usada en general para llamar la atencin. El
problema de BLINK es que resalta demasiado. Como hace que el
texto parpadeante atraiga la atencin y el parpadeo es continuo (no
para en ningn momento) puede provocar distraccin y provocar
que los navegantes no se fijen en nada ms de nuestra pgina.
La gran mayora de diseadores Web desaconsejan
encarecidamente el uso esta etiqueta porque muchos navegantes lo
consideran muy molesto. De hecho en el WWW se dice
habitualmente que la etiqueta BLINK es el equivalente informtico a
rallar una pizarra con las uas.
Si lo que queremos es resaltar una frase es recomendable usar las
etiquetas de HTML pensadas para ello, aparte, si queremos
podemos usar BLINK, pero as nos estaremos asegurando que la
frase aparecer resaltada (aunque no parpadee) en todos los
navegadores.

Controles multimedia
Con Internet Explorer 4.0, Microsoft ha introducido un conjunto de
controles multimedia que permiten insertar grficos y efectos
multimedia a las pgina Web. Entre estos controles destacan:
Behaviors: Comportamientos especiales de los controles y otros
elementos de la pgina.
Effects: Aplica un filtro grfico a cualquier elemento de una pgina.
Hot Spot: Permite especificar acciones a realizar al pulsar en
diferentes zonas de la ventana del navegador.
Mixer: Mezcla varios ficheros de sonido WAV.
Path: Permite crear movimiento de objetos por un camino
establecido.
Sequencer: Facilita el control del tiempo en los eventos de nuestra
pgina.
Sprite: Sirve para crear animaciones.
Sprite Buttons: Para crear botones animados.
Structured Graphics: Permite incluir en la pgina grficos que
pueden ser cambiados de tamao y rotados por el navegante.
El uso de estos controles puede ser algo complicado y se sale fuera
de los objetivos de este curso. Microsoft ha creado una pgina
dedicada a las nuevas tecnologas de Internet Explorer 4.0, de la
cual podemos ver una muestra en la figura 10.10:
Figura 10.10. Internet Explorer 4.0 incluye una serie de nuevas
tecnologas entre las que destacan los nuevos controles
multimedia.

en la direccin:
www.microsoft.com/sitebuilder/workshop/prog/ie4/
dnde podemos encontrar amplia informacin. Para un tutorial
concreto sobre estos controles podemos acceder a:

www.microsoft.com/workshop/prog/ie4/directani/directani.htm
61. Plug-ins y objetos incrustados
Anterior | Inicio | Siguiente
Uno de los avances que han aparecido recientemente en el World
Wide Web que se han asentado con mayor fuerza son los llamados
PLUG-INs. Estos son una especie de aplicaciones auxiliares que
trabajan junto con el navegador ofrecindole nuevas caractersticas.
Por ejemplo un plug-in de Excel podra permitir que hojas de clculo
de esta aplicacin pudieran ser mostradas directamente en una
pgina Web. Otro de vdeo permitira incluir vdeo inline de
diferentes formatos a los vistos.
No debemos confundir los plug-ins con las aplicaciones auxiliares
externas de las que hemos hablado anteriormente. Su
funcionamiento es parecido, pero estas se ejecutan de manera
totalmente independiente al navegador, mientras que los plug-ins se
ejecutan con l y le aaden nuevas capacidades inline.
Netscape introdujo el concepto de plug-ins con Navigator 2.0.
Actualmente existen numerosos plug-ins de audio y vdeo
disponibles y la nueva versin de Netscape Navigator incluye
muchos de ellos que le aaden soporte de AU, AIFF, WAV, MIDI y
QuickTime .
El problema de los plug-ins es que si usas sus capacidades en una
pgina Web todos los visitantes necesitan tener un navegador que
soporta plug-ins (como Navigator o Internet Explorer) adems del
plug-in
correspondiente,
para
visualizarla
correctamente.
Actualmente la gran mayora de plug-ins han sido desarrollados
para Netscape Navigator 3.0 y 4.0 y para Internet Explorer 3.0 y 4.0.
Los plug-ins ms conocidos y usados son:
Acrobat Reader: Permite mostrar ficheros de tipo PDF (Portable
Format Document, Documento de formato portable). Ms
informacin en:
www.adobe.com/prodindex/acrobat/main.html
Shockwave: Shockwave es un plug-in creado para permitir la
reproduccin de Vdeos creados con Macromedia Director de
manera inline en una pgina Web. Macromedia Director es una
herramienta enormemente popular entre los desarrolladores
profesionales de contenido multimedia para crear presentaciones
que incluyan vdeo y sonido. Para obtener ms informacin
podemos acceder a la pgina dedicado a ello de la cual se ofrece
una muestra en la figura 10.11:
Figura 10.11. Macromedia distribuye a travs de su Web el
plug-in necesario para visualizar en un Web animaciones
creadas por su herramienta Director.

La direccin de la pgina es:

www.macromedia.com/shockwave
RealAudio y RealVideo: Aaden al navegador de reproducir audio y
vdeo en estos dos formatos especialmente diseados para el
WWW. Para ms informacin podemos acceder a la pgina:
www.realaudio.com
Junto con estos tambin es posible encontrar numerosos plug-ins
dedicados a mostrar contenido multimedia y mundos virtuales
VRML (Virtual Reality Modeling Languaje, Lenguaje de modelado de
realidad virtual).
El primer paso para usar un plug-in es crear el objeto que queremos
incluir en nuestra pgina. El proceso de creacin depende del tipo
de objeto. Para archivos de sonido y vdeo sern necesarios
programas de edicin y retoque de estos. Para objetos ms
avanzados como Acrobat o Shockwave ser necesario adquirir las
herramientas necesarias para su creacin.
Como usar los plug-ins
El siguiente paso ser insertar en nuestra pgina, usando cdigo
HTML, el objeto que queremos que sea usado por el plug-in. El
propio navegador al darse cuenta que no es capaz de mostrar ese
objeto el mismo buscar entre la lista de plug-ins que tiene
instalados y llamar a aquel que es capaz de tratar con el objeto.
Desgraciadamente si no lo encuentra mostrar un mensaje o un
icono indicativo que puede resultar molesto para el navegante.
El termino elegido para denominar a estos objetos es embedded
objects, es decir, objetos incrustados. La etiqueta HTML con la que
insertamos este tipo de objetos es EMBED. El atributo SRC nos

permitir indicar el nombre y direccin del archivo tal y como

hacamos con las imgenes. Otros atributos usados en multitud de
ocasiones son WIDTH y HEIGHT con los que podemos controlar la
anchura y altura del objeto respectivamente. Un ejemplo tpico de
insercin de un objeto para plug-in podra ser:
<EMBED SRC="pelicula.mov"
WIDTH="120"
HEIGHT="180">
Este objeto aparecer en su propia lnea y centrado en la ventana
del navegador. Adems de los tres vistos la etiqueta EMBED tiene
una serie de atributos opcionales que varan enormemente entre los
diferentes plug-ins. Todos ellos constan del nombre de un
parmetro y su valor. Por ejemplo para el plug-in de vdeo
QuickTime nos encontramos, con el parmetro LOOP="TRUE".
Para averiguar los atributos concretos deberemos leer la
documentacin concreta de cada plug-in.
Alternativas para navegadores sin soporte para PLUG-INs
Al usar PLUG-INs estamos imponiendo muchos requisitos a los
navegantes para ver correctamente nuestras pginas. Como ya
hemos mencionado antes, deben tener un navegador con soporte
para plug-ins y adems deben tener instalado el plug-in adecuado.
Si no los cumplen recibirn mensajes de error o cuadros de dilogo
que permiten obtener el plug-in necesario(el atributo
PLUGINSPAGE="url" nos permite indicar la direccin). En otros
casos simplemente vern un espacio vaco en la pgina con un
icono indicativo de error como el que podemos ver en la figura
10.12, con la consiguiente frustracin que ello conlleva para el
navegante.
Figura 10.12. Si el navegador tiene algn problema con el plugin muestra un icono y un espacio en blanco que puede
estropear la apariencia de nuestra pgina.

Los navegadores que no tengan soporte para plug-ins directamente

ignorarn la etiqueta EMBED. Para ofrecer una alternativa al objeto
incrustado se ha creado la etiqueta NOEMBED, que consta de una
instruccin de inicio y otra de fin entre las que pueden insertarse
cualquier elemento de HTML. Esta etiqueta puede ser usada con
diferentes propsitos:
Mostrar una imagen que represente el significado del objeto.
Incluir un enlace al fichero del objeto, es decir, incluirlo como fichero
externo. De esta forma el navegante podr verlo con el programa
que quiera.
Poner cualquier cdigo HTML, applet de Java o algn otro elemento
que ayude a que la presentacin de la pgina tenga sentido tambin
para navegadores sin soporte de EMBED.
Pongamos un ejemplo en el que hemos creado una animacin en la
que se van mostrando pisadas como si alguien fuese pisando por
encima de nuestra pgina. Podramos ofrecer como alternativa a la
animacin una imagen que incluya todas las pisadas y como
alternativa a la imagen una serie de asteriscos. Es decir:
<EMBED SRC="huellas.cdr"
WIDTH="640"
HEIGHT="30"
ALT="* * * * * * * *">
<NOEMBED>
<IMG SRC="huellas.gif"
WIDTH="640"
HEIGHT="30">
</NOEMBED>
Todo el cdigo entre la instruccin de inicio, <NOEMBED >, y la
instruccin de fin, </NOEMBED> , ser ignorado por los
navegadores que entiendan la etiqueta EMBED.

Sonido inline con la etiqueta EMBED

En una seccin anterior aprendimos a insertar sonido inline para el
navegador Internet Explorer usando la etiqueta BGSOUND. El
principal inconveniente de esta etiqueta radicaba en que slo los
usuarios de ese navegador seran capaz de oirlo. Con la etiqueta
EMBED se nos ofrece la posibilidad de insertar sonido que pueda
ser oido tambin por los usuarios de Netscape Navigator gracias a
un plug-in que se incluye en la instalacin estndar. Veamos un
ejemplo:
<EMBED SRC="reggae.mid"
WIDTH="0"
HEIGHT="0"
AUTOSTART="true">
Con los atributos WIDTH y HEIGHT puestos a cero conseguimos
que los controles de sonido no sean mostrados y usando
AUTOSTART=" true" hacemos que el sonido empiece a
reproducirse inmediatamente. Esto es necesario, ya que al
esconder los controles no hay otra forma para comenzar la
reproduccin.
Pero ahora viente lo ms interesante del tema. Podemos aadir el
cdigo HTML para insertar sonido para Internet Explorer entre las
instrucciones < NOEMBED> y </NOEMBED>, con lo que
conseguimos compatibilidad con los dos navegadores principales.
El cdigo completo queda:
<EMBED SRC="reggae.mid"
WIDTH="0"
HEIGHT="0"
AUTOSTART="true">
<NOEMBED>
<BGSOUND SRC="reggae.mid">
</NOEMBED>
Si hubieramos usado WIDTH="150" y HEIGTH="70" se hubieran
mostrado los controles de sonido. En la figura 10.13 vemos dichos
controles en Internet Explorer 4.0(que soporta la etiqueta EMBED al
contrario que la versin 3.0):
Figura 10.13. Usando los atributos WIDTH y HEIGHT de la
etiqueta EMBED podemos lograr que los controles de sonido
aparezcan. Internet Explorer usa los controles de Windows.

y en la figura 10.14 vemos el resultado del mismo cdigo en

Netscape Navigator 4.0.
Figura 10.14. El plug-in usado por Netscape navigator ha
creado sus propios controles que tienen la capacidad aadida
de poder controlar el volumen.

62. Java en las Paginas Web

Anterior | Inicio | Siguiente
Hasta ahora hemos visto una serie de mtodos que nos permiten
incluir sonido, vdeo y otros contenidos multimedia as como
multitud de archivos de diferentes formatos en una pgina Web. Al
insertar alguno de estos objetos conseguimos incluso tener cierta

interactividad con el visitante de las pginas y gracias a ellos

quedan cubiertas gran parte de nuestras necesidades, pero
seguimos teniendo algunas limitaciones. Gracias al lenguaje Java
podremos insertar contenido multimedia con mucha mayor libertad
y, lo que es ms importante, conseguiremos interactividad completa
con los navegantes.
Java es un lenguaje de programacin desarrollado por la empresa
Sun Microsystems. En la actualidad esta misma empresa se
encarga, junto con otras empresas asociadas, de su desarrollo. En
la pgina Java.sun.com (figura 11.1) podemos encontrar gran
cantidad de recursos relacionados con Java, incluyendo tutoriales,
libros o cdigo algunos de los cuales se distribuye gratuitamente.
Centrndonos en el lenguaje, ste es muy similar a los usados para
realizar las aplicaciones que usamos habitualmente en nuestros
ordenadores (Word, Netscape, Explorer o el propio Windows). La
gran diferencia de Java con respecto a otros lenguajes consiste en
la posibilidad de hacer pequeos programas y ejecutarlos desde
una pgina Web. Estos programas reciben el nombre de applets
Cada da hay ms pginas en Internet que los usan consiguiendo lo
que hasta hace poco era imposible. En la pgina de
Gamelan(www.Gamelan.com) podemos encontrar gran cantidad
relacionada con la tecnologa Java, en la figura 11.2 podemos ver
una muestra de esta pgina. En una de sus pginas de su nueva
ubicacin: www.developer.com/directories/pages/dir.Java.sites.html
nos ofrecen un listado de las mejores Webs que podemos encontrar
hoy en da que usen la tecnologa Java, es muy recomendable
visitar alguna de ellas para hacernos una idea real de lo que puede
llegar a conseguirse usando este excelente lenguaje.
Figura 11.1. En la pgina Web de Sun Microsystems, creadora
del lenguaje Java, podemos encontrar gran cantidad de
documentacin y ejemplos de sus posibilidades.

Figura 11.2. Gamela es una excelente fuente de recursos Java

conocida desde hace tiempo. En la actualidad su direccin est
en proceso de cambio a: www.developer.com.

El conocimiento del lenguaje Java se muestra cada vez ms

importante para todos aquellos programadores de Internet. Ms
adelante en esta obra abordaremos ampliamente su estudio y
aprenderemos a crear nuestras propias aplicaciones y applets. Sin
embargo no es necesario conocer este lenguaje para aprovechar
sus caractersticas en nuestras pginas Web. Existen gran cantidad
de applets gratuitos que se distribuyen a travs del WWW y que

pueden ser usados libremente en nuestras pginas. En esta seccin

aprenderemos a insertarlos en nuestras pginas y a usarlos
adecuadamente para aprovechar las posibilidades de esta nueva
tecnologa.
La propia compaa Sun Microsystems ha creado una pgina en
la que se muestran ejemplos y se distribuyen gratuitamente gran
cantidad
de
applets.
La
direccin
es:
Java.sun.com/applets/index.html. Otra forma de buscar applets
gratuitos en el WWW consiste en dirigirse al ndice Yahoo y
buscar la cadena "Java applets".
63. Insercin de Applets Java (I)
Anterior | Inicio | Siguiente
De ahora en adelante consideraremos que ya tenemos un applet,
bien porque lo hemos programado nosotros mismos, bien porque
estamos usando un applet de distribucin gratuita, es hora de
aprender a insertarlo en nuestra pgina Web. Para ello usaremos
una nueva etiqueta: APPLET. Esta etiqueta est formada por una
instruccin de inicio, <APPLET>, y una instruccin de fin,
</APPLET>.
La etiqueta APPLET fue introducida por Netscape en la versin
2.0 de Navigator fruto de un acuerdo con Sun para soportar la
tecnologa Java. Todos sus navegadores posteriores tambin la
soportan. El otro gran navegador, Microsoft Internet Explorer,
soporta la tecnologa Java desde la versin 3.0. En cuanto al
estndar se refiere, esta etiqueta se incluye en la especificacin
HTML 3.2, aunque no podemos asegurar que los navegadores
posteriores que respetan la norma HTML 3.2 soporten la
tecnologa Java, simplemente entienden la etiqueta, pero no son
capaces de ejecutar un applet.
La insercin de un applet en una pgina es similar a la insercin de
una imagen, a lo cual ya estamos muy acostumbrados. Deberemos
especificar el archivo donde se encuentra el applet y las
dimensiones (anchura y altura) que este debe ocupar en la pgina.
Al igual que ocurra con las imgenes el applet se introducir en el
lugar exacto donde indique su cdigo, si es necesario se insertar
entre el texto, pero no pasar a una nueva lnea, como suceda con
las marquesinas, si no lo indicamos especficamente (con la
etiqueta <BR>). Para indicar el archivo en el que se encuentra el
applet usaremos el atributo CODE y para especificar la anchura y
altura en pixeles usaremos WIDTH y HEIGHT respectivamente. En
resumen, para insertar un applet debemos usar el siguiente cdigo
en cualquier lugar de la pgina:

<APPLET
HEIGHT="alto">
</APPLET>

CODE="nombre_applet.class"

WIDTH="ancho"

Los tres atributos que hemos usado deben incluirse

obligatoriamente siempre que insertemos un applet. Esto parece
obvio con el atributo CODE, ya que no se podra insertar el applet
sin indicar donde est, pero resulta ms extrao con los atributos
WIDTH y HEIGHT. Aun as, si no especificamos el tamao que
debe ocupar el applet en la pgina no ser mostrado ni ejecutado
por el navegador. Debemos estar muy atentos a este detalle ya que
hasta ahora estos dos atributos eran totalmente optativos y por ello
es un error comn olvidarlos y no ser capaz de descubrir porqu no
funciona el applet.
Y aqu vemos como insertar un applet de ejemplo:
<HTML>
<HEAD>
<TITLE>Applet sonoro</TITLE>
</HEAD>
<BODY>
<APPLET CODE="SoundExample.class" WIDTH=450
HEIGHT=50></APPLET>
</BODY>
</HTML>
Los applets de Java son sensibles a las maysculas y a las
minsculas, si no ponemos el nombre del archivo exactamente
igual, incluyendo maysculas o minsculas, no hubiera
funcionado.
Por
ejemplo,
si
hubiramos
escrito
CODE="soundexample.class" el cdigo anterior no hubiera
funcionado. Este es un ejemplo muy comn por lo que debemos
tener cuidado.
Si visualizamos este archivo con un navegador que soporte la
tecnologa Java debemos obtener el resultado de la figura 11.3.
Figura 11.3. Este es el aspecto que muestra nuestro primer
applet insertado en una pgina Web. En un navegador con
soporte Java podemos pulsar sobre los botones para obtener
diferentes sonidos.

Los applets Java tienen la terminacin .class, como ya hemos

comentado antes, esto exige que para poder usar un applet
debemos utilizar un sistema operativo que soporte nombres
largos. Desgraciadamente los usuarios de Windows 3.1 no
podrn probar esta tecnologa localmente en su ordenador.
Afortunadamente esto no significa que no puedan disfrutar los
applets que estn publicados en el WWW.
Pasemos a explicar que ocurre cuando el navegador se encuentra
con el cdigo anterior. En primer lugar busca el archivo
SoundExample.class en la misma direccin URL y en el mismo
directorio donde se encuentre la pgina actual y lo baja a nuestro
ordenador (este es un ejemplo en el que ambos archivos ya estn
en nuestro ordenador, con lo que este paso no sera necesario).
Mientras reserva un rectngulo, con las dimensiones especificadas
por los atributos WIDTH y HEIGHT, donde ser mostrado el applet.
Una vez ha llegado el archivo anterior el navegador llama a lo que
se conoce como mquina virtual Java (tambin llamada JVM, Java
Virtual Machine) que pasar a ejecutar el applet. A partir de ese
momento el applet se ejecutar como cualquier otro programa de
nuestro ordenador, aunque lo har en el interior de la pgina Web.
De esta forma cuando nuestro cursos este dentro del rectngulo de
450x50 creado el control pasar al applet y si pulsamos los botones
el propio applet ser el encargado de realizar las acciones
oportunas. La Mquina Virtual Java implementa adems ciertas
medidas de seguridad para que el applet no pueda, por ejemplo,
borrar nuestro disco duro. Una vez conocemos el funcionamiento de
los applets podemos adentrarnos ms a fondo en las diferentes
caractersticas de estos que pueden ser modificadas con el lenguaje
HTML.
Especificando la direccin del applet.
Dejando a un lado el ejemplo y volviendo al cdigo general es obvio
que el cdigo es, todava, muy sencillo. Para empezar el archivo

con el applet (que siempre tiene la extensin .class) se encuentra

en el mismo directorio que el documento HTML de la pgina actual.
Lo habitual, sin embargo, es agrupar todos los applets Java en un
directorio dedicado de la misma manera que hacamos con las
imgenes. Podramos pensar que para reflejar este cambio no
tendramos ms que cambiar ligeramente el cdigo y escribir:
<APPLET CODE="applets/nombre_applet.class" WIDTH="ancho"
HEIGHT="alto">
</APPLET>
Por desgracia, este cdigo es incorrecto. El atributo CODE permite
nicamente especificar el nombre del archivo donde se encuentra el
applet, pero no podemos incluir un directorio ni, por supuesto, una
direccin de Internet. Significa esto que es imposible?
Afortunadamente no, los diseadores de esta etiqueta pensaron en
ello e introdujeron un nuevo atributo, CODEBASE, que nos permitir
indicar la direccin URL o ruta de directorios donde se encuentre el
archivo especificado en el atributo CODE. Usando CODEBASE
podemos reescribir el cdigo anterior de manera correcta:
<APPLET CODEBASE="applets/" CODE="nombre_applet.class"
WIDTH="ancho" HEIGHT="alto">
</APPLET>
Sin embargo podemos ir ms all. Podemos usar en nuestra pgina
un applet que se encuentre en cualquier otro lugar del WWW sin
tener que copiarlo a nuestro servidor. Para ello no tendremos ms
que usar el atributo CODEBASE para especificar la direccin base.
Por ejemplo:
<APPLET code=TicTacToe.class width=120 height=120
CODEBASE="http://Java.sun.com/applets/TicTacToe/1.1/">
</APPLET>
Esta direccin es real, si incluimos este cdigo en una pgina
habremos insertado un juego de las tres en raya como el que
vemos en la figura 11.4 en el que cualquier visitante de nuestra
pgina podr jugar (contra el ordenador). Si vemos en cualquier
pgina un applet que nos gusta y sus autores permiten que sea
utilizado en pginas ajenas (esto es muy importante) no debemos
dudarlo y usarlo. La carga del applet no ser ms lenta que si
estuviera en nuestro mismo servidor y adems tendremos a nuestra
disposicin una mayor cantidad de applets, ya que muchos autores
permiten el uso de applets siempre y cuando estos no sean
copiados de su servidor sino usados directamente desde l.

Figura 11.4. Usando applets Java podemos insertar juegos

interactivos como en este caso. Usando el atributo CODEBASE
no es necesario que el applet est en nuestro servidor.

64. Insercin de Applets Java (II)

Anterior | Inicio | Siguiente
Otros atributos de la etiqueta APPLET
Adems de los cuatro atributos que hemos vistos hasta ahora, que
suelen usarse prcticamente siempre, existen otros que pueden
resultarnos muy tiles. Todos ellos se encuentran incluidos en el
estndar HTML 3.2:
NAME="nombre del applet":
Este atributo es usado para identificar el applet entre el resto de
elementos u otros applets de la pgina. Poner el nombre del applet
no es necesario, pero los buenos programadores aconsejan hacerlo
por una cuestin de estilo. Por otro lado tener el applet identificado
es tremendamente til o incluso obligatorio si posteriormente
queremos que este se comunique, por ejemplo, con cdigo
JavaScript.
ALIGN:
Con esta etiqueta podremos controlar el alineamiento horizontal de
la pgina. Puede tomar tres valores: left, right y center para
conseguir que el applet est alineado a la izquierda, a la derecha o
est centrado respectivamente. El funcionamiento de estos tres
valores es similar al de las imgenes y si especificamos un

alineamiento a cualquiera de los dos lados el texto circundante

envolver al applet.
VSPACE="pixeles":
Con este atributo establecemos un margen vertical del tamao en
pixeles especificado. El margen vertical se refiere a la distancia
entre la parte superior del applet y los elementos de la pgina que
estn sobre l y entre la parte inferior y los elementos situados
debajo.
HSPACE="pixeles":
Este atributo nos permite establecer el ancho del margen horizontal,
es decir el espacio entre el applet y los elementos que estn
situados a su derecha y a su izquierda.
ALT="texto alternativo":
Esta etiqueta es usada por aquellos navegadores que s entienden
la etiqueta APPLET, pero no soportan la tecnologa Java. Todos los
navegadores que cumplan la norma HTML 3.2 entienden esta
etiqueta, pero eso no quiere decir que sean capaces de ejecutar un
applet. Esto ocurre, por ejemplo, con los navegadores de slo texto,
ya que al ser los applets grficos en su mayora no son capaces de
mostrarlos en pantalla. Este texto tambin es mostrado si en un
navegador con soporte de tecnologa Java tiene algn problema y
no es capaz de ejecutar el applet.
Continuando con el ejemplo anteriormente mostrado podemos usar
estos atributos para obtener un cdigo ms completo. Para
empezar es muy recomendable usar siempre los atributos NAME y
ALT, con lo que quedara (mostramos nicamente el cdigo
correspondiente a la insercin del applet):
<APPLET CODE="SoundExample.class" WIDTH=450
HEIGHT=50 ALT="Su navegador soporta la tecnologa Java, pero
por algn error no es capaz de mostrar este applet" NAME="Ejemplo
Sonoro">
</APPLET>
Por otro lado podemos usar el atributo ALIGN para que el texto
bordee el applet. En este caso es recomendable usar tambin
VSPACE y HSPACE para crear un margen:
<APPLET CODEBASE="ej1/" CODE="SoundExample.class"
WIDTH=450 HEIGHT=50 ALIGN="left" HSPACE=15 VSPACE=15>
</APPLET>
Escribiendo texto antes y despus de esta etiqueta obtenemos el
resultado de la figura 11.5.

Figura 11.5. Usando los atributos ALIGN, VSPACE y HSPACE

podemos insertar un applet rodeado de texto.

Los atributos anteriores son los que aparecieron inicialmente junto

con la etiqueta APPLET y que fueron adoptados por el estndar
HTML 3.2 pero adems de estas, tanto Microsoft como Netscape
han ido incorporando otros nuevos en sus navegadores:
ARCHIVE="archivo_comprimido":
Permite especificar un archivo auxiliar al applet de Java donde
pueden ser insertados todas las imgenes, sonidos y cualquier otro
archivo auxiliar que pueda ser necesario para la ejecucin del
applet. La existencia de este atributo ha sido pensada para
comprimir todos los archivos auxiliares en uno slo de menor
tamao para que el tiempo de carga sea menor. Cualquier otro
fichero que necesite el applet que no este incluido en este archivo
comprimido ser buscado por los mtodos habituales. Este atributo
es exclusivo del navegador Netscape Navigator.
MAYSCRIPT:
Este atributo se usa por si slo, sin ningn valor, y su presencia
significa que el applet Java puede ser accedido usando cdigo
JavaScript.
TITLE="texto":
Este atributo exclusivo de Internet Explorer 4.0 permite indicar un
texto que ser mostrado en un bocadillo cuando el navegante pase
el ratn por encima del applet. Aunque el contenido de este atributo
slo es entendido por Explorer puede ser usado con total libertad,
ya que no perjudica nada a los usuarios del resto de navegadores.
Estos son todos los atributos que pueden ser usados en la etiqueta
APPLET, pero existe otro mtodo adicional para especificar
parmetros particulares de cada uno de estos programas escritos
en Java: la etiqueta PARAM.

La etiqueta PARAM
Esta etiqueta consta de una nica instruccin, <PARAM>, que debe
ser insertada en el interior de la etiqueta APPLET (entre la
instruccin de inicio y la instruccin de fin) y cuya funcin ser
definir parmetros para el applet. Los parmetros son propiedades
especficas de cada applet que permiten modificar sus
caractersticas. Los parmetros constan de un nombre y un valor
que son indicados usando los atributos NAME y VALUE de la
siguiente manera:
<APPLET CODE="nombre_applet.class" WIDTH="ancho"
HEIGHT="alto">
<PARAM
NAME="nombre_parmetro"
VALUE="valor_parmetro">
</APPLET>
La etiqueta PARAM puede ser usada tantas veces sea necesario
para un mismo applet siendo necesario usarla una vez para cada
uno de los parmetros. En general los applets que se distribuyen
gratuitamente constan de gran nmero de parmetros, para poder
adaptarse a las necesidades de los distintos usuarios que vayan a
utilizarlo. Por esta razn siempre van acompaados de
documentacin. Quiz el applet ms conocido es Animator.class,
este applet toma un conjunto de imgenes y las va mostrando
ordenadamente para crear un efecto de animacin. Este era el
nico mtodo existente para crear animaciones antes de la
aparicin de los GIFS animados. Tras la aparicin de estos la
utilizacin de este applet ha decrecido, pero sigue siendo til en
ciertas ocasiones y nos servir como excelente ejemplo para
mostrar el uso de la etiqueta PARAM. Para insertar el applet
debemos copiar el contenido de este directorio a otra ubicacin y
crear un documento HTML con el siguiente cdigo:
<HTML>
<HEAD>
<TITLE>El saludo de Duke</TITLE>
</HEAD>
<BODY>
<APPLET CODE="Animator.class" WIDTH=55 HEIGHT=68>
<PARAM NAME="imagesource" VALUE=".">
<PARAM NAME=ENDIMAGE VALUE=10>
<PARAM NAME=PAUSE VALUE=100>
<PARAM NAME=PAUSES VALUE="2500|100|100|100|100|
100|100|100|100|100">
</APPLET>

</BODY>
</HTML>
En este caso hemos usado 4 parmetros del applet, aunque en
realidad tiene muchos ms. Los explicaremos brevemente. El
parmetro imagesource nos permite indicar el directorio donde se
encuentran las imgenes, un punto significa el directorio actual.
Estas imgenes deben llamarse obligatoriamente T1.gif, T2.gif,
T3.gif, etc. El parmetro endimage indica el nmero de imgenes de
los que consta la animacin y en esta ocasin sern 10, desde
T1.gif hasta T2.gif. Los parmetros pause y pauses nos permiten
controlar las pausas entre las imgenes, con el ltimo controlamos
de manera independiente las pausas que se realizan entre cada
una de las imgenes de manera individual. Al visualizar este cdigo
con un navegador con soporte Java veremos la mascota de Java,
Duke, saludando. En la figura 11.6 podemos apreciar una captura
del resultado. Una gran ventaja de este mtodo para crear
animaciones es que simplemente cambiando las imgenes T1.gif,
T2.gif, etc. por unas propias podemos crear otra animacin distinta
sin necesitar ninguna aplicacin como era el caso de los GIFs
animados.
Figura 11.6. El applet Animator.class es uno de los ms
conocidos y usados en las pginas Web por la facilidad que
ofrece para crear animaciones.

65. Insercin de Applets Java (III)

Anterior | Inicio | Siguiente
Alternativas a los applets Java
Dado que la tecnologa Java es relativamente nueva y requiere
grandes recursos por parte del navegador, slo algunos como

Netscape Navigator 2.0 o superior y Internet Explorer 3.0 o superior

la soportan. Dado que no sabemos que navegadores usarn los
visitantes de nuestras pginas es conveniente aadir alternativas
para aquellos que no sean capaces de mostrar el applet.
Anteriormente hemos visto la existencia del atributo ALT que
permite especificar un texto alternativo. Sin embargo tiene dos
inconvenientes:
Este atributo slo ser entendido por aquellos navegadores que
entiendan la etiqueta APPLET, con lo que seguimos sin tener una
alternativa para el resto de navegadores.
Con ALT nicamente podemos insertar un texto, ni imgenes ni
ningn otro elemento HTML, con lo que nuestras posibilidades para
ofrecer alternativas quedan muy menguadas.
Afortunadamente existe otro mtodo. Como hemos indicado al
principio de esta seccin, y como ya hemos comprobado por los
ejemplos, la etiqueta APPLET consta de una instruccin de inicio y
de una instruccin de fin. Vimos que entre ellas podamos insertar
una o varias etiquetas PARAM para especificar los parmetros
especficos de cada applet. Pero adems podemos insertar otras
etiquetas HTML que sern ignoradas por aquellos navegadores con
soporte Java, pero sern mostradas por todos aquellos que no
soporten esta tecnologa, con lo que nos servir como contenido
alternativo al applet:
<APPLET CODE="nombre_applet.class" WIDTH="ancho"
HEIGHT="alto">
<PARAM
NAME="nombre_parmetro"
VALUE="valor_parmetro">
... Cdigo HTML alternativo ...
</APPLET>
Siguiendo con el ejemplo de la mascota de Java, si queremos que
nuestra pgina este preparada para todos los navegadores
debemos aadir el atributo ALT as como contenido alternativo
antes de la instruccin </APPLET>. He aqu un ejemplo:
<APPLET CODE="Animator.class" WIDTH=55 HEIGHT=68
ALT="Lo siento no puede ver el applet">
<PARAM NAME="imagesource" VALUE=".">
<PARAM NAME=ENDIMAGE VALUE=10>
<PARAM NAME=PAUSE VALUE=100>
<PARAM NAME=PAUSES VALUE="2500|100|100|100|100|
100|100|100|100|100">
<IMG SRC="T5.gif" WIDTH=55 HEIGHT=68 ALT="Duke te
saluda">

</APPLET>
En este caso los usuarios de navegadores sin soporte Java vern
una imagen de Duke saludando (aunque sin movimiento) del mismo
tamao que el applet. Si en el texto de la pgina hemos hecho
referencia a que los navegantes van a ver un applet en accin
debemos insertar tambin junto con la imagen un texto que advierta
que el applet no puede ser visualizado con ese navegador y que a
cambio se muestra una imagen. En la figura 11.7 vemos el ejemplo
anterior visto con el navegador Opera, que no soporta la tecnologa
Java. En un medio esttico como este no se aprecia la diferencia,
pero esta existe, ya que en este caso la imagen no tiene
movimiento.
Figura 11.7. El navegador Opera no soporta la tecnologa Java,
por lo que mostrar el cdigo alternativo, en este caso uno de
los GIFs de la animacin.

Con este ejemplo damos por concluido el aprendizaje de la etiqueta

APPLET. En la figura 11.8 podemos ver un ejemplo.
Figura 11.8. Resumen de todos los atributos de la etiqueta
APPLET y de su subetiqueta PARAM.

El nuevo estndar: la etiqueta OBJECT

Hasta ahora hemos aprendido a insertar diferentes tipos de objetos
en las pginas Web, para insertar imgenes usbamos la etiqueta
IMG, para insertar objetos para plug-ins usbamos EMBED, para
insertar frames flotantes IFRAME, para insertar applets Java
APPLET, etc. Observando esta diversidad y viendo que cada
desarrollador de navegadores creaba sus propios mtodos para
incluir objetos en las pginas el consorcio W3C creo un grupo de
trabajo para buscar una solucin que englobar y unificara todos los
mtodos actualmente existentes. La solucin fue la creacin de una
nueva etiqueta para el lenguaje HTML: OBJECT, que fue
introducida en el estndar HTML 3.2, aunque es a partir de la
versin HTML 4.0 cuando se est empezando a darle la importancia
que merece.
Usando esta etiqueta es posible incluir varios tipos de ficheros
multimedia (vdeo y sonido MPEG, ficheros Shockwave/Director,
etc.), applets de Java, controles ActiveX (que veremos en la
siguiente seccin), documentos HTML o prcticamente cualquier
otro tipo de objeto. Por ejemplo para incluir un vdeo AVI debemos
usar el siguiente cdigo:
<OBJECT DATA="flores.avi" TYPE="video/avi" WIDTH=100
HEIGHT=100>

<IMG SRC="flores.gif"
ALT="[FLORES]">
</OBJECT>

WIDTH=100

HEIGHT=100

En este caso el funcionamiento es muy similar al de la etiqueta

EMBED y ahora el cdigo alternativo deber ser mostrado entre
<OBJECT> y </OBJECT>. Este cdigo ser ignorado por los
navegadores que entiendan la etiqueta OBJECT.
Qu navegadores soportan este nuevo estndar? Las versiones
4.0 y posteriores de Internet Explorer y Netscape Navigator
entienden la etiqueta, aunque todava no soportan todas las
posibilidades que ofrece. Sin embargo el Web Consortium le esta
dando un fuerte impulso, con lo es de suponer que las futuras
versiones de estos navegadores si no hagan y que poco a poco se
tender hacia un mayor uso de la etiqueta OBJECT.
Esta seccin es slo una introduccin a este nuevo estndar.
Hemos considerado que un estudio detallado no era apropiado
porque esta etiqueta no puede ser usada todava de manera
fiable(excepto para insertar controles ActiveX que enseguida
veremos). El lector interesado puede adquirir ms informacin a
travs del Web Consortium en las siguientes direcciones:
http://www.w3.org/pub/www/TR/WD-object.html
http://www.w3.org/TR/WD-html40/struct/objects.html#h-14.3
En la figura 11.9 hemos incluido de modo informativo la pgina del
Web Consortium que explica el funcionamiento del atributo OBJECT
y todos sus atributos.
Figura 11.9. La etiqueta OBJECT ha sido creada por los
expertos del Web Consortium para englobar la inclusin de
todo tipo de objetos en las pginas Web.

Una seccin que si hemos considerado importante explicar es la

insercin de los applets Java recin vistos usando la etiqueta
applet, ya que aunque actualmente este mtodo sea operativo, se
ir imponiendo con el tiempo.
Insercin de un applet Java
El objetivo actual del Web Consortium es que la etiqueta OBJECT
conviva por un tiempo con la etiqueta APPLET para sustituirla ms
adelante. Hoy en da el uso de la etiqueta OBJECT no est muy
extendido con lo que la forma ms segura de insertar un applet
sigue siendo usando la etiqueta APPLET, sin embargo la siguiente
generacin de navegadores permitir tambin el uso de OBJECT
que acabar siendo el nico mtodo aceptado y como buenos
programadores nosotros debemos estar preparados.
Para poder llevar a cabo todas las funciones de la etiqueta APPLET
tambin es posible usar la etiqueta <PARAM> para especificar
parmetros para los applets u otros objetos que los necesiten.
Aunque esta etiqueta debe ser insertada entre <OBJECT> y
</OBJECT> no ser ignorado por los navegadores que entiendan
esta etiqueta.
Adems la etiqueta PARAM tiene dos nuevos atributos al ser usada
en el interior de OBJECT, estos son:
VALUETYPE="...":
Este atributo especifica que tipo de valor recibir el parmetro. Hay
tres posibles valores:

Data:
El valor especificado ser pasado al objeto como una cadena de
caracteres. Este es el valor por defecto y antes de la existencia del
atributo VALUETYPE era la nica posibilidad.
Ref:
El valor especificado es una direccin URL que indica donde estn
almacenados los valores para dicho parmetro. La direccin debe
ser pasada tal cual al objeto.
Object:
El valor es el nombre de otro objeto del mismo documento
precedido del smbolo '#'.
TYPE="tipo_mime":
Este atributo especifica el tipo mime del valor asignado a este
atributo con VALUE.
Exceptuando estas diferencias, el funcionamiento es idntico. Por
ejemplo, para insertar el applet del segundo de nuestros ejemplos
('El saludo de Duke') usando la etiqueta OBJECT debemos escribir:
<OBJECT codetype="application/octet-stream"
classid="Java:Animator.class"
width=55 height=68
ALT="Lo siento, no puede ver el applet">
<PARAM NAME="imagesource" VALUE=".">
<PARAM NAME=ENDIMAGE VALUE=10>
<PARAM NAME=PAUSE VALUE=100>
<PARAM NAME=PAUSES VALUE="2500|100|100|100|100|100|
100|100|100|100">
<IMG SRC="T5.gif" WIDTH=55 HEIGHT=68 ALT="Duke te
saluda">
</OBJECT>
Como vemos la diferencia con la etiqueta APPLET es pequea, con
la nica complejidad aadida de indicar en el atributo CODETYPE
el tipo MIME del applet, que es el indicado en este ejemplo siempre.
Esto es necesario para indicar al navegador que se trata de un
applet de modo que si no soporta esta tecnologa este pueda ser
capaz de decidir no bajar el archivo.
66. ActiveX, la tecnologa del futuro
Anterior | Inicio | Siguiente
La, denominada, tecnologa ActiveX desarrollada por Microsoft hizo
su aparicin en Internet con el navegador Internet Explorer 3.0. Su
objetivo es similar al de los plug-ins, insertar objetos de diferente
tipo en una pgina Web, aunque va mucho ms all al aadir
mayores posibilidades de interaccin y comunicacin con

programas externos. Existen pginas en Internet que basan toda su

presentacin en controles ActiveX para crear Webs realmente
impactantes. En la figura 11.10 vemos la pgina de ForecastX que
ofrece el parte meteorolgico en tiempo real usando esta novedosa
tecnologa.
Figura 11.10. ForecastX ofrece un servicio meteorolgico en
tiempo real gracias a la tecnologa ActiveX.

ActiveX esta compuesto por dos tipos de objetos: controles Activos

(Active controls) y documentos Activos (Active documents). Estos
ltimos permiten insertar documentos con formato PDF, DOC, etc.
La tecnologa ActiveX funciona de una manera similar al mecanismo
de Microsoft OLE (Object Linking and Embedding, Enlazado e
incrustacin de objetos) que usa su sistema operativo Windows, por
lo que los usuarios de ste les resultar familiar, lo realmente
novedoso es la aplicacin de esta tecnologa al WWW.
Los controles ActiveX guardan parecidos con los objetos para plugins y con los applets Java, aunque presenta algunas mejoras con
respecto a ambos. Como ocurra con los plug-ins, los controles y
documentos de ActiveX pueden ser insertados en un pgina Web,
sin embargo no requieren un pequeo programilla para cada tipo de
objeto ActiveX, esta nueva tecnologa ha sido denominada como
auto-contenida porque cada objeto tiene suficiente informacin para
ejecutarse l mismo sin ayuda de ninguna aplicacin.
Tal y como ocurre con los applets podemos crear nuestros propios
controles o usar los creados por otros programadores que nos los
venden o distribuyen gratutamente. Si optamos por programarlos

nosotros mismos existen herramientas que lo convierten

prcticamente en un juego de nios, entre ellas destaca las creadas
para este fin por Microsoft y que distribuye a travs de su Web
(www.microsoft.com/ie/).
Hoy por hoy el nico inconveniente de la tecnologa ActiveX
consiste en que slo puede ser visto desde es sistema operativo
Windows y con el Navegador Internet Explorer, aunque
afortunadamente parece que esto cambiar pronto.
Insercin de un control ActiveX
El cdigo HTML necesario para insertar un control o documento
ActiveX en una pgina Web fue desarrollado por Microsoft en
colaboracin con el Web Consortium, con lo que se acord el uso
del estndar OBJECT que hemos visto en la seccin anterior. A
continuacin veremos un sencillo ejemplo que no requiere ningn
archivo especial, el nico requisito para poder visualizarlo consistir
en tener instalado el navegador Internet Explorer 3.0 o superior. El
cdigo usado para insertar el control ActiveX ser:
<OBJECT WIDTH=250 HEIGHT=340
CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2">
<PARAM NAME="angle" VALUE="55">
<PARAM NAME="alignment" VALUE="2">
<PARAM NAME="BackStyle" VALUE="3">
<PARAM NAME="caption" VALUE="Curso WEBMASTER">
<PARAM NAME="FontName" VALUE="Arial">
<PARAM NAME="FontSize" VALUE="30">
<PARAM NAME="FontBold" VALUE="1">
<PARAM NAME="Backcolor" VALUE="#006600">
<PARAM NAME="Forecolor" VALUE="#FFFFFF">
Para visualizar el control ActiveX necesita Explorer 3.0 o posterior.
</OBJECT>
En la figura 11.11 podemos ver el resultado obtenido tal y como se
ve con Internet Explorer 4.0. Pasemos a explicar el este cdigo: El
valor del atributo CLASSID es el que identifica el tipo de control
ActiveX que estamos insertando. Este cdigo es complejo y se sale
de los objetivos de esta obra.
Figura 11.11. Usando este control ActiveX podemos crear
efectos variados con texto, con lo que pueden sustituir el uso
de imgenes con la consiguiente disminucin tiempo de carga
de nuestras pginas.

Volviendo a nuestro ejemplo, entre los principales parmetros

usados en la insercin de este control ActiveX encontramos:
Caption:
Es el texto que debe insertarse con las caractersticas que se
indican con el resto de parmetros.
Angle:
Es el ngulo del texto con la horizontal en grados. Si le damos el
valor 90 el control mostrar el texto en vertical.
FontSize:
Es el tamao del texto.
FontName:
Es el tipo de letra.
Backcolor y Forecolor:
Son el color del fondo y el color del texto respectivamente.
Invitamos al lector a hacer pruebas modificando los valores de estos
y el resto atributos y cambiando el texto para adaptarlo a nuestras
necesidades y poder incorporarlo en sus propias pginas. Vemos un
ejemplo en la figura 11.12.

Figura 11.12. Usando el mismo control ActiveX que en la figura

11.25 pero con un cdigo algo ms complejo podemos crear
este efecto tan atractivo.

Por ltimo nos queda resaltar que existe un plug-in para Netscape
Navigator, Ncompass, que aade a este navegador la posibilidad de
entender controles y documentos ActiveX. Este plug-in puede ser
obtenido en la pgina Web de Ncompass en el WWW:
www.ncompasslabas.com. Si pensamos incorporar la tecnologa
ActiveX a nuestras pginas es muy recomendable incluir una enlace
a esta pgina para que todos los usuarios de Netscape que las
visiten puedan adquirirlo y disfrutar, tambin, de los controles que
hayamos usado. Tambin es importante destacar que Microsoft ha
llegado a acuerdos con diversas compaas para exportar la
tecnologa ActiveX a Mac y UNIX, con lo que es de esperara que en
poco tiempo se convierta en un mtodo estndar para insertar
objetos multi-plataforma aunque hoy por hoy no se puede decir que
la sea, al contrario que Java.
67. Formularios en HTML

 Anterior | Inicio | Siguiente

No es necesario navegar mucho tiempo por Internet para encontrar
pginas Web en las que se piden datos a los navegantes. Quiz las
primeras pginas que hicieron uso de esta posibilidad fueron las de
los sistemas de bsqueda. Los formularios usados en estos
sistemas son, en general, bastantes sencillos, nicamente es
necesario un elemento, conocido como caja de texto, donde sea
posible introducir la palabra o frase que deseamos buscar.
En la figura 12.1 vemos un buen ejemplo de este tipo de uso. En
ella vemos la pgina principal de Tower Communications se ofrece
una caja de texto donde el usuario debe introducir una cadena de
texto que desea buscar. Despus debe pulsar sobre el botn
ENVIAR, tras lo cual se mandar la informacin al servidor Web que
la procesar y responder enviando la informacin encontrada. Ms
adelante en la seccin 'Como usar los datos de un formulario'
veremos como es posible recoger y procesar esta informacin, pero
por ahora nos centraremos en la creacin y en el diseo de los
formularios.
Figura 12.1. En la pgina principal de Tower Communications
vemos un formulario que es usado para permitir a los
visitantes introducir una cadena de texto que deseen buscar.

Un caso ms complejo de formularios es usado en las pginas en

las que se ofrece a los navegantes la posibilidad de realizar
sugerencias, ofrecer comentarios o mandar cualquier otro tipo de
informacin. En general estos formularios ocupan una pgina
entera, y estn formados por diversos elementos. En la pgina de
Tower podemos encontrar una pgina de sugerencias que ilustra la
utilidad de esta forma de usar los formularios. En la figura 12.2

podemos apreciar esta pgina, que como vemos permite introducir

datos en varios campos, tras rellenarlos deberemos pulsar sobre el
botn 'Enviar formulario' para mandar la informacin.
Figura 12.2. En otra seccin de la pgina de Tower
Communications vemos un formulario ms complicado
formado por numerosas cajas de texto y otros elementos.

Estos dos ejemplos son probablemente los ms comunes entre las

pginas del WWW, pero no los nicos. Los formularios son muy
verstiles, como enseguida veremos, y la posibilidad de interactuar
con los usuarios de las pginas ser til en multitud de ocasiones.
El nico lmite ser nuestra creatividad.
Si queremos preguntar a los visitantes de nuestras pginas su
nombre, su direccin de correo electrnico, crear un sistema de
bsqueda, hacer un libro de visitas o simplemente pedir
sugerencias necesitaremos crear formularios. Un formulario no es
ms que un conjunto de elementos que permiten introducir datos a
los visitantes de nuestras pginas de una manera sencilla. Estos
datos son en general texto o una serie de opciones entre las que se
debe elegir una o varias. En este captulo aprenderemos todas las
posibilidades que tenemos y como usarlas adecuadamente.
El lenguaje HTML consta de una serie de etiquetas que permitirn
crear de forma rpida y sencilla numerosos elementos de entrada
de datos. Estos elementos, que reciben el nombre de controles,
sern grficos en la mayora de navegadores, pero tambin existen
mtodos para que los navegadores que slo pueden mostrar texto,
como Lynx, puedan mostrarlos. Un formulario no es ms que un

conjunto de estos controles cuya informacin ser enviada

conjuntamente cuando el usuario pulse sobre el botn de envo.
Para crear un formulario el lenguaje HTML proporciona la etiqueta
FORM. Al contrario que la mayora de etiquetas que hemos visto en
los ltimos captulos sta existe desde la especificacin HTML 2.0 y
por tanto es entendida prcticamente por cualquier navegador
existente actualmente, por lo que puede ser usada con total libertad.
Esta etiqueta consta de una instruccin de inicio, <FORM>, y una
instruccin de fin, </FORM>, entre las cuales podremos insertar
todos los controles que deseemos. Dicho esto podemos crear
nuestra primera pgina con un formulario. En ella adelantaremos
uno de los controles ms usados y sobre el que ya hemos hablado
antes: la caja de texto. Un poco ms adelante la trataremos ms en
detalle, pero la usaremos en este ejemplo para hacernos una idea
de cmo se crea un formulario en una pgina Web. Para empezar,
como siempre que creamos una pgina nueva, creamos un archivo
nuevo en nuestro editor de texto o nuestro editor HTML. En l
debemos insertar el siguiente cdigo:
<HTML>
<HEAD>
<TITLE>Formulario de ejemplo</TITLE>
</HEAD>
<BODY>
<H1>FORMULARIO DE EJEMPLO</H1>
<FORM>
Introduzca su nombre: <INPUT TYPE="Text">
</FORM>
</BODY>
</HTML>
Guardamos el archivo con un nombre de nuestra eleccin y lo
abrimos con el navegador. El resultado ser muy similar, si no igual,
al que apreciamos en la figura 12.3. La caja de texto es el elemento
que sigue al texto 'Introduzca su nombre:'. En este caso estamos
usando para visualizarla el navegador Internet Explorer para
Windows 95, por lo que la caja de texto tiene el aspecto habitual en
este sistema operativo. Si visualizamos este mismo cdigo desde
un navegador de UNIX o Macintosh la caja de texto sera mostrada
con la apariencia habitual en estos entornos.
Figura 12.3. Nuestro primer formulario est compuesto por una
caja de texto. Para introducirla hemos usado la etiqueta INPUT
con TYPE="text".

La gran novedad de la caja de texto respecto a todos los elementos

de las pgina Web que hemos visto hasta ahora es que permite a
los usuarios introducir texto en ella. Para ello no tenemos ms que
pulsar con el ratn sobre ella (o seleccionarla en el caso de
navegadores de texto) y escribir como si estuvisemos en un editor
de texto. El texto aparecer segn lo vamos escribiendo. Una vez
hemos escrito nuestro nombre (ver figura 12.4) enviaremos los
datos pulsando la tecla ENTER.
Figura 12.4. Pulsando sobre la caja de texto nos aparecer un
cursor parpadeante que nos indica que podemos empezar a
escribir texto.

En este ejemplo todava no hemos indicado al navegador dnde

debe enviar los datos. Esto se hace con el atributo ACTION de la
etiqueta FORM, que ser visto un poco ms adelante. Al no
indicar la direccin de destino el navegador no mandar los datos
al pulsar la tecla ENTER (o pulsar el botn de envo), aunque por
ahora nos olvidaremos de este detalle.
Pero no exista un botn de envo? Si, en los ejemplos de la figura
12.1 y 12.2 veamos que ambos formularios constaban de un botn

de envo sobre el que haba que pulsar para mandar los datos. En
los casos en los que el formulario conste de ms de un control, es
decir, de ms de un campo de entrada de datos, ser necesario
incluir el botn. Si el formulario simplemente tiene uno, como ocurre
en este primer ejemplo que hemos realizado nosotros, el navegador
es capaz de entender que al pulsar la tecla ENTER el usuario
quiere mandar los datos de ese formulario, y por tanto el uso de
botn de envo es opcional.
Los botones de envo son mostrados como enlaces normales en
los navegadores de slo texto, y por tanto sera ms correcto usar
tambin el termino 'enlace para enviar el formulario' . Sin
embargo, por simplicidad, seguiremos usando nicamente el
trmino botn.
Bien, pero cmo se crea un botn de envo? El lenguaje HTML
consta de una etiqueta, INPUT, que permite insertar varios tipos de
controles, entre los que se encuentra el botn de envo. Para indicar
el tipo de control que queremos insertar se usa el atributo TYPE.
Para crear el botn de envo debemos usar TYPE="submit". Por
tanto si en el ejemplo anterior queremos insertar uno, debemos
aadir esta etiqueta (de ahora en adelante omitiremos las etiquetas
HTML, HEAD y BODY, pero por supuesto debe seguir usndose):
<H1>FORMULARIO DE EJEMPLO</H1>
<FORM>
<P>Introduzca su nombre: <INPUT TYPE="Text">
<P><INPUT TYPE="Submit">
</FORM>
Si visualizamos este cdigo con un navegador, veremos que la caja
de texto est acompaada ahora de un botn con un texto que
invita a pulsarlo para mandar los datos. En la figura 12.5 vemos que
al visualizar este ejemplo con Internet Explorer 4.0 aparece el texto
'Enviar consulta' en el botn, este texto ha sido puesto por defecto
por este navegador, pero si visualizamos este cdigo con otro
puede cambiar. Si el navegador usado es una versin inglesa, el
texto del botn estar en ingls. Esta situacin es poco deseable en
la mayora de las ocasiones, por los que se cre un atributo,
VALUE, que nos permitir especificar nosotros mismos el texto que
queremos que sea mostrado en el botn. As en podemos reescribir
el cdigo para insertar el botn como:
Figura 12.5. Usando el cdigo <INPUT TYPE="submit">
podemos insertar un botn de envo de manera que al pulsar
sobre l se envan los datos del formulario.

<P><INPUT TYPE="Submit" VALUE="Enveme">

Con lo que el resultado obtenido sera el que apreciamos en la
figura 12.6. En este caso en el botn el mensaje es 'Enveme' y ser
ste siempre, independientemente del navegador que usemos para
visualizar la pgina. En esta misma figura podemos apreciar que el
tamao del botn se adapta a la longitud del texto que pongamos
en l.
Figura 12.6. Con el atributo VALUE podemos cambiar el texto
por defecto del botn de envo por uno de nuestra eleccin. El
ancho del botn se adaptar a la longitud del texto.

Aunque lo habitual es incluir un nico botn de envo el lenguaje

HTML permite la posibilidad de incluir varios. En este caso debemos
usar un nuevo atributo, NAME, para dar un nombre a cada uno que
permita al servidor diferenciar cual se ha pulsado. Este nombre ser
enviado junto con los datos cuando se pulse sobre el botn. De esta
forma es posible realizar acciones diferentes dependiendo de s se
pulsa uno u otro. Por ejemplo podan incluirse botones que

simulasen distintas direcciones a las que acceder tras introducir los

datos:
<INPUT TYPE="Submit" VALUE="Arriba" NAME="arriba">
<INPUT TYPE="Submit" VALUE="Izquierda"
NAME="izquierda">
<INPUT TYPE="Submit" VALUE="Derecha" NAME="derecha">
<INPUT TYPE="Submit" VALUE="Abajo" NAME="abajo">
Es importante indicar que el atributo NAME no debe usarse
nicamente para el botn de envo. A continuacin aprenderemos a
insertar los distintos tipos de controles existentes y crearemos
formularios ms complejos que hasta ahora, por esta razn
deberemos usar NAME en cada uno de los controles. Cuando se
pulse el botn de envo se enviar los datos de cada control junto
con el nombre especificado con este atributo. De esta forma el
servidor podr saber el control en que se ha insertado cada dato.
Recordemos brevemente todos los atributos de la etiqueta INPUT
cuando la usamos para insertar el botn de envo:
<INPUT TYPE="Submit" NAME="Nombre" VALUE="Texto del
botn">
Pasemos, sin esperar ms tiempo, a estudiar cada uno de los
controles existentes en el lenguaje HTML.
68. Controles de Formularios (I)
Anterior | Inicio | Siguiente
Todos los controles que pueden usarse a la hora de crear un
formulario permitirn al navegante insertar informacin. Unas veces
esta informacin consistir en la insercin de un texto, que podr
ser de una sola lnea o varias y que podr estar oculto o no. En
otras ocasiones se ofrecer entre una serie de opciones entre las
que simplemente hay que elegir una o varias. Todo ello se podr
realizar de diferentes formas que ahora mismo comenzamos a
estudiar.
Para empezar vamos a ver una serie de controles todos los cuales
se crean con la etiqueta INPUT. Para diferenciar entre unos
controles y otros se har uso del atributo TYPE que puede tomar los
siguientes valores: text, password, radio, checkbox, submit, image,
reset, file y hidden. Adems del atributo TYPE, esta etiqueta consta
de algunos ms cuya funcin variar del tipo de control estemos
insertando, es decir, en funcin del valor del atributo TYPE. Uno
comn a todos es NAME, ya mencionado, con el que damos un
nombre al control, y que es recomendable usarlo siempre. Otro

tambin comn a todos ser ALIGN, que explicaremos con las cajas
de texto.
Una vez hecho este comentario, podemos empezar a estudiar cada
uno de los tipos de control uno a uno.
Cajas de texto
Ya hemos introducido antes las cajas de texto. Como resumen
recordaremos que para insertar este tipo de control en una pgina
Web se usa la etiqueta INPUT (esta misma etiqueta ser la utilizada
para insertar la mayora de controles), con TYPE="text". Es decir:
<FORM>
<INPUT TYPE="text">
</FORM>
Si nuestra intencin es insertar ms de un control ser conveniente
darle un nombre a la caja de texto. Para ello usaremos, tal y como
hacamos con el botn de envo, el atributo NAME:
<FORM>
<INPUT TYPE="text" NAME="mitexto">
</FORM>
Como podemos apreciar la etiqueta INPUT consta de una nica
instruccin. Ya hemos visto los atributos TYPE y NAME que existe
siempre en la etiqueta INPUT. Cuando insertamos una caja de
texto, es decir, cuando ponemos TYPE="text" existen otros dos:
SIZE:
Determina la anchura de la caja de texto. El valor por defecto de
este atributo es 20 caracteres, esta es la longitud de los ejemplos
que veamos en las figuras 12.3 a 12.6. En ocasiones convendr
decrementar o incrementar este valor por defecto, pero en todo
caso siempre ser conveniente mantener un valor menor de 50
caracteres de manera que la caja de texto quepa en la mayora de
pantallas. Un problema adicional que dificulta una correcta eleccin
del tamao de la caja es que este tamao ser considerado de
distinta forma por los distintos navegadores y ms an si estos son
de distintos sistemas operativos. En la figura 12.7 podemos ver una
serie de cajas de texto de diferentes tamaos y las diferencias entre
Internet Explorer y Netscape Navigator al mostrar el mismo cdigo.
Figura 12.7. El atributo SIZE nos permite variar la longitud de la
caja de texto. Debemos tener en cuenta que en diferentes
navegadores un mismo valor no se corresponde a una misma
longitud.

MAXLENGTH:
Con este atributo limitamos el nmero mximo de caracteres que
pueden ser escritos en una caja de texto. El valor de este atributo
puede ser mayor o menor que el especificado en SIZE, y que es
totalmente independiente. Si es mayor cuando lleguemos al final de
la caja de texto los nuevos caracteres que insertemos irn
desplazando hacia la izquierda a los primeros, que dejarn de estar
a la vista (OJO, esto no quiere decir que sean borrados). Para
entender el funcionamiento es mejor comprobarlo in situ con unos
ejemplos. Recomendamos al lector que pruebe a visualizar los
siguientes cdigos, y que intente escribir una frase algo larga en
cada uno de ellos:
<INPUT TYPE="text" SIZE="20" MAXLENGTH="20">
<INPUT TYPE="text" SIZE="20" MAXLENGTH="5">
<INPUT TYPE="text" SIZE="20" MAXLENGTH="40">
Por ltimo queda decir que si no usamos el atributo MAXLENGTH el
nmero de caracteres que pueden introducirse en la caja de texto
no tendr lmite.
VALUE:
Sirve para especificar un texto que debe aparecer por defecto en la
caja de texto, antes de que el usuario escriba nada. Este texto suele
ser, en general, o bien instrucciones o bien la respuesta ms
probable. Veamos un ejemplo que ilustra estos dos casos:
<FORM>
<P>Nombre:<INPUT TYPE="text" VALUE="Introduzca aqu su

nombre">
<P>Le gusta nuestro Web? <INPUT TYPE="text" VALUE="Si,
muchsimo">
</FORM>
Invitamos al lector a que pruebe este ejemplo en su navegador y
compruebe los resultados.
Alineamiento de controles.
Tal y como hemos indicado antes, todos los controles que
insertamos con la etiqueta INPUT tienen un atributo, llamado
ALIGN, que nos permitir seleccionar entre varios tipos de
alineamiento. Este atributo apareci en el estndar HTML 3.2, al
contrario que el resto de etiquetas y atributos que hemos visto hasta
ahora en este captulo, que existen desde la versin anterior del
estndar (HTML 2.0).
El atributo ALIGN puede tomar los siguientes valores:
ALIGN="top":
Alinea verticalmente el control con la parte superior de la lnea en
que es insertado.
ALIGN="bottom":
Alinea verticalmente el control con la parte inferior de la lnea.
ALIGN="middle":
Sita el control a una altura media entre el resto de elementos de la
lnea.
ALIGN="left":
En este caso estamos alineando el control horizontalmente a la
izquierda. Al contrario de lo que ocurra con las imgenes y con las
tablas, el texto no bordear el control por su derecha, situndose
ste en una lnea propia. En la figura 12.8 podemos ver un ejemplo
de este tipo de alineamiento y del siguiente:
Figura 12.8. El atributo ALIGN de la etiqueta INPUT nos permite
alinear los controles. En este caso vemos una caja de texto
alineada a la izquierda (ALIGN="left").

ALIGN="right":
Este valor es idntico al anterior en funcionamiento, slo que ahora
el control se situar a la derecha de la ventana del navegador.
Todos el atributo ALIGN y todos estos valores existen para todos los
controles que veamos a partir de ahora y que usen la etiqueta
INPUT.
Para terminar con las cajas de texto veamos un resumen de todos
sus atributos y sus funciones:
<INPUT TYPE="text" NAME="nombre" VALUE="valor por defecto"
SIZE="tamao"
MAXLENGTH="longitud_mxima"
ALIGN="alineamiento">
Cajas de texto para claves
En ocasiones puede ser conveniente pedir al usuario algn tipo de
informacin confidencial como puede ser una clave de acceso o
password. Debemos tener en cuenta que algunos usuarios pueden
estar en algn lugar pblico o, al menos, con gente alrededor que
pueden leer lo que escriba en la pantalla y por tanto no le interesar
que lo que escribe sea mostrado en sta. El lenguaje HTML permite
utilizar, en estos casos, una caja de texto modificada en la que al
escribir se mostrarn nicamente asteriscos. Para ello debemos
usar TYPE="password" en la etiqueta INPUT. Un ejemplo tpico de
uso de password es al pedir una identificacin, por ejemplo para
entrar en algunas secciones de una pgina. Para crear este
formulario podemos usar el siguiente cdigo:
<H2><FONT
COLOR="#8080FF">Formulario
de

autenticacin</FONT></H2>
<FORM>
<P>Introduzca su nombre: <INPUT TYPE="text" NAME="nombre">
<P>Introduzca su clave: <INPUT TYPE="password"
NAME="clave">
<P><INPUT TYPE="submit" VALUE="Enviar">
</FORM>
Visualizando este cdigo con Explorer obtenemos el resultado de la
figura 12.9. En ella vemos como el texto que hemos escrito en el
segundo campo, el de la caja de texto para passwords, no ha sido
mostrado siendo sustituido por asteriscos.
Figura 12.9. Las cajas de texto para claves muestran asteriscos
en lugar del texto que escribimos para aumentar la
confidencialidad.

La caja de texto para claves o passwords simplemente impide

que el texto que se escribe sea mostrado en pantalla, sin
embargo este texto no es codificado al ser mandado al servidor
Web, y por tanto no es seguro mandar datos confidenciales.
Las cajas de texto para claves tambin tienen los atributos SIZE,
MAXLENGTH, VALUE y ALIGN que vimos en las cajas de texto. Al
igual que hicimos con estas, veamos un resumen de todos los
atributos de las cajas de texto para claves:
<INPUT TYPE="password" NAME="clave" SIZE="tamao"
MAXLENGTH="longitud_mxima" VALUE="clave por defecto"
ALIGN="alineamiento">
69. Controles de Formularios (II)

 Anterior | Inicio | Siguiente

Botones de eleccin
Estos controles reciben tambin el nombre de botones de radio,
como traduccin directa de su denominacin inglesa radio buttons y
porque en general los navegadores suelen darles una forma
circular. Para insertar un botn de eleccin usaremos de nuevo la
etiqueta INPUT, pero esta vez el valor del atributo TYPE ser radio:
<FORM>
<INPUT TYPE="radio">
</FORM>
Este tipo de controles tiene dos estados o posiciones: seleccionado
(ON) o no seleccionado (OFF), estando inicialmente todos en la
posicin OFF. Tambin es posible especificar que un botn
determinado est seleccionado inicialmente insertando el atributo
CHECKED en la etiqueta INPUT de la siguiente manera:
<INPUT TYPE="radio" CHECKED>
Los botones de eleccin suelen ser insertados en los formularios en
grupos, dando al usuario la posibilidad de elegir entre una serie de
opciones. Cuando pulsamos sobre un botn de radio le pasamos a
la posicin ON y permanecer en ese estado hasta que pulsemos
en otra opcin del mismo grupo. Esto es as porque entre los
botones de radio de un mismo grupo slo uno de ellos puede estar
seleccionado, por tanto cuando seleccionamos uno, aquel que
estuviese seleccionado previamente dejar de estarlo.
Para indicar que una serie de botones de eleccin pertenecen a un
mismo grupo debemos incluir el mismo valor en el atributo NAME
en todos ellos. Adems debemos usar el atributo VALUE para dar
un nombre distinto a cada uno de los botones. Veamos un ejemplo:
Indique el tipo de msica que ms le guste:
<FORM>
<P><INPUT TYPE="radio" NAME="musica" VALUE="Jazz">Jazz
<P><INPUT TYPE="radio" NAME="musica" VALUE="Pop">Pop
<P><INPUT TYPE="radio" NAME="musica" VALUE="Rock">Rock
<P><INPUT
TYPE="radio"
NAME="musica"
VALUE="Country">Country
</FORM>
Con este cdigo obtenemos el resultado que apreciamos en la
figura 12.10. En ella vemos que nicamente el botn de radio
correspondiente a 'Pop' est seleccionado. Invitamos al lector a que

pruebe este ejemplo y observe cmo al seleccionar otro de los

botones de eleccin el anterior deja de estar seleccionado.
Figura 12.10. Los botones de eleccin permiten elegir entre un
conjunto de opciones, de las cuales podemos elegir slo una.

Por supuesto, es posible incluir varios grupos de botones de

seleccin dentro de un mismo formulario. Por ejemplo al cdigo
anterior podramos aadirle (antes de </FORM>) este otro:
<P><INPUT
TYPE="radio"
NAME="cine"
VALUE="Accion">Acci&oacute;n
<P><INPUT
TYPE="radio"
NAME="cine"
VALUE="Comedia">Comedia
<P><INPUT
TYPE="radio"
NAME="cine"
VALUE="CienciaFiccion">Ciencia-Ficci&oacute;n
<P><INPUT TYPE="radio" NAME="cine" VALUE="Drama">Drama
De esta manera tendramos el formulario de la figura 12.11 en la
que vemos que se ha podido seleccionar 'Pop' como tipo de msica
favorito y 'Ciencia-ficcin' como gnero cinematogrfico preferido, al
pertenecer los botones a distintos grupos.
Figura 12.11. En un mismo formulario podemos incluir varios
grupos de botones de eleccin. Los visitantes podrn
seleccionar una opcin en cada uno.

Quiz el lector haya tenido ya la siguiente duda. Si en las cajas de

texto se manda al servidor el texto que introduzca el usuario, qu
se enva cuando usamos botones de eleccin? La respuesta es
simple. Por un lado es necesario enviar el nombre del grupo (el
valor del atributo NAME) y por otro la opcin elegida (el valor del
atributo VALUE). En el ejemplo anterior en el que se han
seleccionado 'Pop' y 'Ciencia- Ficcin' se enviar el siguiente
mensaje:
musica=Pop
cine=CienciaFiccion
En realidad, el mensaje que se enva no es exactamente el
anterior, ya que ste es codificado. An as las diferencias no son
muchas, y en este caso el mensaje, ya codificado, que se
enviara
constara
de
una
nica
lnea:
musica=Pop&cine=CienciaFiccion.
Veamos un resumen de los atributos de este control:
<INPUT
TYPE="radio"
NAME="Nombre_del_grupo"
VALUE="Nombre_de_esta_opcin" ALIGN="alineamiento">

Cajas de seleccin
Las cajas de seleccin guardan ciertos parecidos con los botones
de radio, pero adems permitirn seleccionar varias opciones en
una lista. Al igual que dichos botones tienen dos posiciones,
seleccionados o no seleccionados, estando en esta ltima posicin
inicialmente, a no ser que hayamos usado el atributo CHECKED.
Cada caja de seleccin es independiente del resto, y por tanto el
valor del atributo NAME debe ser diferente en cada una.
Para insertar una caja de seleccin debemos usar de nuevo la
etiqueta INPUT, pero esta vez con TYPE="checkbox". Veamos un
ejemplo de uso de este tipo de controles:
Indique su profesin (escoja todas las que procedan):
<FORM>
<P><INPUT TYPE="checkbox" NAME="medico">Mdico
<P><INPUT
TYPE="checkbox"
NAME="programador"
CHECKED>Programador
<P><INPUT TYPE="checkbox" NAME="abogado">Abogado
<P><INPUT TYPE="checkbox" NAME="ingeniero">Ingeniero
<CENTER><INPUT TYPE="submit" VALUE="Enviar"></CENTER>
</FORM>
Pulsando sobre cada caja de seleccin se cambia de seleccionado
a no seleccionado, independientemente de la posicin del resto. En
el cdigo podemos apreciar que es posible indicar que una caja de
seleccin est seleccionada por defecto. En la figura 12.12 vemos
este ejemplo, y podemos apreciar como es posible seleccionar
varias opciones simultneamente.
Figura 12.12. Las cajas de seleccin son independientes unas
de otras, por los que es posible tener varias seleccionadas.

Con las cajas de seleccin tambin podemos usar el atributo

VALUE, en este caso no ser imprescindible, ya que el nombre
dado con NAME es diferente en cada caso, pero a veces puede ser
conveniente. En el caso de la figura se mandara al servidor el
siguiente mensaje:
programador=ON&ingeniero=ON
Si hubisemos usado el atributo VALUE se sustituira la palabra ON
(que es la que se pone por defecto) por la que nosotros hubisemos
indicado en las cajas de seleccin con las opciones 'programador' e
'ingeniero'. Por ejemplo si en el cdigo anterior hubisemos escrito
lo siguiente en el cdigo de la caja del ingeniero, dejando el resto
igual:
<P><INPUT
TYPE="checkbox"
NAME="ingeniero"
VALUE="SI">Ingeniero
El navegador hubiera enviado el mensaje:
programador=SI&ingeniero=ON
Todos los atributos de este control quedan resumidos en el
siguiente cdigo:
<INPUT TYPE="checkbox" NAME="Nombre" ALIGN="alineamiento"
VALUE="valor_que_debe_enviarse">
Imgenes

El lenguaje HTML permite una manera alternativa para insertar un

botn de envo personalizado, al poder usar en lugar del botn
normal que hemos visto anteriormente una imagen creada por
nosotros mismos. Para insertar este tipo de control debemos usar
TYPE="image", mientras que la direccin de la imagen se indica
con el atributo SRC al igual que hacamos con la etiqueta IMG.
Aprovecharemos el ejemplo de este tipo de control para realizar un
formulario que englobe lo visto hasta ahora.
Ejemplo 12.1.
Hemos elegido como motivo del formulario un sistema de reserva
de habitaciones de un hotel. El usuario deber introducir ciertos
datos y enviar posteriormente la reserva. Comenzamos el formulario
creando un archivo nuevo y escribiendo la estructura bsica de la
pgina:
<HTML>
<HEAD>
<TITLE>Botn de envo personalizado</TITLE>
</HEAD>
<BODY BGCOLOR="#B6D6B6">
</BODY>
</HTML>
A continuacin insertamos un encabezado y la etiqueta FORM,
donde iremos insertando los distintos controles de los que consta el
formulario (todo el cdigo que mostremos de ahora en adelante en
este ejemplo debe introducirse entre las instrucciones <BODY ...> y
</BODY>):
<CENTER><H2><FONT
COLOR="#8080FF">Hoteles
El
Paraso</FONT></H2></CENTER>
<H3>Sistema de reserva de habitaciones:</H3>
<FORM>
</FORM>
Los colores que hemos elegido ahora para el encabezado como
antes para el color de fondo pueden ser cambiados por el lector a
su gusto.
Es hora de insertar los controles. En primer lugar debemos
introducir un campo para preguntar el nombre. Para ello lo ms
indicado es usar una caja de texto, elegimos un tamao de 30
caracteres con el atributo SIZE y no usamos MAXLENGTH para no
limitar la longitud del nombre que se pueda insertar. Adems

introducimos un segundo campo donde debe insertar una clave

secreta, que debe elegir el mismo usuario, y que le servir para
identificarse cuando llegue al hotel junto con su nombre. En este
caso usaremos una caja de texto para claves. Dado que la clave
slo puede constar de 4 caracteres limitamos el tamao de la caja
(SIZE) y la longitud del texto que se puede escribir (MAXLENGTH)
a este valor:
<FORM>
<P>Introduzca su nombre: <INPUT TYPE="text" NAME="nombre"
SIZE="30"></P>
<P>Introduzca una clave para su identificacin (4 letras): <INPUT
TYPE="password" NAME="clave" SIZE="4" MAXLENGTH="4"></P>
<!-- aqu iremos insertando el resto del cdigo -->
</FORM>
Veamos lo que llevamos. Visualizando el cdigo que hemos escrito
hasta ahora obtenemos el resultado de la figura 12.13.
Figura 12.13. Este es el aspecto que tiene el cdigo que hemos
escrito hasta ahora. En el formulario de la clave slo se podrn
insertar 4 caracteres.

El siguiente paso ser preguntar al usuario qu tipo de habitacin

desea reservar. Existen dos opciones, una habitacin individual o
una habitacin doble. Para ofrecer estas dos respuestas posibles
resultan idneos los botones de radio, ya que slo una de las dos
pueden ser seleccionadas simultneamente. Los dos botones que
necesitamos deben estar en el mismo grupo, para lo cual usamos

NAME="habitacin", para diferenciarlas ponemos diferentes valores

en el atributo VALUE:
<FORM>
<!-- ... -->
<P>Tipo de habitacin</P>
<INPUT
TYPE="radio"
NAME="tipoHabitacion"
VALUE="individual">Individual &nbsp;&nbsp;
<INPUT TYPE="radio" NAME="tipoHabitacion" VALUE="doble"
CHECKED>Doble
</FORM>
Los espacios &nbsp han sido usados para separar ambas opciones,
ya que estn en la misma lnea. La cadena "<!-- ... -->" simplemente
hace referencia a que en ese lugar va el cdigo que hemos escrito
antes para preguntar el nombre y la clave, aunque no lo repitamos
de nuevo. De ahora en adelante lo usaremos para indicar 'aqu va
el cdigo escrito anteriormente'.
A continuacin los dueos del hotel desean ofertar una serie de
extras especiales junto con la habitacin, de las cuales pueden
elegirse (de manera independiente) las que se deseen. Las cajas de
seleccin sern los controles que debemos usar en este caso.
<FORM>
<!-- ... -->
<P>Opciones extra:</P>
<INPUT
TYPE="checkbox"
NAME="desayuno"
CHECKED>Desayuno en cama &nbsp;&nbsp;
<INPUT TYPE="checkbox" NAME="jakuzzi">Jakuzzi &nbsp;&nbsp;
<INPUT TYPE="checkbox" NAME="climatizador">Climatizador
</FORM>
Por peticin de los dueos, que quieren promocionar este servicio,
hemos preseleccionado el desayuno en cama inicialmente usando
el atributo CHECKED.
El ltimo paso ser insertar el botn de envo. Podramos
simplemente usar:
<INPUT TYPE="submit" VALUE="Enveme">
Pero en este caso seremos algo ms originales y nos crearemos
nuestro propio botn. Para ello nicamente necesitaremos un
programa de dibujo y algo de creatividad. Una vez dibujado el botn
debemos guardarlo en formato GIF o JPG, y lo ponemos en el

mismo directorio donde est la pgina que estamos creando. En

nuestro caso hemos llamado a la imagen envio.gif. El cdigo para
insertar esta imagen de manera que sirva como botn de envo
ser:
<FORM>
<!-- ... -->
<CENTER>
<INPUT
TYPE="image"
NAME="envio"
SRC="envio.gif">
</CENTER>
</FORM>
Con esto que podemos dar por concluido el formulario. En la figura
12.14 podemos apreciar el resultado de visualizar este formulario
con el navegador Internet Explorer 4.0. Este es el aspecto inicial,
con las opciones 'Doble' y 'Desayuno en cama' preseleccionados al
usar el atributo CHECKED.
Figura 12.14. Este es el resultado final del formulario del
ejercicio 12.1 en el que destaca el uso de una imagen
personalizada como botn de envo.

El navegador Explorer permite el uso de los atributos WIDTH y

HEIGHT para indicar el tamao de las imgenes de formularios.
Tambin permite usar otros atributos de la etiqueta IMG como
VSPACE y HSPACE para controlar los mrgenes verticales y
horizontales alrededor de la imagen y BORDER para controlar el

grosor del borde.

En este ejemplo hemos usado una imagen creada por nosotros
mismos como sustituto del botn de envo estndar. Sin embargo
las imgenes de formulario tienen una funcin extra, ya que el
navegador enva, cuando el usuario pulsa una imagen, las
coordenadas 'x' e 'y' sobre las que se ha pulsado, en relacin a la
esquina superior izquierda, como si fueran parte de la informacin
del formulario. De esta forma el servidor Web puede realizar
diferentes acciones en funcin del lugar de la imagen donde se ha
pulsado. De hecho este es un mtodo alternativo para crear una
imagen mapa. Para ello no tenemos ms que usar el cdigo:
<FORM>
<INPUT TYPE="image" SRC="imagenmapa.gif">
</FORM>
Posteriormente debemos crear un programa en el servidor que sea
capaz de leer los datos (es decir, las coordenadas donde se ha
pulsado) de este formulario y devolver la respuesta oportuna. Ms
sobre esto en la seccin 'Como usar los datos de un formulario' que
veremos ms adelante.
En el captulo 6 vimos la diferencia entre las imgenes mapa en el
servidor y las imgenes mapa en el cliente (las que podamos crear
con el lenguaje HTML). Este nuevo tipo se corresponde con las
procesadas con el servidor, y por tanto tiene el inconveniente de
necesitar un programa externo que se ejecute en el servidor, por lo
que no nos basta con el lenguaje HTML.
Para terminar con las imgenes de formulario veremos, como
hemos venido haciendo hasta ahora, un resumen con sus atributos:
<INPUT TYPE="image" SRC="URL" NAME="Nombre">
70. Controles de Formularios (III)
Anterior | Inicio | Siguiente
Botn de borrado
La mayora de los controles anteriores permitan al usuario
introducir una serie de datos o elegir entre una serie de opciones.
Inicialmente las cajas de texto aparecan vacas, a no ser que
hubisemos usado el atributo VALUE para asignarles por defecto.
Igualmente los botones de eleccin y cajas de seleccin aparecan
en posicin de no seleccionados a no ser que hubisemos indicado
lo contrario usando el atributo CHECKED. Una vez a cargado la
pgina con el formulario en blanco o con unas opciones por defecto
el navegante puede actuar sobre los controles y modificar sus

valores (en esto se basa la interactividad). Pero quizs en algn

momento decida que quiere dar marcha atrs y recuperar los datos
que aparecieron al principio. Con este fin existe en el lenguaje
HTML un control que permite borrar los datos actuales de todos los
campos del formulario y restablecer los valores por defecto, si es
que los haba. Este control recibe el nombre de botn de borrado o
botn de reseteado (reset button ). La creacin de este control es
muy sencilla. De nuevo usaremos la etiqueta INPUT, esta vez con
TYPE="reset":
<INPUT TYPE="reset">
Este cdigo provocar la aparicin de un botn como el botn de
envo con un texto por defecto que indica su funcin. Por ejemplo
Internet Explorer 4.0 muestra el mensaje 'Restablecer'. Este texto
depender del navegador que usen los visitantes de nuestra pgina,
y dado que esto no siempre es deseable podemos usar el atributo
VALUE, al igual que hacamos con el botn de envo, para
especificar el texto que prefiramos. Veamos un ejemplo algo ms
completo:
<H2>
<FONT COLOR="#8080FF">
Formulario de identificacin
</FONT>
</H2>
<FORM>
<P>Introduzca su nombre:
<INPUT TYPE="text"
NAME="nombre"
VALUE="Introduzca su Nombre"
SIZE="30">
<P>Sexo:
<INPUT TYPE="RADIO"
NAME="sexo"
VALUE="hombre"
CHECKED>Hombre
<INPUT TYPE="RADIO"
NAME="sexo"
VALUE="mujer">Mujer
<P>Comentarios:
<INPUT TYPE="text"

NAME="comentarios"
SIZE="40">
<P>
<INPUT TYPE="submit"
VALUE="Enviar">
<INPUT TYPE="reset"
VALUE="Restablecer">
</FORM>
En la figura 12.15 podemos ver este formulario con unos datos
introducidos por un usuario (arriba) y tras pulsar el botn de borrado
(abajo). Si no hubisemos puesto unos valores por defecto en
nuestro cdigo HTML los datos campos simplemente se hubieran
quedado vacos.
Figura 12.15. El botn de borrado (<INPUT TYPE="reset" >)
permite al usuario borrar los datos introducidos y recuperar los
iniciales.

Al igual que hemos hecho con los controles anteriores concluiremos

con un resumen del cdigo del botn de borrado. En ste hemos
incluido el atributo NAME, que, como comentamos al principio, est
presente en todos los controles:
<INPUT TYPE="reset"
NAME="nombre"
VALUE="Texto del botn">

Botn genrico
Para completar la coleccin de botones de los formularios, nos
encontramos con la posibilidad de insertar un botn genrico, es
decir, que no tiene ninguna funcin definida, sino la que nosotros

queramos darle. Para insertar un botn genrico usaremos la

etiqueta INPUT con TYPE="button":
<INPUT TYPE="button"
VALUE="Pulseme">
Las acciones que debe llevar a cabo este botn al ser pulsado slo
pueden indicarse con lenguajes de script como JavaScript o
VBScript y no con HTML estndar. Para insertar el cdigo de estos
lenguajes se usa el atributo ONCLICK:
<INPUT TYPE="button"
VALUE="Texto del botn"
ONCLICK="cdigo de script">

No todos los navegadores soportan los lenguajes de script, y por

tanto el botn genrico debe ser considerado como una extensin.
Si lo usamos debemos ser conscientes que nicamente los
navegadores que soporten el script usado podrn hacer uso suyo.
Por ahora no nos adentraremos en ningn lenguaje de script, ya
que ms adelante en esta obra, stos sern tratados ms en
detalle, pero mostraremos dos ejemplos sencillos que ilustran el
funcionamiento de este tipo de botones. Estos ejemplos han sido
probados con los navegadores Internet Explorer y Netscape
Navigator en sus versiones 3.0 y posteriores, pero pueden no
funcionar con otros navegadores.
El primero consistir en un botn cuya funcin ser cerrar una
ventana del navegador. El cdigo necesario ser:
<FORM>
<INPUT TYPE="button"
VALUE="Cerrar ventana"
onClick="window.close();">
</FORM>

Es probable que al pulsar el botn nos aparezca un mensaje de

aviso del navegador pidindonos confirmacin para cerrar la
ventana (ver figura 12.16).
Figura 12.16. Los botones genricos tienen multitud de usos,
entre los ms usados nos encontramos con el botn enlace y
el botn para cerrar una ventana, que, como todos, requieren
hacer uso de un lenguaje de script.

El segundo ejemplo es ms usado an y consiste en usar el botn

con la misma funcin que un enlace hipertexto. El resultado es ms
atractivo, pero debemos usarlo con moderacin, ya que no todos los
visitantes tendrn navegadores que entiendan este cdigo:
<FORM>
<INPUT TYPE="button"
VALUE="Cargar otra ventana"
onClick="window.location.replace
('button2.html');">
</FORM>
En el directorio botones podemos encontrar un archivo con ambos
cdigos para que el lector pueda probarlos. En la figura 12.16
vemos una muestra de este documento junto con el cuadro de

dilogo con el que Internet Explorer 4.0 pide confirmacin para

cerrar la ventana tras pulsar el botn del primer ejemplo.
El nuevo estndar HTML 4.0 introduce una nueva etiqueta para
insertar botones en nuestra pgina: BUTTON. Esta etiqueta tiene
un atributo, llamado TYPE, que nos permitir elegir entre los tres
tipos de botones disponibles: envo (TYPE=submit), borrado
(TYPE=reset) o genrico (TYPE=button). La gran innovacin de
esta etiqueta es que podemos insertar en el botn imgenes o
texto formateado con cdigo HTML. Veamos un ejemplo de cmo
funcionar BUTTON:
<BUTTON name="reset"
type="restablecer">
Restablecer<IMG src="pics/imagen.gif"
alt=" ">
</BUTTON>
El texto e imagen entre la instruccin de inicio y la de fin se
insertarn en el botn.
71. Controles de Formularios (IV)
Anterior | Inicio | Siguiente
Campos ocultos
Los campos ocultos son un tipo de control que nicamente sirve
para incluir informacin adicional entre los datos del formulario. Este
tipo de control es invisible, y por tanto el navegador no muestra
ningn tipo de grfico para advertir de su existencia.
Para qu sirve entonces un control oculto?. Si no aparece en la
pgina y el navegante no puede hacer nada con l Cul es su
funcin?. En general, los campos ocultos se usan para enviar
informacin especfica al programa del servidor Web que procesar
los datos enviados, por ejemplo si este programa es capaz de
realizar varias funciones distintas con estos datos, podemos usar un
campo oculto para pasarle la informacin de que debe hacer con los
datos de este formulario concreto (debemos tener en cuenta que
este mismo programa puede procesar la informacin de otros
formularios tambin). An as esta problemtica queda fuerae de lo
que pretendemos abarcar en esta seccin dedicada al lenguaje
HTML.
Los campos ocultos se crean usando la etiqueta INPUT con
TYPE="hidden". Adems debemos usar los atributos VALUE y
NAME, para indicar los datos y su nombre:
<INPUT TYPE="hidden"

NAME="nombre"
VALUE="datos">
Por ejemplo:
<INPUT TYPE="hidden"
NAME="funcion"
VALUE="enviar_mail">
Los formularios vistos desde Lynx
Hasta ahora nos hemos limitado a mostrar como se vean los
controles con navegadores grficos, usando como ejemplo a
Microsoft Internet Explorer 4.0. Pero los formularios pertenecen al
estndar HTML 2.0 y por tanto funcionan con todo tipo de
navegadores, incluidos los que trabajan en modo texto como Lynx.
Es interesante para los programadores de pginas Web conocer
como son mostrados cada uno de los controles que hemos visto
desde este navegador, para hacerse una idea de cmo se vern los
formularios que de sus pginas. Dado que no siempre es fcil
encontrar un ordenador donde comprobar los resultados con Lynx,
mostraremos una serie de capturas en las que hemos usado este
navegador y las comentaremos brevemente.
Lo primero que debemos tener en cuenta es que el botn de envo
no ser grfico, sino que ser similar a un enlace hipertexto, como
ya comentamos en su momento. Las cajas de texto y las cajas de
texto para claves se muestran con una lnea horizontal, y en estas
ltimas lo escrito es sustituido por asteriscos. En la figura 12.17
vemos un ejemplo, un cursor parpadeante (que no puede
apreciarse en una imagen) indica el lugar donde podemos empezar
a escribir:
Figura 12.17. Los navegadores en modo texto como Lynx
tambin son capaces de mostrar formularios, que aunque no
sean grficos tienen la misma funcionalidad.

El cdigo usado es el mismo que el de la figura 12.9, en aquel caso

el navegador usado para mostrar el resultado fue Internet Explorer,
las diferencias son apreciables.

Pero ms interesante an puede ser ver con este navegador

nuestro ejemplo 1 de este captulo (figura 12.14) con Lynx. El
resultado que obtenemos puede ser apreciado en la figura 12.18
donde vemos que este navegador tambin puede mostrar botones
de radio y cajas de seleccin.
Figura 12.18. En esta figura podemos apreciar cajas de texto y
de clave, botones de eleccin y cajas de seleccin tal y como
son mostradas por Lynx.

En este caso es tambin interesante ver que la imagen que

usbamos como botn de envo ha sido sustituido por el texto '
[IMAGE]-Submit', pero sigue funcionando.
Innovaciones de Microsoft
La compaa Microsoft en sus navegadores Internet Explorer 3.0 y
posteriores ha incorporado una serie de extensiones a la etiqueta
INPUT para incrementar las posibilidades de los programadores de
HTML. Estas extensiones afectan a todos los controles que hemos
visto que hacen uso de esta etiqueta.
La primera extensin resultar conocida a los lectores, se trata del
atributo TITLE, y su funcin ser mostrar un bocadillo explicativo
cuando el usuario pase el cursor por encima del control. Veamos un
ejemplo:
<FORM>
<P>Introduzca su nombre:
<INPUT TYPE="text"
NAME="nombre"
TITLE="Introduzca aqu su Nombre"
SIZE="30">
</FORM>

Como podemos ver en la figura 12.19, cuando se mantiene el

cursor un tiempo aparece un bocadillo con fondo amarillo (estndar
de Windows) con el texto 'Introduzca aqu su nombre ':
Figura 12.19. El atributo TITLE es una extensin de Microsoft
que permite dar una descripcin a los controles que ser
mostrada en un bocadillo.

Este atributo puede usarse con entera libertad, a pesar de tratarse

de una extensin, porque los usuarios de Internet Explorer podrn
beneficiarse de ella y los usuarios de navegadores que no lo
entiendan no saldrn perjudicados, simplemente se quedarn igual
que si no lo hubisemos usado.
La segunda extensin est formada por dos atributos: TABINDEX y
NOTAB. Cuando nos encontramos ante un formulario formado por
varios controles, como el del ejemplo 1 (figura 12.14), se puede
usar la tecla tabulador o TAB para pasar de uno a otro. Por defecto
al pulsar esta tecla se pasa al siguiente control en el orden en que
fueron insertados en el cdigo HTML. El atributo TABINDEX nos
permitir cambiar el orden. La forma de usarlo consiste en incluirlo
en todos y cada uno de los controles asignndole un nmero, este
nmero representar la posicin de ese control. El atributo NOTAB,
por su parte indicar que este control est fuera de la lista, y por lo
general ser situado el ltimo de todos. Para entender ambos
atributos mejor es necesario verlo con un ejemplo, para ello
usaremos parte del cdigo del ejemplo 1:
<FORM>
<P>1) Introduzca su nombre:
<INPUT TYPE="text"
NAME="nombre"
TABINDEX="1">
<P>3) Introduzca una clave para su

identificacin (4 letras):
<INPUT TYPE="password"
NAME="clave"
TABINDEX="3">
<P>4) Direccin
<INPUT TYPE="text"
NAME="direccion"
NOTAB>
<P>
2) Tipo de habitacin
</P>
<INPUT TYPE="Radio"
NAME="tipoHabitacion"
VALUE="individual"
TABINDEX="2">
Individual
<INPUT TYPE="Radio"
NAME="tipoHabitacion"
VALUE="doble"
CHECKED
TABINDEX="2">
Doble
</FORM>
Tras introducir el nombre, cuando el usuario pulse el tabulador
pasar a elegir el tipo de habitacin, despus introducir la clave y
por ltimo la direccin. En el directorio ejem2 hemos incluido este
ejemplo para que el lector pueda probarlo y compruebe el
funcionamiento de los atributos TABINDEX y NOTAB. Debemos
recordar que nicamente funcionarn con Internet Explorer 3.0 o
posterior.
La ltima innovacin que ha introducido Microsoft son los atributos
READONLY y DISABLED. Estos atributos funcionan exclusivamente
con Internet Explorer 4.0 (y posteriores), por lo que debemos tener
cuidado al usarlos.
Cuando usamos el atributo DISABLED en un control lo
deshabitamos. En general este atributo nicamente es usado con
cajas de texto. Cuando una caja de texto usa este atributo podr
seguir mostrando texto (si usamos el atributo VALUE para poner un
texto inicial), pero el usuario no podr cambiarlo. Este control
tampoco podr ser seleccionado, prcticamente acta como si no

estuviera. La funcin del atributo READONLY es muy similar, con la

nica diferencia de que el control acta como tal, por ejemplo en
una caja de texto podemos seleccionar con el ratn el texto que hay
en ella, pero tampoco podr modificarse el contenido.
Aunque en la documentacin ofrecida por Microsoft no aparece
as, el atributo READONLY slo funciona correctamente en las
cajas de texto, pero no en los botones de eleccin o en las cajas
de seleccin. Quiz sea un fallo que se solucione en prximas
versiones, pero hoy por hoy, para deshabilitar estos dos ltimos
controles, debemos usar el atributo DISABLED.
Veamos unos ejemplos con cajas de texto y botones de seleccin:
<H2>
Cajas de texto
</H2>
Normal:
<INPUT TYPE="text"
NAME="texto1"
VALUE="Texto inicial">
<BR>
DISABLED:
<INPUT TYPE="text"
NAME="texto2"
VALUE="Texto inicial"
DISABLED>
<BR>
READONLY:
<INPUT TYPE="text"
NAME="texto2"
VALUE="Texto inicial"
READONLY>
<BR>
<H2>
Botones de eleccin
</H2>
Normal:
<INPUT TYPE="radio"
NAME="boton"
CHECKED>
<BR>
DISABLED:
<INPUT TYPE="radio"
NAME="boton"
DISABLED>

<BR>
READONLY:
<INPUT TYPE="radio"
NAME="boton"
READONLY>
<BR>
En la figura 12.20 podemos ver el resultado de visualizar este
cdigo con Internet Explorer 4.0.
Figura 12.20. Los atributos DISABLED y READONLY permiten
deshabilitar un control de manera que slo sirva para mostrar
datos.

En los casos de la caja de texto y el botn de eleccin se observa

claramente que el navegador le da una apariencia distinta para
resaltar que est deshabilitado. En el directorio disabled se ha
incluido este ejemplo aadiendo tambin las cajas de seleccin
para que el lector pueda probarlos.
72. Otros controles
Anterior | Inicio | Siguiente

En esta seccin hemos incluido dos controles ligeramente

diferentes a los que hemos visto hasta ahora, las cajas de texto
multilnea y los cuadros de seleccin. Ambos tienen sus propias
etiquetas de HTML, y por tanto no usarn INPUT.
Cajas de texto multilnea: TEXTAREA
Las cajas de texto multilnea o reas de texto son unos campos que
funcionan de manera similar a un editor de texto muy sencillo en el
que el usuario puede escribir. Al contrario de lo que suceda con las
cajas de texto convencionales (<INPUT TYPE="text">), en esta
ocasin ser posible escribir varias lneas de texto, lo que es muy
til para campos en los que se requiere una respuesta extensa. Por
ejemplo, si deseamos que el usuario pueda escribir el texto de un
mail , o escribir una serie de comentarios largos, las reas de texto
sern tremendamente tiles.
La etiqueta usada para insertar este nuevo control es TEXTAREA,
que consta de cuatro atributos:
NAME: El nombre que queremos asignarle al control. Como
siempre, este nombre ser enviado junto con los datos del rea de
texto al mandar el formulario.
ROWS: El nmero de lneas de la caja de texto.
COLS: El nmero de caracteres visibles de cada lnea. Este atributo
es similar al atributo SIZE que vimos en las cajas de texto
convencionales.
La etiqueta TEXTAREA est compuesta por una instruccin de inicio
y una instruccin de fin, siendo obligatorio el uso de ambas. Entre
ellas nicamente podr insertarse texto llano (sin ninguna etiqueta
HTML) y ste ser mostrado como contenido inicial del rea de
texto. Veamos un ejemplo:
Por favor haga sus comentarios sobre esta pgina.
<FORM>
<TEXTAREA NAME="texto"
ROWS="10"
COLS="50">
Es la mejor que he visto nunca.
</TEXTAREA>
</FORM>
En la figura 12.21 podemos ver este cdigo tal y como es mostrado
por Internet Explorer 4.0:

Figura 12.21. Las reas de texto (<TEXTAREA> </TEXTAREA>)

permiten al usuario introducir texto de varias lneas como si de
un sencillo editor de texto se tratara.

Y en la figura 12.22 el mismo visto con Lynx:

Figura 12.22. Lynx muestra las reas de texto como un
conjunto de lneas (tantas como hemos indicado con el atributo
COLS) sobre las que el usuario podr escribir.

Pulsando sobre el rea de texto podremos empezar a escribir, al

igual que hacamos en las cajas de texto, pero con la diferencia de
que ahora podremos pulsar ENTER cuando queramos para cambiar
de lnea.
Si no pulsamos ENTER y llegamos al final de la lnea el navegador
debe decidir que hacer. Esta decisin variar, por lo general, del
navegador que estemos usando. Algunos, como Internet Explorer
4.0, cambian automticamente a la siguiente lnea (text wrapping),
otros simplemente desplazarn el texto como ocurra con las cajas
de texto y no cambiar de lnea hasta que pulsemos ENTER y una
minora simplemente ignorar lo que pulsemos hasta que
cambiemos de lnea pulsando esta misma tecla.

El navegador Netscape introdujo una extensin al lenguaje HTML

estndar, que actualmente es soportada tambin por Internet
Explorer , y que nos permitir tener un mayor control sobre la forma
de actuar del navegador cuando se llegue al final de la lnea. Esta
extensin se basa en un nuevo atributo, WRAP , que puede tomar
los siguientes valores:
WRAP=OFF: Es el valor por defecto en Netscape Navigator y
provocar que el texto sea mostrado en una sola lnea,
desplazndose hacia la izquierda si es necesario, hasta que el
usuario pulse ENTER.
WRAP=SOFT: Este es el valor por defecto en Internet Explorer y
provoca que el navegador pase automticamente a la siguiente
lnea cuando se llega al final del rea reservada. Sin embargo
cuando se pulsa el botn de envo, antes de mandar el contenido, el
propio navegador vuelve a juntar todo el texto que fue escrito
seguido en una sola lnea.
WRAP=HARD: Al igual que el valor anterior, ste provoca que el
navegador pase automticamente a la siguiente lnea, pero ahora la
informacin se mandar al servidor Web con los saltos de lnea, de
la misma manera que si hubisemos pulsado ENTER nosotros
mismos al llegar al final de cada lnea.
En la figura 12.23 vemos una pgina con los tres tipos de rea de
texto que hemos incluido en el directorio textarea para que el lector
pueda probarlos. La diferencia entre los dos ltimos tipos no es
apreciable por el usuario, pero si existen diferencias en el mensaje
que se enva al servidor.
La etiqueta TEXTAREA tambin admite el atributo ALIGN y las
extensiones introducidas por Microsoft que hemos visto
anteriormente. Nos referimos a los atributos DISABLED,
READONLY, TABINDEX, NOTAB y TITLE.
Concluiremos las reas de texto con un resumen de la etiqueta
TEXTAREA y sus atributos:
<TEXTAREA NAME="nombre"
ROWS="filas"
COLS="columnas"
ALIGN="alineamiento"
WRAP="off | soft | hard">
Texto inicial
</TEXTAREA>

Cuadros de seleccin
ste es el ltimo control para crear formularios que nos ofrece el
lenguaje HTML. Su funcin ser dar a elegir entre una serie de
opciones de manera que el usuario pueda elegir una o varias de
ellas. Existen dos formas de mostrar estas opciones, como una lista
con desplazamiento, o mediante una persiana desplegable.
Enseguida veremos cmo es cada una y cmo crearlas.
Para insertar un cuadro de seleccin usaremos la etiqueta SELECT,
que consta de una instruccin de inicio y de una instruccin de fin,
entre las cuales introduciremos las diferentes opciones para el
usuario. Para insertar estas opciones usaremos una nueva etiqueta,
OPTION, que consta de una nica instruccin. Veamos un ejemplo
que ilustra el uso de uso de este tipo de control:
<FORM>
Elija un color:<BR>
<CENTER>
<SELECT NAME="color">
<OPTION>Verde
<OPTION>Negro
<OPTION>Rojo
<OPTION>Azul
</SELECT>
</CENTER>
<INPUT TYPE="submit"
VALUE="Enviar eleccin">
</FORM>
Cuando se pulse el botn 'Enviar eleccin' se mandar al servidor el
texto que sigue a la etiqueta OPTION, que se haya escogido (Por
ejemplo 'color=Rojo').
Como podemos ver en la figura 12.24, este control suele ser
mostrado, en los navegadores grficos, como una persiana
desplegable, es decir, nicamente la opcin actualmente
seleccionada es visible, y pulsando sobre una flecha se muestran el
resto de opciones.
Figura 12.24. Los cuadros de seleccin permiten mostrar varias
opciones para que el usuario pueda elegir. En esta ocasin
vemos su forma de persiana desplegable.

Existe un atributo, SELECTED, que nos permitir elegir la opcin

que debe estar seleccionada por defecto. Por ejemplo, si en el
cdigo anterior queremos que el color negro aparezca seleccionado
inicialmente tendremos que escribir:
<SELECT NAME="color">
<OPTION>Verde
<OPTION SELECTED>Negro
<OPTION>Rojo
<OPTION>Azul
</SELECT>
Al principio hemos comentado que los cuadros de seleccin pueden
mostrarse como persianas desplegables, o bien como listas con
desplazamiento. Hasta ahora slo hemos visto el primer caso en el
que nicamente la opcin seleccionada es visible. En ocasiones
puede ser conveniente que todas, o al menos algunas de las
posibilidades sean mostradas directamente, sin tener que pulsar un
botn. Para conseguir esto el lenguaje HTML ofrece el atributo
SIZE, que determina el nmero de opciones que pueden ser vistas
simultneamente. Si este valor es 1 (o no se usa el atributo SIZE),
se mostrar una persiana desplegable, como hemos visto hasta
ahora. Si es mayor, se mostrar una lista, que podr tener barras de
desplazamiento si no caben todas las opciones disponibles.
Veamos un ejemplo:
<FORM>

Lista de la compra:<BR>
<CENTER>
<SELECT NAME="compra"
SIZE="6">
<OPTION VALUE="Fruta">
Fruta
<OPTION VALUE="Verdura">
Verdura
<OPTION VALUE="Ternera">
Ternera
<OPTION VALUE="Mantequilla">
Mantequilla
<OPTION VALUE="Salchichas">
Salchichas
<OPTION VALUE="Pasta">
Pasta
</SELECT>
</CENTER>
<P>
<INPUT TYPE="submit"
VALUE="Enviar lista de la compra">
</FORM>
En la figura 12.25 vemos este ejemplo:
Figura 12.25. Usando el atributo SIZE con un valor mayor que
uno conseguimos que el cuadro de seleccin se muestre como
una lista.

En este caso el nmero de opciones es igual al tamao que le

hemos dado al control, por lo que no han sido necesarias barras de
desplazamiento.
Si no indicamos lo contrario, los cuadros de seleccin actan como
los botones de radio, es decir, sola una opcin puede ser elegida
simultneamente. Afortunadamente, es posible cambiar este
comportamiento, y permitir la seleccin de varias opciones, usando
el atributo MULTIPLE en el interior de la etiqueta SELECT. En el
ejemplo de la lista de la compra esta posibilidad es de gran utilidad,
aadiendo este atributo al cdigo anterior queda:
<FORM>
Lista de la compra:<BR>
<CENTER>
<SELECT NAME="compra"
SIZE="6"
MULTIPLE>
<OPTION VALUE="Fruta">
Fruta
<OPTION VALUE="Verdura">
Verdura
<OPTION VALUE="Ternera">
Ternera
<OPTION VALUE="Mantequilla">

Mantequilla
<OPTION VALUE="Salchichas">
Salchichas
<OPTION VALUE="Pasta">
Pasta
</SELECT>
</CENTER>
NOTA (usuarios de Windows): Para seleccionar varias opciones
mantengan pulsada la tecla <CODE>Control
</CODE> y seleccinenlas con el ratn.
<P>
<INPUT TYPE="submit"
VALUE="Enviar lista de la compra">
</FORM>
La forma de seleccionar varias opciones simultneamente
depender del navegador que usemos. En general consistir en
mantener apretada una tecla mientras se seleccionan las diferentes
opciones con el ratn. Para facilitar la tarea de los navegantes
puede ser conveniente aadir a la pgina una nota explicativa sobre
la manera de elegir varias opciones, tal y como hemos hecho en
este ejemplo. En la figura 12.26 podemos ver como es mostrado
Internet Explorer 4.0:
Figura 12.26. Usando el atributo MULTIPLE el usuario podr
seleccionar varias de las opciones que se ofrecen en la lista.

Y en la figura 12.27 el mismo cdigo, esta vez visto desde Lynx:

Figura 12.27. El navegador Lynx tambin es capaz de mostrar
cuadros de seleccin, por lo que podremos usarlo con libertad.

La etiqueta SELECT tambin consta del atributo ALIGN para

elegir su alineamiento. En lo que a extensiones se refiere,
tambin podemos usar el atributo DISABLED en la etiqueta
SELECT para desabilitarla, aunque solo funcionar con Internet
Explorer 4.0. Igualmente podemos usar el atributo TITLE tanto en
SELECT como en OPTION para incluir una descripcin que ser
mostrada en un bocadillo cuando el usuario site el ratn sobre el
control, en el primer caso, o sobre la opcin especfica, en el
segundo.
Para concluir con los cuadros de seleccin slo nos resta hacer un
breve resumen de las etiquetas SELECT y OPTION, y de sus
atributos:
<SELECT NAME="nombre"
SIZE="n_elementos_visibles"
MULTIPLE
ALIGN="alineamiento"
TITLE="texto_bocadillo"

TABINDEX="n"
DISABLED>
<OPTION SELECTED
VALUE="nombre de esta opcin"
TITLE="texto_bocadillo">
...
</SELECT>
73. Practica 6-Formulario para "Los Alpes"
Anterior | Inicio | Siguiente
Ahora que ya conocemos todos los controles existentes para crear
formularios es hora de hacer uno con apariencia profesional. Esto
no quiere decir que use todos los controles existentes, sino que los
use de una manera adecuada, cuidando la presentacin y
facilitando al usuario la introduccin de datos. Como motivo hemos
elegido crear una pgina ms del sitio Web de la agencia de viajes
Los Alpes, que permita a los visitantes pedir que les enven por
correo un catlogo con todos los viajes disponibles.
En primer lugar procederemos a escribir el cdigo HTML necesario
para crear los formularios y posteriormente nos dedicaremos a darle
una apariencia profesional, tarea en la que podremos demostrar
nuestra capacidad para usar tablas para controlar la disposicin de
los elementos en una pgina Web.
PASO 1: Para comenzar partiremos de las pginas que creamos en
la prctica 5. Podemos realizar los cambios sobre estas mismas
pginas o crear una copia en otro directorio (en el directorio pract5
se encuentran de nuevo las pginas de esta prctica). Usando
nuestro editor de texto/HTMLhabitual abrimos el archivo
plantilla.htm donde creamos la plantilla de la pgina Web de Los
Alpes. El aspecto de esta pgina es muy simple, como podemos ver
en la figura 12.28:
Figura 12.28. Este es el aspecto inicial de la plantilla del sitio
Web de Los Alpes.

En primer lugar, antes de realizar ningn cambio, guardamos este

documento con el nombre form.htm . Sobre este nuevo archivo
realizaremos los cambios. Lo primero que haremos ser adaptar el
cdigo de la plantilla a nuestros objetivos, cambiando la fecha y el
ttulo de la pgina, y escribiendo un texto introductorio del formulario
(ver figura 12.29):
Figura 12.29. El primer paso ser modificar la plantilla,
cambiando el ttulo y la fecha y escribiendo un texto
introductorio.

PASO 2: El siguiente paso consistir en insertar los controles del

formulario. Dado que nuestro objetivo ser recoger el nombre,
direccin, telfono, etc. del usuario, usaremos en su mayora cajas
de texto, con la nica excepcin de un cuadro de seleccin para
elegir el tipo de catlogo. El cdigo necesario para insertar estos
controles es:
<FORM>
<P>Nombre completo:

<INPUT TYPE="text"
NAME="nombre"
SIZE="30">
<P>Direccin:
<INPUT TYPE="text"
NAME="direccion"
SIZE="50">
<P>Ciudad:
<INPUT TYPE="text"
NAME="ciudad"
SIZE="20">
Cdigo Postal:
<INPUT TYPE="text"
NAME="c.p."
SIZE="6"
MAXLENGTH="5">
<P>Telfono:
<INPUT TYPE="text"
NAME="telefono"
SIZE="10"
MAXLENGTH="9">
<P>Fax:
<INPUT TYPE="text"
NAME="FAX"
SIZE="10"
MAXLENGTH="9">
<P>Email:
<INPUT TYPE="text"
NAME="email"
SIZE="30">
<P>Catlogo:
<SELECT>
<OPTION VALUE="nacional">
Nacional
<OPTION VALUE="internacional" SELECTED>
Internacional
<OPTION VALUE="completo">
Completo
</SELECT>

<P>
<INPUT TYPE="image"
BORDER="0"
SRC="img/enviar.jpg"
VALUE="Enviar">
</FORM>
Y deberemos insertarlo a continuacin del texto introductorio. Este
cdigo no tiene demasiada complejidad, pudiendo destacarse la
limitacin a cinco caracteres para el cdigo postal y a nueve el del
nmero de telfono y fax, con lo que evitamos posibles
equivocaciones de los usuarios. En ambos casos hemos usado el
atributo MAXLENGTH para imponer esta limitacin. En esta pgina
hemos decidido, adems, usar un botn de envo personalizado,
acorde con la apariencia del Web. Este y otro material necesario
para la prctica puede encontrarse en el directorio pract6/material.
Una vez realizados estos cambios y escrito el cdigo anterior
obtenemos el resultado que vemos en la figura 12.30.
Figura 12.30. Usando los conocimientos adquiridos en este
captulo utilizamos las etiquetas INPUT y SELECT para crear
los controles del formulario.

PASO 3: Podramos dejar el formulario as, y publicarlo en Internet;

de hecho gran parte de los formularios que encontramos tienen una
apariencia similar a esta. Sin embargo en captulos anteriores
hemos aprendido a usar tablas para controlar la disposicin de los
elementos y es hora de usar estos conocimientos para dar a
nuestro formulario una apariencia mucho ms profesional. En un
Web real un buen diseo incita a un mayor nmero de navegantes a
rellenar el formulario.
Para empezar cambiamos el titular por una imagen
( pract6/material/catalogo.gif) en la que hemos escrito el mismo
texto con un tipo de letra que simula escritura manual. El resto de
cambios hacen uso de tablas. Para realizar el diseo suele ser
conveniente hacer un boceto sobre el papel o con un programa de
dibujo, donde no existen las limitaciones del lenguaje HTML. Una
vez hecho el boceto es hora de usar este lenguaje para plasmarlo
sobre una pgina Web. Tras hacer esto en nuestro formulario

concluimos que sera adecuado usar una tabla de nueve filas y tres
columnas. De las filas la primera es para el ttulo y para el texto
introductorio, mientras que el resto son para cada campo del
formulario. La primera columna contendr el texto indicativo del
formulario alineado a la derecha (<TD ALIGN=" right">), la segunda
contendr el control en s y la tercera servir nicamente como
margen derecho. En la figura 12.31 mostramos el formulario con su
nueva apariencia mostrando los bordes de la tabla, para que el
lector pueda apreciar la estructura de la tabla:
Figura 12.31. Usando una tabla de nueve filas y tres columnas
controlamos la disposicin de todos los elementos de la tabla
para conseguir un diseo profesional.

Otro aspecto que podemos comentar es que el ancho total de la

tabla ser de 600 pixeles, con lo que conseguimos que se visualice
correctamente en todo tipo de monitores. Para que tambin quede
bien en monitores grandes la centramos usando la etiqueta
CENTER. Por otro lado, para crear cierta separacin entre los
diferentes campos podemos usar el atributo CELLSPACING, con el
que controlamos la distancia en pixeles entre las diferentes celdas.

La realizacin de este cdigo es un ejercicio muy importante, ya que

este tipo de retoques es muy comn en las pginas Web reales. Por
esta razn dejamos al lector que intente mejorar el diseo de la
pgina usando las pistas que le hemos dado. En cualquier caso, en
el directorio pract6 se ofrece una posible solucin. En la figura 12.32
podemos ver la pgina completa una vez introducida en la
estructura de frames:
Figura 12.32. Este es el aspecto final del formulario una vez
introducido en la estructura con frames del sitio Web creado en
la prctica 5.

La mejora en apariencia respecto a la que veamos en la figura

12.30 es apreciable.
74. COMO USAR LOS DATOS DE UN FORMULARIO
Anterior | Inicio | Siguiente

Una vez dominamos la creacin, y diseo, de formularios en las

pginas Web probablemente nos estamos preguntando cmo
puedo hacer que me lleguen los datos?. La respuesta a esta
pregunta va mas all del lenguaje HTML. Requiere la puesta en
accin de unos programillas llamados CGIs, que se ejecutan en el
servidor y que pueden estar escritos en prcticamente cualquier
lenguaje de programacin.
Estos programas deben encontrarse en algn lugar del servidor
Web. Al enviar un formulario a uno, ste procesar la informacin y
contestar con la respuesta oportuna. Esta respuesta ser en
general o bien la direccin de una pgina o bien una pgina creada
por el propio CGI. Cmo se enva informacin a un CGI?. Hasta
ahora habamos omitido este detalle, pero la etiqueta FORM consta
de un atributo llamado ACTION donde debemos especificar la
direccin URL del programa CGI donde deben enviarse los datos.
Adems debe usarse otro atributo, METHOD , para indicarle cmo
se mandarn estos datos. Este atributo puede tomar dos valores
GET y POST, omitiendo todos los detalles, podemos decir que el
primero se usa con formularios pequeos, mientras que el segundo
ser el escogido para formularios donde la cantidad de informacin
es grande. Una vez hemos visto estos atributos hemos de decir que
para que los ejemplos que hemos visto funcionen cuando los
publicamos en Internet habr que aadrselos a la etiqueta
<FORM>. Veamos un ejemplo:
<FORM METHOD="post"
ACTION="http://www.miservidor.es/cgi-bin/
programaCGI">
<!-- Cdigo para insertar los distintos controles -->
</FORM>
En este caso hemos supuesto la existencia de un CGI llamado
programa CGI situado en el directorio cgi-bin (este es el nombre
habitual del directorio donde suelen estar los CGIs) de nuestro
servidor. El navegador mandar a este programa los datos del
formulario codificado con un cdigo especial, cuyo tipo MIME es
application/x-www-form- urlencoded. En algunos de los ejemplos de
este captulo hemos visto ejemplos de como funciona esta
codificacin. La etiqueta FORM, tiene un atributo, ENCTYPE, que
nos permitir cambiar el tipo de codificacin. Si no queremos usar
ninguna podemos escribir:

<FORM ENCTYPE="text/plain"
METHOD="post"...>
</FORM>
No usar codificacin podr ocasionar problemas al enviar
caracteres especiales como son las letras acentuadas, pero puede
ser til en ocasiones, al no ser necesario decodificar el mensaje.
La creacin de los programas CGI excede los lmites de esta
seccin dedicada al lenguaje HTML, pero ser cubierta en detalle
ms adelante debido a la gran importancia que tienen estos
programas en la programacin de Internet y en concreto de pginas
Web. Hasta entonces veremos algunos mtodos alternativos que
nos permitirn hacer uso de los formularios que hemos creado sin
necesidad de CGIs.
Formularios sin CGIs
Sin duda los programas CGIs permiten realizar muchas ms cosas
que cualquier otro mtodo, pero la necesidad de conocer un
lenguaje de programacin nos lleva a buscar mtodos alternativos
que sern suficientemente buenos si no tenemos demasiados
requerimientos.
Una alternativa a los CGIs son los lenguajes de script, que nos
permitirn interactuar con el navegante sin hacer uso del servidor.
Pero la alternativa en la que nos centraremos aqu ser otra, que se
basa en la posibilidad de mandar todos los datos de un formulario a
una direccin de correo electrnico. Esto es suficiente para el
ejemplo de la prctica 6, ya que simplemente necesitamos conocer
los datos del usuario para mandar el catlogo, no necesitamos
interactuar con l en manera alguna. Para conseguir que los datos
de un formulario sean enviados por e-mail debemos usar las
etiquetas ACTION, METHOD y ENCTYPE de la siguiente manera:
<FORM ACTION="mailto:[email protected]"
ENCTYPE="text/plain"
METHOD="post">
<!-- ... -->
</FORM>
Donde hemos usado como ejemplo la direccin de correo
electrnico [email protected], que debe ser sustituida por
aquella a la que queramos enviar los datos, que en general ser la
nuestra como creadores del Web.
La funcin del atributo ENCTYPE="text/plain" es enviar los datos

sin ninguna codificacin. Esto es conveniente para facilitar la

lectura de los mismos, pero no necesaria. De hecho, en algunos
casos aislados puede ser preferible no usar este atributo y usar la
codificacin por defecto.
Al pulsar sobre el botn de envo el navegador advertir al usuario
(ver figura 12.33) que la pgina quiere enviar un e-mail , si el
usuario acepta enviar los datos del formulario.
Figura 12.33. Como mtodo alternativo a los CGIs pueden
mandarse los datos del formulario por correo electrnico. En
ese caso el navegador pedir al usuario confirmacin de la
accin.

Al contrari que los CGIs, el mtodo alternativo que enva por

correo electrnico los datos del formulario puede no funcionar con
algunos navegadores. Sin embargo actualmente un gran nmero
de ellos, incluyendo Netscape Navigator , Internet Explorer y
Opera, soporta esta caracterstica, por lo que podemos usarlo con
suficientes garantas.
Con este mtodo alternativo podemos empezar a usar todos los
formularios que hemos visto hasta ahora, y practicar con ellos.
Cuando, ms adelante, estudiemos a fondo los CGIs veremos como
nuestras posibilidades se incrementan enormemente.
75. Envo De Ficheros Usando Formularios
Anterior | Inicio
Como apndice a los formularios incluimos un mtodo introducido
por Netscape y aceptado por el estndar HTML 3.2 que permite a
los visitantes de una pgina mandar un archivo presente en su
ordenador a la pgina Web.

Con los controles que hemos visto hasta ahora se poda enviar un
archivo de texto copindolo a un rea de texto, pero no exista
ninguna manera de mandar, por ejemplo, una imagen o un
programa. Con este nuevo sistema ser posible enviar ficheros de
todo tipo.
Los cambios respecto a los controles anteriores no son muchos. En
primer lugar debemos hacer uso del atributo ENCTYPE
especificando que los datos que se van a enviar desde este
formulario al servidor sern de tipo multipart/form-data, despus
debemos usar ACTION para especificar la direccin de un programa
del servidor Web que sea capaz de recoger este archivo y realizar
las acciones oportunas con l, por ejemplo:
<FORM ENCTYPE="multipart/form-data"
ACTION="http://www.miservidor.es/cgi-bin/
cogefichero"<
<!-- ... --<
</FORM<
En lo que al control en s se refiere usaremos de nuevo la etiqueta
INPUT, esta vez con TYPE="file". El navegador lo mostrar como
una caja de texto junto con un botn que permitir al usuario buscar
entre sus archivos el que quiere enviar. Un ejemplo con el cdigo
completo sera:
<FORM ENCTYPE="multipart/form-data"
ACTION="http://www.miservidor.es/cgi-bin/
cogefichero">
Enviar el fichero:
<INPUT NAME="fichero_usuario"
TYPE="file">
<INPUT TYPE="submit"
VALUE="Enviar fichero">
</FORM>
Usando este cdigo se obtiene el resultado que observamos en la
figura 12.33 en la que se muestra tambin el cuadro de dilogo que
ofrece Internet Explorer 4 cuando se pulsa sobre el botn
'Examinar...'.
Figura 12.33. Como mtodo alternativo a los CGIs pueden
mandarse los datos del formulario por correo electrnico. En
ese caso el navegador pedir al usuario confirmacin de la
accin.

Hasta aqu es sencillo. La parte ms difcil en el envo de ficheros

desde pginas Web consistir en crear un programa para el
servidor que sea capaz de recibirlo. Por lo general puede ser
conveniente obtener alguno hecho por profesionales que realice, o
al menos nos ayude, a realizar esta labor. Para ello recomendamos
al lector que se dirija a la direccin:
http://www.bio.cam.ac.uk/cgi-lib/
Si est interesado en adquirir informacin para crear el programa
usted mismo puede obtener toda la informacin necesaria en el
servidor FTP:
ftp://ds.internic.net/rfc/rfc1867.txt
Tabla de contenidos
1 - Introduccin al lenguaje HTML
2 - Primeros pasos con HTML
3 - Parrafos en HTML
4 - Cmo insertar imagenes en una pagina
5 - Cmo crear enlaces hipertexto
6 - PRCTICA 1: La pagina web de "La chistera"
7 - Anclas (I)
8 - Anclas (II)
9 - Formato de texto
10 - La etiqueta FONT
11 - Texto preformateado
12 - Acentos y otros caracteres especiales
13 - Listas en HTML (I)

14 - Listas en HTML (II)

15 - Comentarios en HTML
16 - Practica 2: Un sitio web completo
17 - Usando color en el WWW
18 - Cmo cambiar la apariencia de una pagina
19 - Imagenes en las paginas Web (I)
20 - Imagenes en las paginas Web (II)
21 - Imagenes en las paginas Web (III)
22 - Cmo cambiar la apariencia de las imagenes
23 - Alternativas a las imagenes inline (I)
24 - Alternativas a las imagenes inline (II)
25 - Mejoras en las imagenes
26 - Cmo se crea una tabla HTML (I)
27 - Cmo se crea una tabla HTML (II)
28 - Alineamiento de tablas
29 - Alineamiento de celdas y filas
30 - Ancho de tablas y celdas
31 - Celdas que abarcan varias filas o columnas
32 - Margenes y separacin de celdas
33 - Anidamiento
34 - Practica 3 - Tabla de Datos
35 - Practica 4 - Pagina Web con una estructura creada con tablas
36 - Practica 4 - Pagina Web con una estructura creada con tablas
37 - Practica 4 - Pagina Web con una estructura creada con tablas
38 - Estandares y extensiones del lenguaje HTML (I)
39 - Estandares y extensiones del lenguaje HTML (II)
40 - Extensiones a las listas (I)
41 - Extensiones a las listas (II)
42 - Alineamiento
43 - La etiqueta META
44 - Otras etiquetas del lenguaje HTML 3.2
45 - El atributo TARGET
46 - La etiqueta BASE
47 - Creacin de paginas con frames
48 - Creacin del documento de definicin de frames (I)
49 - Creacin del documento de definicin de frames (II)
50 - Pagina completa con frames
51 - Atributos de la etiqueta FRAME
52 - Compatibilidad: NOFRAME
53 - Anidamiento de framesets
54 - Bordes de los frames
55 - Valores especiales del atributo TARGET
56 - Practica 5: Web de Los Alpes con frames

57 - Frames flotantes
58 - Sonido vdeo y otros ficheros externos
59 - Multimedia Inline (I)
60 - Multimedia Inline (I)
61 - Plug-ins y objetos incrustados
62 - Java en las Paginas Web
63 - Insercin de Applets Java (I)
64 - Insercin de Applets Java (II)
65 - Insercin de Applets Java (III)
66 - ActiveX, la tecnologa del futuro
67 - Formularios en HTML
68 - Controles de Formularios (I)
69 - Controles de Formularios (II)
70 - Controles de Formularios (III)
71 - Controles de Formularios (IV)
72 - Otros controles
73 - Practica 6-Formulario para "Los Alpes"
74 - COMO USAR LOS DATOS DE UN FORMULARIO
75 - Envo De Ficheros Usando Formularios