HTML5
-
Upload
miguel-angel-camacho -
Category
Documents
-
view
3 -
download
0
description
Transcript of HTML5
![Page 1: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/1.jpg)
HTML 5MIGUEL ÁNGEL CAMACHO POLVO
![Page 2: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/2.jpg)
<!DOCTYPE html>
La declaración DOCTYPE para HTML5 es muy simple:
<meta charset="UTF-8">
La codificación de caracteres (charset) declaración también es muy simple:
![Page 3: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/3.jpg)
La codificación de caracteres por defecto en HTML5 es UTF-8.
![Page 4: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/4.jpg)
Nuevos elementos de HTML5
Los nuevos elementos más interesantes son:
Nuevos elementos semánticos como <header>, <pie de página>, <article> y <section>.
Nueva forma de control de atributos como el número, fecha, hora, calendario y alcance.
Nuevos elementos gráficos: <svg> y <canvas>.
Nuevos elementos multimedia: <audio> y <video>.
![Page 5: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/5.jpg)
Nuevas API’s de HTML5(Application Programming Intercafes)
Las API’s más interesantes son: Geolocalización HTML Arrastrar y soltar HTML HTML Almacenamiento local HTML Aplicación Caché Trabajadores Web HTML HTML SSE
* Almacenamiento local es un reemplazo de gran alcance para las cookies.
![Page 6: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/6.jpg)
Historia de HTMLDesde los primeros días de la web, han habido muchas versiones de HTML:
![Page 7: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/7.jpg)
Historia de HTML Tim Berners-Lee inventó la "World Wide Web" en 1989, y la Internet despegó en la década de 1990.
De 1991 a 1998, HTML desarrolló desde la versión 1 a la versión 4.
En 2000, el Consorcio World Wide Web (W3C) recomienda XHTML 1.0.
La sintaxis XHTML era estricta, y los desarrolladores se vieron obligados a escribir código válido y "bien formado”
En 2004, WHATWG (Grupo de Trabajo de Tecnología Web de hipertexto Aplicación) se formó en respuesta a retrasar el desarrollo del W3C, y la decisión del W3C para cerrar el desarrollo de HTML, a favor de XHTML.
WHATWG quería desarrollar HTML, coherente con cómo se utiliza la web, sin dejar de ser compatible con versiones anteriores de HTML.
En el período 2004-2006, la iniciativa WHATWG ganó el apoyo de los principales proveedores de navegadores.
En 2006, el W3C ha anunciado que apoyarían WHATWG.
En 2008, el primer borrador público HTML5 fue puesto en libertad.
![Page 8: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/8.jpg)
HTML5 – Soporte del Navegador
Se le puede enseñar a los navegadores más antiguos de manejar HTML5 correctamente.
HTML5 es compatible con todos los navegadores modernos. Navegadores, antiguos y nuevos, manejan automáticamente los elementos no reconocidos como elementos en línea. Debido a esto, se puede "enseñar" navegadores antiguos para manejar elementos HTML "desconocidos”. Usted puede incluso enseñar a IE6 (Windows XP, 2001) cómo manejar elementos HTML desconocidas.
Definir HTML5 elementos como elementos de bloque
HTML5 define ocho nuevas semánticas elementos HTML. Todos estos son a nivel de bloque elementos. Para asegurar buena función en los navegadores más antiguos, se puede establecer el CSS display propiedad a bloquear:
![Page 9: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/9.jpg)
Añadiendo nuevos elementos a HTMLEste ejemplo añade un nuevo elemento llamado <Myhero> de HTML, y define un estilo de visualización:
![Page 10: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/10.jpg)
![Page 11: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/11.jpg)
UN ESQUELETO HTML5
![Page 12: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/12.jpg)
Un HTML5 esqueleto
![Page 13: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/13.jpg)
![Page 14: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/14.jpg)
![Page 15: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/15.jpg)
NUEVOS ELEMENTOS DE
HTML5
![Page 16: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/16.jpg)
Nuevos elementos de HTML5.
- NUEVOS ELEMENTOS SEMÁNTICOS / ESTRUCTURALESHTML5 ofrece nuevos elementos para una mejor estructura del documento:
![Page 17: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/17.jpg)
Nuevos elementos de HTML5.
- NUEVOS ELEMENTOS FORMULARIO
- NUEVOS TIPOS DE ENTRADA
![Page 18: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/18.jpg)
Nuevos elementos de HTML5.
- NUEVA ATRIBUCIÓN DE SINTAXIS
HTML5 permite cuatro sintaxis diferentes para los atributos.
Este ejemplo demuestra las diferentes sintaxis utilizados en una etiqueta <input>:
En HTML5, los cuatro sintaxis se pueden utilizar, dependiendo de lo que se necesita para el atributo.
![Page 19: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/19.jpg)
Nuevos elementos de HTML5.
- HTML5 GRÁFICOS
- NUEVOS ELEMENTOS MEDIA
![Page 20: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/20.jpg)
ELEMENTOS SEMÁNTICOS
![Page 21: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/21.jpg)
ELEMENTOS SEMÁNTICOS
La semántica es el estudio de los significados de las palabras y frases en el idioma.
Elementos semánticos son elementos con un significado.
Un elemento semántico describe claramente su significado tanto para el navegador y el desarrollador.
Los ejemplos de no-semánticos elementos: <div> y <span> - Le dice nada acerca de su contenido.
Ejemplos de semánticas elementos: <FORM>, <table> y <img> - define claramente su contenido.
![Page 22: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/22.jpg)
NUEVOS ELEMENTOS SEMÁNTICOS EN HTML5
Muchos sitios web contienen código HTML como: <div id = "nav"> <div class = "header"> <div id = "pie de página"> para indicar navegación, encabezado y pie de página.
HTML5 ofrece nuevos elementos semánticos para definir las diferentes partes de una página web:
<artículo> <aside> <detalles> <figcaption> <figura> <pie de página> <header> <principal> <mark> <nav> <section> <summary> <hora>
![Page 23: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/23.jpg)
NUEVOS ELEMENTOS SEMÁNTICOS EN HTML5
A continuación se muestra una lista alfabética de los nuevos elementos semánticos en HTML5.
![Page 24: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/24.jpg)
MIGRACIÓN HTML4 HTML5
![Page 25: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/25.jpg)
MIGRACIÓN HTML4 HTML5
Para convertir una página HTML 4 en una página HTML5, sin destruir nada del contenido o estructura original, seguir lo siguiente:
![Page 26: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/26.jpg)
MIGRACIÓN HTML4 HTML5
Para convertir una página HTML 4 en una página HTML5, sin destruir nada del contenido o estructura original, seguir lo siguiente:
![Page 27: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/27.jpg)
MIGRACIÓN HTML4 HTML5
Para convertir una página HTML 4 en una página HTML5, sin destruir nada del contenido o estructura original, seguir lo siguiente:
![Page 28: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/28.jpg)
MIGRACIÓN HTML4 HTML5
Para convertir una página HTML 4 en una página HTML5, sin destruir nada del contenido o estructura original, seguir lo siguiente:
![Page 29: HTML5](https://reader035.fdocuments.co/reader035/viewer/2022070508/5695d3801a28ab9b029e23a0/html5/thumbnails/29.jpg)
FIN