|
สถานการณ์ที่ 1 : "นักเรียนต้องการสร้างหน้าเว็บไซต์ 'แนะนำตัว (My Profile)' เพื่อส่งครู โดยต้องการให้หน้าเว็บประกอบด้วย รูปโปรไฟล์ของตนเอง, ชื่อ-นามสกุล, คำบรรยายสั้นๆ, และ รายการวิชาที่ชอบเรียน" |
1.
จงเขียนโค้ด HTML เพื่อสร้างโครงสร้างส่วนหัวของหน้าเว็บ โดยต้องประกอบด้วย รูปภาพ (profile.jpg) และ ชื่อ-นามสกุล (ขนาดใหญ่ที่สุด)
เฉลย/เกณฑ์: ตรวจพบแท็ก <h1> และ แท็ก <img> ในโครงสร้าง HTML
|
|
|
|
2.
นักเรียนต้องการแสดงรายชื่อ "วิชาที่ชอบ" จำนวน 3 วิชา (คณิต, วิทย์, คอม) ซึ่งมีรูปแบบเป็นข้อๆ เหมือนกัน จงเขียนโค้ด HTML โดยใช้ Tag ที่เหมาะสมสำหรับทำรายการ (List)
เฉลย/เกณฑ์: ตรวจพบแท็ก <ul> หรือ <ol> ที่มี <li> อยู่ภายในจำนวน 3 รายการขึ้นไป
|
|
|
|
|
3.
หากต้องการให้ "ชื่อ-นามสกุล" (จากข้อ 1) มีสีข้อความเป็น สีน้ำเงิน (Blue) จงเขียนคำสั่ง CSS (แบบ Inline หรือ Internal) เพื่อกำหนดคุณสมบัตินี้
เฉลย/เกณฑ์: ตรวจพบ CSS Property color ของ h1 มีค่าเท่ากับ blue (หรือรหัสสีน้ำเงิน)
|
|
|
|
4.
จงเขียนโค้ด HTML เพื่อสร้างปุ่มหรือลิงก์ ที่เขียนว่า "ติดต่อฉัน" โดยเมื่อคลิกแล้วให้ลิงก์ไปยังหน้า contact.html
เฉลย/เกณฑ์: ตรวจพบแท็ก <a> ที่ระบุ Attribute href="contact.html" ได้ถูกต้อง
|
|
|
|
|
สถานการณ์ที่ 2 : "นักเรียนได้รับมอบหมายให้สร้างส่วนแสดง 'สินค้าแนะนำ' จำนวน 3 ชิ้น เรียงลงมาในแนวตั้ง โดยสินค้าแต่ละชิ้นจะอยู่ในกล่องสี่เหลี่ยมที่มีขอบ (Border) และมีการเว้นระยะห่างที่สวยงาม" |
5.
จงเขียนโครงสร้าง HTML สำหรับสินค้า 1 ชิ้น โดยให้นำองค์ประกอบทั้งหมด (รูปภาพ shoe.jpg, ชื่อสินค้า <h3>, ราคา <p>) ใส่ไว้ในกล่อง <div>
เฉลย/เกณฑ์: ตรวจพบแท็ก <div> ที่มีองค์ประกอบลูก (Child Elements) คือ <img> และ (<h3> หรือ <p>)
|
|
|
|
6.
สินค้าทั้ง 3 ชิ้น ต้องมีรูปแบบเหมือนกันทุกประการ จงเขียนโค้ด HTML เพื่อกำหนดชื่อ Class ว่า product-card ให้กับกล่อง <div> ของสินค้าชิ้นแรก
เฉลย/เกณฑ์: ตรวจพบแท็ก <div> ที่ระบุ Attribute class ชื่อว่า "product-card"
|
|
|
|
|
7.
ข้อมูลภายในกล่องสินค้าอยู่ชิดขอบเส้นเกินไป จงเขียนคำสั่ง CSS ให้กับคลาส .product-card เพื่อดันเนื้อหาภายในให้ห่างจากเส้นขอบ 20px (ใช้ความรู้เรื่อง Padding)
เฉลย/เกณฑ์: ตรวจพบ CSS Selector .product-card มี Property padding (ค่าเท่ากับ 20px)
|
|
|
|
|
8.
หากต้องการให้กล่องสินค้าแต่ละกล่อง ไม่วางชิดติดกัน (มีระยะห่างระหว่างกล่องบน-ล่าง) จงเขียนคำสั่ง CSS เพิ่มเติมลงในคลาสเดิม เพื่อกำหนดระยะห่างด้านนอก 15px (ใช้ความรู้เรื่อง Margin)
เฉลย/เกณฑ์: ตรวจพบ CSS Selector .product-card มี Property margin หรือ margin-bottom (ค่าเท่ากับ 15px)
|
|
|
|
|
สถานการณ์ที่ 3 : "นักเรียนกำลังเขียนบทความลงเว็บไซต์เรื่อง 'ภาวะโลกร้อน' โดยต้องการเน้นคำสำคัญบางคำให้เด่นชัด และมีการแบ่งหัวข้อให้อ่านง่าย" |
|
9.
บทความนี้มี "หัวข้อหลัก" คือ 'ภาวะโลกร้อน' และ "หัวข้อย่อย" คือ 'สาเหตุของปัญหา' จงเขียนโค้ด HTML โดยเลือกใช้ Tag หัวข้อ (Heading) ให้ถูกต้องตามลำดับความสำคัญ
เฉลย/เกณฑ์: ตรวจพบการใช้แท็ก <h1> และ <h2> ในหน้าเว็บเพื่อลำดับความสำคัญ
|
|
|
|
|
10.
ในบทความมีคำว่า "อันตราย" ปรากฏอยู่หลายจุด และต้องการให้คำนี้เป็น ตัวหนาและสีแดง ทุกที่ จงเขียน CSS Class ชื่อ .alert เพื่อกำหนดรูปแบบนี้
เฉลย/เกณฑ์: ตรวจพบ CSS Selector .alert มี Property color: red และ font-weight: bold
|
|
|
|
|
11.
จงเขียนโค้ด HTML เพื่อนำ Class .alert (จากข้อ 2) ไปใช้กับคำว่า "อันตราย" ในประโยค: <p>แสงแดดจัดเป็นเรื่องที่ อันตราย มาก</p> เฉพาะคำว่าอันตรายเท่านั้น
เฉลย/เกณฑ์: ตรวจพบแท็ก <span> ใน HTML ที่เรียกใช้ class="alert"
|
|
|
|
12.
ต้องการใส่ "กรอบสีเขียว" ล้อมรอบบทความทั้งหมด จงเขียนโค้ด HTML เพื่อสร้างกล่องคลุมเนื้อหาทั้งหมด (Wrapper) โดยกำหนด ID ชื่อ content-box
เฉลย/เกณฑ์: ตรวจพบแท็ก <div> ที่ทำหน้าที่คลุมเนื้อหา และระบุ id="content-box"
|
|
|
|
|
สถานการณ์ที่ 4 : "เพื่อนเปิดร้านกาแฟและขอให้นักเรียนช่วยทำหน้าเว็บ 'เมนูแนะนำ' โดยต้องการแสดงรายการเครื่องดื่ม 3 อย่าง (ลาเต้, คาปูชิโน่, มอคค่า) เรียงลงมาเป็นรายการ โดยแต่ละรายการต้องมีเส้นขีดคั่นด้านล่างเพื่อแบ่งบรรทัดให้สวยงาม" |
13.
เมนูนี้ประกอบด้วย "รายการเครื่องดื่ม" หลายรายการต่อกัน จงเขียนโค้ด HTML เพื่อสร้าง Unordered List (<ul>) และใส่รายการเครื่องดื่ม (<li>) ลงไป 3 รายการ
เฉลย/เกณฑ์: ตรวจพบแท็ก <ul> ที่มี <li> ภายในอย่างน้อย 3 รายการ
|
|
|
|
|
14.
ต้องการให้ทุกรายการมีเส้นขีดคั่นด้านล่างเหมือนกันหมด จงเขียน CSS Class ชื่อ .menu-item โดยกำหนดให้มีเส้นขอบล่าง (border-bottom) แบบเส้นทึบ สีดำ
เฉลย/เกณฑ์: ตรวจพบ CSS Selector .menu-item มี Property border-bottom (หรือ border) แบบเส้นทึบ
|
|
|
|
|
15.
หากตัวหนังสือติดเส้นขอบเกินไปจะดูไม่สวยงาม จงเขียนคำสั่ง CSS เพิ่มเติมในคลาสเดิม เพื่อดันข้อความให้ห่างจากเส้นขอบด้านล่าง 10px (ใช้ Padding)
เฉลย/เกณฑ์: ตรวจพบ CSS Selector .menu-item มี Property padding-bottom (ค่ามากกว่า 0)
|
|
|
|
|
16.
จงเขียนโค้ด HTML เพื่อนำ Class .menu-item ไปใช้งานกับรายการเครื่องดื่ม "ลาเต้" ให้ถูกต้อง
เฉลย/เกณฑ์: ตรวจพบแท็ก <li> ใน HTML ที่เรียกใช้ class="menu-item"
|
|
|
|
|
สถานการณ์ที่ 5 : "ชมรมคอมพิวเตอร์ต้องการรับสมัครสมาชิกใหม่ผ่านหน้าเว็บ จึงให้นักเรียนสร้าง 'ฟอร์มลงทะเบียน' ง่ายๆ ที่ให้ผู้สมัครกรอก ชื่อเล่น และกดปุ่ม สมัครทันที" |
|
17.
การสร้างฟอร์มต้องมีองค์ประกอบหลักคือ พื้นที่รับข้อมูล และปุ่มกด จงเขียนโค้ด HTML สร้างกล่องข้อความ (<input>) และปุ่มกด (<button>) ให้อยู่ภายใต้แท็ก <form>
เฉลย/เกณฑ์: ตรวจพบแท็ก <form> ที่ภายในมี <input> และ <button> (หรือ submit)
|
|
|
|
|
18.
ต้องการให้กล่องกรอกข้อความมีความกว้างเต็มหน้าจอ (เพื่อให้กรอกง่ายในมือถือ) จงเขียน CSS โดยใช้ Type Selector (เลือกที่ชื่อแท็ก input โดยตรง) กำหนดความกว้างเป็น 100%
เฉลย/เกณฑ์: ตรวจพบ CSS Selector input มี Property width ค่าเท่ากับ 100%
|
|
|
|
|
19.
เพื่อลดความสับสนของผู้ใช้ จงใส่ข้อความคำใบ้ (Placeholder) ลงในช่องกรอกข้อมูลว่า "กรุณากรอกชื่อเล่นของท่าน"
เฉลย/เกณฑ์: ตรวจพบแท็ก <input> มีการระบุ Attribute placeholder
|
|
|
|
|
20.
จงเขียนคำสั่ง CSS เพิ่มเติมให้กับปุ่มกด (button) เพื่อเปลี่ยนสีพื้นหลังเป็นสีเขียว (green) และสีตัวอักษรเป็นสีขาว (white) เพื่อสื่อความหมายว่าเป็นปุ่มยืนยัน
เฉลย/เกณฑ์: ตรวจพบ CSS Selector button มี Property background-color เป็นสีเขียว
|
|
|
|
|
สถานการณ์ที่ 6 : "นักเรียนต้องการทำหน้าเว็บแสดง 'ตารางเรียนวันจันทร์' ซึ่งมี 2 วิชา คือ คณิตศาสตร์ (เช้า) และ ภาษาไทย (บ่าย) โดยต้องการแสดงในรูปแบบตารางที่มีเส้นขอบชัดเจน" |
21.
โครงสร้างตารางประกอบด้วย 3 ส่วนหลักตามลำดับชั้น คือ ตาราง (<table>), แถว (<tr>), และ ข้อมูลในเซลล์ (<td>) จงเขียนโครงสร้างเปล่าๆ ที่ถูกต้อง (ยังไม่ต้องใส่ข้อมูล) สำหรับตารางที่มี 1 แถว
เฉลย/เกณฑ์: ตรวจพบโครงสร้าง <table> ที่มี <tr> และ <td> ซ้อนกันถูกต้องตามลำดับชั้น
|
|
|
|
|
22.
การสร้างตารางต้องทำเป็นแถว (Row-first) จงเขียนโค้ด HTML สร้างแถวหัวตาราง (แถวที่ 1) ที่มีหัวข้อคอลัมน์ว่า "เวลา" และ "วิชาเรียน" โดยใช้แท็กสำหรับหัวตารางโดยเฉพาะ (<th>)
เฉลย/เกณฑ์: ตรวจพบการใช้แท็ก <th> ภายในแถว (<tr>) แทนการใช้ <td> ปกติ
|
|
|
|
|
23.
ต้องการให้เส้นขอบของตารางเป็นเส้นทึบสีดำทั้งตาราง จงเขียน CSS ให้กับ table, th, และ td พร้อมกัน (Group Selector) เพื่อกำหนด border: 1px solid black;
เฉลย/เกณฑ์: ตรวจพบ CSS Selector (table th หรือ td) มี Property border
|
|
|
|
|
24.
หากต้องการให้ตารางขยายความกว้างจนเต็มหน้าจอเสมอ ไม่ว่าจะเปิดด้วยหน้าจอขนาดใด จงกำหนดค่าความกว้าง (width) ให้กับแท็ก table ให้เหมาะสม
เฉลย/เกณฑ์: ตรวจพบ CSS Selector table มี Property width ค่าเท่ากับ 100%
|
|
|
|