บทที่ 7 การลิงค์
Download
Report
Transcript บทที่ 7 การลิงค์
HTML : การเชือ
่ มโยง (Link)
By Alhavee
1
การเชือ
่ มโยง Link
การเชื่อมโยงหรือที่เรียกกันว่ าลิงค์ ใน html เอกสารสามารถสร้ างการ
เชื่อมโยง (Link) ไปยังเอกสารส่วนอื่น หรื อหน้ าอื่นๆ ได้ นอกจากนันยั
้ ง
สามารถเชื่อมโยงไปยังเว็บไซต์ตา่ งๆได้ อีกด้ วย ทาให้ เว็บเพจสามารถ
ตอบสนองความต้ องการของผู้ใช้ ได้ มากขึ ้นโดยผู้ใช้ ไม่จาเป็ นต้ องอ่าน
่้ าสามารถเลือกอ่านเฉพาะหน้ าเว็บเพจที่สนใจได้
เอกสาร หมดทังหน้
แบบเรี ยงลาดับ
แบบระดั
บชัน้
By Alhavee
แบบผสมผสาน
2
ประเภทของการลิงค ์ แบงออกเป็
น
่
ไดแก
้ ่
2 ประเภท
1. ลิงค์ภายใน (Internal Link) เป็ นการเชื่องโยงเอกสารภายในเว็บ
เดียวกัน ไม่ได้ เชื่อโยงเว็บไซด์อื่น เช่น การลิงค์ในหน้ าเว็บเพจเดียวกัน
การลิงค์เว็บเพจอื่นในเว็บเดียวกัน เป็ นต้ น
2. ลิงค์ภายนอก (External Link) เป็ นการเชื่องโยงเอกสารข้ ามเว็บ
ไซด์ ใน Internet โดยผ่าน URL ของว็บที่ต้องการ
รูปแบบ
<A HREF=“เว็บเพจ”>…</A>
By Alhavee
3
การเชือ
่ มโยงภายในหน้าเว็บเพจ
เดียวกัน
ใช้ ในกรณีที่เราต้ องการให้ มีจดุ เชื่อมโยงในหน้ าเดียวกัน เมื่อคลิกเมาส์ที่จดุ เชื่อมโยงแล้ ว
มีการเลื่อนตาแหน่ง ขึ ้นหรื อลงไปจากตาแหน่งเดิม เพื่อไปยังตาแหน่งที่ต้องการ
รูปแบบ : การลิงค์
<a href="#ชื่อจุดเชื่อมโยง">ข้ อความ</a>
ข้ อสังเกต ในขันตอนของการสร้
้
างการเชื่อมโยง หน้ าชื่อจุดเชื่อมโยงต้ องมีเครื่ องหมาย #
รูปแบบ : จุดปลายทางหรื อตาแหน่งที่ต้องการเชื่อมโยง
<a name="ชื่อจุดเชื่อมโยง">ข้ อความที่ต้องการแสดง</a>
ข้ อสังเกต ในขันตอนของการสร้
้
างจุดเชื่อมโยง ชื่อจุดเชื่อมโยงไม่ต้องมีเครื่ องหมาย #
* หนังสือ 133
By Alhavee
4
ตัวอย่ าง Ex_Link_1.html
<body>
การสร้ างการเชื่อมโยงในหน้ าเว็บเพจเดียวกัน <br>
<a href="#link1">1.ทดสอบ link 1</a><br>
<a href="#link2">2.ทดสอบ link 2</a><br>
<a href="#link3">3.ทดสอบ link 3</a><br>
<hr>
<a name="link1">ทดสอบ การเชื่อมโยง 1 สาเร็จ
ใส่คาสัง่ <br> ประมาณ 24 ครัง้ </a><hr>
<a name="link2">ทดสอบ การเชื่อมโยง 2 สาเร็จ
ใส่คาสัง่ <br> ประมาณ 24 ครัง้ </a><hr>
<a name="link3">ทดสอบ การเชื่อมโยง 3 สาเร็จ
ใส่คาสัง่ <br> ประมาณ 24 ครัง้ </a><hr>
</body>
By Alhavee
5
การเชื่อมโยงไปยังเว็บเพจคนละ
หน้ า
ใช้ ในกรณีที่เราสร้ างเว็บเพจไว้ หลาย ๆ หน้ าโดยเว็บเพจแต่ละหน้ าจะทาการบันทึก
เป็ นไฟล์ HTML แยกกันไว้ หรื อยูใ่ นโฟลเดอร์ เดียวกัน
1. เว็บเพจปลายทางอยูใ่ น directory เดียวกับเว็บเพจเริ่มต้ น
Website
Index.html
ไฟล์ เริ่มต้ น
<a href="page1.html">
page1.html ไฟล์ ปลายทาง
page2.html
images
By Alhavee
6
การเชื่อมโยงไปยังเว็บเพจคนละ
หน้ า
2. เว็บเพจปลายทางอยูใ่ น directory ต่ากว่าเว็บเพจเริ่มต้ น
<a href="code/page1.html">
Website
Index.html
ไฟล์ เริ่มต้ น
Code
page1.html ไฟล์ ปลายทาง
page2.html
images
By Alhavee
7
การเชื่อมโยงไปยังเว็บเพจคนละ
หน้ า
3. เว็บเพจปลายทางอยูใ่ น directory ต่ากว่าเว็บเพจเริ่มต้ น 2 ชันขึ
้ ้นไป
Website
Index.html
ไฟล์ เริ่มต้ น
Code
page1.html
<a href="code/sub/page2.html">
Sub
page2.html ไฟล์ ปลายทาง
images
By Alhavee
8
การเชื่อมโยงไปยังเว็บเพจคนละ
หน้ า
4. เว็บเพจปลายทางอยูใ่ น directory สูงกว่าเว็บเพจเริ่มต้ น
Website
Index.html
ไฟล์ ปลายทาง
Code
page1.html
ไฟล์ เริ่มต้ น
Sub
page2.html
<a href="../index.html">
images
By Alhavee
9
การเชื่อมโยงไปยังเว็บเพจคนละ
หน้ า
5. เว็บเพจปลายทางอยูใ่ น directory สูงกว่าเว็บเพจเริ่มต้ น 2 ระดับ
Website
Index.html
ไฟล์ ปลายทาง
<a href=“../../index.html">
Code
page1.html
Sub
page2.html ไฟล์ เริ่มต้ น
images
By Alhavee
10
การเชื่อมโยงไปยังเว็บไชต์
ภายนอก
เราสามารถสร้ างการเชื่อมโยงไปยังเว็บไซต์อื่น ๆ ได้ โดยใช้ รูปแบบ
<a href="URL หรื อที่อยูข่ องเว็บไวต์ที่ต้องการ">ข้ อความ</a>
ตัวอย่าง Ex_link_3.html
<body>
การสร้ างการเชื่อมโยงไปยังเว็บไซต์อื่น ๆ <br>
<hr>
<a href="http://www.google.com">1. google</a><br>
<a href="http://www.sanook.com">2.sanook </a><br>
<a href="http://www.mbk.ac.th">3Mbk</a><br>
<hr>
</body>
By Alhavee
11
การนารูปภาพมาเป็ นชุดเชื่อมโยง
สามารถนารูปภาพมาเป็ นจุดเชื่อมโยงได้ โดยเปลี่ยนจากข้ อความมารูปภาพแทน
ตัวอย่างการเชื่อมโยงแบบเดิมโดยใช้ ข้อความ
<a href="http://www.mbk.ac.th">หมูบ่ ้ านครู </a>
ตัวอย่างการเชื่อมโยงโดยใช้ รูปภาพชื่อว่า MBK.png
<a href="http://www.mbk.ac.th">
<img src=“image/MBK.png"></a>
By Alhavee
12
ตัวอย่าง Ex_Link_4.html
<body>
การสร้ างการเชื่อมโยงไปยังเว็บไซต์อื่น ๆ โดยใช้ รูปภาพ <br>
<hr>
<a href="http://www.mbk.ac.th">หมู่บ้านครู</a>
<br><br>
<a href="http://www.mbk.ac.th"><img
src="images/MBK.png"></a>
<hr>
</body>
By Alhavee
13
การกาหนดสีของจุดเชื่อมโยง
การสร้ างการเชื่อมโยง ผู้สร้ างเว็บเพจสามารถกาหนดสีของจุดเชื่อมโยงได้ เอง
<body link="ค่าสี" vlink="ค่าสี" alink="ค่าสี">
Link = สีของลิงค์ที่ยงั ไม่เคยถูกคลิก
Vlink = สีของลิงค์ที่เคยถูกคลิกไปแล้ ว
alink = สีของลิงค์ตอนที่ถกู คลิก
By Alhavee
14
ตัวอย่าง Ex_Link_5.html
<body link="green" vlink="blue" alink="red">
ลิงค์ที่ยงั ไม่เคยถูกคลิกจะเป็ นสีเขียว (link) <br>
ลิงค์ที่เคยถูกคลิกไปแล้ วจะเป็ นสีน ้าเงิน (vlink) <br>
ลิงค์ที่กาลังถูกคลิกจะเป็ นสีแดง (alink) <br>
<hr>
<a href="http://www.mbk.ac.th">หมูบ่ ้ านคูร
</a><br>
<hr>
</body>
By Alhavee
15
Target Attribute (รูปแบบการแสดงหน้ าลิงค์)
<a href=“เว็บเพจ” target=“รูปแบบ” >
Value
_blank
_self
Description
_parent
_top
Open the linked document in the parent frameset
framename
Open the linked document in a named frame
Open the linked document in a new window
Open the linked document in the same frame as it was
clicked (this is default)
Open the linked document in the full body of the
window
By Alhavee
16