Trong bài viết trước bạn đọc đã cùng Taimienphi.vn tìm hiểu về thuộc tính color trong HTML. Bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về link (liên kết) trong HTML.
Chúng ta có thể học HTML và tìm thấy các link (liên kết) trên hầu hết tất cả các trang web. Bằng cách click vào link để chuyển hướng sang trang web khác. Tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu chi tiết link (liên kết) trong HTML.
Link (liên kết) trong HTML
1. Link (liên kết) trong HTML
Link (liên kết) trong HTML là siêu liên kết (hyperlink).
Bằng cách click vào link để chuyển hướng sang trang web, tài liệu khác. Khi chúng ta di chuột qua một link, mũi tên chuột sẽ biến thành biểu tượng khác.
Lưu ý: link không phải là văn bản, nó có thể là hình ảnh hoặc phần tử HTML bất kỳ.
1.1 Cú pháp link trong HTML
Siêu liên kết (hyperlink) được xác định bằng thẻ a trong HTML:
Trong đó:
- Thuộc tính href chỉ định địa chỉ đích của link (ví dụ như Taimienphi.vn).
- Link text là phần hiển thị. Click vào link text để chuyển hướng đến địa chỉ được chỉ định.
Lưu ý: Không có dấu gạch chéo ở cuối địa chỉ thư mục con, ngoài ra bạn có thể tạo 2 yêu cầu đến máy chủ. Nhiều máy chủ sẽ tự động thêm dấu gạch chéo vào cuối địa chỉ và sau đó tạo một yêu cầu mới.
Ví dụ: dưới đây là ví dụ minh họa cách sử dụng cú pháp link trong HTML:
Kết quả trả về có dạng như dưới đây:
1.2 Local Link trong HTML
Trong ví dụ trên chúng ta sử dụng URL tuyệt đối (địa chỉ trang web đầy đủ).
Local Link (liên kết đến cùng một trang web) được chỉ định bằng URL tương đối (không có https: // www ...).
Ví dụ: dưới đây là ví dụ về local link trong HTML.
Kết quả trả về khi áp dụng local link có dạng như dưới đây:
1.3 Thiết lập màu cho link trong HTML
Mặc định link (liên kết) sẽ hiển thị trên tất cả các trình duyệt như dưới đây:
- Link không được truy cập được gạch chân và có màu xanh.
- Link truy cập được gạch chân và có màu tím.
- Link hoạt động được gạch chân và có màu đỏ.
Tuy nhiên nếu muốn bạn có thể thay đổi màu sắc mặc định cho link trong HTML bằng cách sử dụng CSS:
Ví dụ: ví dụ dưới đây minh họa các thiết lập màu cho link trong HTML:
Kết quả trả về khi thay đổi màu sắc cho link có dạng như dưới đây:
1.4 Thuộc tính target trong HTML
Thuộc tính target được sử dụng để chỉ định vị trí mở tài liệu được liên kết.
Thuộc tính target có thể bao gồm một trong số các giá trị dưới đây:
_blank: Mở tài liệu được liên kết trong một cửa sổ hoặc tab mới.
_self: Mở tài liệu được liên kết trên cùng một cửa sổ / tab khi người dùng click vào link (mặc định).
_parent: Mở tài liệu được liên kết trong cửa sổ chính.
_top: Mở tài liệu được liên kết trong toàn bộ cửa sổ.
framename: Mở tài liệu được liên kết trong thẻ frame.
Ví dụ 1: Trong ví dụ dưới đây mở tài liệu được liên kết trong cửa sổ / tab mới:
Kết quả trả về có dạng như dưới đây:
Mẹo: Nếu trang web bị khóa trong một frame, bạn có thể sử dụng target="_top" để mở frame đó.
Ví dụ 2: Ví dụ dưới đây minh họa cách sử dụng target="_top":
Kết quả trả về có dạng như dưới đây:
1.5 Image Link trong HTML
Chúng ta có thể sử dụng hình ảnh dưới dạng link trong HTML.
Ví dụ: dưới đây là ví dụ về image link trong HTML:
Kết quả trả về có dạng như dưới đây:
Lưu ý: trong ví dụ trên chúng chúng ta thêm border:0 để ngăn IE9 và các phiên bản trình duyệt trước đó hiển thị đường viền xung quanh hình ảnh trong trường hợp hình ảnh là link.
1.6 Link Title trong HTML
Thuộc tính title chỉ định thêm thông tin về phần tử. Thông tin thường được hiển thị dưới dạng văn bản trong tooltip khi người dùng di chuột qua phần tử.
Ví dụ: Dưới đây là ví dụ minh họa cách sử dụng thuộc tính title để chỉ định thêm thông tin về phần tử trong HTML:
Kết quả trả về có dạng như dưới đây:
1.7 Tạo Bookmark trong HTML
Bookmark trong HTML được sử dụng để cho phép người dùng chuyển đến các phần cụ thể trên trang web.
Để tạo bookmark trong HTML, trước hết chúng ta phải tạo một bookmark sau đó thêm liên kết đến bookmark đó.
Khi người dùng click vào link, trang sẽ cuộn đến vị trí được bookmark.
Ví dụ: Dưới đây là ví dụ tạo bookmark trong HTML:
Đầu tiên chúng ta sử dụng thuộc tính id để tạo bookmark:
Bước tiếp theo thêm liên kết vào bookmark (trong ví dụ này là "Jump to Chapter 4") trong cùng một trang:
Hoặc thêm một liên kết vào dấu trang ("Jump to Chapter 4") từ một trang khác:
Kết quả trả về có dạng như dưới đây:
1.8 Đường dẫn ngoài trong HTML
Các trang bên ngoài có thể được tham chiếu bởi URL đầy đủ hoặc đường dẫn liên quan đến trang web hiện tại.
Ví dụ 1: ví dụ dưới đây sử dụng URL đầy đủ để liên kết đến trang web:
Kết quả trả về có dạng như dưới đây:
Ví dụ 2: ví dụ dưới đây liên kết một trang trong thư mục html trên trang web hiện tại:
Kết quả trả về có dạng như dưới đây:
Ví dụ 3: ví dụ dưới đây liên kết một trang nằm trong cùng thư mục với trang hiện tại:
Kết quả trả về có dạng như dưới đây:
2. Tổng kết
https://thuthuat.taimienphi.vn/link-lien-ket-trong-html-50616n.aspx
Bài viết trên đây Taimienphi.vn vừa giới thiệu cho bạn về link (liên kết) trong HTML. Trong bài viết tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về thẻ img trong HTML. Ngoài ra nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến của mình trong phần bình luận bên dưới bài viết nhé.