หน่วยที่ 5 การเชื่อมโยงหน ้า...
Transcript of หน่วยที่ 5 การเชื่อมโยงหน ้า...
หนวยท 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
ภาพท 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
ภาพท 5.6 การแสดงผลการเชอมโยงภายในเวบไซตเดยวกน
จากโครงสรางโฟลเดอร "html_webpage" มการกาหนดใหไฟลเอกสารเวบเพจ home.html เปนเวบเพจเรมตน หากตองการเชอมโยงเวบเพจไปยง ไฟลเอกสารเวบเพจ "sample.html" หรอ ไฟลเอกสารเวบเพจ font.html ทอยในโฟลเดอรทอยตากวา การกาหนดคาสง ดงน <a href ="html_webpage/sample.html">….</a> โดยใสชอโฟลเดอรและคนดวยเครองหมาย “/” ตามดวยไฟลเอกสารเวบเพจ ตองการเชอมโยง ในกรณทโฟลเดอร หลาย ๆ ชน ซอนกน ตองระบโฟลเดอร ใหครบทกชนตามลาดบจนถงไฟลเอกสารเวบเพจทตองการเชอมโยง ถาระบผดหรอลมโฟลเดอร หรอสลบชนโฟลเดอร การเชอมโยงนนจะทางานผดพลาด คอไมสามารถหาไฟลทระบไวได เพราะการอางองตาแหนงผด เกดการเชอมโยงทงานไดจรง ลกษณะนเรยกกนวา "Broken Link"
เมอแสดงผลผานโปรแกรมเวบเบราวเซอรดงภาพท 5.7
<html> <head><title>การเชอมโยงในเวบไซตเดยวกน</title></head> <body text="red">
<h3>การเชอมโยงในเวบไซตเดยวกน</h3> ชอไฟลเอกสารเวบเพจหนาน คอ home.html<br>
<a href ="web_1/sample.html">คลก เพอเชอมโยงไฟยง เอกสารเวบเพจท sample.html></a> </body> </html
193
ภาพท 5.7 การแสดงผลเอกสารเวบเพจปลายทางท อยในโฟลเดอรทอยระดบตากวา
4) กรณทไฟลเอกสารเวบเพจ เปนเวบเพจทอยในโฟลเดอรทอยระดบสงกวาไฟลเอกสารเวบเพจเรมตน ตามโครงสรางโฟลเดอรดงน
โฟลเดอร “html_webpage”
ไฟลเอกสารเวบเพจ “ sample.html”
โฟลเดอร web_1
ไฟลเอกสารเวบเพจ “ font.html”
โฟลเดอร web_2
ไฟลเอกสารเวบเพจ “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
ภาพท 5.9 การแสดงผลเอกสารเวบเพจปลายทางท อยในโฟลเดอรทสงกวา
<html> <head><title>การเชอมโยงในเวบไซตเดยวกน</title></head> <body >
<h3>การเชอมโยงในเวบไซตเดยวกน</h3> ชอไฟลเอกสารเวบเพจหนาน คอ home.html<br>
<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
ภาพท 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
ภาพท 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
ภาพท 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
ภาพท 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 รปภาพทกาหนดโคออรดเนต
เมอแสดงผลผานโปรแกรมเวบเบราวเซอรดงภาพท 5.20
<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
เฉลยแบบทดสอบกอนเรยน
หนวยท 5 การเชอมโยงหนาเวบเพจดวยภาษา HTML
ขอท 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
เฉลยแบบฝกหด
หนวยท 5 การเชอมโยงหนาเวบเพจดวยภาษา HTML
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