บทที่ 7 การเชื่อมโยงnew

 หน่วยที่ 7 การเชือ่ มโยงเว็บเพจ 208 HTML HTMLHTML HTML

 หนว่ ยที่ 7 การเชื่อมโยงเวบ็ เพจ 209 อ หน่วยท่ี 7 การเชอ่ื มโยงเว็บเพจหัวขอ้ เนอ้ื หา 1. ความหมายการเชือ่ มโยงเวบ็ เพจ 2. รปู แบบการเชื่อมโยงเว็บเพจ 3. การกาหนดสอี ักษรสาหรับการเชอื่ มโยงเวบ็ เพจ 4. การเช่อื มโยงเวบ็ เพจดว้ ยรูปภาพ 5. การกาหนดตาแหน่งการเชื่อมโยงสาระสาคัญ เว็บเพจมีส่วนประกอบของข้อมูลมากมายและเพื่อความสะดวกในการแสดงข้อมูล อาจมีการจดั แบ่งเป็นหัวเร่อื งทแ่ี สดงในหน้าเว็บเพจเดียวกันทาให้อา่ นได้งา่ ยและสะดวก การแบ่งบันทึกเว็บเพจเป็นคนละไฟล์ การแสดงข้อมูลท่ีเก่ียวข้องกับเว็บไซต์อื่น ๆ หรือการส่งข้อมูลเพื่อติดต่อไปยังอีเมลผู้ดูแลเว็บไซต์ การทาให้ผู้เยี่ยมเว็บไซต์สะดวกในการเข้าถึงข้อมูลจะผ่านการคลิกท่ีจุดเชื่อมโยง(Link) ซึ่งการคลิกจุดเชื่อมโยงเป็นได้ทั้งตัวอักษรและรูปภาพ ซ่ึงเปรียบเป็นแผนท่ีจะเข้าถึงข้อมูลต่าง ๆ ของเว็บไซต์ ได้รวดเร็วจุดประสงคก์ ารเรยี นรู้ 1. จุดประสงค์ทั่วไป 1.1 มคี วามรู้ความเข้าใจการเชื่อมโยงเวบ็ เพจ 1.2 มที กั ษะการเช่ือมโยงเว็บเพจ 1.5 มคี ุณธรรมจรยิ ธรรมทพี่ ึงประสงค์ 2. จุดประสงคเ์ ชงิ พฤติกรรม 2.1 อธบิ ายความหมายการเชอ่ื มโยงเวบ็ เพจได้ 2.2 สามารถใช้การเชอ่ื มโยงเว็บเพจรปู แบบตา่ ง ๆ ได้ 2.3 สามารถการกาหนดสีตวั อกั ษรสาหรบั การเชอ่ื มโยงเวบ็ เพจได้ 2.4 สามารถเชอ่ื มโยงเวบ็ เพจด้วยรปู ภาพได้ 2.5 สามารถกาหนดตาแหน่งการเชอื่ มโยงเวบ็ เพจได้ 2.6 มีวินยั รับผิดชอบ ตอ่ งานที่ไดร้ ับมอบหมาย

 หนว่ ยท่ี 7 การเชอ่ื มโยงเว็บเพจ 210กจิ กรรมการเรยี นการสอน 1. นกั ศกึ ษาทาแบบทดสอบกอ่ นเรยี น บันทึกคะแนนไว้ในกระดาษคาตอบ 2. การเรียนการสอนภาคทฤษฎี ผู้สอนบรรยายประกอบส่ือการสอน แบบนาเสนอคกู่ บัเอกสารประกอบการเรยี นการสอน 3. การเรียนการสอนภาคปฏบิ ตั ิ ผสู้ อนสาธิตประกอบสอ่ื การสอน แบบนาเสนอค่กู บั เอกสารประกอบการเรยี นการสอน 4. การศกึ ษาจากเอกสารประกอบการเรยี นการสอน นกั ศึกษาสามารถใช้ประกอบการเรยี นการสอนในชั้นเรยี นและนอกชน้ั เรียนได้ 5. นักศกึ ษาสามารถค้นควา้ ขอ้ มลู เพิม่ เติมได้จากเอกสารอ้างอิงประจาหน่วยและจากอนิ เทอร์เน็ต 6. มอบหมายนกั ศกึ ษาทาแบบฝกึ หดั และใบงานประจาหน่วย โดยส่งตามเวลาที่กาหนด 7. เมือ่ เรยี นจบเนอ้ื หาใหท้ าแบบทดสอบหลังเรยี น นกั ศึกษาบนั ทกึ คะแนน เพื่อเปรียบเทียบความกา้ วหน้าทางการเรยี นของตนเอง พรอ้ มกับเตรยี มตัวศึกษาเนอ้ื หาในหนว่ ยต่อไปการวดั และประเมินผล 1. ทดสอบกอ่ นเรยี นและหลังเรียนเพอื่ ตรวจสอบความก้าวหน้าของนักศึกษา 2. คะแนนจากแบบฝกึ หดั ผา่ นเกณฑ์ 50% 3. คะแนนจากการปฏิบตั ติ ามใบงาน ผา่ นเกณฑ์ 50% 4. คะแนนทดสอบภาคทฤษฎี ผ่านเกณฑ์ 50% 5. คะแนนทดสอบภาคปฏบิ ัติ ผ่านเกณฑ์ 50% 6. ประเมินคุณธรรมจริยธรรมและคุณลักษณะทพ่ี งึ ประสงค์ จากการสังเกตพฤตกิ รรมรายบคุ คล

 หน่วยท่ี 7 การเช่อื มโยงเวบ็ เพจ 211 กระดาษคาตอบ หนว่ ยท่ี 7 การเช่อื มโยงเวบ็ เพจชอื่ .........................................................................เลขที่...........................กลุ่มเรียน............................ทดสอบก่อนเรยี น ทดสอบหลงั เรยี นข้อ คาตอบ คะแนน ข้อ คาตอบ คะแนน1 12 23 34 45 56 67 78 89 910 10รวม รวม สรุปผลการเรยี นประเมินผล กอ่ นเรียน หลังเรยี น แบบฝึกหดั ใบงาน พฒั นา เต็ม 10 10 10 10 ได้

 หนว่ ยที่ 7 การเชือ่ มโยงเวบ็ เพจ 212 แบบทดสอบกอ่ นเรียนหนว่ ยที่ 71. ขอ้ ใดเปน็ รูปแบบการเช่อื มโยงภายในเวบ็ เพจเดียวกนั ก. <a link = “# ชอื่ ตาแหนง่ ปลายทาง”>ขอ้ ความหรอื ชอ่ื รปู ภาพ </a> ข. <a href = “# ชือ่ ตาแหนง่ ปลายทาง”>ข้อความหรือชอื่ รปู ภาพ </a> ค. <a link = “# ชือ่ ตาแหน่งปลายทาง”>ข้อความหรือชอื่ รปู ภาพ </link> ง. <a href = “# ชือ่ ตาแหน่งปลายทาง”>ขอ้ ความหรือช่อื รปู ภาพ </href>2. <a href = “test_link1.html”>ระบบคอมพิวเตอร์ </a> เป็นการเชื่อมโยงแบบใด ก. การเชื่อมโยงไปยังอเี มล ข. การทดสอบการเชือ่ มโยง ค. การเชอื่ มโยงไปยงั เว็บเพจ ง. การเชื่อมโยงไปยังเวบ็ ไซต์3. ขอ้ ใดเปน็ รปู แบบทถ่ี ูกตอ้ งของ IP Address สาหรับการเชื่อมโยงไปยังเวบ็ ไซต์ ก. 75.120.225.320 ข. //:75.120.225.320 ค. www. 75.120.225.320 ง. http:// 75.120.225.3204. <a href = “mailto:....”>… </a> “mailto” หมายถงึ ข้อใด ก. ท่ีอยูผ่ ูร้ ับอีเมล ข. ทอ่ี ยู่ผู้สง่ อเี มล ค. เนอ้ื หาการสง่ อีเมล ง. ช่ือเรือ่ งการสง่ อีเมล5. ขอ้ ใดเปน็ สญั ลกั ษณ์ของเมาสส์ าหรับการเชือ่ มโยง ก. ข. ค. ง.

 หนว่ ยที่ 7 การเชื่อมโยงเว็บเพจ 2136. แอทริบิวต์ ใดเปน็ การกาหนดสีตวั อกั ษรการเช่ือมโยงขณะกาลังลิงค์ ก. link ข. vlink ค. alink ง. hyperlink7. ข้อใดเป็นการกาหนดใหร้ ปู ภาพเปลยี่ นเมือ่ เลื่อนเมาส์บนรปู ภาพ ก. onMouseIn= “pic1.src = ‘images/link12.gi’” ข. onMouseOut= “pic1.src = ‘images/link12.gif’” ค. onMouseOn= “pic1.src = ‘images/link12.gif’” ง. onMouseOver= “pic1.src = ‘images/link12.gif’”8. ขอ้ ใดเป็นการกาหนดให้รปู ภาพเปลย่ี นเมอ่ื เล่ือนออกจากรปู ภาพ ก. onMouseIn= “pic1.src = ‘images/link12.gif’” ข. onMouseOn= “pic1.src = ‘images/link12.gif’” ค. onMouseOut= “pic1.src = ‘images/link12.gif’” ง. onMouseOver= “pic1.src = ‘images/link12.gif’”9. <area shape= “rect” coords= “x1,y1,x2,y2”> เปน็ กาหนดบริเวณพ้นื ท่สี าหรับเป็นจดุเชอ่ื มโยงลักษณะใด ก. บริเวณพ้นื ที่การเช่ือมโยงเปน็ รปู วงกลม ข. บรเิ วณพืน้ ท่กี ารเช่ือมโยงเป็นรปู สเี หลยี่ ม ค. บรเิ วณพนื้ ทก่ี ารเชื่อมโยงเปน็ รูปสามเหล่ียม ง. บริเวณพืน้ ท่ีการเชือ่ มโยงเป็นรูปหลายเหลยี่ ม10. ถ้ากาหนดให้ target= “_blank” เวบ็ เพจแสดงตาแหนง่ ใด ก. แสดงเวบ็ เพจทหี่ นา้ ตา่ งใหม่ ข. แสดงเว็บเพจที่หน้าต่างเดิม ค. แสดงเวบ็ เพจหน้าต่างบนสุด ง. แสดงเว็บเพจหน้าต่างล่างสุด

 หนว่ ยที่ 7 การเชือ่ มโยงเวบ็ เพจ 2141. ความหมายการเชือ่ มโยงเวบ็ เพจ 1.1 การเช่ือมโยงเว็บเพจ คอื การกาหนดทศิ ทางความสัมพนั ธ์กันของเอกสารในระบบเครือข่ายอินเทอร์เน็ต ไฟล์เอกสารท่ีสร้างด้วย HTML มีลักษณะแตกต่างจากเอกสารชนิดอ่ืน เรียกเอกสารนี้ว่า Hyper Text ซึ่งสามารถเชื่อมโยง (Link) ไปยังข้อมูลอ่ืน ๆ ที่อยู่ในอินเทอร์เน็ตได้มากมาย ไม่ว่าจะเป็นอยู่ในรูปแบบของเว็บเพจ เว็บไซต์ อีเมล หรือไฟล์ต่าง ๆ โดยมีการกาหนดจุดเช่ือมโยงได้ทั้งตัวอักษร รูปภาพ เม่ือผู้เย่ียมชมเว็บไซต์คลิกที่จุดเช่ือมโยงระบบจะเชื่อมต่อไปยังตาแหนง่ ของขอ้ มลู น้ันแลว้ แสดงบนหน้าตา่ งเว็บเบราวเ์ ซอร์ทนั ที 1.2 สว่ นประกอบของการเชื่อมโยง ประกอบไปดว้ ย 2 สว่ น คือ ต้นทางและปลายทาง ต้นทาง (Source Anchor) คือ จดุ เชือ่ มโยง เป็นได้ทงั้ อกั ษร รูปภาพ เมื่อเล่ือนเมาส์ชที้ ่ีจดุ เช่อื มโยง เมาสจ์ ะเปล่ียนเปน็ สญั ลกั ษณก์ ารลงิ ค์ เม่อื คลิกจะเปน็ การดงึ เอาข้อมลู ปลายทางแสดงออกมา ปลายทาง (Destination Anchor) คือ ตาแหน่งของข้อมูลท่ีต้องการเชื่อมโยง การกาหนดตาแหนง่ ปลายทางมีหลายรูปแบบ ได้แก่ การกาหนดช่ือตาแหน่งปลายทางสาหรับการเช่ือมโยงภายในหน้าเว็บเพจเดียวกัน การกาหนดไฟล์ข้อมูลเมื่อต้องการเชื่อมโยงไปยังเว็บเพจ และการกาหนดท่ีอยู่เว็บไซต์เพื่อเชื่อมโยงไปยังเว็บไซต์ท่ีเกี่ยวข้อง เช่น ถ้าต้องการเช่ือมโยงไปยังเว็บไซต์ Google ทาได้ในหลายรูปแบบระบุ IP Address URL หรือ Domain ซงึ่ ไม่ว่าจะใชร้ ูปแบบใดจะต้องเริ่มตน้ ดว้ ย http:// เสมอ2. รูปแบบการเชอ่ื มโยงเวบ็ เพจ การเช่ือมโยงเว็บเพจ มีรูปแบบแตกต่างกันข้ึนอยู่กับลักษณะของข้อมูลและรูปแบบการเชื่อมโยง ได้แก่ การเช่ือมโยงภายในเว็บเพจเดียวกัน การเช่ือมโยงระหว่างเว็บเพจ การเช่ือมระหว่างเวบ็ ไซต์ การเชื่อมโยงไปยังอีเมส์ และการเชื่อมโยงเพ่ือเขา้ ถึงไฟล์ข้อมลู โดยมีรปู แบบการเช่ือมโยงดังนี้ 2.1 การเชือ่ มโยงภายในเว็บเพจ การเชอื่ มโยงภายในหนา้ เว็บเพจเดยี วกันใช้สาหรับการแสดงข้อมูลทอี่ ยภู่ ายในหนา้ เว็บเพจที่มีปริมาณมาก มีหลายหัวข้อย่อย การเล่ือนสกอร์บาร์ขึ้นลงบนหน้าต่างเบราว์เซอร์เพื่อดูข้อมูลจานวนมากอาจทาให้ไม่สะดวก การได้คลิกจุดเชื่อมโยงแล้วจอภาพเลื่อนไปหาข้อมูลท่ีเก่ียวกับหัวข้อน้ันอัตโนมัติทาให้อ่านข้อมูลได้ง่าย และยังเชือ่ มต่อกลับไปยังตาแหน่งบนสุดของจอภาพได้รวดเร็วทาให้การเยี่ยมชมเว็บไซต์สะดวกข้ึน โดยมีรูปแบบดังนี้

 หน่วยที่ 7 การเช่อื มโยงเวบ็ เพจ 215 รปู แบบแทก็ <a href> เชอื่ มโยงภายในเว็บเพจ<a href = “# ชือ่ ตาแหนง่ ปลายทาง”>ขอ้ ความหรือชื่อรูปภาพ </a>:<a name = “ชือ่ ตาแหนง่ ปลายทาง”> ข้อมลู a href = # ช่อื ปลายทาง คือ ตาแหน่งข้อมลู ทตี่ อ้ งการดึงข้อมูลขน้ึ มาแสดง a name =ชื่อปลายทาง คือ ช่อื ของตาแหนง่ ข้อมลู รูปแบบการเช่ือมโยงภายในเว็บเพจ โดยกาหนด <a name=“ช่อื ตาแหน่งปลายทาง”>และ <a href =“# ชอ่ื ตาแหนง่ ปลายทางทีต่ ้องการเชือ่ มโยง”> และปดิ ด้วย </a> ดงั ตัวอยา่ งที่ 7.1ตวั อย่างท่ี 7.1 การใช้แท็ก <a href> เช่อื มโยงภายในเว็บเพจ1 <html>2 <head><title>การเช่อื มโยงเวบ็ เพจ</title></head>3 <body background=“images/bg.gif” bgcolor=“fde3be>4 <a name= “menu”>5 <img src= “images/lang.gif”>6 <table align= “center” bgcolor= “d5fab6”>7 <tr>8 <td> <a href=“#link1”>ประเทศฟิลิปปินส์ </a></td>9 <td> <a href=“#link2”> ประเทศบรูไน </a></td>10 <td> <a href=“#link3”> ประเทศพม่า</a></td>11 <td> <a href=“#link4”> ประเทศอินโดนีเซีย</a></td>12 <td> <a href=“#link5”> ประเทศเวยี ดนาม</a></td>13 <td> <a href=“#link6”> ประเทศมาเลเชีย</a></td>14 <td> <a href=“#link7”> ประเทศกัมพูชา</a></td>1516 <td> <a href=“#link8”> ประเทศลาว</a></td>17 <td> <a href=“#link9”>ประเทศสงิ คโปร์</a></td>18 </tr>19 </table>20 <table border=“1” bordercolor=“blue” width=“600” align=“center”21 cellspacing=“0” rules=“groups” bgcolor=“fdfbf7” >

 หน่วยท่ี 7 การเช่ือมโยงเว็บเพจ 21622 <caption><font size =“4” color=“green”><a name = “link1”>23 ประเทศฟลิ ปิ ปินส์</caption>24 <tr align=“center”><th> คาศัพท์</th><th>คาอ่าน</th></tr>25 <tr align=“center”><td>สวัสด<ี /td> <td>กูมูสต้า</td></tr>26 <tr align=“center”><td>สบายดไี หม</td> <td>กูมูสตา โปะ คาโย27 </td></tr>28 </table>29 <table border=“1” bordercolor=“blue” width=“600” align=“center”30 cellspacing=“0” rules=“groups” bgcolor=“fdfbf7” >31 <caption> <font size =“4” color= “green”><a name = “link2”>32 ประเทศบรูไน</caption>33 <tr align=“center”><th> คาศัพท์</th><th>คาอา่ น</th></tr>34 <tr align=“center”><td>สวสั ด<ี /td> <td>ซาลามัด ดาตงั </td></tr>35 <tr align=“center”><td>สบายดไี หม</td> <td>อาปา กาบา</td></tr>36 </table>37 <table border=“1” bordercolor=“blue” width=“600” align=“center”38 cellspacing=“0” rules=“groups” bgcolor=“fdfbf7”>39 <caption> <font size =“4” color=“green”><a name =“link3”>40 ประเทศพม่า</caption>41 <tr align=“center”><th> คาศัพท์</th><th>คาอา่ น</th></tr>42 <tr align=“center”><td>สวัสด<ี /td> <td>มิงกะลาบา</td></tr>43 <tr align=“center”><td>สบายดีไหม</td> <td>เน เกา ลา </td></tr>44 </table>45 <table border=“1” bordercolor=“blue” width=“600” align=“center”46 cellspacing=“0” rules=“groups” bgcolor=“fdfbf7”>47 <caption> <font size=“4” color=“green”><a name =“link4”>48 ประเทศอนิ โดนีเซีย</caption>49 <tr align=“center”><th> คาศัพท์</th><th>คาอ่าน</th></tr>50 <tr align=“center”><td>สวสั ด<ี /td> <td>เซอลามตั ดาตัง</td></tr>51 <tr align=“center”><td>สบายดีไหม</td> <td>อาปา กา บา</td></tr>52 </table>

 หนว่ ยที่ 7 การเช่ือมโยงเว็บเพจ 21753 <table border=“1” bordercolor=“blue” width=“600” align=“center”54 cellspacing=“0” rules=“groups” bgcolor=“fdfbf7”>55 <caption> <font size =“4” color=“green”><a name =“link5”>56 ประเทศเวียดนาม</caption>57 <tr align=“center”><th> คาศัพท์</th><th>คาอา่ น</th></tr>58 <tr align=“center”><td>สวัสด<ี /td> <td>ซินจ่าว </td></tr>59 <tr align=“center”><td>สบายดไี หม</td> <td>บคั่ โก แคว คง </td></tr>60 </table>61 <table border=“1” bordercolor= “blue” width=“600” align=“center”62 cellspacing=“0” rules=“groups” bgcolor=“fdfbf7”>63 <caption> <font size =“4” color=“ green”><a name =“link6”>64 ประเทศมาเลเชีย</caption>65 <tr align=“center”><th> คาศัพท์</th><th>คาอา่ น</th></tr>66 <tr align=“center”><td>สวัสด<ี /td> <td>ซาลามตั ดาตัง</td></tr>67 <tr align=“center”><td>สบายดไี หม</td> <td>อาปา กา บา</td></tr>68 </table>69 <table border=“1” bordercolor= “blue” width=“600” align=“center”70 cellspacing=“0” rules=“groups” bgcolor=“fdfbf7”>71 <caption> <font size =“4” color=“green”><a name =“link7”>72 ประเทศกัมพูชา</caption>73 <tr align=“center”><th> คาศัพท์</th><th>คาอา่ น</th></tr>74 <tr align=“center”><td>สวัสด<ี /td> <td>ซวั ซไดย,จุมเรี้ยบซัว</td></tr>75 <tr align=“center”><td>สบายดีไหม</td> <td>อาปา กา บา</td></tr>76 </table>77 <table border=“1” bordercolor= “blue” width=“600” align=“center”78 cellspacing=“0” rules=“groups” bgcolor=“fdfbf7”>79 <caption> <font size =“4” color=“green”><a name =“link8”>80 ประเทศลาว</caption>81 <tr align=“center”><th> คาศัพท์</th><th>คาอ่าน</th></tr>82 <tr align=“center”><td>สวัสด<ี /td> <td>ซาบายดี </td></tr>83 <tr align=“center”><td>สบายดไี หม</td> <td>สะบายดบี ่</td></tr>

 หน่วยท่ี 7 การเช่อื มโยงเวบ็ เพจ 218 84 </table> 85 <table border=“1” bordercolor=“blue” width=“600” align=“center” 86 cellspacing=“0” rules=“groups” bgcolor=“fdfbf7”> 87 <caption> <font size =“4” color=“green”><a name =“link9”> 88 ประเทศสงิ คโปร์</caption> 89 <tr align=“center”><th> คาศัพท์</th><th>คาอา่ น</th></tr> 90 <tr align=“center”><td>สวัสด<ี /td> <td>หนหี า่ ว</td></tr> 91 <tr align=“center”><td>สบายดไี หม</td> <td>หนหี า่ วมะ</td></tr> 92 </table> 93 <center> <a href =“#menu”>กลบั เมนู</a></center> 94 </body> </html> จากตัวอยา่ งท่ี 7.1 ได้กาหนดให้เชื่อมโยงไปยังภาษาของประเทศอาเซียน 9 ประเทศสงั เกตได้ว่าเมื่อเลือ่ นเมาสไ์ ปยังขอ้ ความที่เป็นจุดเชอ่ื มโยงเมาส์จะเปล่ยี นเปน็ รปู มือ ดงั ภาพท่ี 7.1และเมือ่ คลิกจดุ เช่ือมโยงขอ้ มูลจะถูกเลื่อนขน้ึ มาแสดง ดงั ภาพท่ี 7.2 ลกั ษณะเมาส์เมื่อผา่ นจดุ เชื่อมโยง ภาพที่ 7.1 การแสดงผล การใชแ้ ท็ก <a href> เชือ่ มโยงภายในเวบ็ เพจ เลอื่ นขอ้ มูลข้นึ ด้านบนอัตโนมัติ ภาพที่ 7.2 การแสดงผล การเชือ่ มโยงปลายทางภายในเว็บเพจ

 หนว่ ยที่ 7 การเชอื่ มโยงเวบ็ เพจ 219 จากตัวอย่าง 7.1 กาหนดในบรรทดั ที่ 4 ให้ <a href =“#menu”> และในบรรทดั ท่ี 92 ให้ <a name= “menu”> ซ่ึงทาให้การเชอื่ มโยงขอ้ มลู ลงิ คก์ ลับดา้ นบนได้ แสดงผลดังภาพที่ 7.3 ลิงคก์ ลับไปด้านบน หนา้ เวบ็ ดา้ นบน ภาพท่ี 7.3 การแสดงผล การเชอ่ื มกลบั ภายในเว็บเพจ 2.2 การเชอ่ื มโยงเว็บเพจ เน่ืองจากภายในเว็บไซต์ประกอบด้วยกลุ่มของเว็บเพจท่ีเก่ียวข้องสัมพันธ์กันซ่ึงจะประกอบด้วยเวบ็ เพจจานวนหลายหน้า ดงั น้ันการเชื่อมโยงระหว่างเว็บเพจได้น้ันจึงควรมีเว็บเพจอย่างน้อย 2 หน้าหรือ 2 ไฟล์ขนึ้ ไป โดยมรี ปู แบบดังน้ี รปู แบบแท็ก <a href> เชือ่ มโยงเว็บเพจ <a href = “ชือ่ ไฟล์เว็บเพจ”>ขอ้ ความหรอื ชือ่ รูปภาพ </a> รูปแบบการเช่ือมโยงเว็บเพจ โดยกาหนด <a href=“ช่อื ไฟล์เว็บเพจ”> ตามดว้ ยข้อความหรือรูปภาพซึง่ เป็นจุดเชอ่ื มโยงแลว้ ปิดด้วย </a> ดงั ตวั อยา่ งท่ี 7.2ตวั อยา่ งที่ 7.2 การเชื่อมโยงระหวา่ งเวบ็ เพจ ไฟลช์ อ่ื 7indexta.html 1 <html> 2 <body background =“images/bg.gif” bgcolor=“fde3be”> 3 <table border=“2” bordercolor=“blue” align=“center” width=“80%”>

 หน่วยท่ี 7 การเชือ่ มโยงเว็บเพจ 2204 <tr align=“center” align=“center” bgcolor= “white”>5 <td colspan=“2”> <center><img src=“images/hmenu.gif”></center>6 <a href =“member.html”>สมาชกิ อาเซียน</a>7 &nbsp;&nbsp; <a href=“flower.html”>ดอกไม้ประจาชาติอาเซียน</a>8 &nbsp;&nbsp; <a href=“language.html”>ภาษากับอาเซยี น</a>9 </td>10 </tr>1112 <tr bgcolor=“white”>13 <td><img src=“images/logo.gif” width=“400” ></td>14 <td valign=“top”>15 <font color=“green”> <b>AEC เป็นการพัฒนามาจากการเป็นสมาคม16 ประชาชาติแห่งเอเชียตะวันออกเฉียงใต้</b> <br>(The Association of17 South East Asian Nations : ASEAN) ก่อต้ังข้ึนตามปฏิญญากรุงเทพฯ <br>18 (Bangkok Declaration) เมื่อ 8 สิงหาคม 2510 โดยมีประเทศผู้ก่อต้ังแรกเริ่ม 519 ประเทศ คือ อินโดนีเซีย มาเลเซยี ฟิลิปปินส์ สงิ คโปร์ และไทย ต่อมาในปี 252720 บรูไน ก็ได้เข้าเป็นสมาชิก <br>ตามด้วย 2538 เวียดนาม ก็เข้าร่วมเป็นสมาชิก21 ต่อมา 2540 ลาวและพมา่ เข้ารว่ ม และปี 2542 กัมพูชา กไ็ ด้เข้าร่วมเป็นสมาชิก22 ลาดบั ที่ 10 ทาให้ปัจจุบันอาเซยี นเปน็ กลุ่มเศรษฐกจิ ภมู ิภาคขนาดใหญ่ </font>23 </td>24 </tr>25 <tr bgcolor= “white”>26 <td colspan= “2”>27 <center>วิทยาลัยอาชีวศึกษานครศรธี รรมราช ตาบลคลัง อาเภอเมือง28 จังหวดั นครศรีธรรมราช </center>29 </td>30 </tr>31 </table>32 </body>33 </html> จากตวั อยา่ งท่ี 7.2 ได้กาหนดใหเ้ ชอื่ มโยงไปยังไฟล์เว็บเพจ 4 ไฟล์ ดังนี้

 หน่วยท่ี 7 การเชื่อมโยงเวบ็ เพจ 221 1) ไฟล์ 7indexta.html เป็นเว็บเพจหน้าหลักสาหรับเช่ือมโยง โดยเชื่อมโยงไปยังไฟล์ 3 ไฟล์คอื member.htm flower.html และ language.html แสดงผลดงั ภาพที่ 7.4 ขอ้ ความเช่ือมโยง ภาพท่ี 7.4 การแสดงผล หน้าหลกั ของการเช่ือมโยง 2) ไฟล์ member.htm ซ่ึงเป็นไฟล์ที่ได้สร้างไว้แล้วในหน่วยการเรียนรู้ที่ 5 เม่ือคลิกที่ข้อความการเช่อื มโยง “สมาชกิ อาเซียน” แสดงผลดังภาพที่ 7.5 ภาพที่ 7.5 การแสดงผล การเช่ือมโยงไปเวบ็ เพจ 5total_font.html 3) ไฟล์ flower.html ซึ่งเป็นไฟล์ที่ได้สร้างไว้แล้วในหน่วยการเรียนรู้ท่ี 6 เม่ือคลิกท่ีขอ้ ความการเชอ่ื มโยง “ดอกไมป้ ระจาชาติอาเซียน” แสดงผลดังภาพท่ี 7.6

 หนว่ ยที่ 7 การเชอ่ื มโยงเว็บเพจ 222 ภาพท่ี 7.6 การแสดงผล การเช่อื มโยงเวบ็ เพจ flower.html 4) ไฟล์ 7language.html ซ่ึงเป็นไฟล์ท่ีได้สร้างไว้แล้วในหน่วยการเรียนรู้ท่ี 7 เมื่อคลิกท่ีข้อความการเชือ่ มโยง “ภาษากบั อาเซยี น” แสดงผลดังภาพที่ 7.7 ภาพที่ 7.7 การแสดงผล การเชื่อมโยงเว็บเพจ 7language.html แตถ่ า้ มีการกาหนดชอื่ ไฟล์เวบ็ เพจในการเช่ือมโยงไม่ถูกต้องจะแสดงผล ดังภาพท่ี 7.8 เชื่อมโยงไปเวบ็ เพจท่ีระบุไม่ได้ ภาพที่ 7.8 การแสดงผล การเช่ือมโยงเว็บเพจไมถ่ ูกตอ้ ง

 หนว่ ยที่ 7 การเช่ือมโยงเว็บเพจ 223 2.3 การเชือ่ มโยงระหว่างเวบ็ ไซต์ การเชื่อมโยงไปยังเว็บไซต์อ่ืน ๆ ท่ีเกี่ยวข้องกับเน้ือหาที่แสดงอยู่บนเว็บเพจ เพื่อให้ผู้เย่ยี มชมได้คน้ คว้าหาข้อมูลเพ่ิมเตมิ สามารถทาได้โดยการระบุ IP Address URL หรือ Domain ของเว็บไซต์ท่ีตอ้ งการลงิ ค์ ซ่ึงตอ้ งนาด้วย http:// เสมอ โดยมรี ปู แบบดงั นี้IP Address http://74.125.225.216URL http://www.google.co.thDomain http://google.co.th รูปแบบแทก็ <a href> เชื่อมโยงเวบ็ ไซต์<a href = “IP Address URL หรือ Domain ของเว็บไซต์”> ข้อความหรอื ชอ่ื รูปภาพ </a> รูปแบบการเชื่อมโยงเว็บไซต์ โดยกาหนดให้ <a href=“เว็บไซต์”> ข้อความหรือรูปภาพเพ่ือเปน็ จุดเชอื่ มโยง และปิดด้วย </a> ดงั ตวั อย่างท่ี 7.3ตัวอยา่ งที่ 7.3 การเชือ่ มโยงระหวา่ งเว็บไซต์1 <html>2 <head><title>การเชอ่ื มโยงเว็บเพจ</title></head>3 <body background =“images/bg.gif” bgcolor=“fde3be” >4 <table border=“2” bordercolor=“blue” align=“center” width=“80%”>5 <tr align=“center” align=“center” bgcolor= “white”>6 <td colspan=“2”> <center><img src=“images/hmenu.gif”></center>7 <a href =“member.html”>สมาชิกอาเซยี น</a>8 &nbsp;&nbsp; <a href=“flower.html”>ดอกไมป้ ระจาชาตอิ าเซียน</a>9 &nbsp;&nbsp; <a href=“language.html”>ภาษากับอาเซียน</a>10 </td>11 </tr>12 <tr bgcolor=“white”>13 <td><img src=“images/logo.gif” width=“400” ></td>14 <td valign=“top”> <font color=“green”> <b>AEC เป็นการพฒั นามา15 จากการเป็นสมาคมประชาชาตแิ ห่งเอเชยี ตะวันออกเฉยี งใต้</b> <br>(The16 Association of South East Asian Nations : ASEAN) ก่อต้งั ขึน้ ตามปฏญิ ญา17 กรุงเทพฯ <br> (Bangkok Declaration) เมอ่ื 8 สงิ หาคม 2510 โดยมปี ระเทศผู้

 หน่วยท่ี 7 การเชื่อมโยงเวบ็ เพจ 224 18 ก่อต้งั แรกเริม่ 5 ประเทศ คือ อินโดนเี ซยี มาเลเซยี ฟลิ ิปปินส์ สิงคโปร์ และไทย 19 ต่อมาในปี 2527 บรไู น ก็ได้เขา้ เปน็ สมาชิก <br>ตามดว้ ย 2538 เวียดนาม ก็เขา้ 20 ร่วมเปน็ สมาชิก ต่อมา 2540 ลาวและพม่า เขา้ ร่วม และปี 2542 กัมพชู า ก็ไดเ้ ขา้ 21 ร่วมเป็นสมาชิกลาดับท่ี 10 ทาใหป้ ัจจุบันอาเซยี นเป็นกลมุ่ เศรษฐกจิ ภูมิภาคขนาดใหญ่ 22 </font><br><br><br> <font color=“blue”>เวบ็ ไซต์ที่เกยี่ วขอ้ ง </font> <br> 23 <a href=“http://www.thai-aec.com”>AEC ศูนย์ข้อมูลความรู้ประชาคม 24 เศรษฐกิจอาเซียน</a> <br> 25 <a href=“http://www.aseanthai.net”> ศูนย์ขอ้ มลู ขา่ วสารอาเซยี น</a> 26 </td> 27 </tr> 28 <tr bgcolor=“white”> 29 <td colspan=“2”> <center>วิทยาลยั อาชีวศึกษานครศรธี รรมราช ตาบลคลงั 30 อาเภอเมือง จงั หวดั นครศรีธรรมราช </center> 31 </td> 32 </tr> 33 </table> 34 </body> 35 </html> จากตัวอย่างท่ี 7.3 กาหนดให้เช่ือมโยงไปยังเว็บไซต์ 2 เว็บไซต์ ดังภาพ 7.9 โดยเช่ือมโยงไปยังเว็บไซต์ http://www.thai-aec.comดงั ภาพท่ี 7.10 และเว็บไซต์ http://www.aseanthai.net แสดงผลดังภาพ7.11 เช่อื มโยงไปเว็บไซต์ ภาพที่ 7.9 การแสดงผล การเช่อื มโยงเว็บไซต์

 หน่วยที่ 7 การเชื่อมโยงเว็บเพจ 225 ภาพท่ี 7.10 การเชอ่ื มโยงเวบ็ ไซต์ http://www.thai-aec.com ภาพที่ 7.11 การเชอื่ มโยงเวบ็ ไซต์ http://www.aseanthai.net 2.4 การเชื่อมโยงไปยงั อเี มล การเชอ่ื มโยงไปยงั อเี มล มักจะใชเ้ พื่อให้ผเู้ ยยี่ มชมเวบ็ ไซตต์ ิดต่อกบั ผู้ดูแลระบบโดยการส่งเมลเม่ือคลิกท่ีข้อความหรือรูปภาพท่ีใช้ในการลิงค์จะปรากฏจอภาพของโปรแกรมสาหรับการส่งเมลที่มีอยู่ในเคร่ืองคอมพิวเตอร์ เช่น windows Live Mail โดยจะปรากฏชือ่ เมลในชอ่ งส่งถงึ ผ้รู บั โดยมีรปู แบบดังนี้ รูปแบบแท็ก <a href> เชือ่ มโยงอเี มล <a href = “mailto:อีเมลแอดแดรส”>ข้อความหรือชอื่ รูปภาพ </a> รปู แบบการเช่ือมโยงไปยงั อีเมล โดยกาหนด < a href = “mailto:อเี มลแอดแดรสผรู้ บั ”>ตามดว้ ยข้อความหรอื รปู ภาพเพ่อื เปน็ จุดเชื่อมโยง และปิดด้วย </a> ดงั ตวั อยา่ งที่ 7.4ตวั อยา่ งท่ี 7.4 การเชอ่ื มโยงไปยังอเี มล 1 <html> 2 <head><title>การเชอ่ื มโยงเวบ็ เพจ</title></head> 3 <body background = “images/bg.gif” bgcolor= “fde3be”> 4 <table border=“2” bordercolor=“blue” align=“center” width=“80%”>

 หน่วยที่ 7 การเชอ่ื มโยงเว็บเพจ 226 5 <tr bgcolor=“white”><td colspan=“2”> 6 <center>วทิ ยาลัยอาชวี ศึกษานครศรีธรรมราชตาบลคลัง อาเภอเมืองจังหวดั นครศรธี รรมราช 7 <a href=“mailto: [email protected]”>ผู้ดแู ลระบบ</a> 8 </center> 9 </td> 10 </tr> 11 </table> 12 </body> 13 </html> จากตัวอย่างท่ี 7.4 กาหนดให้จุดเชื่อมโยงเป็นข้อความ “ผู้ดูแลระบบ” แสดงผลดังภาพท่ี7.12 และให้ <a href=“mailto: [email protected]”> เพื่อเชื่อมโยงไปยังอีเมล ซ่ึงจะปรากฏชื่อผ้รู ับอัตโนมตั ิเมื่อคลิกที่จุดเช่อื มโยง ดงั ภาพท่ี 7.13 เชือ่ มโยงอเี มล ภาพที่ 7.12 การแสดงผล การใช้แท็ก <a href> เชือ่ มโยงอเี มล ทีอ่ ยู่ E-mail ผู้รับ ภาพที่ 7.13 การแสดงผล การเชื่อมโยงอเี มล

 หน่วยท่ี 7 การเชอ่ื มโยงเวบ็ เพจ 227 2.5 การเช่อื มโยงไปยังไฟลต์ า่ ง ๆ การเช่ือมโยงไปยังไฟล์ต่าง ๆ เมื่อคลิกท่ีจุดเช่ือมโยง ไฟล์ท่ีระบุจะแสดงด้วยโปรแกรมที่เป็นชนิดของไฟล์น้ัน เช่น ไฟล์ช่ือ test.doc ไฟล์นี้จะเปิดด้วยโปรแกรม Microsoft Word หรือถ้าเปน็ ไฟล์ช่ือ test.xls ก็จะเปดิ ด้วยโปรแกรม Microsoft Excel เป็นต้น โดยมรี ปู แบบดังน้ี รปู แบบแทก็ <a href> เชื่อมโยงไฟล์ <a href = “IP Address URL หรือ Domain ของเวบ็ ไซต์/ชอ่ื ไฟล์.นามสกุล”> ข้อความหรอื ชื่อรูปภาพ </a> รปู แบบการเชื่อมโยงไปยังไฟลต์ า่ ง ๆ ใหร้ ะบุตาแหน่งของไฟล์ด้วย IP Address URLหรอื Domain และตามด้วยช่อื ไฟล์และนามสกลุ ภายในแท็กเปิดของ <a href> ดงั ตัวอย่างท่ี 7.5ตัวอย่างท่ี 7.5 การเช่อื มโยงไปยงั ไฟลช์ นดิ ตา่ ง ๆ 1 <html> 2 <head><title>การเชื่อมโยงเวบ็ เพจ</title></head> 3 <body background = “images/bg.gif” bgcolor= “fde3be”> 4 <table border=“2” bordercolor=“blue” align=“center” width=“80%”> 5 <tr bgcolor=“white”> 6 <td colspan=“2”><center> 7 <a href=“http://61.7.240.182/jatuporn/work1.docx”>ใบงาน</a> 8 &nbsp;&nbsp; 9 <a href=“http://61.7.240.182/jatuporn/work2.xlsx”>แบบประเมิน</a> 10 &nbsp;&nbsp; 11 <a href=“http://61.7.240.182/jatuporn/work3.pdf”>แบบฝกึ หดั </a> 12 &nbsp;&nbsp; 13 <a href=“http://61.7.240.182/jatuporn/logo.jpg”>รปู ภาพ</a> 14 </td> 15 </tr> 16 <table> 17 </body> 18 </html>

 หน่วยท่ี 7 การเช่อื มโยงเว็บเพจ 228 จากตวั อยา่ งท่ี 7.5 กาหนดให้เช่อื มโยงไปยังไฟล์ 4 ประเภท และมจี ดุ เช่อื มโยง 4 จุดแสดงผลดังภาพที่ 7.14 จดุ เช่ือมโยงไปยงั ไฟล์ชนดิ ต่าง ๆ ภาพที่ 7.14 การแสดงผลการใช้แท็ก <a href> เช่ือมโยงไปยงั ไฟล์ เมือ่ คลิกเช่ือมโยงไปยัง ไฟล์ต่าง ๆ เบราว์เซอร์จะแสดงหน้าตา่ งใหเ้ ลอื กว่าตอ้ งการเปิดไฟล์ บันทึก หรือบันทึกเปน็ ชื่อไฟลใ์ หม่ ดังภาพท่ี 7.15 เปิดไฟล์ บนั ทกึ ไฟล์ บันทกึ เปน็ ชื่อไฟล์ใหม่ ภาพที่ 7.15 การแสดงผล รูปแบบการเปดิ ไฟล์ สาหรับจุดเชื่อมโยงในตัวอยา่ งท่ี 7.7 มกี ารเชอื่ มโยงไปยังไฟล์ 4 ประเภท ดงั นี้ 1) คลิกที่จุดเชื่อมโยง “ใบงาน” ได้เช่ือมโยงไปยังไฟล์ชื่อ work1.docx ไฟล์แสดงด้วยโปรแกรม Microsoft Word ดงั ภาพท่ี 7.16

 หนว่ ยที่ 7 การเช่ือมโยงเว็บเพจ 229 ภาพท่ี 7.16 การแสดงไฟลด์ ้วยโปรแกรม Microsoft Word 2) คลิกท่ีจุดเชื่อมโยง “แบบประเมิน” ได้เช่ือมโยงไปยังไฟล์ช่ือ work2.xlsx ไฟล์แสดงด้วยโปรแกรม Microsoft Excel ดงั ภาพที่ 7.17 ภาพท่ี 7.17 การแสดงไฟลด์ ้วยโปรแกรม Microsoft Excel 3) คลิกที่จุดเช่ือมโยง “แบบฝึกหัด” ได้เชื่อมโยงไปยังไฟล์ชื่อ work3.pdf ไฟล์แสดงด้วยโปรแกรม Adobe Acrobat ดงั ภาพที่ 7.18 ภาพที่ 7.18 การแสดงไฟล์ด้วยโปรแกรม Adobe Acrobat

 หนว่ ยที่ 7 การเชอื่ มโยงเวบ็ เพจ 230 4) คลิกท่ีจุดเช่ือมโยง รูปภาพ เชื่อมโยงไปยังไฟล์ช่ือ logo.jpg ไฟล์แสดงด้วยโปรแกรมเบราว์เซอร์ทีใ่ ชข้ ณะน้ัน ดงั ภาพที่ 7.19 ภาพท่ี 7.19 การแสดงไฟล์ภาพด้วย โปรแกรมเว็บเบราวเ์ ซอร์3. การกาหนดสีตัวอกั ษรสาหรับการเชื่อมโยงเวบ็ เพจ สีของตัวอักษรที่ใช้สาหรับการเชื่อมโยงจะมีสีแตกต่างกัน เมื่ออยู่ในสถานะของการเช่ือมโยงแบบต่าง ๆ ซ่งึ มี 3 สถานะ ดงั นี้ 3.1 สีตัวอักษรการเช่ือมโยงที่ยังไม่ได้ถูกคลิก (Hyperlink) ซง่ึ เป็นสีตัวของอักษรการเชื่อมโยงที่ยังไม่เคยแสดงผล โดยปกติถา้ จะแสดงเปน็ สฟี า้ และขีดเสน้ ใต้ 3.2 สีตวั อกั ษรการเช่อื มโยงทผ่ี า่ นการคลกิ ลิงคแ์ ลว้ (Visited Hyperlink) โดยเป็นสีตัวอักษรการเชือ่ มโยงทผ่ี า่ นการแสดงผลแล้ว ปกตเิ ป็นสมี ว่ งและขดี เส้นใต้ 3.3 สีตวั อักษรการเชื่อมโยงขณะลงิ ค์ (Active Hyperlink) ป็นสีตวั อักษรการเช่ือมโยง ขณะท่ีเว็บเพจท่เี ช่ือมโยงแสดงผลอยู่ ปกติเป็นสีแดงและขีดเสน้ ใต้ การกาหนดสตี วั อักษรสาหรบั การเชอื่ มโยง แสดงดังรปู แบบดังน้ี รปู แบบ attibute สีตัวอกั ษรการเชอื่ มโยง <body link = “ชอื่ สีหรือรหสั สี” vlink = “ชอ่ื สหี รอื รหัสสี” alink= “ชอ่ื สีหรือรหัสสี”> </body> link = “ชอ่ื สีหรือรหสั สี” คอื สตี วั อักษรการเช่ือมโยงทีย่ งั ไม่ได้ถูกคลิกลิงค์ vlink = “ชื่อสีหรือรหัสสี” คือ สตี ัวอกั ษรการเชอ่ื มโยงผ่านการคลกิ ลิงคแ์ ล้ว alink = “ชอ่ื สหี รอื รหสั สี” คอื สตี วั อักษรการเช่ือมโยงขณะลงิ ค์ รปู แบบการกาหนดสีตัวอกั ษรการเชอื่ มโยง โดยกาหนดดว้ ยแอตทรบิ ิวต์ link vlink และalink ภายในแท็กเปดิ <body> ดงั ตัวอยา่ งที่ 7.6

 หนว่ ยท่ี 7 การเช่อื มโยงเวบ็ เพจ 231ตวั อย่างที่ 7.6 การกาหนดสตี ัวอักษรเชอ่ื มโยง 1 <html> 2 <head><title>การเชือ่ มโยงเวบ็ เพจ</title></head> 3 <body background = “images/bg.gif” bgcolor=“fde3be” 4 link=“blue” vlink=“orange” alink=“red” > 5 <table border= “2” bordercolor= “blue” align= “center” width= “80%”> 6 <tr align=“center” align=“center” bgcolor=“white”> 7 <td colspan= “2”> 8 <center><img src=“images/hmenu.gif”></center> 9 <a href =“member.html”>สมาชิกอาเซียน</a> 10 &nbsp;&nbsp;<a href =“flower.html”>ดอกไมป้ ระจาชาติอาเซยี น</a> 11 &nbsp;&nbsp;<ahref = “languae.html”>ภาษากับอาเซยี น</a> 12 </td> 13 </tr> 14 </body> 15 </html> จากตัวอย่างที่ 7.6 กาหนดให้ link = “blue” ทาให้สตี ัวอักษรเชื่อมโยงท่ียังไม่ได้ถูกคลิกลงิ ค์เป็นสีน้าเงิน vlink = “orange” ทาให้สีตัวอักษรเชื่อมโยงผ่านการคลิกลิงค์แล้วเป็นสีส้ม และalink= “red” ทาให้สตี ัวอักษรเชอ่ื มโยงขณะลงิ ค์เป็นสแี ดง แสดงผลดงั ภาพที่ 7.20ผ่านการคลกิ ลงิ คแ์ ลว้ กาลงั ลงิ ค์ ยังไม่ถูกคลิกลิงค์ภาพที่ 7.20 การแสดงผล การกาหนดรปู แบบอักษรเชอ่ื มโยง

 หน่วยท่ี 7 การเชอ่ื มโยงเว็บเพจ 2324. การเชอ่ื มโยงเว็บเพจดว้ ยรปู ภาพ การเชื่อมโยงด้วยรูปภาพเป็นการเพ่ิมสีสันให้กับการเช่ือมโยงเว็บเพจ เมื่อเลื่อนเมาส์คลิกท่ีรูปภาพก็จะลิงค์ไปยังตาแหน่งท่ีระบุ โดยปกติรูปภาพท่ีแสดงจะมีเส้นขอบถ้าไม่ต้องการกาหนดให้border=“0” โดยมีรูปแบบดังนี้ รปู แบบแท็ก <a href> เชือ่ มโยงดว้ ยรูปภาพ <a href = “ ชื่อไฟล์ URL หรอื e- mail”> < img src = “โฟลเดอร์/ชอ่ื รูปภาพ”> </a> รูปแบบการเชอ่ื มโยงด้วยรูปภาพ ใชแ้ ท็ก <a href …> ตามด้วยกาหนดชอื่ รูปภาพภายในแท็ก <img> และปิดด้วย </a> ดังตัวอยา่ งท่ี 7.7ตัวอย่างท่ี 7.7 การเชื่อมโยงด้วยรปู ภาพ 1 <html> 2 <head><title>การเชอ่ื มโยงเว็บเพจ</title></head> 3 <body background = “images/bg.gif” bgcolor= “fde3be” > 4 <table border=“2” bordercolor=“blue” align =“center” width=“80%”> 5 <tr align=“center” align=“center” bgcolor=“white”> 6 <td><center><img src=“images/hmenu.gif”></center></td> 7 </tr> 8 <tr bgcolor=“d2d82f”><td> 9 <a href =“member.html”><img src=“images/link1_11.gif”> </a> 10 <a href =“flower.html”><img src=“images/link1_21.gif”> </a> 11 <a href =“language.html”><img src=“images/link1_31.gif”> </a> 12 <img src=“images/right.gif”> 13 </td> 14 </tr> 15 </table> 16 </body> 17 </html> จากตัวอย่างท่ี 7.7 กาหนดรปู ภาพเป็นจุดเชื่อมโยง 4 จุด ซ่งึ รูปภาพที่แสดงจะมเี ส้นขอบ

 หน่วยที่ 7 การเชอื่ มโยงเว็บเพจ 233แสดงผลดงั ภาพท่ี 7.21 รปู ภาพมีเสน้ ขอบ ภาพที่ 7.21 การแสดงผล การเชือ่ มโยงดว้ ยรูปภาพ การกาหนดไม่แสดงเสน้ ขอบรูปภาพท่ีใช้ในการเชอ่ื มโยง ดงั ตวั อย่างที่ 7.8ตวั อย่างท่ี 7.8 การไม่แสดงเส้นขอบรูปภาพ 1 <html> 2 <head><title>การเช่อื มโยงเวบ็ เพจ</title></head> 3 <body background =“images/bg.gif” bgcolor=“fde3be” > 4 <table border=“2” bordercolor=“blue” align=“center” width=“80%”> 5 <tr align=“center” align=“center” bgcolor=“white”> 6 <td><center><img src=“images/hmenu.gif”></center></td> 7 </tr> 8 <tr bgcolor=“d2d82f”> 9 <td> 10 <a href =“member.html”><imgsrc=“images/link1_11.gif” border=“0” ></a> 11 <a href=“flower.html”><img src=“images/link1_21.gif” border= “0”></a> 12 <a href =“language.html”><imgsrc=“images/link1_31.gif” border=“0”></a> 13 <img src=“images/right.gif”> 14 </td> 15 </tr> 16 </table> 17 </body> 18 </html>

 หนว่ ยท่ี 7 การเชือ่ มโยงเวบ็ เพจ 234 จากตวั อยา่ งที่ 7.8 กาหนดให้ border=“0” ใหก้ ับรปู ภาพทเ่ี ปน็ จุดเชอ่ื มโยงทาให้ไม่แสดงเสน้ ขอบรปู ภาพ แสดงผลดงั ภาพที่ 7.22 รูปภาพไม่มเี สน้ ขอบเม่ือ border = “0” ภาพที่ 7.22 การแสดงผล การไมแ่ สดงเส้นขอบรปู ภาพ 4.1 การกาหนดรูปภาพโต้ตอบเหตุการณก์ ารใชเ้ มาส์ การกาหนดให้รูปภาพเปลี่ยนเป็นอีกรูปหนึ่งเม่ือมีการวางเมาส์บนรูปภาพ และเมื่อเล่ือนเมาส์ออกก็จะเปลีย่ นเปน็ รูปภาพเดิม ซงึ่ เปน็ การสร้างลูกเลน่ และสสี ันในการเชอื่ มโยงมากขนึ้ โดยมรี ปู แบบดังนี้ รูปแบบแทก็ <a href> โต้ตอบการใช้เมาส์ <a href = “ช่อื ไฟล์ URL หรอื e- mail” onMouseOver = “ ช่ือรปู ภาพหลัก = ‘โฟลเดอร์/ชอื่ รูปภาพ ’ ” onMouseOut = “ ชอื่ รูปภาพหลัก = ‘โฟลเดอร์/ชอื่ รปู ภาพ ’ ”> < img name = “ช่ือรูปภาพหลกั ” src = “โฟลเดอร์/ช่ือรูปภาพ”> </a> onMouseOver การกาหนดรปู ภาพทตี่ ้องการให้เปลย่ี นเมอ่ื วางเมาสบ์ นรปู ภาพ onMouseOut การกาหนดรูปภาพทต่ี ้องการให้เปลย่ี นเมื่อเลือ่ นเมาส์ออกจากรปู ภาพ img name = “ชื่อรูปภาพหลัก” เปน็ การกาหนดใหร้ ูปภาพท่ีแสดงเป็นรูปภาพหลักสาหรับการลิงค์ รปู แบบให้รปู ภาพโต้ตอบเหตกุ ารณ์การใช้เมาส์ ดงั ตัวอย่างท่ี 7.9

 หนว่ ยท่ี 7 การเชือ่ มโยงเว็บเพจ 235ตัวอยา่ งที่ 7.9 การกาหนดให้รปู ภาพตอบสนองเหตกุ ารณ์การใชเ้ มาส์ 1 <html> 2 <head><title>การเชือ่ มโยงเวบ็ เพจ</title></head> 3 <body background=“images/bg.gif” bgcolor=“fde3be” > 4 <table border=“2” bordercolor=“blue” align=“center” width=“80%”> 5 <tr align=“center” align=“center” bgcolor=“white”> 6 <td><center><img src=“images/hmenu.gif”></center></td> 7 </tr> 8 <tr bgcolor=“d2d82f”> 9 <td> 10 <a href=“member.html” onMouseOver=“pic1.src=‘images/link1_12.gif’” 11 onMouseOut= “pic1.src= ‘images/link1_11.gif’”> 12 <img name=“pic1” src = “images/link1_11.gif” border= “0” > 13 </a> 14 <a href=“flower.html” onMouseOver=“pic2.src=‘images/link1_22.gif’” 15 onMouseOut= “pic2.src= ‘images/link1_21.gif’”> 16 <img name= “pic2” src = “images/link1_21.gif” border= “0” > 17 </a> 18 <a href = “language.html” onMouseOver = “pic3.src= 19 ‘images/link1_32.gif’” 20 onMouseOut= “pic3.src= ‘images/link1_31.gif’”> 21 <img name=“pic3” src = “images/link1_31.gif” border= “0” > 22 </a> 23 <img src= “images/right.gif”> 24 </td> 25 </tr> 26 </table> 27 </body> 28 </html>

 หน่วยที่ 7 การเชอ่ื มโยงเวบ็ เพจ 236 จากตัวอยา่ งที่ 7.9 กาหนดให้ <img src= “โฟลเดอร์/ชอ่ื รูปภาพ”> ซึ่งเป็นรูปภาพที่แสดงเมื่อเปิดเวบ็ เพจ แสดงผลดังตัวอย่างที่ 7.23 แสดงรูปภาพเชอื่ มโยง ภาพท่ี 7.23 การแสดงผล การเชอื่ มโยงดว้ ยรปู ภาพ เมอื่ เล่อื นเมาสบ์ นรปู ภาพ รูปภาพจะเปล่ยี นเปน็ รูปทีร่ ะบุไวห้ ลัง onMouseOve แสดงผลดงั ภาพที่ 7.24 รูปภาพเปลยี่ นเมอื่ เล่ือนเมาส์บนรูปภาพ ภาพที่ 7.24 การแสดงผล การใช้ onMouseOver เมอื่ เลือ่ นเมาสอ์ อกจากรูปภาพ รปู ภาพจะเปล่ียนเป็นรูปท่ีระบไุ วห้ ลัง onMouseOutแสดงผลดงั ภาพที่ 7.25 กลับมาเป็นรปู เดิมเมื่อเลอ่ื นเมาส์ออก ภาพท่ี 7.25 การแสดงผล การใช้ onMouseOut

 หน่วยที่ 7 การเช่ือมโยงเวบ็ เพจ 237 4.2 การเชื่อมโยงภาพแบบอมิ เมจแมพ็ (Image Maps) การเช่ือมโยงภาพแบบอิมเมจแม็พ คือ การกาหนดให้บางส่วนของรูปภาพเป็นจุดการเชอื่ มโยง เม่ือเล่ือนเมาส์ผา่ นจุดการเชอื่ มโยงเมาส์จะเปล่ียนเป็นสัญลักษณ์การลิงค์ นิยมใช้กับการเชื่อมโยงภาพในลักษณะของแผนท่ี การกาหนดจุดการเชื่อมมี 3 รูปทรง คือ สี่เหลี่ยม (Rectangle)วงกลม (Circle) และรปู อสิ ระหรือรปู หลายเหล่ียม (Polygon) 4.2.1 กาหนดพื้ นที่ เป็นรูปส่ีเหลี่ยม (Rectangle) โดยการกาหนดค่าโคออร์ดิเนต(Coordinates ) ซึ่งเป็นค่าของตาแหน่งบนแกน X, Y ค่าประกอบด้วย 4 ค่า คือ x1, y1, x2, y2 มีหน่วยเป็นพกิ เซล โดยมรี ปู แบบดังนี้ รปู แบบแทก็ <map> กาหนดพน้ื ทรี่ ูปภาพเปน็ รปู สเ่ี หล่ียม <map name=\"ช่ือรปู ภาพ\"> <area shape=\"rect\" coords=\"x1,y1,x2,y2\" href = “ชอื่ ไฟล์ URL หรือ e- mail” alt= “ขอ้ ความอธิบายรปู ภาพ”> </map> < img src = “โฟลเดอร์/ชือ่ รปู ภาพ” usemap= “#ช่อื รูปภาพ”> การหาค่าโคออรด์ ิเนตทาไดง้ ่ายด้วยการเปิดรูปภาพท่ีต้องการด้วยโปรแกรม Paint กาหนดให้Rulers Gridlines และ Status bar แสดง เมอ่ื เลื่อนเมาส์ไปยงั จดุ ท่ีต้องกาหนดการเชอื่ มโยง Statusbar จะแสดงค่า x,y ให้อตั โนมัติ โดยการหาค่าโคออรด์ เิ นตมขี ั้นตอนดังน้ี 4.2.1.1 การหาคา่ โคออร์ดเิ นต x1,y1 ให้เล่อื นเมาส์ทตี่ าแหนง่ มุมบนสดุ ด้านซา้ ยของรูปภาพ ให้สงั เกตการแสดงค่าโคออรด์ ิเนต x,y ซง่ึ ถือว่าเป็นค่าของ x1,y1 ค่าโคออรด์ ิเนต x1 = 123 y1=210 ดงั ภาพท่ี 7.26 แสดง Rulers Gridlines และ Status bar ตาแหน่ง x1,y1 คา่ โคออร์ดิเนต x,y ภาพที่ 7.26 การหาค่าโคออร์ดเิ นตรูปสเ่ี หล่ยี ม ตาแหนง่ x1 y1

 หน่วยที่ 7 การเช่ือมโยงเวบ็ เพจ 238 4.2.1.2 การหาค่าโคออร์ดิเนต x2,y2 เลื่อนเมาส์ท่ีตาแหน่งมุมล่างสุดด้านขวาของรูปภาพให้สงั เกตการแสดงคา่ โคออร์ดิเนตx,yซง่ึ ถอื ว่าเปน็ ค่าของx2,y2 คา่ โคออรด์ เิ นต x2= 382 y2=295 ดงั ภาพที่ 7.27 ตาแหนง่ x2,y2ค่าโคออร์ดเิ นต x,y ภาพท่ี 7.27 การหาค่าโคออร์ดิเนตรปู ส่ีเหล่ียม ตาแหนง่ x2 y2 รูปแบบการกาหนดพน้ื ทเี่ ปน็ รูปสเ่ี หลยี่ ม ดังตวั อย่างที่ 7.10ตวั อย่างที่ 7.10 การกาหนดพ้ืนท่ีการเช่ือมโยงเปน็ รูปสี่เหลย่ี ม 1 <html> 2 <body background = “images/bg.gif” bgcolor= “fde3be”> 3 <table align=“center” border=“2” bordercolor=“orange” bgcolor=“white”> 4 <tr> 5 <td><map name=“map_1”> 6 <area shape=“rect” coords=“123,210,382,295” alt=“ดอกไม้ประจา 7 ชาตอิ าเซยี น” href= “flower.html”> 8 </map> 9 <img src = “images/map.gif” usemap= “#map_1” border= “0”> 10 </td> 11 </tr> 12 <table> 13 </body> 14 </html> จากตวั อย่างที่ 7.10 จากการกาหนดพ้นื ทีเ่ ป็นสีเหล่ยี ม เม่ือเลอื่ นเมาส์ภายในพื้นทส่ี เี หลีย่ มจะเปน็รปู มือ และแสดงข้อความของรูปภาพ แสดงผลดังภาพท่ี 7.28

 หน่วยท่ี 7 การเชอื่ มโยงเวบ็ เพจ 239เมาส์เป็นรปู การลงิ ค์ ข้อความอธิบายรปู ภาพ ภายในส่เี หลยี ม ภาพที่ 7.28 การแสดงผล การกาหนดพืน้ ทีเ่ ชอื่ มโยงรปู ส่ีเหล่ยี ม 4.2.2 กาหนดพื้นที่ภาพเป็นรูปวงกลม (Circle) โดยการกาหนดค่าโคออร์ดิเนตจะประกอบดว้ ย 3 คา่ คอื x1, y1, r1 ซึ่ง x1,y1 คือ จุดศูนยก์ ลางของวงกลม สว่ น r1 คือ รัศมขี องวงกลม โดยมีรปู แบบดังน้ี รูปแบบแท็ก <map> กาหนดพื้นทรี่ ูปภาพเป็นรปู วงกลม <map name=\"ช่ือรูปภาพ\"> <area shape=\"circle\" coords=\"x1,y1,r1\" href = ชื่อไฟล์ URL หรอื e- mail alt= “ขอ้ ความอธบิ ายรูปภาพ”> </map> การหาค่าโคออรด์ เิ นตสาหรับการกาหนดพน้ื ท่ีรูปภาพเป็นรปู วงกลม มีขั้นตอนดังน้ี 4.2.2.1 การหาคา่ x1,y1 โดยการเล่อื นเมาส์ไปยังก่งึ กลางของรูปภาพ ให้สังเกตการแสดงค่าโคออร์ดิเนตx,y ที่ Status bar ซึ่งถอื ว่าเป็นคา่ ของ x1,y1 ค่าโคออรด์ เิ นตของ x1=88 และ y1=70 ดงั ภาพที่ 7.29 ตาแหน่ง x1,y1 คา่ x1 ค่า y1 ภาพที่ 7.29 การหาค่าโคออร์ดเิ นตรูปวงกลม ตาแหนง่ x1 y1 4.2.2.2 การหาค่า r1 หรือ รัศมีของวงกลม ให้เล่ือนเมาส์จากจุดก่ึงกลางของบริเวณภาพไปยังขอบด้านซ้ายสุดของภาพแล้วสังเกตค่า x ท่ี Status bar ซึ่ง x = 10 ให้คานวณโดยกาหนดให้r1 = x1-x จะได้ว่า r1=88-10 ดงั น้นั r1 มีคา่ เทา่ กบั 78 ดงั ภาพที่ 7.30

 หนว่ ยที่ 7 การเชอ่ื มโยงเว็บเพจ 240ตาแหน่ง r1=x1-x คา่ x ภาพที่ 7.30 การหาคา่ โคออร์ดเิ นตรปู วงกลม ตาแหน่ง r1 รปู แบบการกาหนดพ้ืนท่กี ารเชื่อมโยงเปน็ รปู วงกลม ดงั ตัวอย่างท่ี 7.11ตวั อย่างที่ 7.11 การกาหนดพ้ืนท่ีการเช่ือมโยงเป็นรปู วงกลม 1 <html> 2 <body background=“images/bg.gif” bgcolor=“fde3be”> 3 <table align=“center” border=“2” bordercolor=“orange” bgcolor=“white”> 4 <tr> 5 <td> 6 <map name=“map_2”> 7 <area shape= “circle” coords=“88,70,78” alt=“สมาชกิ อาเซยี น” 8 href=“member.html”> 9 </map> 10 <img src=“images/map.gif” usemap=“#map_2” border=“0”> 11 </td> 12 </tr> 13 <table> 14 </body> 15 </html> จากตวั อย่างที่ 7.11 จากการกาหนดพ้ืนท่ีเป็นวงกลมเม่อื เล่ือนเมาสภ์ ายในพ้ืนทวี่ งกลมจะเป็นรูปมือ และแสดงข้อความของรปู ภาพ แสดงผลดงั ภาพท่ี 7.31

 หนว่ ยท่ี 7 การเชอ่ื มโยงเว็บเพจ 241 เมาสเ์ ป็นรูปการลงิ ค์ในบรเิ วณรูปวงกลม ภาพที่ 7.31 การแสดงผล การกาหนดพ้นื ทเ่ี ช่ือมโยงเปน็ รูปวงกลม 4.2.2 กาหนดพ้ืนที่รูปภาพเป็นรูปหลายเหล่ียม (Polygon) การกาหนดค่าโคออร์ดิเนตจะประกอบด้วย x1,y1,x2,y2,…xn,yn ซ่ึงจานวนค่า x,y จะขึ้นอยู่กับจานวนเหลี่ยมของบริเวณภาพที่ตอ้ งการ ดังภาพท่ี 7.32 ถึง ภาพท่ี 7.37 เปน็ การกาหนดพ้ืนท่ีใหก้ ับภาพเป็นรูป 6 เหลย่ี ม ค่า x6,y6จึงจะเปน็ ตาแหน่งของมมุ เหลี่ยมสุดทา้ ยของรูปภาพ มขี ้ันตอนดังน้ี 4.2.3.1 การหาค่า x1,y1 เป็นมุมเหล่ียมแรกท่ีอยู่ด้านซ้ายของรูปให้สังเกตการแสดงค่าโคออรด์ เิ นต x,y ซึง่ ถือว่าเป็นคา่ ของ x1,y1 ค่าโคออรด์ เิ นตของ x1=354 และ y1=117 ดงั ภาพที่ 7.32คา่ X1,Y1 ตาแหนง่ X1,Y1 ภาพที่ 7.32 การหาคา่ โคออร์ดิเนตรปู หลายเหล่ียม ตาแหน่ง x1 y1 4.2.3.2 การหาค่า x2,y2 เป็นมุมเหลี่ยมท่ีสองที่อยู่ถัดจากจุด x1,y1 ให้สังเกตการแสดงค่าโคออรด์ เิ นต x,y ซง่ึ ถอื ว่าเป็นคา่ ของ x2,y2 ค่าโคออร์ดิเนตของ x2=439 และ y2=119 ดงั ภาพที่ 7.33

 หนว่ ยที่ 7 การเชือ่ มโยงเว็บเพจ 242คา่ X2,Y2 ตาแหน่ง X2,Y2 ภาพที่ 7.33 การหาค่าโคออร์ดิเนตรูปหลายเหลีย่ ม ตาแหน่ง x2 y2 4.2.3.3 การหาค่า x3,y3 เป็นมุมเหล่ียมท่ีสามอยู่ถัดจากจุด x2,y2 ให้สังเกตการแสดงคา่ โคออรด์ ิเนต x,y ซึง่ ถอื ว่าเป็นคา่ ของ x3,y3 คา่ โคออรด์ ิเนตของ x3=486 และ y3=63 ดงั ภาพ 7.34ค่า X3,Y3 ตาแหนง่ X3,Y3 ภาพที่ 7.34 การหาคา่ โคออร์ดเิ นตรปู หลายเหล่ียม ตาแหนง่ x3 y3 4.2.3.4 การหาค่า x4,y4 เป็นมุมเหล่ียมที่ส่ีอยู่ถดั จากจดุ x3,y3 ใหส้ งั เกตการแสดงค่าโคออร์ดเิ นต x,y ซงึ่ ถือว่าเปน็ คา่ ของ x4,y4 ค่าโคออร์ดเิ นตของ x4=442 และ y4=12 ดงั ภาพท่ี 7.35 ตาแหน่ง X4,Y4 ค่า X4,Y4 ภาพท่ี 7.35 การหาคา่ โคออร์ดิเนตรูปหลายเหลี่ยม ตาแหน่ง x4 y4

 หนว่ ยที่ 7 การเช่อื มโยงเว็บเพจ 243 4.2.3.5 การหาคา่ x5,y5 เปน็ มมุ เหลย่ี มทหี่ า้ อยู่ถดั จากจุด x4,y4 ให้สงั เกตการแสดงคา่ โคออรด์ เิ นต x,y ซ่ึงถือวา่ เปน็ ค่าของ x5,y5 ค่าโคออร์ดเิ นตของ x5=356 และ y5=12 ดงั ภาพที่ 7.36 ตาแหน่ง X5,Y5 ค่า X5,Y5 ภาพท่ี 7.36 การหาคา่ โคออรด์ ิเนตรปู หลายเหล่ียม ตาแหนง่ x5 y5 4.2.3.6 การหาค่า x6,y6 เป็นมุมเหลย่ี มทห่ี กซง่ึ เปน็ จดุ สุดท้ายของรปู ภาพ ค่าโคออร์ดิเนตของ x6=310 และ y4=64 ดงั ภาพที่ 7.37 ตาแหนง่ X6,Y6 คา่ X6,Y6 ภาพที่ 7.37 การหาคา่ โคออร์ดิเนตรปู หลายเหลยี่ ม ตาแหน่ง x6 y6 รูปแบบการกาหนดพน้ื ท่ีการเชื่อมโยงเปน็ รปู หลายเหล่ยี ม ดงั ตัวอยา่ งที่ 7.12

 หน่วยที่ 7 การเชือ่ มโยงเวบ็ เพจ 244ตัวอย่างท่ี 7.12 การกาหนดพื้นท่ีการเชือ่ มโยงเป็นรปู หลายเหลย่ี ม <html> <body background = “images/bg.gif” bgcolor= “fde3be”> <table align=“center” border=“2” bordercolor=“orange” bgcolor=“white”> <tr> <td> <map name=“map_3> <area shape=“poly” coords=“354,117,439,119,486,63,442,12,356,12,310,64” alt=“สมาชกิ อาเซยี น” href=“language.html”> </map> <img src=“images/map.gif” usemap=“#map_3” border= “0”> </td> </tr> </table> </body> </html> จากตัวอย่างท่ี 7.12 จากการกาหนดพ้ืนท่ีเป็นรูปหลายเหลี่ยม เมื่อเลื่อนเมาส์ภายในพื้นท่ีรูปหลายเหล่ยี มจะเปลีย่ นเปน็ รปู มอื และแสดงข้อความของรปู ภาพ แสดงผลดังภาพที่ 7.38 เมาส์เป็นรูปการลงิ ค์ในรูปหกเหล่ยี ม ภาพท่ี 7.38 การแสดงผล การกาหนดพน้ื ทเี่ ชอ่ื มโยงเป็นรูปหลายเหลีย่ ม

 หนว่ ยท่ี 7 การเชอ่ื มโยงเว็บเพจ 2455. การกาหนดตาแหนง่ การเชอื่ มโยง การกาหนดตาแหน่งเชื่อมโยงเป็นการระบุการแสดงเว็บเพจบนหน้าต่างของเว็บเบราว์เซอร์โดยปกติการแสดงเว็บเพจจะแสดงบนหน้าต่างเดิมถ้าไม่มีการกาหนดตาแหน่ง แต่ปัจจุบันเว็บไซต์ต่าง ๆให้หน้าต่างที่แสดงเว็บเพจเดิมยังแสดงอยู่ขณะมีการเช่ือมโยง และเว็บเพจใหม่แสดงซ้อนอยู่ด้านบนเพือ่ ความสะดวกในการเยีย่ มชมเว็บเพจ โดยมรี ูปแบบดงั นี้ รปู แบบแท็ก <a href> กาหนดตาแหนง่ เชอ่ื มโยง <a href = “ชื่อไฟล์ URL หรือ e-mail” target = “ตาแหน่ง”>ขอ้ ความ หรอื ชอ่ื รปู ภาพ< /a> ตาแหนง่ ในการแสดงการเชื่อมโยง _blank แสดงเวบ็ เพจในหน้าต่างใหม่ _self แสดงเว็บเพจบนหน้าตา่ งเดิม _parent แสดงเวบ็ เพจในเฟรมปจั จบุ ัน _top แสดงเวบ็ เพจบนเฟรมทัง้ หมด รปู แบบการกาหนดตาแหนง่ การเช่อื มโยง โดยกาหนด target = “ตาแหนง่ แสดงการเช่อื มโยง”ภายในแท็กเปดิ ของ <a href…> ดงั ตวั อยา่ งที่ 7.13ตัวอย่างท่ี 7.13 การกาหนดตาแหนง่ การแสดงเว็บเพจ 1 <html> <head><title>การเช่ือมโยงเวบ็ เพจ</title></head> 2 <body background =“images/bg.gif” bgcolor=“fde3be” > 3 <table border=“2” bordercolor=“blue” align=“center” width=“80%”> 4 <tr align=“center” align=“center” bgcolor=“white”> 5 <td><center><img src=“images/hmenu.gif”></center></td> 6 </tr> 7 <tr bgcolor= “d2d82f”> 8 <td> <a href=“member.html” target=“_blank”> 9 <img src=“images/link1_11.gif” border=“0”></a> 10 <a href = “flower.html” target=“_self”> 11

 หน่วยท่ี 7 การเช่ือมโยงเว็บเพจ 246 12 <img src= “images/link1_21.gif” border=“0”></a> 13 <a href=“language.html”><img src=“images/link1_31.gif” border= “0”></a> 14 <img src= “images/right.gif”></td> 15 </tr> 16 </table> 17 </body> </html> จากตัวอย่างท่ี 7.13 กาหนดให้จดุ เช่ือมโยงเป็นรปู ภาพ และตาแหน่งการเชอ่ื มให้ target=“_blank”และ target=“_self” แสดงผลดงั ภาพที่ 7.39 ภาพที่ 7.39 การแสดงผล การเช่อื มโยงไปตาแหนง่ การแสดง เม่อื คลิกทร่ี ูปภาพ “สมาชอิ าเซยี น” ซง่ึ กาหนดตาแหน่งการเชอื่ มโยงให้ target=“_blank”ทาให้เปิดหน้าตา่ งใหม่แสดงเวบ็ เพจ แสดงผลดังภาพ 7.40 เว็บเพจเดมิ ยังแสดงด้านหลัง เปดิ หน้าต่างใหม่แสดงเว็บเพจ ภาพท่ี 7.40 การแสดงผล การกาหนดตาแหน่ง target =“_blank”

 หนว่ ยที่ 7 การเชือ่ มโยงเว็บเพจ 247 เมอื่ คลกิ ทรี ปู ภาพ “ดอกไม้ประจาอาเซียน” ซง่ึ กาหนดตาแหนง่ การเช่อื มโยงให้ target=“_self”ทาให้แสดงเวบ็ เพจแทนหน้าตา่ งเดมิ สามารถคลกิ ปุ่มกลบั เพือ่ ยอ้ นไปเว็บเพจเดมิ แสดงผลดังภาพ 7.41คลกิ กลับเวบ็ เพจเดมิ แสดงเวบ็ เพจแทนหน้าตา่ งเดิมภาพท่ี 7.41 การแสดงผล การกาหนดตาแหน่ง target=“_self”

 หนว่ ยท่ี 7 การเชือ่ มโยงเว็บเพจ 248 บทสรุป การเชอื่ มโยงเว็บเพจ คือ การกาหนดทิศทางความสัมพันธ์กันของเอกสารในระบบเครือข่ายอินเทอร์เน็ต ส่วนประกอบของการเชื่อมโยงเว็บเพจมี 2 ส่วน ได้แก่ ต้นทาง (Source Anchor) คือ จุดเชื่อมโยง และปลายทาง (Destination Anchor) คือ ตาแหน่งของข้อมูลที่ต้องการเชื่อมโยง รูปแบบการเช่ือมโยงเว็บเพจมีหลายรูปแบบ ได้แก่ การเช่ือมโยงภายในเว็บเพจใช้สาหรับข้อมูลที่มีในเว็บเพจปริมาณมาก เมื่อคลิกจุดเชื่อมโยงเว็บเบราว์เซอร์จะเล่ือนไปยังกลุ่มข้อมูลที่ต้องการอัตโนมัติ การเชอ่ื มโยงไปยงั เว็บเพจเป็นการเชื่อมโยงไปยังช่ือไฟลน์ ามสกุล .html การเชอ่ื มโยงไปยงั เวบ็ ไซต์อื่น ๆด้วยการระบุ IP Address URL หรือ Domain การเช่ือมโยงอีเมลเป็นการติดต่อกับอีเมลผู้รับ และการเชื่อมโยงไฟล์ต่าง ๆ ในการเช่ือมโยงจะระบุตาแหน่งและชื่อของไฟล์ การกาหนดสีอักษรสาหรับการเช่ือมโยงเว็บเพจมี 3 ส่วน ได้แก่ link เป็นสีตัวอักษรการเช่ือมโยงท่ียังไม่ได้ถูกคลิกลิงค์ vlinkเป็นสีตัวอักษรการเช่ือมโยงผ่านการคลิกลิงค์แล้ว และ alink เป็นสีตัวอักษรการเช่ือมโยงขณะลิงค์การเชื่อมโยงเว็บเพจด้วยรูปภาพ เป็นการเพิ่มสีสันให้กับการเชื่อมโยงเว็บเพจ การกาหนดรูปภาพโต้ตอบเหตุการณ์การใช้เมาส์เพ่ือเพ่ิมลูกเล่นในการเช่ือมโยงประกอบด้วยคาสั่ง onMouseOver เพื่อกาหนดรูปภาพท่ีต้องการเปลี่ยนเม่ือวางเมาส์บนรูปภาพ onMouseOut เป็นการกาหนดให้รูปภาพเปล่ียนเม่ือเล่ือนเมาส์ออกจากรูปภาพ การเช่ือมโยงภาพแบบอิมเมจแม็พ เป็นการแบ่งพ้ืนท่ีรูปภาพให้เป็นจุดเชื่อมโยงข้อมูลสามารถแบ่งพื้นท่ีได้ 3 รูปแบบ ได้แก่ รูปส่ีเหล่ียม รูปวงกลม และ รูปหลายเหล่ียมการกาหนดตาแหน่งการเชื่อมโยงมี 4 แบบ ไดแ้ ก่ การแสดงเวบ็ เพจในหนา้ ต่างใหม่ การแสดงเวบ็ เพจบนหน้าต่างเดิม การแสดงเว็บเพจในเฟรมปัจจบุ นั การแสดงเว็บเพจบนเฟรมทงั้ หมด

 หนว่ ยท่ี 7 การเช่อื มโยงเว็บเพจ 249 แบบฝกึ หัดหนว่ ยท่ี 7 การเชอ่ื มโยงเว็บเพจตอนที่ 1 จงตอบคาถามตอ่ ไปน้ี (10 คะแนน)1. การเช่ือมโยงมีก่ีรูปแบบ อะไรบ้าง………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………2. จงเขียนโปรแกรมด้วยภาษา HTML ในการกาหนดจุดเช่ือมโยงด้วยรูปภาพ โดยแสดงรูปภาพpicture1.jpg และเม่ือเลอ่ื นเมาสบ์ นรปู ภาพเปล่ียนเปน็ picture2.jpg………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………3. จงอธิบายรูปแบบของสีอกั ษรการเช่ือมโยงตอ่ ไปน้ี 3.1 link คือ……………………………………………………………………………………………………………………… 3.2 vlink คือ……………………………………………………………………………………………………………………. 3.3 alink คือ……………………………………………………………………………………………………………………3. จงยกตวั อย่างการกาหนดพ้นื ทก่ี ารเช่ือมแบบ Image map แบบรปู ภาพสเ่ี หลยี่ ม………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

 หนว่ ยท่ี 7 การเช่ือมโยงเว็บเพจ 2505. จงยกตวั อย่างการกาหนดพื้นท่ีการเช่อื มแบบ Image map แบบรูปภาพวงกลม………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………ตอนท่ี 2 จงใส่เครอ่ื งหมาย หนา้ ข้อความท่ีถูกและใสเ่ ครอ่ื งหมาย หน้าข้อทีผ่ ดิ (10 คะแนน).............1. r1 คอื รัศมีของรปู สี่เหลี่ยม.............2. เป็นสัญลักษณ์ของเมาส์สาหรับการเช่ือมโยง.............3. mailto: การกาหนดอีเมลแอดเดรสของผู้รับอเี มล.............4. onMouseOut เป็นการกาหนดใหเ้ ปล่ียนรปู ภาพเม่ือเล่ือนเมาส์ออก.............5. <body link = “ชื่อสหี รือรหสั สี”> คอื สตี ัวอักษรการเช่ือมโยงทย่ี ังไมไ่ ด้ถกู คลิก.............6. การเปดิ ไฟล์ทมี ีการเชือ่ มโยงจะแสดงดว้ ยโปรแกรมเว็บเบราว์เซอร์เสมอ.............7. <a href = “http://google.co.th”> เปน็ การเชอื่ มโยงไปยงั เว็บไซต์.............8. <a href = “# ชอ่ื ตาแหน่งปลายทาง”> เปน็ การเชื่อมโยงภายในเว็บเพจ.............9. การกาหนดรูปภาพให้ onMouseOver และ onMouseOut ควรเปน็ ภาพเดียวกัน.............10. <area shape=\" circle\" coords=\"x1,y1,x2,y2\"> เป็นการกาหนดตาแหน่งพื้นท่รี ูป หลายเหลย่ี มของอิมเมจแม็พ

 หนว่ ยที่ 7 การเชอ่ื มโยงเวบ็ เพจ 251 ใบงานหนว่ ยท่ี 7คาช้ีแจง ให้นักศึกษาเขียนโปรแกรมด้วยภาษา HTML เพ่ือเช่ือมโยงเว็บเพจ โดยนักศึกษาเลือกเนือ้ หาเกี่ยวกบั วัฒนธรรมไทยสาหรบั การสรา้ งเว็บเพจตามความเหมาะสม (10 คะแนน) 1. สรา้ งเว็บเพจหน้าหลกั จานวน 1 หน้า โดยกาหนดไฟล์ช่ือ index.html 2. สร้างเว็บเพจหน้าเน้ือหา จานวน 3 หน้า โดยกาหนดไฟล์ชื่อ link1.html link2.htmlและ link3.html 3. เวบ็ เพจหน้าหลักเชอ่ื มโยงไปยังหน้าเนอื้ หาท้งั 3 หนา้ ได้ 4. เว็บเพจหน้าเนื้อหาท้งั 3 หนา้ เชอ่ื มโยงกลบั หน้าหลกั ได้ 5. การออกแบบจดุ เชอ่ื มโยง ไดท้ ง้ั แบบอกั ษร รปู ภาพ และ image map

 หน่วยที่ 7 การเชื่อมโยงเว็บเพจ 252 แบบประเมนิ ใบงาน หน่วยท่ี 7ช่อื -สกุล…………………………………………เลขท.่ี .......................ชน้ั เรียน/กลมุ่ ........................................ลาดับ รายการประเมนิ คะแนน รวมเฉลี่ย 4 32 1 (10 คะแนน)1 การสรา้ งเว็บเพจ2 การเชอ่ื มโยง3 การออกแบบจุดเช่ือมโยง4 มวี ินัย รับผิดชอบ5 ความสนใจใฝร่ ู้ รวมระดบั คะแนน 4 = ดี 3 = ปานกลาง 2 = พอใช้ 1 = ปรบั ปรุง

 หนว่ ยท่ี 7 การเช่ือมโยงเว็บเพจ 253 แบบทดสอบหลังเรยี นหนว่ ยที่ 7คาชแ้ี จง เลอื กคาตอบท่ีถูกที่สุดเพยี งข้อเดยี ว1. <a href = “# ชอ่ื ตาแหนง่ ปลายทาง”>…</a> เป็นการเชื่อมโยงลักษณะใด ก. การเชือ่ มโยงไปยังอเี มล ข. การเช่ือมโยงไปยังเวบ็ ไซต์ ค. การเชอ่ื มโยงไปยังไฟล์เอกสาร ง. การเช่อื มโยงภายในเวบ็ เพจเดยี วกัน2. ข้อใดเปน็ รปู แบบการเชื่อมโยงไปยังเว็บเพจ ก. <a href = “#test_link1”>…</a> ข. <a href = “test_link1.html”>…</a> ค. <a href = “#www.test_link1”>…</a> ง. <a href = “www.test_link1”>…</a>3. ถา้ ต้องการเชอ่ื มโยงไปยงั IP Address “75.120.225.320” มีลกั ษณะแบบใด ก. 75.120.225.320 ข. //:75.120.225.320 ค. www. 75.120.225.320 ง. http:// 75.120.225.3204. ข้อใดเป็นการเช่อื มโยงไปยังอเี มล ก. <a href = “mailto:....”>… </a> ข. <a href = “e-mail:....”>… </a> ค. <a href = “mail-to:....”>… </a> ง. <a href = “mailget:....”>… </a>5. เปน็ สญั ลักษณข์ องเมาส์สถานะใด ก. การเลือก ข. การเชือ่ มโยง ค. การปรับขนาด ง. การเคล่ือนยา้ ย

 หนว่ ยท่ี 7 การเชอ่ื มโยงเวบ็ เพจ 2546. แอตทรบิ ิวต์ “alink” เป็นการกาหนดสีตวั อักษรการเชอื่ มโยงสถานะใด ก. สีตวั อกั ษรการลิงค์ ข. สีตัวอักษรผ่านการลิงค์ ค. สีตวั อักษรขณะกาลงั ลงิ ค์ ง. สีตัวอักษรไม่ผา่ นการลิงค์7. ขอ้ ใดเปน็ การกาหนดให้รปู ภาพเปลีย่ นเม่อื เลือ่ นออกจากรปู ภาพ ก. onMouseIn= \"pic1.src = 'images/link12.gif' \" ข. onMouseOn= \"pic1.src = 'images/link12.gif' \" ค. onMouseOut= \"pic1.src = 'images/link12.gif' \" ง. onMouseOver= \"pic1.src = 'images/link12.gif' \"8. ขอ้ ใดเป็นการกาหนดใหร้ ปู ภาพเปลยี่ นเมอ่ื เล่ือนเมาส์บนรูปภาพ ก. onMouseIn= \"pic1.src = 'images/link12.gif' \" ข. onMouseOn= \"pic1.src = 'images/link12.gif' \" ค. onMouseOut= \"pic1.src = 'images/link12.gif' \" ง. onMouseOver= \"pic1.src = 'images/link12.gif' \"9. ถ้าต้องการกาหนด Image Map ให้มพี ้ืนที่การเชอื่ มโยงเป็นรปู สี่เหลยี่ มตอ้ งกาหนดรูปแบบใด ก. <area shape=\"rect\" coords=\"x1,y1,x2,y2\"> ข. <area shape=\"map\" coords=\"x1,y1,x2,y2\"> ค. <area shape=\" poly\" coords=\"x1,y1,x2,y2\"> ง. <area shape=\" circle\" coords=\"x1,y1,x2,y2\">10. การแสดงเวบ็ เพจบนตาแหน่งหนา้ ตา่ งใหม่ ต้องกาหนด target แบบใด ก. <a href… target =“_new”> ข. <a href… target =“_self”> ค. <a href… target = “_blank”> ง. <a href… target = “_parent”>

 หนว่ ยที่ 7 การเชอ่ื มโยงเว็บเพจ 255 เอกสารอา้ งอิงหน่วยท่ี 7กังวาน อัศวไชยวศนิ อรพนิ ประวตั บิ รสิ ุทธ์ิ ค่มู ือสร้างเวบ็ ไซตด์ ว้ ย HTML5 Css3 & JavaScript กรงุ เทพฯ : โปรวชิ ่ัน, 2556.จรี าวุธ วารินทร.์ พัฒนาเวบ็ ไซต์สมัยใหมด่ ้วย HTML5 CSS3 JavaScript กรงุ เทพฯ : รไี วว่า, 2555.บัญชา ปะสลี ะเตสัง. สร้างเว็บไซตด์ ว้ ย HTML5 รว่ มกบั CSS3 และ jQuery กรงุ เทพฯ : ซเี อ็ดยูเคชชั่น, 2556.ประชา พฤกษป์ ระเสริฐ. สร้างเว็บเพจและเพิม่ ลกู เลน่ ด้วย HTML & XHTML กรงุ เทพฯ : รีไวว่า, 2555.ชิดพงษ์ กววี รวฒุ ิ. กา้ วทันอาเซยี น กรงุ เทพฯ : บริษทั ซีเอ็ดยูเคชั่น ,2556Henry Bojack. Blended HTML XHTML and CSS United States of America : GEX, 2010Patrick Carey. HTML XHTML and Dynamic HTML United States of America : GEX, 2010HTML Tutorial [Online]. เขา้ ถึงไดจ้ าก : http://www.w3schools.com/html/default.asp วนั ทคี่ ้นขอ้ มูล 25 สงิ หาคม 2556

 หน่วยที่ 7 การเชื่อมโยงเวบ็ เพจ 256 HTML HTMLHTML HTML