HTML - Liên kết Văn bản
Một trang web có thể chứa các liên kết khác nhau đưa bạn trực tiếp đến các trang khác và thậm chí các phần cụ thể của một trang nhất định. Các liên kết này được gọi là siêu liên kết.
Các siêu liên kết cho phép khách truy cập điều hướng giữa các trang Web bằng cách nhấp vào các từ, cụm từ và hình ảnh. Vì vậy, bạn có thể tạo siêu liên kết bằng văn bản hoặc hình ảnh có sẵn trên trang web.
Note- Tôi khuyên bạn nên xem qua một hướng dẫn ngắn về Hiểu URL
Liên kết tài liệu
Một liên kết được chỉ định bằng thẻ HTML <a>. Thẻ này được gọi làanchor tagvà bất kỳ thứ gì giữa thẻ mở <a> và thẻ đóng </a> đều trở thành một phần của liên kết và người dùng có thể nhấp vào phần đó để truy cập tài liệu được liên kết. Sau đây là cú pháp đơn giản để sử dụng thẻ <a>.
<a href = "Document URL" ... attributes-list>Link Text</a>Thí dụ
Hãy thử làm theo ví dụ liên kết http://www.tutorialspoint.com tại trang của bạn -
<!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>Điều này sẽ tạo ra kết quả sau, nơi bạn có thể nhấp vào liên kết được tạo để truy cập trang chủ của Tutorials Point (trong ví dụ này).
Thuộc tính mục tiêu
Chúng tôi vừa dùng targettrong ví dụ trước của chúng tôi. Thuộc tính này được sử dụng để chỉ định vị trí nơi tài liệu được liên kết được mở. Sau đây là các tùy chọn khả thi -
| Sr.No | Tùy chọn & Mô tả |
|---|---|
| 1 |
_blank Mở tài liệu được liên kết trong một cửa sổ hoặc tab mới. |
| 2 |
_self Mở tài liệu được liên kết trong cùng một khung. |
| 3 |
_parent Mở tài liệu được liên kết trong khung chính. |
| 4 |
_top Mở tài liệu được liên kết trong toàn bộ phần nội dung của cửa sổ. |
| 5 |
targetframe Mở tài liệu được liên kết trong một tên targetframe . |
Thí dụ
Hãy thử ví dụ sau để hiểu sự khác biệt cơ bản trong một số tùy chọn được cung cấp cho thuộc tính mục tiêu.
<!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>Điều này sẽ tạo ra kết quả sau, nơi bạn có thể nhấp vào các liên kết khác nhau để hiểu sự khác biệt giữa các tùy chọn khác nhau được cung cấp cho thuộc tính đích.
Sử dụng đường dẫn cơ sở
Khi bạn liên kết các tài liệu HTML liên quan đến cùng một trang web, không bắt buộc phải cung cấp URL hoàn chỉnh cho mọi liên kết. Bạn có thể loại bỏ nó nếu bạn sử dụng<base>trong tiêu đề tài liệu HTML của bạn. Thẻ này được sử dụng để cung cấp một đường dẫn cơ sở cho tất cả các liên kết. Vì vậy, trình duyệt của bạn sẽ nối đường dẫn tương đối nhất định với đường dẫn cơ sở này và sẽ tạo thành một URL hoàn chỉnh.
Thí dụ
Ví dụ sau sử dụng thẻ <base> để chỉ định URL cơ sở và sau này chúng ta có thể sử dụng đường dẫn tương đối đến tất cả các liên kết thay vì cung cấp URL hoàn chỉnh cho mọi liên kết.
<!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>Điều này sẽ tạo ra kết quả sau, nơi bạn có thể nhấp vào liên kết được tạo HTML Tutorial để đến với hướng dẫn HTML.
URL hiện đã cung cấp <a href = "/html/index.htm" đang được coi là <ahref = "http://www.tutorialspoint.com/html/index.htm"
Liên kết đến một phần trang
Bạn có thể tạo liên kết đến một phần cụ thể của một trang web nhất định bằng cách sử dụng namethuộc tính. Đây là một quy trình gồm hai bước.
Note- Thuộc tính name không được dùng trong HTML5. Không sử dụng thuộc tính này. Sử dụng thuộc tính id và title thay thế.
Trước tiên, hãy tạo một liên kết đến nơi bạn muốn truy cập bằng trang web và đặt tên cho nó bằng thẻ <a ...> như sau:
<h1>HTML Text Links <a name = "top"></a></h1>Bước thứ hai là tạo một siêu liên kết để liên kết tài liệu và đặt nơi bạn muốn đến -
<a href = "/html/html_text_links.htm#top">Go to the Top</a>Điều này sẽ tạo ra liên kết sau, nơi bạn có thể nhấp vào liên kết được tạo Go to the Top để đến đầu hướng dẫn Liên kết văn bản HTML.
Go to the TopĐặt màu liên kết
Bạn có thể đặt màu cho các liên kết, liên kết hoạt động và liên kết đã truy cập bằng cách sử dụng link, alink và vlink thuộc tính của thẻ <body>.
Thí dụ
Lưu phần sau vào test.htm và mở nó trong bất kỳ trình duyệt web nào để xem cách thực hiện link, alink và vlink các thuộc tính hoạt động.
<!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>Điều này sẽ tạo ra kết quả sau. Chỉ cần kiểm tra màu sắc của liên kết trước khi nhấp vào nó, tiếp theo hãy kiểm tra màu sắc của nó khi bạn kích hoạt nó và khi liên kết đã được truy cập.
Liên kết tải xuống
Bạn có thể tạo liên kết văn bản để tải xuống các tệp PDF, DOC hoặc ZIP. Điều này rất đơn giản; bạn chỉ cần cung cấp URL đầy đủ của tệp có thể tải xuống như sau:
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<a href = "https://www.tutorialspoint.com/page.pdf">Download PDF File</a>
</body>
</html>Điều này sẽ tạo ra liên kết sau và sẽ được sử dụng để tải xuống một tệp.
Hộp thoại Tải xuống Tệp
Đôi khi bạn muốn cung cấp một tùy chọn trong đó người dùng sẽ nhấp vào một liên kết và nó sẽ bật lên hộp "Tải xuống tệp" cho người dùng thay vì hiển thị nội dung thực tế. Điều này rất dễ dàng và có thể đạt được bằng cách sử dụng tiêu đề HTTP trong phản hồi HTTP của bạn.
Ví dụ, nếu bạn muốn Filename tệp có thể tải xuống từ một liên kết nhất định thì cú pháp của nó sẽ như sau.
#!/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- Để biết thêm chi tiết về các chương trình PERL CGI, hãy xem phần hướng dẫn PERL và CGI .