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

ภาษา html

Like this book? You can publish your book online for free in a few minutes!
Download PDF
Share

Related Publications

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

51

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

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

1. ขอใดเปน แทก็ สาํ หรบั การขน้ึ บรรทดั ใหม ?

ก. <br /> ข. <br>...</br>

ค. <nobr> ง. ถกู ทงั้ ขอ ก. และ ข.

52

2. ขอใดเปน แทก็ สาํ หรับการจัดขอความแบบเปนยอ หนา ?

ก. <p /> ข. <p>

ค. <br> ง. <pre>

3. ขอ ใดเปนการจดั หนา เวบ็ เพจโดยใหข อความแสดงเหมอื นตามท่ีเรากําหนดไว ?

ก. <br> ข. <p>

ค. <nobr> ง. <pre>

4. ขอ ใดเปนการตัดคําเฉพาะจดุ เพ่ือชว ยใหบราวเซอรตดั คําไดดขี น้ึ

ก. <br> ข. <nobr>

ค. <wbr> ง. <p>

5. ขอ ใดไมใ ชแ อททริบวิ ททใ่ี ชในการกาํ หนดคุณสมบตั ขิ องเสนคั่น ?

ก. width ข. nobr

ค. noshade ง. align

6. ขอใดคือการใชแ ทก็ <hr> แสดงเสน คนั่ แนวนอนยาว 30% ของความกวางหนาจอ ?

ก. <hr="30%" /> ข. <30%:hr />

ค. <hr width="30%" /> ง. <width="30%":HR />

. ขอใดคือแอททรบิ ิวททใ่ี ชในการจดั ตาํ แหนงเสนคัน่ ?

ก. noshade ข. nobr

ค. size ง. align

8. แทก็ ใดท่ีไมมใี ชใ น XHTML ? ข. br
ก. p ง. ถูกทุกขอ
ค. wbr

53

9. ขอ ใดกลาวถูกตอ ง ?
ก. แท็ก br ใน XHTML คอื <br/>
ข. แท็ก br ใน HTML คอื <br/>
ค. แทก็ br ใน HTML คือ </br>
ง. แทก็ br ใน XHTML คือ <br />

10. ขอใดคือรปู แบบของการเพม่ิ หมายเหตเุ ตอื นความจาํ ?

ก. <!--หมายเหตุ--> ข. <!--หมายเหต-ุ -!>

ข. //หมายเหตุ ง. /*หมายเหต*ุ /

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

......... 1. แท็ก <br> เปนการตัดคําขนึ้ บรรทัดใหม
......... 2. การเขยี นแทก็ <p> ตอ งอยใู นแท็ก <body>...</body> เสมอ
......... 3. center เปน อกี แทก็ หนง่ึ ท่ใี ชใ นการจดั วางตาํ แหนง เนอื้ หาในเว็บเพจ

จัดวางไดท้งั ขอ ความและรูปภาพ
......... 4. <hr size ="30" /> เปน การกําหนดความยาวของเสนคัน่ ของ XHTML
......... 5. align กําหนดตําแหนงของเสน ใหอยู center (ก่งึ กลาง), left (ชดิ ซา ย)

และ right (ชิดขวา)
......... 6. <hr noshade="noshade" width="200" size="6" /> เปน รูปแบบใน HTML4
......... 7. การทาํ ใหความยาวของเสนคั่น มีสัดสวนทพี่ อดกี บั หนาจอของบราวเซอร

สามารถทําไดโ ดยการกาํ หนดความยาวใหเ ปน พกิ เซล
......... 8. <hr align="right" /> เปนการจดั ตาํ แหนงเสนคัน่ ใหอ ยชู ิดขวา
......... 9. <pre> เปน การกําหนดจุดใหบราวเซอรต ัดคาํ
......... 10. การใชเสนคัน่ ทางแนวนอน (Horizontal Rule) จะชวยแบงเนอื้ หาออกเปน สวนๆ

ทาํ ใหอา นไดงา ย

54

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

1. จงเขยี น HTML ทม่ี ีการจัดวางตําแหนง ขอ ความใหอ ยกู ึ่งกลางหนา
<body>
<center>บอกรกั แมไ ดทกุ วนั ไมจ ําเปน ตอ งรอเทศกาลวนั แมเ พราะวาในใจของคุณแมน ั้น ทานรักและ

หวงใยเราทกุ วนั ดังน้ันเราไมจ าํ เปน ตอ งรอวนั ไหนทจี่ ะแสดงออกวา รกั ทาน กแ็ สดงออกไปทกุ
วนั จะไดสมกบั ทท่ี านรกั เรา </center>
</body>
2. จงเขียน HTML กาํ หนดความยาว และความหนาของเสน คน่ั
<body>
ความแตกตางของความยาว <br/>
Widts = 40 <hr Widts =40/>
Widts=200 <hr Widts=200/>
ความแตกตางของความหนา <br/>
Size=6 <hr size=6/>
Size=10 <hr size=10/>
</body>
3. จงบอกความสาํ คัญของแทก็ หมายเหตุ วาทําไมเราจึงควรใสแทก็ นไี้ วเ สมอ

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

55

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

หนวยท่ี 4 เรื่อง การจัดการขอความ สัปดาห 4-5 เวลา 8 ช่วั โมง

1. สาระสาํ คัญ
ขอความในเว็บเพจ จะดูนาสนใจ จูงใจใหผูใชเขามาอาน โดยการตกแตงดวยแท็กตางๆ ใน

ภาษา HTML เชน รูปแบบของตวั อักษร สขี องตัวอกั ษร สพี ื้นของเวบ็ เพจ ตัวอกั ษรเคลอื่ นไหว

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

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

1. แบง ขอ ความเปนสวนยอ ยโดยใชห ัวเร่อื งได

2. กําหนดลักษณะของตวั อักษรแบบ Physical และ Logical ได

3. ปรบั เปล่ียนขนาดของตัวอักษรได

4. กําหนดขนาดตวั อักษรจากตัวอกั ษรปกตทิ ี่ใชอยไู ด

5. กาํ หนดรูปแบบของตัวอักษรตามความตอ งการได

6. กาํ หนดสีพน้ื เวบ็ เพจและกําหนดสขี องตัวอักษรได

7. กําหนดตวั อักษรในเอกสารใหม สี ีแตกตา งกนั ได

8. กําหนดใหต ัวอกั ษรเคลือ่ นไหวบนหนาเวบ็ เพจได

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

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

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

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

จดั การขอความ ในเว็บเพจ ประมาณ 10 นาที เขา ใจ

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

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

56

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

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

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

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

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

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

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

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

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

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

4. ครูแนะนําเทคนิค และวิธี แบงขอความเปนสวนยอย 5.ผูเ รียนปฎิบัตติ าม

โดยใชห วั เร่ือง กําหนดลักษณะของตัวอักษรแบบ Physical 6.ผูเรียนซกั ถามขอสงสัย

และ Logical ปรับเปล่ียนขนาดของตัวอักษร กําหนด 7.ทําใบงานและแบบฝกหัดหลังเรียนที่

ขนาดตัวอักษรจากตัวอักษรปกติท่ีใชอยู กําหนดรูปแบบ ไดรับมอบหมายใหเสร็จทันภายในเวลา

ของตัวอักษรตามความตองการ กําหนดสีพ้ืนเว็บเพจและ ทกี่ ําหนด

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

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

เพจ ใหผเู รียนปฎบิ ัติแลวคอยใหค าํ แนะนาํ ใบงานและแบบฝก หดั

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

วิธที ่ีสอนไดถูกตอ ง

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

กาํ หนด

57

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

7. ตรวจใบงานและแบบฝกหัด 9.ผูเรียนจดบันทึกผลการสรุป และเทคนิค

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

แบบฝก หดั 10. ผูเรียนบอกวิธีที่นําความรูจากบทเรียนไป

ข้ันสรุป(สัปดาหล ะ30 นาท)ี ป ร ะ ยุ ก ต ใ ช ใ ห เ กิ ด ป ร ะ โ ย ช น แ ล ะ

9. ครูใหผูเรียนในหองสรุปความรูท่ีไดจากการ ประสทิ ธภิ าพสูงสดุ ตอ ไป

เรยี นทกุ หวั ขอการเรยี นรู

10. ครูสุมถามผูเรียนในหองเรียนเพื่อตอบ

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

ผูเ รยี นจะถามคําถามไดอ ยา งถกู ตอ ง

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

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

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

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

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

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

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

58

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

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

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

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

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

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

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

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

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

59

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

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

60

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

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

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

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

61

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

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

1. ขอใดกลา วไมถ ูกตอ งเก่ยี วกบั การใชแ ทก็ <hn> ?
ก. รปู แบบของแท็กทใ่ี ช <hn>....</hn>
ข. n ทใี่ ชม ีคาต้ังแต 1 ถึง 6

62

ค. <h6> จะมีตวั อกั ษรใหญท ่สี ดุ ใชก ับขอ ความหลกั
ง. แบง ขอความโดยการใชหวั เรอื่ งท่มี ีขนาดตา งกนั

2. ขอ ใดไมถ กู ตอ งเกย่ี วกับการกําหนดตวั อกั ษรแบบ Physical ?
ก. กําหนดรปู แบบตัวอักษรขอ ความได เชน ตัวหนา ตัวเอน
ข. กาํ หนดรูปแบบของตวั อกั ษรตามลักษณะขอ ความ
ค. ไมเปลย่ี นแปลงแมบราวเซอรทใ่ี ชเ ปด ดแู ตกตา งกัน
ง. ขอ ข, ค ถูกตอง

3. ขอใดไมใชแ ทก็ การกาํ หนดลกั ษณะตวั อกั ษรแบบ Logical ?
ก. <strong>..</strong>
ข. <xmp>...</xmp>
ค. <var>..</var>
ง. <sup>...</sup>

4. ขอ ใดคอื การกาํ หนดสีขอความเปนสีเขยี ว ?
ก. font color="ff0000"
ข. font color="00ff00"
ค. font color="0000ff"
ง. font color="pink"

5. ขอ ใดใชก ําหนดรูปแบบใหกบั ขอ ความทเี่ ปนนยิ าม ?
ก. Strong
ข. Citations
ค. Definition
ง. Sample

63

6. ขอใดใชกาํ หนดรปู แบบใหก บั ขอ ความทเ่ี ปน ตวั อยาง ?
ก. Strong
ข. Citations
ค. Definition
ง. Sample

7. ขอใดกลา วถูกตอ งเก่ียวกบั การเปลี่ยนขนาดของตวั อักษร ?
ก. รปู แบบแท็ก <font size="n">....</font>
ข. รูปแบบแทก็ <font size= "+/-ขนาด"> ขอความ </font>
ค. ขนาดของตัวอกั ษร คือ 1 ถงึ 7
ง. ถกู ทกุ ขอ

8. ขอใดคอื ความหมายของการใชรปู แบบของคาํ สง่ั
<font face ="ชอ่ื ฟอนต1 , ชอ่ื ฟอนต2 , ...">

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

9. ขอใดกลาวไมถ กู ตอ งเกย่ี วกบั การใสสตี ัวอกั ษรในเว็บเพจ ?
ก. สามารถกาํ หนดสีได 2 รูปแบบคอื กําหนดจากรหสั สแี ละช่ือสี
ข. แอททรบิ ิวท text ใชในการกาํ หนดสตี วั อกั ษร, ใสในแทก็ font
ค. แอททริบวิ ท color ใชใ นการกําหนดสีตวั อกั ษร, ใสในแทก็ font
ง. ไมมขี อถกู

10. ขอ ใดกลาวไมถ กู ตอ ง ?

64

ก. สีในคอมพิวเตอรเ กดิ จากแมส ี RGB สามสี
ข. เราสามารถดูคา สีไดจ ากโปรแกรม Print
ค. คา รหัสสเี ลขฐานสบิ หกตองมี 6 หลกั เสมอจงึ จะใหผลถกู ตอง
ง. เราสามารถเลอื กใชคา "#0000ff" หรอื "blue" กไ็ ด

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

......... 1. <h1> จะมขี นาดตวั อักษรใหญท ส่ี ดุ และถกู ใชกบั ขอ ความหลัก
จะมีขนาดโดยปกติ 24 พอยต สวน <h6> จะมขี นาดโดยปกติ 8 พอยต

......... 2. การกาํ หนดลักษณะตัวอักษรในเวบ็ เพจนนั้ มีอยู 1 วิธี
คือ แบบ Physical เปนการกาํ หนดรูปแบบตัวอกั ษรอยางเจาะจง

......... 3. Superscript คือ การกําหนดตวั อกั ษรหอ ย
......... 4. คือ การใชแ ทก็ Delete (ขดี ฆา) <del>...</del>
......... 5. <u> เปน การกําหนดตวั อกั ษรการขดี ฆา
......... 6. Emphasis ใชเ นนขอ ความคาํ พดู หรอื วลี
......... 7. <dfn>..</dfn> เปน รูปแบบแทก็ ทแี่ สดงขอ ความที่เปนคํานยิ าม
......... 8. ตวั อกั ษรขนาด size="7" จะมขี นาดเลก็ สดุ
......... 9. สีในคอมพวิ เตอรเ กดิ ขนึ้ จากการผสมคาสีโหมด RGB ซง่ึ ประกอบดว ยสี 3 สี

คอื Red (แดง) Green (เขียว) และ Blue (น้ําเงิน)
......... 10. <body bgcolor="lightgreen" text="#0000ff">

แท็กแสดงการกําหนดสีพื้นของเว็บเพจ และการกําหนดสตี วั อักษร

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

1. จงเขียนแท็กกาํ หนดลกั ษณะตัวอักษรมา 5 แท็ก

<b>..</b> ทําตัวหนา <i>..</i>ทําตัวเอียง

<u>..</u>ขดี เสนใต <sup>..</sup>ทาํ ตวั อักษรยก 65
หรอื วลี
<sub>..</sub>ทําตัวอกั ษรหอ ย <em>..</em>ใชเ นนขอความคําพดู

<strong>..</strong>ใชเนน ขอ ความท่สี ําคญั มาก <code>..</code>ขอ ความท่ี

เปนโคด โปรแกรม

2. จงเขียน HTML กําหนดขนาดของตัวอกั ษร

<body>

<font size=7>font size=7</font><br/>

<font size=6>font size=6</font><br/>

<font size=5>font size=5</font><br/>

<font size=4>font size=4</font><br/>

<font size=3>font size=3</font><br/>

<font size=2>font size=2</font><br/>

<font size=1>font size=1</font><br/>

</body>

3. ในการหาคาสีใน HTML มขี อ ควรระวงั อะไรบาง
1. คาสีจะตองเรยี งลําดบั RGB เสมอถาเราใสคาสสี ลับ เชน d5..,cc,60 จะถือวาเปนคนละสี
2. คา สีตอ งมคี รบ 6 หลัก หรอื คาสลี ะ 2 หลกั เชน 00, fo , 06 ไมใ ช 0,fo, 6 แบบหลังจะไดสีท่ีไมตรง

ความตองการ
3. ในการกําหนดคาสีในเวบ็ เราจะนาํ ดวยเครอ่ื งหมาย # และตอ ดว ยคาสีแดง 2 หลัก คาสเี ขยี ว 2 หลัก

คา สีนา้ํ เงิน 2 หลกั เชน # 00ff00 จะแสดงสเี ขยี ว

66

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

หนว ยที่ 5 เร่อื ง การใชล สิ ตส รา งรายการ สปั ดาหที่ 6-7 เวลา 8 ชั่วโมง

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

โดยจัดเปน รายการหรอื ลสิ ต ในภาษา HTML สามารถสรา งลสิ ตไ ด 5 แบบดวยกัน

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

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

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

67

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

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

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

ใชลิสตส รา งรายการ ในเว็บเพจ ประมาณ 10 นาที 2 ซกั ถามเมอื่ เกิดความสงสยั

2. ครูตอบขอ สงสัย ของผูเรยี น

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

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

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

ผูเรยี น ตอบคําถาม

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

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

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

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

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

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

2. ครูแนะนําเทคนิค และวิธีสรางลิสตแบบไมมีลําดับ 2 .ผเู รียนปฎบิ ตั ติ าม

สรางลิสตแบบมีลาํ ดับ สรา งลสิ ตแ บบ เมนู สรางลิสต 3 . ผูเรยี นซักถามขอสงสยั

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

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

คาํ แนะนํา กําหนด

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

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

ตามวธิ ที ี่สอนแตล ะวิธไี ดถูกตอ ง ใบงานและแบบฝก หัด

68

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

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

ภายในเวลาทีก่ าํ หนด

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

6.ค รู แ ล ะ ผู เ รี ย น ร ว ม กั น เ ฉ ล ย ใ บ ง า น แ ล ะ

แบบฝก หัด

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

7.ครูแนะนําใหผูเรียนศึกษาจากเอกสาร ประยุกตใชใหเกิดประโยชนและประสิทธิภาพ

ประกอบการเรียน,ใบงาน,แบบฝกหดั สูงสดุ ตอไป

8.ครูและผูเรียนรวมกันสรุปสาระการเรียนรูจาก

บทเรยี น ความสาํ คัญและการนาํ ไปประยกุ ตใ ช

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

กอ นเรยี น
1. ครูช้แี จงการปฏิบตั ิของผเู รียนตามภาระงานทม่ี อบหมาย
2. ครบู อกแนวทางในกระบวนการเรียนการสอน
3. ครูใหผ เู รียนทบทวนบทเรียน

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

69

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

6. ผูเรียนซักถามเมื่อไมเขา ใจหรอื สงสัยเนอ้ื หาการเรียนรู

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

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

คิดเห็น

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

ทกุ ครงั้ ท่ีทาํ ผิด

70

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

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

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

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

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

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

71

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

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

72

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

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

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

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

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

73

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

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

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

1. ขอ ใดกลา วถูกตอ งเก่ยี วกบั การใชแ ทก็ <ul> ?
ก. ul ยอ มาจาก Unordered List
ข. แยกแตล ะรายการโดยใชส ญั ลกั ษณพ เิ ศษ
ค. ลิสตแบบไมมลี ําดับ
ง. ถูกทุกขอ

74

2. ขอ ใดคือความหมายของการใชแ ทก็ <li> ?
ก. กําหนดชนดิ ของรายการ
ข. สรา งหวั ขอใหญของรายการ
ค. กําหนดสญั ลกั ษณดา นหนา รายการ
ง. สรางรายการ

3. ขอใดคอื แทก็ ในการกาํ หนดเคร่ืองหมายนาํ หนา รายการใหเ ปน วงกลมทบึ เหมือนกนั หมดทกุ

รายการ ?

ก. <ul type="disc"> ข. <ul type="circle">

ค. <li type="disc"> ง. <li type="circle">

4. ขอ ใดกลาวไมถ ูกตอ งเกีย่ วกบั Ordered List ?
ก. เปนการสรางลสิ ตแบบมลี าํ ดบั
ข. หากไมมกี ารกาํ หนดชนดิ ของเลขลาํ ดับจะใชเ ปน เลขโรมนั
ค. ใชแทก็ <ol> ในการสรางรายการแบบ Ordered List
ง. ชนิดของเลขลาํ ดบั ท่กี ําหนดไดแ ก ตวั อักษร, เลขโรมัน และเลขอารบกิ

5. ขอใดคือแทก็ ทีใ่ ชส รา งรายการแบบ Ordered List ทมี่ ีชนิดลาํ ดับเปนอักษรพิมพใหญ ?

ก. <li type="A"> ข. <li type="capitals">

ค. <ol type="capitals"> ง. <ol type="A">

6. ขอ ใดคือคาํ ส่ังที่ใชส รางรายการแบบ Ordered List ใหค าเร่ิมตน การจัดลาํ ดบั ที่ 20 ?

ก. <li start="20"> ข. <li type="20">

ค. <ol start="20"> ง. <ol type="20">

7. การสรา งลสิ ตใ นขอใดทใ่ี หผลลัพธแตกตา งกับลิสตแบบอนื่ ๆ ?

ก. Ordered List ข. Definition List

75

ค. Menu List ง. Directory List

8. ขอ ใดกลาวไมถ ูกตองเกี่ยวกบั ลิสตแบบจํากัดความ ?
ก. ใชแยกคาํ และความหมายออกจากกัน
ข. Definition List คอื ลสิ ตแบบจาํ กดั ความ
ค. สามารถกาํ หนดเครอ่ื งหมายนําหนา ขอ ความได
ง. แบง ออกไดเ ปน 2 สว น สว นแรกคือคาํ ศพั ท และความหมายของศัพท

9. <dt> และ <dd> เปนคาํ ส่งั ในการสรา งลิสตแ บบใด ?

ก. ลิสตแบบไมมลี ําดับ ข. ลิสตแบบมลี ําดบั

ค. ลสิ ตแ บบจาํ กดั ความ ง. ลสิ ตแ บบซอ นกัน

10. ขอใดไมใ ชร ปู แบบของลิสต เพียงแตเ ปน การนาํ รปู แบบของลิสตมาประยกุ ตใชเ ทา น้นั ?

ก. ลสิ ตแบบไมมลี ําดบั ข. ลสิ ตแ บบเมนลู ิสต

ค. ลิสตแบบจาํ กัดความ ง. ลสิ ตแบบซอ นกนั

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

......... 1. ลิสตแบบไมมลี าํ ดบั (Unordered List) จะแยกแตล ะรายการโดยใชส ญั ลักษณพเิ ศษ
......... 2. สญั ลกั ษณของเคร่ืองหมายวงกลมโปรง ใสคือ disc
......... 3. type="a" แสดงเปน ตัวอักษรพมิ พเ ลก็ คือ A,B,C,...
......... 4. <dir> เปนการสรา งลิสตแบบไดเรก็ ทอรล่ี สิ ต
......... 5. ลิสตแบบไดเรก็ ทอร่ลี ิสต (Directory List) ใชแยกคาํ และความหมายออกจากกัน
......... 6. เราสามารถซอ นลิสตก ีช่ ัน้ กไ็ ด แตไ มแนะนําใหซ อนมากกวา 3 ชน้ั เพราะจะทําใหเ รา

สบั สน
และขอ มลู ทป่ี รากฏในลสิ ตอ าจเลยออกนอกจอภาพของบราวเซอร ทําใหอ า นยาก

76

......... 7. แทก็ Ordered List จะแสดงเลขลาํ ดบั ทก่ี าํ หนด
ไดแ ก ตวั อกั ษร, เลขโรมัน และเลขอารบิก

......... 8. คาที่กาํ หนดใหใ ชในแอททรบิ วิ ท type ของเครอื่ งหมายหนา ลาํ ดับ
ไดแก disc, circle และ square

......... 9. dl (Definition List) ไมตองอยูภ ายในแท็ก <body>...</body>
......... 10. ลสิ ตแ บบจํากดั ความ แบงออกไดเ ปน 2 สว น

สว นแรกคือคาํ ศพั ท และความหมายของศพั ท

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

1. ชนดิ ของเลขลาํ ดับใน Ordered List มอี ะไรบา ง
Type=A แสดงเปนตัวอกั ษรพมิ พใ หญค อื A,B,C,..
Type=a แสดงเปนตัวอกั ษรพิมพเ ลก็ คอื a,b,c,..
Type=I แสดงตัวเลขโรมันตวั พิมพใ หญคอื I,II,III,..
Type=i แแสดงตวั เลขโรมันตวั พมิ พเ ล็กคอื i,ii,iii,
Type=1 แสดงเปนตัวเลขคอื 1 2 3 (คา ปกต)ิ
2. จงเขียน HTML เพอ่ื สรา งลสิ ตดังตอ ไปนี้

77

<body>

<ultype=circle>

รายการสนิ คา ท่มี ีขายในเวบ็ ไซตข องเรา

<li>นติ ยสาร วารสาร</li>

<li type=square>หนังสือ How to </li>

<li>หนงั สอื คอมพิวเตอรและเทคโนโลย<ี /li>

<li type=disc>หนังสือนวนิยาย การตนู </li>

<li>หนงั สือแบบเรยี นวชิ าการ</li>

</ul>

</body>

3. จงเขยี นลกั ษณะผลลัพธท จ่ี ะเกิดข้นึ ในหนาจอบราวเซอรของโคด HTML ตอไปนี้
<body>
<dl>
อธิบายศัพทอ นิ เทอรเ นต็
<dt>Address

78

<dd>ตําแหนง ท่ีเก็บไฟลขอ มลู ในอนิ เทอรเ นต็
<dt>Bandwidth
<dd>การวดั ความเร็วการสง ขอ มูลของสายสัญญาณ
</dl>
</body>

79

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

หนวยท่ี 6 เร่อื ง เชอ่ื มโยงเวบ็ เพจดวยลิงค (Link) สปั ดาหที่ 8-9 เวลา 8 ชั่วโมง

1.สาระสาํ คัญ
เว็บเพจจํานวนนับลานในอินเตอรเน็ต จะไมมีประโยชนเลยหากขาดการเชื่อมโยงถึงกันโดย

ลงิ ค (Link)ซงึ่ ชวยใหผูใ ชส ามารถทอ งอินเตอรเ นต็ โดยการคลิก เพื่อเปล่ียนไปดูหนาเว็บตางๆซ่ึงอาจจะ
อยหู นาเดยี วกนั หรอื หนาใหม หรือ เว็บไซตอนื่ ก็ได นอกจากนีเ้ รายังสามารถเชอ่ื มโยงผานภาพกไ็ ด

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

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

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

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

80

กจิ กรรมครู กจิ กรรมนกั เรยี น

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

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

2.ครูกําหนดเวลาใหผูเรียนอานหนังสือเตรียม 2.ทาํ ความเขา ใจกบั บทเรยี น

ความพรอมในการเรียนการสอนการเรยี น 3. ซกั ถามเมอื่ เกดิ ความสงสยั

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

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

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

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

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

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

ปฎบิ ตั แิ ลวคอยใหค ําแนะนํา 3. นักเรียนถามเม่ือสงสยั หรือไมเ ขาใจบทเรียน

3. ครบู อกเทคนิค และแนวคดิ ท่งี า ยและรวดเรว็ 4. ทาํ ใบงานสง

ในการปฎบิ ัตทิ ถี่ กู ตองใหแ กผ ูเรยี น 5. แกไ ขใบงานใหถ กู ตอ ง

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

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

5. ครตู รวจใบงานและใหคะแนนสําหรับผทู ่ีทาํ 8. ทําแบบฝก หัดสง

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

แกไ ขใหมใ หถ กู ตอง แลวจดบันทกั

6. ครเู ปด โอกาสใหผเู รยี นซกั ถามขอสงสยั 2. ผเู รียนกบั ครรู วมกนั เฉลยแบบฝกหดั

7. กาํ หนดเวลาใหผูเรยี นทําแบบฝก หดั หลงั เรยี น 3. ผูเรียนบอกวิธีท่ีนําความรูจากบทเรียนไป

ขัน้ สรปุ (สปั ดาหละ30 นาที) ป ร ะ ยุ ก ต ใ ช ใ ห เ กิ ด ป ร ะ โ ย ช น แ ล ะ

9.ใหท บทวนบทเรียน เขา เรียนทุกครัง้ ประสทิ ธภิ าพสงู สุดตอ ไป

10.ครแู ละนกั เรียนรว มกนั สรุปสาระการเรยี นรู

5. กิจกรรมการเรยี นรู
กอนเรียน
1. ครชู ้ีแจงการปฏิบัติของผเู รยี นตามภาระงานที่มอบหมาย

81

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

เปนลาํ ดับขน้ั ตอนท่จี ะทาํ ใหตนเองไมล ืมสาระการเรยี นรู
6. ผเู รียนซกั ถามเมอ่ื ไมเ ขา ใจหรือสงสัยเน้ือหาการเรยี นรู

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

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

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

82

4. กลาท่จี ะถามทกุ ครง้ั ที่เกิดความสงสยั และไมเขาใจหรอื ตามบทเรียนไมทนั

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

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

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

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

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

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

83

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

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

84

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

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

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

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

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

85

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

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

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

1. ขอ ใดคอื รูปแบบการลิงคโ ดยใชแทก็
<a href="#ชอ่ื จุดเช่อื มโยง">...</a> ?
ก. การเชอ่ื มโยงขอ มลู ภายในเวบ็ เพจเดียวกัน
ข. การเชอ่ื มโยงกบั เวบ็ เพจอน่ื ภายในเว็บไซตเ ดยี วกัน
ค. การเช่อื มโยงไปยังเวบ็ ไซตอน่ื
ง. การเชอ่ื มโยงไปยังไฟลอ นื่ ทไี่ มใ ชเ อกสาร HTML

86

2. ขอใดคือรปู แบบการลิงคโ ดยใชคําสัง่
<a href="http://www.microsoft.com">... </a> ?
ก. การเช่ือมโยงขอ มลู ภายในเวบ็ เพจเดยี วกัน
ข. การเช่อื มโยงกบั เวบ็ เพจอื่นภายในเวบ็ ไซตเดยี วกนั
ค. การเชอ่ื มโยงไปยังเวบ็ ไซตอ น่ื
ง. การเช่อื มโยงไปยงั ไฟลอื่นทไี่ มใ ชเ อกสาร HTML

3. ขอ ใดกลาวถูกตองเกี่ยวกับ Relative Path Names ?
ก. ใชใ นการระบตุ ําแหนงเก็บของไฟลต างๆ
ข. การระบตุ ําแหนง เปน การอา งอิง ไมใชเจาะจง
ค. ไมตองเปลย่ี นตําแหนง ในโคด HTML เม่ือนาํ ไปใชใ นเครอื่ งเซิรฟ เวอร
ง. ถูกทกุ ขอ

4. ขอใดคือความหมายของขอความทข่ี ีดเสนใตใ นคาํ สัง่ ตวั อยางนี้
<a href="http://www.microsoft.com" target="_blank"> ... </a> ?

ก. ใชรูปแทนขอ ความในการลงิ ค
ข. เปน การกาํ หนดลงิ คเ พอื่ สงอเี มล
ค. เปนการลงิ คเ ปด หนา ตางใหมเ ปนหนา วาง
ง. เปด เว็บเพจทล่ี งิ คใ นหนา ตางใหม

5. ขอใดเปนการเขียนคําส่ังเพ่ือใชภ าพ picture.jpg เปน ตัวลงิ คไ ปเวบ็ ไซต adobe ?
ก. <a href="http://www.adobe.com"><img src="picture.jpg"></a>
ข. <a href="http://www.adobe.com">"picture.jpg"</a>
ค. <a href="http://www.adobe.com" img src="picture.jpg"></a>
ง. ไมมขี อถกู

87

6. คําส่ัง <body link="สี" vlink="สี" alink="ส"ี >
เปน คําส่ังท่ีใชก าํ หนดสขี องลงิ ค ซึ่งสีท่กี ําหนดแตละตวั มีความหมายตามขอ ใดตามลาํ ดบั ?
ก. ไมเ คยถกู ใช กาํ ลังคลกิ เมาสอ ยู ถกู ใชแ ลว
ข. ไมเ คยถกู ใช ถูกใชแ ลว กาํ ลงั คลกิ เมาสอ ยู
ค. กําลงั คลกิ เมาสอยู ไมเคยถกู ใช ถกู ใชแ ลว
ง. ถูกใชแ ลว ไมเคยถกู ใช กําลงั คลิกเมาสอ ยู

7. ขอใดกลา วไมถ ูกตองเกยี่ วกบั Image Map ?
ก. ภาพท่ีบางสว นถูกกําหนดไวเปนลงิ ค
ข. พนื้ ที่ที่ถกู กาํ หนดใหเ ปนลงิ คจ ะมชี ่อื เรยี กวา hotspot
ค. square เปน การกําหนดพนื้ ทรี่ ูปสเ่ี หลยี่ ม
ง. default เปน การใชพนื้ ทส่ี วนท่เี หลือที่ไมไ ดก าํ หนดไว

8. ขอใดกลา วไมถ ูกตอ งเกย่ี วกบั จุดโคออรดเิ นต ?
ก. เปนจดุ ทกี่ ําหนดพกิ ดั ของรปู ทรง
ข. รูปทรงกลมใชค า โคออรด เิ นต 3 คา
ค. รูปส่ีเหลยี่ มจะใชจดุ โคออรด เิ นตทงั้ หมด 4 จุด
ง. หากใชค า default ไมตอ งทาํ การกําหนดจดุ โคออรด ิเนต

9. จากรปู วงกลม โคออรด ิเนตทก่ี าํ หนดในการสรา ง Image map คือขอ ใด ?

ก. "5,10,10" ข.
ค. "5,10,5" ง. "10,10,5"

10. ขอใดกลา วไมถ ูกตองเกีย่ วกบั การสรางลงิ คโ ดยวธิ ี Rollover ?
ก. คาํ สัง่ ท่ีเขยี นเพม่ิ เรยี กวา Event Handler หรอื คาํ สงั่ ตอบสนองเหตกุ ารณ
ข. ตองใชแ อททรบิ ิวทท ีส่ ําคญั คอื OnMouseDown และ OnMouseOut
ค. ตอ งเขยี นคําสง่ั ของ Javascript เพมิ่ เติม

88

ง. ไมม ขี อ ถกู

11. ขอใดเปนการลิงคภ ายในเวบ็ ไซตเ ดียวกนั โดยลงิ คจ ากเวบ็ เพจ home.html
ไปยงั success.html ซง่ึ มีการเก็บหนาเวบ็ เพจในไดเร็กทอรี่ ดังรปู ?
ก. <a href="../../success.html">
ข. <a href="/../../success.html">
ค. <a href="../../../success.html">
ง. <a href="project1/success.html">

12. จากขอ 11 ถา เราจะสรา งลิงคก ลบั จาก success.html กลบั สู home.html
เราจะใชลงิ คข อ ใด ?
ก. <a href="project1/project2/home.html">
ข. <a href="/project1/project2/home.html">
ค. <a href="/project2/project3/home.html">
ง. <a href="project2/project3/home.html">

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

......... 1. เม่อื คลก้ิ ทล่ี งิ คการเชื่อมโยงขอ มลู ภายในเวบ็ หนา เดียวกนั จะเกดิ การกระโดดไปที่
จดุ เชือ่ มโยง โดยหนา เว็บจะเลอ่ื นข้นึ หรือลงไปท่ีตําแหนง จดุ ปลายทางนน้ั

......... 2. ลงิ คส ามารถเช่อื มโยงขอ มลู ได 2 วธิ ี คือ การเชอ่ื มโยงขอ มลู ภายในเวบ็ หนา เดียวกนั
และการเชอ่ื มโยงขอมลู ในเวบ็ ไซตทีอ่ ื่น

......... 3. การเขยี นลงิ คเ ชือ่ มโยงขอมลู ภายในเว็บเพจตอ งกาํ หนดการเชอ่ื มโยง
ไปยังจดุ หมายปลายทาง และกาํ หนดจุดหมายปลายทางดว ย

......... 4. เราจะใชแท็ก <img> เพ่ือนําภาพมาทาํ เปน ลงิ ค
......... 5. <a href="mail: ช่ือ email address">ขอ ความทีล่ งิ ค< /a>

เปน การสรา งลงิ คเ พอ่ื สง Email

89

......... 6. เมือ่ ใดกต็ ามท่ีเรานาํ เมาสไ ปวางบนรปู ภาพกจ็ ะเปลี่ยนไปเปน อีกภาพหนึ่ง
และเมือ่ ใดกต็ ามทีเ่ รานําเมาสออกจากรูป ภาพนน้ั กจ็ ะกลับมาเปน รปู เดมิ
เหตกุ ารณเ ชน นเ้ี ราเรยี กกนั วา Rollover

......... 7. คําส่งั ตอบสนองเหตกุ ารณทเ่ี ราจะใชในการสรา งลิงค Rollover มี 2 แอททรบิ วิ ท
น่นั กค็ ือ onMouseIn และ onMouseOut

......... 8. การกาํ หนดแม็พ (map) ก็คอื การกาํ หนดพ้ืนท่หี ลายๆ พนื้ ท่ีไวภ ายในแมพ็ เดยี วกนั
......... 9. ปญ หาการไมมีหนา เวบ็ เพจท่ีเราจะเช่ือมโยงดว ย

ปญ หานเี้ รยี กวา Lost link หรอื Break link
......... 10. สขี องลงิ คท ีเ่ คยถกู คลกิ ไปแลวเรยี กวา Hyperlink

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

1. จงเขียน HTML เพ่ือสรา งลงิ คส ง Email
<body>

<a href=mailto:[email protected]>ขอความถงึ webmaster</a>
</body>
2. จงเขยี น HTML เพ่อื เช่ือมโยงขอมลู ในเวบ็ ไซตที่อ่ืน
<body>
<a href=http://www.mtv.com>MTV Online</a><br/>
<a href=http://www.discovery.com>Discovery Channel</a><br/>
<a href=http://www.microsoft.com>Microsoft Corporation</a><br/>
</body>

90

3. จงเขียนแทก็ <area> ทีก่ าํ หนดพน้ื ทด่ี งั รปู

<area shape=circle cords=200,180,170 href=hetp..www.successmedia.com/>

91

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

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

1. สาระสาํ คัญ
การจัดเก็บขอมูลจํานวนมาก จําเปนมากท่ีตองนําตารางเขามาชวยในการจัดขอมูลเหลานี้ ใหดู

เปนระเบียบและเปนสัดสวน ซ่ึงเว็บเพจโดยสวนใหญจะใชแท็กภาษา HTML ท่ีเกี่ยวกับตารางมาชวย
ทงั้ สน้ิ

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

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

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

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

92

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

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

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

2.ครูกําหนดเวลาใหผูเรียนอานหนังสือเตรียม 2.ทาํ ความเขาใจกบั บทเรียน

ความพรอ มในการเรียนการสอนการเรียน 3. ซักถามเมอ่ื เกิดความสงสยั

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

1. ทดสอบกอนเรียน โดยการถามเพ่ือประเมิน 1. ผูเรียนตอบคาํ ถามจากภมู คิ วามรขู องตน

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

93

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

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

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

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

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

4. ครูบอกเทคนิค และแนวคิดทงี่ า ย ๆ 4. ทําใบงานสง

5. ใหผ ูเรียนทาํ ใบงาน และกาํ หนดเวลาสง ทกุ 5. แกไขใบงานใหถ กู ตอง

ครง้ั ที่เรยี นจบแตละหวั ขอการเรียน 6. ผูเ รยี นรว มกบั ครูผูส อนเฉลยใบงาน

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

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

ใบงานผิดตองนํากลับไปแกไขใหมจนกวาจะ 10. ผเู รยี นกับครรู วมกันเฉลยแบบฝก หัด

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

7. ครูเปด โอกาสใหผ เู รียนซกั ถามขอสงสยั ประยุกตใชใหเกิดประโยชนและประสิทธิภาพ

8. กําหนดเวลาใหผูเ รยี นทาํ แบบฝกหดั หลงั เรียน สงู สุดตอ ไป

ข้ันสรปุ (สปั ดาหละ30 นาท)ี
9. ครูและผูเรียนรวมกันสรุปสาระการเรียนรู

ประจําหนวยการเรยี น
10. ครูแนะนําเทคนิคและวิธีการปฎิบัติที่

ถูกตองและรวดเร็วใหแ กผ เู รยี น

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

กอนเรียน
1. ครูช้แี จงการปฏบิ ัตขิ องผเู รยี นตามภาระงานที่มอบหมาย
2. ครบู อกแนวทางในกระบวนการเรยี นการสอน
3. ครใู หผเู รียนทบทวนบทเรยี น

94

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

เปน ลําดบั ข้นั ตอนทจ่ี ะทําใหต นเองไมล ืมสาระการเรียนรู
6. ผเู รียนซักถามเม่อื ไมเ ขา ใจหรือสงสัยเนือ้ หาการเรยี นรู

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

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

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

95

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

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

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

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

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

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

96

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

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

97

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

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

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

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

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

98

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

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

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

1. ขอ ใดเปน แทก็ ในการสรา งแถวและคอลมั นต ามลาํ ดับ ?
ก. <tr>...</tr> และ <td>.. </td>
ข. <th>...</th> และ <td>.. </td>
ค. <td>...</td> และ <tr>.. </tr>
ง. <tr>...</tr> และ <th>.. </th>

99

2. ขอ ใดเปน ความหมายของการใสเ แอททริบวิ ท border หลังแทก็ <table> ?

ก. ขอ ความในตารางเปน ตวั หนา ข. ใสเสน ตาราง

ค. ใสหวั ขอใหก ับตาราง ง. สรา งกรอบลอ มรอบตาราง

3. ขอ ใดเปนความหมายของการใชแ ทก็ <caption align="ตาํ แหนง">....</caption> ?
ก. กําหนดตาํ แหนง ของคาํ อธิบายตาราง
ข. กาํ หนดตําแหนงของตารางในหนา เวบ็ เพจ
ค. กาํ หนดตําแหนง ของขอความในตาราง
ง. กําหนดตาํ แหนงของ caption

4. ขอใดเปน แทก็ ทใี่ ชกาํ หนดใหม ที ่วี า งระหวา งขอบเซลลแ ละขอ มลู ?

ก. <cellspacing> ข. <cellpadding>

ค. <cellwidth> ง. <cellspan>

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

ก. backcolor ข. background

ค. color ง. Bgcolor

6. ขอใดเปน การปรบั ขนาดของตารางทงั้ ตารางใหม ีความกวา งเปน 60% ของหนาจอบราวเซอร ?

ก. <table width="60">

ข. <table border="60%">

ค. <colgroup width="60">

ง. <table width="60%">

7. ขอ ใดเปน การใสร ปู ภาพ sea.gif ใหเ ปนภาพพนื้ หลังของตาราง ?
ก. <table src="sea.gif">
ข. <table background="sea.gif">
ค. <table><img src="sea.gif"></table>

100

ง. <table bgimage="sea.gif">

8. ในการกําหนดเสนของตาราง คาแอททรบิ วิ ท frame="void" มคี วามหมายตรงตามขอใด ?

ก. แสดงเสนดานลา งของชองตาราง ข. ไมแสดงเสน

ค. แสดงเสน ดานบนของชอ งตาราง ง. แสดงเฉพาะเสน void

9. หากเราตองการกําหนดเสนของตารางใหแ สดงเฉพาะเสน แนวนอนทง้ั หมด

เราจะกําหนดคาของแอททรบิ ิวท rules ดว ยคาใด ?

ก. horizon ข. rows

ค. horizons ง. row

10. ขอ ใดกลาวไดถ ูกตองเกีย่ วกบั แอททริบวิ ท valign ท่ีกําหนดในแทก็ <td> ?
ก. เปนการจดั ขอมลู ในแนวนอน
ข. รปู แบบคาํ สัง่ คอื valign="ตาํ แหนง "
ค. ตัวเลอื กทีก่ าํ หนดได คอื top, middle และ bottom
ง. ถูกทกุ ขอ

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

......... 1. คา Border คือระยะหางระหวางชอ งภายในตาราง
......... 2. <table border="1" width="70%">

กาํ หนดความกวา งของตารางเปน 70%ของความกวา งบราวเซอร
......... 3. เราสามารถใสส ใี หก ับกรอบตาราง โดยใชแ อททริบิวท bgcolor ใสล งไปในแทก็ <table>
......... 4. การใสรูปภาพใหก บั พนื้ หลังของตาราง เราจะใชแ อททรบิ วิ ท bgimage
......... 5. box และ hsides เปนตัวเลือกของแอททรบิ วิ ท frame
......... 6. ตวั เลอื กของแอททริบวิ ท rules ประกอบดว ย all, cols, groups, none, rows
......... 7. <td valign="top">Top</td> เปนการจดั ขอมูลในแนวตั้ง
......... 8. <thead> (Table Header) เปนการแบงสว นของหัวตาราง


Click to View FlipBook Version