Poszukiwanie skarbów w HTML
Użyj HTML, aby rozwiązywać zagadki i znajdować ukryte wiadomości
Poszukiwanie skarbów w HTML to bezpłatna lekcja HTML for Kids na CoddyKit. To lekcja 2 z 2. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML for Kids, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML for Kids zawiera 2 lekcji w sumie.
Rozpoczęcie poszukiwania skarbu
Poszukiwanie skarbu w HTML
Witaj w poszukiwaniu skarbu w HTML! Twoim zadaniem jest odnalezienie ukrytego skarbu poprzez rozwiązywanie zagadek ukrytych w kodzie HTML. Uważnie wykonuj każdy krok i modyfikuj kod, aby posuwać się naprzód.
Cel: Odnajdź skarb, wykonując każde zadanie!
Przygotowanie mapy skarbu
Krok 1: Przygotowanie mapy skarbu
Pierwsza wskazówka jest ukryta w komentarzu. Otwórz kod HTML i znajdź wskazówkę!
Oto początkowy kod HTML:
<!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>
Dodawanie mapy skarbu
Krok 2: Dodawanie mapy skarbu
Czy mapa skarbu została dodana? Oto przykład:
<img src="treasure-map.jpg" alt="Treasure Map" />Pakowanie narzędzi
Krok 3: Pakowanie narzędzi
Aby kontynuować, utwórz listę narzędzi, które zabierzesz na poszukiwanie skarbu. Użyj znaczników <ul> i <li>.
Przykład:
<ul>
<li>Compass</li>
<li>Flashlight</li>
<li>Map</li>
</ul>
Znajdowanie dodatkowych informacji
Krok 4: Znajdowanie dodatkowych informacji
Dodaj odnośnik do witryny poświęconej poszukiwaniu skarbów za pomocą znacznika <a>.
Przykład:
<a href="https://www.example.com" target="_blank">Learn More About Treasure Hunting</a>
Ostateczne wyzwanie
Krok 5: Ostateczne wyzwanie
Skarb jest już prawie Twój! Aby go odblokować, utwórz przycisk, który po kliknięciu wyświetli ukrytą wiadomość.
Skorzystaj z poniższego przykładu jako wskazówki:
<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>
Testowanie strony
Krok 6: Testowanie strony
Teraz, gdy wszystkie elementy zostały dodane, przetestuj stronę. Upewnij się, że:
- Obraz wyświetla się poprawnie.
- Lista narzędzi jest widoczna.
- Odnośnik otwiera witrynę w nowej karcie.
- Przycisk wyświetla wiadomość o skarbie.
Jeśli wszystko działa, gratulacje — ukończyłeś poszukiwanie skarbu!
Ostateczny skarb
Oto jak może wyglądać Twoja ukończona strona:
<!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>
Powtórzenie wiadomości o poszukiwaniu skarbu
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!
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 16
- Lekcje
- 35
Często zadawane pytania
Czy lekcja „Poszukiwanie skarbów w HTML” jest bezpłatna?
Tak — pełny tekst „Poszukiwanie skarbów w HTML” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML for Kids, przejdź na CoddyKit PRO. Kurs HTML for Kids zawiera 2 lekcji w sumie.
Co nauczysz się w „Poszukiwanie skarbów w HTML”?
Użyj HTML, aby rozwiązywać zagadki i znajdować ukryte wiadomości Ćwiczysz HTML for Kids z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML for Kids?
Nie wymagamy żadnego doświadczenia. HTML for Kids w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 2.
Ile czasu zajmuje lekcja „Poszukiwanie skarbów w HTML”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML for Kids?
Tak. Każda lekcja HTML for Kids zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Koduj razem: zbuduj prostą stronę internetową
- Poszukiwanie skarbów w HTML