HTML desde Cero: Crea tu Primera Página Web paso a paso

¿Alguna vez miraste el código fuente de una página web y sentiste que estabas leyendo jeroglíficos alienígenas? 👽 Tranquilo/a. Hoy eso cambia para siempre.

Seamos honestos: la primera vez que alguien ve <html>, <body> y un montón de símbolos raros, la reacción natural es cerrar la pestaña y pedir una pizza. Pero resulta que HTML es uno de los lenguajes más fáciles de aprender que existen. No necesitas ser un genio ni tener un doctorado en matemáticas. Solo necesitas ganas, un bloc de notas y este artículo.

Así que agarra tu bebida favorita ☕, abre el editor de texto que más te guste y vamos a construir tu primera página web juntos, paso a paso, sin tecnicismos innecesarios y con mucho sentido del humor.

¿Qué diablos es HTML?

HTML son las siglas de HyperText Markup Language, que en cristiano significa «lenguaje de marcado de hipertexto». Si eso suena complicado, piénsalo así: HTML es como el esqueleto de una página web. No la hace bonita (eso es trabajo del CSS, el maquillador del equipo), pero define qué hay y dónde va.

🧠 Analogía rápida: Si una página web fuera una persona, HTML sería los huesos, CSS sería la ropa y el peinado, y JavaScript sería la personalidad. Por hoy nos quedamos con los huesos. ¡No te asustes!

Toda página web que hayas visitado en tu vida —YouTube, Instagram, la Wikipedia, la página de tu municipio que no se actualiza desde 2009— está construida sobre HTML. Tú también puedes hacerlo.

La estructura básica: el «esqueleto» de toda página

Antes de poner texto, imágenes o vídeos, necesitas una estructura base. Es como los cimientos de una casa: si los pones mal, todo lo demás se cae. La buena noticia es que siempre es la misma y puedes copiarla y pegarla sin remordimientos:

<!-- Esta es la estructura mínima de toda página web --> 
<!DOCTYPE html> 
<html lang="es"> 
	<head> 
		<meta charset="UTF-8"> 
		<title>Mi Primera Página Web</title> 
	</head> 
	<body> 
		<!-- Aquí va todo lo que el usuario verá --> 
		<h1>¡Hola, Mundo! 🌍</h1> 
		<p>Esta es mi primera página web y ya me siento un hacker.</p> 
	</body> 
</html>

💡 ¿Qué hace cada parte?
• <!DOCTYPE html> le dice al navegador que esto es HTML moderno.
• <head> contiene información invisible para el usuario (título, fuentes, SEO…).
• <body> es el escenario: todo lo que va aquí se ve en pantalla.

Textos, listas y enlaces: dando vida a tu página

Una vez tienes el esqueleto, hora de ponerle carne. Los tres elementos más usados en cualquier página son los textos, las listas y los enlaces. Son el pan de cada día del desarrollador web.

Textos y encabezados

HTML tiene 6 niveles de encabezados, del <h1> (el más grande, como el título de un periódico) al <h6> (el más pequeño, como la letra chiquita de un contrato). Para párrafos normales se usa <p>.

<h1>Soy el título principal</h1> 
<h2>Soy un subtítulo</h2> 
<p>Y yo soy un párrafo con información útil (o inútil, tú decides).</p>
 <p>Puedes poner <strong>texto en negrita</strong> o <em>en cursiva</em> fácilmente.</p>

Listas: para los que aman el orden (y los que no)

<!-- Lista sin orden (bullets) --> 
<ul> 
	<li>Pizza 🍕</li> 
	<li>Código 💻</li> 
	<li>Más pizza 🍕</li> 
</ul> 
<!-- Lista numerada --> 
<ol> <li>Abrir el editor</li> 
	<li>Escribir HTML</li> 
	<li>Sentirse programador/a</li> 
</ol>

Enlaces: la magia del hipertexto

La etiqueta <a> (de anchor) crea enlaces. Con el atributo href le dices adónde lleva. Es literalmente la base de toda la web tal como la conocemos:

<a href="https://escueladeprogramacion.net" target="_blank"> Visita Escuela de Programación 🚀 </a>

Imágenes y multimedia: porque una imagen vale más que mil etiquetas

Agregar imágenes en HTML es tan sencillo que te va a dar risa. La etiqueta <img> no necesita cerrarse (es de las pocas así de rebeldes) y tiene dos atributos clave: src (la dirección de la imagen) y alt (una descripción para cuando la imagen no carga, o para lectores de pantalla).

<!-- Imagen desde internet --> 
<img src="https://placekitten.com/400/300" alt="Un gatito adorable como fondo de pantalla" width="400" > 
<!-- Vídeo de YouTube embebido --> 
<iframe src="https://www.youtube.com/embed/TU_ID_AQUI" width="560" height="315" allowfullscreen ></iframe>

⚠️ Ojo con el atributo alt: No lo omitas por pereza. Además de accesibilidad, Google lo lee para entender tus imágenes. Es bueno para el SEO y para el karma del desarrollador.

Crea tu primera página web en 4 pasos

1. Abre el Bloc de Notas (Windows) o TextEdit (Mac) Cualquier editor de texto sirve. Si quieres sentirte más pro, instala VS Code (gratis).
2. Copia la estructura base y personalízala Cambia el título, añade un encabezado, escribe un párrafo con tu nombre. Hazla tuya.
3. Guarda el archivo como index.html El nombre index es el estándar que todos los servidores web entienden.
4. Ábrelo en tu navegador favorito Doble clic sobre el archivo y... ¡boom! Tu página web, corriendo en local. Celebra.

¿Qué cubrimos en este artículo?

🦴 Estructura HTML

DOCTYPE, head, body y cómo se relacionan entre sí.

✍️ Textos y listas

Encabezados, párrafos, negritas, listas ordenadas y sin orden.

🖼️ Imágenes y multimedia

Cómo insertar imágenes, vídeos e iframes de forma correcta.

🎯 ¿Cuánto aprendiste hoy?

No te quedes solo con la teoría. Pon a prueba tus conocimientos con nuestro test gratuito de introducción a HTML y CSS. Son preguntas cortitas, sin trampa y con resultados inmediatos. ¿Te atreves?

👉 Hacer el Test Ahora — ¡Es Gratis! 

Conclusión: ya no eres un/a completo/a ignorante en HTML 🎉

En serio, felicidades. Pasaste de ver código como si fueran caracteres chinos a entender qué hace cada etiqueta y por qué importa. Eso es un cambio enorme. HTML es la puerta de entrada al mundo del desarrollo web, y acabas de abrir esa puerta de par en par.

El siguiente paso natural es aprender CSS para darle estilo a lo que construiste hoy —colores, tipografías, márgenes, el glamour del mundo web—. Pero eso es historia para otro artículo. Por ahora, haz el test, comparte esta entrada con alguien que también quiera aprender, y vuelve por más. 🚀

🔖 Comparte este artículo si te ayudó. Cada share motiva a más personas a aprender programación — y nos da fuerzas para escribir el próximo tutorial con el mismo amor y humor. 😄