Instructor: Ing. Rocco, Sebastián
Mail: [email protected]
Web: www.movizen.com
Blog: www.smrocco.com
Introducción a HTML5
Agenda
• ¿Qué es HTML5?
• Historia
• Beneficios
• HTML5 - Estructura
• Nuevas Etiquetas
¿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.
¿Qué es HTML5?
HTML5 CSS3JavaScript
+ +
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
HTML5 – Beneficios
• HTML5 = Evolución
• Mejor manejo de errores
• Mayor estandarización
• Código más semántico
• Más accesible
• Soporte multimedia
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
HTML5 - Estructura
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Página</title>
</head>
<body>
</body>
</html>
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>
HTML5 - META
<meta http-equiv=“Content-Type”
content=“text/html; charset=UTF-8”>
HTML 4.01 HTML5
<meta charset=“UTF-8”>
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>
HTML5 – Hoja de Estilo
<link rel=“stylesheet” type=“text/css”
href=“estilos.css”>
HTML 4.01 HTML5
<link rel=“stylesheet”
href=“estilos.css”>
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>
HTML5 – Tags Semánticos
<div id=“header”>
<div id=“menu”>
<div id=“footer”>
<div>
<div><div>
<header>
<nav>
<footer>
<article>
<section><aside>
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>.
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.
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>
¿Preguntas?
Muchas Gracias!
Datos de Contacto
Instructor: Ing. Rocco, Sebastián
Mail: [email protected]
Web: www.movizen.com
Blog: www.smrocco.com