Thẻ tạo liên kết và liên kết neo

Bài này thuộc phần 8 của 11 phần trong serie Học HTML Cơ Bản
02/01/2017
Trong một tài liệu HTMl, nét đặt trưng của ngôn ngữ 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 chỉ đường dẫn đến tài liệu hoặc một đị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:
 

<a href="https://hocmot.net" title="Blog học mót" target="_blank">Cùng học nào</a>

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, bạn có thể tham khảo thêm các thuộc tính và ý nghĩa của các thuộc tính về thẻ <a> 

  • 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ó)
Một số thuộc tính ít dùng khác
  • charset: Chỉ định bộ ký tự của một tài liệu liên quan có giá trị ( char_encoding - kiểu ), HTML 5 không hỗ trợ thuộc tính này
  • coords: Xác định tọa độ của liên kết (coordinates - địa chỉ tọa độ), HTML 5 không hỗ trợ thuộc tính này
  • download: Chỉ định một file được tải về khi người dùng nhấp vào liên kết ( filename - đường dẫn đến file)
  • hreflang: Chỉ định ngôn ngữ của tài liệu liên quan ( language_code - mã ngôn ngữ )
  • name: Chỉ định tên của một mỏ neo ( section_name)  không hỗ trợ trong HTML 5 nhưng có thể sử dụng thuộc tính id để thay thế
  • rel: Xác định mối quan hệ giữa tài liệu HTML hiện hành và tài liệu liên quan. Các giá trị như  alternate ( luận phiên), author ( tác giả), bookmark, external ( liên kết ngoài), help ( trợ giúp), license ( giấy phép), next ( kế tiếp), nofollow ( không đi theo, sử dụng trong Seo), noreferrer, noopener, prev, search, tag
  • rev: xác định mối quan hệ giữa tài liệu liên quan với tài liệu hiện hành ( text) v.v

Và một điều bạn cần biết nữa đó 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 ảnnh,v.v

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ụ mà mình đã tạo trong bài viết:  Học mót là gì?  trên các Mục lục của bài

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, rất dễ dàng phải không, chỉ cần nhớ như vậy thôi là được rồi. 

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Ý kiến bạn đọc

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây