¿Te imaginas crear una página web sin instalar nada, usando solo el bloc de notas que viene en tu computador? En los próximos minutos vas a descubrir cómo el HTML convierte un archivo de texto plano en una página real que abre el navegador, aprendiendo el vocabulario mínimo que necesitas para dirigir lo que ves en pantalla.
Esto es para ti si estás empezando en desarrollo web, si quieres entender qué hay detrás de cualquier sitio o si trabajas con inteligencia artificial y necesitas leer y corregir el código que te entrega.
¿Qué hace que un archivo se abra como página web?
Todo empieza con un detalle que parece menor pero lo cambia todo: la extensión del archivo. En Windows conviene activar primero la vista de extensiones desde el explorador de archivos, en la pestaña vista, mostrar y extensiones de nombre de archivo [0:18]. Así dejas de trabajar a ciegas.
El experimento es simple. Abres el bloc de notas, escribes una frase como "Hola, soy una página de café de especialidad" y al guardar le pones pagina.html en lugar de .txt. Ojo aquí: si dejas el campo tipo en documentos de texto, Windows te agrega un .txt invisible al final y arruina el truco. Cámbialo a todos los archivos antes de guardar [1:25].
Al darle doble clic, el archivo no abre en Word ni en el bloc de notas, abre en el navegador. Mismo contenido, misma frase, pero la extensión .html le dice al sistema operativo quién debe interpretarlo.
¿Qué es una extensión de archivo? Es la parte final del nombre, después del punto, que le indica al sistema operativo qué tipo de archivo es y con qué programa abrirlo. Cambiar de .txt a .html cambia quién lo lee.
¿Qué son las etiquetas HTML y para qué sirven?
El navegador no solo muestra el texto, también lee instrucciones llamadas etiquetas. Una etiqueta vive entre los signos < y > y le dice al navegador cómo tratar lo que envuelve.
Si en el bloc de notas escribes:
html
<h1>Café del barrio</h1>
<p>Abrimos todos los días desde las 7:00 a.m.</p>
Al recargar el navegador verás el título grande y en negrita, y el párrafo en tamaño normal [3:00]. Tú no elegiste tamaños, elegiste etiquetas. El h1 es el encabezado principal, el p es un párrafo, y el navegador ya sabe qué hacer con cada uno.
La jerarquía visual de una página no se decide pintando, se decide nombrando. Si necesitas subtítulos, usas h2, y si hay un nivel más abajo, h3. Así construyes orden sin tocar diseño.
¿Cómo se agregan enlaces e imágenes en HTML?
Hasta ahora todas las etiquetas envuelven texto: abren, contienen y cierran. Pero hay etiquetas que cargan información extra llamada atributo.
Un enlace se escribe así:
html
<a href="https://google.com">Búscanos en Google</a>
La etiqueta a por sí sola no sirve, porque un enlace sin destino no es un enlace. El atributo href le dice a dónde lleva [5:14]. Sin ese atributo, no hay link.
La imagen funciona distinto. Copias la dirección de una imagen desde Google con clic derecho y la pegas dentro de la etiqueta img:
html
<img src="url-de-la-imagen" alt="taza de café">
Fíjate en algo curioso: la etiqueta img no se cierra con </img>. ¿Por qué? Porque no envuelve nada, ella misma es la imagen [6:54]. Lleva dos atributos clave: src, que indica de dónde viene la imagen, y alt, que es la descripción en texto para cuando la imagen no carga o para lectores de pantalla que usan personas con discapacidad visual.
¿Qué es un atributo en HTML? Es información extra que acompaña a una etiqueta y modifica su comportamiento. Por ejemplo, href define el destino de un enlace y src define la fuente de una imagen.
¿Por qué se dice que el HTML es un árbol?
Si miras tu código con calma, vas a notar que hay etiquetas viviendo dentro de otras. El h1 está dentro del documento, el href dentro del a. HTML no es una lista plana de etiquetas una al lado de otra, es un árbol con etiquetas padres y etiquetas hijas [8:17].
Esta estructura importa más adelante. Cuando empieces a programar con JavaScript, vas a poder dar instrucciones como "agarra ese título y cámbialo", y el lenguaje recorrerá el árbol para encontrarlo. Por ahora basta con que guardes la idea: HTML es un árbol.
Y ojo con algo importante: hasta aquí no estás programando. Estás maquetando, que es estructurar contenido con HTML. Programar viene después, cuando le des comportamiento a esa estructura.
¿Cuál es la diferencia entre maquetar y programar? Maquetar es definir la estructura y jerarquía del contenido con HTML. Programar es darle lógica y comportamiento dinámico, normalmente con JavaScript.
¿Por qué aprender HTML si la inteligencia artificial puede generarlo?
Es una pregunta justa. La respuesta es que etiquetas como h1, p, a e img son vocabulario [8:55]. Sin ese vocabulario, cuando una IA te entregue una página no vas a poder leerla, ni pedir cambios precisos, ni decidir si lo que te dio está bien.
Lo que escribiste hoy ya es una página web real: un título, un subtítulo, dos párrafos, un enlace y una imagen. Básica, pero tuya, escrita sin instalar nada. Y ese vocabulario es lo que va a marcar la diferencia entre aceptar lo que te dé una IA o dirigir exactamente lo que quieres.
¿Qué etiqueta te pareció más útil para tu primera página? Cuéntame en los comentarios.
