Caça ao tesouro no HTML
Use HTML para resolver pistas e encontrar mensagens ocultas
Caça ao tesouro no HTML é uma aula grátis de HTML for Kids no CoddyKit. Esta é a aula 2 de 2. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML for Kids, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML for Kids inclui 2 aulas no total.
Começando a caça ao tesouro
Caça ao tesouro de HTML
Boas-vindas à caça ao tesouro de HTML! Sua missão é encontrar o tesouro escondido resolvendo pistas ocultas no código HTML. Siga cada etapa com atenção e modifique o código para avançar.
Objetivo: Encontre o tesouro concluindo cada tarefa!
Configurando o mapa do tesouro
Etapa 1: configurando o mapa do tesouro
A primeira pista está escondida em um comentário. Abra o código HTML e encontre a pista!
Veja o 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>
Adicionando o mapa do tesouro
Etapa 2: adicionando o mapa do tesouro
Você adicionou o mapa do tesouro? Veja um exemplo:
<img src="treasure-map.jpg" alt="Treasure Map" />Preparando suas ferramentas
Etapa 3: preparando suas ferramentas
Para continuar, crie uma lista de ferramentas que você levaria em uma caça ao tesouro. Use as tags <ul> e <li>.
Exemplo:
<ul>
<li>Compass</li>
<li>Flashlight</li>
<li>Map</li>
</ul>
Encontrando mais informações
Etapa 4: encontrando mais informações
Adicione um link para um site sobre caça ao tesouro usando a tag <a>.
Exemplo:
<a href="https://www.example.com" target="_blank">Learn More About Treasure Hunting</a>
O desafio final
Etapa 5: o desafio final
O tesouro está quase nas suas mãos! Para desbloqueá-lo, crie um botão que revele uma mensagem escondida quando for clicado.
Use o exemplo a seguir como guia:
<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>
Testando sua página
Etapa 6: testando sua página
Agora que você adicionou todos os elementos, teste sua página. Certifique-se de que:
- A imagem seja exibida corretamente.
- A lista de ferramentas esteja visível.
- O link abra o site em uma nova aba.
- O botão revele a mensagem do tesouro.
Se tudo funcionar, parabéns—você concluiu a caça ao tesouro!
Tesouro final
Veja como sua página final pode ficar:
<!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>
Recapitulação da caça ao tesouro
Great Job!
Congratulations! You’ve completed the HTML Treasure Hunt. You’ve practiced working with images, lists, links, and buttons—all essential elements of web development. Keep exploring and creating amazing projects!
Perguntas Frequentes
A aula “Caça ao tesouro no HTML” é grátis?
Sim — o texto completo de “Caça ao tesouro no HTML” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML for Kids, atualize para CoddyKit PRO. O curso de HTML for Kids inclui 2 aulas no total.
O que vou aprender em “Caça ao tesouro no HTML”?
Use HTML para resolver pistas e encontrar mensagens ocultas Você pratica HTML for Kids com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML for Kids?
Nenhuma experiência prévia é necessária. HTML for Kids no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 2.
Quanto tempo leva a aula “Caça ao tesouro no HTML”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML for Kids?
Sim. Cada aula de HTML for Kids inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Programação acompanhada: crie uma página web simples
- Caça ao tesouro no HTML