Una web es una casa
La IA escribe el código por ti, pero si no entiendes nada de lo que escribe, dependes de ella para todo, hasta para cambiar una coma. Este módulo no te convierte en programador: te da lo justo para no perderte.
Piensa en una web como una casa. El HTML son las paredes y las habitaciones: decide qué hay y dónde (un título, un párrafo, una foto, un botón). El CSS es la pintura, los muebles y la decoración: decide cómo se ve todo eso. Y el JavaScript es la electricidad: hace que las cosas pasen cuando pulsas un botón.
En casi todas las webs que hagas con IA verás los tres. Para empezar, con entender bien los dos primeros tienes de sobra.
No hace falta memorizar nada. Los profesionales consultan referencias todo el rato. Lo importante es saber para qué sirve cada cosa y dónde mirar.
Leer HTML sin miedo
El HTML está hecho de etiquetas: palabras entre los signos < y >. Casi siempre van en parejas: una abre y otra cierra con una barra. Todo lo que queda entre las dos es lo que se ve en la página.
Algunas etiquetas llevan atributos, que son detalles extra: a dónde lleva un enlace (href), qué foto se muestra (src) o qué nombre le damos para decorarlo luego con CSS (class).
Mira este trozo. Aunque nunca hayas visto HTML, seguro que adivinas qué aparece en pantalla:
<h1>Peluquería Carmen</h1> <p>Abierto de lunes a sábado, de 9:00 a 20:00.</p> <img src="fachada.jpg" alt="La fachada de la peluquería"> <a class="boton-llamar" href="tel:+34600000000">Llamar ahora</a>
Las etiquetas que verás casi siempre
<h1>, <h2> y <h3> son los títulos, del más importante al menos. Solo debería haber un <h1> por página: es el título principal.
<p> es un párrafo. <a> es un enlace que lleva a otra página. <img> muestra una imagen y <button> es un botón.
<ul> y <li> hacen listas con viñetas: <ul> es la lista entera y cada <li> es un punto.
<header>, <section>, <footer> y <div> son cajas. No se ven, pero agrupan cosas: la cabecera, cada sección, el pie de página. Si una web fuera una casa, serían las habitaciones.
Con estas etiquetas entiendes la mayor parte de lo que la IA te escribe. Si te sale una que no conoces, pregúntale: «¿qué hace la etiqueta <nav>?».
CSS: cómo se ve cada cosa
El CSS funciona siempre igual: primero eliges qué quieres decorar y, entre llaves, dices cómo, con líneas del tipo «propiedad: valor;».
Lo que eliges se llama selector. Puede ser una etiqueta (h1, todos los títulos principales) o una class: un nombre que tú le pones a algo en el HTML. En el ejemplo de antes, el enlace tenía class="boton-llamar"; en el CSS se escribe con un punto delante: .boton-llamar.
Este CSS decora el título y el botón de la peluquería:
h1 {
color: #c2410c;
font-size: 40px;
}
.boton-llamar {
background: #16a34a;
color: white;
padding: 16px 32px;
border-radius: 999px;
}Las propiedades que más vas a pedir
color cambia el color del texto y background el del fondo. font-size, el tamaño de la letra.
padding y margin son los que más confunden. Imagina un cojín: el padding es el relleno de dentro (el espacio entre el texto y el borde del botón) y el margin es la distancia hasta el mueble de al lado (el espacio entre ese botón y lo demás).
border-radius redondea las esquinas: con un número muy grande, el botón queda como una cápsula. Y cuando la IA coloca cosas en fila o en cuadrícula, verás display: flex o display: grid, con gap para el espacio entre ellas.
Los colores suelen ir en código hexadecimal, como #16a34a. No hace falta saberlos: el inspector te los muestra y la IA te los cambia si le dices «un verde más oscuro».
El inspector: tocar sin romper
Todos los navegadores traen una herramienta para ver las tripas de cualquier web: el inspector. Haz clic derecho sobre un título o un botón y elige «Inspeccionar» (o pulsa F12).
Se abre un panel con dos partes: a un lado el HTML, con el elemento que has pulsado resaltado; al otro, su CSS. Puedes hacer doble clic en un texto o en un color y cambiarlo: la página cambia al momento.
Lo mejor es que no rompes nada: los cambios solo existen en tu pantalla y desaparecen al recargar. Es el sitio perfecto para probar antes de pedir.
Y te da algo muy valioso: el nombre exacto de lo que quieres cambiar. Si el inspector te dice que el botón tiene class="boton-llamar", ya sabes cómo llamarlo cuando hables con la IA.
Pedir cambios con las palabras justas
Ahora puedes hablar con la IA como habla un desarrollador, pero sin dejar de ser tú. Compara «pon el botón más bonito» con un prompt que nombra el elemento, la propiedad y el valor. El primero da una sorpresa; el segundo, lo que quieres.
Para cambios pequeños, como un texto, un color o un tamaño, a veces es más rápido hacerlo tú directamente en el archivo. Y cada vez que lo haces, aprendes un poco más.
¿Te ha picado la curiosidad? En html-css.miguelliebana.com tienes mi curso gratuito «HTML y CSS desde cero»: lecciones cortas, ejemplos que editas al momento y 50 ejercicios con pistas.
En el botón con class "boton-llamar", cambia el padding a 20px 40px, el color de fondo a #c2410c y pon la letra en negrita. No toques nada más de la página.
«No toques nada más» evita que la IA aproveche para cambiar cosas que no le has pedido. Y si algo sale mal, Git te deja volver atrás: lo tienes en la guía de Git y GitHub.
Ejercicio: retoca tu web a mano
- Abre la web que hiciste en el Módulo 1 en el navegador y en tu editor de código.
- Con el inspector, busca cómo se llama el título principal y el botón más importante.
- Cambia en el inspector el color del botón hasta que te guste y apunta el código del color.
- Ahora hazlo de verdad: cambia el texto del título en el HTML y ese color en el CSS. Guarda y recarga.
- Rompe algo a propósito (borra un </p>) y mira qué pasa. Luego pide a la IA que te explique el problema.
- Pide a la IA un cambio de espaciado usando el nombre del elemento y la palabra padding o margin.