Captulo 1.

Introduccin
1.1. Qu es HTML?
uelinindolo de lorma sencilla, "HTML es lo que se utiliza para crear todas las pginas web de Internet". ms
concretamente, l1ml es el lenguaje con el que se "escriben" la mayora de pginas web.
los disenadores utilizan el lenguaje l1ml para crear sus pginas web, los programas que utilizan los
disenadores generan pginas escritas en l1ml y los navegadores que utilizamos los usuarios mues-
tran las pginas web despus de leer su contenido l1ml.
Aunque l1ml es un lenguaje que utilizan los ordenadores y los programas de diseno, es muy lcil de
aprender y escribir por parte de las personas. ln realidad, l1ml son las siglas de HyperText Markup
Language y ms adelante se ver el signilicado de cada una de estas palabras.
ll lenguaje l1ml es un estndar reconocido en todo el mundo y cuyas normas deline un organismo
sin nimo de lucro llamado world wide web consortium (http:JJwww.w!.orgJ) , ms conocido como
W3C. como se trata de un estndar reconocido por todas las empresas relacionadas con el mundo de
lnternet, una misma pgina l1ml se visualiza de lorma muy similar en cualquier navegador de cual-
quier sistema operativo.
ll propio W3C deline el lenguaje l1ml como "un lenguaje reconocido universalmente y que permite pu-
blicar informacin de forma global". uesde su creacin, el lenguaje l1ml ha pasado de ser un lenguaje
utilizado exclusivamente para crear documentos electrnicos a ser un lenguaje que se utiliza en mu-
chas aplicaciones electrnicas como buscadores, tiendas online y banca electrnica.
1.2. Breve historia de HTML
la historia completa de l1ml es tan interesante como larga, por lo que a continuacin se muestra su
historia resumida a partir de la inlormacin que se puede encontrar en la wikipedia.
ll origen de l1ml se remonta a 1980, cuando el lsico Tim Berners-Lee, trabajador del clkN
(http:JJwww.cern.chJ) (Organizacin Europea para la Investigacin Nuclear) propuso un nuevo sistema
de "hipertexto" para compartir documentos.
7
los sistemas de "hipertexto" haban sido desarrollados anos antes. ln el mbito de la inlormtica, el
"hipertexto" permita que los usuarios accedieran a la inlormacin relacionada con los documentos
electrnicos que estaban visualizando. ue cierta manera, los primitivos sistemas de "hipertexto" po-
dran asimilarse a los enlaces de las pginas web actuales.
1ras linalizar el desarrollo de su sistema de "hipertexto", 1im lerners-lee lo present a una convoca-
toria organizada para desarrollar un sistema de "hipertexto" para lnternet. uespus de unir sus luerzas
con el ingeniero de sistemas Robert Cailliau, presentaron la propuesta ganadora llamada WorldWide-
Web (W3).
ll primer documento lormal con la descripcin de l1ml se public en 1991 bajo el nombre HTML Tags
(http:JJwww.w!.orgJlistoryJ1992110!-hypertextJhypertextJwwwJmarkLpJ1ags.html) (Etiquetas
HTML) y todava hoy puede ser consultado online a modo de reliquia informtica.
la primera propuesta olicial para convertir l1ml en un estndar se realiz en 199! por parte del or-
ganismo ll1l (http:JJwww.ietl.orgJ) (Internet Engineering Task Force). Aunque se consiguieron avances
signilicativos (en esta poca se delinieron las etiquetas para imgenes, tablas y lormularios) ningu-
na de las dos propuestas de estndar, llamadas l1ml y l1ml- consiguieron convertirse en estndar
olicial.
ln 199, el organismo ll1l organiza un grupo de trabajo de l1ml y consigue publicar, el 22 de sep-
tiembre de ese mismo ano, el estndar l1ml 2.0. A pesar de su nombre, l1ml 2.0 es el primer estn-
dar olicial de l1ml.
A partir de 1996, los estndares de l1ml los publica otro organismo de estandarizacin llamado w!c
(http:JJwww.w!.orgJ) (World Wide Web Consortium). la versin l1ml !.2 se public el 14 de lnero de
199 y es la primera recomendacin de l1ml publicada por el w!c. lsta revisin incorpora los lti-
mos avances de las pginas web desarrolladas hasta 1996, como applets de }ava y texto que lluye alre-
dedor de las imgenes.
l1ml 4.0 se public el 24 de Abril de 1998 (siendo una versin corregida de la publicacin original del
18 de uiciembre de 199) y supone un gran salto desde las versiones anteriores. lntre sus novedades
ms destacadas se encuentran las hojas de estilos c88, la posibilidad de incluir pequenos programas
o scripts en las pginas web, mejora de la accesibilidad de las pginas disenadas, tablas complejas y
mejoras en los lormularios.
la ltima especilicacin olicial de l1ml se public el 24 de diciembre de 1999 y se denomina l1ml
4.01. 8e trata de una revisin y actualizacin de la versin l1ml 4.0, por lo que no incluye novedades
signilicativas.
uesde la publicacin de l1ml 4.01, la actividad de estandarizacin de l1ml se detuvo y el w!c se
centr en el desarrollo del estndar Xl1ml. lor este motivo, en el ano 2004, las empresas Apple, mo-
zilla y Opera mostraron su preocupacin por la lalta de inters del w!c en l1ml y decidieron orga-
nizarse en una nueva asociacin llamada wlA1wo (http:JJwww.whatwg.orgJ) (Web Hypertext Appli-
cation Technology Working Group).
la actividad actual del wlA1wo se centra en el luturo estndar l1ml , cuyo primer borrador olicial
(http:JJwww.w!.orgJ1kJhtmlJ) se public el 22 de enero de 2008. uebido a la luerza de las empresas
Captulo 1. Introduccin Introduccin a XHTML
8
que lorman el grupo wlA1wo y a la publicacin de los borradores de l1ml .0, en marzo de 200
el w!c decidi retomar la actividad estandarizadora de l1ml (http:JJwww.w!.orgJ200J0!Jhtml-
pressrelease) .
ue lorma paralela a su actividad con l1ml, w!c ha continuado con la estandarizacin de Xl1ml,
una versin avanzada de l1ml y basada en Xml. la primera versin de Xl1ml se denomina Xl1ml
1.0 y se public el 26 de lnero de 2000 (y posteriormente se revis el 1 de Agosto de 2002).
Xl1ml 1.0 es una adaptacin de l1ml 4.01 al lenguaje Xml, por lo que mantiene casi todas sus eti-
quetas y caractersticas, pero anade algunas restricciones y elementos propios de Xml. la versin
Xl1ml 1.1 ya ha sido publicada en lorma de borrador y pretende modularizar Xl1ml. 1ambin ha
sido publicado el borrador de Xl1ml 2.0, que supondr un cambio muy importante respecto de las
anteriores versiones de Xl1ml.
1.3. Especificacin oficial
ll organismo w!c (http:JJwww.w!.orgJ) (World Wide Web Consortium) elabora las normas que deben
seguir los disenadores de pginas web para crear las pginas l1ml. las normas oliciales estn escri-
tas en ingls y se pueden consultar de lorma gratuita en las siguientes direcciones:
lspecilicacin olicial de l1ml 4.01 (http:JJwww.w!.orgJ1kJhtml401J)
lspecilicacin olicial de Xl1ml 1.0 (http:JJwww.w!.orgJ1kJxhtml1J)
ll estndar Xl1ml 1.0 incluye el 9/ del estndar l1ml 4.01, ya que slo anade pequenas mejoras
y modilicaciones menores. Alortunadamente, no es necesario leer las especilicaciones y recomenda-
ciones oliciales de l1ml para aprender a disenar pginas con l1ml o Xl1ml. las normas oliciales
estn escritas con un lenguaje bastante lormal y algunas secciones son dilciles de comprender. lor
ello, en los prximos captulos se explica de lorma sencilla y con decenas de ejemplos la especilica-
cin olicial de Xl1ml.
1.4. HTML y XHTML
ll lenguaje Xl1ml es muy similar al lenguaje l1ml. ue hecho, Xl1ml no es ms que una adaptacin
de l1ml al lenguaje Xml. 1cnicamente, l1ml es descendiente directo del lenguaje 8oml, mientras
que Xl1ml lo es del Xml (que a su vez, tambin es descendiente de 8oml).
Figura 1.1 Esquema de la evolucin de HTML y XHTML
Introduccin a XHTML Captulo 1. Introduccin
9
las pginas y documentos creados con Xl1ml son muy similares a las pginas y documentos l1ml.
las discusiones sobre si l1ml es mejor que Xl1ml o viceversa son recurrentes en el mbito de la
creacin de contenidos web, aunque no existe una conclusin ampliamente aceptada.
Actualmente, entre l1ml 4.01 y Xl1ml 1.0, la mayora de disenadores escogen Xl1ml. ln un luturo
cercano, si los disenadores deben elegir entre l1ml y Xl1ml 1.1 o Xl1ml 2.0, quizs la eleccin
sea dilerente.
1.5. HTML y CSS
Originalmente, las pginas l1ml slo incluan inlormacin sobre sus contenidos de texto e imagenes.
con el desarrollo del estndar l1ml, las pginas empezaron a incluir tambin inlormacin sobre el
aspecto de sus contenidos: tipos de letra, colores y mrgenes.
la posterior aparicin de tecnologas como }ava8cript, provocaron que las pginas l1ml tambin in-
cluyeran el cdigo de las aplicaciones (llamadas scripts) que se utilizan para crear pginas web din-
micas.
lncluir en una misma pgina l1ml los contenidos, el diseno y la programacin complica en exceso
su mantenimiento. Normalmente, los contenidos y el diseno de la pgina web son responsabilidad de
dilerentes personas, por lo que es conveniente separarlos.
c88 es el mecanismo que permite separar los contenidos delinidos mediante Xl1ml y el aspecto que
deben presentar esos contenidos:
Figura 1.2 Esquema de la separacin de los contenidos y su presentacin
Lna ventaja anadida de la separacin de los contenidos y su presentacin es que los documentos
Xl1ml creados son ms llexibles, ya que se adaptan mejor a las dilerentes platalormas: pantallas de
ordenador, pantallas de dispositivos mviles, impresoras y dispositivos utilizados por personas disca-
pacitadas.
ue esta lorma, utilizando exclusivamente Xl1ml se crean pginas web "feas" pero correctas. Aplican-
do c88, se pueden crear pginas "bonitas" a partir de las pginas Xl1ml correctas.
Captulo 1. Introduccin Introduccin a XHTML
10
Captulo 2.
Caractersticas bsicas
2.1. Lenguajes de etiquetas
Lno de los retos iniciales a los que se tuvo que enlrentar la inlormtica lue el de cmo almacenar la
inlormacin en los archivos digitales. como los primeros archivos slo contenan texto sin lormato,
la solucin utilizada era muy sencilla: se codilicaban las letras del allabeto y se translormaban en n-
meros.
ue esta lorma, para almacenar un contenido de texto en un archivo electrnico, se utiliza una tabla
de conversin que translorma cada carcter en un nmero. Lna vez almacenada la secuencia de n-
meros, el contenido del archivo se puede recuperar realizando el proceso inverso.
Figura 2.1 Ejemplo sencillo de codificacin de caracteres
ll proceso de translormacin de caracteres en secuencias de nmeros se denomina codificacin de
caracteres y cada una de las tablas que se han delinido para realizar la translormacin se conocen
con el nombre de pginas de cdigo. Lna de las codilicaciones ms conocidas (y una de las primeras
que se publicaron) es la codilicacin A8cll. la importancia de las codilicaciones en l1ml se ver ms
adelante.
11
Lna vez resuelto el problema de almacenar el texto simple, se presenta el reto de almacenar los con-
tenidos de texto con lormato. ln otras palabras, cmo se almacena un texto en negrita7 y un texto
de color rojo7 y otro texto azul, en negrita y subrayado7
Ltilizar una tabla de conversin similar a las que se utilizan para textos sin lormato no es posible, ya
que existen inlinitos posibles estilos para aplicar al texto. Lna solucin tcnicamente viable consis-
te en almacenar la inlormacin sobre el lormato del texto en una zona especial reservada dentro del
propio archivo. ln esta zona se podra indicar dnde comienza y dnde termina cada lormato.
No obstante, la solucin que realmente se emplea para guardar la inlormacin con lormato es mucho
ms sencilla: el archivo electrnico almacena tanto los contenidos como la inlormacin sobre el lor-
mato de esos contenidos. 8i por ejemplo se quiere dividir el texto en prralos y se desea dar especial
importancia a algunas palabras, se podra indicar de la siguiente manera:
<parrafo>
Contenido de texto con <importante>algunas palabras</importante> resaltadas de forma
especial.
</parrafo>
ll principio de un prralo se indica mediante la palabra <parrafo> y el linal de un prralo se indica
mediante la palabra </parrafo>. ue la misma manera, para asignar ms importancia a ciertas palabras
del texto, se encierran entre <importante> y </importante>.
ll proceso de indicar las dilerentes partes que componen la inlormacin se denomina marcar (mar-
kup en ingls). cada una de las palabras que se emplean para marcar el inicio y el linal de una seccin
se denominan etiquetas.
Aunque existen algunas excepciones, en general las etiquetas se indican por pares y se lorman de la
siguiente manera:
ltiqueta de apertura: carcter <, seguido del nombre de la etiqueta (sin espacios en blanco) y
terminado con el carcter >
ltiqueta de cierre: carcter <, seguido del carcter /, seguido del nombre de la etiqueta (sin
espacios en blanco) y terminado con el carcter >
As, la estructura tpica de las etiquetas l1ml es:
<nombre_etiqueta> ... </nombre_etiqueta>
l1ml es un lenguaje de etiquetas (tambin llamado lenguaje de marcado) y las pginas web habi-
tuales estn lormadas por cientos o miles de pares de etiquetas. ue hecho, las letras 'ml' de la sigla
l1ml signilican "markup language", que es como se denominan en ingls a los lenguajes de marcado.
Adems de l1ml, existen muchos otros lenguajes de etiquetas como Xml, 8oml, uoclook y mathml.
la principal ventaja de los lenguajes de etiquetas es que son muy sencillos de leer y escribir por parte
de las personas y de los sistemas electrnicos. la principal desventaja es que pueden aumentar mu-
cho el tamano del documento, por lo que en general se utilizan etiquetas con nombres muy cortos.
Captulo 2. Caractersticas bsicas Introduccin a XHTML
12
2.2. El primer documento HTML
las pginas l1ml se dividen en dos partes: la cabecera y el cuerpo. la cabecera incluye inlormacin
sobre la propia pgina, como por ejemplo su ttulo y su idioma. ll cuerpo de la pgina incluye todos
sus contenidos, como prralos de texto e imgenes.
Figura 2.2 Esquema de las partes que forman un documento HTML
ll cuerpo (llamado body en ingls) contiene todo lo que el usuario ve en su pantalla y la cabecera (lla-
mada head en ingls) contiene todo lo que no se ve (con la nica excepcin del ttulo de la pgina, que
los navegadores muestran como ttulo de sus ventanas).
A continuacin se muestra el cdigo l1ml de una pgina web muy sencilla:
<html>
<head>
<title>El primer documento HTML</title>
</head>
<body>
<p>El lenguaje HTML es <strong>tan sencillo</strong> que
prcticamente se entiende sin estudiar el significado
de sus etiquetas principales.</p>
</body>
</html>
8i quieres probar este primer ejemplo, debes hacer lo siguiente:
1. Abre un editor de archivos de texto y crea un archivo nuevo
2. copia el cdigo l1ml mostrado anteriormente y pgalo tal cual en el archivo que has creado
!. ouarda el archivo con el nombre que quieras, pero con la extensin .html
lara que el ejemplo anterior luncione correctamente, es imprescindible que utilices un editor de tex-
to sin lormato. 8i tu sistema operativo es windows, puedes utilizar el Bloc de notas, Wordpad, EmEditor,
UltraEdit, Notepad++, etc. pero no puedes utilizar un procesador de textos como Word o Open Office. 8i
utilizas sistemas operativos tipo linux, puedes utilizar editores como Gedit, Kedit, Kate e incluso Vi,
pero no utilices KOffice ni Open Office.
uespus de crear el archivo con el contenido l1ml, ya se puede abrir con cualquier navegador para
que se muestre con el siguiente aspecto:
Introduccin a XHTML Captulo 2. Caractersticas bsicas
13
Figura 2.3 Aspecto que muestra el primer documento HTML en cualquier navegador
8i ya ests viendo tu primera pgina l1ml en el navegador, prueba a pulsar sobre el men Ver >
Cdigo fuente y podrs ver el cdigo l1ml de la pgina que est cargada en el navegador. ue hecho,
puedes ver el cdigo l1ml de cualquier pgina de lnternet mediante la opcin Ver > Cdigo fuente.
lrueba a ver el cdigo l1ml de tu pgina prelerida y vers cuantas etiquetas puede llegar a tener
una pgina compleja.
Volviendo al cdigo l1ml del primer ejemplo, es importante conocer las tres etiquetas principales
de un documento l1ml (<html>, <head>, <body>):
<html>: indica el comienzo y el linal de un documento l1ml. Ninguna etiqueta o contenido
puede colocarse antes o despus de la etiqueta <html> (con una sola excepcin que se ver ms
adelante). ln el interior de la etiqueta <html> se delinen la cabecera y el cuerpo del documento
l1ml y todo lo que se coloque luera de la etiqueta <html> se ignora.
<head>: delimita la parte de la cabecera del documento. la cabecera contiene inlormacin sobre
el propio documento l1ml, como por ejemplo su ttulo y el idioma de la pgina. los contenidos
indicados en la cabecera no son visibles para el usuario, con la excepcin de la etiqueta <title>,
que se utiliza para indicar el ttulo del documento y que los navegadores lo visualizan en la
parte superior izquierda de la ventana del navegador (si no te has lijado anteriormente, vuelve
a abrir el primer ejemplo en cualquier navegador y observa dnde se muestra el ttulo de la
pgina).
<body>: delimita el cuerpo del documento l1ml. ll cuerpo encierra todos los contenidos que se
muestran al usuario (prralos de texto, imgenes, tablas). ln general, el <body> de un
documento contiene cientos de etiquetas l1ml, mientras que el <head> no contiene ms que
unas pocas.
Captulo 2. Caractersticas bsicas Introduccin a XHTML
14
Figura 2.4 Esquema de las etiquetas principales que contiene un documento HTML
Ejercicio 1
ueterminar el cdigo l1ml correspondiente a la siguiente pgina:
Figura 2.5 Pgina HTML sencilla que resalta algunas partes del texto
listas: <em> y <del>
2.3. Etiquetas y atributos
l1ml deline 91 etiquetas que los disenadores pueden utilizar para marcar los dilerentes elementos
que componen una pgina:
a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button,
caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame,
frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li,
link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script,
select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title,
tr, tt, u, ul, var.
Introduccin a XHTML Captulo 2. Caractersticas bsicas
15
ue todas las etiquetas disponibles, las siguientes se consideran obsoletas y no se pueden utilizar:
applet, basefont, center, dir, font, isindex, menu, s, strike, u.
A pesar de que se trata de un nmero de etiquetas muy grande, no es suliciente para crear pginas
complejas. Algunos elementos como las imgenes y los enlaces requieren cierta inlormacin adicio-
nal para estar completamente delinidos.
la etiqueta <a> por ejemplo se emplea para incluir un enlace en una pgina. Ltilizando slo la etique-
ta <a> no es posible establecer la direccin a la que apunta cada enlace. como no es viable crear una
etiqueta por cada enlace dilerente, la solucin consiste en personalizar las etiquetas l1ml mediante
cierta inlormacin adicional llamada atributos.
ue esta lorma, se utiliza la misma etiqueta <a> para todos los enlaces de la pgina y se utilizan los
atributos para indicar la direccin a la que apunta cada enlace.
<html>
<head>
<title>Ejemplo de atributos en las etiquetas</title>
</head>
<body>
<p>
Los enlaces son muy fciles de indicar:
<a>Soy un enlace incompleto, porque no tengo direccin de destino</a>.
<a href="http://www.google.com">Este otro enlace apunta a la pgina de Google</a>.
</p>
</body>
</html>
Figura 2.6 Los atributos permiten personalizar las etiquetas HTML
Captulo 2. Caractersticas bsicas Introduccin a XHTML
16
ll primer enlace del ejemplo anterior no est completamente delinido, ya que no apunta a ninguna
direccin. ll segundo enlace, utiliza la misma etiqueta <a>, pero anade inlormacin adicional median-
te un atributo llamado href. los atributos se incluyen dentro de la etiqueta de apertura. lor ahora no
es importante comprender la etiqueta <a> ni el atributo href, ya que se explicarn con todo detalle
ms adelante.
No todos los atributos se pueden utilizar en todas las etiquetas. lor ello, cada etiqueta deline su pro-
pia lista de atributos disponibles. Adems, cada atributo tambin indica el tipo de valor que se le pue-
de asignar. 8i el valor de un atributo no es vlido, el navegador ignora ese atributo.
Aunque cada una de las etiquetas l1ml deline sus propios atributos, algunos de los atributos son co-
munes a muchas o casi todas las etiquetas. ue esta lorma, es habitual explicar por separado los atri-
butos comunes de las etiquetas para no tener que volver a hacerlo cada vez que se explica una nueva
etiqueta. los atributos comunes se dividen en cuatro grupos segn su luncionalidad:
Atributos bsicos: se pueden utilizar prcticamente en todas las etiquetas l1ml.
Atributos para internacionalizacin: los utilizan las pginas que muestran sus contenidos en
varios idiomas.
Atributos de eventos: slo se utilizan en las pginas web dinmicas creadas con }ava8cript.
Atributos de foco: relacionados principalmente con la accesibilidad de los sitios web.
2.3.1. Atributos bsicos
los siguiente cuatro atributos bsicos se pueden aplicar prcticamente a todas las etiquetas l1ml:
Atributo Descripcin
id = "texto" lstablece un identilicador nico a cada elemento dentro de una pgina l1ml
class = "texto" lstablece la clase c88 que se aplica a los estilos del elemento
style = "texto" lstablece de lorma directa los estilos c88 de un elemento
title = "texto" lstablece el ttulo a un elemento (mejora la accesibilidad y los navegadores lo
muestran cuando el usuario pasa el ratn por encima del elemento)
la mayora de pginas web actuales utilizan los atributos id y class de lorma masiva. 8in embargo,
estos atributos slo son realmente tiles cuando se trabaja con c88 y con }avascript.
kespecto al valor de los atributos id y class, slo pueden contener guiones medios (-), guiones bajos
(_), letras yJo nmeros, pero no pueden empezar por nmeros. Adems, los navegadores distinguen
maysculas de minsculas y no se recomienda utilizar letras como y acentos, ya que no es seguro
que luncionen correctamente en todas las versiones de todos los navegadores.
2.3.2. Atributos para internacionalizacin
lstos atributos son tiles para aquellas pginas que muestran sus contenidos en varios idiomas y para
aquellas que quieren indicar de lorma expltica el idioma de sus contenidos:
Introduccin a XHTML Captulo 2. Caractersticas bsicas
17
Atributo Descripcin
lang = "codigo de idioma" lndica el idioma del elemento mediante un cdigo predelinido
xml:lang = "codigo de idioma" lndica el idioma del elemento mediante un cdigo predelinido
dir lndica la direccin del texto (til para los idiomas que escriben
de derecha a izquierda)
ln las pginas Xl1ml, el atributo xml:lang tiene ms prioridad que lang y es obligatorio incluirlo
siempre que se incluye el atributo lang. los idiomas se indican mediante un cdigo estandarizado (es
para espanol, en para ingls, etc.), tal y como se explicar ms adelante en la seccin idioma del enla-
ce (pgina 64) del captulo 4.
como la palabra internacionalizacin es muy larga, se suele sustituir por la abreviatura i18n (el
nmero 18 se reliere al nmero de letras que existen entre la letra i y la letra n de la palabra
internacionalizacin).
2.3.3. Atributos de eventos
lstos atributos slo se utilizan en las pginas web que incluyen cdigo }ava8cript para realizar accio-
nes dinmicas sobre los elementos de la pgina. cada vez que el usuario pulsa una tecla, mueve su
ratn o pulsa cualquier botn del ratn, se produce un evento dentro del navegador. Ltilizando }a-
va8cript y los siguientes atributos, es posible responder de lorma adecuada a cada evento.
Atributo Descripcin Elementos que pueden usarlo
onblur ueseleccionar el elemento <button>, <input>, <label>, <select>,
<textarea>, <body>
onchange ueseleccionar un elemento que se ha
modilicado
<input>, <select>, <textarea>
onclick linchar y soltar el ratn 1odos los elementos
ondblclick linchar dos veces seguidas con el ratn 1odos los elementos
onfocus 8eleccionar un elemento <button>, <input>, <label>, <select>,
<textarea>, <body>
onkeydown lulsar una tecla (sin soltar) llementos de lormulario y <body>
onkeypress lulsar una tecla llementos de lormulario y <body>
onkeyup 8oltar una tecla pulsada llementos de lormulario y <body>
onload la pgina se ha cargado completamente <body>
onmousedown lulsar (sin soltar) un botn del ratn 1odos los elementos
onmousemove mover el ratn 1odos los elementos
Captulo 2. Caractersticas bsicas Introduccin a XHTML
18
Atributo Descripcin Elementos que pueden usarlo
onmouseout ll ratn "sale" del elemento (pasa por
encima de otro elemento)
1odos los elementos
onmouseover ll ratn "entra" en el elemento (pasa por
encima del elemento)
1odos los elementos
onmouseup 8oltar el botn que estaba pulsado en el
ratn
1odos los elementos
onreset lnicializar el lormulario (borrar todos sus
datos)
<form>
onresize 8e ha modilicado el tamano de la ventana
del navegador
<body>
onselect 8eleccionar un texto <input>, <textarea>
onsubmit lnviar el lormulario <form>
onunload 8e abandona la pgina (por ejemplo al
cerrar el navegador)
<body>
2.3.4. Atributos de foco
cuando el usuario selecciona un elemento en una aplicacin, se dice que "el elemento tiene el foco del
programa". 8i por ejemplo un usuario pincha con su ratn sobre un cuadro de texto y comienza a es-
cribir, ese cuadro de texto tiene el loco del programa, llamado "focus" en ingls. 8i el usuario seleccio-
na despus otro elemento, el elemento original pierde el loco y el nuevo elemento es el que tiene el
loco del programa.
los elementos de las pginas web tambin pueden obtener el loco de la aplicacin (en este caso, el
loco del navegador) y l1ml deline algunos atributos especlicos para controlar cmo se seleccionan
los elementos.
Atributo Descripcin
accesskey = "letra" lstablece una tecla de acceso rpido a un elemento l1ml
tabindex = "numero" lstablece la posicin del elemento en el orden de tabulacin de la pgina.
8u valor debe estar comprendido entre 0 y 32.767
onfocus, onblur controlan los eventos }ava8cript que se ejecutan cuando el elemento
obtiene o pierde el loco
cuando se pulsa repetidamente la tecla del tabulador sobre una pgina web, el navegador selecciona
de lorma alternativa todos los elementos de la pgina que se pueden seleccionar (principalmente los
enlaces y los elementos de lormulario). ll atributo tabindex permite alterar el orden en el que se se-
leccionan los elementos, por lo que es muy til cuando se quiere controlar de lorma precisa cmo se
seleccionan los campos de un lormulario complejo.
Introduccin a XHTML Captulo 2. Caractersticas bsicas
19
lor su parte, el atributo accesskey permite establecer una tecla para acceder de lorma rpida a cual-
quier elemento. Aunque la tecla de acceso rpido se establece mediante l1ml, la combinacin de
teclas necesarias para activar ese acceso rpido depende del navegador. ln el navegador lnternet lx-
plorer se pulsa la tecla ALT - la tecla delinida, en el navegador lirelox se pulsa Alt - Shift - la tecla
delinida, en el navegador Opera se pulsa Shift - Esc - la tecla delinida, en el navegador 8alari se pulsa
Ctrl - la tecla delinida.
2.4. Elementos HTML
Adems de etiquetas y atributos, l1ml deline el trmino elemento para relerirse a las partes que
componen los documentos l1ml.
Aunque en ocasiones se habla de lorma indistinta de 'elementos' y 'etiquetas', en realidad un ele-
mento l1ml es mucho ms que una etiqueta, ya que est lormado por:
Lna etiqueta de apertura.
cero o ms atributos.
1exto encerrado por la etiqueta.
Lna etiqueta de cierre.
ll texto encerrado por la etiqueta es opcional, ya que algunas etiquetas de l1ml no pueden encerrar
ningn texto. ll siguiente esquema muestra un elemento l1ml, lormado por una etiqueta <p>, atri-
butos y contenidos de texto:
Figura 2.7 Esquema de las partes que componen un elemento HTML
la estructura mostrada en el esquema anterior es un elemento l1ml ya que comienza con una eti-
queta de apertura (<p>), contiene cero o ms atributos (class="normal"), dispone de un contenido de
texto (Esto es un prrafo) y linaliza con una etiqueta de cierre (</p>).
lor tanto, si una pgina web tiene dos prralos de texto, la pgina contiene dos elementos y cuatro
etiquetas (dos etiquetas <p> de apertura y dos etiquetas </p> de cierre). ue todas lormas, aunque es-
trictamente no son lo mismo, es habitual intercambiar las palabras 'elemento' y 'etiqueta'.
lor otra parte, el lenguaje l1ml clasilica a todos los elementos en dos grupos: elementos en lnea
(inline elements en ingls) y elementos de bloque (block elements en ingls).
la principal dilerencia entre los dos tipos de elementos es la lorma en la que ocupan el espacio dis-
ponible en la pgina. los elementos de bloque siempre empiezan en una nueva lnea y ocupan todo
el espacio disponible hasta el linal de la lnea, aunque sus contenidos no lleguen hasta el linal de la
Captulo 2. Caractersticas bsicas Introduccin a XHTML
20
lnea. lor su parte, los elementos en lnea slo ocupan el espacio necesario para mostrar sus conteni-
dos.
8i se considera el siguiente ejemplo:
<html>
<head>
<title>Ejemplo de elementos en lnea y elementos de bloque</title>
</head>
<body>
<p>Los prrafos son elementos de bloque.</p>
<a href="http://www.google.com">Los enlaces son elementos en lnea</a>
<p>Dentro de un prrafo, <a href="http://www.google.com">los enlaces</a>
siguen siendo elementos en lnea.</p>
</body>
</html>
la siguiente imagen muestra cmo visualizan los navegadores el cdigo l1ml anterior (mediante
c88 se han anadido bordes que muestran el espacio ocupado por cada elemento):
Figura 2.8 Diferencias entre elementos en lnea y elementos de bloque
ll primer prralo contiene un texto corto que slo ocupa la mitad de la anchura de la ventana del
navegador. No obstante, el espacio reservado por el navegador para el primer prralo llega hasta el
linal de esa lnea, por lo que resulta evidente que los elementos <p> son elementos de bloque.
lor otra parte, el primer enlace del ejemplo anterior tambin tiene un texto corto que ocupa sola-
mente la mitad de la anchura de la ventana del navegador. ln este caso, el navegador slo reserva
para el enlace el sitio necesario para mostrar sus contenidos. 8i se anade otro enlace en esa misma
lnea, se mostrara a continuacin del primer enlace. lor tanto, los elementos <a> son elementos en
lnea.
Introduccin a XHTML Captulo 2. Caractersticas bsicas
21
lor ltimo, el segundo prralo sigue ocupando todo el espacio disponible hasta el linal de cada lnea
(por ser un elemento de bloque) y el enlace que se encuentra dentro del prralo slo ocupa el sitio
necesario para mostrar sus contenidos (por ser un elemento en lnea).
la mayora de elementos de bloque pueden contener en su interior elementos en lnea y otros ele-
mentos de bloque. los elementos en lnea slo pueden contener texto u otros elementos en lnea. ln
otras palabras, un elemento de bloque no puede aparecer dentro de un elemento en lnea. ln cambio,
un elemento en lnea puede aparecer dentro de un elemento de bloque y dentro de otro elemento en
lnea.
los elementos en lnea delinidos por l1ml son: a, abbr, acronym, b, basefont, bdo, big, br, cite, code,
dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea,
tt, u, var.
los elementos de bloque delinidos por l1ml son: address, blockquote, center, dir, div, dl, fieldset,
form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, nos-cript, ol, p, pre, table, ul.
los siguientes elementos tambin se considera que son de bloque: dd, dt, frame-set, li, tbody, td,
tfoot, th, thead, tr.
los siguientes elementos pueden ser en lnea y de bloque segn las circunstancias: button, del,
iframe, ins, map, object, script.
2.5. Sintaxis de las etiquetas XHTML
ll lenguaje l1ml original era muy permisivo en su sintaxis, por lo que era posible escribir sus etique-
tas y atributos de muchas lormas dilerentes. las etiquetas por ejemplo podan escribirse en mays-
culas, en minsculas e incluso combinando maysculas y minsculas. ll valor de los atributos de las
etiquetas se podan indicar con y sin comillas ("). Adems, el orden en el que se abran y cerraban las
etiquetas no era importante.
la llexibilidad de l1ml puede parecer un aspecto positivo, pero el resultado linal son pginas con un
cdigo l1ml desordenado, dilcil de mantener y muy poco prolesional. Alortunadamente, Xl1ml
soluciona estos problemas anadiendo ciertas normas en la lorma de escribir las etiquetas y atributos.
A continuacin se muestran las cinco restricciones bsicas que introduce Xl1ml respecto a l1ml en
la sintaxis de sus etiquetas:
1) Las etiquetas se tienen que cerrar de acuerdo a como se abren:
ljemplo correcto en Xl1ml:
<p>Este es un prrafo con <a>un enlace</a></p>
ljemplo incorrecto en Xl1ml (pero correcto en l1ml):
<p>Este es un prrafo con <a>un enlace</p></a>
2) Los nombres de las etiquetas y atributos siempre se escriben en minsculas:
Captulo 2. Caractersticas bsicas Introduccin a XHTML
22
ljemplo correcto en Xl1ml:
<p>Este es un prrafo con <a href="http://www.google.com">un enlace</a></p>
ljemplo incorrecto en Xl1ml (pero correcto en l1ml):
<P>Este es un prrafo con <A HREF="http://www.google.com">un enlace</A></P>
!) El valor de los atributos siempre se encierra con comillas:
ljemplo correcto en Xl1ml:
<p>Este es un prrafo con <a href="http://www.google.com">un enlace</a></p>
ljemplo incorrecto en Xl1ml (pero correcto en l1ml):
<p>Este es un prrafo con <a href=http://www.google.com>un enlace</a></p>
4) Los atributos no se pueden comprimir:
ljemplo correcto en Xl1ml:
<dl compact="compact">...</dl>
ljemplo incorrecto en Xl1ml (pero correcto en l1ml):
<dl compact>...</dl>
lste tipo de atributos en los que el nombre coincide con su valor no son muy habituales.
) Todas las etiquetas deben cerrarse siempre:
la mayora de etiquetas l1ml encierran un contenido de texto entre la etiqueta de apertura y la eti-
queta de cierre. 8in embargo, algunas etiquetas especiales llamadas "etiquetas vacas" no necesitan en-
cerrar ningn texto.
la etiqueta <br> por ejemplo, se utiliza para indicar el comienzo de una nueva lnea, tal y como se
ver ms adelante. lor sus caractersticas, la etiqueta <br> nunca encierra ningn contenido de texto.
como el estndar Xl1ml obliga a cerrar todas las etiquetas abiertas, siempre que se incluya la eti-
queta <br> se debera cerrar de lorma seguida: <br></br>. lara que el cdigo resulte ms cmodo de
escribir, Xl1ml permite en estos casos escribir de lorma abreviada una etiqueta que se abre y se cie-
rra de lorma consecutiva.
ln lugar de abrir y cerrar de lorma consecutiva la etiqueta (<br></br>) se puede utilizar la sintaxis
<br/> para indicar que es una etiqueta vaca que se abre y se cierra en ese mismo punto. ln la lorma
compacta es habitual equivocarse con la posicin del carcter /.
ljemplo correcto en Xl1ml:
<br/>
Introduccin a XHTML Captulo 2. Caractersticas bsicas
23
ljemplo incorrecto en Xl1ml (pero correcto en l1ml):
<br>
Adems de estas cinco restricciones bsicas, Xl1ml incluye otros cambios ms avanzados respecto a
l1ml:
1. Antes de acceder al valor de un atributo, se eliminan todos los espacios en blanco que se
encuentran antes y despus del valor. Adems, se eliminan todos los espacios en blanco
sobrantes dentro del valor de un atributo. ln otras palabras, si en el interior de un atributo se
incluyen varios espacios en blanco seguidos, se eliminan todos salvo un nico espacio en blanco
utilizado para separar las dilerentes palabras.
2. como se explicar ms adelante al hablar de la etiqueta <script>, el cdigo }ava8cript debe
encerrarse entre unas etiquetas especiales (<![CDATA[ y ]]>) para evitar que el navegador
interprete de lorma errnea caracteres como & y <.
!. las pginas Xl1ml deben prescindir del atributo name para identilicar de lorma nica a los
elementos. ln su lugar, siempre debe utilizarse el atributo id. ue hecho, en la versin 1.0 del
estndar Xl1ml, el atributo name se ha declarado obsoleto para las etiquetas a, applet, form,
frame, iframe, img y map.
Captulo 2. Caractersticas bsicas Introduccin a XHTML
24
Captulo 3.
Texto
la mayor parte del contenido de las pginas l1ml habituales est lormado por texto, llegando a ser
ms del 90/ del cdigo de la pgina. lor este motivo, es muy importante conocer los elementos y eti-
quetas que deline l1ml para el manejo del texto.
ll lenguaje l1ml incorpora al tratamiento del texto muchas de las ideas y normas establecidas en
otros entornos de publicacin de contenidos. ue esta lorma, l1ml deline etiquetas para estructu-
rar el contenido en secciones y prralos y deline otras etiquetas para marcar elementos importantes
dentro del texto.
la tarea inicial del editor de contenidos l1ml consiste en estructurar el texto original deliniendo sus
prralos, titulares y ttulos de seccin, como se muestra en la siguiente imagen:
Figura 3.1 Resultado de estructurar un texto sencillo
25
ll proceso de estructurar un texto simple consiste en indicar las dilerentes zonas o secciones que
componen el texto. ue esta lorma, los textos estructurados utilizan etiquetas para delimitar cada p-
rralo y ttulos de seccin para delimitar cada una de las secciones que lorman el texto.
Lna vez delinida la estructura bsica de los contenidos de la pgina, el siguiente paso consiste en mar-
car los dilerentes elementos dentro del propio texto: deliniciones, abreviaturas, textos importantes,
textos modilicados, citas a otras relerencias, etc.
Figura 3.2 Resultado de marcar un texto sencillo
ll anterior ejemplo muestra la translormacin de un prralo con un texto simple en un prralo cuyo
texto contiene elementos marcados de lorma especial. As, algunas palabras del texto se muestran en
negrita porque se consideran importantes, otras palabras aparecen en cursiva, ya que se han marca-
do como destacadas e incluso una lrase aparece tabulada y entre comillas, indicando que es una cita
textual de otro contenido.
ln las secciones siguientes se muestran todas las etiquetas que deline l1ml para estructurar y mar-
car el texto. Adems, se hace una mencin especial al tratamiento que hace l1ml de los espacios en
blanco y las nuevas lneas.
3.1. Estructurar
la lorma ms sencilla de estructurar un texto consiste en separarlo por prralos. Adems, l1ml per-
mite incluir ttulos que delimitan cada una de las secciones.
3.1.1. Prrafos
Lna de las etiquetas ms utilizadas de l1ml es la etiqueta <p>, que permite delinir los prralos que
lorman el texto de una pgina. lara delimitar el texto de un prralo, se encierra ese texto con la eti-
queta <p>, como muestra el siguiente ejemplo:
<html>
<head>
<title>Ejemplo de texto estructurado con prrafos</title>
Captulo 3. Texto Introduccin a XHTML
26
</head>
<body>
<p>Este es el texto que forma el primer prrafo de la pgina.
Los prrafos pueden ocupar varias lneas y el navegador se encarga
de ajustar su longitud al tamao de la ventana.</p>
<p>El segundo prrafo de la pgina tambin se define encerrando
su texto con la etiqueta p. El navegador tambin se encarga de
separar automticamente cada prrafo.</p>
</body>
</html>
ll ejemplo anterior se visualiza de la siguiente manera en cualquier navegador:
Figura 3.3 Ejemplo de texto HTML estructurado con prrafos
la siguiente tabla recoge la delinicin lormal de la etiqueta <p>:
<p>
uelimita el contenido de un prralo de texto
Atributos comunes bsicos, internacionalizacin y eventos Tipo de elemento lloque
Atributos propios -
Introduccin a XHTML Captulo 3. Texto
27
los prralos creados con l1ml son elementos de bloque, por lo que siempre ocupan toda la anchura
de la ventana del navegador. Adems, no tienen atributos especlicos, pero s que se les pueden asig-
nar los atributos comunes de l1ml bsicos, de internacionalizacin y de eventos.
3.1.2. Secciones
las pginas l1ml habituales suelen tener una estructura ms compleja que la que se puede crear so-
lamente mediante prralos. ue hecho, es habitual que las pginas se dividan en dilerentes secciones
jerrquicas.
los ttulos de seccin se utilizan para delimitar el comienzo de cada seccin de la pgina. l1ml per-
mite crear secciones de hasta seis niveles de importancia. ue esta lorma, aunque una pgina puede
delinir cualquier nmero de secciones, slo puede incluir seis niveles jerrquicos.
las etiquetas que delinen los ttulos de seccin son <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. la etiqueta <h1>
es la de mayor importancia y por tanto se utiliza para delinir los titulares de la pgina. la importancia
del resto de etiquetas es descendiente, de lorma que la etiqueta <h6> es la que se utiliza para delimitar
las secciones menos importantes de la pgina.
A continuacin se muestra la delinicin lormal de la etiqueta <h1>, siendo idntica la delinicin del
resto de etiquetas releridas a los ttulos de seccin:
<h1>
ueline los ttulos de las secciones de mayor importancia de la pgina.
Atributos comunes bsicos, internacionalizacin y eventos Tipo de elemento lloque
Atributos propios -
Al igual que la etiqueta <p>, las etiquetas de ttulo de seccin son elementos de bloque y no tienen
atributos especlicos.
las etiquetas <h1>, ..., <h6> delinen ttulos de seccin, no secciones completas. lor este motivo, no es
necesario encerrar los contenidos de una seccin con su etiqueta correspondiente. 8olamente se debe
encerrar con las etiquetas <h1>, ..., <h6> los ttulos de cada seccin.
ll siguiente ejemplo muestra el uso de las etiquetas de ttulo de seccin:
<html>
<head>
<title>Ejemplo de texto estructurado con secciones</title>
</head>
<body>
<h1>Titular de la pgina</h1>
<p>Prrafo de introduccin...</p>
<h2>La primera sub-seccin</h2>
Captulo 3. Texto Introduccin a XHTML
28
<p>Prrafo de contenido...</p>
<h2>Otra subseccin</h2>
<p>Ms prrafos de contenido...</p>
</body>
</html>
los navegadores muestran el ejemplo anterior de la siguiente manera:
Figura 3.4 Ejemplo de texto HTML estructurado con prrafos y secciones
los navegadores asignan de lorma automticamente el tamano del ttulo de cada seccin en luncin
de su importancia. As, los ttulos de seccin <h1> se muestran con el tamano de letra ms grande, ya
que son el nivel jerrquico superior, mientras que los ttulos de seccin <h6> se visualizan con un ta-
mano de letra muy pequeno, adecuado para el nivel jerrquico de menor importancia.
lvidentemente, el aspecto que los navegadores aplican por delecto a los ttulos de seccin se puede
modilicar utilizando las hojas de estilos de c88. la siguiente imagen muestra el tamano por delecto
con el que los navegadores muestran cada titular:
Introduccin a XHTML Captulo 3. Texto
29
Figura 3.5 Ejemplo de uso de las etiquetas h1, h2, h3, h4, h5 y h6
3.2. Marcado bsico de texto
Lna vez estructurado el texto en prralos y secciones, el siguiente paso es el marcado de los elemen-
tos que componen el texto. los textos habituales estn lormados por elementos como palabras en
negrita o cursiva, anotaciones y correcciones, citas a otros documentos externos, etc. l1ml propor-
ciona varias etiquetas para marcar cada uno de los dilerentes tipos de texto.
lntre las etiquetas ms utilizadas para marcar texto se encuentran <em> y <strong>. la delinicin lor-
mal de estas dos etiquetas se muestra a continuacin:
<em>
kealza la importancia del texto que encierra
Atributos comunes bsicos, internacionalizacin y eventos Tipo de elemento ln lnea
Atributos propios -
<strong>
kealza con la mxima importancia el texto que encierra
Atributos comunes bsicos, internacionalizacin y eventos Tipo de elemento ln lnea
Atributos propios -
la etiqueta <em> marca un texto indicando que su importancia es mayor que la del resto del texto. la
etiqueta <strong> indica que un determinado texto es de la mayor importancia dentro de la pgina.
ljemplo:
Captulo 3. Texto Introduccin a XHTML
30
<html>
<head>
<title>Ejemplo de etiqueta em y strong</title>
</head>
<body>
<p>El lenguaje HTML permite marcar algunos segmentos de texto
como <em>muy importantes</em> y otros segmentos como <strong>los
ms importantes</strong>.</p>
</body>
</html>
lor delecto, los navegadores muestran los elementos <em> en cursiva para hacer evidente su impor-
tancia y muestran los elementos <strong> en negrita, para indicar que son los ms importantes:
Figura 3.6 Ejemplo de uso de las etiquetas em y strong
Ejercicio 2
lstructurar y marcar el siguiente texto extrado de la wikipedia (http:JJes.wikipedia.orgJwikiJlx-
ploracin_espacial) para que el navegador lo muestre con el aspecto de la siguiente imagen:
Introduccin a XHTML Captulo 3. Texto
31
Figura 3.7 Resultado de estructurar y marcar el texto original
l1ml tambin permite marcar de lorma adecuada las modilicaciones realizadas en el contenido de
una pgina. ln otras palabras, l1ml permite indicar de lorma clara el texto que ha sido eliminado
y el texto que ha sido anadido a un determinado texto original. las etiquetas utilizadas son <ins> y
<del>, cuya delinicin lormal es la siguiente:
Captulo 3. Texto Introduccin a XHTML
32
<ins>
8e emplea para marcar una modilicacin en los contenidos originales consistente
en la insercin de un nuevo contenido
Atributos
comunes
bsicos, internacionalizacin y eventos Tipo de elemento lloque y en lnea
Atributos
propios
cite = "url" - lndica la Lkl de la pgina en la que se puede obtener ms inlormacin
sobre el motivo por el que se realiz la modilicacin.
datetime = "fecha" - lspecilica la lecha y hora en la que se realiz el cambio
<del>
8e emplea para marcar una modilicacin en los contenidos originales consistente
en el borrado de cierto contenido
Atributos
comunes
bsicos, internacionalizacin y eventos Tipo de elemento lloque y en lnea
Atributos
propios
cite = "url" - lndica la Lkl de la pgina en la que se puede obtener ms inlormacin
sobre el motivo por el que se realiz la modilicacin.
datetime = "fecha" - lspecilica la lecha y hora en la que se realiz el cambio
las dos etiquetas cuentan con los mismos atributos especlicos, que opcionalmente se pueden anadir
para proporcionar ms inlormacin sobre los cambios realizados. ll atributo cite se emplea para in-
dicar la direccin de un documento externo en el que se puede encontrar ms inlormacin relaciona-
da con la insercin o el borrado de texto. ll atributo datetime puede utilizarse para indicar la lecha y
la hora en la que se realiz cada cambio.
ljemplo:
<html>
<head><title>Ejemplo de etiqueta ins y del</title></head>
<body>
<h3>Ejemplo de etiqueta ins y del</h3>
<p>El HTML, acrnimo ingls de Hyper Text Markup Language (lenguaje de <del
datetime="20091025" cite="http://librosweb.es/xhtml/capitulo_3/
marcado_basico_de_texto.html">marcado de hipertexto</del> <ins datetime="20091026"
cite="http://librosweb.es/xhtml/capitulo_3.html"> marcas hipertextuales</ins>) es un
lenguaje de marcacin diseado para estructurar textos y presentarlos en forma de
hipertexto.</p>
</body>
</html>
los navegadores muestran el ejemplo anterior de la siguiente manera:
Introduccin a XHTML Captulo 3. Texto
33
Figura 3.8 Ejemplo de uso de las etiquetas ins y del
lor delecto, el texto eliminado (marcado con la etiqueta <del>) se muestra tachado de lorma que el
usuario pueda identilicarlo lcilmente como un texto que lormaba parte del texto original y que ya
no tiene validez. ll texto insertado (marcado con la etiqueta <ins>) se muestra subrayado, de lorma
que el usuario pueda identilicarlo como un texto nuevo que no lormaba parte del texto original.
lor otra parte, en muchos tipos de pginas (artculos, noticias) es habitual citar literalmente un texto
externo. l1ml deline la etiqueta <blockquote> para incluir citas textuales en las pginas web. la
delinicin de la etiqueta l1ml con el nombre ms largo se muestra a continuacin:
<blockquote>
8e emplea para indicar que el texto que encierra es una cita textual de
otro texto externo
Atributos comunes bsicos, internacionalizacin y eventos Tipo de elemento lloque
Atributos propios
cite = "url" - lndica la direccin de la pgina web original de la que se
extrae la cita
Al igual que <ins> y <del>, la etiqueta <blockquote> permite indicar mediante el atributo cite la di-
reccin de un documento del que se ha extrado la cita. ljemplo:
<html>
<head><title>Ejemplo de etiqueta blockquote</title></head>
<body>
<p>Segn el W3C, el valor del
atributo <em>cite</em> en las etiquetas <strong>blockquote</strong> tiene el
siguiente significado:</p>
<blockquote cite="http://www.w3.org/TR/html401/struct/text.html">"El valor de este
atributo
es una direccin URL que indica el documento original de la cita."</blockquote>
</body>
</html>
Captulo 3. Texto Introduccin a XHTML
34
ll aspecto que muestra el ejemplo anterior en cualquier navegador es el siguiente:
Figura 3.9 Ejemplo de uso de la etiqueta blockquote
lara indicar de lorma clara que el texto es una cita externa, los navegadores muestran por delecto el
texto del elemento <blockquote> con un gran margen en la parte izquierda.
3.3. Marcado avanzado de texto
las pginas y documentos ms avanzados suelen incluir otros elementos importantes que se deben
marcar de lorma adecuada. lor ello, l1ml incluye muchas otras etiquetas que permiten marcar ms
elementos del texto.
la etiqueta <abbr> marca las abreviaturas de un texto y la etiqueta <acronym> se emplea para marcar
las siglas o acrnimos del texto. 8u delinicin es la siguiente:
<abbr>
8e emplea para marcar las abreviaturas del texto y proporcionar el signilicado
de esas abreviaturas
Atributos
comunes
bsicos, internacionalizacin y eventos Tipo de elemento ln lnea
Atributos
propios
title = "texto" - lndica el signilicado completo de la abreviatura
<acronym>
8e emplea para marcar las siglas o acrnimos del texto y proporcionar el
signilicado de esas siglas
Atributos comunes bsicos, internacionalizacin y eventos Tipo de elemento ln lnea
Atributos propios
title = "texto" - lndica el signilicado completo del acrnimo o sigla
ln ambos casos, el atributo title se puede utilizar para incluir el signilicado completo de la abrevia-
tura o sigla. ljemplo:
Introduccin a XHTML Captulo 3. Texto
35
<html>
<head>
<title>Ejemplo de etiqueta acronym</title>
</head>
<body>
<p>El lenguaje <acronym title="HyperText Markup Language">HTML</acronym> es
estandarizado
por el <acronym title="World Wide Web Consortium">W3C</acronym>.</p>
</body>
</html>
la mayora de navegadores muestran por delecto un borde inlerior punteado para todos los elemen-
tos <abbr> y <acronym>. Al posicionar el puntero del ratn sobre la palabra subrayada, el navegador
muestra un pequeno recuadro (llamado tooltip en ingls) con el valor del atributo title:
Figura 3.10 Ejemplo de uso de la etiqueta acronym
lor otra parte, en ocasiones resulta til incluir la delinicin de una palabra extrana o cuyo uso est
restringido a un entorno muy determinado. l1ml incluye la etiqueta <dfn> para proporcionar al
usuario la delinicin de todas las palabras para las que se considere apropiado. la delinicin lormal
de esta etiqueta se muestra a continuacin:
Captulo 3. Texto Introduccin a XHTML
36