Liên kết trong HTML

Một trang web có thể chứa các liên kết khác nhau đưa bạn trực tiếp đến các trang khác và thậm chí các phần cụ thể của một trang nhất định. Các liên kết này được gọi là siêu liên kết.

Các siêu liên kết cho phép khách truy cập điều hướng giữa các trang Web bằng cách nhấp vào các từ, cụm từ và hình ảnh. Do đó, bạn có thể tạo siêu liên kết bằng cách sử dụng văn bản hoặc hình ảnh có sẵn trên trang web.


Liên kết tài liệu

Một liên kết được chỉ định bằng thẻ HTML <a>. Thẻ này được gọi là thẻ anchor và bất kỳ thứ gì giữa thẻ mở <a> và thẻ đóng </a> đều trở thành một phần của liên kết và người dùng có thể nhấp vào phần đó để truy cập tài liệu được liên kết. Sau đây là cú pháp đơn giản để sử dụng thẻ <a>.

Hãy thử làm theo ví dụ liên kết https://.vn tại trang của bạn

Nhấp vào liên kết dưới đây

Học online, học trực tuyến
<!DOCTYPE html>
<html>
   
   <head>
      <title>Ví dụ siêu liên kết</title>
   </head>
	
   <body>
      <p>Nhấp vào liên kết dưới đây</p>
      <a href = "https://learnskill.vn" target = "_self">Học online, học trực tuyến</a>
   </body>
	
</html>

Chúng ta đã sử dụng thuộc tính target trong ví dụ trên. Thuộc tính này được sử dụng để chỉ định vị trí nơi tài liệu được liên kết được mở. Sau đây là các tùy chọn:

STT Tuỳ chọn & Mô tả
1

_blank

Mở tài liệu được liên kết trong một cửa sổ hoặc tab mới.

2

_self

Mở tài liệu được liên kết trong cùng một khung.

3

_parent

Mở tài liệu được liên kết trong khung chính.

4

_top

Mở tài liệu được liên kết trong toàn bộ phần nội dung của cửa sổ.

5

targetframe

Mở tài liệu được liên kết trong khung mục tiêu được đặt tên.

Hãy thử ví dụ sau để hiểu sự khác biệt cơ bản trong một số tùy chọn được cung cấp cho thuộc tính target.

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ siêu liên kết</title>
      <base href = "https://learnskill.vn/">
   </head>
	
   <body>
      <p>Nhấp vào bất kỳ liên kết nào sau đây</p>
      <a href = "/html/index.htm" target = "_blank">Mở trong cửa sổ hoặc tab mới</a> |
      <a href = "/html/index.htm" target = "_self">Mở trong cùng một khung</a> |
      <a href = "/html/index.htm" target = "_parent">Mở trong khung chính</a> |
      <a href = "/html/index.htm" target = "_top">Mở trong Body</a>
   </body>

</html>

Sử dụng đường dẫn cơ sở

Khi bạn liên kết các tài liệu HTML liên quan đến cùng một trang web, không bắt buộc phải cung cấp URL đầy đủ cho mọi liên kết. Bạn có thể loại bỏ nó nếu bạn sử dụng thẻ <base> trong tiêu đề tài liệu HTML của mình. Thẻ này được sử dụng để cung cấp một đường dẫn cơ sở cho tất cả các liên kết. Vì vậy, trình duyệt của bạn sẽ nối đường dẫn tương đối nhất định với đường dẫn cơ sở này và sẽ tạo thành một URL hoàn chỉnh.

Ví dụ sau sử dụng thẻ <base> để chỉ định URL cơ sở và sau này chúng ta có thể sử dụng đường dẫn tương đối đến tất cả các liên kết thay vì cung cấp URL hoàn chỉnh cho mọi liên kết.

Nhấp vào liên kết dưới

Hướng dẫn HTML
<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ siêu liên kết</title>
      <base href = "https://learnskill.vn/">
   </head>
	
   <body>
      <p>Nhấp vào liên kết dưới</p>
      <a href = "/html/index.htm" target = "_blank">Hướng dẫn HTML</a>
   </body>
	
</html>

Liên kết đến một phần trang

Bạn có thể tạo liên kết đến một phần cụ thể của một trang web nhất định bằng cách sử dụng thuộc tính name. Đây là một quy trình gồm hai bước.

Lưu ý: Thuộc tính name không được dùng trong HTML5. Không sử dụng thuộc tính này. Sử dụng thuộc tính idtitle thay thế.

Đầu tiên, hãy tạo một liên kết đến nơi bạn muốn truy cập bằng trang web và đặt tên cho nó bằng thẻ <a...> như sau:

<h1>Liên kết văn bản <a name = "top"></a></h1>

Bước thứ hai là tạo một siêu liên kết để liên kết tài liệu và đặt nơi bạn muốn đến

<a href = "/mod/page/view.php?id=136#top">Lên đầu trang</a>

Thiết lập màu liên kết

Bạn có thể đặt màu cho các liên kết, các liên kết đang hoạt động và các liên kết đã truy cập bằng cách sử dụng các thuộc tính link, alinkvlink của thẻ <body>.

Ví dụ, lưu phần sau trong test.htm và mở nó trong bất kỳ trình duyệt web nào để xem các thuộc tính link, alinkvlink hoạt động như thế nào.

Nhấp vào liên kết dưới đây

Hướng dẫn HTML
<!DOCTYPE html>
<html>
   
   <head>
      <title>Ví dụ siêu liên kết</title>
      <base href = "https://learnskill.vn/">
   </head>
	
   <body alink = "#54A250" link = "#040404" vlink = "#F40633">
      <p>Nhấp vào liên kết dưới đây</p>
      <a href = "/html/index.htm" target = "_blank" >Hướng dẫn HTML</a>
   </body>
   
</html>

Liên kết tải xuống

Bạn có thể tạo liên kết văn bản để tải xuống các tệp PDF, DOC hoặc ZIP. Điều này rất đơn giản; bạn chỉ cần cung cấp URL đầy đủ của tệp có thể tải xuống như sau:

<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ siêu liên kết</title>
   </head>
	
   <body>
      <a href = "https://learnskill.vn/pluginfile.php/483/mod_page/content/1/quan_ly_tuc_gian.pdf">Download PDF File</a>
   </body>
	
</html>


Liên kết hình ảnh

Chúng ta đã thấy cách tạo liên kết siêu bằng văn bản và chúng ta cũng học cách sử dụng hình ảnh trong các trang web của mình. Bây giờ, chúng ta sẽ học cách sử dụng hình ảnh để tạo siêu liên kết.

Để sử dụng một hình ảnh làm siêu liên kết. Chúng ta chỉ cần sử dụng một hình ảnh bên trong siêu liên kết tại vị trí của văn bản như hình dưới đây.

Nhấp vào liên kết dưới đây

LearnSkill - học trực tuyến
<!DOCTYPE html>
<html>

   <head>
      <title>Ví dụ siêu liên kết ảnh</title>
   </head>
	
   <body>
      <p>Nhấp vào liên kết dưới đây</p>
      <a href = "https://learnskill.vn" target = "_self"> 
         <img src = "/images/logo.png" alt = "LearnSkill - học trực tuyến" border = "0"/> 
      </a>
   </body>
	
</html>

Liên kết email

Không khó để đặt một liên kết email HTML trên trang web của bạn nhưng nó có thể gây ra vấn đề gửi thư rác không cần thiết cho tài khoản email. Có những người có thể chạy các chương trình để thu thập các loại email này và sau đó sử dụng chúng để gửi thư rác theo nhiều cách khác nhau.

Bạn có thể có một tùy chọn khác để tạo điều kiện cho mọi người gửi email cho bạn. Một tùy chọn là sử dụng các form HTML để thu thập dữ liệu người dùng và sau đó sử dụng tập lệnh PHP hoặc CGI để gửi email.


Thẻ email HTML

Thẻ HTML <a> cung cấp tùy chọn để chỉ định địa chỉ email để gửi email. Khi sử dụng thẻ <a> làm thẻ email, bạn sẽ sử dụng mailto: địa chỉ email cùng với thuộc tính href. Sau đây là cú pháp sử dụng mailto thay vì sử dụng http.

<a href = "mailto: abc@example.com">Gửi Email</a>

Bây giờ, nếu người dùng nhấp vào liên kết Gửi Email, nó sẽ khởi chạy một Ứng dụng Email (như Lotus Notes, Outlook Express, v.v.) được cài đặt trên máy tính của người dùng. Có một rủi ro khác khi sử dụng tùy chọn này để gửi email vì nếu người dùng không cài đặt ứng dụng email trên máy tính của họ thì sẽ không thể gửi email.

Thiết lập mặc định

Bạn có thể chỉ định chủ đề email mặc định và nội dung email cùng với địa chỉ email của mình. Sau đây là ví dụ để sử dụng chủ đề và nội dung mặc định.

<a href = "mailto:abc@example.com?subject = Feedback&body = Message">
Gửi phản hồi
</a>