html

Ubuntu HTML5

Tutoriales para realizar Documentos de Lenguaje de Markup de Hypertexto.

No incluiremos Javascript debido que no programaremos Aplicaciones, esta orientado a Documentos.

html5.svg



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.

  • Ubuntu No se sabe si funcionan.

    Ubuntu 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...

  • Ubuntu Si no practicas, Hay Tabla! 

   1 <table border="1"> <!-- border="1" con Bordes, border="0" sin Bordes -->
   2   <tr>   <th>Animal </th>   <th>Genero</th>   </tr>
   3 
   4   <tr>   <td>Gato   </td>   <td>Felino</td>   </tr>
   5   <tr>   <td>Hamster</td>   <td>Roedor</td>   </tr>
   6   <tr>   <td>Loro   </td>   <td>Ave   </td>   </tr>
   7 </table>

  • Ubuntu 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>

  • Ubuntu 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?

  • Ubuntu Ejemplos Libres (GPL) al Azar (sin Javascript, sin Imagenes, sin Flash) para motivar la creatividad y curiosidad Wink ;)

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

Espero te halla gustado este Tutorial de Introduccion a HTML5

ArgentinaTeam/Tutoriales/html (last edited 2012-01-12 23:30:31 by 148-5-231-201)