หน่วยที่ 6

12
หหหหหหหห 6 หหหหหหหหหหหหหหหหหหหหหหหหห (Link)

Upload: ton-tc-tmsb

Post on 12-Aug-2015

136 views

Category:

Documents


1 download

TRANSCRIPT

หน่�วยที่�� 6 เชื่��อมโยงเว�บเพจด้�วยลิ�งก์� (Link)

เว�บเพจ จำ��นวนน�บล้�นหน�ที่ �พบในอิ�นเที่อิร์�เน�ต จำะไม่�ม่ ปร์ะโยชน�เล้ยห�กก�ร์เช!�อิม่โยงถึ$งโดยก�ร์ล้�งก� ซึ่$�งเป'นสิ่��งที่ �ช�วยใหผู้*ใชสิ่�ม่�ร์ถึที่�อิงอิ�นเที่อิร์�เน�ตไดโดยก�ร์คล้�ก เพ!�อิไปสิ่*�หน�เว�บเพจำต��งๆ ก�ร์ใชล้�งก�น -เอิง ที่��ใหเว�บเพจำแตกต��งจำ�กเอิกสิ่�ร์ธร์ร์ม่ด� เพร์�ะม่�นที่��ใหเน!-อิห�ในเว�บเพจำสิ่�ม่�ร์ถึตอิบสิ่นอิงผู้*ใชไดโดยที่ �ผู้*ใชไม่�ตอิงอิ��นเน!-อิห�ที่�-งหม่ดในเว�บแต�ล้ะหน� แต�สิ่�ม่�ร์ถึคล้�กเพ!�อิเป0ดด1เฉพ�ะเว�บเพจำที่ �สิ่นใจำ ในบที่น -จำะกล้��วถึ$งก�ร์สิ่ร์�งล้�งก� ร์*ปแบบต��งๆ เพ!�อิเช!�อิม่โยงข้อิม่*ล้ในเว�บเพจำเข้�ดวยก�น

ก์ารสร�างลิ�งก์� <a>ล้�งก�สิ่�ม่�ร์ถึเช!�อิม่โยงข้อิม่*ล้ได 3 ว�ธ ค!อิ .ก�ร์เช!�อิม่โยงข้อิม่*ล้ภ�ยในหน�เว�บเพจำเด ยวก�น .ก�ร์เช!�อิม่โยงข้อิม่*ล้ในหน�เว�บเพจำหน�อิ!�น .ก�ร์เช!�อิม่โยงข้อิม่*ล้ในหน�เว�บไซึ่ต�อิ!�นก์ารเชื่��อมโยงข้�อม�ลิภายใน่เว�บหน่�าเด้�ยวก์"น่ ห�กเร์�ม่ ข้อิม่*ล้ภ�ยในเว�บเด ยวก�นที่ �ตอิงก�ร์เช!�อิม่โยง โดยเม่!�อิม่ ก�ร์คล้�กที่ �ล้�งก�ใหเล้!�อิน

ข้$-นบนหร์!อิล้งล้��งไปที่ �ต��แหน�งข้อิม่*ล้น�-นอิย*� ใหเร์�ใชค��สิ่� �งก์ารเชื่��อมโยงข้�อม�ลิใน่เว�บเพจหน่�าอ��น่ แต่�ย"งอย��ภายใน่เว�บไซต่�เด้�ยวก์"น่ เร์�สิ่�ม่�ร์ถึเช!�อิม่โยงเว�บเพจำข้อิงเร์�ก�บเว�บเพจำที่ �อิย*�หน�อิ!�นที่ �อิย*�ในเว�บไซึ่ตที่เด ยวก�น

เช�น ถึ�เร์�ม่ เว�บเพจำอิย*� 4 หน�ที่ �ตอิงก�ร์ใหม่ ก�ร์เช!�อิม่โยงถึ$งก�นก์ารเชื่��อมโยงข้�อม�ลิใน่เว�บไซต่�อ��น่ เร์�สิ่�ม่�ร์ถึเช!�อิม่โยงข้อิม่*ล้ก�บเว�บไซึ่ต�อิ!�นไดโดยก�ร์ร์ะบ1 URL ข้อิงเว�บเพจำที่ �เร์�ตอิงก�ร์

แที่�ก<a href…>

ต่"วอย�างก์ารเชื่��อมโยงเว�บเพจหน่�าอ��น่ ต�วอิย��งต�อิไปน -เป'นก�ร์ใชล้�งก�เช!�อิม่โยงข้อิม่*ล้ในเว�บเพจำหน�น - โดยม่ เว�บเพจำหน�เร์��ม่

ตนค!อิ home.html ไปย�งเว�บเพจำอิ!�นด�งน - . เว�บเพจำ gimp.html ในไดเร์กที่อิร์ webpage ที่ �เป'นไดเร์กที่อิร์ พ�อิข้อิง

ไดเร์กที่อิร์ project ที่ �เว�บเพจำ home.html อิ�ศั�ยอิย*� . เว�บเพจำ maya.html ในไดเร์กที่อิร์ เด ยวก�บเว�บเพจำ home.html

ที่'าความเข้�าใจก์"บ Relative Path Names ในต�วอิย��งก��หนดใหเว�บเพจำ home.thml เป'นเว�บเพจำเร์��ม่ตน ห�กเร์�ตอิงก�ร์

เช!�อิม่โยงจำ�กเว�บเพจำเร์��ม่ตนไปย�งเว�บเพจำ maya.html ซึ่$�งเป'นเว�บเพจำที่ �อิย*�ในไดเร์กที่อิร์ เด ยวก�น

สิ่�ม่�ร์ถึเช!�อิม่โยงไดโดยใชแที่�ก <a href…> โดยพ�ม่พ�ช!�อิข้อิงเว�บเพจำที่ �ตอิงก�ร์ไดเล้ย เช�น

ถึ�ห�กเร์�ตอิงก�ร์เช!�อิม่โยงจำ�กเว�บเพจำเร์��ม่ตนไปย�งเว�บเพจำที่ �อิย*�ในไดเร์กที่อิร์ ที่ �ต���กว��ในที่ �น -ค!อิ maya.html ด�งร์*ป

เร์�สิ่�ม่�ร์ถึใชแที่�ก <a href…> แล้วอิ�งอิ�งต��แหน�งข้อิงเว�บเพจำปล้�ยที่�งจำ�กเว�บเพจำเร์��ม่ตนไดเช�น

ก์ารเชื่��อมโยงข้�อม�ลิใน่เว�บไซต่�อ��น่ เราสามารถเชื่��อมโยงข้�อม�ลิก์"บเว�บไซต่�อ��น่ได้�โด้ยก์ารระบ+ URL ข้องเว�บเพจที่��เราต่�องก์ารแที่�ก์<a href…>

ก์ารลิ�งก์�ไปย"งไฟลิ�อ��น่ๆ ที่��ไม�ใชื่�เอก์สาร HTML ไฟลิ�ประเภที่น่�/ได้�แก์� ไฟลิ�ร�ปภาพ ไฟลิ�โปรแก์รม ไฟลิ�ซ�ป ไฟลิ�เส�ยง หร�อไฟลิ�ม"ลิต่�ม�เด้�ย ซ0�งม�ลิ"ก์ษณะก์ารใชื่�งาน่คลิ�ายก์"บก์ารลิ�งก์�แบบอ��น่ๆ เพ�ยงระบ+จ+ด้หมายปลิายที่างไปย"งไฟลิ�น่"/น่หาก์เป3น่ไฟลิ�ร�ปภาพบราวเซอร�ก์�จะเป4ด้ให�ด้�โด้ยอ"ต่โน่ม"ต่� แต่�ถ�าเป3น่ไฟลิ�อ��น่ๆ เราจะพบก์"บหน่�าจอให�ที่'าก์ารด้าวน่�โหลิด้ไฟลิ� โด้ยใชื่�ค'าส"�ง

ก์ารสร�างลิ�งก์�เพ��อส�ง E-mail ถ�าเราต่�องก์ารให�ผู้��ที่��มาเย��ยมชื่มเว�บเพจข้องเราสามารถต่�ด้ต่�อเราได้� ให�เราสร�างลิ�งก์�ที่��ใชื่�ไปย"งอ�เมลิ�แอด้เด้รสข้องเราโด้ยเม��อผู้��ใชื่�คลิ�ก์ที่��ลิ�งก์� เข้าก์�จะสามารถส�งเมลิ�มาถ0งเราได้�

ก์'าหน่ด้ส�ข้องลิ�งก์� โดยปกต�ล้�งก�ที่ �แสิ่ดงในเว�บเพจำใชข้อิคว�ม่ข้ ดเสิ่นใตที่ �ม่ สิ่ แตกต��งจำ�กข้อิคว�ม่ธร์ร์ม่ด�

เพ!�อิใหผู้*ใช สิ่�งเกตไดง��ย สิ่ ข้อิงล้�งก�จำะม่ คว�ม่แตกต��งไปต�ม่สิ่ถึ�นะ . สิ่ ข้อิงล้�งก�ที่ �ย�งไม่�ไดถึ*กคล้�ก . สิ่ ข้อิงล้�งก�ที่ �ถึ*กคล้�กไปแล้ว . สิ่ ข้อิงล้�งก�ตอินถึ*กคล้�ก เพ!�อิป6อิงก�นไม่�ใหสิ่ ข้อิงล้�งก�กล้!นก�บสิ่ ข้อิงฉ�กพ!-นหล้�ง เร์�สิ่�ม่�ร์ถึก��หนดสิ่ ข้อิงล้�งก�ใน

สิ่ถึ�นะต��งๆได ด�งน -

ก์ารที่'า lmage map ในห�วข้อิที่ �ผู้��นม่�เร์�ใชภ�พม่�ที่��เป'นล้�งก� ซึ่$�งผู้ล้ล้�พธ�ค!อิพ!-นที่ �ที่� -งภ�พจำะเป'นล้�งก�ที่� -งหม่ด

แต�ก�ร์ก��หนดพ!-นที่ �ในภ�พบ�งสิ่�วน หร์!อิที่�-งหม่ดม่�ที่��เป'นล้�งก� โดยปกต� ภ�พหน$�งจำะสิ่�ม่�ร์ถึเช!�อิม่โยงไปไดแค�ที่ �เด ยวเที่��น�-น แต�ก�ร์ใช สิ่ร์�งพ!-นที่ �ย�อิย

เร์ ยกว�� จำะที่��ใหภ�พสิ่�ม่�ร์ถึล้�งก�ไปย�งหล้�ยๆ ที่ �ข้$-นอิย*�ก�บผู้*ใชคล้�กล้�งก�ไปพ!-นที่ �ใดข้�-นที่ � 1 ก��หนดพ!-นที่ �บนร์*ปเพ!�อิใหที่��ล้�งก� <ara>ข้�-นที่ � 2 ก�ร์ก��หนดแม่�พ <map> แม่�พ ก�ค!อิก�ร์ก��หนดพ!-นที่ �หล้�ยๆ พ!-นที่ �ไวภ�ยในแม่�พ เพ!�อิจำะน��ไปใชก�บร์*ปภ�พไดสิ่ะดวก

โดยร์*ปภ�พเม่!�อิต�ดต�อิก�บแม่�พ ก�จำะไดก��หนดพ!-นที่ �ที่� -งหม่ดที่ �อิย*�ในแม่�พน�-นไปข้�-นที่ � 3 น��แม่�พ map ม่�ใชง�นก�บร์1ป เม่!�อิเร์�ก��หนดพ!-นที่ �ที่ �จำะน��ม่�ที่��เป'นล้�งก�เร์ ยบร์อิยแล้ว จำ�กน�-นสิ่ร์�งแที่�ก ข้อิงพ!-นที่ �ที่�ง

หม่ด สิ่1ดที่�ยน��แม่�พที่ �สิ่ร์�งไวล้งในร์*ป

สร�างลิ�งก์�แบบ Rollover ในสิ่�วนน -เร์�จำะสิ่ร์�งล้�งก�ใหก�บร์*ปภ�พ ดดยที่ �จำะเพ��ม่ล้1กเล้�นใหก�บภ�พ ดดยเม่!�อิใด

ก�ต�ม่โดยเม่!�อิใดกต�ม่ที่ �เร์�น��เม่�สิ่�ไปว�งที่ �ร์*ป ภ�พก�จำะเปล้ �ยนไปเป'นอิ กร์*ปหน$�ง แล้ะเม่!�อิใดกต�ม่ที่ �เร์�น��เม่�สิ่�อิอิกจำ�กร์*ป ภ�พน�-นก�จำะกล้�บเป'นร์*ปเด�ม่ เหต1ก�ร์ณ์�เช�นน -เร์�เร์ ยกว�� Rollover แล้ะข้�-นตอินก�ร์ที่��ง�นตร์งน -ก�ง��ยม่�ก ค!อิเร์�ตอิงเตร์ ยม่ร์*ปภ�พใหพร์อิม่ในก�ร์ที่��ง�น 2 ร์*ป แล้ะที่ �สิ่��ค�ญตอิงเข้ ยนค��สิ่��งข้อิง Script เพ��ม่เต�ม่ ซึ่$�งสิ่��งที่ �เร์�จำะเข้ ยน หร์!อิค��สิ่� �งตอิบสิ่อิงเหต1ก�ร์ณ์�โดยที่ �ค��สิ่� �งเหล้��น -สิ่�ม่�ร์ถึแที่�กไปก�บ html ไดเล้ย สิ่�วนว ก�ร์ที่��ง�นข้อิงค��สิ่��งตอิบสิ่นอิงเหต1ก�ร์ณ์�ก�ค!อิ ค��สิ่� �งเหล้��น -จำะที่��ง�นไดก�ตอิงเก�ดเหต1ก�ร์ณ์�ใดเหต1ก�ร์ณ์�หน$�งที่ �ผู้*ใชไดที่��ก�บเคร์!�อิงคอิม่พ�วเตอิร์�ข้อิงเร์�

ตอินน -เร์�ร์* แล้วจำะใชเหต1ก�ร์ณ์�เป'นต�วกร์ะต1นใหค��สิ่� �งเข้ ยนน�-นเร์��ม่ก�ร์ที่��ง�น ที่ น �เร์�ม่�ด*ในสิ่�วนข้อิงค��สิ่��ง ซึ่$�งสิ่�วนข้อิงค��สิ่��งม่ ผู้*กร์ะที่��ต�ม่ค��สิ่��ง ในที่ �น -ร์*ปภ�พจำะเป'นต�วถึ1กร์ะที่�� ด�งน�-นเร์�จำ$งตอิงต�-งช!�อิใหก�บร์1ปภ�พน�-นก�อิน โดยใชแอิตที่ร์�บ�วต� ม่ ก�ร์ที่��ง�นด�งน -

สิ่ร์�งเหต1ก�ร์ณ์� ommouseover โคดสิ่�วนน -จำะเป'นโคดที่ �บอิกว��ร์1ปจำะเปล้ �ยนไปเป'นอิ กร์*ปหน$�ง เม่!�อิเร์�น��เม่�สิ่�ไปว�งเหน!อิ

ร์*ปที่ �เป'นล้�งก�น�-น

สิ่ร์�งเหต1ก�ร์ณ์� onmouseout จำ�กโคดที่ �ผู้��นม่� เร์�จำะเห�นไดว��เม่!�อิเร์�น��เม่�สิ่�ไปคล้�กที่ �ร์*ปจำะที่��ใหเก�ดก�ร์เปล้ �ยนร์*ป

ข้$-นแต�ป9ญห�ที่ �เก�ดข้$-น จำะที่��ไดอิย��งไร์ร์*ปเก��น�-นกล้�บค!นม่� เพร์�ะว��ต�วอิย��งก�อินเร์�ที่��ก�ร์เปล้ �ยนแปล้งร์*ปไป แต�ไม่�ไดเปล้ �นนร์*ปก

ล้�บที่ �จำะตอิงที่��ค!อิก�ร์เปล้ �ยนร์*ปกล้�บ