Cómo funciona la web

Cada vez que abres una página ocurren, en menos de un segundo, decenas de pasos coordinados entre tu navegador, varios servidores y la red. Entenderlos es la base de todo lo demás: depurar un error, optimizar el rendimiento o razonar sobre seguridad exige saber quién habla con quién y en qué orden.

Los protagonistas

Componente	Responsabilidad
Navegador (cliente)	Interpreta la URL, envía peticiones y convierte HTML, CSS y JavaScript en píxeles.
DNS	Traduce un nombre como ejemplo.edu en una dirección IP.
Servidor web	Recibe peticiones HTTP y devuelve respuestas: archivos estáticos o contenido generado.
Aplicación	Lógica de negocio que se ejecuta detrás del servidor cuando el contenido es dinámico.

El recorrido de una petición

sequenceDiagram
    autonumber
    actor U as Usuario
    participant N as Navegador
    participant D as DNS
    participant S as Servidor
    U->>N: Escribe https://ejemplo.edu/cursos
    N->>D: ¿IP de ejemplo.edu?
    D-->>N: 203.0.113.10
    N->>S: Conexión TCP + negociación TLS
    N->>S: GET /cursos HTTP/1.1
    S-->>N: 200 OK + HTML
    N->>S: GET /estilos.css, /app.js, imágenes…
    S-->>N: Recursos
    N-->>U: Página renderizada

Secuencia de una petición HTTP

1. Resolución DNS. El navegador pregunta qué IP corresponde al dominio. La respuesta suele estar en caché (del navegador, del sistema operativo o del proveedor), por eso este paso a menudo es instantáneo.

2. Conexión segura. Se abre una conexión TCP con el servidor y, al usar https, se negocia TLS: el servidor presenta un certificado que demuestra su identidad y se acuerdan claves de cifrado.

3. Petición HTTP. El navegador envía un mensaje de texto con un método (GET), una ruta (/cursos) y cabeceras con información adicional.

4. Respuesta. El servidor contesta con un código de estado (200, 404, 500…), sus propias cabeceras y, normalmente, un cuerpo con el contenido.

5. Renderizado. El navegador analiza el HTML, descubre los recursos que faltan (CSS, JavaScript, imágenes), los solicita y finalmente compone y pinta la página.

Anatomía de un mensaje HTTP

Una petición y su respuesta son, literalmente, texto con un formato preciso:

Petición

GET /cursos HTTP/1.1
Host: ejemplo.edu
Accept: text/html
Accept-Language: es-CO,es;q=0.9

Respuesta

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Cache-Control: max-age=600

<!doctype html>
<html lang="es">…

Concepto clave

HTTP es un protocolo sin estado: cada petición es independiente y el servidor no recuerda las anteriores. Las sesiones, los carritos de compra y el «inicio de sesión» se construyen encima de HTTP con cookies o tokens que el cliente envía en cada petición.

Haz la petición tú mismo

La misma petición puede hacerse desde la terminal, desde JavaScript o desde cualquier lenguaje. Elige el tuyo:

curl

# -i muestra también las cabeceras de la respuesta
curl -i https://example.com/

JavaScript

const respuesta = await fetch('https://example.com/');
console.log(respuesta.status, respuesta.headers.get('content-type'));
const html = await respuesta.text();
console.log(html.slice(0, 200));

Python

import urllib.request

with urllib.request.urlopen("https://example.com/") as respuesta:
    print(respuesta.status, respuesta.headers["Content-Type"])
    print(respuesta.read(200).decode())

MJScliente-http.mjsScript de Node.js que muestra método, estado, cabeceras y tiempo de una petición.MJS · 722 B

Explora una URL

Una URL tiene partes con significado propio. Escribe cualquier dirección en el ejemplo y observa cómo se descompone:

Anatomía de una URLDescargar

Ver código fuente (anatomia-url.html)

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
<title>Anatomía de una URL</title>
<style>
  body { font: 15px/1.5 system-ui, sans-serif; margin: 0; padding: 1.25rem; color: #1b1d26; background: #fff; }
  label { font-weight: 600; display: block; margin-bottom: .35rem; }
  input { width: 100%; box-sizing: border-box; padding: .6rem .75rem; font: 14px ui-monospace, monospace; border: 1px solid #c7cad3; border-radius: .5rem; }
  input:focus { outline: 2px solid #3f47c6; border-color: transparent; }
  dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 1.25rem 0 0; }
  dt { font-weight: 600; color: #3f47c6; }
  dd { margin: 0; font-family: ui-monospace, monospace; word-break: break-all; }
  .vacio { color: #8a8f9c; font-style: italic; font-family: system-ui, sans-serif; }
  .error { color: #c0392b; margin-top: 1rem; }
  .nota { font-size: 13px; color: #5d6270; margin-top: 1rem; }
</style>
</head>
<body>
  <label for="url">Escribe una URL</label>
  <input id="url" value="https://ejemplo.edu:8443/cursos/web?unidad=2&amp;tema=http#ejercicios" spellcheck="false" autocomplete="off">
  <div id="salida" aria-live="polite"></div>
  <p class="nota">El análisis usa la API estándar <code>URL</code> del navegador.</p>
<script>
  const partes = [
    ['Esquema', u => u.protocol.replace(':', '')],
    ['Host', u => u.hostname],
    ['Puerto', u => u.port || `(por defecto: ${u.protocol === 'https:' ? 443 : 80})`],
    ['Ruta', u => u.pathname],
    ['Consulta', u => [...u.searchParams].map(([k, v]) => `${k} = ${v}`).join('\n')],
    ['Fragmento', u => u.hash.slice(1) && `${u.hash.slice(1)}  ← no se envía al servidor`],
  ];
  const entrada = document.getElementById('url');
  const salida = document.getElementById('salida');
  function analizar() {
    try {
      const u = new URL(entrada.value);
      salida.innerHTML = '<dl>' + partes.map(([nombre, f]) => {
        const valor = f(u);
        const dd = document.createElement('dd');
        if (valor) { dd.textContent = valor; dd.style.whiteSpace = 'pre-line'; }
        else { dd.textContent = '(vacío)'; dd.className = 'vacio'; }
        return `<dt>${nombre}</dt>${dd.outerHTML}`;
      }).join('') + '</dl>';
    } catch {
      salida.innerHTML = '<p class="error">No es una URL válida. ¿Incluiste el esquema (https://)?</p>';
    }
  }
  entrada.addEventListener('input', analizar);
  analizar();
</script>
</body>
</html>

Error frecuente

El fragmento (lo que va después de #) nunca se envía al servidor: lo procesa solo el navegador. Si tu aplicación depende de él, el servidor no podrá verlo en los registros ni usarlo para decidir qué responder.

Practica

EjercicioObserva el tráfico realbásico⏱ 15 min

Abre las herramientas de desarrollo del navegador (F12), ve a la pestaña Red y recarga esta página.

1. ¿Cuántas peticiones se hicieron en total?
2. Identifica la petición del documento HTML principal: ¿qué código de estado y qué Content-Type tiene?
3. Encuentra una respuesta servida desde la caché. ¿Cómo lo indica la herramienta?

Ver solución

Las cifras exactas dependen del navegador, pero deberías encontrar:

1. Entre 10 y 30 peticiones: el HTML, hojas de estilo, scripts, fuentes e iconos.
2. El documento principal responde 200 con Content-Type: text/html; charset=utf-8. Si la página estaba en caché, puede aparecer 304 Not Modified.
3. La columna Tamaño muestra «(caché de disco)» o «(caché de memoria)» en lugar de un número de bytes.

AutoevaluaciónUn usuario visita https://ejemplo.edu/notas#parcial-2. ¿Qué ruta recibe el servidor en la petición HTTP?

/notas#parcial-2/notas/parcial-2https://ejemplo.edu/notas#parcial-2

Comprobar

Autoevaluación¿Qué significa que HTTP sea un protocolo sin estado?

Que las respuestas nunca pueden guardarse en caché.Que cada petición es independiente y el servidor no recuerda las anteriores por sí mismo.Que no puede transmitir datos binarios como imágenes.Que el servidor no devuelve códigos de estado.

Comprobar

Para profundizar

• Una visión general de HTTP — MDN
• Cómo funcionan los navegadores — web.dev