XHTML

Download Report

Transcript XHTML 

XHTML
Félix Cruza Lucas-Vaquero
Rosa María Zaragoza Gómez
María Merchante Nieto
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.
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.
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.
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.
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
QUÉ ES XHTML
XHTML significa eXtensible HyperText Markup
Language y 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.
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.
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.
Cascade significa 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.
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 documento 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.
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 propiedades. 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:
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’
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.
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-xhtml119991210/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/PRxhtml1-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-xhtml119991210/DTD/xhtml1-frameset.dtd">
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.
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/xhtml1strict.dtd">
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:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.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>
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.
•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>
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.
VENTAJAS
• 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 varios diseñ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.
INCONVENIENTES
• Algunos navegadores
• Muchas herramientas
antiguos no son
de diseño web aún no
totalmente
producen código
compatibles con los
XHTML correcto.
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.
COMPATIBILIDAD CON
LOS NAVEGADORES
Se pueden eliminar la mayoría de los problemas de compatibilidad 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 navegadores. 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 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:
-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/>.
-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.
-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/cgibin/programa.pl?dato1=33&amp;dato2=43
en lugar de http://www.ciberaula.com/cgibin/programa.pl?dato1=33&dato2=43
-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.
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.
La convalidación es un proceso por el cual los documentos 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 comprobar la validez de tu documento conforme a las recomendaciones de W3C y a otros estándares.
http://validator.w3.org/
No todo código validado es necesariamente correcto
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.
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