ชุดที่1

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

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

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

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

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

6 การทางานของระบบเว็บเพจ 5. เอชทเี อ็มแอล (HTML) คืออะไร ก. ระบบปฏิบัติการท่นี ิยมใชบ้ นเคร่ือง ข. วธิ ีการเชื่อมโยงขอ้ มูลระหว่างเคร่ืองคอมพิวเตอร์บนระบบเครือข่ายอนิ เทอรเ์ น็ต ค. เคร่ืองคอมพวิ เตอร์ที่ทาหนา้ ทีใ่ ห้บริการเอกสารเวบ็ บนระบบเครือขา่ ยอินเทอร์เนต็ ง. ภาษาคอมพิวเตอรท์ ่ีใชส้ าหรบั ควบคมุ การแสดงเอกสารบนระบบเครอื ขา่ ยอนิ เทอรเ์ น็ต 6. HTML ยอ่ มาจากคาว่าอะไร ก. Hypertext Manual Language ข. Hyper Text Markup Language ค. Home Text Markup Language ง. Homepage Text Markup Language 7. HTML เป็นภาษาทีถ่ ูกพฒั นาขึ้นโดยองค์การในข้อใด ก. FTP ข. W3C ค. HTTP ง. WWW 8. โปรแกรมใดใช้ในการเขียนคาสงั่ HTML ก. DOS ข. Ms-Word ค. Notepad ง. Google Chrome 9. ขอ้ ใดไมใ่ ช่โปรแกรมเวบ็ เบราวเ์ ซอร์ ท่ใี ช้สาหรบั แสดงผลขอ้ มลู ภาษา HTML ก. โน้ตแพด (Notepad) ข. ไฟร์ฟอกซ์ (Mozilla Firefox) ค. กเู กลิ โครม (Google Chrome) ง. อินเทอร์เนต็ เอ็กโพลเรอร์ (Internet Explorer) 10. ข้อใดใช้สาหรับควบคุมการแสดงผลของระบบเอชทเี อ็มแอล (HTML) ก. โปรแกรมเว็บเบราว์เซอร์ ข. ปา้ ยระบกุ ารแสดงผล หรอื แท็ก ค. เครอื่ งคอมพิวเตอร์ท่ีใช้สาหรับแสดงผลข้อมูล ง. ระบบปฏิบตั กิ ารทีใ่ ช้งานบนเครอ่ื งคอมพิวเตอร์แมข่ า่ ย

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

8 การทางานของระบบเวบ็ เพจ บตั รเนอื้ หา เทคโนโลยสี ารสนเทศ หรือ ไอที คือการประยุกต์ใช้คอมพิวเตอร์และอุปกรณ์ โทรคมนาคม เพ่ือจดั เกบ็ ค้นหาข้อมูล สง่ ผ่าน และจัดดาเนินการข้อมลู ซ่งึ มักเกยี่ วข้องกับ ธุรกจิ หนง่ึ หรือองค์การอ่ืน ๆ ศพั ท์นีโ้ ดยปกติก็ใช้แทนความหมายของเคร่ืองคอมพิวเตอร์ และเครือขา่ ยคอมพิวเตอร์ อินเทอรเ์ นต็ คอื อะไร ระบบเครือข่ายท่ีใหญ่ทส่ี ุด ท่เี ชอ่ื มต่อคอมพิวเตอรห์ ลายล้านเคร่อื งเข้าด้วยกัน จนเรยี กกันไดว้ ่าเป็น “เครอื ขา่ ยทไ่ี ร้พรมแดน” ลกั ษณะของระบบอนิ เทอรเ์ น็ตอยใู่ นลกั ษณะ “ไคลเอนท์-เซิร์ฟเวอร”์ (Client-Server) คือเครื่องคอมพวิ เตอรท์ ่ี ทาหน้าทเี่ ปน็ เซิรฟ์ เวอร์คือ “เครอื่ งแมข่ า่ ย” หรือ ผูใ้ ห้บรกิ ารกับ เครือ่ งทเี่ ป็นไคลเอนท์ คือ “เคร่อื งลูกขา่ ย” “ไอพี แอดเดรส” (IP Address)  เปน็ เสมือนเลขท่ีบา้ นในอินเทอรเ์ นต็  เปน็ ตัวเลขล้วน ๆ 4 ชุด แตล่ ะชุดมคี ่าระหวา่ ง 0-255 ค่ันดว้ ยจุด เช่น 202.146.15.9 หรือ 192.168.50.15

9 การทางานของระบบเวบ็ เพจ ประโยชนข์ องอินเทอรเ์ น็ต 1. การติดต่อสื่อสาร รบั -สง่ จดหมายผา่ นทางอินเทอร์เนต็ 2. อนิ เทอรเ์ นต็ เหมอื นเป็นห้องสมดุ ขนาดใหญ่ ใช้ค้นควา้ หาขอ้ มลู 3. ซอื้ สินคา้ และบริการต่าง ๆ ทางอินเทอร์เน็ต 4. ใช้อนิ เตอรเ์ น็ตเพ่ือความบนั เทงิ 5. ใชอ้ นิ เทอรเ์ นต็ เผยแพร่ข้อมลู ข่าวสาร ผ่านทางเว็บไซต์ ภยั จากอินเทอร์เนต็ 1. สอ่ื ลามกผา่ นอินเทอร์เน็ต เชน่ เวบ็ บอรด์ ลับสง่ ภาพหรือไฟล์ลามกผา่ นทางอีเมล์ 2. การแชท (Chat) สนทนาผา่ นทางอินเทอร์เน็ต 3. การติดเกมส์ออนไลน์ 4. การกระทาพฤตกิ รรมท่ีไม่เหมาะสม ทเี่ รียกกันวา่ “เว็บแคม” (Webcam) หรอื โชวส์ ัดส่วนทางแคมฟร็อก (camfrog)

10 การทางานของระบบเวบ็ เพจ บรกิ ารต่าง ๆ ทีม่ ใี นอนิ เทอร์เนต็ 1. เวลิ ด์ ไวด์ เวบ็ (World Wide Web หรือ WWW หรอื W3 หรอื เรยี กกันสัน้ ๆ วา่ “เวบ็ ”) 2. การส่งจดหมายอิเล็กทรอนิกส์หรืออีเมล์ (Electronic Mail : E-mail) 3. การโอนยา้ ยไฟลข์ ้อมลู ดว้ ย FTP (File Transfer Protocol : FTP) เปน็ โปรแกรมสาหรับรับ-สง่ ไฟล์ ศพั ท์ทคี่ วรรูเ้ ก่ียวกบั เว็บ 1. เวบ็ เพจ (Web Page) 2. เว็บไซต์ (Web Site) 3. โฮมเพจ (Homepage) 4. เว็บเซริ ฟ์ เวอร์ (Web Server) 5. เว็บบราวเซอร์ (Web Browser) 6. URL (Uniform Resource Locator) 7. ลิงค์ (Link) 8. เวบ็ มาสเตอร์ (Web Master) 9. แบนเนอร์ (Banner) 10. HTML (HyperText Markup Language)

11 การทางานของระบบเว็บเพจ อนิ ทราเน็ต (INTRANET) คาวา่ “อนิ ทราเน็ต” เป็นระบบการส่ือสารภายในหน่วยงาน เหมือนกับระบบ เครือข่ายข้อมูลภายในองค์กร ทีเ่ รียกวา่ “ระบบแลน” (Local Area Network, LAN) โปรแกรมเวบ็ บราวเซอร์ (Web Browser Program) นยิ มในปัจจบุ ัน คือ โปรแกรม -Microsoft Internet Explorer (IE) -Mozilla Firefox - Google Chrome - Netscape Navigator - โปรแกรม Opera

12 การทางานของระบบเวบ็ เพจ หลักการสรา้ งเวบ็ เพจด้วยภาษา HTML ความเปน็ มาของ HTML  เป็นภาษาท่ีถูกพัฒนาขึน้ โดยองค์กรชอื่ World Wide Web Consortium หรอื W3C  HTML ยอ่ มาจาก Hyper Text Markup Language “Hyper Text” คอื เอกสารท่ีสามารถเปดิ ไปยงั หน้าอ่นื หรือบทอนื่ ได้ไมม่ ีลาดบั “Markup Language” คอื ภาษาทใ่ี ชส้ ญั ลักษณ์สาหรบั บอกขอบเขต สิ่งทต่ี ้องเตรียมกอ่ นเขียน HTML 1. ประเภทของเวบ็ ไซต์ 2. สที ีใ่ ชใ้ นการสร้างเวบ็ เพจ 3. ขนาดความละเอียดท่ีใชข้ องจอภาพ เครอื่ งมือทใ่ี ช้เขียน HTML 1. โปรแกรมประเภทเท็กซ์อีดเิ ตอร์ (Text Editor) 2. โปรแกรมเวบ็ บราวเซอร์ Internet Explorer

13 การทางานของระบบเว็บเพจ โครงสร้างของการเขียนภาษา HTML ส่วนประกอบของเอกสาร HTML มี 2 ส่วน คอื 1. ส่วนท่เี ปน็ ข้อความ ท่ีต้องการให้แสดงบนจอภาพ (ข้อความ) 2. สว่ นท่เี ป็นคาสงั่ (แท็ก) ลกั ษณะของแท็กในภาษา HTML “แทก็ ” (Tag) จะขึน้ ตน้ ด้วย “< ” ตามดว้ ยชื่อแทก็ ปิดท้ายดว้ ย “>” รปู แบบของภาษา HTML ประกอบด้วยบล็อคใหญ่ ๆ 2 สว่ น คือ สว่ น HEAD และ ส่วน BODY โครงสร้างหลกั ของ HTML <!--This is a comment--> <html> <head> <title> ขอ้ ความทตี่ ้องการใหแ้ สดงบนไตเติ้ลบาร์ </title> </head> <body> คาส่งั และข้อความทีต่ ้องการให้แสดงบนบราวเซอร์ </body> </html>

14 การทางานของระบบเว็บเพจ บัตรกิจกรรมที่ 1 คาชี้แจง ใหต้ อบคาถามต่อไปน้ีใหถ้ ูกต้อง (10 คะแนน) 1. ระบบอินเตอรเ์ น็ตหมายถึงอะไร ..................................................................................... ............................................................................................................................. .................. 2. ลักษณะของระบบอนิ เตอร์เนต็ อย่ใู นลกั ษณะใด .............................................................. 3. ไอพี (IP Address) คืออะไร .......................................................................................... 4. บอกประโยชนข์ องอนิ เตอรเ์ นต็ 4.1 …………………………………………………………………………………………………………………….. 4.2 …………………………………………………………………………………………………………………….. 4.3 …………………………………………………………………………………………………………………….. 4.4 …………………………………………………………………………………………………………………….. 4.5 …………………………………………………………………………………………………………………….. 5. บอกโทษที่เกดิ จากอนิ เตอรเ์ น็ต 5.1 …………………………………………………………………………………………………………………….. 5.2 …………………………………………………………………………………………………………………….. 5.3 …………………………………………………………………………………………………………………….. 5.4 …………………………………………………………………………………………………………………….. 6. บริการตา่ ง ๆ ทีม่ ีในอนิ เตอรเ์ น็ตมีอะไรบ้าง 6.1 …………………………………………………………………………………………………………………….. 6.2 …………………………………………………………………………………………………………………….. 7. บอกความหมายของ HTML ............................................................................................ ............................................................................................................................................... 8. บอกสง่ิ ทต่ี ้องเตรียมเขียนก่อน HTML มีอะไรบา้ ง .......................................................... ................................................................................................................................................ 9. เครอื่ งมือทใี่ ช้เขียนก่อน HTML มีอะไรบ้าง .................................................................... ................................................................................................................................................ 10. โครงสรา้ งหลักการเขียน HTML มอี ะไรบา้ ง ................................................................. ......................................................................................................................................... .......

15 การทางานของระบบเวบ็ เพจ บตั รกิจกรรมที่ 2 คาสงั่ ใหน้ กั เรยี นสรา้ ง web ให้แสดงผลทางหนา้ จอประกอบดว้ ย ช่ือ นามสกุล ช้นั เลขที่ พร้อมรูปภาพของนกั เรยี น โรงเรียน หรืออืน่ ๆ ตามความคดิ ของนักเรยี นเอง (10 คะแนน) หมายเหตุ สง่ ครูเป็นไฟล์ บนั ทึกเปน็ ไฟล์ Ex. Ex1-เลขท่ีช่ือนกั เรียน.html (ช่ือไฟลเ์ ปน็ ภาษาองั กฤษ) Ex1-01nattawut.html ส่งงานมาที่ https://classroom.google.com ห้องเรยี นของตนเอง สง่ พมิ พ์หัวข้อ ส่งงาน Ex1 ชือ่ นักเรียน ชัน้ .... เลขท่.ี .... หรือส่ง ทาง Googel Drive

16 การทางานของระบบเว็บเพจ แบบทดสอบหลังเรียน เรอ่ื ง การสร้างเว็บเพจด้วยภาษา HTML รายวิชาเทคโนโลยี 3 รหัสวิชา ง23102 ชั้นมธั ยมศกึ ษาปีท่ี 3 กลมุ่ สาระการเรยี นรู้การงานอาชีพและเทคโนโลยี ชดุ ที่ 1 เรื่อง การทางานของระบบเวบ็ เพจ คาชีแ้ จง นกั เรยี นเลอื กคาตอบท่ีถูกต้องทีส่ ุดเพียงคาตอบเดียว แล้วทาเครอ่ื งหมาย  ลงในกระดาษคาตอบ (10 คะแนน) 1. ข้อใดไม่ใชโ่ ปรแกรมเวบ็ เบราวเ์ ซอร์ ที่ใชส้ าหรบั แสดงผลขอ้ มูลภาษา HTML ก. โน้ตแพด (Notepad) ข. ไฟรฟ์ อกซ์ (Mozilla Firefox) ค. กูเกลิ โครม (Google Chrome) ง. อินเทอรเ์ นต็ เอก็ โพลเรอร์ (Internet Explorer) 2. ขอ้ ใดหมายถงึ เคร่ืองคอมพวิ เตอร์ทใ่ี ห้บรกิ าร (แมข่ ่าย) ก. เวบ็ ไซต์ ข. โฮมเพจ ค. ไคลเอนต์ ง. เซิร์ฟเวอร์ 3. เอชทเี อ็มแอล (HTML) คอื อะไร ก. ระบบปฏบิ ัติการทน่ี ิยมใช้บนเคร่อื ง ข. วิธกี ารเช่อื มโยงข้อมูลระหวา่ งเครือ่ งคอมพวิ เตอร์บนระบบเครือขา่ ยอนิ เทอร์เน็ต ค. เครือ่ งคอมพิวเตอร์ท่ที าหนา้ ท่ใี หบ้ ริการเอกสารเว็บบนระบบเครือขา่ ยอินเทอร์เน็ต ง. ภาษาคอมพิวเตอรท์ ี่ใชส้ าหรบั ควบคุมการแสดงเอกสารบนระบบเครอื ขา่ ยอินเทอรเ์ น็ต 4. ขอ้ ใดใช้สาหรับควบคมุ การแสดงผลของระบบเอชทเี อ็มแอล (HTML) ก. โปรแกรมเวบ็ เบราวเ์ ซอร์ ข. ปา้ ยระบกุ ารแสดงผล หรอื แทก็ ค. เครอื่ งคอมพิวเตอร์ทีใ่ ช้สาหรบั แสดงผลขอ้ มลู ง. ระบบปฏิบตั กิ ารทีใ่ ช้งานบนเคร่ืองคอมพิวเตอร์แม่ข่าย

17 การทางานของระบบเวบ็ เพจ 5. ข้อใดคอื ความหมายของเว็บไซต์ ก. ชดุ เอกสารท่เี ผยแพร่ในอนิ เทอรเ์ นต็ ข. ชือ่ ทีถ่ ูกต้องขึน้ เพื่อใช้เรียกแทนองคก์ ร ค. เว็บเพจแรกสุดทเี่ ข้าถึงก่อนของเวบ็ ไซต์ ง. แหลง่ ท่ีเกบ็ ข้อมูลเวบ็ เพจหลายๆ เวบ็ เพจ 6. HTML เป็นภาษาที่ถูกพัฒนาขึ้นโดยองค์การในข้อใด ก. FTP ข. W3C ค. HTTP ง. WWW 7. ข้อใดกล่าวถึง อนิ เทอร์เนต็ ไม่ถูกตอ้ ง ก. อนิ เทอร์เนต็ หมายถงึ เครอื่ งคอมพวิ เตอรท์ ่มี ีหน้าทเ่ี ปน็ เคร่ืองแม่ข่าย ข. อนิ เทอร์เนต็ เปรียบเสมอื นหอ้ งสมุดขนาดใหญ่ท่ีมแี หลง่ ข้อมูลมากมาย ค. อินเทอรเ์ นต็ หมายถึง ระบบเครือข่ายคอมพวิ เตอร์ท่ีเชื่อมโยงกันทวั่ โลก ง. อินเทอร์เนต็ มีระบบโปรโตคอลทใ่ี ชเ้ ปน็ มาตรฐานในการรับส่งข้อมลู ในระบบเครอื ขา่ ย 8. โปรแกรมใดใชใ้ นการเขียนคาสัง่ HTML ก. DOS ข. Ms-Word ค. Notepad ง. Google Chrome 9. ข้อใดหมายถงึ หมายเลขท่ีใช้รบั การอ้างอิงใหก้ ับเครอื่ งคอมพิวเตอร์ที่เชอ่ื มตอ่ กนั ซง่ึ จะไม่ซ้ากบั เครอื่ งอ่ืนๆ ก. หมายเลข ไอพี ข. หมายเลข โดเมน ค. หมายเลข เครื่อง ง. หมายเลข โปรโตคอล 10. HTML ยอ่ มาจากคาวา่ อะไร ก. Hypertext Manual Language ข. Hyper Text Markup Language ค. Home Text Markup Language ง. Homepage Text Markup Language

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

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

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

21 การทางานของระบบเว็บเพจ

22 การทางานของระบบเวบ็ เพจ บตั รเฉลยกิจกรรมที่ 1 1. ระบบเครือขา่ ยทใี่ หญ่ที่สุด ที่เชอ่ื มต่อคอมพิวเตอรห์ ลายลา้ นเครือ่ งเขา้ ด้วยกนั จนเรยี กกนั ได้วา่ เป็น “เครอื ข่ายท่ีไร้พรมแดน” 2. “ไคลเอนท์-เซริ ์ฟเวอร์” (Client-Server) คือเครือ่ งคอมพวิ เตอร์ที่ ทาหนา้ ทเ่ี ปน็ เซิร์ฟเวอร์ คือ “เครื่องแมข่ ่าย” หรือ ผู้ใหบ้ ริการกบั เครื่องทีเ่ ป็นไคลเอนท์ คือ “เคร่อื งลูกขา่ ย” 3. - เปน็ เสมือนเลขท่ีบา้ นในอนิ เทอร์เนต็ - เปน็ ตวั เลขลว้ น ๆ 4 ชุด แตล่ ะชุดมีคา่ ระหวา่ ง 0-255 คนั่ ด้วยจุด เชน่ 202.146.15.9 หรอื 192.168.50.15 4. บอกประโยชนข์ องอินเตอรเ์ น็ต 4.1 การตดิ ตอ่ ส่ือสาร รบั -สง่ จดหมายผ่านทางอนิ เทอรเ์ นต็ 4.2 อินเทอรเ์ น็ตเหมอื นเป็นห้องสมดุ ขนาดใหญ่ ใชค้ น้ ควา้ หาขอ้ มลู 4.3 ซ้ือสินค้าและบริการตา่ ง ๆ ทางอินเทอรเ์ นต็ 4.4 ใชอ้ ินเตอรเ์ นต็ เพ่ือความบนั เทงิ 4.5 ใช้อินเทอร์เน็ตเผยแพร่ข้อมลู ขา่ วสาร ผ่านทางเว็บไซต์ 5. บอกโทษทเ่ี กดิ จากอนิ เตอร์เน็ต 5.1 ส่อื ลามกผ่านอนิ เทอรเ์ น็ต เชน่ เวบ็ บอร์ดลบั ส่งภาพหรอื ไฟล์ลามกผ่านทางอีเมล์ 5.2 การแชท (Chat) สนทนาผา่ นทางอนิ เทอร์เน็ต 5.3 การตดิ เกมส์ออนไลน์ 5.4 การกระทาพฤตกิ รรมท่ไี ม่เหมาะสม ท่เี รยี กกันวา่ “เวบ็ แคม” (Webcam) หรือ โชว์สดั สว่ นทางแคมฟรอ็ ก (camfrog) 6. บรกิ ารต่าง ๆ ที่มใี นอนิ เตอรเ์ น็ตมีอะไรบา้ ง 6.1 เวิลด์ ไวด์ เว็บ (World Wide Web หรอื WWW หรือ W3 หรือเรียกกันสั้น ๆ ว่า “เวบ็ ”) 6.2 การส่งจดหมายอเิ ลก็ ทรอนิกสห์ รอื อีเมล์ (Electronic Mail : E-mail) 6.3 การโอนยา้ ยไฟล์ข้อมูลดว้ ย FTP (File Transfer Protocol : FTP) เป็นโปรแกรมสาหรับรับ-สง่ ไฟล์

23 การทางานของระบบเวบ็ เพจ 7.  เปน็ ภาษาทถี่ ูกพัฒนาขนึ้ โดยองค์กรช่ือ World Wide Web Consortium หรือ W3C  HTML ย่อมาจาก Hyper Text Markup Language “Hyper Text” คอื เอกสารที่สามารถเปิดไปยงั หนา้ อ่ืนหรือบทอนื่ ได้ไมม่ ลี าดบั “Markup Language” คอื ภาษาทีใ่ ช้สญั ลักษณ์สาหรบั บอกขอบเขต 8. บอกสิ่งทตี่ ้องเตรียมเขียนก่อน HTML มอี ะไรบา้ ง 8.1 ประเภทของเวบ็ ไซต์ 8.2 สีทใี่ ชใ้ นการสร้างเวบ็ เพจ 8.3 ขนาดความละเอยี ดทใ่ี ชข้ องจอภาพ 9. เคร่อื งมือท่ีใชเ้ ขยี นกอ่ น HTML มีอะไรบา้ ง 9.1 โปรแกรมประเภทเท็กซ์อีดเิ ตอร์ (Text Editor) 9.2. โปรแกรมเวบ็ บราวเซอร์ Internet Explorer 10. โครงสร้างหลกั การเขยี น HTML มอี ะไรบา้ ง สว่ นประกอบของเอกสาร HTML มี 2 ส่วน คือ 1. สว่ นท่เี ปน็ ขอ้ ความ ที่ต้องการให้แสดงบนจอภาพ (ข้อความ) 2. สว่ นท่ีเป็นคาสั่ง (แทก็ ) ลกั ษณะของแท็กในภาษา HTML “แทก็ ” (Tag) จะขึ้นตน้ ด้วย “<” ตามดว้ ยชอื่ แทก็ ปิดท้ายดว้ ย “>” รูปแบบของภาษา HTML ประกอบดว้ ยบลอ็ คใหญ่ ๆ 2 ส่วน คอื ส่วน HEAD และ สว่ น BODY

24 การทางานของระบบเวบ็ เพจ บัตรเฉลยกิจกรรมท่ี 2 คาสง่ั ให้นักเรยี นสร้าง web ให้แสดงผลทางหนา้ จอประกอบดว้ ย ชือ่ นามสกลุ ชั้น เลขท่ี พรอ้ มรูปภาพของนักเรยี น โรงเรียน หรอื อ่ืนๆ ตามความคิดของนักเรยี นเอง (10 คะแนน) หมายเหตุ ส่งครเู ป็นไฟล์ บนั ทึกเปน็ ไฟล์ Ex. Ex1-เลขท่ชี ื่อนักเรยี น.html (ช่ือไฟลเ์ ป็นภาษาองั กฤษ) Ex1-01nattawut.html สง่ งานมาที่ https://classroom.google.com หอ้ งเรยี นของตนเอง ส่งพมิ พ์หัวข้อ สง่ งาน Ex1 ชือ่ นักเรียน ชั้น.... เลขที.่ .... หรือสง่ ทาง Googel Drive แนวคาตอบ บัตรเฉลยกจิ กรรมที่ 2 (ตัวอย่างผลงานนกั เรียน)

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

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

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