Session3 part1
-
Upload
sangkeetwittaya-stourajini -
Category
Education
-
view
15 -
download
0
Transcript of Session3 part1
Orjix
www.RongRean.com
หลกสตร สรางเวบดวย HTML: Session ท 3 ตอนท 1
www.rongrean.com Orjix
Contents
การสรางลงค <a>1
ใชภาพเปนลงค <img>2
การลงคไปไฟลอนๆทไมใชเอกสาร HTML
3
การสรางลงคเพอสงอเมลล4
กำาหนดสของลงค5
การสรางลงคแบบ rollover6
การสรางลงค <a>รปแบบของคำาสงแทก <a> มดงน
<body> <a href=“ชอไฟลหรอตำ แหนงของหน เวบเพจ">
ขอคว มอะไรกได</a>
</body>
www.rongrean.com Orjix
สวนเชอมโยงหรอค ของ href=“…” นน ส ม รถเชอมโยงขอมลได 3 วธดวยกน
• ก รเชอมโยงขอมลภ ยในหน เวบเพจเดยวกน• ก รเชอมโยงขอมลในหน เวบเพจอน• ก รเชอมโยงขอมลในเวบไซตอน
ตวอย ง<body> <a href=“ http://www.google.com"> google </a></body>
การเชอมโยงขอมลภายในเวบเพจเดยวกน
www.rongrean.com Orjix
<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> ทเปน เป หม ย จะกระโดดไปยงจดเชอมโยงทมชอตรงกบค ชอของแทก
การเชอมโยงขอมลภายในเวบเพจเดยวกน
www.rongrean.com Orjix
ขอมลทงหมดทมในหน เวบเพจ
กดตรงน กดตรงน
การเชอมโยงขอมลไปหนาเวบเพจอน แตอยในเวบไซตเดยวกน
เราสามารถเชอมโยงขอมลไปยงเวบเพจอนใดดงน
www.rongrean.com Orjix
เรมจ กสร งหน เวบเพจไวใน 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
การเชอมโยงขอมลไปหนาเวบเพจอน แตอยในเวบไซตเดยวกน
ในกรณทไฟล html ของเราอยคนละ directory เราจะใชวธเชอมโยงคลายกบวธเดม เพยงแตเปลยนการอางถงไฟลปลายทางใหม เชน
www.rongrean.com Orjix
เร นำ ไฟล 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>
ทำาความเขาใจกบ relative path names
การอางถง directory แบบ hierachy
www.rongrean.com Orjix
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/ชอไฟล”
การเชอมโยงขอมลไปเวบไซตอนเราสามารถเชอมโยงขอมลไปทเวบไซตอนไดโดยการ
ระบ url ของเวบเพจทตองการไวภายในแทก <a href=“…”> ดงน
www.rongrean.com Orjix
<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>
ใชภาพเปนลงคเพอทำาใหเวเพจดนาสนใจ เราอาจใชภาพเปนลงคแทน
การใชขอความแบบเกาไดโดย
www.rongrean.com Orjix
<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
กดทรปภ พน
การลงคไปยงไฟลอนๆ ทไมใชเอกสาร HTML
ไฟลรปภาพ ไฟลโปรแกรม ไฟลซป(zip ) ไฟลเสยง หรอไฟลมลตมเดย มลกษณะการใชงานคลายกบลงคอนๆ หากเปนรป browser กจะเปดใหโดยอตโนมต สวนไฟลอนๆเราจะพบกบหนาจอสำาหรบดาวนโหลด
www.rongrean.com Orjix
<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>
วธก รเรยกใช
การลงคไปยงไฟลอนๆ ทไมใชเอกสาร HTML
ตวอยางการเชอมโยงไปยงไฟลอนๆ
www.rongrean.com Orjix
จะไดหน เวบเพจแบบน
การสรางลงคเพอสง Emailถาเราตองการใหผเยยมชมเวบเพจของเราสามารถ
ตดตอกบเราได ใหเราสรางลงคทชไปยงอเมลลแอดเดรส ดงน
www.rongrean.com Orjix
<a href=“mailto: [email protected]”>ขอคว ม</a> เชน
<body><a href=“mailto: [email protected]">To. P' bank</a></body>
การสรางลงคเพอสง Email
www.rongrean.com Orjix
คลกทลงคน
จะเปนก รเปดหน ต งของ microsoft outlook ซงเปนโปรแกรมทใชในก รสงอเมลลขนม
กำาหนดสของลงคโดยปรกตลงคในเวบเพจจะใชขอความขดเสนใตทมส
ตางไปจากขอความธรมดา เพอใหผใชสงเกตงาย สของลงคจะตางกนไปตามสถานะดงน
www.rongrean.com Orjix
• สของลงคทยงไมเคยถกคลก (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>
ลงคทยงไมถกคลกลงคทถกคลกแลวลงคทกำ ลงถกคลก
การสรางลงคแบบ rolloverในสวนนจะเปนการเพมลกเลนใหกบรปภาพ โดยเมอ
เรานำาเมาสไปวางไวบนรปภาพ รปกจะเปลยนไปเปนอกรปหนง และเมอนำาเมาสออกกจะกลบมาเปนรปเดม
การทำางานในสวนนเราตองเขยนคำาสงของ script เพมเตมในสวนทเรยกวา Event handler หรอคำาสงตอบสนองเหตการณ
www.rongrean.com Orjix
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>
ตวอย ง
กำ หนดใหเปลยนรปภ พเมอว งเม เหนอรปเดมกำ หนดรปเปลยนรปภ พเมอเลอนเม สออกกำ หนดรปภ ยเรมตน
การสรางลงคแบบ rollover
www.rongrean.com Orjix
นำ เม สไปว งบนรปonmouseover
เลอนเม สออกจ กรปonmouseout
After.jpgbefore.jpg
*ขอควรระวง* ห กเร ไมใส attribute ‘onmouseout’ เวล เร เลอนเม สออกจ กรป รปจะไมเปลยนกลบเปนรปเดม