Lección 3 de 5 · 40 minutos

Construir una página web con IA

Nacho

Al terminar esta lección
podrás escribir, con ayuda de un asistente de IA, una página web con HTML, CSS y un poco de JavaScript, y publicarla gratis en internet con una dirección que puedes compartir.

Camila está en séptimo semestre y le piden la hoja de vida para una práctica. Manda un PDF, como todo el mundo. La persona que la entrevista le pregunta si tiene algo en línea —un portafolio, un proyecto, algo— y ella contesta que no, que no sabe programar. Al lado, un compañero mandó un enlace: nombre, foto, tres proyectos de clase y un botón. Ese compañero tampoco sabía programar hace un mes.

Esta lección es exactamente eso. No vas a instalar nada: el programa que ejecuta páginas web ya lo tienes abierto ahora mismo, es tu navegador. Vas a escribir un archivo de texto con ayuda del asistente, verlo funcionando en tu computador (o en tu celular) y dejarlo publicado en una dirección pública y gratuita que puedes poner en tu hoja de vida hoy mismo. Al final vas a entender qué hace cada parte, que es lo que separa a alguien que copia y pega de alguien que puede arreglar lo que se dañó.

Tres lenguajes que ya usas todos los días

Cuando abres la página de tu universidad o la de un trámite del Estado, tu navegador (Chrome, Firefox, Edge, Safari) no recibe una imagen: recibe archivos de texto y los arma en pantalla. Casi siempre son tres tipos de texto y cada uno tiene un oficio distinto.

HTML (HyperText Markup Language, lenguaje de marcado) pone el contenido y su estructura: esto es un título, esto es un párrafo, esto es una imagen, esto es un enlace.
CSS (Cascading Style Sheets, hojas de estilo) define cómo se ve: colores, tamaños, márgenes, tipografía, qué va al lado de qué.
JavaScript define qué pasa cuando el usuario hace algo: un botón que muestra u oculta texto, un contador, un menú que se despliega.

Una comparación que ayuda: HTML es el esqueleto, CSS es la ropa, JavaScript es el movimiento. Puedes tener una página solo con HTML —se ve fea, pero funciona—; no puedes tener una página solo con CSS, porque no habría nada que vestir.

Lo importante para hoy: no necesitas instalar nada. En la lección 1 ejecutabas Python con un intérprete; aquí el intérprete es el navegador que ya tienes. Escribes un archivo de texto, le pones la extensión .html, le das doble clic y ya está corriendo.

El asistente de IA va a escribir la mayor parte de ese texto. Tu trabajo no es memorizar etiquetas —nadie las memoriza todas—, es hacer dos cosas: pedir con precisión y leer lo que llega. En la lección 2 practicaste entender código que no escribiste; esa misma habilidad es la que hoy te permite decir “esto no era lo que pedí” en vez de pegar a ciegas y quedarte sin saber qué se rompió.

Ejemplo

Prueba rápida: abre cualquier página en el computador, haz clic derecho y elige “Ver código fuente de la página”. Eso que aparece —lleno de `<div>`, `<p>`, `<a>`— es HTML. Es exactamente lo mismo que vas a escribir tú, solo que más largo.

Tu primer archivo: index.html

Abre el Bloc de notas (Windows), TextEdit en modo texto plano (Mac) o VS Code si ya lo tienes. Pídele al asistente la página completa y fíjate en la estructura que devuelve:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Camila Restrepo — Portafolio</title>
</head>
<body>
  <h1>Camila Restrepo</h1>
  <p>Estudiante de Ingeniería de Sistemas en Medellín.</p>
  <a href="https://github.com">Mi GitHub</a>
</body>
</html>

Lee las piezas. Casi todo viene en etiquetas que abren y cierran, como <p> y </p>; lo que va en medio es el contenido.

<head>: información para el navegador, no se ve en la página. <meta charset="UTF-8"> es lo que hace que las tildes y la ñ no salgan como símbolos raros. Nunca lo borres.
<title>: el texto que aparece en la pestaña del navegador.
<body>: todo lo que sí se ve.
<h1> a <h6>: títulos, del más importante al menos importante. Usa un solo <h1> por página.
<p> párrafo, <a href="..."> enlace, <img src="foto.jpg" alt="descripción"> imagen. El alt describe la imagen para quien no puede verla y para los lectores de pantalla: escríbelo siempre.

Guarda el archivo como index.html. Cuidado con esto en el Bloc de notas: en “Tipo” elige Todos los archivos, porque si no te queda index.html.txt y no abre como página. El nombre index no es capricho: es el que los servidores buscan por defecto cuando alguien entra a tu dirección.

Doble clic al archivo y se abre en el navegador. Cambias una palabra, guardas, refrescas con F5 y ves el cambio de inmediato. Ese ciclo —editar, guardar, refrescar— es prácticamente todo el desarrollo web.

Ejemplo

Prompt para copiar: “Soy principiante total en HTML. Escríbeme un archivo index.html completo, en español, para una página personal de una estudiante de Ingeniería de Sistemas en Medellín. Debe tener: mi nombre como título, un párrafo de presentación de 3 líneas, una lista con tres proyectos de clase y un enlace a mi correo. Sin CSS todavía, sin librerías externas. Después del código, explícame línea por línea qué hace cada etiqueta.”

CSS: separar el contenido de cómo se ve

La página anterior funciona pero parece un documento de 1998: Times New Roman, todo pegado a la izquierda. Ahí entra CSS.

Podrías meter los estilos dentro del HTML, pero la costumbre es tenerlos en un archivo aparte llamado style.css, y conectarlo desde el <head> con una línea:

<link rel="stylesheet" href="style.css">

Esa línea significa “busca un archivo llamado style.css en la misma carpeta y aplícalo”. Si el nombre no coincide exactamente —mayúsculas incluidas— la página se ve sin estilos y no aparece ningún error: simplemente sale fea. Es la causa número uno de sustos.

Una regla de CSS tiene tres partes: a quién le aplica, qué propiedad se cambia y con qué valor.

body {
  font-family: system-ui, sans-serif;
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
  color: #222;
}
h1 { color: #0b6b4f; }

Aquí body es el selector (a quién), color la propiedad y #222 el valor. max-width junto con margin: 0 auto es el truco clásico para que el texto no se estire de lado a lado en una pantalla grande y quede centrado.

La forma de trabajar con el asistente es en rondas cortas y concretas. “Hazlo bonito” produce resultados al azar; “fondo blanco, textos gris oscuro, títulos en verde, letra más grande, que se vea bien en celular” produce algo que puedes evaluar. Después de cada cambio: guarda, refresca, mira. Si algo no te gusta, pide un ajuste, no diez.

Algo que el asistente hace muy bien y conviene pedir de una vez: que la página sea responsive, es decir, que se acomode a la pantalla del celular. En Colombia mucha gente va a abrir tu enlace desde el teléfono, no desde un computador.

Ejemplo

Prompt de segunda ronda: “Ahora crea el archivo style.css para esa página. Quiero: fondo blanco, texto gris oscuro, ancho máximo de 700 px centrado, letra sans-serif, títulos en verde oscuro, y que se vea bien en celular. No uses Bootstrap ni ninguna librería externa. Dime también qué línea debo agregar en el index.html para conectarlo.”

Un poco de JavaScript: que la página reaccione

Con HTML y CSS tu página ya es publicable. JavaScript agrega lo único que falta: que responda a lo que hace el visitante, sin recargar nada.

El ejemplo más útil para empezar es un botón que muestra u oculta un bloque de texto:

<button id="btn">Ver mis cursos</button>
<div id="cursos" style="display:none">
  <p>Cálculo, Programación I, Bases de Datos.</p>
</div>

<script>
  const boton = document.getElementById("btn");
  const caja = document.getElementById("cursos");
  boton.addEventListener("click", function () {
    if (caja.style.display === "none") {
      caja.style.display = "block";
    } else {
      caja.style.display = "none";
    }
  });
</script>

Léelo con calma, porque la lógica ya la conoces de Python: hay variables, hay un if/else. Lo nuevo son tres ideas.

id="btn" es una etiqueta de identificación que le pones a un elemento para poder referirte a él después.
document.getElementById("btn") significa “en este documento, tráeme el elemento cuyo id es btn”. document es la página misma, vista desde JavaScript.
addEventListener("click", ...) significa “cuando esto reciba un clic, ejecuta esta función”. A eso se le llama evento: el código no corre de arriba abajo y termina, se queda esperando a que algo pase.

Dos avisos honestos. Primero: JavaScript que corre en el navegador es visible para cualquiera que abra el código fuente, así que nunca pongas ahí contraseñas ni claves de acceso. Segundo: si algo no funciona, presiona F12 y abre la pestaña “Console”; ahí el navegador te dice el error, casi siempre un nombre mal escrito. Copiar ese mensaje y pegárselo al asistente resuelve la mayoría de los casos en un intento.

Ejemplo

Prompt: “Agrega a mi página un botón que muestre y oculte una sección con mis tres proyectos. Usa JavaScript simple dentro de la misma página, sin librerías. Explícame qué hace cada línea como si nunca hubiera visto JavaScript, y dime dónde exactamente pego el código.”

Publicarla gratis en GitHub Pages

Tu archivo hoy solo existe en tu computador. Para que tenga una dirección pública necesitas un servidor, y hay uno gratuito y serio: GitHub Pages. GitHub es un sitio donde se guarda código; un repositorio es una carpeta de proyecto dentro de GitHub. Pages toma los archivos de un repositorio y los sirve como página web.

El camino, paso a paso:

1. Crea una cuenta gratuita en github.com (correo y contraseña; sirve el correo institucional). 2. Crea un repositorio público. En el plan gratuito, Pages funciona con repositorios públicos, así que asume que todo lo que subas lo puede ver cualquiera: no pongas tu cédula, tu dirección ni tu número de documento. 3. Sube tus archivos. Puedes arrastrarlos con Add file → Upload files, o crearlos desde cero con Add file → Create new file escribiendo el nombre index.html y pegando el contenido. Esta segunda opción funciona desde el celular, porque todo pasa en el navegador. 4. index.html y style.css deben quedar en la raíz del repositorio, no dentro de una subcarpeta. 5. Entra a Settings → Pages. En “Source” elige Deploy from a branch, selecciona la rama main y la carpeta / (root), y guarda. 6. Espera unos minutos y recarga esa misma pantalla: ahí aparece tu dirección, con la forma https://tuusuario.github.io/nombre-del-repositorio/.

Si al abrirla ves el texto sin estilos, casi siempre es que style.css no se subió o el nombre no coincide. Si ves un error 404, revisa que el archivo se llame index.html en minúsculas y que esté en la raíz.

Esa dirección la puedes poner en tu hoja de vida, en tu perfil de LinkedIn o mandarla por WhatsApp. Cada vez que edites un archivo en GitHub y guardes el cambio, la página publicada se actualiza sola en un par de minutos.

Ejemplo

Prompt de apoyo si te pierdes: “Voy a publicar una página con GitHub Pages. Ya tengo index.html y style.css. Guíame paso a paso desde cero, indicándome el nombre exacto de cada botón que debo tocar en la interfaz de GitHub, y dime cómo verificar que quedó publicada.”

Práctica: Publica tu página personal (o la de un proyecto de clase) hoy

Decide el contenido antes de tocar código: tu nombre, una presentación de tres líneas, tres proyectos o materias, y una forma de contacto. Escríbelo en una nota; el asistente no puede inventarlo por ti.
Pídele al asistente el index.html completo con ese contenido, sin CSS y sin librerías externas, y que te explique cada etiqueta. Guárdalo como index.html eligiendo “Todos los archivos” en el tipo, y ábrelo con doble clic.
Pide ahora el style.css con instrucciones concretas de color, ancho y tipografía, agrega la línea <link rel="stylesheet" href="style.css"> en el <head>, guarda ambos archivos en la misma carpeta y refresca con F5.
Haz dos rondas de ajuste, un cambio a la vez: “el título muy grande, bájalo”, “más espacio entre párrafos”. Guarda y refresca después de cada una.
Agrega el botón con JavaScript que muestra y oculta tus proyectos. Si no funciona, abre F12 → Console, copia el mensaje de error y pásaselo al asistente.
Crea tu cuenta de GitHub y un repositorio público llamado, por ejemplo, mi-portafolio. Sube index.html y style.css a la raíz.
Ve a Settings → Pages, elige Deploy from a branch, rama main, carpeta / (root), y guarda.
Espera unos minutos, abre tu dirección https://tuusuario.github.io/mi-portafolio/ desde el celular con datos móviles (para confirmar que es pública de verdad) y mándasela a alguien.

Al terminar tienes: Una dirección web pública, gratuita y funcional, hecha por ti, que puedes abrir desde cualquier celular y poner en tu hoja de vida.

Dónde se equivoca la gente

La página se ve sin colores ni estilos después de publicarla, aunque en el computador se veía bien.Casi siempre el archivo `style.css` no se subió, quedó dentro de una subcarpeta o el nombre no coincide exactamente (`Style.css` no es lo mismo que `style.css`). Revisa que esté en la raíz del repositorio y con el mismo nombre que aparece en el `<link>`.
Pedirle al asistente “hazme una página bonita para mi portafolio” y pegar lo que salga sin leerlo.Da instrucciones concretas (colores, secciones, sin librerías externas) y pide la explicación línea por línea. Si no entiendes una parte, pregúntale qué hace antes de seguir: en la siguiente ronda de cambios vas a necesitar saber dónde tocar.
Poner en la página datos personales sensibles: cédula, dirección de la casa, número de documento, o una clave dentro del JavaScript.Un repositorio público en el plan gratuito es visible para todo el mundo, y el JavaScript del navegador se lee con clic derecho. Publica solo lo que pondrías en una cartelera: nombre, ciudad, correo de contacto y proyectos.
Aceptar código con librerías o efectos que el asistente sugiere pero que no funcionan, y quedarse trabado sin saber por qué.Los asistentes a veces inventan nombres de propiedades o usan versiones viejas de una librería. Pide siempre HTML, CSS y JavaScript puros para empezar, y ante cualquier falla abre F12 → Console: el mensaje de error es la pista y se lo puedes pegar al asistente.

Lo que te llevas

Una página web son archivos de texto que el navegador arma: HTML es el contenido, CSS cómo se ve y JavaScript qué pasa al interactuar.
No hace falta instalar nada: escribes `index.html`, le das doble clic y el ciclo de trabajo es editar, guardar, refrescar.
El `<meta charset="UTF-8">` salva las tildes y la ñ, y `index.html` es el nombre que los servidores buscan por defecto.
Con el asistente se avanza en rondas cortas y peticiones concretas; “hazlo bonito” no es una instrucción evaluable.
GitHub Pages publica gratis un repositorio público en `https://tuusuario.github.io/nombre-del-repositorio/`, y se actualiza solo cada vez que editas un archivo.
Todo lo publicado es visible para cualquiera: nada de datos sensibles ni claves dentro del JavaScript del navegador.

Palabras nuevas

HTML: Lenguaje de marcado con el que se escribe el contenido y la estructura de una página: títulos, párrafos, enlaces, imágenes. Se escribe con etiquetas que abren y cierran, como `<p>` y `</p>`.
CSS: Hojas de estilo: las reglas que definen cómo se ve el HTML (colores, tamaños, espacios, tipografía). Se suelen guardar en un archivo aparte, típicamente `style.css`.
Evento: Algo que hace el usuario en la página —un clic, escribir, mover el mouse— y al que el JavaScript queda esperando para ejecutar una acción.
Repositorio: La carpeta de un proyecto dentro de GitHub, donde se guardan sus archivos y el historial de cambios. Puede ser público (visible para todos) o privado.
GitHub Pages: Servicio gratuito de GitHub que toma los archivos de un repositorio y los publica como una página web con dirección propia.

Ya tienes una página en internet; en la lección 4 la vas a llenar de algo que valga la pena: datos reales de Colombia, descargados y analizados con Python.

Construir una página web con IA

Tres lenguajes que ya usas todos los días

Tu primer archivo: index.html

CSS: separar el contenido de cómo se ve

Un poco de JavaScript: que la página reaccione

Publicarla gratis en GitHub Pages

Práctica: Publica tu página personal (o la de un proyecto de clase) hoy

Dónde se equivoca la gente

Lo que te llevas

Palabras nuevas

Quiz de la lección