หน่วยที่ 3

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

สำรบัญ 1 4 คาช้ีแจงสาหรับครู 7 คาชแ้ี จงสาหรบั นักเรยี น 7 ผลการเรียนรู้ 8 จุดประสงค์การเรยี นรู้ 9 ระยะเวลาในการเรียนรู้ 13 ใบความรู้ที่ 1 เรื่อง การแสดงผลรายการ 15 ใบงานที่ 1 เรือ่ ง การแสดงผลรายการ 22 ใบความรู้ที่ 2 เรอ่ื ง การแสดงผลรายการแบบมีลาดับ 24 ใบงานที่ 2 เรอ่ื ง การแสดงผลรายการแบบมลี าดับ 31 ใบความรทู้ ี่ 3 เรือ่ ง การแสดงผลรายการแบบไมม่ ลี าดับ 33 ใบงานท่ี 3 เร่อื ง การแสดงผลรายการแบบไมม่ ลี าดบั 39 ใบความรทู้ ่ี 4 เร่ือง รูปภาพ ใบงานที่ 4 เรอื่ ง รูปภาพ

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

หนา้ ท่ี 2 6.3 ทาใบงานที่ 1 ดว้ ยตนเอง 6.4 เมอ่ื ทาเสร็จแล้วให้ประธานกลมุ่ รวบรวมส่งครู ชั่วโมงที่ 3-4 6.5 ศึกษาเนื้อหาในชดุ การเรียนรตู้ ามหวั ข้อดังนี้ (ใบความรทู้ ี่ 2 เร่ือง การแสดงผล รายการแบบมลี าดับ) - คาสั่งการแสดงผลรายการย่อย - คาสั่งการแสดงผลรายการแบบมเี ลขอารบิกหน้าข้อ - คาสั่งการแสดงผลรายการแบบมีตวั อกั ษรหน้าข้อ - คาส่งั การแสดงผลรายการแบบมีเลขโรมนั หนา้ ข้อ - คาสง่ั กาหนดค่าเร่ิมต้นของลาดบั 6.6 ใหน้ ักเรียนฝึกปฏิบัติตามใบความรู้ เมื่อพบปัญหาใหป้ รึกษาและขอคาแนะนาจาก เพือ่ นในกลมุ่ กอ่ น แต่ถา้ ไม่เข้าใจสามารถปรึกษาและขอคาแนะนาจากครูได้ 6.7 ทาใบงานที่ 2 ดว้ ยตนเอง 6.8 เม่อื ทาเสรจ็ แล้วให้ประธานกลุม่ รวบรวมส่งครู ชว่ั โมงที่ 5-6 6.9 ศกึ ษาเนื้อหาในชดุ การเรียนรตู้ ามหวั ขอ้ ดังนี้ (ใบความรทู้ ี่ 3 เร่อื ง การแสดงผล รายการแบบไม่มีลาดบั ) - คาสั่งแสดงผลรายการกรณไี มก่ าหนดสญั ลักษณห์ น้าข้อ - คาสง่ั แสดงผลรายการกรณีกาหนดสัญลักษณ์หนา้ ข้อเป็นวงกลมโปร่งแสง - คาสง่ั แสดงผลรายการกรณีกาหนดสัญลกั ษณ์หนา้ ข้อเปน็ สี่เหล่ยี มทึบแสง - คาสง่ั แสดงผลรายการกรณีกาหนดสญั ลักษณ์หน้าข้อเปน็ วงกลมทึบแสง - คาสง่ั แสดงผลรายการกรณีกาหนดสญั ลักษณห์ นา้ ข้อไม่เหมอื นกนั 6.10 ใหน้ กั เรียนฝกึ ปฏบิ ตั ติ ามใบความรู้ เม่ือพบปญั หาให้ปรกึ ษาและขอคาแนะนาจาก เพื่อนในกลมุ่ กอ่ น แต่ถา้ ไมเ่ ข้าใจสามารถปรึกษาและขอคาแนะนาจากครไู ด้ 6.11 ทาใบงานท่ี 3 ดว้ ยตนเอง 6.12 เมื่อทาเสร็จแล้วให้ประธานกลุ่มรวบรวมส่งครู

หนา้ ที่ 3 ช่ัวโมงที่ 7-8 6.13 ศกึ ษาเนือ้ หาในชดุ การเรยี นร้ตู ามหัวขอ้ ดงั น้ี (ใบความรทู้ ี่ 4 เรอื่ ง รปู ภาพ) - คาส่งั แทรกรูปภาพ - คาสงั่ กาหนดความกวา้ งและความสูงของรูปภาพ - คาสัง่ กาหนดรูปภาพใหอ้ ยู่ก่ึงกลางหนา้ จอ - คาสง่ั กาหนดเสน้ กรอบให้กับรปู ภาพ - คาสง่ั กาหนดพน้ื หลังเอกสารใหเ้ ป็นรูปภาพ 6.14 ให้นกั เรียนฝึกปฏิบัตติ ามใบความรู้ เม่ือพบปญั หาให้ปรกึ ษาและขอคาแนะนาจาก เพอื่ นในกลุม่ กอ่ น แต่ถา้ ไมเ่ ข้าใจสามารถปรึกษาและขอคาแนะนาจากครูได้ 6.15 ทาใบงานที่ 4 ด้วยตนเอง 6.16 เม่อื ทาเสร็จแล้วให้ประธานกล่มุ รวบรวมส่งครู

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

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

หนา้ ที่ 6 6.14 นักเรียนฝกึ ปฏบิ ัติตามใบความรู้ เมอื่ พบปญั หาให้ปรึกษาและขอคาแนะนา จากเพ่ือนภายในกลุ่มก่อนปรึกษาครู บนั ทกึ สรุปความรู้ทไ่ี ดล้ งในสมดุ หรอื ในเอกสารประกอบ การเรียนเลม่ นี้ 6.15 ทาใบงานที่ 4 ดว้ ยตนเอง 6.16 เมอ่ื ทาเสรจ็ แล้วให้ประธานกลุ่มรวบรวมส่งครู

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

หนา้ ที่ 8 18. อธบิ ายวธิ ีการใช้คาส่ังกาหนดพนื้ หลงั เอกสารให้เป็นรปู ภาพได้ (K) 19. ใชค้ าสั่งการแสดงผลรายการได้ (P) 20. ใชค้ าสั่งแสดงผลรายการแบบกลุม่ คาได้ (P) 21. ใชค้ าสง่ั แสดงผลรายการแบบท่อี ยู่ได้ (P) 22. ใช้คาสั่งการแสดงรายการย่อยได้ (P) 23. ใช้คาสง่ั การแสดงผลรายการแบบมเี ลขอารบิกหนา้ ข้อได้ (P) 24. ใชค้ าสั่งการแสดงผลรายการแบบมีตวั อักษรหนา้ ข้อได้ (P) 25. ใช้คาสง่ั การแสดงผลรายการแบบมีเลขโรมนั หน้าข้อได้ (P) 26. ใช้คาสง่ั กาหนดคา่ เริ่มต้นของลาดับ (P) 27. ใชค้ าสั่งแสดงผลรายการกรณไี มก่ าหนดสัญลักษณ์หน้าข้อได้ (P) 28. ใชค้ าสง่ั แสดงผลรายการกรณกี าหนดสัญลักษณห์ น้าข้อเปน็ วงกลม โปรง่ แสงได้ (P) 29. ใชค้ าสง่ั แสดงผลรายการกรณีกาหนดสญั ลักษณ์หนา้ ข้อเปน็ สเ่ี หล่ยี ม ทึบแสงได้ (P) 30. ใช้คาสั่งแสดงผลรายการกรณีกาหนดสญั ลักษณ์หน้าข้อเปน็ วงกลมทึบแสงได้ (P) 31. ใช้คาส่งั แสดงผลรายการกรณกี าหนดสญั ลักษณ์หน้าข้อไม่เหมอื นกนั ได้ (P) 32. ใชค้ าสั่งแทรกรปู ภาพได้ (P) 33. ใช้คาสั่งการกาหนดความกวา้ งและความสูงของรูปภาพได้ (P) 34. ใชค้ าสง่ั กาหนดรูปภาพให้อยู่กึ่งกลางหน้าจอได้ (P) 35. ใช้คาสั่งกาหนดเสน้ กรอบให้รปู ภาพได้ (P) 36. ใช้คาสั่งกาหนดพืน้ หลงั เอกสารใหเ้ ปน็ รูปภาพได้ (P) 37. มีเจตคตทิ ดี่ ตี อ่ การเรยี นวชิ าคอมพิวเตอร์ 3 (A) ระยะเวลาในการเรียนรู้ จานวน 8 ชว่ั โมง

หนา้ ที่ 9 ใบความรู้ท่ี 1 เรือ่ ง การแสดงผลรายการ หน่วยการเรยี นที่ 3 การแสดงผลรายการและรูปภาพ กจิ กรรมทบทวนความรู้เดิม ใหน้ กั เรียนทบทวนความร้เู ดิม โดยฝกึ ใชค้ าส่ังกาหนดขนาด ตัวอักษร คาสง่ั กาหนดสีตัวอักษร คาสัง่ กาหนดแบบอกั ษร คาสง่ั กาหนดสี ใหก้ บั ตัวอกั ษรทั้งเอกสาร คาส่ังกาหนดตวั อักษรเคลือ่ นท่ี ขณะทบทวน สามารถถามเพื่อนในกลุ่มได้ และเมอ่ื ทบทวนจนเข้าใจแลว้ ให้นกั เรยี น ศึกษาหัวข้อต่อไป คาสั่งการแสดงผลรายการ งงง รปู แบบ <DL> <DT>หวั ข้อ</DT> <DD>คาอธิบาย</DD> <DD>คาอธบิ าย</DD> <DT>หัวข้อ</DT> <DD>คาอธิบาย</DD> …… …… </DL> โดย <DL>…..</DL> ใชส้ าหรบั บอกขอบเขตของรายการท้งั หมด <DT>…..</DT> ใช้สาหรับแสดงหวั ขอ้ <DD>…..</DD> ใช้สาหรบั จดั ยอ่ หน้าในการแสดงคาอธิบาย

หนา้ ท่ี 10 ตวั อย่างการใช้งาน <DL> <DT>ประวัตโิ รงเรียนโพธสิ ัมพันธ์พิทยาคาร</DT> <DD>ปกี ารศกึ ษา 2534 โรงเรียนเข้าประกวดรางวัลพระราชทาน ประเภทโรงเรยี นดีเดน่ ขนาดใหญ่ และไดร้ บั รางวัลในปีพุทธศักราช 2535 อนั เปน็ เกียรติประวัติสงู ส่ง และจากการเพ่ิมของจานวนนักเรยี นท่มี ีมากขน้ึ จึงไดข้ องบประมาณจดั สรา้ งอาคารเรยี นแบบพิเศษ 6 ชั้น เปน็ หลงั แรกของ ประเทศไทยดาเนินการแลว้ เสร็จเม่ือปีพุทธศกั ราช 2539 และใหช้ ื่ออาคาร วา่ “อาคารเฉลมิ พระเกียรติ” </DD> </DL> กจิ กรรมระหว่างเรียน ให้นกั เรยี นฝกึ ใชค้ าส่ังการแสดงผลรายการ ขณะฝึกปฏิบัตสิ ามารถ ถามเพอ่ื นในกลมุ่ ได้ และเมื่อฝกึ ปฏิบัติจนเข้าใจแล้ว ใหน้ ักเรยี นศึกษาหัวข้อตอ่ ไป

หน้าท่ี 11 คาสัง่ การแสดงผลรายการแบบกลุม่ คา งงง การแสดงผลรายการแบบกลุ่มคา เป็นการกาหนดการแสดงผลข้อความให้มขี นาดเท่ากนั ทุกตัว ซึ่งสามารถแสดงข้อมูลในรูปแบบตาราง แผนผังฯ ซ่ึงหนา้ เบราว์เซอร์จะแสดงผลเหมอื นใน เอกสารเอชทีเอ็มแอล รปู แบบ <PRE>………</PRE> ตวั อยา่ งการใช้งาน กจิ กรรมระหวา่ งเรยี น ให้นักเรยี นฝกึ ใชค้ าสงั่ การแสดงผลรายการแบบกลุ่มคา ขณะฝกึ ปฏิบตั ิสามารถถามเพอ่ื นในกลุม่ ได้ และเมื่อฝึกปฏิบัตจิ นเขา้ ใจแล้ว ให้นกั เรียนศึกษาหัวข้อต่อไป

หน้าที่ 12 คาส่งั การแสดงผลรายการแบบทอ่ี ยู่ งงง การแสดงรายการแบบท่ีอยู่เป็นการกาหนดการแสดงผลข้อความที่เปน็ ท่ีอย่ขู องหนว่ ยงาน หรือผู้พฒั นาเวบ็ ไซต์ ซงึ่ รูปแบบตัวอกั ษรจะเป็นตวั เอยี ง รปู แบบ <ADDRESS>………</ADDRESS> ตัวอย่างการใชง้ าน กจิ กรรมระหว่างเรยี น ใหน้ ักเรียนฝกึ ใช้คาสงั่ การแสดงผลรายการแบบที่อยู่ ขณะฝกึ ปฏบิ ัติ สามารถถามเพื่อนในกลมุ่ ได้ และเมอ่ื ฝกึ ปฏบิ ัตจิ นเข้าใจแลว้ ให้นกั เรียน ทาใบงานท่ี 1

หนา้ ที่ 13 ใบงานที่ 1 เรอื่ ง การแสดงผลรายการ หน่วยที่ 3 การแสดงผลรายการและรปู ภาพ ช่ือ……………………………………………………………………………ช้ันมธั ยมศกึ ษาปที ี่ ………….. เลขที่………….. คาชี้แจง ใหน้ ักเรียนสรา้ งเวบ็ เพจให้เหมือนด้านลา่ งและบันทกึ แฟม้ ข้อมลู ไว้ใน Flash Drive และต้งั ชอื่ วา่ person.html โดยบังคบั ใช้คาส่งั ดังต่อไปน้ี คาสงั่ หัวเร่อื งเอกสารเว็บ คาส่ังการแสดงผลรายการ คาสงั่ กาหนดลักษณะหวั เรื่องท่มี ีขนาดใหญ่ระดบั 2 คาสงั่ เวน้ บรรทดั คาส่งั การแสดงผลรายการแบบกลมุ่ คา คาสั่งการแสดงผลรายการแบบทอ่ี ยู่

หน้าท่ี 14 เกณฑ์การให้คะแนน ทาถูกตอ้ ง ให้ 1 คะแนน ทาผดิ ให้ 0 คะแนน เกณฑ์การประเมินผล นกั เรียนได้คะแนน 8-10 คะแนน ผา่ นเกณฑ์ อยใู่ นระดบั ดมี าก อยใู่ นระดับดี นักเรียนได้คะแนน 7 คะแนน ผ่านเกณฑ์ อยใู่ นระดับพอใช้ อยู่ในระดับตอ้ งปรบั ปรุง นักเรยี นได้คะแนน 6 คะแนน ผ่านเกณฑ์ นักเรยี นได้คะแนน 0-5 คะแนน ไม่ผา่ นเกณฑ์ รายการประเมิน ผลการปฏบิ ัติ ทาถกู ต้อง ทาผดิ รายการประเมิน (1 คะแนน) (0 คะแนน) 1. กาหนดคาวา่ “กลุ่มบริหารงานบุคคล” ใหเ้ ป็นหวั เรอ่ื งเอกสาร เว็บ 2. กาหนดคาวา่ “กลมุ่ บริหารงานบุคคล” ใหเ้ ป็นหัวเรือ่ งที่มี ขนาดใหญ่อนั ดบั 2 3. กาหนดคาว่า “กล่มุ บริหารงานบคุ คล” ให้เป็นสนี า้ เงนิ 4. มกี ารใช้คาส่งั แสดงผลรายการ 5. มีการใชค้ าสงั่ แสดงผลรายการแบบกลุ่มคา 6. มีการใช้คาสงั่ แสดงผลรายการแบบท่ีอยู่ 7. มกี ารใชค้ าสงั่ เวน้ บรรทัด 8. บนั ทกึ ช้นิ งานลงใน Flash Drive โดยตง้ั ช่อื ช้ินงานว่า “person.html” 9. มกี ารจดั ระเบียบ code ในหนา้ NotePad 10. ในภาพรวมการจัดหนา้ เว็บเพจทสี่ ร้างข้นึ เหมือนกับตวั อย่าง รวมคะแนน (คะแนนเตม็ 10 คะแนน)

หนา้ ที่ 15 ใบความรทู้ ี่ 2 เร่ือง การแสดงผลรายการแบบมีลาดับ หน่วยการเรยี นที่ 3 การแสดงผลรายการและรูปภาพ กจิ กรรมทบทวนความรู้เดมิ ใหน้ กั เรียนทบทวนความรเู้ ดิม โดยฝึกใช้คาสั่งแสดงผลรายการ คาสง่ั แสดงผลรายการแบบกลุ่มคา คาสัง่ แสดงผลรายการแบบทีอ่ ยู่ ขณะทบทวนสามารถ ถามเพอ่ื นในกลมุ่ ได้ และเมอื่ ทบทวนจนเขา้ ใจแลว้ ให้นักเรยี นศึกษาหัวข้อต่อไป คาสง่ั การแสดงผลรายการยอ่ ย งงง ใชส้ าหรับกาหนดรายการย่อย ภายใตค้ าสัง่ การแสดงผลรายการแบบต่างๆ เช่น คาส่งั <OL>…</OL> , <UL>…</UL> โดยมีรปู แบบการใชง้ านดังนี้ รูปแบบ <LI>ข้อความ คาส่ังการแสดงผลแบบมีลาดับใชส้ าหรับการกาหนดวธิ กี ารแสดงรายการเป็นแบบตวั เลขหรือ ตัวอกั ษรมลี าดับหน้าข้อเปน็ ตัวเลข ตัวอักษร หรือเลขโรมนั โดยคาสงั่ <OL>…</OL> จะเป็นคาสัง่ ท่ี ใช้บอกขอบเขตของข้อมลู รายการทง้ั หมด และจะใชค้ าสั่ง <LI> เปน็ คาสั่งสาหรบั บอกรายการยอ่ ย โดยมีรูปแบบการใช้งานดังน้ี คาสัง่ การแสดงผลรายการแบบมีเลขอารบกิ หนา้ ขอ้ งงง รูปแบบ <OL> <LI>ขอ้ ความ <LI>ขอ้ ความ ….. </OL>

หนา้ ท่ี 16 ตวั อยา่ งการใชง้ าน <OL> <LI> ระดบั ชั้นมธั ยมศึกษาปีท่ี 1 <LI> ระดับช้นั มัธยมศึกษาปีท่ี 2 <LI> ระดับชน้ั มธั ยมศึกษาปีท่ี 3 </OL> กิจกรรมระหว่างเรยี น ใหน้ กั เรียนฝกึ ใชค้ าสง่ั การแสดงผลรายการแบบมเี ลขอารบิกหน้าขอ้ ขณะฝกึ ปฏบิ ตั ิสามารถถามเพือ่ นในกลุม่ ได้ และเม่ือฝกึ ปฏบิ ตั จิ นเขา้ ใจแลว้ ให้ นักเรยี นศึกษาหัวข้อตอ่ ไป

หนา้ ที่ 17 คาสัง่ การแสดงผลรายการแบบมตี ัวอักษรหน้าข้อ งงง รปู แบบ <OL TYPE=\"A\"> <LI>ขอ้ ความ <LI>ขอ้ ความ ….. </OL> ตวั อยา่ งการใชง้ าน <OL TYPE=\"A\"> <LI> ระดับชั้นมัธยมศึกษาปีท่ี 1 <LI> ระดับชั้นมัธยมศึกษาปีท่ี 2 <LI> ระดบั ชั้นมัธยมศึกษาปีท่ี 3 </OL> พิมพค์ าส่งั นี้เพ่มิ เติมจากคาสง่ั การแสดงรายการแบบ ตวั เลขเท่าน้นั หนา้ ข้อก็จะเปลีย่ นเปน็ ตวั อักษร ภาษาองั กฤษ (ถ้าต้องการใหห้ นา้ ข้อเป็นตวั พมิ พเ์ ลก็ ก็ เปลีย่ นจาก A เป็น a)

หน้าที่ 18 กิจกรรมระหวา่ งเรียน ใหน้ ักเรยี นฝกึ ใช้คาสัง่ การแสดงผลรายการแบบมตี วั อักษรหน้าขอ้ ขณะฝกึ ปฏิบตั ิสามารถถามเพ่อื นในกลมุ่ ได้ และเม่ือฝกึ ปฏิบตั ิจนเขา้ ใจแลว้ ให้ นักเรยี นศกึ ษาหัวข้อตอ่ ไป คาสงั่ การแสดงผลรายการแบบมีเลขโรมนั หนา้ ข้อ งงง รปู แบบ <OL TYPE=\"I\"> <LI>ข้อความ <LI>ข้อความ ….. </OL> ตัวอยา่ งการใช้งาน <OL TYPE=\"I\"> <LI> ระดับชน้ั มัธยมศึกษาปีท่ี 1 <LI> ระดบั ชน้ั มธั ยมศึกษาปีที่ 2 <LI> ระดบั ชน้ั มัธยมศึกษาปีท่ี 3 </OL>

หน้าที่ 19 พมิ พค์ าสั่งนเ้ี พมิ่ เติมจากคาส่ังการแสดงรายการแบบ ตัวเลขเทา่ น้นั หนา้ ข้อกจ็ ะเปลยี่ นเป็นเลขโรมัน (ถ้า ตอ้ งการใหห้ นา้ ข้อเป็นเลขโรมันตัวพิมพ์เล็กกเ็ ปลี่ยน จาก I เป็น i) กจิ กรรมระหว่างเรยี น ให้นักเรยี นฝกึ ใชค้ าสง่ั การแสดงผลรายการแบบมเี ลขโรมนั หน้าขอ้ ขณะฝึกปฏิบตั ิสามารถถามเพื่อนในกลุ่มได้ และเมื่อฝกึ ปฏบิ ตั ิจนเข้าใจแล้ว ให้ นักเรียนศึกษาหวั ข้อต่อไป

หน้าท่ี 20 คาสง่ั กาหนดคา่ เรม่ิ ต้นของลาดบั เลงขงองารบเกิมห่ือนต้อ้าขงก้อาแรบเรบม่ิ มตตีน้ ัวทอ่ตี ักาษแรหหนนง่ ้าอขื่น้อที่ไแมบ่ใบชมค่ ีเา่ ลแขรโกรมสันามหานรา้ ถขท้อาไโดดย้ทใ้ังชกค้ าารสแง่ัสกดางหผนลดราคย่ากเรา่ิมรตแ้นบขบอมงี ลาดับ ซึง่ เป็นคาส่งั ท่ีใช้กาหนดลกั ษณะพเิ ศษให้กบั คาสง่ั <OL> รปู แบบ <OL TYPE=\"A\" START=3> <LI>ข้อความ <LI>ขอ้ ความ ….. </OL> ตัวอย่างการใช้งาน <OL TYPE=\"A\" START=3> <LI> ระดับช้ันมัธยมศึกษาปีท่ี 1 <LI> ระดับช้ันมัธยมศึกษาปีที่ 2 <LI> ระดับชนั้ มัธยมศึกษาปีท่ี 3 </OL> เริม่ ตน้ ตวั อกั ษรภาษาอังกฤษ ตัวท่ี 3 กค็ ือตัว C

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

หน้าท่ี 22 ใบงานท่ี 2 เร่อื ง การแสดงผลรายการแบบมีลาดบั หนว่ ยท่ี 3 การแสดงผลรายการและรูปภาพ ชอื่ ……………………………………………………………………………ชัน้ มธั ยมศึกษาปีท่ี ………….. เลขท่ี………….. คาชแี้ จง ให้นักเรยี นสร้างเวบ็ เพจใหเ้ หมือนดา้ นล่างและบันทึกแฟ้มข้อมูลไว้ใน Flash Drive และต้ังชือ่ ว่า personal.html โดยบงั คบั ใชค้ าสงั่ ดงั ต่อไปนี้ คาสง่ั กาหนดหัวเรือ่ งเอกสารเว็บ คาสั่งกาหนดลักษณะหวั เร่อื งทม่ี ขี นาดใหญ่ทส่ี ดุ คาส่ังกาหนดลักษณะหวั เรือ่ งท่มี ขี นาดใหญร่ ะดับ 2 คาส่ังกาหนดรายการ แบบมีเลขอารบกิ หนา้ ข้อ คาสง่ั กาหนดรายการแบบมตี วั อักษรหน้าขอ้ คาสั่งกาหนดรายการ แบบมีเลขโรมันหนา้ ข้อ คาสัง่ กาหนด คา่ เร่มิ ตน้ ของลาดับ

หน้าท่ี 23 เกณฑ์การให้คะแนน ทาถกู ต้อง ให้ 1 คะแนน ทาผดิ ให้ 0 คะแนน เกณฑ์การประเมนิ ผล นักเรยี นได้คะแนน 8-10 คะแนน ผา่ นเกณฑ์ อยใู่ นระดบั ดมี าก อยใู่ นระดับดี นักเรียนได้คะแนน 7 คะแนน ผา่ นเกณฑ์ อยใู่ นระดับพอใช้ อยู่ในระดับตอ้ งปรบั ปรุง นักเรยี นได้คะแนน 6 คะแนน ผ่านเกณฑ์ นักเรียนได้คะแนน 0-5 คะแนน ไมผ่ า่ นเกณฑ์ รายการประเมิน ผลการปฏบิ ัติ ทาถกู ต้อง ทาผดิ รายการประเมนิ (1 คะแนน) (0 คะแนน) 1. กาหนดคาวา่ “บคุ ลากร” ให้เป็นหวั เรอื่ งเอกสารเวบ็ 2. กาหนดคาวา่ “บคุ ลากรผูป้ ฏบิ ตั หิ น้าท่ี” ใหเ้ ป็นหวั เรื่องที่มี ขนาดใหญท่ ีส่ ุดและเป็นสเี ขยี ว 3. กาหนดคาว่า “กลุ่มบรหิ ารงานวิชาการ” “กลุ่มบริหารงาน บคุ คลการเงนิ และสินทรัพย์” “กลุม่ บริหารงานกจิ การนักเรียน” “กล่มุ บริหารงานสง่ เสริมการจดั การศึกษา”ใหเ้ ป็นหวั เรอื่ งที่มี ขนาดระดับ 2 และเปน็ สนี า้ เงิน 4. มกี ารใชค้ าสัง่ กาหนดรายการแบบมีเลขอารบกิ หนา้ ข้อ 5. มีการใชค้ าส่งั กาหนดรายการแบบมตี ัวอักษรหนา้ ขอ้ 6. มีการใช้คาสั่งกาหนดรายการแบบมีเลขโรมนั หน้าข้อ 7. มีการใช้คาส่ังกาหนดค่าเร่ิมต้นของลาดบั 8. บันทกึ ช้ินงานลงใน Flash Drive โดยตง้ั ชื่อชิ้นงานวา่ “personal.html” 9. มกี ารจัดระเบยี บ code ในหน้า NotePad 10. ในภาพรวมการจดั หนา้ เว็บเพจทีส่ ร้างขึ้นเหมอื นกับตัวอย่าง รวมคะแนน (คะแนนเต็ม 10 คะแนน)

หนา้ ท่ี 24 ใบความรู้ที่ 3 เรือ่ ง การแสดงผลรายการแบบไมม่ ลี าดบั หนว่ ยการเรยี นที่ 3 การแสดงผลรายการและรปู ภาพ กิจกรรมทบทวนความรเู้ ดมิ ใหน้ ักเรียนทบทวนความร้เู ดิม โดยฝกึ ใชค้ าสั่งแสดงผลรายการแบบ มเี ลขอารบิกหนา้ ข้อ แบบมีตวั อกั ษรหน้าข้อ แบบมีเลขโรมนั หนา้ ข้อ และคาส่ัง กาหนดค่าเรม่ิ ตน้ ของลาดบั ขณะทบทวนสามารถถามเพ่ือนในกลุ่มได้ และเม่ือ ทบทวนจนเข้าใจแลว้ ให้นักเรยี นศึกษาหวั ข้อต่อไป คาสง่ั การแสดงผลรายการแบบไมม่ ลี าดบั งงง ใช้สาหรับการกาหนดวิธีการแสดงรายการเปน็ แบบใชส้ ัญลักษณ์หน้าข้อ โดยคาสง่ั <UL>…</UL> จะเปน็ คาสั่งทใี่ ชบ้ อกขอบเขตของขอ้ มูลรายการทั้งหมด และจะใช้คาส่ัง <LI> เป็น คาสงั่ สาหรบั บอกรายการย่อย โดยมรี ปู แบบการใชง้ านดังน้ี รูปแบบ เลือกใส่เพยี งคาส่ังเดยี วเท่าน้ัน <UL TYPE=circle,square,disc> <LI>ขอ้ ความ <LI>ข้อความ ….. </UL> หมายเหตุ - circle ใช้สาหรับกาหนดสญั ลกั ษณห์ น้าข้อเปน็ แบบวงกลมโปร่งแสง - square ใชส้ าหรบั กาหนดสัญลกั ษณห์ น้าข้อเป็นแบบสี่เหลยี่ มทึบแสง - disc ใชส้ าหรับกาหนดสญั ลักษณห์ น้าขอ้ เป็นแบบวงกลมทึบแสง

หนา้ ท่ี 25 กรณไี ม่กาหนดสัญลกั ษณห์ นา้ ขอ้ งงง ตวั อย่างการใช้งาน <UL> <LI> ระดบั ชนั้ มธั ยมศึกษาปีท่ี 1 <LI> ระดบั ชั้นมธั ยมศึกษาปีที่ 2 <LI> ระดบั ช้นั มัธยมศึกษาปีท่ี 3 </UL> กจิ กรรมระหว่างเรยี น ใหน้ กั เรียนฝึกใชค้ าสั่งการแสดงผลรายการแบบไมก่ าหนด สญั ลกั ษณ์หนา้ ข้อ ขณะฝกึ ปฏบิ ตั ิสามารถถามเพื่อนในกลุม่ ได้ และเมือ่ ฝึกปฏบิ ตั จิ นเขา้ ใจแลว้ ใหน้ ักเรียนศกึ ษาหวั ข้อต่อไป

หน้าท่ี 26 กรณีกาหนดสัญลักษณห์ น้าขอ้ เปน็ วงกลมโปร่งแสง งงง ตัวอย่างการใช้งาน <UL TYPE=CIRCLE> <LI> ระดบั ชัน้ มัธยมศึกษาปีท่ี 1 <LI> ระดบั ชนั้ มธั ยมศึกษาปีท่ี 2 <LI> ระดับชั้นมธั ยมศึกษาปีที่ 3 </UL> กจิ กรรมระหวา่ งเรียน ใหน้ กั เรียนฝึกใช้คาสั่งการแสดงผลรายการแบบกาหนดสญั ลกั ษณ์ หนา้ ข้อเป็นวงกลมโปร่งแสง ขณะฝึกปฏิบัติสามารถถามเพื่อนในกลมุ่ ได้ และ เมอ่ื ฝกึ ปฏิบตั จิ นเข้าใจแลว้ ใหน้ ักเรยี นศึกษาหัวข้อต่อไป

หน้าที่ 27 กรณีกาหนดสญั ลักษณห์ น้าขอ้ เปน็ สี่เหล่ียมทึบแสง งงง ตัวอย่างการใช้งาน <UL TYPE=SQUARE> <LI> ระดับชัน้ มัธยมศึกษาปีที่ 1 <LI> ระดบั ชั้นมธั ยมศึกษาปีท่ี 2 <LI> ระดับชั้นมธั ยมศึกษาปีที่ 3 </UL> กจิ กรรมระหว่างเรยี น ใหน้ ักเรียนฝกึ ใช้คาสง่ั การแสดงผลรายการแบบกาหนดสญั ลักษณ์ หนา้ ข้อเป็นส่ีเหลี่ยมทึบแสง ขณะฝึกปฏบิ ัตสิ ามารถถามเพื่อนในกลมุ่ ได้ และ เม่ือฝกึ ปฏบิ ตั ิจนเข้าใจแลว้ ให้นักเรียนศึกษาหัวขอ้ ต่อไป

หน้าท่ี 28 กรณกี าหนดสญั ลักษณห์ น้าขอ้ เปน็ วงกลมทบึ แสง งงง ตวั อย่างการใช้งาน <UL TYPE=DISC> <LI> ระดบั ช้ันมธั ยมศึกษาปีท่ี 1 <LI> ระดบั ชั้นมธั ยมศึกษาปีที่ 2 <LI> ระดับชั้นมัธยมศึกษาปีที่ 3 </UL> กจิ กรรมระหวา่ งเรยี น ให้นกั เรียนฝกึ ใช้คาสั่งการแสดงผลรายการแบบกาหนดสญั ลกั ษณ์ หนา้ ขอ้ เป็นวงกลมทึบแสง ขณะฝกึ ปฏบิ ตั สิ ามารถถามเพ่ือนในกลมุ่ ได้ และเมื่อ ฝกึ ปฏิบัตจิ นเข้าใจแลว้ ให้นักเรยี นศึกษาหวั ข้อต่อไป

หน้าที่ 29 กรณกี าหนดสัญลักษณห์ น้าข้อไม่เหมอื นกัน งงง ตัวอย่างการใช้งาน สัญลักษณห์ น้าขอ้ เป็นแบบวงกลมทบึ แสง <UL> <LI TYPE=DISC> ระดบั ช้นั มัธยมศึกษาปีท่ี 1 สญั ลกั ษณห์ นา้ ข้อ <LI TYPE=DISC> ระดับชั้นมัธยมศกึ ษาปีที่ 2 สญั ลกั ษณห์ น้าข้อ เปน็ แบบวงกลม <LI TYPE=CIRCLE> ระดบั ช้ันมัธยมศกึ ษาปที ี่ 3 เปน็ แบบสเ่ี หลี่ยม <LI TYPE=CIRCLE> ระดบั ชัน้ มธั ยมศกึ ษาปที ่ี 4 โปร่งแสง <LI TYPE=SQUARE> ระดับชั้นมัธยมศึกษาปที ่ี 5 <LI TYPE=SQUARE> ระดบั ชน้ั มัธยมศึกษาปีท่ี 6 ทบึ แสง </UL>

หนา้ ที่ 30 กจิ กรรมระหวา่ งเรยี น ใหน้ กั เรียนฝึกใชค้ าสั่งการแสดงผลรายการแบบกาหนดสญั ลกั ษณ์ หนา้ ข้อไม่เหมอื นกัน ขณะฝึกปฏบิ ตั ิสามารถถามเพ่ือนในกล่มุ ได้ และเม่ือ ฝึกปฏิบัติจนเข้าใจแล้ว ให้นักเรยี นทาใบงานท่ี 3

หนา้ ท่ี 31 ใบงานท่ี 3 เรือ่ ง การแสดงผลรายการแบบไม่มีลาดบั หน่วยที่ 3 การแสดงผลรายการและรูปภาพ ชอ่ื ……………………………………………………………………………ชน้ั มัธยมศึกษาปที ี่ ………….. เลขท่ี………….. คาช้แี จง ให้นกั เรยี นสร้างเวบ็ เพจให้เหมือนดา้ นลา่ ง โดยเปดิ แฟม้ ขอ้ มลู ทชี่ ื่อ personal.html ขน้ึ มาสร้างเพิ่มเติม คาสั่งเวน้ วรรค คาส่ังกาหนดลักษณะหัวเรื่องท่ีมขี นาดใหญท่ ี่สดุ คาส่ังแสดงผลรายการกรณี กาหนดสญั ลักษณ์หน้าข้อเป็นวงกลมโปรง่ แสง คาส่ังแสดงผลรายการกรณี กาหนดสญั ลักษณ์หน้าข้อไม่เหมอื นกัน คาสง่ั แสดงผลรายการกรณี กาหนดสญั ลกั ษณ์หนา้ ขอ้ เป็นสเี่ หล่ยี มทึบแสง คาส่ังแสดงผลรายการกรณี กาหนดสญั ลักษณห์ นา้ ขอ้ เปน็ วงกลมทบึ แสง

หน้าท่ี 32 เกณฑก์ ารใหค้ ะแนน ทาถูกต้อง ให้ 1 คะแนน ทาผดิ ให้ 0 คะแนน เกณฑก์ ารประเมินผล นักเรียนได้คะแนน 8-10 คะแนน ผา่ นเกณฑ์ อยใู่ นระดบั ดมี าก อยใู่ นระดับดี นักเรยี นได้คะแนน 7 คะแนน ผา่ นเกณฑ์ อยใู่ นระดับพอใช้ อยู่ในระดับตอ้ งปรบั ปรุง นกั เรียนได้คะแนน 6 คะแนน ผา่ นเกณฑ์ ผลการปฏบิ ัติ นกั เรียนได้คะแนน 0-5 คะแนน ไม่ผ่านเกณฑ์ ทาถกู ต้อง ทาผดิ (1 คะแนน) (0 คะแนน) รายการประเมนิ รายการประเมิน 1. สร้างต่อจาก แฟ้มข้อมูลท่ีช่ือ “personal.html” 2. กาหนดคาว่า “เป้าหมายหลกั สูตรสถานศกึ ษา” ใหเ้ ปน็ หัวเร่ืองที่มีขนาดใหญ่ทีส่ ุดและเป็นสีเขียว 3. กาหนดคาว่า “การจัดแผนการเรยี น” ให้เป็นหัวเรือ่ งท่มี ี ขนาดใหญ่ที่สุดและเป็นสเี ขยี ว 4. มกี ารใชค้ าสงั่ เวน้ วรรค 5. มกี ารใช้คาส่ังแสดงผลรายการกรณีกาหนดสญั ลักษณห์ น้าข้อ เปน็ วงกลมโปร่งแสง 6. มีการใช้คาสัง่ แสดงผลรายการกรณีกาหนดสญั ลักษณห์ น้าขอ้ ไมเ่ หมือนกนั 7. มกี ารใช้คาสงั่ แสดงผลรายการกรณีกาหนดสญั ลกั ษณห์ นา้ ข้อ เป็นสเี่ หลีย่ มทึบแสง 8. มกี ารใช้คาสัง่ แสดงผลรายการกรณีกาหนดสญั ลกั ษณห์ น้าขอ้ เป็นวงกลมทบึ แสง 9. มีการจดั ระเบยี บ code ในหนา้ NotePad 10. ในภาพรวมการจดั หน้าเว็บเพจทสี่ รา้ งข้นึ เหมอื นกบั ตัวอย่าง รวมคะแนน (คะแนนเตม็ 10 คะแนน)

หนา้ ท่ี 33 ใบความร้ทู ่ี 4 เรอื่ ง รปู ภาพ หนว่ ยการเรียนท่ี 3 การแสดงผลรายการและรปู ภาพ กจิ กรรมทบทวนความรเู้ ดิม ใหน้ ักเรียนทบทวนความรูเ้ ดิม โดยฝกึ ใชค้ าสั่งแสดงผลรายการ แบบไมม่ ลี าดบั กรณีไมก่ าหนดสัญลกั ษ์หน้าข้อ กรณีกาหนดสัญลักษณห์ นา้ ข้อ เปน็ วงกลมโปร่งแสง สีเ่ หล่ียมทึบแสง วงกลมทบึ แสง และกรณีกาหนด สัญลกั ษณ์หนา้ ข้อไมเ่ หมอื นกัน ขณะทบทวนสามารถถามเพอื่ นในกลุม่ ได้ และเมอื่ ทบทวนจนเขา้ ใจแล้ว ให้นักเรียนศึกษาหัวข้อตอ่ ไป การนารปู ภาพแสดงบนเว็บเพจเปน็ ท่นี ยิ มอย่างแพร่หลาย เน่ืองจากทาใหเ้ วบ็ เพจได้รับความ สนใจมากขึน้ รูปภาพทใ่ี ช้ประกอบในเนื้อหาของเวบ็ เพจมีอยู่ 2 ประเภทคือ 1. รูปภาพชนดิ GIF เป็นรูปภาพท่มี ีการบบี อดั มาแลว้ มีความละเอียดไดส้ ูงสดุ 256 สี สว่ นใหญ่จะเป็นรปู การ์ตูน 2. รปู ภาพชนดิ JPG หรอื JPEG เปน็ รปู ภาพที่มีการบบี อดั มาแล้ว มีความละเอียดสูงสดุ 16 ล้านสี ทาใหภ้ าพคมชดั มากขน้ึ คาส่ังแทรกรูปภาพ งงง การนารูปภาพแสดงบนเว็บเบราวเ์ ซอรส์ ามารถทาได้โดยใช้คาส่งั <IMG SRC> โดยมรี ปู แบบ การใช้งานดังน้ี รปู แบบ <IMG SRC=“ชอ่ื แฟม้ ข้อมูลรปู ภาพ”> หมายเหตุ จะต้องนาแฟ้มข้อมลู รปู ภาพท่ีจะใชแ้ ทรกในเว็บเพจ ไปไวใ้ นโฟลเดอร์เดยี วกับ ชอ่ื เว็บเพจ

หน้าที่ 34 ตวั อยา่ งการใชง้ าน กิจกรรมระหว่างเรยี น ใหน้ ักเรยี นฝกึ ใชค้ าสั่งแทรกรูปภาพ ขณะฝึกปฏิบตั ิสามารถถามเพอื่ น ในกลมุ่ ได้ และเม่ือฝกึ ปฏบิ ัติจนเข้าใจแลว้ ใหน้ กั เรยี นศกึ ษาหวั ข้อต่อไป คาสั่งกาหนดความกว้างและความสงู ของรูปภาพ งงง รูปภาพทน่ี ามาใชอ้ าจมีขนาดเล็กหรือใหญ่ไม่ตรงตามต้องการ เราสามารถกาหนดความกว้าง และความสูงของรปู ภาพนน้ั ได้ ซง่ึ สามารถกาหนดคา่ เปน็ พกิ เซลหรือเปน็ เปอร์เซน็ ตข์ องหนา้ จอ Width เป็นการกาหนดความกว้างของรปู ภาพ Height เปน็ การกาหนดความสูงของรูปภาพ รูปแบบ <IMG SRC=“ชอ่ื แฟม้ ข้อมูลรปู ภาพ” WIDTH=“จานวนพิกเซลหรอื เปอร์เซน็ ต์” HEIGHT=“จานวนพกิ เซลหรือเปอร์เซน็ ต์”>

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

หนา้ ที่ 36 คาสัง่ กาหนดรปู ภาพใหอ้ ย่กู ึ่งกลางหน้าจอ รูปภาพทีน่ ามาใชส้ ามารถกาหนดตาแหนง่ การนาเสนอรูปภาพให้อยู่ก่งึ กลางของหนา้ จอได้ โดยมีรปู แบบการใช้งานดังน้ี รูปแบบ <CENTER>…..</CENTER> ตัวอยา่ งการใช้งาน กจิ กรรมระหวา่ งเรียน ให้นักเรยี นฝึกใช้คาสง่ั กาหนดรปู ภาพใหอ้ ยู่ก่ึงกลางหน้าจอ ขณะฝกึ ปฏิบตั สิ ามารถถามเพ่ือนในกลมุ่ ได้ และเม่ือฝกึ ปฏิบัติจนเขา้ ใจแล้ว ให้นกั เรียนศึกษาหัวข้อต่อไป คาสั่งกาหนดเส้นกรอบใหร้ ูปภาพ สามารถกาหนดเส้นกรอบของรูปภาพใหม้ คี วามหนาได้ต้ังแต่ 0 ถึง 10 โดยมรี ูปแบบ การใช้งานดังนี้ รูปแบบ <IMG SRC=“ชอื่ แฟม้ ข้อมูลรปู ภาพ” Border=ความหนาของกรอบ>

หนา้ ท่ี 37 ตวั อยา่ งการใช้งาน กจิ กรรมระหวา่ งเรียน ใหน้ ักเรยี นฝกึ ใชค้ าสง่ั กาหนดเส้นกรอบให้รปู ภาพ ขณะฝึกปฏบิ ัติสามารถ ถามเพ่อื นในกลุ่มได้ และเม่อื ฝึกปฏิบัติจนเขา้ ใจแลว้ ให้นักเรยี นศกึ ษาหัวข้อตอ่ ไป คาสั่งกาหนดพืน้ หลงั เอกสารใหเ้ ปน็ รปู ภาพ การกาหนดพืน้ หลังเอกสารให้เปน็ รูปภาพสามารถทาได้โดยการกาหนดคณุ ลักษณะพิเศษของ คาส่ัง BODY แฟ้มข้อมูลรปู ภาพทน่ี ิยมนามาใช้เปน็ พื้นหลังส่วนใหญจ่ ะเปน็ แฟ้มข้อมูลชนิด .GIF และ .JPG รูปภาพท่ีนามาใช้เปน็ พ้ืนหลงั ไม่วา่ จะมีขนาดเล็กหรอื ขนาดใหญ่โปรแกรมเวบ็ เบราว์เซอร์กจ็ ะ นารปู ภาพมาเรยี งต่อกนั โดยมรี ูปแบบการใช้งานดังน้ี รปู แบบ <BODY BACKGROUND=“ชื่อแฟ้มขอ้ มลู รปู ภาพ” …………. …………. </BODY>

หนา้ ที่ 38 ตวั อยา่ งการใชง้ าน หมายเหตุ จะต้องนาแฟ้มข้อมลู รปู ภาพท่ีจะใช้เป็นพนื้ หลังของเว็บเพจ ไปไว้ในโฟลเดอร์ เดียวกบั ช่ือเวบ็ เพจ กจิ กรรมระหว่างเรยี น ใหน้ ักเรียนฝกึ ใช้คาสัง่ กาหนดพนื้ หลงั เอกสารให้เป็นรูปภาพ ขณะฝึกปฏบิ ตั ิ สามารถถามเพ่ือนในกลุ่มได้ และเมอ่ื ฝึกปฏบิ ัตจิ นเข้าใจแลว้ ให้นกั เรยี นทาใบงานท่ี 4

หน้าท่ี 39 ใบงานที่ 4 เรื่อง รูปภาพ หนว่ ยที่ 3 การแสดงผลรายการและรปู ภาพ ชอ่ื ……………………………………………………………………………ชั้นมัธยมศกึ ษาปีที่ ………….. เลขท่ี………….. คาชแี้ จง ใหน้ ักเรียนสร้างเว็บเพจให้เหมือนดา้ นลา่ งและบันทกึ แฟ้มข้อมูลไว้ใน Flash Drive และตงั้ ชื่อวา่ pic.html โดยบงั คบั ใช้คาส่ังดังต่อไปน้ี คาสัง่ หัวเรอ่ื งเอกสารเวบ็ คาสัง่ กาหนดลักษณะหัวเร่ืองท่ีมขี นาดใหญร่ ะดับ2 - คาสัง่ กาหนดความกว้าง - คาสั่งกาหนดความกวา้ ง ความสงู ของรปู ภาพ ความสงู ของรูปภาพหนว่ ย หน่วยเปน็ เปอรเ์ ซ็นต์ เป็นพิกเซล - คาสงั่ กาหนดเสน้ กรอบ - คาสงั่ กาหนดพื้นหลงั ของเอกสาร

หน้าท่ี 40 เกณฑ์การใหค้ ะแนน ทาถูกตอ้ ง ให้ 1 คะแนน ทาผดิ ให้ 0 คะแนน เกณฑ์การประเมนิ ผล นกั เรียนได้คะแนน 8-10 คะแนน ผ่านเกณฑ์ อยใู่ นระดบั ดมี าก อยใู่ นระดับดี นักเรยี นได้คะแนน 7 คะแนน ผ่านเกณฑ์ อยใู่ นระดับพอใช้ อยู่ในระดับตอ้ งปรบั ปรุง นกั เรยี นได้คะแนน 6 คะแนน ผ่านเกณฑ์ นักเรยี นได้คะแนน 0-5 คะแนน ไม่ผ่านเกณฑ์ รายการประเมนิ ผลการปฏบิ ัติ ทาถกู ต้อง ทาผดิ รายการประเมิน (1 คะแนน) (0 คะแนน) 1. กาหนดคาว่า “ภาพกิจกรรม” ให้เปน็ หัวเรอื่ งเอกสารเวบ็ 2. กาหนดคาว่า “ภาพนักเรียนรับเกยี รติบัตรระดับชาติ ในการ แขง่ ขนั ศลิ ปหตั ถกรรมนักเรียนครัง้ ที่ 69” ใหเ้ ป็นหวั เร่อื งท่ีมี ขนาดใหญ่อนั ดับ 2 และเปน็ สีน้าเงนิ 3. มีการใชค้ าสง่ั แทรกรปู ภาพ 4. มีการใชค้ าส่งั กาหนดความกวา้ งและความสูงของภาพมีหนว่ ย เปน็ เปอร์เซ็นต์ 5. มีการใชค้ าส่งั กาหนดความกวา้ งและความสงู ของภาพมหี นว่ ย เป็นพิกเซล 6. มกี ารใช้คาสง่ั กาหนดเส้นกรอบใหร้ ูปภาพและกาหนดความ หนาของกรอบ 7. มกี ารใช้คาสง่ั กาหนดพ้นื หลังเอกสารให้เปน็ รูปภาพ 8. มีการใชค้ าสั่งกาหนดรูปภาพอยู่กึ่งกลางหน้าจอ 9. บนั ทกึ ชิ้นงานลงใน Flash Drive โดยต้งั ชอ่ื ชน้ิ งานว่า “pic.html” 10. ในภาพรวมการจดั หน้าเว็บเพจทส่ี ร้างขึน้ เหมือนกับตวั อย่าง รวมคะแนน (คะแนนเต็ม 10 คะแนน)

หนา้ ท่ี 41