Introducción a elementos avanzados (10 minutos)
Explicación:
HTML ofrece muchas etiquetas para crear páginas dinámicas y funcionales. En esta lección, nos enfocaremos en:
- Formularios: Permiten al usuario ingresar datos (como nombres o contraseñas).
- Tablas: Organizan datos en filas y columnas.
- Enlaces: Conectan páginas o recursos.
- Imágenes: Añaden contenido visual.
Por qué son importantes:
- Los formularios son clave para recolectar datos, como registros o búsquedas, y los usarás en Laravel para enviar información a controladores.
- Las tablas estructuran datos, como listas de usuarios.
- Los enlaces y las imágenes mejoran la navegación y la experiencia visual, comunes en cualquier sitio web.
Analogía: Si HTML básico (Lección 1) es el esqueleto de una página, estos elementos son los músculos: dan funcionalidad y vida.
Punto clave: Estos elementos son la base de las interfaces web modernas y se integran directamente en las vistas Blade de Laravel.
Actividad rápida (2 minutos):
Piensa en una página web que uses (por ejemplo, una red social). Escribe en papel 2 elementos que podría tener de esta lección (formulario, tabla, enlace, imagen). Ejemplo:
- Un formulario para iniciar sesión.
- Una imagen de perfil.
Formularios: <form>, <input>, <button> (20 minutos)
Explicación:
Los formularios recolectan datos del usuario. La etiqueta <form> contiene elementos como <input> (campos de texto, contraseñas, etc.) y <button> (botones para enviar o resetear).
Estructura básica:
<form>
<input type="text">
<button>Enviar</button>
</form>
Atributos clave:
- <form>:
- action: URL donde se envían los datos (en Laravel, apunta a una ruta).
- method: Método HTTP (get o post; usaremos post para datos sensibles).
- <input>:
- type: Tipo de campo (text, email, password, checkbox, etc.).
- name: Identifica el campo al enviar datos.
- placeholder: Texto sugerido en el campo.
- <button>:
- type: submit (envía el formulario), reset (limpia los campos), o button (acción genérica).
Ejemplo práctico (como pide la lección):
Formulario con campos para nombre y email:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Formulario de Contacto</title>
</head>
<body>
<h1>Contáctanos</h1>
<form action="/enviar" method="post">
<input type="text" name="nombre" placeholder="Tu nombre">
<input type="email" name="email" placeholder="Tu correo">
<button type="submit">Enviar</button>
</form>
</body>
</html>
Cómo funciona:
- <h1> da un título a la página.
- <form action="/enviar" method="post"> define un formulario que enviaría datos a "/enviar" (en esta etapa, es solo un ejemplo; no procesamos datos aún).
- <input type="text"> crea un campo para el nombre.
- <input type="email"> valida que el texto sea un correo válido.
- <button type="submit"> envía el formulario (en un navegador, intentará ir a "/enviar").
Cómo probarlo:
- Crea un archivo formulario.html en VS Code.
- Copia el código y guárdalo.
- Ábrelo en un navegador (doble clic o arrástralo).
- Escribe en los campos y haz clic en "Enviar" (notarás que no pasa nada porque no hay servidor, pero puedes ver la estructura).
- Alternativa: Pega el código en CodePen (pestaña HTML) y prueba los campos.
Resultado esperado:
- Un título "Contáctanos".
- Dos campos de texto (uno para nombre, otro para email) con placeholders.
- Un botón "Enviar".
Punto clave: Los formularios son fundamentales en Laravel, donde usarás <form> con Blade para enviar datos a controladores (por ejemplo, para registrar usuarios).
Actividad rápida (3 minutos):
Modifica el ejemplo (en papel o editor) para añadir un campo de contraseña (type="password"). Solución sugerida:
<form action="/enviar" method="post">
<input type="text" name="nombre" placeholder="Tu nombre">
<input type="email" name="email" placeholder="Tu correo">
<input type="password" name="contrasena" placeholder="Tu contraseña">
<button type="submit">Enviar</button>
</form>
Tablas, enlaces e imágenes (20 minutos)
Explicación:
Además de formularios, otros elementos enriquecen las páginas HTML:
Tablas (<table>):
- Organizan datos en filas y columnas.
- Etiquetas clave:
- <table>: Contenedor de la tabla.
- <tr>: Fila (table row).
- <th>: Encabezado de columna (table header).
- <td>: Celda de datos (table data).
- Ejemplo:
<table>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Juan</td>
<td>25</td>
</tr>
</table>
Enlaces (<a>):
- Conectan páginas o recursos.
- Atributo clave: href (indica la URL o archivo destino).
- Ejemplo:
<a href="https://www.ejemplo.com">Visita Ejemplo</a>
Imágenes (<img>):
- Muestran contenido visual.
- Atributos clave:
- src: Ruta de la imagen (local o URL).
- alt: Texto alternativo si la imagen no carga.
- Ejemplo:
<img src="foto.jpg" alt="Descripción de la imagen">
Ejemplo combinado:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo Avanzado</title>
</head>
<body>
<h1>Mi Página</h1>
<a href="https://www.google.com">Ir a Google</a>
<img src="https://via.placeholder.com/150" alt="Imagen de ejemplo">
<table>
<tr>
<th>Producto</th>
<th>Precio</th>
</tr>
<tr>
<td>Libro</td>
<td>$10</td>
</tr>
</table>
</body>
</html>
Cómo probarlo:
- Guarda como avanzado.html y ábrelo en un navegador.
- Verás un enlace clickable, una imagen (de placeholder.com), y una tabla simple.
- Para <img> local, coloca una imagen (por ejemplo, foto.jpg) en la misma carpeta que el HTML y usa src="foto.jpg".
Resultado esperado:
- Un título, un enlace a Google, una imagen, y una tabla con encabezados y una fila de datos.
Punto clave: En Laravel, usarás tablas para mostrar listas dinámicas, enlaces para navegación, e imágenes para contenido visual en vistas Blade.
Actividad rápida (3 minutos):
Escribe en papel un HTML con una tabla de 2 filas (sin contar encabezados). Solución sugerida:
<table>
<tr>
<th>Ciudad</th>
<th>Población</th>
</tr>
<tr>
<td>Madrid</td>
<td>3M</td>
</tr>
<tr>
<td>Barcelona</td>
<td>1.6M</td>
</tr>
</table>
Resumen y preparación para la tarea (10 minutos)
Resumen:
- Formularios: <form>, <input> (texto, email, contraseña), <button> para interacción.
- Tablas: <table>, <tr>, <th>, <td> para datos estructurados.
- Enlaces: <a href="..."> para navegación.
- Imágenes: <img src="..." alt="..."> para contenido visual.
- Estos elementos son esenciales para interfaces web y se usan en Laravel para crear vistas dinámicas.
Preparación para la tarea:
La tarea pide un formulario de registro con 4 campos. Basándonos en el ejemplo, necesitarás:
- Un <form> con action y method="post".
- Cuatro <input> para datos como nombre, email, contraseña, y otro campo (por ejemplo, edad o teléfono).
- Un <button type="submit"> para enviar.
- Opcional: Añade etiquetas <label> para describir cada campo (mejora la accesibilidad).
Ejemplo inicial:
<form action="/registro" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<!-- Más campos aquí -->
</form>
Tarea práctica: Crea un formulario de registro con 4 campos
Instrucciones:
- Crea un archivo HTML (registro.html) que incluya:
- La estructura básica (<!DOCTYPE>, <html>, <head>, <body>).
- Un título en la pestaña (por ejemplo, "Formulario de Registro").
- Un formulario con:
- 4 campos <input> (sugeridos: nombre, email, contraseña, y un cuarto como edad, teléfono o dirección).
- Cada campo debe tener type, name, y opcionalmente placeholder o <label>.
- Un <button type="submit"> para enviar.
- Opcional: Añade un <h1> para dar contexto (por ejemplo, "Regístrate").
- Usa el siguiente formato como guía:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Formulario de Registro</title>
</head>
<body>
<h1>Regístrate</h1>
<form action="/registro" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" placeholder="Tu nombre">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Tu correo">
<label for="contrasena">Contraseña:</label>
<input type="password" id="contrasena" name="contrasena" placeholder="Tu contraseña">
<label for="edad">Edad:</label>
<input type="number" id="edad" name="edad" placeholder="Tu edad">
<button type="submit">Registrarse</button>
</form>
</body>
</html>
- Prueba el archivo:
- Guarda como registro.html.
- Ábrelo en un navegador para verificar que los campos y el botón se muestren correctamente.
- Escribe en los campos (no enviará datos, ya que no hay servidor, pero puedes probar la interacción).
- Alternativa: Pega en CodePen y revisa la vista previa.
Ejemplo de solución esperada:
El código anterior es funcional. En el navegador, verás:
- Título en la pestaña: "Formulario de Registro".
- Un encabezado "Regístrate".
- Cuatro campos (nombre, email, contraseña, edad) con etiquetas y un botón "Registrarse".
Tiempo estimado: 20-30 minutos (puedes hacerlo después de la lección).
Entregable: Archivo registro.html funcional con un formulario de 4 campos. Puedes compartir el código o describirlo para que lo revise.
Consejo: Usa <label> para cada campo (mejora la experiencia del usuario) y prueba diferentes tipos de <input> (como tel para teléfono o date para fechas).