Introducción a html 5

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>


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

¿Preguntas?

Muchas Gracias!

Datos de Contacto

Instructor: Ing. Rocco, Sebastián

Mail: [email protected]

Web: www.movizen.com

Blog: www.smrocco.com

Introducción a html 5

Technology

Transcript of Introducción a html 5