Sesión 01 · Lección 1

Fundamentos de la web

¿Qué es un archivo HTML?

HTML es el lenguaje con el que está construida toda página web del mundo. No es un lenguaje de programación — es un lenguaje de marcado. Su trabajo es describir la estructura y el contenido de una página.

🏗️
HTML
La estructura — paredes, puertas, ventanas
→
🎨
CSS
La apariencia — colores, texturas, diseño
→
⚙️
PHP / JS
La lógica — electricidad, agua, ascensor

01La estructura básica

Todo archivo HTML tiene la misma estructura base. Es como el esqueleto — siempre está ahí, aunque no lo veas.

mi_primera_web.html 
<!-- Esta línea le dice al navegador que es HTML -->
<!DOCTYPE html>

<html lang="es">

  <head>
    <!-- El head es invisible — tiene info para el navegador -->
    <meta charset="UTF-8">
    <title>Mi primera web</title>
  </head>

  <body>
    <!-- El body es lo que el usuario ve -->
    <h1>¡Hola, mundo!</h1>
    <p>Esta es mi primera página web.</p>
    <a href="https://faslatamlab.com">Ir al laboratorio</a>
  </body>

</html>
Así se ve en el navegador →
¡Hola, mundo! Esta es mi primera página web. Ir al laboratorio

02¿Qué son las etiquetas?

Las etiquetas son las instrucciones de HTML. Casi siempre van en pares: una etiqueta de apertura y una de cierre. El contenido va en el medio.

ejemplo_etiquetas.html 
<h1>Título principal</h1>       ← abre y cierra
<h2>Título secundario</h2>
<p>Un párrafo de texto</p>
<strong>Texto en negrita</strong>
<em>Texto en cursiva</em>
<br>                              ← esta no necesita cierre
<img src="foto.jpg" alt="mi foto">  ← tampoco
<h1> al <h6>
Títulos. h1 es el más grande, h6 el más pequeño.
<p>
Párrafo de texto. El más usado en contenido.
<a href="">
Enlace. El href indica a dónde va.
<img src="">
Imagen. El src es la ruta o URL de la imagen.
<div>
Contenedor genérico. Para agrupar elementos.
<ul> / <li>
Lista no ordenada y sus ítems.
Regla de oro: Toda etiqueta que abre debe cerrarse. <p> se cierra con </p>. La barra / indica cierre. Excepción: algunas etiquetas como <br>, <img> e <input> no necesitan cierre.

03¿Cómo lo crea la IA por mí?

No necesitas memorizar todas las etiquetas. Claude las conoce todas. Tu trabajo es aprender a pedir bien.

prompt de ejemplo 
Crea un archivo HTML con:
- Un título que diga "Mi tienda de ropa"
- Un párrafo de bienvenida
- Una lista con 3 productos
- Un enlace que diga "Ver más" que vaya a google.com
- Fondo oscuro, texto blanco, título en color dorado

Eso es todo lo que necesitas escribirle. Él genera el HTML completo, listo para subir.

Lo que aprendiste hoy