--

HTML
L a GuZa Completa

Chuck Musciano y Bill Kemedy

Traduccidn:

Y a z m h Ju5rez Parra
Licenciada en Computacih

Efkkn Alatorre Miguel

Ingeniero Electrhico

@XlCO BUENOS AIRES CARACAS GUATEMALA LISBOA MADRID

NUEVA YORK SAN JUAN S A N T M DE BOGOTA SANTIAGO SAO PAUL0
AUCKLAND LONDRES MONTRFAL NUEVA DELHI SAN FRANCISCO
SINGAFWR ST. UIUIS SIDNEY TORONTO
Gerente de marca Sergio R. Machuca Marquina
Gerente deproducto. Fernando Castellanos Rodriguez ru{Ci'm+P7
I 1Q
Superusor editonal Sergio G p e z H e r n k d e z
LCl'->* -' I DG: 7.2~7
Supervisor deproducczdn Juan Jose Garcia G-n

HTML LA G U ~ ACOMPLETA

Prohibida la reproducci6n total o parcial d e esta obra,

por cualquier medio, sin autorizaci6n escrita del editor.

DERECHOS RESERVADOS 0 1999, respecto a la primera edicion e n espafiol por

McGRAW-HILL INTERAMERICANA EDITORES, S.A. d e C.V.
Una divisi6n d e The McCraw-Hill Companies, Inc.
Cedro No. 512, Col. Atlampa,
Delegaci6n Cuauhtemoc,
06450, Mexico, D.F.
Miembro d e la C h a r a Nacional d e la Industria Editorial Mexicana, Reg. Num. 736

ISBN 970-10-2141-X

Translated from the second English edition of

HTML THE COMPLETE GUIDE
Copyright 0 MCMXCVII, by O'Reilly & Associates, Inc.
All Rights Reserved.
ISBN 1-56592-235-2

lmpreso en Mexico Printed in Mexico

Esta obra se termino de

imprimir en Junio de 1999 en
Litografica lngramex
Centeno Num. 162-1
Col. Granjas Esmeralda
Delegacion lztapalapa
09810 Mexico, D.F.

Se t~raron8,000 ejemplares
 Contenido

Prefacio ............................................................................................................................ xi

I . HTML y el World Wide Web .............................................................................. I

1.1 Internet .................................................................................................................. I
1.2 Hablemos el lenguaje d e Internet ........................................................................ 4
1.3 QuC es HTML ........................................................................................................ 7
1.4 QuC no es HTML ................................................................................................. 8
1.5 Extensiones no estandarizadas ......................................................................... I1
1.6 Herramientas para crear documentos d e HTML ................................................ 13

2. Inicio rapido a HTML ...................................................................................... I6

2.1 Herramientas d e escritura ................................................................................... 16
2.2 Un primer documento d e HTML ........................................................................ 17
2.3 Etiquetas d e HTML incrustadas ........................................................................ 18
2.4 Esqueleto d e un documento d e HTML ............................................................ 19
2.5 El contenido de un documento d e HTML ......................................................... 20
2.6 HTML y texto ....................................................................................................... 21
2.7 Ligas de hipertexto .............................................................................................. 25
2.8 Las imageries son especiales .............................................................................. 29
2.9 Listas, documentos rastreables y formas ............................................................ 31
2.10 Tablas ................................................................................................................... 33
2.11 Marcos .................................................................................................................. 34
2.12 Hojas d e estilo y JavaScript ................................................................................ 35
2.13 Hacia adelante ..................................................................................................... 37
uiii Contenido

3. Anatomia de un documento de HTML .......................................................... 3 8

3.1 Las apariencias pueden engaiiar ........................................................................38
3.2 Estructura d e un documento d e HTML .............................................................. 40
3.3 Etiquetas de HTML ................................................................;.......................40
3.4 Contenido del documento ..................................................................................44
3.5 Elementos de un documento de HTML ............................................................. 46
3.6 Encabezado de un documento ................................... ....... ...........................48
3.7 Cuerpo del documento .......................................................................................51

4. Fundamentos de texto ....................................................................................... 54

4.1 Divisiones y parrafos .................................... ...................................................... 54
4.2 Encabezados ...................................................................................................... 61
4.3 Cambio de la apariencia del texto .....................................................................66
4.4 Etiquetas d e estilo basadas e n contenid0 ..........................................................68
4.5 Etiquetas d e estilo fisico ..................................................................................... 74
4.6 Manejo de fuentes complementarias .................................................................. 79
4.7 Disefio y espaciado preciso ................................................................................85
4.8 Citas textuales ......................................................................................................
98
4.9 Direcciones ........................................................................................................ 99
4.10 Codificaci6n de caracteres especiales .............................................................. 101

5. Lfneas horizontales. imdgenes y multimedia ........................................ 103

5.1 Lineas horizontales ............................................................................................ 103
5.2 C6mo insertar imagenes e n sus documentos ..................................................110
5.3 Colores del documento e imigenes d e fondo ................................................. 137
5.4 Audio d e fondo ................................................................................................. 144
5.5 Texto animado .................................................................................................. 147
5.6 Otro contenido multimedia ............................................................................ 151
5.7 M5s alli de HTML .............................................................................................153

6. Diseilo d e documentos ................................................................................... 155

6.1 C6mo crear un espacio e n blanco ................................................................... 156
6.2 Diseiio d e columnas mliltiples ......................................................................... 161
6.3 Capas ............................................................................................................... 166

7. Ligas y Webs .................................................................................................. 179

7.1 Fundamentos d e hipertexto ..............................................................................179
7.2 Referencia a documentos: el URL ....................................................................180
7.3 C6mo crear ligas ........................................................................................ 197
7.4 Ligas efectivas ................................................................................................. 205
Contenido ix

7.5 Imiigenes sensibles al raton ..............................................................................209

7.6 Como crear documentos rastreables ................................................................ 220
7.7 C6mo establecer relaciones entre documentos ............................................... 223
7.8 Soporte de automatizaci6n de documentos ..................................................... 227

Listas conformato ..........................................................................................231

8.1 Listas sin ordenar .............................................................................................. 231
8.2 Listas ordenadas ................................................................................................ 234
8.3 La etiqueta <li>.................................................................................................. 237
8.4 Listas anidadas ................................................................................................... 240
8.5 Listas de directorio ............................................................................................242
8.6 Listas de menu .................................................................................................. 244
.,
8.7 Listas de definic~on.......................................................................................... 245
8.8 Uso apropiado de las listas ...............................................................................249

Hojas de estilo en cascada ........................................................................... 251

9.1 Elementos de 10s estilos ................................................................................... 252
9.2 Sintaxis para estilos ........................................................................................... 259
9.3 Propiedades de estilo ........................................................................................ 265
9.4 Estilos con menos etiquetas: la etiqueta <span> ............................................. 295
9 .j C6mo aplicar estilos a documentos ................................................................. 296

Formas ................................................................................................................. 299

10.1 Fundamentos de las formas ........................................................................... 2 9 9
10.2 Elementos de entrada para formas ................................................................... 311
10.3 Areas de texto de m6ltiples lineas ................................................................ 3 2 4
10.4 Elementos de selecci6n multiple .....................................................................3 2 7
10. j Creaci6n de formas efectivas ............................................................................ 330
10.6 Programacion de formas ................................................................................... 335

Tablas...................................................................................................................341
El modelo de tabla de HTML ........................................................................ 341
11.1
Etiquetas de tabla .............................................................................................. 344
11.2
Extensiones para tablas de Internet Explorer ..................................................360
11.3
11.4MSs all5 de las tablas ordinarias ....................................................................... 370

Marcos ................................................................................................................. 372

12.1 Una descripci6n de 10s marcos ........................................................................372
12.2 Etiquetas para marcos ....................................................................................... 373
12.3 Diserio con marcos ...........................................................................................375
x Contenido

12.4 Contenido del marco ....................................................................................... 380

12.5 Etiqueta <noframes> ......................................................................................... 383
12.6 Marcos integrados ........................................................................................... 385
12.7 Marco con nombre o ventana destino ............................................................. 3 8 7

Contenido ejecutable .....................................................................................372

13.1 Applets ...............................................................................................................392
13.2 Contenido incrustado ........................................................................................4 0 2
13.3 JavaScript ...........................................................................................................411
13.4 Hojas de estilo de JavaScript ......................................................................... 418

Documentos dindmicos...............................................................................425
14.1 Resumen de documentos dinLmicos ................................................................ 425
14.2 Documentos extraidos por el cliente (Client-Pull) .......................................... 427
14.3 Documentos enviados por el servidor .............................................................4 3 2

Tips. trucos y trampas ................................................................................... 436

Los mejores tips ................................................................................................4 3 6
iTrivial o abusivo? ............................................................................................. 4 3 8
Viiietas personalizadas ......................................................................................4 3 8
Trucos con tablas ............................................................................................. 4 3 9
ImAgenes transparentes ....................................................................................4 4 6
Creaci6n de nuevas ventanas ........................................................................... 4 4 9
Marcos multiples en una liga ........................................................................... 4 5 0

Gramdtica de m M L ..................................................................................... 451

Referencia rdpida de etiquetas de HTML ............................................... 463

Referencia rdpida de propiedudes

de hojas de estilo en cascada.................................................................. 489

La DTD de HTML 3.2 ....................................................................................... 497

Entidades de cardcter .................................................................................. 507

Valoresy nombres de color ........................................................................ 513

El estudio del Lenguaje para Marcaci6n de Hipertexto -miis conocido por su acr6nim0,
HTML- es muy parecido a1 proceso de aprendizaje de cualquier lenguaje, ya sea de c6mputo
o humano. La mayoria de 10s estudiantes primer0 se empapan de ejemplos. Piense cuiin
experto seria si su madre, padre y hermanos hablaran comunmente en HTML. Estudiar a otros
es una manera natural d e aprender, pues hace miis sencillo y divertido el aprendizaje. Nuestro
consejo para quien desee aprender HTML es: introd6zcase a1 World Wide Web con un navegador
y vea por usted mismo quC es lo que tiene una apariencia agradable, que es efectivo y quC es
lo adecuado para sus necesidades. Examine 10s archivos fuente de otros autores y amplie sus
posibilidades. El arte d e la imitaci6n es la forma en que las personas que dominan todo lo
relativo a1 Web, a quienes llamaremos webmasters, han aprendido el lenguaje.
No obstante, la imitaci6n tiene sus limites. Los ejemplos pueden ser buenos y malos. Aprender
por medio d e ellos le ayudarii a dominar la priictica, n o la tCcnica. Para convertirse en un
verdadero experto debe aprender a utilizar de forma apropiada el lenguaje en diferentes
situaciones. Podria aprender por decir algo a base d e ejemplos, pero le llevaria mucho tiempo.
Recuerde tambiCn que 10s lenguajes d e computaci6n son miis explicitos que 10s humanos.
Debe aprender la sintaxis correcta de HTML o n o funcionarii. Ademiis, existe el problema d e
10s "esdndares". Por un lado, 10s comites de expertos academicos e industriales intentan
definir la sintaxis y el uso apropiado de un lenguaje d e computaci6n, como HTML; pero, por
el otro, 10s fabricantes de navegadores, como Netscape y Microsoft, eligen quC partes del
estiindar utilizar y quC partes ignorar. Incluso constmyen sus propias funciones que, a1 final,
se convierten e n esdndares.
Para estar seguro, la mejor manera de convertirse en un experto programador d e HTML e s
mediante una referencia completa del lenguaje: una herramienta q u e abarque su sintaxis,
XU Prefacio

semantics y variaciones en detalle, de mod0 que le ayude a distinguir entre el ma1 y el

buen uso.
Hay un punto mas que conduce a1 dominio d e un lenguaje. Para llegar a ser un verdadero
experto en HTML debe desarrollar su propio estilo. Esto significa conocer no solo lo que es
apropiado sin0 tambiCn lo efectivo. Cuestiones de disefio y mucho mzis. El orden de presen-
taci6n en un documento, entre documentos y entre una serie d e documentos.
Nuestro objetivo a1 escribir esta obra es ayudarle a convertirse en un experto e n HTML,
experimentado con la sintaxis, la semzintica y 10s elementos d e estilo del lenguaje. Seguimos
el enfoque de aprendizaje natural por medio d e ejemplos; buenos, por supuesto. Estudia-
mos detalladamente cada elemento d e la actual versi6n aceptada del lenguaje (3.2), lo
mismo que todas las "extensiones" soportadas hoy en did por 10s navegadores de uso mzis
comOn, explicando el funcionamiento de cada elemento y la interaction entre ellos.
Y, con el debido respeto a Strunk y White, a lo largo de toda la obra le brindamos sugeren-
cias d e estilo y composici6n para ayudarle a decidir cual es la mejor forma d e usar el
lenguaje para satisfacer mdltiples tareas, desde la sencilla documentacion en linea hasta las
complejas presentaciones d e ventas y mercadotecnia. Le mostraremos quC es lo que funcio-
na y quC no; quC tiene sentido para quienes miran sus paginas, asi como lo que les puede
resultar confuso.
En resumen, esta obra es una guia completa para crear documentos de HTML; iniciamos con
fundamentos de sintaxis y semhtica, para terminar con instrucciones generales d e estilo
que le pueden ayudar a crear documentos bien presentados, informativos y accesibles, d e
10s que se sentirk orgulloso al mostrarlos a sus navegantes.

Nuestro pQblico
Escribimos este libro para quien le interese aprender y utilizar HTML, desde el usuario mas
casual hasta el disefiador profesional. No esperamos que el lector tenga ninguna experien-
cia en el lenguaje antes d e adquirir este libro. De hecho, tampoco esperamos que alguna
vez haya navegado por el World Wide Web, aunque nos sorprenderia que n o hubiera
experimentado con esta tecnologia. No es necesario tener acceso a Internet para utilizar esta
obra, per0 si usted lo tiene le servira d e guia de viaje desde casa.
Lo dnico necesario es que tenga una computadora, un procesador d e palabras en el que
pueda crear archivos de texto ASCII y copias d e las Oltimas versiones de algunos navegadores:
Navigator e Internet Explorer. Ya que HTML esti almacenado en un formato universalmente
aceptado -text0 ASCII- y a que es totalmente independiente de cualquier computadora
especifica, n o hacemos ninguna suposicidn sobre el tip0 d e m%quina que usted utiliza. No
obstante, 10s navegadores si varian s e g h la plataforma y sistema operativo, lo que significa
que sus documentos d e HTML pueden, y por lo general asi sucede, aparecer diferentes
Prefacio xm

dependiendo de la computadora y versi6n del navegador. Conforme avance la obra, expli-

caremos c6mo varios navegadores populares utilizan algunas funciones del lenguaje po-
niendo especial atenci6n e n sus diferencias.
Si es inexperto en HTML, World Wide Web o documentos de hipertexto e n general, debe
iniciar e n el capitulo 1, donde describimos como se integran todas las tecnologias del World
Wide Web para crear grandes conjuntos de documentos interrelacionados.
Si ya conoce mas o menos el Web, aunque no especificamente HTML, o si le interesan las
nuevas funciones de ese lenguaje, comience leyendo el capitulo 2, una breve introducci6n
a las funciones mas importantes, a la vez que una guia sobre el enfoque con que estudiare-
mos HTML e n el resto de la obra.
En 10s capitulos subsecuentes abordaremos funciones especificas del lenguaje e n una moda-
lidad que va de lo general a lo particular. LCalos e n orden para hacer un viaje completo por
el lenguaje, o busque por ellos la funci6n especifica que le interesa.

Convenciones de texto
A lo largo d e este libro utilizamos el tip0 de letra Courier para senalar cualquier elemento
literal del estandar de HTML, asi como las etiquetas y sus atributos. Siempre utilizamos letras
minOsculas para las etiquetas de HTML (aunque a1 lenguaje estandar no le afecta el uso d e
maflsculas o minOsculas e n lo que se refiere a nombres de etiquetas y atributos, lo cual no
se aplica a otro tip0 de elementos, tales como nombres de archivos fuente, de mod0 que sea
cuidadoso). Empleamos cursivas para definir nuevos conceptos y para aquellos elementos
que debe proporcionar a1 crear sus propios documentos, como serian el valor de 10s atribu-
tos de una etiqueta o cadenas de texto definidas por el usuario.
A lo largo de esta obra estudiamos 10s elementos del lenguaje, cada uno e n detalle (algunos
incluso pareceran molestamente profundos) a manera de referencia simbolica, e n un recua-
dro de referencia rapida similar a1 que aparece en la pagina siguiente.
La primera linea del cuadro contiene el nombre del elemento, seguido de U n d breve des-
cripcion de su funcion. DespuCs listamos sus atributos, si 10s tiene: todo aquello que el
usuario puede o debe especificar como parte del elemento.
Utilizamos 10s siguientes simbolos para identificar etiquetas y atributos que no aparecen e n
el estandar de HTML 3.2 (la Oltima version oficial), per0 que son adiciones al lenguaje:

Elemento adicional (Extension) de Navigator de Netscape al estandar

0 Extension d e Internet Explorer de Microsoft a1 estandar
La descripci6n tambien incluye la etiqueta de cierre o fin, si la lleva, junto con una indica-
ci6n general acerca de si es seguro omitirla para el funcionamiento general.
 <btml>
Funcion:
Delimita un documento d e HTML completo
A tributos
VERSION
Etiqueta de cierre
</h trnl>; puede omitirla
Contiene:
etiqueta-de-encabezado, etiqueta-de-cuerpo, marcos
Utilizada en:
Documentos d e HTML

"Contiene" indica la regla gramatical d e HTML que define 10s elementos que se deben colocar
dentro d e esta etiqueta. De manera similar, "Utilizada en" lista las partes del documento que
admiten esta etiqueta en su contenido. Estas reglas estin definidas en el apendice A.
Por Oltimo, HTML es claramente un lenguaje "entretejido": a veces utiliza sus elementos en
diferentes formas, dependiendo del contexto, y muchos d e ellos comparten atributos identi-
cos. Siempre que sea posible, colocamos una referencia cruzada en el texto que le conduce a
un apartado relacionado en cualquier otra parte d e la obra. Estas referencias cruzadas, como la
que ver5 a1 final de este ph-rafo, sirven como boceto en papel de un documento d e hipertexto,
el cual podria llevar este libro a un formato electr6nico. [sintaxisde etiquetas, 3.3.11
Lo invitamos a seguir estas referencias siernpre que sea posible. Por lo general, solo estudia-
remos de forma breve un atributo, y esperamos que usted pase a la referencia cruzada para
obtener informaci6n m%sdetallada. En otros casos, seguir el enlace solo le llevari a usos
alternativos del elemento en estudio, o a sugerencias de estilo y uso relacionado con el
elemento analizado.

@s HTML 3.2 en realidad tan espectacular?

Dependiendo d e nuestro estado de h i m o , cuando alguien nos pregunta sobre el "nuevo"
esthdar, HTML 3.2, respondemos con una mueca, una confusa sonrisa o quizis una sonora
carcajada. Amigos, HTML 3.2 no pone a temblar ninglin cimiento del Web. De hecho, el
nuevo estgndar del lenguaje simplemente confirma lo que la rnayoria d e 10s observadores
del Web ya saben desde hace tiempo: que 10s fabricantes de navegadores mueven de un
lado a otro la cola del perro d e 10s estindares d e HTML.
Aproximadamente hasta mediados d e 1995,los usuarios estaban interesados e n 10s est5ndares
d e HTML (algunos lo siguen estando). Hasta entonces, estos estindares guiaban el desarro-
Prefacio xv

110 d e nuevos navegadores. No obstante, tras la liberation de HTML 2.0, 10s importantes
miembros del Consorcio World Wide Web (W3C), responsables d e tales estindares, perdie-
ron el control. El abortado estindar HTML+ nunca prosper6 y HTML 3.0 cay6 en un debate
que ocasion6 que W3C archivara el borradordel estindar. HTML 3.0 nunca lleg6, a pesar d e
lo que muchos comerciantes oportunistas pusieron e n su documentaci6n.
Lo que produjo el desarrollo d e nuevos estandares del lenguaje fue Navigator d e Netscape.
La mayoria d e 10s analistas del Web coinciden en que el ripido exito d e Navigator para
convertirse e n el navegador favorito d e la mayoria d e 10s usuarios puede atribuirse directa-
mente a la implementaci6n que hizo Netscape d e titiles y excitantes funciones a HTML. En
la actualidad, el resto d e 10s fabricantes d e navegadores --en particular, la enorme empresa
Microsoft, q u e en especial aprecia el significado d e "estkndar de facto" mejor que ninguna
otra- deben implementar las extensiones para HTML d e Netscape si esperan tener oportu-
nidad d e competir en el mercado d e 10s navegadores. A1 empujar a1 W3C a liberar oficial-
mente el estindar HTML versi6n 3.2, que tendia a estandarizar la mayoria d e las extensiones
a1 lenguaje hechas por Netscape, 10s otros fabricantes d e navegadores ganaron legitimidad
para sus productos sin tener que reconocer al competidor lider. Asi, Internet Explorer puede
ahora "apegarse a HTML 3.2", en lugar d e "apegarse a Navigator d e Netscape".
La paradoja es que el estindar HTML 3.2 no es el recurso definitivo. Existen muchas m i s
funciones usadas comunmente por Navigator y/o Internet Explorer que las incluidas en este
ultimo estindar. Podemos asegurarle que tratar d e ordenar las cosas genera una confusi6n
absoluta.
Nos hemos encargado d e hacer una separaci6n, d e mod0 que no tenga que preguntarse q u e
funciona y que no e n un navegador determinado. Por lo tanto, esta obra es la guia definitiva
d e HTML. Proporcionamos detalles sobre todos 10s elementos del estindar HTML 3.2, ade-
mas d e multiples, interesantes y utiles extensiones -algunas propuestas para convertirse e n
estindares- que 10s fabricantes de navegadores d e uso m i s popular han elegido para
incluir e n sus productos, como son:

Hojas d e estilo en cascada Java y JavaScript

Marcos (frames) Multimedia en linea
Capas Espaciadores
Controles de tamafio y estilo d e letras Multiples columnas

Y mientras le explicamos cada una d e las funciones del lenguaje, estkndar o no, tambien le
indicamos que navegadores o versiones d e ellos implementan o n o una extensi6n especifi-
ca, lo cual es informaci6n d e suma importancia cuando desea crear piginas web q u e apro-
vechen las ventajas d e la liltima version de Navigator d e Netscape o piginas a las que
puedan tener acceso la gran cantidad de usuarios d e Internet Explorer, Mosaic e incluso
Lynx, un navegador d e s610 texto muy utilizado en sisternas UNIX.
xvi Pmfacio

Ademis, hay un par d e temas que estin muy relacionados pero que no son directamente
parte d e HTML. Por ejemplo, tocarnos, aunque no manejamos, la programaci6n con CGI y
Java. Los programas d e CGI y Java funcionan de manera muy relacionada con 10s documen-
tos d e HTML y se ejecutan con, o fuera, d e 10s navegadores aunque no son parte del propio
lenguaje, d e manera que no 10s estudiamos en detalle. Ademis, son temas extensos que
merecen sus propios libros; por ejemplo, CGI Programming on the World Wide Web y Java
in a Nutshell,' d e O'Reilly & Associates.
Para resumir, este libro es una guia definitiva sobre HTML y como tal debe utilizarla. Incluye
cada extension que pueda encontrar. Muchas no esGn documentadas en ninguna otra parte,
ni siquiera en la multitud d e guias que hay en el Web. Si hubikramos olvidado algun tema,
sin dudarlo higanoslo saber y lo incluiremos en la siguiente edicion.

Nos gustart'a contar con su participaci6n

Con nuestra mayor pericia hemos probado y verificado toda la informaci6n contenida en
este libro, aunque puede encontrarse con que algunas funciones ya cambiaron (o incluso
que ihemos cometido errores!). De la manera mas atenta le solicitamos nos informe d e 10s
errores que encuentre y que nos dk sus sugerencias para futuras ediciones. Escriba a:
O'Reilly & Associates, Inc.
101 Morris Street
Sebastopol, CA 95472
1-800-998-9938 (en Estados Unidos o Canadi)
1-707-829-0515 (internacional/local)
1-707-829-0104 (Fax)
Debido a que 10s e s t h d a r e s de HTML y las adiciones que le hacen 10s navegadores evolu-
cionan muy aceleradamente, parte de la informaci6n detallada en esta obra puede aparecer
un tanto desactualizada cuando usted la lea. Por favor, revise actualizaciones y correcciones
en http://www.ora.com/info/htm~.
Incluso puede mandarnos mensajes por via electronics. Para dejar su mensaje en la lista d e
distribucion d e correo o para solicitar un catilogo, envienos correo a:

Envie dudas tCcnicas o comentarios sobre la obra a:

' Hay versiOn e n espaiiol d e la liltima obra: Java enpocmpalahras, d e David Flanajpn, publicdda por McGraw-
Hill (1998).[EI.
Agradecimientos
No forrnarnos y seguramente n o hubiCrarnos podido integrar este libro sin la generosa
contribution d e rnuchas personas. Nuestras esposas, Jeanne y Cindy (quienes ahora nos
parecen rnejores), y nuestros pequeiios hijos, Eva, Ethan, Courtney y Cole (quienes apare-
cieron antes d e que cornenzhrarnos a pergeiiar esta obra), son la esencia del apoyo. Y hay
una cantidad enorrne d e vecinos, arnigos y colegas q u e ayudaron cornpartiendo ideas,
probando navegadores y perrnitiCndonos utilizar sus equipos para explorar HTML. Ustedes
saben quiCnes son y les estarnos agradecidos (Ed Bond, pronto estaremos listos para reparar
tu Windows).

TarnbiCn agradecernos a nuestros revisores tCcnicos, Kane Scarlett, Eric Raymond y Chris
Tacy, por exarninar cuidadosarnente nuestro trabajo. Tornamos sus sugerencias mas acerta-
das. Y nuestro especial agradecimiento a Mike Loukides, nuestro editor, quien aplico su
vasta experiencia sobre edicibn d e libros para rnantenernos e n control.
Por 6ltirn0, agradecernos a1 personal d e O'Reilly & Associates, q u e arrnonizo y sensibilizo
nuestras palabras e n estas paginas: Nancy Wolfe Kotary, coordinadora del proyecto y correc-
tora d e estilo; Mike Sierra, especialista e n FrameMaker; Chris Reilley, ilustrador tCcnico; Edie
Freedman, diseiiador de la portada; Nancy Priest, diseiiadora d e interiores; Seth Maislin,
encargada del indice; Madeleine Newell, asistente d e produccion; tarnbien a John Files y a
Sheryl Avruch, d e control d e calidad del proyecto. Del rnisrno rnodo, gracias a todo el
personal d e O'Reilly q u e colaboro en la prirnera edition.
 En este capitub:
Internet
Hablemos el lenguaje de
Internet
Qud es HTML
QuB no es HTML
Extensiones no
estundarixadas
Hmamientus para crear
documentos de HTML
HTML y el
World W d e Web

A pesar d e q u e comenz6 como un experiment0 militar y pas6 su adolescencia como un

juego para academicos y excentricos, 10s recientes sucesos han transformado la red mundial
d e redes d e computadoras -tambi&n conocida como Internet-, generando un ripido
crecimiento y diversificando fanthsticamente la comunidad d e usuarios y proveedores d e
informaci6n. Hoy dia puede encontrarse con usuarios d e Internet d e casi cualquier naciona-
lidad y creencia, desde individuos serios hasta muy frivolos, desde grandes companias hasta
organizaciones no lucrativas y desde e v a n ~ ~ l i s t aresucitados
s hasta pervertidos.
De muchas formas, el World Wide Web -la comunidad abierta d e servidores d e documen-
tos d e hipertexto y lectores e n Internet- es responsable del mete6rico crecimiento d e la
popularidad d e la red. Usted tambien puede convertirse e n un valioso miembro a1 escribir
documentos d e HTML para despuks ponerlos a disposici6n d e 10s "navegantes" del Web
alrededor del mundo.
Exploremos el Arb01 d e la familia d e Internet para tener m i s noci6n d e su magnificencia, n o
s61o como un ejercicio d e curiosidad, tambien para ayudarnos a comprender mejor con que
nos enfrentaremos en la pantalla.

1.1 Internet
Aunque las historias d e 10s medios d e comunicaci6n populares a menudo son confusas y
confunden, el concept0 d e Internet e n realidad es muy simple. Es una colecci6n d e redes
-una red compuesta por redes- d e computadoras q u e comparten informaci6n digital por
medio d e un conjunto comlin d e protocolos d e software y d e redes. Casi cualquier persona
puede conectar su computadora a Internet y comunicarse a1 instante con otras computadoras
y usuarios e n la red.
2 Capitulo 1: HTML y el World Wid.Web

Lo que resulta confuso sobre Internet es que puede parecer un bazar oriental: no esth bien
organizado, existen rnuy pocas guias de contenido y puede tornar rnucho tiempo y expe-
riencia tkcnica aprovechar todo su potential.
He ahi la raz6n.. .

Internet comenz6 a finales de 10s sesenta corno un experiment0 en el diseiio de robustas

redes de cornputadoras. El objetivo era construir una red que pudiera resistir la pCrdida de
varias rnaquinas sin comprorneter la habilidad del resto para cornunicarse entre si. El finan-
ciarniento provino del Departamento de Defensa de Estados Unidos, que tenia un gran
inter& en construir redes de inforrnaci6n que pudieran soportar ataques nucleares.
La red obtenida result6 ser un Cxito tecnico rnaravilloso, aunque tenia limites en cuanto a
tamaiio y alcance. Para la mayoria, s610 10s especialistas en defensa y las instituciones
academicas podian tener acceso a lo que entonces se conocia corno ARPAnet Advanced
Research Projects Agency network) del Departarnento de Defensa.
Con el advenirniento de 10s rn6dems de alta velocidad para cornunicaci6n digital sobre
lineas telef6nicas comunes, algunos individuos y organizaciones no conectadas directarnen-
te a 10s canales digitales principales cornenzaron a conectarse y a aprovechar la avanzada
cornunicaci6n global de la red. No obstante, no fue sin0 hasta estos ultimos afios (alrededor
de 1993, en realidad) que Internet despeg6 en popularidad.
Varios sucesos importantes condujeron a1 acelerado crecirniento de la popularidad de Internet.
Prirnero, a principios de 1990, 10s ernpresarios y usuarios impacientes por aprovechar la
sencillez y poderio de las cornunicaciones digitales globales presionaron para que Internet,
la rnhs extensa red de redes de cornputadoras, bgsicarnente sostenida por el gobierno esta-
dounidense, abriera sus sisternas para aceptar un trhfico casi no restringido (recuerde, la red
no fue disefiada para transportar inforrnaci6n basada en contenido, esto es, mensajes comer-
ciales que viajarian por computadoras de universidades que prohibian tal actividad).
Por su tradici6n academics, altruista y de libre intercarnbio, muchos de 10s fundadores de
Internet continuaron poniendo disponibles partes sustanciales de sus colecciones de docu-
rnentos electr6nicos y software para 10s visitantes de la red, isin costo y sin restricciones!
Comunicaci6n rnundial, un sinfin de prograrnas e inforrnaci6n gratuita: iquien podia resistirlo?
Evidenternente, Internet planteaba una dificil situaci6n. Conectarse y utilizar las diferentes
herramientas de software, aunque estuvieran disponibles para sus computadoras, represen-
c6 una barrera tecnol6gica insuperable para la rnayoria de las personas. Adernhs, una buena
cantidad de la- inforrnaci6n disponible era basicamente texto ASCII sobre ternas academicos,
no ios paquetes que atraen a 10s usuarios a 10s servicios en linea, corno America OnLine,
Prodigy o CompuServe. Internet estaba rnuy desorganizada y, fuera de las instituciones
gubernamentales y academicas, pocas personas tenian el inter& o 10s conocirnientos nece-
1.1 Internet 3

sarios para aprender a usar el software de uso limitado, o no tenian el tiempo para hacer
b6squedas intensivas de documentos a fin de hallar 10s de su inter&.

1.1.2 HTML y el World Wide Web

Hace falta otro elemento para activar el potencial de Internet. Casi a1 mismo tiempo que
Internet se abri6 a1 comercio, algunos fisicos del CERN, el Laboratorio Europeo de Fisica de
Particulas, liberaron un lenguaje y sistema de distribuci6n que desarrollaron para crear y
compartir documentos electr6nicos multimedia a travCs de Internet. Asi, nacieron el Lengua-
je para Marcacidn de Hipertexto (HTML, Hypertext Markup Language), 10s programas de
navegaci6n y el World Wide Web. Los autores ya no tenian que distribuir sus trabajos como
colecciones fragmentadas de im5genes, sonidos y texto, pues HTML unific6 estos elemen-
tos. Mis atin, 10s sistemas del World Wide Web permitian crear ligas de hipertexto con las
que 10s documentos hacen referencias automiticas a otros documentos localizados en cual-
quier parte del mundo, optimando el tiempo e n linea.
El despegue comenz6 cuando algunos brillantes estudiantes y docentes del Centro Nacional de
Aplicaciones de Superc6mputo (NCSA, National Center for Supercomputing Applications) de la
Universidad de Illinois, en Urbana-Champaign, desarrollaron un navegador denominado Mosaic.
Aunque diseiiado principalmente para ver documentos de HTML, el software tambiCn contaba
con herramientas integradas para acceder a 10s demis recursos en Internet, como archivos en
sewidores de FTP y colecciones organizadas de documentos en sewidores de Gopher.
Con versiones basadas e n interfaces graficas fiiciles de usar y conocidas por la mayoria de 10s
usuarios, Mosaic logr6 un Cxito instananeo. Y, a1 igual que la mayoria del software en Internet,
estaba disponible gratuitamente e n la red.' Millones de usuarios se apoderaron de una copia
y comenzaron a navegar por Internet e n busca de "piiginas interesantes".

1.1.3 Hilos dorados

Ya conoce la historia resumida de Internet y del World Wide Web: su sorpresivo crecimiento
en apenas dos aiios. Internet gener6 un medio totalmente nuevo de intercambio de informaci6n
y comercio alrededor del mundo y sus pioneros son bien recompensados. Por ejemplo, cuan-
d o 10s empresarios se dieron cuenta de que podian, sin grandes costos, producir y generar
anuncios impactantes y catilogos de productos para esos millones de navegantes alrededor
del mundo, no hub0 freno a la estampida de zapatos de ante azul. Incluso 10s desarrolladores
de Mosaic y de las tecnologias de sewidores web relacionadas vieron su riqueza potencial.

' No todos 10s navegadores son gratuitos. Varios navegadores y servidores web estBn disponibles comercialmen-
te, incluyendo documentaci6n y sopone. El software "en paquete" vendido e n Internet por medio de correo o el
vendido en almacenes al consumidor por lo general contiene una copia registrada de uno de 10s navegadores de
uso m b extendido, como Navigator de Netscape o Internet Explorer de Microsoft, quiz2 personalizado para
el paquete. MBs adn, los navegadores disponibles en Internet pot lo comdn contienen acuerdos de licencia que
estipulan que el software es gratuito s61o para organizaciones no lucrativas.
4 Capftub1: HTML y el World Wide Web

Abandonaron el NCSA y formaron Netscape Communications para producir el navegador

Navigator y programas servidores web dtiles para la actividad comercial e n Internet.
Los usuarios empresariales y las oportunidades de mercado han ayudado a fortalecer a
Internet y fomentado su fenomenal crecirniento, particularmente en el World Wide Web. De
acuerdo con un reciente y detallado estudio de mercado hecho por ActivMedia, Inc.
(PeterBorough, NH), aproximadamente la mitad de las empresas en Internet obtuvieron
grandes beneficios econ6micos idurante el primer ario de establecidas! Pero no olvide que
Internet es, principalmente y ante todo, un espacio de interacci6n social e intercambio de
informaci6n, no s61o un centro comercial o un medio de publicidad directa. Los usuarios
de Internet, sobre todo 10s m5s experimentados, se adhieren a reglas comdnmente manteni-
das, aunque no codificadas formalmente, denominadas, e n inglCs, netiquette (reglas de
buen comportamiento e n la red), que prohiben eventos como "atestar" grupos de noticias
con mensajes no relacionados con el tema que 10s ocupa, o enviar correo electr6nico no
solicitado (spamming). Y existen millones de usuarios listos para recordarle estas reglas que
inadvertida o intencionalmente pudiera ignorar.
Y e n verdad el poderio de HTML y de la distribuci6n de informaci6n e n la red van mas all5
de recompensas monetarias y comerciales: la bdsqueda seria de informaci6n tambiCn bene-
ficia. Las publicaciones, junto con im5genes y otros medios como software ejecutable, pue-
den producir un impact0 inmediato e n el pdblico a1 que van dirigidos, e n lugar de 10s meses
tradicionalmente requeridos para imprimir y enviar por correo convencional. La educaci6n
logra un gran avance cuando 10s estudiantes pueden acceder a las fabulosas bibliotecas del
mundo. Y en horas de esparcimiento, las funciones interactivas de las ligas de HTML pue-
den revitalizar nuestras apoltronadas mentes acostumbradas a la televisi6n.

1.2 Hablemos el lenguaje de Internet

Toda computadora conectada a Internet (incluso una maltratada y arcaica Apple 11) tiene
una direcci6n dnica: un ndmero cuyo formato est5 definido por el Protocolo Internet UP), el
estandar que define la manera como se transmiten 10s mensajes a las m5quinas que forman
la red. Una direccio'n IP estP compuesta de cuatro ndmeros, cada uno menor a 255, unidos
entre si por puntos; por ejemplo, 192.12.248.73 o 131.58.97.254.
Las computadoras s61o intercambian ndmeros; las personas prefieren nombres. Por esta
raz6n, cada computadora e n Internet tambiCn tiene un nombre asociado con su poseedor.
Existen varios millones de m5quinas e n la red, de manera que resulta muy dificil arregl5rse-
las con nombres dnicos, por no decir llevar el registro de cada uno de ellos. Sin embargo,
recuerde que Internet es una red de redes. Est5 dividida e n grupos conocidos como domi-
nios, que a su vez se dividen en uno o m5s subdominios. De este modo, aunque puede
escoger un nombre muy comdn para su computadora, se convierte en dnico cuando le
agrega como sufijos, a1 igual que 10s apellidos, todos 10s nombres de dominio de la m5qui-
na, separados por puntos, creando asi un nombre de dominio completamente vcilido.
1.2 Hablemos el knguaje de Internet 5

Esta forma d e asignar nombres es mas sencilla d e lo que parece. Por ejemplo, el nombre de
dominio completamente valid0 www.ora.com se traduce como la maquina denominada
"www"que es parte del dominio conocido como "ora", que a su vez es parte d e la rama
comercial (com) de Internet. Otras ramas d e Internet incluyen instituciones educativas (edu),
no lucrativas (org), gubernamentales (gov para las estadounidenses; gob para las mexicanas)
y proveedores d e servicios de Internet (net). Las computadoras y redes fuera d e Estados
Unidos tienen una abreviatura d e dos letras a1 final d e sus nombres; por ejemplo, "campara
Canada, "jp" para Japan, "uk" para el Reino Unido.
Computadoras especiales, conocidas como smidores de nombres, mantienen tablas d e nom-
bres de maquina y sus direcciones numCricas IP unicas, que traducen entre si cuando es
necesario. Los nombres d e dominio dcben quedar registrados en la organizaci6n no lucrati-
va InterNIC (Centro d e Informacion d e la Red Internet). Una vez registrado el nombre d e
dominio, su poseedor lo transmite junto con su direcci6n a otros servidores d e nombres
d e dominio alrededor del mundo. Cada dominio y subdominio tiene un servidor de nom-
bres asociado, d e mod0 que a fin d e cuentas cada maquina es conocida inequivocamente
tanto por su nombre como por su direcci6n IP.

1.2.1 Clientes, servidores y navegadores

Internet conecta dos tipos d e computadoras: seruidores, 10s cuales proporcionan documen-
tos, y clientes, que obtienen y despliegan documentos para 10s usuarios. Todo lo que sucede
en la maquina servidor se dice que tiene lugar e n el lado seruidor; las actividades que se
llevan a cab0 en la maquina cliente ocurren del lado cliente.
Para tener acceso y desplegar documentos de HTML, ejecutamos en nuestras computadoras
programas denominados navegadores (cliente). Estos navegadores --o programas clientes-
llaman por Internet a seruidores web especiales para entrar y obtener documentos electr6nicos.
Hay varios navegadores disponibles en Internet -la mayona gratis-; cada uno ofrece dife-
rentes funciones. Por ejemplo, navegadores como Lynx se ejecutan en clientes con interfaces
de solo texto que despliegan dnicamente caracteres. Otros corren en clientes con capacidades
graficas que permiten presentar documentos con diferentes fuentes e imkgenes a color con
una resoluci6n d e 1024 x 768, 24 pixeles por bit. Otros -Navigator de Netscape, Internet
Explorer de Microsoft, Mosaic de NCSA, Webcruiser de Netcom y NetShark de Intedon, para
citar algunos- tienen incluso funciones especiales que le permiten obtener y desplegar toda
una variedad d e documentos electr6nicos, incluyendo audio, video y multimedia.

Toda la actividad comienza del lado cliente, cuando un usuario inicia su navegador; Cste
comienza a cargar un documento de HTML, denominadopaginaprincipal, desde una ubica-
ci6n local o desde un servidor en alguna red remota, como Internet. En este 6ltimo caso, el na-
vegador consulta primer0 a un servidor d e nombres de dominio para traducir el nombre del
servidor d e documentos que tiene la pagina principal, digamos www.ora.com, a su direccion
 6 Capftub I: WTdll;y el Wmld Wide Web

IP, antes de enviar la solicitud a ese sewidor -a1 de la p5gina principal- por Internet. Esta
solicitud (y la respuesta del sewidor) se hace de acuerdo con el formato establecido por el
Prolocolo de Tramfmcia de Hzpertexto ( H T P , Hypeffext Transfer Protocol) esdndar.
Un sewidor pasa la mayor parte del tiempo atendiendo ("escuchando") en Internet, en
espera de solicitudes de documentos con una direcci6n unica de sewidor. Cuando recibe
una de estas solicitudes, el sewidor verifica que el navegador que la hace estC autorizado
para obtener documentos del sewidor y, si asi fuera, busca el documento soticitado. Si lo
encuentra, lo envia (lo descarga) al navegador. Por lo general, el sewidor registra el nombre
de la computadora solicitante, el documento solicitado y la hora de solicitud.
Luego el navegador recibe el documento. Si se trata de un archivo sencillo de texto ASCII, la
mayoria de 10s navegadores lo despliega en su modalidad de conflguraci6n blsica comun. Los
directories de documentos tambien son tratados como documentos simples de texto, aunque
la mayoria de 10s navegadores grificos muestran iconos de carpeta que el usuario puede
seleccionar con el puntero del rat6n para descargar el contenido de 10s subdirectories.
Los navegadores tambiCn obtienen archivos binarios de 10s sewidores. A menos que reciba
ayuda desde un prograrna externo o estC habilitado por softwareplug-in (conector) o appkh,
10s cuales reproducen archivos de video o ejecutan archivos de audio, el navegador por lo
general almacena 10s archivos binarios descargados en un disco local para que el usuario 10s
revise despuCs.
No obstante, lo mks comdn es que el navegador obtenga documentos que parecieran ser
archivos de s610 texto, pero que contienen tanto texto como c6digos con significados especia-
les, denominados etiquetus. El navegador procesa estos documentos de HTML, da formato a1
texto con base en las etiquetas y descargando archivos especiales, digamos de imlgenes.
El usuario lee el documento, hace clic en una liga a otro documento y todo el proceso se
repite de nuevo.

1.2.3 Influencia del World Wide Web

En este punto es conveniente seiialar que el funcionamiento de 10s navegadores y sewid-
res de HTTP no se limita a1 World Wide Web de Internet. De hecho, usted no necesita estar
conectado a Internet ni a ninguna red para escribir documentos de HTML y operar el
navegador. Puede cargar y desplegar directamente en el documentos de HTML y archivos
complernentarios almacenados en su propia mlquina. Esta independencia es dtil: propor-
ciona la oportunidad de componer, en el sentido editorial de la palabra, un conjunto de
documentos para su distribuci6n posterior. Los perseverantes autores que usan HTML traba-
jan asi para escribir y probar sus documentos antes de liberarlos a1 publico en general,
evitando a 10s usuarios las molestias de archivos con i d g e n e s quebradas y ligas err6neas.'

La prueba rigurosa de documentos de HTML en el Web es, por supuesto, ampliamente recomendable y necesa-
ria para pulilos de errores en las ligas.
1.3 Qud es HTML 7

Las organizaciones tarnbien pueden estar conectadas a Internet y a1 World Wide Web, aun
cuando rnantengan, adernis, redes y colecciones privadas de docurnentos de HTML para
distribuirlos a clientes en su red local, o intranet. De hecho, las redes privadas se estin
convirtiendo rnuy ripido en la tecnologia alternativa para las "oficinas sin papel" de las que
rnucho hernos escuchado en 10s dltirnos aiios. Con docurnentos de HTML, las ernpresas y
algunas otras organizaciones pueden rnantener bases de datos de su personal con fotogra-
fias y rnanuales en linea; colecciones de planos arquitect6nicos, partes y rnanuales de en-
samble, etcetera, para que 10s usuarios autorizados puedan acceder a ellos electr6nicarnente,
de un rnodo rlpido y sencillo, desde una cornputadora local.

1.3 me'es HTML

HTML es un lenguaje de composici6n de docurnentos y especificaci6n de ligas de hipertexto
que define la sintaxis y coloca instrucciones especiales que no rnuestra el navegador,
aunque si le indica c6rno desplegar el contenido del docurnento, incluyendo texto, irnlge-
nes y otros rnedios soportados. HTML tarnbiCn le indica c6rno hacer un docurnento interac-
tivo a trav6 de ligas especiales de hipertexto, las cuales conectan diferentes docurnentos
-ya sea en su cornputadora o en otras- asi corno otros recursos de Internet, corno FTP
y Gopher.

1.3.1 Estandares y extensiones de HTML

La sintaxis y sernlntica bhsica de HTML estii definida en el est5ndar de HTML, actualrnente
versi6n 3.2. HTML es un lenguaje joven, de apenas cinco arios, aunque ya es su tercera versi6n.
No seria extrario que antes de terrninar de leer este libro, se liberara otra nueva versi6n. Dado
el avance de estos estindares, nunca se puede saber culndo saldd, ni tarnpoco si ya se trabaja
en una nueva versi6n del est5ndar.
Los desarrolladores de navegadores dependen del estindar de HTML para prograrnar el
software que da forrnato y despliega docurnentos de HTML cornunes. Los creadores de
piginas utilizan el est9ndar para asegurarse de que sus docurnentos de HTML son correctos
y efectivos. Sin embargo, las fuerzas cornerciales han obligado a 10s desarrolladores a agre-
gar a sus navegadores -Navigator e Internet Explorer, en particular- extensiones no
estiindares a fin de rnejorar el lenguaje. Muchas veces, estas extensiones son la irnplernentaci6n
de futuros estindares que adn se encuentran en debate. Las extensiones pueden predecir
futuros estindares debido a que rnuchas personas las utilizan.
En esta obra estudiarnos detalladarnente la sintaxis, sernhntica y expresiones de HTML 3.2,
junto con las diferentes extensiones irnportantes soportadas en las dltirnas versiones de 10s
navegadores de uso rnls com6n, de rnodo que cualquier persona que en verdad desee ser
un autor de docurnentos de HTML, pueda crear fabulosas plginas con un minimo de
esfuerzo.
8 Capitulo I: HTML y el WvrId Wide Web

1.3.2 Organizaciones estandares

A1 igual que muchas tecnologias de uso popular, HTML inici6 como un expenmento informal
utilizado por algunas personas. Conforme m5s y mAs autores comenzaron a utilizar el lenguaje,
se hizo obvio que eran necesarios mis medios formales para definir y adrninistrar +standan-
zar- las funciones de HTML, facilitandose asi la creaci6n e intercambio de documentos.

1.3.2.1 El Consorcio World Wide Web

El Consorcio World Wide Web (W3C) se form6 con el prop6sito de definir las versiones
estandares de HTML. Sus miembros son responsables de planear, someter a revision y
modificar el estandar, basados e n la retroalimentaci6n recibida por Internet, para satisfacer
mejor las necesidades de las mayorias.
M b all5 d e HTML, el W3C tiene la completa responsabilidad de estandarizar cualquier
tecnologia relacionada con el World Wide Web; administran el estindar d e H'ITP, lo mismo
que 10s relacionados con el direccionamiento de documentos e n el Web. Y sugieren a 10s
desarrolladores que se basen en esquemas estindares para crear extensiones de las tecnolo-
gias Web existentes a fin de internacionalizar el estandar de HTML.
Si desea estar a1 tanto del desarrollo d e HTML y tecnologias relacionadas, visite el W3C en
http://www.w3.orgl. Varios grupos de discusi6n e n Internet se dedican a1 Web, cada uno
como parte d e la jerarquia comp.infosystems.www, incluyendo comp.infosystems.wwu~.
authoring.htm1y comp.infosystems.www.authoring.images.

1.3.2.2 El Grupo de Trabajo d e Ingenieria d e Internet

Con mayor amplitud e n investigaci6n que el W3C, el Grupo de Trabajo de Ingenieria de
Internet (IETF, Internet Engineering Task Force) es responsable d e definir y administrar cada
aspect0 d e la tecnologia de Internet. El World Wide Web es s61o una pequeiia parte de la
jurisdicci6n del IETF.
El IETF define todas las tecnologias de Internet por medio de documentos oficiales conoci-
dos como Solicitud d e Comentario (Request For Comments), o RFC. Numerados individual-
mente para facil referencia, cada RFC consigna una tecnologia de Internet especifica,
desde la sintaxis d e nombres de dominio y asignaci6n d e direcciones IP hasta el formato de
10s mensajes d e correo electr6nico.
Para saber mas sobre el IETF y seguir el progreso de las varias RFC conforme circulan para
su revisicin, visite el servidor del IETF e n http://www.ietf.orR/.

1.4 Que' no es HTML

Con toda su capacidad multimedia, las nuevas funciones para el disefio de phginas y las
tecnologias que dan vida a 10s documentos d e HTML en Internet, tambien es importante
1.4 Q u B no es HTML 9

comprender las limitaciones del lenguaje: HTML no es una herramienta para procesar
texto, una soluci6n de edici6n electr6nica, ni tampoco un lenguaje de programaci6n.
Su prop6sito fundamental es definir la estructura y apariencia bisica de documentos
y conjuntos d e documentos de tal manera que puedan ser manejados d e forma ripida y
ficil por un usuario en red para verlos en diferentes dispositivos. Aprendiz de todo, oficial
de nada.

1.4.1 Contenido y apariencia

Antes d e que pueda apreciar e n su totalidad el poderio del lenguaje y comenzar a crear
efectivos documentos de HTML, debe dominar esta regla fundamental: HTML esti diseriado
para estructurar documentos y hacerlos mis accesibles, no para darles formato con el pro-
p6sito d e obtener desplegados espectaculares.

HTML ofrece diferentes maneras de definir la apariencia de sus documentos: especificacio-

nes d e tipografia, saltos de linea y texto con formato previo son, todos, funciones del
lenguaje. Y , por supuesto, la apariencia es importante, ya que puede lograr efectos tanto
nocivos como benkficos sobre la forma e n que 10s usuarios pueden tener acceso y utilizar la
informaci6n d e sus documentos de HTML.

Con HTML el contenido e s lo realmente valioso; la apariencia e s secundaria, e n particular

porque es menos predecible debido a la variedad d e navegadores y de su capacidad para
mostrar grificas y dar formato a1 texto. Ademis, HTML tiene muchas funciones para es-
tructurar el contenido de sus documentos sin importar la apariencia final: titulos, encabeza-
dos de seccibn, listas estructuradas, pirrafos, lineas horizontales, titulos e imfigenes, todos
estos elementos quedan definidos por HTML sin importar c6mo 10s debe presentar el
navegador.

Si utiliza HTML como una herramienta para generar documentos, quedari frustrado de sus
limitaciones para este fin. Simplemente HTML no tiene la suficiente capacidad para construir
ni crear la clase d e documentos que puede hacer con cierta facilidad en herramientas como
FrameMaker o Word de Microsoft. Raras veces funcionan en todos 10s navegadores 10s
intentos para lograr, mediante trucos, formatos especificos a1 usar incorrectamente 10s ele-
mentos de estructuraci6n del lenguaje. Para resumir, no pierda tiempo tratando de forzar a
HTML a que realice tareas para las que no fue disefiado.

Mejor utilicelo para lo que si fue disefiado: indicar la estructura de un documento para que
el navegador pueda presentarlo d e forma apropiada. HTML contiene gran cantidad
d e etiquetas que le permiten indicar la semintica del contenido de su documento, lo
que no encuentra e n herramientas como Frame o Word. Haga sus documentos utilizando
estas etiquetas y s e r i mas feliz, pues lucirin mejor y sus lectores se beneficiarin
inmensamente.
10 Cabfiulo 1: HTML v el World Wfde Web

1.4.2 Limitaciones especZficas de HTML

Existen limitaciones e n 10s tipos de formato y estructura de documentos que HTML propor-
ciona. Las extensiones a1 lenguaje elirninan algunas de las restricciones irnpuestas por HTML
3.2; otras aun persisten.

Especificamente, las funciones que n o existen en el estandar HTML 3.2 per0 que son posi-
bles gracias a extensiones irnplementadas por 10s diferentes fabricantes de navegadores y
que por lo general se consideran parte de HTML 3.2, incluyen:
Diseiio d e docurnentos con marcos
Docurnentos dinamicos por medio de guiones
Texto e n movimiento y e n capas
Posicionarniento absoluto d e texto e imageries
Las siguientes son funciones que hasta hace poco n o estaban disponibles e n ninguna ver-
si6n estandar de HTML:
Notas a pie d e pagina y a1 final, tablas de contenido automaticas o indices
Cornisas y pies de pagina
Tabuladores y otros tipos de espaciado automatico de caracteres
Listas numeradas anidadas

1.4.3 Inclinacidnpor elnavegador

Muchos autores novatos que usan HTML intentan evadir estas limitaciones tomando minu-
ciosas notas de la forma e n que sus navegadores despliegan el contenido de ciertas etique-
tas y despuCs hacen ma1 uso de ellas para lograr algunos trucos d e forrnato. Por ejemplo,
algunos anidan cierta clase de listas e n varios niveles, no porque e n realidad estCn creando
listas demasiado anidadas sino porque desean que su texto tenga un sangrado o se ajuste a
un margen especifico.

Hay diferentes navegadores ejecutandose e n cornputadoras distintas y todos funcionan de

diferente forma. Incluso dos usuarios distintos utilizando la rnisma versi6n de un navegador
e n sus maquinas pueden configurarlo de rnanera que el mismo docurnento de HTML apa-
rezca d e forrna muy distinta e n cada computadora. Lo que puede lucir maravilloso e n un
navegador puede, y por lo general asi sucede, aparecer terrible e n otros.

En lo que se refiere a1 navegador: permite dar formato a1 documento como lo juzgue rnejor.
Se reconoce que el trabajo del navegador es presentar docurnentos a1 usuario de una mane-
ra consistente y litil. El trabajo de usted, a su vez, es utilizar HTML de una manera efectiva
para etiquetar sus docurnentos para que el navegador pueda hacer su trabajo tambiCn de
1.5 Extensiones no estandariladas 11

forma efectiva. Pase menos tiempo tratando de lograr objetivos orientados a1 formato. Mejor
centre sus esfuerzos en el contenido del documento real y agregue etiquetas de HTML para
estructurarlo con eficacia.

1.5 Extensiones no estandarizadas

No tiene que programar e n HTML 3.2 para darse cuenta de sus limitaciones. ~ s es a la raz6n
por la que Navigator de Netscape se convirtid muy ripido en el navegador de uso m i s
extendido a menos de un atio de su aparici6n. Mientras otros fueron creados para implementar
10s estindares de HTML, 10s desarrolladores de Netscape tuvieron que trabajar duro para
ampliar el lenguaje y su navegador a fin de capturar la potencialidad lucrativa y ciertos
mercados comerciales existentes e n el Web.

Con tal presencia de mercado, Netscape liderea no s61o la comercializaci6n sino tambiCn el
manejo de estindares. Las funciones del navegador que Netscape proporciona y que no son
parte de HTML 3.2 se convirtieron con rapidez e n estindares defacto debido a que muchas
personas las utilizan. En consecuencia, Navigator de Netscape se convirti6 en el navegador
que otros desarrolladores debian tomar como modelo. Por ejemplo, Internet Explorer, desa-
rrollado por Microsoft e n colaboraci6n con Spyglass (el proveedor comercial de las tecnolo-
gias del NCSA) e integrado en Windows 95, adopta la mayoria de las extensiones que hace
Netscape a HTML y ademis le agrega las suyas.

1.5.1 Extensiones: ventajas y desventajas

Todo fabricante d e programas se apega a 10s estindares tecnol6gicos; ademPs d e sufrir un
gran bochorno por ser incompatible, sus competidores aprovecharin toda opormnidad para
recordar a 10s compradores la falla del producto, no importando cuin poco conocido o
inctil puede resultar el estindar. A1 mismo tiempo, 10s fabricantes buscan hacer sus produc-
tos diferentes y mejores que 10s d e sus competidores. Las extensiones de Netscape e Internet
Explorer a1 estindar d e HTML son ejemplos perfectos de estas presiones de mercado.

Muchos autores d e documentos de HTML se sienten seguros de utilizar estas extensiones no

estindares d e 10s navegadores debido a su popularidad en el mercado de usuarios. Para
bien o para mal, las extensiones a HTML hechas por el personal de Netscape o Microsoft
forman parte de la versi6n callejera de HTML de forma instintanea, de manera muy similar
a 10s modismos del lenguaje que deforman la expresi6n del mejor hablado a pesar de 10s
denodados esfuerzos d e la academia de la lengua.

No obstante, la realidad es que 10s navegadores cada vez son menos estindares, defacto o
no. El W3C va a la zaga. Y otros desarrolladores de navegadores no permanecerin inactivos
por mucho tiempo. Cada vez mis, 10s competidores estin poniendo e n marcha diversas
extensiones a HTML y agregando algunas mejoras de su creaci6n para ganar prestigio.
12 CapftuloI: HTML y el World Wide Web

1S.2 Evite las extensiones

En general, lo invitamos a que se resista a uti\izar una extensi6n de HTML a menos que
tenga una amplia y poderosa raz6n para hacerlo. Al utilizadas, sobre todo e n partes clave de
10s documentos, corre el riesgo de perder un segment0 importante de su grupo potencial
de lectura. Cierto: la comunidad Netscape es lo suficientemente amplia como para hacer dis-
cutible este punto ahora, pero incluso asi, esta excluyendo a millones d e usuarios que no
utilizan Navigator para ver sus piginas.
Por supuesto, existen diferentes grados de dependencia en cuanto a extensiones d e HTML.
Si utiliza alguna d e las extensiones d e la etiqueta d e linea horizontal, por ejemplo, casi todos
10s demas navegadores ignorarin 10s atributos agregados y desplegarin una linea horizontal
convencional. Por otro lado, dependiendo de la cantidad d e extensiones d e tamafios d e
fuentes y alineacion d e texto que use para controlar la apariencia d e sus documentos, quizas
estos luzcan terribles en distintos navegadores "alternativos". Incluso pueden n o desplegarse
e n 10s navegadores que n o soporten esas extensiones.
Admitimos que resulta un poco ambiguo condenar abiertamente el uso de extensiones de
HTML y, a la vez, presentar descripciones completas de su uso. De acuerdo con la filosofia
general d e Internet, pareciera equivocado proporcionarle las herramientas y esperar de
usted el suficiente desdkn para n o utilizarlas.
Aun asi, nuestra sugerencia s e mantiene: s610 utilice una extensi6n donde sea necesario o
muy ventajoso, y higalo con el conocimiento de q u e esti descartando a una parte d e su
pliblico. Para este fin, puede incluso considerar la posibilidad de proporcionar versiones por
separado d e sus documentos basadas en el estandar para usuarios de otros navegadores.

1.5.3 Mas alld de las extensiones: evite explotar

las fallas
Una cosa es aprovechar las ventajas d e una extensi6n d e HTML y otra, muy distinta, utilizar
las fallas conocidas e n una versi6n especifica d e un navegador para lograr algun efecto poco
usual e n su documento.
Un buen ejemplo es la falla de multiples etiquetas <body> en la versi6n 1.1d e Navigator de
Netscape. El estindar d e HTML insiste e n que un documento de ese lenguaje tiene unica-
mente una etiqueta <body>, que contiene el cuerpo del documento. El navegador, ahora
obsoleto, permitia cualquier cantidad d e etiquetas <body>, procesando y mostrando cada
una d e forma consecutiva. A1 colocar varias etiquetas <body> e n un documento d e HTML,
un autor podia lograr un burdo efecto d e animaci6n a1 cargar por primera vez el documento
e n el navegador. El truco mis comfin a1 utilizar varias etiquetas <body>, cada una con un
color d e fondo ligeramente diferente, da como resultado un efecto de aparici6n gradual.
La diversi6n termin6 cuando la versi6n 1.2 d e Netscape corrigi6 la falla. Repentinamente,
miles d e documentos perdieron su curioso efecto de aparicidn gradual. Aunque enfrent6
I . 6 Hewamientas para crear docurnentos d . HTML 13

algunas quejas violentas, debemos reconocer que el personal de Netscape sostuvo su deci-
si6n de adherirse al estandar, dando gran importancia a las quejas en su lista de prioridades,
no desdeiiindolas.
En este sentido, podemos inequivocamente ofrecerle esta sugerencia: nunca explote una
falla e n un navegador para lograr un efecto singular en sus documentos.

1.6 Hemmientas para crear documentos de HTML

Aunque puede usar el editor de texto m5s sencillo para crear documentos de HTML, la
mayoria de quienes se dedican a ello emplean un conjunto d e herramientas y utilerias mas
elaborado. Usted tambiCn necesita, a1 menos, un navegador, de manera que pueda probar y
refinar su trabajo. Mas all5 de lo esencial estiin algunas herramientas de software especiali-
zado para la preparaci6n y edici6n de documentos de HTML y otras para el desarrollo y
preparaci6n de archivos multimedia complernentarios.

Al menos necesitar5 un editor y un navegador para revisar su trabajo y, e n un caso ideal,

una conexion a Internet.

1.6.1.1 pi-ocesador de palabras o editor de texto?

Algunos autores utilizan las funciones de procesamiento de palabras d e su software especia-

lizado en la edici6n de HTML. Otros, como nosotros, preferimos componer nuestro trabajo
en un procesador de palabras ordinario y despuCs insertar etiquetas de HTML junto con sus
atributos. Incluso otros m i s agregan las etiquetas de HTML conforme componen el docu-
mento.
Pensamos que el enfoque por pasos -<rear y despuCs etiquetar- es el mas adecuado. Los
procesadores de palabras por lo general tienen mas y mejores herramientas de escritura, por
ejemplo, una herramienta para contornos, un revisor de ortografia y un diccionario de
sin6nimos, de manera que pueda manejar con pericia el flujo y el contenido del documento,
ignorando por el momento su apariencia. Sabemos que una vez que hemos definido y
escrito el contenido del documento, es m5s sencillo dar un segundo paso para agregar,
juiciosa y efectivamente, las etiquetas de HTML para darle formato. Observe tambiCn que, a
menos de un entrenamiento especifico (si es posible), 10s revisores de ortografia y dicciona-
rios de sin6nimos por lo comlin entran en conflict0 con las etiquetas de HTML y con sus
diferentes atributos. Puede pasarle algo asi como un eterno clic en el b o t h IGNORAR e n
todas esas apariciones validas de etiquetas cuando el revisor de sintaxis u ortografia las
localice e n un documento de HTML.
Cuindo y c6mo agregar etiquetas de HTML en su documento determina las herramientas
que necesita. Algunos procesadores de palabras, como Wordperfect o Word, vienen con
14 Capitub I: HTML y el World Wide W e b

herrarnientas automatizadas para tal fin; tambien hay otras que d e forrna autorn5tica tradu-
cen sus docurnentos e n docurnentos d e HTML. Pero no espere rnilagros. Con excepci6n de
algunos docurnentos ejernplares, quiz5 deba tratar con mucha atenci6n esos docurnentos
de HTML creados autorn5ticarnente, por seguridad.
Otro aspect0 que debe cuidar e n 10s editores d e HTML: no todos s e apegan a1 e s t h d a r
HTML 3.2, d e rnodo que examine sus especificaciones antes d e utilizarlos y, por supuesto,
antes de cornprar alguno. M5s adn, ciertos editores de HTML con una interfaz WYSIWYG
(what-you-see-is-what-you-get, lo que ve es lo que obtiene) no tienen integrados navegadores
actualizados, d e rnodo que pueden interpretar de forrna errada las etiquetas de HTML y
rnostrar el documento de rnodo incorrecto.

1.6 1.2 Navegadores

Es obvio que debe revisar sus nuevos docurnentos de HTML y probar su funcionalidad antes
de liberarlos a1 publico. Para quienes usan HTML d e rnodo consciente, e n particular para
quienes buscan irnpulsar sus docurnentos m5s all5 d e 10s est5ndares d e HTML, recornenda-
mos tener diferentes navegadores, quiz5 con multiples versiones ejecut5ndose e n distintas
cornputadoras, s61o con el prop6sito de estar seguro que lo que rnuestran es lo que esperan
y no una pesadilla.
Los navegadores m5s irnportantes y populares e n la actualidad son Navigator de Netscape e
Internet Explorer d e Microsoft. Obtenga copias de evaluaci6n d e sus respectivos servidores
de FTP an6nirno (ftp.netscape.com y ftp.microsoft.com), o p6ngase e n contact0 con su
distribuidor local en busca d e una versi6n cornercial (de alrededor de 50 d6lares).

1.6.1.3 Conexidn a Internet

Pensarnos que debe tener acceso confiable a Internet si e n realidad le interesa aprender y
especializarse e n estrategias de prograrnaci6n con HTML. Est5 bien, no es absolutarnente
necesario, ya que puede elaborar y revisar docurnentos de HTML d e forrna local. Y para
algunos, incluso una conexi6n no es quiz5 posible o pdctica, aunque hagan un esfuerzo: e n
ocasiones no hay un rnejor rnCtodo d e aprender sino por ejernplos: 10s ejernplos d e HTML
abundan e n Internet, buenos y rnalos, y puede descargar y examinar su c6digo fuente.
M5s a h , es esencial una conexi6n a Internet para desarrollo y prueba si incluye e n sus
docurnentos ligas d e hipertexto a otros servicios de Internet. Pero e n particular, una co-
nexi6n a Internet le proporciona acceso a gran diversidad d e sugerencias y actualizaciones
a1 lenguaje por rnedio d e grupos de discusi6n interesados e n el tema, asi corno a 10s
multiples programas, esenciales y cornplernentarios, que puede utilizar para preparar docu-
rnentos d e HTML.
1.6 Herramientas para crear documentos de HTML 15

1.62 Herramientas adicionales

Si est4 seriamente interesado en crear documentos, pronto descubrir4 que existe toda clase
de herramientas fabulosas que le facilitargn la vida. La lista de aplicaciones disponibles de
freeware, shareware y comerciales crece dia con dia, de manera que es dtil proporcionarle
una lista. fista es, d e hecho, otra buena raz6n por la que deberia conseguir una conexi6n a
Internet; varios sitios mantienen listas actualizadas de recursos sobre HTML e n el Web. Si en
verdad estl decidido a emplear este lenguaje, seguro visitari esos sitios de forma regular
para mantenerse a1 tanto de las novedades, herramientas y tendencias.
Pensamos que 10s siguientes tres sitios del web son 10s m4s dtiles. Cada uno contiene
docenas, con frecuencia cientos de ligas con descripci6n detallada de productos y diversa
informaci6n importante. Visitelos.
http://www.stars.com
JWWU,.
http://union. ncsa.~iuc,eddH1~,erNews/ge html
http://www.yahoo,com
 En este capftuh:

Un p r l w documento de
HTML
Etiquetas de HTML
bmstdas
Esqueleto de un
documento de HTML
Inicio rapido a El contenid0 de un
documento de HTML
HTML HTML y texto
Ligas de bipertexto
Las imdgaes son
especiaks
Listas, d0cumentos
rastmables y formas
Tablas
Marcos

Nosotros no pasamos horas estudiando y meditando profundamente sobre algtin libro de

referencia antes de escribir nuestro primer documento de HTML. Usted quiz5 tampoco.
HTML es sencillo de leer, comprender y escribir. De mod0 que no podemos comenzar sin
primer0 aprender un conjunto de reglas poco conocidas.
Para ayudarle e n ese seguro y satisfactorio comienzo, hemos incluido e n este capitulo un
breve resumen de 10s diferentes elementos de HTML. Por supuesto, hemos dejado fuera
muchos detalles y algunas sugerencias que seria conveniente que conociera. Lea 10s si-
guientes capitulos para obtener detalles esenciales para convertirse e n un h5bil programa-
dor con HTML.
Incluso si ya conoce un poco HTML, le recomendamos seguir este capitulo antes de conti-
nuar con el resto del libro, pues le proporciona una introducci6n a 10s fundamentos de
HTML y a su sintaxis especifica, lo que le ayudara a ser m5s productivo, con una s6lida
confianza generada a partir de la creaci6n de atractivos documentos en muy poco tiempo.

2.1 Herramientas de escritura

Utilice cualquier editor de texto para crear documentos de HTML, siempre y cuando pueda
guardar su trabajo e n un disco con formato ASCII. Aunque 10s documentos de HTML incluyen
2.2 Un primer documento de HTML 17

elaborado diseiio de texto e imageries, propiamente son s610 documentos de simple y anticua-
d o ASCII. Resultan adecuados y estratkgicos un editor WYSIWYG, un traductor de HTML o su
procesador de palabras favorito, aunque puede no soportar varias de las funciones no e s t h -
dares de HTML que estudiaremos en este libro. Es probable tambiCn que termine haciendo
mejoras y correcciones menores a1 texto fuente que producen tales programas.
Aunque n o es indispensable, debe contar a1 menos con la versi6n de un navegador de uso
mas comun instalado e n su computadora para revisar su trabajo, de preferencia Navigator
d e Netscape o Internet Explorer de Microsoft. Esto se debe a que el documento fuente de
HTML que desarrolle e n su editor de texto no se muestra en absoluto parecido a lo que
despliega un navegador, aun tratandose del mismo documento. Asegdrese de que 10s lecto-
res e n realidad vean lo que usted desea revisando localmente su documento d e HTML e n el
navegador. Ademas, 10s navegadores de uso extendido son gratuitos e n Internet. Si no
puede obtener una copia pidale a otro usuario que le facilite la suya.
Observe tambikn que no es necesario una conexi6n a Internet o a1 World Wide Web para
crear y revisar documentos de HTML. Puede escribir y revisar sus documentos almacenados
e n una unidad de disco duro o flexible conectada a su computadora. Incluso puede navegar
por sus documentos locales mediante ligas (tambikn conocidas como vinculos e hiperenlaces)
d e HTML sin estar conectado a Internet o a alguna otra red. De hecho, le recomendamos
que trabaje d e forma local para desarrollar y probar ampliamente sus documentos de HTML
antes de compartirlos con otros usuarios.
No obstante, le recomendamos mucho que sf consiga una conexi6n a Internet y a1 World
Wide Web si e n verdad esta interesado en la creaci6n de documentos de HTML. Puede
descargar y revisar paginas de otros usuarios que le parezcan interesantes y observar c6mo
es que logran algunas funciones interesantes, buenas y malas. Aprender mediante ejemplos
tambiCn es divertido (reutilizar el trabajo de otros, por otro lado, por lo general es problem&
tico, si no es que absolutamente ilegal). Una conexi6n a Internet es esencial si incluyera e n
su trabajo ligas a otros documentos d e esa red.

2.2 Un primer documento de WTML

Pareciera que todo libro sobre lenguajes de programaci6n alguna vez escrito comenzara con
un ejemplo sobre c6mo desplegar el mensaje "iHola, mundo!" Bien, e n esta obra no ver5 el
ejemplo "iHola, mundo!" DespuCs de todo, esta es una guia de estilo para el siguiente
milenio. Por lo tanto, nosotros enviamos saludos a1 World Wide Web:
<html>
<head>
<tit l e>Mi primer documento de HTML</ti tl e>
</head>
<body>
<h2>Mi primer documento de HTML</h2>
Hola, <i>iWorld Wide Web!</i>
IR Cabitulo 2: Inicio rdDido a HTML

<!--En lugar de "Hola, mundoH-->

<P>
Sal udos desde<br>
<a href="http://www.mcgrawhi 1 1 .com">McGraw-Hi ll</a>
<P>
Creado cuidadosamente por:
<ci te>(i nserte aqui su nornbre)</ci te>
<br>&copy; 2000 y mas
</body>
</html>

Adelante: teclee el ejemplo de HTML en una pigina limpia de su procesador de palabras y

gufirdelo e n su disco local como miprimer.htm1.AsegQrese de guardarlo e n formato ASCII;
10s formatos especificos de algunos procesadores de palabras, como 10s .doc de Word
guardan caracteres ocultos que pueden confundir a1 navegador y alterar el despliegue de su
documento de HTML.

DespuCs de guardar miprimer.htm1(o miprimer.htm si utiliza una computadora con DOS o

Windows 3.11) en disco, inicie su navegador, localice el documento desde el men6 Archivo
y 5bralo. Su pantalla debe mostrar algo muy parecido a la figura 2-1.

: I I"I1/Jl"lf"lq"II,-1]
?w er
.;
a h n lnioio Edltrr Rpwgr h6pa Buscw P >. #r

Mi primer documento de HTML

Figura 2-1. Un documento de HTML muy sencillo.

2.3 Etiquetas de HTML incrustadas

Quizas haya notado por casualidad que el navegador despliega menos de la mitad del texto
tecleado. Una inspeccion mas detallada del texto fuente revela que falta todo lo que estfi
dentro del par d e signos menor que (<) y mayor que (>). [sintaxisde etiquetas, 3.31

HTML e s un lenguaje d e incrustaciones: usted inserta instrucciones o etiquetas en el mismo

documento que abrirfi en un navegador. El navegador utiliza la informaci6n de las etique-
2.4 Esqueleto de un documento de HTML 19

tas d e HTML para decidir c6mo desplegar o tratar el contenido subsecuente e n el documen-
to d e HTML.
Por ejemplo, la etiqueta <i>que precede a la frase "World Wide Web" en nuestro ejemplo le
indica a1 navegador que debe desplegar el texto que le sigue en cursivas.' [estilos fisicos, 4.51
La primera palabra e n una etiqueta es su nombre (en ingles), que por lo general tambien es
descriptivo d e su funci6n. Cualquier palabra adicional en una etiqueta son atributos espe-
ciales, algunas veces llevan un valor asociado en seguida del signo igual (=), que define o
modifica la acci6n de la etiqueta.

2.3.1 Etiquetas de inicio y fin

La mayoria d e las etiquetas definen y afectan una parte discreta del documento de HTML. La
parte comienza donde la etiqueta y sus atributos aparecen por primera vez e n el documento
fuente (se le denomina etiqueta de inicio) y continfia hasta donde se encuentra su corres-
pondiente etiqueta defin. Una etiqueta de fin es la misma etiqueta de inicio pero precedida
por una diagonal (1).Por ejemplo, la etiqueta de fin correspondiente a la etiqueta para
"iniciar cursivas", <i>,es </i>.
Las etiquetas de fin nunca incluyen atributos. La mayoria (no todas) de las etiquetas tienen
una etiqueta para finalizar su acci6n. Y, para facilitar su labor a quienes desarrollan con
HTML, 10s navegadores por lo general infieren una etiqueta de fin de acuerdo con el contex-
to evidente, d e mod0 que no es necesario incluir de forma explicita algunas de esas etique-
tas en el documento de HTML (le indicaremos cu5les son opcionales y cuiles nunca debe
omitir cuando describamos cada etiqueta en 10s capitulos siguientes). Nuestro ejemplo no
cuenta con una etiqueta de fin que comlinmente se infiere y que, por lo tanto, no se incluye
en 10s documentos y muchos autores experimentados incluso no saben que existe. iCu5l es?

2.4 Esqueleto de un documento de HTML

Observe tambikn e n el ejemplo de c6digo que precede a la figura 2-1 que el documento de
HTML comienza y termina con las etiquetas <htrnl> y </htrnl>. Por supuesto, estas etiquetas
indican a1 navegador que todo el documento est5 crqado e n HTML. El estindar indica una
etiqueta <htrnl> para cada documento de HTML, aunque la mayoria de 10s navegadores
pueden detectar y desplegar de manera apropiada la codificaci6n de HTML e n un documen-
to de texto que omita esta etiqueta estructural exterior. [ehtml*, 3.5.11
A1 igual que e n nuestro ejemplo, todos 10s documentos de HTML tienen dos estructuras
principales: una cabeza y un cuerpo, cada una delimitada en el texto fuente por sus respec-

' El texto que aparece en cursivas es un ejemplo muy sencillo y que la mayoria de 10s navegadores, excepto los
de s61o texto, como Lynx, pueden manejar. En general, el navegador intenta seguir las instmcciones, pero como
lo mostramos en 10s capitulos siguientes, experimentan transformaciones en distintas computadoras y con distin-
tos usuarios, como sucede con 10s tipos de letra disponibles y seleccionados por el usuario para ver sus docu-
memos de HTML. DC por hecho que no todos son capaces o e s t h preparados para desplegar su documento de
HTML de la misma forma en que aparece en su pantalla.
20 Capftulo2: Inicio rdpido a HTML

tivas etiquetas d e inicio y fin. Puede colocar la informaci6n descriptiva del documento e n la
cabeza (o secci6n d e encabezado) y el contenido que desea desplegar e n la ventana del
navegador en la secci6n correspondiente a1 cuerpo. Excepto e n raros casos, la mayor parte
del tiempo la dedicarQ a trabajar en el cuerpo del documento de HTML. [*head>, 3.6.11
[*body>, 3.7.11
Existen muchas etiquetas en la secci6n d e encabezado que puede utilizar para definir la
forma e n que desea acomodar un documento especifico dentro d e un conjunto d e docu-
mentos y dentro del mQs grande esquema del Web. Algunas etiquetas no estandares de la
seccion d e encabezado incluso dan animaci6n a su documento.
No obstante, para la mayoria d e 10s documentos, el elemento d e encabezado miis importan-
te es el titulo. El e s t h d a r d e HTML establece que todo documento d e este lenguaje requiere
un titulo. Elija uno significativo; debe indicar a1 lector sobre quk trata el documento. Ponga
el suyo, a1 igual que nosotros lo hicimos e n nuestro ejemplo, entre las etiquetas < t i t 1 e> y
< / t i t l e > . Los navegadores de uso mQs extendido por lo general muestran el titulo e n la
parte superior d e la ventana. [*title>, 3.6.21

2.5 El contenido de un documento de HTML

AdemQs d e las etiquetas <html>, <head>, <body> y < t i tie>, el estsndar de HTML tiene
algunos otros elementos d e estructura necesarios. Usted tiene la libertad d e incluir cualquier
tip0 de material e n el contenido d e su documento (10s navegadores saben que quienes
programan con HTML aprovechan la ventaja d e esta libertad). Pero sorprendentemente s61o
existen tres tipos principales d e contenido de HTML: etiquetas (que explicamos arriba),
comentarios y texto.

A1 igual que el c6digo fuente d e un programa d e computo, un documento d e HTML a1

natural, con todas sus etiquetas incrustadas, puede ser casi ilegible. Le invitamos de manera
muy especial a utilizar comentarios d e HTML para guiar y documentar su creaci6n.
Aun cuando forman parte d e su documento, nada de 10s comentarios, incluyendo el texto
que va entre 10s delimitadores especiales d e etiqueta "<! --" para inicio y para fin, se
'I-->"

insertan e n lo que el navegador despliega de su documento. Puede ver un comentario en el

documento fuente, a1 igual que en nuestro ejemplo anterior, y n o verlo e n el navegador,
como evidencia la figura 2-1. No obstante, cualquier persona puede descargar el texto
fuente del documento d e HTML y leer 10s comentarios, de manera que sea cuidadoso con lo
que escribe. [comentarios, 3.4.31

2.5.2 Texto
Si no es una etiqueta o un comentario, es texto. El grueso del contenido e n casi todos 10s
documentos de HTML -la parte que 10s lectores ven e n sus navegadores- es texto. Algu-
2.6 HTML y text0 21

nas etiquetas indican la estructura del texto; por ejemplo, encabezados, listas y tablas. Otras
sugieren a1 navegador como dar formato y desplegar el contenido.

2.5.3 Multimedia
Y ique decir sobre las imigenes y otros elementos multimedia que vemos y escuchamos
como parte de lo que nuestros navegadores despliegan? NO forman parte del documento de
HTML? No. Los datos que componen las imigenes, video, sonidos y otros elementos
multimedia que pueden incluirse en la ventana de 10s navegadores se encuentran en archi-
vos independientes. Puede hacer referencia a esos elementos multimedia por medio de
etiquetas especiales insertadas en el documento de HTML. El navegador utiliza esas referen-
cias para cargar e integrar otros tipos de archivos con el documento de HTML.
No incluimos ninguna referencia multimedia especial e n el ejemplo anterior porque 10s
archivos de multimedia son independientes, n o son texto, no es posible teclearlos e n un
procesador de palabras. Sin embargo, e n este capitulo si explicamos y damos ejemplos de
como integrar imigenes y otros elementos multimedia e n documentos de HTML, aunque
damos mas detalles e n capitulos subsecuentes.

2.6 HTML y texto

Las etiquetas de HTML relacionadas con el texto cornprenden el conjunto mis amplio de
todo el estandar del lenguaje, pues HTML surgi6 como una forma de enriquecer la estructu-
ra y organization del texto.
HTML proviene d e la academia. L o que fue y sigue siendo irnportante para aquellos prime-
ros desarrolladores es la posibilidad de que la mayoria de sus documentos academicos
orientados a texto pueden ser examinados y leidos acuciosamente sin sacrificar la posibili-
dad d e distribuirlos por Internet para su desplegado electr6nico en una amplia variedad de
plataformas (el texto ASCII es el unico formato universal en todo Internet). La integraci6n
de multimedia es una especie de agregado a HTML, aunque un agregado importante.
El diseiio d e pigina es secundario para estructurar documentos en HTML. Nosotros 10s
humanos examinamos de manera visual y establecemos relaciones textuales y basadas en la
apariencia; las miquinas s610 pueden leer c6digos. Debido a que 10s documentos d e HTML
tienen etiquetas de codification relacionadas con significados, se prestan muy bien para
blisquedas electronicas automatizadas y recompilaci6n del contenido, funciones muy im-
portantes para 10s investigadores. En HTML no importa tanto el cdmo se expresan las ideas
sin0 las ideas mismas.
Por lo tanto, HTML no es un lenguaje para diseiio de piginas. De hecho, dada la diversidad
de navegadores hechos a la medida, asi como la variedad de plataformas de c6mputo para
obtener y desplegar documentos electr6nicos, el prop6sito de HTML es sugerir, n o ordenar,
c6mo puede aparecer el documento a1 mostrarlo e n el navegador.
No puede forzar a1 navegador a desplegar su documento e n una forma especifica. Insistir en
lo contrario puede ocasionarle dolores de cabeza.

2.6 1 Apartencia del texto

Por ejemplo, no puede predecir q u t fuente y tamaiio especificos -4o 40 puntos, Helvetica,
Geneva, Subway, etcetera- utilizari un usuario en particular. Por lo tanto, 10s navegadores
mis recientes ahora soportan hojas de estilo de HTML y otras funciones de edici6n electr6nica
que le permitan controlar el diseiio y apariencia de 10s documentos. Aunque 10s usuarios
puedan cambiar las caracteristicas de sus navegadores para desplegar documentos y cambiar
10s valores prestablecidos, la mayoria de 10s navegadores no soportan estas nuevas funciones
y aunque algunos otros s61o s6n de texto, no pueden desplegar fuentes vistosas. iQut hacer?
Concentrarse en el contenido. Las impresionantes piginas prometen mucho pero no siempre
funcionan. El contenido sustancial hace que las personas se vuelvan adictas a su sitio.
Sin embargo, el estilo si facilita la lectura y conviene incluirlo siempre que sea posible y
cuando no interfiera con la presentaci6n del contenido. Puede dar a1 texto atributos de estilo
generales mediante etiquetas de estilofsico, como la etiqueta de cursivas, < i > , en nuestro
ejemplo. Lo mis importante y funcional para el prop6sito original del lenguaje es que HTML
tiene etiquetas basadas en contexto que dan significado a diferentes pirrafos del texto. Y
puede alterar las caracteristicas para su desplegado, por ejemplo, de color, estilo y tamaiio
de fuente, etcetera, mediante las hojas de estilo sobrepuestas ("en cascada") y las basadas
e n JavaScript.
Todos 10s navegadores grificos actuales reconocen etiquetas de estilo fisico y las relaciona-
das con el contenido, y cambian la apariencia de pirrafos de texto para transmitir signifi-
cad0 o estructura. Usted no puede predecir exactamente c6mo aparecerin 10s cambios.

2.6 1.1 Estilos de texto basados en contenido

Las etiquetas de estilo basadas en contenido indican a1 navegador que una parte especifica
del texto de HTML tiene un uso o significado especifico. La etiqueta < c i t e > e n nuestro
ejemplo significa que el texto que le sigue es alglin tip0 de cita, el autor del documento, en
este caso. Comlinmente, 10s navegadores, aunque no todos, muestran el texto de una
cita e n cursivas, no como texto normal. [estilos basados en contenido, 4.41
Aunque puede ser obvio para el lector que el texto es una cita, alglin dia, alguien puede
crear un programa que haga blisquedas de etiquetas < c i t e > e n documentos de HTML y
compile una lista especial de citas. Algunos programas de este tip0 ya hacen blisquedas
intensivas e n Internet sobre informaci6n de HTML para compilar listas, como las infames
bases de datos de las piginas de Webcrawler y Lycos.
El estilo basado e n contenido mPs comlin y utilizado e n la actualidad es el de Cnfasis,
indicado con la etiqueta <em>. Y si e n verdad se siente muy enfgtico, puede utilizar el estilo
de contenido <strong>. Otros estilos basados en contenido son <code>, para breves mues-
2.6 HTML y text0 23

tras d e c6digo de programaci6n; <kbd>, para indicar texto escrito por el usuario mediante el
teclado; <samp>, para marcar texto de ejemplo; <dfn>, para definiciones; y <var>, para
delimitar nombres de variables en 10s ejemplos d e c6digo de programaci6n. Todas estas
etiquetas tienen sus correspondientes etiquetas de fin.

Incluso 10s procesadores de texto mis simples soportan algunos estilos tradicionales de
texto, como caracteres e n cursivas y e n negritas. Aunque HTML no es una herramienta para
procesar texto e n el sentido tradicional, si proporciona etiquetas que le indican a1 navegador
de forma explicita que despliegue (si puede) un carlcter, palabra o frase e n un estilo
especifico.
Aunque debe utilizar etiquetas basadas en contenido por las razones ya expuestas, algunas
veces la forma es mis importante que la funcion. Por ello utilizamos la etiqueta <i> para pre-
sentar texto en cursivas, sin imponer ningQn significado especifico; la etiqueta <b> para
desplegar texto e n negritas; o la etiqueta <tt>para que el navegador, si le es posible, desplie-
gue el texto e n una tipografia monoespaciada, de estilo de teletipo. [estilos fisicos, 4.51
Es sencillo caer en la trampa de utilizar estilos fisicos cuando e n realidad debe utilizar un
estilo basado e n contenido. Disciplinese usted mismo para utilizar estilos basados en conte-
nido, ya que, como analizamos con anterioridad, proporcionan tanto significado como esti-
lo; por lo tanto, facilitan la automatizaci6n y manejo de sus documentos.

2.6 1.3 Caracteres de texto especiales

No todos 10s caracteres de texto disponibles para ser desplegados por un navegador se
pueden ingresar desde el teclado. Ademls, algunos caracteres tienen significados especiales
e n HTML, como 10s picoparentesis que delimitan las etiquetas, que de no diferenciarse a1
utilizarlos e n el texto general -por ejemplo, el signo menor que (<) e n una ecuaci6n
matemitica- confundirian a1 navegador y dafiarian el documento. HTML le proporciona
una forma d e incluir cualquiera de estos caracteres, que comprende el conjunto d e caracte-
res ASCII, e n cualquier parte de su texto mediante la codificaci6n especial de sus entidades
de caracter.
A1 igual que el simbolo de derechos reservados en nuestro ejemplo, una entidad de cadcter
comienza con un ampersand (&) seguido de su nombre (en ingles) y termina con un punto y
coma (;) [alternativamente, tambien puede utilizar el nlimero de posici6n del caricter e n la
tabla de caracteres ASCII, precedido por el signo de nlimero (#) en lugar de su nombre en
la secuencia de entidad de caricter] . Cuando se presenta el documento, el navegador desplie-
ga el caricter apropiado si existe en las fuentes del usuario. [entidades de carkter, 3.4.21
Por razones obvias, las entidades de caricter utilizadas con mis frecuencia son 10s signos
mayor que (&gt ;), menor que (&lt ;) y el ampersand (&amp;). Consulte el apendice E para
ver quC simbolo representa la entidad de caricter &#166;.
24 Capftulo2: Inicio rdpido a H T M L

2.62 Estructuras de texto

En nuestro ejemplo n o resulta obvio, pero 10s retornos de carro o saltos de linea tan
comunes que utilizamos para separar piirrafos e n nuestro documento fuente n o tienen
significado en HTML, excepto e n circunstancias especiales. Habria podido teclear el docu-
mento e n una sola linea e n el editor d e texto y seguiria apareciendo e n su navegador como
e n la figura 2-1.'
De igual manera, pronto descubriri, si acaso no lo lee aqui primero, que excepto en casos
especiales, 10s navegadores por lo comOn ignoran el espaciado entre lineas y entre caracte-
res (si observa con atenci6n en el ejemplo de documento fuente, la linea "Saludos desde"
deberia aparecer indentada, pero n o sucede asi en la figura 2-1).

2.6.2.1 Pdrrafos y cortes de linea

Un navegador toma el texto del cuerpo del documento y lo hace "fluir" e n la pantalla d e la
computadora, sin importar el uso d e caracteres de retorno de carro o saltos de linea e n el
texto fuente. El navegador llena e n lo posible cada una d e las lineas de su ventana, comen-
zando desde el margen izquierdo hacia el derecho, y luego pasa a la siguiente linea. A1
redimensionar la ventana del navegador, el texto se vuelve a acomodar para abarcar el
nuevo espacio, lo cual muestra la flexibilidad inherente a HTML.
Por supuesto, seria molesto para 10s lectores que el texto fluyera y fluyera, por lo que
HTML proporciona formas explicitas e implicitas de controlar la estructura biisica del do-
cumento. Las formas m i s rudimentarias y comunes son las etiquetas de piirrafo ( c p ) y
d e salto de linea (cbr>). Ambas cortan el flujo d e texto, el cual en consecuencia se reanu-
da en una nueva linea. La Onica diferencia es que en la mayoria de 10s navegadores,
la etiqueta d e p%rrafo agrega miis espacio despuks del salto d e linea. [*p>, 4.1.21 [*br>,
4.7.11
Por cierto, el estindar de HTML incluye etiquetas d e inicio y fin para la etiqueta de piirra-
fo, pero no para la d e salto de linea. Aunque pocos autores incluyen la etiqueta de fin de
piirrafo en sus documentos, el navegador por lo general puede identificar d6nde conclu-
ye un piirrafo y d6nde comienza el siguiente.t Es un punto a su favor si tiene presente que
</p> existe.

' Utilizamos un estilo de indenraci6n semejmte al d e la programacion para que nuestros documentos Fuente d e
HTML sean m%s legibles. No es obligatorio ni tampoco U n d guia de estilo formal para componer documentos
de HTML. No obsrante, si recomendamos ampliamente adoptar un estilo propio y consistente a fin de que usted
y otros usuarios puedan entender con facilidad sus documentos fuente.
t La etiqueta para indicar el fin de pirrafo se utiliza con mis frecuencia ahora que 10s navegadores mas populares
soportan el atributo d e alineaci6n d e pirrafo.
2.6.2.2 Encabezados
Ademis d e separar su texto en piirrafos, tambiCn puede organizar sus documentos en sec-
ciones por medio d e encabezados. A1 igual que 10s d e Qtas y otras piiginas del libro, 10s
encabezados d e HTML no s61o dividen y titulan discretos piirrafos d e texto, tambiCn brindan
significado visual; ademiis, 10s encabezados tambiCn permiten aniilisis automatizados.
HTML tiene seis etiquetas d e encabezados, d e < h l > a <h6>, con sus correspondientes
etiquetas d e fin. Por lo general, el navegador despliega su contenido en fuentes tipogriifi-
cas q u e van d e grandes a pequefias, respectivamente, y algunas veces en negritas. El texto
dentro d e la etiqueta <h4> comdnmente es del mismo tamafio que el del texto normal.
[encabezados,4.2.11
Asimismo, las etiquetas d e encabezado por lo general seccionan el flujo del texto, apare-
ciendo en lineas independientes del texto que las acompafia, a pesar d e n o haber etiquetas
d e piirrafo o d e salto d e linea explicitas antes o despuCs d e un encabezado.

Ademiis d e 10s encabezados, HTML tambiCn proporciona lineas, conocidas tambiCn como
reglas horizontales, que ayudan a determinar y separar las secciones d e 10s documentos.

Cuando un navegador encuentra una etiqueta <hr> en un documento, rompe el flujo del
texto y dibuja, en un nuevo renglbn, una linea que cruza por completo la ventana que utiliza
el navegador para mostrar el documento. El flujo de texto contin6a e n seguida, debajo de la
linea. [*hr*, 5.1.11

2.6.2.4 Texto conformato previo

En ocasiones desearii que el navegador muestre un bloque d e texto tal como estii, sin
cambios ni modificaciones; por ejemplo, lineas indentadas y letras o ndmeros alineados
verticalmente que no cambien aunque se redimensione la ventana del navegador. La etique-
ta <pre>se aplica e n estas ocasiones. Todo el texto, hasta la etiqueta de fin, </pre>, apare-
cerii e n la ventana del navegador tal como se escribi6, incluyendo 10s retornos d e carro y
saltos de linea, el espaciado entre lineas y entre caracteres. Aunque es d e mucha utilidad
para tablas y formas, el texto asignado a la etiqueta <pre> resulta mon6ton0, ya que 10s
navegadores populares lo presentan en tipografia monoespaciada. [*pre*, 4.7.51

2.7 Ligas de hipertexto

Aunque el texto es la pieza biisica de un documento de HTML, su principal valor es el
hipertexto. El hipertexto da a 10s usuarios la posibilidad d e obtener y desplegar un docu-
mento diferente d e otro conjunto d e documentos, ya sea propio o no, mediante un simple
clic del rat6n en una palabra o frase asociada (liga) en nuestro documento d e HTML. Utilice
estas ligas interactivas para ayudar a 10s lectores a navegar y localizar informaci6n con
26 Capftulo2: Infcio rdpido a HTML

facilidad e n documentos -propios o ajenos- de una forma independiente e n mliltiples

formatos, incluyendo multimedia, HTML y texto ASCII. Las ligas, literalmente, ponen la
riqueza de conocimientos de todo Internet a1 alcance de un clic del rat6n.
Para incluir una liga a alglin otro documento e n una colecci6n de documentos propia o en
Timbuktu, lo unico que debe saber es la direcci6n especifica del documento y c6mo colocar
un ancla e n su documento de HTML.

2.71 Los Urn

Aunque es dificil creerlo debido a 10s millones, quizi millones de millones que hay e n
circulaci6n, cada documento y recurso en Internet tiene una direcci6n linica, conocida
como su localizador de recursos uniforme (URL, uniform resource locator, comunmente
pronunciado por sus siglas en inglCs "u-ere-ele"). Un URL se compone del nombre del
documento, precedido por la jerarquia de nombres de directorio donde esti almacenado el
archivo (trayectoria), el nombre de dominio del servidor que hospeda a1 archivo y el pro-
grama y forma en que el navegador y el servidor anfitri6n se comunican para intercambiar
el documento @rotocolo).

Estos son algunos ejemplos de URL:

htp://www.kumquat.com/docs/catalos/pricee1ist.html
price-list, html
http://www.kumquat,com/
fp:/Jp.netcom.com/pub/
El primer ejemplo es lo que se conoce como un URL absoluto o completo, e incluye cada
parte del formato URL: protocolo, servidor y la trayectoria hacia el documento.
Como el URL absoluto no deja nada a la imaginacibn, puede darle dolores de cabeza
cuando mueve el documento a otros directorios o servidores. Por fortuna, 10s navegadores
tambiCn permiten utilizar 10s URL relativos y llenan de forma automatica cualquier elemento
faltante con las partes respectivas del URL base del documento actual. El segundo ejemplo
es el URL relativo, el mis simple de todos; e n 61 se supone que el documentoprice-list.htm1
se localiza en el mismo servidor y en el mismo directorio que el documento e n uso.
El URL relativo tambiCn es util si no conoce el directorio o el nombre del documento. El
tercer ejemplo d e URL, por ejemplo, apunta a la pigina principal del servidor kumquat.com.
Aunque las apariencias pueden indicar lo contrario, el hltimo ejemplo de URL en realidad es
absoluto; apunta directamente a1 contenido del directorio /pub del servidor de FTP an6nimo
netcom.com.
2.35 Ligas de bipettexto 27

2.72 Anclas
La etiqueta de ancla, mejor conocida como etiqueta de liga, <a>, es la herramienta con que
HTML define tanto la fuente como el destino d e una liga.' Utilizarl y verl con mls frecuen-
cia la etiqueta <a> con su atributo h r e f para definir una liga. El valor del atributo es el URL
destino.
El contenido d e la etiqueta <a> -las palabras y/o imageries entre ella y su correspondiente
etiqueta d e fin, </a>-- es la parte del documento de HTML que resalta en el navegador y
que el usuario selecciona (hace clic) para archivar una liga. Este contenido ancla por lo
general aparece diferente a1 resto del documento (es texto e n un color diferente, o subraya-
do, o son imggenes con bordes resaltados d e forma especial), y el puntero del rat6n cambia
d e forma cuando pasa por encima de ellos. El contenido d e la etiqueta <a>, por lo tanto.
debe ser texto o una imagen (10s iconos son fabulosos) que en forma explicita o intuitiva
indican a 10s usuarios a d6nde 10s llevar5 la liga. [<a>, 7.3.11
Por poner un caso, en el siguiente ejemplo el navegador despliega d e manera especial y el
puntero del rat6n cambia cuando pase por el texto "Archivo kumquat":
Para obtener mayor informacidn sobre kumquats, visite nuestro
<a href="http://www. kumquat .com/archi vo. html">
Archivo kumquat</a>
Si el usuario hiciera clic con el rat6n sobre ese texto, el navegador traeria d e forma automa-
tics desde el servidor uww.kumquat.com una plgina web (http:) denominada archivo.htm1
y en seguida la mostraria a1 usuario.

2.73 Nombres de ligas y navegacidn

Poder apuntar a otro documento e n cualquier parte del mundo no s61o es grandioso, tam-
biCn funciona para sus propios documentos d e HTML. Incluso la principal labor de las ligas
es ayudar a 10s usuarios a navegar por una colecci6n de documentos e n busca d e la infor-
maci6n que les interesa. De aqui surgi6 el concept0 d e plgina principal (home page) y
documentos complementaries.
Ninglin documento d e HTML debe (o deberia) prolongarse indefinidamente. Existe primer0
una raz6n de desempeiio: el valor d e su trabajo desciende, no importa culn rico sea, si el
documento tarda una eternidad en desplegarse y si una vez obtenido, 10s usuarios estln
obligados a desplazarse indeterminadamente e n busca d e una secci6n o dato en particular.

' La nomenclatura aqui resulta un poco desafonunada: la etiqueta "ancla" deberia marcar s61o el destino y no
tambien el punto de panida de una liga. Usted "establece un ancla", no viene de una. Incluso no mencionarnos la
terminologia tan confusa que el estlndar de HTML utiliza para definir las diferentes panes de una liga.
28 Capftulo2: Inicio rdpido a HTML

Mejor disene su trabajo bajo el concept0 d e una colecci6n de p5ginas breves y concisas, a1
igual que 10s capitulos de este libro, cada una centrada en un tema especifico para una rPpida
selection y consulta por parte del usuario. DespuCs, utilice ligas para organizar esa colecci6n.
Por ejemplo, utilice su p5gina principal --el documento inicial de la colecci6n- como un
indice maestro con breves descripciones y ligas apuntando a1 resto de sus documentos.
TambiCn podria utilizar el atributo especial de la etiqueta <a> denominado name. Las anclas
con el atributo name sirven como ligas con destinos internos e n un documento d e HTML. Por
lo general, el navegador despliega de inmediato un documento reciCn descargado en su
comienzo. Las anclas con el atributo name le permiten comenzar el desplegado en la secci6n
que le interesa. S61o incluyalo e n cualquier parte donde tenga sentido una liga como desti-
no; n o cambian la apariencia del contenido dentro o fuera del atributo.
Por lo tanto, puede agregar el nombre, despues d e un signo d e numero intermedio (#),
como sufijo e n el URL d e una liga que haga referencia a ese lugar especifico en su docu-
mento. Por ejemplo, para hacer referencia a un tema especifico e n un archivo, como el de
"Recetas d e estofado d e kumquats" en nuestro ejemplo Archivo kumquat, puede marcar esa
secci6n con un nombre de ancla:
... contenido precedente ...
<a name="Estofados">
<h3>Recetas de e s t o f a d o de kumquats</h3>
</a>

En el mismo u otro documento, puede preparar una liga fuente que apunte directamente a
las recetas incluyendo el nombre del ancla d e la secci6n como un sufijo a1 URL del docu-
mento, separado por un signo de numero:
Para o b t e n e r mayor i n f o r m a c i 6 n s o b r e kumquats, v i s i t e n u e s t r o
<a href="http://www. kumquat .com/archivo. h t m l M >
A r c h i vo kumquat</a>
y q u i z a pruebe una o dos de n u e s t r a s
<a href="http://www.kumquat.com/archivo.html#Estofados"~
Recetas de e s t o f a d o de kumquats</a>.

Si un usuario selecciona la ultima liga, haria que el navegador descargara el documento

archivo.htm1y comenzara a mostrar la secci6n denominada "Estofados".

2.7.4 Anclas mds alld de HTML

Las ligas d e HTML n o e s t b limitadas a documentos del mismo tipo. Las anclas le permiten
apuntar a casi cualquier tip0 d e documento disponible en Internet, incluyendo otros servi-
cios d e esa red.
Sin embargo, "permitir" y "tener autorizaci6nn son dos cosas distintas. Los navegadores
pueden manejar 10s diferentes servicios d e Internet, como R P y Gopher, de mod0 que 10s
usuarios puedan descargar documentos que no son d e HTML, pero todavia n o integran
servicial o completamente funciones d e multimedia.
2.8 Las imdgenes son especiales 29

En la actualidad existen algunos esdndares para 10s diferentes tipos y formatos de multimedia.
Los sistemas de computaci6n conectados a1 Web varian ampliamente en sus capacidades de
desplegar estos formatos de sonido y video. Excepto por algunas imlgenes, el estindar
de HTML no cuenta con ninguna medida especifica para desplegar documentos multimedia,
solo da la posibilidad d e hacer referencia a alguno mediante una liga. El navegador, que es
el que obtiene el documento multimedia, debe activar una aplicaci6n especial de ayuda
(helper), descargar y ejecutar un applet asociado, o tener un conector (plug-in) instalado
para decodificarlo y presentarlo a1 usuario.
Aunque HTML y la mayoria de 10s navegadores evitan hoy en dia la confusi6n evadiendo 10s
formatos de multimedia, eso no significa que no pueda o no deba explotar la caracteristica
multimedia e n sus documentos de HTML: shlo es precis0 estar a1 tanto de sus limitaciones.

2.8 Las imagenes son especiales

Los archivos de imlgenes son elementos multimedia a 10s que puede hacer referencia por
medio de ligas e n su documento de HTML para que el navegador 10s descargue y desplie-
gue por separado. Pero, a diferencia de otros elementos multimedia, el estlndar de HTML
cuenta con una medida para desplegar imlgenes "en linea" (integradas) juntamente con el
texto.' Las imlgenes pueden servir como intrincados mapas de ligas. Esa es la raz6n por la
que hay cierto acuerdo e n la industria que define 10s formatos de archivos de imfigenes
--especificamente, GIF y JPEG- y 10s navegadores grlficos han integrado decodificadores
que pueden manejar esos tipos d e imlgenes en el documento.

2.8.1 Imageries en pantalla

La etiqueta de HTML para mostrar imlgenes en pantalla es <img>;su atributo indispensable,
src, es el URL de la imagen GIF o JPEG que desea insertar e n el documento. [*img*, 5.2.61
El navegador carga de forma independiente las imfigenes y las coloca e n el texto como si
fueran un caracter especial, aunque algunas veces muy grande. Por lo general, eso significa
que el navegador alinea la parte inferior de la imagen con la parte inferior de la linea de
texto actual. Usted puede modificar este tip0 de alineaci6n por medio del atributo a1 ign,
cuyo valor le sirve para colocar la imagen en la parte superior (top), media (middle) o
inferior (bottom) del texto adyacente. Observe las figuras 2-2 a la 2-4 para examinar el tip0
de alineaci6n de imagen que prefiera. Por supuesto, las imlgenes grandes pueden ocupar
toda la linea y, por lo tanto, romper la continuidad del texto. 0 puede colocar una imagen
sola, incluyendo antes y despuCs de ella etiquetas de plrrafo o de corte de linea.
Los autores experimentados de plginas de HTML utilizan imfigenes n o s610 como ilustracio-
nes complementarias, tambiCn como pequeiios caracteres o glifos para apoyar la lectura e

Los desarrolladores d e navegadores estin integrando otros formatos de multimedia, ademis de GIF y JPEG, para
poder desplegarlos en pantalla. Internet Explorer, por ejemplo, soporta una etiqueta que ejecuta audio de fondo.
 Figura 2-2.Una imagen alineada con laparte infetjor del texto (alineacidnpredetetvninada).

Figura 2-3.Una imagen alineada especialmentepara aparecer en la parte de en medio con

respecto a la linea de texro.

Figura 2-4.Una imagen alineada especialmente sobre laparte superlor con respecto a1 texto.

indicar secciones d e 10s documentos. Asimismo, por lo general agregan listas con vifietas
personalizadas o divisores d e secci6n mas distintivos que las convencionales lineas horizon-
tales. Las imigenes tambitn pueden ser parte d e las ligas, d e manera que 10s usuarios
puedan hacer clic en un pequeiio dibujo para descargar una imagen de pantalla completa.
Las posibilidades con las imigenes son infinitas.

2.8.2 Mapas de imagen

Estos mapas son imAgenes dentro d e un ancla con un atributo especial: pueden tener mas
de una liga.
2.9 -Listas, documentos rasmables y formas 31

Una forma de habilitar un mapa de imagen es agregando el atributo ismap a una etiqueta
<img> colocada dentro de una etiqueta de ancla (<a>). Cuando el usuario hace clic en
alguna parte d e la imagen, el navegador envia a1 servidor, que tambien est5 definido e n el
ancla, las coordenadas x,y correspondientes a la posici6n del punter0 del rat6n. Un progra-
ma servidor especial traduce entonces las coordenadas de la imagen e n alguna acci6n
especial; por ejemplo, descargar otro documento de HTML. [Ismap, 7.5.11
Un buen ejemplo del uso de un mapa d e imagen puede ser localizar alglin hotel durante un
viaje. El usuario hace clic e n un mapa de la regi6n que pretende visitar, por ejemplo, y el
programa servidor del mapa de imagen puede devolverle 10s nombres, direcciones y nlime-
ros telef6nicos de 10s hoteles e n la localidad.
Estos mapas, conocidos como mapas d e imagen del lado seroidor, son muy poderosos y
atractivos, per0 requieren que 10s autores de p6ginas de HTML tengan alglin tip0 d e acceso
a1 programa que procesa las coordenadas del mapa en el servidor. Muchos autores no tienen
incluso acceso a1 servidor mismo. Las recientes innovaciones a 10s navegadores eliminan
estas barreras permitiendo mapas de imagen del lado cliente.
En lugar d e depender de un servidor de HTTP,el atributo usemap de la etiqueta <irng>, asi
como las etiquetas <map> y <area> permiten a 10s autores d e p5ginas de HTML introducir
toda la informaci6n que el navegador necesita para procesar un mapa d e imagen en el
mismo documento de la imagen. Debido a que no exigen gran ancho d e banda de red y a
su independencia del servidor, 10s mapas de imagen del lado cliente est9n volviendose cada
vez mas populares. [usemap, 7.5.21

2.7 Listas, documentos rastreables

y formas
iCree que 10s encabezados, p5rrafos y cortes de linea son todos 10s elementos de texto de
HTML? No, son s61o 10s m9s rudimentarios para organizar el texto. El lenguaje tambikn
proporciona poderosas y variadas estructuras basadas en texto, incluyendo tres tipos de
listas, documentos "rastreables" y formas. Los documentos rastreables y las formas van m9s
all6 del formato de texto, pues constituyen un medio para interactuar con 10s lectores. Las
formas permiten a 10s usuarios teclear texto y hacer clic en casillas d e verificaci6n y botones
de opci6n para seleccionar elementos y despues enviar la informaci6n a1 servidor. Una vez
recibida, una aplicaci6n especial en el servidor la procesa y responde de mod0 apropiado;
por ejemplo, llenando una orden de product0 o recolectando datos d e una encuesta de
usuario..

' La prograrnacidn del lado servidor necesaria para el procesamiento de formas esti mas all5 del tema de esta
obra. Le proporcionarnos algunos fundamentos en 10s capitulos apropiados, pero le recomendarnos consultar la
documentacidn del servidor, o a su administrador del mismo para conocer detalles.
La sintaxis de HTML para estas funciones especiales y sus diferentes atributos puede ser
cornplicada; no es tan simple. De rnodo que aqui s61o la rnencionarnos y le sugerirnos leer
detalles en capitulos posteriores.

2.9.1 Listas no ordenadas, ordenadas y de depniciones

Los tres tipos de listas de HTML corresponden a las que ya nos son farniliares: las no
ordenadas, las ordenadas y las de definicibn. Una lista no ordenada -donde no es irnpor-
tante el orden de 10s elernentos; una lista de lavanderia o de abarrotes, por decir algo-
queda lirnitada por las etiquetas < u l > y < / u l > . Cada elernento de la lista, por lo general una
palabra o una frase breve, queda rnarcado por la etiqueta <l i > y, cuando se presenta,
aparece indentado con respecto a1 rnargen izquierdo. Por lo corndn el navegador tarnbien
precede cada elernento con una viiieta (.). [*ul>,8.1.11 [*l is, 8.31
Las listas ordenadas, delirnitadas por las etiquetas < o l > y < / o l > , son identicas en forrnato a
las no ordenadas, incluyendo la etiqueta <l i> para rnarcar 10s elernentos. Sin embargo, si es
irnportante el orden de 10s elernentos; por ejernplo, pasos a seguir para el ensarnble de
equipo. El navegador, en consecuencia, despliega cada elernento en la lista precedido por
un ndrnero ascendente. [*ol>,8.2.11
Las listas de definicibn son ligerarnente rnis cornplicadas que las no ordenadas y ordenadas.
Dentro de las etiquetas < d l > y < / d l > para delirnitar las listas de definicibn, cada elernento
tiene dos partes, cada una con una etiqueta especial: nornbre o titulo breve, dentro de una
etiqueta <dt>, seguido por su valor o definicibn correspondiente, indicado por la etiqueta
<dd>. A1 presentarlas, el navegador por lo general pone el nornbre del elernento en una
linea independiente (aunque no indentada), seguido de la definicibn, que por lo general
puede incluir varios pirrafos indentados debajo de ella. [*dl>,8.7.11
Los diferentes tipos de listas pueden incluir casi cualquier clase de contenido que por lo
regular va en el cuerpo del docurnento de HTML. De rnodo que puede, por ejernplo, organizar
su coleccibn de fotografias digitalizadas dentro de una lista ordenada, o ponerlas en una
lista de definicibn junto con anotaciones de texto. HTML incluso le perrnite colocar listas
dentro de listas (listas anidadas), dando origen a un sinfin de cornbinaciones interesantes.

2.9.2 Documentos rastreables

El tip0 rnis simple de interaccibn con el usuario que puede lograr usando HTML es el
docurnento rustreable. Puede crear un docurnento de HTML de este tipo incluyendo la
etiqueta <i s i ndex> en su encabezado o cuerpo. El navegador perrnite, de forrna autorniti-
ca, que el usuario teclee una o rnis palabras en un cuadro de texto y pasa esta inforrnacibn
a la aplicacion encargada de procesarla en el servidor. [*i si ndexs, 7.6.11
La aplicaci6n que procesa la informacibn en el servidor utiliza esas palabras clave para
realizar alguna tarea especial, digarnos una bdsqueda en una base de datos, o una contraprueba
2-10 Tabhs 33

contra una lista de autenticaci6n, a fin de dar a1 usuario acceso especial a alguna otra parte
de una colecci6n d e documentos.

Es obvio que 10s documentos rastreables son muy limitados: uno por documento y s610 un
elemento de entrada para el usuario. Por fortuna, HTML proporciona un mejor y m5s exclu-
sivo soporte para la recolecci6n de informaci6n introducida por el usuario: las formas (o
forrnularios).
Puede crear una o m5s secciones de formas e n su documento de HTML, limitadas con las
etiquetas <form>y </form>. Dentro de la forma, puede colocar cuadros de texto predefinidos
y personalizados para la entrada de datos. Incluso puede insertar casillas de verificaci6n y
botones de opci6n para permitir selecciones de opci6n mdltiple, asi como botones especia-
les con funciones para restablecer la forma o para enviar su contenido a1 servidor. Los
usuarios llenan la forma como quieran, quiz5 despues d e leer el resto del documento,
y despues hacen clic e n un bot6n de envio, lo que hace que el navegador mande a1 servidor
10s datos introducidos e n la forma. Un programa especial del lado servidor procesa la forma
y ejecuta las acciones debidas: quiz5 solicita m5s informaci6n a1 usuario o modifica 10s
documentos d e HTML subsecuentes que el servidor envia a1 usuario. [*form*, 10.1.1]
Las formas de HTML proporcionan todo lo que pudiera esperar de una forma automatizada,
incluyendo etiquetas para introducir datos, espacio para instrucciones, valores de entrada
predeterminados, etcetera, except0 verificaci6n de entrada autom5tica; el programa del lado
servidor debe llevar a cab0 esa funci6n.

2.10 Tablas
Por ser un lenguaje que emergio de la academia -un lugar avanzado e n datos- no resulta
sorprendente que HTML soporte un conjunto de etiquetas para tablas de datos que no solo
alinean ndmeros sino tambien pueden dar formato especial a1 texto.

Cinco etiquetas le permiten construir tablas, incluyendo la misma etiqueta <tab1e> y la

etiqueta w a p t ion> para incluir una descripci6n de la tabla. Los atributos de etiqueta espe-
ciales le permiten cambiar la apariencia y dimensi6n de la tabla. Puede crear una tabla fila
por fila, colocando entre la etiqueta de inicio (<tr>)y de fin de fila (</tr>)etiquetas de
encabezado de tabla (<th>) o de datos (<td>) con su respectivo contenido para cada celda.
Los encabezados y 10s datos pueden tener casi cualquier contenido general, incluyendo
texto, im5genes, formas e incluso otra tabla. Como resultado, tambien puede utilizar tablas
de HTML para dar formato complejo a1 texto; por poner un caso, para componer texto e n
varias columnas con encabezados laterales (figura 2-51, Para obtener mayor informaci6n
sobre las tablas lea el capitulo 11.
 GI& para 10s mantes del Ktunquat Capftrllo I: Introducci6na los
kumquats
h El t h n i n n " k i . q m f " proviene de Ins
pd3hr.r c.mtnn~s:s!Clun$ " tud (hueno\
y " k v t " (nxmll] K~rnqi.u.tzsc~u?lmenie
se refirre .I un pequeri~,~ n t r ~ cque o
promew de arbutfis pqueEa3slie :a familin
a: de 1c~.,FRI.FA?~ZIXEX?
Kumq~.~,?:, comc su mm?lre 16 id~cn,es um
narmp-dorxla con iris s r r w ~c.iscasa j7
no~ corm
1 1 ~ 0 ~ .p3 1 . d ~ ~ la rw:m,i:i, cle
c~l.ilyuter h m a , a! c5zl:wo de 1 Ixur~qu-tt es
ddce y 13 p u l p ps ?&?a ert e:3frerelnc.

Figuru 2-5. Las tablas de H7ML tcmbi& lepermiten hucw tmcos de dlsm?o de pZigtna.

Cualquiera que haya tenido abierta a la vez m9s de una ventana d e aplicaci6n e n un
ambiente gr9fico puede apreciar de inmediato la funci6n no estiindar de HTML ofrecida por
Navigator de Netscape e Internet Explorer de Microsoft: 10s marcos. Para obtener mis infor-
nrrlci6n sobre 10s marcos consulte el capitulo 12.
La figura 2-6 es un ejemplo de marcos, En ella puede ver que la ventana del documento esti
dividida en varias ventanas separadas por lineas, reglas y barras de desplazamiento. NO
obstante, lo que no es muy claro e n el ejernplo es que cada marco puede desplegar un
docurnento independiente, no necesariamente d e HTML. Un marco puede alojar cualquier
contenido que el navegador sea capaz de mostrar, incluyendo archivos de multimedia. Si
el contenido d e un marco incluye una liga de hipertexto y el usuario le hace clic, el conte-
nido del nuevo documento, incluso otro documento con marcos, puede remplazar a1 misrno
marco, al contenido de otro marco o a toda la ventana del navegador.
Debe definir 10s marcos e n un documento d e HTML remplazando la etiqueta <body> con
uns o miis etiquetas <frameset>, que indican a1 navegador c6mo dividir su ventana princi-
pal en marcos discretos. L3s etiquetas <frame> van dentro de la etiqueta <frameset> y
apuntan 3 10s documentos que est9n dentro de los rnarcos.
Los documentos individuales mostrados dentro d e 10s marcos actCian de mod0 independien-
te, hasta cierto punto; el documento con los marcos controla toda la ventana. Sin embargo,
usted puede indicar al documento con 10s marcos que a r g u e nuevo mnrenido e n otro
marco. Seleccionar un elemento d e una tabla de contenido, por ejemplo, puede ocasionar
 Perciba d poderoso kumquat:

Guia para
10s amantes de 10s
h umq uats El Grnino "l:urnquatmprsviene .rle 1x pFB-!thrzll: cm?nnes,x {Chn?)
"tram" (blimo) y "kva!'' (m:mia) I ~ r n . i . i . ? at c t d m e n t e 2 refiere a u n
pequeiio cjtric'>q11e pr,mrr?e x r h ~ ~ t p. x~ q w k d~ x ldf.mn11~de 10s

< -
-/ L-..
~,3,"/r~l';~~~im~x?.
"- -. .
i : w q ~mm;
, ru mmhre Lo indlr-i, a la,
d 3 m-lrmja-~lorafin c':,n T L ~ sume X c.acru.2y jilgnsi

Figura 2-6 Los marcos dividen In uentrrna del nouegador m mrtos marcos con dooc~rmentos
indepenciwntes

que el navegador cargue y despliegue el documento a1 que se hizo referencia en un marco

adyacente. De esta manera, la tabla de contenido siempre e s d disponible a1 usuario mlen-
tras navega por la colecci6n d e documentos.

2.12 Hojas de estilo y JauaScnpt

Los navegadores mas actuales tambiCn tienen soporte para dos poderosas innovaciones a
HTML: hojas d e estilo y JavaScript. A1 igual que sus primos para la autoedici6n, las hojas
d e estilo le permiten controlar la apariencia d e sus paginas d e HTML: estilos y tamaiios d e
fuentes, colores, fondos, alineaci611, etcetera. Y de mayor importancia a h , le proporcionan
36 Capftulo2: Inicio rdpido a HTML

una manera d e imponer caracteristicas d e desplegado uniforme a todo el documento y a un

conjunto d e documentos.
JavaScript es un lenguaje d e programaci6n con funciones y comandos que le permiten
controlar el comportamiento del navegador. Este no es un libro d e programaci6n, pero
existen dos razones por las que aqui mencionamos a JavaScript y por las que e n capitulos
posteriores lo explicamos con cierto detalle: primera, usted agrega programas escritos e n
JavaScript ("applets") directamente e n sus documentos d e HTML para lograr efectos muy
poderosos y amenos. Segunda, e s mediante JavaScript que el personal d e Netscape tambiCn
pone a funcionar las hojas d e estilo e n las versiones miis nuevas d e sus navegadores.
El Consorcio World Wide Web -la supuesta organizaci6n d e esdndares- prefiere que el
usuario utilice el modelo d e hojas de estilo e n cascada (Cascading Style Sheets, CSS) para
disefiar piiginas d e HTML. Tanto las liltimas versiones d e Navigator d e Netscape (versi6n 4) y
d e Internet Explorer d e Microsoft (versi6n 3) soportan CSS y JavaScript, pero e n la actualidad
s61o Navigator soporta las hojas d e estilo basadas e n JavaScript (lavascript Style Sheets, JSS).
Para ilustrar las diferencias entre CSS y JSS, presentamos dos maneras e n las que puede
lograr que 10s textos de encabezado d e miis alto nivel (HI) e n su documento aparezcan en
color rojo (red). Utilizando primero CSS:
<htrnl>
<head>
< t i tlesEjernplo de CSS</title>
< ! - - O c u l t a r l a s propiedades d e l a s CSS con cornentarios, d e modo que 10s
navegadores antiguos no e n t r e n en c o n f l i c t 0 o desplieguen contenido desconocido.-->
< s t y l e type="text/CSSl">
<!--
H1 ( c o l o r : r e d )
- ->
</style>
</head>
<body>
<Hl>Aparecere en c o l o r r o j o s i su navegador s o p o r t a CSS</Hl>
Algo aqut
<Hl>iYo tambien deb0 a p a r e c e r en c o l o r rojo!</Hl>
</body>
</htrnl>

Utilizando JSS:
<htrnl>
<head>
< t i tle>Ejernplo JSS</ti tie>
<sty1 e t y p e = " t e x t / j a v a s c r i p t 5
<! --
tags.Hl.color = "red"
I/-->
</style>
</head>
<body>
 <Hl>Aparecerg en color rojo si su navegador soporta JSS</Hl>
Algo aqui
<Hl>iYo tambien deb0 aparecer en color rojo!</Hl>
</body>
</html>
Los ejemplos son casi identicos, aunque 10s detalles son importantes. Ambos tienen su
sintaxis especifica que no es de conocimiento general sino de 10s programadores. El detalle
m5s dificil de manejar y que volveria loco a muchos autores de pfiginas de HTML es que JSS,
a1 igual que su antecesor, JavaScript, es sensible a1 uso de maylisculas y minOsculas: teclee
"hl" en lugar d e "HI" e n la descripci6n de estilo y no ver5 nada en color rojo. Teclee "hl"
en la descripci6n de estilo CSS (o en la etiqueta) y todo funcionarfi bien.
Honestamente, nosotros preferimos la modalidad CSS por su naturaleza flexible, como ex-
plicamos en el capitulo 9, a pesar de que JSS es una aplicaci6n m5s poderosa y amplia. De
cualquier manera, puede familiarizarse con JavaScript us5ndolo para extender las funciones
de sus documentos de HTML. En ese caso, adoptar JSS con su inconveniente uso de maylis-
culas puede no ser del todo desalentador, quiz5 sea una sencilla transici6n (tal vez sea lo
que Netscape espera).
Puede hacer una prueba del lenguaje JavaScript e n el ejemplo de JSS anterior. Es un lengua-
je orientado a objetos que ve a1 navegador y a 10s documentos que despliega como un
conjunto d e panes ("objetos") que tienen ciertas propiedades que usted puede cambiar o
ejecutar. ~ s t es
e un aspect0 poderoso que la mayoria de 10s autores que diserian p5ginas de
HTML no quisiera manejar. Mejor, la mayoria de nosotros quizfis optemos por 10s rfipidos,
sencillos y poderosos applets de JavaScript que proliferan e n el Web y que se incrustan en
10s documentos de HTML. En el capitulo 13 le indicaremos c6mo (tambiCn JSS).

2.13 Hacia adelante

Naturalmente, este capitulo representa la punta del iceberg. Si ha seguido esta lectura, con
seguridad ha quedado 5vido de m5s informaci6n. Por ahora tiene un conocimiento bfisico
del alcance d e las funciones de HTML; e n 10s capitulos siguientes procederemos a ampliar
nuestro conocimiento y a aprender m8s sobre cada funci6n de HTML.
Anatomfa de un
documento de HTML

Los documentos de HTML son muy simples y escribir uno no debe inhibir ni a1 mis timido
de 10s usuarios. Primero, aunque puede utilizar un divertido editor de textos WYSIWYG
para crearlo, un documento d e HTML finalmente se almacena, distribuye y lee el navegador
como un sencillo archivo de texto ASCII.' Esto es porque incluso el usuario rnis pobre con
el editor de texto mas sencillo puede crear la mas elaborada de las piginas de HTML (por lo
general, 10s maestros e n programaci6n para el Web mas experimentados se admiran de 10s
logros de 10s "nuevos" programadores que con HTML componen, con gran maestria, pigi-
nas maravillosas utilizando el mas rudimentario de 10s editores de texto, en la computadora
portatil menos costosa, y laborando en el lugar m b s6rdido: e n un autoblis o en un cuarto
de baho). Insisto, 10s escritores de paginas de HTML deberian tener a la mano varios de 10s
navegadores mas populares y revisar con frecuencia 10s documentos que construyen. Re-
cuerde, 10s navegadores varian e n la forma en que despliegan una pagina; no todos
implementan todos 10s estindares de HTML y algunos tienen sus propias extensiones a este
lenguaje.

3.1 Las apariencias pueden engaiZar

Los documentos d e HTML nunca aparecen igual cuando se despliegan en un editor de texto
que cuando lo hacen e n un navegador. Simplemente observe cualquier archivo fuente d e un
documento de HTML fuera del World Wide Web; a1 menos muestra caracteres, tabuladores
y espaciado entre lineas, lo cual, aunque d e importancia para la claridad del documento de

' De manera informal, tanto el texto como las etiquetas en un documento de HTML son caracteres ASCII. Tecni-
camente, a menos que se especifique lo contrario, el texto y las etiquetas se componen de caracteres de ocho bits,
como se define en el esthndar del conjunto de caracteres latinos ISO-8859-1. Este esthdar soporta codificaci6n de
caracteres alternatives, incluyendo adbigos y cirilicos. Revise el apCndice E para leer detalles.
31 Las apariendas pueden engaAar 39

texto fuente, es ignorado e n su mayoria e n HTML. Tambien hay una gran cantidad de texto
adicional e n un documento fuente escrito e n HTML, casi todo etiquetas y marcadores de
interacci6n y sus parametros, que afectan partes del documento aunque no aparecen e n el
desplegado.
En consecuencia, 10s nuevos autores de piginas de HTML deben enfrentar el reto de desa-
rrollar no s61o un estilo de presentaci6n para sus pPginas sin0 otro mis para su documento
fuente. El diseiio del documento fuente seiiala 10s aspectos de marcado similares a la pro-
gramacibn, asi como su desplegado. Y debe ser legible no s610 para el autor, tambien para
otros usuarios.
Los escritores de documentos de HTML mis experimentados por lo general adoptan un
estilo parecido a1 de la programaci61-1,aunque muy relajado, para sus documentos fuente.
Nosotros hacemos lo mismo a lo largo de esta obra: ese estilo seri notorio a medida
que compare nuestros ejemplos de HTML con el desplegado real del documento en su
navegador.
Nuestro estilo para estructurar es sencillo, per0 sirve para crear documentos ficiles de leer
y mantener:

Excepto por las etiquetas que le dan estructura a1 documento, como <htrnl>, <head> y
<body>, cualquier elemento del lenguaje que utilizamos para formar el contenido de un
documento lo colocamos e n una linea independiente e indentado para mostrar su nivel
de anidamiento en el documento. Estos elementos incluyen listas, formas, tablas y
etiquetas similares
Cualquier elemento de HTML utilizado para controlar la apariencia o estilo de texto se
inserta e n la linea actual de texto. fistos incluyen etiquetas de estilo para las fuentes,
como <b> (texto en negritas), y ligas a documentos, como <a> (liga de hipertexto)
Evitar, hasta donde sea posible, la separaci6n de un URL en mis de una linea
Agregar caracteres extraiios de nueva linea para separar secciones especiales del docu-
mento de HTML; por ejemplo, alrededor de pirrafos o tablas

La tarea de mantener la indentaci6n e n sus documentos fuente de HTML va desde lo baladi

hasta lo complejo. Algunos editores de texto, como Emacs, utilizan i n d e n t a c h automatics;
otros, como 10s procesadores de texto de uso general, no pueden realizar por ellos mismos
ninguna labor de sangrado, la cual se deja e n su totalidad a1 usuario. Si su editor de texto le
dificulta la vida, puede hacer algunas concesiones, indentando, por ejemplo, s61o las etique-
tas para mostrar la estructura, per0 lo que es el texto dejarlo sin sangrias para facilitar las
correcciones.
No importa que concesiones o posiciones tome e n el estilo del c6digo fuente; lo que si e s
importante es que adopte uno. Estari contento de haberlo hecho cuando regrese a sus
documentos de HTML creados tiempo atds e n busca de a l g h truco especial ... iD6nde
estaba?
40 Capftulo 3: Anatomfa de un documento de HTML

3.2 Estructura de un documento de HTML

Un documento de HTML consta de texto, que define el contenido del documento, y etique-
tas, las cuales definen la estructura y apariencia del documento. De igual forma, la estructu-
ra d e un documento de HTML es tan simple que consiste en una etiqueta exterior <html>
que encierra a1 encabezado y cuerpo del documento:
<html>
<head>
<titl esDocumento de HTML senci 11 o < / t i tl e>
</head>
<body>
E s t o il u s t r a , de modo muy < i > s e n c i l l o < / i > ,
l a e s t r u c t u r a b a s i c a d e un documento d e HTML.
</body>
</html>

Cada documento tiene un encabezado y un cuerpo, delimitados por las etiquetas <head> y
<body>, respectivamente. El encabezado es donde le asigna titulo a su documento de HTML
e indica a1 navegador otros padmetros que puede utilizar a1 desplegar el documento. El
cuerpo es donde coloca el contenido del documento, e incluye el texto que se debe mostrar
y 10s marcadores d e control del documento (etiquetas) que sugieren a1 navegador c6mo
hacerlo. Las etiquetas tambiCn hacen referencia a archivos de efectos especiales que inch-
yen imhgenes y sonido, e indican las zonas sensibles (ligas y anclas) que enlazan su docu-
mento a otros.

3.3 Etiquetas de HTML

Para la mayoria, las etiquetas d e documentos de HTML son flciles de entender y utilizar, ya
que estln definidas por palabras comunes, abreviaturas y anotaciones, e n inglks. Por ejem-
plo, las etiquetas <i > e </i > indican a1 navegador iniciar y terminar, respectivamente, el uso
de cursivas (tambiCn conocidas como itllicas) e n el texto que delimiten. Para ilustrar esto, la
palabra "sencillo" de nuestro ejemplo anterior, aparecerl e n cursivas en la ventana de
nuestro navegador.
El estlndar d e HTML y sus diferentes extensiones definen c6mo y d6nde colocar las etique-
tas e n el documento. Revisemos con mls detalle 10s fundamentos de la sintaxis que integran
10s documentos de HTML.

3.3.1 Sintaxis de una etiqueta

Cada etiqueta d e HTML consta de un nombre de etiqueta, algunas veces seguido por di-
ferentes opciones d e atributos, todos colocados entre 10s simbolos mayor y menor que
(< y >). La etiqueta rnls simple no es sino un nombre (abreviatura o comentario) encerrado
entre tales signos, como <head> e <i>. Las etiquetas mls complejas tienen uno o rnls
atributos, 10s cuales especifican o modifican el comportamiento de la etiqueta.
3 3 Etiquetas de HTML 41

Los nombres de atributos y etiquetas no son sensibles a1 uso de maydsculas y mindsculas.

No hay diferencia entre <head>, <Head>, <HEAD> e incluso <HeaD>; todas son equivalentes.
Sin embargo, 10s valores que asigne a un atributo si pueden ser sensibles a1 uso de may&
culas y mindsculas, dependiendo de su navegador y del servidor. En especial, la localiza-
ci6n de archivos y referencias de nombre --localizador universal de recursos, URL, univer-
sal resource locator- son sensibles a1 uso de mayhculas y min6sculas. [URL, 7.21
Los atributos de etiqueta, si existieran, van despuCs del nombre de la etiqueta, cada uno
separado por uno o mPs tabuladores, espacios o caracteres de salto de linea. Su orden no es
importante.
El valor del atributo de una etiqueta, si existiera, va despuCs de un signo igual (=), luego del
nombre del atributo. Puede incluir espacios antes y/o despuCs del signo igual, de mod0 que
wi dth=6, width = 6, width =6 y width= 6 tienen el mismo significado. Insisto, por claridad
preferimos no incluir espacios. De esta manera, es mPs sencillo seleccionar el conjunto
atributo/valor de una variedad en una etiqueta extensa.
Si el valor de un atributo es una palabra sencilla o un n6mero (sin espacios), simplemente
puede agregarlo despuCs del signo igual. Todos 10s demls valores deben quedar encerrados
entre comillas simples o dobles, e n especial 10s que tengan varias palabras separadas por
espacios. La longitud del valor estP limitada a 1024 caracteres.
La mayoria de 10s navegadores son tolerantes a la puntuaci6n de las etiquetas y a su divisi6n
entre lineas. Sin embargo, siempre que sea posible evite dividir e n mPs de una linea las
etiquetas de sus documentos fuente. Esta regla da mayor claridad y reduce la posibilidad de
errores e n sus documentos.

3.3.2 Algunas rnuestras de etiquetas

fistas son algunas etiquetas con atributos:
<a href="http://www.ora .com/catal og.html ">
<u1 compact>
< i n p u t name=nombre-de-archi vo si ze=24 maxl ength=dO>
<link t i t l e="Tabla de conteni do">
El primer ejemplo es la etiqueta <a> para una liga a1 catPlogo de productos de O'Reilly e n el
World Wide Web. Tiene un solo atributo, href, seguido por la direcci6n del catPlogo
e n el ciberespacio, su URL.
El segundo ejemplo muestrauna etiqueta que compone el texto e n una lista no ordenada.
Su 6nico atributo -compact, el cual limita el espacio entre 10s elementos de la lista- no
requiere valor.
El tercer ejemplo muestra una etiqueta con varios atributos, cada uno con un valor que
n o requiere ponerlo entre comillas.
El dltimo ejemplo muestra el uso apropiado del entrecomillado cuando el valor del atributo
se compone de mls de una palabra.
42 Capftulo 3: Anatomfa de un documento de HTML

Por Cltimo, lo que no es evidente de inmediato e n estos ejemplos es que aunque 10s
nombres d e atributos no son sensibles a1 uso de maylisculas y mindsculas (href funciona
igual que HREF o HreF), la mayoria de 10s valores de 10s atributos si lo son. El valor
nombre-de-archivo para el atributo name e n la etiqueta <input> no es el mismo que el
valor Nornbre-de-Arch i vo, por ejemplo.

3.3.3 Etiquetas de inicio y fin

Ya hemos seiialado que la mayoria de las etiquetas de HTML tienen un principio y un fin, y
afectan la parte de texto que hay entre ellas. Ese segmento de texto encerrado puede ser
extenso o reducido; puede ir desde un solo cadcter, silaba o palabra, como "sencillo" e n
nuestro dltimo ejemplo, hasta la etiqueta <htrnl> que encierra a todo el documento. El
componente de inicio d e cualquier etiqueta es su nombre y atributos, e n caso de existir. La
etiqueta d e fin correspondiente es s61o el nombre d e la etiqueta precedido por una diago-
nal. Las etiquetas de fin no tienen atributos.

3.3.4 Anidado propio e impropio

Las etiquetas pueden colocarse dentro del segmento afectado por otra etiqueta (anidada)
para obtener diferentes efectos e n una sola parte del documento d e HTML. Por ejemplo,
una parte del siguiente texto aparece en negritas y, ademis, se incluye como parte de una
liga definida por la etiqueta <a>:
<body>
Esta parte del cuerpo de texto, con una
<a href="otro-doc.html">liga a otro documento
<b>aparece en negri tas</b></a>
</body>
De acuerdo con el estindar de HTML, puede terminar etiquetas anidadas comenzando por
la mis reciente y retrocediendo hasta la primera. En el ejemplo anterior terminamos la
etiqueta de negritas (</b>) antes de finalizar la etiqueta de liga (</a>), ya que comenzamos
e n orden inverso: primero la etiqueta <a>, despuks la etiqueta <b>. Es buena prictica seguir
esta norma, a pesar de que la mayoria d e 10s navegadores no insisten e n que lo haga. Puede
pasar por alto esta regla de anidaci6n en algunos navegadores antiguos, incluso en 10s
actuales. Pero es probable que nuevas versiones no permitan la violaci6n d e esta regla;
entonces se veri obligado a modificar su documento fuente d e HTML.

3.3.5 Etiquetas sin terminacidn

De acuerdo con el estindar d e HTML, s61o algunas etiquetas no tienen etiqueta d e fin. Por
ejemplo, la etiqueta <br> establece un corte de linea; no tiene ningdn otro efecto e n la parte
subsecuente del documento y, por lo tanto, no necesita etiqueta de fin.
3.3 Etiquetas de HTML 43

Las etiquetas estindares de HTML que no tienen etiquetas de fin son:

3.3.6 Omisidn de etiquetas

Por lo general puede encontrar documentos donde pareciera que el autor olvid6 poner muchas
etiquetas de fin violando aparentemente el eskindar de HTML. Pero su navegador no se queja
y 10s documentos se despliegan de forma adecuada. ~ Q u Csucede? El esdndar de HTML le
permite omitir ciertas etiquetas de fin por razones de claridad y sencillez e n la preparaci6n del
documento. Los autores del eskindar de HTML no pretendian que el lenguaje fuera tedioso.
Por ejemplo, la etiqueta <p>, que define el inicio de un phrafo, tiene una etiqueta corres-
pondiente de fin, </p>, aunque se utiliza e n muy raras ocasiones. De hecho, muchos autores
de documentos de HTML incluso no saben que existe. [<p*, 4.1.21
El estindar de HTML le permite omitir cualquier etiqueta, de comienzo o de fin, cuando
pueda ser ambigua e n el contexto. Muchos navegadores interpretan bien el documento a1
confrontar etiquetas omitidas, dando como resultado que el autor del documento suponga
que hizo una omisi6n vdida. Cuando tenga dudas, mejor agregue la etiqueta de fin: le
facilitad las cosas a usted, a1 navegador y a quien en el futuro tenga la necesidad de
modificar su documento

3.3.7 Etiquetas ignoradus o redundantes

A veces 10s navegadores ignoran etiquetas, por lo general etiquetas redundantes cuyos efectos
casi se cancelan o sustituyen a si mismos. El mejor ejemplo es una serie de etiquetas <p>, una
despuCs de otra sin texto entre ellas. A diferencia de 10s similares retornos de linea e n un
documento de procesador de texto, la mayoria de 10s navegadores saltan a una nueva linea
s61o una vez. Las etiquetas <p> continuas son redundantes y casi siempre las ignora el navegador.
44 Capftulo3. Anatomfa & den documento de HTML

AdemBs, la mayoria de 10s navegadores ignora cualquier etiqueta que n o comprendan o que
estuviera ma1 especificada por el autor. Los navegadores comunes revisan el context0 y se
hacen una idea del documento, sin importar quC tan ma1 compuesto y ma1 concebido pueda
estar, lo cual n o es s61o una estrategia para eludir errores: tambiCn es una estrategia impor-
tante d e ampliaci6n. Imagine cu5n dificil seria agregar nuevas funciones a1 lenguaje si la
base existente d e navegadores no las entendiera.
La razon d e estar alerta por las etiquetas no estandares y no soportadas poi la mayoria de 10s
navegadores es su contenido, si es que hubiera. Los navegadores que reconocen las nuevas
etiquetas pueden procesar ese contenido de forma diferente a 10s que no las soportan. Por
ejemplo, Internet Explorer soporta la etiqueta <comnent>, cuyo contenido sirve para docu-
mentar el archivo fuente de HTML y n o se indenta para referencia del usuario. Sin embargo,
ninguno de 10s demas navegadores reconoce esta etiqueta, asi que presentan su contenido
e n la pantalla del usuario, frustrando el prop6sito d e la etiqueta, ademas de la apariencia del
documento. [comentarios,3.4.21

3.4 Contenido del documento

Casi todo lo que coloca en su documento de HTML y que no sea una etiqueta es, por
definition, contenido; la mayor pane, en casi todos 10s documentos, es texto. A1 igual que las
etiquetas, el contenido del documento se codifica, de mod0 predeterminado, por medio de un
conjunto de caracteres especifico: el conjunto de caracteres latinos ISO-8859-1. Este conjunto
es, a su vez, un superconjunto del ASCII convencional, con caracteres adicionales necesarios
para soportar 10s lenguajes de Europa del Este. Si su teclado n o permite escribir de forma
directa 10s caracteres que necesita, puede utilizar sus entidades de caracter para insertarlos.

3.4.1 Sugerencias y control

Quiz5 la regla mAs dificil de recordar cuando crea un documento de HTML es que todas las
etiquetas q u e inserta referentes a1 desplegado y formato del texto son s610 sugerencias para
el navegador: no controlan d e mod0 explicit0 la manera en que aparece el documento
e n Cste. De hecho, el navegador puede ignorar todas las etiquetas y hacer lo que le plazca
con el contenido del documento. Adn peor, el usuario (jtodas las personas!) tiene control
sobre las caracteristicas para desplegar texto e n su propio navegador.
Sobrelleve esta falta de control. La mejor manera d e utilizar el marcado con HTML para
controlar la apariencia de 10s documentos es concentrarse e n el contenido, n o e n la aparien-
cia. Si s e preocupa e n exceso por la alineacibn, cortes de texto y ubicaci6n de caracteres,
seguro terminara con alguna grave enfermedad. Habra ido m i s all5 del alcance d e HTML.
Si se concentra e n el manejo d e la informaci6n para 10s usuarios en una forma interactiva,
utilizando etiquetas que sugieran a1 navegador la mejor forma de desplegar esa informaci6n,
usar5 con eficacia HTML y sus documentos tendran una buena presentation e n una amplia
gama de navegadores.
34 Contenfdo del docurnento 45

3.4.2 Entidades de cardcter

Ademas del texto comGn, HTML le proporciona una alternativa para desplegar caracteres
especiales de texto que normalmente n o podria incluir e n su documento fuente o si HTML
tuviera otros prop6sitos. Un buen ejemplo son 10s simbolos menor que o picoparkntesis
d e inicio (c). En HTML, este car5cter por lo general significa el inicio de una etiqueta, de
manera que si lo insertara como parte de su texto, el navegador podria confundirse y quizas
interprete ma1 el documento.
En HTML, el carhcter ampersand (&) le indica a1 navegador que inserte un carhcter especial,
conocido formalmente como una entidad de caracter. Por ejemplo, el comando &It ; inserta
el problem5tico simbolo menor que e n el texto que se muestra a1 usuario. De forma simi-
lar, el comando &gt; inserta el simbolo mayor que, mientras &amp; inserta un ampersand. No
puede haber espacios entre el ampersand, el nombre de entidad y el indispensable punto y
coma (;) final (el punto y coma no es un carhcter especial; por lo general no es necesario
utilizar una secuencia de ampersand para desplegarlo).
TambiCn puede remplazar el nombre de entidad despues del ampersand con el valor deci-
mal, entre 0 y 255, correspondiente a la posici6n de la entidad en el conjunto de caracteres.
Asi, la secuencia &#60;produce el mismo resultado que & I t ; ,es decir, el simbolo menor que.
De hecho, podria sustituir todos 10s caracteres comunes e n un documento HTML con carac-
teres especiales de ampersand, como &#65;,que corresponde a una "A", o &#97;, que es su
versi6n en minGscula, "a", aunque esto n o tendria sentido. En el apCndice E encontrad una
lista completa de todos 10s caracteres, sus nombres y equivalentes numCricos.
Recuerde que no todos 10s navegadores pueden desplegar todos 10s caracteres especiales.
Algunos simplemente ignoran muchos caracteres especiales; e n otros no est5n disponibles
en el conjunto de caracteres d e una plataforma especifica. AsegGrese de probar sus docu-
mentos e n diferentes navegadores antes de utilizar alguna de las m5s extraiias entidades de
carhcter.

3.4.3 Cornentarios
Los comentarios son otro tip0 de contenido textual que aparece e n el documento fuente de
HTML aunque el navegador n o 10s despliega. Los comentarios se ubican entre 10s elementos
de marcado especial C! -- y -->. Los navegadores ignoran el texto entre las secuencias de
carhcter de comentario.
esta es una muestra de un comentario:
< ! - - E s t e es un comentario -->
<!-- Este es un
comentario de v a r i a s 1 Tneas
que t e r m i n a aquT -->
46 Capftulo 3: Anatomfa de un documento de HTML

Debe haber un espacio despuCs del <!-- inicial y antes del --> final; puede poner casi
cualquier carlcter dentro del comentario. La mas grande excepci6n a esta regla es que el
estlndar d e HTML no le permite anidar cornentarios.'
Como ya dijimos, Internet Explorer tambiCn le permite colocar comentarios en la etiqueta
especial <comnent>. Internet Explorer ignora todo lo que aparece entre las etiquetas <comment>
y </torment>, aunque 10s demls navegadores muestran el comentario e n la pantalla del
usuario. Debido a este indeseable comportamiento, nosotros no recomendamos utilizar la
etiqueta <comnent> para poner comentarios. Mejor siempre utilice las secuencias <! -- y
--> para delimitar comentarios.

AdemAs del obvio uso d e 10s comentarios para la documentaci6n d e HTML, muchos servi-
dores d e HTTP utilizan comentarios para aprovechar las funciones especificas del software
servidor d e documentos. Estos servidores buscan e n el documento secuencias d e caracteres
especiales dentro de 10s comentarios de HTML y despues realizan alguna acci6n con base
e n 10s comandos incluidos e n ellos. La acci6n puede ser tan simple como incluir texto d e
otros archivos (conocido como una inclusio'n del lado sewidor) o tan compleja como ejecu-
tar otros comandos para generar de manera dingmica el contenido del documento.

3.5 Elementos de un documento de HTME

Cada documento d e HTML debe estar de acuerdo con la SGML DTD HTML, es decir, con la
Definici6n d e Tipo d e Documento (Document Type Definition, DTD) que define el estandar
d e HTML. La DTD define las etiquetas y sintaxis que sirven para crear un documento de
HTML. Usted puede informar a1 navegador a quC DTD se apega su documento colocando
un comando especial del Lenguaje EstAndar d e Marcaci6n Generalizada (SGML, Standard
Generalized Markup Language) e n la primera linea del documento:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 F i n a l //EN1'>
Este criptico mensaje indica que su documento estl diseiiado para cumplir con la DTD
HTML 3.2, definida por el Consorcio World Wide Web (W3C). Otras versiones d e DTD de-
finen versiones m l s restringidas del estlndar d e HTML y no todos 10s nhvegadores soportan
todas las versiones d e DTD d e HTML. De hecho, especificar cualquier otro tipo d e docu-
mento puede ocasionar que el navegador lo malinterprete a1 mostrarlo a1 usuario. Tampoco
resulta muy claro quC tip0 d e DTD utilizar cuando incluye en el documento d e HTML las
diferentes etiquetas no estlndares, aunque son funciones muy populares e n 10s navegadores
populares: las extensiones d e Netscape, por ejemplo, o incluso el desaprobado estlndar
HTML 3.0, para el cual nunca se liber6 una DTD.

' Netscape le perrnite anidar cornentarios, per0 esto tiene sus inconvenientes; no siernpre puede predecir c6rno
reaccionarin otros navegadores ante 10s cornentarios anidados.
35 Ekmentos de un documento de H T M L 47

Casi nadie precede sus documentos d e HTML con el comando doctype de SGML. Debido a
la confusi6n entre versiones y estlndares, tampoco recomendamos que incluya ese prefijo
e n sus documentos d e HTML. Hay otros mecanismos para definir mejor el contenido de sus
documentos, como el atributo v e r s i o n de la etiqueta <html>.

3.5.1 La etiqueta <btml>

Como ya vimos, las etiquetas <html> y </html> sirven para delimitar el principio y fin d e un
documento de HTML. Como el navegador tipico puede inferir fkilmente del documento
fuente que es un documento d e HTML, en realidad n o necesita incluir esta etiqueta en su
documento fuente.

<btml>
Funcion:
Delimita e n su totalidad un documento de HTML
A tributos:
VERSION
Etiqueta de fin:
</ html>; puede omitirla
Contiene:
Etiquetas de encabezado, cuerpo y marcos

Dicho esto, se considera adecuado incluir esta etiqueta d e manera que otras herramientas,
e n particular las mPs comunes para procesamiento de texto, puedan reconocer su documen-
to como un documento de HTML. A1 menos la presencia d e las etiquetas <html> de princi-
pio y fin le aseguran que no haya borrado por descuido las etiquetas de principio o de fin
del documento.
Dentro d e la etiqueta <html> y su etiqueta d e fin estPn el encabezado y el cuerpo del
documento. Dentro del encabezado encontrari etiquetas que identifican a1 documento y
definen su ubicaci6n e n un conjunto de documentos. Dentro del cuerpo aparece el conte-
nido real del documento, definido por etiquetas que determinan el disefio y apariencia del
texto. Como podria esperar, el encabezado del documento se ubica dentro de la etiqueta
<head> y el cuerpo dentro de la etiqueta <body>; ambas se definen mas adelante.
Navigator e Internet Explorer extienden la etiqueta <html> de manera que la etiqueta <body>
pueda ser remplazada por <frameset>, definiendo uno o mas marcos que deben desplegarse
y que, a su vet, tienen el contenido real del documento. Vea el capitulo 12 para obtener
mayor informaci6n.
48 Capftulo 3: Anatomfa & un documento & HTML

A grandes rasgos, la forma mas comdn de la etiqueta <html> es simple:

<html>
. . .encabezado y cuerpo del documento
</html>
Cuando la etiqueta <htrnl> aparece sin el atributo version, el servidor de documentos de
HTML y su navegador suponen que la versi6n de HTML utilizada en ese documento la
proporciona el servidor a1 navegador.

3.5.1.1 Atributo version

El atributo v e r s ion de la etiqueta <html> define la versi6n estandar de HTML utilizada para
elaborar el documento. Si la incluye, el valor del atributo v e r s i o n debe aparecer exacta-
mente como:
version="-//W3C//DTD HTML 3.2 Final//ENM
Este atributo identifica mejor el origen y contenido de un documento de HTML que el
comando doctype de SGML. Sin embargo, algunos navegadores pueden alterar el procesa-
miento del documento con base e n la versi6n de HTML especificada por el atributo v e r s ion,
de manera que tenga cuidado. De nuevo, la confusi6n entre extensiones y versiones y la
falta de guias de estandares nos lo dificulta, por lo que no le recomendamos incluir informa-
ci6n de version e n su documento, except0 quiza como parte de un comentario.

3.6 Encabezado d e un documento

El encabezado de un documento de HTML describe las diferentes propiedades del docu-
mento, incluyendo su titulo, posici6n e n el Web e interacci6n con otros documentos. Casi
todos 10s datos contenidos e n el encabezado del documento e n realidad nunca se presentan
a1 usuario.

3.6 1 Etiqueta <bead>

La etiqueta <head> no tiene atributos y sirve s61o para subordinar a las demas etiquetas de
encabezado. Debido a que siempre aparece cerca del principio de un documento, justo
despuCs de la etiqueta <html> y antes de la etiqueta <body> o <frameset>, el navegador
puede inferir tanto la etiqueta <head> como su correspondiente, </head>, por lo que se
pueden omitir del documento sin peligro. No obstante, le sugerimos incluirlas e n sus docu-
mentos por razones de claridad y mejor soporte para la automatization del documento.
La etiqueta <head> puede delimitar algunas otras etiquetas que ayuden a definir y adminis-
trar el contenido del documento. h a s incluyen, e n cualquier orden de aparici6n: <base>,
<isindex>, <1 ink>, <meta>, <nextid>, < t i t l e > y < s t y l e > .
3 6 Encabezado de un documento 49

<bead>
Funcion:
Define el encabezado del documento
Atributos:
Ninguno
Etiqueta de fin:
</head>; raramente se omite
Contenido:
Contenido del encabezado
Utilizada en:
Etiquetas <html>

Para obtener mayor informacih, revise 10s capitulos 7 y 9.

3.6.2 Etiqueta <title>

La etiqueta < t i t 1 e> hace exactamente lo que usted supone: las palabras que coloca entre
sus etiquetas d e principio y fin definen el titulo del documento (le dijimos que esta etiqueta
se autoexplica por su nombre y es mPs sencilla d e lo que pueda pensar en principio). El
navegador utiliza de manera especial el titulo, con frecuencia coloc5ndolo e n su barra de
titulo o e n su linea de estado. Por lo general el titulo se convierte e n el nombre predetermi-
nado d e una liga a1 documento si Cste se agrega a una colecci6n de ligas o a la lista de
lugares que visita con frecuencia un usuario.

Funcion:
Define el titulo del documento
Atributos:
Ninguno
Etiqueta de fin:
< / t it 1 e>; nunca debe omitirla
Contenido:
Texto descrtptivo
Utilizada en:
Contenido del encabezado
50 Capftulo 3: Anatomfa de den documento de HTML

La etiqueta < t i t l e > es la dnica requerida por la etiqueta <head>. Debido a que la etiqueta
<head> e incluso la etiqueta <htrnl> se pueden omitir sin riesgos, la etiqueta <tit l e> podria
ser la primera linea e n un documento de HTML vilido. MPs all2 d e eso, la mayoria d e 10s
navegadores incluso proporcionan un titulo generic0 para 10s documentos que carecen de
la etiqueta < t i t l e > ; por ejemplo, el nombre del archivo del documento, de manera que
incluso no es precis0 que proporcione algdn titulo, lo cual excede aun nuestras bajas y
oscuras sugerencias. Ningdn autor respetable de un documento de HTML deberia presentar
su trabajo sin la etiqueta <tit 1 e> y, desde luego, sin un titulo.
Los navegadores no dan ningdn formato especial a1 texto del titulo e ignoran todo aquello
que no sea texto entre las etiquetas de inicio y fin, como podrian ser imageries o ligas a
otros documentos.
h e es un ejemplo bastante sencillo de un documento de HTML vilido para seiialar las
etiquetas de encabezado y titulo:

Seleccionar el titulo adecuado es muy importante para definir un documento y asegurar que
pueda utilizarse de manera efectiva e n el World Wide Web.
Recuerde que 10s usuarios pueden acceder a cada uno de sus documentos e n una colecci6n
casi e n cualquier orden y de forma independiente. Por lo tanto, debe definir el titulo de cada
documento e n su propio context0 y e n relaci6n con el resto de 10s documentos.
Los titulos que incluyen o hacen referencia a secuencias de documentos por lo general son
inapropiados. Los titulos simples, como "Capitulo 2" o "Parte VIM,son de poca ayuda para el
usuario, que se preguntari quC contienen 10s documentos. Los titulos mPs descriptivos,
como "Capitulo 2: baile de figuras" o "Parte V1: juventud y madurez de Churchill", dan una
referencia respecto a un conjunto de documentos y, a la vez, una noci6n de su contenido
especifico, lo cual invita a1 usuario a leer 10s documentos.
Los titulos de referencia tampoco son muy dtiles. Un titulo como "Mi plgina inicial" no dice
nada sobre su contenido; tampoco titulos como "PPgina de retroalimentaci6nn o "Ligas
populares". Puede desear que un titulo dC sentido y prop6sito a1 contenido de mod0 que 10s
usuarios puedan decidir, con base e n el titulo, si visitan o no la pPgina. "La pPgina inicial
de Kumquats" es descriptiva y dirigida a 10s amantes de esta agria fruta, a1 igual que "PPgina de
retroalimentaci6n para 10s amantes de 10s kumquats" y "Ligas populares para 10s amantes
de 10s kumquats".
3 7 Cuerpo del documento 51

Las personas pasan mucho tiernpo creando documentos para el Web, por lo general s610
para desperdiciar esfuerzos con titulos no efectivos ni atractivos. Conforme se tornen m4s
comunes en el Web programas especiales que automaticamente extraen ligas para 10s usua-
rios, la linica frase descriptiva asociada con sus p4ginas cuando se les incluya e n algunas
extensas bases de datos sera el titulo que les puso. No podemos hacer el suficiente Cnfasis
e n el tema; por lo tanto, sea cuidadoso a1 seleccionar 10s titulos, que Sean descriptivos, litiles
y que indiquen su relaci6n con el conjunto de documentos de HTML.

3.63 Etiquetas relacionadas con 10s encabezados

Otras etiquetas que puede incluir e n la etiqueta <head> tratan aspectos especificos de la
creaci6n, manejo, ligas, automatizaci6n o diseiio de documentos. esta es la raz6n por la que
aqui s61o las mencionaremos, para describirlas con mas detalle e n otras secciones y capitu-
10s m4s apropiados de esta obra.
Brevernente, las etiquetas de encabezado especiales son:
< l i n k > y <base>
Definen la localizaci6n base del docurnento en uso, asi corno su interrelaci6n con otros
docurnentos. [*1 ink>, 7.7.21 [*base*, 7.7.11
< i s i ndex>
Crea de rnanera autorn5tica indices de documentos, permitiendo a 10s usuarios hacer
blisquedas basadas e n datos de inforrnaci6n utilizando el docurnento e n uso corno
herrarnienta de consults. [*isindex>, 7.6.11
<next id>
Facilita la creaci6n d e etiquetas de docurnento linicas a1 utilizar herrarnientas de
autornatizaci6n de docurnento. [*next id>, 7.8.21
<met a>
Proporciona datos del docurnento adicionales no proporcionados por ninguna otra eti-
queta <head>. [*eta>, 7.8.11
< s t y 1 e>
Le perrnite crear propiedades de hojas de estilo e n cascada (CSS) para controlar las
caracten'sticas del desplegado del contenido de cuerpo de todo el docurnento. [*sty1 e>,
9.1.21

3.7 Cuerpo del documento

El cuerpo es la parte central: es donde coloca el contenido de su docurnento. La etiqueta
<body> delimita el cuerpo del docurnento.
52 Capitulo S: Anatomia de un documento de HTML

3.7.1 Etiqueta <body>

Dentro d e la etiqueta <body> de HTML 3.2 hay mliltiples atributos que controlan el color y
fondo de su documento. Varios navegadores, como veremos, han extendido esta etiqueta
para brindar alin mas control sobre la apariencia de 10s documentos.

Funcion:
Define el cuerpo del documento
A tributos:
ALINK
BACKGROUND
BGCOLOR
BGPROPERTIES 0
CLASS 0
LEFTMARGIN 0
LINK
ONBLUR rn 0
ONFOCUS rn 0
ONLOAD rn 0
ONUNLOAD rn 0
SI-YLErn 0
TEXT
TOPMARGIN 0
VLINK
Etiqueta de fin:
</body>; puede omitirla
Contenido:
Contenido del cuetpo
Utilizada en:
La etiqueta <h t m 1>

Cualquier elemento que coloque dentro de la etiqueta <body> y su contraparte de fin, < / b o d y ,
se denomina contenido &I cuerpo. El documento de HTML rnis sencillo puede tener s61o una
secuencia de parrafos de texto dentro de la etiqueta <body>. Los documentos rnis complejos
incluirin texto con forrnato elaborado, imigenes, tablas y mliltiples efectos especiales.
Debido a que el navegador puede inferir la posici6n de las etiquetas <body> y </body>,
puede omitirlas sin ninglin riesgo e n 10s documentos d e HTML. No obstante, a1 igual que las
etiquetas <html> y <head>, recomendamos incluirlas en el documento para hacerlo rnis
claro y manejable.
3.7 Cuerpo del documento 53

Los varios atributos de la etiqueta <body> se pueden agrupar e n dos conjuntos: 10s que le
dan cierto control sobre la apariencia del documento, como 10s colores de fondo, texto y
ligas, y 10s asociados con funciones programables con el propio documento. Explicamos 10s
atributos de apariencia (a1 ink, background, bgcol or, bgproperti es, 1eftmargi n, 1ink,
t e x t , topmargi n y vl ink) e n la secci6n 5.3 y tambien junto con 10s atributos c l a s s y sty1 e
para las hojas de estilo e n cascada y de JavaScript, descritas e n el capitulo 9. Los atributos de
programaci6n (onBl ur, onfocus, onLoad y onUnl oad) se estudian e n la secci6n 13.3.3.
Navigator e Internet Explorer tambien admiten un tip0 especial de documentos de HTML
que sustituyen la etiqueta <body> con una o m b etiquetas <frameset>. Este documento
llamado marco, divide la ventana del navegador e n una o miis ventanas independientes
(marcos), cada una mostrando un documento diferente. En el capitulo 12 describimos esta
innovaci6n.
Fundamentos
de texto

En estos dias de extravagante y excesiva publicidad, el c6mo se ha vuelto casi tan imponan-
te como el que, y, e n algunos casos, mis. Cualquier presentaci6n exitosa, incluso una obra
cientifica d e gran volumen, debe tener su texto organizado en forma atractiva y efectiva.
Organizar texto e n documentos atractivos es la especialidad d e HTML. Este lenguaje le
proporciona muchas herramientas que le ayudan a moldear su texto y transmitir sus mensa-
jes. HTML tambien le ayuda a estructurar su documento d e manera que el p6blico a1 que se
dirige tenga fPcil acceso a su mensaje.
Siempre recuerde, a1 diseiiar sus documentos (iotra vez!), que las etiquetas de HTML, en
particular las referentes a texto, s61o le sugieren -no le ordenan- a1 navegador c6mo debe
presentar el documento. La presentaci6n de un documento varia de un navegador a otro. No
se complique tratando de lograr la apariencia y disefio correctos. Sus intentos pueden ser, y
probablemente Sean frustrados por el navegador.

A1 igual que la mayoria de 10s procesadores de texto, un navegador acomoda las palabras
que localiza en el documento de HTML de mod0 que ocupen el ancho d e su ventana. A1
ampliar la ventana del navegador, el texto se reacomoda d e forma automPtica en lineas mis
anchas. A1 reducir la ventana, las palabras se vuelven a acomodar hacia las lineas d e abajo.
4.1 Mvisknes y pdwafos 55

Sin embargo, a diferencia de la mayoria de 10s procesadores de texto, HTML utiliza etiquetas
d e divisi6n explicita (<di v>), p4rrafo (<p>) y corte de linea (<br>) para controlar la alinea-
ci6n y flujo del texto. Los caracteres d e retorno, aunque adecuados y litiles para efectos de
claridad del documento fuente de HTML, por lo general 10s ignora el navegador: quienes
componen plginas con HTML deben utilizar la etiqueta <br> para forzar un corte de linea
en el texto. La etiqueta <p>, aunque lleva a cab0 la misma acci6n, tiene un significado y
efectos que van m4s all4 de un simple corte d e linea.
La etiqueta <di v> es un poco diferente. Codificada e n el estandar de HTML 3.2, <div> se
incluy6 en el lenguaje como una simple herramienta de organizaci6n --divide el documen-
to en secciones independientes- cuyo irrelevante significado ocasiona que pocos autores
la utilicen. Pero en la actualidad las recientes innovaciones a 10s navegadores -10s atributos
d e alineacih, estilo relacionado con 10s atributos d e estilo y clase- le permiten mayor
nivel d e distinci6n y, por lo tanto, d e definici6n d e secciones e n sus documentos, asi como
control de alineaci6n y apariencia d e esas secciones. Estas funciones le dan vida propia y
significado a la etiqueta <di v>.
A1 asociar un nombre d e clase con las diferentes secciones de su documento de HTML, cada
una delimitada por una etiqueta <di v cl ass=nombre> y un atributo (tambiCn puede hacer
esto con otras etiquetas; <p>, por poner un caso), no s61o rotula esas divisiones para fines d e
manejo y procesamiento autom4tico (por ejemplo, reunir todas las divisiones bibliografi-
cas), tambiCn puede definir diferentes estilos de desplegado para ciertas partes del docu-
mento. Por decir algo, puede definir una clase d e divisi6n para la sinopsis ( ~ dvi
cl ass=si nopsi s>, por ejemplo), una para el cuerpo, otra para la conclusi6n y otra m4s para
la bibliografia (<div cl ass=bi bl io>, por ejemplo).
Asi, cada clase puede estar determinada por una definici6n diferente de desplegado en una
hoja de estilo a nivel del documento o relacionada externamente: la sinopsis indentada y en
cursivas (div.sinopsis {left-margin: +0.5in; font-style: i t a l i c } , por ejemplo); el
cuerpo e n una tipografia comlin, justificado a la izquierda; la conclusi6n, similar a la sinop-
sis; y la bibliografia numerada autom4ticamente y con un formato apropiado.
En el capitulo 9 le proporcionamos una descripci6n detallada d e las hojas d e estilo, las
clases y sus aplicaciones.

4.1.1 Etiqueta <div>

Como se defini6 en el est4ndar de HTML 3.2, la etiqueta <div> divide el documento en
secciones distintas e independientes; la puede utilizar estrictamente como una herramienta
organizativa, sin ninglin tip0 de formato asociado. Y es mas efectiva si le agrega un atributo
d e clase para rotular la divisi6n. Puede combinarla con el atributo de alineaci6n para contro-
lar la alineaci6n de todas las secciones desplegables del documento.
56 Cabftulo 4 Fundamentos de texto

<diu>
Funcion:
Define un bloque d e texto
A tributos
ALIGN
CLASS rn 0
LANG 0
NOWRAP 0
STYLE 0
Etiqueta de fin:
</di v>; por lo general se omite
Contiene:
Contenido del cuerpo
Utilizada en:
Bloques

4.1.1.1 Atn'buto align

El atributo de alineaci6n a1 i ng para la etiqueta <di V> justifica el contenido especificado ya

sea a la izquierda ( l e f t ) -predeterminado--, a1 centro (center), o la derecha (right) en
la ventana del navegador. La etiqueta <di v> puede estar anidada, y la alineaci6n d e las
etiquetas anidadas tiene prioridad sobre la alineaci6n de la etiqueta <di V> m5s externa. MAS
a6n, otras etiquetas d e alineaci6n anidadas, como <center>, alinean p5rrafos (vCase <p> en
4.1.2), o alinean especialmente filas y columnas de tablas, anulando el efecto d e <div>.

Soportado s61o por Internet Explorer de Microsoft, este atributo anula el acomodo autom5-
tic0 del texto dentro de la divisi6n. Los cortes de linea se realizan donde usted haya coloca-
do retornos de carro en su documento fuente d e HTML.
Aunque el atributo nowrap (de "no acomodo" de texto) quiz5 no tiene mucho sentido para
grandes secciones de texto que de otro mod0 fluiria junto por la pagina, puede facilitar la
creaci6n de bloques d e texto con varios cortes de linea explicitos: poesia, por ejemplo, o
direcciones. No es necesario insertar etiquetas <br> en un flujo de texto que est5 dentro de
una etiqueta <div nowrap>. Por lo dem5s, el resto de 10s navegadores ignora el atributo
nowrap y simplemente hacen fluir el texto. Si crea sus documentos s61o para Internet Explorer,
eval6e usar nowrap donde sea necesario; de otra manera, no podemos recomendar este
atributo para uso general.
4.1 Dlvisiones y pdwafos 57

4.1.1.3 Atn'buto lang

El atributo 1ang le permite especificar la lengua utilizada en la divisi6n. Su valor es cualquie-

ra de las abreviaturas de lenguaje de dos caracteres del estandar ISO. Por ejemplo, si agrega
1 ang=en indica a1 navegador que la divisi6n est5 redactada en inglCs (english). Es probable
que el navegador pueda tomar decisiones tipogr5ficas o de estilo con base en la elecci6n del
lenguaje. Este atributo tambiCn es soportado s61o por Internet Explorer de Microsoft; el resto
de 10s navegadores lo ignora. Incluso en Internet Explorer no existen comportamientos
definidos para algGn lenguaje especifico.

4.1.1.4 Atributos style y class

Utilice el atributo s t y 1 e en la etiqueta <di v> a fin de crear un estilo de despliegue especi-
fico para el contenido encerrado por dicha etiqueta. El atributo c l a s s le permite aplicar el
estilo de una clase predefinida en la etiqueta <di v> a1 contenido de esta divisi6n. El valor
del atributo c l a s s es el nombre de un estilo definido en alguna hoja de estilo a nivel del
documento o de definici6n externa. AdemQs, las divisiones identificadas por una clase
tambiCn se prestan muy bien para el procesamiento electr6nico de sus documentos; por
ejemplo, para extraer todas las divisiones cuyo nombre de clase sea "biblio" a fin de hacer
una recopilaci6n autom5tica de toda la bibliografia. [atributo style, 9.1.11 [atributo
class, 9.2.41

4.1.2 Etiqueta <p>

La etiqueta <p> seiiala el inicio de un p5rraf0, uso no muy conocido ni siquiera por algunos
experimentados expertos e n el Web porque funciona de un mod0 distinto a lo que espera-
riamos por experiencia. La mayoria de 10s procesadores de palabras que conocemos utili-
zan un caracter especial, por lo general el de retorno, para seiialar elfin d e un parrafo.
En HTML cada p5rrafo comienza con la etiqueta <p> y termina con su correspondiente
etiqueta de fin, </p>. Y mientras varios caracteres de linea nueva en un procesador de
texto crean un p4rrafo vacio por cada uno, 10s navegadores por lo comGn ignoran todas
except0 la primera etiqueta de p5rrafo.
En la practica, tambiCn puede obviar la etiqueta <p> del principio del primer parrafo, lo
mismo que la etiqueta </p> del Gltimo parrafo, pues se infieren a partir de otras etiquetas en
el documento y, por lo tanto, puede omitirlas sin riesgo. Por ejemplo:
<body>
Este e s e l primer parrafo del cuerpo de e s t e documento.
<P '
La e t i q u e t a a n t e r i o r setiala el i n i c i o de e s t e segundo parrafo, el cual
a1 desplegarlo en un navegador, comenzara ligeramente abajo del f i n a l
del primer parrafo, dejando e n t r e 10s dos un poco de espacio en blanco
adicional.
58 Capfhtulo 4: Fundamentos de texto

Funcion:
Define un p5rrafo de texto
A tributos
ALIGN
CLASS 0
STYLE 0
Etiqueta de fin:
</di v>; por lo general se ornite
Contiene:
texto
Utilizada en:
Bloques

<P>
Este es el Gltimo parrafo del ejemplo.
</body>
Observe que e n el ejernplo no hernos incluido la etiqueta de inicio de p5rrafo (<p>) en el
primer p5rraf0, ni tarnpoco ninguna etiqueta de fin: el navegador las puede inferir con
claridad y, por lo tanto, no son necesarias.
En general, encontrar5 que 10s autores de docurnentos de HTML tienden a ornitir, siernpre
que sea posible, las etiquetas postuladas, rnientras 10s generadores electrdnicos de docu-
rnentos tienden a insertarlas. Esto puede ser porque 10s disefiadores d e aplicaciones
no quieren correr el riesgo de que su product0 sea castigado por sus cornpetidores a1 no
apegarse a1 est5ndar de HTML, aunque en este caso Sean redundantes. Continde y no sea
tan estricto: ornita la etiqueta <p> del primer p5rrafo y no dude en ornitir tarnbiCn las
etiquetas </p> de fin de p5rraf0, con la condici6n, por supuesto, de que la estructura y
claridad de su docurnento no queden confusas.

4.1.2.1 Despliegue de p d m f o s

Cuando un navegador localiza una nueva etiqueta de p5rrafo (<p>), por lo general inserta en
el docurnento una linea e n blanco, adernas de cierto espacio vertical antes de cornenzar el
nuevo p5rrafo. Luego redne todas las palabras y las i d g e n e s , si hubiera, en el nuevo
phrrafo, ignorando las lineas en blanco al principio y a1 final del p5rrafo (por supuesto, no
espacios entre palabras) y 10s caracteres de retorno en el documento de HTML. Asi, el
navegador hace fluir la secuencia de palabras e irn5genes en un p5rrafo que se acornoda
dentro de su ventana, generando de forrna autornstica cortes de linea corno sea necesario
para distribuir el texto. Por ejernplo, compare c6rno un navegador acornoda el texto en
lineas y parrafos (figura 4-1) y cdrno aparece en la p5gina del ejernplo de cddigo de HTML
4.1 Divistones y pdrrafos 59

anterior. El navegador tarnbiCn puede, de forma automitica, separar silibicamente (con

guiones) las palabras largas para que el pirrafo quede justificado e n su totalidad para ajustar
la linea d e texto respecto a ambos m5rgenes.

if Rrchivo Edicidn Uer Ir Marcadores Oacioneo Dlrectorio Uentana

Fzgut-la 4-1 Los navegadores ignorurz [os cumcteres de retorno comzmes en e[ documento
f z r e n ~de HliML.

El resultado final es que a1 eiaborar documentos de HTML no tiene que preocuparse por la
longitud ni cortes d e las lineas ni por el acomodo de palabras. El navegador toma cualquier
secuencia arbitraria de palabras e imiigenes y muestra un pirmfo con un formato agm-
dable.
Si desea controlar explicitamente la longitud y cortes de la linea, considere utilizar un
bloque de testo con formato previo etiquetado con <pre>. Si necesita forzar un corte de
linea, utilice la etiqueta <br>. [<pre>, 4.7.51 [<br>. 4.7.11

La mayoria d e 10s navegadores justifica de forma autom5tica a la izquierda 10s parrafos

nuevos Para modificar este comportamlento. HTML 3.2 le proporciona el atributo de alinea-
cidn para la etiqueta <p>, ademis de tres tipos de justificacion para el contenldo: izquierda,
derecha o centrada
En la figura 4-2 se rnuestra el efecto de cada tip0 d e alineacidn, como se veria a partir del
siguiente documento fuente:
<p a1 ign=right>
Este a l a derecha
cbr>
Este tambi@n.
<p a1 i g n = l e f t >
Ajustado a l a izquierda.
<p a1 ign=center>
Justo en el centro.
</P>
A 1 a i zquierda, 1 a a1 i neacidn predeteminada.
60 Cap&& 4: Funrkrmentos de texto

rL
- w Archiuo Edicion Uer Ir Marcadores Opciones Oirectorio Uentana
21

Figurn 4-2.Efectos del ntl-ibutode nlineacth en 1aftlsttflcacMn de pdmfos (Netscape 3.0).

Observe e n el ejemplo que la alineaci6n del pirrafo sigue, en efecto, hasta que el navegador
encuentra otra etiqueta <p> o de fin, </p> (en el ejemplo deliberadamente pusimos la
etiquet" <p> del ultimo parrafo para ilustrar el rfecto de la etiqueta de fin </p> a1 justificar
parrafos). Otros elementos del cuerpo tambien pueden desorganizar la alineacicin del pirra-
fo actual y ocasionar que 10s subsecuentes vuelvan a la alineaci6n izquierda predetermina-
d : ~ por
; ejemplo, formas, encabezados, tablas y la mayoria de las demis etiquetas relaciona-
das con el contenido del cuerpo.

4.1.2.3 Atributos de slyley class

Utilice el atributo s t y l e con la etiqueta <p> a fin de crear un estilo para el contenido de
10s p5rrafos. El atributo c l a s s le permite rotular phrrafos con nombres que hagan referen-
cia a una clase predefinida de !a etiqueta <p> declarada en alglin nivel del documento o
en una hoja d e estilo d e definici6n externa. Y 10s psrrafos identificados por clase se
prestan muy bien a un adecuado procesamiento electrhico de documentos; por decir Ago,
para extraer todos 10s p5rrafos cuyo nombre de clase sea "cita" a fin d e crear, de mod0
autom5tic0, una lista global de citas. [atributo style, 9.1.11 [atributo class, 9.2.41

Un parrafo d e HTML puede tener cualquier elemento permitido en el flujo de texto, inclu-
yendo palabras y puntuaci6n convencionales, ligas (<a>), imigenes (<img>), cortes de linea
(<br>), cambios de tipografia (<b>, <i>,<tt>, <u>. < s t r i ke>, <big>. < m a 1 I > , <sup>, <sub>
y <font>) y cambios de estilo basados en conten~do(<ci te>, <code>. <dfn>, <ern, ckbd>,
<sarnp>, <strong> y war>). Si hubiera cualquier otro elemento en el pirrafo, implicaria que
Cste ha terminado y el navegador supondria que no s e especific6 la etiqueta de fin de
p5rraf0, </p>.
4.2 Encabezados 61

4.1.2.5 Usopermitido de pdrrafos

Puede especificar un p5rrafo solo dentro d e un bloque, junto con otros p h a f o s , listas,
formas y texto con formato previo. En general, esto significa que 10s p5rrafos pueden
aparecer donde sea apropiado un flujo d e texto, digamos en el cuerpo de un documento, en
un elemento d e una lista, etcetera. Tecnicamente, 10s p5rrafos n o pueden aparecer e n un
encabezado, ancla u otro elemento cuyo contenido sea estricta y exclusivamente texto. En la
prsctica, la mayoria d e 10s navegadores ignora esta restricci6n y da formato a1 p5rrafo como
parte del elemento que lo contenga.

4.2 Encabezados
Los usuarios pasan suficiente tiempo leyendo lo que aparece en la pantalla. Un gran flujo d e
texto, n o seccionado por titulos, subtitulos u otros encabezados, irrita 10s ojos y confunde,
sin mencionar el hecho d e que casi imposibilita la localizaci6n d e temas especificos. Es
recomendable romper el flujo del texto e n secciones pequefias con uno o m5s encabezados
(como en este libro). HTML define seis niveles d e encabezados que puede utilizar para
estructurar el texto d e un documento de un mod0 m5s legible y manejable. Y, como vere-
mos en 10s capitulos 5 y 9, hay muchos trucos relacionados con gr5ficos y estilo d e texto que
le ayudar5n a estructurar su documento d e HTML y facilitar el acceso y comprensi6n del
contenido para 10s usuarios.

4.2.1 Etiquetas de encabezado

Las seis etiquetas d e encabezado, < h l > , <h2>, <h3>, <h4>, <h5> y <h6>, indican d e la m5s
alta (<hl>) a la mas baja (<h6>) importancia que un encabezado puede tener en el docu-
mento.
El texto contenido entre las etiquetas d e encabezado por lo general es 6nicamente interpre-
tad0 por el navegador, dependiendo d e la tecnologia disponible. El navegador puede deter-
minar si centra, pone e n negritas, alarga, pone en cursivas, subraya o cambia el color d e 10s
encabezados para resaltarlos e n un documento. Y asi evita que 10s escritores y tambien
usuarios d e HTML m5s obstinados puedan alterar la forma e n que 61 presentar5 10s diferen-
tes encabezados.
Por fortuna, en la pr5ctica la mayoria de 10s navegadores emplea fuentes m5s pequefias para
10s encabezados subsecuentes, d e manera que el texto < h l > es un poco m5s grande y el
texto d e <h6> es m5s pequefio (vea el ejemplo de la figura 4-3).
Por tradicibn, 10s autores d e paginas d e HTML se han apegado a utilizar encabezados < h l >
para titulos d e documentos; <h2> para titulos d e secci6n, etcetera, por lo general haciendo
referencia a la forma e n que fuimos ensefiados a estructurar nuestro trabajo con titulos,
subtitulos, subsubtitulos, etcetera.
62 Capftulo4: Fundarnentos de texto

Funcion:
Cada una define uno de 10s seis niveles de encabezado
A tributos
ALIGN
CLASS 0
5JYL.E a0
Etiqueta de fin:
< / h l > , </h2>, </h3*, </h4>, </h5>, */h6>
Contiene:
texto
Utilizada en:
Texto del cuerpo
- - -

5 Rrchiuo Edicibn Uer Ir Marcadores Opciones Directorio Uentana

Encabezado de nivel 1
Encabezado de nivel2

Figura 4-3. Los navegadores por lo comtin emplean tamafios de fuentes mcispequetios para
10s distintos ntveles de encabezados.

Por 6ltim0, no olvide incluir en su documento las etiquetas d e fin d e encabezado apropia-
das. El navegador no las inserta d e mod0 automitico; adem&, omitirlas podria traer conse-
cuencias muy desagradables para su documento.
4.2. I.I Atributo align

La alineaci6n de encabezado predeterminada en la mayoria d e 10s navegadores es la iz-

quierda. A1 igual que las etiquetas <di v> y *p>, usted puede cambiar esta alineaci6n con el
atributo a1 i gn y alguno de sus valores: 1 eft (izquierda), center (centro) o right (derecha).
En la figura 4-4 se muestran estos tipos d e alineaci6n para el siguiente documento fuente:
<hl a1 ign=right>Al ineado a la derecha.</hl>
<h2 a1 ign=l eftsAl ineado a la i zquierda.</h2>
<h3 a1 ign=center>Justo en el centro.</h3>

-L
r Archiuo Edicion Uer Ir Mercedores Opciones Oirectorio Uentene
m
I-
.____;

aJ
Netscape: Alineacih do emabezados

El

Ffgura 4-4. El am'buro de alineacidn de encabezadas en accidn.

Los atributos sty1 e y cl ass para las etiquetas de encabezado le permiten definir un estilo
especifico para el contenido d e la etiqueta de encabezado y darle formato d e acuerdo con
la clase d e hoja d e estilo predefinida. [atributo style, 9.1.11 [atributo class, 9.2.41

4.2.2 Uso apropiado de encabezados

Es recomendable repetir el titulo del documento e n la primera etiqueta d e encabezado, ya
que el titulo que especifica al principio d e su documento d e HTML no aparece e n la ventana
principal del usuario. Debe coincidir con el titulo del primer encabezado del documento. El
siguiente segment0 d e c6digo de HTML es un buen ejemplo d e repetici6n del titulo del
documento e n el encabezado y en el cuerpo del documento:
<html>
<head>
<ti tle>Cul tivo de kumquats en America del Norte</ti tie>
</head>
<body>
<h3>Cultivo de kumquats en Am6rica del Norte</h3>
<P>
Quizas una de las frutas mas atractivas es el .. .
64 Capftulo 4: Fundamentos de texto

Aunque el navegador puede colocar el titulo e n alguna parte de la ventana del documento
y tambiCn utilizarlo para crear rnarcas o listas de referencia, las cuales aparecen no explicitas
e n alguna parte de la pantalla del usuario, el nivel tres de encabezado en el ejemplo
siernpre aparece a1 principio del documento; y servir5 corno titulo visible para el documento
de rnanera independiente a corno el navegador maneje el contenido d e la etiqueta < t i t1 e>.
Y, a diferencia del texto de < t i t l e > , el encabezado aparece a1 principio de la primera
p5gina que el usuario elige para imprimir el documento. [<tit1e*, 3.6.21
En el ejernplo, elegimos utilizar el nivel tres de encabezado (<h3>), cuyo tipo de letra por lo
general es s61o un poco mayor que el texto del documento. Los niveles uno y dos son m5s
grandes y un poco mPs sobresalientes. Debe seleccionar un nivel de encabezado que le
parezca dtil y atractivo y utilizarlo d e manera consistente en sus documentos.
Una vez que haya establecido el encabezado de rn5s alto nivel, utilice encabezados adicio-
nales del mismo nivel, o d e uno m5s bajo, para dar estructura y "modularidad" a1 documen-
to. Si utiliza un nivel tres d e encabezado para el titulo, divida su documento e n varias
secciones utilizando el nivel cuatro. Si tiene la necesidad de subdividir abn m5s el texto,
evalbe utilizar un nivel dos para el titulo, el nivel tres para marcar secciones y el nivel cuatro
para las subsecciones.

4.2.3 Uso de encabezados para texto ma's pequeiio

Para la mayoria de 10s navegadores grAficos, las fuentes utilizadas para desplegar 10s enca-
bezados < h l > , <h2> y <h3> son mPs grandes, <h4> es igual y <h5> y <h6> son m5s pequenos
que el tamaiio del texto normal. Quienes crean piginas con HTML por lo comdn utilizan 10s
bltimos dos tamaiios para resaltar texto, digamos una nota de propiedad intelectual o de
reclamo. Experimente con 10s encabezados <h5> y <h6> para obtener el efecto deseado. Vea
c6mo un navegador combn presenta la referencia de derecho de propiedad intelectual e n el
siguiente fragment0 de c6digo de HTML (figura 4-5):
Resultado en afios de l a exitosa produccibn de kumquats
en America del Norte
</P>
<h6>Copyright 1995 por Cultivadores de Kumquats de
Ameri ca. Todos 1os derechos reservados. </h6>
</body>
</html>

4.2.4 Contenidopermitido para encabezados

Un encabezado puede contener cualquier elernento de texto permitido, incluyendo texto
convencional, ligas (<a>), im5genes (<img>), cortes de linea (<br>), atributos d e fuente
(<b>, < i > , < t t > , <u>, < s t r i k e > , <big>, <small>, <sup>, <sub> y <font>), lo rnismo que
4.2.6 Integracidn de imdgenes a encabezados
Es posible insertar una o mas imAgenes e n 10s encabezados, desde pequeiias vitietas
o iconos hasta logotipos d e gran tamaiio. Cornbinar un conjunto de encabezados con algu-
nos iconos a lo largo d e un conjunto de documentos no s61o es atractivo a la vista, tarnbih
es una forrna efectiva de ayudar a que el usuario navegue por una colecci6n d e documen-
tos. [<lmg>, 5.2.61
Es sencillo agregar una imagen a un encabezado. Por ejemplo, el siguiente texto coloca un
icono d e "informaci6nnen el encabezado "Para mayor inforrnacion", como puede ver en la
figura 4-6.
<h2>
<img src="info.gif">
Para mayor informacibn</hZ>
En general, las irnagenes en encabezados lucen rnejor a1 principio de Cste, alinertdas con
respecto a la base o a1 centro de la linea del encabezado.

=,-j-----
- -
-Netscape:
6 flrchlllo Ediclon
--
Ir Marcadorer Optiones Dlrectorio
Uer
Imagenes y encebezados
Llentana
- .
-- :A-

Para m5s informaci6n acerca del cuidado, preparacibn y farmas de

mantenimiento del kumquat, asi como para SIX cornercializacihn, le
recommdamos contacte a la oficina local de la Asociaci6n International de
Klmquak.

Figrcra 4-6. Una itnugm en tr n encabemdo.

4.3 Cambio de la apartencia del texto

HTML ofrece rndltiples etiquetas que carnbian la apariencia del texto. En general, estas
etiquetas pueden agruparse en dos categorias: las de estilo basado en contenido y las de
estilo fisico.
Ademss, el W3C ha emitido un bosquejo de un nuevo estandar donde 10s autores de pigi-
nas d e HTML pueden controlar la apariencia y disefio del texto de sus documentos por
43 Cambfo de la aoarfencia def texto 67

medio d e las hojas d e estilo e n cascada (CSS). Netscape tambiCn ha implementado en su

navegador mls reciente hojas d e estilo d e JavaScript. En este capitulo describimos 10s estilos
d e texto basados e n etiquetas d e HTML. Revise el capitulo 9 para obtener detalles sobre las
hojas d e estilo e n cascada y las basadas e n JavaScript.

4.3.1 Estilos basados en contenido

Las etiquetas d e estilo basadas e n contenido informan a1 navegador que el texto que delimi-
tan tiene un significado, contenido o uso especifico. Asi, el navegador da formato a1 texto
con base e n esos significados, contexto o uso.
Debido a que el estilo d e fuente se especifica por medio d e claves semanticas, el navegador
puede seleccionar un estilo d e desplegado adecuado para el usuario. Como estos estilos
varian en funcidn del ambiente, utilizar estilos basados en contenido le ayuda a asegurar
que sus documentos tendrln significado para una amplia gama de lectores. Esto es particu-
larmente importante cuando un navegador estl dirigido a lectores con deficiencias visuales
o discapacitados, cuyas opciones de desplegado son radicalmente diferentes del texto con-
vencional, o d e alguna manera son muy limitadas.
El estlndar d e HTML no define un formato para cada uno d e 10s estilos basados en conteni-
do, s61o indica que el navegador debe presentarlos d e forma distinta a1 texto normal en un
documento. El e s t h d a r incluso no insiste en que 10s estilos basados e n contenido Sean
presentados d e manera diferente a otros. En la pdctica, notad que muchas de estas etique-
tas tienen una clara relaci6n con la impresi6n convencional, pues tienen significados y
estilos similares d e presentacibn, y se presentan en el mismo estilo y fuente e n casi todos 10s
navegadores.

4.3.2 Estilos fisicos

Utilizamos con mucha frecuencia la palabra "intentar" cuando usamos etiquetas d e estilo
basadas e n contenido, ya que el significado transmitido por la etiqueta es m5s importan-
te que la forma e n que un navegador muestra el texto. Empero, e n algunos casos tal vez
desee que su texto aparezca estrictamente e n cursivas o en negritas, quiz5 por razones
legales o d e derechos d e propiedad intelectual. En esos casos, utilice un estilo fisico para el
texto.
Aunque la tendencia e n otros sistemas d e procesamiento d e texto es controlar explicitamen-
te el estilo y la apariencia, en HTML debe evitar las etiquetas fisicas explicitas, except0 en
raras ocasiones. Mejor proporcione a1 navegador tanta informaci6n del contexto como le sea
posible. Utilice 10s estilos basados e n contenido. Aunque 10s navegadores actuales pueden
no hacer nada m l s que desplegar su texto e n cursivas o negritas, 10s futuros navegadores y
herramientas para generar documentos pueden emplear estilos basados e n contenido e n
cualquier cantidad d e formas creativas.
68 Capirulo 4: Fundamentos de texto

4.4 Etiquetas de estilo basadas en contenido

Implica disciplina utilizar 10s estilos basados en contenido, ya que es mis sencillo pensar
c6mo debe aparecer el texto, no necesariamente tambiCn que podria significar. Una vez que
comience a utilizar 10s estilos basados en contenido, sus documentos serin mis consistentes
y aptos para bfisquedas automatizadas y compilaci6n de contenido.

Etiquetas de estilo basadas en contenido

Funcion:
Alteran la apariencia del texto con base e n su significado, context0 y uso
Atributos:
CLASS 0
s r n E la 0
Etiqueta de fin:
Nunca se omite
Contienen:
Texto
Utilizada en:
Texto

4.4.1 Etiqueta <cite>

La etiqueta < c i t e > por lo general indica que el texto que delimita es una cita bibliogrifica,
digamos el titulo de un libro o revista. Por acuerdo, el texto de una cita se presenta e n
cursivas. Por ejemplo, observe en la figura 4-7 c6mo interpreta Mosaic del NSCA el siguiente
texto fuente:
Aunque 10s kumquats no se mencionan en
<cite>Moby Dick</cite> de Melville, es evidente
que el enorme cetaceo representa la agria
"falta de kumquats" en el hombre. De hecho, cuando Ahab
arponea a la bestia, su carne es dura, muy parecida a la noble fruta.

Utilice la etiqueta < c i t e > para colocar aparte cualquier referencia a otro documento, espe-
cialmente 10s de medios tradicionales, como un libro, revista, articulo periodistico o simila-
res. Si hay una versi6n e n linea del trabajo a1 que hace referencia, tambiCn debe encerrar la
cita e n la etiqueta <a> y poner una liga a ese documento.
La etiqueta c c i t e > tambiCn tiene una funci6n oculta: le permite a usted o a cualquier otro
usuario extraer de forma automitica una bibliografia de sus documentos. Es ficil imaginar a
un navegador que compile automiticamente tablas de citas, desplegindolas como notas de
 File Edit Ootions Nauiaate Annotate

Aunque bs kwnquats m se mnt: i o w m m 7 ~ 7 m & 3 a MehiIle. es M e m que el tmnm c c b o

represenla la bgna "fdude kumq~ t s an ' el hombre.De heeho, cumdo Ahab srponea 6 la bth, su
came es d m , muy parecida a la Imble fm.

Figura 4- 7.Mosaic tnterpreta <cite> en cursiuas.

pie de plgina o como un documento totalmente independiente. La semantics de la etiqueta

< c i t e > va mis all5 del cambio de apariencia del texto que contiene; permite a1 navegador
mostrar el contenido a1 usuario e n varias formas dtiles.

4.4.2 Etiqueta <code>

Los programadores se han habituado a un estilo especial para presentar el texto d e su
c6digo fuente: la etiqueta <code>. Con ella s e presenta el c6digo e n una tipografia
monoespaciada de estilo teletipo, parecida a la Courier, que conocen bien la mayoria d e 10s
programadores y lectores de 10s libros de McGraw-Hill, incluyendo Cste.
Navigator presenta el siguiente fragment0 d e c6digo e n un tip0 de letra monoespaciado,
como s e muestra e n la figura 4-8.
La referencia a1 arreglo <code>a[i]</code> es i d h t i ca a
1a ref erenci a a1 apuntador <code>*(a+i )</code>.

Ffgura 4-8. Utilice la etiqueta <code> para presentar cbdlgo deprogramacldn.

Debe utilizar la etiqueta <code> s61o para el texto que represente c6digo fuente d e algdn
lenguaje de programaci6n u otro contenido legible para la mlquina. Mientras la etiqueta
<code> por lo general s61o hace que el texto aparezca e n un tip0 de letra monoespaciado,
el riesgo es que se trata d e c6digo fuente y futuros navegadores pueden agregar otros
efectos de desplegado. Por ejemplo, un navegador determinado puede buscar segmentos
<code> y dar a l g h formato adicional al texto, como indentaci6n especial en ciclos y cllusu-
las condicionales. Si el Cnico efecto que desea es tener un tip0 de letra monoespaciado,
utilice mejor la etiqueta < t t > .
4.4.3 Etiqueta < d l >
Utilice la etiqueta <dfn> para definir ttrminos o frases especiales. Puede no producir cambio
a1 formato dentro del navegador, pero puede ser litil para crear indices o glosarios de
documentos.
Por ejemplo, use la etiqueta <dfn> para introducir una nueva frase a1 lector:
Cuando se a n a l i z a l a cosecha anual, quiza sea G t i l r e a l i z a r una <dfn>
espectroscopia de cascara</dfn>. A1 comparar 10s niveles r e l a t i v o s de hidrocarburos
saturados en f r u t a s de arboles adyacentes. se ha mostrado que l a espectroscopia
de l a s cascaras t i e n e una e f e c t i v i d a d del 87% para l a prediccibn del repentino
increment0 de edemas en e l tronco de arboles menores a 10s cuatro atios.

Observe que en el ejemplo s61o delimitamos con la etiqueta <dfn> la frase "espectroscopia
de clscara" la primera vez que aparece. El buen gusto nos indica no mezclar estilos de texto.
A1 igual que con muchas otras etiquetas relacionadas con el contenido y estilo fisico, mien-
tras menos, mejor.' Como estilo general, sobre todo en documentos tknicos, seiiale 10s
nuevos ttrminos en su primera aparici6n para ayudar a sus lectores a comprender mejor un
tema, pero evite seiialarlos cuando aparezcan de nuevo.

La etiqueta <ern> indica a1 navegador que presente con enfasis el texto delimitado por ella.
Para casi todos 10s navegadores, esto significa que el texto se presenta en cursivas; por
ejemplo, en el siguiente texto Navigator enfatiza con cursivas las palabras "siempre" y
"nunca":
Los cul ti vadores de kumquats <em>si empre</em> debe r e f e r i r s e a 1os kumquats
como " e l f r u t o noble". <em>nunca</em> solo como una " f r u t a " .

Agregar tnfasis a su texto es un asunto de cuidado. Si es muy pequefia, la frase puede

perderse; si muy extensa, puede perder importancia. A1 igual que 10s condimentos, es mejor
emplear el enfasis con prudencia.
Aunque invariablemente crea desplegados en cursivas, la etiqueta <eiw tambitn tiene otras
funciones mls amplias y alglin dia 10s navegadores podriin presentar texto enfatizado con
un efecto especial diferente. La etiqueta <i> explicitamente define texto en cursivas. Ade-
mls de usarla para enfatizar, tambien utilice < e m cuando presente nuevos tCrminos o como
un estilo fijo para referirse a un tip0 especifico de ttrmino o concepto. Por ejemplo, uno
de 10s estilos de algunos libros de McGraw-Hill es dar un formato especial a nombres de
archivo y dispositivo. En la versi6n escrita en HTML, <ern> podn'a usarse para diferenciar
tales tCrminos de 10s definidos explicitamente en cursivas.

Si necesita convencerse de que menos e s mejor al aplicar las etiquetas de estilo basado en contenido y estilo
fisico, intente leer un libro donde alguien haya resaltado con marcador todo lo que le hubiera parecido impor-
tante.
4.4.5 Etiqueta <kbd>
Hablando de estilos especiales para conceptos tecnicos, veamos ahora la etiqueta <kbd>.
Como quiz5 ya lo sospeche, es comdn indicar el texto que se introduce desde un teclado. El
texto contenido e n esta etiqueta por lo general se presenta en el navegador e n un estilo de
fuente monoespaciada.
La etiqueta <kbd> se utiliza con mayor frecuencia e n manuales y documentaci6n relacionada
con computadoras, como e n este ejemplo:
Teclee <kbd>salir</kbd> para abandonar esta utilerfa, o escriba
<kbd>menW/kbd> para regresar a1 menii principal.

4.4.6 Etiqueta <sump>

La etiqueta <samp> indica una secuencia de caracteres que no deberian tener ninguna otra
interpretaci6n por parte del usuario. Esta etiqueta se utiliza con mayor frecuencia cuando se
toma una secuencia d e caracteres fuera d e su contexto. Por ejemplo, el siguiente texto:
La secuencia de caracteres <samp>ae</samp> puede convertirse
en las letras ligadas kaelig; si lo desea.
e n Navigator se ve como e n la figura 4-9.

6
- Rrchivo Edicion Uer I r Marcadores Dpciones Directorio Uentana
Netseape: EJemplos de conversldn L ABig
I+Id1aIl7llalaldal[nl

Ffgura 4-9. Aquf se resalta el text0 de muestra utilizando la etiqueta <sump>.

(En HTML, la referencia especial de entidad para la uni6n d e caracteres "ae" es &aelig ;y en
la mayoria de 10s navegadores se convierte correctamente a las letras ligadas x.)
En general, la etiqueta <samp> n o se utiliza con mucha frecuencia. Deberia emplearla e n 10s
pocos casos en que es necesario hacer un Cnfasis especial e n breves secuencias d e caracte-
res sacadas d e su contexto.

4.4.7 Etiqueta <strong>

A1 igual que la etiqueta <em>, la etiqueta <strong> sirve para enfatizar o destacar texto, pero
con mas vigor. Por lo general, 10s navegadores despliegan el texto delimitado por la etiqueta
<strong> d e forma diferente a1 delimitado por la etiqueta <em>, comdnmente poniendolo
e n negritas (en lugar d e cursivas), de mod0 que 10s usuarios puedan distinguir entre 10s dos.
72 Capftulo4: Fundamentos de texto

Por ejemplo, e n Mosaic, la palabra enfatizada "nunca" del siguiente texto aparece e n ne-
gritas, mientras la palabra "prohibido", definida como < s t r o n g > se presenta tambien en
negritas (figura 4-10).
<em>Nunca</em> debe hacer comentarios despreciativos referentes a la noble
fruta. En particular, por las leyes d e la Asociacih, queda expresamente
<strong>prohibido</strong> mencionar 10s kumquats en frases vulgares.
Si el sentido comrjn nos indica que debemos utilizar la etiqueta <ern> con mesura, la etiqueta
< s t r o n g > debe aparecer arjn con menos frecuencia. Si pareciera que el texto delimitado por
la etiqueta <ern> es un clamor, el de la etiqueta < s t r o n g > seria un alarido. A1 igual que
cuando una persona taciturna levanta la voz, restringir el uso d e <strong> hace su aplica-
ci6n miis notable y efectiva.

ii File Edit ODtions Nauiaate Annotate

Ftgura 4-10. Mosaic intetpreta de diferente rnanera el texto delimitadopor las etiquetas
<S t rang> y <em>.

4.4.8 Etiqueta <var>

La etiqueta <vat->, otro truco para documentaci6n electr6nica, indica un nombre d e variable
o un valor proporcionado por el usuario. Esta etiqueta s e utiliza con m b frecuencia junto
con las etiquetas <code> y <pre> para desplegar elementos especificos de c6digo e informaci6n
similar. El texto delimitado por la etiqueta <var> aparece en un tipo de letra monoespaciado,
como s e muestra en la figura 4-11, donde el navegador de Netscape despliega el siguiente
ejemplo:
El usuario debe teclear
<pre>
cp <var>archivo-fuente</var> <var>archivo-destino</var>
</pre>
remplazando <var>archivo-fuente</var> con el nombre del
archivo fuente y el <var>archivo-destino</var> con el nombre
del archivo destino.
Al igual que otras etiquetas relacionadas con documentaci6n y programas d e c6mput0, la
etiqueta <var> no s61o facilita a 10s usuarios comprender y explorar 10s documentos: sistemas
automatizados podrian utilizar el texto apropiadamente etiquetado para extraer infomaci6n y
padmetros litiles mencionados en el documento. Una vez miis, mientras m b informaci6n
semantics proporcione al navegador, este podrfi presentar mejor esa informaci6n a1 usuario.
 r
4.4 Etlmretas de estiLo basadus en contenido 73

6 Rrchiuo Edicion Uer I r Marcadores Opciones Oirectorio Uentana

--
gc
- -
!id

I remplazando ,w&n?-timbcon el nombre del archivo fuente y el; mr&nhnmDA con el

mmbre del arcldvo destino.

Figura 4-1 1. La etiqueta <vat-> por lo general se usa m c6dtgo de programas preformareado
(<pre>l.

4.4.9 Atributos style y class

Aunque cada etiqueta basada e n contenido tiene un estilo definido, puede modificarlo
definiendo su propia apariencia para cada etiqueta. Esta nueva apariencia puede aplicarse a
las etiquetas basadas e n contenido por medio d e 10s atributos s t y l e o c l ass. [atributo
styl e. 9.1.11 [atributo class, 3.2.41

4.4.10 Resumen de etiquetas basadas en contenido

Los diferentes navegadores grfificos interpretan el texto delimitado por las etiquetas basadas
e n contenido d e mod0 similar; 10s navegadores d e s610 texto, como Lynx, tienen estilos
semejantes para tales etiqdetas. La tabla 4-1 resume estos estilos d e desplegado en el navegador
para las etiquetas nativas. Sin embargo, las definiciones d e hojas d e estilo pueden modificar
estos estilos d e desplegado.

Tabla 4-1. Etiquetas basadas en contenido

Etiqueta Navigator Internet Explorer

<ci te> cursivas cursivas monoespaciado

<code> monoespaciado monoespaci ado monoespaciado
<df n> n/a cursivas n/a
<em> cursivas cursivas monoespaci ado
<kbd> monoespaci ado monoespaciado monoespaci ado
negri t a t
monoespaci ado monoespaci ado monoespaciado
negritas negritas monoespaciado
cursivas monoespaciado monoespaciado
74 Capirulo 4: Fundamentos de texto

4.4.11 Contenido vdlido

Cualquier etiqueta de estilo basada en contenido puede tener cualquier elemento vllido en
el texto, incluyendo texto convencional, ligas, imlgenes y cortes de linea. Ademls, otras
etiquetas de estilo basadas en contenido y estilo fisico pueden incrustarse en el contenido.

4.4.12 Usopermitido
Puede utilizar cualquier etiqueta de estilo basado en contenido en cualquier parte donde
utilice un elemento v5lido en el texto. En la prsctica, esto significa que puede utilizar las
etiquetas < e w , <code> y similares en cualquier parte de su documento de HTML, except0
dentro de segmentos definidos por las etiquetas < t i tie>, < l i s t i n g > o <xmp>. Tambien
puede utilizar etiquetas de estilo en encabezados, aunque su efecto puede anularse por 10s
efectos de la etiqueta de encabezado.

4.4.13 Combinaci6n de estilos basados en contenido

Puede combinar dos o mas estilos basados en contenido para crear interesantes y quiz5
tambien hibridos efectos. Asi, por ejemplo, una cita enfatizada puede definirse:

En la prlctica, sin embargo, el navegador suele ignorar lo anormal; puede probarlo teclean-
do y revisando usted mismo el ejemplo anterior: Moby Dick queda citado pero sin enfasis.
El estiindar de HTML no exige que el navegador soporte todas las posibles combinaciones
de estilo basado en contenido y tampoco define c6mo el navegador debe manejar tales
combinaciones. Algdn dia, quiz5. Por ahora, es mejor elegir la etiqueta que mls le satisfaga.

4.5 Etiquetas de estilo flsico

Existen diez estilos fisicos proporcionados por el estlndar de HTML, incluyendo negritas,
cursivas, monoespaciado, subrayado y texto cruzado (tachado). Ademss, 10s navegadores
mls modernos soportan texto parpadeante, alargado, reducido, supen'ndices y subindices.
Todas las etiquetas de estilo fisico necesitan una etiqueta de fin.

4.5.1 Etiqueta <b>

La etiqueta <b> es el equivalente fisico de la etiqueta <strong>,per0 sin el dltimo significa-
do de la segunda. La etiqueta <b> pone en negritas un car5cter o segment0 de texto delimi-
tad0 por ella y su correspondiente etiqueta de fin (</b>). Si no est5 disponible una fuente en
negritas, el navegador podria utilizar alguna otra representaci6r-1, como subrayado o un
color diferente en el desplegado.
4.5 Etiquetas de estlloflsico 75

Etiquetas de estiloflsico
Funcion:
Especificar un estilo fisico para el texto
A tributos:
CLASS 0
SmE rn 0
Etiqueta de fin:
Nunca se omite
Contiene:
Texto
Utilizada en:
Texto

4.5.2 Etiqueta <big>

La etiqueta <big> permite incrementar el tamaiio del texto sin preocuparse por todos 10s
detalles d e tamaiio de fuentes virtuales disponibles con la etiqueta <font> descrita m5s
adelante e n este capitulo. No podria ser miis sencillo: el navegador despliega el texto
contenido e n la etiqueta <big> y e n su etiqueta de fin correspondiente, </big>, e n un tip0
de letra m i s grande que el texto a su alrededor. Si ese texto ya estuviera e n un puntaje
mayor, <bi g> no tendr5 efecto. [<font*, 4.6.31
Adn mejor, puede anidar etiquetas <bi g> para agrandar m5s el texto. Cada etiqueta <bi g>
agranda el texto hasta un limite de tamaiio siete, como lo define e n el modelo d e la fuente.
Sea cuidadoso con esta etiqueta porque a 10s navegadores a veces les cuesta trabajo enten-
der una etiqueta y 10s que n o soportan <big> por lo general la interpretan como negritas.

4.5.3 Etiqueta <blink>

El texto delimitado por la etiqueta <bl i nk> y su correspondiente de fin, </bl i nk>, hace justo
lo que su nombre indica: hace parpadear el texto. Navigator para Macintosh, por ejemplo,
s610 invierte 10s colores de fondo y frente del texto contenido e n la etiqueta <bl ink>. El
estindar de HTML no incluye <bl ink>; Netscape la soporta como una extensibn.
Aqui, e n estas piginas estiiticas, no podemos reproducir el efecto animado, pero es f5cil
pensar y quiz5 mejor dejarlo a la imaginaci6n, pues el texto parpadeante tiene dos efectos
principales: capta la atenci6n del lector y despuCs lo distrae. Es recomendable utilizar con
prudencia esta etiqueta e n cualquier contexto.
76 Capitulo 4: Fundamentos de text0

4.5.4 Etiqueta <i>

La etiqueta < i > es parecida a la etiqueta basada e n contenido <em>.< i > y su respectiva
etiqueta d e fin (</i>)indican a1 navegador que muestre el texto que delimitan en un tipo d e
letra cursiva o itdica. Si el tip0 d e letra no esti disponible e n el navegador, Cste lo muestra
e n un color inverso a1 desplegado, o tal vez subrayado.

4.5.5 Etiqueta <small>

La etiqueta <ma11 > funciona justo como su contraparte, <big>(vea la descripci6n anterior),
except0 que la primera reduce el tamafio del texto en lugar d e incrementarlo. Si el texto
encerrado ya es m4s pequeiio que el que soporta el tip0 d e letra utilizado, <ma1l > n o tiene
efecto.

A1 igual que <big>,tambiCn puede anidar etiquetas <ma1l > para reducir d e forma gradual
el texto. Cada etiqueta <ma11 > reduce una medida el texto que encierra, hasta el limite d e
tamafio uno.

4.5.6 Etiqueta <s>

La etiqueta <s> es una forma abreviada de la etiqueta <strike> (tachar) soportada por
Internet Explorer y Navigator.

4.5.7 Etiqueta <strike>

La mayoria de 10s navegadores cruzan con una linea (tachan) el texto delimitado por la
etiqueta <stri ke> y su correspondiente etiqueta de fin, </stri ke>.Quiza sea una marca de
edici6n que indica a1 lector que debe ignorar el pasaje, lo cual es una reminiscencia de 10s
dias anteriores a la cinta de correcci6n e n las m4quinas d e escribir. En la actualidad es muy
raro, si es que alguna vez sucede, ver esta etiqueta, aunque se espera verla con m b frecuen-
cia gracias a 10s comerciantes d e productos e n 10s anaqueles del Web que tachan 10s precios
d e 10s articulos d e lenta realizaci6n.

4.5.8 Etiqueta <sub>

El texto contenido entre la etiqueta _{y su correspondiente etiqueta d e fin,},
aparece desplegado d e la mitad d e la altura del carkter, pero e n el mismo tamaiio y tip0
que el dem4s texto. Tanto <sub> como su contraparte, <sup>,son titiles para ecuaciones
matem4ticas y notaci6n cientifica, lo mismo que para f6rmulas quimicas.
4.5.9 Etiqueta ^{La etiqueta < s u p > y su etiqueta de fin,}, ponen e n superindice el texto contenido
entre ellas, el cual aparece desplegado de la mitad de la altura del carhcter, aunque e n la
misma fuente y tamafio del resto del texto. Esta etiqueta es litil para agregar llamadas de pie
d e phgina e n sus documentos, a1 igual que valores exponenciales e n ecuaciones. En combi-
naci6n con la etiqueta <a>, puede crear atractivas entradas de pies de pagina hiperenlazadas:
El larva quat
gorgojo<a href="pi es-de-pag .html #n0te74~~>^{<sma11>74</small>}</a>
es un
.
En este ejemplo se supone que pi es-de-pag html contiene todos 10s pies de phgina, apro-
piadamente delimitados como fragmentos con nombres en el documento.

4.5.10 Etiqueta <tt>

De manera similar a las etiquetas < c o d e > y <kbd>, la etiqueta <t t> y su necesaria etiqueta de
fin, </tt>, indican a1 navegador que muestre el texto que encierran e n una tipografia
monoespaciada. Para esos navegadores que ya utilizan una tipografia monoespaciada, esta
etiqueta puede no presentar alglin cambio visible a1 mostrar el texto.

4.5.11 Etiqueta <u>

Esta etiqueta indica a1 navegador que subraye el texto contenido entre <u> y su correspon-
diente, </u>. La tCcnica de subrayado es simple: dibujar una linea debajo de espacios,
signos de puntuaci6n y texto.

4.5.12 Atributos style y class

Aunque cada etiqueta de estilo fisico tiene un estilo definido, puede cancelar su efecto
definiendo una apariencia propia para cada etiqueta. Esta nueva apariencia se puede aplicar
a las etiquetas d e estilo fisico utilizando cualquiera de 10s atributos s t y l e y class. [atribu-
to s t y l e . 9.1.11 [atributo class. 9.2.41

4.5. I 3 Resumen de etiquetas de estiloflsico

Los diferentes navegadores graficos presentan de manera similar el texto contenido e n
las etiquetas de estilo fisico. La tabla 4-2 resume 10s estilos de desplegado del navegador
para etiquetas nativas. Las definiciones de hojas de estilo pueden neutralizar estos estilos de
desplegado.
El siguiente fragment0 de c6digo de HTML ilustra algunas de las varias etiquetas de estilo
fisico d e acuerdo a como las presentaria Navigator (figura 4-12):
De forma expl ici ta, el texto en <b>negri tas</b>, <i>cursi vas</i> o en esti 1 o
<tt>teletipo</tt>, s e debe usar poco y con <big=-<big>moderacibn</big></big>.
78 Cap&& tFundamentos ds texto

De o t r a manera, beba c s t r i ke>grandes cantidades</strike> lxlO⁶

de gotas de H_{<smal l><small>2</srnal l></smal l>}O.

Tabla 4-2.Etiquetas de estilofstco

Etiqueta Signitlcado

<b> Contenido e n negritas negritas

<bi g> Incrernenta el tarnafio d e la fuente texto m i s grande
<blink> Alterna colores d e fondo y frente texto interrnitente
<i> Contenido e n cursivas cursivas
<small > Decrernenta el tarnaiio d e la fuente texto mas pequefio
<s>, c s t r i ke> Tacha el texto tadrade
<sub> Subindice Su,lndice
<sup> Superindice ""P'indice
<tt> Estilo teletipo mnoespaciado
<U> Contenido subrayado subravado

6 Rrchiuo Edicion Uer Ir Marcadores Opciones Directorio Uentana

De form explicita, el texto en negitas, czm.mo en estilo teletipo, s e debs mar

poco y con moderaci6n. De otra manera, beba 1x106
d e gotas d e q0.

Figura 4-12. Use de manera adecuada las etiquetas de esrllofsico.

4.5.14 Contenido vdlido

Cualquier etiqueta de estilo fisico puede contener cualquier elernento perrnitido e n el texto:
texto conventional, ligas, irnsgenes, cortes d e linea, etcetera. TarnbiCn puede cornbinar
etiquetas de estilo fisico con otras basadas en contenido.

4.5.15 Usopermitido
Puede utilizar cualquier etiqueta de estilo fisico en cualquier parte donde use un elernento
vslido e n el texto. En general, esto significa e n cualquier parte d e un docurnento, except0
dentro d e las etiquetas < t i tie>, <1 is t i n g > y <xrnp>. Puede utilizar una etiqueta d e estilo
fisico en un encabezado, pero el navegador quizP neutralice e ignore sus efectos a causa de
la etiqueta d e encabezado.
80 C a ~ f t4:~Fundamentos
b de texto

<basefont>
Funcion:
Define el tamaiio de la fuente base para cambios de tamaiio relativos
A tributes:
COLOR 0
NAME 0
SIZE
Etiqueta de fin:
< / b a s e f o n t > , se utiliza de forma opcional
Contiene:
Nada
Utilizada en:
Bloque, encabezado

Internet Explorer soporta dos atributos adicionales para la etiqueta < b a s e f o n t > : c o l o r y
name. Estos atributos controlan el color y tip0 de letra utilizada e n el documento, y se
utilizan justo como 10s an5logos atributos de color y fuente de la etiqueta < f o n t > , descrita
m i s adelante.
Los creadores de p5ginas web casi siempre incluyen la etiqueta <base f o n t > e n el encabeza-
d o d e un documento para establecer, si asi lo desea, el tamaiio de la fuente base de todo el
documento. No obstante, esta etiqueta puede aparecer casi en cualquier parte del documen-
to, o aparecer varias veces a lo largo de Cste, cada vez con un nuevo atributo. Siempre que
se presente, 10s efectos de la etiqueta < b a s e f o n t > son aplicados de inmediato para todo el
texto subsecuente.
En una err6nea desviaci6n de 10s esthdares de HTML y SGML, 10s navegadores interpretan
la etiqueta de fin < / b a s e f o n t > no para terminar 10s efectos d e la etiqueta < b a s e f o n t > mas
reciente. En su lugar, < / b a s e f o n t > restablece el tamaiio d e la fuente base a su valor prede-
terminado de 3, que es igual a introducir < b a s e f on t s i ze=3>.
El siguiente ejemplo de c6digo y la figura 4-13 ilustran la respuesta d e Navigator a1 par de
etiquetas < b a s e f o n t > y </basefont>, con valores de atributo fijos y relativos:
A menos que e l tamaiio de fuente base se haya r e s t a b l e c i d o antes,
Navigator presentarti estas l f n e a s en un tamaiio de fuente igual a 3 .
<basefont s i z e = P
Este t e x t o debe aparecer muy grande (tamatio de fuente 7 ) .
<basefont s i ze=l> Oh.
<basefont s i ze=l> no
<basefont s i z e = l > me estoy
<basefont s i ze=l> reduciendo!
</basefont>
Ah, regreso a1 tamatio normal.
 !: Uso be la etlweta ibe

I.. - - L

9 menos que el tamailio de f'uents base se haya re!

~ t a ;imas
s Este texto debe
en UItanak de fuente igual a 3.

aparecer muy grande (tamafio

de fuente 7). o~,,,,*.,!A~ regreso tamsilo md.

Flgura 4-13. Unpoco de diversi6n con la etiqueta <basefont>.

Le recomendamos nunca utilizar </basefont>; mejor use <basefont size=3>.

4.63 Etiqueta <font>

La etiqueta < f o n t > le permite cambiar el tamafio, estilo y color del texto. Se debe utilizar
como cualquier otra etiqueta de estilo basic0 basado o en contenido para cambiar la apa-
riencia de un pequeiio segment0 d e texto.

Funcion:
Determina el tamafio d e fuente para el texto
A tributes:
COLOR
FACE 0
SIZE
Etiqueta de fin:
</font>, siempre se utiliza
Contiene:
texto
Utilizada en:
texto
82 Capitulo 4: Fundamentos de texto

Para controlar el color del texto d e todo el documento, revise 10s atributos d e la etiqueta
<body> descritos e n 5.3.1.

4.6.3.1 Atributo de tamailo

El valor del atributo s i z e d e b e ser u n o d e 10s tamaiios d e fuente virtuales (1-7) descritos
anteriormente, definido c o m o un tamaiio absoluto para el texto delimitado, o precedido por
u n signo m i s o menos (+ o -) para definir u n tamaiio d e fuente relativo q u e el navegador
agrega o resta del tamafio d e fuente base (vea la etiqueta <basefont>). Los navegadores
redondean d e forma automiitica el tamaiio a 1 o a 7 si el valor calculado excede cualquier
lirnite.
En general, use valores d e tamafio absolutes cuando desee presentar el texto e n un tamafio
extremo: muy grancle o muy pequeiio, o cuando clesee q u e un pjrrafo completo aparezca
e n u n tamafio especifico.
Por ejemplo, utilizar el tamano cle fuente m i s grande para el primer cacicter cle u n parrafo
d a c o m o resultado algo rnuy pareciclo a u n manuscrito ilustrado (figura 4-14):
<P>
< f o n t s i ze=7>D</font>ime Ismael .
6 Brchwo Edicion Uer Ir Marcadotes Opc~ones Directorio Uentana

Figzira 4-14 Aumento de tumafio clelprimer caructer de tin enunciado

Asimismo, utilice u n tamafio cle fuente absoluto cuando inserte texto "iltil" o fijo e n la p a n e
inferior d e sus clocumentos (figura 4-15):
<P >
<font size=l>
R e s e r v a d o s t o d o s 10s d e r e c h o s . Queda p r o h i b i d a l a r e d i s t r i b u c i d n n o a u t o r i z a d a
d e e s t e documento. Las o p i n i o n e s a q u i e x p r e s a d a s p e r t e n e c e n a 10s a u t o r e s .
n o a1 p r o v e e d o r d e a c c e s o a I n t e r n e t .

Sin caer e n 10s extremos, utilice tamaiios d e fuente relativos para presentar texto e n un tamaiio
diferente a1 del texto normal; para enfatizar una palabra o frase, por ejemplo (figura 4-16):
<P>
AsegGrese d e f ir m a r y f e c h a r 1 a f o r m a < f o n t s i z e = + l > s i e m p r e < / f o n t >
4.6 Manejo defuentes complementarfas 83

2 Archivo Edicion Uer Ir Marcadores O~ciones Directorio Uentana

Figura 4-15. Utillce lafirente mcispequeiia para textofljo.

6 flrchivo Ediclon Uer I r Marcadores Opciones Directorlo Uentana

- y
-v-- - ----
--- _ - Netscape: Como destacar una frase -=--_----+?=m'

Utflicelos tamafios defuente relativospara mejorar el texto en Nuuigator.

Si el cambio de tanlano relativo da como resultado una fuente mayor a 7, el navegador utiliza
el tamaiio 7. De igual forma, 10s tarnaiios d e fuente menores a 1 se presentan como 1

Observe q u e al especificar size=+l o size=-l se obtiene el mismo efecto que <big> y

<ma1l > , respectivamente. No obstante, 10s cambios relativos al tamaiio d e fuente e n una
anidaci6n n o son acumulativos como e n el caso d e las etiquetas alternativas. Cada etiqueta
< f o n t > es relativa a1 tamaiio d e fuente base, n o a1 tamaiio d e fuente e n uso. [*big*,
4.5.21. Por ejemplo (figura 4-17):
<P'
El f antasma g i m i 6 : "oo<font s i ze=+l>oo<font s i ze=+2>oo<font s i ze=+3>oo</font>oo</
font>oo</font>oo."
No e s lo mismo si lo comparamos con la etiqueta <big>, con la cual se incre~nentael tamario
un nivel conforme se anidan las etiquetas.

Flguru 4-1 7. Tamulios relativos defuente acumulados.

84 Capftulo 4: Fundamentos de texto

4.63.2 El atributo de color

El atributo c o l o r d e la etiqueta < f o n t > establece el color del texto que Csta contiene. El
valor del atributo puede ser expresado d e dos formas: como componentes d e rojo (red),
verde (green) y azul (blue) (RGB) del color deseado, o como un nombre d e color estindar,
e n inglCs. Se recomienda encerrarlo entre comillas, pero n o es necesario.
El valor d e color RGB, indicado por un signo de ndmero (#I precedente, es un ntimero
hexadecimal d e seis digitos. Los primeros dos son el componente rojo, d e 00 (no rojo) a FF
(rojo intenso). De igual forma, 10s siguientes dos digitos corresponden a1 componente verde
y 10s tiltimos dos a1 azul. Negro es la ausencia d e color, #000000; blanco es todos 10s colores,
#FFFFFF.
Por ejemplo, para crear texto e n amarillo puede utilizar 10s siguientes valores:
i Aquf viene e l < f o n t c o l o r = ~ ~ # F F F F 0 0 " ~ s o l ~ / f o n t ~ !

De forma opcional, puede establecer el color de la fuente con cualquiera d e 10s estindares
(en inglCs) de color. Revise el apCndice F para ver una lista de 10s m i s comunes. Por
ejemplo, podria obtener el mismo resultado del ejemplo anterior con el siguiente c6digo:
i A q u i viene e l < f o n t color=yellow~sol~/font~!

4.633 AtrZbutoface
Internet Explorer y Navigator le permiten cambiar el estilo de la fuente e n un fragment0 d e
texto con el atributo f a c e de la etiqueta <font>.*
El valor entrecomillado de f a c e es uno o mis nombres d e fuente desplegados y separados
por comas.
El tip0 de fuente mostrada por el navegador depende de las fuentes disponibles e n el
sistema del usuario. El navegador analiza 10s nombres de las fuentes, uno tras otro, hasta
que identifica el que corresponde con la fuente soportada por el sistema del usuario. Si
ninguna corresponde, el texto utiliza el estilo de fuente predeterminado por el usuario en
sus preferencias del navegador. Por ejemplo:
Este t e x t o aparece en l a fuente predeterminada. Aunque
< f o n t face="Braggadocio. Machine. Zapf Dingbatsn>
s d l o e l c i e l o sabe</font>
qu6 fuente es esta.

Si el usuario de Internet Explorer tiene la fuente Braggadocio, Machine, o n o tiene ninguna

de Cstas e n su sistema, podri mostrar el mensaje "s61o el cielo sabe" en el estilo d e la fuente

' Sin duda esto es un error para 10s puristas de HTML; para el hPbil usuario que por fin control6 su navegador, esto
es extraordinario. Forma antes que funcibn; apariencia antes que contenido, iQu6 sigue? iAnuncios en video que
no puede detener?
predeterminada. De otra manera, el mensaje se perderi porque la fuente Zapf Dingbats
contiene simbolos, no letras. Por supuesto, esta opci6n tambien es vilida; puede suponer
que el mensaje es un secret0 codificado con simbolos.

4.7 DiseiZo y espaciado precis0

A pesar de las hojas de estilo de HTML, el concept0 original del lenguaje es especificar
el contenido de un documento sin indicar formato; delinear la estmctura y semintica de
un documento, n o c6mo se presentari a1 usuario. Por lo general, debe dejar a1 navegador
10s detalles de presentacibn, como la distribuci6n del texto, espaciado entre lineas y carac-
teres, etcetera. De esa forma, el contenido del documento -su rica informacibn, no
su buena apariencia- es lo que importa. Cuando importe mis la apariencia, como en
el caso d e anuncios comerciales, revise las hojas de estilo de control de disefio (consulte el
capitulo 9).
Dicho lo anterior, hay veces que si tiene sentido intermmpir de forrna explicita el formateo
d e texto normal. Ademis, e n la actualidad HTML es el unico lenguaje del World Wide Web.
Y, claramente, la publicidad y otras formas de documentos de HTML de corta vida y de
forrna sobre contenido necesitan cierta clase de control sobre el formato. Somos rigidos, no
faniticos.

4.71 Etiqueta <br>

La etiqu.eta <br> intermmpe la continuidad de una linea normal y el acomodo de palabras
d e pirrafos en un documento de HTML. No tiene etiqueta de fin, s61o marca el punto donde
el flujo debe comenzar una nueva linea hacia el margen izquierdo y continuar de forma
normal.

<br>
Funcion:
Inserta un corte de linea en el flujo de texto
A tributos:
CLEAR
Etiqueta de fin:
Ninguna
Contiene:
Nada
Utilizada en:
Texto
86 Capiculo 4: Fundamentos de texto

Este efecto es litil a1 dar formato a un texto convencional con cortes d e linea fijos; digamos,
direcciones, letras d e canciones o poesia. Observe, por ejemplo, 10s cortes e n las letras de
las canciones al mostrar e n Navigator el siguiente fragmento d e c6digo:
<h3>
C i e l i to 1 indo</h3>
<P>
Ese lunar que tienes<br>
c i e l i t o lindo<br>
junto a l a boca<br>
no se l o des a nadie.
</P>
El resultado se muestra e n la figura 4-18.

t Rrchiuo Edicion Uer Ir Marcadores Opciones Directorio Uentana

Ese lunar que tienes

fl+&?47 Jh%7
junto a la boca
no se lo des a nadie.

Figura 4-18. Utiltce en letras de canctones 10s cortes de linea, <br>.

TambiCn observe c6mo la etiqueta <br> solo hace que el texto comience e n una linea
nueva, mientras el navegador, al encontrar la etiqueta <p>, por lo general inserta cierto
espacio vertical entre piirrafos adyacentes. rep*, 4.1.21

4.71.1 Atributo clear

Por lo general, la etiqueta <br> indica al navegador que detenga d e inmediato el flujo de
texto y lo ajuste a1 margen izquierdo de la siguiente linea o al lado derecho de una imagen
o tabla, y que lo alinee a la izquierda. Algunas veces usted prefiere que el flujo reinicie
debajo d e una tabla o imagen que bloquean 10s msrgenes izquierdo o derecho.
HTML 3.2 proporciona esa funci6n con el atributo c l e a r de la etiqueta <br>. Puede tener
uno d e 10s tres siguientes valores: 1e f t (izquierda), right (derecha) u a1 1 (todo), cada uno
relacionado con uno o ambos mirgenes. Cuando el margen especificado, o ambos, est-5
libre d e imiigenes, el navegador reinicia el flujo de texto.
La figura 4-19 ilustra 10s efectos del atributo c l e a r cuando Navigator despliega el siguiente
fragmento d e c6digo de HTML:
 cimg src="http:kumquat.gif" a1 i g n = l e f t >
Este t e x t o se debe acomodar alrededor de l a imagen, fluyendo
e n t r e l a imagen y e l margen derecho del documento.
cbr clear=left>
Este t e x t o tambien se d i s t r i b u y e , per0 queda debajo de l a imagen, extendiendose
por todo e l ancho de l a pagina. Habra espacio en blanco a r r i b a de e s t e t e x t o y
a l a derecha de l a imagen.

Este kxto sa debe acomodar alrededor de la magen,

fluyendo entre ella y el m g e n derecho del docurnento.

Este tambien se distribuye, pero quda debajo de la imagen, exkndi81xIose por

todo el ancb de In pfgina Habr:d espacio en blmo arrih de esk texto y a la derecha
de la i-n.

Figura 4-19. Con el att.rbuto clear elude imdgenes antes de reinicim- elJlujo de texto despuB
de la etiqueta <br>.

Las im5genes e n linea son s610 eso, casi siempre e n linea junto con el texto, pero por lo
general s610 una linea de texto. Las lineas adicionales fluyen debajo de la imagen a menos
que Csta se alinee mediante 10s valores d e atributo r i g h t o l e f t d e la etiqueta <img> (de
manera similar a <table>). Asi, el atributo c l e a r de la etiqueta <br> s61o funciona en
combinaci6n con las im5genes o tablas alineadas a la derecha o a la izquierda. [alineaci6n
de imzigenes, 5.2.6.41 [allneaci6n de tabla, 11.2.1.11
El siguiente fragment0 de cddigo muestra c6mo utilizar la etiqueta <br> y su atributo c l e a r ,
asi como 10s atributos d e alineaci6n d e la etiqueta <img> para colocar una descripci6n justo
arriba, centrada a la derecha y debajo de una imagen alineada al margen izquierdo de la
ventana del navegador:
Las e t i q u e t a s de p i r r a f o separan y dan espacio a1 t e x t o siguiendo e l f l u j o
de 1as d e s c r i pciones.
<P>
Esta es l a d e s c r i p c i b n en l a p a r t e superior de l a imagen.
<br>
<img src="kumquat.gi f " a1 ign=absmiddle>
Este p a r r a f o queda centrado a l a derecha.
< b r c l ear=l e f t >
Esta d e s c r i p c i b n debe aparecer debajo de l a imagen.
<P>
Y e l t e x t o continGa.. .
88 CaiMulo 4 Fundamentas de texto

La figura 4-20 ilustra el resultado d e este c6digo.

TambiCn deberia incluir una etiqueta <br cl ear=all > en seguida de la etiqueta 4mg> o de
la tabla que estk al final de una seccion en su documento. De esta manera asegura que el
texto de secciones subsecuentes no se distribuya hacia arriba y contra esa imagen, confun-
diendo al lector. [<img*, 5.2.61

& Rrchiuo Edicion Uer tr Marcadores Oociones Oirectorio Uentana

Esh d&riFi6n debe aparecer dehjo de la irnagen

Y el texb continin...

Figura 4-20. Descripctones colocadas en la parte superiol; cenrro a la derechn y debajo de

una {magen.

4.7.2 Etiqueta <nobr>

Es posible que e n algdn momento tenga una frase que no desee que aparezca seccionada
en la ventana del navegador del usuario, aunque eso implique que el texto s e extienda por
la region no visible de la ventana. Los comandos de la computadora son buenos ejemplos.
Por lo comrin, el usuario ingresa un comando -incluso algunos de mls de una palabra-
en una linea independiente. Debido a que no puede predecir exactamente cuantas pala-
bras se acomodaran dentro de la ventana, la secuencia de palabras de comando basada en
HTML puede terminar seccion5ndose en una o mls lineas de texto. La sintaxis de 10s
comandos es lo suficientemente confusa como para complicarla m l s a1 presentarlos e n dos
lineas.
Con el esdndar de HTML, la forma de asegurar quk frases de texto permanezcan intactas a1
desplegarse en el navegador es encerrar esos segmentos entre la etiqueta <pre>y darle formato
manualmente. Esto es aceptable y casi universal para todos 10s navegadores. Sin embargo, <pre>
 o espaciado pmciso
4.7 ~ k e r f y 89

altera la fuente para desplegar texto normal; adem5s, 10s cortes de linea definidos denuo de la
etiqueta <pre> no siempre se presentan de forma corrects. [<pre>. 4.7.51

<nobr> 0
Funcion:
Crea una regi6n de texto que no se puede seccionar en dos lineas o m5s
A tributes:
Ninguno
Etiqueta de fin:
</nobr>; siempre se utiliza
Contiene:
Texto
Utilizada en:
Texto

Los navegadores modernos ofrecen la etiqueta <nobr> como alternativa a la etiqueta <pre>,
de manera que pueda estar seguro de que el texto indicado e n ella permanezca intact0 e n
una sola linea mientras presente un estilo de texto normal. El efecto es hacer que el navegador
trate a1 contenido d e la etiqueta como si fuera una sola palabra no seccionable. El contenido
de la etiqueta mantiene el estilo de fuente en uso, aunque tambiCn permite czmbiarlo.
Aqui vemos la etiqueta <nobr> en acci6n con nuestro ejemplo de comandos para un docu-
mento de HTML:
Cuando se lo solici te la computadora, ingrese
<nobr>
<tt>find . -nombre \*.html -exec rm \ I \ ) \;. </tt>.
</nobr>
Despues de unos momentos, la carga en su servidor comenzara a disminuir
y a1 final descendera hasta cero.
Observe que en el c6digo y su desplegado (figura 4-21) hemos incluido la etiqueta especial
<tt> dentro de la etiqueta <nobr>. Si el texto delimitado con <nobr> no puede caber e n una
linea de texto parcialmente llena, el navegador preceder5 con un corte de linea, como se
muestra e n la figura. Asi, el segment0 <nobr> puede extenderse m b a115 del extremo
derecho de la ventana. [*tt>,4.5.101
La etiqueta <nobr> no suspende el proceso normal del navegador de usar linea continua;
sigue recolectando e insertando im5genes y -lo crea o no-- respeta cortes de linea forza-
dos, ocasionados por las etiquetas <br> y <p>, por ejemplo. La dnica acci6n de la etiqueta
<nobr> es suprimir un corte de linea autom5tico cuando la linea llegue a1 margen derecho.
Puede pensar tambiCn que esta etiqueta es dtil s610 para soportar cortes de linea para frases,
no para una secuencia de caracteres sin espacios que puedan exceder las fronteras de la
90 C a p f l u b 4: Fundamentos de texto

k Archiuo Edicion Uer Ir Marcadores Oociones Directorio Uentana

Cuando se lo solicite la computadora, ingrese

buscar . -nombrs \ * . html -exec rm \ ( t i i;. . Desp~ s m o s mementos,
~ 6 de
f..
1ia
---- -- --- ---AS-- x- A:--:---:- - -'I
curgo1 en su serwuur uummcurn a ursnunwr v zu find descenderd hash
cero.

Ijigum 4-21. La extensldn <nobr> elirninrr el acoruodo automcitico de texto.

ventana del navegador. Los navegadores actuales no separan con guiones d e forma automa-
tics las palabras, aunque qumi lo hagan alglin dia. En verdad tiene sentido proteger con la
etiqueta <nobr> cualquier secuencia d e caracteres susceptible a c o r k

4.7.3 Etiqueta <wbr>

La etiqueta <wbr> es el grado d e calidad del disefio del texto e n HTML. Utilizada con la
etiqueta < n o b r > sugiere a1 navegador cuAndo insertar un cor-te de linea e n una secuencia d e
texto de otro mod0 inseparable. A diferencia d e la etiqueta <br>, q u e siempre genera un
corte d e linea incluso dentro d e un seginento etiquetado con <nobr>, la etiqueta <wbr>
funciona sGlo cuando s e coloca dentro d e un segment0 d e contenido etiquetado con <nobr>
y ocasiona un corre d e linea sBlo si la linea acrual ya hubiera rebasado 10s limites d e 10s
m5rgenes d e la ventana del navegador.

<wbr>m 0
Funcion:
Define un punto d e cor-te d e linea potencial si se necesitara
Atributos:
Ninguno
Etiqueta de fin:
Ninguna
Contiene:
Nada
Utilizada en:
Texto
<wbr> puede parecerle un tanto esoterica, pero no inadecuada. Quiz.2~e n ocasiones desee
asegurar q u e partes d e su documento aparezcan e n una linea independiente, pero no desea
sobrepasar 10s limites d e la ventana del navegador y hacer que 10s lectores utilicen la barra
d e desplazamiento solo para leer su elaborada prosa. Si inserta la etiqueta <wbr> d e forma
apropiada e n la secuencia sin cortes, permite que el navegador sea amable y seccione el
texto e n lineas rnis manejables:
=P'
<nobr>
Esta es una secuencia muy extensa de texto que s e
fuerza a aparecer en una sola l i n e a , aunque hacerlo ocasione
<wbr>
que el navegador extienda l a ventana de documento mas a1 l a del tamatio u t i l izado
por l a ventana, y el pobre usuario deba desplazarse a l a derecha para l e e r toda
l a linea.
-=wbr>
c/nobr>
Notara e n la figura 4-22 q u e ambas etiquetas <wbr> tienen efecto. Al incrementar el tamano
horizontal d e la ventana o reducir la fuente, puede acomodar todo el segment0 antes d e la
primera aparici6n d e la etiqueta <wbr> e n la ventana del navegador. En ese caso, s6lo tendri
efecto la segunda etiqueta <wbr>; el texto restante podria extenderse m i s allii d e 10s mrirge-
nes d e la ventana.
t

w Rrchiiro E ~ I ~ I O I I(let Ir Marcadores Opclones Oirector~o Uentana

-ITG - Netscape:
?-= Texto a todo lo largo de la uentana < w b n =?
3
I-

r
El El
Esh es una secuencia may exlensa de texfo que se fuerza a aparecer en ana sola l!
sue el navenador exlienda la v e n b a de documento m&sall&del tamafio utilizado

Figurn 4-22. Generosos cortex de linea con cwbr>.

4.7.4 Mejores reglas para cortes de lfnea

A diferencia d e la mayoria d e 10s navegadores, y para su credito, Navigator e Internet Explorer
n o consideran q u e las etiquetas Sean una buena oportunidad para hacer cortes d e linea. Imagi-
ne las desafortunadas consecuencias del desplegado de su documento si, at rnostrar el siguiente
segrnento d e c6dig0, el navegador coloca la coma adyacente a "du" o el punto al lado d e la
palabra "df' e n una linea independiente. Navigator e Internet Explorer n o harin esto.
Asegirese de t e c l e a r c t t > d u c / t t > , no < t t > d f < / t t > .
4.7.5 Etiqueta Cpre>
La etiqueta <pre> y su requerida etiqueta de fin (</pre>) definen un segmento dentro del
cual el navegador presenta texto exactamente en el tip0 d e letra y espaciado de linea
definido en el documento fuente d e HTML. Desactiva el acomodo normal de palabras
y rellenado d e pirrafos, y seiiala un espaciamiento diferente entre caracteres. El navega-
dor despliega todo el texto entre las etiquetas <pre> y </pre> en una fuente monoespa-
ciada.

Funcion:
Presenta un bloque de texto sin formato alguno
Atributos:
CLASS 0
STYLE la 0
WIDTH
Etiqueta de fin:
</pre>; nunca se omite
Contiene:
Contenido
Utilizada en:
Bloques

Quienes crean paginas con HTML utilizan con miis frecuencia la etiqueta de formato <pre>
cuando deben mantener la integridad de columnas y filas de caracteres; por ejemplo, en tablas
de cantidades que deben alinearse correctamente. Otra aplicaci6n de <pre> consiste en dejar
un segmento e n blanco adicional -una serie de lineas en blanco- en el desplegado del
documento, quiz%para separar con claridad secciones de contenido o para ocultar temporal-
mente una parte del documento cuando se carga y presenta por primera vez en el navegador.
Los caracteres de tabulador tienen el efecto deseado en el bloque <pre>, con paradas de
tabulaci6n definidas cada ocho posiciones de cariicter. Sin embargo, no recomendamos su
uso, ya que las marcas de tabulaci6n no se implementan de manera consistente en 10s
diferentes navegadores. Utilice espacios para asegurar la correcta ubicaci6n horizontal del
texto e n fragmentos formateados con <pre>.
Un uso comdn d e la etiqueta <pre> es presentar c6digo fuente de programas, como en el
siguiente ejemplo:
<P>
E l programa en proceso es:
<pre>
main(int argc, char **argv)
 ( FILE *f;
int i ;
i f (argc != 2 )
f p r i n t f ( s t d e r r , "uso: %s &lt;archivo&gt;\n".
argv 1011 ;
<a href="http:proceso.c">proceso</a> (argv[1]) ;
e x i t (0) ;
1
</pre>
Mosaic muestra el resultado de la siguiente manera:

Figura 4-23. Utilice la etiqueta <pre>parapreseruar la fntegrfdad depkzs y columnus.

4.Z5.1 Contenidoposible

El texto dentro de un segment0 cpre> puede tener cambios d e estilo fisico y basado e n
contenido, junto con ligas, imageries y lineas horizontales. Cuando es posible, el navegador
debe senalar cambios d e estilo, con la restriccion de utilizar una fuente monoespaciada para
todo el bloque dentro de cpre>.
Las etiquetas que pueden ocasionar un corte d e phrrafo (las etiquetas de encabezados, <p>
y <address>, por ejemplo) no se deben utilizar en bloques dentro de <pre>. Algunos
navegadores interpretadn las etiquetas d e fin d e phrrafo como simples cortes de linea, pero
este comportamiento no es consistente en todos 10s navegadores.
Debido a que e n un bloque dentro de <pre> s e permiten las etiquetas de marcado de estilo,
entre otras, debe utilizar equivalentes d e entidad para 10s caracteres literales: & I t ; para <,
&gt; para > y &amp; para el ampersand.
94 Capftulo 4: Fundamentos de texto

Puede colocar etiquetas dentro del bloque <pre> como lo haria en cualquier otra parte de su
documento de HTML. Por ejemplo, estudie la referencia a la funci6n "proceso" del ejemplo
anterior, que contiene una liga (con la etiqueta <a>) a su archivo fuente, denominado
proceso. c.

4.7.5.2 Atributo de ancho

La etiqueta <pre> tiene un solo atributo opcional, width (ancho), que determina la cantidad
de caracteres que se deben colocar en una sola linea dentro del bloque <pre>. El navegador
puede utilizar este valor para seleccionar una fuente o su tamafio a fin de que se acomode
en la cantidad especial de caracteres en cada linea del bloque <pre>. Eso no significa que el
navegador acomoda y llena el texto a1 ancho especificado s61o extendiendose mas all5 de la
regi6n visible d e la ventana del navegador.
El atributo width es s610 una sugerencia para el navegador; puede que ajuste o no el
desplegado de la fuente al ancho especificado.

4.7.5.3 Atributos style y class

Aunque 10s navegadores por lo general despliegan contenido <pre> en un estilo definido, el
usuario puede cancelarlo y agregar efectos especiales; por ejemplo, una imagen de fondo,
a1 definir su propio estilo para la etiqueta. Esta nueva apariencia se puede aplicar a las
etiquetas <pre> utilizando cualquiera de 10s atributos s t y l e o class. [atributo style.
9.1.11 [atributo class, 9.2.41

4 . 7 6 Etiqueta <center>
Los efectos de la etiqueta <center> son obvios: contenido, incluyendo texto, griificos, ta-
blas, etcetera, se centra dentro d e la ventana del navegador. Para el texto, esto significa que
cada linea se centra individualmente despues de que el flujo se acomoda en la ventana. La
alineaci6n <center> mantiene su efecto hasta que se cancela con su respectiva etiqueta de
fin, </center>.
La modalidad d e centrado de texto linea por linea es comdn aunque primitiva, pues 10s
navegadores no intentan balancear un p5rrafo centrado u otros elementos relacionados a1
bloque, como 10s elementos de una lista. Asi que centre su texto con mesura. Los titulos son
buenos candidatos para ello; por lo general resulta dificil leer una lista centrada.
MPs all5 de esto, en raras ocasiones pondrP texto convencional centrado, except0 por algu-
na raz6n lirica, de mod0 que 10s lectores pueden reaccionar de forma negativa a largos
segmentos de prosa centrada en sus documentos. MPs bien, quienes crean paginas con
HTML utilizan con mas frecuencia la etiqueta <center> para centrar una tabla o imagen en
la ventana del navegador (no hay una alternativa de alineaci6n a1 centro para im5genes o
tablas en linea).
 <center>
Funcion:
Centra una secci6n de texto
Atributos:
Ninguno
Etiqueta de fin:
</center>; nunca se omite
Contiene:
Contenido de cuerpo
Utilizada en:
Bloqm

Debido a que 10s diferentes navegadores tendrin anchos de ventana variables, distinta
capacidad de resoluci6n, etcetera, tal vez quiera utilizar las etiquetas de extensi6n <nobr> y
<wbr> (descritas antes) para mantener intact0 su texto centrado y con buena apariencia. Por
ejemplo:
<center>
<nobr>
Copyright 1995 por QuatCo Enterprises.<wbr>
Todos 10s derechos reservados.
</nobr>
</center>
Las etiquetas <nobr> e n el ejemplo anterior ayudan a asegurar que el texto permanezca e n
una sola linea; la etiqueta <wbr> controla d6nde romper la linea si esta excediera el ancho
de la ventana del navegador.
El centrado tambien es 6til para crear encabezados de secci6n distintivos, aunque ahora
puede lograr el mismo efecto con el atributo a1 ign=center explicit0 e n la respectiva etique-
ta de encabezado. Tambien puede centrar texto utilizando a1 ign=center junto con las
etiquetas <di v> y <p>. En general, la etiqueta <center> se puede remplazar con su equiva-
lente <di v a1 i gn=center> o alguna similar, y se debe desalentar su uso. S61o se mantiene
e n HTML 3.2 por motivos hist6ricos y es probable que se elimine de las versiones posterio-
res del estsndar.

4.7.7 Etiqueta <listing>

La etiqueta <l i sting> es un elemento desaprobado e n HTML 3.2, lo que significa que se
desalienta su uso y es probable que desaparezca definitivamente e n versiones posteriores
del lenguaje. Aqui la incluimos por razones histdricas, ya que tiene el mismo efecto en
formateo de texto que la etiqueta <pre>, con un ancho especificado de 132 caracteres.
 Funcion:
Presenta un bloque de texto sin formato alguno
A tributes:
CLASS 0
rn 0
Etiqueta de fin:
</lis t ing>; nunca se omite
Contiene:
Texto literal
Utilizada en:
Bloque

La Onica diferencia entre <pre> y e l i s t i n g r es que no se permite ninguna otra etiqueta

dentro d e e l is t i n g > . De manera que no tiene que remplazar 10s caracteres <,> y & literales
con sus equivalentes e n un bloque que estC dentro de <1 isting>, como debe hacerlo e n un
bloque dentro de <pre>.
Debido a que la etiqueta <1 i s t i n g > es igual a la etiqueta <pre width=132> y debido a que
la Oltima versi6n del lenguaje no la soporta, le recomendamos que evite e l is t ing>.

4.78 Etiqueta <xmp>

A1 igual que la etiqueta <lis t i n g > , la etiqueta <xmp> es un elemento desaprobado e n HTML
3.2, y la incluimos aqui por razones hist6ricas.
La etiqueta <xmp> da formato a1 texto de la misma forma que la etiqueta <pre>; no tiene que
remplazar 10s caracteres <, > y & con sus equivalentes d e entidad e n un bloque encerrado
entre <xmp>. El nombre <xmp> es la abreviatura d e "ejemplo" (example);10s diseiiadores del
lenguaje tenian en mente que se utilizara esta etiqueta para dar formato a1 texto desplegado
originalmente e n configuraciones de 80 columnas. Debido a que este desplegado se ha
perdido junto con las pantallas verdes y 10s teletipos, y como el efecto d e una etiqueta
<xmp> es e n esencia el mismo que <pre width=80>, le recomendamos n o utilizar <xmp>;
puede desaparecer definitivamente e'n versiones posteriores de HTML.

4.79 Etiqueta <plaintext>

iCansado d e las etiquetas? Inserte una etiqueta < p l a i n t e x t > e n su document'o y 10s
navegadores lo trataran tal como lo escribi6, sin ningtin estilo. El texto aparecerfi e n una
 <xmp>
Funcion:
Presenta un bloque de texto sin formato alguno
Atributos:
CLASS 0
STYLE 0
Etiqueta de fin:
</xrnp>; nunca se omite
Contiene:
Texto literal
Utilizada en:
Bloque

tipografia monoespaciada sin ninglin otro formato, a menos q u e usted cambie

esto especificamente con un atributo d e estilo o d e clase. No hay etiqueta de fin para

<plaintext>
Funcion:
Presenta un bloque de texto sin formato alguno
A tributes:
Ninguno
Etiqueta de fin:
Ninguna
Contiene:
Texto literal
Utilizada en:
Bloque

La misi6n principal d e <pl a i ntext> es hacer documentos ASCII aptos para navegadores. En
10s albores del Web, esto podia ser litil, pero 10s navegadores actuales, que manejan docu-
mentos excepcionales y agradecen muy especialmente la codificaci6n de tipo MIME incrus-
tada, han suprimido esta etiqueta. Aqui se incluye por motivos de integridad, pero nosotros
desalentamos su uso.
98 Capftulo 4: Fundamentos de texto

4.8 Citas textuales

Un elernento cornlin en docurnentos convencionales es la cita textual, es decir, una extensa
copia de texto de otro documento. Tradicionalrnente, las citas breves se ponen entre corni-
Ilas, rnientras las textuales en pfirrafos independientes en el docurnento principal, por lo
general con indentacidn especial y algunas veces en cursivas, funciones que puede cambiar
rnediante definiciones de estilo o clase (consulte el capitulo 9).

4.8.1 Etiqueta <blockquote>

Todo el texto contenido entre las etiquetas <bl oc kquote> y </bl oc kquote> se separa del
texto normal del docurnento, por lo general con indentacidn con respecto a 10s rnargenes
izquierdo y derecho y, algunas veces, en cursivas. La presentacidn real varia entre navegadores,
por supuesto

<blockquote>
Funcion:
Presenta una cita textual
Atributos:
CLASS rn0
S-mLE rn 0
Etiqueta de fin:
</bl ockquote>; nunca se ornite
Contiene:
Contenido de cuerpo
Utilizada en:
Bloque

El estfindar de HTML permite cualquier etiqueta de estilo en pfirrafos encerrados por

<bl ockquote,, aunque algunos estilos basados en contenido y fisicos pueden entrar en
conflict0 con la fuente utilizada por el navegador para la cita textual. La prfictica revelara
estos pequefios inconvenientes.
Por lo general, la etiqueta <bl ockquote> se utiliza para separar citas extensas provenientes
de otras fuentes:
Actuamos de forma incorrecta a1 cambiar arbitrariamente la fecha del Festival del
kumquat. Ci tando las leyes que rigen a 1 a Organizaci6n de Cul tivadores de Kumquats:
<bl ockquote>
La fecha del Festival del Kumquat s61o se puede cambiar por
una mayoria de dos tercios en la votaci6n de la Membresia
General , suponiendo que estuviera presente un <strong>60 por ciento </strong>
de 1 os mi embros.
 </bl ockquotez
(El e n f a s i s es mio) Debido a que t a l qudrum no estaba presente.
e l voto es i n v a l i d o .

4.8.1.1 Atributos style y class

Aunque 10s navegadores por lo comdn despliegan el contenido de <bl ockquote> e n un
estilo predefinido, el usuario puede cancelarlo y aplicar efectos especiales; con una imagen
de fondo, por ejemplo, y definir su estilo propio para la etiqueta. Esta nueva apariencia
puede aplicarse a las etiquetas <bl ockquote> utilizando 10s atributos style y class. [atri-
but0 s t y l e , 9.1.11 [atributo c l a s s , 9.2.41

4.9 Direcciones
Las direcciones son un elemento muy comdn en documentos de texto y HTML proporciona
una etiqueta especial que diferencia las direcciones del resto del texto. Aunque esto puede
parecer un tanto extravagante -1as direcciones tienen tan pocas peculiaridades d e formato
que quiz5 no le parezca necesaria una etiqueta especial- es un ejemplo de que el conteni-
do, n o la forma, es el objetivo y prop6sito de HTML.
A1 definir texto que comprenda direcciones, el autor permite a1 navegador dar formato a este
texto e n una modalidad distinta, lo mismo que procesarlo de forma dtil para 10s usuarios.
TambiCn facilita el acceso a 10s lectores y extractores automatizados. Por ejemplo, un directo-
rio e n linea puede incluir direcciones que el navegador recolecta y coloca e n un documento
o tabla independiente, o las herramientas automatizadas pueden extraer direcciones de una
coleccidn de documentos para construir una base de datos de direcciones independiente.

4.9.1 Etiqueta <address>

La etiqueta <address> y su correspondiente y requerida etiqueta de fin (</address>) indi-
can a1 navegador que el texto delimitado por ellas es una direcci6n. El navegador puede dar
formato a1 texto d e mod0 distinto a1 resto del documento, o utilizar la direcci6n de manera
especial. TambiCn usted puede tener control sobre las propiedades de desplegado por
medio d e atributos de estilo y clase para esta etiqueta (consulte el capitulo 9).
El texto dentro de la etiqueta <address> puede tener cualquier elemento comdn en el
cuerpo d e un documento de HTML, excluyendo otra etiqueta <address>. Se permiten 10s
cambios de estilo, aunque pueden entrar en conflict0 con el estilo seleccionado por el
navegador para presentar el elemento de direcci6n.
Muchos, quiz5 todos, pensamos que 10s documentos de HTML deberian tener las direccio-
nes del autor incluidas en alguna parte conveniente, casi siempre a1 final. A1 menos la
direcci6n de correo electr6nico del autor o del webmaster junto con una liga a su pigina
principal, quedando opcionales las direcciones y ndmeros telef6nicos fisicos, que por lo
general no se incluyen por razones de privacia.
100 CapiMo 4: Fundamentos de texto

Funcion:
Define una direcci6n
A tributos:
CLASS 0
smE 0
Etiqueta de fin:
claddress; nunca se omite
Contiene:
Contenido de cuerpo
Utilizada en:
Contenido de direccibn

Por ejemplo, la direcci6n del administrador, conocido tambiCn como webmaster, responsa-
ble de la administraci6n d e documentos web comerciales comdnmente aparece e n 10s do-
cumentos fuente como sigue, incluyendo el protocolo especial mai 1 to:, que permite a 10s
usuarios activar herramientas del navegador para correo electr6nico:
<address>
<a href=I1mai1 to:admi n i s t r a d o r @ s e r v idor. com">Responsabl e</a><br>
McGraw-Hi 1 1 I n t e r a m e r i c a n a E d i t o r e s
Mexico. D.F.
</address>

La figura 4-24 muestra el resultado.

& Archiuo Edicihn Uer Ir Marcadores Opciones Oirectorio Uentana

-- v
Netscape: Ejemplo de etlqueta caddress, -- ---=-~d

Figura 4-24. La ettqueta <address> en accidn

Ya sea mesurado o extenso, asegdrese de que cada documento que Cree tenga una direc-
ci6n asociada. Si es dtil crear un documento y colocarlo en el Web, tambiCn lo es aceptar
comentarios y consultas de 10s lectores. Los documentos an6nimos pueden ser de poca
credibilidad para 10s lectores del Web.
4.10 C o d i f i a d d n de caractems especiales 101

4.9.1.1 Atributos styley c k s s

Aunque 10s navegadores por lo general despliegan contenido encerrado por <address> en
un estilo definido, el usuario puede modificarlo y agregar efectos especiales; por ejemplo,
poner una imagen d e fondo, a1 definir su propio estilo para la etiqueta. Esta nueva aparien-
cia se puede aplicar a las etiquetas <address> mediante alguno d e 10s atributos s t y l e o
cl ass. [atributo sty1 e. 9.1.11 [atributo class, 9.2.41

4.10 Codzfiicacidn de caracteres especiales

En su mayoria, el navegador 10s muestra tal como son 10s caracteres dentro d e documentos
d e HTML que no son parte d e una etiqueta. Sin embargo, algunos caracteres tienen un
significado especial y no se presentan d e forma directa; otros no se pueden introducir en el
documento fuente desde un teclado convencional. Los caracteres especiales necesitan una
codificaci6n especial, ya sea d e nombre d e caricter o numkrico, para incluirlos e n docu-
mentos d e HTML.

4.10.1 Caracteres especiales de HTML

Pareceria muy obvia la comprensi6n d e caracteres despuCs del estudio y ejemplos que
condujeron a esta secci6n; sin embargo, hay tres caracteres especiales que tienen un signi-
ficado muy especial en 10s documentos d e HTML: el signo menor que (<), el signo mayor
que (>) y el ampersand (&). Estos caracteres delimitan etiquetas y referencias d e caricter
especiales, por lo que pueden confundir a1 navegador si no se escriben con la sintaxis
adecuada. Asi que tendri que olvidarse d e incluirlos literalmente en sus documentos d e
HTML. La dnica excepci6n es cuando estos caracteres aparecen dentro d e las etiquetas
<1i s t i ng> y <xmp>, donde si pueden aparecer literalmente.
De igual forma, debe utilizar una codificaci6n especial para incluir 10s caracteres de comillas
e n una cadena d e cita textual, o cuando desee incluir un carkter especial que no estC e n su
teclado pero que sea parte del conjunto d e caracteres I S 0 Latin-1 implementado y soporta-
d o por la mayoria de 10s navegadores.

4.10.2 Insercidn de caracteres especiales

Para incluir un cadcter especial en su documento d e HTML, puede encerrar su nombre
d e entidad estindar o un signo d e ndmero (#) y su posici6n numCrica en el conjunto de
caracteres estsndar latino 1 (Latin-1)' precedido por un ampersand y un punto y coma a1

El conocido conjunto de caracteres ASCII es un subconjunto del mis amplio conjunto de caracteres Latin-1.
Desarrollado por la reconocida Organizaci6n Intemacional de Normas (ISO, International Organization for
Standardization), el conjunto Latin-1 es una lista de todas las letras, nljmeros, signos de puntuaci6n, etcetera,
comljnmente utilizados por 10s escritores de lenguas occidentales, organizado por nljmeros y codificado con
nombres especiales. El apendice E, contiene el conjunto y codificacidn completa de Latin-1.
102 Capintb 4: Fundamentos de texto

final, sin espacio entre ellos. Sugerencia: esta es una explicaci6n larga para algo que en
realidad e s sencillo, como se ilustra en el siguiente ejemplo, que muestra c6mo incluir un
signo mayor que en un fragment0 d e c6digo utilizando el nombre de entidad del caricter.
TambiCn muestra c6mo incluir un signo mayor que en su texto de HTML haciendo referen-
cia a su valor numerico en Latin-1.
s i a &gt; b, entonces t = 0
s i a &X62; b, entonces t = 0

Ambos ejemplos dan como resultado:

s i a > b, entonces t = 0

El conjunto completo d e nombres y valores de entidad de caricter viene e n el apkndice E.

Podria escribir un documento d e HTML cornpleto utilizando la codificaci6n d e caracteres,
pero no seria coherente ni practico.
 En este capfhzkx
Lfneas borizontaies
Cdtffo insertar i d g e n e s
en sus documentos
Colores del documento
e inuSgenei
Audio dej
Bxto anfn
Olroconter Lfneas horizontales,
Mds alld de HTML
imdgenesy multimedia

Aunque el cuerpo d e la mayoria d e 10s documentos d e HTML e s el texto, un complemento

apropiado de lineas horizontales, imigenes y otros elementos multimedia 10s hacen m9s
incitantes y atractivos. Estas caracteristicas no son s610 accesorios gratuitos para que luzcan
bien las piginas. Los elementos multimedia dan vida a 10s documentos de HTML, proporcio-
nindoles una dimensi6n d e informaci6n importante a menudo no disponible en otros me-
dios, como el impreso. En este capitulo describimos e n detalle la forma de insertar elemen-
tos multimedia en 10s documentos d e HTML cuando sea adecuado; tambiCn le invitamos a
no usarlos indiscriminadamente.

5.I Lfneas horizontales

Las lineas horizontales (o "reglas") le brindan una forma d e separar visualmente secciones
d e un documento. Asi, da a 10s lectores una indicaci6n visual limpia y coherente d e que ha
terminado una parte del documento y comienza otra. Las lineas horizontales establecen de
forma efectiva pequeiias secciones de texto, delimitan encabezados y pies d e documento y
crean un impact0 visual para 10s encabezados del documento.

5.1.1 Etiqueta <hr>

La etiqueta <hr> indica al navegador que inserte una linea horizontal a lo largo de su
ventana. A1 igual que la etiqueta <br>, <hr> fuerza un corte d e linea sencillo, aunque a
diferencia de <br>, <hr> hace que la alineacidn del parrafo regrese a la predeterminada
(izquierda). El navegador coloca la linea inmediatamente debajo de la linea actual y el texto
contin6a debajo de ella. [cbr*, 4.7.11
La interpretaci6n d e una linea horizontal queda a discreci6n del navegador. Por lo general,
se extiende a lo largo d e todo el documento. Los navegadores gdficos pueden presentar la
linea con un efecto d e cincelado o modelado; 10s navegadores basados e n caracteres utili-
zan con mis frecuencia guiones normales o d e subrayado para crear la linea.
104 Capaulo 5: Lfneas borizontales, tmdgenes y muWmedia

<hr>
Funcion:
Rompe el flujo de texto e inserta una linea horizontal
A tributes:
ALIGN
CLASS 0
COLOR 0
NOSHADE
Sl-nE El 0
SIZE
WIDTH
Etiqueta de fin:
Ninguna
Contiene:
Nada
Utilizada en:
Contenido de cuerpo

Rrchivo Edicion Uer I r Marcadores Opciones Directorio Uentana

Esta otro aparece inmediatmnte debap.

I
Y este tendrri un espacio antes de la lima.
I
Y p r intim, este t e x b tiem un espacio despubs de la lim.

Ftgura 5-1.Las ettquetas depdrrafo le dun a1 texto u n espacto adtcional.

No hay espacio adicional por encirna ni debajo d e una linea horizontal. Si desea ponerla
lejos del texto que la rodea, debe colocar explicitamente la linea en un nuevo phrrafo,
seguido por otro que contenga el texto subsecuente. Por ejemplo, observe el espaciado que
hay antes y despuCs d e las lineas horizontales en el siguiente texto fuente mostrado en la
figura 5-1.
5.1 Lfneas borlzontales 105

Este texto aparece encima de la llnea.

<hr>
Este otro aparece inmediatamente debajo.
<PS
Y este tendra un espacio antes de la llnea.
<P=-
<hr>
<PS
Y este texto tiene un espacio despues de la lfnea.
Es necesaria una etiqueta de pamfo despues de la linea si desea que el contenido aparezca
debajo de ella, alineado en cualquier estilo que no sea el predeterminado a la izquierda.

5.1.1.1 Atributo sire

Por lo general, 10s navegadores presentan las lineas horizontales con un grosor de tres
pixeles* y con una apariencia de cincelado e n tercera dimensibn, dando el efecto de una
incisi6n en la p5gina. Puede engrosarlas mediante el atributo size. El valor requerido es el
grosor, en pixeles. En la figura 5-2 puede ver el efecto de este atributo, como resultado del
siguiente c6digo fuente:
<P>
Este texto de documento convenci onal ,
va seguido por una llnea normal con un grosor de tres pixeles.
<hr>
Las siguientes tres lfneas tienen un grosor de 12, 36 y 72 pixeles, respectivamente.
<hr size=12>
<hr si ze=36>
<hr si ze=72>

5.1.1.2 Atributo para cancelar sombras

Tal vez quiera que una linea horizontal especifica no aparezca en tercera dimensi6n sin0 en
un solo plano, o tal vez en dos dimensiones. Simplemente agregue el atributo noshade (no
requiere algdn valor) a la etiqueta <hr> para eliminar la sombra. En la figura 5-3 puede
observar la diferente apariencia de la linea "normal" en tercera dimensi6n comparada con
una sin sombra (noshade) en dos dimensiones. (Tambien hemos exagerado el grosor de la
linea para que sea evidente el efecto, como lo puede observar en el fragment0 de c6digo.)

5.1.1.3 Atributo widht

La linea predeterminada aparece a lo largo de toda la ventana del navegador. Puede acortarla
o alargarla con el atributo width (ancho), para crear lineas que tengan un ancho de un ndmero

Un pixel es uno de 10s muchos puntos mindsculos que conforman el desplegado de su monitor. Aunque 10s
tamafios de monitores son variados, una buena regla general es que un pixel es igual a un punto en un monitor
de 75 puntos por pulgada. Un punto es una unidad de medida utilizada en la impresi6n, aproximadamente igual
a 1/72 de pulgada (para ser exacto, hay 72.27 puntos en una pulgada). La tipografia comljnmente utilizada por 10s
diferentes navegadores es casi siempre de 12 puntos, dando seis lineas de texto por pulgada.
 Este text0 de documento conventional, va seguido por urn linea normal con un grosor
de ires pixeles
, -- -- -- - . . . - -. --
LS siguientes tres lineas benen un grosor de 12, 36 y 72 pixeles, respetttvamente

Figura 5-2.Navigator le permite modflcar el grosor de las h e a s horizontales.

?m -
ii Archiuo Edicion Uer I r Marcadores Opciones Directorio Uentana
Netscape: Rtributo <noshade> para cancelar sombras E Z Z m f i C
I t rr I,. 1 -

Figura 5-3.La opcldn de una linea en tercera dimensldn comparada con una no
sombreada en dos dimenstones.

absoluto de pixeles o extenderse a un cierto porcentaje del texto actual. La rnayoria de 10s
navegadores centran d e forrna automltica las lineas d e un ancho parcial; vea el atributo a1 i gn
(mls adelante) para justificar las lineas horizontales a la izquierda o a la derecha.
Estos son algunos ejernplos de lineas horizontales de un ancho especifico (figura 5-4):
Las s i g u i e n t e s l i n e a s t i e n e n un l a r g o de 40 y 320 p i x e l e s respectivamente,
s i n importar e l ancho de l a ventana del navegador
<hr w i dth=40>
<hr wi dth=320>
Cas s i g u i e n t e s dos l f n e a s se extenderan siempre a un
10 y 75 por c i e n t o de l a ventana de navegador, independientemente de su tamatio:
<hr width="lO%">
<hr width="75%">
5.1 Lfneas borlrontales 107

w tlrchiuo Edicion Uer I r Marcadores Opciones Directorio Uentana

Eli- EW=-=
Netscape: Langitud especiflca dr lineas horizontales

Lw siguientes lineas tienen un largo de 40 y 320 pixeles respectiwnte, sin importar

51 ancho de la ventana del navegador
-- -

Las siguientes dos lineas se extenderh siempre a un 10 y 75 por ciento de la ventana

ie navegador, independientemente de su tanmfio
,--- -

Ftgura 5-4. Comparacidn de anchos absolutes y refatfvos.

Observe tambiCn que el valor relativo (porcentaje) del atributo w i d t h va entre comillas; no
asi el valor e n pixeles, absoluto (entero). De hecho, las comillas no son estrictamente
necesarias, pero como el simbolo d e porcentaje por lo general significa que sigue un caric-
ter encerrado, n o colocar entre comillas el porcentaje d e ancho puede confundir a otros
navegadores y daiiar una pane en la presentaci6n del documento.
En general, no es adecuado especificar el ancho d e una linea como una cantidad exacta d e
pixeles. Las ventanas d e 10s navegadores tienen un tamaiio variado y lo que puede ser una
linea pequefia e n un navegador puede resultar demasiado larga e n otra. Por esta raz6n,
recomendamos especificar el ancho d e la linea en porcentaje del tamaiio d e la ventana. De
esta manem, cuando el tamaiio d e la ventana del navegador cambie, las lineas conservarin
su mismo tamaiio relativo.

5.1.1.4 Atributo align

El atributo a1 ign de una linea horizontal puede tener uno d e tres siguientes valores: 1e f t
(izquierda), c e n t e r (centro) o r i g h t (derecha). Las lineas que tengan un ancho menor a1
flujo d e texto actual se ubicarin e n una posici6n con relaci6n a 10s mirgenes d e la ventana
como corresponds. La alineaci6n predeterminada es a1 centro.
Una alineaci6n d e linea diferente crea vistosos divisores d e secci6n. Por ejemplo, el siguien-
te c6digo alterna una linea con un 35 por ciento de ancho y alineaciones a la derecha, a1
centro y a la izquierda d e 10s mirgenes d e la ventana (figura 5-5).
<hr width="35%" align=right>
<h3>Sugerenci as para empacar frutasc/h3>
 ...
<hr width=I135%" a1 i g n = r i g h t >
<h3>Proceso para jugo</h3>

Figura 5-5.Los d ~ ~ e n twlores

e s & alineacibn & lfneahorizontalforman divlsknes & secci6n,

Soportado unicamente por Internet Explorer, el atributo col o r le permite establecer el color
de la linea. Su valor es el nombre del color o una tripleta hexadecimal que define un
color especifico. Consulte el a p h d i c e F para ver una lista de nombres y valores d e color.
De forma predeterminada, una linea aparece con el mismo color d e fondo del documento,
con 10s extremos "cincelados" ligeramente m5s oscuros y claros. Cuando se especifica otro
color d e fondo, ya sea e n una hoja de estilo o con el atributo color, se pierde el efecto d e
tercera dimensi6n.

5.1.1.6 Atributos style y class

El atributo styl e d e la etiqueta <hr>crea un estilo especifico para la etiqueta, anulando
cualquier otro estilo anterior. El atributo class le permite aplicar un conjunto d e propieda-
des predefinido e n una clase para dicha etiqueta; su valor es el nombre d e esa clase.
[atributo styl e, 9.1.11 [atributo class, 9.2.41
5.1 Lfneas borlzontales 109

5 1.1.7 CombinacMn de 10s atributos de lfnea

Puede combinar las diferentes extensiones d e atributos d e linea sin importar su orden. Para
crear cuadros grandes, por ejemplo, combine 10s atributos size y width (figura 5-6):
<hr s i z e = X width="50%" a1 ign=center>

-L
m Rrchiuo Edici6n Uer I r Marcadores Opciones Directorio Uentana
E z -- - Netscape: combinacibn de atributos
&I - -
-

Ffgura5-6.Combfnacf6n& 10s atrlbutos & lfneapara crear efectos especfales.

De hecho, algunas combinaciones de 10s atributos de linea son necesarias, a1 i g n y width,

por ejemplo. a1 i gn solo pareciera n o tener efecto porque el ancho predeterminado de la
linea se acomoda a toda la ventana.

5.1.2 Uso de lfneaspara diuidir documentos

Las lineas horizontales proporcionan una gula de exploraci6n visual muy 6til para 10s lecto-
res. Para utilizar <hr> d e manera efectiva como divisor d e s e c c i h , determine primer0
cuantos niveles d e encabezados tendra su documento, as; como el tamaiio d e cada
subdocumento. DespuCs decida cual encabezado separara con una Ilnea.
Una linea horizontal tambiCn puede delimitar un documento por temas, separando la tabla
d e contenido del resto del texto, por decir algo. Utilice una linea tambien para separar el
cuerpo del documento del indice, bibliografia o lista d e figuras.
Los experimentados autores d e paginas de HTML utilizan, asimismo, lineas horizontales
para marcar el principio y fin d e una forma, lo cual e s especialmente ritil para formas
extensas que hagan a 10s usuarios desplazarse por la pagina para ver todos 10s campos. Al
marcar con consistencia el principio y fin de una forma con una Iinea, puede ayudar a 10s
usuarios a permanecer e n ella, asegurando que no dejadn sin llenar alguna parte por
descuido.

5.1.3 Uso de lfneas en encabezados y pies

Un enfoque d e fundamental estilo e n las familias de documentos de HTML e s tener una
apariencia y sentido consistente, incluyendo un encabezado y pie d e pagina estandar e n
cada documento. Por lo general, el encabezado contiene herramientas de navegaci6n que
ayudan a 10s usuarios a saltar con facilidad a secciones internas, asi como a documentos
110 Capftulo 5: Lfneas borlzontales, imdgenes y multimedia

relacionados e n la familia; el pie contiene informaci6n del autor y del documento, lo mismo
que mecanismos de retroalimentaciCin, como las ligas para enviar correo electr6nico a1
responsable del sitio.
Para asegurar que 10s encabezados y pies no excedan 10s limites del contenido del docu-
mento principal, considere utilizar lineas horizontales debajo del encabezado y arriba del
pie de pagina. Por ejemplo (figura 5-7):
<body>
Manual de cultivadores de Kumquats - Lineamientos de cultivo de temporal
<hr>
<hl>Lineamientos del cultivo de temporal</hl>
El cultivo de temporal de esta noble fruta varfa en las diferentes zonas
geograficas, como se muestra en el siguiente mapa:
<P>
<img src="pics/cul tivo-temporal .gif">
<P>
<hr>
<i>Proporcionado como un servicio pGblico por
<a href="retroalimentacibn.html">Amantes de 10s Kumquats de America</a></i>
Sea consistente a1 separar sus encabezados y pies mediante lineas, ya que esto ayudad a 10s
usuarios a localizar y concentrarse en el tema principal del documento.

5.2 Cdmo insertar imdgenes en sus

documentos
Una de las funciones miis atractivas de HTML es la capacidad d e incluir imiigenes en el texto
de un documento, ya sea como un elemento intrinseco del mismo (imageries en linea),
como documentos independientes especialmente seleccionados para descargarlos por me-
dio de ligas, o como fondo para el documento. Cuando se agregan de mod0 adecuado al
contenido del cuerpo, las imhgenes -iconos estlticos y animados, grabados, ilustraciones y
dibujos, etcetera- puede crear documentos miis atractivos, invitantes, de apariencia profe-
sional, informativos y flciles d e navegar. TambiCn puede habilitar una imagen de mod0 que
se convierta en un mapa de ligas. No obstante, cuando se utilizan en exceso, las im5genes
pueden provocar que el documento aparezca desordenado, confuso e inaccesible y, por lo
tanto, ampliar innecesariamente el tiempo para descargar sus piiginas.

5.2.1 Formatos de imagen

El esthndar de HTML no deterrnina un formato oficial para las im5genes. No obstante, 10s
navegadores populares soportan especificamente s61o ciertos formatos: GIF y JPEG, en
particular (vea las siguientes secciones para obtener detalles). La mayoria de 10s demls
formatos de multimedia requieren aplicaciones especiales que el usuario de cada navegador
debe obtener, instalar y operar con eficacia para ver 10s archivos especiales. Asi, no resulta
sorprendente que GIF y JPEG Sean 10s esthndares actuales de imiigenes en el Web.
 6 flrchiuo Edicion Uer Ir Marcadores Opciones Directorio Uentana

~
bqew Inicio I
Editar ~
&caqr h6p-e~ lrqmL Buscar Pat at. I ~
Lineamientos del eultivo de temporal
El cultivo de temporal de esta noble fruta m i a en las diferentes z o m geogrhflcas,
como se muestra en el siguiente rnapa:

Figura 5-7. Indicacidn de encaberados ypies con Iineas borfrontaIes.

Ambos formatos ya se utilizaban ampliamente antes del Web, d e manera que hay en el
mercado una gran cantidad d e aplicaciones que le ayudarln a preparar sus imAgenes en
cualquiera d e ellos.

521.1 GIF

El Formato d e Intercambio Grifico (GIF, Graphics Interchange Format) s e desarroll6 e n un

principio, para transferir imigenes entre usuarios del servicio e n linea CompuServe. El
formato tiene varias caracteristicas que lo hacen d e gran utilidad en documentos d e HTML.
Su codificaci6n es d e plataforma cruzada, de mod0 que con las aplicaciones de decodificaci6n
GIF apropiadas (incluidas en la mayoria d e 10s navegadores), 10s gr5ficos que genere con
formato GIF en una Macintosh, por ejemplo, se pueden cargar, decodificar y ver en una PC
basada en Windows sin ningdn contratiempo. La otra caracteristica de importancia es que
GIF utiliza tecnologia de compresi6n especial que puede reducir de manera significativa el
tamaiio del archivo de la imagen para obtener una transferencia mPs rhpida a travCs de la
red. La compresi6n GIF tambien es "sin alteraciones"; nada de 10s datos de la imagen
original se altera ni borra, de mod0 que la imagen descomprimida y decodificada luce
exactamente como la original. Las imigenes GIF tambiCn se pueden animar con facilidad.
Aunque 10s archivos de imagen GIF invariablemente tienen el sufijo de nombre de archivo .gif
(O .GZfi, en realidad existen dos versiones del formato GIF: la original GIF87 y una expandida,
GIF89a; ambas soportan varias funciones nuevas, incluyendo fondos transparentes, almace-
namiento de entrelazado y animacibn, caracteristicas populares para quienes desarrollan do-
cumentos con HTML (vea la secci6n 5.2.1.2). Los navegadores de uso mPs extendido e n la
actualidad soportan ambas versiones, las cuales utilizan el mismo esquema de codificaci6n
que mapea valores de pixel de 8 bits a una tabla de color, hash un mPximo de 256 colores por
imagen. La mayoria de las imigenes GIF tienen incluso menos colores; existen herramientas
especiales para simplificar 10s colores en imPgenes mas elaboradas. A1 simplificar las imige-
nes GIF, puede crear un mapa de color mPs reducido y mejorar la redundancia del pixel para
obtener una mejor compresi6n de archivos y, en consecuencia, una descarga mPs rPpida.
No obstante, debido a la limitada cantidad de colores, una imagen codificada como GIF no
siempre es apropiada, en particular para imlgenes realistas (consulte la secci6n sobre JPEG
mas adelante en este capitulo); mPs bien, GIF permite excelentes iconos, imagenes de
colores reducidos y dibujos.
Debido a que la mayoria de 10s navegadores grPficos soportan de forma explicita el formato
GIF, e n la actualidad es el formato de codificaci6n de imPgenes mPs aceptado en el Web,
tanto para imlgenes e n linea (dentro de la misma pPgina de HTML) como para las externas,
enlazadas mediante ligas. Cuando tenga dudas sobre quC formato de imagen utilizar, selec-
cione GIF:' funciona e n casi cualquier situaci6n.

5.2.1.2 Entrelarado, transparencia y animaddn

Con las imagenes GIF puede lograr tres efectos especiales: entrelazado, transparencia y ani-
maci6n. Con el entrelazado, una imagen GIF parece materializarse durante el desplegado, en
lugar de fluir progresivamente desde abajo. Por lo general, una imagen con formato GIF es
una secuencia de datos de pixel, fila por fila, desde la parte superior hacia la inferior de la
imagen. Mientras la imagen GIF c o m h aparece como cuando cierra una persiana, un GIF
entrelazado se abre como si fuera una persiana vertical, ya que entrelaza secuencias cada
cuatro filas de la imagen. Los usuarios logran ver una imagen completa - d e arriba abajo,
aunque difusa- en una cuarta parte del tiempo que tomaria descargar y desplegar el resto de
la imagen. El cuarto de imagen por lo general resulta lo suficientemente claro para que 10s
usuarios con conexiones de red lentas puedan evaluar si descargan o no el resto de la imagen.

' No pudirnos resistir la tentaci6n de sefialar que 10s autores cuidadosos eligen GIF.
5.2 Cdmo insertar imdgenes en sus documentos 113

No todos 10s navegadores grificos, aunque son capaces de desplegar un GIF entrelazado,
pueden desplegar 10s efectos de materializaci6n. Con aquellos que lo hacen, 10s usuarios
incluso pueden cancelar este efecto seleccionando retardar el desplegado de imagen hasta
despuCs de descargar y decodificar todo el documento. Los antiguos navegadores, por otro
lado, siempre descargan y decodifican las imigenes antes de desplegarlas y no soportan
este efecto.
Otro efecto comdn disponible con las imigenes GIF - e n realidad, e n las imigenes con
formato GIF89a- es la posibilidad de hacer transparente una parte, de mod0 que sea
visible lo que estC debajo de ella: por lo general, el fondo de la ventana del navegador. La
imagen GIF transparente tiene un color e n su mapa de colores designado como el color d e
fondo. El navegador simplemente ignora cualquier pixel e n la imagen que utilice ese color
de fondo; por lo tanto, permite que se vea la ventana de desplegado. A1 delinear cuidado-
samente su dimensi6n y utilizar un color de fondo d i d o y continuo, puede lograr que una
imagen transparente parezca combinarse con el contenido de la pigina, o bien flotar sobre
61.
Las imigenes GIF transparentes son adecuadas para cualquier grifico que desee fusionar
con el documento, pues no resaltan como un bloque rectangular. Los logotipos GIF trans-
parentes son muy populares, asi como 10s iconos transparentes y las figurillas, cualquier
imagen que pueda aparecer con una forma arbitraria y natural. TambiCn puede insertar
una imagen transparente e n una linea de texto convencional que tenga la funci6n de algdn
glifo.
El inconveniente de las imigenes GIF transparentes es que pueden parecer desagradables si
no elimina sus extremos a1 ponerlas como una liga (etiqueta <a>), o tambiCn enmarcada. Y
el texto fluye alrededor de la dimensi6n rectangular de la imagen, n o delinea ("siluetea") su
forma aparente. Esto puede generar imigenes aisladas innecesariamente o secciones erriticas
e n las plginas d e HTML.
El tercer truco que puede hacer con imigenes con formato GIF89a es una animaci6n simple,
cuadro por cuadro. Con programas de animaci6n GIF especiales, puede preparar un solo
archivo GIF89a que contenga una serie de imigenes GIF. El navegador despliega cada
imagen del archivo, una e n seguida de otra, de manera muy similar a 10s cuadernillos de
animaci6n de piginas m6viles que teniamos (e incluso dibujibamos) de pequefios. Los
segmentos de control especiales entre cada imagen e n el archivo GIF le permiten fijar el
ndmero de veces que el navegador debe ejecutar la secuencia completa (ciclos), el tiempo
de espera entre cada imagen, si el navegador debe mezclar el espacio de la imagen con el
fondo antes de desplegar la siguiente imagen, etcetera. A1 combinar estas funciones de
control con las ya disponibles para las imigenes GIF, incluyendo tablas de color individua-
les, transparencia y entrelazado, puede crear animaci6n' muy atractiva y elaborada.

Songline Studios ha publicado un libro dedicado a la animacidn GIF: GIFAnimation Studio, de Richard Koman
(1996).
114 Capfiub 5: Lineas borizontales, imdgenes y multimedia

AdemQsde sencilla, la animaci6n GIF es poderosa por otra importante raz6n: no es necesa-
rio hacer programaci6n especial e n 10s documentos de HTML para lograr la animaci6n. Sin
embargo, hay un inconveniente mayor que limita su uso except0 para iconos pequefios o
delgadas bandas e n la ventana del navegador: 10s archivos de animaci6n GIF crecen muy
ripido, incluso si tiene cuidado de no repetir partes estiticas de la imagen e n cuadros de
animaci6n sucesivos. Y si tiene demasiada animaci6n e n un documento, 10s retardos e n la
descarga pueden -y por lo general asi sucede- molestar a1 usuario. Si hay alguna funci6n
e n su documento de HTML que merezca una profunda atencion, es la animacion GIF.
Todas las peculiaridades del formato GIF -entrelazado, transparencia y animaci6n- no
son independientes: necesita programas especiales para preparar 10s archivos GIF. Muchas
de estas herramientas pueden guardar sus creaciones e n formato GIF, y la mayoria le permi-
te aplicar transparencia, asi como crear archivos GIF entrelazados. Existe una gran cantidad
de programas gratuitos yreeware) y de pruebe-y-luego-pague (shareware) especializados
para estas tareas, asi como para la creaci6n de animacion GIF. Busque e n Internet, e n 10s
dep6sitos de programas, herramientas de conversion y gr4ficos GIF. Revise tambiCn el capi-
tulo 15 para obtener detalles sobre la creation de imigenes transparentes.

5.2.1.3 JPEG
El Grupo de Expertos de Cooperacion FotogrQficaUPEG, Joint Photographic Experts Group)
es una organizacion de est4ndares que desarroll6 lo que ahora se conoce como el formato
para codification de im4genes JPEG. A1 igual que las GIF, las imPgenes JPEG son indepen-
dientes de la plataforma y estin especialmente cornprimidas para lograr una aha velocidad de
transferencia por medio de tecnologias de comunicaci6n digital. A diferencia de GIF, JPEG
soporta millones de colores para im4genes rnis detalladas y con calidad fotorrealista. Ademis,
JPEG utiliza algoritmos especiales que logran relaciones de compresi6n de datos mas altas. Es
comlin, por ejemplo, que una imagen GIF de 200 kilobytes quede reducida a 30 kilobytes en
formato JPEG. Para lograr esta impresionante compresi6n, JPEG pierde algunos datos de la
imagen; empero, el usuario puede ajustar el grado de "p&didaVcon herramientas JPEG espe-
ciales, de mod0 que aunque una imagen descomprimida pueda no corresponder exactamente
a su original, si s e d tan parecida que la mayoria no notad la diferencia.
Aunque JPEG es una excelente opci6n para 10s fotbgrafos, no es lo rnis adecuado para
ilustradores. Los algoritmos utilizados para comprimir y descomprimir la imagen dejan par-
ticularidades notables a1 tratar ireas extensas de un color. Por lo tanto, si intenta desplegar
un dibujo, el formato GIF quiz4 sea mejor.
El formato JPEG, por lo general seiialado por el sufijo de nombre de archivo LjPg (o JPC), es
ampliamente reconocido por 10s navegadores graces actuales. En raras ocasiones podr4 recono-
cer este formato un navegador antiguo que no pueda desplegar directamente imigenes JPEG.

5.2.2 Cudndo utilizar imcigenes

La mayoria de las im4genes dicen rnis que mil palabras. Pero no olvide que nadie pone
atencibn a un hablador. Primero y m4s importante, piense en las im4genes para documentos
5,2 Cdmo insertar i d g e n e s en sus dmumentos 115

de HTML corno herramientas y apoyo visuales, no corno elementos ornamentales fortuitos.

Deben apoyar y complernentar el contenido del texto y ayudar a 10s lectores a navegar por
10s documentos. Utilice imiigenes para dar claridad, ilustrar o ejemplificar el contenido. Las
fotografias, diagramas, mapas y dibujos que complementan el contenido son candidatos
naturales para imiigenes e n documentos de HTML. Las fotografias son, esencialmente, com-
ponentes d e catiilogos e n linea y guias de cornpra, por ejernplo. Y 10s iconos y figurillas
puestos corno ligas, incluyendo imiigenes animadas, pueden ser eficaces guias visuales para
recursos internos y externos. Si una irnagen no brinda ninguno de estos servicios a su
documento, deshiigase de ella.
Una de las consideraciones rniis importantes a1 agregar imiigenes a un documento de HTML
es la demora adicional que se agrega a1 tiempo para obtener un documento por la red, en
particular e n las conexiones d e m a e r n . Mientras un docurnento d e texto puede ocupar, a lo
rniis, 10 o 15 mil bytes, las imiigenes pueden extenderse fiicilmente hasta millones de bytes
cada una. Y el tiempo d e transferencia total de un documento no s610 es igual a la suma de
todos sus componentes, tambiCn a las dernoras debidas a caracteres de control asociados
con la red, ya que cada imagen requiere de una conexi6n independiente y de una solicitud
d e descarga entre el navegador y el servidor web. Dependiendo d e la velocidad de la
conexi6n (ancho de banda, por lo general expresado corno bits o bytes por segundo), asi
corno d e la congesti6n en la red que puede retardar las conexiones, un solo docurnento con
una imagen de 100 kilobytes puede tomar alrededor de 30 segundos con una conexi6n de
rn6dem de 28.8 kilobits por segundo e n la madmgada, cuando todos duermen, y hasta casi
diez minutos con una conexi6n d e m6dern de 9600 bits por segundo a1 medio dia. $apt6 la
idea?

5.2.3 Cuando utilizar texto

El texto n o ha pasado de moda. Para algunos usuarios, es la dnica parte de un documento
a la que pueden tener acceso. Nosotros opinamos que, e n casi todas las circunstancias, sus
docurnentos deben estar a1 alcance d e lectores que no puedan ver imiigenes o que hayan
desactivado e n su navegador la descarga automiitica d e Cstas para mejorar la velocidad de
conexi6n. Aunque el entusiasmo por agregar imiigenes a todos sus documentos puede ser
grande, hay veces que tienen miis sentido 10s docurnentos de s61o texto.
Los documentos que se convierten a1 formato adecuado para el World Wide Web desde
otras plataforrnas raramente cuentan con imiigenes. El material d e referencia y otro conteni-
d o serio por lo comdn estii disponible e n formato de s61o texto.
Cuando la velocidad sea critica y potencialmente lenta, debe crear documentos d e s610
texto. Si sabe que muchos usuarios s61o disponen de conexiones de baja velocidad para ver
sus piiginas, debe ser considerado y evitar el uso d e imiigenes. Mejor adn, proporcione una
piigina principal que permita a 10s lectores decidir entre obtener colecciones d e su trabajo:
una que contenga imiigenes y otra donde se ornitan (10s navegadores miis comunes inclu-
yen iconos especiales para indicar las irniigenes descargadas; aun asi, pueden alterar y
116 Capftulo 5: Lfneas bodzontales, imdgenes y multimedia

confundir el diseiio del documento hasta convertirlo e n un conjunto de informaci6n desor-

denada imposible de leer).
El texto es mls apropiado - q u i z 2 con apoyo de imlgenes, sin grlficos superficiales ni
extravagantes- para localizar sus documentos si piensa incluirlos e n alguno de 10s diferen-
tes servicios de indizaci6n del Web. Las imlgenes casi siempre son ignoradas por estos
motores de b6squeda. Si el contenido principal de sus plginas se complernenta con imiige-
nes, entonces se localizar~muy poca informaci6n sobre sus documentos bajo esta modali-
dad d e directories web en linea.

5.2.4 Cdmo agilixar la descarga de imdgenes

Hay muchas formas de mejorar 10s sobretiempos y demoras inherentes a las imlgenes; la
primera: ser meticuloso a1 incluirlas e n documentos.
Simpltfiquelas.
Un grlfico a colores de 24 bits de pantalla completa, incluso a1 reducirlo por compre-
si6n digital con uno de 10s formatos estlndares como GIF o JPEG, va a padecer el
inconveniente del ancho de banda. Obtenga y utilice las diferentes herramientas de ma-
nejo de imagen para mejorar el tamaiio y cantidad de colores de la imagen a fin de
lograr un nlimero menor de pixeles. Simplifique sus dibujos. Evite las fotografias pano-
riimicas, 10s extensos fondos vacios e n sus imlgenes, asi como 10s mlrgenes excesivos
y otros elementos que acaparan el espacio. Tambien evite la fusi6n (combinar dos
colores entre pixeles adyacentes para lograr un tercer color); la tecnica puede reducir
de forma significativa la compresi6n de sus imlgenes. Centrese e n extensas lreas de
colores uniformes, que optimen la compresi6n e n 10s formatos GIF y JPEG.
Recicle imagenes.
Esto es particularmente cierto para iconos y anirnaci6n GIF. La mayoria de 10s navegadores
almacena componentes de 10s documentos entrantes en una memoria local con fines de
rapidez e n la recuperaci6n de datos que viajan por conexiones de red lentas. Para
archivos de animaci6n GIF pequeiios, intente preparar cada imagen sucesiva s61o para
actualizar partes que cambien en la animacibn, e n lugar de redibujar toda la imagen
(esto tambiCn agiliza la animaci6n).
Divida documentos extensos.
h a es una regla general que incluye a las imagenes. Tienden a ser mls aceptados por
10s usuarios pequeiios segmentos de documento, organizados con ligas (obviamente) y
eficaces tablas d e contenido, e n lugar de documentos de gran tamaiio. En general, 10s
usuarios prefieren "saltar" por las diferentes paginas en lugar de soportar grandes tiem-
pos de espera innecesaria para la descarga de 10s documentos extensos (lo cual se
relaciona con el sindrome de cambio de canales de televisi6n). Una norma aceptada es
crear documentos de hasta 50 kilobytes, de mod0 que 10s lectores no se impacienten
incluso con las conexiones muy lentas.
5.2 Cdmo insertar imdgenes en sus documentos 117

Aisle 10s graficos grandes fundamentales.

Proporcione una liga especial a las imagenes grandes; ponga una liga que incluya una
miniatura de Cstas, para permitir a 10s lectores decidir si y cuando descargar la imagen
completa. Y como la imagen descargada no estA mezclada con otros componentes del
documento, como las imAgenes e n linea, es mAs facil para el lector identificar y guardar
la imagen e n el Area de almacenamiento local de su sistema para un posterior estudio
(para leer detalles d e la descarga de imagenes independientes, vea la secci6n 4.7.)
Especifique la dimensio'n de la imagen.
Por dltimo, otra forma de mejorar el desempeiio es incluir informaci6n del espacio
rectangular, alto y ancho de la imagen. A1 proporcionar su dimensibn, puede eliminar
10s pasos extraordinarios que 10s navegadores mAs populares deben seguir para descar-
gar, examinar y calcular el espacio de la imagen en el documento. Sin embargo, hay un
inconveniente a este respecto, que estudiaremos en la secci6n 5.2.6.11.

5.2.5 LJPEG o GZF?

Tal vez utilice solamente imagenes JPEG o GIF e n sus documentos de HTML si sus fuentes
para imAgenes o su conjunto de programas funcionan mejor con uno u otro formato. Ambos
son soportados casi universalmente por 10s navegadores actuales, de manera que n o debe
haber inconvenientes para ser vistos por el usuario.
No obstante, recomendamos que adquiera la capacidad de crear y convertir a ambos formatos
a fin de aprovechar sus caractensticas dnicas. Por ejemplo, utilice la caracteristica d e trans-
parencia d e GIF para iconos y figurillas. Alternativamente, utilice JPEG para imigenes gran-
des y llenas de color para que sea mPs rapid0 descargarlas.

5.2.6 Etiqueta <img>

La etiqueta < i rng> le permite hacer referencias e insertar una imagen e n el flujo del texto del
documento d e HTML. No existe una linea implicita ni corte de parrafo antes ni despues
de la etiqueta <irng>, de manera que las imAgenes pueden quedar verdaderamente "en
linea" con el texto y algdn otro contenido.
El formato de la imagen no queda definido por el estPndar de HTML, aunque 10s navegadores
graficos usados comdnmente soportan imagenes GIF y JPEG. Dicho e s t h d a r no especifica
ni restringe el tamafio o dimensi6n de la imagen, la cual puede tener cualquier cantidad
de colores, aunque la forma e n que Cstos se presentan depende e n gran medida del
navegador.
La presentaci6n de imagenes e n general es especifica del navegador. Los navegadores no
graficos pueden ignorar la presentaci6n de imagenes; 10s que operan e n un ambiente res-
tringido pueden modificar su complejidad o su tamaiio. Y 10s usuarios, sobre todo quienes
poseen lentas conexiones de red, pueden elegir posponer la carga de imagenes. De mod0
I18 Caphlo 5: Lineas borirontales, fmdgenes y multimedfa

Funcion:
Inserta una imagen en un documento
Atributos:
ALIGN
ALT
BORDER
CONTROLS 0
DYNSRC 0
HEIGHT
HSPACE
ISMAP
LOOP 0
LOWSRC rn
NAME rn
ONABORT
ONERROR rn
ONLOAD
SRC
START 0
USEMAP
VSPACE
WIDTH
Etiqueta de fin:
Ninguna
Contiene:
Nada
Utilizada en:
Texto

que debe asegurarse que sus documentos tienen sentido y son dtiles incluso si se eliminan
completamente las imzigenes.

5.2.61 Atrfbuto src

La etiqueta 4 m g > requiere el atributo src (a menos que utilice dynsrc para video basado en
Internet Explorer; vea la secci6n 5.2.7.1). Su valor es el URL del archivo de la imagen, ya sea
absoluto o relativo a1 documento de HTML que hace referencia a la imagen. Para organizar
mejor las im5genes, quienes programan con HTML por lo general colocan estos archivos en
una carpeta independiente que con frecuencia llaman "pics" o "imagenes". [URL, 7.21
Por ejemplo, este fragment0 d e c6digo de HTML coloca la imagen de una planta de empa-
que d e kumquats dentro del texto (figura 5-81:
52 Cdmo insertar idgenes en sus documentos 119

Aqul estamos, e n e l d l a 17 de n u e s t r o v i a j e , f r e n t e a l a
p l a n t a de empaque de kumquats:
-=P>
4 m g s c r = " p i cs/pl anta-de-empaque.giftt>
<P>
Cuan e x c i t a n t e es observar e l movimiento de
l a s c a j a s de e s t e f r u t o

En el ejemplo, las etiquetas d e pPrrafo (<p>) hacen que el navegador muestre la imagen con
cierto espacio vertical despuCs del texto precedente y antes del texto final. El texto tambiCn
puede quedar junto a la imagen, como explicamos en la secci6n 5.2.6.4.

9 '
fl"' ---
i' Archluo Edic~on Uer I r Marcadorer opciones Directorlo Uenlana
=.=.-.v . Netscaos: E l strtbuto src '-xL':Q---

Figura 5-8.Imagen y texto en un documento.

Para beneficio de 10s usuarios, en particular para quienes tienen conexiones a Internet lentas,
Navigator de Netscape proporciona la variante 1owsrc del atributo s r c para la etiqueta < i m p
como una alternativa para agilizar la presentaci6n del documento. El valor del atributo 1owsrc,
al igual que scr, e s el URL del archivo de la imagen que el navegador carga y despliega
cuando encuentra por primera vez la etiqueta <img>. DespuCs, cuando el documento se ha
cargado por completo, Navigator regresa y obtiene la imagen especificada por el atributo src.
En realidad, la imagen a la que hace referencia 1owsrc es una versi6n abreviada, d e baja
resoluci6n, d e la imagen referenciado por s r c , por lo que se carga mis ripido para dar al
usuario una idea de su contenido, hasta que la imagen final de mayor resoluci6n gradual-
mente la remplaza e n la pantalla. Pero, ademas, el atributo 1owsrc t a m b i h sirve para lograr
algunos efectos muy especiales.
Navigator emplea las dimensiones d e la imagen a fin de reservar un espacio en el documen-
to para ambas imageries, 1 owsrc y src, a menos que aparte de manera explicita ese espacio
con 10s atributos height y width descritos mas adelante e n este capitulo. Asi, si la dimen-
120 Cap&& 5: Lfneas borfzonrales, imdgenes y multimedia

si6n de la imagen especificada en el atributo src es diferente d e la de la imagen 1owsrc o

explicitamente incluy6 valores de tamaiio, la imagen src se reducirii, alargarfi, compactar5
y/o comprimirii para ajustarse a1 espacio proporcionado. Mls aun, no es necesario que las
im5genes 1owsrc y src Sean identicas, d e mod0 que puede aprovechar la demora en la
presentaci6n d e la imagen src para lograr una animaci6n sencilla.
El atributo 1owsrc es s61o para Navigator de Netscape. Otros navegadores lo ignoran y solo
cargan la imagen especificada por el atributo src. Navigator no carga ninguna imagen si el
usuario elige no cargar las imfigenes de forma automiitica. En este caso, ambas imiigenes se car-
gan e n orden cuando el usuario hace clic en el bot6n Cargar imiigenes o en el icono que indica
la posici6n de la imagen. Ninglin navegador carga unicamente la imagen 1owsrc; es necesario
incluir una imagen src; de otro modo, no aparece nada except0 el icono de la imagen faltante.

52.63 Atributo alt

El atributo a1 t especifica un texto alternativo que el navegador puede rnostrar si n o es
posible desplegar la imagen o si el usuario desactivi, la carga. J k a es una posibilidad que
recomendamos ampliamente para la mayoria d e las imigenes d e su documento, pues si la
imagen no estl disponible, el usuario tiene la indicaci6n de lo que falta.
El valor del atributo a1 t es texto de hasta 1024 caracteres, entrecomillado si incluye espa-
cios o algun otro signo d e puntuaci6n. El texto alterno puede tener referencias d e entidad
de caracteres especiales, pero no puede contener ningdn otro tip0 d e marcas; en particular,
u s naveg556reX~i5giafi66s;~~i&~h el atributo a1 t si la imagen esti disponible y su descarga
estl permitida a1 usuario. De otro modo, insertan el texto del atributo a1 t como un letrero
a1 lado del icono que indica la ubicaci6n d e la imagen. Por lo tanto, las etiquetas bien
seleccionadas dan soporte adicional a aquellos usuarios con un navegador grPfico que
hayan desactivado la carga automitica de imiigenes debido a su lenta conexi6n de red.
Los navegadores de s61o texto, no grhficos, como Lynx, colocan el texto del atributo a1 t
directamente e n el contenido del documento como cualquier otro elemento d e texto. Asi,
cuando se utiliza con eficacia, algunas veces a1 t puede sustituir sin problema a im5genes
perdidas (10s usuarios con navegadores de s610 texto apreciarin que no se les recuerde con
insistencia su jerarquia d e segunda clase dentro de la comunidad web). Por ejemplo, evalue
utilizar un asterisco como el atributo a1 t alternativo para un icono d e viiieta especial:

Un navegador gr5fico despliega la imagen de la vifieta, mientras en uno no grfifico el

asterisco de a1 t remplaza a la viiieta faltante. De forma similar, utilice el texto de a1t para
remplazar las vifietas e n 10s elementos de una lista. Por ejemplo, el siguiente c6digo:
<u1>
< l i > R e c i p i e n t e s para kumquat 4 m g src="pics/nueva . g i f " a1 t = " (iNovedad!) ">
< l i > Fechas de cosecha anual
</ul>
5.2 Cdmo insertar imdgenes en sus documentos 121

muestra la imagen "nueva. g i f " e n navegadores grificos, y el texto (iNovedad!) en navegadores

d e s61o texto.
El atributo a1 t incluso le permite utilizar texto mis complejo (figura 5-9):
Here we a r e , on day 17 o f t h e t o u r , i n f r o n t o f t h e kumquat p a c k i n g p l a n t :
<P>
cimg src="pics/packing-plant .gi fa'
a1 t="[Image o f o u r t o u r group o u t s i d e t h e main p a c k i n g p l a n t ] " >
<P>
What an e x c i t i n g moment, t o see t h e boxes o f f r u i t moving

Here we a r e , on day 17 o f t h e t o u r , i n f r o n t o f t h e kumquat p a c k i n g p l a n t :

[Image o f o u r t o u r group o u t o i d e t h e main p a c k i n g p l a n t ]

What an e x c i t i n g moment, t o see t h e boxes of f r u i t moving

Figura 5-9.Los navegadores de s61o texto, como Lynx, muestran el texto del arriburo a 1 t en
ver de la imagen.

5.2.6.4 Att-ibuto align

El estindar de HTML no determina una alineaci6n para las imigenes con respecto a1 texto e
imigenes e n una misma linea, de mod0 que no podri predecir con precisi6n c6mo luciri la
combinaci6n de texto e imigenes.' En HTML, las imPgenes por lo comdn aparecen e n una
sola linea de texto. Los medios mPs comunes, como las revistas, por lo general colocan el
texto alrededor de las imPgenes, con varias (no s61o una) lineas de texto a su alrededor.
Por fortuna, 10s disefiadores de documentos de HTML pueden ejercer cierto control sobre la
alineaci6n de imigenes y el texto a su alrededor mediante el atributo a1 ign d e la etiqueta
<img>. El estindar d e HTML especifica cinco valores para este atributo: l e f t , r i g h t , top,
m i d d l e y bottom. Los valores 1e f t y r i g h t acomodan el texto subsecuente alrededor de la
imagen, la cual se traslada a1 margen correspondiente; 10s tres valores restantes alinean
la imagen verticalmente con relaci6n a1 texto alrededor. Navigator agrega cuatro atributos de
alineaci6n adicionales: t e x t t o p , absmi ddl e, base1 ine y absbottom, mientras Internet Explorer
agrega c e n t e r .

' La mayoria d e 10s navegadores grificos populares insertan las imagenes de mod0 que su base se alinee con la
linea base del texto, misma alineacidn que la especificada por el valor del atributo bottcill. No obstante, 10s
disefiadores de documentos de HTML deben suponer que la alineaci6n varia entre navegadores y siempre inclu-
yen el tip0 de alineacidn que quieren dar a la imagen.
122 Capiculo 5: Lineas bot-fzontales,lmdgenes y multimedia

La siguiente lista describe las alineaciones de una imagen integrada (dentro del documento
d e HTML); la figura 5-10 muestra ejemplos d e Cstas.

----
Navigator texttop7

-middlL y - - -- & & N v - - - e e r t l e r ~ - - -

Explorer texttop7- --- --- -

-middl L y - - -- &&Ne-p.----eertler-y---

texttop •
middle • •
absmiddle • •
center • •
bottom • • •
base1 i n e • •
absbottom • •

Figura 5-10. El estandar de H 7 U L y algunos ejemplos de las dr/erentes alineaciones de

imagen de un nauegadorgraflo.

La parte superior de la imagen se alinea con el extremo superior del elemento mas alto
e n la linea de texto actual. Si no hay otras imageries e n esta linea, la parte superior de
la imagen se alinea con la parte superior del texto.
texttop
El atributo/valor a1 i g n = t e x t t o p indica a Navigator que alinee lz parte superior d e la
imagen con la parte superior del elemento de texto mas alto e n la linea actual, que e s
5.2 Cdmo ksefiar imrfnenes en sus documentos 12.3

ligeramente diferente d e la opci6n t o p del estandar d e HTML, que alinea la parte

superior de la imagen con la parte superior del elemento, imagen o texto mas alto, en
la linea actual. Si la linea no tiene otra imagen que se extienda por la parte superior del
texto, t e x t t o p y t o p tienen el mismo efecto.
mi ddl e
Navigator e Internet Explorer tratan de forma diferente el valor d e alineacion mi dd-
1e: Navigator siempre alinea la parte media de la imagen con la linea base del texto,
independientemente de otros elementos en linea, por ejemplo, otra imagen (figura 5-
11). Internet Explorer, por su parte, alinea la parte media de la imagen con la parte
media del elemento, texto o imagen m h aha en la linea actual (figura 5-12). Observe la
alineacion y diferencias e n las figuras 5-11 y 5-12, particularmente cuando solo una
imagen tiene el atributo a1 i g n . Ambas figuras despliegan el siguiente fragment0 de
c6digo de HTML:
Linea d e texto
<img src="pics/horizontal .gif" a1 ign=middle>
<img src="pics/vertical .gi f 'I>
va en ...
<br cl ear-1 e f t>
<P>
Linea de texto
<img src="pics/hori zontal .gif" a1 ign=middle>
<img src="pi cs/vertical .gif1' a1 ign=middle>
va e n ...
Observe tambien que Internet Explorer, en su versi6n 3, trata de igual mod0 el valor middle,
absmi ddl e y c e n t e r , aunque versiones anteriores de ese navegador y la versi6n 4 d e Navigator
hacen una distinci6n entre las alineaciones mi ddl e y absmi ddl e (el que no sepa quC signi-
fica cada valor de alineaci6n, que levante la mano).

Ffgtrra 5-11. Navfgator alfnea laparte media de la fmagen con [a linea base del texto.
124 Capftulo 5: Lfneas bo*krmtales, fmdgenes y multfmedfa

L'iea de texto vaen ..

Figura 5-12. Internet Exporer alinea la parte central de la i m g e n con la parte central del
elemento mds alto en la linea.

absmi ddl e
Si establece el atributo a1 ign de la etiqueta 4 m g > como absmiddle, el navegador
acomoda la parte media absoluta de la imagen con la parte media absoluta d e la linea
actual. Para Navigator versidn 4 y versiones anteriores de Internet Explorer, esto es
diferente d e la opci6n middle comiln, que alinea la parte media de la imagen con la
linea base del texto actual (la parte inferior de 10s caracteres). La versi6n 3 de Internet
Explorer trata absmi ddl e de mod0 similar a middle y center.
center
El valor center para la alineaci6n de imigenes es el mismo que absmiddl e e n Internet
Explorer y Navigator, pero observe que estos navegadores tratan de manera distinta 10s
valores absmiddle y middle.
bottom y base1 i ne (valorpredeterminado)
Con Navigator 4 y versiones anteriores de Internet Explorer, 10s valores de alineacion
bottom y base1 ine tienen el mismo efecto que si no incluyera ningrin atributo de
alineaci6n: 10s navegadores alinean la parte inferior de la imagen en el mismo plano
horizontal que la linea base del texto. No debe confundir esto con absbottom, ya que
este valor toma e n cuenta las partes "bajas" d e 10s caracteres, como la colita de la "y"
minliscula (a esas partes se les llama "astas descendentes"). Internet Explorer versi6n 3
trata el valor bottom igual que absbottom (jalguien tiene alguna duda? Que levante la
mano).
absbottom
El atributo a1 i gn=absbottom indica a 10s navegadores que alineen la parte inferior de la
imagen con la parte inferior absoluta de la actual linea de texto. La parte inferior abso-
luta e s el punto m h bajo del texto tomando en cuenta las partes "bajas" d e las letras,
incluso si no existiera ninguna e n la linea. Un asta descendente es la cola d e la "y", por
ejemplo; la linea base de texto es la parte inferior de la "v" e n la letra "y".
5.2 Cdmo insertar imdgenes en sus documentos 125

Utilice 10s valores de alineaci6n t o p y m i ddl e para una mejor integraci6n de iconos, simbo-
10s y otros efectos especiales en linea con el contenido del texto. De otro modo, a1 ign=bottom
(el valor predeterminado) por lo general da la mejor apariencia. A1 alinear una o miis
imagenes e n una sola linea, seleccione la alineaci6n que dC la mejor apariencia general a su
documento.

5.2.65 Distribucidn de texto alrededor de Ias i d g e n e s

Los valores d e alineaci6n d e imiigenes 1 e f t y r i g h t indican a1 navegador que coloque la
irnagen contra el margen izquierdo o derecho del flujo d e texto actual, respectivamente.
El navegador muestra el contenido subsecuente del docurnento en la parte restante, junto a
la irnagen. Asi, el resto del contenido del documento se distribuye alrededor de la irnagen.
<img s r c = " p i cs/kumquat . g i f " a1 i g n = l e f t *
El kumquat es e l mas pequeRo de 10s cTtricos, en apariencia s i m i l a r a una
pequefia naranja. No obstante, l a semejanza termina en l a apariencia. Mientras que
1as naranjas por l o general son dul ces, 10s kumquats son en extremo agrios. Para
asegurarse, basta con probar uno.

La figura 5-13 muestra c6mo se distribuye el texto alrededor de una imagen alineada a la
izquierda.

G Archiuo Edicion Uer Ir Marcadores Oociones Directorio I

peque~6de 10s citricos, en

apariencia similar a una
. pequea naranja. No

- r a- -
---.:
rerrmna .-
obstante, la semejanza
- .
en la apar~encla.
- - - - -

'.
T..) Mientras que las naranjas
por lo general son dulces,
-. 10s kumquats son en
zxtremo agrios. Para asegurarse, basta con probar uno.

Figum 5-U.E[ rexto se distrlbuye alrededor de una imagen alineada a la izquierda.

El usuario puede colocar imiigenes contra ambos miirgenes a1 mismo tiempo (figura 5-14) y
el texto se distribuye a1 centro d e la piigina, entre las imiigenes:
cimg src="pics/kumquats.gif" a1 i g n = l e f t >
cimg s r c = " p i cs/arbol .gi f " a1 i g n = r i g h t >
E l kumquat es e l mas pequefio de 10s c f t r i c o s , en apariencia s i m i l a r a una
pequeRa naranja. No obstante, l a semejanza termina en l a apariencia. Mientras que
l a s naranjas por l o general son dulces, 10s kumquats son en extremo agrios. Para
asegurarse, basta con probar uno.
 Capftulo 5: Lfneas borizontales, Wgenes y rnuWmedfa

6 flrchiuo Edicibn Uer Ir Marcadores O~ciones Uirectorio I

3
3
- Netscaoe: Olstribucibn de tento entre imaaenes S E S Z Z ~ ~

, El kumquat es el
r& p q ~ ?dei 10s~
citricos, en
apariencia similar a
ma pequeneFia
naranja No
obstante, la
semejanza terrnina
- . en liapariencia. Mientras qua 1% naranjas
mr lo wreral son dulces 10s kurnauatc;son en extrem amios. Para
asepnrse, basta con probar uno.

Figura 5-14. DbMbucidn del rexro entre itnugmes alineudus a los mdrgenes izquierdoy derecho

Mientras el texto fluye alrededor d e una imagen, el margen izquierdo (o derecho) d e la

pagina s e redefine temporalmente como adyacente a la imagen y opuesto a1 extremo d e
la pigina. Esto significa q u e las imigenes subsecuentes con la misma alineaci6n s e apilarin
entre si, como e n peldafios. El siguiente fragment0 d e cddigo produce ese efecto d e imige-
nes escalonadas:
<img src="pics/maria.gif" a1 ign=left>
Maria
<br>
<img src="pics/patricia.gi f" a1 ign=left>
Patricia
<br>
<img src="pi cs/cecil ia .gi f" a1 ign=left>
Cecilia
El resultado d e este ejemplo se muestra e n la figura 5-15.
Cuando el texto s e coloca m i s all5 d e la parte inferior d e la imagen, el margen regresa a su
posici6n inicial, por lo general a1 extremo d e la ventana del navegador.

5.2.66 Cdmo centrar imdgenes

iHa observado q u e con el atributo a1 ign n o puede centrar horizontalmente una imagen e n
la ventana del navegadof? Los valores middle y absmiddl e centran la imagen verticalmente
con relacion a la linea actual, pero la imagen s e alinea horizontalmente dependiendo del
contenido q u e la antecede y d e la dimensi6n d e la ventana del navegador.
Puede centrar una imagen horizontalmente e n la ventana del navegador, pero s61o si la aisla
del contenido alrededor, digamos d e etiquetas d e pirrafo, divisi6n o d e corte d e linea.
Despues, puede ocupar la etiqueta <center>, el atributo d e alineaci6n a1 ign=center o un
5.2 Cdmo insertar inufgenes en sus documentos 127

6 Archiuo Edlc~on Uer I r Marcadores Opclones Ditectorlo Uentana

g-17- -- e+=-=.- Netscape: Como centrar imhgenes z-~ V B P

Figtrra 5-15. Tres chicas adorables.

estilo justificado al centro en el p5rrafo o etiqueta de divisi6n para centrar la imagen. Por
ejemplo:
Los kumquats t i e n e n un sabor d e l i c i o s o
<br>
<center>
cimg s r c = " p i cs/kumquat . g i f " >
</center>
que todos deberian e s f o r z a r s e en probar.

Utilice la etiqueta d e pPrrafo con su atributo a1 i g n = c e n t e r si desea alglin espacio adicional

arriba y debajo d e la imagen centrada:
Los kumquats t i e n e n un sabor d e l i c i o s o
<p a1 ign=center>
~ i m gs r c = " p i cs/kumquat ,gifl'>
</ P>
que todos deberian e s f o r z a r s e en probar.

5.2.6.7 El atributo de bordes

Con frecuencia 10s navegadores presentan imiigenes que son tambiCn ligas (incluyen una
etiqueta <a>) con un borde a color de un grosor de dos pixeles, el cual le indica a1 lector que
puede hacer clic en esa imagen para visitar el documento asociado. Puede modificar el
grosor d e ese borde con el atributo b o r d e r de la etiqueta cimg>. El valor del atributo b o r d e r
es un valor entero igual a1 grosor del borde, e n pixeles.
En la figura 5-16 aparecen distintos grosores de bordes de imagen, generados a partir del
siguiente fragment0 d e c6digo:
<a href=Itprueba.h t m l U >
~ i m gs r c = " p i cs/kumquat.gi f " b o r d e r = l >
</a>
<a href="prueba. html 'I>
<img src="imagenes/kumquat .gi f " border=2>
 6 Archiuo Edicion Uer I r Marcadores Opciones Oirectorio Uentana
ZD=.--=.--=
- -...-... =:
&
Z
.-.-- Netscape: Dlstintos grosores de bordes Z.~-;T~~:<:.-&

Ffgura5-16. Dqerentes grosores de bordes de tmagen

52.68 Cdmo eliminar el borde de una imagen

Puede eliminar el borde alrededor de una imagen con funci6n d e liga estableciendo el
atributo border d e la etiqueta 4mg> con un valor igual a cero. Para algunas imagenes, en
particular 10s mapas, la ausencia d e borde puede mejorar notablemente la apariencia d e sus
piiginas. Las imiigenes que son claramente botones d e enlace a otras paginas tambikn pue-
den lucir mejor al prescindir del borde.
Sin embargo, sepa que a1 eliminar el borde no disminuye la utilidad de su pagina. No poner
borde significa que ha eliminado el indicador visual de que se trata de una liga, dificultando
asi la localizaci6n de las ligas en su piigina. Los navegadores cambiaran la forma del punter0
del rat6n cuando el lector lo pase sobre una imagen que funcione como liga, pero no debe
presuponer esto, ni hacer que 10s lectores prueben sus imiigenes sin borde para localizar
ligas ocultas.
Recomendamos ampliamente que utilice alguna modalidad adicional para indicar a 10s
lectores e n que imagenes sin borde pueden hacer clic y funcionan como ligas. Incluir
instrucciones simples de texto hace miis accesibles sus paginas a 10s lectores.
5.2 C h o insertar imdgenes en sus documentos 129

5.2.6.9 Atributos de alto y ancho

Por lo general, un navegador gr5fico determina el tamaiio de una imagen y el espacio
rectangular que debe reservarle e n su ventana, a1 recuperar el archivo de la imagen y
extraer sus especificaciones intrinsecas de alto y ancho. ~ s t no
a es la forma m5s eficiente de
interpretar un documento, ya que el navegador debe examinar de forma secuencial cada
archivo de imagen y calcular su espacio e n pantalla antes de presentar el contenido que
viene despuCs. Esto puede incrementar de forma significativa el tiempo que toma desplegar
el documento y demorar el desplazamiento que hace por C1 el usuario.
Una forma m5s eficiente e n que 10s desarrolladores de p5ginas de HTML pueden especificar
las dimensiones de la imagen es mediante 10s atributos h e i g h t y w i d t h de la etiqueta <img>.
De esta forma, el navegador puede calcular y reservar el espacio antes de descargar la
imagen, agilizando asi la presentaci6n del documento. Ambos atributos requieren un valor
entero que indique el tamaiio de la imagen e n pixeles; no es importante el orden e n que
aparezcan e n la etiqueta <irng>.

5.2.6.10 Cdmo redimensionar y acomodar imdgenes

Una funci6n oculta de 10s atributos h e i g h t y w i d t h es que usted no necesita especificar las
dimensiones de la imagen actual; 10s valores de estos atributos pueden ser m5s grandes o
m5s pequefios que el tamaiio real de la imagen. El navegador escala de forma autom5tica la
imagen para acomodarla e n el espacio predefinido, lo cual le brinda una peculiar forma de
crear versiones miniatura de grandes im5genes y de agrandar im5genes muy pequeiias. No
obstante, sea cuidadoso: el navegador debe obtener todo el archivo de la imagen, sin
importar c u d sea el tamaiio de su presentaci6n final; ademh, usted puede distorsionar una
imagen si no mantiene la proporci6n entre alto y ancho.
Otra peculiaridad de 10s atributos h e i g h t y wi d t h es que facilitan el acomodo de 5reas de su
p5gina y tambiCn puede mejorar el desempeiio de sus documentos. Suponga que desea
insertar una barra con color a lo largo de su documento.' En lugar de crear una imagen de
tamaiio cornpleto, puede crear una que sea tan s61o de un pixel de alto por un pixel
de ancho y ponerla del color deseado. DespuCs puede utilizar 10s atributos h e i g h t y w i d t h
para ampliarla y presentarla mas grande:

Una imagen a escala se descarga m5s d p i d o que una imagen de tamafio completo, y 10s
atributos w i d t h y h e i g h t crean la barra del tamaiio deseado despuCs de que la diminuta
imagen llega a1 navegador (figura 5-17).
Un dltimo y particular aspect0 del atributo w i d t h es que puede tener un valor de pixeles
expresado e n porcentaje e n lugar de un valor absoluto. Esto provoca que el navegador Cree

' Esta es una forma de crear lineas horizontales en Navigator 3, o en versiones anteriores que no soportan el
atributo c o l o r de la etiqueta <hr>.
130 Capflub5: Lfneas borlronlales, imdgenes y multimedia

6 flrchiuo Edicion Uer Ir. Marcadores Opciones Directorio Uentana

'[7'-- - .- -
- -.
--.
Netscape: lmagen a escala -
-

Fig ura 5-17. Estu buwu seforrnu u partir de unu imugen de u n pixel de ultopor ttno de ancho.

una escala d e la imagen e n un porcentaje del tamaiio d e la ventana del documento. Asi,
para crear una b a r n d e color d e 20 pixeles d e alto y del ancho d e la ventana, puede utilizar
el siguiente c6digo:

Conforme cambia el tamaiio d e la ventana del documento, tambiCn lo hace el tamario d e la

imagen.
Si proporciona un valor e n porcentaje para w i d t h y omite el valor para h e i g h t , el navegador
mantiene la relaci6n d e aspect0 d e la imagen a medida que crece y s e contrae. Esto significa
q u e el alto siempre estarh e n correcta proporci6n con respecto a1 ancho y la imagen se
mostrarh sin distorsi6n.

5.2.6.11 Problemas con el alto y el ancho

Aunque 10s atributos h e i g h t y w i d t h d e la etiqueta < i m g > pueden mejorar el desempeiio y
le permiten realizar algunos tnlcos tjtiles, existe un inconveniente particularmente serio al
utilizarlos. El navegador aparta el rectkgulo de espacio especificado para las dimensiones
d e la imagen e n su ventana, incluso si el usuario desactiv6 la carga automitica d e imigenes.
Lo q u e el usuario por lo general hace e s crear una phgina llena d e bordes semivacios con
iconos carentes d e significado. Asi, la phgina aparece incompleta y con frecuencia intjtil. Sin
establecer dimensiones, por otro lado, el navegador s61o inserta un icono con una linea e n
el flujo d e texto, d e manera que al menos existe algo que leer e n la pantalla.
No tenemos ninguna respuesta a este dilema que n o sea insistir e n que utilice el atributo a1 t
con alglin texto descriptivo, d e mod0 que 10s usuarios a1 menos sepan d e lo que s e est5n
perdiendo (vea la secci6n 5.2.6.3). Recomendamos ampliamente que incluya estos atributos
de tamario porque nos gusta fomentar cualquier pdctica que mejore el desempeiio d e la red.

5.2.612 Atributos hspace y vspace

Los navegadores grificos por lo comlin no brindan mucho espacio entre una imagen y el texto
q u e la rodea. Y a menos q u e ponga un borde d e imagen transparente q u e amplie
el espacio que 10s separa, el tipico espacio de dos pixeles entre una imagen y el texto
5.2 Cdmo i n s m a r imdgenes en sus documentos 131

adyacente es apenas rninirno para el sentir de la rnayoria de 10s diseiiadores. Agregue una liga
a la irnagen y el borde especial a color negad cualquier espacio (borde) transparente que
usted haya disenado, y pondd rnis atenci6n a c6rno ajustar el texto adyacente a la irnagen.
Los atributos h s p a c e y vspace pueden dar a sus irnPgenes rnPs espacio. Con hspace, puede
especificar una cantidad de pixeles adicionales que desea entre la irnagen y el texto a 10s
lados izquierdo y derecho d e ella; el valor d e vspace es la cantidad de pixeles hacia arriba
y abajo d e la irnagen. En la figura 5-18 se rnuestra la diferencia entre dos irnagenes circun-
dadas por texto.

Sf Archiuo Edicion Ller Ir Marcadores Opciones Directorio Uentana

El kumquat es el rrh peqwfio de 10s

citricos, en apariencia similar a una
pequek naranja. No obstante, la
' sernejama termina en !a apariencia.
Mientras que las naranps por lo general
son dulces, los kumquats son en extremo
agrios. Para asegurarse, basta probar m.
La mayoria de las personas, aI probarlos
por prirnera vez, se preguntan c6mo es
~ U C CUgULCU
: p U I 1 Q LVIIDZL " U P . IU131I U ~ O S !

El kmquat es el mhs pequek de 10s

citricos, en apariencia similar a una
pequeiia naranja. No obstante, In
semejanza termina en la apariencia.
Mientras que las naranjas por lo general
son dulces, los kumquats son en
extremo agrios. Para asegurarse, basta
probar uno. La rnayoria de 1%
. - '
personas, al probarlos por primera vez,
se preguntan como es que alguen
podria comer otro, iDisfr&lo~!

Figura 5-18.Mejore h relacion i m u g d e x t o con 10s atrlbutos vspace y hspace.

4mg src=I8pics/kumquat.gifl' a1 ign=left>

El kumquat e s el mas pequeio de 10s c f t r i c o s , en apariencia similar a una
pequena naranja. No obstante. l a sernejanza termina en l a apariencia. Mientras que
l a s naranjas por l o general son dulces, 10s kumquats son en extremo agrios. Para
asegurarse, basta probar uno. La mayorfa de l a s personas, a1 probarlos por
primera vez, s e preguntan cdmo es que alguien podrfa comer otro. iDisfrGtelos!
<P'
4 m g s r c = " p i ~ s / k u m q u a t . g i f ~a~l i g n z l e f t hspace-10 vspace=lO>
El kumquat e s e l mas pequefio de 10s c f t r i c o s . en apariencia s i m i l a r a una
132 Capi2d.o 5: Llneas borlrontales, imdgenes y muItimedia

pequeha n a r a n j a . No obstante, l a semejanza termina en l a a p a r i e n c i a .

Mientras que l a s naranjas por l o general son dulces, 10s kumquats son en
extremo a g r i o s . Para asegurarse, basta probar uno. La mayorfa de l a s personas.
a1 probarlos por primera vez, se preguntan cbmo es que alguien podrfa comer
otro. iDisfrltelos!
Estamos seguros que estari d e acuerdo en que el espacio adicional en el lado d e la imagen
d e abajo facilita la lectura y hace mis atractiva la apariencia general d e la pigina.

5.2.6.13 Atributos tsmap y usemap

Los atributos ismap y usemap d e la etiqueta <img> indican a1 navegador que la imagen es
un mapa que incluye varias ligas en las que se puede hacer clic, comdnmente conocido
como mapa de imagen. El estilo i smap para 10s mapas de imagen, conocido como un mapa
d e imagen del lado servidor, s610 puede especificarse con una etiqueta d e liga <a>.
[<a*, 7.3.11
Por ejemplo:

El navegador envia d e forma automitica las coordenadas x,y del puntero del rat6n (en
relaci6n con la esquina superior izquierda d e la imagen) a1 servidor cuando el usuario hace
clic e n alguna parte d e la imagen etiquetada con i m a p . El programa servidor especial (el
programa /cgi-bidimagenedmapa2 en el ejemplo) puede entonces utilizar esas coordena-
das para determinar la respuesta.
El atributo usemap proporciona un mecanismo d e mapa d e imagen e n la computadora
cliente que elimina d e forma eficiente el procesamiento e n el lado servidor d e las coordena-
das del puntero del rat6n y 10s problemas y demoras d e red asociados. A1 utilizar las
etiquetas especiales <map> y <area>, quienes usan HTML para crear piginas web proporcio-
nan un mapa de coordenadas d e las regiones con ligas en la imagen etiquetada con usemap,
junto con el URL relacionado. El valor del atributo usemap es un URL que apunta a la secci6n
etiquetada con <map>. El navegador emplea las coordenadas d e la regi6n (del mapa) donde
se hizo clic para traducirlas en una acci6n especifica, como cargar y desplegar otro docu-
mento. [map*, 7.5.31 [*area*, 7.5.41
Por ejemplo, el siguiente c6digo secciona la imagen mapa2 . g i f d e 100 pixeles d e ancho
por 100 d e alto e n cuatro segmentos; si el usuario hace clic e n alguno d e ellos, salta a un
documento diferente. Observe tambiCn que hemos incluido, vilidamente, la funci6n d e
procesamiento d e mapas d e imigenes, i m a p , e n el ejemplo d e etiqueta <img>, d e mod0
que 10s usuarios d e diferentes navegadores sin la capacidad de interpretar usemap tengan
acceso a1 mecanismo alternativo del lado servidor para procesar el mapa d e imigenes:
<a h r e f = " / c g i -bi n/imagenes/mapa2">
<img src="pics/mapa2,gif" ismap usemap="#mapa2">
</a>
5.2 Cdmo insertar imdgenes en sus documentos 133

Los mapas geograficos son excelentes ejemplos de las etiquetas i smap y usemap: a1 explorar
las paginas electr6nicas d e una compafiia internacional, por ejemplo, el usuario puede hacer
clic dentro del mapa d e su naci6n para obtener las direcciones y ntlmeros telef6nicos d e las
filiales locales. La ventaja d e procesar el mapa d e imagen en el lado cliente con usernap es
que no se necesita un servidor especial y, asi, a diferencia del mecanismo i map, es posible
utilizarlo e n ambientes no web (sin red), digamos en archivos locales o e n discos compactos.
Por favor, lea nuestro analisis mas completo sobre anclas y ligas, que tambiCn incluye mapas
d e imagenes con ligas, en la secci6n 7.5.

5.2.6 14 Atn'butos name, odbort, onError y OnLoad

En la actualidad existen cuatro atributos para la etiqueta <img> soportados por Navigator
que le permiten utilizar JavaScript a fin d e manipular la imagen. El primer0 es el atributo
name, que le permite etiquetar la imagen de mod0 que un applet d e JavaScript pueda
hacerle referencia. Por ejemplo,

permite hacer referencias posteriores a esa imagen s61o como "kumquat" desde un applet
de JavaScript, quiz2 para borrarla o modificarla. En JavaScript no puede manipular de forma
individual una imagen si no le pone un nombre (name).
Los otros tres atributos le permiten proporcionar manejadores d e evento d e JavaScript. El
valor del atributo es un largo c6digo de JavaScript entrecomillado, que puede constar de
una o mas expresiones separadas por puntos y comas.
Navigator llama a1 manejador d e evento onAbort si el usuario detiene la carga de imagenes,
por lo general haciendo clic en el bot6n "Detener" del navegador. Puede, por decir algo,
utilizar un mensaje onAbort para advertir a 10s usuarios que estan deteniendo la carga de
una imagen importante, digamos un mapa d e imagenes (secci6n 6.5):
cimg s r c = " p i c s / k u m q u a t . g i f " usemap=''#mapal"
onAbort="wi ndow.al e r t ( ' A d v e r t e n c i a: e s t a imagen c o n t i e n e 1 igas i m p o r t a n t e s .
Se recomienda c a r g a r l a toda. I ) " >
El atributo onError es llamado si ocurre algtin error durante la carga d e una imagen, pero
no por una imagen perdida o cuya carga haya decidido detener el usuario. Quiz& el applet
puede intentar recuperarse del error o cargar una imagen distinta.
Navigator ejecuta el c6digo d e JavaScript asociado con el atributo onLoad d e la etiqueta
<img> despuCs d e que descarga y muestra la imagen.
Consulte la seccion 13.3.3para obtener mas informaci6n sobre JavaScript y sus manejadores
d e evento.
 134 Caphlo 5: Lfneas borfzontales, imdgenes y multimedia

5.2.6 15 Combinacidn de atributos de <img>

Puede combinar cualquiera de 10s varios atributos estandares y extensiones d e imageries
donde y cuando tenga sentido. No irnporta el orden de inclusidn de 10s diferentes atriburos
de la etiqueta <irng>, pero tenga cuidado de no utilizar atributos redundantes o no podra
predecir 10s resultados.

5.2.7 Extensiones de video

Las extensiones especiales de atributos controls, dynsrc, loop y start de la etiqueta
<irng> son linicos d e Internet Explorer y son extensiones a1 estandar d e HTML 3.2; le permi-
ten incluir video e imigenes.
El equivalente de esta funci6n en Navigator est5 disponible por medio de un programa
complementario conocido como conector oplug-in. Los conectores proporcionan funciones
adicionales a1 usuario. Para cada caso, el usuario debe localizar e instalar el conector apro-
piado antes d e que pueda ver el video. Las extensiones de la etiqueta <irng> de Internet
Explorer, por su parte, hacen que el desplegado de video sea una parte intrinseca del
navegador. [conectores, 13-21
Sin embargo, las actuales extensiones de video de Internet Explorer son muy limitadas; no
las soporta ninglin otro navegador y s610 se pueden utilizar con archivos de video con
formato de tip0 AVI (Audio Video Interleave), ya que Cse es el formato de reproducci6n
integrado e n Internet Explorer y habilitado e n Windows 95. Mas alin, las recientes mejorias
a la tecnologia de 10s navegadores, 10s applets en particular, pueden provocar que el intento
de Internet Explorer por extender la ya de por si sobrecargada etiqueta <irng> quede atras.

5.2.7.1 Atributo dynsrc

Utilice el atributo dynsrc d e la etiqueta <irng> para hacer referencia a un archivo AVI que
deba mostrar Internet Explorer. El parametro requerido es el URL del archivo, entrecomillado.
Por ejemplo, esta linea de c6digo muestra la etiqueta y atributo para el archivo AVI titulado
intro.avi:

El navegador aparta un puerto d e video independiente en la ventana y rnuestra el video y

audio, si lo hubiese, y claro, si su computadora puede reproducir sonido. Internet Explorer
maneja 10s videos etiquetados con el atributo dynsrc de manera similar a las imsgenes en
linea: con el contenido del cuerpo actual y de acuerdo con las dimensiones del marco de
video. Y, a1 igual que las imageries comunes, el archivo AVI a1 que dynsrc hace referencia
se despliega despuCs d e cargarlo desde el servidor. Puede cambiar estos valores predetermi-
nados y dar cierto control a1 usuario mediante otros atributos, como describimos mas adelante.
Debido a que otros navegadores ignoran hoy dia 10s atributos especiales de Internet Explorer
para video, pueden confundirse con una etiqueta <irng> que contenga mas que el necesario
5.2 Cdmo i n s m a r imdgenes en sus documentos 135

atributo src y el URL d e la imagen. Le recomendamos incluir el atributo src y URL del
archivo de imagen vAidos en todas las etiquetas <img>, incluyendo aquellos que hagan
referencia a un video para usuarios de Internet Explorer. Los otros navegadores despliegan
s61o imagen en lugar del video; Internet Explorer, e n cambio, hace lo contrario y reproduce
la pelicula, pero no muestra la imagen. Observe que no es importante el orden de 10s
atributos. Por ejemplo:

Internet Explorer carga y ejecuta el archivo AVI intro.aui; 10s otros navegadores griificos
cargan y despliegan la imagen imgestatica.giJ

52.72 Atn'buto controls

Por lo general. Internet Explorer reproduce una vez un video e n un puerto d e video
enmarcado, sin ningOn control visible para el usuario, quien puede reiniciar, detener y
continuar la ejecuci6n del video haciendo clic dentro del puerto d e video. Utilice el atributo
controls (sin valor) para agregar controles visibles en el puerto de video para que el
usuario pueda, con el raton, reproducir, adelantar, regresar, detener y poner e n pausa
el video, a1 igual que en un reproductor de video. Si el video incluye un archivo d e sonido,
Internet Explorer tambien proporciona un control para el volumen. Por ejemplo:
cimg dynsrc="videos/intro.avi " controls s r c = " p i c s / i m g e s t a t i c a . g i f l ' >
agrega 10s diferentes controles d e ejecucion a la ventana d e video del archivo intro.aui,
como s e muestra e n la figura 5-19.

Internet Explorer le pelmite UU,~..- ablurur uc s.uru =.. -.=a

Figtlru 5-19. El utributo controls agregu controles de reproduccidn de video.

136 Capitulo 5: Lfneas borizontales, imdgenes y multimedia

5.2.13 Atrlbuto loop

Internet Explorer por lo general ejecuta un video s61o una vez, de principio a fin, despuCs
de descargarlo. El atributo 1oop de la etiqueta <irng> del video le permite repetirlo un
numero de veces establecido por el valor del atributo, o repetirlo de forma constante cuan-
d o el valor es igual a i nf i n i te. Pese a esto, el usuario puede cortar el ciclo haciendo clic en
la imagen, en el b o t h de detener, si se presentan controles (secci6n anterior) o pasando a
otro documento.
El siguiente video, i ntro. avi , se ejecutara de principio a fin y despuCs volvera a ejecutarse
nueve veces mhs:

A su vez, el siguiente video se ejecutarh un nlimero ilimitado de veces:

Repetir el video no necesariamente es molesto. Algunos efectos de animaci6n especiales,

por ejemplo, son una secuencia de cuadros o segmentos repetidos. En lugar de encadenar
10s segmentos redundantes en uno, un archivo de video que alarga su lapso de descarga
solo muestra un breve segment0 o cuadro.

5.2. Z 4 Atributo start

Por lo general, un archivo de video para Internet Explorer se ejecuta a1 momento de su
descarga. Usted puede modificar este comportamiento con el atributo s t a r t de la etiqueta
cirng> del video. A1 establecer su valor como mouseover, puede retrasar la reproduccion
hasta que el usuario pase el puntero del raton sobre el puerto del video. Otro valor para el
atributo s t a r t es f i1eopen, predeterminado: inicia la reproducci6n en seguida de la descar-
ga. Esth incluido porque ambos valores se pueden combinar en el atributo s t a r t para hacer
que el video se ejecute de forma automatics despuCs de descargarse y cuando el usuario
pase el puntero del rat6n por su puerto. Agregue una coma para separar 10s valores, sin
espacios, o enciCrrelos entre comillas si 10s combina.
Por ejemplo, nuestro hasta ahora desconocido video intro. avi se reproducirh cuando el
usuario cargue el documento de HTML que lo contiene y siempre que pase el puntero del
rat6n sobre el area del video:

5.2.75 Cdmo combinar los atrlbutos de video de <img>

Maneje 10s videos para Internet Explorer como cualquier imagen, esto es, combine y haga
corresponder 10s diferentes videos especificos, igual que 10s atributos y valores estfindares y
5.3 Colores del documento e imdgenes de fondo 13 7

extendidos de la etiqueta <irng> soportados por el navegador. Por ejemplo, puede alinear el
video (o su imagen alterna, si se despliega en otro navegador) a la derecha de la ventana del
navegador:

Es litil combinar 10s atributos para lograr un efecto especial. TambiCn es recomendable
combinarlos para dar control a1 usuario cuando sea apropiado. Por poner un caso, si progra-
ma un video para que se repita de forma indefinida, tambiCn es conveniente incluir el
atributo c o n t r o l s , de mod0 que el usuario pueda detener la ejecuci6n sin abandonar
el documento de HTML.
Como sefialamos e n la secci6n 5.2.7.4, a1 combinar atributos tambiCn puede retardar la
reproducci6n hasta que el usuario pase el punter0 del rat6n sobre el area del video. Asi, Cste
cobra vida y se reproduce continuamente:

5.3 Colores del documento e imdgenes

defondo
El estandar de HTML 3.2 proporciona ciertos atributos para la etiqueta <body> que permiten
a1 programador de HTML definir texto, ligas y colores de fondo e n 10s documentos, ademas
de permitirles definir una imagen como el fondo del documento. Internet Explorer extiende
estos atributos para incluir margenes de documento y mejor control de la imagen de fondo.
Y, por supuesto, las mas recientes tecnologias de hojas de estilo integradas e n 10s navegadores
le permiten manipular todos estos parametros de desplegado.

5.3.1 Extensiones de la etiqueta <body>

Los atributos que controlan el fondo, color de texto y margenes del documento se utilizan
con la etiqueta <body>. [*body*, 3.7.11

5.3.1.1 Atributo bgcoZor

Puede cambiar el color de fondo predeterminado de la ventana del navegador con el atribu-
to bgcolor de la etiqueta <body>. A1 igual que el atributo c o l o r de la etiqueta < f o n t > , el
valor requerido del atributo bgcol o r puede expresarse de dos formas: como 10s componen-
tes rojo, verde y azul (RGB) del color deseado, o como un nombre de color estandar. El
apCndice F es un estudio completo de la codificaci6n e n RGB junto con una tabla de
nombres de colores validos que puede utilizar con el atributo bgcol o r .
Es fiicil establecer colores de fondo. Para obtener un fondo rojo con la codificaci6n RGB
introduzca:

Para un fondo m5s suave, pruebe:

<body bgcol or=peach>

5.3.1.2 Atributo background

Si no es suficiente un color, tambiCn puede colocar una imagen e n el fondo de un documen-
to con el atributo background d e la etiqueta <body>.
El valor requerido del atributo background es el URL de la imagen. El navegador repite de
forma automhtica (en mosaico) la imagen tanto horizontal como verticalmente para Ilenar
toda la ventana.
Por lo general, es conveniente elegir una imagen un tanto opaca y pequefia para crear un
patr6n d e fondo interesante pero no agresivo. Ademss, una imagen sencilla y pequeiia
atraviesa la red m5s r5pido que una compleja imagen de pantalla completa.
La figura 5-20 muestra c6mo 10s navegadores m5s modernos presentan mliltiples veces un
ladrillo para crear una pared para el fondo del documento:
<body background="pics/l a d r i 1 lo.gifl'>

6 Archivo Edicion Uer Ir Marcedores Opciones Oirectorio Uentana

gm- - ~ r j d
... Netscape: E l atributo background pare fondo de un documento

Ffgura 5-20. U n ladrillo se multipltca en u n fondo de Navigator.

Las im5genes d e fondo d e diferentes dimensiones y tamafios crean interesantes efectos

verticales y horizontales. Por ejemplo, una imagen alargada y delgada puede formar el titulo
de su documento:
<body background="pics/fuente~vertical .gi f " >
<h3>La leyenda del kurnquat</h3>
Durante s i glos, han surgido mi t o s y leyendas sobre 10s kumquats.
5.3 Colores del documento e inadgenes de fondo 139

Si la imagen Juente-uellical.giffuera angosta y alargada y su color se desvanece gradual-

mente y su longitud excede del tamaAo del cuerpo del documento, el resultado podria
parecerse a1 d e la figura 5-21.

-
6 flrchiuo Edicion Uer I r Marcadores Oociones Directorio Uentana
Netscape: E l atributo background para un fondo horizontal -S?SEZ@"

Ftgura 5-21. Unfondo alto y angosto.

Puede lograr un efecto horizontal similar con una imagen que sea mAs ancha que larga
(figura 5-22).

6
- flrchivo Edicion Uer I r Marcadores Oociones Directorio Uentana
?D- Netscape: E l atributo background para un fondo vertical ZEEZZZlZi

J [H

Ftgura 5-22. Unfondo alagado y angosto.

140 Capftulo 5: Lfneas borlrontales, imdgenes y multimedia

5.3.1.3 Atributo bgproperties

El atributo bgproperties de la etiqueta <body> es exclusivo d e Internet Explorer y s61o
funciona junto con el atributo background. El atributo bgproperties tiene un valor cinico,
fixed, el cual inmoviliza la imagen d e fondo en la ventana del navegador, de mod0 que no
se desplaza con el resto del contenido d e la ventana. Asi, la imagen d e fondo H20.gifdel
ejemplo sirve como un diseiio translcicido (mancha d e agua) para el documento:

5.3.1.4 Atributo text

Una vez que altera el color o agrega una imagen a1 fondo del documento, quiz5 deba ajustar
el color del texto para asegurar que 10s usuarios puedan leerlo: El atributo text d e la
etiqueta <body> hace justamente eso: establece el color d e todo el texto normal en todo el
documento.
Asigne un color a1 atributo text del mismo mod0 que define un color d e fondo (vea la
explicaci6n anterior sobre bgcolor): con una combinaci6n RGB o un nombre d e color,
como s e describe en el a p h d i c e F. Por ejemplo, para producir un documento con texto en
color azul sobre un fondo amarillo palido utilice:
<body bgcol or="R7777OO" text="bl ue">
Por supuesto, es mejor elegir un color de texto que contraste con el color o imagen d e
fondo.

5.3.1.5 Atributos link, ulink y alink

Los atributos 1 ink, vl ink y a1 ink de la etiqueta <body> controlan el color del hipertexto
(etiqueta <a>) en sus documentos. Los tres aceptan valores que especifican un color como
una tripleta RGB o un nombre d e color (en inglCs), como 10s atributos text y bgcol or.
El atributo 1 ink determina el color d e todas las ligas que el usuario n o ha seguido. El
atributo vl i nk establece el color d e todas las ligas que el usuario ya sigui6. a1 ink define un
color para el texto activo d e una liga, el que el usuario ya seleccion6 y esta debajo del
punter0 sin que oprima ningcin b o t h del rat6n.
A1 igual que el color del texto, debe ser cuidadoso a1 seleccionar colores para las ligas que
puedan leerse a1 ponerlas sobre el color d e fondo. Ademas, el color d e las ligas debe ser
distinto a1 del texto normal.

5.3.1.6 Atributo kjlmargin

Particular d e Internet Explorer, el atributo 1eftmargi n d e la etiqueta <body> permite indentar
el margen izquierdo con relaci6n a1 extremo izquierdo d e la ventana del navegador, d e un
5.3 Colores del documento e imdgmes defondo 141

mod0 muy similar a1 margen e n una hoja de papel. Otros navegadores ignoran este atributo
y ajustan normalmente el contenido del cuerpo de texto a1 extremo izquierdo d e la ventana
del documento.
El valor del atributo 1eftmargi n es un nGmero entero de pixeles para la indentaci6n respec-
to a1 margen izquierdo; el valor 0 es el predeterminado. El margen se llena con el color o
imagen d e fondo.
Por ejemplo, Internet Explorer presenta el siguiente texto justificado contra un margen d e 5 0
pixeles con respecto del extremo izquierdo de la ventana del navegador (figura 5-23):
<body 1eftmargi n=5O>
I n t e r n e t Explorer 1e permi t e i ndentar e l cbr>
& I t ;-margen i zqui erdocbr>
r e s p e c t o a1 extremo izquierdo de l a ventana.
</body>

I Intelner Explorer le pennite indentar el

=- -margen hquicrdo
, respecto al e m e m o iaquierdo de la ventana

Figtrra 5-23.El atrtbuto Zef tmargin de Internet Explorerpara indentar el contenido del
cuerpo de tato.

5.3.1.7 Atributo topmargin

Al igual que 1 eftmargin, la extensi6n de atributo topmargin actualmente es exclusiva de
Internet Explorer. Puede incluirla e n la etiqueta <body> para establecer un margen en la
parte superior del documento, el cual se llena con el color o imagen d e fondo del docu-
mento.
El contenido del documento comienza a fluir por debajo del ncmero d e pixeles que especi-
fique como el valor para topmargin; 0 es el valor predeterminado.
Por ejemplo, Internet Explorer presenta el siguiente texto al menos 5 0 pixeles por debajo
del extremo superior d e la ventana del navegador (figura 5-24):

</center>
I n t e r n e t Explorer puede d a r a 10s documentos
un poco d e e s p a c i o e x t r a a1 encabezado.
</body>
142 Capirulo 5: Lfneas borlzontales, imdgenes y mulilmedfa

&clun, Ed'zrSn 'Jec Ira F:,.vril~ <*YJ~!~>

Figurn 5-24. El atributo lopmargin de Internet Explorerpara bajur el contmido del cuerpo
de texto.

5.3.1.8 Atributos style y class

TambiCn puede establecer las caracteristicas de la etiqueta <body> relacionadas con el estilo
y algunas con hojas de estilo d e HTML. Pero, aunque puede incluir el atributo sty1 e e n la
etiqueta <body> para crear un estilo para todo el contenido del cuerpo de texto, le recomen-
damos que establezca 10s estilos para todo el cuerpo de texto a nivel del documento (con la
etiqueta <sty1 e> e n el encabezado de documento) o mediante una hoja d e estilo a nivel
colecci6n (importada). Utilice el atributo c l a s s y el valor name para aplicar el estilo apropia-
d o de una clase predeterminada de la etiqueta <body> al contenido. (Como s61o puede
haber un cuerpo de texto por documento, jcuiil es el objeto d e establecer un nombre de
clase?) En el capitulo 9 se estudia el uso de las definiciones d e estilo y clase.

5.3.1.9 Combinacidny cowespondencia de atributos del cuerpo de texto

Aunque 10s atributos background y bgcolor pueden aparecer en una misma etiqueta <body>.
una imagen de fondo ocultarh el color de fondo a menos que tenga sustanciales partes
transparentes, como lo describimos antes e n este capitulo. Pero incluso si la imagen cubre el
color d e fondo, animese e incluya el atributo bgcol or con un valor d e color apropiado. Esto
asi porque 10s usuarios pueden desactivar la carga automiitica de imiigenes, que incluye a
las imhgenes de fondo, y puede parecer la phgina desnuda y desagradable. Mhs aGn, sin un
atributo bgcol or o sin una imagen de fondo descargada (por cualquier razbn), los navegadores
casi ignoran su texto y atributos de color, regresando asi a sus propios valores predetermi-
nados o a 10s seleccionados por el usuario.

5.3.2 Cdmo extender una advertencia

Las diferentes extensiones de color e imagen trabajan muy bien, sobre todo las de color.
suponiendo que todos los usuarios tienen un monitor d e a1 menos 256 colores, mucha memoria
disponible, un ancho de banda de red ilimitado y una buena resoluci6n. En realidad, muchos
usuarios tienen monitores monocrom5ticos o de color limitado, memoria limitada para alma-
cenar imiigenes, un ancho de banda extremadamente restringido y escasa resoluci6n.
5.3 Colores del documento e imdgenes de fondo 143

Debido a estas limitaciones, debe considerar muy seriamente no utilizar en sus documentos
ninguna de estas extensiones. De manera muy similar a 10s primeros usuarios d e Macintosh
que se sentian compelidos a crear documentos utilizando tipografia d e muestrario ("tengo
40 fuentes y jvoy a utilizarlas todas!"), muchos desarrolladores no pueden evitar agregar
cierta clase de fondo texturizado a cada documento que crean (''tengo 13 muestras d e
maderas y 22 clases d e marmoles; jvoy a utilizarlos todos!").
En realidad, excepto por 10s muy ingeniosos, 10s fondos texturizados no agregan informa-
ci6n a 10s documentos. El valor de un documento casi no reside e n sus texturas e imageries,
ni e n el patr6n m6vil azul aplicado a1 fondo. No importa cuan ingeniosos parezcan, 10s
lectores no se benefician y el documento podria perder legibilidad.
Le sugerimos no utilizar las extensiones del atributo color, excepto para efectos d e frivola
comparaci6n o a menos que la e x t e n s i b e n realidad agregue valor a1 documento, como e n
paginas de publicidad o de cakilogos.

5.3.2.1 Problemas con i d g e n e s defondo

Estos son algunos d e 10s problemas que pueden surgir con las imagenes d e fondo:
El tiempo d e carga del documento se incrementa lo necesario para cargar la imagen de
fondo. Hasta que esta queda descargada e n su totalidad no es posible presentar el
documento.
La imagen d e fondo ocupa espacio e n la memoria cache local del navegador, despla-
zando otras imagenes que puedan contener e n realidad informaci6n dtil. Esto hace que
otros documentos, que incluso puedan no tener fondos, tarden mucho para descar-
garse.
Los colores e n la imagen pueden no estar disponibles e n el monitor del usuario, forzan-
d o a1 navegador a alterar la imagen. Esto remplaza extensas areas d e un solo color con
patrones repetidos de varios otros colores parecidos, per0 difusos y que pueden dificul-
tar la lectura del texto.
Como el navegador debe desplegar una imagen e n el fondo, contrariamente a llenar el
area con un solo color, puede retardar el desplazamiento por todo el documento.
Incluso si apareciera claro e n pantalla, el texto impreso sobre una imagen invariable-
mente resulta mas dificil, si no imposible de leer.
Las fuentes pueden variar demasiado entre computadoras; las que utilice en su navegador
y funcionen bien e n un patr6n por lo general pueden lucir dentadas y dificiles de leer
en otras maquinas.

5.3.2.2 Problemas con colores de fondo, texto y figas

TambiCn encontrara serios problemas si juega con 10s colores de fondo; entre ellos:
144 Capituib 5: L f n e a s borizontales, imdgenes y muWmedia

El color que elija, aunque le parezca encantador en sus hojas, puede lucir terrible a 10s
ojos del usuario. iPor quk molestarlos cambiando lo que 10s usuarios ya definieron
como su propio color predeterminado de fondo?
Aunque quizis usted sea un miembro de la secta del "texto claro sobre fondo oscuro",
muchas personas pertenecen a1 bando del "texto oscuro sobre fondo claro", que ha sido
consistentemente popular durante 10s ~ltirnostres mil aiios, nada mis. En lugar de
seguir esta tendencia, suponga que el usuario ha configurado su navegador a una
adecuada combinaci6n de color.
Algunos usuarios no distinguen 10s colores. Lo que a usted puede parecerle una combi-
naci6n fabulosa puede resultar completamente ilegible para otros. Una combinaci6n
que e n particular debe evitar es el verde para las ligas no visitadas y rojo para las
visitadas. Muchas personas tienen conflict0 para distinguir 10s colores rojo y verde.
Su brillante tono puede no estar disponible e n el monitor del usuario y el navegador
puede quedar forzado a elegir un color e n su lugar. Para monitores con muy pocos
colores (como 10s varios millones de miquinas basadas e n Windows con monitores
VGA de 16 colores todavia e n uso), colores parecidos de texto y fondo pueden quedar
del mismo color.
Por las mismas razones anteriores, las ligas activas, las no visitadas y las visitadas pue-
den aparecer del mismo color e n monitores de color limitado.
A1 cambiar colores de texto, e n particular 10s d e ligas visitadas y no visitadas, puede
confundir a1 usuario. A1 cambiar estos colores, 10s fuerza efectivamente a experimentar
con su p4gina, haciendo clic en algunas ligas en diferentes partes para descifrar su
combinaci6n de color.
La mayoria de 10s diseiiadores de p4ginas no tienen un entrenamiento formal e n psico-
logia cognoscitiva, artes grfificas ni diseiio industrial, y aun asi se sienten completamen-
te capaces de elegir colores apropiados para sus documentos. Si debe jugar con 10s
colores, solicite a un profesional que 10s elija por usted.

5.3.2.3 Y de nuevo
No negamos el hecho de que estas extensiones dan como resultado documentos de HTML
espectaculares. Y son divertidas para navegar y experimentar. Asi que, e n lugar de dejar esta
secci6n e n una agria nota de advertencia, le sugerimos seguir con su experimentation
cuidadosa.

5.4 Audio de fondo

Hay otra forma de multimedia e n linea, casi siempre disponible a quienes navegan por el
Web: audio. La mayoria de 10s navegadores manejan el audio como documentos indepen-
dientes, descargados y desplegados por aplicaciones de ayuda especiales: 10s conectores o
5.4 Audio de fondo 145

plug-ins. Internet Explorer, por su parte, contiene un decodificador de sonido integrado y

soporta una etiqueta d e HTML especial que le permite integrar un archivo de audio que se
ejecuta como tema musical d e su p5gina. [applets,13.11 [plug-ins13.21
Ofrecemos un aplauso a 10s disefiadores de Internet Explorer por proporcionar un mecanis-
mo que integre d e forma mas transparente audio a 10s documentos d e HTML. Y las posibi-
lidades con audio son muy atractivas. Pero a1 mismo tiempo, advertimos a quienes crean
p4ginas con HTML que 10s atributos y etiquetas especiales para audio no funcionan e n otros
navegadores y aunque Cste es un mCtodo que la mayoria de ellos soportad a fin d e cuentas,
no queda del todo garantitado. De mod0 que sea cuidadoso.

5.4.1 Etiqueta <bgsound>

Utilice la etiqueta <bgsound> para reproducir audio de fondo. Esta etiqueta es s610 para
documentos orientados a Internet Explorer; todos 10s d e m b navegadores la ignoran. Con ella
se descarga y ejecuta un archivo d e audio cuando el usuario obtiene por primera vez el
documento d e HTML anfitri6n y se reproduce e n su navegador. El archivo de sonido de fondo
tambiCn volver5 a transmitirse siempre que el usuario restabletca el desplegado del navegador.

<bgsound> 0
Funcion:
Reproduce un archivo de audio como fondo del documento
Atributos:
LOOP
SRC
Etiqueta de fin:
Ninguna
Contiene:
Nada
Utilizada en:
Cuerpo de texto

5.4.1.1 Atributo src

El atributo src e s necesario para la etiqueta <bgsound>. Su valor hace referencia a1 URL del
archivo d e audio relacionado. Por ejemplo, cuando el usuario de Internet Explorer descarga
por primera vez un documento de HTML que contenga la etiqueta:

escuchar4 el archivo de audio bienvenido.wau - q u i t a s un saludo- que se reproducid una

vet que estC e n el sistema d e audio de su computadora.
146 Capftub 5: Lineas bortzontales, imdgenes y multfmedia

En la actualidad, Internet Explorer puede manejar tres formatos de archivo de sonido dife-
rentes: wav, el formato nativo para la PC; au, el formato nativo para la mayor parte de
estaciones de trabajo UNIX; y MIDI, un esquema de codificaci6n de mlisica universal (vea
tambiCn la tabla 5-1).

Tabla 5-1.Formatos de multimedia cornunes y extensiones de nombres de archivo respectivos

GIF Irnagen g!f Cualquiera

JPEG Irnagen J P ~jp%
J JPe Cualquiera
XBM Irnagen xbm UNIX
TIFF Irnagen tif; tlff Cualquiera
PICT Irnagen pic, pict Cualquiera
Trarnas Irnagen ras Sun
MPEG Video mPg7 mpeg Cualquiera
AVI Video avi Microsoft
QuickTime Video qt, mov Apple
AU Audio au,snd Sun
WAV Audio wav Microsoft
AIFF Audio aif;aiff Apple
MIDI Audio midi, mid Cualquiera
Postscript Documento PS, eps, ai Cualquiera
Acrobat Documento Pdf Cualquiera

5.4.1.2 Atributo b o p

A1 igual que el video en linea, el atributo 1 oop de la etiqueta <bgsound> le permite volver a
reproducir un archivo de audio cierta cantidad de veces (incluso infinitamente), a1 menos
hasta que el usuario se mueva a otra p5gina o salga del navegador.
El valor para el atributo 1oop es el nlimero entero de veces que se debe ejecutar el archivo
de sonido, o i n f i n i t e , que hace que se repita indefinidamente.
Por ejemplo:
<bgsound src="audi o/ti ntan .wavM 1 oop=lO>
repite diez veces el archivo de sonido tintan.wau, mientras

lo ejecuta continuamente.
5.5 Texto anfmado 147

5.4.2 Soporte alternative de audio

Hay otras formas de incluir audio e n sus documentos, con mecanismos m5s generales que
soportan tambiCn otros medios incmstados. La alternativa m5s c o m h para <bgsound> es la
etiqueta <embed>, originalmente implementada por Navigator. Debido a su naturaleza m5s
general, en la secci6n 13.2 estudiamos la etiqueta <embed>.

5.5 Texto animado

En lo que parece ser un esfuerzo para crear publicidad rApida, Internet Explorer ha agregado
a HTML una forma de texto animado. La animaci6n es simple -text0 que se desplaza hori-
zontalmente por el monitor- pero efectivo para mover bandas de texto y otros elementos que
animan ficil y claramente documentos estlticos. Por otro lado, a1 igual que la etiqueta <bl ink>,
el texto animado puede ser inapropiado y molesto para el lector. Utilicelo con precaution.

5.5.1 Etiqueta <marquee>

La etiqueta <marquee> define el texto que se desplaza por el monitor del usuario de Internet
Explorer.
La etiqueta <marquee> s61o puede usarse para Internet Explorer y es una extensi6n a1
estlndar de HTML 3.2. El texto entre la etiqueta <marquee> y su necesaria etiqueta de fin, </
marquee>, se desplaza horizontalmente por el monitor. Los diferentes atributos de esta
etiqueta controlan el tamaiio del 5rea de desplegado, su apariencia, alineacion con el texto
que la rodea, asi como la velocidad con que se desplaza.
La etiqueta <marquee>, junto con sus atributos, es ignorada por 10s demls navegadores,
aunque n o su contenido, que se despliega como texto estltico, sin n i n g h tip0 de alineacion
ni manejo especial determinado por 10s atributos de la etiqueta.

5.5.1.1Atributo aLign
Internet Explorer coloca el texto de la etiqueta <marquee> e n el contenido que lo rodea
como si fuera una imagen incmstada. Como resultado, puede alinear la marquesina e n el
texto alrededor.
El atributo a1 ign acepta un valor: t o p (amba), m i d d l e (en medio) o bottom (abajo), lo que
significa que el punto especificado de la marquesina quedari alineado con el punto corres-
pondiente e n el texto alrededor. Asi:

alinea la parte superior del 5rea de la marquesina con la parte superior del texto alrededor.
Vea tambien 10s atributos h e i g h t y w i d t h (alto y ancho); hspace y vspace (espacios vertical
y horizontal) que se estudian mls adelante en este capitulo y que controlan las dimensiones
de la marquesina.
148 Capt3utulo 9Lfneas borlzontales, fmdgenesy multimedia

Funcion:
Crea una rnarquesina d e texto desplazhdose
Atributos:
ALIGN
BEHAVIOR
BGCOLOR
CLASS
DIRECTION
HEIGHT
HSPACE
LOOP
STnE
SCROLLAMOUNT
SCROLLDELAY
VSPACE
WIDTH
Eticjueta de fin:
</marquee>; no se ornite
Contiene:
Texto
Utilizada en:
Cuerpo ak texto

5.5.1.2 Atrfbutos behavioc directiony loop

Juntos, estos tres atributos d e comportamiento, direcci6n y ciclo controlan el estilo, direc-
ci6n y duraci6n del desplazamiento d e la rnarquesina.
El atributo behavior acepta tres valores:
s c roll (predeterminado)
El valor d e scroll hace que la rnarquesina actfie como una gran rnarquesina en una
plaza d e gran fama: su area aparece vacia a1 principio; despues el texto se desplaza en
un sentido (definido por el atributo direction) hasta llegar a1 otro extrerno d e la mar-
quesina y desaparecer para que Csta quede vacia d e nuevo.
slide
Este valor hace que la rnarquesina inicie sin contenido. Luego el texto se desplaza a
partir de una direcci6n (definida por el atributo direction), se detiene a1 llegar a1 otro
extremo y permanece e n pantalla.
a1 t e r n a t e
Especificar el valor a1 ternate como un parametro del atributo behavior hace que la
marquesina inicie con el texto completamente visible en un extremo de su Qrea. Des-
pues el texto se desplaza hasta llegar a1 otro extremo, regresa e n direcci6n contraria y
circula de regreso a1 punto de partida.
Si n o especifica un comportamiento (behavior), el predeterminado es scroll
El atributo di rect i on establece la direcci6n e n que se desplazar5 el texto de la marquesina.
Los valores aceptables son 1e f t (izquierdo, el predeterminado) o r i gh t (derecho). Observe
que el extremo de inicio del desplazamiento es el opuesto a la direcci6n: 1 e f t significa que
el texto inicia e n el extremo derecho de la marquesina y que se desplaza hacia la izquierda.
Recuerde tambien que el texto que circula hacia la derecha se leer5 de forma contraria.
El atributo 1oop determina cuQntasveces circular5 el texto de la marquesina. Si proporciona
un valor entero, el desplazamiento se repite ese ntimero de veces; si el valor es igual a
i nfi ni t e , se repetirQ hasta que el usuario se rnueva a otro documento con el navegador.
Pongamos juntos algunos de estos atributos:
marquee a l i g n = c e n t e r l o o p = i n f i n i t e >
Los kumquats nos son indigestos
. . . . .. . . iTambien tienen un muy buen sabor!
</marquee>
El mensaje del ejemplo comienza a1 extremo derecho de la ventana de desplegado (direc-
ci6n predeterminada), se desplaza hacia la izquierda a lo largo de la ventana de Internet
Explorer y cornienza de nuevo hasta que el usuario pasa a otra p5gina. Observe la sucesi6n
de puntos y espacios que funcionan como "cola". No puede unir marquesinas.
Asimismo, el estilo de desplazamiento sl i de aparece muy espasmoso cuando se repite y
so10 debe hacerse circular una vez. Otros comportamientos de desplazamiento son adecua-
dos cuando se repiten.

5.5.1.3 Atributo bgcolor

El atributo bgcol or le permite cambiar el color de fondo del 5rea de la marquesina. Acepta
una tripleta RGB, o uno de 10s nombres de colores estQndares.Consulte el apendice F para
leer un estudio completo sobre ambos mktodos de especificaci6n.
Para crear un Qrea de la marquesina cuyo color sea amarillo:
unarquee bgcol or=yel 1ow>

5.5.1.4 Atributos heighty width

Los atributos hei ght y width (alto y ancho) determinan el tamaiio del Qrea de la marquesi-
na. Si no la especifica, esta 5rea se extiende a toda la ventana de Internet Explorer y se
ajusta lo suficiente para encerrar el texto.
150 Capirulo 5: Lfneas borfzontales, imdgenes y multimedia

Ambos atributos aceptan ya sea un valor numCrico, indicando el tamafio absoluto e n pixeles,
o un porcentaje, indicando el tamaiio como un porcentaje de alto y largo de la ventana del
navegador.
Por ejemplo, para crear una marquesina de 50 pixeles de alto y que ocupe un tercio del
ancho de la ventana, introduzca:

Aunque por lo general es buena prlctica asegurar que el atributo height sea lo suficientemente
amplio para contener el texto encerrado, resulta comdn especificar un ancho menor a1 texto
contenido. En este caso, el texto circula por el lrea de marquesina d s pequeiia, dando por
resultado un tipo d e marquesina de "revisi6nwmuy conocido para la mayona de 10s usuarios.

551.5 Atributos hspace y vspace

Los atributos hspace y vspace (espacios horizontal y vertical) le permiten crear espacio
entre la marquesina y el texto que la ocupa. Esto por lo general hace que la marquesina
resalte del texto que la circunda.
Ambos atributos necesitan un valor entero que indique el espacio deseado e n pixeles. El
atributo hspace crea un espacio a la izquierda y a la derecha de la marquesina; vspace lo
crea por arriba y debajo d e ella. Para crear un espacio de 10 pixeles alrededor de la marque-
sina, por ejemplo, use:

5.5.1.6 Atributos scroUamount y scrolldehy

Estos atributos controlan la velocidad y suavidad del desplazamiento del texto de la marquesina.
El valor del atributo scroll amount es la cantidad de pixeles necesarios para mover texto
sucesivamente durante el desplazamiento. Los valores menores significan m5s despacio,
aunque las cantidades mayores crean texto que se desplaza m5s dpido, aunque es mas
dificil leerlo.
El atributo scroll del ay le permite establecer una cantidad de milisegundos d e espera entre
movimientos sucesivos del desplazamiento. Mientras menor sea este valor, serl mls rlpido
el desplazamiento.
Puede utilizar un scroll delay con un valor bajo para mitigar la lentitud d e un scroll amount
suave y bajo. Por ejemplo,
marquee scrol lamount=l scrol l d e l a y = l >

desplaza el texto un pixel para cada momento, pero lo hace tan d p i d o como sea posible. En
este caso, la velocidad de desplazamiento queda limitada por las capacidades de la compu-
tadora donde se ejecuta el navegador.
5.6 Oho contenido mukimedia 151

55.1.7 Atrfbutos styley class

El atributo s tyl e d e la etiqueta <marquee> crea un estilo especifico para el texto contenido
e n la etiqueta, cancelando cualquier otra regla de estilo e n acci6n. El atributo c l a s s le
permite dar formato a ese texto de acuerdo con una clase predefinida de la etiqueta qnarquee>;
su valor es el nombre de esa clase. [atributo style, 9.1.11[atributo class, 9.2.41

5.6 Otro contenido multimedia

El Web esti abierto a todos 10s tipos de contenido que pueden intercambiar entre si 10s
servidores y 10s navegadores. En esta secci6n revisaremos una forma diferente de hacer
referencia a imigenes, junto con audio, video y otros formatos de documento.

5.61 Contenido incrustado y contenido

referenciado
Las imigenes gozan de cierto status entre 10s diferentes medios que pueden incluirse en
documentos de HTML para que casi todos 10s navegadores las desplieguen en linea junto
con otro contenido. No obstante, a veces, como hemos visto en este capitulo, tambien
puede hacer referencia externa a imigenes, en particular a las de gran extensi6n cuyos
detalles son importantes, per0 no inmediatamente necesarios para el contenido del docu-
mento. Puede hacer referencia a otros elementos multimedia, incluyendo audio y video
digital, como documentos externos e independientes del actual.
Por lo general debe utilizar la etiqueta de liga (<a>) para enlazar elementos multimedia
externos con el documento actual. A1 igual que otros elementos enlazados en 10s que el
usuario puede hacer clic, el navegador descarga el objeto multimedia y lo presenta
a1 usuario, quizi con la asistencia de una aplicaci6n externa o conector. El contenido a1 que
hace referencia siempre tiene asociado un proceso de dos pasos: presentar el documento
que enlaza a1 objeto multimedia deseado y despues el objeto en si si el usuario hace clic en
la liga. [<a>,7.3.11
En el caso de imigenes, puede especificar c6mo presentarlas a1 usuario: e n linea (esto es,
dentro del documento actual) e inmediatamente disponibles por medio de la etiqueta <img>,
o mediante una referencia y disponible mediante la etiqueta <a>. Si sus imfigenes son
pequeiias y vitales para el documento actual, debe ponerlas e n linea (integradas a1 docu-
mento). Si son grandes o s61o un elemento secundario para el documento actual, p6ngalas
disponibles como contenido de referencia mediante la etiqueta <a>.
Si decide distribuir las imigenes usando la etiqueta <a>, es una cortesia para sus lectores
indicar su tamaiio y quizi proporcionar una muestra de ellas e n miniatura. Asi, 10s usuarios
pueden determinar si vale la pena el tiempo y costo de transferencia.
152 Capftulo 5: Lfneas borlrontales, fmdgenes y multimedia

5.42 Audio, video e imdgenes por referencia

En un documento de HTML puede hacer referencia a cualquier documento extemo, inde-
pendientemente de su tip0 o formato, mediante una liga convencional (<a>):
El <a href="audio/himno.au"> Himno del cultivador de Kumquats</a> es una
fuente inagotable de inspiraci6n para 10s cientos de cultivadores de esa
fruta alrededor del mundo.
Como cualquier documento referenciado, el servidor entrega a1 navegador el objeto multimedia
deseado cuando el usuario hace clic en la liga. Si el navegador detecta que el documento no
es de HTML sin0 de otro formato, invoca de forma autom5tica una herramienta apropiada
para desplegarlo o transmite el contenido del objeto a1 usuario.
Puede configurar su navegador con aplicaciones adicionales de ayuda que manejen diferen-
tes formatos de documento de formas distintas. Los archivos de audio, por ejemplo, pueden
pasarse a una herramienta de reproducci6n de audio; 10s archivos de video se entregan a
una herramienta de reproducci6n de video. Si un navegador no ha sido configurado para
manejar un formato de documento en particular, le informari y ofrecer5 guardar en disco el
documento; despues puede utilizar una herramienta apropiada para examinarlo.
Los navegadores identifican y manejan de manera especial 10s archivos de multimedia en una
de dos peculiares formas: por el tip0 de MIME (Extensi6n de Correo MultipropQito de
Internet, Multipurpose Internet Mail Extension) del archivo proporcionado por el servidor, o
a partir de un sufijo especial en el nombre del archivo. El navegador prefiere el tip0 de MIME
por la descripci6n m5s rica que hace del archivo y su contenido, aunque inferiri el contenido
del archivo (tipo y formato) del objeto por el sufijo del archivo; .gifo @g, para las imigenes
con codificaci6n GIF y JPEG, por ejemplo, o .au para un archivo de audio especial.
Debido a que no todos 10s navegadores buscan por un tip0 de MIME, no siempre quedadn
configurados de forma adecuada con las aplicaciones de ayuda por sus usuarios; por lo tanto,
es conveniente utilizar el sufijo de archivo correct0 en 10s nombres de objetos multimedia.
Consulte 10s ejemplos de la tabla 5-1.

5.6.3 Estilos apropiados de ligas

La creaci6n efectiva de ligas hacia documentos multimedia externos es deterrninante. El
usuario necesita algunas indicaciones sobre la naturaleza del objeto y quiz5 tambien de la
clase de aplicaci6n que Cste necesita para ejecutarse. Mas adn, la mayoria de 10s objetos
multimedia son muy grandes, de mod0 que la cortesia comdn indica que se debe dar a 10s
usuarios informaci6n del tiempo de la descarga.
En lugar o ademas de la liga y del texto alrededor, una imagen miniatum de las imigenes gran-
des o un icono representative del formato del objeto a1 que se hace referencia pueda ser dtil.

5.6.4 Cdmo incrustar otros tipos de documentos

El Web puede entregar casi cualquier tip0 de documento electr6nic0, no s610 archivos de
imigenes, sonido y video. Sin embargo, para desplegarlos, el navegador (cliente) necesita
una aplicaci6n de ayuda instalada y que conozca. Los navegadores m5s actuales tambiCn
soportan programas complementarios, conocidos como conectores o plug-ins y, como des-
cribimos e n el capitulo 13, que pueden extender para cumplir una funci6n especial, inclu-
yendo el desplegado en linea de objetos multimedia.
Por ejemplo, imagine una compaiiia cuya informaci6n sobre sus productos se ha preparado
y almacenado en alguna aplicaci6n de autoedici6n comlin, como FrameMaker, QuarkXPress
o PageMaker. El Web ofrece un excelente medio para distribuirla por la red, aunque su
conversi6n a HTML seria muy costosa en la actualidad.
La soluci6n es preparar algunos documentos de HTML que clasifiquen y liguen 10s archivos
alternativos y llamen a1 applet apropiado para desplegarlos. 0 aseglirese de que 10s
navegadores de 10s usuarios cuenten con 10s conectores necesarios o que estCn configura-
dos para llamar la aplicaci6n de ayuda apropiada, FrameMaker, por ejemplo, si el documen-
to estuviera en ese formato. DespuCs, si el usuario hace clic en una liga a un documento de
FrameMaker, esta herramienta se inicia y despliega el documento.

5.7 M d s alld de HTML

Desde la publicaci6n en 1978 d e la pionera novela de ciencia ficci6n True Names d e Vernor
Vinge, muchos programadores y usuarios de cornputadoras han quedado fascinados por la
idea d e la "realidad virtual" y el "ciberespacio": interfaces computarizadas con im5genes
m6viles en tercera dimensi6n con las que el usuario puede interactuar de algdn modo, a1
igual que 10s cuerpos fisicos interactlian con el mundo real.
En 1994, dos programadores d e Silicon Valley con experiencia en im5genes electr6nicas se
dieron a conocer con la provocativa idea de que el modelo de hipertexto distribuido de HTML
se deberia utilizar como fundamento para la construcci6n del ciberespacio. Un grupo de
trabajo comenz6 a adaptar y mejorar un lenguaje de descripci6n de im5genes desarrollado
antes e n Silicon Graphics Inc. para ser utilizado junto con HTML y programas para el Web.
El resultado fue el Lenguaje para Marcaci6n de Realidad Virtual (VRML, Virtual Reality
Markup Language). VRML sigue el modelo de HTML en varios aspectos importantes. A1 igual
que HTML, es un lenguaje de marcaci6n de ASCII simple basado en contenido que describe
su universo a un alto nivel y deja a1 navegador o programa cliente el trabajo de presentaci6n
detallada. Desde entonces la tecnologia VRML ha evolucionado abn m5s rapid0 que el
mismo Web. Desde alrededor de abril de 1997, Microsoft est5 e n proceso de extender
el est5ndar de VRML; desde entonces existia un programa "modular" para que las versiones
antiguas del navegador de Netscape soportaran este lenguaje.
Los documentos de VRML describen mundos poblados con formas tridimensionales. Los
desarrolladores construyen objetos a partir de formas fundamentales, cubos, conos y esfe-
ras, con mliltiples efectos en la superficie, incluyendo mapas de textura y luminosidad
disponible para la composici6n de objetos realistas. Es posible asociar un URL a objetos en
154 Capftub 5: Lfneas borlzontales, imdgenes y m u l m e d i a

un mundo d e VFWL d e tal manera que cuando un usuario toque el objeto, sea transportado
a otro mundo d e VRML, documento d e HTML o a un gui6n d e CGI (Common Gateway
Interface) que por si mismo genera un mundo VRML.
Algunas interfaces d e demostracidn d e grandes bases d e datos ya se han construido y
sugieren el inicio d e una verdadera arquitectura del ciberespacio. No obstante, hasta el
momento estas demostraciones caen e n la experiencia de realidad virtual presentada e n 10s
libros y peliculas de ciencia ficci6n. Surgen tres problemas al respecto. El problema de
disefio e s que VFWL no soporta en la actualidad la capacidad d e animacibn. Los mundos
creados con VFWL son estlticos. Aunque e n un mundo hecho con VRML es ficil mover el
punto d e vista del usuario, la 6nica forma d e mover o modificar e n realidad un objeto
creado con VRML e s generar un documento completamente nuevo y presentarlo. El propo-
sito d e soportar descripciones d e animacion estl en trabajo, pero todavia nadie lo ha adop-
tado, a1 menos hasta abril d e 1997. Esta situacion bien puede cambiar para cuando este libro
llegue a las librerias.
El segundo problema prlctico es que las mlquinas d e precios razonables hasta 1997 simple-
mente no tienen la capacidad de hacer animacion realista d e escenas generales. El costo
computacional d e la graficacibn punto a punto, la eliminaci6n d e linea oculta, el mapeo de
texturas y 10s cllculos d e iluminaci6n son muy altos y se incrementan con rapidez. Las
compaiiias que s e ocupan d e la animacion, como Pixar e Industrial Light and Magic, se
valen d e supercomputadoras de prop6sito especial de millones d e dblares para esta tarea,
pues asi debe ser. Por ejemplo, 10s navegadores actuales que soportan VRML con frecuencia
tienen que retroceder d e la interpretaci6n de una superficie completa a mod0 lineal
(wireframe) a1 cambiar el punto de vista del usuario. Incluso sin animacion, la presenta-
cion de imlgenes esthticas, incluyendo mapeo d e texturas, esferas y superficies esculpidas,
puede tomar varios segundos, lo que resulta inaceptablemente lento.
El tercer problema es que 10s mundos creados con VRML todavia no son espacios compar-
tidos. Para que la realidad virtual comience a acercarse a la riqueza interactiva del mundo
real, debe ser posible interactuar, e n un mundo hecho con VRML, n o s61o con objetos sino
con el "transcurrir" o con las manifestaciones d e otros usuarios e n el ciberespacio. Psta e s el
lrea de mayor inter& para quienes desarrollan con VRML (muchos d e 10s cuales se han
inspirado directamente del ambiente d e Sol Negro descrito e n la popular novela d e ciencia
ficci6n d e Neil Stephenson, Snow Crash), aunque alin no surge alguna soluci6n. (Existen
otros problemas comparativamente menos serios: VRML no tiene capacidad sonora, por
ejemplo, pero e s flcil imaginar una soluci6n a esto mediante la actual tecnologia.)
Asi, VFWL sigue siendo mls una promesa tecnologica que una respuesta global a la pregun-
ta de realidad virtual. Pero la tendencia e n el desarrollo de equipo d e diseiio y la cantidad
de dinero invertida e n aceleradores de grlficos multimedia lo hacen una tecnologia que vale
la pena tener en cuenta. Con la evolution que alcanzarln en unos afios mis las computadoms
y con algunas mejorias a1 lenguaje VRML, podria estar a nuestro alcance un ciberespacio
completamente distribuido, construido alrededor de y utilizando el Web.
 En este capflulo:
Cdmo crear un espacto
en bZanc0
DlseiZo rie cdumnas
rn#h3ip&s
Capas

DiseiZo de
documentos
HTML fue creado e n un centro d e estudio, n o e n la avenida Madison. Su intencion original
e s ser un lenguaje para marcaci6n f a d d e usar q u e facilita la lectura d e documentos por
medio d e elementos q u e mejoran la apariencia del texto, como 10s encabezados, a1 mismo
tiempo q u e 10s pone m i s al alcance tanto del autor como d e otras personas mediante ligas;
a la vez, capaz d e incluir otros medios, ademis d e texto, n o s610 por diversi6n sin0 para
explicar e ilustrar el trabajo d e la gente. HTML n o e s una herramienta d e disefio d e p5gina,
a1 menos n o hasta ahora.
Como vimos e n el capitulo 1, HTML ha evolucionado lo mismo que Internet. En particular,
ahora e s minima la probabilidad d e q u e el usuario sea un profesor universitario y n o un
joven navegante en busca d e un sitio vistoso, o tal vez un comerciante e n busca d e informa-
ci6n d e un product0 y d e la mejor oferta. Los intereses comerciales -la fuerza q u e impulsa
hoy a1 Web- demandan cada vez formatos y vistas d e pigina mas complejos para atraer a
la ya creciente masa d e usuarios, poniendo la apariencia sobre el contenido.
Desde sus albores, 10s desarrolladores d e Netscape habian estado a la vanguardia del diseiio
d e navegadores que satisfacian las necesidades d e 10s intereses comerciales. Su mas nueva
aventura extiende HTML para proporcionar a 10s desarrolladores funciones d e disefio d e
pagina m%scomplejas q u e las versiones anteriores.
En este capitulo estudiamos tres nuevos elementos CInicos d e Navigator d e Netscape:
espaciadores, mrjltiples columnas y capas. A1 igual que las tablas y 10s marcos, las nuevas
etiquetas para estos elementos son muy atractivas, seducen a1 disefiador, apartandolo del
esthndar d e HTML con la promesa d e nuevas y excitantes caracteristicas d e diseiio d e
phgina. Como siempre, le recomendamos utilizar estas extensiones s61o cuando sea absolu-
tamente necesario, pues s e ganar5 la antipatia d e una parte d e su pdblico cada vez q u e las
incluya e n sus documentos.
156 Capf2ulo 6: DIserfo de documentos

61 Cdmo crear un espacio en blanco

Uno d e 10s elementos mAs simples de cualquier diseiio de pagina es el espacio vacio que
rodea a1 contenido. Este espacio por lo general es tan importante para la apariencia de una
pAgina como el Area d e texto e imagenes. Comunmente conocidas como espacio e n blanco,
estas Areas vacias forman y enmarcan el contenido de la pAgina.
HTML nativo no tiene otra forma de crear un espacio vacio en la pAgina que no sea em-
pleando la etiqueta <pre> encerrando lineas vacias o una imagen en blanco. De hecho, 10s
navegadores --que actlian de acuerdo con el estindar de HTML- eliminan 10s caracteres
de inicio y fin, asi como cualquier otro espacio adicional en el texto e ignoran las lineas
innecesarias. Netscape enfrenta esta carencia con la etiqueta <spacer>. [<pre*, 4.7.51

61.1 Etiqueta <spacer>

Utilice la etiqueta <spacer> para crear espacios en blanco horizontales, verticales y rectan-
gulares en sus documentos.

<spacer>
Funcion:
Define un Area en blanco en un documento
Atributos:
ALIGN
HEIGHT
SIZE
TYPE
WIDTH
Etiqueta de fin:
Ninguna
Contiene:
Nada
Utilizada en:
Texto

i1.1.1 Cdnto wear un espacio horizontal

La etiqueta <spacer> se usa mAs frecuentemente para crear un espacio en blanco en una linea
de texto. Para ello, ponga el valor del atributo type en horizontal y utilice el atributo s i z e
para definir el ancho, en pixeles (no caracteres de texto), del Area horizontal. Por ejemplo,
<spacer type=hori zontal size=100>
61 Cdmo crear un espacio en blanco 157

inserta 100 pixeles de espacio e n la linea de texto actual. Navigator coloca el contenido
subsecuente a1 final del espaciador si queda el suficiente espacio en la linea actual; de otra
manera, lo coloca e n la siguiente linea, de acuerdo con el comportamiento del flujo de linea
que utiliza regularmente.
Si en la linea actual no hay suficiente espacio para colocar todo el espacio en blanco que
indica la etiqueta <spacer>, el navegador acorta este riltimo para acomodarlo en dicha
linea. En cierto sentido, el tamatio del espaciador es variable e indica a1 navegador que
inserte hasta la cantidad especificada d e pixeles para llegar a1 final de la linea actual.
Por ejemplo, si un espaciador tiene 100 pixeles de ancho y s61o hay 75 pixeles de espacio
restante e n la linea actual en la ventana del navegador, Navigator inserta 75 pixeles de
espacio e n la linea y coloca el elemento de texto al principio de la siguiente linea de texto.
En correspondencia, a un espaciador horizontal nunca lo corta una linea, creando asi un
espacio vacio a1 final de una linea y a1 principio de la siguiente.
Por lo tanto, la aplicaci6n mAs comrin del espaciador horizontal es sangrar la primera linea
d e un p8rrafo. Coloque d e este mod0 un espaciador horizontal a1 principio de un pArrafo
para obtener el resultado deseado:
<spacer type=hori zontal s i ze=5O>
El efecto de un clima frio sobre el proceso d e cultivo d e 10s kumquats
varia, dependiendo de la temperatura. Las temperaturas por arriba de 28&deg;
endulzan el fruto; que cuatro o mas horas con esa temperatura daharfan el arbol.
Puede ver el resultado e n la figura 6-1.

6 flrchiuo Edicion Uer l r Marcadores Opciones Directorio Uentana

q7J=,
-=-- -Netscape:
- - Etiqueta <space>; espacio horizontal =-=-Mfi9

El efecb de un dirna frio sobra el proceso de cultivo de 10s kumquats varia,

dependiendo de la kmperatura. Las temperaturn p r arriba de 28" endulzan el fruto;
que cuatro o rrh bras con esa temperatura dabrim el hrbol.

Figura 6-1. Sangrado de un pdrra/o mediante una eriqueta <spacer> holrzontal.

Por supuesto, tambiCn puede utilizar espaciadores horizontales para insertar espacio entre
letras o palabras e n una linea d e texto, lo cual puede ser dtil para mostrar poesia o anun-
cios publicitarios. No utilice un espaciador para crear un bloque de texto sangrado (a
bando), ya que no puede predecir el tamafio d e la ventana del navegador del usuario ni el
tamairo de fuentes, etcetera y, por lo tanto, d6nde se cortad una linea d e texto especifica.
ivlejor utilice la etiqueta <bl ockquote> o ajuste el margen izquierdo del pArrafo con un
estilo apropiado.
6 1.1.2 Cdmo crear espacio vertical
Puede insertar espacio e n blanco entre lineas y pirrafos poniendo el atributo type d e la
etiqueta <spacer> en v e r t i c a l . TambiCn debe incluir el atributo size. Fije su valor como
un entero positivo igual a la cantidad de espacio en blanco, en pixeles.
El espaciador vertical funciona como la etiqueta <br? ambas generan un corte d e linea. La
diferencia es, por supuesto, que con el espaciador vertical usted puede controlar quC tan
abajo de la linea actual debe comenzar la siguiente linea de texto. El espacio en blanco se
agrega a -y, por lo tanto, nunca es menor que- la cantidad normal de espacio que debe
aparecer debajo d e la linea actual como resultado del espacio del pirrafo.
Como las paginas de HTML son demasiado largas, el espacio vertical puede ser cualquier
cantidad d e pixeles. Por supuesto, es inadecuado abusar (jno?, intente size=100000000). La
mayoria d e 10s monitores actuales tienen barrido horizontal d e no m5s d e 1024 lineas, d e
mod0 que indicar 1025 pixeles d e espacio vertical asegura que la siguiente linea d e texto
quedari fuera de la pantalla del usuario, si Cse es el efecto que quiere...
Los espaciadores verticales no son tan comunes como 10s horizontales, pero si igual
de btiles. En el siguiente texto utilizamos un espaciador vertical para dejar un poco m i s de
espacio entre el encabezado y el cuerpo del texto:
< h l a1 ign=right>Efectos de la ternperatura</hl>
<spacer type=vertical si ze=5O>
El efecto de un clima frTo sobre el proceso de cultivo de 10s kumquats varla,
dependiendo de la temperatura. Las temperaturas por arriba de 28&deg endulzan el
fruto; cuatro o mas horas con esa temperatura daiiarlan el arbol.
Puede ver el resultado e n la figura 6-2.

& Archiuo Edicion Uer Ir Marcadores Opciones Directorio Uentana

ZB-_ Netscepc: Etiqu6ta cspacen; espaclo uertical =W

- -- -
Efectos de la temperatura

El efecto de un clima frio sobre el prooeso de cultiw de 10s kumquats varh,

dependiendo de la temperatma Las tempratmas por arriba de 2r d u l z a n el
fruto;cuatro o mhs harm wn em tsmperaiura dabrim el Cbl.

Figura 6-2. Uso de una etlqueta <spacer>verticalpara separar un encaberado del texto.
61 ~ d m wear
o un espacio en bbhnco 159

6 1.1.3 Cdmo crear b b p e s de e s p d

El tercer tip0 d e espaciador crea un bloque rectangular d e espacio en blanco, muy parecido
a poner una imagen en blanco. Defina el atributo t y p e para b l o c k e incluya tres atributos
mas para definir completamente el espacio: width, h e i g h t y a1 ign.
Los atributos wi d t h y h e i g h t especifican el tamafio en pixeles del espacio. Ihelos s610 cuando
ponga el atributo t y p e como block; de otra manera se ignoran. De modo similar, el atributo
s i z e se ignora cuando el atributo <spacer> t y p e es igual a block. Debe asignar valores
enteros positivos a ambos atributos w i d t h y h e i g h t ; su valor predeterminado es cero.
El tercer atributo para espacios de bloque, a1 ign, controla el modo e n que Navigator coloca
el bloque en relaci6n con el texto alrededor. Los valores para este atributo son identicos a
10s del atributo a1 i g n de la etiqueta <img>. Utilice 10s valores top, t e x t t o p , middle, absmi ddl e,
base1 ine, bottom y absbottom para obtener la alineaci6n vertical deseada del espacio.
Utilice 10s valores 1e f t y r i g h t para forzar a1 espacio d e bloque a1 margen indicado y haga
que el texto siguiente fluya alrededor de el. El valor predeterminado es bottom. Consulte la
secci6n 5.2.6.4 para obtener mas detalles sobre el atributo a1 ign.
Como ejemplo, en este fragment0 HTML colocamos 10s puntos cardinales alrededor de un
area vacia:
<center>
Norte
<br>
Oeste
<spacer type=bl ock wi dth=50 height150 a1 ign=absmiddle>
Este
ebr>
Sur
</center>

La figura 6-3 muestra el documento resultante.

6 flrchivo Edicion Uer Ir Mercadores O~ciones Directorio Uentana

Norte
I- -

Figura 6-3.Con un espaciador de bloque creamos espacio en un documento.

61.2 Imitacidn de la etiqueta <spacer>
Pese a que Navigator soporta la etiqueta < s p a c e r > , otros navegadores la ignoran,
desacomodando su cuidado diseiio. No obstante, puede emularla utilizando la etiqueta
<img> y una imagen pequeiia y especial. Y, como lo mencionamos antes, las nuevas propie-
dades de hoja de estilo de HTML tambiCn le permiten imitar la funci6n de <spacer> en una
modalidad mas amplia y ordenada.
Para que una imagen emule el efecto de la etiqueta <spacer> necesita una imagen GIF
totalmente transparente. Como ninguna parte de la imagen seri vista, puede hacerla tan
pequeiia como desee; recomendamos una imagen GIF d e 1x1 pixeles. En el siguiente
ejemplo, nuestra pequeiia imagen transparente se llama diminutagif.
Para emular un espaciador horizontal de la forma:
<spacer type=hori zontal s i ze=n>

utilice esta etiqueta <img>:

<img src=diminuta.gi f width-n height-1s

Remplace n con el ancho deseado en pixeles, por supuesto. No obstante, recuerde que el
ancho de la etiqueta <img> es fijo y no se integra a1 flujo de texto exactamente igual a como
sucede con la etiqueta <spacer>, en especial si la etiqueta <img> cae en o cerca del final de
una linea de texto.
Para emular un espaciador vertical de la forma:
<spacer type=verti cal s i ze=n>

utilice este fragment0 de c6digo:

Las etiquetas <br> son necesarias para emular el comportamiento del corte de linea del
espaciador vertical. De nuevo, remplace n con la altura deseada.
Para simular un espaciador de bloque de la forrna:

utilice esta etiqueta <img>:

Remplace w, h y a con 10s valores de ancho, alto y alineaci6n deseados.

Dado que puede sustituir con facilidad todas las variantes de la etiqueta <spacer>, puede
preguntarse por que es necesaria. Sin nada mls, la etiqueta <spacer> se interpreta mls
rlpido, ya que la equivalente etiqueta <img> necesita recibir una imagen del servidor y
dimensionarla antes d e insertarla e n el texto. Aunque Cste es un tema baladi para la mayoria
d e 10s usuarios, puede haber casos en que tenga sentido usar la etiqueta <spacer> en
lugar d e <img>.

El formato d e texto en mdltiples columnas es una de las funciones miis usadas en el diseiio
publicitario. Ademiis d e crear atractivas piiginas en diversos formatos, varias columnas le
permiten presentar su texto en lineas pequeiias y fiiciles de leer. Los diseiiadores de piiginas
que usan HTML han preferido facilitar la creaci6n d e varias columnas de texto e n una
piigina, aunque se han visto obligados a implementar algunos trucos, como las tablas de
mliltiples columnas (capitulo 15).
Navigator casi ha resuelto este problema a1 soportar la etiqueta <mu1 t i col>. Aunque con
esta etiqueta n o son posibles adn las vistosas columnas d e igual largo o desbalanceadas,
cosa que si se puede hacer con tablas, es fiicil crear columnas d e texto equilibradas con
<mu1 t i col>. Y aunque esta funci6n es posible s61o en Navigator, en 10s demls navegadores
no sufre gran alteraci6n.

62.1 Etiqueta Cmulticol>

La etiqueta <mu1 t i col> crea mdltiples columnas de texto y le permite controlar el tamaiio y
ndmero d e columnas.

c m u ~ c o l rn
>
Funcidn:
Da formato a1 texto en varias columnas
A tributos:
CLASS
COLS
G r n R
STYLE
WIDTH
Etiqueta de fin:
</mu1 t i col>; siempre se utiliza
Contiene:
Cuerpo de texto
Utilizada en:
Bloque
162 Capftub 6.Bserfo de documentos

La etiqueta <mu1 ti col> puede contener cualquier otro elemento d e HTML, d e manera muy
similar a la etiqueta <di v>. Todo el contenido restante de la etiqueta <mu1 ti col> s e desplie-
ga como texto normal, except0 que Navigator lo distribuye en varias columnas en lugar de
hacerlo s61o e n una.
<mu1 ti col> crea un corte en el flujo del texto e inserta una linea en blanco antes d e
presentar su contenido e n columnas. Despues de la etiqueta, se agrega otra linea e n blanco
y el texto continua con el diseiio y formato anterior.
Navigator balancea d e forma automitica las columnas, tratando de darles la misma longitud.
Siempre que sea posible, el navegador mover%el texto entre las columnas para lograr cierto
equilibrio. En algunos casos, las columnas no quedan perfectamente empatadas debido a
imigenes, tablas u otros elementos de tamaiio considerable.
Puede anidar etiquetas <mu1 ti c o l > para insertar un conjunto de columnas dentro d e otras.
Si bien es posible la anidaci6n infinita, en general no es pdctico anidar mis d e dos niveles,
pues el resultado seria una distribuci6n de texto poco atractiva.

62.1.1 Atributo coLs

El atributo col s es necesario en la etiqueta <mu1 ti col> para definir la cantidad d e colum-
nas. Si se omite, Navigator crea s610 una columna, como si no existiera la etiqueta <mu1 ti col>.
En teoria, puede crear cualquier cantidad de columnas; e n la pr%ctica,m i s d e tres o cuatro
daria como resultado un texto dificil de leer.
El siguiente ejemplo crea un diseiio d e tres columnas:
<hl align=right>Efectos de la temperatura</hl>
<mu1 ti col col s=3>
El efecto de un clima frio sobre el proceso de cultivo d e 10s kumquats varia,
dependiendo d e la temperatura. Las temperaturas por arriba de 28&deg endulzan el
fruto; cuatro o mas horas con esa temperatura datiarlan el arbol. El agricultor
bien informado debe monitorear la temperatura, especialmente en las primeras
horas, cuando el termdmetro llega a su punto mas bajo. Podrian ser necesarios
calentadores de combustible y mecanicos para mantener a temperaturas medias 10s
arboles; muchos agricultores 10s roclan con agua para crear una capa aislante d e
hielo sobre 10s frutos y hojas.
<P>
Si s e produjera una fuerte helada, de menos de 20&deg lo h i c o que puede hacer es
recol ectar 1 os f rutos para evi tar un seguro desastre. Despues podria hacerlos
madurar con cualquiera de 10s sistemas de inyecciones de metano y cianoacrilato
uti 1 izados para otros cttricos. B i e n uti 1 izados, estos sistemas producen frutos
de sabor igual a1 de 10s cosechados d e forma natural.
</mu1 tic01 >
La figura 6-4 ilustra el resultado del c6digo anterior.
6.2 D f s d o de co&mmas mdWp&s 163

-ar - Archivo
~ -
Edlcion Uer Ir Marcadores Opciones Directorio
Nelscape: Etlqueta cmulllcol~a tres columnas -S
l ql
Uentana

Efectos de la temperatura
El efecto de un clima frio term6metro llega a su h i c o que pwde hacsr es
sobre el promo de cultivo punto mhs bajo. Pcdrian recolectar 10s frutos para
de l a kumquats mia, ser necesarios calentadores evitar un seguro desastre.
dependiendo de la de combustible y Despds podria bacerlos
kmperatura. Las m6nicos para rnantener a madurar con cualquiera de
tempstatupas por arriba de temperatum medias 10s los sistemas de inyemiones
28' endulzan el fruto; &boles; muchos de rnetano y cinoacrilato
c u a h o mhs bras con esa agricullbres 10s rm'an con utilizados para otros
krnperatura dakrian el qua para crear ma capa citricos. Bien utilizados,
WM~.El @cultor bien aislante de hielo sobre los estos sistemas producen
informado d e b frulos y hojas. frutos de sabor igual 91 de
monitorear la temperatuq los cosechdos de f o r m
especialrnante en las Si se produjera una fuerte nil&nal.
primeras horn, cuando el helada, de menos da 20" lo

Figura 6-4. Un documento en Ires columnasgracius a cmulticol>.

En la figura 6-4 puede ver c6mo Navigator equilibra las columnas. Tambien puede obser-
var las lineas d e texto que s e cortan para acomodar e n una siguiente linea las palabras muy
largas para el ancho d e la columna, funci6n que no se puede evitar y que sirve para
enfatizar la recomendaci6n de no crear mas de cuatro o cinco columnas e n una pagina.
Nuestro ejemplo dificilmente seria legible si se desplegara e n cinco columnas; y con sie-
te el texto s e romperia demasiado e incluso provocaria errores como s e muestra e n la
figura 6-5.

62.1.2 Atributogutter
El espacio entre columnas, llamado medianil en espaiiol, se conoce como gutter e n ingles.
De mod0 predefinido, Navigator crea una separaci6n de 10 pixeles. Para cambiar este valor,
establezca el atributo g u t t e r a la cantidad de pixeles que le convenga. Navigator reserva
ese espacio entre sus columnas; el resto lo ocupan las propias columnas.
La figura 6-6 muestra el efecto que puede lograr con el atributo g u t t e r . En esta figura
hemos configurado nuestro texto con 10s valores emu1 t i col col s=3 gutter=50>. En con-
traste, la figura 6-4 interpreta el c6digo que tiene el valor predeterminado de g u t t e r : 10
pixeles.
 W
-
J
r
- Rrchluo Edlclon Uer I r Marcadores O~clones Oirectorlo
a 6lete columnas +-->I&
Netscape: Etlpueta ~multlcot?
. Uentann
. -

I Efectos de la temperatura

Figura 6-5.
Demasiadas columnasproducen una pdgina difrcil de leer.

r-
-L
Rrchivo EdiclOn Uer Ir Mercedores Ooclones Olrectorlo Uentana
-~~
-

PJI-=. .<;-.- VE~

Netscape: Rtrlbuto gutter

- -

Efectos de la temperatura
Eleiectodeunclim su punto mbs bap.
m o soem el proLxm Podrim esr m i a
de cultivo de 106 alen!Aomde
kuml- =fa. combustibley
&ependierdo de la meeQdc0sp
temperahpa La9 mntemra
lemper-por
arriba de ZF endulzan
el &ub;cl.blfro 0 mb
hotas con esa
Wmperatwa dsmarlan
el drbol. El agicultor
bien informado deb
monilomr la
$mperm
SEpeCiatmentaen 1
s
primeras horn, cumlo
el W m e t r o llega a

Figura 6-6.Puede cambfar el espacio entre columnas con el attjbuto g u t t e r .

Por lo general, la etiqueta <mu1t i col* llena el ancho de la columna con el texto. A fin de
que las columnas Sean mas angostas o se extiendan mPs all5 d e la ventana del navegador,
utilice el atributo width para especificar el ancho general d e la etiqueta <mu1tical>. Las
columnas se redimensionan de mod0 que &as, mas el espacio entre ellas (medianil), Ilene
el ancho especificado,' el cual se puede establecer como una cantidad absoluta d e pixeles
o como un porcentaje del ancho del flujo del texto.
La figura 6-7 muestra el efecto d e agregar w i dth="75%" a nuestro ejemplo de columnas, con
un medianil d e 10 pixeles.

Efectos de la temperatura
El efeets de un clima su punto m8s bap. rsoleaar los PNtos
frfo robre el prowso Podrizm mr nacesrios para evitar un m p
de cultiw de los calentadoresde desastre. Dsspues
hurquats varia, combustible y podria hacerlos
depnlierdo de la mecbnicos para lnadurar con
tempetotura. Lto mamr a cualquiera de los
$mpmaturm &a sistenms de iagscaotw
:Ezzulm ios Brboles, rnwhos de nmtano y
el Pruto; cuaho o m4n agricultores 1
s&an clnaacrilatD utilludos
bras con esa con agua para crear para otros dfrioos.
Bien utilizady, m-bx

Ftgura 6-7. Modificactdn del ancho en la etiqueta <mu 1 t ico 1 >.

Tenga cuidado cuando reduzca el ancho de las columnas si incluyen elementos cuyo ancho
no es ajustable sino fijo. Navigator no acomoda el texto alrededor d e imigenes que se
extienden m4s all5 d e 10s limites de una columna. Asegdrese siempre de que 10s elementos
incluidos dentro d e las columnas Sean suficientemente pequeiios para caber e n ellas, inclu-
s o en agraciadas ventanas diminutas del navegador.

6.2.1.4 Atributos style y class

Utilice el atributo s t y 1 e con la etiqueta emu1t i c o l > a fin d e crear un estilo especifico para
el contenido que se acomodara e n las columnas. El atributo c l a s s le permite marcar una
secci6n con un nombre que se refiera a una clase predefinida d e la etiqueta <mu1 t i c o l >

' Para ser exactos, cada columna tiene un ancho de (wg(n-l))/n pixeles, donde w es el ancho de la etiqueta
<mu1 t i col., g es el espacio entre columnas (gutter o medianil) y n es la cantidad de columnas. Asi, utilizando
<mu1 tic01 cols-3 gutter.10 width.500, se crean columnas con un ancho de 160 pixeles.
166 CapUnb 6. DfseUo de documentos

declarada e n algdn nivel del documento o una hoja d e estilo de definici6n externa. [atribu-
to style, 9.1.11 [atributo class, 9.2.41

62.2 Mu'ltipks columnas y otms navegadores

Como hemos dicho, s61o Navigator soporta la etiqueta emu1 t i col>. Por fortuna, cuando
otros navegadores se la encuentran la ignoran y presentan su texto contenido como parte
del texto normal, por lo general con minimas alteraciones e n la presentaci6n.
El dnico problema puede ser que el contenido d e la etiqueta <mu1 t i col> se una a1 flujo
anterior, sin un corte d e linea. Por esta 1x2611,recomendamos preceder cada etiqueta
<mu1 t i col > con una etiqueta <p>. Navigator la ignorad y otros navegadores a1 menos harin
un corte d e parrafo antes de presentar el texto en una sola columna.
Es posible emular la funci6n d e la etiqueta <mu1 t icol > con tablas, aunque el resultado es
crudo y dificil d e manejar en 10s diferentes navegadores. Para hacerlo, Cree una tabla d e una
fila con una celda para cada columna. Coloque una cantidad apropiada de flujo d e texto en
cada celda para lograr equilibria entre sus columnas. El problema, por supuesto, es que "la
cantidad apropiada" varia entre navegadores, haciendo casi imposible crear mdltiples co-
lumnas que resulten d e apariencia atractiva.
Si es necesario utilizar varias columnas y no le importa que se conviertan en una sola en
algunos navegadores, le recomendamos utilizar la etiqueta <mu1 t i col>.

62.3 Dts&os efectivos de mu'Wples columnas

A lo largo d e estas secciones hemos hecho sugerencias sobre c6mo usar columnas.
Recapitularemos esas sugerencias para crear efectivos disefios d e columnas:
Utilice pocas columnas.
No utilice espacios demasiado anchos entre columnas.
Asegfirese d e que 10s elementos incluidos, como imigenes y tablas, se acomoden bien
en las columnas e n la mayoria de 10s monitores.
Preceda cada etiqueta <mu1 t i col> con una etiqueta <p> para mejorar la apariencia d e
sus documentos en navegadores distintos a Navigator.
Evite anidar mas d e dos niveles d e etiquetas <mu1 t i col>.

6.3 Capas
Los espaciadores y mfiltiples columnas son extensiones naturales del HTML convencional, y
s e presentan e n el flujo normal d e un documento. La versi6n mas actual d e Netscape (4.0)
entra e n una nueva dimensi6n d e HTML a1 soportar capas, con las que transforma el modelo
de documento de un solo elemento en el modelo de documento con varios elementos
acomodados en capas que se combinan para formar el documento final.
Las capas dan a1 diseiiador un elemento vital inexistente en el HTML estandar: ubicaci6n
absoluta en la ventana del navegador. En resumen, las capas le perrniten definir una unidad de
autocontenido de HTML que puede colocar en cualquier parte de la ventana del navegador,
sobre o debajo de otras capas, y que puede aparecer y desaparecer a su deseo. Los diseiios de
documentos que eran imposibles con el HTML convencional ahora son baladies con las capas.
Si piensa en su documento como una hoja de papel, las capas son como hojas de plastico
transparente sobrepuestas a1 papel. Para cada capa puede definir contenido, posici6n rela-
tiva con respecto a1 documento base y orden de colocaci6n en este. Las capas pueden ser
transparentes u opacas, visibles u ocultas; y proporcionan una combinaci6n infinita de
opciones de diseiio.

63.1 Etiqueta <layer>

Cada capa de contenido en un documento de HTML se define con la etiqueta <layer>.
Puede imaginar las capas como un pequeiio documento de HTML cuyo contenido esta
definido entre las etiquetas <layer> y </layer>. Como alternativa, puede recuperar el
contenido de la capa desde otro documento de HTML mediante el atributo s r c de la etique-
ta <layer>.
Independientemente de su origen, Navigator da formato a1 contenido de una capa como lo
haria con un documento convencional, con la diferencia de que el resultado queda en esa
capa independiente, separado del resto del documento. El programador puede controlar la
posici6n y visibilidad de esa capa con 10s atributos de la etiqueta <l ayer>.
Las capas tambien pueden quedar anidadas. En este caso, las capas se mueven junto con la
capa que las contiene y son visibles s610 si esta dltima lo es.

6.3.1.1 Atributo name

Si planea crear una capa y nunca hacer referencia a ella, no es necesario darle un nombre,
per0 si planea apilar otras capas respecto a la capa actual, como veremos mas adelante en
este capitulo, o modificarla con JavaScript, debe identificar sus capas poniendoles nombre
con el atributo name. El valor dado a name es una cadena de texto cuyo primer caracter debe
ser una letra, no un nlimero o simbolo.
Una vez denominada la capa, puede hacer referencia a ella en cualquier parte del documento
y cambiarla mientras el usuario interactda con la pagina. Por ejemplo, esta muestra de HTML:
4 ayer name="advertenci a" v i s i b i 1 it y = h i de>
iA d v e r t e n c i a ! Los datos i n t r o d u c i d o s no son v a l idos.
ell a y e r l
 Funcion:
Define una capa de contenido en un documento
Atributos:
ABOVE
BACKGROUND
BELOW
BGCOLOR
CLASS
CLIP
LEFT
NAME
SRC
STYLE
TOP
VISIBILITY
WIDTH
Z-INDEX
Etiqueta de fin:
e/l ayer>; siempre se utiliza
Contiene:
Cuerpo de contenido
Utilizada en:
Bloque

crea una capa llamada advertencia que en principio est5 oculta. Si e n el proceso de
validaci6n d e una forma mediante un gui6n de JavaScript se encontrara un error y se desea
desplegar una advertencia, debe utilizar el comando:
advertencia.visibility = show;
Entonces Navigator muestra la capa a1 usuario.

6.3.1.2 Atdbutos k p y top

Sin atributos, una capa se coloca e n la ventana del documento como si fuera parte del flujo
normal del texto. Las capas a1 inicio de un documento se colocan e n la parte superior d e la
ventana d e Navigator; las que quedan entre el contenido del documento convencional se
colocan junto con ese contenido.
Sin embargo, el poder d e las capas reside en que pueden colocarse en cualquier parte del
documento. Utilice 10s atributos t o p y l e f t d e la etiqueta < l a y e r > para especificar su
posicion exacta e n el desplegado del documento.
Arnbos atributos aceptan un valor entero igual a la cantidad de pixeles a partir del extrerno
superior izquierdo (0,O)del espacio donde aparece el documento o, si est3 anidada e n otra
capa, es e n relaci6n a1 espacio e n que se despliega la capa que la contiene. A1 igual que con
otros docurnentos cuyo tarnaiio o posici6n se extendiera rnis allA de la ventana de Navigator,
este proporciona a1 usuario barras d e desplazamiento d e rnanera que pueda acceder a
elernentos fuera del area de su ventana.
Vearnos un sencillo ejernplo de capa que rnuestra de forma escalonada tres frases hacia
abajo, n o es algo que se pueda lograr con facilidad y ciertamente tampoco con la rnisma
precisi6n usando HTML convencional:
< l a y e r l e f t = l O top=lO>
Superior i zqui erda
</layer>
<l ayer 1 e f t = 5 0 top=50>
En rnedio
</l ayer>
e l ayer 1e f t = 9 0 top=90>
I n f e r i o r derecha
</layer>
El resultado s e rnuestra e n la figura 6-8.

Ffgura6-8.Ubicacfdnde texto simple con la etlqueta <layer>.

Desde luego, este ejernplo es un tanto pobre. Vearnos ahora uno mejor, que crea una
sombra detris d e un encabezado:
<layer>
< l a y e r 1 eft.2 top=2>
<hl><font color=gray~Introduccibn a l a s t r a d i c i o n e s del kurnquat</font></hl>
</layer>
< l a y e r left=O top=O>
<hl>Introduccibn a l a s t r a d i c i o n e s del kurnquat</hl>
</l ayer>
</layer>
 chl>&nbsp;c/hl>
En 10s albores d e la historia del hombre, el kumquat tenTa un papel
fundamental en la formaci6n d e las creencias religiosas. Los kumquats s e
cosechaban justo en el momento en que el fruto estaba perfectamente maduro.
De manera similar a1 sol (<i>sol</i>), el fruto dorado fue tornado de
arboles el d'ia en que el sol alcanzb el cenit. Aln en la actual idad
consideramos ese dTa como nuestro <i>sol sticioc/i> de verano.
La figura 6-9 muestra el resultado.

Efectos de sombreado con multiples capas

Ftgura 6-9.

Utilizamos algunos trucos para crear un efecto d e sombra e n el encabezado del ejemplo.
Primero, Navigator sobrepone las capas nuevas sobre las anteriores. Asi, creamos la sombra
gris, seguida por el encabezado real, d e modo que aparezca a1 frente, sobre la sombra.
Tambikn anidamos estas dos capas e n una capa independiente. De esta manera, las posicio-
nes d e la sombra y del encabezado quedan e n posici6n relativa a la capa que las contiene,
no a1 propio documento. La liltima capa, carente d e una posici6n explicita, se coloca en el
flujo del documento como si fuera contenido normal y desaparece donde deberia aparecer
el encabezado del documento convencional.
No obstante, el contenido comlin del documento alin aparece e n la parte superior, cubierto
por el atractivo encabezado. Para ponerlo debajo del contenido d e las capas, incluimos una
etiqueta d e encabezado vacia (para un espacio d e no rompimiento d e linea, &nbsp;) antes
d e incluir el contenido convencional del documento.
Esto es muy importante y conviene repetirlo: el contenido comlin del documento despues
d e una etiqueta <layer> se ubica exactamente debajo d e la capa a la que le sigue. Puede
evitar este efecto utilizando una capa integrada, descrita e n el apartado 6.3.2.

6.3.1.3 Atributos above, below y x-index

Las capas existen en tres dimensiones, ocupando espacio en la p5gina y apilhdose una
sobre otra y sobre el contenido convencional del documento. Como dijimos, por lo general
las capas se apilan e n orden de aparici6n e n el documento, las capas a1 inicio quedan
debajo de las posteriores e n la misma Prea de desplegado.
Usted puede controlar el orden en que se apilan las capas con 10s atributos above, be1 ow y
z - i ndex de la etiqueta <layer>. Estos atributos se excluyen entre si, esto es, use s61o uno
por capa.
El valor de 10s atributos above o be1ow es el nombre de otra capa e n el documento actual.
Por supuesto, esa capa a la que se hace referencia debe tener un atributo name cuyo valor
sea el mismo que se utiliza en 10s atributos above o be1 ow de la etiqueta < l a y e r > donde se
le llama. Debe crear previamente en el documento la capa a la que se haga referencia; pues
no puede referenciar una capa que venga despuCs en el documento.
Contrariamente a como se esperaria, Navigator coloca la capa actual debajo de la capa cuyo
nombre aparece e n above y encima de la capa referenciada en be1ow.' Observe tambiCn que
las capas deben ocupar el mismo espacio para que el usuario pueda ver cualquier efecto.
Utilicemos de nuevo nuestro ejemplo de sombreado para ilustrar el atributo above:
<l ayer>
<layer name=texto left=O top=O>
<hl>Introduccibn a 1 as tradi ci ones del kumquat</hl>
</I ayer>
<layer name=sombra above=texto left=2 top=2>
<hl><font color=gray~Introducci6n a las tradiciones del kumquat</font></hl>
</layer>
</layer>
El atributo above de la capa llamada sombra indica a Navigator que coloque la capa de
sombra de mod0 que la capa denominada t e x t o quede sobre ella.
Los atributos above y be1 OW pueden ser confusos cuando apila varias capas. Notamos que
puede ser mPs claro utilizar el atributo z-index para llevar un control de quC capas van
sobre cuales otras. Con z - i ndex puede especificar el orden e n que Navigator las apila: las
capas de valores z - i ndex superiores se colocan sobre las de valores inferiores.
Por ejemplo, para crear nuestro sombreado utilizando el atributo z - i ndex:
<layer>
<layer 1 eft=O top=O z-index=2>
<hl>Introduccibn a las tradiciones del kumquat</hl>
</layer>
<layer left=2 top=2 z-index=l>
<hl><font col or=gray>Introducci 6 n a 1 as tradi ciones del kumquat</font></hl>
</layer>
</layer>

* No tenernos la certeza, pero nos preguntarnos si 10s atributos above y be1 OW fueron creados ya en la madrugada.
1 72 Caphb 6.DiseUo de documentos

Por lo combn, Navigator despliega la segunda capa --en este caso la gris (gray)- sobre la
primera. Pero corno hemos dado a la capa gris un valor z-i ndex m4s bajo, se coloca debajo
d e la primera capa.
No es necesario que 10s valores d e z-index sigan una secuencia, aunque si deben ser
n6meros enteros, de mod0 que podriamos utilizar 10s valores 99 y 2, respectivamente, y
obtener el mismo resultado del ejemplo anterior; y noes necesario especificar un atributo z-
index para todas las capas que ocupan el mismo espacio de desplegado, s61o las que de-
sea colocar por encima o debajo en relaci6n con otras capas. Sin embargo, conocer el orden
d e precedencia puede resultar confuso si no asigna un valor z-index a todas las capas
relacionadas.
Por ejemplo, iquC orden d e precedencia por color podria presentar Navigator de Netscape
a1 interpretar la siguiente secuencia d e capas?
<layer left=O top.0 z-index=3>
<hl><font color=red>Introduccit3n a las tradiciones del kumquat</font></hl>
</layer>
<l ayer left=4 top=4>
<hl><font color=green~Introducci~na las tradiciones del kumquat</font></hl>
</l ayer>
4 ayer 1 eft=8 top=8 z-index=2>
<hl><font col or=bl ue>Introducci bn a 1 as tradi ciones del kumquat</font></hl>
</layer>
Acepte una felicitaci6n si pens6 que el encabezado verde (green) va sobre el rojo (red) que,
a su vez, va sobre el azul (blue). iPor que? Porque el encabezado de color rojo es de menor
prioridad que el verde con base en el orden de aparici61-1,y forzamos a la capa del encabe-
zado azul para que quedara debajo del rojo al darle un valor z-i ndex m4s bajo. Navigator
despliega capas que usen z-i ndex d e acuerdo con su orden, y capas que no usen z-i ndex
d e acuerdo con su orden d e aparici6n en el documento. La precedencia con base en el
orden de aparicibn tambien se aplica a capas que tienen el mismo valor d e z-index. Si
hubieran capas anidadas, todas a un mismo nivel, se ordenarian d e acuerdo con sus atribu-
tos z-index. Este grupo se ordena entonces corno una capa dnica sobre todas las dern4s
capas a nivel de contenido. Para resumir, las capas anidadas en otra no se pueden intercalar
entre capas d e diferente nivel.
Por ejemplo, observe estas capas anidadas, con su contenido y etiquetas d e fin omitidas en
aras d e la claridad (la indentaci6n indica el nivel de anidamiento):
<layer name-a z-index=20>
el ayer name=al z-index=5>
<layer name=a2 z-index=15>
el ayer name=b z-i ndex=30>
<layer name=bl z-index-lo>
<layer name=b2 z-index=25>
<layer name=b3 z-index=20>
<layer name=c z-index=lO>
Las capas a, b y c estQn a1 mismo nivel, con las capas a 1 y a2 anidadas en a , y b l , b2 y b3
anidadas en b. Aunque con 10s valores z - i ndex puede parecer a primera vista que Navigator
intercala las diferentes capas anidadas, el orden real de estas capas, de abajo hacia arriba, es
c , a , a l , a2, b, b l , b3 y b2.
Si dos capas e s t h anidadas en una misma y tienen el mismo valor z - i ndex, la capa
definida en segundo lugar en el documento se coloca sobre la capa que aparece primero.'

63.1.4 Atributos backgroundy bgcolor

A1 igual que 10s atributos correspondientes de la etiqueta <body>, puede definir el color de
fondo asi como una imagen para una capa con atributos bgcol o r y background, respectiva-
mente.' El fondo predeterminado de una capa es transparente, lo que permite ver las capas
inferiores.
El atributo bgcol o r acepta un nombre de color o tripleta RGB como valor, segdn se define
en el apendice F. Si lo pone, Navigator establece todo el fondo de la capa con ese color,
mostrando una capa opaca. Este atributo es dtil para crear un recuadro con color debajo del
texto, como un mecanismo para seiialar o resaltar. No obstante, taparia todas las capas
debajo de ella, incluyendo el contenido convencional.
El atributo background acepta como valor el URL de una imagen. La imagen se distribuye en
mosaicos para llenar el area de la capa. Si algunas partes de la imagen son transparentes, no
cubriran esas Areas de la capa y, por lo tanto, s e d posible ver las capas inferiores.
Si incluye ambos atributos, el color de fondo s610 se v e d en las Qreastransparentes de la
imagen de fondo. Esto es, toda la capa serl opaca.
El atributo background es dtil para colocar una textura debajo del texto, pero es una verdadera
molestia si el objetivo es desplegar texto frente a una imagen fija. Como el tamaiio de una
capa queda determinado por su contenido, no por la imagen de fondo, esta dltima puede
quedar incompleta, dependiendo del tamaiio del texto. Para colocar texto legible sobre una
imagen, utilice una capa anidada, como se muestra en el siguiente ejemplo:
<l ayer>
<img src="amanecer.gifM>
<P>
<l ayer top=75>
<h2 a1 ign=center>Aqul no nacen kumquats.. .</he>
</l ayer>
</l ayer>

* Esto, por supuesto, se aplica s61o a capas dentro del mismo nivel de anidamiento.
t Observe que tambien puede controlar el color de fondo, asi como otras funciones de desplegado, no s61o de
una capa sino de todas las etiquetas <layer> utilizando hojas de estilo. Vea 6.3.1.9.
174 Capfiuba' Dfseflo de documentos

Navigator asigna espacio adicional para toda la imagen en la capa exterior; la interior ocupa
el mismo espacio, s61o que la corrimos 75 pixeles hacia abajo para darle un mejor acomodo
a1 texto sobre la imagen. El resultado se muesua en la figura 6-10.

Ffgura 6-10,
Ubfcacfdnde taro sobre una fmagen medfantecapas.

63.1.5 Atributo ufsibicity

Por lo general las capas se ven (pero casi nunca se escuchan). Puede cambiar este valor
estableciendo el atributo v i s i b i 1 ity en show, hide o i nheri t. Como es de esperar, show
(mostrar) fuerza a la capa a desplegarse; hide (ocultar) la oculta a1 usuario e i n h e r i t
(heredar) declara de forma expllcita que desea que la capa herede el desplegado de su
antecesora. El valor predeterminado para el atributo v i s i b i 1 ity es inheri t. Las capas
no anidadas se consideran hijas de documentos principales, que siempre son visibles. Asl,
las capas no anidadas que carecen del atributo v i s i b i 1 ity son, e n principio, visibles.
No tiene mucho sentido ocultar capas a menos que planee mostrarlas despuks. En general,
este atributo s610 se utiliza cuando incluye algunos guiones de JavaScript que revelarln
capas ocultas como resultado de alguna interacci6n con el usuario. UavaScript, 13.31
Las capas ocultas no bloquean la vista de capas que las anteceden. Mas bien, una capa
oculta se puede entender mejor como una capa transparente. Una forma de ocultar conteni-
d o e n el documento principal es colocando una capa opaca sobre el. Para mostrar el conte-
nido oculto, esconda la capa opaca, revelando lo que hay debajo de ella.

63.1.6 Atributo width

Las capas son s610 tan grandes como sea necesario para contener contenido, valga la expre-
si6n. El grosor inicial de una capa est5 definido como la distancia a partir del punto de
creaci6n de la capa e n el flujo de texto actual hacia el margen derecho. Asi, Navigator da
formato a1 contenido de la capa con respecto a ese ancho y asigna la altura suficiente para
contener el resto. Si el contenido no ocupa todo el ancho inicial, este se reduce a su
cantidad minima.
Puede establecer el ancho de una capa utilizando el atributo width. El valor de este atributo
define el ancho de la capa en pixeles. Como es de esperarse, Navigator establece la altura con
base e n el contenido de la capa, acomodindolo a1 ancho especificado. Si no se pudieran
acomodar algunos elementos en la capa --digamos, irnigenes- y se extendieran por su
margen derecho, s61o apareceri una parte del elemento. El resto queda cortado por el extre-
mo de la capa y no se ved. gste es un comportamiento similar a1 de una imagen e n la ventana
de documento principal. Si la imagen se extiende mis alli del extremo de la ventana del
navegador, d o aparece una parte de ella. No obstante, a diferencia de la ventana del navegador,
las capas no soportan barras de desplazamiento que permitan a1 usuario ver todo el contenido
de la capa.

63.1.7 Atributo src

El contenido de una capa no esti restringido a lo que se introduce entre las etiquetas
<l aye?-> y </l aye?->;tambiCn puede hacer referencia y cargar el contenido de otro docu-
mento e n la capa de forma automitica con el atributo src. El valor del atributo src es el URL
del documento contenido en la capa.
Este documento n o es totalmente de HTML y, e n particular, no debe contener etiquetas
<body> o <head>. Se permite cualquier otro contenido de HTML.
Puede combinar contenido de capa convencional con contenido tomado de otro archivo
usando el atributo src y colocando el contenido entre la etiqueta <layer>. En este caso, el
contenido del archivo se coloca primer0 e n la capa, seguido por cualquier contenido dentro
de la misrna etiqueta. Si decide utilizar el atributo src sin proporcionar contenido en linea
adicional, debe seguir poniendo la etiqueta de fin, </I ayer>, para completar la definici6n
de la capa.
El atributo src proporciona, la primera vez, una funci6n de inclusi6n en HTML. Antes, para
insertar contenido de un documento de HTML en otro tenia que hacerlo a travCs de una
funci6n basada e n servidor para leer el otro archivo e insertarlo e n el documento en la
posici6n adecuada. Puesto que las capas se colocan de forma predeterminada e n su punto
de definici6n junto con el flujo actual, es relativamente sencillo incluir otro archivo en un
documento.
...otro contenido
<layer src="machote"></layer>
.. .mas contenido
Debido a que la capa se presenta como una entidad de HTML independiente, el contenido
del archivo incluido n o queda en el texto. Mas bien, sucede como si el archivo insertado
quedara contenido dentro de la etiqueta <di v> u otro elemento de HTML de nivel bloque.
63.1.8 Atributo clip
Por lo general, 10s usuarios ven toda la capa a menos que sea cubierta por una capa
superior. Con cl i p, el atributo de corte, puede enmascarar partes de una capa, revelando
s61o una porci6n rectangular.
El valor del atributo cl i p son dos o cuatro enteros, separados por comas, que definen Breas
de pixeles e n la capa correspondiente a 10s extremos izquierdo, superior, derecho e infe-
rior del Prea cortada. Si s61o proporciona dos valores, entonces corresponden a 10s extre-
mos derecho e inferior del Brea visible y Navigator supone que 10s valores de 10s extremos
superior e izquierdo son cero. Por lo tanto, cl i p="75, 100" es equivalente a cl i p= "0, 0,
75, 100".
El area de la capa fuera del Prea visible se hace transparente, lo que permite observar
cualquier elemento que se encuentre abajo.
El atributo cl i p es litil para ocultar partes de una capa o para crear efectos de desvanecido
y borrado con funciones de JavaScript que cambian la ventana de corte e n ciertos lapsos.

63.1.9 Atributos style y class

Utilice el atributo styl e d e la etiqueta <l ayer> para crear un estilo especifico para todo el
contenido de la capa. El atributo c l a s s le permite etiquetar la capa con un nombre que se
refiera a una clase predefinida de la etiqueta <l ayer> declarada e n alglin documento o
definida en una hoja de estilo externa. Por consiguiente, puede utilizar una hoja de estilo en
lugar d e 10s atributos bgcol or independientes y redundantes a fin d e definir un color de
fondo para todas las capas de su documento o para una clase especifica de ellas. [atributo,
styl e 9.1.11 [atributo, class 9.2.41

63.2 Etiqueta <ilayer>

Aunque puede controlar la posici6n de una capa utilizando 10s atributos top y l e f t con
coordenadas relativas a1 espacio del documento, Netscape tiene una etiqueta independiente
-4 1 ayer>- que le permite colocar capas individuales con respecto a1 flujo actual del
contenido, de mod0 muy similar a una imagen e n linea.
Una etiqueta <i 1 ayer> crea una capa que ocupa espacio e n el flujo de texto. El contenido
subsecuente se coloca despuCs del espacio ocupado por <i 1 ayer>, a diferencia de la eti-
queta <layer>, que crea una capa sobre el flujo del contenido, permitiendo asi que el
contenido subsecuente se coloque debajo de la capa apenas creada.
La etiqueta < i 1 ayers elimina la necesidad de una etiqueta <l ayer> sin atributos que sirva
para colocar capas anidadas y colocadas especialmente e n linea con el flujo de texto, similar
a lo que se hizo en la mayoria de 10s ejemplos anteriores de este capitulo. Los atributos de
Xi 1 ayer> son 10s mismos que 10s de <layer>.
 Funcion:
Define una capa de contenido e n linea en un flujo de texto
A tributes:
ABOVE
BACKGROUND
BELOW
BGCOLOR
CLASS
CLIP
LEFT
NAME
SRC
STYLE
TOP
VISIBILITY
WIDTH
Z-INDEX
Etiqueta de fin:
</i 1ayer>; siempre se utiliza
Contiene:
Cuerpo de contenido
Utilizada en:
Texto

63.2.1 Atrlbutos top y kg2

Los dnicos atributos que no son iguales para las etiquetas <i 1ayer> y <layer> son top y
1e f t : Navigator interprets el contenido de <i 1ayer> justo en el flujo d e texto que contiene,
desplazado por 10s valores de 10s atributos top y l e f t a partir de la esquina superior
izquierda d e esa posicih, no la esquina superior izquierda de desplegado, como sucede
con <l ayer>. Navigator tambiCn acepta valores negativos para 10s atributos top y 1e f t de la
etiqueta <i layer>, permitikndole correr el contenido encima y a la izquierda del flujo
actual.
Por ejemplo, para colocar texto por debajo y encima de la linea de texto, o para correr
palabras en la actual linea de texto, podria utilizar:
Esta 4 layer top=4>palabra</ilayer> queda por debajo de la 1 lnea de texto.
mientras que esta 4 1 ayer left=lO>otra</ilayer> queda hacia 1 a derecha. Con un
valor negati vo, 1 as pal abras se pueden col ocar 4 1 ayer top=4>por encima</i1 ayer>
y corri das haci a 1 a 4 1 ayer 1 eft=-lO>izqui erda</i 1 ayer>.
El resultado se muestra e n la figura 6-11. Observe que las palabras recorridas se enciman e
impiden la claridad del texto. Navigator no se ocupa de asignar espacio para 10s elementos
recorridos; s61o se colocan en un espacio diferente de la pAgina.

Figura 6-11. Movfmiento de capas en linea con respecto a1 texto adyacente.

6.3.2.2 Combinacidn & <layer>e <iZayer>

En una capa en linea se puede utilizar cualquier efecto que desee crear en una capa normal.
No obstante, tenga en cuenta que 10s desplazamientos d e 10s atributos top y 1e f t son con
respecto a la posici6n del contenido de 4 1 ayer>, no con respecto a1 Area del documento.
Por lo tanto, utilice <i 1 ayerp para colocar contenido en linea en el flujo de documento de
HTML convencional, y el ayer> para colocar elementos y contenido d e forma precisa en el
espacio del documento.
Ademb (afortunadamente), Navigator no distingue entre las etiquetas el ayer> e <i1ayer>
cuando tienen un orden d e aparici6n. Puede declarar que una etiqueta <i 1ayer> aparece
despuCs d e alguna <layer> con 10s atributos name y above:
< l a y e r narne=aqul>Yo estoy por encirna</layer>
<i 1 a y e r above=aquf>Yo por debajo</i 1 ayer>
De manera similar, puede volver a ordenar la aparici6n de capas absolutas y en linea
cuando se traslapan asignando valores de atributo z-index a 10s elementos. TambiCn se
aplican las normas de anidamiento.
 Em este capihclo.'

.
..
.V& "..CU V.2.N.Y-Y Y.

Ligas y Webs

Hasta este punto, hernos tratado a 10s docurnentos d e HTML corno entidades independien-
tes, concentrhdonos en 10s elernentos del lenguaje que sirven para estructurar y dar forrna-
to a su trabajo. Sin embargo, el verdadero poder de HTML reside e n su habilidad para
enlazar colecciones d e docurnentos entre si en una verdadera biblioteca d e inforrnaci6n, y
para ligar docurnentos con otras bibliotecas sirnilares en todo el rnundo. Asi corno 10s
lectores tienen un control considerable sobre c6rno se exhiben 10s docurnentos en la panta-
Ila, con las ligas tarnbiCn pueden tener el control sobre el orden e n que se presentan a
rnedida que navegan a traves de la inforrnaci6n. Eso es lo que significa la "HT" en HTML
(Hipertexto) y es el motor que hace girar a1 Web.

7.1 Fundamentos de hipertexto

Una caracteristica fundamental del hipertexto es que perrnite ligar docurnentos; usted
puede apuntar a otro lugar dentro del docurnento actual, dentro de otro docurnento en la
colecci6n local o dentro d e un docurnento en cualquier sitio d e Internet. Gracias a esto 10s
docurnentos llegan a convertirse en una intrincada red d e inforrnaci6n entretejida. iCapta
ahora la analogia del nornbre: Web: tejido, telaraiia? El docurnento destino por lo regular
estii relacionado d e a l g h rnodo con, y enriquece la fuente; el elernento ligado e n la fuente
debe transrnitir esa relaci6n a1 lector.
Las ligas (hiperligas, hipervinculos enlaces o hiperenlaces) pueden ernplearse para toda
clase d e efectos: en indices y listas d e temas, por poner dos casos. Con un clic del rat6n e n
ka ventana d e su navegador, 10s lectores seleccionan y saltan de forrna autornatica a un terna
180 Capftulo X Ligas y Webs

que les interesa dentro del mismo o en otro documento localizado e n una colecci6n diferen-
te e n a l g h lugar del mundo.
Las ligas tambiCn llevan a 10s lectores a informaci6n adicional acerca de un tema. "Para mPs
informaci6n, consulte 'El desfile de 10s kumquats' ", por decir algo. Quienes crean plginas
con HTML emplean ligas para disminuir la informaci6n repetitiva. Por ejemplo, le recomen-
damos firmar cada uno d e sus documentos y, e n lugar d e incluir toda su informaci6n para
comunicarse con usted e n cada uno, una liga que conecte su nombre a un lugar con su
direccibn, ndmero telefbnico, etcktera, es lo mejor.
Una liga, o ancla e n el dialect0 del estindar d e HTML, se define con una etiqueta <a> y
tiene dos variantes. Como veremos mPs adelante, un tip0 d e liga crea un atajo e n el docu-
mento: cuando el usuario la selecciona (generalmente por medio del rat6n) provoca que el
navegador establezca una liga. Asi, d e forma automatics carga y muestra otra parte del
mismo o d e otro documento, o activa alguna acci6n relacionada con 10s servicios d e Internet,
como el envio d e correo electr6nico o la transferencia d e un archivo. El otro tip0 d e ancla
crea una etiqueta o marca, esto es, un lugar en un documento de HTML a1 cual se puede
hacer referencia como una liga.'
Existen tambiCn algunos eventos relacionados con acciones del rat6n que se asocian con las
ligas y que, con nuevas tecnologias como JavaScript, le permiten realizar algunos efectos
excitantes y novedosos.

7.2 Referencia a documentos: el URL

Como vimos con anterioridad, todo documento en el World Wide Web tiene una direcci6n
dnica (imaginese el caos si no fuera as9. La direcci6n del documento se conoce como su
localizador uniforme de recursos CURL, Uniform Resource Locator).+
Varias etiquetas d e HTML incluyen un URL como el valor d e algdn atributo, incluyendo las
ligas, las imigenes e n linea y las formas (o formularies). Todos utilizan la misma sintaxis de
URL para especificar la ubicaci6n d e un recurso en el Web, sin importar su tip0 o contenido.
Por esta raz6n se le conoce como un localizador uniforme d e recursos.
Ya que pueden representar casi cualquier recurso e n Internet, 10s URL adoptan varios tipos.
Sin embargo, todos tienen la misma sintaxis d e nivel superior:
esquemo: porte-especf f ica-de 1- esquemo

Ambos tipos de ligas emplean la misma etiqueta; tal vez esto sea porque tienen el mismo nombre. No obstante,
encontramos que es mis fhcil si se hace la diferencia entre ellas y se piensa en el tip0 que proporciona el punto
de atajo y la direccidn de un hipewinculo como la "liga",y el otro tipo que marca el destino de un documento
como el "ancla".
t "URL" por lo general se pronuncia separando las letras, es decir "u ere ele", no "url".
Z2 Refaencia a donmentos: el URL I81

Esquema describe la clase de objeto a1 cual hace referencia el URL; pa-espec~ica-

del-esquema es, bueno, la parte peculiar de ese esquema especifico. El punto importante
aqui es que esquema siempre estP separado de parte-especfica-del-esquema por medio
del signo de dos puntos, sin espacios intermedios.

72.1 Sintaxis de un URL

Los URL se escriben utilizando 10s caracteres imprimibles del conjunto de caracteres US-
ASCII. Si necesita emplear e n un URL un cadcter que no sea parte de este conjunto, debe
codificarlo mediante una notaci6n especial. La notacidn codificada remplaza el cadcter
deseado con tres caracteres: un signo de porcentaje y dos digitos hexadecimales cuyo valor
corresponde a la posici6n del carlcter e n el conjunto de caracteres ASCII.
Esto es mPs fPcil de lo que parece. Uno de 10s caracteres especiales (codificados) mPs
comunes es el de espacio e n blanco, cuya posicidn e n el conjunto de caracteres es 20, e n
hexadecimal. Para codificar un espacio en un URL, remplPcelo con %20:
http://www. kumquat. com/nuevos%20preci 0s. html
Este URL lleva, e n realidad, a un documento llamado nuevosprecios.htm1 (lo obtiene del
servidor).

7.2.1.1 Manejo de caracteres reservados e inseguros

AdemPs de 10s caracteres no imprimibles, tambiCn debe codificar caracteres reservados y no
seguros e n sus URL.
Los caracteres reservados son 10s que tienen un significado especifico dentro del URL mis-
mo. Por ejemplo, muchos URL emplean la diagonal para separar elementos del nombre de
una ruta de bdsqueda dentro del URL. Si necesita incluir una diagonal e n un URL que no
tenga por prop6sito separar elementos, debe codificarla como %2F:
http://www. cal cul o. com/computadoras?3%2f4
Este URL e n realidad hace referencia a1 recurso denominado computadoras e n el servidor
zuww.calculo.com y le pasa la cadena de caracteres 314, como lo especifica el signo de
interrogacidn ( ? ) . En realidad, el recurso es presumiblemente un programa del lado servi-
dor que efectda alguna funcidn aritmCtica sobre el valor recibido y devuelve un resultado.
Los caracteres inseguros son 10s que no tienen un significado especial dentro del URL pero
pueden tenerlo e n el context0 en que Cste estP escrito. Por ejemplo, las comillas dobles (")
sirven para delimitar URL e n muchas etiquetas de HTML. Si va a incluir un signo de comillas
dobles e n un URL, quiz5 confunda a1 navegador. Mejor codifiquelas como %22 para evitar
cualquier conflicto posible.
182 Capitdo E Ligas y Webs

Otros caracteres reservados e inseguros que deberia codificar siempre son 10s d e la
tabla 7-1.

Tab!a 7-1. Caracteres resetvados e inseguros y sus cod~icaciones

para 10s URL

Punto y coma Resewado

Diagonal Resewado
Signo de interrogaci6n Reservado
Dos puntos Resewado
Arroba Resewado
Igual Reservado
Ampersand No seguro
"Menor que" No seguro
"Mayor que" No seguro
Comillas dobles No seguro
Nlimero No seguro
Porcentaje No seguro
Llave izquierda No seguro
Llave derecha No seguro
Barra vertical No seguro
Diagonal invertida No seguro
Acento circunflejo (caret) No seguro
Tilde No seguro
Corchete izquierdo No seguro
Corchete derecho No seguro
Signo de ap6strofo invertido No seguro

En general, siempre debe codificar un carkcter si tiene alguna duda acerca d e c6mo debe
incluirlo e n un URL. Como regla bisica, debe codificar cualquier cargcter que no sea letras,
ntimeros o cualquiera d e 10s caracteres $ - - . + ! * I ().
Nunca es un error codificar un cadcter, a menos que tenga un significado especifico en el
URL. Por poner un caso, codificar las diagonales en un URL para http provoca que se interpre-
ten como caracteres comunes, no como delimitadores de rub, lo que arminaria la direcci6n.

72.2 URLpara http

El URL para http es, por mucho, el m5s comtin dentro del World Wide Web. Sirve para tener
acceso a documentos almacenados en un servidor d e http, y tiene dos forrnatos:
http://servidor:puerto/ruto#fragmento
h t t p : //servidor:puerto/ruto?bfisquedo
Z2 Referenda a documentos: el GIRL 183

Algunas de las partes son opcionales. De hecho, la forma rnis cornlin de un URL simple para
http es:

que indica un servidor linico, la ruta del directorio y nombre de un documento,

7.2.2.1 El servidor de http

El sewidor es el nombre e n Internet, o direcci6n numkrica de acuerdo con el Protocolo
Internet (IP) del sistema de cornputo que almacena el recurso. Como e n nuestro caso,
sospechamos que usted ernplea e n sus URL, la mayoria de las veces, nombres para 10s
servidores, pues son miis f5ciles de recordar.' El nombre se compone de varias partes,
incluyendo el nombre real del servidor y 10s nombres sucesivos de su dorninio de red,
separando cada una con un punto. Los nombres tipicos e n Internet son similares a
www.ora.com o hooho~.ncsa.uiuc.edu.~
Se ha llegado a una especie de convenci6n seglin la cual 10s administradores de servidores
web (webmasters) nombren a sus servidores www para una riipida y ficil identification en
el Web. Por ejemplo, el nombre del servidor web de Netscape ernpieza con www, lo que,
junto con el nombre de dominio de esa empresa, nos conduce a1 sitio de fiicil rnemoria:
www.Netscape.com.De manera similar, el servidor web de Sun Microsystems se denomina
www.suti.com;el de Apple Computers es www.apple.com; incluso Microsoft hace que su
servidor sea fkilrnente memorizable: ruww.micnxoft.com.La convenci6n para asignar nom-
bres tiene beneficios obvios, d e 10s cuales usted tambien podria sacar ventaja si le pidieran
crear un servidor web para su organizaci6n.
TambiCn puede especificar la direcci6n de un servidor empleando su direccion [IPI numCri-
ca. Esta direccion es una serie de cuatro nlimeros, de cero a 255, separados por puntos.
Direcciones IP vilidas son similares a 137.237.1.87o 192.249.1.33.
Seria una diversion ociosa decir ahora lo que significan 10s nlimeros o c6rno derivar una direccidn
IP de un nornbre de dominio, mis alin porque usted ram vez, si es que lo llega a hacer, empleari
una e n un URL. De cualquier forma, este es un buen sitio para hacer una liga: tome cualquier
buen tratado sobre redes de Internet para obtener detalles rigurosos acerca de las direcciones
IP, como Con6ctate a1 mundo de Internet, de Ed Krol, publicado por McCraw-Hill.

Cada computadora conectada a lnternet tiene una direcci6n h i m ; una direcci6n (IP) nunkrica, por supuesto, debido a que
las compuradoras solamente tratan con nlimeros. Los hunlanos prefieren nombres, de manera que la gente de lnternet nos
proporciona una coleccidn de servidores y software especiales (Sistema de Nonlbres de Dominio o DNS, por s i s siglas en
ingles) que resuelve de forma autondtica los nonlbres de lnternet en direcciones de IP. InterNIC, una agcnch sin tines de
lucro, registra los nombres de donlinio en su mayor pane bajo ima politica basada en que el primero que llegue cx el primero
en x r atendido, y distribuye nuevos nombres pard los servidores DNS a todo lo ancho dcl planera.
t En Estados Unidos de Noneam~ricay para algunas agencias canadienses, el sufijo dc trcs Ictms dt.1 nombre tic dominio
identifica el tipo de orwnizaci6n o negocio que maneja ese segmento de Internet. Por cjemplo. "corn" es un;l cmprcsa
comercial; "edu" es una inrtituci6n acddt?nlica, y "gov" identific-a un donlinio a nivel gobierno. Fucra dc Fstados llnidos. st-
asigna un sutijo menos descriptive; por lo regular una abreviatura de dos letras del nombre del pais: .'jp" paw Japcin. "mx"
para Mexico y "de" para Alemania ("Deutschland"), por citar algunos ejemplos. F a convenci6n senala la traditional distribu-
ci6n de lnternet y presumiblemente cambiari nlucho ~ ~ n f o r mlaered prolifere en el resto del mundo.
184 C a p f t u b 7 Ligas y Webs

72.2.2 Elpuerto de http

El puerto es el nlirnero del puerto de cornunicaciones a1 cual el navegador (cliente) se
conecta con el servidor. Es un asunto de redes: 10s servidores hacen rnuchas cosas rnis
aparte d e proporcionar documentos y recursos a 10s navegadores: correo electr6nico FTP,
cornpartir sisternas d e archivos, etcetera. Aunque toda esa actividad de la red puede llegar a1
servidor sobre un cable sencillo, por lo regular se divide en "puertos" rnanipulados por
prograrnas de cornunicaciones de servicios especificos, algo anilogo a las cajas de apartado
postal en la oficina de correos local.
El puerto predeterminado de 10s URL para servidores web es 80. Los servidores web de
seguridad especial [H'ITP seguro, SH'ITP o Secure Socket Layer (Nivel de Conexibn Segura),
SSL] corren en el puerto 443. La rnayoria de 10s servidores web en la actualidad ocupan el
puerto 80; usted debe incluir el nlimero de puerto seguido de dos puntos a1 principio del
URL si el servidor destino no ernplea el puerto 80 para la cornunicaci6n.
Cuando el Web estaba en su primera etapa, hace rnuchos meses, 10s webmusters pioneros
ejecutaban sus conexiones a1 naciente Web en todos 10s nlimeros de puerto. Por razones
tCcnicas y d e seguridad, se requieren privilegios de adrninistrador de sisternas para instalar
un servidor en el puerto 80. Al carecer de estos privilegios, algunos webmusters elegian
otros nlimeros de puerto de mas ficil acceso.
Ahora que 10s servidores web son bastante aceptables y estin bajo el cuidado y rnanteni-
miento d e administradores responsables, 10s documentos que se ofrecen en alglin puerto
diferente del 80 o 443 deben ser confiables para usted si ese servidor tiene un buen desern-
peiio; esto, en definitiva, es algo que sucede con gran rapidez.

72.2.3 La ruta de http

La ruta del docurnento es la ubicacih jerPrquica del archivo, expresada a1 estilo UNIX, en
el sisterna d e almacenamiento del servidor. La ruta se compone de uno o mPs nombres
separados por diagonales. Todos menos el liltirno representan directorios que conducen a1
documento; el liltirno nombre es, por lo regular, el del documento mismo.
Ya es una convenci6n que, para una fPcil identificacibn, 10s nombres de docurnentos de
HTML finalicen con el sufijo .html (de otra rnanera, son archivos de texto ASCII simples,
jrecuerda?). Usted puede identificar rnuy ficil un servidor basado en una PC: sus restriccio-
nes sobre 10s nombres de archivos implican que s61o pueden tener sufijos de nornbre de
tres letras, e n este caso .htm para docurnentos de HTML.
Aunque el nornbre del servidor en un URL no es sensible a1 uso de letras rnaydsculas o
minlisculas, el nombre de la ruta del docurnento si puede serlo. Puesto que la rnayoria de
10s servidores web se ejecutan en sisternas basados en UNIX y 10s nornbres de archivos ahi
si son sensibles a maydsculas y minlisculas, el nornbre de la ruta del documento lo es
tambien. Los servidores web que corren en miquinas basadas en DOS n o son sensibles a
rnaylisculas o minlisculas, de mod0 que el nornbre de la ruta del docurnento tampoco lo es,
Z 2 Referencia a documentos: el URL I85

pero como es imposible conocer el sistema operativo del servidor a1 que uno va a entrar,
suponga siempre que tiene nombres d e ruta sensibles a maylisculas y minlisculas y tenga
cuidado d e emplear el tip0 d e letra correct0 cuando teclee el URL.
Han surgido ciertas convenciones con respecto a la ruta del documento. Si el liltimo elemento
d e Csta es un directorio, no un documento simple, el servidor por lo general lo enviara de
regreso ya sea a una lista del contenido del directorio o al indice d e ese directorio. Debe
finalizar el nombre del documento para un directorio con un cadcter de diagonal, aunque
e n la pdctica la mayoria d e 10s servidores aceptan la petici6n incluso si este cadcter se omite.
Si el nombre del directorio es s61o una diagonal o e n ocasiones ni siquiera eso, se transfiere
el primer documento de HTML (de nivel superior), tambiCn conocido como la pagina
principal, pagina de inicio o homepage e n el directorio raiz del servidor. Todo servidor de
http bien diseiiado debe tener una "pagina principal" atractiva y bien compuesta; es un atajo
para que 10s usuarios puedan navegar por todo su sitio web sin necesidad de recordar el
nombre real del documento, s61o el nombre d e su servidor. Por esto es que, por ejemplo,
puede teclear htp://www.ora.com e n el cuadro de didogo "Abrir" d e Navigator y llegar a la
pagina principal d e O'Reilly.
Otra variante: si el primer componente de la ruta del documento comienza con una tilde (-),
significa que el resto del nombre de la ruta comienza desde el directorio personal de HTML
e n el directorio inicial del usuario e n la maquina del servidor. Por ejemplo, el URL h t p / /
www.kumquat.com~-chucMlo lleva a la pagina d e nivel superior d e la colecci6n d e docu-
mentos d e Chuck.
Diferentes servidores tienen distintas formas de localizar documentos e n el directorio inicial
d e un usuario. Muchos buscan 10s documentos e n un directorio llamado public-html. Los
servidores basados e n UNIX son partidarios del nombre indexhtml para paginas principales.

72.2.4 Elfragmento de un documento de http

El fragmento es un identificador que apunta a una secci6n especifica e n un documento. En

especificaciones d e un URL, el fragmento sigue a1 servidor y a la ruta, y va separado por un
signo de nlimero (#). Un identificador d e fragmento indica al navegador que debe mostrar el
documento desde la parte identificada por el fragmento. Como describimos a continuacion
con mas detalle, 10s nombres de fragmento se insertan en un documento mediante la etique-
ta <a> y el atributo name. Como con 10s nombres de ruta, un nombre de fragmento puede ser
cualquier secuencia d e caracteres.
El nombre del fragmento y la diagonal precedente son opcionales; omitalos cuando hagan
referencia a un documento sin fragmentos.
Formalmente, el fragmento s61o s e aplica a archivos destino que son documentos de HTML.
Si el destino del URL es alglin otro tip0 de documento, el navegador puede interpretar ma1
el nombre del fragmento.
186 Capftulo Z Ligas y Webs

Los fragmentos son dtiles para documentos extensos. A1 identificar secciones clave de su
documento con un nombre de fragmento, facilita a 10s lectores que vayan directamente a
otra parte del documento, evitando el tedioso proceso de desplazarse por las pPginas para
localizar la secci6n que les interesa.
Como regla fundamental, recomendamos que cada encabezado o titulo de secci6n en 10s
documentos se acompaiie por un nombre de fragmentoequivalente. Si sigue esta regla, permitirl
que sus lectores salten a cualquier secci6n en cualquiera de sus documentos. Los fragmentos
tambiCn facilitan la construcci6n de tablas de contenido para conjuntos de documentos.

7.2.2.5 El pardmetro de bu'squedapara http

El componente de btisqueda (search) de un URL para http, junto con su signo de interroga-
ci6n precedente, es opcional. Indica que la ruta es un recurso rastreable o ejecutable en el
servidor. El contenido del componente de bdsqueda se pasa a1 servidor como parPmetro
que controla la funci6n de bdsqueda o ejecuci6n.
La codificaci6n real de 10s parametros en el componente de bdsqueda depende del servidor
y del recurso a1 que se haga referencia. Explicamos 10s parsmetros para recursos rastreables
mPs adelante en este capitulo, cuando veamos 10s documentos rastreables. Los parlmetros
para 10s recursos ejecutables se analizan en el capitulo 10.
Aunque nuestra explicaci6n inicial sobre 10s URL para http indicaba que un URL podia tener
un identificador de fragmento o un componente de btisqueda, algunos navegadores le
permiten emplear ambos. Si asi lo desea, puede seguir el padmetro de bdsqueda con un
identificador de fragmento, informlndole a1 navegador que comience a mostrar el resultado
de la bdsqueda en el fragmento indicado. Navigator soporta este uso, por ejemplo.
Sin embargo no recomendamos esta clase de URL. En principio, no funciona en muchos
navegadores. Asi de importante, el uso de un fragmento implica tener la seguridad de que
el resultado de la bdsqueda tendrl un fragmento con ese nombre dentro del documento.
Para colecciones de documentos extensas, esto es muy poco probable. Es mejor que omita
el fragmento, mostrando el resultado de la bdsqueda desde el principio del documento para
evitar una confusi6n potencial entre sus lectores.

7.2.2.6 Ejetnplos de URLpara http

Veamos algunos ejemplos de URL para http:
http://www.mcgraw.com/catal ogo.htm1
http://www.mcgraw.com/
http://www. kumquat .com:8080/
http://www. kumquat.com/siembra/guia.html #prep-suelo
http://www. kumquat.com/buscar~a~quat?estado=Florida
Z2 Refmncia a documentos: el URL 187

El primer ejemplo es una referencia explicita a un docurnento autentico de HTML llarnado

catalogo.html que se almacena e n el directorio raiz del servidor w . m c g r a w . c o m . El
segundo hace referencia a la p4gina principal d e nivel superior e n ese mismo servidor. Esa
p4gina puede ser catalogo.htm1. El tercer ejemplo tambiCn supone que existe una pagina
principal e n el directorio raiz del servidor www.kumquat.com y que la conexi6n web se
dirige a1 puerto no estandar 8080.
El cuarto ejemplo es el URL para transferir el documento guiahtml e n el directorio siembra
del servidor www.kumquat.com. Cuando lo recupera, el navegador debe mostrar el co-
mienzo del documento e n el fragment0 llamado prep-suelo.
El ciltimo ejemplo llama a un recurso ejecutable denominado buscar-a-quat con el par4metro
estado establecido para el valor Florida. Presumiblemente, este recurso genera una respues-
ta d e HTML que el navegador exhibe despues.

72.3 El URLpara javascript

El URL para javascript es, en realidad, un seudoprotocolo que por lo general no se incluye
e n temas d e URL. Incluso con navegadores avanzados, como Navigator e Internet Explorer,
el URL para javascript puede asociarse mas con una liga y utilizarse para ejecutar comandos
d e JavaScript cuando el usuario la selecciona. Veremos m4s ejemplos d e 10s efectos de
JavaScript relacionados con ligas e n documentos d e HTML m4s adelante. [URL para
JavaScript, 13.3.41

72.3.1 Argumentos del U .para javaseript

Lo que sigue a1 seudoprotocolo javascript es una o mas expresiones y metodos d e JavaScript
separados por punto y coma, incluyendo referencias a funciones d e JavaScript de expresio-
nes mciltiples que se incluyen e n la etiqueta c s c r i p t > e n 10s documentos de HTML (consul-
te el capitulo 13 para obtener m4s detalles). Por ejemplo:
javascript:window.alert ('iHola, mundo!')
javascript:doFlash ('rojo'. 'azul I ) ; window.alert ( ' iNo m e presionen! I )
son URL validos que se pueden incluir como el valor para una liga. El primer ejemplo
contiene un mCtodo d e JavaScript simple que activa un mensaje d e alerta sencillo.
El segundo ejemplo d e URL para javascript contiene dos argumentos: el primer0 llama a una
funci6n de JavaScript, doFl ash, que se ha localizado e n algOn lugar del documento dentro
d e la etiqueta < s c r i p t > y que tal vez hace parpadear el color d e fondo d e la ventana del
documento entre rojo y azul. La segunda expresi6n es el mismo metodo d e alerta del primer
ejemplo, pero con un mensaje un poco diferente.
188 Capitrrlo 7: L i g a s y Webs

El UFU para javascript tambiCn puede aparecer en una liga sin argumentos. En ese caso, s61o
Navigator (Internet Explorer no) abre un editor especial de JavaScript donde el usuario
puede teclear y probar 10s diferentes mCtodos y expresiones de ese lenguaje.

El URL para ftp se utiliza para obtener documentos desde un servidor de W (File Transfer
Protocol, Protocolo d e Transferencia de Archives).' Tiene el siguiente formato:

72.4.1 El usuario deflp y la contraseita

FTP es un servicio autenticado, es decir, usted debe tener un nombre de usuario valid0 y
una contraseiia a fin de obtener documentos desde el servidor. Sin embargo, la mayoria de
10s servidores de FTP tambiCn soportan el acceso restringido, sin autenticacibn, conocido
como F7P andnimo (anonymous m).En este modo, cualquier persona puede teclear el
nombre de usuario "anonymous" para tener acceso a una parte limitada d e 10s documentos
del servidor. La mayoria de 10s servidores de FTP tambiCn suponen (pero pueden no otor-
gar, por supuesto) acceso an6nimo si el nombre de usuario y la contraseiia se omiten.
Si emplea un URL para ftp a fin de acceder a un sitio que requiere un nombre de usuario y
contraseiia, incluya 10s componentes wuario y contraseiia en el UFU, junto con el signo de
dos puntos (:) y el de arroba (a). Mis a menudo, tendri acceso a un servidor de FTP
an6nimo y puede omitir tales componentes.
Si mantiene el componente usuario junto con el signo de arroba pero omite la contraseiia y
el signo de dos puntos precedente, la mayoria de 10s navegadores le solicitarin una contra-
seiia despuCs de conectarse con el servidor FTP.Esta es la manera recomendada de tener
acceso a recursos con autenticacibn en un servidor W, ya que asi se evita que otras
personas vean su contraseiia.
Le recomendamos que nunca ponga un URL para ftp con nombre de usuario y contraseiia
en documento de HTML. Las razones son simples: cualquier persona puede obtener el
documento, extraer el nombre de usuario y la contrasefia del URL, conectarse a1 servidor de
FTP y hacer uso ilicito de sus documentos.

72.4.2 El servidor y puerto deflp

El s m i d o r ypuerto de ftp estin limitados por las mismas reglas que el servidor y puerto en
un URL para http, como describimos con anterioridad. El servidor debe ser un nombre de

* FTP es un antiguo protocolo d e Internet que se conoce desde la Era del Oscurantismo, alrededor de 1975, mis
o menos. Fue disefiado como una manera simple de mover archivos entre mPquinas y mantiene su popularidad
y utilidad hasta nuestros dias. Algunas personas que son incapaces de ejecutar un servidor web verdadero ubican
sus documentos en un servidor que entienda FTP en su lugar.
Z 2 Referenda a documentos: el U R Z 189

dominio valid0 e n Internet o una direcci6n IP valida de un servidor de FTP. El puerto

especifica e n d6nde el servidor atiende las solicitudes.
Si omite el puerto y su signo de dos puntos precedente, se utiliza el puerto 21, que es el
predeterminado.

72.4.3 La ruta defip y el tip0 de transferencia

El componente ruta representa una serie de directories, separados por diagonales en segui-
da del archivo que se va a transferir. De mod0 predeterminado, el archivo se obtiene como
un archivo binario; esto puede modificarse agregando el tip0 de cddigo (y el precedente
;type=) e n el URL.
Si pone el tip0 de c6digo e n d, se supone que la ruta es un directorio. El navegador solicita
una lista del contenido del directorio a1 servidor y la muestra a1 usuario. Si el tip0 de c6digo
es otra letra, se utiliza Csta como un parametro para el tip0 de comando de FTP antes de
transferir el archivo a1 que se hace referencia e n la ruta. Aunque algunos servidores de FTP
pueden implementar otros cbdigos, la mayoria acepta i para iniciar una transferencia binaria
y a para tratar el archivo como un flujo de texto ASCII.

72.4.4 Ejemplos de URL para fip

He aqui algunos URL para ftp de muestra:
ftp: //www. kumquat. com/ventas/preci os
ftp://bob@bobs-box. com/resul tado; type=d
ftp://bob: secretebobs-box. com/l i stas;type=a
El primer ejemplo transfiere el archivo precios del directorio ventas e n el servidor de ftp
an6nimo e n wzow.kumquat.com. El segundo se conecta a1 servidor FTP e n bobs-box.com
como el usuario bob, y se solicitara una contrasefia antes de transferir el contenido del
directorio resultado y mostrarlo a1 usuario. El dltimo ejemplo se conecta a bobs-box.com
como bob con la contrasefia s e c r e t y transfiere el archivo lbtas, manipulando su conteni-
d o como caracteres ASCII.

72.5 URZ para file

Este tip0 de URL especifica un archivo almacenado e n una maquina sin indicar el protocolo
empleado para obtenerlo. Por lo tanto, tiene un uso limitado e n un ambiente de red. Sin
embargo, sus beneficios reales consisten e n que puede hacer referencia a un archivo en la
mlquina del usuario, y es particularmente dtil para hacer referencia a colecciones de docu-
mentos de HTML personales, tales como aquellos denominados "bajo construcci6n" y que
a6n no e s t h listos para su divulgaci6n general, o a colecciones de documentos de HTML en
un disco compacto. Tiene el formato:
190 Capi2ulo X Ligas y Webs

Z2.5.1 El s m i d o r de arcbivos
El servidor de archivos, como el servidor de http descrito anteriormente, debe ser el nombre
de dominio en Internet o la direcci6n IP de la m%quinaque contiene el archivo que desea
ver. No se hacen suposiciones de c6mo el navegador puede hacer contact0 con la m%quina
para obtener el archivo; se presume que puede efectuar alguna conexi6n, tal vez mediante
un sistema de archivos de red o FTP para obtenerlo.
Si se omite el servidor, o se utiliza el nombre especial anf i t r i Bn-1 ocal , se supone que el
archivo reside en la misma m4quina donde se ejecuta el navegador. En este caso, el navegador
s61o tiene acceso a1 archivo por medio de las funciones normales del sistema operativo local.
De hecho, este es el uso m%scomfin del URL para archivos. Si crea familias de documentos
en un disco flexible o en un disco compact0 y hace referencia a ellos mediante ligas utilizando
el URLJile://anfitri6n-local, puede crear una colecci6n de documentos distribuible e inde-
pendiente que no requiera de una conexi6n en red para que pueda usarse.

72.5.2 La ruta del arcbiuo

Esta es la ruta del archivo que se va a recuperar en el servidor deseado. La sintaxis de la ruta
puede variar dependiendo del sistema operativo del servidor; cerci6rese de codificar cual-
quier cahcter importante en la ruta.

7.2.5.3 Ejemplos de URL de archivo

El URL de un archivo es sencillo:
fi le://anfi tribn~local/principal/jose/documento.html
fi le:///principal /jose/documento.html
fi 1 e://comercio. kumquat .com/ventas-mes.htm1
El primer URL transfiere /principal/jose/documento.html de la miiquina del usuario
(anfitri6n-local). El segundo es idCntico a1 primero, except0 que se ha omitido la referenda
anfitridn-local para el servidor; el nombre del servidor se presupone el servidor local. Obser-
ye,sinembarga, queesnecesaria una-diagonakdiciend d a s d e s cornurnspan estzopci6n.-
El tercer ejemplo utiliza un protocolo para transferir ventas-mes.htrnl del servidor
comercio.kumquat.com.

7.2.6 URI,para noticias (news)

El URL para noticias da acceso a un mensaje sencillo o a todo un grupo de noticias dentro
del sistema de noticias llamado Usenet. Tiene dos formas:
news :grupodenot icias
news :id-mensaje
Una lamentable lirnitaci6n en 10s URL para noticias es que no le permiten especificar un
servidor para el gnrpodenoticias. En su lugar, 10s usuarios especifican sus recursos del servidor
de noticias en las preferencias de su navegador. Alguna vez, no hace mucho, 10s grupos de
noticias de Internet tenian una distribuci6n universal; todos 10s servidores de noticias condu-
7.2 Referencia a documentos: el URL 191

cian en su totalidad a 10s mismos grupos de noticias y sus respectivos articulos, de modo que
un servidor de noticias era tan bueno como cualquier otro. En la actualidad, el diafano volu-
men de espacio en disco necesario para almacenar el volumen de actividad diaria de 10s
grupos de noticias es a menudo imposible para cualquier servidor de noticias sencillo, ademas
de que tambien existe la censura local de 10s grupos de noticias. Por consiguiente, no se
puede esperar que todos 10s grupos de noticias y, desde luego, no todos 10s articulos de un
grupo de noticias estCn disponibles en el servidor de noticias del usuario.
Ademas, muchos navegadores de 10s usuarios pueden no estar configurados de forma ade-
cuada para leer noticias. Recomendamos que evite colocar URL para noticias en sus docu-
mentos except0 e n raras ocasiones.

72.6.1 Acceso a grupos de noticias

Hay varios miles de grupos de noticias dedicados a casi cada tema imaginable bajo el sol y
mas alli. Cada uno tiene un nombre Gnico, compuesto por elementos jerarquicos separados
por puntos. Por ejemplo

es el grupo de noticias de anuncios del World Wide Web. Para tener acceso a 61 utilice el URL:

72.62 Acceso a mensajes simpks

Cada mensaje e n un servidor de noticias tiene asociado un identificador de mensaje Gnico
(ID) que tiene la forma:
cadena-Gnica@servidor
La cadena-zinica es una secuencia de caracteres ASCII; el servidor es, por lo regular, el
nombre de la maquina desde la que se origina el mensaje. La cadena-zinica debe ser h i c a
entre todos 10s mensajes que se originan desde el servidor. Un URL de muestra para tener
acceso a un mensaje simple podria ser:
news:[email protected]
En general, 10s identificadores de mensaje son secuencias cripticas de caracteres n o muy
comprensibles para 10s humanos. Ademas, el tiempo de vida de un mensaje e n un servidor
por lo general se mide e n dias, despuCs de lo cual el mensaje se elimina y su identificador
ya no es vdido. El resultado: 10s URL para noticias de mensajes simples son dificiles de
crear, llegan a ser invalidos muy rapid0 y generalmente no se usan.

7.2.7 UKL para nntp

El URL para nntp va mas all2 del URL para noticias a fin de proporcionar un mecanismo que
permita el acceso a articulos e n el sistema de noticias Usenet. Tiene la siguiente forma:
nntp: //servidor:puerto/grupodenoticias/art fculo
192 Capindo j?. Ltgas y Webs

72-71 Servidor y puerto para nntp

El seruidor y puerto para nntp se definen de forma similar a1 servidor y puerto para http
descritos con anterioridad. El servidor debe ser el nombre de dominio e n Internet o la
direcci6n 1P de un servidor d e nntp; el puerto es donde ese servidor atiende las solicitudes.
Si omite el puerto y su signo d e dos puntos precedente, se utiliza el puerto predeterminado,
el 119.

72.72 Elgnrpo de noticias y atticubs de nntp

El grupo de noticias es el nombre del grupo desde donde se transfiere un articulo, como
sefialamos e n el apartado 6.2.6.
El articulo es el identificador numkrico del articulo deseado dentro de ese grupo de noticias.
Aunque el ndmero del articulo es m h fQcil de determinar que un identificador de mensaje,
tarnbien es presa de las mismas limitaciones de las referencias de mensajes simples utilizando el
URL para noticias que acabamos de ver. En especial, 10s articulos no duran rnucho en la mayoria
de 10s servidores nntp, y como resultado 10s URL de nntp se vuelven invQlidosmuy pronto.

72.73 Ejempb de URLpara nntp

Un ejemplo de URL de nntp puede ser:

Este URL transfiere el articulo 417 del grupo de noticias altfan.kumquats e n el servidor
news.kumquat.com. Recuerde que el articulo s610 se proporciona a mlquinas que les es
permitido transferir articulos desde este servidor. En general, la mayoria de 10s servidores de
nntp restringen el acceso a las mQquinas e n la misrna red de Qrea local.

72.8 UIPI,para mailto

El URL para el protocolo mailto hace que se transmita un mensaje d e correo electr6nico a un
destinatario nombrado. Tiene el siguiente formato:
mai 1 to:direccidn

La direccidn es cualquier direcci6n de correo electr6nico vQlida, por lo regular de la forma:

De este modo, un URL comdn para mailto tipico tendrQ un aspect0 similar a kste:

Los navegadores como Navigator aceptan mdltiples destinatarios e n el URL para mailto,
separados por una coma. Por ejemplo
7 2 Refaencia a documentos: el URL 19.3

envia el mensaje a las tres direcciones. No debe haber espacios en blanco entre las comas
del URL.

72.8.1 Depnicfdn de 10s campos de encabexado de un correo

La mayoria d e 10s navegadores abren una ventana para escribir correo electr6nico cuando el
usuario selecciona un URL para mailto. La direcci6n del receptor se llena tomindola del
URL, per0 el tema o nombre del mensaje y varios otros campos de encabezado quedan en
blanco. A muchos webmasters les gustaria llenar estos campos como una cortesia para sus
lectores, per0 el URL estindar no brinda manera de hacerlo.

Los navegadores actuales capacitan a1 URL para mailto para cubrir esta brecha. A1 agregar
parimetros d e tip0 CGI a1 encabezado de mailto, se pueden establecer 10s valores del tema
en Navigator e Internet Explorer, asi como 10s campos Con copia (Cc, copia a1 carb6n) o con
copia ciega (bcc, copia a1 carb6n ciega por sus siglas en ingles) para el mensaje de correo
con Navigator. Todos estos URL funcionan en Navigator; s610 el primer0 lo hace correcta-
mente con Internet Explorer. [parzimetrosde CGI, 10.1.1.71
mail to:cmusciano@aol .com?subject=iLindo 1 i bro!
mailto:[email protected][email protected]
mailto:[email protected][email protected]
Como quizis haya adivinado, el primer URL establece el tema del mensaje. Observe que 10s
espacios en blanco estin permitidos; no tiene que remplazarlos con el equivalente
hexadecimal, %20.El segundo URL coloca la direccibn en el campo Cc de un mensaje de
Navigator. De forma similar, el liltimo ejemplo establece el campo bcc del mensaje. TambiCn
puede llenar varios campos en un URL separando sus definiciones con simbolos de ampersand
(&). Por ejemplo

mailto:[email protected]?subject=iLindo libro!&[email protected]&bcc=archivo@mi
servi dor. corn
establece el tema y la direcci6n de la copia (esta linea apareceria comlinmente en un solo
renglbn, per0 aqui aparece en dos debido a las limitaciones del ancho de la pigina).

Internet Explorer versi6n 3 no reconoce 10s campos bcc y Cc en el URL para mailto y tendri
quejas con respecto a ellos si aparecen vacios o 10s agregari a1 campo del tema.

7.2.9 URLpara telnet

El URL para telnet abre una sesidn interactiva con el servidor deseado, permitiendo a1
usuario conectarse y utilizar esa miquina. A menudo, la conexidn a la mlquina inicia de
manera automltica un servicio especifico para el usuario; en otros casos, el usuario debe
saber 10s comandos que debe ejecutar para usar el sistema. El URL para telnet tiene la forrna:
tel net: llusuorio:controseiio@servidor:puertol
194 CapftuloT Ligas y Webs

72.9.1 Usuarioy contraseila de telnet

El usuario y la contras&ia d e telnet se emplean de la misma forma que 10s componentes usuario
y contraseiia del URL para ftp descritos con anterioridad. En particular, s e aplican las mismas
advertencias con respecto a la protecci6n de su contrasefia: nunca la incluya e n un URL.
Del mismo mod0 que el URL para ftp, si se omite la contraseiia del URL, el navegador se la
solicita justo antes d e hacer la conexi6n con el servidor d e telnet.
Si omitiera tanto la contraseiia como el usuario, el servicio telnet tendrP lugar sin asignar un
nombre d e usuario. En algunos servidores, telnet s e conecta d e forma automPtica a un servicio
predeterminado cuando n o se proporciona nombre d e usuario; e n otros, el navegador puede
solicitar un nombre d e usuario y contraseiia cuando realice la conexi6n a1 servidor d e telnet.

72.9.2 Seruidory puerto para telnet

El seroidor y puerto para telnet s e definen d e mod0 similar a1 servidor y puerto d e http,
descritos con anterioridad. El servidor debe ser el nombre de dominio e n Internet o la direcci6n
IP d e un servidor de telnet; el puerto es el puerto e n el que el servidor atiende las solicitudes.
Si se omiten el puerto y su signo d e dos puntos precedente, se utilizar5 el puerto predeter-
minado, el 23.

7.2.10 U r n para gopher

Gopher es un sistema d e transferencia d e documentos tip0 web que ha alcanzado cierta
popularidad e n Internet precisamente antes d e que el World Wide Web lo sustituyera por
completo, pues a6n existen algunos servidores de Gopher. El URL para gopher le permite
tener acceso a documentos Gopher. El URL para gopher tiene la siguiente forma:
gopher: llservidor:puerto/ruto

72.10.1 Seruidor y puerto para gopher

El seroidor y puerto para gopher se definen d e manera similar a 10s correspondientes servi-
dor y puerto para http, descritos antes. El servidor debe ser el nombre d e dominio e n
Internet o la direcci6n IP de un sewidor d e Gopher; el puerto es donde ese servidor estP
disponible para atender solicitudes.
Si se omiten el puerto y su signo precedente de dos puntos, se utiliza el puerto predetermi-
nado, el 70.

72.10.2 La ruta para gopher

La ruta puede tomar una d e las tres siguientes formas:
ti po/sel ector
ti po/sel ector%09bOsqueda
ti po/sel ector%09bt3squeda%09gopherplus
72 Referencia a documentos: el U R L 195

El tip0 es un valor d e caracter simple que indica el tip0 del recurso gopher. Si se omite
la ruta completa del URL para gopher, el tip0 se establece como 1 d e forma predetermi-
nada.
El selector corresponde a la ruta d e un recurso e n el servidor de Gopher. Puede omitirse, en
cuyo caso se transfiere el indice de nivel superior del servidor d e Gopher.
Si el recurso gopher es, en realidad, una maquina d e bdsqueda Gopher, el componente
btisqueda proporciona la cadena d e caracteres que se debe buscar. Esta cadena puede estar
precedida por una tabulaci6n horizontal codificada (%09).
Si el servidor d e Gopher soporta recursos Gopher+, el componente gopherplus suministra la
inforrnacion necesaria para localizar tal recurso. El contenido exacto d e este cornponente
varia basado e n 10s recursos del servidor d e Gopher. Este componente esta precedido por
una tabulaci6n horizontal codificada (%09). Si desea incluir el componente gopherplus pero
quiere omitir el componente de busqueda, debe escribir ambas tabulaciones codificadas
dentro del URL.

7.2.11 URL absolutos y relativos

Los URL tienen dos variantes: absolutos y relativos. Un URL absoluto es la direcci6n comple-
ta d e un recurso y tiene todo lo que un sistema necesita para hallar un documento y su
servidor e n el Web. Como rninimo, un URL absoluto contiene el esquema y todos 10s
elementos necesarios de la parte_especl;fica-del-esquema del URL. Tambien puede conte-
ner cualquiera d e las partes opcionales de la parte_especl;fica-del-esquema.
Con un URL relativo usted proporciona la direcci6n abreviada de un documento que, cuan-
d o el sistema la combina de mod0 automatico con una "direcci6n base", llega a convertirse
en una direcci6n completa para el documento. Dentro del UFU relativo, cualquiera d e sus
componentes se puede omitir. El navegador llena automaticamente 10s segmentos vacios
del UFU relativo usando 10s elementos correspondientes d e un URL base. Este dltirno es, por
lo regular, el URL del documento que contiene el URL relativo, pero puede ser otro docu-
mento especificado con la etiqueta <base>. [<base>, 7.7.11

Una forma comdn de un URL relativo es perder el esquema y el nombre del servidor. Puesto
que muchos documentos relacionados residen e n el mismo servidor, tiene sentido omitir el
esquema y el nombre del servidor del URL relativo. Suponga que el documento base se
transfiri6 la ultima vez del servidor unwu.kumquat.com.Entonces, el URL relativo:

es equivalente a1 siguiente URL absoluto:

http://www. kumquat .com/otro-doc. html
196 CapiWo E Ligas y Webs

La tabla 7.2 rnuestra c6rno se cornbinan 10s URL base y relativo para forrnar un URL absoluto.

Tabla 7-2. C6mo se forma u n URL absoluto

Protocolo Sewidor Directorio Archivo

URL base http www.kumquat.com /

URL relativo 1 1 1 otro-documento.html
1 1 1 1 1
URL absoluto http www.kumquat.com / otro-documento.html

72.11.2 Directorfos de documentos relativos

Otra forrna corndn d e un URL relativo ornite la diagonal principal y uno o rnis nornbres d e
directorio desde el principio d e la ruta del (hacia el) docurnento. Se presupone el directorio
del URL base d e manera automitica para rernplazar estos cornponentes ornitidos. Es la
abreviatura mas comdn, pues la rnayoria de quienes crean paginas con HTML colocan sus
colecciones d e docurnentos y subdirectories de recursos d e soporte e n la misma ruta d e
directorio d e la pigina principal. Por ejernplo, puede tener un subdirectorio especial;/ que
contenga archivos FTP a 10s que hace referencia en su documento de HTML. Digarnos
que el URL absoluto para ese documento de HTML sea:

Entonces, un URL relativo para el archivo LEAME.txt e n el subdirectorio especiaUtendria un

aspect0 parecido a Cste:
ftp:/especial/LEAME. t x t

con el que, e n realidad, transfeririamos:

ftp://www. kumquat .com/pl antalespeci a1 /LEAME. t x t

Visualmente, la operaci6n seria similar a la que aparece e n la tabla 7-3.

Tabla 7-3. Formaci6n de u n URL para ITP absoluto

Protocolo Sewidor Directorlo Archivo
I I 1 I

URL base http www.kumquat.com plantal guia.html

URL relativo f t ~ 1 especial LEAME.txt
1 1 1 1 1
URL absoluto f t ~ www.kumquat.com planta/especial LEAME, txt

72.11.3 Empleo de los URL relatfvos

Los URL relativos son mis que s61o ahorro en el tecleo. Debido a que son relativos a1 servidor
y directorio actuales, es posible mover todo el conjunto de documentos a otro directorio o
7.3 ~ d m o
crear &gas 197

incluso a otro servidor sin tener que cambiar ninguna liga relativa. lrnaginese las dificultades
si tuviera que ir a cada documento d e HTML y cambiar el URL para cada liga cada vez que lo
moviera. iDetestariamos emplear las ligas! Utilice URL relativos cuando sea posible.

7.3 Cdmo crear ligas

Utilice la etiqueta <a, de HTML para crear ligas a otros documentos y para nombrar anclas
d e identificadores d e fragmento dentro de 10s documentos.

7.3.1 Etiqueta <a>

Quienes usan HTML emplean con mLs frecuencia la etiqueta <a> con su atributo h r e f para crear
una liga de hipertexto a otro lugar e n el mismo documento o en otro documento. En estos casos,
el documento actual es la fuente de la liga; el valor del atributo h r e f , un URL, es el destine..
La otra forma e n que puede utilizar la etiqueta <a> es con el atributo name para indicar una
liga destino, liga o identificador de fragmento, en un documento d e HTML.
Puede utilizar tanto el atributo h r e f como name dentro de una etiqueta <a> para definir una
liga a otro documento y un identificador de fragmento dentro del documento actual. Noso-
tros estamos e n contra d e esto, puesto que sobrecarga una etiqueta simple con varias fun-
ciones y algunos navegadores pueden no ser capaces d e manejarla d e forma adecuada.
Mejor utilice dos etiquetas <a> cuando tenga una necesidad d e este tipo. Su archivo fuente
d e HTML sera mas facil de entender y modificar, y funcionad mejor en una gama mas
amplia de navegadores.

Z 3.1.1 Contenidoposible
Entre la etiqueta <a> y su indispensable etiqueta d e fin puede colocar texto comlin, cortes
d e linea, imsgenes y encabezados. El navegador presentad todos estos elementos e n forma
correcta, pero con la adici6n de algunos efectos especiales para indicar que es una liga a
otro documento. Por ejemplo, 10s navegadores griificos m5s populares por lo regular subra-
yan y colorean el texto, ademas d e colocar un borde d e color alrededor d e las imageries
encerradas por etiquetas <a> y </a>.
Aunque el contenido posible puede parecer restringido (la incapacidad d e colocar marcas
de estilo dentro d e una etiqueta <a> es un poco onerosa, por ejemplo), la mayoria de 10s
navegadores le permiten colocar dentro d e una etiqueta <a> casi cualquier cosa que tenga

Se puede ir a traves de 10s terminos "cabeza" y "cola", 10s cuales hacen referencia al destino y a la fuente de una
liga. Este esquema de nombrado supone que el documento al que se hace referencia (la cabeza) tiene muchils
colas que se encuentran incrustadas en muchos documentos referenciados a traves de todo el Web. Nosotros
encontramos esta convenci6n de nombres confusa y fijamos el concept0 de documentos fuente y destino en este
libro.
198 : Lfgas y Webs
Capftulo 7

Funcion:
Define anclas en un flujo de texto
A tributos:
CLASS 0
HREF
NAME
ON CLIC rn 0
ON MOUSEOUT 0
ON MOUSEOVER rn 0
REL
REV
STnE 0
TARGET 0
TITLE
Etiqueta de fin:
</a>, siempre se utiliza
Contiene:
Contenido de liga
Usada en:
Texto

sentido. Para ser coherente con el estandar de HTML, coloque la etiqueta <a> dentro de
otras etiquetas, no a1 contrario. Por ejemplo, aunque la mayona de 10s navegadores encuen-
tran sentido e n cualquier variante de esta liga:
Para suscribirse a - - - - - - - - - - ~

3 i t e y < a hyef = "ko.html">Kumquat en lTnea</a></cite>,

Para suscribirse a
<a href ="ko.html I1><cite>Kumquat en 1 inea</ci te></a>,

s61o el primer ejemplo es tecnicamente correcto.

7.3.1.2 Atributo href

Utilice el atributo h r e f para especificar el URL destino de la liga. Su valor es cualquier

documento valid0 como URL, absoluto o relativo, incluyendo un identificador de fragment0
o un fragment0 de c6digo de JavaScript. Si el usuario selecciona el contenido de la etiqueta
<a>, el navegador transfiere y despliega el documento indicado por el URL del atributo h r e f
o ejecuta la lista de expresiones, metodos y funciones de JavaScript. [URL,7.21
7.3 Cdmo crear Ugas 199

Una etiqueta <a> simple que hace referencia a otro documento podria ser:
La <a href="http:temporada. html I1>temporada de crecimiento</a> para kumquats en el
noreste.
que aparece e n la pantalla d e Navigator como se ilustra en la figura 7-1.

flrchluo Edlclbn Uer I r Marcedores Opclones Dtreclorto Uenlana

Figtrra 7-1.Liga a otro doctrmento de HXWL.

Observe que la frase "Temporada de crecimiento" tiene una apariencia especial, dada por el
navegador. lo que permite que el usuario sepa que es una liga a otro documento. Los
usuarios por lo regular tienen la posibilidad de establecer el color especial del texto d e las
ligas y el color a1 que Cstas cambian cuando las han seleccionado; azul como color inicial y
despuCs rojo si se seleccionan a1 menos una vez, por decir algo.
Ligas miis complejas pueden incluir imiigenes:
<ul>
< l i><a href="consejos-para podar. html 1 1 >
cimg src="imagenes/noticiasOl.gi fB1>iNuevos consejos para podar !</a>
<li><a href="xhistoria.htmll'>
<img src="imagenes/noticias02.gi fI1>Kumquats a traves d e la hi stori a</a>
</ul>
Mosaic, a1 igual que la mayoria de 10s navegadores grAficos,como Navigator e Internet Explorer,
coloca un borde especial alrededor d e las im5genes-liga, como ilustra la figura 7-2.

Ftgzrra 7-2.Mosaic pone trn borde especial alrededor de una imagen-lfga

200 Capftub 7 Ligas y Webs

73.1.3 Atributo name

Utilice el atributo name para establecer un identificador de fragmento dentro de un docu-
mento d e HTML. Una vez creado, el identificador de fragmento IlegarP a ser el destino
potencial de una liga.
Una forma fPcil de conceptualizar un identificador de fragmento es haciendo una analogia de
HTML con la instrucci6n goto comdn en muchos lenguajes de programaci6n. El atributo name
dentro de la etiqueta <a>coloca un r6tulo dentrode un documento. Cuando se emplea ese r6tulo
en una liga a ese documento, es equivalente a decir que el navegador "idn(goto) a ese r6tulo.
El valor del atributo name es cualquier cadena de caracteres, encerrada entre comillas; por
ejemplo:
<h2><a name="poda">Depuracibn d e su drbol de kumquats</a></hZ>

Observe que hemos establecido el ancla en el encabezado de secci6n de un supuesto

documento extenso. Es una prPctica que alentamos para todas las secciones de su trabajo, a
fin de crear una fPcil referencia y logran un manejo mPs %gil,por ejemplo, con la extracci6n
automatizada de temas.
Cuando el usuario selecciona la siguiente liga:

salta directamente a la secci6n del documento que hemos nombrado antes: poda
El contenido de la etiqueta <a> no se muestra en alguna manera especial con el atributo name.
Tkcnicamente, no es necesario colocar contenido de documento dentro de la etiqueta <a>con
el atributo name, puesto que s61o marca una ubicaci6n (un fragmento) en el documento. En la
pdctica, algunos navegadores ignoran la etiqueta a menos que exista contenido (una palabra,
frase o incluso una imagen) entre las etiquetas <a> y </a>. Por esta raz6n, es quiz& una buena
idea tener a1 menos un elemento visible en el cuerpo de cualquier etiqueta <a>.

Existen varios "manejadores de evento" integrados en 10s navegadores modernos. Estos

manejadores estPn atentos a ciertas condiciones y acciones del usuario, como un clic del raton
o cuando una imagen terrnina de cargarse en la ventana del navegador. Con JavaScript del lado
cliente, es posible incluir ciertos manejadores de evento como atributos de ciertas etiquetas de
HTML y ejecutar uno o mas comandos y funciones de JavaScript cuando se presente el evento.
Con la etiqueta de liga (<a>) puede asociar c6digo de JavaScript con 10s tres eventos relacio-
nados con el ratbn: cuando el usuario hace clic con el bot6n del rat6n (onC1 i ck), cuando
mueve el punter0 sobre el contenido de la etiqueta (onMouseOver) y cuando lo mueve fuera
de la liga (onMouseOut). El valor del manejador del evento (encerrado entre comillas) co-
rresponde a una o a una serie de expresiones, metodos y referencias de funci6n de
Z3 Cdmo m a r &as 201

JavaScript separados por signos de punto y coma, 10s cuales ejecuta el navegador cuando
ocurre el evento. [manejadoresde evento de JavaScript, 13.3.31
Por ejemplo, un uso popular aunque simple del evento o n M o u s e O v e r con una liga es el
desplegado de una breve descripci6n del destino de la etiqueta en la barra de estado del
navegador con avisos de JavaScript (figura 7-3). Comdnmente, el navegador muestra el URL
destino cuando el usuario pasa el punter0 del rat6n sobre cualquier parte del contenido de
una etiqueta <a>:
<a
href="http://www.kumquat.com/kumquats/cocina/recipientes. htmliYquat5"
onMouse0ver="window.status='Un tazbn para la sopa d e kumquats. ';return true">
cimg src="imtigenes/tazon .gi f " border=O>
</a>
Pensamos que el contenido d e la etiqueta misma deberia explicar la liga, pero en ocasiones
el espacio d e la ventana es estrecho y una explicaci6n complementaria es dtil, como cuando
la liga se localiza e n una tabla d e contenido.

dm1 P k C p u a la ropa d* Kumquat.

Figura 7-3. UtilkeJauaScrlptpara mostrar mensajes en la barra de estado del navegador.

Consulte el capitulo 13 para mayor informaci6n acerca de JavaScript.

73.1.5 Atrfbutos rely rev

Los atributos re1 y r e v expresan una relaci6n y una direcci6n formales entre documentos
fuente y destino. El atributo re1 especifica la relaci6n entre el documento fuente hacia el
destino; el atributo r e v especifica la relaci6n inversa: del destino a la fuente. Arnbos atributos
pueden colocarse en una simple etiqueta <a> y el navegador puede emplearlos para modificar
de manera especial la apariencia del contenido de la liga o para construir de forma autom5tica
menGs d e navegaci6n en documentos. Otras herramientas tambikn pueden utilizar estos atri-
butos para construir colecciones d e ligas especiales, tablas de contenido e indices.
El valor d e cualquiera d e 10s atributos re1 o r e v es una lista de relaciones separadas por
espacios. Los nombres de relaci6n reales y sus significados dependen d e usted: n o e s t h
resueltos d e manera formal por el e s t h d a r d e HTML. Por ejemplo, un documento que
forma parte d e una secuencia d e documentos podria incluir sus relaciones e n una liga.
<a href="partel4. html " re1 =next rev=prev>
202 Capftulb Z Ligas y Webs

La relacion de la fuente y el destino es moverse a1 siguiente documento; la relaci6n inversa

es moverse a1 documento previo.
Estas relaciones d e documentos tambiCn se utilizan en la etiqueta <1 ink> e n el encabezado
(<head>) del documento. La etiqueta <I ink> establece la relacidn sin crear en realidad una
liga hacia el documento destino; la etiqueta <a> crea la liga y la imbuye con 10s atributos de
relaci6n. [<link>, 7.7.21
La siguiente lista muestra las relaciones d e documento empleadas con mayor frecuencia:
next
Liga hacia el siguiente documento d e una colecci6n
prev
Liga hacia el documento previo d e una coleccidn
head
Liga hacia el documento d e nivel superior e n una colecci6n
toc
Liga a la tabla d e contenido d e una coleccidn
parent
Liga a un documento d e jerarquia inmediata superior d e la fuente
child
Liga a un documento d e jerarquia inmediata inferior d e la fuente
index
Liga a1 indice del documento actual
glossary
Liga a1 glosario del documento actual
En general, pocos navegadores aprovechan estos atributos para modificar la apariencia d e la
liga. Sin embargo, estos atributos son excelentes para crear ligas; le recomendamos que se
tome tiempo para insertarlos cada vez que le sea posible.

7.3.1.6 Att-ibutos style y class

Los atributos sty1 e y cl ass sirven para que la etiqueta <a> controle el estilo d e desplegado
correspondiente a su contenido y para darle formato a Qte d e acuerdo con una clase
predefinida de la etiqueta <a>. [atributo style, 9.1.11 [atributo class, 9.2.41

7.31.7 Att-ibutotarget
El atributo de destino, target, le permite especificar d6nde mostrar el contenido d e una liga
seleccionada. Generalmente utilizado junto con etiquetas para marcos o multiples ventanas
del navegador, el valor d e este atributo es el nombre del marco o ventana e n la que
73 ~ d m crear
o Hgas 203

el documento a1 que se llama (destino) debe aparecer. Si existe el marco o la ventana, el

documento se carga ahi. Si no, se crea una nueva ventana, con base en el nombre especifi-
cado. Para mayor informaci6n, incluyendo una lista de nombres de destino especiales,
consulte la secci6n 12.7.

7.3.1.8 Atributo title

El atributo de titulo, t i t 1e, le permite especificar un titulo para el documento hacia el cual
establece la liga. Su valor es cualquier cadena de caracteres, encerrada entre comillas. El
navegador puede utilizarlo cuando se muestra la liga, quizas haciendo parpadear el titulo
cuando el rat6n pasa sobre ella. El navegador tambikn podria utilizar el atributo t i -
t 1e cuando se agregue esta liga a la lista de sitios favoritos del usuario.
El atributo t i t l e es muy ~ t i para
l hacer referencias a un recurso que no tenga nombre,
digamos una imagen o un documento que no sea de HTML. Por ejemplo, el navegador podria
incluir el siguiente titulo en esta pagina opcional que exhibe una imagen sin palabras:
-=a href="pics/kumquat.gif"
title="Imagen d e la Noble FrutaU>
Es conveniente que el valor especificado coincida con el titulo del documento a1 que se
hace referencia, aunque no es una regla.

7.3.1.9 Atributo urn

El atributo u r n define el nombre universal de recurso (URN, universal resource name) m5s
general para un documento a1 que se hace referencia. Su valor es una cadena de caracteres
encerrada entre comillas. La sintaxis y sernantica del URN todavia no se define, lo que hace
de este atributo algo asi como un odre vacio para futuras versiones de HTML.

73.2 Ligas a otros documentos

Puede crear una liga a otro documento con la etiqueta <a> y su atributo h r e f , el cual define
el URL del documento destino. El contenido de la etiqueta <a> se presenta a1 usuario de
forma distintiva para indicar que la liga est5 disponible.
Cuando crea una liga a otro documento, es conveniente incluir 10s atributos t i t l e , r e 1 y
r e v d e la etiqueta <a>, pues ayudan a documentar la liga que est5 creando y permiten a1
navegador embellecerla.

73.3 Ligas dentro de un documento

Crear una liga dentro del mismo documento de HTML o hacia un fragmento especifico de
otro docurnento es un proceso de dos pasos. El primer0 es crear el fragmento destino; el
segundo es crear la liga hacia 61.
204 Capftulo 7: Ligas y Webs

Utilice la etiqueta <a> con su atributo name para identificar un fragmento. El valor del
atributo name se utiliza en las ligas que apuntan a1 fragmento. Aqui mostramos un ejemplo
de un identificador d e fragmento:

Una liga hacia el fragmento es una etiqueta <a> con el atributo h r e f , cuyo valor (el URL
destino) termina con el nombre del fragmento precedido por el signo de nlimero (#). Asi,
una referencia hacia el identificador de fragmento del ejemplo anterior tendr5 un aspect0
similar a este:
Consul t e 1a <a href="index. html#Seccion_7"2 Secci6n 7 </a> para obtener mds
d e t a l l es.

Por mucho, el uso mas comlin d e 10s identificadores d e fragmento es para crear tablas d e
contenido de documentos extensos. Comience por dividir el documento en secciones 16gi-
cas, utilizando 10s encabezados apropiados, asi como un formato consistente. Agregue un
identificador d e fragmento a1 principio de cada seccibn, en general como parte d e su titulo.
Para finalizar, Cree a1 principio una lista de ligas para 10s identificadores d e fragmento.
Nuestro documento que ensalza la vida y maravillas del excelente kumquat, por ejemplo, es
bastante extenso e incluye mliltiples secciones y subsecciones interesantes. Es un documen-
to para leerse varias veces. Para que 10s amantes del kumquat localicen rgpidamente las
secciones que les interesan, hemos incluido identificadores d e fragmento para cada secci6n
principal y colocado una lista ordenada d e las ligas (puede ser tambien una tabla de conte-
nido d e 10s lugares favoritos) a1 principio de cada uno d e 10s documentos de 10s Amantes
del Kumquat, de 10s cuales aparece una muestra a continuaci6n junto con identificadores d e
fragmento de muestra que aparecen en el mismo documento. El simbolo d e elipsis (...)
significa, desde luego, que existen segmentos d e contenido intencionalmente omitidos.

<01>
-li><a tiref="Tsmlo-p~epPrepat%cidn~dd sueio</a,
4 i><a href="#perforacion">Excavaci6n del agujero</a>
4 i><a href="#pl antarU>P1antacidn del irbol</a>
</01>
.. .
<h3><a name=suelo>Preparacibn del suelo</a></h3>
...
<h3><a name=perforacion> Excavacidn del agujero</ax/h3>
...
<h3><a name=pl antarzP1 antaci 6n del arbol</a></h3>

Por consiguiente, el amante del kumquat puede hacer clic en la liga deseada d e la tabla de
contenido e ir directamente a la secci6n que le roe por dentro, sin tener que hacer excesivos
y tediosos desplazamientos pantalla por pantalla.
74 Ligas efectivas 205

Observe tambiCn que este ejemplo emplea URL relativos (una buena idea si pretende e n
alguna ocasion mover o renombrar el documento sin romper todas las ligas).

7.4 Ligas efectivas

Un documento se convierte e n hipertexto cuando lo adereza con ligas, de la misma forma
que el agua se convierte e n sopa cuando se le agregan algunos vegetales y pasta. Tkcnica-
mente, ha logrado cocinarla, per0 quiz5 no sea muy sabrosa que digamos.
Insertar ligas e n 10s documentos es algo asi como un arte: requiere buenas habilidades de
escritura, proezas con HTML y un sentido arquitect6nico de 10s documentos y sus relaciones
con otros e n el Web. Las ligas efectivas fluyen e n forma transparente dentro de un documen-
to, dando silenciosamente a1 lector oct5anos de posibilidades sin afectar a1 documento ac-
tual. Las ligas ma1 diseiiadas son escandalosas, intermmpen el flujo del documento y casi
siempre molestan a1 lector.
Aunque existan tantos estilos de ligas como autores, veamos algunas de las maneras m5s
populares para ligar 10s documentos. Todo lo que tiene que hacer son dos cosas: proporcio-
nar a1 lector acceso r5pido a la informaci6n relacionada y decirle c6mo se relaciona la liga
con la p5gina que est5 viendo.

7.4.1 Lista de ligas

Quiz5 la forma miis comtin de presentar ligas e n documentos d e HTML es mediante listas,
ordenadas o no, con un estilo de tabla de contenido o lista de recursos.
Hay dos escuelas de estilo. Una coloca el elemento de la lista completa en la liga fuente; la
otra abrevia el elemento y coloca un extract0 en la misma liga. En el primer caso, asegtirese
de mantener el contenido de la liga breve y conciso; e n el tiltimo, utilice un estilo direct0
que facilite insertar la liga.
Si su lista d e ligas se hace muy extensa, evalde organizarla e n sublistas agrupadas por temas.
Asi, 10s lectores pueden ver 10s temas (establecidos, tal vez, como encabezados <h3>) para
ir a la lista apropiada y luego hurgar e n ella e n busca del documento deseado.
El otro estilo de lista es m5s descriptivo y tambikn m5s prolijo, de mod0 que tendr5 que ser
cuidadoso para no lograr algo confuso:
<P>
Los docurnentos re1 aci onados con el kumquat i ncl uyen:
<ul>
<li>Una gufa concisa para <a href =
"cultivo-kumquat .htrnll'> cultivo lucrativo del kumquat </a>, que incluye una
variedad de planes de negocios, l i s t a s de cornparifas ernpacadoras y cornparifas
de surninistros de cul tivos.
<li>ilOl maneras diferentes de <a href="kurnquat-usosl'>utilizar el kurnquat</a>,
206 Capftulo 7 Ligas y Webs

incluyendo guisados y tartas de kumquat!

<li>El kumquat es un drbol robusto, per0 incluso el mas frondoso y verde de 10s
follajes puede apreciar algunas <a href="news:alt,kumquat-mantenimientol'>
sugerencias para el crecimiento</a> y para incrementar su rendimiento.
<li>El negocio de 10s kumquats va en expansih, como lo demuestra este resumen
de di ez aiios de 1 a <a href="http://www.ora .com/kumquat-reporte/">
i ndustri a del kumquat</a>.
</ul>

En ocasiones parece dificil leer un documento d e HTML fuente. Imaginese la confusion si

emple4ramos ligas con identificadores de fragmentos para cada uno de 10s subtemas en las
explicaciones d e 10s elementos d e la lista. Sin embargo, todo parece claro y navega-
ble cuando s e muestra en el navegador, como ocurre en Mosaic, segrin puede ver en la
figura 7-4.

Los dscumnas rlaelaMdoscon el k q u a t inchyen:

0 Una goia cowbe para cultivn l n n a h del kumqua2, pub? inchy una varW%ddb p h s da
negocbs, lism dc comp&w empacadores y c o m p d w dc svmin&tm dc cultiyos.
r ,101 manems diferems de u e a r el humqua(, inclupIdo guisadw y hrts,de kumquat!
El k q w w w a01 mbwm,pro incluso el m h fmndosoy n r d e de los foUa~espmdr
apreciar @UMS swemncias pm el cl~reclmienmy pm incmntw su nndimiento.
El negocb de bs kun-quam vs en expansh. como lo demuesrm esm asumen de dkz 610s de 1

Figrtra 7-4.Una Itsfa con demasiadas ligas p r o con descripcidn eJ?cienre.

Este estilo mas descriptivo d e presentar una lista de ligas intenta llevar a 10s lectores al
documento ligado, ofreciendoles un panorama d e lo que pueden encontrar ahi. Debido a
que cada elemento de la lista es m4s extenso y requiere m5s rastreo por parte del lector,
debe emplear este estilo con moderation y controlar el nlimero d e ligas.
En general, emplee el estilo d e lista breve cuando presente un gran nrimero de ligas a un
ptiblico bien informado. El estilo m9s descriptivo es la mejor elecci6n para un menor ntime-
ro d e ligas para las cuales su auditorio estC menos informado del tema.

74.2 Referencias integradas

Si no est9 coleccionando ligas en listas, quiz5 las estC dispersando a lo largo de su documen-
to. Las denominadas ligas integradas o e n linea (inline link) son m b adecuadas para
mantener el verdadero espiritu del hipenexto, puesto que capacitan al lector para marcar su
ubicacion actual e n el documento, visitar un tema relacionado con mayor profundidad o ir
7.4 Lfgas efectivas 207

a una explicaci6n exhaustiva y despues regresar a la p5gina original para continuar leyendo.
Esto es un proceso d e informaci6n muy personalizado.
Sin embargo, el principal error que cometen algunos usuarios d e HTML novatos es saturar
10s documentos con ligas y manejarlas como si fueran botones de emergencia que deman-
dan ser utilizados. Quiz5 ya ha visto el uso indiscriminado d e ligas: paginas d e HTML con la
palabra "aqui" a lo largo de todo el sitio, como el horrible ejemplo desbordante de ligas de
la figura 7-5 (no nos atrevemos a mostrarle el c6digo HTML de esta parodia).

G i tlrchiuo Ediclon Uer Ir Marcadores Ovclones Dlrectorlo Uentana

Las kumquats pueden proporcionar rigwax, ad corn dud 9 hlicidad para todos los
que gustaa del dalicioso Pruto, -- -
dic > .iBS)!& c - para saber rrh acerca da la
industria de los k q u a t s desde los irlbrnol diez abs y su posible futuro. Usted puede
--
descubrir los k q u a t s , SIEMBRE un drbol, haga clic r L + J ~ L < - - para
saber m6s acem de 10s dtodos de cultvo de 10s kumqmts y srembre el sup. 0 sr lo
prefiere, p k algunos quak para una sa1sa;hagaclic - , - .IBS,y!; A MI;[ - - para
localizar una granja de quits c m de usted.

Ftgura 7-5. Las figas no deben gritar y brincar como p a m fitos, ';Aquz?jA mil"

Como ligas, frases como "haga clic aqui" y "tambiCn disponible en" carecen d e contenido y
son molestas. Hacen que la persona que navega por la pagina en busca de una liga impor-
tante tenga que leer todo el texto circundante para hallar una referencia litil.
El mejor y m5s refinado estilo para una liga integrada es hacer que cada una contenga un
sustantivo o un sustantivo/verbo relacionado con el tema que trata la pagina. Compare
c6mo se tratan las referencias a1 cultivo del kumquat y a las noticias de esta industria en la
figura 7-6 con el ejemplo de "iAqui! iA mi!" de la figura 7-5.

Los kumqwts pueden proporcionar riquezas, asi como salud y fel~cir lad para todos 10s
1 9ue gustnn del delicioso fruto. Para saber WAS pcerca de la ~ldutriq 4e 1% kumqg&
esile los liltimos diez a7tos y ~ p 9 s i b l ePut~,roUsted puede dmubriir 10s kumquats,
llEMBRE un brbol, para saber mib de 10s rrietcdos de . rla l u &IbULLH-
.-
.
-
.
a ..
iembre el s q . 0 si lo prefiere, junte algunos quak para una salsa; para l d i z a r w
wta de qq cem de M.

Las ligas integradas dtscrefasy modcradasfuncionan mejor.

Ftgura 7-15,

Un examen r5pido de la figura 7-6 proporciona de inmediato utiles ligas para 10s "mCtodos
d e cultivo del kumquat" y "10s riltimos diez aiios de la industria del kumquat". No hay
necesidad d e leer el texto circundante para comprender a d6nde lo Ilevad la liga. En
208 Capftulo 7.-Ligas y Webs

verdad, el contenido inmediatamente circundante en nuestro ejemplo, como en la mayoria

de las ligas integradas, sirve s610 como comodin sintlctico para dar apoyo a las ligas.
Se requiere mayor esfuerzo para crear ligas integradas en el contenido general d e un docu-
mento que listas de ligas. Es necesario comprender el contenido del documento actual, asi
como el d e 10s documentos destino, ser capaz de expresar esa relaci6n en apenas unas
palabras e integrar con inteligencia esa liga en un lugar clave del documento fuente. Afortu-
nadamente, ese lugar clave es donde usted podria esperar que el usuario este listo para
interrumpir su lectura y hacer una pregunta o solicitar mls informaci6n. Para hacer esto aun
mls dificil, e n particular para el escritor tecnico traditional, esta forma de conversaci6n
autor-lector es mPs efectiva cuando se presenta en voz activa (es decir, el, ella o ello hacen
algo con un objeto, no el objeto 10s lleva a hacer algo). No obstante, el esfuerzo hecho es
fitil: resultan documentos mPs informativos, completes y flciles de leer. Recuerde, usted
escribirl el documento s61o una vez, pero s e d leido miles de veces, si no es que millones.
Complazca a sus lectores, por favor.

7.4.3 Lo que debe y no debe hacer con las ligas

Veamos algunas sugerencias para la creaci6n de ligas:
Mantenga el contenido de la liga tan conciso como le sea posible. Las ligas extensas o
10s enormes iconos para las ligas son visual y potencialmente confusos.
Nunca ponga dos ligas juntas. La mayoria d e 10s navegadores dificultan determinar
d6nde termina una liga y d6nde comienza la otra. SepPrelas con texto o saltos de linea.
Sea consistente. Si utiliza referencias en linea, procure que todas sus ligas sean referen-
cias en linea. Si elige utilizar listas de ligas, apeguese a la forma corta o larga; no mezcle
estilos e n un mismo documento.
Intente leer su documento eliminando todo el texto que no sea liga. Si de pronto
algunas ligas parecen no tener sentido, vuelva a escribirlas de mod0 que lo tengan
(mucha gente revisa documentos solo en busca de ligas; el texto circundante llega a ser
como un fondo gris para las deslumbrantes ligas).

Se ha convertido e n moda utilizar imPgenes e iconos e n vez de palabras para el contenido

de las ligas. Por ejemplo, e n lugar d e la palabra "siguiente", algunos creadores de plgi-
nas d e HTML utilizan un icono con forma d e mano apuntando en una direccibn. Una liga a
la plgina principal no estl completa sin la imagen de una pequeiia casa. Las ligas a las
herramientas de blisqueda ahora deben contar con una imagen de lente de aumento o lupa,
signo de interrogacidn o binoculares.
Resistase a caer presa del "sindrome del Monte Everest" para insertar imlgenes s61o porque
puede. De nuevo, esto es un asunto de contexto. Si usted o 10s lectores de sus documentos
Z 5 Imdgenes sensibles a1 rat& 209

no pueden determinar de inmediato quC relaci6n tiene una liga con el documento actual, ha
fallado. Emplee imiigenes atractivas como ligas de manera sensata, consistente y s610 de
forma que ayude a 10s lectores a localizar en su documento informaci6n importante. Tam-
biCn recuerde que sus piiginas pueden ser leidas por alguien en cualquier parte del planeta
(y quizii miis allii) y que tal vez esas imiigenes no tienen el mismo significado a travCs de las
fronteras culturales (ijamiis ha escuchado lo que el "okay" que se hace con la mano en
Estados Unidos significa para una persona en Japbn?).
La creaci6n de una iconografia consistente para una colecci6n de piiginas es una tarea que
intimida y que, en realidad, debe emprender con la ayuda de alguien con estudios formales
en diseiio griifico. Confie e n nosotros, la clase de mente que produce c6digo estupendo y
crea un excelente documento de HTML es raramente apta para crear imiigenes bellas,
irresistibles. Localice un buen diseiiador griifico; sus piiginas y lectores se beneficiariin en
gran medida.

7.5 Imdgenes sensibles a1 rat&

Comdnmente, una imagen colocada dentro de una liga llega a ser parte de su contenido. El
navegador puede modificar la imagen de alguna manera especial (por lo regular poniCndole
un borde) para dar una pista a1 lector de que es una liga, pero el usuario hace clic en la
imagen del mismo mod0 que en una liga de texto.
El estiindar de HTML incluye una caracteristica que permite insertar diferentes ligas dentro
de la misma imagen. A1 hacer clic en distintas iireas de la imagen el navegador establece una
liga hacia diferentes documentos destino. Estas imiigenes sensibles a1 rat6n, conocidas como
mapas de imagenes, abren el camino a toda una gama de creativos estilos de ligas.
Hay dos maneras de crear mapas de imiigenes, conocidas como mapas de imagen del lado
servidor y mapas de imagen del lado cliente. La primera, habilitada por el atributo i smap
de la etiqueta <img>, requiere el acceso a un servidor y aplicaciones para procesar mapas de
imiigenes interrelacionadas. La segunda se crea mediante el atributo usemap de la etiqueta
<img>, junto con las etiquetas correspondientes <map> y <area>. Puesto que la interpreta-
ci6n de la posici6n del rat6n en la imagen para llegar a otro documento ocurre en la
miiquina del usuario, 10s mapas de imiigenes del lado cliente no requieren una conexi6n de
servidor especial, e incluso pueden implementarse en ambientes distintos a1 Web, digamos
en una unidad de disco duro local o en una colecci6n de documentos localizada en un disco
compacto. [<map*, 7.5.31 [*area*, 7.5.41 [*img*, 5.2.61

75.1 Mapas de imdgenes del lado s m i d o r

Usted agrega una imagen a una liga con una etiqueta < i m p dentro del cuerpo de la eti-
queta <a>. La convierte e n imagen sensible a1 rat6n agregando el atributo i smap a la etiqueta
210 Capftulo 7 Lfgas y Webs

<img>. Este atributo especial de <img> le dice a1 navegador que la imagen es un mapa
especial que contiene mas de una liga (el navegador ignora el atributo i smap si la etiqueta
<img> no est%dentro de la etiqueta <a>). [<img*, 5.2.61
Cuando el usuario hace clic e n alguna parte dentro de la imagen, el navegador pasa las
coordenadas del puntero del rat6n junto con el URL especificado en la etiqueta <a> a1
servidor del documento, el cual utiliza aquCllas para determinar cu5l documento debe entre-
gar a1 navegador.
Cuando emplea i smap, el atributo h r e f de la etiqueta <a> debe contener el URL de una
aplicacidn e n el servidor, o, para algunos servidores de HTTP, un archivo de rnapa relacio-
nado que contenga la informaci6n de las coordenadas y ligas. Si el URL es s61o el de un
documento convencional, pueden presentarse errores y es muy probable que no se transfie-
ra el documento deseado.
Las coordenadas de la posici6n del puntero del rat6n son pixeles de pantalla contados a
partir de la esquina superior izquierda de la imagen, comenzando con (0,O). Las coordena-
das se agregan a1 final del URL, precedidas por un signo de interrogaci6n.
Por ejemplo, si un usuario hace clic a 43 pixeles a la derecha y 15 hacia abajo con relaci6n
a la esquina superior izquierda de la imagen exhibida desde la liga siguiente:

el navegador envia 10s siguientes parametros de b k q u e d a a1 servidor de HTTP:

En el ejemplo, herramienfas.map es un archivo de mapa de imfigenes especial dentro del

directorio cgi-bidimagenmapa y contiene coordenadas y ligas. Un proceso de mapa de
imkgenes especial utiliza este archivo para igualar las coordenadas recibidas (43,15 e n este
ejemplo) y entregar con el documento de la liga seleccionada.

75.1.I Consideracionesdel lado servidor

Con 10s mapas de imagen habilitados por i smap y sensibles a1 rat6n, el navegador s610 se
necesita para transmitir el URL y las coordenadas del ratdn a1 servidor. El servidor de docu-
mentos convierte estas coordenadas en un documento especifico. El proceso de conversi6n
difiere entre 10s servidores y no lo define el estandar de HTML.
Debe preguntar a 10s administradores de su servidor web y tal vez tenga incluso que leer la
documentaci6n de Cste a fin de determinar cdmo crear y programar un mapa de imkgenes.
La mayoria de 10s servidores incluyen algdn programa de utileria, localizado casi siempre en
el directorio cgi-bidimagenmapa, para manejar mapas de imigenes. La mayoria de estas
utilerias emplean un archivo de texto que contiene las regiones del mapa de imfigenes y las
Z 5 Imdgenes sensfbles a1 ratdn 21 1

ligas relacionadas a las que se hace referencia mediante el URL de su mapa de imagen para
procesar la petici6n.
Aqui tenemos un ejemplo de archivo de mapa de imlgenes que describe las regiones
sensibles e n nuestra imagen de ejemplo:
# Imagemap fi 1 e=herramientas.map
default .
normal html
circle 100.30.50 ligal.htm1
rectangle 180,120,290,500 liga2.html
polygon 80.80,90,72,160,90 liga3.html
Cada regi6n sensible del mapa de imageries estl descrita en una forma geomktrica y sus
coordenadas esdn definidas en pixeles, como el circulo (circle),con su punto central y su radio,
las coordenadas de las esquinas superior izquierda e inferior derecha del rectlngulo (rectangle)
y 10s extremos geomCtricos de un poligono @olxon).Todas las coordenadas son relativas a la
esquina superior izquierda de la imagen (0,O). Cada figura tiene un URL relacionado.
Una aplicaci6n para procesar mapas de imlgenes por lo regular prueba cada figura en el
orden en que aparece e n el archivo de imagen y entrega a1 navegador el documento espe-
cificado por el URL correspondiente si las coordenadas x,y del puntero del rat6n caen
dentro de 10s limites de esa figura. Esto significa que es correct0 sobreponer formas; s610
que tenga cuidado d e cuPl de ellas tiene la precedencia. Ademis, no es necesario que toda
la imagen quede cubiena por regiones sensibles: si las coordenadas que se envian no caen
dentro de una figura, se entrega el documento predeterminado a1 havegador.
Este e s s610 un ejemplo de c6mo se puede procesar un mapa de imlgenes y de 10s archivos
complernentarios que requiere para ese proceso. Por favor, relinase con su administrador
del sitio web y consulte 10s manuales del servidor para aprender a instrumentar un mapa de
imlgenes del lado servidor para su sistema y sus documentos de HTML.

7.5.2 Mapas de imagen del lado cliente

La desventaja obvia para 10s mapas de imagen del lado servidor es que necesitan de un servidor.
Esto significa que usted debe tener acceso a1 servidor de HTTP o a su directorio /cgi-bid, que
no siempre e s d disponible. Ademis, 10s rnapas de imagen del lado servidor limitan la portabilidad,
pues no todas las aplicaciones para procesar mapas de imPgenes son las mismas.
Los mapas de imlgenes del lado servidor tambiCn implican demoras para el usuario mien-
tras navega, ya que el navegador debe obtener la atenci6n del servidor para procesar las
coordenadas de la imagen. Esto pasa incluso si no hay acci6n alguna por efectuar, tal como
una secci6n de la imagen que no estC ligada ni conduzca a alguna pane.
Los mapas d e imlgenes del lado cliente no sufren de ninguna de estas dificultades. Habili-
tados mediante el atributo usemap de la etiqueta <img> y definidos por las etiquetas de
extensi6n especiales <map> y <area>, 10s mapas de imlgenes del lado cliente permiten a
212 Capftulo 7: Ligas y Webs

quienes crean piginas con HTML incluir e n sus documentos un mapa d e coordenadas y
ligas que describe las regiones sensibles de una imagen. El navegador e n la computadora
cliente traduce e n una acci6n las coordenadas de la posici6n del puntero del rat6n dentro de
la imagen, digamos cargar y mostrar otro documento. Y 10s atributos especiales de JavaScript
que estin habilitados proporcionan una riqueza de efectos especiales para 10s mapas de
imigenes del lado del cliente. [Manejadores de eventos de JavaScript, 13.3.31
Para crear un mapa d e imagen del lado cliente incluya el atributo usemap como parte de la
etiqueta <img>. Su valor es el URL de un segment0 etiquetado con <map> e n un documento
de HTML que contiene las coordenadas del mapa y 10s URL de las ligas relacionadas. El
documento en el URL identifica el documento de HTML que contiene a1 mapa; el identificador
de fragmento e n el URL identifica el mapa que se utilizari. Combnmente, el mapa esti e n el
mismo documento que la imagen y el URL puede reducirse a1 identificador de fragmento: un
simbolo de nbmero (#) seguido del nombre del mapa.
Por ejemplo, el siguiente fragmento de c6digo dice a Navigator o a Internet Explorer que la
imagen mapa.gifes un mapa de imPgenes del lado cliente y que sus coordenadas sensibles
a1 rat6n y URL d e liga relacionados se encuentran en la secci6n map del documento mapa:

75.3 Etiqueta <map>

Para que funcionen 10s mapas d e imPgenes del lado cliente, debe incluir e n algbn lugar del
documento d e HTML un conjunto de coordenadas y URL que definan las regiones sensibles
a1 puntero del rat6n en un mapa de imigenes del lado cliente y la liga que debe seguirse
para cada regi6n e n la que el usuario haga clic. Debe incluir esas coordenadas y ligas como
valores de atributos e n etiquetas especiales <area>; la colecci6n de especificaciones etique-
tadas con <area> van dentro de la etiqueta <map> y su etiqueta de fin, </map>.

<map>
Funcion:
Delimita las especificaciones del mapa de imigenes del lado cliente (usemap)
Atributos:
NAME
Etiqueta de fin:
</map>; siempre se usa
Contiene:
Contenido; mapa
Usada en:
Cuerpo del contenido
Z 5 Imdgenes sensfbles a1 rat6n 213

El segmento <map> puede aparecer en cualquier parte de cualquier documento de HTML.

Los navegadores que n o soportan 10s mapas de imigenes del lado cliente ignoran el conte-
nido de la etiqueta <map>. En estos casos, el contenido de <map> nunca se muestra e n la
ventana del navegador.
El valor del atributo name de la etiqueta <map> es el nombre utilizado por el atributo usemap
de una etiqueta <img> para localizar la especificacion del mapa de imigenes. El nombre
debe ser 6nico y n o debe emplearlo otra etiqueta <map> en el documento, pero mis de un
mapa d e imigenes puede hacer referencia a las mismas especificaciones etiquetadas con
<map>. [usemap, 5.2.6.131
7.5.4 Etiqueta <area>
Las "tripas" de un mapa de imagenes del lado cliente son las etiquetas <area> dentro del segmento
del mapa. Estas etiquetas <area> definen cada region sensible a1 raton y la acci6n que el navegador
debe efectuar si el usuario selecciona esa regi6n en un mapa de hxigenes del lado cliente.

<area>
Funcion:
Define las coordenadas y ligas para una region e n un mapa de imigenes del
lado cliente
A tributos:
ALT
COORDS
HREF
NOHREF
NOTAB 0
ONMOUSEOUT 0
ONMOUSEOVER 0
SHAPE
TABORDER 0
TARGET 0
TITLE 0
Etiqueta de fin:
Ninguna
Contiene:
Nada
Usada en:
Contenido de mapa

La regi6n definida por una etiqueta <area> act6a precisamente como cualquier otra liga:
cuando el usuario mueve el punter0 del raton sobre la region de la imagen, la forma del
214 Capfhrlo 7 Ligas y Webs

puntero cambia y el navegador muestra el URL de la liga relacionada en la b a r n de estado,

e n la parte inferior d e su ventana.' Las regiones del mapa d e imlgenes del lado cliente no
definidas por lo menos e n una etiqueta <area> no son sensibles a1 rat6n.

75.4.1 Atributo ali

Como su primo de la etiqueta <img>, el atributo a1 t de la etiqueta <area> le permite
adjuntar un r6tulo de texto a la imagen, except0 que en este caso la etiqueta esti asociada
con un area especifica d e la imagen. El navegador puede presentar ese rbtulo a1 usuario
cuando pase el puntero del rat6n sobre el Qrea,y tambien puede usarlo un navegador no
grlfico para presentar el mapa de imlgenes del lado cliente como una lista de ligas identi-
ficadas por las etiquetas a1 t.

7.5.4.2 Atributo coords

El requerido atributo coords de la etiqueta <area> define las coordenadas d e una regi6n
sensible a1 rat6n e n un mapa de imlgenes del lado cliente. El ntimero de coordenadas y sus
significados dependen de la forma de la regi6n conforme la determina el atributo shape,
que veremos m l s adelante e n este capitulo. Puede definir regiones de ligas como rectlngu-
los, circulos y poligonos dentro d e un mapa de imlgenes del lado cliente. Los valores
apropiados para cada forma son:
circle
coords="x,y,r" donde x y y definen la posici6n del centro del circulo (0,O es la
esquina superior izquierda d e la imagen) y r es su radio, en pixeles.

.
coords="xl,yl,x2,y2,x3,y3,. . I 1 donde cada par d e coordenadas x y y definen un
vertice del poligono, siendo 0,O la esquina superior izquierda de la imagen. Se requie-
ren por lo menos tres pares de coordenadas para definir un triQngulo, poligonos de
mayor orden requerirln un ntimero mayor de vertices (pares de coordenadas). El poli-
gono se cierra de forma automltica, de mod0 que no necesita repetir la primera coorde-
nada a1 final d e la lista para cerrarlo.
rectangle
coord s="xl ,yl ,x2, y2 " donde el primer par d e coordenadas es una esquina del rec-
tQnguloy el otro par define la esquina diagonalmente opuesta, siendo "0,O" la esquina
superior izquierda de la imagen. Observe que un rectingulo es s610 una forma abrevia-
da de especificar un poligono con cuatro vertices.
Por ejemplo, el siguiente fragment0 define una regi6n simple sensible a1 rat6n e n el cua-
drante inferior derecho de una imagen d e 100 x 100 y otra regi6n circular e n medio.

Es decir, a menos que se active un manejador de evento de JavaScript que escribe el contenido en la barra de
estado. Wase el manejador de evento onMouse en 7.5.4.6.
7.5 Inufgenes sensibles a1 ratdn 215

m a p name="mapaOl">
<area shape=rectangle coords="75,75,99,99">
<area shape=circle coords= "50,50,25">
</map>
Si las coordenadas e n una etiqueta <area> se sobreponen con otra regibn, la primera etique-
ta <area> tendrl la precedencia. Los navegadores ignoran las coordenadas que se extienden
mls all5 de 10s limites d e la imagen.

7 5 4 . 3 Atributo href

Como el atributo h r e f d e la etiqueta de liga (<a>), el atributo h r e f de la etiqueta <area> define

el URL d e la liga deseada si hace clic e n su regi6n en el mapa de imigenes asociado. El valor
del atributo h r e f es cualquier URL vllido, relativo o absoluto, incluyendo c6digo d e JavaScript.
Por ejemplo, el navegador carga y despliega el documento lzga04.html si el usuario hace
clic e n el cuadrante inferior izquierdo d e una imagen d e 100 x 100 pixeles, como se define
e n la primera etiqueta <area> del mapa d e imlgenes del siguiente ejemplo:
m a p name= "mapa">
<area coords= "75,75,99,99" href="l iga04.htmlM>
<area coords="0.0,25,25" href="javascript:window.alert ('ioooh, rosquil las! I)"
</map>
La segunda etiqueta <area> del ejemplo utiliza un URL para JavaScript: cuando el usuario
hace clic e n el cuadrante superior izquierdo del mapa d e imlgenes, se ejecuta un metodo de
alerta d e JavaScript que muestra el mensaje d e las rosquillas e n un cuadro d e dillogo.

7 5 4 . 4 Atributo nohref
El atributo n o h r e f d e la etiqueta <area> le permite definir una regi6n sensible a1 rat6n e n un
mapa d e imlgenes del lado cliente para la cual no debe realizarse acci6n alguna aun
cuando el usuario puede seleccionarla. Debe incluir un atributo h r e f o n o h r e f por cada
etiqueta <area>.

7 5 4 . 5 Atributos notab y taborder

Soportados s610 por Internet Explorer, 10s atributos notab y t a b o r d e r controlan c6mo
estarln integradas las lreas e n 10s mapas de imlgenes del lado cliente e n la secuencia de
tabulaci6n del documento.
El navegador salta a la siguiente Area notab conforme el usuario oprime la tecla de tabulaci6n
para mover el cursor a lo largo del documento. De otro modo, esta lrea s e d parte de la
secuencia d e tabulaci6n.
TambiCn en Internet Explorer, las lreas de un mapa d e imlgenes se insertan e n la secuencia
d e tabulaci6n e n el orden en que se encuentran en el documento, junto con otros elementos
sensibles a1 tabulador, como 10s campos de las formas. Utilice el atributo t a b o r d e r para
21 6 Capftulo 7 Ligas y Webs

cambiar el orden de tabulaci6n predeterminado. El valor del atributo es un nlimero entero

que indica la posicion de esa Area en la secuencia de tabulaci6n d e todo el documento.

7.5.4.6 Atrlbutos onMouseOver y onMouseOut

Dos de 10s mismos manejadores de evento de JavaScript relacionados con el rat6n que func~onan
con la etiqueta d e liga (<a>) tambiCn trabajan con ligas de mapa de imigenes del lado cliente:
onMouseOver para cuando el usuario mueve el puntero del rat6n sobre la regi6n definida por
la etiqueta <area> del mapa, y onMouseOut cuando el usuario lo mueve fuera d e esa Area. El
valor del manejador de evento es (encerrado entre comillas) una o varias expresiones, mCtodos
y referencias d e funciones d eJavaScript separadas por signos d e puntoy coma, que el navegador
ejecuta cuando ocurre el evento. [manejadorde evento <a>, 7.3.1.41
Por ejemplo, una popular aunque simple aplicaci6n del evento onMouseOver es el desplega-
d o d e una explicaci6n mis descriptiva e n la barra d e estado del navegador e n cualquier
momento que el usuario pasa el puntero del rat6n sobre una regi6n del mapa de imigenes:
<area href=http://www.ora.com/kumquats/cocina/recipientes. html #quat5Io
OnMouseOver="self.status=" Un recipiente para sopa de kumquat.';return true1'>
Junto con una liga basada en texto, nos parece que el contenido de la etiqueta misma
deberia explicar la liga. Pero las imAgenes pueden tal vez decepcionar, asi que lo alentamos
a que utilice 10s manejadores d e evento para proporcionar descripciones de texto con sus
mapas d e imigenes.
El evento relacionado con el rat6n, onCl ick, no esti incluido como uno d e 10s eventos
relacionados con ligas hechas con la etiqueta <area> pero se puede simular: simplemente
emplee un URL para JavaScript como el valor href de la etiqueta. Este enfoque es particular-
mente litil para dirigir a 10s usuarios lejos de las ireas predeterminadas d e un mapa de imigenes
y hacia aquellas con ligas reales. Vea el mapa de imagen del lado del cliente en la secci6n 7.5.5.

7.5.4.7 Atributo shape

De acuerdo con el estindar d e HTML, utilice este atributo para definir la forma de una
regi6n sensible al raton en un mapa d e imigenes: un circulo (ci r c o c i r c l e ) , un poligono
(pol y o polygon), o un rectingulo (rect o rectangle).
El valor del atributo shape afecta la manera en que el navegador interpreta el valor del atributo
coords. Si no incluye un atributo shape, se utiliza el valor default de mod0 predeterminado.
De acuerdo con el estindar, "default" o "predeterminado" significa que el Area cubre toda la
imagen. En la practica, 10s navegadores predeterminan un area rectangular y esperan encon-
trar cuatro valores de coordenadas (coords). Y si no se especifica una forma ("shape") y no
incluye cuatro coordenadas en la etiqueta, el navegador ignora el irea por completo.
De hecho, Navigator es el linico navegador que reconoce el valor default de shape que
proporciona un irea d e captura total para 10s clics que caigan fuera d e todos 10s demis
ountos clave definidos. Puesto aue las ireas se encuentran e n un orden d e tioo "el orimero
que llega, primero se sirve" en la etiqueta <map>, debe colocar el Area predeterminada
("default") a1 final. De otra manera, cubriri cualquier cosa y todas las ireas que siguen e n
su mapa de imigenes.

7.5.4.8 Atributo target

El atributo target proporciona una manera de controlar dbnde mostrar el contenido de la
liga seleccionada e n el mapa de imageries. Comlinmente empleado junto con marcos o
mliltiples ventanas del navegador, el valor de este atributo es el nombre del marco o venta-
na donde debe cargarse el documento a1 que se hace referencia. Si existe el marco o
ventana nombrados, el documento se carga ahi. Si no, se crea una nueva ventana con el
nombre especificado y el documento se carga e n ella. Para mayor informacibn, incluyendo
una lista de nombres especiales de destino, consulte la seccibn 12.7.

7.5.4.9 Atributo title

El atributo tit 1 e le permite especificar un titulo para el documento con el cual se liga el
area del mapa de imigenes. Su valor es cualquier cadena de caracteres, encerrada entre
comillas. El navegador tambiCn podria utilizar el atributo title cuando se agregue esta liga
a la lista de sitios favoritos del usuario.
El atributo title es especialmente litil para hacer referencia a un recurso que de otro mod0
estaria sin nombre, digamos una imagen o un documento no hecho con HTML. De manera
ideal, el valor especificado debe coincidir con el titulo del documento a1 que se hace
referencia, pero esto no es una regla.

75.5 Un ejemplo de mapa de imdgenes del lado cliente

El siguiente fragment0 de ejemplo reline 10s diversos componentes de un mapa de imige-
nes del lado cliente que hemos explicado e n esta seccibn. Incluye la etiqueta 4 m g > con la
referencia de imagen y el atributo usemap con un atributo name que apunta a una etiqueta
<map> que define cuatro regiones sensibles a1 ratbn (tres, mis una predeterminada) y ligas
relacionadas:

. ..
<map name="mapaOl">
<area shape=rect coords= "0,20,40,100"
href=" jugo-k. html "
onMouseOver="self.status=lCbmo preparar jug0 de kumquat.'
;return true">
<area shape= rect coords="50,50,80,100"
href="sopa-k. html "
onMo~seOver="self.status=~~Un recipiente para una deliciosa sopa de kumquat.'
;return true">
<area shape= rect coords="90,50,140,100"
218 Capftulo Z L i p a s y Webs

, href=I8fruta k.html "

on~ouse0ver~"sel f .status='~uidadoy manejo del kumquat. '
;return true">
<area shape= default
href="javascript:window.alert('El i ja entre el vaso o uno de 10s tazones. ' ) "
onMouseOver="sel f .status='Sel ecci one el vaso o un taz6n para obtener mas
informaci6n. '
;return true1'>
</map>
La figura 7-7 muestra el resultado.

1
Figura 7-7.Mapa de tmagm del lado cliente con un evento deJavaScrfpt activo

75.6 Manejo de otros navegadores

A diferencia d e su contraparte i smap del lado servidor, la etiqueta para mapas d e imagen del
lado cliente ( 4 m g usemap>) no necesita estar incluida e n una etiqueta <a>, pero puede
estarlo, d e mod0 que usted pueda manejar con habilidad navegadores incapaces d e proce-
sar mapas d e imggenes del lado cliente.
Por ejemplo, Mosaic o versiones antiguas d e Navigator s61o cargan un documento llamado
principal.htm1 si el usuario hace clic e n la imagen mapa.gifa la que s e hace referencia e n
el siguiente fragment0 d e c6digo. Los navegadores que no tienen esa restricci6q por su
parte, dividen la imagen e n regiones sensibles a1 ratbn, como se define en la etiqueta <map>
asociada, y las ligas a un ancla d e nombre especifico dentro del mismo documento
principal.htm1 si el usuario selecciona esa regi6n del mapa d e imageries:
Z 5 Imdgenes sensibles al ratdn 219

Para hacer un mapa de imagen completamente compatible con todos 10s navegadores capa-
ces de manejar mapas de imAgenes, incluyendo versiones antiguas, tambiCn puede incluir
procesamiento del lado cliente y del lado servidor para el mismo mapa de im5genes. Los
navegadores capaces aceptarAn el proceso m%srApido del lado cliente; 10s dem%signorar5n
el atributo usernap de la etiqueta <irng> y confiarb en el proceso del servidor a1 que se hace
referencia para manejar las selecciones del usuario de manera tradicional. Por ejemplo:

...
<map name="map2">
<area coords="0,0.49,49" href="ligal.html">
<area coords="50,0,99,49" href="l iga2. html ">
<area coords="0,50,49,99" href="liga3.html">
<area coords="50.50,99,99" href="liga4.html">
</map>

7.5.7 Uso eficiente de imdgenes sensibles a1 ratdn

Algunas d e las pAginas visualmente m%s irresistibles que hayamos observado e n el Web
tienen imggenes sensibles a1 rat6n: mapas con regiones donde a1 hacer clic, por ejemplo,
conducen a m%sinformaci6n acerca de un pais o pueblo, o dan como resultado m%sdetalles
acerca de la ubicaci6n y c6mo hacer contact0 con la filial de alghn negocio. Incluso hemos
llegado a ver una imagen sensible a1 rat6n de un diseiiador cuyas distintas prendas condu-
cen a1 ndmero de catalogo respectivo, complementadas con descripciones detalladas y una
etiqueta con el precio para ordenarlas.
La naturaleza visual de las im5genes sensibles a1 rat6n, aunada a la necesidad de una interfaz
efectiva, significa que usted debe considerar seriamente la posibilidad de contar con un artista,
un diseiiador de interfaces de usuario, incluso un experto en factores humanos para que
evalde sus imAgenes sensibles a1 rat6n. Por lo menos, comprometa a algunos usuarios para
probarlas y asegurarse de que la gente sabe d6nde hacer clic para ir a1 documento deseado.
Cerci6rese de que las %reascapaces de responder a1 clic del rat6n de la imagen indiquen esto
a1 usuario mediante un mecanismo visual consistente. Evalde utilizar bordes, sombras exte-
riores o cambios de color para indicar las Areas e n las que el usuario puede hacer clic.
Finalmente, recuerde siempre que la decisi6n de emplear im5genes sensibles a1 rat6n es
una decisi6n explicita para excluir navegadores basados e n texto y con restricci6n a las
imageries de sus pAginas. Esto incluye a 10s muchos millones de navegadores enlazados a
Internet con conexiones de m6dem lentas. Para esta gente, bajar sus hermosas im5genes es
simplemente mucho gasto. Para mantener emancipada a una poblaci6n creciente, asegdrese
que cualquier pAgina que cuente con una imagen sensible al rat6n tenga un equivalente de
s61o texto f%cilde acceder desde una liga en la versi6n habilitada para im5genes. Algunos
webmasters incluso proporcionan p5ginas separadas para usuarios que prefieren im5genes
completas e n lugar de texto predominante.
220 CaDftub %- Lizas v Webs

7.6 Cdrno crear documentos rastreables

Otra forma de liga de HTML complementaria que no utiliza la etiqueta <a> hace que el
servidor busque en una base de datos un documento que contenga una palabra o palabras
clave especificadas por el usuario. Un documento de HTML que contiene una liga de esta
clase se conoce como documento rastreable.

7.61 Etiqueta <isindex>

Para un documento rastreable indicado por la etiqueta <i s i ndex>, el navegador proporcio-
na a1 usuario un medio para que introduzca uno o mls tkrminos de bdsqueda (palabras
clave) y 10s pase junto con un URL desde un motor de blisqueda hacia el servidor. ~ s t e
compara las palabras clave contra una base de datos de tkrminos y selecciona el documento
que se debe mostrar.

<isindex >
Funcion:
Seiiala un documento rastreable
A tributos:
ACTION 0
PROMPT
Etiqueta de fin:
Ninguna
Contenido:
Ninguno
Usada en:
Contenido de encabezado

Cuando un navegador encuentra la etiqueta <i s i ndex>, agrega una interfaz de blisqueda
estlndar para el documento (presentada por medio de Navigator en la figura 7-8).
<html>
<head>
< t i t l e > B a s e de datos de consejos sobre kumquats < / t i t l e >
<base h r e f = "cgi -bin/consul t a - f r u t o 1 I >
<i s i ndex>
</head>
<body>
<h3>Base de datos de consejos sobre kumquats </h3>
<P>
Busque consejos que l e ensefiardn mucho sobre 10s kumquats.
</body>
</html>
7.6 Cdmo cmar documentos rastreables 221

. -. .- ----

his is a searchable index Enter search keywords: [killer qua ts(

- -~ ..

I Bare & d a b de sobre kumquats

Flgura 7-8. Un documento rastreabk.

El usuario teclea palabms clave separadas por espacios dentro del campo proporcionado para
este fin. Cuando el usuario oprime la tecla INTRO, el navegador agrega de forma automfitica
la lista a buscar a1 final de un URL y pasa la informaci6n a1 servidor para su procesamiento.
Aunque el estindar de HTML s61o perrnite que se coloque la etiqueta c i s i n d e x > en el
encabezado del documento, la mayorfa d e 10s navegadores perrnite que aparezca en cual-
quier sitio e insertan el campo d e biisqueda e n el flujo del contenido donde aparece la
etiqueta <i si ndex>. Esta iitil extensi6n le permite agregar instrucciones y otros elementos
antes de enfrentar al usuario con el campo de b6squeda real.

7 6 . 1 . Atributo prompt
El navegador proporciona un indicador principal arriba o a la izquierda del campo para que el
usuario teclee texto. El indicador predeterminado de Navigator es, por ejemplo, " ~ s t ese un
indice rastreable. Introduzca palabras clave de biisqueda:" (figura 7-8). Este indicador prede-
terminado no es el mejor en todos 10s casos, pero puede cambiarlo con el atributo prompt.
Cuando se agrega a la etiqueta <i s i ndex>, el valor del atributo prompt es la cadena de texto
que precede al campo para introducir las palabras clave que el navegador coloca en el
documento.
Por ejemplo, compare la figura 7-8 con la 7-9, donde agregamos el siguiente indicador
(prompt) al anterior c6digo de ejemplo:
cisindex prompt= "Para buscar consejo sobre 10s kumquats, teclee palabras
cl ave: ">
Los navegadores miis antiguos hacen caso omiso del atributo prompt, lo cual no e s raz6n
para no incluir un mejor texto que sirva d e indicador para 10s lectores mfis actualizados.

761.2 El URL de bu'squedu

Ademas d e la etiqueta <isindex> e n el encabezado de un documento rastreable, el otro

elemento importante d e esta etiqueta especial d e HTML es el URL d e brjsqueda. De manera
222 Capfhrkb i?Lfgasy Webs

----- - . . -- - - ---

Para buscar consejos sobre 10s kumquats, introduzca palabras claw [car idosos qua ts

Ftgura 7-9. El atrfbuto prompt crea tndkadores de entrada personalirados en documentos

rastreables.

predeterminada, es el URL del documento fuente (lo que no es bueno si su documento no

puede manejar la consults). En su lugar, la mayoria de 10s programadores emplean el
atributo <base> para apuntar a un diferente URL para la blisqueda. [*base*, 7.7.11
El navegador agrega un signo d e interrogaci6n a1 URL d e blisqueda, seguido d e 10s parime-
tros de blisqueda especificados. Los caracteres no imprimibles se codifican de manera
apropiada; 10s diferentes parimetros quedan separados por un signo de suma (+).
En el ejemplo anterior, si un usuario teclea "control d e plagas" e n el campo d e blisqueda, el
navegador podria recobrar el URL:
cgi -bin/consul ta-fruto?control+de+pl agas

Z 6.1.3 Atributo action

Solo e n Internet Explorer usted puede especificar el URL d e blisqueda para el indice con el
atributo a c t i o n . El efecto es el mismo que si hubiera empleado el atributo h r e f con la
etiqueta <base>: el navegador se enlaza a1 UKL especificado con 10s parimetros de b h q u e -
da que se le aiiadieron.
Aunque el atributo a c t i o n ofrece la deseable caracteristica de separar el URL base del
documento del URL del indice de bdsqueda, provoca que las blisquedas fracasen si el
usuario no utiliza Internet Explorer. Por esta raz6n, no recomendamos usar el atributo a c t i o n
a fin d e especificar el URL d e (donde s e h a d ) la bfisqueda.

Z 6. 1.4 Dependencias del servidor

Como con 10s mapas d e inxigenes, 10s documentos rastreables requieren que el servidor 10s
soporte para que las cosas funcionen. La manera como interpreta el servidor el URL de
b6squeda y sus parimetros no esti definida por el estindar de HTML.
Debe consultar la documentaci6n d e su servidor a fin d e determinar c6mo puede recibir y
utilizar 10s parametros d e bfisqueda para localizar el documento deseado. Por lo regular, el
servidor divide 10s parimetros del URL de bQsqueda y 10s pasa a un programa indicado por
el URL.
7.7 Cdmo establecet- rehciones entre documentos 223

7.7 Co'mo establecer relaciones entre documentos

Muy pocos documentos de HTML permanecen independientes. En realidad, un documento
es, generalmente, parte d e una colecci6n de documentos, cada uno interconectado median-
te las ligas d e hipertexto que describimos e n este capitulo. Un documento puede ser parte
de diversas colecciones, ligandose a algunos documentos y-a su vez siendo vinculado por
otros. Los lectores se mueven entre familias de documentos conforme siguen las ligas que
les interesan.
Usted establece una relaci6n explicita entre dos documentos cuando 10s liga. Los programa-
dores conscientes usan el atributo re1 de la etiqueta <a>para indicar la naturaleza d e la liga.
Ademas, puede utilizar otras dos etiquetas dentro de un documento para hacer mas clara la
ubicaci6n y relaci6n d e un documento dentro de una familia d e documentos. Estas etique-
tas, <base> y < l ink>, se colocan dentro de la etiqueta <head>.[*head>, 3.6.11

7 7 1 El elemento de encabezado <base>

Como ya explicamos, 10s URL dentro d e un documento pueden ser absolutos (con cada
elemento del URL proporcionado e n forma explicita por el programador) o relativos (con
ciertos elementos de URL omitidos y proporcionados por el navegador). Por lo comdn, el
navegador llena 10s espacios e n blanco de un URL relativo con elementos del URL del
documento actual. Puede cambiar esto con la etiqueta <base>.

<base>
Funcion:
Define el URL base para otras ligas en el documento
A tributos:
HREF
TARGET 0
Etiqueta de fin:
Ninguna
Contiene:
Nada
Usada en:
Contenido de encabezado

La etiqueta <base>debe aparecer s61o en el encabezado del documento, no e n el cuerpo. El

navegador utiliza de aqui en adelante el URL base especificado, no el URL del documento actual,
para resolver todos 10s URL relativos, incluyendo 10s que se encuentran dentro de las etiquetas
224 Cap- Z Ligas y Webs

<a>, <irng>, <link> y <form>. Tambien define el URL que se utiliza15 para resolver solicitudes
de bdsqueda e n documentos rastreables que contengan la etiqueta <i s i ndex>. [URL, 7.21

El atributo href debe tener un URL valid0 como su valor, el cual emplea el navegador para
definir el URL absoluto contra el que s e basan 10s URL relativos dentro del documento. Por
ejemplo, la etiqueta <base> e n este encabezado d e documento,
<html>
<head>
<base href="http://www. kumquat .corn/">
</head>

le dice a1 navegador que cualquiera d e 10s URL relativos dentro d e este documento son
relativos con respecto a1 directorio d e nivel superior del documento e n www.kumquat.com,
sin importar la direcci6n y el directorio d e la miquina desde la que el usuario obtuvo el
documento actual.
Contrariamente a lo que podria esperarse, puede hacer el URL base relativo, no absoluto. El
navegador compone e n realidad un URL base absoluto fuera d e este URL relativo llenando
las partes faltantes con el URL del documento mismo. Puede emplear esta propiedad para
tener una buena ventaja. Por ejemplo, e n el siguiente ejemplo,

el navegador convertira el URL indicado por el atributo <base> e n uno relativo a1 directorio
/info/ del servidor, que probablemente no sea el mismo directorio del documento actual.
Imaginese si tuviera que redireccionar cada liga e n su documento con ese directorio comdn.
La etiqueta <base> n o s610 le ayuda a abreviar 10s URL e n su documento que tienen una raiz
comdn, tambiCn le permite limitar el directorio desde el que se obtienen las referencias
relativas sin atar el documento a un servidor especifico.

Z Z 1.2 Atributo target

Cuando se trabaja con documentos dentro d e marcos, el atributo target d e la etiqueta <a>
asegura que un URL referenciado se cargari e n el marco correcto. De manera similar, el
atributo target d e la etiqueta <base> le permite establecer el nombre predeterminado de
uno de 10s marcos o ventanas donde el navegador va a mostrar documentos ligados y
redirigidos. [marcos,12.11
Si no tiene otro destino predeterminado para las ligas dentro d e sus marcos, tal vez quiera
considerar esta instrucci6n: <base target=-top>, que asegura que las ligas que n o estCn
especificamente dirigidas a un marco o ventana se carguen por medio d e esta instrucci6n e n
la ventana d e nivel superior del navegador. Esto elimina el embarazoso y comdn error de
tener referencias a p4ginas e n otros sitios que aparecen dentro d e un marco e n sus piiginas,
e n lugar d e aparecer dentro d e sus propias piiginas. Si, es un poco m4s d e c6digo d e HTML,
per0 hace la vida m4s f4cil para sus lectores.

7.7.1.3 Uso de e a s e >

La raz6n m i s importante para usar <base> es asegurar que cualquier URL relativo dentro del
documento se resolver4 e n una direcci6n d e documento correcta, aun si el documento se
mueve o renombra. Esto es particularmente importante cuando crea una colecci6n de docu-
mentos. A1 colocar la etiqueta <base> correcta e n cada documento, puede mover toda la
colecci6n entre directories e incluso entre servidores sin eliminar ninguna de las ligas dentro
d e 10s documentos.
TambiCn debe emplear la etiqueta <base> para un documento rastreable (4 s i ndex>) si
desea enviar solicitudes de bdsqueda del usuario hacia un URL diferente a1 documento
anfitri6n.
Observe que un documento que contenga la etiqueta <isindex> y otros URL relativos
puede tener problemas si 10s URL relativos n o son relativos a1 URL de procesamiento de
indice deseado. Puesto que generalmente asi ocurre, no utilice URL relativos e n documentos
rastreables que utilicen la etiqueta <base> para especificar el URL de bdsqueda para el
documento.

7 7 2 El elemento de encabezado <link>

Utilice la etiqueta <1 i n k > para definir la relaci6n entre el documento actual y a l a n otro e n
una colecci6n.
Las etiquetas <1 i n k > pertenecen a1 contenido de <head>, a ninguna otra parte. Los atributos
d e la etiqueta <1 i n k > se utilizan como 10s d e la etiqueta <a>, per0 sus efectos s610 sirven
para documentar las relaciones entre documentos. La etiqueta <1 i n k> no tiene contenido ni
etiqueta d e fin (</Iin k>).

7.7.2.1 Atributo href

Como con sus otras aplicaciones de etiqueta, el atributo h r e f especifica el URL d e la etiqueta
<1 in k> destino. TambiCn es un atributo necesario, y su valor es cualquier URL d e documen-
to vilido. Se supone que el documento especificado tiene alguna relaci6n con el documento
actual.
7.7.2.2 Atributos rely rev
Los atributos r e 1 y r e v expresan la relaci6n entre 10s documentos fuente y destino. El atributo
r e 1 especifica la relaci6n del documento fuente con el documento destino; el atributo r e v
especifica la relaci6n inversa. Ambos atributos pueden incluirse en una etiqueta <1 ink> simple.
226 Capftulo 7:Ligas y Webs

<link>
Funcion:
Define una relaci6n entre este documento y otro
A tributos:
HREF
REL
REV
TITLE
TYPE 0
Etiqueta de fin:
Ninguna
Contiene:
Nada
Usada en:
Contenido de encabezado

El valor de cualquier atributo es una lista de relaciones separada por espacios. Los nombres
reales de las relaciones n o las especifica el estindar de HTML, aunque algunos han llegado
a ser de uso comdn, como 10s que se listan en el apartado 7.3.1.5. Por ejemplo, un docu-
mento que sea parte de una serie de documentos podria usar

cuando se hace referencia a1 siguiente documento de la serie. La relaci6n desde el docu-

mento fuente hacia el documento destino es la de moverse a1 siguiente documento; la
relaci6n inversa es moverse a1 documento previo.

7.7.2.3 Atributo title

El atributo t i t 1e le permite especificar el titulo del documento a1 cual se esti ligando. Este
atributo es dtil cuando hace referencia a un recurso que no tiene un titulo, digamos una
imagen o un documento que no sea de HTML. En este caso, el navegador puede usar el
titulo de la etiqueta <1 i n k > cuando exhibe el documento. Por ejemplo,
<l ink href="pics/kumquat.gi f"
ti tle="Fotografia d e la noble frutaW>
dice a1 navegador que utilice el titulo (indicado por el atributo t i t l e ) cuando muestre la
imagen a la que se hace referencia.
El valor del atributo t i t 1e es una cadena de caracteres arbitraria, encerrada entre comillas.
7.8 Soporte de automatizacfdnde documentos 227

Z 7.2.4 Atributo type

El atributo type proporciona el tip0 de contenido de MIME del documento ligado. Soportado
tanto por Internet Explorer como por Navigator, puede utilizar el atributo type con cualquier
documento ligado. Se emplea con frecuencia para definir el tip0 de las hojas de estilo vincu-
ladas. En este contexto, el valor del atributo type es generalmente text/css. Por ejemplo,
<link href="styles/cl assi c.cssN re1 =stylesheet type="text/cssM>
crea una liga hacia una hoja de estilo externa dentro de la etiqueta <head> de un documen-
to. El capitulo 9 le brinda mayor informacion.

7.7.2.5 Cdmo usan <Link>Cos navegadores

Aunque el estPndar HTML no indica que 10s navegadores hagan algo con la informaci6n
proporcionada por la etiqueta <l ink>, n o es dificil prever c6mo se puede utilizar para
mejorar la presentaci6n de un documento.
Como un ejemplo sencillo, supongamos que usted pone etiquetas <1 ink> de manera consis-
tente para cada uno de sus documentos que definen ligas next, prev y parent. Un navegador
podria emplear esta informaci6n para colocar una barra de herramientas estindar, e n la
parte superior o inferior de cada documento con botones que podrian llevarlo a1 documento
correcto. A1 delegar la tarea de proporcionar ligas d e navegaci6n simples a1 navegador,
usted puede concentrarse e n el contenido d e su documento.
Como un ejemplo mPs complejo, imaginemos que un navegador espera encontrar una
etiqueta <1 ink> que defina un glosario para el documento actual, y que este documento de
glosario sea un documento rastreable. Cuando un lector haga clic en una palabra o frase en
el documento, el navegador podria buscar automPticamente e n el glosario la definici6n de
la frase seleccionada, presentando el resultado en una pequeiia ventana.
A medida que evolucionen el Web y HTML, espere ver mPs y mis usos de la etiqueta <1 i nk>
para definir explicitamente las relaciones de 10s documentos e n el Web.

7.8 Soporte de automatizacidn de documentos

Existen dos etiquetas adicionales de encabezado cuya funci6n principal es soportar la
automatizaci6n de documentos, interactuando con el servidor web y con herramientas para
generar documentos.

78.1 El elemento de encabezado <meta>

Dado el rico conjunto de etiquetas de encabezado de HTML para definir un documento y
sus relaciones con otros que n o utiliza la mayoria de quienes crean pPginas con HTML,
podria pensar que estamos satisfechos.
228 CapiruLo E Ligas y Webs

<meta>
Funcidn:
Proporciona informaci6n adicional acerca de un documento
Atributos:
CHARSET 0
CONTENT
Hrn-EQUIV
NAME
Etiqueta de fin:
Ninguna
Contiene:
Nada
Usada en:
Contenido de encabezado

Pero no. Siempre hay alguien con necesidades especiales. Ellos quieren dar adn mas infor-
maci6n acerca de sus atractivos documentos, informaci6n que pueden utilizar 10s navegadores,
lectores del c6digo fuente o herramientas que indizan documentos. La etiqueta <meta> es
para quienes sienten la necesidad de ir m5s all5 de 10s limites.
La etiqueta <rneta> pertenece a1 encabezado del documento y no tiene contenido. En reali-
dad, 10s atributos de la etiqueta definen pares nombre/valor que se asocian al documento.
En ciertos casos, el servidor utiliza estos valores que sirven a1 documento para definir a1
navegador el tip0 de contenido.

7.81.1 Atributo name

El atributo name proporciona el nombre del par nombre/valor definido por la etiqueta <me-
ta>. El est5ndar de HTML no establece ningdn nombre predefinido para <meta>. En general,
puede emplear cualquier nombre que tenga sentido para usted y para 10s lectores del
c6digo fuente del documento de HTML.
Un nombre comdn es keywords, que define un conjunto de palabras clave para el documen-
to. Cuando alguno de 10s motores de bdsqueda mAs populares localiza estas palabras clave
en el cuerpo del documento, se utilizan para categorizarlo. Si desea que sus documentos se
indicen en un motor de bdsqueda, considere poner esta etiqueta en el encabezado (<head>)
de cada documento:
-eta narne="keywordsU content="kurnquats, cocinar, p e l a r , comeru>

Si no proporciona el atributo name, el nombre del par nombre/valor se toma del atributo
http-equi v.
Z 8.1.2 Atributo content
El atributo content proporciona el valor del par nombdvalor. Puede ser cualquier cadena
d e caracteres viilida, encerrada entre comillas, si es necesario. Siempre debe especificarse
junto con un atributo name o http-equiv.
Como e n el ejemplo, usted puede agregar el nombre del autor e n un documento con:
<met< name="AutbresM content="Chuck Musci ano y Bi 11 KennedyM>

Z8.1.3 Atributo http-equiv

El atributo http-equi v proporciona un nombre para el par nombre/valor y da instrucciones
a1 servidor para que lo incluya e n el encabezado MIME del documento que s e pasa a1
navegador antes d e enviar el documento real.
Cuando un servidor envia un documento a un navegador, primer0 manda cierto nGmero d e
pares nombre/valor. Aunque algunos servidores pueden enviar varios pares, todos mandan
a1 menos uno:
content-type: textlhtml

Esto le dice a1 navegador q u e va a recibir un documento d e HTML.

Cuando usted utiliza la etiqueta <meta> con el atributo http-equi v, el servidor agrega pares
nombre/valor a1 contenido del encabezado y 10s envia a1 navegador. Por ejemplo, a1 agregar:
sneta h t t p - e q u i v = " c h a r s e t " content="iso-8859-I">
%eta h t t p - e q u i v = " e x p i r e s " content="31 Dec 99">

hace que el encabezado que s e envia a1 navegador contenga:

content type: t e x t l h t m l
charset: iso-8859-1
e x p i r e s : 3 1 Dec 99

Por supuesto, agregar estos campos adicionales en el encabezado funciona s610 si su navegador
10s acepta y 10s utiliza d e manera apropiada.

7.8.1.4 Atributo charset

Internet Explorer proporciona soporte explicito para el atributo charset d e la etiqueta
<meta>. Establece el valor del atributo en el nombre del conjunto de caracteres que se
emplead para el documento. 6sta no es la manera miis adecuada de definir el conjunto d e
caracteres d e un documento. En realidad, nosotros recomendamos siempre emplear 10s
atributos ht t p-equ iv y cont e n t para definir el conjunto d e caracteres.
230 : Ligas y Webs
Capfrulo 7

Z 8.2 El elemento de encabezado <nextid>

Esta etiqueta no esti definida en el estindar HTML 3.2 y no deberia utilizarse. La describi-
mos aqui por razones hist6ricas.
-

<nextid>
Funcion:
Define el siguiente identificador de entidad de documento vilido
Atributos:
n
Etiqueta de fin:
Ninguna
Contiene:
Nada
Usada en:
Contenido de encabezado

La idea detris de la etiqueta <nextid> es proporcionar alguna forma de indizar de mod0

automitico identificadores de fragmentos.

El atributo n especifica el nombre del siguiente identificador de fragmento generado. Aun-

que el estandar de HTML no define el formato para este nombre, se compone de una
cadena de caracteres alfabCticos seguida de un nlimero de dos digitos. Una etiqueta <next i d>
comdn tiene un aspect0 similar a este:

Asi, un generador automiitico de documentos podria emplear la informaci6n de n e x t i d para

nombrar sucesivamente identificadores de fragmento DOC54, DOC55 y asi sucesivamente
dentro del documento actual.
 En este capilulo:
1
' 1

rtas aniaarlas
rtas de dfrect&
rtas rls memi
ttas ric definjcidn
. . . Listas conformato

Hacer mas accesible la informaci6n es la cualidad rn9s irnportante de HTML. La excelente

colecci6n d e estilos d e texto y herramientas d e formato que brinda este lenguaje le ayudan
a organizar la informci6n e n documentos que 10s lectores podr5n comprender, explorar y
guardar, quiz5 con agentes autornatizados.
Mas all5 d e ernbellecer su documento con etiquetas especiales, HTML tambiCn le ofrece un
rico conjunto de herrarnientas que le ayudan a organizar el contenido en listas con forrnato.
No hay nada rnagico o rnisterioso en las listas d e HTML. De hecho, su belleza radica en su
sencillez. Se basan en 10s tipos d e listas cornunes que encontrarnos todos 10s dias: una lista
d e lavanderia sin ordenar, listas ordenadas de instrucciones y listas de definiciones tip0
diccionario. Todas estas son f o r m s comunes y c6modas para organizar un documento.
Todas proporcionan medios poderosos para comprender, explorar y extraer informaci6n
pertinente de 10s docurnentos d e HTML.

8.1 Lfstas sin ordenar

Como una lista d e compras o para lavanderia, una lista sin ordenar en HTML es una colec-
ci6n d e elementos que carecen d e orden o secuencia especial. La lista n o ordenada mas
comrin que encontrar5 en el Web es una colecci6n d e ligas hacia otros documentos. Un
terna comrin, corno "Sitios relacionados con 10s amantes de 10s kumquats", une 10s elemen-
tos de una lista sin ordenar, per0 no tienen una relaci6n especifica entre ellos.

8.1.1 Etiqueta <ul>

La etiqueta <ul> indica a1 navegador que el siguiente contenido, hasta la etiqueta </ul>, es
una lista d e elementos sin orden. Cada elemento d e la lista se identifica por rnedio de la
232 CapCtulo & tistas con formato

etiqueta <l i>.

De otro modo, casi cualquier documento d e HTML incluye otras listas, texto
y elementos d e multimedia. [<I I*,8.31

Funcion:
Define una lista sin ordenar
A tributes:
CLASS 0
COMPACT
sTYL.E rn 0
TYPE
Etiqueta de fin:
</ul>; nunca se omite
Contiene:
Elementos de la lista
Usada en:
Bloques

Por lo regular, el navegador agrega una viiieta a1 principio de, y coloca cada elemento en una
linea nueva, sangriindolo desde el margen izquierdo del documento. Sin embargo, la presen-
taci6n real de las listas sin ordenar varia mucho entre 10s navegadores, de manera que no se
rompa la cabeza intentando colocar 10s elementos. Por poner un caso, algunos navegadores
manejan el inicio de una lista sin ordenar como un nuevo pirrafo y, a1 igual que la etiqueta
<p>, dejan una linea en blanco antes de la lista. Otros navegadores simplemente cornienzan
el elemento de la lista despuCs de un salto de linea. TambiCn depende de 10s navegadores el
espacio que habrii entre 10s elementos de la lista. Por ejemplo, las siguientes lineas de c a i g o :
Recetas populares de kumquats
<ul>
<li>Kumquats en escabeche
<l i>Sal sa de kumquats (para fiestas)
el i>Ensal ada de kumquats
</ul>
Hay para complacer a todos 10s paladares
aparece en Mosaic como ilustra la figura 8-1.
Quienes crean piiginas de HTML con trucos en ocasiones emplean listas sin ordenar anida-
das, con y sin elementos etiquetados con <1 i>,para aprovechar la indentaci6n sucesiva y
automatics. Se pueden producir algunos segmentos d e texto bastante atractivos de esta
manera. Pero no dependa de esto en todos 10s navegadores, incluyendo 10s futuros. Es mejor
611 Listas sin orcienrrr 233

-L
r File Edit Options Navigate Annotate
is Etlqueta cub I I E !

Ftgura 8-1.Una ltsta stn ordenar senctlla.

utilizar la propiedad border con una definici6n d e estilo en la etiqueta d e phrrafo (<p>) o en
la de divisi6n (<di v>) para indentar secciones del documento que no pertenecen a las Iistas
(consulte el capitulo 9).

8.1.1.1 Att-lbuto type

Los navegadores grtificos asignan de forma automatics una viiieta a cada elemento etiqueta-
d o con <1 i> e n una lista sin ordenar. Navigator de Netscape e Internet Explorer emplean un
circulo d i d o ; Mosaic un cuadrado hueco (en la Mac) o una esfera (en PC y UNIX). Los
navegadores que soportan HTML 3.2 permiten usar el atributo type para especificar el tip0
de viiieta que debe anteceder a 10s elementos d e la lista sin ordenar. Este atributo puede
tener el valor di sc, ci rcl e o square. Todos 10s elementos dentro de la lista emplearan, por
consiguiente, el tip0 de viiieta especificado, a menos que uno lo anule, como veremos mas
adelante.

8.1.1.2 Listas sin ordenar compactas

Si le agradan 10s espacios amplios y abiertos, odiara el auibuto compact, optional, de la

etiqueta <ul>. Este auibuto le indica a1 navegador que comprima la lista sin ordenar en un
bloque de texto pequeiio, compacto. Comfinmente, el navegador reduce el interlineado entre
10s elementos de la lista. TambiCn puede reducir la sangria si acaso existe (generalmente no).
Algunos navegadores ignoran el atributo compact, de mod0 que no dependa demasiado de
sus atributos a1 dar formato.

El atributo sty1 e de la etiqueta <ul> crea un estilo especifico para 10s elementos, anulando
asi el efecto de cualquier otra regla de estilo. El atributo class le permite dar formato al
contenido de acuerdo con una clase predefinida d e la etiqueta <ul>; su valor es el nombre
d e esa clase. [atributo style, 9.1.11 [atributo class, 9.2.41
234 Capi2ulo 8: Listas conformato

8.2 Listas ordenadas

Utilice una lista ordenada cuando la secuencia d e sus elementos sea importante. Una lista d e
instrucciones es un buen ejemplo, como lo son tambiCn 10s indices d e contenido y las listas
d e notas a1 pie d e pPgina o a1 final del documento.

8.2.1 Etiqueta <ol>

El navegador comtin da formato a1 contenido d e una lista ordenada justo como a1 d e una
lista sin ordenar, except0 que antecede 10s elementos con ntimeros, no con vifietas. La
numeraci6n comienza e n 1 y se incrementa e n uno a cada elemento, indicado sucesivamen-
[el i>,
te con la etiqueta <1 i>. 8.31

cob
Funcion:
Define una lista ordenada
Atributos:
CLASS 0
COMPACT
START
STYLE 0
TYPE
Etiqueta de fin:
</ol>; nunca se omite
Contiene:
Elementos de la lista
Usada en:
Bloques

HTML 3.2 tiene diversas caracteristicas que proporcionan una amplia variedad de listas
ordenadas. Puede cambiar el valor d e inicio d e la lista y elegir uno d e 10s cinco estilos d e
numeraci6n. Aqui presentamos una muestra d e una lista ordenada:
<h3> Kumquats en escabeche</h3>
Veamos una forma f a c i l de p r e p a r a r un d e l i c i o s o p l a t o de kumquats en escabeche:
<01>
4 i>Enjuague 5 k i l o s de kumquats f r e s c o s .
< l i > Consi ga 8 1 it r o s de v i nagre b l anco para h e r v i r.
< l i > Agregue 10s kumquats poco a poco, con e l v i n a g r e h i r v i e n d o .
< l i > H i e r v a p o r una h o r a o h a s t a que 10s kumquats e s t e n suaves.
< l i> Col6quel os en f rascos cerrados y 1uego d i s f r G t e l o s .
</ol>
8.2 Z f s t a s ordenadas 235

Navigator de Netscape la interpreta como ilustra la figura 8-2.

Rrchivo Ed~cion Uer I r Marcadores Opciones Directorio Uentana

zJ-E7.-
- =L=---------.
E--==-
-- -- - ---- - -- -- Netscape: Etiqueta <ol>

Ffgura 8-2.Lista ordenada.

8.2.2.2 Atributo start

Comdnmente, 10s navegadores numeran de forma automitica 10s elementos de una lista
ordenada comenzando con el ndmero 1. El atributo start de la etiqueta <ol> le permite
modificar ese valor inicial. Para comenzar la numeraci6n d e una lista e n 5, por ejemplo:
<ol start=5>
< l i > Este elemento es el 5.
el i>Este el 6.
el i > y asf progresivamente...
</01>

8.2.2.2 Atributo type

De mod0 predeterminado, 10s navegadores numeran 10s elementos de una lista ordenada
con una secuencia de ndmeros ariibigos. Ademis de que puede comenzar la secuencia con
alg6n otro ndmero que no sea 1, puede emplear el atributo type con la etiqueta <ol> para
cambiar el tip0 de numeraci6n. Con la etiqueta <ol>, el atributo type puede tener un valor
"A" para lograr una estructura con letras maydsculas, "a" para letras mindsculas, " I " para
ndmeros romanos e n maytisculas, "in para romanos e n mindsculas, o "1" para ndmeros
aribigos comunes (consulte la tabla 8-1).
Las extensiones de atributo start y type trabajan en conjunto. El atributo start establece el
valor de inicio del contador entero para el elemento a1 principio de una lista ordenada.
El atributo type determina el estilo de numeraci6n real. Por ejemplo, la siguiente lista
ordenada cornienza la numeraci6n de sus elementos en 8, pero debido a que el estilo de
236 Cnpihb 8: Listas conf m a t o

Tabla 8-1. Valoresposibles del atrlbuto type m H W L 3.2para numeracidn de Itstas ordenadas
Tipo dc valor I EstiIo pnerado I Wuenclri & muesb.
A Letras maykulas
a Letras rnindsculas
I I Ndrneros rornanos en rnaydsculas I I, 11, 111, IV
i Ndrneros romanos en mindsculas i, ii, iii, iv
1 Ndrneros arabigos 1,2,3, 4

numeraci6n se ha establecido en i, el primer elemento corresponde a1 ncimero romano "viii"

en m i n k u l a s . Los elementos que le siguen se numeran con el mismo estilo, incrementando
cada elemento e n uno, como se muestra e n este ejemplo:
<ol s t a r t = 8 type = "i">
<li> Este es e l nfimero ocho romano.
< l i > Los ndmeros se incrementan de uno en uno.
< l i > Y a s l sucesivamente.. .
</01>

El resultado se muestra en la figura 8-3.

-C
w Archiuo Edicion Uer Ir Marcadores Opclones Oirectorio Uentane
Netscaw: Rtrlbuto type para numerer ltstes ordenadas

MrMr hba Editaf mbprr hpnk Wl~r Pwar

viu. Eae es el n h r o who m m .

ix. La ninneros sa incmmntan de urn, en uno.
x. Y ad d m m n t e . . .

Ffgura 8-3.Los atrtbutos start y type habajan juntas.

1
El tip0 y valor d e 10s elementos en una lista pueden ser diferentes d e la lista considerada
como un todo, como explicamos en el apartado 3.1.

8.2.1.3 Listas ordenadas compactas

Igual que la lista sin ordenar, una lista ordenada tiene el atributo opcional compact. Cuando
se indica compactar la lista ordenada, el navegador puede reducir la sangria, disminuir el
espacio entre 10s ncimeros d e la secuencia y 10s elementos d e la lista, o ambas cosas.
Algunos navegadores no pueden compactar y, por lo tanto, no hacen nada.

82.1.4 Atrihtos s t y k y class

El atribuco sty1c de la etiqueta <ol> crea un estilo especifico para 10s elementos delimita-
dos por esa etiqueta, anulando de esta fomm cualquier otra regla de estilo. El atributo c l ass
permite dar formato a1 contenido d e acuerdo con una clase predefinida d e la etiqueta <ol>;
su valor es el nombre de esa clase. [atributo style, 9.1.11 [atributoclass, 9.2.41

8.3 La etiqueta <li>

Ahora debe serle obvio que la etiqueta <1 i > define un elemento d e una lista. Es la etiqueta
universal d e HTML para elementos d e listas ordenadas (<ol>) y sin ordenar (<ul>), como
hemos explicado, asi como para directorios (<di r>) y mends (<menu>), lo cual veremos con
detalle e n este capitulo.

Funcion:
Define cada elemento en una lista ordenada, sin ordenar, directorio o mend
A tributes:
CLASS 0
STYLE 0
TYPE
VALUE
Etiqueta de fin:
</l i>; generalmente s e omite
Contiene:
Flujo
Usada en:
Contenido ak lista

Debido a que el final de cada elemento d e una lista siempre puede inferirse por la estructura
del documento circundante, la mayona de 10s autores omite las etiquetas de fin </l i>, lo
cual tiene sentido, ya que s e hace mas fiicil agregar, eliminar y mover elementos e n el
interior d e una lista. Nosotros no recomendamos utilizar la etiqueta d e fin </l i >.
Aunque su significado es universal, hay algunas diferencias y restricciones e n el uso de la
etiqueta <l i > para cada tip0 d e lista de HTML. En las listas sin ordenar y ordenadas, lo que
sigue despues d e la etiqueta <l i > puede ser casi cualquier cosa, incluyendo otras listas y
mdltiples piirrafos. Por lo regular, si maneja indentaciones, el navegador sangra 10s elemen-
tos d e una lista anidada d e forma sucesiva, y el contenido d e esos elementos se justifica con
relaci6n a1 margen miis indentado.
Las listas de directorio y mends son otro asunto. Son listas de elementos breves, digamos
una palabra o texto sencillo, nada m9s. En consecuencia, 10s elementos <l i > colocados
dentro d e etiquetas <di r> y <menu> podrian n o contener otras listas o bloques, incluyendo
parrafos, bloques con formato o formas.
238 Caphtulo 8. ~ i s t a con
s fmmato

Los documentos limpios, totalmente compatibles con el estindar d e HTML, n o deberian

contener ningun texto u otro tipo d e documento dentro d e listas sin ordenar, ordenadas, de
directorio o d e menu que no esten d e m o d e una etiqueta <1 i >. La mayoria de 10s navegadores
son tolerantes con las violaciones a esta regla, pero entonces usted n o p o d d responsabilizar
a1 navegador por las quejas que se presenten por casos excepcionales.

8.3.1 Cdmo cambiar el estilo y secuencia de elementos

individuales de una lista
Del mismo mod0 que puede cambiar la viiieta o estilo d e nurneracion d e 10s elementos d e
una lista ordenada o sin ordenar, tambien puede modificar el estilo d e elementos individua-
les dentro d e esas listas. Con las listas ordenadas, tambien puede cambiar el valor del
numero del elemento. Como puede ver, las combinaciones de carnbio d e estilo y numera-
cion pueden llevar a una gran variedad d e utiles estructuras d e lista, en particular cuando se
incluyen e n listas anidadas.

8.3.1.1 Atributo type

Los valores aceptables para el atributo type de la etiqueta <1 i> son iguales g u e 10s valores
para el tip0 de lista apropiado: 10s elementos dentro d e listas sin ordenar pueden tener su
tip0 establecido e n circle, square o disc; 10s elementos d e una lista ordenada pueden
tener sus tipos establecidos e n cualquiera d e 10s valores mostrados e n la tabla 8-1. El carnbio
afecta a1 elemento actual y a cualquier elemento subsecuente.
No hay modo de regresar a1 tip0 predeterminado d e lista una vez que ha modificado el tip0 d e
un elemento simple; debe restablecer d e forma explicita el tipo para el siguiente elemento. Asi,
para hacer que un elemento d e una lista sea diferente del resto, debe modificar dos elementos:
el que quiera cambiar y el siguiente, a1 que debe asignar d e nuevo el formato general d e la lista.
La figura 8-4 muestra el efecto que tiene modificar el tip0 de un elemento individual e n una
lista ordenada sobre 10s elementos siguientes, como s e presenta e n Navigator a partir del
siguiente c6digo fuente:
do1 >
< l i type=A> Cambio del e s t i l o de numeracibn.
<l i type=a> No a1 t e r a el orden.
< l i > & I t ; - Lo ve, e s una "c".
< l i type=I> Niimeros romanos con maylsculas.
<l i type=i> Ahora con minlscul a s .
< l i type=l> Y ahora nlmeros o r d i n a r i o s .
</01>
 -
& Rrchiuo Edition Uer
--. I r Marcadores
.. ~ - Oociones
-.- .~- .Directorio
-- . - - Uentana
~- ~

Z-6
---;=--=-= - Netscape: Modificscibn en una lista ordenada

A. Cambio del estilo de numraci6n

b. No altma el orden.
C. <-- Low, esum'c".
IV. N b r o s mmanos con maybculas.
v. Ahora con rnineulprs.
6. Y ahora n h r o s ordinaries.

Ftgura 8-4. Cambio del estilo de numeraci6n para cada elemento de la lt3ta.

Observe que el atributo type modifica el estilo e n que aparece el nlimero, pero no su valor.

8.3.1.2 Atributo value

El atributo value le permite cambiar el ndmero de un elemento especifico de la lista y del

que le sigue. Puesto que la lista ordenada es la linica lista de HTML con elementos numera-
dos d e forma secuencial, el atributo value s610 es vAido cuando lo usa dentro de una
etiqueta <l i> e n una lista ordenada.
Para cambiar el nlimero actual y 10s siguientes en una lista ordenada, simplemente asigne
cualquier valor entero a1 atributo value. Por ejemplo, el siguiente cddigo fuente emplea el
atributo value para alterar la numeracidn de elementos e n una lista ordenada:
-=01>
<l i>Elemento 1.
el i > Elemento 2.
< l i value=9> Sal tamos a1 9.
< l i > Y continuamos con el 10.
</01>

El resultado s e muestra e n Navigator e n la figura 8-5.

8.3.1.3 Atrihtos style y chss

El atributo sty1 e d e la etiqueta <1 i > crea un estilo especlfico para 10s elementos contenidos
e n tal etiqueta, anulando cualquier otra regla d e estilo. El atributo class le permite dar
formato al contenido d e acuerdo con una clase predefinida de la etiqueta <1 i>; su valor es
el nombre de esa clase. [atributo style, 9.1.11 [attfbuto class, 9.2.41
240 CapfWb 61. L h t a s conformato

6 firchi~lo Edicion Uer Ir Marcadores Opciones Directorio Uentana

. D - Netscape: fHributo value; para slterer la nurneracion

I
1. Elemnto 1.
2. Elemento 2.
9. Saltamos al9.
10. Y continuamos con e1 10.

Figura 8-5.El atrtbuto value lepermite cambiar la numeractbn de elementos individuales

en una Iista ordenada.

8.4 Listas anidadas

Excepto dentro de directorios o menlis, las listas anidadas e n otras listas son atractivas. Las
listas de menGs y directorios pueden incrustarse en otras listas.
Las sangrias para cada lista anidada son acurnulativas, de mod0 que tenga cuidado d e no
anidar demasiado las listas: el contenido podria convertirse prscticamente en un hilo de
texto aplastado contra el borde derecho d e la ventana del navegador.

8.4.1 Listas anidadas sin ordenar

Los elementos d e cada lista sin ordenar anidada pueden ir precedidos por una vifieta dife-
rente, a discreci6n del navegador. Por ejemplo, la versi6n 2 d e Internet Explorer para
Macintosh utiliza una serie alterna de viiietas huecas, circulos s6lidos y cuadrados para 10s
diferentes niveles de elementos anidados en el siguiente c6digo de HTML, como se muestra
en la figura 8-6:
<u1>
< l i > Golosinas matutinas de Kumquats.
<ul >
< l i > Platillos calientes.
<ul>
<l i > Omelette de kumquat.
<li> Waffles de kumquats.
<u1>
< l i > Estilo campirano.
< l i > Belga.
</u1 >
el i > Kumquats y tostadas.
</u1>
< l i > Platillos frfos.
<u1>
< l i > Kumquats y hojuelas de malz inflado.
 <l i>Kumquats en escabeche.
<l i>Kumquats cristal izados.
</ul>
</ul>
</ul>

Ciolosmas rfuhifmas de Kumquats

E'latdns cdentes
0 ( h e l e t t e dt. kumquat
0 ' S i d e s Jr kumquats
Eshio cirrrarrano
EtQa

1
I
. 0 Kumquats y tostadas
Platdlos fries
Q I~utr~quats v hojmlas de rnm urtlado

Las oifietm de 10s elementos cambtan en las Iistas antdadas sin ordenar.
Figura 8-6.

Usted puede cambiar el estilo d e viiieta de cada lista sin ordenar e incluso elementos
individuales (vea la anterior explicaci6n sobre el atributo type en este capitulo), pero la
variedad d e viiietas es limitada. Por ejemplo, Internet Explorer para Windows 95 utiliza un
disco o circulo d i d o sin importar el nivel de anidaci6n.

8.4.2 Listas ordenadas an$dadas

De mod0 predeterminado, el navegador numera 10s elementos de las listas ordenadas co-
menzando con el nfimero 1 arhbigo, estkn anidados o no. Serla fanastic0 si el esandar de
HTML numerara las listas ordenadas anidadas de alguna manera rational, consecutiva. Por
ejemplo, 10s elementos en el segundo nivel d e anidaci6n de la tercera lista ordenada esta-
rian numerados d e esta forma "3.2.1n,"3.2.2", "3.2.3", y asl sucesivamente.
Sin embargo, con 10s atributos type y value tiene m5s libertad en la forma de crear listas
ordenadas anidadas. Un ejemplo excelente es el estilo tradicional para hacer un esquema, que
ocupa las diferentes maneras de numerar elementos que ofrece el atributo type (figura 8-7):
<ol type=A>
<l i > Historia de kumquat.
<ol type=l>
< l i > Historia antigua.
<ol type=a>
< l i > El registro fbsil.
<l i>Kumquats: el esl abbn perdido.
</01>
242 Capiiulo 8: Listas con formato

<li>CBmo usaban e l kumquat 10s mayas.

<li > Los kumquats en e l Nuevo Mundo.
c/o1 >
<li>El f u t u r o de 10s kumquats.
<lo1 >

flrchiuo Edicion Uer Ir Marcadores Opciones Directorio Uentana

Syj__-- Netscape: Listas ordenadas anidadas - = = = m g

Figura 8-7. El atrtbuto type lepermite crear un esquema tradicional con fistas ordenadas.

8.5 Listas de directorio

La lista de directorio es una forma especializada de lista sin ordenar. [ ~ u l * ,8.1.11

8.5.1 Etiqueta <dfr>

Los diseiiadores d e HTML utilizaban e n principio la etiqueta <di r> para mostrar listas de
archivos. Asi, el navegador, si interpreta <di r> y < u l > de forma diferente (la mayoria no lo
hace), espera que 10s elementos de la lista Sean bastante breves, quiz5 con no mPs d e 20
caracteres o algo similar. Algunos navegadores exhiben 10s elementos e n un formato de
rntiltiples columnas y puede que no utilicen una viiieta inicial.
Igual que e n la lista sin ordenar, 10s elementos d e la lista de directorio se definen con la etiqueta
<1 i >. Sin embargo, cuando s e utiliza en una lista d e directorio, <1 i > puede no contener ninglin
elemento d e bloque, incluyendo psrrafos, otras listas, texto con formato previo o forrnas.
El siguiente ejernplo utiliza la etiqueta de directorio para su tarea tradicional: presentar una
lista de nombres de archivos:
El disco de d i s t r i buci bn contiene 10s s i g u i e n t e s archivos:
<di r >
4 i><code>LEAME</code>
e l i><code>Makef i 1 e</code>
 dir>
Funcidn:
Define una lista de directorio
A tributos:
CLASS 0
COMPACT
STnE 0
Etiqueta de fin:
</di r>;nunca se omite
Contiene:
Elementos de lista
Usada en:
Bloque

Note que utilizamos la etiqueta <code* para asegurar que 10s nombres de archivo aparezcan
d e un modo apropiado (figura 8-8).

6
- File Edit -
O ~ t i o n s Nauiaate Annotate
:E------- Etiqueta < d i n -

S
d- 1 1 v

Listu de directorto.
Figura 8-8.

Al igual que las otras etiquetas de formato que hemos visto hasta ahora, la etiqueta <di r>tiene
un atributo compact opcional para mostrar una lista mas reducida, aun cuando virtualmente
ningdn navegador tiene la capacidad o habilidad d e compactar listas de directorio.
244 Capftulo 8. Listas conf a n a t o

Usted puede cambiar el estilo d e las viiietas d e 10s elementos d e la lista d e directorio con el
atributo t y p e y sus valores c i r c l e , square o d i s c , cuyo comportamiento es identico a1
del atributo t y p e e n una lista sin ordenar.

El atributo s t y 1 e d e la etiqueta <di r>crea un estilo especifico para 10s elementos conteni-
dos e n la etiqueta, lo que anula cualquier otra regla d e estilo e n uso. El atributo c l a s s le
permite dar formato a1 contenido d e acuerdo con una clase predefinida d e la etiqueta <di r>;
su valor es el nombre d e esa clase. [atributo style, 9.1.11 [atributo class, 9.2.41

La lista d e men6 es otra forma adicional y especializada d e lista sin ordenar.

8.611 Etiqueta <menu>

La etiqueta <menu> muestra una lista d e opciones breves a1 lector, digamos un mend de ligas
a otros documentos. El navegador puede utilizar una representaci6n especial (con frecuencia
mls compacta) de elementos en una lista d e menli, comparada con la lista sin ordenar gene-
ral, o incluso utilizar alguna especie d e mend gdfico desplegable para instrumentar la lista de
menli. Si 10s elementos d e la lista son lo suficientemente breves, el navegador puede incluso
mostrarlos en varias columnas y puede no incluirse la viiieta antecedente.

<menu>
Funcion:
Define una lista d e mend
A tributes:
CLASS 0
COMPACT
STYLE 0
TYPE
Etiqueta de fin:
</menu>; nunca se omite
Contiene:
Elemento de lista
Usada en:
Bloque

Igual que e n una lista sin ordenar, 10s elementos d e la lista d e men6 se definen con la
etiqueta <1 i >. No obstante, cuando se utilizan dentro d e una lista d e mend, la etiqueta <1 i >
6 7 Lfstas de deflnicMn 245

puede n o contener ning6n elemento d e bloque, incluyendo phrrafos, otras listas, texto con
formato previo o formas.
Compare el c6digo fuente q u e mostramos abajo y la pantalla d e Mosaic (figura 8-9) que
muestra la lista d e directorio (figura 8-8) y la lista sin ordenar (figura 8-1) q u e presentamos
antes en este capitulo.
<P>
Algunas populares recetas de kumquats incl uyen:
<menu>
< l i > Kumquats en escabeche.
< l i > Salsa de kumquats (para f i e s t a s ) .
<l i > Ensal ada de kumquats.
</menu>
Hay para compl acer a todos 1os pal adares .

La etiqueta <menu> tambikn utiliza el atributo compact para producir una presentaci6n m9s
reducida, aunque, e n la prktica, pocos navegadores son capaces o est9n habilitados para
instrumentar el desplegado d e una lista d e men6 compacta. De hecho, Navigator d e Netscape
n o distingue entre un mend y una lista sin ordenar.
Puede modificar el estilo d e la viiieta que precede a 10s elementos d e la lista d e mend con
el atributo type y 10s valores c i r c l e , square o d i s c , cuyo comportamiento es idCntico a1
del atributo t y p e en una lista sin ordenar.

8.6.1.1 Atributos style y class

El atributo s t y 1 e d e la etiqueta <menu> crea un estilo especifico para 10s elementos conteni-
dos e n ella, lo que anula cualquier otra regla d e estilo. El atributo c l a s s le permite dar
formato al contenido d e acuerdo con una clase predefinida d e la etiqueta <menu>; su valor
es el nombre d e esa clase. [atributo style, 9.1.11 [atributo class, 9.2.41

8.7 Listas de definicidn

HTML tambikn soporla un estilo de lista totalmente diferente d e las listas ordenadas, sin
ordenar, d e men6 y de directorio que hemos explicado hasta ahora; son las listas d e defini-
246 Capitdo 8. L i s t a s con formato

ci6n. Como las voces que usted encuentra en un diccionario o enciclopedia, con texto,
imfigenes y otros elementos multimedia, la lista de definici6n es la manera ideal de presen-
tar un glosario, lista de terminos u otras listas nombre/valor con HTML.

8.7 1 Etiqueta <dl>

La lista de definici6n est9 delirnitada por las etiquetas <dl > y </dl>. Dentro de ellas cada
elemento se compone de dos partes: un tkrrnino y su definici6n o explicaci6n. En lugar de
*l i>, cada elemento de una lista <dl > se marca con la etiqueta *dt>, seguida de su defini-
ci6n o explicaci6n etiquetada con *dd>.

<dE>
Funcion:
Define una lista de definiciones
A tributos:
CLASS 0
COMPACT
STYLE 0
Etiqueta de fin:
*/dl>; nunca se omite
Contiene:
Tkminosy sus definiciones
Usada en:
Bloque

Los navegadores comdnmente presentan el nombre del elemento o termino en el margen

izquierdo y en seguida la definici6n o explicaci6n sangrada. Si 10s terminos de la definicidn
son muy breves (por lo regular menos de tres caracteres), el navegador puede colocar la
primera parte de la definici6n en la misma linea que ocupa el termino. Observe c6mo se
interpreta en Navigator el siguiente fragment0 de c6digo (figura 8-10).
<h3>Parasitos cornunes de 10s kurnquats.</h3>
<dl>
<dt&aros de l a s hojas.
<dd>El acaro de l a s hojas acaba con e l arb01 del kumquat.
<dt>Hidropesia del tronco.
<dd>Esta larva rnicroscbpica de l a nig&uurnl; a de l a zariEiuurn1;ella
corn&ucute;n consurni r&acute; 1 os e l ernentos estructural e s del tronco,
provocando su col apso interno.
</dl >
A1 igual que en otros tipos de lista, puede agregar m9s espacio entre sus elementos insertan-
do etiquetas de p4rrafo (*p>) entre ellos, o un estilo espaciado para la etiqueta *l i >.
 Rrchiuo Edici6n Uer I r Mercadores Opciones Directorio Uentane
gm- .- ..- -- . -
Netscape: Etlquete <dl> ------------------ - --

Aradores de hojas.
El arador de las hojas amba con el 6rbl del h q u a t .
Hidropesia del tronco.
Esta larva rrdcrdpica es comk de la zmgMla, commkh los elemmbs
estructurates del t r o w pwcanUo su c o l a p hWm.

Ftgura 8-10.Lista de deflnktdn en Navigator & Netscape.

8.7.1.1 Listas de &flniddn mrkF compactas

La etiqueta <dl> tambiCn p o s e el atributo compact, que indica a1 navegador que presente
la lista tan pequeiia como sea posible. El navegador puede reducir el interlineado entre 10s
elementos, desplazar la definici6n hacia el margen izquierdo e n lugar d e sangrarla o reducir
el tamafio de la letra utilizado para presentar la lista. Si el navegador en realidad hace o no
alguna d e estas modificaciones, depende del fabricante. Pocos lo hacen.

8.7.1.2 Atributos style y class

El atributo sty1 e de la etiqueta <dl > crea un estilo especifico para 10s elementos contenidos
en la etiqueta, lo que anula cualquier otra regla d e estilo. El atributo class le permite dar
formato a1 contenido d e acuerdo con una clase predefinida d e la etiqueta <dl>; su valor es
el nombre d e esa clase. [atributo style, 9.1.11 [attibuto class, 9.2.41

8.7.2 Etiqueta a t >

La etiqueta < d t > define el tCrmino del componente de una lista d e definici6n. Es v5lida s610
cuando se utiliza dentro d e una lista d e definici6n y precediendo a1 tCrmino o elemento
etiquetado con <dd*.
Por tradici61-1, el termino que sigue a la etiqueta <dt> es breve, pequeiio; una palabra, o
pocas. Tknicamente, puede ser de cualquier longitud. Si es extenso, el navegador puede
ejercer la opci6n d e extenderlo miis all5 d e la ventana d e desplegado o ajustarlo en la
siguiente linea donde comienza la definici6n.
Puesto que la correspondiente etiqueta d e terminaci6n para <dt> precede d e inmediato a1
inicio d e la etiqueta <dd*, no es ambigua y, por lo tanto, no se requiere.
248 Caphlo 8: Listas con f m t o

<dt>
Funcion:
Define terminos de una lista de definici6n
A tributes:
CLASS 0
SrnE 0
Etigueta de fin:
</dt>; siempre se omite
Contiene:
Texto
Usada en:
Tkrmino a definirse

8.7.2.1 Formato de texto con a t >

En la prlctica, 10s navegadores son demasiado indulgentes o muy indiferentes para imponer
las reglas de HTML, de mod0 que algunos creadores de plginas tramposos malemplean la
etiqueta <dt> para dar sangria a derecha e izquierda en desplegados de texto graciosos
(recuerde, 10s caracteres de tabulacion y espacios de inicio generalmente no funcionan con
texto regular). Nosotros no condonamos las violaciones a1 estlndar d e HTML y le preveni-
mos una vez mls acerca de 10s documentos con trampas. Mejor utilice hojas de estilo.

8.72.2 Atrlbutos style y class

El atributo sty1 e de la etiqueta <dt> crea un estilo especifico para 10s elementos contenidos
en tal etiqueta, anulando asi cualquier otra regla de estilo. El atributo class le permite dar
formato a1 contenido de acuerdo con una clase predefinida de la etiqueta <dt>; su valor es
el nombre de esa clase. [atributo styl e, 9.1.11 [atributo class, 9.2.41

8.7.3 Etiqueta <dd>

La etiqueta <dd> marca el inicio de la parte de definicion de un elemento de una lista de
definici6n. De acuerdo con el estlndar de HTML, <dd> s61o tiene cabida dentro de una lista
de definicion, siguiendo a la etiqueta <dt> asi como a1 termino, y precediendo la definici6n
o explicaci6n.
El contenido que sigue a la etiqueta <dd> puede ser cualquier construcci6n de HTML,
incluyendo otras listas, texto de bloque y elementos multimedia. Aunque en otros casos se
le trate como contenido convencional, 10s navegadores por lo regular indentan las definicio-
nes etiquetadas con <dd>. Y ya que el inicio de otro termino y definici6n <dt> o la etiqueta
8 8 Uso apropiado de las Ustas 249

<dd>
Funcion:
Define un tCrmino de lista de definici6n
A tributos:
CLASS 0
STVLE 0
Etiqu eta de fin:
*/dd*; siempre se omite
Contiene:
Flujo
Usada en:
Contenido de definici6n

d e fin requerida, </dl>, termina sin ambigiiedades la definici6n precedente, la etiqueta

</dd> no es necesaria y su ausencia hace su c6digo fuente mis legible.

8.73.1 Atrlbutos style y class

El atributo s t y 1 e d e la etiqueta <dd> crea un estilo especifico para 10s elementos contenidos
e n tal etiqueta, anulando asi cualquier otra regla de estilo. El atributo c l a s s le permite dar
formato a1 contenido d e acuerdo con una clase predefinida de la etiqueta <dd>; su valor es
el nombre d e esa clase. [atributo s tyl e, 9.1.11 [atributo cl ass, 9.2.41

8.8 Uso apropiado de las listas

En general, utilice las listas sin ordenar para crear:
Listas d e atajos y colecciones de ligas
Grupos d e texto breves, sin secuencia
Subrayar 10s puntos importantes de una presentaci6n
En general, utilice listas ordenadas para:
fndices de contenido
Secuencias de instrucciones
Conjuntos de secciones de texto secuenciales
Asignaci6n d e nfimeros para frases breves a las que se puede hacer referencia e n
cualquier parte
250 C a p h h 8. Listas con formato

Utilice las listas de definici6n para:

Glosarios
Vifietas personalizadas (haga del elemento despues de la etiqueta <dt> una imagen o
viiieta del tamafio d e un icono)
Cualquier lista de pares nombdvalor
 En este capfLuCo:
Elementos de 10s estibs
Sintaxis para estdlos

Estilos con menos

etiquetas: la etiqueta
*pan>
Cdmo aplicar estilos a
docurnentos Hojas de estilo
en cascada

Las hojas d e estilo son la forma en que 10s profesionales de la edici6n administran por completo
el aspect0 de sus publicaciones (fondos, fuentes, colores, etcetera), desde una sola piigina hasta
colecciones enteras de documentos. La mayoria de 10s programas d e autoedicidn soportan
hojas d e estilo; tambikn 10s procesadores de texto m9s populares. Quienes emplean programas
de autoedici6n y 10s diseiiadores graficos experimentados e s t h creando pPginas para el Web,
asi que era inevitable la exigencia: "iiC6m0 que HTML no tiene hojas de estilo!?"
Desde sus mas remotos origenes, HTML se enfoc6 preferentemente en el contenido m9s que en
el estilo. Nosotros invitamos a quienes crean piiginas web a satisfacer la demanda de informa-
ci6n de gran calidad y dejar que el navegador se ocupe d e la presentacion. Tambien les
recomendamos encarecidamente (como hemos hecho a lo largo de este libro) que adopten esa
filosofia en sus documentos d e HTML, en especial en 10s destinados a1 World Wide Web. No
confunda estilo con sustancia.
No obstante, aunque la etiqueta <font> y sus atributos relacionados, como c o l o r , producen
efectos de presentaci6n precisos, las hojas d e estilo, cuando se emplean con buen juicio, dan
consistencia y orden tanto a colecciones de documentos como a documentos individuales.
Recuerde tambiCn que la presentaci6n debe beneficiar a1 lector. Incluso 10s diseiiadores origi-
nales de HTML comprendieron la interrelacibn entre estilo y legibilidad. Por ejemplo, 10s
lectores pueden identificar con rapidez 10s encabezados de secci6n en un documento cuando
esdn encerrados entre etiquetas de encabezado, como <h2>,que 10s navegadores modernos
muestran en letra grande y, con frecuencia, en negritas. Las hojas de estilo extienden esa
presentaci6n con varios efectos adicionales, incluyendo colores y una variedad mas amplia de
fuentes, de manera que 10s lectores pueden distinguir atin mejor l a element05 de un documen-
to. Pero todavia mas importante es el hecho de que las hojas de estilo permiten controlar 10s
252 Capihtkb 9: H o j a s de esiikb en cascada

atributos de presentaci6n de todas las etiquetas en un solo documento o e n una colecci6n,

todo desde una sola hoja de estilo maestra.
A principios de 1996, el Consorcio World Wide Web (W3C) elabor6 una propuesta inicial
que definia las hojas d e estilo en cascada (CSS, Cascading Style Sheets) d e HTML y que
madur6 en un estandar recomendado que 10s fabricantes de navegadores comerciales pron-
to se dispusieron a explotar. Internet Explorer 3.0, presentado en el verano de 1796,
instrument6 un subconjunto del estPndar del W3C. Navigator d e Netscape tiene un soporte
mas amplio para las hojas de estilo en su versi6n 4.0, que se liber6 en 1777. El estilo est4
logrando un r4pido equilibrio con el contenido en el World Wide Web.
Fieles a nuestra filosofia de favorecer las implementaciones reales sobre 10s esthdares,
comenzaremos por documentar c6mo funcionan las hojas de estilo actualmente en el mun-
d o real. A1 momento d e escribir esto, las hojas de estilo eran soportadas d e forma parcial por
Internet Explorer 3.0 y en la tercera versi6n de prueba d e Navigator 4.0. Sabemos que el
soporte del navegador para las hojas de estilo cambiarP m4s r4pido de lo que podamos
reimprimir este libro, asi que hemos creado un "documento d e aceptaci6nV con el que
puede aprender a implementar hojas d e estilo en las versiones m4s recientes de 10s
navegadores. Puede localizar este documento en http://www.ora.com/info/htm1/. Debe con-
siderarlo mPs actualizado y precis0 que la informaci6n proporcionada en esta obra.
Ya que sabemos que es probable una eventual conformidad con el estindar del W3C, en este
capitulo incluiremos todos sus componentes, incluso si abn no 10s soporta algbn navegador.
Como siempre, indicaremos quC es real, quC esth propuesto y que realmente se soporta.

9.1 Elementos de los estilos

En el nivel mPs simple, un estilo no es mas que una regla que le indica a1 navegador c6mo
mostrar una etiqueta especifica de HTML. Cada etiqueta tiene una serie de propiedades asocia-
das con ella, cuyos valores definen la forma en que debe presentarla el navegador. Una regla
define un valor especifico para una o mPs propiedades de la etiqueta. Por ejemplo, la mayoria
de las etiquetas tiene una propiedad color, cuyo valor define el color que se emplearP para
mostrar el contenido de la etiqueta. Otras propiedades incluyen atributos d e fuentes, espacio
entre lineas, mhrgenes, bordes, etcetera, lo cud describimos con detalle en este capitulo.
Hay tres formas de asignar un estilo a una etiqueta: estilos integrados o en linea (inline), estilos
a nivel del documento y hojas de estilo externas. Puede emplear uno o mPs tipos d e estilo en
sus documentos. El navegador combina las definiciones de estilo de cada uno de ellos o vuelve
a definir la caracteristica del estilo para el contenido d e una etiqueta. Los estilos de estos
diversos origenes se aplican a su documento, combinando y definiendo asi las propiedades de
estilo que se acomodan en cascada: primer0 las hojas de estilo externas, despuks 10s estilos del
documento local y, a1 filtimo, 10s estilos integrados. Esta cascada de reglas de estilo y propieda-
des dan la base para el nombre del estindar: hojas de estilo en cascada.
9.1 Elementos d e los estilos 253

Aqui explicamos 10s fundamentos sintiicticos de las tres tCcnicas de hojas de estilo. Profun-
dizamos e n el uso apropiado de las hojas de estilo integradas, a nivel del documento y
externas a1 final del capitulo.

9.1.1 Estilos integrados: el atributo style

El estilo integrado es la manera miis sencilla de asignar un estilo a una etiqueta: s610 incluya
el atributo styl e a la etiqueta junto con una lista de propiedades y sus valores. El navegador
emplea esas propiedades para mostrar el contenido de esa etiqueta.
Por ejemplo, el siguiente estilo le indica a1 navegador que muestre el texto del encabezado
de nivel 1, "Estoy tan triste.. .", no s61o con el estilo de la etiqueta < h l > que impone el
navegador, tambiCn en color azul y con letras cursivas (si el navegador es capaz):
<hl style="color: blue; font-style: i tal icn>Estoy tan triste...<I
hl>
Este tip0 de definici6n de estilo se denomina "integrada" (o "en linea") porque se produce
con la etiqueta cuando aparece en el documento. El estilo abarca s61o el contenido de esa
etiqueta. Puesto que 10s estilos integrados estiin dispersos a lo largo del documento, puede
ser dificil manejarlos. Utilice el atributo styl e con mesura y s61o e n las circunstancias donde
no pueda lograr 10s mismos efectos de otra manera.

9.1.2 Hojas de estilo a nivel del documento

El poder real de las hojas de estilo surge cuando coloca una lista de reglas de presentaci6n
dentro del encabezado de un documento de HTML. Encerradas por sus propias etiquetas
<sty1 e> y </sty1 e>, las hojas de estilo "a nivel del documento" afectan todas las d e m b
etiquetas <sty1 e> y </sty1 e> de ese documento, except0 las que contienen un (estilo)
atributo styl e integrado que invalida a1 del encabezado.

<style>
Funcion:
Define una hoja de estilo a nivel del documento
Atributos:
TYPE
Etiqueta de fin:
*/sty 1 e>; raramente se omite
Contiene:
Estilos
Usada en:
Contenido de encabezado
254 Capitub 9:H o j a s de estib en cascada

La etiqueta <sty1 e> debe aparecer dentro de la etiqueta <head> del documento. Todo lo
que aparezca dentro d e las etiquetas <sty1 e> y </sty1 e> se considera parte d e las reglas d e
estilo que se aplicarin a todo el documento. Para ser sinceros, el contenido de la etiqueta
<s t y l e> no es HTML y no esti limitado por las reglas generales d e este lenguaje. En efecto,
esa etiqueta le permite insertar contenido no-HTML que el navegador utiliza para dar forma-
to a las etiquetas.
La etiqueta <sty1 e> s61o tiene un atributo, type, que define los~tiposd e estilo que usted
incluye e n la etiqueta. Las hojas d e estilo e n cascada siempre llevan el tip0 t e x t l c s s ; las
hojas d e estilo d e JavaScript utilizan el tipo (type) t e x t l j a v a s c r i p t . Puede omitir el atribu-
to t y p e y cruzar 10s dedos con la esperanza d e que el navegador muestre 10s estilos que
incluy6 e n el documento. Nosotros preferimos incluir tal atributo para evitar confusiones.
[Hojas de estilo de JavaScript, 13.41
Por ejemplo, un navegador que reconozca 10s estilos mostrar5 el contenido d e todas las
etiquetas < h l > como texto am1 cursivo e n un documento con la siguiente definici6n d e hoja
d e estilo a nivel del documento en su encabezado:
<head>
<title>El color azul</title>
<sty1 e type="text/css">
<!--
/*convierte 10s encabezados H1 a color azul */
H1: {color: blue; font-style: italic)
- ->
</style>
</head>
<body>
<hl>iMe gusta el azul !</hl>
...
<hl>Es muy vistoso</hl>

9.1.3 Hojas de estilo externas

Tambien puede colocar definiciones d e estilo, como e n nuestro ejemplo d e hoja d e estilo a
nivel del documento para etiquetas < h b , e n un archivo d e texto con el tip0 d e MIME t e x t /
css e importar esa hoja de estilo "externa" a sus documentos d e HTML. Como una hoja de
estilo externa e s un archivo separado del documento d e HTML y el navegador la carga por
la red, puede colocarla e n cualquier lugar, utilizarla con frecuencia e incluso emplear otras
hojas d e estilo. Pero lo m i s importante es que las hojas d e estilo externas le dan la capaci-
dad de influir a 10s estilos d e desplegado no s61o d e todas las etiquetas d e un solo documen-
to, tambien d e toda una colecci6n d e documentos.
Supongamos que creamos un archivo denominado gen-esti 10s. css que contiene esta
regla d e estilo:
H1 {color: blue; font-style: italic)
9.1 Elementos de los estllos 255

Para cada uno d e 10s documentos d e HTML e n nuestra colecci6n, le podemos decir a1
navegador que lea el contenido del archivo gen-esti 1 0s. css, que a su vez aplicari color
azul a todo el contenido de las etiquetas <hl> y lo exhibira e n letras cursivas. Por supuesto,
esto sucederi s610 si la miquina del usuario puede interpretar estos trucos de estilo, si
utiliza un navegador que reconozca estilos y si el estilo no es anulado por una definici6n a
nivel del documento o por un estilo integrado.
Puede cargar las hojas d e estilo externas a su documento d e dos formas: mediante ligas o
importindolas.

9.1.3.1 Hojas de estilo externas con ligas

Una manera de cargar una hoja d e estilo extema es utilizar la etiqueta e l in k>:

<head>
<title>Estilo ligado</title>
<l ink re1 =stylesheet type="text/css"
href="http://www. kurnquats.com/esti1os/gen~estilos.css"
ti tl e="un bluesu>
</head>
<body>
<hl>iMe gusta el azul !</hl>
...
<hl>Es muy v i stoso>/hl>
Recuerde que la etiqueta <1 ink> crea una relaci6n entre el documento actual y otro docu-
mento e n la red. En el ejemplo, indicamos a1 navegador que el documento asignado e n el
atributo h r e f es una hoja de estilo (sty1 esheet), asi que su contenido obedece a1 esthdar de
CSS, como indica el atributo type. TambiCn proporcionamos un titulo ( t i t l e ) a la hoja
d e estilo, lo que permite hacerle una referencia posterior con el navegador. [el ink>, 7.7.21
La etiqueta <1 ink> debe aparecer dentro de la etiqueta <head> d e un documento. El URL de
las hojas d e estilo puede ser absoluto o relativo a1 URL base del documento. El tip0 tambien
puede ser t e x t / j a v a s c r i p t , indicando (s61o para Navigator) que las reglas d e estilo estin
escritas e n JavaScript, no e n CSS. [Hojas de estilo de JavaScript, 13.41

9.1.3.2 Hojas de estilo externas importadas

La segunda tCcnica para cargar una hoja de estilo externa es importar 10s archivos con un
comando especial e n la etiqueta <sty1 e>:
<head>
<ti tleXbrno importar hojas de esti 1 o</ti tle>
<style>
<!--
Oirnport url (http://www. kumquats.com/esti1os/gen~esti1os.css) ;
Oirnport url (http://www. kumquats.com/esti los/gen-esti 10s .css) ;
BODY: (background: url (fondos/rnarmol .gi f) )
256 Capftulo 9: Hojas de eslilo en cascada

El comando Qirnport espera un parimetro de tip0 URL simple que define la ruta en la red
para la hoja de estilo externa. La palabra clave u r l , 10s parCntesis y el signo ";" (punto y
coma) a1 final son, todos, elementos indispensables del comando Qirnport. El URL puede ser
absoluto o relativo a1 URL base del documento. El comando Q irnport debe aparecer antes de
cualquiera d e las reglas de estilo convencionales, ya sea e n la etiqueta <sty1 e> o e n una
hoja d e estilo externa. De otro modo, el navegador ignora las definiciones d e estilo prece-
dentes. Este orden significa tambiCn que las reglas de estilo subsecuentes pueden anular las
reglas en la hoja importada y, e n realidad, asi sucede. tURL property values, 9.3.1.41
El comando Qimport puede aparecer e n una definici6n d e estilo a nivel del documento o
incluso e n otra hoja d e estilo externa, lo que permite crear hojas de estilo anidadas.

7.1.4 Comparacidn entre hojas de estilo uinculadas

e importadas
A primera vista, puede parecer que las hojas de estilo ligadas e importadas son equivalentes,
aunque usan diferente sintaxis para la misma funci6n. Esto es cierto si utiliza una sola
etiqueta <1 i n k > e n su documento, pero si usa dos o rnis entran e n juego reglas especiales.
Con una etiqueta <1 ink>, el navegador carga 10s estilos de la hoja d e estilo a la que se hizo
referencia y da formato a1 documento d e acuerdo con ella, sin anular con alg6n estilo
integrado y a nivel del documento las definiciones externas. Con dos o mis etiquetas <1 ink>,
el navegador presenta a1 usuario una lista de todas las hojas de estilo ligadas con esta
etiqueta. El usuario puede entonces escoger una de las hojas, la cual se utilizad para dar
formato a1 documento. Las dem5s hojas serin ignoradas.
Por el otro lado, el navegador que reconoce estilos combina, no separa, las hojas de estilo
cargadas con Qirnport para formar un solo conjunto de reglas d e estilo para el documento.
La 6ltima hoja d e estilo importada tiene precedencia si hubiera definiciones duplicadas.
Por lo tanto, si gen-e s t i 10 s . css (9.1.3.2) le indica a1 navegador que dC formato a1 conteni-
d o de <hl> con azul y en cursivas, y despuCs e s t i 10s-espec. css le indica que dC formato
a1 texto de <hl> con rojo, entonces el contenido de la etiqueta <hl> apareced e n rojo y
cursivas. Y si despuks definimos otro color, digamos amarillo, para las etiquetas <hl> e n una
definici6n d e estilo a nivel del documento, el contenido de las etiquetas <h l> s e d amarillo
y e n cursivas. Efectos e n cascada. LO vio?
Los estilos importados anulan 10s estilos externos ligados, de la misma forma que 10s estilos
integrados y a nivel del documento anulan las definiciones de estilo externas. Para ver todo
esto, considere el siguiente ejemplo:
 <html>
<head>
<l ink rel=stylesheet href=hojal.css type=text/css>
<link rel=stylesheet href=hojaZ.css type=text/css>
<style>
<!--
@import url ( h o j a 3 . c ~ ~;)
@import url ( h o j a 4 . c ~ ~;)
- ->
</style>
</head>

Utilizando el modelo de CSS, el navegador solicita a1 usuario que elija entre h o j a l . css y
h o j a2. css . Luego carga la hoja seleccionada, seguida por hoja3. css y h o j a4. css. Los
estilos duplicados definidos en h o j a3. css o en h o j a4. css y e n cualquier estilo integrado
ser4n estilos anulados definidos e n la hoja seleccionada.

9.1.5 Limitaciones de los navegadores actuales

Actualmente, hacer referencia a una hoja d e estilo con la etiqueta < l ink> es la dnica forma
d e aplicar una hoja d e estilo externa a un documento. Navigator 4.0 ignora el comando
@import per0 procesa otras reglas de estilo dentro d e la etiqueta <sty1 e>. Internet Explorer
3.0 interpreta @import como un error. Esto significa que no sblo no tendr5 efecto una hoja
d e estilo externa Qimportada, tampoco tendran efecto 10s estilos que siguen a1 comando
@import.Y, lo peor, Internet Explorer 3 ignora cualquiera d e las reglas d e estilo a nivel del
documento si se cargan con < l i n k > , sin importar que alguna de las reglas externas se
relacionen con las mismas etiquetas o no.

Navigator ni Internet Explorer soportan mfiltiples hojas de estilo ligadas con <1 ink> como lo
propone el estindar de CSS. Navigator carga todas las hojas de estilo vinculadas con <1 i n k>
con reglas e n hojas posteriores, anulando quiz5 reglas e n hojas anteriores. Internet Explorer
s610 carga la primera hoja vinculada con <1 ink> e ignora las restantes.

Esperamos que el estindar algfin dia lo sea e n verdad, d e mod0 que las hojas de estilo, de
por si ya bastante mitificadas, lleguen a ser menos confusas.

9.1.6 Comentarios de estilo

Los comentarios son bien recibidos dentro de la etiqueta <sty1 e> y e n hojas de estilo exter-
nas, per0 no son comentarios estindar d e HTML. Encierre 10s comentarios de estilo comen-
zando con la secuencia d e caracteres /* y finalizando con */, como lo hicimos e n el
ejemplo anterior (quienes conozcan el lenguaje d e programacibn C reconocerh estas
marcas de comentario). Utilice esta sintaxis de comentario tanto para hojas d e estilo exter-
nas como a nivel del documento. Los comentarios no pueden ir anidados.
258 Capflulo 9:Hojas de estilo en cascada

Le recomendamos que documente sus estilos siempre que sea posible, en especial las hojas
de estilo externas. Cuando exista la posibilidad de que otras personas usen sus hojas de
estilo, 10s comentarios les ayudadn a comprenderlas.

9.1.7 Manejo de navegadores con menos estilos

En nuestros ejemplos de hojas de estilo a nivel del documento, tal vez haya notado que
colocamos la definici6n del estilo entre una etiqueta de comentario de HTML (<! -- y -->I.
Esto se debe a que 10s navegadores antiguos, con menos estilos, ignoran la etiqueta <sty1e>,
pero muestran en pantalla las definiciones de estilo. No es necesario decir que 10s docu-
mentos no lucen muy bien cuando su primera mitad presenta todas sus reglas de estilo.
Los navegadores mPs recientes, capaces de interpretar 10s estilos, ignoran 10s comentarios
contenidos en la etiqueta <sty1e>. Puesto que 10s navegadores con una variedad menor de
estilos estarin con nosotros todavia durante algtin tiempo, asegfirese de definir siempre sus
reglas de estilo a nivel del documento dentro de comentarios de HTML. Y recuerde: este
tip0 de comentarios no debe emplearse en hojas de estilo externas.

9.1.8 Precedencia de estilo

Puede importar mis de una hoja de estilo externa y combinarlas con efectos de estilo
integrados y a nivel del documento de diferentes formas. Los efectos se acumulan como en
cascada (de aqui el nombre, por supuesto). Puede especificar el tip0 de letra de nuestra
etiqueta < h l > , digamos, en una definici6n de estilo externa, mientras el color puede prove-
nir de una hoja de estilo a nivel del documento.
Sin embargo, 10s efectos de la hoja de estilo no son acumulativos: de 10s muchos estilos que
pueden definir diferentes valores para la misma propiedad (por ejemplo, colores para el
contenido de nuestra etiqueta de ejemplo), puede reconocer la que tiene precedencia si-
guiendo estas reglas, en orden:
Orden por origen: el estilo definido "mPs cerca" de una etiqueta tiene precedencia
sobre el mPs "distante". De este modo, un estilo integrado tiene precedencia sobre un
estilo a nivel del documento, que a su vez tiene precedencia sobre 10s estilos externos
Si existe mPs de un estilo aplicable, clasifiquelo por clase. Las propiedades definidas
como clase de una etiqueta (9.2.4) tienen precedencia sobre una propiedad definida
para la etiqueta en general
Si existen diferentes estilos, clasifiquelos por su especificidad. Las propiedades para
un estilo contextual mPs especifico (9.2.3) tienen precedencia sobre las definidas
para un context0 menos especifico
9.2 Sintaxis para estilos 259

Si todavia existen diferentes estilos, clasifiquelos por orden. La dltima propiedad espe-
cificada tiene precedencia. Internet Explorer desafia esta regla al aceptar s61o la primera
definici6n de una regla e ignorar cualquier otra
Este defect0 e n Internet Explorer conduce al error. En el ejemplo siguiente, Navigator da un
color verde al contenido de la etiqueta < h l > ; Internet Explorer 3.0 usa el color rojo:
<head>
<style>
<! --
H 1 {color: blue; color: red)
H 1 {color: green)
- ->
</sty1 e>
Nuestro consejo: escriba estilos que obedezcan al estkndar de CSS. Eventualmente, Internet
Explorer mejorar%;mientras eso ocurre, sus documentos luciran bien e n Navigator, que es el
navegador utilizado por m%susuarios.
La relaci6n entre propiedades de estilo y atributos de etiqueta convencionales es casi imposible
de predecir. Los colores de primer plano y de fondo definidos con una hoja de estilo -ya Sean
definidos externamente, a nivel del documento o integrados, anulan 10s diversos atributos
color que puedan aparecer dentro de una etiqueta. Pero el atributo a1 i gn de una imagen
integrada generalmente tiene precedencia sobre una alineaci6n dictada mediante un estilo.
Hay una cantidad abrumadora de combinaciones de estilos y atributos de etiquetas de
presentaci6n. Se necesitaria una bola de cristal para predecir cuPl combinaci6n es la gana-
dora y cu%lla perdedora e n la batalla de la precedencia. Las reglas de redundancia y estilo
contra la precedencia de atributos no est%claramente dilucidada e n el estindar de CSS del
W3C, ni hay un patr6n claro de precedencia implementado e n 10s navegadores capaces de
manejar estilos. Esto es particularmente desafortunado, ya que habr% un largo periodo,
quiz%de aiios, e n el que 10s usuarios p o d d n o no emplear controles de presentaci6n sin
estilo para lograr 10s mismos efectos.
No obstante, nuestra recomendacih es que escape (tan d p i d o como pueda) de 10s tipos de
efectos de presentacih inmediatos, integrados, como 10s logrados con la etiqueta <font> y
el atributo col or. Sirvieron a su prop6sito temporal; ahora es tiempo de ser consistente (pin
dolor!) de vuelta a la presentaci6n de su documento. Utilice 10s estilos. Eso es HTML.

3.2 Sintaxis para estilos

La sintaxis de un estilo, como q u i d ya dedujo de nuestros ejemplos anteriores, es bastante directa.
9.2.1 Fundarnentos
Una regla de estilo se compone por lo menos de tres partes bisicas: un selector de etiqueta,
que identifica el nombre de la etiqueta a la que afecta la regla de estilo, seguido por una
lista, encerrada entre llaves (O), de uno o m b pares de declaraciones de estilo propi edad: val o r
y separadas por el signo de punto y coma:
sel e c t o r - d e l e t i q u e t a (propiedad1:valorl; propiedad2:valorl v a l o r 2 valor3; .. .)
Las propiedades requieren a1 menos un valor, pero pueden incluir dos o mls. Separe 10s
valores con un espacio, como se hace con 10s tres valores que definen la propiedad2 en el
ejemplo. Algunas propiedades necesitan que 10s diferentes valores e s t h separados por comas.
Los navegadores capaces de manejar estilos ignoran la diferencia entre letras minlisculas y
maylisculas en cualquier elemento de una regla. Por lo tanto, H1 y h 1 son el mismo selector,
y COLOR, c o l o r , COLOR y cOLor son propiedades equivalentes. Sin embargo, la convenci6n
dicta que 10s nombres de etiqueta deben ponerse en mayhculas y que las propiedades y
valores se escriban en minlisculas. Nosotros nos apegamos a estas convenciones a lo largo
del libro.
Cualquier nombre de etiqueta de HTML vllida (una etiqueta menos 10s caracteres "<" y 'I>"

y sus atributos) puede ser un selector. Puede incluir mls de un nombre de etiqueta en la
lista de selectores, como explicamos en las siguientes secciones.

7.2.2 MzUiples selectores

Cuando estln separadas por comas, todas las etiquetas en la lista de selector se verln
afectadas por 10s valores de propiedad en la regla de estilo. Esto puede hacer mucho mls
flcil la vida para quien usa HTML. Por ejemplo:
H1. H2, H3. H 4 , H 5 , H6 { t e x t - a l i g n : center)

hace exactamente lo mismo que:

H1 { t e x t - a 1 ign: center)
H2 { t e x t - a 1 ign: center)
H3 { t e x t - a 1 ign: center)
H4 { t e x t - a 1 ign: center)
H5 { t e x t - a 1 ign: center)
H6 {text-a1 ign: center)

Ambos estilos indican a1 navegador que centre el contenido de 10s encabezados de 10s
niveles 1-6.Es obvio que la primera versi6n es mls flcil de teclear, comprender y modificar.
Y tambien toma menos tiempo y recursos transmitirla por una red.

7.2.3 Selectores contextuales

Comlinmente, el navegador capaz de rnanejar estilos 10s aplica a las etiquetas dondequiera
que aparezcan en el documento, sin importar el contexto. Sin embargo, el estlndar de CSS
9.2 Sintaxfs para estilos 261

define una forma para aplicar un estilo s61o cuando se presenta una etiqueta dentro de un
contexto especifico en un documento, como cuando estl anidada dentro d e otras etiquetas.
Para crear un selector contextual, liste las etiquetas en el orden en el que deben estar anidadas
en el documento, comenzando con la etiqueta mPs externa. Asi, cuando el navegador localiza
ese orden de anidaci6n aplica las propiedades de estilo a la dltima etiqueta de la lista.
Por ejemplo, aqui mostramos c6mo puede utilizar estilos contextuales para definir la se-
cuencia cllsica d e numeraci6n de esquemas: letras maylisculas para el nivel m k externo,
ndmeros romanos e n maythculas para el nivel siguiente, letras e n mindsculas e n el siguien-
te y ndmeros arPbigos para el nivel mls interno.
OL L I (1 ist-style: upper-alpha)
OL OL L I (list-style: upper-roman)
OL OL OL L I {list-style: lower-alpha)
OL OL OL OL L I {list-style: decimal)

De acuerdo con la hoja de estilo del ejemplo, cuando el navegador encuentra una etiqueta <1 i >
anidada dentro de una etiqueta <ol>, utiliza el valor upper-a1 pha de la propiedad 1 i st-sty1 e
de la etiqueta <1 i >. Cuando detecta una etiqueta <l i > anidada dentro de dos etiquetas <ol>,
utiliza el estilo upper-roman 1 i st-sty1 e. h i d e una etiqueta <l i>dentro de tres o cuatro
etiquetas <ol > y verl que se utilizan 1 ower-a1 pha y decimal 1 i st-sty1 e, respectivamente.
De forma similar, puede imponer un estilo especifico e n etiquetas relacionadas s61o por
contexto. Por ejemplo, esta definici6n de estilo contextual asigna color rojo a1 enfasis (<em>)
del contenido de la etiqueta s610 cuando aparece dentro de una etiqueta de encabezado de
nivel uno, y n o e n alguna otra parte del documento:
H 1 EM {color: red)
Si existe alguna ambigiiedad potencial entre dos estilos contextuales, prevalece el mls
especifico. Como con las etiquetas individuales, tambien puede tener varios selectores
contextuales mezclados con selectores individuales, separados entre si con comas, compar-
tiendo la misma lista de declaraciones de estilo. Por ejemplo,
H 1 EM. P STRONG, ADDRESS {color: red)
significa que se asignarl el color rojo dondequiera que apawzca la etiqueta <em>dentro de
una etiqueta <hl>, o cuando la etiqueta <strong> aparezca dentro de una etiqueta <p>, y
para el contenido de la etiqueta <address>.
No es necesario que la anidaci6n sea exacta para satisfacer la regla. Por ejemplo, si anida la
etiqueta <strong> dentro de una etiqueta <ul> dentro de una etiqueta <p> a su vez, todavia
satisface la regla para P STRONG que definimos antes. Si una anidaci6n e n particular satisface
varias reglas de estilo, se utiliza la regla mls especifica. Por ejemplo, si define dos selectores
contextuales:
P STRONG {color: red)
P UL STRONG {color: blue)
262 Capftulo9: Hojas de estib en cascada

y utiliza la secuencia <p><ul><strong> e n su documento, se aplicari la segunda regla, la

m i s especifica, que asigna un color azul a1 contenido de la etiqueta <strong>.
Los selectores contextuales son soportados por Navigator 4.0, pero no por Internet Explorer
3.0. De hecho, este dltimo considera 10s selectores contextuales como un error e ignora
cualquier definici6n d e estilo siguiente.

7.2.4 Clases de estilo

Existe una caracteristica mi% de las hojas de estilo que alin no hemos mendonado: las clases. Las
clases le permiten mar, en una hoja de estilo a nivel del documento o en una hoja de estilo extema,
varios estilos para una sola etiqueta, disringuiendo cada una por medio de un nombre de clase. Para
aplicar la clase del estilo, usted le da el nombre del valor del atributo class de la etiqueta.

9.2.4.1 Clases regulares

En un documento tCcnico, tal vez quiera definir un estilo de plrrafo para el resumen, otro
para ecuaciones y un tercero para citas textuales centradas. Ninguna de las etiquetas de
pirrafo puede tener un context0 explicito e n el documento de HTML de mod0 que pudiera
distinguirla de las otras. En realidad, usted puede definir cada una como una clase d e estilo:
<sty1 e>
<!--
P.resumen {font-style: italic;
left-margin: 0.5cm;
right-margin: O.5cm)
P.equacion {font .family: Symbol ;
text-a1 ig: center)
H1, P.centrado {text-a1 ign: center;
left-margin: 0.5cm;
right-margin: 0.5cm)
- ->
Observe primero e n el ejemplo que la definici6n de una clase es s61o cuesti6n d e poner
como sufijo el nombre de la clase separado por un punto del nombre de la etiqueta e n una
regla de estilo. El nombre de la clase puede ser cualquier secuencia de letras, nlimeros y
guiones, pero siempre debe comenzar con una letra.* Y las clases, como todos 10s selectores,
pueden estar incluidas con otros selectores, separbdolas con comas, como e n el tercer
ejemplo. La 6nica restricci6n e n las clases e s q u e n o pueden estar anidadas:
P . ecuaci on. centrado no esti permitida, por poner un ejemplo.
Por consiguiente, la primera regla en el ejemplo crea una clase de estilo de plrrafo llamada
"resumen", cuyo texto estarl e n letras cursivas y tendrl una sangria a 10s mlrgenes izquierdo

Debido a su soporte de las hojas de estilo de Jawscript, Navigator no puede manejar nombres de clases que
lleguen a coincidir con palabras clave de JavaScript.Por ejemplo, la clase "resumen"genera un error en Netscape.
9.2 Sintaxis para estllos 263

y derecho d e medio centimetro. De manera similar, la clase de estilo del segundo pzirrafo,
" e c u a c i on", instruye a1 navegador para que centre el texto, el cual muestra e n el tip0 de
letra Symbol. La dltima regla crea un estilo con texto centrado y mirgenes de medio centi-
metro que se aplican a todos 10s encabezados d e nivel uno a1 tiempo que con ese estilo una
clase d e la etiqueta <p>, llamada c e n t r a d o .

Para utilizar una clase de etiqueta especifica puede agregarle el atributo c l a s s , como en el
siguiente ejemplo:
<p c l ass=resumen>
Este es un p a r r a f o abstracto. Observe c6mo 10s margenes se indentan
</P>
<h3>sigue e l p a r r a f o para equaciones</h3>
<p c l ass=ecuacion>
a = b + l
<IPS
<p c l ass=centrado>
E l t e x t o de este p i r r a f o debe e s t a r centrado.
<IPS
Para cada pirrafo, el valor del atributo c l a s s es el nombre de la clase que utilizari esa
etiqueta.

TambiCn puede definir una clase sin asociarla con una etiqueta e n particular y, despuCs,
aplicarla d e forma selectiva e n sus documentos con diferentes etiquetas. Por ejernplo,
.cursiva { f o n t - s t y l e : italic)

crea una clase genCrica llarnada c u r s i v a . Para utilizarla, s610 incluya su nombre en el
atributo c l a s s . Asi, por ejemplo, asigne <p c l a s s = c u r s i va> o < p r e c l a s s = c u r s i va> para
crear un pirrafo con letras itilicas o un bloque de texto con un formato previo.
Las clases genericas son bastante pricticas y facilitan aplicar un estilo a diferentes etiquetas.
Actualmente, s610 Navigator 4.0 soporta las clases genericas.

9.2.4.3 Seudoclases de estilo

Ademis de las clases de estilo convencionales, el estindar de CSS define seudoclases,
aunque ningdn navegador las utiliza todavia. Son la manera e n que usted define el estilo de
desplegado para ciertos estados de clase. Las seudoclases son como las clases comunes, con
dos notables diferencias: estin unidas a1 nombre de la etiqueta con un signo d e dos puntos
e n lugar de un solo punto, y tienen nombres predefinidos, no denominaciones arbitrarias
que usted puede asignar.
Existen cinco seudoclases; tres asociadas con la etiqueta <a> y dos con la etiqueta <p>.
264 Cap* 9: Hojas de estib en cascada

Los navegadores distinguen tres estados especiales para las ligas creadas con la etiqueta
<a>: no visitada, e n proceso d e visita y visitada. El navegador puede cambiar la apariencia
del contenido d e la etiqueta para indicar su estado, ya sea subrayando o cambiando su
color. A travCs d e las seudoclases, puede controlar c6mo serl el formato d e 10s tres estados
definiendo estilos para A: 1 i nk, A: act ive y A: v i s it ed. La seudoclase 1 i n k controla la
apariencia de las ligas no seleccionadas por el usuario y que adn no han sido visitadas. La
seudoclase act ive define la apariencia d e las ligas seleccionadas actualmente por el usuario
y que el navegador estl procesando. La seudoclase v i s i t e d define las ligas que ya ha
visitado el usuario.
Para definir 10s tres estados d e la etiqueta <a> debe escribir
A: 1 i n k ( c o l o r : b l u e }
A: a c t i v e ( c o l o r : r e d ; f o n t - w e i g h t : bold)
A: v i s i t e d { c o l o r : g r e e n )

Las ligas no visitadas aparecerln en color azul. Cuando el usuario haga clic e n una liga, el
navegador le cambiarl el color a rojo y lo pondrl en negritas. Cuando finaliza la visita, la
liga se torna verde, normal, no e n negritas.
Las otras dos seudoclases se utilizan con la etiqueta <p>, y se denominan f i r s t - 1 e t t e r y
-
f ir s t 1 i ne. Como puede esperar, controlan la apariencia d e la primera letra Vint letter) y
d e la primera linea y i n t line) d e un pirrafo, respectivamente, y crean efectos similares a1 d e
10s medios impresos, como letras capitales (capitulares) y primeras lineas en negritas. Por
ejemplo:
P: f i r s t - 1 i n e ( f o n t - s t y l e : small-caps)

convierte la primera linea d e un pirrafo a letras versalitas. De manera similar,

P: f i r s t - l e t t e r (font-size: 200%; f l o a t : l e f t }

le indica a1 navegador que la primera letra d e un plrrafo debe ser dos veces m b grande con
respecto a1 resto del texto y que destaque (flote) la letra a la izquierda, permitiendo que las
primeras dos lineas del piirrafo se acomoden e n seguida d e la letra inicial mls grande
(capitular).*

Puede combinar seudoclases con clases comunes afiadiendo el nombre d e la seudoclase a1

nombre d e clase del selector. Por ejemplo, aqui mostramos algunas reglas que definen
anclas simples, normales y elaboradas:

'Las propiedades que pueden especificarse para las seudoclases f i r s t - 1 e t t e r y f ir s t - 1 i ne son propiedades
de hente, de color y de fondo, text-decoration, v e r t i c a l -a1 ign, text-transform, 1ine-height y c l e a r .
Adernk, la seudoclase f ir s t - 1 e t t e r acepta las propiedades de rnargen, de relleno, de borde y f l o a t . La seudoclase
f i r s t - 1 i n e tarnbib acepta las propiedades word-spacing y letter-spacing.
 A.plain:link. A.plain:active, A.plain:visited {color: blue)
A: 1 ink {color: blue)
A:visited {color: green)
A:acti ve {color: red)
A.fancy:l ink {text-style: italic)
A.fancy:vi si ted {text-sty1 e: normal )
A.fancy:active {text-weight: bold; font-size: 150%)
La versi6n p l a i n de <a> siempre esti en azul, sin importar el estado de la liga. Las ligas
normales comienzan en azul, se transforman en rojo cuando estan activas y se tornan verdes
cuando han sido visitadas. La liga fancy hereda el esquema de color de la etiqueta <a>
normal, pero agrega texto e n cursivas a las ligas no visitadas, regresQndolo a texto normal
despuCs de haber sido visitadas, y crece en un 50% de su tamaiio ademis de presentarse en
negritas cuando esti activa.
Una advertencia acerca de esta liltima propiedad de la clase fancy: la especificaci6n de un
carnbio de tamafio de fuente para una propiedad de exhibici6n transitoria provocari una
gran actividad de redibujado en el navegador cuando el usuario haga clic en la liga. Dado
que algunos navegadores se ejecutan en miquinas lentas, este proceso puede ser molesto
para 10s lectores. Debido tambien a que la implementaci6n de este tip0 d e carnbio de
desplegado a veces es un dolor de cabeza, es inverosimil que la mayoria de 10s navegadores
vayan a soportar cambios radicales de aspect0 en las seudoclases de la etiqueta <a>.

9.2.4.5 Herencia de clases

Las clases heredan las propiedades de estilo de sus etiquetas base genericas. Por ejemplo,
todas las propiedades de la etiqueta <p> se aplican a una clase de pirrafo definida especial-
mente, except0 donde la clase invalida alguna propiedad especifica.
Las clases no pueden heredar de otras clases, s61o de la versi6n sin clase de la etiqueta que
representan. Por consiguiente, en general debe colocar tantos estilos comunes en la regla
para la versi6n bisica de una etiqueta y s610 crear clases para las propiedades linicas de esa
clase. Esto facilita el mantenimiento y el intercambio de clases de estilos, en especial para
las grandes colecciones d e documentos.

9.3 Propiedudes de estilo

En el coraz6n de la especificaci6n de las hojas de estilo en cascada (CSS) hay 53 propieda-
des que permiten controlar la forma en que el navegador capaz de interpretar estilos pre-
senta 10s documentos a1 usuario. El estindar agrupa estas propiedades en seis grupos:
fuentes, colores y fondos, texto, cuadros y diseiio, listas y clasificaci6n de etiquetas. Noso-
tros estudiaremos esta taxonomia y abarcaremos el asunto con una explicaci6n d e valores
de propiedad y herencia antes de abordar las propiedades mismas.
EncontrarQ un resumen de las propiedades de estilo en el apCndice C.
266 Capirub 9: Hojas de estilo en cascada

7.3.1 Valores de propiedad

Existen cinco clases de valores de propiedad: palabras clave, valores de longitud, de por-
centaje, URL y colores.

9.3.1.1 Valmes de propiedad de palabras clave

Una propiedad puede tener el valor keyword (palabra clave) que exprese acci6n o dimen-
si6n. Por ejemplo, 10s efectos underl ine (subrayado) y 1 i ne-through (tachado) son valo-
res de propiedad obvios. Puede expresar dimensiones de propiedad con palabras clave
como small (pequeiio) y xx-large (extralargo). Algunas palabras clave son incluso
relacionales: bolder (llamativo), por ejemplo, es un valor aceptable para la propiedad
font-wei ght (ancho de la fuente). Los valores de las palabras clave no son sensibles a las
letras maydsculas o mindsculas: Under1 ine, UNDERLINE y underl ine son valores acepta-
bles para palabras clave.

9.3.1.2 Valmes de propiedad de longitud

Los valores conocidos como de longitud, 1 ength (un termino tomado del estandar de CSS),
establecen de forma explicita el tamaiio de una propiedad. Son numeros, algunos incluso
con fracciones decimales. Los valores de longitud pueden tener 10s signos "+" o "-" a1
principio para indicar que el valor se ha sumado o restado del valor inmediato de la propie-
dad. Los valores de longitud deben ir seguidos por una abreviatura de unidad de dos letras,
sin espacios.

Existen tres tipos de unidades de valor de longitud: relativa, pixeles y absoluta. Las unidades
relativas especifican un tamafio relativo a1 tamaiio de alguna otra propiedad del contenido.
Actualmente existen s610 dos unidades relativas: em, que especifica la altura de la fuente en
uso (descrita como em), y altura de x, x-height, que define la altura de la letra "x" en la
fuente e n uso (abreviada, ex). La unidad de pixeles, abreviada con px, es igual a1 tamafio de
un pixel en la pantalla del navegador. Las unidades de valor de propiedad absoluta son mas
conocidas. Incluyen pulgadas (in), centimetros (cm), milimetros (mn), puntos ( p t , 1/72 de
una pulgada) y picas (pc, igual a doce puntos).

Todos 10s valores de longitud siguientes son validos, aunque no todas las unidades son
reconocidas por 10s navegadores capaces de interpretar estilos:
9.3.1.3 Valores de propiedad de porcentaje
De manera similar a1 valor de longitud relativo, un valor de porcentaje describe una proporci6n
relativa a algun otro elemento del contenido. Tiene un signo opcional y una parte decimal para
su valor numkrico, y debe tener el signo de porcentaje (%) como sufijo. Por ejemplo,
1 ine-height: 120%
calcula la separaci6n entre lineas como el 120 por ciento de la altura en uso de la linea
(generalmente relativa a la altura de la fuente del texto). Sin embargo, observe que este
valor no es dinimico: 10s cambios hechos a la altura de la fuente despuks de que el navegador
procesa la regla no afecta la altura de la linea ya calculada.

7.3.1.4 Valores de propiedad de URL

Algunas propiedades tambikn aceptan, si no es que esperan, un URL como valor. La sintaxis
para utilizar un URL en una propiedad de estilo varia del HTML convencional:
url (servicio: llservidor. comlruta)
Es necesario la palabra clave url , asi como 10s parkntesis. No deje n i n g h espacio entre url
y el parkntesis de apertura. El valor url puede contener un URL absoluto o relativo. Sin
embargo, observe que el URL es relativo a1 URL de la hoja de estilo inmediata, la tinica en
la que est4 declarado. Esto significa que si utiliza un valor url en un estilo a nivel del
documento o integrado, el URL es relativo a1 documento de HTML que contiene el docu-
mento de estilo. De otro modo, el URL es relativo a1 de la hoja de estilo externa Qimportada
o ligada cargada mediante la etiqueta <l ink>.

9.3.1.5 Valores de propiedad de color

Los valores de color especifican 10s colores en una propiedad (quk raro.. .). Puede especifi-
car un color con un nombre o con una tripleta RGB hexadecimal, como lo hemos hecho
para atributos comunes de HTML, o como una tripleta RGB decimal unica para propiedades
de estilo. Puede consultar tanto 10s nombres de color como la notaci6n de tripletas RGB
hexadecimales en el apendice F. A continuaci6n explicamos las tripletas decimales.
A diferencia del HTML normal, las hojas de estilo aceptan valores de color hexadecimales de
tres digitos. Los digitos se clonan para crear una tripleta convencional de seis digitos. Asi, el
color #78C es equivalente a1 #7788CC.En general, 10s valores d e color de tres digitos son
prPcticos para colores sencillos.
La notaci6n de tripleta RGB decimal es un poco diferente:
rgb(red, green, bl ue)
Los valores d e intensidad red, green y blue son enteros en el rango de cero a 255, o
porcentajes de enteros. Como con el valor de URL, no deje ningtin espacio entre rgb y 10s
parkntesis de apertura.
268 Capfncb 9: H d a s de e s t i b en cascada

Por ejemplo, en la convenci6n RGB decimal, el blanco es rgb(255, 255, 255) o rgb(100%,
loo%, 100%) ; un amarillo medio es rgb (127, 127, 0) o rgb(50%, 50%, 0%).
En la actualidad, ningdn navegador soporta la notaci6n rgb para valores de color. Debe
emplear tripletas hexadecimales o nombres de color en sus hojas de estilo.

9.3.2 Herencia de propiedades

En lugar d e una regla especifica para una etiqueta en particular, las propiedades y sus
valores para etiquetas dentro de etiquetas se heredan de la etiqueta madre. De este
modo, si establece una propiedad para la etiqueta <body>, aplica esa propiedad a toda
etiqueta contenida en el cuerpo del documento, except0 e n aquellas que especificamente
la invaliden. Asi, para hacer que todo el texto e n su documento sea d e color azul, s61o
debe teclear:
BODY { c o l o r : b l u e )

en vez de crear una regla para todas las etiquetas que utilice en el documento.
Esta herencia se extiende a cualquier nivel. Si despues se crea una etiqueta <div> con
texto e n color diferente, el navegador capaz d e manejar estilos mostrarii todo el conteni-
d o del texto d e la etiqueta <di v> y de todas las etiquetas que contenga e n ese nuevo
color. Cuando la etiqueta <di v> finaliza, el color vuelve a1 d e la etiqueta <body> que la
contiene.
En muchas de las descripciones de propiedad siguientes, nos referiremos a la etiqueta que
contiene a la etiqueta actual como el "elemento padre".

9.3.3 Propiedudes defuentes

La queja mls sonada que hemos escuchado contra HTML es que carece de 10s estilos y
caracteristicas de fuentes que poseen aun 10s mls sencillos editores de texto. Los diferentes
atributos de <font> soportados por ,los navegadores mls populares resuelven parte del
problema pero son dificiles de utilizar, puesto que cada cambio para la fuente necesita una
etiqueta <font> diferente.
Por supuesto, las hojas de estilo mejoran esto. El estiindar de CSS proporciona seis propie-
dades para fuentes que modifican el aspect0 del texto contenido dentro de la etiqueta
afectada: font-fami ly, font-height, font-size, font-style (estilo de fuente), font-
vari ant (variaci6n de fuente), font-weight (ancho de fuente). Ademls, hay una propie-
dad font universal que le permite declarar todos 10s cambios hechos a la fuente con una
sola propiedad.
Por favor, sea consciente de que las hojas de estilo no pueden superar las limitaciones del
sistema cliente, ni el navegador puede conjurar 10s efectos si las fuentes que usa n o propor-
cionan 10s medios.
9.3.3.1 Propierladfont-family
La propiedad font-fami 1y (familia de fuente) acepta una lista d e nombres d e fuente, sepa-
rados por comas; una d e Cstas sera seleccionada por el navegador que puede interpretar
estilos para mostrar el texto d e la etiqueta. El navegador utiliza la primera fuente menciona-
da e n la lista que, a su vez, esti instalada y disponible en la miiquina cliente.
Los valores d e nombre d e fuente son para estilos de fuentes especificos, como Helvetica o
Courier, o un estilo d e fuente generic0 como 10s definidos por el estiindar d e CSS: serif,
sans-serif, cursive, fantasy y monospace. Cada navegador define el nombre de la
fuente que puede utilizarse para cada fuente genCrica. Por ejemplo, Courier es la elecci6n
miis popular para una fuente monoespaciada.
Puesto que las fuentes varian de gran forma entre 10s navegadores, cuando especifica un
estilo de fuente debe proporcionar siempre distintas opciones, finalizando con una fuente
generica conveniente. Por ejemplo,
H1 { f o n t - f a m i l y : H e l v e t i c a . Univers, s a n s - s e r i f )

hace que el navegador busque y utilice la fuente Helvetica y despues Univers. Si no e s u n

disponibles, emplea el tip0 de letra sans-senif(sin patines) genCrico.
Encierre entre comillas 10s nombres d e fuente que tengan espacios (como New Century
Schoolbook). Por ejemplo:
P {font-family: Times, "New Century Schoolbook". P a l a t i n o , s e r i f ]

Esas comillas e n una regla d e estilo integrado ocasionan problemas. En consecuencia, em-
plee ap6strofos (comillas simples) e n un estilo integrado:
<p s t y l e = " f o n t - f a m i l y : Times, "New Century Schoolbook', P a l a t i n o , s e r i f u >

En la pdctica, no necesita usar las comillas: el navegador ignora 10s espacios antes y despuCs
del nombre de la fuente y convierte 10s espacios internos en un espacio sencillo. De este modo,
P { f o n t - f a m i l y : Times. New Century Schoolbook, P a l a t i n o , s e r i f )
<p s t y l e = " f o n t - f a m i l y : Times. New Century Schoolbook. P a l a t i n o , s e r i f m >

son, ambas, legales, per0 sugerimos que emplee las comillas d e cualquier modo, por si las
cosas cambian.

9.3.3.2 Propiedadfmt-size
La propiedad font-size le permite determinar valores d e longitud absolutos o wlativos,
porcentajes y palabras clave para definir el tamaiio d e la fuente. Por ejemplo:
P {font-size: 12pt)
P { f o n t - s i z e : 120%)
P (font-size: +2pt)
P { f o n t - s i z e : medium)
P {font-size: larger)
270 CapIhrlo 9: Hojas de estllo en cascada

La primera regla es quiz5 la mls utilizada porque es la m5s conocida: establece el tamafio d e
la fuente a un nlimero especifico de puntos (12, e n este ejemplo). La segunda regla del
ejemplo establece el tamafio d e la fuente un 20 por ciento mls grande que el tamafio de la
fuente del elemento padre. La tercera incrementa el tamafio d e la fuente e n dos puntos.
El cuarto ejemplo selecciona un tamafio predefinido por el navegador, identificado por la
palabra clave medi um. Las palabras clave vllidas de tamaiio absoluto son xx-smal 1 (extra
pequefia), x-smal 1 (muy pequefia), small (pequefia), medi um (mediana), 1arge (grande),
x-1 a r g e (muy grande) y xx-1 a r g e (extra grande), y corresponden por lo general a 10s siete
tamafios de fuente utilizados con el atributo s i z e de la etiqueta <font>.
La dltima regla selecciona el siguiente tamafio mls grande que la fuente asocia con el
elemento padre. De esta forma, si el tamafio fuera normalmente medi um, cambiaria a 1arge.
Tambien puede especificar small e r , con 10s resultados obvios.
Las palabras clave d e tamafio absoluto y relativo no las soporta ninglin navegador e n la
actualidad.

9.3.3.3 Propiedadfont-style
Utilice la propiedad f o n t - s t y 1e para inclinar el texto. El estilo predeterminado es normal,
per0 puede cambiarlo a i t a l i c u obl i que. Por ejemplo,
HZ (font-style: italic)

pone el texto d e todos 10s encabezados d e nivel dos en cursivas. A1 momento d e escribir
esto, Navigator 4 e Internet Explorer 3 soportaban s610 el valor i t a l i c para font-sty1 e.

9.3.34 Pmpiedad font-variant

La propiedad f o n t - v a r i a n t le permite seleccionar una variante de la fuente deseada. El
valor predeterminado d e esta propiedad es normal, indicando la versi6n convencional d e la
fuente. Puede especificar smal 1-caps (versalitas) para seleccionar una versi6n d e la fuente
donde las letras mindsculas son remplazadas por versalitas.
Esta propiedad no la soporta navegador alguno.

9.3.3.5 Pmpiedadfont-weight
La propiedad font-weight controla el grosor o peso de la fuente. Su valor predeterminado
es normal. Puede especificar bold para obtener una versi6n e n negritas d e la fuente, o
utilizar 10s valores relativos bolder (grueso) y 1 ig t h e r (claro) para obtener una versi6n m l s
oscura o m5s clara que la fuente del elemento padre.
Para especificar diferentes niveles de tono, establezca el valor en un mliltiplo d e 100, entre
100 (el m5s claro) y 900 (el m5s oscuro). El valor 400 es igual a la versi6n normal d e la
fuente; 700 equivale a especificar bold.
Navigator 4 e Internet Explorer 3 soportan 10s valores normal y bold. Ninguno soporta 10s
valores 1 i g t h e r ni bolder. Navigator soporta 10s valores numkricos para negritas; Internet
Explorer no.
Internet Explorer 3 soporta una serie de nombres para 10s tonos "tradicionales"tornados de
la tipografia clbica. Estos nombres son e x t ra-1 ight (extra claro), 1 i g h t (claro), demi 1 i g h t
(semiclaro), medi urn (medio), demi - bol d (semioscuro), bol d (oscuro) y e x t r a - bol d
(extraoscuro). Estos nombres se utilizaron en un borrador inicial del est4ndar de CSS pero se
descartaron del est4ndar final. No 10s recomendamos; espere que Internet Explorer deje de
soportarlos en algdn momento (algo malo en realidad).

9.3.3.6 Propiedadfont
Con m4s frecuencia de lo que Cree, especificari mls de una propiedad relacionada con
fuentes para exhibir el texto de una etiqueta. Una especificaci6n de fuente completa puede
llegar a ser algo dificil de manejar; por ejemplo:
P {font-fami l y : Times. Garamond, s e r i f ;
font-weight: bold;
f o n t - s i z e : 12pt;
1 ine-height: 14pt)

Para mitigar esta penosa y casi ilegible definici611, utilice la comprensiva propiedad f o n t y
agrupe todos esos atributos en un conjunto de instrucciones:
P { f o n t : bold 12pt/14pt Times, Garamond, s e r i f )

Agrupar y ordenar atributos de fuente es importante en la propiedad f o n t . Los atributos de

estilo, grosor y variante deben especificarse primero, seguidos del tamaiio e interlineado,
separados por una diagonal, y a1 dltimo la lista de las familias de fuentes. De todas las
propiedades, el tamaiio y la familia son indispensables; las d e m k pueden omitirse. [pro-
piedad I ine-hei ght, 9.3.5.21
Aqui presentamos algunas muestras m4s de propiedades para f o n t :
EM { f o n t : i t a l i c 14pt Times)
H1 { f o n t : 900 24pt/48pt sans-seri f )
CODE { f o n t : 12pt Courier, monospace)

El primer ejemplo le comunica al navegador capaz de interpretar estilos que ponga el texto
de < e m empleando un tip0 Times en cursivas de 14 puntos. La segunda regla pone el
texto de <hl> en la fuente sans-senyde 24 puntos m9s oscura disponible, con un espacio de
24 puntos para el interlineado. Por hltimo, el texto de la etiqueta <code> debe ir en Courier
de 12 puntos, o en la fuente monoespaciada definida por el navegador.
Dejamos a su imaginaci6n 10s ejemplos de 10s abusos que puede cometer con 10s estilos de
fuentes. iLe seria dtil un ejemplar reciente de la revista Wired, notoria por sus fuentes
de vanguardia y otros abusos relacionados con la impresi6n para esta observaci6n?
9.3.4 Propiedudes de color y fondo
Todos 10s elementos de su documento tienen un color de primer plano y uno d e fondo que
el navegador utiliza para presentarlos. En algunos casos, el fondo no es un color sino una
imagen. Las propiedades de color y fondo controlan estos colores e imageries.
El hijo de un elemento de HTML comdnmente hereda el color de fondo de sus padres. Por
ejemplo, si define como rojo el texto d e <body>, el navegador tambiCn mostrad el encabe-
zado y el texto del p4rrafo e n rojo.
Sin embargo, las propiedades del fondo se comportan de forma diferente: no son hereda-
das. En su lugar, cada elemento tiene un fondo transparente predeterminado, lo que permite
que el fondo del padre se muestre a traves de el. Asi, si establece una imagen de fondo para
la etiqueta <body>, n o h a d que la imagen vuelva a cargarse para cada elemento dentro
d e la etiqueta del cuerpo (<body>). En lugar de esto, el navegador carga la imagen una vez
y la despliega detr4s del resto del documento, sirviendo como fondo para todos 10s elemen-
tos que no tengan un color o imagen de fondo explicitos.

9.3.4.1 Propiedad background-attachment

Si especifica una imagen de fondo (background) para un elemento, emplee la propiedad
bac kground-at tachrnent para controlar c6mo se vincula con la ventana del navegador. Con
el valor predeterminado s c r o l l , el navegador mueve la imagen de fondo junto con el
elemento conforme el usuario se desplaza a travCs del documento. El valor f i x e d evita que
la imagen se mueva.
Internet Explorer 3 no soporta esta propiedad de estilo de manera explicita, pero la emula
para la etiqueta < b o d y con el atributo bgproperti es=f ixed. [atributobgproperties, 5.3.1.31

9.3.4.2 Propiedad background-cobr

La propiedad background-color controla (jadivind!) el color de fondo d e un elemento.
Puede establecerlo a un valor de color o a la palabra clave t r a n s p a r e n t , que es el valor
predeterminado. Los efectos deben serle obvios.
Aunque puede personalizar la configuracidn del color de fondo de un documento por
medio de 10s atributos especiales d e la etiqueta <body>, puede aplicar la propiedad d e estilo
background-col o r a cualquier elemento d e HTML. Por ejemplo, para poner el color de
fondo de un elemento e n una lista con vifietas utilice:

De manera similar, todos 10s encabezados de una tabla podrian dar un efecto de video
inverso con:
TH (background-color: black; color: w h i t e )
Si en realidad desea que su texto sobresalga, pruebe con su color de fondo en rojo:
EM {background-col or: red)
Internet Explorer 3 no soporta esta propiedad de manera explicita, pero puede conseguir el
mismo efecto con el soporte de la propiedad general background, como explicamos en
9.3.4.6.

9.3.4.3 P m p i e k d background-image
La propiedad background-image coloca una imagen detr5s del contenido de un elemento
de HTML. Su valor es un URL o la palabra clave none. El valor predeterminado es none.
Como con 10s colores de fondo puede colocar una imagen para todo el documento o s61o
para ciertos elementos. Con esta propiedad de estilo, efectos como colocar una imagen
detds de una tabla o texto seleccionado son ahora m5s sencillos:
ctabl e sty1 e="background-image: url (fondos/corteza.gl f) '>
L I .marmol {background-image: url (fondos/marmol .gi f) )

El primer ejemplo utiliza un estilo integrado para colocar una imagen tip0 madera detrls
de una tabla. El segundo define una clase de elementos de lista que coloca un fondo de
mlrmol despuCs de la etiqueta el i> que emplea el atributo cl ass=marmol . Por ejemplo:
ch2>MenG para la cena: c/h2>
cul>
cl i cl ass=marmol >Hfgado encebol 1 ado
cli class=marmol>Pure de papas con gravy
4 i cl ass=marmol >Ensal ada de chfcharos
4 i class=marmol>A elegir: chocolate, te o cafe
c/u1>
ch2>y de postre: c/h2>
cu1>
4 i >Kuats con crema (del i ci oso)

produce el resultado de la figura 9-1.

Si la imagen es mls grande que el elemento que la contiene, se ajusta a1 Prea de Cste. Si es
mls pequeiia, se repite para cubrir como mosaic0 el lrea ocupada por el elemento, como
dicta el valor del atributo background-repeat.
Usted controla la posici6n de la imagen dentro del elemento con la propiedad background-
position. El comportamiento desplazable de la imagen se maneja con la propiedad back-
ground-attachment.
Aunque puede parecer que un color y una imagen de fondo se excluyen mutuamente, por
lo comlin puede definir un color de fondo incluso si utiliza tambiCn una imagen. De esta
manera, si la imagen no e s d disponible, como cuando el usuario no descarga o baja imlge-
2 74 Capttub 9:Hojas de estUo en cascada

-
Menti para la cena:

Pure de papas con gavy

Ensalada cle c l i c h a u s

y de postre:
Kuats con crema (delicioso)

Figura 9-1.ffbicacldnde una tmagen de fondo detrds de un elemento.

nes de forma automatics, el navegador muestra en su lugar el color de fondo. Ademis, si la

imagen tiene Areas transparentes, el color de fondo las ocupa.
Internet Explorer 3 no soporta la propiedad background-image de manera explicita, pero puede
obtener el mismo efecto mediante la propiedad general background, como veremos en 9.3.4.6.

9.3.4.4 Propiedad background-position

De mod0 predeterminado, el navegador apt0 para interpretar estilos muestra una imagen de
fondo comenzando por la esquina superior izquierda del area d e desplegado asignada, y la
repite como mosaic0 (si es necesario) hacia la esquina inferior derecha d e esa misma area.
Con la propiedad background-posi tion (posici6n de fondo) puede desplazar la posici6n
de inicio de la imagen hacia abajo y a la derecha de ese punto predeterminado mediante un
desplazamiento absoluto (en longitud) o relativo (en porcentaje o palabra clave). La imagen
resultante llena el area desde ese punto de inicio desplazado hacia la esquina inferior
derecha del espacio d e desplegado en la pantalla.
Puede especificar uno o dos valores para la propiedad background-posi tion. Si utiliza un
valor simple, se aplica tanto a la posici6n vertical como a la horizontal. Con h s valores, el
primero es el desplazamiento horizontal; el segundo el vertical.
Los valores de longitud (con sus unidades apropiadas; consulte 9.3.1.2) indican una distan-
cia absoluta desde la esquina superior izquierda del elemento detds del cual se muestra la
imagen d e fondo. Por ejemplo,
TABLE (background-image: url (fondos/marmol .gif);
background-posi tion: lOpx 20px)
desplaza el fondo d e m5rmol 10 pixeles a la derecha y 20 hacia abajo desde la esquina
superior izquierda de cualquier elemento <tab1 e> en el documento.
9.3 ~ r o p k d a d e sde e s t f b 2 75

Los valores de porcentajes son un poco engaiiosos, pero algo mas faciles de utilizar. Medido
de cero a cien por ciento d e izquierda a derecha y d e arriba abajo, el centro del espacio
donde aparece el contenido del elemento de HTML se encuentra en 50%, 50%. De manera
similar, la posici6n d e un tercio del espacio a travCs del area y dos tercios hacia abajo se
encuentra e n 33%,66%.Asi, para desplazar el fondo de nuestro menti de alimentos hacia el
centro del espacio d e exhibicibn, utilizamos:
background-posi ti on: 50% 50%
ObservarA que el navegador coloca el primer mosaic0 marmol.gifen el centro del Area de
desplegado del contenido y lo repite hacia la derecha y hacia abajo de la ventana, como se
ve e n la figura 9-2.

1 en" para fa m a : -
Hfgado encebollado
Pure de papas con grm-y
Eihsalada de chicharas
A elegir: chocolate, te o cafe

y de postre:
Kuats con cretna (delicioso)

Figura 9-2.Fondo de mdrmol desplazado a1 centro del drea & desplegado.

Pero, ipor que emplear un nlimero cuando puede hacerlo con una simple palabra? Puede
utilizar las palabras clave l e f t , center y right, asi como top, center y botton, para 096,
50% y 10096, respectivamente. Asi, para centrar una imagen e n el Area del contenido d e la
etiqueta, s61o debe escribir:
background-posi tion: center center
Puede mezclar y coincidir valores de longitud y porcentaje,' de mod0 que
background-position: lcm center
coloca la imagen un centimetro a la derecha del borde izquierdo de la etiqueta, centrada
verticalmente e n el lrea de la etiqueta.
Internet Explorer 3 n o soporta esta propiedad de CSS de manera explicita, pero puede
conseguir efectos similares con la propiedad general background (consulte 9.3.4.6).

' Es deck, si el navegador sopona las unidades de valor. Hasta ahora, Internet Explorer y Navigator soponan s610
un magro repertorio de unidades de longitud: pixeles y pomentajes.
276 Capitulo 9: Hdas de e s t h en cascadu

9.3.4.5 Propiedad backgrrncnd-repeat

Normalmente, el navegador repite como mosaico la imagen de fondo hacia abajo y a la
derecha para llenar el espacio asignado. Utilice la propiedad background-repeat para alte-
rar este comportamiento de "repetici6n" (el valor predeterminado). Para hacer que la ima-
gen se repita horizontal pero no verticalmente, utilice el valor repeat-x. Para lograr una
repetici6n s61o vertical, utilice repeat-y. Y para eliminar el mosaico por complete, utilice
no-repeat.
Un uso comlin para esta propiedad es colocar una "marca (mancha) de agua" o logotipo en
el fondo de una piigina sin repetir la imagen una y otra vez. Por ejemplo:
BODY { background-image: u r l (fondos/marcagua.gi f ) ;
background-posi ti on: c e n t e r middle;
background-repeat: no-repeat
1
coloca la marca de agua como fondo a1 centro de la pagina.
Otro truco popular es crear un list6n vertical en el lado inferior derecho de la pagina:
BODY {background-image: u r l (fondos/l i s t o n . g i f) ;
background-position: t o p r i g h t ;
background-repeat:repeat-y
I
Internet Explorer 3 no soporta esta propiedad de manera explicita, pero puede conseguir
efectos similares con la propiedad background general, descrita en la siguiente secci6n.

9.3.4.6 Propiedad background

Como las diversas propiedades de fuentes, las propiedades de fondo de las hojas de estilo
en cascada pueden ser dificiles de escribir y de leer. De este modo, para la propiedad font
hay tambiCn una propiedad background general.
Esta propiedad acepta valores de cualquiera de las diferentes propiedades background-
color, background-image, background-attachment, background-repeat y back-
ground-posi t i on, en cualquier orden. Si no especifican valores para alguna de las pro-
piedades, esa propiedad sera explicitamente definida con su valor predeterminado. De
este modo,
background: r e d

establece la propiedad background-col or como rojo y restablece las otras propiedades de

fondo a sus valores predeterminados. Un ejemplo un poco mas complejo:
background: u r l (fondos/marmol . g i f) b l u e r e p e a t - y f i x e d c e n t e r

establece todas las propiedades de color e imagen de fondo a la vez, resultando una imagen
de marmol en la parte superior de un fondo azul (que tambiCn se ve a travks de cualquier
Qreatransparente). La irnagen se repite verticalrnente, a partir del centro del irea de desple-
gad0 para ese contenido, sin rnoverse cuando el usuario se desplaza por la pantalla. Obser-
ve que incluirnos s610 un valor de posici6n dnico (center) y que el navegador lo ernplea
tanto para las posiciones vertical corno horizontal.
Internet Explorer 3 s61o soporta la propiedad background, no acepta ninguna de las propie-
dades de fondo individuales. Por esta raz6n, tal vez desee utilizar la propiedad background
a fin de obtener una cornpatibilidad mls arnplia para sus propiedades de color e irnigenes
de fondo.

9.3.4.7 Propiedad color

La propiedad col or establece el color del primer plano para el contenido de una etiqueta
(el color de fuentes, por ejernplo). Su valor puede ser el nornbre del color, una tripleta RGB
hexadecimal o decimal, corno virnos en 9.3.1.5. De esta forrna, las siguientes son declaracie
nes validas de esta propiedad:
color: mauve
color: tff7bd5
color: rgb(255. 125. 213)
color: rgb(100%, 49%, 84%)
Generalrnente, utilizarQ la propiedad color con texto, pero tambitn puede rnodificar un
contenido distinto. Por poner un caso, el siguiente ejernplo produce una linea horizontal de
color verde:
HR {color: green)
Si no especifica el color para un elernento, tste hereda el color de su elernento padre.

9.3.5 Propiedades de texto

Las hojas de estilo en cascada distinguen entre las propiedades de fuente, que controlan el
tarnafio, estilo y apariencia o aspect0 del texto, y las propiedades de texto, que controlan
la forrna en que se alinea y se rnuestra el texto a1 usuario.

9.3.5.I Propiedad letter-spacing

La propiedad 1 et ter-spaci ng (espacio entre letras) coloca espacio adicional entre las letras
del texto conforrne se despliegan en el navegador. Establezca esta propiedad ya sea con un
valor de longitud o con la palabra clave normal, que es el valor predeterrninado, lo que
indica que el navegador debe aplicar espacio normal entre letras. Por ejernplo:
BLOCKQUOTE {letter-spacing: 2px)
agrega dos pixeles entre las letras de las palabras dentro de la etiqueta <bl ockquote>.
En la actualidad, ningdn navegador soporta esta propiedad.
278 Capfado9: Hofas de estib en cascada

9.35.2 Propiedud Une-height

Utilice la propiedad 1 ine-hei ght (interlineado) para determinar el espacio entre las lineas
del texto de una etiqueta. Comdnmente, 10s navegadores ponen el texto a espacio sencillo
(la parte superior de la linea siguiente estl s61o a pocos puntos por debajo de la dltima
Iinea). Al aumentar ese valor para la altura de linea (m5s conocida como leading o interli-
neado entre 10s tip6grafos), aumenta el espacio entre lineas.
El valor de 1ine-hei ght puede ser una longitud absoluta o relativa, un porcentaje, un factor
de escala o la palabra clave normal. Por ejemplo:
P (line-height: 14ptI
P ( 1 i n e - h e i g h t : 120%)
P ( 1 ine-heigth: 2.0)

El primer ejemplo establece la altura de linea a 14 puntos entre la base de las lineas de texto
adyacentes. El segundo calcula la altura de la linea a un 120 por ciento del tamaiio de la
fuente. El dltimo utiliza un factor de escala para establecer la altura de linea a1 doble del
tamaiio de la fuente, creando texto con un interlineado doble (a doble espacio). El valor
normal , el predeterminado, es por lo regular igual a un factor de escala de 3.0 a 1.2.
Recuerde que 10s valores absoluto y de porcentaje para 1 ine-hei ght calculan la altura de la
linea con base en el valor de la propiedad font-size. El valor de la propiedad lo heredan
10s hijos del elemento. Los cambios subsecuentes a font-si ze, ya sea por elementos padres
o hijos, no modifican el c5lculo de 1ine-height.
Por otra parte, 10s factores de escala difieren el cllculo del interlineado hasta que se desplie-
ga el texto. Por lo tanto, la variaci6n de font-size (el tamaiio de las fuentes) afecta a
1ine-hei ght (interlineado) s61o de manera local. En general, es mejor utilizar un factor de
escala para la propiedad 1ine-height, de mod0 que la altura de la linea cambie de forma
autom4tica cuando modifique el tamafio de la fuente.
Aunque por lo regular se considera desligado de las propiedades de fuente, puede incluir el
valor de la propiedad 1 ine-height relacionado con el texto como parte de la notaci6n
abreviada de la propiedad font. [propiedad font, 9.3.3.61
Internet Explorer 3 no soporta factores de escala y puede calcular un interlineado relativo
de forma incorrecta para un texto con diferentes tamaiios de fuente.

Justificar el texto con respecto a 10s mPrgenes de la plgina es una caracteristica rudimentaria
de casi todos 10s procesadores de texto. La propiedad text-a1 ign (alineaci6n de texto)
proporciona esta capacidad a HTML para cualquier etiqueta de nivel de bloque. Utilice uno
de 10s cuatro valores: l e f t , r i g h t , center o j u s t i f y . El valor predeterminado es, por
supuesto, 1e f t . Por ejemplo,
D I V ( t e x t - a 1 ign: r i g h t )
9.3 Propiedades de estZlo 279

le indica a1 navegador capaz de interpretar estilos que alinee todo el texto de las etiquetas
c d i v> con el margen derecho. El valor j u s t i f y indica a1 navegador que alinee el texto con
ambos mlrgenes, izquierdo y derecho, abriendo el espacio entre letras y palabras para que
se ajusten a esto.
Internet Explorer 3 no soporta el valor j u s t if y para esta propiedad.

9.3.5.4 Propiedad text-decoration

La propiedad t e x t - d e c o r a t i on (decoraci6n de texto) produce toda clase de adornos para
el texto, algunos tambien disponibles con las etiquetas de estilo fisico originales. Su valor es
una o mls de las palabras clave underl ine, o v e r l ine, 1 ine-through y bl i n k . El valor none
es el predeterminado; le indica a1 navegador capaz de interpretar estilos que presente el
texto de forma normal.
La propiedad t e x t - d e c o r a t i on es pdctica para definir ligas con distintas apariencias. Por
ejemplo,
A:vi si ted A:l ink A:active (text-decoration: underl ine overl ine)
coloca lineas encima y debajo de las ligas de su documento.
Esta propiedad de texto no se hereda, y 10s elementos diferentes de texto no se ven afecta-
dos por la propiedad t e x t - d e c o r a t i o n .
Internet Explorer soporta s610 10s valores underl ine y 1 ine-through como decoraci6n de
texto ( t e x t - d e c o r a t i on); Navigator no soporta el valor o v e r l ine.

9.35.5 Propiedud text-indent

Aunque es menos c o m h hoy en dia, abn es una pdctica frecuente sangrar la primera linea
de un plrrafo.' Y algunos bloques, como las definiciones, a menudo se "sangran hacia
afuera" de la primera linea, creando lo que se conoce como sangn'a colgante o francesa.
La propiedad t e x t - i ndent (texto sangrado) le permite aplicar estas caracteristicas a cual-
quier etiqueta de bloque y por medio de ella controlar la sangria de la primera linea. Utilice
valores de longitud y porcentaje; 10s valores negativos crean una sangria francesa. Los de
porcentaje calculan la sangria como un porcentaje a partir del ancho del elemento padre. El
valor predeterminado es cero.
Para sangrar todos 10s plrrafos de un documento, por ejemplo:
P (text-indent: 3em)
La unidad de longitud em escala la sangria conforme la fuente del pPrrafo cambia de tamaiio
en 10s diferentes navegadores.

' Pero no en este libro, corno podd haberse dado cuenta.

280 C a p f W 9: Hojas de estib en cascadu

Las sangrias francesas son un poco m9s engorrosas debido a que debe tomar e n cuenta 10s
bordes del elemento. La sangria negativa no desplaza el margen izquierdo del texto; s610
cone la primera linea a la izquierda del elemento, posiblemente dentro del margen, borde
o relleno del elemento padre. Por esta raz6n, las sangrias francesas s61o funcionan d e forma
adecuada si tambikn desplaza el margen izquierdo del elemento hacia la derecha por una
cantidad igual o mayor a1 tamaiio de la sangria francesa. Por ejemplo,
P.error (text-indent: -3em)
P.desp1 aza {text-indent: -3em; margin-left: 3 em)
P-largo {text-indent: -3em; margin-left: 6 em)
crea tres estilos de psrrafo. La primera linea crea una sangria francesa que se extiende
dentro del margen izquierdo. La segunda crea una sangria francesa convencional. La tercera
crea un pzirrafo cuyo cuerpo se encuentra mAs sangrado que la sangria francesa. Estos tres
estilos se muestran en la figura 9-3.

Efectos de sangrar texto respecto a1 margen trquterdo.

Figura 9-3.

9.3.1.6 Propiedad text-transfmm

La propiedad t e x t - t r a n s f o r m (cambiar texto) cambia el tamaiio de las letras del texto
dentro de una etiqueta. Los valores vzilidos para esta propiedad son c a p i t a l ize, uppercase,
1owercase y none, que es el valor predeterminado. c a p i t a l iz e garantiza que la primera
letra de cada palabra sea mayliscula; uppercase y lowercase afectan todas las letras del
texto.
Las reglas reales para conversi6n a mayfisculas empleadas por el navegador dependen de la
codificaci6n del carzicter y el lenguaje utilizado por el navegador,
Esta propiedad n o la soporta Internet Explorer 3. Navigator si; ahi, esta propiedad n o se
hereda a 10s elementos hijos, como lo prescribe el esandar de CSS.
9.3 Propiedades de es& 281

9.3.5.7 Propiedad verticaGa€ign

La propiedad v e r t i c a l -a1 ign (alineaa6n vertical) controla la posici6n relativa de un elemento
con respecto a la linea que lo contiene. Los valores vllidos para esta propiedad incluyen:

base1 i ne
alinea la linea base del elemento con la linea base del elemento que contiene
mi ddl e
alinea la parte media del elemento con la parte media (generalmente la altura d e x) del
elemento que lo contiene
sub
convierte e n subindice el elemento
super
convierte e n superindice el elemento
text-top
alinea la parte superior del elemento con la parte superior de la fuente del elemento padre
text-bottom
alinea la parte inferior del elemento con la parte inferior de la fuente del elemento padre

top
alinea la parte superior del elemento con la parte superior del elemento mls alto en la
linea actual
bottom
alinea la parte inferior del elemento con la parte inferior del elemento m l s bajo en la
linea actual

Ademls, un valor d e porcentaje indica una posici6n relativa a la linea base actual, d e mod0
que un valor del 50%coloca el elemento a la mitad de la altura sobre la linea base. Un valor
d e -100% sitda a1 elemento a una linea completa por debajo d e la linea actual.
Ningdn navegador soporta esta propiedad.

9.3.58 Propiedad word-spacing

Utilice la propiedad word-spaci ng (espacio entre palabras) para agregar espacio adicional
entre las palabras d e una etiqueta. Puede especificar un valor de longitud o la palabra clave
normal para volver a1 interespaciado de texto normal. Por ejemplo,
H3 {word-spacing; 25px)

coloca un espacio d e 25 pixeles adicionales entre las palabras e n la etiqueta <h3>.

Ningdn navegador soporta esta propiedad actualmente.
282 Gapthlo 9: Hojas de estilb en cascadu

9.3.6 Propiectades de cuadro

El modelo de CSS supone que 10s elementos de HTML siempre caben dentro d e un cuadro
rectangular. A1 utilizar las propiedades que definimos e n esta secci6n, puede conuolar el
tamafio, aspect0 y posici6n de 10s cuadros que contienen 10s elementos de sus documentos.

9.3.61 M o d e b dkformato rie CSS

Cada elemento en un documento de HTML puede caber en un cuadro rectangular. Los
autores de CSS denominan a este cuadro "iirea d e contenido del nlicleo" y la rodean con tres
cuadros adicionales: el relleno, el borde y el margen. La figura 9-4 ilustra estos cuadros y
define terminologla litil.

borde !“'* borde borde

exterior
exterior ~ntenor Interior
zuuierdo uuuisrdo derecho demcno

parle superior

relleno super'01
parle super101
I

I
I 1
"I
,
I I
intern
b I

0
I
,

Figura 9-4. Ef modefo deformato de CSS y su terminofogib.

Los bordes superior, inferior, externo izquierdo y externo derecho limitan el area de conte-
nido d e un elemento y todos sus espacios d e relleno, bordes y margenes. Los bordes
superior interno, inferior interno, izquierdo interno y derecho interno definen 10s lados del
area de contenido del nlicleo. El espacio adicional alrededor del elemento es el area entre
10s bordes interno y externo, incluyendo el relleno, el borde y el margen. Un navegador
puede omitir cualquiera d e estos espacios adicionales para cualquier elemento de HTML; y
para muchos, 10s bordes interno y externo son 10s mismos.
Cuando 10s elementos se encuentran adyacentes verticalmente, el margen inferior d e 10s
elementos superiores y el superior de 10s elementos inferiores se enciman, de mod0 que el
espacio total entre 10s elementos es el mayor d e 10s m5rgenes adyacentes. Por ejemplo, si
un phrafo tiene un margen inferior d e una pulgada y el siguiente parrafo tiene un margen
superior de media pulgada, el mayor d e 10s dos margenes, el d e una pulgada, se coloca
entre 10s dos parrafos. Esta practica se conoce corno colapso de margen y por lo general
resulta e n una mejor apariencia del documento.
Los elernentos horizontalrnente adyacentes no tienen traslape d e margenes. En vez d e ello,
el modelo d e CSS une 10s margenes horizontales adyacentes. Por ejemplo, si un parrafo
tiene un margen izquierdo d e una pulgada y es adyacente a una irnagen con un rnargen
derecho d e media pulgada, el espacio total entre 10s dos ser5 d e 1.5 pulgadas. Esta regla
tambien se aplica a 10s elementos anidados, de mod0 que un parrafo e n una divisi6n tendra
un margen izquierdo igual a la suma del margen izquierdo d e la division rnls el rnargen
izquierdo del pgrrafo.
Como ilustra la figura 9-4, el ancho total de un elernento es igual a la surna d e siete elemen-
tos: 10s margenes izquierdo y derecho, 10s bordes izquierdo y derecho, el relleno izquierdo
y derecho y el rnismo contenido del elemento. La surna d e estos siete elernentos debe ser
igual a1 ancho del elemento contenedor. De estos siete elementos, s610 tres (el ancho del
elernento y sus margenes izquierdo y derecho) se pueden establecer con el valor auto, lo
que indica que el navegador puede calcular un valor para esta propiedad. Cuando esto es
necesario, el navegador sigue estas reglas:

Si ninguna d e estas propiedades estl establecida e n auto y el ancho total es menor que
el ancho del elemento padre, la propiedad rnargi n - r i g h t se establece corno auto y el
margen derecho se hace tan amplio corno sea necesario para hacer el ancho total igual
a1 ancho del elemento padre
Si s6lo una propiedad esta establecida en auto, esa propiedad se hace tan amplia para
permitir que el ancho total sea igual a1 ancho del elernento padre
Si hay mas d e dos propiedades establecidas e n auto y una d e ellas e s d e tip0 width,
rnargi n-1 e f t y rnargi n - r i g h t se establecen corno cero y w i d t h s e hace lo suficien-
ternente arnplio para perrnitir que el ancho total sea igual a1 ancho del elemento
padre
Si 10s margenes izquierdo y derecho se ponen en auto, estaran siempre establecidos con
valores iguales, centrando el elernento dentro de su padre

Hay reglas especiales para elementos flotantes. Un elernento flotante (digamos una imagen
con una especificaci6n a1 ign=le f t ) no tiene sus margenes colapsados con 10s margenes de
10s elernentos contenedores o precedentes, a menos que tenga margenes negativos. Esto es
facil d e ver e n la figura 9-5, que muestra c6mo se despliega este segment0 de c6digo d e
HTML:
<body>
<PZ
<img a1 ign=l eft src="imagenes/imagen03.gi f ">
Algih texto de ejemplo ...
</body>
284 Gapftulo 9:Hojas de estilo en cascada

mamen del cuerpo (<BODY>)

-.
A ,--.--...-.--.---.-...--..--.--.---.--.---.---------------------
i 2i -ma- Texto de muestra que no tiene otro
proposito que mostrar c6mo 10s
-.: ; g:
:; Aementos flotantes se desplazan a1
t : A-O
lado del elemento padre mientras
E :si3, :
xiI xepta miirgenes, bordes y relleno.
3: s: Observe como 10s margenes
g : e1
g,* gL
yerticdes adyacentes estin colapsados entre
: a bos elementos no flotantes del 'bloque'.
E ' E

Figura 9-5.
Mantpulacidn de 10s rna'rgenes de elementosjlotantes.
El navegador mueve la imagen, incluyendo sus mlrgenes, a la izquierda tan lejos como sea
posible y hacia la parte superior del parrafo sin encimar 10s mlrgenes izquierdo y superior
del pirrafo o del cuerpo del documento. Los margenes izquierdos del plrrafo y del cuerpo
contenedor se agregan, mientras sus mlrgenes superiores se colapsan.

9.3.62 Propiedades rCe borrCe (border)

El borde que rodea a un elemento tiene un color, grosor y estilo. Puede utilizar varias
propiedades para controlar estos tres aspectos del borde en cada uno de 10s cuatro lados de
un elemento. Las propiedades de taquigrafia facilitan la definici6n del color, grosor y estilo
de todo el borde, si asi lo desea. Las propiedades del borde no se heredan; debe establecer-
las d e forma explicita para cada elemento que tenga un borde.
Desafortunadamente, Navigator ni Internet Explorer han integrado ninguna de las propieda-
des de borde adn.

9.3.6.3 Propiedad bordercolor

Utilice la propiedad border-col or para establecer el color del borde. Si no lo especifica, el
navegador dibuja el borde utilizando el valor d e la propiedad color del elemento.
La propiedad border-col or acepta de uno a cuatro valores de color. El nfimero de valores
determina c6mo se aplican a 10s bordes (ver resumen de la tabla 9-1). Si incluye s610 un
valor para la propiedad, 10s cuatro lados del borde utilizan el color especificado. Dos valo-
res establecen 10s bordes superior e inferior con el primer valor y 10s bordes izquierdo y
derecho con el segundo. Con tres valores, el primero corresponde a1 borde superior, el
segundo a 10s bordes derecho e izquierdo y el tercero a1 borde inferior. Cuatro valores
especifican 10s colores para cada borde, en el sentido de las agujas del reloj desde la parte
superior, seguido por el borde derecho, el inferior y a1 dltimo el borde izquierdo.
 Tabla 9-1. Orden de 10s efectospara diferentes valores depropiedad de borde, margen y relleno
I Nlimero de valores Bordds), margen(es) o relleno(s) afectadds)
1 Todos iguales.
2 El primer valor establece el lrea de a h b a y abajo; el segundo el
lrea izquierda y derecha.
El primer valor establece el area de a h b a ; el segundo establece las
areas izquierda y derecha; y tercero la de abajo.
4 El primer valor establece el area de a h b a ; el segundo la derecha;
el tercero la de abajo; y el cuarto establece el area izquierda.

9.3.64 Propiedad border-width

La propiedad border-wi d t h le permite modificar el ancho del borde. Al igual que la propie-
dad border-col o r , acepta de uno a cuatro valores que se aplican a 10s diversos bordes de
rnanera similar (tabla 9-1).
Ademas de una longitud especifica, puede determinar tambien el ancho de un borde con
una de las palabras clave t h in (delgado), rned iurn (mediano) o t h ic k (grueso). El valor
predeterminado, si no establece el ancho de manera explicita, es rnedi urn. Algunos anchos
de borde tipicos son:
border: lpx
border: t h i n t h i c k medium
border: t h i c k 2m

El primer ejemplo establece el ancho de 10s cuatro bordes a un pixel exactarnente. El

segundo establece el borde superior delgado (thin), 10s bordes derecho e izquierdo grue-
sos ( t h i ck) y el borde inferior rnedi urn. El Oltimo ejernplo hace 10s bordes superior e inferior
gruesos, y el derecho e izquierdo tendran 2 milimetros de ancho.
Si no se siente c6modo a1 definir 10s cuatro bordes con una propiedad, puede utilizar las
propiedades individuales border-top-wi dth, border-bottom-wi dth, border-1 e f t -wi d t h
y b o r d e r - r i ght-wi d t h para definir el ancho de cada borde. Cada propiedad acepta s610 un
valor; el predeterminado es rnedi urn.

9.3.65 Propiedad border-style

De acuerdo con el modelo de CSS, hay diversos adornos que puede aplicar a 10s bordes de
10s elementos de HTML.
Los valores de la propiedad border-sty1 e (estilo del borde) incluyen none (el predetermi-
nado), d o t t e d (punteado), dashed (guiones), s o l i d (sblido), double (doble), groove
(ranura), r i d g e (ondulado), i n s e t (recuadro) y o u t s e t (principio). El navegador capaz de
interpretar estilos de borde aplica de uno a cuatro valores para la propiedad de bordes en el
mismo orden que se aplica la propiedad para el ancho y colores, descrito en la tabla 9-1.
El navegador dibuja bordes punteados, de guiones, s6lidos y dobles como lineas planas
encima del fondo de la etiqueta. Los valores groove, ri dge, i nset y out s e t crean bordes
tridimensionales: el de ranura (groove) es una linea grabada; el ondulado (ridge) es una
linea adomada; el borde de recuadro (inset) hace que toda el Qreade la etiqueta se sitde
dentro del documento; y el borde de principio (outset) hace que toda el Area de la etiqueta
se sitde encima del documento. El efecto de naturaleza tridimensional de estos dltimos
cuatro estilos en la imagen de fondo de la etiqueta estl indefinido y de 61 se encarga el
navegador. Nos gustaria mostrarle ejemplos, pero ningdn navegador soporta hasta ahora
estas caracteristicas.

Ya que especificar un borde complejo puede ser tedioso, el estlndar de CSS proporciona
cinco propiedades abreviadas que aceptan uno o todos 10s valores de ancho, color y estilo
para una o todas las partes de 10s bordes. Las propiedades border-top, border-bottom,
border- 1 e f t y border- ri ght modifican sus respectivos bordes; la propiedad border gene-
rica controla 10s cuatro lados del borde en forma simultlnea. Por ejemplo:
border-top: thick sol id blue
border-left: lex inset
border-bottom: blue dashed
border: red double 2px
La primera propiedad convierte el borde superior en una linea gruesa, sblida, de color azul. La
segunda configura el borde izquierdo con un efecto de recuadro tan grueso como la altura
de la x (x-height) de la fuente del elemento; conserva el mismo color. La tercera propiedad
crea una linea de guiones en azul en la pane inferior del elemento, con un grosor medio, el
predeterminado. Por dltimo, la cuarta propiedad establece 10s cuatro bordes en una linea
roja doble de 2 pixeles de grueso.
La dltima propiedad nos plantea dos cuestiones. La primera, _no-puodeasignar-mliltiples
p p p p p - - - -

vaTores a lapropiedad border para afectar de forma selectiva ciertos bordes, como pue-
de hacerlo con las propiedades individuales border-col or, border-wi d t h y border-
s t y l e . La propiedad border siempre afecta todos 10s cuatro bordes que rodean a un
elemento.
En segundo lugar, una breve reflexi6n revelaria que no es posible crear un borde de linea
doble de apenas 2 pixeles de ancho. En casos como este, el navegador es libre de ajustar el
grosor a fin de presentar el borde de manera adecuada.
Aunque por lo regular pensamos que 10s bordes rodean elementos de bloque como imlge-
nes, tablas y texto, tambikn pueden aplicarse a etiquetas integradas. Esto nos permite
colocar un cuadro alrededor de una palabra o frase en un flujo de texto. La implementaci6n
de bordes en etiquetas integradas que abarcan varias lineas no estl definida y se deja a1
navegador.
9.3 Propiedudes de estfh 287

9.3.6 7 Propiedad clear

A1 igual que su primo, el atributo para la etiqueta <br>, la propiedad c l e a r indica a1 navegador
si debe colocar el contenido de una etiqueta junto a un elemento "flotante", o en la primera
linea debajo de Cste. El texto fluye alrededor de elementos flotantes, como imigenes y tablas,
con un atributo a1 ign=l e f t o a1 i g n = r i g h t , o cualquier elemento de HTML con su propiedad
f l oat establecida a cualquier valor menos none. [*br*, 4.7.11 [propiedad float, 9.3.6.81
El valor de la propiedad c l e a r puede ser none, l e f t , r i g h t , o both. none, el valor predetermina-
do, quiere decir que el navegador acnia normalmente y coloca el contenido de la etiqueta junto a
los elementos flotantes en cualquiera de 10s lados si hay lugar para hacerlo. El valor 1e f t evita que
se coloque el contenido a la izquierda de un elemento flotante; r i g h t evita que se coloque a la
derecha; both evita que el contenido de la etiqueta aparezca junto a cualquier elemento flotante.
El efecto de este estilo es el mismo que el d e haber precedido la etiqueta con una etiqueta
<br> con su atributo c l e a r . Por lo tanto,
H 1 {clear: l e f t )

tiene el mismo efecto de anteponer cada etiqueta <hl> una etiqueta <br c l e a r = l e f t > .
En la actualidad, Internet Explorer no soporta la propiedad c l e a r

9.3.68 Propiedadfloat
La propiedad f l o a t designa un espacio de desplegado para la etiqueta como un elemento
flotante y hace que el texto fluya alrededor de C1 de una forma especifica. Generalmente es
anilogo a1 atributo a1 ign para imigenes y tablas, per0 puede aplicarse a cualquier elemento,
texto, imsgenes y tablas. [alineaci6nde ifmigenes, 5.2.6.41 [alineaci6n de tablas, 11.2.1.11
La propiedad f 1o a t acepta uno de tres valores: 1e f t , r i g h t o none, el valor predetermina-
do. none deshabilita la propiedad f 1oat; 10s demas valores funcionan como sus contrapartes
valores-atributo para la alineacih, indicindole a1 navegador que coloque el contenido a
cada lado del flujo y permita que otro contenido se presente en seguida de el.
En consecuencia, el navegador capaz de interpretar estilos coloca el contenido de una etiqueta
especificado con f 1oat : 1e f t , a la izquierda contra el margen izquiedo del flujo de texto y el
contenido siguiente fluye a su derecha de forma desoendente y debajo del contenido de la etiqueta.
f l o a t : r i g h t coloca el contenido de la etiqueta contra el b o d e derecho del flujo y hace fluir otro
contenido sobre su izquierda, de f o r m descendente y debajo del contenido de la etiqueta.
Aunque es m i s comdn utilizarlo con tablas e imsgenes, es correct0 aplicar la propiedad
f l o a t a un elemento de texto. Por ejemplo, la siguiente linea crea un encabezado "en
proceso", con el texto colocado alrededor del encabezado.
H 1 {float: l e f t )

Esta propiedad todavia no la soporta Internet Explorer.

288 Capitdo 9: Hqjas de e s H b en cascada

Como pod15 sospechar, la propiedad height controla la altura del 5rea de desplegado de la
etiqueta asociada. Puede ver que se utiliza con m5.s frecuencia en imigenes y tablas, per0 puede
emplearla para controlar tambien la altura de otros elementos de sus documentos de HTML.
El valor de la propiedad height es un valor de longitud o la palabra clave auto, el valor predetermi-
nado. auto irnplica que la etiqueta afeaada tiene una altura inicial que debe aplicarse cuando se
despliega la etiqueta. De otro modo, la altura de la etiqueta se establece a la medida deseada. Si
emplea un valor absoluto, la altura se establece a la del valor de longitud. Por ejemplo,
IMG {height: 100px)
le indica a1 navegador que despliegue la imagen a la que hace referencia la etiqueta <img>
d e manera que tenga una altura d e 100 pixeles. Si utiliza un valor relativo, el tamario base
con respecto a1 cual seri relativo depende del navegador y d e la etiqueta.
Cuando se utilizan escalas d e 10s elementos a una altura especifica, la proporci6n del aspec-
to del objeto se puede conservar estableciendo tambien en auto la propiedad w i d t h d e la
etiqueta. De este modo,
IMG {height: 100px; width: auto}
asegura que las im5genes Sean siempre d e 100 pixeles de alto, con un ancho a escala
adecuada. [propiedad width, 9.3.6.121
Internet Explorer alin no soporta esta propiedad; Navigator la acepta s610 cuando se emplea
con la etiqueta <img>.

9.3.6 10 Propkdades delma-

Como las propiedades de borde, las diferentes propiedades d e margen le permiten controlar
el espacio del margen alrededor de un elemento, exactamente en el exterior d e su borde
(figura 9-4). Los m5rgenes son siempre transparentes, lo que permite que pueda apreciarse
el color o imagen d e fondo del elemento contenedor. Como resultado, s610 puede especifi-
car el tamario de un margen, y no su color o estilo d e presentacibn.
Las propiedades m a r g i n - l e f t , m a r g i n - r i g h t , margin-top y margin-bottom aceptan un
valor d e longitud o porcentaje que indica la cantidad de espacio que debe asignarse alrede-
dor del elemento. Ademas, la palabra clave auto le indica a1 navegador capaz de interpretar
estilos que ponga 10s m5rgenes que normalmente colocaria alrededor de un elemento. Los
valores de porcentaje se calculan como un porcentaje del ancho del elemento contenedor.
El margen predeterminado, si no especifica otro, es cero.
Todas estas son especificaciones d e m5rgenes v5lidas:
BODY {margin-left: l i n ; margin-top: O5.in; margin-right: l i n )
P {margin-left: -0.5cmj
IMG {margin-left: 10%)
El primer ejemplo crea margenes de una pulgada hacia abajo en 10s bordes derecho e
izquierdo del documento, y un margen de media pulgada en la parte superior. El segundo
ejemplo desplaza la etiqueta <p> medio centimetro a la izquierda dentro del margen izquier-
do. El dltimo ejemplo crea un margen a la izquierda de la etiqueta 4 m g > equivalente a1 10
por ciento del ancho del elemento padre.
A1 igual que la propiedad border abreviada, puede utilizar la propiedad abreviada margin
para definir 10s cuatro mlrgenes, utilizando uno a cuatro valores que afectan 10s margenes
en el mismo orden descrito en la tabla 9-1. Con esta notacibn, nuestros margenes para
<body> del ejemplo anterior tambien se podrian especificar corno:
BODY {margin: 0 . 5 i n l i n )

Las propiedades marg i n-1 eft y marg i n-ri g ht se interrelacionan con la propiedad wi dt h
para determinar el ancho total del elemento, como describimos en 9.3.6.1.
Internet Explorer 3.0 s610 soporta las propiedades marg i n-1 eft, marg i n-ri ght y marg i n-
top. En consecuencia, s610 acepta hasta tres valores para la propiedad margi n y e n un orden
diferente a1 del estandar de CSS: (top) arriba, (right) derecha, (left) izquierda y no abajo
(bottom).

9.3.611 Propiedudes de reUeno

Como las propiedades de margen, las diferentes propiedades para rellenar (paddi ng) permi-
ten controlar el espacio de relleno alrededor de un elemento, entre el area que lo contiene
y su borde (figura 9-4). El relleno se presenta siempre utilizando el color o imagen de fondo
del elemento. Como resultado, puede especificar dnicamente el tamaiio del relleno; no su
color o estilo de presentaci6n.
Las propiedades padding-left, padding-right, padding-top y padding-bottom aceptan
un valor de longitud o porcentaje indicando la cantidad de espacio que el navegador debe
reservar alrededor del elemento. Los valores de porcentaje se calculan como un porcentaje
del ancho del elemento contenedor. El valor de relleno predeterminado es cero.
Estas son algunas especificaciones de relleno vllidas:
P { p a d d i n g - l e f t : 0.5cm)
IMG (paddi ng-1 e f t : 10%)

El primer ejemplo crea un relleno de medio centimetro entre el contenido de la etiqueta <p>
y su borde izquierdo. El dltimo ejemplo crea relleno hacia la izquierda de la etiqueta <img>
igual a1 10 por ciento del ancho del elemento padre.
Como las propiedades margin y border abreviadas, puede utilizar la propiedad padding
abreviada para definir las cuatro cantidades de relleno, utilizando de uno a cuatro valores
para crear 10s lados de relleno, como indica la tabla 9-1.
290 Capftulo 9: Hdas de estilo en cascada

Internet Explorer 3.0 no soporta ninguna propiedad de relleno. Navigator soporta s61o las
cuatro propiedades de relleno individuales, no la propiedad padding abreviada.

9.3.612 Propiedad width

La propiedad w i d t h (ancho) es la pareja de la propiedad h e i g h t (alto) y controla el ancho
de la etiqueta asociada. Especificamente, define el ancho del Prea que contiene a1 elemento,
como muestra la figura 9-4. Vera que es mis frecuente utilizarla con imPgenes y tablas, per0
podria ser interesante emplearla para controlar el ancho de otros elementos.
El valor de la propiedad w i d t h es un valor de longitud, o un porcentaje o la palabra clave
auto. a u t o es el valor predeterminado; indica que la etiqueta afectada tiene un ancho inicial
que debe emplearse cuando se exhiba la etiqueta. Si utiliza un valor de longitud, el ancho
serP establecido a ese valor; 10s valores de porcentaje calculan el ancho como un porcentaje
del ancho del elemento contenedor. Por ejemplo,
IMG ( w i d t h : 100px)
muestra la imagen referenciada por la etiqueta <img> escalada a un ancho de cien pixeles.
Cuando escale elementos a un ancho especifico, la proporci6n del aspect0 del objeto se
mantendra si establece la propiedad h e i g h t de la etiqueta e n auto. De esta manera,
IMG ( w i d t h : 100px; h e i g h t : auto)

pone todas las imPgenes con un ancho de cien pixeles y escala sus alturas de manera
apropiada. [propiedad height, 9.3.6.91
La propiedad w i d t h se interrelaciona con las propiedades rnargi n-1 e f t y margi n - r i g h t
para determinar el ancho total de un elemento, como describimos en 9.3.6.1.
Internet Explorer no soporta esta propiedad; Navigator la acepta s610 cuando estP asociada
con la etiqueta <irng>.

9.3.7 Propiedudes de lista

El estPndar de CSS le permite controlar la apariencia de 10s elementos de una lista de HTML;
en especial de listas ordenadas y no ordenadas.
Los navegadores dan formato a 10s elementos de la lista igual que a cualquier otro elemen-
to de un bloque de HTML, except0 cuando Cste tiene alguna clase de marcador que prece-
de a1 contenido. Para las listas sin ordenar, el marcador es una viiieta de alglin tipo; para las
listas numeradas es un cadcter o simbolo numCrico o alfabktico. Las propiedades de lista
de CSS le permiten controlar la apariencia y posici6n del marcador asociado con un ele-
mento de la lista.
9.3 7.1 Propiedud list-style-image
La propiedad 1 i s t - s t y 1 e-image (estilo de la imagen de lista) define la imagen que utiliza el
navegador para marcar un elemento de la lista. El valor de esta propiedad es el URL de un
archivo de imagen, o la palabra clave none, que es el valor predeterminado.
La imagen es el rnarcador de lista preferido. Si esd disponible, el navegador la exhibe en lugar de
cualquier otro marcador definido. Si no esd disponible, o si el usuario ha deshabilitado la carga
de idgenes, se utiliza el marcador definido por la propiedad 1 is t -s t y l e- type (vCase 9.3.7.3).
Los diseiiadores pueden utilizar esta propiedad para definir viiietas personalizadas para sus
listas no ordenadas. Aunque puede usar cualquier imagen como viiieta, le recomendamos
que sus marcadores Sean im5genes GIF o JPEG para asegurar una atractiva presentaci6n.
Por ejemplo, a1 especificar el archivo mibala.gifcomo imagen de viiieta en su servidor,
podria utilizarlo de la siguiente manera:
LI (1 ist-style-image: url (imagenes/mibala.gif); 1 ist-style-type: square)
En este caso, la imagen ser5 utilizada s610 si el navegador descarga (o "baja") con Cxito el
archivo mibala.giJ: De otro modo, el navegador emplearii la viiieta cuadrada convencional.
Esta propiedad no la soporta navegador alguno.

9.3.7.2 Propiedad Ust-style-position

Existen dos formas de ubicar el marcador asociado con el elemento de una lista: dentro del
bloque asociado con el elemento o fuera de 61. En consecuencia, la propiedad 1 is t - s t y 1 e-
p o s i t i o n (ubicaci6n del estilo de lista) acepta uno de 10s dos siguientes valores: i n s i d e
(dentro) o o u t s ide (fuera).
El valor predeterminado es o u t s i d e , lo que significa que el marcador de elemento queda
indentado a la izquierda del elemento como en este ejemplo:
Esta es una lista con vifietas
con un marcador "fuera"
El valor ins ide hace que el marcador se recorra y el elemento de la lista fluya alrededor de
61, de mod0 parecido a una imagen flotante:
Esta es una lista con viiietas
con un marcador "dentro"
Observe c6mo la segunda linea de texto no est5 indentada, se alinea con el borde izquierdo
del marcador.
Ninglin navegador soporta actualmente esta propiedad.
292 Capftttlo 9:Hojas de estilo en cascadu

9.3.73 Propiedad list-sty&-type

La propiedad 1 ist-style-type (tipo del estilo de lista) tiene una doble tarea en cierto
sentido: determina c6mo 10s elementos d e una lista, ordenada o no, se presentan en un
navegador capaz d e interpretar estilos. Esta propiedad tiene el mismo efecto sobre
un elemento d e lista que el que tiene su atributo type. [tipo4i*,8.3.1.11
Cuando se usa con elementos d e una lista no ordenada, la propiedad 1i st -s tyl e- type
acepta uno d e cuatro valores: di sc, circle, square o none. El navegador marca 10s elemen-
tos d e la lista n o ordenada con el "glifo" especificado. El valor predeterminado es di sc; 10s
navegadores lo modifican dependiendo del nivel d e anidaci6n d e la lista.
Cuando se usa con elementos de una lista ordenada, la propiedad 1 i st- sty 1 e- type acepta
uno de seis valores: decimal, 1 ower-roman, upper-roman, 1 ower-a1 pha, upper-a1 pha o
none. Estos valores dan formato a 10s ndmeros de 10s elementos como valores decimales,
ndmeros romanos e n minfisculas, en maylisculas, letras mindsculas o maflsculas, respecti-
vamente. La mayoria d e 10s navegadores utiliza esquemas de numeraci6n decimal si usted
n o establece esta propiedad.
Esta propiedad no la soporta navegador alguno.

Ia propiedad 1 i st -sty1 e (estilo de bta) es la versi6n abreviada de todas las d e d propiedades

de estilo de lista. Acepta alguno o todos 10s valores permitidos para las propiedades 1 i st-sty1 e-
type, l i st-sty1 e-posi tion y l i st-sty1 e-image, en cualquier orden y con valores apropiados
para el tipo de lista que va a m d ~ c a rEstas
. son propiedades de estilo de lista v5lidas:
LI {list-style: disc)
LI {list-style: lower-roman inside)
LI {list-style: url (http://mrw.kumquat.com/imagenes/quaqui to.gif)
square)
El primer ejemplo crea elementos d e lista que utilizan un disco como vifieta. El segundo
hace que 10s elementos d e la lista utilicen ndmeros romanos en minfisculas, colocados
dentro del bloque d e elementos. En el dltimo ejemplo, se usad un cuadrado como vifieta si
la imagen a la que se hace referencia no est5 disponible.
Esta propiedad n o la soporta actualmente ningfin navegador.

9.3.7.5 Uso eJciente de las propiedades de lsta

Aunque puede aplicar las propiedades d e lista a cualquier elemento d e HTML, s610 afecta-
d n la apariencia de 10s elementos cuya propiedad d ispl ay se establezca como 1 i st- i t em.
Generalmente, la 6nica etiqueta con esta propiedad es <1 i >. [propiedadd l spl ay, 9.3.8.11

Esto no deberia disuadirlo de utilizar estas propiedades donde quiera, e n particular con las
etiquetas <ul> y <ol>. Puesto que estas propiedades son heredadas por elementos cuyos
padres las han establecido, modificar una d e las etiquetas <ul> y <ol> alteran
subsecuentemente todas las etiquetas <1 i > con la propiedad 1 i st-style-type definida:
LI .roman (1 ist-style-type: lower-roman)
En su lista, usted debe especificar cada elemento con esta clase:
<01>
<l i cl ass=roman>El emento 1
4 i class=roman>El emento 2
<l i cl ass=roman>y asf sucesivamente
</01>
Tener que repetir el nombre de la clase es tedioso y puede ocasionar errores. Una mejor
solucion es definir una clase de la etiqueta <ol>:
0L.roman (1 i st-style-type: 1 ower-roman)
En este caso cualquier etiqueta <1 i> dentro de la lista hereda la propiedad y emplea n6me-
ros romanos e n minhsculas:
<01 cl ass=roman>
4 i >El emento 1
-4i>El emento 2
4 i>Y asf sucesivamente
</01>
Esto es mucho m5s f5cil de comprender y manejar. Si e n un futuro desea cambiar el estilo de
numeration, s61o debe cambiar las propiedades d e la etiqueta <ol>, e n vez de encontrar y
cambiar cada vez que aparece la etiqueta <1 i > en la lista.

Puede utilizar estas propiedades e n un sentido m5s global. La configuraci6n de una propie-
dad de lista e n la etiqueta <body> modifica la apariencia de todas las listas e n el documento;
establecerla e n una etiqueta <di v> cambia las listas e n esa divisi6n.

9.3.8 Pmpiedades de claszfiicacidn

Las propiedades de clasificaci6n son las mas extrafias entre las propiedades de estilo d e CSS.
No controlan directamente la forma e n que un navegador capaz de interpretar estilos pre-
senta elementos de HTML; indican a1 navegador cbmo clasificar y manipular diversas eti-
quetas y sus contenidos conforme las encuentren.
294 CapUulo 9:Hojas de estib en cascada

Para la mayoria de 10s casos, no debe establecer estas propiedades e n un elemento a menos
que pretenda lograr un efecto especial especifico. Aun asi, es poco probable que la propie-
dad llegue a ser soportada por la mayoria de 10s navegadores.

9.3.8.1 Propiedad display

Todo elemento e n un documento de HTML puede clasificarse, para prop6sitos de visualiza-

ci6n, como un elemento de bloque, un elemento integrado o un elemento de lista. Los
elementos de bloque, como 10s encabezados, pirrafos, tablas y listas, tienen formato como
un bloque de texto independiente, separado de 10s bloques anterior y siguiente. Los ele-
mentos integrados, como las etiquetas de estilo fisicas y basadas en contenido y anclas de
ligas, se presentan dentro de la linea actual de texto dentro del bloque que las contiene. Los
elementos de lista, especificamente la etiqueta <li>, se presentan como un elemento de
bloque, acompaiiadas con una vifieta o ndmero, conocidos como marcador.
La propiedad d i s p l a y le permite cambiar el tip0 de desplegado del elemento a b l o c k ,
i n l i ne, 1 is t - i tern o none. Los primeros tres valores cambian la clasificaci6n del elemento;
el valor none desactiva el elemento, lo que evita que su(s) hijo(s) se muestren e n el
documento.
Plausiblemente, podria superar cualquier eventualidad a1 combinar elementos, forzando asi
el desplegado de pirrafos como elementos de lista y convirtiendo las ligas e n elementos de
bloque. En la prictica, esto es una tarea trivial y no recomendamos que combine clasifica-
ciones de elementos sin tener una buena raz6n para hacerlo.
Ademis, actualmente ningdn navegador soporta esta propiedad.

9.3.8.2 Propiedad white-space

La propiedad whi te-space define la forma e n que el navegador capaz de interpretar estilos
maneja 10s espacios e n blanco (tabulador, espacios y retornos de carro) en una etiqueta de
bloque. La palabra clave normal (valor predeterminado) colapsa 10s espacios en blanco,
de manera que uno o mis espacios, tabuladores y retornos de carro se manejan como un
espacio sencillo entre palabras. El valor p r e simula la etiqueta <pre>, con la que el navegador
retiene y muestra todos 10s espacios, tabuladores y retornos de carro. Por dltimo, el
valor nowrap indica a1 navegador que ignore 10s retornos de carro y que no inserte saltos de
linea automiticos; todos 10s saltos de linea deben hacerse con la etiqueta <br>.
Como la propiedad d i s p l a y , la propiedad whi te-space se utiliza rara vez de forma adecua-
da comparada con las veces que se utiliza mal. No altere la manera e n que 10s elementos
manejan 10s espacios e n blanco si no tiene una buena raz6n para hacerlo.
Ningdn navegador soporta esta propiedad.
 con menos etiquetas: la etiqueta
9.4 ~ s t i h s -pan> 295

7.4 Estilos con menos etiquetas: la etiqueta <span>

Hasta ahora, hemos recurrido a hojas de estilo en cascada para cambiar la apariencia del
contenido d e una etiqueta de HTML designada. Sin embargo, e n algunos casos tal vez
quiera modificar el aspect0 de una sola secci6n del contenido d e la etiqueta (por lo regular,
texto). Marque estos segmentos especiales con la etiqueta <span>.

<span> 0
Funcion:
Delimita un Prea de texto a la que se desea aplicar una regla de estilo
A tributos:
CLASS
STYLE
Etiqueta de fin:
</span>; nunca se omite
Contiene:
Contenido de HEbfL
Usada en:
Contenido de cueqo

La etiqueta <span> simplemente delimita una parte del contenido de HT,ML (limitado, por
supuesto, por las reglas normales de anidaci6n d e etiqueta). Los navegadores interpretan la
etiqueta <span> como otra etiqueta de estilo fisico, o basada en contenido. La linica diferen-
cia, desde luego, e s que el significado predeterminado de <span> es dejar el texto solo.
Aunque puede ofrecer alguna otra funci6n en una versi6n futura de HTML, <span> se introdujo
para que pueda aplicar un estilo especifico a cualquier secci6n del documento mediante un
estilo directo, diferentes clases de estilo o de forma local con un estilo integrado. Para definir
un estilo para la etiqueta <span>, hPgalo como con cualquier om etiqueta de HTML:
SPAN {color: purple}
SPAN.bigger {font-size: larger)
Y para utilizarla como cualquier otra etiqueta de estilo:
Las proyecciones para la cosecha del quat son <span class=bigger> irnejores que
nunca </span>!
De forma similar, la apariencia de una etiqueta <span> puede modificarse con un estilo integrado:
Las proyecciones para 1 a cosecha del quat son <span style=I1font-size: 1 argerU>
irnejores que nunca </span>!
296 Capitdo 9: Hojas de estib en cascada

Como cualquier otra etiqueta de estilo fisica o basada e n contenido, las etiquetas <span>
pueden estar anidadas y contener otras etiquetas. La etiqueta <span> existe s61o para permi-
tir una administraci6n de estilo descendente hasta la escala d e frases e n HTML.

7.5 Cdmo aplicar estilos a docrumentos

Hay varios temas que debe considerar antes, durante y despuCs d e utilizar estilos e n su
documento o colecciones d e documentos d e HTML. El primer0 y principal es si 10s usari en
todo. Francamente, pocos d e 10s efectos logrados con estilos son dnicos; la mayoria pueden
lograrse, aunque con menos facilidad y mucho menos consistencia, con las etiquetas d e
estilo fisico y basadas e n contenido, como < i >y <ern>, o 10s diferentes atributos d e etiqueta,
c o l o r y background.

9.5.1 Estilo o no estilo

AdemPs d e 10s efectos, la cuesti6n principal que surge e n las mentes d e 10s desarrolladores
de HTML, tomando e n cuenta que como escribimos este capitulo a principios d e 1997, es si
las hojas d e estilo e n cascada, e n particular las externas, serln siempre soportadas por 10s
principales navegadores o si prevalecers a l g h otro mecanismo d e desarrollo para hojas de
estilo. Tanto Navigator como Internet Explorer tienen soporte para hojas d e estilo e n casca-
da e n sus versiones m k recientes, per0 el soporte de Microsoft no estP actualizado y tiene
errores; el d e Navigator actualmente estl incompleto. Ademk, Navigator no ha centrado su
desarrollo e n CSS sino e n estilos basados e n JavaScript (consulte 13.4).
Asi, e n la actualidad las hojas de estilo son una soluci6n agridulce; pueden crear mPs trabajo
d e lo que puedan valer. La mayoria d e 10s navegadores actuales no soportan estilos. Esto
significa que para lograr 10s efectos especiales con la mayoria d e 10s usuarios, debe preparar
colecciones redundantes (mezcladas o independientes) con estilos, asi como con etiquetas y
atributos relacionados con estilos, si es que siempre utiliza estilos. Nosotros ahora estamos
d e regreso e n el mismo barco que hace un aAo, m b o menos, cuando se decidia si se
utilizarian las diferentes y nuevas extensiones de Navigator para HTML. Creemos que pasarl
lo siguiente: Netscape promete soporte completo para el estPndar d e CSS y Microsoft segu-
ramente actualizara el suyo para mantener la competencia con Netscape. Los estilos pueden
comenzar muy bien e n la primera mitad d e 1997, p r o espere a que logren mPs popularidad
hasta fin d e aAo.

9.5.2 Qu&tip0 de hoja de estilo y cuclndo

Una vez decidido a emplear las hojas de estilo e n cascada de HTML (para bien o para mal),
la siguiente pregunta es iquC tip0 d e hoja d e estilo (integrada, a nivel del documento o
externa) debe aplicar y culndo? Cada una tiene sus ventajas y desventajas; cada una es la
mejor aplicada bajo ciertas circunstancias.
9.5 Cdrno aplicar estibs a documentos 297

9.5.2.1 Ventajasy desventajas de los estilos externos

Debido a que las hojas de estilo dan coherencia a la presentaci6n de sus documentos, las hojas
de estilo extemas son la rnanera mis adecuada y ficil de administrar estilos en toda su colec-
ci6n de documentos. S610 coloque las reglas de estilo deseadas en una hoja de estilo y aplique
esos estilos a 10s documentos deseados. Puesto que todos 10s documentos pueden ser afecta-
dos por una sola hoja de estilo, convertir toda su colecci6n de documentos a un nuevo estilo es
tan sencillo como cambiar una sola regla e n la correspondiente hoja de estilo extema.
Aun en casos donde 10s documentos puedan diferir e n estilo, a menudo es posible coleccio-
nar algunas reglas d e estilo bbicas e n una hoja linica que pueden compartir otros documen-
tos, incluyendo:
Color d e fondo
Imagen de fondo
Tipos y tamafios de fuentes
Mirgenes
Alineaci6n de texto
Otro beneficio de las hojas d e estilo externas es que otros desarrolladores que deseen copiar
su estilo con facilidad pueden tener acceso a esa hoja y crear sus propias plginas parecidas
a las d e usted -siendo la imitaci6n la forma mls sincera del halago, no deberia inquietarse
cuando alguien elija imitar la apariencia y sensaciones d e sus piginas-. Abundando en el
tema, usted no puede detenerlos d e ligarse a sus hojas de estilo, asi que tambien debe
aprender a disfrutar esto. A1 igual que 10s documentos convencionales d e HTML, no es
posible aislar u ocultar sus hojas de estilo para evitar que otros puedan verlas y utilizarlas.
El principal problema con las hojas de estilo externas es que incrementan la cantidad de
tiempo necesario para tener acceso a una plgina. El navegador n o s61o debe descargar la
pigina e n si, tambien la hoja de estilo antes de mostrar la plgina al usuario. Aunque
la mayoria de las hojas de estilo son relativamente pequeiias, su presencia puede ser muy
significativa cuando se entra a1 Web con una conexi6n lenta.
Sin la disciplina adecuada, las hojas de estilo externas pueden llegar a ser grandes y engo-
rrosas. Cuando Cree hojas de estilo, recuerde incluir s610 10s estilos que compartan las
p5ginas. Si necesita un conjunto de estilos para una o dos plginas, s e d mejor si las aisla e n
una hoja independiente o las agrega a un documento utilizando estilos a nivel del documen-
to. De otro modo, quiz5 descubra que ha gastado mucho tiempo y esfuerzo para aplicar 10s
efectos d e estilos externos e n varios documentos individuales.

9.5.2.2 Ventajasy desventajas de los estilos a nivel del documento

Los estilos a nivel del documento son mls Ctiles cuando creamos un documento personali-
zado. Nos permiten con facilidad invalidar una o m5s reglas en el estilo definido e n una hoja
de estilo externa para crear un documento con algunas diferencias.
298 Capitulo 9:Hojas de estilo en cascada

Tambien puede querer utilizar estilos a nivel del documento para experimentar con nuevas
reglas antes de aplicarlas a sus hojas de estilo. A1 agregar y modificar reglas con estilos a
nivel del documento, elimina el riesgo de agregar un estilo inservible a sus hojas d e estilo,
echando asi a perder la apariencia de todos 10s documentos que utilicen esa hoja.
El mayor problema con 10s estilos a nivel del documento es que puede sucumbir a usarlos
e n lugar d e crear una hoja d e estilo externa formal para administrar su colecci6n d e docu-
mentos. Es muy ficil agregar reglas a cada documento, corthdolas y pegindolas a medida
que crea nuevos documentos. Por desgracia, administrar una colecci6n d e documentos con
estilos a nivel del documento es una labor tediosa y propensa a errores. Incluso un simple
cambio puede provocar horas de edici6n y errores potenciales.
Como sugerencia fundamental, cualquier regla de estilo que intervenga en tres o m4s docu-
mentos debe moverse a una hoja de estilo externa y aplicarse a esos documentos con la
etiqueta <l ink> o el comando @import. Apeguese a esta sugerencia conforme desarrolle
documentos; seri una buena estrategia a largo plazo cuando tenga que modificar sus estilos.

7.5.2.3 Ventajasy desventajas de los estilos integrados

Y a1 final d e la cascada, 10s estilos integrados invalidan 10s estilos mis generales. Adquiera
ahora el hibito d e usar lo menos posible 10s estilos integrados s61o para ese prop6sito.
No se pueden reutilizar, lo que dificulta la administraci6n d e 10s estilos. Ademis, estos
cambios se dispersan a lo largo d e sus documentos, lo que aumenta la posibilidad d e
errores. (Esta es la raz6n por la que nosotros podemos evitar dos estilos basados e n etiqueta
y atributo bisicamente, jno?)
En cualquier momento que utilice un estilo integrado, piense con detenimiento si puede
obtener el mismo efecto con una definicibn de clase de estilo. Por ejemplo, puede ser mejor
definir:
<style type="text/css">
<i--
P.centrado {text-a1 ign: center)
EM.bl ue {color: blue)
- ->
</style>
y despues usar:

e n lugar de:
<p sty1 e=I1text-a1ign: centradoU>
<ern style="color: blue">
Seri mis ficil encontrar y manejar sus estilos, asi como volverlos a usar en otros documentos.
 En esfecapitulo:
Fundamentos & las
formas
EIementos de entrada
para formas
Areas de texto de
mtidliples lineas

Formas, formas, formas: las llenamos para casi todo, desde que nacemos hasta que morimos.
iAsi que para quC explicar la importancia y excitaci6n d e las formas de HTML? S61o por esto:
hacen a HTML e n verdad interactivo.
Pensandolo bien, except0 por la limitada entrada de usuario disponible con la etiqueta
s i ndex>, la interactividad de HTML es, bhicamente, una gran cantidad d e botones opri-
<i
midos: haga clic aqui, haga clic all& vaya a&, vaya all5; no hay, en realidad, retroalimenta-
ci6n con el usuario y la poca que hay no es personalizada. Los applets ofrecen gran capaci-
dad de interacci6n con el usuario, pero pueden ser dificiles de escribir y a h no se estandarizan
para todos 10s navegadores. Las formas, por su parte, tienen soporte en casi todos 10s
navegadores y hacen posible crear documentos que reljnen y procesan la informaci6n
proporcionada por el usuario y crean respuestas personalizadas.
Este poderoso mecanismo tiene implicaciones de largo alcance, particularmente para el
comercio electr6nico. Da el toque final a un catalogo en linea, pues ofrece a 10s consumido-
res una manera de ordenar productos y servicios de inmediato. Brinda a organizaciones no
lucrativas un medio para dar de alta nuevos miembros. Ofrece a investigadores d e mercado
un mod0 d e obtener informaci6n sobre el usuario. Le da a usted un medio automatizado
para interactuar con 10s lectores de sus documentos de HTML.
Medite las maneras en que puede interactuar con sus lectores mientras echa un vistazo a 10s
detalles para crear formas del lado cliente y del lado servidor.

10.1 Fundamentos de las fomas

A diferencia d e la etiqueta <isindex>, puede colocar una o mas formas en un mismo
documento. Y a diferencia de un documento con 4 s i ndex>, 10s usuarios pueden ignorar
las formas, leer el contenido e interactuar con las ligas del documento del mismo mod0 que
con un documento sin formas. [<isindex>, 7.6.11
Las formas se componen de uno o mls cuadros d e texto, botones para hacer clic, casillas de
verificaci6n y de opci6n mdltiple e incluso mends desplegables e im4genes sensibles a1
rat6n, todas dentro d e la etiqueta <form>. En una forma tambiCn puede colocar texto co-
mdn, incluyendo texto e imlgenes. El texto es particularmente litil para dar instmcciones a
10s usuarios para que llenen la forma y para rotular elementos e indicadores que piden
informaci6n a1 usuario. Dentro de 10s diversos elementos d e la forma, puede emplear
manejadores d e evento d e JavaScript para lograr mdltiples efectos, como la pmeba y valida-
cion del contenido de la forma y el c5lculo de una suma.
Una vez que un usuario llena 10s diferentes campos de la forma, hace clic e n un b o t h
especial para enviar (a veces debe oprirnir la tecla INTRO) la forma a un servidor. El navegador
toma 10s valores y elecciones del usuario y 10s envia a un servidor o a una direcci6n de correo
electr6nico.' El servidor pasa la informaci6n a un programa o aplicaci6n de soporte que la
procesa y crea una respuesta, casi siempre en HTML. La respuesta puede ser, simplemente,
un agradecimiento, puede solicitar a1 usuario un llenado correct0 de la forma o suministrar
campos adicionales. El servidor envia la respuesta a1 navegador cliente, que la presenta
entonces a1 usuario. Con las formas enviadas por correo electr6nic0, la informaci6n se
coloca en el buz6n d e correo de alguien; no hay notificaci6n d e que se haya enviado.
Los aspectos del procesamiento d e 10s datos d e la forma del lado servidor no son parte del
estlndar d e HTML; estiin definidos por el software servidor. Aunque un estudio completo de
la programaci6n de formas del lado servidor estl m4s all5 del objetivo de este libro, caeria-
mos en una omisi6n si no incluyCramos a1 menos un ejemplo para que usted comience. Con
este fin, hemos incluido a1 final del capitulo algunos esqueletos de programas que ilustran
10s estilos comunes de la programaci6n de formas del lado servidor.

10.1.1 Etiqueta <form>

Puede colocar una forma e n cualquier parte dentro del cuerpo de un documento de HTML
con sus elementos delimitados por la etiqueta <form> y su respectiva etiqueta d e fin,
</f orm>. Puede, y le recomendamos hacerlo con frecuencia, incluir contenido comlin den-
tro de la forma a fin de rotular campos para introducir datos y para proporcionar direccio-
nes, por ejemplo.
Los navegadores hacen fluir 10s elementos especiales de la forma dentro de 10s plrrafos que
10s contienen como si fueran pequefias imlgenes incmstadas dentro del texto. No hay regla
alguna de disefio para 10s elementos de una forma, asi que debe utilizar otros elementos de
HTML, como las etiquetas <br> y <p>, a fin de controlar la ubicaci6n de 10s elementos
dentro del flujo d e texto. [ep*, 4.1.21 [ebr*, 4.7.11

Algunos navegadores, Navigator en particular, tambiCn pueden encriptar la informacibn, poniendola a salvo de
10s ladrones de tarjetas de credito, por ejemplo. Sin embargo, la facilidad para encriptar tambien debe ser sopor-
tada del lado servidor; p6ngase en contact0 con el fabricante de su navegador para obtener m b detalles.
 Define una forma
A tributes:
ACTION
CLASS 0
ENCTYPE
METHOD
NAME rn
ONRESET rn
ONSUBMIT rn 0
STYLE rn 0
TARGET rn 0
Etiqueta de fin:
</form>; nunca se omite
Contiene:
Contenido deforma
Usada en:
Bloque

Todos 10s elementosdentro de la etiqueta <form> componen una sola forma. El navegador
envia todos 10s valores de estos elementos (en blanco, predeterminado, o modificado por el
usuario) cuando el usuario envia la forma al servidor.
Debe definir a1 menos dos atributos especiales de la forma, que proporcionan el nombre
del servidor que la procesa y el metodo mediante el cual s e d n enviados 10s pariimetros a1
servidor. Un tercer atributo, opcional, le permite cambiar el mod0 en que 10s padmetros se
codifican para transmitirlos de modo seguro sobre la red.

10.1.1.1 Atributo action

El atributo a c t i o n , indispensable para la etiqueta < f o r m , proporciona el URL de la aplica-
ci6n que va a recibir y procesar 10s datos de la forma.
La mayoria de 10s webmusters tienen las aplicaciones para procesar formas en un directorio
especial, generalmente llamado cgi-bin,' dentro del servidor de HTTP. Mantener estos
programas y aplicaciones especiales para procesar formas en un directorio facilita la admi-
nistraci6n y protege a1 servidor.

La interfaz de compuerta comdn (CGI, Common Gateway Interface) define el protocolo con el que inter-
acnian 10s servidores con programs que procesan datos de forms.
Una tipica etiqueta <form> con su atributo a c t i o n tiene un aspect0 similar a este:

El URL de ejemplo le indica a1 navegador que se comunique con el servidor llamado

www.kumquat.com y pase e n conjunto 10s valores que el usuario introdujo e n la forma a la
aplicaci6n llamada actualiza ubicada e n el directorio cgi-bin.
En general, si ve un URL que haga referencia a un documento e n un directorio denominado
cgi-bin, puede estar seguro que el documento es, en realidad, una aplicaci6n que crea la
pigina deseada d e mod0 dinimico cada vez que se le llama.

10.1.1.2 Atributo enctype

El navegador codifica d e una manera especial 10s datos de la forma antes d e pasarlos
a1 servidor, de mod0 que no se amontonen o corrompan durante la transmisi6n. A su vez, el
servidor decodifica 10s parimetros o 10s pasa codificados a la aplicaci6n.
El formato d e codificaci6n estindar es el tip0 d e medios de Internet (Internet Media Type)
llamado "applicatiodx-www-form-urlencoded". Puede cambiar esa codificaci6n con el atri-
but0 opcional enctype de la etiqueta <form>. Los dnicos formatos d e codificaci6n opcional
soportados e n la actualidad son "multipart/form-data" y "texr/plain".
La opci6n multipart/form-data se utiliza para las formas que contienen campos para selec-
cionar archivos que el usuario desea obtener. El formato texdplain debe utilizarse junto con
un URL de tip0 mai 1t o e n el atributo a c t i o n para enviar las formas a una direcci6n d e
correo electr6nic0, no a un servidor. A menos que sus formas necesiten campos para
seleccionar archivos o deba usar un URL de tip0 mai 1t o e n el atributo a c t i o n , quiz5
deba ignorar este atributo y confiar simplemente e n el navegador y en el servidor que
procesa las formas para utilizar el tip0 d e codificaci6n predeterminado. [campos para
seleccih de archivos, 10.2.2.31

La codificaci6n estandar (applicatiodx-www-form-urlencoded) convierte cualquier espacio

e n 10s valores d e la forma e n un signo d e suma (+), 10s caracteres no alfanumericos e n un
signo d e porcentaje (%) seguido por dos digitos hexadecimales que son el c6digo ASCII del
caricter, y 10s saltos de linea e n 10s datos d e la forma con varias lineas e n %OD%OA.
La codificaci6n estindar tambien incluye un nombre para cada campo e n la forma (un
"campo" es un elemento discreto e n la forma, cuyo valor puede ser casi cualquier cosa,
desde un solo ndmero hasta varias lineas d e texto; la direcci6n del usuario, por ejemplo). Si
hay dos o mis valores e n el campo, se separan con signos d e ampersand (&).
Por ejemplo, veamos lo que el navegador envia a1 servidor despuCs de que el usuario
llena una forma con dos campos de entrada llamados nombre y direccion; el primer0
tiene s61o una linea de texto; el segundo, varias:
nombre=McGraw+Hi 1 1 Interameri cana& di reccion=Cedro +512%OD%OA
Atlacomulco.%OD%OAM6xico,+D.F.
Para mayor claridad hemos dividido 10s valores en dos lineas, per0 e n realidad el nave-
gador envia 10s datos e n una cadena de caracteres continua. El campo nombre es
McGraw+Hill+Interamericana y el valor del campo di recci on completo con 10s caracteres
de nueva linea incrustados, es:
Cedro 512
At1 acomul co.
M6xico.D.F.

La codificaci6n multipadform-data encapsula 10s campos de la forma como diversas partes

de un documento compuesto compatible con MIME. Cada campo tiene su propia secci6n en
el archivo resultante, acotado por un delimitador est9ndar. Dentro de cada secci6n, una o
m5s lineas de encabezado definen el nombre del campo, seguido por una o m5s lineas que
contienen el valor del campo. Puesto que la parte de valor de cada secci6n puede contener
datos binarios o caracteres no imprimibles, no ocurre ninguna conversi6n de caracteres o
codificaci6n dentro de 10s datos transmitidos.
Este formato de codificaci6n es, por naturaleza, m5s prolijo y extenso que el formato
application/x-www-form-urlencoded. Por lo tanto, s610 se puede utilizar cuando el atri-
but0 method de la etiqueta <form> se establece como post, como describimos a conti-
nuaci6n.
Un ejemplo simple har5 m5s f9cil comprender este formato. Aqui tenemos nuestro ejemplo
anterior, ahora transmitido como multipart/form-data:

McGraw Hi 1 1 Interameri cana

..............................146931364513459
Content-Disposition: form-data; name="direccionl'

La primera linea de la transmisi6n define el delimitador que aparecer5 antes de cada secci6n
del documento. Siempre consta de treinta guiones y un gran nfimero aleatorio que lo distin-
gue de otro texto que pudiera aparecer en 10s valores del campo actual.
Las lineas siguientes contienen 10s campos de encabezado para la primera secci6n. Siempre
habri un campo C o n t e n t - D i s p o s i t i o n indicando que esa secci6n contiene datos de la
forma y proporcionando el nombre del elemento de esta cuyo valor estP en esa secci6n.
Usted puede ver otros campos d e encabezado; en particular, algunos campos para seleccio-
nar archivos incluyen un campo d e encabezado Content-Type que indica el tip0 de datos
contenidos e n el archivo que se esti transmitiendo.
Despues de 10s encabezados, hay una linea e n blanco seguida por el valor real del campo
e n una o mas lineas. La seccidn concluye con una repetici6n de la linea del delimitador que
comenz6 la transmisi6n. En seguida viene otra secci6n y el patr6n se repite hasta que todos
10s parimetros de la forma han sido transmitidos. El final de la transmisi6n se indica con
dos lineas adicionales interrumpidas a1 final de la dltima linea delimitadora.
Como seiialamos antes, utilice la codificaci6n multipart/form-data sblo cuando su forma
tenga un campo para seleccionar archivos. Veamos un ejemplo de c6mo se veria la transmi-
si6n d e un campo para seleccionar un archivo:
.............................. 146931364513459
Content-Disposition: form-data; name="archivoN; filename="prueba"
Content-Type: text/pl ai n
Primera 1 Tnea del archivo
.. .
Ultima lTnea del archivo
.............................. 146931364513459--
La dnica diferencia notable es que el campo Content-Di sposi t i on contiene un elemento
adicional, f i 1ename, que define el nombre del archivo que se va a transmitir. Tambien
puede haber un campo Content-Type para dar una descripci6n adicional del contenido del
archivo.

Utilice esta codificaci6n s610 cuando no tenga acceso a un servidor para procesar formas y
deba enviar la informaci6n por correo electr6nico (el atributo a c t i o n de la forma es un URL
tip0 mai 1 t o ; consulte 10.1.1.13). Las codificaciones convencionales estin diseiiadas para ser
utilizadas por la computadora; texuplain se diseii6 pensando en las personas.
En esta codification, cada elemento de la forma se coloca en una sola linea, con el nombre
y valor separados por el signo igual. De regreso a nuestro ejemplo de nombre y direccibn,
10s datos de la forma serian devueltos como:
nombre=McGraw Hi 1 1 Interameri cana
di recci bn=Cedro 512%0D%OAAtl acomul co,%OD%OA Mexico, D. F.
Como puede ver, 10s dnicos caracteres atin codificados en esta forma son el retorno de carro
("INTRO") y el salto de linea en ireas para introducir texto en varias lineas. De otro modo,
el resultado es ficilmente legible con herramientas simples.
10.1.1.6 Atributo method

El otro atributo indispensable para la etiqueta <form> establece el metodo con el que el
navegador envia 10s datos de la forma a1 servidor para ser procesados. Hay dos maneras:
el metodo POST y el metodo GET.
Con el metodo POST, el navegador envia 10s datos en dos pasos: primero hace contacto con
el servidor que procesa la forma y que est4 especificado en el atributo a c t i o n ; y una
vez establecido el contacto, envia 10s datos a1 servidor en una transmisi6n separada.
En el lado del servidor, se espera que las aplicaciones de estilo POST lean 10s p a r s
metros desde una ubicaci6n est4ndar cuando comiencen a ejecutarse. Una vez leidos, 10s
parzimetros deben decodificarse antes de que la aplicaci6n pueda emplear 10s valores de la
forma. Su servidor definir4 exactamente el mod0 e n que sus aplicaciones estilo POST espe-
ran recibir 10s parimetros.
El metodo GET, por su parte, hace contacto con el servidor que procesa la forma y envia 10s
datos e n una transmisidn d e un solo paso: el navegador agrega 10s datos a1 URL asignado en
a c t i on para la forma, separados por el signo d e interrogacidn (?).
Los navegadores comunes transmiten la informaci6n de la forma con cualquiera de 10s
dos metodos; algunos servidores la reciben s61o con uno u otro metodo. Usted indica
cu41 de 10s dos (POST o GET) manejar4 el servidor que procesa las formas con el atributo
method de la etiqueta <form>. Veamos la etiqueta completa incluyendo el atributo method
con una transmisi6n de tip0 GET para el ejemplo de la forma anterior:

iCu4l debe utilizar si su servidor para procesar formas soporta ambos metodos, POST y GET?
Veamos algunas reglas fundamentales:
Para obtener un mejor rendimiento e n la transmisidn, envie formas pequeiias, con
pocos campos, mediante el metodo GET
Debido a que algunos sistemas operativos de servidor limitan el n6mero y longitud
de argumentos d e linea de comandos que pueden pasarse a una aplicaci6n a la vez,
utilice el metodo POST para enviar formas que tengan muchos campos o que tengan
campos de texto extensos
Si no tiene experiencia en escribir aplicaciones para procesar formas del lado servidor,
elija GET. Los pasos adicionales relacionados con la lectura y decodificacidn de 10s
par4metros transmitidos a1 estilo POST, aunque no son demasiado dificiles, pueden
darle m4s trabajo del que este dispuesto a emprender
Si la seguridad e s una preocupaci6n, elija POST. GET coloca 10s par4metros de la
forma directamente e n el URL de la aplicaci6n, donde pueden ser capturados con
 facilidad por sabuesos de la red o extraidos desde una bitlcora del servidor. Si
10s parlmetros contienen informaci6n delicada, como ndmeros de ta jeta d e crCdito,
puede estar comprometiendo a sus usuarios sin su conocimiento. Aunque las aplica-
ciones POST n o carecen de fallas de seguridad, por lo menos pueden aprovechar
la encriptaci6n a1 transmitir 10s parlmetros como una transacci6n separada con el
servidor
Si desea llamar a la aplicaci6n del lado servidor fuera del lmbito de una forma, incluyendo
el envio de parametros, utilice GET, ya que le permite incluir parlmetros del tip0 d e forma
como parte d e un URL. Las aplicaciones estilo POST, por su parte, esperan una transmisi6n
adicional del navegador despuCs del URL, algo que usted no puede hacer como parte de
una etiqueta convencional <a>.

10.1.1.7 Envio de pardmetros enfomza explfcita

El bit precedente d e aviso garantiza alguna explicaci6n. Suponga que tiene una forma
simple con dos elementos llamados x y y. Cuando sus valores estiin codificados tienen un
aspecto similar a Cste:

Si la forma utiliza method=GET, el URL utilizado para hacer referencia a la aplicaci6n del
lado servidor seri algo parecido a esto:
http://www. kumquat. com/cgi -bi n/actual i za?x=27&y=33
No hay nada que le evite tener que crear una etiqueta <a> convencional que llame a la
forma con cualquier valor de parlmetro que usted desee, como la siguiente:
<a href="http://www. kumquat. com/cgi -bi n/actual iza?x=19&y=104">

El dnico problema es que el ampersand que separa 10s pariimetros es, tambiCn, el carlcter
d e inserci6n d e entidad de cariicter. Cuando lo coloca dentro del atributo h r e f de la etiqueta
<a>, provoca que el navegador remplace 10s caracteres que le siguen con la entidad de
cadcter correspondiente.
Para evitar que esto suceda, debe remplazar el simbolo ampersand literal con su entidad
equivalente, ya sea &#38; o &amp;. Con este cambio, nuestro ejemplo de la referencia sin
forma para la aplicaci6n del lado servidor tendrl un aspecto parecido a Cste:
<a href="http://www. kumquat .com/cgi-bin/actual iza?x=19&amp;y=104">
Debido a la enorme confusi6n que se presenta a1 tener que escapar d e 10s ampersand en
el URL, 10s encargados de implementar servidores tienen una motivaci6n adicional para
aceptar tambiCn el signo de "punto y coma" como separador de pariimetros. Puede ser
interesante revisar la documentaci6n de su servidor para ver si acepta esta convenci6n.
Consulte tambien el apCndice E.
10.1.1.8 Atributo name
El atributo name sirve para asociar un nombre con la forma. Este nombre puede utilizarse
despuCs en c6digo de JavaScript para hacer referencias y manipular la forma y sus elemen-
tos. A menos que planee controlar elementos de su forma con JavaScript, no es necesario
incluir este atributo, que s610 soporta Navigator.

10.1.1.9 Atributos onSubmity onReset

El atributo onsubmi t de la etiqueta <form> es un manejador de eventos especial de JavaScript
integrado en 10s navegadores modernos. Su valor (encerrado entre comillas) es uno o una
secuencia de expresiones, metodos y funciones de referencia de JavaScript separadas
por signos de punto y coma, que el navegador ejecuta antes de enviar 10s datos a1 servi-
dor para procesar la forma o a una direcci6n de correo electr6nico. [Manejadores de
evento de JavaScript, 13.3.31
Puede utilizar el evento onsubmi t para lograr diferentes efectos. El mPs popular es el de
un programa que revisa la forma del lado cliente y solicita a1 usuario que introduzca 10s
elementos faltantes. Otro uso popular y mas sencillo es informar a 10s usuarios cuando
una forma con URL de tip0 mai 1 t o est6 en proceso via correo electr6nico (consulte
10.1.1.13).
El atributo onReset se utiliza de la misma manera que onsubmi t , except0 que el cbdigo
asociado de JavaScript s610 se ejecuta si el usuario oprime el bot6n para restaurar la forma.
S61o Navigator soporta este atributo.

10.1.1.10 Atributos style y class

El atributo s t y l e de la etiqueta <form> crea un estilo especifico para 10s elementos
contenidos por la etiqueta, anulando cualquier otra regla de estilo en acci6n. El atributo
c l a s s le permite dar formato a1 contenido de acuerdo con una clase predefinida de la
etiqueta <form>; su valor es el nombre de esa clase. [atributo styl e, 9.1.11 [atributo
class, 9.2.41
Sin embargo, 10s efectos reales del atributo s t y l e son dificiles de predecir. En general, las
propiedades de estilo afectan el contenido del cuerpo (en particular, el texto) que puede
incluir como parte del contenido de la forma, per0 10s estilos de <form> afectan las caracte-
risticas de 10s elementos de la forma.
Por ejemplo, puede crear un estilo con un tip0 de fuente especial y un color de fondo para
la forma. Los r6tulos de la forma, pero no el texto de un elemento de la forma para introdu-
cir texto, aparecerh con la fuente y color de fondo especificados. De mod0 similar, !os
r6tulos que coloc6 aparte de un conjunto de botones de selecci6n estadn de acuerdo con el
estilo especificado para la forma, pero no asi sus botones de selecci6n.
10.1.1.11 Atributo target

Con el advenimiento de 10s marcos (Jrames), es posible redireccionar el resultado de una

forma hacia otra ventana o marco. S61o agregue el atributo t a r g e t a la etiqueta <form> y dC
el nombre de la ventana o marco que recibirP el resultado.

Igual que el atributo t a r g e t empleado junto con la etiqueta <a>, puede utilizar diferentes
nombres especiales con el atributo t a r g e t de la etiqueta <form> a fin de crear una nueva
ventana o remplazar el contenido de las ventanas y marcos existentes. [destino *a*,
12.7.11

10.1.1.12 Ejempb deforma simple

En un momento examinaremos cada elemento de una forma. Primero veamos un ejemplo

sencillo para ver c6mo se componen las formas. Este ejemplo (mostrado e n la figura 10-1)
recne informaci6n bPsica sobre un usuario:
<form method=POST action="http://www.kumquat.com/ejemplo"~
Nombre :
<input t y p e = t e x t name=nombre s i z e = X maxlength=80>
<P>
Sexo :
<input type=radio name=sexo val ue="M"> Mascul i n o
<input type=radio namessex0 val ue="FM> Femenino
<P>
Ingresos:
<select name=ingresos s i z e = l >
<option>Menos de $25 000
<option>De $25 001 a 50 000
<option>MAs de $ 50 001
</select>
<P'
<input type=submi t>
</form>

La primera linea del ejemplo inicia la forma e indica que utilizaremos el metodo POST
para transmitir 10s datos a1 servidor que 10s procesari. Siguen 10s elementos que el
usuario debe introducir a la forma, definido cada uno por una etiqueta < i n p u t > y su
atributo t y p e . Hay tres elementos e n nuestro ejemplo, cada uno dentro de su propio
p4rrafo.

El primer elemento es un campo para introducir texto convencional, que permite a1

usuario teclear hasta 80 caracteres, per0 muestra s610 32 de ellos. El siguiente elemento,
dos botones de radio, permite a1 usuario elegir s61o una d e las dos alternativas. A
esto sigue un mend desplegable para elegir una d e tres opciones. El elemento final
es un bot6n de conformidad donde el usuario puede hacer clic para enviar la forma a
proceso.
l O . l . l . 1 3 Uso & mailto para recolectar los datos de lafortnu
Es cada vez mas comdn encontrar autores que no tienen acceso a otro servidor web que no
sea el h i c o a1 que tienen acceso para cargar, o subir, sus documentos de HTML. En conse-
cuencia, no tienen la capacidad de crear o administrar programas de CGI. De hecho, algu-
nos proveedores, e n especial 10s que hospedan cientos e incluso miles d e sitios, casi siem-
pre deshabilitan 10s servicios de CGI para limitar la carga e n su servidor o como medida
d e precauci6n y seguridad. Si trabaja con uno de estos sitios, las formas llegan a ser
una propuesta dificil, si no es que imposible.
Pero n o todo est5 perdido: puede utilizar un URL tip0 mai 1t o como valor del atributo
a c t i o n d e la forma. Navigator envia d e mod0 automiitico por correo electr6nico 10s diver-
sos parametros y valores de la forma a la direcci6n del URL. El receptor del correo puede
procesar la forma y tomar una acci6n en consecuencia.
Por ejemplo, a1 sustituir el siguiente c6digo por la etiqueta cforrru e n nuestro ejemplo
anterior:
<form method=POST acti on="mai 1 to:chuckandbi [email protected]"
enctype="text/pl ain"
onSubmit="~indow.alert(~Esta forma se esta enviando por correo electrdnico aun
cuando parezca que no ha pasada nada ...I)">
10s datos de la forma se envian por correo electr6nico a chuckandbi 11, sin ser procesados
por un servidor. TambiCn observe que tenemos un sencillo mensaje d e alena d e JavaScript
que aparece cuando el navegador esth listo para enviar 10s datos de la forma. La alerta le
informa a1 usuario que no espere confirmaci6n d e que 10s datos s e enviaron (figura 10-2).
Asimismo, a menos que el usuario lo desactive o usted omita el atributo method=POST, el
navegador por lo regular advierte a1 usuario que va a enviar informaci6n sin encriptar ("text/
plain") por la red y, por lo tanto, es insegura, por lo que proporciona una opci6n para cancelar
el envio. De otro modo, la forma se envia por correo electr6nico sin incidente o notificaci6n.

Figum 10-2.Advertencia sobre el envfo de unaforma medfantemot 2 to.

El cuerpo del mensaje de la forma enviada por correo electr6nico tendr6 un aspect0 similar
a Cste:

Si elige enviar una forma mediante mai 1 to, hay varios problemas con 10s que tendd que
lidiar:
Sus formas no funcionan e n navegadores que no soporten un URL tip0 mai 1t o corno
acci6n d e la forma
Algunos navegadores, corno Internet Explorer, n o colocan d e manera correcta 10s datos
d e la forma en el cuerpo del mensaje y pueden incluso abrir la ventana de correo
electr6nic0, confundiendo a1 usuario
A diferencia de la mayoria de 10s guiones de CGI, mai 1 t o n o presenta a1 usuario un
mensaje para confirmar que sus forrnas han sido procesadas. DespuCs de ejecutar la
forma mai 1 to, el usuario se queda observando, corno si nada hubiera pasado (utilice
JavaScript para superar este dilema con el manejador de eventos onsubmi t u onCl i ck).
[manejadoresde evento de JavaScript, 13.3.31
Sus datos pueden llegar d e un mod0 dificil, si no es que imposible de leer, a menos que
utilice un tip0 de codificaci6n (enctype) legible, corno text/pl ain
Sin considerar todo esto, las formas mai 1 t o son una atractiva alternativa para quien esd
lirnitado por su servidor. Nuestro consejo: utilice guiones d e CGI, si es posible siempre, y
vuelva a 10s URL tip0 mai 1 t o si todo esto falla.
10.2 Elementos de entrada para f m s 311

10.2 Elementos de entrada para formas

Usted crea la mayoria d e 10s elementos de la forma con la etiqueta <input>.

10.2.1 Etiqueta <input>

Utilice la etiqueta < i nput> para definir cualquiera d e 10s varios elementos comunes e n las
formas, incluyendo campos d e texto, listas d e selecci6n mliltiple, imlgenes sensibles a1
rat6n y botones d e envio. Aunque hay muchos atributos para esta etiqueta, s610 necesita
10s atributos type y name para cada elemento (s610 type para un botdn d e envio o restau-
raci6n; vea la explicaci6n que sigue) y, como describimos m l s adelante con detalle, cada
tip0 d e elemento d e entrada emplea s610 un subconjunto d e 10s atributos permitidos.
Puede necesitar atributos d e <input> adicionales basados e n el tip0 d e elemento que
especifique. La tabla 10-1 resume 10s diferentes atributos para < i nput>, indispensables y
opcionales.
Tabla 10-1.Atributos indispensablesy opcionales de elementos de una fonna

T
0 al al +J L
u m - m5)Y VI U al
+J L a l C Q L C U Z a l u
Q C al Y al.- n 3 m . - u - L al
a l m u v l u - o a m r - o a l w a l O Z 0 .
Etiqueta & forma
o t i p & 4 nputr
m
u . - L - a
U . - O O T m l X -
a
E + J z
u
V V L L m
u N u
~
n - m l
z z
button
checkbox
file
hidden
image
password
radio
reset
submi t
text
csel e c t >

Usted selecciona el tip0 d e elemento para la forma mediante el indispensable atributo type
d e la etiqueta < i nput>, y proporciona el nombre del campo (utilizado durante el proceso d e
envio d e la forma a1 servidor; vease tabla) con el atributo name. Aunque el valor del atributo
 Funcion:
Crea un elemento dentro de una forma
A tributos:
ACCEPT
ALING
BORDER rn
CLASS 0
CHECKED
MAXLENGTH
NAME
ONBLUE rn 0
ONCHANGE rn 0
ONCLICK 0
ONFOCUS rn 0
ONSELECT rn 0
SIZE
SRC
STYLE rn 0
rYPE
VALUE
Etiqueta de fin:
Ninguna
Contiene:
Nada
Usada en:
Contenido de forma

name es t6cnicamente una cadena arbitraria, le recomendamos emplear un nombre sin espa-
cios o puntos. Si lo limita linicamente a letras y nlimeros (sin nlimeros a1 inicio) y represents
10s espacios con el gui6n bajo 0, tendr5 menos problemas. Por ejemplo, "costo-en-dolares"
y "porcentaje-principal" son buenos nombres de elementos; "$costa" y "%principaln pueden
dar problemas.

10.2.2 Campos de texto enformas

El estsndar d e HTML le permite incluir tres tipos d e campos para introducir texto e n sus
formas: un campo d e texto convencional, un campo para introducir datos con seguridad y
un campo que nombra un archivo que se transmite como parte d e 10s datos de la forma. Los
dos primeros e s d n disponibles e n todos 10s navegadores y aceptan 10s atributos size,
rnaxlength y value. El campo de selecci6n d e archivo acepta unicamente 10s atributos
s i z e y rnaxlength.
10.2 Elementos de entrada para formas 313

10.2.2.1 Campos de texto convencionales

El mis dtil y el mis comdn elemento de una forma es el campo para introducir texto. Un
campo para introducir texto aparece en la ventana del navegador como un rectingulo vacio
de una linea y acepta s61o esa linea para que el usuario teclee inforrnaci61-1, la cual se
convierte en el valor del elemento cuando el usuario envia la forma a1 servidor. Para crear
un campo de texto e n una forma dentro del documento de HTML, ponga el atributo t y p e de
la etiqueta < i n p u t > e n t e x t . Incluya tambiCn un atributo name; es obligatorio.
QuC constituye una linea de texto difiere entre 10s navegadores. Por fortuna, HTML nos
ofrece la posibilidad, por medio de 10s atributos s i z e y maxlength, de definir el ancho, e n
caracteres, del rectiingulo mostrado para introducir texto, y la cantidad de caracteres que el
usuario puede introducir, respectivamente. El valor para cualquier atributo es un ndmero
entero igual a la cantidad m w m a de caracteres que permitid ver a1 usuario e introducir e n el
campo. Si maxlength excede a s i z e , entonces el texto se desplazari hacia atris y hacia
adelante dentro del rectingulo de texto. Si maxl ength es menor que s i z e , habri espacios
e n blanco e n el rectingulo de texto para conformar la diferencia entre 10s dos atributos.
El valor predeterminado de s i z e depende del navegador; para maxlength es ilimitado. Le
recornendamos que usted 10s establezca. Ajuste el atributo s i z e de manera que el rectingulo
de texto nose extienda m b all2 del margen derecho de la ventana del navegador (alrededor de
60 caracteres con un breve indicador para introducir texto). Establezca maxl ength a un ndmero
razonable de caracteres; por ejemplo, 2 para abreviaturas, 12 para ndmeros telef6nicos, etcetera.
Un campo para introducir texto por lo general estii en blanco hasta que el usuario teclea algo
e n C1. Sin embargo, puede definir un valor inicial para ese campo con el atributo v a l ue. Desde
luego, el usuario puede modificar ese valor. Si el usuario oprime el bot6n para restaurar la
forma, el valor del campo vuelve a su valor inicial. [botones de restauracih, 10.2.5.21
Todos estos campos para introducir texto son vilidos:
<input type=text name=comentarios>
<input type=text name=CP size=lO maxlength=lO>
<input type=text name=di reccion si ze=3O maxl ength=256>
4nput type=text name=suel do si ze=3 maxlength-3 val ue="100">
El primer ejemplo crea un cuadro de texto del ancho predeterminado y longitud mixima del
navegador. Como mencionamos antes, Csta no es buena idea, ya que las opciones predeter-
minadas varian mucho entre 10s navegadores y, con seguridad, el diseiio de su forma no
lucid bien e n algunos de ellos. Mejor defina el ancho y el ndmero miximo de caracteres
que pueden teclearse, como en el segundo ejemplo: le permite a1 usuario teclear hasta diez
caracteres dentro del cuadro de texto de diez caracteres de ancho. El servidor recibe el valor
con el nombre "CP" (c6digo postal) cuando el usuario envia la forma.
El tercer carnpo del ejemplo indica a1 navegador que muestre un cuadro de texto de treinta
caracteres de ancho donde el usuario puede introducir hasta 256 caracteres. El navegador
recorre el texto dentro del cuadro para mostrar 10s demis caracteres.
El dltimo campo d e nuestro ejemplo tiene tres caracteres de ancho; permite que el usuario
teclee solo tres caracteres y establece su valor inicial e n 100.
Observe que el segundo y cuarto campos del ejemplo implican que el usuario debe teclear
un tip0 especifico d e datos: un c6digo postal o una cantidad numerics, respectivamente.
Excepto para limitar la cantidad, HTML no proporciona ninguna opci6n para que determine
el tipo d e caracteres que puede introducir el usuario e n un cuadro de texto. Por ejemplo, e n el
dltimo campo de nuestro ejemplo, el usuario puede teclear "ABC" aunque usted lo haya desti-
nado para un valor numCrico menor que 1 000. Su aplicaci6n del lado servidor debe detec-
tar las entradas err6neas o equivocaciones, asi como verificar que la forma n o estC
incompleta, y mandar a1 usuario el mensaje d e error apropiado cuando las cosas no estCn
bien. Puede ser un proceso tedioso, asi que insistimos otra vez, proporcione instrucciones e
informaci6n clara y precisa para la introducci6n de datos. Asegdrese de que sus formas
le indiquen a 10s usuarios la clase d e datos que deben introducir, reduciendo asi la posibi-
lidad d e errores que puedan cometer cuando las Ilenen.

10.2.2.2 Campos de texto con mdscara

Como el Llanero Solitario, la miscara la tienen 10s chicos buenos en un campo de texto con
miscara. ~ s t se
e comporta del mismo modo que un campo d e texto convencional, except0
que 10s caracteres que introduce el usuario no aparecen e n pantalla: el navegador 10s oculta
para evitar que informacidn como contrasefias y otros c6digos delicados Sean vistos por ojos
indiscretos.
Para crear un campo d e texto con miscara, establezca el valor del atributo type e n password.
Todos 10s demas atributos y semantics del campo d e texto convencional se aplican a1
campo con mascara. Por lo tanto, debe proporcionar un nombre y ademis puede (y lo
recomendamos) especificar un tamafio (size) y longitud mPxima (rnaxl ength) para el cam-
po, asi como tambien un valor (value) inicial.
No se confunda: un campo d e texto con miscara no es totalmente seguro. Los datos introdu-
cidos s610 se ocultan en la pantalla; el navegador 10s transmite sin encriptar cuando la forma
se envia a1 servidor. Asi, aunque 10s ojos indiscretos no pueden verlo e n pantalla, 10s chicos
malos pueden robar la informaci6n electrhicamente.

10.2.2.3 Campopara sekccidn de archivos

Como su nombre lo indica, este campo permite a 10s usuarios seleccionar un archivo almace-
nado e n su computadora y enviarlo a1 servidor junto con la forma. Aunque es parte del
estindar d e HTML 3.2 y estin documentados por Microsoft como opciones validas, 10s
campos d e selecci6n de archivos no funcionan e n Internet Explorer 3.0; e n Navigator si.
El navegador muestra a1 usuario el campo de la forma para selecci6n d e archivos como 10s
demis campos d e texto. En Navigator se despliega acompafiado d e un b o t h con el r6tulo
"ELEGIR. .." o "BROWSE" a su derecha. Los usuarios pueden introducir directamente la ruta
e n el campo o, a1 hacer clic e n el bot6n ELEGIR.. . para seleccionar el nombre d e un archivo
almacenado e n su computadora desde un cuadro d e diilogo dado por el sistema.
10.2 Elementos de entrada para fnmas 315

Cree un campo para seleccidn d e archivos en una forma estableciendo el valor del atributo
t y p e e n f i1e. A1 igual que con 10s campos d e texto, el tamafio y la longitud mixima d e este
campo debe definirse con valores apropiados para el navegador, digamos con un campo
de 20 caracteres d e ancho, si no es necesario algo distinto. Puesto que 10s nombres de
archivos y directorios difieren mucho entre 10s diferentes sistemas, no tiene sentido definir
un valor para este campo. Por esta raz6n, no debe usar el atributo value con esta clase
d e campos d e texto.
El b o t h ELEGIR.. . asociado con el campo d e selecci6n d e archivo d e Navigator abre un
cuadro d e di4logo para seleccionar el archivo especifico que permite a 10s usuarios dar
un valor a1 campo. En este caso, la ruta del archivo seleccionado aparece e n el campo,
incluso si su longitud excede la longitud mixima especificada para el campo.
Utilice el atributo accept para limitar el tip0 d e archivos que el navegador permite que
el usuario seleccione. Su valor es una lista de c6digos de MIME separados por comas; 10s
usuarios s61o pueden seleccionar archivos cuyo tip0 coincida con 10s de la lista. Por ejem-
plo, para limitar la seleccidn a archivos de imigenes, puede agregar accept="image/*" a la
etiqueta <i nput> para selecci6n d e archivo.

A diferencia de otros elementos para introducir datos e n la forma, el campo para selecci6n
d e archivos s610 funciona de manera correcta con un metodo especifico d e transmisidn y
codificaci6n d e datos d e la forma. Si incluye uno o mis campos para selecci6n d e archivos
e n la forma, debe establecer el atributo enctype e n m u l t i p a r t / f o r r n - d a t a y el atributo
method e n p o s t . De otro modo, el campo para selecci6n d e archivos se comporta como un
campo d e texto ordinario, transmitiendo su valor (es decir, la ruta del archivo) a1 servidor
e n lugar del archivo.
Todo esto es m4s ficil d e lo que parece. Por ejemplo, aqui tenemos una forma que solicita
el nombre d e la persona y su archivo favorito:
<form enctype="multipart/form-data" method=post
action="cgi -bin/archivosU>
Nombre: <input type=text size=20 name=Nombre>
<P'
Su archivo favorito: <input type=file size=20 name=archivo>
</form>
Los datos transmitidos del navegador a1 servidor para esta forma tienen dos partes. La
primera contiene el valor del campo Nornbre; la segunda el nombre y contenido del archivo
especificado:

Lfnea para el campo de texto

.............................. 6099238414674
Content-Disposition: form-data; name="archivo"; fllename="abc"
Primera lfnea del archivo
...
Oltima 15nea del archivo
.............................. 6099238414674--
Los navegadores no revisan que el usuario haya seleccionado un tip0 d e archivo vilido.
Si no se especifica ningdn archivo, el encabezado de la parte del nombre del archivo
Content-Disposition quedari vacio. Si el archivo no existe, su nombre aparece en el
subencabezado d e nombre del archivo, pero no habri encabezado Content-Type o mis
lineas d e contenido de archivo. Los archivos vfilidos pueden tener datos no imprimibles o
binarios; no hay mod0 de restringir el tip0 d e archivo que el usuario debe seleccionar. A la
luz d e estos problemas potenciales, la aplicaci6n para procesar las formas e n el servidor
debe ser lo suficientemente robusta para manejar archivos faltantes, err6neos, muy grandes
y con formatos poco usuales o no esperados.

10.2.3 Casillas de verificacidn

Una casilla d e verificaci6n proporciona a 10s usuarios una manera Mcil y rfipida d e seleccio-
nar o "deseleccionar" un elemento de la forma. TambiCn pueden agruparse para crear un
conjunto de opciones, lo que permite que el usuario seleccione o deseleccione cualquiera
d e ellas.
La creaci6n d e casillas d e verificacidn independientes se logra estableciendo el atributo
type d e cada etiqueta <input> e n checkbox. Incluya 10s atributos name y value. Si el
elemento se ha seleccionado, contribuye con un valor cuando la forma se envia. De lo
contrario, no aporta valor alguno. El atributo opcional checked (sin valor) indica a1 navegador
que muestre una casilla d e verificaci6n marcada e incluya este valor cuando se envie la
forma a1 servidor, a menos que el usuario especificamente la deseleccione.
Los navegadores incluyen el valor d e las casillas d e verificaci6n seleccionadas (marcadas)
junto con otros parametros cuando se envia la forma a1 servidor. El valor d e la casilla d e
verificaci6n marcada es el texto que usted especifica e n el indispensable atributo value. Por
ejem plo :
<form>
i Q u e mascotas t i e n e ?
<P>
<input type=checkbox name=mascotas value="perros"> Perros
<br>
<input type=checkbox name-mascotas value="gatos"> Gatos
<br>
<input type=checkbox name=mascotas value="aves"> Aves
<br>
<input type=checkbox name=mascotas value="peces"> Peces
</form>

crea un grupo d e casillas de verificaci6n como las de la figura 10-3.

Aunque es parte del grupo, cada casilla de verificaci6n aparece como una opci6n indepen-
diente e n la pantalla. Observe tambien que, con el debido respeto a 10s amantes d e 10s
perros, pijaros y peces, hemos preseleccionado la casilla asignada a1 gato mediante el
atributo checked. Tambien hemos incluido r6tulos; 10s atributos d e valor similares no apare-
10.2 Ehentos de enhada Dma / m a s .?I 7

6 Rrchivo Edicion Uer I r Marcadores Opciones Directorio Uentana

I.. - ..-
m- ==7zz-v
. Netscape: Caslllas de uerltlcacl6n
. - - - - - - = .:=@I

Perros
E?J Gabs
A m
0 Peces

Figura 10-3.Gmpo de casillas de verllactcin.

cen e n la ventana del navegador, pero 10s valores estan incluidos en la lista de parametros
d e la forma si se selecciona la casilla y el usuario envla la forma a1 servidor. Debe utilizar
etiquetas de parrafo o salto de linea para controlar el diseiio de sus grupos de casillas de
verificacibn, como lo ha hecho para otros element05 de !as formas.
En nuestro ejemplo, si "Gatos" y "Peces" estiin marcados cuando se envia la forma, 10s
valores incluidos e n la lista d e padmetros enviada a1 servidor seria:
mascotas-gatos
rnascotas=peces

10.2.4 Botones de seleccidn

Los botones de selecci6n d e una forma (tambien conocidos como botones de radio*) son
semejantes e n comportamiento a !as casillas d e verificaci6r1, except0 que el usuario s6lo
puede seleccionar uno en un conjunto. Un bot6n de selecci6n s e crea estableciendo el
atributo type del elemento <input> e n radio. Como las casillas d e verificacibn, 10s boto-
nes d e selecci6n requieren, cada uno, de los atributos name y v a l ue. Los botones d e
selecci6n con el mismo valor de nombre son miembros de un grupo. Uno de ellos
puede estar seleccionado desde el inicio incluyc5ndole el atributo checked. Si ninglin
elemento del grupo esta seleccionado, el navegador marca el primer0 e n el grupo d e
forma automiitica.
Es conveniente que dc5 a cada b o t h d e selecci6n un valor diferente, d e mod0 que el
servidor pueda clasificarlos despuCs del envlo de la forma.
A continuaci6n presentamos nuestro ejemplo anterior reconstruido de manera que ahora
puede elegir s61o un animal como su mascota favorita (figura 10-4):

.' Algunos de nosotros somos suficientemente grandes, aunque no ancianos, para recordar cuando 10s estereos de
10s automdviles tenian botones mechicos para seleccionar una estacibn. Oprimiendo un b o t h salia el bot6n
oprimido previamente, implantando un mecanismo mednico de seleccidn de uno de varios.
 <form>
X u a l es su rnascota p r e f e r i d a ?
<P>
<i nput type=radi o narne=fa v o r i t o v a l ue='perro"> Perro
<br>
i n p u t type=radio checked narne=favori t o v a l ue="gatol'> Gato
<br>
<input type=radio name=favorito value="aves"> Aves
<br>
<input type=radio narnelfavori t o val ue="pecesl'> Peces
</form>

& Archiuo Edicion Uer Ir Marcadores Opciones Directorio Uentana

- _
,
#
, t j
iyer M k h ~Inicio
0
1WJ[j
i
&
TI J
Netscape: Batones de selectl6n

Editrr Wcaga thpms hpink Buscar

-- --

Pat-ar
.

:Cud es su mcota preferida?

Figura 10-4,Los botones de seleccidn s61o permiten una eleccidn por grupo.

De nuevo, como el ejemplo de las casillas de verificaci611, hemos inclinado nuestro sombre-
ro hacia 10s felinos, estableciendo el bot6n "Gatos" como la opci6n predeterminada. Si el
usuario elige otra (por ejemplo, "Aves") el navegador deselecciona automfiticamente la
opci6n "Gatos". Cuando la forma se envia a1 senridor, el navegador incluye s61o un valor a1
nombre "favorito" en la lista de parametros de la forma; favori to=pdjaro, si Csa fue su
elecci6n.
Puesto que uno del conjunto de botones de selecci6n siempre estP seleccionado, no tiene
sentido crear un b o t h de selecci6n linico; deben aparecer en sus documentos en conjuntos
d e dos o mPs (utilice las casillas de verificaci6n para posibilidades del tipo: encendido
/apagado, si/no).

10.2.5 Botones de accidn

Aunque la terminologia es muy confusa, existe otra clase de botones para las formas de
HTML. A diferencia de 10s botones de selecci6n y las casillas de verificaci6n descritos antes,
este tip0 especial d e elementos para introducir (4 nput>) informaci6n actda de inmediato,
sus efectos no se pueden cancelar y aceptan todo el contenido de la forma, no s61o el valor
de un campo. Estos botones de "acci6n" (a falta de un mejor termino) incluyen botones de
envio, de restauraci611, botones comunes y d e imPgenes sensibles a1 rat6n. Cuando el usua-
rio 10s selecciona, tanto 10s botones de envio como 10s de imagen hacen que el navegador
10.2 Elementos de entrada para formas 319

envie todos 10s padmetros de la forma a1 servidor encargado de procesarla. Un b o t h

normal n o envia la forma, pero puede utilizarlo para llamar c6digo de JavaScript que mani-
pule o valide la forma. El b o t h de restauraci6n a c ~ de
a manera local para volver una
forma parcialmente llena a su estado original (predeterminado). [ManeJadoresde evento
de JavaScript, 13.3.31

10.2.5.1 Botones de enufo

El bot6n de envio ( 4nput type=submi t>)realiza lo que su nombre indica: manda la forma
a1 servidor desde el navegador. Puede colocar m5s de un b o t h d e envio e n una
forma. TambiCn puede incluir 10s atributos name y value a1 b o t h de envio.
Con el bot6n d e envio m5s simple (el que carece de atributos name o value), el navegador
despliega un pequefio rect5ngulo u 6valo con el r6tulo predeterminado "Submit Query"
(figura 10-1). De otro modo, el navegador rotula el bot6n con el texto que se indica con el
atributo value. Si proporciona un atributo name, el atributo value para el bot6n de envio
se agrega a la lista de par5metros que el navegador envia en conjunto a1 servidor, lo cual es
bueno, porque le brinda un mod0 de identificar en cu5l b o t h de la forma se hizo clic,
permitikndole asi procesar cualquiera de las diferentes formas con una sola aplicaci6n para
manejarlas.
Los siguientes son botones de envio v5lidos:
<input type=submi t>
c i nput type=submi t val ue=I10rdenar kumquats">
<input type=submi t val ue="Envio Nocturne" narne="esti lo-enviol'>

TambiCn aqui el primero es el mas sencillo: el navegador despliega un bot6n, con el r6tulo
"Submit Query", que activa la secuencia para procesar la forma cuando el usuario hace clic
e n el. No agrega un elemento a la lista de parametros que el navegador pasa a la aplicaci6n
y a1 servidor que procesa las formas.
El segundo b o t h del ejemplo tiene el atributo value que permite que el b o t h mostrado
tenga el r6tulo "Ordenar kumquats", pero como e n el primer ejemplo, no incluye el valor
del bot6n e n la lista d e pariimetros de la forma.
El Cltimo ejemplo define el r6tulo del bot6n y lo hace parte de la lista de par5metros de la
forma. Cuando el usuario hace clic e n 1-51. Este ejemplo de bot6n de envio agrega el par5metro
"Envfo nocturno" a la lista de parlmetros de la forma.

10.2.5.2 Botones de restauracidn

El bot6n de restauraci6n de una forma casi se explica por si mismo: le permite a1 usuario
restaurar (borrar o volver a 10s valores predeterminados) todos los elementos e n la forma. La
diferencia con 10s dem5s botones es que un bot6n de restauraci6n no inicia el procesamien-
to de la forma sin0 que deja a1 navegador el trabajo de restablecer 10s elementos d e Qta.
El servidor nunca sabe (o no le importa) si el usuario hizo clic en el b o t h de restauraci6n.
De mod0 predeterminado, el navegador muestra un bot6n de restauraci6n con el r6tulo
"Reset", pero puede modificarlo especificando un atributo val ue con el mensaje que desee
para el bot6n.
Aqui mostramos dos tipos de botones de restauraci6n:
nput type=reset>
<i
<input type=reset val ue="Valores predeterminados">
El primero crea un bot6n con el nombre "Reset"; el navegador rotula el segundo b o t h del
ejemplo con el letrero Valores predeterminados. Ambos generan la misma respuesta que
establece 10s valores originales en la forma.

10.2.5.3 Botones de itmigenespersonaEtzadas

El tip0 image d e la etiqueta <input> crea un b o t h personalizado que es una imagen
sensible a1 clic. Es un bot6n especial creado aparte de la imagen especificada; cuando el
usuario hace clic e n 61, le indica a1 navegador que envie la forma a1 sewidor, e incluye las
coordenadas x,y del punter0 del rat6n en la lista de padmetros, de manera muy parecida a
10s mapas d e imigenes sensibles a1 rat6n que vimos en el capitulo 7. Los botones de imagen
requieren del atributo src con el URL de la imagen; tambiCn puede incluir un atributo name.
Asimismo, es posible utilizar 10s atributos a1 ign y border (s610 para Navigator) a fin de
controlar la alineaci6n de la imagen dentro de la linea actual del texto y el ancho del marco
que Navigator coloca alrededor de la imagen, respectivamente, de mod0 similar a 10s atribu-
tos a1 ign y border de la etiqueta <img> (Internet Explorer no coloca bordes a las imiigenes
4 nput> de una forma). Como nota interesante, ninguno d e 10s manejadores d e eventos de
JavaScript funciona con este tip0 d e elemento de forma, a pesar de lo que diga la documen-
taci6n del fabricante, ni siquiera onCl i ck, que pareceria obvio, puesto que la imagen actlia
como un tip0 de entrada para envio.
Veamos un par de botones de imagen viilidos:
<input typezimage src="imagenes/mapa .gi f " name=mapa>
<i nput type=i mage src=" imagenes/mapax.gi f " a1 ign=top nameZmapa>
El navegador despliega la imagen especificada dentro del flujo del contenido de la forma. La
imagen del segundo bot6n quedarii alineada con la parte superior del texto adyacente,
como especifica el atributo a1 ign. Algunos navegadores (Navigator, por ejemplo) tambiCn
agregan un borde, igual que cuando una imagen es parte de una liga (etiqueta <a>), para
indicar que la imagen es un bot6n de forma.
Cuando el usuario hace clic en la imagen, el navegador envia a1 sewidor el desplazamiento
horizontal del rat6n, e n pixeles, desde el extremo izquierdo de la imagen y el desplazamien-
to vertical desde la parte superior de la imagen. Estos valores se asignan a1 nombre de la
. .
imagen como se especifica con el atributo name, seguido de " x" y " y", respectivamente.
Asi, si alguien hace clic en la imagen anterior, el navegador envia unos parametros denomi-
nados mapa. x y mapa. y a1 sewidor.
10.2 EIementos de entrada para formas 321

Los botones d e imagen se comportan de mod0 muy similar a 10s mapas de imlgenes
sensibles a1 rat6n y, a1 igual que 10s prograrnas que procesan estos mapas, su aplicaci6n
para procesar formas puede utilizar 10s padmetros x,y del puntero del rat6n para elegir un
curso de acci6n especial. Debe utilizar un b o t h de imagen cuando requiera informaci6n
adicional para procesar la petici6n del usuario. Si un mapa d e imlgenes con ligas es todo lo
que necesita, utilice un mapa d e imlgenes sensibles a1 rat6n. Las imlgenes sensibles a1
rat6n tambien tienen el beneficio adicional de dar soporte del lado servidor para detectar de
forma automltica la selecci6n de una figura dentro de la imagen, lo que le permite utilizar
esta como un conjunto de figuras seleccionables. Los botones con imlgenes implican que
usted desarrolle el c6digo que determine el Area donde el usuario hace clic en la imagen y
c6mo esta puede traducirse para que el servidor tome una acci6n.

10.2.5.4 Botones comunes

Con la etiqueta <input type=button> crea un bot6n donde el usuario puede hacer clic pero
n o envia o restablece la forma. Puede emplear el atributo value para definir el r6tulo del
b o t h ; el atributo name, si lo especifica, hace que el valor suministrado pase a1 gui6n que
procesa la forma.
Quizl se pregunte que valor proporcionan estos botones. Poco o ninguno, a no ser que
suministre el atributo onCl ick, junto con un fragment0 de c6digo de JavaScript para
que se ejecute cuando el usuario haga clic e n el b o t h . A1 facultarlos asi, 10s botones
comunes pueden servir para validar contenido de formas, actualizar campos, manipular el
documento e iniciar cualquier actividad del lado cliente. [Manejadores de evento de
JavaScript, 13.3.31

10.2.5.5 Multiples botones en unaforma sencilla

Puede tener varios botones del mismo tipo, o diferentes, en una misma forma. lncluso las
formas mls simples tienen tanto botones de restauraci6n como de envio, por ejemplo. Para
distinguirlos, aseglirese de que cada uno tenga un atributo value diferente, pues el navegador
lo utiliza para rotular el bot6n. Dependiendo de la manera e n que programe la aplicaci6n
para procesar sus formas, tambien puede modificar el valor del atributo name para cada
b o t h , pero generalmente es mls fiicil dar nombres similares a todos 10s botones que a c ~ a n
de mod0 parecido y permitir que la subrutina de manejo de botones 10s clasifique por valor.
Por ejemplo:
<input type=submi t name=accion val ue="AgregarM>
<input type=submit name=accion value="BorrarH>
<input type=submi t name=accion val ue="Cambiar">
<input type=submi t name=accion val ue="Cancel ar">
Cuando el usuario selecciona uno de estos botones, un padmetro de la forma llamado acci on
se envia a1 servidor. El valor de este padmetro s e d uno de 10s valores asignados a1 atributo
name del bot6n. La aplicaci6n en el servidor obtiene el valor y acnia de acuerdo con 61.
Puesto que un bot6n de imagen no tiene atributo value, la dnica forma de distinguirlo entre
varios botones de imagen e n una forma es asegurarse de que todos tengan nombres
distintos.

10.2.6 campos ocultos

El dltimo tip0 de elemento de introducci6n de datos e n una forma que describiremos en
este capitulo es el que estii oculto, no se ve. No, no intentamos esconder nada. Es un mod0
de incluir informaci6n e n sus formas que no puede ser ignorada o alterada por el navegador
o el usuario. En vez de esto, 10s atributos indispensables name y value de la etiqueta <input
type=hi d d e w se incluyen de mod0 automiitico en la lista de parlmetros de la forma envia-
da. Sirven para dar titulo a la forma y pueden ser de gran utilidad cuando se clasifiquen
diferentes formas o sus versiones e n una colecci6n de formas enviadas y guardadas.
Otro uso para 10s campos ocultos es administrar las interacciones usuario/servidor. Por
ejemplo, ayudan a1 servidor a saber si la forma actual proviene de una persona que ha
hecho una petici6n similar hace unos momentos. Comdnmente el servidor no retiene esta
informaci6n y cada transacci6n entre el servidor y el cliente es totalmente independiente de
todas las demiis.
Por ejemplo, la primera forma enviada por el usuario puede solicitar informaci6n biisica,
como el nombre del usuario y su lugar de residencia. Basado e n ese contact0 inicial, el
servidor puede crear una segunda forma que solicite datos m5s especificos del usuario.
Puesto que para 10s usuarios es tedioso volver a teclear la misma informaci6n de la primera
forma, puede programar a1 servidor para que agregue esos valores e n la segunda forma
dentro de campos ocultos. Asi, cuando la segunda forma regresa, toda la informaci6n impor-
tante de ambas estl ahi, y la segunda forma se puede comparar con la primera, si es
necesario.
Los campos ocultos tambien pueden dirigir a1 servidor a una acci6n especifica. Por ejemplo,
usted puede insertar el campo oculto:
<input type=hidden name=accion val ue=cambiar>

Por lo tanto, si cuenta con una aplicaci6n del lado servidor capaz de procesar varias formas,
cada una de &as puede tener un c6digo de acci6n distinto para ayudarla a clasificar las
cosas.

10.2.7 Atributos style y class

El atributo sty1 e de la etiqueta <i nput> crea un estilo especifico para 10s elementos conte-
nidos por la etiqueta, anulando asi cualquier otra regla de estilo e n acci6n. El atributo class
le permite dar formato a1 contenido de acuerdo con una clase predefinida para la etiqueta
<input>; su valor es el nombre de esa clase. Los navegadores capaces de interpretar estilos
no pueden distinguir entre 10s distintos tipos de entrada, asi que le recomendamos que si
utiliza clases de estilo para todo, las ocupe con 10s diferentes tipos de entrada para formas.
10.2 Elematos de entrada para formas 323

Sin embargo, no olvide que las propiedades de estilo generalmente n o afectan la apariencia
d e 10s elementos d e la forma.
Por ejemplo, usted puede especificar que un elemento para introducir texto debe tener un
fondo azul y utilizar el tip0 d e letra Arial:
<input type=text namelestilo style="background: blue; font-family: ArialU>
Esto no significa necesariamente que asi s e d . Un delgado borde alrededor del lrea para
introducir texto sera azul, pero el cuadro de texto tendr5 un fondo de color blanco, y el texto
que se introduzca aparecer5 en el tip0 de letra predeterminado, no e n Arial. [atributo
style, 9.1.11 [atributo class, 9.2.41

10.2.8 Atributos notab y taborder

De mod0 predeterminado, todos 10s elementos (except0 10s ocultos) se apegan a1 orden d e
tabulaci6n d e la forma. Conforme el usuario oprime el tabulador, el navegador desplaza el
cursor d e entrada (el "foco") entre 10s elementos d e la forma. Para la mayoria de 10s
navegadores, el orden d e tabulaci6n d e 10s elementos coincide con el orden e n que aparecen
10s elementos dentro d e la etiqueta <form>. Con Internet Explorer puede especificar culles
elementos conforman el orden de tabulaci6n de la forma y su posici6n dentro d e ese orden.
Para excluir un elemento del orden de tabulaci6n, agregue el atributo notab a la etiqueta
<input>. El elemento sera omitido cuando el usuario se desplace con el tabulador a travCs
d e la forma.
Para reponer un elemento dentro del orden d e tabulaci6n utilice el atributo taborder. El
valor d e este atributo es la posici6n deseada del elemento en el orden de tabulaci6n. Si e n
realidad desea modificar el orden de tabulaci6n e n la forma, le sugerimos que incluya el
atributo taborder con un valor apropiado para cada elemento. Asi, estad seguro d e colocar
cada elemento d e manera explicita e n el orden d e tabulaci6n que usted desea, y no habra
sorpresas cuando el usuario utilice el tabulador en la forma.

10.2.7 Manejadores de evento para <input>

Los navegadores que soportan JavaScript pueden emplear cinco manejadores de evento para
10s diferentes tipos d e etiqueta 4 nput>. El atributo onCl i ck se utiliza cuando el usuario hace
clic e n una casilla de verificaci6n, b o t h de s e l e c c h , de restauraci6n o d e envio de la forma.'
Utilice 10s manejadores de evento onSel e c t , onfocus, onBl ur y onchange para crear tipos de
entrada de texto relacionados (texto, contrasefia y archivo) para cuando el usuario seleccione
un 5rea de texto de la forma a fin de introducir informaci6n, mueva el ratdn a1 cuadro de texto,
cuando se retire de este y cuando modfique el valor del texto, respectivamente.

Curiosamente,el t i p de imagen de 10s botones de entrada no soportan ningdn rnanejador de eventos Javakript;
ni siquiera el evento onCl i c k , el cual es soportado por otros tipos relacionados, ni tampoco ninguno de 10s
eventos que pueden ser utilizados con la etiqueta <img>.
El valor del atributo d e 10s manejadores de evento para 4 n p u t > e s (encerrado entre
comillas) una o una secuencia d e expresiones, metodos y referencias a funciones
d e JavaScript, separadas por el signo d e punto y coma, que el navegador ejecuta
cuando ocurre el evento. Por ejemplo, puede incluir un evento onCl ic k con el botbn d e
envio; esto llama a una rutina d e JavaScript que comprueba que la forma estC llena
antes d e enviarla al servidor que debe procesarla. Otros manejadores pueden calcular el
total d e 10s elementos seleccionados e n una lista d e compras, por ejemplo. Consulte
el apartado 13.3.3para obtener mayor informacibn sobre JavaScript y 10s manejadores d e
evento.

10.3 Areas de texto de rnriltiples lineas

Los tipos de cuadro de texto convencional y oculto limitan la entrada del usuario a una sola
linea d e caracteres. La etiqueta < t e x t a r e a > da miis libertad al usuario.

10.3.1 Etiqueta <textarea>

La etiqueta < t e x t a r e a > crea un lrea d e texto de mdltiples lineas e n la ventana del navegador.
En ella, el usuario puede teclear un ndmero casi ilirnitado de lineas d e texto. Durante el
envio d e la forma, el navegador las redne todas, separlndolas con "%OD%OA1' (retorno d e
carro/salto d e linea) y las envia al servidor como el valor d e este elemento d e la forma,
usando el nombre especificado por el indspensable atributo name.

Puede incluir texto normal dentro d e la etiqueta < t e x t a r e a > y su etiqueta d e fin. Ese texto
predeterminado debe ser simple (sin etiquetas u otros elementos d e HTML especiales). El
usuario puede modificarlo y el navegador lo utiliza como el valor predeterminado si
el usuario oprime el bot6n para restaurar la forma. Por lo tanto, este texto se incluye con
mas frecuencia para proporcionar instrucciones y ejemplos:
Hablenos de usted:
< t e x t a r e a name=di reccion col s=40 rows=4>
Su nombre
Oi r e c c i dn
Ciudad, C.P.
</textarea>

10.3 1.1 Atributos rows y cok

Un area para inuoducir varias lineas d e texto permanece en la pantalla: el contenido fluye
arriba y abajo, pero no alrededor d e ella. Sin embargo, usted puede controlar sus dimensiones
a1 asignar un valor a 10s atributos c o l s (columnas) y rows (filas) para definir el area rectangu-
lar visible que el navegador coloca para inuoducir varias lineas d e texto. Le sugerimos incluir
estos auibutos. Los navegadores comunes tienen el habit0 d e apartar la menor lrea legible
para la informacibn que contendd < t e x t a r e a > , y el usuario no puede reajustar su tamafio.
10.3 Anzas de texto de rndwples &mas 325

Funcion:
Crea un Qrea para introducir texto de mdltiples lineas
A tributos:
CLASS rn 0
COLS
NAME
ONBLUR rn 0
ONCHANGE rn 0
ONFOCUS 0
ONSELECT 0
ROWS
STYLE rn 0
WRAP 0
Etiqueta de fin:
</text area>; nunca se omite
Contiene:
Texto simple
Usada en:
Contenido de forma

Arnbos atributos requieren valores enteros para la dimensidn respectiva en caracteres. El

navegador desplaza de forma automzitica el texto que excede cualquier dimensidn.

10.3.1.2 Atrlbuto wrap

Normalmente, la informacidn que el usuario teclea en el Area de texto se transmite a1

servidor tal como se introdujo, con saltos de linea s610 donde el usuario oprime la tecla Intro.
Puesto que con frecuencia esto no es lo mls deseado por el usuario, puede habilitar la
justificacidn de las palabras dentro del lrea de texto. Cuando el usuario teclea una linea que
rebasa el ancho del Qrea de texto, el navegador mueve de mod0 automfitico el demAs texto
hacia abajo, a la linea siguiente, dividiendo la linea en las palabras mls cercanas a la orilla
del cuadro de texto.
Con el atributo wrap configurado como virtual, el texto se ajusta dentro del Area de texto
para dar una presentacidn adecuada, pero llega a1 servidor como si no hubiera ocurrido el
ajuste, except0 donde el usuario oprimid la tecla INTRO.
Con el atributo wrap establecido en physical, la informaci6n se ajusta dentro del area de
texto y se transmite a1 servidor como si el usuario en realidad la hubiera introducido d e ese
modo. Gsta es la manera mls ritil para utilizar el ajuste de texto, puesto que se transmite
exactamente como el usuario lo ve en el Qreade texto.
Para obtener la accidn predeterminada, establezca el atributo wrap en o f f .
Como ejemplo, considere 10s siguientes 75 caracteres de texto teclados e n un area d e texto
de cuarenta caracteres de ancho:
El a j u s t e d e t e x t o es una p r o p i e d a d q u e h a c e l a v i d a del u s u a r i o mas f a c i l .

Con wrap=off, el irea de texto ser5 una sola linea y el usuario tendri que desplazarse a
la derecha para ver el resto del texto. Asi, s610 una linea d e texto sera transmitida a1
servidor.

Con wrap=vi r t u a l , el 5rea d e texto tendri dos lineas de texto, divididas despuks de la
palabra "que". Pese a esto, s610 una linea de texto se transmite a1 servidor: la linea completa
sin caracteres de salto de linea.

Con wrap=physical, el irea de texto tendri dos lineas de texto, divididas despues de la
palabra "que". Pero con este valor se envian dos lineas d e texto a1 servidor, separadas por
un caricter d e salto d e linea despues d e la palabra "que".

10.3.2 Atributos style y class

El atributo s t y l e d e la etiqueta < t e x t a r e a > crea un estilo especifico para 10s elemen-
tos contenidos en la etiqueta, lo que anula cualquier otra regla d e estilo e n acci6n.
El atributo c l a s s le permite dar formato a1 contenido d e acuerdo con una clase
predefinida d e la etiqueta <textarea>; su valor es el nombre de esa clase. Recuerde que las
mismas restricciones para aplicar estilos a 10s elementos de las forrnas d e tip0 texto
tambien se aplica a la etiqueta < t e x t a r e a > (apartado 2.7). [atributo style, 9.1.11 [atribu-
to class, 9.2.41

10.3.3 Manejadores de evento para <textarea>

Los navegadores con JavaScript soportan cuatro rnanejadores de evento para la etiqueta
<textarea>. Utilice 10s manejadores d e evento onfocus, onBlur, onchange y onselect
para ejecutar, respectivamente, un programa hecho e n JavaScript cuando el usuario mueva
el rat6n e n el cuadro d e texto, lo aleje, cambie el valor del texto o seleccione el irea de
texto para introducir alguna informaci6n.
El valor del atributo para el manejador de evento es (encerrado entre comillas) una o una
secuencia d e expresiones, metodos y referencias a funciones de JavaScript, separadas por el
signo de punto y coma, que el navegador ejecuta cuando ocurre el evento. Por ejemplo,
puede asociar una ventana de alerta con el evento onFocus para que el area d e texto
transmita algunas instrucciones a1 usuario sobre que informaci6n debe introducir e n esa
irea. Consulte el apartado 13.3.3 para obtener mas inforrnaci6n sobre JavaScript y 10s
manejadores de evento.
10.4 Ekmentos de sekccidn mu'ltiple
Las casillas de verificaci6n y botones de selecci6n le dan 10s medios para crear preguntas y
respuestas de selecci6n mliltiple, pero pueden terminar en largas formas, tediosas para
escribir y confusas cuando aparecen en pantalla. La etiqueta <select>le brinda dos alterna-
tivas compactas: menlis desplegables y listas desplazables.

10.4.1 Etiqueta <select>

A1 elaborar una lista de elementos etiquetados con <option>dentro de la etiqueta <sel ect>,
crea casi por magia un mend desplegable.

Crea menlis de selecci6n h i c a y mliltiple

A tributes:
CLASS 0
MULTIPLE
NAME
ONBLUR rn 0
ONCHANGE rn 0
ONCLICK rn 0
ONFOCUS rn 0
SIZE
~'lTLErn 0
Etiqueta de fin:
<Isel ect>; nunca se omite
Contiene:
Contenido seleccionable
Usada en:
Contenido de forma

Como con otras etiquetas de forma, se requiere el atributo name que utiliza el navegador a1
enviar las opciones <select> a1 servidor. Sin embargo, a diferencia de 10s botones de
selecci6n, ninglin elemento est5 previamente seleccionado, de mod0 que si no se ha selec-
cionado alguno, no se manda ninglin valor a1 servidor cuando se envia la forma. De otro
modo, el navegador envia el elemento seleccionado o las diferentes selecciones, separadas
cada una con comas, en una sola lista de parametros, e incluye el atributo name cuando
envia 10s datos de <select> a1 servidor.
Para que el usuario pueda elegir mas d e una opci6n a la vez, agregue el atributo mu1t i p l e
a la etiqueta <select>, que hace que <select> se comporte como un elemento < i n p u t
type=checkbox>. Si no especifica mu1 t i p l e, s61o puede seleccionar una opci6n a la vez,
igual que e n un grupo de botones de selecci6n.

10.4.1.2 Atrfbuto size

El atributo s i z e determina cuantas opciones podr5 ver el usuario a la vez. Su valor debe
ser u n entero positivo. El valor predeterminado es 1 cuando s i z e no se especifica. Para
s i ze=l, si no especifica el parametro mu1 t i ple, por lo regular el navegador despliega la
lista < s e l e c t > como un mend desplegable. Los valores de tamafio (size) mayores a 1 o
especificando el atributo mu1 t i p l e , provocan que < s e l e c t > aparezca como una lista
desplazable.
Aqui hemos convertido nuestro ejemplo anterior de casillas de verificaci6n en un mend
desplazable y de selecci6n mdltiple. Observe tambiCn que el atributo s i z e indica a1 navegador
que muestre el men6 con tres opciones:
iQue rnascota t i e n e ?
csel e c t narne=rnascotas size=3 mu1 t i p l e >
<option>Perros
<option>Gatos
coption>Ave
c o p t i on>Peces
else1 e c t >

El resultado aparece e n la figura 10-5, junto con la apariencia que toma el mend cuando el
atributo s i z e se establece e n 1 y no se especifica el atributo mu1t i p l e .

6 flrchiuo Edicion Uer Ir Marcadores Opciones Directorio Uentana

-
g -7 --
--= Netscape: atribtito size c - - - -.
-- --=--
I-
33 ->-

Regesa &!&Ax hick

j lm
Editar R w y r tdpwz hpni+ Buscar
l FlPat jr
1~11
i Q mascota
~ tiene?

..I.--IFN Ave

Fgura 10-5. Un elemento cse lect>; a la irquierda con s f z e = l y a la derecha con s i z e =3.
10.4.1.3 Manejadores d e e v e n t o p a r a Qe&ct>
Los navegadores con JavaScript soportan cuatro manejadores de evento para la etiqueta
<sel ect? onFocus, onBl ur, onchange y onSel ect, que sirven, respectivamente, para eje-
cutar un programa de JavaScript cuando el usuario mueve el rat6n dentro del elemento
<select>, lo aleja de 61, cambia el valor del elemento y cuando lo selecciona.
El valor del atributo manejador de evento es (encerrado entre cornillas) una o una secuencia
de expresiones, metodos y referencias a funciones de JavaScript, separadas por el signo punto
y coma, que el navegador ejecuta cuando ocurre el evento. Por ejemplo, puede asociar una
ventana de alerta medante el evento onFocus con el Qrea de texto a fin de transmitir algunas
instrucciones a1 usuario acerca de quC informad6n debe introducir. Consulte el apartado
13.3.3 para obtener mQsinformaci6n acerca de JavaScript y 10s manejadores de evento.
10.4.1.4 Atrfbutos sty& y class
El atributo s t y l e d e la etiqueta <select> crea un estilo especifico para el texto contenido
por la etiqueta, lo que anula cualquier otra regla de estilo e n acci6n. El atributo c l a s s le
permite dar formato a1 contenido de acuerdo con una clase predefinida de la etiqueta
<select>; su valor es el nombre de esa clase. No olvide que pocas propiedades de estilo
afectan a un elemento de la forma, y ninguna afecta su contenido interno. [atributo style,
9.1.11 [atributo class, 9.2.41

10.4.2 Etiqueta <option>

Utilice la etiqueta <option> para definir cada componente dentro de un elemento <sel ect>
de la forma.
El navegador muestra el contenido de la etiqueta <opt ion> como un elemento dentro del
mend o lista desplegable de la etiqueta <sel ect>, de modo que debe ser s610 texto simple,
sin a l g h otro tip0 de marca.

10.4.2.1 Atrltnrto value

Utilice el atributo value para asignar un valor a cada opci6n que el navegador envia a1
servidor si la selecciona el usuario. Si no especifica este atributo, el valor de la opci6n se
define por el contenido de la etiqueta copti on,.
Como ejemplo, considere estas opciones:
copti on v a l ue=Perro>Perro
<option>Perro
Ambas tienen el mismo valor. La primera se establece de manera explicita dentro de la
etiqueta <opt i on>; la segunda se determina por el contenido de la misma etiqueta <option>.
 Funcion:
Define opciones disponibles dentro de un mend < s e l e c t >
Atributos:
CLASS 0
SELECTED
n-YL.E 0
VALUE
Etiqueta de fin:
</option>; siempre se omite
Contiene:
Texto simple
Usada en:
Contenido de menu

10.4.2.2 Atributo selected

De mod0 predeterminado, todas las opciones seleccionables dentro de un mend etiquetado
con < s e l e c t > no e s t h seleccionadas. Incluya el atributo s e l e c t e d (seleccionada) (sin nin-
glin valor) dentro d e la etiqueta <option> para preseleccionar una o mas de ellas, que el
usuario luego puede o no seleccionar. Las etiquetas <sel e c t > simples seleccionan la prime-
ra opci6n si no preselecciona de manera explicita alguna.

10.4.2.3Atributos style y class

El atributo s t y l e de la etiqueta <option> crea un estilo especlfico para el texto contenido
en la etiqueta, lo que anula cualquier otra regla de estilo en acci6n. El atributo c l a s s le
permite dar formato a1 contenido de acuerdo con una clase predefinida de la etiqueta
<option>; su valor es el nombre de esa clase. No olvide que pocas propiedades de estilo
afectan a1 elemento de la forma, y ninguna a su contenido interno. [atributo styl e, 9.1.11
[atributo cl ass, 9.2.41

10.5 Creacidn de formas efectivas

Creada d e manera adecuada, una forma puede proporcionar una interfaz de usuario
efectiva para 10s lectores. Con algunos trucos de programacih del lado servidor, puede usar
formas para personalizar 10s documentos de HTML que les presenta e n el Web y, por
consiguiente, incrementar de manera significativa el valor de sus paginas.
10.5.1 Restricciones &l nauegador
Lo rnisrno que con otros elernentos de HTML, 10s navegadores tienen habilidades variables
para mostrar y manejar las forrnas.

10.5.1.1 Limitaciones del navegador

A diferencia d e otras interfaces grificas de usuario, las ventanas del navegador son estPticas,
tienen poca o nula capacidad para validar datos e n tiempo real, por ejemplo, o para actua-
lizar 10s valores e n una forma basada en 10s datos introducidos, para proporcionar a 10s
usuarios soporte y guia.' Por consiguiente, las formas pobremente diseiiadas pueden ser
dificiles d e llenar.
Asegdrese de que sus formas auxilien a1 usuario tanto como sea posible para lograr que las
llenen correctamente. Ajuste el tamaiio d e 10s campos d e texto para dar una idea d e lo que
puede ser una entrada aceptable; por ejemplo, campos para c6digo postal de 5 (o d e 9 para
10s nuevos) caracteres de ancho. Utilice casillas de verificaci611, botones y listas de seleccibn
siempre que le sea posible para reducir la lista de elecciones que el usuario deba hacer.
Aseglirese d e docurnentar lo mejor posible sus formas. Explique c6rno llenarlas, ofreciendo
ejemplos para cada campo. Proporcione ligas adecuadas a la documentaci6n a fin d e que
describan cada campo, si lo considera necesario.
Asegdrese de que cuando se envia la forma la aplicaci6n del lado servidor valide de rnanera
exhaustiva 10s datos del usuario. Si se descubre un error, presente a1 usuario mensajes
d e error inteligentes y posibles correcciones. Uno de 10s aspectos rn4s frustrantes a1 llenar
formas es tener que comenzar desde el principio cuando el servidor descubre un error. Para
aliviar esta rnolestia y las reacciones desagradables en sus lectores, emplee tiempo y recur-
sos adicionales e n el lado servidor para que devuelva la forma llenada por el usuario con 10s
campos que requieren carnbios bien seiialados.
Aunque todas estas sugerencias requieren de un esfuerzo adicional de su parte, darin buenos
resultados a1 hacer esta tarea mis fPcil a sus usuarios. Recuerde, usted escribirl el c6digo de
HTML para la forma s610 una vez, per0 esta puede ser usada miles, incluso millones de veces.

10.5.1.2 Manejo de pantallas Umttadas

El cliente mis corndn del Web es una computadora con Windows y una pantalla d e 640 x
480 pixeles. La ventana real para ver docurnentos es casi siempre d e aproximadamente 600
x 400 pixeles; cerca d e 75 caracteres d e ancho y d e 30 a 50 lineas de alto. Debe diseiiar sus
formas (y todos sus documentos) d e rnodo que Sean claros cuando se vean e n pantallas con
estas dimensiones.

' Esto no es del todo cieno. Aunque HTML no proporciona validacih de datos y sopone para el vsuario, es
posible incluir applets de Java o JavaScript a 10s elementos de la forma; ellos realizan un muy buen trabajo de
validaci6n para 10s datos a1 actualizar 10s campos de la forma que dependen de lo que introducen 10s usuarios, y
guiarlos a traves de sus formas.
Debe estructurar su forma para que se desplace de forma natural dentro de dos o tres
secciones 16gicas. El usuario puede llenar la primera secci6n y desplazarse a la siguiente
piigina; llenarla y desplazarse a otra piigina, y asi sucesivamente.
TambiCn debe evitar elementos de entrada anchos. Es muy dificil tratar con un campo
de texto donde es necesario desplazarse o 4reas de texto donde el usuario debe recorrer
el documento horizontalmente para poder ver partes adicionales del elemento.

10.5.2 Consideraciones de la interfaz de usuario

Cuando usted decide crear una forma, d e inmediato asume otro papel: el d e u n
diseiiador d e interfaces de usuario. Aunque una explicaci6n completa acerca del diseiio de
interfaces d e usuario rebasa el objetivo de este libro, le ayudaran algunas reglas d e disefio
basicas para crear formas efectivas, atractivas.

10.52.1 Dfseito bdsico de la i n t e r f a de usuario

Cualquier interfaz de usuario se percibe de manera simultPnea en varios niveles. Las formas
no escapan a esto. En el nivel m h bajo, su cerebro reconoce formas dentro del documento
e intenta categorizar sus elementos. En un nivel m4s alto, usted lee las guias e indicadores
para introducir texto, tratando de determinar que tip0 de informaci6n se le solicits. En el
nivel mPs alto, busca lograr un objetivo con la interfaz como herramienta.
Una buena forma considera estas tres necesidades perceptivas. Los elementos d e entrada
deben organizarse en grupos 16gicos, de mod0 que su cerebro pueda procesar el disefio de
la forma en segmentos de campos relacionados. Indicadores consistentes y claramente escri-
tos para solicitud d e entrada y texto d e apoyo y orientaci6n para el usuario a fin d e
que teclee la informaci6n corrects. Los indicadores de entrada de texto recuerdan tambikn a
10s usuarios la tarea presente y refuerzan el objetivo de la forma.

Los usuarios procesan formas en un orden predecible, un elemento despuCs de otro, bus-
cando el siguiente cuando terminan con uno. Para satisfacer este proceso de bdsqueda,
debe diseiiar sus formas de tal mod0 que un campo conduzca de manera natural a otro y 10s
campos relacionados conformen grupos. Y, de mod0 similar, 10s grupos deben conducir
naturalmente a otro y tener una estructura coherente.
Simplemente encadenar varios campos n o deriva en una forma eficiente. Debe ponerse en
el lugar de sus usuarios, quienes usar4n la forma por primera vez. PruCbela con amigos y
colegas antes de ponerla a1 alcance del pdblico en general, ~ E f4ciI
s determinar su prop6si-
to? iD6nde comienzan 10s datos que se deben llenar? ~ P u e d elocalizar el usuario el b o t h
para enviar la forma? iHay la posibilidad d e confirmar decisiones? ~Comprenden10s lectores
lo que se espera de ellos en cada campo?
Sus formas deben conducir a1 usuario d e manera natural a travCs del proceso d e suministrar
10s datos necesarios para la aplicaci6n. Usted no solicitaria la direcci6n d e un usuario
antes d e preguntar su nombre; asi, otras reglas pueden determinar el orden d e otros grupos
de elementos d e entrada. Para ver si su forma e n realidad funciona, ase@rese d e que puede
verla e n diferentes navegadores, y solicite la ayuda d e varias personas para llenarla y hacer
comentarios sobre su eficiencia.

10.5.3 Buena forma, hombre expm*mentado

A primera vista, la regla biisica d e HTML (contenido, no estilo) parece estar en oposici6n
directa a la regla b%sicad e un buen disefio d e interfaz (disefio precis0 y coherente). Aun asi,
es posible recurrir a algunos elementos de HTML para mejorar en gran medida el diseiio y
legibilidad d e la mayoria d e las formas.
El disefio tradicional d e p%ginaemplea un estilo d e columnas y renglones para alinear ele-
mentos comunes e n una plgina. El resultado implica "bordes" verticales y horizontales de
elementos adyacentes que dan una sensacidn d e orden y organizaci6n a la piigina, y facilitan
la exploraci6n y seguimiento por la via visual.
HTML lo dificulta, pero usted puede seguir la misma clase d e disefio para sus formas. Por
ejemplo, puede agrupar elementos relacionados y separar grupos con pgrrafos vacios o
lineas horizontales.
La alineaci6n vertical es muy dificil pero no imposible. En general, las formas son m%s
fiiciles de usar si arregla 10s elementos verticalmente y 10s alinea con respecto a un margen
cornfin. Un disefio popular d e forma mantiene el borde izquierdo d e 10s elementos de
entrada alineado, con 10s r6tulos d e 10s elementos inmediatamente a la izquierda. Esto
se logra usando tablas para colocar y alinear cada elemento de forma y su r6tulo. Veamos
nuestro ejemplo d e forma anterior, con 10s r6tulo.s o titulos colocados e n la primera columna
y 10s elementos correspondientes e n la segunda:
<form method=POST action=llhttp://wmr.kumquat.com/ejemplo"~
<tab1 e border=O>
<tr valign=top>
<td a1 ign=right>Nombre:</td>
<td a1 i gn=l e f t s 4 nput typeztext name-nombre size.32 maxl ength.80~
/td>
</tr>
<tr val ign=top>
<td a1 ign=right>Sexo:</td>
<td a1 ign=left>
<input type=radfo name=sexo val ue="M">Mascul ino<br>
<input type=radio name=sexo val ue="F">Femenino
</td>
</tr>
<tr val i gn=top>
<td a1 i gn=ri ght>Ingresos :</td>
<td a1 ign=left>
 <select name=ingresos si ze=l>
<option>Menos de $25 000
<option>de $25 001 a $50 000
<option>MSs de $50 001
<Isel ect>
</td>
</tr>
<tr valign=top>

-I
<td col span.2 a1 ign=center>
<input type-submit value="EnviarW>
</td>
</ t r>
</table>
</form>

Observe que en la forma resultante, mostrada en la figura 10-6, la tabla coloca cada elemen-
to d e entrada e n la misma fila o linea que su respectivo r6tulo. Los atributos a1 i g n e n las
celdas d e tabla colocan a 10s elementos a la derecha y 10s r6tulos a la izquierda, lo que crea
un margen vertical a lo largo de la forma. A1 abarcar la celda que corresponde a1 b o t h de
envio, la dltima linea se centra con respecto a toda la forma. En general, utilizar las tablas
de esta manera hace el disefio d e sus formas mas ficil y coherente.

6 Rrchivo Edicion Uer Ir Marcadores Opciones Directorio Uentena

l!K------ Netscape: Alinear 10s elementos en une forma -~q
mI&1CnIAIBPLim

' (
Nombre: [

Figura 10-6. Use un m r g e n vertical coherente para alinear 10s elementas de la f o r m .

Puede encontrar otras maneras tambiCn coherentes para diseiiar sus formas. La
clave es hallar un estilo d e diseiio dtil que trabaje bien con la mayoria d e 10s navega-
dores y conservarlo. Aun cuando HTML tiene herramientas limitadas para controlar
disefio y posici6n, aproveche lo disponible para hacer sus formas mas atractivas y faciles
de usar.
10.6 fiogramaddn cleformas
Si crea formas, tarde o temprano tendri que crear la aplicaci6n del lado servidor que las
procese. No tema. No hay ninguna magia en la programaci6n del lado servidor, ni es
demasiado dificil. Con un poco de prictica y algo de perseverancia, podri crear aplicacio-
nes para procesar sus formas.
El consejo rnis importante que podemos darle para la programaci6n de formas es ficil de
recordar: copie el trabajo de otros. Escribir una aplicaci6n para procesar formas desde el
inicio es bastante dificil; copiar una que funciona y modificarla para que soporte sus formas
es rnis ficil.
Afortunadamente, 10s fabricantes de servidores conocen esto y por lo regular proporcionan
aplicaciones para formas junto con sus servidores. Busque bien un directorio llamado cgi-
src y descubriri varios ejemplos dtiles que puede copiar y utilizar con facilidad.
Nosotros no podemos duplicar todo el material dtil que viene con su servidor, ni podemos
proporcionar un tratado completo acerca de programaci6n para formas. Lo que si pode-
mos hacer es ofrecer un ejemplo sencillo tanto de aplicaciones GET como POST, y darle una
idea del trabajo necesario, esperando que usted siga en la direcci6n correcta.
Antes de comenzar, recuerde que no todos 10s servidores manejan estas aplicaciones del
mismo modo. Nuestros ejemplos abarcan la extensa clase de servidores derivados del servi-
dor original de H'TTP creado por el NCSA. Tambikn deben funcionar con la familia de
servidores de Netscape Communications y con el servidor de dominio pdblico Apache. En
todos 10s casos, consulte la documentaci6n de su servidor para ver detalles mls completes.
Encontrari rnis informaci6n detallada en CGZ Programming for the World Wide Web y en
WebMasterin a Nutshell, ambos publicados por O'Reilly & Associates.

10.61 Resultados dkwueltos

Antes de comenzar, debemos explicar c6mo finalizan las aplicaciones del lado servidor:
todas devuelven sus resultados a1 servidor (y luego a1 usuario) escribikndolos a la salida
estindar de la aplicaci6n como un archivo codificado de tip0 MIME. Por lo tanto, la
primera linea de la salida de la aplicaci6n debe ser un descriptor MIME del tip0 de conteni-
do. Si su aplicaci6n devuelve un documento de HTML la primera linea serl:

La segunda linea debe estar completamente vacia. Su aplicaci6n puede devolver algdn otro
tip0 de contenido, s61o incluya el tip0 de MIME correcto. Por ejemplo, una imagen GIF
estaria precedida con:
Content-type: image/gif
El texto generic0 que no es interpretado como HTML puede ser devuelto con:
Content-type: text/pl ai n
A menudo, esto es dtil para devolver la respuesta de otros comandos que generan texto
simple e n vez de HTML.

10.62 Manejo deformas con GET

Uno de 10s dos mCtodos para enviar 10s parfimetros de una forma del cliente a1 servidor es
GET. En este caso, 10s parfimetros se pasan como parte del URL que llama a la aplicaci6n
para procesar formas del lado servidor. Un caso tipico para llamar a una aplicaci6n de tip0
GET puede usar un URL como Cste:
http://www. kumquat .com/cgi -bi n/proceso-get?nombre=pepe&tel=555-1212
Cuando el servidor procesa este URL, llama a la aplicaci6n procesoset almacenada e n el
directorio cgi-bin. Todo lo que aparece despuCs del signo de interrogaci6n pasa a la aplica-
ci6n como parfimetros.
Haga una divergencia e n este punto, debido a la naturaleza del URL tip0 GET. Aunque las
formas colocan pares nombre/valor en el URL, es posible llamar a una aplicaci6n tip0 GET
con valores s61o e n el URL. De este modo,
http://www. kumquat .com/cgi -bi n/proceso-get?pepe+555-1212
tambien es una solicitud valida, con parametros separados por el signo d e suma (+). 6ste es
un llamado comun cuando se hace referencia a la aplicaci6n por medio de un documento
rastreable que tiene la etiqueta <i
s i ndex>. Los parfimetros introducidos por el usuario e n el
campo de texto del documento pasan a la aplicaci6n del lado servidor corno parametros sin
nombre separados por signos de suma.
Si llama a una aplicaci6n tip0 GET mediante parametros con nombre, el servidor 10s envia
a la aplicaci6n que procesa la forma; 10s parametros sin nombre pasan de mod0 distinto.

10.62.1 Uso de pardmetros con nombre en apUcaciones tip0 GET

Los parametros con nombre pasan a las aplicaciones tip0 GET mediante la creaci6n de una
variable de ambiente llamada QUERY-STRING y estableciendo su valor a la parte completa
del URL que sigue a1 signo de interrogaci6n. De vuelta a nuestro ejemplo anterior, el
valor de QUERY-STRING se establecena como:
nombre=pepe&tel=555-1212
Su aplicaci6n debe obtener esta variable y extraerla de 10s pares de parametros nombre/
valor. Por suerte, la mayoria de 10s servidores vienen con un conjunto d e rutinas que
realizan esta tarea, de mod0 que un simple programa en C que obtiene 10s padmetros
podria ser muy similar a1 que mostramos aqui:

#def ine ENTRADAS-MAX 10000

t y p e d e f s t r u c t { c h a r *name;
char *val;
)entry;

char *makeword(char * l i n e , c h a r stop) ;

char xZc(char *what) ;
void unescape-url ( c h a r * u l r) ;
void p l ustospace(char * s t r ) ;

m a i n ( i n t argc, c h a r *argv[])

{ e n t r y e n t r i e s [ENTRADAS-MAX] ;
i n t num-entries, i;
c h a r * q u e r y - s t r i ng;

/* Obtiene e l v a l o r de l a v a r i a b l e de ambiente QUERY-STRING*

q u e r y - s t r i ng = getenv("QUERY-STRING") ;

/* E x t r a e 10s parametros y crea una t a b l a */

f o r (num-entries = 0; query-string[O] ; num-entries++) (
e n t r i e s [num-entries] . v a l = makeword(query-stri ng, '&I. ;

p l u s t o s p a c e ( e n t r i e s [num-entries] . v a l ) ;
unescape-url ( e n t r i e s [num-entri es] .val ) ;
entries[num-entries] .name =
makeword(entries[num-entries] . v a l e ' = I . , .
I
/* Crea 1a p l a n t i l l a de HTML */
p r i n t f ("Content-type: t e x t / h t m l \nu) ;
p r i n t f ("\nu) ;

p r i n t f ("html>");
p r i n t f ("<head>") ;
p r i n t f ("<ti tl e>Eco d e l parametro 11amado</title>\nl') ;
p r i n t f ("</head>") ;
p r i n t f ("<body>") ;
p r i n t f ("Usted i n t r o d u j o 10s s i g u i e n t e s parametros:\nl') ;
p r i n t f ("<ul>\nl') ;

/*Devuel ve medi a n t e eco 1os parametros */

f o r ( i = 0; i < num-entries; i++)
p r i n t f ("4i > 5s = %s\nl', e n t r i e s [ i ] .name,
entries[i] .val) ;
 /* Y termina la plantil la*/
printf ("</ul>nn);
printf ("</body>\nU) ;
printf ("</html>\nU) ;
1
Este programa comienza con algunas declaraciones que definen las rutinas que rastrean una
cadena de caracteres y extraen 10s nombres y valores de pargmetros.' El cuerpo del programa
obtiene el valor de la variable de ambiente QUERY -STRING por medio de la llamada del sistema
conocida como getenv 0 ,utiliza las rutinas para extraer 10s padmetros de ese valor y despues
genera un documento de HTML simple que 10s devuelve en forma de "eco" a1 usuario.
Para aplicaciones reales, usted querrs insertar su c6digo de procesamiento real despues de
extraer un padmetro y antes de generar la salida de HTML. Por supuesto, tambien tendd
que modificar la salida generada e n HTML para igualar la funcionalidad de su aplicaci6n.

10.62.2 Uso de pardmetros sin nombre con aplicaciones tipo GET

Los par5metros sin nombre pasan a la aplicaci6n como pargmetros de linea de comando.
Esto hace casi baladi escribir la aplicaci6n del lado servidor. Aqui mostramos un gui6n de
interprete de comandos (un gui6n de shell) que descarga 10s valores de 10s padmetros
de vuelta a1 usuario:
#!/bin/csh -f
#
# Devuelve parametros a1 usuario
echo
echo
echo '<html>'
echo '<head>'
echo '<title>Eco de parametros sin nombre</titlerl
echo '</head>'
echo '<body>'
echo 'Usted introdujo 10s siguiente parametros':
echo '<ul>'
foreach i ($*)
echo '<li>' $i
end
echo '</ulrl
echo '</body>'
exit 0
De nuevo, seguimos el mismo estilo general: salida del encabezado generic0 de un docu-
mento que incluye el tip0 de contenido MIME, seguido por 10s parsmetros y una "plantilla".

* Estas rutinas por lo regular son suministradas por el fabricante del servidor. No son parte de las bibliotecas
estindares de C o UNIX.
Para convertir esto en una aplicaci6n real, rernplace el ciclo foreach por cornandos que
realrnente hagan algo.

10.63 Manejo de formas con POST

Las aplicaciones que utilizan parirnetros estilo POST esperan leer en sus entradas estindar
parirnetros codificados. Corno en el caso de las aplicaciones estilo GET con parirnetros con
nornbre, 10s par4rnetros POST pueden aprovechar las rutinas del servidor para analizar estos
parirnetros.
Aqui tenernos un prograrna que devuelve corno eco 10s parirnetros estilo POST a1 usuario:
Xi nclude <stdio.h>
tincl ude <stdl i b.h>
Xdef i ne MAX-ENTRI ES 10000
typedef struct {char *name;
char *val;
I entry;
char *makeword(char *line, char stop) ;
char *fmakeword(FILE *f, char stop. int *len);
char xZc(char *what) ;
void unescape-url (char *url ) ;
void pl ustospace(char *str) ;
main(int argc, char *argv[])
{ entry entries [MAX-ENTRI ES] ;
int num-entries,i;
/* Anal iza pardmetros desde stdin, y construye una tabla */
for (num-entries = 0; !feof (stdin) ; num-entries++) {
.
entries[num-entries] .val = fmakeword(stdin, ' & ' &cl);
pl ustospace(entries [num-entries] .val) ;
unescape-url (entries [num-entries] .val);
entries [num-entries] .name =
makeword(entries [num-entries] .val , ' = ' ;
I
/* Crea 1 a planti 1 1 a de HTML */
printf ("Content=type: text/html \nu) ;
pri ntf ("\nu) ;
pri ntf ("<html>") ;
printf ("<head>") ;
pri ntf ("<ti tl e>Eco de pardmetros, 1 1 amados</ti tl e>\nM) ;
printf ("</head>") ;
pri ntf ("<body>") ;
printf("Usted introdujo 10s siguientes pardmetros;\nH);
pri ntf ("<ul>\nU);
 /* Devuelve mediante eco 10s parametros */
for(i = 0; i < num-entries; i++)
printf(I1<li>%s = %s\nW, entries[i] .name,
entriesri] . v a l ) ;
/* Y termina la plantilla */
printf ("</ul>\n");
pri ntf ("</body>\n");
printf ("</html>\n");
1
De nuevo, seguimos la misma forma general. El programa comienza declarando las diferen-
tes rutinas necesarias para analizar 10s padmetros, junto con una estructura de datos para
mantener la lista de kstos. El cddigo real comienza a leer la lista de parlmetros desde la
entrada estindar y construye una lista de nombres y valores de parlmetros en el arreglo
llamado e n t r i e s . Cuando esto se completa, el encabezado de un documento generador de
"plantillas" se escribe en la salida estlndar, seguido por 10s padmetros y alglin texto posi-
ble.
Igual que 10s d e m h ejemplos, este programa es prlctico para verificar 10s padmetros que
pasan a la aplicacidn servidor mientras que estC alin a1 inicio del proceso de depuraci6n
de la aplicaci6n y de su forma. Tambikn puede utilizarlo como esqueleto para otras aplica-
ciones insertindole cddigo despuCs de construir la lista de padmetros y modificando la
seccidn de salida para devolver 10s resultados apropiados.
 En este capltuh
El modelo de tabla de
HTML
Etiquetas de tabla
Extensiones para tablas
& Internet Explorer
Mbsallddelastablas
ordinarias
Tablas

De todas las extensiones que encontraron su camino en el estandar d e HTML 3.2, ninguna
ha sido m i s bienvenida que las tablas. Aunque las tablas d e HTML son citiles para ver datos
tabulares, tambiCn tienen un papel importante en el diseiio d e documentos. El uso creativo
d e las tablas, como veremos en este capitulo, puede implicar un largo camino para lograr un
diseiio que d e otra manera seria torpe. Y puede aplicar todos 10s estilos de HTML a 10s
diferentes elementos d e una tabla para lograr la apariencia d e la edici6n profesional.

11.1 El modelo de tabla de HTMI

El modelo esdndar de HTML para tablas es bastante directo: una tabla es una colecci6n d e
nQmerosy palabras arreglada y relacionada en filas y columnas de celdas. La mayoria d e las celdas
contiene el valor de 10s datos; otras, 10s encabezados de filas y columnas que describen a 10s datos.
Usted define una tabla e incluye todos sus elementos entre la etiqueta <tab1 e> y su corres-
pondiente etiqueta d e fin, </tab1 e>. Los elementos de la tabla, incluyendo 10s datos, enca-
bezados d e fila y columna y leyendas, tienen su propia etiqueta. De arriba abajo y de
izquierda a derecha, usted define, en secuencia, el encabezado y datos para cada celda
d e una columna a travks d e la tabla, y contincia asi hasta el fin, fila por fila.
Los navegadores mPs recientes tambiCn soportan una colecci6n extendida d e atributos d e
etiqueta que logran que sus tablas luzcan mejor, incluyendo alineaci6n especial d e 10s
elementos d e la tabla y encabezados, bordes y lineas, asi como el ajuste automPtico d e las
celdas para alojar su contenido. Los navegadores mas populares tienen conjuntos d e atribu-
tos d e tabla ligeramente distintos; sefialaremos esas variaciones conforme avancemos.
11.1.1 Contenido de l a tabla
En una celda puede colocar casi cualquier cosa que pueda poner en el cuerpo de un
documento de HTML, incluyendo imfigenes, fonnas, lineas, encabezados, incluso otra tabla.
El navegador maneja cada celda como una ventana, haciendo fluir el contenido para ajustar-
se a1 espacio de la celda, pero con algunas medidas y extensiones de formato especiales.

1 1.1.2 Ejemplo de tabla

Veamos un ejemplo breve que debe satisfacer su inquieta curiosidad de que aspect0 tiene
una tabla d e HTML en c6digo fuente y cuando se presenta a1 usuario como en la figura 11-
1. Alin mfis importante, le dark la estructura bfisica de una tabla, de la que podra inferir
muchos elementos, sintaxis y orden de etiquetas, atributos, etcetera, 10s cuales aprended
conforme lea las siguientes descripciones en detalle:
<tab1 e border cell spaci ng=0 cel lpaddi ng=5>
<caption align=bottom>
Kumquant contra un ojo golpeado. por sexo</caption>
<tr>
ctd col span=2 rowspan=Z></td>
<th col span=2 a1 ign=center>Preferenci as</th>
c/tr>
<tr>
<th>Comer kumquats</th>
<th>Gol pear en el ojo</th>
</tr>
<tr align=center>
<tr rowspan=2>Sexo</th>
<th>Mascul ino</th>
<td>73%</td>
<td>27%c/td>
</tr>
<tr align=center>
<th>Femeni no</th>
<td>l6%c/td>
<td>84%</td>
</tr>
</tab1 e>

1 1.1.3 Caracteristicas olvidadas

Las tablas de HTML actualmente no tienen todas las caraaeristicas d e una herramienta mfis
completa para crear tablas como las que puede encontrar e n un procesador de texto popu-
lar. Para no dejarlo en suspenso, listaremos esas limitaciones que enfrentad para evitar que
11.1 El mo&h de tabla de WTML 343

6 File Edit Options Nauigate Rnnotate

-R I [
Lb-5

d6 ~ ~ lI ~
~ s w o t o m a tabla m
-
-~
Aspecto de une tabla en diferentes navegadores

I -
i ~-
-
l
Y
Kumauat e o n m mm o k uobeado. Bar sex0

Ftgura 11-1. Ejemplo de tabla hecha con H7ML e interpretada por Navigator (art-iba) ypor
Mosaic (abajo).

e n la desesperaci6n golpee su cabeza contra la pared a1 intentar hacer algo que simplemen-
te n o se puede hacer (por lo menos, no todavia):

El problema general para alinear texto en HTML trasciende hasta las tablas. Usted puede
alinear valores dentro d e sus respectivas celdas, pero no puede alinearlos entre diferen-
tes celdas. Por ejemplo, no puede alinear 10s puntos decimales en una columna de
nfimeros, aun cuando todos puedan tener el mismo n6mero de digitos, a menos que
utilice uno de 10s estilos d e fuente monoespaciados
Navigator e Internet Explorer le permiten establecer el grosor de la tabla y de 10s bordes
d e celda. Navigator permite s61o un tamaiio para 10s bordes y lineas de la tabla; Internet
Explorer tiene medidas limitadas para cambiar el ancho d e una linea entre el encabeza-
do, el cuerpo y las leyendas de una tabla
Excepto en Internet Explorer, las tablas d e HTML n o tienen encabezados o leyendas del
ancho de la tabla. Por supuesto, estas cosas no imponan con un navegador donde todo
estP en una sola pfigina, infinitamente larga, sin fin. Es atractivo tener encabezados y
leyendas d e este tipo, aunque deba imprimir la tabla en varias hojas d e papel
344 Capftulo 11: Tabhs

11.2 Etiqaetas de tabla

Puede crear una amplia variedad d e tablas con s61o cinco etiquetas: <tab1 e>, que delimita
una tabla y sus elementos en el cuerpo del documento d e HTML; < t r > , que define una fila
en la tabla; <th> y <td>, que definen las celdas d e encabezados y d e datos; y <caption>,
que define un titulo o leyenda para la tabla. Cada etiqueta tiene uno o m5s atributos indis-
pensables y opcionales; algunos afectan no s61o a la misma etiqueta, tambiCn a etiquetas
relacionadas. [*tr>, 11.2.21 [*th> y *td>, 11.2.31 [*caption>, 11.2.41

11.2.1 Etiqueta <table>

La etiqueta <tab1 e> y su etiqueta d e fin, </tab1 e>, definen y delimitan una tabla dentro del
cuerpo d e un documento d e HTML. El navegador detiene el flujo d e texto actual, corta la
linea, inserta la tabla a1 principio de una nueva linea y despuCs reinicia el flujo d e texto e n
una linea nueva debajo d e la tabla.
A menos que se invalide con el atributo a1 ign, la alineaci6n d e la tabla e n la ventana del
navegador coincide con la del flujo d e texto del documento. Comhmente, esto significa
que las tablas est5n alineadas con respecto a1 margen izquierdo del texto actual. Sin embar-
go, puede centrar la tabla e n la ventana del navegador si el texto precedente estii centrado
con la etiqueta <center> o < d i v a1 ign=center>, o alinearla a la derecha para lograr una
celda d e tabla alineada a la derecha (vea las opciones del atributo a1 ign mas adelante).
[*p>, 4.1.21 [*th> y *td>, 11.2.31

El dnico contenido permitido dentro d e la etiqueta <tab1 e>, aparte de la etiqueta < c a p t i on>,
opcional, es una o m5s etiquetas < t r > , que definen cada fila d e la tabla.

11.2.1.1 Atributo align

Como las imiigenes, las tablas son objetos rectangulares que flotan e n la ventana del navegador,
alineadas d e acuerdo con el flujo d e texto actual. Generalmente, el navegador justifica la
tabla a la izquierda, colindando su borde izquierdo con el margen izquierdo de la ventana
del navegador. 0 puede centrar la tabla si est5 bajo el influjo d e la etiqueta <center>, d e un
piirrafo centrado o una divisi6n centrada. Sin embargo, a diferencia de las imAgenes, las
tablas n o son normalmente objetos integrados. El contenido del texto generalmente fluye
por arriba y abajo de una tabla, no a su lado. Usted modifica este comportamiento con el
atributo a1 ign d e la etiqueta c t a b l e>.
El atributo a1 i gn acepta cualquiera d e 10s valores 1e f t o r i g h t , indicando que la tabla debe
colocarse con respecto a1 margen izquierdo (left) o derecho (right), y el texto distribuirse
alrededor d e la tabla. Este estilo de alineacibn es similar a la alineaci6n izquierda y derecha
d e una imagen con ajuste d e texto alrededor de ella.
11.2 Etiquetas de tabla 345

Funcion:
Define una tabla
Atributos:
ALIGN
BACKGROUND 0
BGCOLOR rn 0
BORDER
BORDERCOLOR 0
BORDERCOLORLIGI3T 0
BORDERCOLORDARK 0
CELLPADDING
CELLSPACING
CLASS 0
COLS rn 0
FRAME 0
HEIGHT rn
HSPACE rn 0
NOWRAP 0
STYLE 0
RULES 0
VALIGN 0
VSPACE rn 0
WIDTH
Etiqueta de fin:
< / t a b l e>; nunca se omite
Contiene:
Contenido de la tabla
Usada en:
Bloque

Usted utiliza el atributo a1 ign dentro de la etiqueta < t a b l e > de forma distinta a como lo utiliza
dentro de las etiquetas < t r > , <td> y cth>. En estas etiquetas, el atributo controla la alineacidn del
texto dentro de las celdas de la tabla, no alinea la tabla con respecto a1 flujo del texto contenido.

11.2.1.2 AMbutos bgcolmy background

Puede cambiar el color de fondo de una tabla y diferenciarlo del color de fondo del docu-
mento con el atributo b g c o l o r de la etiqueta < t a b l e > . El valor del color para el atributo
-346 Cadrub 11: Tablas

bgcol or se debe establecer como un valor de color RGB en hexadecimal o como un nom-
bre de color estindar (en inglCs). Tanto la sintaxis de 10s valores de color como 10s nombres
permitidos vienen e n el apendice F.
Los navegadores extendidos dan a cada celda de la tabla (incluyendo la leyenda) este color
d e fondo. Tambien puede establecer colores para filas y celdas individuales incluyendo el
atributo bgcol or o un atributo de estilo para esas filas o celdas.
El atributo background, s61o soportado por Internet Explorer, suministra el URL de una
imagen que se multiplica (en "mosaico") para llenar el fondo de la tabla. La imagen se
recorta si la tabla es rnis pequefia que ella. Al usar este atributo e n una tabla sin bordes,
puede colocar texto sobre una imagen contenida dentro del documento.

11.2.1.3 Atributos bordercoh, bordmolorZight y bordercolordurk

Soportados s61o por Internet Explorer, estos atributos establecen el color de 10s bordes de la
tabla, e n caso de que Sean visibles. Sus valores pueden ser un valor de color RGB e n
hexadecimal o un nombre de color estPndar (en ingles), ambos descritos e n el a p h d i c e F.
Navigator e Internet Explorer dibujan casi siempre el borde de la tabla con tres colores.
Navigator utiliza variaciones claras y oscuras del color de fondo del documento. TambiCn
Internet Explorer lo hace, a menos que usted establezca esos colores con atributos especia-
les: 10s colores bordercol or1 ight (color de borde claro) y bordercol ordark (color de
borde oscuro) sombrean las orillas de 10s bordes para darles una apariencia tridimensional,
mientras bordercol or (color del borde) da color a1 cuerpo central de 10s bordes.
La eficacia del efecto tridimensional est5 unida de forma directa a la relaci6n entre estos tres
colores. En general, el color claro debe ser alrededor d e un 25 por ciento rnis brillante que
el color del borde; el color oscuro debe ser aproximadamente un 25 por ciento rnis oscuro.

11.2.1.4 Atributos border,.frame y rules

El atributo opcional border d e la etiqueta <tab1e> le indica a1 navegador que dibuje lineas
alrededor d e la tabla, de las filas y de las celdas que contiene. La opci6n predeterminada es no
tener bordes d e celda. Con Navigator, border es todo o nada: afecta la apariencia y espaciado
tanto del marco alrededor d e la tabla como de las lineas entre las celdas. Internet Explorer, por
su parte, le permite modificar individualmente 10s diferentes segmentos de linea que confor-
man 10s bordes alrededor de la tabla (frame), asi como tambih alrededor de las celdas (rul es).
Usted puede especificar un valor para border, per0 no tiene q u e hacerlo. Solo, este atributo
habilita 10s bordes y un conjunto d e caracteristicas predeterminadas. ~ a v i ~ a t eo Internet
r
Explorer le permiten establecer un valor entero para border igual a1 ancho e n pixeles d e las
lineas d e borde biselado que hacen que la tabla aparezca con relieve sobre la pigina,,
El atributo frame d e Internet Explorer modifica 10s efectos de border para las lineas que
rodean a la tabla. El valor predeterminado (que se obtiene si no usa frame) es box, que le
indica a1 navegador que dibuje las cuatro lineas alrededor de la tabla. El valor void elimina
las cuatro lineas. Los valores de frame, above, below, 1 hs y rhs dibujan 10s diferentes
segmentos d e borde: arriba, abajo, a la izquierda y a la derecha de la tabla, respectivamente.
El valor hsides dibuja bordes horizontales e n 10s lados superior e inferior de la tabla;
vsi des dibuja bordes a 10s lados verticales (izquierdo y derecho) de la tabla.
En Internet Explorer tambiCn puede controlar el grosor d e 10s bordes intemos de las celdas
de la tabla con el atributo rules. El comportamiento predeterminado, representado por el
engaiioso valor none,' es para dibujar lineas de celdas que coincidan con el tamaiio y
especificaciones del atributo border. A1 especificar groups coloca bordes rnis gruesos entre
grupos de filas y columnas definidos por las etiquetas <thead>,<tbodp, <tfoot>y <co1group>.
A1 utilizar rows o col s coloca bordes rnis gruesos entre cada fila (rows) o columna (cols),
respectivamente, mientras a1 1 coloca bordes rnis gruesos e n torno de cada celda de la
tabla. [extensionesde Internet para tablas, 11.31

11.2.1.5 Atributo celIspacing

El atributo cell spacing controla la cantidad de espacio entre las celdas adyacentes de una
tabla y a lo largo de 10s bordes exteriores de las celdas junto a 10s limites de una tabla.
Los navegadores normalmente asignan dos pixeles de espacio entre celdas y a lo largo de 10s
bordes exteriores de la tabla. Si incluye el atributo border en la etiqueta <tab1e>, el espacio
entre las celdas interiores se incrementa e n dos pixeles mls (cuatro en total) para crear
un espacio para la orilla biselada del borde interior. Los bordes exteriores de las celdas de la
orilla tambien incrementan el valor del atributo border.
A1 incluir el atributo cell spacing puede ampliar o reducir 10s bordes de la celda interior.
Por ejemplo, para hacer 10s bordes d e las celdas interiores lo mls delgado posible, incluya
10s atributos border y cell spacing=Oen la etiqueta de tabla.

11.2.1.6 Atributo ceUpadding

El atributo cel lpadding controla la cantidad de espacio entre el borde de una celda y su
contenido; su valor predeterminado es de un pixel. Puede hacer que todo el contenido de la
celda llegue hasta su respectivo borde de celda incluyendo cell padding=Oen la etiqueta de
tabla. TambiCn puede incrementar el espacio de cell padding poniendo su valor a rnis de 1.

11.2.1.7 Combinacidn d e los atributos border, ceUspacing y cellpadding

Las interacciones entre 10s atributos border, cell paddi ng y cell spaci ng de la etiqueta
<table> se combinan d e maneras que pueden ser confusas. La figura 11-2 ilustra c6mo
interacnian estos atributos para crear bordes interiores y exteriores con diversos anchos.

El valor "none"("ninguno") es engairoso porque usted no puede eliminar las I'meas de las celdas cuando el
atributo border esti en efecto.
 Figura 11-2. Atrfbutosborder, cel lspacing y ce 1 lpadding de una tabla

Aunque es posible todo tip0 de combinaciones con 10s atributos border y cell spacing,
Cstas son las rnds comunes:
border=l y cell spaci ng=O produce bordes interior y exterior lo rnds delgado posible:
2 pixeles d e ancho
border=n y cell spacing=O hace 10s bordes interiores lo rnds delgado posible (2 pixeles
de ancho), con un borde externo que es n rnds un pixel de ancho
border=l y cell spaci ng=n crea tablas con bordes exterior e interior del mismo ancho,
todos con orillas cinceladas de un pixel de ancho. Todos 10s bordes s e r h de n, mas 2
pixeles d e ancho

11.2.1.8 Atributo cok

Para dar formato a una tabla, el navegador primer0 debe leer todo su contenido para
determinar el ndmero y ancho de cada columna. Esto puede ser un proceso tedioso
para tablas grandes, obligando a1 usuario a tener que esperar para ver sus pdginas. El
atributo col s indica a1 navegador, por adelantado, cudntas columnas tiene la tabla. El valor
d e este atributo es un ndmero entero que define el nlimero de columnas e n la tabla.
Este atributo s61o da un aviso a1 navegador. Si define un ndmero diferente d e columna~,el
navegador puede ignorar el atributo col s a fin d e presentar la tabla d e forma correcta. En
general, es buena practica incluir este atributo e n la etiqueta <tab1 e>, aunque s61o sea para
ayudar a1 navegador a hacer un mejor trabajo d e formato para las tablas.
11.2 Etiquetas de tabla 349

11.2.1.9 Atributos hspacey vspace

Del mismo mod0 que con las imiigenes integradas, 10s atributos hspace y vspace le comu-
nican a Navigator e Internet Explorer que agreguen espacio adicional a 10s lados izquierdo
y derecho (con hspace) y superior e inferior (con vspace) de una tabla, dando asi miis
espacio fuera d e las orillas d e la ventana y del contenido circundante. El valor d e este
atributo es un nlimero entero de pixeles para ese espacio; cero es el valor predeterminado.
La figura 11-3 ilustra el efecto d e 10s atributos hspace y vspace sobre 10s espacios en torno
de una tabla justificada a la izquierda y con texto distribuido alrededor.

6 Archiuo Edicion Uer Ir Marcadores Opciones Directorio Uentana

T-T%
1 - i=( &lmfv lnicio Editar Riecapa h 6 p s hprmi- Bwcar Fqrw

Comer kumquats I Golpear en el ojo jpreferencias POr

--- -,. --
I
{. ---;sex0
.+ en la selection
-

/ Masculine ' 73% 27% ide frutas de mzll

I
/ Sex0 1-
I 1 Femenino : 1 ;,mbor.
16%
hcitar un
84%
'ejemplo, es molesta
! L .-.
- -
una lesion en el ojo,
p.r o nos -indica
A .. que las mujeres prefieren sufrir un d 6 o en el ojo antes que soportar

_ _ _ .- -, Es sabido desde
Preferencias 1 hace tiempo las
I -

I Comer kumquats1Golpear en el ojo

- - -
sexo en la
-I
preferencias por
I
. -. .-I
seleccion de
i
f

I Masculine i 73% I 27% ' J fruW de mal

; Sex0 1 ~-- -.;-- .- - - . . +- .844 70-0.
1 sabor. Por citar
-

I
Femenino 16% I - un ejemplo, es I
. ---A-p A-

molesta una
lesion en el bjo, per0 nos indica que las mujeres prefieren d r i r un d& en el ojo
antes que soporlar el sabor del kumquat.

Ffgura 22-3. Los atrtbutos hspoce y vspoce dan a la tabla un poco de "afre"respecto a1 texto
circundante.

11.2.1.10 Atributos style y ckss

El atributo s t y 1 e d e la etiqueta <tab1 e> crea un estilo especifico para la etiqueta y anula
cualquier otra regla de estilo en acci6n. El atributo c l a s s le permite aplicar un conjunto
predefinido d e propiedades para esa etiqueta <tab1 e> especifica; su valor es el nombre de
esa clase. [atributo style, 9.1.11 [atributo class, 9.2.41
El atributo v a l i g n de la etiqueta <tab1 e>, que actualmente s61o soporta Internet Explorer,
establece la alineaci6n vertical predeterminada de 10s datos en las celdas de toda la tabla. En
Navigator se consigue un efecto similar incluyendo un atributo v a l i g n dentro de las etique-
tas individuales < t r > , <td> y <th>.
Los valores aceptables para el atributo v a l i g n de < t a b l e > son t o p o bottom; la posici6n
vertical predeterminada es al centro de la celda.

11.2.1.12 AtrZbutos width y height

Los navegadores crean de forma automatics una tabla con el ancho necesario para desple-
gar correctamente todo su contenido. Si es necesario, puede crear una tabla m4s ancha con
el atributo width.
El valor del atributo w i d t h es un n6mero entero de pixeles o un porcentaje relativo a1
ancho de la ventana del navegador, incluyendo valores mayores a1 100 por ciento. Por
ejemplo,

le indica a1 navegador que construya la tabla con 400 pixeles de ancho, incluyendo cual-
quier borde y espaciado de celda que se extienda dentro del borde exterior de la tabla. Si
el ancho de la tabla rebasa 10s 400 pixeles, el navegador ignora el atributo.
Como alternativa,

le indica a1 navegador que construya la tabla a1 cincuenta por ciento del ancho de la ventana
del navegador. De nuevo, este ancho incluye cualquier borde o espaciado de celda que se
extienda dentro de 10s bordes externos de la tabla, y no tiene efecto si la tabla normalmente
es mayor a la mitad del ancho de la ventana actual del navegador.
Utilice anchos relativos si desea redimensionar de manera automhtica su tabla con rela-
ci6n a la ventana del usuario; por ejemplo, tablas que quiera extender siempre a lo largo
de toda la ventana ( < t a b l e width="100%">). Utilice valores de ancho absoluto para
lograr un formato detallado de tablas cuyo contenido pueda ser dificil de leer en venta-
nas anchas.
En Navigator, puede usar el atributo h e i g h t para sugerir la altura de la tabla. El navegador
construid la tabla no menor a esa altura, pero si es necesario puede hacerla m4s aha para
mantener su contenido. Este atributo es 6til cuando desea alargar las tablas para lograc que
se ajusten en un marco o en algdn Area especifica de un documento, pero fuera de esto es
poco utilizado.
11.2.2 Etiqueta <tr>
Toda fila en una tabla se crea con una etiqueta <tr>. Dentro de esta etiqueta hay una o mas
celdas con encabezados, cada uno definido con la etiqueta <th>, y datos, definidos con la
etiqueta <td> (consulte el recuadro).

<tr>
Funcion:
Define una fila en una tabla
A tributes:
ALIGN
BGCOLOR 0
BORDERCOLOR 0
BORDERCOLORLIGHT 0
BORDERCOLORDARK 0
CLASS rn 0
NOWRAP
STYLE 0
VALIGN
Etiqueta de fin:
</tr>; puede omitirla
Contiene:
Contenido defila
Usada en:
Contenido de tabla

Cada fila en una tabla tiene el mismo nfimero de celdas que la fila miis larga; el navegador
crea de forma automiitica celdas vacias para rellenar filas con menos celdas definidas.

Los navegadores alinean de forma automltica el contenido dentro de sus respectivas celdas.
El atributo a1 ign de la etiqueta < t r > le permite cambiar la alineaci6n horizontal predetermi-
nada de todas las celdas de una fila. Este atributo afecta a todas las celdas dentro de la fila
actual, pero no a las de filas siguientes.
Un valor para a1 i gn igual a 1e f t (izquierda), r i g h t (derecha) o center (centro) hace que
el navegador alinee el contenido de cada celda en la fila contra la orilla izquierda, derecha
o en el centro de la celda, respectivamente. Ademls, Internet Explorer soporta el valor
j u s t i f y (justificar), de manera que cada linea de texto llene la celda. TambiCn puede
cambiar la alineaci6n de celdas individuales dentro de una fila, anulando el valor del atributo
352 Capitdo 11: Tabhs

a1 i gn d e la etiqueta < t r > con el atributo a1 ign d e las etiquetas <th> y <td>, como explica-
mos m l s adelante. En consecuencia, utilice el atributo a1 ign e n la etiqueta < t r > para
especificar la justificaci6n del contenido d e celda m l s comdn para la fila (si no es la prede-
terminada) y utilice este atributo e n otra parte para las celdas individuales que escapen a
esta alineaci6n comdn.
La tabla 11-1muestra 10s valores y opciones del atributo horizontal (a1 i gn) y vertical (val i gn) para
el contenido d e las celdas d e una tabla. Los valores entre parentesis son 10s predeterminados.

Tabla 11-1. Valoresy opciones de atributos horizontal y vetticalpara el contenido de las celdas
de una tabla
Atributo I Navigator c Internet Explorer I Mosaic
Dams
Izquierda Left (Izquierda) (Izquierda) (Izquierda)
align (Centro) Centro Centro Centro
Derecha Derecha Derecha Derecha
Parte superior Parte superior (Parte superior) (Parte superior)
v a l i gnl (Centro) (Centro) N/D2 N/D
Parte inferior Parte inferior N/D N/D
Linea base Linea base N/D N/D

' Internet Explorer tambien soporta un atributo universal val i g n para la etiqueta <table>.
N/D = No disponible.

11.2.2.2 Atributo bgcobr

Como su pariente d e la etiqueta <tab1 e>, el atributo bgcol or d e la etiqueta < t r > define el
color d e fondo d e toda la fila.' Su valor es ya sea un valor d e color RGB e n hexadecimal o
un nombre d e color estlndar (en ingles). Tanto la sintaxis d e 10s valores d e color como 10s
nombres d e color vilidos vienen e n el apCndice F.
Cada celda e n la fila obtiene este color d e fondo. Puede cambiar 10s colores d e celdas
individuales especificando el atributo bgcol or para esas celdas.

11.2.2.3 Atributos bordercolor, borrlercobrligbt y bordercolordark

Como sus hermanos d e la etiqueta <table>, Internet Explorer le permite utilizar estos
atributos para establecer el color d e 10s bordes dentro d e la fila actual.
Sus valores invalidan cualquier conjunto d e valores especificados con 10s correspondientes
atributos d e la etiqueta <tab1 e> que 10s contiene. Consulte la correspondiente descripci6n
d e estas extensiones e n el apartado 11.2.1.3para leer mls detalles. Los valores de color
pueden ser un valor RGB e n hexadecimal o un nombre de color estlndar (en inglCs), ambos
descritos e n el apendice F.

Aunque a diferencia de <tab1 e> con Internet Explorer, <tr>no soporta una imagen de fondo.
11.2 Htjquetas de tabla 353

11.2.2.4 Atributo n o w r a p
Los navegadores manejan cada celda de la tabla como si fuera una ventana del navegador:
hacen fluir el contenido dentro de la celda como si fuera cuerpo comdn (aunque sujeto a
propiedades de alineaci6n de celda especiales). En consecuencia, 10s navegadores ajustan
d e forma automitica las lineas del texto para llenar el espacio asignado a la celda. El
atributo nowrap, cuando se incluye e n una fila, detiene ese ajuste normal d e palabras en
todas las celdas d e esa fila. Con nowrap, el navegador acomoda el contenido d e la celda
en una sola linea, a menos que inserte una etiqueta <br> o <p>, lo que forzaria un salto para
que el contenido siga en una linea nueva dentro d e la celda.

11.2.2.5Atrilnrtos styley class

El atributo s t y 1 e de la etiqueta <tr>crea un estilo especifico para una fila de la tabla, lo que
anula cualquier otra regla de estilo en acci6n. El atributo c l a s s le permite aplicar un conjun-
to predefinido de propiedades para esa etiqueta <tr>especifica; su valor es el nombre de
esa clase. Observe que para establecer propiedades d e estilo < t r > a nivel de documento o
en una hoja d e estilo externa, debe utilizar el selector contextual TABLE TR.
No puede aplicar todas las propiedades d e estilo. Por ejemplo, no puede colocar una ima-
gen d e fondo detris de una fila de la tabla, como lo puede hacer con una tabla completa. Sin
embargo, puede establecer 10s colores y tipos de fuentes para el contenido del texto, por
ejemplo. [atributo sty1 e, 9.1.11 [atributo class, 9.2.41

11.2.2.6 Atributo valign

Puede modificar la alineaci6n vertical predeterminada para el contenido de las celdas de

una fila d e la tabla. Por lo combn, 10s navegadores presentan el contenido d e la celda
centrado verticalmente. A1 incluir el atributo val ign d e la etiqueta < t r > con el valor top o
bottom, le indica a1 navegador que coloque el contenido d e la fila ajustado con respecto a
la parte superior o inferior de su celda, o alineado con respecto a la llnea base d e la linea
superior del texto en otras celdas d e la fila (vkase figura 11-4). El valor center, aunque es
vilido, no tiene un efecto real puesto que s61o reitera la alineaci6n vertical predeterminada.

?- -
Linea basedel texto.. jMcGravl-p . McGrav
--
-i I I
I
I
Linea 2
--
I I I
iMcGrav 1
II -~--
iMcGrav
-
I

Ftgura 11-4. Efectos de 10s atrtbutos vol ign en la alineacibn del contentdo de las celdas de
urn tabla.
 c t a b l e border>
<tr>
<th>Al ineadac/th>
<th>Arri ba</th>
cth>Llnea base</th>
cth>Centro</th>
<th>Abajo</th>
</tr>
<tr> a1 ign=center>
.
<th><hl>Llnea base del t e x t o . . .cbr>Llnea Z</hl></th>
< t d val i gn=top>McGraw</td>
c t d val ign=basel i ne>McGraw</td>
<td val ign=center>McGraw</td>
<td val ign=bottom>McGraw</td>
c/tr>
</tab1 e>

11.2.3 Etiquetas <tb>y <td>

Las etiquetas <th> y <td> van dentro d e las etiquetas < t r > d e una tabla d e HTML para crear
las celdas y el contenido dentro d e la fila. Las etiquetas operan d e forma similar; las dnicas
diferencias reales son que 10s navegadores presentan el texto del encabezado (es decir, el
titulo u otros elementos que describen 10s datos d e la tabla) e n un estilo d e fuente en
negritas y que la alineaci6n predeterminada d e sus respectivos contenidos puede ser dife-
rente (tabla 11-1).
Como las disponibles para la etiqueta d e fila de tabla (<tr>), las etiquetas d e celda d e tabla
soportan un rico conjunto d e atributos d e alineaci6n del contenido y d e estilo que puede
aplicar a celdas d e datos simples o d e encabezado. Estos atributos anulan 10s valores prede-
terminados para la fila actual. TambiCn existen atributos especiales que controlan el ndmero
d e columnas o filas que una celda puede abarcar e n la tabla.
El contenido d e las etiquetas <th> y <td> puede ser cualquier cosa que se pueda incluir e n
el cuerpo de un documento de HTML, incluyendo texto, im5genes, formas, etcetera; incluso
otra tabla. Y , como ya describimos, el navegador crea d e manera automitica una tabla lo
suficientemente grande, tanto vertical como horizontalmente, para mostrar todo el conteni-
d o d e todas las celdas.
Si una fila especifica tiene menos datos o encabezado que otras, el navegador agrega celdas
vacias a1 final para rellenar la fila. Si necesita crear una celda vacia antes del fin d e una fila
para indicar un punto de datos perdido, por ejemplo, Cree una celda de datos o d e encabe-
zado sin contenido.
Las celdas vacias tienen diferente aspect0 que las que contienen datos o encabezados si la
tabla tiene bordes: la celda vacia pareced que no resalta e n la ventana, pero mis bien esti,
simplemente, en blanco. Si quiere crear una celda vacia con bordes cincelados, igual que e n
las demis celdas d e la tabla, aseg6rese d e colocar una minima cantidad d e contenido
e n ella: por ejemplo, una etiqueta <br>.
 Define 10s datos de la tabla y 10s encabezados de la celda
Atributos:
ALIGN
BACKGROUND 0
BGCOLOR 0
BORDERCOLOR 0
BORDERCOLORLIGHT 0
BORDERCOLORDARK 0
CLASS
COLSPAN
HEIGHT
NOWRAP
ROWSPAN
STnE
VALIGN
WIDTH
Etiqueta de fin:
</t h> o </td>; pueden omitirse
Contiene:
Contenido de cuerpo
Usada en:
Contenido de unafila de tabla

11.2.3.1 Atributos aligny ualfgn

Los atributos a1 ign y val ign son idCnticos a sus hom6nimos para la etiqueta d e fila de
tabla (ctr>, vista antes), except0 que cuando se utiliza con una etiqueta <th> o <td>,
controla la alineacion horizontal o vertical del contenido de las celdas actuales. Sus valo-
res anulan cualquier alineacion establecida por el atributo respectivo a1 i gn o val i gn de
la etiqueta <tr>, pero no afectan la alineaci6n de las celdas subsecuentes. Vea la tabla 11-
1 para obtener mis detalles de alineacibn.
Puede establecer 10s valores del atributo a1 i gn en 1 e f t , right o center, haciendo que 10s
navegadores alineen el contenido de la celda con respecto a1 extremo izquierdo, derecho o
a1 centro de la celda, respectivamente. Ademb, Internet Explorer soporta el valor justify
(justificar) para llenar cada linea de texto de manera que se distribuya hacia ambos lados de
la celda. El atributo val i gn puede tener un valor de top, bottom, center o base1 i ne, que le
indican a1 navegador que alinee el contenido de la celda con respecto del borde superior o
inferior, o a1 centro de la celda o (so10 en Navigator) con respecto a la linea base de la
primera linea de texto en otras celdas de la fila.
11.2.3.2 Atributo width

Como su gemelo para la etiqueta <tab1 e> que le permite ampliar el ancho de una tabla, el
atributo width d e etiquetas d e celda le permite hacer m4s ancha una celda individual y, por
consiguiente, toda la colurnna donde se localiza. Usted establece el ancho (width) con un
nlimero entero de pixeles o un porcentaje que indica el ancho d e la celda como una
fracci6n de la tabla:
Por ejemplo,

establece el ancho de la celda de encabezado actual y, por lo tanto, toda la columna de esa
celda, a 400 pixeles d e ancho. Como alternativa,

crea una celda de datos cuya colurnna ocuparP el 40 por ciento del ancho total de la tabla.
Puesto que 10s navegadores actuales ajustan todas las celdas de una colurnna a1 mismo
ancho, s61o debe colocar un atributo width en una celda dentro d e una columna, d e prefe-
rencia la primera vet que aparece la celda en la primera fila para hacer mPs comprensible
el c6digo. Si dos o m8s celdas en la misma columna tienen el atributo width, se elige la mas
ancha. Usted no puede hacer una columna mPs delgada de lo que establece el navegador
como el minimo necesario para mostrar el contenido de cualquier celda en la colurnna. De
este modo, si el navegador determina que la columna d e celdas debe tener por lo menos
150 pixeles d e ancho para alojar todo el contenido d e las celdas, ignorar8 por completo el
atributo w i d t h en cualquiera d e las etiquetas de celda de la columna que intente reducir a
s61o 100 pixeles de ancho.

11.2.3.3 Atributo height

Este atributo especifica una altura minima en pixeles para la celda actual. Como todas las
- - - - - -

c e l d a s d e unapfila tienen la misma altura, este atributo s61o necesita especificarse en

una celda de la fila, de preferencia en la primera. Si alguna otra celda e n la fila necesita ser
mas alta para alojar su contenido, se ignora el atributo y todas las celdas en la fila toman el
tamaiio miis grande.
De modo predeterminado, todas las celdas d e una fila tienen la altura de la celda mas alta
e n la fila que aloje su contenido.

11.2.34 Atributo cokpan

Es comlin tener un encabezado d e tabla que describa varias columnas debajo d e C1, como
10s encabezados que utilizamos en la tabla 11-1. Utilice el atributo col span en un encabeza-
d o d e tabla o etiqueta de datos para extender una celda a lo largo de dos o m4s columnas
 1

11.2 Etiquetas de tabla

en su fila. Establezca el valor del atributo col span a un valor entero igual
columnas que quiera que abarque el encabezado o celda de datos. Por ejer
< t d col span=3>

le indica a1 navegador que la celda ocupe el espacio horizontal equivalente a I,,

la fila arriba o abajo de ella. El navegador distribuye el contenido de la celda para que OLL,
todo ese espacio.
iQue pasa si no hay suficientes celdas a la derecha? El navegador extiende la celda tantas
columnas como haya hacia la derecha; no agrega celdas vacias a cada fila para acomodar un
valor col span sobrextendido. Usted puede superar esta limitante agregando las celdas nece-
sarias a una sola fila pero sin contenido (con una etiqueta <br> como su contenido si desea
un borde resaltado a su alrededor en Navigator).

11.2.3.5 Atributo rowspan

Asi como el atributo col span crea una celda a lo largo de varias columnas, el atributo
rowspan expande una celda dos o mas filas hacia abajo en la tabla.
Usted incluye el atributo rowspan en la etiqueta <th> o <td> de la fila superior donde cresea
que la celda inicie, y establece su valor a1 ndmero de fila que quiera abarcar. La celda
entonces ocupa el espacio de la fila actual y el ndmero necesario de celdas por debajo de
ella. El navegador distribuye el contenido de la celda para ocupar todo el espacio que
abarca. Por ejemplo,

crea una celda que ocupa la fila actual mas dos filas adicionales por debajo de ella.
Como el atributo col span, el navegador ignora 10s atributos rowspan sobrextendidos y &lo
amplia la celda actual las filas hacia abajo que se hayan definido de rnanera explicita mediante
otras etiquetas <tr> en seguida de la fila actual. Los navegadores no agregan filas vacias a la
tabla por debajo de la dltima fila definida en una tabla para rellenar las filas faltantes.

Puede extender una sola celda a lo largo de varias columnas, asi como a varias filas, incluyendo
10s atributos col span y rowspan en un encahezado de tabla o etiqueta de datos. Por ejemplo,

crea una celda de encabezado que, como puede esperar, abarca un total de tres columnas y
cuatro filas, incluyendo la celda actual y extendiendose dos celdas mas a la derecha y tres
hacia abajo. El navegador distribuye el contenido de la celda para ocupar todo el espacio y
lo alinea en el interior de acuerdo con las especificaciones de alineaci6n de la fila actual o
aquellas que puedan incluirse de forma explicita en la misma etiqueta, como vimos antes.
11.2.3.7 Atributo nowrap
Los navegadores manejan cada celda de la tabla como una ventana de navegador, distribu-
yendo el contenido dentro de la celda como si fuera cuerpo c o m h de un documento de
HTML (si bien sujeto a propiedades d e alineaci6n de celda especiales). Por consiguiente, 10s
navegadores ajustan de forma automitica lineas de texto para llenar el espacio de la celda.
El atributo nowrap, cuando se incluye en un encabezado de tabla o etiqueta d e datos,
detiene ese ajuste normal de texto. Con nowrap, el navegador ensambla el contenido de la
celda en una sola linea, a menos que inserte una etiqueta <br> o <p>, lo cual fuerza un salto
de mod0 que el contenido siga e n una linea nueva dentro de la celda.

11.2.3.8 Atributos bgcolor y background

Una vez mis, usted puede cambiar el color d e fondo, esta vez para una celda de datos
individual. Este valor de atributo puede ser un valor d e color RGB hexadecimal o un nom-
bre de color estindar (en inglCs). Tanto la sintaxis de 10s valores de color como 10s nombres
d e color vilidos vienen en el a p h d i c e F.
El atributo background, que s61o soporta Internet Explorer, suministra el URL de una imagen
que se multiplica (en "mosaico") para rellenar el fondo de la celda. La imagen se recorta si
la celda es mis pequefia que ella.
Ni background ni bgcol o r anulan una propiedad de hoja de estilo relacionada.

11.2.3.9 Atributos bordercolor, b o r ~ o l o r l i g hyt bordercolordark

Internet Explorer le permite modificar 10s colores que conforman el borde de una celda
individual, si 10s bordes d e la tabla se activan con el atributo border, por supuesto. Vea las
respectivas descripciones d e 10s atributos d e la etiqueta <table> e n el apartado 11.2.1.3
para obtener mas detalles.
Los valores para estos tres atributos invalidan cualquier conjunto d e valores para la etiqueta
<tab1 e> o < t r > . Sus valores pueden ser un valor de color RGB hexadecimal o un nombre
de color estfindar (en inglks), ambos descritos en el aphdice F.

11.2.3.10 Atributos style y class

El atributo s t y l e d e las etiquetas <td> y <th> crea un estilo especifico para la celda d e la
tabla, lo que anula cualquier otra regla de estilo o atributo relacionado en acci6n. El atributo
c l ass le permite aplicar un conjunto predefinido d e propiedades para la etiqueta especifica;
su valor es el nombre d e esa clase. Por ejemplo, puede establecer el contenido del texto, 10s
colores y estilos de fuente. A diferencia de la etiqueta < t r > , pero como en <tab1 e>, puede
colocar una imagen detds del contenido d e la celda de datos individual.
Para establecer propiedades de estilo <td> o < t h > a nivel de documento o en una hoja de
estilo externa, debe utilizar sus selectores contextuales TABLE TD o TABLE TH. [atributo
sty1 e, 9.1.11 [atributo class, 9.2.41

11.2.4 Etiqueta <caption>

Una tabla por lo regular necesita una leyenda para explicar su contenido, de modo que 10s
navegadores proporcionan una etiqueta de tabla para este fm.Los autores comdnrnente colocan la
etiqueta ecapt i on> y su contenido inmediatamente despues de la etiqueta etabl e>, pero la puede
poner casi en cualquier lugar dentro de la tabla y entre las etiquetas de fila. La leyenda puede tener
cualquier contenido de cuerpo, de manera muy similar a una celda dentro de una tabla.

<caption>
Funcion:
Define una leyenda de tabla
A tributes:
ALIGN
CLASS 0
STYLE 0
VALIGN 0
Etiqueta de fin:
</caption>; no se omite
Contiene:
Contenido de cuepo
Usada en:
Contenido de tabla

Desgraciadamente para los autores de documentos, el navegador de Netscape implementa un

metodo de alineaa6n y ubicaa6n de la leyenda, rnientras Internet Explorer propomona un conflic-
tivo conjunto de atributos para el mismo prop6sito. De modo predeterminado, 10s navegadores
centran la leyenda con respeao a la tabla, incluyendo el ajuste de texto cuando es necesario.

11.2.4.1Atributos align y v a l i p

De mod0 predeterminado, 10s navegadores colocan el contenido de la leyenda centrado

sobre la tabla. Puede colocarlo bajo la tabla con el atributo a1 i gn puesto en bottom (el valor
top, por supuesto, es equivalente a1 valor predeterminado).
Internet Explorer utiliza el atributo de alineaci6n a1 i gn para controlar la posici6n horizontal
de la leyenda y proporciona el atributo val ign para modificar su posici6n vertical. Con
Internet Explorer, ponga el atributo a1 i gn en 1e f t (izquierda), center (centro, el valor prede-
terminado) o right (derecha) para ubicar la leyenda con relaci6n a la tabla. Utilice el atributo
val ign para colocarlo en la pate superior (top) o inferior (bottom) de la tabla. Los demb
navegadores ignoran 10s diferentes atributos y valores de alineaci6n de la leyenda de Internet
Explorer.

11.2.4.2 Atributos styley class

Como las etiquetas < t d > y < t h > de tabla, el atributo sty1 e de la etiqueta <caption> crea un
estilo especifico para la leyenda de la tabla, lo que anula cualquier otra regla de estilo en
acci6n. El atributo class le permite aplicar un conjunto predefinido de propiedades para la
etiqueta especifica; su valor es el nombre de esa clase. Asegdrese de utilizar el selector
contextual TABLE CAPTION cuando haga referencia a estilos de leyenda a nivel de documen-
to o en hojas de estilo externas. [atributo style, 9.1.11 [atributo class, 9.2.41

11.3 Extensiones para tablas de Internet Explorer

Aunque es posible construir una tabla simple dpidamente, las tablas de HTML complejas, con
varios estilos de borde, encabezados y leyendas, asi como el diseiio basado en columnas no
son flciles de construir desde el modelo de tablas de HTML 3.2. Microsoft ha rectificado este
desperfecto agregando mdltiples controles de diseiio de tabla para su navegador, Internet
Explorer (versi6n 3.0 y posteriores). Estos controles proporcionan agrupaci6n basada en filas
encabezados y pies de p4gina normales, junto con controles de diseiio basados en columnas.
Por supuesto, hay buenas y malas noticias acerca de estas extensiones para tablas. Proporcio-
nan una agradable forma de hacer sus tablas mls atractivas y presentables, pero s61o funcionan
en Internet Explorer, que, a la fecha de la publicaci6n de este libro en inglCs, no es el navegador
m5s popular. Si decide utilizar estas extensiones, asegdrese de que sus tablas Sean compatibles
con 10s demls navegadores, sin el diseiio adicional y caracteristicas de agrupaci6n disponi-
bles en Internet Explorer. De otro modo, perded una buena parte de su pdblico.

1 1.3.1 Defdnicidn de secciones de tabla

Dentro de las tablas de HTML 3.2, todas las filas se crean igual. En las tablas reales, algunas filas
son rn5s iguales que otras. Y la mayon'a de las tablas tienen filas para encabezados y pies de
plgina que se repiten a travCs de las plginas. En tablas grandes, las filas adyacentes e s t h
agrupadas y delineadas con diferentes lineas para facilitar la lectura y comprensi6n de la tabla.
Internet Explorer soporta todas esas caracteristicascon las etiquetas <thead>,<t foot> y <tbody>.

Utilice la etiqueta <thead> para definir un conjunto de filas para encabezados de tabla.
Esta etiqueta puede aparecer una vez dentro de una etiqueta <tab1e>, a1 principio. Dentro de
la etiqueta <thead>, puede incluir una o mls etiquetas < t r > , definiendo las filas dentro del
11.3 E s t e ~ i o r r e para
s tabhs d . Internet Exploner 361

<thead> 0
Funcidn:
Define un encabezado d e tabla
Atributos:
ALIGN
CLASS
STYLE
VALIGN
Etiqueta de fin:
</thead>; puede omitirla
Contiene:
Contenido ak tabla
Usada en:
Contenido de tabla

encabezado d e la tabla. Si se le cia la oportunidad, Internet Explorer duplicarii estas filas

d e encabezado cuando imprima la tabla o la vea en varias secciones. De ahi en adelante,
Internet Explorer repetir5 estos encabezados en cada pfigina impresa si la tabla aparece en
miis d e una piigina.
La etiqueta d e fin </thead> e s opcional y puede omitirla. Puesto que la etiqueta <thead>
s610 aparece e n tablas donde, presumiblemente, otras filas s e d n designadas como el cuerpo
o pie d e piigina de la tabla, la etiqueta <thead> se cierra d e forma automgtica cuando el
navegador encuentra una etiqueta <tbody>, <tfoot> o cuando termina la tabla.
Los atributos d e la etiqueta <thead> (a1 ign, class, sty1 e y val ign) funcionan del mismo
modo, toman 10s mismos valores y afectan todo el contenido d e ctr> encerrado como si
usted 10s hubiera especificado individualmente para cada fila (ctr>). El atributo a1 i g n
acepta 10s valores l e f t , r i g h t , center o j u s t i f y , que le permiten controlar la alineaci6n
horizontal del texto e n las filas del encabezado. De manera similar, el atributo val ign acepta
10s valores top, middle o bottom y se comporta del mismo mod0 que el atributo val ign de
la etiqueta c t r > , dictando la alineaci6n vertical del texto e n las filas del encabezado. Los
atributos por ahora familiares para restablecer las propiedades de estilo del contenido son
s t y l e y class.
Si n o especifica ninguna alineaci6n o atributo de estilo, Internet Explorer centra el texto del
encabezado vertical y horizontalmente dentro de sus respectivas celdas, lo que equivale a
especificar a1 ign=center y val ign=mi ddl e para cada uno. Por supuesto, las especificacio-
nes de fila y celda u hojas de estilo individuales pueden invalidar estos atributos.
11.3.1.2 Etiqueta Ufoot>

Utilice la etiqueta < t f o o t > para definir un pie de plgina para tablas de Internet Explorer.

<tfoot> 0
Funcion:
Define el pie de plgina de una tabla
Atributos:
Ninguno
Etiqueta de fin:
< / t f oat>; puede omitirse
Contiene:
Contenido de tabla
Usada en:
Contenido de tabla

La etiqueta < t f o o t > puede aparecer s610 una vez antes del fin d e una tabla. Como en el
caso de <thead>, puede contener una o m h etiquetas < t r > que le permitan definir las filas
que Internet Explorer utiliza para el pie de plgina d e la tabla. Por consiguiente, el navegador
repite estas filas si la tabla se divide en varias plginas fisicas o virtuales. Con mls frecuencia,
Internet Explorer repite el pie de plgina de la tabla en la parte inferior de cada parte de una
tabla impresa en varias plginas.
La etiqueta d e fin </t f o o t > es opcional, puesto que el pie de plgina finaliza cuando la tabla
terrnina. No hay atributos para < t f o o t > . Si tiene atributos de alineaci6n especial para el pie
de plgina de la tabla, debe especificarlos para cada fila dentro de la etiqueta < t f o o t > .

11.3.1.3 Etiqueta <tbody>

Utilice la etiqueta <tbody> para dividir la tabla en Internet Explorer en secciones discretas.
La etiqueta <tbody> redne una o mls filas en un grupo dentro de la tabla. Es totalmente
aceptable no tener etiquetas <tbody> dentro de una tabla, aunque si debe incluir una, q u i d
tenga dos o mls etiquetas <tbody> en la tabla. Identificada de ese modo, puede asignar a
cada grupo <tbody> tamafios de linea diferentes por encima y por debajo d e la secci6n.
Dentro d e una etiqueta <tbody> s61o puede definir filas d e la tabla con la etiqueta < t r > .
La etiqueta de fin <Itbody> es opcional, puesto que la seccidn termina en la siguiente
etiqueta <tbody>, < t f o o t > o cuando termina la tabla. No hay atributos para la etiqueta
<tbody>. Si tiene atributos de alineaci6n especial para esa seccibn, debe especificarlos para
cada fila dentro de la etiqueta <tbody>.
11.3 Extensiones bara tablas de Internet Exbbmr 363

<tbody> 0
Funcion:
Define una secci6n dentro de una tabla
Atributos:
Ninguno
Etiqueta de fin:
<Itbody>; puede omitirse
Contiene:
Contenido de tabla
Usada en:
Contenido de tabla

11.3.1.4 Uso de las secciones de las tabhs

Desde un punto d e vista de presentacih, lo m4s importante que puede hacer con las
etiquetas <thead>, <tfoot> y <tbody> es dividir la tabla en secciones 16gicas delimitadas
por sus diferentes bordes. De modo predeterminado, Internet Explorer no hace nada espe-
cial con 10s bordes alrededor d e 10s encabezados, pies d e p4gina y secciones dentro de la
tabla, pero a1 agregar el atributo rules a la etiqueta <table> puede dibujar lineas m4s
gruesas entre las secciones <thead>, una o mls <tbody> y <tfoot>, ayudando a sus lecto-
res a comprender mejor la organizaci6n de sus tablas. [lineas de <table*, 11.2.1.41
Por ejemplo, veamos la tabla simple de antes en este capitulo, aumentada con un encabeza-
d o y un pie de plgina. Observe que hemos omitido muchas de las etiquetas d e fin innece-
sarias para ser mls breves y claros:
<tab1 e border cell spaci ng=0 cell paddi ng=5 rul es=groups>
<capti on a1 i gn=bottom>Kumquat contra un ojo go1 peado, por sexo</capti on>
<thead>
<tr>
<td col span=2 rowspan=2>
<th col span=2 a1 i gn=center>Preferenci as
</tr>
<tr>
<th>Comer kumquats
<th>Golpe en el ojo
</tr>
</thead>
<tbody>
<tr align=center>
<th rowspan=2>Sexo
<th>Masculino
<td>73%
<td>27%
 </tr>
<tr a1 ign=center>
<th>Femeni no
<td>16%
<td>84%
</tr>
<Itbody>
<tfoot>
<tr>
<td col span=4 a1 ign=center>
Nota: Con suerte, 10s golpes en el ojo no son un daiio permanente
</table>
La figura 11-5 muestra la tabla resultante en Internet Explorer. Observe c6mo las lineas
despues del encabezado y antes de la leyenda son mas delgadas que 10s bordes alrededor
de las demhs filas de la tabla. Esto ocurre porque incluimos el atributo especial rul es=groups
en la etiqueta <table>. Efectos similares pueden obtenerse especificando rul es=rows o
rul es=al 1 .

1
Masculine
Fenrenino
Comer kumquats
--
73%
16%
27%
84%
i
Golpe en el ojo

golpes en el ojo no son un d d o permanente

Kumquat contra un ojo golpeado, por sex0

Figura 11-5. Use las extmiones de Internet Explorer para divkilr especlalmente sus tabla

Las tablas grandes con frecuencia se benefician con las lineas mas gruesas cada ciertas filas,
lo que facilita la lectura. Haga esto agrupando las lineas de su tabla con varias etiquetas
<tbody>. Cada conjunto de filas contenidas en una etiqueta <tbody> tend15 lineas mas
gruesas antes y despuCs ellos.
Aqui tenemos una versi6n extendida de nuestra tabla de ejemplo, con secciones adicionales
establecidas como grupos independientes.
<table border cell spacing=O cell padding=5 rul es=groups>
<capti on a1 i gn=bottom>Kumquat contra un ojo go1 peado, por sexo</caption>
<thead>
<tr>
11.3 Extensiones para tablas de Internet E x p W 365

<td col span=2 rowspan=2>

<th colspan=2 align=center>Preferencias
<tr>
<th>Comer kumquats
<th>Golpe en el ojo
<tbody>
<tr a1 ign=center>
<th rowspan=4>Sexo
<th>Hombres menores de 18 aRos
<td>94%
<td>6%
<tr a1 i gn=center>
<th>Hombres mayores de 18 aRos
<td>73%
<td>27%
<tbody>
<tr a1 ign=center>
<th>Mujeres menores de 18 aRos
<td>34%
<td>66%
<tr a1 ign=center>
<th>Mujeres mayores de 18 atios
<td>l6%
<td>84%
<tfoot>
<tr>
<td col span=4 a1 ign=center>
Nota: Con suerte 10s golpes en el ojo no son un datio permanente
</tab1 e>
La figura 11-6 muestra el resultado.
En este caso, concluimos con cuatro filas en la tabla, separadas en dos grupos mediante una
linea mls gruesa. Puede crear cualquier nlimero de grupos dentro de la tabla agregando
mls etiquetas <tbody>.

11.3.2 Definicidn de grupos de columnas

El modelo de tablas de HTML se centra en las filas, definiendo las tablas como una colecci6n
de celdas organizadas dentro de filas. Pero en ocasiones es m4s f4cil manipular una tabla
mediante una colecci6n de columnas. Con las etiquetas <col group> y <col> Internet Explorer
le ayuda a pensar las tablas en columnas.
A diferencia de las etiquetas de secci6n que describimos antes y que est4n relacionadas con
las filas de una tabla para definir encabezados, pies de p4gina y secciones, las etiquetas
relacionadas con columnas no pueden mezclarse con el contenido de una tabla. En su lugar,
deben colocarlas a1 principio de una tabla, antes del contenido. Definen el modelo con el
que Internet Explorer debe presentar las columnas.
 Preferencias
Comer kumquats Golpe en el ojo 1
1

Hombres menores de 18 aiios 94% 6% 1

Hombres mayores de 18 aiios 73% 27%
Sexo --
Mujeres menores de 18 aiios 34% 65%
Myeres mayores de 18 aiios 16% 84%
--
Nota: Con suerte 10s golpes en el ojo no son ~m
-
Kumquat contra un ojo golpeado, por sexo

Figura 11-6.Varfasetfquetas<tbody> dividen alin mds la tabh

La etiqueta ccol group* define un grupo de columnas.

Puede utilizar la etiqueta ccol group> d e dos formas: como una simple definici6n d e varias
columnas idknticas o como un conjunto de varias columnas distintas. La etiqueta ccol group>
s610 puede aparecer dentro d e una etiqueta c t a b l e>, pero puede definir uno o mas grupos
d e columnas dentro d e una tabla. La etiqueta d e fin c/colgroup> se usa m a vez; e n su
lugar, la etiqueta ccol group> finaliza e n la siguiente etiqueta C C O ~group>, <thead>, <tbody>,
ctfoot> o ctr>.
Utilice el atributo span con la etiqueta ccol group> para conseguir el primer tip0 d e agrupa-
ci6n de columnas. El valor del atributo span es el n ~ m e r oentero de las columnas afectadas
por la etiqueta ccol group>. Por ejemplo, una tabla con seis columnas (cuatro e n el primer
grupo y dos e n el segundo) podria aparecer e n el c6digo fuente asi:

Cuando Internet Explorer redne las celdas d e la tabla e n columnas por la definici6n del
ejemplo, agrupa las primeras cuatro celdas en cada fila como el primer grupo d e columnas
y las siguientes dos e n un segundo grupo. Cualquier otro de 10s atributos d e las etiquetas
ccol group> individuales se aplica a las columnas contenidas e n ese grupo.
Para utilizar la etiqueta ccol group> como un conjunto de columnas distintas, evite el atribu-
to span, pero incluya dentro d e cada etiqueta ccolgroup> una etiqueta c c o l > individual
para cada columna dentro del grupo. Por ejemplo:
11.3 Extensiones para tablrrs de Internet Exploner 367

Este mCtodo crea el rnisrno nlimero de colurnnas en cada grupo que teniarnos con el atribu-
to span, pero le permite especificar atributos de columna de forrna individual. Puede surni-
nistrar aun atributos para todas las colurnnas mediante la etiqueta <colgroup>, pero ser4n
anulados por 10s atributos en las etiquetas <col>, seglin sea apropiado.

Funcion:
Define un grupo de columnas en una tabla
Atributos:
ALIGN
CLASS
SPAN
STYLE
VALIGN
WIDTH
Etiqueta de fin:
</co 1group>; generalmente se omite
Contiene:
Contenido de columna
Usada en:
Contenido a'e tabla

Los atributos a l i g n , v a l i g n , w i d t h , c l a s s y s t y l e controlan 10s aspectos que ya sabe de

cada una d e las colurnnas en el grupo de columnas < c o l group> encapsulado. Estos atribu-
tos aceptan 10s rnismos valores y se comportan exactamente como 10s atributos equivalentes
d e la etiqueta <td>. [<th> y <td>, 11.2.31

Suponga que deseamos que nuestro primer grupo de ejernplo de cuatro columnas ocupe el
20 por ciento del tarnaiio de la tabla, con las dos columnas restantes tomando cada una el 10
por ciento del ancho total d e la tabla. Eso es f4cil con el atributo span:
<colgroup span=4 w i dth="20%">
<col group span=2 w i dth="lO%">
368 Capitdo 11: Tablas

La estructura tarnbiCn puede lograrse con colurnnas especificadas de forrna individual:

<colgroup width="20%">
<c01>
<c01>
<c01>
<c01>
<col group width=" lo%">
<c01>
<c01>
No hay raz6n para no utilizar arnbos rnetodos en la rnisrna tabla. Por decir algo, podriarnos
especificar nuestro ejernplo para agrupar colurnnas con atributos width:
<colgroup span=4 width="20%" align=right>
<col group wi dth="lO%">
<col a1 ign=left>
<col a1 ign=right>
Observe que esto nos permite alinear el contenido de las dos colurnnas del segundo grupo
de forrna individual (la alineaci6n predeterrninada es a1 centro).

11.32.2 Etiqueta <cob

Utilice la etiqueta <col> para controlar la apariencia de una o mas colurnnas dentro de un
grupo de colurnnas.

Funcion:
Define una colurnna dentro de un grupo de columnas
A tributos:
ALIGN
SPAN
Etiqueta de fin:
Ninguna
Contiene:
Nada
Usada en:
Contenido de colurnna

La etiqueta <col> s61o puede aparecer dentro de una etiqueta <col group> dentro de una
tabla. No tiene contenido y, por lo tanto, no tiene etiqueta de fin. M5s bien representa una
o mas columnas dentro de una etiqueta <col group> a la cual Internet Explorer (no Navigator)
aplica 10s atributos de la etiqueta <col>.
11.3 Extensfonesparq tablas & Internet E x p h ~ 369

El atributo a1 i gn afecta la ubicaci6n del contenido dentro de las columnas. Este atributo
acepta 10s mismos valores y se comporta exactamente como el atributo equivalente de la
etiqueta <td>. [<th* y <td*, 11.2.31
El atributo span de la etiqueta <col>, asi como la etiqueta <colgroup>, le permite especifi-
car cuPntas columnas sucesivas son afectadas por esta etiqueta <col>. De mod0 predetermi-
nado, s610 una es afectada. Por ejemplo, Cree una etiqueta <col group> con cinco columnas.
Alineamos la primera y la liltima a la izquierda y a la derecha, respectivamente; las tres de
e n medio quedan a1 centro:

La etiqueta <col> s61o se debe utilizar dentro de las etiquetas <col group> que n o usen el
atributo span. De otro modo, Internet Explorer ignora las etiquetas individuales <col> asi
como sus atributos.

11.3.2.3 Uso de 10s grupos de columnas

Los grupos d e colurnnas son mPs fPciles de utilizar d e lo que parecen a prirnera vista. Piense
e n ellos como e n una plantilla para dar forrnato a sus colurnnas d e tabla. Su principal
prop6sito es crear grupos que puedan separarse por medio d e lineas rnPs gruesas dentro de
la tabla, y modernizar el proceso de aplicaci6n d e 10s atributos d e formato para todas las
celdas en una o mPs columnas.
De vuelta a nuestra tabla d e ejemplo original, podemos colocar una linea mPs gruesa entre
10s r6tulos d e colurnna y las celdas de datos poniendo 10s r6tulos d e columna e n un grupo
d e colurnnas y las celdas d e datos e n otro:
<tab1 e border cell spacing=O cell padding=5 rul es=groups>
<caption align=bottom>Kumquat contra un ojo golpeado, por sexo</caption>
<col group span=2>
<col group span=2>
<thead>
<tr>
<td colspan=2 rowspan=2>
<th colspan=2 align=center>Preferencias
<tr>
<th>Comer kumquats
<th>Golpe en el ojo
<tbody>
<tr a1 ign=center>
<th rowspan=4>Sexo
<th>Hombres menores de 18 atios
<td>94%
<td>6%
<tr a1 ign=center>
 <th>Hombres mayores de 18 aRos
<td>73%
<td>27%
<tbody>
<tr a1 ign=center>
<th>Mujeres menores de 1 8 aRos
<td>34%</td>
<td>66%</td>
<tr a1 ign=center>
<th>Mujeres mayores de 18 atios
<td>16%
<td>84%
<tfoot>
<tr>
<td col span=4 a1 ign=center>
Nota: Con suerte 10s golpes en el ojo no son un datio permanente
</tab1 e>
La figura 11-7 muestra el resultado. Todo lo que agregamos estaba en las dos etiquetas
<col group>; 10s bordes adicionales se dibujaron con el atributo rul es=groups de la etiqueta
<tab1 e>. Para que se dibujaran 10s bordes entre las columnas debe establecer el atributo
rules ya sea en groups, col s o a1 1

I r-
-
1 Preferentias
i

I Hombres menores de 18 aiios

Hombres mayores de 18 aftor 173%

94% 6%
2Wo
66Yo

/ Nofa Con rirrds lor golper en cl ojo no ion un divio prrmanente

Kumquat cnntra un n j gnlpeadn,
~ por sexo

Ffgursr 11-7. Este ejemplo fntegra varla de l a extensfonespara tabla de Internet Explorer.

11.4 Mas alla' de las tablas ordinarias

De cara a ellas, las tablas de HTML son ordinarias: s61o una manera para que 10s acadkmicos
y otros profesionales sedientos de datos den formato en columnas y filas a elementos para
compararlos fiicilmente. Aunque muy retocado por abajo, verii que las tablas son e n reali-
dad extraordinarias. Ademiis de la etiqueta <pre>,la etiqueta <tab1e> y 10s atributos relacio-
11.4 Mds alld de las tablas ordinarias 3 71

nados proporcionan el 6nico mod0 para que controle con facilidad el diserio d e su docu-
mento e n HTML. El contenido dentro d e una etiqueta <pre>, por supuesto, es muy limitado.
Las tablas, por su parte, pueden contener casi cualquier cosa permitida e n el cuerpo del
documento, incluyendo multimedia y formas. Y la estructura d e la tabla le permite de
manera explicita controlar la ubicaci6n d e esos elementos en la ventana del navegador del
usuario. Con la combinaci6n correcta d e atributos, las tablas le brindan una forma para crear
texto e n varias columnas, y encabezados laterales y encuadrados con HTML. Tambien per-
miten crear formas mPs fkiles d e leer, comprender y llenar. Esto es s610 para principiantes.
No sabemos quC podemos recomendar para que tenga suficiente inter& por el disefio de
pPgina: tablas o algo mPs all& Recuerde, HTML no es lo que aparenta, sin0 el contenido. No
obstante. . .
Es facil argumentar que por lo menos las tablas d e informaci6n se benefician del disefio
controlado, y que las formas d e HTML siguen en un refiido segundo lugar. Las tablas propor-
cionan la 6nica forma d e crear diseAos predecibles para sus paginas web, e independientes
del navegador. Usadas con moderaci6n y desarrolladas con un contenido d e calidad, son
una herramienta que todo autor d e paginas d e HTML deberia ser capaz d e usar.
Y ahora que hemos afinado su apetito por el disefio de paginas con tablas, no se desespere
porque lo dejemos a1 finalizar este capitulo sin ejemplos: le ofrecemos varios e n el capitulo 15.
 En este capftulo:
Una descripcidn de los
murcos
Etiquetas para mtwcos
Diseao can nrarcos
Conten* del marc0
Etiqueta w r a m e s >
Marcos inlegrados
Marcos * Mamo con mmbre o
ventana destino

Desde Navigator d e Netscape 2.0, quienes crean paginas con HTML han podido dividir la
ventana principal del navegador e n varios marcos @ a m ) , cada uno mostrando, d e mod0
simultineo, un documento distinto, algo parecido a 10s muros de televisores en una sala de
producci6n televisiva. De popularizaci6n instantinea, 10s marcos pronto fueron adoptados
(y extendidos) por Internet Explorer de Microsoft, a pesar d e que el estandar de HTML 3.2
alin no 10s incorporaba.
Como todo lo que veremos e n este capitulo es una extensi6n a HTML 3.2, dispensaremos
nuestra forma d e explicar la sintaxis de la "extensibn" e indicaremos s61o 10s atributos y
etiquetas dnicas a Navigator y a Internet Explorer. Por lo tanto, siempre recuerde que
las etiquetas y atributos que presentamos aqui, aunque soportados por esos dos navegadores,
son dnicamente extensiones, no cornponentes estindares d e HTML.

12.1 Una descripci6n de 10s marcos

La figura 12-1 es un ejemplo simple de una pantalla con marcos. Muestra c6mo la ventana
del documento puede dividirse e n columnas y renglones d e marcos individuales separados
por bordes y barras de desplazamiento. Aunque no es inmediatamente aparente e n el
ejemplo, cada marco en la ventana muestra un documento independiente. Utilizamos dife-
rentes documentos d e HTML e n el ejemplo, pero 10s documentos individuales pueden
contener cualquier contenido vilido que el navegador pueda desplegar, incluso multimedia.
Si el contenido d e 10s marcos incluye una liga que el usuario selecciona, el nuevo conteni-
do, que incluso puede ser otro documento con marcos, puede remplazar ese mismo marco,
otro marco o toda la ventana del navegador.
Usted habilita 10s marcos con un documento especial cuyo contenido no se exhibe sino que
contiene extensiones a etiquetas d e HTML que le indican a1 navegador c6mo dividir su
ventana principal en marcos discretos y quC documentos van dentro de ellos.
3 72
12.2 E#fquetas para mancos 373

Figura 12-1. Disefio simple con seis marcospara Naoigaror de Netscape.

Los documentos individuales referenciados y desplegados en la ventana del documento con

marcos actlian de manera independiente, hasta cierto grado; el documento controla toda la
ventana. Sin embargo, usted puede hacer que el documento de un marco cargue nuevo
contenido en otro marco. Esto se logra ponikndole nombre a un marco y apuntando a1
marco con nombre con un atributo especial de la etiqueta de liga, <a>.

12.2 Etiquetas para marcos

Hay tres etiquetas de HTML que utilizan Navigator de Netscape e Internet Explorer para
crear un documento con marcos: < f rameset>, < f rame> y < n o f rames>. Ademas, Internet
Explorer proporciona la etiqueta <i
frame>, con la que usted puede crear marcos integrados,
o flotantes.
Un conjunto de marcos pameset) es, simplemente, la colecci6n de marcos que conforman
la ventana del navegador. Los atributos para definir columnas y renglones para la etiqueta
< f r a m e s e t > le permiten indicar el nlimero y tamafios iniciales d e las columnas y renglones
de 10s marcos. La etiqueta <frame> define quC documento (de HTML u otro) i d inicialmente
en 10s marcos dentro de ese conjunto de marcos, y es donde usted puede dar un nombre a1
marco para utilizarlo en ligas de hipertexto.
Aqui tenemos el c6digo fuente de HTML que empleamos para generar la figura 12-1:
<html>
<head>
< t i t l e > D i setio con marcos < / t i t l e >
</head>
<frameset rows="60%.*" cols="65%.20%,*">
<frame src="Marcol. html">
<frame src="MarcoZ. h t m l m >
<frame src="Marco3. html " name="Ll enamel1>
<frame s c r o l l ing=yes src="Marco4. htmll'>
<frame s r ~ = ~ ~ M a r c o 5 . h t m l " >
<frame src="Marco6. h t m l U >
 <noframes>
Lo sentimos, sdlo puede v e r e s t e documento en un navegador
que soporte marcos.
.
<a href="Marcol htrnl ">Esta 1i g a l o 11 eva </a> a1 primer
docurnento de HTML que se carga en e l primer marco.

Observe algunas cosas en el ejemplo de marcos y su imagen (figura 12-1). Primero, el orden
en el cual el navegador coloca 10s marcos del conjunto: a lo largo de cada rengl6n.
Segundo, el marco 4 luce una barra de desplazamiento porque asi lo solicitamos, aun
cuando el contenido pueda ajustarse sin necesidad d e desplazamiento (las barras de despla-
zamiento aparecen autom5ticamente si el contenido sobrepasa las dimensiones del marco, a
menos que usted las deshabilite explicitamente con el atributo de desplazamiento de
la etiqueta <frame>). [<frame>,12.4.11
Otro elemento interesante es el atributo name en una de las etiquetas d e marco. Una vez que
tiene nombre, usted puede hacer referencia a un marco especifico como el lugar en el
que debe mostrarse un documento ligado con hipertexto. Para hacerlo, agregue un atributo
target especial a la etiqueta de liga (<a>) del hipertexto fuente. Por ejemplo, para enlazar
un documento llamado nuevo. html a fin d e que se despliegue en el marco 3, que hemos
llamado "Llename", la liga tendd un aspect0 parecido a Cste:

Si el usuario hace clic en la liga, digamos en el marco 1, el documento nuevo .html remplazad
el contenido original, Marco3. html, del marco 3. [destino d e <a>, 12.71
Finalmente, aunque Navigator e Internet Explorer soportan marcos, es posible que 10s usua-
rios de algunos otros navegadores intenten y consigan ver documentos con marcos. Por ello,
cada documento con marcos deberia proporcionar una puerta trasera hacia la colecci6n de
documentos de HTML mediante la etiqueta <noframes>. Los navegadores compatibles con
marcos 10s exhibidn; 10s que no lo Sean mostrarfin el contenido alternativo de enoframew.

12.2.1 j2ud es un marco

Quien haya abierto m4s de una ventana en el escritorio de su computadora para comparar
contenidos o trabajar con aplicaciones interrelacionadas conoce, de manera instintiva, el
poder de 10s marcos.
Un uso simple para 10s marcos es colocar el contenido comdn de una colecci6n de docu-
mentos, digamos notificaciones de derechos de autor, material introductorio y ayuda para la
navegacih, en un marco, y todo el dem5s contenido en otro marco adyacente. A medida
que el usuario visita nuevas paginas, cada una se carga en el marco de desplazamiento,
mientras persiste el contenido del marco fijo.
Un entorno habilitado para documentos con marcos mas rico brinda herramientas de nave-
gaci6n para colecciones de documentos. Por ejemplo, asigne un marco para mantener un
12.3 DlseUo con marcos 375

indice d e contenido y diversas herramientas d e blisqueda para la colecci6n. Otro para el

contenido del documento seleccionado por el usuario. Conforme 10s usuarios vean sus
paginas e n el marco d e contenido, nunca perderin d e vista las ayudas de navegacidn e n
el otro marco.

Otro uso benefic0 d e 10s documentos con marcos es comparar una forma de HTML devuelta
con su original para verificar el contenido que envi6 el usuario. A1 colocar la forma e n un
marco y su resultado e n otro, permite a1 usuario verificar rapidamente que el resultado
corresponda con 10s datos que tecle6 y envi6 e n la forma. Si es incorrecto, la forma est5
fiicilmente disponible para que el usuario la vuelva a llenar y la envie otra vez.

12.3 Disefio con marcos

El diseiio con marcos es similar a1 diseiio con tablas. Con la etiqueta <frameset> puede
colocar 10s marcos en renglones y columnas y definir sus tamaiios relativos o absolutos.

12.3.1 Etiqueta <frameset>

La etiqueta <frameset> le permite definir una colecci6n d e marcos y controlar su espaciado
y bordes.

Funcion:
Define una colecci6n d e marcos
A tributes:
BORDER
BORDERCOLOR
COLS
FRAMEBORDER
FRAMESPACING 0
ONBLUR
ONFOCUS
ONLOAD
ONUNLOAD
ROWS
Etiqueta de fin:
</frameset>; nunca se omite
Contiene:
Conjunto de marcos
Usada en:
Contenido de H W L
Use la etiqueta <frameset> para definir una colecci6n de marcos y otros conjuntos de
marcos. Los conjuntos de marcos tambien pueden estar anidados, lo que da una amplia
gama d e posibilidades de diseiio.
Emplee la etiqueta <f rameset> en lugar de la etiqueta <body> en el documento con marcos.
No se puede incluir ninglin otro contenido, except0 contenido vllido de <head> y <frarneset>
en un documento con marcos. La combinaci6n d e marcos con un documento convencional
que contenga <body> puede resultar e n un comportamiento impredecible del navegador.

12.3.1.1 Atributos rows y cols

La etiqueta <frameset> tiene un atributo indispensable: col s o rows, el que usted quiera.
Definen el tamaiio y nlimero d e columnas (col s) o renglones (rows) ya sea de marcos o de
conjuntos de marcos anidados para la ventana del documento. Ambos atributos aceptan una
lista de valores (encerrados entre comillas y separados por comas) que especifican el
ancho absoluto (en pixeles) o relativo (porcentaje del espacio restante) de las columnas, o
el alto (de 10s renglones) d e 10s marcos. El nlimero de valores d e atributo determina cuintos
renglones o columnas de marcos mostrari el navegador e n la ventana del documento.
Como con las tablas, el navegador dari a1 conjunto de marcos un tamaiio tan cercano a1 que
usted indic6 como sea posible. No obstante, el navegador no extiende 10s limites de la venta-
na del documento principal para acomodar conjuntos de marcos que de otro mod0 10s reba-
sarian, ni llena la ventana con espacio vacio si 10s marcos especificados no la ocupan toda. En
vez d e eso, el navegador asigna espacio para un rnarco especifico relativo a todos 10s dem5s
marcos e n el mismo rengl6n y columna y llenan resueltamente toda la ventana del documento
(iha visto usted una ventana de docurnento de marco sin barns de desplazamiento?).
Por ejemplo,
<frameset rows="150,300.150"~
crea tres renglones de marcos, cada uno extendido a lo largo d e toda la vencana deldocu,
mn€o.Elprimer6yliltimE de b s m ~ r G s < e < s i a b i e c ~1a5 0 p&eles de alto, el segundo a
300 pixeles. En realidad, a menos que la ventana del navegador sea de 600 pixeles de alto
exactamente, el navegador, de manera automltica y proporcional, agranda o comprime el
primero y el dltimo d e 10s marcos de mod0 que cada uno ocupe una cuarta parte del
espacio d e la ventana; el rengl6n central ocupa la mitad restante.
Los valores del tamaiio d e rengl6n y columna del marco expresados como un porcentaje d e
las dimensiones de la ventana son mls sensibles. Por poner un caso, el siguiente ejemplo es
e n efecto identico a1 anterior:
<frameset rows="25%, 50%. 25%11>
Por supuesto, si la suma d e 10s porcentajes no hace el 100 por ciento, el navegador
redimensiona d e manera automitica y proporcional cada renglon para repartir la diferencia.
Si usted piensa como nosotros, esto no tiene sentido. Quizls alguno de 10s diseiiadores de
marcos sufran la misma dificultad, lo cual explicaria por quC incluyen la formidable opci6n
12.3 DZsdo con marcos 377

de asterisco para 10s valores rows y c o l s de la etiqueta <frameset>. El asterisco le dice a1

navegador que dimensione la respectiva columna o rengl6n a1 espacio restante luego de
colocar marcos adyacentes e n el conjunto de marcos.
Por ejemplo, cuando el navegador encuentra una etiqueta de marco como &a:

crea una columna de tamaiio fijo de 100 pixeles de ancho y luego crea otra que ocupa el
espacio restante e n el conjunto de marcos.
Veamos un ejemplo de diseiio mis divertido:
<frameset col s="10.*, lo">
~ s t crea
e dos columnas muy estrechas y le da la parte central, la restante, a la columna de e n
medio.
TambiCn puede utilizar el asterisco para mis de un valor de atributo de rengl6n o columna.
En tal caso, 10s renglones o columnas correspondientes se dividen equitativamente e n el
espacio disponible. Por ejemplo,

crea un rengl6n de 100 pixeles de alto a la mitad del conjunto de marcos, y dos con un
mismo tamaiio por encima y debajo de 61.
Si usted precede el asterisco con un valor entero, el correspondiente rengl6n o columna
obtiene m8s espacio posible de manera proporcional. Por ejemplo,

crea cuatro columnas: la primera ocupa el 10 por ciento del ancho del conjunto de marcos.
Luego el navegador le da a la segunda tres quintas partes del espacio restante, y a la tercera
y cuarta les otorga una quinta parte.

Usar asteriscos (especialmente con el prefijo numerico) facilita la divisi6n del espacio res-
tante e n un conjunto de marcos.
No obstante, recuerde que a menos que usted lo indique explicitamente, el navegador
permite a 10s usuarios redimensionar e n forma manual las columnas y renglones del docu-
mento con marcos; por lo tanto, cambiar las proporciones relativas que cada marco ocupa
e n la ventana. Para evitar esto, vea el atributo n o r e s i z e de la etiqueta <frame>. [<frame>,
12.4.11

12.3.1.2 Control de 10s bordes y espaciado de marcos

La ausencia de estindares ha dado lugar a varios atributos potencialmente conflictivos que
puede utilizar para definir y cambiar 10s bordes que rodean 10s marcos e n un conjunto
de marcos.
3 78 Capftulo 12: Marcos

Tanto Internet Explorer como Navigator usan el atributo frameborder para deshabilitar o
habilitar de manera explicita 10s bordes d e marco (de manera predeterminada, cada
marco e n un conjunto d e marcos, asi como la ventana misma del conjunto de marcos se
presenta con un borde tridimensional; vkase la figura 12-1). La documentaci6n d e 10s dos
navegadores no coincide en 10s valores especificos para el atributo frameborder, pero
reconoce las convenciones del ouo. Por lo tanto, establecer el valor de frameborder a 0 o no
desactiva 10s bordes (figura 12-21; 1 o yes 10s activan.

ii Rrchluo Cdlclbn Uer I r Marcadorer Opclones Olrertotlo Uentana

m P Netscape: RtnbUtO frameborder
-- --7-'

7-'3, . . .

!T; 1

Figura 12-2.El atrlbuto f romeborder permite eliminar el espacio entre 10s marcos.

Sin embargo, Internet Explorer y Navigator disienten en c6mo se puede controlar el grosor
d e 10s bordes. Internet Explorer soporta el atributo framespacing, cuyo valor e s el
nrimero d e pixeles que usted quiere tener entre 10s marcos (vCase la figura 12-2). El atributo
afecta a todos 10s marcos y conjuntos de marcos anidados dentro del conjunto de marcos
como lo despliega Internet Explorer. En la prictica, usted debe establecerlo una vez e n la
etiqueta <frameset> mas externa a fin de crear una apariencia de borde consistente para
todos 10s marcos e n una sola pagina.
Navigator s61o acepta el atributo border para definir el ancho del borde, con un valor
entero en pixeles. Al igual que Internet Explorer, Navigator le permite incluir el atributo
f rameborder e n cualquier etiqueta <f rarneset>, afectando todos 10s marcos y conjuntos d e
marcos anidados, pero a diferencia de Internet Explorer, Navigator restringe el atributo
border a la etiqueta <frameset> m i s externa, asegurando que todos 10s bordes Sean del
mismo ancho dentro de esa etiqueta <frameset>.
Puesto que 10s navegadores ignoran atributos no soportados, es posible definir bordes de
marco para q u e ambos navegadores hagan l o correcto. S610 aseglirese d e emplear
10s mismos valores e n f ramespac i ng y border.
-
Finalmente, con Navigator usted puede controlar el color de 10s bordes d e 10s marcos
utilizando el atributo bordercol or (figura 12-3), que acepta un nombre d e color o tripleta
12.3 Diseiro con marcos 3 79

hexadecimal como su valor. El apendice F ofrece una lista completa de nombres y valores
d e color.

Figura 12-3.Navigator acepta 10s ambutos border y borderco l o r para controlar el espucio
entre 10s marcos y su color

12.3 1.3 Marcos y JauaScn@t

Internet Explorer y Navigator soportan manejadores d e evento relacionados con JavaScript
que permiten a 10s documentos con marcos reaccionar cuando se cargan por primera vez
y cuando se redimensiona la ventana (onLoad); el usuario la descarga del navegador (onUnl oad);
cuando la ventana que contiene el conjunto d e marcos pierde el foco, como cuando el
usuario selecciona otra ventana (onB1 ur); o cuando el conjunto de marcos se conviene e n la
ventana activa (onFocus). Incluidos como atributos d e <frameset>, estos manejadores d e
evento toman listas de comandos de JavaScript y llamadas de funciones (todas entrecomilladas)
como sus valores. Por ejemplo, usted puede notificar a1 usuario cuando s e haya cargado
todo el contenido e n sus respectivos marcos d e un extenso conjunto de marcos:
<frameset onLoad="window.al ert ('Ya se cargd todo. Puede continuar. I ) ">
Estos cuatro atributos tambien pueden utilizarse con la etiqueta <body>. Analizamos JavaScript
con mas detalle e n 13.3.3.

12.3.2 Etiquetas <frameset>anidadas

Puede crear algunas pantallas d e navegador elaboradas con una sola etiqueta <frameset>,
pero el diseiio con marcos ser5 poco imaginative. Mejor Cree marcos asombrosos y otros
diseiios m%scomplejos con m6ltiples etiquetas <frameset> anidadas dentro de un docu-
/
mento con marcos d e nivel superior.
Por ejemplo, Cree un disefio d e dos columnas, la primera con dos renglones y la segunda
con tres (figura 12-4), mediante la anidacion d e dos etiquetas <frameset> con especificacio-
nes de rengl6n dentro de una <frameset> de nivel superior que especifique las columnas:
<frameset col s="5O%,*">
<frameset rows="50%,*">
 <frame src="Marcol. html 'I>
<frame src="Marco2. htmlN>
</f rameset>
<frameset rows="33%,33%.*">
<frame src="Marco3. html">
<frame src="Marco4. htmll'>
<frame src="Marco5.html">
</f rameset>
</f rameset>

Figura 124.Espectacular disefio con marcos usando etiquetas <f rameset> anidadas.

12.4 Contenido del marco

Un documento con marcos incluye contenido no desplegable, except0 quiz5 un mensaje
para navegadores que no soportan marcos (vease <noframes> posteriormente e n este capi-
tulo). En su lugar, las etiquetas <frame> dentro d e una o mas etiquetas <frameset>, las
cuales encierran el contenido de un documento con marcos, proporcionan referencias a
URL para 10s documentos que se cargan e n cada marco. [<noframes>,12.51

12.4.1 Etiqueta <frame>

La etiqueta <frame> s61o aparece dentro de una etiqueta <f rameset>. h e l a para establecer,
mediante su atributo src, el URL del documento que inicialmente se mosuara e n el marco
respective.
Los marcos se colocan dentro de un conjunto de marcos columna por columna, de izquierda
a derecha y, luego, rengl6n por r e n g h , de la parte superior a la inferior, de mod0 que la
secuencia y ntimero d e etiquetas <frame> dentro d e la etiqueta <frameset> son importantes.
 <frame>
Funcion:
Define un marco e n un documento con marcos (<frameset>)
A tributos:
BORDERCOLOR
FRAMEBORDER
MARGINHEIGHT
MARGINWIDTH
NAME
NORESIZE
SCROLLING
SRC
Etiqueta de fin:
</f rame>; rara vez se incluye
Contiene:
Nada
Usada en:
Documentos con marcos

El navegador despliega marcos vacios para las etiquetas <frame> que no tengan un atributo
src. TambiCn 10s despliega si la etiqueta <frameset> llama m b marcos que las etiquetas
<frame> correspondientes definen. Esos huerfanos permanecen vacios; usted no puede
poner contenido e n ellos posteriormente, incluso si tienen un 'hombre" d e destino para
mostrar otro contenido (vCase 12.4.1.2).

12.4.1.1 Atributo src

El valor del atributo src de la etiqueta < f rame> es el URL del documento que debe mostrar-
se e n el marco. No hay otro mod0 d e proveer contenido para un marco. Por ejemplo, usted
no debe incluir ningdn contenido <body> dentro del documento con marcos; el navegador
ignora las etiquetas de marco y muestra s610 el contenido d e la etiqueta <body> si se
presenta primero, o viceversa.
El documento a1 que se hace referencia con el atributo src puede ser cualquier documento
vilido d e HTML o un objeto capaz de ser exhibido, incluyendo imigenes y multimedia. En
particular, ese documento puede estar compuesto de uno o mas marcos. Los marcos
se despliegan dentro del marco d e referencia, proporcionando asi otra forma d e conseguir
diseiios complejos empleando marcos anidados.
Puesto que la fuente puede ser un documento de HTML completo, todas las caracteristicas
de HTML se aplican dentro de un marco, incluyendo fondos y colores, tablas, fuentes,
etcetera. Por desgracia, esto tambien significa que mliltiples marcos e n una sola ventana de
navegador pueden entrar en conflict0 entre si. Especificamente, si cada documento con
marcos anidado (no un documento de HTML ordinario) tiene una etiqueta < t i t 1e> diferen-
te, el titulo d e la ventana del navegador sera el del documento con marcos mas reciente-
mente cargado. La forma mas facil d e evitar este problema es asegurarse que todos 10s
documentos con marcos relacionados utilicen el mismo titulo.

12.4.1.2 AtrZbuto name

El atributo name, opcional, d e la etiqueta <frame> rotula ese marco para hacerle posterior
referencia mediante el atributo t a r g e t de la etiqueta <a> (liga de hipertexto) y d e la etique-
ta <form> (forma). Asi, usted puede cambiar el contenido de un marco utilizando una liga
e n otro marco. Dicho d e otro modo, como las ventanas de navegador comunes, donde
10s documentos con ligas de hipertexto remplazan el contenido del marco fuente. Abordare-
mos 10s nombres y destinos con mayor amplitud posteriormente en este capitulo. [destino
de liga (*a>), 12.1
El valor del atributo name es una cadena d e texto encerrada entre comillas.

12.4.1.3 Atributo noresire

Aun cuando usted puede establecer explicitamente sus dimensiones con atributos e n la
etiqueta <f rarneset>, 10s usuarios pueden cambiar manualmente el tamafio de una columna
o rengl6n d e marcos. Para evitar este comportamiento, agregue el atributo noresi ze a las
etiquetas de marco (<frame>) e n el rengl6n o columna cuyas dimensiones relativas no
desea que 10s usuarios alteren. Por poner un caso, para un documento con marcos d e dos
por dos, un atributo noresi ze e n cualesquiera d e las cuatro etiquetas de marco asociadas
congelarii las proporciones relativas de todos 10s marcos.
El atributo noresi ze es sobre todo 6til para marcos que contienen imigenes fijas que sirven
como anuncios comerciales, barra d e botones o logotipo. A1 fijar el tamafio d e marco para
que contenga Onicamente la imagen y establecer el atributo noresize, usted garantiza que
la imagen se exhibiri como se esperaba y que el resto d e la ventana del navegador siempre
estara dada sobre 10s otros marcos e n el documento.

12.4.1.4 Atributo scrolling

El navegador despliega barras de desplazamiento vertical y horizontal en marcos cuyo
contenido sea mPs grande q u e el espacio d e ventana asignado. Si hay suficiente
espacio para el contenido, las barras de desplazamiento desaparecen. El atributo s c r o l l i ng
de la etiqueta <frame> le da control explicit0 para que las barras de desplazamiento aparez-
can o desaparezcan.
Con scroll ing = "yes", el navegador agrega barras d e desplazamiento para el marco
designado, incluso si no hay nada para desplazar. Si establece el atributo scroll i ng a1 valor
no, las barras d e desplazamiento n o se agregan a1 marco, incluso si su contenido es
mayor que el marco mismo. El valor auto, soportado s610 por Navigator, funciona como si
12.5 Etiqueta <noframes> 383

no incluyera el atributo scroll ing en la etiqueta; Navigator agrega barras de desplazamien-

to conforme sea necesario. Para lograr un comportamiento auto en Internet Explorer, sim-
plemente omita el atributo scroll i ng.

12.4.1.5 Atributos marginheighty marginwidth

El navegador deja casi siempre una pequeiia cantidad de espacio entre el borde de un
marco y su contenido. Usted puede cambiar estos margenes con 10s atributos margi nheight
y marginwidth, cada uno incluyendo el valor del nCimero exacto de pixeles que deben
dejarse alrededor del contenido del marco.
No se puede dejar un margen menor que un pixel, o hacerlo tan grande que no haya
espacio para el contenido del marco, pues estos atributos, como la mayoria de 10s d e m h en
HTML, sugieren, n o dan 6rdenes a1 navegador. Si 10s valores de margen deseados no pue-
den ser acomodados de forma adecuada, el navegador 10s ignora y presenta el marco lo
mejor posible.

12.4.1.6 Atributos frameborder y bodwcolur

Puede agregar o eliminar bordes de un marco con el atributo frameborder. Los valores yes
o 1 y no o 0, respectivamente, activan o desactivan 10s bordes del marco y anulan el valor
del atributo frameborder para cualquier conjunto de marcos que contenga a1 marco.
Cabe seiialar que 10s navegadores reaccionan de manera algo diferente a las especificacio-
nes d e bordes. Por ejemplo, Navigator elimina un borde individual s610 si 10s marcos adya-
centes que lo comparten tienen sus bordes desactivados. Por su parte, Internet Explorer
elimina esos bordes adyacentes, pero s610 si no e s t h explicitamente activados en 10s mar-
cos adyacentes. Nuestro consejo es controlar de manera explicita 10s bordes para cada
marco si quiere manejar consistentemente 10s bordes de todos 10s marcos e n ambos
navegadores.
Onicamente con Navigator de Netscape puede tambiCn cambiar el color de 10s bordes del
marco individual con el atributo bordercolor. Utilice un nombre de color o tripleta
hexadecimal como su valor. Si dos marcos adyacentes tienen diferentes atributos bordercol or,
el color resultante queda indefinido. El apCndice F incluye una lista completa de nombres y
valores de color.

12.5 Etiqueta <noframes>

Un documento con marcos n o tiene cuerpo (<body>). De hecho, n o debe tenerlo,
puesto que el navegador ignora cualquier etiqueta de marco si encuentra cualquier conteni-
d o de cuerpo (<body>) antes de hallar la primera etiqueta <frameset>. Por lo tanto,
un documento con marcos es completamente invisible a cualquier navegador que no sea
capaz de manejar marcos. La etiqueta <noframes> ofrece cierto alivio a quien n o puede ver
marcos.
 <noframes>
Funcion:
Suministra el contenido para navegadores que no soportan marcos
Atributos:
, Ninguno
I Etiqueta de fin:
I c/noframes>; algunas veces se omite
Contiene:
I
Contenido de cuerpo
Usada en:
Contenido de un conjunto de marcos

Utilice la etiqueta <noframes> solamente dentro de la etiqueta <frameset> mis exterior d e

un documento con marcos. El contenido dentro de la etiqueta <noframes> y su indispensa-
ble etiqueta de fin, </nofrarnes>, no lo despliega ningdn navegador que soporte marcos,
per0 10s navegadores que no 10s manejan muestran e n su lugar otro contenido del docu-
mento con marcos. El contenido d e la etiqueta <noframes> puede ser cualquier contenido
de cuerpo normal, incluyendo la etiqueta <body> misma.
Aunque esta etiqueta es opcional, 10s experimentados creadores d e piginas d e HTML por lo
regular incluyen la etiqueta <noframes> e n sus documentos con un contenido que notifique
a1 usuario d e un navegador no compatible con marcos que se esti perdiendo el especticulo.
Y 10s diseiiadores astutos ofrecen a esos usuarios una salida, si no es que un acceso direct0
a 10s documentos individuales que conforman el contenido del documento con marcos.
iRecuerda nuestro primer ejernplo d e marco en este capitulo? La figura 12-5 muestra lo que
pasa cuando el documento con marcos s e carga en una versi6n antigua d e Mosaic.

--31: -=
.--.-=.__._-- Etiqueta <noframe> c ATE

Lo sentimos, l6b puede rtr tsls amnnranrr con Newape ve1si6n 2.0 o pasterior. lo bva
a1primer documnto de H M L wn aarew.

Figura 12-5.El texto de uloframes> en un navegador que no soporta marcos.

<noframes>
Lo sentimos, sblo puede ver este documento con Netscape
versibn 2.0 o posterior.
<a href="Marcol.html"> Esta liga </a> lo lleva a1 primer
documento de HTML con marcos.
+of rames>
La razdn por la que <noframes> trabaja es que la mayoria de 10s navegadores son tolerantes
e n extremo con las etiquetas err6neas y 10s documentos incorrectos. Un navegador que no
soporta marcos simplemente ignora las etiquetas de marco. Lo que queda, entonces, es el
contenido d e la etiqueta <noframes>, que el navegador muestra fielmente.
Si su navegador impone estrictamente alguna versi6n de HTML que no soporte marcos,
simplemente puede mostrar un mensaje d e error y rehusarse a desplegar el documento,
aun si contiene una etiqueta <noframes>.

12.6 Marcos integrados

Hasta este punto, nuestro analisis se ha centrado e n 10s marcos definidos como parte de un
conjunto de marcos. A su vez, un conjunto de marcos sustituye a la etiqueta convencional
<body> y proporciona el contenido a1 usuario mediante 10s marcos que lo componen.
Internet Explorer le permite hacer las cosas un poco diferentes: usted tambikn puede definir
un marco que exista dentro de un documento convencional, mostrado como parte del flujo
de texto d e ese documento. Estos marcos se comportan de manera muy parecida a las
imageries integradas, por lo que se conocen como marcos integrados.

12.61 Etiqueta <ifirarne>

Defina un marco integrado con la etiqueta <i frame>.
La etiqueta <i frame> no se utiliza dentro de una etiqueta <frameset>; aparece en cualquier
sitio d e un documento donde podria ir una etiqueta <img>. La etiqueta define una regi6n
rectangular dentro del documento e n la que el navegador muestra un documento de HTML
independiente, incluyendo barras de desplazamiento y bordes.
La mayoria d e 10s atributos de la etiqueta <i frame>, incluyendo frameborder, margi nheight,
marg i nwi dt h, name, scroll i ng y src, se comportan exactamente como 10s atributos corres-
pondientes d e la etiqueta <frame>. Para mayor informaci6n acerca de estos atributos, vkase
12.4.1.
Use el contenido de la etiqueta <i frame> para proporcionar informaci6n a 10s usuarios de
navegadores distintos a Internet Explorer, el cual ignora este contenido rnientras todos 10s
debs navegadores ignoran la etiqueta <i frame> y, por consiguiente, muestran su contenido
como si h e r a un contenido de cuerpo comdn. Por ejemplo, utilice el contenido de <i frame>
para explicar a 10s que no son usuarios de Internet Explorer lo que se estan perdiendo:
.. . o t r o conteni do del documento
<iframe src="barra.html " wi dth=75 height=200 a1 ign=right>
Su navegador no soporta marcos integrados. Para ver
<a href="barra.htmlU>este documento </a> correctamente.
t e n d r i que usar I n t e r n e t Explorer de Microsoft.
</if rame>
.. .conteni do subsecuente del documento
 <zyrame> 0
Funcion:
Define un rnarco integrado dentro del flujo de texto
Atributos:
ALIGN
FRAMEBORDER
HEIGHT
MARGINHEIGHT
MARGINWIDTH
NAME
SCROLLING
SRC
WIDTH
Etiqueta de final:
</iframe>; nunca se ornite
Contiene:
Contenido de cuerpo
Usada en:
Texto

En este ejernplo, dejamos que el usuario sepa que entrd a una caracteristica que su navegador
no soporta, y le damos una liga a1 contenido ausente.

12.6 1.1 Atributo align

A1 igual que el atributo a1 i g n de la etiqueta <img>, este atributo para rnarco integrado le
perrnite gogrolarellugar dondedsk se roloca j u t e cmxkextc+adyaeente; m e m e v e a l
- - -

borde del docurnento, perrnitiendo que el texto fluya alrededor del rnarco. [allneaci6n de
hagen, 5.2.6.41

Para alineacidn integrada, utilice top, m i d d l e o bottom corno el valor de este atributo.
El rnarco se alinearl con la parte superior, media, o inferior del texto adyacente, respectiva-
rnente.

Para que el texto fluya alrededor del rnarco integrado, use 10s valores 1e f t o r i g h t para
este atributo. El rnarco se mover5 hacia el borde izquierdo o derecho del flujo de texto,
respectivarnente, y el contenido restante del documento fluid alrededor de 61. Este cornpor-
tarniento es exactarnente corno el de las irnlgenes cuyo atributo a1 ign se estableci6 en 1 e f t
(izquierda) o r ig ht (derecha).
12.7 Mano con nombre o ventana destino 387

12.6 1.2 Atributos height y width

Internet Explorer pone el contenido de un marco integrado en un rectangulo predefinido de
150 pixeles de alto y 300 de ancho. Utilice 10s atributos h e i g h t y w i d t h con el ndmero
de pixeles como valores para cambiar estas dimensiones.

12.62 Uso de 10s marcos integrados

Aunque usted probablemente eludira 10s marcos integrados e n la mayoria d e sus paginas
web, pueden ser dtiles, sobre todo para dar informaci6n relacionada con el documento que
estii desplegado, de manera semejante a 10s articulos en espacios laterales que se encuen-
tran en una publicaci6n convencional impresa. Por desgracia, un gran porcentaje de su
pdblico no podra verlos, de manera que debe asegurarse de incluir el contenido alternativo
apropiado dentro d e las etiquetas < i frame> e < / i frame> a fin de ayudar a esos observado-
res menos afortunados a ver el contenido del marco.
Excepto por su ubicaci6n dentro del contenido convencional del documento, 10s marcos
integrados son tratados exactamente igual que 10s marcos comunes. Usted puede cargar
otros documentos dentro del marco integrado utilizando su nombre (vea la siguiente sec-
ci6n) y hacer ligas hacia otros documentos desde el marco integrado.

12.7 Marco con nombre o ventana destino

Como vimos e n la secci6n sobre la etiqueta <frame>, usted puede titular un marco aiiadien-
d o el atributo name a su etiqueta <frame>. Una vez nombrado, el marco puede llegar a ser
la ventana destino d e un documento ligado seleccionado dentro de un documento mostrado
e n algdn otro marco. Usted hace esto posible ariadiendo el atributo especial t a r g e t a la liga
que hace referencia a1 documento.

12.71 Atributo target de la etiqueta <a>

Si incluye el atributo t a r g e t dentro de una etiqueta <a>, el navegador carga y exhibe el
documento nombrado e n el atributo h r e f de esa etiqueta e n un marco o ventana cuyo
nombre coincida con el destino ("target"). Si el marco o ventana con nombre no existen,
el navegador abre una nueva ventana, le da el nombre especificado y carga el documento
en ella. De aqui e n adelante, 10s documentos ligados de hipertexto que tengan como desti-
n o ese nombre se cargarin e n la ventana nueva.
Las ligas d e hipertexto con destino facilitan la creaci6n de herramientas para navegar efec-
tivas. Un simple documento d e indice d e contenido, por ejemplo, puede redireccionar
documentos a una ventana independiente:
 < l i><a h r e f = " c a p l .html " target=llventana-dinamica">Capltulo l</a>
e l i><a href=I1cap2.html " target="ventana-dinamicaWapltulo 2</a>
< l i><a href="cap3.htmlN target="ventana-dinamicaWapltu10 3</a>
</u1>
La primera vez que el usuario hace clic e n una de las ligas de hipertexto del indice de
contenido, el navegador abre una ventana nueva, que llamad "ventana-dinamica", y mues-
tra el contenido del documento deseado dentro de ella. Si el usuario selecciona otra liga y la
"ventana-dinamica" esti abn abierta, el navegador carga otra vez el documento elegido
dentro d e ella, remplazando el documento anterior.
Durante todo el proceso, la ventana que contiene el indice de contenido e s d accesible a1
usuario. A1 hacer clic e n una liga e n una ventana, el usuario provoca que el contenido d e la
otra ventana cambie.
De manera similar, puede poner el indice de contenido e n un marco de un documento con
dos marcos y utilizar el marco adyacente para desplegar 10s documentos seleccionados:
< f rameset c o l s="150,*">
<frame s r c = " i ndi ce. htmll'>
<frame s r c = " p r e f . html " name="marco-dinamicoM>
</frameset>
Cuando el navegador muestra inicialmente 10s dos marcos, el de la izquierda contiene el
indice d e contenido y el de la derecha el prefacio (figura 12-6).

I Los MlMles del hmqwb d rededor

d"! *q*n I? fy!e,pevcfm

I
rn smor ae BSm morawe muw. UllllFB

I a -a enmin%i6n del ciclo de vida

y lor nnrravillososusos da estn
l ~ ~ ~ v i l l alimnto
oso

Figura 12-6.El marco del indice de conrmaiio conrrola el conrmido del marco adyacenre.

Cuando un usuario selecciona una liga del indice de contenido e n el marco de la izquierda
(por ejemplo, Capitulo 11, el navegador carga y muestra el documento asociado e n el marc0
"marco-dinamico" e n el lado derecho (figura 12-7). A medida que otras ligas son seleccio-
nadas, el contenido del marco d e la derecha cambia, mientras el marco de la izquierda hace
que el indice de contenido permanezca inmovil para el usuario.

Figura 12-7. El capftulo 1 se despliega m el marco adyacmre.

12.7 M a n o con nombre o ventana destino 389

12.7.2 Destinos especiales

Existen cuatro nombres de destino (tatget) reservados para acciones especiales de redirecci6n
de documentos:

-bl ank
El navegador siempre carga un documento ligado con target="-bl ank" e n una nueva
ventana abierta, sin nombre.

-sel f
Este valor de destino e s el predeterminado para todas las etiquetas <a> que no especi-
fican un destino, haciendo que el documento destino se cargue y muestre e n el
mismo marco o ventana que el documento fuente. Este destino es redundante e innece-
sario a menos que se utilice e n combinaci6n con el atributo target de la etiqueta
<base> e n un encabezado de documento (vCase abajo).

-parent
El destino -parent hace que el documento se cargue e n la ventana o e n el conjunto
de marcos padre conteniendo el marco con la referencia d e hipertexto. Si Csta se
encuentra e n una ventana o un marco de nivel superior, es equivalente a1 destino
-s e l f .
Un breve ejemplo puede ayudar a aclarar c6mo trabaja esta liga. Considere una liga
e n un marco que es parte de un conjunto de tres marcos e n columnas. Este conjunto
de marcos, a su vez, es un rengl6n e n el conjunto de marcos de nivel superior que se
exhibe en la ventana del navegador. La figura 12-6 muestra este arreglo.
Si n o se especifica un destino para la liga de hipertexto, se carga e n el marco que
la contiene. Si se especifica el destino -parent, el documento se carga dentro del area
ocupada por el conjunto de marcos de tres columnas que contiene el marco con
la liga.

-top
Este destino hace que el documento se cargue en la ventana que contiene la liga de
hipertexto, remplazando cualquier marco actualmente mostrado e n ella.
Continuando con la jerarquia de marcos mostrada e n la figura 12-8, a1 usar un objetivo
-top removeria todos 10s marcos contenidos y cargaria el documento dentro de la
ventana del navegador.
Todos estos cuatro nombres comienzan con el gui6n d e subrayado. Cualquier otro nom-
bre de ventana o d e destino que inicie con tal gui6n es ignorado por el navegador. No
utilice ese gui6n como primer caracter del nombre d e a l g h marco que defina e n sus
documentos.
12.73 El destino predeterminado <base>
Puede ser tedioso especificar un destino para cada liga de hipertexto e n sus documentos, e n
especial cuando la mayor parte de ellos son destinos e n la misma ventana o marco. Para
aligerar este problema, puede agregar el atributo target a la etiqueta <base>. [<base>,
7.7.11
El atributo target d e la etiqueta <base> establece el destino predeterminado para cada liga
de hipertexto e n el documento actual que n o contenga un atributo target explicito. Por
ejemplo, e n nuestro documento del indice d e contenido, casi cada liga hace que el docu-
mento correspondiente se despliegue e n la ventana llamada "marco-dinamico". En vez
de incluir ese destino e n cada liga, coloque el destino comdn e n la etiqueta <base> del
indice de contenido dentro de su encabezado (<head>):
<html>
<head>
<ti tle>Indice d e contenido</title>
<base target="marco-dinamicoU>
</head>
<body>
<h3>Indice de conteni do</h3>
12.7 Ma-o con nombre o ventana destino 391

<u1>
4 i><a h r e f = " p r e f . html ">Prefacio>/a>
< l i><a h r e f = " c a p l . html ">Capitulo l-=/a>
e l i><a href="cap2. html ">Capitulo 2-=/a>
<li>-=a href="cap3.html">Capitulo 3</a>
</ul>
-=/body>
</html>

Observe que no incluimos ninguna otra referencia d e destino en la lista d e ligas, ya que el
navegador cargar5 y mostrari todos 10s documentos respectivos e n el destino base
"marco~dinamico".

12.73.I Comportamiento de liga traditional

Antes del inicio d e 10s marcos, cada vez que hacia clic e n una liga, el documento correspon-
diente sustituia el contenido d e la ventana del navegador. Con 10s marcos, este comporta-
miento se modifica d e mod0 que el documento correspondiente remplaza a1 contenido
del marco a1 q u e hace referencia la liga. Este con frecuencia n o es el comporta-
miento deseado y puede ser desconcertante para quienes examinan sus documentos.
Supongamos que usted ha arreglado todos 10s documentos d e su sitio para presentarse ellos
mismos e n tres marcos: un marco d e navegaci6n e n la parte superior d e la ventana del
navegador, un marco d e contenido desplazable en la parte de en medio y una forma de
retroalimentaci6n e n la parte inferior. Usted nombra a1 marco de contenido con el atributo
name d e la etiqueta <frame> e n el documento de nivel superior para su colecci6n y utiliza el
atributo t a r g e t d e la etiqueta <base> en cada documento e n su sitio para asegurar que
todas las ligas se cargarin e n el marco d e contenido, que es el d e en medio.
Este arreglo funciona perfectamente para todos 10s documentos e n su sitio, per0 iquC ocurre
cuando un usuario selecciona una liga que lo lleva a un sitio diferente? El documento
referenciado seri cargado en el marco d e en medio. iAhora el usuario se enfrenta a un
documento d e algfin otro sitio, rodeado por sus marcos d e navegaci6n y retroalimentaci6n!
La soluci6n es estar seguro que toda liga d e hipertexto que hace referencia a un documento
remoto tiene el atributo t a r g e t establecido e n -top. De esta manera, cuando alguien hace
clic e n una liga que lo lleva lejos de su sitio, el documento remoto remplazar5 el contenido
de la ventana del navegador, incluyendo 10s marcos d e navegaci6n y retroalimentaci6n. Si la
mayoria de las ligas de sus documentos estin en otros sitios, considere agregar t a r g e t = " - t o p "
a la etiqueta <base> e n su documento, y emplear atributos d e destino t a r g e t explicitos en
las ligas a sus documentos locales.
 En este c a p f t u k
Applets
Contentdo incrustado
JavaScrfpt
Hojas de estUo dk
Javdcript

Contenido ejecutable

La verdad sea dicha, HTML es como un libro de historietas en un mundo rebosante de dibujos
animados el sabado por la manana. Salvo por la ocasional irnagen GIF animada, una p5gina de
HTML pura, aunque atractiva, es una presentaci6n esdtica de texto e imigenes. Los documen-
tos de HTML no deben estar limitados con 10s medios impresos. El Web es un dinamo digital de
anirnacion y procesos activos, disperses por Internet alrededor del mundo. Y,con las innova-
ciones recientes, HTML tambiCn puede danzar.
Para aderezar esas piginas que de otro modo serian torpes, existen diversas etiquetas de HTML y
que rinicamente inyectan contenido d i ~ m i c ao las paginas. Conocidos comlinmente como applets
o guiones (scrjDts), e incrustadas dentro del documento de HTML, estos programas llegan a su
navegador y se ejecutan de maneras diferentes. Durante su ejecuci6n, applets y guiones pueden
generar contenido de HTML M m i c o , interactuar con el usuario, validar datos de formas e incluso
crear ventanas y ejecutar aplicaciones independientes de sus pfiginas de HTML. Las posibilidades
son infinitas y van d s all5 del modelo de documento originalmente previsto para HTML.
En este capitulo describimos c6mo el contenido dinamico puede aumentar sus documentos de
HTML. Le mostraremos, con ejemplos simples, c6mo incmstarlas e incluir contenido ejecutable
(guiones y applets) en sus documentos de HTML. Sin embargo, no pretendemos enseiiarle a
escribir y depurar sus propios applets. Desputs de todo este es un libro acerca de HTML. Mejor
consiga una opini6n experta: vaya a cualquiera de 10s excelentes libros de O'Reilly sobre el
tema, incluyendo Javdcript: the DeJinitive Guide,Java in a Nutshell y Exploring Java.

13.1 Applets
Uno d e 10s mas excitantes desarrollos recientes en las tecnologias web es la capacidad de
entregar aplicaciones directamente a1 navegador del usuario, donde se ejecutan en la mP-
quina cliente. Estas aplicaciones son comdnmente herramientas o aplicaciones pequefias
(de aqui el tCrmino "applet") que cumplen tareas simples en la computadora cliente, inclu-
yendo mdltiples mejorias e n el desplegado de la pigina d e HTML.
Los applets, como 10s mapas d e imagenes del lado cliente, representan un desplazamiento
e n el modelo blsico d e las comunicaciones por el Web. Hasta hace poco, 10s servidores
hacian casi todo el trabajo computacional e n el Web; 10s navegadores (clientes) no eran
mucho mas que terminales mejoradas. Con 10s applets y 10s mapas d e imagen del lado
cliente, la tecnologia web s e desplaza hacia el cliente, distribuyendo cierta, o toda, la carga
computacional del servidor a1 cliente y a1 navegador.
Los applets representan tambien una forma de extender las funciones del navegador sin
forzar a 10s usuarios a comprar o adquirir d e otro mod0 un nuevo navegador, como ocurre
cuando 10s desarrolladores implementan nuevas extensiones de etiqueta y atributos d e
HTML. Y tampoco hacen que 10s usuarios tengan que adquirir e instalar una aplicaci6n
especial, como sucede con las aplicaciones auxiliares o 10s conectores. Esto significa que
una vez que 10s usuarios tienen un navegador que soporta applets, usted puede entregarles
extensiones d e navegador d e inmediato, incluyendo innovaciones multimedia y d e desple-
gad0 d e HTML.

13.1.1 El modelo de applet

Los applets son como otras partes accesorias d e un documento de HTML. El navegador
carga primer0 la pagina d e HTML, examina si existen etiquetas especiales que identifiquen
applets, 10s cuales, como otros recursos web, se identifican con un URL, y obtiene el applet
mediante el protocolo HTTP comdn.
Una vez que se descarga o baja el applet, el navegador reserva una parte del espacio de
visualizaci6n del documento para que el applet lo utilice como su propio espacio. Usted
puede controlar el tamafio y posici6n de esta area de exhibici6n; el applet controla lo que se
presentar4 e n ella.
Durante la ejecucibn, el applet tiene acceso a un entorno restringido dentro d e la compu-
tadora del usuario. Por ejemplo, 10s applets tienen acceso a1 rat6n y a1 teclado, y pueden
recibir entrada del usuario. Pueden iniciar conexiones d e red y obtener datos desde otros
servidores e n Internet. En suma, 10s applets son programas completes, plenos d e una
gran variedad d e mecanismos d e entrada y salida, junto con un equipamiento completo
d e servicios de red.
Puede colocar varios applets e n un solo documento; pueden ejecutarse e n paralelo y
pueden comunicarse entre si. Aunque el navegador puede limitar el acceso que tienen a su
sistema d e c6mput0, 10s applets tienen control total de su entorno virtual dentro del
navegador.
13.1.2 La ventaja del applet
Existen varias ventajas con 10s applets, de las cuales la d e n o menos importancia es propor-
cionar interfaces d e usuario mls bonitas dentro de una p5gina web. Por ejemplo, un applet
puede crear un conjunto linico de menlis, botones d e selecci6q campos de texto y herra-
mientas para recibir entradas del usuario distintas a las del navegador. Cuando el usuario
hace clic e n un bot6n dentro de la regi6n de visualizaci6n/interacci6n del applet, kste
puede responder mostrando el resultado e n la misma area, seiialando a otro applet o inch-
so cargando una pagina completamente nueva en el navegador.
No queremos decir que el linico prop6sito de 10s applets sea mejorar la interfaz del usuario.
Un applet es un programa completamente funcional que puede realizar cualquier ndmero
d e tareas d e c6mputo e interactivas con el usuario en la computadora cliente. Un applet
puede implementar una muestra de video en tiempo real, realizar simulaci6n d e circuitos,
comprometer a1 usuario e n un juego, etcetera.

13.1.3 Uso correct0 de los applets

Un applet no es mas que otra herramienta que usted puede utilizar para producir p5ginas web
atractivas y litiles. Recuerde que un applet emplea 10s recursos computacionales del clien-
te durante su ejecuci6n y, por lo tanto, es una carga adicional en la computadora del usuario.
Puede degradar el rendimiento del sistema.
De mod0 similar, si un applet usa gran cantidad del ancho d e banda d e la red para realizar
su tarea (la alimentaci6n de video en tiempo real, por ejemplo), puede hacer las otras
comunicaciones e n la red insoportablemente lentas. Aunque estas aplicaciones son diverti-
das, hacen poco m5s que enfadar a su pdblico potencial.
Para utilizar un applet d e manera correcta, equilibre la carga entre el navegador y el servi-
dor. Para cada pAgina, decida que tareas es mejor dejarle a1 servidor (procesamiento de
formas, bdsquedas d e indice y otras semejantes) y cu5les son mis convenientes para proce-
- - - - - - - - - - - - -

samients bsa4 (mejeres-zn mkrfaz def usuario, pfisentacibri d e datos e n tiempo real, pe-
queiias animaciones desplegables, validaci6n d e entrada, etcetera). Divida el proceso de
acuerdo con esto. Recuerde que muchos usuarios tienen cornputadoras y conexiones de red
mls lentas que usted y diseiie sus applets para satisfacer a la mayoria d e su pliblico.
Empleados de manera apropiada, 10s applets mejoran limpiamente sus pPginas y dan una
experiencia satisfactoria a su pliblico. Usados inadecuadamente, son s610 otro molesto des-
perdicio de ancho d e banda, enloquecen a sus usuarios y daiian sus plginas.

La creaci6n d e applets e s una tarea d e programaci6n, no usualmente un trabajo para el

creador d e plginas d e HTML, y ciertamente un tema m5s all5 del objetivo de este libro. Para
rnPs detalles, le recornendarnos consultar cualquiera de 10s rnuchos textos de prograrnaci6n
de applets que han aparecido recienternente en todas las librerias, incluyendo 10s de O'Reilly
& Associates y 10s de McGraw-Hill.

Hoy en dia, un lenguaje dornina el rnundo de la programaci6n de applets: Java. Desarrolla-

do por Sun Microsysterns de Mountain View, California,Java soporta un estilo de programa-
ci6n orientada a objetos donde las clases de 10s applets pueden usarse una y otra vez para
construir aplicaciones cornplejas.
Por invencibn, 10s applets hechos con el misrno lenguaje deben correr con cualquier
navegador que 10s soporte. En realidad, ciertas decisiones de irnplernentaci6n de Microsoft
han provocado que algunos applets de Java vPlidos fallen cuando se ejecutan en Internet
Explorer. Por fortuna, Microsoft arreglarP estos problernas y Java perrnanecer4 corno un
lenguaje de prograrnaci6n universal para el Web. En cualquier caso, el programador de Java
consciente debe rnantenerse a1 dia con la liltirna tecnologia y crear applets que estCn certi-
ficados corno 100% Java puros. En particular, Microsoft estP intentando obtener prograrna-
dores que ernpleen extensiones propietarias para Java que funcionen solarnente en platafor-
mas de Microsoft. Recomendamos evitar cualquier extensi6n propietaria para Java que se
desvie del esthdar de Java versi6n 1.1actualrnente en amplio uso.
Debernos aprovechar esta oportunidad para mencionar tarnbiCn a ActiveX, una tecnologia
de prograrnaci6n alternativa de applets disponible con Microsoft. ActiveX es propietaria,
estrechamente acoplada a las diversas versiones de Windows de Microsoft, y s610 es corn-
pletamente funcional cuando se utiliza con Internet Explorer. Los applets de ActiveX se
ejecutan en versiones de Internet Explorer apropiadas para diversas versiones de Windows,
per0 un applet simple hecho con ActiveX no se ejecutarP en versiones diferentes sin volver-
se a cornpilar, lo cual contrasta con 10s applets de Java, donde un solo applet puede ser
escrito y cornpilado una vez y ejecutado de inrnediato en una arnplia garna de navegadores
y sisternas operativos.
ActiveX tarnbiCn presenta un inaceptable riesgo de seguridad para cualquier usuario cuyo
navegador soporte la tecnologia ActiveX. Resulta ridicularnente f5cil penetrar y daiiar una
computadora ejecutando un navegador que perrnita la ejecuci6n de applets de ActiveX. Por
esta razbn, no podemos recornendar ActiveX corno una tecnologia de irnplernentaci6n de
applets viable y varnos rnPs lejos a1 recornendar que 10s usuarios desactiven la capacidad
de ActiveX en sus navegadores, especificarnente en Internet Explorer.

13.1.5 Etiqueta <applet>

Utilice la etiqueta <appl e t > dentro de 10s docurnentos de HTML para nornbrar el applet que
el navegador debe bajar y ejecutar. TambiCn use esta etiqueta a fin de definir una regi6n
para el applet dentro del docurnento. Asirnisrno, puede surninistrar un contenido alternativo
dentro de la etiqueta <appl e t > para verlo en navegadores que no soporten applets.
396 Capftulo 13: Contenido ejecutable

<appkt>
Funcion:
Inserta una aplicaci6n e n el flujo de texto actual
Atributos:
ALIGN
ALT
ARCHIVE
CODE
CODEBASE
HEIGHT
HSPACE
MAYSCRIPT
NAME
TITLE 0
VSPACE
WIDTH
Etiqueta de fin:
</appl et,; nunca se omite
Contiene:
Contenido de applet
Usada en:
Texto

code es el tinico atributo indispensable. Identifica el nombre de la clase del programa hecho
con Java.
El navegador inserta la regi6n d e visualizacibn del applet en el flujo de texto que la contiene
como si fuera una imagen integrada: sin cortes de linea y como un solo gran objeto,El
- - - - - - - - - - -

navegador baja yejecuta el appTet7ieFpuesdebajar y desplegar el documento de HTML, y

continda la ejecuci6n hasta que el c6digo termina por si mismo o cuando el usuario deja de
ver la pagina que contiene a1 applet.
La mayoria de 10s applets necesitan uno o mis padmetros que usted proporciona en el documen-
to de HTML a fin de controlar su ejecucibn. Ponga estos parimetros entre la etiqueta <appl et>
y su correspondiente etiqueta de fin, </applet>, utilizando la etiqueta <param>. El navegador
pasa 10s parametros especificos de documento a1 applet a1 estarse ejecutando. [*param, 13.1.61

13.1.5.1 Atrfbuto align

Al igual que una imagen, puede controlar la alineaci6n de la regi6n de visualizaci6n del
applet con respecto a1 texto que lo rodea. De hecho, el atributo a1 ign de la etiqueta
<appl e t > acepta todos 10s valores de alineaci6n utilizados por la etiqueta <img>, incluyen-
d o t o p , t e x t t o p , middle, absmi ddl e, base1 ine, bottom y absbottom, asi como las alineaciones
1 e f t (izquierda) y r i g h t (derecha) para contenido ajustado. [alineacibnde w e n , 5.2.6.41

13.1.5.2 Atributo a21

El atributo a1 t le da una forma de decir graciosamente a 10s usuarios que se estan perdiendo
de algo; por alguna raz61-1,el applet no puede ejecutarse o no se ejecutad en sus computadoras.
Su valor es una cadena de texto encerrada entre comillas que, como el atributo a1 t para
imagenes, aparece e n lugar del applet.
El mensaje de a l t es s610 para navegadores que soportan applets. Consulte el apartado
13.1.5.11para ver c6mo informar a 10s usuarios de navegadores que no soportan applets
por qu6 no pueden ver un applet.

13.1.53 Atributo archive

Soportado hicamente por Navigator de Netscape, el atributo a r c h i v e le permite coleccio-

nar clases comunes de Java e n una sola biblioteca que se almacena e n el espacio cache del
disco duro local. Una vez almacenado, el navegador n o necesita utilizar la red para tener
acceso a un applet; lo obtiene desde el cache local, reduciendo, por consiguiente, 10s
retardos inherentes a la actividad adicional d e la red para cargar la clase.
El valor del atributo a r c h i v e es un URL que identifica a1 archivo que contiene las clases
(archive). El sufijo del nombre d e este puede ser .zip o jar. Los archivos .zip estan e n el
conocido formato de archivo ZIP, generado por PKZIP y muchas otras utilidades. Los archi-
vos .jar estan e n el nuevo formato de archivos de Java; actualmente, el soporte para 10s
archivos jar es acaso reducido, per0 llegara a difundirse con mas amplitud. Los archivos
jar soportan compresi6n y algunas caracteristicas avanzadas, como las firmas digitales.
Puede utilizar el atributo a r c h i v e e n cualquier etiqueta de c a p p l e t > , incluso si la clase a la
que hace referencia mediante el atributo code de dicha etiqueta no existe e n el archivo. Si
la clase no se encuentra e n el archivo, el navegador simplemente intenta obtener la clase
relativa a1 URL del documento o el URL indicado e n codebase, si s e especifica.

13.1.5.4 Atributo code

El atributo code es indispensable. uselo para especificar el nombre de archivo de la clase de

Java que debe ejecutarse e n el navegador. Observe que esto no es un URL; el navegador
supone que el archivo del applet se localiza en el rnismo directorio que el documento
d e HTML anfitri6n. Para hacer la btisqueda relativa a otra localidad de almacenamiento, utilice
el atributo codebase descrito e n el apartado 13.1.5.5,o un archivo comprimido, como acaba-
mos de ver. Ademh, el sufijo de extensi6n del nombre de archivo debe ser .class. Si usted no
lo incluye algunos navegadores agregan de manera autom4tica .class cuando buscan el applet.
398 Capitub 13: Contenido ejecutable

Por ejemplo, para ejecutar un applet de reloj contenido e n un archivo llamado reloj.class
puede incluirse en su documento de HTML el c6digo:

El navegador localizarP el c6digo para el applet utilizando el URL base del documento
actual. Por lo tanto, si su URL es:
http://www. kumquat. com/cosecha. html
el navegador obtendrP el c6digo del applet de la clase re1 oj anterior como:

13.1.5.5 Atributo codebase

Use el atributo codebase para proporcionar un URL base alternativo desde donde el navegador
debe obtener el archivo del applet. El valor de este atributo es un URL apuntando a un
directorio que contenga la clase definida por el atributo code. El URL d e codebase invalida,
pero no remplaza permanentemente, el URL base del documento, el cual es el predetermi-
nado si usted no utiliza codebase. [URL, 7.21
Siguiendo con nuestro ejernplo anterior, suponga que su documento actual provino de htp:/
/unuw.kumquat.com, pero el applet re1 oj reside en un directorio independiente llamado
.
cl ases. Usted no puede obtener el applet especificando code=cl aseslrel o j cl ass. En
vez de ello, incluya el atributo codebase y el nuevo URL base:
capplet code=reloj .class codebase="http://www. kumquat .com/clases/"~
</appl et>
el cual se convierte en el URL:
http://www. kumquat .com/cl ases/rel oj .class
Aunque utilizarnos un URL absoluto en este ejemplo, tambiCn puede emplear un URL rela-
tivo. Por ejemplo, en la mayoria de 10s casos 10s applets se guardan en el misrno servidor
que 10s documentos de HTML anfitriones, de mod0 que seria generalmente mejor, con
objeto de reubicarlos, especificar un URL relativo para el c6digo base, tal como:

13.1.5.6 Atrfbuto name

El atributo name le perrnite proporcionar un nombre tinico para esta instancia de la clase (la
copia del applet que se ejecuta en la computadora del usuario). Como otros elementos con
nombre en el documento de HTML, dar un nombre a1 applet permite a otras partes del docu-
mento de HTML, incluyendo otros applets, hacer referencia e interactuar con Cse, digamos,
para compartir resultados de cPlculos.
Supongamos que usted tiene dos applets de reloj e n su documento, junto con dos applets
que el usuario opera para ajustar esos relojes. DC nombres dnicos a 10s applets de reloj con
el atributo name, luego p4selos a 10s applets de ajuste empleando la etiqueta <param>, que
veremos m4s adelante e n este capitulo:
<applet code=reloj.cl ass name=relojl>
</appl e t >
<applet code=reloj.cl ass name=reloj2>
</appl e t >
<appl e t code=Ajustador.cl ass>
<param name=relojAAjustar val ue=rel o j l >
</appl e t >
<appl e t code=Ajustador.class>
<param name=relojAAjustar val ue=reloj2>
</appl e t >
Puesto que no hay necesidad d e distinguir entre 10s applets Ajustadores, elegimos no nom-
brar estas instancias.

13.1.5.7 Atributos heighty width

IdCnticos a sus contrapartes de la etiqueta <img>, 10s atributos height y width definen el
tamaiio d e la regi6n d e visualizaci6n del applet e n el documento. Estos atributos aceptan
valores que indican el tamaiio de la regi6n, e n pixeles. [*lmg> alto y ancho,9.2.6.91
Las dimensiones de esta regi6n con frecuencia deben satisfacer algdn otro requerimiento del
applet, asi q u e tenga el cuidado d e verificarlos con el programador del applet. En ocasiones,
el applet puede dimensionar su salida para coincidir con su regi6n especificada.
Imaginemos que nuestro applet d e reloj de ejemplo debe crecer o empequeiiecerse para
ajustarse casi a cualquier tamaiio de regi6n de visualizaci6n. Asi, podemos crear un reloj
cuadrado d e 100 pixeles de ancho por 100 d e alto:
.
<appl e t code=reloj cl ass height=100 w i dth=100>
</appl e t >

13.1.5.8 AMbutos hspace y vspace

Como con una imagen flotante o integrado, si la rodea estrechamente con texto, confina la
regi6n d e visualizaci6n del applet. Los atributos hspace y vspace le permiten poner espacio
vacio alrededor d e la regi6n del applet para acomodarla fuera del texto. Ambos atributos
aceptan un valor que indica pixeles d e espacio; el atributo hspace crea un espacio a la
izquierda y a la derecha de la regi6n; vspace arriba y abajo.
Por ejemplo, para dar a nuestro reloj d e ejemplo espacio d e respiro e n la piigina, podriamos
dejar 5 pixeles adicionales alrededor d e el:
400 Gaphlo 13 Contenido ejecutable

13.1.5.9 Atributo mayscript

El atributo m a y s c r i p t , soportado s61o por Navigator de Netscape, indica que el applet de
Java acceded a una funci6n de JavaScript del navegador. Comlinmente, 10s applets de Java
que intentan tener acceso a JavaScript provocan un error de navegador. Si sus applets
acceden a JavaScript debe especificar mayscri p t en la etiqueta <appl et>.

13.1.5.10 Atributo title

El valor de este atributo es una cadena entrecomillada que Internet Explorer ocupa para dar
un titulo, si es necesario, a1 applet. Este atributo no lo soporta Navigator.

13.1.5.11 Soportepara navegadores incompatibles

Puesto que algunos navegadores no soportan appkts o la etiqueta <appl et>, a veces quiz5
deba necesitar comunicar a 10s lectores que se est5n perdiendo de algo. Hlgalo incluyendo
contenido de cuerpo de HTML entre las etiquetas <appl et> y </appl et>.
Los navegadores que soportan las etiquetas <appl e t > ignoran el contenido de HTML inte-
rior. (Utilice el atributo a1 t para notificar a 10s usuarios del navegador capacitado para
manejar applets cuando el applet no se vea por alguna raz6n.) Por supuesto, 10s navegadores
que no soportan applets no reconocen las etiquetas <appl et>. Siendo generalmente tole-
rantes ante 10s errores aparentes de HTML, por lo regular ignoran la etiqueta no reconocida
y proceden alegremente a mostrar cualquier contenido que pueda aparecer dentro. Es tan
simple como eso. El siguiente fragment0 dice a 10s usuarios de un navegador incapacitado
para manejar applets que no verln nuestro ejemplo del reloj:
cappl e t code=rel o j . c l ass>
Si su navegador pudiera manejar applets, usted verfa
un hermoso r e l o j j u s t o aqui
</appl e t >

Recuerde-que-este texto 2s-difee~te-a&texto summistrado por el atrTbuto a1 t de Ta

etiqueta < a p p l et>. El texto d e a1 t lo muestran 10s navegadores q u e soportan la etiqueta
< a p p l e t > pero n o pueden ejecutar o mostrar el applet especificado. El texto anterior lo
despliegan 10s navegadores que n o soportan e n absoluto la etiqueta <appl et>. A fin d e
servir a ambas clases de navegadores, el autor considerado les da elementos para cada
etiqueta <appl e t > :
<applet code-reloj .class height.100 width-100
a1 t="[Applet de r e l o j no disponibleIw>
<param name=esti 1o val ue=anal ogi co>
S i su navegador pudiera manejar applets, usted v e r f a
un hermoso r e l o j j u s t o aquf.
</appl e t >
1 31 Appkts 401

13.1.6 Etiqueta <param>

La etiqueta <param> proporciona padmetros a una etiqueta de contenido cappl e t > u

<param>
Funcion:
Proporciona un parhmetro para una etiqueta cappl e t >
Atributos:
NAME
TYPE 0
VALUE
VALUETYPE 0
Etiqueta de fin:
Ninguna
Contiene:
Nada
Usada en:
Contenido de applet

La etiqueta <param> no tiene contenido ni etiqueta de terminacibn. Aparece, quizhs con

otras etiquetas <param>, s610 entre una etiqueta <applet> y <object> y sus respectivas
etiquetas d e terminacibn. Use la etiqueta <param> para pasar parhmetros a1 applet y objeto
incrustado como se necesita para que funcione correctamente.

13.1.6.1 Atributos name y vabse

La etiqueta <param> tiene dos atributos indispensables: name y val ue. Ambos aceptan cade-
nas como su valor y juntos definen un par nombre/valor que el navegador pasa a1 applet.
Como muestra, nuestro ejemplo de applet de reloj puede permitir a 10s usuarios especificar
la zona horaria por la que se establece su hora local. Para pasar el parPmetro llamado "zona"
con el valor "EST a nuestro applet de ejemplo, especificariamos 10s padmetros asi:
cappl e t code=rel o j .class>
<param name=zona val ue=EST>
</appl e t >
Puesto que 10s dos atributos tienen cadenas simples como valores, no 10s entrecomillados.
En valores con espacios y puntuacibn incrustados, asegtirese d e entrecomillar las cadenas
d e manera adecuada.
402 Capftulo 1& Contenido ejecutable

El navegador pasa 10s pares nornbre/valor a1 applet, pero eso no garantiza que &te espere
10s pararnetros, que 10s nornbres y valores Sean correctos, o que el applet incluso 10s utilice.
Los nornbres de parametro correctos, incluyendo letras rnaylisculas, asi corno 10s valores
aceptables 10s deterrnina el autor del applet. El autor inteligente de docurnentos de HTML
trabaja rnuy de cerca con el prograrnador del applet o tendra docurnentaci6n detallada para
asegurar que 10s padrnetros del applet reciban 10s nornbres correctos y se les asignen
valores validos.

13.1.6.2 Atributos type y valuetype

Los atributos type y val uetype unicarnente 10s soporta Internet Explorer. ~ s e l o spara defi-
nir el tip0 de parametro que el navegador pasa a1 objeto incrustado y c6rno ese objeto va a
interpretar el valor. Utilizados s610 con etiquetas <param> contenidas dentro de una etiqueta
<object> (vCase 13.2), estos atributos no tienen uso con padrnetros que se pasen a applets
de Java.
El atributo val uetype puede tener uno de tres valores: data, ref u object. El valor data
indica que el valor del parametro es una cadena simple. Es el valor predeterrninado. ref
seiiala que el valor es un URL de algun otro recurso en el Web. Por ultimo, object indica
que el valor es el nornbre de otro objeto incrustado en el docurnento actual. Esto puede ser
necesario para soportar cornunicaci6n entre objetos dentro de un docurnento de HTML.
El valor del atributo type es el tip0 de rnedio MIME del valor del parametro. Esto general-
rnente carece de significado cuando el valor del padmetro es una cadena simple, pero
puede ser importante cuando es, en realidad un URL apuntando a alglin otro objeto en el
Web. En tal caso, el objeto incrustado puede necesitar conocer el tip0 de MIME del objeto a
fin de usarlo correctarnente. Por ejernplo, este parametro dice a1 objeto incrustado que el
parametro es en realidad el URL de un docurnento de Word de Microsoft:
<param name=documento val ue=http://kumquats .com/f ruto.doc
type=appl ic a t i on/msword val uetype=url>

13.2 Contenido incrustado

La etiqueta <applet> le perrnite insertar prograrnas, casi siernpre applets de Java, en sus
paginas d e HTML. Corno extensi6n a este concepto, 10s navegadores populares tarnbiCn le
perrniten insertar "objetos" de datos en sus p4ginas. Estos objetos son rnateria para aplica-
ciones especiales, conocidas corno conectores (plug-ins), que crean terceras partes y que
generalrnente se distribuyen por el Web a 10s usuarios interesados. Si el usuario posee una
copia del conector, el objeto incrustado en su docurnento de HTML hace, de rnanera auto-
rnatica, que el navegador ejecute la aplicaci6n (el conector), que a su vez utiliza la inforrna-
ci6n del objeto para procesarniento y visualizaci6n.
Inicialmente, 10s conectores resolvieron la carestia de contenido multimedia disponible en el
Web. Los primeros conectores soportaban alimentaci6n de audio y video, por ejemplo, y otro
contenido agradable, como la animacibn, que simplemente no era posible con HTML llano.
Conforme 10s programadores fueron perfeccionSndose, 10s conectores evolucionaron para in-
cluir aplicaciones como juegos, interfaces de bases de datos y elementos de interfaz gdfica.
En esta secci6n veremos dos etiquetas que soportan contenido incrustado. La etiqueta <embed>
le permite incluir un objeto cuyo tip0 de MIME haga referencia a1 conector que se necesita
para procesar y, posiblemente, exhibir ese objeto. La etiqueta < o b j e c t > es un hibrido de las
etiquetas <embed> y c a p p l e t > , y soporta tanto objetos incrustados como applets.

13.2.1 Etiqueta <ernbed>

Funcion:
Incrusta un objeto en un documento
Atributos:
ALIGN rn
BORDER rn
HEIGHT
HIDDEN
HSPACE rn
NAME
PALETTE
PLUGINSPAGE
SRC
TYPE rn
UNITS
VSPACE
WIDTH
Etiqueta de fin:
Ninguna
Contiene:
Nada
Usada en:
Texto

Utilice la etiqueta <embed> para incluir una referencia en su documento de HTML hacia algfin
conector especial y tal vez a datos para ese conector. Haga referencia al objeto de datos median-
te el auibuto s r c y un valor de URL para bajarse por medio del navegador. h t e utiliza el t i p de
404 Capttulo 13: Contenid0 ejecutable

MIME del objeto src para deterrninar el conector necesario para procesar el objeto. De manera
alternativa, puede usar tambikn el atributo type para especificar un t i p de MIME sin un objeto
y, por lo tanto, iniciar la ejecuci6n de un conector si existe en la computadora del usuario.
Como todas las d e m h etiquetas, <embed> tiene un conjunto de atributos predefinidos que
definen parlmetros y modifican el comportamiento de la etiqueta. A diferencia de la mayor
parte d e las d e m h etiquetas, sin embargo, 10s navegadores le permiten incluir pares
d e atributo nombre/valor especifico del conector en la etiqueta <embed> que, e n lugar de
alterar la acci6n de la etiqueta misma, se pasan a1 conector para procesamiento adicional.
Por ejemplo, esta etiqueta:

tiene atributos procesados por la etiqueta <embed> (src, width y height) y dos que no son
reconocidos, pero que se pasan a1 conector asociado con video en forrnato AVI: autos t a r t y 1oop.
Es muy dificil documentar todos 10s atributos posibles que 10s muchos conectores podrian
necesitar con sus etiquetas <embed> asociadas. Mejor acuda a1 desarrollador del conector
para aprender todos sus atributos, requeridos y opcionales, para cada conector e n particular
que planee utilizar e n sus plginas.

13.2.1.1 Atributos align, bordm, height, width, hspace y vspace

El navegador invariablemente muestra 10s objetos incrustados a1 usuario e n la regi6n

reservada dentro d e la ventana del documento. Los atributos a1 ign, border, h e i g h t ,
width, hspace y vspace d e la etiqueta <embed> le permiten controlar la apariencia de esa
regi6n exactamente como lo hacen para la etiqueta <img>, de modo que n o nos extende-
remos acerca d e ella aqui. [*img>, 5.2.61
Brevemente, 10s atributos h e i ght y width controlan el tamaiio de la regi6n de visualizaci6n.
Comlinmente, debe especificar el alto y ancho e n pixeles, pero tambien puede usar algunas
otras unidades de medida si especifica el atributo u n i t s (vease 13.2.1.8). Los atributos
hspace y vspace definen un margen, en pixeles, alrededor de dicha regi6n. El atributo
a1 ign determina c6mo alinea el navegador la regi6n dentro del texto circundante, mientras
el atributo border determina el ancho del borde que la rodea.
S610 Navigator de Netscape soporta 10s atributos a l i g n , border, hspace y vspace e n la
etiqueta <embed>.

El atributo hidden hace un objeto invisible a1 usuario, forz5ndolo a tener un alto y ancho
igual a cero. Observe que a1 establecer hidden no causa que el navegador exhiba una
regi6n vacia dentro del documento, sin0 que elimina por completo el objeto del flujo d e
texto que lo contiene.
Este atributo es util para flujos d e audio colocados dentro d e documentos d e HTML. La
entrada d e HTML:
<embed src=musica.wav hidden autostart=true loop=true>
incrusta un objeto d e audio e n la p4gina. El navegador n o muestra nada a1 usuario, per0
reproduce mdsica de fondo. En contraste, el conector asociado con:

puede presentar un panel d e control d e audio a 10s usuarios para que puedan iniciar y
detener la reproducci6n d e audio, ajustar el volumen, etcetera.

13.2.1.3 Atributo name

Lo mismo que otros atributos name, Cste tambiCn le permite etiquetar el objeto incrustado
para hacerle referencia posterior mediante otros elementos e n el documento, incluyendo
otros objetos. El valor del atributo name es una cadena d e caracteres.

El atributo palette es soportado tanto por Navigator como por Internet Explorer, per0 d e
maneras completamente diferentes. Con Navigator, el valor del atributo pal ette es foreground
o background, indicando cu4l paleta d e colores del sistema d e ventanas utiliza el conector
para su exhibici6n.
Con Internet Explorer, el valor d e palette es un par d e valores hexadecimales d e color,
separados por una barra vertical. El primer valor determina el color del primer plano utiliza-
do por el conector; el segundo establece el color d e fondo. De este modo, a1 especificar esta
paleta (pal ette):

hace que el conector util.ice el rojo como color d e primer plano y verde como color de
fondo. Para ver una descripcion completa d e 10s valores hexadecimales d e color, consulte el
apCndice F.

El atributo pl ugi nspage, soportado dnicamente por Navigator de Netscape, especifica el

URL d e una p4gina web con instrucciones d e d6nde obtener y c6mo instalar el conector
asociado con el objeto incrustado.
406 C a p M 1 3 Contenido ejecutable

13.2.1.6 Atributo src

Como sus contrapartes de referencia de documentos para una minada de otras etiquetas, el
atributo src proporciona el URL del objeto de datos que usted incrust6 en el documento de
HTML. El servidor que proporciona el objeto debe estar configurado de manera que notifi-
que a1 navegador el tip0 de MIME correct0 del objeto. De lo contrario, el navegador utiliza
el sufijo del dltimo elemento del valor de src (el nombre de archivo del objeto en la ruta del
URL) para determinar el tip0 del objeto. El navegador usa este tip0 de MIME para determi-
nar cusl conector debe ejecutar para procesar el objeto.
Si no incluye el atributo src en la etiqueta <embed>, debe incluir el atributo type para
hacer referencia de manera explicita a1 tip0 de MIME y, por consiguiente, a la aplicaci6n
conectora.

13.2.1.7 Atrfbutotype

Utilice el atributo type ademls de, o en lugar del atributo src. Su valor indica explicitamen-
te el tip0 de MIME del objeto incrustado, el cual determina, a su vez, a que conector debe
llamar el navegador para procesarlo. Este atributo no es necesario si incluye el atributo src
y el navegador puede determinar el tip0 de objeto desde el URL o desde el servidor del
objeto. Usted debe proporcionar un atributo type si no incluye el atributo src.
Puede parecer extraiio utilizar la etiqueta <embed> sin el atributo src para algrjn objeto,
pero esto es comdn si el conector no requiere datos o 10s obtiene dinsmicamente despues
de iniciada. En estos casos, el atributo type es indispensable para que el navegador sepa a
cuil conector invocar,

13.2.1.8 Atributo units

Las unidades de medida predeterminadas de 10s atributos height y width, que controlan el
espacio de exhibici6n de <embed>, son pixeles. El atributo units le permite establecer de
manera explicita la medida absoluta de pixel s , o cambiarla a la relativa en, cuya medida es
la mitad del tamaiio de punto actual del texto en el documento. Con las unidades en, usted
adapta el Area de visualizaci6n (viewport) para que sea proportional a su contenido inme-
diatamente circundante, cuyo tamaiio puede modificar el usuario.
Por ejemplo,
<embed src=f i lme.avi hei ght=200 wi dth=320 uni ts=pixel s>

crea un puerto de visi6n para la ventana de 200 por 320 pixeles. A1 cambiar units a en, ese
mismo puerto de visi6n, cuando se incluyen dentro de un flujo de texto de doce puntos, se
convertirs en 1200 por 1920 pixeles.
13.2 Contenid0 incrustado 407

13.2.2 Etiqueta <noembed>

Algunos navegadores no soportan la etiqueta <embed>. La etiqueta <noembed> facilita un
contenido altemativo que informe a 10s usuarios que estin perdikndose de algo.

<noembed> El 0
Funcion:
Proporciona el contenido para navegadores que no soportan <embed>
Atributos:
Ninguno
Etiqueta de fin:
Ninguna
Contiene:
Nada
Usada en:
Texto

Los navegadores populares ignoran el contenido de la etiqueta <noembed>, rnientras 10s que no
soportan la etiqueta <embed> muestran su contenido. Use el contenido de la etiqueta <noembed>
para mostrar alguna clase de mensaje que tranquilice a 10s usuarios de navegadores inadecuados:
<embed src=filme.mov autostart=true loop=true>
<noembed> Para ver un magnifico filme debe actualizar su navegador
para que soporte la etiqueta &lt;embed&gt; tag!c/noembed>
Sugerimos emplear un mensaje en <noembed> s d o en caso de que el objeto sea crucial para
que el usuario comprenda y use el documento de HTML. Y,e n tales casos, ponga una liga
para un documento que estC solo sin el objeto incrustado, o explique exactamente el problema.

132.3 Etiqueta <object>

La etiqueta <object> brinda la funcionalidad de la etiqueta < a p p l e 0 y de la etiqueta
<embed>. h e l a para insertar applets de Java u otros programas en un documento, junto con
sus parsmetros, o para incrustar objetos en un documento, haciendo que el navegador
invoque a1 conector asociado.
La etiqueta <object> fue implementada originalmente por Microsoft a fin de soportar la
insercidn de applets de ActiveX e n documentos. Posteriormente Microsoft agreg6 soporte
limitado para las etiquetas <embed> y < a p p l e 0 y agreg6 capacidades tip0 <embed> para
<object>, junto con la capacidad para manejar applets de Java. En una manera similar,
Netscape soportaba inicialmente las etiquetas <embed> y cappl e t > y mPs adelante ofreci6
soporte limitado para la etiqueta Cobj ec t>.
Todo este alboroto por colocar a 10s navegadores gigantes nos pone nerviosos. Nosotros
simplemente no podemos predecir quC extensi6n serP soportada hoy, ni en quC forma, y
quC estarii o no disponible maiiana. En consecuencia, no recomendamos que utilice la
etiqueta c o b j e c t > . Mejor utilice las etiquetas individuales <embed> y <appl e t > para 10s
prop6sitos que desea conseguir,

<object> 0
Funcion:
Incrusta un objeto o applet en un documento
Atributos:
ALIGN
BORDER 0
CLASSID
CODEBASE
CODETYPE 0
DATA
DECLARE 0
HEIGHT
HSPACE 0
ID
NAME 0
NOTAB 0
SHAPES 0
STANDBY 0
TABINDEX 0
TITLE 0
TYPE
USEMAP 0
VSPACE 0
WIDTH
Etiqueta de fin:
</object>; nunca se omite
Contiene:
Objeto
Usada en:
Texto

La mayoria de 10s diversos atributos de la etiqueta <object> son idCnticos a 10s soportados
por sus contrapartes <embed> y cappl et>.
132 Contenido incrustado 409

El contenido d e la etiqueta < o b j e c t > puede ser cualquier contenido valid0 d e HTML,
junto con etiquetas <param> que pasen parametros a un applet. Si el navegador puede
obtener el objeto solicitado y procesarlo exitosamente, ya sea como un applet o median-
te un conector, el contenido d e la etiqueta <object>, except0 por las etiquetas <param>,
es ignorado. Si ocurre cualquier problema durante la transferencia y procesamiento del
objeto, el navegador n o inserta el objeto dentro del documento; e n su lugar exhibe el
contenido d e la etiqueta < o b j e c t > , pero n o d e las etiquetas <param>. En pocas palabras,
debe utilizar el contenido d e la etiqueta < o b j e c t > para proporcionar contenido alterna-
tivo para 10s navegadores que n o pueden manejar la etiqueta < o b j e c t > o si el objeto no
puede ser cargado con Cxito.

13.2.3.1 Atrtbutos align, border, height, widtb, hspace y vspace

Estos atributos controlan la apariencia de la regi6n d e visualizaci6n d e <object> exacta-
mente como 10s atributos correspondientes d e la etiqueta <img>. Los atributos h e i g h t y
w i d t h controlan el tamaiio de dicha regi6n. Los atributos hspace y vspace definen un
margen, e n pixeles, alrededor de ella. El atributo a1 ign determina cdmo el navegador alinea
la regi6n en context0 con el texto circundante, mientras el atributo b o r d e r determina el
ancho del borde que rodea la regi6n d e visualizaci6n. [<img>, 5.2.61
Los atributos border, hspace y vspace est5n soportados s610 por Internet Explorer.

13.2.3.2 Atributo classid

Use el atributo c l a s s i d con un valor de URL para hacer referencia a1 objeto que el navegador
debe incluir e n el documento. El atributo c l a s s i d es semejante a1 atributo code d e la
etiqueta <appl et>: proporciona el nombre del archivo que contiene el objeto, y se utiliza
junto con el atributo codebase para determinar el URL completo del objeto que s e d recupe-
rado y colocado en el documento.

13.2.3.3 Atributo codebase

Utilice el atributo codebase para hacer referencia a1 applet o a archivos d e objetos d e datos
que n o estCn localizados e n el mismo directorio que el documento d e HTML anfitri6n. El
valor d e este atributo es el URL que servid, junto con el valor del atributo c l a s s i d , para
localizar y bajar el objeto deseado. El valor URL d e codebase puede ser absoluto o relativo;
si es relativo, se supone que lo es con respecto a1 URL del documento que lo contiene.

13.2.3.4 AMbuto codetype

El atributo codetype es dnicamente para Internet Explorer y especifica el tipode MIME del
objeto. Este atributo s610 e s necesario si el navegador no puede determinar el tip0 d e c6digo
d e 10s atributos c l a s s i d y codebase, o si el servidor no entrega el tip0 d e MIME correct0
cuando se descarga el objeto.
410 CapUuIo 13: Contenido ejecutable

13.2.3.5 Atributo data

El atributo d a t a le permite asociar un archivo de datos independiente, si existe, que debe
ser procesado por el objeto. El valor del atributo d a t a es el URL del archivo, ya sea absoluto
o relativo a1 URL base del documento o el que usted proporcione e n el atributo codebase.
El navegador determina el tip0 d e datos por medio del tip0 d e objeto que va a insertarse e n
el documento. Este atributo es semejante a1 atributo src de la etiqueta <embed> e n el sentido
que descarga 10s datos que serin procesados por el objeto incluido. La diferencia entre las
etiquetas <embed> y <object> es que <embed> infiere la aplicaci6n d e procesamiento basa-
da e n el tip0 d e datos, mientras <object> espera que usted especifique d e manera explicita
la aplicaci6n por medio d e 10s atributos c l a s s i d y codebase.

13.2.3.6 Atributo declare

El atributo d e c l a r e le permite definir un objeto, per0 restringe a1 navegador d e bajarlo y
procesarlo e n realidad. Usado junto con el atributo name, esta caracteristica es semejante a
una instrucci6n forward e n un lenguaje de programaci6n mis convencional que le permite
diferir la descarga d e un objeto hasta que vaya a usarse realmente e n el documento.
Este atributo solamente esti soportado por Internet Explorer.

13.2.3.7 Atributos i d y name

Use 10s atributos i d y name para titular un objeto para hacerle referencia posterior mediante
otros elementos de su documento d e HTML, incluyendo otros objetos. Por desgracia, s61o
Navigator d e Netscape soporta el atributo i d , mientras que s610 Internet Explorer soporta el
atributo name. Para estar seguro, debe nombrar sus objetos con ambos atributos, puesto que
10s navegadores ignoran 10s atributos que no soportan.

~ n i c a m e n t epara Internet Explorer con objetos ActiveX, el atributo notab excluye el objeto
del orden d e tabulaci6n del documento.

13.2.3.9 Atributos shapesy usemap

Para utilizarse solamente con Internet Explorer, el atributo shapes informa a1 navegador que
el objeto e s sensible a 10s movimientos del rat6n y contiene ligas de figuras, d e manera muy
parecida a un mapa d e imigenes del lado cliente. De hecho, con shapes usted tambiCn
debe proporcionar el atributo usemap con su URL para el mapa que define 10s puntos con
ligas dentro del area de exhibici6n del objeto. Un anilisis completo d e 10s mapas de im4ge-
nes del lado cliente puede encontrarse e n el apartado 7.5.2.
13.2.3.10 Atributo standby
El atributo standby le permite hacer que Internet Explorer s61o muestre un mensaje (la
cadena d e texto del valor del atributo) durante el lapso que el navegador tarda e n descargar
10s datos del objeto. Si 10s objetos son grandes o usted espera una respuesta lenta d e la red,
agregue este atributo como una cortesia con sus usuarios.

13.2.3.11 Atributo tabindex

El valor del atributo t a b i ndex es un ntimero entero que define la posicidn del objeto en la
secuencia d e tabulaci6n del documento. Los navegadores colocan objetos interactivos y
elementos d e forma en la secuencia de tabulaci6n conforme aparecen e n el documento.
Para cambiar esta secuencia solamente en Internet Explorer, utilice el atributo t a b i ndex.

13.2.3.12 Atributo titk

Internet Explorer s61o le permite titular d e manera especial 10s objetos con el atributo t i t l e ,
que toma una cadena de texto como su valor. El navegador puede elegir mostrar este titulo a1
usuario o puede utilizarlo d e alguna otra manera mientras despliega el documento.

13.2.3.13 Atributo type

El atributo t y p e le permite definir explicitamente el tip0 de MIME de 10s datos que aparecen
e n el archivo que usted declara con el atributo data. Si usted no proporciona datos, o si el
tip0 de MIME de 10s datos proviene aparentemente del URL o del servidor, puede omitir este
atributo. De cualquier mod0 le recomendamos incluirlo, para asegurar que sus datos se
manejen correctamente por el navegador y el objeto incluido.

Ya sea <appl et>, <object> o <ernbed>, todo el contenido ejecutable del que hemos hablado
hasta ahora tiene una caracteristica comtin: e s t h separados del navegador y del documento
d e HTML, datos separados, mlquina d e ejecuci6n separada.
JavaScript es diferente. Es un lenguaje d e guiones que explota la funcionalidad propia del
navegador. Usted puede poner instrucciones de JavaScript a lo largo de sus documentos, ya
sea como bloques d e c6digo o simples declaraciones unidas a etiquetas individuales. Los
navegadores compatibles con JavaScript, incluyendo Navigator e Internet Explorer, interpre-
tan y actlian bajo las instrucciones de JavaScript que usted proporciona para hacer cosas
tales como cambiar la apariencia del documento, controlar su desplegado, validar y manipu-
lar elementos d e forma y hacer tareas d e cdmputo generales.
412 Cabitutitlo 13' Contenido decutable

Como con Java, n o pretendemos enseiiar programaci6n con JavaScript e n este libro. Le
mostraremos c6mo incrustar y ejecutar guiones d e JavaScript dentro d e sus documentos, y le
pediremos que consulte libros como Javdcript: 7Be Definitive Guide, de O'Reilly, para una
definicion completa del lenguaje JavaScript.

13.3.1 Etiqueta <script>

Una manera d e poner c6digo d e JavaScript e n 10s documentos de HTML es mediante la
etiqueta < s c r i pt>.

Funcion:
Define un gui6n ejecutable dentro d e un documento
Atributos:
LANGUAGE rn 0
SRC rn 0
Etiqueta de fin:
< / s c r i p t > ; nunca s e omite
Contiene:
Guiones
Usada en:
Contenido de encabezado, contenido de cuetpo

Todo lo que estC entre las etiquetas < s c r i p t > y < / s c r i pt> lo procesa el navegador como
instrucciones y datos ejecutables d e JavaScript. Usted no puede colocar c6digo d e HTML
dentro d e esta etiqueta; el navegador lo seiialarg como error.
Los navegadores que no soportan la etiqueta < s c r i p t > procesan el contenido d e esta eti-
queta como HTML regular, para confusi6n del usuario. Por esta razdn, y como con la nueva
etiqueta < s t y 1 e>, le recomendamos que incluya el contenido de la etiqueta < s c r i p t > den-
tro d e comentarios d e HTML:

Para 10s navegadores que ignoran la etiqueta < s c r i p t > , el contenido es enmascarado por
10s delimitadores de comentarios d e HTML, <!-- y -->. Los navegadores que soportan
JavaScript, por su parte, reconocen e interpretan automiiticamente las instrucciones de ese
lenguaje delimitadas por las etiquetas d e comentarios. A1 emplear este esqueleto para las
etiquetas <script>, puede estar seguro d e que todos 10s navegadores manejariin su docu-
mento con garbo, si acaso no completamente.
Puede incluir mas d e una etiqueta <script> en un documento, coloc~ndolasen <head> o
e n <body>. El navegador compatible con JavaScript ejecuta las instrucciones conforme se
presentan. Las variables y funciones definidas dentro d e una etiqueta <script> pueden ser
referenciadas por instrucciones d e JavaScript en otras etiquetas <scri pt>. De hecho, un
estilo d e programaci6n comdn e n JavaScript es emplear una sola etiqueta <script> en el
encabezado <head> del documento para definir funciones comunes y variables globales en
el documento, y luego llamarlas haciCndoles referencia e n otras instrucciones d e JavaScript
diseminadas a lo largo del documento.

13.3.1.1 AMbuto language

Utilice el atributo language en la etiqueta <script> para declarar el lenguaje del gui6n
empleado para componer el contenido d e la etiqueta. Si usa JavaScript (por mucho, el
lenguaje d e guiones mPs comdn e n el Web), establezca el valor de este atributo en JavaScri p t .
Ocasionalmente puede ver el valor d e 1 anguage e n VBScri pt, indicando que el texto ence-
rrado est5 escrito en Visual Basic d e Microsoft.
Con JavaScript, usted tambiCn puede utilizar el valor "JavaScript 1.1" para indicar que el
gui6n sera procesado solamente por Navigator 3.0 o posterior. Navigator 2.0, que soporta
JavaScript 1.0, no procesa guiones identificados como "JavaScript 1.1".

13.3 1.2 Atributo src

Para programas hechos con JavaScript particularmente grandes, tal vez desee almacenar el
cddigo e n un archivo independiente. En tal caso, haga que el navegador cargue ese archivo
mediante el atributo src. El valor del atributo src es el URL del archivo que contiene el
programa de JavaScript. El archivo almacenado debe tener un tip0 de MIME d e appl i cation/
x-javascript; pero tambiCn es apropiadamente manejado d e manera automatics por el
servidor si el sufijo d e su nombre es js.
Por ejemplo,
<script 1 anguage=JavaScript src="http://www. kumquat .com/guion. js">
</script>
comunica a1 navegador que soporta la etiqueta <script> que cargue un prograrna de JavaScript
llamado guionjs desde el servidor. Aun cuando no hay contenido en <scri pt>, es indispen-
sable la etiqueta de terminaci6n </scri pt>.
414 Capftulo 13. Contenido ejecutable

13.3.2 Etiqueta <noscript>

Para que pueda decir a 10s usuarios de navegadores que no soportan la etiqueta < s c r i p t >
que est5n perdikndose de algo, Navigator de Netscape soporta la etiqueta <noscr ipt>.

<noscript>
Funcidn:
Proporciona contenido alternativo para navegadores que no soportan
la etiqueta c s c r i p t s
Atributos:
Ninguno
Etiqueta de fin:
</noscri pt>; nunca se omite
Contiene:
Contenido de cuerpo
Usada en:
Texto

Desgraciadamente, s61o Navigator 3.0 y versiones posteriores ignoran el contenido de la

etiqueta <noscri pt>. Asi que incluso navegadores compatibles con la etiqueta < s c r i p t > ,
como Internet Explorer y Navigator 2.0, muestran el contenido de la etiqueta <noscri pt>,
para confusi6n de 10s usuarios.
Asi, e n realidad la etiqueta < n o s c r i p t > tiene utilidad limitada debido a1 inconsistente
soporte d e 10s navegadores. Existen otras maneras para detectar y manejar navegadores
que presentan problemas para < s c r i p t > , detalladas en cualquier buen libro sobre
JavaScript.

13.3.3 Manejadores de evento deJavaScript

Una de las caracteristicas m5s importantes que tiene JavaScript es la capacidad de detectar y
reaccionar a 10s eventos que ocurren mientras se carga, presenta y utiliza un documento.
Puede colocar el c6digo de JavaScript que maneja estos eventos dentro de la etiqueta
< s c r i p t > , per0 m4s comtinmente se asocia con una etiqueta especifica mediante uno o m5s
atributos de etiqueta especiales.
Por ejemplo, quiz5 desee invocar una funci6n de JavaScript cuando el usuario pase el rat6n
sobre una liga. Los navegadores que soportan JavaScript manejan un atributo manejador de
evento "rat6n sobre" especial para la etiqueta <a>, denominado onMouse0ver.
Cuando el rat6n pasa sobre la liga d e este ejemplo, el navegador ejecuta las instrucciones de
JavaScript (observe que las dos instrucciones d e JavaScript estln encerradas entre comillas y
separadas por un signo d e punto y coma, y que 10s ap6strofos rodean la parte del mensaje
d e texto de la primera instrucci6n).
Aunque explicar completamente este c6digo estl m l s all5 d e nuestro objetivo, el resultado
net0 es que el navegador coloca el mensaje "Oprimase" en su barra de estado. Por lo
comtin, quienes escriben piginas de HTML utilizan esta simple funci6n d e JavaScript para
mostrar una explicaci6n mls descriptiva de una liga, en lugar del a menudo misterioso URL
que el navegador muestra tradicionalmente e n la ventana de estado.
El valor de cualquiera de 10s atributos de manejador de evento de JavaScript es una cadena
entre comillas que contiene una o mis instrucciones de ese lenguaje, separadas por puntos y
comas. Si es necesario, las declaraciones extremadamente largas pueden dividirse en varias
lineas. TambiCn debe tener precauci6n a1 usar entidades para las comillas dobles incrustadas
en las instrucciones para evitar un error de sintaxis cuando se procese el valor del atributo.
Listamos 10s diversos manejadores de evento d e JavaScript y sus etiquetas asociadas e n la
tabla 13-1, junto con el apartado en este libro que las describe con mAs detalle.

Tabla 3-1 Manejadores de evento de JauaScrfpty etiquetas de H7ML que 10s soportan
Manejadores de evento Etiquetas de HTML

5.2.6.14
12.3.1.3
12.3.1.3
10.2.9
10.4.1.3
10.3.3
10.2.9
10.4.1.3
10.3.3
7.3.1.4
10.2.9
10.4.1.3
5.2.6.14
12.3.1.3
12.3.1.3
10.2.9
10.4.1.3
10.3.3
12.3.1.3
12.3.1.3
5.2.6.14
7.3.1.4
7.5.4.6
(continua)
416 CapUulo 13: Contenido ejecutable

Tabla 3-1 Manejadores de m t o deJavaScript y etiquetas de H l M L que 10s sopomn (Continuacidn)

onReset
onSel ect

onsubmi t
onUnl oad

Puede remplazar cualquier referencia convencional a un URL e n un documento con una o

mls instrucciones de JavaScript. El navegador ejecuta entonces el c6digo de JavaScript e n
vet de bajar otro documento, dondequiera que el navegador haga referencia a1 URL. El
resultado d e la 6ltima instrucci6n se toma como si fuera el "documento" referenciado por el
URL y, e n consecuencia, el navegador lo despliega. El resultado de la 6ltima instrucci6n no
es el URL de un documento; es el contenido real que mostrarl el navegador.
Para crear un URL de JavaScript, utilice javascri pt como el protocolo de URL:
<a href="javascript:generate-document()">
En el ejemplo, la funci6n generate-document( ) se ejecuta dondequiera que la liga sea
seleccionada por el usuario. El valor devuelto por la funcibn, presumiblemente un docu-
mento vllido de HTML, lo interpreta y despliega el navegador.
Puede ser que la instrucci6n ejecutada no devuelva un valor. En tal caso, el documento
actual permanece sin cambios. Por ejemplo, este URL de JavaScript:

hace aparecer un cuadro de alerta, nada mls. El documento que contiene la liga permane-
cerl visible despuCs de que aparezca el cuadro d e oferta y el usuario lo cierre.

133.5 Entidades deJavaScript

Las entidades de cadcter en HTML se componen de un signo de ampersand (&), un nombre o
n6mero de entidad y un signo de punto y coma. Sirven para insertar caracteres reservados
o especiales dentro de documentos.
De mod0 similar, las entidades de JavaScript se componen de un ampersand (&), una o m l s
instrucciones de JavaScript encerradas entre llaves y un signo de punto y coma para cerrar.
Por ejemplo:
&{document. fgCol or) ;
Si hay m4s de una instrucci611, deben separarse con signos de punto y coma dentro de las
llaves. El valor de la dltima (o tinica) instrucci6n se convierte en una cadena y sustituye a la
entidad en el documento.
.
Normalmente, las entidades de HTML pueden aparecer en cualquier lugar en un documen-
to. Las de JavaScript esdn restringidas a sgr valores de atributos de etiqueta. Esto le permite
escribir "etiquetas diniimicas" cuyos atributos son desconocidos hasta que el documento se
carga y se ejecuta el gui6n de JavaScript. Por ejemplo,
<body text=&{col or-favori to() ) ;>
pone el color del texto del documento al valor de color dewelto por la funci6n color-favorite ( ) .

13.3.6 Etiqueta <server>

La etiqueta <server> es un animal extraiio. La procesa el servidor web y nunca la ve el
navegador. Asi, lo que usted puede hacer con esta etiqueta depende del servidor que este
utilizando, no del navegador del lector. El servidor de Netscape utiliza la etiqueta <server>
para permitirle poner instrucciones de JavaScript en un documento de HTML, las cuales
procesad el servidor. El resultado de ejecutar estas instrucciones se inserta dentro del docu-
mento, remplazando la etiqueta <server>. Una explicaci6n completa de este asi llamado
JavaScript "del lado servidor" est4 m4s a114 del objetivo de este libro; incluimos esta breve
referencia s610 para documentar la etiqueta <server>.

<seruer>
Funcion:
Define instrucciones de JavaScript del lado servidor
Atributos:
Ninguno
Etiqueta de fin:
</server>; nunca se omite
Contiene:
JavaScript
Usada en:
Contenido de encabezado

Como la etiqueta escri pt>, la etiqueta <server> contiene c6digo de JavaScript. Sin embar-
go, esta dltima y el c6digo deben aparecer dentro del encabezado (<head>) del documento,
no en otra parte. Se extrae del documento y la ejecuta el servidor cuando el documento es
solicitado para ser descargado.
418 CapiZulo 13. Contenido ejecutable

Desde luego, el JavaScript del lado servidor esti estrechamente acoplado a su servidor. Para
explotar por completo esta etiqueta y las ventajas del JavaScript del lado servidor u otros
lenguajes de programaci6n del lado servidor, consulte la documentaci6n de su servidor para
obtener detalles completos.

Gran parte del trabajo de un navegador es manipular el desplegado, y mucho de este c6digo
d e desplegado ya ha sido expuesto para JavaScript. Asi, pareciera s61o natural, quizis inch-
s o relativamente ficil, para 10s desarrolladores de Netscape implementar hojas d e estilo de
JavaScript. Basada en el modelo d e hojas de estilo en cascada (CSS; consulte el capitulo 9)
recomendado por el consorcio W3C, esta tecnologia alternativa d e estilo d e documentos le
permite prescribir propiedades d e despliegue para todos 10s elementos d e HTML, tanto
integradas como atributos d e etiqueta, a nivel del documento o para toda la colecci6n de
documentos.
Las hojas d e estilo d e JavaScript OSS, JavaScript Style Sheets) son invenci6n de Netscape. De
hecho, durante un breve period0 e n el verano d e 1996, Netscape parecia listo para abstener-
se de la metodologia CSS, que Internet Explorer ya habia implementado, y utilizaba JSS
exclusivamente para diseiiadores de documentos HTML con su nuevo navegador, Navigator
4.0. Por fortuna, las nuevas versiones soportan ahora tanto la tecnologia JSS como la CSS.
Nosotros proponemos con insistencia estindares razonables. El modelo CSS es bueno, y esti
bien que Netscape haya decidido darle soporte. Si Internet Explorer alglin dia soporta a JSS,
alin no se sabe, pero es claro que Microsoft intenta seguir dando soporte a1 estindar CSS y
el prometido e s t h d a r d e HTML 4.0 (no han tenido buenos resultados para dar soporte a
estindares web e n el pasado).
Pero 10s esthdares no son toda la historia. No podemos imaginar que el autor de piginas de
HTML, dejando aparte a1 diseiiador, vaya a atenerse a la rigida sintaxis de programaci6n
d e JavaScript, comenzando con la importancia de las letras maylisculas e n 10s nombres de
propiedades. Muy diferente a HTML. No obstante, existen algunas ventajas e n JSS que
algunos autores hallarin litiles, aun cuando restrinja todo su potencial para el usuario selec-
to d e Netscape 4.
Creemos que las hojas de estilo son una importante innovaci6n para HTML, y JSS es una
manera muy poderosa de proporcionarlas. Sin embargo, recomendamos utilizar CSS por
razones de consistencia y facilidad (a menos que usted necesite d e manera especifica algu-
na caracteristica d e JSS).
Estudiamos con detalle 10s conceptos e ideas detr5s de las hojas d e estilo d e HTML
(especificamente, las hojas de estilo e n cascada) e n el capitulo 9, de manera que no lo
repetiremos aqui. Mejor explicaremos solamente c6mo crear y manipular estilos con JavaScript.
Antes de proseguir, le recomendamos que primero absorba la informaci6n del capitulo 9.
1 3 4 Hojas de estilb de JavaSctipt 419

13.4.1 Sintaxis de hojas de estilo deJauaScript

Netscape 4 implementa JSS extendiendo varias etiquetas de HTML y definiendo algunos
objetos nuevos que almacenan 10s estilos de sus documentos.

13.4.1.1 JSS externa, a nivel del documento e integradu

Como con CSS, usted puede hacer referencia y cargar archivos de JSS externos mediante la
etiqueta < l i nk>. Por ejemplo:

La dnica diferencia real entre esta referencia y una para hoja de estilo externa d e CSS es que
el atributo de tip0 (type) de la etiqueta <1 ink> est5 establecido e n text/JavaScri p t , no en
text/CSS. El archivo a1 que se hace referencia, estilosjs, contiene instrucciones de JavaScript
que definen estilos y clases que Navigator emplea para controlar el despliegue del docu-
mento actual.
Usted define JSS a1 nivel de documento dentro de una etiqueta <sty1 e> e n el encabezado
(<head>) del documento, igual que para CSS. De nuevo, s610 existe una diferencia real e n
que usted establezca el atributo type de la etiqueta <sty1 e> e n text/JavaScri p t e n lugar
de text/CSS.
Sin embargo, el contenido de la etiqueta <sty1 e> para JSS es muy distinto del correspon-
diente para CSS. Por ejemplo:

En primer lugar, observe que utilizamos 10s comentarios e s t h d a r de JavaScript y HTML para
encerrar nuestras definiciones de JSS, evitando que 10s navegadores no compatibles las
procesen como contenido d e HTML. TambiCn note que la sintaxis de la definici6n de estilo
es la de JavaScript, donde el uso de maylisculas y mindsculas siimplica una diferencia, entre
otras cosas.
Usted asocia reglas integradas d e estilo basado e n JavaScript con una etiqueta especifica
utilizando el atributo sty1 e, del mismo modo que 10s estilos integrados de CSS. El valor del
atributo e s una lista de asignaciones d e JSS, separadas por puntos y comas. Por ejemplo,
c p style="color = 'green' ; fontweight = 'bold1">

crea un piirrafo de texto verde en negritas. Advierta en primer lugar que debe encerrar 10s
valores de estilo integrados entre ap6strofos, no entre comillas, como e n 10s estilos de JSS a
nivel del documento y externos. Esto es razonable, puesto que el valor mismo de atributo de
estilo debe estar encerrado entre comillas.
Tambien observe que las definiciones de estilo integrado d e JSS utilizan solamente el nombre de
propiedad, no el objeto contenedor d e etiqueta que posee la propiedad, lo cual tiene sentido,
puesto que 10s estilos integrados de JSS s610 afectan la etiqueta en uso, no todas sus ocurrencias.

13.4.1.2 VaCores deJSS

En general, puede usar todos 10s valores d e CSS en definiciones d e JSS. Para valores de
porcentaje, longitud y palabra clave, simplemente encierre el valor entre comillas y utilicelo
como lo haria con cualquier valor d e cadena en JavaScript. Asi, el valor d e CSS bold se
convertiria e n "bold" o 'bold' para 10s estilos d e JSS a nivel del documento o integrados,
respectivamente; 12pt en CSS se convertiria e n ' 12pt ' o " 12pt" e n JSS.
Espedique los valores de color como el nombre del color o un valor hexadecimal, encerrados entre
cormllas simples (ap6strofos) o dobles. La notaci6n RGB decimal de CSS no es soportada en JSS.
Los valores de URL d e JSS son cadenas que contienen el URL deseado. De este modo, el valor
d e URL de CSS, url (http://www. kumquat. com), se convierte en ' http://www. kumquat. com'
.
para un estilo integrado d e JSS; o "http: //www kumquat. com" a1 nivel del documento.
Una caracteristica poderosa y linica d e JSS es que el navegador puede calcular cualquier
valor d e rnanera dingmica cuando procesa el documento. En lugar d e especificar est5ticamente
el tamaiio d e la fuente, por ejemplo, usted puede calcularlo a1 vuelo:
tags .P.fontSize = tamano-favori to();
Suponemos que la funci6n d e JavaScript tamano-favori to() d e al@n mod0 determina el
tamaiio d e fuente deseado y devuelve un valor d e cadena conteniendolo. Esto, a su vez, se
asigna a la propiedad fontsize d e la etiqueta <p>, definiendo el tamaiio de la fuente para
todos 10s phrafos en el documento.

13.4.1.3 Defirnkidn de estihspara etiquetas

JavaScript define una nueva propiedad del documento, tags, que contiene las propiedades
d e estilo para todas las etiquetas d e HTML. A fin d e definir un estilo para una etiqueta,
simplemente establezca la propiedad adecuada de la propiedad d e estilo deseada dentro d e
la propiedad tag del objeto document. Por ejemplo:
document.tags.P.fontSize = ' 12pt' ;
document.tags.H2.color = 'blue';
Estas dos definiciones d e JSS establecen el tamaiio d e la fuente para la etiqueta <p> a doce
puntos y presentan todas las etiquetas <h2> en azul. Las definiciones d e CSS equivalentes son:
P (font-size : 12 pt)
HZ (color : blue)
Puesto que la propiedad tags siempre s e refiere a1 documento actual, usted puede omitir
document d e cualquier definici6n d e estilo d e etiqueta d e JSS. Podriamos haber escrito 10s
dos anteriores estilos como:
13.4 Hojas de estilo de Java.Script 421

tags.P.fontSize = '12pt' ;
tags.HZ.color = 'blue';
Adem%s,corno mencionamos con anterioridad, puede omitir el nombre de la etiqueta, asi
corno las propiedades document y t a g s para JSS integrado utilizando el atributo de estilo.

El uso d e maflsculas y min6sculas es importante e n JSS. Los nornbres de etiqueta dentro de

la propiedad t a g s siempre deben ir, todos, en maytlsculas. Las maytlsculas integradas den-
tro de las propiedades d e etiqueta son importantes: cualquier desviaci6n del deletreo exacto
producid un error y Navigator no aceptara la declaraci6n de JSS. Todas las siguientes
definiciones de JSS son invAlidas, aunque la raz6n no sea dernasiado aparente:
tags.p.fontsize = ' 12pt1;
tags.Body .Color = 'blue';
tags.P.COLOR = 'red';
Las versiones correctas son:
tags. P. fontSi ze = ' 12pt1;
tags .BODY. col or = ' bl ue' ;
tags.P.color = 'red';
Puede ser muy tedioso especificar rnuchas propiedades para una sola etiqueta, asi que puede
aprovechar la instrucci6n w i t h de JavaScript para reducir su trabajo de tecleo. Estos estilos:
tags.P.fontSize = '14pt1;
tags.P.color = 'blue';
tags.P.fontWeight = 'bold';
tags.P.leftMargin = '20%';
pueden escribirse m%sfkilrnente corno:
with (tags.P) {
fontSi ze = '14pt1;
color = 'blue';
fontweight = 'bold';
leftMargin = '20%' ;
I
Usted puede aplicar estilos a diversas etiquetas asi de fAcil:
with (tags.P, tags.LI, tags.Hl) {
fontsize = '14pt';
color = 'blue';
fontweight = 'bold';
leftMargin = '20%';
I
13.4.1.4 Definici6n de clases de esNb

Como CSS, JSS le permite estilos de destino para especificar las maneras en que una etiqueta
puede usarse e n el documento. JSS utiliza la propiedad c l a s s e s para definir estilos inde-
pendientes para la rnisrna etiqueta. No hay propiedades predefinidas dentro d e la propiedad
classes; e n vez d e ello, cualquier propiedad a la que haga referencia s e define como una
clase que utilizad el documento actual. Por ejemplo:
classes.negras.P.fontWeight = 'bold' ;
with (cl asses.abstracta.P) (
1 eftMargi n = '20pt' ;
rightMargin = '20pt';
fontstyle = 'italic';
textAlign = 'justify';
1
El primer estilo define una clase d e la etiqueta <p> llamada negras cuyo aspect0 s e esta-
blece a negritas. El estilo siguiente utiliza la declaraci6n w i t h para crear una clase d e la
etiqueta <p> llarnada a b s t r a c t a con las propiedades especificadas. Las reglas d e CSS
equivalentes serian:
P.negras {font-weight : bold)
P.abstracta {left-margin : 2 0 pt;
rigth-margin : 2 0 pt;
font-style : italic;
text-align : justify;
1
Una vez definida, utilice una clase d e JSS a1 igual que cualquier clase d e CSS: con el atributo
c l a s s y el nombre d e la clase.

Como CSS, JSS tambien le permite definir una clase sin definir la etiqueta que utilizad. Esto
le permite definir clases genericas que puede aplicar posteriormente a cualquier etiqueta.
Para crear una clase d e estilo generica e n JSS, utilice la propiedad d e etiqueta especial a1 1 :
classes .verde.all .color = "green"
Puede entonces agregar c l a s s = "green" a cualquier etiqueta para hacer que Netscape
presente su contenido e n verde. El equivalente CSS es:
.verde {color : green)

13.4.1.1 Uso de estibs contextuales

Uno d e 10s miis poderosos aspectos d e CSS es su capacidad d e estilo contextual, donde el
navegador aplica un estilo a las etiquetas linicamente si aparecen en el documento e n una
cierta anidaci6n. JSS tambien soporta estilos contextuales mediante el metodo especial
c o n t e x t u a l ( ) dentro d e la propiedad tags. Los parlmetros d e este metodo son las etique-
tas y clases que definen el contexto en el que Navigator aplicad el estilo. Por ejemplo,
tags.contextua1 (tags.UL, tags.UL, tags.LI) . 1istStyleType = 'disc' ;

define un contexto donde 10s elementos (tags. LI) d e una lista sin ordenar anidada si
dentro d e otra lista sin ordenar (tags.UL, tags.UL) utiliza el disco como su viiieta. El
equivalente e n CSS es:
UL UL LI {list-style-type : disc)
13.4 Hojas de estNo de Javdcript 423

Usted puede mezclar etiquetas y clases en el metodo contextual ( ) . Por ejemplo:

tags .contextual (c1asses.abstracta.P. tags.EM) .color = 'red';
dice a1 navegador que muestre en rojo las etiquetas <ern> que aparezcan dentro de p h a f o s
que son de la clase a b s t r a c t a . El equivalente en CSS es:
P.abstracta EM {color: red)
Puesto que el objeto t a g s e s d incluido sin ambiguedades dentro del metodo contextual ( ),
puede omitirlo de la definici6n. De aqui, nuestro ejemplo de lista anidada puede reescribirse
como:
tags.contextua1 (UL, UL, LI) .listStyleType = 'disc' ;

13.4.2 Pmpiedades de las bojas de estilo de JavaScript

Un subconjunto de las propiedades de estilo de CSS e s t h soportadas en JSS. Las propieda-
des de estilo d e JSS, sus equivalentes en CSS y 10s apartados que las documentan completa-
mente aparecen en la tabla 13-2.

Tabla 13-2.Propiedades de las hojas de estilo de/avaSc?tpt USS)y sus equivalentes en las hojas
de estilo en cascada (CSS)
Propiedad & JSS Propiedad de CSS
a1 ign float
backgroundImage background-image
backgroundcol or background-col or
borderBottomWidth border-bottom-width
borderLeftWidth border-1 eft-width
borderRightWi dth border-right-wi dth
bordersty1 e border-sty1 e
borderTopWi dth border-top-width
clear clear
display display
fontSi ze font-size
fontsty1 e font-sty1 e
height height
1 ineHeight 1 ine-height
1 i stStyl eType 1 ist-sty1 e-type
marginBottom margin-bottom
marginLeft margin-left
margi nRight margin-right
marginTop margin-top
paddinggottom padding-bottom
424 Capitdo 13: Contenfdoejecutable

Tabla U-2.Propiedudes de laci hojas de estilo deJauaScript USS)y sus equivalentes en [as hojm
de estilo en cascada (CSS) (Continuaci6n)
Propiedad & JSS Propiedad & CSS

paddingLeft paddi n g - l e f t
paddi ngRight padding-right
paddi ngTop paddi ng-top
textDecoration text-decoration
textTransform text-transform
textAl ign t e x t - a 1 ign
textIndent text-indent
v e r t i c a l A1 i g n v e r t i c a l - a 1 ign
whi teSpace white-space
width width

JSS tambikn define tres mktodos que le permiten definir margenes, relleno y ancho d e bordes
dentro d e una propiedad d e estilo simple. Los tres mktodos, margins ( ), paddi ngs ( ) y
borderwidths ( ), respectivamente, aceptan cuatro padmetros, correspondientes a 10s mlr-
genes, relleno o ancho superior, derecho, inferior e izquierdo, respectivamente. A diferencia
d e sus contrapartes e n CSS (margin, 9.3.6.10, padding, 9.3.6.11 y border-width, 9.3.6.4),
estos mktodos d e JSS requieren que usted siempre especifique 10s cuatro padmetros. No hay
rnanera de abreviar e n JSS para establecer mdltiples margenes, rellenos o anchos d e borde con
un solo valor.
 En este cap€tulo:
-
Resumen de documentos
dindmicos

por el c W e
Documetatos enviados
por el sentidor

Documentos
dinamicos

El modelo d e documento estindar d e HTML es estatico. Una vez mostrado e n el navegador,

el documento n o cambia a menos que el usuario inicie alguna actividad, como seleccionar
una liga con el rat6n. Los desarrolladores en Netscape Communications encontraron esta
limitaci6n inaceptable y construyeron algunas caracteristicas especiales para su navegador,
Navigator, que permiten cambiar el contenido del documento de HTML en forma diniimica.
De hecho, proporcionan dos mecanismos para documentos diniimicos, que describimos e n
detalle e n este capitulo. Internet Explorer de Microsoft soporta algunos de estos mecanis-
mos, que tambiCn abordaremos.
Debemos decir que mucha gente Cree que pronto 10s documentos dinamicos s e d n obsoletos,
pues 10s desplazarin 10s accesorios conectores para el navegador, en particular, 10s applets.
No obstante, Navigator e Internet Explorer a6n soportan documentos dinpmicos, y nosotros
pensamos que su tecnologia tiene virtudes que debe conocer, por no decir aprovechar, en
sus documentos de HTML. [applets, 13.11

14.1 Resumen de documentos dindmicos

Si recuerda nuestro analisis del capitulo 1, el navegador cliente inicia el flujo de datos en el
Web cuando se comunica con un servidor para solicitarle un documento. El servidor acepta
la petici6n y transfiere el documento. Luego el cliente muestra el contenido del documento
a1 usuario. Para documentos web normales, una transacci6n simple iniciada desde el lado
cliente es todo lo que se necesita para recolectar y desplegar el documento. Sin embargo,
una vez mostrado, ya n o cambia.
426 Capftub 14: Documatos dindmfcos

Los documentos dinimicos, por su parte, son resultado de mdltiples transacciones iniciadas
tanto del lado servidor como del lado cliente. Un documento extraidopor el cliente (client-
pull) es el que inicia mdltiples transacciones desde el lado cliente. Cuando el servidor es el
que las inicia, el documento dinimico se conoce como documento enviadopor el setvidor
(server-push).
En un documento extraido por el cliente, c6digos de HTML especiales le dicen a1 cliente que
solicite y baje peri6dicamente otro documento de uno o rnis servidores en la red, actuali-
zando de manera dinimica la pantalla.
Los documentos enviados por el servidor tambiCn mejoran la forma en que 10s servidores se
comunican con 10s clientes. Comdnmente, en el Web el cliente permanece conectado con
un servidor sblo durante el tiempo que le tome obtener un documento.' Con 10s documen-
tos enviados por el servidor, la conexi6n permanece abierta y este dltimo permanece en-
viando datos periddicamente a1 cliente, aumentando o remplazando el contenido anterior.
Navigator de Netscape es actualmente el dnico navegador capaz de manejar documentos
dinimicos de HTML enviados por el servidor de mod0 correcto; tanto Internet Explorer como
Navigator soportan documentos extraidos por el cliente. Con otros navegadores, usted podria
ver dnicamente parte del documento dinimico, cuando mucho. En el peor de 10s casos, el
navegador rechazari por completo el documento. Por desgracia, debido a que 10s documen-
tos d i ~ m i c o sson procesos cliente-servidor, no funcionan sin un servidor de H'ITF), lo cual
significa que usted no puede desarrollar y probar documentos de HTML dinimicos almacena-
dos como archivos locales, a menos que tenga un servidor ejecutandose localmente.

14.1.1 Otra l h m a d a d e atencidn

Como siempre, nosotros le decimos exactamente c6mo utilizar estas caracteristicas excitantes
pero no estindares, y le prevenimos para que no las utilice a menos que tenga una raz6n
importante o apremiante para hacerlo. Somos particularmente estridentes con la adverten-
cia sobre 10s documentos dinimicos, no s610 porque no son parte del estandar de HTML
sino porque pueden bloquear la red. Necesitan tiempos de descarga rnis amplios que sus
contrapartes estiticas. Y requieren mucho rnis (en el caso de 10s extraidos por el cliente) o
mas largo plazo de (para 10s enviados por el servidor) conexiones cliente-servidor. Las
conexiones mliltiples en un servidor sencillo estin limitadas a s61o algunos de 10s vastos
millones de usuarios del Web a la vez. Odiariamos ver que sus lectores lo dejan porque
usted cre6 una imagen temblorosa en un documento HTML dinimico que de otro mod0
habria sido un documento estitico, efectiva y ficilmente accesible, que rnis personas
podrian disfrutar.

Una conexi6n por documento es verdadera incluso para imlgenes en linea que 10s navegadores pueden descar-
gar o bajar automlticamente del servidor. Si usted no nos Cree, s61o observe la barn de estado en la pane inferior
de su navegador mientras que descarga un documento HTML con varias imigenes. Usted deberia ver muchos
mensajes del tip0 "Contactingthe server" y "Reading the file ..." u otros similares.
14.2 Documentos extrafdos pot- el cliente (CUent-Pull) 427

14.2 Documentos extraidos por el cliente

(Client-Pull)
Las documentos extraidos por el cliente son relativamente ficiles de preparar. Todo lo que debe
hacer es poner una etiqueta <meta> en el encabezado del documento de HTML. Esta etique-
ta especial le dice a Navigator, el cliente, que despliegue el documento actual durante un lapso
especifico y luego cargue y muestre otro enteramente nuevo como si el usuario lo hubiera
seleccionado desde una liga (note que en la actualidad no hay modo de cambiar de forrna
dinarnica s610 una parte d e un documento de HTML extraido por el cliente). [meta,, 7.8.11

Los documentos dinamicos extraidos por el cliente trabajan con Navigator e Internet Explorer
porque estos navegadores responden a un campo de encabezado d e H'ITP especial, den@
minado "Refresh".
Quiz5 recuerde que e n capitulos anteriores dijimos que cuando un servidor d e H'ITP envia
un documento a1 navegador, antecede 10s datos con uno o mas campos d e encabezado. Un
campo d e encabezado, por ejemplo, contiene una descripci6n del tip0 d e contenido del
documento, lo cual usa el navegador para decidir c6mo mostrarlo. Por ejemplo, el servidor
antecede 10s documentos de HTML con el encabezado "Content-type: text/htmlV("Tipo de
contenido: texto/htmlW),cuyo significado debe ser bastante obvio a estas alturas.
Como explicamos con detalle e n el capitulo 7, usted puede agregar sus propios campos
especiales a un encabezado d e HTTP d e cualquier documento d e HTML insertando una
etiqueta <rneta> en su encabezado (<head>). [-eta>, 7.8.11
El campo Refresh d e H'ITP implementa documentos d e HTML dinamicos extraidos por el
cliente, habilitado por el formato de etiqueta <rneta>:

El atributo http-equiv d e la etiqueta le comunica a1 servidor d e HTTP que incluya el

campo Refresh, con un valor especificado por el atributo content (si existe, cuidadosamen-
te encerrado entre comillas), e n la cadena de encabezados que envia a1 navegador (cliente)
justo antes de enviar el resto del contenido del documento. El navegador reconoce el
encabezado Refresh como marca d e un documento d e HTML dinamico y responde en
consecuencia, como veremos mas adelante.

14.2.2 Contenido del encabezado Refresh

El valor del atributo content d e la etiqueta <rneta> especial de refresco (Refresh) determina
cuando y c6mo el navegador actualiza el documento actual. A1 establecerlo como un entero,
el navegador tardara ese ndmero d e segundos antes de cargar autom5ticamente otro docu-
mento. Puede establecer el valor e n cero, lo que significa no tener tardanza alguna. En ese
caso, el navegador carga el siguiente docurnento inmediatarnente despuCs d e que desplie-
gue el actual, con lo que se pueden conseguir algunos efectos d e animaci6n rnuy burdos.
[content,7.8.1.21

14.2.2.1 Cdmo refrescar el mismo documento

Si el valor del carnpo Refresh es s61o el ntirnero de segundos, el navegador vuelve a cargar
el mismo documento una y otra vez, tardando el tiempo especificado entre cada ciclo, hasta
que el usuario va a otro documento o cierra el navegador.
Por ejernplo, el navegador volverii a cargar el siguiente documento de HTML extraido por el
cliente cada 15 segundos:
<html>
<head>
m e t a http-equiv="Refresh" content="15">
<titl e>Precios en e l mercado de kumquats < / t i t l e >
</head>
<body>
<h3>Precios en e l mercado de kumquats</h3>
Los kumquats se venden a1 menudeo a $16.00 e l k i l o .
</body>
</html>

El rnago d e las finanzas que usted lleva dentro h a b d notado que con algunos trucos espe-
ciales d e software del lado del servidor, puede actualizar el precio de 10s kumquats en el
documento d e HTML de modo que actlie corno una miiquina de teletipo: ah, la comodidad
de tener la cotizaci6n miis reciente del kumquat actualizada cada 15 segundos.

14.2.2.2 Cdmo refrescar con un documento diferente

En vez d e volver a cargar el misrno docurnento repetidas veces, puede decir a1 navegador
que cargue d e manera diniirnica un docurnento diferente agregando el URL absoluto de
documento despuCs del tiempo d e retraso con un signo de punto y coma en el atributo
content d e la etiqueta aneta>. Por ejernplo,
m e t a http-eq~iv="Refresh~~
content="15; URL=http://www. kumquat .com/siguiente.html">

hana que el navegador obtuviera el documento siguientehtml del servidor zuww.kumquat.com

despues de haber desplegado el documento actual durante 15 segundos.
El URL debe ser absoluto, incluyendo el tip0 del servidor y la ruta de bdsqueda cornpleta;
10s URL relatives no funcionan.

14.2.2.3 Cdmo iterar documentos

Recuerde que el efedo d e la etiqueta aneta> de refresco s610 se aplica a 10s documentos en
10s que aparece. Por lo tanto, para item (hacer ciclos repetitivos) entre varios docurnentos
14.2 Doc-umentos extrafdos por el cliente (Client-Pull) 429

usted debe incluir una etiqueta <rneta> de refresco en cada uno d e ellos. El valor del atributo
content e n cada documento del ciclo debe contener un URL absoluto que apunte a1 siguiente
documento; el Gltimo documento debe apuntar de vuelta a1 primero para cerrar el ciclo.
Por ejemplo, las siguientes son etiquetas <meta> para 10s encabezados de cada documento
e n un ciclo de tres documentos d e HTML:
En el documento primero. html:

El documento segundo.htm1 contiene:

m e t a http-equiv="Refresh"
content="30; URL=http://www. kumquat .com/tercero.html">

Y el documento tercero.htm1 tiene en su encabezado (<head>), ademas d e o m s locas ideas:

Por si solo, el navegador se iterar5 d e manera infinita entre 10s tres documentos a intervalos
d e treinta segundos.
La iteraci6n por documentos es un atractivo esplkndido, pues atrapa la atenci6n d e 10s
paseantes hacia un quiosco en el Web, por ejemplo. Los usuarios pueden entonces navegar
a travCs d e la amplia colecci6n d e documentos del quiosco haciendo clic e n las ligas de
alguna de las paginas mls atractivas y en las subsecuentes.'
Para regresar a1 conjunto d e documentos que iteran, cada documento e n el resto d e la
coleccidn debe tener su propio campo de refresco que, e n el Gltimo documento, apunte d e
vuelta hacia el principio. Debe especificarse un periodo bastante largo d e retraso para las
p4ginas poco atractivas (de 120 a 300 o mas segundos) d e mod0 que el quiosco no se
restablezca autom5ticamente mientras un usuario lee un documento actual. Sin embargo, el
periodo de retraso debe ser lo suficientemente breve, d e tal forma que el quiosco s e resta-
blezca a1 mod0 primario en un lapso razonable despues que el usuario termine.

182.3 Extraccidn de contenido n o HTML

La caracteristica de Navigator y d e Internet Explorer d e extraer documentos no est5 restrin-
gida a documentos d e HTML, aunque es cierto que es m5s Mcil crear documentos dinamicos
con HTML. Con un poco d e programaci6n del lado servidor, puede agregar un campo d e
refresco a1 encabezado d e H'ITP a cualquier clase d e documento, desde archivos d e audio,
pasando por imageries, hasta cortos d e video.

Esto nos lleva a un buen punto: el usuario puede invalidar la accidn dinimica de refresco en cualquier momento;
por ejemplo, al hacer clic en una hiperliga antes de que expire el tiempo de la extraccidn por el cliente. El
navegador siempre ignora la accidn de refresco en lugar de la interacci6n del usuario.
Por ejemplo, Cree una alimentaci6n d e video e n tiempo real aiiadiendo un campo de enca-
bezado d e refresco en cada imagen de una secuencia grabada y digitalizada con una cimara.
Incluya un retraso d e 0 e n el URL que apunta a la siguiente imagen, d e modo que tan pronto
como el navegador muestre una imagen, obtenga la siguiente. Suponiendo que la red este
bien, el resultado es una televisi6n burda (en verdad burda).
Puesto que el navegador limpia la ventana antes d e presentar cada imagen, el parpadeo
resultante hace casi imposible presentar una secuencia coherente d e imigenes. Esta tecnica
es rnis efectiva cuando se presenta una serie d e imigenes diseiiada para ser una presenta-
ci6n d e diapositivas, donde el usuario espera cierta clase d e actividades entre cada una de
las imigenes.
Quizis un mejor uso d e la caracteristica d e extracci6n por el cliente es en documentos
multimedia de larga duraci6n para 10s cuales Navigator e Internet Explorer utilizan aplica-
ciones auxiliares especiales para visualizarlos. En una computadora multitarea, digamos una
que ejecute UNIX o Windows 95, el navegador descarga un documento, mientras una apli-
caci6n auxiliar reproduce otro. La extracci6n por el cliente junto con la multitarea mejoran
el desempeiio d e 10s documentos multimedia. En lugar de esperar a que se descargue un
solo documento extenso, como un archivo de audio o de pelicula antes d e reproducirlo,
dividalo e n segmentos rnis pequeiios, descargando cada uno d e manera automitica me-
diante el segmento anterior con el encabezado de refresco. El navegador reproduciri el
primer segmento mientras descarga el segundo, luego el tercero, despues el cuarto y asi
sucesivamente.

14.2.4 Combinacidn de Refresh con otms campos

de encabezado de HlTP
Usted puede hacer que sus documentos d e HTML dinimicos extraidos por el cliente hagan
ciertos trucos a1 combinar 10s efectos del campo Refresh con otros campos d e encabezado
de HTTP. Una combinaci6n e n particular es la rnis litil: Refresh con el campo Redirect.
El campo Redirect permite que el servidor indique a1 navegador que obtenga el documento
solicitado e n otra parte e n el valor URL que acompaiia a1 campo. El navegador cliente
redirige d e manera automitica su petici6n hacia el nuevo URL y obtiene el documento de la
nueva direccibn, generalmente sin notificar a1 usuario. Asi que transferimos documentos
redirigidos todo el tiempo y nunca nos percatamos.
La causa rnis comdn para efectuar la redirecci6n es que alguien mueva su colecci6n de
documentos d e HTML hacia un nuevo directorio o hacia un nuevo servidor. Como cortesia,
el webmaster programa el servidor anfitri6n original para que envie en el encabezado de
H'ITP el campo Redirect y el nuevo URL (sin un cuerpo de documento) a cualquier navegador
que solicite el documento e n la direcci6n original. De esa manera, la ubicaci6n nueva del
documento es transparente para 10s usuarios y no tenddn que volver a establecer sus
direcciones favoritas.
14.2 Documentos extrafdos por el cliente (Ctient-FuU) 431

Pero algunas veces usted quiere que el usuario vuelva a establecer sus direcciones favoritas
("bookmarks" o "marcadores") para la nueva direcci6n debido a que las antiguas no siempre
redirigir2n a 10s navegadores, quiz2 porque ya quedaron fuera de servicio. Un mod0 de
notificar a 10s usuarios la nueva ubicaci6n es hacer que el URL de redirecci6n apunte a
al@n otro documento de HTML distinto a la piigina principal de la nueva colecci6n, pero
que contenga un mensaje acerca de la nueva ubicaci6n. Una vez anotada, 10s usuarios
entonces hacen clic en una liga ("Adelante", por ejemplo) para ir a la nueva ubicaci6n de la
"p2gina principal" y establecer sus direcciones favoritas en consecuencia.
A1 combinar 10s campos Redirect y Refresh, usted puede hacer que la pantalla de notifica-
ci6n se mueva de manera autom2tica hacia la nueva piigina de inicio. Si el navegador recibe
un encabezado de H'ITP con ambos campos, aceptad 10s dos; inmediatamente obtiene el
URL redirigido y lo despliega, y establece el cron6metro de refresco y el URL sustituto, si se
especifica. Cuando el tiempo expira, el navegador obtiene el siguiente URL (su nueva
ubicaci6n de la piigina de inicio) de mod0 automiitico.

14.2.4.1 U n generador de URL aleatorio

Otra aplicaci6n para la combinaci6n de 10s campos de encabezado de HTTP Redirect y
Refresh es crear un generador aleatorio y perpetuo de URL. Necesita algunas habilidades de
programaci6n para crear una aplicaci6n del lado servidor que seleccione un URL aleatorio a
partir de una lista preparada y dC una salida a1 campo Redirect que haga referencia a ese
URL junto con un campo Refresh que vuelva a invocar la aplicaci6n que crea URL aleatorios
despuCs de alglin tiempo de espera.
Cuando Netscape o Internet Explorer reciben el encabezado completo, cargan y despliegan
de inmediato el documento seleccionado aleatoriamente especificado en el URL del campo
Redirect. DespuCs del retraso especificado en el campo Refresh, el navegador vuelve a
ejecutar el generador de URL aleatorio en el servidor (como se especific6 en el URL del
campo Refresh) y el ciclo comienza de nuevo. El resultado es un ciclo sin fin de URL
aleatorios que se exhiben a intervalos regulares.

14.2.5 Consideraciones de rendimiento

Los documentos extraidos por el cliente consumen recursos adicionales de la red, en espe-
cial cuando el retraso de refresco es pequeiio, puesto que cada acci6n de refresco significa
una conexi6n completamente nueva con el servidor. Un navegador puede requerir varios
segundos para hacer contact0 con el servidor y comenzar a obtener el documento. Como
resultado, las actualizaciones dpidas generalmente no son accesibles, sobre todo en co-
nexiones de red lentas.
Utilice documentos din5micos extraidos por el cliente para hacer actualizaciones de baja
frecuencia de documentos completos, o para hacer cambios entre documentos sin la inter-
venci6n del usuario.
432 Capitrrlo 14 Documentos dindmicos

14.3 Documentos enviados por el servidor

Los documentos dinlmicos enviados por el servidor (semrpush) se manejan desde el lado
servidor. La conexi6n cliente-servidor permanece abierta despuCs de la transferencia inicial de
datos, y el servidor envia periaicamente informaci6n nueva a1 cliente, el documento desple-
gado. El envio desde el servidor se hace posible mediante programaci6n especial, no con
etiquetas incrustadas especiales de HTML, en el lado servidor, y est5 habilitado por la funci6n
de tip0 multiparte de medios mixtos de MIME (Multipurpose Internet Mail Extensions), el
estlndar de la industria de la computaci6n para transmitir documentos multimedia por Internet.
Internet Explorer no soporta e n la actualidad documentos enviados por el servidor.

14.3 1 El tipo multiparte de medios mixtos

Como dijimos antes e n este capitulo durante la explicaci6n de 10s documentos din4micos
extraidos por el cliente, el servidor de HTTP envia una transmisi6n de dos partes a1 navegador-
cliente: un encabezado que describe el documento, seguido por el documento mismo. El
tip0 d e MIME del documento es parte del campo de encabezado d e HTTP. Comdnmente, el
-
servidor incluye Content type: t extlhtml e n un encabezado de documento d e HTML
antes d e enviar el contenido real. A1 cambiar ese tip0 de contenido por multipart/mixed-
media (multiparte/medios mixtos), puede enviar un documento o varios de HTML e n mdl-
tiples segmentos, e n lugar d e hacerlo e n uno solo. Sin embargo, s610 Navigator comprende
y responde a1 campo de encabezado multipart; 10s otros navegadores ignoran las partes
adicionales o rechazan enteramente el documento.
La forma general del encabezado de tip0 de contenido multiparte d e medios mixtos de
MIME tiene un aspect0 como el siguiente:

Este componente de encabezado de HTTP le dice a1 cliente Navigator que espere el docu-
mento que sigue e n varias partes y busque UnaCadenaAlAzar, que separa las partes. Esa
cadena d e limite debe ser dnica y no aparecer e n algtin lado e n ninguna de las partes
individuales. El contenido d e la transmisi6n servidor-cliente tiene la apariencia siguiente:
--UnaCadenaAl Azar
Content-type: text/pl ain
Datos para la primera parte
--UnaCadenaA1 Azar
Content-type: text/pl ain
Datos para la segunda parte

El ejemplo anterior tiene dos partes d e documento, ambas de texto llano. El servidor envia
cada parte precedida por nuestro delimitador, UnaCadenaAlAzar a la que anteceden dos
14.3 Documentos enviados por el servidor 433

guiones, y despues de ella el campo Content-type, y luego 10s datos de cada parte. La
dltima transmisi6n del servidor a1 cliente es una referencia simple a la cadena seguida por
dos guiones mas que indican que fue la dltima parte del documento.
A1 recibir cada parte, Navigator agrega de manera automatics 10s datos a la ventana del
documento desplegado.
Necesita escribir una aplicaci6n servidor de HTTP especial para habilitar este tip0 de docu-
mento dinamico enviado por el servidor; una que Cree el encabezado especial de HTTP
para MIME multipadmixed y envie 10s diversos documentos separados por la cadena de
delimitaci6n.

14.3.2 El tip0 multiparte sustitucidn de medios mixtos

Los creadores d e documentos dinamicos enviados por el servidor tambien pueden experi-
mentar con una variante del tip0 de MIME multipart mixed-replace-media conocida como
multzparte sustitucidn de medios mrjctos. La diferencia entre este tip0 especial de contenido
y su predecesor es que e n vez de simplemente agregar contenido a la pagina desplegada, la
versi6n "sustituta" hace que cada parte subsecuente remplace a la anterior.
El formato del encabezado de HTTP mixto-sustituto es muy similar a su conuaparte, multiparte
mixto; la dnica diferencia reside e n el Content-type:
mu1 ti part/x-mi xed-rep1 ace; boundary=UnaCadenaAl Azar

Las demas reglas relativas a1 formato del contenido multiparte son las mismas, incluyendo la
cadena delimitante que separa las partes y 10s campos de tip0 de contenido (Content-type)
para cada una de las partes.

14.3.3 Explotacidn de documentos de partes mu'ltiples

Es facil ver c6mo puede utilizar 10s dos tipos especiales de contenido de partes mdltiples
para crear documentos dinamicos enviados por el servidor. A1 retrasar el tiempo entre las
partes, puede crear un mensaje que se desplace automaticamente e n la ventana del navegador
de Netscape. 0 mediante la sustituci6n de partes del documento a traves del tip0 de MIME
x-mixed-replace, usted puede incluir una cartelera dinamica e n su documento, quizas inclu-
s o animaci6n.
Observe e n particular que 10s documentos de partes mliltiples enviados por el servidor no
necesitan aplicarse s610 a HTML o a otros documentos de texto llano. Tambien las imagenes
son un tipo de contenido codificado e n MIME, de mod0 que puede hacer que el servidor de
HTTP transmita varias imagenes e n serie como segmentos de una transmisi6n de partes
mdltiples. Puesto que usted tambien puede hacer que cada nueva imagen remplace a la
anterior, el resultado e s una animaci6n burda. Si lo hace correctamente sobre una red con
ancho de banda suficiente, el efecto puede ser muy satisfactorio.
14.33.1 Consideracfonesde eficfencfa
Los documentos enviados por el servidor mantienen una conexi6n abierta entre el cliente y
el servidor durante toda la actividad del documento dinsmico. Para algunos servidores, esto
puede consumir recursos adicionales d e la red; tambiCn necesitar que varios procesos per-
manezcan activos, dando servicio a la conexi6n abierta. Asegfirese que el proceso d e envio
del servidor (y, por consiguiente, la conexi6n cliente-servidor) termine a1 final o despues d e
cierto period0 d e inactividad. De otra forma, alguien podrl acampar inadvertidamente en
un documento enviado por el servidor que se recicle de manera infinita y estrangularii el
acceso d e otros usuarios a1 servidor.
Antes de elegir si implementa documentos enviados por el servidor o no, cerci6rese que su
servidor pueda soportar el procesamiento adicional y la carga d e retardos. Recuerde que
muchos documentos simult4neos enviados por el servidor pueden estar activos, multiplican-
d o el impact0 sobre el propio servidor y afectando de manera severa su desempefio global.

14.3.4 Creacidn de un documento enttiadopor el seruidor

Usted crea una aplicaci6n especial que se ejecuta con el servidor de HlTP para habilitar
documentos dhimicos enviados por el servidor. La aplicaa6n debe crear el c a m p de encabezado
de MIME Content -type especial que notifica a1 navegador de Netscape que el documento si-
guiente viene en varias partes (agregiindose o remplazando a una parte del documento actual). La
aplicaci6n tambien debe crear el delimitador adecuado y enviar el encabezado Content-type y
10s datos para cada parte, y q u i d tambien retrasar la transmisi6n durante cierto lapso. Necesita
consultar la documentaci6n de su servidor para aprender a crear una aplicaci6n del lado servidor
que pueda ser invocada para tener acceso a un URL especifico en el servidor. Con algunos
servidores esto puede ser tan simple como poner la aplicaci6n en cierto dlrectorio. Con otros,
usted puede tener que doblar sobre sus propios pasos y aullar hacia la luna ciertos dias.

14.3.4.1 Aplicactdn de ejemplo envfado por el serufdm para httpd

del NCSA y Apache
Los servidores htpd del NCSA y Apache corren en la mayoria de 10s sistemas UNIX. Los
administradores 10s configuran generalmente para ejecutar aplicaciones del lado servidor al-
macenadas e n un directorio llamado cgi-bin.
El que sigue es un gui6n simple del interprete de comandos (shell) d e UNIX que ilustra
c6mo enviar un documento en partes mfiltiples hacia el cliente de Netscape (Navigator)
mediante httpd del NCSA o Apache:'

' Es una idiosincrasia del httpd de NCSA que no se permitan espacios en el c a m p Content-type que antecede a
su documento en partes mliltiples. Algunos autores gustan colocar un espacio despues del signo de punto y coma
y antes de la palabra clave de frontera. No haga esto con el httpd de NCSA; escriba completo el Content-type
junto, sin espacios para lograr que el servidor reconozca el tip0 de contenido "multipartes"correcto.
 # Deje que e l u s u a r i o sepa que estamos enviando un documento m u l t i p a r t e s
# con l a cadena "NEXT" como l i m i t e
#
echo "HTTP/1.0 200"
echo "Content-type: mu1t i part/x-mi xed-rep1 ace; boundary=NEXTU
echo " I'
echo "--NEXTu
whi 1e t r u e
d0
#
X E n v i a l a s i g u i e n t e p a r t e , seguida de una cadena l l m i t e
# Se espera c i n c o segundos antes de r e p e t i r
#
echo "Content-type: t e x t / h t m l "
echo " "
echo "<html>"
echo "<head>"
echo #'<ti t l e>Processes On T h i s S e r v e r < / t i t l e>"
echo "</head>"
echo "<body>"
echo "<h3> Processes On T h i s Server</h3>"
echo "Date:"
date
echo "<p>"
echo I1<pre>"
ps -el
echo "</pre>"
echo "</body>"
echo "</html>"
echo "--NEXTu
sleep 5
done

En pocas palabras este gui6n de ejemplo actualiza una lista de 10s procesos que se ejecutan
en la miquina servidor cada cinco segundos. La actualizaci6n continda hasta que el navegador
interrumpe la conexi6n a1 moverse a otro documento, o despues de completar 60 ciclos
(aproximadamente 5 minutes).
Ofrecemos este gui6n de ejemplo para ilustrar la 16gica b5sica detris de cualquier generador
de documento enviado por el servidor. En realidad, usted debe crear sus propias aplicacio-
nes del lado servidor utilizando un lenguaje de programaci6n mis convencional, como Per1
o C. Las aplicaciones se ejecutan mis eficientemente y pueden detectar mejor cuando el
cliente ha terminado la conexi6n a1 servidor.
 En este capftub:
Los mejores tips
dTrfvhlo abusiuo?
Viiletas personalizadas
Tnrcos con tablas

Creaddn de nuevas

Tips, trucos ventanas

Marcos mziltiples en una
liga
y trampas

Hemos dado varios tips, trucos y trampas a lo largo de este libro, junto con las sugerencias d e
estilo, ejemplos e instrucciones. Entonces, ipor quC incluir un capitulo especial de tips, trucos
y trampas de HTML? Porque es donde muchos lectores se dirigirQn cuando tomen este libro
por primera vez. HTML es el lenguaje, aunque restringido, que hace al World Wide Web el
excitante lugar que es. Y 10s lectores interesados querran saber "c6mo hacer algo suave".

15.1 Los mejores tips

El tip m5s importante incluso para 10s desarrolladores veteranos es navegar y navegar. Pode-
mos mostrar y explicar algunas sugerencias para que comience, pero hay miles de autores de
HTML all5 afuera combinando y recombinando etiquetas de HTML y escamoteando contenido
para crear irresistibles y tjtiles documentos.
Consigase una cuenta de Internet seria: obtenga una copia de Navigator, Internet Explorer o cual-
quier o m navegador que le acomode; conkctese y comience a navegar. Colecaone 10s URL de 10s
sitios web de sus arnigos y de diferentes cornpa%, asi como 10s que anuncian 10s media tradicie
nales. I n d m las estaciones de radio y TV han tenido que anunciar los sitiosweb de sus patrodnadores.
Consulte ademas 10s directorios que hay en Internet, como Yahoo y Altavista, para obtener
direcciones nuevas y aaualizadas de 10s sitios mis Cltiles para su estilo de vida o tip0 de negocio.
Examine (no las robe) esas paginas con atenci6n y observe su efectividad y diseiio para
guiar e inspirar sus propias creaciones. Copie y examine 10s documentos fuente de HTML
para obtener tajadas jugosas. Localice las colecciones mas efectivas del Web. iC6m0 estQn
organizados sus documentos? iQue tan grande es cada uno de ellos? En fin, disecci6nelos.
Todos aprendemos de ;a experiencia, asi que hagalo usted tambien.
15.1 Los mejores tips 43 7

15.1.1 Diseiie para su publico

A lo largo del libro argumentamos con frecuencia que, con 10s documentos de HTML, lo
que m b importa e s el contenido, no el aspecto, lo cual no significa que la presentaci6n no
importe.
Los documentos de HTML mls efectivos satisfacen las expectativas y objetivos d e su pdblico
dlndoles un entorno adecuado para explorar y obtener informaci6n. Los acadkmicos serios
esperan que aparezca como en una revista un tratado sobre la fisiologia del kumquat: con
muchas palabras significativas, figuras, diagramas y describen el uso de frivolidades, como
vifietas graciosas y abuso de fuentes. No agreda el ojo del lector, except0 cuando ejerza,
bajo licencia artistica para irritar o atacar, la sensibilidad de sus lectores.
A1 anticiparse a su pdblico diseiiando documentos para satisfacer a sus gustos, desvia tambikn
de alguna manera a 10s navegadores indeseables. Como 10s estudiantes indigentes navegando
por su sitio comercial que pueden agotar 10s recursos de su servidor y dificultar el acceso a sus
p5ginas de la audiencia que en realidad desea.
Por ejemplo, puede utilizar colores suaves y silenciosas transiciones de texto entre las
diferentes secciones de un museo de arte clasico virtual para imitar el tranquil0 ambiente de
un museo clisico real. El tipico usuario maniac0 de la red enfebrecido por el rock-n-roll
seguro no estarl mucho tiempo en su sitio, per0 si podrl hacerlo el navegador que sienta
gran atracci6n por el arte.
Utilice tambien un diseiio efectivo para guiar con gentileza la atenci6n de sus lectores hacia
lreas interesantes en sus documentos. Siga estas reglas basicas en el disefio de sus docu-
mentos; ponga sus figuras y diagramas junto (si no es que en linea) a sus referencias de
texto. Nada es peor que tener que desplazarse de arriba abajo por la ventana del navegador
en busca de una imagen que lo explique todo.
No vamos a mentirle dicikndole que somos expertos en diseiio. No lo somos, per0 usted
puede encontrarlos. Asi, otro tip para el autor de plginas web serias: obtenga ayuda profe-
sional. Desde luego, lo mejor es que usted tenga experiencia en disefio, per0 si no la tiene
consiga que un profesional. vea sobre su hombro o a1 menos escuche sus dudas.
DCse una vuelta por alguna biblioteca y documentese. 0 mejor adn, use las guias d e HTML
en linea. Examine Designing forthe Web publicado por O'Reilly & Associates. Si lo hace, sus
lectores le estaran agradecidos. [hemadentas de disefio, l.G]

15.1.2 PlantiUas de documentos de HTML

El siguiente tip que le podemos ofrecer es que recicle sus documentos. No empiece desde
el principio cada vez. Mejor desarrolle una estructura coherente, incluso un esquema de
contenido donde agregue detalles y caracteres para cada plgina. Puede experimentar creando
hojas de estilo, de mod0 que el aspecto y sensaci6n de sus documentos tengan coherencia.
438 CapUulo 15: Tips, irucos y trampas

Aqui est5 nuestra contribuci6n para ayudarle a iniciar su colecci6n de plantillas para docu-
mentos de HTML. El siguiente c6digo fuente contiene lo que el est5ndar de HTML indica
actualmente que es el contenido minimo que debe aparecer en cada documento (pese a
que 10s navegadores podrian permitirle soslayarlo); para mayor claridad le agregamos algu-
nas indicaciones. Utilicelo como esqueleto para sus propios documentos:
<html>
<head>
<title>Remplace este texto por su tftulo</title>
</head>
<body>
<h3>Compl emente o rei tere su tltul o</h3>
.
. . Introduzca el contenido de su documento aqul ...
<address>Proporcione su nombre e informacibn para contactarlo,
de preferencia a1 final de su contenido </address>
</body>
</html>

15.2 v trivial o abusiuo?

Quiz5 no hay un recurso para documentos de HTML del que m5s se abuse o sea m5s
abusivo que la extensi6n de la etiqueta <bl i nk> para el contenido de tip0 texto actualmente
soportada, gracias a1 cielo, s61o por Navigator.'
Funciona alternando el color del texto contenido entre la etiqueta <bl ink> y la etiqueta de
fin </bl i nk>, ide manera incesante! No s61o es desagradable (una rerniniscencia de 10s muy
irritantes letreros en televisores de 10s hoteles), es increlblemente molesta. El lector no
puede desactivarla a menos que se desplace m5s all5 de la parte del documento o liga
completamente fuera del documento. [estilosGisicos,4.51
Cierto, de ese mod0 se atrapa la atenci6n del usuario para resaltar algo importante. S610
asegdrese de que sea un punto muy importante. Y aqui le ofrecemos una sugerencia: hiigalo
agradable para que el lector acepte ese segment0 intermitente en su documento. RodCelo
con espacio vacio, ancho agradable o contenido vacuo que no sea necesario leer.

Un uso comdn de las listas de definici6n no tiene nada que ver con las definiciones; estfi
relacionada con la adici6n de vifietas personalizadas a una lista no ordenada de otro modo.
Para este truco, deje la etiqueta <dt> vacia y agregue una etiqueta < i m p que haga referen-
cia a la imagen de viiieta que desea a1 principio de cada etiqueta <dd>. [<dl>, 8.7.11. Por
ejemplo:

'Pocos navegantes del Web utilizan Internet Explorer, de mod0 que ram vez y gracias a esto, no encontrad
rnuchos docurnentos de HTML que utilicen de la misma forma initante la caracteristica aarquee,.
15.4 Trucos con rablas 439

Kumquats en escabeche
'Quats y 'Kraut
'Malteada de quats
Hfgado con quats fritos

La lujosa lista se muestra en la figura 15-1.

6 flrchivo Edicion Uer Ir Marcedores Opciones Directorio Uentane

Ern N e t s c a p ~Uiiietas personeliradrs RZ

.j 1111

Figura 15-1,viiietas personaliraaiaspara u r n llsta sin ordenar,

Recuerde que este truco funciona bien s61o si 10s elementos de la lista son lo suficientemen-
te cortos como para ajustarse dentro d e la ventana del navegador. Si el elemento n o se
ajusta, la siguiente llnea comenzari alinkandose con el borde izquierdo d e la vifieta, n o con
el del texto, como usted podrla esperar.

15.4 Trucos con tabtas

Suficiente de trucos baratos. Veamos algunos realmente buenos: trucos con la etiqueta <tab1 e*
y atributos que agregan algunas caracteristicas atractivas a 10s documentos.
Por disefio, las tablas d e HTML le permiten crear tablas d e informaci6n accesibles. Pero
las etiquetas para tabla d e HTML tambiCn pueden emplearse para crear diseiios d e piigina
innovadores y atractivos que, d e otro modo, n o podrian obtenerse con el e s t h d a r
de HTML.

15.4.1 Pdgfnascon mu'mples cohmnas

Un elemento muy comdn y popular para disefio d e piiginas olvidado por HTML hasta fechas
recientes es el de columnas de texto mbltiple. Aunque Navigator soporta ahora la extensi6n
emu1 t i col>, para una soluci6n mas transparente (a1 menos hasta que casi todo su pdblico
obtenga la versi6n miis reciente de Navigator), coloque el contenido de su documento
dentro de una tabla de una fila con dos o miis columnas. [multicol*, 6.2.11
440 Capftulo 15: Tips,rrucos y trampas

15.4.1.1 DiseiZo bdsico de columnas mliCttples

El diseiio bisico d e dos columnas con <tab1e> tiene una sola fila con tres celdas de datos;
dos para cada colurnna de texto y una celda vacia en medio para separar y dar mejor
aspecto a las dos columnas. Tambikn hemos agregado un alto valor a1 atributo cell spacing
para dejar un espacio adicional que apoye la separaci6n de las columnas.
El siguiente ejemplo de tabla es una excelente plantilla para un diseiio simple de dos
columnas d e texto:
< t a b 1 e border=O c e l l s p a c i n g = 7 >
<tr>
<td>Copi a p a r a c o l umna 1.. .
<td><br>
<td>Copi a p a r a c o l umna 2 . . .
</tab1 e >
En la figura 15-2 se pueden apreciar 10s resultados.

& Archiuo Edicion Uer I r Mercadores Omiones Oirectorio Uentane

Figura 15-2.Disefio en dos columnas.

Lo dnico que 10s navegadores no pueden hacer es balancear de forma automatics el texto
en las columnas, lo que resulta en columnas d e aproximadamente la misma longitud. Ten-
dr5 que experimentar con su documento, desplazando el texto manualmente desde una
columna a otra hasta que consiga una p5gina atractiva y balanceada.
Sin embargo, recuerde que 10s usuarios pueden redimensionar el tamaiio d e la ventana del
navegador y e n consecuencia el contenido de las columnas se desplazar5. Asi que no se
25.4 h c o s con tablas 441

obsesione por lograr que las 6ltimas frases de cada columna se alineen con exactitud: est5n
subordinadas a1 ancho establecido para la ventana del navegador.
Debemos mencionar tambiCn que puede convertir f4cilmente el diseiio de nuestro ejemplo
a uno con tres o mls columnas dividiendo el texto e n mas celdas. Pero no olvide que las
piginas con m4s de tres columnas pueden ser dificiles de leer en pantallas pequeiias donde
el ancho d e columna real puede ser diminuto.

15.4.1.2 Encabexados encuadrados

El formato blsico de columnas mdltiples es s61o el comienzo. A1 agregar celdas que abarcan
el largo d e las columnas, crea lineas de encabezado. De manera similar, puede hacer que las
figuras abarquen mas de una columna: s610 agregue el atributo col span a la celda que
contenga la linea del encabezado o figura. La figura 15-3 ilustra un atractivo diseiio de tres
columnas con encabezados encuadrados y una figura a lo largo de dos columnas, creada a
partir del siguiente c6digo fuente:
<tab1 e border=O cell spaci ng=7)
<tr>
<th col span=5><hZ>Historia del kumquat</h2>
<tr val ign=top>
ctd rowspan=2>Copia para col umna 1.. .
<td rowspan=2 width=24><br>
<td >Copia para col umna 2.. .
<td width=24><br>
<td >Copia para columna 3.. .
<tr>
ctd col span=3 a1 i g=center><img src="imagenes/quat .gi f ">
<P>
<i>La noble fruta</i>
</tab1 e>
Para lograr este'lindo diseiio, utilizamos el atributo col span en la celda de la primera fila para
abarcar las cinco columnas de la tabla (tres con contenido y dos como espacio entre columnas).
Utilizamos el atributo rowspan en la primera columna y su espaciador para extender las colum-
nas hacia abajo a1 lado de la figura. La celda que contiene la figura tiene un atributo col span de
modo que el contenido se extiende a las otras dos columnas y 10s espacios que intervienen.

15.4.2 Encabezados laterales

Las 6nicas caracteristicas de encabezado disponibles con HTML son las etiquetas <hl> a la
<h6>. Estas etiquetas est4n incrustadas a lo largo del texto, separando p4rrafos. A traves de
columnas mdltiples, puede lograr un estilo alternativo que coloque 10s encabezados en una
columna lateral independiente, que corre verticalmente a lo largo del texto del documento.
La figura 15-4 muestra un par de encabezados laterales que ilustran muy bien nuestra
explicaci6n como resultado del siguiente fragment0 de c6digo:
442 y trampas
Capftulo 15: Tips, ~rucos

a del Kumquat
Los origenes del Kumquat es&
enwelux- en
____._I.._..--.
un _.f -a_..:. ..._:.._.A:renido
rmswrro. mlrnmio es--
un cuando h e m
a-.
reportes de kutrqlrat no fue
el conmimiento que se tiene de este haberse encontrado sembrado y debe su
maravillncn frutn antrc Ar mr n r n m m i h n a la nano
descubierto por exploradores entre loe restos de la que lo abarrdon6, no
qdioles a principios del siglo XV. nave espacial Rosxell existe o h conclusi6n
E n t o m , al querer Igualar aquellos destruida y abanlolaada except0 esta.
intentos por rastrear el origen del
fruto nos e n c o n ~ a m o con
s
resistencias, malas direcciones y
lograriamos su muerte, de la que las
manos de 10s natives de
Norbadrim lo resguardaron
celosamnte "quom-tecotl'
(literatun, el fruto de vida).

Ffgura 15-3.
Encaberados encuadradosyfiguras txtendtdas usando ettquetas de tabla.

<table>
<tr>
< t h width="30%" a1 ign=right>
~ h 9 S e c c6n
i l</h3>
<td>
<td>
La copia para l a secci6n 1 s e s i t l a un poco arriba,
de modo que tomara mas de una lfnea
en l a ventana de 1 a celda.. .
<tr>
< t h a1 ign=right>
<h3>Secci6n 2</h3>
<td>
<td>
La copia para l a seccidn 2 s e sitGa un poco arriba,
de modo que tomara mas de una l'inea
en l a ventana de l a celda.. .
</tab1 e>
15.4 T*ucos con tabhs 44.3

Observe c6mo crearnos llamativos encabezados laterales establecidos desde el margen iz-
quierdo d e la ventana del navegador a1 ajustar el ancho d e la celda del primer encabezado
y justificar a la derecha el contenido de la celda.

Secd6n La copia de la secci6n 1 se s i b arriba y kma mhs de

mi linea en la celda de la tabla para distribrdrse a lo
largo dde form equilibda.
Secc16n La copla de la secci6n 1 se situa arriba y kma m& de
una linea en la celda de la tabla para distribuirse a lo
largo de form equilibrada.

Figura 15-4. Con eNquetar de tabla creamas encabezados latemles.

Como en nuestro diseiio d e columnas mbltiples, el diseiio d e encabezado lateral del ejem-
plo utiliza una columna vacia para crear un espacio entre la estrecha columna izquierda que
contiene el encabezado y la columna derecha, m9s amplia, que contiene el texto asociado
con ese encabezado. Es mejor especificar ese ancho d e columna como un porcentaje del
ancho de la tabla, en vez de hacerlo explicitamente en ntimero de pixeles para asegurar que
la columna de encabezado se ajusta a las diferentes ventanas de visualizaci6n.

15.4.2.1 Cuando no pueden fmpkmentarse las tablas

Uno de 10s peligros de depender demasiado de las tablas es que sus documentos serin
ilegibles e n navegadores que n o soporten tablas. Sin embargo, e n el caso d e 10s encabeza-
dos laterales su documento se veri bien en un navegador "incapaz de manejar tablas".
La mayoria de 10s navegadores se apegan a uno de 10s principios basicos de Internet: ser
liberal en lo que usted acepta y estricto con lo que crea. Esto significa que por lo regular el
navegador ignorad las etiquetas que no pueda interpretar, incluyendo las que crean una tabla.
En el caso d e nuestro diseiio d e encabezado lateral, 10s navegadores que n o soportan tablas
ignoran esas etiquetas y solo despliegan esta parte del documento:
<h3>Secci 6n l</h3>
La c o p i a para l a s e c c i b n 1 s e sitGa un poco a r r i b a
d e modo que tomara mas d e una lfnea
en l a ventana d e l a c e l d a . . .
<h3>Secci bn 2</h3>
La c o p i a para l a s e c c i b n 2 s e s i t G a un poco a r r i b a
d e modo que tomara mas d e una lfnea
en 1 a ventana d e 1 a c e l d a . . .
444 Capirulo 15: Tips, trucos y trampas

Por supuesto, Csta es una secuencia de HTML perfectamente valida que genera un docu-
mento convencional con secciones divididas por encabezados <h3>. Su documento luciri
muy bien, sin importar que el navegador sea o no compatible con las tablas.

15.4.3 Mejor diseiio deformas

De todas las caracteristicas d e HTML, las formas son las que claman por un mejor control de
disefio. A diferencia d e otros elementos estructurados e n HTML, las formas lucen mejor
cuando se presentan e n un diseiio fijo con margenes ,precisos y elementos alineados verti-
calmente. Sin embargo, except0 segmentos d e forma cuidadosamente planeados con forma-
to <pre>, el lenguaje comdn simplemente no nos da ninguna herramienta especial para
controlar mejor el diseiio de formas.

15.4.3.1 Diseilo bdsico deformas

Sus formas casi siempre se veran mejor y seran mas faciles de que 10s lectores las sigan si utiliza
una tabla para estructurar y alinear sus elementos. Por ejemplo, puede emplear una alineaci6n
vertical para sus formas, con 10s titulos de 10s campos a la izquierda y sus respectivos elementos
alineados con el margen vertical a la derecha. No intente esto con el estindar d e HTML.
Mejor prepare una forma con una tabla d e dos columnas. El siguiente c6digo fuente hace
precisamente esto, como muestra la figura 15-5:
<form method=post a c t i on="http:/cgi - b i n/procesosN>
<tab1 e>
<tr>
< t h align=right>Nombre:
<td=input t y p e = t e x t size=32>
<tr>
< t h a1 ign=right>Di reccibn:
<td><input t y p e = t e x t size=32>
<tr>
< t h a1 ign=right>TelGfono:
<td><i nput t y p e = t e x t size=12>
<tr>
< t d col span=2 a1 ign=center>
<input type=submit value="Registrar">
</table>
</farm>

Por supuesto, diseiios de formas m b complejos pueden administrarse con tablas. Recomen-
damos que primer0 Cree un esquema del diseiio de la forma e n papel y despues planee
c6mo puede aplicar diferentes combinaciones d e 10s elementos de la tabla, incluyendo
celdas con filas y columnas encuadradas para realizar el disefio.

15.4.3.2 ConstruccCdn deformas con tabZas anidadas

Como ya mencionamos, puede colocar una tabla dentro de una celda d e otra tabla. Aunque
esto por si solo puede conducir a algunos complejos diseiios d e tablas, las tablas anidadas
15.4 Trucos con tabhs 445

Nombre: [I

[Registrar)

Figura 15-5.
Alinee 10s elementos de unaJorrna con tabla de HRML.

tambiCn son 6tiles para manejar un subconjunto de elementos de una forma dentro de una
tabla m9s grande que contiene la forma completa. La mejor aplicaci6n para usar una tabla
anidada en una forma es trazar casillas de verificacih y botones de seleccibn.
Por ejemplo, inserte 10s siguientes renglones que crean una tabla dentro de la tabla de la
forma del ejemplo anterior. Esto crea una casilla de verificaci6n con cuatro opciones:
<tr>
<th a1 ign=right val ign=top>Preferenci as:
<td>
<table>
<tr>
<td><i nput
<t.d><i nput
<tr>
<td><i nput type-checkbox
<td><i nput type=checkbox
</table>
La figura 15-6 muestra c6mo esta tabla anidada da un atractivo formato a las casillas de
verificaci6n que, d e otro modo, 10s navegadores presentarian e n una sola linea y n o bien
alineados.

Nombre:
Direeeibn: 6
Teldfono:- 1
Preferencias: 0 Limones 0 Limas
CJ Naranjas 0 Kumquats
(Rq$m*r]

Figura 15-6.Con una tabla anidada puede componer 10s elementos de una tabla.
446 Capitdo IS: Tips, tmcos y trampas

15.4.4 Gugas incrustadas

Generalmente le sugerimos sutileza cuando agregue ligas a sus documentos, colocindolas
dentro del contenido y el contexto. Pero en ocasiones son apropiadas las guias prominentes
para contenido adicional, como las seiiales de tcinsito en un bamo popular.
Tradicionalmente, quienes crean piginas con HTML han colocado sus seiiales de tdnsito
(iconos de flecha con r6tulos de texto) entre las secciones principales o a1 inicio y fin del
documento para guiar a 10s usuarios de regreso a la pigina anterior o principal, o a la
siguiente pigina en la serie de documentos. Con la etiqueta <table> y su atributo de
alineacicin tambien puede agregar esos "postes de seiializaci6nVa su documento, pero
distinguiCndolos del contenido. Y, desde luego, las tablas pueden ayudarle a alinear estos
elementos de sefializaci6n para que luzcan mejor.
Por ejemplo, el siguiente fragment0 de ctKiigo utiliza una tabla de dos columnas para poner
una guia de ligas separadas del contenido del documento. Esta tkcnica tambiCn e f e c ~ con
a
exactitud la alineacion de 10s elementos grificos y textuales de la guia, brindando a1 lector
una clara y ccimoda opcidn para saltar a otra secci6n del documento, como se ilustra en la
figura 15-7:
El rol de 10s kumquats en asuntos terrenales y cbsmicos,
esta muy bien documentado. Cercano a1 momento en que la
humanidad comenzd a recopilar su historia
-en cuanto a tradicidn oral- 10s historiadores tienen reportes
de 1 a extraordinaria y omnipresente influencia de 10s kumquats.
<P>
<table a1 ign=right>
<tr>
<td><a href="#artesl'><img src="imagenes/f 1 echa-c. gi f u border=O></a>
c t d x a href="#artesW><h6>La influencia de 10s kumquats<br>en las artes</h6x/a>
</tr>
</tab1 e>
Asf, cercana a la historia del hombre, 10s kumquats jugaron un rol
en la formacibn de creencias reli_gio~as.-~e~gran jmpartancia-es e n fa- - - - - - -

celebra~l6n-~nuar de-lacosecha, ya que es el dia en que esta perfectamente

maduro el fruto, por el gusto a1 sol <i>(stisus)</i>, el dorado fruto destacb
de 10s arboles, sobre el dla dedicado a1 culto a1 sol. Nosotros transportamos
ese dfa a nuestro tiempo que corresponde a nuestro <i>solsticio</i> de verano.

15.5 Imcigenes transparentes

Uno de 10s trucos m5s populares que encontrars en las paginas de todo el mundo son las
im6genes transparentes. Permiten mostrar el fondo a travks de la imagen, dando a1 resto de esta
la apariencia de estar flotando sobre la pAgina. El efecto es inteligente y es la linica manera de
colocar h i g e n e s no rectangulares en 10s documentos de HTML. [formatosde imagen, 5.2.11
La creation de una imagen transparente es ficil, una vez que comprenda cbmo funciona el
proceso y cuiles imageries son las mis adecuadas para utilizarlas como transparencias.
15.5 Imdgenes transparentes 44 7

Figura 15-7.h s tablas lepermiten insertar seiiales en eljlujo de texto.

Las imigenes presentan sus colores d e dos modos: directamente o a travCs d e un mapa de
colores.
En el mCtodo directo, cada pixel en la imagen contiene 10s valores RGB reales que definen su
color. Estas imigenes se denominan con frecuencia imigenes d e color vet--, puesto que
el ntimero de colores distintos en la imagen es generalmente muy grande. Es comfin que muy
pocos pixeles en una imagen de color verdadero compartan el mismo color, pues con muchos
pixeles puede haber variaciones muy sutiles. El formato d e imagen mQs popular que utiliza
esta representaci6n es JPEG.
Las imigenes basadas en mapas de color conservan sus diferentes colores en una tabla cono-
cida como mapa d e colores. Cada pixel en la imagen contiene un indice en la tabla para el
color de e x pixel. En general, la tabla es muy pequeiia, por lo regular menor a 256 colores.
Esto significa que muchos pixeles comparten el mismo color y esos grupos de pixeles pueden
hacer que sus colores cambien simplemente alterando el registro apropiado en el mapa de
colores. El formato d e imagen miis comdn que utiliza mapas d e colores es GIF,
La transparencia d e imageries s61o es posible con imigenes que contienen un mapa de
colores, y actualmente esti definida para imigenes que utilizan el formato GIF89a. En
este formato, un registro en el mapa d e colores s e fija como el color transparente. Todos
10s pixeles conteniendo el lndice de ese registro serQntransparentes cuando se exhiba la
imagen.
Por ejemplo, imagine una imagen con ocho colores. El mapa d e colores es d e ocho registros
d e largo, con indices numerados de cero a siete. Cada pixel en la imagen contiene un valor de
0 a 7, correspondientes a su color en el mapa d e colores. Si usted indica que el segundo
registro en el mapa d e color, cuyo indice es 1, seri transparente, todos 10s pixeles con valor
1 se haran transparentes cuando se presente la imagen.
448 Capftulo 1 9 Tips, hucos y trampas

15.5.2 Cdmo wear una imagenpotencialmente transparente

La receta para crear una imagen transparente es fkil: tome una irnagen convencional,
determine el color que se har4 transparente y convierta la imagen a1 formato GIF89a, mar-
cando ese color como transparente.
La parte mls dificil para la rnayona de la gente es localizar una imagen convencional
adecuada para la conversi6n. Para hacer transparente el fondo de una imagen, &te debe ser
de un solo color. Por desgracia, muchas im4genes no satisfacen este simple criterio. Las
imageries capturadas por medio de un esclner, por ejemplo, por lo regular tienen fondos
que mezclan sombras ligeramente diferentes de un mismo color. Y,puesto que s61o un color
se puede hacer transparente, el resultado es un fondo moteado, en unas partes transparente
y en otras opaco.
Muchas herramientas de edici6n de imlgenes utilizan un proceso conocido comopunteado
(dithering) para crear ciertos colores en una imagen. Estos colores no son puros, sino una
mezcla de varios colores. Esta mezcla no es adecuada para transparencias. A menudo en-
contrarl esta tCcnica en sistemas con mapas de color pequefios, como las pantallas VGA
convencionales de diecisCis colores en algunas PC.
Por dltimo, algunas imlgenes tienen un color de fondo puro, per0 ese color tarnbien se
utiliza en partes de la imagen que usted desea mantener opacas. Puesto que cada pixel que
tiene el indice de mapa de color correspondiente se transparenta, estas partes de la imagen
se harln tambiCn transparentes.
En todos 10s casos, el problema puede resolverse cargando la imagen en un editor de
imlgenes, desactivando el punteado y pintando el lrea de fondo, por lo general a mano,
para que tenga un solo color que no se utilice en ninguna otra parte de la imagen. Asegdre-
se de guardar el resultado como una imagen GIF, de manera que el mapa de color y 10s
indices de pixel se conserven.

15.5.3 Conuersidn de la imagen

Ya que tenga una imagen aceptable y determin6 el color que desea hacer transparente,
debe convertir la imagen a1 formato GIF89a.
Para 10s usuarios de PC y UNIX, una utilen'a de dorninio pdblico llamada giftram hace este
trabajo muy bien. Para convertir una irnagen, utilice este comando:
g i f t r a n s -t indice original .gif> nuevo.gif

Remplace indice con el indice numeric0 del color que desea hacer transparente. original.gif
y nuevo.gifson archivos de la misma imagen, original.gif no transparente y nuevo.gif la
imagen transparente.
Los usuarios d e Macintosh tienen ventaja: pueden utilizar una sencilla hemmienta de nom-
bre Transparency para realizar esta conversi6n. Fue desarrollada por Aaron Giles en la
universidad de Cornell, quien generosamente la pus0 gratuita en la Internet. Revise Yahoo
o su recurso favorito d e Archie para localizarla en un servidor cercano.
Estas herramientas pueden hacer mucho mls que s61o convertir imlgenes transparentes.
Para leer una explicaci6n completa de la transparencia y conversi6n d e imlgenes, incluyen-
d o ligas a las herramientas reales, visite:

15.6 Creacidn de nuevas ventanas

Para la mayoria d e ligas, querrl que el documento asociado se cargue y exhiba en la misma
ventana, remplazando a1 anterior, lo cual tiene sentido, pues 10s usuarios por lo regular
siguen una ruta secuencial a traves de 10s documentos.
Pero en ocasiones tambiCn tiene sentido abrir un documento en una ventana nueva, d e
manera que tanto el nuevo documento como el anterior estCn accesibles en la pantalla del
usuario. Si el nuevo documento se relaciona con el original, por ejemplo, es razonable tener
ambos a la vista. Con frecuencia, el nuevo documento inicia la descarga por parte del
usuario d e nuevos documentos del Web, y usted q u e r d verlos y saber de d6nde provienen.
Sin importar la raz6n, es flcil abrir una nueva ventana del navegador desde el documento
d e HTML. Todo lo que debe hacer es agregar el atributo target en la etiqueta de liga (<a>)
apropiada.
Comdnmente utiliza el atributo t a r g e t para cargar un documento en un marco especifico
que haya definido en un conjunto de marcos. TambiCn sirve para crear una nueva ventana
mediante uno d e 10s dos siguientes mCtodos:
Hacer referencia a un nuevo nombre. Si no ha definido antes un nombre y luego usa
ese nuevo nombre como el valor para el atributo target de una liga, Navigator e
Internet Explorer crean d e forma automltica una nueva ventana con ese nombre y
cargan el documento a1 que se hizo referencia en ella. Esta es la manera mls utilizada
para crear nuevas ventanas, ya que puede utilizar el nombre d e forma secuencial para
cargar otros documentos e n la misma ventana. Con esta tecnica, puede controlar quC
documento se carga d6nde
Crear una ventana sin nombre. Algunos navegadores, como Navigator e Internet Explorer,
soportan un destino especial llamado -bl ank' que le permite crear una nueva ventana.
La ventana -blank tiene un uso limitado debido a que no tiene nombre: usted no puede
dirigir ningdn otro documento en esa ventana. (Los nuevos documentos cargados me-
diante las ligas seleccionadas por el usuario dentro de la ventana se despliegan desde
luego en esa ventana)

' Algunos navegadores tambien aceptan el nombre -new. Si no logra que trabaje -blank en su ndvegador, intente
con -new.
450 Capftulo15: Tips, -0s y trampas

15.7 Marcos ntdltdples en una liga

La carga de un nuevo documento desde una liga es algo instandneo, incluso si coloca el
nuevo documento e n una ventana o marco altemativo de su liga padre. Sin embargo,
ocasionalmente querr5 cargar documentos e n dos marcos cuando el usuario haga clic en
una sola liga. Con un poco de trampas puede cargar dos o mis marcos a la vez, previniendo
su ubicaci6n e n la ventana del navegador.
Considere este diseiio de marco:
<frameset rows=2>
<frameset cols=2>
<frame name=A>
<frame name=B>
</frameset>
<frameset>
<frame name=C>
<f rame name=D<
</frameset>
</frameset>
Si alguien hace clic en una liga del marco A, lo dnico que se puede hacer es actualizar uno
d e 10s cuatro marcos. Supongamos que quiere actualizar 10s marcos B y D a1 mismo tiempo.
El truco es remplazar 10s marcos B y D con un solo marco, como este:

iAjB! Ahora tiene un destino simple donde cargar un solo documento, el marco BD. El docu-
mento que usted carga debe contener 10s marcos originales B y D en una colurnna, como esta:
<f rameset col s=2>
<frame name=B>
<frame name=D>
</f rameset>
Los dos marcos llenadn el marco BD. Cuando actualice el marco BD, ambos marcos s e d n
remplazados, dando la apariencia d e dos marcos que se actualizan a1 mismo tiempo.
La desventaja de esto es que 10s marcos deben ser adyacentes y capaces de agruparse en un solo
documento. No obstante, para la mayor parte de las piginas, esta solua6n funciona bastante bien.
S61o hemos explorado aqui la superficie de las sugerencias y trucos d e HTML. Nuestro
consejo: jexperimente constantemente!
 Gramatica de HTML

Para la mayoria de 10s casos, la sintaxis exacta de un documento de HTML no esta determi-
nada por el navegador. Esto da a 10s autores gran libertad para crear documentos y les
permite que trabajen en la mayoria de 10s navegadores, aun cuando estos riltimos puedan
ser incompatibles con el estandar d e HTML. ApQuese a este estandar a menos que sus
documentos no tengan la intenci6n de trascender.

El estandar HTML define de manera explicita el orden y anidaci6n de las etiquetas y 10s
elementos del documento. Esta sintaxis se integra en la definici6n del tip0 de documento de
HTML y no es facil de comprender por quienes no esten versados en SGML (apCndice D).
Debido a esto, proporcionamos una definici6n alternativa de la sintaxis permisible de HTML,
utilizando una herramienta muy comrin llamada "gram5tican.

La gramitica, tanto si define frases en espafiol o documentos de HTML, es un conjunto

de reglas que indican el orden de 10s elementos del lenguaje, 10s cuales pueden dividirse
en dos conjuntos: terminal (las palabras reales del lenguaje) y no terminal (las demas
reglas gramaticales). En HTML, las palabras corresponden a las etiquetas y a1 texto del
documento.

Para crear un documento de HTML valid0 utilizando esta gramatica, siga el orden de las
reglas para identificar d6nde puede colocar etiquetas y texto.

A. 1 Convenciones gramaticales
Utilizamos varias convenciones tipograficas y de puntuaci6n para lograr una gramatica f k i l
de comprender.
452 Ap4ndice A: Gramdtica de HTML

A. I . I Convenciones tipogrdficas
y d e nomenclatura
Para nuestra gramatica d e HTML, denotamos 10s elementos terminales con un tip0 d e letra
Courier en negritas. Los elementos no terminales aparecen e n cursivas.
Tambien usamos una sencilla convenci6n d e nomenclatura para la mayoria d e nuestros
elementos no terminales: si uno define la sintaxis de una etiqueta d e HTML especifica, su
nombre sera el de la etiqueta antecedido por "etiqueta-". Si un elemento no terminal define
10s diferentes elementos del lenguaje que pueden estar anidados e n alguna etiqueta, su
nombre sera el d e la etiqueta antecedido por "contenido-".
Por ejemplo, si se pregunta exactamente quC elementos se permiten e n una etiqueta <a>,
puede buscar e n la regla contenido-a dentro de la gramitica. De manera similar, para
determinar la sintaxis correcta d e una lista d e definiciones creada con la etiqueta <dl>,
busque la regla etiqueta-dl.

A. 1.2 Conuenciones de puntuacibn

Cada regla e n la gramatica comienza con el nombre d e la regla, seguido por el simbolo
d e sustitucidn (::=) y el valor d e la regla. Hemos mantenido la gramatica simple, pero
empleamos tres elementos d e puntuaci6n para indicar alternancia, repeticibn y elementos
opcionales.

La alternancia indica que una regla puede, e n realidad, tener distintos valores, y usted
puede elegir especificamente uno d e ellos. Las barras verticales (1) separan las distintas
alternativas d e esa regla.
Por ejemplo, la regla d e encabezado es equivalente a cualquiera d e las seis etiquetas de
encabezado d e HTML; por eso aparece e n la tabla como:

encaberado ::= etiqueta-h 1

I ettquetaJ2
I ettquetaJ3
I etiquetaJ4
1 ettqueta-h5
I ettquetaJ6

La regla de encabezado nos dice q u e e n cualquier parte que aparezca el elemento no terminal
encabezado, puede remplazarlo con una d e las etiquetas de encabezado reales.
A. 1.2.2Repeticidn
La repetici6n indica que un elemento dentro d e una regla puede repetirse cierto ndmero
d e veces. Los elementos repetidos estiin delimitados por llave ((...I). La Have d e cierre
tiene un subindice distinto d e 1 si el elemento debe repetirse u n ndmero minimo d e
veces.

Por ejemplo, la etiqueta <ul> s61o puede contener etiquetas <1 i > o puede estar vacia. Por lo
tanto, la regla es:

La regla dice que la sintaxis d e la etiqueta <ul> requiere la etiqueta <ul>, cero o miis
etiquetas <l i > , seguidas por la etiqueta d e fin </ul>.

Componemos esta regla e n varias lineas y destinamos algunos d e 10s elementos s61o
para hacerla m5s legible; eso n o implica que sus documentos deben tener un formato
similar.

Algunos elementos pueden aparecer e n un documento, pero no son indispensables. Los

elementos opcionales est5n delimitados por parentesis cuadrados o corchetes ([ y I).

La etiqueta <tab1 e>, por ejemplo, tiene una leyenda opcional:

etiqueta-ta ble ::= <table>

[etiqueta-deleyenda]
[etiqueta-tr],
</table>

Ademiis, la regla dice que una tabla comienza con la etiqueta < t a b l e > , seguida por una
leyenda opcional, cero o mas etiquetas d e fila y finaliza con la etiqueta </tab1 e>.

A. 1.3 Mds detalles

Nuestra gramiitica se limita a1 nivel d e etiqueta; no profundiza mas para mostrar la sintaxis
d e cada etiqueta, incluyendo sus atributos. Para estos detalles, consulte la tarjeta que viene
a1 final del libro.
A. 1.4 Elementos no terminales predefinidas
El esthdar de HTML define algunas clases especfficas de contenido que corresponden a
diferentes tipos de texto. Utilizamos estos tipos de contenido a lo largo de la gramitica. Son:
texto-literal
El texto se interpreta exactamente como se ha especificado, no se reconocen entidades
de cadcter o etiquetas de estilo.
texto-llano
Caracteres ordinaries en la codificaci6n de cadcter del documento, junto con las entida-
des de caricter indicadas con el signo de ampersand.
texto-estilo
Como texto-llano, mis etiquetas de estilo basadas en contenido y fisicas.

A.2 L a gramdtica
La gramatica es un conjunto de etiquetas del estindar de HTML 2.0 y extensiones especiales
para el lenguaje como se permite en las m5s recientes versiones de Mosaic del NCSA,
Navigator de Netscape Communications e Internet Explorer de Microsoft.
Las reglas e s t h en orden alfaEtico. La regla de inicio para todo un documento se denomina
documento_htrnl.
a-tag ::= <a>
(a-content),
</a>
..= heading
I text - - - - - -

address-tag ..= <address>

{address content),
</address>
address-content ..= P-tag
I text
applet-content ..- (<param>),
body-content
aPPlet_tag ..- <appl et>
applet_content
</applet>

cotllenido_a puede no tener ninguna etfqueta-a: ademits no puede anidar etiquetas <a> en otras etiquetas <a>.
b-tag <b> text < / b>
basefont-tag <basefont>
body-content
</basefont>
big-tag ..= <big> text </big>
blink-tag ..= <blink> text </blink>
block ..= {block-content) ,
block-content ..= <is i ndexs
I basefont-tag
I blockquote-tag
I center -tag
I dir-tag
I diu-tag
I &tag
I Jbm-tag
I listing-tag
I menu-tag
I multicoCtag
I nobr-tag
I ol-tag
I P-W
I pre-tag
I fab&-tag
I ul-rag
I xmp-tag
blockquote-tag ..= <blockquote>
body-content
</bl ockquotes
body-content ebgsounds
<hr>
addres~tag
block
heading
layer-tag
map-tag
marquee-tag
text
 body-tag <body>
(body-contentl,
</body>
caption-tag ecapt ion>
body-content
</caption>
center-tag <center>
body-content
</center>
cite-rag <cite> text </ci te>
code-tag <code> text </code>
colgroup-content {<col>),
colgroup-tag <col group>
colgroup-content
content-style cite-tag
code-tag
dB-tag
em-tag
kbd-tag
sump-tag
strong-tag
var-tag
dd-tag <dd>
flow
c/dd>- - - - -

dh-tag <d fn> text </df n>

dfr-tagz <d i r>
( I Ctagl
</di r>
div-tag <div>
body-content
</di v>
dl-content dt-tag dd-tag

' La effqueta-li dentro de la eriqueta-dir no puede contener nin@ elemento localizado en un bloque.
 dl-tag *dl >
(dl-content)
</dl >
dt-tag <dt>
text
</dt>
em-tag <em> text </em>
frow (flow-content),
flow-content block
text
fon t-tag <font> style-text </font >
form-contenP <input>
<keygen>
body-content
select-tag
textarea-tag
<form>
wrm-content],
</form>
<frame>
noframes-tag
frameset-tag <frameset>
(frameset-content),
</frameset>
hLtag <hl> text </hl>
h2-tag <h2> text </h2>
h 3 ~ g <h3> text </h3>
h4-tag <h4> text </h4>
h5-tag <h5> text </h5>
h6-tag <h6> text </h6>
head-content <base>
<i s i ndex>
<l ink>
*eta>
enexti d>

' La etiqueta form-content no debe contener form-tags; no se pueden anidar etiquetas <form> dentro de otra
etiqueta <form>.
 styleetag
title-tag
head-tag <head>
[head-content),
</head>
heading ..= h 1-tag
I h2- tag
I h3-tag
I h4-tag
I h5-tag
1 h6-tag
htmCcontent ..= head-tag body-tag
I head-tag frameset-tag
html-document ..= html-tag
htm 1-tag ..= <htrnl>
html-content
</html>
< i > text < / i >
-41 ayers
body-content
</i 1 ayerp
kbd-tag <kbd> text </kbd>
layer-tag e l ayer>
body-content
</layer>
el i>
flow
</li>
listing-tag <listing>
literal-text
</listing>
(<area>),
<map>
map-content
</map>
marquee-tag marquee>
style-text
</marquee>
 <menu>
ULtag),
</menu>
</mu1 tical>
body-content
< / mu1 t i col >
nobr-tag <nobr> text </nobr>
noembed-tag <noernbed> text </noembed>
noframes-tag cnoframev
(body-content),
</nofrarnes>
noscript-tag ~ n o s c rpt>
i tex </noscri pt>
object-content l<pararn>),
body-content
object-tag <object>
object-content
</object>
<01>

Ui-tag)
< / 01>
option-tag <option>
phin-text
clopti on>
<P"
text
</P>
physical-style b-tag
big-tag
blink-tag
font-tag
i-tag
s-tag
small-tag
span-tag

a etiqueta-li dentro de la etiqueta-menu no puede contener ningdn elemento localizado en un bloque.

l
460 A p W k e A: Gramdtlca de HTML

strike-tag
su 6-tag
SUP-tag
tt-tag
u-tag
pre-content <br>
<hr>
a-tag
style-text
<pre>
@re-content),
</pre>
s-tag <S> text </s>
sump-tag <samp> text </samp>
scrfpt-tag5 <scri pt>plain-text </script>
select-tag <select>
(option-tag)
</select>
server-tag6 <server>plain-text </server>
small-tag <small> text</small>
span-tag <span> text </span>
strike-tag estri ke> text </stri ke>
strong-tag <strong> text </strong>
style-tag <sty1 e> plain-text </sty 1 e>
sub-tag _text
SUP-tag ^text
ta ble-cell td-tag
th-tag
table-content <tbody>
<tfoot>
<thead>
tr-tag

'Una etfqueta-scrfpt puede colocarse en cualquier lugar dentro de un documento de HTML, sin imponar las
reglas sintkticas.
Una etiqueta-sdor puede colocarse en cualquier lugar dentro de un documento de HTML, sin imponar las
reglas sintacticas.
table-tag <tab1e>
[caption-tag1
(colgroup-tag),
{table-contend,
</table>
<td>
body-content
</td>
text ltext_content),
text-content <br>
<ernbed>
<i frame>
<irng>
<spacer>
<wbr>
a-tag
appktag
content-style
ilayer-tag
noembed-tag
noscript-tag
object-tag
plain-text
physical-style
textarea-tag <textarea> plain-test </textarea>
th-tag <th>
body-content
</th>
title-tag < t i t 1e> plain-text < / t i t l e >
tr-tag <tr>
(table-celil,
</tr>
<tt>t a t </tt>
< U S text </u>

<u1>
{ICtag)
</ul>
::= w a r > text </var>
..= <xmp>
1iteraCtext
</xmp>
 Referenda rapida
de etiquetas de HTML

La siguiente tabla lista en orden alf&tico todas las etiquetas conocidas y algunas no documenta-
das de HTML y los atributos actualmente soportados por uno o mAs de los navegadores de hoy.
Como en ouas secciones de esta obra, utilizamos 10s iconos de Navigator y Microsoft en el
extremo derecho de cada elemento para mostrar cuPl navegador soporta esa etiqueta o
atributo. Si no se muestra nin@n icono, la etiqueta o atributo es parte del estPndar de HTML
3.2 y la soportan ambos navegadores.
Incluirnos cada uno de los posibles atributos de la etiqueta (algunos indispensables) indentados
bajo sus respectivas etiquetas. En la descripci6n, damos posibles valores del atributo, ya sea
como un interval0 de ntimeros enteros o como una lista definitiva de opciones, donde es
posible.
Crea un ancla de liga (atributo href)
o identificador de fragmento (atributo name)
Especifica una clase de estilo que controla la 00
apariencia de esta etiqueta
href =url Especifica el URL d e una liga destino (se requiere
si no es un ancla con nombre)
Especifica el nombre d e un identificador d e
fragmento (se requiere si no es un ancla
d e referencia de hipertexto)
oncl i ck=applet Especifica un applet que se ejecuta cuando el
usuario hace clic en la imagen
Especifica un applet que se ejecuta cuando
el rat6n abandona la imagen
onmouseover=appler Especifica un applet que se ejecuta cuando
el rat6n entra a la imagen
 Indica la relacidn de este documento con
el destino
Indica la relacidn inversa del destino con el
documento
Indica un estilo especifico para esta etiqueta 80
Define el nombre del marco o ventana que va a 80
recibir el documento referenciado
Proporciona un titulo para el documento destino
El texto delimitado es una direcci6n
Define un applet ejecutable en el flujo de texto
Alinea la regi6n de <appl et> con respecto a top,
mi ddl e, bottom (valor predeterminado), 1 e f t ,
r i g h t , absmiddle, base1 ine, o absbottom del
texto e n la linea
Especifica texto alternativo que aparece e n la
regi6n del eappl e t s en navegadores que
soportan la etiqueta <appl et> pero no pueden
ejecutar el programa
Especifica un archivo de clase que debe bajar
el navegador y luego buscar por la clase
del c6digo
Especifica el nombre de la clase del c6digo que
se ejecutara (indispensable)
URL desde el cual se transfiere el c6digo
Especifica el alto de la regi6n de <appl et>,
en pixeles
Especifica espacio adicional, en pixeles,
permitido a la izquierda y derecha de la regibn
de <applet>
mayscri pt Si est5 presente, permite que el applet tenga
acceso a JavaScript dentro de la pagina
name=nombre Especifica el nombre particular d e la instancia
del <appl et>
t i t 1 e=cadma Proporciona un titulo para el applet 0
vspace=n Especifica espacio adicional, en pixeles, que se
permite arriba y abajo d e la regi6n d e <appl et>
w i dth=n Especifica el ancho, en pixeles, d e la regi6n de
<appl e t >
Define un area sensible al rat6n en un mapa d e
imagen del lado cliente
Proporciona un texto alternativo para desplegarse
en navegadores no graficos
 Especifica una Ikta separada por comas de
coordenadas dependientes de la figura que define
el borde de esa irea
href=url Especifica el URL de una liga asociado
con esta area
nohref Indica que ningtin docurnento esti asociado
con esta irea; hacer clic en ella no tiene
efecto alguno
notab No incluye esta area en el orden de tabulaci6n
onmouseout=applet Especifica un applet que se ejecutari cuando
el rat6n abandone esta irea
Especifica un applet que ser5 ejecutado cuando
el ratdn entre en esta area
Define la figura de la regidn corno circ, circle,
poly, polygon, rect o rectangle
Especifica la posicidn del area en el orden de
tabulaci6n
Especifica el rnarco o ventana que recibiri el
docurnento ligado para esta area
Proporciona un titulo para el area
Pone el texto en negritas
Especifica una clase de estilo que controla la
apariencia de esta etiqueta
Indica un estilo especifico para esta etiqueta
Especifica el URL base para todos 10s URL relatives
en este docurnento
href =url Especifica el URL base (indispensable)
target=nombre Define el destino predeterminado de todas las
ligas <a> en el docurnento
Especifica el tamaiio & la fuente para el texto
subsecuente
col or=color Especifica el color de la fuente base
name=nombre Especifica la fuente local que se usara para la
fuente base
Establece el tamaiio de la fuente base en un rango de
1 a 7 (indispensable; el valor predeterrninado es 3)
Define el archivo de audio de fondo del
docurnento
Establece el ndrnero de veces que se reproduce
el archivo de audio; su valor puede ser un entero
o inflnito
Proporciona el URL del archivo de audio que se
ejecutara
 Da formato al texto contenido con un tip0 d e
letra mis grande
Especifica una clase d e estilo que controla la
apariencia de la etiqueta
s t y 1 e=esttlo Indica un estilo especifico para esta etiqueta
<blink>.. .</blink> Hace que parpadee el contenido
<blockquote>.. . El texto contenido es una cita textual a bando
</bl ockquote>
.
<body>. .</body> Delimita el principio y el fin del cuerpo
del documento
Define el color de las ligas activas en el
documento
Especifica el URL de una imagen para el fondo
del documento
bgcol or=color Define el color d e fondo del documento
bgproperti es-valor Con valor puesto e n fixed, evita que la imagen
de fondo se desplace con el contenido del
documento
Especifica una clase de estilo que controla la
apariencia d e esta etiqueta
1 eftmargi n=ualor Establece el tamafio, en pixeles, del margen
izquierdo del documento
Establece el color d e las ligas no visitadas en el
documento
onbl ur=applet Especifica un applet que se ejecutari cuando
el rat611 abandone la ventana del documento
on f ocu s =applet Especifica un applet que se ejecutari cuando el
rat6n entre a la ventana del documento
Especifica un applet que se ejecutari cuando se
cargue el documento
onunl oad=applet Especifica un applet que se ejecutari cuando
se cargue el documento
s tyl e=esttlo Indica un estilo especifico para esta etiqueta
text=color Establece el color del texto e n el documento
topmargi n=valor Establece el tamatio, en pixeles, del margen
superior del documento
Establece el color de las ligas visitadas en el
documento
Intenumpe el flujo d e texto actual, reanudindolo
al principio de la siguiente linea
Intermmpe el flujo y lo mueve hacia abajo hasta
que el margen deseado, ya sea 1 e f t , right,
"one o a1 1 , este limpio
Apdmiice E Referenda rdplhr de etiquetas de HTML 467

Define una leyenda para la tabla

Para Navigator, establece la posici6n vertical d e la
leyenda en top o bottom. Para Internet Explorer,
establece la alineaci6n horizontal de la leyenda
ya sea en left, center o right
cl ass=nombre Especifica una clase d e estilo que controla la
apariencia de esta etiqueta
styl e=estiZo Indica un estilo especifico para esta etiqueta
v a 1 i gn =postcidn Establece la posici6n vertical d e la leyenda,
ya sea e n top o bottom
.
<center>. .</center> Centra el texto contenido
.
<cite>. .</cite> El texto contenido es una cita
cl assznombre Especifica una clase de estilo que controla la
apariencia d e esta etiqueta
styl e=estilo Indica un estilo especifico para esta etiqueta
.
<code>. .</code> El texto contenido es una muestra de c6digo
cl ass=nombre Especifica una clase de estilo que controla la
apariencia d e esta etiqueta
styl e=estiZo Indica un estilo especifico para esta etiqueta
<col> Define una columna dentro d e un <col group>
a1 i gn=posicidn Establece la alineaci6n d e la columna e n 1 eft,
center o right
span=n Define el nlimero de columnas afectadas por esta
etiqueta <col>
ec01group2 Define un grupo de columnas en una tabla
a1 i gn=posicidn Establece la alineaci6n horizontal del texto en las
columnas, ya sea e n 1 eft, center o right
cl ass=nombre Especifica una clase d e estilo que controla la
apariencia de esta etiqueta
span=n Define el nlimero d e columnas en el grupo
styl e=estilo Indica un estilo especifico para esta etiqueta
val i gn=posicidn Establece la alineaci6n vertical del texto e n las
columnas, ya sea e n top, middle o bottom
width=n Establece el ancho en pixeles o como un
porcentaje, de cada columna en el grupo
.
<comment>. .</comment> Coloca un comentario e n el documento. Estos
comentarios son visibles en todos 10s d e m h
navegadores
468 A p k d f c e 8' Referenda rdpida de etiqnetas de HZML

Btablece la definicidn de un elemento en una

lista d e definici6n
Especifica una clase d e estilo que controla la
apariencia d e esta etiqueta
s t y 1 e=estilo Indica un estilo especifico para esta etiqueta
..
< d f n> .< / d f n> Da formato de definicidn al texto contenido
cl ass=nombre Bpecifica una clase de estilo que controla la
apariencia de esta etiqueta
styl e=estilo Indica un estilo especifico para esta etiqueta
<dir>. .. < / d i r > Crea una lista de directorio conteniendo la etiqueta
<l i>
Bpecifica una clase de estilo que controla la
apariencia de esta etiqueta
compact Hace la lista mis compacta si es posible
styl e=estilo Indica un estilo especifico para esta etiqueta
type=virieta Btablece el estilo de las vifietas para esta lista en
ci rcl e , di sc (predeterminado) o square
Crea una divisi6n en el documento
Alinea el texto dentro de la divisi6n a 1 e f t ,
center o right
Bpecifica una clase de estilo que controla la
apariencia de esta etiqueta
1 ang=nombre Bpecifica el lenguaje utilizado para esta division
nowrap Suprime el ajuste de texto en esta divisidn
s t y 1 e=estilo Indica un estilo especifico para esta etiqueta
< d l > .. . < / d l > Crea una lista de definicidn que contiene las
etiquetas <dt> y <dd>
Bpecifica una clase de estilo que controla la
apariencia de esta etiqueta
- - - - - - - - -
- - - - -

- -
compact - Hace la lista mis compacta si es posible
s t y 1 e=estilo Indica un estilo especifico para esta etiqueta
< d o . .. < / d o Indica la definicidn de un elemento en una lista
d e definiciones
Especifica una clase de estilo que controla la
apariencia de esta etiqueta
styl e=estilo Indica un estilo especifico para esta etiqueta
<em>. ..
</em> Da formato al texto contenido con enfasis adicional
cl assznombre Bpecifica una clase de estilo que controla la
apariencia de esta etiqueta
styl e=estilo Indica un estilo especifico para esta etiqueta
 Incmsta una aplicaci6n en un documento
Alinea el area del applet ya sea con relaci6n a
top o bottom del texto adyacente, o al margen
1 e f t o right d e la pigina, con el texto
subsecuente fluyendo alrededor del applet
Especifica el tamaiio, en pixeles, del borde
alrededor del applet
height=n Especifica el alto del applet en pixeles
hidden Si esti presente, oculta el applet en la pigina
hspace=n Defiie, en pixeles, espacio adicional a la izquierda
y a la derecha del applet
Proporciona un nombre para el applet
En Navigator, un valor d e foreground hace que
el applet utilice la paleta d e primer plano en
Windows; background emplea la paleta d e fondo.
Internet Explorer proporciona 10s colores d e
primer plano y d e fondo para el applet,
especificados como valores d e color separados
por una barn vertical ( I )
pl ugi nspage=url Proporciona el URL d e la pigina que contiene
instmcciones para instalar el conector asociado
con el applet
src=url Suministra el URL d e 10s datos que alimentan
al applet
type=tipo Especifica el tip0 d e MIME del conector que
se utilizari
uni ts=tipo Establece las unidades para los atributos d e alto y
ancho, ya sea en pixel s (la opci6n predeterminada)
o en Oa mitad del tamaiio d e texto en puntas)
Define, en pixeles, espacio adicional arriba
y abajo del applet
width=n Especifica el ancho del applet en pixeles
<font>...</font> Establece el tamafio o color del texto contenido
col or=co[or Establece un color deseado para el texto
contenido
Establece el t i p d e letra del texto contenido al
primer0 disponible e n la 1 i s t a separando con
comas d e 10s nombres de fuente
Establece el tamaiio & la fwnte como absoluto
entre 1 y 7, o relativo a d a r e f o n t > con +n o -n
(indispensable)
cf0l-W.. .</form> Delimita una forma
acti on=ud Especifica el URL de la aplicacidn que procesara
la forma (indispensable)
cl ass=nombre Especifica una clase de estilo que controla la
apariencia d e esta etiqueta
enctype-codfftcacidn Especifica c6mo s e d n codificados 10s valores
d e los elementos d e la forma
method=estilo Especifica el &lo para el envio de padmetros,
ya sea get o post (indispensable)
name=nombre Da un nombre para esta forma a fin de que lo
use JavaScript
onreset=applet Especifica un applet que se ejecuta cuando se
restablece la forma
onsubmi t=applet Especifica un applet que se ejecuta cuando
se envla la foma
s t y 1 e=&ilo Indica un estilo especifico para esta etiqueta
targetznombre Especifica el nombre del marco o ventana que
recibid el resultado d e la forma despues del envio
..
<frame> .</frame> Define un marco dentro de un conjunto de marcos
bordercol or=color Pone el color del borde del marco en color
f rameborderzn Si wlor es igual a yes (~610 en Navigator) o 1
(Navigator e Internet Explorer), habilita 10s bordes
del marco. Si es igual a no (&lo en Navigator) o 0
(Navigator e Internet Explorer), desactiva los
bodes del marco
margi nheight-n Coloca n pixeles d e espacio arriba y abajo del
contenido del marco
marginwidth-n Coloque n pixeles de espacio a la izquierda y a
la derecha del contenido del marco
name=nombre Define el nombre del marco
noresi ze Deshabilita la opci6n para que el usuario
pueda redirnensionar el marco
scroll i ng-~po Agrega siempre barras de desplazamiento (yes),
nunca agrega estas barras (no), o, s6lo para
Navigator, agrega barras de desplazamiento
cuando es necesario (auto)
Defme el URL del documento fuente para el marco
Define una colecci6n d e marcos o bien,
otro conjunto d e marcos
Establece el grosor d e los bordes del marco
en este conjunto d e marcos
bordercol or-color Define el color de 10s bordes en este conjunto
& marcos
 col s=lFsta Especifica el ancho y nlimero d e 10s marcos
en un conjunto d e marcos
f rameborder=valor Si valor es igual a yes ( ~ 6 1 0 en Navigator) o 1
(Navigator e Internet Explorer), habilita los bordes
del marco. Si es igual a no ( d o en Navigator) o 0
(Navigator e Internet Explorer), 10s desactiva
framespaci ng-n Define el grosor d e 10s bordes del marco para
este conjunto d e marcos
onbl ur=applet Define un applet que se ejecuta cuando el ratdn
abandona este conjunto d e marcos
Define un applet que s e ejecuta cuando el ratdn
entra a este conjunto d e marcos
Define un applet que s e ejecuta cuando se carga
este conjunto d e marcos
onunl oad=applet Define un applet que se ejecuta cuando este
conjunto de marcos se elimina d e la pantalla
rows-lista Especifica el nlimero y la altura d e 10s marcos en
un conjunto de marcos
.
<hn>. .</hn> El texto contenido e s un encabezado nivel n;
nivel n puede ser d e 1 a 6
a1 ign-tipo Especifica la alineaci6n del encabezado ya sea
en l e f t (predeterminado), center o right
Especifica una clase de estilo que controla la
apariencia del encabezado
styl e=estilo Indica un estilo especifico para esta etiqueta
.
<head>. .</head> Delimita el principio y fin del encabezado del
documento
Intermmpe el flujo d e texto e inserta una linea
horizontal
Especifica la alineacidn de la linea horizontal
ya sea en 1 e f t , center (predeterminado)
o right
Especifica una clase d e estilo que controla la
apariencia d e la linea
col or-color Define el color de la linea
noshade No utiliza sombreado tridimensional para
presentar la linea
Establece el grosor de la linea en un nlimero
entero d e pi xel s
styl e=estilo Indica un estilo especffico para esta etiqueta
width-valoro % Establece el ancho d e la linea ya sea en un
nlimero entero d e pixeles o un porcentaje del
ancho de la pagina
4 72 Apkrdice 8. Referencia rdpida de erlquetas de HTML

.
<html>. .</html> Delimita el inicio y el fin de todo el documento
de HTML
versi on=cadena Indica la versi6n de HTML utilizada para crear
el documento
<i>...</i> Da formato cursivo al texto
cl ass=nombre Especifica una clase de estilo que controla la
apariencia de esta etiqueta
s t y l e-estilo Indica un estilo especifico para esta etiqueta
<i frame>. ..</i frame> Define un marco en linea
a 1 i gn=posici6n Establece la posici6n del marco alineada a top,
center o bottom con texto relational circundante,
o que fluya con respecto a 10s mPrgenes 1 e f t o
right con el texto subsecuente alrededor del marco
Si valor es igual a 1, habilita 10s bordes del marco.
Si es igual a 0,10s desactiva
hei ght=n Establece la altura del marco, en pixeles
marginheight=n Coloca n pixeles d e espacio arriba y abajo del
contenido del marco
Coloca n pixeles d e espacio a la izquierda y a la
derecha del contenido del marco
name=nombre Define el nombre del marco
scroll i ng=tipo Siempre agrega barras de desplazamiento (yes)
o nunca las agrega (no)
Define el URL del documento fuente para
este marco
width=n Establece el ancho del marco, en pixeles
<i layerr.. .</i 1 ayer> Define una capa en linea
above=nombre Coloca esta capa sobre la capa nombrada
background=url Especifica una imagen d e fondo para la capa
be1 ow=nombre Coloca esta capa debajo de la capa nombrada
bgcol or=color Especifica el color d e fondo para la capa
cl ass=name Especifica una clase de estilo que controla la
apariencia d e esta etiqueta
Define, en pixeles, la regi6n d e corte d e la capa.
Si lefi y top son iguales a 0,pueden omitirse
Define, en pixeles, la posici6n del borde izquierdo
d e la capa desde la linea que contiene texto
Proporciona un nombre para la capa
Apdndice R Referenda rdpida de etiqa&as de HXML 4 73

Proporciona el contenido d e la capa desde

otro documento
Indica un estilo especifico para esta etiqueta
Define, en pixeles, la posici6n del borde superior
d e la capa desde la linea que contiene texto
Determina si se mostrad (show) la capa, la ocultad
(hide) o s e hereda ( i n h e r i t ) el atributo d e
visibilidad desde una capa contenedora
Define en pixeles el ancho d e la capa
Especifica la posici6n d e la capa en el orden
d e montaje
Inserta una imagen en el flujo d e texto actual
Alinea la imagen a top, middle, bottom
(predeterminado), o tambien 1 e f t o r i g h t con
respecto al texto en la linea. Para Navigator,
ademas a absmi ddl e, base1 ine o absbottom
tambien con relaci6n al texto
a 1t = texto Proporciona un texto alternativo para
navegadores que no soportan imageries
border=n Establece el grosor en pixeles del borde alrededor
d e las im5genes con ligas
class=nombre Especifica una clase d e estilo que controla la
apariencia d e esta etiqueta
controls Agrega controles para reproducir archivos d e
video incrustados
dynsrc=url Especifica el URL d e un archivo d e video q u e
s e exhibid
height=n Especifica la altura d e la imagen e n lineas
d e rastreo
hspace=n Especifica el espacio, e n pixeles, que s e agregara
a la izquierda y a la derecha d e la imagen
i smap Indica si el rat6n puede seleccionar la imagen
cuando se utiliza en una etiqueta <a>
1oop=valor Establece el ndmero d e veces que s e reproducid
el video; valor puede ser un entero o i nf in it e
lowsrc=url Especifica una imagen d e baja resoluci6n que
cargar5 primero el navegador, seguida por la
imagen especificada con el atributo src
Da un nombre a la imagen para que lo use
JavaScript
Proporciona un applet que s e ejecuta si s e
interrumpe la carga d e la imagen
 onerror=applet Proporciona un applet que se ejecuta si la carga
d e la imagen no e s exitosa
on1 oad=applet Proporciona un applet que se ejecuta si la carga
de la imagen es correcta
src=url Especifica el URL que contiene la imagen que s e
exhibit5 (indispensable)
start=inicio Especifica cuando reproducir el archivo d e video,
ya sea f i 1 eopen o mouseover
s t y 1e=estilo Indica un estilo especifico para esta etiqueta
usemap=url Especifica el mapa d e coordenadas y vinculos que
definen las ligas dentro d e esta imagen
vspace=n Especifica el espacio vertical, en pixeles, que se
agrega arriba y abajo de la imagen
width=n Especifica el ancho d e la imagen en pixeles
< i n p u t type=button> Crea un bot6n dentro d e una forma
nameznombre Especifica el nombre del parametro que se
envla a la aplicaci6n encargada d e procesar
la forma si se selecciona el elemento d e entrada
(indispensable)
notab Especifica que este elemento no e s parte del
orden d e tabulaci6n
oncl i c k=applet Especifica un applet que se ejecuta si el usuario
hace clic en este elemento
taborder=n Especifica la posici6n del elemento en el orden
d e tabulaci6n
val ue=cadena Especifica el valor del parlmetro enviado a la
aplicaci6n encargada d e procesar la forma si s e
selecciona este elemento d e la forma
(indispensable)
Crea una casilla d e verificaci6n dentro d e
una forma
checked Marca el elemento como opci6n preseleccionada
name=cadena Especifica el nombre del pargmetro que se envia
a la aplicacibn encargada d e procesar la forma si
se selecciona el elemento d e entrada
(indispensable)
notab Especifica que el elemento no es parte del
orden d e tabulaci6n
oncl i ck=applet Especifica un applet que se ejecuta si el usuario
hace clic en este elemento
taborder=n Especifica la posici6n del elemento en el orden
ApMice 8. Refe+eneia rdpida de e m a s de HTML 4 75

val ue=cadena Especifica el valor del parametro enviado a la

aplicaci6n encargada de procesar la forma si se
selecciona este elernento de la forrna
(indispensable)
<i nput t y p e = f i1 e> Crea un elernento d e t i p selecci6n de archivo
e n una forma
maxlength=n Especifica el nlirnero rnaxirno d e caracteres que
aceptari este elernento
name=nornbre Especifica el nornbre del parirnetro que se envia
a la aplicacidn encargada d e procesar la forma
para este elernento de entrada (indispensable)
notab Especifica que el elernento no es parte del
orden d e tabulaci6n
size=n Especifica el nlirnero d e caracteres que se
exhibirPn para este elernento
taborder=n Especifica la posici6n del elernento en el orden
d e tabulaci6n
<i nput type=hi ddew Crea un elernento oculto dentro d e una forma
name=nornbre Especifica el nornbre del parametro que se envia
a la aplicaci6n encargada d e procesar la forma
para este elemento de entrada (indispensable)
val ue=cadena Especifica el valor d e este elernento a1 ser
enviado a la aplicaci6n encargada d e procesar
la forrna
4 n p u t type=image> Crea un elernento d e entrada d e t i p irnagen
dentro d e una forma
a1 i gn=tipo Alinea la irnagen ya sea a top, middle o bottom
con relaci6n al texto del elernento d e la forrna
border=n Establece en pixeles, el grosor del borde
d e la irnagen
oncl i ck=applet Especifica un applet que se ejecuta si el usuario 0
hace clic en este elemento
name=nornbre Especifica el nornbre del parkmetro que se envia
a la aplicaci6n encargada d e procesar la forma
para este elernento d e entrada (indispensable)
notab Especifica que este elernento no es parte del
orden d e tabulacidn
src=url Especifica el URL que contiene la irnagen
(indispensable)
taborder=n Especifica la psici6n del elemento en el orden 0
d e tabulaci6n
<input type=password> Crea un elernento para introducir texto protegido
dentro de una forma
maxlength=n Especifica el nlirnero rnixirno d e caracteres que
aceptari el elernento
4 76 Apendice kt Referencia rdplda de eiiquetas de HTML

Especifica el nombre del parimetro que se envia

a la aplicaci6n encargada de procesar la forma
para este elemento de entrada (indispensable)
notab Especifica que el elemento no es parte del
orden de tabulacih
onbl ur=applet Especifica un applet que se ejecuta cuando el rat611
abandona el elemento
onchange=applet Especifica un applet que se ejecuta cuando el
usuario cambia el valor de este elemento
Especifica un applet que se ejecuta cuando
el raton entre en este elemento
onsel ect=applet Especifica un applet que se ejecuta si el usuario
hace clic en el elemento
s i ze=n Especifica el nlimero de caracteres que exhibiri
este elemento
taborder=n Especifica la posici6n del elemento en el orden
de tabulaci6n
val ue=cadena Especifica el valor inicial del elemento
<input type=radio> Crea un b o t h de radio dentro de una forma
checked Marca el elemento como preseleccionado
name=nombre Especifica el nombre del pariimetro que se envia a
la aplicaci6n encargada de procesar la forma si el
elemento de entrada se selecciona (indispensable)
notab Especifica que el elemento no es parte del orden
de tabulaci6n
oncl ick=applet Especifica un applet que se ejecuta si el usuario
hace clic en el elemento
Especifica la posici6n del elemento en el orden
de tabulaci6n
val ue=cadena Bpecifica-elvalor delpadmetro y e s e envia a
la aplicacidn encargada de procesar la forma si
el elemento se selecciona (indispensable)
<input type=reset> Crea un b o t h para restablecer la forma
notab Especifica que el elemento no es parte del orden
de tabulacidn
oncl i ck=applet Especifica un applet que se ejecuta si el usuario
hace clic en el elemento
taborder-n Especifica la posici6n del elemento en el orden
de tabulaci6n
v a l ue=cadena Especifica un r6tulo alternativo para el b o t h
restablecimiento (la opci6n predeterminada
es "Reset")
A p W i c e B. Refmncia rdpidu de e-etas de IITML 4 77

<input type=subrnit> Crea un bot6n d e envio dentro d e una forma

Especifica el nombre del parametro que se
envia a la aplicaci6n encargada d e procesar
la forma para este elemento d e entrada
(indispensable)
notab Especifica que el elemento no es parte del orden
d e tabulaci6n
oncl i ck=applet Especifica un applet que se ejecuta si el usuario
hace clic e n el elemento
taborder=n Especifica la posici6n del elemento en el orden
d e tabulaci6n
val ue=cadena Especifica un r6tulo alternativo para el botdn d e
envio, asi como el valor que se envia a la
aplicaci6n encargada d e procesar la forma d e
este padmetro si el usuario hace clic en el bot6n
<input type=text> Crea un elemento para introducir texto dentro
d e una forma
rnaxl ength=n Especifica el nlimero maxim0 d e caracteres que
acepta este elemento
name=nombre Especifica el nombre del parametro que se envia
a la aplicaci6n encargada d e procesar la forma
para este elemento d e entrada (indispensable)
notab Especifica que el elemento no es parte del orden
d e tabulaci6n
onbl ur=applet Especifica un applet que se ejecuta cuando el
rat6n abandona este elemento
onchange=applet Especifica un applet que se ejecuta cuando
el usuario cambia el valor d e este elemento
onfocus=applet Especifica un applet que se ejecuta cuando
el rat6n entra a este elemento
onsel ect=applet Especifica un applet que se ejecuta si el usuario
hace clic en el elemento
s i ze=n Especifica el nlimero d e caracteres que exhibira
el elemento
Especifica la posici6n del elemento e n el orden
d e tabulaci6n
val ue=cadena Especifica el valor inicial del elemento
<isi ndex> Crea un documento d e HTML "rastreable"
action=url S61o para Internet Explorer; proporciona el URL
del programa que realiza la acci6n d e blisqueda
prompt =cadena Proporciona un indicador d e entrada opcional
para el c a m p d e entrada
 El texto contenido es como el que se teclea
Especifica una clase d e estilo que controla la
apariencia d e esta etiqueta
styl e=estflo Indica un estilo especifico para la etiqueta
<keygen> Genera informaci6n d e tip0 clave en una forma
chal 1 enge=cadena Proporciona una cadena d e reto para ser
codificada con la clave
name=nombre Proporciona un nombre para la clave
.
<l ayer>. .</l ayer> Define una capa
above=nombre Coloca esta capa sobre la capa nombrada
background=url Especifica una imagen de fondo para la capa
be1 ow=nombre Coloca esta capa debajo d e la capa nombrada
bgcol or=color Especifica el color d e fondo para la capa
cl ass=nombre Especifica una clase de estilo que controla la
apariencia de la etiqueta
Define la regi6n de cone d e la capa, en pixeles.
Si lefty top son igual a 0,pueden omitirse
Define, en pixeles, la posici6n del borde izquierdo
d e la capa desde la capa o el documento
contenedores
Proporciona un nombre para la capa
Suministra el contenido d e la capa desde otro
documento
styl e=estilo Indica un estilo especifico para esta etiqueta
top=n Define, en pixeles, la posici6n del borde superior
d e la capa desde el documento o capa
contenedores
Determina si se muestra (show) la capa, la oculta
(hide) o hereda (inherit) el atributo d e
visibilidad de una capa contenedora
Define el ancho, en pixeles, de la capa
Especifica la posici6n de la capa en el orden
d e montaje
Delimita un elemento d e lista en una lista
ordenada (<ol>)o no ordenada (<ul>)
Especifica una clase d e estilo que controla la
apariencia d e esta etiqueta
styl e=estflo Indica un estilo especifico para la etiqueta 0
 Establece el tip0 de este elemento de lista al
formato deseado. Para <l i > dentro de <ol>:
A (letras mayisculas), a (letras minlisculas),
I (nlimeros romanos en mayisculas),
i (nlimeros romanos en minlisculas) o
1 (nlimeros arabigos; opci6n predeterminada).
Para <1 i > dentro de <ul>: c i r c l e , disc
(predeterminada) o square
val ue=n Pone el nlimero para este elemento de lista en n
<l i nkr Define una liga entre este y otro documento
en la etiqueta <head> del documento
Especifica el URL de hipertexto del documento
destino
Indica la relaci6n de este documento con el
documento destino
Indica la relaci6n inversa del documento destino
con este documento
Proporciona un titulo para el documento destino
Especifica el tip0 de MIME para el documento
ligado. Por lo regular se utiliza junto con ligas a
hojas de estilo, cuando el t i p se establece
a text/css
Igual que epre width=132> ... </pre>;
desaprobada, no la utilice
Define un mapa que contiene puntos criticos e n
un mapa de imagen del lado cliente
Define el nombre del mapa (indispensable)
Crea una rnarquesina de texto desplazable
(~610Internet Explorer)
Alinea la marquesina a top, middle o bottom
con relaci6n al texto circundante
behavi or=estflo Define el estilo d e la marquesina: scroll,
s l i d e o alternate
bgcol or=color Establece el color d e fondo d e la marquesina
cl ass=nombre Especifica una clase de estilo que controla la
apariencia d e esta etiqueta
Define la direcci6n, 1 e f t o right, a la que se
desplazara el texto
Define en pixeles, la altura del area d e la
marquesina
Define el espacio, en pixeles, que se insertara a
la izquierda y derecha de la marquesina
Establece el nlimero de veces que se animara la
marquesina; valor puede ser un nlimero entero
o infinite
480 Apkrdice B' Referenda *dpkkr de etiquetas de U T M L

scroll amount=valor Establece el nlimero de pixeles para mover el

texto e n cada desplazamiento
scroll del ay=ualor Especifica la demora, en milisegundos, entre
10s movimientos sucesivos del texto de la-
marquesina
styl e=estilo Indica un estilo especifico para esta etiqueta
vspace=n Define en pixeles, el espacio a insertar arriba
y abajo de la marquesina
Define el ancho, en pixeles, del area de la
marquesina
Define una lista d e menli con etiquetas 4 i>
Especifica una clase de estilo que controla la
apariencia d e esta etiqueta
compact Si es posible, hace la lista mas compacta
sty 1 e=estilo Indica un estilo especifico para esta etiqueta
type=uiCeta Establece el estilo d e viiieta para esta lista a
ci rcl e, disc (predeterminada) o square
Proporciona informaci6n adicional sobre
el documento
Especifica el conjunto de caracteres que se
utilizari e n este documento
Especifica el valor de la metainformaci6n
(indispensable)
http-equi v=cadena Especifica el nombre equivalente en H'ITP para la
metainformaci6n y hace que el servidor incluya
el nombre y contenido en el encabezado d e
HTIT para este documento cuando se transmite
al cliente
Especifica el nombre de la metainformaci6n
Define un flujo de texto e n mliltiples columnas
Especifica una clase d e estilo que controla la
apariencia de esta etiqueta
col s = n Especifica el ndmero de columnas
gutterxn Define en pixeles, el espacio entre columnas
styl e=estilo Indica un estilo especifico para esta etiqueta
width=n Define el ancho del grupo de columnas
.
<nobr>. .</nobr> No permite separaciones en el texto que
contienen
Define el contenido que se mostrarP en 10s
navegadores que no soporten la etiqueta <embed>
 .
<nof r a m e s . . </noframes Define el contenido que se mostrari en 10s
navegadores que no soporten marcos
<noscript> ...<I
noscript> Define el contenido que se mostrari e n
10s navegadores que no soporten la etiqueta
<script>
<object> Inserta un objeto en un documento
Alinea el objeto con el texto circundante
(texttop, middle, textmi ddl e, base1 i ne,
textbottom y center) o contra el margen d e tal
manera que el texto subsecuente fluye alrededor
del applet ( l e f t y right)
border=n Define, en pixeles, el ancho del borde del objeto
cl assid=url Suministra el URL del objeto
codebase=url Suministra el URL del c6digo base del objeto
codetype=tipo Especifica el tip0 d e MIME del c6digo base
data=url Suministra datos para el objeto
declare Declara este objeto sin instanciarlo
height=n Define, en pixeles, la altura del objeto
hspace=n Proporciona e n pixeles, espacio adicional,
a la derecha e izquierda del objeto
i d=nombre Define el nombre del objeto
name=nombre Define el nombre del objeto
notab El objeto no entra en orden d e tabulacidn
shapes Especifica que este objeto tiene ligas en figuras
standby=cadena Define un mensaje que se exhibe mientras se
carga el objeto
tabi ndex=n Especifica la posicidn del objeto e n el orden
d e tabulacidn del documento
t i t 1 e=cadena Da un titulo a este objeto
type=tipo Especifica el t i p d e MIME para 10s datos
del objeto
Define un mapa d e imagen para utilizar con
este objeto
Proporciona espacio adicional, en pixeles,
encima y abajo del objeto
Define, en pixeles, el ancho del objeto
<ol>... < / 0 1 > Define una lista ordenada con elementos <l i >
numerados (en forma ascendente)
cl ass=nombre Especifica una clase d e estilo q u e controla la 8O
apariencia d e esta etiqueta
compact Presenta la lista mas compacta
start=n Comienza la numeracibn d e la lista e n n,
e n lugar d e 1
s t y 1 e=estilo Indica u n estilo especifico para esta etiqueta
type=formato Establece el formato d e numeraci6n para la lista,
ya sea como A (letras mayisculas), a (letras
minizsculas), I (nlimeros romanos en rnayisculas),
i (nrimeros romanos e n minrisculas) o
1 (nlimeros aribigos; opci6n predeterminada)
Define una opci6n dentro d e un elemento
<select> dentro d e <form>
Especifica una d a s e d e estilo q u e controla la 8O
apariencia d e esta etiqueta
selected Hace a este elemento la opci6n preseleccionada
s t y 1e=estflo Indica un estilo especifico para la etiqueta 8O
val ue=cadena Devuelve el valor especificado a la aplicaci6n
encargada d e procesar la forma e n lugar del
contenido d e <option>
Comienza y termina un pirrafo
Alinea el texto dentro del pirrafo a l e f t , center
o right
Especifica una clase d e estilo q u e controla la
apariencia d e esta etiqueta
sty1 e=estflo Indica u n estilo especifico para esta etiqueta
<params.. .</params Suministra un parametro para un <appl et>
name=nombre Define el nombre del parametro
type=tfpo Especifica el tipo d e MIME del parametro 0
val ue-cadena Define el valor del padmetro
val uetype=tipo Define el tipo del atributo value, ya sea como 0
data, r e f (el valor es un URL q u e apunta a 10s
datos) u object (el valor e s el nombre d e un
objeto e n este documento)
Presenta el resto del documento como texto
llano con formato previo
A W k e 8' Refemucia rdpida de etfquetas de HXML 483

Presenta el texto contenido en su estilo original,

con formato previo, saltos & linea y espaciado real
Dimensions el texto, si es posible, de mod0 que
n caracteres se ajusten a lo largo de la ventana
de desplegado
Igual que cstri ke>. El texto contenido es forzado
por una linea horizontal
Especifica una clase de estilo que controla la
apariencia de esta etiqueta
Indica un estilo especifico para esta etiqueta
El texto contenido es una muestra
Especifica una clase de estilo que controla la
apariencia de esta etiqueta
sty 1 e=estilo Indica un estilo especifico para esta etiqueta
escri pts.. .</script> Define un gui6n en un documento
1 anguage-nombre Especifica el lenguaje del gui6n como vbscript
o javascript
Proporciona el URL del documento que contiene
10s guiones
Define un menli de opci6n mliltiple o lista
desplazable dentro de una forma con una o mPs
etiquetas copti on>
Especifica una clase de estilo que controla la
apariencia de esta etiqueta
Permite al usuario seleccionar mas de una
coption> dentro de un menli <select>
Define el nombre de 10s valores de copti on>
seleccionados que, si lo estPn, se envian a la
aplicaci6n encargada de procesar la forma
(indispensable)
onbl ur=applet Especifica un applet que se ejecuta cuando el
rat6n abandona este elemento
onchange=applet Especifica un applet que se ejecuta cuando
el usuario cambia el valor de este elemento
oncl i ck=applet Especifica un applet que se ejecuta si el usuario
hace clic en este elemento
onfocus=applet Especifica un applet que se ejecuta cuando el
usuario hace clic en este elemento
s i ze=n Despliega n elementos utilizando un menli
desplegable para si ze=l (sin especificar
mu1 t i pl el y, de otro modo, una lista desplazable
de n elementos
sty 1 e=estilo Indica un estilo especifico para esta etiqueta
.
<server>. .</server> Define un gui6n de LiveWire
484 A p h d t k e B' Referenda rdpfda de etfquetas de ?ITMI

csmal l > . ..</ma1 l > Da formato al texto contenido con un tip0

mas pequeiio
cl ass=nombre Especifica una clase de estilo que controla la
apariencia d e esta etiqueta
styl e=estilo Indica un estilo especifico para esta etiqueta
<spacer> Crea un espacio en blanco en un documento
a 1 i gn=posici6n Alinea un espaciador de bloque con el texto
circundante (top, texttop, middle, absmi d d l e,
base1 ine, bottom, absbottom) o contra el margen
con el texto subsecuente fluyendo alrededor del
espaciador ( 1 e f t y right)
Define e n pixeles, la altura de un espaciador d e
bloque
Define en pixeles, la longitud d e un espaciador
horizontal o vertical
Establece el tip0 d e espaciador en block,
horizontal o vertical
Define e n pixeles, el ancho d e un espaciador
de bloque
Define un segment0 de texto para la aplicaci6n
d e un estilo
cl ass-nombre Especifica una clase de estilo que controla la
apariencia d e esta etiqueta
styl e=estilo Indica un estilo especifico para esta etiqueta
c s t r i ker.. . < / s t r i ke> El texto contenido es forzado por una linea
horizontal
Especifica una clase d e estilo que controla la
apariencia d e esta etiqueta
s t y 1 e=estilo Indica un estilo especifico para esta etiqueta
.
<strong>. .</strong> Enfatiza el texto contenido con una fuente
e n negritas
Especifica una clase d e estilo para controlar el
aspecto d e esta etiqueta
styl e=estilo Indica un estilo especifico para esta etiqueta
< s t y l e > ... < / s t y l e > Define uno o mas estilos a nivel del documento
type=tipo Define el formato de 10s estilos (siempre text
/css>
Da formato al texto contenido como subindice
Especifica una clase d e estilo que controla el
aspecto d e esta etiqueta
styl e=estilo Indica un estilo especifico para esta etiqueta
ApkdLce B Referenda rdpida de etiquetas de HTML 485

Da formato a1 texto contenido corno superindice

Especifica una clase d e estilo que controla el
aspect0 d e esta etiqueta
s t y 1 e=estilo Indica un estilo especifico para esta etiqueta
.
<table>. .</table> Define una tabla
a1 i gn=posici6n Alinea la tabla a la izquierda ( l e f t ) o a la derecha
(right) y hace fluir el texto subsecuente alrededor
d e la tabla
background=url Define una irnagen d e fondo para la tabla
bgcol or=color Define el color d e fondo para toda la tabla
border=n Crea un borde d e n pixeles d e ancho
bordercol or=color Define el color del borde para toda la tabla
bordercol ordark=co[or Define el color oscuro para resaltar el borde d e
toda la tabla
bordercolorl ight=color Define el color claro para resaltar el borde d e
toda la tabla
cell p a d d i ng=n Coloca n pixeles d e relleno alrededor d e cada
contenido d e celda
cell spaci ng-n Coloca n pixeles d e espacio entre las celdas
cl ass=nombre Especifica una clase d e estilo que controla la
apariencia d e esta etiqueta
col s = n Especifica el nlimero d e columnas para esta tabla
f rame=tipo Define d6nde s e exhibiran 10s bordes d e la tabla,
ya sea border (predeterminado), void, above,
below, hsides, 1 hs, rhs, vsides o box
Define en pixeles, la altura d e la tabla
Fspecifica e n pixeles, el espacio horizontal,
que s e agrega a izquierda y a derecha d e la tabla
Deshabilita el ajuste autornitico d e texto en las
celdas d e la tabla
rul es=borde Deterrnina d6nde se dibujaran 10s divisores
internos: none (predeterminado), groups (~610
alrededor d e grupos d e filas y columnas), rows,
col s u a1 1
sty1 e=estilo Indica un estilo especifico para esta etiqueta
val i gn=posicidn Alinea el texto d e la tabla con top, center,
bottom o base1 ine
Especifica en pixeles, el espacio vertical, que s e
agrega en la parte superior e inferior d e la tabla
Establece el ancho d e la tabla a n pixeles o a un
porcentaje del ancho d e la ventana
 .
<tbody>. .<Itbody> Crea un grupo d e filas e n una tabla
.
<td>. . < / t d > Define una celda d e datos en una tabla
a 1 i g n=posicidn Alinea el contenido de la celda a 1 e f t , center
o right
background=url Define una irnagen d e fondo para esta celda
bgcol or=color Define el color d e fondo para la celda
bordercol or-color Define el color del borde para la celda
bordercol ordark-color Define el color resaltado del borde oscuro para
la celda
bordercol or1 i ght=color Define el color resaltado del borde claro para
la celda
cl ass=nombre Especifica una clase de estilo que controla la
apariencia de esta etiqueta
col span=n Esta celda tiene encuadradas n colurnnas
adyacentes
height=n Define en pixeles, la altura d e esta celda
nowrap No ajusta ni justifica en forma autornPtica el texto
e n esta celda
rowspanZn Esta celda tiene encuadradas n filas adyacentes
style=estilo Indica un estilo especifico para esta etiqueta
va 1 i gn=posicidn Alinea verticalrnente el contenido de la celda a
top, center, bottom o base1 ine
wi dth=n Establece el ancho de esta celda a n pixeles o a
un porcentaje del ancho de la tabla
.
<textarea>. .</textarea> Define un Area para introducir texto de lineas
rndltiples dentro de una forma; el contenido d e
la etiqueta <textarea> es el valor inicial,
predeterrninado
cl ass=nombre Especifica una clase de estilo que controla el
aspect0 de esta etiqueta
col s=n Despliega n colurnnas (caracteres) d e texto dentro
del area de texto
name=nombre Define el nornbre para el valor del Prea de texto
que se envia a la aplicaci6n encargada d e
procesar la forrna (indispensable)
onbl ur=applet Especifica un applet que se ejecuta cuando el
rat611 abandona el elernento
onchange=applet Especifica un applet que se ejecuta cuando
el rat6n abandona el elernento
onfocus=applet Especifica un applet que se ejecuta cuando el
rat6n entra al elernento
onsel ect=applet Especifica un applet que se ejecuta si el usuario
hace clic en este elernento
 rows=n Despliega n filas de texto en el Area de texto
styl e=estilo Indica un estilo especifico para esta etiqueta
wrap=estilo Establece el ajuste autornAtico de texto dentro del
irea d e texto a o f f ,virtual (se exhibe el ajuste
o justificacidn automitica, per0 no se transrnite
a1 sewidor) o phys i ca 1 (se exhibe y se transrnite
el ajuste autornitico)
< t f o o t > ...+foot> Define un pie de pigina d e la tabla
.
<th>. .</th> Define una celda para el encabezado de la tabla
a1 i gn=posici6n Alinea el contenido de la celda a 1 e f t , center
o right
bac kground=url Define una irnagen de fondo para esta celda
bgcol or=color Define el color de fondo para la celda
bordercol or=color Define el color del borde para la celda
bordercol ordark=color Define el color para resaltar el borde oscuro d e
la celda
bordercol or1 ight=color Define el color para resaltar el borde claro d e
la celda
cl ass=nombre Especifica una clase de estilo que controla la
apariencia de esta etiqueta
col span=n Esta celda tiene encuadradas n colurnnas
adyacentes
height=n Define en pixeles, la altura de esta celda
nowrap No ajusta ni justifica de forrna autornAtica el texto
en la celda
rowspan=n Esta celda tiene encuadradas n filas adyacentes
styl e=estilo Indica un estilo especifico para esta etiqueta
V a l i gn=posicio'n Alinea verticalrnente el contenido de celda a top,
center, bottom o base1 ine de la celda
width=n Establece el ancho de esta celda a n pixeles o a
un porcentaje del ancho d e la tabla
<thead>...</thead> Define un encabezado de tabla
a1 i gn=posicidn Define la alineacidn horizontal del texto del
encabezado, ya sea a 1 e f t , center, right
o justify
Especifica una clase de estilo que controla la
apariencia de esta etiqueta
styl e=estilo Indica un estilo especifico para esta etiqueta
val i gn=posici6n Define la alineacidn vertical del texto del
encabezado, ya sea a 1 e f t , center, right
o justify
Define el titulo del documento de HTML
 Referencia rapida de
propiedades de hojas
de estih en cascada
En la siguiente tabla, listamos en orden alfabktico todas las propiedades definidas en la
Especificaci6n Recomendada del Consorcio World Wide Web para Hojas de Estilo en Casca-
da, nivel 1 (http://www.w3.org/pub/www~REC-CSSI).

NOTA Sabemos que la capacidad de 10s navegadores para soportar hojas de estilo
cambiarP antes de que se reimprima este libro, de modo que hemos creado
un "documento de actualizaci6nn por separado que puede utilizar para deter-
minar c6mo se implementan Ias hojas de estilo en las dltimas versiones de 10s
navegadores. Puede encontrar este documento en http///www.ora.com/rnfd
html/. Dondequiera que ese documento y este apendice difieran, debe consi-
derar m9s preciso el documento.

Como con las otras secciones de esta obra, utilizamos 10s iconos de Navigator de Netscape
e Internet Explorer de Microsoft en el extremo derecho de cada elemento para mostrar cud
soporta quC propiedades. Las que carecen de icono no las soporta actualmente navegador
alguno.
TambiCn incluimos el nlimero de la secci6n que define la propiedad en este libro.
Incluimos cada valor posible de la propiedad, definido como una palabra clave explicita
(ilustrada con una fuente monoespaciada) o como uno de estos valores:
color
Ya sea un nombre de color o un valor RGB hexadecimal, como se define en el ap&dice
F, o una tripleta RGB de la forma
rgb (rojo, verde, azul)
donde rojo, verde y azul son nlimeros en el interval0 de 0 a 255 o valores de porcen-
taje que indican la brillantez de cada componente del color. Los valores 255 o low
 indican que el correspondiente componente de color esd en su mayor brillantez; 10s
valores 0 o 0%indican que el componente de color correspondiente estl apagado por
completo. Por ejemplo,

son especificaciones de color vllidas.

longitud
Un signo opcional (+ o -) seguido por un ndmero (con o sin punto decimal) y luego
un identificador de unidad de dos caracteres. Para valores de cero, puede omitirse el
identificador de unidad.
Los identificadores de unidad em y ex se refieren a la altura total de la fuente y a la altura
de la letra "x", respectivamente. El identificador de unidad px es igual a un pixel en el
monitor. Los identificadores de unidad in, cm, mi, p t y pc se refieren a pulgadas (inches),
centimetros, milimetros, puntos y picas, respectivamente. Hay 72.27 puntos por pulgada,
y 12 puntos en una pica.

nrimem
Un signo opcional, seguido por un ndmero (con o sin punto decimal)

porcentaje
Un signo opcional, seguido por un nlimero (con o sin punto decimal) y luego un signo
de porcentaje. El valor real se calcula como un porcentaje de alguna otra propiedad del
elemento, generalmente su tamaiio.

url
La palabra clave url , seguida (sin espacios) por un parkntesis izquierdo y luego un URL
opcional encerrado entre ap6strofos o comillas, seguido por un parhtesis derecho para
completar la expresi6n. Por ejemplo,
url (http://mcgraw.com/HTML)

es un valor de URL vllido.

Por dltimo, algunos valores forman listas de otros valores y se describen como una "lista den
alglin otro valor. En estos casos, una lista se compone de uno o mls de 10s valores permiti-
dos, separados por comas.
Si hay varios valores permitidos para una propiedad, aparecen separados por barras vertica-
les ( I 1.
Si el estlndar define un valor predeterminado para la propiedad, se encuentra wbravad~.
Apkrdtce C Referenciu rdpida de pmpiedades de bojas de esrUo en cascada 491

background Propiedad compuesta

para las propiedades
background-
attachment, back-
ground-color, back-
ground-image, back-
ground-position y
background-repeat; el
valor es cualquiera d e
10s valores de estas pro-
piedades, en cualquier
orden
background- scro1L I fixed Determina si la imagen
attachment de fondo permanece fija
en la ventana o se des-
plaza junto con el docu-
mento
background-color color I transDarent Establece el color d e
fondo de un elemento
background-image Establece la imagen de
fondo para un elemento
background-position porcentaje I longthrd I Establece la posiciBn ini-
top I c e n t e r I cia1 de la imagen de fon-
bottom I l e f t ( d o del elemento, si se
right especifica; 10s valores
normalmente son parejas
para definir la ubicacidn
x,y. La posicidn prede-
terminada es 0% 0%
background-repeat re~W,( repeat-x I Determina c6mo se re-
r e p e a t - y ( no- petirii la imagen d e fon-
repeat d o (para formar un mo-
s a i c ~ )a lo largo de un
elemento
border Establece 10s cuatro bor-
des de un elemento; el
valor es uno o miis colo-
res, un valor para
borderwi d t h y otro para
border-sty1 e
border-bottom Establece el borde infe-
rior en un elemento; el
valor es uno o mas colo-
res, un valor para
borderbottom-width y
otro para border-sty1 e
492 Aphdice C Ref- rdpkla depmpledades de bojas de estilo en cascada

border-bottom-width longirud I thi n ( Establece el grosor del

medium ( thick borde inferior de un ele-
mento
border-color color Establece el color de 10s
cuatro bordes de un ele-
mento; la opci6n prede-
terminada es el color del
elemento
border-left Establece el borde iz-
quierdo de un elemento;
el valor es uno o m9s
colores, un valor para
border-left-width y
otro para border-sty1 e
border-left-width Longirud I thin I Establece el grosor del
medium I thick borde izquierdo de un
elemento
border-right Establece el borde dere-
cho de un elemento; el
valor es uno o mas colo-
res, un valor para
border-right-width y
otro para border-sty1 e
border-right-width longirud I th i n I Establece el grosor del
medium 1 thick borde derecho del ele-
mento
border-style dashed I dotted I Establece el estilo de 10s
double 1 groove I cuatro bordes del ele-
inset I rn ( mento
outset I ridge 1
sol id
border-top Establece el borde supe-
rior de un elemento; el
valor es uno o mis colo-
res, un valor para
border-top-width y otro
para border-sty1 e
border-top-width longitud 1 th i n I Establece el grosor del
medium I thick borde superior del ele-
mento
border-width longirud I th i n I Establece el grosor de
medium I thick 10s cuatro bordes del
elemento
clear both I left 1 a Establece 10s m5rgenes
( right de un elemento que no
deben ser adyacentes a
un elemento flotante; el
elemento se mover5 ha-
cia abajo hasta que el
margen estC libre
color color Establece el color de un
elemento
display W ( inline I Controla c6mo se des-
list-item I none pliega un elemento
float left 1 a 1 right Determina si un elemen-
to flotar5 a la izquierda o
derecha, permitiendo
que el texto se ajuste a
su alrededor, o que s e
despliegue en linea (con
none)
font Establece 10s atributos
de fuente d e un elemen-
to; el valor es cualquiera
de 10s valores utilizados
para font-style,
font-vari ant,
font-weight,
font-size, 1 ine-height
y font-fami 1 y, en ese
orden
font-family lista d e fuentes Define la fuente de un
elemento, ya sea como
una fuente especifica o
una generica serif,
sans-seri f, cursive,
fantasy y monospace
font-size xx-small 1 x-small Define el tamaiio d e la
I small I medium ( fuente
large I x-large 1
xx-large 1 larger I
small er I longitud I
porcentaje
font-style ~ o r m a 11 italic I Define el estilo del tipo,
obl i que ya sea normal o algdn
t i p de estilo italic0
494 Apkrdtce C Referencia rdpidu & pmpiedades de bojas de esrUo en cascadu

font-variant normal I small-caps Define una fuente en

VERSALES

font-weight normal I bold 1 Define el ancho d e la

bolder 1 lighter 1 fuente. Si utiliza
nrimero nrimero, debe ser un
rndltiplo d e 100 entre
100 y 900;400 es nor-
mal, 700 es igual a la pa-
labra clave bold
height longitud ( ~ J I Q Define la altura d e un
elernento
letter-spacing longitud ( ~ o r m a l Inserta espacio adicional
entre caracteres de texto
line-height longitud I nrimero ( Establece la distancia en-
porcentaje I normal tre lineas base d e texto
adyacente
list-style Define estilos relaciona-
dos con listas utilizando
cualquiera de 10s valores
de 1 ist-style-image,
list-style-position y
list-style-type
list-style-image w-1 I Mae Define una irnagen que
se mar5 corno viiieta d e
un elernento de lista, e n
lugar del valor para
1 i st-style-type
list-style-position inside I outside Sangra o extiende
(la opci6n predeterrnina-
da) una vifieta d e ele-
rnento de lista con res-
pecto al contenido del
elernento
list-style-type circle I dix I Define un marcador
square I decimal 1 de elernento de lista ya
1 ower-a1 pha I sea para listas no orde-
lower-roman I none nadas (circle, disc o
1 upper-alpha I square) o para listas or-
upper-roman denadas (deci ma1 ,
1 ower-a1 pha,
1 ower-roman, none,
upper-a1 pha o upper-
roman)
margin Define 10s cuatro marge-
nes de un elernento
margin-bottom ( o n g w 1 PnenfaJe I Define el margen
auto inferior d e un elemento;
el valor predetermi-
nado e s 0
margin-left longitud ponentaje 1 Define el margen
auto izquierdo d e un elemen-
to; el valor predetermi-
nado es 0
margin-right longitud ponenuye 1 Define el margen
auto derecho d e un elemento;
el valor predeterminado
es 0
margin-top longitud 1 ponentaje I Define el margen
auto superior d e un elemen-
to; el valor predeterrni-
nado es 0
padding Define 10s cuatro valores
d e relleno alrededor d e
un elemento
padding-bottom longitud ( ponentaje Define el relleno inferior
d e un elemento; el valor
predeterminado e s 0
padding-left longitud ( ponentaje Define el relleno
izquierdo d e un elemen-
to; el valor predetermi-
nado e s 0
padding-right longitud I ponentaje Define el relleno
derecho d e un elemen-
to; el valor predetermi-
nado es 0
padding-top longitud I ponentaje Define el relleno
superior d e un elemen-
to; el valor predetermi-
nado es 0

-
text-align center I j u s t i f y I Establece el estilo d e ali-
left ( right neacidn del texto para
un elemento
textdecoration blink I line- Define cualquier decora-
through I I ci6n para el texto; 10s
over1 i n e I valores pueden combi-
under1 ine narse
text-indent longitud I ponentaje Define la sangria d e la
primera linea del texto
e n un elernento; el valor
predeterminado es 0
496 Apkrdke C Referencia rdpida de propiedudes de bojm de esHlo en cascada

text-transform capitalize I Transforma el texto en

lowercase ( m I el elemento correspon-
uppercase diente
vertical-align po?rentaleIbase-lineI Establece la posicion
bottom I middle I vertical de un elemento
sub I super I t e x t -
bottom I t e x t - t o p I
top
word-spacing longitud I normal Inserta espacio adicional
entre las palabras
white-space Define c6mo se manejan
10s espacios en blanco
en un elemento
width longitud 1 porcentaje I Define el ancho del ele-
ULQ mento
 L a DTD de HTML 3.2

El esdndar de HTML 3.2 est5 formalmente definido como una Definici6n de Tipo Documento
(DTD, Document Type Definition) de SGML. Es a partir de esta DTD que e s d documen-
tado el estandar, y tambien basado este libro. Observe que aqui reimprimimos esta DTD y
no hemos intentado agregarle extensi6n alguna. Donde nuestra descripci6n y el DTD no
coincidan, de por sentado que la DTD es el correcto.

W3C Document Type D e f i n i t i o n f o r t h e HyperText Markup Language

v e r s i o n 3.2 as r a t i f i e d by a v o t e o f W3C member companies.
For more i n f o r m a t i o n on W3C l o o k a t URL http://mm.w3.org/

Date: Tuesday January 14th 1997

Author: Dave Raggett <[email protected]>

HTML 3.2 aims t o capture reconended p r a c t i c e as o f e a r l y '96

and as such t o be used as a replacement f o r HTML 2.0 (RFC 1866).
Widely deployed rendering a t t r i b u t e s a r e included where they
have been shown t o be interoperable. SCRIPT and STYLE a r e
i n c l u d e d t o smooth t h e i n t r o d u c t i o n o f c l i e n t - s i d e s c r i p t s
and s t y l e sheets. 8ronsers must avoid showing t h e contents
o f these element O t h e m i s e support f o r them i s n o t required.
ID, CLASS and STYLE a t t r i b u t e s a r e n o t included i n t h i s v e r s i o n
o f HTML.
-->

<!ENTITY % HTML.Version
"-//W3C//DTD HTML 3.2 F i n a l //ENn
-- T y p i c a l usage:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 F i nal//ENn>

<html>
<!ENTITY 4 Content-Type "CDATA"
-- meaning a MIME content type. as per RFC1521
- ->
<!ENTITY % HTTP-Method "GET ( POST"
-- as per HTTP s p e c i f i c a t i o n
- ->
<!ENTITY 4 URL "CDATA"
-- The term URL means a CDATA a t t r i b u t e
whose value i s a Uniform Resource Locator.
See RFC1808 (June 95) and RFC1738 (Dec 94).
-->

<!-- Parameter E n t i t i e s -->

<!ENTITY % head.misc "SCRIPTISTYLE)METAILINK1' -- repeatable head elements -->
<!ENTITY % heading "Hl lH2 1H3 1H41H51H6">

<!ENTITY % l i s t "UL I OL I DIR 1 MENU">

<!ENTITY % preformatted "PRE I XMP I LISTING",

11s
<!ENTITY % preformatted "PRE",

*!ENTITY % I S O l a t l PUBLIC
"IS0 8879-1986//ENTITIES Added L a t i n l//EN//HTML">

<!ENTITY amp CDATA "8138;" -- ampersand -->

<!ENTITY g t CDATA "8162;" --
greater than -->
<!ENTITYlt CDATA"8160;" --lessthan -->

<!ENTITY % f o n t "TT I II B I U I STRIKE I BIG I SMALL I SUB I SUPM>

<!ENTITY % phrase "EM I STRONG I DFN I CODE ( SAMP I KBD I VAR I CITEM>

<!ENTITY 4 special "A I IMG I APPLET I FONT 1 BASEFONT I BR I SCRIPT I MAP1'>

<!ENTITY % form "INPUT I SELECT I TEXTAREAM>
<!ENTITY % t e x t "IPCDATA I %font I %phrase I %special I %formm>

<!-- there are also 16 widely known c o l o r names although

the r e s u l t i n g colors are implementation dependent:

aqua, black, blue, fuchsia. gray, green. lime, maroon,

navy, o l i v e , purple, red. s i l v e r , t e a l , white, and yellow
 These colors were o r i g i n a l l y picked as being the standard
16 colors supported w i t h the Windows VGA p a l e t t e .
- ->
<!ELEMENT FONT --
(%text)* -- l o c a l change t o f o n t -->
<! ATTLIST FONT
size CDATA +IMPLIED -- [+Inn e.g. size="+l", size=4 --
color
>
CDATA +IMPLIED -- lRRGGBB i n hex, e.g. red: color='+FF0000" --
<!ELEMENT BASEFONT - 0 EMPTY -- base f o n t s i z e ( 1 t o 7)-->
<!ATTLIST BASEFONT
size
>
CDATA +IMPLIED -- e.g. size=3 --
<!ELEMENT BR - 0 EMPTY -- forced l i n e break -->
<!ATTLIST BR
--
c l e a r ( l e f t l a l l l r i g h t l n o n e ) none
>
control o f t e x t flow --

%text character l e v e l elements and t e x t s t r i n g s

%f
1ow block-1 ike elements e.g. paragraphs and 1i s t s
%bodytext as %flow plus headers HI-H6 and ADDRESS
-->

<!ENTITY % block
P % l i s t I %preformatted I DL DIV Ci!TER
BLdcrguorr I row 1 ISINDEX 1 H I TA LE
A 1 1
<!-- %flow i s used f o r DD and L I -->
<!ENTITY % f l o w "(%text I %block)*">

<!ENTITY % c o l o r "CDATA" -- a c o l o r specification: +HHHHHH @@ d e t a i l s ? -->

<!ENTITY % body-color-attrs "
bgcol o r % c o l o r +IMPLIED
t e x t %colo r +IMPLIED
1i n k %color +IMPLIED
v l i n k %color +IMPLIED
a1 i n k %color +IMPLIED
">

<!ELEMENT BODY 0 0 %body.content>

<!ATTLIST BODY
background WRL +IMPLIED --
texture t i l e f o r document background --
~body-color-attrs; --
bgcolor, t e x t , l i n k , ~ l i n k , a l i n k ---
<!ENTITY % address.content "((%text;) I P)*">
<!ELEMENT ADDRESS - - taddress .content>

<!-- CENTER i s a shorthand f o r DIV w i t h ALIGN=CENTER -->

< I ELEMENT center --
%body.content>
<!ELEMENT A -- ( % t e x t ) * -(A)>
<!ATTLIST A
name CDATA #IMPLIED -- named l i n k end --
href %URL #IMPLIED -- URL f o r l i n k e d resource --
re1 CDATA #IMPLIED -- fomard l i n k t w e s --
rev CDATA #IMPLIED -- reverse l i n k tybes --
title
>
CDATA #IMPLIED -- advisory t i t l e s t r i n g --

<!-- These can be placed i n t h e same document o r grouped i n a

separate document although t h i s i s n ' t y e t widely supported -->
<!ENTITY % SHAPE " ( r e c t 1 c i r c l e l p o l y) ">
<!ENTITY % COORDS "CDATA" -- c o m a separated l i s t o f numbers -->
<! ELEMENT MAP - - (AREA)*>
<!ATTLIST MAP
name CDATA #IMPLIED
>

<!ELEMENT AREA - 0 EMPTY>

<!ATTLIST AREA
shape %SHAPE r e c t
coords %COORDS (IMPLIED -- defines coordinates f o r shape --
href WRL #IMPLIED -- --
t h i s r e g i o n a c t s as h y p e r t e x t l i n k
nohref (nohref) #IMPLIED -- t h i s r e o i o n has no a c t i o n --
alt ' ~ D A T A . #REQUIRED -- needed f o r non-graphical user agents --
>

<!ENTITY % Types "CDATA"

-- See I n t e r n e t D r a f t : draft-ietf-html-relrev-00.txt
LINK has been p a r t o f HTML s i n c e t h e e a r l y days
although few browsers as y e t t a k e advantage o f i t .
R e l a t i o n s h i p values can be used i n p r i n c i p l e :
f o r document s p e c i f i c toolbars/menus when used
w i t h t h e LINK element i n t h e document head:
t o l i n k t o a separate s t y l e sheet
t o make a l i n k t o a s c r i p t
by s t y l e s h e e t s t o c o n t r o l how c o l l e c t i o n s o f
html nodes a r e rendered i n t o p r i n t e d documents
t o make a l i n k t o a p r i n t a b l e v e r s i o n o f t h i s document
e.g. a p o s t s c r i p t o r p d f v e r s i o n

<!ELEMENT LINK - 0
<!ATTLIST LINK
href %URL #IMPLIED -- URL f o r l i n k e d resource --
re1 %Types #IMPLIED -- f o m a r d l i n k types --
rev % ~ ~ #IMPLIED
b e ~ -- reverse l i n k types --
title
>
CDATA #IMPLIED -- advisory t i t l e s t r i n g --

<!ENTITY % Length "CDATA" -- nn f o r p i x e l s o r nn% f o r percentage l e n g t h -->

<!ENTITY % P i x e l s "NUMBER" -- i n t e g e r representing l e n g t h i n p i x e l s -->
< ! - - Suggested w i d t h s are used f o r n e g o t i a t i n g image s i z e
w i t h t h e module r e s p o n s i b l e f o r p a i n t i n g t h e image.
a l i g n z l e f t o r r i g h t cause image t o f l o a t t o margin
and f o r subsequent t e x t t o wrap around image -->
<!ENTITY % I A l i g n " (top(middlelbottomlleftlright)">
<!ELEMENT IMG - 0 EMPTY -- Embedded image -->
<!ATTLIST IMG
src %URL #REQUIRED -- URL o f image t o embed --
alt CDATA #IMPLIED -- f o r d i s p l a y i n p l a c e o f image --
a1 ign % IA1 ign #IMPLIED -- v e r t i c a l o r h o r i z o n t a l alignment --
height %Pixels #IMPLIED -- suggested h e i g h t i n p i x e l s --
width %Pixels #IMPLIED -- suggested w i d t h i n p i x e l s --
border % P i x e ls #IMPLIED -- suggested l i n k border w i d t h --
hspace %Pixels #IMPLIED -- suggested h o r i z o n t a l g u t t e r --
vspace %Pixels #IMPLIED -- suggested v e r t i c a l g u t t e r --
usemap %URL #IMPLIED -- use c l i e n t - s i d e image map --
ismap
>
( i smap) #IMPLIED -- use server image map --

< ! - - USEMAP p o i n t s t o a MAP element which may be i n t h i s document

o r an e x t e r n a l document, although t h e l a t t e r i s n o t w i d e l y supported -->
<I--=================== Java APPLET t a g ......................................
<!--
T h i s t a g i s supported by a l l Java enabled browsers. Applet resources
( i n c l u d i n g t h e i r classes) a r e n o r m a l l y loaded r e l a t i v e t o t h e document
URL ( o r <BASE> element i f i t i s defined). The CODEBASE a t t r i b u t e i s used
t o change t h i s d e f a u l t behavior. I f t h e CODEBASE a t t r i b u t e i s defined then
i t s p e c i f i e s a d i f f e r e n t l o c a t i o n t o f i n d applet resources. The v a l u e
can be an a b s o l u t e URL o r a r e l a t i v e URL. The absolute URL i s used as i s
w i t h o u t m o d i f i c a t i o n and i s n o t e f f e c t e d by t h e documents <BASE> element.
When t h e codebase a t t r i b u t e i s r e l a t i v e . then i t i s r e l a t i v e t o t h e
-->
document URL ( o r <BASE> t a g i f defined) .
<!ELEMENT APPLET - -
(PARAM I %text)*>
<!ATTLIST APPLET
codebase %URL #IMPLIED -- code base --
code CDATA #REQUIRED -- class f i l e --
alt CDATA #IMPLIED -- f o r d i s p l a y i n place o f applet --
name CDATA #IMPLIED -- a p p l e t name --
width % P i x e l s #REQUIRED -- suggested w i d t h i n p i x e l s --
height % P i x e l s #REQUIRED -- suggested h e i g h t i n p i x e l s --
align % I A l i g n #IMPLIED -- v e r t i c a l o r h o r i z o n t a l alignment --
hspace % P i x e l s #IMPLIED -- suggested h o r i z o n t a l g u t t e r --
vspace % P i x e l s #IMPLIED -- suggested v e r t i c a l g u t t e r --
>

<!'ELEMENTPARAM - o EMPTY>
<!ATTLIST PARAM
name NMTOKEN #REQUIRED -- The name o f t h e parameter --
v a l u e CDATA #IMPLIED -- The value o f t h e parameter --
>

<! --
Here i s an example:

<appl e t codebase="appl ets/NervousText"

code=NcrvousText . c l ass
wi dth=300
height=50>
<param name=text v a l ue="Java i s Cool !">
<img s r c = s o r r y . g i f a l t = " T h i s l o o k s b e t t e r w i t h Java supportu>
</appl e t >
-->

<!ELEMENT HR - 0 EMPTY>
<!ATTLIST HR
a1 i g n ( l e f t ) r i g h t l c e n t e r ) #IMPLIED
noshade (noshade) #IMPLIED
 s i z e %Pixels #IMPLIED
width %Length #IMPLIED
>
....................... P~~~~~~~~~====IE=~D==S====II===~I~=II=I~===========-->

<!ELEMENT P - 0 (%text)*>
<!ATTLIST P
a1 i g n ( l e f t ( c e n t e r l r i g h t ) #IMPLIED
>

<!--
There are s i x l e v e l s o f headers from H1 (the most important)
t o H6 (the l e a s t important).
- ->
<!ELEMENT ( %heading )
<!ATTLIST ( %heading
-- (%text ;)*>
a1 i g n ( l e f t /center ] r i g h t ) #IMPLIED

<!-- excludes images and changes i n f o n t s i z e -->

<!ENTITY % pre.exc1 usion "1MG)BIGISMALL1SUB ISUP1FONTu>
<!ELEMENT PRE --
(%text)* -(%pre.exclusion)>
<!ATTLIST PRE
width NUMBER #implied
>
--
i s t h i s widely supported? --

<!ENTITY % l i t e r a l "CDATA'
--
h i s t o r i c a l , non-confoni ng parsing mode where
t h e o n l y markup signal i s the end tag
in full
- ->
<!ELEMENT (XMPILISTING) %l --
it e r a l a
<!ELEMENT PLAINTEXT 0 %l -
iteral,

<!ELEMENT BLOCKQUOTE -- Ibody.content>

<I--
HTML 3.2 allows you t o control the sequence number f o r ordered 1i s t s .
You can set the sequence number w i t h the START and VALUE a t t r i b u t e s .
The TYPE a t t r i b u t e may be used t o specify the rendering o f ordered
and unordered 1ists.
-->

<I-- definition l i s t s - DT f o r term, DD f o r i t s d e f i n i t i o n -->

<!ELEMENT DL --
(DT IDD)+>
<!ATTLIST DL
compact (compact) #IMPLIED
>
-- more compact s t y l e --
<!-- Ordered l i s t s OL, and unordered l i s t s UL -->
<!ELEMENT (OLIUL) -
- (LI)+>
<!--
Numbering sty1 e
1
a
arabic numbers
lower alpha
1. 2. 3.
a, b. c,
....
..
A upper alpha A, 6, C!.:..
i
I
lower roman
upper roman
i, ii, 1 1 1 ,
I. 11, 111,
...
...
The s t y l e i s applied t o the sequence number which by d e f a u l t
i s reset t o 1 f o r the f i r s t l i s t item i n an ordered l i s t .
This can't be expressed d i r e c t l y i n SGML due t o case folding.
-->

<!ENTITY % OLStyle "CDATA" -- constrained to: [ l ( a J A l i1 I] -->

<!ATTLIST OL --
ordered l i s t s --
type
start
WLStyle #IMPLIED
NUMBER #IMPLIED
--
-- numbering s t y l e --
s t a r t i n g sequence number --
compact (compact)
>
#IMPLIED -- reduced i n t e r i t e m spacing --
<!-- b u l l e t s t y l e s -->
<!ENTITY % ULStyle "disclsquarelcircle">
<!ATTLIST UL --
unordered l i s t s --
type (%ULStyle) #IMPLIED -- bullet style --
compact (compact)
>
#IMPLIED -- reduced i n t e r i t e m spacing --
<!ELEMENT (DIRIMENU) - -
(LI)+ -(%block)>
<!ATTLIST DIR
compact (compact) #IMPLIED
>
<! ATTLIST MENU
compact (compact) #IMPLIED
>
<!-- <DIR> Directory 1i s t
*! --<DIR COMPACT> Compact l i s t s t y l e
<!-- 4!ENU> Menu l i s t
<!--~ENuCOMPACT> Compactliststyle
<I-- The type a t t r i b u t e can be used t o change the b u l l e t s t y l e
i n unordered l i s t s and the numbering s t y l e i n ordered 1i s t s -->
<!ENTITY % L I S t y l e "CDATA" -- constrained t o : '(%ULStyle(%iILStyle)" -->
<!ELEMENT L I -
0 %flow --
l i s t i t e m -->
<!ATTLIST L I
type %LIStyle #IMPLIED -- l i s t item s t y l e --
value
>
NUMBER #IMPLIED -- reset sequence number --

<! ATTLIST FORM

a c t i o n %URL #IMPLIED --
server-side form handler --
method (SHTTP-Method) GET --
see HTTP s p e c i f i c a t i o n --
enctype . %Content-~ype; 'appl i c a t ion/~-&-form-urlencoded"
>
504 Apdndice D: L a D72) de HTML 32

<!ENTITY :, InputType
(TEXT I PASSWORD I CHECKBOX I RADIO I SUBMIT

<!ELEMENT INPUT - 0 EMPTY>

<!ATTLIST INPUT
t y p e %InputType TEXT -- what k i n d o f widget i s needed --
name CDATA #IMPLIED --
r e q u i r e d f o r a l l b u t submit and r e s e t --
value CDATA #IMPLIED --
r e q u i r e d f o r r a d i o and checkboxes --
checked (checked) #IMPLIED -- f o r r a d i o buttons and check boxes --
s i z e CDATA #IMPLIED --
s p e c i f i c t o each type o f f i e l d --
maxlength NUMBER #IMPLIED -- max chars allowed i n t e x t f i e l d s --
src %URL #IMPLIED --
f o r f i e l d s w i t h background images --
a1 i g n % I A li g n #IMPLIED --
v e r t i c a l o r h o r i z o n t a l alignment --
>

<!ELEMENT SELECT - -
(OPTION+)>
<! ATTLIST SELECT
name CDATA #REQUIRED
s i z e NUMBER #IMPLIED
m u l t i p l e ( m u l t i p l e ) #IMPLIED
>

<!ELEMENT OPTION - 0 (#PCDATA)*>

<!ATTLIST OPTION
s e l e c t e d (selected) #IMPLIED
value CDATA #IMPLIED --
d e f a u l t s t o element content --
>

<!-- M u l t i - l i n e t e x t i n p u t f i e l d . -->

<!ELEMENT TEXTAREA -
- (#PCDATA)*>
<!ATTLIST TEXTAREA
name CDATA #REQUIRED
rows NUMBER #REQUIRED
c o l s NUMBER #REQUIRED
>

<!-- Widely deployed subset o f t h e f u l l t a b l e standard. see RFC 1942

e.g. a t http://www. i c s . u c i .edu/pub/ietf/html/rfc1942.txt -->

<!-- h o r i z o n t a l placement o f t a b l e r e l a t i v e t o window -->

<!ENTITY % Where " ( l e f t ( c e n t e r l r i g h t ) >

<!-- h o r i z o n t a l a1 ignment a t t r i b u t e s f o r c e l l contents -->

<!ENTITY % c e l l . h a l i g n
"a1 i g n ( l e f t l c e n t e r l r i g h t ) #IMPLIED"
>

<!-- v e r t i c a l a1 ignment a t t r i b u t e s f o r c e l l contents -->

<!ENTITY % c e l l .val i g n
"valign (toplmiddle(bottom) #IMPLIEDN
>

<!ELEMENT t a b l e --
(ca t i o n ? . tr+)>
<!ELEMENT tr -
o (thltdP*>
I! ELEMENT ( t h 1 t d ) - 0 %body.content>
<!ATTLIST tab1 e -- t a b l e element --
align Where; #IMPLIED -- t a b l e p o s i t i o n r e l a t i v e t o window --
width %Length #IMPLIED -- t a b l e w i d t h r e l a t i v e t o window --
border %Pixels #IMPLIED -- c o n t r o l s frame w i d t h around t a b l e --
c e l l s p a c i n g %Pixels #IMPLIED -- spacing between c e l l s --
eel l p a d d i n g %Pixels
>
#IMPLIED -- spacing w i t h i n c e l l s --
Awndice D: La DTD de W12HL 3.2 505

<!ELEMENT CAPTION - - (%text;)* -- t a b l e o r f i g u r e caption -->

<! ATTLIST CAPTION
a1 i g n (top1 bottom) #IMPLIED
>

<!ATTLIST tr -- t a b l e row --
% c e l l .ha1 ign; -- h o r i z o n t a l alignment i n c e l l s --
% c e l l.val ign;
>
-- v e r t i c a l alignment i n c e l l s --
<!ATTLIST (thltd) -- header o r data c e l l --
nowrap (nowrap) #IMPLIED -- suppress word wrap --
rowspan NUMBER 1 -- number o f rows spanned by c e l l --
c o l span NUMBER 1 -- number o f c o l s spanned by c e l l --
% c e l l .ha1 ign; -- h o r i z o n t a l alignment i n c e l l --
% c e l l. v a l i g n ; -- v e r t i c a l a1 ignment i n c e l l --
width %Pixels #IMPLIED -- suggested w i d t h f o r c e l l --
h e i g h t %Pixels
>
#IMPLIED -- suggested h e i g h t f o r c e l l --

<!-- %head.misc d e f i n e d e a r l i e r on as "SCRIPTISTYLE(METAIL1NK" -->

<!ENTITY % head.content "TITLE & ISINDEX? & BASE?">

<!ELEMENT HEAD 0 0 (%head.content) + ( % h e a d m i x ) >

<!ELEMENT TITLE - - (#PCDATA)* -(%head.misc)

-- The TITLE element i s n o t considered p a r t o f t h e f l o w o f t e x t .
I t should be displayed, f o r example as t h e page header o r
window t i t l e .
- ->
<!ELEMENT ISINDEX -
0 EMPTY>
<!ATTLIST ISINDEX
prompt CDATA #IMPLIED -- prompt message -->
<!--
The BASE element g i v e s an absolute URL f o r dereferencing r e l a t i v e
URLs, e.g.

The image i s deferenced t o

I n t h e absence o f a BASE element t h e document URL should be used.

Note t h a t t h i s i s n o t necessarily t h e same as t h e URL used t o
request t h e document, as t h e base URL may be overridden by an HTTP
header accompanying the document.
-->

<!ELEMENT BASE - 0 EMPTY>

<!ATTLIST BASE
h r e f %URL #REQUIRED
>

<!ELEMENT META - 0 EMPTY --

Generic Metainfonnation -->
<!ATTLIST META
h t t p - e q u i v NAME #IMPLIED --
HTTP response header name --
name NAME #IMPLIED --
metainfonnation name --
content CDATA #REQUIRED -- associated i n f o n a t i o n --
>
<!-- SCRIPT/STYLE a r e p l a c e holders f o r t r a n s i t i o n t o next v e r s i o n o f HTML -->

<!ELEMENT STYLE -- CDATA -- placeholder f o r s t y l e i n f o -->

<!ELEMENT SCRIPT -- CDATA -- placeholder f o r s c r i p t statements -->
<!-- ELEMENT STYLE -- (IPCDATA)' -(%head.misc) -- s t y l e i n f o -->
<!-- ELEMENT SCRIPT -- (#PCDATA)* -(%headmix) -- s c r i p t statements -->

<!ENTITY % v e r s i o n . a t t r "VERSION CDATA #FIXED 'SHTML.Version;'.>

<! [ %HTML. Deprecated [

<!ENTITY S html .content "HEAD. BODY. PLAINTEXT?">
11.
<!ENTITY S html.content 'HEAD, BODY">

<!ELEMENT HTML 0 0 (Imtml .content)>

<!ATTLIST HTML
%version.attr: >
 Entidades de caracter

La siguiente tabla rerine las entidades de cadcter definidas por el estindar, propuestas y
varias no del estandar, pero en general todas soportadas por HTML.
Los nombres de entidad, si se definen, aparecen para sus respectivos caracteres y pueden
utilizarse en la secuencia de entidad de caracter de HTML &name; a fin de definir cualquier
caracter que deba mostrar el navegador. De otro modo, o de forma alternativa para caracte-
res nombrados, utilice el valor numerico de tres digitos para el cadcter en la secuencia
&#nnn; a fin de definir una entidad de cadcter de HTML en especial. Sin embargo, 10s
caracteres reales puede o no mostrarlos el navegador, dependiendo de la plataforma de
c6mputo y de la fuente que seleccion6 el usuario para ver paginas escritas con HTML.
No todos 10s 256 caracteres del conjunto de caracteres de la I S 0 aparecen en la tabla. Los
que se han omitido no 10s reconoce el navegador como entidades nombradas o numericas.
Para cerciorarse de que sus documentos cumplen con el eskindar de HTML 3.2, utilice s61o
las entidades de cadcter numeradas cuya columna de conformidad este en blanco. Los
caracteres cuya columna de conformidad contenga una "P" (propuesta) generalmente son
soportados por 10s navegadores actuales, aunque no Sean parte del estandar de HTML.
Desafie la conformidad y utilice las entidades " N , no estiindar.
Entidad
nombrada Desctlpci6n Conformidad
Tabulador horizontal
Salto d e linea
Retorno d e c a m
Espacio
Signo d e admiracidn
Comillas
Signo d e ndmero
Entidad Entidad
numOrka nombrada Descnlpcih Conformidad
$ Signo d e dinero
)/o Signo d e porcentaje
b Ampersand
I
Ap6strofo
( Parentesis izquierdo
1 Parentesis derecho
8
Asterisco
+ Signo d e suma
Coma
Gui6n
Punto
/ Diagonal
0-9 Digitos del 0 a1 9
Dos puntos
Punto y coma
< Menor que
= Signo d e igual
> Mayor que
? Signo d e interrogaci6n
@ Arroba
A-Z k t r a s de la A a la Z
I Parentesis cuadrado iz-
quierdo
\ Diagonal invertida
I Parentesis cuadrado dere-
cho
A Signo d e intercalaci6n
(caret)
- Gui6n de subrayado
Acento grave
a-z k t r a s d e la a a la z
( Llave izquierda
I Barra vertical
1 Llave derecha
Tilde

f Florin
Comillas derechas
Entidad
nombrada Descripcih Conformidad
Elipsis
Daga
Doble daga
Acento circunflejo
Percentil

Signo menor que

OE maflscula ligada
ApBstrofo izquierdo
ApBstrofo derecho
Comillas izquierdas
Comillas derechas
Vifieta d e bala
Gui6n
Raya

Marca comercial

Signo mayor que

oe minliscula ligada
Y maflscula, con dieresis
Espacio sin separaci6n
Signo d e admiraci6n d e
apertura
Signo d e centavos
Signo d e libra esterlina
Signo general monetario
Signo d e yen
Barra vertical
Signo d e secci6n
Dieresis (umlaut)
Derechos reservados
Ordinal femenino
Comillas francesas izquier-
das
Signo d e negacidn (no)
Gui6n suave
Entidad Entidad
num6rica nombrada Conformidad
Marca registrada
Acento macron
Signo d e grados
MPs-menos
Superindice 2
Superindice 3
Acento agudo
Signo de micras (letra mu
griega)
Signo d e pPrrafo (calder6n)
Punto medio
Cedilla
Supedndice 1
Ordinal masculino
Comillas francesas dere-
chas
Fracci6n de un cuarto
Fracci6n de un medio
Fracci6n de tres cuartos
Signo d e interrogaci6n d e
apertura
A mayliscula con acento
grave
A mayliscula con acento
agudo
A mayhcula con acento
circunflejo
A mayliscula con tilde
A mayliscula con diCresis
A mayliscula con circulo
AE mayliscula, ligada
C mayliscula con cedilla
E mayliscula con acento
grave
E mayliscula con acento
agudo
E mayliscula con acento
circunflejo
E mayliscula con dieresis
I mayliscula con acento
grave
I mayliscula con acento
agudo
I mayliscula con acento cir-
cunflejo
I maydscula con dieresis
Entldad Entldad
nurnerica nombrada Descripci6n Conformidad
&#208; &ETH; Eth mayliscula, Islandia
&#209; &Ntilde; N mayliscula con tilde (N
espaiiola)
&#210; &Ograve; 0 mayliscula con acento
grave
&#211; &Oacute; 0 mayliscula con acento
agudo
&#212; &Ocirc; 0 mayliscula con acento
circunflejo
&#213; &Otilde; 0 mayliscula con tilde
&#214; &Ouml; 0 mayliscula con diCresis
&#215; &times; Signo d e multiplicaci6n
&#216; &Oslash; 0 mayliscula cruzada
&#217; &Ugrave; U mayliscula con acento
grave
&#218; &Uacute; U mayliscula con acento
agudo
&#219; &Ucirc; U mayliscula con acento
circunflejo
&#220; &Uuml; U mayliscula con dikresis
&#221; &Yacute; Y mayliscula con acento
agudo
&#222; &THORN; Thorn mayliscula, Islandia
&#223; &szlig; Doble s ligada minliscula,
Alemania
&#224; &agrave; a minliscula con acento
grave
&#225; &aacute; a minliscula con acento
agudo
&#226; &acirc; a minliscula con acento cir-
cunflejo
&#227; &atilde; a minliscula con tilde
&#228; &auml; a minliscula con diCresis
&#229; &aring; a minliscula con circulo
&#230; &aelig; ae minliscula ligada
&#231; &ccedil; c minliscula con cedilla
&#232; &egrave; e minliscula con acento
grave
&#233; &eacute; e minliscula con acento
agudo
&#234; &ecirc; e minliscula con acento
circunflejo
&#235; &euml; e minliscula con diCresis
&#236; &grave; i minliscula con acento
grave
&#237; Macute; i minliscula con acento
agudo
&+238; &icirc; i minliscula con acento cir-
cunflejo
&#239; &iuml; i minliscula con dieresis
&#240; &eth; eth minliscula, Islandia
512 AphdLce E: Entfdudes de carMer

Entidad
nombrada I Simbolo Conformidad
n minliscula con tilde (A
espaAola)
o mindscula con acento
grave
o mindscula con acento
agudo
o minliscula con acento
circunflejo
o minliscula con tilde
o minliscula con dieresis
Signo d e divisidn
o minliscula cruzada
u minliscula con acento
grave
u minliscula con acento
agudo
u minliscula con acento
circunflejo
u minliscula con dieresis
y minliscula, acento agudo
thorn minliscula, Islandia
y minliscula con dieresis
 Valores y
nombres de color

En Navigator d e Netscape e Internet Explorer puede cambiar el color de distintos elementos

de un documento, incluyendo (lista parcial; vea el texto principal para todos 10s casos):

Elemento I EUqueta y stributo asociados

Fondo del documento <body bgcol or=col or>
Todo el texto del documento <body text=col or>
Ligas activas <body a1 i nk=col or>
Ligas visitadas <body vl i nk=col o r >
Ligas normales <body 1 i nk=col or>
PequeAa parte del texto <font color=col or>
Celdas d e tablas <table-col or>
<tr bgcol or=col or>
<td bgcol or=col or>
<th bgcolor=col or>

F.1 Valores de color

En todos 10s casos, debe especificar el valor del color como un nlimero hexadecimal de seis
digitos, que representan 10s componentes rojo, verde y azul (RGB, Red, Green, Blue) del
color. Los primeros dos digitos corresponden a1 componente rojo del color, 10s dos siguien-
tes a1 componente verde y 10s dos liltimos a1 azul. Un valor de 00 corresponde a un compo-
nente que esti desactivado por completo; un valor de FF (255) corresponde a1 componente
activado e n su totalidad. De este modo, el rojo intenso es FFOOOO; el verde intenso es
00FF00; y el azul intenso e s 0000FF. Otros colores primarios son la mezcla de dos compo-
nentes, como el amarillo (FFFFOO), magenta (FFOOFF) y el cyan (OOFFFF). El blanco (FFFFFF)
y el negro (000000) tambiCn son fsciles de deducir.
514 Apdndice F: Valows y n o m b w s d e color

Usted utiliza estos valores en una etiqueta sustituyendo el color con la tripleta RGB, prece-
dida por un signo de ndmero (#). Asi, para hacer que todas las ligas visitadas se desplieguen
e n color magenta, utilice esta etiqueta de cuerpo:
<body vlink="#FFOOFF">

F.2 Nombres de color

Por desgracia, determinar el valor hexadecimal de 10s colores m4s sofisticados como "papa-
ya madura" o "blanco navajo" es muy dificil. Puede volverse loco a1 intentar ajustar la
tripleta RGB de un color d e mod0 que el tono sea el correcto, e n especial cuando a cada
ajuste debe cargar el documento en el navegador para ver el resultado.
Para hacer la vida m4s f4ci1, el est4ndar de HTML 3.2 define diecisCis nombres de color que
puede utilizar dondequiera que aplique un valor de color numCrico. Por ejemplo, puede
hacer que todas las ligas visitadas aparezcan en color magenta con el siguiente atributo y
valor e n la etiqueta d e cuerpo:

Los nombres de color asi como 10s valores RGB definidos en el esdndar de HTML 3.2 son:
aqua (WOFFFF) gray (#808080) navy (#000080) silver (#.COCOCO)
black (W00000) green (#008000) olive (#808000) teal (W08080)
blue (WOOOFF) lime (MOFF00) purple (#800080) yellow (#FFFFOO)
fuchsia (tFFOOFF) maroon (#800000) red (#FF0000) white (fFFFFFF)
Navigator va m5s a114 del esdndar de HTML 3.2 y soporta 10s varios cientos d e nombres de
color definidos para utilizarse e n el sistema X Window. Observe que estos nombres de color
no pueden tener espacios; la palabra "gray" puede escribirse como "grey" e n cualquier
nombre d e color.
Los colores marcados con un asterisco (') representan e n realidad una familia de colores
numerados del 1 a1 4. Asi, hay e n realidad cuatro variantes de azul (blue), llamadas "bluel",
"blue2", "blue3" y "blue4", junto con el c o m b "blue". Blue1 es el mas claro de 10s cuatro y
blue4 el m4s oscuro. El nombre d e color sin numerar corresponde a1 color con el ndmero 1;
asi, blue y bluel son idCnticos.
Por dltimo, como si esto no fuera suficiente, existen cien variantes de gris (gray y/o grey)
numeradas del 1 a1 100. "Grayl" es el mas oscuro; "gray100" el m4s claro y "gray" est4 muy
cerca d e "gray75".
Los colores soportados por Navigator son:
aliceblue darkturquoise lightseagreen palevioletred'
antiquewhite* darkviolet lightskyblue* papayawhip
aquamarine* deeppink' lightslateblue peachpuff*
F.3 El mapa de color estdndar 515

azure* deepskyblue' lightslategray Per"

beige dimgray lightsteelblue' pink'
bisque' dodgerblue* lightyellow* plum*
black firebrick' limegreen powderblue
blanchedalmond floralwhite linen purple*
blue' forestgreen magenta* red'
blueviolet gainsboro maroon* rosybrown*
brown* ghostwhite mediumaquamarine royalblue*
burlywood' gold' mediumblue saddlebrown
cadetblue* goldenrod' mediumorchid' salmon'
chartreuse* gray mediumpurple* sandybrown
chocolate* green* mediumseagreen seagreen*
coral* greenyellow mediumslateblue seashell*
cornflowerblue honeydew* mediumspringgreen sienna*
cornsilk' hotpink' mediumturquoise skyblue*
cyan* indianred' mediumvioletred slateblue*
darkblue ivory* midnightblue slategray*
darkcyan khaki* mintcream snow*
darkgoldenrod' lavender mistyrose* springgreen*
darkgray lavenderblush* moccasin steelblue*
darkgreen lawngreen navajowhite* tan*
darkkhaki lemonchiffon* navy thistle*
darkmagenta lightblue* navyblue tomato*
darkolivegreen* lightcoral oldlace turquoise*
darkorange* lightcyan* olivedrab' violet
darkorchid' lightgoldenrod' orange* violetred'
darkred lightgoldenrodyellow orangered' wheat*
darksalmon lightgray orchid' white
darkseagreen* lightgreen palegoldenrod whitesmoke
darkslateblue lightpink* palegreen* yellow*
darkslategray* lightsalmon* paleturquoise* yellowgreen

F.3 El mapa de color esthndar

Soportar cientos de nornbres de color y rnillones de tripletas RGB es lindo, pero la realidad
dicta que la rnayoria de 10s usuarios s610 pueden desplegar 256 colores en sus sisternas.
Cuando se enfrenta a un color no definido en este conjunto de 256 colores, el navegador
tiene dos alternativas: convertirlo a uno de 10s colores existentes, o darle rnatiz a partir de
10s colores disponibles en el rnapa de colores.
516 Apkrdfce I? va-s y nombres de color

La conversi6n es fiicil: el color se compara con 10s demPs en el mapa de colores y se

remplaza por el mas parecido. Dar matiz es mPs dificil. Utilizando dos o mas colores del
mapa, el color errPtico se simula combinando diferentes proporciones de 10s colores dispo-
nibles. Visto de cerca, usted veria un patr6n de pixeles alternados que utilizan 10s colores
disponibles. De lejos, 10s pixeles se mezclan para formar un color cercano a1 original.
En general, sus imiigenes se verin mejor si evita tanto la conversi6n como el matiz. La
conversi6n hari que sus colores parezcan "apagados"; el matiz 10s had parecer difusos.
iC6m0 evitar estos problemas? Fiicil: utilice 10s colores del mapa de color estPndar cuando
Cree sus imiigenes.
El mapa de color estandar en realidad tiene 216 valores. Existen seis variantes de rojo, seis
de verde y seis de azul que se combinan en todas las formas posibles para crear estos 216
(6 x 6 x 6) colores. Estas variantes tienen valores de intensidad decimales de 0, 51, 102, 153,
204 y 255, correspondientes a 10s valores hexadecimales 00, 33,66, 99, CC y FF. Los colores
como 003333 (cyan oscuro) y 933999 (gris medio) existen directamente en el mapa de color
y no serPn convertidos o matizados.
Recuerde que muchos de 10s nombres de color extendidos por Navigator no existen en el
mapa de color estiindar y serin convertidos o matizados a un (esperemos) color similar.
Utilizar 10s nombres de color, aunque conveniente, no garantiza que el navegador emplearfi
el color deseado.
Cuando Cree imiigenes, trate de utilizar 10s colores del mapa de color estiindar. Cuando elija
colores para texto, ligas o fondos, asegirese de seleccionarlos del mapa de color estiindar.
Sus piiginas lucirPn mejor y tendriin miis coherencia en 10s distintos navegadores.
Slmbolos accept, atributo (<input>), 315
& (ampersand) para entidades, 23, 45, 416 action, botones de, 318-322
, (coma) en estilos, 260 action, atributo
/ (diagonal) <form>, 301
en etiquetas de termination, 19 <isindex>, 222
en URLs, 181, 185 ActiveX, tecnologia, 395
- (tilde) en URLs, 185 <address>, etiquetas, 9 - 1 0 0
<!-->, etiquetas, 20, 45 Advanced Research Projects Agency (ARPA), 2
" (signo de comillas) ajuste automkico de texto, 125-126
en U U , 181 dentro de celdas de tabla, 353, 358

- para valores de atributo, 41

(sign0 de igualdad) para atributos de etiqueta, 41
? (signo de interrogaci6n) en URLs, 181, 186
(&use tambi6n saltos de linea)
en ireas de forma de texto de lineas mliltiples,
325
# (signo de nlimero) ajuste de palabras (&use ajuste automitico de texto)
en U U , 185 align, atributo
para anclas de nombre, 28, 204 <applet>, 336
para entidades, 23 <caption>, 359
% (signo de porcentaje) para codification d e cadc- <cob, 369
ter, 181 <div>. 56
< (sign0 menor que), 23 <embed>, 404
<h#>, 63
A <hr>, 107
<a>, etiquetas, 27, 151, 197-203 <ifnme>, 386
absbottom, alineacion, 124 < i m p , 29, 121-125
absmiddle, alineaciBn, 124 <marquee>, 147
absoluto <object>, 409
font size, 82-83 <p>, 59
URLs, 26, 195 <spacer>, 159
518 hdice

<table>, 344-345 <applet>, etiquetas, 395-400

<th> y <td>, 355 applets, 392-402
<tr>, 351-352 archive, atributo (<applet>), 397
alineaci6n archivos
capas, 168-170, 177 archivo URL, 189
columnas (vPase diseiio de pigina) binarios, G
con la linea base, 124 carnpos de forrna de seleccion de archivo, 314-
(ukase tambit% align, atributo) 316
en encabezados, 63 HTML (v6ase documentos HTML)
espacios en blanco, 159 Area de mapa de imagen poligonal, 214
formas y, 333 irea de mapa de imigenes rectangulares, 214
imsgenes, 121-125, 126 <area>, etiqueta, 132, 213-217
inferior (&use align, atributo) ireas d e forma de texto de lineas multiples, 324-326
marcos, 386 ireas de mapa de irnigenes circulares, 214
media (vPase align, atributo) ARPA (Advanced Research Projects Agency), 2
propiedades para estilo de texto, 278, 281 atributos HTML (&me etiquetas, HTML)
secciones, 56 audio, 144-146, 152
tablas, 343. 344-345 <bgsound>, etiqueta, 145-146
contenido de celda, 350, 355 (vgase tambit% multimedia)
epigrafe, 359 automatizaci6n, docurnentos, 227-230
renglones, 351-353 autoria (vPase escritura de documentos HTML)
texto, 147
centrado, 94-95 B
pirrafos, 59 <b>, etiquetas, 74
alineacion derecha (&me align, atributo) background, atributo
alineacion izquierda (vPase align, atributo) <body>, 138-139, 142
alineaci6n superior (vhase align, atributo) <layer>, 173
alink, atributo (<body>), 140 <table>, 345
alt, atributo <th> y <td>, 358
<applet>, 397, 400 <base>, etiqueta, 223-225, 3'90
<area>, 214 <basefont>, etiquetas, 79
< i m p , 120 bases, URLs, 26, 223-225
ampersand (&) para entidades, 23, 45, 416 behavior, atributo (<marquee>), 148
anclas (vPanse <a>, etiquetas; hiperligas) below, atributo (<layer>), 170-173
anidaci6n bg, propiedades, atributo (<body>), 140
estilos, 261 bgcolor, atributo
etiquetas, 42 <body>, 137, 142
etiquetas de estilo basadas en contenido, 74
etiquetas de estilo fisicas, 79
<frameset>, etiquetas, 379
listas, 240 <th> y <td>, 358
tablas en formas, 444 <tr>. 352
animaci6n <bgsound>, etiqueta, 145-146
cuadro-por-cuadro, 113 <big>, etiquetas, 75
de texto, 147-151 -blank, objetivo, 389
marco-por-rnarco (GIF), 113 <blink>, etiquetas, 75, 438
apariencia o aspect0 del texto (vPase texto) bloque, citas de, 98-99
aplicaci6n/x-www-form-urlencoded, codificacibn, 302 <blockquote>, etiquetas, 98
aplicaciones, ejecutables, 392-402 bloque, elernentos de, 294
 p~ -

bloques de espacios en blanco, 159 especiales, 23, 45, 101, 182, 507-512
<body>, etiquetas, 40, 52 reservadosho seguros en URLs, 182
errores con, 12 Cascading Style Sheets (Hojas de Estilo en Cascada),
extensiones de color para, 137-142 36, 251-259, 296-297
border, atributo estilos sin etiquetas (<span>), 295
<ernbed>, 404 rnodelo de cuadro rectangular para, 282-284
< i m p , 127-128 propiedades de estilo, 265-294
<object>, 409 referencia dpida, 489-456
<table>, 346, 347 sintaxis de estilo, 259-265
bordercolor, atributo celdas, tabla (&use tablas)
<frame>, 383 cellpadding, atributo (<table>), 347
<table>, 346 cellspacing, atributo (<table>), 347
<th> y <td>, 358 center, atributo (<imp), 126
<tr>, 352 <center>, etiquetas, 94-95
bordercolordark, atributo centrado (&use alineacibn, texto)
<table>, 346 charset, atributo (<rneta>), 229
<th> y <td>, 358 citas bibliogdficas, 68
<tr>, 352 <cite>, etiquetas, 68
bordercolorlight, atributo clases de estilo genericas, 263
<table>, 346 class, atributo, 73, 77
<th> y <td>, 358 <a>, 202
<tr>, 352 <body>, 142
bordes <caption>, 360
irnigenes, 127-128, 193 <dd>, 249
marco, 377, 383 <dir>, 244
propiedades d e estilo, 284-286 <div>, 57
tabla, 346-349, 352, 358 <dl>, 247
botones <dt>, 248
de accidn de forrna, 318-322 <form>, 307
de envio, 319 <h#>, 63
d e radio, 317 <hr>, 108
de rat6n (&use rnanejadores de eventos, <input>, 322
lavascript) <layer>, 176
de restablecimiento (reset), 319 <li>, 239
<br>, etiqueta, 24, 85-88, 160 <marquee>, 151
(&use tambih saltos de linea) cinenu>, 245
<rnulticob, 165
C <ol>, 236
cadena limitrofe, 432 <option>, 330
carnpos de forma ocultos, 322 <P>, 60
carnpos de texto enmascarados, 314 <pre>, 94, 99, 101
capas, 166-178 <select>, 329
<ilayer>, etiquetas, 176-178 <table>, 349
<layer>, etiquetas, 167-176 <textarea>, 326
capitalizacidn (convertir a maylisculas), 280 <th> y <td>, 358
<caption>, etiquetas, 359 <tr>. 353
caracteres < u b , 233
en URLs, 181 classes, estilo, 262-265, 421
entidades para, 23, 45, 101, 182, 507-512 classid, atributo (<object>), 409
clear, atributo (<br>), 86 colspan, atributo (<td> y <th>), 356
clear, propiedad, 287 coma (,) en estilos, 260
clientes, 5 comentarios, 20, 45
clip, atributo (<layer>), 176 <comment>, etiquetas, 44, 46
code, atributo (<applet>), 397 en etiquetas <style>, 257
<code>, etiquetas, 69 compact, atributo
codebase, atributo <dir>, 243
<applet>, 398 <dl>, 247
<object>, 409 <menu>, 245
codetype, atributo (<object>), 409 < o b , 236
codificaci6n < u b , 233
applicatiodx-www-form-urlencoded, 302 compatibilidad (ukase incompatibilidad con
c a m p s de selecci6n de archivos y, 315 navegadores)
caracteres (ukase caracteres especiales) comportamiento alternado (<marquee>), 149
multipadform-data, 303 comportamiento desplazable (<marquee>), 148
multipadmixed, 432 contenido de cuerpo, 52
multipadx-mixed-replace, 433 content, atributo (<meta>), 229, 428
textlcss, 254 contextual( ), 422
text/plain, 304 controls, atributo (<irng>), 135
<cob, etiqueta, 367-369 coords, atributo (<area>), 214
<colgroup>, etiquetas, 366-368 correo electrhico, mailto URL para, 192, 309
color CSS (ukase Cascading Style Sheets)
true color (color verdadero), 447 cuadros de verificacion, 316
color, atributo
<font>, 84 D
<hr>, 108 data, atributo (<object>), 410
colores, 137-144, 513-516 <dd>, etiqueta, 248
borde, 284 declare, atributo (<object>), 410
capa, 173 definicibn, listas de, 245-249
consideraciones de desempefio, 142-144 descarga, retraso en (&me desempeiio)
extensiones de etiqueta <body>, 137-142 desempefio
fondo (&use bgcolor, atributo) applets y, 394
formatos d e archivos grificos y, 112 colores y, 142-144
mapa de color estindar, 515 documentos dinimicos y, 431, 434
mapas de color, 447 imigenes y, 115-117, 143
marcos, 383 lowsrc, atributo ( < i m p ) para, 119
matizados, 448 mapas de imagen del lado del servidor/cliente, 21 1
propiedades de estilo y, 267, 272, 277 relleno, 129
reglas horizontales, 108 texto, 115
tabla, 345-346, 352, 358 deslizable, comportamiento (<marquee>), 148
texto, 84, 140 desplazamiento
de hiperligas, 140 imhgenes fijas contra, 140
marquesina, 149 marcos y, 382
transparencia, 113 <marquee>, etiquetas y, 147-151
valores hexadecimales para, 513 <dfn>, etiquetas, 70
cols, atributo diagonal (/)
<cob, 376 en etiquetas de terminaci61-1,19
<multicol>, 162 en URLs, 181, 185
<textarea>, 324 <dir>, etiquetas, 242-244
direcciones, 99-100 imhgenes en (&use impgenes)
direcciones IP, 183 ligando (Vease hiperligas), 203
direction, atributo (<marquee>), 149 marcos en (&use marcos)
disco, vifietas de, 238 objetos incrustados, 402-41 1
disefio paginas de colurnnas mliltiples, 439-441
de columnas, 439-441 relaciones entre, 223-227
areas de forma de texto de lineas mliltiples, rastreables, 32, 220-222
324 secciones de, 54-61, 109
gmpos de colurnnas en tabla, 365-370 tablas en (&use tablas)
rnarcos, 376 titulo de, 20, 49-51, 63
tablas, 356 (&use f a m b i h navegadores web)
texto, 161-166 dominios, 4, 26
(&me fambi6n tablas) <dt>, etiquetas, 32, 247
de formas, 444-445 DTD para HTML, 46, 451, 497-506
de interfaz de usuario, 332 dynsrc, atributo (<irng>), 134
de pdgina, 9 , 21
capas, 166-178 E
colurnnas, 161-166 editores de texto, 13, 16
con colurnnas mliltiples, 439-441 ejecutables, aplicaciones, 392-402
espacio en blanco (&me espacio en blanco) elernentos de opcidn mfiltiple, 327-330
etiquetas HTML para, 85-97 <ern>, etiquetas, 70
texto ajustado autornaticamente, 56, 125-126 <embed>, etiquetas, 147, 403-406
<div>, etiquetas, 55-57 en linea
<dl>, etiquetas, 32, 246247 capas, 176-178
documentacidn elernentos, 294
<meta>, etiqueta para, 227-229 estilos, 253, 419
referencia r5pida de etiquetas HTML, 463-488 irnigenes, 29
docurnentos rnarcos, 385-387
autornatizacion de, 227-230 referencias, 206-208
corno capas, 175 encabezados, 25, 61-66
dinamicos, 425-435 encabezados encuadrados, 441
enviados por el servidor, 432-435 encabezados laterales de tablas, 441-444
(&use tambien tipos de contenido) espaciadores verticales con, 158
extraidos por el cliente, 427-431 irnhgenes en, 66
HTML (&use docurnentos HTML) reglas en, 109
incrustados, 152 tabla, 360
docurnentos HTML tamafio de texto y, 64
autornatizacidn de docurnentos, 227-230 enctype, atributo
boilerplates (plantillas) para, 437 <form>, 302
colores en (&use colores) <input>, carnpos de seleccidn de archivos y, 315
dinirnico, 425-435 encuadrados, encabezados, 441
disefio de pdgina de, 9 , 21 ending, etiquetas, 19, 42-43
disefio para las audiencias, 437 enfasis, etiquetas p a n
encabezados en (&use encabezados) <b>,74
estilos a nivel de docurnento, 253, 297 <blink>, 75
estilos para, 29&297 <dfn>, 70
estructura de, 19-21, 38-40, 48-53 <ern>, 70
formas (&use forrnas) <i>, 76
home pages (paginas de inicio), 5, 28, 185 <strong>, 71
entidades, 23, 45, 101, 182, 507-512 propiedades CSS para, 265-294
entidades, JavaScript, 416 propiedades JSS para, 423
entrelazado, 112 etiquetas de estilo basadas en el contenido, 22, 44-
errores ("bugs") 46, 67-74
en extensiones HTML, 12 etiquetas de estilo fisicas, 23, 67, 74-79
etiquetas multiples <body>, 12 etiquetas estructurales, 24
< i m p , etiqueta, atributos heightlwidth, 1 9 etiquetas HTML, 18, 40-44
escritura de applets, 394 anidacibn, 42
escritura de documentos HTML atributos para, 40
aplicaci6n de estilos, 296297 estilo basado en contenido, 22, 44-46, 67-74
disefio de interfaz de usuario, 332 estilo fisico, 23, 67, 74-79
eleccion de un titulo, 50 estilos para, 252-265, 2%-297
empleando formas, 330-334 estilos sin etiquetas, 295
programacidn de formas, 306, 335-340 gramitica para, 454-462
ligando, 205-209 omitidas, 43
mapas de imagen y, 219 redundantes, 43
sitios importantes para, 15 referencia dpida para, 463-488
software para, 13, 16 eventos de ratdn (&anse mapas de imagen sensibles
uso de las listas, 249 al clic del rat6n; manejadores de eventos,
u s d e 10s marcos, 387 JavaScript)
espaciado ( k a m e bordes; espacio en blanco; mirge- extensiones, HTML, 7, 11-13
nes)
espacio ( u h e espacio en blanco) P
espacio en blanco, 39, 156-161 Face, atributo (<font>), 84
alrededor de dreas de marquesina, 150 familia de fuentes, 269
alrededor de celdas de tabla, 347 File Transfer Protocol (&me FTP)
alrededor de imigenes, 1 9 float, propiedad, 287
alrededor de reglas, 104 fondo, 143
alrededor de tablas, 349 audio, 144-146
bloques de, 156161 capas (YPase capas)
entre columnas (gutters), 163 color ( k a s e bgcolor, atributo)
etiquetas HTML para, 85-97 consideraciones de desempefio de, 143
< i m p , etiqueta para, 160-161 imigenes (&me background, atributo)
marcos y, 377 propiedades de estilo para, 272-277
mdrgenes (&me tambit% transparencia)
marcos, 383 formas, 33, 299-310
texto, 140 dreas de texto de lineas mliltiples, 324-326
pirrafos (&ase pirrafos) con tablas anidadas, 444
propiedades de estilo de texto para, 279, 281 disefio fisico de, 333
saltos de linea (YPase saltos de linea) elementos de entrada, 311-324
<spacer>, etiqueta, 156159 elementos d e opci6n mmdple, 327-330
white-space, propiedad, 294 <form>, etiquetas, 33, 300-310
estandarizacidn de HTML, 8, 46, 451, 497-506 mailto URL con, 309
estilos, 252-260, 296297 mejorando el diseiio de, 444-445
a nivel de documento, 253, 297, 419 programaci6n para, 306, 335-340
clases para, 262-265, 421 uso eficiente de, 330-334
contextual, 260-262, 422 formato
mliltiples, 258 codificaci6n (&me codificaci6n)
precedencia de, 258 disefio de forma, 333
 documentos HTML (u6anre diseiio de pigina; <spacer>, 159
hojas de estilo) <table>, 350
<dt>, etiqueta para, 248 <tr>, 356
elementos de lista, 238-240 height, propiedad, 288
imagen, 110-114, 117 herencia, estilos y, 265, 268
frame, atributo (<table>), 346 hidden, atributo (<embed>), 404
frameborder, atributo hiperligas, 3, 25-29, 179
<frame>, 383 colores de texto para, 140
<frameset>, 378 (duse t a m b i h <a>, etiquetas)
FTP (File Transfer Protocol) guias incrustadas, 446
an6nim0, 188 imigenes e, 208
ftp URL, 188 ligando dentro de documentos, 28, 203
obtenci6n de navegadores mediante, 14 mapas d e imagen sensibles a1 clic, 30, 132-133,
fuentes, 79-85 209-219
<basefont>, etiquetas, 79 relaciones entre, 201
color (&use colores) target, atributo e , 391
<font>, etiquetas, 81-85 uso eficiente de, 205-209
propiedades de estilo, 268271 historia
tamario de fuente (wjuse tamaiio del texto) Internet, 2
World Wide Web, 3
C hoias de estilo, 35-37
generador de URL aleatorio, 431 cascada (k Cascading Style Sheets)
GET, mbodo, 305, 336-339 externas, 254-257, 297, 419
GIF (Graphics Interchange Format), 111-114, 117 JavaScript, 4 18-424
GIF, animacirjn, 113 home pages (piginas d e inicio), 5, 28, 185
GIF89a, 447, 448 horizontal
giftrans, utilidad, 448 alineaci6n (&use alineaci6n)
gopher URL, 194 espacio en blanco, I M157
grificos (&use tambikn width, atributo)
color (&use colores) mirgenes, 130, 150
conversi6n a GIF89a, 448 reglas, 25, 103-110
forrnatos, 110-114, 117 <hr>, etiqueta, 25, 103-109
reglas (&use horizontal, reglas) href, atributo
transparentes (&e transparencia) <a>, 198-199
( k a m e t a m b i h imigenes; multimedia) <area>, 215
Graphics Interchange Format (u6use GIF) <base>, 224
guias incrustadas, 446 <link>, 225
gutter, atributo (<multicol>), 163 hspace, atributo
<applet>, 339
H <embed>, 404
<h*>, etiquetas, 25, 61-66 <img>, 130
<head>, etiquetas, 40, 48-51 <marquee>, 150
height, atributo <object>, 409
<applet>, 339 <table>, 349
<embed>, 404 HTML (Hypertext Markup Language), 7-1 I
<iftame>, 387 CSS (&use Cascading Style Sheets)
<img>, 129-130 Document Type Definition, 46, 451, 497-506
<marquee>. 149 documentos en (&use documentos HTML)
<object>, 409 editores d e texto p a n , 13, 16
 etiquetas (vPase etiquetas HTML) marcos, 383
extensiones para, 7, 11-13 scripts (guiones) de JavaScript, 414
gramitica de, 451-462 tablas e , 443
referencia ripida, 463-488 <input>, etiqueta, 311-324
version 3.2, 7, 497-506, xvi-xviii Internet, 1-7
<html>, etiquetas, 47 conexion directa a, 14
HlTP (Hypertext Transfer Protocol), 6 Internet Engineering Task Force (IETF), 8
Redirect, encabezado, 430 Internet Explorer, 134
Refresh, encabezado, 427-429 extensiones de tabla, 360-370
httpequiv, atributo (<meta>), 229, 427 tecnologia Active e, 395
http URL, 182-187 Internet Protocol (&use IP)
HyperText Markup Language (&use HTML) IP (Internet Protocol), 4
HyperText Transfer Protocol (&use HlTP) direcciones IP, 183
<isindex>, etiqueta, 32, 220-222, 299
I ismap, atributo (<imp), 30, 132-133, 209
<i>, etiquetas, 76 idlicas (cursivas), 76
id, atributo (<object>), 410 (&use tambi& enfasis, etiquetas para)
identificadores de fragrnento, 28, 185, 204 iteraci6n para acci6n continua, 136, 146,
IETF (Internet Engineering Task Force), 8 149
<ifrarne>, etiquetas, 385-387
ignorar etiquetas HTML, 43 J
<ilayer>, etiquetas, 176178 Java, lenguaje, 395
irnigenes, 29-31, 110-137, 152 (&use t a m b i h applets)
ajuste autornitico de t e a o alrededor de, 125-126 JavaScript, lenguaje, 36, 411-418
(&use t a m b i h multimedia) entidades, 416
alineacion de, 121-125 hojas de estilo USS), 418-424
background-image, propiedad, 273 < i m p , atributos, 133
bordes para, 127-128, 199 javascript, pseud~protocolo,187
botones de irnagen personalizados, 320 rnanejadores de eventos, 133, 200, 307,
claras (&use transparencia) 323, 326, 329, 414-416
de relleno, 129 rnarcos y, 379
desernpefio e, 143 <script>, etiquetas, 412
en encabezados, 66 javascript, pseud*URL, 416
fondo (&use background, atributo) JPEG, formato, 114, 117
formatos para, 110.114, 117 JSS (lavascript Style Sheets), 418-424
< i m p , etiqueta, 29, 117-137
emulacion de espaciadores con, 160-161 K
extensiones de video, 134-137 <kbd>, etiquetas, 71
ligas e , 208
mapas d e irnagen, 30, 132-133, 209-219 L
<area>, etiqueta, 132, 213-217 lang, atributo (<div>), 57
<map>, etiquetas, 132, 212 language, atributo (<script>), 413
para rnarcar elernentos de lista, 291 left, atributo
tamaiio de, 129-130 <ilayer>, 177
transparentes (&a% transparencia) <layer>, 168-170
irnportacion de hojas de estilo externas, 255-257 leftmargin, atributo (<body>), 140
incornpatihilidad con navegadores letter-spacing, propiedad, 277
applets e, 400 < b , etiquetas, 32, 237-240
etiquetas d e estilo e , 258 (&use tam& listas)
ligas mapas de imagen del lado del servidor, 31, 132, 207-
a hojas de estilo externas, 255-257 21 1
incrustadas (ukase hiperligas) mapas de imagen sensibles al clic del rat6n, 30, 132-
lineas en blanco (&me pirrafos) 133, 207-217
line-height, propiedad, 278 marcos, 34, 372-383
link, atributo alineaci6n,
<body>, 140 apenura mriltiple a un mismo tiempo, 450
<link>, etiqueta, 202, 225-227, 255, 257, 417 bordes, 377, 383
listas, 32 colores y, 383
anidacibn, 240 como objetivos, 387-371
con vifietas (&me listas no ordenadas) desplazamiento y, 382
de definition, 2, 245-249 en linea (+frame>, etiquetas), 385-387
de directorio, 242-244 <frame>, etiquetas, 34, 380-383
de hiperligas, 205 (<frameset>), atributo, 378
de menu, 244-245 <frameset>, etiquetas, 34, 47, 53, 375-379
elementos de, 237-240, 274 <noframes>, etiqueta, 383
no ordenadas, 32 margenes
no ordenadas (con vinetas), 231-233, 240 en torno a applets, 399
numeradas (ukase listas ordenadas) marcos y, 383
ordenadas (numeradas), 234-237, 241 propiedades de estilo, 288
propiedades de estilo, 270-293 texto, 140
selection, 327-330 (ukase t a m b i h espacio en blanco)
vifietas personalizadas, 438 marginheight, atributo (<frame>), 383
longitud (uPase tamafio) marginwidth, atributo (<frame>), 383
loop, atributo <marquee>, etiquetas, 147-151
<bgsound>, 146 matiz o "peso", fuentes, 270
<img>, 136 matizado, 448
<marquee>, 147 maxlength, atributo
lowsrc, atributo (<img>), 117 <input>, 313-314
Lynx (&use navegadores web, solo de texto) mayscript, atributo
<applet>, 400
M <menu>, etiquetas, 244-245
mailto, URL, 172, 307 menu, listas de, 244-245
manejadores de eventos, JavaScript, 414-416 <meta>, etiqueta, 227-227, 427-429
<a>, etiqueta y, 200 method, atributo (<form>), 305
<area>, etiqueta y, 216 MIME, tipos, 152, 227
<form>, etiqueta y, 307 applicatiodx-www-form-urlencoded, 302
< i m p , etiqueta y, 133 c a m p s de seleccion de archivo y, 315
<input>, etiqueta y, 323 multipadform-data, 303
marcos y, 377 multipan/mixed, 432
<select>, etiqueta con, 329 multipadx-mixed-replace, 433
<textarea>, etiquetas y , 326 textlcss, 254
<map>, etiquetas, 132, 212 text/plain, 304
mapas Mosaic, navegador, 3
color estandar, 515 <multicol>, etiquetas, 161-166
imagen (uPase mapas de imagen sensibles al clic multimedia, 21, 151-154
del rat6n) animaci6n de texto, 147-151
mapas de imagen del lado del cliente, 31, 132, nnimaci6n GIF, 113
211 audio, 144-146
 documentos extraidos por el cliente para, 430 <nextid>, etiqueta, 230
imigenes (w&e imigenes) nntp, URL, 191
realidad virtual, 153-154 <nobr>, etiquetas, WSX)
video, 134 (&use t a m b i h saltos de lineal
<img>, extensiones para, 134-137 <noembed>, etiqueta, 407
multipadform&ta, codificaci61-1,303 <noframes>, etiquetas, 383
multipadmixed, codificaci6n, 432 nohref, atributo (<area>), 215
multipadx-mixed-replace, codificaci6n. 433 nombres de dominio completamente calificados,
multiple, atributo (<select>), 328 5
nombres de ruta, 26, 184
N nombres para colores, 514
n, atributo (<nextid>), 230 noresize, attibuto (<frame>), 382
name, atributo <noscript>, etiqueta, 414
<a>, 200 noshade, atributo (<hr>), 105
<a>, etiqueta, 28 notab, atributo
<applet>, 398 <area>, 215
<embed>, 405 <input>, 323
<form>, 307 <object>, 410
<frame>, 382 noticias, URL de, 190
<img>, 133 nowrap, atributo
<layer>, etiqueta, 167 <div>, etiquetas, 56
<meta>, 228 <th> y <td>, 358
<object>, 410 <tr>, 353
<param>, 401
navegadores web, 5, 10 0
aplicaciones ejecutables, 392-402 <object>, etiquetas, 407-411
entidades de cadcter y, 45 objetivo padre, 389
formas y, 331-332 objetivos especiales, 389
ignorar etiquetas HTML, 43 objetos incrustados, 151, 152,42-411
imigenes y, 117 <embed>, etiquetas, 403-406
incompatibilidades con <object>, etiquetas, 407-411
applets, 400 offset (&ue alineaci6n)
marcos, 383 < o b , etiquetas, 32, 234-237
objetos incrustados, 407 omision de etiquetas HTML,43
scripts (guiones) JavaScript, 414 onAbort, atributo (<img>), 133,415
<style>, etiquetas, 258 onBlur, atributo, 415
tablas, 443 onchange, atributo, 415
Internet Explorer (&use Internet Explorer) onclick, atributo (<a>), 200,321, 415
JavaScript para (&are JavaScript, lenguaje) onError, atributo, 133,415
mapas de imagen del lado del cliente y, onFocus, atributo, 415
218 onload, atributo, 133, 415
Mosaic (vPare Mosaic, navegador) onMouseOut, atributo, 200, 216
Netscape Navigator (&use Netscape onMouseOver, atributo, 200, 216, 414
Navigator) onReset, atributo (<form>), 307, 415
obtenci6n. 14 onselect, atributo, 415
s6lo de texto, 5, 120 onsubmit, atributo (<form>), 307,415
Netscape Navigator, 4, 11 onunload, atributo, 415
aplicaciones ejecutahles, 392-402 <option>, etiquetas, 329
plug-ins, 134, 152 ordenadas, listas, 32, 234-237,241
P referencias, 146151
<p>, etiquetas, 24, 43, 57-61 en linea, 206-208
palabras clave (keywords), 228 Refresh, encabezado, 427-429
palette, atributo (<ernbed>), 405 rel, atributo
<param>, etiquetas, 401-402 <a>, 201
padmetro de bkqueda de URLs, 186 <link>, 225
padmetros, forrna, 306, 336-340 relaciones
padmetros nombrados, 306, 336 entre docurnentos HTML, 223-227
parrafos, 24, 57-61 entre hiperligas, 201
peliculas (&anre animaci6n; video) relativo
personalizar tamafio d e fuente, 82-83
botones de imagen, 320 tamafios de rnarcos, 376
vifietas, 438 U r n , 26, 195-197
pies de pigina reservados, caracteres (&use caracteres especiales)
reglas en, 109 retornos de carro (&are p9rrafos)
tabla, 362 retraso (delay)
<plaintext>, etiquetas, 96 carga ( d a r e desernpefio)
plantillas (boilerplates) para docurnentos HTML, rnovimiento de marquesina, 150
437 refrescamiento de document-, 427
plug-ins, 134, 152, 402-411 rev, atributo
pluginspage, atributo (<embed>), 405 <a>, 201
POST, m6tod0, 305, 339-340 <link>, 225
<pre>, etiquetas, 25, 92-94, 9 - 1 0 1 rows, atributo
privados, webs, 7 <frameset>, 376
procesadores de texto (&use editores de texto) <textarea>, 324
programacibn para formas, 306, 335-340 rows, tabla ( d m tablas)
prompt, atributo (<isindex>), 221 rowspan, atributo (<th> y <td>), 357
propiedad de etiquetas (JavaScript), 420 rules, atributo (<table>), 347
propiedad de visualizacibn, 294
propiedades S
de clasificaci6n, 293-294 <s>, etiquetas (&e <strike>, etiquetas)
de estilo de cuadro. 282-290 saltos d e linea, 24, 85-91, 160
de estilo de relleno, 289 nowrap, atributo y, 56
propiedades, estilo, 265-294 (&use t a m b i h texto preformateado)
hojas de estilo JavaScript, 423 <sarnp>, etiquetas, 71
protocolos, 26 sangrias, 279
pseudo-clases, estilo, 263 <script>, etiquetas, 412
puertos, 184 scrollamount, atributo (<marquee>), 150
scrolldelay, atributo (<marquee>), 150
Q scrolling, atributo (<frame>), 382
QUERY-STRING, variable, 336 secciones
documento, 55, 109
R tabla, 360-365
radio, botones de, 317 seguridad, ActiveX y, 395
rastreables, documentos, 32, 220-222 selecci6n, listas de, 327-330
reciclando documentos. 428 <select>, etiquetas, 327-329
redimensionamiento de irnagenes, 129 selected, atributo (<option>), 330
Redirect, encabezado, 430 selectores contextuales, 260-262
referencia dpida para etiquetas HTML, 463-488 -self, oljetivo, 389
sensibilidad a1 tamafio de las letras, 41, 184 standby, atributo (<object>), 411
<server>, etiqueta, 417 start, atributo
servidores, 5, 183 <img>, 136
datos hacia/desde (&use formas) < o b , 235
de nombre, 5 starting, etiquetas, 19, 42
documentos enviados pot, 426, 432-435 <strike>, etiquetas, 76
<isindex>, etiqueta y, 222 <strong>, etiquetas, 71
programacion de formas, 335-340 style, atributo, 73, 77, 253
SGML DTD (&me DTD para HTML) <a>, 202
shape, atributo (<area>), 214, 216 <body>, 142
shapes, atributo (<object>), 410 <caption>, 360
signo de comillas ("1 <dd>, 249
en URLs, 181 <dir>, 244
para valores de atributo, 41 <div>, 57
signo de comillas dobles (&me signo de <dl>, 247
comillas) <dt>, 248
signo de igual (-) para atributos de etiqueta, 41 <form>, 307
signo de interrogation (?) en URLs, 181, 186 <h.-, 63
signo de n l h e r o (a) <hr>, 108
en URLs, 185 <input>, 322
para anclas de nombre, 28, 204 <layer>, 176
para entidades, 23 <li>, 239
signo de porcentaje (%) para codificacion, <marquee>, 151
181 <menu>, 245
signo menor que (<), 23 <multicol>, 165
size, atributo < o b , 236
<basefont>, etiquetas, 79 <option>, 330
<font>, etiquetas, 82-83 <P>, 60
<hr>, etiqueta, 105 <pre>, 94, 99, 101
<input>, 313-314 <select>, 329
<multiple>, 328 <table>, 349
<spacer>, 156-159 <textarea>, 326
<small>, etiquetas, 76 <th> y <td>, 358
software <tr>, 353
c6digo de formato, 69 < u b , 233
para disefiadores, 13 <style>, etiquetas, 253, 257
sonido (&use audio) <sub>, etiquetas, 76
<spacer>, etiqueta, 156-159 subdominios (&me dominies)
span, atributo subindices y superindices, 76
<cob, 369 subrayado, 77
<colgroup>, 367 <sup>, etiquetas, 77
<span>, etiquetas, 295 superior, atributo (<layer>), 170-173
src, atributo
<bgsound>, 145 T
<embed>, 406 tabindex, atributo (<object>), 411
<frame>, 381 tablas, 33, 341-360, 439-446
< i m p , 118 alineacion de, 343, 344-345
<layer>, 175 anidacibn, en formas, 444
<script>. 413 bodes, 346349, 352, 358
 celdas, 354-359 <base>, 224, 330
ajuste automatico de texto en, 353, 358 <form>, 308
alineacibn, 350, 355 <tbody>, etiqueta, 362
espacio en blanco alrededor de, 347 <td>, etiquetas, 33, 354-359
tamaiio de, 356 tecla de tabulacion
colores y, 345-346, 352, 358 con formas, 323
diseiio de columnas, 356, 365-370 con mapas de imagen, 215
encabezados encuadrados, 441 telnet URL, 193
encabezados laterales en, 441-444 temporal, espacio de memoria (&use espacio en
encabezados y pies de pagina, 360-362 blanco)
epigrafe para, 359 text, atributo (<body>), 140
navegadores incompatibles con, 443 <textarea>, etiquetas, 324-326
renglones, 351-354, 357 text/css, codificaci6n. 254
alineacion, 351-353 texto, 20-25
secciones, 360-365 ajuste automitico (&use ajuste automitico de
<table>, etiquetas, 33, 344-350 text01
(&use tambih diseiio de pigina, animado, 147-151
columnas) areas de forma de lineas mdltiples para, 324-326
tamaiio de, 350 campos de forma para, 312-316
taborder, atributo caracteres especiales, 23, 45, 101, 182, 507-512
<area>, 215 citas de bloque, 98-99
<input>, 323 codificaci6n tedplain, 304
tabulaciones (&are espacio en blanco) color del (&use colores)
tamaiio diseiio de columna de, 161-166
applet, 399 en lugar de imPgenes, 115, 120
Prea de marquesina, 149 espacio en blanco (&use espacio en blanco)
areas de mapa de imagen, 214, 216 etiquetas de apariencia para, 22-23, 66-79
bloques de espacios en blanco, 159 fuentes de (&use fuentes)
(&anse tambih height, atributo; size, atribu- monoespaciado
to; width, atributo) <code>, etiquetas, 69
bordes, 285 <kbd>, etiquetas, 71
capas, 174 <plaintext>, etiquetas, 96
columnas de texto, 164 <tt>, etiquetas, 77
cuadros de entrada de texto, 313-314 <var>, etiquetas, 7 2
imPgenes, 129-130 navegadores d l o de texto, 5, 120
line-height, propiedad, 278 parpadeante, 75
marcos, 382, 387 p l n f o s (&use pPrrafos)
regla horizontal, 105 preformateado, 25
objetos incrustados, 404, 406, 409 <listing>, etiquetas, 95
tablas/celdas de tabla, 350, 356 <pre>, etiquetas, 92-94, 99-101
tamaiio de fuente, 269 <xmp>, etiquetas, 96
texto, 64, 75-76, 82-83 propiedades de estilo, 277-281
tamaiio del texto, 79-83 referencias en linea en, 206-208
<big>, etiquetas, 75 tamano de (&use t ~ n ~ ~del i i texto)
o
etiquetas de encabezado para, 64 texto en negritas, 74
<small>, etiquetas, 76 font-weight, propiedad, 270
target, atributo <tfoot>, etiquetas, 362
<a>, 202, 387 <th>, etiquetas, 33, 354-359
<area>, 217 <thead>. etiquetas, 360
530 fndice

tilde (-) en URLs, 185 units, atributo (<embed>), 406

t i p de entrada de contraseiia, 314 URL de consulta, 221
tipos de contenido, 152, 227 URLs (Uniform Resource Locators), 26, 180-197
applicaci6n/x-www-form-urlencoded, 302 <base>, etiqueta para, 223-225
campos de selecci6n de archivo y, 315 codebase, atributo (&me codebase, atributo)
multipadform-data, 303 como valores de la propiedad estilo, 267
multipadmixed, 432 consulta (query), 221
multipadx-mixed-replace, 433 generado aleatoriamente, 431
texdcss, 254 hnp, 182-187
texdplain, 304 JavaScript, 416
title, atributo urn, atributo (<a>), 203
<a>, 203 URNS (Universal Resource Names), 203
<applet>, 400 usemap, atributo
<area>, 217 <img>, 31, 132-133
<link>, 226 <object>, 410
<object>, 411
titulos v
area de mapa de imagen, 217 valign, atributo
bibliogrdficos, 68 <caption>, 359
documento, 20, 49-51, 63, 226 <table>, 350
imagen, 203 cth> y <td>, 355
<title>, etiquetas, 20, 49-51 <tr>, 353
top, atributo valor, atributo
<ilayer>, 177 <ti>, 239
<layer>, 168-170 <option>, 329
-top, objetivo, 389 <param>, 401
topmargin, atributo (<body>), 141 valores
<tr>, etiquetas, 33, 351-354 de la propiedad length, 266
transparencia, 113, 446-449 de la propiedad percentage, 267
true color (color verdadero). 447 de propiedad keyword, 266
<tt>, etiquetas, 77 hexadecimales de color, 513
type, atributo valortype, atributo (<param>), 402
<dir>, 244 <vat>, etiquetas, 72
<embed>, 406 ventanas, 202, 217, 224, 308, 387-391, 449
<input> ( d a r e formas, elementos de entrada) ( d a r e t a m b i h marcos)
<li>, 238 version, atributo (<html>), 48
<link>, 227 vertical
<menu>, 245 alineaci6n ( d m e alineaci6n)
<object>, 41 1 margenes, 130, 150
< o b , 235 whitespace, 158
<param>, 402 (&me t a m b i h height, atributo)
<style>, 254 video, 152
< u b , 233 en linea, 134
typecode, 189 ( d a m e t a m b i h animaci6n; multimedia)
extensiones < i m p , 134-137
U viiietas
<u>, etiquetas. 77 circulares, 238
< U P , etiquetas, 32, 231-233 cuadradas, 238
(&me t a m b i h <dir>, etiquetas) personalizar, 438
Virtual Reality Markup Language (VRML), 153-154 <iftame>, 387
visibilidad <img>, 129-130
exhibida, 174 <layer>, 174
heredada, 174 <marquee>, 149
oculta, 174 <multicol>, 164
visibility, atributo (<layer>), 174 <object>, 409
vlink, atributo (<body>), 140 <pre>, etiqueta, 5%
vspace, atributo <spacer>, 159
<apple[>, 399 <table>, 350
<embed>, 404 <th> y <td>, 356
<img>, 130 width, propiedad, 293
<marquee>, 150 word-spacing, propiedad, 281
<object>, 409 World Wide Web, 3
<table>, 349 informaci6n acerca de, 5
navegadores para ( d mnavegadores web)
w sitios importantes en el web, 15
W3C (World Wide Web Consortium), 8 W3C, 8
<wbr>, etiquetas, !XI-91 wrap, atributo (<textarea>), 325
(&use t a m b i h saltos de lineal
webs privados, 7 X
width, atributo <Xmp>, etiquetas, 96
<apple[>, 399
<embed>, 404 z
<hr>, 105 z-index, atributo (<layer>), 170-173
 Acerca de los autores
Chuck Musciano ([email protected])creci6 en la costa este de Estados Unidos, despuCs de
vivir un tiempo en Maryland, Georgia, antes de conseguir una licenciatun en ciencias de la
computacion por el Tecnol6gico de Georgia en 1982. Pas6 15 anos empleado en Harris
Corporation, en Melbourne, Florida, primer0 como creador de compiladores y artista de herra-
mientas y despuCs como miembro del Grupo de Tecnologia Avanzada. Su especializaci6n en
la tecnologia basada en UNIX lo llev6 a un cargo dentro del Centro de Datos de la Corporaci6n
Harris, administrando sistemas UNIX. A1 mismo tiempo, increment6 su conocimiento y amor
por Internet, contribuyendo con diversas herramientas de dominio public0 en la red y comen-
zo el aun existente Internet Movie Ratings Report. El Web fue el siguiente paso natural. Ha
manejado diversos sitios web durante varios atios. Mas recientemente, obtuvo un cargo dentro
del American Kennel Club en Raleigh, Carolina del Norte, administrando sus macrocomputadoras
y ambientes de bases de datos basadas en UNIX. Chuck ha escrito sobre temas relacionados
con UNIX en la prensa comercial toda la dCcada pasada, mas visiblemente como "Webmaster"
de Sunworld (http///www.sun.com/sunworldonline) y como "HTML Q W d e Netscape-world
(http://www.netscapeworld.com). En su tiempo libre disfruta de la vida en Carolina del None
con su esposa, Cindy, su hija, Courtney, y su hijo, Cole.
Bill Kennedy ([email protected])actualmente es presidente y funcionario tecnolb-
gico en jefe de ActivMedia, Inc., compania d e mercadotecnia de aha tecnologia e investiga-
ci6n de mercados basada en el hiperespacio (http//www.activmedia.com). Entre otras acti-
vidades, esta involucrado activamente en el desarrollo y la venta de plataformas roboticas
moviles utilizadas, sobre todo, en la investigacibn de inteligencia artificial, 16gica difusa y
para entrenamiento. En algunas actividades anteriores, Bill consigui6 un doctorado y realiz6
ensefianza bfisica durante 12 anos en 10s campos de bioquimica y biofisica; desarroll6
software educativo con Kinemation; fue editor en jefe de A+ Publishing; y editor tCcnico,
despuCs editor en jefe de la revista Sun WorldAdvanced Systems.

Nuestra presentaci6n es resultado de 10s comentarios de 10s lectores, nuestra propia expe-
riencia y de 10s canales de distribuci6n. Las portadas distintivas complementan nuestro
enfoque sobre diferentes temas tCcnicos, dando personalidad y vida a temas potencialmente
aridos. UNIX y sus programas auxiliares pueden ser bestias revoltosas. Con la ayuda de 10s
libros podra domesticarlas.
El animal que se presenta en la portada de este libro, es un koala, marsupial australiano, unico
miembro de la familia Phascolarctidae. Este animal de aspect0 bonach6n fue el modelo
original de 10s ositos "Teddy", aunque en redidad no estCn relacionados con 10s osos.
Los koalas emplean sus muy filosas garras para escalar 10s irboles de eucalipto, de cuyas
hojas y corteza subsisten casi de forma unica. Comen de manera selectiva, s61o de 20
especies de eucaliptos d e las 350 que hay en Australia. Puesto que las hojas del euc:~lipto
contienen 10s precursores del icido hidrocianurico, o cianuro, 10s koalas tambikn comen
ocasionalmente tierra, que les ayuda a desintoxicar sus alimentos. Es raro que 10s koalas
consuman agua en estado silvestre, si acaso lo hacen. Las hojas del eucalipto contienen
aproximadamente 67% d e agua, cantidad suficiente para la dieta del koala.
Estos animales son muy pequeiios a1 nacer, con un peso aproximado de medio gramo. Los
nacimientos dobles son poco comunes, pero una madre koala puede adoptar a un bebC
abandonado si lo encuentra. El joven koala permanece en la bolsa de la madre aproximada-
mente siete meses. A diferencia d e la mayoria d e 10s marsupiales, la bolsa del koala se abre
hacia 10s pies, no hacia la cabeza. A1 final del period0 de siete meses, la madre comienza a
destetar a1 be&, pasando de una dieta de leche pura, a una con hojas de eucalipto predigeridas.
Despues d e dejar la bolsa, el joven koala se transporta en el lomo de la madre hasta que
cumple un afio. Los koalas dejan el hogar materno alrededor d e 10s 18 meses. Mientras
intentan establecer su propio dominio familiar, tienen una tasa de mortandad muy alta.
Los koalas alguna vez fueron abundantes en Australia, per0 como resultado d e una epide-
mia entre 1887-1889y 1900-1903y una caceria irrestricta a lo largo del siglo XX, han llegado
a1 borde d e la extincion. Son una especie protegida y su poblacion se est5 restableciendo,
pero en la actualidad so10 sobreviven en la parte oriental d e Australia.
Edie Freedman disefio la portada d e este libro, auxiliiindose en un grabado del siglo XIX del
Dover Pictorial Archive. El diseiio de la portada en inglks se produjo con Quark Xpress 3.3,
con una fuente ITC Garamond.
El disefio interior fue realizado por Jennifer Niederst y Nancy Priest. En inglC3 el texto se
prepar6 en FrameMaker 5.0 y lo implement6 Mike Sierra. Las fuentes d e texto y encabezado
son ITC Garamond Light y Garamond Book. Las ilustraciones se crearon en Macromedia
Freehand 5.0 por Chris Reilley. Clairemarie Fisher O'Leary escribi6 este colof6n.