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