Diseño Web Fácil: html5

viernes, 11 de abril de 2014

Nuevas etiquetas en HTML5

En esta segunda parte vamos a hablar de las nuevas etiquetas, para que sirven y algunos ejemplos de uso. Ya que una imagen vale más que mil palabras veamos la diferencia entre el viejo HTML y el nuevo HTML5:

Como vemos la diferencia principal es que en HTML5 ya no usamos clases o ids para identificar las diferentes partes de nuestra estructura HTML.

Ahora que ya vimos la diferencia veamos para que sirve cada etiqueta:

<header>
Mayormente se utiliza para definir el encabezado de una página. Una buena práctica es incluir dentro de él el logo y el slogan del sitio.

<header>
<img src="logo.jpg" alt="" />
<h1>Nombre del sitio</h1>
<p>Slogan</p>
</header>

<nav>
Es el sector que designamos al menú de navegación de nuestro sitio web.

<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="seccion.htm">Sección</a></li>
<li><a href="contacto.htm">Contacto</a></li>
</ul>

<form id="buscar">
<input name="query" type="text" /> <input type="submit" value="Buscar!" />
</form>
</nav>

<section>
Sencillamente es la parte donde debe ir el contenido de nuestra página.

<section>
<article>...</article>
<article>...</article>
<article>...</article>
</section>

<article>
Ésta etiqueta es un bloque de información o sub etiquetas. Para entenderlo mejor podemos referirnos a que un article es un artículo de un blog donde podemos encontrar un título, texto, imágenes, links, etc.

<article>
<h2>Titulo de una noticia</h2>
<p>Texto de la noticia</p>
<img src="imagen.jpg" alt="" />
</article>

<article>
<h2>Titulo de otra noticia</h2>
<p>Texto de la segunda noticia</p>
<img src="imagen2.jpg" alt="" />
</article>

<aside>
Es un fragmento de nuestra página que no tiene demasiada relevancia con el contenido en sí; por ejemplo nuestros anuncios de adsense, un banner, etc.

<aside>
<script>codigo adsense</script>
</aside>

<footer>
Es el denominado pie de página de una página y generalmente se utiliza en la parte final de nuestra página.

<footer>
- @copy; Sitio.com -
<a href="contacto.htm">Contacto</a>
</footer>

Si quieres conocer las etiquetas HTML5 que faltan a continuación un listado:
<audio>
<canvas>
<figure>
<video>

Hay otras etiquetas pero no las incluí porque creo que no son útiles o, en su mayoría, no son compatibles con todos los navegadores.

Hasta aquí llego el segundo artículo, en el próximo hablaremos de CSS3 y sus capacidades.

Como siempre, no olviden comentar, si tienen preguntas sobre algo comentado en este artículo, sugerencias, etc.

Saludos!

Aprendiendo HTML5 desde Cero

En este primer artículo voy a hablarles de cómo crear una página web desde cero, qué herramientas utilizar, tips y consejos a la hora de iniciarse. En primer lugar aclarar que HTML no es un lenguaje de programación sino un lenguaje de marcado, una forma de codificar un documento. HTML es texto + etiquetas que dan formato a la estructura del texto y a su presentación.

Aclarado esto voy a darte un consejo: si eres principiante aprende directamente HTML5 (la actualización de HTML, el primer lenguaje en el que se creó la Web) y si ya tienes conocimientos básicos o avanzados olvídate de todo eso y comienza desde cero con HTML5. Esto te permitirá no confundir viejos conceptos obsoletos y comenzar con un lenguaje que actualmente, junto con CSS y JS, te permitirá crear aplicaciones web avanzadas.

Si quieres aprender más sobre conceptos de HTML, HTML4, XHTML o incluso HTML5 puedes googlearlo.

Manos a la obra

Nota: Para crear una página web solo necesitamos un editor de texto como el block de notas de Windows. Sin embargo te recomiendo utilizar Sublime Text 2 que es un editor de texto con algunas características para programadores que te facilitarán la vida.

Para empezar a crear una página web con HTML5 solo debemos definir este DOCTYPE antes de la etiqueta <HTML>:

<!DOCTYPE html>

Esto indica que al navegador que va a recibir y como procesarlo. No definirlo es un pecado mortal ya que cada navegador interprerá por defecto y a su forma el código que escribamos.

Una vez definido el DOCTYPE procedemos de esta forma:

<!DOCTYPE html>
<html lang="es">
 <head>
 <meta charset="utf-8" />
 <title>Aprendiendo HTML5 desde Cero</title>
 </head>
 <body>
 <header>Diseño Web Fácil</header>
 <section>
 <article></article>
 <aside></aside>
 <article></article>
 </section>
 </body>
</html>

lang: es necesario en HTML5 definir el idioma en cual se basa el sitio.
charset: indica al navegador como está codificado el documento.

Ésta es la estructura básica de cualquier documento HTML5 básico y a partir de esta base podemos empezar a crear nuestra página web. En el siguiente artículo veremos un poco más sobre las nuevas etiquetas HTML5, para que sirven, en que caso usarlas y algunos ejemplos prácticos para continuar con nuestra primer página web en HTML5 desde Cero.

No olviden dejar sus preguntas, aportes y comentarios.