Hyperlink là gì So sánh Hyperlink và Link trong HTML

Hyperlink là gì? So sánh Hyperlink và Link trong HTML

Anh NguyễnLeave a comment

Trong bài viết này, chúng ta sẽ tìm hiểu Hyperlink là gì và cùng nhau so sánh sự khác biệt giữa Hyperlink và Link trong HTML.

Hãy bắt đầu với một câu hỏi nhanh: Bạn đến với bài viết này và trang web này ngày hôm nay bằng cách nào? Chà, theo đúng nghĩa đen, bằng cách nhấp hoặc nhấn vào một Link, phải không? Đó là sức mạnh của yếu tố này – nó sẽ đưa bạn đến bất kỳ phần nào của Internet chỉ bằng cách 1 cú nhấp chuột vào một Link.

Hyperlink là gì So sánh Hyperlink và Link trong HTML

Link là gì?

Link là một chuỗi kết nối các trang trong cả một trang web và với các trang web khác. Nếu không có Link, chúng ta sẽ không có bất kỳ trang web nào.

Ví dụ, hãy xem URL này https://www.hocjavascript.net. Khi bạn nhập nó vào thanh địa chỉ, nó sẽ đưa bạn đến trang web có rất nhiều thông tin về các bài viết JavaScript.

Nói một cách đơn giản hơn, chúng ta có thể nói Link chỉ là địa chỉ web của trang web cho phép bạn kết nối với các máy chủ khác nhau.

Hyperlink là gì?

Có lẽ bạn đang tự hỏi, Hyperlink là gì? Chà, chúng là những gì cho phép bạn liên kết tài liệu này với các tài liệu khác hoặc tài nguyên khác thông qua các lần lặp lại được gọi là “thẻ <a>”. Đó là một khái niệm cơ bản đằng sau World Wide Web giúp điều hướng giữa các trang web dễ dàng hơn thông qua các Link.

Các Hyperlink có thể được trình bày ở các dạng khác nhau, như hình ảnh, biểu tượng, văn bản hoặc bất kỳ loại phần tử hiển thị nào, khi được nhấp vào, sẽ chuyển hướng bạn đến một URL được chỉ định.

Ví dụ: nếu bạn nhấp vào ĐÂY, bạn sẽ đến trang web của mình với danh sách các bài viết khác. Đó là một Hyperlink.

Hyperlink là gì So sánh Hyperlink và Link trong HTML

Cách tạo Link trong HTML

Bạn có thể tạo một liên kết cơ bản bằng cách bao bọc văn bản (hoặc bất kỳ nội dung liên quan nào khác) trong <a></a> phần tử và sử dụng href thuộc tính có chứa địa chỉ.

Đây là một ví dụ thực tế:

<a href="https://hocjavascript.net/">Visit: Học JavaScript!</a>Code language: HTML, XML (xml)

Thường có các Link được chèn trong .html tệp để liên kết chính đến tệp kiểu dáng và độ bền. Và chúng thường được đặt tên với phần mở rộng tệp .css và .js.

Đây là cách để Link đến một tệp CSS:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>Code language: HTML, XML (xml)

Và đây là cách để Link đến một tệp JS. Bạn có thể đặt những gì bạn muốn được Links trong thẻ head hoặc body.

<!DOCTYPE html>
<html>
<head>
  <script src="myScript.js"></script>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>Code language: HTML, XML (xml)

Làm thế nào để Link trong một trang web

Link đến trang khác trong một trang web

Bạn sử dụng loại Link này để hướng người dùng đến các trang khác nhau trên cùng một trang web.

Lấy trường hợp trang web của bạn có 5 trang. Bạn sẽ muốn người dùng có thể truy cập tất cả các trang từ một điểm, chẳng hạn như thanh điều hướng.

Đầu tiên, bạn sẽ phải tạo tất cả các trang và sau đó liên kết chúng. Trong trường hợp này, chúng ta sẽ làm như thế này:

<nav>
    <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="pricing.html">Pricing</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>Code language: HTML, XML (xml)

Ví dụ trên sẽ có Link đến các phần khác nhau của trang web – trang ‘Home’, ‘Service’, ‘Pricing’ và ‘About’, theo thứ tự đó. Chỉ ghi tên của tệp là đủ vì tất cả công việc được chia sẻ trong cùng một thư mục công việc.

Cách để Link đến một phần cụ thể của một trang web

Giả sử rằng, ở đâu đó trên trang web của bạn, bạn đã đề cập đến một chủ đề hoặc trang cụ thể. Và bạn muốn người đọc hoặc khách truy cập của mình chuyển thẳng đến phần đó bằng một cú nhấp chuột.

Đầu tiên, bạn sẽ phải thêm id thuộc tính vào phần đó của trang. Có thể nó là một đoạn văn – nếu vậy, đây là cách nó sẽ trông như thế này:

<p id="detailed-info"> Read more on Upcoming Events </p>Code language: HTML, XML (xml)

Sau đó, trong Link của bạn, hãy thêm id vào href:

<a href="#detailed-info"> Read more about upcoming events </a>Code language: HTML, XML (xml)

Đoạn code này sẽ đưa bạn đến phần Upcoming Events .

Các loại Link khác trong HTML

Cách để Link đến tệp có thể tải xuống

Khi bạn muốn để Link đến tài nguyên mà người dùng cần tải xuống thay vì mở trong trình duyệt, bạn có thể sử dụng download thuộc tính. Điều này cung cấp một tên tệp lưu mặc định.

Thuộc tính tải xuống rất tốt cho các tệp PDF, tệp hình ảnh, video và clip âm thanh cũng như nội dung đa phương tiện khác mà bạn muốn người dùng lưu trên máy tính hoặc thiết bị di động của họ.

Đây là một ví dụ với Link tải xuống:

<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
   download="firefox-latest-64bit-installer.exe">
  Download Latest Firefox for Windows (64-bit) (English, US)
</a>Code language: HTML, XML (xml)

Link trong Email cho phép chúng ta tạo các Hyperlink đến một địa chỉ email. Bạn có thể tạo Links này bằng <a></a> thẻ HTML – nhưng trong trường hợp này, thay vì chuyển URL, chúng ta chuyển địa chỉ email của người nhận.

Bạn sử dụng mailto thuộc tính để chỉ định địa chỉ email trong thẻ liên kết của mình.

Ví dụ:

<a href="mailto:[email protected]">Send email to Me</a>Code language: HTML, XML (xml)

Ngoài địa chỉ email, bạn có thể cung cấp các thông tin khác. Trên thực tế, bất kỳ trường tiêu đề thư chuẩn nào cũng có thể được thêm vào mailto URL bạn cung cấp. Thường được sử dụng nhất là “chủ đề”, “cc” và “nội dung”.

Dưới đây là một ví dụ bao gồm cc, bcc, chủ đề và nội dung:

<a href="mailto:[email protected][email protected]&[email protected]&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>Code language: HTML, XML (xml)

Thuộc tính Link trong HTML

Hyperlink là gì So sánh Hyperlink và Link trong HTML

Link trong HTML có nhiều thuộc tính khác nhau mà bạn có thể sử dụng để cung cấp thêm thông tin đặc biệt. Dưới đây là một số thông dụng nhất được sử dụng.

  1. href thuộc tính
    Các href thuộc tính xác định địa chỉ URL mục tiêu cho một Link trong HTML. Nó làm cho từ hoặc cụm từ được đánh dấu có thể nhấp được. Thuộc tính href tạo ra một Hyperlink đến một trang web khác và Links trong HTML sẽ không hoạt động như dự định nếu không có nó.
  2. target thuộc tính
    Các target định nghĩa thuộc tính nơi Links trong HTML sẽ được mở ra. Bạn đã bao giờ truy cập một trang web và khi bạn nhấp vào một Link, nó sẽ tự động mở ra trong một tab mới? Đó là công việc của thuộc tính này.

Dưới đây là tất cả các tùy chọn khả thi mà bạn có thể sử dụng với target thuộc tính:

  • _blank => Mở Link trong tab mới. Chủ yếu được sử dụng để tránh mất khách truy cập trang web. Theo mặc định, khi người dùng nhấp vào một Link, liên kết đó sẽ mở ra trong cùng một tab – nhưng điều này sẽ thay đổi điều đó.
<a href= "https://hocjavascript.net/" target="_blank"> Học JavaScript</a>Code language: HTML, XML (xml)
  • _self => Tải URL trong cùng một cửa sổ hoặc tab nơi nó được nhấp vào. Đây thường là mặc định và không cần chỉ định.
<a href= "https://hocjavascript.net/" target="_self"> Học JavaScript</a>Code language: HTML, XML (xml)
  • _parent => Tải URL trong khung chính. Nó chỉ được sử dụng với khung.
<a href= "https://hocjavascript.net/" target="_parent"> Học JavaScript</a>Code language: HTML, XML (xml)
  • _top => Tải tài liệu được liên kết trong toàn bộ phần thân của cửa sổ.
<a href= "https://hocjavascript.net/" target="_top"> Học JavaScript</a>Code language: HTML, XML (xml)
  1. title thuộc tính
    Các title thuộc tính phác thảo thông tin thêm về mục đích của Link. Nếu người dùng di chuột qua Link, tooltip sẽ xuất hiện mô tả mục tiêu, tiêu đề hoặc bất kỳ thông tin nào khác về Link:
<a href="https://hocjavascript.net/" title="Link to free learning Resources">Learn to code</a>
Code language: HTML, XML (xml)

Mẹo HTML Link

Trong bài viết này, chúng ta đã tìm hiểu tất cả về Link và Hyperlink là gì trong HTML. Dưới đây là một số mẹo để giúp bạn làm việc với Link nhanh hơn.

Khi bạn đang sử dụng một hình ảnh làm Link, bạn nên thêm alt vào cái thẻ đó để hiển thị trong trường hợp ảnh không tải được.

Web thực sự chỉ là một thư viện các tài liệu Hyperlink nơi thẻ Link đóng vai trò là cầu nối giữa các tài liệu liên quan.

Kết luận

Mình đã giúp bạn hiểu được Hyperlink là gì, cách sử dụng Link và cách tạo chúng cũng như lý do tại sao chúng lại quan trọng trong việc lập trình web.

Đã đến lúc luyện tập và hoàn thiện kỹ năng mới của bạn.

Enjoy Coding ❤

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/PHP/.NET TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG

Leave a Reply

Your email address will not be published. Required fields are marked *