CodeForge

Maquetación Web Dinámica / Cómo funciona la Web

Qué pasa cuando escribes una URL

Teoría15 min20 XP

Al terminar esta lección vas a poder explicar, con tus propias palabras, qué ocurre entre que presionas Enter en el navegador y aparece una página en tu pantalla. Ese viaje es el escenario donde va a vivir TODO lo que construyas en este curso.

El viaje de una URL

Cuando escribes https://ejemplo.com y presionas Enter, tu navegador pide una página a otra computadora (el servidor) y este le responde con un archivo de texto: el HTML. Todo lo demás — colores, fuentes, animaciones — llega después, pero el primer paso siempre es ese intercambio.

¿Y cómo encuentra el navegador al servidor?

Los computadores no se encuentran por nombres, sino por números: las direcciones IP (algo como 142.250.78.110). Como nadie quiere memorizar números, existe el DNS: un servicio que traduce ejemplo.com a su IP.

text
 TÚ                      INTERNET                    SERVIDOR
 ───                     ────────                    ────────
 escribes la URL   ──►   DNS traduce el nombre  ──►  recibe la petición
 presionas Enter         a una dirección IP          busca el archivo
                                                     │
 el navegador      ◄──   viaja la respuesta     ◄──  responde el HTML
 pinta la página
El viaje completo de una petición web

La respuesta es texto (y punto)

Esto es, literalmente, lo que el servidor le responde a tu navegador. No es una imagen de la página ni un programa: es texto plano con una estructura que aprenderás a escribir en el módulo 2.

respuesta-del-servidor.html
<!doctype html>
<html lang="es">
<head>
  <title>Mi página</title>
</head>
<body>
  <h1>¡Hola, mundo!</h1>
</body>
</html>

Las líneas resaltadas son el body: todo lo que ves en pantalla vive ahí. El navegador lee ese texto de arriba abajo y lo pinta — a ese proceso se le llama renderizar.

¿Para qué sirve el DNS?

Mini-reto

Abre las DevTools de tu navegador (F12), ve a la pestaña Network, recarga esta página y observa la primera fila de la lista: ese es el HTML llegando a tu navegador. Haz clic sobre esa fila y mira la pestaña Response — estás viendo el texto crudo que el servidor respondió, antes de que el navegador lo pintara.

Qué sigue

En la próxima lección preparas tu caja de herramientas: navegador, DevTools y VS Code. De ahí en adelante, todo es construir.