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>


สวนเชอมโยงหรอค ของ href=“…” นน ส ม รถเชอมโยงขอมลได 3 วธดวยกน

• ก รเชอมโยงขอมลภ ยในหน เวบเพจเดยวกน• ก รเชอมโยงขอมลในหน เวบเพจอน• ก รเชอมโยงขอมลในเวบไซตอน

ตวอย ง<body> <a href=“ http://www.google.com"> google </a></body>

การเชอมโยงขอมลภายในเวบเพจเดยวกน


<body> <a href="#entertain">entertain</a>

<a href="#family">Family</a><a href="#computer">Computer</a> <hr>

<a name="entertain">This is entertain</a> 

<a name="family">This is family</a> 

<a name="computer">This is computer</a> </body>

ก รคลกท ลงค ซงไดตงค ของ href ไวเปน “#ชอของแทก” <a> ทเปน เป หม ย จะกระโดดไปยงจดเชอมโยงทมชอตรงกบค ชอของแทก

การเชอมโยงขอมลภายในเวบเพจเดยวกน


ขอมลทงหมดทมในหน เวบเพจ

กดตรงน กดตรงน

การเชอมโยงขอมลไปหนาเวบเพจอน แตอยในเวบไซตเดยวกน

เราสามารถเชอมโยงขอมลไปยงเวบเพจอนใดดงน


เรมจ กสร งหน เวบเพจไวใน 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 เราจะใชวธเชอมโยงคลายกบวธเดม เพยงแตเปลยนการอางถงไฟลปลายทางใหม เชน


เร นำ ไฟล 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


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=“…”> ดงน


<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>

ใชภาพเปนลงคเพอทำาใหเวเพจดนาสนใจ เราอาจใชภาพเปนลงคแทน

การใชขอความแบบเกาไดโดย


<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 กจะเปดใหโดยอตโนมต สวนไฟลอนๆเราจะพบกบหนาจอสำาหรบดาวนโหลด


<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

ตวอยางการเชอมโยงไปยงไฟลอนๆ


จะไดหน เวบเพจแบบน

การสรางลงคเพอสง Emailถาเราตองการใหผเยยมชมเวบเพจของเราสามารถ

ตดตอกบเราได ใหเราสรางลงคทชไปยงอเมลลแอดเดรส ดงน


<a href=“mailto: [email protected]”>ขอคว ม</a> เชน

<body><a href=“mailto: [email protected]">To. P' bank</a></body>

การสรางลงคเพอสง Email


คลกทลงคน

จะเปนก รเปดหน ต งของ microsoft outlook ซงเปนโปรแกรมทใชในก รสงอเมลลขนม

กำาหนดสของลงคโดยปรกตลงคในเวบเพจจะใชขอความขดเสนใตทมส

ตางไปจากขอความธรมดา เพอใหผใชสงเกตงาย สของลงคจะตางกนไปตามสถานะดงน


• สของลงคทยงไมเคยถกคลก (Hyperlink ) : link• สของลงคทเคยถกคลกไปแลว (Visited link ) : vlink• สของลงคทกำ ลงถกคลก (Active link ) : alink

โดย attribute เหล นเร จะใสไวภ ยใตแทก <body>

<body link="green" vlink="blue" alink="red">

<a href="#">normal link</a> 

<a href="#">visited link</a> 

<a href="#">active link</a></body>

ลงคทยงไมถกคลกลงคทถกคลกแลวลงคทกำ ลงถกคลก

การสรางลงคแบบ rolloverในสวนนจะเปนการเพมลกเลนใหกบรปภาพ โดยเมอ

เรานำาเมาสไปวางไวบนรปภาพ รปกจะเปลยนไปเปนอกรปหนง และเมอนำาเมาสออกกจะกลบมาเปนรปเดม

การทำางานในสวนนเราตองเขยนคำาสงของ script เพมเตมในสวนทเรยกวา Event handler หรอคำาสงตอบสนองเหตการณ


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> 

</body>

ตวอย ง

กำ หนดใหเปลยนรปภ พเมอว งเม เหนอรปเดมกำ หนดรปเปลยนรปภ พเมอเลอนเม สออกกำ หนดรปภ ยเรมตน

การสรางลงคแบบ rollover


นำ เม สไปว งบนรปonmouseover

เลอนเม สออกจ กรปonmouseout

After.jpgbefore.jpg

*ขอควรระวง* ห กเร ไมใส attribute ‘onmouseout’ เวล เร เลอนเม สออกจ กรป รปจะไมเปลยนกลบเปนรปเดม

session3 part1

Education