Pasar de HTML a XHTML
Actualmente asociamos Internet con las computadores y navegadores que se ejecutan en ellas, pero en el futuro cercano Internet estará en todos lados: los teléfonos celulares, la TV y el refrigerador: podremos revisar los precios y ofertas de cada producto de la despensa y solicitar una cotización entre diferentes supermercados, además podremos pedir una pizza o un boleto para el cine sin usar el teléfono.
Hacer esto es imposible con HTML, pues los costos por crear una página para cada tipo de dispositivo serían prohibitivos. La solución ideal radica en crear un sólo documento que sea limpio, estricto y estandárizado y que apartir de él se estructure de manera diferente para cada caso particular. Hacer esto es muy difícil, quizás imposible, con HTML, un lenguaje de marcación donde la exigencia en la codificación es de escaso nivel, además en él la mala estructuración y la redundancia son frecuentes. Usted dirá que este aumento en la exigencia implica un aumento en las horas de trabajo pero la verdad es que no es así, si usted crea un sitio XHTML+CSS logrará una agilidad en el diseño sorprendente: en 50 minutos de tocar los estilos CSS su sitio obtendrá un nuevo, mejor e irreconocible diseño. Del modo tradicional tendría que dedicarle a esta tarea quizás un par de días. Además, los sitios hechos con XHTML son más rápidos y poseen un despliegue más elegante.
Una (gran) motivación para pasar nuestro sitio a XHTML radica en que HTML (actualmente en la versión 4.0) no se desarrollará más. Existe un acuerdo para abandonarlo paulatinamente en beneficio de XHTML (Extensible Hyper Text Markup Language).
La diferencia principal entre HTML y XHTML es que el código de este último se sujeta a un tipo de reglas que se especifican en el DOCTYPE (tipo de documento) con el que inicia todo documento XHTML. Veamos uná página elemental de XHTML:
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> <head> <title> ::EL titulo </title> </head> <body> <p>Este es mi primer XHTML !!</p> <br /> </body> </html>
La primera línea (xml version=”1.0″…) no es obligatoria, algunos navegadores como el IE 4.5 para Mac y el Netscape 4.0 no despliegan bien el código con esta línea, pero realmente hay muy pocos navegadores de este tipo hoy día. Colocar esta línea o no, es su elección. Sin embargo, está línea le indica al navegador la codificación de la página, en este caso el iso-8859-1 señala que la página actual será desplegada usando los carácteres de Europa Occidental (que incluyen al español). ¡Puede teclear los acentos y las eñes sin necesidad de aacute;, eacute; ntilde; y demás etcéteras!
El documento xhtml1-transitional.dtd contiene los lineamientos que los tags deben seguir para que la página sea un documento válido. Esto es interesante pues XHTML nos permite crear nuestros propios tags para estructurar nuestra información según nuestras necesidades. Al iniciarnos con XHTML usaremos el Document Type Declaration o DTD transitional, pues es un poco menos exigente en la marcación de los tags, sin embargo, cuando usted sienta que ya domina satisfactoriamente el XHTML, deberá pasarse al DTD strict.
La línea <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”es” lang=”es”> indica el elemento root (raíz) de la página. Si usted ha usado Linux sabe que del root (/) parten los elementos del sistema. Los documentos XHTML también deben tener un lugar de donde partir. Además del elemento root, esta línea señala que todo lo que se desprenda de él, estará en español (es).
Escribiendo XHTML
Veamos las diferencias principales en la codificación de XHTML con respecto a HTML.
1.- Todos los tags en minúsculas. tanto los tags como sus atributos deben ir en minúsculas. En HTML podemos tener:
<P><B> Este es un parrafo </B></P> <FORM ACTION=EDIT.PHP METHOD=POST>
Pero en XHTML debe ser:
<p><b> Este es un parrafo </b></p> <form action="edit.php" method="post">
2.- Correcta anidación de los tags. En XHTML no podemos intercalar desordenadamente los tags. En HTML podemos tener:
<p><i><b>Código mal anidado<i></b></p>
Pero en XHTML debe ser:
<p><b><i>Código bien anidado<i></b></p>
3.- Todos los atributos llevan comillas dobles. En HTML podemos tener:
<table align=center width=90% border=0>
Pero en XHTML debe ser:
<table align="center" width="90%" border="0">
4.- Todo tag abierto se cierra. incluso los tag img, type (de los formularios) y br deben cerrarse. En HTML podemos tener:
<input type="hidden" value="9" name="pass"> <br> <img src="imagen.jpg" alt="Imagen" title="Imagen" >
Pero en XHTML debe ser:
<input type="hidden" value="9" name="pass" /> <br /> <img src="imagen.jpg" alt="Imagen" title="Imagen" />
Además de cerrarse, el tag img debe tener el atributo alt y title, alt es “alternative text” (para los navegadores Web textuales como lynx o Links). Mientras, title es el tooltip que se despliega cuando colocamos el cursor del ratón sobre la imagen.
5.- JavaScript dentro de tag CDATA. Los javascripts que van dentro del cuerpo de la página (no en el header) deben estar dentro del tag CDATA. En HTML podemos tener:
<script language="JavaScript" type="text/javascript">
<!--
document.write("Hello World!");
-->
</script>
Pero en XHTML debe ser:
<script type="text/javascript">
<![CDATA[
document.write("Hello World!");
]]>
</script>
6.- Las anclas son IDs. Las anclas (anchor) que nos permiten navegar dentro una página grande, ya no son referenciadas por el tag a sino por el ID del elemento hacia el cual deseamos ir. En HTML podemos tener:
<a name=top> <img src=imagen.png> </a> <a href="#top"> Ir arriba </a>
Pero en XHTML debe ser:
<img src="imagen.png" id="top" title="Imagen" alt="Imagen" /></a><a href="#top">Ir arriba</a>
7.- Los atributos deben ser explícitos. Los atributos deben tener un nombre y un valor sin reducirlos. En HTML podemos tener:
<input type="radio" value="2" checked> <td nowrap> Texto </td> <option value="m" selected>
Pero en XHTML debe ser:
<input type="radio" value="2" checked="checked"> <td nowrap="nowrap"> Texto </td> <option value="m" selected="selected">
|
Artículos Relacionados ¿Cómo organizar una web? Como empezar una web: ¿Cómo organizar el sitio? Parte del problema con la Web hoy... Guías de navegación en la web Como empezar una web. Guías de navegación: ¿cómo averiguo dónde estoy? Esta cuestión es tan... Manual PHP. ¿Qué es PHP? una breve introducción Licencia del manual: Webs dinámicas con PHP Autor: Alvaro del Castillo Se otorga... Mapas y ayudas. Como hacer una web Como empezar una web: Mapas y ayudas Incluso en Sitios bien estructurados y con funciones... |
Artículo creado el 30/11/07
Última Actualización: 14/12/09
Autor y licencia
Autor: mononeurona
URL: mononeurona.org
13 Comentarios para “Pasar de HTML a XHTML”
Enlaces a esta entrada
- ¿Qué es el XHTML Doctype?
- Estructura de páginas web: Marcado semántico de contenidos
- Herramientas para diseñadores web: Editores HTML
- Consejos para ser un buen desarrollador web
- HTML – XHTML Doctype o versión del documento de una página web
- Maquetación de páginas web: posición de las capas (primera parte)
- HTML5, la tecnología que estaremos usando dentro de poco
RSS
Muy bueno el tutorial, como dicen los tiempos cambian, ahora HTML ya paso a ser historia. Pues con XHTML, Java, DHTMl, Etc… son la alternativa para una web mas vistosa y elegante…
Cuelguen Tutoriales de ASP, PERL y CGI
Chauu.. Hasta la Próxima
12/12/07 - 7:30 #
Tomo nota de tus sugerencias de tutoriales Elias ;) De ASP tienes un tutorial en la sección de manuales si te interesa.
Saludos.
13/12/07 - 23:04 #
Hola que tal soy novato en esto pero tengo una duda que tal vez para ustedes sea tonta si tengo una pagina web que hago con enlaces por ejemplo 10 enlaces pero despues quiero poner otro enlace como hago para que ese enlace salga en las 10 poginas sin estar poniendo en cada pagina el nuevo enlace espero haberme explicaco
26/12/07 - 4:55 #
Estoy triste por eso, cuando me meto al dreamweaver que es donde yo hago las paginas y le pongo xml que se supone que es lo mismo segun investigué, no sé si me equivoco, no me sale la vista de diseño, solo de código, y yo no soy programadora, soy diseñadora, qué hago ahora?
28/02/10 - 5:31 #
No es lo mismo, deberías programar tus páginas en XHTML si quieres usar XML, consigues un marcado mucho más limpio y correcto que con HTML. La vista de diseño no te va a salir a no ser que que uses lo que te digo, XHTML o HTML.
Saludos.
1/03/10 - 15:50 #
soy animador y diseñador estoy aprendiendo a realizar paginas web con esta pagina y alguna otra
queria consultarles si es conveniente q siga viendo html o lo deje y practique con actionscrpt xhtml css gracias
12/06/10 - 0:15 #