El documento HTML

En la publicación anterior hablamos de que cuando hacemos un pedido a un servidor web este nos envía un documento HTML. Hablaremos un poco de dicho documento, enfocándonos en tres partes: la parte de HTML, la parte de CSS y la parte de javascript, las cuales representan contenido, estilo y lógica, respectivamente.

Cuando hablamos del "documento HTML" nos referimos al archivo que un servidor web envía a nuestro navegador con el fin de poder visualizar la página web solicitada. A pesar de su nombre, el documento HTML contiene más que código HTML.

HTML

HTML o HyperText Markup Language (lenguaje de marcas de hipertexto) es la parte del documento HTML que define el contenido de la página web. Desde los controles (botones, cajas de texto, imágenes, hiperenlaces, entre otros) hasta la estructura de una página web están definidos en la parte HTML.

Las capacidades de HTML se han extendido bastante desde la introducción de HTML5. En la serie de HTML5 hablaremos a fondo de cómo usar HTML5. Por ahora, lo importante es tener una idea básica de para qué usamos el HTML.

Por ejemplo, utilizando casi solamente HTML, podemos tener una página como la siguiente:

Página web sin CSS

Horrible. La página es horrible. Nunca un cliente te va a dar dinero por algo así. Nunca una marca va a poder ser promocionada en semejante web. 

A pesar de eso, vemos que la página posee un encabezado, un slogan, un menú, algunas publicaciones y un pie de página al fondo. Con el HTML le dimos una estructura lógica a nuestra página. El problema está en que no importa qué tan bueno seas con el HTML, sin el CSS no vas a llegar lejos, pues la imagen es importante.

CSS

CSS o Cascade Style Sheet (hoja de estilo en cascada) es la parte del documento HTML que trabaja la presentación, el cómo se ven las cosas, aunque en realidad podemos hacer mucho más. Con CSS podemos, entre otras cosas, manejar el tamaño de los elementos de una página, sus colores, sus bordes; podemos crear animaciones, podemos también organizar el contenido de una página web de unos modos que con HTML puro sea imposible o demasiado tedioso.

Para ver un poco del poder del CSS, arreglemos la página que mostramos hace unos momentos:

Página web con CSS

Ahora está un poco mejor (aclaro que este diseño es sólo para mostrar lo que podemos hacer con CSS, ¡nunca entregues una página web así!). El cambio más notable es el menú, que ahora tiene un submenú desplegable. Vemos que cada entrada del blog tiene su fondo rojo, y cada título tiene un fondo verde.

No es mucho lo que se puede hacer con HTML y CSS solos, necesitamos también lógica, algo que nos permita desarrollar algoritmos. Para ello tenemos a Javascript

Javascript

Javascript es un lenguaje de programación que se ejecuta en un documento HTML (y no, HTML no es un lenguaje de programación). Como el javascript se ejecuta en el navegador, su velocidad de respuesta es bastante buena en general. Si has programado en C# o Java, Javascript no se te hará muy difícil de dominar.

Con javascript podemos: crear juegos, validar datos, editar elementos HTML, hacer pedidos asíncronos al servidor web, y muchas cosas más.