HTML5 (Hyper Text Markup Languaje) es la quinta revisión del lenguaje básico para páginas web.

Esta siendo supervisado por W3C, que es el consorcio internacional que publica los estándares para la World Wide Web, y sus novedades van desde una mejor estructura hasta nuevos formularios y etiquetas de vídeo y audio.

Se basa en un renovado sistema de etiquetas y funciones que darán paso a la web semántica.

Unas de las novedades más notorias es la posibilidad de incluir directamente en los navegadores audio y vídeo sin necesidad de usar Flash, Silverlight o JavaFX.

Además a los vídeos en un futuro no muy lejano, se les podrá añadir subtítulos, traducciones e información conextual.

Aún podríamos decir que nos encontramos dentro de las primeras fases de implantación de esta nueva revisión de HTML, pero hoy en día ya podemos encontrar en la red muchos navegadores web que soportan la mayoría de etiquetas y funciones de HTML5, aquí te mostramos un mini curso de como aplicar estas novedades y ejemplos para que puedas trabajar con ellas, yo me he decantado el navegador de apple “Safari” en su versión 4.0.5 que es totalmente gratuito y es el que más actualizado a HTML5 se refiere.

Empezamos con la 1ª parte de las 2 que lo componen, ¡vamos allá!

Nueva página web HTML5

Crear nuestra primera plantilla básica

Lo primero que vamos a crear es una plantilla, para que sobre esta,  más tarde, nosotros volvamos a utilizarla, y así no volver a “picar” el código “básico”.

Para esto, necesitaremos un editor de texto como Notepad de Windows, TextEdit para MacOS o GEdit para Linux.

Para windows os recomiendo Notepad++, yo lo utilizo y me va estupendamente y soporta la sintaxis de varios lenguajes de programación.

Cuando tenemos nuestro Editor de Texto, abrimos un documento nuevo y escribimos:

[sourcecode language=”html”]
<!doctype html>
<html>
<head>
<meta charset="iso-8859-1" />
<title>Título de la página</title>
</head>
<body>
</body>
</html>
[/sourcecode]

Con el elemento <!doctype html> defines el tipo de documento. Dicho elemento, le indica al navegador la versión y tipo de HTML empleado en el documento, en nuestro caso sería el HTML5.

Si no se escribe la línea anterior, el navegador interpretará el código como mejor le parezca (se visualizará mal).

Con el elemento <html> y </html>, delimitas el documento e indicas el comienzo y el final de la página HTML.

Todas las etiquetas se han de delimitar con comienzo y final como el caso de la anterior, y la única que no es la de <!doctype html>.

Si entre las etiquetas no vas a escribir nada, tambien se puede escribir así:

[sourcecode language=”html”]
<nombre_elemento />
[/sourcecode]

Es lo mismo que escribirlo así:

[sourcecode language=”html”]
<nombre_elemento>

</nombre_elemento>
[/sourcecode]

El elemento <head> y </head> tiene la función de delimitar la cabecera del documento. Esta es la sección apropiada para que incluyas información sobre el documento.

Para incluir esta información tiene a tu disposición varios elementos tales como meta y title. Con el elemento <title> y </title> indicas el título del documento, y aparecerá en la cabecera del navegador.

El elemento <meta charset=”iso-8859-1″ /> se utiliza para especificar información sobre el propio documento. Estos generalmente forman parte del head del documento. El atributo charset=”iso-8859-1″ especifica que el documento seguirá la norma ISO 8859-1, que define la codificación del alfabeto latino, incluyendo los signos diacríticos, como por ejemplo las letras acentuadas, la letra ñ y las letras especiales necesarias como la ç en catalán.

Por último el elemento <body> y </body> que delimita el cuerpo del documento. Aquí es donde van a ir todos los contenidos multimedia como audio, videos, fotos, etc.

Ahora guarda este documento de texto con el nombre y extensión de archivo plantilla.html.

Plantilla avanzada

En las versiones anteriores de HTML5, para estructurar una web se utilizaba el elemento <div> y </div>, que permitia organizar una web en diferentes apartados. Con HTML5 tenemos varios elementos que sirven para estructurar mejor una página web, estableciendo que és cada sección y reemplazando en muchas ocasiones al anterior elemento div.

Para obtener una plantilla más estructurada, escribe una plantilla de nombre plantilla-avanzada.html, con el siguiente código HTML5:

[sourcecode language=”html”]
<!doctype html>
<html>
<head>
<meta charset="iso-8859-1" />
<title>Título de la página</title>
</head>
<body>
<header>
<h1>Cabecera de la página</h1>
</header>
<nav>
<h2>Menú de navegación</h2>
</nav>
<section>
<article>
<h4>Aquí vendrán cada uno de los artículos</h4>
</article>
</section>
<aside>
<h3>Barra auxiliar</h3>
</aside>
<footer>
<h4>Pie de página</h4>
</footer>
</body>
</html>
[/sourcecode]

El elemento <header> y </header> defines la cabecera de una página web, con <nav> y </nav>, representa la zona dedicada a la navegación dentro de una web. El elemento <section> y </section> es una sección general dentro del documento. Puede contener subsecciones y representa el contenido propio de la página.

El elemento <article> y </article> representa un contenido independiente de un documento HTML5, el caso más claro son las entradas de un blog.

El elemento <aside> y </aside> representa un contenido que está muy poco relacionado con el resto de la página, como una barra lateral. Este elemento es esencial para delimitar el contenido importante con el de apoyo.

Por último el elemento <footer> y </footer> representas el pie de página, con la información acerca de la página web.

Este es el resultado visto en mi explorador:

Insertar elementos multimedia con HTML5

Con HTML4 o XHTML para insertar un elemento multimedia como un vídeo o un audio necesitábamos un plugin como Adobe Flash Player para reproducirlo, pero con HTML5 ya no necesitamos estas extensiones, ya tenemos etiquetas dedicadas a estas funciones.

Para insertar texto e  imágenes, es exáctamente igual que en HTML4 con <p> y </p> e < img> y </img> respectivamente.

Insertar un vídeo

Una de las novedades más interesantes de HTML5 es la posibilidad de añadir videos en una página web sin necesidad de utilizar herramientas de terceros. Con el elemento <video> y </video>, podemos poner un video fácilmente y cumple los estándares W3C. Este elemento debe ir acompañado de un atributo llamado src, que especificaremos el nombre y el directorio donde se encuentra dicho video. Si solo se especifica el nombre, le estas diciendo que el vídeo esta en la misma carpeta que el archivo html5 y es un atributo obligatorio.

[sourcecode language=”html”]
<!doctype html>
<html>
<head>
<meta charset="iso-8859-1" />
<title>Video de un documental</title>
</head>
<body>
<video src="pelicula.ogg" width="300" height="290" controls="controls">
Tu navegador no soporta la etiqueta de vídeo.
</video>
</body>
</html>
[/sourcecode]

Existen más atributos, como width que especificas el ancho en número de píxeles y height, pero en este caso la altura. Estos no son obligatorios, pero se recomienda su uso, controls sirve para establecer los botones de control como play o stop.

Hay otros tres atributos interesantes como el preload=”preload”, que estableces que se cargue primero el video y después la web, autoplay=”autoplay”, que determinas que el video empiece a reproducirse en el momento de acabar su carga y loop=”loop”, que crear una reproducción en un bucle infinito.

El texto “Tu navegador no soporta la etiqueta de vídeo” entre <video> y </video>, es el que se mostraría si el código estuviese mal escrito o el archivo de video no existiera donde se le ha especificado.

Insertar un fichero de audio

Al igual que un video, en HTML5 se puede agregar un fichero de audio, sin ningún tipo de restricción tecnológica,  se utiliza <audio> y </audio> y también contiene el elemento src obligatoriamente. Pero los atributos secundarios solo podemos utilizar autoplay, preload y controls.

Para insertar un fichero de audio escribe de esta forma el código HTML5:

[sourcecode language=”html”]
<!doctype html>
<html>
<head>
<meta charset="iso-8859-1" />
<title>Sonido de un caballo</title>
</head>
<body>
<audio src="caballo.ogg" autoplay="autoplay" preload="preload" controls="controls">
Tu navegador no soporta la etiqueta de Audio.
</audio>
</body>
</html>
[/sourcecode]

El texto “Tu navegador no soporta la etiqueta de audio” entre <audio> y </audio>, es el que se mostraría si el código estuviese mal escrito o el archivo de audio no existiera donde se le ha especificado.

Así se ve en mi explorador:

El próximo lunes día 6 la 2ª y última parte de este mini curso: Insertar Objetos complejos, Gráficos vectoriales y creación de formularios.

¡No falteís a la cita y dejad vuestros comentarios!

[ad#anuncio_post]