html2015.pdf

HTMLHyperText Markup

Language

Fernando Prez [email protected]

Diseo de aplicaciones web 2 DATSI

ndice

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


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


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


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: Hola Algunos aspectos claramente mejorables

P.e. etiquetas de cabecera () 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


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


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


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, Server-Sent Events, GeoLocation, Drag&Drop, ...

No parte de HTML5 pero s de HTML Living Standard


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


Elementos del HTML Formato general: contenido Contenido puede ser slo texto (p.e. ttulo) Otros elementos anidados (pe.txt)) O vaco (p.e. o en sintaxis XHTML ) 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


Estructura del documento

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


Elementos de la cabecera title (no confundir con atributo title) meta: proporcionar metainformacin de la pgina

P.e. el autor o informacin para buscadores

Juego de caracteres usado

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


Elementos de estructura y formato Cabeceras: de a 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)


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)


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


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


Ejemplo de layout


Listas

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

De definiciones: dt: Trmino dd: Definicin

Se pueden anidar


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


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,


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


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 + coordenadashttp://www.servidor.es/cgi-bin/seleccion?25,13


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)


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


Canvas

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


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)


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

html2015.pdf

Documents

Transcript of html2015.pdf