Aprender a crear una página web desde el bloc de notas es la manera más directa de entender qué hace realmente un navegador con el código HTML. En pocos minutos puedes pasar de un archivo de texto plano a una página real con título, párrafos, enlaces e imágenes, sin instalar nada. Esta guía es para quien empieza desde cero y quiere comprender el vocabulario antes de delegarle tareas a una inteligencia artificial.
¿Qué necesitas antes de escribir tu primera línea de HTML?
Antes de abrir el bloc de notas, conviene preparar Windows para que muestre las extensiones de archivo. Ese pequeño ajuste es el que hace posible todo lo demás [0:18].
- Abre el explorador de archivos.
- Entra a la pestaña vista y baja hasta mostrar.
- Activa la opción extensiones de nombre de archivo.
Cuando lo haces, todos tus archivos en el escritorio empiezan a mostrar al final un punto seguido de letras, como .txt o .html. Esa terminación es la extensión, y es lo que le indica al sistema operativo cómo tratar el archivo.
¿Qué es una extensión de archivo? Es la terminación que sigue al punto en el nombre (por ejemplo .html o .txt) y le dice al sistema operativo qué programa debe abrirlo y cómo interpretarlo.
¿Cómo convertir un archivo de texto en una página web?
El experimento clave es escribir una sola frase en el bloc de notas y guardarla con la extensión correcta [0:42]. Yo escribo Hola, soy una página de café de especialidad y guardo el archivo en el escritorio.
Al guardar hay un detalle crítico: en el campo tipo, si lo dejas en documentos de texto, Windows agrega un .txt invisible al final y termina llamándose pagina.html.txt. Para evitarlo, cambia ese campo a todos los archivos y entonces sí escribe pagina.html.
Cuando le das doble clic, el archivo no abre en el bloc de notas ni en Word: abre en el navegador. El contenido es idéntico, lo único que cambió fue la extensión, y eso bastó para que el sistema operativo lo tratara como una página web.
¿Qué son las etiquetas HTML y para qué sirven?
Una página real necesita más que texto suelto. Para eso existen las etiquetas, que son instrucciones que el navegador entiende [2:20]. Una etiqueta se escribe entre los signos < y >, y normalmente abre y cierra envolviendo contenido.
¿Cómo funcionan los encabezados y párrafos?
Si escribes <h1>Café del barrio</h1> y debajo <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. Tú no elegiste el tamaño, elegiste el significado.
h1 es el título principal o heading de nivel uno.h2 y h3 son subtítulos cada vez más pequeños.p es un párrafo de texto normal.
La página gana jerarquía no porque diseñes tamaños, sino porque le dices al navegador qué papel cumple cada bloque.
¿Qué es un atributo en HTML?
Algunas etiquetas necesitan información adicional. La etiqueta <a> crea un enlace, pero un enlace sin destino no sirve, así que se acompaña del atributo href con la dirección entre comillas [4:25].
html
<a href="https://google.com">Búscanos en Google</a>
Al recargar, aparece el texto en azul subrayado y al hacer clic lleva a Google. El atributo es información extra que viaja con la etiqueta y le da sentido completo.
¿Qué es el atributo href? Es el atributo que va dentro de la etiqueta <a> e indica la URL a la que lleva el enlace cuando alguien hace clic.
¿Cómo insertar una imagen con la etiqueta img?
Para mostrar una imagen se usa <img>, y aquí aparece algo distinto: esta etiqueta no se cierra [5:35]. Las etiquetas como h1 o p envuelven contenido, pero img ella misma es la imagen, así que no necesita cierre.
En el ejemplo, busco una foto de café en Google, copio la dirección de la imagen y la pego dentro del atributo src. La etiqueta queda con dos atributos al mismo tiempo:
src: indica de dónde viene la imagen.alt: describe en texto qué muestra la imagen, útil cuando no carga o cuando alguien usa un lector de pantalla.
Guardas con Ctrl + S, recargas el navegador y la imagen aparece dentro de tu página. Una etiqueta puede tener varios atributos a la vez, y cada uno cumple una función específica.
¿Por qué se dice que el HTML es un árbol?
Si miras tu código con atención, verás que hay etiquetas que viven dentro de otras: el h1 dentro del documento, el href dentro del <a> [7:40]. El HTML no es una lista plana, es una estructura de árbol con etiquetas padres y etiquetas hijas.
Esto no es un detalle decorativo. Más adelante, cuando empieces a programar con JavaScript, ese lenguaje recorre el árbol para encontrar elementos y modificarlos. Por ahora basta con que recuerdes la idea: el HTML se organiza como un árbol jerárquico.
Hasta aquí estás maquetando, no programando. Maquetar con HTML es darle estructura al contenido para que el navegador sepa qué mostrar y cómo.
¿Por qué aprender HTML si una IA puede generarlo por ti?
La pregunta es legítima. La respuesta también: las etiquetas que aprendiste como h1, p, a e img son vocabulario. Sin ese vocabulario, cuando una inteligencia artificial te entregue una página, no vas a poder leerla, ni pedir cambios precisos, ni decidir si lo que te dio está bien.
Dominar este lenguaje básico es la diferencia entre aceptar pasivamente lo que la IA produce y dirigirla con criterio hacia el resultado que quieres. ¿Qué etiqueta te resultó más curiosa de probar? Cuéntame en los comentarios.
