Matemáticas, Física y Más

Módulo de Aprendizaje   Sección 2

14.04.2026
LMS - Módulo 2: El Esqueleto (HTML5)

Tema 2.0: Preámbulo - Los Fundamentos de HTML

Antes de escribir código, necesitas entender qué es HTML, por qué es el punto de partida y cómo organizar tu primer proyecto web.

📜 Un poco de Historia: ¿De Dónde Viene HTML?

HTML fue creado en 1989 por Tim Berners-Lee, un científico que trabajaba en el CERN (un laboratorio de física en Europa). Tim inventó HTML porque necesitaba una forma de compartir documentos científicos entre computadoras de forma simple.

La idea era brillante: crear un lenguaje de etiquetas (como instrucciones) que le dijera a los navegadores cómo mostrar texto, imágenes y enlaces.

Evolución:

  • 1989: Tim Berners-Lee inventa HTML (versión muy simple)
  • 1991: Se publica el primer navegador web
  • 1997: HTML 4 (versión más estable)
  • 2014: HTML5 (versión actual, la que usaremos nosotros)

Hoy, HTML sigue siendo la base de TODA página web. Sin HTML, no hay web. Punto.

🎯 ¿Qué es HTML exactamente?

HTML = HyperText Markup Language

  • HyperText: Texto con "súper poderes" (puede contener enlaces, ir de una página a otra)
  • Markup: Marcas o etiquetas (instrucciones entre < >)
  • Language: Es un lenguaje de computadora

En palabras simples: HTML es un conjunto de instrucciones que le dice al navegador "aquí va un párrafo", "aquí va una imagen", "esto es un enlace", etc.

🏗️ HTML vs CSS vs JavaScript: El Triángulo Mágico

Ya aprendiste en M1 que la web tiene tres capas:

🏗️ HTML = El Esqueleto
Define QUÉ elementos tiene tu página (párrafos, títulos, imágenes, botones)

🎨 CSS = La Ropa y Diseño
Define CÓMO se ven esos elementos (colores, tamaños, posiciones)

⚙️ JavaScript = El Cerebro y Músculos
Define QUÉ HACE la página (responde clics, valida formularios, crea interactividad)

Imagina construir una casa:

  • HTML = Los planos y la estructura (paredes, pisos, habitaciones)
  • CSS = La pintura, decoración y mobiliario (colores, diseño interior)
  • JavaScript = La electricidad, tuberías y sistemas (hace que todo funcione)

❓ ¿Por qué empezamos con HTML y no con CSS o JavaScript?

Excelente pregunta. La razón es LÓGICA:

  1. HTML es el esqueleto: Sin esqueleto (HTML), no hay nada que decorar (CSS) ni nada que haga funcionar (JavaScript).
  2. CSS necesita HTML: CSS no puede cambiar colores si no hay elementos HTML. Es como intentar pintar sin lienzo.
  3. JavaScript necesita HTML: JavaScript necesita elementos HTML a los que interactuar. Sin HTML, no hay botones para clickear.
  4. El orden natural: Construcción → Diseño → Funcionalidad

Por eso:
HTML → CSS → JavaScript

📁 Tu Estructura de Carpetas para el Proyecto Receta

A partir de ahora, vamos a trabajar en un proyecto: UNA PÁGINA DE RECETA CON MÚLTIPLES PÁGINAS.

Aquí está la estructura que DEBES crear en tu computadora:

Receta-Proyecto/ ├── index.html ├── html/ │ ├── receta.html │ ├── ingredientes.html │ └── instrucciones.html ├── css/ │ └── style.css ├── js/ │ └── script.js └── imagenes/ └── receta.jpg

🔍 ¿Por Qué Esta Estructura?

Carpeta Principal: Receta-Proyecto/
Es el contenedor de TODO tu proyecto. Mantiene todo organizado en un único lugar.

index.html (en raíz)
Este es el archivo PRINCIPAL. Cuando alguien entra a tu sitio web, ve primero este archivo. Es la "puerta de entrada".

Carpeta html/
Aquí guardaremos TODOS los archivos HTML del proyecto. Aunque parece redundante, es buena práctica separar archivos por tipo. En proyectos grandes, puedes tener 50 archivos HTML, y los quieres todos en un lugar.

Archivos dentro html/:

  • receta.html = Página que describe la receta
  • ingredientes.html = Página con lista de ingredientes
  • instrucciones.html = Página con pasos de preparación

Carpeta css/
Aquí va TODO el CSS. Mantenemos separado el diseño del contenido. Esto te permite:

  • Cambiar colores sin tocar HTML
  • Reutilizar el mismo CSS en múltiples páginas
  • Encontrar fácilmente dónde está cada estilo

Carpeta js/
Aquí va TODO el JavaScript. Lo mismo: separación de responsabilidades. Tu código es más limpio y mantenible.

Carpeta imagenes/
Aquí van TODAS las imágenes del proyecto. Mejor que tenerlas sueltas por todas partes. Cuando el proyecto crece a 100 imágenes, las tienes todas en un lugar.

🎯 Ventajas de Esta Estructura

  • Claridad: Sabes dónde encontrar cada tipo de archivo
  • Escalabilidad: Cuando el proyecto crece, es fácil agregar más archivos
  • Profesionalismo: Los desarrolladores reales organizan así
  • Mantenimiento: Si necesitas cambiar algo, lo encuentras rápido
  • Reutilización: El CSS puede aplicarse a varias páginas
  • Rutas relativas correctas: Podrás usar ../ para navegar entre carpetas de forma segura

🏷️ Etiquetas HTML Básicas (Vista Rápida)

No te las memorizarás ahora, pero mira cuáles existen:

Etiqueta Para Qué Sirve
<h1> a <h6> Títulos (h1 más grande, h6 más pequeño)
<p> Párrafos de texto
<a> Enlaces (links)
<img> Imágenes
<form> Formularios
<button> Botones
<div> Contenedor genérico
<video> Videos

Aprenderás cada una en detalle en los temas que vienen.

🖥️ ¿Cómo Crear y Abrir en VS Code?

Paso 1: Crear la Carpeta Principal

  1. En tu computadora, crea una carpeta llamada Receta-Proyecto
  2. Dentro, crea 4 subcarpetas: html, css, js, imagenes

Paso 2: Abrir en VS Code

  1. Abre VS Code
  2. Ve a Archivo → Abrir Carpeta (o File → Open Folder en inglés)
  3. Selecciona tu carpeta Receta-Proyecto
  4. ¡Listo! Verás la estructura de carpetas en el panel izquierdo

Paso 3: Crear el Archivo index.html

  1. En VS Code, haz clic derecho en la carpeta raíz (Receta-Proyecto)
  2. Selecciona "Nuevo archivo"
  3. Llámalo index.html (sin espacios, con punto)
  4. VS Code te lo abrirá automáticamente

🔄 ¿Qué Hacer en Otras Aplicaciones?

¿No tienes VS Code? Aquí hay alternativas (todas gratis):

  • Visual Studio Code (RECOMENDADO): Descarga de code.visualstudio.com
  • Sublime Text: Ligero, rápido. De sublime text.com
  • Atom: Similar a VS Code. De atom.io
  • Notepad++: Simple, ligero (Windows). De notepad-plus-plus.org
  • TextEdit (Mac): Viene con el sistema. Ve a Formato → Texto Plano
  • Bloc de Notas (Windows): Muy básico, pero funciona
  • Editor en línea: CodePen, JSFiddle, Replit (sin instalar)

Pero te recomiendo VS Code porque tiene: resaltado de sintaxis, autocompletado, gestor de carpetas integrado, y es lo que usan 80% de desarrolladores web.

✅ Checklist Antes de Continuar

  • ☐ Entiendo qué es HTML (etiquetas, instrucciones para el navegador)
  • ☐ Sé por qué HTML va primero (antes que CSS y JS)
  • ☐ He creado la estructura de carpetas: Receta-Proyecto/ con 4 subcarpetas
  • ☐ He abierto la carpeta en VS Code (o mi editor preferido)
  • ☐ He creado el archivo index.html en la raíz
  • ☐ Entiendo que cada tipo de archivo va en su carpeta respectiva

Si no has completado todo esto, hazlo ahora. Los temas que vienen asumen que tienes esta estructura lista.

Tema 2.1: Estructura Básica de HTML

Objetivo: Aprender la estructura mínima que todo archivo HTML debe tener para funcionar correctamente.

Step 1: Te Explico

La Casa de un Documento HTML

Todo documento HTML tiene una estructura similar a una casa real:

  • <!DOCTYPE> = Los planos de la casa (dice qué tipo de construcción es)
  • <html> = La casa completa (contiene todo)
  • <head> = Los sistemas invisibles (tuberías, electricidad, aire acondicionado)
  • <body> = Las habitaciones visibles (donde vive la familia)

El navegador usa esta estructura para saber cómo mostrar tu página. Sin ella, el navegador se confunde.

Step 2: Te Enseño

El Esqueleto Básico

Aquí está la estructura mínima de TODO documento HTML:

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mi Primera Página</title> </head> <body> <h1>¡Hola Mundo!</h1> <p>Este es mi primer página web.</p> </body> </html>

Copia esto exacto a tu index.html. Luego abre el archivo en el navegador (doble clic). ¡Verás tu página web!

Step 3: Te Explico (Análisis Detallado)

Desglosando Cada Línea

1. <!DOCTYPE html>
"Este documento es HTML5". Debe ser la PRIMERA línea. Sin esto, el navegador no sabe cómo interpretar el código.

2. <html lang="es">
Abre el contenedor HTML. El atributo lang="es" dice que el contenido está en español. Esto ayuda a navegadores y buscadores.

3. <head> ... </head>
La cabeza del documento. Aquí van cosas que NO se ven en la página pero son importantes:

  • <meta charset="UTF-8"> = Codificación de caracteres. Permite acentos (á, é, í, ó, ú)
  • <meta name="viewport"...> = Dice al navegador que la página es responsiva (funciona en móviles)
  • <title></title> = El título que aparece en la pestaña del navegador

4. <body> ... </body>
El cuerpo del documento. TODO lo que VE el usuario va aquí. Párrafos, imágenes, botones, formularios, etc.

Visualización:

En el navegador verás: "¡Hola Mundo!" como título y "Este es mi primer página web." como párrafo.

En la pestaña del navegador verás: "Mi Primera Página" (del <title>)

Step 4: Prácticas (Guiado)

Tu Primer Documento HTML

  1. Abre VS Code con tu carpeta Receta-Proyecto
  2. Crea un archivo llamado index.html en la raíz (si no lo hiciste en el preámbulo)
  3. Copia el esqueleto básico que mostré arriba
  4. Reemplaza "Mi Primera Página" con "Mi Receta de Pastel"
  5. Reemplaza "¡Hola Mundo!" con tu nombre
  6. Reemplaza el párrafo con una descripción corta de tu receta
  7. Guarda (Ctrl + S)
  8. Abre el archivo en el navegador (doble clic en el archivo o arrastralo al navegador)
  9. ¡Verás tu página web!
Step 5: Resuelves (Reto)

🚀 Reto Progresivo Nivel 1: Página Personalizada

Objetivo: Crear un index.html con información sobre TI (no solo sobre receta).

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sobre Mí</title> </head> <body> <h1>[Tu Nombre]</h1> <p>Mi edad es [tu edad]</p> <p>Mi ciudad es [tu ciudad]</p> <p>Mi hobby favorito es [tu hobby]</p> </body> </html>

Reemplaza todo lo que está entre [ ]. Guarda y abre en navegador.

Step 6: Lo Expones

Sube una captura de pantalla de tu página web abierta en el navegador. Incluye el archivo HTML.

Step 7: Lo Autoevalúas

Demuestra lo aprendido respondiendo este breve cuestionario. (Las preguntas cambiarán si lo reinicias).

Tema 2.2: Textos y Jerarquías

Objetivo: Aprender a estructurar texto usando títulos, párrafos y énfasis.

Step 1: Te Explico

¿Por Qué Jerarquía?

En un libro o periódico, no todo el texto es igual:

  • El TÍTULO es grande (Título Principal)
  • Los subtítulos son medianos (Subtítulos)
  • El texto normal es pequeño (Párrafos)
  • Algunas palabras están en negrita para resaltar
  • Otras en itálica para énfasis

HTML tiene etiquetas para TODA esta jerarquía. De esta forma:

  • El navegador sabe qué es importante
  • Los buscadores (Google) entienden tu página
  • Las personas ciegas con lectores de pantalla entienden la estructura
Step 2: Te Enseño

Las Etiquetas de Texto

Títulos (del mayor al menor):

<h1>Título Principal (el más importante)</h1> <h2>Subtítulo Principal</h2> <h3>Subtítulo Secundario</h3> <h4>Subtítulo Menor</h4> <h5>Subtítulo Muy Pequeño</h5> <h6>Subtítulo Más Pequeño de Todos</h6>

Párrafos:

<p>Este es un párrafo normal de texto. Puede contener muchas frases.</p>

Énfasis y Negrita:

<p>Este texto tiene <strong>palabras en negrita</strong> y <em>palabras en itálica</em>.</p>

Contenedores genéricos:

<div> <p>Esto es una sección de contenido</p> </div> <span>Esto es una pequeña parte del texto</span>

Listas:

<ul> <li>Elemento 1</li> <li>Elemento 2</li> </ul> <ol> <li>Primero</li> <li>Segundo</li> </ol>
Step 3: Te Explico (Análisis Detallado)

Entendiendo Cada Elemento

Títulos h1 a h6

  • <h1> = UNO por página (el más importante, el título principal)
  • <h2> = Para secciones principales
  • <h3> = Para subsecciones
  • <h4> a <h6> = Para detalles menores

<strong> vs <b>

<strong> = Negrita que indica IMPORTANCIA (mejor para accesibilidad)

<b> = Negrita visual sin significado especial (evita usarlo)

<em> vs <i>

<em> = Itálica que indica ÉNFASIS (mejor para accesibilidad)

<i> = Itálica visual sin significado (evita usarlo)

<div>

Contenedor de bloque. Ocupa TODO el ancho disponible. Se usa para agrupar contenido.

<span>

Contenedor de línea. Ocupa SOLO el espacio necesario. Se usa para partes pequeñas de texto.

<ul> (Unordered List = Lista Desordenada)

Para listas sin orden específico. Usa viñetas (puntos).

<ol> (Ordered List = Lista Ordenada)

Para listas con orden. Usa números.

Step 4: Prácticas (Guiado)

Ejercicios Paso a Paso

Ejercicio 1: Estructura de Títulos

<h1>Mi Receta de Pastel</h1> <h2>Información General</h2> <p>Este pastel es delicioso...</p> <h2>Ingredientes</h2> <p>Necesitarás...</p>

Ejercicio 2: Énfasis y Negrita

<p>Este receta es <strong>muy fácil</strong>. Te llevará <em>solo 30 minutos</em>.</p>

Ejercicio 3: Listas

<h2>Ingredientes</h2> <ul> <li>2 tazas de harina</li> <li>3 huevos</li> <li>1 taza de azúcar</li> </ul> <h2>Pasos</h2> <ol> <li>Mezcla la harina y azúcar</li> <li>Añade los huevos</li> <li>Hornea 30 minutos</li> </ol>
Step 5: Resuelves (Reto)

🚀 Reto Progresivo Nivel 2: Tu Página de Receta

Objetivo: Crear una página index.html con la estructura completa de una receta.

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mi Receta</title> </head> <body> <h1>Receta de [Tu Receta]</h1> <h2>Descripción</h2> <p>Esta receta es [descripción]. Toma [tiempo].</p> <h2>Ingredientes</h2> <ul> <li>Ingrediente 1</li> <li>Ingrediente 2</li> <li>Ingrediente 3</li> </ul> <h2>Instrucciones</h2> <ol> <li>Paso 1</li> <li>Paso 2</li> <li>Paso 3</li> </ol> </body> </html>

Reemplaza todo lo que está en [ ] con información real. Guarda y abre en navegador.

Step 6: Lo Expones

Sube tu página de receta con estructura de títulos, párrafos y listas. Incluye el archivo HTML y una captura.

Step 7: Lo Autoevalúas

Demuestra lo aprendido respondiendo este breve cuestionario. (Las preguntas cambiarán si lo reinicias).

Tema 2.3: Navegación - Enlaces Entre Páginas

Objetivo: Aprender a crear enlaces que conectan páginas y permiten la navegación.

Step 1: Te Explico

¿Por Qué Enlaces?

Sin enlaces, cada página sería aislada. Los enlaces conectan las páginas, creando una red.

La "Web" se llama así porque es una RED de documentos conectados por enlaces.

Ejemplos de enlaces:

  • Ir de la página principal a la de "Contacto"
  • Ir de "Ingredientes" a "Instrucciones"
  • Ir a sitios externos (Google, Wikipedia, etc.)
Step 2: Te Enseño

La Etiqueta <a> (anchor = ancla)

Enlaces internos (a otras páginas tu tu sitio):

<a href="html/receta.html">Ver Receta</a> <a href="html/ingredientes.html">Ingredientes</a> <a href="html/instrucciones.html">Instrucciones</a>

Enlaces externos (a sitios web otros):

<a href="https://www.google.com">Ir a Google</a> <a href="https://www.wikipedia.org">Wikipedia</a>

Volver a la página principal (desde otra página):

<a href="../index.html">Volver al Inicio</a>

Enlaces internos en la misma página (anclas):

<a href="#ingredientes">Saltar a Ingredientes</a> ... <h2 id="ingredientes">Ingredientes</h2>
Step 3: Te Explico (Análisis Detallado)

Entendiendo Enlaces

href = "HyperReference" (referencia de enlace)

El atributo más importante de <a>. Dice A DÓNDE va el enlace.

Rutas Relativas vs Absolutas

Ruta Absoluta: La URL completa (con https://)

<a href="https://www.google.com">Google</a>

Ruta Relativa: Desde la posición actual

<!-- Desde index.html a receta.html en la carpeta html/ --> <a href="html/receta.html">Receta</a> <!-- Desde html/receta.html VOLVIENDO a index.html --> <a href="../index.html">Inicio</a>

¿Qué significa "../"?

../ significa "sube un nivel de carpeta". Así navega de:

  • Receta-Proyecto/html/receta.html (estoy aquí)
  • Sube a: Receta-Proyecto/ (con ../)
  • Luego busca: index.html

Anclas (#)

Los anclas permiten saltar a una parte específica de la página:

  • <a href="#ingredientes"> = Saltar al elemento con id="ingredientes"
  • <h2 id="ingredientes"> = Marca el destino
Step 4: Prácticas (Guiado)

Ejercicios Paso a Paso

Ejercicio 1: Crear las Páginas HTML

Primero, crea 3 archivos en la carpeta html/:

  • html/receta.html
  • html/ingredientes.html
  • html/instrucciones.html

En cada uno, pon esto (cambias el contenido):

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Página de Receta</title> </head> <body> <h1>Contenido aquí</h1> <p>Texto aquí</p> <a href="../index.html">Volver al Inicio</a> </body> </html>

Ejercicio 2: Agregar Enlaces en index.html

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mi Receta</title> </head> <body> <h1>Mi Receta</h1> <nav> <ul> <li><a href="index.html">Inicio</a></li> <li><a href="html/receta.html">Receta</a></li> <li><a href="html/ingredientes.html">Ingredientes</a></li> <li><a href="html/instrucciones.html">Instrucciones</a></li> </ul> </nav> <p>Bienvenido a mi sitio de recetas...</p> </body> </html>
Step 5: Resuelves (Reto)

🚀 Reto Progresivo Nivel 3: Sitio Navegable Completo

Objetivo: Crear un sitio con 4 páginas conectadas por navegación.

En index.html: Crea menú de navegación que apunta a las 3 páginas

En html/receta.html: Muestra descripción de la receta + enlace al inicio

En html/ingredientes.html: Lista de ingredientes + enlace al inicio

En html/instrucciones.html: Pasos de preparación + enlace al inicio

Prueba haciendo clic en cada enlace. Debes poder navegar entre todas las páginas libremente.

Step 6: Lo Expones

Sube toda la estructura de carpetas + archivos. Incluye capturas de la navegación funcionando.

Step 7: Lo Autoevalúas

Demuestra lo aprendido respondiendo este breve cuestionario. (Las preguntas cambiarán si lo reinicias).

Tema 2.4: Medios Visuales - Imágenes, Video y Audio

Objetivo: Aprender a insertar imágenes, videos y audio en tus páginas HTML.

Step 1: Te Explico

¿Por Qué Medios?

El texto solo es aburrido. Las páginas web modernas tienen:

  • Imágenes (fotos, gráficos, iconos)
  • Videos (tutoriales, demostraciones)
  • Audio (música, podcast, efectos de sonido)

HTML proporciona etiquetas para incluir todo esto.

Step 2: Te Enseño

Insertar Imágenes

<img src="imagenes/receta.jpg" alt="Foto del pastel">

Insertar Video:

<video width="400" height="300" controls> <source src="videos/receta.mp4" type="video/mp4"> Tu navegador no soporta videos </video>

Insertar Audio:

<audio controls> <source src="audios/musica.mp3" type="audio/mpeg"> Tu navegador no soporta audio </audio>
Step 3: Te Explico (Análisis Detallado)

Desglose de Cada Elemento

<img> (imagen)

  • src = Ruta a la imagen (imagenes/receta.jpg)
  • alt = Texto alternativo si la imagen no carga (OBLIGATORIO para accesibilidad)
  • width y height = Ancho y alto (opcional)

<video>

  • src = Ruta al video
  • controls = Muestra botones de play, pausa, volumen
  • <source> = Permite múltiples formatos para compatibilidad

<audio>

  • Similar a video pero solo para audio
  • controls = Muestra botones de reproducción

Formatos Soportados

  • Imágenes: JPG, PNG, GIF, WebP
  • Videos: MP4, WebM, Ogg
  • Audio: MP3, WAV, OGG
Step 4: Prácticas (Guiado)

Ejercicios Paso a Paso

Ejercicio 1: Preparar una Imagen

  1. Encuentra una imagen de tu receta (o descárgala de Internet)
  2. Guárdala en la carpeta imagenes/
  3. Dale un nombre simple: receta.jpg

Ejercicio 2: Insertar la Imagen en index.html

<h1>Mi Receta</h1> <img src="imagenes/receta.jpg" alt="Foto de mi receta" width="300"> <p>Esta es una foto de mi delicioso pastel...</p>

Ejercicio 3: Insertar Video (Opcional)

Si tienes un video de cómo hacer la receta:

<h2>Ver Cómo Se Hace</h2> <video width="400" controls> <source src="videos/receta.mp4" type="video/mp4"> </video>
Step 5: Resuelves (Reto)

🚀 Reto Progresivo Nivel 4: Página con Imagen

Objetivo: Actualiza tu index.html para incluir una imagen.

Tu página debe tener:

  • Título principal (h1)
  • Una imagen con atributo alt descriptivo
  • Párrafo descriptivo
  • Enlaces de navegación a otras páginas

La imagen debe verse claramente en el navegador.

Step 6: Lo Expones

Sube tu página con imagen incluida. Captura pantalla mostrando la imagen en el navegador.

Step 7: Lo Autoevalúas

Demuestra lo aprendido respondiendo este breve cuestionario. (Las preguntas cambiarán si lo reinicias).

Tema 2.5: Formularios - Recopilar Información del Usuario

Objetivo: Aprender a crear formularios para que los usuarios envíen información.

Step 1: Te Explico

¿Qué son Formularios?

Los formularios son la forma de comunicación entre el usuario y tu página web.

Ejemplos:

  • Formulario de login (usuario y contraseña)
  • Formulario de contacto (nombre, email, mensaje)
  • Formulario de encuesta (preguntas con opciones)
  • Carrito de compras (cantidad, tamaño, color)
Step 2: Te Enseño

Elementos de Formularios

Formulario Básico:

<form> <label for="nombre">Nombre:</label> <input type="text" id="nombre" name="nombre"> <label for="email">Email:</label> <input type="email" id="email" name="email"> <label for="mensaje">Mensaje:</label> <textarea id="mensaje" name="mensaje"></textarea> <button type="submit">Enviar</button> </form>

Tipos de Input:

<input type="text"> <!-- Texto normal --> <input type="email"> <!-- Email (valida @) --> <input type="password"> <!-- Contraseña (puntos) --> <input type="number"> <!-- Número --> <input type="date"> <!-- Fecha --> <input type="checkbox"> <!-- Casilla --> <input type="radio"> <!-- Opción (una sola) -->

Select (Desplegable):

<label for="dificultad">Dificultad:</label> <select id="dificultad" name="dificultad"> <option>Selecciona...</option> <option value="facil">Fácil</option> <option value="media">Media</option> <option value="dificil">Difícil</option> </select>
Step 3: Te Explico (Análisis Detallado)

Desglose de Formularios

<form>

Contenedor de todos los elementos del formulario.

<label>

Etiqueta que describe qué es el input. El atributo for conecta la etiqueta con el input.

<input>

Campo de entrada. El atributo type define qué tipo de dato espera.

<textarea>

Área de texto múltiples líneas. Para mensajes largos.

<select> y <option>

Desplegable con opciones. El usuario elige una.

<button type="submit">

Botón para enviar el formulario.

Step 4: Prácticas (Guiado)

Ejercicios Paso a Paso

Ejercicio 1: Formulario de Contacto Simple

<form> <h2>Contáctame</h2> <label for="nombre">Tu Nombre:</label> <input type="text" id="nombre" name="nombre"> <label for="email">Tu Email:</label> <input type="email" id="email" name="email"> <button type="submit">Enviar</button> </form>

Ejercicio 2: Formulario de Reseña de Receta

<form> <h2>Deja tu Reseña</h2> <label for="nombre">Tu Nombre:</label> <input type="text" id="nombre" name="nombre"> <label for="calificacion">¿Qué tal estuvo?</label> <select id="calificacion" name="calificacion"> <option>Selecciona...</option> <option>Excelente</option> <option>Bueno</option> <option>Regular</option> <option>Malo</option> </select> <label for="comentario">Comentario:</label> <textarea id="comentario" name="comentario"></textarea> <button type="submit">Enviar Reseña</button> </form>
Step 5: Resuelves (Reto)

🚀 Reto Progresivo Nivel 5: Formulario Completo

Objetivo: Crear una página con un formulario para recopilar opiniones sobre la receta.

El formulario debe incluir:

  • Campo de nombre (texto)
  • Campo de email (email)
  • Desplegable de calificación (fácil/media/difícil)
  • Área de comentarios (textarea)
  • Checkbox "¿La haría de nuevo?"
  • Botón de envío

Crea una página nueva en html/formulario.html con este formulario.

Step 6: Lo Expones

Sube el archivo formulario.html con todos los elementos del formulario. Captura mostrando el formulario en el navegador.

Step 7: Lo Autoevalúas

Demuestra lo aprendido respondiendo este breve cuestionario. (Las preguntas cambiarán si lo reinicias).

Share
Maestro Víctor Manuel García Ríos
Todos los derechos reservados 2022
Creado con Webnode Cookies
¡Crea tu página web gratis! Esta página web fue creada con Webnode. Crea tu propia web gratis hoy mismo! Comenzar