Cómo funciona la Web

Una página web en tu pantalla es el resultado del trabajo en dos lugares. Tu navegador solicita recursos y un servidor envía respuestas. Estas funciones explican tanto un sitio personal sencillo como una página creada a partir de varios servicios.

Quién solicita y quién responde

Un cliente es un dispositivo y un programa que solicita algo. Chrome, Edge, Firefox y Safari son clientes de navegador. Un servidor es una computadora que ejecuta software que acepta solicitudes y devuelve archivos almacenados o contenido que genera. Apache y nginx son ejemplos de software de servidor web. La palabra «servidor» puede nombrar la computadora o ese software.

En un intercambio HTTP, el cliente envía una solicitud que indica lo que quiere. El servidor envía una respuesta a esa solicitud. Imagina que pides comida en un mostrador: la nota del pedido solicita algo y la bandeja es la respuesta. El navegador inicia el intercambio; una respuesta ordinaria de página contesta a una solicitud.

Cliente y servidor son funciones, no tipos fijos de máquina. Una computadora portátil puede ejecutar tanto tu navegador como un servidor de prueba. Un sitio está alojado cuando un servidor accesible pone sus recursos a disposición. Un servidor al que se accede mediante localhost se ejecuta en tu propia computadora; esa dirección no lleva el navegador de otra persona a tu computadora portátil.

Una página es una colección de recursos

Un recurso es algo que una dirección puede identificar: una página, hoja de estilo, script, imagen, fuente, vídeo o dato. La primera solicitud de una página suele obtener HTML. El navegador lee ese HTML para descubrir los demás recursos que necesita y solicita cada uno por separado.

Por ejemplo, un artículo indica dos hojas de estilo, un script y cinco imágenes. Cuenta también el HTML:

• Un recurso HTML inicia la página.
• Dos recursos CSS proporcionan sus estilos.
• Un recurso JavaScript proporciona comportamiento.
• Cinco recursos de imagen proporcionan las imágenes.

Eso da nueve recursos y, con la caché del navegador vacía, nueve solicitudes HTTP para esos recursos. Una caché guarda copias descargadas para reutilizarlas. Los archivos vigentes en caché pueden reducir las solicitudes que viajan por la red en otra visita.

Los recursos no tienen que compartir un servidor. El HTML podría proceder de www.example.com, las imágenes de images.example.net y un vídeo de otro servicio. La dirección de cada recurso indica al navegador dónde solicitarlo. Por tanto, una solicitud de HTML satisfactoria no garantiza que también se haya cargado cada imagen o script.

Archivos almacenados y respuestas generadas

En ambos casos, el navegador recibe recursos que puede leer o mostrar. Una página HTML generada sigue siendo HTML cuando llega al navegador. El navegador guarda copias descargadas, mientras que el servidor conserva los archivos originales del sitio o el programa que los genera.

La Web funciona sobre Internet

Internet es la red mundial que transporta datos entre computadoras. La Web es un servicio que usa esa red: recursos vinculados, identificados mediante URL e intercambiados por HTTP. El correo electrónico, los juegos en línea y las videollamadas también usan Internet. La Web es un uso de la red, no el nombre de todas las actividades que se realizan en ella.

Pulsar Enter en una dirección web inicia varias tareas. Cada una cumple una función distinta, por lo que un fallo en una etapa deja indicios diferentes de un fallo en otra.

Interpretar la dirección y encontrar el servidor

Toma https://www.example.com/news.html. El navegador interpreta https como el esquema, www.example.com como el anfitrión y /news.html como la ruta solicitada. Un texto como «el tiempo mañana» normalmente se trata como una búsqueda y se envía al buscador predeterminado.

El navegador necesita una dirección IP, una dirección de red numérica como 203.0.113.10 o el ejemplo de IPv6 2001:db8::1. DNS, el sistema de nombres de dominio, encuentra las direcciones asociadas a los nombres de dominio. El navegador y el sistema operativo pueden reutilizar una respuesta DNS reciente de una caché, por lo que no es necesario hacer una nueva consulta en cada visita a una página.

Conectar y proteger el intercambio

El navegador se conecta al servidor. Para HTTPS, establece una conexión cifrada mediante TLS. El servidor presenta un certificado digital que permite al navegador comprobar su identidad para el dominio solicitado. El cifrado protege los mensajes para que otras personas en la red no puedan leerlos ni modificarlos. Un indicador de conexión segura describe esa protección; un sitio fraudulento también puede tener un certificado válido.

Los datos viajan por la red en pequeñas partes llamadas paquetes, a través de dispositivos llamados enrutadores, y se vuelven a unir en el destino. El navegador y el sistema operativo se encargan de ese transporte mientras el navegador trabaja con los mensajes HTTP.

Solicitar, recibir y construir

1. El navegador envía una solicitud HTTP para /news.html.
2. El servidor responde con un código de estado, cabeceras que describen la respuesta y, normalmente, un cuerpo que contiene el HTML.
3. El navegador lee el HTML y solicita las hojas de estilo, los scripts, las imágenes y los demás recursos que este indica.
4. Construye la página, aplica estilos, ejecuta scripts y dibuja el contenido en pantalla.

Varias solicitudes de recursos pueden solaparse. El navegador puede mostrar texto antes de que terminen de descargarse todas las imágenes; la página se construye progresivamente.

Para una página pequeña en https://example.org/, supón que el HTML solo indica style.css y logo.png, ambos en el mismo anfitrión. Sin entradas pertinentes en caché, un anfitrión necesita una consulta DNS y los tres recursos necesitan tres solicitudes HTTP. En una visita posterior, una respuesta DNS en caché evita esa consulta. Las copias vigentes de recursos pueden reutilizarse y las copias más antiguas pueden comprobarse con el servidor. Una respuesta 304 Not Modified significa que una copia almacenada sigue vigente y no es necesario volver a enviar el cuerpo del archivo.

Localizar un fallo por sus indicios

Un fallo de DNS no tiene código de estado HTTP porque no llegó ninguna respuesta HTTP. Un 404 es distinto: el servidor respondió. Chrome puede mostrar un error de nombre como DNS_PROBE_FINISHED_NXDOMAIN, pero el texto es un mensaje del navegador, no una respuesta del servidor.

Una URL, o localizador uniforme de recursos, identifica un recurso. El nombre de dominio es solo una parte de esa dirección. El patrón completo es scheme://host:port/path?query#fragment, aunque muchas direcciones omiten partes opcionales.

Descomponer una dirección

Interpreta esta dirección por partes:

https://shop.example.com:8443/products/shoes.html?color=blue&size=42#reviews

Los signos de puntuación separan las partes: : sigue al esquema, ? inicia la consulta y # inicia el fragmento. Los separadores no forman parte de los valores de la consulta ni del fragmento.

Esquema, anfitrión y puerto

El esquema selecciona cómo se trata la dirección. http usa HTTP sin cifrar; https usa HTTP cifrado. mailto:info@example.com pide a un programa de correo electrónico que redacte un mensaje, mientras que file:/// identifica un archivo local.

El puerto selecciona un servicio en el anfitrión. Si se omite, HTTP usa el puerto 80 y HTTPS usa el 443. Así, https://example.com/ y https://example.com:443/ identifican el mismo destino y la misma ruta. Los servidores de prueba locales suelen usar los puertos 3000, 5500 u 8080; http://localhost:5500/ incluye su puerto porque no es el predeterminado de HTTP.

El esquema y el anfitrión no distinguen entre mayúsculas y minúsculas. El anfitrión www.example.com es un nombre distinto de example.com; ambos llevan a un sitio solo cuando su propietario los ha configurado de ese modo.

Ruta, consulta y fragmento

En un sitio estático sencillo, una ruta sigue las carpetas y los archivos del servidor. En otros sitios, el software del servidor decide qué devuelve una ruta, por lo que esta no tiene que nombrar un archivo en el disco. Una dirección de carpeta terminada en / suele servir una página predeterminada como index.html.

Una cadena de consulta transporta datos después de ?. En /search?q=web+basics&page=2, & separa dos campos: las palabras de búsqueda y el número de página. Estos campos viajan al servidor como parte del destino de la solicitud.

Un fragmento permanece en el navegador. El sufijo #reviews suele desplazar la página hasta un elemento con id="reviews". El navegador solicita la ruta y la consulta sin el fragmento. Cambiar solo #top por #reviews no solicita al servidor un archivo diferente.

Conservar los caracteres exactos

Las rutas web usan barras inclinadas /. Un espacio puede representarse mediante codificación porcentual como %20. La codificación de formularios usa + para un espacio y %40 para @; una ruta o cadena de consulta ordinaria de una URL puede contener una @ literal, por lo que la codificación de formularios y la escritura general de URL no siguen reglas idénticas.

Las rutas pueden distinguir entre mayúsculas y minúsculas, aunque los anfitriones no lo hacen. /Images/Logo.png puede ser distinto de /images/logo.png. Copiar el anfitrión correctamente pero cambiar las mayúsculas o minúsculas de una ruta puede hacer que se solicite el recurso equivocado.

Un nombre de dominio proporciona a las personas un nombre legible que pueden usar en lugar de una dirección IP numérica. Sus partes separadas por puntos también muestran cómo se organiza el nombre. Interpretar correctamente esas partes importa cuando dos direcciones contienen palabras similares.

Empezar por el extremo derecho

Cada parte entre puntos es una etiqueta. En blog.example.org, la etiqueta situada más a la derecha, org, es el dominio de nivel superior, o TLD. El dominio registrado es example.org y blog es un subdominio controlado a través de ese dominio.

Entre los TLD genéricos están .com, .org, .net, .dev y .shop. Los TLD de código de país tienen dos letras, como .nl, .de, .jp, .br y .ca. Algunos tienen requisitos de elegibilidad: .gov está restringido a organizaciones gubernamentales verificadas de Estados Unidos. Los nuevos registros institucionales .edu generalmente exigen instituciones de educación superior estadounidenses elegibles con acreditación institucional; algunas organizaciones cumplen los requisitos según otras políticas y los registros antiguos pueden tener excepciones. ICANN coordina los nombres de nivel superior del sistema de nombres de dominio.

Un nombre registrado no siempre consta solo de las dos últimas etiquetas. Bajo .co.uk, por ejemplo, el nombre registrado en news.example.co.uk es example.co.uk. Lee primero la terminación pública y después identifica el nombre registrado bajo ella.

Las palabras conocidas pueden estar dentro del nombre de otra persona

Compara estos anfitriones:

En el segundo anfitrión, las palabras example.com son etiquetas a la izquierda de example.net. No dan al propietario de example.com el control de la dirección. Identifica el anfitrión antes de leerlo desde la derecha; un nombre conocido en una ruta tampoco es el anfitrión.

www es una etiqueta de subdominio corriente. El propietario de un sitio puede usarla, omitirla o redirigir entre nombres. La Web no exige su presencia.

El registro y el alojamiento son independientes

Un registrador de dominios gestiona los registros de dominios para sus clientes. Un operador del registro de dominios mantiene los registros de un TLD. Registrar un dominio te da el derecho a usar ese nombre durante un plazo, normalmente de uno o más años. Lo renuevas para conservar ese derecho; un nombre caducado puede terminar quedando disponible para otra persona.

Después, el propietario configura registros DNS para asociar el nombre con la dirección de un servidor de alojamiento. El dominio no son los archivos del sitio web. El mismo nombre puede apuntar a otro servidor, y un servidor puede servir varios dominios. Las respuestas DNS en caché explican por qué una dirección modificada puede tardar minutos u horas en verse en todas partes.

Reglas de nombres y nombres locales

Las etiquetas ordinarias de anfitrión usan letras, dígitos y guiones, sin guion en ninguno de los extremos. Cada etiqueta puede tener hasta 63 caracteres y un nombre completo ordinario puede tener hasta 253 caracteres. Los nombres no distinguen entre mayúsculas y minúsculas. Los nombres de dominio internacionalizados admiten otros sistemas de escritura; sus etiquetas codificadas en ASCII comienzan con xn--.

El nombre especial localhost significa la computadora que hace la solicitud. Sus direcciones de bucle local incluyen 127.0.0.1 y ::1. Si un estudiante abre http://localhost:3000/, el navegador busca un servicio en la propia computadora de ese estudiante.

Un enlace puede contener una dirección completa o instrucciones para encontrar un recurso desde la página actual. Para predecir adónde va, empieza por la dirección de la página y sigue la ruta parte por parte.

Elegir el punto de partida

Una URL absoluta identifica su propio anfitrión y funciona desde cualquier página. Es útil para otro sitio web. Una URL relativa omite el comienzo y se completa a partir de la dirección de la página. Para archivos dentro de un sitio, esto ayuda a trasladar la carpeta completa de una computadora portátil a un servidor.

Recorrer un árbol de carpetas

Supón que un sitio contiene estos archivos:

my-site/
  index.html
  about.html
  images/logo.png
  styles/main.css
  blog/first-post.html

Desde index.html, about.html permanece en la misma carpeta. images/logo.png entra en la subcarpeta images, y styles/main.css entra en styles.

Desde blog/first-post.html, la carpeta de partida es blog. Para llegar al logotipo, usa ../images/logo.png: primero sube a la carpeta del sitio y después entra en images. En cambio, el enlace images/logo.png buscaría dentro de blog/images, donde este árbol no tiene ningún logotipo. Para llegar a la página de inicio desde esa entrada, usa ../index.html.

Seguir direcciones anidadas

En https://example.com/blog/2026/post.html:

• photo.jpg se convierte en https://example.com/blog/2026/photo.jpg.
• ../index.html se convierte en https://example.com/blog/index.html.
• /about.html se convierte en https://example.com/about.html.
• #comments permanece en este documento e identifica su elemento comments.

Una / inicial sustituye la ruta actual a partir de la raíz del sitio. No significa «una carpeta hacia arriba». Repetir ../ permite subir varios niveles de carpetas: ../../about.html desde la entrada anidada sube por 2026 y blog antes de encontrar about.html.

Previsualizar enlaces en el entorno adecuado

Una ruta relativa a la raíz funciona con un servidor HTTP, incluido un servidor local. En una página file:///, / apunta a la raíz del sistema de archivos de la computadora, no a la carpeta de tu proyecto. Usa un servidor local para probar este tipo de enlace.

Una ruta como C:\Users\sam\site\logo.png o file:///Users/sam/site/logo.png identifica una ubicación en una computadora. Los demás visitantes no tienen esa carpeta. Enlaza mediante una ruta web que permanezca dentro de la estructura del sitio.

Hacer coincidir los nombres exactamente

Usa nombres en minúsculas, guiones en lugar de espacios y extensiones correctas: contact-form.html es más fácil de enlazar de forma fiable que Contact Form.HTML. Windows y macOS suelen ignorar las mayúsculas y minúsculas de los nombres de archivo, mientras que muchos servidores web las distinguen. Un enlace local a Logo.png puede fallar en línea cuando el nombre real es logo.png.

Una página de inicio llamada index.html es un valor predeterminado habitual del servidor. Solicitar una carpeta como /blog/ suele servir su index.html cuando ese servidor está configurado con este valor predeterminado.

HTTP, el protocolo de transferencia de hipertexto, define cómo solicitan recursos los clientes web y cómo responden los servidores. HTTPS transporta esos mensajes mediante una conexión cifrada. Leer una solicitud muestra qué pidió el navegador al servidor.

Leer el mensaje en orden

Esta es una solicitud mostrada en forma de texto HTTP/1.1:

GET /products/shoes.html?color=blue HTTP/1.1
Host: shop.example.com
Accept: text/html
Accept-Language: en-US,en;q=0.9

La primera línea contiene el método, el destino de la solicitud y la versión de HTTP. GET pide obtener un recurso. El destino incluye la ruta y la consulta; excluye cualquier fragmento. El anfitrión aparece en la cabecera Host, que permite a un servidor distinguir los sitios que sirve.

Una cabecera es un campo con nombre como Accept: text/html que transporta información sobre la solicitud o su contenido. Una línea vacía termina las cabeceras. Algunas solicitudes llevan después un cuerpo, los datos que se envían. Este ejemplo GET no tiene cuerpo.

HTTP/2 y HTTP/3 codifican los mensajes de manera distinta, pero conservan los métodos, destinos, cabeceras y cuerpos. DevTools los presenta de forma legible, por lo que estas partes de los mensajes siguen siendo útiles en las distintas versiones.

Elegir un método para la acción

Seguir un enlace normal o escribir una dirección HTTP genera una solicitud GET. Un formulario HTML usa GET de forma predeterminada y POST cuando especifica method="post".

Con un formulario GET, los campos van en la consulta de la URL. Esto es adecuado para una búsqueda cuyos resultados quieres guardar como marcador o compartir. POST coloca los campos enviados en el cuerpo de la solicitud y es adecuado para acciones como crear una cuenta o publicar un comentario.

POST no cifra nada por sí solo. Con HTTP sin cifrar, tanto los datos de la consulta como los del cuerpo pueden leerse durante el tránsito. HTTPS protege ambos. Las contraseñas deben ir en cuerpos POST mediante HTTPS porque las URL también aparecen en el historial del navegador y pueden almacenarse en registros.

Leer el envío de un formulario

POST /signup HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 38

name=Ana+Silva&email=ana%40example.com

El destino es /signup. Content-Type identifica la codificación del formulario en el cuerpo. El cuerpo contiene el nombre «Ana Silva» y el correo electrónico «ana@example.com»: + se decodifica como un espacio y %40 como @. Aquí hay 38 bytes, que coinciden con Content-Length.

Leer, repetir e identificar solicitudes

Un método seguro está pensado para leer sin cambiar el estado del servidor; GET, HEAD y OPTIONS son seguros. Un método idempotente tiene el mismo efecto previsto si se repite. Los métodos seguros, PUT y DELETE son idempotentes. POST no garantiza serlo: repetir un envío puede crear un segundo comentario o pedido.

Otras cabeceras de solicitud incluyen User-Agent para información del cliente, Accept para formatos aceptables y Accept-Language para preferencias de idioma. Cookie devuelve valores de cookies almacenados. Referer, con su grafía histórica, puede identificar la página de referencia; los navegadores pueden omitirlo o reducirlo según la política.

La respuesta es la contestación del servidor a una solicitud. Su código indica el resultado, sus cabeceras describen la respuesta y su cuerpo transporta el contenido devuelto cuando se permite un cuerpo.

Separar las partes

Una respuesta en forma de texto HTTP/1.1 puede comenzar así:

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

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

La línea de estado indica la versión, el código 200 y la frase de motivo legible para las personas OK. Los programas usan el número. HTTP/2 y HTTP/3 no incluyen esa frase de motivo. Después de las cabeceras y una línea vacía, el cuerpo comienza con el HTML.

Content-Length describe un número de bytes, no un número de caracteres ni el tamaño visible de una página. Para una respuesta de imagen con Content-Length: 24576, el cuerpo tiene 24 576 bytes: 24,576 kB, o aproximadamente 24,6 kB usando 1 kB = 1000 bytes.

Identificar el cuerpo por su tipo de medio

El tipo de medio, también llamado tipo MIME, se envía en Content-Type.

La cabecera indica al navegador cómo tratar el cuerpo; la extensión de un archivo por sí sola no basta. Si la URL de una hoja de estilo devuelve una página de error HTML con Content-Type: text/html, el navegador la rechaza como CSS. Esto suele explicar una página con texto pero sin los estilos previstos.

Los cuerpos pueden ser texto o bytes binarios. Una respuesta a HEAD no tiene cuerpo, aunque sus cabeceras describan el recurso que devolvería un GET. 204 No Content y 304 Not Modified tampoco tienen cuerpo.

Mantener la identidad entre solicitudes independientes

HTTP es sin estado: un intercambio no recuerda automáticamente uno anterior. Una cookie proporciona información que conecta las solicitudes con una sesión en curso.

1. El servidor responde con Set-Cookie: session=abc123.
2. El navegador almacena la cookie.
3. En solicitudes posteriores que coinciden con su ámbito, envía Cookie: session=abc123.
4. El servidor puede usar ese valor para buscar la sesión, por ejemplo, el inicio de sesión o el carrito del estudiante.

El ámbito de la cookie y las reglas del navegador determinan en qué solicitudes se envía.

Reutilizar contenido sin volver a descargarlo

Cache-Control: max-age=600 permite al navegador tratar una respuesta almacenada como vigente durante 600 segundos, o 10 minutos. Durante ese periodo puede reutilizar la copia sin contactar con el servidor. Cuando deja de estar vigente, el navegador puede preguntar si ha cambiado. Un 304 indica que se reutilice el cuerpo en caché; un 200 puede proporcionar uno nuevo.

Si los cambios guardados en CSS no aparecen, comprueba si el navegador reutilizó una copia. Una recarga forzada, habitualmente Ctrl+Shift+R en Windows/Linux o Cmd+Shift+R en macOS, o la opción Desactivar caché de DevTools ayuda a obtener recursos actualizados. Esa casilla se aplica mientras DevTools está abierto.

Otras cabeceras de respuesta útiles son Location para el destino de una redirección, Date para la fecha de la respuesta y Server para información sobre el software del servidor, cuando se proporciona.

Un código de estado es el resultado de tres dígitos en una respuesta HTTP. El número describe una solicitud, por lo que una página puede tener al mismo tiempo HTML recibido correctamente, una imagen ausente y un script redirigido.

Empezar por el primer dígito

200 OK es la respuesta satisfactoria habitual a GET. 201 Created comunica la creación de un recurso nuevo, a menudo después de POST. 204 No Content comunica éxito sin cuerpo de respuesta.

Seguir una redirección sin confundirla con un fallo

301 Moved Permanently y 308 Permanent Redirect indican una nueva ubicación permanente. 302 Found y 307 Temporary Redirect indican una temporal. La cabecera Location de la respuesta identifica la siguiente dirección.

Por ejemplo, una solicitud a http://example.com/ puede devolver 301 con Location: https://example.com/. Después, el navegador envía una nueva solicitud a la dirección HTTPS, que devuelve 200. Son dos intercambios, no una sola respuesta con dos códigos.

307 y 308 conservan el método cuando el navegador repite la solicitud. Después de 301 o 302, un navegador puede cambiar POST por GET. 304 Not Modified es otro tipo de resultado 3xx: valida una copia en caché y no envía un cuerpo de sustitución.

Relacionar el código con la siguiente comprobación útil

Un 503 puede incluir Retry-After para indicar cuándo volver a intentarlo. La diferencia entre 401 y 403 es especialmente útil: una autenticación ausente o no válida es distinta de una denegación de permiso. Una etiqueta 4xx identifica el lado de la solicitud como objeto de investigación, pero un sitio puede tener un enlace roto o un problema de configuración que la cause.

Diagnosticar el recurso concreto

Supón que el HTML y el CSS devuelven 200, mientras que images/Logo.PNG devuelve 404. El archivo real del servidor es images/logo.png. Corregir las mayúsculas y minúsculas del enlace hace que identifique el archivo almacenado. Un servidor respondió a la solicitud fallida; no era inaccesible todo el sitio.

Para una respuesta 5xx, el fallo está en el procesamiento del lado del servidor. Un estudiante que visita el sitio de otra persona puede volver a intentarlo más tarde o comunicarlo. Un desarrollador responsable de ese servidor investiga su código o el servicio de origen.

Leer la respuesta, no solo la pantalla

Un mensaje de error dentro del HTML no determina el estado. Un sitio puede devolver 200 con un mensaje de «no encontrado», lo que se llama un error 404 leve. A la inversa, un 404 real puede incluir una página de error HTML bien presentada. Usa el panel Red para leer el código real.

Cuando falla DNS o la conexión, puede que no exista ninguna respuesta HTTP. En ese caso, un error generado por el navegador no tiene un estado del servidor que inspeccionar. Un 404 aislado para /favicon.ico, el pequeño icono de pestaña que los navegadores pueden solicitar, suele dejar funcionando el contenido de la página.

Una página combina contenido, presentación y comportamiento. Reconocer estas funciones te ayuda a elegir qué archivo inspeccionar cuando quieres cambiar algo.

HTML describe qué es el contenido

HTML, lenguaje de marcado de hipertexto, da al contenido estructura y significado: encabezados, párrafos, listas, enlaces, imágenes, tablas y formularios. Es un lenguaje de marcado. Describe elementos en lugar de realizar cálculos o ejecutar bucles.

En <a href="about.html">About us</a>, la etiqueta de apertura es <a href="about.html">. El atributo href indica el destino. «About us» es el contenido y </a> cierra el elemento. Los atributos van dentro de la etiqueta de apertura.

Algunos elementos son vacíos y no tienen contenido ni etiqueta de cierre. Por ejemplo, <img src="logo.png" alt="Company logo"> proporciona una dirección de imagen y una alternativa textual. <br>, <link> y <meta> son otros elementos vacíos.

Elige los elementos por su significado. Usa un encabezado porque el texto introduce una sección; usa CSS cuando quieras texto más grande o espacio adicional. Varios elementos <br> son un mal sustituto de las reglas de espaciado.

CSS controla el aspecto del contenido

CSS, hojas de estilo en cascada, establece el color, la tipografía, el espaciado, la disposición y la adaptación a distintos anchos de pantalla. Interpreta esta regla:

h1 {
  color: navy;
  font-size: 2rem;
}

El selector, h1, identifica los elementos a los que se aplicarán estilos. Cada declaración une una propiedad con un valor. color: navy; establece la propiedad color con el valor navy. Los dos puntos separan la propiedad y el valor; el punto y coma termina la declaración.

JavaScript responde a las acciones

JavaScript es un lenguaje de programación. Responde a clics y a la escritura, cambia la página en tiempo real, comprueba los datos de formularios y solicita más datos sin recargar toda la página. Es un lenguaje distinto de Java.

Para un botón de tema, un script puede encontrar el botón, escuchar los clics y alternar una clase CSS:

document.querySelector("button").addEventListener("click", () => {
  document.body.classList.toggle("dark");
});

El script cambia si el cuerpo tiene o no la clase dark; CSS proporciona la apariencia de esa clase. Una página estática de información puede funcionar solo con HTML y CSS.

Vincular los archivos en HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My first page</title>
    <link rel="stylesheet" href="styles/main.css">
    <script src="scripts/app.js" defer></script>
  </head>
  <body>
    <h1>Hello, web</h1>
    <p>This text is structured by HTML and styled by CSS.</p>
    <button>Switch theme</button>
  </body>
</html>

El <head> contiene información de la página y enlaces a archivos. El <body> contiene el contenido mostrado. El navegador solicita styles/main.css y scripts/app.js por separado del HTML. Los tres son archivos de texto sin formato que puedes abrir en un editor de código.

La separación de responsabilidades mantiene el contenido en HTML, la apariencia en CSS y el comportamiento en JavaScript. Una hoja de estilo puede aplicar estilos a muchas páginas. Un encabezado con significado y un enlace ordinario siguen funcionando si fallan los estilos o los scripts, mientras que las funciones que dependen de JavaScript necesitan que su script funcione.

El navegador no muestra el HTML como una imagen de un archivo de texto. Convierte el archivo en objetos, determina sus estilos y posiciones y dibuja el resultado. Después, JavaScript puede cambiar esos objetos.

Construir un árbol a partir de HTML

El DOM, o modelo de objetos del documento, es el árbol de elementos y texto del navegador en tiempo real. Considera:

<body><h1>News</h1><p>Hi <a href="/">home</a></p></body>

El body tiene dos elementos hijos, h1 y p. El encabezado contiene «News». El párrafo contiene el texto «Hi » y un elemento a, que contiene «home». El enlace está dentro del párrafo, no directamente dentro del cuerpo.

Mientras lee el HTML, el navegador descubre recursos en elementos como <link>, <script> e <img>. Solicita esos recursos y lee el CSS para calcular los estilos finales de cada elemento. El cálculo de la disposición determina tamaños y posiciones. El pintado dibuja los píxeles. Estas tareas pueden repetirse cuando cambian el contenido o los estilos.

Dejar que los scripts se ejecuten cuando existan sus elementos

Un script externo clásico sin defer ni async pausa el análisis sintáctico del HTML mientras se descarga y ejecuta. Si está en la cabecera e intenta encontrar un botón situado más adelante en el cuerpo, ese botón aún no se ha construido. document.querySelector("button") devuelve null, por lo que llamar a addEventListener sobre el resultado produce un error.

Añade defer para que un script se descargue mientras continúa el análisis sintáctico del HTML y se ejecute una vez que este termine. Mover un script sin atributos especiales justo antes de </body> también permite que los elementos anteriores existan primero. async no garantiza que exista un botón posterior; su descarga puede terminar pronto.

El HTML fuente y el DOM en tiempo real pueden diferir

Ver código fuente de la página muestra el HTML recibido. El panel Elementos, llamado Inspector en Firefox, muestra el DOM en tiempo real. JavaScript puede haber añadido contenido, cambiado texto o eliminado elementos. El navegador también puede haber reparado HTML mal formado, por ejemplo, cerrando un elemento.

Si un encabezado cambia después de un clic, el panel Elementos muestra el texto cambiado. La vista del código fuente sigue mostrando el HTML recibido originalmente. Un cambio en el DOM puede desencadenar la actualización de estilos, del cálculo de la disposición y del pintado sin obtener un nuevo documento HTML.

Los distintos errores tienen distintos efectos

Los navegadores reparan el HTML mediante reglas definidas y omiten las declaraciones CSS que no entienden. Un error de sintaxis de JavaScript, como una expresión incompleta, impide que se inicie ese archivo o bloque de script. Un error en tiempo de ejecución no capturado termina la ejecución actual y omite las líneas posteriores de esa ejecución. Otros scripts y los controladores de eventos ya registrados pueden seguir funcionando. Esto explica que el contenido y el estilo de una página sigan visibles mientras una función falla.

Los motores de navegador implementan estándares comunes: Blink en Chrome y Edge, Gecko en Firefox y WebKit en Safari. Las pequeñas diferencias de implementación hacen que sea útil probar en más de un navegador. Los navegadores también construyen un árbol de accesibilidad a partir de la estructura de la página para que los lectores de pantalla puedan presentar elementos y relaciones con significado.

Un proyecto web comienza como archivos en una carpeta. Un editor de código te ayuda a escribir esos archivos y un navegador te permite previsualizar lo que producen. Mantener el editor y el navegador apuntando a la misma copia del proyecto evita muchos resultados confusos.

Elegir un editor de código de texto sin formato

Un editor de código guarda archivos de texto sin formato y añade resaltado de sintaxis, autocompletado, indicaciones de errores, un árbol de archivos y otras ayudas para programar. Los procesadores de texto almacenan formato de documento y pueden sustituir las comillas rectas por comillas tipográficas, por lo que no son adecuados para código fuente.

Visual Studio Code es una opción gratuita para Windows, macOS y Linux. Otros editores son Sublime Text, Zed y WebStorm. Un entorno de prueba en línea como CodePen es adecuado para experimentos breves; las habilidades relacionadas con archivos y rutas se aplican en distintas herramientas.

Crear y abrir un proyecto

Para un primer proyecto en VS Code:

1. Descarga e instala el editor desde su sitio web oficial, https://code.visualstudio.com/.
2. Crea una carpeta como web-projects/my-first-site.
3. Elige Archivo → Abrir carpeta y abre my-first-site para que el árbol de archivos muestre todo el proyecto.
4. Crea index.html. En modo HTML, escribe ! y elige la sugerencia de Emmet para una estructura básica de HTML.
5. Guarda con Ctrl+S en Windows/Linux o Cmd+S en macOS.

Usa una estructura de carpetas que corresponda a las funciones de tus archivos:

my-first-site/
  index.html
  styles/main.css
  scripts/app.js
  images/logo.png

Usa nombres en minúsculas y guiones, sin espacios. Mantén visibles las extensiones para que index.html no se convierta sin que lo notes en index.html.txt. Guarda el texto como UTF-8 e incluye <meta charset="utf-8"> en la cabecera del HTML para que el texto, como los nombres acentuados, se interprete correctamente.

Elegir un método de vista previa

Un servidor web local sirve una carpeta de tu propia computadora. Puede usar http://localhost:5500/ o http://127.0.0.1:3000/; usa la dirección que proporcione tu herramienta de vista previa. Las rutas relativas a la raíz necesitan un servidor para partir de la raíz de tu sitio. Funciones como los módulos de JavaScript o la obtención de datos también necesitan una vista previa mediante HTTP porque los navegadores restringen su uso en páginas de archivos locales.

En VS Code, la extensión Live Preview de Microsoft o una extensión Live Server puede iniciar un servidor y actualizar la vista previa después de guardar. Comprueba el editor antes de instalar extensiones, porque estas ejecutan código en tu computadora. El formato al guardar, el ajuste de línea y el guardado automático pueden facilitar la edición; un formateador como Prettier mantiene un formato uniforme.

Seguir el ciclo de edición y comprobación

Edita, guarda, recarga o deja que se recargue la vista previa, inspecciona el resultado y corrige el archivo. Si el navegador sigue mostrando contenido antiguo, comprueba el indicador de archivo sin guardar del editor y compara la ruta de la vista previa con el proyecto que abriste. Puede que tengas dos carpetas con el mismo nombre de página. Comprueba también el nombre de archivo y la extensión exactos; un sufijo de archivo de texto puede impedir que el navegador trate un archivo como una página HTML.

Las herramientas de desarrollo del navegador muestran la página que realmente estás ejecutando. Úsalas para probar un estilo, leer un error o comparar la página en tiempo real con el archivo de tu editor.

Abrir las herramientas y elegir un panel

Haz clic derecho en una parte de una página de escritorio y elige Inspeccionar. Los atajos habituales son F12 o Ctrl+Shift+I en Windows/Linux y Cmd+Option+I en macOS. Safari necesita primero que se activen sus funciones para desarrolladores en Ajustes → Avanzado; el texto de la opción varía según la versión de Safari.

Encontrar el estilo que prevalece

Inspecciona un encabezado. Al seleccionar su nodo se resalta su caja en la página, incluidos el contenido, el relleno, el borde y el margen. El panel Estilos enumera las reglas y sus ubicaciones de origen, como main.css:12. Una declaración tachada no está teniendo efecto ahí: otra regla puede desplazarla o la declaración puede no ser válida. Las declaraciones no válidas también pueden tener un indicador de advertencia.

Abre Calculado para ver los valores finales. Si dos reglas especifican distintos colores de texto, el color calculado te indica el resultado. Puedes cambiar temporalmente un valor, desactivar una declaración o editar texto y atributos para probar una idea.

Las ediciones habituales en tiempo real afectan al DOM o a los estilos de tu pestaña. Al recargar, se sustituyen por los archivos cargados. Para conservar una mejora, haz la misma edición en el archivo fuente, guarda y recarga. Cambiar un precio mostrado en Elementos cambia la visualización local; no cambia el precio almacenado en el servidor.

Leer un error de consola como pista

Un error incluye un mensaje y normalmente un archivo y una línea. Por ejemplo:

Uncaught TypeError: Cannot read properties of null
(reading 'addEventListener') at app.js:3

Interpreta app.js:3 como la ubicación del código fuente que debes inspeccionar. El código intentó usar un objeto ausente. Si un selector buscó un botón, comprueba que su escritura coincida con la de un elemento y que el elemento existiera cuando se ejecutó el script. El mensaje por sí solo no permite elegir entre esas causas.

La Consola también muestra cargas fallidas de recursos, como un GET que termina en 404, y mensajes impresos por console.log(). Un error de script puede explicar que un botón no funcione aunque su archivo se haya descargado correctamente.

Probar una expresión pequeña y una pantalla estrecha

La Consola puede evaluar JavaScript. Escribir 2 + 3 devuelve 5; document.title devuelve el título actual. La asignación document.body.style.background = "lightyellow" cambia el fondo de la página en la pestaña. No pegues en la Consola código de alguien en quien no confíes; se ejecuta con acceso a la página y puede hacer un uso indebido de una cuenta.

Usa el icono de teléfono y tableta para el modo de diseño adaptable. Elige un ancho estrecho como 375 píxeles CSS para ver cómo encaja la disposición. Esto simula un área de visualización, no todos los comportamientos de un teléfono real; una comprobación en un dispositivo real añade información que cambiar el tamaño no puede proporcionar.

El panel Red muestra los intercambios independientes que hay detrás de una página. Puede revelar por qué falta una imagen, por qué fallaron los estilos o por qué una recarga transfirió menos datos de lo esperado.

Registrar antes de recargar

Abre DevTools, elige Red, asegúrate de que el registro esté activo y recarga la página. El panel no puede reconstruir las solicitudes que terminaron antes de que se abriera. Si la lista está vacía, comprueba el registro y los filtros, y después vuelve a recargar.

Las filas muestran el nombre o URL, método, estado, tipo, tamaño y tiempo de cada solicitud. El diagrama de cascada muestra cuándo comenzaron las solicitudes y cómo se solapan sus tiempos. Te ayuda a ver la carga de una página como varias obtenciones de recursos en lugar de una acción indivisible.

Abrir una fila para ver todos los indicios

Selecciona una solicitud. Cabeceras muestra la URL y el método solicitados, el estado de la respuesta y las cabeceras de solicitud y respuesta. Vista previa muestra una vista útil del contenido de respuesta compatible. Respuesta muestra el contenido devuelto de forma más directa, mientras que Tiempos desglosa el tiempo empleado en las fases de la solicitud.

Si falta una imagen, compara la dirección completa solicitada con la ubicación real de la imagen. Un nombre de archivo por sí solo puede ocultar una carpeta padre incorrecta.

Diagnosticar una carga de ejemplo

Cinco solicitudes transfirieron 31,8 kB en total. La solicitud de Hero.jpg falló. Su pequeño cuerpo HTML es la página de error del servidor, lo que explica el tipo de medio text/html en una solicitud de imagen. Si el archivo real es images/hero.jpg, cambia src="images/Hero.jpg" por src="images/hero.jpg" y recarga para probar la corrección.

Filtra por Img para centrarte en las imágenes, por CSS para las hojas de estilo o por un nombre para encontrar un recurso concreto. Cuando falla una hoja de estilo, inspecciona tanto su estado como Content-Type. Ni siquiera un 200 puede convertir una respuesta HTML en CSS utilizable.

Mantener visibles las redirecciones y las respuestas en caché

Activa Conservar registro, llamado Persist Logs en Firefox, antes de seguir una navegación que quieras rastrear. Una redirección de HTTP a HTTPS puede mostrar entonces una fila 301 y su cabecera Location, seguida de una nueva solicitud 200.

Una fila marcada «(memory cache)» o «(disk cache)» significa que el navegador reutilizó contenido almacenado. Un 304 sí implicó una respuesta del servidor, pero solo llegaron cabeceras, lo que evitó volver a transferir el cuerpo. Por tanto, las columnas Tamaño y Transferido responden a preguntas distintas del tamaño del archivo por sí solo.

Usa Desactivar caché mientras DevTools está abierto para comparar con obtenciones actualizadas. La limitación de la velocidad de red simula una conexión más lenta para que puedas observar qué contenido aparece primero. Las etiquetas de los ajustes de velocidad varían según la versión del navegador.

Una fila fallida sin estado de respuesta puede indicar un fallo de DNS o de conexión; Chrome puede mostrar net::ERR_NAME_NOT_RESOLVED. Fuera del navegador, curl -I https://example.com envía HEAD e imprime el estado y las cabeceras para una comprobación rápida de la respuesta.