html5
TRANSCRIPT
Instituto Normal de Enseñanza TécnicaGabriela Pérez Caviglia
http://creativecommons.org/licenses/by-nc-nd/3.0/
HTML5 es la última versión del lenguaje de marcación e incluye nuevas
características, además de mejorar algunas características existentes.
El objetivo es que sea más fácil codificar, usar y acceder a las páginas Web.
doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<!doctype html>
XHTML 1.0 HTML5
head
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
XHTML 1.0 HTML5
Codificación de caracteres para el documento.
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>Titulo del documento</title></head><body></body></html>
head
<link href="estilos.css" rel="stylesheet" type="text/css" />
<link href="estilos.css" rel="stylesheet">
XHTML 1.0 HTML5
Enlace a la hoja de estilos
bodyAquí están los cambios más improtantes, ya que se agregan nuevos elementos que
ayudan a identificar cada sección del documento.
XHTML 1.0 HTML5
Estas secciones se resolvíamos con divs En html5 tiene sus propias etiquetas
Nuevas etiquetas
<header>
Presenta información introductoria y puede ser aplicado en diferentes secciones del documento. Tiene el propósito de contener la cabecera de una sección.
<nav>
Indica una sección de enlaces con propósitos de navegación, como menús. Son bloques de navegación.
<section>
Contenido que está relacionado con el contenido principal pero no es parte del mismo. Ejemplos pueden ser citas, información en barras laterales, publicidad, etc.
Nuevas etiquetas
<footer>
Representa información adicional sobre su elemento padre, como el pie normal de una página web.
<article>
Representa una porción independiente de información relevante (por ejemplo, cada artículo de un períodico o cada entrada de un blog)
<hgroup>
Este elemento es usado para agrupar elementos H cuando la cabecera tiene múltiples niveles (por ejemplo, una cabecera con título y subtítulo).
Nuevas etiquetas
<figure>
Este elemento representa una porción independiente de contenido (por ejemplo, imágenes, diagramas o videos.
<figcaption>
Este elemento es utilizado para mostrar una leyenda o pequeño texto relacionado con el contenido de un elemento <figure>, como la descripción de una imagen.
<mark>
Este elemento resalta un texto que tiene relevancia en una situación en particular
Nuevas etiquetas
<small>
Este elemento representa contenido al margen, como letra pequeña (por ejemplo, descargos, restricciones legales, declaración de derechos, etc.).
<address>
Este elemento encierra información de contacto para un elemento <article> o el documento completo. Es recomendable que sea insertado dentro de un elemento
<footer>.
Ejemplo<div id="contenedor"><header id="cabezal"><h1>El título principal del sitio</h1></header><nav id="menu"><ul><li>inicio</li><li>item 1</li><li>item 2</li><li>item 3</li></ul></nav><section id="principal">La información principal del sitio...</section><aside id="secundaria">Información secundaria...</aside><footer id="pie">El pie del documento...</footer></div>
video con HTML5
HTML5 introduce un elemento para insertar y reproducir video dentro de un documento HTML. Para esto se usa el elemento
<video></video>
<article><video id=”" width="560" height="310" controls><source src=“video1.mp4"><source src= “video1.ogg"></video></article>
video con HTML5
controls. muestra los controles del videoautoplay: empezará a reproducir el video automáticamente tan pronto como pueda.loop: Para que el video se reproduzca continuamente.poster: Muestra una imagen mientras esperamos que el video empiece a reproducirse.
video con HTML5
HTML5 provee un nuevo elemento para incorporar audio en un documento HTML, el elemento <audio> que comparte casi las
mismas características del elemento <video>.
<section id="reproductor_audio"><audio id="sonido" controls><source src="sonidos/explosion.mp3"><source src="sonidos/explosion.ogg"></audio></section>