Một trang web có thể chứa nhiều đường liên kết khác nhau để kết nối với các trang khác hoặc một phần của trang đó. Điều này cho phép người dùng truy cập vào các trang web khác nhau bằng cách nhấn chuột vào từ, cụm từ hoặc hình ảnh. Điều này có nghĩa là bạn có thể tạo ra đường liên kết bằng văn bản hoặc hình ảnh có sẵn trên trang web của bạn.
Thẻ <a> trong HTML
Một đường liên kết được xác định bằng cách sử dụng thẻ <a>. Thẻ này được gọi là "thẻ neo" và bất cứ thứ gì nằm giữa thẻ mở <a> và thẻ đóng </a> sẽ trở thành một phần của đường liên kết và khi người dùng nhấn vào phần đó, họ sẽ được chuyển tới tài liệu mà đường liên kết gán vào. Dưới đây là cú pháp sử dụng thẻ <a>:
<a href="đường dẫn url tới trang HTML" ... danh-sách-thuộc-tính>Ghi chú</a>Ví dụ về đường liên kết văn bản trong HTML
Hãy xem ví dụ sau để liên kết với trang Hoclaptrinh Homepage từ trang của bạn:
<html>
<head>
<title>Ví dụ đường liên kết văn bản trong HTML</title>
</head>
<body>
<p>Click chuột vào đường link sau:</p>
<a href="http://hoclaptrinh.vn" target="_self">Hoclaptrinh Homepage</a>
</body>
</html>Kết quả là khi bạn nhấn vào "Hoclaptrinh Homepage", bạn sẽ được chuyển tới trang chủ của nó.
Thuộc tính target trong HTML
Chúng ta đã sử dụng thuộc tính "target" trong ví dụ trước đó. Thuộc tính này được sử dụng để xác định nơi đường liên kết sẽ mở. Dưới đây là các tùy chọn:
_blank: Mở trang liên kết trong một cửa sổ mới._self: Mở trang liên kết trong cùng một khung như khung chứa liên kết._parent: Mở trang liên kết trong khung chứa đường liên kết._top: Mở trang liên kết trong cửa sổ toàn màn hình.targetframe: Mở tài liệu được liên kết trong khung đã đặt tên.
Ví dụ
Dưới đây là một ví dụ để hiểu rõ sự khác nhau giữa các tùy chọn trên của thuộc tính "target":
<html>
<head>
<title>Ví dụ đường liên kết văn bản trong HTML</title>
</head>
<body>
<p>Click chuột vào một trong các liên kết sau:</p>
<a href="../html/text_link_trong_html.jsp" target="_blank">Ví dụ giá trị _blank</a> | <a href="../html/text_link_trong_html.jsp" target="_self">Ví dụ giá trị _self</a> | <a href="../html/text_link_trong_html.jsp" target="_parent">Ví dụ giá trị _parent</a> | <a href="../html/text_link_trong_html.jsp" target="_top">Ví dụ giá trị _top</a>
</body>
</html>Kết quả là khi bạn nhấn vào các đường liên kết khác nhau, bạn sẽ hiểu sự khác nhau giữa các tùy chọn trên của thuộc tính "target".
Sử dụng Base Link trong HTML
Khi bạn liên kết tài liệu HTML với cùng một trang web, bạn không cần cung cấp một địa chỉ URL đầy đủ cho tất cả các liên kết. Bạn có thể từ bỏ điều này nếu bạn sử dụng thẻ <base> trong phần tiêu đề của tài liệu. Thẻ này được sử dụng để cung cấp một đường liên kết cơ sở cho tất cả các liên kết. Do đó, trình duyệt sẽ kết hợp các đường liên kết liên quan với đường liên kết cơ sở và tạo thành một đường liên kết đầy đủ.
Ví dụ
Dưới đây là một ví dụ về việc sử dụng thẻ <base> để xác định đường liên kết cơ sở URL và sau đó chúng ta có thể sử dụng các đường liên quan cho tất cả các liên kết mà không cần cung cấp đường liên kết đầy đủ cho chúng:
<html>
<head>
<title>Ví dụ đường liên kết văn bản trong HTML</title>
<base href="../html/">
</head>
<body>
<p>Click chuột vào đường liên kết sau:</p>
<a href="../html/text_link_trong_html.jsp" target="_blank">Bài hướng dẫn HTML</a>
</body>
</html>Kết quả là khi bạn nhấn vào đường liên kết "Bài hướng dẫn HTML", bạn sẽ được chuyển tới trang đó.
Liên kết tới một khu vực trang trong HTML
Bạn có thể tạo ra một liên kết tới một khu vực cụ thể trong trang web bằng cách sử dụng thuộc tính "name". Bạn cần thực hiện qua 2 bước:
- Đầu tiên, bạn tạo một liên kết tới khu vực trong trang mà bạn muốn tới và đặt tên nó bằng cách sử dụng thẻ
<a>như dưới đây:
<h1>Vi du text link trong HTML <a name="top"></a></h1>- Bước 2, bạn tạo ra một đường liên kết siêu liên kết để kết nối tài liệu và xác định vị trí mà bạn muốn tới.
<a href="../tutorial/hoc-html/text-link#top">Về đầu trang</a>Kết quả là khi bạn nhấn vào "Về đầu trang", bạn sẽ được chuyển tới phần đầu của trang.
Thiết lập màu cho các liên kết trong HTML
Bạn có thể thiết lập màu cho các đường liên kết của bạn, ví dụ như liên kết đang hoạt động và liên kết đã được xem bằng cách sử dụng các thuộc tính "link", "alink" và "vlink" của thẻ <body>.
Ví dụ
Dưới đây là một ví dụ, lưu mã trong tệp "test.html" và mở nó bằng bất kỳ trình duyệt nào để hiểu cách các thuộc tính "link", "alink" và "vlink" hoạt động:
<html>
<head>
<title>Vi du text link trong HTML</title>
</head>
<body alink="#54A250" link="#040404" vlink="#F40633">
<p>Click chuột vào đường liên kết sau:</p>
<a href="../tutorial/hoc-html/text-link" target="_blank">Bài hướng dẫn HTML</a>
</body>
</html>Kết quả là bạn sẽ thấy đường liên kết được thiết lập màu như trong hình dưới đây:
Tạo liên kết tải về trong HTML
Bạn có thể tạo liên kết văn bản để tải về các tài liệu PDF, DOC hoặc ZIP khi người dùng nhấp vào liên kết đó. Điều này rất đơn giản, bạn chỉ cần cung cấp đường dẫn URL đầy đủ của tệp đó. Ví dụ:
<html>
<head>
<title>Vi du text link trong HTML</title>
</head>
<body>
<a href="../html/test.pdf">Download PDF File</a>
</body>
</html>Kết quả sẽ hiển thị một liên kết có nút tải về như trong hình dưới đây:
