Liên kết trong HTML

Liên kết được xuất hiện trong hầu hết các trang web. Liên kết cho phép người dùng nhấp vào đường dẫn từ trang này sang trang.

Liên kết – Siêu liên kết trong HTML

Liên kết trong HTML được gọi là siêu liên kết. Bạn có thể nhấp vào liên kết và chuyển đến một trang khác. Khi bạn di chuyển chuột qua liên kết, mũi tên chuột sẽ chuyển thành kí hiệu bàn tay nhỏ.

Lưu ý: Một liên kết không phải là văn bản. Nó có thể là một hình ảnh hoặc bất kỳ phần tử HTML nào.

Cú pháp liên kết trong HTML

Trong HTML, các liên kết được định nghĩa với thẻ <a>:

<a href=”url”>link text</a>

Ví dụ:

<a href=”https://www.w3schools.com/html/”>Visit our HTML tutorial</a>

Thuộc tính href xác định địa chỉ đích (https://www.w3schools.com/html/) của liên kết. Văn bản liên kết là phần hiển thị. Nhấp vào văn bản liên kết sẽ trỏ đến đường link đích.

Lưu ý: Nếu không có dấu gạch chéo ở các địa chỉ con, bạn có thể tạo ra hai yêu cầu tới máy chủ. Nhiều máy chủ sẽ tự động thêm một dấu gạch chéo tới địa chỉ, và sau đó tạo ra một yêu cầu mới.

Local Links

Ví dụ trên đã sử dụng URL đầy đủ. Local Links (liên kết đến cùng một trang web) được chỉ định với một URL tương đối (không có http://www ….).

Ví dụ:

<a href=”html_images.asp”>HTML Images</a>

Màu sắc liên kết trong HTML

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 chưa được nhấp chuột sẽ được gạch dưới và có màu xanh.
• Môt liên kết đã được nhấp chuột sẽ được gạch dưới và có màu tím.
• Môt liên kết đang hoạt động sẽ được gạch dưới và có màu đỏ.

Bạn có thể thay đổi màu mặc định, bằng cách sử dụng các styles như sau:

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

Liên kết trong HTML – thuộc tính target

Thuộc tính target xác định vị trí mở tài liệu được liên kết. Thuộc tính target có thể có một trong các 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ùng một cửa sổ / tab khi nó được nhấp vào (mặc định)
• _parent – Mở tài liệu được liên kết trong khung cha
• _top – Mở tài liệu được liên kết trong toàn phần cửa sổ
• Framename – Mở tài liệu được liên kết trong một khung có tên

Ví dụ dưới sẽ mở tài liệu được liên kết trong một cửa sổ / tab trình duyệt mới:

<a href=”https://www.w3schools.com/” target=”_blank”>Visit W3Schools!</a>

Mẹo: Nếu trang web của bạn bị khóa trong một khung, bạn có thể sử dụng target = “_ top” để thoát ra khỏi khung:

<a href=”https://www.w3schools.com/html/” target=”_top”>HTML5 tutorial!</a>

Link trong HTML – Link ảnh

Thông thường, link trong ảnh được sử dụng như sau:

<a href=”default.asp”>
<img src=”smiley.gif” alt=”HTML tutorial” style=”awidth:42px;height:42px;border:0;”>
</a>

Lưu ý: border:0; được thêm vào để ngăn phiên bản IE9 trở về trước hiển thị một đường viền xung quanh hình ảnh (khi hình ảnh là một liên kết).

Link trong HTML – tạo dấu trang

Bookmarks (dấu trang) được sử dụng để cho phép độc giả chuyển sang các phần cụ thể của trang web. Dấu trang có thể hữu ích nếu trang web của bạn dài.

Để tạo dấu trang, trước tiên bạn phải tạo bookmark, và sau đó thêm liên kết vào nó. Khi liên kết được nhấp, trang sẽ di chuyển đến vị trí có dấu trang.

Đầu tiên, tạo một bookmark với thuộc tính id:

<h2 id=”C4″>Chapter 4</h2>

Sau đó, thêm liên kết vào dấu trang (“Jump to Chapter 4”), từ bên trong cùng một trang:

<a href=”#C4″>Jump to Chapter 4</a>

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

<a href=”html_demo.html#C4″>Jump to Chapter 4</a>

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

Các trang bên ngoài có thể được tham chiếu với một URL đầy đủ hoặc với một đường dẫn liên quan đến trang web hiện tại. Ví dụ dưới sử dụng một URL đầy đủ để liên kết đến một trang web:

<a href=”https://www.w3schools.com/html/default.asp”>HTML tutorial</a>

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

<a href=”/html/default.asp”>HTML tutorial</a>

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

<a href=”default.asp”>HTML tutorial</a>

Tổng kết

• Sử dụng thẻ <a> để xác định liên kết
• Sử dụng thuộc tính href để xác định địa chỉ liên kết
• Sử dụng thuộc tính target để xác định vị trí mở tài liệu được liên kết
• Sử dụng thẻ <img> (bên trong thẻ <a>) để sử dụng hình ảnh làm liên kết
• Sử dụng thuộc tính id (id = “value”) để xác định dấu trang trong một trang
• Sử dụng thuộc tính href (href = “# value”) để liên kết tới dấu trang