หน่วยที่ 3 การจัดรูปแบบและแต ่ง ... ·...

81

หนวยท 3 การจดรปแบบและแตงขอความ

หวขอเรอง

1. คาศพททเกยวของ 2. การขนบรรทดใหมของขอความ

3. การขนยอใหมของขอความ 4. กาหนดรปแบบขอความทเปนหวเรอง 5. การแสดงชองวางตามรปแบบทกาหนด 6. การการแสดงขอความตามรปแบบเดม 7. การจดขอความใหอยกงกลาง 8. การแสดงเสนคนในแนวนอน 9. การแสดงลาดบรายการ 10. การกาหนดลกษณะตวอกษร 11. การปรบเปลยนขนาดตวอกษร 12. การกาหนดแบบตวอกษร 13. การใชอกขระพเศษ 14. การกาหนดตวอกษรวง

จดประสงคการเรยนร 1. ใชคาสงการขนบรรทดใหมของขอความไดตามหลกการ

2. ใชคาสงการขนยอใหมของขอความไดตามหลกการ 3. ใชคาสงกาหนดรปแบบขอความทเปนหวเรองไดตามหลกการ 4. ใชคาสงการแสดงชองวางตามรปแบบทกาหนดไดตามหลกการ 5. ใชคาสงแสดงขอความตามรปแบบเดมไดตามหลกการ 6. จดขอความใหอยกงกลางเอกสารเวบเพจไดไดตามหลกการ 7. แสดงเสนคนในแนวนอนไดตามไดตามหลกการหลกการ 8. ใชคาสงแสดงลาดบรายการไดตามหลกการ 9. กาหนดลกษณะตวอกษรไดตามหลกการ 10. ปรบเปลยนขนาดตวอกษรไดตามหลกการ 11. กาหนดแบบตวอกษรไดตามหลกการ 12. ใชอกขระพเศษไดตามหลกการ 13. กาหนดตวอกษรวงไดตามหลกการ

82

สมรรถนะอาชพประจาหนวย (สงทตองการใหเกดการประยกตใชความร ทกษะ คณธรรม เขาดวยกน) 1. สามารถจดรปแบบและแตงขอความตามหลกกการไดครบถวนถกตองดวยความรบผดชอบ และอดทน 2. มลกษณะกจนสยทดในการปฏบตงาน ม มระเบยบวนย ตรงตอเวลา สนใจใฝรและเชอมนในตนเอง มความคดรเรมสรางสรรค

83

แบบทดสอบกอนเรยน หนวยท 3 การจดรปแบบและแตงขอความ

1. โปรแกรมทแสดงผลตามคาสงของภาษาเอชทเอมแอล เปนหลกคอขอใด

ก. โปรแกรมเวบเบราวเชอร ข. โปรแกรมอดเตอร ค. โปรแกรมไมโครซอฟตวนโดว ง. โปรแกรมไมโครซอฟตวอรด

2. ขอใดกลาวถงการนาคาสงแทก ไปใช ก. วางคาสงไวทายขอความสดทายของบรรทดแตละบรรทด ข. วางคาสงไวหนาขอความแรกของบรรทดในคาสงแทก <Head> ค. วางคาสงไวทายขอความของบรรทดแรกในคาสงแทก <body> ง. วางคาสงไวตรงกลางขอความสดทายของบรรทดในคาสงแทก< body> 3. ขอใดกลาวถงคาสงแทก ไดอยางถกตอง

ก. การกาหนดยอหนาของขอความ ข. การกาหนดขนบรรทดใหมของขอความ ค. การกาหนดขอความวางเปลาในบรรทดนน ๆ ง. การกาหนดบรรทดขอความทตองการเนนหมายเหต

4. โปรแกรมเวบเบราวเชอรจะกาหนดการแสดงผลใหหวเรองชดซายของหนาจอตรงกบการใชแทกคาสงขอใด

ก. <h3>การเขยนเวบเพจ</h3> ข. <h3 valign = "left" >การเขยนเวบเพจ</h3> ค. <h3 align = "right">การเขยนเวบเพจ</h3> ง. <h3 align = "center">การเขยนเวบเพจ</h3>

5. ถาตองการกาหนดใหแสดงชองวาง 5 ชองวางระหวางขอความ ขอใดกลาวถกตอง ก. กดปม Space bar ทละ 5 ครง ข. < >กดปม Enter ค. < > กดปม Space bar ง. < > < > < > < > < >

6. การกาหนดขอความตามรปแบบทกาหนดสาหรบการแสดงผลบนโปรแกรมเวบเบราวเชอรเพอการจดรปแบบขอความใหตรงตามเอกสารเดมตรงกบขอใด

ก. คาสงแทก ข. คาสงแทก ค. คาสงแทก < pre> ง. คาสงแทก <pre bgcolor>

84

7. คาสงแทก ทใชในการจดขอความกงกลางหนาเวบเพจทงเอกสารคอขอใด ก. <center> หนวยเชยงใหม </center> ข. <body align = center> หนวยเชยงใหม </center> ค. <head align = center> หนวยเชยงใหม </center> ง. <title align = center> หนวยเชยงใหม </center>

8. คาสงแทกสาหรบการแสดงเสนคนใหชดขอบซาย ความกวางเปนรอยละ 80 ของจอภาพ และมความหนาของเสนคนเทากบ 10 แสดงเสนใหเปนสแดง ตรงกบขอใด

ก. <hr align = "left" width = "80%" size = "10" color = "red"> ข. <hr type = "left" width = "80%" size = "10" color = "red"> ค. <hr start = "left" width = "80%" size = "10" color = "red"> ง. <hr vlign = "left" width = อ80%" size = "10" color = "red">

ภาพสาหรบใชประกอบเปนคาตอบถามขอท 9

9. จากภาพขางบนเปนการแสดงผลขอความโดยใชคาสงแทกขอใด

ก. <ul > <li> วทยาลยเกษตรและเทคโนโลยแพร <li> วทยาลยเกษตรและเทคโนโลยเชยงใหม <li> วทยาลยเกษตรและเทคโนโลยเชยงราย </ul> ข. <ul type= circle > <li> วทยาลยเกษตรและเทคโนโลยแพร <li> วทยาลยเกษตรและเทคโนโลยเชยงใหม <li> วทยาลยเกษตรและเทคโนโลยเชยงราย </ul> ค. <ol type= circle > <li> วทยาลยเกษตรและเทคโนโลยแพร <li> วทยาลยเกษตรและเทคโนโลยเชยงใหม <li> วทยาลยเกษตรและเทคโนโลยเชยงราย </ol>

85

ง. <dl type= circle > <li> วทยาลยเกษตรและเทคโนโลยแพร <li> วทยาลยเกษตรและเทคโนโลยเชยงใหม <li> วทยาลยเกษตรและเทคโนโลยเชยงราย </dl>

ภาพสาหรบใชประกอบเปนคาถามขอท 10


ก. <dl ><dt> ภาษา HTML<dd>HTML ยอมาจากคาวา Hyper Text Markup Language</dl>

ข. <li ><dt> ภาษา HTML<dd>HTML ยอมาจากคาวา Hyper Text Markup Language</dl>

ค. <ol ><dt> ภาษา HTML<dd>HTML ยอมาจากคาวา Hyper Text Markup Language</ol>

ง. <ul ><dt> ภาษา HTML<dd>HTML ยอมาจากคาวา Hyper Text Markup Language</ul>

11. ขอใดคาสงใหเนนตวอกษรทอยระหวางคาสงใหเปนตวหนา ก. คาสงแทก การเขยนเวบเพจ ข. คาสงแทก การเขยนเวบเพจ ค. คาสงแทก การเขยนเวบเพจ ง. คาสงแทก การเขยนเวบเพจ 

12. ซอคอมพวเตอร 1 เครองจาก ราคา 20,000 คงเหลอราคา 18,900 บาทตรงกบคาสงแทกขอใด ก. ซอคอมพวเตอร 1 เครองจาก ราคา 20,000 คงเหลอราคา 18,900 บาท ข. ซอคอมพวเตอร 1 เครองจาก < ราคา 20,000 คงเหลอราคา 18,900 บาท ค. ซอคอมพวเตอร 1 เครองจาก <s> ราคา 20,000 </s>คงเหลอราคา 18,900 บาท ง. ซอคอมพวเตอร 1 เครองจาก ราคา 20,000 คงเหลอราคา 18,900 บาท

13. ขอใดคอการแสดงผลของการใชคาสง x2+2xy+ y 2 ก. x2y2

ข. x2+xy+y2

ค. x+2x2y+y2

ง. x2+2xy+y2

86

14. ขอใดคอคาสงทใชในการกาหนดคายอจากอกษรแรกของแตละคา ก. <bdo title = “Hypertext markup language ”> html </bdo > ข. < samp title = “Hypertext markup language ”> html </ samp > ค. <address title = “Hypertext markup language ”> html </ address > ง. <acronym title = “Hypertext markup language ”> html </ acronym >

15. ขอใดคอคาสงแทกสาหรบการกาหนดขนาดตวอกษร เปนคามาตรฐาน ก. เวบไซต (WebSite) ข. เวบไซต (WebSite) ค. เวบไซต (WebSite) ง. เวบไซต (WebSite) 16. ขอใดใชคาสงแทกกาหนดขนาดตวอกษรถกตอง ก. เวบไซต (Web Site) ข. เวบไซต (Web Site) ค. เวบไซต (Web Site) ง. เวบไซต (Web Site) 

17. ขอใดใชคาสงแทกกาหนดแบบตวอกษรไดถกตอง ก. คอมพวเตอรธรกจ ข. คอมพวเตอรธรกจ ค. “คอมพวเตอรธรกจ” ง. คอมพวเตอรธรกจ 18. ขอใดคอคาสงแทกสาหรบกาหนดแบบตวอกษรเหมอนกนทงหมด ก. Homepage ข. Homepage ค. <basefont face = “AnsanaNew” > Homepage ง. <basefont face = AnsanaNew > Homepage 

19. คาสงสาหรบแสดง คา 4

3

ก. ข. ¾ ค. &quot34; ง. &nbsp34; 20. ขอใดคอการใชกาสงในการใหอกษรวงตามทศทางใหขอความวงจากขวามาซาย เมอถงขอบซายแลวจะหยดนงไมวงไปไหนอก ก. <marquee behavior = slide>หลกปรชญาเศรษฐกจพอเพยง</marquee> ข. <marquee direction = right >หลกปรชญาเศรษฐกจพอเพยง</marquee> ค. <marquee behavior = right >หลกปรชญาเศรษฐกจพอเพยง</marquee> ง. <marquee behavior = alternate>หลกปรชญาเศรษฐกจพอเพยง</marquee>

87

หนวยท 3 การจดรปแบบและแตงขอความ

การเ รมตนเขยนเวบเพจจะเรม ตนจากการกาหนดคณสมบตเ บองตนสาหรบ

หนาเอกสารเวบเพจ โดยการจดรปแบบของขอความและแตงขอความ ในหนวยการเรยนนกจะกลาวถง การขนบรรทดใหมของขอความ การขนยอใหมของขอความ กาหนดรปแบบขอความทเปนหวเรอง การแสดงชองวางตามรปแบบทกาหนด การการแสดงขอความตามรปแบบเดม การจดขอความใหอยกงกลาง การแสดงเสนคนในแนวนอน การแสดงลาดบรายการ การกาหนดลกษณะตวอกษร การปรบเปลยนขนาดตวอกษร การกาหนดแบบตวอกษร การใชอกขระพเศษ การกาหนดตวอกษรวง ของเวบเพจในลกษณะตาง ๆ จะชวยใหเวบเพจมความเปนระเบยบ สวยงาม นาสนใจมากยงขน ภาษาเอชทเอมแอล สามารถจดการไดอยางมประสทธภาพ

1. คาศพททเกยวของ ทบทวนคาศพทหนวยการเรยนทผานมา ไดแก Attribute, Pixel, HTML, Http, Tag, Value, Web browser

2. การขนบรรทดใหมของขอความ การแสดงผลดวยโปรแกรมเวบเบราวเซอรนน การขนบรรทดใหมดวยการกดปม Enter ทปมแปนพมพเพอแสดงขอความขนบรรทดใหม ในเอกสารเวบเพจทเปนภาษา HTML เมอใชโปรแกรมเวบเบราวเชอรเพอแสดงขอความนน เวบเบราวเซอรจะไมทาการขนบรรทดใหมให โดยจะนาขอความทงหมดนนมาเขยนตอในบรรทดเดยวกน ซงขนอยกบความกวางของสวนแสดงผล ดงนน ในการกาหนดใหมการขนบรรทดใหม สาหรบการแสดงผลบนโปรแกรม เวบเบราวเชอรเพอทาการ ขนบรรทดใหม คอ คาสงแทก 

คาสงแทก นจะใสไวยงตาแหนงเนอหาเอกสาร ทตองการขนบรรทดใหม สาหรบการแสดงผล โดยการขนบรรทดใหมจะไมสนใจการกดปม Enter แตจะสนใจเพยงคาสงแทก คาสงนไมมคาสงแทกปด ทใชในการปด ตามหลกการของการเขยนภาษา HTML ซงการวาง คาสงแทก นนจะวางคาสงไวทายขอความสดทายของบรรทดแตละบรรทดทตองการขนบรรทดใหม ดงตวอยางใชคาสงแทก แสดงดงภาพท 3.2 และถาตองการใหบรรทดใดบรรทดหนงใหวางเปลา กสามารถกาหนดไดโดยการเพมคาสงแทก เพมในบรรทดนน

รปแบบคาสง ...ขอความ...

88

เมอแสดงผลผานโปรแกรมเวบเบราวเซอร ดงภาพท 3.1

ภาพท 3.1 ตวอยางการใชคาสง แทก 

และถาตองการใชบรรทดใดบรรทดหนงวางเปลา กสามารถกาหนดไดโดยการเพมคาสง แทก เพมในบรรทดนน

และผลการแสดงขอความในโปรแกรมเวบเบราวเชอรดงตวอยางภาพท 3.2

<html> <head><title>การเขยนเวบเพจดวยภาษา HTML</title></head> <body>

คตพจนของ อกท. ภาษาไทย คอ เราเรยนรดวยงานการฝกหด เราปฏบตเพอหวงการศกษา หาเลยงชพเพอชวตพฒนา ใชวชาเพอบรการงานสงคม 

</body> </html>


คตพจนของ อกท. ภาษาไทย คอ เราเรยนรดวยงานการฝกหด เราปฏบตเพอหวงการศกษา หาเลยงชพเพอชวตพฒนา ใชวชาเพอบรการงานสงคม 

</body> </html>

89

ภาพท 3.2 การแสดงขอความในการเพมคาสงแทก 

3. การขนยอหนาขอความ

คาสงแทกทใชในการกาหนดยอหนาขอความ หรอภาพในลกษณะตาง ๆ ในภาษาองกฤษทรจกกนเรยกวา Paragraph และการขนบรรทดใหมใหอตโนมต คอคาสงแทก โดยมรปแบบของคาสงดงน

คาสงแทก มแอททรบวท คอ align ใชสาหรบจดขอความหรอภาพทอยระหวางคาสง ซงจะกาหนดหรอไมกาหนดกได มรายละเอยด ดงน

แอททรบวท ความหมาย align ใชสาหรบจดตาแหนงของการยอหนาตามคาตาแหนงการแสดงผล

ตาแหนงการแสดงผลไดแก 1. left ใชสาหรบการจดขอความใหชดซายของหนาจอ 2. center ใชสาหรบการจดขอความใหอยกงกลางของหนาจอ 3. right ใชสาหรบการจดขอความใหชดขวาของหนาจอ 4. justify ใชสาหรบการจดขอความเตมพนท

รปแบบคาสง …

บรรทดวาง

<html> <head><title>การเขยนเวบเพจดวยภาษา HTML</title></head> <body> หลกการเขยนภาษา HTML 1. คาสงแทก โดยชอคาสงจะตองอยภายในเครองหมาย “ < >” เทานน 2. ชอคาสง จะใชอกษรภาษาองกฤษตวพมพเลกหรอใชอกษรภาษาองกฤษ ตวพมพใหญ มความหมายเดยวกน 3. คาสงแทกทวไปจะประกอบดวยแทกเปดและแทกปด แทกเปดจะชอคาสงอยระหวางเครองหมาย < และ > แทกปด จะมเครองหมาย Slash (/) อยหนาชอคาสง และอยระหวางเครองหมาย < และ > </body> </html>

90

และผลการแสดงขอความในโปรแกรมเวบเบราวเซอร ดงตวอยางภาพท 3.3

ภาพท 3.3 การแสดงผลการยอหนาของขอความ โดยไมไดกาหนด แอททรบวท align

กรณทไมไดกาหนดแอททรบวท align ยอหนาขอความจะอยชดซาย ซงมความหมายเหมอนการกาหนดให align = left ดงภาพท 3.3 เปนการเขยนคาสงการกาหนดยอหนาของขอความ โดยไมไดกาหนด แอททรบวท align และ ภาพท 3.4 เปนการแสดงผลการยอหนาของขอความโดยไมไดกาหนด แอททรบวท align และหากตองการกาหนดลกษณะพเศษเพมเตมจะตองใชในลกษณะของการกาหนดคาสงแทกเปด และ คาสงแทกปด และตองมการกาหนด แอททรบวท align = "ตาแหนงการแสดงผล" ในกรณทผลการแสดงไมออก แกปญหาโดยการใหเอาเครองหมาย "…" ออก

ผลการแสดงขอความในโปรแกรมเวบเบราวเชอรดงตวอยางภาพท 3.5

<html> <head><title>การเขยนเวบเพจดวยภาษา HTML</title></head> <body> หลกการเขยนภาษา HTML 1. คาสงแทก โดยชอคาสงจะตองอยภายในเครองหมาย “ < >” เทานน 2. ชอคาสง จะใชอกษรภาษาองกฤษตวพมพเลกหรอใชอกษรภาษาองกฤษ ตวพมพใหญ มความหมายเดยวกน 3. คาสงแทกทวไปจะประกอบดวยแทกเปดและแทกปด แทกเปดจะชอคาสงอยระหวางเครองหมาย < และ > แทกปด จะมเครองหมาย Slash (/) อยหนาชอคาสง และอยระหวางเครองหมาย < และ > </body> </html>

91

ภาพท 3.4 การแสดงผลการยอหนาของขอความ โดยกาหนด แอททรบวท align

4. กาหนดรปแบบขอความทเปนหวเรอง

คาสงแทกทใชในการแสดงหวเรองของเนอหา เปนการเนนหวขอเรองใหผชมหรอผอานเวบเพจสามารถเหนชดเจนมากยงขน ระดบของหวเรองในภาษา HTML สามารถแบงไดเปนระดบท 1 ถงระดบท 6 รปแบบของคาสงแสดงหวเรองมดงน

n หมายถง ตวเลขระดบของหวเรอง ซงตวเลขมคาตงแต 1-6 โดยตวเลข 1 จะเปนขอความหวเรองทมตวอกษรขนาดใหญมากทสด และถกใชกบขอความหลก จะมขนาดโดยปกต 24 พอยต และตวเลข 6 จะเปนขอความหวเรองทมตวอกษรขนาดเลกทสด จะมขนาดโดยปกต 8 พอยต เชน < h6 >…</h6 > หมายถงการกาหนดขอความหวเรองระดบท 6 ตวอกษรขนาดเลกทสด

คาสงแทก <hn> แสดงหวเรองมแอททรบวท คอ align ใชสาหรบจดขอความคาสง ซงจะกาหนดหรอไมกาหนดกได มรายละเอยด ดงน

แอททรบวท ความหมาย align ใชสาหรบจดตาแหนงของหวเรองตามคาตาแหนงการแสดงผล

ตาแหนงการแสดงผลไดแก 1. left ใชสาหรบการจดหวเรองใหชดซายของหนาจอ 2. center ใชสาหรบการจดหวเรองใหอยกงกลางของหนาจอ 3. right ใชสาหรบการจดหวเรองใหชดขวาของหนาจอ

กรณทไมกาหนดตาแหนงของหวเรอง align หวเรองจะอยชดซาย ซงมความหมายเหมอนการกาหนดให align = "left" ดงภาพท 3.5 เปนการแสดงผลการหวเรองของขอความ โดยไมไดกาหนด แอททรบวท align และ ภาพท 3.6 เปนการแสดงผลการหวเรองของขอความโดยกาหนด แอททรบวท align และหากตองการกาหนดลกษณะพเศษเพมเตมจะตองใชในลกษณะของการกาหนดคาสงแทกเปด <hn>และ คาสงแทกปด</hn> และตองมการกาหนด แอททรบวท align

รปแบบคาสง <hn align =" ตาแหนงการแสดงผล" > …</hn>

92

ขอสงเกต ขอความทอยหลงคาสงแทกปด </hn> จะแสดงในบรรทดถดไปโดยไมตองใชคาสง เพอขนบรรทดใหม

จากคาสงการกาหนดหวเรองของขอความ โดยไมไดกาหนด แอททรบวท align หวเรองทกาหนดดวยคาสง < h1 > ถง< h6 > โปรแกรมเวบเบราวเชอรจะกาหนด การแสดงผลใหหวเรอง ชดซายของหนาจอ งภาพท 3.5

ภาพท 3.5 การแสดงผลหวเรองของขอความ โดยไมไดกาหนด แอททรบวท align


<h1 align="center">วทยาลยเกษตรและเทคโนโลยเชยงใหม</h1> <h2 align="right">วทยาลยเกษตรและเทคโนโลยเชยงใหม</h2> <h3 align="left">วทยาลยเกษตรและเทคโนโลยเชยงใหม</h3> <h4 align="right">วทยาลยเกษตรและเทคโนโลยเชยงใหม</h4> <h5 align="left">วทยาลยเกษตรและเทคโนโลยเชยงใหม</h5> <h6 align="center">วทยาลยเกษตรและเทคโนโลยเชยงใหม</h6>

</body> </html>


<h1>วทยาลยเกษตรและเทคโนโลยเชยงใหม</h1> <h2>วทยาลยเกษตรและเทคโนโลยเชยงใหม</h2> <h3>วทยาลยเกษตรและเทคโนโลยเชยงใหม</h3> <h4>วทยาลยเกษตรและเทคโนโลยเชยงใหม</h4> <h5>วทยาลยเกษตรและเทคโนโลยเชยงใหม</h5> <h6>วทยาลยเกษตรและเทคโนโลยเชยงใหม</h6>

</body> </html>

93

โปรแกรมเวบเบราวเชอรจะกาหนดการแสดงผลตามทไดกาหนดท อททรบวท align

ภาพท 3.6 การแสดงผลหวเรองของขอความ โดยมการกาหนด แอททรบวท align

5. การแสดงชองวางตามรปแบบทกาหนด

โดยปกตในโปรแกรมเวบเบราวเชอรการแสดงชองวางขอความหรอเวนวรรคสามารถแสดงไดเพยง 1 ชองวางเทานน คอกดปม spacebar หนงครง กรณทตองการแสดงชองวางมากกวา 1 ชองวาง สามารถทาไดโดยใชอกขระพเศษ เพอใชแทนชองวาง โดย อกขระพเศษ 1 อกขระจะแทนชองวาง 1 ดงนน หากตองการชองวาง 5 ชอง จะตองใชอกขระ จานวน 5 อกขระ

จากคาสงเปนการพมพขอความทยงไมไดกาหนดชองวางตามรปแบบทกาหนด เมอ แสดงผลขอความดวยโปรแกรมเวบเบราวเชอรนน จะสงเกตวา ชองวางทวางระหวางขอความนน โปรแกรมเวบเบราวเชอรจะแสดงผลเพยง 1 ชองวางเทานน (ในกรอบสแดง) ดงภาพท 3.7

<html> <body> โปรแกรมเวบเบราวเชอรเปนโปรแกรมททาหนาทหลกคอ การแสดงผลตามคาสงของภาษา HTML เปนหลก ดงนนหากไมมคาสงใด ๆ โปรแกรมเวบเบราวเชอรจะแสดงขอความตดตอกน ตามความกวางของหนาตางโปรแกรมเวบเบาวเชอรและ โปรแกรมเวบเบาวเชอรกมคณสมบตการตดคา เพอใหการแสดงผลขอความเปนไปตามความกวางของหนาตางโปรแกรม ถงแมวาภายในไฟลภาษาHTML จะมการกาหนดรปแบบการแสดงขอความหรอการจดการกบขอความไวกตาม </body> </html>

<H3 align ="left”>

<H1 align ="center">

<H2 align = "right" >

94

ภาพท 3.7 การแสดงขอความทยงไมไดกาหนดชองวางตามรปแบบทกาหนด

จากตวอยางตอไปนจะเปนการเพมอกขระตามชาองวาของขอความ

เมอแสดงผลผานโปรแกรมเวบเบราวเซอรดงภาพท 3.8

ภาพท 3.8 การแสดงชองวางตามรปแบบทกาหนด

<html> <body> โปรแกรมเวบเบราวเชอรเปนโปรแกรมททาหนาทหลกคอการแสดงผลตามคาสงของภาษา HTML เปนหลก ดงนนหากไมมคาสงใด ๆ โปรแกรมเวบเบราวเชอรจะแสดงขอความตดตอกน ตามความกวางของหนาตางโปรแกรมเวบเบาวเชอรและ โปรแกรมเวบเบาวเชอรกมคณสมบตการตดคา เพอใหการแสดงผลขอความเปนไปตามความกวางของหนาตางโปรแกรม ถงแมวาภายในไฟลภาษาHTML จะมการกาหนดรปแบบการแสดงขอความหรอการจดการกบขอความไวกตาม </body> </html>

95

จากภาพท 3.8 สงเกตไดวา ในบรรทดท 1 แมวาจะเวนชองวางมากเทาใด เมอแสดงผลดวยโปรแกรมเวบเบราวเชอรกจะแสดงชองวางเพยง 1 ชองวางเทานน สาหรบบรรทดท 2 จะแสดงชองวางตามจานวน อกขระ ในทน คอ 5 ชอง เปนผลมาจากการอกขระ จานวน 5 อกขระ สาหรบบรรทดท 3 จานวน อกขระ จานวน 3 อกขระ จะแสดงชองวางจานวน 3 ชอง และบรรทดท 4 จานวน อกขระ จานวน 2 อกขระ จะแสดงชองวางจานวน 2 ชอง

6. การแสดงขอความตามรปแบบทกาหนด

ในกรณทมการแสดงขอมลเอกสารเวบเพจทละมาก ๆ การใชแทก และ ในทก ๆ จดของขอความทตองการขนบรรทดใหม และยอหนาขอความใหม คงไมสะดวกในการใชคาสง หากตองการใหเอกสารเวบเพจแสดงขอความในยอหนาทงหมดของเอกสารเวบเพจ ดงนนในการกาหนดขอความตามรปแบบทกาหนดสาหรบการแสดงผลบนโปรแกรมเวบเบราวเชอรเพอการจดรปแบบขอความใหตรงตามเอกสารเดม คอ คาสงแทก <pre> และ </pre> โดยการนาคาสงแทก <pre> วางไวหนาขอความ และ</pre>ไวทายขอความ โดยมรปแบบดงน

ตวอยางการใชคาสงแทก <pre> และ</pre> แสดงไวดงภาพท 3.9

<html> <body> <pre> ความรเกยวกบเรองของรปภาพทจะนามาใชทาเวบเพจ 1. ไฟลรปภาพชนด GIF (Graphic Intechange Format)</H3> ไฟลรปภาพชนดน นยมใชสาหรบภาพกราฟกทเปนลกษณะลายเลน ขอความตวอกษร ภาพเคลอนไหวหรอภาพการตนตาง ๆ ซงมสไมมากนก เพราะไฟลGIF มคาสสงสดเพยง 256 ส ดงนนทาใหภาพกราฟกทบนทกเปนไฟลประเภท GIF เปนรปภาพทมลกษณะทบ และไมสามารถไลเฉดสไดมากนก แตขอดของไฟลประเภทนคอ เราสามารถสรางและบนทกรปภาพประเภทนใหมลกษณะพนหลงโปรงใส (Transparent) ซงสามารถนารปภาพเหลานไปใชกบพนหลงสอะไรกได ไฟลรปภาพประเภทนมไฟลนามสกลเปน .gif 2. ไฟลรปภาพชนด JPG (Joint Photographic Expert Group)</h3> ไฟลประเภทนสามารถแสดงผลของสไดสงสดถง 16.7 ลานส ดงนนจงเหมาะสาหรบภาพทมเฉดสเยอะ เชน ภาพถายจากกลองดจตอลหรอภาพจากโปรแกรมสรางรปภาพ นอกจากนยงสามารถเลอกทจะบบอดไฟลภาพใหมขนาดเลกลงได แตคณภาพจะลดลงไฟลภาพประเภทนมไฟลนามสกลเปน .jpg และ .jpeg

รปแบบคาสง <pre> ...ขอความ…</pre>

96

เมอแสดงผลผานโปรแกรมเวบเบราวเซอรดงภาพท 3.9

ภาพท 3.9 การแสดงผลขอความทใชคาสงแทก <pre> และ </pre>

7. การจดขอความใหอยกงกลาง

การจดขอความใหอยกงกลางเปนการจดตาแหนงขอความทงหมดใหอยกงกลางหนาของจอภาพ คาสงทใชคอคาสงแทก <center> ซงจะกาหนดไวในสวนของ <body> โดยมรปแบบคาสงดงน

<html> <body >

<center> <h3> การจดขอความกงกลางหนาเวบเพจ </h3> <h3>ปรชญาวทยาลยเกษตรและเทคโนโลยเชยงใหม</h3> ทกษะเดน เนนคณธรรม นาสงคมพฒนา กาวหนาเทคโนโลยbr> </center>

<body> </html>

รปแบบคาสง <center> ...ขอความ ... <center>

3. ไฟลรปภาพชนด PNG (Portable Network Graphic)</h3> ไฟลประเภทนจะมใหเลอกบนทก 2 แบบคอ (1) แบบ PNG-8 ซงสามารถแสดงผลสไดสงสด 256 ส และ(2) แบบ PNG-24 ซงสามารถแสดงผลสไดสงสดถง 16.7 ลานสเหมอนไฟล JPG นอกจากนยงสามารถทาเปนภาพพนหลงโปรงใส เหมอนกบ GIF ไดดวย แตไฟลภาพประเภทนจะมขนาดไฟลใหญกวาภาพ JPG มาก ดงนนจงบนทกภาพซงมขนาดเลก ๆ แตมการใชสมาก เชน ภาพสาหรบทาไอคอน ตาง ๆ ไฟลประเภทนมนามสกล .png </pre> </body> </html>

97

เมอแสดงผลโปรแกรมเวบเบราวเชอรจะปรากฏดงภาพท 3.10

ภาพท 3.10 การแสดงผลขอความทใชคาสงแทก <center> และ </center>

จากภาพท 3.10 การแสดงผลขอความทใชคาสงแทก <center> และ </center> นน ขอความทอยในระหวางคาสงแทกจะจดกงกลางหนาจอภาพ ดงนนคาสงแทก <center> จะกาหนด การแสดงผลขอความใด ๆ ทไมมคาสงแทกเพมเตม ถามคาสงแทกเพมเตมโปรแกรมเวบเบราวเชอรจะทาการแสดงผลตามคาสงทมเพมเตมดวย

8. การแสดงเสนคนในแนวนอน

การแสดงเสนคนในแนวนอน (Horizontal Rule) เปนการใชคาสงเมอตองการแบงขอความบนจอภาพ การใชเสนคนหนาเอกสารเอชทเอมแอลสามารถชวยในการตกแตงเอกสารได อาจใชเปนเสนแบงเนอหาระหวางบท หรอเปนเสนขดคนเพอความสวยงามและเปนระเบยบของเนอหาโดยใชเสนคนทางแนวนอนขอจอภาพ ซงสามารถกาหนดตาแหนง ส ขนาดของความหนา ความยาว หรอกาหนดแบบเสนทบได โดยมรปแบบการใชคาสงดงน

คาสงแทก <hr> เปนคาสงทไมมคาสงแทกปด และมแอททรบวททสามารถกาหนดไดดงน

แอททรบวท ความหมาย align ใชสาหรบจดตาแหนงเสนตามคาตาแหนงการแสดงผลไดแก

1. left กาหนดใหแสดงเสนแนวนอนอยชดซายของหนาจอ 2. center กาหนดใหแสดงเสนแนวนอนใหอยกงกลางของหนาจอ 3. right กาหนดใหแสดงเสนแนวนอนชดขวาของหนาจอ

รปแบบคาสง <hr align = “ตาแหนงการแสดงผล ” width =“ คาความกวางเสนคน” size = “ขนาดเสน” color = “ ชอสหรอรหสสมาตราฐาน” >

98

แอททรบวท ความหมาย width การกาหนดความหนาของเสน มอย 2 รปแบบ

1. กาหนดคาเปนตวเลข โดยมหนวยวดเปน พกเซล 2. กาหนดเปนเปอรเซนตเทยบกบความกวางหนาจอภาพ

Size การกาหนดความหนาของเสน color การระบสของเสน สเสนสามารถกาหนดเปนชอสมาตรฐานใน

ระบบปฏบตการวนโดว หรอกาหนด เปนคาสเลขฐานสบหกกได noshade การกาหนดแสดงผลของเสนเปนเสนทบ (ไมแสดงเปนสามมต)

ตวอยางการใชคาสงแทก <hr> ภาพท 3.11

เมอแสดงผลโปรแกรมเวบเบราวเซอร จะปรากฏดงภาพท 3.11

ภาพท 3.11 แสดงผลการใชคาสงแทก <hr>

<html> <body> <h2> การแสดงเสนคนแนวนอน</h2> การแสดงเสนคนทไมกาหนดแอทรบวต <hr> การแสดงเสนคนทกาหนดแอทรบวต align = center width = "500" (หนวยเปน pixel) สนาตาล <hr align = "center" width = "500" color = " brown"> 

การแสดงเสนคนทกาหนดแอทรบวต align = left width = "80 %" และ size = "10" สแดง 

<hr align = "left" width = "70%" size = "10" color = "red"> การแสดงเสนคนทกาหนดแอทรบวต align = right color = "blue" และ size = "15" สนาเงน 

<hr align = "right" width = "50%" color = " blue " size = "15"> การแสดงเสนคนทกาหนดแอทรบวต noshade เสนทบ size = "15" <hr size= "15" noshade> </body> </html>

99

9. การแสดงลาดบรายการ การกาหนดเครองหมายหนาหวขอหรอเลขลาดบรายการ จะชวยใหการแสดงผลของขอมล

ในหนาเอกสารดเขาใจงายยงขน มการแบงขอมลออกเปนหมวดหมดสะอาดตาโดยการแสดงรายการใหเปนไปตามลาดบความสาคญ จะทาใหเอกสารจดเปนระเบยบสวยงาม อานไดงาย การแสดงรปแบบของหวขอเรองสามารถทาได 3 รปแบบ คอ

9.1 การแสดงรายการแบบไมมลาดบ (Unorder List หรอ Bullet List) การแสดงรายการแบบไมมลาดบ คอรายการทประกอบไปดวยสญลกษณตาง ๆ วางไวขางหนา โดยมคาสงแทก <ul> เปนคาสงทใชแสดงรายการโดยใชเครองหมายสญลกษณเปนตวแสดงนาหนาขอความโดยไมจาเปนตองเรยงตามลาดบกอน-หลง เพราะเปนการเรยงหวขอแบบไมมตวเลขระบไว มรปแบบการใชงาน ดงน 9.1.1 การแสดงรายการแบบไมมลาดบ ไมกาหนดเครองหมายสญลกษณ แต จะปรากฏเปนสญลกษณ ออกมาอตโนมต รปแบบการใชงาน ดงน

<html> <body> <h2> การแสดงรายการแบบไมมลาดบตวเลข</h2> <h2> ความพอเพยงจะตองประกอบดวย 3 คณลกษณะ</h2> <ul>

<li> ความพอประมาณ <li> ความมเหตผล <li> การมภมคมกนทดในตว

</ul> <h3>เงอนไขเศรษฐกจพอเพยง</h3> <ul>

<li> เงอนไขความร <li> เงอนไขคณธรรม </ul> </body> </html>

รปแบบคาสง <ul> <li> ขอความ................

<li> ขอความ................ <li> ขอความ................

<li> ขอความ................ </ul>

100

ภาพท 3.12 การแสดงรายการแบบไมมลาดบ ไมกาหนดเครองหมายสญลกษณ

9.1.2 การแสดงรายการแบบไมมลาดบ กาหนดเครองหมายสญลกษณ

แสดงรายการโดยใชเครองหมายสญลกษณเปนตวแสดงนาหนาขอความโดยไมจาเปนตองเรยงตามลาดบกอน-หลง มรปแบบการใชงาน ดงน

การกาหนดคาแอททรบวททใชสาหรบกาหนดคาของ รปแบบสญลกษณทจะนามาใชใน การลาดบรายการ ซงสามารถกาหนด ดงน

แอททรบวท ความหมาย type ชนดของเครองหมายมอย 3 แบบ ดงน

1. disc สญลกษณเปนวงกลมทบ (คาปกต) 2. circle สญลกษณเปนวงกลมโปรง 3. square สญลกษณเปนสเหลยมทบ

รปแบบคาสง <ul type = “ประเภทของสญลกษณ”> <li> ขอความ................

<li> ขอความ................ <li> ขอความ................ <li> ขอความ................ </ul>

101

เมอนาเสนอผานโปรแกรมเวบเบราวเชอรจะปรากฏดงภาพท 3.13

ภาพท 3.13 การแสดงรายการแบบไมมลาดบ กาหนดเครองหมายสญลกษณ

<html> <body> <h3> การแสดงรายการแบบไมมลาดบตวเลขใชเครองหมายสญลกษณ square </h3> <h3> ความพอเพยงจะตองประกอบดวย 3 คณลกษณะ</h3> <ul type = "square"> <li> ความพอประมาณ <li> ความมเหตผล <li> การมภมคมกนทดในตว </ul >

<h3>เงอนไขเศรษฐกจพอเพยง</h3> <ul type = "disc"> <li> เงอนไขความร <li> เงอนไขคณธรรม </ul>

<h3>ผลการปฏบตตามแนวทาง “เศรษฐกจพอเพยง”</h3> <ul type = "circle"> <li> บคคล <li> ครอบครว <li> องคกร <li> ชมชน <li> ประเทศชาต </ul> </body>

102

9.2 การแสดงรายการแบบเรยงลาดบ (Order List หรอ Number List) การสรางลาดบรายการแบบเรยงลาดบคอ รายการทประกอบไปดวยตวอกษรหรอ

ตวเลขทมการเรยงลาดบในการแสดงผลปรากฏอยหนาขอความทเปนรายการนน ๆ เปนขอมลทมการอธบายเปนขนตอน การลาดบรายการรปแบบนใชตวเลขหรอตวอกษรเปนเครองหมายในการลาดบรายการ โดยมคาสงแทก <ol> เปนคาสงทใชสาหรบแสดงรายการขอมลทตองการเรยงลาดบกอน-หลง โดยใชตวเลขหรอตวอกษรเปนตวกาหนดหวขอ มรปแบบการใชงานดงน

โดยมการกาหนดแอททรบวท กาหนดคณสมบต ดงตอตอไปน

แอททรบวท ความหมาย type ประเภทของสญลกษณทตองการ มตวอยางดงน

1 หมายถงตวเลขอารบก (คาปกต) เรยงลาดบ 1 2 3... A หมายถง พยญชนะภาษาองกฤษแบบตวพมพใหญ เรยงลาดบรายการ A, B, C a หมายถงพยญชนะภาษาองกฤษแบบตวพมพเลก เรยงลาดบรายการ a, b, c... I หมายถงตวเลขโรมนแบบตวพมพใหญ เรยงลาดบ I, II, III ... i หมายถงใชตวเลขโรมนแบบตวพมพเลกเรยงลาดบ i, ii, iii

start คาเรมตน หมายถง ตวเลขจานวนเตมทตองการกาหนดใหเรมตนกบหวขอแรก คาสงทใชในการแสดงรปแบบตวเลข และตวหนงสอ คอ คาสง <ol type= ... >

โดยปกต ถาไมระบแอททรบวท type=.... จะไดหมายเลข 1 เสมอ ถากาหนดให แอททรบวท start = 6 จะเรยงลาดบหมายเลขจาก 6, 7, 8...เปนตน

9.2.1 การใชคาสงกาหนดงรายการแบบเรยงลาดบ (Order List หรอ Number List) เพอนาเสนอขอมลเชน ขนตอนการทางาน สปดาหหนงม 7 วน การทาแบบทดสอบแบบปรนย ความพอเพยงจะตองประกอบดวย 3 คณลกษณะ เปนตน

รปแบบคาสง <ol type =ประเภทของสญลกษณ start = “คาเรมตน”>...หวขอเรอง.... <li> ขอความ................ <li> ขอความ................ <li> ขอความ................ <li> ขอความ................ <li> ขอความ................ </ol>

103


ภาพท 3.14 แสดงรายการแบบเรยงลาดบ

<html> <body> <h3> การแสดงรายการแบบไมมลาดบตวเลขใชเครองหมายสญลกษณ square </h3> <h3> ความพอเพยงจะตองประกอบดวย 3 คณลกษณะ</h3> <ol type = "1"> <li> ความพอประมาณ <li> ความมเหตผล <li> การมภมคมกนทดในตว </ol >

<h3>เงอนไขเศรษฐกจพอเพยง</h3> <ol type = "A"> <li> เงอนไขความร <li> เงอนไขคณธรรม </ol> </body>

104

9.2.2 การใชคาสง ol รวมกบคาสง start


ภาพท 3.15 แสดงรายการแบบเรยงลาดบรวมกบคาสง start 9.3 การแสดงรายการโดยกาหนดหวขอหรอขอความ (Definition List) การแสดงรายการโดยกาหนดหวขอหรอขอความ (Definition List) จะไมมการใช

สญลกษณตาง ๆ หรอ ตวเลขใด ๆ นาหนาขอความ แตจะแบงขอความออกเปนสองสวน สวนแรกจะเปนหวขอ และสวนทสองจะเปนคาอธบายหรอคาจากดความ มรปแบบการใชงาน ดงน

รปแบบคาสง <dl >.......หวขอเรอง........ <dt> …หวเรอง...<dd> <dt> …หวเรอง...<dd>

<dt> …หวเรอง...<dd> </dl>

<html> <body> <h3> การแสดงรายการแบบเรยงลาดบ </h3> <h3> ความพอเพยงจะตองประกอบดวย 3 คณลกษณะ</h3> <ol type = "1" start = "11" > <li> ความพอประมาณ <li> ความมเหตผล <li> การมภมคมกนทดในตว </ol > </body> </html>

105

ทาการแสดงผลลพธบนโปรแกรมเวบเบราวเชอรจะไดผลลพธดงน

ภาพท 3.16 แสดงรายการลาดบ กาหนดหวขอหรอขอความ

10. การกาหนดลกษณะตวอกษร กาหนดลกษณะตวอกษรในเวบเพจ สามารถกาหนดได 2 รปแบบ คอ 10.1 การกาหนดลกษณะตวอกษรอยางเจาะจง (Physical Styles) เปนการกาหนดรปแบบตวอกษรในขอความเอกสาร HTML ไดหลายรปแบบโดยจะไมมการเปลยนแปลง เปนคาสงเพอเนนขอความทอยระหวางคาสงแทก HTML หรออาจเรยกวา เปนการกาหนดลกษณะของตวอกษรโดยตรง ถงแมจะใชโปรแกรมเวบเบราวเชอรคนละโปรแกรมกตาม โดยมคาสงแทก ดงตอไปน

<html> <body> <h3> ความพอเพยงจะตองประกอบดวย 3 คณลกษณะ</h3> <dl> <dt> ความพอประมาณ <dd>หมายถง ความพอดไมนอยเกนไป ไมมากเกนไปหรอไมสดโตงไปขางใดขางหนงและตองไมเบยดเบยนตนเองและผอน <dt> ความมเหตผล<dd>หมายถง ทกการตดสนใจ การกระทา การลงทน ตองเปนไปอยางมเหตมผล คานงถงเหตปจจยทเกยวของและผลทคาดวาจะเกดขนอยางรอบคอบ <dt> การมภมคมกนทดในตว<dd>หมายถง การเตรยมตวใหพรอมทจะเผชญผลกระทบและการเปลยนแปลงดานตาง ๆ ทอาจเกดขนจากทงภายในและภายนอ </dl> </body> </html>

106

10.1.1 การแสดงตวอกษรตวหนา (Bold) คาสงใหเนนตวอกษรทอยระหวางคาสงใหเปนตวหนา เพอเนนใหรวาเปนขอมลทสาคญ หรอตองการใหเดนกวาขอความสวนอน ๆ ไดแก คาสงแทก โดยมรปแบบคาสงดงน


ภาพท 3.17 การแสดงตวอกษรตวหนา (Bold)

10.1.2 การแสดงตวอกษรตวเอยง (Italic ) คาสงใหเนนตวอกษรทอยระหวางคาสงใหเปนตวเอยงเพอเนนใหรเปนขอมลทนาสนใจ ไดแก คาสงแทก โดยมรปแบบคาสงดงน

<html> <head><title>การกาหนดรปแบบตวอกษร</title></head> <body> วสยทศน วทยาลยเกษตรและเทคโนโลยเชยงใหม มงเนนผลตนกศกษาโดยการนาเทคโนโลยมาใช เพอเพมประสทธภาพการจดการเรยนการสอนใหนกศกษามความ เปนเลศดานการผลตการเกษตร คดเปนทาเปน จาหนายเปน และมคณธรรมจรยธรรม </body> </html>

รปแบบคาสง ...ขอความ ... 

รปแบบคาสง ...ขอความ ... 

แสดงขอความทใชคาสงแทก

107

เมอแสดงผลผานโปรแกรมเวบเบราวเชอรดงภาพท 4.2

เมอแสดงผลผานโปรแกรมเวบบราวเซอร ดงภาพท 3.18

ภาพท 3.18 การแสดงตวอกษรตวเอยง (Italic)

10.1.3 การขดเสนใตตวอกษร (Under line) คาสงใหเนนตวอกษรทอยระหวางคาสงใหเปนตวขดเสนใต เพอเพมจดสงเกต ไดแก คาสงแทก โดยมรปแบบคาสงดงน

<html> <body> วสยทศน วทยาลยเกษตรและเทคโนโลยเชยงใหม มงเนนผลตนกศกษาโดยการนาเทคโนโลย มาใช เพอเพมประสทธภาพการจดการเรยนการสอนใหนกศกษามความ เปนเลศดานการผลตการเกษตร คดเปน ทาเปน จาหนายเปน และมคณธรรมจรยธรรม </body> </html>

<html> <head><title>การกาหนดรปแบบตวอกษร</title></head> <body>

วสยทศน วทยาลยเกษตรและเทคโนโลยเชยงใหม มงเนนผลตนกศกษาโดยการนาเทคโนโลยมาใช เพอเพมประสทธภาพการจดการเรยนการสอนใหนกศกษามความ เปนเลศดานการผลตการเกษตร คดเปนทาเปน จาหนายเปน และมคณธรรมจรยธรรม </body> </html>

รปแบบคาสง ...ขอความ ... 

แสดงขอความทใชคาสงแทก

108


ภาพท 3.19 แสดงขอความทใชคาสงแทก 

10.1.4 การขดเสนทบตวอกษร (Strike) เปนคาสงใหเนนตวอกษรทอยระหวางคาสงใหเปนตวอกษรขดฆาหรอขดเสนทบตวอกษร จะนยมใชในการยกเลก หรอแสดงถงการปฏเสธตอขอมลทไมตองการ ไดแก คาสงแทก <s> โดยมรปแบบคาสงดงน


ภาพท 3.20 การขดเสนทบตวอกษร (Strike)

<html> <head><title>การกาหนดรปแบบตวอกษร</title></head> <body> แพคเกจรานคาออนไลน คาจดทาเวบไซต <s> 2,000 บาท </s> ลดเหลอ 1,500 บาท คาจดโดเมนเนม <s> 600 บาท </s> พเศษเหลอ 300 บาท </body> </html>

รปแบบคาสง <s> ...ขอความ ... </s>

แสดงขอความทใชคาสงแทก

109

10.1.5 การกาหนดขอความเปนตวพมพดด (Typewriter Text) คาสงใหเนนตวอกษรปกตทอยระหวางคาสงใหเปนอกษรแบบพมพดด มกใชกบขอความทตองการใหดเปนทางการ และเปนระเบยบ ไดแก คาสงแทก <tt> โดยมรปแบบคาสงดงน


ภาพท 3.21 แสดงขอความทใชคาสงแทก <tt>

<html> <head><title>การกาหนดรปแบบตวอกษร</title></head> <body> วสยทศน <tt> วทยาลยเกษตรและเทคโนโลยเชยงใหม มงเนนผลตนกศกษาโดยการนาเทคโนโลยมาใช เพอเพมประสทธภาพการจดการเรยนการสอนใหนกศกษามความ เปนเลศดานการผลตการเกษตร คดเปนทาเปน จาหนายเปน และมคณธรรมจรยธรรม</tt> เปาประสงค ผเรยนทกคนมความรมทกษะวชาชพ สามารถประยกตใชเทคโนโลยทเหมาะสมกบวชาชพ มคณธรรมจรยธรรม ตระหนกถงการอนรกษธรรมชาตสงแวดลอมและวฒนธรรมประเพณทองถน </body> </html>

รปแบบคาสง <tt> ...ขอความ ... </tt>

แสดงขอความทใชคาสงแทก <tt>

110

10.1.6 การกาหนดขอความเปนตวยก (SuperScript ) คาวาตวยก หรอ ดรรชนบน คออกขระใดๆ ทเขยนในระดบสงกวาระดบบรรทดปกต ในภาษา HTML คาสงใหเนนตวอกษรทอยระหวางคาสงใหตวอกษรเปนตวยก เปนรปแบบของขอความทมกพบบอยในการทางานดานสตรคณตศาสตร การคานวณ และสตรเคม ไดแก คาสงแทก โดยมรปแบบคาสงดงน


ภาพท 3.22 การกาหนดขอความเปนตวยก ( Superscript)

10.1.7 กาหนดขอความเปนตวหอย ( Subscript )

ตวหอย หรอ ดรรชนลาง คอ อกขระใดๆ ทเขยนในระดบตากวาระดบบรรทดปกตคาสงใหเนนตวอกษรทอยระหวางคาสงใหตวอกษรเปนตวหอยเปนรปแบบของขอความทมกพบบอยในการทางานดานสตรวทยาศาสตรทางเคม สตรคณตศาสตร เชน กลโคสประกอบดวยอะตอมของ คารบอน 6 ตว ไฮโดรเจน 12 ตว และ ออกซเจน 6 ตว และ มสตรเคม คอ C6H12O6 ไดแก คาสงแทก โดยมรปแบบคาสงดงน

รปแบบคาสง ...ขอความ ... 

<html> <head><title>การกาหนดรปแบบตวอกษร</title></head> <body> X2+2xy+y2 32+23=17 </body> </html>

รปแบบคาสง ...ขอความ ...

111


ภาพท 3.23 กาหนดขอความเปนตวหอย ( Subscript )

10.1.8 การกาหนดขอความใหเลกลง (small) คาสงใหเนนตวอกษรทอยระหวางคาสงใหตวอกษรเปนตวอกษรขนาดเลก กวาเดม เพอไมอยากใหสนใจมากนก เพราะไมใชเนอหาหลก แตเปนแคประเดนเสรมเทานน ไดแกคาสงแทก โดยมรปแบบคาสงดงน

<html> <head><title>การกาหนดรปแบบตวอกษร</title></head> <body> วสยทศน วทยาลยเกษตรและเทคโนโลยเชยงใหม มงเนนผลตนกศกษาโดยการนาเทคโนโลยมาใช เพอเพมประสทธภาพการจดการเรยนการสอนใหนกศกษามความ เปนเลศ ดานการผลตการเกษตร 

คดเปนทาเปน จาหนายเปน และมคณธรรมจรยธรรม </body> </html>

รปแบบคาสง ...ขอความ ... 

<html> <head><title>การกาหนดรปแบบตวอกษร</title></head> <body> H2O St = ความแปรปรวนของคะแนน E1 /E2 คอ การหาคาประสทธภาพของชดการเรยน </body> </html>

112


ภาพท 3.24 แสดงขอความทใชคาสงแทก small

10.1.9 การกาหนดขอความใหใหญขน คาสงแทก <big> เปนคาสงใหเนนตวอกษรทอยระหวางคาสงใหตวอกษรเปนตวอกษรขนาดใหญกวาปกต เพอตองการใหขอความบางสวนเนนให ดเดน หรอเปนหวขอในเนอหาสวนนน ไดแก คาสงแทก <big> โดยมรปแบบคาสงดงน


ภาพท 3.24 แสดงขอความทใชคาสงแทก small

<html> <head><title>การกาหนดรปแบบตวอกษร</title></head> <body> วสยทศน <big> วทยาลยเกษตรและเทคโนโลยเชยงใหม</big> มงเนนผลตนกศกษาโดยการนาเทคโนโลยมาใช 

เพอเพมประสทธภาพการจดการเรยนการสอนใหนกศกษามความ เปนเลศดานการผลตการเกษตร คดเปนทาเปน จาหนายเปน และมคณธรรมจรยธรรม

</body> </html>

รปแบบคาสง <big> ...ขอความ ... </big>

แสดงขอความทใชคาสงแทก <Big>

113

ภาพท 3.25 การกาหนดขอความใหใหญขน คาสงแทก , , , <big> สามารถนาคาสงมาซอนกนได เพอให การกาหนดคามากขนกวาเดม เชน <big> วทยาลยเกษตรและเทคโนโลยเชยงใหม</big> กบ <big><big> วทยาลยเกษตรและเทคโนโลยเชยงใหม</big></big> คาวา วทยาลยเกษตรและเทคโนโลยเชยงใหม ตวทสองจะมขนาดใหญหวาตวแรก เชนกน หรอ คาสง ถาเพมคาสง อกหนงคาสง ตวอกษรกจะมขนาดเลกลงกวาเดม การใชคาสงแทก<big> และการใชคาสงแทก


ภาพท 3.26 การแสดงการใชคาสงแทก <big >และ 

<html> <head><title>การกาหนดรปแบบตวอกษร</title></head> <body> วสยทศน <big><big> วทยาลยเกษตรและเทคโนโลยเชยงใหม</big></big> <big> วทยาลยเกษตรและเทคโนโลยเชยงใหม</big> มงเนนผลตนกศกษาโดยการนาเทคโนโลยมาใช เพอเพมประสทธภาพการจดการเรยนการสอนใหนกศกษามความ เปนเลศดานการผลตการเกษตร 

คดเปนทาเปน จาหนายเปน และมคณธรรม จรยธรรม 

</body> </html>

แสดงขอความทใชคาสงแทก 

หนงคาสง

แสดงขอความทใชคาสงแทก <big>

สองคาสง

แสดงขอความทใชคาสงแทก 

สองคาสง

แสดงขอความทใชคาสงแทก <big> หนง

คาสง

114

10.2 การกาหนดลกษณะตวอกษร แบบตามลกษณะงาน (Logical Styles ) เปนการกาหนดรปแบบตวอกษรตามความหมายของขอความ ไดแก

10.2.1 การกาหนดขอความทอยระหวางขอความใหเปนตวเอยง (Emphasis) ใชเนนขอความคาพดหรอวล

10.2.2 การกาหนดขอความทอยระหวางขอความใหเปนตวหนา (Strong) เปนการเนนขอความทสาคญ

10.2.3 การกาหนดขอความทอยระหวางขอความใหเปนตวอกษรระบบคอมพวเตอร ( Computer Code)

10.2.4 การกาหนดขอความทอยระหวางขอความ สาหรบเนนขอความเกยวกบคาพด คาสนทนา

10.2.5 การกาหนดขอความทอยระหวางขอความ สาหรบเนนขอความทเปนคานยาม

10.2.6 การกาหนดขอความทอยระหวางขอความ สาหรบใชเนนขอความทถกเปลยนแปลง

10.2.7 การกาหนดขอความทอยระหวางขอความ สาหรบใชเนนขอความทเปน

10.2.8 การกาหนดขอความทอยระหวางขอความ สาหรบใชเนนขอความทมลกษณะเหมอนแปนพมพ

รปแบบคาสง <kbd> ...ขอความ ... </kbd>

รปแบบคาสง <samp> ...ขอความ ... </samp>

รปแบบคาสง <var> ...ขอความ ... </var>

รปแบบคาสง <dfn> ...ขอความ ... </dfn>

รปแบบคาสง <cite> ...ขอความ ... </cite>

รปแบบคาสง <code> ...ขอความ ... </code>

รปแบบคาสง ...ขอความ ... 

รปแบบคาสง ...ขอความ ...

115

10.2.9 การกาหนดขอความทอยระหวางขอความ สาหรบกาหนดขอความใหกบชอและทอย

10.2.10 การกาหนดขอความทอยระหวางขอความ สาหรบกาหนดคายอจากอกษร แรกของแตละคา


แอททรบวท ความหมาย title เปนคาสงทใชในการกาหนดชอเตมของคายอ

title คอ การกาหนดใหแสดงชอเตมของอกษรยอ 10.2.11 การกาหนดขอความทอยระหวางขอความ สาหรบแสดงตวอกษรยอนกลบ


แอททรบวท ความหมาย dir เปนคาสงทใชในการกาหนดเขยนตวอกษรยอนกลบ 1. ltr คอ left to right เขยนจากซายไปขวา 2. rtl คอ right to left เขยนจากขาวไปซาย

<html> <head><title>การกาหนดรปแบบตวอกษร</title></head> <body> em = ใชเนนขอความคาพดหรอวล strong = ขอความทสาคญมาก <code> code = ขอความทเนนโคดโปรแกรม</code> <cite> cite = ขอความทอางองถงแหลงทมาของเนอหา</cite> <dfn> dfn = ขอความทเปนคานยาม</dfn> <samp> samp = ขอความทเปนตวอยาง</samp> <address> 249 หม 11 ตาบลบานกลาง อาเภอสนปาตอง </address> <var> var = ใชเนนขอความทถกเปลยนแปลง</var> <bdo dir =rtl>chaingmai</bdo> 

<acronym title =" วทยาลยเกษตรและเทคโนโลยเชยงใหม "> วษท. </acronym > 

</body> </html>

รปแบบคาสง <bdo dir= รปแบบอกษรยอนกลบ> ...ขอความ ... </ bdo >

รปแบบคาสง <acronym title = ชอเตม> ...ขอความ ... </acronym>

รปแบบคาสง <address > ...ขอความ ... </address>

116

ซงผลจาการเปดโปรแกรมเวบเบราวเชอรจะแสดงผล ตามภาพท 3.27 สงเกตคาสง <bdo dir =rtl>chaingmai</bdo> นนเมอแสดงออกมาคาวา chaingmai ตวอกษรจะเขยนกลบกนเปน iamgniahc และ คาสงแทก <acronym title = “วทยาลยเกษตรและเทคโนโลยเชยงใหม ”> วษท. </acronym>ผลลพธจะเปน วษท. แตเมอนาเมาสมาวางบนคาวา วษท. จะปรากฏชอเตมลอยขนมา ซงชอเตมนคอคาทกาหนดในแอททรบวท title นนเอง

ซงจรงแลวนน ผลลพธออกมากเหมอนกน เชน คาสงแทก ใหผลลพธ เหมอนกบคาสงแทกเราจะเลอกใชแบบใดกได แตเราแยกเพอความสะดวกในการใชงานมากกวา ตวอยางการกาหนดลกษณะตวอกษร แบบตามลกษณะงาน (Logical Styles

ภาพท 3.27 การแสดงผลกาหนดลกษณะตวอกษร แบบตามลกษณะงาน (Logical Styles )

11. การปรบเปลยนขนาดตวอกษร

การกาหนดขนาดของตวอกษรในเวบเพจนน เราสามารถกาหนดขนาดของตวอกษรไดอย 2 รปแบบคอ

11.1 กาหนดเปนตวเลข เปนการกาหนดขนาดตวอกษรตงแต 1 คอตวอกษรขนาดเลกสด จนถง 7 คอ ตวอกษรทมขนาดใหญทสด โดยคามาตรฐานจะมคาจะอยท 3 คาตวเลขทเปน 1 และ 2 นนจะเปนการยอขนาดของตวอกษร และคาตวเลข 4 ถง 7 นนจะเปนการขยายขนาดของตวอกษร โดยมรปแบบคาสงดงน

โดยมการกาหนดแอททรบวท กาหนดคณสมบต ดงตอไปน

แอททรบวท ความหมาย size เปนคาสงทใชในการกาหนดขนาดตวอกษร

คาตวเลขมขนาดตงแต 1-7

รปแบบคาสง ...ขอความ ...

117


ภาพท 3.28 แสดงผลการกาหนดขนาดตวอกษร

11.2 กาหนดโดยใชเครองหมายบวกและเครองหมายลบ โดยสามารถกาหนดไดดงน เปนการยอขนาดของตวอกษรนนจะใชเครองหมายลบ ซงจะใชไมเกน – 2 ถาเปน การขยายขนาดของตวอกษรนนจะใชเครองหมายบวกซงจะใชไมเกน + 4


แอททรบวท ความหมาย Size เปนคาสงทใชในการกาหนดขนาดตวอกษร

เครองหมาย + คอ การเพมขนาดตวอกษร เครองหมาย - คอ การลดขนาดตวอกษร

รปแบบคาสง ...ขอความ ...

<html> <head> <title>การกาหนดรปแบบตวอกษร</title> </head> <body> คาขวญ อกท.ชาต คอ รวมพลงสรางชาต คาขวญ อกท.ชาต คอ รวมพลงสรางชาต คาขวญ อกท.ชาต คอ รวมพลงสรางชาต คาขวญ อกท.ชาต คอ รวมพลงสรางชาต คาขวญ อกท.ชาต คอ รวมพลงสรางชาต คาขวญ อกท.ชาต คอ รวมพลงสรางชาต คาขวญ อกท.ชาต คอ รวมพลงสรางชาต </body> </html>

118


ภาพท 3.29 การแสดงผลโดยใชเครองหมายบวกและเครองหมายลบ

12. การกาหนดแบบตวอกษร

การกาหนดรปแบบตวอกษรหรอ กาหนดฟอนต เปนคาสงการกาหนดรปแบบตวอกษรใหเปนตามตองการ ซงสามารถกาหนดรปแบบตวอกษรได 2 รปแบบคอ 12.1 การกาหนดแบบตวอกษรเฉพาะขอความทตองการ โดยมรปแบบคาสงดงน

คาสงแทก font มแอททรบวท คอ face ใชสาหรบในการกาหนดรปแบบตวอกษร ซงในการกาหนดรปแบบตวอกษรโดยการใชชอแบบตวอกษรนน ๆ ควรจะกาหนดชอทมอยในมาตรฐานระบบปฏบตการวนโดวส (Windows) และหากมการใชรปแบบอกษรทเปนภาษาไทย กควรจะใชชอรปแบบตวอกษรทอยในระบบปฏบตวนโดว ดวย

รปแบบคาสง ...ขอความ ... 

<html> <head><title>การกาหนดขนาดตวอกษร</title></head> <body> คาขวญ อกท.ชาต คอ รวมพลงสรางชาต คาขวญ อกท.ชาต คอ รวมพลงสรางชาต คาขวญ อกท.ชาต คอ รวมพลงสรางชาต คาขวญ อกท.ชาต คอ รวมพลงสรางชาต คาขวญ อกท.ชาต คอ รวมพลงสรางชาต คาขวญ อกท.ชาต คอ รวมพลงสรางชาต </body> </html>

119

แตเพอใหโปรแกรมเวบเบราวเชอรสามารถเปดอานเอกสารภาษา HTML ไดควรกาหนด

รปแบบตวอกษรลงทายดวย UPC หรอ Sans Serif เชน AngsanaUPC, BrowalliaUPC เมอแสดงผลผานโปรแกรมเวบเบราวเซอร ดงภาพท 3.30

ภาพท 3.30 การแสดงผลการกาหนดรปแบบตวอกษร

จากภาพท 3.30 เปนการแสดงผลการกาหนดรปแบบตวอกษรทเปนรปแบบตวอกษรภาษาไทย ซงมอยในระบบปฏบตการวนโดว

ถาหากกาหนดรปแบบเฉพาะบรรทดเดยวโปรแกรมเวบเบราวเชอรกจะแสดงรปแบบตวอกษรเพยงบรรทดเดยวเชนกน สวนบรรทดทเหลอจะแสดง รปแบบตวอกษรมาตรฐานระบบปฏบตการวนโดวสแทน ดงตวอยางภาพท 3.31

<html> <body> วทยาลยเกษตรและเทคโนโลยเชยงใหม

 249 หม 11 ตาบลบานกลาง อาเภอสนปาตอง จงหวดเชยงใหม เวบไซต http://www.cmcat.ac.th E-mail >> apichak@hotmail </body>

<html> <head><title>การกาหนดรปแบบตวอกษร</title></head> <body> รปแบบตวอกษร Cordia New วทยาลยเกษตรและเทคโนโลยเชยงใหม รปแบบตวอกษร Microsoft Sans Serif วทยาลยเกษตรและเทคโนโลยเชยงใหม รปแบบตวอกษร AngsanaUPC วทยาลยเกษตรและเทคโนโลยเชยงใหม รปแบบตวอกษร TH SarabunPSK วทยาลยเกษตรและเทคโนโลยเชยงใหม </body> </html>

120

สวนบรรทดทเหลอจะแสดง รปแบบตวอกษรมาตรฐานระบบปฏบตการวนโดวสแทน

ภาพท 3.31 การแสดงรปแบบตวอกษรบรรทดเดยว

12.2 การกาหนดแบบอกษรทงหมด โดยมรปแบบคาสงดงน

คาสงแทก basefont เปนคาสงทใชกาหนดรปแบบลกษณะของตวอกษรใหเหมอนกนทงหมด มแอททรบวท คอ face ใชสาหรบในการกาหนดชนดของรปแบบตวอกษร (font)ในการเขยนเอกสารเวบเพจจะกาหนดรปแบบตวอกษรเฉพาะบรรทดแรกเทานน บรรทดตอไปไมตองกาหนด โปรแกรมเวบเบราวเชอรจะแสดงผลเหมอนกนทงหมด


ภาพท 3.32 การแสดงการกาหนดแบบอกษรทงหมด

<html> <head><title>การกาหนดรปแบบตวอกษร</title></head> <body> <basefont face ="DSU_DokYa"> วทยาลยเกษตรและเทคโนโลยเชยงใหม 249 หม 11 ตาบลบานกลาง อาเภอสนปาตอง จงหวดเชยงใหม เวบไซต http://www.cmcat.ac.th E-mail >> apichak@hotmail </body> </html>

รปแบบคาสง <basefont face = “ รปแบบตวอกษร” > ...ขอความ ...

121

13. การใชตวอกขระพเศษ

ตวอกขระพเศษ คอ ตวอกษรทไมมบนแปนพมพ เชน ® จงตองใชวธการเรยกใชโดยใชรหส หรอการเรยกใชชอ เชน สญลกษณเครองหมายมากวา (>) หรอสญลกษณเครองหมายนอยกวา (<) ซงสญลกษณ เครองหมายเหลานใชในภาษาเอชทเอมแอล ดวยทาใหตวอกษรทอยในเครองหมายเหลานกลายเปนแทกหมด การแสดงอกขระพเศษจะตองใชคาสงรปแบบพเศษเพอแสดงอกขระแตละอกขระ โดยรปแบบของการแสดงจะขนตนดวยเครองหมาย & และลงทายดวยเครองหมาย ; ตามตารางท 3.1 สญลกษณอกขระพเศษ

ตารางท 3.1 สญลกษณอกขระพเศษ สญลกษณ รายละเอยด รปแบบคาสง

เครองหมายเวนวรรค &nbsp < เครองหมายนอยกวา &gt > เครองหมายมากกวา &lt “ เครองหมายคาพด &quot © เครองหมายการคา &copy

™ เครองหมาย ™ &#153 ® เครองหมายการคา &reg ¥ เครองหมาย สกลเงนของประเทศญปน &yen £ เครองหมาย สกลเงนของประเทศองกฤษ &pound ¢ เครองหมาย สกลเงน &cent ๐ เครองหมาย องศา &deg & เครองหมาย แอมเพอรแซนด &amp ¶ เครองหมาย พลโครว &para ± เครองหมาย แดกเกอร &plusmn ¬ เครองหมาย บาร หรอ นเสธ &not · เครองหมายบลเลต &middot ¿ เครองหมาย ปรศนกลบหว &iquest « เครองหมายกลเลอเมต &laquo § เครองหมาย เซกชน § ∑ เครองหมาย ซกมา ∑

½ เครองหมาย ½ &frac12 × เครองหมายคณ &times ÷ เครองหมายหาร ÷

ทมา: กตต ภกดวฒนะกล, 2549 :40

122


ภาพท 3.33 การแสดงผลการใชตวอกขระพเศษ

<html> <head><title>การใชอกขระพเศษ</title></head> <body> เครองหมายเวนวรรค &nbsp เครองหมายนอยกวา = > เครองหมายมากกวา = < เครองหมายลขสทธ = © เครองหมาย cent = ¢ สญลกษณสกลเงนของประเทศองกฤษ = £ สญลกษณสกลเงนของประเทศญปน = ¥ เครองหมาย องศา = ° เครองหมาย การคา = ® เครองหมาย การคา = เครองหมาย ampersand = & เครองหมายคณ =× เครองหมายหาร =÷ เครองหมายเศษสวน =½ เครองหมายคาพด =" เครองหมายซกมา =∑ </body> </html>

123

บางเวบเบราวเชอรบางโปรแกรม ไมจาเปนตองมการลงทายดวยเครองหมาย ; กได โปรแกรม Internet Explorer คาสงแทก ∑ ตองมการลงทายดวยเครองหมาย ; แตคาสงแทกอน ๆ ไมตองมกได

14. การกาหนดตวอกษรวง (Marquee)

การกาหนดตวอกษรวง เปนคาสงทใชสาหรบกาหนดใหตวอกษรวง ทาใหตวอกษรมความนาสนใจมากยงขน โดยมรปแบบการกาหนดใหตวอกษรวงดงน

14.1 การกาหนดแนวทางการวงของขอความ โดยมรปแบบคาสงดงน


แอททรบวท ความหมาย behavior เปนคาสงทใชในการกาหนดแนวทางการวงของขอความ

รปแบบแนวทางการวงของขอความ ม 3 แบบ ดงน alternate คอ ใหขอความวงจากขอบซายมาขอบขวา เมอถงขอบขวาก

ให วงกลบไปทางซาย วงกลบไปกลบมา scroll คอ ใหขอความวงจากขวามาซาย เมอถงขอบซาย กใหขอความวง

ออกมาจากขวาใหม (เปนคาปกตถาไมมการกาหนดอะไรจะไดแบบน) slide คอ ใหขอความวงจากขวามาซาย เมอถงขอบซายแลวจะหยดนง

ไมวงไปไหนอก



<marquee behavior = alternate> คาขวญ อกท.ชาต คอ รวมพลงสรางชาต </marquee>

<marquee behavior = scroll> คาขวญ อกท.ชาต คอ รวมพลงสรางชาต</marquee>

<marquee behavior = slide> คาขวญ อกท.ชาต คอ รวมพลงสรางชาต</marquee>

</body> </html>

รปแบบคาสง <marquee behavior = รปแบบแนวทางการวง >...ขอความ...

124

ภาพท 3.34 การกาหนดแนวทางการวงของขอความ

14.2 การกาหนดทศทางการวงของขอความ

ขอความวง (Marquee) เปนการทาใหขอความเคลอนทไดในขณะทแสดงผลในเวบเพจนน ๆ โดยจะเปนการกาหนดใหขอความทตองการวงอยในกรอบสเหลยม ขอความวงจะชวยใหเวบเพจดนาสนใจ สะดดใจ ตาผชมซงเหมาะสมกบการนามาใชเนนขอความทตองการ


แอททรบวท ความหมาย direction เปนคาสงทใชในการกาหนดทศทางการวงของขอความ

ทศทางการวงของขอความ ม 2 แบบ ดงน 1. right คอ ใหขอความวงจากทางซายมาทางขวา 2. left คอ ใหขอความวงจากทางขวามาทางซาย



<marquee direction ="right"> คาขวญ อกท.ชาต คอ รวมพลงสรางชาต</marquee> <marquee direction ="left"> คาขวญ อกท.ชาต คอ รวมพลงสรางชาต</marquee>

</body> </html>

รปแบบคาสง <marquee direction = “ทศทางการวง” >...ขอความ...</marquee>

ตวหนงสอจะวงกลบไปกลบมา

ตวหนงสอวงไปซายแลวออก แลวออกจากขอบขวาใหม

ขอบซายแลวจะหยดนง ไมวงไปไหนอก

125

ภาพท 3.35 การกาหนดทศทางการวงของขอความ

14.3 การกาหนดสพนใหกบขอความทวง โดยมรปแบบคาสงดงน

แอททรบวท ความหมาย bgcolor เปนคาสงทใชในการกาหนดสพนใหกบขอความทวง

กาหนดเปนชอสมาตรฐานในระบบปฏบตการวนโดว หรอกาหนด เปนคาสเลขฐานสบหกกได

การกาหนดคาสนนสามารถกาหนดโดยระบชอสโดยตรง เชน black, white, blue, green,... เปนตน แตการกาหนดแบบนจะไมสามารถระบความเขมแบบไลเฉดสได จงไดใชคาสเปนตวเลขฐานสบหก (Hexadecimal format) โดยกาหนดเปนคาสของแสง RGB แตละสประกอบดวยเลข 2 หลก


รปแบบคาสง <marquee bgcolor = “ ชอของรหสส ” >...ขอความ...</marquee>


<marquee bgcolor =" pink"> คาขวญ อกท.ชาต คอ รวมพลงสรางชาต </marquee> <marquee bgcolor = "#ffcc00"> คาขวญ อกท.ชาต คอ รวมพลงสรางชาต</marquee>

</body> </html>

ตวหนงสอวงจากทางซายมาทางขวา

ขอความวงจากทางขวามาทางซาย

126

ภาพท 3.36 การกาหนดสพนใหกบขอความ

บทสรปทายหนวยท 3

การจดรปแบบขอความดวยภาษาเอชทเอมแอล เปนการจดรปแบบเพอใหสามารถแสดงเอกสารเวบเพจ ดวยโปรแกรมเวบเบราวเชอรรวมถงการจดเอกสารใหดสวยงามเปนสดสวน โดยมการจดการเอกสารดงน การขนบรรทดใหมของขอความ การขนยอหนาใหมของขอความ กาหนดรปแบบขอความทเปนหวเรอง การแสดงชองวางตามทกาหนด การแสดงขอความตามรปแบบทกาหนด การแสดงเสนคนในแนวนอน การแสดงลาดบรายการ ซงสามารถนาไปพฒนาเวบเพจไดเปนอยางด

ตวหนงสอวงพน สชมพ

ตวหนงสอวงพน สชมพ

127

แบบทดสอบหลงเรยน หนวยท 3 การจดรปแบบขอความดวยภาษา HTML

คาชแจง เลอกคาตอบทถกเพยงขอเดยวลงในกระดาษคาตอบ 1. โปรแกรมทแสดงผลตามคาสงของภาษา HTML เปนหลกคอขอใด

ก. โปรแกรมเวบเบราวเชอร ข. โปรแกรมอดตเตอร ค. โปรแกรมไมโครซอฟตวนโดว ง. โปรแกรมไมโครซอฟตวอรด

2. คาสงแทกสาหรบการขนบรรทดใหมของขอความ ก. คาสงแทก ข. คาสงแทก ค. คาสงแทก < body> ง. คาสงแทก < bgcolor>

3. ขอใดคอการใชคาสงสาหรบกาหนดยอหนาของขอความจดตาแหนงใหอยกงกลางหนาเวบเพจ ก. การเขยนเวบเพจ ข. การเขยนเวบเพจ ค. <pr align = "center" > การเขยนเวบเพจ ง. <pre align = "center" > การเขยนเวบเพจ

4. ขอใดเปนการใชคาสงแทกสาหรบกาหนดหวเรองทมขนาดใหญมากทสด และจดใหอยกงกลางหนาจอภาพ

ก. <h1 type = "center" > ความรเกยวกบเวบเพจ</H1> ข. <h1 align = "center" > ความรเกยวกบเวบเพจ</H1> ค. <h6 type = "center" > ความรเกยวกบเวบเพจ</H6> ง. <h6 align = "center" > ความรเกยวกบเวบเพจ</H6>

5. คาสงทใชกาหนดการแสดงชองวางขอความ ก. < > ข. < > กดปม Enter ค. < > กดปม Space bar ง. กดปม Space bar ทละ1 ครง

6. การกาหนดขอความตามรปแบบทกาหนดสาหรบการแสดงผลบนโปรแกรมเวบเบราวเชอรเพอการจดรปแบบขอความใหตรงตามเอกสารเดมตรงกบขอใด

ก. คาสงแทก ข. คาสงแทก ค. คาสงแทก < pre> ง. คาสงแทก <pre bgcolor>

7. คาสงแทก ทใชในการจดขอความกงกลางหนาเวบเพจทงเอกสารคอขอใด

128

ก. < center> หนวยเชยงใหม </center> ข. <body align = center> หนวยเชยงใหม </center> ค. <head align = center> หนวยเชยงใหม </center> ง. <title align = center> หนวยเชยงใหม </center>

8. คาสงแทกสาหรบการแสดงเสนคนใหชดขอบขวา ความกวางเปนรอยละ 50 ของจอภาพ และมความหนาของเสนคนเทากบ 15 แสดงเสนใหเปนสนาเงน ตรงกบขอใด

ก. <hr type = “right” width = “50%“ color = blue size = “15” > ข. <hr align = “right” width = “50%“ color = blue size = “15” > ค. <href align = “right” width = “50%“ color = blue size = “15”> ง. <hr valign =“ right” width = “50%“ color = blue size = “15” >

ภาพสาหรบใชประกอบเปนคาตอบถามขอท 9

9. จากภาพการใชคาสงแทกทาใหการแสดงผลขอความตรงกบขอใด

ก.

ข.

ค.

ง. ภาพสาหรบใชประกอบเปนคาถามขอท10


ก. <dl ><dt> ภาษา HTML<dd>HTML ยอมาจากคาวา Hyper Text Markup Language</dl> ข. <li ><dt> ภาษา HTML<dd>HTML ยอมาจากคาวา Hyper Text Markup Language</dl> ค. <ol ><dt> ภาษา HTML<dd>HTML ยอมาจากคาวา Hyper Text Markup Language</ol> ง. <ul ><dt> ภาษา HTML<dd>HTML ยอมาจากคาวา Hyper Text Markup Language</ul>

129

11. ขอใดคาสงใหเนนตวอกษรทอยระหวางคาสงใหเปนตวเอยง ก. คาสงแทก การเขยนเวบเพจ ข. คาสงแทก การเขยนเวบเพจ ค. คาสงแทก การเขยนเวบเพจ จ. คาสงแทก การเขยนเวบเพจ 

12. ซอคอมพวเตอร 1 เครองจาก ราคา 20,000 คงเหลอราคา 18,900 บาท ตรงกบคาสงแทกขอใด ก. ซอคอมพวเตอร 1 เครองจาก ราคา 20,000 คงเหลอราคา 18,900 บาท ก. ซอคอมพวเตอร 1 เครองจาก < ราคา 20,000 คงเหลอราคา 18,900 บาท ก. ซอคอมพวเตอร 1 เครองจาก <s> ราคา 20,000 </s>คงเหลอราคา 18,900 บาท ก. ซอคอมพวเตอร 1 เครองจาก ราคา 20,000 คงเหลอราคา 18,900 บาท

13. ขอใดคอการแสดงผลของการใชคาสง C2 H6O12 ก. C2HO12

ข. C2H6O12

ค. C6H12Ov ง. C2H12O6

14. ขอใดคอคาสงทใชในการกาหนดคายอจากอกษรแรกของแตละคา ก. <bdo title = “Hyper Text markup language ”> html </bdo > ข. <samp title = “Hyper Text markup language ”> html </samp > ค. <address title = “Hyper Text markup language ”> html </address > ง. <acronym title = “Hyper Text markup language ”> html </acronym >

15. ขอใดคอคาสงแทกสาหรบการกาหนดขนาดตวอกษร เปนคามาตรฐาน ก. เวบไซต (Web Site) ข. เวบไซต (Web Site) ค. เวบไซต (Web Site) ง. เวบไซต (Web Site) 16. ขอใดใชคาสงแทกกาหนดขนาดตวอกษรถกตอง ก. เวบไซต (WebSite) ข. เวบไซต (WebSite) ค. เวบไซต (WebSite) ง. เวบไซต (WebSite) 

17. ขอใดใชคาสงแทกกาหนดแบบตวอกษรไดถกตอง ก. คอมพวเตอรธรกจ ข. คอมพวเตอรธรกจ ค. “คอมพวเตอรธรกจ” ง. คอมพวเตอรธรกจ

130

18. ขอใดคอคาสงแทกสาหรบกาหนดแบบตวอกษรเหมอนกนทงหมด ก. Homepage ข. <basefont face = “AnsanaNew” > Homepage ค. Homepage ง. <basefont face = AnsanaNew > Homepage 

19. คาสงแทก &frac23; แสดงขอความตรงกบขอใด ก.

32

ข. 2 3 ค. 23

ง. 2

3

20. ขอใดคอการใชกาสงในการใหอกษรวงตามทศทางใหขอความวงจากขวามาซาย

ก. <marquee behavior = left>หลกปรชญาเศรษฐกจพอเพยง</marquee>

ข. <marquee direction = right >หลกปรชญาเศรษฐกจพอเพยง</marquee>

ค. <marquee behavior = right >หลกปรชญาเศรษฐกจพอเพยง</marquee> ง. <marquee behavior = alternate>หลกปรชญาเศรษฐกจพอเพยง</marquee>

131

เฉลยแบบทดสอบกอนเรยน หนวยท 2 หลกการเขยนเวบเพจดวยHTML

ขอท 1 ก ขอท 11 ก ขอท 2 ก ขอท 12 ข ขอท 3 ก ขอท 13 ก ขอท 4 ข ขอท 14 ข ขอท 5 ง ขอท 15 ก ขอท 6 ค ขอท 16 ค ขอท 7 ก ขอท 17 ก ขอท 8 ก ขอท 18 ข ขอท 9 ข ขอท 19 ง ขอท 10 ก ขอท 20 ก

เฉลยแบบทดสอบหลงเรยน

ขอท 1 ข ขอท 11 ก ขอท 2 ค ขอท 12 ก ขอท 3 ง ขอท 13 ข ขอท 4 ง ขอท 14 ง ขอท 5 ก ขอท 15 ก ขอท 6 ง ขอท 16 ง ขอท 7 ง ขอท 17 ง ขอท 8 ข ขอท 18 ข ขอท 9 ข ขอท 19 ก ขอท 10 ข ขอท 20 ก

หมายเหต นกศกษาตองไดคะแนนไมนอยกวา 12 คะแนน (รอยละ 60) ถอวาผานเกณฑ

132

แบบฝกหด หนวยท 3 การจดรปแบบและแตงขอความ

ชอ นามสกล รหสนกศกษา

ตอนท 1 จงตอบคาถามตอไปน 1. โปรแกรมเวบเบราวเซอร เปนโปรแกรมททาหนาทหลกคออะไร 2. การใชคาสงขนบรรทดใหม หลกการของการเขยนภาษา HTML คออะไร 3. การกาหนดยอหนาของขอความ หรอภาพในลกษณะตาง ๆ ในภาษาองกฤษทรจกกนเรยกวาอะไร 4. ถาตองการใชบรรทดใดบรรทดหนงวางเปลา สามารถกาหนดไดโดยการทาอยางไร 5. คาสงแทก มแอททรบวท คอ align =justify มความหมายคออะไร 6. คาสงแทกใชสาหรบการจดขอความใหชดซายของหนาจอภาพ คออะไร 7. คาสงแทกสาหรบการเนนหวขอเรองใหผชมหรอผอานเวบเพจสามารถเหนชดเจนมากยงขนคอ 8. ตวเลขระดบของหวเรอง ซงตวเลขมคาตงแต 1-6 โดยตวเลข 1 จะแสดงขอความหวเรองทมคอ 9. <h3 align =” left” >การเขยนเวบเพจดวยภาษา HTML </h3>หมายถงอะไร 10. โดยปกตในโปรแกรมเวบเบราวเชอรการแสดงชองวางขอความหรอเวนวรรคสามารถแสดงได กชองวาง 11. อกขระพเศษทใชแทนชองวางคออะไร 12. คาสงแทรกทกาหนดใหโปรแกรมเวบเบราวเชอรเพอการจดรปแบบขอความใหตรงตามเอกสาร เดมคอคาสงแทกอะไร 13. < center> คณะกรรมการดาเนนงาน อกท.หนวยเชยงใหม </center> หมายถงการกาหนดอะไร 14. การแสดงเสนคนใหเปนเสนทบ มความหนา 20 พกเซลกาหนดอยางไร

133

15. ชอสมาตรฐานคอสอะไร 16. การแสดงรายการแบบไมมลาดบ จะปรากฏสญลกษณ อะไรออกมาอตโนมต 17. คาสงแทก <ul type= square > หมายถงอะไร 18. การสรางลาดบรายการแบบเรยงลาดบคออะไร 19. <ol type= A > <li> เวบไซต <li> เวบเพจ </ol> จากคาสงแทกการแสดงผลดวยโปรแกรมเวบเบราวเชอรจะปรากฏอยางไร 20. คาสงแทกทใหโปรแกรมเวบเบราวเชอรแสดงผลดงน 13. อกท.หนวยเชยงใหม 14. อกท.หนวยลาพน 15. อกท.หนวยแพร ตอนท 2 จงใสเครองหมาย หนาขอความทถกและใสเครองหมาย หนาขอทผด

1. คาสงทใชในการกาหนดขอความใหเปนตงอกษรหอย คอ คาสงแทก .... 2. คาสงแทก .... เปนคาสงสาหรบกาหนดขดเสนใตขอความ เปนการเนนขอความ เพอเพมจดสนใจ 3. สตรเคม C6H6O6 คาสงแทกทใชคอ C6H 6O 6 4. คาสงแทกทเนนขอความจากตวอกษรปกตใหเปนอกษรแบบพมพดดคอ <tt>....</tt> 5. คาสงแทก … และ… มการแสดงผลเหมอนกน 6. คาสงแทก &#153 คอ เครองหมาย ™ 7. คาสงแทก การเขยนเวบเพจ สาหรบกาหนด แบบตวอกษร 8. ขนาดของตวอกษรสามารถแสดงไดทงหมด 1-7 9. การขยายขนาดของตวอกษรนนจะใชเครองหมายบวกซงจะใชไมเกน + 4 10. คาสงแทกสาหรบกาหนดทศทางการวงของขอความ ม 3 แบบ คอ ซาย ขวา กงกลาง

134

เฉลยแบบฝกหด หนวยท 3 การจดรปแบบและแตงขอความ

ตอนท 1 ขอท 1 ตอบ การแสดงผลตามคาสงของภาษา HTML เปนหลก ขอท 2 ตอบ วางคาสงแทก นนจะวางคาสงไวทายขอท. ความสดทายของบรรทดแตละ บรรทดทตองการขนบรรทดใหม ขอท 3 ตอบ เรยกวา paragraph ขอท 4 ตอบ การเพมคาสงแทก เพมในบรรทดนน ขอท 5 ตอบ justify ใชสาหรบการจดขอท. ความเตมพนท ขอท 6 ตอบ ขอท. ความ ขอท 7 ตอบ คาสงแทกทใชในการแสดงหวเรองของเนอหา ขอท 8 ตอบ ขอความหวเรองทมตวอกษรขนาดใหญมากทสด ขอท 9 ตอบ การกาหนดหวเรองระดบ 3 ของ คาวาการเขยนเวบเพจดวยภาษา HTML และใหจด ชดซายของหนาจอภาพ ขอท 10 ตอบ โดยปกตในโปรแกรมเวบบราวเซอร การแสดงชองวางขอท. ความหรอเวนวรรค สามารถแสดงได1กชองวาง ขอท 11 ตอบ อกขระพเศษทใชแทนชองวางคอ ขอท 12 ตอบ คาสงแทรกทกาหนดใหโปรแกรมเวบบราวเซอรเพอการจดรปแบบขอความใหตรง ตามเอกสารเดมคอคาสงแทก <pre> ขอท. ความ </pre> ขอท 13 ตอบ การจดขอทความกงกลางหนาเวบเพจ ขอท 14 ตอบ <hr size =20 noshade >

ขอท 15 ตอบ ชอสมาตรฐานคอส MAGENTA ขอท 16 ตอบ สญลกษณ ออกมาอตโนมต ขอท 17 ตอบ การกาหนดรายการแบบมสญลกษณ และแสดงสญลกษณ ขอท 18 ตอบ รายการทประกอบไปดวยตวอกษรหรอตวเลขทมการเรยงลาดบในการแสดงผล ขอท 19 ตอบ A. เวบไซต B. เวบเพจ ขอท 20 ตอบ <ol type= 1 start =13 > <li> โปรแกรม Edit Plus <li> โปรแกรม Notepad <li> โปรแกรม Internet Explorer </ol> ตอนท 2 ขอท 1 ขอท 2 ขอท 3 ขอท 4 ขอท 5 ขอท 6 ขอท 7 ขอท 8 ขอท 9 ขอท 10

135

ใบงานท 4 วชาการเขยนเวบเพจดวยภาษา HTML (3204-2201) หนวยท 3 ชอหนวย การจดรปแบบและแตงขอความ สอนครงท 4 ชองานเรอง การจดรปแบบขอความอยางสวยงาม ชวโมงรวม 4 ชวโมง จดประสงคการเรยนร 1. เพอใหนกศกษามความรความเขาใจเกยวกบการจดรปแบบขอความ 2. เพอใหนกศกษามความคดรเรมสรางสรรค จดประสงคเชงพฤตกรรม 1. ปฏบตการการจดรปแบบขอความใหครบองคประกอบถกตอง 3. รจกใชคาสงแทกการจดรปแบบขอความอยางเหมาะสมและเปนระเบยบ 4. จดสรรเวลาในการปฏบตใบงานไดอยางรอบคอบและมความคดรเรมสรางสรรค วสดอปกรณ 1. เครองคอมพวเตอร, โนตบค, พอกเกตพซ หรอ แทบเลตพซ 2. ระบบเครอขายอนเทอรเนต 3. ใบงานท 3 4. แบบฟอรมกจกรรมทกษะท 4 5. แบบประเมนผลกจกรรมทกษะ ภาคผนวก ก 6. แบบประเมนคณธรรม จรยธรรม คานยมและคณลกษณะทพงประสงค การบรณการตามหลกของเศรษฐกจพอเพยงและคณลกษณะ 3 D ลาดบขนตอนการปฏบต

1. นกศกษาปฏบตเปนรายบคคล ตามกจกรรมทกษะท 1 หนวยท 1 ฝกปฏบตการเขยนเวบเพจ ดวโปรแกรม Notepad นาผลทไดนามาเขยนลงใบปฏบตงานหนวยท 4 2. ใหทาการบนทกไฟลขอมล คอ ชอนกศกษาตามดวย work3 เชน apiwan_work3.html

3. การจดเกบไฟลใหเกบไวท โฟลเดอร std_work 6. ใหสงไฟลเอกสารจานวน 1 ไฟล ผานจดหมายอเลกทรอนกสของครผสอน ชอ [email protected] ทายชวโมง

ขอเสนอแนะ 1. ใหอยทดลพนจของผสอน 2. กอนฝกปฏบตการเขยน ควรตรวจสอบความพรอมการทางานของอปกรณ ไดแก เครองคอมพวเตอร โนตบค, พอกเกตพซ หรอ แทบเลตพซ 3. ตรวจสอบการใชงานดวยโปรแกรมเวบเบราวเชอรได

136

4. นกศกษาสามารถใชความคดรเรมสรางสรรคในการสรางชนงานได 5. ชวงระหวางฝกปฏบตการเขยนใหสงเกตการเขยนคาสงแทกตางๆ วาถกตองตามองคประกอบของเอกสารHTML การประเมนผล 1. สงเกตพฤตกรรมขณะปฏบตงาน 2. ตรวจกจกรรมทปฏบตจากผลงาน ใบปฏบตงานทหนวยท 4 3. แบบประเมนผลกจกรรมทกษะ ภาคผนวก ก 4. ประเมนคณธรรม จรยธรรม คานยมและคณลกษณะทพงประสงค การบรณการตามหลกของเศรษฐกจพอเพยงและคณลกษณะ 3 D เกณฑประเมนผลงานกจกรรมท 3 1. รปแบบการนาเสนอผลงาน 5 คะแนน 2. ลกษณะการเขยนเปนระเบยบ อานงาย สะอาด 5 คะแนน 3. คาสงแทก ถกตอง ครอบคลม ชดเจน ครบถวน 5 คะแนน 4. เนอหาถกตอง ครอบคลม ชดเจน ครบถวน 5 คะแนน 5. รบผดชอบสงงานตรงตามเวลาทกาหนด 5 คะแนน รวม 25 คะแนน

137

กจกรรมทกษะท 4 เรอง การจดรปแบบขอความอยางสวยงาม

คาสง จงปฏบตการเขยนเวบเพจ ดวยภาษา เอชทเอมแอล เพอแสดงผลขอความทกาหนดให

ดงตอไปนลงในใบปฏบตงานทหนวยท 3

138

ใบปฏบตงานหนวยท 4 เรอง การจดรปแบบขอความ

ชอ นามสกล รหสนกศกษา

ระดบคะแนน ผาน ไมผาน 1. ชอโฟลเดอร 2. ชอไฟลเอกสารเอชทเอมแอล

139

ใบงานท 5 วชาการเขยนเวบเพจดวยภาษา HTML (3204-2201) หนวยท 3 ชอหนวย การจดรปแบบและแตงขอความ สอนครงท 5 ชองานเรอง การจดรปแบบและแตงขอความตามจนตนาการ ชวโมงรวม 4 ชวโมง จดประสงคการเรยนร 1. เพอใหนกศกษามความรความเขาใจเกยวกบการตกแตงขอความเอกสาร 2. แสดงผลการใชตวอกษรวงภายใน 20 วนาท 3. เพอใหนกศกษาเกดความคดรเรมสรางสรรค จดประสงคเชงพฤตกรรม 1. ปฏบตการตกแตงขอความเอกสาร HTML ตามหลกการ 2. รจกใชคาสงแทกในการตกแตงขอความอยางเหมาะสมและเปนระเบยบ 3. จดสรรเวลาในการปฏบตใบงานไดอยางรอบคอบและมความคดสรางสรรคผลงาน สอการเรยนการสอน 1. เครองคอมพวเตอร, โนตบค, พอกเกตพซ หรอ แทบเลตพซ 2. เครองพมพ ชนด Inkjet วสดอปกรณ 1. กระดาษ A4 2. ดนสอ ยางลบ ปากกา 3. แผน CD เปลา 4. ใบงานท 4 5. แบบฟอรมกจกรรมทกษะท 5 6. แบบประเมนผลกจกรรมทกษะ ภาคผนวก ก 7. แบบประเมนคณธรรม จรยธรรม คานยมและคณลกษณะทพงประสงค การบรณการตามหลกของเศรษฐกจพอเพยงและคณลกษณะ 3 D ลาดบขนตอนการปฏบต 1. นกศกษาปฏบตเปนกลมตาม กจกรรมท 1 หนวยท 1 เพอทางานปฏบตกจกรรมทกษะท 4 2. ใหประธานเปนผนาดาเนนการในการปฏบตงาน และเลขานการกลม ทาหนาทบนทกและเขยนรายงานผลการปฏบตงาน สาหรบสมาชกคนอนๆ ในกลมชวยกนระดมความคดเหนใหมากทสดพรอมทงจดหาวสดอปกรณในการปฏบตงาน

3. นาผลจากการออกแบบหนาชนงานเวบเพจมามาวเคราะห สงเคราะห และพฒนาดวยภาษา HTML

140

4. ใหสมาชกคนอน ๆ ในกลมชวยกนระดมความคดเหนใหมากทสดปรบปรงแกไขชนงานให

ครอบคลม คาสงจากเนอหาทไดศกษาจากหนวยท 5 5. นาผลจากการพฒนาดวยภาษาHTML บนทกลงในแบบฟอรมกจกรรมทกษะท 4 6. จากนนทาการ Print Screen หนาจอภาพแตละหนาเพจ นามาจดบอรดเพอแสดงถง การจดขอความและแตงขอความ 7. ตงชอไฟลเอกสาร HTML ใหสอดคลองตามเนอเรองทไดออกแบบ 8. สงตวแทนออกมา นาเสนอผลงานเพอแลกเปลยนเรยนรใหเพอนกลมอนฟง 9. เมอนาเสนอผลงานทกกลมเสรจแลว ใหทกกลมนาผลงานตดบอรดหนาหองเรยน เพอแลกเปลยนความรภายนอกกลม 10. ใหทาการบนทกไฟลขอมลหนาโฮมเพจ และไฟลขอมลอน ๆ ใหบนทกตามหลกการบนทกไฟลเอกสาร 11. การจดเกบไฟลใหเกบไวท โฟลเดอร Group_ ตามดวยชอกลม เชน Group_fuilt คดลอกโฟลเดอรและไฟลทงหมด ลงบน แผน CD-ROM จดสงใหครผสอน 12. ขอม ลท ไ ด ส บค นมา ให ระ บแหล งท ม า ด วย ด ต วอ ย า งการ เข ยนแหล งท ม า http://apiwan.cmcat.ac.th/dataapiwan/subject/bb.pdf ขอเสนอแนะ 1. ใหอยทดลพนจของผสอน 2. กอนฝกปฏบตการเขยน ควรตรวจสอบความพรอมการทางานของอปกรณ ไดแก เครองคอมพวเตอร โนตบค, พอกเกตพซ หรอ แทบเลตพซ 3. ตรวจสอบการใชงานดวยโปรแกรมเวบเบราวเชอรได 4. นกศกษาสามารถใชความคดรเรมสรางสรรคในการสรางชนงานได 5. ชวงระหวางฝกปฏบตการเขยนใหสงเกตการเขยนคาสงแทกตาง ๆ วาถกตองตามองคประกอบของเอกสาร HTML การประเมนผล 1. สงเกตพฤตกรรมขณะปฏบตงาน 2. ตรวจกจกรรมทปฏบตจากผลงานกจกรรมทกษะท 5 3. ประเมนผลงานเปนรายกลม 4. ประเมนคณธรรม จรยธรรม คานยมและคณลกษณะทพงประสงค การบรณการตามหลกของเศรษฐกจพอเพยงและคณลกษณะ 3 D

141

เกณฑประเมนผลงานกจกรรมท 5 1. รปแบบการนาเสนอผลงาน 5 คะแนน 2. ลกษณะการเขยนเปนระเบยบ อานงาย สะอาด 5 คะแนน 3. คาสงแทก ถกตอง ครอบคลม ชดเจน ครบถวน 5 คะแนน 4. เนอหาถกตอง ครอบคลม ชดเจน ครบถวน 5 คะแนน 5. รบผดชอบสงงานตรงตามเวลาทกาหนด 5 คะแนน รวม 25 คะแนน

142

กจกรรมทกษะท 5 เรอง การจดรปแบบและแตงขอความตามจนตนาการ

ชอกลม.................................................... สมาชกกลม 1................................................................. 2................................................................. 3................................................................. 4................................................................

ระดบคะแนน ผาน ไมผาน

โครงสรางทอยไฟลตาง ๆ

Group_name…………………………………………………………..

หนาโฮมเพจ...……………………………………………….………..

…………………………………………………………….………..

…………………………………………………………….………..

…………………………………………………………….………..

…………………………………………………………….………..

…………………………………………………………….………..

…………………………………………………………….………..

…………………………………………………………….………..

…………………………………………………………….………..

หน่วยที่ 3 การจัดรูปแบบและแต ่ง ... ·...

Documents