Liên kết (link) được tìm thấy trong gần như tất cả các trang web. Liên kết cho phép người dùng nhấp theo cách của họ để chuyển từ trang này sang trang khác.
Liên hết HTML – Siêu liên kết
Liên kết trong HTML là những siêu liên kết.
Bạn có thể click vào một liên kết và chuyển đến tài liệu(trang) khác.
Khi bạn di chuột lên một liên kết, mũi tên chuột sẽ chuyển thành hình một bàn tay nhỏ.
Note: Liên kết không nhất thiết phải là văn bản, đó có thể là một hình ảnh hoặc một phần tử html khác.
Cú pháp của link
Trong HTML, các liên kết được xác định bằng thẻ <a>:
<a href="url">Tên liên kết</a>
Ví dụ
<a href="https://tedu.com.vn/hoc-html-can-ban.html/">Học HTML căn bản</a>
Thuộc tính href chỉ ra địa chỉ mà liên kết trỏ đến (https://tedu.com.vn/hoc-html-can-ban.html/).
Tên liên kết là phần được hiển thị (Học HTML căn bản).
Nhấp chuột vào tên liên kết sẽ đưa bạn tới địa chỉ của liên kết.
Note: Nếu không có dấu xẹt trái (/) ở cuối địa chỉ liên kết, bạn có thể tạo ra hai yêu cầu đến server. Nhiều server sẽ tự thêm dấu xẹt trái vào cuối địa chỉ liên kết, và tạo thêm một yêu cầu mới.
Liên kết nội bộ
Ở ví dụ trên sử dụng đường dẫn tuyệt đối (địa chỉ web đầy đủ).
Một liên kết tương đối (liên kết tới cùng trang web) được chỉ ra bằng đường dẫn tương đối (không có http://www....).
Ví dụ
<a href="tedu.com.vn">Trang chủ</a>
Màu sắc liên kết
Mặc định, liên kết sẽ nhìn giống như sau (ở mọi trình duyệt):
Liên kết chưa xem được gạch dưới và có màu xanh.
Liên kết đã xem được gạch dưới và có màu tím.
Liên kết đang hoạt động được gạch dưới và có màu đỏ.
Bạn có thể thay đổi màu sắc mặc định bằng cách dùng CSS:
Ví dụ
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
Liên kết thường được style nhìn giống như nút, bằng cách dùng CSS:
Ví dụ
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
Liên kết HTML - Thuộc tính target
Thuộc tính target giúp xác định vị trí để mở tài liệu được liên kết.
Thuộc tính target có thể mang một trong những giá trị sau:
- _blank - Mở tài liệu liên kết ở cửa sổ hoặc tab mới
- _self - Mở tài liệu liên kết ở cửa sổ hiện tại (đây là giá trị mặc định)
- _parent - Mở tài liệu liên kết ở khung hình cha.
- _top – Mở tài liệu liên kết ở toàn bộ cửa sổ (Cửa sổ trình duyệt có thể chia làm nhiều khung hình nhỏ gọi là frame, chúng ta sẽ tìm hiểu thuộc tính này sau)
- Tênframe – Mở tài liệu liên kết ở khung hình được gọi
Ví dụ này sẽ mở tài liệu liên kết ở tab mới của trình duyệt:
<a href="https://tedu.com.vn/" target="_blank">Chào mừng đến với Tedu!</a>
Liên kết HTML – Dùng hình ảnh làm liên kết
Người ta thường sử dụng hình ảnh làm liên kết
Ví dụ
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Note: Thêm thuộc tính border:0; để ngăn IE9 hoặc các trình duyệt cũ hơn tạo viền cho ảnh (khi dùng ảnh làm liên kết)
Tiêu đề liên kết
Thuộc tính title cung cấp thêm thông tin về phần tử. Thông tin này thường được hiển thị dưới dạng chú thích khi người dùng rê chuột qua phần tử.
Ví dụ
<a href="https://tedu.com.vn/hoc-html-can-ban.html/" title="Tự học HTML cho người mới bắt đầu">Học HTML căn bản</a>
Đánh dấu trang
Các dấu trang được dùng để cho phép người dùng chuyển đến một phần cụ thể của trang Web.
Dấu trang sẽ rất hữu ích nếu nội dung trang web rất dàiiii.
Để tạo một dấu trang, bạn phải đánh dấu một vị trí cụ thể, rồi liên kết đến nó.
Khi nhấp vào liên kết, trang sẽ cuộn tới phần được đánh dấu.
Ví dụ
Đầu tiên, tạo một dấu trang với thuộc tính id:
<h2 id="C4">Chương 4</h2>
Sau đó thêm liên kết tới dấu trang (“Chuyển tới Chương 4”), từ cùng trang web:
<a href="#C4">Jump to Chapter 4</a>
Hoặc từ một trang khác:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Đường dẫn bên ngoài
Các trang bên ngoài có thể được tham chiếu với một URL đầy đủ (đường dẫn tuyệt đối) hoặc với một đường dẫn tương đối đến trang web hiện tại. Ví dụ này sử dụng URL đầy đủ để liên kết đến một trang web:
<a href="https://tedu.com.vn/hoc-html-can-ban.html/">Học HTML căn bản</a>
Ví dụ này liên kết tới một trang nằm trong thư mục html trên trang web hiện tại:
<a href="/html/index.html"></a>
Ví dụ sau liên kết tới một trang được đặt cùng thư mục với trang web hiện tại:
<a href="index.html"></a>
Tổng kết chương
- Dùng phần tử a để xác định một liên kết
- Dùng thuộc tính href để xác định địa chỉ liên kết
- Dùng thuộc tính target để xác định nơi mở tài liệu liên kết
- Dùng phần tử <img> (bên trong phần tử <a>) để dùng hình ảnh làm liên kết
- Dùng thuộc tính id (id=”giá trị”) để xác định dấu trang trong trang
- Dùng thuộc tính href (href=”#giá trị”) để liên kết tới dấu trang
Trích nguồn từ: (https://www.w3schools.com/html/html_links.asp)
