HTML

HyperText Markup
Language
Fernando Prez Costoya
fperez@fi.upm.es

ndice

Definicin
Historia y evolucin de HTML
El fiasco de XHTML
HTML 5: la resurreccin
Un tour por HTML

Diseo de aplicaciones web

DATSI

Qu es HTML?
HyperText Markup Language
Lenguaje de etiquetado de hipertexto
Lenguaje de etiquetado: define un conjunto de etiquetas
Una etiqueta se asocia a fragmento del contenido del documento
Describe las caractersticas del mismo
Semnticas y, hasta cierto punto, de presentacin

Etiquetado permite especificar estructura de documento

Lenguaje de etiquetado de hipertexto:
Incluye etiqueta para establecer enlaces entre documentos
Lenguaje de publicacin en Internet Fundamento de la Web
Es independiente de la plataforma
Definido originalmente en el metalenguaje SGML
Las etiquetas de HTML estn especificadas en SGML
Existe un DTD que las define
Diseo de aplicaciones web

DATSI

Historia y evolucin
Creado por Tim Berners-Lee en el CERN (1989)
Controlado inicialmente por IETF
HTML 2.0 (propuesta de IETF RFC 1866, 1995)
Define ncleo bsico de HTML

Gran impacto, se crea World Wide Web Consortium (W3C)

HTML 3.2
Define el cuerpo principal de HTML: tablas, applets, etc.

HTML 4.0
Desaconseja (deprecated) uso elem. o atrib. de formato
Utilizacin de hojas de estilo (CSS)
Inclusin de marcos, mejoras en tablas, formularios y scripts
Tres variantes: strict, transitional y frameset
HTML 4.01 (diciembre de 1999): parn en el estndar
Diseo de aplicaciones web

DATSI

Dficits de HTML
Incorporacin progresiva de etiquetas de formato

En contra de la idea original de usar etiquetas semnticas

El formato debera especificarse con CSS
Una pgina tambin puede ser leda

Los lenguajes basados en SGML son complejos de procesar

Son muy dependientes del contexto

Navegadores muy permisivos con pginas HTML

P. e. aceptan mal anidamiento: <i><b>Hola</i></b>

Algunos aspectos claramente mejorables

P.e. etiquetas de cabecera (<h1><h6>)

Slo 6?; desconectadas del texto al que estn asociadas

No preparado para convivir con otros lenguajes de etiquetado

MathML, SVG,
Tampoco para definir versiones con funcionalidad recortada

Recapitulando: necesitaba limpieza y rediseo

Diseo de aplicaciones web

DATSI

XHTML (el fiasco)

XHTML (eXtensible Hypertext Markup Language)
Redefinicin de HTML en XML (en vez de SGML)

Ms regular y fcil de procesar pero igual de potente

Facilita modularidad y convivencia con otros lenguajes

XHTML 1.0 (1-2000): El primer estndar

HTML 4.01 (tres variantes) reformulado en XML

Casi compatible con HTML (uso de minsculas, etiquetas de fin
obligatorias, etiquetas sin cierre deben llevar carcter /, valores
de atributos entre comillas,)

XHTML 2.0: Rediseo del lenguaje (revolucin)

Estructura mejorada e integracin de nuevas tecnologas

No compatibilidad con versiones previas
Encuentra mucha resistencia en el mercado

W3C anuncia (7-2009) fin grupo de XHTML 2 a finales 2009

Diseo de aplicaciones web

DATSI

HTML 5 (la resurreccin)

Creacin del grupo WHATWG (2004) en contra de XHTML2
Apuestan por mantener compatibilidad con viejo HTML
WHATWG fuera W3C (Web Applications 1.0) pero vuelven

HTML 5 (estndar 28/10/2014)

Compatible con HTML 4 y XHTML 1

Admite sintaxis HTML, recomendada, y XHTML
Matiza concepto deprecated definiendo dos roles
Qu puede usar un autor y qu debe implementar un cliente
Define comportamiento del navegador ante errores
Modelo de desarrollo basado en implementaciones reales
Un aspecto no es estndar hasta que haya al menos dos
Inclusin progresiva en navegadores de HTML5
Biblioteca Modernizr informa caractersticas presentes
Comportamiento HTML5 en nav. ant.: Polyfills, HTML shiv,
http://caniuse.com/#cats=HTML5

HTML Living Standard: El HTML de WHATWG

Diseo de aplicaciones web

DATSI

Algunos objetivos de HTML5

Mejor definicin de estructura de documentos

Evitar abuso de elementos div con atributos class

Soporte funcionalidad actualmente en scripts

Soporte funcionalidad actualmente por plug-ins externos
En general, facilitar RIA (Rich Internet Applications)
Soporte directo de grficos (canvas)
Soporte directo de vdeo y audio
Mejoras en formularios
Soporte de aplicaciones web fuera de lnea
Otros estndares vinculados:

Web Storage, Microdata, Web Workers, Web Sockets, ServerSent Events, GeoLocation, Drag&Drop, ...
No parte de HTML5 pero s de HTML Living Standard

Diseo de aplicaciones web

DATSI

Un tour por HTML

Elementos del HTML

Estructura del documento
Elementos de la cabecera
Elementos del cuerpo
Elementos de estructura y formato
Listas
Tablas
Enlaces
Imgenes, objetos y mapas
Hojas de estilo
Marcos (no en HTML5)
Formularios
Scripts

Diseo de aplicaciones web

DATSI

Elementos del HTML

Formato general: <etiqueta>contenido</etiqueta>

Contenido puede ser slo texto (p.e. <h1>ttulo</h1>)
Otros elementos anidados (pe.<body><h1>txt</h1></body>))
O vaco (p.e. <br> o en sintaxis XHTML <br />)
Atributos: propiedades asociadas al elemento
Parejas nombre=valor en etiqueta de apertura
Suelen ser especficos de una etiqueta (atrib. src de img)
Pero algunos son aplicables a cualquiera (globales)
id,lang,dir,title,class,style,contenteditable,dir,accesskey,
Atrib. eventos: onload, onunload, onclick, onmousedown,
Elemento de nivel de bloque (EB)
Formato: por defecto, comienzan en nueva lnea
Contenido: algunos pueden contener elementos de bloque
Elemento en lnea (EL)
Formato: por defecto, no comienzan en nueva lnea
Contenido: ninguno puede contener elementos de bloque
Diseo de aplicaciones web

10

DATSI

Estructura del documento

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- Comentario -->

</body>
</html>
Ejemplo que revisaremos:
http://laurel.datsi.fi.upm.es/~fperez/HTML/ejemplo.html

Diseo de aplicaciones web

11

DATSI

Elementos de la cabecera
title (no confundir con atributo title)
meta: proporcionar metainformacin de la pgina
P.e. el autor o informacin para buscadores
<meta name=author" content="Yo mismo">
<meta name=keywords" content=HTML,XHTML,CSS>
Juego de caracteres usado
<meta charset=UTF-8">

link: establece relacin entre pgina y otro documento

Alternate, Stylesheet, Start, Next, Prev, Contents, Index,

Copyright, Chapter, Section, Appendix, Help, Bookmark, etc.
<link rel="stylesheet" href=est.css">

style: definiciones de estilo internas

base: URI para referencias relativas y destino para enlaces
Otros elementos que tambin pueden estar en el cuerpo
script y object

Diseo de aplicaciones web

12

DATSI

Elementos de estructura y formato

Cabeceras: de <h1> a <h6>

Informacin de contacto (address)
Prrafo (p)
Modifica direccin de presentacin del texto (bdo)
Saltos de lnea (br); lnea horizontal (hr)
Texto preformateado (pre)
Texto relacionado con un programa (code, samp, kbd, var)
Texto en negrilla (b) vs. texto importante (strong)
Texto en itlica (i) vs texto enfatizado (em)
Texto resaltado (mark), insertado (ins) y borrado (del)
Subndices (sub) y superndices (sup)

Diseo de aplicaciones web

13

DATSI

Elementos de estructura y formato

Letra pequea (small)

Abreviaturas (abbr) y definiciones (dfn)
Citas largas (EB) (blockquote ) y cortas (EL) (q )
Ttulo de un trabajo (cite)
Fecha y hora (time)
Detalles (details) y resumen (summary)
Elementos de agrupamiento div (EB) y span (EL)

Diseo de aplicaciones web

14

DATSI

Especificacin del layout

Mediante tablas
Obsoleto

Utilizando etiqueta div y CSS

www.fi.upm.es; www.w3schools.com
div: ni presentacin (OK; uso de CSS) ni semntica:
funcin de cada div?: por el id (class) y mirando CSS

Usando nuevos elementos estructurales semnticos HTML5

Elementos que definen un comportamiento semntico
Pero no aspectos de presentacin (requieren CSS)
Estudio masivo de pginas ha permitido su seleccin

Diseo de aplicaciones web

15

DATSI

Nuevos elem. estructurales HTML5

main: contenido principal del documento

section: seccin de documento
article: parte autocontenida dentro de documento
aside: contenido relacionado con documento pero separado
header: cabecera de documento, seccin, artculo, ...
hgroup: agrupacin de h1, h2, ...
footer: pie de documento, seccin, artculo, ...
nav: seccin con enlaces para navegar
figure: representa una figura con su leyenda (figcaption)
Ejemplo comparativo:
http://diveintohtml5.org/examples/blog-original.html
http://diveintohtml5.org/examples/blog-html5.html

Diseo de aplicaciones web

16

DATSI

Ejemplo de layout

Diseo de aplicaciones web

17

DATSI

Listas
Ordenadas (ol) o no (ul)
Cada elemento usa li

De definiciones:
dt: Trmino
dd: Definicin

Se pueden anidar

Diseo de aplicaciones web

18

DATSI

Tablas
Tabla (table) organizada en filas
Puede tener una leyenda (caption)
Las filas pueden agruparse en 3 tipos de grupos
Cabecera (thead), Pie (tfoot), Datos (tbody)
Fila (tr): celdas de cabecera (th) y de datos (td)
Celda puede ocupar varias filas/columnas rowspan/colspan

Grupos de columnas (colgroup,col)

Facilitan definiciones de propiedades y creacin incremental

Diseo de aplicaciones web

19

DATSI

Enlaces
Uso de elemento a para enlaces
Enlace: atributo href
A otro documento: URI
A una parte del mismo documento: #id
A una parte de otro documento: URI#id

Contenido de a es la parte visible y seleccionable

Puede ser texto, imgenes,

Diseo de aplicaciones web

20

DATSI

Imgenes y objetos
Imagen (img) con atributo src (alt texto alternativo)
height y width no deprecated (facilita creacin de la pgina)

iframe: para incluir otro documento

embed: para incluir aplicaciones externas
object: para incluir otro documento o aplicaciones externas

Diseo de aplicaciones web

21

DATSI

Mapas
Permite asociar acciones con distintas zonas de imagen
map define el mapa especificando zonas y acciones
Zona (area): geometra (shape+coords) y accin (href)

img/object se asocian a mapa con atributo usemap

Mapas en el lado servidor
Enva a servidor las coordenadas seleccionadas por usuario
2 casos de uso:
img con atributo ismap dentro de a
input de tipo imagen de un formulario
En primer caso, URI generado: URI de href + coordenadas
http://www.servidor.es/cgi-bin/seleccion?25,13

Diseo de aplicaciones web

22

DATSI

Formularios
form: contenedor de controles

A quin se envan datos (atrib. action) y cmo (atrib. method)

Mtodos GET (por defecto) y POST de HTTP

input. Atributos tpicos: type, name y value

text, password, checkbox, radio, submit, reset, file, hidden, image, button, list,
number,date,time,datetime-local,month,week,color,range,email,search, tel, url

En general, se enva name=value al servidor

Elemento button: Similar a input de tipo button pero

Tiene contenido (p.ej. puede incluir una imagen)

select: men con mltiples opciones (option)

Opciones pueden agruparse en subconjuntos (optgroup)

Seleccin simple o mltiple (atributo multiple de select)

rea de texto (textarea)

Label, fieldset y legend: decoracin del formulario
Control automtico de formato por navegador (no JavaScript)
Diseo de aplicaciones web

23

DATSI

Hojas de estilo y scripts

Hojas de estilo pueden especificarse a tres niveles:
Asociado a un elemento: atributo style
Interno: elemento style
Externo: elemento link

Scripts pueden definirse en tres niveles:

Asociado a un evento (ej. onload = script)
Interno: elemento script con cdigo incluido
Externo: elemento script con atributo src

Diseo de aplicaciones web

24

DATSI

Canvas
Zona rectangular en pgina usada para dibujar
Elemento canvas define zona de dibujo
Incluye API para dibujar, texto, imgenes

Diseo de aplicaciones web

25

DATSI

Soporte de vdeo (y audio)

Elementos video (y audio) soporte directo
Inclusin en nuevos navegadores

Algunos atributos de video:

Anchura/altura, controles, preload, autoplay, tipo y codecs
Elemento source permite especificar formatos alternativos

Incluye API para manejo (p.e. mtodos play y pause)

Diseo de aplicaciones web

26

DATSI

Aplicaciones web offline

Seguir trabajando con aplicacin web sin conexin de red
Pginas referencian fichero (atrib. manifest en elem. html)

Que contiene URLs de recursos asociados a aplicacin

Navegador los obtiene y guarda en cach
Mientras conexin, los mantiene actualizados
Si se solicita pgina y no conexin
Usa copias en cach

Diseo de aplicaciones web

27

DATSI