แผนประจำหน่วยการเรียนรู้ที่ 3
เรื่อง การสร้างรายการด้วยภาษา HTML เวลาเรียนจำนวน 4 ชั่วโมง
หัวเรื่อง/สาระ
1. การสร้างรายการแบบไม่มีลำดับและมีลำดับในเอกสารภาษา HTML
2. การสร้างรายการแบบเมนูและไดเรกทอรีในเอกสารภาษา HTML
3. การสร้างรายการแบบจำกัดความในเอกสารภาษา HTML
4. การสร้างรายการซ้อนกันในเอกสารภาษา HTML
แนวคิด หรือสาระสำคัญ
1. รายการแบบไม่มีลำดับ (Unordered List) เป็นการกำหนดรายการแบบใช้สัญลักษณ์ ประกอบด้วยแท็กที่สำคัญ 2 แท็ก คือ แท็ก <li> และแท็ก <ul> โดยจะต้องอยู่ภายใต้แท็กกำหนดรายการแบบไม่มีลำดับ คือ แท็ก <ul> เป็นแท็กคู่ มีแท็กเปิด (open tag) และแท็กปิด (close tag) และรายการแบบมีลำดับ (Ordered List) นำเสนอข้อมูลแบบมีลำดับแท็กที่สำคัญแท็ก <ol> และ <li> ใช้การกำหนดรายการ
2. รายการแบบเมนู (Menu List) และรายการแบบไดเรกทอรี (Directory List) รูปแบบสัญลักษณ์เหมือนกับการกำหนดรายการแบบไม่มีลำดับ (Unordered List) โดยจะแสดงผลเป็นลักษณะวงกลมทึบที่เป็นค่าเริ่มต้นของรายการแบบไม่มีลำดับ
3. รายการแบบจำกัดความ (Definition List) สามารถนำมาประยุกต์ใช้กับการกำหนดรูปแบบในบรรณานุกรม และพจนานุกรมที่มีการจัดลำดับข้อมูลมีการเยื้องของข้อมูลชัดเจนคงที่ โดยใช้แท็ก <dl>...</dl> และแท็ก <dd> เป็นแท็กที่เปรียบเสมือนแท็บเพื่อการกำหนดให้ข้อความเยื้องไปทางขวาของจอภาพ
4. การสร้างรายการซ้อนกันช่วยในเรื่องการนำเสนอข้อมูล อาจใช้รายการในรูปแบบอื่นมาผสมกันได้ รายการแบบไม่มีลำดับและมีลำดับ รายการแบบเมนู รายการแบบไดเรกทรอรี รายการแบบจำกัดความโดยมีหัวข้อย่อยมีขั้นตอนเป็นจำนวนมาก มาเรียงลำดับซ้อนกันหลายรูปแบบ
จุดประสงค์การเรียนรู้
หลังจากศึกษาเนื้อหาในหน่วยการเรียนรู้นี้แล้วนักเรียนมีความสามารถ ดังนี้
1. อธิบายและสร้างรายการแบบไม่มีลำดับและมีลำดับในเอกสารภาษา HTMLได้
2. อธิบายและสร้างรายการแบบเมนูและไดเรกทอรีในเอกสารภาษา HTMLได้
3. อธิบายและสร้างรายการแบบจำกัดความในเอกสารภาษา HTMLได้
4. อธิบายและสร้างรายการแบบซ้อนกันในเอกสารภาษา HTMLได้
หัวเรื่องที่ 3.1
การสร้างรายการแบบไม่มีลำดับและมีลำดับในเอกสารภาษา HTML เวลาเรียน 1 ชั่วโมง
รายการแบบไม่มีลำดับ (Unordered List) และรายการแบบมีลำดับ เป็นรายการเบื้องต้นที่เหมาะสำหรับการนำเสนอข้อมูลที่เป็นหัวข้อประเด็นสั้น ๆ การประยุกต์ใชเป็นแหล่งเชื่อมโยงไปยังข้อมูลต่อไป หรือประยุกต์ใช้เป็นเมนู จำเป็นต้องมีแท็กสำหรับแสดงข้อมูลรายการ (List Item) คือ แท็ก <li> โดยจะต้องอยู่ภายใต้แท็กกำหนดรายการแบบไม่มีลำดับ คือ แท็ก <ul> ทั้งสองแท็กที่กล่าวมาเป็นแท็กคู่ประกอบไปด้วยแท็กเปิด (open tag) และแท็กปิด (close tag) สามารถกำหนดรูปแบบสัญลักษณ์ของรายการแบบไม่มีลำดับ เช่น แบบวงกลมทึบ วงกลมโปร่ง และสี่เหลี่ยมทึบ และมีลำดับ เช่น เป็นตัวอักษรพิมพ์เล็ก พิมพ์ใหญ่ แบบตัวเลขโรมันพิมพ์เล็ก แบบตัวเลขโรมันพิมพ์ใหญ่
รายละเอียดของเนื้อหามีดังนี้
1. การสร้างรายการแบบไม่มีลำดับในเอกสารภาษา HTML
2. การสร้างรายการแบบมีลำดับในเอกสารภาษา HTML
|
รายการแบบไม่มีลำดับ (Unordered List) เป็นการกำหนดรายการแบบใช้สัญลักษณ์ ประกอบด้วยแท็กที่สำคัญ 2 แท็ก คือ แท็ก <li> และแท็ก <ul> โดยจะต้องอยู่ภายใต้แท็กกำหนดรายการแบบไม่มีลำดับ คือ แท็ก <ul> เป็นแท็กคู่ มีแท็กเปิด (open tag) และแท็กปิด (close tag) และรายการแบบมีลำดับ (Ordered List) นำเสนอข้อมูลแบบมีลำดับแท็กที่สำคัญแท็ก <ol> และ <li> ใช้การกำหนดรายการ |
กิจกรรม/ใบงานที่ 3.1 การสร้างรายการแบบไม่มีลำดับและมีลำดับในเอกสารภาษา HTML (คะแนนเต็ม 10 คะแนน) ใช้เวลาทำ 20 นาที
คำชี้แจง
1. จงพิจารณาข้อความแต่ละข้อด้านล่างนี้ว่าเป็นลักษณะรายการแบบใดโดยใช้ตัวเลือกดังต่อไปนี้
ก. รายการแบบไม่มีลำดับ ข. รายการแบบมีลำดับ
.................... 1.1 รายการที่แยกข้อมูลโดยใช้สัญลักษณ์พิเศษ
.................... 1.2 ตัวอักษรพิมพ์ใหญ่, ตัวอักษรพิมพ์เล็ก, ตัวเลขโรมันพิมพ์เล็ก, ตัวเลขโรมันพิมพ์ใหญ่
.................... 1.3 สามารถกำหนดข้ามลำดับบางรายการได้
.................... 1.4 <li value= “ตัวเลข”>
.................... 1.5 <ol type= “i”>
.................... 1.6 disc / circle/ square
.................... 1.7 มีลักษณะเป็นลำดับขั้นตอน มีตัวเลขกำกับในแต่ละรายการ
.................... 1.8 <ul>…</ul>
.................... 1.9 สามารถกำหนดเครื่องหมายนำหน้า (bullet)
.................... 1.10 มีค่าปกติเป็นตัวเลข
2. เมื่อนักเรียนปฏิบัติเสร็จเรียบร้อยแล้ว ส่งผลการปฏิบัติงานที่ครูหน้าชั้นเรียน
แนวตอบ หรือแนวปฏิบัติ
คะแนน/คุณภาพ |
เกณฑ์การประเมินผล |
5 : ดีมาก |
ทำกิจกรรมถูกต้อง 9-10 ข้อ |
4 : ดี |
ทำกิจกรรมถูกต้อง 7-8 ข้อ |
3 : ปานกลาง |
ทำกิจกรรมถูกต้อง 5-6 ข้อ |
2 : พอใช้ |
ทำกิจกรรมถูกต้อง 3-4 ข้อ |
1 : ปรับปรุง |
ทำกิจกรรมถูกต้อง 1-2 ข้อ |
0 : ไม่ผ่าน |
ทำกิจกรรมถูกต้อง 0 ข้อ |
หัวเรื่องที่ 3.2
การสร้างรายการแบบเมนูและไดเรกทรอรีในเอกสารภาษา HTML เวลาเรียน 1 ชั่วโมง
รายการแบบเมนู (Menu List) และรายการแบบไดเรกทอรี (Directory List) เป็นรายการที่ไม่ต้องการลำดับข้อมูลและทั้งสองจะมีการกำหนดและการแสดงผลรายการเหมือนกับรายการแบบไม่มีลำดับ (Unordered List)
รายละเอียดของเนื้อหามีดังนี้
1. การสร้างรายการแบบเมนูในเอกสาร HTML
2. การสร้างรายการแบบไดเรกทรอรีในเอกสาร HTML
|
รายการแบบเมนู (Menu List) และรายการแบบไดเรกทอรี (Directory List) รูปแบบสัญลักษณ์เหมือนกับการกำหนดรายการแบบไม่มีลำดับ (Unordered List) โดยจะแสดงผลเป็นลักษณะวงกลมทึบที่เป็นค่าเริ่มต้นของรายการแบบไม่มีลำดับ |
กิจกรรม/ใบงานที่ 3.2 การสร้างรายการแบบเมนูและไดเรกทรอรีในเอกสารภาษา HTML (คะแนนเต็ม 10 คะแนน) ใช้เวลาทำ 20 นาที
คำชี้แจง
1. ให้นักเรียนทำเครื่องหมายถูก (/) หน้าข้อที่ถูกต้อง และทำเครื่องหมายกากบาท (x)
หน้าข้อที่ไม่ถูกต้อง
.................... 1.1 รายการแบบเมนูกำหนดภายในแท็ก <body>…</body>
.................... 1.2 เมนูเป็นรายการที่ไม่เกิน 1 บรรทัด
.................... 1.3 เมนูมีผลลัพธ์เหมือนกับรายการแบบมีลำดับ
.................... 1.4 <li> เป็นแท็กใช้สำหรับการกำหนดข้อมูลรายการทุกแบบ
.................... 1.5 li มาจากคำว่า “list ltem”
.................... 1.6 เมนูและไดเรกทอรีไม่สามารถกำหนดลักษณะของหน้ารายการได้
.................... 1.7 <dir> ต้องกำหนดภายในแท็ก <body>…</body>
.................... 1.8 รายการแบบไดเรกทอรีใช้แยกคำและความหมายออกจากกัน
.................... 1.9 รายการแบบไดเรกทอรีมีลักษณะเหมือนรายการแบบมีลำดับ
.................... 1.10 <dir> เป็นการสร้างรายการแบบไดเรกทอรี
2. เมื่อนักเรียนปฏิบัติเสร็จเรียบร้อยแล้ว ส่งผลการปฏิบัติงานที่ครูหน้าชั้นเรียน
แนวตอบ หรือแนวปฏิบัติ
คะแนน/คุณภาพ |
เกณฑ์การประเมินผล |
5 : ดีมาก |
ทำกิจกรรมถูกต้อง 9-10 ข้อ |
4 : ดี |
ทำกิจกรรมถูกต้อง 7-8 ข้อ |
3 : ปานกลาง |
ทำกิจกรรมถูกต้อง 5-6 ข้อ |
2 : พอใช้ |
ทำกิจกรรมถูกต้อง 3-4 ข้อ |
1 : ปรับปรุง |
ทำกิจกรรมถูกต้อง 1-2 ข้อ |
0 : ไม่ผ่าน |
ทำกิจกรรมถูกต้อง 0 ข้อ |
หัวเรื่องที่ 3.3
การสร้างรายการแบบจำกัดความในเอกสารภาษา HTML เวลาเรียน 1 ชั่วโมง
รายการแบบจำกัดความ (Definition List) เป็นรายการที่สามารถประยุกต์ใช้กับการกำหนดรูปแบบในบรรณานุกรมและพจนานุกรมที่มีการจัดลำดับข้อมูลมีการเยื้องของข้อมูลชัดเจนคงที่
รายละเอียดของเนื้อหามีดังนี้
การสร้างรายการแบบจำกัดความในเอกสารภาษา HTML
|
รายการแบบจำกัดความ (Definition List) สามารถนำมาประยุกต์ใช้กับการกำหนดรูปแบบในบรรณานุกรม และพจนานุกรมที่มีการจัดลำดับข้อมูลมีการเยื้องของข้อมูลชัดเจนคงที่ โดยใช้แท็ก <dl>...</dl> และแท็ก <dd> เป็นแท็กที่เปรียบเสมือนแท็บเพื่อการกำหนดให้ข้อความเยื้องไปทางขวาของจอภาพ |
กิจกรรม/ใบงานที่ 3.3
การสร้างรายการแบบจำกัดความในเอกสารภาษา HTML (คะแนนเต็ม 10 คะแนน) ใช้เวลาทำ 20 นาที
คำชี้แจง
1. จงเติมคำลงในช่องว่างให้ถูกต้องสมบูรณ์
1.1 รายการแบบจำกัดความแบ่งออกเป็น..............ส่วน
1.2 ส่วนของรายการแบบจำกัดความ คือ............................................................
1.3 dl มาจากคำว่า..............................................................................................
1.4 การสร้างรายการแบบจำกัดความกำหนดด้วยแท็ก.........................................
1.5 การสร้างรายการแบบจำกัดความต้องกำหนดภายในแท็ก................................
1.6 การกำหนดรายละเอียดของรายการแบบจำกัดความกำหนดในแท็ก......………
1.7 แท็ก...................มีลักษณะเหมือนแท็บหรือเยื้องซ้าย
1.8 แท็กสำหรับการสร้างรายการประกอบด้วยแท็ก……………………………………
1.9 แท็ก <dl> เป็นแท็กเดี่ยวหรือแท็กคู่..............................
1.10 การกำหนดแท็ก <dd> <dt> แท็กใดเป็นแท็กลำดับแรก....……………….….
2. เมื่อนักเรียนปฏิบัติเสร็จเรียบร้อยแล้วส่งผลการปฏิบัติงานที่ครูหน้าชั้นเรียน
แนวตอบ หรือแนวปฏิบัติ
คะแนน/คุณภาพ |
เกณฑ์การประเมินผล |
5 : ดีมาก |
ทำกิจกรรมถูกต้อง 9-10 ข้อ |
4 : ดี |
ทำกิจกรรมถูกต้อง 7-8 ข้อ |
3 : ปานกลาง |
ทำกิจกรรมถูกต้อง 5-6 ข้อ |
2 : พอใช้ |
ทำกิจกรรมถูกต้อง 3-4 ข้อ |
1 : ปรับปรุง |
ทำกิจกรรมถูกต้อง 1-2 ข้อ |
0 : ไม่ผ่าน |
ทำกิจกรรมถูกต้อง 0 ข้อ |
หัวเรื่องที่ 3.4
การสร้างรายการแบบซ้อนกันในเอกสารภาษา HTML เวลาเรียน 1 ชั่วโมง
การสร้างรายการซ้อนกันเป็นการกำหนดเนื้อหาเป็นรายการต่างๆ ที่ได้ศึกษามาก่อนหน้า การสร้างรายการแบบไม่มีลำดับและมีลำดับ การสร้างรายการแบบเมนู การสร้างรายการแบบไดเรกทรอรี การสร้างรายการแบบจำกัดความ สามารถใช้ประโยชน์จากการสร้างรายการซ้อนกันนำเสนอข้อมูลมีหัวข้อย่อยมีขั้นตอนเป็นจำนวนมาก
รายละเอียดของเนื้อหามีดังนี้
การสร้างรายการแบบซ้อนกันในเอกสารภาษา HTML
|
การสร้างรายการซ้อนกันช่วยในเรื่องการนำเสนอข้อมูล อาจใช้รายการในรูปแบบอื่นมาผสมกันได้ รายการแบบไม่มีลำดับและมีลำดับ รายการแบบเมนู รายการแบบไดเรกทรอรี รายการแบบจำกัดความโดยมีหัวข้อย่อยมีขั้นตอนเป็นจำนวนมาก มาเรียงลำดับซ้อนกันหลายรูปแบบ |
กิจกรรม/ใบงานที่ 3.4 การสร้างรายการแบบซ้อนกันในเอกสารภาษา HTML (คะแนนเต็ม 10 คะแนน) ใช้เวลาทำ 20 นาที
คำชี้แจง
1. ให้นักเรียนตอบคำถามต่อไปนี้
1.1 จงบอกประโยชน์ของการสร้างรายการแบบซ้อนกัน
.............................................................................................................................................................
.............................................................................................................................................................
.............................................................................................................................................................
.............................................................................................................................................................
.............................................................................................................................................................
1.2 จงสร้างรายการแบบซ้อนกัน
.............................................................................................................................................................
.............................................................................................................................................................
.............................................................................................................................................................
.............................................................................................................................................................
.............................................................................................................................................................
2. เมื่อนักเรียนปฏิบัติเสร็จเรียบร้อยแล้วส่งผลการปฏิบัติงานที่ครูหน้าชั้นเรียน
แนวตอบ หรือแนวปฏิบัติ
เกณฑ์ |
รายละเอียดเกณฑ์การให้คะแนน |
|||||
5 (ดีมาก) |
4 (ดี) |
3 (ปานกลาง) |
2 (พอใช้) |
1 (ปรับปรุง) |
0 (ไม่ผ่าน) |
|
บอกประโยชน์ของการสร้างรายการแบบซ้อนกัน |
เขียนได้ถูกต้องครบทุกประเด็น ตามลำดับ |
เขียนได้ถูกต้องครบ 4 ประเด็น
|
เขียนได้ถูกต้องอย่างน้อย 3 ประเด็น |
เขียนได้ถูกต้องอย่างน้อย 2 ประเด็น |
เขียนได้ถูกต้องอย่างน้อย 1 ประเด็น |
เขียนไม่ตรงประเด็น |
สร้างรายการซ้อนกัน |
เขียนแท็รายการซ้อนกันได้ถูกต้องครบตามลำดับ |
เขียนแท็กรายการซ้อนกันได้ตรงถูกต้องครบ |
เขียนแท็กรายการซ้อนกันได้ถูกต้องอย่างน้อย 3 แท็ก |
เขียนแท็กรายการซ้อนกันได้ถูกต้องอย่างน้อย 2 แท็ก |
เขียนแท็กรายการซ้อนกันได้ถูกต้องอย่างน้อย 1 แท็ก |
เขียนแท็กรายการซ้อนกันไม่ถูกต้อง |
การออกแบบทดสอบ
ผลการเรียนรู้
มีความรู้ความเข้าใจและสามารถสร้างรายการด้วยภาษา HTML ได้
จุดประสงค์การเรียนรู้
ด้านความรู้
1. อธิบายและสร้างรายการแบบไม่มีลำดับและมีลำดับในเอกสารภาษา HTMLได้
2. อธิบายและสร้างรายการแบบเมนูและไดเรกทอรีในเอกสารภาษา HTMLได้
3. อธิบายและสร้างรายการแบบจำกัดความในเอกสารภาษา HTMLได้
4. อธิบายและสร้างรายการแบบซ้อนกันในเอกสารภาษา HTMLได้
ด้านทักษะ/กระบวนการ
1. สร้างรายการแบบไม่มีลำดับและมีลำดับในเอกสารภาษา HTMLได้
2. สร้างรายการแบบเมนูและไดเรกทอรีในเอกสารภาษา HTMLได้
3. สร้างรายการแบบจำกัดความในเอกสารภาษา HTMLได้
4. สร้างรายการแบบซ้อนกันในเอกสารภาษา HTMLได้
ด้านคุณลักษณะ
1. มีวินัย
2. ใฝ่เรียนรู้
3. มุ่งมั่นในการทำงาน
แบบทดสอบ
1. แบบทดสอบก่อนเรียน มีทั้งหมด 2 ตอน จำนวน 12 ข้อ (16 คะแนน)
ตอนที่ 1 เป็นแบบทดสอบภาคทฤษฎีวัดพฤติกรรมด้านพุทธิพิสัย จำนวน 10 ข้อ (10 คะแนน) ใช้เวลา 10 นาที
ตอนที่ 2 เป็นแบบทดสอบภาคปฏิบัติวัดพฤติกรรมทักษะพิสัย จำนวน 2 ข้อ (ข้อละ 3 คะแนน) ใช้เวลา 10 นาที
2. แบบทดสอบหลังเรียน มีทั้งหมด 2 ตอน จำนวน 12 ข้อ (16 คะแนน)
ตอนที่ 1 เป็นแบบทดสอบภาคทฤษฎีวัดพฤติกรรมด้านพุทธิพิสัย จำนวน 10 ข้อ (10 คะแนน) ใช้เวลา 10 นาที
ตอนที่ 2 เป็นแบบทดสอบภาคปฏิบัติวัดพฤติกรรมทักษะพิสัย จำนวน 2 ข้อ (ข้อละ 3 คะแนน) ใช้เวลา 10 นาที