• Trang chủ
• Hướng dẫn HTML
• Liên kết HTML

Liên kết HTML

Trong hướng dẫn này, bạn sẽ học cách tạo liên kết đến các trang khác bằng HTML.

Tạo liên kết trong HTML

Liên kết hoặc siêu kết nối là một kết nối từ tài nguyên web này sang tài nguyên web khác. Liên kết cho phép người dùng di chuyển liên tục từ trang này sang trang khác, trên bất kỳ máy chủ nào ở bất kỳ đâu trên thế giới.

Một liên kết có hai đầu, được gọi là neo. Liên kết bắt đầu từ mỏ neo nguồn và trỏ đến neo đích, có thể là bất kỳ tài nguyên web nào, ví dụ: hình ảnh, đoạn âm thanh hoặc video, tệp PDF, tài liệu HTML hoặc một phần tử trong chính tài liệu đó, v.v. trên.

Theo mặc định, các liên kết sẽ xuất hiện như sau trong hầu hết các trình duyệt:

• Một liên kết không được truy cập được gạch dưới và màu xanh lam.
• Một liên kết đã truy cập được gạch chân và có màu tím.
• Một liên kết đang hoạt động được gạch chân và có màu đỏ.

Tuy nhiên, bạn có thể thay đổi điều này bằng cách sử dụng CSS. Tìm hiểu thêm về tạo kiểu liên kết .

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

Các liên kết được chỉ định trong HTML bằng cách sử dụng thẻ <a>.

Một liên kết hoặc siêu liên kết có thể là một từ, nhóm từ hoặc hình ảnh.

Bất kỳ thứ gì giữa thẻ <a> mở và thẻ đóng </a> đều trở thành một phần của liên kết mà người dùng nhìn thấy và nhấp vào trong trình duyệt. Dưới đây là một số ví dụ về các liên kết:

<a href="https://www.google.com/">Google Search</a>
<a href="https://vzn.vn/">VZN.vn</a>
<a href="images/logo.jpg">
    <img src="logo-thumb.jpg" alt="logo">
</a>

Thuộc tính href xác định mục tiêu của liên kết. Giá trị của nó có thể là một URL tuyệt đối hoặc tương đối.

Một URL tuyệt đối là URL mà bao gồm tất cả các phần của định dạng URL, chẳng hạn như giao thức, tên máy chủ, và đường dẫn của tài liệu, ví dụ https://www.google.com/, https://www.example.com/contact.php ... Trong khi, các liên kết URL là đường dẫn trang-tương đối, ví dụ contact.html, images/smiley.png, ... Một URL tương đối không bao giờ bao gồm tiền tố http:// hoặc https://.

Đặt mục tiêu cho các liên kết

Thuộc tính target cho trình duyệt nơi để mở tài liệu được liên kết. Có bốn mục tiêu được xác định và mỗi tên mục tiêu bắt đầu bằng một ký tự gạch dưới (_):

• _blank - Mở tài liệu được liên kết trong một cửa sổ hoặc tab mới.
• _parent - Mở tài liệu được liên kết trong cửa sổ mẹ.
• _self- Mở tài liệu được liên kết trong cùng cửa sổ hoặc tab với tài liệu nguồn. Đây là giá trị mặc định, do đó không cần thiết phải chỉ định rõ ràng giá trị này.
• _top - Mở tài liệu được liên kết trong cửa sổ trình duyệt đầy đủ.

Hãy thử ví dụ sau để hiểu cơ bản mục tiêu của liên kết hoạt động như thế nào:

<a href="/about-us.php" target="_top">About Us</a>
<a href="https://www.google.com/" target="_blank">Google</a>
<a href="images/logo.jpg" target="_parent">
    <img src="logo-thumb.jpg" alt="logo">
</a>

Tạo neo đánh dấu

Bạn cũng có thể tạo neo đánh dấu để cho phép người dùng chuyển đến một phần cụ thể của trang web. Dấu trang đặc biệt hữu ích nếu bạn có một trang web rất dài.

Tạo dấu trang là một quy trình gồm hai bước: trước tiên hãy thêm thuộc tính id vào phần tử mà bạn muốn chuyển đến, sau đó sử dụng giá trị thuộc tính id đó trước dấu thăng (#) làm giá trị thuộc tính href của thẻ <a>, như được hiển thị trong ví dụ sau :

<a href="#sectionA">Jump to Section A</a>
<h2 id="sectionA">Section A</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

Tạo liên kết tải xuống

Bạn cũng có thể tạo liên kết tải xuống tệp giống hệt như cách đặt liên kết văn bản. Chỉ cần trỏ URL đích đến tệp bạn muốn có sẵn để tải xuống.

Trong ví dụ sau, chúng tôi đã tạo các liên kết tải xuống cho các tệp ZIP, PDF và JPG.

<a href="downloads/test.zip">Download Zip file</a>
<a href="downloads/masters.pdf">Download PDF file</a>
<a href="downloads/sample.jpg">Download Image file</a>