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

 

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


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

1. การสร้างตารางเบื้องต้นในภาษา HTML

2. การกำหนดคุณลักษณะและการแบ่งส่วนตารางภาษา HTML

3. การจัดการเซลล์ในตารางภาษา HTML

4. การกำหนดขนาดของตารางและสดมภ์ภาษา HTML

5. การกำหนดรูปแบบและตำแหน่งในตารางภาษา HTML

6. การจัดการรูปภาพในตารางภาษา HTML 

 

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

             1. การกำหนดตารางใช้แท็ก <table>​ ประกอบด้วยแท็ก <tr>​​​​​​​​​​​​​​​ การกำหนดแถวของตารางแท็ก <td> กำหนดสดมภ์ให้กับตารางต้องกำหนดระหว่างแท็ก  <tr>  เป็นแท็กคู่ประกอบไปด้วยแท็กเปิด  (open tag)  และแท็กปิด  (close tag)  สามารถกำหนดได้มากกว่า  1  แถว  และมากกว่า  1  สดมภ์ 

             2. การกำหนดหัวของตารางสามารถทำได้โดยใช้แท็ก​​ <th> การกำหนดข้อความกำกับให้กับตาราง​​​​​​​​​​​​​​​ <caption>​​​​​​​​​​​​​ การแบ่งส่วนของตารางออกเป็น 3 ส่วน  คือ  <thead> ส่วนหัวของตาราง <tbody> ส่วนข้อมูลตาราง และ <tfoot>  ส่วนของสรุปรวมข้อมูลในตารางสามารถเรียงสลับก่อนหลังสามารถแสดงผลตามลำดับ   

             3. การกำหนดให้ความห่างของช่องเซลล์ (cellspacing) เป็น 0 ตารางจะมีลักษณะชิดติดกันทำให้การจัดวางรูปภาพและข้อความมีความต่อเนื่องไม่ห่างช่วยให้ข้อความและรูปภาพมีลักษณะคงที่ปรับย่อขยายตามหน้าเว็บเพจ การรวมเซลล์มีการกำหนดแอตทริบิวต์คือ การผสานแถวใช้แอตทริบิวต์  rowspan และการผสานสดมภ์ใช้แอตทริบิวต์  colspan การใส่สีให้กับเซลล์ใช้แอตทริบิวต์  bgcolor  อยู่ภายใต้แท็กต่าง  ๆ  คือ  <table>,  <th>,  <tr>,  <td>

             4. การกำหนดความกว้างของตารางเป็นคำสั่งย่อยภายในการกำหนดคุณลักษณะของตารางใช้แอตทริบิวต์  widht  และการกำหนดคุณลักษณะความสูง  ให้กับตารางใชแอตทริบิวต์  height การกำหนดความกว้างของสดมภ์ทั้งหมดในตารางใช้แท็ก​​​​​​​​​​​ <colgroup> ใช้แอตทริบิวต์  span  กำหนดจำนวนสดมภ์ที่ต้องการกำหนดความกว้าง  width  มีหน่วยเป็นเปอร์เซ็นต์และพิกเซล

             5. การกำหนดสีให้กับกรอบตารางเป็นการเพิ่มความเด่นให้กับตารางมากยิ่งขึ้นใช้แอตทริบิวต์  bordercolor การกำหนดรูปแบบเส้นใช้แอตทริบิวต์  frame  และ  rules  กำหนดระหว่างแท็ก <table> การจัดตำแหน่งข้อมูลในตารางเป็นการกำหนดให้ข้อมูลที่เป็นตัวเลขจัดให้อยู่ตำแหน่งกึ่งกลางของเซลล์​​​​​และข้อความให้จัดตำแหน่งชิดซ้าย  ​​​​​เพื่อการจัดระเบียบข้อมูลและการนำเสนอข้อมูลที่น่าสนใจเข้าใจง่ายค่าที่สามารถกำหนดจัดข้อมูลในแนวนอนใช้แอตทริบิวต์  align  คือ  center, left, right  และ justify ค่าที่สามารถกำหนดการจัดข้อมูลในแนวตั้งใช้แอตทริบิวต์ valign คือ baseline, bottom, middle, top

             6. การใส่รูปภาพให้กับพื้นหลังของตารางใช้แอตทริบิวต์  background  ไม่นิยมใช้กับรูปภาพที่มีความละเอียดน้อยจะทำให้ภาพแตกได้ รูปภาพมาแทรกในเซลล์ตารางใช้แท็ก  <img>​​​​​​​​​ ใช้คู่กับแอตทริบิวต์ในการกำหนดไฟล์รูปภาพ  src  แท็ก <img src= “ไฟล์รูปภาพ”>  กำหนดระหว่างแท็ก  <td>...</td>

 

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

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

1. อธิบายและสร้างตารางเบื้องต้นในภาษา HTML ได้

2. อธิบายและกำหนดคุณลักษณะและแบ่งส่วนตารางภาษา HTML ได้

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

4. อธิบายและกำหนดขนาดของตารางและสดมภ์ภาษา HTML ได้

5. อธิบายและกำหนดรูปแบบและตำแหน่งในตารางภาษา HTML ได้

6. อธิบายและจัดการรูปภาพในตารางภาษา HTML ได้

 

 

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

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


             การกำหนดตารางเริ่มต้นด้วยการใช้แท็ก​​​​​  <table> ​​​​​​​​​​​​​​​​ แท็ก <tr>​​​​​​​​​​​​​​​  การกำหนดแถว แท็ก <td>  ในการกำหนดสดมภ์ แท็กสำหรับสร้างตารางเป็นแท็กคู่ประกอบไปด้วยแท็กเปิด  (open tag)  และแท็กปิด  (close tag)  

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

การกำหนดตารางเบื้องต้นในภาษา HTML

 

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

            การกำหนดตารางใช้แท็ก <table>​ ประกอบด้วยแท็ก <tr>​​​​​​​​​​​​​​​ การกำหนดแถวของตารางแท็ก <td> กำหนดสดมภ์ให้กับตารางต้องกำหนดระหว่างแท็ก  <tr>  เป็นแท็กคู่ประกอบไปด้วยแท็กเปิด  (open tag)  และแท็กปิด  (close tag)  สามารถกำหนดได้มากกว่า  1  แถว  และมากกว่า  1  สดมภ์ 

 

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

 คำชี้แจง

             1.  ให้นักเรียนสร้างตารางโดยกำหนดให้มีจำนวนแถว  6  แถว  7  สดมภ์  ภายในตารางแสดงข้อมูลพรรณไม้  5  รายการ โดยไม่ซ้ำกัน

             2. เมื่อนักเรียนปฏิบัติขั้นตอนดังกล่าวเรียบร้อยแล้วให้บันทึกชิ้นงานลงในไดร์ฟ D: โฟลเดอร์ห้องเรียนพร้อมบันทึกชื่อไฟล์ชื่อ เลขที่_work401.html เสร็จแล้วส่งให้ครูประเมินเป็นรายบุคคล

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

 work401

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

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

3

(ดี)

2

(พอใช้)

1

(ปรับปรุง)

0

(ไม่ผ่าน)

ปฏิบัติตามขั้นตอนถูกต้อง

ปฏิบัติได้ครบทุกขั้นตอนการสร้างตารางเบื้องต้น

ปฏิบัติได้ตามขั้นตอนการสร้างตารางเบื้องต้น

ปฏิบัติได้ไม่ครบขั้นตอนการสร้างตารางเบื้องต้น

ปฏิบัติไม่ได้ตามขั้นตอน

ชิ้นงานถูกต้องสมบูรณ์ตามหลักการ

ชิ้นงานจัดทำเสร็จถูกต้องสมบูรณ์ตาม

หลักการเขียนภาษา HTML ทั้งหมด

ชิ้นงานจัดทำเสร็จถูกต้องตามหลักการเขียนภาษา HTML บางส่วน

ชิ้นงานจัดทำเสร็จแต่ไม่ถูกต้องตามหลักการเขียนภาษา HTML

ไม่สร้างชิ้นงาน

บันทึกชิ้นงาน

บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานได้ถูกต้อง รวดเร็วตามคำสั่ง

บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานได้ถูกต้อง ตามคำสั่ง

บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานไม่ถูกต้อง

ไม่สามารถบันทึกชิ้นงานได้

เสร็จงาน
ตรงเวลาที่กำหนด

งานที่ปฏิบัติเสร็จทันเวลา

งานที่ปฏิบัติเสร็จทันเวลาบางส่วน

งานที่ปฏิบัติเสร็จไม่ทันเวลา

ไม่มีงาน

มีความคิดริเริ่มสร้างสรรค์สวยงาม

ชิ้นงานแปลกใหม่สร้างสรรค์สวยงาม

ชิ้นงานแปลกใหม่สวยงาม

ชิ้นงานสวยงาม

ไม่มีงาน

 

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

การกำหนดคุณลักษณะและการแบ่งส่วนตารางภาษา HTML             


             การกำหนดคุณลักษณะและการแบ่งส่วนตารางในภาษา HTML ได้แก่ การกำหนดหัวของตารางกำหนดด้วยแท็ก <th> และกำหนดขนาดเส้นของตารางใช้ แอตทริบิวต์ border และการกำหนดข้อความกำกับตารางแท็ก <caption> การแบ่งส่วนของตารางในภาษา HTML แบ่งเป็น 3 ส่วน คือ <thead> กำหนดส่วนหัวตาราง <tbody> กำหนดส่วนเนื้อหา <tfoot> กำหนดส่วนท้ายตาราง

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

1. การกำหนดคุณลักษณะของตารางในภาษา HTML

1.1 การกำหนดหัวของตาราง

1.2 การกำหนดข้อความกำกับตาราง

2. การแบ่งส่วนตารางในภาษา HTML

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

             การกำหนดหัวของตารางสามารถทำได้โดยใช้แท็ก​​ <th> การกำหนดข้อความกำกับให้กับตาราง​​​​​​​​​​​​​​​ <caption>​​​​​​​​​​​​​ การแบ่งส่วนของตารางออกเป็น 3 ส่วน  คือ  <thead> ส่วนหัวของตาราง <tbody> ส่วนข้อมูลตาราง และ <tfoot>  ส่วนของสรุปรวมข้อมูลในตารางสามารถเรียงสลับก่อนหลังสามารถแสดงผลตามลำดับ

arrow1กิจกรรม/ใบงานที่ 4.2 การกำหนดคุณลักษณะและการแบ่งส่วนตารางภาษา HTML (คะแนนเต็ม 15 คะแนน) ใช้เวลาทำ 20 นาที

คำชี้แจง

             1. ให้นักเรียนเปิดไฟล์ work401.html ขึ้นมาสร้างตารางโดยกำหนดข้อความกำกับตาราง คำว่า "ทะเบียนพรรณไม้ โรงเรียนหล่มเก่าพิทยาคม จังหวัดเพชรบูรณ์ เลขที่สมาชิก 7-67120-001" และกำหนดหัวตาราง รหัสพรรณไม้ ชื่อพื้นเมือง ชื่อวิทยาศาสตร์ ชื่อวงศ์ลักษณะวิสัย ลักษณะเด่นของพืช บริเวณที่พบ กำหนดความหนาของเส้นเท่ากับ 2 แบ่งส่วนตารางเป็น 3 ส่วน ได้แก่ ส่วนหัวตารางกำหนดสีฟ้า ส่วนเนื้อหากำหนดสีเหลือง ส่วนสรุปรวมข้อมูลกำหนดสีแดง

             2. เมื่อนักเรียนปฏิบัติขั้นตอนดังกล่าวเรียบร้อยแล้วให้บันทึกชิ้นงานลงในไดร์ฟ D: โฟลเดอร์ห้องเรียนพร้อมบันทึกชื่อไฟล์ชื่อ เลขที่_work402.html เสร็จแล้วส่งให้ครูประเมินเป็นรายบุคคล

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

 work402

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

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

3

(ดี)

2

(พอใช้)

1

(ปรับปรุง)

0

(ไม่ผ่าน)

ปฏิบัติตามขั้นตอนถูกต้อง

ปฏิบัติได้ครบทุกขั้นตอนการกำหนดหัวของตารางและเส้นของตาราง การกำหนดข้อความกำกับตาราง  การแบ่งส่วนตาราง

ปฏิบัติได้ตามขั้นตอนการกำหนดหัวของตารางและเส้นของตาราง การกำหนดข้อความกำกับตาราง  การแบ่งส่วนตาราง

ปฏิบัติได้ไม่ครบขั้นตอนการกำหนดหัวของตารางและเส้นของตาราง การกำหนดข้อความกำกับตาราง  การแบ่งส่วนตาราง

ปฏิบัติไม่ได้ตามขั้นตอน

ชิ้นงานถูกต้องสมบูรณ์ตามหลักการ

ชิ้นงานจัดทำเสร็จถูกต้องสมบูรณ์ตาม

หลักการเขียนภาษา HTML ทั้งหมด

ชิ้นงานจัดทำเสร็จถูกต้องตามหลักการเขียนภาษา HTML บางส่วน

ชิ้นงานจัดทำเสร็จแต่ไม่ถูกต้องตามหลักการเขียนภาษา HTML

ไม่สร้างชิ้นงาน

บันทึกชิ้นงาน

บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานได้ถูกต้อง รวดเร็วตามคำสั่ง

บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานได้ถูกต้อง ตามคำสั่ง

บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานไม่ถูกต้อง

ไม่สามารถบันทึกชิ้นงานได้

เสร็จงาน
ตรงเวลาที่กำหนด

งานที่ปฏิบัติเสร็จทันเวลา

งานที่ปฏิบัติเสร็จทันเวลาบางส่วน

งานที่ปฏิบัติเสร็จไม่ทันเวลา

ไม่มีงาน

มีความคิดริเริ่มสร้างสรรค์สวยงาม

ชิ้นงานแปลกใหม่สร้างสรรค์สวยงาม

ชิ้นงานแปลกใหม่สวยงาม

ชิ้นงานสวยงาม

ไม่มีงาน

 

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

การจัดการเซลล์ในตารางภาษา HTML                                                 เวลาเรียน 1 ชั่วโมง


            การจัดการเซลล์ในภาษา HTML ได้แก่ การกำหนความหนาของเส้นตารางและความห่างของช่องเซลล์ การกำหนดช่องว่างข้อมูลในเซลล์กับกรอบเซลล์ การผสานเซลล์ การกำหนดสีให้กับเซลล์

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

1. การกำหนดความหนาของเส้นและความห่างของเซลล์ในภาษา HTML

2. การเว้นช่องว่างข้อมูลเซลล์ในภาษา HTML

3. การผสานเซลล์ในภาษา HTML   

4. การกำหนดสีให้กับเซลล์ในภาษา HTML

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

             การกำหนดให้ความห่างของช่องเซลล์ (cellspacing) เป็น 0 ตารางจะมีลักษณะชิดติดกันทำให้การจัดวางรูปภาพและข้อความมีความต่อเนื่องไม่ห่างช่วยให้ข้อความและรูปภาพมีลักษณะคงที่ปรับย่อขยายตามหน้าเว็บเพจ การรวมเซลล์มีการกำหนดแอตทริบิวต์คือ การผสานแถวใช้แอตทริบิวต์  rowspan และการผสานสดมภ์ใช้แอตทริบิวต์  colspan การใส่สีให้กับเซลล์ใช้แอตทริบิวต์  bgcolor  อยู่ภายใต้แท็กต่าง  ๆ  คือ  <table>,  <th>,  <tr>,  <td> 

 

arrow1กิจกรรม/ใบงานที่ 4.3 การจัดการเซลล์ในตารางภาษา HTML (คะแนนเต็ม 15 คะแนน) ใช้เวลาทำ 20 นาที

 คำชี้แจง

             1. ให้นักเรียนสร้างตารางให้มีจำนวน 1 สดมภ์ 5 แถว จากนั้นนำเนื้อหาข้อมูลจากไฟล์ work202.html โดยกำหนดสีในช่องเซลล์เป็นสีแดงอ่อน กำหนดให้ผสานเซลล์ แถวที่ 3-4 เข้าด้วยกัน และแสดงชื่อ-นามสกุล ชั้น ห้อง เลขที่ ในแถวที่ 5 และกำหนดขนาดความหนาของเส้นเท่ากับ 5 กำหนดให้ช่องว่างเซลล์และระยะห่างเซลล์มีค่าเท่ากับ 0

             2. เมื่อนักเรียนปฏิบัติขั้นตอนดังกล่าวเรียบร้อยแล้วให้บันทึกชิ้นงานลงในไดร์ฟ D: โฟลเดอร์ห้องเรียนพร้อมบันทึกชื่อไฟล์ชื่อ เลขที่_work403.html เสร็จแล้วส่งให้ครูประเมินเป็นรายบุคคล

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

 work403

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

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

3

(ดี)

2

(พอใช้)

1

(ปรับปรุง)

0

(ไม่ผ่าน)

ปฏิบัติตามขั้นตอนถูกต้อง

ปฏิบัติได้ครบทุกขั้นตอนการกำหนดความหนาของเส้นและความห่างของเซลล์ การเว้นช่องว่างข้อมูลในเซลล์ การผสานเซลล์ การกำหนดสีให้เซลล์

ปฏิบัติได้ตามขั้นตอนการกำหนดความหนาของเส้นและความห่างของเซลล์ การเว้นช่องว่างข้อมูลในเซลล์ การผสานเซลล์ การกำหนดสีให้เซลล์

ปฏิบัติได้ไม่ครบขั้นตอนการกำหนดความหนาของเส้นและความห่างของเซลล์ การเว้นช่องว่างข้อมูลในเซลล์ การผสานเซลล์ การกำหนดสีให้เซลล์

ปฏิบัติไม่ได้ตามขั้นตอน

ชิ้นงานถูกต้องสมบูรณ์ตามหลักการ

ชิ้นงานจัดทำเสร็จถูกต้องสมบูรณ์ตาม

หลักการเขียนภาษา HTML ทั้งหมด

ชิ้นงานจัดทำเสร็จถูกต้องตามหลักการเขียนภาษา HTML บางส่วน

ชิ้นงานจัดทำเสร็จแต่ไม่ถูกต้องตามหลักการเขียนภาษา HTML

ไม่สร้างชิ้นงาน

บันทึกชิ้นงาน

บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานได้ถูกต้อง รวดเร็วตามคำสั่ง

บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานได้ถูกต้อง ตามคำสั่ง

บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานไม่ถูกต้อง

ไม่สามารถบันทึกชิ้นงานได้

เสร็จงาน
ตรงเวลาที่กำหนด

งานที่ปฏิบัติเสร็จทันเวลา

งานที่ปฏิบัติเสร็จทันเวลาบางส่วน

งานที่ปฏิบัติเสร็จไม่ทันเวลา

ไม่มีงาน

มีความคิดริเริ่มสร้างสรรค์สวยงาม

ชิ้นงานแปลกใหม่สร้างสรรค์สวยงาม

ชิ้นงานแปลกใหม่สวยงาม

ชิ้นงานสวยงาม

ไม่มีงาน

 

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

การกำหนดขนาดตารางและสดมภ์ภาษา HTML                                    เวลาเรียน 1 ชั่วโมง


                การกำหนดความขนาดของตารางและสดมภ์ในภาษา HTML ได้แก่ การกำหนดความกว้างและความสูงของตาราง การกำหนดความกว้างของสดมภ์ทั้งหมดในตาราง

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

1. การกำหนดขนาดตารางในภาษา HTML

2. การกำหนดความกว้างของสดมภ์ในภาษา HTML

 

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

             การกำหนดความกว้างของตารางเป็นคำสั่งย่อยภายในการกำหนดคุณลักษณะของตารางใช้แอตทริบิวต์  widht  และการกำหนดคุณลักษณะความสูง  ให้กับตารางใชแอตทริบิวต์  height การกำหนดความกว้างของสดมภ์ทั้งหมดในตารางใช้แท็ก​​​​​​​​​​​ <colgroup> ใช้แอตทริบิวต์  span  กำหนดจำนวนสดมภ์ที่ต้องการกำหนดความกว้าง  width  มีหน่วยเป็นเปอร์เซ็นต์และพิกเซล

 

arrow1กิจกรรม/ใบงานที่ 4.4 การกำหนดขนาดตารางและสดมภ์ภาษา HTML (คะแนนเต็ม 15 คะแนน) ใช้เวลาทำ 20 นาที

คำชี้แจง

              1. ให้นักเรียนเป็นไฟล์ work403.html โดยกำหนดขนาดของตารางให้มีความกว้างเท่ากับ 80% ของจอภาพ ความสูงของตารางให้มีขนาด 500 พิกเซล และมีความกว้างของสดมภ์ ขนาด 300 พิกเซล

              2. เมื่อนักเรียนปฏิบัติขั้นตอนดังกล่าวเรียบร้อยแล้วให้บันทึกชิ้นงานลงในไดร์ฟ D: โฟลเดอร์ห้องเรียนพร้อมบันทึกชื่อไฟล์ชื่อ เลขที่_work404.html เสร็จแล้วส่งให้ครูประเมินเป็นรายบุคคล

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

 work404

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

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

3

(ดี)

2

(พอใช้)

1

(ปรับปรุง)

0

(ไม่ผ่าน)

ปฏิบัติตามขั้นตอนถูกต้อง

ปฏิบัติได้ครบทุกขั้นตอนการกำหนดขนาดของตาราง  การกำหนดความกว้างของสดมภ์

ปฏิบัติได้ตามขั้นตอนการกำหนดขนาดของตาราง  การกำหนดความกว้างของสดมภ์

ปฏิบัติได้ไม่ครบขั้นตอนการกำหนดขนาดของตาราง  การกำหนดความกว้างของสดมภ์

ปฏิบัติไม่ได้ตามขั้นตอน

ชิ้นงานถูกต้องสมบูรณ์ตามหลักการ

ชิ้นงานจัดทำเสร็จถูกต้องสมบูรณ์ตาม

หลักการเขียนภาษา HTML ทั้งหมด

ชิ้นงานจัดทำเสร็จถูกต้องตามหลักการเขียนภาษา HTML บางส่วน

ชิ้นงานจัดทำเสร็จแต่ไม่ถูกต้องตามหลักการเขียนภาษา HTML

ไม่สร้างชิ้นงาน

บันทึกชิ้นงาน

บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานได้ถูกต้อง รวดเร็วตามคำสั่ง

บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานได้ถูกต้อง ตามคำสั่ง

บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานไม่ถูกต้อง

ไม่สามารถบันทึกชิ้นงานได้

เสร็จงาน
ตรงเวลาที่กำหนด

งานที่ปฏิบัติเสร็จทันเวลา

งานที่ปฏิบัติเสร็จทันเวลาบางส่วน

งานที่ปฏิบัติเสร็จไม่ทันเวลา

ไม่มีงาน

มีความคิดริเริ่มสร้างสรรค์สวยงาม

ชิ้นงานแปลกใหม่สร้างสรรค์สวยงาม

ชิ้นงานแปลกใหม่สวยงาม

ชิ้นงานสวยงาม

ไม่มีงาน

 

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

การกำหนดรูปแบบและตำแหน่งในตารางภาษา HTML                                 เวลาเรียน 1 ชั่วโมง


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

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

1. การกำหนดรูปแบบตารางในภาษา HTML

1.1 การกำหนดสีกรอบตาราง

1.2 การกำหนดลักษณะของเส้นตาราง

2. การกำหนดตำแหน่งข้อมูลในตารางภาษา HTML

 

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

             การกำหนดสีให้กับกรอบตารางเป็นการเพิ่มความเด่นให้กับตารางมากยิ่งขึ้นใช้แอตทริบิวต์  bordercolor การกำหนดรูปแบบเส้นใช้แอตทริบิวต์  frame  และ  rules  กำหนดระหว่างแท็ก <table> การจัดตำแหน่งข้อมูลในตารางเป็นการกำหนดให้ข้อมูลที่เป็นตัวเลขจัดให้อยู่ตำแหน่งกึ่งกลางของเซลล์​​​​​และข้อความให้จัดตำแหน่งชิดซ้าย  ​​​​​เพื่อการจัดระเบียบข้อมูลและการนำเสนอข้อมูลที่น่าสนใจเข้าใจง่ายค่าที่สามารถกำหนดจัดข้อมูลในแนวนอนใช้แอตทริบิวต์  align  คือ  center, left, right  และ justify ค่าที่สามารถกำหนดการจัดข้อมูลในแนวตั้งใช้แอตทริบิวต์ valign คือ baseline, bottom, middle, top

 

arrow1กิจกรรม/ใบงานที่ 4.5 การกำหนดรูปแบบและตำแหน่งในตารางภาษา HTML (คะแนนเต็ม 15 คะแนน) ใช้เวลาทำ 20 นาที

คำชี้แจง

              1. ให้นักเรียนสร้างตารางให้ตารางมี 2 สดมภ์ 5 แถว กำหนดลักษณะของเส้นตารางให้เป็นเส้นด้านบนของช่องเซลล์ และกำหนดสีกรอบตารางเป็นสีน้ำเงิน กำหนดให้มีตารางซ้อนในสดมภ์ที่ 1 แถวในตารางซ้อน 5 แถว แทรกข้อมูลในไฟล์ ไฟล์ work202.html จัดวางข้อมูลไว้ในสดมภ์ที่ 2    

              2. เมื่อนักเรียนปฏิบัติขั้นตอนดังกล่าวเรียบร้อยแล้วให้บันทึกชิ้นงานลงในไดร์ฟ D: โฟลเดอร์ห้องเรียนพร้อมบันทึกชื่อไฟล์ชื่อ เลขที่_work405.html ไว้ในโฟลเดอร์ห้องเรียนเสร็จแล้วส่งให้ครูประเมินเป็นรายบุคคล

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

 work405

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

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

3

(ดี)

2

(พอใช้)

1

(ปรับปรุง)

0

(ไม่ผ่าน)

ปฏิบัติตามขั้นตอนถูกต้อง

ปฏิบัติได้ครบทุกขั้นตอนการกำหนดรูปแบบตาราง ได้แก่ การกำหนดสีกรอบตาราง การกำหนดลักษณะของเส้นตาราง และการกำหนดตำแหน่งข้อมูลในตาราง 

ปฏิบัติได้ตามขั้นตอนการกำหนดรูปแบบตาราง ได้แก่ การกำหนดสีกรอบตาราง การกำหนดลักษณะของเส้นตาราง และการกำหนดตำแหน่งข้อมูลในตาราง 

ปฏิบัติได้ไม่ครบขั้นตอนการกำหนดรูปแบบตาราง ได้แก่ การกำหนดสีกรอบตาราง การกำหนดลักษณะของเส้นตาราง และการกำหนดตำแหน่งข้อมูลในตาราง 

ปฏิบัติไม่ได้ตามขั้นตอน

ชิ้นงานถูกต้องสมบูรณ์ตามหลักการ

ชิ้นงานจัดทำเสร็จถูกต้องสมบูรณ์ตาม

หลักการเขียนภาษา HTML ทั้งหมด

ชิ้นงานจัดทำเสร็จถูกต้องตามหลักการเขียนภาษา HTML บางส่วน

ชิ้นงานจัดทำเสร็จแต่ไม่ถูกต้องตามหลักการเขียนภาษา HTML

ไม่สร้างชิ้นงาน

บันทึกชิ้นงาน

บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานได้ถูกต้อง รวดเร็วตามคำสั่ง

บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานได้ถูกต้อง ตามคำสั่ง

บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานไม่ถูกต้อง

ไม่สามารถบันทึกชิ้นงานได้

เสร็จงาน
ตรงเวลาที่กำหนด

งานที่ปฏิบัติเสร็จทันเวลา

งานที่ปฏิบัติเสร็จทันเวลาบางส่วน

งานที่ปฏิบัติเสร็จไม่ทันเวลา

ไม่มีงาน

มีความคิดริเริ่มสร้างสรรค์สวยงาม

ชิ้นงานแปลกใหม่สร้างสรรค์สวยงาม

ชิ้นงานแปลกใหม่สวยงาม

ชิ้นงานสวยงาม

ไม่มีงาน

 

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

การจัดการรูปภาพในตารางภาษา HTML                                             เวลาเรียน 1 ชั่วโมง


                การจัดการรูปภาพในภาษา HTML กล่าวถึงการใส่รูปภาพพื้นหลังให้กับตารางเป็นการกำหนดแอตทริบิวต์ background ในแท็ก <table> และการแทรกรูปภาพใช้แท็ก <img src="/รูปภาพ"> ในตาราง

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

1. การใส่รูปภาพพื้นหลังตารางในภาษา HTML

2. การแทรกรูปภาพในตารางภาษา HTML

 

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

            

            การใส่รูปภาพให้กับพื้นหลังของตารางใช้แอตทริบิวต์  background  ไม่นิยมใช้กับรูปภาพที่มีความละเอียดน้อยจะทำให้ภาพแตกได้ รูปภาพมาแทรกในเซลล์ตารางใช้แท็ก  <img>​​​​​​​​​ ใช้คู่กับแอตทริบิวต์ในการกำหนดไฟล์รูปภาพ  src  แท็ก <img src= “ไฟล์รูปภาพ”>  กำหนดระหว่างแท็ก  <td>...</td>

 

arrow1กิจกรรม/ใบงานที่ 4.6 การจัดการรูปภาพในตารางภาษา HTML (คะแนนเต็ม 15 คะแนน) ใช้เวลาทำ 20 นาที

คำชี้แจง

              1. ให้นักเรียนเปิดไฟล์ work405.html โดยกำหนดการใส่รูปภาพพื้นหลังให้กับตาราง และแทรกรูปภาพในสดมภ์ที่ 1 ที่ทำการซ้อนตารางไว้ 5 แถว ใส่ทีละรูป ซึ่งรูปที่ 1 เป็นรูปเกี่ยวกับบริเวณของต้นไม้ รูปที่ 2 เป็นรูปใบ รูปที่ 3 เป็นผล รูปที่ 4 เป็นเมล็ด ตามลำดับ       

              2. เมื่อนักเรียนปฏิบัติขั้นตอนดังกล่าวเรียบร้อยแล้วให้บันทึกชิ้นงานลงในไดร์ฟ D: โฟลเดอร์ห้องเรียนพร้อมบันทึกชื่อไฟล์ชื่อ เลขที่_work406.html ไว้ในโฟลเดอร์ห้องเรียนเสร็จแล้วส่งให้ครูประเมินเป็นรายบุคคล

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

 work406

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

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

3

(ดี)

2

(พอใช้)

1

(ปรับปรุง)

0

(ไม่ผ่าน)

ปฏิบัติตามขั้นตอนถูกต้อง

ปฏิบัติได้ครบทุกขั้นตอนการใส่รูปภาพพื้นหลังและการแทรกรูปภาพในตาราง

ปฏิบัติได้ตามขั้นตอนการใส่รูปภาพพื้นหลังและการแทรกรูปภาพในตาราง

ปฏิบัติได้ไม่ครบขั้นตอนการใส่รูปภาพพื้นหลังและการแทรกรูปภาพในตาราง

ปฏิบัติไม่ได้ตามขั้นตอน

ชิ้นงานถูกต้องสมบูรณ์ตามหลักการ

ชิ้นงานจัดทำเสร็จถูกต้องสมบูรณ์ตาม

หลักการเขียนภาษา HTML ทั้งหมด

ชิ้นงานจัดทำเสร็จถูกต้องตามหลักการเขียนภาษา HTML บางส่วน

ชิ้นงานจัดทำเสร็จแต่ไม่ถูกต้องตามหลักการเขียนภาษา HTML

ไม่สร้างชิ้นงาน

บันทึกชิ้นงาน

บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานได้ถูกต้อง รวดเร็วตามคำสั่ง

บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานได้ถูกต้อง ตามคำสั่ง

บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานไม่ถูกต้อง

ไม่สามารถบันทึกชิ้นงานได้

เสร็จงาน
ตรงเวลาที่กำหนด

งานที่ปฏิบัติเสร็จทันเวลา

งานที่ปฏิบัติเสร็จทันเวลาบางส่วน

งานที่ปฏิบัติเสร็จไม่ทันเวลา

ไม่มีงาน

มีความคิดริเริ่มสร้างสรรค์สวยงาม

ชิ้นงานแปลกใหม่สร้างสรรค์สวยงาม

ชิ้นงานแปลกใหม่สวยงาม

ชิ้นงานสวยงาม

ไม่มีงาน

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

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

มีความรู้ความเข้าใจและสามารถสร้างตารางด้วยภาษา HTML ได้

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

ด้านความรู้

1. อธิบายและสร้างตารางเบื้องต้นในภาษา HTML ได้

2. อธิบายและกำหนดคุณลักษณะและแบ่งส่วนตารางภาษา HTML ได้

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

4. อธิบายและกำหนดขนาดของตารางและสดมภ์ภาษา HTML ได้

5. อธิบายและกำหนดรูปแบบและตำแหน่งในตารางภาษา HTML ได้

6. อธิบายและจัดการรูปภาพในตารางภาษา HTML ได้

ด้านทักษะ/กระบวนการ

1. สร้างตารางเบื้องต้นในภาษา HTML ได้

2. กำหนดคุณลักษณะและแบ่งส่วนตารางภาษา HTML ได้

3. จัดการเซลล์ในตารางภาษา HTML ได้

4. กำหนดขนาดของตารางและสดมภ์ภาษา HTML ได้

5. กำหนดรูปแบบและตำแหน่งในตารางภาษา HTML ได้

6. จัดการรูปภาพในตารางภาษา HTML ได้

ด้านคุณลักษณะ

1. มีวินัย

2. ใฝ่เรียนรู้

3. มุ่งมั่นในการทำงาน

แบบทดสอบ

1. แบบทดสอบก่อนเรียน มีทั้งหมด  2  ตอน  จำนวน  23  ข้อ  (29  คะแนน)

ตอนที่ 1 เป็นแบบทดสอบภาคทฤษฎีวัดพฤติกรรมด้านพุทธิพิสัย จำนวน 20 ข้อ (20  คะแนน)  ใช้เวลา 20 นาที

ตอนที่ 2 เป็นแบบทดสอบภาคปฏิบัติวัดพฤติกรรมทักษะพิสัย จำนวน  3  ข้อ  (ข้อละ  3 คะแนน)  ใช้เวลา 15 นาที

2. แบบทดสอบหลังเรียน มีทั้งหมด  2  ตอน  จำนวน  23  ข้อ  (29  คะแนน)

ตอนที่ 1 เป็นแบบทดสอบภาคทฤษฎีวัดพฤติกรรมด้านพุทธิพิสัย จำนวน 20 ข้อ (20  คะแนน)  ใช้เวลา 20 นาที

ตอนที่ 2 เป็นแบบทดสอบภาคปฏิบัติวัดพฤติกรรมทักษะพิสัย จำนวน  3  ข้อ  (ข้อละ  3 คะแนน)  ใช้เวลา 15 นาที

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

 

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

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

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