หน่วยที่ 5 การเชื่อมโยงหน ้า ...1) ไฟล เว...

หนวยท 5 การเชอมโยงหนาเวบเพจ

หวขอเรอง 1. คาศพททเกยวของ 2. ความหมายและองคประกอบของการเชอมโยง

3. รปแบบการเชอมโยงเวบเพจ 4. การกาหนดสของการเชอมโยง 5. การใชรปภาพในการเชอมโยง 6. การสรางอมเมจแมพ

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

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

182

แบบทดสอบกอนเรยน หนวยท 5 การเชอมโยงหนาเวบเพจ

คาชแจง เลอกคาตอบทถกเพยงขอเดยวลงในกระดาษคาตอบ 1. ขอใดคอคาสงแทกสาหรบการเชอมโยงเวบเพจ ก. <a href = "index.html" >หนาแรก </a> ข. <a link = "index.html >หนาแรก </a> ค. <a name = "index.html >หนาแรก </a> ง. <a html = "index.html >หนาแรก </a>

2. ขอใดคอคาสงแทกกาหนดชอไฟลเวบเพจทตองการแสดงผล ก. <a href = "index.html" >หนาแรก </a> ข. <a link = "index.html" >หนาแรก </a> ค. <a name = "index.html" >หนาแรก </a> ง. <a html = "index.html " >หนาแรก </a>

3. เมอตองการกาหนดจดเชอมโยงภายในเวบเพจเดยวกน จะตองกาหนดอยางไร ก. <a href= "ชอตาแหนง">…… </a> ข. <a href= "#ชอตาแหนง">…… </a> ค. <a name= "ชอตาแหนง">…… </a> ง. <a name= "#ชอตาแหนง">…… </a> 4. เมอไฟลเอกสารเวบเพจอยในไดรฟ d:/web_html/work/index.html ตองการเชอมโยงไปยงไฟล เอกสารเวบเพจ home.html ทอยไดรฟ d:/web_html/ จะตองใชคาสงขอใด ก. <a href= "home.html">…… </a> ข. <a href= "../home.html”>…… </a> ค. <a href= "../../home.html">…… </a> ง. <a href= ".././index.html">…… </a>

5. ขอใดคอคาสงแทกสาหรบการเชอมโยงเพอสงอเมล ก. <a href ="mail [email protected]"> ข. <a href ="mail : [email protected]" ค. <a href ="mailto [email protected]"> ง. <a href ="mailto:[email protected]">

183

6. ขอใดคอคาสงแทกการเชอมโยงไปยงไฟลดาวนโหลด ก. <a href ="index.html"> ข. <a href ="freecell.exe "> ค. <a href ="google.co.th "> ง. <a href ="mailto:[email protected]"> 7. ขอใดคอ Visited Hyperlink ก. สของไฟลเอกสารเวบเพจ ข. สของการเชอมโยงตอนถกคลก ค. สของการเชอมโยงทยงไมเคยถกคลก ง. สของการเชอมโยงทเคยถกคลกไปแลว

8. ขอใดคอคาสงแทกสาหรบการเชอมโยงเวบเพจดวยรปภาพ ก. <a href ="sample.html" img src ="images.jpg"> ข. <a href ="sample.html">< href src ="images.jpg"> ค. <a img ="sample.html"><img src ="images.jpg"> ง. <a href ="sample.html"><img src ="images.jpg"> 9. ขอใดคอคาสงแทกสาหรบการเชอมโยงเวบเพจดวยอมเมจแมพโดย กาหนดพนทวงกลม ก. shape="poly" ข. shape=" rect" ค. shape="circle" ง. shape="point"

10. ขอใดคอคาสงแทกสาหรบการเชอมโยงเวบเพจดวยอมเมจแมพโดย กาหนดพนทหลายเหลยม ก. shape="poly" ข. shape=" rect" ค. shape="circle" ง. shape=" point"

184

หนวยท 5 การเชอมโยงหนาเวบเพจ

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

1. คาศพททเกยวของ 1.1 ทบทวนคาศพทหนวยการเรยนทผานมา ไดแก Attribute, Tag, Web browser, Http, HTML, Value, Link, Javascript, File, Server, Email 1.2 คาศพทใหม 1.2.1 อมเมจแมพ (Image Map) คอ การแบงพนทยอยใหกบรปภาพ เพอสามารถเชอมโยงไปยงไฟลเอกสารเวบเพจได 1.2.2 โคออรดเนต (Coordinate) การกาหนดตาแหนงเพอบอกขอบเขตของพนท หรอจดกาหนดพกดของรปทรง มหนวยเปนพกเซล 2. ความหมายและองคประกอบของการเชอมโยง 2.1 ความหมายการเชอมโยงเวบเพจ การเชอมโยงเวบเพจ (Hyperlink) คอ การกาหนดสวนของขอความหรอรปภาพทตองการทาเปนจดเชอมโยงไปยงเนอหาจดอนๆ ซงเนอหาทจะเชอมโยงไปอาจจะอยภายในหนาเดยวกนหรอคนละหนากนกได หรออาจจะอยคนละเวบไซตกได การเชอมโยงหนาเวบเพจนน จะตองมการกาหนดจดตนทางทใชสาหรบเชอมโยง ไปยงเปาหมายปลายทาง ซงอาจจะเปนรปภาพ สญลกษณ หรอขอความกได นอกจากนจะตองมการกาหนดเปาหมายเปนสวนปลายทางหรอจดทตองการใหเชอมโยงมาถง จะอยสวนใดของเอกสารกไดแลวแตผเขยนเวบไซตจะพฒนาขน

2.2 องคประกอบของการเชอมโยง

การทางานของการเชอมโยง ตองมองคประกอบ 2 สวน คอ 2.2.1 ตนทาง (Source Anchor) คอ ขอความ ภาพกราฟก เมนแบบดรอปดาวน หรอพนทบางสวนของภาพกราฟกส (Image map) เปนสวนทผเขาชมเวบเพจเลอนเมาสไปช จะเปนรปสญลกาณ ลกศร แตหากนาเมาสชไปยงจดเชอมโยงจะเปลยนเปนสญลกษณ รปมอช (หรอ เปนรปแบบสญลกษณ อน ตามทผสรางเวบเพจกาหนดใหสอความหมาย) และสามารถคลก ณ ตาแหนงนนเพอเปนการสงใหโปรแกรมเวบเบราวเซอรทางาน

185

2.2.2 ปลายทาง (Destination Anchor) คอ ไฟลเอกสาร หรอแหลงขอมลใด ๆ บนอนเทอรเนต ซงจะถกเรยกจากผเขาลงคชมเวบเพจ แบงออกเปนประเภทขอมลดงน 1) ไฟลเวบเพจ คอ ไฟลเอกสารเวบเพจทจะใชสาหรบเปดไปยงเวบเพจอน ๆ ภายในเวบไซตเดยวกน ไฟลชนดนไดแก .htm, . Html, .php, .asp เปนตน 2) ทอยเวบไซต คอ การระบทอยแอสเดรสมาตรฐานของอนเตอรเนต หรอชอเวบไชตหรอชอโดเมนเนม ทตองการเชอมโยง เชน ทอยแอสเดรสของวทยาลยเกษตรและเทคโนโลยเชยงใหม คอ 202.143.163.226 มชอเวบไซต หรอชอโดเมนเนม คอ www.cmcat.ac.th หรอ เปนตน 3) ตาแหนงเฉพาะของเวบเพจคอ การกาหนดใหเวบเบราวเซอรเปดเวบเพจพรอมทงเลอนไปยงตาแหนงทระบในหนาเดยวกน หรอเรยกการเชอมโยงนวา การเชอมโยงในหนาเดยวกน 4) คาสงใหสงอเมล (E-mail Link) คอ การเชอมโยงปลายทางไปยงอเมล 5) โปรแกรมททางานบนเครองบรการ ซงในปจจบนเปนทนยมนามาใชรวมกบเอกสาร HTML มากขน เนองจากการทางานของโปรแกรมเหลานมความสามารถเปลยนแปลงโตตอบอตโนมต เปนระบบฐานขอมล และใชรวมกบอปกรณสอสารตาง ๆ ไดหลากหลาย เชน การสงขอความผานมอถอ เปนตน 6) คาสงโปรแกรมจาวาสครปต คอ การระบปลายทางโดยเรยกคาสงทางานบน ภาษาจาวาสครปต ใหทางาน เชน การสรางการโตตอบบนเวบ หรอการเปดลงคในรปแบบปอปอพ 7) ไฟลเอกสารประเภทตาง ๆ เปนไฟลเอกสารหรอขอมลใด ๆ บนอนเตอรเนตทไดระบตาแหนงของไฟลและชนดของไฟล ทแนนอน การทางานของเวบเบราวเซอรขนอยกบชนดของไฟล เชน ถาเปนไฟลมลตมเดย เวบเบราวเซอรกเลนใหเองอตโนมต แตถาเปนไฟลชนด Acrobat เวบเบราวเซอรกจะทาการเรยกดาวนโหลดไฟลเอกสารเปนตน

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

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

3.1 การเชอมโยงภายในเวบเพจเดยวกน การเชอมโยงภายในเวบเพจเดยวกน เปนการเชอมโยงไปยงตาแหนงตาง ๆ ภายในไฟล

เวบเพจหนาเดยวกน เนองจากเอกสารเวบเพจมขอมลจานวนมากทตองการนาเสนอ และอาจแบงขอมลเปนหวขอยอยตาง ๆ ในหนาเดยวกน หลกการเชอมโยงในหนาเอกสารเวบเพจเดยวกน คอจะตองกาหนดชอ ณ ตาแหนงทตองใหสามารถเชอมโยงไปได จากนนใหสรางการเชอมโยงโดยใชเครองหมาย # แลวตามดวยชอของตาแหนงทกาหนดในไฟลเวบเพจปจจบน เชน #link01 หมายถงใหแสดง ณ ตาแหนง link01 ของไฟลเอกสารเวบเพจปจจบน การเชอมโยงทจะสอดคลองกนอยม 2 สวนคอ

186

3.1.1 สวนท 1 การกาหนดชอ ณ ตาแหนงทตองการภายในไฟลเอกสารเวบเพจ โดยมรปแบบคาสงแทกดงน

คาสงแทก <a> มแอททรบวท ใชสาหรบกาหนดชอ ณ ตาแหนงทตองการเพอทจะทา

การเชอมโยงมาหา มรายละเอยด ดงน

แอททรบวท ความหมาย name การกาหนดชอทตงไวเพอทจะทาการเชอมโยงมาหา

3.1.2 สวนท 2 การกาหนดจดเชอมโยงไปยงชอทกาหนดไวในสวนท 1 โดย รปแบบคาสงแทกดงน

รปแบบคาสง <a href= "# ชอตาแหนงททาการเชอมโยง">ขอความ </a>

รปแบบคาสง <a name= "ชอทตงไวเพอทจะทาการเชอมโยงมาหา" ></a>

<html> <head><title>การเชอมโยงในเวบเพจเดยวกน</title></head> <h3>ศล 5</h3> ศล ( Morality ) คอ ความปกต และการรกษาศลกคอ ความตงใจรกษาปกตของตน อนเปนหลกปฏบตทไมทาใหเดอดรอนแกตนเองและผอน และเปนหลกแหงความประพฤตทจะทาใหเกดความสะอาดทางกาย และวาจา ศลมหลายประเภท เชน ศล 5, ศล 8, ศล 10 ทงนขนอยกบความสามารถของผปฏบต แตศลทควรกระทาเพอใหเกดความปกตในสงคมกคอ ศล 5 เพราะสะดวกและงายทจะปฏบต มดงน คอ<br> <a name ="top"></a> <br> <a href="#link01">พงละเวนจากการฆาสตวตดชวต </a> <a href="#link02">พงละเวนจากการลกขโมย ฉอฉล </a> <a href="#link03">พงละเวนจากการประพฤตผดในกาม </a> <a href="#link04">พงละเวนจากการพดเทจ </a> <a href="#link05">พงละเวนจากการดมเครองดองของเมา </a> <a name ="link01"></a> <h3><font color ="purple">พงละเวนจากการฆาสตวตดชวต</font></h3> 1.ปาณาตปาตา เวรมณ เจตนาเปนเครองงดเวนจากการฆา การเบยดเบยน การทารายรางกายคนและสตว แลวมจตใจประกอบดวยเมตตากรณา มความปรารถนาด และสงสารเหนอกเหนใจผอนสตวอน <a name ="link02"></a> <h3><font color ="purple">พงละเวนจากการลกขโมย ฉอฉล</font></h3> 2.อทนนาทานา เวรมณ เจตนาเปนเครองงดเวนจากการถอเอาสงของทเจาของไมไดใหดวยอาการแหงขโมยหรอโจร อนไดแก ลก ฉก ชง วงราว ขกรรโชก ขเขญ ปลน จ ต ฉอโกง หลอก ลวง ปลอม ตระบด เบยดบง สบเปลยน ลกลอบ ยกยอก และรบสนบน แลวเปนผมความขยนประกอบสมมาชพ บรจาคทาน และเคารพในกรรมสทธในทรพยสนของผอน

187

<a name ="link03"></a> <h3><font color ="purple">พงละเวนจากการประพฤตผดในกาม</font></h3> 3.กาเมส มจฉาจารา เวรมณ เจตนาเปนเครองงดเวนจากการประพฤตผดในกาม <br> บคคลตองหามสาหรบฝายชาย คอ<br> (1) ภรรยาคนอน<br> (2) ผหญงทยงอยในความอปการะของผอน (ตองพงพาอาศยผอนอย)<br> (3) ผหญงทจารตตองหาม (แม ยา ยาย พสาว นองสาว ลกสาว ช หญงผเยาว<br> บคคลทตองหามสาหรบฝายหญง คอ<br> (1) สามคนอน<br> (2) ชายจารตตองหาม (พอ ป ตา พชาย นองชาย ลกชาย พระภกษ สามเณร ชายผเยาว)<br>ทงฝายชายและฝายหญงไมใชเฉพาะ หามแตรวมสงวาสเทานน แมแตการเคลาคลง การพดเกยวพาราส หรอการแสดงอาการ ปฏพทธแมแตดวยสายตาเนตรสบเนตร เปนตน กชอวา การละเมดศลขอนแลว เมอไมลวงละเมดศลขอนแลวเปนผสาสวมในกามยนดแตในภรรยาของตนเทานน (สทารสนโดษ) จงรกภกดแตในสามของตน (ปตวตร) ถายงไมไดแตงงานกตองมกามสงวร ตงตนอยในขนบธรรมเนยมประเพณทดงาม มวฒนธรรมอนดชนดทวา "เขาตามตรอกออกตามประต" <a name ="link04"></a> <h3><font color ="purple">พงละเวนจากการพดเทจ </font></h3> 4.มสาวาทา เวรมณ เจตนาเปนเครองงดเวนจากการพดเทจ อนไดแกคาปด ทวนสาบาน ทาเลหกระเทห มารยา ทากเลส เสรมความสารวมคาพดเสยดแทง สบปลบ ผดสญยา เสยสตย และคนคา แลว เปนผรกสจจะจะพดแตคาสตยจรงดวยความจรงใจและปรารถนาด มงหวงดตอผฟง <a name ="link05"></a> <h3><font color ="purple">พงละเวนจากการดมเครองดองของเมา </font></h3> 5.สราเมรยะมชชะปมาทฏฐานา เวรมณ เจตนาเปนเครองงเวนจากการดมนาเมาอนเปนทตงแหงความประมาท อนไดแก นาสรา เมรย เครองดมมนเมาอน ๆ และการเสพยาเสพตดอนๆ เชน ฝน เฮโรอน กญชา ยาบา หรอแมแตบหร แลวเปนผประกอบดวยสตสมปชญญะในการประกอบกจการทงปวง และเปนผไมประมาทในชวตในการงาน ในวย ในเพศนบวาเปนหลกการขนพนฐานทพระพทธองคทรงสงสอน มงเนนใหพทธศาสนกชนไดประพฤตปฏบตตาม เพอความเปนมนษยอนจะไดเปนสมาชกทของสงคม ความสงบสขในสงคมแตละวนจะเกดขนไดกอาศยหลกมนษยธรรม หรอ แตละคนเปนคนเตมคนนนเอง <br><br> <a href="#top">ดานบน </a> </body> </html>

188

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

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

จากภาพท 5.1 จดเชอมโยงอย 6 ตาแหนง โดยสงเกตไดจากขอความทขดเสนใต เมอนาเมาสไปชทจดเชอมโยง รปเมาสกจะเปลยนจากรปลกศรเปนรปมอช และเมอคลกทจดเชอมโยงแลว กจะแสดงผลตาแหนงทกาหนดไว เชน คาสงแทก <a href="#link05"> เปนการกาหนดชอตาแหนงทเชอมโยง คอ link05 จากนนกาหนดชอตาแหนงจดทเชอมโยงไปยงชอของตาแหนง link05 ทกาหนดโดยคาสงแทก <a name ="link05"> และเมอแสดงผล ณ ตาแหนงทกาหนดชอแลว ไดกาหนดจด เชอมโยงเพอกลบไปยงดานบนของไฟลเวบเพจทแสดงผลหนาเอกสารเวบเพจ โดยเมอคลกทจดเชอมโยง “ดานบน” แสดงผลเวบเพจดานบนซงเปนผลมาจากการกาหนดคาสงแทก <a href="#top"> โดยทมคาสงแทกทเชอมโยงตาแหนงทอยดานบนคอ <a name ="top">

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

คลกทลงค คาวา ดานบนจะกระโดดไปยงขอความทอยดานบนของหนาเวบเพจ

189

3.2 การเชอมโยงภายในเวบไซตเดยวกน การเชอมโยงภายในเวบไซตเดยวกน เปนการเชอมโยงขอมลในเวบเพจหนาอน ๆ

แตยงอยภายในเวบไซตเดยวกน เชน ถามเอกสารเวบเพจอย 3 หนาทตองการใหมการเชอมโยง ถงกนดงตวอยางการเชอมโยงเวบเพจดงน

2.3 การเชอมโยงไปยงเวบไซตอน

ภาพท 5.2 การเชอมโยงภายในเวบไซตเดยวกน

คาสงแทกสาหรบการเชอมโยงเวบเพจ คอคาสงแทก <a> โดยมรปแบบคาสงดงน

คาสงแทก <a> มแอททรบวท ใชสาหรบกาหนดจดเชอมโยง มรายละเอยด ดงน

แอททรบวท ความหมาย href การกาหนดชอไฟลเอกสารเวบเพจทตองการแสดง

Target กาหนดใหแสดงไฟลเอกสารเวบเพจทหนาตางโปรแกรมเวบเบราวเซอร ในลกษณะใด (หากไมกาหนดจะหมายถงใหแสดงไฟลเอกสารเวบเพจทหนาตางโปรแกรมเวบเบราวเซอรปจจบน) แบงไดดงน

1. _blank คอใหแสดงเวบเพจโดยเปดหนาตางโปรแกรม เวบเบราวเซอรใหม

2. _parent คอ ใหแสดงเวบเพจในเฟรมกอนหนาเฟรมปจจบน 1 ระดบ

3. _seft คอ ใหแสดงเวบเพจในเฟรมปจจบน

4. _top คอ ใหแสดงเวบเพจในหนาตางปจจบน โดยยกเลกเฟรมทงหมด

รปแบบคาสง <a href = "ชอไฟลเอกสารเวบเพจ" >ขอความทปรากฏบนหนาเวบ </a>

เมอคลกท ขอความ “เ ค ร อ งหมาย” จะเชอมโยงไปยงเวบเพจ เครองหมาย อกท.

เมอคลกท ขอความ “ธง อกท.”

จะเชอมโยงไปยงเวบเพจธง อกท.

190

สาหรบชอไฟลเอกสารเวบเพจ สามารถอางองชอไฟลเอกสารเวบเพจ ตางๆ ไมวาจะเปนไฟลรปภาพ หรอไฟลเอกสาร HTML หรอวาไฟล อนๆ เราสามารถทาการอางองทอยปลายทางของการเชอมโยงได 2 แบบ คอ

3.2.1 แบบเตมหรอแบบสมบรณ (Absolute Path) เปนการอางองชอไฟลเอกสารแบบเจาะจงชอไฟล โดยตรง เชน <imc src = "flower.gif"> การอางองแบบนจะตองใหไฟลเอกสารHTML และไฟลรปภาพอยในโฟลเดอรเดยวกน

3.2.2 แบบสมพนธกบเวบเพจตนทาง (Relative Path) โดยปกตไฟลเวบเพจ รปภาพ หรอไฟลขอมล อนๆ อาจจะไมไดอยในโฟลเดอรเดยวกน เนองจากการจดระบบไฟล หรอ เพอทาใหมการแบงแยกไฟล แตละประเภทตทเปนไปตามทผสรางกาหนด หรอเพอความงายในการบารงรกษาเวบเพจ เมอเชอมโยงไฟล ขอมลตางๆ ในเวบเพจแตไมอยในโฟลเดอรเดยวกน จงจาเปนทจะตองมการอางองทอยของไฟลขอมลดวย เพอความถกตองของการแสดงผล โดยมวธการอางองดงน

ภาพท 5.3 โครงสรางระบบไฟลเอกสารเวบเพจ

1) ใช “/” (Slash) เปนตวขนระหวางชอโฟลเดอร 2) กรณทไฟลเอกสารเวบเพจอยในโฟลเดอรเดยวกน สามารถทาการกาหนดโดยการใชคาสง < a herf= "ชอไฟลเอกสารเวบเพจ"> ตามโครงสรางโฟลเดอร

โฟลเดอร "html_webpage"

ไฟลเอกสารเวบเพจ "home.html" เอกสารเวบเพจเรมตนและ เอกสารเวบเพจปลายทางอยใน โฟลเดอรเดยวกน

ไฟลเอกสารเวบเพจ "webpage.html"

ภาพท 5.4 การแสดงผลการเชอมโยงภายในเวบไซตเดยวกน

ไฟล index.html อยในระบบสงสด

ไฟล unit1.html อยในระดบโฟลเดอรตากวา

1 ระดบ

191

จากโครงสรางโฟลเดอร “html_webpage” มการกาหนดใหไฟลเอกสารเวบเพจ home.html เปนเวบเพจเรมตน หากตองการเชอมโยงเวบเพจไปยง ไฟล " webpage.html" ทอยในโฟลเดอรเดยวกน การกาหนดคาสง ดงน <a href="webpage.html">….</a>

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


<html> <head><title>การเชอมโยงในเวบไซตเดยวกน</title></head> <body text="red"> <h3>การเชอมโยงในเวบไซตเดยวกน</h3>

ชอไฟลเอกสารเวบเพจหนาน คอ webpage.html<br> <a href ="home.html">คลก เพอเชอมโยงไฟยง เอกสารเวบเพจท 1 (home.html) </a>

</body>

<html> <head><title>การเชอมโยงในเวบไซตเดยวกน</title></head> <body text=" red">

<h3>การเชอมโยงในเวบไซตเดยวกน</h3> ชอไฟลเอกสารเวบเพจหนาน คอ home.html<br>

<a href ="webpage.html">คลก เพอเชอมโยงไฟยง เอกสารเวบเพจท 1 (webpage.html) </a> </body>

192

3) กรณทไฟลเอกสารเวบเพจเรมตน เชอมโยงไปยงเอกสารเวบเพจปลายทางทอยในระดบโฟลเดอรทตากวา ตามโครงสรางโฟลเดอรดงน

โฟลเดอร " html_webpage "

ไฟลเอกสารเวบเพจ home.html เวบเพจเรมตน

โฟลเดอร web_1

ไฟลเอกสารเวบเพจ sample.html

เวบเพจปลายทางอย โฟลเดอรตากวา เวบเพจเรมตน

ไฟลเอกสารเวบเพจ font.html


จากโครงสรางโฟลเดอร "html_webpage" มการกาหนดใหไฟลเอกสารเวบเพจ home.html เปนเวบเพจเรมตน หากตองการเชอมโยงเวบเพจไปยง ไฟลเอกสารเวบเพจ "sample.html" หรอ ไฟลเอกสารเวบเพจ font.html ทอยในโฟลเดอรทอยตากวา การกาหนดคาสง ดงน <a href ="html_webpage/sample.html">….</a> โดยใสชอโฟลเดอรและคนดวยเครองหมาย “/” ตามดวยไฟลเอกสารเวบเพจ ตองการเชอมโยง ในกรณทโฟลเดอร หลาย ๆ ชน ซอนกน ตองระบโฟลเดอร ใหครบทกชนตามลาดบจนถงไฟลเอกสารเวบเพจทตองการเชอมโยง ถาระบผดหรอลมโฟลเดอร หรอสลบชนโฟลเดอร การเชอมโยงนนจะทางานผดพลาด คอไมสามารถหาไฟลทระบไวได เพราะการอางองตาแหนงผด เกดการเชอมโยงทงานไดจรง ลกษณะนเรยกกนวา "Broken Link"


<html> <head><title>การเชอมโยงในเวบไซตเดยวกน</title></head> <body text="red">


<a href ="web_1/sample.html">คลก เพอเชอมโยงไฟยง เอกสารเวบเพจท sample.html></a> </body> </html

193

ภาพท 5.7 การแสดงผลเอกสารเวบเพจปลายทางท อยในโฟลเดอรทอยระดบตากวา

4) กรณทไฟลเอกสารเวบเพจ เปนเวบเพจทอยในโฟลเดอรทอยระดบสงกวาไฟลเอกสารเวบเพจเรมตน ตามโครงสรางโฟลเดอรดงน

โฟลเดอร “html_webpage”

ไฟลเอกสารเวบเพจ “ sample.html”


ไฟลเอกสารเวบเพจ “ font.html”


ไฟลเอกสารเวบเพจ “home.html” เวบเพจเรมตน

ภาพท 5.8 การแสดงผลเอฟลเดอรทอยระดบตากวา

ในการอางโฟลเดอรทเหนอกวา จะใชเครองหมาย “ .. ” ในการอางอง เชน ถาไฟลเอกสารHTML เรมตนอยทโฟลเดอร web_2 การอางอง “ .. ” จะอางองไปทโฟลเดอร “html_webpage ” เนองจากไมสามารถตงชอโฟลเดอรทเปน “ .. ” ได เพราะคานเปนคาสงวนไว คอ โฟลเดอรทอยเหนอโฟลเดอรปจจบนทเอกสารเวบเพจเรมตนอย ตวอยางการอางองเวบเพจปลายทางทอยสงกวาเวบเพจเรมตนหนงระดบขนไป คอไฟลเอกสารเวบเพจ font.html กาหนดคาสงดงน <a href ="../font.html">….</a> ในอกกรณ ถาเอกสารเวบเพจทตองการเชอมโยงอยในโฟลเดอรเหนอโฟลเดอรเรมตนอย 2 ระดบ คอไฟลเอกสารเวบเพจ sample.html กาหนดคาสงดงน < a href ="../../sample.html">….</a> การใชวธการอางองตาแหนงเวบเพจแบบอางองจากตาแหนงกนและกน Relative Path names ทาใหไมตองเปลยนตาแหนงของไฟลเอกสารเวบเพจทอางองในโคดของภาษาHTML เมอมการนาเวบเพจทสรางเสรจแลวไปไวในเครองบรการเพราะไมไดระบตาแหนงเวบ

เวบเพจปลายทางอยในโฟลเดอรสงกวา เวบเพจเรมตน

194

เพจแบบเจาะจง แตระบโดยอางองจากตาแหนงของกนและกน การอางองแบบเจาะจง เวลานาเอกสารเวบเพจไปฝากไวกบเครองบรการ ซงเปนเครองคอมพวเตอรอกเครองหนง จะตองทาการเปลยนการระบการอางองตามสภาพแวดลอมของเครองคอมพวเตอร เครองนน ถาเครองบรการระบใหนาเอกสารเวบเพจไปไวในโฟลเดอร D:\Public_html แทนแทกภาษาHTML ทกๆ หนาทระบการอางองแบบเจาะจงใหอางองทโฟลเดอร D:\Public_html แทนเปรยบเทยบกบการอางองจากตาแหนงกนและกน การเชอมโยงแบบสมพนธกบเวบเพจตนทางไมตองแกไขใด ๆโดยเพยงอยายายตาแหนงการเกบเวบเพจหรอเปลยนลาดบชนของโฟลเดอร เทานกสามารถใชการเชอมโยงบนเครองอนไดเหมอนทไดทดสอบเครองคอมพวเตอรทวไป


ภาพท 5.9 การแสดงผลเอกสารเวบเพจปลายทางท อยในโฟลเดอรทสงกวา

<html> <head><title>การเชอมโยงในเวบไซตเดยวกน</title></head> <body >


<a href ="../font.html">คลก เพอเชอมโยงไฟยง เอกสารเวบเพจท font.html</a> <a href ="../../sample.html">คลก เพอเชอมโยงไฟยง เอกสารเวบเพจท sample.html</a> </body>

คลกเมาส เชอมโยงไฟลเอกสารเวบเพจ sample.html

เวบเพจปลายทางทอยสงกวาเวบเพจเรมตนหนงระดบ คอ font.html

195

3.3 การเชอมโยงขอมลกบเวบไซตอน

การเชอมโยงขอมลกบเวบไซตอน เปนกาหนดการเชอมโยงไปยงชอเวบไซต ตาง ๆ ทอยในเครอขายอนเทอรเนต โดยมรปแบบการเชอมโยงเหมอนกบการเชอมโยงไปยงไฟลเอกสารเวบเพจในเวบเพจเดยวกน ตางกนเพยงกาหนดตาแหนงหรอชอไฟลเอกสารทตองการใหแสดงผลนนเปลยนเปนชอของเวบไซตหรอชอโดเมนเนม และจดทสาคญคอ จะตองพมพ http://นาหนาชอเวบไซตนนเสมอ โดยมรปแบบคาสงดงน


ภาพท 5.10 การแสดงผลเอกสารเวบเพจปลายทางไปยงเวบไซตอน

<html> <head><title>การเชอมโยงในเวบไซตอน</title></head> <body text="red">

<h3>การเชอมโยงในเวบไซตอน</h3> <a href = " http://www.boga.go.th" target ="_blank"> คลกทน เขาสเวบไซตคลกทนเขาสเวบไซตสานกอานวยการ สานกงานคณะกรรมการการอาชวศกษา</a> <a href =" http://www.google.co.th" target ="_blank">คลกทน เขาสเวบไซตสบคนขอมลดวย Google></a> </body> </html>

รปแบบคาสง <a href = "URL ของเวบไซตทตองการเชอมโยง"> ขอความ...</a>

196

3.4 การเชอมโยงเพอสงอเมล การเชอมโยงเพอสงอเมลเปนการสรางการเชอมโยงเพอสงอเมลไปยงตาแหนงทกาหนด

ไวโดยเมอคลกทจดเชอมโยงแลว จะเปดโปรแกรมสาหรบสงอเมลถาผใชระบบปฏบตการตระกลไมโครซอฟตวนโดว ระบบจะทาการตดตงโปรแกรมไมโครซอฟต Outlook Express ใหทนท และการกาหนดชอตาแหนงของอเมลมการกาหนดแอททรบวทhref และ ตงมคาวา mailto: นาหนาชอตาแหนงของอเมล


ภาพท 5.8 การแสดงผลเอกสารเวบเพจปลาย ทางไปยงเวบไซตอน

3.5 การเชอมโยงไปยงไฟลดาวนโหลด

การเชอมโยงไปยงไฟลดาวนโหลด เปนการเชอมโยงไปยงไฟลเอกสารชนดอน ๆ ทไมใชไฟลเอกสาร HTML ไฟลประเภทนไดแกไฟลรปภาพ, ไฟลโปรแกรม , ไฟลซป (Zip) , ไฟลเสยง หรอไฟลมลตมเดย ไฟลเอกสารสอสงพมพ ซงมลกษณะการใชงานคลายกบการลงคแบบอน ๆ เพยงระบจดหมายปลายทางไปยงไฟลนน โดยมการทางานของโปรแกรมเวบเบราวเซอร 3.5.1 หากเปนไฟลรปภาพโปรแกรมเวบเบราวเซอรกจะเปดใหดโดยอตโนมต 3.5.2 ถาเปนไฟลอน ๆ จะพบกบหนาจอภาพใหทาการดาวนโหลดไฟล หรอจะทาการเกบไฟลไวกอน สาหรบเปดไวใชงานทหลง

<html> <head><title>การเชอมโยงเพอสงจดหมายอเลกทรอนกส </title></head> <body text=red>

<h3>การเชอมโยงเพอสงจดหมายอเลกทรอนกส </h3> <a href ="mailto: [email protected]" target =”_blank”>คลกทน เพอตดตอคณอภวนท จกรคา </a> </body> </html>

รปแบบคาสง <a href = "mailto: ชอ E-mail Address " > ขอความทลงค </a>

ตดตอ e-mail โดยโปรแกรม Outlook Express

197

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

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

ภาพท 5.9 การแสดงผลเอกสารเวบเพจไปไฟลอน ๆ ทไมใชไฟลเวบเพจ

<html> <head> <title>การเชอมโยงไปยงไฟลเอกสารอน ๆ </title></head> <body >

<h3>การเชอมโยงไปยงไฟลเอกสารอน ๆ </h3> <a href = "http://www.cmcat.ac.th/webpage_html/unit.pdf"> เอกสารประกอบการเรยน หนวยท 1 </a> <br> <a href = "http://www.cmcat.ac.th/webpage_html/sample.zip"> ไฟลเอกสาร sample.zip </a><br> <a href =" http://www.cmcat.ac.th/webpage_html/SwishMax2.exe">

โปรแกรมสรางกราฟก SwishMax </a> <br> <a href = http://www.cmcat.ac.th/webpage_html/cmfft_office.jpg"> รปภาพ สานกงาน อกท.หนวยเชยงใหม </a><br> </body> </html>

รปแบบคาสง <a href = "ชอไฟลดาวโหลด " > ขอความทเชอมโยง </a>

เมอคลกขอความรปภาพสานกงาน อกท. หนวยเชยงใหม

เมอคลกขอความเอกสารประกอบการเรยน

หนวยท 1

เมอคลกขอความไฟลเอกสาร Sample.zip

เมอคลกขอความไฟล โปรแกรมสรางกราฟก

SwishMax

198

4. การกาหนดสของการเชอมโยง

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

4.1 สถานะของสทแสดงขอความเชอมโยง ม 3 สถานะ

4.1.1 สของการเชอมโยงทยงไมเคยถกคลก (Hyperlink) เปนจดเชอมโยงไปยงเอกสารไฟลเวบเพจทโปรแกรมเวบเบราวเซอรยงไมเคยแสดงผลไฟลเวบเพจตามทกาหนดคาสงไว ณ จดเชอมโยง และเปนสถานะทกาลงถกเมาสชทจด เชอมโยง ปกตโปรแกรมเวบเบราวเซอรจะแสดงขอความจะเปนสนาเงน 4.1.2 สของการเชอมโยงทเคยถกคลกไปแลว (Visited Hyperlink) จดเชอมโยงไปยงไฟลเอกสารเวบเพจทโปรแกรมเวบเบราวเซอรไดเคยแสดงผลไฟลเอกสารเวบเพจตามทกาหนด ณ จดเชอมโยงนน 4.1.3 สของการเชอมโยงตอนถกคลก (Active Hyperlink) เปนจดเชอมโยงไปยงไฟลเอกสารเวบเพจท ณ ขณะทกาลงถกเลอกดวยโปรแกรมเวบเบราวเซอร

4.2 การตรวจสอบสถานะของสทแสดงขอความเชอมโยงทง 3 สถานะ

การตรวจสามารถตรวจสอบไดโดยการเปดโปรแกรม โปรแกรม Internet Explorer

ภาพท 5.10 ตวอยางการแสดงสของโปรแกรมเวบเบราวเซอร

จากภาพท 5.10 ตวอยางการแสดงสของโปรแกรมเวบบราวเซอร นนจะแสดงสตามคาทโปรแกรมระบบปฏบตการวนโดวเปนตวกาหนด โดยสามารถตรวจสอบการกาหนดสไดจากโปรแกรมเวบเบราวเซอร มขนตอนดงน 4.2.1 เปดโปรแกรม Internet Explorer จากนน เลอกทแถบเมน tools เลอนแถบลงมา เลอก Internet Options 4.2.2 เมอเลอกแถบเมน Internet Options จะปรากฏ หนาตางออกมาดงภาพ 5.11 1) เลอก ปม จะปรากฏ สทโปรแกรมเวบบราวเซอรสอะไรบาง 2) คลกปม Use Windows Colors ออก จะปรากฏแถบสสถานะตาง ๆ

199

3) คลกปมส เพอเปลยนการแสดงแถบสถานะของส 4) เมอเลอกกาหนดสถานะของสแลว กดปม OK

ภาพท 5.11 ขนตอนการกาหนดสของโปรแกรม Internet Explorer

4.3 คาสงสาหรบกาหนดสในการเชอมโยง

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

รปแบบคาสง <body link = “ ชอของสหรอรหสสเลขฐานสบ ” vlink = “ ชอของสหรอรหสสเลขฐานสบ ”

alink = “ ชอของสหรอรหสสเลขฐานสบ ”> …ขอความ... </body>

2. คลกปม ออก

3. ปม วาง

8. คลกปม Ok

1. เลอก ปม Color

5. เลอกสพนหลง

4. เลอกสตวอกษร

6. เลอกสของการเชอมโยงทเคยถก

คลกไปแลว

7. เลอกสทยงไมเคย

200

คาสงแทก <body> มแอททรบวท ใชสาหรบกาหนดสาหรบกาหนดสในเชอมโยงมรายละเอยด ดงน

แอททรบวท ความหมาย link กาหนดสของจดเชอมโยงเอกสารเวบเพจทยงไมเคยแสดงผล

vlink กาหนดสของจดเชอมโยงไฟลเอกสารเวบเพจทเคยแสดงผลมาแลว

alink กาหนดสของจดเชอมโยงไฟลเอกสารเวบเพจทกาลงถกเลอก ดวยโปรแกรมเวบเบราวเซอร


ภาพท 5.12 แสดงสในการเชอมโยงตามจดตาง ๆ

<html> <head><title>การกาหนดสในการเชอมโยง </title></head> <body link ="green" vlink ="fuchsia" alink ="red"> <h3>การกาหนดสในการเชอมโยง </h3> <a href = "http://www.cmcat.ac.th/webpage_html/sample.zip”> ไฟลเอกสาร sample.zip </a><br> <a href =" http://www.cmcat.ac.th/webpage_html/SwishMax2.exe"> โปรแกรมสรางกราฟก SwishMax </a><br> <a href = "http://www.cmcat.ac.th/webpage_html/cmfft_office.jpg"> รปภาพ สานกงาน อกท.หนวยเชยงใหม </a><br> <a href =" http://www.google.co.th"> สบคนขอมลดวย Google </a><br> </body> </html>

• จดเชอมโยงทใชแลวจะเปนชมพ • จดเชอมโยงทไมเคยถกใชจะเปน สเขยว • คลกทจดเชอมโยงใด ๆ จะเปนสแดง

201

5. การใชรปภาพในการเชอมโยง

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


ภาพท 5.13 แสดงการใชรปภาพในการเชอมโยง

<html> <head><title>การใชรปภาพในการเชอมโยง </title></head> <body > <h3>การใชรปภาพในการเชอมโยง </h3> <a href ="sample.html"> <img src ="logohtml2.jpg" alt="การเขยนเขยนเวบเพจดวยภาษา HTML"> <br><br> <a href ="http://www.cmcat.ac.th"> <img src ="cmcat1.jpg" alt="วทยาลยเกษตรและเทคโนโลยเชยงใหม"><br> </body> </html>

รปแบบคาสง <a href = “ ชอเวบไซตหรอไฟลเอกสารเวบเพจ ” > <img src = “ ชอไฟลรปภาพ”> </a>

202

6. การสรางอมเมจแมพ

อมเมจแมพ (Image Map) คอ การแบงพนทยอยใหกบรปภาพ เพอใหสามารถเชอมโยงไปยงไฟลเอกสารเวบเพจทแตกตางกนได ประโยชนจากการใช อมเมจแมพคอ ชวยลดจานวนรปภาพทตองการใหใชจดเชอมโยง ดวยการแสดงรปภาพเพยงรปเดยวแตสามารถเชอมโยงไปยงเวบเพจตาง ๆ ได การสรางพนทยอยของ อมเมจแมพ เรยกวา Hotspot หรอกรณการสรางเมนหลกของเวบเพจอาจใชรปภาพเปนเมนเพอเชอมโยงไปยงไฟลเอกสารเวบเพจอน ๆ ได รายละเอยดการสรางอมเมจแมพมดงน 5.1 การสรางอมเมจแมพ การสรางอมเมจแมพม 2 สวน คอ 5.1.1 การกาหนดพนทเปนการกาหนดตาแหนงและขนาดของพนท ทตองการใหเปนจดเชอมโยง รวมถงการกาหนดไฟลเอกสารเวบเพจทตองการใหแสดงดวย คาสงแทกทใชกาหนดพนทคอ <map> และคาสงแทก <area>

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

แอททรบวท ความหมาย name การกาหนดชอของ Image map เพอใชอางองกบรปภาพ

shape กาหนดรปทรงพนท 1. circle กาหนดรปทรงวงกลม 2. rect กาหนดรปทรงเปนสเหลยม 3. poly กาหนดทรงหลายเหลยม

href กาหนดชอไฟลเอกสารเวบเพจหรอชอเวบไซตทจะแสดงเมอคลกเมาส ณ พนททกาหนด

alt การกาหนดขอความทจะอธบายหรอชออมเมจแมพ

coords การกาหนดตาแหนงเพอบอกขอบเขตของพนทจดโคออรดเนต เปนจดกาหนดพกดของรปทรง

รปแบบคาสง <map name =”ชอของ Image Map”> < area shape =”รปทรงของพนท” cords =”ตาแหนงพนท” href =”ชอไฟลเอกสารเวบเพจหรอชอเวบไซต” >

</map>

203

แอททรบวท ความหมาย

coords 1. circle กาหนดรปทรงวงกลม ใชพกดโคออรดเนต 3 คา คอจดศนยกลาง (X, Y) และรศม (r) เชน 30,30,19 2. rect กาหนดรปทรงเปนสเหลยม ใชพกดโคออรดเนต 4 คา คอจดมมบนซาย (X1 ,Y1) และจดมมลางขวา (X2 , Y2) เชน 30,30,200,200 3. poly กาหนดทรงหลายเหลยม ใชพกดโคออรดเนต 2 เทาของจานวนจด เชน รปสามเหลยม ใชพกดโคออรดเนต 6 คา คอ คอจดจดท 1 (X1 , Y1) จดท 2 (X1,Y1) จดท 3 (X1,Y1) รปทสรางตองไมเกน 100 จด

ส าหร บค าส ง แท ก<area> เ ปนค าส ง แท กท ไ ม ม แท ก ปด โดยค าส ง <area> หนงคาสงแทกหมายถงกาหนดพนท 1 พนท ดงนนตองการกาหนด 3 พนท กตองใชคาสง <area> 3 ครง การกาหนดตาแหนงเพอบอกขอบเขตของพนท สามารถกาหนดไดดงน 1) กรณกาหนดพนทวงกลม (shape= “circle”) การกาหนดพนทวงกลมตองกาหนดจดศนยกลางและรศมของวงกลม โดยการกาหนดจดศนยกลางจะกาหนดคาของแกน X และ Y และการกาหนด คารศมของวงกลมโดยมการกาหนดคาแอททรบวท coords = (x,y,r) มหนวยเปนพกเซล

ภาพท 5.14 การกาหนดพนทวงกลม

แกน y

แกน x

รศม (r)

จดศนยกลางทไดจาก คา x และ คา y

รปภาพ

พนทวงกลมทได

204

2) กรณกาหนดเปนพนทสเหลยม (shape= “ rect ”) การกาหนดพนทสเหลยมจะตองกาหนดมมบนดานซายและกาหนดมมลางดานขวาของรปสเหลยม คาของแตละจดจะเกดจากคาของแกน x และแกน y โดยมรปแบบ การกาหนดแอททรบวท coords = “x1,y1,x2,y2 ”) มหนวยเปนพกเซล

ภาพท 5.15 การกาหนดพนทสเหลยม 3) กรณกาหนดเปนรปหลายเหลยม (shape= “poly”) การกาหนดพนทรปหลายเหลยม ตองกาหนดโคออรดเนตเปน 2 เทาของจานวนจด มมแรกทอยภายใตแกน X ดานซายของรปภาพ มหนวยเปนพกเซล เชน รปสามเหลยม ใชพกดโคออรดเนต 6 คา คอ คอจดจดท 1 (X1,Y1) จดท 2 (X1,Y1) จดท 3 (X1,Y1) รปทสรางตองไมเกน 100 จด โดยรปแบบการกาหนดแอททรบวท coords =”x1,y1,x2,y2,…….xn,yn)

ภาพท 5.16 การกาหนดพนทหลายเหลยม

4) กรณทกาหนดเปนจด (shape =“point”) เปนการกาหนดพนทเปนจดเพยง จดเดยวบนรปภาพ โดยกาหนดโคออรดเนตจะประกอบดวย X1,Y1 โดยรปแบบการกาหนดแอททรบวท coords = “x1,y1”

X1,Y1

X2,Y2

พนทสเหลยม

รปภาพ

แกน Y

แกน X

X6,Y6

X1,Y1

X2,Y2

X5,Y5

X4,Y4

X3,Y3

205

6.1.2 การนาพนทกาหนดไปใชงาน เปนการกาหนดใหไฟลรปภาพทตองการแสดงผลใชพนททกาหนดไวในสวนท 1 โดยการกาหนดในสวนท 2 น จะใชแอททรบวท usemap ของคาสงแทก <img> มรปแบบดงน

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

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

นาหนาดวยเครองหมาย #

6.2 การหาคาโคออรดเนต

ในการแบงพนทของอมเมจแมพจะตองทราบคาโคออรดเนตในแตละสวนของรปภาพเพอทจานามาใชในการกาหนดพนทจะแบง แตโดยสวนมากมกจะทราบเฉพาะขนาดของภาพเทานน ไมสามารถทราบคาโคออรดเนตในแตละสวนของรปภาพทจะนามาใชเปนอมเมจแมพจาเปนทจะตองใชโปรแกรมเขามาชวยในการหาคาโคออรดเนต ซงปจจบนมโปรแกรมอยมากทจะชวยทาใหทราบคาโคออรดเนต เชน โปรแกรม Paint โปรแกรม PhotoShop เปนตน ในทนจะใชโปรแกรม Paint ซงเปนโปรแกรมทตดมากบระบบปฏบตการวนโดว โปรแกรม Paint เปนโปรแกรมสาหรบในการใชวาดรปภาพ หรอจดการกบรปภาพอยางงาย ๆ สาหรบขนตอนในการเปดใชงานโปรแกรม Paint มดงน

6.2.1 เรมตนทปม start 6.2.2 คลกเลอก program 6.2.3 คลกเลอก Accessories 6.2.4 คลกเลอก Piant 6.2.5 หลงจากคลกเลอก Paint จะปรากฏหนาตางโปรแกรม 6.2.6 เปดไฟลรปภาพขนมา โดยมขนตอนดงน 1) คลกทเมน file 2) คลกเลอก แถบเมน open หรอ จะใชวธกดปมคยบอรด คอ Ctrl +O พรอมกน จะปรากฏหนาตางดงภาพ 5.17

รปแบบคาสง <img src= “ชอไฟลรปภาพ” usemap = “#ชอของอมเมจแมพ”>

1

2

206

ภาพท 5.17 เปดไฟลรปภาพ

3) เลอก ระบสถานทเกบไฟลรปภาพ ทตองการเปดใชงาน แลวคลกเมาส Open โปรแกรมจะทาการเปดรปภาพออกมา ดงภาพท 8.19

ภาพท 5.18 ชอไฟลรปภาพ

ภาพท 5.18 เปดไฟลรปภาพ

จากภาพท 8.19 ใหดตวเลขทอยในกรอบสเขยว ตรงลกศรช ตวเลขทปรากฏนเปนคาโคออรดเนตของรปภาพ จะแสดงในลกษณะของคา (X,Y) โดยเมอนาเมาสไปชทจดใดๆ ตรงรปภาพ กจะแสดงจดโคออรดเนตขนมา ในทนคอ (130,41) แกน X 8 คอ 130 พกเซล แกน Y คอ จดท 41 พกเซล กรณทเปนหาคารศม กหาคาโดยการบวกจานวนพกเซลไดทงแกน X และ แกน Y

6.3 การใชคาสงสาหรบสรางอมเมจแมพ

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

X1,Y1

X2,Y2

3

207

ภาพท 5.19 รปภาพทกาหนดโคออรดเนต


<html> <head><title>image map </title></head> <body> <h3>การทา Image Map</h3> <map name ="map"> <area shape="circle" coords="138,40,38" alt="คลก hotmail.com" href="http://www.hotmail.com"> <area shape="rect" coords="185,70,430,130" alt="คลก google.co.th" href="http://www.google.co.th"> <area shape="poly" coords="330,197,540,185,465,132,316,135,226,174" alt="คลกsanook.com" href="http://www.sanook.com"> </map> <img src ="imgmap.jpg" border="0" usemap ="#map"> </body> </html>

X=138 Y= 40 R= 42

X1=330 Y1= 19 X2=540 Y2=185 X3=465 Y3=132 X4=316 Y4=135 X5=266 Y5=174

X1=185 Y1= 70 X2=430 Y2= 130

208

ภาพท 5.20 การแสดงผลการสรางอมเมจแมพ

สรปทายหนวยท 5

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

เมอคลกเมาสทพนทกาหนดอมเมจแมบจะเชอมโยงไปยง

เวบไซตทกาหนดไว

209

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

หนวยท 5 การเชอมโยงหนาเวบเพจดวยภาษา HTML

คาชแจง เลอกคาตอบทถกเพยงขอเดยวลงในกระดาษคาตอบ 1. ขอใดคอคาสงแทกสาหรบการเชอมโยงเวบเพจ <a href = "index.html" >หนาแรก </a> ก. คาสงแทกสาหรบการเชอมโยงเวบเพจ ข. คาสงแทกสาหรบการตงชอไฟลเชอมโยง ค. คาสงแทกสาหรบกาหนดการเชอมโยงไฟลเอกสารเวบเพจ ง. คาสงแทกสาหรบกาหนดหนาแรกของเอกสารเวบเพจ

2. คาสงแทก <a name = " top " > จะตองมการกาหนดแทกอะไรควบคกน

ก. <a href= "#top"> ข. <a link ="#top"> ค. <a name =" #top"> ง. <a html = "#top"> 3. เมอตองการกาหนดจดเชอมโยงภายในเวบเพจเดยวกน จะตองกาหนดอยางไร

ก. <a href= "ชอตาแหนง">…… </a> ข. <a href= " #ชอตาแหนง">…… </a> ค. <a name= "ชอตาแหนง ">…… </a> ง. <a name= "#ชอตาแหนง ">…… </a>

4. เมอไฟลเอสารเวบเพจอยในไดรฟ d:/web_html/work/index.html ตองการเชอมโยงไปยงไฟลเอกสารเวบเพจ home.html ทอยไดรฟ d:/web_html/ จะตองใชคาสงขอใด ก. <a href= " home.html" >…… </a> ข. <a href= "../home.html" >…… </a> ค. <a href= "../../home.html" >…… </a> ง. <a href= ".././index.html" >…… </a>

5. ขอใดคอคาสงแทกสาหรบการเชอมโยงเพอสงอเมล ก. <a href ="mail [email protected]"> ข. <a href ="mail : [email protected]" ค. <a href ="mailto [email protected]"> ง. <a href ="mailto:[email protected]">

210

6. <a href ="freecell.exe "> คอขอใด ก. คาสงแทกการเชอมโยงไปยงอเมล ข. คาสงแทกการเชอมโยงไปยงไฟลเกมส ค. คาสงแทกการเชอมโยงไปยงไฟล HTML ง. คาสงแทกการเชอมโยงไปยงไฟลดาวนโหลด 7. ขอใดคอ Active Hyperlink ก. สของไฟลเอกสารเวบเพจ ข. สของการเชอมโยงตอนถกคลก ค. สของการเชอมโยงทยงไมเคยถกคลก ง. สของการเชอมโยงทเคยถกคลกไปแลว 8. <a href ="sample.html"><img src ="images.jpg"> คอขอใด ก. คาสงแทกสาหรบการเชอมโยงเวบเพจดวยรปภาพ ข. คาสงแทกสาหรบการเชอมโยงเวบเพจดวยขอความ ค. คาสงแทกสาหรบการเชอมโยงเวบเพจดวยไฟลเอกสาร ง. คาสงแทกสาหรบการเชอมโยงเวบเพจดวยRollover 9. shape="circle" หมายถงขอใด ก. “คาสงแทกสาหรบการเชอมโยงเวบเพจดวยอมเมจแมพโดย กาหนดพนทวงร ข. คาสงแทกสาหรบการเชอมโยงเวบเพจดวยอมเมจแมพโดย กาหนดพนทเปนจด ค. คาสงแทกสาหรบการเชอมโยงเวบเพจดวยอมเมจแมพโดย กาหนดพนทวงกลม ง. คาสงแทกสาหรบการเชอมโยงเวบเพจดวยอมเมจแมพโดย กาหนดพนทหลายเหลยม 10. ขอใดคอคาสงแทกสาหรบการเชอมโยงเวบเพจดวยอมเมจแมพโดย กาหนดพนทหลายเหลยม ก. shape="poly" ข. shape=" rect" ค. shape="circle" ง. shape=" point"

211

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


ขอท 1 ก ขอท 6 ข ขอท 2 ก ขอท 7 ง ขอท 3 ค ขอท 8 ง ขอท 4 ข ขอท 9 ค ขอท 5 ง ขอท 10 ก

เฉลยแบบทดสอบหลงเรยน หนวยท 5 การเชอมโยงหนาเวบเพจดวยภาษา HTML

ขอท 1 ง ขอท 6 ง ขอท 2 ข ขอท 7 ข ขอท 3 ค ขอท 8 ก ขอท 4 ข ขอท 9 ค ขอท 5 ง ขอท 10 ก

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

212

แบบฝกหด หนวยท 5 การเชอมโยงหนาเวบเพจดวยภาษา HTML

1. อธบายรปแบบการเชอมโยงพอสงเขป ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. 2. จงกาหนดโคออดเนต สาหรบเชอมโยงรปภาพหาเหลยม และแบบหกเหลยม ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. ............................................................................................................................................................. .............................................................................................................................................................

213

เฉลยแบบฝกหด


1. อธบายรปแบบการเชอมโยงพอสงเขป ขอท 1 ตอบ 1.1 การเชอมโยงภายในเวบเพจเดยวกน 1.2 การเชอมโยงภายในเวบไซตเดยวกน 1.3 การเชอมโยงขอมลกบเวบไซตอน 1.4 การเชอมโยงเพอสงจดหมายอเลกทรอนกส 1.5 การเชอมโยงไปยงไฟลดาวนโหลด

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

2.1 รปหาเหลยม

2.2 รปแบบหกเหลยม

X1= 200, y1=200 X2=300, y2=200

X3= 350,y3=150

X4=300,y4=50 X5=200, y5=50

X6= 50, y6=150

X1=300, y1=200 X2= 300,y2=180

X3= 350, y3=100

X4= 100, y4=50

X5= 200 ,y5=100

214

ใบงานท 7

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

215

ลาดบขนตอนการปฏบต 1. นกศกษาปฏบตเปนรายกลมตามความสมครใจกลมละ 4 คน เพอทางานปฏบตกจกรรม ทกษะท 6

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

3. ใหสมาชกในกลมนาผลจากการการออกแบบเวบไซตตามขนตอนในการสรางเวบไซต จากใบงานท 1 กจกรรมทกษะท 1 ของสมาชกแตละคนมานาเสนอใหสมาชกกลมทราบ

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

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

5.1 การเชอมโยงหนาเวบเพจเดยวกน 5.2 การเชอมโยงภายในเวบไซตเดยวกน 5.3 การเชอมโยงขอมลกบเวบไซตอน 5.4 การเชอมโยงไปยงไฟลดาวนโหลด 5.5 การเชอมโยงเพอสงจดหมายอเลกทรอนกส 6. นาผลจากการออกแบบหนาชนงานเวบเพจมาพฒนาดวยภาษาHTML บนทกลงในแบบฟอรมกจกรรมทกษะท 7 7. จากนนทาการ Print Screen หนาจอภาพแตละหนาเพจ นามาจดบอรดเพอแสดงถง การทองไปยงทตาง ๆ บนอนเทอรเนต 8. ตงชอกลมตามเนอเรองทไดออกแบบ 9. สงตวแทนออกมา นาเสนอผลงานเพอแลกเปลยนเรยนรใหเพอนกลมอนฟง 10. เมอนาเสนอผลงานทกกลมเสรจแลว ใหทกกลมนาผลงานตดบอรดหนาหองเรยน เพอแลกเปลยนความรภายนอกกลม 11. ใหท าการ บนทก ไฟลข อม ลหนา โฮมเพจ คอ ช อกล มตาม ดวย work7 เ ชน fuilt_index7.html สาหรบไฟลขอมลอนใหบนทกตามหลกการบนทกไฟลเอกสาร 12. การจดเกบไฟลใหเกบไวท โฟลเดอร Group_ ตามดวยชอกลม เชน Group_fuilt คดลอกโฟลเดอรและไฟลทงหมด ลงบน แผน CD-ROM จดสงใหครผสอน ขอเสนอแนะ 1. ใหอยทดลพนจของผสอน 2. กอนฝกปฏบตการเขยน ควรตรวจสอบความพรอมการทางานของอปกรณ ไดแก เครองคอมพวเตอร โนตบค, พอกเกตพซ หรอ แทบเลตพซ

216

3. ขอมลเพมเตมสามารถสบคนไดจากอนเตอรเนต หองสมด วารสาร หนงสอ หนงสอพมพ และสอสงพมพตาง ๆ 4. นกศกษาสามารถใชความคดรเรมสรางสรรคในการสรางชนงานได 5. อยาลมตองมสงความอานวยความสะดวกตามเปาหมายของผใช ทเขาไปในเวบไซต กอนทจะมงไปทศทางใด จาเปนจะตองรวาขอมลเกยวกบตาแหนงและทศทางเสยกอนวาตอนนกาลงอยทใด จากนนสามารถไปทใดไดบางจะไปสทตางๆ ไดอยางไร และจะกลบมาทเดมไดอยางไร 6. รปภาพทใชในการประกอบควรสมพนธกบเนอหา 7. ใบกจกรรมทกษะท 6 สามารถจดพมพใหมเพมเตมได หรอดาวนโหลดไดท http://www.cmcat/apiwan/webpage_html/lesson5/activity7.docx 8. ผเรยนสามารถคนหาขอมลเพมเตมไดท Http://apiwan.cmat.ac.th การประเมนผล 1. สงเกตพฤตกรรมขณะปฏบตงาน 2. ตรวจกจกรรมทปฏบตจากผลงานกจกรรมทกษะท 7 3. ประเมนผลงานเปนรายกลม 4. ประเมนคณธรรม จรยธรรม คานยมและคณลกษณะทพงประสงค การบรณการตามหลกของเศรษฐกจพอเพยงและคณลกษณะ 3 D เกณฑประเมนผลงานกจกรรมท 7 1. รปแบบการนาเสนอผลงาน 5 คะแนน 2. ลกษณะการเขยนเปนระเบยบ อานงาย สะอาด 5 คะแนน 3. คาสงแทก ถกตอง ครอบคลม ชดเจน ครบถวน 5 คะแนน 4. เนอหาถกตอง ครอบคลม ชดเจน ครบถวน 5 คะแนน 5. รบผดชอบสงงานตรงตามเวลาทกาหนด 5 คะแนน รวม 25 คะแนน

217

กจกรรมทกษะท 7 เรอง รจกการทองไปยงทตาง ๆ บนอนเทอรเนตอยางมทศทาง

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

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

1 2 3 4 5 6 7 8

4. สรางแผนผงการเชอมโยง ตวอยางเชน เรองระบบคอมพวเตอร

สวนรบขอมล input.html

คยบอรด Keyboard.html

สวนประมวลผลขอมล

process.html

ซพย cpu.html

จอภาพ moniter.html

สวนรบขอมล input.html

สวนแสดงผล output.html

หนวยความจา memory.html

รอม rom.html

หนาแรก Index.html

เมาส mouse.html

แรม ram.html

เมนบอรด mainboard.htm

เครองพมพ printer.html

คณะผจดทา group.html

218

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

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

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

219

2.2 เมอนาเมาสวางไวเหนอประเทศอะไรสามารถทาการเชอมโยงกบเวบไซตประเทศนนไดพรอมทงแสดงขอความกากบภาพดวย

3. นกศกษาอาจจะสรางไฟลเอกสารแตละประเทศเองหรอจะเชอมโยงไปยงเวบไซตของประเทศตาง ๆ ของกลมประเทศสมาคมประชาชาตแหงเอเชยตะวนออกเฉยงใต จากอนเทอรเนตกไดสวนรปภาพ แผนท สามารถดาวโหลดไดจากเวบไซตhttp://apiwan.cmcat.ac.th/dataapiwan/images/ 4. ใหทาการบนทกไฟลขอมล คอ ชอนกศกษาตามดวย work7 เชน apiwan_work7.html

5. การจดเกบไฟลใหเกบไวท โฟลเดอร std_work 6. ผลทไดจากการแสดงโปรแกรมเวบเบราวเซอรใหทาการ Print Screen หนาจอภาพผลงานนกศกษา วางในเอกสารไมโครซอฟตเวอรด ชอไฟล คอชอนกศกษาตามดวย Unit5.docx เชน apiwan_unit5.docx 7. ใหนกศกษาสาเนาเกบลงบนแผน CD หรอ สอบนทกขอมลสงครผสอนสงทายชวโมง และสาเนาเกบไวสาหรบเปนแฟมสะสมงาน 8. ข อม ลท ไ ด ส บค นมา ใ ห ร ะ บแหล งท ม า ด วย ด ต วอ ย า งการ เข ยนแหล งท ม า http://apiwan.cmcat.ac.th/dataapiwan/subject/bb.pdf ขอเสนอแนะ 1. ใหอยทดลพนจของผสอน 2. กอนฝกปฏบตการเขยน ควรตรวจสอบความพรอมการทางานของอปกรณ ไดแก เครองคอมพวเตอร โนตบค, พอกเกตพซ, แทบเลตพซ หรอ โทรศพทมอถอทสามารถรองรบระบบเครอขายไรสาย 3. ตรวจสอบการใชงานดวยโปรแกรมเวบเบราวเซอรได 4. นกศกษาสามารถใชความคดรเรมสรางสรรคในการสรางชนงานได 5. ชวงระหวางฝกปฏบตการเขยนใหสงเกตการเขยนคาสงแทกตางๆ วาถกตองตามองคประกอบของเอกสารHTML 6. รปภาพทใชในการประกอบควรสมพนธกบเนอหา 7. ใบกจกรรมทกษะท 8 สามารถจดพมพใหมเพมเตมได หรอดาวนโหลดไดท http://www.cmcat/apiwan/webpage_html/lesson5/activity8.docx 8. ผเรยนสามารถคนหาขอมลเพมเตมไดท 8.1 http://www.kapook.com/ 8.2 http://www.aseanthailand.org/index.php

220

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

221

กจกรรมทกษะท 7 เรอง เทคนคการใชรปภาพทองไปยงทตาง ๆ อยางมทศทาง

ชอ-สกล ............................................................................เลขท.......................หอง...........................

ระดบคะแนน . ผาน ไมผาน 1. ชอโฟลเดอร.................................................................................................................................... 2. ชอไฟลเอกสารหนาโฮมเพจ........................................................................................................... 3. ชอไฟลรปภาพ................................................................................................................................ 4. หวเรองหนาเวบเพจ........................................................................................................................

สมาคมประชาชาตแหงเอเชยตะวนออกเฉยงใต (อาเซยน)

5. ไฟลขอมลอน ๆ สามารถเพมเตมขอมลไดมากกวาทกาหนดให ลาดบท รปทรงพนท จดโคออรดเนต ไฟลเอกสารปลายทาง

1 2 3 4 5 6 7 8 9 10 11

หน่วยที่ 5 การเชื่อมโยงหน ้า ...1) ไฟล เว...

Documents