Học HTML – Thẻ tạo liên kết và liên kết neo – Phần 8

Học HTML – Thẻ tạo liên kết và liên kết neo – Phần 8

Một trong những nét đặc trưng của siêu văn bản là có những đường liên kết (link) tới một tài liệu khác thông qua địa đường dẫn đến tài liệu hoặc địa chỉ website. Để tạo ra các đường liên kết trong HTML ta sẽ sử dụng cặp thẻ <a> </a> chứa các tham số như sau:

Mặc dù thẻ <a> có rất nhiều thuộc tính nhưng ở trên là các thuộc tính thường dùng nhất hiện tại, bạn có thể tham khảo thêm các thuộc tính về thẻ <a> tại đây.

 

 

Ý nghĩa các thuộc tính:

  • href: Địa chỉ của tài liệu muốn liên kết đến, đây có thể là một đường dẫn thư mục hoặc địa chỉ website. Nếu bạn muốn truy cập một tài liệu trên cùng một cấp thư mục thì chỉ cần ghi tên-tập-tin.định dạng (ví dụ: gioi-thieu.html).
  • title: Tiêu đề của liên kết, tiêu đề sẽ hiển thị như một thông tin thêm khi rê chuột vào liên kết.
  • target: Xác định nơi mở tài liệu, nó có các giá trị như _blank (mở tài liệu trên cửa sổ mới), _self (mở tài liệu trên cửa sổ hiện tại, nếu bạn không khai báo thuộc tính target thì nó sẽ sử dụng giá trị này làm mặc định),  _top (mở tài liệu trong nội dung trang hiện tại), _parent (mở tài liệu trên khung trình duyệt mẹ của nó).

Và một điều bạn cần biết đó là nội dung trong cặp thẻ <a> có thể là một nội dung siêu văn bản nào, bao gồm các thẻ tiêu đề, hình ảnh,…

Liên kết neo (Anchor Link)

Liên kết neo nghĩa là một liên kết trong siêu văn bản sẽ dẫn đến một vị trí đặc biệt trong cùng tài liệu mà không phải tải lại hoặc mở một tài liệu mới. Một liên kết neo sẽ có hai phần:

  • Khu vực được neo, được khai báo bằng thẻ bất kỳ với thuộc tính id.
    ví dụ: 
    <p id="noi-dung"> </p>
  • Liên kết neo, được khai báo bằng thẻ <a> nhưng có thuộc tính là href nhưng giá trị là có dấu # và tên id của khu vực cần truy cập đến.
    ví dụ: 
    <a href="#noi-dung">xem nội dung</a>

Hãy thử xem một ví dụ sau:

Khi nhấp vào liên kết Xem thân bài thì nó sẽ tự động nhảy đến khu vực được gán thuộc tính id="than-bai".

Lời kết

Kết thúc bài tới đây, bạn đã nắm được làm sao để tạo ra các liên kết và liên kết neo trong trang chưa nào? Rất dễ dàng phải không, chỉ cần nhớ như vậy thôi là được rồi.