HTML - ลิงค์ข้อความ

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

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

Note- ขอแนะนำให้อ่านบทแนะนำสั้น ๆ เกี่ยวกับการทำความเข้าใจ URL

การเชื่อมโยงเอกสาร

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

<a href = "Document URL" ... attributes-list>Link Text</a>

ตัวอย่าง

ลองดูตัวอย่างลิงค์ http://www.tutorialspoint.com ที่เพจของคุณ -

<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "https://www.tutorialspoint.com" target = "_self">Tutorials Point</a>
   </body>
	
</html>

สิ่งนี้จะให้ผลลัพธ์ต่อไปนี้ซึ่งคุณสามารถคลิกลิงก์ที่สร้างขึ้นเพื่อไปยังโฮมเพจของ Tutorials Point (ในตัวอย่างนี้)

แอตทริบิวต์เป้าหมาย

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

ซีเนียร์ No ตัวเลือกและคำอธิบาย
1

_blank

เปิดเอกสารที่เชื่อมโยงในหน้าต่างหรือแท็บใหม่

2

_self

เปิดเอกสารที่เชื่อมโยงในเฟรมเดียวกัน

3

_parent

เปิดเอกสารที่เชื่อมโยงในเฟรมหลัก

4

_top

เปิดเอกสารที่เชื่อมโยงในเนื้อหาเต็มของหน้าต่าง

5

targetframe

เปิดเอกสารที่เชื่อมโยงในชื่อtargetframe

ตัวอย่าง

ลองใช้ตัวอย่างต่อไปนี้เพื่อทำความเข้าใจความแตกต่างพื้นฐานของตัวเลือกบางตัวที่กำหนดสำหรับแอตทริบิวต์เป้าหมาย

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body>
      <p>Click any of the following links</p>
      <a href = "/html/index.htm" target = "_blank">Opens in New</a> |
      <a href = "/html/index.htm" target = "_self">Opens in Self</a> |
      <a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
      <a href = "/html/index.htm" target = "_top">Opens in Body</a>
   </body>

</html>

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

การใช้ Base Path

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

ตัวอย่าง

ตัวอย่างต่อไปนี้ใช้แท็ก <base> เพื่อระบุ URL พื้นฐานและในภายหลังเราสามารถใช้เส้นทางสัมพัทธ์ไปยังลิงก์ทั้งหมดแทนที่จะให้ URL ที่สมบูรณ์สำหรับทุกลิงก์

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank">HTML Tutorial</a>
   </body>
	
</html>

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

URL ที่กำหนดในตอนนี้ <a href = "/html/index.htm" กำลังถูกพิจารณาว่าเป็น <ahref = "http://www.tutorialspoint.com/html/index.htm"

การเชื่อมโยงไปยังส่วนของหน้า

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

Note- แอตทริบิวต์ชื่อเลิกใช้งานใน HTML5 อย่าใช้แอตทริบิวต์นี้ ใช้แอตทริบิวต์idและtitleแทน

ขั้นแรกให้สร้างลิงค์ไปยังสถานที่ที่คุณต้องการเข้าถึงด้วย - ในหน้าเว็บและตั้งชื่อโดยใช้แท็ก <a ... > ดังนี้ -

<h1>HTML Text Links <a name = "top"></a></h1>

ขั้นตอนที่สองคือการสร้างไฮเปอร์ลิงก์เพื่อเชื่อมโยงเอกสารและสถานที่ที่คุณต้องการเข้าถึง -

<a href = "/html/html_text_links.htm#top">Go to the Top</a>

สิ่งนี้จะสร้างลิงค์ต่อไปนี้ซึ่งคุณสามารถคลิกที่ลิงค์ที่สร้างขึ้น Go to the Top เพื่อไปที่ด้านบนสุดของบทแนะนำลิงก์ข้อความ HTML

Go to the Top

การตั้งค่าสีของลิงค์

คุณสามารถกำหนดสีของลิงก์ลิงก์ที่ใช้งานอยู่และลิงก์ที่เยี่ยมชมได้โดยใช้ link, alink และ vlink แอตทริบิวต์ของแท็ก <body>

ตัวอย่าง

บันทึกสิ่งต่อไปนี้ใน test.htm และเปิดในเว็บเบราว์เซอร์เพื่อดูวิธีการ link, alink และ vlink แอตทริบิวต์ทำงาน

<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body alink = "#54A250" link = "#040404" vlink = "#F40633">
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
   </body>
   
</html>

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

ดาวน์โหลดลิงค์

คุณสามารถสร้างลิงค์ข้อความเพื่อทำให้ไฟล์ PDF หรือ DOC หรือ ZIP ดาวน์โหลดได้ มันง่ายมาก คุณเพียงแค่ระบุ URL ที่สมบูรณ์ของไฟล์ที่ดาวน์โหลดได้ดังนี้ -

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <a href = "https://www.tutorialspoint.com/page.pdf">Download PDF File</a>
   </body>
	
</html>

สิ่งนี้จะสร้างลิงค์ต่อไปนี้และจะใช้ในการดาวน์โหลดไฟล์

กล่องโต้ตอบดาวน์โหลดไฟล์

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

ตัวอย่างเช่นหากคุณต้องการสร้างไฟล์ Filename ดาวน์โหลดไฟล์ได้จากลิงค์ที่กำหนดจากนั้นไวยากรณ์จะเป็นดังนี้

#!/usr/bin/perl

# Additional HTTP Header
print "Content-Type:application/octet-stream; name = \"FileName\"\r\n";
print "Content-Disposition:attachment; filename = \"FileName\"\r\n\n";

# Open the target file and list down its content as follows
open( FILE, "<FileName" );

while(read(FILE, $buffer, 100)){
   print("$buffer");
}

Note- สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับโปรแกรม CGI PERL ไปผ่านการกวดวิชาPerl และ CGI