WebVN Cộng đồng web Việt Nam
Bạn có thể thấy liên kết xuất hiện trên hầu hết tất cả các website. Liên kết cho phép người dùng chuyển từ trang này tới một trang khác.
Liên kết trong HTML – Siêu Liên Kết
Các liên kết trong HTML được gọi là những siêu liên kết.
Siêu liên kết là một đoạn chữ hoặc một bức ảnh mà bạn có thể nhấn vào để chuyển tới một trang khác.
Liên kết trong HTML – Cú pháp
Trong HTML, các liên kết được tạo bởi thẻ <a>:
|
1 |
<a href="url">tên liên kết</a> |
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body> <p><a href="https://webvn.com">Tự Học HTML</a></p> </body> </html> |
Thuộc tính href chứa địa chỉ của liên kết (https://webvn.com)
Tên liên kết sẽ là phần sẽ được hiển thị (Tự Học HTML).
Khi người dùng nhấn vào tên liên kết họ sẽ được chuyển sang một trang mới.
Liên kết nội bộ
Liên kết ở ví dụ bên trên sử dụng đường dẫn tuyệt đối (Địa chỉ đầy đủ).
Một liên kết nội bộ (liên kết tới trang khác trên cùng một website) là một địa chỉ tương đối (không có phần http://tenwwebsite…).
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body> <p><a href="/hoc-html/">Học HTML</a> là liên kết tới một trang trên cùng website.</p> <p><a href="http://vi.wikipedia.org/">Wikipedia</a> là liên kết tới một website bên ngoài.</p> </body> </html> |
Liên kết trong HTML – Màu sắc và biểu tượng
Khi bạn di chuột vào một liên kết, sẽ có hai điều thường xảy ra:
- Chuột sẽ chuyển từ dạng mũi tên sang hình một bàn tay nhỏ
- Màu của liên kết sẽ thay đổi
Mặc định, trên các trình duyệt liên kết sẽ được hiển thị như sau:
- Một liên kết chưa được nhấn vào sẽ được gạch chân và có màu xanh
- Một liên kết đã được nhấn vào sẽ được gạch chân và có màu tím
- Khi một liên kết được nhấn sẽ được gạch chân và có màu đỏ
Bạn có thể thay đổi kiểu mặc định bằng cách sử dụng CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <head> <style> a:link { color:#000000; background-color:transparent; text-decoration:none; } a:visited { color:#000000; background-color:transparent; text-decoration:none; } a:hover { color:#ff0000; background-color:transparent; text-decoration:underline; } a:active { color:#ff0000; background-color:transparent; text-decoration:underline; } </style> </head> <body> <p>Bạn có thể thay đổi màu mặc định của liên kết</p> <a href="/css-trong-html/" target="_blank">CSS trong HTML</a> </body> </html> |
Liên kết trong HTML – Thuộc tính target
Thuộc tính target quy định vị trí mở của trang được liên kết.
Trong ví dụ dưới đây liên kết sẽ được mở trong một cửa sổ hoặc một tab mới:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body> <a href="https://webvn.com/html/hoc-html/" target="_blank">Tự học HTML</a> <p>Nếu bạn thiết lập thuộc tính target là "_blank", liên kết sẽ được mở trong một cửa sổ hoặc tab mới.</p> </body> </html> |
| Target | Miêu tả |
|---|---|
| _blank | Mở liên kết trong một cửa sổ hoặc một tab mới |
| _self | Mở liên kết tại chính cửa sổ hiện tại (Mặc định) |
| _parent | Mở liên kết tại frame ngoài |
| _top | Mở liên kết tại cửa sổ hiện tại (Thoát ra khỏi frame nếu đang ở trong frame). |
| Tên frame | Mở liên kết theo tên của frame |
Nếu trang của bạn đang nằm ở trong một frame, bạn có thể dùng target=”_top” để thoát khỏi frame:
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body> <p>Trang của bạn đang nằm trong frame? <a href="https://webvn.com/html/hoc-html/" target="_top">Nhấn vào đây!</a></p> </body> </html> |
Liên kết trong HTML – Sử dụng ảnh
Cách phổ biến nhất sử dụng ảnh trong liên kết là:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <p>Ảnh có chứa liên kết, bạn có thể nhấn để chuyển sang trang mới.</p> <a href="/html/hoc-html/"> <img src="/wp-content/uploads/2014/12/pic_html5.gif" alt="Học HTML" style="width:42px;height:42px;border:0"> </a> <p>Chúng ta đã thêm "border:0" để tránh trình duyệt Internet Explorer 9 (và các phiên bản trước đó) hiển thị viền xung quanh ảnh.</p> </body> </html> |
Liên kết trong HTML – Thuộc tính id
Thuộc tính id có thể được sử dụng để tạo một chỉ mục trong trang HTML.
Chỉ mục không không hiển thị trên trình duyệt.
Ví dụ
Thêm thuộc tính id vào bất kỳ thẻ <a> nào:
|
1 |
<a id="marked">Khu vực được đánh dấu</a> |
sau đó tạo một liên kết tới chỉ mục (Khu vực được đánh dấu):
|
1 |
<a href="#marked">Tới khu vực được đánh dấu</a> |
Hoặc tạo một liên kết tới chỉ mục từ một trang khác:
|
1 |
<a href="https://webvn.com/lien-ket-trong-html/#marked">Tới khu vực được đánh dấu</a> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE html> <html> <body> <p><a href="#block6">Xem Block 6.</a></p> <h2>Khu vực 1</h2> <p>Nội dung block</p> <h2>Khu vực 2</h2> <p>Nội dung block</p> <h2>Khu vực 3</h2> <p>Nội dung block</p> <h2>Khu vực 4</h2> <p>Nội dung block</p> <h2>Khu vực 5</h2> <p>Nội dung block</p> <h2><a id="block6">Khu vực 6</a></h2> <p>Nội dung block</p> <h2>Khu vực 7</h2> <p>Nội dung block</p> <h2>Khu vực 8</h2> <p>Nội dung block</p> <h2>Khu vực 9</h2> <p>Nội dung block</p> <h2>Khu vực 10</h2> <p>Nội dung block</p> <h2>Khu vực 11</h2> <p>Nội dung block</p> <h2>Khu vực 12</h2> <p>Nội dung block</p> <h2>Khu vực 13</h2> <p>Nội dung block</p> <h2>Khu vực 14</h2> <p>Nội dung block</p> </body> </html> |
Tổng kết bài học
- Sử dụng thẻ <a> để tạo một liên kết trong HTML
- Sử dụng thuộc tính href để quy định địa chỉ của liên kết trong HTML
- Sử dụng thuộc tính target để quy định vị trí mở của trang được liên kết trong HTML
- Sử dụng thẻ <img> (trong thẻ <a>) để sử dụng ảnh liên kết trong HTML
- Sử dụng thuộc tính id để tạo một chỉ mục trong trang HTML
- Sử dụng thuộc tính href (href=”#value”) để chuyển tới chỉ mục trong HTML
