Tutorial de HTML5

Tutorial de HTML5

Tal vez si no eres un programador web te estará preguntando qué es eso de tutorial de HTML5 con que se come eso, bueno como crear mi web te la pone facil donde te podemos garantizar Aprender HTML5 en muy poquito tiempo,este tutorial de HTML5 trata sus sintaxis basicas para crear cualquier documento o pagina web, pero bueno para no enredarnos la mente y no inventar nada que te parezca extraño, te sito el siguiente texto de wikipedia sobre que es el HTML5.

Tambien pudes hecharle un vistazo a nuestro Curso de HTML5 y CSS3 donde explicamos todos los detalles tanto de HTML5 como de CSS3 y donde creamos una plantilla facil y rapido para cualquier dispositivo.

Bueno con esto claro ahora a los que vinimos a nuestro tutorial de HTML5. Vamos a aprender un poco de HTML5 porque eso es lo que nos interesa y no todas esas palabrerías que al fin y al cabo no sirven para nada solo para teorizar sobre el mismo y enredarnos la mente.

Preparando el entorno para nuestro tutorial de html5

Lo primero que tenemos que saber es como escribir código HTML5 bueno pues si no sabes te explico. Primeramente para empezar a escribir código HTML5 necesitamos un editor de texto plano no puede ser un editor complejo hasta el famoso bloc de notas de Windows nos funcionaria a la perfección.

En caso de que ya tengas todo listo empezamos haber lo básico de HTML5 que dicho sea de paso ha mejorado en un alto porcentaje diría yo que ahora es que es HTML y no antes, pero bueno esa es mi opinión no sé lo que pensaran ustedes.
Bla bla bla y no empezamos, no te desesperes aquí vamos con el curso.

Primero tenemos que saber que para empezar a trabajar con HTML5 lo primero que tenemos que saber es estructurar nuestra página con dicho lenguaje, y te preguntaras y como hago esto, pues simple bobo.

Solo hay que escribir el <!DOCTYPE HTML> con esto les indicamos al HTMLque lo que viene es HTML5 y no 4 como estaban acostumbrado. Luego de esto le sigue la etiqueta <HTML lang=”es”>respectivamente con su sierre </HTML>.

Con esto simplemente ya tendríamos armada nuestra estructura HTML5 ahora solo queda seguir introduciendo etiquetas HTML5. ¿Pero faltan muchas cosas en el encabezado? Pues claro hasta yo lo note.

Codificando en nuestro Tutorial de html5

Entonces nuestra estructura en HTML5 Sieria la siguiente.

<!DOCTYPE html>
<html lang="es">
</html>

Bueno ahora incluimos lo que nos falta en el encabezado que es <head> el utf-8 y el title y por supuesto el body las otras metas son opciones de ustedes. Entonces nuestro código sería el siguiente.

 

<!DOCTYPE html/>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="description" content="Tutorial de HTML5" />
<title>Aprendr HTML5 con este tutorial</title>
</head>
<body>
</body>
</html>

Con esto ya tenemos la estructura de nuestra página en HTML5 terminada.

Tutorial HTML5
Como vimos HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos. Por ese motivo en este tutorial de html5 vamos a ver algunos de ellos ya que son técnicamente similares a las etiquetas <div>y <span>, pero tienen un significado semántico, como por ejemplo <nav>(bloque de navegación del sitio web) y <footer>. Otros elementos proporcionan nuevas funcionalidades a través de una interfaz estandarizada, como los elementos <audio>y <video>.
Mejoras en el elemento <canvas>, capaz de renderizar en los navegadores más importantes (Mozilla, Chrome, Opera, Safari e IE) elementos 3D.

Algunos elementos de HTML 4.01 han quedado obsoletos, incluyendo elementos puramente de presentación, como <font>y <center>, cuyos efectos son manejados por el CSS. También hay un renovado énfasis en la importancia del scripting DOM para el comportamiento de la web.
Lo más increíble de HTML5 es que puede insertar videos y audio sin la necesidad de esos molestosos plugins

Esto lo vemos en un ejemplo con audio

Ejemplo:

Insertar audio sin los molestosos plugins

<!DOCTYPE HTML>
<html lan="es" >
<head>
<meta charset=”utf-8”/>
<title>Insertar Audio con HTML5 </title>
</head>
<body>
<audio id="audioTestElem" autobuffer controls >
<source src="test.m4a">
<source src="test.ogg" type="audio/ogg; codecs=vorbis">
<source src="url">
</audio>
</body>
</html>

También podemos implementar los elementos canvas, que es uno de los elementos que más está revolucionando al HTML5 para esto vemos el siguiente ejemplo:

Canvas 2D utilizando el API de dibujos.

<!DOCTYPE HTML>
<html lang=”es”>
<head>
<meta charset=”utf-8” />
<title>Ejemplo de canvas en HTML 5</title>
<script>
function drawPicture(){
var canvas = document.getElementById('example');
var context = canvas.getContext('2d');
context.fillStyle = "rgb(0,255,0)";
context.fillRect (25, 25, 100, 100);
context.fillStyle = "rgba(255,0,0, 0.6)";
context.beginPath();
context.arc(1
25,100,50,0,Math.PI*2,true);
context.fill();
context.fillStyle = "rgba(0,0,255,0.6)";
context.beginPath();
context.moveTo(125,100);
context.lineTo(175,50);
context.lineTo(225,150);
context.fill();
}
</script>
<style type="text/css">
canvas { border: 2px solid black; }
</style>
</head>
<body onload="drawPicture();">
<canvas id="example" width="260" height="200">
</canvas>
</body>
</html>

bla bla bla y todas esas cosas y mucho mas se hacen con canvas

Como hemos visto hicimos un elemento 2D con el uso de la canvas algo innovador en este lenguaje. Aunque para ello tenemos que recurrir al lenguaje JavaScript pero vale la pena hacerlo…

También ha renovado el uso de los formularios para mejorar la experiencia de los programadores web. Aunque esta parte no es soportada por todos los navegadores pero vale la pena mencionarla por lo menos para los que utilizamos navegadores de verdad como Chrome, Firefox y no enjendros como IE.

Veamos un ejemplo en los formularios.

Formularios con HTML5

<form>
<input placeholder=”Escribe tu email” type=”email” >
<input placeholder=”Contrasena” type=”password” >
<input placeholder=”Subir Archivo” type="file" multiple name="att">
<input type="number" min="1" max="10" >
<input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="url" list="url_list">
</form>

Si nos fijamos en HTML5 nos referimos directamente para que va hacer utilizado un formulario o input ya sea para email, password, o de búsqueda , también vemos que añade otro atributo muy elegante para los formularios que es el “placeholder” este atributo aunque no es soportado por todos los navegadores está siendo muy utilizado en la web, los podemos ver en formularios de búsqueda como Google, yohoo, entre otros.

Otras etiquetas que añade el HTML5 son la de sesiones, artículos, botoneras, cabeceras y pie de página.

Para la cabecera de nuestra pagina lo hacemos dentro de una etiqueta que se llama <header> cabecera </header> .

La botonera sea hace dentro de una etiqueta nav por ejemplo.

<nav> botonera </nav>

Las sesiones las creamos dentro de una etiqueta.

<section> esto es una sesión</section>

Pero ademas dentro de este section podemos incluir mas <section> y dentro de este section podemos incluir <article> también <aside>para el contenido de la derecha.

La etiqueta <footer> Pie de pagina </footer>.

En fin el HTML5 llega para hacer le la vida más fácil a los programadores de paginas web, y sin tener mucho conocimiento del mismo, nos puede ofrecer un diseño bonito y con estilo profesional de una forma rápida y limpia porque si algo hay que resaltar es que el HTML4 era un código que tenía demasiado código basura el cual ralentizaba la carga de nuestras web.

Con la llegada de este lenguaje podemos decir que ha llegado la revolución de la web y el que no esté actualizado simplemente se queda rezagado mirando como los demás crear diseños impresionantes mientras ellos siguen con su vieja tecnología.
Pero bueno el que quiera seguir en la era de los indios que siga, mientras los demás avanzan hacia el futuro.

Bueno espero y les haya gustado este pequeño retoque en este Tutorial de HTML5 nos leemos en la próxima entrada.

Si el tutorial te parecio interesante dale a +1 o dejanos tu comentarios…