หน่วยที่ 1

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

สำรบัญ 1 3 คาชี้แจงสาหรบั ครู 5 คาชี้แจงสาหรับนักเรยี น 5 ผลการเรยี นรู้ 5 จดุ ประสงค์การเรยี นรู้ 6 ระยะเวลาในการเรยี นรู้ 13 ใบความรทู้ ่ี 1 เรอ่ื ง ความรูเ้ บื้องต้น 15 ใบงานท่ี 1 เร่ือง ความรูเ้ บ้ืองต้น 22 ใบความรูท้ ี่ 2 เรอื่ ง การใชง้ านโปรแกรม ใบงานท่ี 2 เร่ือง การใช้งานโปรแกรม

หน้าท่ี 1 คำชี้แจงสำหรับครู 1. ศกึ ษาแผนการจดั การเรยี นรูใ้ ห้เข้าใจ ซึ่งประกอบดว้ ยผลการเรียนรู้ สาระสาคญั จดุ ประสงค์การเรียนรู้ สาระการเรียนรู้ กิจกรรมการเรียนรู้ สอ่ื การเรียนการสอน การวดั ผล ประเมนิ ผลการเรยี นรู้ 2. ศึกษาคู่มือการใช้ชุดการเรียนรู้ 3. อธบิ ายและชี้แจงให้นักเรยี นอา่ นคาชแี้ จงสาหรบั นักเรียนอย่างละเอยี ด และปฏบิ ัตติ าม ขั้นตอนจนจบในแตล่ ะหนว่ ย 4. แบง่ กลมุ่ นักเรยี น โดยให้ภายในกลุ่มมสี มาชิกประมาณ 4-5 คน และชแี้ จงให้นักเรยี น ทราบว่าขณะนกั เรยี นศกึ ษาชุดการเรียนรู้ นกั เรียนสามารถถามเพื่อนหรือช่วยเหลอื กนั ภายในกลุม่ ได้ 5. ชีแ้ จงใหน้ ักเรียนทราบว่า นักเรียนสามารถใชเ้ อกสารประกอบการเรียนเล่มนบี้ ันทกึ สรุป ความรู้ควบคู่ไปกับการฝึกปฏิบตั ิได้ (เพื่อลดข้ันตอนในการจดสรปุ เนือ้ หาท่ีเรียนและสามารถนาไป ทบทวนนอกห้องเรยี นได้) 6. การประเมินผล จะพจิ ารณาจากคะแนนแบบฝึกหดั รวมกับคะแนนใบงาน โดยถ้านักเรียน ได้ - คะแนนรอ้ ยละ 80 ขึ้นไป ผ่านเกณฑ์อยูใ่ นระดบั ดีมาก - คะแนนร้อยละ 70-79 ผ่านเกณฑ์อยใู่ นระดับดี - คะแนนรอ้ ยละ 60-69 ผา่ นเกณฑ์อย่ใู นระดบั พอใช้ - คะแนนนอ้ ยกวา่ รอ้ ยละ 60 ไมผ่ า่ นเกณฑ์อยใู่ นระดับปรบั ปรุง 7. ใหน้ กั เรียนทาตามขั้นตอนดังนี้ ช่วั โมงที่ 1-2 7.1 ศึกษาเนื้อหาในชดุ การเรียนรูต้ ามหัวข้อดังน้ี (ใบความร้ทู ่ี 1 เรอ่ื ง ความรู้เบ้ืองต้น) - ความรู้เบ้ืองต้นเกี่ยวกับอนิ เทอรเ์ น็ต - ความรูเ้ บอ้ื งต้นเกีย่ วกบั ภาษา HTML - วิธกี ารเปิดโปรแกรม Notepad - โครงสร้างภาษา HTML

หน้าท่ี 2 7.2 ใหน้ กั เรียนฝกึ ปฏิบตั ติ ามใบความรู้ เม่ือพบปัญหาให้ปรึกษาและขอคาแนะนาจาก เพ่อื นในกลมุ่ ก่อน แต่ถา้ ไมเ่ ข้าใจสามารถปรึกษาและขอคาแนะนาจากครไู ด้ 7.3 ทาใบงานท่ี 1 ด้วยตนเอง 7.4 เมื่อทาเสรจ็ แลว้ ให้ประธานกลุ่มรวบรวมส่งครู ชว่ั โมงที่ 3-4 7.5 ศกึ ษาเน้ือหาในชดุ การเรียนร้ตู ามหัวขอ้ ดังนี้ (ใบความรู้ท่ี 2 เร่อื ง การใช้งาน โปรแกรม) - หลักการตัง้ ชื่อและนามสกุลเวบ็ เพจ - วิธกี ารบนั ทกึ ขอ้ มลู - วธิ กี ารเปดิ โปรแกรม Notepad - วิธกี ารเปิดแฟ้มข้อมลู - วธิ ีการเปิดเว็บเพจบนเวบ็ เบราวเ์ ซอร์ 7.6 ทาใบงานที่ 2 ดว้ ยตนเอง 7.7 ใหน้ กั เรียนฝกึ ปฏบิ ัติตามใบความรู้ เมื่อพบปัญหาให้ปรึกษาและขอคาแนะนาจาก เพ่อื นในกลุ่มกอ่ น แต่ถ้าไม่เข้าใจสามารถปรึกษาและขอคาแนะนาจากครูได้ 7.8 เมื่อทาเสร็จแลว้ ให้ประธานกลุ่มรวบรวมส่งครู

หน้าที่ 3 คำชี้แจงสำหรับนักเรียน 1. ชุดการเรียนร้ไู ดร้ บั การวางแผนออกแบบอยา่ งเปน็ ระบบ นักเรยี นควรศกึ ษาคาแนะนาการ ใช้บทเรียน สาระการเรียนรู้ สาระสาคญั ผลการเรียนรู้ จดุ ประสงค์การเรียนรู้ จากคู่มอื การใช้ บทเรยี น 2. ชดุ การเรียนร้ปู ระกอบด้วย ผลการเรียนรู้ จดุ ประสงค์การเรียนรู้ ระยะเวลาในการเรียนรู้ เนือ้ หา ภาพประกอบ กิจกรรมระหว่างเรียน 3. นกั เรยี นสามารถใช้ชุดการเรียนรูเ้ ล่มนบ้ี ันทึกสรปุ ความรู้ได้ 4. ขณะท่ีนักเรยี นศึกษาชดุ การเรยี นรู้ ควรศึกษาเนื้อหาเรยี งตามลาดับ เน่อื งจาก ชดุ การเรยี นรู้ได้ออกแบบให้ศึกษาเน้ือหาในหัวข้องา่ ยไปหัวขอ้ ยาก 5. หลังจากศึกษาเนอื้ หาในแต่ละหัวข้อจบแลว้ ให้นกั เรยี นฝึกปฏบิ ตั ิตามในแต่ละหัวข้อ เม่ือพบปัญหาใหป้ รึกษาและขอคาแนะนาจากเพ่ือนในกลมุ่ ก่อน แต่ถา้ ไม่เข้าใจสามารถปรึกษาและ ขอคาแนะนาจากครูได้ 6. ขณะศึกษาในชุดการเรยี นรู้ให้นักเรียนปฏิบัตติ ามขัน้ ตอนดงั น้ี ชั่วโมงท่ี 1-2 6.1 ศึกษาเนื้อหาในชุดการเรยี นรู้ตามหวั ขอ้ ดังน้ี (ใบความรู้ที่ 1 เรือ่ ง ความรูเ้ บื้องต้น) - ความรเู้ บ้ืองต้นเก่ียวกบั อินเทอรเ์ น็ต - ความรูเ้ บือ้ งตน้ เก่ียวกับภาษา HTML - วิธีการเปิดโปรแกรม Notepad - โครงสรา้ งภาษา HTML 6.2 นักเรยี นฝกึ ปฏิบตั ิตามใบความรู้ เมื่อพบปัญหาให้ปรึกษาและขอคาแนะนาจาก เพือ่ นภายในกลมุ่ ก่อนปรึกษาครู 6.2 บนั ทกึ สรปุ ความรู้ทไ่ี ดล้ งในสมดุ หรือในเอกสารประกอบการเรยี นเล่มน้ี 6.4 ทาใบงานท่ี 1 ดว้ ยตนเอง 6.5 เมือ่ ทาเสรจ็ แลว้ ให้ประธานกลมุ่ รวบรวมส่งครู

หน้าท่ี 4 ชัว่ โมงท่ี 3-4 6.6 ศึกษาเนื้อหาในชุดการเรียนร้ตู ามหัวขอ้ ดังน้ี (ใบความรู้ท่ี 2 เรื่อง การใชง้ าน โปรแกรม) - หลักการต้ังช่ือและนามสกุลเว็บเพจ - วิธีการบันทึกข้อมลู - วธิ ีการเปดิ โปรแกรม Notepad - วิธีการเปดิ แฟม้ ข้อมูล - วธิ ีการเปิดเว็บเพจบนเว็บเบราวเ์ ซอร์ 6.7 นักเรียนฝกึ ปฏิบตั ติ ามใบความรู้ เม่ือพบปญั หาให้ปรึกษาและขอคาแนะนาจาก เพอื่ นภายในกล่มุ ก่อนปรึกษาครู 6.8 บันทกึ สรปุ ความรูท้ ่ีได้ลงในสมุดหรอื ในเอกสารประกอบการเรียนเล่มน้ี 6.9 ทาใบงานที่ 2 ด้วยตนเอง 6.10 เม่อื ทาเสรจ็ แลว้ ให้ประธานกลุ่มรวบรวมส่งครู

หนา้ ที่ 5 ผลกำรเรียนรู้ 1. อธิบายความรเู้ บือ้ งตน้ เกย่ี วกับอินเทอรเ์ นต็ ได้ (K) 2. ใช้งานอนิ เทอรเ์ นต็ เบ้ืองต้นได้ (P) 3. มเี จตคตทิ ี่ดตี ่อการเรียนวิชา คอมพิวเตอร์ 3 (การสร้างเว็บเพจดว้ ยภาษา HTML) (A) จดุ ประสงคก์ ารเรยี นรู้ 1. อธิบายความรูเ้ บอื้ งตน้ เกี่ยวกบั อนิ เทอร์เน็ตได้ (K) 2. อธบิ ายความรู้เบือ้ งตน้ เก่ยี วกับภาษา HTML ได้ (K) 3. อธิบายโครงสรา้ งภาษา HTML ได้ (K) 4. อธิบายวิธีการเปิดโปรแกรม Notepad ได้ (K) 5. อธบิ ายวิธีการเปิดแฟ้มข้อมูลได้ (K) 6. อธบิ ายวิธีการเปิดเวบ็ เพจบนเวบ็ เบราว์เซอร์ได้ (K) 7. ใชอ้ นิ เทอร์เน็ตเบื้องตน้ ได้ (P) 8. เขยี นโครงสรา้ งภาษา HTML ได้ (P) 9. เปิดโปรแกรม Notepad ได้ (P) 10. เปิดแฟ้มขอ้ มูลได้ (P) 11. เปิดเวบ็ เพจบนเวบ็ เบราวเ์ ซอร์ได้ (P) 12. มเี จตคตทิ ีด่ ีต่อการเรียนวิชาคอมพวิ เตอร์ 3 (A) ระยะเวลำในกำรเรียนรู้ จานวน 4 ช่วั โมง

หนา้ ท่ี 6 ใบความร้ทู ่ี 1 เรือ่ ง ความรเู้ บอ้ื งตน้ หน่วยการเรยี นที่ 1 ความร้เู บื้องต้น ความร้เู บื้องตน้ เกีย่ วกบั อินเทอร์เนต็ อินเทอรเ์ นต็ เปน็ เครือขา่ ยคอมพิวเตอร์ท่ใี หญ่ท่สี ดุ ในโลก เว็บเพจ (Webpage) หมายถึง เอกสารหนึง่ หนา้ หรือเอกสารหนง่ึ ไฟล์ เว็บไซต์ (Website) หมายถงึ การนาเว็บเพจหลายๆ หนา้ มารวมกนั และระบชุ อ่ื ที่อยู่ บนอินเทอรเ์ น็ต เช่น www.pho.ac.th เป็นตน้ และเมื่อเราเปิดเว็บไซต์ขึ้นมาเราจะพบกับหน้าแรก ซึ่งหนา้ แรกน้ี จะเรียกวา่ โฮมเพจ เวบ็ เบราวเ์ ซอร์ (Web Browser) หมายถงึ โปรแกรมที่ใช้สาหรบั เปิดเวบ็ เพจ ซึ่งปจั จบุ นั เว็บเบราว์เซอรท์ ่ไี ดร้ ับความนิยมมีหลายโปรแกรม เชน่ Microsoft Internet Explorer Mozilla Firefox Google Chrome เป็นตน้ ความร้เู บอ้ื งตน้ เกี่ยวกบั ภาษา HTML ภาษา HTML ยอ่ มาจากคาว่า Hyper Text Markup Language ซง่ึ เปน็ ภาษาแรกในการ เขียนโปรแกรมเพอ่ื ให้ข้อมลู แสดงผลบนเครอื ขา่ ยอนิ เทอร์เนต็ ในลักษณะตา่ งๆ เช่น ข้อความ รูปภาพ ภาพเคลอ่ื นไหว และเสยี ง ในการโปรแกรมดว้ ยภาษา HTML จาเปน็ ตอ้ งรู้จักคาศัพท์ต่างๆ ดงั น้ี 1. Text หมายถงึ ขอ้ ความท่ใี ชส้ ่ือสารกบั ผ้เู ขา้ ชมเว็บเพจ 2. Tag หมายถึง คาสง่ั ที่ใชใ้ ห้แสดงผล โดยจะอยูภ่ ายในเครื่องหมาย < และ > เชน่ <BR> อ่านวา่ แท็กบีอาร์ ซ่งึ Tag จะมี 2 ประเภท ดงั น้ี 2.1 แท็กเดยี่ ว เช่น <BR> 2.2 แทก็ คู่ เชน่ <B>…….</B> 3. Attribute หมายถงึ ตวั เลือกยอ่ ยของคาสัง่ ของภาษา HTML ซงึ่ จะทาให้คาสง่ั ตา่ งๆ สามารถใชง้ านไดอ้ ย่างมปี ระสิทธภิ าพมากยิ่งข้นึ 4. คาสง่ั ที่ใช้สามารถพิมพ์เป็นตวั พิมพ์ใหญ่หรือตัวพมิ พ์เล็กก็ได้

หน้าท่ี 7 การสรา้ งเวบ็ เพจโดยใช้ภาษา HTML น้ัน สามารถทาไดโ้ ดยการเปิดโปรแกรม Notepad แลว้ พมิ พ์คาสั่ง HTMLลงไป จากน้ันก็ทาการบนั ทกึ เอกสารโดยต้งั ชอื่ ไฟลเ์ อกสารและกาหนดนามสกุล เปน็ .html จากนน้ั ก็เปิดเวบ็ เบราวเ์ ซอรเ์ พ่ือดผู ล เรามาเริ่มสรา้ งเว็บเพจกนั เลยดีกว่า วธิ ีการเปิดโปรแกรม Notepad 1. คลิกท่ี “ Start” 2. คลิกท่ี “ ” 3. จะได้หนา้ ตา่ งโปรแกรม Notepad 2 1 2

หน้าที่ 8 กิจกรรมระหวา่ งเรียน ใหน้ ักเรยี นฝกึ เปิดโปรแกรม Notepad ขณะฝึกปฏบิ ัติ สามารถถามเพ่ือนในกลุม่ ได้ และเม่อื ฝึกปฏบิ ัติจนเข้าใจแลว้ ให้ นกั เรียนศึกษาหวั ข้อตอ่ ไป โครงสร้างภาษา HTML ไฟล์เอกสาร HTML มสี ่วนประกอบ 2 ส่วน คือ ส่วนหัวเร่อื งเอกสารเว็บ เรยี กว่า แทก็ เฮด <Head>……</Head> กับส่วนเนอ้ื หาเอกสารเวบ็ เรียกว่า แทก็ บอดี้ <Body>……<Body> โดยทัง้ สองส่วนจะอยู่ภายในแท็ก <HTML>……</HTML> รูปแบบ <HTML> <HEAD> สามารถใสแ่ ท็กชือ่ เรื่องของหน้าเว็บ ช่อื ผจู้ ัดทาเวบ็ และคยี ์เวิร์ดสาหรบั การ คน้ หา </HEAD> <BODY> ใส่แทก็ ข้อความ รปู ภาพ ภาพเคลอ่ื นไหว เสียง และอ่นื ๆ ตามตอ้ งการ <BODY> </HTML> ตวั อย่างการใชง้ าน

หน้าที่ 9 กจิ กรรมระหว่างเรยี น ให้นกั เรยี นฝกึ เขียนโครงสร้าง HTML ลงในโปรแกรม Notepad ขณะฝกึ ปฏิบัติสามารถถามเพอื่ นในกลุ่มได้ และเมื่อฝึกปฏบิ ัติจนเข้าใจแลว้ ใหน้ ักเรยี นศกึ ษาหวั ข้อต่อไป 1. ส่วนหัวเรื่องเอกสารเว็บ (Head Section) Head Section เป็นสว่ นทใี่ ชอ้ ธบิ ายเกีย่ วกับข้อมลู เฉพาะของหนา้ เว็บน้นั ๆ เช่น ชื่อเร่ืองของ หนา้ เว็บ (Title) , ชอ่ื ผจู้ ดั ทาเวบ็ (Author) , คยี ์เวิรด์ สาหรับการคน้ หา (Keyword) โดยมี Tag สาคญั คอื ข้อความสี หมายถงึ ใสข่ ้อความอะไรกไ็ ด้ทีเ่ กี่ยวข้องกบั เร่อื งนั้นๆ <HEAD> <TITLE>ขอ้ ความอธบิ ายช่อื เรอ่ื งของหนา้ เวบ็ </TITLE> <META NAME=“Author” CONTENT=“ชอ่ื ผูพ้ ฒั นาเว็บ”> <META NAME=“KeyWords” CONTENT=“ขอ้ ความ 1 , ข้อความ 2”> </HEAD> คาสัง่ กาหนดช่ือเร่อื งของหน้าเว็บ รูปแบบ <TITLE>ขอ้ ความอธิบายชอ่ื เรือ่ งของหน้าเว็บ</TITLE> ข้อความทใ่ี ช้อธิบายช่ือเรอ่ื งของหน้าเว็บ ไมค่ วรพิมพเ์ กนิ 64 ตัวอักษร ไมใ่ ส่ลกั ษณะพิเศษ ควรใส่ข้อความทมี่ ีความหมายครอบคลุมเนื้อหาทง้ั เอกสาร โดยข้อมูลน้จี ะแสดงในส่วนบนสุดของ กรอบหนา้ ตา่ ง Title Bar ของ Window น่ันเอง

หนา้ ที่ 10 ตัวอยา่ งการใช้งาน กจิ กรรมระหว่างเรียน ใหน้ กั เรยี นฝึกใช้คาสง่ั กาหนดช่ือเรื่องของหน้าเวบ็ ลงใน โปรแกรม Notepad ขณะฝึกปฏิบตั สิ ามารถถามเพ่ือนในกลมุ่ ได้ และเม่อื ฝกึ ปฏิบตั จิ นเข้าใจแลว้ ใหน้ ักเรียนศกึ ษาหัวข้อต่อไป คาส่งั กาหนดผู้จัดทา รปู แบบ <META NAME=“Author” CONTENT=“ชื่อผพู้ ัฒนาเว็บ”> ข้อความทก่ี าหนดจะไมแ่ สดงบนหน้าเวบ็ เบราว์เซอร์ แต่จะเปน็ ส่วนสาคัญในการแสดง คลังบญั ชีเวบ็ ตวั อยา่ งการใช้งาน

หนา้ ท่ี 11 กจิ กรรมระหวา่ งเรยี น ให้นกั เรียนฝึกใชค้ าสั่งกาหนดผู้จัดทาลงในโปรแกรม Notepad ขณะฝกึ ปฏิบัตสิ ามารถถามเพือ่ นในกลมุ่ ได้ และเมื่อฝึกปฏิบตั ิจนเขา้ ใจแลว้ ใหน้ ักเรียนศกึ ษาหวั ข้อต่อไป คาสัง่ กาหนดคยี เ์ วริ ด์ รปู แบบ <META NAME=“KeyWords” CONTENT=“ข้อความ 1 , ข้อความ 2”> ขอ้ ความทกี่ าหนดจะไม่แสดงบนหนา้ เวบ็ เบราว์เซอร์ แตจ่ ะเป็นส่วนสาคัญในการแสดง คลังบัญชเี วบ็ สาหรบั ผู้ให้บรกิ ารสืบคน้ เว็บ การกาหนด ข้อความ 1 , ขอ้ ความ 2 ควรกาหนดให้ ครอบคลุมเน้ือหาทง้ั เอกสาร ตวั อยา่ งการใช้งาน กิจกรรมระหวา่ งเรยี น ใหน้ ักเรียนฝกึ ใช้คาสั่งกาหนดคียเ์ วิร์ดลงในโปรแกรม Notepad ขณะฝกึ ปฏิบัติสามารถถามเพื่อนในกลุ่มได้ และเม่ือฝึกปฏบิ ตั จิ นเขา้ ใจแล้ว ให้นักเรียนศึกษาหวั ข้อตอ่ ไป

หนา้ ที่ 12 2. ส่วนเนอื้ หาเอกสารเวบ็ (Body Section) เปน็ สว่ นเน้อื หาหลักของหน้าเวบ็ ซ่ึงการแสดงผลตอ้ งใช้ Tag จานวนมากในการแสดงผล ซง่ึ Tag ที่ใชจ้ ะขึน้ อยูก่ ับขอ้ มูลทีต่ ้องการใหแ้ สดง เชน่ ถ้าต้องการให้แสดงผลเป็นรูปภาพ ก็ตอ้ งใช้ Tag <img src> เป็นตน้ ท้ังนี้ต้องป้อนคาสั่งท้ังหมดลงใน Tag <body>……</body> หมายเหตุ การพิมพค์ าสง่ั ควรมกี ารระเบยี บของ code โดยควรจัดยอ่ หนา้ แท็กเปิด และแท็กปดิ ให้ ตรงกนั เนื่องจากเวลาไลด่ ู code แล้วจะดไู ดง้ ่ายข้ึน เม่ือศกึ ษาและฝึกปฏบิ ตั ิจนเข้าใจแล้วใหน้ กั เรยี นทาใบงานที่ 1

หนา้ ที่ 13 ใบงานท่ี 1 เร่ือง ความรู้เบ้ืองตน้ หน่วยท่ี 1 ความรูเ้ บอื้ งตน้ ชื่อ……………………………………………………………………………ชน้ั มธั ยมศกึ ษาปที ี่ ………….. เลขท่ี………….. คาชีแ้ จง ให้นกั เรยี นตอบคาถามดังต่อไปนี้ 1. เวบ็ เพจ (Webpage) หมายถึง …………………………………………………………………………………………….. ………………………………………………………………………………………………………………………………(1 คะแนน) 2. เวบ็ เบราวเ์ ซอร์ (Web Browser) หมายถงึ ……………………………………………………………………………. ………………………………………………………………………………………………………………………………(1 คะแนน) 3. Tag หมายถึง …………………………………………………………………………………………………………………….. ………………………………………………………………………………………………………………………………(1 คะแนน) 4. โครงสรา้ ง HTML แบ่งออกเป็น……………………..สว่ น คอื (จงอธิบายให้ละเอียด)…………………………. ……………………………………………………………………………………………………………………………………………... ………………………………………………………………………………………………………………………………(2 คะแนน) 5. คาส่งั <title>…..<title> เปน็ คาสัง่ ทตี่ ้องกาหนดสว่ น………………………ของเอกสาร (1 คะแนน) 6. Tag มี……………………..ประเภท คือ ……………………………………………………………………………………... ………………………………………………………………………………………………………………………………(2 คะแนน) 7. เว็บเพจกับเว็บไซต์แตกตา่ งกนั อยา่ งไร (จงอธิบายใหล้ ะเอยี ด) ………………………………………………… ………………………………………………………………………………………………………………………………(2 คะแนน)

หน้าท่ี 14 เกณฑก์ ารให้คะแนน ทาถกู ตอ้ ง ให้ 1 คะแนน ทาผิด ให้ 0 คะแนน เกณฑ์การประเมินผล นกั เรยี นได้คะแนน 8-9 คะแนน ผา่ นเกณฑ์ อยใู่ นระดับดมี าก อยู่ในระดบั ดี นักเรียนได้คะแนน 7 คะแนน ผ่านเกณฑ์ อยใู่ นระดบั พอใช้ อยใู่ นระดบั ต้องปรบั ปรุง นกั เรยี นได้คะแนน 6 คะแนน ผา่ นเกณฑ์ นักเรยี นได้คะแนน 0-5 คะแนน ไมผ่ ่านเกณฑ์

หนา้ ที่ 15 ใบความร้ทู ่ี 2 เร่ือง การใชง้ านโปรแกรม หน่วยการเรยี นที่ 1 ความรูเ้ บอ้ื งต้น กจิ กรรมทบทวนความรูเ้ ดิม ใหน้ ักเรียนทบทวนความรู้เดิม โดยฝึกใช้คาสั่งเปิดโปรแกรม Notepad โครงสรา้ ง HTML คาส่งั กาหนดชอื่ เรือ่ งของหนา้ เว็บ คาส่ังกาหนดผู้จดั ทา คาสั่ง กาหนดคียเ์ วิร์ด ขณะทบทวนสามารถถามเพอ่ื นในกลุ่มได้ และเม่ือทบทวนจน เข้าใจแลว้ ใหน้ กั เรียนศึกษาหัวข้อต่อไป หลักในการตัง้ ชอื่ และนามสกุลเว็บเพจ 1. ควรใชต้ วั อกั ษร a-z ตัวเลข 0-9 2. ควรใชต้ วั อกั ษรพิมพ์เล็กในการต้งั ชอ่ื 3. ไม่ควรเว้นวรรคชอ่ งวา่ งภายในชื่อ 4. หา้ มใชอ้ ักขระพิเศษในการต้งั ชอ่ื ยกเวน้ Underscore (ขดี ลา่ ง) หรือ Dash (ขีดกลาง) 5. ชือ่ แฟม้ ข้อมลู แรกของเวบ็ เพจ ควรใช้ index.html หรือ index.htm วธิ กี ารบันทึกขอ้ มลู 1. คลกิ ที่ “ ” 2. เลือกที่ 2.1 คลกิ ที่ “ ” ถ้าเคยบนั ทึกข้อมลู น้ีแล้วเครือ่ งจะทา การบันทึกขอ้ มูลลงไปในชื่อเดิมอตั โนมัติ แต่ถา้ เปน็ การบันทึกครง้ั แรก จะต้องทาข้อ 3 ต่อ 2.2 คลิกท่ี “ ”เมื่อตอ้ งการบันทกึ เปน็ อีกชอ่ื หนง่ึ หรือ สาเนาไปเกบ็ ไวท้ ่ีอ่นื

หน้าท่ี 16 1 2.1 2.2 3. คลิกท่ชี อ่ ง “save in” เพ่ือเลือกไดร์และโฟลเดอร์ที่ต้องการนาข้อมูลไปเก็บไว้ 4. คลกิ ทช่ี ่อง “File name” เพ่ือพิมพ์ชอ่ื ไฟล์งาน และตอ้ งใส่นามสกุล .html เชน่ history.html ถา้ ไมใ่ ส่ .html ไฟลง์ านจะเปน็ นามสกุล .txt ซ่งึ ไฟล์งานนี้จะไม่สามารถเปิดบนหนา้ เว็บเบราว์เซอร์ได้ และไฟล์งานนีก้ ค็ อื เว็บเพจ 1 หน้านน่ั เอง 5. คลกิ ท่ี “ ” 3 4 5 กิจกรรมระหว่างเรยี น ใหน้ กั เรียนฝึกบนั ทกึ ข้อมูล ขณะฝกึ ปฏิบตั ิสามารถถามเพื่อน ในกลมุ่ ได้ และเมอื่ ฝึกปฏบิ ตั ิจนเขา้ ใจแล้ว ใหน้ ักเรียนศึกษาหวั ขอ้ ต่อไป

วธิ ีการปดิ โปรแกรม Notepad หน้าท่ี 17 วิธีท่ี 2 วิธที ี่ 1 ” 1. คลกิ ที่ “ ” 2. คลิกที่ “ วิธีท่ี 2 คลิกท่ี “ ” 1 2 กิจกรรมระหวา่ งเรยี น ให้นกั เรียนฝึกปิดโปรแกรม Notepad ขณะฝกึ ปฏบิ ตั ิสามารถถามเพอื่ น ในกลมุ่ ได้ และเมอ่ื ฝึกปฏิบัติจนเข้าใจแลว้ ใหน้ กั เรียนศกึ ษาหัวข้อต่อไป

หนา้ ที่ 18 วธิ กี ารเปิดแฟม้ ข้อมลู วิธี 1 การใชโ้ ปรแกรม File Explorer เปดิ แฟม้ ขอ้ มูล 1. คลิกท่ีโปรแกรม File Explorer ท่แี ถบ Task Bar “ ” 2. คลิกเลือก “ไดร์ และโฟลเดอร์” ท่ีเกบ็ แฟม้ ข้อมลู ไว้ (ถา้ ชื่อไดรแ์ ละโฟลเดอร์อยู่ ฝ่ังซา้ ยมอื ให้คลิก แต่ถา้ อยู่ฝั่งทางขวามือใหด้ บั เบ้ลิ คลกิ ) 3. คลิกขวา “ช่อื แฟ้มข้อมลู ” ท่ีตอ้ งการเปิด 4. เลื่อนไปที่ “Open” 5. คลกิ ที่ “Notepad” 3 4 5 2 1

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

หนา้ ท่ี 20 วธิ ีการเปิดเว็บเพจบนเวบ็ เบราวเ์ ซอร์ วิธีที่ 1 เปดิ จากโปรแกรม Google Chrome 1. ดบั เบล้ิ คลกิ ท่ี “ไอคอน ” 2. พิมพ์ชือ่ ไดร์ ชื่อโฟลเดอร์ และชอ่ื ไฟล์งานทีต่ ้องการเปิด 2 วิธที ี่ 2 เปดิ จากโปรแกรม Microsoft Edge 1. ดบั เบล้ิ คลกิ ท่ี “ไอคอน ” 2. พิมพ์ชอ่ื ไดร์ ชือ่ โฟลเดอร์ และช่อื ไฟลง์ านที่ต้องการเปดิ 2 ข้อสังเกตการเปิดเวบ็ เพจบนเว็บเบราว์เซอร์แตล่ ะโปรแกรม ไมว่ า่ จะเปิดเว็บเพจบนเว็บเบราวเ์ ซอร์จากโปรแกรมอะไรก็ตาม สง่ิ แรกที่ตอ้ งทาก็คอื เปิด โปรแกรมท่ตี ้องการใชข้ ึ้นมา (ซงึ่ จะขนึ้ อยู่กับความต้องการของเราว่าต้องการใชเ้ บราวเ์ ซอรอ์ ะไร) และส่ิงที่ 2 ไม่ว่าจะใชบ้ ราวเซอรไ์ หนก็ตามกต็ ้องทาสิง่ น้ี นั่นกค็ ือ พมิ พช์ ือ่ ไดร์ ชอื่ โฟลเดอร์ และชื่อ ไฟล์งานที่ตอ้ งการเปดิ ในช่อง Address

หนา้ ท่ี 21 วิธีท่ี 3 ใช้โปรแกรม File Explorer เปดิ 1. คลกิ ที่โปรแกรม File Explorer ทแี่ ถบ Task Bar “ ” 2. คลกิ เลือก “ไดร์ และโฟลเดอร์” ที่เก็บแฟม้ ขอ้ มลู ไว้ (ถา้ ช่อื ไดร์และโฟลเดอร์อยู่ฝั่ง ซ้ายมือใหค้ ลกิ แต่ถ้าอยู่ฝง่ั ทางขวามือให้ดบั เบล้ิ คลิก) 3. คลิกขวา “ชือ่ แฟ้มข้อมูล” ท่ีตอ้ งการเปิด 4. เล่อื นไปที่ “Open” 5. คลิกที่ “Google Chrome หรือ Microsoft Edge” เพอ่ื เลอื กเว็บเบราวเ์ ซอร์ทตี่ อ้ งการ เปดิ ใชง้ าน 3 5 4 2 1 กจิ กรรมระหวา่ งเรยี น ใหน้ ักเรียนฝึกเปิดเวบ็ เพจโดยใชเ้ ว็บเบราว์เซอร์ Google Chrome Microsoft Edge และใชโ้ ปรแกรม Explorer เปิดเว็บเบราว์เซอร์ ขณะฝึก ปฏิบตั สิ ามารถถามเพ่ือนในกลมุ่ ได้ และเม่ือฝกึ ปฏบิ ัติจนเข้าใจแลว้ ให้นักเรียน ทาใบงานที่ 2

หน้าที่ 22 ใบงานที่ 2 เร่อื ง การใชง้ านโปรแกรม หน่วยท่ี 1 ความร้เู บ้ืองต้น ช่อื ……………………………………………………………………………ช้ันมัธยมศึกษาปีที่ ………….. เลขท่ี………….. คาช้ีแจง ให้นักเรยี นฝกึ ปฏบิ ตั ดิ ว้ ยตนเองตามลาดบั ข้อที่กาหนด 1. จงเปดิ โปรแกรม Notepad พร้อมทั้งบนั ทึกขัน้ ตอนการปฏิบตั ิอยา่ งละเอยี ดลงในช่องว่าง ............................................................................................................................. ..................... .............................................................................................................. .................................................. ............................................................................................................................. ................................... ................................................................................................................................................................ ............................................................................................................................. ................................... 2. จงพมิ พ์โครงสรา้ งของภาษา HTML พร้อมทง้ั บันทกึ ขั้นตอนการปฏิบตั ิอยา่ งละเอียดลงใน ชอ่ งวา่ ง ............................................................................................................................. ..................... .............................................................................................................. .................................................. ............................................................................................................................. ................................... ................................................................................................................................................................ ............................................................................................................................. ................................... ............................................................................................................................. ................................... 3. จงบันทกึ ข้อมลู ลงใน Falsh Drive โดยใหต้ ง้ั ชื่อว่า test พรอ้ มท้ังบันทึกขั้นตอนการปฏิบตั ิ อยา่ งละเอยี ดลงในช่องวา่ ง ............................................................................................................................. ..................... ................................................................................................................................................................ ............................................................................................................................. ................................... ................................................................................................................................ ................................ .................................................................................................. .............................................................. ............................................................................................................................. ...................................

หนา้ ท่ี 23 4. จงปดิ แฟ้มขอ้ มลู ท่ชี ่อื test พร้อมทง้ั บนั ทึกข้ันตอนการปฏบิ ตั อิ ยา่ งละเอียดลงในช่องว่าง ............................................................................................................................. ..................... ................................................................................................................................................................ ............................................................................................................................. ................................... 5. จงเปดิ แฟม้ ขอ้ มลู test บนโปรแกรม Note pad พรอ้ มทง้ั บันทกึ ขนั้ ตอนการปฏบิ ตั ิอยา่ ง ละเอยี ดลงในช่องวา่ ง ............................................................................................................................. ..................... .............................................................................................................. .................................................. ............................................................................................................................. ................................... ................................................................................................................................................................ ............................................................................................................................. ................................... ............................................................................................................................. ................................... 6. จงเปิดแฟม้ ขอ้ มลู test โดยใชโ้ ปรแกรม File Explorer พรอ้ มทัง้ บนั ทึกขัน้ ตอนการปฏบิ ตั ิ อยา่ งละเอียดลงในช่องวา่ ง ............................................................................................................................. ..................... .............................................................................................................. .................................................. ............................................................................................................................. ................................... ................................................................................................................................................................ ............................................................................................................................. ................................... ............................................................................................................................. ................................... 7. จงเปิดแฟม้ ขอ้ มูล test โดยใช้โปรแกรม File Explorer พรอ้ มทั้งบันทึกข้นั ตอนการปฏบิ ัติ อยา่ งละเอียดลงในช่องว่าง ............................................................................................................................. ..................... ................................................................................................................................................................ ............................................................................................................................. ................................... .................................................................................................................................... ............................ ...................................................................................................... .......................................................... ............................................................................................................................. ...................................

หน้าท่ี 24 8. จงเปิดแฟม้ ข้อมูล test บนเว็บเบราว์เซอร์ Microsoft Edge พรอ้ มทง้ั บันทึกข้นั ตอนการ ปฏิบัตอิ ยา่ งละเอียดลงในช่องว่าง ............................................................................................................................. ..................... ................................................................................................................................................. ............... ................................................................................................................... ............................................. ............................................................................................................................. ................................... ................................................................................................................................................................ ............................................................................................................................. ................................... 9. จงเปิดแฟ้มข้อมูล test บนเว็บเบราวเ์ ซอร์ Microsoft Edge พร้อมทั้งบันทกึ ข้ันตอนการ ปฏบิ ัติอย่างละเอียดลงในช่องวา่ ง ............................................................................................................................ ...................... ............................................................................................................................. ................................... ................................................................................................................................................................ ............................................................................................................................. ................................... .................................................................................................................................... ............................ ...................................................................................................... .......................................................... 10. เปิดแฟ้มขอ้ มลู test บนเว็บเบราวเ์ ซอร์ โดยใชโ้ ปรแกรม File Explorer พร้อมท้งั บันทกึ ขัน้ ตอนการปฏบิ ัตอิ ย่างละเอียดลงในชอ่ งวา่ ง ............................................................................................................................. ..................... .............................................................................................................. .................................................. ............................................................................................................................. ................................... ................................................................................................................................................................ ............................................................................................................................. ................................... ............................................................................................................................. ...................................

หน้าท่ี 25 เกณฑก์ ารให้คะแนน ทาถกู ตอ้ ง ให้ 1 คะแนน ทาผิด ให้ 0 คะแนน เกณฑ์การประเมนิ ผล นักเรยี นได้คะแนน 9-11 คะแนน ผา่ นเกณฑ์ อยใู่ นระดบั ดมี าก อยใู่ นระดับดี นักเรียนได้คะแนน 8 คะแนน ผ่านเกณฑ์ อยใู่ นระดับพอใช้ อยู่ในระดับตอ้ งปรบั ปรุง นกั เรียนได้คะแนน 7 คะแนน ผา่ นเกณฑ์ นกั เรียนได้คะแนน 0-6 คะแนน ไมผ่ า่ นเกณฑ์ รายการประเมนิ ผลการปฏบิ ัติ ทาถกู ต้อง ทาผดิ รายการประเมนิ (1 คะแนน) (0 คะแนน) 1. เปดิ โปรแกรม Notepad ได้ 2. กาหนดโครงสร้าง HTML ถูกต้อง 3. มีการจดั ระเบียบ code 4. ตง้ั ชอื่ แฟม้ ข้อมลู ว่า test 5. ใสน่ ามสกลุ แฟม้ ข้อมลู test ว่า htm หรือ html 6. บนั ทกึ แฟ้มข้อมลู test ไวท้ ่ี Flash Drive 7. ปดิ แฟม้ ข้อมูล test ได้ 8. เปดิ แฟ้มข้อมลู test บนโปรแกรม Note pad ได้ 9. เปิดแฟ้มข้อมลู test โดยใชโ้ ปรแกรม File Explorer ได้ 10. เปดิ แฟม้ ข้อมลู test บนเว็บเบราวเ์ ซอร์ Microsoft Edge ได้ 11. เปิดแฟ้มขอ้ มลู test บนเว็บเบราวเ์ ซอร์ โดยใชโ้ ปรแกรม File Explorer เปิดได้ รวมคะแนน (คะแนนเตม็ 11 คะแนน)