Índice HTML HyperText Markup Language Conceptos básicos Historia y evolución de HTML XHTML vs. HTML HTML dinámico Hojas de estilo (CSS) DOM Diseño de servicios Web 2 DATSI Qué es HTML? Lenguaje de publicación en la Web 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 Conceptos básicos Elemento HTML etiqueta + texto (<H2>texto</H2>) Elementos vacíos (sin texto) (<BR>) Elementos con atributos (<A HREF="X.html">texto</A>) Estructura de documento:elementos HTML,HEAD y BODY <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> Diseño de servicios Web 3 DATSI Diseño de servicios Web 4 DATSI HTML 1
Tipos de etiquetas Título (<TITLE>) Cabeceras (<H1>, <H2>,...) Formato de texto (<EM>, <STRONG>,...) Párrafos (<P>) Listas (<UL>, <OL>,...) Imágenes (<IMG>) Enlaces (<A>) Tablas (<TABLE>) Mapas (<MAP>) Formularios (<FORM>) Marcos (<FRAMESET>) Organización lógica del texto (<DIV> y <SPAN>) Scripts (<SCRIPT>) Hojas de estilo (<STYLE>) Historia y evolución Controlado por World Wide Web Consortium (W3C) 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 Parón en desarrollo de recomendaciones sobre HTML Diseño de servicios Web 5 DATSI Diseño de servicios Web 6 DATSI Situación actual: De HTML a XHTML Transición 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: 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. Diseño de servicios Web 7 DATSI 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: <i><b>hola</i></b> 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 (</p> o </li>) Etiquetas sin cierre deben llevar carácter / (<br />) Valores de atributos entre comillas (<img src= X.gif />) Herramientas automáticas de conversión: HTML Tidy Diseño de servicios Web 8 DATSI HTML 2
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 Perfil: XHTML + MathML + SVG (1-2003) Perfiles de documentos (draft 9-1999): Documento lleva asociado perfil (qué módulos requiere) Negociación de contenido entre cliente-servidor 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,... Diseño de servicios Web 9 DATSI Diseño de servicios Web 10 DATSI Familia de lenguajes XHTML HTML dinámico (DHTML) 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 (draft 5-2003): Próxima generación de XHTML Estructura mejorada e integración de nuevas tecnologías No asegura 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. 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) Diseño de servicios Web 11 DATSI Diseño de servicios Web 12 DATSI HTML 3
Evolución en el diseño de páginas Hojas de estilo Cambio radical en el diseño de páginas Antes: Diseñador debía conocer etiquetas HTML Formato mediante etiquetas HTML (p.e. <FONT>) Ahora: Tres labores bastante independientes: Contenido y estructura lógica de la página (XHTML) No deberían usarse etiquetas de formato (p.e. <FONT>) Estilo de la página (CSS) Aspectos dinámicos de las páginas (DOM + scripts) Especifica cómo se presenta una página CSS (Cascading Style Sheets) (versión 2 en mayo 1998) Lenguaje para definir estilos independiente de HTML CSS3 (dratf): Organiza en módulos CSS Atributos de estilo que controlan propiedades sobre: Caja que contiene a un elemento (márgenes, bordes,...) Fondo Color Fuente de texto Permite también controlar cómo se posicionan elementos Modelo de capas (atributo position) Hojas de estilo se aplican al cargar la página (estático) Pero pueden modificarse definiciones desde un script Diseño de servicios Web 13 DATSI Diseño de servicios Web 14 DATSI Inclusión de estilos Definiciones de estilo Normalmente en cabecera En el propio documento (etiqueta STYLE de HTML) <STYLE TYPE= text/css > definiciones de estilo </STYLE> Desde un fichero (etiqueta LINK de HTML) <LINK REL=STYLESHEET TYPE= text/css HREF= F.css > Asociado a un elemento HTML (atributo STYLE) Poco recomendable pues mezcla estructura y formato <P STYLE= color:red > Múltiples definiciones de estilo se acumulan: Existen unas reglas de precedencia Diseño de servicios Web 15 DATSI Aplicada a un tipo de elemento H1 {color:red; font-size:14pt] Aplicada a clase de elementos del mismo tipo (atributo CLASS) P.estrecho {margin-left:5em; margin-right:5em} <P CLASS= estrecho > Aplicada a clase de elementos de distintos tipos.novedad {text-decoration:underline} <P CLASS= novedad > y <H3 CLASS= novedad > Aplicada a elemento con un identificador único (atributo ID) #especial {font-size:20pt] <P ID=especial> Selección por el contexto Ejemplo de definición sólo para elementos EM dentro de párrafos P EM {color:red} Diseño de servicios Web 16 DATSI HTML 4
Document Object Model (DOM) DOM (Level 2 9-2000,Level 3 draft) Conjunto de interfaces para acceder y modificar documentos HTML y XML Documento representado como árbol de objetos Interfaces permiten navegar por la jerarquía Herencia: Document, Element y Attribute derivan de Node DOM organizado en módulos (mód. = cjto. de interfaces) Módulo Core (obligatorio): permite navegar en documento Otros módulos: HTML, Views, Style, Events,... Implementación XML DOM: al menos módulo Core Implementación HTML DOM: al menos mód. Core + HTML Ejemplos de propiedades y métodos de módulo Core Doc.documentElement.childNodes.item(2).nodeName Doc.documentElement.childNodes.item(2).attributes Doc.documentElement.getElementsByTagName( clave ) Doc.documentElement.attributes.getNamedItem( nivel ) Diseño de servicios Web 17 DATSI Ejemplo DOM con documento HTML <TABLE> <TBODY> <TR> <TD>Shady Grove</TD> <TD>Aeolian</TD> </TR> <TR> <TD>Over the River,Charlie</TD> <TD>Dorian</TD> </TR> </TBODY> </TABLE> Diseño de servicios Web 18 DATSI HTML DOM Extiende Core con funcionalidad específica para HTML HTMLDocument deriva de Document: Incluye colecciones de objetos del mismo tipo images: imágenes incluidas en el documento lo mismo para links, forms, anchors,... Nuevos elementos derivados de Element: HTMLHeadElement, HTMLLinkElement, HTMLTitleElement, HTMLBodyElement, HTMLFormElement, etc. Ejemplos: Métodos: document.forms.item(3).reset() Propiedades: document.images.item(2).src Sigue accesible funcionalidad Core: document.documentelement.childnodes.item(1) Uso de DOM Manipulación de página HTML cargada por navegador Navegadores implementan HTML DOM Acceso a través de scripts (p.ej. Javascript) Manipulación de documento XML (XML DOM) Parser autónomo (Microsoft XML parser, JAXP: Java API for XML Processing) Navegadores también proporcionan XML DOM para cargar y procesar documentos XML desde scripts incluidos en la página HTML Diseño de servicios Web 19 DATSI Diseño de servicios Web 20 DATSI HTML 5