ESPECIALIZACIN WEBMASTER ORIANA CASTRO INGRID VELASQUEZ RUBIELA QUINTERO

HISTORIA

HTML 5 (HyperText Markup Language, versin 5): Es la quinta revisin mayor del lenguaje bsico de la World Wide Web, HTML. HTML 5 especifica dos variantes del mismo lenguaje: un clsico HTML (text/html), la variante conocida como HTML 5 y una variante XHTML conocida como XHTML 5. Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo. Hace 10 aos que se actualiz por ltima vez el HTML con la especificacin 4.01. Desde entonces, la web ha cambiado radicalmente como tambin lo ha hecho el modo de disear y desarrollar pginas. Se han estandarizado una serie de elementos como los encabezados o el men, se utiliza Ajax para recargar el contenido dinmicamente y todo el mundo usa CSS para definir los atributos visuales de la pgina.

NOVEDADES

CLASE: SEMNTICA Ofreciendo significado a la estructura, la semntica es la parte central y frontal del HTML5. Un conjunto de etiquetas ms ricas, microdatos y microformatos, harn que la web basada en datos sea ms til para programas y usuarios CLASE: OFFLINE Y ALMACENAMIENTO Las aplicaciones de HTML5 se iniciarn ms rpido y funcionarn incluso si no se dispone de conexin a internet, gracias a la Cach de Aplicaciones, Almacenamiento Local, DB Indexadas y las APIs de ficheros. CLASE: ACCESO DE DISPOSITIVOS La geo-localizacin es slo el comienzo. HTML5 ayudar a las aplicaciones a acceder a los dispositivos ms all del navegador y conectados al equipo. CLASE: MULTIMEDIA Audio y vdeo son los elementos ms destacados en la web del HTML5. CLASE: 3D, GRFICOS Y EFECTOS SVG, Canvas, WebGL y las caractersticas 3D de CSS3 permitirn realizar efectos visuales representados de forma nativa en el navegador. CLASE: RENDIMIENTO E INTEGRACIN Haz que tu aplicacin y la web sean ms veloces con un conjunto de tcnicas y tecnologas como Web Workers y XMLHttpRequest CLASE: CSS3 CSS3 ofrece un amplio rango de estilos y efectos, mejorando las aplicaciones web sin sacrificar el rendimiento o la estructura semntica. Adems, el formato de fuentes web abiertas (WOFF) ofrece flexibilidad tipogrfica y control ms all de lo que la web ha ofrecido hasta ahora

ETIQUETAS
NUEVOS ELEMENTOS

<section> Puede ser un captulo, una seccin de un captulo o bsicamente cualquier cosa que incluya su propio encabezamiento. <header> La cabecera de una pgina. No confundir con el elemento head <footer> El final de la pgina. <nav> Una coleccin de links a otras pginas <article> Una entrada independiente en un blog, revista, etc. <aside> Es un bloque semntico que representa una nota, un consejo una explicacin. <figure> Se utilizar para representar una imagen <dialog> Se utilizar para representar una conversacin entre varias personas <time> Se utilizar para marcar un momento temporal en una historia <progress>Representar el estado de cierto proceso <video>Archivo de video <audio> Archivo de audio <canvas>Etiqueta que define grficos <details>Ms detalles <datagrid>Una tabla, una recopilacin de datos formateados <menu>Menu de navegacin

ESTRUCTURA

Elementos Modificados

El elemento <a /> sin href ahora crear un enlace al sitio.

El elemento <address /> es ahora un nuevo concepto de seccin. El elemento <b /> ahora representa un trozo de texto a ser estilizado sin ninguna importancia. Para elementos <label /> el navegador no debe mover el foco desde la etiqueta al control a menos que el comportamiento sea estandar para el interfaz utilizado en la plataforma. <menu /> ha sido redefinido para ser usado con los actuales mens. El elemento <small /> ahora representa una impresin pequea. El elemento <strong /> definitivamente representa el enfasis puesto en trozo de nuestro texto.

Elementos Eliminados

< Acronym>, < applet>, < basefont>, < big>, < center>, < dir>, < font>, < frame>, <frameset>, < isindex>, < noframes>, < noscript> (solo en XHTML5), < s>, < strike>, < i>, < u>.

Nuevos atributos

autofocus: Destinado para indicar el elemento <input /> (no hidden), <select />, <textarea /> o <button /> que ha de coger el foco al cargar la pgina.
form: Atributo para <input />, <ouput />, <select /> <textarea />, <button /> y <fieldset /> que permite que se asocien con un simple formulario. replace: atributo para <input /> <button /> y <form /> que le afectar cuando el contenido del elemento sofra algn cambio. datetime,month,time,number,range,image,email,url,search, inputmode : Para elementos <input />. data: Para <form />, <select /&gt; y <datalist />.

required: Para elementos <input /> (Excepto hidden e image) y <textarea />, indica que el campo es obligatorio.
disabled: Para <fieldset />, permite desactivar el fieldset completo. autocomplete, min, max, pattern, step: Para elementos <input /> permite delimitar las posibilidades de nuestros elementos de entrada. list: Para elementos <datalist /> y <select />. template: Para <input /> y <button /> podr usarse para repetir templates. async: Para el elemento <script /> el ajax hecho atributo.

ATRIBUTOS ELIMINADOS

Atributos Eliminados rev y charset en <link /> y <a /> target en <link /> nohref en <area /> profile en <head /> version en <html /> name en <map /> scheme en <meta /> archive, classid, codetype, declare y standby en <object /> valuetype en <param /> charset en <script /> summary en <table /> header, axis y abbr en <td /> y <th />

EJEMPLOS
<nav> <a href="">HTML5 Tuts</a> <a href="">CSS3 Tuts</a> </nav> <section> <header> <h2>HTML5 Tutorial</h2> <p>Aprenda HTML5 </p> </header> <article> <h3>HTML Tutorial 1</h3> <p>Etiquetas</p> </article> <article> <h3>HTML Tutorial 2</h3> <p>Ejemplos</p> </article> <footer>SENA</footer> </section> <section>

EJEMPLO 2
<p>Nombre: <input type="text" name="nombre" id="nombre" required /></p>

<p>Edad:<input type="range" max="100" min="5" name="edad" id="edad" />

<output onformchange="value = edad.value">0</output></p> <p><input type="email" value="some@email.com" /></p> <p>Web:<input type="url" name="web" id="web" /></p> <p><input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/></p> <p><input type="range" min="0" max="50" value="10" /></p>

<p><input type="search" results="10" placeholder="Search..." /></p>

<p><input type="tel" placeholder="(555) 555-5555" pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" /></p> <p><input type="color" placeholder="e.g. #bbbbbb" /></p>

EJEMLPO 3
<mark>WEBMASTER</mark ></p> <video controls width="500" height="300" src="http://videos.mozilla.org/firefox/3.5/meet/meet.ogv" type="video/ogv"> </video> <audio controls width="500" height="300" src="http://videos.mozilla.org/firefox/3.5/meet/meet.ogv" type="video/ogv"> </audio> LOCALIZACIN function obtener_localizacion() { navigator.geolocation.getCurrentPosition(coordenadas); } function coordenadas(position) { var latitud = position.coords.latitude; var longitud = position.coords.longitude; nadas son: ('+latitud+','+longitud+')'); } alert('Tus coorde