Session3Part1.ppt

Orjix
www.RongRean.com
หลักสูตร สร้างเว็บด้วย HTML: Session ที่ 3 ตอนที่ 1

www.rongrean.com Orjix
Contents
การสร้างลิงค์<a>
1
ใช้ภาพเป็นลิงค์ <img>
2
การลิงค์ไปไฟล์อื่นๆที่ไม่ใช่เอกสาร HTML
3
การสร้างลิงค์เพื่อส่งอีเมลล์
4
กาหนดสีของลิงค์
5
การสร้างลิงค์แบบ rollover
6

การสร้างลิงค์ <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@hotamail.com”>ข้อควำม</a> เช่น
<body>
<a href=“mailto: ra_ta_poom@hotmail.com">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.jpg
before.jpg
*ข้อควรระวัง* หำกเรำไม่ใส่ attribute ‘onmouseout’ เวลำเรำเลื่อนเม้ำส์ออกจำกรูป รูปจะไม่เปลี่ยนกลับเป็นรูปเดิม

Session3Part1.ppt

Recommended

Recommended

More Related Content

Similar to Session3Part1.ppt

Similar to Session3Part1.ppt (13)

More from pinglada1

More from pinglada1 (20)

Session3Part1.ppt