Proyecto crear páginas HTML

Proyecto de programación
Avanzado
HTML
Curso de HTML
90 min
500 XP
Actualizado: 01/05/2025

¡Programa y certifícate!

Asistente de IA
Solución de código
Certificado
Empezar ejercicio

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.

Progreso guardado
Asistente IA
Ejercicios
Iniciar sesión gratis

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

Contenido bloqueado

¡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.

solution.js
JavaScript
1 function solveChallenge ( input ) {
2 // Algoritmo optimizado O(n log n)
3 const data = parseInput ( input );
4 const sorted = data . sort (( a , b ) => a - b );
5
6 // Aplicar técnica de dos punteros
7 let left = 0 , right = sorted . length - 1 ;
8 const result = [];
9
10 while ( left < right ) {
11 const sum = sorted [ left ] + sorted [ right ];
12 if ( sum === target ) {
13 result . push ([ sorted [ left ], sorted [ right ]]);
14 left ++; right --;
15 } else if ( sum < target ) {
16 left ++;
17 } else {
18 right --;
19 }
20 }
21
22 return result ;
23 }
Código completo
Explicaciones
Mejores prácticas
+1.200 developers han resuelto este ejercicio de programación

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

⭐⭐⭐⭐⭐
4.9/5 valoración