HTML

101

......... 9. ในการแบงสว นตาราง <thead>, <tfoot>, <tbody>
ตอ งใสเรยี งกนั ตามลาํ ดับกอ นหลงั ของตาราง

......... 10. backcolor เปน แทก็ ท่ใี ชใ นการกาํ หนดสลี งในชอ งตาราง

ตอนที่ 3 จงตอบคําถามตอ ไปนี้
1. จงเขียนตาราง 3 แถว 3 คอลัมน ทีม่ ีความกวา ง 90% จากหนาตางบราวเซอร
<table width="90%">
<tr><td>data1</td><td>data2</td><td>data3</td></tr>
<tr><td>data4</td><td>data5</td><td>data6</td></tr>
<tr><td>data7</td><td>data8</td><td>data9</td></tr>
</table>

2. จงเขยี นHTMLทีไ่ ดผ ลลพั ธต รงกับรูป
<table border="10" cellspacing="15">
<tr><td>data1</td><td>data2</td><td>data3</td></tr>
<tr><td>data4</td><td>data5</td><td>data6</td></tr>
</table>
3. กฏของแอททริบิวท rules มีอะไรบาง จงอธิบาย
All แสดงเสน แบง ของเซลลทุกเสน
Cols แสดงเสนแบงของเซลลเ ฉพาะเสน แนวคอลมั น(แนวต้งั )
Groups แสดงเฉพาะเสนแบงกลมุ ทเ่ี กิดจากแทก็ thead,tbody,tfoot หรือ colgroup
None ไมแสดงเสน แบงของเซลล
Rows แสดงเสนแบงของเซลลเ ฉพาะเสนแนวแถว(แนวนอน)

102

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

หนวยที่ 8 เรอ่ื ง แตงเติมเว็บเพจดวยกราฟก สปั ดาหที่ 12-13 เวลา 8 ชัว่ โมง

1. สาระสาํ คัญ
กราฟกท่ีใชสําหรับการสรางเว็บเพจน้ัน โดยสวนใหญจะเปนชนิด GIF และ JPEG ซึ่งมีขอดี

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

2.1 จดุ ประสงคทั่วไป (จุดประสงคนาํ ทาง)
1. มคี วามรูค วามเขาใจเกี่ยวกบั ภาพกราฟก ทนี่ าํ มาประกอบการสรา งเวบ็ เพจได
2. มคี วามรูความเขาใจเกย่ี วกับแท็กตางๆ ทจ่ี ดั การกับรปู ภาพได
3. มคี วามรคู วามเขา ใจเกย่ี วกบั แท็กทใ่ี ชแ สดงภาพเคลือ่ นไหว

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

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

103

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

ขั้นเตรียมกจิ กรรม(สปั ดาหล ะ10 นาที)

1. ครูชแี้ จงจดุ ประสงคและเปา หมายในการเรียน 1.ผูเรียนตัง้ ใจสนใจฟง และจดบันทกึ

หนว ยที่ 8 2 ซักถามเม่ือเกดิ ความสงสยั

3. ใหผเู รียนอา นเอกสารใบความรปู ระจาํ หนว ย

ข้ันนาํ เขา สูบทเรียน(สปั ดาหล ะ20 นาท)ี

1.ทดสอบกอนเรียน โดยการถามถึง ภาพกราฟก 1. ผูเรยี นปรึกษาหารอื เพื่อหาคาํ ตอบ

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

ที่ จั ด ก า ร กั บ รู ป ภ า พ แ ท็ ก ที่ ใ ช แ ส ด ง คาํ ถามตามภูมิรขู องตนเอง

ภาพเคล่ือนไหว 3.ผูเรียนชวยกันประเมินคําตอบของเพื่อน และ

2. สุม ผูเรยี นตอบคําถามจากขอ 1. ชวยกันสืบคนเพื่อหาคําตอบท่ีคิดวาถูกตองที่สุด

เสนอครผู ูสอน

ขนั้ ดาํ เนนิ การสอน(สัปดาหละ 180 นาท)ี
1. ครอู ธบิ ายจากคาํ ถามท่ีนําเสนอในข้ันนําเขาสู 1. ต้งั ใจฟง จดบนั ทึก

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

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

วิธีการปฎิบตั ทิ ีละขน้ั แตล ะหวั ขอ การเรยี นให 4. ทําใบงานสง

ผูเ รียนปฎิบตั ิแลว คอยใหคาํ แนะนาํ 5. แกไ ขใบงานใหถูกตอง

4. ครูบอกเทคนิค และแนวคดิ ท่ีงาย ๆ 6. ผเู รียนรวมกบั ครูผูส อนเฉลยใบงาน

5. ใหผเู รยี นทาํ ใบงาน และกาํ หนดเวลาสง ทุก 7. จดเทคนคิ และหลักการทค่ี รผู สู อนแนะนาํ

คร้งั ทเี่ รียนจบแตละหัวขอ การเรยี น 8. ทาํ แบบฝก หดั สง

6. ครูตรวจใบงานและใหคะแนนสําหรับผูท่ีทํา 10. ผเู รยี นกบั ครูรว มกนั เฉลยแบบฝกหัด

ถูกตองและเสร็จทันเวลาที่กําหนด และผูท่ีทํา 11. ผูเรียนบอกวิธีท่ีนําความรูจากบทเรียนไป

ใบงานผิดตองนํากลับไปแกไขใหมจนกวาจะ ประยุกตใชใหเกิดประโยชนและประสิทธิภาพ

ใบงานจะถูกตอ งทุกขอ สูงสดุ ตอ ไป

7. ครเู ปด โอกาสใหผ ูเ รยี นซกั ถามขอ สงสัย

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

104

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

ขน้ั สรุป(สปั ดาหล ะ30 นาที) 1. ผูเรียนบอกวิธีท่ีนําความรูจากบทเรียนไป

1. ครูและผูเรียนรวมกันสรุปสาระการเรียนรู ประยุกตใชใหเกิดประโยชนและประสิทธิภาพ

บทเรียนและวธิ กี ารนาํ ไปประยกุ ตใช สงู สุดตอไป

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

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

105

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

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

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

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

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

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

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

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

106

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

คําชีแ้ จง ใหผ ปู ระเมินขดี เครื่องหมายถกู 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

107

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

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

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

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

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

108

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

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

1. ขอใดคอื ไฟลภ าพทน่ี ยิ มนํามาใชบนเวบ็ เพจมากทีส่ ุด ?

ก. GIF และ TIFF ข. GIF และ JPEG

ค. PSD และ JPEG ง. PSD และ TIFF

2. หากตองการแสดงภาพวิวที่เปน ภาพถายบนเวบ็ เพจควรแสดงเปนไฟลต ามขอ ใด ?

ก. GIF ข. TIFF

109

ค. JPEG ง. PSD

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

4. แทก็ <br clear="left" /> หมายความวา อยา งไร ?
ก. ขึน้ บรรทดั ใหมในบริเวณทดี่ า นซายไมม วี ตั ถใุ ดวางอยู
ข. ขึ้นบรรทดั ใหมโ ดยวางขอ ความไวด า นซา ย
ค. ขนึ้ บรรทัดใหมโ ดยวางขอ ความเสมอขอบดา นซายของรปู และไมท ับรปู
ง. ถูกท้ังขอ ก. และ ค.

5. ขอใดไมใ ชค าทีส่ ามารถกําหนดในแอททรบิ ิวท align ได ?
ก. top ข. down
ค.left ง. right

6. ขอใดเปน แอททรบิ ิวทท ใ่ี ชในการใสขอความกาํ กบั ภาพ ?
ก. alt ข. shift
ค. ctrl ง. txt

7. ขอใดเปนความหมายของการใชแ ท็กทม่ี รี ปู แบบดังน้ี
<img hspace="10" src="ช่อื ไฟลภ าพ"> ?
ก. ระยะหา งทขี่ อบบนและลางของภาพมคี า เทากับ 10 พกิ เซล

ข. ระยะหา งทข่ี อบซา ยและขวาของภาพมีคาเทา กับ 10 พกิ เซล
ค. ระยะหา งท่ีขอบทุกดา นของภาพมีคาเทา กบั 10 พิกเซล
ง. ภาพมขี อบหนาเทากบั 10

110

8. ขอ ใดหมายถึงการใสแอททรบิ ิวท bgproperties="fixed" ภายในแท็ก <body> ?
ก. รูปทีเ่ ราใชเ ปนพื้นหลังจะอยกู ับทแี่ มจ ะเลอื่ น Scrollbar
ข. ภาพพ้นื หลงั จะเปน ภาพเดมิ ตลอดแมเ ราจะเปลย่ี นเวบ็ เพจไปหนา อืน่
ค. การใสภาพพนื้ หลงั ท่มี ชี อ่ื วา "fixed" ใหกับหนาเว็บเพจ
ง. ไมมีขอ ถกู

9. การโหลดภาพโดยบราวเซอรข ้นึ มาอยา งรวดเรว็ แบบไมช ดั กอ น และคอ ยๆ ชัดข้นึ ตามลาํ ดับเปน

การใชเทคนิคในขอใดกบั ภาพ ?

ก. Interlaced ข. loading

ค. Transparency ง. Slicing

10. ขอ ใดไมถ กู ตอ งเก่ยี วกบั ภาพเคลื่อนไหวบนเวบ็ เพจ ?
ก. จะใชแ ทก็ ในการแสดงเหมอื นกับภาพปกติ
ข. ใชไดเฉพาะไฟลภ าพ FWS เทานน้ั
ค. นําภาพนงิ่ หลายภาพมาประกอบกนั เปน ภาพเคล่ือนไหวเพอ่ื แสดงบนเวบ็ ได
ง. โปรแกรม GIF Construction Set สามารถสรางภาพเคลอื่ นไหวเพื่อแสดงบนเวบ็ ได

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

......... 1. การใชไฟลภ าพใหญเกนิ ไปจะทาํ ใหการแสดงผลในเวบ็ เพจชา
......... 2. กราฟก ชนดิ GIF ใชก ารบบี อดั ขอมูลเพื่อลดพน้ื ท่กี ารจดั เกบ็ ขอ มลู
......... 3. เราสามารถกําหนดระดับการบีบอัดของภาพชนิด JPEG เปน High, Medium หรือ

Low ไดโ ดยใชโ ปรแกรมตกแตง ภาพเชน Photoshop
......... 4. การแทรกขอความกาํ กบั ภาพทําไดโ ดยใชแ อททรบิ ิวท Ctrl
......... 5. <img src="ชื่อภาพ" border="ความหนาของกรอบ" />เปนรูปแบบใน XHTML
......... 6. การใช Interlacing จะชว ยใหภ าพถูกโหลดโดยบราวเซอรข ้นึ มาอยา งรวดเรว็

แบบไมชดั กอน และคอยๆ ชดั ขึน้ ตามลําดบั

111

......... 7. การทาํ Transparency คือการกําหนดสีใดสหี นึง่ ในรูปชนดิ JPEG
ใหเปนสีท่ไี มถ กู นาํ มาแสดงบนบราวเซอร

......... 8. การโหลดภาพประเภท Slicing ก็คอื ภาพจะถกู โหลดเขา มาแปะบนเว็บเพจทลี ะชนิ้
จนครบทง้ั รปู ภาพคลา ยจก๊ิ ซอว

......... 9. ขอจาํ กดั ของ GIF ทส่ี ําคญั ก็คอื สามารถใชสีไดส งู สุดเพียงครงั้ ละ 512 สีเทาน้ัน
......... 10. GIF และ JPEG เปน กราฟกท่ีเหมาะสมในการสรา งเว็บเพจ
ตอนท่ี 3 จงตอบคําถามตอ ไปน้ี

1. จงเขียน HTML ทต่ี รงกับผลลพั ธด งั รูป

ขอความกํากบั ภาพ

จะปรากฏเม่อื ไมส ามารถแสดงรปู ได

<body>
<b>ตวั อยา งการแสดงภาพบนในเวบ็ เพจ</b><br/>
<img src=boat.jpg alt=ภาพเรอื ใบ />ภาพชนดิ jpeg<br/>
<img src=boat.gif alt=ภาพเรอื ประมง />ภาพชนดิ gif<br/>

112

</body>
2. แอททรบิ วิ ท align มีรูปแบบการจัดตําแหนง แบบใดบางจงอธบิ าย
bottom ใหขอบลา งภาพเสมอขอบลางขอ ความ
left จดั ภาพอยูทางซา ย
middle ใหกงึ่ กลางภาพเสมอก่งึ กลางขอ ความ
right จัดภาพอยทู างขวา
top ใหข อบบนภาพเสมอขอบบนขอ ความ

3. จงอธิบายคาํ ศพั ทตอไปนี้

vspace
กําหนดระยะหา งระหวา งรปู กบั ขอความแนวตั้ง(vertical space)ดานบนและลาง

hspace
กําหนดระยะหา งระหวางรปู กับขอ ความแนวนอน(horizontal space)ดานซายและขวา

clear
ท้งิ ระยะขอ ความใหพ นขอบเขตรปู

Transparency
การกาํ หนดสีใดสีหนึง่ ในรปู ชนิด GIF ใหเ ปน สีที่ไมถ กู นาํ มาแสดงบนบราวเซอร

GIF Animation
ภาพ GIF ทแี่ สดงตอเนื่องหลายๆภาพจนเกดิ เปน ภาพเคลอ่ื นไหว

113

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

หนว ยท่ี 9 เรอ่ื ง แบงหนาจอโดยใชเ ฟรม สปั ดาหท ี่ 14-15 เวลา 8 ช่ัวโมง

1. สาระสาํ คัญ

เฟรมเปนการแบงหนาจอของบราวเซอรออกเปนสวนยอย ทําใหเราสามารถใชพ้ืนท่ีบนหนาจอ

ทั้งหมด บนจอไดอยางมีประสิทธิภาพ โดยแตละสวนยอยจะเปนอิสระแกกัน เมื่อเราเลื่อนขอมูลข้ึนลงท่ี

สวนใด จะไมสงผลตอสวนอื่นๆ ในภาษา HTML มีแท็กสําหรับสรางเฟรมในแนวตางๆ รวมถึงแท็กใน

การปรับแตงเฟรมดวย

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

2.1 จุดประสงคท ั่วไป (จดุ ประสงคนาํ ทาง)

1. มีความรูความเขา ใจเก่ียวกบั การวิธกี ารสรา งเฟรม

2. มคี วามรูความเขา ใจเก่ยี วกบั แท็กตางๆที่ใชใ นการสรา งเฟรม

3. มีความรูความเขาใจเกี่ยวกับการแทรกเฟรมในเว็บเพจ

2.2 จุดประสงคเ ชิงพฤตกิ รรม (จดุ ประสงคป ลายทาง)

1. สรา งเฟรมโดยใชคาํ สัง่ frameset ได

2. กาํ หนดลักษณะของกรอบในเฟรมได

3. กาํ หนดชอ งวา งระหวา งขอ มลู กบั เฟรมได

4. ปรับขนาดเฟรมตามตอ งการได

5. ใชแถบเลอื่ นในเฟรมได

6. สรา งเฟรมซอนกนั ได

7. ใชลงิ ค (Link) ใหส ัมพนั ธกนั ในเฟรมได

8. แทรกเฟรมภายในเว็บเพจได

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

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

ข้นั เตรียม(สัปดาหละ10 นาท)ี

1. ใหผ เู รยี นศึกษาบทเรยี น ประมาณ 5 นาที 1. ผูเรียนอานหนังสือเรียน และทําความ

2. ครตู อบขอสงสยั ของผูเรยี น เขาใจในระบบเลขฐาน ตา ง ๆ

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

114

ขน้ั นาํ เขา สูบทเรยี น(สัปดาหล ะ20 นาที)

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

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

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

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

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

คําถาม ทัง้ ผทู ต่ี อบถกู และผทู ี่ตอบไมถูก

115

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

ข้ันดําเนินการสอน(สัปดาหละ 180 นาท)ี

1.บรรยาย และแสดงวิธีการพรอมภัยตัวอยาง 1. ตั้งใจฟง จดบนั ทึก

ประกอบ 2. ผเู รียนปฎบิ ัตติ ามทีละขนั้

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

ปฏิบัติทลี ะขั้นแตล ะหัวขอการเรียนใหผูเรียน 4. ทําใบงานสง

ปฏบิ ัติแลว คอยใหค ําแนะนํา 5. แกไ ขใบงานใหถ กู ตอง

4. ครูบอกเทคนคิ และแนวท่งี า ย ๆ 6. ผเู รียนรว มกบั ครผู ูส อนเฉลยใบงาน

5. ใหผ ูเรียนทาํ ใบงาน และกาํ หนดเวลาสง ทุก 7. จดเทคนคิ และหลักการทีค่ รูผสู อนแนะนาํ

ครัง้ ทีเ่ รียนจบแตละหัวขอการเรยี น 8. ทาํ แบบฝก หดั สง

6. ครูตรวจใบงานและใหคะแนนสําหรับผูท่ีทํา 10. ผเู รียนกบั ครรู ว มกนั เฉลยแบบฝกหดั

ถูกตองและเสร็จทันเวลาท่ีกําหนด และผูท่ีทํา

ใบงานผิดตองนํากลับไปแกไขใหมจนกวาจะ

ใบงานจะถูกตองทกุ ขอ

7. ครเู ปดโอกาสใหผเู รียนซกั ถามขอ สงสัย

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

ข้ันสรปุ (สปั ดาหละ30 นาท)ี

8. ครูใหผูเรียนในหองสรุปสาระการเรียนรู

ประจําหนว ยการเรียน

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

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

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

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

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

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

116

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

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

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

คดิ เหน็
5. มคี วามพยายามปรบั ปรงุ แกไขใบงานและแบบฝกหัดใหถูกตองแลวนาํ สงครูผสู อน

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

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

2. ผเู รยี นตอ งมีความขยัน หมน่ั ฝกฝนบทเรียนอยูเสมอทงั้ กอนและหลังเรียน
4. ผเู รียนตอ งมีความพยายามและมีทัศนคติท่ีดใี นเน้ือหาบทเรยี น
3. ผเู รยี นตอ งมีความกลา ทจี่ ะถามเมือ่ สงสัยท้ังในหองและนอกหองเรยี นกบั ครูผสู อน

117

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

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

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

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

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

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

118

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

คําชีแ้ จง ใหผ ปู ระเมินขดี เครื่องหมายถกู 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

119

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

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

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

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

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

120

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

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

1. ขอใดคือความหมายของเครอื่ งหมาย * ทใี่ สเ พือ่ แบง ขนาดของแถวและคอลมั นข องเฟรม ?

ก. พ้นื ทท่ี ่เี หลอื จากสว นอน่ื ข. ครงึ่ หนึ่งของพนื้ ที่ทง้ั หมด

ค. เต็มพืน้ ที่ทง้ั หมด ง. ไมมขี อ ใดถกู

2. ขอ ใดถกู ตองในการแบง เฟรมออกเปนจาํ นวน 4 แถว ?

121

ก. <frameset cols="*,*,*,*">
ข. <frameset rows="4">
ค. <frameset cols="25%,30%,30%,35%">
ง. <frameset rows="25%,40%,20%,*">

3. ขอใดกลาวไดถ กู ตองเกีย่ วกบั การใชคาํ สงั่ frameset ?
ก. ในการแบงเฟรมนนั้ ผลรวมทงั้ หมดจะตองเทา กับ 100%
ข. เฟรมแตล ะเฟรมจะแสดงหนาเวบ็ เพจเดียวกันเสมอ
ค. เมื่อเราใชแ ถบเลอื่ นขอ มลู ขอมลู เฟรมที่อยตู ดิ กันจะเลอื่ นไปพรอ มกนั
ง. แท็ก <frameset> จะใชต อทา ยแท็ก <body>

4. ขอ ใดคอื แทก็ ท่ีใชแสดงขอ ความใหผใู ชทราบเมื่อบราวเซอรรนุ เกาไมส ามารถแสดงเฟรมได ?

ก. <noframe> ข. <notframe>

ค. <notframes> ง. <noframes>

5. ขอใดเปน แอททริบวิ ทใ นการกาํ หนดชองวางระหวางเวบ็ เพจกบั เฟรมทัง้ 4 ดา น ?

ก. cellpadding ข. width และ height

ค. colspan และ rowspan ง. marginwidth และ marginheight

. ขอใดเปน การกาํ หนดใหเ ฟรมมขี นาดท่ีแนน อนและไมส ามารถทําการปรบั ขนาดได ?

ก. ใชแอททรบิ ิวท notresize แทรกในแทก็ <frame...>

ข. ใชแ อททรบิ วิ ท notresize แทรกในแทก็ <frameset...>

ค. ใชแ อททริบวิ ท noresize แทรกในแทก็ <frame...>

ง. ใชแอททริบิวท noresize แทรกในแทก็ <frameset...>

7. ขอใดเปน การกาํ หนดใหเฟรมไมแ สดงแถบเลอ่ื น ?
ก. ใชแ อททรบิ วิ ท scrolling="no" แทรกในแท็ก <frame...>
ข. ใชแ อททริบิวท scroll="no" แทรกในแท็ก <frame...>
ค. ใชแ อททรบิ วิ ท noscrolling="noscrolling" แทรกในแทก็ <frameset...>

122

ง. ใชแอททริบวิ ท noscrolling="noscrolling" แทรกในแทก็ <frame...>

8. ขอใดกลาวไมถ ูกตอ งในการใชแ อททริบิวท target เพอ่ื การแสดงผล ?
ก. แทรกในแทก็ <frame...>
ข. ใชใ นการกําหนดเฟรมปลายทางทตี่ องการใหห นา เวบ็ ท่ีลงิ คไปแสดง
ค. รปู แบบคอื target="ช่ือเฟรมปลายทาง"
ง. ไมมขี อ ถกู

9. ขอ ใดเปน การใชแ อททริบิวท target กําหนดใหล งิ คเปด หนา เว็บในเฟรมปจ จุบัน ?

ก. target="_top" ข. target="_self"

ค. target="_me" ง. target="_now"

10. ขอใดกลา วไมถ กู ตอ งเกีย่ วกบั การแทรกเฟรมภายในเวบ็ เพจ ?
ก. ใชแ ท็ก <iframe> แทนทแ่ี ทก็ <body>
ข. เราสามารถจดั ตําแหนงเฟรมในหนาเวบ็ เพจไดโ ดยใชแ อททริบวิ ท align
ค. รูปแบบแทก็ คอื <iframe src="ชอ่ื ไฟล HTML">...</iframe>
ง. แทรกแอททรบิ ิวท width และ height ในแทก็ <iframe>
เพ่ือกาํ หนดความกวางและสงู ของเฟรม

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

......... 1. การใชเ ฟรมเปน การแบง หนาจอของบราวเซอรออกเปน สว นยอย
ทาํ ใหเราสามารถใชพนื้ ทที่ ง้ั หมดบนหนาจอไดอ ยา งมีประสิทธภิ าพ

......... 2. ช่อื แอททรบิ วิ ท columns และ rows เปน การแบง พ้ืนทต่ี ามแนวต้งั และแนวนอน
......... 3. frameborder เปน ตัวเลอื กหนึ่งในการกําหนดลกั ษณะของกรอบเฟรม

123

......... 4. border, bordercolor, frameborder, framespacing
เปนแอททรบิ วิ ทท ่กี าํ หนดโดยInternet Explorer

......... 5. แอททรบิ ิวท marginwidth และ marginheight ไมสนับสนุน Netscape
......... 6. leftmargin เปน แอททริบวิ ททก่ี าํ หนดชอ งวา งทางดานซา ย

สนบั สนนุ เฉพาะ Internet Explorer
......... 7. scrolling มีคา ท่กี ําหนดได 2 คา คอื no และ yes
......... 8. การปรบั ขนาดเฟรมสามารถปรับขนาดได โดยการคลกิ เมาสท ก่ี รอบของเฟรม

จะปรากฏเคอรเ ซอรเ ปน สญั ลกั ษณล ูกศร 2 หวั เพ่อื ใชเ ลอื่ นปรับขนาด
......... 9. noresize คือ แอททรบิ ิวทที่ปองกนั ไมใหปรบั ขนาดเฟรม
......... 10. target="_blank" เปน การเปดไฟลลิงคน น้ั ในพนื้ ทเี่ ฟรมของตนเอง

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

1. จงเขียน HTML เพ่ือสรางเฟรมตามรปู

<frameset rows="30%,40%,*">

<frame /><frame /><frame />

</frameset>

2. จงอธิบายคาํ ศพั ทตอ ไปนี้

border กําหนดความหนาใหกรอบของเฟรม

bordercolor กําหนดสใี หกรอบของเฟรม

frameborder เปด ปด การแสดงเสน กรอบ

framespacing กําหนดความหางระหวางเฟรม

124

3. ถา เราตอ งการใชเ ฟรมกบั บราวเซอรท ดี่ เู ฟรมได และดูเฟรมไมได
เราตองเขยี น HTML อยา งไร

<frameset cols="30%,*">
<frame src="menu.html" name="menu" />
<frame src="web1.html" name="main" />
<noframes> Sorry, this browser does not support frames. </noframes>
</frameset>

4. จงอธบิ ายคาท่ีสามารถกาํ หนดใหแ อททรบิ วิ ท target ได
target=" เปด ไฟลลงิ คใ นเฟรมนัน้
target="_blank" เปดไฟลล งิ คน น้ั ในหนา ตา งใหม
target="_parent" เปด ไฟลล งิ คนั้นเตม็ พนื้ ทีก่ รอบของเฟรมพอ
target="_self" เปดไฟลลงิ คน นั้ ในพน้ื ทเ่ี ฟรมของตนเอง
target="_top" เปดไฟลลงิ คน นั้ เตม็ พื้นทกี่ รอบบราวเซอร

125

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

หนว ยท่ี 10 เร่อื ง การสรา งแบบฟอรม สัปดาหท ่ี 16-17 เวลา 8 ช่ัวโมง

1. สาระสาํ คัญ
ปจจุบัน เราใชฟอรมเพื่อประโยชน หลายดาน เชน รายละเอียดของผูท่ีมาเยี่ยมชมเว็บ หรือ

รวบรวมความสนใจตางๆ โดยอันดับแรกตองทําความเขาใจกับการทํางานรวมกันของฟอรม และ CGI
กอน ในภาษา HTML มีแท็กท่ีชวยในการสรางฟอรมและรูปแบบการเลือกและการกรอกขอมูลที่ใชกัน
บอยๆ

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

2.1 จดุ ประสงคทว่ั ไป (จดุ ประสงคนําทาง)
1. มีความรูค วามเขา ใจเก่ยี วกบั การทาํ งานของฟอรม และ CGI
2. มีความรูความเขาใจเกย่ี วกับแทก็ ตา งๆทีใ่ ชสรางฟอรม
3. มคี วามรคู วามเขาใจเกยี่ วกับการสง (Submit)และลา ง (Clear)คาขอมูลในฟอรม

2.2 จุดประสงคเ ชิงพฤตกิ รรม (จดุ ประสงคปลายทาง)
1. อธิบายถึงรปู แบบการทาํ งานของฟอรมและ CGI
2. ใชแ ทก็ ตา งๆสรา งฟอรม ได
3. ทําการสง (Submit)และลาง (Clear)คาขอมลู ในฟอรม
4. สรางปุมโดยการใชร ปู ภาพได
5. สรา งชอ งรับขอมูลประเภทไฟลไ ด
6. สรา งชอ งกรอกขุอมลู แบบรหัสผาน (password)ได
7. สรา งชองรับขอ มูลแบบตางๆได
8. ทาํ การแบง ฟอรมเปนสดั สวนได
9. ทาํ การตงั้ ช่อื หัวขอใหก บั ฟอรมทจี่ ดั แบง สว นได

126

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

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

ข้ันเตรยี ม(สัปดาหละ10 นาท)ี

1. ใหผ ูเรยี นศกึ ษาบทเรียน ประมาณ 5 นาที 1. ผูเรยี นศกึ ษาใบความรปู ระมาณ 10 นาที

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

ข้นั นาํ เขา สูบ ทเรยี น(สปั ดาหล ะ20 นาที)

1. ทดสอบผูเ รียนโดยการสมุ ถามประมาณ 10 นาที 1. ตอบคาํ ถาม

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

คิดเห็นพรอมกับใหผูเรียนในหองมีสวนรวม

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

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

127

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

ข้นั ดําเนนิ การสอน(สปั ดาหล ะ 180 นาที)

1.บ ร ร ย า ย แ ล ะ แ ส ด ง วิ ธี ก า ร พ ร อ ม กั บ 1. ตง้ั ใจฟง จดบนั ทึก

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

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

ปฎบิ ัติทลี ะขั้นแตละหัวขอ การเรียนใหผูเรียน 4. ทาํ ใบงานสง

ปฎิบตั ิแลว คอยใหคําแนะนาํ 5. แกไ ขใบงานใหถกู ตอง

4. ครบู อกเทคนิค และแนวที่งาย ๆ 6. ผูเรยี นรว มกับครผู สู อนเฉลยใบงาน

5. ใหผ ูเรียนทาํ ใบงาน และกาํ หนดเวลาสงทกุ 7. จดเทคนคิ และหลักการท่ีครผู สู อนแนะนํา

ครงั้ ที่เรียนจบแตล ะหัวขอการเรียน 8. ทําแบบฝก หัดสง

6. ครูตรวจใบงานและใหคะแนนสําหรับผูที่ทํา 10. ผูเรียนกบั ครูรวมกนั เฉลยแบบฝก หัด

ถูกตองและเสร็จทันเวลาท่ีกําหนด และผูท่ีทํา

ใบงานผิดตองนํากลับไปแกไขใหมจนกวาจะ

ใบงานจะถกู ตอ งทกุ ขอ

7. ครูเปด โอกาสใหผ ูเรียนซกั ถามขอ สงสัย

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

ข้ันสรุป(สัปดาหละ30 นาที)

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

ประจําหนวยการเรียน ประยุกตใชใหเกิดประโยชนและประสิทธิภาพ

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

นาํ ไปประยกุ ตใ ช

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

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

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

128

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

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

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

คดิ เห็น
5. มคี วามพยายามปรบั ปรงุ แกไ ขใบงานและแบบฝกหดั ใหถกู ตอ งแลว นาํ สง ครผู สู อน

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

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

129

2. ผูเรยี นตอ งมคี วามขยัน หมัน่ ฝก ฝนบทเรียนอยูเสมอทัง้ กอนและหลังเรยี น
3. ผูเรยี นตองมีความกลาทจ่ี ะถามเมือ่ สงสยั ท้ังในหอ งและนอกหอ งเรียนกับครูผูสอน

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

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

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

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

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

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

130

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

คําชีแ้ จง ใหผ ปู ระเมินขดี เครื่องหมายถกู 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

131

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

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

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

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

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

132

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

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

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

1. ขอ ใดกลาวไมถ ูกเกีย่ วกบั รปู แบบการทาํ งานของฟอรม และ CGI ?
ก. CGI ยอมาจาก Common Gateway Interface
ข. โปรแกรมทใี่ ชใ นการประมวลผลขอมลู มชี อ่ื เรยี กวา CGI Script
ค. ขอ มลู ทีไ่ ดจากฟอรมและนาํ ไปประมวลผลเรียบรอ ยแลว เรียกวา CGI
ง. เราใชภ าษา HTML ในการสรางฟอรม เพ่อื สง ขอ มูลใหกบั เซริ ฟเวอร

133

2. ขอ ใดไมใชภ าษาท่ีใชเขยี น CGI Script ? ข. PHP
ก. Perl ง. HTML
ค. ASP

3. ขอ ใดคอื ความหมายของการกาํ หนด method="post" ภายในแทก็ <form...> ?
ก. การสง ขอ มลู ภายในฟอรม ไปยงั CGI ทลี ะตัวอกั ษร
ข. การสง ขอ มลู ภายในฟอรม ไปยงั CGI ทีละบรรทดั
ค. การสง ขอมลู ภายในฟอรม ไปยงั CGI พรอ มกันท้งั หมด
ง. ไมม ีขอ ถกู

4. ขอ ใดไมใชแ อททรบิ ิวทท ่อี ยใู นอปุ กรณร บั ขอ มลู ทีส่ รา งโดยใชแ ท็ก <input>?

ก. name ข. size

ค. maxlength ง. action

5. ขอ ใดไมใชช นดิ ของอุปกรณใ นแทก็ <input> ?

ก. name ข. image

ค. hidden ง. button

6. ขอถกู ตอ งเกี่ยวกบั ชอ งกรอกขอมลู แบบ Password ?
ก. ส่งิ ทพ่ี ิมพจ ะปรากฏขนึ้ ภายในชอ ง
ข. กําหนด input type="text"
ค. ไมส ามารถใชห ลายๆ ตัวในฟอรม หน่ึงได
ง. ใช maxlength ในการกาํ หนดจาํ นวนตวั อักษรสูงสุดของ Password

7. หากเราตองการทําแบบสอบถามเก่ียวกบั การใชสนิ คาที่สามารถตอบคําถามไดมากกวา 1 ขอ ควร
เลือก input type ในขอ ใด ?

134

ก. checkbox ข. password
ค. radio ง. textarea

8. ขอ ใดคือความหมายของการใส checked="checked" เพิม่ ลงในแท็ก <input> ?
ก. กําหนดตวั เลอื กตั้งแตต อนเรม่ิ
ข. หา มเลอื กตัวเลอื กทกี่ าํ หนด checked="checked"
ค. เลือกไดเ ฉพาะตวั เลอื กทก่ี ําหนด checked="checked" ไว
ง. ไมม ขี อ ถูก

9. ขอ ใดเปนแทก็ ท่ีใชในการจัดหมวดหมูรายการ ?

ก. <group> ข. <optgroup>

ค. <fieldgroup> ง. <formgroup>

10. ขอ ใดเปนแทก็ ทใี่ ชในการจดั แบง แบบฟอรม ออกเปน สวนๆ ?

ก. <formset> ข. <formgroup>

ค. <fieldset> ง. <fieldgroup>

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

......... 1. CGI Script เปน โปรแกรมทีใ่ ชใ นการประมวลผลขอมูล
......... 2. วิธกี ารนําขอ มลู ไปประมวลผลมชี อ่ื เรียกวา CGI
......... 3. CGI หรอื Common Gateway Interface เปน ภาษาหนึง่ ท่ใี ชใ นการเขยี นโปรแกรม
......... 4. CGI เปน วธิ ีหรือขบวนการท่ีทาํ ใหเว็บเพจสามารถเรยี กโปรแกรมอน่ื มาทาํ งานได
......... 5. CGI Applications คอื โปรแกรมท่ถี ูก CGI เรยี กขน้ึ มาทํางาน
......... 6. ภาษา PHP, ASP และภาษา C เปนท่นี ิยมใชใ นการเขยี นโปรแกรม CGI Script
......... 7. maxlength คอื แอททรบิ วิ ทท ีอ่ ยภู ายในแท็กเปด <input...>

135

......... 8. การสรางปุมกดในนฟอรม HTML จะมี 3 ลักษณะ คอื submit, reset และ button

......... 9. แท็ก <optgroup> คือ ตัวเลอื กรายการแบบจัดกลมุ
......... 10. HTML เปนภาษาทีใ่ ชเขียน CGI Script

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

1. ปมุ ในฟอรม HTML มีลกั ษณะใดบาง จงอธบิ าย

ปุม submit เมอื่ กดปมุ น้ขี อ มลู ในฟอรมทัง้ หมดจะถกู สงไปให CGI Scripts หรอื

CGI programs

ปมุ reset เม่อื กดน้อี ปุ กรณใ นฟอรมทัง้ หมดจะกลับสคู าเร่ิมตน

ปมุ button เปนปมุ ที่สรา งขึ้นมาเพื่อทาํ งานใดๆโดยจะไปเรยี ก javascript หรือ

VDScript ข้นึ มาทํางาน

2. จงอธบิ ายข้ันตอนการทํางานของ CGI พอเขาใจ

1. เมื่อผใู ชป อนขอ มลู ในแบบฟอรมเสร็จสน้ิ จากนน้ั คลกิ ปุม สงหรือทเ่ี ราเรยี กวาปมุ Submit เพอ่ื สง

ขอ มูลในแบบฟอรมไปท่ี CGI programs
2. CGI programs รับขอ มูลและประมวลผล(ในขัน้ ตอนนี้จะเกิดที่เครื่องเซิรฟเวอร ดังนั้นผูใชจะไมเห็น
การทาํ งาน)
3. จากน้ัน CGI programs จะนําผลลัพธท่ีไดจากการคํานวณมาใสรูปแบบแท็ก HTML และสงกลับมาท่ี
บราวเซอรใหผ ใู ชไ ดเ หน็ ผลลัพธการทาํ งานของ CGI programs

3. จงเขยี น HTML เพ่ือสรางคอนโทรลดังรูป

136

<select name=color>
<option value=#ff0000>Red</option>
<option value=#00ff00>Green</option>
<option value=#0000ff>Blue</option>
<option value=#dd2222>Pink</option>
<option value=#555555>Gray</option>

</ select>

<textarea cols="30" rows="5">

...ขอ ความเริ่มตน ...
</textarea>

<input type="radio" name="sex" value="male" />ชาย
<input type="radio" name="sex" value="female" />หญงิ <br /><br />

<input type="radio" name="age" value="19" />10-19 ป
<input type="radio" name="age" value="29" />20-29 ป
<input type="radio" name="age" value="39" />30-39 ป< br /><br />

137

ภาคผนวก
รปู แบบการประเมนิ ผลใหคะแนน
กจิ กรรมการเรยี นรู ทุกหนว ยการเรยี น

138

แบบประเมินคุณธรรมจรยิ ธรรม
วิชา การสรางเว็บเพจ(ดว ยภาษา HTML) รหัสวชิ า 2201-2414

ภาคเรียนท่ี …….. ปก ารศึกษา
ระดับช้นั ปวช สาขางานคอมพวิ เตอรธ รุ กจิ

(ผเู รยี นประเมนิ ตนเอง) สอนโดย ครู
---------------------------------------------------------------------------------------------------------------------
หวั ขอ ประเมิน

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

หวั ขอประเมนิ
เลขท่ี ช่ือ – สกุล 1. 2. 3. 4. 5. 6. รวม ลงชอ่ื ผปู ระเมนิ

(5) (5) (5) (5) (5) (5) คะแนน
1
2
3
4
5

ขอ คดิ เหน็ จากผูป ระเมิน
……………………………………………………………………………………………………….…

ลงชอื่ ...............................................ผูประเมิน
(……………………………)

วันท…่ี ………เดอื น……………ปพ .ศ.………

139

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

(ผูเรยี นประเมนิ ตนเอง) สอนโดย
---------------------------------------------------------------------------------------------------------------------
หัวขอ ประเมนิ

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

……………………………………………………………………………………………………….
รปู แบบการประเมินใหค ะแนน
5 = ดีมาก , 4 = ดี , 3 = พอใช , 2 = ควรปรบั ปรงุ , 1 = รว มกจิ กรรม ,0 = ไมรว มกจิ กรรม

หวั ขอประเมนิ
เลขที่ ชอื่ – สกลุ 1. 2. 3. 4. 5. 6. รวม ลงช่ือผูป ระเมนิ

(5) (5) (5) (5) (5) (5) คะแนน
1
2
3
4
5
6
ขอคดิ เหน็ จากผูป ระเมนิ
……………………………………………………………………………………………………….…

ลงชอ่ื ...............................................ผูประเมิน
(……………………………)

วนั ท…ี่ ………เดือน……………ปพ .ศ.………

140

แบบประเมินคณุ ธรรมจรยิ ธรรม
วิชา การสรา งเว็บเพจ(ดว ยภาษา HTML) รหสั วชิ า 2201-2414

ภาคเรียนที่ …….. ปก ารศกึ ษา
ระดับชน้ั ปวช สาขางานคอมพวิ เตอรธ รุ กจิ วิทยาลยั

(ผสู อนประเมนิ ผูเรยี น) สอนโดย
---------------------------------------------------------------------------------------------------------------------
หวั ขอ ประเมนิ

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

หวั ขอประเมนิ
เลขที่ ชือ่ – สกลุ 1. 2. 3. 4. 5. 6. รวม หมายเหตุ

(5) (5) (5) (5) (5) (5) คะแนน
1
2
3
4
5

ขอ คดิ เหน็ จากผูประเมนิ
……………………………………………………………………………………………………….…

ลงชอื่ ...............................................ผปู ระเมิน
(……………………………)

วันท…ี่ ………เดอื น……………ปพ .ศ.………

141

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

ภาคเรยี นท่ี …….. ปการศกึ ษา
ระดบั ช้นั ปวช สาขางานคอมพวิ เตอรธ รุ กจิ วทิ ยาลยั

(ผูสอนประเมนิ ผเู รยี น) สอนโดย
---------------------------------------------------------------------------------------------------------------------
หัวขอ ประเมิน

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

……………………………………………………………………………………………………….
รปู แบบการประเมนิ ใหค ะแนน
5 = ดมี าก , 4 = ดี , 3 = พอใช , 2 = ควรปรับปรงุ , 1 = รวมกจิ กรรม ,0 = ไมร ว มกิจกรรม

หัวขอ ประเมนิ
เลขท่ี ชื่อ – สกุล 1. 2. 3. 4. 5. 6. รวม หมายเหตุ

(5) (5) (5) (5) (5) (5) คะแนน
1
2
3
4
5
ขอคดิ เหน็ จากผูประเมิน
……………………………………………………………………………………………………….…

ลงชอ่ื ...............................................ผูป ระเมนิ
(……………………………)

วันท…ี่ ………เดอื น……………ปพ.ศ.………

142

แบบสอบถามความพึงพอใจ/ความคดิ เหน็ ตอ สอ่ื การสอน

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

ประจาํ ภาคเรียนท่ี ปการศกึ ษา

ระดบั ปวช สาขางานคอมพิวเตอรธ รุ กจิ วทิ ยาลยั โดย

...................................................................

เพ่ือทราบผลการจัดกิจกรรมการเรียนรูและการใชส่ือการสอนวิชา การสรางเว็บเพจ(ดวยภาษา

HTML) ซ่ึงจะเปนประโยชนอยางมากตอการปรับปรุงและพัฒนาใหมีประสิทธิภาพตอผูใชและ

ผเู รียนมากยง่ิ ขน้ึ ในการดําเนนิ กจิ กรรมการเรียนรูตอไป

ความหมายของระดบั ความคดิ เห็น

4 หมายถงึ ระดบั ความคิดเหน็ ดีมาก

3 หมายถึง ระดบั ความคิดเห็น ดี

2 หมายถงึ ระดบั ความคดิ เหน็ นอ ย

1 หมายถึง ระดบั ความคดิ เหน็ นอ ยมาก

ตอนท่ี 1 โปรดกาเครอ่ื งหมาย 3 ลงในชองทต่ี รงกบั ความคิดเห็นของทาน

1. ขอมูลทวั่ ไปเก่ยี วกับผตู อบแบบสอบถาม

1.1 สถานภาพ

143

2.1.6 ชวยใหผูใ ชความเชอ่ื มน่ั ในตนเองในหลกั การทถ่ี กู ตอ งเพียงใด

2.1.7 ชวยเสรมิ สรางใหเกดิ ความคิดรวบยอดนาํ ไปประยกุ ตใ ชเ พยี งใด

2.1.8 การเรยี งลาํ ดับความสําคญั ของเน้ือหาสาระมีความเหมาะสมเพียงใด

ระดับความ

รายการ คิดเห็น

4321

2.1.9 กจิ กรรมในการจดั การเรียนการสอนเหมาะสม เพยี งใด

2.1.10 ใบงาน/แบบฝก หัดมคี วามเหมาะสมเพยี งใด

2.2 ดา นการจดั กจิ กรรมการเรียนรขู องผสู อน

2.2.1 ครผู สู อนมีความรูค วามสามารถในการสอนเพยี งใด

2.2.2 ครผู ูสอนมีเทคนิคในการสอนมากนอยเพยี งใด

2.2.3 ครผู สู อนมกี ารบรู ณาการสอนและการจัดกจิ กรรมการสอนนา สนใจเพยี งใด

2.2.4 ครูผูสอนมีการเฉลยแบบฝก หัดหลงั บทเรยี นในชน้ั เรยี นเพื่อใหผ เู รยี นได

รับรแู ละปรบั ปรงุ ขอ ผิดพลาดทกุ หนว ยการเรยี นมากนอย เพยี งใด

2.2.5 ครูผูสอนมกี ารแทรกและอบรมคณุ ธรรมจรยิ ธรรมใหแ กนักเรยี นใน

การจดั กิจกรรมการสอนในระดบั ใด

2.3 ความคดิ เหน็ ดา นอ่นื ๆ

2.3.1 สํานวนภาษาทใ่ี ชง า ยตอความเขาใจเพยี งใด

2.3.2 รูปแบบเหมาะสมเพียงใด

2.3.3 มคี วามถกู ตอ งชดั เจนมากนอยเพยี งใด

2.3.4 ผสู รา งส่อื นม้ี คี วามรู ทกั ษะ และเทคนคิ ในการถายทอดอยู ในระดับใด

2.3.5 ความพงึ พอใจของทานจากการใชส อ่ื นีอ้ ยูใน ระดบั ใด

ตอนที่ 2

1. ผเู รียนมีความคดิ เหน็ อยา งไรในการจดั กจิ กรรมการเรยี นรขู องครผู ูสอนความรคู วามสามารถในการ

สรา งและใชสอ่ื การสอนรวมทงั้ บรู ณาการจดั กิจกรรมการเรยี นรู

1.1 ขอ ดีและ/หรอื ขอทปี่ ระทับใจ

...................................................................................................................................................................

.......................................................................................................................................................

1.2 ขอควรปรบั ปรงุ

144

...................................................................................................................................................................
.......................................................................................................................................................

1.3 ขอ เสนอแนะ
…………………………………………………………………………………………….................

.............................................................................................................................................................