Cuando abres una página web ves texto, colores y botones, pero cada uno responde a una pregunta distinta y se escribe con un lenguaje diferente. Aquí vas a aprender qué dice una página y cómo construir esa estructura con HTML desde un editor profesional como VS Code, replicando lo que antes hizo la inteligencia artificial por ti en el proyecto Okini.
Qué es HTML y por qué funciona como el guion de tu página
Piensa en HTML como el guion de una obra de teatro antes de cualquier escenografía. Dice quién habla, qué dice y en qué orden, pero no define cómo se visten los actores ni qué luces hay arriba del escenario.
Esa analogía es clave: HTML responde a la pregunta de qué contiene la página, sin maquillaje visual. Los colores y los botones llegan después, con otros lenguajes que verás más adelante en el curso.
¿Qué es HTML? Es el lenguaje que define la estructura y el contenido de una página web. No se encarga del diseño visual ni de la interacción, solo de qué información existe y en qué orden aparece.
Cómo crear el archivo index.html en VS Code
Abre VS Code y crea un archivo nuevo llamado index.html. Ese nombre no es decorativo: index.html es la convención profesional, el archivo que cualquier navegador busca por defecto cuando alguien entra a un sitio web [01:30].
Para generar la estructura mínima, escribe el signo de exclamación ! y dale enter. VS Code te crea automáticamente todo el esqueleto base del documento. Cambia el contenido de la etiqueta title, que dice Document, por Okini, que es el nombre del proyecto.
Qué significa cada línea de la estructura base
Cada línea responde a una pregunta del navegador y vale la pena entenderlas una por una:
doctype: le dice al navegador que lo que sigue es HTML moderno y debe interpretarlo así.html lang: envuelve todo el documento y declara el idioma. Por defecto viene en inglés (en), pero lo puedes cambiar a español poniendo es.head: contiene información sobre la página, no contenido visible. Aquí va el title, que aparece en la pestaña del navegador.meta: etiquetas de configuración que se explican más adelante.body: lo que el visitante efectivamente ve cuando entra a tu página.
No te preocupes si te da pereza escribir esto cada vez. Esta estructura no se memoriza repitiendo, se memoriza usando. Después de tres archivos vas a poder leerla y escribirla sin pensar.
Cómo escribir el contenido del body con encabezados y párrafos
Todo el home de Okini va dentro del body. Para que el código se lea mejor, usa Option+Z para activar el ajuste de línea y haz clic derecho en Format Document para que VS Code organice la indentación automáticamente [05:10].
Dentro del body encuentras tres etiquetas fundamentales:
h1: el encabezado más importante. Solo debe haber uno por página.h2: encabezados de segundo nivel. Puedes tener varios.p: párrafos de texto.
Guarda el archivo con Ctrl+S en Windows o Cmd+S en Mac. Si ves un círculo arriba en la pestaña, significa que el archivo aún no está guardado.
¿Cuántos h1 puedo poner en una página HTML? Solo uno. El h1 representa el título principal del contenido y duplicarlo confunde al navegador y al SEO. Para los siguientes niveles usa h2, h3 y así sucesivamente.
Cómo previsualizar tu HTML con Live Server
Podrías abrir el archivo dando doble clic desde la carpeta, pero ya estás en un entorno profesional. Ve a la sección de extensiones de VS Code y busca Live Server. Instálala y confía en el publicador.
Vuelve a tu archivo index.html, haz clic derecho desde el explorador y selecciona Open with Live Server. Se abrirá automáticamente una ventana en tu navegador con una URL especial que funciona como un servidor interno [07:45].
Lo poderoso de Live Server es que cada vez que guardes un cambio en el archivo, se reflejará al instante en el navegador sin necesidad de recargar manualmente.
Por qué tu página se ve en blanco y negro
Cuando veas el resultado, vas a encontrar texto en blanco y negro, con una tipografía por defecto, sin colores ni espaciado bonito. Y está perfecto.
Esto es exactamente lo que HTML hace: dice qué hay en la página, no cómo se ve. La parte visual es otra historia que se cuenta con CSS más adelante.
Cómo comparar tu HTML con el que generó la inteligencia artificial
Abre el archivo Okini versión 0.html que descargaste cuando la IA generó el sitio en la clase tres. Mira las primeras líneas: vas a reconocer doctype, html lang, el head y más abajo el body.
Al comienzo del curso ese archivo era opaco. Ahora se prenden los primeros bombillos del mapa porque tú y la inteligencia artificial escriben el mismo HTML básico. Solo hay una forma de empezar un documento.
Haz una modificación pequeña para confirmarlo: ve al title y cambia café de especialidad por café del barrio. Guarda y abre con Live Server. Vas a notar que el cambio no aparece en el contenido de la página, sino arriba, en el título de la pestaña, porque esa etiqueta vive en el head.
En la siguiente clase vas a descubrir que dentro del body no todo se escribe igual. Hay etiquetas que dicen esto es navegación, esto es contenido principal o esto es pie de página, y eso le importa al navegador, a la inteligencia artificial y a ti. ¿Qué cambio harías tú primero al HTML de tu proyecto? Cuéntalo en los comentarios.
