แผนประจำหน่วยการเรียนรู้ที่ 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.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 นาที