HTML HyperText Markup Language Fernando Pérez Costoya

Presentación del tema: "HTML HyperText Markup Language Fernando Pérez Costoya"— Transcripción de la presentación:

1 HTML HyperText Markup Language Fernando Pérez Costoya fperez@fi.upm.es

2 Diseño de aplicaciones web 2 DATSI Índice Conceptos básicos Historia y evolución de HTML XHTML vs. HTML XHTML 2.0: ¿la muerte de HTML? HTML 5: la resurrección HTML dinámico

3 Diseño de aplicaciones web 3 DATSI ¿Qué es HTML? Lenguaje de publicación en Internet de documentos de hipertexto –Permite especificar la organización lógica de documentos –Es independiente de la plataforma Definido en SGML (Standard Generalized Markup Language, ISO 8879. 1986) –SGML es un metalenguaje –HTML es un lenguaje definido en SGML Las etiquetas de HTML están especificadas en SGML –SGML es muy complejo –Precursor de XML

4 Diseño de aplicaciones web 4 DATSI Conceptos básicos Elemento HTML –etiqueta + texto ( texto ) –Elementos “vacíos” (sin texto) ( ) –Elementos con atributos ( texto ) Estructura de documento:elementos HTML,HEAD y BODY

5 Diseño de aplicaciones web 5 DATSI Tipos de etiquetas Título ( ) Cabeceras (,,...) Formato de texto (,,...) Párrafos ( ) Listas (,,...) Imágenes ( ) Enlaces ( ) Tablas ( ) Mapas ( ) Formularios ( ) Marcos ( ) Organización lógica del texto ( y ) Scripts ( ) Hojas de estilo ( )

6 Diseño de aplicaciones web 6 DATSI Historia y evolución Controlado por World Wide Web Consortium (W3C) –http://www.w3.org/http://www.w3.org/ HTML 2.0 (propuesta de IETF RFC 1866, 1995) –Define núcleo básico de HTML HTML 3.2 –Define el cuerpo principal de HTML: tablas, applets, etc. HTML 4.0 –Desaconseja uso elem. o atrib. de formato (FONT,U,bgcolor) Utilización de hojas de estilo (CSS) –Inclusión de marcos –Soporte a distintos idiomas –Mejoras en tablas, formularios y soporte de scripts –HTML 4.01 (diciembre de 1999) es la última versión Parada en desarrollo de recomendaciones sobre HTML

7 Diseño de aplicaciones web 7 DATSI De HTML a XHTML XHTML (eXtensible Hypertext Markup Language) Redefinición de HTML en XML –XML (eXtensible Markup Language, W3C, 9-2000) SGML simplificado para uso en web (y otros) Más regular y fácil de procesar pero igual de potente Beneficios de XHTML: –Los de XML: rigor y flexibilidad con tratamiento simple –Facilita modularidad gracias a espacios de nombres: hacer extensiones crear subconjuntos de funcionalidades –Documentos web más ricos sobre más plataformas –Convivencia de lenguajes basados en XML XHTML, MathML, multimedia, comercio electrónico, etc.

8 Diseño de aplicaciones web 8 DATSI Transición de HTML a XHTML ¿Compatibilidad documentos HTML y XHTML? –XHTML es más riguroso y regular –Navegadores han sido muy permisivos con páginas HTML P. ej. aceptan mal anidamiento: Hola –Documentos XHTML sobre navegadores HTML Casi compatible: Hay que seguir unas pocas reglas –Documentos HTML sobre navegadores XHTML: Necesidad de transformación Reglas básicas para la transformación de documentos: –Etiquetas y atributos en minúsculas –Etiquetas de fin obligatorias ( o ) –Etiquetas sin cierre deben llevar carácter “/” ( ) –Valores de atributos entre comillas ( ) Herramientas automáticas de conversión: HTML Tidy

9 Diseño de aplicaciones web 9 DATSI XHTML XHTML es una familia de lenguajes XHTML 1.0 (1-2000): El primer estándar –HTML 4.01 reformulado en XML –Tres variantes: Strict. Documentos sin elem. o atrib. de formato Transitional. Documentos con elem. o atrib. de formato Frameset. Documentos con marcos Modularización de XHTML (4-2001): –Entorno abstracto de modularización para lenguajes XHTML –Facilita extensión y definición de subconjuntos –Facilita convivencia con otros lenguajes estándar o propios –Perfiles de documentos: Perfil: XHTML + MathML + SVG (1-2003) Documento lleva asociado perfil (qué módulos requiere) Negociación de contenido entre cliente-servidor

10 Diseño de aplicaciones web 10 DATSI Módulos en XHTML Módulo estructura: html, head, body,... Módulo texto: h1, pre, div,... Módulo hipertexto: a Módulo listas: dt, ol, li,... Módulo presentación: b, i, tt,... Módulos de formularios: form, input, select,... –Distingue entre un módulo básico y uno completo Módulos de tablas: tr, td, th,... –Distingue entre un módulo básico y uno completo Muchos otros módulos: –imágenes, mapas, marcos, scripts, hojas de estilo,...

11 Diseño de aplicaciones web 11 DATSI Familia de lenguajes XHTML XHTML Básico (12-2000): –Uso en dispositivos con capacidad de presentación limitada –Usa conjunto limitado de módulos: Tablas y formularios: sólo módulo básico No incluye: presentación, scripts, marcos, etc. XHTML 1.1 (5-2001): XHTML basado en módulos –Funcionalidad similar a XHTML 1.0 Strict pero con módulos XHTML 2.0 (en desarrollo): Próxima generación de XHTML –Estructura mejorada e integración de nuevas tecnologías –No compatibilidad con versiones previas –Elimina todos los aspectos de presentación (hojas de estilo) –Extiende módulos de versión anterior y define nuevos –Mejora en: facilidad de uso, accesibilidad, independencia de dispositivo de presentación, carácter internacional, etc.

12 Diseño de aplicaciones web 12 DATSI Algunas novedades en XHTML 2.0 Hiperenlaces en cualquier elemento (desaparece a) – Mi artículo object en vez de img Imágenes en cualquier elemento, desaparece alt – Mi foto Desaparecen elementos de presentación (i, b, tt,...) hr y br sustituidos por separator y line En vez de h1, h2,..., h6, sólo h y section Mejores párrafos: p puede incluir listas, tablas, etc. Lista de navegación (nl) Mejora en listas de definición XForms y XFrames en vez de HTML Forms y Frames

13 Diseño de aplicaciones web 13 DATSI HTML 5 Algunos desarrolladores de navegadores (Apple, Mozilla, Opera) en desacuerdo con XHTML 2.0 –Apuestan por mantener compatibilidad con “viejo” HTML –Nuevo lenguaje basado en “cómo es lenguaje actual” Y no en “cómo debería ser” Web Hypertext Application Technology Working Group –Propone HTML/XHTML 5 (Web Applications 1.0) –Compatible con HTML 4 y XHTML 1 Algunos nuevos elementos de HTML 5 –section, article, aside, header, footer, nav, dialog, figure –audio, video, canvas, command, m, time, meter, details,...

14 Diseño de aplicaciones web 14 DATSI HTML dinámico (DHTML) HTML “clásico” –Páginas estáticas –Formateo limitado y estático HTML dinámico –Páginas dinámicas (“inteligentes”) –Formateo más “profesional” y dinámico No es un estándar. Es un nombre comercial Identifica a la combinación de un conjunto de tecnologías –HTML –CSS (Hojas de estilo) –DOM (visión del documento con un modelo de objetos) –Scripts (JavaScript, Jscript, VBScript)

15 Diseño de aplicaciones web 15 DATSI Evolución en el diseño de páginas Cambio radical en el diseño de páginas Antes: –Diseñador debía conocer etiquetas HTML –Formato mediante etiquetas HTML (p.e. ) Ahora: –Tres labores bastante independientes: Contenido y estructura lógica de la página (XHTML) –No deberían usarse etiquetas de formato (p.e. ) Estilo de la página (CSS) Aspectos dinámicos de las páginas (DOM + scripts)