แผนการสอนวิชาการพัฒนาเว็บด้วยภาษาเอชทีเอ็มแอล

40 5.2 ขัน้ ดำเนินการสอน (จำนวน 30 นาท)ี 5.2.1 ผสู อนอธบิ ายหลกั การและกฎเกณฑของการจัดวางเนือ้ หาบนเว็บ 5.2.2 ผสู อนยกตวั อยางคำศัพททีเ่ ก่ียวขอ งกับการจดั วางเนอ้ื หาบนเว็บ 5.2.3 ผเู รยี นแบง กลุมศกึ ษาและรายงานเรอ่ื งการจัดวางเน้อื หาบนเว็บ 5.2.4 ผูเรียนศึกษาจากแหลงการเรียนรูที่ผูสอนแนะนำ เชน เอกสารประกอบการเรียน เว็บไซตทีผ่ สู อนแนะนำ 5.2.5 ผูสอนสังเกตพฤติกรรมการเรียนรูของผูเรียนรายบุคคลและกระบวนการทำงานกลุม และอำนวยความสะดวก ใหค ำแนะนำ สนบั สนนุ ทรพั ยากรการเรียนรู 5.2.6 ผูสอนตรวจสอบการทำกิจกรรมตรวจสอบความเขาใจ แลวทบทวนในสวน ทผี่ เู รยี นทำผดิ มาก หรือตอบไมไ ด 5.2.7 ผเู รยี นรายงานผลงานกลมุ 5.2.8 ผูสอนและผูเรียนกลุมที่ไมไดรายงานประเมินผลการรายงานของเพื่อน แจงผลการประเมิน และใหขอ เสนอแนะตางๆ 5.3 ขนั้ ประกอบกิจกรรม (จำนวน 30 นาท)ี 5.3.1 ผูเรียนทำแบบทดสอบเพ่ือประเมนิ ผลหลังการเรยี นรใู นเอกสารประกอบการเรียน 5.3.2 ผเู รยี นทำกจิ กรรมใบงานเพ่อื ประเมนิ ผลหลังการเรียนรู 5.4 ขนั้ สรปุ (จำนวน 30 นาท)ี 5.4.1 ตวั แทนผเู รียนแตละกลุม สรปุ เนอ้ื หาประจำหนวยการเรียน 5.4.2 ผสู อนเฉลยแบบทดสอบเพอื่ ประเมนิ ผลหลงั การเรียนรู สรุปคะแนนของผูเรยี นแตล ะ 5.4.3 ผูสอนตรวจสอบความเขาใจของผูเรียนโดยวิธีตางๆ เชน สุมสอบถามรายบุคคล และ มอบหมายงานในการศกึ ษาคน ควา เพมิ่ เตมิ เก่ยี วกับการจัดวางเน้อื หาบนเว็บ 6. ส่ือและแหลง การเรียนรู 6.1 สอื่ E-BOOK วิชาการพฒั นาเว็บดว ยภาษาเอชทีเอ็มแอล 6.๒ PowerPoint 6.๓ เวบ็ ไซตป ระเภท e-learning ท่ีเสริมการเรียนรู เชน 6.๓.1 http://www.learnsquare.com 6.๓.2 http://www.thaicyberu.go.th 6.๔ Google Classroom 6.๕ Google Site 6.๖ Youtube 6.๗ Google Froms 7. การวดั และประเมินผล ๗.๑ วิธีการวดั ผลประเมนิ ผล 7.1.๑ สังเกตผูเรียนมีความสนใจ เกิดความเขาใจในสาระการเรียนรู ตลอดจนแสดงความ กระตอื รือรน ในการแสดงความคิดเห็นและสรปุ สาระการเรียนรูประจำหนวย 7.1.๒ สังเกตการทำรายงานกลุมและการนำเสนอ 7.1.๓ กจิ กรรมใบงานทา ยหนว ยการเรยี นรู

41 7.1.๔ แบบทดสอบเพอื่ ประเมนิ ผลหลังการเรียนรู ๗.๒ เครอ่ื งมือในการวัดผลและประเมนิ ผล 7.2.๑ แบบประเมินผลการปฏบิ ัติงาน ใบงาน 7.2.๒ แบบทดสอบหลงั เรยี น ๗.๓ เกณฑก ารวัดและประเมิน 7.1.1 แบบฝกหัดใบงาน เกณฑผ า น ๖๐ % ขึ้นไป 7.1.2 แบบทดสอบหลังเรยี น เกณฑผ าน ๖๐ % ขนึ้ ไป 7.1.3 แบบประเมินการทำรายงานกลมุ และการนำเสนอ เกณฑผา น ๖๐ % ข้ึนไป 7.1.4 แบบประเมินคุณธรรม จรยิ ธรรม คา นยิ ม และคณุ ลักษณะอันพึงประสงค คะแนน ขึ้นอยกู ับการประเมินตามสภาพจรงิ ๘. กิจกรรมเสนอแนะ /งานมอบหมาย (ถาม)ี 8.1 กิจกรรมเสนอแนะ ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………. 8.2 งานมอบหมาย 8.๑.1 ใบงานทายหนวยการเรยี นรู 8.๑.๒ กจิ กรรมงานกลมุ 8.๑.๓ แบบทดสอบหลงั เรียน ๙. เอกสารอางอิง /บรรณานุกรมประจำหนวย (หนังสือตำราหรือเอกสารประกอบการเรียนการสอบใน หนว ยนน้ั ๆ หรอื สื่อและแหลงการเรยี นรูในกรณคี น ควาเพมิ่ เติม) 9.1 สื่อ E-BOOK วิชาการพฒั นาเวบ็ ดวยภาษาเอชทีเอ็มแอล 9.๒ PowerPoint 9.๓ Google Classroom 9.๔ Google Site 9.๕ Youtube 9.๖ Google Froms

42 ๑๐. บันทึกหลังการจัดการเรียนรู 10.๑ ผลการใชแ ผนการจดั การเรยี นรู ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… 10.๒ ปญหาและอปุ สรรค ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………....… 10.๓ แนวทางแกไ ข ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… 10.๔ ขอเสนอแนะ ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ลงช่อื ….…………….....…………... ลงช่ือ……..……………………. ลงชื่อ…………………………… ( นางสาวกฤตพร ขา มสาม) ( นางสาวสรยี า สมยั ) (นายศักด์ิดา สิมเสมอ) ครผู สู อน หัวหนา แผนก รองผอู ำนวยการฝายวิชาการ

43 แบบทดสอบหลงั เรียนท่ี 3.1 รหสั วชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพัฒนาเวบ็ ดวยภาษาเอชทเี อ็มแอล ท 1 ป 2 น 3 หนวยท่ี ๓ ชือ่ เร่อื ง/ การจดั วางเนอ้ื หาบนเว็บ เวลา ๓ ชม. ตอนท่ี ๑ จงทำเครื่องหมายวงกลม ในหวั ขอ ทีถ่ ูกที่สดุ เพยี งขอ เดียว 1. ขอ ใดเปน แท็กสำหรับการขน้ึ บรรทดั ใหม? ก. <br /> ข. <br>...</br> ค. <nobr> ง. ถูกทั้งขอ ก. และ ข. 2. ขอใดเปน แท็กสำหรับการจดั ขอ ความแบบเปนยอหนา ? ก. <p /> ข. <p> ค. <br> ง. <pre> 3. ขอ ใดเปน การจดั หนาเว็บเพจโดยใหขอ ความแสดงเหมือนตามท่เี รากำหนดไว? ก. <br> ข. <p> ค. <nobr> ง. <pre> 4. ขอใดเปนการตัดคำเฉพาะจดุ เพอ่ื ชวยใหบ ราวเซอรตดั คำไดดขี ึน้ ก. <br> ข. <nobr> ค. <wbr> ง. <p> 5. ขอ ใดไมใ ชแอททรบิ วิ ทท ่ีใชใ นการกำหนดคณุ สมบัติของเสน คนั่ ? ก. width ข. nobr ค. noshade ง. align 6. ขอใดคอื การใชแท็ก <hr> แสดงเสนค่นั แนวนอนยาว 30% ของความกวางหนา จอ ? ก. <hr=\"30%\" /> ข. <30%:hr /> ค. <hr width=\"30%\" /> ง. <width=\"30%\":HR /> 7. ขอ ใดคือแอททริบวิ ทท ่ีใชในการจดั ตำแหนงเสน คั่น ? ก. noshade ข. nobr ค. size ง. align 8. แท็กใดทไี่ มม ีใชใ น XHTML ? ข. br ก. p ง. ถกู ทุกขอ ค. wbr

44 9. ขอ ใดกลา วถูกตอ ง ? ก. แทก็ br ใน XHTML คอื <br/> ข. แท็ก br ใน HTML คอื <br/> ค. แทก็ br ใน HTML คือ </br> ง. แทก็ br ใน XHTML คอื <br /> 10. ขอ ใดคือรปู แบบของการเพิม่ หมายเหตเุ ตอื นความจำ? ก. <!--หมายเหตุ--> ข. <!--หมายเหตุ--!> ข. //หมายเหตุ ง. /*หมายเหตุ*/

45 แบบทดสอบหลงั เรียนท่ี ๓.๒ รหสั วชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพัฒนาเวบ็ ดวยภาษาเอชทเี อ็มแอล ท 1 ป 2 น 3 หนว ยท่ี ๓ ชอื่ เรอื่ ง/ การจดั วางเน้อื หาบนเวบ็ เวลา ๓ ชม. ตอนที่ 2 จงใสเ ครอ่ื งหมาย หนาขอความทถี่ กู และใสเครอ่ื งหมาย หนาขอ ความท่ีผิด .......................1. แทก็ <br> เปน การตัดคำขนึ้ บรรทัดใหม .......................2. การเขยี นแทก็ <p> ตองอยูในแท็ก <body>...</body> เสมอ .......................3. center เปนอีกแท็กหนึ่งท่ีใชในการจัดวางตำแหนง เน้อื หาในเวบ็ เพจ จัดวางไดท้งั ขอความ และรปู ภาพ .......................4. <hr size =\"30\" /> เปน การกำหนดความยาวของเสน คนั่ ของ XHTML ...................5. align กำหนดตำแหนง ของเสนใหอยู center (ก่ึงกลาง), left (ชดิ ซา ย) และ right (ชิดขวา) ......................6. <hr noshade=\"noshade\" width=\"200\" size=\"6\" /> เปนรูปแบบใน HTML4 .......................7. การทำใหความยาวของเสน ค่นั มีสดั สว นท่ีพอดีกับหนาจอของบราวเซอรสามารถทำ ไดโดยการกำหนดความยาวใหเ ปน พิกเซล .......................8. <hr align=\"right\" /> เปน การจัดตำแหนงเสนค่นั ใหอ ยูชดิ ขวา .......................9. <pre> เปนการกำหนดจดุ ใหบราวเซอรต ดั คำ .....................10. การใชเ สนคั่นทางแนวนอน (Horizontal Rule) จะชวยแบงเนื้อหาออกเปน สวนๆ ทำใหอ านไดงา ย

46 แบบทดสอบหลงั เรียนท่ี ๓.๓ รหสั วิชา ๒๐๙๐๑ – ๒๐๐๔ รายวิชาการพฒั นาเวบ็ ดว ยภาษาเอชทีเอม็ แอล ท 1 ป 2 น 3 หนว ยที่ ๓ ชือ่ เรือ่ ง/ การจดั วางเนือ้ หาบนเวบ็ เวลา ๓ ชม. ตอนท่ี 3 จงตอบคำถามตอไปนี้ 1. จงเขียน HTML ทีม่ ีการจัดวางตำแหนงขอ ความใหอ ยูก่ึงกลางหนา .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. 2. จงเขยี น HTML กำหนดความยาว และความหนาของเสน คั่น .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. 3. จงบอกความสำคัญของแท็กหมายเหตุ วาทำไมเราจึงควรใสแ ทก็ นไ้ี วเสม .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. ..............................................................................................................................................................................

คำศัพท/คำนิยาม แบบประเมนิ ผลดานพ ขั้นตอน/วิ ีธการป ิฏบั ิตรหสั วชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวิชาการพัฒน การคิดรวมยอดในเ ้นือเ ื่รอง การแปลความ/ ีตความหมายหนว ยที่ ๓ ชื่อเรอ่ื ง/ การจัดวา การขยายความ รายการประเมนิ ความรูค วามจำ ความเขา ใจ ที่ ชื่อ-สกลุ หมายเหตุ การใหคะแนน ๑ = ปรับปรุง, ๒ = พอใช, ๓ = ดี

การนำความรู ความเขา ใจ 47 การนำวธิ ีการไปแกไ ขปญหา การแกไ ขปญหาเฉพาะหนา พทุ ธพสิ ยั (ภาคทฤษฏี) วิเคราะหตามความสำคญั นาเวบ็ ดว ยภาษาเอชทีเอ็มแอล ท 1 ป 2 น 3 วิเคราะหต ามความสำพันธ างเนือ้ หาบนเวบ็ เวลา ๓ ชม. วเิ คราะหตามหลกั การปฏิบตั ิ การวางแผน/การออกแบบ การนำไปใช การวิเคราะห การสงั เคราะห การประเมนิ คา การนำสง่ิ ทเ่ี รียนรูมาผสมผสานสรางสรรคส ง่ิ ใหม รวม (30) การตดั สนิ ใจจากขอเทจ็ จริง ตัดสินใจจากเกณฑก ารยอมรบั ของสังคม

แบบประเมนิ ผลดา นจ รหัสวชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพฒั น หนวยท่ี ๓ ช่ือเรอ่ื ง/ การจดั วา รายการประเมิน ลำดับท่ี ชื่อ-สกลุ หมายเหตุ การใหค ะแนน ๑ = ปรับปรงุ , ๒ = พอใช, (รายละเอียดของการประเมนิ สามารถปรับขอ ความใหเ หมาะสมกับรา

มีวินัย 48 รับผิดชอบจติ พิสัย (ภาคทฤษฏี) ซ่ือสัตยสุจริตนาเวบ็ ดวยภาษาเอชทเี อม็ แอล ท 1 ป 2 น 3 สามัคคีางเน้ือหาบนเว็บ เวลา ๓ ชม. ขยัน ประหยัด๓ = ดี จิตอาสาายวิชา) สะอาด สุภาพ ละเวนอบายมุข รวม

แบบประเมินผลคุณ รหัสวชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวิชาการพฒั น หนว ยท่ี ๓ ช่อื เรื่อง/ การจัดวา การประเมินคณุ ภาพของงาน ท่ี รายช่ือ คณะทำงาน ความรับผิดชอบตอหนาที่ ขั้นตอนการทำงาน เวลา ความรวมมือในการทำงาน รวม หมายเหตุ เกณฑก ารใหค ะแนนการประเมินการทำงานเปนกลุม เกณฑการตดั สนิ คุณภ ชวงคะแนน ระด พฤตกิ รรม/ผลงาน อยใู นเกณฑดี ได ๓ คะแนน ๒๑ – ๓๐ = ดี ๑๑ – ๒๐ = พอ พฤติกรรม/ผลงาน อยใู นเกณฑป านกลาง ได ๒ คะแนน ๐ – ๑๐ = ตอ พฤติกรรม/ผลงาน อยูในเกณฑพ อใช ได ๑ คะแนน พฤตกิ รรม/ผลงาน อยใู นเกณฑปรับปรุง ได ๐ คะแนน

49 ณภาพผลงานกลุม นาเวบ็ ดว ยภาษาเอชทเี อม็ แอล ท 1 ป 2 น 3 างเนื้อหาบนเวบ็ เวลา ๓ ชม. การประเมนิ การทำงานเปน กลมุ มีการมอบหมายหนาท่ี มีการวางแผน มีการชวยเหลือกันและกันในกลุม ความคิดเห็นผูอื่น ใชหลักประชาธิปไตย ผลงานเสร็จทันตามกำหนดเวลา ความถูกตองของผลงาน ความรู ความเขาใจในการทำงาน อธิบายและตอบคำถาม การจัดเก็บวัสดุ อุปกรณ เรียบรอย รวม รวมทั้งสิ้น ภาพ ความรว มมือในการทำงาน ๔ คะแนน ดบั คุณภาพ ทุกคนมีสว นรวมและใหค วามรวมมืออยางเต็มที่ ๓ คะแนน 80% ของกลุมทม่ี ีสว นรว มและใหความรว มมืออยางเต็มท่ี ๒ คะแนน อใช ๖0% ของกลมุ ทม่ี สี วนรวมและใหค วามรวมมืออยา งเต็มท่ี ๑ คะแนน องปรับปรุง ๔0% ของกลมุ ทมี่ สี ว นรวมและใหค วามรวมมืออยางเต็มท่ี

50 แผนการจดั การเรียนรู รหสั วชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวิชาการพัฒนาเว็บดวยภาษาเอชทีเอ็มแอล ท 1 ป 2 น 3 หนว ยท่ี ๔ ช่อื เรอื่ ง/ การจดั การขอความ เวลา ๓ ชม. ๑. หัวขอเร่ือง การจดั การขอความ ๒. สาระสำคญั ขอความในเว็บเพจ จะดูนาสนใจ จูงใจใหผูใชเขามาอาน โดยการตกแตงดวยแท็กตางๆ ในภาษา HTML เชน รูปแบบของตวั อกั ษร สีของตัวอักษร สีพื้นของเว็บเพจ ตวั อกั ษรเคล่อื นไหว 3. จุดประสงคเชิงพฤตกิ รรม 3.1 ดา นความรู (K) 1. มคี วามรูเกย่ี วกบั การกำหนดรูปแบบขอความทเี่ ปนหวั เรอ่ื ง 2. มคี วามรเู ก่ียวกับการกำหนดลักษณะตัวอักษร 3. มคี วามรูเก่ยี วกบั ปรบั เปลยี่ นขนาดตัวอกั ษร 4. มคี วามรเู กี่ยวกับการกำหนดแบบตวั อักษร ๕. มีความรเู กี่ยวกบั การใชสีในเว็บเพจ ๖. มคี วามรูเกย่ี วกับการกำหนดสพี ื้นและสีตวั อกั ษร 3.2 ดา นทักษะ (S) 1. มีทกั ษะเกย่ี วกับการกำหนดรปู แบบขอ ความทเ่ี ปน หัวเรื่อง 2. มีทกั ษะเก่ียวกบั การกำหนดลกั ษณะตวั อักษร 3. มที ักษะเกี่ยวกับการปรบั เปลย่ี นขนาดตัวอกั ษร 4. มีทกั ษะเกย่ี วกับการกำหนดแบบตัวอกั ษร ๕. มีทกั ษะเก่ียวกับการใชสีในเวบ็ เพจ ๖. มีทักษะเกย่ี วกับการกำหนดสพี นื้ และสีตวั อักษร 3.3 ดานเจตคตแิ ละคุณลกั ษณะอนั พงึ ประสงค (A) 1 พฒั นาลกั ษณะนิสัย แสดงพฤตกิ รรม และมีคุณธรรม จริยธรรมทดี่ ตี อ การปฏิบัติงาน 4. สาระการเรยี นรู ๑. กำหนดรปู แบบขอความท่เี ปน หวั เรอ่ื ง ๒. กำหนดลกั ษณะตัวอักษร ๓. ปรับเปลีย่ นขนาดตัวอักษร ๔. การกำหนดแบบตวั อักษร ๕. การใชส ีในเว็บเพจ ๖. กำหนดสพี ื้นและสีตัวอกั ษร 5. กิจกรรมการเรียนรู (เนนผูเรียนเปนสำคญั ดวยวิธกี ารสอน เทคนคิ การสอน กระบวนการสอนที่ หลากหลายเหมาะสมกับรายวิชา) (จำนวน ๓ ชม.) 5.1 ขั้นนำเขาสูบทเรยี น (จำนวน 30 นาท)ี 5.1.1 ผูสอนทบทวนเนื้อหาโดยการสอบถามถึงวิชาที่ผูเรียนเคยเรียน หรือประสบการณ ทีผ่ ูเรียนรเู กี่ยวกับการจดั การขอความ 5.1.2 ผูเรยี นยกตวั อยา งเกีย่ วกับการพฒั นาเว็บดวยภาษาเอชทีเอม็ แอล

51 5.1.3 ผูสอนกลาวถึงการเรียนรูเกี่ยวกับขอความในเว็บเพจ จะดูนาสนใจ จูงใจใหผูใชเขามา อาน โดยการตกแตงดวยแท็กตางๆ ในภาษา HTML เชน รูปแบบของตัวอักษร สีของตัวอักษร สีพื้นของเว็บ เพจ ตวั อกั ษรเคลอื่ นไหว 5.2 ข้ันดำเนนิ การสอน (จำนวน 1 ชม.) 5.2.1 ผสู อนอธิบายหลกั การและกฎเกณฑของการจดั การขอความ 5.2.2 ผูสอนยกตัวอยางคำศพั ทที่เกยี่ วของกับลกั ษณะตวั อักษร 5.2.3 ผูเรยี นแบงกลุมศกึ ษาและรายงานเรอ่ื งการจัดการขอ ความ 5.2.4 ผเู รยี นศึกษาจากแหลง การเรยี นรทู ่ผี ูสอนแนะนำ เชน เอกสารประกอบการเรียน เวบ็ ไซตท่ผี สู อนแนะนำ 5.2.5 ผูสอนสังเกตพฤติกรรมการเรยี นรขู องผเู รียนรายบุคคลและกระบวนการทำงานกลมุ และอำนวยความสะดวก ใหค ำแนะนำ สนบั สนนุ ทรัพยากรการเรียนรู 5.2.6 ผสู อนตรวจสอบการทำกิจกรรมตรวจสอบความเขาใจ แลว ทบทวนในสวนทีผ่ เู รยี นทำ ผิดมาก หรอื ตอบไมไ ด 5.2.7 ผูเรยี นรายงานผลงานกลุม 5.2.8 ผสู อนและผเู รียนกลุมทไี่ มไ ดรายงานประเมินผลการรายงานของเพอื่ น แจงผลการ ประเมนิ และใหข อ เสนอแนะตางๆ 5.3 ข้นั ประกอบกิจกรรม (จำนวน 2 ชม.) 5.3.1 ผูเ รียนทำแบบทดสอบเพอื่ ประเมินผลหลังการเรยี นรใู นเอกสารประกอบการเรียน 5.3.2 ผเู รียนทำกิจกรรมใบงานเพอ่ื ประเมินผลหลงั การเรียนรู 5.4 ขนั้ สรปุ (จำนวน 30 นาท)ี 5.4.1 ตัวแทนผูเ รยี นแตละกลุมสรปุ เนื้อหาประจำหนวยการเรยี น 5.4.2 ผูสอนเฉลยแบบทดสอบเพื่อประเมินผลหลังการเรียนรู สรุปคะแนนของผูเรียน แตล ะคน 5.4.3 ผสู อนตรวจสอบความเขาใจของผูเรียนโดยวิธตี า งๆ เชน สุมสอบถามรายบุคคล และ มอบหมายงานในการศึกษาคนควา เพ่มิ เตมิ เกย่ี วกบั การจัดการขอความ 6. สือ่ และแหลงการเรียนรู 6.1 สื่อ E-BOOK วิชาการพฒั นาเว็บดวยภาษาเอชทเี อม็ แอล 6.๒ PowerPoint 6.๓ เว็บไซตประเภท e-learning ที่เสรมิ การเรียนรู เชน 6.3.1 http://www.learnsquare.com 6.3.2 http://www.thaicyberu.go.th 6.๔ Google Classroom 6.๕ Google Site 6.๖ Youtube 6.๗ Google Froms

52 7. การวัดและประเมินผล ๗.๑ วิธีการวัดผลประเมนิ ผล ๗.๑.๑ สังเกตผูเรียนมีความสนใจ เกิดความเขาใจในสาระการเรียนรู ตลอดจนแสดงความ กระตอื รือรน ในการแสดงความคดิ เห็นและสรปุ สาระการเรียนรูประจำหนวย ๗.๑.๒ สงั เกตการทำรายงานกลุมและการนำเสนอ ๗.๑.๓ กิจกรรมใบงานทายหนว ยการเรียนรู ๗.๑.๔ แบบทดสอบเพอื่ ประเมินผลหลังการเรียนรู ๗.๒ เครอื่ งมอื ในการวัดผลและประเมนิ ผล ๗.2.๑ แบบประเมนิ ผลการปฏบิ ัตงิ าน ใบงาน ๗.2.๒ แบบทดสอบหลงั เรียน ๗.๓ เกณฑก ารวดั และประเมิน ๗.3.1 แบบฝกหัดใบงาน เกณฑผา น ๖๐ % ขึน้ ไป ๗.3.2 แบบทดสอบหลงั เรียน เกณฑผ า น ๖๐ % ขึ้นไป ๗.3.3 แบบประเมินการทำรายงานกลุม และการนำเสนอ เกณฑผ าน ๖๐ % ขนึ้ ไป ๗.3.4 แบบประเมนิ คุณธรรม จรยิ ธรรม คานิยม และคณุ ลกั ษณะอันพงึ ประสงค คะแนน ขน้ึ อยกู ับการประเมนิ ตามสภาพจรงิ ๘. กิจกรรมเสนอแนะ /งานมอบหมาย (ถามี) 8.1 กจิ กรรมเสนอแนะ ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………. 8.2 งานมอบหมาย 8.2.๑ ใบงานทายหนวยการเรยี นรู 8.2.๒ กจิ กรรมงานกลมุ 8.2.๓ แบบทดสอบหลงั เรยี น ๙. เอกสารอางอิง /บรรณานุกรมประจำหนวย (หนังสือตำราหรือเอกสารประกอบการเรียนการสอบใน หนว ยน้นั ๆ หรือสอื่ และแหลงการเรยี นรูในกรณีคน ควา เพม่ิ เติม) 9.1 สือ่ E-BOOK วิชาการพัฒนาเวบ็ ดว ยภาษาเอชทีเอ็มแอล 9.๒ PowerPoint 9.๓ Google Classroom 9.๔ Google Site 9.๕ Youtube 9.๖ Google Froms

53 ๑๐. บันทึกหลังการจัดการเรียนรู 10.๑ ผลการใชแ ผนการจดั การเรยี นรู ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… 10.๒ ปญหาและอปุ สรรค ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………....… 10.๓ แนวทางแกไ ข ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… 10.๔ ขอเสนอแนะ ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ลงช่อื ….…………….....…………... ลงช่ือ……..……………………. ลงช่อื …………………………… ( นางสาวกฤตพร ขา มสาม) ( นางสาวสรยี า สมยั ) (นายศกั ด์ิดา สิมเสมอ) ครผู สู อน หัวหนา แผนก รองผอู ำนวยการฝา ยวิชาการ

54 แบบทดสอบหลงั เรยี นที่ ๔.1 รหสั วชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวิชาการพัฒนาเว็บดว ยภาษาเอชทเี อ็มแอล ท 1 ป 2 น 3 หนวยที่ ๔ ชอ่ื เรื่อง/ การจดั การขอความ เวลา ๓ ชม. ตอนท่ี ๑ จงทำเคร่ืองหมายวงกลม ในหวั ขอทถ่ี ูกที่สุดเพียงขอเดียว 1. ขอใดกลา วไมถ กู ตองเกย่ี วกบั การใชแ ทก็ <hn> ? ก. รูปแบบของแท็กทใี่ ช <hn>....</hn> ข. n ทใี่ ชม ีคา ต้งั แต 1 ถงึ 6 ค. <h6> จะมตี วั อักษรใหญทีส่ ดุ ใชกบั ขอความหลัก ง. แบง ขอความโดยการใชหัวเร่ืองทม่ี ีขนาดตางกัน 2. ขอ ใดไมถ ูกตอ งเกยี่ วกบั การกำหนดตัวอกั ษรแบบ Physical ? ก. กำหนดรปู แบบตวั อกั ษรขอความได เชน ตัวหนา ตวั เอน ข. กำหนดรูปแบบของตัวอกั ษรตามลักษณะขอ ความ ค. ไมเปล่ยี นแปลงแมบ ราวเซอรทีใ่ ชเปด ดแู ตกตางกนั ง. ขอ ข, ค ถกู ตอ ง 3. ขอ ใดไมใชแทก็ การกำหนดลักษณะตวั อักษรแบบ Logical ? ก. <strong>..</strong> ข. <xmp>...</xmp> ค. <var>..</var> ง. ^... 4. ขอใดคือการกำหนดสขี อความเปนสเี ขยี ว ? ก. font color=\"ff0000\" ข. font color=\"00ff00\" ค. font color=\"0000ff\" ง. font color=\"pink\" 5. ขอ ใดใชก ำหนดรปู แบบใหก บั ขอความท่ีเปนนยิ าม ? ก. Strong ข. Citations ค. Definition ง. Sample

55 6. ขอ ใดใชก ำหนดรูปแบบใหก บั ขอ ความทเ่ี ปน ตวั อยาง ? ก. Strong ข. Citations ค. Definition ง. Sample 7. ขอใดกลา วถูกตอ งเกย่ี วกบั การเปลีย่ นขนาดของตัวอักษร ? ก. รูปแบบแทก็ <font size=\"n\">....</font> ข. รปู แบบแท็ก <font size= \"+/-ขนาด\"> ขอ ความ </font> ค. ขนาดของตวั อกั ษร คือ 1 ถงึ 7 ง. ถูกทกุ ขอ 8. ขอใดคือความหมายของการใชรูปแบบของคำส่ัง <font face =\"ชอื่ ฟอนต1 , ชื่อฟอนต2 , ...\"> ขอความ </font> ในการกำหนดรูปแบบ ตัวอกั ษร ? ก. สมุ ใชฟ อนตที่ระบเุ พอื่ ความหลากหลาย ข. เมอ่ื ไมมีฟอนตตัวท่ี 1 กจ็ ะไปใชฟอนตตวั ท่ี 2 และตวั ตอ ไปแทน ค. เรียงฟอนตตามลำดับขอความ ฟอนตต วั แรกคอื หวั เร่อื ง ง. ถูกทุกขอ 9. ขอใดกลาวไมถกู ตองเก่ียวกบั การใสสตี ัวอกั ษรในเวบ็ เพจ ? ก. สามารถกำหนดสีได 2 รูปแบบคือกำหนดจากรหสั สีและช่ือสี ข. แอททรบิ ิวท text ใชในการกำหนดสตี ัวอักษร, ใสใ นแทก็ font ค. แอททรบิ วิ ท color ใชในการกำหนดสตี ัวอักษร, ใสใ นแท็ก font ง. ไมมขี อ ถูก 10. ขอ ใดกลา วไมถ กู ตอง ? ก. สใี นคอมพวิ เตอรเกิดจากแมส ี RGB สามสี ข. เราสามารถดคู า สไี ดจ ากโปรแกรม Print ค. คา รหสั สีเลขฐานสบิ หกตองมี 6 หลกั เสมอจงึ จะใหผลถูกตอง ง. เราสามารถเลือกใชค า \"#0000ff\" หรอื \"blue\" กไ็ ด

56 แบบทดสอบหลังเรียนท่ี ๔.๒ รหสั วิชา ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพัฒนาเว็บดว ยภาษาเอชทีเอ็มแอล ท 1 ป 2 น 3 หนวยที่ ๔ ชอ่ื เร่ือง/ การจัดการขอ ความ เวลา ๓ ชม. ตอนที่ 2 จงใสเคร่อื งหมาย หนา ขอ ความท่ถี กู และใสเ ครื่องหมาย หนา ขอ ความที่ผดิ .......................1. <h1> จะมีขนาดตัวอักษรใหญที่สุดและถูกใชกับขอความหลักจะมีขนาดโดยปกติ 24 พอยต สวน <h6> จะมขี นาดโดยปกติ 8 พอยต .......................2. การกำหนดลักษณะตัวอักษรในเวบ็ เพจนั้น มอี ยู 1 วธิ ี คอื แบบ Physical เปนการกำหนด รูปแบบตัวอักษรอยางเจาะจง .......................3. Superscript คือ การกำหนดตัวอกั ษรหอ ย .......................4. คอื การใชแ ทก็ Delete (ขดี ฆา ) <del>...</del> ...................5. <u> เปน การกำหนดตวั อกั ษรการขดี ฆา ......................6. Emphasis ใชเนนขอความคำพูดหรอื วลี .......................7. <dfn>..</dfn> เปนรปู แบบแท็กทีแ่ สดงขอ ความทีเ่ ปนคำนิยาม .......................8. ตัวอักษรขนาด size=\"7\" จะมีขนาดเลก็ สดุ .......................9. สีในคอมพิวเตอรเ กดิ ขึ้นจากการผสมคาสโี หมด RGB ซ่ึงประกอบดวยสี 3 สี คอื Red (แดง) Green (เขยี ว) และ Blue (น้ำเงิน) .....................10. <body bgcolor=\"lightgreen\" text=\"#0000ff\">แท็กแสดงการกำหนดสีพื้นของเว็บเพจ และการกำหนดสตี ัวอักษร

57 แบบทดสอบหลงั เรยี นท่ี ๔.๓ รหัสวชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพัฒนาเวบ็ ดว ยภาษาเอชทเี อม็ แอล ท 1 ป 2 น 3 หนวยที่ ๔ ชอื่ เรือ่ ง/ การจัดการขอความ เวลา ๓ ชม. ตอนท่ี 3 จงตอบคำถามตอไปน้ี 1. จงเขยี นแท็กกำหนดลกั ษณะตัวอักษรมา 5 แทก็ .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. 2. จงเขยี น HTML กำหนดขนาดของตัวอักษร .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. 3. ในการหาคาสใี น HTML มขี อ ควรระวังอะไรบา ง .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. ..............................................................................................................................................................................

คำศัพท/คำนิยาม แบบประเมินผลดานพ ขั้นตอน/วิ ีธการป ิฏบั ิตรหัสวชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพฒั น การคิดรวมยอดในเ ้นือเ ืร่อง การแปลความ/ ีตความหมายหนว ยที่ ๔ ชื่อเรื่อง/ การจดั การขยายความ รายการประเมิน ความรูความจำ ความเขา ใจ ท่ี ชือ่ -สกุล หมายเหตุ การใหค ะแนน ๑ = ปรบั ปรุง, ๒ = พอใช, ๓ = ดี

การนำความรู ความเขา ใจ 58 การนำวิธีการไปแกไขปญหา การแกไขปญ หาเฉพาะหนา พทุ ธพิสยั (ภาคทฤษฏ)ี วิเคราะหต ามความสำคญั นาเวบ็ ดวยภาษาเอชทีเอม็ แอล ท 1 ป 2 น 3 วเิ คราะหต ามความสำพันธ ดการขอ ความ เวลา ๓ ชม. วเิ คราะหต ามหลักการปฏิบตั ิ การวางแผน/การออกแบบ การนำไปใช การวเิ คราะห การสงั เคราะห การประเมนิ คา การนำสิง่ ที่เรียนรูม าผสมผสานสรางสรรคส ง่ิ ใหม รวม (30) การตัดสินใจจากขอ เทจ็ จริง ตดั สนิ ใจจากเกณฑก ารยอมรบั ของสังคม

แบบประเมนิ ผลดานจ รหัสวชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวิชาการพฒั น หนวยที่ ๔ ชอื่ เร่ือง/ การจดั รายการประเมนิ ลำดับท่ี ชือ่ -สกลุ หมายเหตุ การใหค ะแนน ๑ = ปรบั ปรุง, ๒ = พอใช, (รายละเอยี ดของการประเมนิ สามารถปรับขอความใหเ หมาะสมกับรา

มีวินัย 59 รับผิดชอบจติ พสิ ยั (ภาคทฤษฏี) ซ่ือสัตยสุจริตนาเวบ็ ดวยภาษาเอชทีเอ็มแอล ท 1 ป 2 น 3 สามัคคีดการขอความ เวลา ๓ ชม. ขยัน ประหยัด๓ = ดี จิตอาสาายวชิ า) สะอาด สุภาพ ละเวนอบายมุข รวม

แบบประเมินผลคณุ รหสั วิชา ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพฒั น หนว ยที่ ๔ ช่ือเรื่อง/ การจัด การประเมนิ คุณภาพของงาน ท่ี รายช่ือ คณะทำงาน ความรับผิดชอบตอหนาที่ ขั้นตอนการทำงาน เวลา ความรวมมือในการทำงาน รวม หมายเหตุ เกณฑการใหคะแนนการประเมินการทำงานเปน กลุม เกณฑก ารตดั สนิ คณุ ภ ชวงคะแนน ระด พฤติกรรม/ผลงาน อยูในเกณฑดี ได ๓ คะแนน ๒๑ – ๓๐ = ดี ๑๑ – ๒๐ = พอ พฤตกิ รรม/ผลงาน อยูในเกณฑปานกลาง ได ๒ คะแนน ๐ – ๑๐ = ตอ พฤติกรรม/ผลงาน อยใู นเกณฑพ อใช ได ๑ คะแนน พฤตกิ รรม/ผลงาน อยูในเกณฑป รับปรุง ได ๐ คะแนน

60 ณภาพผลงานกลุม นาเวบ็ ดว ยภาษาเอชทีเอม็ แอล ท 1 ป 2 น 3 ดการขอความ เวลา ๓ ชม. การประเมนิ การทำงานเปน กลุม มีการมอบหมายหนาท่ี มีการวางแผน มีการชวยเหลือกันและกันในกลุม ความคิดเห็นผูอื่น ใชหลักประชาธิปไตย ผลงานเสร็จทันตามกำหนดเวลา ความถูกตองของผลงาน ความรู ความเขาใจในการทำงาน อธิบายและตอบคำถาม การจัดเก็บวัสดุ อุปกรณ เรียบรอย รวม รวมทั้งสิ้น ภาพ ความรว มมอื ในการทำงาน ๔ คะแนน ดับคณุ ภาพ ทุกคนมีสว นรว มและใหความรวมมอื อยางเต็มท่ี ๓ คะแนน 80% ของกลมุ ทม่ี สี ว นรวมและใหความรวมมอื อยา งเต็มที่ ๒ คะแนน อใช ๖0% ของกลุมที่มีสวนรว มและใหค วามรว มมอื อยางเต็มที่ ๑ คะแนน องปรับปรงุ ๔0% ของกลุมทมี่ สี ว นรว มและใหความรวมมืออยางเตม็ ที่

61 แผนการจัดการเรยี นรู รหสั วิชา ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพัฒนาเวบ็ ดวยภาษาเอชทีเอ็มแอล ท 1 ป 2 น 3 หนว ยท่ี ๕ ช่อื เรือ่ ง/ การใชลิสตสรา งรายการ เวลา ๓ ชม. ๑. หวั ขอเรอื่ ง การใชลสิ ตส รางรายการ ๒. สาระสำคญั การนำเสนอขอมูลในเว็บควรมีความกระชับ วิธีหนึ่งที่จะชวยได คือ การยกขอมูลเปนประเด็น โดยจดั เปนรายการหรอื ลิสต ในภาษา HTML สามารถสรางลิสตได 5 แบบดวยกนั 3. จุดประสงคท ่ัวไป 3.1 ดานความรู (K) 1. มีความรูเก่ียวกบั การสรางลิสตแ บบไมม ลี ำดับ 2. มคี วามรเู ก่ยี วกับการสรา งลสิ ตแ บบมลี ำดับ 3. มีความรูเกี่ยวกับการสรา งลสิ ตแบบเมนู 4. มีความรเู กยี่ วกับการสรา งลิสตแบบไดเร็กทอรีลิสต ๕. มคี วามรเู ก่ยี วกบั การสรา งลิสตจำกัดความ ๖. มคี วามรูเ กี่ยวกบั การสรางลิสตซอนกัน 3.2 ดานทักษะ (S) 1. มที ักษะเก่ยี วกับการสรางลิสตแบบไมม ลี ำดบั 2. มีทกั ษะเกย่ี วกับการสรา งลิสตแ บบมลี ำดบั 3. มที กั ษะเกี่ยวกับการสรา งลิสตแ บบเมนู 4. มีทกั ษะเกีย่ วกับการสรา งลิสตแบบไดเรก็ ทอรลี ิสต ๕. มีทักษะเกย่ี วกับการสรางลิสตจำกัดความ ๖. มที ักษะเก่ียวกบั การการสรางลสิ ตซ อ นกัน 3.3 ดา นเจตคติและคณุ ลักษณะอันพึงประสงค (A) 1 พฒั นาลกั ษณะนสิ ัย แสดงพฤตกิ รรม และมีคณุ ธรรม จรยิ ธรรมทีด่ ีตอการปฏิบัตงิ าน 4. สาระการเรยี นรู 1. สรา งลสิ ตแ บบไมม ีลำดบั 2. สรางลิสตแบบมีลำดบั 3. สรางลสิ ตแ บบเมนู 4. สรางลสิ ตแบบไดเรก็ ทอรลี ิสต 5. การสรา งลสิ ตจ ำกดั ความ 6. การสรางลิสตซอ นกนั

62 5. กิจกรรมการเรยี นรู (เนนผูเรียนเปน สำคัญ ดวยวิธกี ารสอน เทคนิคการสอน กระบวนการสอนท่ี หลากหลายเหมาะสมกับรายวชิ า) (จำนวน ๓ ชม.) 5.1 ขั้นนำเขาสบู ทเรยี น (จำนวน 30 นาท)ี 5.1.1 ผูสอนทบทวนเนื้อหาโดยการสอบถามถึงวิชาที่ผูเรียนเคยเรียน หรือประสบการณ ท่ผี ูเรียนรเู ก่ียวกบั การใชล สิ ตสรา งรายการ 5.1.2 ผเู รียนยกตัวอยางเก่ยี วกับการใชล สิ ตส รางรายการ 5.1.3 ผูสอนกลาวถึงการเรียนรูการใชลิสตสรางรายการการนำเสนอขอมูลในเว็บควรมี ความกระชับ วิธีหนึ่งที่จะชวยได คือ การยกขอมูลเปนประเด็น โดยจัดเปนรายการหรือลิสต ในภาษา HTML สามารถสรา งลิสตได 5 แบบดวยกนั 5.2 ขน้ั ดำเนินการสอน (จำนวน 1 ชม.) 5.2.1 ผูสอนอธบิ ายการสรา งลสิ ตแ บบไมม ีลำดับ 5.2.2 ผสู อนยกตัวอยางการสรางลสิ ตแบบไมมีลำดับและมลี ำดบั 5.2.3 ผเู รยี นแบงกลมุ ศึกษาและรายงานเรอื่ งการใชล ิสตสรา งรายการ 5.2.4 ผูเรียนศึกษาจากแหลงการเรียนรูที่ผูสอนแนะนำ เชน เอกสารประกอบการเรียน เว็บไซตท ผ่ี สู อนแนะนำ 5.2.5 ผูสอนสังเกตพฤติกรรมการเรียนรูของผูเรียนรายบุคคลและกระบวนการทำงานกลุม และอำนวยความสะดวก ใหค ำแนะนำ สนบั สนุนทรพั ยากรการเรียนรู 5.2.6 ผูสอนตรวจสอบการทำกิจกรรมตรวจสอบความเขาใจ แลวทบทวนในสวนที่ผูเรียนทำ ผดิ มาก หรือตอบไมได 5.2.7 ผเู รยี นรายงานผลงานกลมุ 5.2.8 ผูสอนและผูเรียนกลุมที่ไมไดรายงานประเมินผลการรายงานของเพื่อน แจงผลการ ประเมิน และใหขอเสนอแนะตางๆ 5.3 ขั้นประกอบกิจกรรม (จำนวน 2 ชม.) 5.3.1 ผูเรียนทำแบบทดสอบเพอ่ื ประเมินผลหลังการเรียนรใู นเอกสารประกอบการเรียน 5.3.2 ผูเรียนทำกิจกรรมใบงานเพื่อประเมนิ ผลหลังการเรยี นรู 5.4 ข้ันสรปุ (จำนวน 30 นาท)ี 5.4.1 ตวั แทนผูเรียนแตล ะกลมุ สรุปเน้อื หาประจำหนว ยการเรียน 5.4.2 ผูสอนเฉลยแบบทดสอบเพื่อประเมินผลหลังการเรียนรู สรุปคะแนนของผูเรียน แตล ะคน 5.4.3 ผูสอนตรวจสอบความเขาใจของผูเรียนโดยวิธีตางๆ เชน สุมสอบถามรายบุคคล และ มอบหมายงานในการศกึ ษาคนควา เพ่ิมเตมิ เกย่ี วกบั การใชล ิสตส รางรายการ 6. สือ่ และแหลงการเรยี นรู 6.1. สอ่ื E-BOOK วชิ าการพฒั นาเวบ็ ดวยภาษาเอชทีเอม็ แอล 6.๒ PowerPoint 6.๓ เว็บไซตประเภท e-learning ทีเ่ สรมิ การเรียนรู เชน 6.๓.1 http://www.learnsquare.com 6.๓.2 http://www.thaicyberu.go.th

63 6.๔ Google Classroom 6.๕ Google Site 6.๖ Youtube 6.๗ Google Froms 7. การวดั และประเมินผล ๗.๑ วิธกี ารวดั ผลประเมนิ ผล ๗.๑.๑ สังเกตผูเรียนมีความสนใจ เกิดความเขาใจในสาระการเรียนรู ตลอดจนแสดงความ กระตอื รอื รนในการแสดงความคิดเหน็ และสรุปสาระการเรยี นรูป ระจำหนว ย ๗.๑.๒ สังเกตการทำรายงานกลุมและการนำเสนอ ๗.๑.๓ กจิ กรรมใบงานทา ยหนวยการเรยี นรู ๗.๑.๔ แบบทดสอบเพอ่ื ประเมินผลหลงั การเรยี นรู ๗.๒ เครื่องมอื ในการวัดผลและประเมินผล ๗.2.๑ แบบประเมินผลการปฏิบัตงิ าน ใบงาน ๗.2.๒ แบบทดสอบหลงั เรยี น ๗.๓ เกณฑก ารวัดและประเมิน ๗.3.1 แบบฝก หดั ใบงาน เกณฑผ า น ๖๐ % ขนึ้ ไป ๗.3.2 แบบทดสอบหลังเรยี น เกณฑผา น ๖๐ % ขึน้ ไป ๗.3.3 แบบประเมินการทำรายงานกลมุ และการนำเสนอ เกณฑผ า น ๖๐ % ข้ึนไป ๗.3.4 แบบประเมนิ คุณธรรม จรยิ ธรรม คา นยิ ม และคณุ ลักษณะอันพงึ ประสงค คะแนน ขน้ึ อยกู บั การประเมินตามสภาพจรงิ ๘. กิจกรรมเสนอแนะ /งานมอบหมาย (ถา มี) 8.1 กจิ กรรมเสนอแนะ ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………. 8.2 งานมอบหมาย 8.2.๑ ใบงานทา ยหนว ยการเรียนรู 8.2.๒ กิจกรรมงานกลุม 8.2.๓ แบบทดสอบหลังเรยี น ๙. เอกสารอางอิง /บรรณานุกรมประจำหนวย (หนังสือตำราหรือเอกสารประกอบการเรียนการสอบใน หนวยน้นั ๆ หรอื ส่อื และแหลงการเรียนรูในกรณีคน ควา เพิม่ เติม) 9.1 สอ่ื E-BOOK วชิ าการพัฒนาเว็บดวยภาษาเอชทีเอ็มแอล 9.๒ PowerPoint 9.๓ Google Classroom 9.๔ Google Site 9.๕ Youtube 9.๖ Google Froms

64 ๑๐. บันทึกหลังการจัดการเรียนรู 10.๑ ผลการใชแ ผนการจดั การเรยี นรู ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… 10.๒ ปญหาและอปุ สรรค ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………....… 10.๓ แนวทางแกไ ข ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… 10.๔ ขอเสนอแนะ ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ลงช่อื ….…………….....…………... ลงชอ่ื ……..……………………. ลงชื่อ…………………………… ( นางสาวกฤตพร ขา มสาม) ( นางสาวสรยี า สมยั ) (นายศักด์ิดา สิมเสมอ) ครผู สู อน หวั หนาแผนก รองผอู ำนวยการฝายวิชาการ

65 แบบทดสอบหลังเรยี นที่ ๕.1 รหัสวชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพัฒนาเวบ็ ดว ยภาษาเอชทเี อ็มแอล ท 1 ป 2 น 3 หนวยที่ ๕ ชื่อเร่ือง/ การใชลิสตส รา งรายการ เวลา ๓ ชม. ตอนท่ี ๑ จงทำเครอื่ งหมายวงกลม ในหวั ขอท่ีถกู ทส่ี ุดเพยี งขอเดียว 1. ขอ ใดกลา วถูกตองเก่ยี วกับการใชแทก็ <ul> ? ก. ul ยอมาจาก Unordered List ข. แยกแตละรายการโดยใชส ญั ลกั ษณพ เิ ศษ ค. ลิสตแบบไมม ลี ำดับ ง. ถูกทกุ ขอ 2. ขอ ใดคือความหมายของการใชแ ทก็ <li> ? ก. กำหนดชนดิ ของรายการ ข. สรา งหวั ขอใหญข องรายการ ค. กำหนดสัญลักษณดา นหนา รายการ ง. สรางรายการ 3. ขอ ใดคือแท็กในการกำหนดเคร่อื งหมายนำหนารายการใหเปน วงกลมทึบเหมือนกันหมดทกุ รายการ ? ก. <ul type=\"disc\"> ข. <ul type=\"circle\"> ค. <li type=\"disc\"> ง. <li type=\"circle\"> 4. ขอ ใดกลาวไมถ ูกตอ งเกย่ี วกบั Ordered List ? ก. เปนการสรางลิสตแบบมีลำดับ ข. หากไมมกี ารกำหนดชนดิ ของเลขลำดบั จะใชเปน เลขโรมัน ค. ใชแ ท็ก <ol> ในการสรา งรายการแบบ Ordered List ง. ชนิดของเลขลำดบั ท่กี ำหนดไดแ ก ตวั อกั ษร, เลขโรมัน และเลขอารบิก 5. ขอใดคอื แทก็ ทใ่ี ชส รางรายการแบบ Ordered List ท่ีมชี นิดลำดับเปน อักษรพิมพใหญ ? ก. <li type=\"A\"> ข. <li type=\"capitals\"> ค. <ol type=\"capitals\"> ง. <ol type=\"A\"> 6. ขอใดคือคำสง่ั ทีใ่ ชส รา งรายการแบบ Ordered List ใหคาเริม่ ตน การจัดลำดบั ท่ี 20 ? ก. <li start=\"20\"> ข. <li type=\"20\"> ค. <ol start=\"20\"> ง. <ol type=\"20\">

66 7. การสรา งลิสตในขอใดทใ่ี หผ ลลพั ธแ ตกตางกับลิสตแบบอน่ื ๆ? ก. Ordered List ข. Definition List ค. Menu List ง. Directory List 8. ขอ ใดกลาวไมถ ูกตอ งเกย่ี วกบั ลิสตแบบจำกดั ความ? ก. ใชแ ยกคำและความหมายออกจากกัน ข. Definition List คอื ลสิ ตแ บบจำกดั ความ ค. สามารถกำหนดเครอ่ื งหมายนำหนา ขอความได ง. แบงออกไดเปน 2 สว น สวนแรกคือคำศัพท และความหมายของศัพท 9. <dt> และ <dd> เปน คำส่งั ในการสรา งลสิ ตแ บบใด ? ก. ลสิ ตแ บบไมมีลำดับ ข. ลิสตแ บบมลี ำดับ ค. ลิสตแบบจำกัดความ ง.ลิสตแ บบซอ นกนั 10. ขอใดไมใ ชรปู แบบของลสิ ต เพยี งแตเปน การนำรูปแบบของลิสตมาประยุกตใ ชเทา นัน้ ? ก. ลสิ ตแบบไมมลี ำดบั ข. ลสิ ตแบบเมนูลิสต ค. ลิสตแบบจำกัดความ ง. ลสิ ตแบบซอนกัน

67 แบบทดสอบหลงั เรียนที่ ๕.๒ รหัสวชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพัฒนาเวบ็ ดวยภาษาเอชทีเอม็ แอล ท 1 ป 2 น 3 หนวยที่ ๕ ชื่อเรอ่ื ง/ การใชล ิสตส รา งรายการ เวลา ๓ ชม. ตอนท่ี 2 จงใสเ ครอ่ื งหมาย หนาขอความทถ่ี ูกและใสเครอ่ื งหมาย หนาขอ ความที่ผดิ .......................1. ลสิ ตแบบไมม ลี ำดบั (Unordered List) จะแยกแตล ะรายการโดยใชส ัญลกั ษณพ ิเศษ .......................2. สัญลกั ษณข องเครื่องหมายวงกลมโปรงใสคอื disc .......................3. type=\"a\" แสดงเปนตัวอักษรพมิ พเ ล็ก คอื A,B,C,... .......................4. <dir> เปน การสรา งลิสตแ บบไดเร็กทอรี่ลิสต ...................5. ลิสตแบบไดเร็กทอรี่ลิสต (Directory List) ใชแยกคำและความหมายออกจากกนั ......................6. เราสามารถซอนลิสตกี่ช้ันก็ได แตไ มแ นะนำใหซอ นมากกวา 3 ชน้ั เพราะจะทำใหเ ราสับสน และขอ มูลท่ีปรากฏในลสิ ตอ าจเลยออกนอกจอภาพของบราวเซอร ทำใหอานยาก .......................7. แทก็ Ordered List จะแสดงเลขลำดับทกี่ ำหนด ไดแ ก ตวั อักษร, เลขโรมนั และเลขอารบิก .......................8. คาทกี่ ำหนดใหใ ชในแอททรบิ วิ ท type ของเครื่องหมายหนา ลำดับ ไดแก disc, circle และ square .......................9. dl (Definition List) ไมต อ งอยภู ายในแท็ก <body>...</body> .....................10. ลสิ ตแ บบจำกัดความ แบง ออกไดเปน 2 สว น สวนแรกคอื คำศพั ท และความหมายของศพั ท

68 แบบทดสอบหลังเรยี นที่ ๕.๓ รหสั วชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวิชาการพฒั นาเวบ็ ดว ยภาษาเอชทีเอม็ แอล ท 1 ป 2 น 3 หนว ยท่ี ๕ ชื่อเรื่อง/ การใชลสิ ตส รา งรายการ เวลา ๓ ชม. ตอนท่ี 3 จงตอบคำถามตอไปนี้ 1. ชนดิ ของเลขลำดบั ใน Ordered List มีอะไรบา ง .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. 2. จงเขยี น HTML เพอ่ื สรา งลิสตด งั ตอ ไปนี้ .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. 3. จงเขียนลักษณะผลลพั ธท จ่ี ะเกิดข้ึนในหนา จอบราวเซอรของโคด HTML ตอไปน้ี .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. ..............................................................................................................................................................................

คำศัพท/คำนิยาม แบบประเมนิ ผลดา นพ ขั้นตอน/วิ ีธการป ิฏบั ิตรหัสวิชา ๒๐๙๐๑ – ๒๐๐๔ รายวิชาการพฒั น การคิดรวมยอดในเ ้นือเ ื่รอง การแปลความ/ ีตความหมายหนวยที่ ๕ ชื่อเร่ือง/ การใชล สิ การขยายความ รายการประเมิน ความรูค วามจำ ความเขาใจ ที่ ชื่อ-สกลุ หมายเหตุ การใหคะแนน ๑ = ปรับปรงุ , ๒ = พอใช, ๓ = ดี

การนำความรู ความเขา ใจ 69 การนำวธิ ีการไปแกไ ขปญหา การแกไ ขปญหาเฉพาะหนา พทุ ธพิสยั (ภาคทฤษฏี) วิเคราะหตามความสำคญั นาเว็บดว ยภาษาเอชทีเอ็มแอล ท 1 ป 2 น 3 วิเคราะหต ามความสำพันธ สตส รา งรายการ เวลา ๓ ชม. วเิ คราะหตามหลกั การปฏิบตั ิ การวางแผน/การออกแบบ การนำไปใช การวิเคราะห การสงั เคราะห การประเมนิ คา การนำสง่ิ ทเ่ี รียนรูมาผสมผสานสรางสรรคส ง่ิ ใหม รวม (30) การตดั สนิ ใจจากขอเทจ็ จริง ตัดสินใจจากเกณฑก ารยอมรบั ของสังคม

แบบประเมินผลดา นจ รหัสวิชา ๒๐๙๐๑ – ๒๐๐๔ รายวิชาการพัฒน หนวยท่ี ๕ ชอื่ เรื่อง/ การใชล สิ รายการประเมิน ลำดับท่ี ชื่อ-สกลุ หมายเหตุ การใหคะแนน ๑ = ปรับปรงุ , ๒ = พอใช, (รายละเอียดของการประเมนิ สามารถปรับขอ ความใหเ หมาะสมกับรา

มีวินัย 70 รับผิดชอบจิตพิสัย (ภาคทฤษฏ)ี ซ่ือสัตยสุจริตนาเว็บดวยภาษาเอชทเี อม็ แอล ท 1 ป 2 น 3 สามัคคีสตส รางรายการ เวลา ๓ ชม. ขยัน ประหยัด๓ = ดี จิตอาสาายวชิ า) สะอาด สุภาพ ละเวนอบายมุข รวม

แบบประเมินผลคณุ รหัสวชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวิชาการพัฒน หนว ยท่ี ๕ ชือ่ เรื่อง/ การใชลสิ การประเมนิ คุณภาพของงาน ที่ รายชือ่ คณะทำงาน ความรับผิดชอบตอหนาที่ ขั้นตอนการทำงาน เวลา ความรวมมือในการทำงาน รวม หมายเหตุ เกณฑก ารใหคะแนนการประเมินการทำงานเปน กลุม เกณฑการตัดสนิ คุณภ ชว งคะแนน ระด พฤตกิ รรม/ผลงาน อยใู นเกณฑด ี ได ๓ คะแนน ๒๑ – ๓๐ = ดี ๑๑ – ๒๐ = พอ พฤติกรรม/ผลงาน อยูในเกณฑปานกลาง ได ๒ คะแนน ๐ – ๑๐ = ตอ พฤติกรรม/ผลงาน อยูใ นเกณฑพอใช ได ๑ คะแนน พฤติกรรม/ผลงาน อยใู นเกณฑปรับปรงุ ได ๐ คะแนน

71 ณภาพผลงานกลุม นาเวบ็ ดว ยภาษาเอชทเี อม็ แอล ท 1 ป 2 น 3 สตสรา งรายการ เวลา ๓ ชม. การประเมนิ การทำงานเปน กลมุ มีการมอบหมายหนาท่ี มีการวางแผน มีการชวยเหลือกันและกันในกลุม ความคิดเห็นผูอื่น ใชหลักประชาธิปไตย ผลงานเสร็จทันตามกำหนดเวลา ความถูกตองของผลงาน ความรู ความเขาใจในการทำงาน อธิบายและตอบคำถาม การจัดเก็บวัสดุ อุปกรณ เรียบรอย รวม รวมทั้งสิ้น ภาพ ความรว มมือในการทำงาน ๔ คะแนน ดบั คุณภาพ ทุกคนมีสว นรวมและใหค วามรวมมืออยางเต็มที่ ๓ คะแนน 80% ของกลุมทม่ี ีสว นรว มและใหความรว มมืออยางเต็มท่ี ๒ คะแนน อใช ๖0% ของกลมุ ทม่ี สี วนรวมและใหค วามรวมมืออยา งเต็มท่ี ๑ คะแนน องปรับปรุง ๔0% ของกลมุ ทมี่ สี ว นรวมและใหค วามรวมมืออยางเต็มท่ี

72 แผนการจดั การเรยี นรู รหัสวชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพัฒนาเวบ็ ดวยภาษาเอชทเี อม็ แอล ท 1 ป 2 น 3 หนว ยที่ ๖ ชือ่ เรื่อง/ การชื่อมโยงเวบ็ เพจดว ยลิงค เวลา ๓ ชม. ๑. หัวขอ เรื่อง การชอื่ มโยงเวบ็ เพจดวยลงิ ค ๒. สาระสำคัญ เว็บเพจจำนวนนับลานในอินเตอรเน็ต จะไมมีประโยชนเลยหากขาดการเชื่อมโยงถึงกันโดยลิงค (Link) ซึ่งชวยใหผูใชสามารถทองอินเตอรเน็ตโดยการคลิก เพื่อเปลี่ยนไปดูหนาเว็บตางๆซึ่งอาจจะอยูหนาเดียวกัน หรอื หนาใหม หรือ เวบ็ ไซตอื่นกไ็ ด นอกจากนเี้ รายงั สามารถเชอ่ื มโยงผา นภาพก็ได 3. จดุ ประสงคท ว่ั ไป 3.1 ดา นความรู (K) 1. มคี วามรเู กี่ยวกบั การการสรา งลิงค 2. มีความรูเกีย่ วกับการใชภ าพเปน ลงิ ค 3. มีความรูเกย่ี วกับการลิงคไ ปยงั ไฟล 4. มีความรเู กี่ยวกับการสรางลิงคเพื่อสงอีเมล ๕. มคี วามรูเ กย่ี วกบั การกำหนดสขี องลิงค ๖. มีความรูเกี่ยวกบั การทำ Image map ๗. มคี วามรูเ กย่ี วกับการสรางลงิ คแ บบ Rollover 3.2 ดานทักษะ (S) 1. มีทกั ษะในการสรางลงิ ค 2. มที ักษะในการใชภาพเปนลิงค 3. มีทักษะในการลิงคไปยงั ไฟล 4. มีทกั ษะในการสรา งลิงคเ พอ่ื สงอีเมล ๕. มีทกั ษะในการกำหนดสีของลิงค ๖. มีทักษะในการทำ Image map ๗. มที กั ษะในการสรา งลงิ คแบบ Rollover 3.3 ดานเจตคติและคณุ ลกั ษณะอนั พึงประสงค (A) 1 พฒั นาลักษณะนสิ ยั แสดงพฤตกิ รรม และมีคณุ ธรรม จรยิ ธรรมท่ีดตี อการปฏิบตั ิงาน 4. สาระการเรยี นรู 1. การสรางลงิ ค 2. ใชภ าพเปนลงิ ค 3. การลงิ คไปยังไฟล 4. การสรา งลงิ คเพ่อื สง อีเมล 5. การกำหนดสขี องลงิ ค 6. การทำ Image map 7. สรางลงิ คแบบ Rollover

73 5. กจิ กรรมการเรียนรู (เนน ผูเรียนเปน สำคญั ดว ยวิธีการสอน เทคนิคการสอน กระบวนการสอนท่ี หลากหลายเหมาะสมกบั รายวิชา) (จำนวน ๓ ชม.) 5.1 ข้นั นำเขาสบู ทเรยี น (จำนวน 30 นาท)ี 5.1.1 ผูสอนทบทวนเนื้อหาโดยการสอบถามถึงวิชาที่ผูเรียนเคยเรียน หรือประสบการณ ที่ผเู รียนรูเกยี่ วกบั การชอ่ื มโยงเว็บเพจดวยลงิ ค 5.1.2 ผูเรียนยกตัวอยางเก่ยี วกับการชอ่ื มโยงเวบ็ เพจดว ยลงิ ค 5.1.3 ผูสอนกลาวถึงการเรียนรูเว็บเพจจำนวนนับลานในอินเตอรเน็ต จะไมมีประโยชนเลย หากขาดการเชื่อมโยงถึงกันโดยลิงค (Link) ซึ่งชวยใหผูใชสามารถทองอินเตอรเน็ตโดยการคลิก เพื่อเปลี่ยนไปดู หนาเว็บตางๆซึ่งอาจจะอยูหนาเดียวกัน หรือหนาใหม หรือ เว็บไซตอื่นก็ได นอกจากนี้เรายังสามารถเช่ือมโยง ผา นภาพกไ็ ด 5.2 ข้นั ดำเนินการสอน (จำนวน 1 ชม.) 5.2.1 ผสู อนอธบิ ายหลักการและกฎเกณฑข องการช่อื มโยงเวบ็ เพจดว ยลงิ ค 5.2.2 ผสู อนยกตวั อยา งคำศพั ทท ีเ่ กี่ยวขอ งกบั การช่อื มโยงเว็บเพจดว ยลิงค 5.2.3 ผเู รยี นแบงกลมุ ศกึ ษาและรายงานเรือ่ งการชือ่ มโยงเวบ็ เพจดว ยลงิ ค 5.2.4 ผูเรียนศึกษาจากแหลงการเรียนรูที่ผูสอนแนะนำ เชน เอกสารประกอบการเรียน เว็บไซตท ีผ่ ูสอนแนะนำ 5.2.5 ผูสอนสังเกตพฤติกรรมการเรียนรูของผูเรียนรายบุคคลและกระบวนการทำงานกลุม และอำนวยความสะดวก ใหคำแนะนำ สนับสนนุ ทรัพยากรการเรยี นรู 5.2.6 ผูสอนตรวจสอบการทำกิจกรรมตรวจสอบความเขาใจ แลวทบทวนในสวนที่ผูเรียนทำ ผิดมาก หรือตอบไมได 5.2.7 ผเู รยี นรายงานผลงานกลุม 5.2.8 ผูสอนและผูเรียนกลุมที่ไมไดรายงานประเมินผลการรายงานของเพื่อน แจงผลการ ประเมิน และใหข อ เสนอแนะตางๆ 5.3 ข้ันประกอบกิจกรรม (จำนวน 2 ชม.) 5.3.1 ผเู รยี นทำแบบทดสอบเพื่อประเมินผลหลงั การเรียนรใู นเอกสารประกอบการเรียน 5.3.2 ผเู รียนทำกิจกรรมใบงานเพ่ือประเมนิ ผลหลงั การเรียนรู 5.4 ขัน้ สรุป (จำนวน 30 นาท)ี 5.4.1 ตวั แทนผูเ รยี นแตล ะกลมุ สรปุ เนื้อหาประจำหนวยการเรยี น 5.4.2 ผูสอนเฉลยแบบทดสอบเพื่อประเมินผลหลังการเรียนรู สรุปคะแนนของผูเรียน แตละคน 5.4.3 ผูสอนตรวจสอบความเขาใจของผูเรียนโดยวิธีตางๆ เชน สุมสอบถามรายบุคคล และมอบหมายงานในการศกึ ษาคน ควา เพม่ิ เตมิ เกีย่ วกับการช่อื มโยงเว็บเพจดวยลงิ ค 6. สือ่ และแหลง การเรยี นรู 6.1 สื่อ E-BOOK วิชาการพฒั นาเวบ็ ดว ยภาษาเอชทเี อ็มแอล 6.๒ PowerPoint 6.๓ เวบ็ ไซตป ระเภท e-learning ที่เสรมิ การเรียนรู เชน 6.3.1 http://www.learnsquare.com

74 6.3.2 http://www.thaicyberu.go.th 6.๔ Google Classroom 6.๕ Google Site 6.๖ Youtube 6.๗ Google Froms 7. การวัดและประเมินผล ๗.๑ วธิ ีการวดั ผลประเมินผล 7.1.๑ สังเกตผูเรียนมีความสนใจ เกิดความเขาใจในสาระการเรียนรู ตลอดจนแสดงความ กระตอื รอื รน ในการแสดงความคดิ เหน็ และสรุปสาระการเรยี นรูประจำหนว ย 7.1.๒ สงั เกตการทำรายงานกลุมและการนำเสนอ 7.1.๓ กิจกรรมใบงานทายหนว ยการเรยี นรู 7.1.๔ แบบทดสอบเพอื่ ประเมินผลหลังการเรยี นรู ๗.๒ เครอื่ งมือในการวดั ผลและประเมินผล 7.2.๑ แบบประเมนิ ผลการปฏบิ ัติงาน ใบงาน 7.2.๒ แบบทดสอบหลงั เรยี น ๗.๓ เกณฑการวดั และประเมิน 7.3.1 แบบฝก หัดใบงาน เกณฑผ าน ๖๐ % ขนึ้ ไป 7.3.2 แบบทดสอบหลังเรียน เกณฑผ า น ๖๐ % ขึน้ ไป 7.3.3 แบบประเมินการทำรายงานกลุม และการนำเสนอ เกณฑผา น ๖๐ % ขึน้ ไป 7.3.4 แบบประเมินคุณธรรม จริยธรรม คานยิ ม และคณุ ลักษณะอนั พงึ ประสงค คะแนน ข้นึ อยกู บั การประเมนิ ตามสภาพจรงิ ๘. กิจกรรมเสนอแนะ /งานมอบหมาย (ถา มี) 8.1 กิจกรรมเสนอแนะ ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………. 8.2 งานมอบหมาย 8.2.๑ ใบงานทา ยหนว ยการเรียนรู 8.2.๒ กจิ กรรมงานกลุม 8.2.๓ แบบทดสอบหลงั เรยี น ๙. เอกสารอางอิง /บรรณานุกรมประจำหนวย (หนังสือตำราหรือเอกสารประกอบการเรียนการสอบใน หนว ยน้นั ๆ หรอื สอื่ และแหลง การเรยี นรูในกรณคี น ควาเพิม่ เตมิ ) 9.1 สือ่ E-BOOK วชิ าการพฒั นาเว็บดวยภาษาเอชทีเอ็มแอล 9.๒ PowerPoint 9.๓ Google Classroom 9.๔ Google Site 9.๕ Youtube 9.๖ Google From

75 ๑๐. บนั ทกึ หลังการจดั การเรียนรู 10.๑ ผลการใชแ ผนการจัดการเรยี นรู ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… 10.๒ ปญ หาและอุปสรรค ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………....…………….. 10.๓ แนวทางแกไ ข ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… 10.๔ ขอ เสนอแนะ ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ลงช่ือ….…………….....…………... ลงช่ือ……..……………………. ลงช่ือ…………………………… ( นางสาวกฤตพร ขา มสาม) ( นางสาวสรยี า สมยั ) (นายศกั ด์ดิ า สิมเสมอ) ครผู สู อน หัวหนาแผนก รองผูอำนวยการฝา ยวิชาการ

76 แบบทดสอบหลงั เรียนท่ี 6.1 รหัสวิชา ๒๐๙๐๑ – ๒๐๐๔ รายวิชาการพฒั นาเวบ็ ดว ยภาษาเอชทเี อม็ แอล ท 1 ป 2 น 3 หนวยที่ ๖ ชื่อเรื่อง/ การช่อื มโยงเว็บเพจดว ยลงิ ค เวลา ๓ ชม. ตอนที่ ๑ จงทำเครอื่ งหมายวงกลม ในหัวขอทถ่ี กู ทสี่ ดุ เพยี งขอ เดียว 1. ขอ ใดคอื รูปแบบการลิงคโ ดยใชแ ท็ก <a href=\"#ชอื่ จุดเชือ่ มโยง\">...</a> ? ก. การเชอื่ มโยงขอ มูลภายในเว็บเพจเดียวกนั ข. การเชื่อมโยงกับเว็บเพจอนื่ ภายในเวบ็ ไซตเ ดยี วกนั ค. การเชื่อมโยงไปยงั เว็บไซตอื่น ง. การเชอ่ื มโยงไปยงั ไฟลอ่นื ทีไ่ มใชเ อกสาร HTML 2. ขอใดคือรูปแบบการลิงคโ ดยใชค ำสั่ง <a href=\"http://www.microsoft.com\">... </a> ? ก. การเชอ่ื มโยงขอมูลภายในเว็บเพจเดียวกัน ข. การเชื่อมโยงกับเว็บเพจอ่นื ภายในเวบ็ ไซตเ ดียวกัน ค. การเชื่อมโยงไปยังเวบ็ ไซตอนื่ ง. การเชือ่ มโยงไปยงั ไฟลอ นื่ ทีไ่ มใ ชเ อกสาร HTML 3. ขอ ใดกลาวถูกตองเกยี่ วกับ Relative Path Names ? ก. ใชในการระบตุ ำแหนง เกบ็ ของไฟลต างๆ ข. การระบุตำแหนงเปน การอางองิ ไมใ ชเจาะจง ค. ไมตอ งเปลย่ี นตำแหนง ในโคด HTML เม่ือนำไปใชในเคร่ืองเซิรฟเวอร ง. ถกู ทุกขอ 4. ขอใดคือความหมายของขอความที่ขีดเสนใตในคำสั่งตัวอยางนี้ <a href=\"http://www.microsoft.com\" target=\"_blank\"> ... </a> ? ก. ใชร ูปแทนขอ ความในการลงิ ค ข. เปน การกำหนดลงิ คเ พอ่ื สง อีเมล ค. เปนการลงิ คเ ปด หนา ตา งใหมเปน หนาวา ง ง. เปดเว็บเพจทล่ี งิ คในหนาตา งใหม 5. ขอ ใดเปน การเขยี นคำส่งั เพ่ือใชภ าพ picture.jpg เปนตัวลงิ คไปเวบ็ ไซต adobe ? ก. <a href=\"http://www.adobe.com\"><img src=\"picture.jpg\"></a> ข. <a href=\"http://www.adobe.com\">\"picture.jpg\"</a> ค. <a href=\"http://www.adobe.com\" img src=\"picture.jpg\"></a> ง. ไมม ขี อ ถกู

77 6.คำสั่ง <body link=\"สี\" vlink=\"สี\" alink=\"สี\"> เปนคำสั่งที่ใชกำหนดสีของลิงค ซึ่งสีที่กำหนดแตละตัวมี ความหมายตามขอใดตามลำดับ ? ก. ไมเคยถูกใช กำลังคลกิ เมาสอ ยู ถกู ใชแลว ข. ไมเ คยถูกใช ถกู ใชแลว กำลังคลกิ เมาสอ ยู ค. กำลังคลกิ เมาสอ ยู ไมเคยถกู ใช ถูกใชแลว ง. ถกู ใชแ ลว ไมเคยถูกใช กำลงั คลกิ เมาสอ ยู 7. ขอ ใดกลา วไมถกู ตอ งเกยี่ วกบั Image Map ? ก. ภาพท่ีบางสว นถกู กำหนดไวเปน ลิงค ข. พนื้ ทที่ ถ่ี ูกกำหนดใหเ ปนลงิ คจะมชี ื่อเรยี กวา hotspot ค. square เปนการกำหนดพน้ื ท่ีรปู สีเ่ หลี่ยม ง. default เปน การใชพื้นทีส่ วนทเ่ี หลือทไ่ี มไดกำหนดไว 8. ขอ ใดกลาวไมถ กู ตองเกย่ี วกับจดุ โคออรด ิเนต ? ก. เปน จดุ ทีก่ ำหนดพกิ ดั ของรปู ทรง ข. รปู ทรงกลมใชค า โคออรดิเนต 3 คา ค. รปู สีเ่ หลีย่ มจะใชจุดโคออรด เิ นตทงั้ หมด 4 จุด ง. หากใชคา default ไมตอ งทำการกำหนดจดุ โคออรด เิ นต 9. จากรปู วงกลม โคออรด เิ นตท่ีกำหนดในการสราง Image map คือขอ ใด ? ก. \"5,10,10\" ข. \"10,10,10\" ค. \"5,10,5\" ง. \"10,10,5\" 10. ขอ ใดกลาวไมถูกตองเกย่ี วกับการสรางลงิ คโ ดยวธิ ี Rollover ? ก. คำสง่ั ที่เขยี นเพิม่ เรยี กวา Event Handler หรอื คำสัง่ ตอบสนองเหตุการณ ข. ตองใชแ อททรบิ ิวทท ส่ี ำคญั คอื OnMouseDown และ OnMouseOut ค. ตอ งเขยี นคำสั่งของ Javascript เพิม่ เติม ง. ไมมีขอ ถกู

78 แบบทดสอบหลงั เรียนท่ี ๖.๒ รหัสวชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพฒั นาเวบ็ ดว ยภาษาเอชทีเอ็มแอล ท 1 ป 2 น 3 หนว ยที่ ๖ ช่อื เรือ่ ง/ การช่อื มโยงเวบ็ เพจดว ยลงิ ค เวลา ๓ ชม. ตอนท่ี 2 จงใสเ คร่ืองหมาย หนาขอ ความทีถ่ กู และใสเครอ่ื งหมาย หนา ขอ ความทีผ่ ิด .......................1. เมือ่ คลิก้ ท่ีลงิ คการเช่ือมโยงขอ มลู ภายในเวบ็ หนา เดียวกนั จะเกิดการกระโดดไปทีจ่ ุดเชอ่ื ม โดยหนาเวบ็ จะเลอื่ นขึน้ หรอื ลงไปทีต่ ำแหนง จุดปลายทางนน้ั .......................2. ลิงคสามารถเช่อื มโยงขอมลู ได 2 วธิ ี คือ การเช่อื มโยงขอมูลภายในเวบ็ หนา เดียวกันและการ เชอ่ื มโยงขอ มูลในเวบ็ ไซตท ี่อ่ืน .......................3. การเขียนลิงคเชอ่ื มโยงขอ มลู ภายในเว็บเพจตองกำหนดการเชอ่ื มโยงไปยังจดุ หมายปลายทาง และกำหนดจุดหมายปลายทางดว ย .......................4. เราจะใชแท็ก <img> เพอ่ื นำภาพมาทำเปน ลงิ ค ...................5. <a href=\"mail: ช่อื email address\">ขอ ความที่ลิงค</a>เปนการสรางลิงคเพอ่ื สง Email ...................6. เม่ือใดก็ตามทีเ่ รานำเมาสไปวางบนรูป ภาพก็จะเปลีย่ นไปเปนอีกภาพหนึ่งและเม่ือใดก็ตามท่เี รา นำเมาสอ อกจากรปู ภาพน้ันก็จะกลบั มาเปนรูปเดมิ เหตุการณเ ชนนีเ้ ราเรียกกนั วา Rollover .......................7. คำสั่งตอบสนองเหตุการณที่เราจะใชในการสรางลิงค Rollover มี 2 แอททริบิวทนั่นก็คือ onMouseIn และ onMouseOut .......................8. การกำหนดแม็พ (map) กค็ อื การกำหนดพนื้ ท่ีหลายๆ พ้นื ที่ไวภ ายในแมพ็ เดียวกนั .......................9. ปญหาการไมมีหนา เวบ็ เพจท่เี ราจะเชือ่ มโยงดว ย ปญหานเ้ี รยี กวา Lost link หรอื Breaklink .....................10. สขี องลิงคท ี่เคยถูกคลิกไปแลวเรยี กวา Hyperlink

79 แบบทดสอบหลังเรียนที่ ๖.๓ รหัสวชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพัฒนาเวบ็ ดว ยภาษาเอชทีเอ็มแอล ท 1 ป 2 น 3 หนว ยท่ี ๖ ชอื่ เร่ือง/ การชอ่ื มโยงเวบ็ เพจดว ยลงิ ค เวลา ๓ ชม. ตอนที่ 3 จงตอบคำถามตอไปน้ี 1. จงเขยี น HTML เพื่อสรา งลิงคส ง Email .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. 2. จงเขยี น HTML เพอ่ื เชอ่ื มโยงขอมูลในเว็บไซตที่อน่ื .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. 3. จงเขียนแท็ก <area> ท่ีกำหนดพนื้ ท่ดี ังรปู .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. .............................................................................................................................................................................. ..............................................................................................................................................................................

คำศัพท/คำนิยาม แบบประเมินผลดานพ ขั้นตอน/วิ ีธการป ิฏบั ิตรหัสวิชา ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพัฒน การคิดรวมยอดในเ ้นือเ ื่รอง การแปลความ/ ีตความหมายหนวยท่ี ๖ ชอื่ เรอ่ื ง/ การช่ือมโย การขยายความ รายการประเมนิ ความรูความจำ ความเขา ใจ ที่ ช่อื -สกลุ หมายเหตุ การใหค ะแนน ๑ = ปรบั ปรุง, ๒ = พอใช, ๓ = ดี