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

แผนการจดั การเรยี นรแู บบเนน สมรรถนะ รหสั วิชา ๒๐๙๐๑ – ๒๐๐๔ วชิ าการพัฒนาเวบ็ ดวยภาษาเอชทเี อ็มแอล ทฤษฎี 1 ปฏบิ ัติ 2 หนวยกติ 3 หลักสตู รประกาศนยี บัตรวิชาชพี พทุ ธศักราช 2562 ประเภทวชิ าเทคโนโลยีสารสนเทศและการสอ่ื สาร สาขาวชิ าเทคโนโลยสี ารสนเทศ ครูประจำวชิ า นางสาวกฤตพร ขา มสาม แผนกวิชาเทคโนโลยสี ารสนเทศ วิทยาลยั การอาชีพสอง สำนักงานคณะกรรมการการอาชีวศึกษา กระทรวงศกึ ษาธกิ าร

-ก- คำนำ แผนการจัดการเรียนการสอนวิชาการพัฒนาเว็บดวยภาษาเอชทีเอ็มแอล รหัสวิชา 20901 – 2004 จัดทำขึ้น ตามหลักสูตรประกาศนียบัตรวิชาชีพ พุทธศักราช 2562 ของสำนักงานคณะกรรมการ การอาชีวศึกษา กระทรวงศึกษาธิการ เพื่อตอบสนองวัตถุประสงคของหลักสูตรฯ ในการผลิตกำลังคน ระดับฝมือที่มีสมรรถนะวิชาชีพ มีคุณธรรม จริยธรรม และจรรยาบรรณวิชาชีพ สามารถนำไปใช ในการประกอบอาชพี ไดตรงตามความตอ งการของตลาดแรงงานในลกั ษณะผปู ฏิบัติ หรือผปู ระกอบอาชีพอสิ ระ ได ทั้งนี้เนื้อหาและกิจกรรมตางๆ ลวนมุงสนับสนุนใหผูสอนสามารถจัดการเรียนการสอนที่เนน การปฏิบัติจริง ใหผูเรียน มีความรูความเขาใจในวิธีการ และมีทักษะทางดานวิชาชีพ สามารถปฏิบัติงานในบริบทตางๆ ไดอยางมีประสิทธิภาพ รวมถึงการประยุกตใชความรูและทักษะไปสูบริบทใหม เกิดความรับผิดชอบตอตนเอง และผูอื่น มีเจตคติ และกิจนิสัยที่เหมาะสม เพื่อสรางกระบวนการเรียนรู และฝกทักษะที่เหมาะสม โดยมุงหวัง ใหผเู รยี นไดศึกษา และเกดิ การเรยี นรสู ูงสุด ผูสอน หวังเปนอยางยิ่งวาแผนการจัดการเรียนการสอนเลมนี้จะชวยใหผูเรียนมีความรูความเขาใจ ในเนื้อหาสาระของวิชา สามารถพัฒนากระบวนการเรียนรูและความคิด รวมทั้งสามารถนำความรู และสมรรถนะที่เกิดขึ้นไปประยุกตใชในชีวิตประจำวันไดสมดังเจตนารมณของหลักสูตรฯ และการปฏิรูป การศึกษาอยางครบถวนทกุ ประการ (นางสาวกฤตพร ขามสาม) ผูเรยี บเรยี ง

-ข- หนา สารบัญ ก ข เร่อื ง 1 2 คำนำ 3 สารบัญ ๑๐ สง่ิ ทกี่ ำหนดใหใ นรายวชิ า ๑๓ ตารางวิเคราะหห ลักสูตร 1๖ หนว ยการเรียนรรู ายวิชา ๒๘ กำหนดการเรยี นรู ๓๙ ตารางวิเคราะหโ ครงสรางเน้อื หาวชิ า ๕๐ แผนการจัดการเรยี นรปู ระจำหนวยที่ 1 ๖๑ แผนการจัดการเรยี นรูประจำหนวยท่ี 2 ๗๒ แผนการจดั การเรยี นรปู ระจำหนวยท่ี 3 ๘๓ แผนการจดั การเรียนรูประจำหนว ยที่ 4 ๙๔ แผนการจัดการเรยี นรูประจำหนวยท่ี 5 ๑๐๕ แผนการจดั การเรียนรูประจำหนวยท่ี 6 ๑๑๖ แผนการจดั การเรยี นรูประจำหนว ยที่ 7 ๑๒๗ แผนการจดั การเรยี นรูประจำหนว ยที่ 8 ๑๓๘ แผนการจดั การเรียนรปู ระจำหนวยท่ี 9 แผนการจดั การเรียนรปู ระจำหนว ยที่ 10 แผนการจัดการเรยี นรูประจำหนว ยท่ี 1๑ แผนการจัดการเรยี นรูประจำหนว ยที่ 1๒

บนั ทึกขอ ความ สว นราชการ แผนกวชิ าเทคโนโลยีสารสนเทศ วทิ ยาลยั การอาชพี สอง ที่ / 256๖ วันที่ ๒๖ เมษายน ๒๕๖๖ เรอ่ื ง ขออนญุ าตใชแผนการจัดการเรียนรู ภาคเรยี นที่ ๑ ปการศึกษา 256๖ เรยี น ผอู ำนวยการวทิ ยาลยั การอาชพี สอง จำนวน 1 รายวิชา สิง่ ที่แนบมาดว ย 1. แผนการจัดการเรยี นรู จำนวน 1 ฉบับ 2. แบบตรวจสอบ แผนการจดั การเรยี นรู ตามที่ วิทยาลัยการอาชีพสอง ไดมอบหมายให ดวยขาพเจา นางสาวกฤตพร ขามสาม ตำแหนงครูพิเศษสอน แผนกวิชาเทคโนโลยีสารสนเทศ ไดดำเนินการจัดทำแผนการจัดการเรียนรู เพื่อจัดการเรียนการสอน นักเรียน นักศึกษา ในระดับประกาศนียบัตรวิชาชีพ(ปวช.) และประกาศนียบัตร วิชาชพี ชน้ั สูง(ปวส.) ภาคเรยี นท่ี ๑ ปก ารศึกษา 256๖ จำนวน ๗ รายวิชา ดงั ตอไปนี้ ลำดบั ท่ี รหสั วิชา ชอ่ื วชิ า รูปแบบเอกสาร 1 20001 – ๒00๔ รายวิชาการพัฒนาเว็บดว ยภาษาเอชทีเอม็ แอล รูปเลม/PDF 2 20901 – ๑00๖ รายวิชากฎหมายคอมพวิ เตอร PDF 3 20๙0๑ – 9208 รายวิชาการพิมพด ดี แบบสัมผัสในคอมพวิ เตอร PDF 4 20๙0๑ – 1003 รายวิชาคณิตศาสตรค อมพิวเตอร PDF 5 20๙0๑ – 1004 รายวชิ าคอมพวิ เตอรกราฟก เบอ้ื งตน PDF 6 2000๑ – 2001 รายวิชาคอมพิวเตอรสารสนเทศเพอ่ื งานอาชีพ PDF 7 20๙0๑ – ๙๒๐๗ รายวชิ างานพฒั นาคอมพวิ เตอรก ราฟก เกม และแอนเิ มชนั PDF ทั้งนี้ เพื่อใหการจัดการเรียนการสอนมีสมรรรถนะตรงตามวัตถุประสงครายวิชาดังกลาว ท้งั ดา นทฤษฎีและปฏบิ ตั ิ ขาพเจา จึงขอใชแ ผนการจดั การเรียนรู ประจำภาคเรยี นที่ ๑ ปก ารศึกษา 256๖ £ เหน็ ควรอนุญาตใชสอนได (นางสาวกฤตพร ขามสาม) £ อื่น ๆ ……………………………….. ครูผูสอน ลงชอื่ ................................................. £ เหน็ ควรอนุญาตใชส อนได (นางสาวสรียา สมยั ) £ อื่น ๆ ……………………………….. หวั หนา แผนกวชิ าเทคโนโลยสี ารสนเทศ ลงช่อื ................................................. ......../............/........... (นายสถาพร ธรรมโม) £ เหน็ ควรอนุญาตใชสอนได หัวหนา งานพฒั นาหลักสูตรการเรียนการสอน £ อนื่ ๆ ……………………………….. ......../............/........... ลงชอ่ื ................................................. £ อนญุ าตใชส อนได (นายศักดิ์ดา สมิ เสมอ) £ อ่ืน ๆ ……………………………….. รองผูอำนวยการฝายวชิ าการ ลงชื่อ................................................. ......../............/........... (นางสาวจนั ทรา สง ศรี) ผูอ ำนวยการวิทยาลยั การอาชีพสอง ......../............/...........

แบบตรวจสอบ แผนการจดั การเรียนรฐู านสมรรถนะ เรยี น ผอู ำนวยการวิทยาลยั การอาชพี สอง ตามคำสงั่ วทิ ยาลัยฯ ไดมอบหมายใหขาพเจานางสาวกฤตพร ขามสาม ครแู ผนกวิชาเทคโนโลยสี ารสนเทศ จัดทำแผนการจัดการเรียนรู ภาคเรยี นที่ ๑ ปการศกึ ษา 256๖ บดั นไ้ี ดด ำเนินการเรยี บรอยแลว ขอสรุปผลการจดั แผนการเรยี นรูฐานสมรรถนะ ดังนี้ ปรบั ปรงุ /แกไข/เพิม่ เติมรายวิชา ที่ รหสั วิชาและชื่อวิชา ระดบั กลุมเรียน คำอธิบายรายวิชา ชนั้ วิเคราะหหลักสูตร จุดประสงคการเรียนรู สมรรถนะวิชาชีพ เคร่ืองมือวัดผลและประเมินผล แผนการจัดการเรียนรูประจำหนวย ส่ือการเรียนรู บันทึกหลังการสอน (ระบุ) ............................................ (ระบุ)……………………………………… 1 20001 – 1006 วิชากฎหมายคอมพวิ เตอร ปวช. 1/1 ไอที √ √ √ √ √ √ √ √ 2 20901 – 2004 วชิ าการพฒั นาเว็บดว ยภาษา ปวช. 1/1 บช. √ √ √ √ √ √ √ √ เอชทเี อ็มแอล 3 20๙0๑ – 9208 วชิ าการพิมพด ีดแบบสัมผัสใน ปวช. 3/1 3/2 บช. √ √ √ √ √ √ √ √ คอมพวิ เตอร 4 20๙0๑ – 1003 วิชาคณติ ศาสตรคอมพิวเตอร ปวช. 2/1 ไอที √ √ √ √ √ √ √ √ 5 20๙0๑ – 1004 วชิ าคอมพวิ เตอรกราฟก เบอ้ื งตน ปวช. 2/1 ไอที √ √ √ √ √ √ √ √ 6 2000๑ – 2001 วชิ าคอมพิวเตอรสารสนเทศเพ่ืองาน ปวช. 2/1 ไอที √√√√√√√√ อาชพี 7 20๙0๑ – ๙๒๐๗ รายวิชางานพัฒนาคอมพวิ เตอร ปวช. 3/1 ไอที √ √ √ √ √ √ √ √ กราฟก เกม และแอนิเมชัน 1. ผานพจิ ารณาจากหัวหนาแผนกวิชาเทคโนโลยสี ารสนเทศ ลงช่ือ............................................... ลงชอื่ ............................................................ (นางสาวสรยี า สมยั ) ............./............../..................... ( นางสาวกฤตพร ขา มสาม ) ครูผูสอน 2. ผานพิจารณาจากหัวหนางานพฒั นาหลกั สตู รการเรียนการสอน ลงชื่อ............................................................ (นายสถาพร ธรรมโม) ............./............../..................... ท่อี ยเู อกสารประกอบ 3. ผา นพจิ ารณาจากรองผอู ำนวยการฝา ยวชิ าการ ลงชอ่ื ............................................................ (นายศักดิด์ า สมิ เสมอ) ............./............../..................... ลงชอ่ื ............................................ (นางสาวจนั ทรา สงศรี) ผูอำนวยการวทิ ยาลยั การอาชพี สอง ............/............../.....................

๑ สง่ิ ที่กำหนดใหใ นรายวิชา รหัสวิชา ๒๐๙๐๑ – ๒๐๐๔ รายวิชา การพฒั นาเว็บดวยภาษาเอชทเี อ็มแอล ท 1 ป 2 น 3 หลักสูตร หลกั สตู รประกาศนียบตั รวิชาชีพ พุทธศักราช 2562 ประเภทวชิ าเทคโนโลยีสารสนเทศและการสื่อสาร สาขาวิชาเทคโนโลยสี ารสนเทศ จุดประสงคร ายวชิ า 1. เขาใจเก่ียวกบั การพัฒนาเว็บดวยภาษา HTML 2. สามารถพฒั นาเว็บดวยภาษา HTML 3. มคี ณุ ธรรม จริยธรรม และคา นิยมทด่ี ีในการพัฒนาเวบ็ ดวยภาษาเอชทีเอ็มแอล(HTML) สมรรถนะรายวิชา 1. แสดงความรูแ ละหลักการสรา งเว็บเพจดวยภาษา HTML ๒. พฒั นาเวบ็ ไซตดว ยภาษา HTML คำอธบิ ายรายวชิ า ศึกษาและปฏิบัติเกี่ยวกับการสรางเว็บดวยภาษา Hyper Text Markup Language (HTML) โครงสรางของการเขียน HTML ตามมาตรฐาน W3C การแสดงผลและการรับขอมูลการจัดและ การแตงขอความ การแตงสี การแทรกภาพ การสรางตาราง การเชื่อมโยงหนา จัดสรางเฟรม Style Sheet และธมี (Theme) การใสเ ทคนิคพิเศษ การขอพ้นื ที่เว็บไซตแ ละการ Upload เว็บเพจ

๒ ตารางวิเคราะหห ลกั สูตร รหสั วชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวิชา การพัฒนาเวบ็ ดว ยภาษาเอชทเี อม็ แอล ท 1 ป 2 น 3 หลกั สูตร หลักสูตรประกาศนียบัตรวิชาชีพ พุทธศกั ราช 2562 ประเภทวชิ าเทคโนโลยีสารสนเทศและการส่อื สาร สาขาวชิ าเทคโนโลยสี ารสนเทศ หนวย ระดบั พฤตกิ รรมท่ีพงึ ประสงค ที่ ชอ่ื หนวย พุทธพิสยั ทกั ษะพิสยั จิตพิสยั 12 3 4 5 6 1 2 3 4 5 12 3 4 5 1 เริ่มตนกบั การสรา งเวบ็ เพจ √ √√ 2 เร่ิมตนกับ HTML และ XHTML √ √√ 3 การจัดวางเน้อื หา √ √ √ 4 การจัดการขอความ √ √√ 5 การใชล ิสตส รางรายการ √ √√ 6 เชอื่ มโยงเวบ็ เพจดวยลิงค √ √ √ 7 การจัดขอ มูลใหเ ปนสัดสว นดวยตาราง √ √√ 8 แตง เติมเว็บเพจดว ยกราฟก √ √ 9 แบงหนา จอโดยใชเฟรม √ √√ 10 การสรางฟอรม √ √√ 11 รจู กั กับ Dynamic HTML √ √√ 12 การใชง าน CSS และการใชง าน √ √√ JavsScript รวม 2 91 2 9 1 15 5 ลำดับความสำคญั 2 13 2 1 3 31 2 หมายเหตุ ระดับพทุ ธพสิ ัย 1 = ความจำ 2 = ความเขา ใจ 3 = การนำไปใช 4 = การคิดวเิ คราะห 5 = การสงั เคราะห 6 = ประเมินคา ระดับทกั ษะพสิ ัย 1 = การเลยี นแบบ 2 = ทำตามแบบ 3 = ความถูกตองตามแบบ 4 = การกระทำอยา งตอ เน่อื ง 5 = การทำจนเคยชิน ระดับจติ พสิ ัย 1 = การเรียนรู 2 = การตอบสนอง 3 = การสรางคุณคา 4 = การกระจดั 5 = การสรา งลกั ษณะนสิ ัย

๓ หนว ยการเรียนรูร ายวิชา รหสั วิชา ๒๐๙๐๑ – ๒๐๐๔ รายวชิ า การพัฒนาเวบ็ ดว ยภาษาเอชทีเอม็ แอล ท 1 ป 2 น 3 หลักสตู ร หลักสตู รประกาศนยี บตั รวิชาชพี พุทธศกั ราช 2562 ประเภทวิชาเทคโนโลยีสารสนเทศและการสือ่ สาร สาขาวิชาเทคโนโลยสี ารสนเทศ หนว ยที่ ชือ่ หนว ยการเรียนรู สมรรถนะรายหนวย 1 เริ่มตนกับการสรางเว็บ ดานความรู (K) เพจ 1. มีความรูเกี่ยวกับการสรา งเวบ็ เพจ 2. มคี วามรเู กีย่ วกบั การทำงานของเวบ็ เพจ 3. มคี วามรเู กีย่ วกับหลักการออกแบบเว็บไซต 4. มคี วามรูเ กย่ี วกบั การใชโ ปรแกรม 5. มีความรเู กย่ี วกบั การออกแบบโครงสรา งเวบ็ ไซต 6. มคี วามรเู ก่ียวกับขน้ั ตอนการสรา งเวบ็ ไซต ดานทักษะ (S) 1. มที ักษะการสรา งเวบ็ เพจในการปฏบิ ตั ิงานได 2. มที กั ษะการสรางและออกแบบเว็บไซต 3. มที ักษะเก่ียวกบั ขั้นตอนการสรางเว็บไซต เจตคติและคุณลักษณะท่ีพงึ ประสงค (A) มคี วามรบั ผิดชอบ มีวินัย และมีคณุ ธรรม จรยิ ธรรมท่ดี ตี อ การปฏิบัตงิ าน 2 เริ่มตนกับ HTML และ ดานความรู (K) XHTML 1. มคี วามรเู กย่ี วกบั ลกั ษณะภาษาของ HTML 2. มีความรูเ กย่ี วกบั โครงสรางของภาษา HTML 3. มคี วามรเู กี่ยวกับ XHTML ภาษามาตรฐานใหมท ม่ี าแทน HTML 4. มคี วามรเู กี่ยวกับกฏเกณฑพน้ื ฐานในการเขยี นภาษา XHTML ดา นทักษะ (S) 1. มีทกั ษะเกี่ยวกบั ลกั ษณะภาษาของ HTML 2. มีทักษะเกย่ี วกบั โครงสรา งของภาษา HTML 3. มีทกั ษะเกี่ยวกับ XHTML ภาษามาตรฐานใหมทม่ี าแทน HTML 4. มีทกั ษะเกี่ยวกับกฏเกณฑพน้ื ฐานในการเขียนภาษา XHTML ดานคุณธรรม มีวินัย เห็นคุณคา และมีคุณธรรม จริยธรรมที่ดตี อการปฏบิ ตั งิ าน 3 การจดั วางเนื้อหาบนเว็บ ดานความรู (K) 1. มีความรเู ก่ยี วกบั การตัดคำดว ย<br>และ<p> 2. มคี วามรูเกี่ยวกบั การวางตำแหนงขอความ 3. มคี วามรเู กย่ี วกบั การจัดรูปแบบเอกสาร 4. มีความรเู กี่ยวกบั การสรางเสนค่ัน การเพมิ่ หมายเหตุ

๔ หนวยท่ี ชอ่ื หนว ยการเรยี นรู สมรรถนะรายหนว ย ๔ การจดั การขอ ความ ดานทกั ษะ (S) ๕ การใชลสิ ตสรางรายการ 1. มีทักษะเกย่ี วกบั การตัดคำดว ย<br>และ<p> 2. มีทกั ษะเก่ยี วกบั การวางตำแหนง ขอความ 3. มีทักษะเกย่ี วกับการจดั รปู แบบเอกสาร 4. มีทักษะเกี่ยวกบั การสรางเสน ค่นั การเพิ่มหมายเหตุ เจตคตแิ ละคณุ ลกั ษณะที่พึงประสงค (A) พัฒนาลักษณะนิสัย แสดงพฤติกรรม และมีคุณธรรม จริยธรรมที่ดีตอการ ปฏิบตั งิ าน ดา นความรู (K) 1. มคี วามรูเกย่ี วกบั การกำหนดรปู แบบขอ ความทีเ่ ปนหวั เรือ่ ง 2. มีความรเู กี่ยวกบั การกำหนดลักษณะตัวอกั ษร 3. มีความรูเก่ยี วกบั ปรับเปล่ียนขนาดตวั อกั ษร 4. มคี วามรเู กีย่ วกบั การกำหนดแบบตวั อกั ษร ๕. มีความรูเกี่ยวกับการใชสีในเวบ็ เพจ ๖. มีความรูเ กย่ี วกบั การกำหนดสพี น้ื และสีตัวอกั ษร ดา นทกั ษะ (S) 1. มีทกั ษะเกี่ยวกับการกำหนดรปู แบบขอ ความทเ่ี ปน หัวเรอื่ ง 2. มีทกั ษะเกย่ี วกบั การกำหนดลักษณะตวั อกั ษร 3. มีทกั ษะเกี่ยวกับการปรับเปลี่ยนขนาดตวั อักษร 4. มีทกั ษะเกย่ี วกบั การกำหนดแบบตวั อักษร ๕. มีทกั ษะเกย่ี วกบั การใชสใี นเวบ็ เพจ ๖. มีทักษะเกี่ยวกับการกำหนดสพี น้ื และสีตวั อกั ษร เจตคตแิ ละคุณลกั ษณะท่ีพึงประสงค (A) พัฒนาลักษณะนิสัย แสดงพฤติกรรม และมีคุณธรรม จริยธรรมที่ดีตอการ ปฏบิ ัติงาน ดานความรู (K) 1. มีความรูเกี่ยวกบั การสรา งลิสตแ บบไมมีลำดับ 2. มคี วามรเู กย่ี วกับการสรางลสิ ตแ บบมลี ำดบั 3. มีความรเู กย่ี วกบั การสรา งลสิ ตแ บบเมนู 4. มคี วามรูเกี่ยวกบั การสรางลสิ ตแ บบไดเรก็ ทอรลี สิ ต ๕. มีความรเู กี่ยวกับการสรางลสิ ตจำกัดความ ๖. มีความรูเกย่ี วกับการสรางลสิ ตซอนกัน ดา นทกั ษะ (S) 1. มีทกั ษะเกี่ยวกับการสรางลิสตแ บบไมม ีลำดับ 2. มีทักษะเกย่ี วกบั การสรา งลสิ ตแบบมีลำดบั 3. มีทกั ษะเกีย่ วกบั การสรา งลสิ ตแ บบเมนู

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

๖ หนว ยที่ ช่อื หนวยการเรียนรู สมรรถนะรายหนว ย ดานทักษะ (S) 1. มที กั ษะเกย่ี วกบั ประพจน และประโยค 2. มที กั ษะเกี่ยวกับการเชอื่ มประพจน 3. มีทกั ษะเกี่ยวกับการเขยี นตารางคา ความจรงิ 4. มที กั ษะกยี่ วกับการหาคาความจริงของประพจน ๕. มที ักษะเกย่ี วกับประพจนท ส่ี มมูลกนั ๖. มีทักษะเกยี่ วกับการพสิ จู น ๗. มีทกั ษะเกี่ยวกบั การใหเ หตุและผล เจตคตแิ ละคณุ ลักษณะทพี่ งึ ประสงค (A) พัฒนาลักษณะนิสัย แสดงพฤติกรรม และมีคุณธรรม จริยธรรมที่ดีตอการ ปฏบิ ตั งิ าน 8 แตงเติมเว็บเพจดวย ดานความรู (K) กราฟก 1. มคี วามรูเกย่ี วกับภาพกราฟก ชนดิ ตางๆ 2. มคี วามรูเกย่ี วกบั การแสดงภาพบนเวบ็ 3. มีความรเู กี่ยวกบั การใสขอความกำกบั ภาพ 4. มคี วามรูเกี่ยวกบั การปรับขนาดรูปภาพ ๕. มคี วามรูเก่ยี วกบั การจัดตำแหนง รปู ภาพ ๖. มีความรูเกี่ยวกับการแสดงภาพเปนฉากหลงั ดานทกั ษะ (S) 1. มีทักษะเกย่ี วกบั ภาพกราฟก ชนดิ ตา งๆ 2. มที กั ษะเกี่ยวกับการแสดงภาพบนเว็บ 3. มีคทกั ษะเกย่ี วกับการใสข อ ความกำกับภาพ 4. มที ักษะเกย่ี วกับการปรบั ขนาดรูปภาพ ๕. มีทกั ษะกยี่ วกบั การจดั ตำแหนงรูปภาพ ๖. มที กั ษะเกี่ยวกับการแสดงภาพเปน ฉากหลัง เจตคติและคุณลกั ษณะท่ีพึงประสงค (A) พัฒนาลักษณะนิสัย แสดงพฤติกรรม และมีคุณธรรม จริยธรรมที่ดีตอการ ปฏบิ ัติงาน 9 แบงหนาจอโดยใชเฟรม ดานความรู (K) 1. มีความรเู กี่ยวกบั การสรางเฟรม 2. มคี วามรเู กย่ี วกับการกำหนดลักษณะของกรอบเฟรม 3. มคี วามรเู กี่ยวกับการกำหนดชอ งวา งระหวา งเว็บเพจกับเฟรมและ เนอ้ื หากับเวบ็ เพจ 4. มคี วามรเู ก่ียวกับการแทรกเฟรมภายในเวบ็ เพจ

๗ หนว ยที่ ชื่อหนวยการเรียนรู สมรรถนะรายหนว ย ดา นทกั ษะ (S) 1. มที ักษะเกี่ยวกบั การสรางเฟรม 2. มีทกั ษะเกยี่ วกบั การกำหนดลักษณะของกรอบเฟรม 3. มที กั ษะเก่ยี วกบั การกำหนดชอ งวา งระหวางเวบ็ เพจกับเฟรมและ เนือ้ หากับเว็บเพจ 4. มที กั ษะเกี่ยวกบั การแทรกเฟรมภายในเว็บเพจ เจตคติและคุณลักษณะท่ีพงึ ประสงค (A) พัฒนาลักษณะนิสัย แสดงพฤติกรรม และมีคุณธรรม จริยธรรมที่ดีตอการ 10 การสรางฟอรม ปฏิบัตงิ าน ดานความรู (K) 1. มคี วามรูเขาใจเก่ียวกับรูปแบบการทำงานของฟอรมและ CGI 2. มคี วามรเู ก่ียวกบั การสรา งฟอรม 3. มคี วามรูเกี่ยวกับอปุ กรณใ นการรบั ขอ มูล 4. มคี วามรูเกี่ยวกับการตวั เลอื กรายการ ๕. มีความรเู ก่ียวกบั ตัวเลือกแบบจดั กลมุ ๖. มีความรูเกย่ี วกับตวั เลือกรายการแบบหลายบรรทัด ๗. มคี วามรเู กี่ยวกบั การจดั แบงฟอรม ดานทกั ษะ (S) 1. มีทกั ษะและเขา ใจเกี่ยวกับรปู แบบการทำงานของฟอรม และ CGI 2. มีทกั ษะเกี่ยวกับการสรางฟอรม 3. มีทักษะเกี่ยวกบั อปุ กรณในการรับขอมลู 4. มีทักษะเกี่ยวกบั การตวั เลอื กรายการ ๕. มีทกั ษะเกี่ยวกับตวั เลือกแบบจดั กลุม ๖. มีทกั ษะเกี่ยวกบั ตวั เลือกรายการแบบหลายบรรทัด ๗. มีทักษะเกย่ี วกบั การจดั แบงฟอรม เจตคตแิ ละคุณลักษณะทีพ่ ึงประสงค (A) พัฒนาลักษณะนิสัย แสดงพฤติกรรม และมีคุณธรรม จริยธรรมที่ดีตอการ ปฏิบัติงาน ๑๑ รจู ักกับ DynamicHTML ดา นความรู (K) 1. มีความรูเขาใจเกย่ี วกบั Dynamic HTML 2. มคี วามรเู กย่ี วกบั พ้นื ฐาน HTML ท่ีนำมาใชก ับ DHTML ดานทกั ษะ (S) 1. มที กั ษะเกี่ยวกบั Dynamic HTML 2. มที ักษะเกีย่ วกับพืน้ ฐาน HTML ท่นี ำมาใชกับ DHTML ๖. มีทกั ษะเกยี่ วกบั ตัวเลือกรายการแบบหลายบรรทดั ๗. มีทกั ษะเกี่ยวกบั การจดั แบงฟอรม

๘ หนวยที่ ช่อื หนวยการเรยี นรู สมรรถนะรายหนว ย ๑๒ การใชงาน CSS เจตคติและคุณลักษณะทีพ่ ึงประสงค (A) ๑๓ การใชง าน JavsScript พัฒนาลักษณะนิสัย แสดงพฤติกรรม และมีคุณธรรม จริยธรรมที่ดีตอการ ปฏบิ ตั งิ าน ดานความรู (K) 1. มีความรูเขาใจเก่ยี วกบั CSS 2. มีความรเู กี่ยวกบั การตำแหนง ในการกำหนดสไตลช ีท 3. มีความรูเกี่ยวกบั การกำหนดลักษณะพ้ืนหลงั 4. มีความรูเกี่ยวกบั การกำหนดลักษณะตวั อักษรและขอ ความ ๕. มีความรเู กีย่ วกับการกำหนดลกั ษณะเสน ขอบ ๖. มีความรูเกี่ยวกบั การเวน ระยะจากเสน ขอบ ๗. มีความรูเ ก่ียวกบั การกำหนดขนาดและตำแหนง ดา นทักษะ (S) 1. มีทกั ษะเขาใจเก่ียวกบั CSS 2. มที กั ษะเกี่ยวกับการตำแหนง ในการกำหนดสไตลช ีท 3. มีทักษะเกี่ยวกบั การกำหนดลกั ษณะพน้ื หลงั 4. มีทกั ษะเก่ียวกับการกำหนดลกั ษณะตัวอักษรและขอ ความ ๕. มีทกั ษะเกี่ยวกบั การกำหนดลักษณะเสน ขอบ ๖. มีทักษะเกี่ยวกับการเวนระยะจากเสน ขอบ ๗. มีทักษะเกี่ยวกับการกำหนดขนาดและตำแหนง เจตคติและคุณลกั ษณะที่พึงประสงค (A) พัฒนาลักษณะนิสัย แสดงพฤติกรรม และมีคุณธรรม จริยธรรมที่ดีตอการ ปฏบิ ตั ิงาน ดา นความรู (K) 1. มคี วามรูเขาใจเกยี่ วกบั JavaScript 2. มคี วามรูเ กี่ยวกบั ตำแหนง ของการเขยี น JavaScript 3. มคี วามรเู กย่ี วกับพ้ืนฐานการเขียนโปรแกรมดว ย JavaScript 4. มคี วามรเู กยี่ วกับพืน้ ฐาน HTML Document Object Model ๕. มคี วามรเู กี่ยวกบั การใช JavaScript ๖. มีความรูเก่ยี วกับการสรางออบเจก็ ต HTML ๗. มคี วามรเู กยี่ วกบั คณุ สมบัติ CSS ดานทักษะ (S) 1. มีทกั ษะเขาใจเกี่ยวกับ JavaScript 2. มที กั ษะเกีย่ วกับตำแหนง ของการเขียน JavaScript 3. มที กั ษะเกย่ี วกับพ้ืนฐานการเขยี นโปรแกรมดว ย JavaScript 4. มีความรูเกย่ี วกับพน้ื ฐาน HTML Document Object Model

๙ หนวยที่ ชอื่ หนว ยการเรยี นรู สมรรถนะรายหนวย ๕. มีความรเู กีย่ วกับการใช JavaScript ๖. มคี วามรูเกยี่ วกับการสรา งออบเจก็ ต HTML ๗. มคี วามรเู กย่ี วกบั คุณสมบตั ิ CSS เจตคติและคุณลกั ษณะทีพ่ ึงประสงค (A) พัฒนาลักษณะนิสัย แสดงพฤติกรรม และมีคุณธรรม จริยธรรมที่ดีตอการ ปฏบิ ัติงาน

๑๐ กำหนดการเรยี นรู รหัสวชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวิชา การพฒั นาเวบ็ ดว ยภาษาเอชทเี อม็ แอล ท 1 ป 2 น 3 หลกั สูตร หลกั สตู รประกาศนยี บัตรวชิ าชพี พุทธศกั ราช 2562 ประเภทวิชาเทคโนโลยสี ารสนเทศและการสื่อสาร สาขาวิชาเทคโนโลยสี ารสนเทศ สปั ดาหท ี่ หนวยท่ี ชอื่ หนวยการเรยี นการเรยี นรู ชว่ั โมงท่ี เวลา (ชม.) 1-2 1 เรม่ิ ตน กับการสรา งเว็บเพจ 1-๖ 3-4 ๑. เว็บเพจคืออะไร ๗ - ๑๒ ๖ 5-๖ ๒. เวบ็ เพจทำงานไดอยางไร ๑๓ – 1๘ ๗-๘ 1๙ - ๒๔ ๖ ๙ - ๑๐ ๓. โปรแกรมทใ่ี ชส รางเวบ็ เพจ ๒๕ - ๓๐ ๔. หลักการออกแบบเวบ็ ไซต ๖ ๕. การออกแบบโครงสรางเว็บไซต ๖ ๖. ขนั้ ตอนการสรา งเว็บไซต ๖ 2 เรม่ิ ตนกับ HTML และ XHTML ๑. รจู กั กบั HTML ๒. ลกั ษณะของภาษา HTML ๓. โครงสรางของภาษา HTML ๔. XHTML ภาษามาตรฐานใหมทีม่ าแทน HTML ๕. รูจ กั กับภาษา XHTML ๖. กฎเกณฑพ ้ืนฐานในการเขียนภาษา XHTML 3 การจดั วางเนอ้ื หา ๑. การตดั คำดวย<br>และ<p> ๒. การวางตำแหนง ขอ ความ ๓. การจัดรูปแบบเอกสาร ๔. การสรา งเสนคน่ั ๕. การเพมิ่ หมายเหตุ 4 การจดั การขอความ ๑. กำหนดรปู แบบขอ ความที่เปนหวั เรอ่ื ง ๒. กำหนดลกั ษณะตวั อกั ษร ๓. ปรับเปลยี่ นขนาดตวั อกั ษร ๔. การกำหนดแบบตวั อักษร ๕. การใชสใี นเว็บเพจ ๖. กำหนดสีพนื้ และสีตัวอักษร 5 การใชล สิ ตส รา งรายการ 1. สรางลสิ ตแ บบไมม ลี ำดบั 2. สรา งลสิ ตแบบมีลำดับ 3. สรางลสิ ตแบบเมนู

๑๑ สัปดาหท่ี หนว ยที่ ชื่อหนวยการเรยี นการเรียนรู ชั่วโมงท่ี เวลา (ชม.) 4. สรางลิสตแบบไดเรก็ ทอรลี ิสต ๓๑ ๓ 5. การสรา งลิสตจำกดั ความ ๓๒ ๓ 6. การสรางลสิ ตซอ นกนั ๓๓ ๓ 11 6 เชอื่ มโยงเวบ็ เพจดวยลงิ ค ๓๔ ๓ ๓๕ ๓ 1. การสรา งลิงค 2. ใชภ าพเปน ลิงค 3. การลิงคไ ปยงั ไฟล 4. การสรา งลงิ คเ พ่อื สงอเี มล 5. การกำหนดสขี องลิงค 6. การทำ Image map 7. สรา งลิงคแบบ Rollover 1๒ 7 การจัดขอมูลใหเปน สดั สวนดวยตาราง 1. ประพจน และประโยค 2. การเชือ่ มประพจน 3. การเขียนตารางคา ความจรงิ 4. การหาคาความจริงของประพจน 5. ประพจนท ส่ี มมูลกัน 6. การพิสูจน 7. การใหเ หตแุ ละผล 1๓ 8 แตงเติมเวบ็ เพจดวยกราฟก 1. ภาพกราฟก ชนดิ ตางๆ 2. แสดงภาพบนเว็บ 3. การใสข อความกำกับภาพ 4. การปรับขนาดรูปภาพ 5. การจัดตำแหนง รูปภาพ 6. แสดงภาพเปนฉากหลัง 1๔ 9 แบง หนา จอโดยใชเ ฟรม 1. การสรางเฟรม 2. การกำหนดลักษณะของกรอบเฟรม 3. การกำหนดชอ งวา งระหวา งเว็บเพจกบั เฟรมและเนื้อหากบั เว็บเพจ 4. การแทรกเฟรมภายในเว็บเพจ 1๕ 10 การสรา งฟอรม 1. เขาใจรปู แบบการทำงานของฟอรมและ CGI 2. การสรางฟอรม 3. อปุ กรณในการรบั ขอมูล

๑๒ สัปดาหท ี่ หนวยที่ ชอื่ หนวยการเรยี นการเรียนรู ชว่ั โมงที่ เวลา (ชม.) 4. ตัวเลอื กรายการ ๓๖ ๓ 5. ตวั เลอื กแบบจัดกลุม ๓๗ ๓ 6. ตวั เลอื กรายการแบบหลายบรรทัด 7. การจดั แบงฟอรม 3๘ - ๔๐ ๓ ๕๔ ๑๖ ๑๑ รจู กั กับ Dynamic HTML 1. Dynamic HTML คอื อะไร 2. พ้นื ฐาน HTML ท่นี ำมาใชกับ DHTML ๑๗ ๑๒ การใชงาน CSS และการใชงาน JavsScript 1. รูจัก CSS 2. ตำแหนง ในการกำหนดสไตลช ีท 3. การกำหนดลกั ษณะพ้ืนหลัง 4. การกำหนดลักษณะตวั อักษรและขอความ 5. การกำหนดลกั ษณะเสน ขอบ 6. การเวน ระยะจากเสน ขอบ 7. การกำหนดขนาดและตำแหนง 8. JavaScript คอื อะไร ? 9. ตำแหนงของการเขยี น JavaScript 10. พ้นื ฐานการเขียนโปรแกรมดวย JavaScript 11. HTML Document Object Model 12. การใช JavaScript อางอิงออบเจก็ ต HTML 13. การใช JavaScript อา งองิ คณุ สมบตั ิ CSS 18 สอบปลายภาค รวม

๑๓ ตารางวิเคราะหห นวยการเรียนรู สอดคลองกับจุดประสงคแ ละสมรรถนะรายวชิ า รหัสวิชา ๒๐๙๐๑ – ๒๐๐๔ รายวิชา การพัฒนาเว็บดว ยภาษาเอชทีเอม็ แอล ท 1 ป 2 น 3 หลักสูตร หลักสตู รประกาศนียบตั รวิชาชพี พุทธศกั ราช 2562 ประเภทวิชาเทคโนโลยสี ารสนเทศและการสอื่ สาร สาขาวชิ าเทคโนโลยีสารสนเทศ หนว ยท่ี หัวขอเน้ือหา จำนวน จดุ ประสงค สมรรถนะรายวชิ า คาบ รายวิชา 123456 1234 1 เริ่มตน กับการสรา งเว็บเพจ ๓ √√ √√√ ๑. เว็บเพจคอื อะไร ๒. เว็บเพจทำงานไดอ ยางไร ๓. โปรแกรมทใี่ ชสรา งเว็บเพจ ๔. หลกั การออกแบบเวบ็ ไซต ๕. การออกแบบโครงสรางเว็บไซต ๖. ขัน้ ตอนการสรางเว็บไซต 2 เริม่ ตน กับ HTML และ XHTML ๓ √√ √√√√ ๑. รจู ักกบั HTML ๒. ลักษณะของภาษา HTML ๓. โครงสรา งของภาษา HTML ๔. XHTML ภาษามาตรฐานใหมท ีม่ าแทน HTML ๕. รจู ักกับภาษา XHTML ๖. กฎเกณฑพ ้ืนฐานในการเขยี นภาษา XHTML 3 การจดั วางเนอ้ื หา ๓ √√√√√√√ √√ ๑. การตัดคำดว ย<br>และ<p> ๒. การวางตำแหนง ขอความ ๓. การจดั รปู แบบเอกสาร ๔. การสรางเสน คน่ั ๕. การเพม่ิ หมายเหตุ 4 การจัดการขอความ ๓ √√√ √√√ ๑. กำหนดรปู แบบขอความทเี่ ปน หัวเรอื่ ง ๒. กำหนดลักษณะตัวอักษร ๓. ปรบั เปล่ียนขนาดตัวอกั ษร ๔. การกำหนดแบบตัวอักษร ๕. การใชส ใี นเวบ็ เพจ ๖. กำหนดสพี นื้ และสีตัวอักษร

๑๔ หนว ยท่ี หัวขอเนือ้ หา จำนวน จดุ ประสงค สมรรถนะรายวชิ า คาบ รายวิชา 123456 1234 5 การใชล ิสตส รา งรายการ ๓ √√√ √√√ 1. สรา งลิสตแบบไมม ลี ำดับ 2. สรางลสิ ตแ บบมลี ำดับ ๓ √√√√√√√ 3. สรา งลสิ ตแบบเมนู ๓ √√√√√ √√√ 4. สรา งลสิ ตแบบไดเรก็ ทอรีลิสต 5. การสรางลิสตจ ำกัดความ ๓ √√√√√ √√√ 6. การสรางลิสตซอนกัน ๓ √√√√√ √√√ 6 ชื่อมโยงเว็บเพจดวยลงิ ค 1. การสรางลงิ ค 2. ใชภ าพเปน ลงิ ค 3. การลงิ คไปยงั ไฟล 4. การสรางลิงคเ พอ่ื สงอีเมล 5. การกำหนดสีของลงิ ค 6. การทำ Image map 7. สรา งลิงคแบบ Rollover 7 การจดั ขอมูลใหเปนสดั สว นดวยตาราง 1. ประพจน และประโยค 2. การเชื่อมประพจน 3. การเขยี นตารางคา ความจรงิ 4. การหาคา ความจรงิ ของประพจน 5. ประพจนท ีส่ มมูลกนั 6. การพสิ ูจน 7. การใหเหตุและผล 8 แตงเติมเว็บเพจดวยกราฟก 1. ภาพกราฟกชนิดตางๆ 2. แสดงภาพบนเวบ็ 3. การใสข อ ความกำกับภาพ 4. การปรบั ขนาดรปู ภาพ 5. การจดั ตำแหนง รปู ภาพ 6. แสดงภาพเปนฉากหลงั ๙ แบง หนาจอโดยใชเฟรม 1. การสรางเฟรม 2. การกำหนดลกั ษณะของกรอบเฟรม

๑๕ หนวยที่ หวั ขอ เนือ้ หา จุดประสงค สมรรถนะรายวชิ า รายวชิ า 1234123456 3. การกำหนดชองวางระหวา งเวบ็ เพจกับเฟรม ๓ √√√√√ √√√ และเน้ือหากับเวบ็ เพจ 4. การแทรกเฟรมภายในเวบ็ เพจ ๓ √√√√√ √√√ ๓ √√√√√ √√√ ๑๐ การสรา งฟอรม 1. เขาใจรปู แบบการทำงานของฟอรมและ CGI 2. การสรางฟอรม 3. อุปกรณในการรบั ขอมูล 4. ตวั เลอื กรายการ 5. ตัวเลือกแบบจดั กลมุ 6. ตัวเลอื กรายการแบบหลายบรรทัด 7. การจดั แบง ฟอรม ๑๑ รจู ักกบั Dynamic HTML 1. Dynamic HTML คอื อะไร 2. พื้นฐาน HTML ทน่ี ำมาใชกบั DHTML ๑๒ การใชง าน CSS และการใชง าน JavsScript 1. รจู กั CSS 2. ตำแหนง ในการกำหนดสไตลชีท 3. การกำหนดลักษณะพ้ืนหลงั 4. การกำหนดลกั ษณะตัวอกั ษรและขอ ความ 5. การกำหนดลักษณะเสนขอบ 6. การเวนระยะจากเสน ขอบ 7. การกำหนดขนาดและตำแหนง 8. JavaScript คืออะไร ? 9. ตำแหนง ของการเขียน JavaScript 10. พื้นฐานการเขยี นโปรแกรมดว ย JavaScript 11. HTML Document Object Model 12. การใช JavaScript อา งอิงออบเจก็ ต HTML 13. การใช JavaScript อา งองิ คณุ สมบัติ CSS

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

๑๗ 5.1.๒ ผูสอนและผูเรียนรวมกันกำหนดเกณฑของงานที่มอบหมาย เชน เวลา ขอบเขต ของเนอ้ื หา กจิ กรรม การประเมนิ ผล ฯลฯ ๕.๑.๓ กลาวถึงการเรียนรูเว็บเพจเปนสิ่งใกลตัวซึ่งเปนแหลงรวมความรูและเปนชุมชน ใหพบปะพูดคุยที่เรียกวาสังคมออนไลน ซึ่งเว็บไซตสามารถพัฒนาไดอยางตอเนื่องมีการเปลี่ยนแปลง ตลอดเวลา โดยเฉพาะเมื่อทุกคนบนโลกมีสมารทโฟนหรือสมารทดีไวซที่สามารถในงานบนอินเทอรเน็ตไดทุกที่ และทุกเวลา การเรียนรูในยุคปจจุบันจึงเกี่ยวของกับเว็บไซตซึ่งเต็มไปดวยขอมูลและขาวสารที่มีอยูและ เปล่ียนแปลงอยตู ลอดเวลา 5.2 ขน้ั ดำเนินการสอน (จำนวน 1 นาท)ี 5.2.1 ผสู อนอธิบายเรอื่ งความรเู บอ้ื งตนเกยี่ วกบั การพัฒนาเวบ็ ดวยภาษาเอชทเี อ็มแอล ๕.๒.๒ ผสู อนอธบิ ายเร่อื งการทำงานของเว็บเพจ 5.2.๓ ผสู อนอธบิ ายเร่ืองหลกั การออกแบบเว็บไซต 5.2.๔ ผเู รยี นแบงกลุมศึกษาและรายงานเร่ืองการพัฒนาเว็บดวยภาษาเอชทีเอ็มแอล 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.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 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

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

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

๒๑ แบบทดสอบหลังเรยี นท่ี 1.๒ รหัสวิชา ๒๐๙๐๑ – ๒๐๐๔ รายวิชา วิชาการพัฒนาเวบ็ ดวยภาษาเอชทีเอ็มแอล ท 1 ป 2 น 3 หนวยท่ี 1 ชอื่ เร่อื ง/วชิ าการพัฒนาเวบ็ ดว ยภาษาเอชทเี อม็ แอล เวลา ๓ ชม. 2. ตัวยอตอไปน้ี .com .edu .gov .mil .net และ .org ใชกบั องคก รใด .com ........................................................................................................................ .edu ........................................................................................................................ .gov ........................................................................................................................ .mil ........................................................................................................................ .net ........................................................................................................................ .org ........................................................................................................................ 3. จงอธิบายขน้ั ตอนการสรางเว็บไซตพ อสงั เขป 1. .............................................................................................................................................................................. .............................................................................................................................................................................. 2. .............................................................................................................................................................................. .............................................................................................................................................................................. 3. .............................................................................................................................................................................. .............................................................................................................................................................................. 4. .............................................................................................................................................................................. .............................................................................................................................................................................. 5. .............................................................................................................................................................................. .............................................................................................................................................................................. 6. .............................................................................................................................................................................. ..............................................................................................................................................................................

๒๒ แบบทดสอบหลงั เรียนท่ี 1.๓ รหสั วิชา ๒๐๙๐๑ – ๒๐๐๔ รายวชิ า วิชาการพัฒนาเวบ็ ดว ยภาษาเอชทีเอม็ แอล ท 1 ป 2 น 3 หนว ยที่ 1 ช่อื เรือ่ ง/วิชาการพฒั นาเวบ็ ดวยภาษาเอชทีเอม็ แอล เวลา ๓ ชม. ตอนท่ี 2 จงใสเครอ่ื งหมาย หนา ขอ ความทถี่ กู และใสเ ครอื่ งหมาย หนา ขอความทผี่ ิด .......................1. เว็บเพจ คือ เอกสารที่ใชใ นการเผยแพรข อ มูลขาวสารซึ่งประกอบดว ย ขอความ ภาพ เสยี ง และภาพยนตร ผา นทางเครอื ขา ยอนิ เทอรเ น็ต .......................2. เราใชเ ว็บบราวเซอรในการเขา สูโลกของ World Wide Web .......................3. ขน้ั ตอนแรกของการสรางเวบ็ ไซตควรกำหนดโครงรางของเวบ็ ไซตนัน้ เสยี กอน .......................4. โดเมนเนมเปน การนำตัวอักษรทีจ่ ำงายมาใชแ ทนไอพแี อดเดรส .......................5. เราจะเรียกกลุม ของหนา เวบ็ หรอื เว็บหลายๆ หนา รวมกัน วา \"โฮมเพจ\"โดยจะมีการกำหนด หนา เวบ็ เพจหนาหนงึ่ ไวเ ปน หนาแรก เว็บเพจน้มี ีชอ่ื เรียกวา \"เว็บไซต\" .......................6. HTTP ยอมาจาก HyperText Transfer Process .......................7. โดเมนเนมมกั ถูกต้ังใหส อดคลองกบั ชื่อบริษทั หรือองคก รผูเปน เจา ของ .......................8. เว็บไซตแตล ะเวบ็ ไซตจะมโี ดเมนเนมเฉพาะที่ไมเ หมอื นใคร .......................9. success.co.th เปน โดเมนเนมแบบ 2 ระดบั .......................10. .com เปน โดเมนเนมของบรษิ ทั หรือองคกรพาณิชย และองคกรรฐั บาล

๒๓ แบบทดสอบหลงั เรียนที่ 1.๔ รหัสวชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวิชา วชิ าการพัฒนาเวบ็ ดวยภาษาเอชทีเอ็มแอล ท 1 ป 2 น 3 หนว ยที่ 1 ช่ือเร่อื ง/วชิ าการพฒั นาเวบ็ ดว ยภาษาเอชทีเอม็ แอล เวลา ๓ ชม. ตอนท่ี ๓ จงทำเครือ่ งหมายวงกลม ในหัวขอ ที่ถกู ทส่ี ดุ เพยี งขอ เดยี ว 1. ขอ ใดเปนประโยชนข องเว็บเพจ ? ก. นำเสนอขาวและเหตกุ ารณป จจบุ นั ข. รวบรวมความรูไ วเปน คลังขนาดใหญ ค. มบี รกิ ารสำหรบั ทำธุรกรรมการเงนิ ออนไลน ง. ถกู ทุกขอ 2. ขอใดหมายถึงเคร่ืองคอมพวิ เตอรท ใ่ี หบ ริการ? ก. เซริ ฟ เวอร ข. ไคลเอนต ค. เว็บไซต ง. โฮมเพจ 3. ขอใดหมายถงึ กลมุ ของหนา เว็บเพจทสี่ รา งไวเ พ่อื นำเสนอขอ มลู รวมกัน? ก. เซริ ฟเวอร ข. ไคลเอนต ค. เวบ็ ไซต ง. โฮมเพจ 4. ขอใดคือหนา ท่ีของโดเมนเนม? ก. ทำหนา ที่ในการจัดสรรไอพแี อดเดรส ข. ใชแ ทนไอพีแอดเดรสเพ่อื ใหจ ำไดงาย ค. แปลงโดเมนเนมกลับไปเปน ไอพีแอดเดรส ง. แบง ขอมูลเปน สว นยอ ยๆ เพื่อปองกันการผดิ พลาด 5. ขอ ใดกลา วไดถ ูกตอ งเกย่ี วกับประเภทของโดเมนเนม? ก. ตวั ยอ .com เปน โดเมนเนม 1 ระดับ ข. ตัวยอ .co.th เปน โดเมนเนม 2 ระดบั ค. โดเมนเนมถูกแบงออกเปน 2 ประเภทไดแก 2 ระดับ และ 3 ระดบั ง. ไมม ีขอถกู 6. ขอ ใดกลาวถกู ตองเกี่ยวกบั ประเภทขององคก ร .gov ? ก. บรษิ ัทหรือองคกรพาณิชย ข. สถาบันการศกึ ษา ค. องคกรรฐั บาล ง. องคก รทางทหาร 7. ขอใดคือขน้ั ตอนแรกทเี่ ราจะตองนั่งคิดกอนทจ่ี ะสรา งเวบ็ ไซต? ก. กำหนดการเช่ือมโยงระหวา งเวบ็ เพจ ข. กำหนดโครงรา งของเวบ็ ไซต ค. ออกแบบหนาเวบ็ เพจ ง. อัพโหลดไฟลเ ว็บเพจ

๒๔ 8. http://www.adobe.com/support/techdocs/328576.html สวนที่ขีดเสนใตใน URL คือขอใด ? ก. content identifier ข. สวนระบุตำแหนง ค. host name ง. ชื่อไฟลขอมลู 9. ขอ ใดกลาวไดถ กู ตองเก่ียวกับขน้ั ตอนในการพัฒนาเวบ็ ไซต? ก. Site Map อยูใ นขน้ั ตอนการออกแบบเว็บเพจ ข. ขัน้ ตอนแรกตองเรมิ่ จากการเช่อื มโยงระหวางเว็บเพจ ค. เราตองจองพืน้ ทเ่ี กบ็ เวบ็ เพจกอ นท่ีจะอัพโหลดขอ มลู ขึน้ ไป ง. ตอ งออกแบบเว็บเพจแตล ะหนากอ นแลว คอ ยวางแผนการเชื่อมโยง 10. ขอใดคือข้ันตอนของ Web Hosting ? ข. การเช่อื มโยงระหวา งเวบ็ เพจ ก. การออกแบบเว็บเพจ ง. จองพื้นทเี่ ก็บขอมลู เว็บไซต ค. อัพโหลดเว็บไซต

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

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

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

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

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

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

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

29 5. กจิ กรรมการเรยี นรู (เนน ผูเ รียนเปนสำคญั ดว ยวิธกี ารสอน เทคนคิ การสอน กระบวนการสอนท่ี หลากหลายเหมาะสมกับรายวชิ า) (จำนวน ๓ ชม.) 5.1 ขน้ั นำเขา สบู ทเรียน (จำนวน 30 นาท)ี 5.1.1 ผูสอนแจงประมวลผลการเรียนรู เชน จุดประสงคการเรียนรู คำอธิบายรายวิชา หนงั สอื อา งอิง และแหลงการเรียนรู เอกสารประกอบการเรียน งานที่มอบหมาย 5.1.๒ ผูสอนและผูเรียนรวมกันกำหนดเกณฑของงานที่มอบหมาย เชน เวลา ขอบเขตของ เนอื้ หา กิจกรรม การประเมินผล ฯลฯ ๕.๑.๓ กลาวถงึ HTML เปน ภาษาหลกั ที่ใชใ นการสรางไฟลเวบ็ เพจ โดยลักษณะของภาษา HTML แบงออกเปนสองสว น คอื สว นของขอความท่วั ๆไปและสวนท่เี ปน คำสง่ั ในการกำหนดรปู แบบของ ขอ ความซ่งึ เรยี กวา แทก็ (Tag) หลังจากนนั้ ไดพ ฒั นาภาษา HTML ข้ึนเร่อื ยๆ เพือ่ ลบจดุ ออ นหลายๆอยางลง จนกลายมาเปน ภาษาใหมทช่ี ่ือ XHTML 5.2 ข้นั ดำเนินการสอน (จำนวน 1 ชม.) 5.2.1 ผสู อนอธิบายเรอ่ื งการเร่มิ ตน กับ HTML และ XHTML โดยการเช่อื มโยงประสบการณ ของผูเรียน และยกตวั อยา งเก่ียวกบั HTML และ XHTML 5.2.2 ผูสอนยกตัวอยาง HTML และ XHTML เปนภาษาหลักที่ใชในการสรางไฟลเว็บเพจ โดยลกั ษณะของภาษา HTML 5.2.3 ผูเรียนแบงกลมุ ศึกษา และรายงานเรอื่ งเกย่ี วกบั HTML และ XHTML 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 ผูสอนตรวจสอบความเขาใจของผูเรียนโดยวิธีตางๆ เชน สุมสอบถามรายบุคคล และ มอบหมายงานในการศึกษาคน ควา เพมิ่ เติมเก่ยี วกับปญหามลพษิ

30 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 7. การวดั และประเมินผล ๗.๑ วธิ ีการวดั ผลประเมนิ ผล ๗.๑.๑ สังเกตผูเรียนมีความสนใจ เกิดความเขาใจในสาระการเรียนรู ตลอดจนแสดงความ กระตือรอื รนในการแสดงความคิดเหน็ และสรุปสาระการเรยี นรปู ระจำหนวย ๗.๑.๒ สังเกตการทำรายงานกลุมและการนำเสนอ ๗.๑.๓ กจิ กรรมใบงานทา ยหนว ยการเรียนรู ๗.๑.๔ แบบทดสอบเพื่อประเมนิ ผลหลงั การเรยี นรู ๗.๒ เคร่อื งมือในการวัดผลและประเมินผล ๗.2.๑ แบบประเมนิ ผลการปฏบิ ตั งิ าน ใบงาน ๗.2.๒ แบบทดสอบหลังเรียน ๗.๓ เกณฑก ารวัดและประเมิน ๗.3.1 แบบฝก หดั ใบงาน เกณฑผ า น ๖๐ % ข้ึนไป ๗.3.2 แบบทดสอบหลงั เรยี น เกณฑผ า น ๖๐ % ขนึ้ ไป ๗.3.3 แบบประเมินการทำรายงานกลมุ และการนำเสนอ เกณฑผ าน ๖๐ % ขึ้นไป ๗.3.4 แบบประเมินคณุ ธรรม จริยธรรม คานยิ ม และคุณลักษณะอันพึงประสงค คะแนน ขึ้นอยกู บั การประเมนิ ตามสภาพจรงิ ๘. กิจกรรมเสนอแนะ /งานมอบหมาย (ถามี) 8.1 กจิ กรรมเสนอแนะ ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………. 8.2 งานมอบหมาย 8.2.๑. ใบงานทา ยหนว ยการเรยี นรู 8.2.๒. กิจกรรมงานกลุม 8.2.๓. แบบทดสอบหลังเรียน

31 ๙. เอกสารอางอิง /บรรณานุกรมประจำหนวย (หนังสือตำราหรือเอกสารประกอบการเรียนการสอบใน หนวยนัน้ ๆ หรอื ส่อื และแหลงการเรียนรูในกรณคี นควา เพม่ิ เติม) 9.1 ส่ือ E-BOOK วชิ าการพฒั นาเวบ็ ดว ยภาษาเอชทเี อม็ แอล 9.๒ PowerPoint 9.๓ Google Classroom 9.๔ Google Site 9.๕ Youtube 9.๖ Google Froms ๑๐. บนั ทกึ หลงั การจัดการเรยี นรู รหัสวชิ า 2๐001-1001 รายวชิ าการพฒั นาเวบ็ ดวยภาษาเอชทเี อ็มแอล ท 1 ป 2 น 3 หนวยที่ 2 ชอ่ื เรอ่ื ง/เรมิ่ ตนกบั HTML และ XHTML เวลา ๓ ชม. 10.๑ ผลการใชแผนการจัดการเรียนรู ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… 10.๒ ปญ หาและอปุ สรรค ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… 10.๓ แนวทางแกไข ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… 10.๔ ขอเสนอแนะ ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………… ลงช่อื ….…………….....…………... ลงชื่อ……..……………………. ลงชื่อ…………………………… ( นางสาวกฤตพร ขา มสาม) ( นางสาวสรียา สมยั ) (นายศกั ด์ิดา สมิ เสมอ) ครูผูสอน หวั หนาแผนก รองผอู ำนวยการฝายวชิ าการ

32 แบบทดสอบหลงั เรยี นที่ 2.1 รหสั วชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวิชาการพฒั นาเวบ็ ดว ยภาษาเอชทเี อม็ แอล ท 1 ป 2 น 3 หนวยที่ ๒ ช่ือเรื่อง/เรม่ิ ตน กบั HTML และ XHTML เวลา ๓ ชม. ตอนที่ ๑ จงทำเคร่อื งหมายวงกลม ในหัวขอท่ีถูกทสี่ ุดเพยี งขอเดียว 1. ขอใดกลาวไมถูกตองเก่ียวกบั ภาษา HTML ? ก. เปนภาษาหลักทใ่ี ชใ นการสรา งเว็บเพจ ข. คำสง่ั จะอยใู นเครอ่ื งหมาย < และ > ค. คำส่งั สวนใหญจะแบงเปน 2 สว น คือ แทก็ เปดและแท็กปด ง. ในแทก็ ปดจะตองมีเครื่องหมาย \\ 2. ขอใดกลา วถกู ตอ งเกยี่ วกับการเขยี นแทก็ ภาษา HTML ? ก. ในการเขยี นแทก็ ซอ นแทก็ ใหปดแท็กท่อี ยูในสดุ กอ น ข. บางแท็กไมจ ำเปนตอ งมีแทก็ ปด ก็สามารถใชงานได ค. การใชต วั พมิ พเลก็ และตัวพิมพใ หญม คี วามหมายเหมือนกนั ง. ถูกทุกขอ 3. ขอ ใดเปน รูปแบบของแทก็ ในภาษา HTML ? ข.<แท็ก>ขอ ความ</แท็ก> ง. <แท็ก,ขอ ความ><\\แท็ก> ก. <แทก็ ,ขอ ความ></แทก็ > ค. <แทก็ >ขอความ<\\แทก็ > 4. ขอใดคือสวนทีใ่ สเ นือ้ หาของเว็บเพจทีจ่ ะไปแสดงผลที่เว็บบราวเซอร? ก. <html> ... </html> ข. <head> ... </head> ค. <body> ... </body> ง. <title> ... </title> 5. แท็ก <title> ... </title> เปน แท็กทใี่ ชอยูภายในแทก็ ขอ ใด ? ก. <html> ... </html> ข. <head> ... </head> ค. <body> ... </body> ง. <h2> ... </h2> 6. ขอ ใดกลา วไมถูกตองเก่ียวกบั XHTML ? ก. เขียนโปรแกรมงายเพราะไมส นใจความแนนอนของภาษา ข. เรม่ิ ตนใชง านไมยากเพราะพฒั นามาจาก HTML 4 ค. การพัฒนาแทก็ คำสง่ั และโมดูลใหท ำงานรวมกนั ได ง. สามารถทำงานไดเ ขากบั ทุกระบบ

33 7. ขอ ใดกลา วถึง XHTML ไดอ ยา งถูกตอง ? ก. พัฒนา XML ใหเขียนภาษาในรูปแบบ HTML ข. พัฒนา SGML ใหเขียนภาษาแบบ HTML ค. พัฒนา SGML ใหเขยี นภาษาแบบ XML ง. พฒั นา HTML ใหเขียนภาษาในรปู แบบ XML 8. ขอใดคอื DOCTYPE รูปแบบ XHTML 1.0 Strick ? ก. ไมเ ครงครัดเรอ่ื งความถกู ตอ ง ใชกบั บราวเซอรทไี่ มร องรับ Cascading Style Sheet ได ข. เครงครดั เร่อื งความถกู ตอ ง ใชกบั บราวเซอรท ไ่ี มร องรบั Cascading Style Sheet ได ค. ใชกับเวบ็ เพจทต่ี อ งแสดงผลออกเปน หลายเฟรม หรือใช Frameset ง. เครงครดั เรือ่ งความถกู ตอง ใชกับบราวเซอรทีร่ องรบั Cascading Style Sheet 9. ขอ ไมใชบงั คบั ของ XHTML คอื ขอใด ? ก. แทก็ พ้ืนฐานตองมคี รบ ข. ทกุ แท็กเปด ตอ งมแี ท็กปด ค. ชอ่ื คำสั่ง แอททรบิ วิ ท และคาท่ีกำหนดใหแ อททริบวิ ทเปนตัวเลก็ ทั้งหมด ง. ปด แท็กตามลำดับใหถกู ตอ ง 10. ขอ ใดเขยี น XHTML ถกู ตอง ? ข. <B><U>Hello</U></B> ก. <b><u>Hello</b></u> ง. <dl compact=\"compact\"> ค. <td rowspan=3>

34 แบบทดสอบหลงั เรียนที่ 2.๒ รหสั วชิ า ๒๐๙๐๑ – ๒๐๐๔ รายวชิ าการพฒั นาเวบ็ ดวยภาษาเอชทเี อ็มแอล ท 1 ป 2 น 3 หนวยท่ี ๒ ช่อื เรอ่ื ง/เร่ิมตนกบั HTML และ XHTML เวลา ๓ ชม. ตอนที่ 2 จงใสเ ครอ่ื งหมาย หนาขอ ความทถี่ ูกและใสเคร่อื งหมาย หนา ขอความทผ่ี ิด .......................1. HTML ยอมาจากคำวา HyperText Makeup Language เปนภาษาหลักที่ใชในการสราง หนาเวบ็ เพจ .......................2. องคประกอบของภาษา HTML สามารถแบงออกเปน 2 สวน คือ สวนทเี่ ปน ขอความท่วั ๆ ไป และสว นท่ีเปน คำส่ังท่ีใชในการกำหนดรูปแบบของขอความทีแ่ สดง คือ แทก็ (Tag) .......................3. <title>...</title> ขอความภายในแท็กนี้จะเปนชื่อหัวเรื่องเว็บเพจที่ตองการ ซึ่งจะตองมี ความยาวไมเกนิ 64 ตวั อกั ษร .......................4. ภาษา HTML เปนภาษาทงี่ ายตอการตรวจสอบขอผิดพลาด ...................5. ขอดีของภาษา XHTML คอื การใชงานไมย ุง ยาก การใชค ำส่ังและโมดูลรว มกนั ไดถูก ......................6. XHTML พัฒนามาจาก HTML4 โดยจะมีการเพิ่มรูปแบบ และกำหนดเรื่องแท็กและแอททริ บิวทต างๆ .......................7. การเขียนภาษา XHTML จะมองตวั พิมพใ หญกับพมิ พเลก็ มคี วามหมายเหมือนกนั .......................8. XHTML ตวั X ยอ มาจากคำวา eXtend HTML .......................9. ในการกำหนดคาแอททริบิวทใหก ำหนดในเครื่องหมาย \"...\" เสมอ .....................10. DOCTYPE เปนการประกาศชนิดของเอกสาร ซึ่งจะมีผลตอรูปแบบ และคุณสมบัติกาทำงาน ของแทก็ ท่ีเราจะใชในเอกสารหนานน้ั

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

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

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

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

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

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

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

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