The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.

ภาษา html

Discover the best professional documents and content resources in AnyFlip Document Base.
Search
Published by thipamart konthip, 2019-07-11 02:16:47

HTML

ภาษา html

1

คูมือแผนการสอน
หลกั สูตรประกาศนยี บัตรวิชาชพี (ปวช.) พุทธศกั ราช 2545

(ปรบั ปรงุ พ.ศ. 2546)
ประเภทวชิ าพาณชิ ยกรรม
รหัสวิชา รหสั วิชา 2201-2414 วชิ า การสรา งเวบ็ เพจ(ดว ยภาษHTML)

คาํ เตือน

สงวนลขิ สทิ ธติ์ ามกฏหมาย หากผสู อนมคี วามจําเปน ในการจดั ทําแผนการจดั การเรยี นรู เพอ่ื พฒั นา
ศักยภาพการเรยี นรูแกเ ยาวชน ใหมคี ณุ ภาพของประเทศชาติ กรณุ าปรบั เน้อื หาใหเหมาะสมกบั หลกั สตู ร

มาตรฐานการเรยี นรู และแผนจดั การเรยี นรู ตามความเหมาะสมของสถานศกึ ษา

2

แผนจดั การเรยี นรแู บบบรู ณาการ
ช่อื รายวิชา การสรางเวบ็ เพจ(ดว ยภาษา HTML) รหัสวชิ า 2201-2414
หมวดวขิ าชพี วชิ าชพี สาขางาน สาขางานคอมพวิ เตอรธ รุ กจิ ประเภทวชิ าพาณชิ ยกรรม

ประกาศนยี บตั รวชิ าชีพ (ปวช.)
จาํ นวน 2 หนว ยกจิ 4 ชวั่ โมง/สปั ดาห รวม 68 ชวั่ โมง

---------------------------------------------------------------------------------------------------------------------

จุดประสงครายวชิ าเพือ่ ให
1. เขา ใจกระบวนการและโครงสรา งการทาํ งานของเวบ็ เพจเบื้องตน
2. เขาใจโครงสรางและไวยกรณของโปรแกรมและภาษา หรือ หรือกระบวนการการใช
เครือ่ งมือการสรางเวบ็ เพจ
3. สามารถออกแบบและกําหนดสวนประกอบทจ่ี าํ เปน ของเวบ็ เพจไดถกู ตองและเหมาะสม
4. มที กั ษะในการใชโปรแกรมภาษาหรือโปรแกรมสาํ เรจ็ รปู สาํ หรับสรางเวบ็ เพจ
5. มีกจิ นิสยั และสงเสรมิ คุณธรรม จรยิ ธรรม คา นยิ มทีด่ ี ในการใชคอมพวิ เตอร

มาตรฐานรายวชิ า
1. อธบิ ายความหมายและโครงสรา งไวยากรณของการเขียนเว็บเพจ
2. ออกแบบสวนประกอบของเว็บเพจ
3. สรางสรรคเ ว็บเพจดวยโปรแกรมภาษาหรอื โปรแกรมสําเรจ็ รูป

คําอธบิ ายรายวชิ า

ใหเลอื กเรยี นจากโปรแกรมภาษาหรือเคร่ืองมอื 1 ภาษา ตอ ไปนี้

1. ภาษา HTML 2. ภาษา XML

3. ภาษา JAVA 4. ภาษา PHP

5. โปรแกรมชวยสรางเว็บเพจสําเร็จรูปตามความตองการขององคกรโดยใหครอบคลุม

สาระสาํ คญั ตอ ไปน้ี

ศึกษาและปฏิบัติเก่ียวกับระบบการทํางานของเว็บเพจ ระบบ Hyper Link การออกแบบเว็บเพ

จเบอื้ งตน การสรางเวบ็ เพจดวยโปรแกรมภาษาหรือโปรแกรมสําเร็จรูป การทดสอบการทํางานของเว็บ

เพจ การ Upload เว็บเพจ

สารบญั 3
เร่อื ง
ตารางวเิ คราะหคําอธิบายรายวชิ า หนา
ตารางวิเคราะหก ารประเมินผลตามสภาพจริง 5
แผนจัดการเรยี นรู 6
หนว ยการเรียนรู 8
กิจกรรมการเรียนรู 12
แผนจดั การเรยี นรู เร่อื ง เริม่ ตน กบั การสรางเวบ็ เพจ 16
เฉลยแบบฝกหดั หนวยที่ 1 21
แผนจัดการเรียนรู เร่ือง เร่มิ ตนกับ HTML และ XHTML 28
เฉลยแบบฝกหดั หนวยท2่ี 33
แผนจัดการเรียนรู เรอ่ื ง การจดั วางเนอ้ื หาบนเวบ็ 40
เฉลยแบบฝก หัด บทที่ 3 45
แผนจดั การเรยี นรู เร่อื ง การจดั การขอ ความ 51
เฉลยแบบฝกหดั บทที่ 4 55
แผนจดั การเรียนรู เร่อื ง การใชล สิ ตสรางรายการ 61
เฉลยแบบฝกหดั หนวยท่ี 5 66
แผนจดั การเรยี นรู เร่อื งเช่อื มโยงเว็บเพจดวยลงิ ค 73
เฉลยแบบฝก หดั บทท่ี 6 79
แผนจดั การเรียนรู เรอ่ื ง การจัดขอมูลใหเ ปนสัดสวนดวยตาราง 85
เฉลยแบบฝก หัด หนว ยที่ 7 91
แผนจัดการเรียนรู เร่อื งแตงเตมิ เวบ็ เพจดวยกราฟก 98
เฉลยแบบฝก หัด หนวยที่ 8 102
แผนจัดการเรยี นรู เร่อื งแบง หนา จอโดยใชเฟรม 108
เฉลยแบบฝก หัด หนวยที่ 9 113
แผนจดั การเรยี นรู เรื่องการสรางฟอรม 120
เฉลยแบบฝกหัด หนวยที่ 10 125
แบบประเมนิ คณุ ธรรมจริยธรรม (ผเู รยี นประเมินตนเอง) 132
แบบประเมินสาระการเรียนรู (ผูเรยี นประเมินตนเอง) 138
139

เรือ่ ง 4
แบบประเมินคุณธรรมจริยธรรม(ผูส อนประเมินผูเรยี น)
แบบประเมนิ สาระการเรียนรู(ผสู อนประเมนิ ผเู รยี น) หนา
แบบสอบถามความพึงพอใจ/ความคดิ เห็นตอสื่อการสอน 140
141
142

5

ตารางวเิ คราะหค ําอธิบายรายวชิ า

ชือ่ วชิ า การสรา งเวบ็ เพจ (ดว ยภาษา HTML) รหัสวชิ า 2201-2414 จํานวน 2 หนว ยกติ
ระยะเวลาเรียน 17 สปั ดาห จํานวน 4 ช่วั โมง / สัปดาห รวมจาํ นวน 68 ชวั่ โมง

ลําดบั ชือ่ หนว ยการเรียนรู พฤตกิ รรมทคี่ าดหวังตอ การเรยี นการสอน 1 คร้งั
ที่ ความรู ทกั ษะ จติ พิสัย รวม(ชม.)

1 เริ่มตนกบั การสรา งเวบ็ เพจ 12 1 4

2 เริม่ ตนกับ HTML และ XHTML 12 1 4

3 การจัดวางเน้อื หาบนเวบ็ 12 1 4

4-5 การจดั การขอความ 24 2 8

6-7 การใชล สิ ตส รา งรายการ 24 2 8

8-9 เชื่อมโยงเว็บเพจดว ยลงิ ค 24 2 8

10-11 การจดั ขอมลู ใหเ ปน สัดสวนดวยตาราง 2 4 2 8

12-13 แตงเตมิ เว็บเพจดว ยกราฟก 24 2 8

14-15 แบง หนาจอโดยใชเ ฟรม 24 2 8

16-17 การสรา งฟอรม 24 2 8

18 การประเมินผลการเรียน

รวม 68

6

ตารางวเิ คราะหการประเมินผลตามสภาพจรงิ

หนว ยท่ี จดุ ประสงคก ารเรยี นรู เครอ่ื งมือวดั ผล คะแนน หมายเหตุ
1.
2. ขอสอบอัตนยั 2 จุดประสงคก าร

3. แบบประเมิน 2 เรยี นรูทีไ่ มผ า น
ครูผสู อน
4.
5. แบบประเมนิ 2 มอบหมายงาน
6. เพ่ิมเตมิ เพอ่ื
7.
8. แบบประเมนิ 2 เปน การพัฒนา
แบบประเมิน ความรแู ละ
9. แบบประเมิน
10. 2 ทบทวน
2 บทเรยี นของ

แบบประเมิน 2 ผเู รยี น หาก

แบบประเมนิ 2 พบวายังไม

ผา น

แบบประเมิน 2 จุดประสงคการ
แบบประเมนิ เรยี นรูอ ีก จดั
2 สอนซอมเสรมิ

ให

7

คมู ือครู และ Course Syllabus

1. รหสั วชิ า 2201-2414 ชือ่ วชิ า การสรา งเว็บเพจ (ดวยภาษา HTML) ระดบั ช้นั ปวช.
2. ผูส อน …………………………………………………………………………………………

3. จุดประสงครายวชิ าเพ่อื ให
1. เขาใจกระบวนการและโครงสรางการทาํ งานของเว็บเพจเบ้อื งตน
2. เขาใจโครงสรางและไวยกรณของโปรแกรมและภาษา หรือ หรือกระบวนการการใช
เครือ่ งมือการสรา งเว็บเพจ
3. สามารถออกแบบและกาํ หนดสว นประกอบทจ่ี ําเปนของเว็บเพจไดถูกตองและเหมาะสม
4. มที กั ษะในการใชโปรแกรมภาษาหรือโปรแกรมสําเรจ็ รปู สาํ หรบั สรา งเวบ็ เพจ
5. มีกจิ นิสยั และสงเสริมคุณธรรม จริยธรรม คา นิยมทดี่ ี ในการใชคอมพวิ เตอร

4. มาตรฐานรายวิชา
1. อธบิ ายความหมายและโครงสรา งไวยากรณของการเขยี นเว็บเพจ
2. ออกแบบสวนประกอบของเวบ็ เพจ
3. สรางสรรคเวบ็ เพจดว ยโปรแกรมภาษาหรอื โปรแกรมสาํ เร็จรูป

5. คําอธบิ ายรายวิชา

ใหเลือกเรยี นจากโปรแกรมภาษาหรือเคร่ืองมอื 1 ภาษา ตอไปนี้

1. ภาษา HTML 2. ภาษา XML

3. ภาษา JAVA 4. ภาษา PHP

5. โปรแกรมชวยสรางเว็บเพจสําเร็จรูปตามความตองการขององคกรโดยใหครอบคลุม

สาระสาํ คัญตอไปนี้

ศึกษาและปฏิบัติเก่ียวกับระบบการทํางานของเว็บเพจ ระบบ Hyper Link การออกแบบเว็บเพ

จเบื้องตน การสรา งเวบ็ เพจดว ยโปรแกรมภาษาหรือโปรแกรมสําเร็จรูป การทดสอบการทํางานของเว็บ

เพจ การ Upload เว็บเพจ

8

6. แผนจัดการเรยี นรู กิจกรรม
สัปดาหท่ี หนว ยการเรียนร/ู เนอ้ื หา - ทดสอบความรูพ้นื ฐานของ
1 บทท่ี 1 เรมิ่ ตนกับการสรางเว็บเพจ
นักศึกษาโดยการต้ังคําถาม
- เว็บเพจคืออะไร กอนเรยี น
- ประโยชนข องเวบ็ เพจ - บรรยาย
- เว็บเพจทํางานไดอ ยา งไร - อธิบายพรอมยกตัวอยา ง
- คําศพั ทพ ืน้ ฐานเก่ยี วกบั การสรางเว็บเพจ - ถามตอบ
- โปรแกรมที่ใชส รา งเวบ็ เพจ - สรปุ บทเรียน
- หลักการออกแบบเวบ็ ไซต - แบบฝก หดั /ทดสอบ
- การออกแบบโครงสรางเว็บไซต
- ข้นั ตอนการสรางเวบ็ ไซต - ทดสอบความรพู น้ื ฐาน
2 บทท่ี 2 เริ่มตน กับ HTML และ XHTML - บรรยาย
- รจู กั กับ HTML - ใหนศ.จัดกลุมวิเคราะห
- ลักษณะของ HTML
- ลกั ษณะของภาษา HTML ความแตกตางระหวาง
- โครงสรางของภาษา HTML XHTML กับ HTML แลว
- เครื่องมือทใี่ ชสรา งเอกสาร HTML ออกมาอภิปรายหนา ช้ัน
- ทดลองเขียนเวบ็ เพจแรกดว ย HTML - ครูคอยเสนอแนะและให
- XHTML ภาษามาตรฐานใหมทีม่ าแทน HTML คาํ แนะนําทถ่ี กู ตอ ง
- รจู กั กบั ภาษา XHTML - ครูอธิบายพรอมให นศ.
- สรุปขอดีของ XHTML ทาํ ไปพรอ มๆกนั
- กฏเกณฑพ ้ืนฐานในการเขียนภาษา XHTML - สรปุ บทเรียน
- ตวั อยา งการเขยี นเอกสารภาษา XHTML - แบบฝกหัด / ทดสอบ
3 บทท่ี 3 การจัดวางเนือ้ หาบนหนาเว็บ - บรรยาย
- การตดั คาํ ดวย<br>และ<p> - อธบิ ายพรอมยกตวั อยาง
- การวางตําแหนงขอ ความ - ให นศ. ทดลองทาํ
- การจดั รูปแบบเอกสาร - ครคู อยใหคาํ แนะนํา
- การสรางเสน คน่ั - ถาม ตอบ
- การเพิ่มหมายเหตุ - สรุปบทเรยี น

9

- แบบฝกหัด / ทดสอบ

4-5 บทท่ี 4 การจดั การขอความ - บรรยาย
- กาํ หนดรปู แบบขอ ความทเี่ ปน หัวเร่ือง - สมุ ถาม
- กําหนดลกั ษณะตัวอักษร - อธิบายพรอมยกตัวอยาง
- ปรบั เปลีย่ นขนาดตวั อกั ษร
- การกาํ หนดแบบตวั อักษร แ ล ะ ใ ห น ศ . ทํ า ต า ม
- การใชสีในเว็บเพจ พรอ มๆกนั
- กําหนดสีพ้นื และสีตวั อักษร - ถาม ตอบ
- สรปุ บทเรยี น
6-7 บทที่ 5 การใชลิสตสรา งรายการ - แบบฝกหดั / ทดสอบ
- การสรา งลสิ ตแ บบไมมีลาํ ดับ
- การสรางลสิ ตแ บบมลี าํ ดบั - บรรยาย
- การสรา งลสิ ตแ บบเมนู - ซักถาม
- การสรา งลิสตแ บบไดเร็กทอรีลิสต - อธิบายยกตัวอยางและให
- การสรางลิสตจ ํากดั ความ
- การสรางลสิ ตซ อ นกัน นศ. ทําไปพรอมๆกนั
- ครูคอยใหคาํ แนะนาํ
8-9 บทที่ 6 เช่อื มโยงเว็บเพจดวยลิงค - ถามตอบ
- การสรางลิงค - สรุปบทเรยี น
-ใชภาพเปน ลิงค - แบบฝกหดั / ทดสอบ
- การลงิ คไ ปยังไฟล
- การสรางลิงคเพอ่ื สง อเี มล - ทดสอบความรูพ้ืนฐาน
- การกาํ หนดสขี องลิงค เก่ียวกบั ลงิ ค
- การทาํ Image map
- บรรยาย
- อธบิ ายพรอ มยกตวั อยาง
- ให นศ. ลองทาํ
- ครูคอยใหคาํ แนะนาํ
- ถาม ตอบ

10

- สรา งลิงคแบบ Rollover - สรุปบทเรยี น
- แบบฝก หัด /ทดสอบ

10-11 บทท่ี 7 จดั ขอ มลู ใหเปนสดั สวนดว ยตาราง - อธิบาย

- ประพจน และประโยค - บรรยาย

- การเชื่อมประพจน - ยกตัวอยา งพรอมแสดงวิธี

- การเขยี นตารางคา ความจริง ทําและให นศ. ทําตามไป

- การหาคา ความจริงของประพจน พรอมๆกนั

- ประพจนทีส่ มมูลกนั - ครูคอยใหคําแนะนํา

- การพิสูจน - บรรยาย / สรุป

- การใหเหตแุ ละผล - แบบฝก หัด / ทดสอบ

12-13 บทท่ี 8 แตง เติมเว็บเพจดว ยกราฟก - บรรยาย

- ภาพกราฟก ชนิดตางๆ - อธิบาย

- แสดงภาพบนเวบ็ - ใ ห น ศ . ย ก ตั ว อ ย า ง

- การใสขอ ความกาํ กับภาพ ภาพกราฟกชนิดตางๆที่

- การปรบั ขนาดรูปภาพ เหมาะสมกับการสราง

- การจดั ตําแหนง รปู ภาพ เว็บเพจ

- แสดงภาพเปนฉากหลงั - ครูแสดงวิธีทําพรอมให

นศ. ทําตาม

- ครูใหคาํ แนะนาํ

- สรปุ บทเรียน

- แบบฝก หัด / ทดสอบ

14-15 บทที่ 9 แบง หนาจอโดยใชเฟรม - อธิบาย

- การสรา งเฟรม - บรรยาย

- การกําหนดลกั ษณะของกรอบเฟรม - อธิบายพรอมยกตัวอยาง

- การกําหนดชองวางระหวางเว็บเพจกับเฟรมและ และแสดงวิธีทําให นศ.

เน้ือหากับเว็บเพจ ทาํ ตาม

- การแทรกเฟรมภายในเวบ็ เพจ - ครใู หคําแนะนาํ

- ถาม ตอบ

11

- สรุปบทเรียน

- แบบฝกหัด / ทดสอบ

16-17 บทท่ี 10 การสรา งแบบฟอรม - บรรยาย

- เขาใจรูปแบบการทํางานของฟอรมและ CGI - อธิบาย

- การสรา งฟอรม - บรรยาย

- อุปกรณใ นการรับขอ มูล - สุมถาม ตอบ

- ตัวเลอื กรายการ - ให นศ. ออกมาอภิปราย

- ตวั เลอื กแบบจดั กลมุ ถึงรปู แบบการทํางานของ

- ตวั เลือกรายการแบบหลายบรรทดั ฟอรม และ CGI

- การจัดแบง ฟอรม - ครูคอยใหคําแนะนําท่ี

ถกู ตอ ง

- อธิบายพรอมยกตัวอยาง

ใ ห น ศ . ทํ า ต า ม ไ ป

พรอ มๆกัน

- ครคู อยใหคาํ แนะนาํ

- ถาม ตอบ

- สรปุ บทเรียน

- แบบฝกหดั / ทดสอบ

18 ประเมินผลผเู รยี น

12

หนวยการเรยี นรู

ช่อื วชิ า การสรา งเว็บเพจ (ดว ยภาษา HTML) รหสั วชิ า 2201-2414

รวม 4 ชว่ั โมง / สปั ดาห

ครงั้ ที่ หนว ยท่ี ชอื่ หนวยการเรียนรู จาํ นวนช่วั โมง

1 1 เริม่ ตน กบั การสรางเว็บเพจ 4

สาระสาํ คัญ

- เวบ็ เพจคืออะไร

- ประโยชนของเว็บเพจ

- เวบ็ เพจทาํ งานไดอ ยา งไร

- คําศพั ทพื้นฐานเกย่ี วกับการสรางเว็บเพจ

- โปรแกรมทใี่ ชสรา งเว็บเพจ

- หลักการออกแบบเว็บไซต

- การออกแบบโครงสรางเว็บไซต

- ข้นั ตอนการสรางเว็บไซต

- แบบฝกหดั หลงั เรียน

2 2 เร่มิ ตนกบั HTML และ XHTML 4

สาระสาํ คัญ

- รูจกั กับ HTML

- ลกั ษณะของ HTML

- ลักษณะของภาษา HTML

- โครงสรางของภาษา HTML

- เครื่องมอื ที่ใชสรางเอกสาร HTML

- ทดลองเขยี นเวบ็ เพจแรกดวย HTML

- XHTML ภาษามาตรฐานใหมท ี่มาแทน HTML

- รูจ ักกับภาษา XHTML

- สรปุ ขอ ดขี อง XHTML

- กฏเกณฑพน้ื ฐานในการเขยี นภาษา XHTML

- ตัวอยา งการเขยี นเอกสารภาษา XHTML

- แบบฝกหัดหลงั เรยี น

13

หนว ยการเรียนรู

ช่อื วชิ า การสรางเวบ็ เพจ (ดวยภาษา HTML) รหัสวิชา 2201-2414

รวม 4 ชัว่ โมง / สัปดาห

คร้ังที่ หนวยท่ี ชือ่ หนวยการเรียนรู จํานวนช่วั โมง

3 3 การจัดวางเน้ือหาบนหนา เว็บ 4

สาระสําคัญ

- การตดั คําดว ย<br>และ<p>

- การวางตําแหนงขอความ

- การจดั รปู แบบเอกสาร

- การสรา งเสน คัน่

- การเพม่ิ หมายเหตุ

- แบบฝก หดั หลังเรียน

4-5 4 การจัดการขอ ความ 8

สาระสําคัญ

- กําหนดรปู แบบขอความทเ่ี ปน หัวเรอื่ ง

- กําหนดลักษณะตัวอกั ษร

- ปรบั เปลี่ยนขนาดตวั อักษร

- การกาํ หนดแบบตวั อกั ษร

- การใชส ใี นเว็บเพจ

- กาํ หนดสพี ้ืนและสีตวั อกั ษร

- แบบฝก หัดหลังเรียน

14

6-7 5 การใชล สิ ตส รางรายการ 8

สาระสําคัญ

- การสรา งลสิ ตแบบไมม ีลาํ ดบั

- การสรางลิสตแ บบมีลาํ ดับ

- การสรางลิสตแบบเมนู

- การสรา งลสิ ตแบบไดเร็กทอรีลสิ ต

- การสรางลสิ ตจํากดั ความ

- การสรางลิสตซอ นกนั

- แบบฝก หดั หลงั เรยี น

หนวยการเรยี นรู

ชือ่ วชิ า การสรา งเว็บเพจ (ดว ยภาษา HTML) รหัสวิชา 2201-2414

รวม 4 ชั่วโมง / สัปดาห

ครง้ั ที่ หนวยท่ี ชอ่ื หนว ยการเรยี นรู จาํ นวนช่วั โมง

8-9 6 เช่อื มโยงเวบ็ เพจดว ยลิงค (Link) 8

สาระสาํ คญั

- การสรางลงิ ค

-ใชภาพเปนลิงค

- การลงิ คไปยงั ไฟล

- การสรา งลิงคเ พ่ือสง อเี มล

- การกําหนดสีของลงิ ค

- การทํา Image map

- สรา งลงิ คแ บบ Rollover

- แบบฝกหดั หลังเรยี น

15

10-11 7 จดั ขอมูลใหเปน สัดสวนดวยตาราง 8

สาระสําคญั

- การสรางตาราง

- การใสหัวขอ

- การกําหนดขอความกาํ กบั ใหตาราง

- ความหนาของเสนตารางและความหนาของชองเซลล

- ปรับความกวางและความสงู ของตาราง

- ใสสใี หกับเซลลแ ละตาราง

- ใสร ูปภาพใหก บั พนื้ หลงั ของตาราง

- การซอนตาราง

- การแบงสว นตาราง

- แบบฝก หดั หลังเรียน

หนวยการเรียนรู

ชื่อวชิ า การสรา งเว็บเพจ (ดว ยภาษา HTML) รหัสวิชา 2201-2414

รวม 4 ช่ัวโมง / สปั ดาห

ครงั้ ท่ี หนว ยที่ ชือ่ หนวยการเรยี นรู จาํ นวนช่วั โมง

12-13 8 แตง เติมเวบ็ เพจดว ยกราฟก 8

สาระสําคญั

- ภาพกราฟกชนิดตางๆ

- แสดงภาพบนเว็บ

- การใสข อ ความกํากับภาพ

- การปรบั ขนาดรูปภาพ

- การจดั ตําแหนง รปู ภาพ

- แสดงภาพเปน ฉากหลงั

- แบบฝก หัดหลังเรียน

14-15 9 แบงหนาจอโดยใชเฟรม 8
สาระสําคัญ

16

- การสรา งเฟรม

- การกําหนดลักษณะของกรอบเฟรม

- การกําหนดชองวางระหวางเว็บเพจกับเฟรมและ

เนื้อหากบั เว็บเพจ

- การแทรกเฟรมภายในเว็บเพจ

- แบบฝกหดั หลงั เรยี น

16-17 10 การสรางแบบฟอรม 8

สาระสาํ คัญ

- เขาใจรปู แบบการทาํ งานของฟอรมและ CGI

- การสรางฟอรม

- อุปกรณในการรับขอมลู

- ตัวเลอื กรายการ

- ตวั เลือกแบบจดั กลมุ

- ตวั เลอื กรายการแบบหลายบรรทัด

- การจดั แบงฟอรม

- แบบฝก หดั หลงั เรยี น

7. กิจกรรมการเรียนรู

7.1 กิจกรรมครู
7.1.1 จัดเตรียมเอกสาร หนังสืออางอิง ส่ือการเรียนท้ังสื่อโสตทัศน ส่ือส่ิงพิมพ ตัวอยางแฟม

สะสมผลงานของผเู รยี น
7.1.2 นําเขาสูบทเรียนโดยการประเมินผูเรียนที่หลากหลาย เชน ถามความรูพื้นฐานทั้งหอง

หรอื ทาํ แบบฝกหดั เรียน
7.1.3 การใหขอมูลหรือการสอน โดยผูสอนใหผูเรียนศึกษาจากใบความรู แบบฝกหัด สรุป

สาระการเรียนรูประจําหนวยการเรียน ตัวอยางแฟมสะสมผลงานรุนพ่ี หรือชุดการเรียน ส่ือโสตทัศน
แลวทําแบบฝกหดั หากยงั ทําไดไมครบใหทบทวนบทเรยี นใหผ เู รยี นใหม

17

7.1.4 สังเกต บนั ทึกพฤตกิ รรมผูเ รยี นขณะศกึ ษาบทเรยี น คอยชว ยเหลอื ใหคําแนะนําเมอื่ ผเู รยี น
ตองการ

7.1.5 การประยุกตใช โดยใหใบมอบหมายงานแกผูเรียน ดําเนินงานตามจุดประสงคท่ีกําหนด
ไวในใบงาน โดยดําเนินงานในลักษณะของข้ันตอนทางวิทยาศาสตร เริ่มตั้งแต ระบุความตองการของ
ปญหา ขั้นศึกษาเพื่อหาสมมตฐิ าน ข้นั ปฏบิ ัตเิ พอ่ื หาคําตอบ และสรุปผลของคาํ ตอบทีไ่ ดจากข้ันปฏบิ ตั ิ

7.1.6 สังเกต บันทึกพฤติกรรมผูเรียนขณะดําเนินงานตามใบงาน คอยชวยเหลือใหคําแนะนํา
เม่อื ผูเรียนตอง

7.1.7 แบงกลุมผูเรียนเพื่อดําเนินการตามใบงาน แลวผูสอนเดินสํารวจการดําเนินงานตามใบ
งานของผเู รียนหากพบวาผเู รยี นดําเนินการยงั ไมถูกตองใหค อยชแ้ี นะวธิ ีที่ถูกตองทันที

7.1.8 การตรวจสอบผลการเรียนรู ใหผูเรียนรวมกันกําหนดหัวขอท่ีจะประเมินงานรวมกับ
ผูเรียนตรวจสอบชิน้ งานเพ่อื ประเมินและแกไขขอ บกพรอง

7.1.9 สงั เกต บันทกึ พฤติกรรมผูเรียนขณะผเู รียนทํางาน คอยชวยเหลือใหคําแนะนําเมื่อผูเรียน
ตอ งการ

7.1.10 หากผูเรียนไดแบง กลมุ รับผิดชอบการดําเนินการตามใบงานใหตัวแทนกลุมหรือสมาชิก
ท้ังกลมุ ลกุ ขึ้นบอกคําตามพรอ มทั้งวธิ ีการไดม าซึ่งคําตอบ

7.1.11 ครอู ธบิ ายเนือ้ หา พรอมแสดงวธิ ีทาํ ครูใหนักศึกษามสี ว นรว มในการเรยี นการสอน เชน
- ถามตอบ
- รวมกนั สรปุ
- รว มกันวิเคราะหห าเทคนคิ และแนวทางทีด่ ีและงาย
- รวมกันสรางโจทยปญหา และ รวมกันสรุปวิธีการแกปญหาท่ีกําหนดในแนวทางท่ี

ถกู ตอ งและเหมาะสม
7.1.12 ครูใหนักศึกษาทําแบบฝกหัดทบทวนบทเรียนบนกระดานเปนรายบุคคลพรอมให

อธบิ ายและสรุปหลักการออกมาเปนแนวคดิ ตามความเขาใจของแตล ะบคุ คล
7.1.13 ครูปฏิบัติใหนักศึกษาดูและทําตามไปทลี ะข้ัน
7.1.14 ครกู าํ หนด ครจู ดั ใหนักศึกษาทํากจิ กรรมกลมุ เพ่ือใหเกดิ ความคดิ ท่หี ลากหลาย
7.1.15 ครูสรปุ พรอ มแนะนําเทคนคิ และกระบวนการคิดทีถ่ ูกตอ ง
7.1.16 ผูเรียนทําภาระงานทุกหนวยการเรียนตามใบงานประจําหนวยสงในเวลาท่ีกําหนด

แลวหลังจากครูไดตรวจชิ้นงานใหผูเรียนทําการแกไขใหถูกตองและเก็บสะสมช้ินงานเพ่ือจัดทําแฟม
สะสมชิน้ งานในทกุ หนว ยการเรียนรหู ลังเสรจ็ ส้นิ กระบวนการเรยี นการสอน

18

7.2 กิจกรรมผูเรียน
7.2.1 จดั เตรียมเอกสาร หนงั สือแบบเรียน หนงั สอื อางอิง ตามทผ่ี สู อนและบทเรยี นกาํ หนด
7.2.2 นําเขาสูบทเรียนโดยรับการชี้แจงวิธีการเรียนรู ระยะเวลาที่ทําการเรียนการสอน

หลกั การแนวทางการเรียน การประเมนิ ผลการเรียน
7.2.3 จัดกลุมกันศึกษา คนควา หาขอมูลจากเอกสารตํารา หนังสือเรียน หนังสืออางอิง และ

เรียนจากชุดการเรียนและสื่อการเรียนตาง ๆ และผูเรียนรวมกันแลกเปลี่ยนความรูความคิดเห็นซึ่งกัน
และกนั เพ่อื หาความคิดรวบยอดใหเ กิดในแตล ะสาระการเรียนรู

7.2.4 การใหขอมูล โดยศึกษาเนื้อหาจากใบความรู ใบงาน หรือส่ือการเรียนตาง ๆ แลวทํา
แบบฝกหัด หากยังทําไดไมครบทําการทบทวนบทเรียนใหม หากมีปญหาขอขัดของใหขอคําแนะนํา
จากผูส อนและเพอ่ื นในกลุม

7.2.5 การประยุกตใช โดยศึกษาใบมอบหมายงาน ดําเนินงานตามจุดประสงคในแตละสาระ
การเรียนรูตามใบงานท่ีกําหนดไวโดยดําเนินงานในลักษณะของขั้นตอนทางวิทยาศาสตร เร่ิมต้ังแต
ระบุความตองการของปญหา ข้ันศึกษาเพื่อหาสมมติฐาน ขั้นดําเนินการปฏิบัติเพ่ือใหไดมาซ่ึงคําตอบ
สรปุ ผลของคําตอบทีไ่ ดม าจากขั้นปฏิบัติ หนาหองเรียน หรือสงครู ตามท่ีไดกําหนดไวในใบมอบหมาย
งาน หากมปี ญ หาใหข อคําแนะนาํ จากผูสอนและเพ่อื ในกลุมหรอื เพอ่ื ในหองเรยี น

7.2.6 การตรวจสอบผลการเรียนรู โดยทํารายงานผลการดําเนินงาน รวมกับผูสอนกําหนด
หัวขอท่ีจะประเมินงานในแตละสาระการเรียนรู และผูเรียนมีสวนรวมในการตรวจสอบช้ินงานเพื่อ
ประเมนิ และแกไขขอบกพรอง หากมีปญ หาขดั ขอ งใหขอคําแนะนาํ จากผูสอนและเพอ่ื นในกลุม

8. สอื่ การเรยี นการสอน

8.1 หนงั สอื ประกอบการเรียน วิชา การสรา งเว็บเพจ (ดว ย ภาษา HTML)

8.2 ใบงานประจาํ หนวยการเรียนรูแ ตละหนวย

8.3 แบบฝกหัดประจําหนวยการเรยี นรู

8.4 ตัวอยางแฟม สะสมช้ินงาน

8.5 ชดุ การสอน PowerPoint แตล ะหนว ยการเรียน

8.6 VCD CAI

8.7 บทเรยี นออนไลนว ชิ า การสรา งเวบ็ เพจ (ดวยภาษา HTML)

9. การวัดผลประเมนิ ผล เกบ็ คะแนนระหวางการดาํ เนนิ กจิ กรรมการเรยี นรู 100 คะแนน

1. คุณธรรมและจริยธรรม 20 คะแนน

2. ใบงาน/แบบฝก หดั (ช้นิ งาน/แฟมสะสมผลงาน) 30 คะแนน

19

3. ทดสอบระหวา งเรียน 20 คะแนน

4. ประเมินผลผูเรยี นหลงั เรียน 30 คะแนน

10. การวดั และประเมนิ ผล

10.1 ผูเ รียนปฏิบัติภาระงานทีม่ อบหมายเสรจ็ ทันเวลาที่กําหนดและถกู ตอ ง

10.2 ผูเรียนมีความสนใจในการตอบคาํ ถามและการสรุปผลการเรยี นรแู ตล ะหนวยการเรียนได

อยา งถูกตอง

10.3 เกิดความคิดรวบยอดในแตละหนวยการเรียนรู และรูหลัก เทคนิค และวิธีการปฏิบัติได

อยางรวดเรว็ และถกู ตอ ง

10.4 ผานการทดสอบประจาํ หนว ยและประมวลผลสาระการเรียนรูต ลอดภาคเรยี น

10.5 ผูเรียนเกิดทกั ษะในการสรางเวบ็ เพจ (ดว ยภาษา HTML)ไดอ ยางถูกตอ ง

10.6 สังเกตพฤติกรรมและการแสดงออกถึงการเล็งเห็นคุณคาของการนําวิธีการสรางเว็บเพจ

มาใชในชวี ติ ประจําวันของผเู รยี น

10.7 ความสนใจในการเรียนรู การคนควาเพ่ือแสดงความรูและคําตอบ การมีสวนรวมใน

กิจกรรม

10.8 การซกั ถามและการตอบคาํ ถาม

10.9 แบบฝกหัดและกจิ กรรมการฝกทกั ษะ

10.10 การทํางานเปน ทมี (ใหความสาํ คัญในการทาํ งานเปน ทีม)

10.11 การประเมนิ โดยกลมุ เพือ่ น การประเมินตนเอง

10.12 การเขยี นรายงานผลงาน และการแกไ ขสวนท่ีบกพรองในชนิ้ งานที่มอบหมาย

10.13 แฟมสะสมผลงานทมี่ อบหมายในแตล ะหนวยการเรยี น

เครื่องมอื วัดผล

1. ดา นคุณธรรมจริยธรรม (จิตพิสัย)
1.1 การปฏบิ ตั ติ ามกฎระเบียบของสถานศกึ ษา
1.2 ตรงตอเวลา
1.3 สนใจปฏบิ ตั งิ านท่มี อบหมายและความกระตอื รือรนในการเรียน
1.4 ความรบั ผิดชอบ
1.5 ความสะอาดและความเปน ระเบียบ
1.6 ความซ่ือสตั ย

20

1.7 การเห็นคุณคาและมเี จตทด่ี ี

2. ดา นวชิ าการ (ดานทักษะ)
2.1 ตอบคาํ ถาม
2.2 หลกั การและเทคนคิ ในการสรางเว็บเพจ (ดว ยภาษา HTML )
2.3 มคี วามรคู วามเขาใจ
2.4 ผลงานการปฏบิ ตั ติ ามใบงานมีความถกู ตอง
2.5 มีทกั ษะและวเิ คราะหการใชงานได
2.6 ความสามารถในการนําความรไู ปประยกุ ตใ ชในการทาํ งานกับคอมพวิ เตอร
2.7 ทําแบบฝก หดั หลงั เรียนมคี วามเขาใจ
2.8 ทําแบบทดสอบและปฏบิ ตั ิไดจ ริง
2.6 มีโนภาพและความคิดรวบยอดในการในกระบวนการเรียนรูป ระจําหนว ย
2.7 มที กั ษะทีด่ ใี นการสรา งเว็บเพจ (ดว ยภาษา HTML)

10. แหลง การเรยี นรู
10.1 หอ งสมดุ สถานศึกษา
10.2 หองปฏบิ ัติการคอมพวิ เตอรและสารสนเทศ
10.3 ผูป กครอง เพอ่ื น ๆ รุนพี่ และบคุ ลากรในสถานศึกษา
10.4 หนังสือ E-book , Elearning , Website ทเี่ กีย่ วขอ ง
10.5 ครผู ูสอน

11. ผลงานผูเรยี น
11.1 รวบรวมผลงานที่เปนผลงานท่ีถูกตองในภาระงานท่ีมอบหมาย และผูเรียนทําการปรับปรุง
แกไ ขชิ้นงานท่ียังไมถกู ตองใหถ กู ตอง แลว จดั ทาํ เปน แฟมสะสมผลงาน
11.2 แฟม สะสมผลงานการทดสอบของผูเ รยี น

10. เอกสารอา งอิ ง
อ.ประชา พฤกษป ระเสรฐิ . การสรา งเวบ็ เพจ(ดวยภาษาHTML) ระดบั ช้ันปวช. กรงุ เทพมหานคร:

บริษทั ซัคเซสมีเดยี จํากดั , 2550.

21

แผนจัดการเรยี นรู วชิ า การสรา งเวบ็ เพจดว ยภาษา(HTML) รหสั วิชา 2201-2414 ช้ัน ปวช.

หนวยท่ี 1 เร่ือง เร่ิมตนกบั การสรางเว็บเพจ สปั ดาห 1 เวลา 4 ชัว่ โมง

1. สาระสําคัญ
เว็บเพจ เปนเอกสารที่ใชในการเผยแพรขอมูลขาวสาร ซึ่งประกอบไปดวยขอความ ภาพ เสียง

และภาพยนตรผานทางเครือขายอินเตอรเน็ต ในปจจุบันนํามาใชประโยชนหลายอยาง เชน ขาวสาร
ความรูความบันเทิง ประชาสัมพันธ การเงิน การลงทุนฯลฯ โดยโปรแกรมพื้นฐานท่ีสุด ก็คือ การเขียน
ดวยภาษา HTML ซึ่งสามารถเขียนใน Text Editor ทัว่ ไป อยา ง Notepad ทม่ี าพรอมกบั Windows ได

2. จดุ ประสงคการเรยี นรู

2.1 จุดประสงคทัว่ ไป (จดุ ประสงคน าํ ทาง)
1. มีความรคู วามเขาใจเก่ยี วกับความหมายและประโยชนของเวบ็ เพจได
2. มีความรคู วามเขาใจเก่ยี วกับหลกั การทํางานของเว็บเพจได
3. มคี วามรูค วามเขา ใจเก่ียวกบั หลักการในการออกแบบเว็บไซต
4. มคี วามรคู วามเขาใจเก่ียวกบั ขั้นตอนในการพฒั นาและสรา งเวบ็ ไซตไ ด

2.2 จุดประสงคเ ชงิ พฤติกรรม (จดุ ประสงคป ลายทาง)
1. บอกความหมายและประโยชนของเว็บเพจได
2. อธิบายหลักการทาํ งานของเว็บเพจได
3. อธิบายเกีย่ วกบั ความหมายของคําศพั ทพ น้ื ฐานทใ่ี ชในการสรางเวบ็ ไซต
4. อธิบายโปรแกรมท่ใี ชในการสรางเว็บเพจได
5. อธบิ ายหลักการในการออกแบบเว็บไซตได
6. อธิบายขั้นตอนในการพัฒนาแลพสรางเว็บไซตได

3. กจิ กรรมการเรยี นรู

22

กจิ กรรมครู กจิ กรรมผเู รยี น

ขนั้ เตรยี มกจิ กรรม(10 นาท)ี

1. ครูชแ้ี จงจุดประสงคและคําอธิบายรายวชิ า 1. ผูเรียนดู , ฟง และจดบันทึก

2. ครูช้ีแจงระเบียบวาดว ยเวลาเรียนและการประเมนิ ผล 2. ใหผ ูเรียนพดู คยุ และซักถาม

3. ครูตกลงกับผูเรียนในการจัดกิจกรรมกระบวนการ ขอสงสัย

เรียนการสอน

4. ครกู ําหนดหนงั สอื เอกสารและใบงานครกู บั ผเู รียน

สรางความเปนกันเองและความคุนเคยเพ่ือลดอาการ

เครียดและเกรงกลัวครูผสู อน

ข้นั นําเขาสูบทเรยี น( 20 นาที)

1. ครูนําเขาสูบทเรียนโดยใหผูเรียนในหองแสดงความ 1. ผูเรียนฟง และตอบคําถามครูดวย

คดิ เห็นเกี่ยวกบั เว็บเพจ ความต้ังใจ เปนการวัดความรูเดิม

2. ทดสอบกอนเรยี นโดยการ ถาม – ตอบ ของผเู รยี น

3. ครูสรุปและอธิบาย พรอมกับยกตัวอยาง จนกวาผูเรียน 2. ผูเรียนแสดงความคิดเห็นและ

สามารถเขาใจเรื่องเว็บเพจ นาํ เสนอ

3. ผูเรียนปรึกษาหากันในหองเรียน

ศึกษาจากเอกสารประกอบการเรยี น

และชวยกันระดมความคิดแลวตอบ

คําถาม

ข้นั ดาํ เนินการสอน( 180 นาท)ี

1. ทดสอบกอนเรียนโดยการ ถาม–ตอบใหผูเรียนบอก 1. ใหผ เู รยี น ตอบคําถาม

ความหมาย ประโยชน หลักการทํางาน หลักการใน 2. ผูเรียนรวมกันคิดและนําเสนอใน

การออกแบบ ข้ันตอนในการพัฒนาและสรางเว็บ หอ งเรียน

เพจ 3. ใหผูเรียน รวมกันประเมินผลเพ่ือน

2. ครูบรรยาย และยกตัวอยางประกอบในแตละหัวขอ ท่ีออกแสดงความคิดเห็น วาถูก

อยา งชดั เจนเพื่อใหผูเรียนสามารถจดจาํ ไดงา ย หรอื ไม อยา งไร

4. ผูเรียนสนใจ ตั้งใจฟงครูบรรยาย

พรอ มจดบนั ทึก

23

กจิ กรรมครู กจิ กรรมผเู รยี น

3. สุมใหผเู รยี นลกุ ขน้ึ สรปุ บทเรียน 5. ใหผูเรียนสรุปผลรวมกับครูผูสอน

4. ใหท าํ ใบงาน และจดบนั ทกึ ผลการสรปุ

5. ครูตรวจใบงาน พรอมแจกคืนใหผูเรียน เพื่อนํา 6. ผูเรียนทําใบงานที่มอบหมายสงใน

กลับไปแกไขขอที่ผิดแลวสงใหมจนกวาจะถูกตอง เวลาท่ีผูส อนกาํ หนด

หรือหมดเวลาท่กี ําหนดในการสง ใบงาน 7. ถาใบงานในขอใดไมถูกตองผูเรียน

ตองทําการแกไขใบงานใหถ ูกตอง

8. ผเู รียนทําแบบฝก หดั หลงั เรียน

9. ผูเรียนชวยกันเฉลยแบบฝกหัดหลัง

เรียนรวมกบั ครผู ูส อน

ข้นั สรุป( 30 นาท)ี

6. ค รู แ น ะ นํ า ใ ห ผู เ รี ย น ไ ป ศึ ก ษ า จ า ก ห นั ง สื อ 10. ผูเรียนบอกวิธีท่ีนําความรูจาก

ประกอบการเรียน บ ท เ รี ย น ไ ป ป ร ะ ยุ ก ต ใ ช ใ ห เ กิ ด

7. ทดสอบหลังเรียน ประโยชนและประสิทธิภาพสูงสุด

8. ครูและผูเรียนรวมกันสรุปบทเรียนและการนําไป ตอไป

ประยุกตใช

4. กิจกรรมการเรียนรู
กอ นเรยี น
1. ครูชี้แจงใหผูเ รียน เขา ใจแกน สารการเวบ็ ไซตด วยภาษา HTML
2. ครชู แ้ี จงวัตถุประสงคร ายวชิ า
3. ครชู ี้แจงระเบียบวา ดว ยเวลาเรยี น
4. ครูตกลงกบั ผเู รียน เรื่องการแบงคะแนนเก็บระหวา งภาคดงั น้ี
5. ครตู กลงกบั ผเู รยี นเรอ่ื งการปฏิบัติตนในหองเรยี นตามแบบประเมิน
6. ครูบอกแนวทางในการเรยี น และวิธีการปฏิบัตติ ามภาระงานท่มี อบหมาย

ขณะเรียน
1. ทําแบบฝกหัดกอ นเรียน โดยการถาม – ตอบ และใหแสดงความคิดเหน็

24

2. จดบันทกึ สาระการเรยี นรู
3. รวมกันสรุปบทเรยี น พรอ มบันทึกผลการสรปุ แลวลุกขึน้ นาํ เสนอกบั ครผู สู อน
4. ผูเรียนและครูผูสอนรวมกันประเมินขอสรุปของผูเรียนท่ีออกแสดงความคิดเห็นเพ่ือใหได
ขอสรุปที่ถูกตอง และครูผูสอนแสดงความชื่นชมกับผูเรียนทุกคนที่ออกแสดงความคิดเห็นและมีสวน
รวมในกิจกรรมทมี่ อบหมาย
5. ทําใบงาน ตรวจสอบใบงาน แกไขใบงาน
6. ทบทวนเนอื้ หา
7. ทําแบบฝกหดั หลงั เรยี น
8. รว มกันเฉลยแบบฝก หัด

5. ส่ือการเรยี นการสอนประจําหนวย
1. หนงั สือเรียน วชิ า การสรางเว็บเพจ (ดว ยภาษา HTML)
2. ใบความรปู ระจาํ หนวย
3. ใบงานและแบบฝก หดั
4. เครอื่ งไมโครคอมพวิ เตอร
5. แผน ใสและเคร่อื งฉายภาพขา มศรี ษะ
6. ซีดสี ่ือการสอน

6. วัดผลประเมนิ ผลประจาํ หนวย
1. สังเกตผูเรียนมีความสนใจ เกิดความเขาใจในสาระการเรียนรู ตลอดจนแสดงความ

กระตอื รอื รน ในการแสดงความคดิ เห็นและสรปุ สาระการเรียนรูประจําหนวย
2. ทําใบงานไดอยา งถูกตอ ง ทนั เวลาท่กี ําหนด ใบงานสะอาดและเปน ระเบียบ
3. ผูเรียนทาํ แบบฝกหัดหลงั เรยี นไดถูกตอ ง โดยไดคะแนน 50% เปน อยา งตํา่

7. กจิ กรรมเสนอแนะประจําหนวย
1. ผูเรียนตองใหความสนใจในการศึกษา เพื่อหาเทคนิค วิธีการ หรือหลักการงายเพ่ือให
เขาใจแกนสารการเว็บไซตดวยภาษา HTMLโดยการ ตั้งใจฟงหลักการ เทคนิควิธีการที่
ครูผูสอนสรุปในขณะท่ีทําการสอน และนําขอสงสัยซักถามครูในการเรียนทุกคร้ังที่เกิด
ความสับสน และไมเ ขา ใจ

25

2. ผูมกี ารทบทวนบทเรียน ตลอดเพอื่ เสรมิ สรา งความเขาใจอยางแทจริง
3. ผูเรยี นหม่นั ทําใบงาน แบบฝกหัด และแกไ ขขอ ที่ผดิ ใหถกู ตองเสมอ
4. ผูเรียนตองสรางมโนภาพใหเกิดความคิดรวบยอดในสาระการเรียนรูและเทคนิควิธีการ
พรอ มกับความจาํ เปนในการนาํ ไปประยกุ ตใ ชใ หเ กิดขึ้นโดยตนเองใหไ ดเพอ่ื เกดิ ค วามรคู วามเขา ใจอยา ง
แทจ รงิ ไมใ ชเ กิดจากการทองจํา

เกณฑการประเมนิ ผล

วัดผลสมั ฤทธจิ์ ากแบบประเมินผลการเรยี นรู

รอ ยละ 80-100 หมายถึง ผลการเรียนดมี าก
ผลการเรียนดี
รอ ยละ 70-79 หมายถงึ ผลการเรยี นปานกลาง
ผลการเรยี นผา นเกณฑ
รอ ยละ 60-69 หมายถงึ ผลการเรียนไมผ านเกณฑ

รอยละ 50-59 หมายถงึ

ตํา่ กวา รอยละ 50 หมายถงึ

แบบประเมนิ พฤตกิ รรมรายบคุ คล หมายถงึ มีพฤติกรรมดี
หมายถงึ มีพฤตกิ รรมพอใช
8-10 คะแนน หมายถึง มพี ฤตกิ รรมทีต่ อ งปรบั ปรงุ
5-7 คะแนน
ตา่ํ กวา 5 คะแนน

26

แบบและเกณฑประเมินพฤตกิ รรมรายบุคคล

คําชแี้ จง ใหผ ูประเมินขีดเครือ่ งหมายถกู 9ในชองพฤตกิ รรมทค่ี าดหวังใหเ กิดกับนักเรียน

เกณฑการตัดสนิ

2 คะแนน หมายถงึ มพี ฤติกรรมในระดับแบบสม่ําเสมอ
1 คะแนน หมายถึง มีพฤติกรรมในระดับผา นเกณฑ
0 คะแนน หมายถึง มีพฤติกรรมในระดบั ไมผ านเกณฑ

เกณฑการประเมนิ หมายถึง มพี ฤตกิ รรมดี
หมายถงึ มพี ฤตกิ รรมพอใช
8 - 10 คะแนน หมายถงึ มีพฤตกิ รรมทต่ี องปรบั ปรงุ
5 - 7 คะแนน
ตาํ่ กวา 5 คะแนน

เลข ช่อื – สกุล พฤตกิ รรมของนกั เรียน ความ รวม
ที่ ผรู บั การ รอบคอบ 20
ความมวี นิ ัย ความ มนุษย ขยนั หมนั่
ประเมนิ รบั ผดิ ชอบ สัมพันธ เพียร 4321
1
2 4 3 2 1 4 3 2 1 4 3 2 1 4 3 21
3
4
5
6
7
8
9

27

10
11
12
13
14
15
16
17
18
19
20
21
22

ผปู ระเมนิ ……………………………
(…………………………..)

บันทึกหลังการสอน (ปญ หาและขอเสนอแนะ)

ผลการใชแผนการสอน

ผลการเรยี นของนักเรยี น

28

ผลการสอนของครู

เฉลยแบบฝกหดั หนว ยท่ี 1

จงทําเครื่องหมายวงกลม ในหัวขอที่ถูกท่ีสุดเพียงขอ เดยี ว

1. ขอ ใดเปน ประโยชนข องเว็บเพจ ?
ก. นําเสนอขา วและเหตกุ ารณป จ จบุ นั
ข. รวบรวมความรไู วเ ปน คลังขนาดใหญ
ค. มบี รกิ ารสําหรบั ทําธรุ กรรมการเงินออนไลน
ง. ถกู ทุกขอ

29

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 ข. สว นระบุตาํ แหนง

30

ค. host name ง. ช่อื ไฟลข อ มลู

9. ขอ ใดกลา วไดถ ูกตองเก่ยี วกบั ขั้นตอนในการพฒั นาเวบ็ ไซต ?
ก. Site Map อยใู นข้นั ตอนการออกแบบเวบ็ เพจ
ข. ข้ันตอนแรกตอ งเริ่มจากการเชือ่ มโยงระหวางเว็บเพจ
ค. เราตอ งจองพื้นทเ่ี ก็บเวบ็ เพจกอนทจี่ ะอพั โหลดขอ มลู ขน้ึ ไป
ง. ตอ งออกแบบเว็บเพจแตล ะหนา กอนแลว คอ ยวางแผนการเชอื่ มโยง

10. ขอใดคือขนั้ ตอนของ Web Hosting ? ข. การเชื่อมโยงระหวางเว็บเพจ
ก. การออกแบบเวบ็ เพจ ง. จองพน้ื ท่ีเกบ็ ขอ มูลเวบ็ ไซต
ค. อัพโหลดเวบ็ ไซต

ตอนที่ 2 จงใสเครือ่ งหมาย หนาขอ ความทถ่ี กู และใสเคร่ืองหมาย หนาขอ ความทผ่ี ดิ

.......... 1. เวบ็ เพจ คอื เอกสารท่ีใชใ นการเผยแพรข อ มูลขา วสารซ่งึ ประกอบดว ย
ขอ ความ ภาพ เสยี ง และภาพยนตร ผา นทางเครอื ขายอนิ เทอรเ นต็

.......... 2.เราใชเ วบ็ บราวเซอรใ นการเขา สโู ลกของ World Wide Web
.......... 3. ขน้ั ตอนแรกของการสรางเวบ็ ไซตควรกาํ หนดโครงรา งของเว็บไซตน ัน้ เสียกอ น
.......... 4. โดเมนเนมเปนการนําตวั อกั ษรทจี่ าํ งา ยมาใชแ ทนไอพแี อดเดรส
.......... 5. เราจะเรียกกลมุ ของหนาเว็บ หรอื เว็บหลายๆ หนารวมกนั วา "โฮมเพจ"

โดยจะมีการกาํ หนดหนาเว็บเพจหนา หนงึ่ ไวเ ปนหนาแรก เวบ็ เพจนี้มีชอ่ื เรยี กวา "เว็บไซต"
.......... 6. HTTP ยอมาจาก HyperText Transfer Process
.......... 7. โดเมนเนมมักถกู ตั้งใหส อดคลอ งกับชอ่ื บรษิ ัท หรือองคก รผเู ปน เจา ของ
.......... 8. เว็บไซตแ ตล ะเวบ็ ไซตจะมโี ดเมนเนมเฉพาะทีไ่ มเ หมอื นใคร
.......... 9. success.co.th เปน โดเมนเนมแบบ 2 ระดับ
.......... 10. .com เปนโดเมนเนมของบริษทั หรอื องคกรพาณิชย และองคก รรฐั บาล

31

ตอนที่ 3 จงตอบคาํ ถามตอ ไปนี้
1. จากรูปจงอธบิ ายการทํางานทเ่ี กดิ ข้ึนในขนั้ ตอนที่ 1, 2 และ 3

2.
ขัน้ ตอนท่ี 1
ผูใชพ มิ พต าํ แหนงเว็บเพจในโปรแกรมบราวเซอร ก็จะมกี ารรองขอขอมูลไฟลเวบ็ เพจหนา นน้ั ไป
ยังเครื่องเซิรฟเวอร (Server คอื เคร่ืองทเี่ กบ็ และเผยแพรเ ว็บเพจ)
ขัน้ ตอนท2่ี
ฝงเซริ ฟ เวอรจ ะทําการคน หาไฟลเวบ็ เพจทถ่ี กู รอ งขอ
ขน้ั ตอนท่ี 3

เว็บเซริ ฟเวอรส งขอมลู ไปยงั เครอื่ งผูใชและแสดงผลบนบราวเซอร

2. ตัวยอ ตอไปนี้ .com .edu .gov .mil .net และ .org ใชก บั องคก รใด
.com

ใชกบั บรษิ ทั หรอื องคก รพาณชิ ย
.edu

ใชก บั สถาบนั การศกึ ษา
.gov

ใชกบั องคกรรฐั บาล

32

.mil
ใชก บั องคก รทางทหาร

.net
ใชก ับองคกรท่ีทําหนาที่เปน เกตเวย หรอื จุดเชอ่ื มตอ เครือขา ย

.org
ใชก บั องคก รที่ไมเขา คายประเภทองคก รทง้ั หมดท่ไี ดก ลาวถึง

3. จงอธบิ ายข้นั ตอนการสรา งเวบ็ ไซตพ อสงั เขป
มี 6 ข้ันตอนดงั นี้
1. กาํ หนดโครงรางของเวบ็ ไซต เริม่ ตน ดว ยการกําหนดผังของเว็บหรอื เรยี กวา Site map กอน
2. กําหนดการเชอ่ื มโยงระหวางเวบ็ เพจ เพอื่ ใหกลับไปกลับมาระหวา งหนา ตา งได
3. ออกแบบเวบ็ เพจแตล ะหนา ภายในเวบ็ ไซต
4. สรางเวบ็ เพจแตล ะหนา โดยการเขยี นภาษา HTML
5. ลงทะเบยี นขอพ้ืนที่เวบ็ ไซตฟรี ตามผูใ หบ รกิ ารตา งๆ
6. อพั โหลดเวบ็ ไซต เพื่อใหคนท่วั โลกสามารถดูเว็บไซตของเราไดผานเครือขายอินเทอรเ น็ต

33

แผนจัดการเรียนรู วิชา การสรา งเวบ็ เพจดวยภาษา(HTML) รหัสวชิ า 2201-2414 ชน้ั ปวช.

หนวยท่ี 2 เรื่อง เรม่ิ ตนกบั XTML และ XHTML สปั ดาห 2 เวลา 4 ช่วั โมง

1. สาระสาํ คัญ
HTML เปนภาษาหลักท่ีใชในการสรางไฟลเว็บเพจ โดยลักษณะของภาษา HTML แบง

ออกเปนสองสว น คือ สว นของขอความทัว่ ๆไปและสวนที่เปนคาํ สัง่ ในการกําหนดรูปแบบของขอ ความ
ซ่ึงเรียกวา แท็ก (Tag)หลังจากนั้นไดพัฒนาภาษา HTML ขึ้นเร่ือยๆ เพื่อลบจุดออนหลายๆอยางลง จน
กลายมาเปนภาษาใหมท ีช่ ่ือ XHTML

2. จุดประสงคการเรียนรู

2.1 จุดประสงคท ว่ั ไป (จุดประสงคนาํ ทาง)
1. มคี วามรคู วามเขา ใจเกย่ี วกบั โครงสรางพื้นฐานของภาษา HTML ได
2. มคี วามรคู วามเขา ใจเกย่ี วกับความแตกตางระหวา ง XHTML กบั HTML ได
3. มคี วามรูความเขา ใจเก่ียวกบั โครงสรา งพื้นฐานของภาษา XHTML ได

2.2 จุดประสงคเชงิ พฤติกรรม (จดุ ประสงคปลายทาง)
1. อธิบายถงึ โครงสรางพ้ืนฐานของภาษา HTML ได
2. เขยี น บันทกึ และเปด ใชงานเอกสาร HTML ได
3. เปรียบเทยี บความแตกตา งระหวา ง XHTML กบั HTML ได
4. อธบิ ายถงึ โครงสรา งพ้ืนฐานของภาษา XHTML ได
5. เขียน บันทกึ และเปด ใชงานเอกสาร XHTML ได

3. กจิ กรรมการเรียนรู

กจิ กรรมครู กจิ กรรมผเู รยี น

ขัน้ เตรียม( 10 นาท)ี

1. ใหผูเรียนอานหนังสือเรียน เพ่ือทําความรูจักกับ 1. ผูเรียนอานหนังสือเรียน และทํา

ความรเู บ้อื งตนกบั ภาษา HTML และ XHTML ความเขาใจในเน้ือหาจากใบความรู

2. ครูตอบขอ สงสัย ของผเู รียน และหนงั สอื

2. ผเู รยี น ซกั ถามขอ สงสยั

3. จดบันทึกคําตอบของครผู ูสอน

34

ขั้นนาํ เขาสูบทเรียน( 20 นาท)ี

ครูเขียนตัวอยางเอกสาร HTML XHTML แลวถาม 1. ผเู รียนชว ยกันวเิ คราะหตวั อยาง

ผเู รียน เพอื่ ทราบความรพู น้ื ฐานของผเู รยี น 2. ผูเรียนชวยกันแสดงความคิดเห็น

ครูถามผูเรียน เกี่ยวกับความแตกตางระหวาง XHTML และตอบคําถาม

กับ HTML 3. ผูเ รียนชว ยกันแสดงความชนื่ ชมกบั ผู

3. ครูชมเชยผูเรียนที่มีความพยายามตอบคําถามและ ท่ีมีสวนรวมในการแสดงความ

แสดงความคิดเหน็ และใหผ เู รียนในหองมีสวนรวม คดิ เหน็ และตอบคําถาม

ในการแสดงความชื่นชมกับผูที่ตอบคําถาม ท้ังผูที่

ตอบถูก และผทู ีต่ อบไมถูก

ข้นั ดาํ เนินการสอน( 180 นาท)ี 1. จดบันทกึ

1. บรรยาย อธบิ าย และยกตัวอยา งประกอบ 2. ผเู รียนปฎบิ ตั ติ าม

2. เขียนโครงสรางพื้นฐานของภาษา XHTML กับ 3. ผูเรยี นซักถามขอสงสัย

HTMLแลว เปรียบเทียบความแตกตา งใหเหน็ 4. ทําใบงานและแบบฝกหัดหลัง

3. ครูแนะนําเทคนคิ และวิธกี าร เขียน บันทึก และเปด เรียนท่ีไดรับมอบหมายใหเสร็จ

ใชงานเอกสาร HTML และ XHTML ใหผูเรียน ทนั ภายในเวลาทก่ี ําหนด

ปฎิบัตแิ ลวคอยใหค าํ แนะนํา 5. ผูเรียนและครูผูสอนรวมกัน

4. ใหผูเรียนทําใบงานโดยการตอบคําถามและเขียน สรุปสาระการเรียนรูจากส่ิงท่ี

บันทึก และเปดใชงานเอกสาร HTML และ ไดรับมอบหมายตามใบงานและ

XHTML แบบฝก หัด

5. ทําแบบฝกหัดและแฟมสะสมผลงานและใหผูเรียน 6. ผูเรียนจดบันทึกผลการสรุป

สงภายในเวลาท่ีกาํ หนด แ ล ะ เ ท ค นิ ค วิ ธี ก า ร จ ด จํ า ท่ี

6. ตรวจใบงานและแบบฝกหดั ครูผสู อนแนะนํา

7. ครแู ละผูเรยี นรว มกันเฉลยใบงานและแบบฝก หัด

35

กจิ กรรมครู กจิ กรรมผเู รยี น

ขน้ั สรปุ ( 30 นาที)

7. ครูใหผูเรียนในหองสรุปความรูที่ไดจากการ 1. จดบนั ทึก

เรยี นทกุ หวั ขอ การเรียนรู 2. ผเู รียนตอบคําถาม

8. ครูสุมถามผูเรียนในหองเรียนเพื่อตอบคําถาม 3. ผูเรียนซักถามขอสงสัย

ครูดําเนินการถามจนผูเรียนจนกวาผูเรียนจะ 4. ทาํ ใบงานและแบบฝก หัดหลงั เรียนท่ี

ถามคําถามไดอยางถูกตอง ไดรับมอบหมายใหเสร็จทันภายใน

9. ครูกับผูเรียนรวมกันสรุปบทเรียนและวิธีการ เวลาทก่ี าํ หนด

นําไปประยกุ ตใ ช 5. ผูเรียนและครูผูสอนรวมกันสรุป

ส า ร ะ ก า ร เ รี ย น รู จ า ก สิ่ ง ท่ี ไ ด รั บ

มอบหมายตามใบงานและ

แบบฝก หดั

6. ผูเรียนจดบันทึกผลการสรุป และ

เ ท ค นิ ค วิ ธี ก า ร จ ด จํ า ที่ ค รู ผู ส อ น

แนะนํา

7. ผูเรียนบอกวิธีที่นําความรูจากบทเรียน

ไปประยุกตใชใหเกิดประโยชนและ

ประสทิ ธภิ าพสูงสดุ ตอไป

4. กจิ กรรมการเรียนรู

กอนเรียน
1. ผูเรียนทําแบบฝกหัดกอนเรยี น โดยการตอบคําถามเกี่ยวกับหนวยการเรียนตามภูมิความรู

ความสามารถของผเู รียน
2. ครใู หผ เู รยี นอา นใบความรเู พ่อื เตรยี มความพรอมในการเรียนและตอบคาํ ถามครูผสู อน
ขณะเรียน
1. ผเู รียนรว มกันศึกษาเน้ือหาตามใบงานแลว ตอบคาํ ถามและแสดงความคิดเหน็
2. ทาํ ใบงานและแบบฝกหดั หลงั เรียน
3. รวมกนั เฉลยใบงานและแบบฝกหดั หลังเรยี น
4. จดบันทึก เทคนคิ แนวการท่ีเปน ประโยชนตอ ผเู รยี น จากขอ แนะนําของครูผสู อน

36

5. ผเู รียนสรุปความรทู ่ีไดจ ากการเรียนตามความเปน จริง จากภมู คิ วามรูข องผเู รียนแตล ะคน
6. ผเู รยี นซกั ถามในหัวขอท่สี งสัยในเนื้อหาการเรียนรู
5. สอ่ื การเรียนการสอน
1. หนงั สือเรยี นวชิ าการสรางเวบ็ เพจ (ดว ยภาษา HTML)
2. ใบความรูป ระจาํ หนว ย
3. ใบงานและแบบฝก หัด
4. เครอื่ งไมโครคอมพิวเตอร
5. แผน ใสและเคร่อื งฉายภาพขา มศรี ษะ
6. ซดี ีสอื่ การสอน

6. วัดผลประเมนิ ผล
1. ผูเรยี นปฏบิ ัตภิ าระงานทีม่ อบหมายเสร็จทันเวลาท่กี ําหนด
2. ตอบคําถามและสรปุ ผลงานไดอยางถกู ตอ ง
3. ทําแบบฝก หัดหลังเรยี นเสรจ็ ทันเวลาทกี่ าํ หนดและถกู ตอง
4. สนใจกระตือรือรนในการเรียนรู ตอบคําถาม สรุปสาระการเรียนรู และกลาแสดงความ

คิดเห็น

7. กจิ กรรมเสนอแนะ
ถาผูเรียนมีการเตรียมตัวในการเรียนท่ีดี เชน อาน และทําการศึกษาหนังสือเกี่ยวกับหนวยการ

เรียนมากกอน ถึงช่ัวโมงเรียน ผูเรียน จะสามารถเรียน และทํากิจกรรมตาง ๆ ท่ีครูผูสอนมอบหมาย ได
อยางมคี วามสขุ และเกิดความชอบ และสนุกกับการเรียนในชนั้ เรยี น

37

เกณฑก ารประเมนิ ผล

วดั ผลสัมฤทธจ์ิ ากแบบประเมินผลการเรยี นรู

รอยละ 80-100 หมายถงึ ผลการเรยี นดีมาก
ผลการเรียนดี
รอยละ 70-79 หมายถงึ ผลการเรยี นปานกลาง
ผลการเรียนผา นเกณฑ
รอยละ 60-69 หมายถงึ ผลการเรียนไมผ า นเกณฑ

รอยละ 50-59 หมายถงึ

ตํ่ากวา รอยละ 50 หมายถึง

แบบประเมนิ พฤติกรรมรายบุคคล หมายถึง มีพฤติกรรมดี
หมายถึง มีพฤตกิ รรมพอใช
8-10 คะแนน หมายถงึ มพี ฤตกิ รรมทีต่ อ งปรบั ปรุง
5-7 คะแนน
ต่าํ กวา 5 คะแนน

38

แบบและเกณฑประเมินพฤตกิ รรมรายบุคคล

คําชแี้ จง ใหผ ูประเมินขีดเครือ่ งหมายถกู 9ในชองพฤตกิ รรมทค่ี าดหวังใหเ กิดกับนักเรียน

เกณฑการตัดสนิ

2 คะแนน หมายถงึ มพี ฤติกรรมในระดับแบบสม่ําเสมอ
1 คะแนน หมายถึง มีพฤติกรรมในระดับผา นเกณฑ
0 คะแนน หมายถึง มีพฤติกรรมในระดบั ไมผ านเกณฑ

เกณฑการประเมนิ หมายถึง มพี ฤตกิ รรมดี
หมายถงึ มพี ฤตกิ รรมพอใช
8 - 10 คะแนน หมายถงึ มีพฤตกิ รรมทต่ี องปรบั ปรงุ
5 - 7 คะแนน
ตาํ่ กวา 5 คะแนน

เลข ช่อื – สกุล พฤตกิ รรมของนกั เรียน ความ รวม
ที่ ผรู บั การ รอบคอบ 20
ความมวี นิ ัย ความ มนุษย ขยนั หมนั่
ประเมนิ รบั ผดิ ชอบ สัมพันธ เพียร 4321
1
2 4 3 2 1 4 3 2 1 4 3 2 1 4 3 21
3
4
5
6
7
8
9

39

10
11
12
13
14
15
16
17
18
19
20
21
22

ผปู ระเมนิ ……………………………
(…………………………..)

บันทึกหลังการสอน (ปญ หาและขอเสนอแนะ)

ผลการใชแผนการสอน

ผลการเรยี นของนักเรยี น

40

ผลการสอนของครู

เฉลยแบบฝกหดั หนว ยที่ 2

จงทําเครื่องหมายวงกลม ในหวั ขอ ท่ีถูกที่สุดเพียงขอเดยี ว

1. ขอใดกลา วไมถ กู ตอ งเกย่ี วกบั ภาษา HTML ?
ก. เปนภาษาหลกั ท่ใี ชในการสรา งเวบ็ เพจ
ข. คําสงั่ จะอยใู นเครอื่ งหมาย < และ >
ค. คาํ สงั่ สวนใหญจะแบง เปน 2 สว น คือ แทก็ เปด และแท็กปด

41

ง. ในแท็กปดจะตอ งมีเครอ่ื งหมาย \

2. ขอใดกลาวถกู ตองเกย่ี วกบั การเขยี นแทก็ ภาษา HTML ?
ก. ในการเขยี นแทก็ ซอนแทก็ ใหปด แท็กที่อยใู นสดุ กอ น
ข. บางแทก็ ไมจ าํ เปน ตอ งมแี ทก็ ปดก็สามารถใชงานได
ค. การใชต วั พมิ พเ ลก็ และตวั พมิ พใหญม คี วามหมายเหมือนกนั
ง. ถูกทุกขอ

3. ขอ ใดเปนรปู แบบของแท็กในภาษา HTML ?

ก. <แท็ก,ขอความ></แทก็ > ข. <แท็ก>ขอ ความ</แทก็ >

ค. <แท็ก>ขอความ<\แท็ก> ง. <แทก็ ,ขอ ความ><\แทก็ >

4. ขอ ใดคือสวนท่ีใสเนอ้ื หาของเว็บเพจทจ่ี ะไปแสดงผลท่เี วบ็ บราวเซอร ?

ก. <html> ... </html> ข. <head> ... </head>

ค. <body> ... </body> ง. <title> ... </title>

5. แทก็ <title> ... </title> เปนแท็กท่ีใชอ ยภู ายในแทก็ ขอ ใด ?

ก. <html> ... </html> ข. <head> ... </head>

ค. <body> ... </body> ง. <h2> ... </h2>

. ขอ ใดกลา วไมถ ูกตอ งเกย่ี วกบั XHTML ?
ก. เขียนโปรแกรมงายเพราะไมส นใจความแนน อนของภาษา
ข. เรม่ิ ตนใชงานไมย ากเพราะพฒั นามาจาก HTML 4
ค. การพฒั นาแทก็ คาํ สัง่ และโมดลู ใหทาํ งานรว มกันได
ง. สามารถทาํ งานไดเขา กบั ทกุ ระบบ

7. ขอใดกลาวถึง XHTML ไดอ ยางถกู ตอ ง ?

42

ก. พฒั นา 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>

ตอนที่ 2 จงใสเครือ่ งหมาย หนาขอ ความทถี่ ูกและใสเ คร่อื งหมาย หนาขอความที่ผดิ

......... 1. HTML ยอ มาจากคาํ วา HyperText Makeup Language
เปน ภาษาหลกั ทีใ่ ชใ นการสรา งหนา เวบ็ เพจ

......... 2. องคประกอบของภาษา HTML สามารถแบงออกเปน 2 สวน คือ
สว นท่เี ปนขอ ความทั่วๆ ไป และสว นทเี่ ปน คําส่งั ท่ใี ชใ นการกําหนดรูปแบบของขอความ
ทีแ่ สดง คอื แท็ก (Tag)

43

......... 3. <title>...</title> ขอความภายในแท็กนจ้ี ะเปน ชอ่ื หวั เร่อื งเวบ็ เพจทีต่ องการ
ซงึ่ จะตองมีความยาวไมเ กิน 64 ตัวอกั ษร

......... 4. ภาษา HTML เปนภาษาท่งี ายตอการตรวจสอบขอผิดพลาด
......... 5. ขอ ดขี องภาษา XHTML คอื การใชงานไมย ุง ยาก การใชคาํ สงั่ และโมดลู รว มกันได
......... 6. XHTML พฒั นามาจาก HTML4 โดยจะมีการเพ่มิ รูปแบบ และกาํ หนดเรอื่ งแท็ก

และแอททรบิ วิ ทตางๆ
......... 7. การเขียนภาษา XHTML จะมองตัวพิมพใ หญกบั พิมพเลก็ มีความหมายเหมือนกัน
......... 8. XHTML ตวั X ยอ มาจากคําวา eXtend HTML
......... 9. ในการกาํ หนดคาแอททริบวิ ทใหก าํ หนดในเครอื่ งหมาย "..." เสมอ
......... 10. DOCTYPE เปนการประกาศชนดิ ของเอกสาร ซงึ่ จะมผี ลตอ รปู แบบ

และคุณสมบัตกิ ารทํางานของแทก็ ทเี่ ราจะใชในเอกสารหนา น้ัน

ตอนที่ 3 จงตอบคําถามตอไปนี้

1. จงบอกถงึ องคป ระกอบของภาษา HTML
องคประกอบของภาษา HTML สามารถแบง ออกเปน 2 สว น คือสว นที่เปน ขอ ความทว่ั ๆไปและ
สว นทเ่ี ปนคาํ สง่ั ที่ใชใ นการกาํ หนดรปู แบบของขอ ความทแ่ี สดง ซง่ึ เราเรยี กคาํ สัง่ น้ีวา แท็ก (Tag)
โดยแทก็ ของคําสงั่ HTML จะอยใู นเคร่ืองหมาย < และ >

2. จงเขียนโครงสรา งพืน้ ฐานของ HTML
<html>
<Head>
<title> หัวขอ เวบ็ เพจ </title>
</Head>
<body>
สว นท่ีมเี นื้อหาและขอ มูลเกย่ี วกบั ภาพ link ทป่ี รากฏในเว็บเพจ
</body>
</html>

44

3. จงบอกขอดขี องภาษา XHTML มาอยา งนอย 3 ขอ
ขอ 1 การเร่ิมตนใชงานไมยุงยากเนื่องจากคําสั่งใน XHTML จะพัฒนามาจาก XHTML4 ซ่ึง
นักเขยี นเวบ็ คุนเคยกันดีอยูแลว
ขอ 2 สามารถใชกบั บราวเซอรมีอยไู ดท นั ทีไมตองมีการอพั เดตบราวเซอรใ หยงุ ยาก
ขอ 3 การใชค าํ สง่ั และโมดูลรว มกันไดใ นภาษา XHTML จะใหเราสามารถพฒั นา Element

Attrcute และโมดูลจะทาํ งานของเราเองไดแ ละสามารถสง ตอ ใหผ ูอื่นสามารถนาํ ไปใชไ ด
ขอ 4 การพัฒนาบราวเซอรท าํ ไดง ายและสะดวกเนื่องจากเขียนเว็บดว ย XHTML จะมี

รูปแบบทแ่ี นน อนตายตวั
ขอ 5 XHTML เปนภาษาท่ีไมซับซอ นและมคี วามแนน อน จึงไมจ าํ เปนตอ งใชบ ราวเซอรแ ละ

โปรเซสเซอรในการประมวลผลท่ีสูงมากนกั

แผนจดั การเรยี นรู วชิ า การสรา งเว็บเพจดว ยภาษา(HTML) 45
หนว ยท่ี 3 เรือ่ ง การจัดวางเนอ้ื หาบนหนา เวบ็
รหัสวิชา 2201-2414 ช้นั ปวช.
สัปดาห 3 เวลา 4 ชว่ั โมง

1. สาระสําคญั
โดยสวนใหญทุกเว็บเพจมักจะมีขอความยาวๆ บางหนาก็ยาวเปนพารากราฟ ดังนั้นจึงตองใช

คําสั่งท่ีเก่ียวของกับการจัดยอหนา การตัดคํา การค่ันหนา เพ่ือใหไดลักษณะของขอความเอกสารตามท่ี
ตอ งการ

2. จดุ ประสงคก ารเรียนรู

2.1 จุดประสงคท่วั ไป (จุดประสงคนาํ ทาง)
1. มคี วามรคู วามเขาใจเกยี่ วกบั คาํ สง่ั ในการจัดยอ หนา เอกสาร
2. มีความรคู วามเขา ใจเกย่ี วกับคาํ สง่ั ในการตดั คําบนหนา เอกสาร
3. มีความรูความเขาใจเกีย่ วกับคาํ สัง่ ในการคน่ั หนาเอกสาร
4. มคี วามรูความเขาใจเกยี่ วกบั การเพมิ่ หมายเหตใุ นหนา เอกสาร

2.2 จุดประสงคเชิงพฤติกรรม (จดุ ประสงคปลายทาง)
1. จัดยอ หนา ใหกับหนา เอกสารได
2. ตดั คาํ ในรปู แบบตา งๆบนหนา เอกสารเว็บเพจได
3. สรางเสนคน่ั หนา เอกสารเวบ็ เพจในรูปแบบตา งๆได
4. เพมิ่ หมายเหตุในหนา เอกสารเวบ็ เพจได

3. กิจกรรมการเรียนรู

กจิ กรรมครู กจิ กรรมผเู รยี น

ขน้ั เตรียม( 10 นาที)

1. ใหผูเรียนอานหนังสือเรียน เพื่อทําความเขาใจ 1. ผูเรียนอานหนังสือเรียน และทําความ

เกีย่ วกับคาํ สงั่ การจดั วางเนื้อหาบนหนาเวบ็ ประมาณ เขาใจเก่ียวกับคําสั่ง การจัดวางเน้ือหาบน

10 นาที หนา เว็บ

2. ครูตอบขอสงสยั ของผูเ รียน 2.ผเู รียน ซักถามขอสงสยั

3.จดบันทกึ คาํ ตอบของครูผสู อน

46

ขนั้ นําเขา สบู ทเรียน( 20 นาที)

1. ครูเขียนตัวอยาง แท็กตางๆที่ใชในการ การจัดวาง 1.ผเู รยี นชว ยกนั วเิ คราะหตัวอยาง

เนื้อหาบนหนาเว็บแลวซักถามเพื่อทราบความรู 2.ผูเรียนชวยกันแสดงความคิดเห็น และ

พื้นฐานของผูเรยี น ตอบคาํ ถาม

2. ครูชมเชยผูเรียนท่ีมีความพยายามตอบคําถามและ 3.ผูเรียนชวยกันแสดงความชื่นชมกับผูท่ี

แสดงความคิดเหน็ และใหผูเ รยี นในหอ งมีสวนรวม มีสว นรวมในการแสดงความคิดเห็นและ

ในการแสดงความช่ืนชมกับผูที่ตอบคําถาม ทั้งผูที่ ตอบคําถาม

ตอบถกู และผทู ีต่ อบไมถ กู

ข้นั ดําเนนิ การสอน( 180 นาที)

1 . บรรยาย อธิบาย และยกตวั อยา งประกอบ 1. จดบันทึก

2. ครูแนะนําเทคนิค และวิธีจัดยอหนาใหกับหนา 2. ผูเรยี นปฎบิ ัติตาม

เอกสาร ตัดคําในรูปแบบตางๆบนหนาเอกสารเว็บเพจ 3. ผูเรียนซกั ถามขอสงสยั

สรางเสนคั่นหนาเอกสารเว็บเพจในรูปแบบตางๆ เพ่ิม 4. ทําใบงานและแบบฝกหัดหลังเรียนท่ี

หมายเหตใุ นหนาเอกสารเวบ็ เพจ ใหผ ูเรียนปฎิบัติแลว ไดรับมอบหมายใหเสร็จทันภายใน

คอยใหคาํ แนะนํา เวลาทกี่ าํ หนด

3. ใหผูเรียนทําใบงานโดยการตอบคําถามและปฎิบัติ 5. ผเู รียนและครผู สู อนรว มกนั สรุปสาระ

การ จัดยอหนาใหกับหนาเอกสาร ตัดคําในรูปแบบ การเรียนรูจากสิ่งที่ไดรับมอบหมาย

ตางๆบนหนาเอกสารเว็บเพจ สรางเสนคั่นหนาเอกสาร ตามใบงานและแบบฝกหัด

เว็บเพจในรูปแบบตางๆ เพ่ิมหมายเหตุในหนาเอกสาร 6. ผูเรียนจดบันทึกผลการสรุป และ

เว็บเพจ เทคนิควธิ กี ารจดจําทค่ี รูผสู อนแนะนํา

1. ทําแบบฝกหัดหลังเรียนและใหผูเรียนสงภายในเวลา

ท่กี ําหนด

2. ตรวจใบงานและแบบฝกหัด

3. ครูและผเู รียนรวมกนั เฉลยใบงานและแบบฝก หัด

47

กจิ กรรมครู กจิ กรรมผเู รยี น

ขนั้ สรปุ ( 30 นาท)ี

4. ครูใหผูเรียนในหองสรุปความรูที่ไดจากการ 7. ผูเรียนบอกวิธีท่ีนําความรูจากบทเรียนไป

เรยี นทุกหวั ขอการเรียนรู ป ร ะ ยุ ก ต ใ ช ใ ห เ กิ ด ป ร ะ โ ย ช น แ ล ะ

5. ครูสุมถามผเู รียนในหอ งเรียนเพ่ือตอบคําถาม ประสิทธภิ าพสูงสุดตอ ไป

ครดู าํ เนินการถามจนผเู รียนจนกวาผูเรียนจะ

ถามคาํ ถามไดอ ยางถกู ตอง

6. ครูกับผูเรียนรวมกันสรุปบทเรียนและ

วิธีการนําไปประยกุ ตใ ช

4. กจิ กรรมการเรียนรู

กอนเรยี น
1. ผูเรียนทําแบบฝกหัดกอนเรียน โดยการตอบคําถามเก่ียวกับหนวยการเรียนตามภูมิความรู

ความสามารถของผูเรียน
2. ครใู หผ ูเรียนอานใบความรูเพื่อเตรียมความพรอ มในการเรยี นและตอบคําถามครผู ูสอน

ขณะเรยี น
1. ผูเรียนรว มกนั ศกึ ษาเนื้อหาตามใบงานแลวตอบคาํ ถามและแสดงความคิดเห็น
2. ทาํ ใบงานและแบบฝก หัดหลงั เรียน
3. รวมกนั เฉลยใบงานและแบบฝก หัดหลังเรยี น
4. จดบันทกึ เทคนิค แนวการทีเ่ ปน ประโยชนต อ ผเู รยี น จากขอ แนะนาํ ของครูผูสอน
5. ผเู รียนสรปุ ความรูทไี่ ดจ ากการเรยี นตามความเปนจรงิ จากภมู คิ วามรูของผเู รยี นแตละคน
6. ผูเ รยี นซักถามในหัวขอ ทส่ี งสยั ในเนอื้ หาการเรียนรู

5. สอื่ การเรยี นการสอน
1. หนงั สือเรียนวชิ าการสรางเวบ็ เพจ (ดว ยภาษา HTML)
2. ใบความรูป ระจําหนวย
3. ใบงานและแบบฝกหัด
4. เคร่ืองไมโครคอมพิวเตอร
5. แผนใสและเครอ่ื งฉายภาพขา มศรี ษะ

48

6. ซีดสี อื่ การสอน

6. วดั ผลประเมนิ ผล
1. ผเู รียนปฏบิ ัติภาระงานท่มี อบหมายเสร็จทันเวลาที่กาํ หนด
2. ตอบคําถามและสรุปผลงานไดอ ยางถูกตอ ง
3. ทาํ แบบฝกหดั หลงั เรียนเสร็จทนั เวลาทกี่ ําหนดและถูกตอ ง
4. สนใจกระตือรือรนในการเรียนรู ตอบคําถาม สรุปสาระการเรียนรู และกลาแสดงความ

คิดเหน็
7. กจิ กรรมเสนอแนะ

ถาผูเรียนมีการเตรียมตัวในการเรียนที่ดี เชน อาน และทําการศึกษาหนังสือเกี่ยวกับหนวยการ
เรียนมากกอน ถึงชั่วโมงเรียน ผูเรียน จะสามารถเรียน และทํากิจกรรมตาง ๆ ที่ครูผูสอนมอบหมาย ได
อยางมคี วามสุข และเกดิ ความชอบ และสนกุ กับการเรยี นในชัน้ เรียน

เกณฑก ารประเมินผล

วดั ผลสัมฤทธ์จิ ากแบบประเมนิ ผลการเรียนรู

รอ ยละ 80-100 หมายถึง ผลการเรยี นดีมาก
ผลการเรียนดี
รอ ยละ 70-79 หมายถงึ ผลการเรยี นปานกลาง
ผลการเรยี นผา นเกณฑ
รอยละ 60-69 หมายถึง ผลการเรยี นไมผ านเกณฑ

รอ ยละ 50-59 หมายถึง

ตา่ํ กวา รอ ยละ 50 หมายถงึ

แบบประเมนิ พฤติกรรมรายบุคคล หมายถึง มพี ฤตกิ รรมดี
หมายถงึ มีพฤตกิ รรมพอใช
8-10 คะแนน หมายถงึ มีพฤตกิ รรมทต่ี อ งปรบั ปรงุ
5-7 คะแนน
ต่ํากวา 5 คะแนน

49

แบบและเกณฑประเมินพฤตกิ รรมรายบุคคล

คําชแี้ จง ใหผ ูประเมินขีดเครือ่ งหมายถกู 9ในชองพฤตกิ รรมทค่ี าดหวังใหเ กิดกับนักเรียน

เกณฑการตัดสนิ

2 คะแนน หมายถงึ มพี ฤติกรรมในระดับแบบสม่ําเสมอ
1 คะแนน หมายถึง มีพฤติกรรมในระดับผา นเกณฑ
0 คะแนน หมายถึง มีพฤติกรรมในระดบั ไมผ านเกณฑ

เกณฑการประเมนิ หมายถึง มพี ฤตกิ รรมดี
หมายถงึ มพี ฤตกิ รรมพอใช
8 - 10 คะแนน หมายถงึ มีพฤตกิ รรมทต่ี องปรบั ปรงุ
5 - 7 คะแนน
ตาํ่ กวา 5 คะแนน

เลข ช่อื – สกุล พฤตกิ รรมของนกั เรียน ความ รวม
ที่ ผรู บั การ รอบคอบ 20
ความมวี นิ ัย ความ มนุษย ขยนั หมนั่
ประเมนิ รบั ผดิ ชอบ สัมพันธ เพียร 4321
1
2 4 3 2 1 4 3 2 1 4 3 2 1 4 3 21
3
4
5
6
7
8
9

50

10
11
12
13
14
15
16
17
18
19
20
21
22

ผปู ระเมนิ ……………………………
(…………………………..)

บันทึกหลังการสอน (ปญ หาและขอเสนอแนะ)

ผลการใชแผนการสอน

ผลการเรยี นของนักเรยี น


Click to View FlipBook Version