แท็กลิงก์ (Anchor Tag)
ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับแท็ก <p> ซึ่งใช้สำหรับสร้างย่อหน้าในหน้าเว็บ ในบทนี้ เราจะมาเรียนรู้เกี่ยวกับแท็ก <a> หรือที่เรียกว่า Anchor Tag ซึ่งเป็นแท็กที่สำคัญมากในการสร้างเว็บไซต์ เพราะใช้สำหรับสร้างลิงก์ไปยังหน้าเว็บอื่น ๆ หรือไปยังส่วนต่าง ๆ ภายในหน้าเว็บเดียวกัน ทำให้ผู้ใช้งานสามารถนำทางไปยังข้อมูลที่ต้องการได้อย่างง่ายดาย
แท็กลิงก์ (Anchor Tag) คืออะไร?
แท็กลิงก์ (<a>) เป็นแท็ก HTML ที่ใช้สำหรับสร้างไฮเปอร์ลิงก์ (Hyperlink) ซึ่งเป็นข้อความหรือรูปภาพที่เมื่อคลิกแล้วจะนำผู้ใช้ไปยังหน้าเว็บอื่น, ส่วนต่าง ๆ ของหน้าเว็บเดียวกัน, ไฟล์อื่น ๆ (เช่น PDF, รูปภาพ), หรือแม้กระทั่งเปิดโปรแกรมอีเมล
การใช้งาน attribute 'href'
attribute ที่สำคัญที่สุดของแท็กลิงก์คือ href (Hypertext Reference) ซึ่งใช้สำหรับระบุ URL (Uniform Resource Locator) หรือที่อยู่ของปลายทางที่ลิงก์จะนำผู้ใช้ไป
รูปแบบการใช้งาน:
<a href="URL">ข้อความหรือรูปภาพที่จะแสดงเป็นลิงก์</a>
ตัวอย่าง:
<a href="https://www.google.com">ไปที่ Google</a>
เมื่อผู้ใช้คลิกที่ข้อความ "ไปที่ Google" จะถูกนำไปยังหน้าเว็บของ Google
href สามารถใช้ได้กับ URL หลายประเภท:
- URL แบบ Absolute: คือ URL ที่ระบุที่อยู่แบบเต็มของหน้าเว็บ เช่น
https://www.example.com/about.html - URL แบบ Relative: คือ URL ที่อ้างอิงตำแหน่งของไฟล์ปัจจุบัน เช่น
about.html(อยู่ในโฟลเดอร์เดียวกัน) หรือ/images/logo.png(อยู่ในโฟลเดอร์imagesที่อยู่ใน root directory) - Anchor Link (ลิงก์ภายในหน้า): ใช้สำหรับลิงก์ไปยังส่วนต่าง ๆ ภายในหน้าเว็บเดียวกัน โดยใช้
#ตามด้วย ID ของ element ที่ต้องการลิงก์ไป - Mailto Link: ใช้สำหรับเปิดโปรแกรมอีเมลและกรอกที่อยู่อีเมลของผู้รับโดยอัตโนมัติ โดยใช้
mailto:ตามด้วยที่อยู่อีเมล - Tel Link: ใช้สำหรับโทรออกผ่านอุปกรณ์ที่รองรับ โดยใช้
tel:ตามด้วยหมายเลขโทรศัพท์
ตัวอย่างการใช้ URL แบบ Absolute และ Relative
URL แบบ Absolute
<a href="https://www.example.com/products/widget.html">ดูรายละเอียด Widget</a>
ในตัวอย่างนี้ ลิงก์จะนำผู้ใช้ไปยังหน้า widget.html ที่อยู่ในโฟลเดอร์ products บนเว็บไซต์ www.example.com
URL แบบ Relative
สมมติว่าเรามีไฟล์ HTML สองไฟล์: index.html และ about.html ซึ่งอยู่ในโฟลเดอร์เดียวกัน
ในไฟล์ index.html เราสามารถสร้างลิงก์ไปยัง about.html ได้ดังนี้:
<a href="about.html">เกี่ยวกับเรา</a>
ถ้า about.html อยู่ในโฟลเดอร์ย่อยชื่อ pages เราสามารถสร้างลิงก์ได้ดังนี้:
<a href="pages/about.html">เกี่ยวกับเรา</a>
ถ้าต้องการลิงก์กลับไปยังไฟล์ที่อยู่ในโฟลเดอร์แม่ เราสามารถใช้ ../ ได้:
<a href="../index.html">กลับไปหน้าแรก</a>
ลิงก์ภายในหน้าเว็บ (Anchor Link)
Anchor Link ใช้สำหรับนำทางผู้ใช้ไปยังส่วนต่าง ๆ ภายในหน้าเว็บเดียวกัน มักใช้กับหน้าเว็บที่มีเนื้อหาเยอะ ๆ เพื่อให้ผู้ใช้สามารถข้ามไปยังส่วนที่สนใจได้อย่างรวดเร็ว
ในการสร้าง Anchor Link เราต้องทำสองอย่าง:
- กำหนด ID ให้กับ element ที่ต้องการลิงก์ไป
- สร้างลิงก์โดยใช้
#ตามด้วย ID ของ element นั้น
ตัวอย่าง:
<h2 id="section1">หัวข้อที่ 1</h2>
<p>เนื้อหาของหัวข้อที่ 1...</p>
<h2 id="section2">หัวข้อที่ 2</h2>
<p>เนื้อหาของหัวข้อที่ 2...</p>
<a href="#section2">ไปที่หัวข้อที่ 2</a>
เมื่อผู้ใช้คลิกที่ลิงก์ "ไปที่หัวข้อที่ 2" หน้าเว็บจะเลื่อนไปยังส่วนที่มี ID เป็น section2
การเปิดลิงก์ในแท็บใหม่
โดยปกติ เมื่อผู้ใช้คลิกที่ลิงก์ หน้าเว็บใหม่จะเปิดขึ้นในแท็บเดียวกัน หากเราต้องการให้ลิงก์เปิดในแท็บใหม่ เราสามารถใช้ attribute target โดยกำหนดค่าเป็น _blank
<a href="https://www.example.com" target="_blank">เปิด Example.com ในแท็บใหม่</a>
เมื่อผู้ใช้คลิกที่ลิงก์นี้ หน้าเว็บของ Example.com จะเปิดขึ้นในแท็บใหม่
Mailto Link
Mailto Link ใช้สำหรับเปิดโปรแกรมอีเมลและกรอกที่อยู่อีเมลของผู้รับโดยอัตโนมัติ
<a href="mailto:info@example.com">ส่งอีเมลถึงเรา</a>
เมื่อผู้ใช้คลิกที่ลิงก์นี้ โปรแกรมอีเมลจะเปิดขึ้นพร้อมกับที่อยู่อีเมล info@example.com ในช่องผู้รับ
เราสามารถกำหนดหัวเรื่อง (subject) และเนื้อหา (body) ของอีเมลได้โดยใช้ parameters:
<a href="mailto:info@example.com?subject=สอบถามข้อมูล&body=สวัสดีครับ/ค่ะ">ส่งอีเมลพร้อมหัวเรื่องและเนื้อหา</a>
Tel Link
Tel Link ใช้สำหรับโทรออกผ่านอุปกรณ์ที่รองรับ (เช่น สมาร์ทโฟน)
<a href="tel:+15551234567">โทรหาเรา</a>
เมื่อผู้ใช้คลิกที่ลิงก์นี้ อุปกรณ์จะพยายามโทรไปยังหมายเลข +15551234567
การใช้รูปภาพเป็นลิงก์
เราสามารถใช้รูปภาพเป็นลิงก์ได้โดยการใส่แท็ก <img> ไว้ภายในแท็ก <a>
<a href="https://www.example.com"><img src="logo.png" alt="Example Logo"></a>
เมื่อผู้ใช้คลิกที่รูปภาพ logo.png จะถูกนำไปยังหน้าเว็บของ Example.com
สรุป
ในบทนี้ เราได้เรียนรู้เกี่ยวกับแท็กลิงก์ (<a>) ซึ่งเป็นแท็กที่สำคัญมากในการสร้างเว็บไซต์ เพราะใช้สำหรับสร้างไฮเปอร์ลิงก์ไปยังหน้าเว็บอื่น ๆ หรือไปยังส่วนต่าง ๆ ภายในหน้าเว็บเดียวกัน เราได้เรียนรู้เกี่ยวกับ attribute href, การสร้างลิงก์ภายในหน้าเว็บ, การเปิดลิงก์ในแท็บใหม่, Mailto Link, Tel Link, และการใช้รูปภาพเป็นลิงก์
ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับแท็ก <img> ซึ่งใช้สำหรับแสดงรูปภาพในหน้าเว็บ