วิธีสร้างไฮเปอร์ลิงก์ใน HTML

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

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

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

HTML ไฮเปอร์ลิงก์

<a href="your_url">This text will go to a URL.</a>

ข้อความระหว่างแท็กของเราจะเชื่อมโยงไปยัง URL ที่เราระบุในแท็กเปิดของเรา เราใช้ href คุณลักษณะเพื่อเลือกเป้าหมายของ URL นี่อาจเป็น URL ที่สมบูรณ์หรือลิงก์ที่สมบูรณ์ เช่น https://www.careerkarma.com หรือ URL ที่สัมพันธ์กับที่ใดที่หนึ่งบนเว็บไซต์ของเรา

นี่คือตัวอย่างลิงก์ที่ชี้ไปยังที่อยู่เว็บของโฮมเพจ Career Karma:

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

<a href="https://www.careerkarma.com">Career Karma</a>

ประเภทแท็กไฮเปอร์ลิงก์ HTML

มีลิงค์สามประเภทที่อาจปรากฏในเบราว์เซอร์ ดังต่อไปนี้:

• ลิงก์ที่ยังไม่ได้เข้าชม ซึ่งปรากฏเป็นสีน้ำเงิน
• ลิงก์ที่เข้าชม ซึ่งปรากฏเป็นสีม่วง
• ลิงก์ที่ใช้งานอยู่ ซึ่งปรากฏเป็นสีแดง

บางเว็บไซต์เขียนทับสีเหล่านี้ ซึ่งหมายความว่าสีเหล่านี้ดูแตกต่างออกไป แต่เป็นลิงก์ประเภทหลักที่คุณสามารถจัดรูปแบบใน HTML .

ไฮเปอร์ลิงก์ HTML:เป้าหมาย

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

นั่นคือที่ลิงก์ targetHTML เข้ามาด้วยการใช้ลิงค์ target คุณสามารถระบุตำแหน่งที่เบราว์เซอร์ควรเปิดทรัพยากรที่คุณเชื่อมโยงไว้

คุณสามารถใช้เป้าหมายได้สี่ประเภท ซึ่งมีดังนี้:

• _ตัวเอง :เยี่ยมชมทรัพยากรบนเว็บในหน้าต่างและแท็บเดียวกัน นี่คือเป้าหมายเริ่มต้นที่ใช้ใน HTML ไฮเปอร์ลิงก์
• _parent :เยี่ยมชมทรัพยากรบนเว็บในหน้าต่างหลัก
• _blank :ไปที่ทรัพยากรบนเว็บในหน้าต่างหรือแท็บใหม่
• _top :เยี่ยมชมทรัพยากรบนเว็บในหน้าต่างเบราว์เซอร์แบบเต็ม

นี่คือตัวอย่างการทำงานของลิงก์บางส่วน:

<a href="https://www.careerkarma.com" target="_self">This link will open in this tab.</a>
<a href="https://www.careerkarma.com" target="_parent">This link will open a parent window.</a>
<a href="https://www.careerkarma.com" target="_blank">This link will open in a new tab.</a>
<a href="https://www.careerkarma.com" target="_top">This link will open in a full browser window.</a>

ไฮเปอร์ลิงก์ HTML:บุ๊กมาร์ก Anchors

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

ก่อนที่คุณจะเริ่มใช้จุดยึดบุ๊กมาร์ก ก่อนอื่นคุณต้องกำหนดแอตทริบิวต์ ID บนองค์ประกอบที่คุณต้องการให้ผู้ใช้ไป ต่อไปนี้คือตัวอย่างการประกาศแอตทริบิวต์ ID บนชื่อในหน้าเว็บ:

<h3 id="subtitle3">Subtitle 3</h3>

เราได้ให้แท็กหัวเรื่อง HTML id subtitle3 ซึ่งเราสามารถใช้เพื่ออ้างอิงใน ไฮเปอร์ลิงก์ .

นี่คือตัวอย่าง ไฮเปอร์ลิงก์ ที่อ้างอิงถึงหัวข้อนี้:

<a href="#subtitle3">Go to Subtitle 3</a>

แทนที่จะระบุ URL ใน href . ของเรา แท็ก เราระบุ ID ขององค์ประกอบที่เราต้องการเชื่อมโยง เราเพิ่มเครื่องหมายแฮชก่อนรหัสนั้น (#) เพื่อให้เบราว์เซอร์รู้ว่าเอกสารที่เชื่อมโยงนั้นอยู่บนหน้าเว็บของเรา

แท็ก Anchor HTML

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

ตัวอย่างแท็ก Anchor HTML

URL สัมพัทธ์

หากคุณกำลังเชื่อมโยงไปยังทรัพยากรในเอกสาร HTML เดียวกันกับที่คุณกำลังพัฒนา คุณสามารถใช้ URL ที่เกี่ยวข้องได้ URL สัมพัทธ์ยังถูกอ้างถึงเป็นลิงก์ในเครื่องและไม่ใช้ไวยากรณ์ “https://www.sitename.com” แต่ URL สัมพัทธ์จะชี้ไปที่เส้นทางไฟล์ของทรัพยากรบนเว็บเฉพาะบนเซิร์ฟเวอร์ภายในเครื่อง

สมมติว่าเรากำลังสร้างลิงก์บนเว็บไซต์ Career Karma ซึ่งควรชี้ไปที่บล็อกของเรา แทนที่จะใช้ URL แบบสัมบูรณ์ เราสามารถใช้ URL ในพื้นที่ได้ เนื่องจากไซต์ของเราเป็นไซต์ Career Karma นี่คือรหัสที่เราจะใช้สร้างลิงค์นี้:

<a href="/blog">Career Karma blog</a>

เมื่อเราคลิกที่ข้อความ บล็อก Career Karma เราถูกส่งไปยัง /blog ทรัพยากรบนเว็บไซต์ของเรา

ที่อยู่อีเมล

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

ในการลิงก์ไปยังที่อยู่อีเมล เราต้องเริ่มลิงก์ด้วยโปรโตคอล mailto:นี่คือตัวอย่างการเชื่อมโยงไปยังที่อยู่อีเมลในรูปแบบ HTML:

<a href="mailto:nothing@google.com">Send an email to us!</a>

เมื่อเราคลิกลิงก์ โปรแกรมอีเมลของเราจะเปิดขึ้นและขอให้เราส่งอีเมลไปที่ "nothing@google.com"

ลิงก์ไปยังองค์ประกอบ

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

<a href="#test_heading">Jump to Test Heading</a>

<h2 id="test_heading">Test Heading</h2>

เมื่อเราคลิกที่ลิงค์ หน้าเว็บของเราจะเลื่อนลงไปที่องค์ประกอบที่มี id test_heading .

บทสรุป

ไฮเปอร์ลิงก์ สามารถใช้ใน HTML เพื่อเชื่อมโยงหน้าเว็บหรือแหล่งข้อมูลหนึ่งไปยังอีกหน้าเว็บหนึ่ง คุณสามารถใช้ไฮเปอร์ลิงก์ เพื่อเชื่อมต่อกับแหล่งข้อมูลในเว็บไซต์ของคุณหรือบนเว็บไซต์อื่น ๆ ในคู่มือนี้ เราได้แจกแจงวิธีใช้ไฮเปอร์ลิงก์ ใน HTML เอกสาร

ด้วยข้อมูลทั้งหมดนี้ คุณก็พร้อมที่จะสร้างไฮเปอร์ลิงก์ ใน HTML เหมือนอาจารย์!

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการเขียนโค้ดใน HTML โปรดอ่านคู่มือวิธีเรียนรู้ HTML ของเรา