Liên kết (Link) không chỉ là cầu nối giữa các trang web mà còn đóng vai trò quan trọng trong việc tối ưu SEO và trải nghiệm người dùng. Một URL chuẩn cần ngắn gọn, dễ đọc, chứa từ khóa chính và không có ký tự đặc biệt hoặc chuỗi ký tự dài dòng. Sử dụng dấu gạch ngang (-) để phân tách từ thay vì dấu gạch dưới (_) sẽ giúp Google hiểu nội dung tốt hơn. Bên cạnh đó, hãy tránh các thông số dư thừa và đảm bảo URL mang tính mô tả, giúp người dùng dễ dàng nhận biết nội dung trước khi nhấp vào.
Các trường hợp xảy ra đối với liên kết
Thông thường thì một cái liên kết sẽ có thể gặp phải những trường hợp như sau:
| :link | | | Trường hợp này xảy ra khi URL của liên kết chưa từng được người dùng viếng thăm. |
| :visited | | | Trường hợp này xảy ra khi URL của liên kết đã từng được người dùng viếng thăm. |
| :hover | | | Trường hợp này xảy ra khi cái liên kết đang bị người dùng dí con trỏ vào. |
| :active | | | Trường hợp này xảy ra khi cái liên kết đang bị người dùng nhấp vào. |
Cách định dạng cho liên kết dựa theo trường hợp
Để định dạng cho một cái liên kết dựa theo trường hợp xảy ra đối với nó thì khi xác định bộ chọn của cái liên kết, chúng ta cần phải ghép tên của trường hợp nằm ở ngay sát phía sau liên kết.
Ví dụ:
– Thiết lập chữ màu đỏ cho cái liên kết có class là hello (khi người dùng dí con trỏ vào nó)
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<style>
a.hello:hover{
color:red;
}
</style>
</head>
<body>
<a href=".." class="hello">WEB CƠ BẢN</a>
</body>
</html>– Lưu ý: Nếu một cái liên kết có nhiều bộ định dạng (cho các trường hợp khác nhau) thì các bạn nên sắp xếp các bộ định dạng đó theo trình tự (1) :link (2) :visited (3) :hover (4) :active
Ví dụ:
– Thiết lập “màu chữ” cho cái liên kết có class là hello.
- Nó sẽ có màu xanh dương (khi URL của nó chưa từng được người dùng viếng thăm)
- Nó sẽ có màu đỏ (khi URL của nó đã từng được người dùng viếng thăm)
- Nó sẽ có màu xanh lá (khi người dùng dí con trỏ vào nó)
- Nó sẽ có màu tím (khi người dùng nhấp vào nó)
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<style>
a.hello:link{
color:Blue;
}
a.hello:visited{
color:Red;
}
a.hello:hover{
color:SpringGreen;
}
a.hello:active{
color:Violet;
}
</style>
</head>
<body>
<a href="kdb32kbdk434" class="hello">WEB CƠ BẢN</a>
</body>
</html>Cách tạo một cái nút liên kết
– Nếu xét về bản chất thì nút liên kết (link button) chỉ là một cái liên kết được định dạng giống với cái nút, nhằm giúp cho cái liên kết trở nên đẹp hơn, đa dạng hơn, . . . .
– Ví dụ: Bên dưới chính là ba cái nút liên kết.
NÚT LIÊN KẾT 01
NÚT LIÊN KẾT 02
NÚT LIÊN KẾT 03
– Để tạo được một cái “nút liên kết” thì khi định dạng cho phần tử <a>, chúng ta cần phải sử dụng một số thuộc tính như: display, border, padding, color, . . . . kèm theo việc định dạng cho cái liên kết dựa theo từng trường hợp xảy ra đối với nó.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<style type="text/css">
a{
display:inline-block;
border:1px solid #73AD21;
background-color:#73AD21;
padding:10px 12px;
box-shadow:2px 2px 5px #6c6969;
text-decoration:none;
border-radius:3px;
color:white;
}
a:hover{
border:1px solid #90d331;
background-color:#90d331;
}
a:active{
border:1px solid #669f15;
background-color:#669f15;
}
</style>
</head>
<body>
<a href="..">NÚT LIÊN KẾT</a>
</body>
</html>
