Aprender HTML5 en 5 minutos.

Si como lo oyes aquí en cómo crear mi web te vamos a enseñar lo necesario para aprender html5 en 5 minutos , suena algo increíble pero veras que es fácil aprender html5 en minutos y si sigues todo paso a paso podrás inmediatamente después que termine de leer este post crear tu propia estructura web con HTML5.

Si buscas un curso mas completo puedes hacceder al Curso de HTML5 y CSS3 donde explicamos todo muy detalladamente y creamos una plantilla web paso a paso.

En este post nos vamos a centrar en lo principal para cualquier sitio web por ello lo que vamos a explicar es la estructura básica de cualquier página web en HTML5, también iremos viendo lo nuevo de CSS3 y aprendiendo a utilizar la programación web Responsive Web Desing o Diseño web auto ajustable todo para aprenderlo en muy pocos minutos.
Para conseguir nuestro objetivo que es aprender html5 en 5 minutos lo que vamos a necesitar es un editor de texto ya sea Notepad++,Sublime Tex, Dreamwaver o cualquier otro editor de texto que prefieras.

Entonces empezando con nuestro tutorial lo primero que vamos es a crear una carpeta ponle el nombre que quieras yo en lo particular le voy a poner curso-HTML, entonces si ya tienes todo creado empecemos con nuestro curso.

Lo primero que vamos hacer es irnos a nuestro editor de texto y crear un nuevo documento el cual les llamaremos index.html también vamos a crear una hoja de estilo la cual les vamos a llamar estilo.css. Con eso estaría nuestro entorno de aprendizaje de HTML5 listo para empezar entonces empecemos a codear.
Lo que tenemos que saber para empezar a trabajar con HTML5 es que para empezar a crear cualquier documento HTML5 hay que empezar declarándolo en la parte superior con lo siguiente.

 

<!DOCTYPE html >


Tan sencillo como esto, ya le hemos indicado al navegador que estamos trabajando con HTML5, ahora bien para seguir con HTML5 tenemos también que establecer el lengua con la siguiente etiqueta.

 

<html lang="es">


Esto es para indicarle que estamos trabajando con el idioma español y que nos reconosca los caracteres raros, también dentro de las etiquetas head vamos a colocar una etiqueta meta para que nos resconosca los puntos o tildes, la cual es.

<meta charset="utf-8" />

También dentro de nuestro head vamos a colocar el titulo de nuestra página web con la etiqueta.

<title>Aprender HTML5 en 5 minutos</title>

Y también vamos a agregar una hoja de estilo la cual contendrá todo el código CSS3 para modelar nuestra página web creada con HTML5. Entonces el código completo de nuestra cabecera web sería el siguiente.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Aprender HTML5 en 5 minutos</title>
<link rel="stylesheet" href="estilo.css"/>
</head>

Ahora ya tenemos la cabecera de nuestra página web realizada entonces nos toca seguir con el cuerpo de nuestro documento para ello vamos a crear nuestra etiqueta body y a serrarla también después de serrar la etiqueta body se cierra la etiqueta HTML.

Cuerpo de nuestra web

Entonces ya con esto tenemos nuestra estructura HTML5 para nuestra página web completa solo nos queda seguir entrando etiquetas HTML5, En esta parte vamos a empezar a crear la cabecera que muy diferente como se hacía en tiempos anteriores ahora la cabecera trae sus propias etiquetas como header y nav.
La etiqueta header se utiliza para la parte superior de nuestro sitio web es la primer etiqueta que vamos a color cuando estemos creando nuestro documento HTML5 , una vez con ella creada podemos colocar todos los datos que queramos que aparezcan en la cabecera de nuestra página web.

<header>

Hola esto es un <header>

</header>

Otra etiqueta nueva que incorpora HTML5 es una botonera la cual ya no es tan difícil como antes solo tenemos que colocar la etiqueta nav y seguidamente empezar a crear nuestros botones web.

<nav>
<h2>
Esto es una etiqueta <nav> </h2>
</nav>

Una vez con la cabecera de nuestra página web creada entonces procedemos a crear la etiqueta que va a contener todo nuestros datos antes lo podíamos crear con un div pero ahora HTML5 nos la pone fácil y a creado la etiqueta section. ¿Qué hace esta etiqueta? Bueno esta etiqueta va a contener todo el contenido de nuestro sitio y dentro de esta también se pueden crear más etiquetas section y todas las demás etiquetas que incorpora este nuevo estándar web.

<section>
Contenido de nuestro sitio web
</section>

Como te mencionabas antes dentro de esta 2 etiquetas podemos colocar todo nuestro contenido sin tener que estar recurriendo otras tácticas. Dentro de la etiqueta <section> podemos colocar mas etiquetas HTML5 como son <article> </article>, como su nombre lo indica esta etiquetas son para artículos.

<article>
Esto es una etiqueta article
</article>

También etiquetas <aside></aside> las cuales nos sirven para nuestro contenido en la parte laterar de nuestro sitios web ya sea para botones de redes sociales , colocar categorías entre muchas otras utilidades que les podemos dar.

<aside>
Esto es una etiqueta aside
</aside>

También podemos insertar mas etiquetas <section> </section> dentro de un mismo section.

<section>

<section>
<section>

<section>

Otra de las nuevas etiquetas que incorpora HTML5 es el pie de página con la etiqueta.

<footer>
Este es nuestro pie de página
</footer>

Multimedia con HTML5

Otra de las funcionalidades nuevas que trae HTML5 es que ahora incorpora etiquetas para insertar contenido multimedia en nuestras páginas web sin necesidad de tener que recurrir a ningún plugins o elemento flash para poder reproducirlo. Estas nuevas etiquetas son la de audio y video

<audio>
Esto es una etiqueta multimedia para música o cualquier otro tipo de autio
</audio>

Si lo has notado antes para insertar algún tipo de autio en un sitio web teníamos que crear el siguiente código para poder insertarlo

<embed height="50" src="horse.mp3" width="100"></embed>
o
<object data="horse.mp3" height="50" width="100"></object>

Sin embargo ahora con este Nuevo estándar web todo es más profesional y más limpio simplemente logramos insertar un mp3 con esta simple línea de código

<audio src="archivo.mp3"> </audio>

Otra caracteristica de esta etiqueta es que podemos agregarle los controles sin tener que estar creando un reproductor nosotros mismo o buscando un script en la internet.

Para agregar los controles solo hay que agregarle a esa misma etiqueta el atributo controls.

<audio controls="controls" src="archivo.mp3" tabindex="0"></audio>

Lo bueno de utilizar estas etiquetas es que podemos también anadir mas tipos de audio ¿Pero y como puedo hacer eso? Fácil para eso solo tienes que recurir a la etiqueta source indicarle la ruta del archivo y el tipo de archivo que es.

 

<audio controls="controls" tabindex="0">

<source src="archivo.ogg" type="audio/ogg">
</source>
<source src="archivo.mp3" type="audio/mpeg">
</source>

</audio>

Si quieres saber más de esta etiqueta te recomiendo que investigues en internet para que puedas aprenderte todas sus funcionalidades.

Asi mismo se incorpora la etiqueta viedo

<video tabindex="0">
Esto es una etiqueta multimedia para música o cualquier otro tipo de autio
</video>

En concreto lo que ariamos es casi lo mismo

<video controls="controls" tabindex="0" width="800">
<source src="video.ogg" type="video/ogg">
</source>>
<source src="video.mp4" type="video/mp4">
</source>
<embed height="600" src="http://urldelvideo/flash.swf" type="application/x-hockwave-flash" width="800">
</embed></video>

Canvas con HTML

Quizás uno de los elementos más importantes de HTML5 es el elemento canvas , pero para aprender a manejar este elemento de una forma clara y fluida tenemos que saber manejar javaScript ya que atreves de este lenguaje es que podemos manipular dichas canvas.

Para explicarlo mejor hacemos un simple ejemplo para simular una esfera.
Lo primero que creamos es nuestro elemento canvas

<canvas height="100" id="myCanvas" style="border: 1px solid #000000;" width="200"> </canvas>


Si te fijas en el codigo a la etiqueta canvas la identificamos con un id llamado myCanvas y le establecemos alto y ancho.

Entonces para poder modelar nuestra camvas lo que hacemos es crear un archivo.js y llamar a dicho identificador que en este caso es myCanvas

var c=document.getElementById("myCanvas");


si sabes un poco de DHTML entonces tendras claro para que sirve getElementById ya con nuestra canvas identificada entonces le establecemos los parámetros para simular dicha esfera.

ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Y con esto estaría nuestro elemento canvas con una forma circular por supuesto si quieres aplicar tus conocimientos sobre este temas también te remito que busques en google ya que es un tema bastante amplio y medio complejo.

Bueno con esto ya tenemos una idea clara sobre HTML5 ya sabemos crear la estructura de una página web con HTML.

Si quieres seguir aprendiendo seguiremos publicando mas post sobre este tema y dándole estilo con CSS3 que en esta parte no vimos ese tema..

Tambien tenemos un curso completo de HTML5 y CSS3.
Curso de HTML5 y CSS3

Gracias por leer el tutorial y hasta la próxima entrada…

Etiquetas:

Curso HTML5,Aprender HTML5 desde cero, HTML5 Gratis, Crear web con HTML5, HTML5

como crear mi web