Curso práctico de XHTML 1.0

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.

. Convirtiendo nuestro HTML en un documento XML bien formado

Simplemente tenemos que ir aplicando sobre el documento las reglas de buena formación del XML y eso lo podemos hacer utilizando las reglas que hemos definido en el apartado anterior.

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>

Al que no tenemos más que aplicarle las reglas de las que hemos hablado en el apartado anterior. Lo mejor es empezar por poner todas las etiquetas en minúsculas, y luego dedicarnos a comprobar que todas las etiquetas se cierren correctamente, a entrecomillar los atributos, etc. Como ya hemos dicho en alguna ocasión, el navegador IE5 es una estupenda herramienta para comprobar que un documento XML esté bien formado, por ello igual es recomendabe convertir este documento HTML en un documento XML: añadir cabecera XML, etc e ir validando los cambios que vayamos haciendo en el IE5.

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>

Observar como el código que iba dentro de la etiqueta script lo hemos colocado en un fichero externo hola.js. En este caso no hubiera sido necesario ya que no tiene ningún carácter que dé problemas, pero es recomendable acostumbrarnos a trabajar de esta manera.

. Comprobar que el documento XHTML es válido

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 no tenemos más que 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">

Y al validar,lo primero que observamos es la obligatoriedad que exista el elemento head.

<!ELEMENT html (head, body)>

Y dentro de este,el elemento title

A continuación observamos cómo se queja 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.

Y así sucesivamente vamos solucionando todos los problemas que nos dé el validador, hasta que obtengamos 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/

Validador XHTML

. Resumiendo

Por lo que hemos visto, no resulta muy complicado convertir un documento HTML a un documento XHTML válido. Depende esencialmente de lo mal que tengamos nuestro documento HTML. Si corregimos nuestros malos hábitos en el momento de codificar HTML, es decir,no nos olvidamos de entrecomillar todos los atributos, cerramos todas las etiquetas, las anidamos correctamente, mantenemos la estructura esencial de la página, etc., y lo escribimos todo en minúsculas, la conversión de HTML a XHTML tendría que ser prácticamente inmediata.

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
ARTÍCULO ANTERIOR

SIGUIENTE ARTÍCULO

¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.