HTML Guia Complet A
HTML Guia Complet A
HTML
L a GuZa Completa
Traduccidn:
Y a z m h Ju5rez Parra
Licenciada en Computacih
HTML LA G U ~ ACOMPLETA
ISBN 970-10-2141-X
Se t~raron8,000 ejemplares
Contenido
Prefacio ............................................................................................................................ xi
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
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
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
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:
"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.
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:
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.
' 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
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.. .
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&.
' 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
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.
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.
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.
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.
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
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
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.
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.
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
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.
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.
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
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.
: I I"I1/Jl"lf"lq"II,-1]
?w er
.;
a h n lnioio Edltrr Rpwgr h6pa Buscw P >. #r
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.
' 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.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.
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.
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.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.
' 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>.
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.
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-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.
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
' 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.
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.
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
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).
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.
' 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
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.
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.
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.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.
' 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>.
<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
<bead>
Funcion:
Define el encabezado del documento
Atributos:
Ninguno
Etiqueta de fin:
</head>; raramente se omite
Contenido:
Contenido del encabezado
Utilizada en:
Etiquetas <html>
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.
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.
<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
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
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
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
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
rL
- w Archiuo Edicion Uer Ir Marcadores Opciones Oirectorio Uentana
21
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.
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.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.
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
- - -
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
-L
r Archiuo Edicion Uer Ir Mercedores Opciones Oirectorio Uentene
m
I-
.____;
aJ
Netscape: Alineacih do emabezados
El
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
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.
=,-j-----
- -
-Netscape:
6 flrchlllo Ediclon
--
Ir Marcadorer Optiones Dlrectorio
Uer
Imagenes y encebezados
Llentana
- .
-- :A-
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
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 " .
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.
6
- Rrchivo Edicion Uer I r Marcadores Dpciones Directorio Uentana
Netseape: EJemplos de conversldn L ABig
I+Id1aIl7llalaldal[nl
(En HTML, la referencia especial de entidad para la uni6n d e caracteres "ae" es æ ;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.
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.
Ftgura 4-10. Mosaic intetpreta de diferente rnanera el texto delimitadopor las etiquetas
<S t rang> y <em>.
Figura 4-1 1. La etiqueta <vat-> por lo general se usa m c6dtgo de programas preformareado
(<pre>l.
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.
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.
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
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.
Etiqueta Signitlcado
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
~ t a ;imas
s Este texto debe
en UItanak de fuente igual a 3.
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.
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
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
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.
' 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.
<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.
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
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.
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
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
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
<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
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
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 <archivo>\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:
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 <,
> para > y & 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 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.
<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
<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
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.
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>
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
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
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 > b, entonces t = 0
s i a &X62; b, entonces t = 0
<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
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
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>
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.)
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
?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
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.
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>
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.
-L
m Rrchiuo Edici6n Uer I r Marcadores Opciones Directorio Uentana
E z -- - Netscape: combinacibn de atributos
&I - -
-
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.
~
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:
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
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.
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.
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---
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
Figura 5-9.Los navegadores de s61o texto, como Lynx, muestran el texto del arriburo a 1 t en
ver de la imagen.
' 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
-middl L y - - -- &&Ne-p.----eertler-y---
texttop •
middle • •
absmiddle • •
center • •
bottom • • •
base1 i n e • •
absbottom • •
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
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
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.
La figura 5-13 muestra c6mo se distribuye el texto alrededor de una imagen alineada a la
izquierda.
- 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.
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
, 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
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.
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
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:
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.
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.
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
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
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:
-
6 flrchiuo Edicion Uer I r Marcadores Oociones Directorio Uentana
Netscape: E l atributo background para un fondo horizontal -S?SEZ@"
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
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>
Figtrra 5-23.El atrtbuto Zef tmargin de Internet Explorerpara indentar el contenido del
cuerpo de tato.
</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
Figurn 5-24. El atributo lopmargin de Internet Explorerpara bajur el contmido del cuerpo
de texto.
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.
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.
<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
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:
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).
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.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
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.
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
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
<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
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°
endulzan el fruto; que cuatro o mas horas con esa temperatura daharfan el arbol.
Puede ver el resultado e n la figura 6-1.
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° endulzan el
fruto; cuatro o mas horas con esa temperatura daiiarlan el arbol.
Puede ver el resultado e n la figura 6-2.
- -- -
Efectos de la temperatura
Figura 6-2. Uso de una etlqueta <spacer>verticalpara separar un encaberado del texto.
61 ~ d m wear
o un espacio en bbhnco 159
Norte
I- -
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>
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:
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.
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.
-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
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
-~~
-
- -
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
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
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.
' 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
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.
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.
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> 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.
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, ) 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.
* 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.'
* 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.
.
..
.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.
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.
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
Otros caracteres reservados e inseguros que deberia codificar siempre son 10s d e la
tabla 7-1.
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.
Algunas de las partes son opcionales. De hecho, la forma rnis cornlin de un URL simple para
http es:
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
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.
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.
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:
* 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
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.
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.
es el grupo de noticias de anuncios del World Wide Web. Para tener acceso a 61 utilice el URL:
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.
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.
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.
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.
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:
La tabla 7.2 rnuestra c6rno se cornbinan 10s URL base y relativo para forrnar un URL absoluto.
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.
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 - - - - - - - - - - ~
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.
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.
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>.
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.
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
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).
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.
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).
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.
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
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.
<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:
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.
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:
<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
<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
.
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
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>.
. ..
<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
1
Figura 7-7.Mapa de tmagm del lado cliente con un evento deJavaScrfpt activo
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>
<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
. -. .- ----
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.
----- - . . -- - - ---
Para buscar consejos sobre 10s kumquats, introduzca palabras claw [car idosos qua ts
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.
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
<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
<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.
<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
<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.
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>
Por supuesto, agregar estos campos adicionales en el encabezado funciona s610 si su navegador
10s acepta y 10s utiliza d e manera apropiada.
<nextid>
Funcion:
Define el siguiente identificador de entidad de documento vilido
Atributos:
n
Etiqueta de fin:
Ninguna
Contiene:
Nada
Usada en:
Contenido de encabezado
rtas aniaarlas
rtas de dfrect&
rtas rls memi
ttas ric definjcidn
. . . Listas conformato
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 !
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).
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
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
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>
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
-C
w Archiuo Edicion Uer Ir Marcadores Opclones Oirectorio Uentane
Netscaw: Rtrlbuto type para numerer ltstes ordenadas
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 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
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.
I
1. Elemnto 1.
2. Elemento 2.
9. Saltamos al9.
10. Y continuamos con e1 10.
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.
Figura 8-7. El atrtbuto type lepermite crear un esquema tradicional con fistas ordenadas.
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
<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.
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.
<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
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.
<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
<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
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
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.
<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>
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.
<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
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.
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.
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.
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.
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.
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.
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.
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
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.
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)
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).*
'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>.
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.
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.
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.
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.
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".
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.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 )
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.
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)
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:
y de postre:
Kuats con crema (delicioso)
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)
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
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.
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.
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.
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.
parle superior
relleno super'01
parle super101
I
I
I 1
"I
,
I I
intern
b I
0
I
,
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
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.
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
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 )
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>.
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).
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.
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>.
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.
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.
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
<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.
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.
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.
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.
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 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 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>.
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 & o &. 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&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.
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
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 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
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.
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:
Perros
E?J Gabs
A m
0 Peces
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
.' 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>
Pat-ar
.
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).
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.
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.
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.
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.
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
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.
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>
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
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".
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.
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 .
..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
' 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.
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.
-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.
' (
Nombre: [
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.
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.
t y p e d e f s t r u c t { c h a r *name;
char *val;
)entry;
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;
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') ;
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.
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.
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
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.
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.
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.
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.
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
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
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
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.
T-T%
1 - i=( &lmfv lnicio Editar Riecapa h 6 p s hprmi- Bwcar Fqrw
_ _ _ .- -, Es sabido desde
Preferencias 1 hace tiempo las
I -
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.
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.
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.
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.
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.
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
?- -
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>
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.
Este atributo especifica una altura minima en pixeles para la celda actual. Como todas las
- - - - - -
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
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>
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.
<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
11.2.4.1Atributos align y v a l i p
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
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 > .
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
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
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
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
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
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.
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
Ffgursr 11-7. Este ejemplo fntegra varla de l a extensfonespara tabla de Internet Explorer.
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.
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.
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.
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.
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
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
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.
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
Figura 124.Espectacular disefio con marcos usando etiquetas <f rameset> anidadas.
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).
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.
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.
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.
--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.
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.
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
I
rn smor ae BSm morawe muw. UllllFB
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.
-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".
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.
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.
<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
- - - - - - - - - - -
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.
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:
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.
<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
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.
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.
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.
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.
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,
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
<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 <embed> 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.
<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.
~ 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.
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.
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.
<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
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
onReset
onSel ect
onsubmi t
onUnl oad
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.
<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
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.
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.
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)
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
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
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.
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
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>:
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.
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">
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:
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.
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.
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.
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.
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.
' 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
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".
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>
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
.j 1111
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.
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.
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.
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.
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.
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.
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
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
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:
' 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
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.
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.
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:
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.
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.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 - - - - - -
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>- - - - -
' 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
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 <sub>text </sub>
SUP-tag <sup> text </sup>
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
- -
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
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,
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)
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
-
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
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.
<!ENTITY % HTML.Version
"-//W3C//DTD HTML 3.2 F i n a l //ENn
-- T y p i c a l usage:
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 % 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)*">
<!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 --
<!'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:
<!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
<!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,
<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.
-->
<!ENTITY :, InputType
(TEXT I PASSWORD I CHECKBOX I RADIO I SUBMIT
<!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
>
<!-- 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
>
<!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
<!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 --
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
Marca comercial
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
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">
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
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
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.