Cafedev chia sẻ về Liên kết đượ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ọ từ trang này sang trang khác.
Nội dung chính
1. Liên kết HTML – Siêu liên kết(Hyperlinks)
Liên kết HTML là siêu liên kết.
Bạn có thể nhấp vào một liên kết và chuyển đến một 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 ý: Một liên kết không phải là văn bản. Một liên kết có thể là một hình ảnh hoặc bất kỳ yếu tố HTML nào khác!
2. Liên kết HTML và cú pháp
Thẻ <a> trong HTML 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> có 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 sẽ hiển thị cho người đọc.
Nhấp vào văn bản liên kết, sẽ gửi người đọc đến địa chỉ URL được chỉ định.
<a href="https://cafedev.vn/">Visit Cafedev!</a> 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 không mong muốn được gạch chân và màu xanh
- Một liên kết truy cập được gạch chân và màu tím
- Một liên kết hoạt động được gạch chân và 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ó cái nhìn khác!
3. Liên kết HTML – Thuộc tính target
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.
Thuộc tính target 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 một cửa sổ / tab khi nó được bấm_blank– Mở tài liệu trong một cửa sổ hoặc tab mới_parent_top– Mở tài liệu trong 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ổ trình duyệt hoặc tab mới:
<a href="https://cafedev.vn/">Visit Cafedev!</a> 4. 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 một URL tương đối (không có phần “https: // www”):
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<h2>Absolute URLs</h2>
<p><a href="https://www.cafedev.vn/">Cafedev</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> 5. 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>:
<!DOCTYPE html>
<html>
<body>
<h2>Image as a Link</h2>
<p>The image below is a link. Try to click on it.</p>
<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"></a>
</body>
</html>
6. 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):
<a href="mailto:someone@example.com">Send email</a> 7. Nút làm 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 những gì xảy ra tại một số sự kiện nhất định, chẳng hạn như nhấp vào nút:
<button onclick="document.location='default.asp'">HTML Tutorial with cafedev</button> Mẹo: Tìm hiểu thêm về JavaScript trong series tự học JavaScript này.
8. Liên kết với tiêu đề
Thuộc tính title chỉ định thêm thông tin về một yếu 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ử.
<a href="https://cafedev.vn/series-tu-hoc-html-tu-co-ban-toi-nang-cao/" title="Go to Tự học cafedev.vn">Visit our HTML Tutorial Cafedev</a> Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
