Embed Size (px)
Citation preview
Orjix
www.RongRean.com
หลกสตร สรางเวบดวย HTML: Session ท 3 ตอนท 1เชอมโยงเวบเพจดวยลงค(Link)
www.rongrean.com Orjix
Contents
การสรางลงค <a>1
ใชภาพเปนลงค <img>2
การลงคไปไฟลอนๆทไมใชเอกสาร HTML
3
การสรางลงคเพอสงอเมลล4
กำาหนดสของลงค5
การสรางลงคแบบ rollover6
Orjix
การสรางลงค <a> รปแบบของคำาสงแทก <a> มดงน
<body> <a href=“ชอไฟลหรอตำ แหนงของหน เวบเพจ">
ขอคว มอะไรกได</a>
</body>
www.rongrean.com
สวนเชอมโยงหรอค ของ href=“…” นน ส ม รถเชอมโยงขอมลได 3 วธดวยกน
• ก รเชอมโยงขอมลภ ยในหน เวบเพจเดยวกน• ก รเชอมโยงขอมลในหน เวบเพจอน• ก รเชอมโยงขอมลในเวบไซตอน
ตวอย ง<body> <a href=“ http://www.google.com"> google </a></body>
Orjix
การเชอมโยงขอมลภายในเวบเพจเดยวกน
www.rongrean.com
<body> <a href="#entertain">entertain</a>
<a href="#family">Family</a><a href="#computer">Computer</a><br><br><br><hr>
<a name="entertain">This is entertain</a><br><br><br><br><br><br>
<a name="family">This is family</a><br><br><br><br><br><br>
<a name="computer">This is computer</a><br><br><br><br><br><br><br></body>
ก รคลกท ลงค ซงไดตงค ของ href “ไวเปน #ชอของแทก” <a> ทเปน เป หม ย จะกระโดดไปยงจดเชอมโยงทมชอตรงกบค ชอของแทก
Orjix
การเชอมโยงขอมลภายในเวบเพจเดยวกน
www.rongrean.com
ขอมลทงหมดทมในหน เวบเพจ
กดตรงน กดตรงน
Orjix
การเชอมโยงขอมลไปหนาเวบเพจอน แตอยในเวบไซตเดยวกน
เราสามารถเชอมโยงขอมลไปยงเวบเพจอนใดดงน
www.rongrean.com
เรมจ กสร งหน เวบเพจไวใน directory เดยวกน
ในตวอย งน เร ไดสร งไฟล html ขนม ส มไฟล
คอ first_html, page2 และ page3 โดยว งไวใน desktop เหมอนกน
หลงจ กนนเขยนโคดเชอมโยงดงน<body>
<a href="page2.html">go to page2
</a><hr><a href="page3.html">
go to page3</a>
</body>ผลทไดคอ
First_html.html
กดลงคน
ในตวอย ง เร กดลงคทชอว go to page2
ซงเชอมโยงไปทpage2.html
เชนเดยวกนกบลงคgo to page3 ซงเชอม
โยงไปท page3.html
Orjix
การเชอมโยงขอมลไปหนาเวบเพจอน แตอยในเวบไซตเดยวกน
ในกรณทไฟล html ของเราอยคนละ directory เราจะใชวธเชอมโยงคลายกบวธเดม เพยงแตเปลยน
การอางถงไฟลปลายทางใหม เชน
www.rongrean.com
เร นำ ไฟล page2 กบ page3 ไปไวในFolder ‘next page’
สงทเร ตองทำ เพมกคอเปลยนก รอ งถงไฟลปล ยท งใหม
<body><a href=“next
page/page2.html">go to page2 </a><hr><a href=“next
page/page3.html">go to page3</a>
</body>
Orjix
ทำาความเขาใจกบ relative path names การอางถง directory แบบ hierachy
www.rongrean.com
A
B C D
E F จ ก B → E เชอมโยงโดยใช E/page.html จ ก B → A เชอมโยงโดยใช ../page.html จ ก B → C เชอมโยงโดยใช ../C/page.html จ ก D → F เชอมโยงโดยใช ../B/F/page.html
อ งถง directory สงกว ดวย
“../ชอไฟล” อ งถง directory ตำ กว
ดวย“ ชอ folder/ชอไฟล”
Orjix
การเชอมโยงขอมลไปเวบไซตอนเราสามารถเชอมโยงขอมลไปทเวบไซตอนไดโดยการ
ระบ url ของเวบเพจทตองการไวภายในแทก <a href=“…”> ดงน
www.rongrean.com
<body><a
href=“http://www.google.com">google</a><a
href=“http://www.yahoo.com">yahoo</a>
</body>
กดลงคน
* โดยปรกตจะเปดเวบเพจใหมใน browser เดม แตเร ส ม รถกำ หนดใหเปดในหน browser
ใหมไดดงน
<a href=“…” target=“_blank”>……….</a>
Orjix
ใชภาพเปนลงค เพอทำาใหเวเพจดนาสนใจ เราอาจใชภาพเปนลงคแทน
การใชขอความแบบเกาไดโดย
www.rongrean.com
<img src=“ชอและตำ แหนงของรป"/> เชน <img src="spring09.gif"/>
โดยทแทก <img> จะตองอยภ ยใตแทก <body>
ก รเชอมโยงกบไฟลรป
จ กนนเร จะเชอมโยงไปยงเวบเพจอนโดยใสแทก <img> ไวภ ยใตแทก
<a href=“…”> ดงเชนตวอย งน
<body><a href="http://www.google.com"><img src="spring09.gif"/></a>
</body>
เร จะเชอมโยงไปยงเวบ google.com โดยใชรปภ พspring09.gif
แทนขอคว ม ดงนนเมอเร คลกทรปภ พจะเปนก รเชอมโยง ไปทเวบเพจ http://www.google.com
กดทรปภ พน
Orjix
การลงคไปยงไฟลอนๆ ทไมใชเอกสาร HTML ไฟลรปภาพ ไฟลโปรแกรม ไฟลซป(zip) ไฟลเสยง
หรอไฟลมลตมเดย มลกษณะการใชงานคลายกบลงค อนๆ หากเปนรป browser กจะเปดใหโดยอตโนมต
สวนไฟลอนๆเราจะพบกบหนาจอสำาหรบดาวนโหลด
www.rongrean.com
<a href=“ชอไฟลอนๆ”> เชน
<body><a href="2547097.jpg">image</a><hr><a href="Retro Avatars.zip">zip file</a><hr><a href=“[Soulciety_sub]PERSONA -Trinity Soul -01[Th][1280x720 XviD][7269C185].avi">video</a></body>
วธก รเรยกใช
Orjix
การลงคไปยงไฟลอนๆ ทไมใชเอกสาร HTMLตวอยางการเชอมโยงไปยงไฟลอนๆ
www.rongrean.com
Orjix
จะไดหน เวบเพจแบบน
การสรางลงคเพอสง Emailถาเราตองการใหผเยยมชมเวบเพจของเราสามารถ
ตดตอกบเราได ใหเราสรางลงคทชไปยงอเมลล แอดเดรส ดงน
www.rongrean.com
<a href=“mailto: [email protected]”>ขอคว ม</a> เชน
<body><a href=“mailto: [email protected]">To. P' bank</a></body>
Orjix
การสรางลงคเพอสง Email
www.rongrean.com
คลกทลงคน
จะเปนก รเปดหน ต งของmicrosoft outlook ซงเปนโปรแกรมทใชในก รสงอเมลลขนม
Orjix
กำาหนดสของลงคโดยปรกตลงคในเวบเพจจะใชขอความขดเสนใตทมส
ตางไปจากขอความธรมดา เพอใหผใชสงเกตงาย สของลงคจะตางกนไปตามสถานะดงน
www.rongrean.com
• สของลงคทยงไมเคยถกคลก (Hyperlink) : link• สของลงคทเคยถกคลกไปแลว (Visited link) : vlink• สของลงคทกำ ลงถกคลก (Active link) : alink
โดย attribute เหล นเร จะใสไวภ ยใตแทก <body>
<body link="green" vlink="blue" alink="red">
<a href="#">normal link</a><br> <br>
<a href="#">visited link</a><br> <br>
<a href="#">active link</a></body>
ลงคทยงไมถกคลกลงคทถกคลกแลวลงคทกำ ลงถกคลก
Orjix
การสรางลงคแบบ rollover ในสวนนจะเปนการเพมลกเลนใหกบรปภาพ โดยเมอ
เรานำาเมาสไปวางไวบนรปภาพ รปกจะเปลยนไปเปนอก รปหนง และเมอนำาเมาสออกกจะกลบมาเปนรปเดม
การทำางานในสวนนเราตองเขยนคำาสงของ script เพมเตมในสวนทเรยกวา Event handler หรอคำา
สงตอบสนองเหตการณ
www.rongrean.com
Attribute ทใชคอ onmouseover และ onmouseout โดยประก ศไวภ ยใตแทก<a>
Onmouseover : คำ สงทำ ง นเมอว นเม สเหนอวตถOnmouseout : คำ สงทำ ง นเมอเลอนเม สออกนอกวตถ
<body><a href="#" onmouseover="pic.src='after.jpg'" onmouseout="pic.src='before.jpg'">
<img id="pic" src="before.jpg"/></a><br><br>
</body>
ตวอย ง
กำ หนดใหเปลยนรปภ พเมอว งเม เหนอรปเดมกำ หนดรปเปลยนรปภ พเมอเลอนเม สออกกำ หนดรปภ ยเรมตน
Orjix
การสรางลงคแบบ rollover
www.rongrean.com
นำ เม สไปว งบนรปonmouseover
เลอนเม สออกจ กรปonmouseout
After.jpgbefore.jpg
*ขอควรระวง* ห กเร ไมใส attribute ‘onmouseout’ เวล เร เลอนเม สออกจ กรป รปจะไมเปลยนกลบเปนรปเดม
