Módulo 1 • Fundamentos Web

Aprende HTML Vanilla: El Esqueleto de la Web

HTML significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto). No es un lenguaje de programación con matemáticas complejas, sino un sistema de etiquetas que le dice al navegador web cómo ordenar los textos, fotos, videos y botones de tu página.

🔍 Anatomía de una Etiqueta HTML

¡Pasa el mouse o toca cada parte del código para descubrir para qué sirve cada elemento!

<p class="parrafo-escolar"> ¡Hola, bienvenidos a mi página! </p>

💡 Pasa el cursor por las diferentes partes de la etiqueta arriba para ver su explicación detallada.

📚 Lecciones Esenciales de HTML

Selecciona el tema que quieres dominar para ver su sintaxis y ejemplos reales:

<!DOCTYPE html> Declaración

Es la primera línea de todo archivo. Le avisa al navegador: "¡Ojo! Este documento está escrito en la versión moderna HTML5". No necesita etiqueta de cierre.

Código

<!DOCTYPE html>

<html lang="es"> Raíz

Es la etiqueta padre o raíz que envuelve absolutamente todo. Con lang="es" indicamos que nuestra página está en idioma español.

Código

<html lang="es">
  ... todo el contenido ...
</html>

<head> vs <body> Estructura

<head> guarda información interna (el título en la pestaña del navegador, enlaces a estilos).
<body> contiene todo lo que las personas sí ven en la pantalla.

Estructura Mínima

<head>
  <title>Mi Tarea de Secundaria</title>
</head>
<body>
  <h1>¡Hola Mundo!</h1>
</body>

<h1> hasta <h6> Encabezados

Igual que en tu cuaderno: <h1> es el título principal más grande (solo debe haber uno por página). <h2> y <h3> son subtítulos y temas secundarios.

Sintaxis

<h1>Historia de México</h1>
<h2>La Independencia de 1810</h2>
<h3>Personajes Principales</h3>

<p> y Saltos Párrafos

<p> define un bloque de lectura o párrafo. Para dar un salto de línea sin cambiar de párrafo usamos <br>, y para una línea divisoria usamos <hr>.

Sintaxis

<p>
  Hoy tuvimos clase de química en el laboratorio.<br>
  Hicimos experimentos con mezclas.
</p>
<hr>

<strong> y <em> Formato

<strong> resalta texto en negrita para conceptos importantes. <em> pone el texto en cursiva para énfasis.

Sintaxis

<p>
  La entrega del proyecto es el <strong>viernes</strong>.
  No olvides traer tu <em>memoria USB</em>.
</p>

<a href="..."> Hipervínculos

La etiqueta "ancla". Su atributo fundamental es href (hypertext reference), donde pones la dirección web o página local a la que quieres viajar al dar clic.

Ejemplo

<!-- Enlace a una página externa -->
<a href="https://www.gob.mx/sep" target="_blank">
  Portal Oficial de la SEP
</a>

<img src="..." alt="..."> Imágenes

No lleva etiqueta de cierre. Requiere dos atributos clave: src (dónde está la imagen) y alt (descripción para personas con discapacidad visual o si la imagen no carga).

Ejemplo

<img 
  src="escudo-escuela.png" 
  alt="Escudo oficial de la Escuela Secundaria" 
  width="150">

<ul> y <li> Lista con Viñetas

Unordered List. Muestra elementos con bolitas o viñetas. Ideal para listas de compras, materias o útiles escolares. Cada renglón va dentro de un <li> (list item).

Ejemplo

<h4>Útiles para la clase de Geografía:</h4>
<ul>
  <li>Cuaderno de cuadrícula</li>
  <li>Juego de geometría</li>
  <li>Colores de madera</li>
</ul>

<ol> y <li> Lista Numerada

Ordered List. El navegador numera automáticamente cada elemento (1, 2, 3...). Perfecta para recetas de cocina, instrucciones de laboratorio o algoritmos.

Ejemplo

<h4>Instrucciones para encender la computadora:</h4>
<ol>
  <li>Conectar el regulador a la corriente</li>
  <li>Presionar el botón de encendido del CPU</li>
  <li>Esperar a que cargue la pantalla de usuario</li>
</ol>

<input> y sus tipos Cajas de Entrada

Permite al usuario escribir información. El atributo type cambia su comportamiento: text para nombres, number para edades, email para correos.

Ejemplo

<input type="text" placeholder="Escribe tu nombre">
<input type="number" placeholder="Tu edad (ej. 13)">
<input type="checkbox" id="acepto">

<button> y <label> Interactividad

<label> es el título o etiqueta explicativa de cada campo, y <button> es el botón que el alumno presiona para enviar o ejecutar la acción.

Ejemplo

<label for="correo">Correo Escolar:</label>
<input type="email" id="correo">

<button type="submit">¡Registrarme en el Club!</button>

<div> Caja genérica

Viene de division. Es como una caja de cartón transparente que agrupa elementos para poder moverlos, darles bordes o fondos con estilo.

Ejemplo

<div style="background: #1e293b; padding: 15px;">
  <h3>Aviso Importante</h3>
  <p>Mañana no hay clases por Consejo Técnico.</p>
</div>

<header> <main> <footer> Semántica

Etiquetas con significado especial para ordenar la página:
• <header>: Cabecera y logo.
• <main>: El contenido central de la lección.
• <footer>: Pie de página con créditos y derechos.

Organización

<header>Logo y Menú</header>
<main>Información Central</main>
<footer>Secundaria Técnica #42</footer>

🛠️ Taller Práctico en Vivo: Escribe y Observa

Escribe o modifica el código a la izquierda y presiona "Actualizar Pantalla" para ver tu diseño terminado.

Plantillas Escolares:

🟧 index.html (Editor Interactivo)

🌐 Resultado en el Navegador ● En Vivo

🎯 Desafío de Secundaria: ¿Cuánto Aprendiste de HTML?

Pon a prueba tus conocimientos antes de pasar a programar en JavaScript:

1. ¿Cuál es la etiqueta que se debe usar para el título principal y más importante de un tema escolar?

2. ¿Cuál es la forma correcta de cerrar una etiqueta de párrafo?

3. Para crear una lista numerada (1, 2, 3...) como los pasos de una receta de cocina, ¿qué etiqueta usamos?

¿Ya dominas la estructura de HTML? 🚀

Ahora es momento de darle un cerebro y superpoderes con el lenguaje que mueve internet:

Continuar al Módulo de JavaScript ⚡