Ejercicio de programación con HTML: Proyecto crear páginas HTML

Proyecto
Práctica
1h 30m

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.

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.

Empezar ejercicio de programación

Más ejercicios de programación con HTML

Evalúa tus conocimientos en HTML con más ejercicios de programación de tipo Test, Puzzle, Código y Proyecto con VSCode.

Tecnologías de este ejercicio de programación

Entornos de desarrollo para este ejercicio

Image

Visual Studio Code

Image

GitHub