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.
Liên kết (link) hoặc siêu liên kết (hyperlink) 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ừ điểm neo nguồn và trỏ đến điểm neo đích, có thể là bất kỳ tài nguyên web nào, ví dụ: hình ảnh, âm thanh hoặc video, file PDF, tài liệu HTML hoặc một phần tử trong chính tài liệu đó, v.v.
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:
Tuy nhiên, bạn có thể ghi đè điều này bằng cách sử dụng CSS. Tìm hiểu thêm về tạo kiểu cho liên kết trong CSS.
Các liên kết được định nghĩa 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.
<a href="url">Link text</a>
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 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://www.tutorialrepublic.com/">Tutorial Republic</a>
<a href="images/kites.jpg">
<img src="kites-thumb.jpg" alt="kites">
</a>
Thuộc tính href
xác định đích đến 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/form.php
, v.v. Trong khi, URL tương dối là đường dẫn không có giao thức, tên máy chủ. ví dụ: contact.html
, images/smiley.png
, v.v.
Thuộc tính target
cho trình duyệt biết nơi để mở tài liệu được liên kết. Có bốn target
và tên mỗi target 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ổ cha._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 target 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/sky.jpg" target="_parent">
<img src="sky-thumb.jpg" alt="Cloudy Sky">
</a>
Mẹo: Nếu trang web của bạn được đặt bên trong iframe, bạn có thể sử dụng target="_top"
cho liên kết để thoát ra khỏi iframe và hiển thị trang mục tiêu trong toàn bộ cửa sổ trình duyệt.
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. Neo đánh dấu trang đặc biệt hữu ích nếu bạn có một trang web rất dài.
Tạo neo đánh 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
đó với dấu thăng (#
) ở trước 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>
Mẹo: Bạn thậm chí có thể chuyển đến một phần của trang web khác bằng cách chỉ định URL của trang đó cùng với neo đánh dấu trang (ví dụ#elementId
) trong thuộc tínhhref
, chẳng hạn<a href="mypage.html#topicA">Go to TopicA</a>
.
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ạo liên kết thông thường. Chỉ cần trỏ URL đích đến tệp bạn muố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>
Lưu ý: Khi bạn nhấp vào liên kết trỏ đến tệp PDF hoặc tệp hình ảnh, tệp sẽ không được tải trực tiếp xuống ổ cứng của bạn. Nó sẽ chỉ mở tệp trong trình duyệt web của bạn. Từ đó, bạn có thể lưu hoặc tải nó về ổ cứng của mình để sử dụng thường xuyên.
Bạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.
Trong hướng dẫn này, bạn sẽ học cách sử dụng iframe để hiển thị một trang web trong một trang web khác.
Trong hướng dẫn này, bạn sẽ học cách tạo biểu mẫu trong HTML5 để thu thập thông tin đầu vào của người dùng.
Trong hướng dẫn này, bạn sẽ học cách tạo các loại danh sách khác nhau trong HTML5.
Trong hướng dẫn này, bạn sẽ học cách hiển thị dữ liệu dạng bảng bằng cách sử dụng bảng trong HTML5.