XHTML

92-95-Webmasters-U171.
qxd
6/22/05
15:20
Page 92
: =}{><.;~_+
WEBMASTERS
UNA INTRODUCCION AL LENGUAJE DE MARCADO SUCESOR DE HTML
XHTML
RODRIGO GALINDEZ
SIGUIENDO CON NUESTRA SERIE DE ARTICULOS SOBRE DESARROLLO WEB ORIENTADO A ESTANDARES, EN ESTA OCASION LES EXPLICAREMOS EN QUE CONSISTE XHTML, DESCRIBIENDO PASO POR PASO LA ESTRUCTURA DE UN DOCUMENTO EN ESTE LENGUAJE.
rodrigo@simplelogic.com.ar
Desarrollador web, Rodrigo es un apasionado por todo lo que vaya despus de http://.
l Extensible Hypertext Markup Language, o simplemente XHTML para los amigos, es una reformulacin de HTML 4.01 pensada como una aplicacin del lenguaje XML. Es decir, XHTML es una versin de HTML, con los mismos elementos y atributos, pero basada en la sintaxis y estructura de XML. Al principio, HTML fue creado para el intercambio de documentos cientficos a travs de Internet. Sin embargo, a medida que la Red evolucionaba y se expanda ms all del campo cientfico-universitario, los requisitos de los desarrolladores web tambin crecan. La necesidad de un lenguaje de marcado para pginas web, que fuera fcilmente extensible por medio de mdulos y, adems, interoperable con otras aplicaciones de XML, dio como resultado la creacin de la especificacin XHTML 1.0. Usar XHTML en lugar de HTML tiene muchas ventajas importantes. Por ejemplo, el World Wide Web Consortium (WWWC), entidad que se encarga de desarrollar especificaciones sobre las tecnologas que construyen la WWW, sostiene que:
s XHTML es extensible. Esta es la principal ventaja sobre HTML. XHTML permite agregar nuevos elementos y atributos a travs de la modularizacin, lo cual nos da la posibilidad de aprovechar las ventajas de otras tecnologas de desarrollo web, como MathML, y de las que se vayan a desarrollar en el futuro, como XForms. s XHTML es accesible. Debido a su n-
TopStyle (www.brasoft.com/topstyle) es uno de los programas editores que vienen preparados para aprovechar XHTML al mximo.
no en su presentacin, XHTML es un lenguaje que tiene como objetivo poder ser interpretado por cualquier dispositivo capaz de leer XML, ya sea un navegador o un telfono celular. Luego de esta breve introduccin, pasemos a ver el esqueleto de un documento XHTML, explicado en detalle, paso por paso.
ANATOMIA DE UN DOCUMENTO XHTML

Si tenemos presente la estructura de un documento HTML, nos daremos cuenta de que es muy similar a los documentos XHTML; de hecho, en XHTML no hay elementos adicionales. Sin embargo, existe un par de requisitos, que, aunque no son complicados de entender ni de aplicar para el que est empezando en el diseo de sitios web, tal vez impliquen un cambio de mentalidad drstico para aquel que viene maquetando en HTML. A continuacin mostraremos la mnima expresin de un documento XHTML, para luego enfocarnos en aquellas diferencias propias de este nuevo lenguaje de marcado.
1) <?xml version=1.0 encoding=ISO-8859-1?> 2) <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> 3) <html xmlns=http://www.w3.org/1999/xhtml xml:lang=es lang=es> 4) <head> 5) <title>Documento simple en XHTML</title> 6) <meta http-equiv=Content-Type content=text/html; charset=ISO-8859-1 /> 7) </head> 8) <body> Sumen millas conectndose por Red USERS USR2.0
fasis en la estructura de un documento y
1 92
92-95-Webmasters-U171.qxd
6/22/05
15:20
Page 93
: = } { > < . ; ~ _+ ^ #
: =}{>< ; ~ + ^
9) <h1>Documento simple en XHTML</h1> 10) <hr /> 11) Este es nuestro primer documento en <acronym title= Extensible Hypertext Markup Language>XHTML</acronym>. 12) </body> 13) </html> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> s Transitional. Es un DTD un poco ms flexible que el anterior. Contiene algunos elementos de presentacin; por ejemplo, el elemento <center>. Est pensando para aquellos desarrolladores que estn haciendo el cambio hacia un DTD estricto, pero que todava no tienen suficiente experiencia con CSS. Si deseamos especificar que nuestro documento XHTML es del tipo transicional, deberemos introducir la siguiente lnea: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> s Frameset. Es el DTD que debemos incluir cuando estamos
: =}{><.;~_+^#
Lnea 1: La declaracin XML. La primera lnea indica al navegador que el documento que sigue est desarrollado conforme a la versin 1.0 de XML y que se basa en el juego de caracteres especificado en la norma ISO-8859-1. Es importante detenernos sobre este punto y aclarar que el World Wide Web Consortium recomienda, pero no obliga a incluir esta lnea de cdigo en todos nuestros documentos XHTML, puesto que est demostrado que muchos navegadores tienen problemas en el momento de leer esta declaracin, lo que resulta en pginas que se muestran incorrectamente. Estos navegadores incluyen algunas versiones de los populares Internet Explorer y Netscape Navigator. Es por esto por lo que recomendamos no incluir esta declaracin XML en nuestras pginas, por lo menos hasta que las versiones futuras de los navegadores ms usados solucionen este problema. Un cuadro con informacin sobre los navegadores que soportan esta declaracin XML puede encontrarse en www.webstandards.org/learn/reference/prolog_problems.html. Los lectores ms despiertos se preguntarn, entonces, cmo especificaremos el tipo de contenido que estamos sirviendo y el juego de caracteres que usamos en nuestro documento XHTML. Para eso agregamos la lnea 6, que explicaremos en detalle ms adelante. Lnea 2: El DTD por usar. Un DTD, o Document Type Definition, es simplemente una especificacin de todos los elementos, atributos y entidades permitidos para un determinado tipo de documento XHTML o HTML. Esto significa que, segn el DTD que estemos usando, tendremos a nuestra disposicin un conjunto de elementos para usar en el momento de codificar nuestras pginas web. Por ejemplo, el DTD de XHTML 1.0 en su versin estricta elimina todos los elementos de presentacin de un documento HTML. Esto quiere decir que sera invlido usar el elemento <center> en nuestros documentos XHTML con DTD estricto. Esta declaracin del DTD por usar en una pgina web, no es especfica de XHTML; con HTML tambin debamos establecer uno. Existen varias versiones de DTDs para XHTML, e incluso tambin podramos crear un DTD propio para luego utilizarlo en nuestros documentos. El World Wide Web Consortium define tres tipos de DTDs, que son:
s Strict. Es el DTD ms rgido que podemos usar. En este DTD, todos los elementos de presentacin, como o <center>, son eliminados y no es posible utilizarlos en nuestros documentos. Por lo tanto, para controlar los elementos de presentacin de nuestro documento, como la asignacin de colores y el posicionamiento de elementos, deberemos utilizar CSS. La lnea que especifica que un documento XHTML es estricto, es la siguiente: USR2.0
creando sitios web que incluirn frames o marcos. Para ello, la declaracin DOCTYPE es la siguiente:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
Ahora bien, ya vimos que tenemos varios sabores de DTDs en XHTML. La pregunta del milln es: cul deberamos usar para nuestros sitios web? Aquel que nos asegure en un 100% la premisa de separacin del contenido de un sitio de su presentacin. Recordemos: el concepto clave detrs de todas estas nuevas tecnologas de desarrollo web es la separacin del contenido de su presentacin. Es por esto por lo que el nico DTD que nos garantiza alcanzar esta premisa es el de XHTML estricto, el cual no incluye ningn elemento de presentacin en su especificacin, y obliga a que todo el aspecto visual de nuestra web sea necesariamente controlable utilizando CSS. Volviendo a nuestro ejemplo, a travs de la declaracin DOCTYPE en la lnea 2, especificamos que el documento usar los elementos, atributos y entidades declarados en el DTD de XHTML 1.0 estricto. Recordemos que esta declaracin DOCTYPE es sensible a maysculas y minsculas, y que, adems, debe ir en la primera lnea de nuestro documento, despus de la declaracin XML (si es que la estamos usando). Lnea 3: El elemento <html>. En XHTML, ahora el elemento raz <html> requiere que especifiquemos obligatoriamente:
s El espacio nominal de los elementos. En XML, evitamos la
ambigedad en los nombres de los elementos usados agrupndolos en espacios nominales. Al especificar el atributo xml apuntando al espacio nominal de XHTML, le decimos al navegador que los elementos que siguen son de XHTML y no de otro lenguaje basado en XML, como, por ejemplo, MathML.
s El idioma. A travs de la combinacin de atributos xml:lang (propio de XML) y lang (propio de HTML), definiremos el idioma en el cual est escrito el texto de nuestro documento, en nuestro caso, espaol.
E-mail gratis! tunombre@redusers.com
93 1
6/22/05
15:20
Page 94
: =}{><.;~_+
WEBMASTERS
Lnea 6: El tipo de documento y el conjunto de caracteres usado. Como habamos nombrado anteriormente, la declaracin XML nos serva para especificar el conjunto de caracteres usado por un documento. Pero recordemos que incluir esta lnea de cdigo, tambin llamada XML prolog, nos llevaba a tener problemas con la mayora de los navegadores, por lo que decidimos omitirla. Ahora bien, cmo le decimos entonces al navegador el juego de caracteres que estamos usando en nuestro documento? Es aqu en donde entra en escena el meta tag http-equiv, el cual especifica el tipo de contenido que estamos sirviendo (en nuestro caso, text/html) y, adems, el juego de caracteres usado (ISO-8859-1). Es importante recordar que si no vamos a poner la declaracin XML de la lnea 1, deberemos especificar obligatoriamente el tipo de contenido del documento y el juego de caracteres de ste a travs de este meta tag. Lneas 9, 10 y 11: Diferencias con HTML. XHTML hered de XML dos caractersticas interesantes, que a simple vista lo hacen parecer ms estricto que HTML:
s El documento XHTML debe ser vlido. Incluyendo la declaracin DTD que deseemos, y limitndonos a slo los elementos especificados en ese DTD, cumpliremos fcilmente con este requisito. De cualquier manera, podemos comprobar si nuestro documento es vlido con la herramienta de validacin provista por el World Wide Web Consortium, explicada en detalle ms adelante. s El documento XHTML debe estar bien formado. Esto quiere de-
s Encierra los atributos de sus elementos entre comillas. Todos los atributos necesariamente deben ir entre comillas, incluso aquellos que son numricos. Ejemplo: <acronym title=Extensible Hypertext Markup Language>XHTML</acronym> <td colspan=2> s No soporta minimizacin de atributos. En HTML, el siguiente cdigo es vlido: <option selected>
En cambio, en XHTML, los atributos de un elemento deben ser escritos completamente, por lo cual, la lnea anterior en XHTML quedara como:
<option selected=selected>
Como vemos, la estructura de un documento XHTML puede parecer, al principio, ms estricta que la de un documento HTML. Esto es debido a que XHTML, al ser una aplicacin de XML, hereda de este lenguaje su nfasis en la estructura del documento. La idea detrs de estas restricciones es que, una vez que tenemos la estructura de un documento bien formada, ya sea XML o XHTML, cualquier parser o navegador podr entender su significado.
cir que tenemos que abrir y cerrar los elementos de manera correcta y en orden. Un ejemplo de dos lneas de cdigo XHTML mal formadas:
Este es nuestro primer documento. Este es nuestro primer documento.
DOCUMENTOS Y HERRAMIENTAS INDISPENSABLES

s Preguntas frecuentes sobre XHTML, por el W3C.
www.w3c.es/Traducciones/es/Markup/2004/xhtml-faq.htm
s Traduccin no oficial sobre la especificacin XHTML 1.0.
www.kusor.net/w3c/xhtmlbas/
Y, a continuacin, la misma lnea de cdigo respetando esta restriccin de XHTML (noten que el primer elemento en abrirse es siempre el ltimo en cerrarse):
Este es nuestro primer documento. s DTDs y Quirks Mode, tablas comparativas y ms informacin, en ingls.
hsivonen.iki.fi/doctype/
s HTML Tidy, corrige HTML mal formado.
http://tidy.sourceforge.net/
s TopStyle, excelente editor de XHTML y CSS.
Por otro lado, XHTML requiere que todos aquellos elementos que no tienen contenido, como <img> o <hr>, deben cerrarse agregando una barra invertida al final. Por ejemplo, a continuacin pueden ver el elemento <img> en XHTML (noten el espacio obligatorio entre el nombre del elemento y la barra invertida):
<img src=mi-imagen.png alt=Mi imagen />
www.bradsoft.com/topstyle
VALIDANDO NUESTRO CODIGO XHTML

Por validacin entendemos la accin de verificar que nuestro documento XHTML cumpla con la sintaxis estndar especificada en un DTD. Ahora bien, si al parecer, una pgina web se muestra correctamente en un navegador, incluso sin especificar un DTD, por qu, entonces, debemos validar nuestros documentos? Daremos dos razones que pueden ayudar a entender la necesidad de la validacin:
s Lo que uno est viendo no es lo que otros ven. Tal vez nuestro sitio web puede estar mostrndose correctamente cuando lo probamos con nuestro navegador preferido, pero en la prctica, muchos USR2.0
Adems de lo nombrado anteriormente, un documento XHTML:

s Tiene sus elementos y atributos escritos en minsculas. Recordemos que XHTML es una aplicacin de XML, el cual es sensible a las maysculas y minsculas; por lo tanto, el elemento no es lo mismo que el elemento .
1 94
Pidan su USERS: laquiero.tectimes.com
6/22/05
15:20
Page 95
: =}{><.;~_+^#
: = }{ >< . ; ~ _+ ^ #
: = }{> < .; ~ +^#
navegadores interpretan un sitio de maneras diferentes. El nico modo de asegurarnos de que nuestro sitio web ser mostrado de la forma en que deseamos en todos los agentes de usuario disponibles, es a travs de la validacin de nuestro cdigo XHTML.
s Evitar el Quirks Mode. Por definicin,
cuando el navegador no encuentra una lnea de cdigo especificando un DTD por usar en el documento, entra en un estado que se llama Quirks Mode. En este estado, el navegador interpreta que la pgina web puede contener cualquier conjunto de elementos HTML y XHTML, desde correctos hasta incorrectos, y por lo tanto, cambia su motor de renderizado de pginas al de correccin de errores. Este modo a prueba de fallas tiene varias deficiencias; una de ellas es que hace ms lento el proceso de carga de una pgina web, debido a que el navegador tiene que ir corrigiendo el cdigo a medida que lee la pgina.
La validacin de nuestros documentos XHTML se realiza a travs de una herramienta de libre acceso, provista por el W3C y disponible en http://validator.w3.org. Simplemente ingresaremos la URL del sitio por verificar en un formulario, o bien, subiremos el archivo XHTML desde nuestra PC. Una vez especificada la fuente, la herramienta procesa el documento y de-
vuelve la cantidad de errores encontrados, junto con una pequea explicacin de stos y la forma de corregirlos.
CONCLUSION
Aunque XHTML puede resultar un tanto estricto al principio, el proceso de conversin de HTML a XHTML no es complicado. Existen herramientas de libre uso, como HTML Tidy (ver recuadro de Herramientas tiles), que limpian el cdigo HTML, simplificando la conversin de grandes sitios y pginas web. El mundo actual de desarrollo de soluciones pensadas para la Web nos muestra una clara tendencia hacia la estandarizacin y el uso de XML como lenguaje universal de definicin de datos. El lenguaje predefinido de marcado para pginas web, HTML, fue repensando con miras hacia XML. En nosotros radica aprovechar todo su potencial. s
La herramienta online de validacin de pginas TML/XHTMLde la asociacin World Wide Web Consortium.
USR2.0
95 1

XHTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

XHTML

Uploaded by

Copyright:

Available Formats

92-95-Webmasters-U171.

UNA INTRODUCCION AL LENGUAJE DE MARCADO SUCESOR DE HTML

ANATOMIA DE UN DOCUMENTO XHTML

fasis en la estructura de un documento y

E-mail gratis! tunombre@redusers.com

DOCUMENTOS Y HERRAMIENTAS INDISPENSABLES

VALIDANDO NUESTRO CODIGO XHTML

Adems de lo nombrado anteriormente, un documento XHTML:

Pidan su USERS: laquiero.tectimes.com

: = }{> < .; ~ +^#

You might also like