HTML Link

Link HTML (hay liên kết HTML) được tìm thấy trên gần như tất cả các trang web:

  • Link HTML dùng để tham chiếu tới các địa chỉ trang web khác nhau.
  • Link HTML có thể tham chiếu tới trang web trên cùng một website hoặc nằm ở một website khác.

Link HTML - Hyperlink

Link HTML là hyperlink, điều này có nghĩa rằng người dùng có thể click (hoặc tab nếu trên thiết bị điện thoại) lên liên kết để đi tới trang đích.

Lưu ý: Trong ngữ cảnh web, thuật ngữ link HTML còn được gọi vắn tắt là link. Tuy nhiên thuật ngữ link không phải lúc nào cũng là một liên kết HTML.

Cú Pháp Link HTML

Trong HTML để tạo link chúng ta sử dụng thẻ <a>:

<a href="url_trang_đích" title="link_title">link_text</a>

Trong đó:

  • target_url là URL trang đích.
  • link_title là tiêu đề của liên kết, mô tả ngắn gọn về nội dung trang đích.
  • link_text là chữ hiển thị liên kết để người dùng có thể click vào.

Ví dụ:

<a href="https://www.codehub.vn" title="Trang chủ CodeHub.vn">CodeHub.vn</a>

Chạy Thử

Một ví dụ khác:

Học HTML trên CodeHub.vn <a href="https://www.codehub.vn/Huong-Dan/Hoc-HTML" title="Học HTML trên CodeHub.vn">đây</a>

Chạy Thử

Link HTML Local

Cú pháp của link HTML mà chúng ta tham khảo ở trên đây sử dụng địa chỉ đường dẫn tuyệt đối cho thuộc tính href bao gồm cả giao thức https, tên miền phụ www và tên miền codehub.vn:

https://www.codehub.vn/Hoc-HTML

Trường hợp đường dẫn của trang đích trong link HTML ở trên cùng một website với trang web hiện tại thì chúng ta có thể sử dụng địa chỉ tương đối.

Nếu như trang web hiện tại thuộc website codehub.vn thì khi tạo một link HTML với địa chỉ URL cũng thuộc website này thì chúng ta có thể viết như sau:

<a href="/Huong-Dan/Hoc-HTML" title="Học HTML trên CodeHub.vn">Học HTML 
</a>

Chạy Thử

Link như trên được gọi là link local hay liên kết nội bộ trong cùng một website.

Thuộc Tính target

Thuộc tính target được dùng để xác định địa chỉ trang đích của liên kết. Trình duyệt sẽ mở trang này khi người dùng click (hoặc tab) lên liên kết.

Thuộc tính target có thể nhận một trong các giá trị sau:

  • _blank: Với giá trị này thì trình duyệt sẽ mở trang đích ở một cửa sổ hoặc tab mới.
  • _self: Với giá trị này thì trình duyệt sẽ mở trang đích ở cửa sổ hoặc tab hiện tại (đây là giá trị mặc định).
  • _parent: Với giá trị này thì trình duyệt sẽ mở trang đích thay thế frame cha (xem ví dụ dưới).
  • _top: Với giá trị này thì trình duyệt sẽ mở trang đích trên toàn bộ màn hình (xem ví dụ dưới).
  • framename: Với giá trị này thì trình duyệt sẽ mở trang đích ở frame với tên cho trước.

HTML Link: target="_blank"

Để mở link trong một tab mới chúng ta sử dụng target="_blank".

Ví dụ:

<a href="https://www.codehub.vn/" target="_blank">Truy cập trang chủ CodeHub.vn!</a>

Chạy Thử

HTML Link: target="_parent"

Nếu trang hiện tại được hiển thị trong một frame và bạn muốn trang đích sẽ thay thế frame hiện tại khi người dùng click vào:

Ví dụ:

<a href="https://www.codehub.vn/Hoc-HTML/" target="_parent">Học HTML</a>

Chạy Thử

HTML Link: target="_top"

Nếu trang hiện tại được hiển thị trong một frame và bạn muốn trang đích sẽ hiển thị toàn bộ màn hình thay thế trang web cha chứa frame có link liên kết:

<a href="https://www.codehub.vn/Học-HTML/" target="_top">Học HTML</a>

Chạy Thử

Thuộc Tính title

Thuộc tính title dùng để mô tả tóm tắt nội dung của liên kết HTML.

<a href="https://www.codehub.vn/Hoc-HTML/" title="Học HTML trên CodeHub.vn">Học HTML</a>

Chạy Thử

Khi bạn rê chuột lên phía trên liên kết HTML và đợi vài giây thì trình duyệt sẽ hiển thị một tooltip nhỏ với nội dung là giá trị của thuộc tính title.

Link Hình Ảnh

Để tạo một link hình ảnh chúng ta sẽ thay thế link_text bằng một phần tử img:

<a href="https://www.codehub.vn" title="Trang Chủ CodeHub.vn">
    <img src="https://www.codehub.vn/img/logo.png" width="50" height="50">
</a>

Chạy Thử

Link Bookmark

Để link tới một phần tử trên trang với giá trị cho trước của thuộc tính id, chúng ta sử dụng link bookmark. Lúc này đích đến chính là phần tử với thuộc tính id cho trước nằm trên cùng một trang với trang hiện tại.

Ví dụ:

<a href="#de-muc-10">Đi tới đề mục số 10</a>

Chạy Thử

Link HTML ở ví dụ trên sẽ link tới phần tử có giá trị của thuộc tính idde-muc-10:

<h1 id="de-muc-10">Đề Mục Số 10</h1>

Trình duyệt sẽ chuyển tới phần tử này khi người dùng click (hoặc tab) lên liên kết.

HTML Frontend Thiết Kế Web
Thêm Bình Luận: