Introducción a html 5

Instructor: Ing. Rocco, Sebastián
Mail: srocco@movizen.com
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>

• <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>.

• <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>

Datos de Contacto
Instructor: Ing. Rocco, Sebastián
Mail: srocco@movizen.com
Web: www.movizen.com
Blog: www.smrocco.com

Introducción a html 5

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (15)

Similar a Introducción a html 5

Similar a Introducción a html 5 (20)

Último

Último (10)

Introducción a html 5