Módulo 00: Introducción al desarrollo web

Objetivos del módulo

Entender qué es la web y en qué se diferencia de internet
Comprender el modelo cliente-servidor y qué ocurre cuando escribes una dirección en el navegador
Conocer el protocolo HTTP/HTTPS, sus métodos y sus códigos de estado
Saber leer y descomponer una URL en sus partes
Entender qué hace el DNS y por qué es imprescindible
Conocer los navegadores y sus motores de renderizado
Distinguir el papel de HTML, CSS y JavaScript en una página web
Diferenciar entre desarrollo front-end y back-end
Conocer quién define los estándares web (W3C y WHATWG)
Repasar la historia de HTML hasta HTML5 y de CSS hasta CSS3
Echar un primer vistazo al código de una página real

1. ¿Qué es la web?

Cada día usas la web decenas de veces: lees el periódico, consultas el tiempo, compras en una tienda online o ves un vídeo. Pero ¿qué es exactamente “la web”?

📘 Concepto: La World Wide Web (WWW, o simplemente “la web”) es un sistema de documentos y recursos enlazados entre sí (páginas, imágenes, vídeos, aplicaciones) a los que se accede a través de internet usando un navegador. Su pieza clave es el hipervínculo: un enlace que te lleva de un documento a otro con un solo clic.

Piensa en la web como una biblioteca gigantesca en la que cada libro (página) tiene notas al margen que te mandan directamente a otros libros de cualquier estantería del mundo. No necesitas saber dónde está físicamente ese libro: haces clic y aparece.

Los tres pilares de la web

La web se apoya en tres inventos que creó Tim Berners-Lee en el CERN entre 1989 y 1991:

Pilar	Qué es	Para qué sirve
HTML	HyperText Markup Language	Lenguaje para escribir los documentos (las páginas)
URL	Uniform Resource Locator	Dirección única de cada recurso en la web
HTTP	HyperText Transfer Protocol	Protocolo (conjunto de reglas) para pedir y enviar esos documentos

Treinta y cinco años después, estos tres pilares siguen siendo exactamente los mismos. Han evolucionado muchísimo, pero la idea original sigue intacta: documentos escritos en HTML, identificados por URLs y transferidos mediante HTTP.

2. Internet vs. web

Mucha gente usa “internet” y “la web” como sinónimos, pero no son lo mismo.

📘 Concepto: Internet es la infraestructura física y lógica: una red mundial de redes de ordenadores conectados entre sí mediante cables, fibra óptica, satélites y antenas, que se comunican usando el protocolo TCP/IP. La web es solo uno de los servicios que funcionan sobre internet.

Una analogía muy útil:

Internet es la red de carreteras: autopistas, rotondas, puentes y túneles.
La web es un tipo de vehículo que circula por esas carreteras (por ejemplo, los camiones de reparto).
Por las mismas carreteras circulan también otros vehículos: el correo electrónico, las videollamadas, los juegos online, la transferencia de ficheros…

Servicios que funcionan sobre internet

Servicio	Protocolo principal	Ejemplo
Web	HTTP / HTTPS	Navegar por `https://www.rae.es`
Correo electrónico	SMTP, IMAP, POP3	Enviar un email desde Thunderbird
Transferencia de ficheros	FTP, SFTP	Subir ficheros a un servidor
Acceso remoto	SSH	Administrar un servidor Linux
Resolución de nombres	DNS	Traducir `google.es` a una dirección IP
Videollamadas	WebRTC, SIP	Una reunión por videoconferencia

💡 Consejo: Cuando alguien te diga “se ha caído internet”, lo más probable es que se haya caído su conexión o un servicio concreto. Internet en su conjunto está diseñada para no caerse nunca: si un camino falla, los datos buscan otro.

Direcciones IP

Cada dispositivo conectado a internet tiene una dirección IP, que funciona como su “dirección postal”:

IPv4:  142.250.184.163            (4 números de 0 a 255 separados por puntos)
IPv6:  2a00:1450:4003:80c::2003   (8 grupos hexadecimales separados por dos puntos)

IPv4 solo permite unos 4.300 millones de direcciones, que se agotaron hace años. IPv6 permite tantas direcciones que podríamos asignar miles de millones a cada persona del planeta. Hoy conviven ambas versiones.

3. El modelo cliente-servidor

La web funciona según el modelo cliente-servidor.

📘 Concepto: Un cliente es el programa que pide un recurso (normalmente tu navegador). Un servidor es el ordenador (y el programa) que atiende esa petición y devuelve una respuesta. El cliente siempre inicia la conversación; el servidor espera y responde.

La analogía clásica es la de un restaurante:

Restaurante	Web
Tú, el cliente, sentado a la mesa	El navegador
La comanda que le das al camarero	La petición HTTP
La cocina	El servidor web
El plato que te traen	La respuesta HTTP (HTML, imágenes, CSS…)
La carta	Las URLs disponibles

¿Qué pasa cuando escribes una dirección en el navegador?

Este es el viaje completo, simplificado, desde que pulsas Intro hasta que ves la página:

sequenceDiagram
    participant U as Usuario
    participant N as Navegador
    participant D as Servidor DNS
    participant S as Servidor web
    U->>N: Escribe https://ejemplo.com y pulsa Intro
    N->>D: ¿Qué IP tiene ejemplo.com?
    D-->>N: 93.184.215.14
    N->>S: Conexión TCP + cifrado TLS
    N->>S: GET / HTTP/1.1
    S-->>N: 200 OK + documento HTML
    N->>S: GET /estilos.css y GET /logo.png
    S-->>N: 200 OK + CSS e imagen
    N->>U: Muestra la página renderizada

Paso a paso:

Escribes la URL https://ejemplo.com y pulsas Intro.
Resolución DNS: el navegador necesita la dirección IP del servidor, así que pregunta al DNS (lo veremos en la sección 6).
Conexión: el navegador abre una conexión con el servidor y, al ser HTTPS, negocia un canal cifrado con TLS.
Petición: el navegador envía una petición HTTP pidiendo la página.
Respuesta: el servidor devuelve un documento HTML.
Análisis: el navegador lee el HTML y descubre que necesita más recursos (hojas de estilo CSS, imágenes, scripts JavaScript) y los pide también.
Renderizado: con todo eso, el navegador “pinta” la página en tu pantalla.

⚠️ Importante: Una sola página web suele necesitar decenas de peticiones: una para el HTML y otras para cada hoja de estilos, cada imagen, cada fuente tipográfica y cada script. Por eso optimizar el número y el peso de los recursos es tan importante para la velocidad.

Páginas estáticas y dinámicas

Tipo	Cómo se genera	Ejemplo
Estática	El servidor envía un fichero `.html` tal cual está guardado en disco	Una web personal, la documentación de un proyecto, este curso
Dinámica	Un programa del servidor (PHP, Python, Java, Node.js…) genera el HTML en el momento, a menudo consultando una base de datos	Tu bandeja de Gmail, una tienda online, una red social

En ambos casos, lo que llega al navegador es siempre HTML, CSS y JavaScript. Por eso, aprendas el lenguaje de servidor que aprendas en el futuro, HTML y CSS te harán falta siempre.

4. HTTP y HTTPS

📘 Concepto: HTTP (HyperText Transfer Protocol) es el protocolo que define cómo se piden y se envían los recursos en la web. Es un protocolo de texto, basado en petición y respuesta, y sin estado (cada petición es independiente: el servidor no “recuerda” las anteriores por sí mismo).

Anatomía de una petición

Cuando tu navegador pide una página, envía un mensaje parecido a este:

GET /blog/articulo-1.html HTTP/1.1
Host: www.ejemplo.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/141.0
Accept: text/html,application/xhtml+xml
Accept-Language: es-ES,es;q=0.9

Parte	Significado
`GET`	Método: qué quiere hacer el cliente (aquí, obtener un recurso)
`/blog/articulo-1.html`	Ruta del recurso dentro del servidor
`HTTP/1.1`	Versión del protocolo
`Host`	Dominio al que va dirigida la petición
`User-Agent`	Identifica el navegador y el sistema operativo
`Accept`	Qué tipos de contenido acepta el cliente
`Accept-Language`	Idiomas preferidos del usuario

Anatomía de una respuesta

El servidor contesta con algo así:

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

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Mi artículo</title>
  ...

La respuesta tiene tres partes: la línea de estado (200 OK), las cabeceras (metadatos sobre la respuesta) y, tras una línea en blanco, el cuerpo (el contenido en sí, aquí el HTML).

Métodos HTTP más comunes

Método	Uso	Ejemplo típico
`GET`	Obtener un recurso	Abrir una página, cargar una imagen
`POST`	Enviar datos al servidor para que los procese	Enviar un formulario de registro
`PUT`	Reemplazar un recurso completo	Actualizar un perfil en una API
`PATCH`	Modificar parcialmente un recurso	Cambiar solo el email de un usuario
`DELETE`	Eliminar un recurso	Borrar un comentario
`HEAD`	Como GET, pero solo devuelve cabeceras	Comprobar si un fichero existe

💡 Consejo: Como maquetador HTML usarás sobre todo GET y POST, que son los dos métodos que admiten los formularios HTML. Los verás a fondo en el módulo de formularios.

Códigos de estado

Cada respuesta incluye un código de estado de tres cifras. La primera cifra indica la familia:

Familia	Significado	Códigos frecuentes
1xx	Informativo	`101 Switching Protocols`
2xx	Éxito	`200 OK`, `201 Created`, `204 No Content`
3xx	Redirección	`301 Moved Permanently`, `302 Found`, `304 Not Modified`
4xx	Error del cliente	`400 Bad Request`, `401 Unauthorized`, `403 Forbidden`, `404 Not Found`
5xx	Error del servidor	`500 Internal Server Error`, `502 Bad Gateway`, `503 Service Unavailable`

💡 Consejo: Una regla mnemotécnica: los 4xx son culpa tuya (pediste algo que no existe o no tienes permiso) y los 5xx son culpa del servidor (algo se ha roto allí).

Versiones de HTTP

Versión	Año	Novedad principal
HTTP/0.9	1991	Solo `GET`, solo HTML, sin cabeceras
HTTP/1.0	1996	Cabeceras, códigos de estado, otros tipos de contenido
HTTP/1.1	1997	Conexiones persistentes, cabecera `Host` obligatoria
HTTP/2	2015	Protocolo binario, múltiples peticiones simultáneas por una conexión
HTTP/3	2022	Funciona sobre QUIC (UDP), más rápido en redes inestables como el móvil

No tienes que hacer nada especial para usar HTTP/2 o HTTP/3: el navegador y el servidor lo negocian automáticamente.

HTTPS: HTTP seguro

📘 Concepto: HTTPS es HTTP cifrado mediante TLS (Transport Layer Security). Garantiza tres cosas: confidencialidad (nadie en medio puede leer los datos), integridad (nadie puede modificarlos por el camino) y autenticidad (estás hablando con el servidor real, gracias a un certificado digital).

Con HTTP plano, tus datos viajan como una postal: cualquiera que la manipule por el camino puede leerla. Con HTTPS viajan como una carta en un sobre lacrado: solo el destinatario puede abrirla, y si alguien rompe el lacre, se nota.

Aspecto	HTTP	HTTPS
Puerto por defecto	80	443
Cifrado	No	Sí (TLS)
Certificado	No necesita	Necesita certificado (gratuito con Let’s Encrypt)
Indicador en el navegador	“No seguro”	Icono de candado o de ajustes del sitio
SEO	Penalizado	Favorecido por los buscadores
APIs modernas (geolocalización, cámara, Service Workers)	No disponibles	Disponibles

⚠️ Importante: Hoy toda web debe servirse por HTTPS, aunque no maneje datos sensibles. Los navegadores marcan como “No seguro” las páginas HTTP y muchas funciones modernas solo funcionan en contextos seguros. La excepción es localhost, que los navegadores tratan como seguro para que puedas desarrollar cómodamente.

5. Las URLs

📘 Concepto: Una URL (Uniform Resource Locator) es la dirección única de un recurso en la web. Igual que una dirección postal indica país, ciudad, calle y número, una URL indica protocolo, servidor, ruta y otros detalles.

Partes de una URL

Analicemos esta URL completa:

https://www.tienda.es:443/productos/zapatillas.html?color=rojo&talla=42#opiniones
└─┬─┘   └─────┬─────┘└┬┘└───────────┬───────────┘└──────────┬─────────┘└───┬────┘
esquema     host    puerto        ruta                 consulta         fragmento

Parte	Valor en el ejemplo	Descripción
Esquema	`https`	Protocolo que se usará
Host	`www.tienda.es`	Nombre del servidor (dominio)
Puerto	`443`	“Puerta” del servidor; se omite si es la de por defecto (80 en HTTP, 443 en HTTPS)
Ruta	`/productos/zapatillas.html`	Ubicación del recurso dentro del servidor
Consulta (query string)	`?color=rojo&talla=42`	Parámetros en pares `clave=valor` separados por `&`
Fragmento (hash)	`#opiniones`	Sección concreta dentro de la página; no se envía al servidor

Anatomía del dominio

El host www.tienda.es también tiene estructura, y se lee de derecha a izquierda:

Parte	Nombre	Ejemplo
`.es`	Dominio de primer nivel (TLD)	`.es`, `.com`, `.org`, `.dev`, `.eu`
`tienda`	Dominio de segundo nivel	El nombre que registras
`www`	Subdominio	`www`, `blog`, `api`, `tienda`

Caracteres especiales en las URLs

Las URLs solo admiten ciertos caracteres. Los espacios, las tildes y otros símbolos se codifican con % seguido de su código hexadecimal:

Texto original:   /buscar?q=camión rojo
URL codificada:   /buscar?q=cami%C3%B3n%20rojo

💡 Consejo: Esta es una de las razones por las que, en el próximo módulo, aprenderás a nombrar tus ficheros sin espacios, sin tildes y en minúsculas: sobre-nosotros.html es mucho mejor que Sobre Nosotros.html.

✏️ Ejercicio: Copia la URL de cualquier búsqueda que hagas en tu buscador favorito y pégala en un editor de texto. Identifica el esquema, el host, la ruta y los parámetros de la consulta. ¿Qué parámetro contiene el texto que buscaste?

6. El DNS: la agenda telefónica de internet

Los ordenadores se comunican mediante direcciones IP, pero a las personas nos resulta mucho más fácil recordar wikipedia.org que 185.15.59.224.

📘 Concepto: El DNS (Domain Name System) es un sistema distribuido que traduce nombres de dominio en direcciones IP. Funciona como la agenda de contactos de tu móvil: tú buscas “Mamá” y el teléfono marca el número correspondiente.

Cómo se resuelve un nombre

flowchart LR
    A[Navegador] -->|"¿IP de blog.ejemplo.es?"| B[Resolutor DNS<br/>de tu proveedor]
    B -->|1| C[Servidor raíz]
    C -->|"pregunta a los de .es"| B
    B -->|2| D[Servidor TLD .es]
    D -->|"pregunta a ns1.ejemplo.es"| B
    B -->|3| E[Servidor autoritativo<br/>de ejemplo.es]
    E -->|"203.0.113.25"| B
    B -->|"203.0.113.25"| A

El navegador mira primero en su caché y en la del sistema operativo. Si ya conoce la IP, no pregunta.
Si no, pregunta al resolutor DNS (normalmente el de tu proveedor de internet, o uno público como 1.1.1.1 o 8.8.8.8).
El resolutor pregunta a un servidor raíz, que le indica quién gestiona .es.
El servidor TLD de .es le indica qué servidor es el autoritativo para ejemplo.es.
El servidor autoritativo devuelve la IP definitiva.
El resolutor guarda la respuesta en caché durante un tiempo (el TTL, Time To Live) y se la entrega al navegador.

Todo esto ocurre en milisegundos.

Tipos de registros DNS

Cuando en el futuro publiques una web con dominio propio, tendrás que configurar registros como estos:

Registro	Para qué sirve	Ejemplo
`A`	Asocia un dominio a una IPv4	`ejemplo.es → 203.0.113.25`
`AAAA`	Asocia un dominio a una IPv6	`ejemplo.es → 2001:db8::25`
`CNAME`	Alias de otro dominio	`www.ejemplo.es → ejemplo.es`
`MX`	Servidor de correo del dominio	`ejemplo.es → mail.ejemplo.es`
`TXT`	Texto libre (verificaciones, políticas antispam)	`v=spf1 include:...`

💻 Ejemplo: Puedes consultar el DNS tú mismo desde la terminal de Windows (PowerShell):

# Pregunta qué IP tiene un dominio
nslookup wikipedia.org

# Salida aproximada (las IPs pueden variar según tu ubicación):
# Nombre:   wikipedia.org
# Addresses:  2a02:ec80:600:ed1a::1
#             185.15.59.224

7. Navegadores y motores de renderizado

📘 Concepto: Un navegador es el programa cliente que pide recursos web y los interpreta para mostrarlos. Su pieza central es el motor de renderizado, que convierte el HTML y el CSS en píxeles en la pantalla, y el motor de JavaScript, que ejecuta los scripts.

Principales navegadores y sus motores

Navegador	Motor de renderizado	Motor de JavaScript	Empresa
Google Chrome	Blink	V8	Google
Microsoft Edge	Blink	V8	Microsoft
Opera, Brave, Vivaldi	Blink	V8	Varias
Mozilla Firefox	Gecko	SpiderMonkey	Mozilla
Apple Safari	WebKit	JavaScriptCore	Apple

Fíjate en algo importante: aunque existen muchos navegadores, solo hay tres grandes motores. Blink (un derivado de WebKit creado por Google en 2013) domina la mayor parte del mercado.

⚠️ Importante: En iPhone y iPad, durante muchos años todos los navegadores (incluidos Chrome y Firefox) han estado obligados a usar WebKit por debajo. Por eso probar en Safari es imprescindible: si algo falla en Safari, puede fallar para todos tus usuarios de iOS.

Cómo renderiza un navegador una página

El proceso que sigue el motor de renderizado se suele llamar ruta crítica de renderizado (critical rendering path):

flowchart LR
    A[HTML] --> B[DOM]
    C[CSS] --> D[CSSOM]
    B --> E[Árbol de<br/>renderizado]
    D --> E
    E --> F[Layout<br/>cálculo de posiciones]
    F --> G[Paint<br/>pintado]
    G --> H[Composite<br/>composición de capas]

Fase	Qué ocurre
Parseo HTML → DOM	El navegador lee el HTML y construye un árbol de objetos llamado DOM (Document Object Model)
Parseo CSS → CSSOM	Hace lo mismo con el CSS, creando el CSSOM
Árbol de renderizado	Combina ambos: solo los elementos visibles, con sus estilos calculados
Layout	Calcula el tamaño y la posición exacta de cada caja en la pantalla
Paint	Pinta los píxeles: textos, colores, bordes, sombras, imágenes
Composite	Junta las distintas capas en el orden correcto y las muestra

💡 Consejo: No necesitas memorizar estas fases ahora. Basta con que te quede una idea: el navegador transforma tu código en un árbol (el DOM) y luego lo pinta. Cuando en módulos posteriores hablemos de “elementos padre e hijo” o de animaciones eficientes, recordarás este diagrama.

Compatibilidad entre navegadores

Cada navegador implementa las novedades de HTML y CSS a su ritmo. Para saber si puedes usar una característica, existen dos recursos fundamentales:

Can I use (caniuse.com): tablas de compatibilidad por navegador y versión.
MDN Web Docs (developer.mozilla.org): la documentación de referencia, con tablas de compatibilidad al final de cada página y la etiqueta Baseline.

📘 Concepto: Baseline es una iniciativa conjunta de los fabricantes de navegadores que indica si una característica funciona en todos los navegadores principales. “Baseline: disponible de forma generalizada” significa que puedes usarla sin miedo; “Baseline: recientemente disponible” significa que ya funciona en los navegadores actuales, pero quizá no en versiones antiguas.

8. HTML, CSS y JavaScript: el trío del front-end

Toda página web que ves está construida, en el navegador, con tres lenguajes complementarios. Cada uno tiene una responsabilidad muy clara.

Lenguaje	Responsabilidad	Analogía con una casa	Analogía con el cuerpo humano
HTML	Estructura y contenido: qué hay en la página y qué significa cada cosa	Los cimientos, paredes y habitaciones	El esqueleto
CSS	Presentación: cómo se ve (colores, tipografía, distribución, animaciones)	La pintura, los muebles y la decoración	La piel, el pelo y la ropa
JavaScript	Comportamiento: qué pasa cuando el usuario interactúa	La electricidad, la fontanería y la domótica	Los músculos y el sistema nervioso

El mismo botón, en tres capas

💻 Ejemplo: Un botón que muestra un saludo. Primero solo con HTML (estructura):

<button id="saludar">Saludar</button>

Añadimos CSS (presentación):

#saludar {
  background-color: #2563eb; /* Azul */
  color: white;              /* Texto blanco */
  padding: 12px 24px;        /* Espacio interior */
  border: none;              /* Sin borde */
  border-radius: 8px;        /* Esquinas redondeadas */
  font-size: 1rem;
  cursor: pointer;           /* Cursor de "mano" al pasar por encima */
}

Y JavaScript (comportamiento):

// Cuando se haga clic en el botón, muestra un mensaje
document.querySelector("#saludar").addEventListener("click", () => {
  alert("¡Hola! Bienvenido al curso.");
});

Juntos en un único fichero saludo.html:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Mi primer botón</title>
    <style>
      #saludar {
        background-color: #2563eb;
        color: white;
        padding: 12px 24px;
        border: none;
        border-radius: 8px;
        font-size: 1rem;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button id="saludar">Saludar</button>

    <script>
      document.querySelector("#saludar").addEventListener("click", () => {
        alert("¡Hola! Bienvenido al curso.");
      });
    </script>
  </body>
</html>

Resultado esperado: al abrir el fichero en el navegador verás un botón azul con esquinas redondeadas. Al pulsarlo, aparece una ventana con el mensaje “¡Hola! Bienvenido al curso.”.

Separación de responsabilidades

⚠️ Importante: Un principio fundamental del desarrollo web es la separación de responsabilidades: el HTML describe qué es cada cosa, el CSS decide cómo se ve y el JavaScript define qué hace. No uses HTML para conseguir efectos visuales (por ejemplo, poner un encabezado solo porque “queda grande”) ni CSS para meter contenido importante.

En el ejemplo anterior pusimos todo en un fichero por comodidad, pero en proyectos reales cada lenguaje va en su propio fichero (index.html, estilos.css, app.js). Lo verás en el próximo módulo.

¿Son lenguajes de programación?

Lenguaje	Tipo	¿Es de programación?
HTML	Lenguaje de marcado	No: describe contenido, no tiene variables, bucles ni condiciones
CSS	Lenguaje de hojas de estilo	No en sentido clásico, aunque cada vez es más potente (variables, funciones, condiciones con `@media`)
JavaScript	Lenguaje de programación	Sí: tiene variables, funciones, condiciones, bucles, objetos…

💡 Consejo: Este curso se centra en HTML y CSS (y en Bootstrap, que es un framework de CSS con algo de JavaScript ya hecho). No necesitas saber JavaScript para seguirlo. Cuando domines HTML y CSS, JavaScript será el paso natural siguiente.

9. Front-end vs. back-end

El desarrollo web se divide tradicionalmente en dos grandes áreas:

flowchart LR
    subgraph FE["Front-end (cliente)"]
        A[HTML] --- B[CSS] --- C[JavaScript]
    end
    subgraph BE["Back-end (servidor)"]
        D["Lenguaje de servidor<br/>PHP, Python, Java, .NET, Node.js"] --- E[(Base de datos)]
    end
    FE <-->|HTTP| BE

Aspecto	Front-end	Back-end
Dónde se ejecuta	En el navegador del usuario	En el servidor
Qué hace	Interfaz, diseño, interacción, accesibilidad	Lógica de negocio, datos, seguridad, autenticación
Tecnologías	HTML, CSS, JavaScript, frameworks como React, Vue, Angular, Bootstrap, Tailwind	PHP (Symfony, Laravel), Python (Django), Java (Spring), C# (.NET), Node.js
Preguntas típicas	¿Se ve bien en el móvil? ¿Es accesible? ¿Carga rápido?	¿Se guardan bien los datos? ¿Es seguro? ¿Escala con muchos usuarios?
Analogía (restaurante)	La sala: decoración, mesas, carta, camareros	La cocina, la despensa y la gestión del almacén

Un desarrollador full-stack es quien trabaja en ambos lados. Existen también perfiles especializados como maquetador web (HTML y CSS), diseñador UI/UX o especialista en accesibilidad.

💡 Consejo: Aunque tu objetivo final sea el back-end, dominar HTML y CSS es imprescindible: todo lo que genere tu servidor acabará siendo HTML que alguien debe estructurar bien.

10. Los estándares web: W3C y WHATWG

Si cada navegador interpretase HTML a su manera, una página se vería distinta en cada uno. Para evitarlo existen los estándares web: especificaciones públicas que describen con precisión cómo debe comportarse cada etiqueta y cada propiedad.

📘 Concepto: Un estándar web es un documento técnico, abierto y consensuado, que define cómo funciona una tecnología de la web. Los navegadores lo implementan y los desarrolladores lo usan como referencia. Gracias a ellos, el mismo código funciona en Chrome, Firefox y Safari.

Las organizaciones

Organización	Qué es	Qué estandariza
W3C (World Wide Web Consortium)	Consorcio fundado en 1994 por Tim Berners-Lee	CSS, accesibilidad (WCAG, WAI-ARIA), SVG, muchas APIs
WHATWG (Web Hypertext Application Technology Working Group)	Grupo fundado en 2004 por Apple, Mozilla y Opera (después se unieron Google y Microsoft)	HTML (Living Standard), DOM, Fetch, URL
Ecma International (comité TC39)	Organización de estándares	ECMAScript, el estándar de JavaScript
IETF (Internet Engineering Task Force)	Organización de estándares de internet	HTTP, TLS, DNS, TCP/IP

El “HTML Living Standard”

📘 Concepto: Desde 2019, la especificación oficial de HTML es el HTML Living Standard que mantiene el WHATWG. Es un estándar “vivo”: no tiene números de versión, sino que se actualiza continuamente cuando se añaden o mejoran características. El W3C y el WHATWG acordaron ese año trabajar sobre un único documento.

Esto significa que, técnicamente, ya no existe “HTML6” ni existirá: hablamos simplemente de HTML (y por costumbre seguimos llamando “HTML5” al HTML moderno).

💡 Consejo: Para el día a día no necesitas leer la especificación, que es muy técnica. Usa MDN Web Docs (developer.mozilla.org/es), que explica cada etiqueta y propiedad con ejemplos y tablas de compatibilidad. Es la referencia que usan los profesionales.

11. Breve historia de HTML y CSS

Conocer la historia te ayuda a entender por qué ciertas cosas son como son, y por qué encontrarás en internet código “antiguo” que no debes imitar.

Historia de HTML

Año	Versión / hito	Qué aportó
1989	Propuesta de Tim Berners-Lee en el CERN	La idea de un sistema de hipertexto para compartir documentos científicos
1991	Primera web pública (`info.cern.ch`)	Unas 18 etiquetas básicas: títulos, párrafos, enlaces, listas
1995	HTML 2.0	Primer estándar formal; incluía formularios
1997	HTML 3.2	Tablas, applets y etiquetas de presentación como `<font>` y `<center>`
1999	HTML 4.01	Separación de estructura y presentación; se recomienda usar CSS
2000	XHTML 1.0	HTML reformulado con la sintaxis estricta de XML
2004	Nace el WHATWG	Los navegadores, descontentos con XHTML 2.0, empiezan “Web Applications 1.0”
2008	Primer borrador de HTML5	Etiquetas semánticas, audio y vídeo nativos, nuevos formularios, canvas
2014	HTML5 Recomendación del W3C	Versión oficial y estable
2019	HTML Living Standard	W3C y WHATWG unifican esfuerzos en un único estándar vivo

La “guerra de los navegadores” y sus cicatrices

A finales de los 90, Netscape Navigator e Internet Explorer competían añadiendo etiquetas propias que solo funcionaban en su navegador (<blink>, <marquee>…). Las webs mostraban carteles del tipo “Optimizada para Internet Explorer a 800x600”. Además, el diseño se hacía con tablas y etiquetas como <font>, mezclando contenido y presentación.

⚠️ Importante: Si encuentras en internet tutoriales que usan <font>, <center>, <marquee>, atributos como bgcolor o align, o maquetan con tablas, son obsoletos. HTML moderno describe el contenido y deja toda la presentación al CSS.

¿Qué trajo HTML5?

Novedad	Ejemplos
Doctype simplificado	`<!DOCTYPE html>` en lugar de líneas larguísimas
Etiquetas semánticas	`<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<footer>`
Multimedia nativa	`<audio>` y `<video>` sin necesidad de plugins como Flash
Gráficos	`<canvas>` y SVG integrado en HTML
Formularios mejorados	Tipos `email`, `date`, `number`, `range`, `color`; validación nativa con `required` y `pattern`
APIs de JavaScript	Geolocalización, almacenamiento local, arrastrar y soltar, Web Workers…
Reglas de parseo comunes	Todos los navegadores interpretan igual incluso el HTML mal escrito

Historia de CSS

Año	Versión / hito	Qué aportó
1994	Propuesta de Håkon Wium Lie	La idea de “hojas de estilo en cascada” separadas del HTML
1996	CSS1	Fuentes, colores, márgenes, alineación de texto
1998	CSS2	Posicionamiento (`position`), `z-index`, tipos de medios
2011	CSS 2.1 Recomendación	Revisión que corrige y estabiliza CSS2
2011 en adelante	CSS3 (módulos)	CSS se divide en módulos independientes: selectores, colores, fondos y bordes, transiciones, animaciones, Flexbox, Grid…
Hoy	CSS moderno	Variables, anidamiento, `:has()`, container queries, capas de cascada, `clamp()`

📘 Concepto: CSS3 no es una versión única, sino un conjunto de módulos que evolucionan por separado (cada uno con su propio “nivel”: Selectors Level 4, Color Level 4…). Por eso no existe “CSS4” como tal. Cuando hablamos de “CSS3” nos referimos, en la práctica, al CSS moderno.

Y JavaScript

JavaScript nació en 1995 en Netscape, creado por Brendan Eich en apenas diez días. Su nombre se eligió por marketing (Java estaba de moda), pero no tiene nada que ver con Java. Hoy está estandarizado como ECMAScript y publica una edición nueva cada año.

12. Primer vistazo a una página web

Antes de escribir tu primera página en el próximo módulo, vamos a “espiar” cómo está hecha una real.

Ver el código fuente

En cualquier navegador de escritorio:

Acción	Atajo (Windows / Linux)	Atajo (macOS)
Ver código fuente	`Ctrl + U`	`Cmd + Option + U`
Abrir herramientas de desarrollo	`F12` o `Ctrl + Shift + I`	`Cmd + Option + I`
Inspeccionar un elemento concreto	Clic derecho → Inspeccionar	Clic derecho → Inspeccionar

✏️ Ejercicio: Abre la página de la Wikipedia en español y pulsa Ctrl + U. Verás un montón de código. No te asustes: busca (con Ctrl + F) las palabras <title>, <h1> y <p>. Acabas de encontrar el título de la página, su encabezado principal y sus párrafos.

Una página mínima comentada

Este es el esqueleto que tendrá prácticamente cualquier página que escribas durante el curso. No hace falta que lo entiendas todo ahora: lo diseccionaremos en el módulo 02.

<!DOCTYPE html>                  <!-- 1. Le dice al navegador que es HTML moderno -->
<html lang="es">                 <!-- 2. Raíz del documento; idioma: español -->
  <head>                         <!-- 3. Información SOBRE la página (no se ve) -->
    <meta charset="UTF-8">       <!--    Codificación: permite tildes y eñes -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mi primera página</title>  <!-- Texto de la pestaña del navegador -->
  </head>
  <body>                         <!-- 4. Contenido VISIBLE de la página -->
    <h1>¡Hola, mundo!</h1>       <!--    Encabezado principal -->
    <p>Esta es mi primera página web.</p>  <!-- Un párrafo -->
    <a href="https://developer.mozilla.org/es/">Aprende más en MDN</a>  <!-- Un enlace -->
  </body>
</html>

Resultado esperado: en la pestaña del navegador aparece “Mi primera página”. En la ventana se ve un título grande “¡Hola, mundo!”, debajo un párrafo y un enlace subrayado en azul que lleva a MDN.

Etiquetas: la idea clave

📘 Concepto: HTML funciona con etiquetas que “envuelven” el contenido para indicar qué es. Casi todas tienen una etiqueta de apertura y otra de cierre (con barra /). Por ejemplo, <p> abre un párrafo y </p> lo cierra. El conjunto formado por la etiqueta de apertura, el contenido y la etiqueta de cierre se llama elemento.

   etiqueta de apertura      contenido       etiqueta de cierre
          ┌─┴─┐       ┌─────────┴────────┐     ┌─┴──┐
          <p>         Esto es un párrafo.      </p>
          └──────────────────┬───────────────────────┘
                          elemento

El DOM en las DevTools

Si abres las herramientas de desarrollo (F12) en la pestaña Elements (o Inspector en Firefox), verás el DOM: el árbol que el navegador ha construido a partir del HTML. Para la página mínima anterior, el árbol sería:

flowchart TD
    A[html] --> B[head]
    A --> C[body]
    B --> D[meta charset]
    B --> E[meta viewport]
    B --> F[title]
    C --> G[h1]
    C --> H[p]
    C --> I[a]

💡 Consejo: Desde las DevTools puedes modificar el HTML y el CSS de cualquier página en directo (solo en tu navegador; al recargar vuelve a la normalidad). Prueba a hacer doble clic en el texto de un titular de un periódico online y cambiarlo. Es una forma estupenda de experimentar sin miedo.

13. Buenas prácticas y errores comunes de principiante

Mentalidad correcta desde el primer día

Buena práctica	Por qué
Escribe HTML semántico (cada etiqueta por su significado)	Mejora la accesibilidad, el SEO y el mantenimiento
Separa HTML, CSS y JavaScript	Cada cosa en su sitio: más fácil de mantener y reutilizar
Piensa en todos los usuarios	Personas con discapacidad, móviles lentos, pantallas pequeñas
Consulta MDN antes que tutoriales aleatorios	Información fiable y actualizada
Valida tu código	Detectarás errores que el navegador “perdona” pero que causan problemas
Prueba en varios navegadores	Chrome, Firefox y Safari pueden comportarse distinto

Errores comunes

Error	Solución
Confundir internet con la web	Internet es la red; la web es un servicio sobre ella
Pensar que HTML sirve para “dar formato”	HTML estructura; el formato es trabajo del CSS
Copiar código antiguo con `<font>`, `<center>` o tablas para maquetar	Usa HTML5 semántico y CSS moderno (Flexbox, Grid)
Creer que si se ve bien en tu navegador, está bien	Valida el código y prueba en otros navegadores y en móvil
Usar espacios y tildes en los nombres de fichero	Usa minúsculas, guiones y sin tildes: `contacto.html`
Servir una web por HTTP	Usa siempre HTTPS (gratis con Let’s Encrypt o en GitHub Pages)

⚠️ Importante: El navegador es muy tolerante con los errores de HTML: si olvidas cerrar una etiqueta, intentará adivinar lo que querías. Eso parece una ventaja, pero esconde fallos que luego aparecen en otro navegador, en un lector de pantalla o al aplicar CSS. No te fíes de que “se vea bien”.

14. Ejercicios

Ejercicio 1: Internet o web

Clasifica cada una de estas actividades según usen la web (HTTP/HTTPS en un navegador) u otro servicio de internet: enviar un email desde un programa de correo de escritorio, ver un vídeo en YouTube desde el navegador, jugar online a un videojuego de consola, consultar la Wikipedia, conectarte por SSH a un servidor, hacer una videollamada desde una app móvil. Justifica tu respuesta en una frase para cada una.

Ejercicio 2: Disecciona URLs

Descompón estas URLs en esquema, host, puerto (indica el implícito si no aparece), ruta, consulta y fragmento:

https://developer.mozilla.org/es/docs/Web/HTML/Element/a#atributos
http://localhost:5500/proyectos/index.html
https://www.tienda.es/buscar?q=portatil&orden=precio&pagina=2

Responde además: ¿qué parte de la primera URL no llega nunca al servidor?

Ejercicio 3: Observa el tráfico HTTP

Abre las DevTools (F12), ve a la pestaña Network (Red) y recarga una página de un periódico digital. Anota:

Cuántas peticiones se hacen en total (aparece abajo, en la barra de estado).
El código de estado de la primera petición (el documento HTML).
Tres tipos de recursos distintos que se descargan (por ejemplo: document, stylesheet, script, img, font).
El peso total transferido.

Ejercicio 4: Provoca errores HTTP

Escribe en el navegador la dirección de una página que no exista en un sitio real (por ejemplo, añade /esta-pagina-no-existe al final de un dominio conocido). Con la pestaña Network abierta, comprueba qué código de estado devuelve el servidor. Después, compara el diseño de la página de error 404 de tres sitios web distintos.

Ejercicio 5: Consulta el DNS

Usando nslookup en PowerShell, obtén la dirección IP de tres dominios distintos (por ejemplo, el de tu universidad, un periódico y una red social). ¿Alguno devuelve varias direcciones IP? ¿Alguno devuelve direcciones IPv6? Investiga por qué un mismo dominio puede tener varias IPs.

Ejercicio 6: Tu primera página “a mano”

Sin instalar nada todavía, abre el Bloc de notas de Windows, copia la página mínima de la sección 12 y cambia el título y el contenido por tu nombre y una frase sobre ti. Guárdala como hola.html asegurándote de elegir Codificación: UTF-8 y Tipo: Todos los archivos. Haz doble clic en el fichero para abrirlo en el navegador. Después, ábrelo con las DevTools y localiza tu <h1> en la pestaña Elements.

Ejercicio 7: Investiga la compatibilidad

Busca en caniuse.com las siguientes características y anota si son utilizables hoy en Chrome, Firefox y Safari: CSS Grid, CSS Nesting, :has(), dialog element y AVIF images. Repite la búsqueda en MDN y fíjate en la etiqueta Baseline.

Resumen

Concepto	Idea clave
Internet	Red mundial de redes; la infraestructura (TCP/IP)
Web	Servicio sobre internet: documentos HTML enlazados, accesibles con un navegador
Cliente-servidor	El cliente (navegador) pide; el servidor responde
HTTP	Protocolo de petición/respuesta, sin estado
HTTPS	HTTP cifrado con TLS; obligatorio en la web actual
Métodos HTTP	`GET` (obtener), `POST` (enviar), `PUT`, `PATCH`, `DELETE`
Códigos de estado	2xx éxito, 3xx redirección, 4xx error del cliente, 5xx error del servidor
URL	`esquema://host:puerto/ruta?consulta#fragmento`
DNS	Traduce nombres de dominio a direcciones IP
Motores de renderizado	Blink (Chrome, Edge), Gecko (Firefox), WebKit (Safari)
DOM	Árbol de objetos que el navegador construye a partir del HTML
HTML	Estructura y contenido (esqueleto)
CSS	Presentación (piel y ropa)
JavaScript	Comportamiento (músculos)
Front-end / back-end	Navegador / servidor
W3C	Estandariza CSS, accesibilidad (WCAG, ARIA)
WHATWG	Mantiene el HTML Living Standard
HTML5	Semántica, multimedia nativa, formularios mejorados, doctype simple
CSS3	CSS dividido en módulos independientes; no existe “CSS4”

Navegación
← Inicio del curso	Siguiente módulo: Entorno de trabajo →