Make a Home with HTML : สร้างบ้านสวยด้วยภาษา HTML

Text Links | Images Links | e-Mail Links | Download Links

ทุกๆ ข้อความและรูปภาพที่ปรากฏในหน้าเว็บเพจ สามารถเป็นจุดนำทางไปสู่หน้าเว็บเพจหน้าใหม่ เราเรียกว่า จุดเชื่อมโยง (Link) ซึ่งจุดเชื่อมโยงนี้สามารถชี้ไปยังหน้าเว็บเพจภายในเว็บไซต์ของเราเอง และในเว็บไซต์อื่นๆ ในบทเรียนนี้เราจะเรียนรู้วิธีการสร้างจุดเชื่อมโยงแบบต่างๆ

Links to the other : เชื่อมโยงเนื้อหาในเว็บไซต์เดียวกันหรือเว็บไซต์อื่นๆ

ในอินเทอร์เน็ตแต่ละไฟล์หรือเว็บเพจที่สร้างขึ้นจะมีที่อยู่ที่เราสามารถอ้างถึงที่ไม่ซ้ำกัน ซึ่งเราเรียกว่า URL (Uniform Resource Locator) รูปแบบของ URL ประกอบด้วย 3 ส่วนคือ โปรโตคอล (Protocol)* โดเมน (Domain)** และที่อยู่ไฟล์ในโดเมน (Path)***

การลิงค์ภายในเว็บเพจเดียวกัน (Name Anchor)
ในกรณีที่หน้าเว็บเพจยาวหรือมีหลายหัวข้อที่น่าสนใจต้องการให้ผู้ชมไปถึงหัวข้อนั้นโดยสะดวกรวดเร็ว สามารถกำหนดได้ด้วยการกำหนดชื่อ (name) ให้จุดเชื่อมโยงและสร้างการเชื่อมโยงไป ตัวอย่าง
<A NAME="textlink">Text Links</A>

และสร้างจุดเชื่อมโยงไปด้วยคำสั่ง
<A HREF="#textlink">Text Links</A>
การลิงค์ภายในเว็บไซต์ (Web Page/File) เป็นการเชื่อมโยงไปยังหน้าเว็บเพจอื่นภายในไซต์เดียวกัน ดังตัวอย่างในหัวข้อข้างล่างนี้
การลิงค์ไปยังเว็บไซต์อื่น (URL/Website) เป็นการเชื่อมโยงไปยังหน้าเว็บเพจหรือเว็บไซต์อื่น ดังตัวอย่างในหัวข้อข้างล่างนี้ ด้วยการระบุชื่อโดเมนเต็ม คลิกดูตัวอย่าง
การลิงค์อีเมล์ (e-Mail Link) เป็นการสร้างจุดเชื่อมโยงพิเศษที่ต้องการให้ผู้ชมคลิกเพื่อเปิดโปรแกรมรับส่งอีเมล์ที่มีในเครื่องเพื่อเขียนข้อความ คลิกดูรายละเอียด
การลิงค์ไปยังไฟล์หรือเอกสารอื่น (File Link or Download Link) เป็นการสร้างจุดเชื่อมโยงพิเศษที่ต้องการให้ผู้ชมคลิกเพื่อเปิดไฟล์เอกสารชนิดต่างๆ หรือดาวน์โหลดไฟล์จากเครื่องให้บริการมาไว้ยังเครื่องของผู้ชม คลิกดูรายละเอียด

Text Links : ข้อความเป็นจุดเชื่อมโยง

การสร้างข้อความเป็นจุดเชื่อมโยงทำได้ง่ายๆ ด้วยการใช้คำสั่ง <A> ... </A> ครอบข้อความนั้น โดยในคำสั่งเปิดจะต้องมีการระบุเป้าหมายเว็บไซต์ดังตัวอย่างด้านล่าง

<html>
<head>
<title>
Text Links : การสร้างจุดเชื่อมโยง
</title>
</head>
<body>
ตัวอย่างข้อความเชื่อมโยง
<A HREF="table.html">คลิกที่นี่กลับไปหน่วยที่ 4 </A>
</body>
</html>
ตัวอย่างการแสดงผลจากคำสั่งด้านซ้ายมือ

ตัวอย่างข้อความเชื่อมโยง
คลิกที่นี่กลับไปที่หน่วยที่ 4

ตัวอย่างข้างบนเมื่อนำเมาส์ไปชี้ที่ข้อความจะปรากฏว่า ลูกศรเปลี่ยนเป็นรูปมือชี้ เมื่อคลิกที่ข้อความนั้นก็จะนำทางไปสู่หน้าเว็บไซต์ใหม่คือ หน่วยที่ 4 ทันที ถ้าต้องการให้ชี้ไปยังเว็บไซต์อื่นก็เปลี่ยนแปลงจาก table.html เป็นชื่อเว็บไซต์ได้เลย เช่น

<A HREF="http://www.krumontree.com">เว็บไซต์ครูมนตรี</A>

Image Links : รูปภาพเป็นจุดเชื่อมโยง

เราสามารถใช้รูปภาพแทนข้อความในการใช้เป็นจุดเชื่อมโยง โดยนำคำสั่ง <A> และ </A> ครอบที่คำสั่งแสดงรูปภาพ <IMG> เมื่อนำเอาเมาท์ไปวางบนรูปภาพก็จะเปลี่ยนเป็นรูปมือชี้ และจะสังเกตเห็นเส้นขอบรอบรูป ถ้าไม่ต้องการให้มีเส้นขอบต้องกำหนด border="0" ดังตัวอย่าง

ตัวอย่าง 1 : <A HREF="table.html"><IMG SRC="kerokero.gif"></A>
ตัวอย่าง 2 : <A HREF="table.html"><IMG SRC="kerokero.gif" border="0"></A>

ตัวอย่าง 1 :

ตัวอย่าง 2 :

e-Mail Links : เชื่อมโยงไปยังอีเมล์

New Message
ถ้าคุณท่องเน็ตบ่อยๆ จะพบว่า มีบางจุดเชื่อมโยงที่ปรากฏในหน้าเว็บเพจ เมื่อเราคลิก จะปรากฏว่ามีหน้าต่างโปรแกรมรับ-ส่งอีเมล์ เช่น Outlook Express พร้อมกับ New Message

ถ้าสังเกตให้ดีจะพบว่าในช่อง To: จะมีที่อยู่อีเมล์ของจุดเชื่อมโยงมาปรากฏแล้วโดยอัตโนมัติ โดยไม่ต้องป้อนด้วยมือ เพียงแต่เขียนหัวเรื่อง (subject) และเนื้อความในจดหมายให้ครบถ้วน แล้วสามารถส่งออกไปได้ทันที

การสร้างจุดเชื่อมโยงไปยังอีเมล์นี้เป็นที่นิยม สำหรับไว้รับคำแนะนำ ติ/ชม จากผู้เข้าชมเว็บไซต์ เพื่อการนำไปพัฒนาให้ดียิ่งๆ ขึ้นไป

คำสั่งที่ใช้เหมือนกับคำสั่งเชื่อมโยงอื่นๆ เพียงแต่เปลี่ยนเป้าไปหาชื่ออีเมล์โดยมีคำ emailto:name@domain จะใช้เป็นข้อความหรือรูปภาพเชื่อมโยงก็ได้ ดังตัวอย่าง

<A HREF="emailto:krumontree@gmail.com">Mail to ME</A>	Mail to ME
<A HREF="emailto:krumontree@gmail.com"><IMG SRC="email.gif" border="0"></A>

Tip!

คุณสามารถกำหนดหัวข้ออีเมล์โดยอัตโนมัติไปกับจุดเชื่อมโยงโดยเพิ่มเติมคำสั่งเพียงเล็กน้อยดังนี้

ในหัวข้อจดหมายจะปรากฏข้อความ Subject : Comment this website ให้โดยอัตโนมัติ

File Links or Download Links : เชื่อมโยงไปไฟล์หรือเอกสารอื่นๆ

ในปัจจุบันการนำเสนอข้อมูลในเว็บเพจนอกจากข้อความและรูปภาพ แล้วยังมีการนำเอาเอกสารอื่นๆ ที่เกี่ยวข้องมานำเสนอร่วมด้วย เช่น เอกสารการนำเสนอ (Presentation) เอกสารบทความที่เกี่ยวข้องในรูปเอกสารประมวลผลคำ (Word) หรือตารางทำงาน (Spread sheet) หรือเอกสาร PDF เพื่อให้ผู้ชมสามารถคลิกเปิดดูเอกสารนั้นๆ หรือบันทึกไฟล์ลงเก็บไว้ในเครื่องเพื่อเรียกดูในภายหลัง เราเรียกวิธีการนี้ว่า จุดเชื่อมโยงเพื่อการดาวน์โหลด รูปแบบคำสั่ง

<a href=“URL/filename.ppt”>ไฟล์เอกสารนำเสนอ เรื่อง....</a>
<a href=“URL/filename.doc”>ไฟล์เอกสารนำเสนอ เรื่อง....</a>
<a href=“URL/filename.xls”>ไฟล์เอกสารนำเสนอ เรื่อง....</a>
<a href=“URL/filename.pdf”>ไฟล์เอกสารนำเสนอ เรื่อง....</a>

คำสั่งสำหรับการดาวน์โหลดไฟล์ ยังคงเป็นรูปแบบคำสั่งการเชื่อมโยงแบบปกติ เพียงแต่ชี้เป้าไปที่ไฟล์เอกสารตามที่ต้องการ ให้ผู้ชมดาวน์โหลด แทนที่ไฟล์หน้าเว็บเพจ เมื่อผู้ชมคลิกที่จุดเชื่อมโยง จะมีกรอบหน้าต่างถามว่า จะเปิดไฟล์ข้อมูลนั้นด้วยโปรแกรมที่เกี่ยวข้อง หรือจะดาวน์โหลดเก็บบันทึกไว้ในเครื่องของผู้ชมดังภาพ

นอกจากไฟล์เอกสารแล้ว ยังสามรถทำจุดเชื่อมโยงไปยังไฟล์ซอฟท์แวร์ต่างๆ ที่สามารถดาวน์โหลดไปติดตั้งลงในเครื่องได้ รูปแบบไฟล์ที่ให้ดาวน์โหลดนั้น อาจจะเป็นไฟล์บีบอัดข้อมูลเพื่อลดขนาดให้เล็กลง เช่น ไฟล์แบบ *.zip, *.rar, *.7z รวมทั้งไฟล์ติดตั้งที่เป็นสกุล *.exe ซึ่งมีให้บริการในเว็บไซต์ต่างๆ ทั้งในและนอกประเทศ เช่น www.filehippo.com หรือ www.thaiware.com


www.FileHippo.com	www.ThaiWare.com

Your visitor no.

Create & Design Web Page with Basic HTML & Tools
Author : KruMontree Kotkanta e-M@il : webmaster at krumontree.com