ชุดที่5

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

2 การกาหนดรายการหัวข้อ บัตรคาส่ัง สาหรบั นักเรยี น ชุดการเรยี นรูก้ ารสร้างเวบ็ เพจด้วยภาษา HTML รายวชิ าเทคโนโลยี 3 รหัสวิชา ง23102 ช้นั มัธยมศกึ ษาปที ่ี 3 กลมุ่ สาระการเรยี นรู้การงานอาชพี และเทคโนโลยี ชุดที่ 5 เร่ือง การกาหนด รายการหวั ข้อ ใช้เวลาจานวน 2 ชวั่ โมง ใหน้ กั เรียนปฏิบัติดังน้ี 1. นักเรยี นแบ่งกลุม่ กลมุ่ ละ 4 – 5 คน โดยคละกันระหวา่ งเก่ง ปานกลางและอ่อน แล้วเลอื กประธานกล่มุ และเลขานกุ ารกลุม่ พร้อมต้งั ชอื่ กลุ่ม 2. นกั เรยี นรับชดุ การเรยี นรูก้ ารสรา้ งเว็บเพจด้วยภาษา HTML รายวชิ าเทคโนโลยี 3 รหสั วิชา ง23102 ชัน้ มัธยมศึกษาปที ี่ 3 กลุม่ สาระการเรียนรู้การงานอาชีพและเทคโนโลยี ชดุ ท่ี 5 เรอ่ื ง การกาหนดรายการหวั ข้อ กลมุ่ ละ 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 กลุม่ สาระการเรียนรู้การงานอาชพี และเทคโนโลยี ชุดท่ี 5 เรอ่ื ง การกาหนดรายการหัวข้อ คาชแ้ี จง นกั เรียนเลอื กคาตอบท่ีถูกต้องท่ีสดุ เพียงคาตอบเดยี ว แล้วทาเคร่ืองหมาย  ลงในกระดาษคาตอบ (10 คะแนน) 1. ข้อใดกลา่ วไม่ถูกต้อง ก. คาสง่ั <dt> ใช้สาหรบั จดั ย่อหน้าสาหรบั หวั ขอ้ ข. คาสัง่ <dd> ใชส้ าหรับจดั ยอ่ หนา้ สาหรบั คาอธิบาย ค. คาสงั่ <dl> ใช้สาหรบั บอกขอบเขตของรายการทง้ั หมด ง. คาสง่ั <li> ใชส้ าหรับกาหนดรายการย่อยซึ่งอยู่ภายใต้คาสั่ง <h> 2. หากต้องการกาหนดหัวขอ้ ในรายการยอ่ ยใหเ้ ป็นตัวเลขกากับ จะตอ้ งใช้คาสั่งตรงกบั ข้อใด ก. คาสงั่ <OL> ข. คาสงั่ <LI> ค. คาสงั่ <UL> ง. คาส่งั <NUM> 3. คาสัง่ <OL> กับคาส่ัง <UL> มีขอ้ แตกต่างกนั ในเรื่องใด ก. สัญลกั ษณ์หน้าหัวขอ้ รายการย่อย ข. คาสง่ั <LI> อยู่ภายใต้คาสง่ั ท้ังสอง ค. เปน็ คาส่งั ท่ใี ชส้ าหรบั กาหนดรายการ ง. เปน็ คาส่งั ทีใ่ ชบ้ อกขอบเขตของขอ้ มูลรายการท้ังหมด

6 การกาหนดรายการหวั ข้อ 4. ข้อใดกล่าวไม่ถูกต้องเกย่ี วกับ Ordered List ก. เปน็ การสรา้ งลิสตแ์ บบมีลาดับ ข. หากไมม่ ีการกาหนดชนดิ ของเลขลาดับจะใชเ้ ลขโรมัน ค. ใช้แท็ก <OL> ในการสรา้ งรายการแบบ Ordered List ง. ชนดิ ของเลขลาดับทก่ี าหนดไดแ้ ก่ ตวั อกั ษร, เลขโรมนั และเลขอารบิก 5. ข้อใดไมใ่ ชล่ ักษณะของหวั ข้อยอ่ ยทอ่ี ย่ภู ายใต้คาสงั่ <UL> ก. มีลกั ษณะเปน็ วงกลมทบึ แสง ข. มลี ักษณะเปน็ วงกลมโปรง่ แสง ค. มลี กั ษณะเปน็ ส่เี หลยี่ มทึบแสง ง. มลี ักษณะเปน็ ตวั เลขหรอื ตวั อักษร 6. <dt> และ <dd> เป็นคาสั่งในการสร้างลสิ ตแ์ บบใด ก. ลสิ ตแ์ บบมีลาดับ ข. ลสิ ตแ์ บบซอ้ นกนั ค. ลสิ ตแ์ บบไม่มีลาดับ ง. ลิสต์แบบจากัดความ 7. ลักษณะทไี่ มเ่ หมือนกนั ของคาสง่ั <dir> และ <menu> คือข้อใด ก. แสดงรายการท่ีสัญลกั ษณ์ที่เหมือนกนั ข. เปน็ คาสั่งที่บอกขอบเขตของรายการทัง้ หมด ค. เปน็ คาส่ังท่แี สดงรายการแบบมีสัญลักษณ์นาหัวข้อ ง. เป็นคาสง่ั ท่ีใช้สาหรบั แสดงรายการท่ีมคี วามยาวมากกว่า 20 ตัวอักษร 8. หากต้องการกาหนดหวั ขอ้ ในรายการยอ่ ยให้เป็นปุ่ม กลม ๆ เล็ก ๆ จะตอ้ งใชค้ าส่ังตรงกับขอ้ ใด ก. คาส่งั <h> ข. คาส่งั <ul> ค. คาสั่ง <ol> ง. คาสง่ั <num>

7 การกาหนดรายการหวั ข้อ 9. คาส่งั ในข้อใดเปน็ การกาหนดชนดิ สัญลกั ษณห์ น้าข้อความเป็นวงกลมทึบแสง ก. <ol> <h> รายการท่ี 1</ol> ข. <ul type= \"disc \"> <li> รายการท่ี 1</ul> ค. <ul type= \"circle \"> <li> รายการท่ี 1</ul> ง. <ul type= \"square \"> <li> รายการท่ี 1</ul> 10. ขอ้ ใดกล่าวถูกต้องเก่ยี วกับคาสั่ง <pre>…</pre> ก. เปน็ คาส่งั ภาษา HTML ทีม่ ที ้งั ปา้ ยระบุ (Tag) เปดิ และปิด ข. เป็นคาสง่ั สาหรบั กาหนดหวั ข้อรายการไดท้ ้ังแบบท่ีเปน็ ตัวเลข และแบบท่ีเปน็ สัญลักษณ์ ค. เปน็ คาส่ังสาหรับกาหนดรูปแบบการแสดงผลใหเ้ หมือนกบั การจัดรปู แบบภายในเอกสาร HTML ทกุ ประการ ง. เป็นคาสั่งสาหรบั ใช้ในการแสดงผลข้อความเย้ืองเข้าไปทางขวาและจัดข้อความให้ตวั อักษร ตวั แรกของแตล่ ะบรรทดั เริ่มทีต่ าแหน่งเดยี วกนั

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

9 การกาหนดรายการหัวข้อ บตั รเนื้อหา การกาหนดรายการหวั ขอ้ การจัดรูปแบบย่อหนา้ ในลักษณะ LIST รปู แบบของ List นนั้ แบง่ ออกเปน็ 3 ประเภท  Unordered List  Ordered List  Definition List Unordered List Unordered List เปน็ การแบ่งหัวข้อต่างๆ ด้วยปุ่มกลมๆ เลก็ ๆ หนา้ หัวข้อย่อ โดย  <UL> เปน็ ตวั ระบุวา่ รายการตา่ งๆ ต่อไปน้จี ะแสดงผลเปน็ แบบ Unordered List และ  <LI> เป็นตัวระบหุ วั ขอ้ ย่อยแตล่ ะหวั ข้อ รูปแบบ <UL> <Li>ข้อความ </Li> </UL> คุณลักษณะพิเศษของคาสง่ั UL มดี ังนค้ี อื TYPE เปน็ การกาหนดคณุ ลักษณะพิเศษเพ่มิ เติมของคาสงั่ UL สาหรบั การกาหนดชนดิ ของ สญั ลักษณห์ นา้ ขอ้ ความ โดยสามารถกาหนดได้ 3 ลักษณะคอื Disc ลกั ษณะเป็นวงกลมทบึ แสง ● Circle สญั ลักษณ์เปน็ วงกลมโปรง่ แสง Օ Square สญั ลักษณ์เป็นสเี หลยี่ มทบึ แสง ■

10 การกาหนดรายการหวั ข้อ <html> <head> <title>Unnumbered List</title> </head> <body> <p>List of Fruits:</p> <ul> <li>Apple</li> <li>Banana</li> <li>Mango</li> </ul> </body> </html> Ordered List Ordered List เป็นการแบ่งหวั ข้อต่างๆ ด้วยลาดับของตัวเลข หน้าหวั ขอ้ ย่อย โดย  <OL> เปน็ ตวั ระบุวา่ รายการตา่ งๆ ต่อไปนีจ้ ะแสดงผลเป็นแบบ Ordered List  <LI> เปน็ ตัวระบหุ ัวข้อย่อยแต่ละหวั ขอ้ Attribute ของ Order List Attribute คือสว่ นเพมิ่ เติมของแท็ก ซงึ่ แทก็ ส่วนใหญจ่ ะมี Attribute เชน่ แท็ก Order List มี Attribute ดงั น้ี  START : ใช้สาหรับกาหนดเลขรายการเร่มิ ต้นมลี กั ษณะการใช้คอื < OL START = \"เลขเรมิ่ ตน้ \">  TYPE : สามารถกาหนดค่าไดห้ ลายลักษณะดงั นี้  TYPE = \"1\" : (เทา่ กับเลขหนงึ่ ) จะทาใหไ้ ด้เลขรายการเปน็ ตัวเลข  TYPE = \"I\" : (เทา่ กับไอตวั ใหญ)่ จะทาใหไ้ ดเ้ ลขรายการเปน็ เลขโรมนั ตวั พมิ พใ์ หญ่  TYPE = \"i\" : (เท่ากบั ไอตวั เลก็ ) จะทาใหไ้ ด้เลขรายการเป็นเลขโรมันตวั พมิ พ์เล็ก  TYPE = \"A\" : (เทา่ กับเอตวั ใหญ)่ จะทาให้ไดเ้ ลขรายการเปน็ ตวั อักษรตัวพมิ พใ์ หญ่  TYPE = \"a\" : (เท่ากบั เอตวั เล็ก) จะทาใหไ้ ด้เลขรายการเปน็ ตวั อกั ษรตัวพมิ พ์เล็ก

11 การกาหนดรายการหัวข้อ ทัง้ นใี้ นตวั อยา่ งจะไม่ใส่แทก็ <HTML> <HEAD> <TITLE> <BODY> เพอ่ื ใหต้ ัวอย่างในส่วนคาสงั่ HTML สนั้ ลงและง่ายตอ่ การดู แต่ในการเขียนคาส่งั HTML จะตอ้ งใส่แทก็ ให้ครบตามโครงสรา้ งภาษา HTML ดังตัวอยา่ ง รูปแบบ <OL> <Li>ข้อความ </Li> </OL> <html> <head> <title>Unnumbered List</title> </head> <body> <p>List of Fruits:</p> <ol> <li>Apple</li> <li>Banana</li> <li>Mango</li> </ol> </body> </html>

12 การกาหนดรายการหัวข้อ Definition List Definition List เปน็ การบอกแสดงหัวข้อและคาจากัดความของหวั ขอ้ เหล่านน้ั โดย  <DL> เป็นตัวระบวุ ่ารายการต่างๆ ต่อไปนี้จะแสดงหัวข้อและคาจากัดความ  <DT> เป็นตัวระบุหวั ขอ้ ต่างๆ  <DD> เปน็ ตัวระบคุ าจากดั ความของหัวขอ้ นนั้ ๆ รูปแบบ <DL> <DT>หัวข้อ</DT> <DD>คาจากดั ความ</DD> </DL> <html> <head> <title>Definition List</title> </head> <body> <dl> <dt>HTML:</dt> <dd>HyperText Markup Language</dd> <dt>HTTP:</dt> <dd>HyperText Transfer Protocol</dd> <dt>WWW:</dt> <dd>World Wide Web</dd> </dl> </body> </html>

13 การกาหนดรายการหวั ข้อ บตั รกิจกรรมที่ 1 คาชีแ้ จง ให้นักเรยี นอธบิ ายความหมายของคาสัง่ ต่อไปนี้ลงในชอ่ งวา่ งใหถ้ ูกต้อง (10 คะแนน) 1. <dd>…</dd> หมายถงึ (1 คะแนน) ............................................................................................................................. .... .................................................................................................. ............................... 2. <li> หมายถึง (1 คะแนน) ............................................................................................................................. .... ............................................................................................................................. .... 3. <dir>…</dir> หมายถงึ (1 คะแนน) ................................................................................................................................. ............................................................................................................................. .... 4. <menu>…</menu> หมายถงึ (1 คะแนน) ............................................................................................................................. .... ................................................................................................................................. 5. การใชค้ าส่ัง <dir>…</dir> กบั <menu>…</menu> เหมือนหรือแตกต่างกนั อย่างไร (1 คะแนน) ............................................................................................................................. .... .................................................................................................. ............................... 6. <ol>…</ol> หมายถงึ (1 คะแนน) ............................................................................................................................. .... ............................................................................................................................. ....

14 การกาหนดรายการหัวข้อ 7. <ol start=\"1\">…</ol> หมายถึง (1 คะแนน) ................................................................................................................................. ............................................................................................................................. .... 8. <ol start=\"10\">…</ol> หมายถงึ (1 คะแนน) ............................................................................................................................. .... ................................................................................................................................. 9. <ol type= \"A\" start=\"3\">…</ol> หมายถงึ (1 คะแนน) ....................................................................................................... .......................... ............................................................................................................................. .... 10. <ol type= \"I\" start=\"2\">…</ol> หมายถึง (1 คะแนน) ............................................................................................................................. .... .................................................................................................. ...............................

15 การกาหนดรายการหัวข้อ บตั รกจิ กรรมท่ี 2 คาส่งั ให้นักเรียนสร้างเว็บ เปน็ รปู แบบบทความเกย่ี วกบั เนือ้ หาวิชาท่เี รียน เช่น วิชาภาษาไทย คณิตศาสตร์ วิทยาศาสตร์ ฯลฯ แล้วปรบั แตง่ รปู แบบตัวอกั ษร รายการหัวขอ้ ทเ่ี รยี นมาท้งั หมดให้สวยงาม พร้อมมีช่ือนกั เรยี น ช้นั เลขท่ี ในหนา้ ของ Web ดว้ ย (20 คะแนน) บนั ทกึ ชื่อไฟล์ : Ex05-เลขท่ชี อ่ื .html (Ex05-nattawut.html) ส่งงานมาท่ี E-mail: : https://classroom.google.com ส่งห้องเรียนของตนเอง พมิ พ์หัวข้อ สง่ งาน Ex5 ช่ือนักเรียน ชนั้ .. เลขท.่ี .

16 การกาหนดรายการหัวข้อ แบบทดสอบหลังเรียน เร่ือง การสร้างเว็บเพจดว้ ยภาษา HTML รายวิชาเทคโนโลยี 3 รหัสวิชา ง23102 ชั้นมธั ยมศึกษาปีที่ 3 กลมุ่ สาระการเรยี นรู้การงานอาชีพและเทคโนโลยี ชดุ ท่ี 5 เร่ือง การกาหนดรายการหวั ข้อ คาชแี้ จง นกั เรยี นเลอื กคาตอบที่ถูกต้องทสี่ ดุ เพียงคาตอบเดียว แล้วทาเครอื่ งหมาย  ลงในกระดาษคาตอบ (10 คะแนน) 1. ลักษณะทไ่ี ม่เหมือนกนั ของคาสั่ง <dir> และ <menu> คือข้อใด ก. แสดงรายการท่ีสัญลกั ษณท์ เี่ หมือนกัน ข. เป็นคาสง่ั ท่บี อกขอบเขตของรายการทัง้ หมด ค. เป็นคาส่งั ท่ีแสดงรายการแบบมสี ญั ลักษณ์นาหัวขอ้ ง. เปน็ คาสัง่ ทใ่ี ช้สาหรบั แสดงรายการท่ีมคี วามยาวมากกว่า 20 ตวั อักษร 2. หากตอ้ งการกาหนดหวั ข้อในรายการย่อยให้เปน็ ตัวเลขกากับ จะต้องใช้คาสงั่ ตรงกับข้อใด ก. คาสงั่ <OL> ข. คาสงั่ <LI> ค. คาสั่ง <UL> ง. คาสงั่ <NUM> 3. คาสง่ั ในข้อใดเป็นการกาหนดชนิดสญั ลักษณห์ นา้ ข้อความเป็นวงกลมทบึ แสง ก. <ol> <h> รายการที่ 1</ol> ข. <ul type= \"disc \"> <li> รายการที่ 1</ul> ค. <ul type= \"circle \"> <li> รายการท่ี 1</ul> ง. <ul type= \"square \"> <li> รายการที่ 1</ul>

17 การกาหนดรายการหวั ข้อ 4. ข้อใดกล่าวไม่ถูกต้องเก่ยี วกับ Ordered List ก. เปน็ การสรา้ งลิสตแ์ บบมีลาดบั ข. หากไมม่ ีการกาหนดชนิดของเลขลาดบั จะใชเ้ ลขโรมนั ค. ใช้แท็ก <OL> ในการสร้างรายการแบบ Ordered List ง. ชนดิ ของเลขลาดับทกี่ าหนดไดแ้ ก่ ตัวอักษร, เลขโรมนั และเลขอารบกิ 5. ข้อใดไม่ใช่ลกั ษณะของหวั ข้อย่อยท่อี ย่ภู ายใต้คาสง่ั <UL> ก. มลี กั ษณะเปน็ วงกลมทบึ แสง ข. มีลักษณะเปน็ วงกลมโปรง่ แสง ค. มีลักษณะเปน็ ส่ีเหลีย่ มทึบแสง ง. มลี กั ษณะเป็นตวั เลขหรือตัวอักษร 6. <dt> และ <dd> เปน็ คาสง่ั ในการสรา้ งลิสต์แบบใด ก. ลสิ ต์แบบมลี าดบั ข. ลิสต์แบบซ้อนกนั ค. ลิสตแ์ บบไม่มีลาดับ ง. ลิสตแ์ บบจากัดความ 7. ขอ้ ใดกล่าวไม่ถูกต้อง ก. คาส่ัง <dt> ใช้สาหรบั จัดยอ่ หน้าสาหรับหวั ขอ้ ข. คาสงั่ <dd> ใชส้ าหรับจดั ยอ่ หน้าสาหรับคาอธบิ าย ค. คาสง่ั <dl> ใช้สาหรับบอกขอบเขตของรายการท้ังหมด ง. คาสง่ั <li> ใช้สาหรับกาหนดรายการย่อยซ่งึ อยู่ภายใตค้ าสั่ง <h> 8. คาสงั่ <OL> กบั คาส่งั <UL> มีขอ้ แตกตา่ งกนั ในเร่ืองใด ก. สัญลักษณห์ น้าหัวขอ้ รายการย่อย ข. คาส่ัง <LI> อยู่ภายใตค้ าสั่งท้ังสอง ค. เป็นคาส่งั ที่ใชส้ าหรบั กาหนดรายการ ง. เปน็ คาส่งั ท่ีใชบ้ อกขอบเขตของข้อมูลรายการท้ังหมด

18 การกาหนดรายการหัวข้อ 9. หากต้องการกาหนดหวั ขอ้ ในรายการย่อยให้เปน็ ป่มุ กลม ๆ เล็ก ๆ จะต้องใช้คาสง่ั ตรงกับขอ้ ใด ก. คาส่งั <h> ข. คาส่งั <ul> ค. คาส่ัง <ol> ง. คาสัง่ <num> 10. ข้อใดกล่าวถูกต้องเกย่ี วกบั คาส่ัง <pre>…</pre> ก. เป็นคาส่ังภาษา HTML ที่มที ั้งป้ายระบุ (Tag) เปิดและปิด ข. เป็นคาสงั่ สาหรับกาหนดหวั ขอ้ รายการไดท้ ้ังแบบทเี่ ปน็ ตัวเลข และแบบที่เปน็ สญั ลักษณ์ ค. เปน็ คาสั่งสาหรบั กาหนดรูปแบบการแสดงผลใหเ้ หมอื นกับการจดั รูปแบบภายในเอกสาร HTML ทุกประการ ง. เป็นคาสง่ั สาหรบั ใชใ้ นการแสดงผลข้อความเย้ืองเข้าไปทางขวาและจดั ข้อความให้ตัวอักษร ตัวแรกของแต่ละบรรทดั เรมิ่ ท่ีตาแหนง่ เดยี วกนั

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

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

22 การกาหนดรายการหัวข้อ

23 การกาหนดรายการหวั ข้อ บตั รเฉลยกิจกรรมที่ 1 คาช้แี จง ใหน้ ักเรยี นอธิบายความหมายของคาสง่ั ต่อไปน้ีลงในชอ่ งว่างให้ถูกตอ้ ง (10 คะแนน) 1. <dd>…</dd> หมายถึง (1 คะแนน) ใช้บอกส่วนทเ่ี ปน็ รายละเอยี ดในรายการย่อยนั้น 2. <li> หมายถงึ (1 คะแนน) ใช้กาหนดหวั เร่ืองหรอื รายละเอียดของรายการย่อย ซ่ึงเม่ือรายการยอ่ ยเหลา่ นี้นาไปแสดง บนเบราว์เซอร์ ลาดับทีข่ องรายการจะถูกใสใ่ ห้กบั แต่ละรายการโดยอัตโนมัติ 3. <dir>…</dir> หมายถงึ (1 คะแนน) ใช้กาหนดการจดั วางข้อความ หรอื จดั แบ่งข้อความออกเป็นส่วนๆ มี Attribute ดังน้ี align = center, left , right เปน็ ตน้ 4. <menu>…</menu> หมายถึง (1 คะแนน) เป็นคาส่ังที่ใชส้ าหรับกาหนดรูปแบบรายการ แบบมีสัญลักษณ์ นาหวั ข้อ 5. การใช้คาสงั่ <dir>…</dir> กับ <menu>…</menu> เหมือนหรือแตกตา่ งกันอยา่ งไร (1 คะแนน) หมายถงึ <dir>…</dir> เปน็ คาสงั่ ท่ใี ชแ้ สดงรายการย่อยแบบไม่มตี วั เลข โดยใชส้ าหรับ แสดงรายการทคี่ วามยาวไม่เกนิ 20 ตัวอักษร <menu>…</menu> เปน็ คาสง่ั ทีใ่ ชส้ าหรบั กาหนดรูปแบบรายการ แบบมีสัญลักษณ์ นาหัวข้อ 6. <ol>…</ol> หมายถึง (1 คะแนน) ซึ่งยอ่ มาจาก Ordered List คอื ข้อมูลรายการแบบมหี มายเลข เรียงลาดบั จากน้อยไปหามาก กากับอยหู่ น้าแต่ละรายการ 7. <ol start=\"1\">…</ol> หมายถงึ (1 คะแนน) เปน็ การกาหนดวิธีแสดงรายการเปน็ ตัวเลข ต้องการกาหนดใหเ้ รม่ิ ตน้ โดยกาหนด เริ่มต้นท่ี 1

24 การกาหนดรายการหวั ข้อ 8. <ol start=\"10\">…</ol> หมายถงึ (1 คะแนน) เป็นการกาหนดวิธแี สดงรายการเปน็ ตัวเลข ท่ีต้องการกาหนดให้เริ่มต้น โดยกาหนดเรม่ิ ตน้ ที่ 10 9. <ol type= \"A\" start=\"3\">…</ol> หมายถึง (1 คะแนน) เปน็ การกาหนดวธิ ีแสดงรายการเปน็ ตวั อักษรพิมพใ์ หญ่ A, B, C…ทตี่ ้องการกาหนดให้เรม่ิ ตน้ โดยกาหนดเริ่มต้นที่ C 10. <ol type= \"I\" start=\"2\">…</ol> หมายถึง (1 คะแนน) เป็นการกาหนดวธิ แี สดงรายการเป็นเลขโรมนั ตัวพิมพ์ใหญ่ I, II, III…ท่ีต้องการกาหนดให้ เรม่ิ ตน้ โดยกาหนดเริม่ ตน้ ที่ II

25 การกาหนดรายการหัวข้อ บตั รกิจกรรมที่ 2 คาสั่ง ให้นกั เรียนสรา้ งเวบ็ เป็นรปู แบบบทความเกย่ี วกบั เน้อื หาวิชาท่ีเรยี น เชน่ วชิ าภาษาไทย คณิตศาสตร์ วทิ ยาศาสตร์ ฯลฯ แล้วปรับแตง่ รูปแบบตวั อักษร รายการหัวข้อที่เรียนมาท้งั หมดให้สวยงาม พรอ้ มมีช่ือนกั เรยี น ชั้น เลขท่ี ในหน้า ของ Web ดว้ ย (20 คะแนน) บนั ทกึ ช่อื ไฟล์ : Ex05-เลขท่ีชอ่ื .html (Ex05-nattawut.html) ส่งงานมาท่ี E-mail: : https://classroom.google.com สง่ หอ้ งเรยี นของตนเอง พมิ พ์หัวข้อ ส่งงาน Ex5 ชอ่ื นักเรยี น ชนั้ .. เลขท่ี.. แนวคาตอบ บตั รเฉลยกิจกรรมท่ี 2 (ตัวอยา่ งผลงานนักเรยี น)

26 การกาหนดรายการหัวข้อ

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

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

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