ลิงค์ HTML
ลิงค์มีอยู่เกือบทุกหน้า ลิงก์อนุญาตให้ผู้ใช้คลิกจากหน้าหนึ่งไปยังอีกหน้าหนึ่ง
ลิงก์ HTML - ไฮเปอร์ลิงก์
ลิงก์ HTML เป็นไฮเปอร์ลิงก์
คุณสามารถคลิกลิงก์และข้ามไปยังเอกสารอื่นได้
เมื่อคุณเลื่อนเมาส์ไปที่ลิงก์ ลูกศรของเมาส์จะเปลี่ยนเป็นมือเล็กๆ
หมายเหตุ:ลิงก์ไม่จำเป็นต้องเป็นข้อความ ลิงค์สามารถเป็นรูปภาพหรือองค์ประกอบ HTML อื่น ๆ ได้!
ลิงค์ HTML - ไวยากรณ์
แท็ก HTML <a>กำหนดไฮเปอร์ลิงก์ มันมีไวยากรณ์ต่อไปนี้:
<a href="url">link text</a>
คุณลักษณะที่สำคัญที่สุดของ<a> องค์ประกอบคือ
hrefแอตทริบิวต์ ซึ่งระบุปลายทางของลิงก์
ข้อความลิงก์เป็นส่วนที่ผู้อ่านจะมองเห็นได้
การคลิกที่ข้อความลิงค์ จะเป็นการส่งผู้อ่านไปยังที่อยู่ URL ที่ระบุ
ตัวอย่าง
ตัวอย่างนี้แสดงวิธีการสร้างลิงค์ไปยัง W3Schools.com:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
ตามค่าเริ่มต้น ลิงก์จะปรากฏดังนี้ในทุกเบราว์เซอร์:
- ลิงก์ที่ยังไม่ได้เข้าชมจะถูกขีดเส้นใต้และสีน้ำเงิน
- ลิงก์ที่เข้าชมถูกขีดเส้นใต้และสีม่วง
- ลิงก์ที่ใช้งานอยู่จะถูกขีดเส้นใต้และสีแดง
เคล็ดลับ:แน่นอนว่าลิงก์สามารถกำหนดสไตล์ด้วย CSS ได้ เพื่อให้ได้รูปลักษณ์ใหม่!
ลิงค์ HTML - แอตทริบิวต์เป้าหมาย
ตามค่าเริ่มต้น หน้าที่เชื่อมโยงจะแสดงในหน้าต่างเบราว์เซอร์ปัจจุบัน หากต้องการเปลี่ยนแปลง คุณต้องระบุเป้าหมายอื่นสำหรับลิงก์
แอตทริบิวต์targetระบุตำแหน่งที่จะเปิดเอกสารที่เชื่อมโยง
แอตทริบิวต์targetสามารถมีค่าใดค่าหนึ่งต่อไปนี้:
_self- ค่าเริ่มต้น. เปิดเอกสารในหน้าต่าง/แท็บเดียวกับที่คลิก_blank- เปิดเอกสารในหน้าต่างใหม่หรือแท็บ_parent- เปิดเอกสารในกรอบหลัก_top- เปิดเอกสารแบบเต็มหน้าต่าง
ตัวอย่าง
ใช้ target="_blank" เพื่อเปิดเอกสารที่เชื่อมโยงในหน้าต่างเบราว์เซอร์ใหม่หรือแท็บ:
<a href="https://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>
URL สัมบูรณ์กับ URL สัมพัทธ์
ทั้งสองตัวอย่างข้างต้นใช้URL แบบสัมบูรณ์ (ที่อยู่เว็บแบบเต็ม) ในhrefแอตทริบิวต์
ลิงก์ในเครื่อง (ลิงก์ไปยังหน้าภายในเว็บไซต์เดียวกัน) ระบุด้วย URL ที่เกี่ยวข้อง (ไม่มีส่วน "https://www"):
ตัวอย่าง
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative
URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS
Tutorial</a></p>
ลิงก์ HTML - ใช้รูปภาพเป็นลิงก์
หากต้องการใช้รูปภาพเป็นลิงก์ ให้ใส่<img>
แท็กใน<a>แท็ก:
ตัวอย่าง
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
เชื่อมโยงไปยังที่อยู่อีเมล
ใช้
mailto:ภายใน
hrefแอตทริบิวต์เพื่อสร้างลิงก์ที่เปิดโปรแกรมอีเมลของผู้ใช้ (เพื่อให้ผู้ใช้ส่งอีเมลใหม่ได้):
ตัวอย่าง
<a href="mailto:[email protected]">Send email</a>
ปุ่มเป็นลิงค์
หากต้องการใช้ปุ่ม HTML เป็นลิงก์ คุณต้องเพิ่มโค้ด JavaScript
JavaScript ช่วยให้คุณระบุสิ่งที่เกิดขึ้นในเหตุการณ์บางอย่างได้ เช่น การคลิกปุ่ม:
ตัวอย่าง
<button
onclick="document.location='default.asp'">HTML Tutorial</button>
เคล็ดลับ:เรียนรู้เพิ่มเติมเกี่ยวกับ JavaScript ใน บทช่วย สอน JavaScriptของ เรา
ชื่อลิงค์
แอตทริบิวต์titleระบุข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ ข้อมูลมักแสดงเป็นข้อความคำแนะนำเครื่องมือเมื่อเลื่อนเมาส์ไปเหนือองค์ประกอบ
ตัวอย่าง
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
เพิ่มเติมเกี่ยวกับ Absolute URLs และ Relative URLs
ตัวอย่าง
ใช้ URL แบบเต็มเพื่อเชื่อมโยงไปยังหน้าเว็บ:
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
ตัวอย่าง
ลิงค์ไปยังเพจที่อยู่ในโฟลเดอร์ html บนเว็บไซต์ปัจจุบัน:
<a href="/html/default.asp">HTML tutorial</a>
ตัวอย่าง
ลิงค์ไปยังเพจที่อยู่ในโฟลเดอร์เดียวกันกับเพจปัจจุบัน:
<a href="default.asp">HTML tutorial</a>
คุณสามารถอ่านเพิ่มเติมเกี่ยวกับพา ธของไฟล์ได้ในบทHTML File Paths
สรุปบท
- ใช้
<a>องค์ประกอบเพื่อกำหนดลิงค์ - ใช้
hrefแอตทริบิวต์เพื่อกำหนดที่อยู่ลิงก์ - ใช้
targetแอตทริบิวต์เพื่อกำหนดตำแหน่งที่จะเปิดเอกสารที่เชื่อมโยง - ใช้
<img>องค์ประกอบ (ภายใน<a>) เพื่อใช้รูปภาพเป็นลิงค์ - ใช้
mailto:รูปแบบภายในhrefแอตทริบิวต์เพื่อสร้างลิงก์ที่เปิดโปรแกรมอีเมลของผู้ใช้
แท็กลิงก์ HTML
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
สำหรับรายการแท็ก HTML ทั้งหมดที่มีอยู่ โปรดไปที่การอ้างอิงแท็ก HTMLของ เรา