HTML-Schnitzeljagd
Verwenden Sie HTML, um Hinweise zu lösen und versteckte Nachrichten zu finden
HTML-Schnitzeljagd ist eine kostenlose HTML for Kids-Lektion auf CoddyKit. Dies ist Lektion 2 von 2. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML for Kids-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML for Kids-Kurs umfasst insgesamt 2 Lektionen.
Die Schatzsuche beginnt
HTML-Schatzsuche
Willkommen bei der HTML-Schatzsuche! Ihre Aufgabe besteht darin, den verborgenen Schatz zu finden, indem Sie Hinweise lösen, die im HTML-Code versteckt sind. Befolgen Sie jeden Schritt sorgfältig und ändern Sie den Code, um voranzukommen.
Ziel: Finden Sie den Schatz, indem Sie jede Aufgabe abschließen!
Die Schatzkarte einrichten
Schritt 1: Die Schatzkarte einrichten
Der erste Hinweis ist in einem Kommentar versteckt. Öffnen Sie den HTML-Code und suchen Sie den Hinweis!
Hier ist der HTML-Code zum Start:
<!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>
Die Schatzkarte hinzufügen
Schritt 2: Die Schatzkarte hinzufügen
Haben Sie die Schatzkarte hinzugefügt? Hier ist ein Beispiel:
<img src="treasure-map.jpg" alt="Treasure Map" />Ihre Werkzeuge einpacken
Schritt 3: Ihre Werkzeuge einpacken
Erstellen Sie als Nächstes eine Liste der Werkzeuge, die Sie zu einer Schatzsuche mitnehmen würden. Verwenden Sie die Tags <ul> und <li>.
Beispiel:
<ul>
<li>Compass</li>
<li>Flashlight</li>
<li>Map</li>
</ul>
Weitere Informationen finden
Schritt 4: Weitere Informationen finden
Fügen Sie mithilfe des Tags <a> einen Link zu einer Website über Schatzsuchen hinzu.
Beispiel:
<a href="https://www.example.com" target="_blank">Learn More About Treasure Hunting</a>
Die letzte Herausforderung
Schritt 5: Die letzte Herausforderung
Der Schatz gehört fast Ihnen! Um ihn freizuschalten, erstellen Sie eine Schaltfläche, die beim Anklicken eine verborgene Nachricht anzeigt.
Verwenden Sie das folgende Beispiel als Vorlage:
<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>
Ihre Seite testen
Schritt 6: Ihre Seite testen
Nachdem Sie alle Elemente hinzugefügt haben, testen Sie Ihre Seite. Vergewissern Sie sich:
- Das Bild wird korrekt angezeigt.
- Die Liste der Werkzeuge ist sichtbar.
- Der Link öffnet die Website in einem neuen Tab.
- Die Schaltfläche zeigt die Schatznachricht an.
Wenn alles funktioniert, herzlichen Glückwunsch – Sie haben die Schatzsuche abgeschlossen!
Der endgültige Schatz
So könnte Ihre fertige Seite aussehen:
<!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>
Zusammenfassung der Schatzsuche
Großartige Leistung!
Herzlichen Glückwunsch! Sie haben die HTML-Schatzsuche abgeschlossen. Sie haben den Umgang mit Bildern, Listen, Links und Schaltflächen geübt – allesamt wichtige Elemente der Webentwicklung. Erkunden Sie weiterhin neue Möglichkeiten und erstellen Sie tolle Projekte!
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 16
- Lektionen
- 35
Häufig gestellte Fragen
Ist die Lektion „HTML-Schnitzeljagd“ kostenlos?
Ja — der vollständige Text von „HTML-Schnitzeljagd“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML for Kids-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML for Kids-Kurs umfasst insgesamt 2 Lektionen.
Was lerne ich in „HTML-Schnitzeljagd“?
Verwenden Sie HTML, um Hinweise zu lösen und versteckte Nachrichten zu finden Du übst HTML for Kids mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML for Kids zu starten?
Keine Vorkenntnisse erforderlich. HTML for Kids auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 2.
Wie lange dauert die Lektion „HTML-Schnitzeljagd“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML for Kids-Lektion Code schreiben und ausführen?
Ja. Jede HTML for Kids-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Mitlesen und programmieren: Eine einfache Webseite erstellen
- HTML-Schnitzeljagd