HTML HyperText Markup Language Índice ¿Qué es HTML
Anuncio
Diseño de servicios Web
Í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
¿Qué es HTML?
2
DATSI
Conceptos básicos
• Elemento 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)
– 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>
– 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
Diseño de servicios Web
HTML
3
DATSI
Diseño de servicios Web
4
DATSI
1
Diseño de servicios Web
Tipos de etiquetas
•
•
•
•
•
•
•
•
•
•
•
•
•
•
Historia y evolución
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>)
Diseño de servicios Web
5
• 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
DATSI
Diseño de servicios Web
Situación actual: De HTML a XHTML
– 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.
HTML
7
DATSI
Transición de HTML a XHTML
• ¿Compatibilidad documentos HTML y XHTML?
• XHTML (eXtensible Hypertext Markup Language)
• Redefinición de HTML en XML
Diseño de servicios Web
6
DATSI
– 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
2
Diseño de servicios Web
XHTML
Módulos en 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
Diseño de servicios Web
9
DATSI
•
•
•
•
•
•
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
Familia de lenguajes XHTML
• HTML “clásico”
– 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.
Diseño de servicios Web
HTML
DATSI
HTML dinámico (DHTML)
• XHTML Básico (12-2000):
–
–
–
–
–
10
11
DATSI
– 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
12
DATSI
3
Diseño de servicios Web
Evolución en el diseño de páginas
• Especifica cómo se presenta una página
• CSS (Cascading Style Sheets) (versión 2 en mayo 1998)
• Cambio radical en el diseño de páginas
– Lenguaje para definir estilos independiente de HTML
• Antes:
• CSS3 (dratf): Organiza en módulos CSS
• Atributos de estilo que controlan propiedades sobre:
– 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)
Diseño de servicios Web
13
DATSI
Inclusión de estilos
<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
–
–
–
–
“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
14
DATSI
Definiciones de estilo
• Normalmente en cabecera
• En el propio documento (etiqueta STYLE de HTML)
HTML
Hojas de estilo
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
4
Diseño de servicios Web
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
HTML DOM
– Incluye colecciones de objetos del mismo tipo
• images: imágenes incluidas en el documento
• lo mismo para links, forms, anchors, ...
– 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)
HTML
• 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)
• Nuevos elementos derivados de Element:
19
DATSI
Uso de DOM
• Extiende Core con funcionalidad específica para HTML
• HTMLDocument deriva de Document:
Diseño de servicios Web
18
DATSI
– 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
20
DATSI
5
