Liên kết HTML
Các liên kết được tìm thấy ở hầu hết các trang web. Liên kết cho phép người dùng nhấp chuột từ trang này sang trang khác.
Liên kết HTML - Siêu liên kết
Liên kết HTML là siêu liên kết.
Bạn có thể nhấp vào liên kết và chuyển sang tài liệu khác.
Khi bạn di chuyển chuột qua một liên kết, mũi tên chuột sẽ biến thành một bàn tay nhỏ.
Lưu ý: Liên kết không nhất thiết phải là văn bản. Liên kết có thể là hình ảnh hoặc bất kỳ phần tử HTML nào khác!
Liên kết HTML - Cú pháp
Thẻ HTML <a> xác định một siêu liên kết. Nó có cú pháp sau:
<a href=" url "> link text </a>
Thuộc tính quan trọng nhất của phần tử <a> là thuộc tính href , cho biết đích đến của liên kết.
Văn bản liên kết là phần mà người đọc sẽ nhìn thấy.
Nhấp vào văn bản liên kết sẽ đưa người đọc đến địa chỉ URL được chỉ định.
Ví dụ
Ví dụ này cho thấy cách tạo liên kết đến W3Schools.com:
<a href="https://www.example.com.vn/">Visit W3Schools.com!</a>
Hãy tự mình thử »Theo mặc định, các liên kết sẽ xuất hiện như sau trong tất cả các trình duyệt:
- Một liên kết chưa được truy cập được gạch chân và có màu xanh lam
- Một liên kết đã truy cập được gạch chân và có màu tím
- Một liên kết đang hoạt động được gạch chân và có màu đỏ
Mẹo: Tất nhiên, các liên kết có thể được tạo kiểu bằng CSS để có giao diện khác!
Liên kết HTML - Thuộc tính đích
Theo mặc định, trang được liên kết sẽ được hiển thị trong cửa sổ trình duyệt hiện tại. Để thay đổi điều này, bạn phải chỉ định một mục tiêu khác cho liên kết.
target tính đích chỉ định nơi mở tài liệu được liên kết.
Thuộc tính target có thể có một trong các giá trị sau:
-
_self- Mặc định. Mở tài liệu trong cùng cửa sổ/tab khi tài liệu được nhấp vào -
_blank- Mở tài liệu trong cửa sổ hoặc tab mới -
_parent- Mở tài liệu trong khung cha -
_top- Mở tài liệu ở toàn bộ cửa sổ
Ví dụ
Sử dụng target="_blank" để mở tài liệu được liên kết trong cửa sổ hoặc tab trình duyệt mới:
<a href="https://www.example.com.vn/"
target="_blank">Visit W3Schools!</a>
Hãy tự mình thử »URL tuyệt đối so với URL tương đối
Cả hai ví dụ trên đều sử dụng URL tuyệt đối (địa chỉ web đầy đủ) trong thuộc tính href .
Liên kết cục bộ (liên kết đến một trang trong cùng một trang web) được chỉ định bằng URL tương đối (không có phần "https://www"):
Ví dụ
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative
URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS
Tutorial</a></p> Hãy tự mình thử » Liên kết HTML - Sử dụng hình ảnh làm liên kết
Để sử dụng hình ảnh làm liên kết, chỉ cần đặt thẻ <img> bên trong thẻ <a> :
Ví dụ
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Hãy tự mình thử »Liên kết đến một địa chỉ email
Sử dụng mailto: bên trong thuộc tính href để tạo liên kết mở chương trình email của người dùng (để cho phép họ gửi email mới):
Nút dưới dạng liên kết
Để sử dụng nút HTML làm liên kết, bạn phải thêm một số mã JavaScript.
JavaScript cho phép bạn chỉ định điều gì xảy ra ở một số sự kiện nhất định, chẳng hạn như một lần nhấp vào nút:
Mẹo: Tìm hiểu thêm về JavaScript trong Hướng dẫn JavaScript của chúng tôi.
Tiêu đề liên kết
Thuộc tính title chỉ định thông tin bổ sung về một phần tử. Thông tin thường được hiển thị dưới dạng văn bản chú giải công cụ khi chuột di chuyển qua phần tử.
Ví dụ
<a href="https://www.example.com.vn/html/" title="Go to Example.com.vn HTML
section">Visit our HTML Tutorial</a> Hãy tự mình thử »Thông tin thêm về URL tuyệt đối và URL tương đối
Ví dụ
Sử dụng URL đầy đủ để liên kết đến một trang web:
<a href="https://www.example.com.vn/html/default.asp">HTML tutorial</a>Ví dụ
Liên kết đến một trang nằm trong thư mục html trên trang web hiện tại:
<a href="/html/default.asp">HTML tutorial</a>Ví dụ
Liên kết đến một trang nằm trong cùng thư mục với trang hiện tại:
<a href="default.asp">HTML tutorial</a>Bạn có thể đọc thêm về đường dẫn tệp trong chương Đường dẫn tệp HTML .
Tóm tắt chương
- Sử dụng phần tử
<a>để xác định liên kết - Sử dụng thuộc tính
hrefđể xác định địa chỉ liên kết - Sử dụng thuộc tính
targetđể xác định nơi mở tài liệu được liên kết - Sử dụng phần tử
<img>(bên trong<a>) để sử dụng hình ảnh làm liên kết - Sử dụng lược đồ
mailto:bên trong thuộc tínhhrefđể tạo liên kết mở chương trình email của người dùng
Thẻ liên kết HTML
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
Để có danh sách đầy đủ tất cả các thẻ HTML có sẵn, hãy truy cập Tham khảo thẻ HTML của chúng tôi.
Bài tập HTML
Video: Liên kết HTML
