Descripción
Con este ejercicio, te desafiamos a desarrollar la estructura HTML básica de un sitio web para una tienda de ropa, aplicando etiquetas semánticas y buenas prácticas de SEO.
Configura la estructura básica del proyecto: crea los archivos HTML necesarios: index.html, catalogo.html y contacto.html.
Desarrolla la página de inicio (index.html) implementando:
- Doctype y estructura básica HTML5.
- Metadatos SEO (title, description, etiquetas open graph).
- Header con logo y nombre de la tienda.
- Barra de navegación con enlaces a todas las páginas.
- Sección principal con información sobre la tienda y destacados.
- Footer con información de contacto y enlaces a redes sociales ficticias.
Crea la página de catálogo (catalogo.html) que incluya:
- Misma estructura de header y footer que la página principal, pero actualizando los metadatos SEO.
- Sección principal dividida en categorías de productos usando
<section>
y<article>.
- Una tabla de precios o tallas para alguna categoría de productos.
- Uso de listas para mostrar características de productos.
Implementa la página de contacto (contacto.html) con:
- Misma estructura de header y footer que las páginas anteriores, pero actualizando los metadatos SEO.
- Un formulario funcional con campos obligatorios y opcionales.
- Una sección de horarios de atención usando una tabla.
- Información de ubicación con dirección.
Añade elementos multimedia incorporando imágenes relevantes en las tres páginas (logo, productos, banners). Asegúrate de incluir atributos alt
descriptivos para todas las imágenes.
Revisa la estructura semántica verificando que has utilizado correctamente las etiquetas HTML5 (header, nav, main, section, article, aside, footer) según su propósito semántico.
Guarda tu progreso
Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.
Más de 25.000 desarrolladores ya confían en CertiDevs
Optimiza para SEO asegurándote de que todas las páginas tengan metadatos adecuados, títulos descriptivos y estructura jerárquica de encabezados (h1, h2, h3...).
Valida tu código HTML utilizando el validador del W3C (https://validator.w3.org/) para asegurar que cumple con los estándares y corrige cualquier error encontrado.
Prueba la navegación verificando que todos los enlaces internos funcionan correctamente y que la experiencia de navegación es coherente entre todas las páginas.
Solución al ejercicio de programación en HTML
¡Desbloquea la solución completa!
Completa el ejercicio de programación en HTML para acceder a la solución paso a paso, explicaciones detalladas y mejores prácticas.
Practica con ejercicios de programación en HTML
Mejora tus habilidades con cientos de ejercicios de práctica, recibe retroalimentación instantánea y obtén tu certificación cuando estés listo.
Asistente de IA
Aprende de tus errores
Progreso
Mide tu avance
Certificación
Valida tus habilidades
Únete a miles de desarrolladores mejorando sus habilidades en HTML