Si no somos diseñadores web o programadores, es posible que no encontremos una utilidad inmediata para el código HTML. Pero en marketing, periodismo, y otras profesiones relacionadas con la comunicación, saberlo se está volviendo casi una obligación. Aunque sean las cosas más básicas, nos encontramos necesitando cada vez más saber cómo usarlo. Y no es nada complicado, las apariencias engañan. Para facilitar la existencia de estas personas que recién se están metiendo al mundo de HTML, y que realmente no necesitan ser unos expertos para hacer lo que tienen que hacer, hemos realizado este breve curso en algunas entregas donde develaremos algunos secretos de HTML para principiantes.

Creo que comenzar a aprender HTML puede ser adictivo, y aunque en un primer momento solamente necesitemos tener un conocimiento básico, después vamos teniendo ansias de saber más. Si se sienten interesados por HTML, hay que entender que se trata de un lenguaje bastante anticuado, que tiene que ser complementado con otros recursos. Por eso, se puede recurrir a aprendizajes en las áreas de CSS, Dreamweaver, JavaScript, jQuery, y muchas cosas más que también son infinitamente interesantes. Pero, sin más, comenzamos con esta breve introducción al fascinante mundo del HTML.

Significado y origen del HTML

HTML es uno de esos acrónimos que con el correr del tiempo casi han perdido su totalidad. Si le preguntamos a muchas personas qué significa en realidad HTML, pues no sabrían respondernos con exactitud. HTML es Hyper Text Markup Language (o lenguaje de marcas de hipertexto) y no debe confundirse con un lenguaje de programación. Se trata más bien de una forma semántica de organizar una estructura, ya sea páginas web o aplicaciones, a través de marcas de sentido. Las marcas de sentido son otorgadas por las etiquetas, de las cuales hablaremos en algunas líneas.

Así como tenemos que agradecerle la creación de internet, también fue Sir Tim Berners-Lee el responsable, en parte, de la creación del HTML. En la década del ’80, cuando se encontraba trabajando para el CERN, el físico ideó un lenguaje de hipertexto que facilitaría compartir documentos con sus colegas. Aunque el sistema de hipertexto ya había sido desarrollado un tiempo antes, fue Berners-Lee quien lo perfeccionó y lo presentó para ser usado en internet. Junto con Robert Cailliau, presentaron la propuesta WorldWideWeb (W3). Durante la década del ’90 se fueron presentando otras versiones. Hoy en día, el lenguaje HTML puro y duro ha sido reemplazado por el XHTML, más completo, y últimamente por el HTML5, que se corresponde con los tiempos que corren.

Hoy estaremos hablando del lenguaje transicional, el XHTML, que aún se sigue implementando en una gran mayoría de sitios web, aunque lentamente se está dejando lugar al HTML5 y sus amplias ventajas.

Las etiquetas

Decíamos anteriormente que  el HTML funciona a través de marcas de sentido llamadas etiquetas. Estas etiquetas son interpretadas por el navegador: así es como podemos ver imágenes, texto, párrafos, en definitiva, estructuras, en una página web, y no el simple código. Por eso hablamos además de marcas de sentido. Sin HTML, no tendríamos la posibilidad de disfrutar internet hoy en día. Básicamente, los navegadores como Chrome o Firefox son “traductores” de HTML que digieren todo este código y lo convierten en algo visible para nosotros.

Etiquetas, marcas de sentido… ¿qué son verdaderamente? Cada etiqueta tiene un nombre y encierra en ella –literalmente, como veremos ahora- un determinado significado. Las etiquetas se escriben con los signos mayor y menor a. Por eso cuando abrimos un documento HTML veremos esto:

<html>
<head>
<title>Bienvenidos a Bitelia</title>
</head>
<body>

Por supuesto este es un comienzo de HTML muy burdo, pero se entiende la idea. La etiqueta <html> en este caso está indicando el inicio de un documento HTML, y esta información es leída por el navegador. Por otra parte, tenemos la etiqueta <head>, la cual merece su propio apartado por la importancia, y luego <body>, que contendrá todas las cosas que nosotros como usuarios podemos ver en pantalla.

Las etiquetas funcionan por partes, que se denominan etiquetas de apertura y etiquetas de cierre. Las etiquetas de apertura le indican al navegador dónde comenzar a interpretar algo de determinada forma, y las de cierre le indican dónde terminarlo. Por eso es fundamental que se cierren todas las etiquetas que se abren en un determinado documento: aunque se vea bien, nos puede traer problemas a largo plazo. La prolijidad nunca está de más.

Al ser un lenguaje de etiquetas, el HTML es por ende muy fácil de leer. Cualquiera puede aprender HTML, no requiere ser un genio, sino nada más tener algo de organización. En la segunda parte de este curso hablaremos sobre la estructura básica de un documento HTML, algo fundamental, además de las etiquetas más importantes y básicas que necesitamos saber. Por el resto de esta entrega, nos dedicaremos a entender otros datos importantes de HTML y, finalmente, por qué tenemos que saberlo si no nos dedicamos al diseño o programación web.

Los archivos en HTML

Los documentos HTML pueden incluir archivos como imágenes y animaciones en Flash que estarán alojados en el mismo servidor, para que el usuario pueda verlos. Pero para poder ser interpretados de forma correcta, la nomenclatura de estos archivos tiene que ser exacta. Es algo que es muy valorado por el W3 Consortium –entidad encargada de hacer las normas que deben seguir los diseñadores- y que no está de más saber.

Los archivos HTML y otros archivos que usemos en nuestra página tienen que estar nombrados de forma particular. Hay una serie de reglas básicas que compartiremos con ustedes, que sirven como puntapié inicial:

  • Los nombres de los archivos deben estar en minúsculas, para poder ser compatibles en todos los navegadores.

  • El archivo principal será index.html, dado que será el primer archivo que el navegador buscará cuando ingrese en nuestro servidor a través de la dirección IP. No se puede tener el archivo de la home llamado de forma diferente, tiene que sí o sí llamarse index.

  • No se pueden usar caracteres no válidos para la nomenclatura del archivo, por ejemplo, la letra ñ. Solamente se pueden usar el guión (-) y el guión bajo (_).

  • No importa si es una imagen o un archivo HTML, todos los documentos tienen que seguir estas reglas para poder ser interpretados de forma correcta por el navegador.

Por ejemplo, aunque nos veamos tentados de llamar Foto 22/08.jpg a un archivo, la nomenclatura correcta sería foto_22-08.jpg.

¿Por qué aprender HTML?

Si no somos diseñadores web, y por ejemplo tenemos un empleo relacionado con la comunicación, en algún momento nos hemos topado con el HTML. Aprenderlo nunca está de más, dado que es una habilidad que puede ser apreciada en el ámbito laboral.

Para los Community Managers, es una excelente posibilidad dado que permite jugar con las herramientas que nos proporciona, por ejemplo Facebook, para crear tabs personalizadas en las fanpages. Se puede crear algo básico e interesante con un conocimiento mínimo de HTML gracias a los iframes (de los cuales hablaremos en otra entrega, pero que permiten insertar una página web dentro de otra).

Para los periodistas y bloggers, saber de HTML nos permite poder jugar más con las plataformas y darle un formato diferente a nuestros textos. Además, nos permite resolver problemas de formato que muchas veces surgen en las plataformas más populares de blogging del mundo (no tengan miedo de entrar a la vista HTML a corregir, nos da una visión más clara de qué es lo que estamos haciendo).

Comprender HTML es comprender el idioma en el que se maneja internet. Cuando sabemos sus conceptos básicos, es como entender las primeras palabras cuando estamos mirando una película en otro idioma, un idioma que estamos estudiando.