Cuando abres una página en Chrome, Edge o Firefox, el navegador recibe un archivo de texto y lo lee de arriba abajo. Ese texto no es cualquier texto: trae etiquetas, palabras entre signos de menor y mayor, como <h1>, que le dicen al navegador qué es cada cosa: «esto es un título», «esto es un párrafo», «aquí va una imagen».

Ese lenguaje de etiquetas se llama HTML. Pone el contenido: qué hay en la página y en qué orden. Hay otro lenguaje, CSS, que pone el aspecto: colores, tamaños, tipos de letra y dónde se acomoda cada cosa. Primero vamos con HTML (lecciones 1 a 4) y luego con CSS (5 a 9).

Las etiquetas casi siempre van en pareja: una que abre y una que cierra. La de cierre es igual pero con una diagonal: <p> abre un párrafo y </p> lo cierra. Lo que queda entre las dos es el contenido de la etiqueta.

Esta es la página más chica que se puede escribir. Fíjate en las cuatro partes: la primera línea le dice al navegador «esto es HTML moderno»; <html> envuelve todo; <head> guarda información que no se ve en la ventana (como el título de la pestaña); <body> es el cuerpo, lo que sí se ve.

<!doctype html>
<html>
  <head>
    <title>Mi primera página</title>
  </head>
  <body>
    <h1>Hola, mundo</h1>
    <p>Esta es mi primera página.</p>
  </body>
</html>

El texto de <title> aparece en la pestaña del navegador, no en la ventana. Los espacios al principio de cada línea son solo para que tú lo leas ordenado: el navegador los ignora.

Cómo guardarla y abrirla. Abre el Bloc de notas (o cualquier editor de texto), escribe el código y guárdalo con un nombre que termine en .html, por ejemplo mi-pagina.html. Luego dale doble clic al archivo: se abre en el navegador. Si lo guardas como .txt, el navegador lo enseña como texto y no como página. En el Taller web de la sala no necesitas guardar nada: escribes a la izquierda y la página aparece a la derecha.

Casi todo lo que hay en una página es texto, y el HTML tiene una etiqueta para cada tipo de texto:

Normalmente una página tiene un solo h1 (el título de la página) y varios h2 para las secciones. No escojas h3 «porque es del tamaño que me gusta»: el tamaño se cambia con CSS (lección 5); las h son para decir qué tan importante es el título.

<h1>Mis gustos</h1>
<h2>Deportes</h2>
<p>Juego <b>fútbol</b> los sábados.<br>Y a veces básquet.</p>
<!-- esto es una nota, no se ve -->
<p>Mi equipo favorito es <i>Pumas</i>.</p>

Por eso este código se ve en un solo renglón: «Hola a todos»:

<p>Hola


      a todos</p>

Acentos y ñ. Si las letras con acento salen raras (como «Música»), es que el navegador no sabe en qué alfabeto está escrito el archivo. Se arregla con una línea dentro del head: <meta charset="utf-8">. Ponla siempre, justo después de <head>. Es de las que no se cierran.

Las etiquetas se pueden anidar (una dentro de otra), pero se cierran en orden inverso, como cajas: <p>Hola <b>amigo</b></p>. La que abrió al último cierra primero.

Para escribir una lista, primero dices de qué tipo es y luego metes los elementos, uno por uno, en etiquetas <li> (de list item):

• <ul> es una lista sin orden: cada elemento lleva un punto (unordered list).
• <ol> es una lista ordenada: el navegador le pone 1, 2, 3… solo (ordered list).

<h2>Lo que me gusta</h2>
<ul>
  <li>Videojuegos</li>
  <li>Pizza</li>
  <li>Dibujar</li>
</ul>
<h2>Cómo hago un sándwich</h2>
<ol>
  <li>Saco dos panes.</li>
  <li>Les pongo jamón.</li>
  <li>Los junto.</li>
</ol>

Los enlaces son lo que hace que la web sea una red: un texto en el que haces clic y te lleva a otro lado. Se escriben con la etiqueta <a> y un atributo llamado href que dice a dónde va. Un atributo es un dato extra que se escribe dentro de la etiqueta que abre, con la forma nombre="valor".

El href puede llevar tres cosas:

1. Otro archivo tuyo, en la misma carpeta: <a href="gustos.html">Mis gustos</a>.
2. Otro sitio, con la dirección completa que empieza con https: <a href="https://es.wikipedia.org">Wikipedia</a>.
3. Una parte de la misma página. Le pones un nombre a esa parte con el atributo id, y en el enlace lo escribes con # adelante: <h2 id="horario">Horario</h2> y arriba <a href="#horario">Ir al horario</a>. Al hacer clic la página baja hasta ahí.

Si quieres que el enlace se abra en una pestaña nueva (muy usado para sitios ajenos), agregas otro atributo: <a href="https://es.wikipedia.org" target="_blank">Wikipedia</a>. Los atributos van separados por un espacio, en cualquier orden.

Una imagen se pone con <img>. Es una etiqueta que no se cierra (no tiene contenido entre abre y cierra: todo va en atributos):

<img src="gato.jpg" alt="Mi gato Tom dormido" width="200">

• src (source): qué archivo mostrar. Si está en la misma carpeta que tu página, basta el nombre. También puede ser una dirección completa de internet.
• alt: un texto que describe la imagen. Se muestra si la imagen no carga y lo leen en voz alta los programas que usan las personas ciegas. Siempre ponlo.
• width: el ancho en píxeles. Si no lo pones, la imagen sale de su tamaño real (a veces enorme). La altura se ajusta sola para que no se deforme.

Las tablas sirven para datos en filas y columnas, como un horario. Se arman así: <table> envuelve todo; cada fila es un <tr> (table row); dentro de la fila, cada celda es un <td> (table data). Las celdas de la primera fila, las que dicen qué es cada columna, se escriben con <th> (table header) y salen en negritas.

<table>
  <tr><th>Hora</th><th>Lunes</th><th>Martes</th></tr>
  <tr><td>8:00</td><td>Mate</td><td>Español</td></tr>
  <tr><td>9:00</td><td>Inglés</td><td>Mate</td></tr>
</table>

Cuenta: 3 filas (tr) y 3 celdas en cada una: 9 celdas en total. Todas las filas deben tener el mismo número de celdas; si a una le falta una, la tabla se ve chueca. Sin CSS la tabla sale sin líneas; en la lección 7 le pones bordes.

Un truco para no perderte: escribe cada fila en un renglón, como arriba. Así ves de un vistazo cuántas celdas tiene cada una.

Hasta ahora tu página se ve como todas las páginas sin arreglar: letra negra, fondo blanco. CSS (hojas de estilo) es el lenguaje que le cambia la cara. No agrega contenido: le dice al navegador cómo se ve lo que ya escribiste en HTML.

El CSS se escribe en reglas. Cada regla tiene dos partes: a quién se aplica (el selector) y qué le cambia (una lista de propiedad: valor entre llaves). Cada propiedad termina en punto y coma.

h1 {
  color: #2B4CFF;
  text-align: center;
}
p {
  font-size: 20px;
  font-family: Arial, sans-serif;
}

¿Dónde se escribe? Dentro de una etiqueta <style>, en el <head>. Si lo escribes en el body sin la etiqueta style, el navegador lo enseña como texto. Así queda una página completa con su CSS:

<head>
  <meta charset="utf-8">
  <title>Con estilo</title>
  <style>
    body { background-color: #FFF8D6; }
    h1 { color: #2B4CFF; text-align: center; }
    p { font-size: 20px; }
  </style>
</head>
<body>
  <h1>Mis gustos</h1>
  <p>Me gusta la música.</p>
</body>

Las cinco propiedades con las que más vas a jugar:

Los colores se escriben de dos formas. Por nombre, en inglés: red, blue, green, yellow, orange, purple, pink, gray, black, white. O en hexadecimal: un # y seis letras o números, como #2B4CFF. Las seis cifras son tres parejas: cuánto rojo, cuánto verde y cuánto azul lleva, de 00 (nada) a FF (todo). #FF0000 es rojo puro, #000000 negro, #FFFFFF blanco. No tienes que memorizarlos: en el Taller web y en cualquier buscador hay un selector de colores que te da el código.

Las medidas: px son píxeles, los puntitos de la pantalla; 16px es el tamaño normal de la letra. % es un porcentaje de lo que mide el que lo contiene: una caja con width: 50% ocupa la mitad del ancho de la página, en cualquier pantalla.

Con p { color: red; } todos los párrafos se ponen rojos. ¿Y si solo quieres uno? Para eso hay tres formas de escoger (seleccionar) a quién le aplicas una regla:

Una clase es un nombre que tú inventas y le pones a los elementos con el atributo class. En el CSS la llamas con un punto adelante. Un id también es un nombre tuyo, pero solo puede haber uno en toda la página con ese id; en el CSS lleva #. Sin el punto o el #, el navegador cree que es una etiqueta que no existe y no pasa nada.

<style>
  .aviso { background-color: #FFD23F; }
  #titulo { color: #2B4CFF; }
</style>
…
<h1 id="titulo">Mi página</h1>
<p class="aviso">Examen el viernes.</p>
<p>Este párrafo es normal.</p>
<p class="aviso">Traer calculadora.</p>

Un elemento puede tener varias clases, separadas con espacio: <p class="aviso grande"> recibe las reglas de .aviso y las de .grande. Así combinas estilos como si fueran piezas.

También puedes escoger algo que está dentro de otra cosa: el selector descendiente. Se escriben los dos con un espacio en medio: ul li { color: green; } escoge solo los li que estén dentro de un ul (los de las listas con puntos), y deja en paz a los de las listas con números. Y .menu a { } escoge los enlaces que están dentro de algo con la clase menu.

¿Y si dos reglas chocan? Gana la más específica: el id le gana a la clase, y la clase le gana a la etiqueta. Si son igual de específicas, gana la que está más abajo en el CSS.

Para el navegador, cada elemento es una caja rectangular: un párrafo, un título, una imagen, una lista. Y cada caja tiene cuatro capas, de adentro hacia afuera:

1. El contenido: el texto o la imagen. Su ancho se fija con width.
2. El padding: relleno por dentro, entre el contenido y la línea. Es del mismo color que el fondo de la caja.
3. El border: la línea alrededor. Se escribe con grosor, tipo y color: border: 2px solid #10203A;.
4. El margin: espacio por fuera, el que separa la caja de sus vecinas. Es transparente.

.tarjeta {
  width: 200px;
  padding: 16px;
  border: 4px solid #10203A;
  margin: 20px;
  background-color: #FFD23F;
}

Si pones un solo número, padding: 16px, va igual por los cuatro lados. Puedes dar dos: padding: 8px 20px es 8 arriba y abajo, 20 a los lados. Lo mismo con margin. Y para un solo lado: margin-top, margin-bottom, margin-left, margin-right; igual con padding.

Dos propiedades que hacen que las cajas se vean bien bonitas: border-radius: 12px; redondea las esquinas, y box-shadow: 0 4px 12px #AAB4C8; le pone una sombra (corrido en x, corrido en y, qué tan difuminada, color), como si la caja flotara.

Centrar una caja. Si la caja tiene width, con margin: auto; el navegador reparte el espacio sobrante en partes iguales a izquierda y derecha, y la caja queda en medio. Es la forma más usada de centrar todo el contenido de una página: main { width: 600px; margin: auto; }.

Las cajas se apilan una debajo de otra, de arriba abajo. Pero un menú, unas tarjetas o una barra de botones se ven mejor en fila. Para eso está flex: se lo pones al contenedor (la caja de afuera) y sus hijos (las cajas de adentro) se forman en fila.

<style>
  .menu { display: flex; gap: 12px; }
  .menu a { padding: 8px 14px; background-color: #FFD23F; }
</style>
…
<nav class="menu">
  <a href="#inicio">Inicio</a>
  <a href="#gustos">Gustos</a>
  <a href="#horario">Horario</a>
</nav>

<nav> es una etiqueta para «aquí va el menú»; se comporta como una caja normal. Lo importante: display: flex va en .menu, el padre, no en los enlaces. gap es el espacio entre los hijos (12 px aquí), sin tener que ponerles margin.

justify-content acomoda la fila a lo ancho: flex-start (pegados a la izquierda, lo normal), center (juntos en medio), space-between (el primero a la izquierda, el último a la derecha, el espacio repartido entre ellos). Muy útil: para poner el nombre a la izquierda y el menú a la derecha en un encabezado, el encabezado con display: flex; justify-content: space-between;.

Y en el celular. La pantalla de un celular es angosta: tres tarjetas en fila quedan aplastadas. La solución son las reglas por tamaño de pantalla: @media (max-width: 600px) { … } significa «estas reglas solo valen cuando la pantalla mide 600 px o menos». Adentro cambias la fila por columna:

.tarjetas { display: flex; gap: 16px; }
@media (max-width: 600px) {
  .tarjetas { flex-direction: column; }
}

Hay un detalle sin el cual el celular hace trampa: muestra la página «en chiquito», como si fuera una computadora, y tu @media nunca se aplica. Se arregla con una línea en el head que le dice «mide la pantalla de verdad»: <meta name="viewport" content="width=device-width, initial-scale=1">. Cópiala tal cual en todas tus páginas, junto al meta charset.

Para probar cómo se ve en celular sin celular: en el navegador, clic derecho → Inspeccionar, y el botón de celular/tableta arriba del panel. Puedes angostar la ventana y ver cuándo cambia.

Las páginas no solo se leen: también se les escribe. Los formularios son las casillas y botones con los que el visitante te manda algo. Tres etiquetas:

• <input>: una casilla donde se escribe. No se cierra. El atributo type dice de qué tipo: text (texto, el normal), number (solo números), password (puntitos), email, date.
• <label>: el texto junto a la casilla que dice qué poner ahí. Con el atributo for igual al id de la casilla, al hacer clic en el texto se activa la casilla.
• <button>: un botón. Lo que está entre las etiquetas es lo que dice.

<form>
  <label for="nombre">Tu nombre</label>
  <input type="text" id="nombre" placeholder="Escribe aquí">
  <label for="edad">Edad</label>
  <input type="number" id="edad">
  <button>Enviar</button>
</form>

placeholder es el texto gris de pista que se ve dentro de la casilla y desaparece cuando escribes. <form> envuelve todo el formulario. Por ahora el botón no manda nada a ningún lado: para recibir lo que escriben hace falta un programa del otro lado (eso es otro curso). Pero la parte que se ve, ya la sabes hacer.

Un botón bonito. Un botón es una caja, así que todo lo de la lección 7 le sirve: padding, border, border-radius, colores. Y hay algo nuevo: :hover. Se pega al selector y significa «cuando el mouse está encima». Con cursor: pointer; el mouse se vuelve manita, como en los enlaces.

button {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background-color: #2B4CFF;
  color: white;
  font-size: 16px;
  cursor: pointer;
}
button:hover {
  background-color: #10203A;
}

Lo mismo sirve para los enlaces: a:hover { color: red; } los pone rojos al pasar el mouse. Y para las casillas: input { padding: 8px; border: 2px solid #AAB4C8; border-radius: 6px; }.

Ya tienes todas las piezas. El proyecto es una página personal con cinco partes, de arriba abajo: un encabezado con tu nombre y el menú, una sección «Sobre mí», tu lista de gustos, tu tabla de horario y un pie de página. Cada parte va en una caja con su id (para que el menú llegue a ella con #) y su estilo.

Hay etiquetas que son cajas con nombre, para que la página se entienda: <header> (encabezado), <nav> (menú), <main> (lo principal), <section> (una sección), <footer> (pie). Se comportan como un <div> (la caja genérica), pero dicen qué son. Este es el esqueleto completo; tú cambias el contenido:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Página de Ana</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 0; background-color: #F6F7FB; }
    header { display: flex; justify-content: space-between; padding: 16px; background-color: #10203A; color: white; }
    nav { display: flex; gap: 12px; }
    nav a { color: #FFD23F; }
    main { width: 90%; margin: auto; }
    section { background-color: white; padding: 16px; margin: 16px 0; border-radius: 10px; }
    table { border-collapse: collapse; }
    th, td { border: 1px solid #AAB4C8; padding: 6px 10px; }
    footer { text-align: center; padding: 12px; color: #3E4E6B; }
    @media (max-width: 600px) { header { flex-direction: column; gap: 8px; } }
  </style>
</head>
<body>
  <header>
    <b>Ana García</b>
    <nav>
      <a href="#sobre-mi">Sobre mí</a>
      <a href="#gustos">Gustos</a>
      <a href="#horario">Horario</a>
    </nav>
  </header>
  <main>
    <section id="sobre-mi">
      <h2>Sobre mí</h2>
      <img src="ana.jpg" alt="Foto de Ana" width="120">
      <p>Tengo 12 años y voy en <b>primero de secundaria</b>.</p>
    </section>
    <section id="gustos">
      <h2>Mis gustos</h2>
      <ul><li>Dibujar</li><li>Videojuegos</li><li>Tacos</li></ul>
    </section>
    <section id="horario">
      <h2>Mi horario</h2>
      <table>
        <tr><th>Hora</th><th>Lunes</th><th>Martes</th></tr>
        <tr><td>8:00</td><td>Mate</td><td>Español</td></tr>
      </table>
    </section>
  </main>
  <footer>Hecha por Ana · 2026</footer>
</body>
</html>

Fíjate en dos cosas nuevas: th, td { } con coma aplica la misma regla a las dos etiquetas; y border-collapse: collapse junta las líneas de la tabla para que no se vean dobles.

Cómo encontrar errores. Cuando algo no se ve como esperabas, casi siempre es una etiqueta sin cerrar o un nombre que no coincide (la clase en el HTML dice una cosa y el CSS otra). Haz esto:

1. Abre la página en el navegador, da clic derecho → Inspeccionar. Se abre un panel con tu HTML como lo entendió el navegador.
2. En la pestaña Elements (Elementos), abre las flechitas. Si una etiqueta aparece metida dentro de otra donde no debía, es que no la cerraste: el navegador cierra por ti, pero donde se le ocurre.
3. Dale clic a un elemento: a la derecha, en Styles (Estilos), ves qué reglas de CSS le llegan. Si tu regla no aparece, el selector no coincide: revisa el punto, el # o cómo escribiste la clase.
4. En el Taller web, el cuadro de abajo te marca las etiquetas que abren y no cierran.

Cuando quede lista, mándasela a alguien: guarda el archivo (y las imágenes que uses, en la misma carpeta) y compártelo. Si quieres que esté en internet con su dirección, hay sitios que publican páginas gratis; pregúntame en clase.