XHTML

1. XHTML Félix Cruza Lucas-Vaquero Rosa María Zaragoza Gómez María Merchante Nieto

2. SGML(Lenguaje de Etiquetado Generalizado Estándar) SGML es un lenguaje para la descripción de lenguajes de etiquetado, particularmente aquellos usados en el intercambio electrónico, manejo y publicación de documentos. HTML,XML Y XHTML son ejemplos de lenguajes definidos en SGML.

3. SGML es utilizado desde mitad de los 80 y ha permanecido bastante estable. Gran parte de su estabilidad se la debe al hecho de que el lenguaje es a la vez flexible y rico en posibilidades. Esta flexibilidad tiene sin embargo su coste, el nivel de complejidad que ha inhibido su uso en diversos ámbitos como la World Wide Web. HTML resolvió el problema de la complejidad de SGML sirviéndose de un reducido conjunto de etiquetas estructurales y semánticas apropiadas para la realización de documentos relativamente simples.

4. XML fue concebido como un medio para recobrar la potencia y flexibilidad de SGML sin que adquiriese su gran complejidad. A pesar de ser una forma restringida de SGML, XML conserva casi toda la potencia y riqueza de las características de SGML. Aún manteniendo estas características, XML elimina las más complejas de SGML que hacían la creación y diseño de los programas apropiados difícil y costosa.

5. El HTML no es más que un tipo de documento SGML que se utiliza en la Web, mientras que el XML no es ningún tipo de documento SGML, sino que es una versión abreviada de SGML optimizada para su utilización en Internet. Esto significa que con él vamos a poder definir nuestros propios tipos de documentos (podremos definir nuestras propias etiquetas) y, por tanto, ya no dependeremos de un único e inflexible tipo de documento HTML.

6. El XML más que una extensión de HTML hay que considerarlo como un SGML-- optimizado para su utilización en Internet. Diferencia entre el SGML, XML y HTML

7. QUÉ ES XHTML XHTML significa eXtensible HyperTextMarkup Languagey es la versión modernizada del tradicional HTML4, pero basado en XML y por lo tanto puede funcionar con aplicaciones hechas para XML. Su finalidad es ser usado como lenguaje de contenidos que es a la vez conforme a XML y, si se siguen algunas sencillas directrices. XHTML es una reformulación de HTML que normaliza y modulariza el lenguaje.

8. Se trata, por lo tanto, de los mismos elementos (etiquetas o tags) que en HTML pero con la sintaxis y normas de XML. Con este vocabulario se pretende crear un HTML realmente estándar con unas normas bien definidas, de modo que todos los navegadores que reconozcan XHTML procesen los documentos de la misma forma Es un lenguaje semántico, lo que quiere decir que no definimos el aspecto de las cosas, sino lo que significan. Para controlar el aspecto de nuestra página lo hacemos con las CSS.

9. CSS(HOJAS DE ESTILO) CSS son las siglas de "Cascade StyleSheet". Se trata de una especificación sobre los estilos físicos aplicables a un documento XHTML. Cascadesignifica cascada, y tiene que ver con la herencia. En CSS los elementos hijos heredan todas las propiedades de sus padres. Si el documento XHTML está bien estructurado, podemos cambiar totalmente su apariencia sin tocar una sola línea de código en el archivo .html, con sólo cambiar la CSS. Esto nos permite separar el contenido del aspecto, y es de gran importancia.

10. Hay dos opciones para insertar estilos en un documento XHTML. Lo más normal es hacerlo en un archivo externo (que se llama hoja de estilos) y enlazarlo desde nuestro docu- mento XHTML. Esto tiene una ventaja muy grande y es que podemos tener muchas páginas enlazando a la misma hoja de estilos. Si más adelante queremos cambiar algo, sólo hemos de modificar un archivo (la hoja de estilos) y afectará a todas las páginas. Podemos enlazar una o más hojas poniendo esto dentro de la cabecera (head): <link href="nuestra_hoja.css" rel="stylesheet" type="text/css" /> La otra opción es escribir la información referente a los estilos en el mismo archivo XHTML. Lo podemos hacer escribiendo entre las etiquetas <style>y </style>, que también deben ir en la cabecera.

11. Si hacemos las dos cosas a la vez, siempre tienen prioridad las reglas que estén dentro de <style>. En una hoja de estilos utilizamos reglas que consisten en elegir selectores a los que asignamos una serie de propie- dades. Por ejemplo, si queremos que nuestra página web tenga el fondo blanco, las letras grises y use una fuente Arial de 11 píxeles de tamaño, escribimos:

12. body { background-color:#fff; color: #666; font-family: Arial, sans-serif; font-size: 11px; } Las CSS las puedes crear con un editor de texto o también hay editores de CSS como ‘TopStyle’ ó ‘EasyCSS’

13. DTD Una DTD, o definición del tipo de documento, es una colección de declaraciones XML que define la estructura reglamentaria, los elementos y atributos que están disponibles para su uso en documentos que cumplan con la DTD. Los documentos XHTML deben incluir una declaración de DTD. Aunque esta norma ya existe en los documentos HTML (al ser aplicaciones SGML) se utiliza en muy pocas ocasiones.

14. 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:

15. 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">

16. 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">

17. 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">

18. CÓMO FUNCIONA XHTML XHTML está basado en etiquetas. Una etiqueta tiene la siguiente forma: <etiqueta> Algo aquí dentro </etiqueta> Para que los navegadores antiguos no se vuelvan locos se deja un espacio en blanco entre el nombre de la etiqueta y la barra /, de la siguiente manera: <etiqueta /> Hay etiquetas que pueden modificarse mediante atributos: <etiqueta atributo="valor"> Casi todas las etiquetas de XHTML son las mismas que las de HTML, pero algunas como <font> no se usan. Por último, comentar un par de reglas que siguen las etiquetas: siempre en minúsculas y los atributos entre comillas, esto es obligatorio.

19. ESTRUCTURA DE UN DOCUMENTO XHTML La primera línea que debemos tener en nuestro documento XHTML es la que marca la codificación: <?xml version="1.0"encoding="UTF-8"?>A continuación tenemos que indicar el DOCTYPE. Se encarga de decirle al navegador que contiene el archivo que está abriendo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

20. Después del DOCTYPE tenemos a la cabecera y al cuerpo encerrados entre las etiquetas <html> y </html>. Pero en esa etiqueta tenemos que indicar una serie de cosas, como que nuestro documento es XHTML y la lengua que utilizamos. Si escribimos en castellano, nos quedaría así: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> A partir de aquí es igual que HTML. A continuación se muestra un ejemplo:

21. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-  strict.dtd” > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> <head> <title>Título de la web</title> </head> <body> Aquí va el cuerpo de la web </body> </html>

22. DIFERENCIAS ENTRE HTML Y XHTML Se eliminan elementos no semánticos: • Desaparece las etiquetas de HTML <font>, <center>. • Desaparecen varios atributos de formato. • El aspecto del documento se describe únicamente a través de hojas de estilo. • Aunque la especificación XHTML 1.0 Frameset permite el uso de frames (marcos), en una página tanto la Transitional como la Strict los prohíben.

23. Los documentos deben ser gramaticalmente correctos: se permiten los elementos anidados, pero no solapados. CORRECTO: elementos anidados <p>he aquí un <em>párrafo</em> enfatizado.</p> INCORRECTO: elementos solapados <p>he aquí un <em>párrafo</p> enfatizado</em>

24. Al ser XML, se exige: • Incluir siempre la etiqueta "doctype" apropiada. • Todas las etiquetas deben cerrarse, aunque sea poniendo una barra "/", como, por ejemplo: <br> pasa a ser <br />. • Sólo pueden incluirse datos en formatos admitidos por XML. Esto da problemas para incluir JavaScript en los documentos directamente. • Todos los atributos deben tener un valor, y meterlo entre comillas. • Los nombres de elementos y atributos deben estar en minúsculas.

25. Compatibilidad parcial con navegadores antiguos: la información se visualiza, aunque sin formato. Apuntar que el XHTML 1.0 fue diseñado expresamente para ser mostrado en navegadores que soportan HTML de base. Un mismo documento puede adoptar diseños radicalmente distintos en distintos aparatos, pudiendo incluso escogerse entre variosdiseños para un mismo medio. Facilidad de edición directa del código y de mantenimiento. Formato abierto, compatible con los nuevos estándares que actualmente está desarrollando el W3CC como recomendación para futuros agentes de usuario o navegadores. VENTAJAS

26. Algunos navegadores antiguos no son totalmente compatibles con los estándares, lo que hace que las páginas no siempre se muestren correctamente. Esto cada vez es menos problemático, al ir cayendo en desuso. Muchas herramientas de diseño web aún no producen código XHTML correcto. INCONVENIENTES

27. COMPATIBILIDAD CON LOS NAVEGADORES Se pueden eliminar la mayoría de los problemas de compatibi- lidad de navegadores de una página con sólo verificar si el código es correcto, pasándolo por un validador   Los documentos XHTML que hemos generado se visualizan sin problemas en el navegador IE5, pero esto no es así en todos los nave- gadores. En algunos de éllos hay problemas, debido sobretodo a los elementos vacíos como <br/>, <hr/>, etc. Aunque, según la especificación no hay ninguna obligación que los documentos XHTML 1.0 sean compatibles con los navega- dores 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:

28. -Elemento vacíos. Incluir un espacio en blanco antes de la barra y ángulo de cierre / y > de los elementos vacíos, por ejemplo: <br />, <hr /> y <img src="imagen.gif" alt="imagen" />. También usar la sintaxis minimizada de etiquetas para los elementos vacíos, por ejemplo <br />, dado que la sintaxis alternativa a <br></br> permitida por XML da resultados no previsibles en muchos de los navegadores ya existentes. Debemos fijarnos como la aplicación Tidy tiene en cuenta esta regla en el momento de generar el XHTML. • -Minimización de elementos. Dado un elemento vacío cuyo modelo de contenido no es empty, como por ejempo un título o un párrafo, no utilizar la forma minimizada, es decir escribirlo como: <p> </p> en lugar de <p/>.

29. -Hojas de estilo y archivos de código incrustados.Usar hojas de estilo externas o ficheros de código externo si la hoja o el código en cuestión utiliza los caracteres < o & o ]]> o --. Notar que los analizadores XML tienen permitido suprimir el contenido de los comentarios. De esta manera, la práctica común hasta ahora de "esconder" los fragmentos de código (script) y hojas de estilo (style) entre comentarios, para hacerlos invisibles a antiguos navegadores, normalmente no funcionará en aplicaciones basadas en XML. • -Saltos de línea dentro de valores de atributos. Evitar • saltos de línea y múltiples espacios en blanco dentro de los valores de los atributos. Estos son manipulados de manera inconsistente por los navegadores.

30. -Uso del carácter & en valores de atributos. Cuando el valor de un atributo contenga un carácter &, debe expresarse como una referencia a la entidad de tipo carácter (por ejemplo: &amp;"). Por ejemplo, cuando el atributo href del elemento a apunte a un código CGI que tome parámetros debe expresarse como http://www.ciberaula.com/cgi-bin/programa.pl?dato1=33&amp;dato2=43 en lugar de http://www.ciberaula.com/cgi-bin/programa.pl?dato1=33&dato2=43

31. -Codificación de caracteres. Para especificar una codificación de caracteres en el documento,usar la especificación del atributo de codificación en la declaración XML (por ejemplo <?xml version="1.0" encoding="iso-88590-1"?>) El valor del atributo de codificación de la instrucción de proceso XML tiene preferencia.

32. DOCUMENTO BIEN FORMADO Y CONVALIDADO Los documentos XML han de ajustarse a unas normas de formato y validez para que las aplicaciones que han de reconocerlos puedan hacerlo sin pérdida o errores en la interpretación de la información. Un documento se dice "bien formado" o "gramaticalmente correcto" cuando está estructurado de acuerdo a las reglas definidas en XML 1.0. Básicamente, en dicha definición implica que los elementos estén delimitados por sus etiquetas de inicio y fin y estén convenientemente anidados.

33. La convalidación es un proceso por el cual los docu- mentos son contrastados con la DTD asociada, asegurándose de que la estructura, el uso de elementos y el uso de atributos son consistentes con las definiciones de la DTD. Hay páginas web en línea con las cuales puedes com- probar la validez de tu documento conforme a las recomenda- ciones de W3C y a otros estándares. http://validator.w3.org/ No todo código validado es necesariamente correcto

34. CONVERTIR UN DOCUMENTO HTML EN XHTML Son necesarios dos pasos para convertir un documento HTML en un documento XHTML válido: - Asegurarnos que está bien formado. -Ver que el documento es válido respecto de alguna de las tres DTD que conforman el XHTML. Por último decir que con un editor de texto puedes crear páginas en XHTML y con un navegador de los actuales las puedes visualizar.

35. BIBLIOGRAFÍA La página oficial de World Wide Web: http://www.w3.org Otras: http://www.tejedoresdelweb.com/307/article-10152.html http://home.worldonline.es/jlgranad/xhtml/xhtml1.htm http://es.wikipedia.org/wiki/XHTML