ลิงก์ HTML
- หน้าก่อนหน้า HTML CSS
- หน้าต่อไป รูปภาพ HTML
HTML ใช้ลิงก์สุดยอดเพื่อเชื่อมโยงกับเอกสารอื่นในเครือข่าย
ลิงก์สามารถหาได้ในหน้าเว็บส่วนใหญ่ การคลิกลิงก์จะทำให้กระโดดไปยังหน้าเว็บอื่น
ตัวอย่าง
- สร้างลิงก์สุดยอด
- ตัวอย่างนี้แสดงวิธีการสร้างลิงก์ในเอกสาร HTML
- ใช้ภาพเป็นลิงก์
- ตัวอย่างนี้แสดงวิธีการใช้ภาพเป็นลิงก์
ลิงก์สุดยอด HTML (ลิงก์)
ลิงก์สามารถเป็นตัวอักษรหนึ่ง คำหนึ่ง หรือกลุ่มคำหลายคำ หรือภาพกราฟฟิก คุณสามารถคลิกเหล่านี้เพื่อกระโดดไปยังเอกสารใหม่หรือส่วนใดในเอกสารปัจจุบัน
เมื่อคุณเคลื่อนตัวตามเมาส์ไปยังลิงก์ในหน้าเว็บนี้ แซงเปลว์จะเปลี่ยนเป็นมือเล็ก
เราสร้างลิงก์ด้วยการใช้แท็ก <a> ใน HTML。
มีสองรูปแบบใช้สาย <a> คือ:
- ด้วยการใช้รูปแบบ href - สร้างลิงก์ที่มุ่งหน้าที่เอกสารอื่น
- ด้วยการใช้รูปแบบ name - สร้างหลักฐานภายในเอกสาร
อ่านเพิ่มเติม:มันคืออะไรที่เรียกว่า HyperText?
รูปแบบ HTML ลิงก์
รหัส HTML ของลิงก์ง่ายงมาก มันเหมือนนี้:
<a href="url">Link text</a>
รูปแบบ href กำหนดเป้าหมายของลิงก์
ข้อความที่อยู่ระหว่างแทร็กแบ็ค (start tag) และแทร็กแบ็ค (end tag) จะถูกแสดงเป็นลิงก์เมื่อใช้งาน
ตัวอย่าง
<a href="http://www.codew3c.com/">เข้าเว็บ CodeW3C.com</a>
บรรทัดรหัสนี้จะแสดงข้อความดังนี้:เยี่ยมชม CodeW3C.com
การกดลิงก์นี้จะนำผู้ใช้ไปยังหน้าหลักของ CodeW3C.com
คำแนะนำ:"ข้อความลิงก์" ไม่จำเป็นต้องเป็นข้อความเท่านั้น ภาพหรืออิเล็กทรอนิกส์ HTML หนึ่งอย่างก็สามารถเป็นลิงก์ได้
HTML ลิงก์ - รูปแบบ target
ด้วยรูปแบบ Target คุณสามารถกำหนดที่ไหนที่เอกสารที่มีลิงก์จะแสดงขึ้นมา
บรรทัดนี้จะเปิดเอกสารในหน้าต่างใหม่:
<a href="http://www.codew3c.com/" target="_blank">เยี่ยมชม CodeW3C.com!</a>
HTML ลิงก์ - รูปแบบ name
รูปแบบ name กำหนดชื่อหลักฐาน (anchor)。
คุณสามารถสร้างหลักฐานในหน้าเว็บ HTML ด้วยรูปแบบ name ได้。
หลักฐานจะไม่แสดงในรูปแบบพิเศษใดๆ และไม่มีเห็นโดยผู้อ่าน。
เมื่อใช้หลักฐานที่มีชื่อ (named anchors) เราสามารถสร้างลิงก์ที่จะข้ามไปยังหลักฐานที่มีชื่อ (เช่นหนึ่งบทบาทในหน้า) ซึ่งทำให้ผู้ใช้ไม่จำเป็นต้องเลื่อนหน้าเว็บต่อไปตามลำดับเพื่อหาข้อมูลที่ต้องการ。
สายการใช้หลักฐาน:
<a name="label">หลักฐาน (แสดงข้อความบนหน้าเว็บ)</a>
คำแนะนำ:ชื่อหลักฐานสามารถเป็นชื่อที่คุณชื่นชอบใดก็ได้。
คำแนะนำ:คุณสามารถใช้รูปแบบ id แทนรูปแบบ name ได้ ชื่อหลักฐานยังมีประโยชน์เช่นกัน。
ตัวอย่าง
หลังจากนั้นเราจะตั้งชื่อหลักฐานในเอกสาร HTML (สร้างทางหลักฐาน):
<a name="tips">คำเตือนพื้นฐาน - คำแนะนำที่มีประโยชน์</a>
เราจะสร้างลิงก์ที่มุ่งหน้าที่หลักฐานนี้ในเอกสารเดียวกัน:
<a href="#tips">คำแนะนำที่มีประโยชน์</a>
คุณก็สามารถสร้างลิงก์ที่มุ่งหน้าที่หลักฐานนี้ในหน้าอื่นๆของเว็บไซต์ได้:
<a href="http://www.codew3c.com/html/html_links.asp#tips">คำแนะนำที่มีประโยชน์</a>
ในรหัสที่แสดงด้านบน เราเพิ่มสัญลักษณ์ # และชื่อที่ชื่อหน้าที่ที่เพิ่มไปที่ท้ายของ URL จึงสามารถลิงก์ตรงไปยังหน้าที่ชื่อ tips ได้โดยตรง
ผลลัพธ์ที่เกิดขึ้น:คำแนะนำที่มีประโยชน์
ความเกี่ยวข้องพื้นฐาน - คำแนะนำที่มีประโยชน์:
หมายเหตุ:กรุณาเพิ่มสลีดสองแบบทางด้านหลังตัวยึดติดเสริม หากเขียนลิงก์อย่างนี้: href="http://www.codew3c.com/html" จะทำให้เกิดคำขอ HTTP สองครั้งต่อเว็บเซิร์ฟเวอร์ นี้เพราะเว็บเซิร์ฟเวอร์จะเพิ่มสลีดสองแบบทางด้านหลังตัวยึดติดเสริม และสร้างคำขอใหม่ ดังนี้: href="http://www.codew3c.com/html/"
คำแนะนำ:ตัวที่ชื่อหน้าทั่วไปถูกใช้บ่อยในการสร้างไอดีซีในต้นของเอกสารใหญ่ สามารถแต่งตั้งตัวที่ชื่อหน้าแก่แต่ละบทบาท และจัดการลิงก์ที่จะลิงกับหน้าที่ชื่อนี้ไปยังส่วนบนของเอกสาร หากคุณเข้าเว็บไซต์百度百科 คุณจะพบว่าเกือบทุกบทความใช้วิธีนี้สำหรับการเนวิเกชั่น
คำแนะนำ:หากเบราเซอร์ไม่พบตัวที่ชื่อหน้าที่กำหนด จะติดตามไปยังจุดตั้งต้นของเอกสาร จะไม่มีข้อผิดพลาดใดๆ
ตัวอย่างเพิ่มเติม
- เปิดลิงก์ในหน้าต่างเบราเซอร์ใหม่
- ตัวอย่างนี้แสดงว่าวิธีการเปิดหน้าในหน้าต่างเบราเซอร์ใหม่ ซึ่งทำให้ผู้ใช้ไม่จำเป็นต้องออกจากเว็บไซต์ของคุณ
- ลิงก์ไปยังตำแหน่งที่แตกต่างกันในหน้าเดียวกัน
- ตัวอย่างนี้แสดงว่าวิธีการใช้ลิงก์เพื่อกระโดดไปยังส่วนอื่นของเอกสาร
- กระโดดออกจากเฟรมโมง
- ตัวอย่างนี้แสดงว่าวิธีการใช้ลิงก์เพื่อกระโดดออกจากเฟรมโมง (หากหน้าของคุณถูกจัดวางในเฟรมโมง)
- สร้างลิงก์อีเมลล์
- ตัวอย่างนี้แสดงว่าวิธีการลิงก์ไปยังอีเมล์ (ตัวอย่างนี้จะทำงานได้เมื่อได้ติดตั้งโปรแกรมอีเมลล์ล่วงหน้า)
- สร้างลิงก์อีเมลล์ 2
- ตัวอย่างนี้แสดงว่าลิงก์อีเมลล์ที่มีความซับซ้อนมากขึ้น
แท็กลิงก์ HTML
| แท็ก | การอธิบาย |
|---|---|
| <a> | นิยามที่จะยึดติด |
- หน้าก่อนหน้า HTML CSS
- หน้าต่อไป รูปภาพ HTML
