Các đường dẫn trong HTML

Bạn có thể tìm thấy các đường dẫn (link) ở khắp các trang web. Link cho phép click vào để chuyển sang một trang khác.

Đường dẫn trong HTML là gì

Các đường dẫn trong HTML là các đường siêu liên kết. Click vào đó sẽ giúp đưa bạn tới một văn bản khác. Khi rê chuột qua đường dẫn, biểu tượng mũi tên của chuột sẽ chuyển thành biểu tượng bàn tay.

Lưu ý: Đường dẫn không nhất thiết phải là văn bản, có thể là hình ảnh hay các phần tử HTML khác.

Cú pháp đường dẫn trong HTML

Trong HTML, đường dẫn được định nghĩa bằng thẻ <a>

<a href="url">văn bản cho đường dẫn</a>

Ví dụ

<a href="https://www.quantrimang.com/html/">Tổng hợp các bài học HTML</a>

Thuộc tính href được dùng để xác định địa chỉ của điểm đến cụ thể.(https://quantrimang.com/html/) Văn bản cho đường dẫn là phần sẽ hiển thị, click vào đây sẽ đưa bạn tới địa chỉ đó.

Lưu ý: Nếu không dùng dấu gạch chéo cho địa chỉ thư mục con, có thể sẽ tạo ra 2 yêu cầu tới máy chủ. Nhiều máy chủ tự động thêm dấu gạch cho rồi mới tạo yêu cầu.

Đường dẫn nội bộ Local Link

Ví dụ trên sử dụng đường dẫn URL cho cả trang web, link nội bộ (link tới cùng một trang web) được chỉ định bằng URL liên quan (không cần https://www.)

<a href="html_images.asp">Hình ảnh HTML</a>

Màu sắc đường dẫn HTML

Mặc định đường dẫn sẽ hiển thị như sau (trên tất cả trình duyệt)

• Đường dẫn chưa được ghé thăm/click (unvisit) màu xanh dương và được gạch chân
• Đường dẫn đã được ghé thăm/click vào (visit) màu tím và được gạch chân
• Đường dẫn hoạt động (active) màu đỏ và được gạch chân

Bạn có thể thay màu mặc định bằng CSS.

Ví dụ

<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>

Thuộc tính target

Thuộc tính target dùng để xác định xem sẽ mở văn bản được liên kết đó ở đâu, có thể là các giá trị sau:

_blank mở ở cửa sổ hoặc tab mới
_self mở ở cùng cửa sổ/tab (mặc định)
_parent mở ở khung mẹ (parent frame)
_top mở ở toàn bộ cửa sổ
framename mở ở khung đặt tên (named frame)

Ví dụ dưới đây mở văn bản ở cửa sổ/tab mới

<a href="https://www.quantrimang.com/" target="_blank">Truy cập Quản trị mạng</a>

Nếu trang web bị đóng trong khung, bạn có thể dùng target=”_top” để phá khung.

<a href="https://www.quantrimang.com/html/" target="_top">Hướng dẫn HTML5</a>

Đường dẫn dưới dạng hình ảnh

<a href="default.asp">
  <img src="smiley.gif" alt="Học HTML"
style="width:42px;height:42px;border:0;">
</a>

border:0’ được thêm để ngăn IE9 (và trở về trước) hiển thị đường viền xung quanh ảnh (khi ảnh là một đường dẫn).

Tiêu đề đường dẫn

Thuộc tính title dùng để xác định thông tin bổ sung cho phần tử. Thông tin thường hiển thị dưới dạng tooltip khi trỏ chuột qua phần tử.

<a href="https://www.quantrimang.com/html/" title="Truy cập trang học HTML">Trang học HTML</a>

Tạo đánh dấu trang

Đánh dấu trang trong HTML được dùng để người đọc dễ dàng đi tới các phần khác trong trang web. Đánh dấu trang rất hữu ích khi trang webpage quá dài.

Trước hết bạn phải tạo đánh dấu trang rồi sau đó thêm đường dẫn tới đó. Khi click vào link, trang sẽ cuộn tới địa chỉ có đánh dấu trang đó.

Tạo dấu trang bằng thuộc tính id

<h2 id="C16">Chương 16</h2>

Sau đó gắn đường dẫn tới dấu trang đó (Đi tới Chương 16) từ cùng một trang

<a href="#C16">Đi tới Chương 16</a>

Gắn đường dẫn tới dấu trang (Đi tới Chương 16) từ trang khác

<a href="html_demo.html#C4">Đi tới Chương 16</a>

Đường dẫn ngoài

Đường dẫn ngoài có thể tham chiếu tới URL hoặc đường dẫn liên quan tới trang web hiện tại. Ví dụ dưới đây dùng URL đầy đủ.

<a href="https://www.quantrimang.com/html/default.asp">Hướng dẫn HTML</a>

Ví dụ dưới đây dẫn tới trang web trong thư mục HTML của cùng website

<a href="/html/default.asp">Hướng dẫn HTML</a>

Ví dụ dưới đây dẫn tới trang web đặt trong cùng thư mục của cùng trang hiện tại

<a href="default.asp">Hướng dẫn HTMLl</a>

Bài trước: Tạo kiểu cách cho HTML với CSS

Bài sau: Hình ảnh trong HTML