รูปแบบการสร้างจุดเชื่อมโยงแบบต่างๆ ดังนี้
-
การลิงค์ภายในเว็บเพจเดียวกัน (Name Anchor)
ในกรณีที่หน้าเว็บเพจยาวหรือมีหลายหัวข้อที่น่าสนใจต้องการให้ผู้ชมไปถึงหัวข้อนั้นโดยสะดวกรวดเร็ว ดังขั้นตอน ต่อไปนี้
กำหนดเป้าหมาย (Target)
- คำสั่ง <A NAME=ชื่อเป้าหมาย>....ข้อความที่ใช้เป็นจุดเชื่อมโยง....</A>
เช่น <A NAME=intro >ความรู้เบื้องต้น</A>
กำหนดจุดเชื่อมโยง (Link)
- คำสั่ง <A HREF=#ชื่อจุดเชื่อมโยงในข้อ 1>.....ข้อความ.....</A>
เช่น <A HERF=#intro>คลิกไปที่ความรู้เบื่องต้น</A> คลิกดูตัวอย่าง
-
การลิงค์ภายในเว็บไซต์ (Web Page/File) เป็นการเชื่อมโยงไปยังหน้าเว็บเพจอื่นภายในไซต์เดียวกัน
- คำสั่ง <A HERF="ชื่อแฟ้ม" >.....ข้อความที่ใช้เป็นจุดเชื่อมโยง.....</A>
เช่น <A HERF=chapter3.htm>คลิกตัวอย่าง</A> คลิกตัวอย่าง
-
การลิงค์ไปยังเว็บไซต์อื่น (URL/Website) เป็นการเชื่อมโยงไปยังหน้าเว็บเพจหรือเว็บไซต์อื่น ดังตัวอย่างในหัวข้อข้างล่างนี้ ด้วยการระบุชื่อโดเมนเต็ม
- คำสั่ง <A HERF=ชื่อเว็บไซต์ >.....ข้อความที่ใช้เป็นจุดเชื่อมโยง.....</A>
เช่น <A HERF=http://www.google.co.th>google</A> คลิกดูตัวอย่าง
-
การลิงค์อีเมล์ (e-Mail Link) เป็นการสร้างจุดเชื่อมโยงพิเศษที่ต้องการให้ผู้ชมคลิกเพื่อเปิดโปรแกรมรับส่งอีเมล์ที่มีในเครื่องเพื่อเขียนข้อความ
คลิกดูรายละเอียด
หรืออาจจะแบ่งประเภทการเชื่อมโยง เป็นได้ ดังนี้
 Text Links : ข้อความเป็นจุดเชื่อมโยง
|
การสร้างข้อความเป็นจุดเชื่อมโยงทำได้ง่ายๆ ด้วยการใช้คำสั่ง <A src="ตำแหน่งว็บเพจหรือชื่อเว็บเพจ"> ข้อความ </A> ครอบข้อความนั้น โดยในคำสั่งเปิดจะต้องมีการระบุเป้าหมายเว็บไซต์ดังตัวอย่างด้านล่าง
<html>
<head>
<title> Text Links : การสร้างจุดเชื่อมโยง </title>
</head>
<body>
ตัวอย่างข้อความเชื่อมโยง<br><br>
เชื่อมโยงภายในเว็บไซต์<br>
<A HREF="chapter3.htm">คลิกที่นี่กลับไปบทที่ 3</A><br>
เชื่อมโยงภายนอกเว็บไซต์<br>
<A HREF="http://www.kroocom.th.gs">เว็บไซต์ครูวันฉลอง</A>
</body>
</html> |
|
ตัวอย่างข้างบนเมื่อนำเมาท์ไปชี้ที่ข้อความจะปรากฏว่า ลูกศรเปลี่ยนเป็นรูปมือชี้ เมื่อคลิกที่ข้อความนั้นก็จะนำทางไปสู่หน้าเว็บไซต์ใหม่คือบทที่ 3 ทันที ถ้าต้องการให้ชี้ไปยังเว็บไซต์อื่นก็เปลี่ยนแปลงจาก chapter3.htm เป็นชื่อเว็บไซต์ได้เลย เช่น
<A HREF="http://www.kroocom.th.gs">เว็บไซต์ครูวันฉลอง</A>
|
Image Links : รูปภาพเป็นจุดเชื่อมโยง
|
เราสามารถใช้รูปภาพแทนข้อความในการใช้เป็นจุดเชื่อมโยง โดยนำคำสั่ง <A> และ </A> ครอบที่คำสั่งแสดงรูปภาพ <IMG> เมื่อนำเอาเมาท์ไปวางบนรูปภาพก็จะเปลี่ยนเป็นรูปมือชี้ และจะสังเกตเห็นเส้นขอบรอบรูป ถ้าไม่ต้องการให้มีเส้นขอบต้องกำหนด border="0" ดังตัวอย่าง
ตัวอย่าง 1 : <A HREF="http://www.google.co.th"><IMG SRC="images/chickenlittle_mojo1.gif"></A>
ตัวอย่าง 2 : <A HREF="chapter3.htm><IMG SRC="images/chickenlittle_mojo1gif" border="0"></A> |
ตัวอย่าง 1 :
|
ตัวอย่าง 2 :
|
|
e-Mail Links : เชื่อมโยงไปยังอีเมล์
|
 |
ถ้าคุณท่องเน็ตบ่อยๆ จะพบว่าบางจุดเชื่อมโยงในหน้าเว็บเพจเมื่อเราคลิกจะปรากฏว่าหน้าต่างโปรแกรมรับ-ส่งอีเมล์อย่าง Outlook Express พร้อมกับ New Message
ถ้าสังเกตให้ดีจะพบว่าในช่อง To: จะมีที่อยู่อีเมล์ของจุดเชื่อมโยงมาปรากฏแล้วโดยอัตโนมัติโดยไม่ต้องป้อนด้วยมือ เพียงแต่เขียนหัวเรื่อง (subject) และเนื้อความในจดหมยให้ครบถ้วนแล้วสามารถส่งออกไปได้ทันที
การสร้างจุดเชื่อมโยงแบบนี้เป็นที่นิยมสำหรับไว้รับคำแนะนำ ติ/ชมจากผู้เข้าชมเว็บไซต์ เพื่อการนำไปพัฒนาให้ดียิ่งๆ ขึ้นไป
คำสั่งที่ใช้เหมือนกับคำสั่งเชื่อมโยงอื่นๆ เพียงแต่เปลี่ยนเป้าไปหาชื่ออีเมล์โดยมีคำ emailto:name@domain จะใช้เป็นข้อความหรือรูปภาพเชื่อมโยงก็ได้ ดังตัวอย่าง |
|
|
|
ลิงค์โดยใช้รูปภาพ : <A HREF="mailto:[email protected]"><IMG SRC="images/email.gif" border="0"></A>
|
|
Tip!
คุณสามารถกำหนดหัวข้ออีเมล์โดยอัตโนมัติไปกับจุดเชื่อมโยงโดยเพิ่มเติมคำสั่งเพียงเล็กน้อยดังนี้
ในหัวข้อจดหมายจะปรากฏข้อความ Subject : แนะนำเว็บ ให้โดยอัตโนมัติ ตัวอย่างเช่น
|
