Liên kết trong HTML – Thuộc tính cho thẻ liên kết – Học HTML

0
2196

Liên kết là một thẻ dùng để chuyển hướng tới một đường dẫn trong hoặc ngoài trang. Bạn Có thể thấy liên kết xuất hiện trên hầu hết tất cả các website. Các liên kết trong HTML được gọi là những siêu liên kết. Siêu liên kết là một đoạn chữ hoặc một bức ảnh hoặc có thể một nút mà bạn có thể nhấn vào để chuyển tới một trang khác.

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

Trong HTML, các liên kết được tạo bởi thẻ <a>:

<a href="đường dẫn url">tên liên kết</a>
<!DOCTYPE html>
<html>
<body>
 
<p><a href="https://hoantn.com">Tự Học HTML Online</a></p>
 
</body>
</html>

Thuộc tính href chứa địa chỉ của liên kết (https://hoantn.com)

Tên liên kết sẽ là phần sẽ được hiển thị (Tự Học HTML Online).

Khi người dùng nhấn vào tên liên kết họ sẽ được chuyển sang một trang mới (Hoantn.Com).

Tên liên kết không chỉ bao gồm chữ. Nó có thể là một ảnh hoặc bất kỳ thành phần HTML nào khác.

Liên kết nội bộ

Liên kết ở ví dụ bên trên sử dụng đường dẫn tuyệt đối (Địa chỉ đầy đủ).

Một liên kết nội bộ (liên kết tới trang khác trên cùng một website) là một địa chỉ tương đối (không có phần http://ten.website…).

<!DOCTYPE html>
<html>
<body>
 
<p><a href="/tu-hoc-online/hoc-html/">Học HTML</a> là liên kết tới một trang trên cùng website.</p>
 
<p><a href="http://vi.wikipedia.org/">Wikipedia</a> là liên kết tới một website bên ngoài.</p>
 
</body>
</html>

Liên kết trong HTML – Màu sắc và biểu tượng

Khi bạn di chuột vào một liên kết, sẽ có hai điều thường xảy ra:

  • Chuột sẽ chuyển từ dạng mũi tên sang hình một bàn tay nhỏ
  • Màu của liên kết sẽ thay đổi

Mặc định, trên các trình duyệt liên kết sẽ được hiển thị như sau:

  • Một liên kết chưa được nhấn vào sẽ được gạch chân và có màu xanh
  • Một liên kết đã được nhấn vào sẽ được gạch chân và có màu tím
  • Khi một liên kết được nhấn sẽ được gạch chân và có màu đỏ

Bạn có thể thay đổi kiểu mặc định bằng cách sử dụng CSS:

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color:#000000;
background-color:transparent;
text-decoration:none;
}
a:visited {
color:#000000;
background-color:transparent;
text-decoration:none;
}
a:hover {
color:#ff0000;
background-color:transparent;
text-decoration:underline;
}
a:active {
color:#ff0000;
background-color:transparent;
text-decoration:underline;
}
</style>
</head>
<body>
 
<p>Bạn có thể thay đổi màu mặc định của liên kết</p>
 
<a href="/css-trong-html/" target="_blank">CSS trong HTML</a>
 
</body>
</html>

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

Thuộc tính target quy định vị trí mở của trang được liên kết.

Trong ví dụ dưới đây liên kết sẽ được mở trong một cửa sổ hoặc một tab mới:

<!DOCTYPE html>
<html>
<body>
 
<a href="https://hoantn.com/tu-hoc-online/hoc-html/" target="_blank">Tự học HTML Online</a>
 
<p>Nếu bạn thiết lập thuộc tính target là "_blank", liên kết sẽ được mở trong một cửa sổ hoặc tab mới.</p>
 
</body>
</html>
_blankMở liên kết trong một cửa sổ hoặc một tab mới
_selfMở liên kết tại chính cửa sổ hiện tại (Mặc định)
_parentMở liên kết tại frame ngoài
_topMở liên kết tại cửa sổ hiện tại (Thoát ra khỏi frame nếu đang ở trong frame).
Tên frame Mở liên kết theo tên của frame

Nếu trang của bạn đang nằm ở trong một frame, bạn có thể dùng  target=”_top” để thoát khỏi frame:

<!DOCTYPE html>
<html>
<body>
 
<p>Trang của bạn đang nằm trong frame? <a href="https://hoantn.com/tu-hoc-online/hoc-html/" target="_top">Nhấn vào đây!</a></p>
 
</body>
</html>

Liên kết trong HTML – Sử dụng ảnh

Cách phổ biến nhất sử dụng ảnh trong liên kết là:

<!DOCTYPE html>
<html>
<body>
 
<p>Ảnh có chứa liên kết, bạn có thể nhấn để chuyển sang trang mới.</p>
 
<a href="https://hoantn.com/tu-hoc-online/hoc-html/">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="Học HTML" style="width:42px;height:42px;border:0">
</a>
 
<p>Chúng ta đã thêm "border:0" để tránh trình duyệt Internet Explorer 9 (và các phiên bản trước đó) hiển thị viền xung quanh ảnh.</p>
 
</body>
</html>

“border:0” được thêm vào để tránh trình duyệt Internet Explorer 9 (và các phiên bản trước đó) hiển thị viền xung quanh ảnh.

Liên kết trong HTML – Thuộc tính id

Thuộc tính id có thể được sử dụng để tạo một chỉ mục trong trang HTML.

Chỉ mục không không hiển thị trên trình duyệt.

Ví dụ

Thêm thuộc tính id vào bất kỳ thẻ <a> nào:

<a id="marked">Khu vực được đánh dấu</a>

sau đó tạo một liên kết tới chỉ mục (Khu vực được đánh dấu):

<a href="#marked">Tới khu vực được đánh dấu</a>

Hoặc tạo một liên kết tới chỉ mục từ một trang khác:

<a href="https://hoantn.com/#marked">Tới khu vực được đánh dấu</a> 
<!DOCTYPE html>
<html>
<body>
 
<p><a href="#block6">Xem Block 6.</a></p>
 
<h2>Khu vực 1</h2>
<p>Nội dung block</p>
 
<h2>Khu vực 2</h2>
<p>Nội dung block</p>
 
<h2>Khu vực 3</h2>
<p>Nội dung block</p>
 
<h2>Khu vực 4</h2>
<p>Nội dung block</p>
 
<h2>Khu vực 5</h2>
<p>Nội dung block</p>
 
<h2><a id="block6">Khu vực 6</a></h2>
<p>Nội dung block</p>
 
<h2>Khu vực 7</h2>
<p>Nội dung block</p>
 
<h2>Khu vực 8</h2>
<p>Nội dung block</p>
 
<h2>Khu vực 9</h2>
<p>Nội dung block</p>
 
<h2>Khu vực 10</h2>
<p>Nội dung block</p>
 
<h2>Khu vực 11</h2>
<p>Nội dung block</p>
 
<h2>Khu vực 12</h2>
<p>Nội dung block</p>
 
<h2>Khu vực 13</h2>
<p>Nội dung block</p>
 
<h2>Khu vực 14</h2>
<p>Nội dung block</p>
 
</body>
</html>

Tổng kết:

Ở bài viết này chúng ta đã tìm hiểu về một số nội dung sau:

  • Sử dụng thẻ <a> để tạo một liên kết trong HTML
  • Sử dụng thuộc tính href để quy định địa chỉ của liên kết trong HTML
  • Sử dụng thuộc tính target để quy định vị trí mở của trang được liên kết trong HTML
  • Sử dụng thẻ <img> (trong thẻ <a>) để sử dụng ảnh liên kết trong HTML
  • Sử dụng thuộc tính id để tạo một chỉ mục trong trang HTML
  • Sử dụng thuộc tính href (href=”#value”) để chuyển tới chỉ mục trong HTML

Nếu có bất kỳ thắc mắc hay góp ý nào cho bài viết này hãy để lại bình luận cho tôi phía dưới nhé. Chúc các bạn học tốt với HTML Online ^^

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây