por Patricio GaldamesXHTMLXHTML es una reformulación de HTML que normaliza y modulariza el lenguaje. XHTML está basado en XML y por lo tanto puede funcionar con aplicaciones hechas para XML. XHTML tiene algunas diferencias con HTML, que se examinan en este artículo.
La especificación que define a XHTML 1.0 (recomendación W3C del 26 de enero del 2000) consiste en una reformulación de las tres definiciones de tipo de documento HTML 4.0 (DTDs) como aplicaciones XML. Su finalidad es ser usado como lenguaje de contenidos que es a su vez conforme a XML. Aplicando algunas directrices (guidelines) es posible que agentes de usuario HTML sean compatibles con XHTML. Algunas mejoras que pueden ser percibidas para quienes migran a XHTML 1.0 son:
HTML 4.0 [1] es una aplicación SGML (Lenguaje de Etiqueta Generalizado Estándar) conforme al estándar internacional ISO 8879 y está ampliamente considerado como el lenguaje de publicación estándar del World Wide Web. SGML [1] es un lenguaje para describir lenguajes de Etiquetas, particularmente aquellos usados en intercambio de documentos electrónicos, manejo de documentos y publicación de ellos. HTML es un ejemplo de un lenguaje definido en SGML XML [1] es un lenguaje de Etiqueta extensible, que fue concebido de modo de sacar lo mejor de potencia y flexibilidad de SGML y evitando su complejidad. Aun siendo una forma restringida de SGML, XML retiene las características mas usadas de SGML. Los nombres de elementos y atributos deben escribirse en minúsculas. El XML es sensible a la utilización de mayúsculas y minúsculas, lo que significa que las elementos <LIBRO> y <libro> son diferentes según la especificación XML. Mas aún si consideramos las DTDs que conforman el XHTML, sus elementos y atributos están definidos en minúsculas, de modo que las etiquetas del código XHTML deben estar siempre en minúsculas. El siguiente código: <BODY BgColor="#000000"> puede ser correcto en HTML pero en XHTML tiene que ser: <body bgcolor="#000000"> Todos los valores de los atributos deben ir entrecomillados. En HTML es posible escribir expresiones del tipo: <table border=2> pero una de las reglas de buena formación del XML es la obligatoriedad de entrecomillar todos los atributos. Por tanto, la anterior expresión en XHTML tendría que ser: <table border="2"> siendo las comillas tanto simples como dobles. Todos los elementos "no vacíos" deben ir entre la etiqueta de principio y la etiqueta de final. Con el XHTML se ha terminado la extendida costumbre del HTML de no cerrar las etiquetas con contenido. En HTML en algunos elementos podía omitirse la etiqueta de cierre, de tal manera que la apertura de los elementos que le sucedían implicaba dicho cierre. Esta omisión no está permitida en XHTML, y por tanto todos los elementos que no estén declarados en la DTD con EMPTY deben tener una etiqueta de cierre. Por ejemplo, el siguiente código: <p>Cursos: <ul> <li>CC52R <li>EL721 </ul> en XHTML tendremos que escribirlo: <p>Cursos:</p> <ul> <li>CC52R</li> <li>EL721</li> </ul> Todos los elementos deben estar anidados ordenadamente. En HTML no hace falta tener especial cuidado en ordenar los anidamientos de las etiquetas (etiquetas dentro de otras etiquetas), siendo posible que existan solapamientos. Al igual que sucede con XML, en XHTML no se permiten tales libertades, debiendo tener especial cuidado en el orden en el que se realizan los anidamientos. Por consiguiente la siguiente expresión que en HTML es correcta: <p>Este texto <b>negrita<i> y cursiva</b></i></p> en XHTML tendremos que escribirla de la siguiente manera: <p>Este texto <b>negrita<i> y cursiva</i></b></p> El XML no soporta la minimización de atributos. Los pares atributo-valor deben escribirse en toda su extensión. Los nombres de atributos como compac, checked, etc. no pueden aparecer en elementos sin que sea especificado su valor. El siguiente código: <OPTION VALUE="valor" SELECTED> <INPUT TYPE="tipo" CHECKED> <DL COMPACT> En XHTML debería escribirse: <option value="valor" selected="selected"> <input type="tipo" checked="checked"> <dl compact="compact"> Los elementos "vacíos" deben llevar terminación, los cuales deben tener una etiqueta de cierre o bien terminar su etiqueta de apertura con />. Por ejemplo, expresiones del tipo <hr> <br> deberan escribirse en XHTML: <hr/> <br/>, las cuales son una forma resumida de escribir <hr> </hr> y <br> </br>. Los documentos XHTML deben incluir una declaración de "tipo de documento." Aunque esta norma ya existe en los documentos HTML (al ser aplicaciones SGML) se utiliza en muy pocas ocasiones. En el XHTML su utilización es obligatoria, y es necesario que antes del elemento raíz exista una declaración DOCTYPE. El identificador público incluido en la declaración DOCTYPE a alguna de las tres siguientes DTD: strict, transitional y Frameset, siendo todas ellas unas aproximaciones más o menos completas a la especificación HTML 4. Su declaración y características más importantes son:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/1999/PR-xhtml1-19991210/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/1999/PR-xhtml1-19991210/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/1999/PR-xhtml1-19991210/DTD/xhtml1-frameset.dtd"> En todos los casos es evidente que el identificador del sistema puede ser modificado apropiadamente para reflejar convenciones de rango local. El elemento raíz del documento XHTML debe ser <html> y en el debemos declarar el "namespace" usando el atributo xmlns. EL "namespace" para XHTML es: http://www.w3.org/1999/xhtml. En XHTML, los elementos style y script se declaran como elementos con contenido #PCDATA. Pero en estos elementos se puede colocar todo tipo de código y por lo que los elementos < y & serán tratados como comienzos de etiquetado, y entidades como < y & serán reconocidas como referencias a las entidades < y & respectivamente por el procesador XML. Englobar el contenido del elemento script y style dentro de una sección como CDATA evita el procesamiento de estas entidades. Por tanto, lo que en HTML escribimos así: <SCRIPT LANGUAGE="JavaScript">
document.write("<p>Esto es una prueba</p>");
</SCRIPT>
En XHTML lo debemos escribir asi: <script language="JavaScript">
<![CDATA[ document.write("<p>Esto es una prueba</p>"); ]] >
</script> El único carácter que no está permitido dentro es el que indica el cierre de la marca CDATA, es decir, el código ]] >. En muchos casos se puede evitar la utilización de las secciones CDATA, incluyendo los códigos en archivos externos y aplicando variantes similares a: <script language="JavaScript" src="codigo.js"></script> <link href="nombre_hoja_de_estilo.css"/> A continuación se escribira un documento XHTML sencillo, válido, que se ajuste a la strict.dtd. <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Los mejores buscadores</title> </head> <body> <p>Los mejores buscadores:</p> <p><a href="http://www.todocl.cl/">Todocl</a>.</p> <p><a href="http://www.google.com">Google</a></p> </body> </html> Para poder validar el documento se requiere en el mismo directorio la DTD xml html1-strict.dtd y los archivos de entidades a los que hace referencia. <!--================ Character mnemonic entities --> <!ENTITY % HTMLlat1 PUBLIC "-//W3C//ENTITIES Latin 1 for XHTML//EN" "xhtml-lat1.ent"> %HTMLlat1; <!ENTITY % HTMLsymbol PUBLIC "-//W3C//ENTITIES Symbols for XHTML//EN" "xhtml-symbol.ent"> %HTMLsymbol; <!ENTITY % HTMLspecial PUBLIC "-//W3C//ENTITIES Special for XHTML//EN" "xhtml-special.ent"> %HTMLspecial; Una vez que tenemos todo esto en el mismo directorio no nos queda más que validar el documento con algun parser de XML: pxml ejem_xhtml.htm Para validar el documento XML se puede utilizar cualquier parser de XML. XMLSoftware [3] es una buena dirección para encontrar el que más se adapte a vuestro entorno. EL XHTML es una aplicación XML y como tal, podemos utilizar las herramientas que se utilizan para trabajar con éste. Por tanto, se puede hacer una XSLT que generara una página HTML con todos los enlaces del documento XHTML, como se muestra a continuación: <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:html="http://www.w3.org/1999/xhtml" exclude-result-prefixes="html"> <xsl:template match="html:html"> <html> <head> </head> <body> <p><b>Lista de enlaces de un documento XHTML</b></p> <ul> <xsl:for-each select="//html:a">
<li> <a href="{@href}"><xsl:value-of select="."/></a>
</li> </xsl:for-each> </ul> </body> </html> </xsl:template> </xsl:stylesheet> Note como la XSLT debe definir el "namespace" que utiliza el documento XHTML y le indica que lo coloque en el documento de salida. Para más información sobre como combinar XML y XSLT para generar HTML ver [2,3] Son necesarios dos pasos para convertir un documento HTML en un documento XHTML válido. En primer lugar hemos de asegurarnos que está bien formado y en segundo lugar ver que es válido respecto de alguna de las tres DTD que conforman el XHTML. Primero debemos aplicar sobre el documento las reglas de buena formación del XML y eso lo podemos hacer utilizando las reglas que hemos definido anteriormente. Para ello, vamos a usar el siguiente ejemplo: <html> <script language="Javascript">
function Hola(){
alert ("Hola");
} </script> <body> <h1>Página HTML que convertiremos en XHTML</h1> <p>Esto es un párrafo con una texto en <b>negrita <i> y</B> cursiva </i>. <p>Esto es un párrafo en el que coloco un salto de linea. <br> Y ahora continuamos aqui.</p> <P align=center>Esto es texto centrado</P> <ul> <li>Esto es una lista con un enlace a una función de <a href="javascript:Hola()">javascript</a></li> <li>Esto es otra lista con una imagen <img src="lapiz.gif"> <li><font size="4" color=red>Este es otro elemento de la lista con otro color y tamaño de fuente mayor.</font> </ul> <p>y para terminar un formularío</p> <form> <input type="checkbox" checked>Opcion 1 <input type="checkbox">Opción 2 </form> </body> </html> A este documento se le aplican las reglas de las que se han expuesto anteriormente. Se recomienda al comenzar poner todas las etiquetas en minúsculas para luego comprobar que todas las etiquetas se cierran correctamente, entrecomillar los atributos, etc. Para comprobar el documento XML puede usarse el navegador IE5 por lo que al inicio debe añadir la cabecera XML, y luego validar los cambios Una vez realizados todos estos cambios y que hayamos conseguido verlos en el IE5 o validarlos respecto de un parser de XML, el documento HTML anterior quedaría de la siguiente manera: <?xml version="1.0" encoding="ISO-8859-1"?> <html> <script language="Javascript" src="hola.js"></script> <body> <h1>Página HTML que convertiremos en XHTML</h1> <p>Esto es un párrafo con una texto en <b>negrita </b> y <i>cursiva </i>.</p> <p>Esto es un párrafo en el que coloco un salto de linea. <br /> y ahora continuamos aqui.</p> <p align="center">Esto es texto centrado</p> <ul> <li>Esto es una lista con un enlace a una función de <a href="javascript:Hola()">javascript</a></li> <li>Esto es otra lista con una imagen <img src="lapiz.gif" /></li> <li><font size="4" color="red">Este es otro elemento de la lista con otro color y tamaño de fuente mayor.</font></li> </ul> <p>y para terminar un formularío</p> <form> <input type="checkbox" checked="checked" />Opción 1 <input type="checkbox" />Opción 2 </form> </body> </html> Note como el código que iba dentro de la etiqueta script ha sido colocado en un archivo externo hola.js. El siguiente paso es comprobar que se ajusta a alguna de las DTD que conforman el XHTML. En nuestro caso, al no utilizar CSS y darle el aspecto mediante etiquetas, tenemos que comprobar que se ajusta a la transitional.dtd. Para ello se debe colocar en la cabecera del documento la declaración de tipo de documento: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "xhtml1-transitional.dtd"> Al validarlo primero se observara la obligatoriedad de que exista el elemento head. <!ELEMENT html (head, body)> A continuación se observa el reclamo que indica que el elemento script debe utilizar de forma obligatoria el atributo type: <!ATTLIST script charset %Charset; #IMPLIED type %ContentType; #REQUIRED Donde debemos indicar de qué tipo es el contenido de la etiqueta script en nuestro caso text/javascript. Realizando estas correciones y validaciones hasta que se obtenga el siguiente documento XHTML válido: <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "xhtml1-transitional.dtd"> <html> <head> <title>Ejemplo de documento HTML convertido a XHTML</title> <script type="text/javascript" language="Javascript" src="hola.js"></script> </head> <body> <h1>Página HTML que convertiremos en XHTML</h1> <p>Esto es un párrafo con una texto en <b>negrita </b> y <i>cursiva </i>.</p> <p>Esto es un párrafo en el que coloco un salto de linea. <br /> y ahora continuamos aqui.</p> <p align="center">Esto es texto centrado</p> <ul> <li>Esto es una lista con un enlace a una función de <a href="javascript:Hola()">javascript</a></li> <li>Esto es otra lista con una imagen <img src="lapiz.gif" alt="Imagen de un lapiz" /></li> <li><font size="4" color="red">Este es otro elemento de la lista con otro color y tamaño de fuente mayor.</font></li> </ul> <p>y para terminar un formularío</p> <form action="accion_asociada"> <input type="checkbox" checked="checked" />Opcion 1 <input type="checkbox" />Opción 2 </form> </body> </html> También tenemos la posibilidad de validar nuestro código en Internet desde el validador que el W3C tiene en http://validator.w3.org/ Es posible realizar la conversión de documentos HTML en XHTML de forma totalmente automática. Para ello deberemos utilizar una herramienta desarrollada por Dave Raggett denominada Tidy.[3] 1. Instalación y funcionamiento de Tidy
Su instalación no tiene ningún inconveniente, ya que es un simple archivo ejecutable que no necesita ninguna instalación especial. La ejecución se realiza desde la linea de comandos del siguiente modo: tidy -f errores.txt archivo_entrada > archivo_salida Con el parámetro -f se indica el archivo donde se escribirán los errores del documento HTML. Por ejemplo para un documento HTML llamado test.htm se debe escribir: tidy -f errores_test.txt test.htm > test_n.htm Debemos observar que la salida no es XHTML, sino simplemente un documento HTML correguido. Algunos errores son modificados por la aplicación y otros simplemente son indicados en el archivo de errores errores_test.txt para que el diseñador los modifieque. El Tidy dispone de un amplio número de parámetros que nos permiten parametrizar la salida de muy diferentes maneras. Para ver algunas de estas posibilidades debe de ejecutar: tidy -h Se recomienda ser cuidadoso con la opción -m mediante la cual se indica que los cambios se producen sobre el archivo original. En la documentación de la aplicación se encuentran definidos con más detalle todos los parámetros que podemos utilizar. Entre ellos el parámetro --output-xhtml, mediante el cual se indica que la salida sea XHTML. tidy --output-xhtml yes --alt-text imagen test.htm > test_a.htm Estamos convirtiendo el archivo test.htm en el archivo XHTML test_a.htm forma automática, e incluso se indica que para las imágenes el atributo alt sea por defecto el texto imagen. El tidy es capaz de trabajar con un archivo de configuración, lo que permite evitar tener que reescribir los parámetros todas las veces que se utilicen. Este archivo de configuración se referencia mediante el parámetro: -config. Por tanto, para el ejemplo anterior podríamos escribir el siguiente archivo tidy_conf.txt: alt-text: imagen output-xhtml: yes Para luego al ejecutar la aplicación de la siguiente manera, se obtendrian los mismos resultados. tidy -config tidy_conf.txt test.htm > test_a.htm 2. Visualizar XHTML en los navegadores actuales
Los documentos XHTML que hemos generado se visualizan sin problemas en el navegador IE5, pero esto no es así en todos los navegadores, inclusive en algunos de éllos hay problemas debido a los elementos vacíos como <br/>, <hr/>. Aunque, según la especificación no hay ninguna obligación de que los documentos XHTML 1.0 sean compatibles con los navegadores existentes, en la práctica es algo fácil de conseguir. Las principales directrices para crear documentos compatibles según la especificación son las siguientes:
Existen algunas directrices más, pero estas son las mas comunes y suficientes para conseguir que nuestros documentos XHTML se vean correctamente en los navegadores actuales. XHTML 1.0 provee la base para una familia de tipos de documentos que lo extenderá y será parte de XHTML, con el fin de dar apoyo aun rango amplio de nuevos dispositivos y aplicaciones, mediante la definición de módulos y la especificación de un mecanismo que combine estos módulos. Este mecanismo extenderá y ampliara XHTML 1.0 en una manera uniforme a través de la definición de estos módulos La recomendación W3C que describe XHTML1.1 fue publicado el 31 de mayo del 2001, esta define un nuevo tipo de documento que esta basado en un marco de módulos que están definidos en el documento de modularización de XHTML. Se busca que este nuevo tipo de documento sea la base para extender la familia XHTML y proveer consistencia, compatibilidad para aquellas opciones a eliminar (deprecated). Esta recomendación básicamente es una reformulación de XHTML 1.0 Strict incluyéndole el uso de módulos XHTML. Esto último implica que muchas de las facilidades de XHTML, por no son disponibles. Estas se han incorporado en módulos aparte. XHTML 1.1 da de baja el soporte para los siguientes tipos de elementos
El tipo de documento XHTML 1.1 esta hecho de los siguientes módulos, los cuales están definidos en el documento Modularización de XHTML[4].
El empleo de los módulos se realiza declarándolos como DTDs en el encabezado del documento XHTML. Ejemplo: 3. Definición del modulo Hipertexto
<!-- ...................................................................... -->
<!-- XHTML 1.1 Hypertext Module .......................................... -->
<!-- file: xhtml11-hypertext-1.mod
This is XHTML 1.1, a modular variant of XHTML 1.0.
Copyright 1998-2000 W3C (MIT, INRIA, Keio), All Rights Reserved.
Revision: $Id: xhtml-modularization-20000105.html,v 1.2 2000/01/05 20:59:27 shane Exp $ SMI
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//ELEMENTS XHTML 1.1 Hypertext 1.0//EN"
SYSTEM "xhtml11-hypertext-1.mod"
Revisions:
(none)
....................................................................... -->
<!-- Hypertext
a
This module declares the anchor ('a') element type, which
defines the source of a hypertext link. The destination
(or link 'target') is identified via its 'id' attribute
rather than the 'name' attribute as was used in HTML.
-->
<!-- ............ Anchor Element ............ -->
<!ENTITY % A.element "INCLUDE" >
<![%A.element;[
<!ENTITY % A.content
"( #PCDATA | %Inline-noa.mix; )*"
>
<!ELEMENT a %A.content; >
<!-- end of A.element -->]] >
<!ENTITY % A.attlist "INCLUDE" >
<![%A.attlist;[
<!ATTLIST a
%Common.attrib;
href %URI.datatype; #IMPLIED
charset %Charset.datatype; #IMPLIED
type %ContentType.datatype; #IMPLIED
hreflang %LanguageCode.datatype; #IMPLIED
rel %LinkTypes.datatype; #IMPLIED
rev %LinkTypes.datatype; #IMPLIED
accesskey %Character.datatype; #IMPLIED
tabindex %Number.datatype; #IMPLIED
>
<!-- end of A.attlist -->]] >
<!-- end of xhtml11-hypertext-1.mod -->
[1] XHTML 1.0: The Extensible HyperText Markup Language [2]XHTML, una llamada al orden para el HTML [3]Curso práctico de XHTML 1.0
|