HTML-skattejagt
Brug HTML til at løse ledetråde og finde skjulte beskeder
HTML-skattejagt er en gratis HTML for Kids-lektion på CoddyKit. Dette er lektion 2 af 2. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i HTML for Kids, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML for Kids-kurset indeholder 2 lektioner i alt.
Skattejagten begynder
HTML-skattejagt
Velkommen til HTML-skattejagten! Din mission er at finde den skjulte skat ved at løse ledetråde, der er gemt i HTML-koden. Følg hvert trin omhyggeligt, og rediger koden for at komme videre.
Mål: Find skatten ved at fuldføre hver opgave!
Konfiguration af skattekortet
Trin 1: Konfiguration af skattekortet
Den første ledetråd er skjult i en kommentar. Åbn HTML-koden, og find ledetråden!
Her er den indledende HTML-kode:
<!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>
Tilføjelse af skattekortet
Trin 2: Tilføjelse af skattekortet
Har du tilføjet skattekortet? Her er et eksempel:
<img src="treasure-map.jpg" alt="Treasure Map" />Pakning af dine værktøjer
Trin 3: Pakning af dine værktøjer
For at fortsætte skal du oprette en liste over værktøjer, du ville tage med på en skattejagt. Brug taggene <ul> og <li>.
Eksempel:
<ul>
<li>Compass</li>
<li>Flashlight</li>
<li>Map</li>
</ul>
Find flere oplysninger
Trin 4: Find flere oplysninger
Tilføj et link til et websted om skattejagt ved hjælp af tagget <a>.
Eksempel:
<a href="https://www.example.com" target="_blank">Learn More About Treasure Hunting</a>
Den sidste udfordring
Trin 5: Den sidste udfordring
Skatten er næsten din! For at låse den op skal du oprette en knap, der viser en skjult besked, når der klikkes på den.
Brug følgende eksempel som vejledning:
<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 din side
Trin 6: Test din side
Nu hvor du har tilføjet alle elementerne, skal du teste din side. Sørg for, at:
- Billedet vises korrekt.
- Listen over værktøjer er synlig.
- Linket åbner webstedet i en ny fane.
- Knappen viser beskeden om skatten.
Hvis alt fungerer, så tillykke—du har fuldført skattejagten!
Den endelige skat
Sådan ser din færdige side måske ud:
<!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>
Opsummering af skattejagten
Godt gået!
Tillykke! Du har gennemført HTML-skattejagten. Du har øvet dig i at arbejde med billeder, lister, links og knapper – alle sammen vigtige elementer i webudvikling. Bliv ved med at udforske og skabe fantastiske projekter!
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 16
- Lektioner
- 35
Ofte stillede spørgsmål
Er lektionen “HTML-skattejagt” gratis?
Ja — hele teksten til “HTML-skattejagt” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af HTML for Kids-kurset, skal du opgradere til CoddyKit PRO. HTML for Kids-kurset indeholder 2 lektioner i alt.
Hvad lærer jeg i “HTML-skattejagt”?
Brug HTML til at løse ledetråde og finde skjulte beskeder Du øver dig i HTML for Kids med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på HTML for Kids?
Der kræves ingen tidligere erfaring. HTML for Kids på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 2.
Hvor lang tid tager lektionen “HTML-skattejagt”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne HTML for Kids-lektion?
Ja. Alle HTML for Kids-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Følg med i koden: Opret en enkel webside
- HTML-skattejagt