8 HTML

HTML
Jose Emilio Labra Gayo Departamento de Informtica Universidad de Oviedo
Proceso de Estandarizacin Dnde est tu tecnologa favorita?

xito (Diversificacin) Idea brillante
Necesidad de estndar
Posibles perversiones...
No estandarizacin Estandarizar algo que no tiene xito Estndar demasiado pronto Estndar demasiado tarde Comits poco representativos Estndar sin prototipos No adoptar el estndar etc., etc.
Especificacin (comit)
Adopcin del estndar (limitaciones)

Jose Emilio Labra Gayo, Universidad de Oviedo
Primeros prototipos
Internacionales ISO, W3C, IETF, ECMA, WHATWG, etc.
Evolucin
1970 1985 1990 1995
GML SGML
Generalized Markup Language (C.Goldfarb, E. Moshie, R. Lorie) Standard Generalized Markup Language (ISO)
HTML
Hypertext Markup Language (T. Berners Lee)
HTML 2.0 (IETF) XML

2000 2005 2010 2015 (W3c)
HTML 3.2 (W3c) HTML 4.01 (W3c)

HTML5 (WHATWG)
Borrador
XHTML 1.0 (W3c) XHTML 2.0 Borrador (W3c)
HTML5 (W3c & Whatwg)
Borrador
HTML 5
Evolucin de HTML 4.01 (compatibilidad hacia atrs) Admite 2 Sintaxis: HTML y XML Modelo de procesamiento estndar
Mejorar interoperabilidad entre implementaciones Incluye API DOM
Antes estaba separada
Describe cmo gestionar errores

Antes se dejaba libertad a las implementaciones
Facilita desarrollo de aplicaciones Web
Principios de diseo
Compatibilidad
Soportar contenido existente Degradado corts: alternativas para navegadores anteriores Reutilizar caractersticas que ya se usan
Utilidad
Resolver problemas existentes Separacin: estructura, presentacin, comportamiento
Interoperabilidad
Comportamiento y gestin de errores definidos
Acceso universal
Independencia de medios, internacionalizacin y accesibilidad
2 sintaxis
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ejemplo</title> </head> <body> <p>Algo de texto</p> </body> </html> Tipo MIME: text/html
XHTML
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Ejemplo</title> </head> <body> <p>Algo de texto</p> </body> </html> Tipo MIME: application/xml application/xhtml+xml
Tipo de documento
Solamente es necesario <!DOCTYPE html> Antes:
Estricto: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Transicional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Con marcos: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Ms informacin: http://hsivonen.iki.fi/doctype/
Sintaxis HTML
HTML5 ya no tiene sintaxis SGML ni XML
No hay declaraciones de espacios de nombres Se especifica cmo tratar errores Gestin de errores: modelo draconiano vs flexibilidad
Sintaxis simplificada
No siempre es obligatorio cerrar etiquetas No es obligatorio poner entre comillas valores simples
<input name=tlfno disabled> HTML
<input name="tlfno" disabled="" /> XHTML
Elementos
Elemento:
<etiqueta atributo1="valor1" atributo2="valor2"...> . . . contenidos . . . </etiqueta>
Se pueden anidar elementos
<externo> <interno> texto </interno> </externo> <externo> <interno> texto </externo> </interno>
pero no se pueden entrelazar
Elementos vacos
Elementos sin contenido
<img src="foto.png" alt="Paisaje asturiano"></img>
En XML pueden simplificarse como:

<img src="foto.png" alt="Paisaje asturiano" />
En HTML, no es obligatorio cerrar etiquetas siempre:

<img src="foto.png" alt="Paisaje asturiano" >
Atributos
El orden de los atributos no es significativo No puede haber 2 atributos con el mismo nombre Pueden usarse comillas dobles o simples
<body onLoad="alert('Hola')" onUnload='alert("Adios")'> . . . </body>
Comentarios HTML
Texto entre 
<head> <title>Ejemplo</title>  </head>
Comentarios condicionales (Slo Internet Explorer)

  <p>No ests usando Internet Explorer</p> 
Estructura de HTML
Elemento raz <html> contiene:
<head> metadatos <body> contenido de la pgina
= HTML4
<html> <head> ...metadatos </head> <body> ...contenido </body> </html>

NOTA <html> puede tener atributo manifest. Permite indicar ficheros a descargar cuando se ejecute offline
head
= HTML4
Especifica metadatos Puede contener un elemento <title> (en HTML4 era obligatorio) Adems, puede contener: <meta> <link> <style> <base> <command> <script> <noscript>
meta
Permite incorporar metadatos. Ejemplos:
<head> <title>Ejemplo</title> <meta charset="utf-8" > <meta name="author" content="Jose Torres"> ... </head>
Antes
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
link
= HTML4
Permite enlazar a otros recursos. Atributo href indica el recurso al que se enlaza Atributo rel indica el tipo de enlace, puede ser: author, help, license, next, prev, prefetch, stylesheet, Pueden realizarse varios tipos de enlace a la vez
<head> ... <link rel="next" href="capitulo3.html"> <link rel="prev" href="capitulo1.html"> <link rel="author license" href="acercaDe.html"> </head>
link stylesheet
type="text/css" es el valor por defecto media permite especificar el tipo de medio
all (por defecto), screen, print, projection,
= HTML4
rel="stylesheet" permite asociar una hoja de estilos
title permite dar un nombre a la hoja de estilos alternate stylesheet indica que es un hoja alternativa
<head> ... <link rel="stylesheet" href="estilo.css" title="Azul"> <link rel="alternate stylesheet" href="rojo.css" title="Rojo"> <link rel="stylesheet" href="impreso.css" media="print"> </head>
link alternate
rel="alternate" indica enlaces alternativos
Ejemplo: enlazar RSS <head> ... <link rel="alternate" type="application/atom+xml" title="Blog en Atom" href="blog.atom" > . . . </head>
= HTML4
style
Permite incrustar declaraciones de estilo
Pueden afinarse estilos de una hoja de estilos En general, es mejor utilizar enlaces a ficheros externos
<head> ... <link rel="stylesheet" href="estilo.css" > <style> p { text-align: justify; } p:first-letter {font-size: 3em; } </style> </head>
= HTML4
base
Permite especificar la URI de base
Las URIs relativas tomarn dicha URI como base
= HTML4
<html> <head> <title>Noticias</title> <base href="http://www.example.com/noticias/index.html"> </head> <body> <a href="historico.html">Historico</a> </p> </body> </html>
Apunta a:
http://www.example.com/noticias/historico.html
script
Permite aadir interactividad type="text/javascript" por defecto Puede ser:
= HTML4
Externo: Mediante src Interno: Incrustado directamente (puede usarse para datos)
<head> ... <script src="jquery.js"></script> <script> $(document).ready(function() { $("a").click(function() { alert("Has pulsado!"); }); }); </script> </head> . . .
Tambin existe <noscript>: muestra su contenido si est deshabilitado el scripting
body
= HTML4
Especifica el contenido del documento Slo debe haber un elemento <body> Diversos atributos permiten controlar eventos de pgina
<html> <head> <script> function pon(msg) { document.getElementById('evento').textContent = msg; } </script> </head> <body onload="pon('onload')" onresize="pon('resize')" > <p>Evento: <span id="evento">nada</span></p> </body> </html>
Elementos de Estructura
HTML5 contiene nuevos elementos para para definir la estructura semntica del documento
HTML5 outliners: Muestran estructura del documento h1,h2,h6 div section article hgroup nav aside header footer address figure details Ttulos Agrupa elementos de contenido Seccin, puede incluir encabezados Artculo Grupo de cabecera Listas de navegacin Contenido auxiliar Cabecera Pie Define datos de contacto Figuras Detalles opcionales
h1, h2, h6
= HTML4
Definen ttulos de distinto nivel Nivel de estructura definido por el nmero (h1h6)
Problema para cortar/pegar contenido
<body> <h1>La primavera</h1> <h2>Introduccin</h2> <p>... </p> <h2>Primera parte: Agentes</h2> <h3>Las flores</h3> <p>...</p> <h3>Las personas</h3> <p>...</p> <h2>Segunda parte: Acciones</h2> <h3>El amor</h3> <p>...</p> <h3>La felicidad</h3> <p>...</p> </body>
div
Se utiliza para agrupar contenido class, id, lang, etc. permiten seleccionar grupos div No tiene significado por si mismo
Abuso de div mezclando caractersticas de presentacin Recomendacin HTML5: slo como ltima alternativa
<body> <div id="cabecera"> . . . </div> <div id="contenido"> <div class="noticia"> . . . </div> </div> <div id="barraLateral"> . . . </div> </body>
= HTML4
section
Permite declarar una seccin dentro de un documento Pueden anidarse secciones dentro de otras Antes
<body> . . . <div id="Sociedad"> <h2>La via social</h2> <p> ... </p> </div> <div id="Deportes"> <h2>Noticias deportivas</h2> <p>. . .</p> </div> </body> <body> . . . <section id="Sociedad"> <h1>La via social</h1> <p>...</p> </section> <section id="Deportes"> <h1>Noticias deportivas</h1> <p>. . .</p> </section> </body>
Problemas: no hay semntica, cortar/pegar,

article
Declara una parte independiente de un documento
Artculo de blog, de peridico, etc. Algo que podra reutilizarse o distribuirse en otros documentos
Pueden anidarse secciones y artculos

<body> <h1>El noticiero</h1> <section id="Sociedad"> <h1>Noticias de sociedad</h1> <article id="FiestaJuan"> <h1>Juan da una fiesta</h1> <p>...</p> </article> <article id="Boda"> <h1>Por fin hay boda</h1> <p>...</p> </article> </section> ...
Diferencia section est dentro de algo article tiene identidad propia
hgroup
Forma un grupo de cabecera
Ser un elemento nico de cara a la tabla de contenidos til para agrupar subttulos sin afectar al esquema del documento
<body> <hgroup> <h1>El noticiero</h1> <h2>El mejor diario de noticias</h2> </hgroup> <section id="Sociedad"> <h1>La via social</h1> <p>...</p> </section> ...
aside
Algo relacionado tangencialmente con el contenido actual
Habitualmente, pueden ponerse en un lateral Su lectura no es obligada (los agentes podran ocultarlos)
<article id="Boda"> <h1>Por fin hay boda</h1> <p>A pesar de las protestas de los invitados, la boda se celebr...</p> <aside> <h1>Refrn popular</h1> Tal y como dice el refrn: <q>Ni novia sin cejas, ni boda sin quejas.</q> </aside> </article>
nav
Declara un grupo de navegacin
Suele ser una lista de enlaces
<body> <h1>El noticiero</h1> <nav> <ul> <li><a href="#sociedad">Sociedad</a></li> <li><a href="#deportes">Deportes</a></li> </ul> </nav> <section id="Sociedad"> <h1>La via social</h1> <p>. . .</p> </section> .. .
header
Declara una cabecera No forman parte de la tabla de contenidos (outline)
<body> <header> <h1>El noticiero</h1> <img src="logo.png" alt="logo de El noticiero" > <nav> <ul> <li><a href="#sociedad">Sociedad</a></li> ... </ul> </nav> </header> ... </body>
footer
Declara un pie de documento, seccin o artculo
<body> <header> ... </header> <section id="Sociedad"> ... </section> ... <footer> 2012. Todos los derechos reservados </footer> </body> </html>
address
Indica informacin de contacto Habitualmente se incluye en footer
= HTML4
... <footer> 2012. Todos los derechos reservados <address> Contacto: <a href="http://noticiero.es">El noticiero</a> </address> </footer>
Elementos para agrupar contenido
Prrafos, listas, definiciones

p ol, ul, li dt,dl,dd pre blockquote prrafo. listas de tems definiciones texto preformateado contenido extraido de otra fuente
= HTML4
Figuras: figure, figcaption

figure representa contenido cuya posicin no es importante
Puede tener su propio flujo de contenido Puede ser: diagramas, imgenes, vdeos, fragmento de cdigo, etc.
figcaption representa la leyenda de la figura
<figure> <img src="juanBarbacoa.jpg" alt="Foto de Juan en la barbacoa"> <figcaption>Juan preparando una barbacoa</figcaption> </figure>
details
Contenido que puede estar oculto
summary indica el contenido visible El navegador puede visualizar los detalles a peticn del usuario
<h1>Campeonato de tenis de mesa</h1> <p>Acaba de arrancar la ltima competicin de tenis del pueblo. </p> <details> <summary>Lista de partidos</summary> <ul> <li>Jueves, Juan - Antonio</li> <li>Viernes, Ana- Antonio</li> <li>Sbado, Ana- Juan</li> </ul> </details>
Elementos textuales
Elementos textuales
Elemento
em
strong small s cite
= HTML4
Definicin
nfasis
Importante No importante Incorrecto
Ejemplo
Esta bebida me parece <em>espectacular</em>
La leche est <strong>muy caliente</strong> Tome Exidina <small>Este medicamento... </small> Precio: <s>10 euros</s>. 9,95 euros
Ttulos de obras En <cite>El Quijote</cite> hay 2 protagonistas.
q
abbr span br wbr
Citas
Abreviacin Texto diferente Salto de lnea Posible salto
Juan dijo <q>Bien predica quien bien vive</q>

Un <dfn>catamorfismo</dfn> es un tipo de functor Castillo en francs es <span lang="fr">chteau</span> C/Valds Salas, S/N<br>Oviedo<br>Espaa super<wbr>cali<wbr>frasti<wbr>listico.com
Elementos textuales
Elemento
code var samp kbd sub sup i b u
= HTML4
Definicin
Cdigo Variable Muestra, Salida Entrada teclado Subndice Superndice Voz alternativa Palabras clave Anotaciones
Ejemplo
<code>checkDB</code> chequea la base de datos. Sea <var>n</var> el nmero de personas, ... La salida es: <samp>Syntax error</samp> Pulse <kbd>F1</kbd> para obtener ayuda El agua es H<sub>2</sub>O El cuadrado es <var>x<sup>2</sup></var> Es un <i>poquillo</i> trasto Contiene <b>salmn</b> y <b>tomate</b> Escribe <u>lopo</u> en vez de <b>lobo</b>
Insercin/Borrado
= HTML4
Elemento
ins del
Definicin
Texto insertado Texto borrado
Ejemplo
<ins>Texto insertado</ins> <del>Texto eliminado</del>
<ol> <li><ins datetime="2012-02-12">Bug 2: No funciona cortar</ins></li> <li><del datetime="2012-03-01"> <ins datetime="2008-02-11">Bug 221: Error al cargar</ins> </del> </li> </ol>
Elementos textuales nuevos

Elemento
mark data time
Definicin
Texto Resaltado Ej. tras una bsqueda Dato Evento temporal datetime indica instante
Ejemplo
El <mark>lobo</mark> ibrico. Los <mark>lobo</mark>s son animales Juan sac un <data value="10">diez</data>. Nos vemos el <time datetime="2012-04-01">sbado</time>
Tablas
Elemento Definicin
table caption tr th td colgroup col tbody thead tfoot Una tabla Leyenda de la tabla Fila Celda de cabecera Celda de datos Grupo de columnas Representa una columna dentro de un colgroup Cuerpo de la tabla Cabecera de la tabla Pie de tabla <table> <caption>Notas</caption> <tr><th>Nombre</th><th>Nota</th></tr> <tr><td>Jose Torre</td><td>8</td></tr> <tr><td>Ana Blanco</td><td>6</td></tr> <tr><td>Juan Mato</td><td>4</td></tr> <tr><td>Luis Rojas</td><td>7</td></tr> </table>
Agrupar columnas
tiles para tablas que ocupan varias pginas
Contenido Incrustado
Elemento
img audio video object iframe map/area
Definicin
Imagen Audio Vdeo Objeto Pgina Mapa
Ejemplo
<img src="logoX.png" alt="Logotipo X"> <audio src="cancion.mp3" controls autoplay loop> <video src="navidad.mp4" controls > <object data="juego.swf" > <iframe src="http://www.w3c.org" > <map name="cosas"> <area shape="rect" coords="0,0,82,126" alt="casa" href="casa.htm" /> <area shape="circle" coords="90,58,3" alt="bola" href="bola.html" /> </map>
Atributos
Atributos globales HTML
= HTML4
Elemento
class id title style accesskey tabindex
Definicin
Clase Identificador nico Ttulo Informacin de estilo Atajo de teclado Navegacin mediante tabulacin
Ejemplo
<div class="Anuncio">. . .</div> <article id="r23">. . .</article> Texto <span title="verdoso">verde</span> Texto <span style="color:green">verde</span> <a accesskey=B>Bsqueda</a> <a href="about.html" tabindex="2">Acerca</a> <a href="mapa.html" tabindex="1">Mapa</a>
Atributos nuevos en HTML5
Elemento
contenteditable contextmenu hidden spellcheck translate data-*
Definicin
Indica si el elemento puede editarse Muestra men contextual Elemento no relevante Habilitar corrector ortogrfico Traducir o no una cadena Atributos definidos por el usuario
Ejemplo
Nombre: <span contenteditable>Juan</span> <input id=genero contextmenu=genero> <section id=juego hidden>. . . </section> Nombre: <input id=nombre spellcheck=no> Ejemplo ms adelante: Internacionalizacin <p data-calorias="50">kiwi</p>
Internacionalizacin
Internacionalizacin
Elemento
charset
Definicin
Codificacin
Ejemplo
<meta charset="utf-8" >
lang xml:lang
hreflang
Idioma en,es,en-US,...
Idioma de un enlace
<p lang="es"> Castillo en francs se escribe <span lang="fr">chteau</span> </p>

<a href="chateaus.html" hreflang="fr">Lista de castillos franceses</a>
translate
Traducir un texto o no
Pulsar <span translate=no>CONTINUE</span> en panel de impresora.
Internacionalizacin
Elemento
ruby, rt, rp
Definicin
Anotaciones fonticas habituales en textos asiticos
Ejemplo
<ruby><rt></rt><rt></rt></ruby>
bdi
Aislar direccionalidad del texto Formatear direccionalidad del texto
Usuario <bdi></bdi>: 3 artculos
bdo
Castillo al revs es <bdo dir=rtl>Castillo</bdo>
Ms informacin: ITS (Internationalization Tag Set) http://www.w3.org/TR/its/

Formularios
Ejemplo
http://ejemplo.com/form.html
= HTML4
<form method="post" action="http://ejemplo.com/procesa"> <label>Nombre: <input name="cliente"></label><br> <label>Correo electrnico: <input name="correo"></label><br> <button>Enviar</button> </form>
GET http://ejemplo.com/form.html form.html
WWW
POST http://ejemplo.com/procesa
Usuario
cliente = pepe correo = pepe@kiko.com
Servidor
Tipos de entrada
Elemento
text password
= HTML4
Definicin
Texto (por defecto) Oculta caracteres
Ejemplo
<input name=cliente> <input name=cliente type=text> <input type=password ...>
hiden
checkbox
Campo oculto
on/off
<input type=hiden name=origen value=20>

<p>Aficiones: <input type=checkbox name=aficiones value=Leer>Leer libros <br> <input type=checkbox name=aficiones value=Pasear>Dar paseos </p>
radio
Opcin, slo uno dentro de un grupo
<p>Gnero: <input type=radio name=genero value=H>Hombre <br> <input type=radio name=genero value=M>Mujer </p>
Tipos de entrada
= HTML4
Elemento
file submit image
Definicin
Fichero Enviar Imagen (enviar)
Ejemplo
<input type=file name=Fichero> <input type=submit value="Enviar"> <input type=image src="img.png" alt="Enviar">
reset
Reiniciar
<input type=reset value="Borrar datos">
Elementos de formularios
Atributo
fieldset
Definicin
Agrupa campos de un formulario
Ejemplo
<fieldset> <legend>Datos personales</legend> Nombre: <input name="nombre"><br> Apellidos: <input name="apellidos"> </fieldset>
<button type=submit> <select name="genero"> <option value="H">Hombre</option> <option value="M">Mujer</option> </select> <textarea rows="4" cols="50"> Comentarios </textarea>
button select
Botn Seleccionar opciones
textarea
Campo de texto libre
Atributos
Atributo
type name
= HTML4
Definicin
Tipo de entrada Nombre del campo
Ejemplo
<input type=. . . > <input name=apellidos >
value
checked
Valor del campo

Seleccionado: checkbox/radio
<input name=pas value="Espaa">

Estado Civil: <input type=radio name=estado value=S checked>Soltero <br> <input type=radio name=estado value=M>Casado <input name=apellidos maxlength="20"> <input name=edad disabled>
maxlength disabled
N mximo de caracteres Desabilitado
readonly
Slo lectura
<input name=pas value="Espaa" readonly>
Nuevos tipos de entrada

Elemento
email url tel search
Definicin
Correo electrnico URL Telfono Texto de bsqueda
Ejemplo
<input type=email name=correo> <input type=url name=Homepage> <input type=tel name=Tlfno> <input type=search name=cadena>
email
url
tel
bsqueda
Nuevos tipos de entrada

Elemento
color
Definicin
Color
Ejemplo
<input type=color name=colorFondo>
date datetime datetime-local month year week time
Fechas
<input type=date name=fechaNacimiento>
number
Nmero
<input type=number name=edad min=1 max=150>

<input type=range name=puntos min=1 max=10>
range
Rango
Nuevos atributos
Atributo
autocomplete placeholder required
Definicin
Autocompletar on/off Pista sobre el tipo de entrada Campo obligatorio
Ejemplo
<input name=Nombre autocomplete="off"> <input name=textoBuscar placeholder="Cadena a buscar"> <input name=usuario required>
pattern
Patrn (expresin regular)

Valores mnimo y mximo Se permiten entradas mltiples
<input name=nif pattern="\d{7,8}[A-Z]" title="Introduzca un NIF">

<input type=range name=puntos min=1 max=10 step=2> <input type=file name=ficherosCopia multiple>
min/max/step
multiple
Expresiones regulares
Expresin Elemento \d a*b [xyz]b a?b a+b Posibles valores Elemento 2 b, ab, aab, aaab, xb, yb, zb b, ab ab, aab, aaab,
[a-c]x [^0-9]x \Dx (pa){2}rucha .abc (a|b)+x a{1,3}x \n \p{Lu} \p{Sc}

ax, bx, cx Carcter dgito seguido de x Carcter dgito seguido de x paparucha Cualquier carcter (1) seguido de abc ax, bx, aax, bbx, abx, bax,... ax, aax, aaax Salto de lnea Letra mayscula Smbolo de moneda
Nuevos Atributos
Atributo
autofocus
Definicin
Indicar adquisicin "focus"
Lista de valores sugeridos
Ejemplo
<input name=Nombre autofocus>
<input list="lista" name="nombre"> <datalist id="lista"> <option value="Jose"> <option value="Luis"> </datalist> <input name=usuario form="DatosUsr"> <input type=submit formnovalidate formtarget="blank">
list
form formmethod formenctype formaction formnovalidate formtarget
Formulario Cambia el valor correspondiente del elemento form
Nuevos elementos
Atributo
meter
Definicin
Medida dentro de un rango. Ej. Espacio en diso,
Ejemplo
Espacio en disco: <meter value="34" max="100">34%</meter>
progress
Representa el progreso de Ficheros copiados: una tarea en ejecucin <progress value="34" Ej. %datos copiados max="100">34%</progress> Resultado de una computacin <form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber"> <input name=a type=number step=any> + <input name=b type=number step=any> = <output name=o></output> </form>
output
Nuevos elementos
Atributo
menu, command
Definicin
Crea un men con comandos
Ejemplo
<menu type=toolbar> <command label="Abrir" onclick="open()"> <command label="Guardar" onclick="save()"> </menu>
<keygen name=clave>
keygen
Genera una clave que puede enviarse en un formulario
Soporte para MathML y SVG

HTML5 admite la inclusin directa de MathML y SVG
En HTML no es necesario utilizar espacios de nombres
MathML = definir frmulas matemticas SVG = grficos vectoriales

A diferencia del canvas, los grficos pueden escalarse El sistema indica elemento a dibujar
Soporte para MathML y SVG

Ejemplo
<!DOCTYPE html> <title>MathML y SVG</title> <meta charset="UTF-8" > <p> Una ecuacin: <math> <mrow><mi>x</mi><mo>=</mo> <msqrt> <mfrac> <mrow><mi>Varianza</mi></mrow> <mrow><mn>2</mn></mrow> </mfrac> </msqrt> </mrow> </math> y un crculo: <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg> </p> http://www.di.uniovi.es/~labra/cursos/XML/ejemplos/svgMathML.html
Microdatos
Enriquecer un documento con valores de un vocabulario
Aade metadatos que pueden procesarse automticamente Objetivo: Facilitar descripcin de los contenidos Acercamiento a la Web Semntica Consiste en grupos de parejas nombre/valor
Microdatos
Atributo
itemscope
itemtype
Definicin
Contenedor de microdatos
Define tipo de tems
Valores
Valor booleano
Lista de URIs
itemid
itemref itemprop
Identificador del tem

Referencia donde se pueden obtener ms datos Propiedad a definir
URI
Identificador Nombre de la propiedad a declarar
Microdatos
Los valores de la propiedad definida en itemprop dependen del tipo de elemento:
Elemento
meta a, area, link
Valor
Valor de content Valor de href
audio, embed, video, iframe, img, source, track

object data
Valor de src
Valor de data Valor de value
Resto de elementos
Contenido textual
Microdatos
Ejemplo:
<div itemscope itemtype="http://schema.org/Offer" itemid="http://ejemplo.org/Oferta24"> <h1 itemprop="name">Batidora</h1> <p>Precio: <span itemprop="price">19.95</span> <p itemscope itemprop="reviews" itemtype="http://schema.org/AggregateRating"> Puntuacin: <span itemprop="ratingValue">3</span> sobre <span itemprop="bestRating">5</span>. Basado en <span itemprop="ratingCount">25</span> usuarios </p> </div>
Accesibilidad
Accesibilidad y HTML5
WAI-ARIA (Accessible Rich Internet Applications)
Define roles para mejorar la accesibilidad
Rol
banner search navigation main contentinfo complementary application . . .
Valor
Cabecera Bsqueda Navegacin Cuerpo principal Informacin sobre el contenido Contenido complementario Identifica una aplicacin . . .
Fin de la Presentacin

8 HTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

8 HTML

Cargado por

Copyright:

Formatos disponibles

HTML

Jose Emilio Labra Gayo Departamento de Informtica Universidad de Oviedo

Proceso de Estandarizacin Dnde est tu tecnologa favorita?

Adopcin del estndar (limitaciones)

Internacionales ISO, W3C, IETF, ECMA, WHATWG, etc.

Hypertext Markup Language (T. Berners Lee)

HTML 2.0 (IETF) XML

HTML 3.2 (W3c) HTML 4.01 (W3c)

XHTML 1.0 (W3c) XHTML 2.0 Borrador (W3c)

HTML5 (W3c & Whatwg)

Jose Emilio Labra Gayo, Universidad de Oviedo

Describe cmo gestionar errores

Facilita desarrollo de aplicaciones Web

Jose Emilio Labra Gayo, Universidad de Oviedo

Jose Emilio Labra Gayo, Universidad de Oviedo

Jose Emilio Labra Gayo, Universidad de Oviedo

Transicional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<input name=tlfno disabled> HTML

<input name="tlfno" disabled="" /> XHTML

Jose Emilio Labra Gayo, Universidad de Oviedo

Se pueden anidar elementos

pero no se pueden entrelazar

Jose Emilio Labra Gayo, Universidad de Oviedo

En XML pueden simplificarse como:

En HTML, no es obligatorio cerrar etiquetas siempre:

Jose Emilio Labra Gayo, Universidad de Oviedo

Jose Emilio Labra Gayo, Universidad de Oviedo

Comentarios condicionales (Slo Internet Explorer)

<html> <head> ...metadatos </head> <body> ...contenido </body> </html>

Jose Emilio Labra Gayo, Universidad de Oviedo

Jose Emilio Labra Gayo, Universidad de Oviedo

Jose Emilio Labra Gayo, Universidad de Oviedo

Jose Emilio Labra Gayo, Universidad de Oviedo

rel="stylesheet" permite asociar una hoja de estilos

Jose Emilio Labra Gayo, Universidad de Oviedo

Jose Emilio Labra Gayo, Universidad de Oviedo

Jose Emilio Labra Gayo, Universidad de Oviedo

Tambin existe <noscript>: muestra su contenido si est deshabilitado el scripting

Jose Emilio Labra Gayo, Universidad de Oviedo

Problemas: no hay semntica, cortar/pegar,

Pueden anidarse secciones y artculos

Diferencia section est dentro de algo article tiene identidad propia

Jose Emilio Labra Gayo, Universidad de Oviedo

Jose Emilio Labra Gayo, Universidad de Oviedo

Jose Emilio Labra Gayo, Universidad de Oviedo

Elementos para agrupar contenido

Jose Emilio Labra Gayo, Universidad de Oviedo

Prrafos, listas, definiciones

Jose Emilio Labra Gayo, Universidad de Oviedo

Figuras: figure, figcaption

figcaption representa la leyenda de la figura

Jose Emilio Labra Gayo, Universidad de Oviedo

Jose Emilio Labra Gayo, Universidad de Oviedo

Jose Emilio Labra Gayo, Universidad de Oviedo

Ttulos de obras En <cite>El Quijote</cite> hay 2 protagonistas.

Juan dijo <q>Bien predica quien bien vive</q>

Jose Emilio Labra Gayo, Universidad de Oviedo

Jose Emilio Labra Gayo, Universidad de Oviedo

Jose Emilio Labra Gayo, Universidad de Oviedo

Elementos textuales nuevos

Jose Emilio Labra Gayo, Universidad de Oviedo

tiles para tablas que ocupan varias pginas

Jose Emilio Labra Gayo, Universidad de Oviedo