Búsqueda del tesoro en HTML
Use HTML para resolver pistas y encontrar mensajes ocultos
Búsqueda del tesoro en HTML es una lección gratuita de HTML for Kids en CoddyKit. Esta es la lección 2 de 2. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML for Kids, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML for Kids incluye 2 lecciones en total.
Inicio de la búsqueda del tesoro
Búsqueda del tesoro en HTML
¡Bienvenido a la búsqueda del tesoro en HTML! Su misión es descubrir el tesoro oculto resolviendo las pistas escondidas en el código HTML. Siga cada paso con atención y modifique el código para avanzar.
Objetivo: ¡Encuentre el tesoro completando cada tarea!
Configuración del mapa del tesoro
Paso 1: Configuración del mapa del tesoro
La primera pista está oculta en un comentario. ¡Abra el código HTML y encuentre la pista!
Este es el código HTML inicial:
<!DOCTYPE html>
<html>
<head>
<title>Treasure Hunt</title>
</head>
<body>
<h1>Welcome to the Treasure Hunt!</h1>
<p>Follow the clues to find the treasure.</p>
<!-- Clue 1: Add an image to this page with a description of "Treasure Map". -->
</body>
</html>
Adición del mapa del tesoro
Paso 2: Adición del mapa del tesoro
¿Ha añadido el mapa del tesoro? Este es un ejemplo:
<img src="treasure-map.jpg" alt="Treasure Map" />Preparación de las herramientas
Paso 3: Preparación de las herramientas
Para continuar, cree una lista de las herramientas que llevaría a una búsqueda del tesoro. Utilice las etiquetas <ul> y <li>.
Ejemplo:
<ul>
<li>Compass</li>
<li>Flashlight</li>
<li>Map</li>
</ul>
Búsqueda de más información
Paso 4: Búsqueda de más información
Añada un enlace a un sitio web sobre búsquedas del tesoro mediante la etiqueta <a>.
Ejemplo:
<a href="https://www.example.com" target="_blank">Learn More About Treasure Hunting</a>
El desafío final
Paso 5: El desafío final
¡El tesoro está casi en sus manos! Para desbloquearlo, cree un botón que revele un mensaje oculto al hacer clic en él.
Utilice el siguiente ejemplo como guía:
<p id="hidden-message" style="display: none;">You found the treasure! 🎉</p>
<button onclick="document.getElementById('hidden-message').style.display='block';">
Reveal the Treasure
</button>
Prueba de la página
Paso 6: Prueba de la página
Ahora que ha añadido todos los elementos, pruebe su página. Asegúrese de que:
- La imagen se muestre correctamente.
- La lista de herramientas sea visible.
- El enlace abra el sitio web en una pestaña nueva.
- El botón revele el mensaje del tesoro.
Si todo funciona, ¡felicidades: ha completado la búsqueda del tesoro!
El tesoro final
Así podría verse su página final:
<!DOCTYPE html>
<html>
<head>
<title>Treasure Hunt</title>
</head>
<body>
<h1>Welcome to the Treasure Hunt!</h1>
<p>Follow the clues to find the treasure.</p>
<!-- Step 1: Added the treasure map -->
<img src="treasure-map.jpg" alt="Treasure Map" />
<!-- Step 2: Listed tools for treasure hunting -->
<h2>My Treasure Hunting Tools</h2>
<ul>
<li>Compass</li>
<li>Flashlight</li>
<li>Map</li>
</ul>
<!-- Step 3: Added a useful link -->
<h2>Learn More</h2>
<a href="https://www.example.com" target="_blank">Learn More About Treasure Hunting</a>
<!-- Step 4: Added the hidden treasure -->
<h2>Your Treasure</h2>
<p id="hidden-message" style="display: none;">You found the treasure! 🎉</p>
<button onclick="document.getElementById('hidden-message').style.display='block';">
Reveal the Treasure
</button>
</body>
</html>
Repaso de la búsqueda del tesoro
¡Excelente trabajo!
¡Felicidades! Ha completado la Búsqueda del tesoro de HTML. Ha practicado cómo trabajar con imágenes, listas, enlaces y botones, elementos esenciales del desarrollo web. ¡Siga explorando y creando proyectos increíbles!
Preguntas frecuentes
¿La lección «Búsqueda del tesoro en HTML» es gratis?
Sí — el texto completo de «Búsqueda del tesoro en HTML» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML for Kids, actualiza a CoddyKit PRO. El curso de HTML for Kids incluye 2 lecciones en total.
¿Qué aprenderé en «Búsqueda del tesoro en HTML»?
Use HTML para resolver pistas y encontrar mensajes ocultos Practicas HTML for Kids con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML for Kids?
No se requiere experiencia previa. HTML for Kids en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 2.
¿Cuánto tiempo toma la lección «Búsqueda del tesoro en HTML»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML for Kids?
Sí. Cada lección de HTML for Kids incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Programación guiada: cree una página web sencilla
- Búsqueda del tesoro en HTML