ล่าขุมทรัพย์ HTML
ใช้ HTML ไขเบาะแสและค้นหาข้อความที่ซ่อนอยู่
ล่าขุมทรัพย์ HTML เป็นบทเรียน HTML for Kids ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 2 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML for Kids และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML for Kids มีบทเรียนทั้งหมด 2 บทเรียน
เริ่มต้นการล่าสมบัติ
การล่าสมบัติ HTML
ยินดีต้อนรับสู่การล่าสมบัติ HTML! ภารกิจของคุณคือค้นหาสมบัติที่ซ่อนอยู่ด้วยการแก้เบาะแสในโค้ด HTML ทำตามแต่ละขั้นตอนอย่างระมัดระวังและแก้ไขโค้ดเพื่อดำเนินการต่อ
เป้าหมาย: ค้นหาสมบัติด้วยการทำภารกิจแต่ละรายการให้สำเร็จ!
ตั้งค่าแผนที่สมบัติ
ขั้นตอนที่ 1: ตั้งค่าแผนที่สมบัติ
เบาะแสแรกซ่อนอยู่ในความคิดเห็น เปิดโค้ด HTML แล้วค้นหาเบาะแส!
โค้ด 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>
เพิ่มแผนที่สมบัติ
ขั้นตอนที่ 2: เพิ่มแผนที่สมบัติ
คุณเพิ่มแผนที่สมบัติแล้วหรือยัง นี่คือตัวอย่าง:
<img src="treasure-map.jpg" alt="Treasure Map" />จัดเตรียมเครื่องมือ
ขั้นตอนที่ 3: จัดเตรียมเครื่องมือ
เพื่อดำเนินการต่อ ให้สร้างรายการเครื่องมือที่คุณจะนำไปใช้ในการล่าสมบัติ ใช้แท็ก <ul> และ <li>
ตัวอย่าง:
<ul>
<li>Compass</li>
<li>Flashlight</li>
<li>Map</li>
</ul>
ค้นหาข้อมูลเพิ่มเติม
ขั้นตอนที่ 4: ค้นหาข้อมูลเพิ่มเติม
เพิ่มลิงก์ไปยังเว็บไซต์เกี่ยวกับการล่าสมบัติโดยใช้แท็ก <a>
ตัวอย่าง:
<a href="https://www.example.com" target="_blank">Learn More About Treasure Hunting</a>
ภารกิจท้าทายสุดท้าย
ขั้นตอนที่ 5: ภารกิจท้าทายสุดท้าย
สมบัติใกล้จะเป็นของคุณแล้ว! หากต้องการปลดล็อกสมบัติ ให้สร้างปุ่มที่แสดงข้อความซ่อนอยู่เมื่อคลิก
ใช้ตัวอย่างต่อไปนี้เป็นแนวทาง:
<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>
ทดสอบหน้าของคุณ
ขั้นตอนที่ 6: ทดสอบหน้าของคุณ
ตอนนี้คุณเพิ่มองค์ประกอบทั้งหมดแล้ว ให้ทดสอบหน้าเว็บ ตรวจสอบให้แน่ใจว่า:
- รูปภาพแสดงผลได้อย่างถูกต้อง
- รายการเครื่องมือมองเห็นได้
- ลิงก์เปิดเว็บไซต์ในแท็บใหม่
- ปุ่มแสดงข้อความสมบัติ
หากทุกอย่างทำงานได้ ขอแสดงความยินดี—คุณทำภารกิจล่าสมบัติสำเร็จแล้ว!
สมบัติสุดท้าย
หน้าสุดท้ายของคุณอาจมีลักษณะดังนี้:
<!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>
ทบทวนการล่าสมบัติ
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!
คำถามที่พบบ่อย
บทเรียน “ล่าขุมทรัพย์ HTML” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ล่าขุมทรัพย์ HTML” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML for Kids ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML for Kids มีบทเรียนทั้งหมด 2 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ล่าขุมทรัพย์ HTML”
ใช้ HTML ไขเบาะแสและค้นหาข้อความที่ซ่อนอยู่ คุณปฏิบัติ HTML for Kids ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML for Kids หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML for Kids บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 2 บทเรียน
บทเรียน “ล่าขุมทรัพย์ HTML” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML for Kids นี้ได้ไหม
ได้ บทเรียน HTML for Kids ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เขียนโค้ดไปพร้อมกัน: สร้างหน้าเว็บง่าย ๆ
- ล่าขุมทรัพย์ HTML