HTML Hazine Avı
İpuçlarını çözmek ve gizli mesajları bulmak için HTML kullanın
HTML Hazine Avı, CoddyKit'te ücretsiz bir HTML for Kids dersidir. Bu, 2 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML for Kids öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML for Kids kursu toplamda 2 dersten oluşur.
Hazine Avına Başlarken
HTML Hazine Avı
HTML Hazine Avı'na hoş geldiniz! Göreviniz, HTML kodunda gizlenmiş ipuçlarını çözerek saklı hazineyi ortaya çıkarmaktır. İlerlemek için her adımı dikkatle izleyin ve kodu değiştirin.
Hedef: Her görevi tamamlayarak hazineyi bulun!
Hazine Haritasını Ayarlama
1. Adım: Hazine Haritasını Ayarlama
İlk ipucu bir yorumda gizlidir. HTML kodunu açın ve ipucunu bulun!
Başlangıç HTML kodu şöyledir:
<!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>
Hazine Haritasını Ekleme
2. Adım: Hazine Haritasını Ekleme
Hazine haritasını eklediniz mi? İşte bir örnek:
<img src="treasure-map.jpg" alt="Treasure Map" />Araçlarınızı Hazırlama
3. Adım: Araçlarınızı Hazırlama
Devam etmek için hazine avına götüreceğiniz araçların bir listesini oluşturun. <ul> ve <li> etiketlerini kullanın.
Örnek:
<ul>
<li>Compass</li>
<li>Flashlight</li>
<li>Map</li>
</ul>
Daha Fazla Bilgi Bulma
4. Adım: Daha Fazla Bilgi Bulma
Hazine avcılığı hakkında bir web sitesine <a> etiketini kullanarak bağlantı ekleyin.
Örnek:
<a href="https://www.example.com" target="_blank">Learn More About Treasure Hunting</a>
Son Görev
5. Adım: Son Görev
Hazine neredeyse sizin! Kilidini açmak için tıklandığında gizli bir mesajı gösteren bir düğme oluşturun.
Aşağıdaki örneği kılavuz olarak kullanın:
<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>
Sayfanızı Test Etme
6. Adım: Sayfanızı Test Etme
Artık tüm öğeleri eklediğinize göre sayfanızı test edin. Şunlardan emin olun:
- Görsel doğru şekilde görüntüleniyor.
- Araçlar listesi görünür durumda.
- Bağlantı web sitesini yeni bir sekmede açıyor.
- Düğme hazine mesajını gösteriyor.
Her şey çalışıyorsa tebrikler—hazine avını tamamladınız!
Son Hazine
Son sayfanızın görünümü şu şekilde olabilir:
<!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>
Hazine Avının Özeti
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!
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 16
- Dersler
- 35
Sıkça Sorulan Sorular
“HTML Hazine Avı” dersi ücretsiz mi?
Evet — “HTML Hazine Avı” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML for Kids kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML for Kids kursu toplamda 2 dersten oluşur.
“HTML Hazine Avı” dersinde ne öğreneceğim?
İpuçlarını çözmek ve gizli mesajları bulmak için HTML kullanın HTML for Kids ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML for Kids öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML for Kids, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 2 dersinin 2. dersidir.
“HTML Hazine Avı” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML for Kids dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML for Kids dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Birlikte Kodlayalım: Basit Bir Web Sayfası Oluşturma
- HTML Hazine Avı