Índice. HTML HyperText Markup Language. Conceptos básicos. Qué es HTML? Diseño de servicios Web HTML 1

(1)

HTML

HyperText Markup

Language

Diseño de servicios Web 2 DATSI

Índice

• Conceptos básicos • Historia y evolución de HTML • XHTML vs. HTML • HTML dinámico • Hojas de estilo (CSS) • DOM

¿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>

(2)

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

Situación actual: 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.

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: <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” />)

(3)

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 (draft9-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, ...

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 Strictpero con módulos

• XHTML 2.0 (draft5-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 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)

(4)

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. <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)

Hojas de estilo

• 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

Inclusión de estilos

• 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

Definiciones de estilo

• 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

(5)

Document Object Model (DOM)

• DOM (Level2 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, Elementy Attributederivan 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”)

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>

HTML DOM

• Extiende Corecon funcionalidad específica para HTML

• HTMLDocumentderiva 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)

– Parserautónomo (Microsoft XML parser, JAXP: Java API for XML Processing)

– Navegadores también proporcionan XML DOM para cargar y procesar documentos XML desde scriptsincluidos en la página HTML