🏷️ เกมที่ 1 (กิจกรรมที่ 1): Tag Hunter (นักล่าแท็ก HTML)
เป้าหมาย: ทบทวนความจำ ให้นักเรียนจับคู่ Tag HTML กับหน้าที่การทำงานให้ถูกต้อง
💻 เกมที่ 2 (กิจกรรมที่ 2): Build My First Page (สร้างหน้าเว็บแรกของฉัน)
เป้าหมาย: ให้นักเรียนได้พิมพ์โครงสร้างและ Tag HTML ด้วยตัวเอง (หัวข้อ, ย่อหน้า, รูปภาพ)
พร้อมระบบป้องกันการ Copy-Paste บังคับให้พิมพ์เอง 100%
🐞 เกมที่ 3 (กิจกรรมที่ 3): Broken Website (นักจับผิดบั๊ก HTML)
เป้าหมาย: ให้นักเรียนฝึกแก้ปัญหา (Debugging) โดยหาจุดที่เขียน Tag HTML ผิด (ลืมวงเล็บ, สะกดผิด, ลืมแท็กปิด)
🏛️ เกมที่ 1 (กิจกรรมที่ 4): Design Challenge (สถาปนิกโครงสร้างเว็บ)
เป้าหมาย: ให้นักเรียนเข้าใจโครงสร้างหลักของหน้าเว็บไซต์ 1 หน้า ว่าควรประกอบด้วยส่วนหัว (Header), เนื้อหา (Main/Article), และส่วนท้าย (Footer) โดยใช้แท็ก HTML เชิงโครงสร้าง (Semantic Tags)
🖼️ เกมที่ 2 (กิจกรรมที่ 5): Image Master (ปรมาจารย์แห่งภาพ)
เป้าหมาย: ให้เด็กลงมือเขียนโค้ดแทรกรูปภาพด้วย Tag <img> ฝึกการกำหนดที่อยู่ภาพ (src) และคำอธิบายภาพ (alt)
สำหรับผู้พิการทางสายตาหรือกรณีที่รูปไม่โหลด
🔗 เกมที่ 3 (กิจกรรมที่ 6): Link Adventure (การผจญภัยจุดเชื่อมโยง)
เป้าหมาย: เรียนรู้การใช้แท็ก <a> (Anchor Tag) และแอตทริบิวต์ href ในการสร้างลิงก์เชื่อมโยงไปยังหน้าเว็บอื่นๆ หรือเว็บไซต์ภายนอก
📝 เกมที่ 1 (กิจกรรมที่ 7): List Builder (นักสร้างรายการ)
เป้าหมาย: ให้นักเรียนแยกแยะและใช้งานแท็กรายการแบบมีลำดับ (<ol>) และแบบไม่มีลำดับ (<ul>) ร่วมกับแท็กรายการย่อย (<li>)
🗄️ เกมที่ 2 (กิจกรรมที่ 8): Table Creator (นักสร้างตาราง)
เป้าหมาย: ให้นักเรียนเข้าใจโครงสร้างแบบตาราง (Table) ซึ่งเป็นเรื่องที่เด็กสับสนที่สุด เพราะมีแท็กซ้อนกันหลายชั้น ได้แก่ <table> (คลุมตาราง), <tr> (แถวแนวนอน), <th> (หัวตารางตัวหนา), และ <td> (ข้อมูลตาราง)
🎨 เกมที่ 3 (กิจกรรมที่ 9): Style Upgrade (นักแต่งหน้าเว็บ)
เป้าหมาย: ให้นักเรียนเรียนรู้การใช้งาน Inline CSS เบื้องต้น ผ่านแอตทริบิวต์ style="..." เพื่อเปลี่ยนสีข้อความ (color)
และสีพื้นหลัง (background-color)
🌐 เกมที่ 1 (กิจกรรมที่ 10): Mini Website Project (เชื่อมโยง 3 โลก)
เป้าหมาย: สร้างเมนูนำทาง (Navigation Bar) เพื่อเชื่อมโยงหน้าเว็บ 3 หน้า (หน้าแรก, แนะนำตัว, ติดต่อเรา) เข้าด้วยกัน
🧩 เกมที่ 2 (กิจกรรมที่ 14): Match the Code (จับคู่วากยสัมพันธ์)
เป้าหมาย: การอ่านโค้ดไม่ใช่แค่การท่องจำ แต่คือการ "เข้าใจความหมาย" เกมนี้จะรวมทั้งภาษา HTML และ Python มาท้าทายนักเรียนให้จับคู่คำสั่งกับความหมายภาษาคนให้ถูกต้อง
📝 เกมที่ 3 (กิจกรรมที่ 16): Code Translator (วุ้นแปลภาษาโค้ด)
เป้าหมาย: เกม Final Boss ของตรรกะการเขียนโปรแกรม เปลี่ยนจากการจับคู่ เป็นการ "พิมพ์คำสั่ง" โดยระบบจะให้ "ภาษาคน (สิ่งที่อยากให้ทำ)" มา แล้วนักเรียนต้องพิมพ์ "ภาษาโค้ด" เข้าไปให้ถูกต้อง (มีทั้ง HTML และ Python ผสมกัน)
