Liên kết trong HTML

Các liên kết được sử dụng phổ biến trong hầu hết các trang web HTML. Liên kết cho phép người dùng di chuyển từ trang này sang trang khác một cách dễ dàng bằng những cú click chuột vào các từ hoặc cụm từ chứa liên kết.

HTML Links - Các siêu liên kết

Các liên kết trong HTML được gọi là các siêu liên kết, các siêu liên kết có tác dụng điều hướng người dùng di chuyên từ trang này tới trang khác.

Khi chúng ta rê chuột qua các văn bản có chứa các siêu liên kết, mũi tên chuột sẽ xuất hiện hình bàn tay nhỏ (để click)

HTML Links - Cú pháp

Thẻ HTML a được sử dụng để xác định một siêu liên kết, cú pháp như sau.

<a href="địa chỉ url">link text</a>

Thuộc tính quan trọng nhất của phần tử HTML a chính là thuộc tính href="", nó xác định điểm đến của một liên kết.

link text là phần văn bản sẽ được hiển thị trên màn hình cho người dùng. Khi người dùng nhấp vào dòng chữ link text, thì trình duyệt sẽ đưa người dùng đến địa chỉ URL được chỉ định trong thuộc tính href.

<a href="https://book-code.com.vn/">Học lập trình web tại book-code.com.vn</a>

Theo mặc định, các liên kết sẽ xuất hiện như sau trong tất cả các trình duyệt:

• Một liên kết không được truy cập được gạch chân và có màu xanh lam
• Một liên kết đã truy cập được gạch chân và có màu tím
• Một liên kết đang hoạt động được gạch chân và có màu đỏ

Bạn có thẻ sử dụng CSS để định dạng lại cách thể hiện trên trình duyệt của các liên kết

HTML Links - Thuộc tính target

Theo mặc định, trang được liên kết tới sẽ được hiển thị ngay trong cửa sổ trình duyệt hiện tại. Nếu chúng ta muốn trang liên kết được mở bằng một trang khác, chúng ta sử dụng thuộc tính target cho liên kết.

Các giá trị của thuộc tính target như sau:

• _self - Mặc định. Mở tài liệu trong cùng một cửa sổ/tab khi nó được nhấp vào
• _blank - Mở tài liệu trong một cửa sổ hoặc tab mới
• _parent - Mở tài liệu trong khung chính
• _top - Mở tài liệu trong toàn bộ phần thân của cửa sổ

<a href="https://book-code.com.vn/" target="_blank">Học lập trình web tại book-code.com.vn</a> 

URL tuyệt đối và URL tương đối

Ở các ví dụ trên, chúng ta đều đang sử dụng URL tuyệt đối (địa chỉ web đầy đủ) trong thuộc tính href.

Liên kết cục bộ (liên kết đến một trang trong cùng một trang web) được chỉ định bằng một URL tương đối (không có phần "https://www"):

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="/html-css-style-43.html">HTML CSS</a></p>
<p><a href="/index.php">Book-code</a></p>

HTML Links - Sử dụng hình ảnh làm liên kết

Để sử dụng hình ảnh làm các liên kết, chúng ta chỉ cần đặt thẻ <img> vào bên trong thẻ <a>.

<a href="/index.php">
<img src="icon-book.png" alt="bookcode" style="width:50px;height:50px;"></a>

Liên kết đến một địa chỉ email

Sử dụng mailto: bên trong thuộc tính href để tạo liên kết mở tới chương trình email của người dùng (để cho phép họ gửi email tới địa chỉ cho trước)

<p><a href="mailto:admin@book-code.com.vn">Send email</a></p>

Button liên kết

Để sử dụng nút HTML làm liên kết, Chúng ta phải sử dụng thêm JavaScript.

JavaScript cho phép chúng ta xác định những gì xảy ra tại một số sự kiện nhất định, chẳng hạn như một lần nhấp vào nút.

<button onclick="document.location='/index.php'">Học lập trình web</button>

HTML Links - Color khác nhau

Một liên kết HTML được hiển thị bằng các màu khác tùy thuộc vào việc nó đã được truy cập, chưa được truy cập hay đang hoạt động...

Theo mặc định, một liên kết sẽ xuất hiện như sau (trong tất cả các trình duyệt).

• Một liên kết không được truy cập được gạch chân và có màu xanh lam
• Một liên kết đã truy cập được gạch chân và có màu tím
• Một liên kết đang hoạt động được gạch chân và có màu đỏ

Chúng ta có thể thay đổi màu trạng thái liên kết bằng cách sử dụng CSS.

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>

HTML Links - liên kết tới nội dung trong trang web

Các liên kết HTML có thể được sử dụng để tạo liên kết cục bộ, để người đọc có thể di chuyển đến các phần nội dung cụ thể của trang web.

Để tạo các liên kết cục bộ tới nội dung trong trang web, chúng ta thực hiện như sau.

Bước 1: Gán thuộc tính id cho nội dung cần liên kết đến

<h2 id="bài 3">Nội dung tiêu đề</h2>

Bước 2: Sử dụng thuộc tính href của thẻ <a> để liên kết tới nội dung thẻ được gán id

<a href="#bài 3">Chuyển tới nội dung tiêu đề</a>

<p><a href="#C4">Đi tới Chapter 4</a></p>
<p><a href="#C10">Đi tới Chapter 10</a></p>

Chúng ta cũng có thể liên kết tới nội dung trong một trang web khác, cú pháp như sau:

<a href="html_demo.html#C4">Chuyển tới Chapter 4</a>