¡Genial! Aquí tienes otro ejercicio de nivel medio, diferente al anterior, ideal para seguir subiendo el nivel de tus alumnos. Esta vez enfocamos en crear una landing page simple para un producto o servicio, usando estructuras modernas y elementos HTML variados.
Hoy vas a diseñar una landing page (página de aterrizaje) para promocionar un producto imaginario: puede ser un software, un gadget, un curso, lo que tú quieras. Lo importante es que practiques estructuras más avanzadas, etiquetas multimedia y formularios más detallados.
🛠 Objetivo
Crear un archivo llamado landing_producto.html que incluya:
🧱 1. Estructura semántica completa
Debes usar:
<header>con el título del producto<nav>con enlaces a secciones de la página<main>dividido en varias<section><footer>con información de contacto
✨ 2. Cabecera llamativa
Dentro de <header>:
<h1>Nombre del producto</h1>
<p>¡El futuro ha llegado! Descubre todo lo que este producto puede hacer por ti.</p>
Agrega una imagen destacada usando <img>.
🔗 3. Menú de navegación
Dentro del <nav>, crea un menú con enlaces a:
- Características (
#caracteristicas) - Testimonios (
#testimonios) - Precios (
#precios) - Contacto (
#contacto)
Usa <ul> con <li> y <a>.
💡 4. Sección de características
Con <section id="caracteristicas">, presenta al menos 3 características usando listas o tarjetas (puedes usar <article> para cada una).
Ejemplo:
<article>
<h3>Ultra rápido</h3>
<p>Procesamiento en tiempo real sin esperas.</p>
</article>
👥 5. Sección de testimonios
Dentro de <section id="testimonios">, incluye 2 o 3 testimonios falsos en formato de citas con <blockquote>.
<blockquote>
“Este producto cambió mi vida.”
<footer>– Ana Gómez</footer>
</blockquote>
💸 6. Tabla de precios
Crea una tabla dentro de <section id="precios"> con al menos 3 planes:
<table border="1">
<tr>
<th>Plan</th>
<th>Precio</th>
<th>Incluye</th>
</tr>
<tr>
<td>Básico</td>
<td>9.99€/mes</td>
<td>1 usuario, actualizaciones</td>
</tr>
<!-- Añade más filas -->
</table>
📬 7. Formulario de contacto
Crea un <form> dentro de <section id="contacto"> que incluya:
- Nombre
- Selección de plan
- Casilla de aceptación de términos
- Botón de envío
Usa input, select y checkbox.
🧠 Reto adicional
- Añade un video de YouTube con
<iframe>. - Usa
<progress>o<meter>para mostrar el porcentaje de satisfacción de usuarios. - Coloca una etiqueta
<aside>con una promo especial limitada.
🎯 Resultado final
Debe parecer una página atractiva, bien organizada y funcional. No es necesario aplicar CSS aún, pero puedes usar estilos inline para mejorar la presentación.
✅ ¿Qué practicas en este ejercicio?
- Uso avanzado de etiquetas HTML
- Organización del contenido por secciones
- Creación de tablas y formularios reales
- Estructura lógica tipo landing page
