Khóa HỌC HTML – BÀI 10 – SIÊU LIÊN KẾT

Trong bài này chúng ta sẽ học những mục sau:

• Dùng thẻ <a> để tạo 1 liên kết.
• Dùng thuộc tính href để xác định địa chỉ liên kết.
• Dùng thuộc tính target để định nơi mở tài liệu.
• Dùng thẻ <img> (bên trong <a>) để dùng hình ảnh như 1 liên kết.
• Dùng thuộc tính id (id="giá trị") để tạo đánh dấu trong 1 trang.
• Dùng thuộc tính href (href="#giá trị") để liên kết đến phần đánh dấu.

Hầu như trang web nào cũng có 1 vài liên kết. Liên kết giúp người dùng di chuyển từ trang này đến trang khác nhanh chóng.

Siêu liên kết

Nhừng liên kết đến các trang HTML được gọi là siêu liên kết.

Bạn có thể bấm chuột (trái) lên 1 liên kết và "nhảy" đến 1 tài liệu khác.

Ghi chú: 1 liên kết không nhất thiết phải là chữ. Liên kết có thể là ảnh hoặc bất kỳ đối tượng HTML nào.

Cú pháp

Trong HTML, liên kết được xác định bằng thẻ <a>:

<a href="url">Liên kết</a>

Ví dụ:

<a href="http://www.lophocvitinh.com">Lớp học vi tính.COM</a>

Liên kết nội

Ví dụ trên là 1 URL đầy đủ (Địa chỉ web đầy đủ).

1 liên kết nội (liên kết nội bộ của trang web) được xác định bằng 1 đường dẫn URL không có phần "http://www...."

Ví dụ:

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

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

Khi bạn rê chuột lên 1 liên kết, 02 điều sau đây sẽ xảy ra:

• Dấu mũi tên của con trỏ sẽ đổi thành hình bàn tay.
• Màu sắc của liên kết cũng sẽ thay đổi.

Theo mặc định, 01 liên kết sẽ thay đổi như thế này (trên tất cả trình duyệt):

• Một liên kết chưa được bấm sẽ được gạch dưới và có màu xanh
• Một liên kết đã bấm sẽ có gạch dưới và màu tím
• Một liên kết đang được bấm chuột lên sẽ được gạch dưới và màu đỏ.

Bạn có thể thay đổi màu sắc mặc định, bằng cách sử dụng CSS với các thuộc tính style.

Ví dụ:

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

Thuộc tính target

Thuộc tính target xác định nơi mở tài liệu được liên kết.

Thuộc tính target có 1 trong các giá trị sau:

1. _blank – mở tài liệu liên kết trong 1 cửa sổ mới hay tab mới.
2. _self – Mở tài liệu liên kết trong chính cửa sổ chứa liên kết( đây là thuộc tính mặc định)
3. _parent Mở tài liệu liên kết trong cửa sổ "cha" chứa liên kết.
4. _top – Mở tài liệu liên kết trong toàn bộ cửa sổ.
5. framename – Mở tài liệu liên kết trong 1 khung được đặt tên.

Ví dụ 1:

<a href="http://www.lophocvitinh.com/" target="_blank">Visit Lớp học vi tính.COM!</a>

Mẹo: Nếu trang web của bạn bị khóa bởi 1 khung, bạn có thể dùng thuộc tính target="_top" để bỏ khung đó.

Ví dụ 2:

<a href="http://www.lophocvitinh.com/html/" target="_top">Lớp học vi tính!</a>

Dùng ảnh làm liên kết

Ví dụ:

<a href="http://www.lophocvitinh.com">
  <img src="smiley.gif" alt="Tự học HTML" style="width:42px;height:42px;border:0;">
</a>

Ghi chú: border:0; để ngăn ngừa IE9 (hoặc các trình duyệt version cũ) tự động thêm 1 khung quanh hình ảnh (khi hình ảnh là 1 liên kết).

Tạo 1 đánh dấu

Đánh dấu đưuọc dùng để giúp người lướt web có thể nhảy đến 1 vùng nào đó trên trang web.

Đánh dấu đặc biệt hữu dụng nếu trang web có nội dung quá dài.

Để tạo đánh dấu, bạn phải tạo 1 đánh dấu trước, sau đó tạo 1 liên kết trỏ đến nó.

Khi người dùng bấm vào liên kết trình duyệt sẽ cuộn đến phần đánh dấu đó.

Ví dụ:

Đầu tiên, tạo 1 đánh dấu với thuộc tính id:

<h2 id="tips">Useful Tips Section</h2>

Sau đó, thêm 1 liên kết nội đến điểm đánh dấu ("Useful Tips Section"), trong cùng trang đó:

<a href="#tips">Visit the Useful Tips Section</a>

Hoặc, thêm 1 liên kết ngoại trỏ tới điểm đánh dấu ("Useful Tips Section"),trong 1 trang khác.

Ví dụ:

<a href="html_tips.html#tips">Visit the Useful Tips Section</a>

Tác giả: #drM

Nguồn: Sưu Tầm