Curso HTML 1.2 Cómo funciona un sitio web (cliente, servidor, HTTP)

Curso HTML 1.2: Cómo funciona un sitio web (cliente, servidor, HTTP)

1. Arquitectura Cliente-Servidor

Un sitio web se basa en un modelo cliente-servidor. El cliente es normalmente tu navegador (Chrome, Firefox, etc.) y el servidor es la máquina que almacena archivos, genera páginas dinámicas o expone una API. Ambos se comunican mediante el protocolo HTTP sobre TCP/IP.

1.1 El Cliente

• Inicia la conexión TCP hacia el servidor (puerto 80 o 443).
• Envía una solicitud HTTP (request).
• Recibe la respuesta HTTP (response).
• Interpreta y renderiza el contenido (HTML, CSS, JS, imágenes).

1.2 El Servidor

• Escucha peticiones entrantes en un puerto específico.
• Procesa la solicitud (estática o dinámica).
• Genera y envía la respuesta HTTP al cliente.
• Puede mantener conexiones persistentes (keep-alive) o cerrarlas.

2. Protocolo HTTP

HTTP (HyperText Transfer Protocol) define cómo se estructuran las peticiones y respuestas. Opera sobre TCP y suele usar los puertos 80 (sin cifrar) y 443 (HTTPS, cifrado TLS).

2.1 Métodos HTTP más comunes

2.2 Estructura de una solicitud HTTP

GET /index.html HTTP/1.1               
Host: www.ejemplo.com                  
User-Agent: Mozilla/5.0
Accept: text/html
Connection: keep-alive

2.3 Estructura de una respuesta HTTP

HTTP/1.1 200 OK                        
Date: Wed, 05 Jun 2024 10:00:00 GMT    
Content-Type: text/html; charset=UTF-8
Content-Length: 137




  
    
  
  
    
Hola, mundo!
    
Este es un ejemplo de respuesta HTTP.
  

3. Ciclo de vida de una petición

1. Resolución DNS: El navegador traduce el nombre de dominio a una dirección IP.
2. TCP Handshake: Cliente y servidor intercambian paquetes SYN, SYN-ACK, ACK.
3. Envío de la solicitud HTTP: Cliente envía petición.
4. Procesamiento en el servidor: Se lee la solicitud, se genera o recupera el recurso.
5. Envío de la respuesta HTTP: Servidor responde con cabeceras y cuerpo.
6. Renderizado: El cliente interpreta HTML, descarga CSS/JS/recursos adicionales.
7. Cierre o persistencia: Se cierra la conexión o se reutiliza (keep-alive).

4. Ejemplo práctico: Página HTML básica

Veamos un ejemplo de un archivo index.html que un servidor podría servir:

                         

  
    
    
  
  
    

      
Bienvenidos
    
    

      
Este es un sitio web de ejemplo que ilustra el flujo Cliente–Servidor.
      
    
    
  

5. Extensiones y optimizaciones

• Caching: Cabeceras Cache-Control y ETag permiten reutilizar recursos.
• Compresión: GZIP o Brotli reducen el tamaño de respuesta (cabecera Content-Encoding).
• HTTP/2 y HTTP/3: Mejoran rendimiento con multiplexado, priorización y compresión de cabeceras.
• HTTPS: Capa de cifrado TLS para seguridad e integridad de datos.

Conclusión

Entender el modelo cliente-servidor y el protocolo HTTP es fundamental para trabajar con HTML y desarrollar aplicaciones web eficientes y seguras. Cada petición implica un flujo detallado desde DNS hasta el renderizado final en el navegador, y conocer los componentes (métodos, cabeceras, códigos de estado) te permite optimizar y depurar tu sitio de manera efectiva.