Curso práctico de XHTML 1.0

A continuaci�n vamos a ver,las diferencias que existen hoy en d�a entre el HTML que se escribe y el XHTML y,adem�s veremos las novedades que introduce el XHTML respecto al HTML.

Lo m�s importante de la siguiente enumeraci�n de diferencias y novedades es darnos cuenta que se producen porque el XHTML es una aplicaci�n XML y, por tanto, que como m�nimo se deben cumplir las reglas de buena formaci�n que ya estudiamos en el cap�tulo 2.

  • Tomado como un todo, cumple la regla denominada "document"
  • Respeta todas las restricciones de buena formaci�n dadas en la especificaci�n.
  • Cada una de las entidades analizadas que se referencia directa o indirectamente en el documento est� bien formada.

.�Diferencias entre el HTML y el nuevo XHTML

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.

Y adem�s si nos fijamos en las DTD que conforman el XHTML sus elementos y atributos est�n definidos en min�sculas; por tanto, 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 ya sabemos que es posible escribir expresiones del tipo:

<table border=2>

pero como hemos visto 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 constumbre 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 ejemlo, el siguiente c�digo:

<p>Nombres:
  <ul>
    <li>Joaquin
    <li>Manuel
  </ul>

en XHTML tendremos que escribirlo:

<p>Nombres:</p>
  <ul>
    <li>Joaquin</li>
    <li>Manuel</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 conseguiente 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>

Minimizaci�n de los atributos.

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 elementos vac�os deben tener bien una etiqueta de cierre bien terminar su etiqueta de apertura con />.

Por ejemplo,expresiones del tipo <hr> <br> deberan escribirse en XHTML: <hr/> <br/>

.�Novedades

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) la verdad es que 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:

- strict

Se utiliza cuando se da formato a los textos a trav�s de CSS (Cascading Style Sheets), o sea, cuando no se recurre a las etiquetas <font> etc, para controlar la forma en la que los navegadores muestran el contenido del documento.

La declaraci�n del tipo de documento debe ser de la siguiente manera:

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/1999/PR-xhtml1-19991210/DTD/xhtml1-strict.dtd">

- transitional

Se utiliza cuando no se describe la presentaci�n de los documentos por medio de hojas de estilo en cascada, prefiriendo realizarlo a base de etiquetas. Es el sistema adecuado para cuando se desea facilitar el acceso a usuarios con navegadores sin posibilidades de tratamiento de CSS

La declaraci�n del tipo de documento debe ser de la siguiente manera:

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/1999/PR-xhtml1-19991210/DTD/xhtml1-transitional.dtd">

- frameset

Se utiliza cuando los documentos incorporan cuadros.

La declaraci�n del tipo de documento debe ser de la siguiente manera:

<!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

El elemento ra�z del documento XHTML debe ser <html> y en �l debemos declarar el "namespace" usando el atributo xmlns. EL "namespace" para XHTML es: http://www.w3.org/1999/xhtml

Los elementos <script> y <style>

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 tanto,los elementos <,y & ser�n tratados como comienzos de etiquetado, y entidades como &lt; y &amp; seran 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"/>

.�Algunos ejemplos

.�Un peque�o documento XHTML valido

A continuaci�n escribimos un documento XHTML sencillo, v�lido, que se ajuste a la strict.dtd.

�ste documento XHTML v�lido respecto de 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" lang="sp">
  <head>
    <title>Los mejores buscadores</title>
  </head>
  <body>
	 <p>Los mejores buscadores:</p>	
    <p><a href="http://www.terra.es/">Terra</a>.</p>
	 <p><a href="http://www.altavista.com">Altavista</a></p>
  </body>
</html>

Hemos modificado el identificador del sistema para poder trabajar en local.

Para poder validar el documento no hace falta colocar en el mismo directorio la DTD xmlhtml1-strict.dtd y los ficheros 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 nuestro parser de XML:

pxml ejem_xhtml.htm

Fijaros c�mo estamos trabajando con un documento HTML del cual podemos comprobar su validez con un parser XML. ��Ventajas de trabajar con documentos XML��

NOTA: Para validar el documento XML pod�is utilizar cualquier parser de XML. XMLSoftware es una buena direcci�n para encontrar el que m�s se adapte a vuestro entorno.

.�Obtener todos los enlaces de un documento XHTML

�C�mo podr�amos obtener una lista con todos los enlaces de un documento XHTML?

EL XHTML es una aplicaci�n XML y, como tal, podemos utilizar las herramientas que normalmente utilizamos para trabajar con �ste. Por tanto, podr�amos hacer una XSLT que nos generase una p�gina HTML con todos los enlaces del documento XHTML.

<?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>

C�digo XSLT

Fijaros c�mo en la XSLT debemos definir el "namespace" que utiliza el documento XHTML y le indicamos que no lo ponga en el documento de salida.

NOTA: Para m�s informaci�n sobre como combinar XML y XSLT para generar HTML os recomiendo visitar el art�culo que sobre este tema escribimos hace unos meses.

El resultado (aplicado sobre el documento XHTML del ejercicio anterior) lo pod�is ver en la p�gina enlaces.htm.

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP
SIGUIENTE ARTÍCULO