Módulo 1

El esqueleto de una página HTML

Toda página web, por sencilla o compleja que sea, empieza con las mismas piezas mínimas. Al principio este código te puede parecer "chino", con muchos símbolos raros. Es completamente normal: vamos a explicar cada símbolo, cada palabra y cada pieza una por una, y las vas a aprender escribiéndolas muchas veces, no memorizándolas de golpe.

En este módulo vas a...

Entender qué es una etiqueta HTML y cómo se abre y se cierra.
Aprender las 4 etiquetas obligatorias de cualquier página.
Escribir tu primer archivo index.html completo.
Practicar a encontrar y arreglar un error de HTML (¡depurar!).

¿Qué es una etiqueta?

Una etiqueta (en inglés, tag) es una palabra especial entre los símbolos < (menor que) y > (mayor que) que le dice al navegador "aquí empieza algo". Casi todas las etiquetas tienen una pareja: una de apertura y otra de cierre (igual que un paréntesis que abres y luego cierras, o como encender y apagar un interruptor).

<p>Este es un párrafo.</p>

<p> abre el párrafo, </p> lo cierra (fíjate en la barra /, que es la única diferencia entre las dos). Todo lo que está en medio es el contenido de esa etiqueta: lo que realmente se ve en la pantalla.

📖 Palabras nuevas

Etiqueta de apertura: La primera, la que "abre": por ejemplo <p>.
Etiqueta de cierre: La segunda, la que "cierra": lleva siempre una barra antes del nombre, como </p>.
Contenido: El texto (u otras etiquetas) que hay entre la de apertura y la de cierre.
Atributo: Información extra que se añade dentro de la etiqueta de apertura, como lang="es" en <html lang="es">. Verás varios atributos a lo largo del curso.

Cuidado

Olvidar la etiqueta de cierre es el error más común de quien empieza con HTML. Si algo se ve "roto" o desordenado en tu página, lo primero que debes revisar es si cerraste todo lo que abriste. No pasa nada si te equivocas: es parte normal de aprender, y en este módulo vamos a practicar precisamente a encontrar ese tipo de errores.

Las 4 piezas obligatorias

Etiqueta	¿Para qué sirve?
`<!DOCTYPE html>`	Le dice al navegador "esto es HTML moderno". Va siempre en la primera línea, sin excepción, y no lleva etiqueta de cierre.
`<html></html>`	Envuelve todo el contenido de la página. Es como las paredes exteriores de la casa.
`<head></head>`	Información sobre la página que no se ve directamente: el título de la pestaña, el idioma, los estilos CSS...
`<body></body>`	Todo lo que sí se ve en la pantalla: textos, imágenes, botones...

Dentro de <head> casi siempre verás también:

<meta charset="UTF-8"> — permite usar tildes y eñes sin que se vean raras. No hace falta entenderlo del todo: simplemente escríbelo siempre igual, en todas tus páginas.
<title></title> — el texto que aparece en la pestaña del navegador (no confundir con lo que se ve dentro de la página).

No hace falta memorizar

Nadie se sabe todas las etiquetas de HTML de memoria, ni siquiera las personas que llevan años programando. Lo importante es entender para qué sirve cada pieza y saber volver a consultarla cuando la necesites, como haremos en este mismo curso.

El esqueleto completo

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi primera página</title>
</head>
<body>
  <h1>¡Hola, mundo!</h1>
  <p>Esta es mi primera página web.</p>
</body>
</html>

Fíjate en la sangría (los espacios en blanco al principio de cada línea, normalmente 2, que se suelen escribir pulsando la tecla Tab o la barra espaciadora): no son obligatorios para el navegador —a él le da igual—, pero ayudan muchísimo a ti a leer el código, porque muestran qué está "dentro" de qué, como las capas de una cebolla. A esto se le llama anidar etiquetas: unas etiquetas dentro de otras.

Fíjate también en que <head> y <body> están los dos "dentro" de <html>, uno después del otro (nunca uno dentro del otro), y que cada etiqueta se cierra en orden inverso a como se abrió: como si metieras una caja dentro de otra caja, la última que metiste es la primera que sacas.

Practica: encuentra el error

El siguiente código tiene un pequeño error de HTML. Cámbialo en el editor de la izquierda hasta que el título "Mi taller" se vea correctamente en la vista previa y deje de haber texto "de más".

🐞 Depura este código

Tu código HTML

Así se ve en el navegador

Pista

Cuenta las etiquetas: por cada <h1> debe haber un </h1>.

Practica: escribe tu propio esqueleto

Ejercicio

En tu editor de código, abre el archivo index.html que creaste en el Módulo 0 y escribe (sin copiar y pegar, ¡a mano te lo aprenderás mejor!) el esqueleto completo. Cambia el <title> por tu nombre y el <h1> por un saludo.

Para verlo en el navegador:

Guarda el archivo con Ctrl+S (Windows/Linux) o Cmd+S (Mac). Recuerda: sin guardar, el navegador no verá tus cambios.
Busca el archivo index.html en el explorador de archivos de tu ordenador (dentro de la carpeta mi-primera-web que creaste en el Módulo 0).
Haz doble clic sobre él: debería abrirse automáticamente en tu navegador y mostrar tu saludo.
Cada vez que cambies algo en el código, guarda de nuevo y vuelve al navegador para pulsar F5 (o el botón de recargar, normalmente una flecha circular junto a la barra de direcciones) y ver el resultado actualizado.