Giới thiệu

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. Ta có thể thấy liên kết (link) ở hầu hết các trang web.

Người dùng nhấp chuột vào các liên kết để di chuyển giữa các trang web.

Liên kết – Siêu liên kết

Liên kết trong mã HTML còn được gọi là siêu liên kết (hyperlink).

Ta có thể  nhấp chuột (click) vào một liên kết để đi đến một trang web khác.

Khi ta di chuyển chuột lên trên một liên kết, con trỏ chuột sẽ biến thành hình bàn tay. 

Chú ý: Ta thường dùng chữ để hiển thị liên kết.  Nhưng ta cũng có thể dùng ảnh hoặc các thành phần HTML khác để hiển thị liên kết.

Cú pháp của liên kết

Trong mã HTML, liên kết được định nghĩa bằng thẻ <a>:

<a href="url">tên liên kết hiển thị ở đây</a>

Ví dụ:

<a href="http://bob.codegym.vn/lessons/">Codegym's lessons</a>

Kết quả:

Thuộc tính href  để chỉ ra địa chỉ trang web(URL) mà liên kết sẽ dẫn đến (http://bob.codegym.vn/lessons/).
Phần chữ của liên kết giữa 2 thẻ <a> </a> là phần người dùng nhìn thấy trên trang web(Codegym’s lessons).

Nhấp chuột vào phần chữ của liên kết sẽ chuyển ta đến địa chỉ trang web trong thuộc tính href.

Chú ý: Nếu không có dấu gạch chéo (/) phía sau địa chỉ thư mục con của tên miền (http://bob.codegym.vn/lessons), ta có thể sẽ gửi 2 request đến server. Tuy nhiên nhiều server sẽ tự động thêm dấu gạch chéo vào địa chỉ trang web, sau đó tạo một request mới để xử lý tiếp. Bởi vì http://bob.codegym.vn/lessons và http://bob.codegym.vn/lessons/ là 2 URL khác nhau.

Liên kết cục bộ

Ví dụ trên dùng một địa chỉ URL tuyệt đối (địa chỉ đầy đủ của trang web).

Ta có thể dùng một liên kết cục bộ khi trỏ đến địa chỉ trên trang web của chính mình. 

Liên kết cục bộ có thuộc tính href là một địa chỉ URL tương đối (không có http://www…).

<a href="course">Các khóa học</a>

Kết quả:

Màu sắc của liên kết

Mặc định, liên kết sẽ có màu như sau (trên tất cả trình duyệt):

• Liên kết chưa bị click vào sẽ có màu xanh và được gạch chân.
• Liên kết đã bị click sẽ có màu tím và được gạch chân.
• Liên kết đang bị click lên sẽ có màu đỏ và được gạch chân.

Ta có thể thay đổi màu mặc định bằng cách dùng các thuộc tính CSS sau:

<p>You can change the default colors of links</p>

<a href="html_images.php" target="_blank">HTML Images</a> 

Kết quả:

Thuộc tính target của một liên kết

Thuộc tính target cho trình duyệt biết cách mở ra trang web trong thẻ href.

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

• _blank – Mở liên kết trong một cửa sổ hoặc một tab mới của trình duyệt
• _self – Mở liên kết trong tab/cửa sổ hiện tại của trình duyệt (Không cần khai báo cũng được vì đây là mặc định của thẻ <a>)
• _parent – Mở liên kết trong parent frame
• _top – Mở liên kết trong cửa sổ chính
• framename – Mở liên kết trong một frame có tên là framename (Tìm hiểu thêm về thẻ <frame>)

Ví dụ dưới đây sẽ mở liên kết trong một tab/cửa sổ mới của trình duyệt:

<a href="http://codegym.vn/" target="_blank">Trang chủ Codegym</a>

Kết quả:

Tip: Ta có thể dùng target=”_top” để mở liên kết trong tab mới khi đường dẫn đặt trong một frame (xem lại ví dụ Codegym’s lessons đầu tiên phía trên).

<a href="http://bob.codegym.vn/lessons/" target="_top">Codegym's lessons: target="_top"</a>

Kết quả:

Dùng ảnh làm liên kết

Ảnh thường được dùng làm liên kết:

<a href="http://bob.codegym.vn/home" target="_blank">
  <img src="http://bob.codegym.vn/assets/images/Codegym-bob-xh100.png" 
  style="border:0;">
</a>

Kết quả:

Chú ý: Thuộc tính border:0; để IE9 (và các phiên bản trước đó) không hiển thị một đường viền xung quanh ảnh khi dùng ảnh làm liên kết.

Dùng liên kết để tạo một đánh dấu trang (bookmark)

Bookmark được dùng để người đọc nhảy đến phần khác trên cùng một trang web.

Bookmarks rất hữu ích khi trang web quá dài.

Để tạo một bookmark, ta thêm liên kết vào danh sách đánh dấu trang.

Khi liên kết được click, trang web sẽ cuộn xuống phần đã được đánh dấu. 

Ví dụ

Đầu tiên, tạo một bookmark bằng thuộc tính id của thẻ:

<h2 id="C4">Chapter 4</h2>

Sau đó, thêm liên kết cục bộ cho bookmark ở cùng một trang web:

<a href="#C4">Jump to Chapter 4</a>

Hoặc thêm liên kết sang một trang khác:

<a href="http://bob.codegym.vn/clean-code#C6">Go to Chapter 6</a>

Kết quả:

Đường dẫn bên ngoài 

Có thể liên kết đến các trang bên ngoài bằng một địa chỉ URL đầy đủ hoặc đường dẫn tương đối so với trang web hiện tại. 

Ví dụ dưới dùng một đường dẫn URL đầy đủ để liên kết đến trang web:

<a href="http://agilearn.vn/user/profile.php?id=3"> URL đầy đủ </a>

Kết quả:

Ví dụ dưới liên kết đến trang web trong thư mục user của website hiện tại:

<a href="/user/profile.php?id=3"> 
URL tương đối cho trang bên trong thư mục user
</a>

Kết quả:

Ví dụ dưới liên kết đến trang web trong cùng thư mục với trang web hiện tại:

<a href="/profile.php?id=3"> 
URL tương đối cho trang cùng thư mục với trang hiện tại
</a>

Kết quả:

Tóm tắt

• Dùng thẻ <a> để định nghĩa một liên kết
• Dùng thuộc tính href để định nghĩa địa chỉ của liên kết
• Dùng thuộc tính target để định nghĩa cách trình duyệt mở liên kết
• Dùng thẻ <img> bên trong thẻ <a> để tạo liên kết bằng ảnh
• Dùng thuộc tính id (id=”bookmark_1“) để tạo bookmark cho trang web
• Dùng thuộc tính href  (href=”#bookmark_1“) để liên kết đến bookmark có id =  bookmark_1

Kết luận

Qua đây là một số chia sẻ về thẻ tạo liên kết a trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.

Các bạn có thể tham khảo các bài viết hay về HTML tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.