Link (liên kết) trong HTML

Trong bài viết trước bạn đọc đã cùng Taimienphi.vn tìm hiểu về thuộc tính color trong HTML. Bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về link (liên kết) trong HTML.

Chúng ta có thể học HTML và tìm thấy các link (liên kết) trên hầu hết tất cả các trang web. Bằng cách click vào link để chuyển hướng sang trang web khác. Tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu chi tiết link (liên kết) trong HTML.

link lien ket trong html hoc html

Link (liên kết) trong HTML

Mục Lục bài viết:
1. Link (liên kết) trong HTML
    1.1. Cú pháp link trong HTML

    1.2. Local Link trong HTML
    1.3. Thiết lập màu cho link trong HTML
    1.4. Thuộc tính target trong HTML
    1.5. Image Link trong HTML
    1.6. Link Title trong HTML
    1.7. Tạo Bookmark trong HTML
    1.8. Đường dẫn ngoài trong HTML
2. Tổng kết

1. Link (liên kết) trong HTML

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

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

Lưu ý: link không phải là văn bản, nó có thể là hình ảnh hoặc phần tử HTML bất kỳ.

1.1 Cú pháp link trong HTML

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

link lien ket trong html

Trong đó:
- Thuộc tính href chỉ định địa chỉ đích của link (ví dụ như Taimienphi.vn).
- Link text là phần hiển thị. Click vào link text để chuyển hướng đến địa chỉ được chỉ định.

Lưu ý: Không 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à ví dụ minh họa cách sử dụng cú pháp link trong HTML:

link lien ket trong html 2

Kết quả trả về có dạng như dưới đây:

link lien ket trong html 3

1.2 Local Link trong HTML

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

Local Link (liên kết đế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ề local link trong HTML.

link lien ket trong html 4

Kết quả trả về khi áp dụng local link có dạng như dưới đây:

link lien ket trong html 5

1.3 Thiết lập màu cho link trong HTML

Mặc định link (liên kết) sẽ hiển thị trên tất cả các trình duyệt như dưới đây:
- Link không được truy cập được gạch chân và có màu xanh.
- Link truy cập được gạch chân và có màu tím.
- Link hoạt động được gạch chân và có màu đỏ.

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

link lien ket trong html 6

Kết quả trả về khi thay đổi màu sắc cho link có dạng như dưới đây:

link lien ket trong html 7

1.4 Thuộc tính target trong HTML

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

Thuộc tính target có thể bao gồm một trong số các giá trị dưới đây:
_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 trên cùng một cửa sổ / tab 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ổ chính.
_top: Mở tài liệu được liên kết trong toàn bộ cửa sổ.
framename: Mở tài liệu được liên kết trong thẻ frame.

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

link lien ket trong html 8

Kết quả trả về có dạng như dưới đây:

link lien ket trong html 9

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

link lien ket trong html 10

Kết quả trả về có dạng như dưới đây:

link lien ket trong html 11

1.5 Image Link trong HTML

Chúng ta có thể sử dụng hình ảnh dưới dạng link trong HTML.

Ví dụ: dưới đây là ví dụ về image link trong HTML:

link lien ket trong html 12

Kết quả trả về có dạng như dưới đây:

link lien ket trong html 13

Lưu ý: trong ví dụ trên chúng chúng ta thêm border:0 để ngăn IE9 và các phiên bản trình duyệt trước đó hiển thị đường viền xung quanh hình ảnh trong trường hợp hình ảnh là link.

1.6 Link Title trong HTML

Thuộc tính title chỉ định thêm thông tin về phần tử. Thông tin thường được hiển thị dưới dạng văn bản trong tooltip khi người dùng di chuột qua phần tử.

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

link lien ket trong html 14

Kết quả trả về có dạng như dưới đây:

link lien ket trong html 15

1.7 Tạo Bookmark trong HTML

Bookmark trong HTML được sử dụng để cho phép người dùng chuyển đến các phần cụ thể trên trang web.

Để tạo bookmark trong HTML, trước hết chúng ta phải tạo một bookmark sau đó thêm liên kết đến bookmark đó.

Khi người dùng click vào link, trang sẽ cuộn đến vị trí được bookmark.

Ví dụ: Dưới đây là ví dụ tạo bookmark trong HTML:

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

link lien ket trong html 16

Bước tiếp theo thêm liên kết vào bookmark (trong ví dụ này là "Jump to Chapter 4") trong cùng một trang:

link lien ket trong html 17

Hoặc thêm một liên kết vào dấu trang ("Jump to Chapter 4") từ một trang khác:

link lien ket trong html 18

Kết quả trả về có dạng như dưới đây:

link lien ket trong html 19

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

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

Ví dụ 1: ví dụ dưới đây sử dụng URL đầy đủ để liên kết đến trang web:

link lien ket trong html 20

Kết quả trả về có dạng như dưới đây:

link lien ket trong html 21

Ví dụ 2: ví dụ dưới đây liên kết một trang trong thư mục html trên trang web hiện tại:

link lien ket trong html 22

Kết quả trả về có dạng như dưới đây:

link lien ket trong html 23

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

link lien ket trong html 24

Kết quả trả về có dạng như dưới đây:

link lien ket trong html 25

2. Tổng kết

link lien ket trong html 26

https://thuthuat.taimienphi.vn/link-lien-ket-trong-html-50616n.aspx
Bài viết trên đây Taimienphi.vn vừa giới thiệu cho bạn về link (liên kết) trong HTML. Trong bài viết tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về thẻ img trong HTML. Ngoài ra 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 của mình trong phần bình luận bên dưới bài viết nhé.

Tác giả: Trần Quốc Anh     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Biểu tượng trong HTML
Tìm hiểu các phần tử trong HTML
Danh sách các thuộc tính trong HTML
Thuộc tính color, màu trong HTML
Thuộc tính class trong HTML, cách sử dụng
Từ khoá liên quan:

link (lien ket) trong html

, html, thuoc tinh color trong html,

SOFT LIÊN QUAN
  • Copy HTML

    Sao chép mã nguồn HTML

    Rất ít người trong chúng ta còn xa lạ HTML, đây là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên hoặc diễn tả một trang web. Ví dụ như chỉ cần một đoạn thông tin trong bất kỳ trang web nào đó là bạn đã có thể tra ra ...

Tin Mới

  • Sự khác nhau giữa JSON và XML

    XML (Extensible Markup Language) và JSON (JavaScript Object Notation) là 2 định dạng trao đổi dữ liệu phổ biến nhất hiện nay. So sánh JSON và XML, sự khác nhau giữa JSON và XML là gì? Cùng theo dõi bài viết dưới đây để tìm hiểu nhé.

  • Danh sách (list) trong HTML

    Bài viết trước bạn đọc đã cùng Taimienphi.vn tìm hiểu về bảng (table) trong HTML. Trong bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về danh sách (list) trong HTML.

  • Thẻ img trong HTML

    Trên các trang web đều sử dụng hình ảnh minh họa để làm nổi bật nội dung, đồng thời để tránh người dùng cảm thấy khó chịu vì text quá dài. Trong HTML hình ảnh được chỉ định bằng thẻ img. Tham khaor tiếp bài viết dưới

  • Nhập Code Play Together 7/2024 lấy Kim Cương, Tiền Sao FREE

    Play Together là game nhập vai mô phỏng sở hữu đồ họa sinh động được giới trẻ yêu thích nhất hiện nay tại Việt Nam. Trò chơi liên tục cho ra mắt