||<tablestyle="float:center; text-align:left; font-weight: normal; font-size: 0.9em; border: 1px dotted #000; width:95%; margin-left: 1%; margin-right: 1%; -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; background-repeat: repeat; background-position: center center; background: white; background: -moz-radial-gradient(white 2%, transparent 4%),-moz-radial-gradient(white 2%, transparent 3%),white; background:-webkit-radial-gradient(white 2%, transparent 4%),-webkit-radial-gradient(white 2%, transparent 4%),white;background-position: 0 0, 150px 150px;-webkit-background-size: 23px 23px;-moz-background-size: 23px 23px;background-size: 23px 23px;" style="border: none;font: bold 50px ubuntu; text-shadow:none;" -2> {*} '''HTML5'''<<BR>><<BR>> Tutoriales para realizar Documentos de Lenguaje de Markup de Hypertexto.<<BR>><<BR>>No incluiremos Javascript debido que no programaremos Aplicaciones, esta orientado a Documentos. ||<|2> {{attachment:html5.svg}}||
<<BR>><<BR>>
Con este tutorial podras crear Documentacion moderna y elegante que podra visualizarse desde cualquier cosa con un navegador web (practicamente todo hoy dia), es una sintaxis simple, que trata de por si de hacer el mejor esfuerzo para renderizar correctamente, aun con errores en la misma, este tipo de documentacion no necesita ningun software Propietario o Freeware para usarse, tambien es el mas amigable con los Lectores de Pantalla (Screen Reader) ideal para gente con capacidades diferentes, puede editarse en un Ubuntu Desktop o Server de igual manera.<<BR>><<BR>>
Es un formato con mucho futuro..., por ejemplo, imaginate la buena primera impresion de ver un Curriculum Vitae en HTML5 en lugar de uno en Microsoft Word 2010 .DocX<<BR>>
Es mas simple y amigable que Latex, pero aun asi logra resultados igual o aun mas elegantes.<<BR>>Recuerda siempre guardar tus Documentos con Extension .html ( por ejemplo: documento.html )
<<BR>><<BR>>
= Etiquetas HTML5 =

{{{#!highlight html
<!-- -->                    Comentario de 1 o mas lineas (es ignorado, no se ve)
<a> </a>                    HyperVinculo (Link)
<article> </article>        Articulo de Texto (cuerpo central)
<aside> </aside>            Texto Lateral (texto tipo sidebar)
<audio>                     Audio incrustado (formato libre .OGG / .OGV / .WEBM)
<b> </b>                    Texto Negrita 
<br>                        Nueva Linea
<button> </button>          Boton interactivo
<code> </code>              Fragmento de Codigo de lenguaje de Programacion
<div> </div>                Contenedor Generico (Marco generico, no se ve)
<footer> </footer>          Pie de Pagina (Texto al Pie)
<h1> </h1>                  Titulo (Nivel 1, el mas Grande)
<h2> </h2>                  Titulo (Nivel 2)
<h3> </h3>                  Titulo (Nivel 3)
<h4> </h4>                  Titulo (Nivel 4)
<h5> </h5>                  Titulo (Nivel 5)
<h6> </h6>                  Titulo (Nivel 6, el mas Chico)
<iframe> </iframe>          Marco (o Frame) conteniendo otro documento
<i> </i>                    Texto Italico
<hr>                        Linea Horizontal
<header> </header>          Cabezera del Documento
<img>                       Imagen (cualquier formato standard)
<ul> </ul>                  Lista sin Orden
<ol> </ol>                  Lista con Orden
<li> </li>                  Item (Bullets) de Lista, va dentro de <ol> o <ul>
<p> </p>                    Parrafo de Texto (continuo)
<s> </s>                    Texto Tachado
<script> </script>          Codigo JavaScript (fuera del alcanze de este tutorial)
<style> </style>            Markup de CSS3 (fuera del alcanze de este tutorial)
<u> </u>                    Texto Subrayado
<video> <video>             Video incrustado, con Sonido (formato libre .OGV / .WEBM)
<table> </table>            Tabla, dividida con Celdas y Columnas, para presentar texto
<th> </th>                  Titulo de la Tabla, va dentro de <table>
<tr> </tr>                  Fila Horizontal de la Tabla, va dentro de <table>
<td> </td>                  Celda de la Tabla, va dentro de <table>
}}}

* La lista no esta completa, hay mas, pero de uso mucho menos importante en documentos (aunque si en Aplicaciones mas complejas).

= Atencion: Lista de Etiquetas HTML4 (viejo) =

Alguna vez te toparas con algunas etiquetas de HTML viejas (cada vez menos probable), que estan deprecadas, es decir en desuso,
no se sabe si funcionaran bien y por cuanto tiempo mas, se recomienda no usarlas, y reemplazarlas por sus equivalentes Nuevos,
que ademas son considerablemente mas faciles de leer, entender y aprender.

 {*} No se sabe si funcionan.

 {*} No se deben usar.

{{{#!highlight html
<acronym> </acronym>         Acronimo de texto
<applet> </applet>           Aplicacion Incrustada, tipo Plugin no standard (Binario)
<basefont> </basefont>       Fuente de Tipo de Texto de Base para el Documento (.ttf)
<dir> </dir>                 Lista de Directorios (tipo de Lista antigua)
<font>                       Tipo, Tamanio, Color de la Fuente de Texto del documento
<frame> </frame>             Marco conteniendo otro documento (tiene problemas de accesibilidad)
<frameset> </frameset>       Marco conteniendo otro documento (tiene problemas de accesibilidad)
<isindex>                    Ingreso de Texto de 1 sola linea (tiene problemas de accesibilidad)
<noframes> </noframes>       Prohibe los Frames tipo <frame> y <frameset>
<strike> </strike>           Texto Subrayado (antiguo)
<tt> </tt>                   Fuentes del tipo Teletipo
<xmp>                        Texto Preformateado
<blink> </blink>             Texto Destellante (Horror que llego a implementarse hace decadas)
<no-br>                      No Nueva Linea (Horror que llego a implementarse hace decadas)
}}}

= HTML en Practica! =

Ahora sabemos las etiquetas necesarias para crear un documento (y las que no son necesarias),
vamos a crear algunas demostraciones entretenidas...

 {*} Si no practicas, Hay Tabla!

{{{#!highlight html
<table border="1"> <!-- border="1" con Bordes, border="0" sin Bordes -->
  <tr>   <th>Animal </th>   <th>Genero</th>   </tr>

  <tr>   <td>Gato   </td>   <td>Felino</td>   </tr>
  <tr>   <td>Hamster</td>   <td>Roedor</td>   </tr>
  <tr>   <td>Loro   </td>   <td>Ave   </td>   </tr>
</table>
}}}

||<style="width:95%;height:25px;-moz-border-radius:15px;-webkit-border-radius:15px;border: 1px dotted #000;;font-size:50px;text-transform:uppercase;color:#fff;font:bold 50px Ubuntu;text-transform:uppercase;color:#fff;font-size:50px;text-transform:uppercase;"> [[http://jsfiddle.net/juancarlospaco/y42yL/|VER RESULTADO]] ||

 {*} Ahora todos juntos...

{{{#!highlight html
<!-- soy un comentario y soy invisible --> 
<a href="http://www.google.com">Soy un Link a Google</a>
<br><br>
<b>Esto es texto en Negritas</b>
<button>Aqui esta un boton</button>
<i>Este texto es Italico</i>
<hr>
<h1>Titulo (Nivel 1)</h1>                  
<h2>Titulo (Nivel 2)</h2>                  
<h3>Titulo (Nivel 3)</h3>                  
<h4>Titulo (Nivel 4)</h4>                  
<h5>Titulo (Nivel 5)</h5>                  
<h6>Titulo (Nivel 6)</h6>
<ul>
 <li>Lista sin Orden</li>
 <li>Lista sin Orden</li>
</ul>          
Este texto no tiene ninguna etiqueta...        
<ol>
  <li>Lista con Orden</li>
  <li>Lista con Orden</li>
</ol>      
<code>echo "codigo Bash"</code>             
<p>Parrafo de Texto (continuo)</p>                    
<s>Aqui tenemos Texto Tachado</s> y <u>Aqui tenemos Texto Subrayado</u>
}}}

||<style="width:95%;height:25px;-moz-border-radius:15px;-webkit-border-radius:15px;border: 1px dotted #000;;font-size:50px;text-transform:uppercase;color:#fff;font:bold 50px Ubuntu;text-transform:uppercase;color:#fff;font-size:50px;text-transform:uppercase;"> [[http://jsfiddle.net/juancarlospaco/fmZBQ/|VER RESULTADO]] ||

 {*} Vamos con Multimediaaaaa

{{{#!highlight html
<video width="480" height="240" controls loop autobuffer 
 poster='http://www.w3.org/html/logo/downloads/HTML5_Logo.svg'
 src="http://ubuntuone.com/p/40d/"> </video>


<!--
----------------- TODOS ESTOS PARAMETROS SON OPCIONALES: -----------------

width="480" quiere decir el ANCHO del video (width en Ingles es Ancho)

height="240" quiere decir el ALTO del video (height en Ingles es Alto) 

controls quiere decir mostrar los botones de Play, Pausa, etc

loop quiere decir volver a comenzar el video cuando termine, indefinidamente

poster es un link a una imagen comun para mostrar como miniatura (Preview) del video

autobuffer significa Pre-cargar el Video automaticamente (sino la carga comienza al darle play)
-->
}}}

||<style="width:95%;height:25px;-moz-border-radius:15px;-webkit-border-radius:15px;border: 1px dotted #000;;font-size:50px;text-transform:uppercase;color:#fff;font:bold 50px Ubuntu;text-transform:uppercase;color:#fff;font-size:50px;text-transform:uppercase;"> [[http://jsfiddle.net/juancarlospaco/FhLKS/|VER RESULTADO]] ||

= Que se puede llegar a hacer con HTML? =

 {*} Ejemplos Libres (GPL) al Azar (sin Javascript, sin Imagenes, sin Flash) para motivar la creatividad y curiosidad ;)

||<style="width:95%;height:25px;-moz-border-radius:15px;-webkit-border-radius:15px;border: 1px dotted #000;;font-size:50px;text-transform:uppercase;color:#fff;font:bold 50px Ubuntu;text-transform:uppercase;color:#fff;font-size:50px;text-transform:uppercase;"> [[http://jsfiddle.net/juancarlospaco/CAh6M/|Curriculum Vitae Elegante en HTML5]]<<BR>><<BR>>[[http://jsfiddle.net/juancarlospaco/yNpe6/|Hello Kitty en HTML5]]<<BR>><<BR>>[[http://jsfiddle.net/juancarlospaco/8BphM/|Emoticones en HTML5]] ||

Ya sabes donde comenzar, ...y hasta donde puedes llegar, el resto depende de vos.

-----

= Espero te halla gustado este Tutorial de Introduccion a HTML5 =

||<tablestyle="text-align:left; font-weight: normal; font-size: 0.75em; border: 1px dotted #000; width:95%; margin-left: 1%; margin-right: 1%; -ms-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; background-color:#F2F2F2;" style="border: 1px solid #772953;-webkit-box-shadow: inset rgba(0,0,0,.2) 0 -2px 3px, inset rgba(255,255,255,.25) 0 -3px 3px;-moz-box-shadow: inset rgba(0,0,0,.2) 0 -2px 3px, inset rgba(255,255,255,.25) 0 -3px 3px;-o-box-shadow: inset rgba(0,0,0,.2) 0 -2px 3px, inset rgba(255,255,255,.25) 0 -3px 3px;" -2> ''' {*} Si te gusto, puedes obtener mas informacion avanzada en:<<BR>>http://www.html5rocks.com/es/ <<BR>>http://developer.mozilla.org/es/ <<BR>>http://dev.w3.org/html5/spec/Overview.html <<BR>>http://es.wikipedia.org/wiki/HTML5''' <<BR>> :) <<BR>> ||