|
|
|
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.
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
Es mas simple y amigable que Latex, pero aun asi logra resultados igual o aun mas elegantes.
Recuerda siempre guardar tus Documentos con Extension .html ( por ejemplo: documento.html )
Etiquetas HTML5
1 <!-- --> Comentario de 1 o mas lineas (es ignorado, no se ve)
2 <a> </a> HyperVinculo (Link)
3 <article> </article> Articulo de Texto (cuerpo central)
4 <aside> </aside> Texto Lateral (texto tipo sidebar)
5 <audio> Audio incrustado (formato libre .OGG / .OGV / .WEBM)
6 <b> </b> Texto Negrita
7 <br> Nueva Linea
8 <button> </button> Boton interactivo
9 <code> </code> Fragmento de Codigo de lenguaje de Programacion
10 <div> </div> Contenedor Generico (Marco generico, no se ve)
11 <footer> </footer> Pie de Pagina (Texto al Pie)
12 <h1> </h1> Titulo (Nivel 1, el mas Grande)
13 <h2> </h2> Titulo (Nivel 2)
14 <h3> </h3> Titulo (Nivel 3)
15 <h4> </h4> Titulo (Nivel 4)
16 <h5> </h5> Titulo (Nivel 5)
17 <h6> </h6> Titulo (Nivel 6, el mas Chico)
18 <iframe> </iframe> Marco (o Frame) conteniendo otro documento
19 <i> </i> Texto Italico
20 <hr> Linea Horizontal
21 <header> </header> Cabezera del Documento
22 <img> Imagen (cualquier formato standard)
23 <ul> </ul> Lista sin Orden
24 <ol> </ol> Lista con Orden
25 <li> </li> Item (Bullets) de Lista, va dentro de <ol> o <ul>
26 <p> </p> Parrafo de Texto (continuo)
27 <s> </s> Texto Tachado
28 <script> </script> Codigo JavaScript (fuera del alcanze de este tutorial)
29 <style> </style> Markup de CSS3 (fuera del alcanze de este tutorial)
30 <u> </u> Texto Subrayado
31 <video> <video> Video incrustado, con Sonido (formato libre .OGV / .WEBM)
32 <table> </table> Tabla, dividida con Celdas y Columnas, para presentar texto
33 <th> </th> Titulo de la Tabla, va dentro de <table>
34 <tr> </tr> Fila Horizontal de la Tabla, va dentro de <table>
35 <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.
1 <acronym> </acronym> Acronimo de texto
2 <applet> </applet> Aplicacion Incrustada, tipo Plugin no standard (Binario)
3 <basefont> </basefont> Fuente de Tipo de Texto de Base para el Documento (.ttf)
4 <dir> </dir> Lista de Directorios (tipo de Lista antigua)
5 <font> Tipo, Tamanio, Color de la Fuente de Texto del documento
6 <frame> </frame> Marco conteniendo otro documento (tiene problemas de accesibilidad)
7 <frameset> </frameset> Marco conteniendo otro documento (tiene problemas de accesibilidad)
8 <isindex> Ingreso de Texto de 1 sola linea (tiene problemas de accesibilidad)
9 <noframes> </noframes> Prohibe los Frames tipo <frame> y <frameset>
10 <strike> </strike> Texto Subrayado (antiguo)
11 <tt> </tt> Fuentes del tipo Teletipo
12 <xmp> Texto Preformateado
13 <blink> </blink> Texto Destellante (Horror que llego a implementarse hace decadas)
14 <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!
- Ahora todos juntos...
1 <!-- soy un comentario y soy invisible -->
2 <a href="http://www.google.com">Soy un Link a Google</a>
3 <br><br>
4 <b>Esto es texto en Negritas</b>
5 <button>Aqui esta un boton</button>
6 <i>Este texto es Italico</i>
7 <hr>
8 <h1>Titulo (Nivel 1)</h1>
9 <h2>Titulo (Nivel 2)</h2>
10 <h3>Titulo (Nivel 3)</h3>
11 <h4>Titulo (Nivel 4)</h4>
12 <h5>Titulo (Nivel 5)</h5>
13 <h6>Titulo (Nivel 6)</h6>
14 <ul>
15 <li>Lista sin Orden</li>
16 <li>Lista sin Orden</li>
17 </ul>
18 Este texto no tiene ninguna etiqueta...
19 <ol>
20 <li>Lista con Orden</li>
21 <li>Lista con Orden</li>
22 </ol>
23 <code>echo "codigo Bash"</code>
24 <p>Parrafo de Texto (continuo)</p>
25 <s>Aqui tenemos Texto Tachado</s> y <u>Aqui tenemos Texto Subrayado</u>
- Vamos con Multimediaaaaa
1 <video width="480" height="240" controls loop autobuffer
2 poster='http://www.w3.org/html/logo/downloads/HTML5_Logo.svg'
3 src="http://ubuntuone.com/p/40d/"> </video>
4
5
6 <!--
7 ----------------- TODOS ESTOS PARAMETROS SON OPCIONALES: -----------------
8
9 width="480" quiere decir el ANCHO del video (width en Ingles es Ancho)
10
11 height="240" quiere decir el ALTO del video (height en Ingles es Alto)
12
13 controls quiere decir mostrar los botones de Play, Pausa, etc
14
15 loop quiere decir volver a comenzar el video cuando termine, indefinidamente
16
17 poster es un link a una imagen comun para mostrar como miniatura (Preview) del video
18
19 autobuffer significa Pre-cargar el Video automaticamente (sino la carga comienza al darle play)
20 -->
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
Ya sabes donde comenzar, ...y hasta donde puedes llegar, el resto depende de vos.
Espero te halla gustado este Tutorial de Introduccion a HTML5
|
