[Bài 5] Liên kết trong HTML5

[Bài 5] Liên kết trong HTML5
  1. Giới thiệu về HTML5
  2. [Bài 1] Chuẩn bị trước khi học HTML5
  3. [Bài 2] Cấu trúc HTML5 đơn giản
  4. [Bài 3] Định dạng văn bản trong HTML5
  5. [Bài 4] Thuộc tính trong HTML5
  6. [Bài 5] Liên kết trong HTML5
  7. [Bài 6] Hình ảnh trong HTML5
  8. [Bài 7] Bình luận trong HTML5
  9. [Bài 8] Danh sách trong HTML5
  10. [Bài 9] Bảng biểu trong HTML5
  11. [Bài thực hành 1] Viết cấu trúc HTML5 đơn giản
  12. [Bài 10] Iframe trong HTML5
  13. [Bài 11] Video trong HTML5
  14. HTML5 nâng cao

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 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>
Ví dụ về 1 liên kết trong HTML5
Ví dụ về 1 liên kết trong HTML5

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>
Ví dụ về liên kết đã truy cập và chưa từng truy cập
Ví dụ về liên kết đã truy cập và chưa từng truy cập

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:

Ví dụ về thuộc tính của thẻ a
Ví dụ về thuộc tính của thẻ a

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.

Ví dụ về thuộc tính của thẻ a - 2
Ví dụ về thuộc tính của thẻ a – 2

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!

0 0 bình chọn
Đánh giá bài viết

Tiền Minh Vy

Xin chào! Tôi là Tiền Minh Vy, là một lập trình viên có nhiều kinh nghiệm với Wordpress, tập trung nhiều với PHP.
Đăng ký
Thông báo cho tôi về
guest
0 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận