Thẻ tạo liên kết

Thẻ tạo liên kết: a

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>
 <a href="http://codelean.vn/">Website Codelean</a>

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>

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>

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

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://codelean/" target="_blank">Website codelean</a>

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ụ Website codelean đầu tiên phía trên):

<a href="http://codelean/course/" target="_top">Codelean's website: target="_top"</a>

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

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

<a href="http://codeleanvn/home" target="_blank">
    <img src="http://codeleanvn/assets/images/home.png" style="border:0;">
</a>

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="https://www.codelean.vn/2020/01/cac-tieu-e-va-oan-van-ban.html">Heading's Tag and Paragrap</a>

<a href="https://www.codelean.vn/2020/01/cac-tieu-e-va-oan-van-ban.html">Heading's Tag and Paragrap</a>
<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C6">Jump to Chapter 6</a></p>
<p><a href="https://www.codelean.vn/2020/01/cac-tieu-e-va-oan-van-ban.html#C6" target="_blank">Các thẻ tiêu đề và văn bản</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C6">Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

Đườ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:

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>

 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>

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

Bài đăng nổi bật

Kill Port 8080