Instituto Normal de Enseñanza Técnica               Gabriela Pérez Cavigliahttp://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 car...
doctype         XHTML 1.0                        HTML5<!DOCTYPE html PUBLIC                  <!doctype html>"-//W3C//DTD X...
head                  Codificación de caracteres para el documento.         XHTML 1.0                                     ...
head                              Enlace a la hoja de estilos          XHTML 1.0                                          ...
bodyAquí están los cambios más improtantes, ya que se agregan nuevos elementos que                 ayudan a identificar ca...
Nuevas etiquetas                                  <header>Presenta información introductoria y puede ser aplicado en difer...
Nuevas etiquetas                                  <footer> Representa información adicional sobre su elemento padre, como ...
Nuevas etiquetas                                    <figure>  Este elemento representa una porción independiente de conten...
Nuevas etiquetas                                 <small>Este elemento representa contenido al margen, como letra pequeña (...
Ejemplo<div id="contenedor"><headerid="cabezal"><h1>El título principal delsitio</h1></header><nav id="menu"><ul><li>inici...
video con HTML5HTML5 introduce un elemento para insertar y reproducir video dentro de un documento HTML. Para esto se usa ...
video con HTML5controls. muestra los controles del videoautoplay: empezará a reproducir el video automáticamente tanpronto...
video con HTML5HTML5 provee un nuevo elemento para incorporar audio en undocumento HTML, el elemento <audio> que comparte ...
Upcoming SlideShare
Loading in …5
×

Html5

241 views

Published on

  • Be the first to comment

Html5

  1. 1. Instituto Normal de Enseñanza Técnica Gabriela Pérez Cavigliahttp://creativecommons.org/licenses/by-nc-nd/3.0/
  2. 2. 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ácilcodificar, usar y acceder a las páginas Web.
  3. 3. doctype XHTML 1.0 HTML5<!DOCTYPE html PUBLIC <!doctype html>"-//W3C//DTD XHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml">
  4. 4. head Codificación de caracteres para el documento. XHTML 1.0 HTML5<meta http-equiv="Content-Type" <meta charset="utf-8">content="text/html; charset=utf-8" /> <!DOCTYPE HTML><html><head> <meta charset="utf-8"><title>Titulo del documento</title></head> <body></body></html>
  5. 5. head Enlace a la hoja de estilos XHTML 1.0 HTML5<link href="estilos.css" <link href="estilos.css"rel="stylesheet" type="text/css" /> rel="stylesheet">
  6. 6. 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
  7. 7. 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 delmismo. Ejemplos pueden ser citas, información en barras laterales, publicidad, etc.
  8. 8. 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).
  9. 9. 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
  10. 10. 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 eldocumento completo. Es recomendable que sea insertado dentro de un elemento <footer>.
  11. 11. Ejemplo<div id="contenedor"><headerid="cabezal"><h1>El título principal delsitio</h1></header><nav id="menu"><ul><li>inicio</li><li>item 1</li><li>item2</li><li>item 3</li></ul></nav><sectionid="principal">La información principaldel sitio...</section><asideid="secundaria">Informaciónsecundaria...</aside><footer id="pie">Elpie del documento...</footer></div>
  12. 12. video con HTML5HTML5 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>
  13. 13. video con HTML5controls. muestra los controles del videoautoplay: empezará a reproducir el video automáticamente tanpronto como pueda.loop: Para que el video se reproduzca continuamente.poster: Muestra una imagen mientras esperamos que el videoempiece a reproducirse.
  14. 14. video con HTML5HTML5 provee un nuevo elemento para incorporar audio en undocumento 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>

×