Cómo funciona la web

Escribes una dirección, pulsas Intro y, en menos de un segundo, aparece una página. Por el camino han pasado muchas cosas: tu ordenador ha buscado dónde está esa web, le ha pedido un archivo, lo ha recibido y lo ha convertido en lo que ves. En esta lección vas a entender ese recorrido: qué son el cliente y el servidor, cómo se lee una URL, para qué sirve el DNS, cómo es una conversación HTTP y qué añade HTTPS. No necesitas saber programar: es la base para entender todo lo que harás después.

Internet y la web no son lo mismo

Internet es la red física y lógica que conecta millones de ordenadores en todo el mundo: cables, antenas, routers y las reglas para que los datos lleguen de un sitio a otro.

La web (World Wide Web) es uno de los servicios que funcionan sobre Internet: el de las páginas enlazadas entre sí. El correo electrónico, las videollamadas o los juegos en línea también usan Internet, pero no son la web.

Una comparación: Internet es la red de carreteras; la web es una de las empresas de reparto que circulan por ella.

Cliente y servidor

En la web siempre hay dos papeles:

• El cliente es quien pide algo. Normalmente es tu navegador (Chrome, Firefox, Safari, Edge), pero también puede ser una app del móvil o un programa.
• El servidor es un ordenador, siempre encendido y conectado, que guarda las páginas y responde a quien las pide.

Funciona como en una biblioteca: tú (el cliente) vas al mostrador y pides un libro; el bibliotecario (el servidor) lo busca y te lo entrega. Si el libro no existe, te lo dice.

Un mismo servidor atiende a miles de clientes a la vez, y un mismo cliente habla con muchos servidores: al cargar una página de noticias, tu navegador puede pedir el HTML a un servidor, las fotos a otro y los vídeos a un tercero.

Webs estáticas y dinámicas

• En una web estática, el servidor tiene los archivos .html ya escritos y los entrega tal cual. Es lo que harás en este curso de HTML.
• En una web dinámica, el servidor genera el HTML en el momento con un lenguaje de servidor (como PHP o Node.js con Express), normalmente consultando una base de datos. Así funciona una tienda online: la página de tu carrito no existe hasta que la pides.

Para el navegador no hay diferencia: en los dos casos recibe HTML.

Las partes de una URL

Una URL (Uniform Resource Locator) es la dirección completa de un recurso en la web. Fíjate en esta:

https://www.ejemplo.com:443/cursos/escalada?nivel=1&dia=sabado#precios

Parte	En el ejemplo	Para qué sirve
Protocolo (o esquema)	https://	Las reglas con las que se va a hablar con el servidor
Subdominio	www	Una sección del dominio. Es opcional
Dominio	ejemplo.com	El nombre de la web
Puerto	:443	La “puerta” del servidor. Casi nunca se escribe
Ruta	/cursos/escalada	Qué recurso concreto quieres dentro de esa web
Consulta (query string)	?nivel=1&dia=sabado	Datos extra en pares nombre=valor, separados por &
Fragmento	#precios	Un punto concreto dentro de la página

Algunos detalles importantes:

• El dominio se lee de derecha a izquierda: .com es el dominio de primer nivel (TLD, top-level domain); ejemplo, el nombre que alguien ha registrado; www, un subdominio. Otros TLD conocidos son .es, .org, .dev o .eu.
• El puerto por defecto es 80 para http y 443 para https. Por eso no se escribe. Lo verás cuando trabajes en local, por ejemplo http://localhost:5500.
• La consulta es lo que añade un formulario con method="get", como el de un buscador: ?q=zapatillas+trail.
• El fragmento nunca se envía al servidor: lo usa solo el navegador para saltar a un elemento con ese id, como viste en enlaces.

En el editor de esta lección tienes un pequeño programa que separa una URL en sus partes. Cambia la dirección y observa el resultado.

Nota: los dominios example.com, example.org y ejemplo.com se usan mucho en documentación. Los dos primeros están reservados precisamente para eso.

DNS: la agenda de Internet

Los ordenadores no se localizan por nombres, sino por números: las direcciones IP. Una dirección IPv4 tiene este aspecto: 203.0.113.25. Las más nuevas, IPv6, son más largas: 2001:db8:85a3::8a2e:370:7334.

Nadie se aprende esos números, así que existe el DNS (Domain Name System, sistema de nombres de dominio): un sistema mundial de servidores que traduce nombres en direcciones IP. Es como la agenda del móvil: tú buscas “Lucía” y el teléfono marca su número.

Cuando escribes www.ejemplo.com:

1. El navegador mira si ya conoce la IP porque la ha usado hace poco (la tiene en caché, una memoria temporal).
2. Si no, pregunta al servidor DNS que tenga configurado tu conexión (normalmente el de tu compañía de Internet).
3. Ese servidor, si no lo sabe, pregunta a otros por orden: primero a los que conocen .com, luego al que gestiona ejemplo.com.
4. La respuesta vuelve con la IP, y cada paso la guarda un tiempo para no tener que preguntar otra vez.

Todo esto tarda unos milisegundos. Cuando publiques tu propia web tendrás que configurar el DNS de tu dominio para que apunte a tu servidor; lo verás en publicar tu web.

HTTP: la conversación entre navegador y servidor

HTTP (HyperText Transfer Protocol) es el protocolo de la web: el conjunto de reglas que fijan cómo pide algo el cliente y cómo responde el servidor. Cada intercambio tiene dos partes: una petición y una respuesta.

La petición

Cuando visitas una página, tu navegador envía un texto parecido a este (simplificado):

GET /cursos/escalada?nivel=1 HTTP/1.1
Host: www.ejemplo.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) ...
Accept: text/html
Accept-Language: es-ES,es;q=0.9

• La primera línea dice qué hacer (el método, aquí GET), sobre qué (la ruta) y con qué versión del protocolo.
• Las siguientes son cabeceras (headers): datos extra en formato Nombre: valor. Aquí dicen a qué web va la petición, qué navegador la hace, qué tipo de contenido acepta y en qué idioma prefiere la respuesta.

La respuesta

El servidor contesta con algo así:

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

<!DOCTYPE html>
<html lang="es">
...

• La primera línea lleva el código de estado: 200 OK significa “aquí tienes lo que pediste”.
• Luego, sus cabeceras: qué tipo de archivo es, cuánto ocupa y durante cuánto tiempo puede guardarlo el navegador.
• Después de una línea en blanco va el cuerpo: el HTML de la página.

Fíjate en Content-Type. El navegador no se fía de la extensión del archivo: decide qué hacer con lo que recibe según esa cabecera. Si un servidor mal configurado envía un .css como text/plain, la hoja de estilos no se aplica.

Los métodos HTTP

Método	Para qué	Ejemplo
GET	Pedir un recurso, sin cambiar nada	Ver una página, buscar
POST	Enviar datos para crear algo o procesarlos	Enviar un formulario de contacto
PUT	Reemplazar un recurso entero	Guardar un perfil completo
PATCH	Modificar parte de un recurso	Cambiar solo el email
DELETE	Borrar un recurso	Eliminar un comentario

Un formulario HTML solo puede usar GET y POST. Los demás métodos los usarás desde JavaScript con fetch y en las API REST.

Los códigos de estado

Son números de tres cifras. La primera cifra dice el tipo de respuesta:

Grupo	Significado	Los más habituales
1xx	Información	Casi nunca los verás
2xx	Todo ha ido bien	200 OK, 201 Created (se ha creado algo), 204 No Content (bien, pero sin nada que devolver)
3xx	Redirección: está en otro sitio	301 Moved Permanently (se ha mudado para siempre), 302 Found (temporalmente), 304 Not Modified (usa la copia que ya tienes)
4xx	Error del cliente: la petición está mal	400 Bad Request, 401 Unauthorized (falta identificarse), 403 Forbidden (no tienes permiso), 404 Not Found (no existe), 429 Too Many Requests
5xx	Error del servidor: la petición estaba bien, pero algo ha fallado allí	500 Internal Server Error, 502 Bad Gateway, 503 Service Unavailable

Saber leer estos códigos te ahorra mucho tiempo. Si tu imagen no aparece y ves un 404, la ruta está mal escrita. Si ves un 403, el archivo existe pero el servidor no deja leerlo. Si ves un 500, el problema no está en tu HTML.

HTTP no tiene memoria

Cada petición es independiente: el servidor no recuerda que hace un minuto le pediste otra página. Por eso se dice que HTTP es un protocolo sin estado. Para que una tienda sepa que eres tú quien tiene un carrito, el servidor te envía una cookie (un pequeño dato que el navegador guarda y devuelve en cada petición). Lo trabajarás en sesiones y cookies.

HTTPS: la versión cifrada

Con HTTP a secas, la petición y la respuesta viajan en texto claro. Cualquiera que esté en medio (alguien en la misma wifi de una cafetería, por ejemplo) podría leer lo que envías, incluida una contraseña, o incluso modificar la página que recibes.

HTTPS es HTTP dentro de una conexión cifrada con TLS (Transport Layer Security). Aporta tres cosas:

1. Confidencialidad: nadie en el camino puede leer los datos.
2. Integridad: nadie puede cambiarlos sin que se note.
3. Autenticidad: el servidor demuestra con un certificado que es de verdad ejemplo.com y no un impostor.

El navegador muestra un aviso de “No seguro” en las webs con HTTP, y muchas funciones modernas (la geolocalización, la cámara, los service workers) solo funcionan con HTTPS. Hoy los certificados son gratuitos, así que toda web debe usar HTTPS, aunque no tenga formularios.

Cuidado: HTTPS protege el viaje de los datos, no garantiza que la web sea honrada. Una web fraudulenta también puede tener su candado. Fíjate siempre en el dominio.

Las versiones de HTTP

Verás nombres como HTTP/1.1, HTTP/2 o HTTP/3. Las versiones nuevas son más rápidas, sobre todo porque permiten pedir muchos archivos a la vez por la misma conexión, pero las reglas que has visto (métodos, cabeceras, códigos) son las mismas. Lo decide el servidor; tú no tienes que cambiar nada en tu HTML.

Qué hace el navegador al cargar una página

Juntemos todas las piezas. Al escribir https://www.ejemplo.com/cursos/ y pulsar Intro:

1. Resolver el nombre. El navegador consulta el DNS y obtiene la IP del servidor.
2. Conectar. Abre una conexión con esa IP en el puerto 443 y negocia el cifrado TLS.
3. Pedir el HTML. Envía una petición GET /cursos/.
4. Recibir la respuesta. El servidor devuelve 200 OK y el código HTML.
5. Leer el HTML. El navegador lo recorre de arriba abajo y construye en memoria un árbol con todos los elementos: el DOM (Document Object Model). Lo usarás mucho en JavaScript.
6. Pedir el resto. Cada vez que encuentra un <link rel="stylesheet">, un <script src> o un <img>, lanza otra petición para ese archivo. Una página normal hace decenas de peticiones.
7. Aplicar el CSS. Combina el DOM con las hojas de estilo para saber cómo se ve cada elemento.
8. Calcular la posición de cada caja (el layout) y pintar los píxeles en la pantalla.
9. Ejecutar JavaScript, que puede cambiar el DOM y provocar que se vuelva a calcular y pintar una parte.

Dos consecuencias prácticas:

• El orden del HTML importa. Un <script> normal detiene la lectura del HTML hasta que se descarga y se ejecuta. Por eso se usa defer, como verás en rendimiento.
• Cada archivo extra es una petición más. Imágenes enormes o veinte hojas de estilo hacen la página lenta, aunque el HTML sea pequeño.

Verlo con tus propios ojos

Abre cualquier web, pulsa F12 y ve a la pestaña Red (Network). Recarga la página: verás la lista de todas las peticiones, con su método, su código de estado, su tipo, su tamaño y lo que han tardado. Pulsa en la primera (el HTML) y verás sus cabeceras de petición y de respuesta. Aprenderás a usar estas herramientas en la siguiente lección.

Abrir un archivo no es lo mismo que visitar una web

Cuando haces doble clic en un index.html de tu ordenador, la barra de direcciones muestra algo como file:///C:/Users/ana/web/index.html. No hay servidor, ni DNS, ni HTTP: el navegador lee el archivo directamente del disco.

Para HTML y CSS sencillos funciona, pero algunas cosas se comportan distinto o fallan con file://: las rutas que empiezan por /, los módulos de JavaScript o las peticiones con fetch. Por eso, al trabajar, se usa un servidor local (como la extensión Live Server), que sirve tus archivos en http://localhost. localhost es un nombre especial que siempre significa “este mismo ordenador”.

Errores frecuentes

• Confundir Internet con la web. La web es solo uno de los servicios de Internet.
• Pensar que el fragmento #... llega al servidor. Se queda en el navegador; el servidor nunca lo ve.
• Creer que un 404 es un fallo del servidor. Es un error del cliente: has pedido algo que no existe. Revisa la ruta y las mayúsculas del nombre.
• Creer que HTTPS significa “web de confianza”. Solo garantiza que la conexión está cifrada y que hablas con ese dominio.
• Probar con file:// cosas que necesitan servidor. Si algo funciona en el servidor y no en tu ordenador (o al revés), comprueba la barra de direcciones.

Resumen

Concepto	Qué es
Cliente	Quien pide (el navegador)
Servidor	Quien guarda y responde
URL	Protocolo + dominio + puerto + ruta + consulta + fragmento
DNS	Traduce nombres de dominio en direcciones IP
HTTP	Protocolo de petición y respuesta, sin estado
Métodos	GET pide, POST envía, PUT/PATCH modifican, DELETE borra
Códigos	2xx bien, 3xx redirección, 4xx error del cliente, 5xx error del servidor
HTTPS	HTTP cifrado con TLS y un certificado
DOM	Árbol de elementos que construye el navegador a partir del HTML

En la siguiente lección prepararás tu puesto de trabajo: editor y herramientas del navegador.