hmtl

Tecnologías Web para la presentación
HTML/XHTML
Aplicaciones Web/Sistemas Web

Juan Pavón Mestras
Dep. Ingeniería del Software e Inteligencia Artificial
Facultad de Informática
Universidad Complutense Madrid

Material bajo licencia Creative Commons

HTML y XHTML


HTML: Lenguaje con el que se definen páginas Web








Permite describir el contenido de una página,incluyendo texto y otros
elementos (imágenes, videos, pequeñas aplicaciones, etc.)
Una página HTML consta de texto en el cual se insertan etiquetas que
permiten indicar algún tratamiento especial (formato, hiperenlace, ...)
Basado en SGML (Standard Generalized Markup Language)

XHTML: versión basada en XML de HTML






Compatibilidad con otros documentos XML
• Combinar con otrosdocumentos en lenguajes basados en XML,
XForms, MathML, SMIL, SVG, etc.)
• Usar herramientas (XSLT)
XHTML es más estricto que HTML
• Exige que los documentos estén bien formados (requisito de XML)
• Se pueden validar con http://validator.w3.org/ o con HTML Tidy
http://www.w3.org/People/Raggett/tidy/
Hay herramientas que permiten pasar de HTML a XHTML
• Por ejemplo, el navegador Amaya(http://www.w3.org/Amaya/)

Juan Pavón - UCM 2012-13

HTML/XHTML

2

XHTML vs. HTML


Al estar basado en XML, XHTML permite integrar fácilmente
otros lenguajes de la familia XML




Mayor extensibilidad

XHTML tiene reglas más simples para definir la estructura de un
documento




Por ejemplo: todos los elementos tienen que estar bien anidados y
tener siempre la etiqueta decierre
Menos recursos para procesar los documentos
• Ventaja para hacer navegadores más eficientes

3

HTML/XHTML

Juan Pavón - UCM 2012-13

XHTML vs. HTML


XHTML separa claramente contenido y presentación




XHTML Strict obliga a que la asignación del formato de presentación
se haga de manera separada mediante hojas de estilo CSS
Esta separación tiene ventajas:
• Lagestión del estilo de todo el sitio web está localizada en un punto
concreto: las hojas de estilo
• Es posible modificar todo el estilo del sitio (manteniendo su coherencia) sin
editar todas sus páginas

• Se pueden tener varios estilos definidos para el mismo sitio web
• Los usuarios de un sitio web pueden seleccionar el conjunto de colores y
estilos (tema) del sitio web

• Soporte a lanavegación desde múltiples dispositivos, adaptando las
páginas a sus características (tamaño de pantalla, etc.)

Contenido
+
Formato
(HTML)

Juan Pavón - UCM 2012-13

vs.

Contenido
(XHTML)

HTML/XHTML

+

Formato
(CSS)

4

HTML y XHTML


Versiones






HTML 4.01 (1999)
• http://www.w3.org/TR/html401/
XHTML 1.0 (2000, revisado en 2002)
•http://www.w3.org/TR/xhtml1/
XHTML 1.1 (2001)
• XHTML™ Basic 1.1 - Second Edition (2010)
• http://www.w3.org/TR/xhtml-basic/

• XHTML™ 1.1 - Module-based XHTML - Second Edition (2010)
• http://www.w3.org/TR/xhtml11/


HTML5 y XHTML5 están en proceso de estandarización


Varias características ya se van implantando en los navegadores

Juan Pavón - UCM 2012-13

HTML/XHTML

5

Ejercicio


¿Cuálserá el mejor lenguaje de marcado para móviles?



¿Qué características debería tener?
¿Qué opciones se están barajando hoy día?

Juan Pavón - UCM 2012-13

HTML/XHTML

6

DOM



Definido por W3C
Modelo de Objetos del Documento (Document Object Model)




DOM define objetos y propiedades de los elementos HTML y XML, y
los métodos para acceder a ellos
•Representación de documentos HTML y XML
• API para consultar y manipular los documentos (contenido,
estructura, estilo)

Los objetos de un documento se organizan en una jerarquía
(árbol): jerarquía DOM

var elemento=document.getElementById("intro");
var cabecera=document.getElemnentByTag("title"); 
// ...

Juan Pavón - UCM 2012-13

HTML/XHTML

7

Herramientas para crear una página Web
...