¿Qué es HTML? (Y qué NO es)
¡Hola, Maker! Seguro usas internet todos los días para ver videos, jugar o revisar redes sociales. Pero, ¿te has preguntado cómo se construyen esas páginas? Hoy vas a descubrir el secreto mejor guardado de la web.
1. Imagina que construyes un edificio
Cuando un arquitecto diseña una casa, lo primero que se levanta son las columnas de concreto, las paredes de ladrillo gris y el techo. En ese momento la casa no tiene pintura, ni ventanas bonitas, ni muebles; es solo la estructura básica.
Eso mismo es HTML (HyperText Markup Language). Es el lenguaje que usamos para decirle al navegador (como Google Chrome o Safari): "Oye, aquí va un título, aquí va un párrafo y más abajo va una imagen". HTML solo acomoda las piezas en su lugar.
- HTML: Es el esqueleto o los ladrillos (lo que sostiene todo).
- CSS: Es la pintura, la ropa y los adornos (lo que hace que se vea bonito).
- JavaScript: Son los músculos y el cerebro (lo que le da movimiento y funciones).
2. Desarmando el nombre
Aunque suena a código secreto de la NASA, las siglas de HTML son muy sencillas si las explicamos así:
- HyperText (Hipertexto): Es simplemente un texto inteligente. Es un texto que, si le das clic, te lleva a otra página (un enlace o link).
- Markup (Marcado / Etiquetas): Imagina que tienes un marcador fluorescente y vas etiquetando tu cuaderno:
[Título],[Texto],[Foto]. HTML hace exactamente eso usando "etiquetas". - Language (Lenguaje): Porque es la forma en la que nos comunicamos con las computadoras.
🚨 ¡Alerta Maker! HTML NO es un lenguaje de programación (como Python o C++), porque no hace cálculos matemáticos ni toma decisiones inteligentes. Es un lenguaje de ESTRUCTURA.
3. El superpoder de las Etiquetas 📦
En HTML todo se escribe dentro de "etiquetas". Piensa en ellas como cajas que abres, metes un contenido y luego las cierras para que no se desborde nada.
Para escribir una etiqueta usamos los signos de menor que < y mayor que >. ¡Mira este ejemplo!
<h1>¡Mi primer título en la web!</h1>
<p>Este es un párrafo común y corriente donde explico mi proyecto.</p>¿Cómo funciona esta magia?
| Parte del Código | ¿Qué significa para la computadora? |
|---|---|
<p> |
Etiqueta de apertura: Aquí empieza un párrafo. |
| Texto adentro | El mensaje o contenido que van a leer las personas. |
</p> |
Etiqueta de cierre: Tiene una barra inclinada /. Aquí termina el párrafo. |
Mini-Reto Maker en Clase
¿Te animas a descifrar el código? Si la etiqueta <h1> significa "Título Grande" (Heading 1) y <p> significa "Párrafo" (Paragraph)... ¿Qué crees que pasará si escribes esto en tu editor?
<h1>Mi Robot Favorito</h1>
<p>Mi robot funciona con una placa Arduino y tiene dos motores.</p>
¡Exacto! El navegador creará un título gigante y una descripción limpia justo debajo. ¡Ya estás haciendo tu primera página web!