ชุดที่8

1 การสร้างตาราง คาชีแ้ จงสาหรับครู การจดั กจิ กรรมการเรียนรโู้ ดยใช้ชุดการเรยี นร้กู ารสร้างเวบ็ เพจดว้ ยภาษา HTML รายวิชาเทคโนโลยี 3 รหสั วิชา ง23102 ชน้ั มัธยมศกึ ษาปีที่ 3 กลมุ่ สาระการเรยี นรู้ การงานอาชีพและเทคโนโลยี ชดุ ที่ 8 เรื่อง การสรา้ งตาราง ครคู วรเตรียมความพร้อม และปฏิบตั ิตามคาแนะนา ดงั ตอ่ ไปนี้ 1. ศึกษารายละเอยี ดเกยี่ วกับการใช้ชุดการเรยี นร้กู ารสรา้ งเว็บเพจด้วยภาษา HTML รายวิชาเทคโนโลยี 3 รหัสวชิ า ง23102 ชัน้ มัธยมศึกษาปีท่ี 3 กลุ่มสาระการเรียนรู้ การงานอาชีพและเทคโนโลยี ชุดท่ี 8 เรอ่ื ง การสร้างตาราง และเตรยี มสื่อการเรียนรู้ทีใ่ ช้ 2. การจัดกิจกรรมการเรียนรู้ ครูจะต้องจดั กจิ กรรมใหค้ รบตามที่ระบไุ วใ้ น แผนการจัดการเรยี นรู้ เพ่ือให้กิจกรรมเปน็ ไปอย่างต่อเน่อื งและบรรลตุ ามวตั ถุประสงค์ 3. ก่อนทากิจกรรมทุกครั้ง ครูตอ้ งอธิบาย ชแ้ี จง วธิ ีการปฏบิ ัติให้ชัดเจน ให้นกั เรียน เข้าใจตรงกนั จงึ จะทาให้การจัดการเรยี นรบู้ รรลุเปา้ หมายและมีประสทิ ธิภาพ 4. ครูควรกระตุ้นให้นกั เรียนทกุ คนมีส่วนรว่ มในการทากจิ กรรม เพ่ือเป็นการฝกึ ให้ นกั เรยี นร้จู ักการทางานร่วมกัน ช่วยเหลอื ซ่งึ กนั และกัน รับผิดชอบต่อหน้าที่และกล้าแสดงออก สงั เกตพฤติกรรมขณะท่ีทากิจกรรมและใหค้ วามชว่ ยเหลือนักเรยี นดแู ลอยา่ งใกลช้ ดิ

2 การสรา้ งตาราง บัตรคาสง่ั สาหรับนักเรียน ชุดการเรยี นรู้การสร้างเวบ็ เพจดว้ ยภาษา HTML รายวชิ าเทคโนโลยี 3 รหัสวชิ า ง23102 ชัน้ มัธยมศึกษาปีที่ 3 กลุ่มสาระการเรียนรู้การงานอาชีพและเทคโนโลยี ชุดที่ 8 เร่อื ง การสร้างตาราง ใชเ้ วลาจานวน 2 ชั่วโมง ให้นกั เรยี นปฏบิ ตั ดิ งั นี้ 1. นักเรยี นแบ่งกลุ่ม กลุ่มละ 4 – 5 คน โดยคละกนั ระหว่างเกง่ ปานกลางและอ่อน แล้วเลอื กประธานกลมุ่ และเลขานุการกล่มุ พรอ้ มต้งั ช่ือกลุ่ม 2. นักเรียนรบั ชดุ การเรยี นรู้การสรา้ งเว็บเพจด้วยภาษา HTML รายวชิ าเทคโนโลยี 3 รหัสวชิ า ง23102 ช้นั มธั ยมศึกษาปีท่ี 3 กลมุ่ สาระการเรียนรู้การงานอาชีพและเทคโนโลยี ชุดที่ 8 เร่ือง การสรา้ งตาราง กลมุ่ ละ 1 ชดุ 3. นักเรยี นศึกษาบัตรคาส่ังใหเ้ ข้าใจอยา่ งละเอยี ด และปฏบิ ตั ิตามข้ันตอนทีก่ าหนดให้ 4. นกั เรยี นอ่านมาตรฐานการเรียนรู้ ตัวชวี้ ัด สาระสาคัญและ จดุ ประสงค์การเรียนรู้ 5. นักเรียนทาแบบทดสอบก่อนเรียนด้วยความซ่ือสตั ยไ์ ม่เปิดดูเฉลยกอ่ น จานวน 10 ขอ้ เวลา 15 นาที ลงในกระดาษคาตอบก่อนเรยี น 6. ตรวจแบบทดสอบก่อนเรยี นดว้ ยตนเอง และเขยี นคะแนนที่ไดใ้ นชอ่ งคะแนนทไ่ี ด้ใน กระดาษคาตอบก่อนเรยี น 7. นกั เรียนศึกษาบัตรเนื้อหา ทาบัตรกจิ กรรม แลว้ ทาตามคาช้แี จงตามลาดับด้วยความต้ังใจ และความซื่อสตั ย์ไมเ่ ปดิ ดเู ฉลยก่อน 8. เม่ือเสรจ็ ทกุ ข้ันตอน ให้เปิดดูบตั รเฉลยกจิ กรรม และตรวจคาตอบ หากตอบผิด หรือไม่แนใ่ จให้กลบั ไปศึกษาใหมอ่ ีกครั้ง 9. นกั เรียนทาแบบทดสอบหลงั เรียนดว้ ยความซ่ือสัตยไ์ มเ่ ปิดดูเฉลย จานวน 10 ขอ้ เวลา 15 นาที ลงในกระดาษคาตอบหลงั เรยี น 10. ตรวจแบบทดสอบหลังเรยี นด้วยตนเอง และเขียนคะแนนที่ได้ในช่องคะแนนทไี่ ด้ใน กระดาษคาตอบหลังเรยี น 11. ส่งชดุ การเรียนรู้การสร้างเวบ็ เพจด้วยภาษา HTML รายวชิ าเทคโนโลยี 3 รหสั วิชา ง23102 ชน้ั มัธยมศกึ ษาปีที่ 3 กลุ่มสาระการเรียนรู้การงานอาชพี และเทคโนโลยี ให้ครผู ู้สอนเพื่อตรวจคาตอบ อีกคร้ัง และตรวจสอบคะแนนกอ่ นเรียน ระหวา่ งเรียน และหลงั เรยี น

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

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

5 การสรา้ งตาราง แบบทดสอบกอ่ นเรียน เรือ่ ง การสร้างเว็บเพจด้วยภาษา HTML รายวชิ าเทคโนโลยี 3 รหัสวิชา ง23102 ชั้นมธั ยมศกึ ษาปที ่ี 3 กล่มุ สาระการเรียนรู้การงานอาชีพและเทคโนโลยี ชุดท่ี 8 เรือ่ ง การสร้างตาราง คาชแี้ จง นกั เรยี นเลอื กคาตอบที่ถกู ต้องท่สี ุดเพียงคาตอบเดียว แล้วทาเครอ่ื งหมาย  ลงในกระดาษคาตอบ (10 คะแนน) 1. โครงสรา้ งของตารางโดยทั่วไปจะประกอบไปด้วยอะไรบา้ ง ก. แถวและคอลัมน์ ข. คอลัมน์และดชั นี ค. แถวและขอ้ ความ ง. คอลัมน์และขอ้ ความ 2. คาสัง่ ในข้อใดเป็นคาสัง่ เปิดและปิดในการสร้างตาราง ก. คาสง่ั <TR> และคาส่งั </TR> ข. คาส่ัง <TD> และคาสงั่ </TD> ค. คาส่ัง <Table> และคาสัง่ </Table > ง. คาสัง่ <Caption> และคาส่ัง </Caption> 3. ข้อใดไม่ใช่คาสั่งหลกั ในการสร้างตาราง ก. <TR> ข. <TD> ค. <TABLE > ง. <CAPTION>

6 การสรา้ งตาราง 4. คาส่งั ใดเปน็ การกาหนดขอ้ มูลคอลัมน์ในตาราง ก. คาสัง่ <TR> ข. คาสัง่ <TH> ค. คาสงั่ <TD> ง. คาสั่ง <Table> 5. คาส่งั <TR> หมายถึงอะไร ก. การสร้างตาราง ข. กาหนดแถวของตาราง ค. การสร้างหวั เรื่องของตาราง ง. กาหนดขอ้ ความอธิบายตาราง 6. คาสง่ั <Table width= \"500 \" border= \"3 \"> ตารางน้มี ีความกวา้ งเท่าไหร่ ก. 3 เท่า ข. 500 % ค. 500 Pixels ง. 3 เท่าของ 500 Pixels 7. คาส่งั BORDER COLOR ข้อใดกล่าวถูกต้อง ก. กาหนดสีพ้นื ของตาราง ข. การเพมิ่ สขี องตวั อักษรภายในตาราง ค. กาหนดสขี องเสน้ ขอบของตาราง ง. กาหนดลวดลายเสน้ ขอบของตาราง 8. การกาหนดสีพ้นื ของตาราง ใช้คาส่งั ในขอ้ ใด ก. <Table BGCOLOR= \"#FF0000 \"> ข. <Table BORDERCOLOR = \"#FF0000 \"> ค. <Table BACKGROUNDCOLOR = \"#FF0000 \"> ง. ถกู ทัง้ ข้อ ก และ ขอ้ ข

7 การสรา้ งตาราง 9. จากคาสง่ั <TD> <IMG SRC=\"SNR.JPG\"> </TD> หมายความว่าอยา่ งไร ก. การผนวกตาราง ข. การใส่รปู ภาพในตาราง ค. การใสร่ ปู ภาพเปน็ พื้นหลงั ง. การกาหนดสีของเสน้ ขอบตาราง 10. คาส่ัง <TD COLSPAN = \"4 \">. . . . . . </TD> หมายถึง ก. ตอ้ งการจดั ตาแหนง่ ของแถว 4 แถว ข. ต้องการจัดตาแหนง่ ของคอลมั น์ 4 คอลัมน์ ค. ตอ้ งการปรบั ขนาดของแถวขยายออกไปจานวน 4 แถว ง. ต้องการปรบั ขนาดของคอลัมน์ขยายออกไปจานวน 4 คอลมั น์

8 การสร้างตาราง กระดาษคาตอบแบบทดสอบก่อนเรียน เร่ือง การสร้างเว็บเพจดว้ ยภาษา HTML รายวชิ าเทคโนโลยี 3 รหัสวิชา ง23102 ชนั้ มัธยมศึกษาปที ี่ 3 กลุ่มสาระการเรียนรู้การงานอาชพี และเทคโนโลยี ชุดท่ี 8 เรอื่ ง การสร้างตาราง ช่ือ – นามสกุล ........................................................................ช้ันมัธยมศกึ ษาปที ี่ 3 เลขที่ ........ ข้อ ก ข ค ง คะแนนเต็ม 10 1 คะแนนได้ 2 3 ผลการประเมิน 4  ดีมาก 5  ดี 6  ปานกลาง 7  ปรับปรงุ 8 9 (ลงชอื่ ).....................................ผู้ประเมิน 10 (นายณฐั วฒุ ิ ณรงคเ์ ดชา) วันที่ ........เดือน.....................พ.ศ.......... เกณฑ์การประเมนิ อยใู่ นเกณฑ์ ดมี าก คะแนนระหว่าง 9 - 10 อยูใ่ นเกณฑ์ ดี คะแนนระหวา่ ง 7 - 8 อยู่ในเกณฑ์ ปานกลาง คะแนนระหว่าง 5 - 6 อยู่ในเกณฑ์ ปรบั ปรงุ คะแนนระหว่าง 0 - 4

9 การสร้างตาราง บตั รเน้อื หา การสร้างตาราง ทาไมตอ้ งสร้างตาราง? ถ้าเกิดปัญหาเหลา่ น้จี ะทาอย่างไร?  ตอ้ งการแสดงข้อความเปน็ คอลมั น์  ตาแหนง่ ของข้อความหรอื รปู ภาพท่ีไม่ไดอ้ ยู่ในแนวบรรทัดปกติหรืออยู่ใน ตาแหนง่ ทแ่ี ปลกๆ  ใชต้ ารางชว่ ยในการจดั ตาแหนง่ ข้อความและรปู ภาพ 1. วิธสี ร้างตาราง 1. รปู แบบแท็ก <Table> กาหนดขอบเขตของตาราง 2. รปู แบบแทก็ <TR> กาหนดจานวนแถวในตาราง 3. รูปแบบแทก็ <TD> กาหนดจานวนคอลัมนใ์ นแต่ละแถว 2. การกาหนดขอบตาราง สามารถกาหนดได้ 2 แบบ คือ เส้นขอบด้านนอกและเส้นขอบแตล่ ะช่องในตาราง ชือ่ แอตทรบิ ิวต์ : Border รปู แบบ : <Table Border=\"ขนาดขอเส้นขอบตารางเป็นพกิ เซล\"> </Table> ตาแหนง่ ที่ใช:้ อยภู่ ายในแท็กเปิด <Table>

10 การสรา้ งตาราง 3. กาหนดสีพนื้ หลังตาราง  สีพน้ื กำหนดด้วย แอตทรบิ ิวต์ Bgcolor  สีพ้ืนหลังเปน็ รปู ภำพกำหนดดว้ ยแอตทริบวิ ต์ Background ช่อื แอตทรบิ วิ ต์ : Bgcolor , Background รูปแบบ : <Table Bgcolor=\"ช่อื สหี รอื ค่าสี\">...</Table> <Table background=\"ช่ือไฟลร์ ปู ภาพ\">...</Table> ตาแหนง่ ที่ใช้: อยู่ภายในแท็กเปดิ <Table> 4. การปรับระยะหา่ งระหว่างชอ่ งตาราง Cellspacing ปรบั ระยะหา่ งระหว่างช่องเซลล์ Cellpadding ปรบั ระยะห่างระหว่างขอบเซลลถ์ ึงข้อมูล ชอื่ แอตทริบิวต์ : Cellspacing , Cellapdding รปู แบบ : <Table Cellspacing=\"ระยะหา่ งเป็นพิกเซล\"></Table> <Table Cellpadding=\"ระยะห่างเปน็ พิกเซล\">...</Table> ตาแหน่งที่ใช:้ อยูภ่ ายในแท็กเปิด <Table> 5. การปรับความกวา้ งคอลัมน์ การปรับความกวา้ งคอลัมนด์ ว้ ยแท็ก Colgroup แอตทริบิวต:์ Span, Width ช่ือแทก็ : Colgroup แอตทริบวิ ต:์ Span , Width รปู แบบ : <Colgroup Span=\"จานวนคอลมั น์\" Width=\"ความกว้าง\">...</Colgroup> ตาแหน่งท่ีใช้: อยู่ระหว่าง <Table>...</Table>

11 การสร้างตาราง 6. ขนาดของช่องตามแนวนอนและแนวต้งั ชอื่ แอตทรบิ ิวต์: Colspan , Rowspan รปู แบบ : <Td ColSpan=\"ขนาดของชอ่ ง\">...</td> <Td RowSpan=\"ขนาดของช่อง\">...</td> ตาแหนง่ ท่ใี ช:้ ภายในแท็กเปิดของ <Td>...</Td> 7. แทก็ อื่น ๆ ท่ใี ช้กับตาราง แท็ก Caption ใชต้ ้งั ช่ือตารางหรอื ข้อความอธิบายตารางหรอื แท็ก Th ใชเ้ ป็นหัวข้อของตาราง ตวั อยา่ ง เช่น <caption>ตารางเปรยี บเทยี บข้อมลู </caption> <tr> <th>คอลมั น์ที่ 1</th> <th>คอลมั นท์ ่ี 2</th> <th>คอลมั น์ท่ี 3</th> </tr> เรมิ่ สรา้ งตาราง  ออกแบบตารางบนกระดาษเปลา่ เพ่ือให้ทราบจานวนแถวและคอลัมน์ท่ตี ้องการ  เขียน Tag ท่ีเก่ียวขอ้ งกบั การสรา้ งตาราง ซึ่งมดี ังนี้  <TABLE> ระบวุ ่าส่งิ ท่ีอยภู่ ายใน <TABLE> และ </TABLE> จะอยู่ในตาราง  <TR> ระบวุ า่ สิ่งทอี่ ย่ภู ายใน <TR> และ </TR> จะอย่ใู นแถวเดยี วกนั  <TD> ระบวุ ่าสิ่งทอ่ี ยภู่ ายใน <TD> และ </TD> จะแสดงอยใู่ นเซลลเ์ ดยี วกนั

12 การสร้างตาราง <html> <tr> <head> <td>ไทย</td> <title>Table 2*2 </title> <td>กรุงเทพ</td> </head> <body> </tr> <table> <tr> <tr> <td>จีน</td> <td>ประเทศ</td> <td>ปักกง่ิ </td> <td>เมืองหลวง</td> </tr> </tr> </table> </body> </html>

13 การสร้างตาราง การปรับแตง่ ตาราง สามารถปรับแตง่ ตารางใหม้ ีขนาด และลกั ษณะตามตอ้ งการโดยกาหนด attribute ดงั นี้  align=\"x\"  ใชเ้ พอ่ื กาหนดตาแหน่งของตาราง โดยทคี่ า่ \"x\" มีค่าเปน็ left, right หรอื center  โปรแกรม web browser มคี ่า default เป็น left  border=\"x\" เมอื่ \"x\" มีค่าได้ต้งั แต่ ศนู ย์ ขึ้นไป ใช้ กาหนดขนาดของเสน้ ขอบตาราง  width=\"x\"  ใชก้ าหนดความกวา้ งของตาราง กาหนดค่า x ในรูปของ เปอรเ์ ซน็ ต์ ของขนาดพื้นท่ีท่ี โปรแกรม web browser สามารถจะแสดงได้  หรอื กาหนดค่าเปน็ ตวั เลข เพ่ือให้ web browser แปลงคา่ ไปเป็นค่าของ pixels ตัวอย่างเป็นการสีพ้ืนหลัง สเี สน้ ขอบ <body> <table border=\"1\" bordercolor =\"green\" bgcolor =\"pink\" width=\"100%\" align=\"center\"> <tr> <td>ประเทศ</td> <td>เมอื งหลวง</td> </tr> <tr> <td>ไทย</td> <td>กรงุ เทพ</td> </tr> <tr> <td>จีน</td> <td>ปกั กงิ่ </td> </tr> </table> </body> </html>

14 การสรา้ งตาราง บตั รกิจกรรมที่ 1 คาชีแ้ จง ให้นักเรยี อธบิ ายความหมายของคาสั่งภาษา HTML ดังต่อไปน้ี (10 คะแนน) 1. <table width= \"800 \" height= \"90% \">…</table> (1 คะแนน) ………………………………………………………………………………………………………………………………. 2. <table width= \"800 \" height= \"90% \" bgcolor= \"#FFFF66 \">…</table> (1 คะแนน) ………………………………………………………………………………………………………………………………. 3. <td colspan= \"3 \">…</td> (1 คะแนน) ………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………………………………. 4. <td rowspan= \"3 \">…</td> (1 คะแนน) ………………………………………………………………………………………………………………………………. 5. <td bgcolor= \"#33FF00\">…</tr> (1 คะแนน) ………………………………………………………………………………………………………………………………. 6. <table width= \"200\">…</td> (1 คะแนน) ………………………………………………………………………………………………………………………………. 7. <table width= \"80%\">…</table> (1 คะแนน) ………………………………………………………………………………………………………………………………. 8. <table width= \"80%\" align = \"center\">…</table> (1 คะแนน) ………………………………………………………………………………………………………………………………. 9. <table width= \"80%\" background= \"bg01.jpg\">…</table> (1 คะแนน) ………………………………………………………………………………………………………………………………. ………………………………………………………………………………………………………………………………. 10. <table width= \"800\" background= \"web.jpg\" align= \"center\">…</table> (1 คะแนน) ………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………….

15 การสร้างตาราง บัตรกจิ กรรมที่ 2 คาสง่ั ให้นักเรยี นแบ่งกลมุ่ กลมุ่ ละ 4-5 คน ใหท้ าเว็บไซด์ เกีย่ วกบั เนื้อหาวิชาที่เรยี น เช่นวชิ าภาษาไทย คณิตศาสตร์ วทิ ยาศาสตร์ ฯลฯ ทัง้ หมดขัน้ ต่า 6 หนา้ ประกอบด้วยเนื้อหา 5 หน้า และหนา้ ผูจ้ ัดทา 1 หนา้ แลว้ นาไฟลเ์ ว็บเชอื่ มโยง เอกสารเขา้ หากัน ส่งครใู นรปู แบบรายงาน (รูปเลม่ 20 คะแนน) รปู แบบไฟล์ ตัวโปรแกรม Write CD และสง่ มาท่ี Classroom (30 คะแนน) บนั ทึกชอ่ื ไฟล์ : ชื่อเร่ือง.html (web.html) สง่ งานมาท่ี E-mail: : https://classroom.google.com ส่งห้องเรยี นของตนเอง พิมพ์หัวข้อ ส่งงาน Project HTML ชื่อนกั เรยี น ชั้น.. เลขท่.ี ......

16 การสร้างตาราง แบบทดสอบหลังเรียน เรื่อง การสรา้ งเว็บเพจดว้ ยภาษา HTML รายวิชาเทคโนโลยี 3 รหัสวิชา ง23102 ชน้ั มธั ยมศกึ ษาปที ี่ 3 กล่มุ สาระการเรยี นรู้การงานอาชพี และเทคโนโลยี ชดุ ที่ 8 เร่อื ง การสร้างตาราง คาชแ้ี จง นกั เรยี นเลอื กคาตอบที่ถูกต้องท่สี ุดเพยี งคาตอบเดยี ว แล้วทาเครอ่ื งหมาย  ลงในกระดาษคาตอบ (10 คะแนน) 1. คาสงั่ BORDER COLOR ข้อใดกลา่ วถูกต้อง ก. กาหนดสีพื้นของตาราง ข. การเพมิ่ สีของตัวอักษรภายในตาราง ค. กาหนดสีของเส้นขอบของตาราง ง. กาหนดลวดลายเสน้ ขอบของตาราง 2. ขอ้ ใดไมใ่ ชค่ าส่ังหลักในการสร้างตาราง ก. <TR> ข. <TD> ค. <TABLE > ง. <CAPTION> 3. จากคาส่ัง <TD> <IMG SRC=\"SNR.JPG\"> </TD> หมายความว่าอย่างไร ก. การผนวกตาราง ข. การใส่รูปภาพในตาราง ค. การใสร่ ูปภาพเปน็ พ้ืนหลงั ง. การกาหนดสขี องเส้นขอบตาราง

17 การสร้างตาราง 4. คาส่งั ใดเปน็ การกาหนดข้อมลู คอลมั น์ในตาราง ก. คาสัง่ <TR> ข. คาส่ัง <TH> ค. คาสั่ง <TD> ง. คาสัง่ <Table> 5. คาสัง่ <TR> หมายถึงอะไร ก. การสร้างตาราง ข. กาหนดแถวของตาราง ค. การสร้างหัวเร่ืองของตาราง ง. กาหนดขอ้ ความอธบิ ายตาราง 6. คาส่ังในข้อใดเปน็ คาสงั่ เปิดและปดิ ในการสร้างตาราง ก. คาส่ัง <TR> และคาส่ัง </TR> ข. คาส่ัง <TD> และคาสงั่ </TD> ค. คาสง่ั <Table> และคาสั่ง </Table > ง. คาส่ัง <Caption> และคาส่งั </Caption> 7. คาสั่ง <Table width= \"500 \" border= \"3 \"> ตารางนี้มีความกวา้ งเทา่ ไหร่ ก. 3 เท่า ข. 500 % ค. 500 Pixels ง. 3 เท่าของ 500 Pixels 8. การกาหนดสีพน้ื ของตาราง ใช้คาสงั่ ในข้อใด ก. <Table BGCOLOR= \"#FF0000 \"> ข. <Table BORDERCOLOR = \"#FF0000 \"> ค. <Table BACKGROUNDCOLOR = \"#FF0000 \"> ง. ถูกทัง้ ข้อ ก และ ขอ้ ข

18 การสรา้ งตาราง 9. โครงสร้างของตารางโดยท่ัวไปจะประกอบไปด้วยอะไรบา้ ง ก. แถวและคอลมั น์ ข. คอลมั น์และดชั นี ค. แถวและข้อความ ง. คอลมั นแ์ ละขอ้ ความ 10. คาสัง่ <TD COLSPAN = \"4 \">. . . . . . </TD> หมายถึง ก. ตอ้ งการจัดตาแหนง่ ของแถว 4 แถว ข. ต้องการจัดตาแหนง่ ของคอลัมน์ 4 คอลัมน์ ค. ต้องการปรบั ขนาดของแถวขยายออกไปจานวน 4 แถว ง. ต้องการปรบั ขนาดของคอลมั น์ขยายออกไปจานวน 4 คอลมั น์

19 การสร้างตาราง กระดาษคาตอบแบบทดสอบหลังเรยี น เรื่อง การสรา้ งเว็บเพจด้วยภาษา HTML รายวิชาเทคโนโลยี 3 รหัสวิชา ง23102 ชัน้ มัธยมศกึ ษาปีที่ 3 กลุ่มสาระการเรียนรู้การงานอาชพี และเทคโนโลยี ชดุ ท่ี 8 เร่อื ง การสรา้ งตาราง ช่ือ – นามสกลุ ........................................................................ช้ันมธั ยมศกึ ษาปที ี่ 3 เลขที่ ........ ข้อ ก ข ค ง คะแนนเต็ม 10 1 คะแนนได้ 2 3 ผลการประเมิน 4  ดมี าก 5  ดี 6  ปานกลาง 7  ปรบั ปรงุ 8 9 (ลงช่อื ).....................................ผปู้ ระเมนิ 10 (นายณฐั วุฒิ ณรงคเ์ ดชา) วนั ท่ี ........เดอื น.....................พ.ศ.......... เกณฑ์การประเมิน อยใู่ นเกณฑ์ ดีมาก คะแนนระหว่าง 9 - 10 อย่ใู นเกณฑ์ ดี คะแนนระหว่าง 7 - 8 อยใู่ นเกณฑ์ ปานกลาง คะแนนระหวา่ ง 5 - 6 อยใู่ นเกณฑ์ ปรบั ปรงุ คะแนนระหว่าง 0 - 4

20 การสร้างตาราง เฉลยแบบทดสอบก่อนเรยี น เรื่อง การสรา้ งเว็บเพจด้วยภาษา HTML รายวชิ าเทคโนโลยี 3 รหัสวิชา ง23102 ชัน้ มัธยมศกึ ษาปที ่ี 3 กลุม่ สาระการเรยี นรู้การงานอาชพี และเทคโนโลยี ชุดท่ี 8 เรอื่ ง การสร้างตาราง 1. ก 2. ค 3. ง 4. ข 5. ข 6. ค 7. ค 8. ก 9. ข 10. ข

21 การสร้างตาราง เฉลยแบบทดสอบหลังเรียน เรื่อง การสรา้ งเว็บเพจดว้ ยภาษา HTML รายวชิ าเทคโนโลยี 3 รหัสวิชา ง23102 ช้นั มธั ยมศกึ ษาปที ่ี 3 กลุม่ สาระการเรียนรู้การงานอาชีพและเทคโนโลยี ชดุ ท่ี 8 เร่อื ง การสร้างตาราง 1. ค 2. ง 3. ข 4. ค 5. ข 6. ค 7. ค 8. ก 9. ก 10. ข

22 การสรา้ งตาราง

23 การสร้างตาราง บัตรเฉลยกจิ กรรมท่ี 1 คาช้แี จง ให้นักเรียอธิบายความหมายของคาสง่ั ภาษา HTML ดงั ตอ่ ไปนี้ (10 คะแนน) 1. <table width= \"800 \" height= \"90% \">…</table> (1 คะแนน) สร้างตาราง ขนาดกวา้ ง 800 พกิ เซล สูง 90 เปอร์เซ็นต์ 2. <table width= \"800 \" height= \"90% \" bgcolor= \"#FFFF66 \">…</table> (1 คะแนน) สร้างตาราง ขนาดกว้าง 800 พิกเซล สงู 90 เปอร์เซน็ ต์ สีพนื้ ในตารางสเี หลืองอ่อน 3. <td colspan= \"3 \">…</td> (1 คะแนน) การกาหนดลกั ษณะพเิ ศษดว้ ยคาสง่ั แอตทริบวิ ต์ colspan ในการรวมคอลัมนเ์ ขา้ ดว้ ยกนั คอื จานวน 2 คอลัมนท์ ร่ี วมเซลล์ 4. <td rowspan= \"3 \">…</td> (1 คะแนน) การกาหนดลกั ษณะพิเศษดว้ ยคาส่ังแอตทรบิ วิ ต์ rowspan ในการรวมแถวเข้าด้วยกัน คือจานวน 2 แถวทีร่ วมเซลล์ 5. <td bgcolor= \"#33FF00\">…</tr> (1 คะแนน) กาหนดสีพนื้ ในช่องตารางเปน็ สีเขยี ว 6. <table width= \"200\">…</td> (1 คะแนน) กาหนดความกวา้ งในตารางขนาด 200 พิกเซล 7. <table width= \"80%\">…</table> (1 คะแนน) กาหนดความกว้างในตารางขนาด 80 เปอร์เซนต์ 8. <table width= \"80%\" align = \"center\">…</table> (1 คะแนน) กาหนดความกว้างในตารางขนาด 80 เปอร์เซน็ ต์ โดยให้อยู่กงึ่ กลางของตาราง 9. <table width= \"80%\" background= \"bg01.jpg\">…</table> (1 คะแนน) กาหนดความกวา้ งในตารางขนาด 80 เปอร์เซ็นต์ โดยให้มีภาพพนื้ หลงั เป็นรูปภาพอยู่ในตาราง คือ ไฟลภ์ าพ bg01.jpg 10. <table width= \"800\" background= \"web.jpg\" align= \"center\">…</table> (1 คะแนน) กาหนดความกวา้ งในตารางขนาด 80 เปอร์เซ็นต์ โดยใหม้ ภี าพพนื้ หลงั เป็นรูปภาพอยู่ในตาราง คอื ไฟลภ์ าพ web.jpg โดยใหอ้ ยูก่ ่งึ กลางของตาราง

24 การสรา้ งตาราง บัตรกิจกรรมที่ 2 คาส่ัง ใหน้ ักเรียนแบ่งกลมุ่ กลมุ่ ละ 4-5 คน ให้ทาเว็บไซด์ เก่ียวกับเนื้อหาวชิ าท่ีเรยี น เชน่ วชิ าภาษาไทย คณิตศาสตร์ วทิ ยาศาสตร์ ฯลฯ ทง้ั หมดขน้ั ต่า 6 หน้า ประกอบดว้ ยเนื้อหา 5 หน้า และหน้าผูจ้ ัดทา 1 หน้า แลว้ นาไฟลเ์ วบ็ เชอื่ มโยง เอกสารเข้าหากนั ส่งครใู นรปู แบบรายงาน (รูปเล่ม 20 คะแนน) รปู แบบไฟล์ ตัวโปรแกรม Write CD และสง่ มาที่ Classroom (30 คะแนน) บนั ทึกชอ่ื ไฟล์ : ช่ือเร่อื ง.html (web.html) ส่งงานมาที่ E-mail: : https://classroom.google.com ส่งห้องเรยี นของตนเอง พมิ พ์หวั ข้อ ส่งงาน Project HTML ชื่อนักเรียน ช้ัน.. เลขท่ี....... แนวคาตอบ บตั รเฉลยกิจกรรมท่ี 2 (ตวั อย่างผลงานนักเรียน)

25 การสรา้ งตาราง บรรณานุกรม กระทรวงศึกษาธกิ าร,สานักงานคณะกรรมการการศึกษาข้ันพ้ืนฐาน. (2551). ตัวชีว้ ดั และ สาระการเรยี นร้แู กนกลาง กลมุ่ สาระการเรยี นร้กู ารงานอาชพี และเทคโนโลยี ตามหลกั สูตรแกนกลางการศกึ ษาข้นั พื้นฐาน พทุ ธศักราช 2551. สานักวชิ าการ และมาตรฐานการศึกษา กรุงเทพฯ จันทรเ์ พ็ญ เช้ือพานิช. (2549). “นวตั กรรมการศกึ ษาไทย :รปู แบบการเรียนการสอน” นวัตกรรม การจัดการเรียนรู้ตามแนวปฏิรูปการศึกษา. ศูนย์ตาราและเอกสารทาง วชิ าการ คณะศึกษาศาสตร์ จุฬาลงกรณ์มหาวทิ ยาลยั . ชยั วัฒน์ สทุ ธริ ัตน์ . (2552). 80 นวัตกรรมการจัดการเรยี นร้ทู เ่ี นน้ ผูเ้ รียนเป็นสาคัญ. กรงุ เทพฯ: บริษัท แดเนก็ ซ์ อนิ เตอร์คอรป์ ปอเรชั่น. สวุ ิทย์ มูลคา และ อรทัย มลู คา (2545). 19 วธิ จี ดั การเรยี นรู้ : เพื่อพัฒนาความรู้ทักษะ. พมิ พค์ ร้งั ที่ 3. กรุงเทพฯ : โรงพิมพ์ภาพพิมพ์ ศนู ยส์ ่งเสริมวิชาการ. 231/4 ซอยวดั กระสงั ข์กระจาย เขตบางกอกใหญ่ กรงุ เทพ. เวบ็ ครูณัฐวุฒิออนไลน์ web : https://sites.google.com/a/snr.ac.th/nattawut/home

26 การสร้างตาราง คานา ชุดการเรียนรู้การสร้างเว็บเพจด้วยภาษา HTML รายวิชาเทคโนโลยี 3 รหัสวิชา ง23102 ชนั้ มัธยมศกึ ษาปที ่ี 3 กลมุ่ สาระการเรยี นรู้การงานอาชีพและเทคโนโลยี ชุดท่ี 8 เรื่อง การสร้างตาราง เป็นเคร่ืองมือสาคัญในกระบวนการจัดการเรียนการสอน ซ่ึงจะช่วยกระตุ้นกระบวน การเรียนรู้ และตรวจสอบคณุ ภาพการเรียนรูข้ องนักเรียน ผู้จัดทาได้ศกึ ษาวเิ คราะห์ หลักสตู รแกนกลางการศกึ ษา ขั้นพ้ืนฐาน พุทธศักราช 2551 อีกทั้งได้ศึกษาค้นคว้าหาความรู้ ทักษะการปฏิบัติ ทักษะด้านการคิด เพื่อนาข้อมูลมาประกอบการจัดทาชุดการเรียนรู้การสร้างเว็บเพจด้วยภาษา HTML ให้สอดคล้อง กับมาตรฐานการเรียนรู้ ท่ีมุ่งให้นักเรียนได้รับการพัฒนาทั้งด้านความรู้ คุณธรรม ค่านิยมท่ีถูกต้อง เหมาะสม ชุดการเรียนรู้การสร้างเว็บเพจด้วยภาษา HTML รายวิชาเทคโนโลยี 3 รหัสวิชา ง23102 ชั้นมัธยมศกึ ษาปีท่ี 3 กลมุ่ สาระการเรยี นรู้การงานอาชีพและเทคโนโลยี ชดุ ท่ี 8 เร่อื ง การสรา้ งตาราง มีจุดประสงค์การเรียนรู้ คือ บอกคาสั่งท่ีใช้ในการสร้างตาราง คาส่ังสาหรับการกาหนดเส้นขอบ ของตารางคาสั่งสาหรับการกาหนดความกว้างและความสูงของตารางได้ บอกคาส่ังสาหรับการกาหนด ระยะเวน้ ขอบภายในเซลล์ขอ้ มูล บอกคาสัง่ สาหรบั การกาหนดตาแหนง่ และสพี ื้นของตาราง และสามารถ กาหนดคุณลักษณะพิเศษที่เก่ียวข้องกับแถว ปฏิบัติทักษะในการใช้งานคาส่ังสาหรับสร้างตาราง ในรปู แบบต่างๆ มคี วามซื่อสัตย์ ความใฝ่รใู้ ฝ่เรยี น มีความรบั ผดิ ชอบ ความมีระเบียบวนิ ัย ผ้จู ัดทาหวงั เปน็ อย่างยิ่งวา่ ชดุ การเรียนรูก้ ารสรา้ งเว็บเพจด้วยภาษา HTML รายวชิ าเทคโนโลยี 3 รหสั วชิ า ง23102 ชนั้ มธั ยมศึกษาปีที่ 3 กลุ่มสาระการเรียนรู้การงานอาชีพและเทคโนโลยี ชุดท่ี 8 เรอ่ื ง การสร้างตาราง เลม่ น้ีจะเปน็ ประโยชน์ต่อผเู้ รยี นในการเรียนรอู้ ยา่ งมีประสิทธิภาพ มีความเขา้ ใจ ผลสมั ฤทธ์ิทางการเรยี นสูงขึ้น ขอบคณุ ผู้ให้ข้อเสนอแนะตลอดจนให้การสนบั สนนุ ทุกท่านไว้ ณ โอกาสน้ี ณัฐวฒุ ิ ณรงค์เดชา

27 การสร้างตาราง สารบัญ เรอื่ ง หนา้ คาช้ีแจงสาหรับครู.................................................................................... ............................... 1 บัตรคาสั่ง สาหรบั นกั เรียน..................................................................................................... 2 แผนผังแสดงขั้นตอนการใช้ชุดการเรียนรกู้ ารสรา้ งเว็บเพจดว้ ยภาษา HTML........................ 3 มาตรฐานการเรยี นรู้ / ตัวชี้วดั . ............................................................................................. 4 สาระสาคญั / จุดประสงคก์ ารเรียนรู.้ ..................................................................................... 4 แบบทดสอบกอ่ นเรียน............................................................................................................ 5 กระดาษคาตอบแบบทดสอบก่อนเรยี น.................................................................................. 8 บัตรเนื้อหา ........................................................................................................................... 9 บตั รกิจกรรมที่ 1 .................................................................................................................. 14 บตั รกจิ กรรมท่ี 2 .................................................................................................................. 15 แบบทดสอบหลังเรียน............................................................................................................. 16 กระดาษคาตอบแบบทดสอบหลงั เรยี น................................................................................... 19 เฉลยแบบทดสอบก่อนเรียน.................................................................................................... 20 เฉลยแบบทดสอบหลงั เรยี น.................................................................................................... 21 ภาคผนวก............................................................................................................................... 22 บรรณานกุ รม.......................................................................................................................... 25