Tu primera página web local

Esta lección todavía está en pruebas: mejora con los comentarios de quienes la siguen. Si algo no está claro, hay que corregir la lección, no a ti.

Al final de esta lección, sabrás

hacer construir una página web en un solo archivo;
abrirla en tu navegador, sin instalar ni publicar nada;
pedir una modificación precisa y verla después de recargar;
hacer que te expliquen las tres partes de una página: el contenido, la apariencia, el comportamiento.

Por qué te interesa

Una página web es, ante todo, un archivo, como un documento. Se abre en tu navegador, desde tu computadora, sin alojamiento ni cuenta. Es el terreno de pruebas ideal: ves el resultado enseguida, nada sale de tu casa y puedes volver a empezar todo. Todas las lecciones siguientes parten de aquí.

Antes de empezar


Necesitas	Claude Code (app o terminal), en modo Manual, tu carpeta de proyecto (lección 1) y un navegador (Chrome, Firefox, Safari o Edge)
Costo	La suscripción del agente: como mínimo Claude Pro, 18 € al mes sin IVA con facturación mensual, o 15 € al mes sin IVA con la suscripción anual de 180 € pagada por adelantado; precios mostrados en claude.com/pricing a fecha de 24/10/2026
Duración	60 minutos
Recordatorio	La página se queda en tu computadora: no se publica nada

Entenderlo en 3 minutos

Una página web en un solo archivo termina en .html. Contiene tres partes, a menudo en el mismo archivo:

Parte	Lo que hace	Ejemplo
El HTML	El contenido y su estructura	El título, los párrafos, una lista
El CSS	La apariencia	Los colores, los tamaños, la disposición en el teléfono
El JavaScript	El comportamiento	Lo que pasa cuando se hace clic

Tres indicaciones para una primera página:

Un solo archivo, que puedes copiar, enviar, guardar en una copia de seguridad.
Nada cargado desde Internet: ni fuentes, ni imágenes, ni scripts traídos de otro sitio. La página funciona sin conexión, y no se envía nada a un servicio externo cada vez que se abre.
Legible en el teléfono: la disposición se adapta a las pantallas pequeñas.

Recargar. El navegador muestra la versión que cargó. Después de cada modificación del archivo, recarga la página: según la documentación de Chrome, Cmd + R en Mac, Ctrl + R en Windows.

Hagámoslo juntos

1Paso 1: Hacer construir la página

En Claude Code, en tu carpeta de proyecto, en modo Manual:

Crea index.html: una página de inicio sencilla para [tu proyecto], a partir de [tu ficha o tus notas].
Un solo archivo, sin cargar nada desde Internet (ni fuentes ni imágenes externas), legible en el teléfono.
No inventes ninguna información: lo que falte se escribe [por completar]. No crees ningún otro archivo.
Luego dime cómo abrirla.

Lee la solicitud de permiso antes de aceptar: debe referirse a index.html, en tu carpeta.

En nuestra prueba del 24/10/2026, para la página de inicio del club de lectura, la respuesta precisó que la página «no carga nada desde Internet» y enumeró la información que había quedado [por completar].

2Paso 2: Abrirla

En Mac

En el Finder, abre tu carpeta de proyecto y haz doble clic en index.html. Se abre en tu navegador habitual. Para elegir otro navegador: clic derecho, Abrir con.

En Windows

En el Explorador de archivos, abre tu carpeta de proyecto y haz doble clic en index.html. Se abre en tu navegador habitual. Para elegir otro navegador: clic derecho, «Open with» (etiqueta exacta no confirmada).

Mirarla en una pantalla pequeña

Haz la ventana del navegador muy estrecha, como un teléfono: el texto debe seguir siendo legible, sin desplazamiento lateral.

3Paso 3: Una modificación precisa

Pide una sola cosa a la vez, y compruébala:

En index.html, pon el título en azul oscuro y agrega debajo del título una frase de bienvenida: «[tu frase]». No cambies nada más.

Recarga la página (Cmd + R o Ctrl + R). Comprueba la modificación, y que nada más se haya movido.

4Paso 4: Entender lo que hay dentro

Explícame index.html en 5 líneas, sin tecnicismos: dónde está el contenido, dónde está la apariencia, y si hay JavaScript. No modifiques nada.

Ahora te toca a ti

Haz construir la página de tu proyecto, con las tres indicaciones.
Ábrela y mírala en una ventana estrecha.
Haz tres modificaciones, una por una, recargando después de cada una.
Anota en tu diario lo que aprendiste sobre el archivo.

Comprobar

Funcionó si:

index.html se abre con un doble clic, sin conexión;
la página sigue siendo legible en una ventana estrecha;
cada modificación se comprobó después de recargar;
sabes decir dónde están el contenido y la apariencia en el archivo.

Errores frecuentes:

pedir cinco modificaciones de golpe y ya no saber cuál rompió qué;
olvidarse de recargar la página;
aceptar una escritura fuera de la carpeta del proyecto;
una página que carga una fuente o una imagen desde Internet, sin haberlo querido.

Guardar y retomar

Guarda la página en la carpeta del proyecto, junto a la especificación.
Después de una modificación lograda, guarda una versión (lección 5).

Para ir más lejos

opcional

Según la documentación de Chrome, un clic derecho en un elemento de la página y luego Inspeccionar muestra su código y sus reglas de apariencia.

Palabras nuevas

5 palabras explicadas

Palabra	Lo que significa
Página web local	Un archivo .html abierto desde tu computadora, sin estar en línea
HTML	El contenido y la estructura de una página
CSS	La apariencia de una página: colores, tamaños, disposición
JavaScript	El comportamiento de una página: lo que pasa cuando se hace clic
Recargar	Hacer que el navegador vuelva a leer el archivo, para ver la última versión

La prueba del paso 1 se hizo realmente con Claude Code 2.1.310, en una carpeta de prueba aislada (informe de pruebas, T53). Las sesiones de prueba con Claude Code se hicieron en modo no interactivo (claude -p), una sola vez cada una: lo que veas puede ser diferente (solicitudes de permiso, redacción, número de preguntas). Por verificar: la apertura con doble clic en Windows no se ha probado (no había una computadora con Windows).