ข้อสอบ ทักษะ การสร้างเว็บไซต์ คืออะไร วัดอะไรบ้าง ให้คะแนนอย่างไร และฝึกเริ่มจากตรงไหน

ข้อสอบ ทักษะ การสร้างเว็บไซต์ ไม่ได้มีแค่คำถามปรนัยเรื่องแท็ก HTML แต่ในสนามแข่งขันส่วนใหญ่คือการลงมือสร้างเว็บเพจจริงภายในเวลาจำกัด แล้วให้กรรมการตัดสินจากผลงาน บทนี้อธิบายภาพรวมว่าข้อสอบประเภทนี้วัดอะไร รูปแบบการแข่งขันที่ประกาศจริงเป็นอย่างไร เกณฑ์ให้คะแนนแบ่งน้ำหนักแบบไหน และพื้นฐานที่ต้องแม่นก่อนลงสนาม

ข้อสอบ ทักษะ การสร้างเว็บไซต์ วัดความสามารถด้านไหน

• ความถูกต้องของโครงสร้างเอกสาร HTML เช่น การประกาศ doctype การกำหนดภาษา และส่วน head
• การออกแบบหน้าตาด้วย CSS ให้อ่านง่ายและสอดคล้องกับหัวข้อ
• การเชื่อมโยงหลายหน้าและการใช้งานที่ไม่สับสน หรือที่เรียกว่าประสบการณ์ผู้ใช้
• ความสามารถทางเทคนิค เช่น การทำหน้าเว็บให้แสดงผลได้ดีทุกขนาดจอ
• พื้นฐานการคิดเป็นขั้นตอนจากวิชาวิทยาการคำนวณ ซึ่งปูไว้ตั้งแต่ประถม ดูตัวอย่างได้ที่ ข้อสอบคอมพิวเตอร์ ป.3 วิทยาการคำนวณเรียนอะไร และ ข้อสอบการเขียนอัลกอริทึมด้วยข้อความ

รูปแบบการแข่งขันที่ประกาศจริง ระดับ ม.ต้น

ตัวอย่างที่มีรายละเอียดครบคือการแข่งขันพัฒนาเว็บเพจแบบ Text Editor ในงานวันวิทยาศาสตร์ของคณะวิทยาศาสตร์ มหาวิทยาลัยราชภัฏอุดรธานี ทั้ง กติกาปี 2569 และ กติกาปี 2568 กำหนดไว้ใกล้เคียงกัน

• ผู้แข่งขันระดับ ม.1-ม.3 ทีมละ 2-3 คน โรงเรียนละไม่เกิน 2 ทีม
• ใช้ได้เฉพาะ HTML CSS และ JavaScript ผ่านโปรแกรม VS Code หรือ Notepad ห้ามใช้ระบบจัดการเนื้อหาสำเร็จรูป (CMS)
• เว็บไซต์ต้องมีอย่างน้อย 3 หน้าที่เชื่อมโยงกัน ไฟล์หลักชื่อ index.html และกรรมการจะเปิดดูบนหลายเบราว์เซอร์ เช่น Chrome และ MS Edge
• ใช้เวลาแข่ง 3 ชั่วโมง (09.00-12.00 น.) และประกาศหัวข้อในวันแข่งขัน ผู้จัดเตรียมข้อมูลและสื่อให้

เกณฑ์ให้คะแนน 100 คะแนน เทียบปี 2568 กับ 2569

จะเห็นว่าปี 2569 เพิ่มน้ำหนักให้ความประทับใจแรกและการจัดวาง แต่ลดน้ำหนักเนื้อหาลง ทีมที่เตรียม ข้อสอบ ทักษะ การสร้างเว็บไซต์ จึงควรฝึกออกแบบหน้าแรกให้ดึงดูด ใช้ทั้งข้อความ ภาพ และแผนภูมิอย่างหลากหลาย

พื้นฐาน HTML ที่ต้องแม่นก่อนลงสนาม

• ตาม บทเรียนโครงสร้างเอกสารของ web.dev บรรทัดแรกต้องเป็น <!DOCTYPE html> เพื่อให้เบราว์เซอร์แสดงผลแบบมาตรฐาน
• กำหนดภาษาด้วย lang ในแท็ก html เช่น lang=”th” ช่วยโปรแกรมอ่านหน้าจอและเครื่องมือค้นหา
• วาง meta charset=”utf-8″ ไว้ต้นส่วน head เพื่อให้ภาษาไทยแสดงถูกต้อง
• ใส่ meta viewport ที่ width=device-width เพื่อรองรับจอมือถือ ซึ่งตรงกับเกณฑ์ Technical Skill
• ทุกหน้าควรมี title ไม่ซ้ำกัน เพราะแสดงบนแท็บ ประวัติ และผลการค้นหา บทเรียนชุดเดียวกันมี บทสรุปหลักสูตร HTML ภาษาไทย ไว้ทบทวน

ตัวอย่างโจทย์ข้อสอบ ทักษะ การสร้างเว็บไซต์ พร้อมเฉลย

โจทย์ต่อไปนี้เป็นตัวอย่างที่เขียนขึ้นเพื่อฝึก ไม่ได้นำมาจากข้อสอบจริง

• ข้อ 1 ภาษาใดใช้กำหนดโครงสร้างเนื้อหาของเว็บเพจ ก. CSS ข. HTML ค. JavaScript ง. SQL เฉลย ข. ส่วน CSS ใช้ตกแต่ง และ JavaScript ใช้เพิ่มการโต้ตอบ
• ข้อ 2 ถ้าต้องการลิงก์จากหน้าแรกไปหน้า about.html ควรเขียนอย่างไร เฉลย ใช้แท็ก a ที่มี href=”about.html”
• ข้อ 3 เว็บแสดงผลบนมือถือแล้วตัวอักษรเล็กมาก ควรตรวจสิ่งใดก่อน เฉลย ตรวจว่ามี meta viewport หรือไม่
• โจทย์ปฏิบัติ: สร้างเว็บแนะนำโรงเรียน 3 หน้า มีเมนูเชื่อมทุกหน้า และหน้าแรกมีภาพกับตารางข้อมูลอย่างละ 1 จุด ภายใน 90 นาที

แผนฝึกก่อนแข่งและแหล่งพัฒนาทักษะ

• ซ้อมทำเว็บ 3 หน้าภายใน 3 ชั่วโมงอย่างน้อย 3-4 ครั้ง โดยสุ่มหัวข้อใหม่ทุกครั้ง เพื่อจำลองการประกาศหัวข้อในวันแข่ง
• แบ่งหน้าที่ในทีม เช่น คนหนึ่งดูโครงสร้างและเนื้อหา อีกคนดู CSS และการแสดงผลบนมือถือ
• ข้อสอบ ทักษะ การสร้างเว็บไซต์ ให้คะแนนการออกแบบสูง ครูและนักเรียนจึงอาจฝึกจัดองค์ประกอบภาพจากคอร์สออนไลน์ เช่น อบรมออนไลน์หัวข้อ CANVA EDUCATION และ การประยุกต์ใช้เทคโนโลยีดิจิทัลสำหรับทักษะอนาคต
• ครูที่อยากเพิ่มทักษะด้าน AI เพื่อช่วยเตรียมเนื้อหา ดู อบรมออนไลน์ AI Skills for Everyone
• เวทีระดับเขตดูรายการและเกณฑ์ได้ที่ เกณฑ์ศิลปหัตถกรรมครั้งที่ 74 และ ประกาศการแข่งขันครั้งที่ 74
• นักเรียนที่ถนัดคอมพิวเตอร์เชิงลึกอาจต่อยอดไปสาขาคอมพิวเตอร์ของ การสอบ สอวน. หรือใช้ ระบบวัดแววความสามารถพิเศษ ช่วยคัดกรองความถนัด

สรุปคือ ข้อสอบ ทักษะ การสร้างเว็บไซต์ เน้นผลงานจริงมากกว่าความจำ ตัดสินจากเนื้อหา ความประทับใจแรก การจัดวาง ประสบการณ์ผู้ใช้ และทักษะเทคนิค การฝึกข้อสอบ ทักษะ การสร้างเว็บไซต์ จึงควรซ้อมสร้างเว็บครบวงจรภายใต้เวลาจำกัด

คำถามที่พบบ่อย (FAQ)

ใช้โปรแกรมสร้างเว็บสำเร็จรูปได้ไหม

ในกติกาที่ค้นพบไม่ได้ ห้ามใช้ CMS และให้ใช้เฉพาะ VS Code หรือ Notepad

ต้องมีกี่หน้า

อย่างน้อย 3 หน้าที่เชื่อมโยงกัน และไฟล์หลักต้องชื่อ index.html

หัวข้อประเมินใดมีน้ำหนักมากที่สุดในปี 2569

First Impression และ Idea/Concept/Layout หัวข้อละ 25 คะแนน

Responsive Design คืออะไร

การออกแบบให้เว็บแสดงผลเหมาะสมทุกขนาดจอ เป็นส่วนหนึ่งของเกณฑ์ Technical Skill

แข่งเดี่ยวได้ไหม

กติกาที่ค้นพบกำหนดทีมละ 2-3 คน สนามอื่นอาจต่างกัน ควรดูประกาศของสนามที่สมัคร

แหล่งอ้างอิง

• คณะวิทยาศาสตร์ มหาวิทยาลัยราชภัฏอุดรธานี กติกาการแข่งขันพัฒนา Webpage แบบ Text Editor ปี 2569: https://scienceday.udru.ac.th/2569/activity/202609.pdf
• คณะวิทยาศาสตร์ มหาวิทยาลัยราชภัฏอุดรธานี กติกาการแข่งขันพัฒนา Webpage แบบ Text Editor ปี 2568: https://scienceday.udru.ac.th/2568/activity/2568-14.pdf
• web.dev Learn HTML: Document structure: https://web.dev/learn/html/document-structure?hl=th
• web.dev Learn HTML: Conclusion: https://web.dev/learn/html/conclusion?hl=th