HTML Links - Hyperlinks
Các HTML Links chính là một Hyperlinks.
Bạn có thể click vào một link để dẫn đến một trang khác.
Khi bạn di chuyển con trỏ chuột trên một đường dẫn nó sẽ chuyển sang hình bàn tay.
Cú pháp
Thẻ <a> được sử dụng để định nghĩa một hyperlink. Nó có cú pháp như sau:
<a href="url">Mô tả link</a>Thuộc tính quan trọng nhất của phần tử <a> là thuộc tính href, chỉ ra đích 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.
Ví dụ
<a href="https://truonghoclaptrinh.com/">Đi đến truonghoclaptrinh.com!</a>Mặc định, các link 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 từng truy cập có gạch chân và màu xanh.
- Một liên kết đã từng truy cập có gạch chân và màu tím.
- Một liên đang hoạt đọng có gạch chân và màu đỏ.
Target Attribute
Mặc định các liên kết khi truy cập sẽ được hiển thị ở cửa sổ trình duyệt hiện tại. Để thay đổi điều đó bạn có thể sử dụng attribute target.
Attribute target sẽ quyết định nơi hiển thị sau khi truy cập liên kết:
_self- Mặc định. Hiển thị ở cửa sổ trình duyệt hiện tại khi truy cập liên kết._blank- Hiển thị ở cửa sổ trình duyệt mới khi truy cập liên kết._parent- Hiển thị ở cửa sổ trình duyệt cha._top- Hiển thị ở phần thân của cửa sổ trình duyệt.
Ví dụ
<a href="https://truonghoclaptrinh.com/" target="_blank">Đến truonghoclaptrinh.com!</a>
Absolute URLs và Relative URLs
Cả hai ví dụ bên trên đều đang sử dụng Absolute URLs (địa chỉ web đầy đủ) trong thuộc tính href.
Relative URLs (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"):
<h2>Absolute URLs</h2> <p><a href="https://truonghoclaptrinh.com/">truonghoclaptrinh</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>Sử dụng một Image làm HTML Links
Để sử dụng hình ảnh làm liên kết, chỉ cần đặt thẻ <img> bên trong thẻ <a>:
<a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"> </a>
Địa chỉ Email
Sử dụng thuộc tính 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):
Ví dụ
<a href="mailto:[email protected]">Gửi email</a>
Sử dụng một Button làm HTML Links
Để 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ư một lần nhấp vào nút:
Ví dụ
<button onclick="document.location='default.asp'">HTML Tutorial</button>
Link Titles
Attrribute title chỉ định thông tin bổ sung về một element. 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 element.
<a href="https://truonghoclaptrinh.com/html.html" title="Học HTML tại truonghoclaptrinh.com">Đến các hướng dẫn về HTML</a>