Liên kết trong HTML

HTML là ngôn ngữ bạn cần nắm vững để hiểu và tạo ra các liên kết trên các trang web. Bằng cách nhấp chuột vào liên kết, bạn có thể dễ dàng chuyển hướng đến các trang web khác. Hãy tham khảo chi tiết trong bài viết dưới đây để hiểu rõ hơn về liên kết trong HTML.

Liên kết trong HTML

1. Liên kết (link) trong HTML

Liên kết trong HTML là siêu liên kết (hyperlink).

Bằng cách nhấp chuột vào liên kết, chúng ta có thể chuyển hướng đến trang web, tài liệu khác. Khi di chuột qua một liên kết, mũi tên chuột sẽ biến thành biểu tượng khác.

Chú ý: Liên kết không nhất thiết phải là văn bản, nó có thể là hình ảnh hoặc bất kỳ phần tử HTML nào khác.

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

Siêu liên kết (hyperlink) được định nghĩa bằng thẻ a trong HTML:

Trong đó:
- Thuộc tính href chỉ định địa chỉ đích của liên kết (ví dụ như Mytour).
- Link text là phần được hiển thị. Nhấp vào văn bản liên kết để chuyển hướng đến địa chỉ được chỉ định.

Chú ý: Không cần phải có dấu gạch chéo ở cuối địa chỉ thư mục con. Ngoài ra, bạn có thể tạo 2 yêu cầu đến máy chủ. Nhiều máy chủ sẽ tự động thêm dấu gạch chéo vào cuối địa chỉ và sau đó tạo một yêu cầu mới.

Ví dụ: Dưới đây là một ví dụ minh họa về cách sử dụng cú pháp liên kết trong HTML:

Kết quả trả về sẽ có dạng như sau:

1.2 Liên kết Nội bộ trong HTML

Trong ví dụ này, chúng ta sử dụng URL tuyệt đối (địa chỉ trang web đầy đủ).

Liên kết Nội bộ (link đến cùng một trang web) được chỉ định bằng URL tương đối (không có https://www...).

Ví dụ: Dưới đây là ví dụ về liên kết nội bộ trong HTML.

Kết quả trả về khi sử dụng liên kết nội bộ sẽ có dạng như sau:

1.3 Cài đặt Màu sắc cho Liên kết trong HTML

Mặc định, liên kết sẽ hiển thị như sau trên tất cả các trình duyệt:
- Liên kết chưa được truy cập sẽ không có gạch chân và có màu xanh.
- Liên kết đã được truy cập sẽ có gạch chân và màu tím.
- Liên kết hoạt động sẽ có gạch chân và màu đỏ.

Tuy nhiên, bạn có thể thay đổi màu sắc mặc định cho liên kết trong HTML bằng cách sử dụng CSS:
Ví dụ: ví dụ dưới đây minh họa cách thiết lập màu cho liên kết trong HTML:

Kết quả trả về khi thay đổi màu sắc cho liên kết sẽ có dạng như sau:

1.4 Thuộc tính target trong HTML

Thuộc tính target được dùng để chỉ định nơi mở tài liệu được liên kết.

Thuộc tính target có thể chứa một trong những giá trị sau:
_blank: Mở tài liệu được liên kết trong một cửa sổ hoặc tab mới.
_self: Mở tài liệu được liên kết trong cửa sổ/tab hiện tại khi người dùng click vào link (mặc định).
_parent: Mở tài liệu được liên kết trong cửa sổ/tab cha.
_top: Mở tài liệu được liên kết trong cửa sổ/tab cha của toàn bộ trang.
framename: Mở tài liệu được liên kết trong khung có tên framename.

Ví dụ 1: Trong ví dụ sau, tài liệu được liên kết sẽ mở trong một cửa sổ/tab mới:

Kết quả sẽ được hiển thị như sau:

Mẹo: Nếu trang web bị khóa trong một frame, bạn có thể sử dụng target='_top' để mở frame đó.

Ví dụ 2: Ví dụ dưới đây minh họa cách sử dụng target='_top':

Kết quả sẽ có dạng như sau:

1.5 Liên kết Hình ảnh trong HTML

Ta có thể dùng hình ảnh như một liên kết trong HTML.

Ví dụ: dưới đây là một ví dụ về liên kết hình ảnh trong HTML:

Kết quả trả về sẽ có dạng như sau:

Chú ý: Trong ví dụ trước, chúng ta thêm border:0 để ngăn trình duyệt IE9 và các phiên bản trước đó hiển thị đường viền xung quanh hình ảnh khi hình ảnh là liên kết.

1.6 Tiêu đề Liên kết trong HTML

Thuộc tính title được sử dụng để cung cấp thông tin bổ sung về phần tử. Thông tin này thường xuất hiện dưới dạng gợi ý văn bản khi người dùng di chuột qua phần tử.

Ví dụ: Dưới đây là một ví dụ minh họa về cách sử dụng thuộc tính title để cung cấp thông tin bổ sung về phần tử trong HTML:

Kết quả trả về sẽ có dạng như sau:

1.7 Tạo Đánh Dấu Trang trong HTML

Đánh dấu trang trong HTML cho phép người dùng dễ dàng di chuyển đến các phần cụ thể trên trang web.

Để tạo đánh dấu trang trong HTML, chúng ta cần đầu tiên tạo một điểm đánh dấu, sau đó thêm liên kết đến điểm đánh dấu đó.

Khi người dùng nhấp vào liên kết, trang sẽ tự động cuộn đến vị trí được đánh dấu trên trang.

Ví dụ: Dưới đây là một ví dụ về việc tạo đánh dấu trang trong HTML:

Đầu tiên, chúng ta sử dụng thuộc tính id để tạo đánh dấu trang:

Tiếp theo, thêm liên kết đến đánh dấu trang (trong ví dụ này là 'Chuyển đến Chương 4') trên cùng một trang:

Hoặc thêm một liên kết vào dấu trang ('Chuyển đến Chương 4') từ một trang khác:

Kết quả sẽ trả về dưới dạng như sau:

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

Các trang bên ngoài có thể được tham chiếu bằng URL đầy đủ hoặc đường dẫn liên quan đến trang web hiện tại.

Ví dụ 1: Trong ví dụ này, chúng ta sử dụng URL đầy đủ để liên kết đến trang web.

Kết quả trả về sẽ được hiển thị như sau:

Ví dụ 2: Trong ví dụ này, chúng ta liên kết đến một trang trong thư mục HTML trên trang web hiện tại.

Kết quả trả về sẽ có dạng như sau:

Ví dụ 3: Dưới đây là một ví dụ liên kết đến một trang trong cùng thư mục với trang hiện tại:

Kết quả trả về sẽ có dạng như sau:

2. Tổng kết

Bài viết trên đây Mytour đã giới thiệu về link (liên kết) trong HTML. Trong bài viết tiếp theo, Mytour sẽ giới thiệu về thẻ img trong HTML. Nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến trong phần bình luận bên dưới bài viết nhé.