แผนประจำหน่วยการเรียนรู้ที่ 3

 

เรื่อง การสร้างรายการด้วยภาษา HTML                                เวลาเรียนจำนวน 4 ชั่วโมง


arrow1หัวเรื่อง/สาระ

1. การสร้างรายการแบบไม่มีลำดับและมีลำดับในเอกสารภาษา HTML

2. การสร้างรายการแบบเมนูและไดเรกทอรีในเอกสารภาษา HTML

3. การสร้างรายการแบบจำกัดความในเอกสารภาษา HTML

4. การสร้างรายการซ้อนกันในเอกสารภาษา HTML

 

arrow1แนวคิด หรือสาระสำคัญ

            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. การสร้างรายการซ้อนกันช่วยในเรื่องการนำเสนอข้อมูล อาจใช้รายการในรูปแบบอื่นมาผสมกันได้ รายการแบบไม่มีลำดับและมีลำดับ รายการแบบเมนู รายการแบบไดเรกทรอรี รายการแบบจำกัดความโดยมีหัวข้อย่อยมีขั้นตอนเป็นจำนวนมาก มาเรียงลำดับซ้อนกันหลายรูปแบบ

 

arrow1จุดประสงค์การเรียนรู้

หลังจากศึกษาเนื้อหาในหน่วยการเรียนรู้นี้แล้วนักเรียนมีความสามารถ ดังนี้

1. อธิบายและสร้างรายการแบบไม่มีลำดับและมีลำดับในเอกสารภาษา HTMLได้

2. อธิบายและสร้างรายการแบบเมนูและไดเรกทอรีในเอกสารภาษา HTMLได้

3. อธิบายและสร้างรายการแบบจำกัดความในเอกสารภาษา HTMLได้

4. อธิบายและสร้างรายการแบบซ้อนกันในเอกสารภาษา HTMLได้

 

arrow1หัวเรื่องที่ 3.1 

การสร้างรายการแบบไม่มีลำดับและมีลำดับในเอกสารภาษา HTML      เวลาเรียน 1 ชั่วโมง


             รายการแบบไม่มีลำดับ (Unordered List) และรายการแบบมีลำดับ เป็นรายการเบื้องต้นที่เหมาะสำหรับการนำเสนอข้อมูลที่เป็นหัวข้อประเด็นสั้น  ๆ  การประยุกต์ใชเป็นแหล่งเชื่อมโยงไปยังข้อมูลต่อไป หรือประยุกต์ใช้เป็นเมนู จำเป็นต้องมีแท็กสำหรับแสดงข้อมูลรายการ  (List Item)  คือ  แท็ก  <li>  โดยจะต้องอยู่ภายใต้แท็กกำหนดรายการแบบไม่มีลำดับ  คือ  แท็ก  <ul>  ทั้งสองแท็กที่กล่าวมาเป็นแท็กคู่ประกอบไปด้วยแท็กเปิด (open tag)  และแท็กปิด  (close tag) สามารถกำหนดรูปแบบสัญลักษณ์ของรายการแบบไม่มีลำดับ เช่น แบบวงกลมทึบ วงกลมโปร่ง และสี่เหลี่ยมทึบ และมีลำดับ เช่น  เป็นตัวอักษรพิมพ์เล็ก พิมพ์ใหญ่ แบบตัวเลขโรมันพิมพ์เล็ก แบบตัวเลขโรมันพิมพ์ใหญ่ 

รายละเอียดของเนื้อหามีดังนี้

1. การสร้างรายการแบบไม่มีลำดับในเอกสารภาษา HTML

2. การสร้างรายการแบบมีลำดับในเอกสารภาษา HTML

arrow1 สรุปเนื้อหา

            รายการแบบไม่มีลำดับ  (Unordered List)  เป็นการกำหนดรายการแบบใช้สัญลักษณ์ ประกอบด้วยแท็กที่สำคัญ 2 แท็ก คือ แท็ก  <li>  และแท็ก <ul> โดยจะต้องอยู่ภายใต้แท็กกำหนดรายการแบบไม่มีลำดับ  คือ  แท็ก  <ul>  เป็นแท็กคู่ มีแท็กเปิด (open tag)  และแท็กปิด  (close tag) และรายการแบบมีลำดับ (Ordered List)  นำเสนอข้อมูลแบบมีลำดับแท็กที่สำคัญแท็ก <ol>​​​​​  และ  ​​​​​​​​<li>  ใช้การกำหนดรายการ

 

arrow1กิจกรรม/ใบงานที่ 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. เมื่อนักเรียนปฏิบัติเสร็จเรียบร้อยแล้ว ส่งผลการปฏิบัติงานที่ครูหน้าชั้นเรียน

arrow1แนวตอบ หรือแนวปฏิบัติ 

คะแนน/คุณภาพ

เกณฑ์การประเมินผล

5 : ดีมาก

ทำกิจกรรมถูกต้อง 9-10 ข้อ

4 : ดี

ทำกิจกรรมถูกต้อง 7-8   ข้อ

3 : ปานกลาง

ทำกิจกรรมถูกต้อง 5-6   ข้อ

2 : พอใช้

ทำกิจกรรมถูกต้อง 3-4   ข้อ

1 : ปรับปรุง

ทำกิจกรรมถูกต้อง 1-2   ข้อ

0 : ไม่ผ่าน

ทำกิจกรรมถูกต้อง 0      ข้อ

arrow1หัวเรื่องที่ 3.2

การสร้างรายการแบบเมนูและไดเรกทรอรีในเอกสารภาษา HTML       เวลาเรียน 1 ชั่วโมง 


             รายการแบบเมนู  (Menu List) และรายการแบบไดเรกทอรี  (Directory List)  เป็นรายการที่ไม่ต้องการลำดับข้อมูลและทั้งสองจะมีการกำหนดและการแสดงผลรายการเหมือนกับรายการแบบไม่มีลำดับ (Unordered List)  

             รายละเอียดของเนื้อหามีดังนี้

1. การสร้างรายการแบบเมนูในเอกสาร HTML

2. การสร้างรายการแบบไดเรกทรอรีในเอกสาร HTML

arrow1 สรุปเนื้อหา

             รายการแบบเมนู  (Menu List)  และรายการแบบไดเรกทอรี  (Directory List)  รูปแบบสัญลักษณ์เหมือนกับการกำหนดรายการแบบไม่มีลำดับ  (Unordered List) โดยจะแสดงผลเป็นลักษณะวงกลมทึบที่เป็นค่าเริ่มต้นของรายการแบบไม่มีลำดับ

  

arrow1กิจกรรม/ใบงานที่ 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.  เมื่อนักเรียนปฏิบัติเสร็จเรียบร้อยแล้ว ส่งผลการปฏิบัติงานที่ครูหน้าชั้นเรียน

arrow1แนวตอบ หรือแนวปฏิบัติ 

คะแนน/คุณภาพ

เกณฑ์การประเมินผล

5 : ดีมาก

ทำกิจกรรมถูกต้อง 9-10 ข้อ

4 : ดี

ทำกิจกรรมถูกต้อง 7-8   ข้อ

3 : ปานกลาง

ทำกิจกรรมถูกต้อง 5-6   ข้อ

2 : พอใช้

ทำกิจกรรมถูกต้อง 3-4   ข้อ

1 : ปรับปรุง

ทำกิจกรรมถูกต้อง 1-2   ข้อ

0 : ไม่ผ่าน

ทำกิจกรรมถูกต้อง 0      ข้อ

 

arrow1หัวเรื่องที่ 3.3

การสร้างรายการแบบจำกัดความในเอกสารภาษา HTML                    เวลาเรียน 1 ชั่วโมง


            รายการแบบจำกัดความ  ​​​​​​​​​​(Definition ​​​​​​​​​​​List)  ​​​​​​​​เป็นรายการที่สามารถประยุกต์ใช้กับการกำหนดรูปแบบในบรรณานุกรมและพจนานุกรมที่มีการจัดลำดับข้อมูลมีการเยื้องของข้อมูลชัดเจนคงที่ 

             รายละเอียดของเนื้อหามีดังนี้

การสร้างรายการแบบจำกัดความในเอกสารภาษา HTML

 arrow1 สรุปเนื้อหา

             รายการแบบจำกัดความ  ​​​​​​​​​​(Definition ​​​​​​​​​​​List)  ​​​​​​​​สามารถนำมาประยุกต์ใช้กับการกำหนดรูปแบบในบรรณานุกรม  และพจนานุกรมที่มีการจัดลำดับข้อมูลมีการเยื้องของข้อมูลชัดเจนคงที่  โดยใช้แท็ก <dl>...</dl> และแท็ก <dd> เป็นแท็กที่เปรียบเสมือนแท็บเพื่อการกำหนดให้ข้อความเยื้องไปทางขวาของจอภาพ

 

arrow1กิจกรรม/ใบงานที่ 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. เมื่อนักเรียนปฏิบัติเสร็จเรียบร้อยแล้วส่งผลการปฏิบัติงานที่ครูหน้าชั้นเรียน

arrow1แนวตอบ หรือแนวปฏิบัติ 

คะแนน/คุณภาพ

เกณฑ์การประเมินผล

5 : ดีมาก

ทำกิจกรรมถูกต้อง 9-10 ข้อ

4 : ดี

ทำกิจกรรมถูกต้อง 7-8   ข้อ

3 : ปานกลาง

ทำกิจกรรมถูกต้อง 5-6   ข้อ

2 : พอใช้

ทำกิจกรรมถูกต้อง 3-4   ข้อ

1 : ปรับปรุง

ทำกิจกรรมถูกต้อง 1-2   ข้อ

0 : ไม่ผ่าน

ทำกิจกรรมถูกต้อง 0      ข้อ

 

arrow1หัวเรื่องที่ 3.4

การสร้างรายการแบบซ้อนกันในเอกสารภาษา HTML                          เวลาเรียน 1 ชั่วโมง


                การสร้างรายการซ้อนกันเป็นการกำหนดเนื้อหาเป็นรายการต่างๆ ที่ได้ศึกษามาก่อนหน้า การสร้างรายการแบบไม่มีลำดับและมีลำดับ การสร้างรายการแบบเมนู การสร้างรายการแบบไดเรกทรอรี การสร้างรายการแบบจำกัดความ สามารถใช้ประโยชน์จากการสร้างรายการซ้อนกันนำเสนอข้อมูลมีหัวข้อย่อยมีขั้นตอนเป็นจำนวนมาก

             รายละเอียดของเนื้อหามีดังนี้

การสร้างรายการแบบซ้อนกันในเอกสารภาษา HTML

arrow1 สรุปเนื้อหา

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

 

arrow1กิจกรรม/ใบงานที่ 3.4 การสร้างรายการแบบซ้อนกันในเอกสารภาษา HTML (คะแนนเต็ม 10 คะแนน) ใช้เวลาทำ 20 นาที

คำชี้แจง

1. ให้นักเรียนตอบคำถามต่อไปนี้

1.1 จงบอกประโยชน์ของการสร้างรายการแบบซ้อนกัน 

.............................................................................................................................................................

.............................................................................................................................................................

.............................................................................................................................................................

.............................................................................................................................................................

.............................................................................................................................................................

1.2  จงสร้างรายการแบบซ้อนกัน 

.............................................................................................................................................................

.............................................................................................................................................................

.............................................................................................................................................................

.............................................................................................................................................................

.............................................................................................................................................................

              2. เมื่อนักเรียนปฏิบัติเสร็จเรียบร้อยแล้วส่งผลการปฏิบัติงานที่ครูหน้าชั้นเรียน

arrow1แนวตอบ หรือแนวปฏิบัติ

เกณฑ์
การประเมิน

รายละเอียดเกณฑ์การให้คะแนน

5

(ดีมาก)

4

(ดี)

3

(ปานกลาง)

2

(พอใช้)

1

(ปรับปรุง)

0

(ไม่ผ่าน)

บอกประโยชน์ของการสร้างรายการแบบซ้อนกัน

เขียนได้ถูกต้องครบทุกประเด็น ตามลำดับ

เขียนได้ถูกต้องครบ 4 ประเด็น

เขียนได้ถูกต้องอย่างน้อย 3 ประเด็น

เขียนได้ถูกต้องอย่างน้อย 2 ประเด็น

เขียนได้ถูกต้องอย่างน้อย 1 ประเด็น

เขียนไม่ตรงประเด็น

สร้างรายการซ้อนกัน

เขียนแท็รายการซ้อนกันได้ถูกต้องครบตามลำดับ

เขียนแท็กรายการซ้อนกันได้ตรงถูกต้องครบ

เขียนแท็กรายการซ้อนกันได้ถูกต้องอย่างน้อย 3 แท็ก

เขียนแท็กรายการซ้อนกันได้ถูกต้องอย่างน้อย 2 แท็ก

เขียนแท็กรายการซ้อนกันได้ถูกต้องอย่างน้อย 1 แท็ก

เขียนแท็กรายการซ้อนกันไม่ถูกต้อง

arrow1การออกแบบทดสอบ

ผลการเรียนรู้

มีความรู้ความเข้าใจและสามารถสร้างรายการด้วยภาษา 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 นาที

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

 

             การสร้างรายการนั้นข้อมูลสำหรับการสร้างรายการต้องไม่ยาวจนเกินไปใช้กำหนดข้อมูลที่เป็นประเด็นสำคัญ  โดยการสร้างรายการเบื้องต้นประกอบไปด้วย  3  แบบ  คือ  การสร้างรายการแบบไม่มีลำดับ  การสร้างรายการแบบมีลำดับ การสร้างรายการแบบเมนู

             การนำรายการมาประยุกต์ใช้เพื่อการตกแต่งเว็บไซต์นั้น  สามารถรายการมาใช้ในการกำหนดข้อมูลที่เป็นประเด็นสำคัญทำให้เว็บไซต์เกิดความสวยงาม และเป็นระเบียบมากยิ่งขึ้น โดยเว็บสวยด้วยการประยุกต์ใช้รายการ  ประกอบไปด้วยการสร้างรายการ  3  แบบ  คือ  การสร้างรายการแบบไดเร็กทอรี  การสร้างรายการแบบจำกัดความ  การสร้างรายการซ้อนกัน