Trong bài viết này, mình sẽ giới thiệu với các bạn một thẻ thường rất được dùng, đó chính là thẻ liên kết trong HTML5, cùng với cú pháp và một số thứ liên quan đến nó.
Khi bạn viết một đoạn văn trong Word, ắt hẳn bạn đã từng chèn liên kết vào để liên kết nó đến một website bạn chỉ định đúng không? Trong tài liệu HTML5 cũng có cung cấp cho chúng ta 1 thứ để chèn liên kết, đó chính là thẻ liên kết.
Thẻ liên kết trong HTML5
Thẻ liên kết trong HTML5 được dùng để tạo 1 liên kết đến một website khác mà người viết chỉ định. Liên kết trong HTML5 được làm nổi bật hơn để người dùng có thể nhận biết đâu là liên kết, đâu là nội dung.
Thường thì liên kết sẽ được tô màu xanh dương và được gạch dưới, đồng thời khi người dùng rê chuột vào liên kết thì con trỏ chuột sẽ hiện bàn tay với ngón trỏ chỉ vào liên kết đó.
Cú pháp để tạo 1 liên kết trong HTML5 là:
<a href='https://tienminhvy.com'>Liên kết này dẫn đến website tienminhvy.com</a>
Ngoài ra, có một chỗ bạn có thể chưa biết, khi một liên kết đã truy cập rồi thì nó sẽ có màu xanh dương đậm hơn màu liên kết chưa truy cập. Đồng thời, khi bạn nhấn giữ liên kết thì nó được tô màu đỏ.
<a href='https://tienminhvy.com'>Liên kết này dẫn đến website tienminhvy.com</a> <a href='https://example.com'>Liên kết này dẫn đến website bạn chưa từng truy cập đến</a>
Cách ghi nhớ: chữ a của thẻ này (<a>) là ký tự đầu tiên của anchor (tiếng Việt là mỏ neo), hay có thể hiểu là neo từ tài liệu HTML5 này sang website khác (gọi là liên kết).
Cần lưu ý rằng, thẻ <a> có thể chứa các thẻ khác (bao gồm thẻ mình đã nêu ở bài trước). Ví dụ, bạn muốn bọc ảnh bằng liên kết thì bỏ thẻ <img> vào thẻ <a> là xong. (chúng ta sẽ học về thẻ <img> trong bài kế tiếp)
Các thuộc tính cần nhớ của thẻ liên kết trong HTML5
Thẻ <a> có 2 thuộc tính cần chú ý đến như sau:
- href: thuộc tính này dùng để thiết lập liên kết đến website khác bạn cần đặt vào (đây là thuộc tính bắt buộc)
- target: thuộc tính này dùng để thiết lập loại hiển thị khi người dùng nhấp vào liên kết, gồm 4 loại bao gồm:
- _self: (mặc định) mở liên kết mới tại tab trình duyệt người dùng đang thao tác, bạn không cần phải thêm vì mặc định trình duyệt sử dụng loại này cho liên kết
- _blank: mở liên kết trong tab mới
- _top: mở liên kết ở tài liệu HTML5 gốc mà người dùng đang thao tác (chỉ trong trường hợp liên kết đặt ở thẻ iframe – sẽ học ở các bài sau)
- _parent: mở liên kết ở tài liệu HTML5 đang chứa 1 thẻ iframe mà nội dung của thẻ iframe lại chứa liên kết có loại này. (chỉ trong trường hợp liên kết đặt ở thẻ iframe – sẽ học ở các bài sau)
Trong đó, loại 1 và loại 2 thì rất dễ dàng vì 2 loại này được sử dụng thường xuyên, tuy nhiên, đối với loại 3 (_top) và loại 4 (_parent) thì hơi khó hiểu xíu, bạn chỉ cần hiểu như sau là được: (về thẻ iframe thì chúng ta sẽ học ở bài sau nhé, mình chỉ mượn thẻ iframe để giải thích cho các bạn)
Ví dụ, mình có 3 tài liệu HTML5 lần lượt là:
- iframe1.html
- iframe2.html
- iframe3.html
Trong đó, chúng ta sẽ chỉ mở iframe3.html để thao tác,
- Trong iframe3.html chứa 1 thẻ iframe liên kết đến iframe2.html
- iframe2.html cũng chứa 1 thẻ iframe liên kết đến iframe1.html
- iframe1.html chứa 2 liên kết, 1 là _top và 1 là _parent
Dễ hiểu hơn là giống như chúng ta đặt 1 cái hộp nhỏ vào 1 cái hộp trung bình rồi đem hộp trung bình đó bỏ vào cái hộp lớn vậy. Kết quả như hình sau:
Khi ta nhấn vào liên kết _top, nó sẽ mở website mới ngay trong tab người dùng đang thao tác, bất kể liên kết nằm ở iframe sâu cỡ nào, còn cái _parent nó sẽ mở liên kết tại tài liệu HTML5 đang chứa iframe có chứa liên kết đó, khác với _top, bạn có thể thấy như hình sau.
Liên kết tương đối và liên kết tuyệt đối
Hai loại liên kết này hoàn toàn khác nhau
- Liên kết tương đối là liên kết dẫn đến một tài nguyên trên website mà bạn đang thao tác
- Liên kết tuyệt đối là liên kết dẫn đến một website khác hoặc chính website bạn đang truy cập.
Ví dụ, trên website tienminhvy.com, mình có các liên kết sau:
<a href='file1.html' target='_top'>Liên kết tương đối cùng thư mục</a> <br> <a href='thumuc/file2.html' target='_parent'>Liên kết tương đối khác thư mục</a> <br> <a href='https://tienminhvy.com' target='_parent'>Liên kết tuyệt đối cùng website đang truy cập</a> <br> <a href='https://google.com' target='_parent'>Liên kết tuyệt đối khác website đang truy cập</a>
Trong đó, liên kết 1 dẫn đến file1.html trên cùng website, liên kết 2 dẫn đến file2.html cùng website nhưng khác thư mục, liên kết 3 và 4 là liên kết tuyệt đối, trong đó liên kết 3 dẫn đến website đang truy cập, liên kết 4 dẫn đến website khác (google.com).
Liên kết đến địa chỉ email
Ngoài việc liên kết đến một website, thẻ <a> còn giúp bạn liên kết đến 1 địa chỉ email nữa đó, ví dụ:
<a href="mailto:[email protected]">Nhấn vào đây để gửi email đến [email protected]</a>
Khi bạn truy cập liên kết trên, nó sẽ dẫn bạn đến trình soạn email để gửi mà bạn đã chỉ định (có thể là Gmail hoặc nền tảng khác)
Tóm lại
Qua bài viết, chúng ta đã học được về thẻ liên kết trong HTML5 gồm những thứ như sau:
- Cú pháp của thẻ liên kết
- Cách phân biệt giữa liên kết đã truy cập và chưa truy cập
- Cách ghi nhớ thẻ liên kết trong HTML5
- Thẻ này có thể chứa thẻ khác
- Các thuộc tính cần nhớ
- Liên kết tương đối và tuyệt đối
Bài sau chúng ta sẽ học về thẻ hình ảnh trong HTML5!