Volviendo a la vida después de unas extremadamente cortas vacaciones, al llegar a los cuarteles generales de CLH tuve la oportunidad de revisar nuestro siempre lleno buzón de peticiones.  A medida que pasaba por los distintos correos, cartas, botellas de bebida vacías y postales que han echado ahí, nos fue posible ver un denominador común en el cual mucha gente nos preguntaba sobre el proceso de creación de sitios Web desde cero.

Si bien hemos cubierto distintos aspectos para diseñar sitios Web (como tutoriales de CSS, buenas prácticas y tips o funcionalidades específicas), a la fecha nunca nos habíamos sentado a redactar una guía sobre la base de todo: HTML. Pues bien, hoy daremos comienzo al que esperamos que sea un largo camino de tutoriales en los cuales veremos desde los conceptos más básicos de este lenguaje, pasando por todo lo necesario para poder codificar como un campeón.

El detalle, como siempre (o ‘as usual’ para nuestros amigos ángloparlantes), después del salto.

Cómo convertirse en un campeón de HTML – Parte 1

Al igual que en otras sagas que hemos hecho en el pasado como “Cómo aprender a programar y no morir en el intento” (la cual ya tendrá una parte 11, lo prometemos, paciencia) o “Cómo dominar CSS sin salir del escritorio” , este primer capítulo contendrá más teoría que práctica, algo que se irá revirtiendo a medida que vayamos avanzando. Sin embargo, intentaremos hacer algo distinto, que es fijar un ejercicio a modo de ejemplo al final de cada tutorial para que vayamos practicando desde el comienzo.

Implementos necesarios:

1. Un editor Web o en su defecto bloc de notas (ya entraremos en detalle en esto).
2. Un navegador Web (idealmente más de uno, ya veremos porque).

Contenidos:

1. ¿Qué es HTML?
2. Tipos, versiones y sabores.
3. Estructura vs Estilo.
4. Estructura básica de un documento HTML.
5. Editores Web.
6. Ejercicio: Primera página en HTML.

Tenemos bastantes contenidos por delante, así que sin más que añadir, manos a la obra:

1.- ¿Qué es HTML?

Ahh.. nuestro viejo, querido (y hace poco actualizado) HTML. Si tuvieramos que definir una base estructural para todo lo que hoy vemos en sitios Web sería este lenguaje, y ya podremos ir viendo porque.

HTML (Hyper Text Markup Language – Lenguaje de marcas de hipertexto) es un lenguaje utilizado para la creación de documentos Web o páginas. Creado originalmente en la década de los 80 en el CERN (aunque sus primeras versiones vieron la luz recién en los 90), se define como un lenguaje de marcas que busca definir una estructura en los documentos Web que publicamos. Esto se hace mediante la definición de secciones dentro del documento (por eso define estructura), tales como encabezados, títulos, cuerpos, párrafos, etc. Adicionalmente cuenta con una serie de elementos para el ordenamiento correcto de la información como listas y bloques, así como permitir la inserción de elementos multimedia como imágenes, sonidos, animaciones, e incluso herramientas para interactuar con los usuarios como formularios.

Uno de los objetivos principales con la definición de este lenguaje, ha sido no solo entregar herramientas para la confección de un documento en particular, sino que también funcionalidades que nos permita enlanzar este documento a otros mediante enlaces, hipervínculos o hipertextos.

Desde su primera versión (1.0) hasta la más actual (HTML 5), se han ido incluyendo funcionalidades que permiten a este lenguaje interactuar con cada nueva tecnología Web que ha ido apareciendo a través de los años: desde inserción de hojas de estilo hasta incrustación de lenguajes de programación Web como PHP.

Si bien HTML es un lenguaje de estructura y no de programación propiamente tal, cuenta con varios elementos similares que pueden ser reconocidos y facilitan el aprendizaje para quienes conozcan otros lenguajes, como la semántica y la estructura de sus partes, lo que podrá ser apreciado a medida que se van desarrollando nuevos documentos.

La base de HTML radica en el uso de etiquetas para definir el inicio y término de una sección de un documento Web en particular. Estas etiquetas encierran el contenido que desplegaremos a través del navegador y cada una de ellas posee atributos y características que hacen que la información se muestre de cierta manera. A medida que vayamos desarrollando ejemplos podremos ver esto de forma más clara.

Antes de continuar, es bueno aclarar algunas preguntas frecuentes:

1.- ¿Qué formato tienen los documentos HTML?

Principalmente 2, aunque es 1 realmente ya que se trata del mismo. Los documentos HTML (que solo contengan este lenguaje y no otros incrustados) son de formato htm o html, el cual básicamente es el mismo y es reconocido de igual manera por los navegadores. La diferencia radica simplemente en que algunos sistemas operativos y sistemas de archivos más antiguos (como DOS y FAT respectivamente) no permitían extensiones de archivos de más de 3 letras.

2.- ¿Es necesario algún conocimiento previo antes de aprender HTML?

No. Si bien siempre ayuda tener conocimientos o nociones de otros lenguajes o del funcionamiento propiamente tal de la Web, no es un requerimiento, ya que es posible aprender y dominar HTML sin haber estudiado nada relacionado anteriormente. En mi caso personal, cuando empecé a diseñar sitios Web hace más de 10 años, HTML fue lo primero que aprendí sin tener ningún otro conocimiento al respecto (con suerte lo que era una URL), por lo que puedo dar fé de que es posible.

3.- ¿Cuál es el nivel de dificultad del lenguaje?

Relativamente bajo. Un alto porcentaje de las etiquetas que contiene el lenguaje son prácticamente autoexplicativas, y para las que no, con un poco de práctica y prueba/error basta para dominarlas. Dedicándole un poco de tiempo diario (nunca más de 1 hora), se puede tener un buen entendimiento y dominio del lenguaje en menos de 1 semana.

4.- Tengo mala memoria, ¿debo aprenderme  todas las etiquetas?

En lo absoluto. HTML cuenta con un gran número de etiquetas, cada una con funcionalidades y atributos distintos, por lo que recordar exactamente cada una es una perdida de espacio en la cabeza. Sin embargo, si bien no es necesario recordarlas al pie de la letra, es esencial saber que hace cada una para tener un entendimiento completo de la estructura de un documento en particular. A medida que vamos tomando más experiencia, nos vamos apoyando en herramientas como editores Web, los cuales mediante interfaces gráficos nos ayudan a codificar de manera más rápida y óptima, dejando la codificación “a mano” para casos más específicos y corrección de errores.

5.- ¿Qué necesito para visualizar un documento HTML?

Un navegador Web. Los navegadores actuales están preparados para interpretar todas las etiquetas correspondientes a HTML, a excepción de versiones más antiguas que puedan no reconocer alguna funcionalidad de las versiones más recientes del lenguaje.

Hay mucho más que podríamos decir sobre HTML y su historia, pero no es la idea alargarnos en este tema cuando hay tanto aún por delante. A medida que vayamos avanzando iremos viendo uno que otro concepto interesante que pueda servirnos.

2.- Tipos, versiones y sabores

Si bien no hay en chocolate, vainilla ni Dr. Pepper, HTML cuenta con varias versiones, tipos y hasta una derivación que ya veremos.

Tal como hemos comentado, la primera versión de HTML, la 1.0, vió la luz por allá por los inicios de los 90. A la fecha se han lanzado 4 versiones adicionales, siendo la 5 la más reciente, cada una de las cuales ha añadido nuevos elementos y quitado o depreciado algunos de versiones anteriores. Las adiciones más notables y/o renombradas tienen que ver con la integración de nuevas tecnologías Web que han ido apareciendo desde entonces y las eliminaciones con respecto a un punto que veremos más adelante, que refiere a la definición más estricta de HTML como un lenguaje de estructura de documentos Web y no tanto de estilo.

Si bien ya vamos en la versión 5 de HTML, la más utilizada a la fecha sigue siendo la 4.01, ya que la primera fue lanzada hace poco tiempo y aún está en etapa de adaptación e integración por parte de los diseñadores y desarrolladores. Hoy es posible ver sitios en HTML 5, pero corresponden a la minoría, principalmente por lo indicado anteriormente y porque aún gente que posee navegadores más antiguos, los cuales no están preparados para interpretar algunas funcionalidades de la nueva versión.

Adicionalmente, existe una derivación del lenguaje, conocido como XHTML, el cual corresponde a una mezcla entre XML y HTML, con lo cual se aplica una variación y se define un lenguaje mucho más estricto con respecto a ciertas reglas, como por ejemplo el cierre correcto de cada sección y el no omitir etiquetas, algo que en HTML a veces es permitido. En próximas ediciones entraremos más en detalle en este tema, ya que por ahora no es necesario y alargaríamos aún más esta primera etapa.

3.- Estructura vs Estilo

Si bien es algo temprano para discutir esto, en lo personal lo considero un concepto tremendamente importante a aprender antes de entrar de lleno al lenguaje en sí. Siempre, cuando estamos aprendiendo a dominar una nueva tecnología, es de suma importancia entender cuales son los alcances reales y correctos de esta, especialmente porque es tremendamente común encontrar una serie de malas prácticas definidas que pueden llevarnos a errores más adelante.

Cuando HTML fue definido en un comienzo, siempre se pensó como un lenguaje de estructura para documentos Web, tal como lo hemos indicado anteriormente. Sin embargo, a medida que fue pasando el tiempo y los requerimientos comenzaron a evolucionar, se fue haciendo necesario contar con funcionalidades que permitieran estilizar las página para entregarle al usuario una experiencia más agradable. Con esto, se empezó a hacer común el uso de etiquetas como font face para definir el tipo de letra a utilizar en un texto, font color para definir su color o b, i, u para el formato del texto (negrita, cursiva y subrayado respectivamente).

A medida que estas etiquetas comenzaban a utilizarse más y más, se comenzó a apreciar que HTML dejaba de ser un lenguaje netamente de estructura y de a poco se convertía en un híbrido que mezclaba tanto la estructura como el estilo del documento, un propósito muy distinto para el que inicialmente se había ideado. Debido a esto es que lenguajes de estilo como CSS comienzan a potenciarse y las etiquetas antes mencionadas a depreciarse y dejar de ser soportadas por nuevos navegadores, devolviendo HTML a su propósito inicial, solamente preocuparse de la estructura y dejar que el estilo lo maneje un lenguaje específico definido para esto.

Resumiendo un poco lo anterior, es de suma importancia entender el concepto de lo que es HTML, un lenguaje creado para definir la estructura de documento Web y no su estilo. Es por esto que no debemos esperar o apuntar a utilizar etiquetas que nos ayuden a configurar formatos de visualización o estilos gráficos. Para eso existen otras herramientas y debemos tener claro cual es el alcance y el correcto uso de cada una de ellas.

4.- Estructura básica de un documento HTML

Un documento HTML tiene una estructura básica definida por etiquetas (encerradas entre los símbolos < y > para la apertura de una sección y </ y > para el cierre de la misma), cada una de las cuales demarca una sección del mismo:

• Inicio del documento.
• Cabecera.
• Cuerpo del documento.
• Cierre del documento.

Viendo en detalle:

a) Inicio del documento: Corresponde a la apertura oficial, donde le indicamos al navegador que se trata de un documento Web en formato HTML, por lo que debe proceder a interpretar las etiquetas para mostrar el contenido en pantalla. Este inicio se marca con la etiqueta <html>.

b) Cabecera del documento: Indica toda la información relativa al documento, como su título y opcionalmente librerías externas y/o hojas de estilo que deseemos cargar de forma externa. La cabecera propiamente tal se encierra en las etiquetas <head> y </head>, llevando dentro de ellas como mínimo la correspondiente al título, la cual va entre <title> y </title>.

c) Cuerpo del documento: Es la sección principal del documento, en donde incluiremos todo el contenido que se desplegará en pantalla. Corresponde a las etiquetas <body> y </body>.

d) Cierre del documento: Tal como lo abrimos, debemos cerrarlo mediante la etiqueta </html>.

O sea, un documento básico existe de la siguiente manera:

<html>
<head>
<title>Titulo del documento</title>
<body>
Contenido del documento
</body>
</html>

Cada documento que creemos es importante guardarlo siempre en su nombre con minúsculas, ya que los navegadores son sensitivos a las mayúsculas y por eso, al momento de enlazar (algo que veremos más adelante) no reconoceran http://www.misitio.com/ejemplo.html si el archivo se llama Ejemplo.html, así que mucho ojo con eso.

5.- Editores Web

La gran manzana de la discordia, especialmente entre desarrolladores Web. Años atrás, cuando Netscape e Internet Explorer luchaban por el dominio entre los usuarios, Frontpage era el niño cool del barrio y comparábamos los modems de 33.6k y 54k, la mayoría de los editores Web que hoy conocemos no existían, y los que si estaban disponibles (como el maldito bendito Frontpage) eran bastante rudimentarios de utilizar, con una curva alta de aprendizaje y sin un beneficio real para quienes diseñaban o desarrollaban sitios Web. Es por esto que muchos (incluyéndome) hacían uso del buen y querido bloc de notas para codificar, ya que este permitía hacerlo de forma rápida, guardando en el formato necesario y sin utilizar muchos recursos (algunos luego empezaron a utilizar Word, pero ese ya es otro tema).

A medida que pasaron los años, grandes aplicaciones de edición Web comenzaron a aparecer, como es el caso de Dreamweaver, KompoZer, Nvu y Coda por nombrar algunos, los cuales comenzaron a integrar interfaces gráficos realmente amigables y simples de usar, lo que terminó por entregarle la posibilidad a los diseñadores de crear documentos Web de manera rápida y sencilla solo presionando algunos botones.

Hoy la oferta es amplia, hay para todo gusto y es algo realmente recomendable de usar, a pesar de que muchos desarrolladores acostumbrados a la época de antaño lo reprueben. Por eso nos tomamos el tiempo de entregar el consejo de buscar un buen editor Web que nos asista en la tarea y tomar provecho de todas las ventajas que nos ofrecen. Sin duda que hacen la tarea más fácil y nos permiten quemar pestañas en interfaces algo más agradables que simples editores de texto.

Si la posibilidad está a su alcance, hagan uso de esas herramientas. Asistan su proceso de creación y háganlo lo más sencillo posible, para que se preocupen de lo que realmente importa, que es la confección de buenos sitios y la generación de un aún mejor contenido.

Sobre cual elegir en particular, va en cada uno, lo que más nos acomode y esté a nuestro alcance. En lo personal me agrada tanto Dreamweaver para Windows como Coda para Mac. Lamentablemente ámbos tienen un costo bastante elevado, por lo que a veces es mejor optar por alternativas más económicas o de código abierto como Nvu o KompoZer. Lo más importante es encontrar el que mejor sirva para nuestros propósitos.

6.- Ejercicio: Primera página en HTML

Y llegamos a la sección con la que esperamos cerrar cada uno de los capítulos. Un pequeño ejercicio que nos sirva para aplicar todo lo que hemos aprendido en esta edición. Hoy veremos la creación de una sencilla primera página en HTML, para poder desplegarla en un navegador y empezar a experimentar a futuro con técnicas más avanzadas.

Para eso, abrimos nuestro editor Web favorito (o un editor de texto como bloc de notas) y escribimos el siguiente código, el cual como siempre, va con los comentarios respectivos:

// Abrimos el documento
<html>
// Declaramos la cabecera
<head>
// Agregamos el título
<title>Mi primer documento Web</title>
// Cerramos la cabecera
</head>
// Declaramos el cuerpo
<body>
// Llenamos con un párrafo
<p>Un texto de ejemplo</p>
// Cerramos el cuerpo
</body>
// Cerramos el documento
</html>

Como pueden ver, utilizamos una nueva etiqueta que no habíamos visto: <p></p>. Esta etiqueta sirve para encerrar un párrafo de texto normal, lo que veremos en detalle en una próxima edición.

Por ahora con eso basta. Guardamos el documento con extensión .html y lo abrimos en un navegador para ver el resultado.

Y luego de ver toda esta introducción, algo de conceptos y un pequeño ejercicio, damos por terminada la primera edición de esta saga, la cual esperamos sea de utilidad para todos Uds. y que podamos hacer una gran cantidad de números en el futuro, para que podamos ver todo el detalle de este grandioso lenguaje llamado HTML.

Por ahora lo dejaremos hasta aquí, recordándoles que siempre es bueno comer chicle para la memoria y no masticar pasas, ya que hace muy mal… o bueno, algo así.

Como siempre, este tutorial ha sido:

Cualquier duda, comentario o si hay algún tema en especial que quieran ver a futuro, los invitamos a dejarnos unas líneas en el área habilitada a continuación.

Muchas gracias por leer y será hasta una próxima oportunidad.