introducción a html 5
TRANSCRIPT
![Page 1: Introducción a html 5](https://reader038.vdocuments.net/reader038/viewer/2022102811/58eed6881a28ab21688b458f/html5/thumbnails/1.jpg)
Instructor: Ing. Rocco, Sebastián
Mail: [email protected]
Web: www.movizen.com
Blog: www.smrocco.com
Introducción a HTML5
![Page 2: Introducción a html 5](https://reader038.vdocuments.net/reader038/viewer/2022102811/58eed6881a28ab21688b458f/html5/thumbnails/2.jpg)
Agenda
• ¿Qué es HTML5?
• Historia
• Beneficios
• HTML5 - Estructura
• Nuevas Etiquetas
![Page 3: Introducción a html 5](https://reader038.vdocuments.net/reader038/viewer/2022102811/58eed6881a28ab21688b458f/html5/thumbnails/3.jpg)
¿Qué es HTML5?
• Es la actualización de HTML (Hypertext Markup
Language). El lenguaje en el que es creada la web.
• Es un término de marketing para agrupar las nuevas
tecnologías de desarrollo de aplicaciones web:
– HTML5,
– CSS3 y
– nuevas capacidades de Javascript.
• La versión anterior y más usada de HTML, HTML4,
carece de características necesarias para la creación
de aplicaciones modernas basadas en un navegador.
![Page 4: Introducción a html 5](https://reader038.vdocuments.net/reader038/viewer/2022102811/58eed6881a28ab21688b458f/html5/thumbnails/4.jpg)
¿Qué es HTML5?
HTML5 CSS3JavaScript
+ +
![Page 5: Introducción a html 5](https://reader038.vdocuments.net/reader038/viewer/2022102811/58eed6881a28ab21688b458f/html5/thumbnails/5.jpg)
Historia
World Wide Web Consortium - Febrero 2009
El grupo de trabajo de HTML publicó el primer
borrador sobre HTML5 y diferencias entre HTML5
y HTML4
![Page 6: Introducción a html 5](https://reader038.vdocuments.net/reader038/viewer/2022102811/58eed6881a28ab21688b458f/html5/thumbnails/6.jpg)
HTML5 – Beneficios
• HTML5 = Evolución
• Mejor manejo de errores
• Mayor estandarización
• Código más semántico
• Más accesible
• Soporte multimedia
![Page 7: Introducción a html 5](https://reader038.vdocuments.net/reader038/viewer/2022102811/58eed6881a28ab21688b458f/html5/thumbnails/7.jpg)
HTML5 – Beneficios
• Acceso a recursos como webcams o micrófonos
• Almacenamiento Local
• Webworkers
• Geolocalización
• Gestión de formularios
• Menor dependencia de plugins y Javascript
![Page 8: Introducción a html 5](https://reader038.vdocuments.net/reader038/viewer/2022102811/58eed6881a28ab21688b458f/html5/thumbnails/8.jpg)
HTML5 - Estructura
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Página</title>
</head>
<body>
</body>
</html>
![Page 9: Introducción a html 5](https://reader038.vdocuments.net/reader038/viewer/2022102811/58eed6881a28ab21688b458f/html5/thumbnails/9.jpg)
HTML5 - DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN”
"http://www.w3.org/TR/xhtml1/DTD/x
html1-strict.dtd">
XHTML 1.0 HTML5
<!DOCTYPE html>
![Page 10: Introducción a html 5](https://reader038.vdocuments.net/reader038/viewer/2022102811/58eed6881a28ab21688b458f/html5/thumbnails/10.jpg)
HTML5 - META
<meta http-equiv=“Content-Type”
content=“text/html; charset=UTF-8”>
HTML 4.01 HTML5
<meta charset=“UTF-8”>
![Page 11: Introducción a html 5](https://reader038.vdocuments.net/reader038/viewer/2022102811/58eed6881a28ab21688b458f/html5/thumbnails/11.jpg)
HTML5 - Script
<script type=“text/javascript”
src=“file.js”> </script>
<script type=“text/javascript”>
………
</script>
HTML 4.01 HTML5
<script src=“file.js”></script>
<script>
………
</script>
![Page 12: Introducción a html 5](https://reader038.vdocuments.net/reader038/viewer/2022102811/58eed6881a28ab21688b458f/html5/thumbnails/12.jpg)
HTML5 – Hoja de Estilo
<link rel=“stylesheet” type=“text/css”
href=“estilos.css”>
HTML 4.01 HTML5
<link rel=“stylesheet”
href=“estilos.css”>
![Page 13: Introducción a html 5](https://reader038.vdocuments.net/reader038/viewer/2022102811/58eed6881a28ab21688b458f/html5/thumbnails/13.jpg)
HTML5 – Etiqueta "a"
<h2>
<a href=“acercaDe.htm”>Acerca
de</a>
</h2>
<p>
<a href=“acercaDe.htm”>Conoce
quiénes somos</a>
</p>
HTML 4.01 HTML5
<a href=“acercaDe.htm”>
<h2>Acerca de</h2>
<p>Conoce quiénes somos</p>
</a>
![Page 14: Introducción a html 5](https://reader038.vdocuments.net/reader038/viewer/2022102811/58eed6881a28ab21688b458f/html5/thumbnails/14.jpg)
HTML5 – Tags Semánticos
<div id=“header”>
<div id=“menu”>
<div id=“footer”>
<div>
<div><div>
<header>
<nav>
<footer>
<article>
<section><aside>
![Page 15: Introducción a html 5](https://reader038.vdocuments.net/reader038/viewer/2022102811/58eed6881a28ab21688b458f/html5/thumbnails/15.jpg)
HTML5 – Tags Semánticos
• <header>: Está diseñada para reemplazar la necesidad de crear divs sin significado semántico. Ej: <div id="header">.
• <hgroup>: Permite colocar un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar otro h1 en el sitio. En el HTML actual, sólo puedes usar h1 una vez por sitio o el h1 pierde prioridad de SEO.
• <nav>: Diseñado para colocar la botonera de navegación principal. Internamente se recomienda usar listas <ul>.
![Page 16: Introducción a html 5](https://reader038.vdocuments.net/reader038/viewer/2022102811/58eed6881a28ab21688b458f/html5/thumbnails/16.jpg)
HTML5 – Tags Semánticos
• <section>: Define un área de contenido única dentro del sitio.
Ej: En un blog, sería la zona donde están todos los posts.
• <article>: Define zonas únicas de contenido independiente.
En el home de un blog, cada post sería un article.
• <aside>: Cualquier contenido que no esté relacionado con el
objetivo primario de la página. Ej: En el home de un periódico,
puede ser el área de indicadores económicos.
• <footer>: Es el pie de página y todo lo que lo compone.
![Page 17: Introducción a html 5](https://reader038.vdocuments.net/reader038/viewer/2022102811/58eed6881a28ab21688b458f/html5/thumbnails/17.jpg)
HTML5 – Nuevos Tags
• <hgroup>
• <time>
• <mark>
• <small>
• <figure> y <figcaption>
<hgroup><h1>My Recipes</h1><h2>Great to eat, easy to make</h2>
</hgroup>
<time datetime="2012-08-08">Today</time>
<p>This text should be <mark>noted for future use.</mark>.</p>
<p>Heat your beans for five minutes. <small>Or until they are hot enough for you.</small></p>
<figure><img src="plateofbeans.jpg" alt="A Plate of beans" /><figcaption>A plate of beans</figcaption>
</figure>
![Page 18: Introducción a html 5](https://reader038.vdocuments.net/reader038/viewer/2022102811/58eed6881a28ab21688b458f/html5/thumbnails/18.jpg)
¿Preguntas?
![Page 19: Introducción a html 5](https://reader038.vdocuments.net/reader038/viewer/2022102811/58eed6881a28ab21688b458f/html5/thumbnails/19.jpg)
Muchas Gracias!
![Page 20: Introducción a html 5](https://reader038.vdocuments.net/reader038/viewer/2022102811/58eed6881a28ab21688b458f/html5/thumbnails/20.jpg)
Datos de Contacto
Instructor: Ing. Rocco, Sebastián
Mail: [email protected]
Web: www.movizen.com
Blog: www.smrocco.com