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> ครอบข้อความนั้น โดยในคำสั่งเปิดจะต้องมีการระบุเป้าหมายเว็บไซต์ ดังตัวอย่างด้านล่าง
 

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

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 : เชื่อมโยงไปยังอีเมล์

ถ้าคุณท่องเน็ตบ่อยๆ จะพบว่า มีบางจุดเชื่อมโยงที่ปรากฏในหน้าเว็บเพจ เมื่อเราคลิก จะปรากฏว่ามีหน้าต่างโปรแกรมรับ-ส่งอีเมล์ เช่น Outlook Express พร้อมกับ New Message ถ้าสังเกตให้ดีจะพบว่าในช่อง To: จะมีที่อยู่อีเมล์ของจุดเชื่อมโยงมาปรากฏแล้วโดยอัตโนมัติ โดยไม่ต้องป้อนด้วยมือ เพียงแต่เขียนหัวเรื่อง (subject) และเนื้อความในจดหมายให้ครบถ้วน แล้วสามารถส่งออกไปได้ทันที การสร้างจุดเชื่อมโยงไปยังอีเมล์นี้เป็นที่นิยม สำหรับไว้รับคำแนะนำ ติ/ชม จากผู้เข้าชมเว็บไซต์ เพื่อการนำไปพัฒนาให้ดียิ่งๆ ขึ้นไป

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

<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! คุณสามารถกำหนดหัวข้ออีเมล์โดยอัตโนมัติไปกับจุดเชื่อมโยงโดยเพิ่มเติมคำสั่งเพียงเล็กน้อยดังนี้ <A HREF="emailto:krumontree@gmail.com?subject:Comment this website">Mail to ME</A> ในหัวข้อจดหมายจะปรากฏข้อความ Subject : Comment this website ให้โดยอัตโนมัติ

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

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

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

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

www.FileHippo.com	www.ThaiWare.com

มีลิงก์สอนเกี่ยวกับภาษา HTML มาแนะนำนะครับ เป็นภาษาอังกฤษ แต่ก็อ่านทำความเข้าใจง่าย ขอบคุณสำหรับการแนะนำมาของคุณ Julie ไปเยี่ยมชมกันได้เลย HTML for Beginners.

และเพิ่มเติมอีกหนึ่งเว็บสำหรับมาตรฐาน HTML5 และ CSS ที่น่าสนใจ เช่นเดิมเป็นภาษาอังกฤษ แต่ก็อ่านทำความเข้าใจได้ไม่ยาก ขอบคุณสำหรับการแนะนำของคุณKarla คือ HTML Cheat Sheet ไปดูกันเลย