Embed Size (px)
Citation preview
หน่�วยการเรยน่ร��ที่� 5การเชื่��อมโยงเว�บเพจ (LINK)
ว�ธีการเชื่��อมโยง (LINK) เว�บเพจการลิ�งค์� หร�อเรยกอกอย�างว�า ต้�น่ก าเน่�ดใยแมงม$มเสม�อน่ การที่�เรยกเชื่�น่น่&เพราะว�าใน่เว�บเพจจะมการเชื่��อมโยงแต้�ลิะหน่�าเว�บเข้�าด�วยก)น่ จ*งเปรยบเสม�อน่ใยแมงม$มที่�โยงใยไปที่)�ว จ$ดเร��มต้�น่ข้องใยแมงม$มเม��อเก�ดข้*&น่ได�ก�ต้�องมจ$ดส�&น่ส$ด เชื่�น่เดยวก)บจ$ดลิ�งค์�ข้องเว�บเพจ เม��อมจ$ดเร��มต้�น่ก�ต้�องมจ$ดส�&น่ส$ดเชื่�น่เดยวก)น่โดยจ$ดที่)&งสองค์�อ จ$ดลิ�งค์�แลิะปลิายที่างข้องลิ�งค์� (Anchor) ซึ่*�งจ$ดลิ�งค์�น่)&น่เราจะต้�องสร�างข้*&น่มาเอง ส�วน่ปลิายที่างข้องลิ�งค์�จะมที่)&งแบบที่�ไม�ต้�องสร�างข้*&น่มา (ชื่��อเว�บเพจหร�อ URL) แลิะแบบที่)&งที่�ต้�องสร�างข้*&น่มา (ส�วน่ย�อยข้องเว�บเพจ)
การเชื่��อมโยงน่& สามารถแบ�งได�ที่)&ง 4 ประเภที่ ค์�อ 1. การเชื่��อมโยงระหว�างเว�บเพจ <a href="ไฟลิ�เว�บเพจ">...ส��งที่�จะลิ�งค์�...</a> 2. การเชื่��อมโยงน่อกเว�บไซึ่ต้� <a href="URL">...ส��งที่�จะลิ�งค์�...</a> 3. การเชื่��อมโยงภายใน่หน่�าเว�บเพจ <a name="ก าหน่ดชื่��อปลิายที่าง"></a> แลิะ <a href="#ชื่��อปลิายที่าง">..ส��งที่�จะลิ�งค์�...</a> 4. การเชื่��อมโยงแบบอเมลิ� <a href="mailto: E-mail address ที่�ต้�องการส�งถ*ง">..ส��งที่�จะลิ�งค์�...</a>
ใน่การเชื่��อมโยง (ลิ�งค์�) เราสามารถที่�จะลิ�งค์�โดยใชื่�ร�ปภาพ หร�อข้�อค์วามก�ได� โดยเม��อร�ปภาพหร�อข้�อค์วามถ�กลิ�งค์� เม��อเราที่ดสอบ ผ่�าน่เว�บบราวเซึ่อร� ส)ญลิ)กษณ์�เมาส�ข้องเราจะเปลิ�ยน่จากภาพลิ�กศร เป7น่ภาพม�อแที่น่ เม��อเมาส�ถ�กเลิ��อน่ไปอย��บร�เวณ์ที่�เราได�ลิ�งค์�ไว�
ร�ปแบบการเชื่��อมโยงระหว�างเว�บเพจ
<html> <head><title> ....การเชื่��อมโยงระหว�างเว�บเพจ....</title></head> <body> <a href="index.html">ค์ลิ�8กที่�น่&เพ��อกลิ)บไปหน่�าแรก</a>
<p> <!--ลิ�งค์�โดยใชื่�ข้�อค์วาม -> <a href="index.html"><img src="home.gif">
</a> <!--ลิ�งค์�โดยใชื่�ร�ปภาพ -> </body> </html>
ร�ปแบบการเชื่��อมโยงน่อกเว�บไซึ่ต้�
<html> <head><title> ....การเชื่��อมโยงน่อกเว�บไซึ่ต้�....</title></head> <body> <!--ลิ�งค์�โดยใชื่�ข้�อค์วาม -> <a href="http://www.nextstepdev.com">
ลิ�งค์�มาที่�เว�บไซึ่ต้� Nextstepdev.com</a><p> <!--ลิ�งค์�โดยใชื่�ร�ปภาพ -> <a href="http://www.nextstepdev.com">
<img src="nextstpdev.gif"></a> </body> </html>
การเชื่��อมโยงภายใน่หน่�าเว�บเพจ
<html> <head> <title> ....การเชื่��อมโยงภายใน่หน่�าเว�บเพจ โดยค์ลิ�8กที่�ด�าน่ลิ�าง แลิ�วเลิ��อน่ข้*&น่มาด�าน่บน่....</title> </head> <body> <!--ก าหน่ดชื่��อปลิายที่าง เข้ยน่โค์�ดส�วน่น่&ไว�บร�เวณ์ด�าน่บน่ข้องเพจ-> <a name="top"></a> <!--ชื่�วงระหว�างน่&ต้�องมข้�อม�ลิเยอะ ๆ เก�น่หน่*�งหน่�าเพจสกรน่จ*งจะเห�น่ผ่ลิการที่ างาน่-> <!--ลิ�งค์�โดยใชื่�ข้�อค์วาม เข้ยน่โค์�ดส�วน่น่&ไว�บร�เวณ์ด�าน่ลิ�างข้องเพจ -> <a href="#top">Go to Top</a><p> <!--ลิ�งค์�โดยใชื่�ร�ปภาพ เข้ยน่โค์�ดส�วน่น่&ไว�บร�เวณ์ด�าน่ลิ�างข้องเพจ -> <a href="#top"><img src="top.gif"></a> </body> </html>
การเชื่��อมโยงแบบอเมลิ�
<html> <head><title> ....การเชื่��อมโยงแบบอเมลิ�....</title></head> <body> <!--ลิ�งค์�โดยใชื่�ข้�อค์วาม -> <a href="mailto:[email protected]">
ลิ�งค์�เมลิ�ส�งเมลิ�ไปที่� [email protected]</a><p> <!--ลิ�งค์�โดยใชื่�ร�ปภาพ -> <a href="mailto:[email protected]">
<img src="contact.gif"></a> </body> </html>
