Desarrollo Sostenible : Herramientas HTML

La historia completa de HTML es tan interesante como larga, por lo que a continuación se muestra su historia resumida.

El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del CERN (Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de "hipertexto" para compartir documentos. El primer documento formal con la descripción de HTML se publicó en 1991 bajo el nombre HTML Tags (Etiquetas HTML) y todavía hoy puede ser consultado online a modo de reliquia informática.

La primera propuesta oficial para convertir HTML en un estándar se realizó en 1993 por parte del organismo IETF (Internet Engineering Task Force). Aunque se consiguieron avances significativos (en esta época se definieron las etiquetas para imágenes, tablas y formularios) ninguna de las dos propuestas de estándar, llamadas HTML y HTML+ consiguieron convertirse en estándar oficial y en 1995, el organismo IETF organiza un grupo de trabajo de HTML y consigue publicar, el 22 de septiembre de ese mismo año, el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer estándar oficial de HTML.

A partir de 1996, los estándares de HTML los publica otro organismo de estandarización llamado W3C (World Wide Web Consortium). La versión HTML 3.2 se publicó el 14 de Enero de 1997 y es la primera recomendación de HTML publicada por el W3C. Esta revisión incorpora los últimos avances de las páginas web desarrolladas hasta 1996, como applets de Java y texto que fluye alrededor de las imágenes.

HTML 4.0 se publicó el 24 de Abril de 1998 (siendo una versión corregida de la publicación original del 18 de Diciembre de 1997) y supone un gran salto desde las versiones anteriores. Entre sus novedades más destacadas se encuentran las hojas de estilos CSS, la posibilidad de incluir pequeños programas o scripts en las páginas web, mejora de la accesibilidad de las páginas diseñadas, tablas complejas y mejoras en los formularios.

La última especificación oficial de HTML se publicó el 24 de diciembre de 1999 y se denomina HTML 4.01. Se trata de una revisión y actualización de la versión HTML 4.0, por lo que no incluye novedades significativas.

El HTML funciona de la siguiente manera:

La idea es sencilla: sólo tienes que crear un documento con tu editor preferido (como documento entenderemos el conjunto de ficheros, tanto de texto como de imágenes, que forman las distintas páginas), guardarlo con la extensión .htm o .html, abrirlo con tu navegador preferido, y ya tienes un hipertexto en marcha. Las páginas o documentos creados pueden residir en el disco duro de tu ordenador personal, en un disquete, en un CD-ROM, o estar a varios miles de kilómetros en otro ordenador llamado servidor web o servidor http, que es el protocolo utilizado. Si es así, entonces te estarás moviendo por la WWW (World Wide Web) que es como se ha dado en llamar a este tipo de servicios de Internet.

Así pues, en esencia, una página escrita en HTML no es más que texto normal, escrito con cualquier editor, y al que, cuando se le quiere dar algún aspecto especial, como por ejemplo el tamaño de la letra, habrá que acompañar de ciertos códigos para indicar el efecto deseado. A estos códigos se les llama elementos del lenguaje.

Hay que saber que el HTML significa lenguaje de marcado de hipertexto, y le permite al usuario crear y estructurar secciones, párrafos, encabezados, enlaces y elementos de cita en bloque (blockquotes) para páginas web y aplicaciones. HTML no es un lenguaje de programación, lo que significa que no tiene la capacidad de crear una funcionalidad dinámica. En cambio, hace posible organizar y formatear documentos, de manera similar a Microsoft Word.

Cuando trabajamos con HTML, utilizamos estructuras de código simples (etiquetas y atributos) para marcar una página web. Por ejemplo, podemos crear un párrafo colocando el texto encerrado dentro de una etiqueta inicial <p> y de cierre </p>.

La diferencia entre HTML Y HTML5 si bien es cierto que HTML5 es una de las nuevas versión de HTML, que nos trajo nuevas etiquetas interesantes tales como la nueva forma y sencilla maquetar un sitio o aplicaciones web, olvidando la forma tediosa de maquetar en tablas o solo usando etiquetas div. Con las nuevas etiquetas tenemos una estructura más entendible tanto para el desarrollador y para los motores de búsquedas, porque etiquetas como <header>, <footer>, le decimos al navegador que sección es nuestra cabecera y pie de página; si tenemos un blog, la etiqueta <article>, es esencial ya que nos permite decir al navegador. Oye navegador cada artículo que pongo en mi blog, está dentro de la etiqueta articule, así podemos mejorar en el posicionamiento.

1) Las tres etiquetas de nivel de bloque que todo documento HTML debe contener son <html>, <head> y <body>.

2) La etiqueta <html> </html> es el elemento de más alto nivel que encierra a toda página HTML.

3) La etiqueta <head> </head> contiene información meta como el título y el conjunto de caracteres de la página.

Finalmente, la etiqueta <body> </body> encierra todo el contenido que aparece en la página.

Los encabezados tienen 6 niveles en HTML. Van desde <h1> </h1> a <h6> </h6>, donde h1 es el encabezado de nivel más alto y h6 es el más bajo. Los párrafos están encerrados por <p> </p>, mientras que las citas en bloque usan la etiqueta <blockquote> </blockquote>.

Las divisiones son secciones de contenido más grandes que normalmente contienen varios párrafos, imágenes, a veces citas en bloque y otros elementos más pequeños. Podemos marcarlos usando la etiqueta <div> </div>. Un elemento div también puede contener otra etiqueta div en su interior.

También puedes usar las etiquetas <ol> </ol> para las listas numeradas y <ul> </ul> para las que no estén numeradas. Los elementos individuales de la lista deben estar encerrados por la etiqueta <li> </li>. Por ejemplo, así es como se ve una lista básica no numerada en HTML.

Etiquetas en línea

Muchas etiquetas en línea se utilizan para dar formato al texto. Por ejemplo, una etiqueta <strong> </strong> representaría un elemento en negrita, mientras que las etiquetas <em> </em> lo mostrarían en cursiva.

Los hipervínculos también son elementos en línea que requieren etiquetas <a> </a> y atributos href para indicar el destino del enlace.

Para empezar a escribir código HTML necesitamos un editor de código como puede ser: sublime text, notepad, visual studio code, CoffeCup Free Editor, entre otros e incluso el famoso bloc de notas. Para escribir código HTML nos servirá hasta el editor más básico y sencillo.