INTRODUCCION A HTML5

En esta ocasión, les traigo un artículo del ya bien conocido HTML5, proponiendo según mi opinión un punto de inicio para poder desarrollar mejores estructuras en nuestros sitios web, están disponibles para esta versión muchas etiquetas que no se les da la importancia necesaria al momento de empezar a desarrollar.

Mucha gente lo usa, pero no aprovechan al cien por ciento su rendimiento ya que no conocen algunas de las nuevas etiquetas y siguen usando las etiquetas  antiguas para desarrollar la estructura de sus sitios web.

En este artículo les presentare una breve introducción a las versiones anteriores y un completo glosario con ejemplos de todas las nuevas etiquetas que le fueron agregadas, así como la estructura de un modelo llamado “modelo de caja tradicional” el cual a mi ver es el punto de partida y la base para dominar el lenguaje HTML5.

Sin más que agregar, espero que disfruten este artículo, así que vamos a empezar.

HTML5 no es una nueva versión del antiguo lenguaje de etiquetas, ni siquiera una mejora de esta ya antigua tecnología, sino un nuevo concepto para la construcción de sitios web y aplicaciones en una era que combina dispositivos móviles, computación en la nube y trabajos en red.

Todo comenzó mucho tiempo atrás con una simple versión de HTML propuesta para crear la estructura básica de páginas web, organizar su contenido y compartir información. 

El lenguaje y la web misma nacieron principalmente con la intención de comunicar información por medio de texto.

El limitado objetivo de HTML motivó a varias compañías a desarrollar nuevos lenguajes y programas para agregar características a la web nunca antes implementadas. Estos desarrollos iniciales crecieron hasta convertirse en populares y poderosos accesorios. Simples juegos y bromas animadas pronto se transformaron en sofisticadas aplicaciones, ofreciendo nuevas experiencias que cambiaron el concepto de la web para siempre.

De las opciones propuestas, Java y Flash fueron las más exitosas; ambas fueron masivamente adoptadas y ampliamente consideradas como el futuro de Internet.

Sin embargo, tan pronto como el número de usuarios se incrementó e Internet pasó de ser una forma de conectar amantes de los ordenadores a un campo estratégico para los negocios y la interacción social, limitaciones presentes en estas dos tecnologías probaron ser una sentencia de muerte.

El mayor inconveniente de Java y Flash puede describirse como una falta de integración. Ambos fueron concebidos desde el principio como complementos (plugins), algo que se inserta dentro de una estructura pero que comparte con la misma solo espacio en la pantalla.

No existía comunicación e integración alguna entre aplicaciones y documentos.

HTML5 es, de hecho, una mejora de esta combinación, el pegamento que une todo.

HTML5 propone estándares para cada aspecto de la web y también un propósito claro para cada una de las tecnologías involucradas. A partir de ahora, HTML provee los elementos estructurales, CSS se encuentra concentrado en cómo volver esa estructura utilizable y atractiva a la vista, y JavaScript tiene todo el poder necesario para proveer dinamismo y construir aplicaciones web completamente funcionales.

Las barreras entre sitios webs y aplicaciones finalmente han desaparecido. Las tecnologías requeridas para el proceso de integración están listas. El futuro de la web es prometedor y la evolución y combinación de estas tres tecnologías (HTML, CSS y JavaScript) en una poderosa especificación está volviendo a Internet la plataforma líder de desarrollo. HTML5 indica claramente el camino.

IMPORTANTE: Ya para esta fecha la mayoría de navegadores soportan las etiquetas del HTML5. Sea cual fuere el navegador elegido, siempre tenga en mente que un buen desarrollador instala y prueba sus códigos en cada programa disponible en el mercado.

Ejecute los códigos provistos en este artículo en cada uno de los Navegadores disponibles.

Componentes básicos

Hágalo usted mismo: Cree un archivo de texto vacío utilizando su editor de desarrollo  favorito para probar cada código presentado en este artículo.

Esto lo ayudará a recordar las nuevas etiquetas HTML y acostumbrarse a ellas.

Yo utilizo el editor SUBLIME TEXT, la versión más reciente, a mi opinión me parece bastante completo, dispone de una variedad de lenguajes para los que tiene diferente configuraciones  para mostrar el código de una manera más clara y sobre todo ordenada,  y además podemos agregar plug-ins lo cual le da un extra aun mejor.

Conceptos básicos

Un documento HTML es un archivo de texto. Si usted no posee ningún programa para desarrollo web, puede simplemente utilizar el Bloc de Notas de Windows o cualquier otro editor de textos. El archivo debe ser guardado con la extensión .html y el nombre que desee (por ejemplo, micodigo.html).

Teniendo claro lo que es un archivo html, daremos paso a definir su estructura global.

Estructura global

Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está diferenciada, declarada y determinada por etiquetas específicas.

En esta parte  vamos a ver cómo construir la estructura global de un documento HTML y los nuevos elementos semánticos incorporados en HTML5.

<!DOCTYPE>

En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5 es extremadamente.

Sencillo:  

                                  <!DOCTYPE html>

IMPORTANTE: Esta línea debe ser la primera línea del archivo, sin espacios o líneas que la precedan. De esta forma, el modo estándar del navegador es activado y las incorporaciones de HTML5 son interpretadas siempre que sea posible, o ignoradas en caso contrario.

<html>

Luego de declarar el tipo de documento, debemos comenzar a construir la estructura HTML. Como siempre, la estructura tipo árbol de este lenguaje tiene su raíz en el elemento <html>.

 Este elemento envolverá al resto del código:

                  <!DOCTYPE html>

                     <html lang=”es”>

  

                     </html>

El atributo lang en la etiqueta de apertura <html> es para  definir el idioma humano del contenido del documento que estamos creando, en este caso es por español.

<head>

Continuemos construyendo nuestra plantilla. El código HTML insertado entre las etiquetas <html> tiene que ser dividido entre dos secciones principales.

Al igual que en versiones previas de HTML, la primera sección es la cabecera y la segunda el cuerpo. El siguiente paso, por lo tanto, será crear estas dos secciones en el código usando los elementos <head> y <body> ya conocidos.

El elemento <head> va primero, por supuesto, y al igual que el resto de los elementos estructurales tiene una etiqueta de apertura y una de cierre:

      <!DOCTYPE html>

          <html lang="es">

             <head>

             </head>

          </html>

<body>

La siguiente gran sección que es parte principal de la organización de un documento HTML es el cuerpo. El cuerpo representa la parte visible de todo documento y es especificado entre etiquetas <body>.

Estas etiquetas tampoco han cambiado en relación con versiones previas de HTML:

   <!DOCTYPE html>

      <html lang="es">

        <head>

        </head>

          <body>

          </body>

     </html>

Hasta el momento tenemos un código simple pero con una estructura compleja. Esto es porque el código HTML no está formado por un conjunto de instrucciones secuenciales. 

HTML es un lenguaje de etiquetas, un listado de elementos que usualmente se utilizan en pares y que pueden ser anidados (totalmente contenidos uno dentro del otro).

<meta>

Es momento de construir la cabecera del documento.

Algunos cambios e innovaciones fueron incorporados dentro de la cabecera, y uno de ellos es la etiqueta que define el juego de caracteres a utilizar para mostrar el documento.

Ésta es una etiqueta <meta> que especifica cómo el texto será presentado en pantalla:

<!DOCTYPE html>

    <html lang="es">

               <head>

                   <meta charset=”iso-8859-1”>

                </head>

        <body>

       </body>

 </html>

Por supuesto, podemos cambiar el tipo iso-8859-1 por el necesario para nuestros documentos y agregar otras etiquetas <meta> como description o keywords para definir otros aspectos de la página web, como es mostrado en el siguiente ejemplo:

         <head>

           <meta charset="iso-8859-1">

           <meta name=”description” content=”Ejemplo de HTML5”>

           <meta name=”keywords” content=”HTML5, CSS3, Javascript”>

         </head>

Hay varios tipos de etiqueta <meta> que pueden ser incluidas para declarar información general sobre el documento, pero esta información no es mostrada en la ventana del navegador, es solo importante para motores de búsqueda y dispositivos que necesitan hacer una vista previa del documento u obtener un sumario de la información que contiene.

<title>

La etiqueta <title>, como siempre, simplemente especifica el título del documento, y no hay nada nuevo para comentar:

        

          <!DOCTYPE html>

             <html lang="es">

           <head>

  <meta charset="iso-8859-1">

  <meta name="description" content="Ejemplo de HTML5">

  <meta name="keywords" content="HTML5, CSS3, JavaScript">

            <title>Este texto es el título del documento</title>

          </head>

          <body>

          </body>

      </html>

<link>

Otro importante elemento que va dentro de la cabecera del documento es <link>. Este elemento es usado para incorporar estilos, códigos JavaScript, imágenes o iconos desde archivos externos. Uno de los usos más comunes para <link> es la incorporación de archivos con estilos CSS:

           <!DOCTYPE html>

       <html lang="es">

<head>

<meta charset="iso-8859-1">

<meta name="description" content="Ejemplo de HTML5">

<meta name="keywords" content="HTML5, CSS3, JavaScript"<title>Este texto es el título del documento</title>

<link rel=”stylesheet” href=”misestilos.css”>

 </head>

  <body>

 </body>

</html>

En HTML5 ya no se necesita especificar qué tipo de estilos estamos insertando, por lo que el atributo type fue eliminado. Solo necesitamos dos atributos para incorporar nuestro archivo de estilos: rel y href.

El atributo rel significa “relación” y es acerca de la relación entre el documento y el archivo que estamos incorporando por medio de href.

En este caso, el atributo rel tiene el valor stylesheet que le dice al navegador que el archivo misestilos.css es un archivo CSS con estilos requeridos para presentar la página en pantalla.

En esta etapa por tratarse de una introducción terminaremos este articulo de esta manera, abiendo definido las etiquetas que comprenden  los extremos del documento, quedaría definir las etiquetas que se encargan de ordenar el contenido lo cual haremos en el próximo articulo.

Para no cargar el documento aun mas y que se vuelva mas aburrido, tratare de que los próximos artículos sean mas prácticos, dado que se tratase de una introducción es prácticamente necesario incluir teoría.