Caccia al tesoro HTML
Usi HTML per risolvere indizi e trovare messaggi nascosti
Caccia al tesoro HTML è una lezione HTML for Kids gratuita su CoddyKit. Questa è la lezione 2 di 2. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML for Kids, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML for Kids include 2 lezioni in totale.
Inizio della caccia al tesoro
Caccia al tesoro in HTML
Benvenuto alla caccia al tesoro in HTML! La sua missione è scoprire il tesoro nascosto risolvendo gli indizi nascosti nel codice HTML. Segua attentamente ogni passaggio e modifichi il codice per procedere.
Obiettivo: Trovare il tesoro completando ogni attività!
Preparazione della mappa del tesoro
Passaggio 1: preparazione della mappa del tesoro
Il primo indizio è nascosto in un commento. Apra il codice HTML e trovi l’indizio!
Ecco il codice HTML iniziale:
<!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>
Aggiunta della mappa del tesoro
Passaggio 2: aggiunta della mappa del tesoro
Ha aggiunto la mappa del tesoro? Ecco un esempio:
<img src="treasure-map.jpg" alt="Treasure Map" />Preparazione degli strumenti
Passaggio 3: preparazione degli strumenti
Per continuare, crei un elenco degli strumenti che porterebbe durante una caccia al tesoro. Utilizzi i tag <ul> e <li>.
Esempio:
<ul>
<li>Compass</li>
<li>Flashlight</li>
<li>Map</li>
</ul>
Ricerca di ulteriori informazioni
Passaggio 4: ricerca di ulteriori informazioni
Aggiunga un collegamento a un sito web sulla ricerca del tesoro utilizzando il tag <a>.
Esempio:
<a href="https://www.example.com" target="_blank">Learn More About Treasure Hunting</a>
La sfida finale
Passaggio 5: la sfida finale
Il tesoro è quasi suo! Per sbloccarlo, crei un pulsante che mostri un messaggio nascosto quando viene selezionato.
Utilizzi il seguente esempio come guida:
<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>
Test della pagina
Passaggio 6: test della pagina
Ora che ha aggiunto tutti gli elementi, esegua il test della pagina. Si assicuri che:
- L’immagine venga visualizzata correttamente.
- L’elenco degli strumenti sia visibile.
- Il collegamento apra il sito web in una nuova scheda.
- Il pulsante mostri il messaggio del tesoro.
Se tutto funziona, congratulazioni: ha completato la caccia al tesoro!
Il tesoro finale
Ecco come potrebbe apparire la pagina finale:
<!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>
Ripasso della caccia al tesoro
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!
Domande Frequenti
La lezione «Caccia al tesoro HTML» è gratuita?
Sì — il testo completo di «Caccia al tesoro HTML» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML for Kids, passa a CoddyKit PRO. Il corso HTML for Kids include 2 lezioni in totale.
Cosa imparerò in «Caccia al tesoro HTML»?
Usi HTML per risolvere indizi e trovare messaggi nascosti Eserciti HTML for Kids con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML for Kids?
Non è richiesta alcuna esperienza precedente. HTML for Kids su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 2.
Quanto tempo richiede la lezione «Caccia al tesoro HTML»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML for Kids?
Sì. Ogni lezione HTML for Kids include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Code-along: creare una semplice pagina web
- Caccia al tesoro HTML