← Volver a la lista de posts
Germán Escobar

HTTP y HTML

¿Qué es HTTP? ¿Qué es HTML? ¿Qué relación tienen? En este post vamos a intentar responder estas preguntas. Pero antes un poco de historia.

Aunque Internet fue desarrollado a finales de los 60’s y principios de los 70’s, no fue sino hasta 1989 que Tim Berners-Lee propuso el proyecto World Wide Web (WWW) trabajando para CERN, que era en su momento el nodo de Internet más grande en Europa.

“Solo tuve que tomar la idea del HyperText y conectarla con TCP y DNS, y ta-da! Surgió el World Wide Web …"

-- Tim Berners Lee

En ese momento empezó el desarrollo de HTML (Hyper Text Markup Language) para definir la estructura de documentos con vínculos a otros documentos, y HTTP (Hyper Text Transfer Protocolo) como el protocolo por el que se transmitiría HTML.

Y es que parece magia cuando abrimos un navegador e ingresamos a algún sitio como http://www.makeitreal.camp/. ¿Qué ocurre por debajo? El navegador realiza varios pasos que son invisibles para nosotros y que vamos a describir a continuación:

  1. Traducir el dominio a la dirección IP del servidor.
  2. Abrir una conexión con el servidor.
  3. Enviar un mensaje HTTP solicitando el recurso.
  4. Interpretar el mensaje HTTP de respuesta.

Traducción del dominio

Todo dispositivo conectado a Internet (computador, tablet, smarphone, etc.) está identificado por una dirección IP única (p.e. 31.13.69.160). Los dominios (p.e. www.google.com, www.facebook.com) no son más que un nombre de fácil recordación para los humanos.

Cuando ingresamos el nombre de un dominio en el navegador, se hace un llamado a un DNS (Domain Name Server) que hace la traducción del dominio a la dirección IP. Un DNS es un servicio con una gran base de datos que contiene la dirección IP a la que está asociada cada dominio en Internet. Cuando alguien registra un nuevo dominio, el registrador debe avisar a todos los DNS’s (públicos y privados) que actualicen sus bases de datos. Puedes configurar el DNS en las propiedades de red de tu computador. Muchas personas cambian la configuración para usar el DNS público de Google, por ejemplo.

Abrir la conexión

Una vez que el navegador tiene la dirección IP del servidor, el siguiente paso es abrir una conexión a un puerto específico en el servidor. Generalmente omitimos el puerto cuando escribimos una dirección en el navegador; en ese caso se asume el puerto 80. Es posible especificar explícitamente el puerto de la siguiente forma: http://www.google.com:80/.

¿Qué es un puerto?

Es la forma de identificar, en un servidor, la aplicación a la que se le deben enrutar los datos que envían los clientes. Por ejemplo, los servidores de Google, Facebook, etc., tienen una aplicación (llamada servidor Web) que recibe conexiones y peticiones HTTP a través del puerto 80.

Enviar el mensaje HTTP

Una vez que la conexión con el servidor está abierta, el navegador envía un mensaje de acuerdo al protocolo HTTP.

¿Qué es un protocolo?

Es un conjunto de reglas de conversación que se establecen para que las máquinas entiendan un intercambio de mensajes. La especificación del protocolo HTTP versión 1.1 se puede encontrar acá. Si tienes un tiempo libre no dudes en ojearla, aprender sobre el protocolo HTTP es una muy buena inversión de tiempo.

HTTP (Hyper Text Transfer Protocol) es un protocolo de petición/respuesta. Un cliente, por ejemplo un navegador, envía un mensaje al servidor en el que especifíca el método, URI (la ruta del recurso que estamos solicitando), la versión del protocolo, y, opcionalmente, el cuerpo con el contenido del mensaje. El servidor responde con otro mensaje que incluye el código de estado de la respuesta, algunos encabezados, y el cuerpo con el contenido de la respuesta.

Veamos un ejemplo de un mensaje de petición HTTP (asumiendo que ya tenemos una conexión abierta al servidor de Google):

GET /doc.html HTTP/1.1
Host: www.google.com

En la primera línea del mensaje estamos solicitando el recurso /doc.html. La segunda línea es un encabezado. Este mensaje no lleva cuerpo.

Recibir el mensaje de respuesta HTTP

Después de que el navegador ha enviado una petición, el servidor retorna una respuesta de regreso. Por ejemplo, la respuesta de la petición anterior es la siguiente:

HTTP/1.1 404 Not Found
Content-Type: text/html; charset=UTF-8
X-Content-Type-Options: nosniff
Date: Sun, 05 Oct 2014 17:49:34 GMT
Server: sffe
Content-Length: 1433
X-XSS-Protection: 1; mode=block
Alternate-Protocol: 80:quic,p=0.002

<!DOCTYPE html>
<html lang=en>
  <meta charset=utf-8>
  <meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
  <title>Error 404 (Not Found)!!1</title>
  <style>
    ...
  </style>
  <a href=//www.google.com/><span id=logo aria-label=Google></span></a>
  <p><b>404.</b> <ins>That’s an error.</ins>
  <p>The requested URL <code>/doc.html</code> was not found on this server.  <ins>That’s all we know.</ins>

La línea más importante es la primera, que nos dice que el código de la respuesta es 404 No Encontrado. Después tenemos algunos encabezados. El primero nos dice que en el cuerpo del mensaje vamos a encontrar código HTML. Por último, después de la línea en blanco viene el cuerpo del mensaje.

El navegador interpreta la respuesta, identifica que en el cuerpo del mensaje viene código HTML (podría venir una imágen, audio, archivo PDF, etc.) y lo muestra en la pantalla.

Developer Tools

Puedes ver las peticiones y respuestas HTTP que envía y recibe el navegador a través del Developer Tools de tu navegador. Mira este video para aprender cómo hacerlo.

HTML

HTML es un lenguaje que nos permite definir la estructura de un documento que los navegadores interpretan y muestran en la pantalla. Por ejemplo:

<!DOCTYPE html>
<html>
  <head>
	<title>Este título va en la pestaña del navegador</title>
  </head>
  <body>
  	<h1>Hola Mundo</h1>
  </body>
</html>

HTML está compuesto de dos grandes secciones: <head> y <body>. En el <head> especificamos información que no es visible en la pantalla como el título del documento, referencia a otros archivos, etc. En el <body> van las etiquetas con la estructura del documento: encabezados (<h1>, <h2>, etc.), párrafos (<p>), links (<a>), listas (<ul> y <ol>), tablas (<table>), formularios (<form>), etc.

Generalmente, el código HTML (Hyper Text Markup Language) viaja a través de HTTP (Hyper Text Transfer Protocol). Pero es posible crear un archivo con extensión .html y abrirlo en un navegador directamente.

¡Inténtalo!

Abre un editor de texto (p.e. Bloc de Notas, TextEdit, etc.) y pega el código HTML anterior. Guárdalo como index.html en el escritorio. Arrástralo desde el escritorio al navegador (Internet Explorer, Chrome, Firefox, etc.) para abrirlo.

Más recursos:

¿Cómo convertirte en Desarrollador Web?

Descarga gratis el e-book

Conoce la mentalidad, los roles y las tecnologías que debes saber para convertirte en desarrollador Web.

Descargar e-book