En esta nueva de entrega del curso de Html5 y Css3, les detallare el uso de las nuevas etiquetas que surgieron en HTML5 y la nueva declaracion de su “doctype”
1. CAMBIOS DE HTML5
DECLARACION DE DOCTYPE
El primer cambio gigante que hizo html5 fue reducir el tamaño del doctype de HTML4.01
A una simple línea:
HTML5 no es un lenguaje estrictamente relacionado con XML.
NUEVOS ELEMENTOS DE ESTRUCTURA
ARTICLE
Este nueva etiqueta “<ARTICLE></ARTICLE>”, mejora la manejabilidad de artículos, este puede ser contenido de un post.
Ejemplo de Uso de un articulo de un blog.
</article>.
Ejemplo grafico
Más en: http://www.w3schools.com/tags/tag_article.asp
ASIDE
Esta etiqueta “<ASIDE></ASIDE>” contiene el contenido tangencial(importante) de la web, que puede ser usado en post destacados.
Ejemplo:
Ejemplo Grafico:
Más en: http://www.w3schools.com/tags/tag_aside.asp
HEADER
Un etiqueta que ayuda mucho a los desarrolladores web, antes en HTML4 se sobre utilizaba la etiqueta “<DIV>”, con su id “cabecera”, ahora con HTML5 este problema se soluciona con este nuevo etiqueta “<HEADER></HEADER”, no confundirse con “<HEAD></HEAD>”.
Ejemplo.
Ejemplo Grafico:
Más en: http://www.w3schools.com/tags/tag_header.asp
FOOTER
Esta Etiqueta tiene la misma función que la anterior, que es disminuir el uso de la etiqueta “<DIV></DIV>”, es usada para añadir contenido como copyright, autor, etc.
Ejemplo
Ejemplo grafico:
Más en: http://www.w3schools.com/tags/tag_footer.asp
NAV
La etiqueta “<NAV></NAV> está diseñada para hacer los menús ya sean horizontales o verticales, esta puede ser usada dentro de la cabecera o fuera de ella.
Ejemplo con uso de la nueva etiqueta header:
Ejemplo gráfico:
Más en: http://www.w3schools.com/tags/tag_nav.asp
SECTION
Esta etiqueta “<SECTION></SECTION>” es usada para agrupar información, puede ser usada con la etiqueta “<ARTICLE></ARTICLE>”.
Ejemplo de uso:
Ejemplo Gráfico:
Más en : http://www.w3schools.com/tags/tag_section.asp
EJEMPLO DE CAMBIO DE ETIQUETA HTML 4.01 a HTML5
Antes sin etiquetas html5
Mejoria con las nuevas etiquetas de html5
Ejemplo de uso las etiquetas de HTML5
Esto es todo por todo en la parte de uso de las nuevas etiquetas mas adelante estare detallando mas sobre las nuevas etiquetas html5
Comparte con tus amigos!!!
Mas en : Notigeek.org
1. CAMBIOS DE HTML5
DECLARACION DE DOCTYPE
El primer cambio gigante que hizo html5 fue reducir el tamaño del doctype de HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
A una simple línea:
<!DOCTYPE HTML>
HTML5 no es un lenguaje estrictamente relacionado con XML.
NUEVOS ELEMENTOS DE ESTRUCTURA
ARTICLE
Este nueva etiqueta “<ARTICLE></ARTICLE>”, mejora la manejabilidad de artículos, este puede ser contenido de un post.
Ejemplo de Uso de un articulo de un blog.
<article>
<h1>Android vs Iphone – Review </h1>
<p>Los usuarios de <b>android</b> y <b>iphone</b> dice que uno es mejor que otro pero aquí le mostramos sus pros y sus contras…. </p>
</article>.
Ejemplo grafico
Más en: http://www.w3schools.com/tags/tag_article.asp
ASIDE
Esta etiqueta “<ASIDE></ASIDE>” contiene el contenido tangencial(importante) de la web, que puede ser usado en post destacados.
Ejemplo:
<aside>
<h3>Post Anteriores</h3>
<a href=”#”>15 – 03 – 2013 | Tutoriales HTML5 y CSS3 </a><br>
<a href=”#”>16 – 03 – 2013 | 1. HTML5 y CSS3: Estructura </a>
</aside>
Ejemplo Grafico:
Más en: http://www.w3schools.com/tags/tag_aside.asp
HEADER
Un etiqueta que ayuda mucho a los desarrolladores web, antes en HTML4 se sobre utilizaba la etiqueta “<DIV>”, con su id “cabecera”, ahora con HTML5 este problema se soluciona con este nuevo etiqueta “<HEADER></HEADER”, no confundirse con “<HEAD></HEAD>”.
Ejemplo.
<header>
<!--Titulo de la Pagina -->
<h1>NOTIGEEK.ORG | TUTORIALES HTML5 </h1>
<!—Descripción de la Web -->
<h2>El punto de encuentro para todo Geek</h2>
</header>
Ejemplo Grafico:
Más en: http://www.w3schools.com/tags/tag_header.asp
FOOTER
Esta Etiqueta tiene la misma función que la anterior, que es disminuir el uso de la etiqueta “<DIV></DIV>”, es usada para añadir contenido como copyright, autor, etc.
Ejemplo
<footer>
<h6> Derechos de Autor a Notigeek.org | 2013 </h6>
</footer>
Ejemplo grafico:
Más en: http://www.w3schools.com/tags/tag_footer.asp
NAV
La etiqueta “<NAV></NAV> está diseñada para hacer los menús ya sean horizontales o verticales, esta puede ser usada dentro de la cabecera o fuera de ella.
Ejemplo con uso de la nueva etiqueta header:
<header>
<!--Titulo de la Pagina -->
<h1>NOTIGEEK.ORG | TUTORIALES HTML5 </h1>
<!—Descripción de la Web -->
<h2>El punto de encuentro para todo Geek</h2>
<nav>
<ul>
<li>Inicio</>
<li>Tutoriales</>
<li>Android</>
<li>HTML5 Y CSS3</>
</ul>
</nav>
</header>
Ejemplo gráfico:
Más en: http://www.w3schools.com/tags/tag_nav.asp
SECTION
Esta etiqueta “<SECTION></SECTION>” es usada para agrupar información, puede ser usada con la etiqueta “<ARTICLE></ARTICLE>”.
Ejemplo de uso:
<article>
<h1>Android vs Iphone – Review </h1>
<p>Los usuarios de <b>android</b> y <b>iphone</b> dice que uno es mejor que otro pero aquí le mostramos sus pros y sus contras…. </p>
</article>
<article>
<h1>Android vs Iphone – Review </h1>
<p>Los usuarios de <b>android</b> y <b>iphone</b> dice que uno es mejor que otro pero aquí le mostramos sus pros y sus contras…. </p>
</article>
<article>
<h1>Android vs Iphone – Review </h1>
<p>Los usuarios de <b>android</b> y <b>iphone</b> dice que uno es mejor que otro pero aquí le mostramos sus pros y sus contras…. </p>
</article>
</section>
Ejemplo Gráfico:
Más en : http://www.w3schools.com/tags/tag_section.asp
EJEMPLO DE CAMBIO DE ETIQUETA HTML 4.01 a HTML5
Antes sin etiquetas html5
Mejoria con las nuevas etiquetas de html5
Ejemplo de uso las etiquetas de HTML5
<!DOCTYPE HTML>
<html>
<header>
<hgroup>
<h1>El blog de Notigeek</h1>
<h2>Este es el blog de Notigeek</h2>
</hgroup>
</header>
<nav>
Navegacion
</nav>
<section>
<article>Aquí va un post, con su titulo en h2</article>
<article>Aquí va un post, con su titulo en h2</article>
<article>Aquí va un post, con su titulo en h2</article>
</section>
<aside>
Barra lateral con cosas que nadie lee, como cuentas de twitter, facebook posts viejos, etc.
</aside>
<footer>
Pie de pagina.
</footer>
</html>
Esto es todo por todo en la parte de uso de las nuevas etiquetas mas adelante estare detallando mas sobre las nuevas etiquetas html5
Comparte con tus amigos!!!
Mas en : Notigeek.org