html

Revision 7 as of 2012-01-12 20:04:35

Clear message

Ubuntu HTML5 y CSS3

Tutoriales para realizar Documentos de Lenguaje de Markup de Hypertexto y Hojas de Estilo.

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.

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 (dentro 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 menos importante en documentos (aunque si en Aplicaciones).

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