Hướng dẫn hướng dẫn về siêu liên kết HTML, thảo luận về cách tạo liên kết HTML hợp lệ, liên kết email, liên kết nhảy với các thuộc tính khác nhau.

Bạn đang xem : html tạo siêu kết nối

Một trong những điều thú vị nhất về HTML là khả năng liên kết với các tài liệu khác cũng như các tệp.

Khi bạn liên kết đến các trang có liên quan và trích dẫn các nguồn trong tài liệu web, bạn làm cho tài liệu trở nên hữu ích và hữu ích hơn.

Chèn liên kết vào các trang HTML hoàn toàn không phải là một việc khó thực hiện.

Các yêu cầu duy nhất để có thể liên kết đến một thứ gì đó trong HTML không quá nhiều mà chỉ cần một vài điều…

  1. URL hoặc địa chỉ Web của tham chiếu
  2. Kiến thức về cách sử dụng thẻ liên kết HTML

Tham chiếu có thể là bất kỳ thứ gì từ trang web đến tệp đa phương tiện như hình ảnh, địa chỉ email, tài liệu PDF, v.v.

Tiếp theo là phần sơ lược về các cách sử dụng thẻ liên kết HTML khác nhau để tạo siêu liên kết.

Hướng dẫn nhanh về siêu liên kết HTML

Giả sử URL của trang bạn muốn liên kết là w3bits.com/guides/hyperlinks/. Hãy tạo một siêu liên kết đến trang này với một nhãn đẹp hoặc văn bản liên kết.

  & lt; a href = "http://w3bits.com/guides/hyperlinks/" & gt; Siêu liên kết HTML & lt; / a & gt;  

Và thế là xong!

HTML ở trên là tất cả những gì chúng ta cần để thiết lập siêu liên kết HTML đầu tiên của mình. Bất cứ khi nào chúng tôi tạo một liên kết như vậy, chúng tôi phải đảm bảo rằng phần URL nằm bên trong thuộc tính href của thẻ liên kết.

Để làm cho các siêu liên kết của chúng tôi không còn tồn tại trong tương lai, chúng tôi có thể loại bỏ phần http / https khỏi URL khi liên kết:

  & lt; a href = "// w3bits.com/guides/hyperlinks/">HTML Siêu liên kết & lt; / a & gt;  

Điều này sẽ giải quyết sự bất tiện do xung đột chuyển hướng không phải https gây ra trong tương lai. Hãy tiến xa hơn và đề cập đến một vài cách sử dụng nâng cao hơn của siêu liên kết trong HTML.

Tạo một liên kết mở trong một tab mới

Một thực tế phổ biến trên web là mở các liên kết trong tab mới bất cứ khi nào cần. Có một thuộc tính tuyệt vời này mang lại cho bạn khả năng tương tự với các siêu liên kết HTML.

  & lt; a href = "// w3bits.com/guides/hyperlinks/"  target = "_ blank"  & gt; Mở hướng dẫn siêu liên kết trong tab mới & lt; / a & gt;  

Lưu ý : Bất cứ khi nào bạn sử dụng target = "_ blank" với các liên kết của mình, hãy đảm bảo rằng bạn cũng thêm thuộc tính mối quan hệ noreferrer và noopener . Điều này giúp mọi thứ an toàn khỏi quá trình khai thác API window.opener.

Xem Thêm  Google Java Style Guide - static method trong java

Liên kết nhảy

Nếu trước đây bạn đã nhìn thấy các liên kết đến các phần khác nhau trên cùng một trang HTML, thì bạn biết chúng ta đang nói về điều gì. Dưới đây là hai điều cần tuân theo để liên kết đến một phần cụ thể của trang.

  1. Cung cấp ID cho mục tiêu, tức là phần cụ thể của chúng tôi
  2. Chuyển ID này (có tiền tố là ký hiệu ‘#’) làm tham chiếu đến liên kết nhảy

Dưới đây là một cách triển khai nhanh chóng của cùng một, trước tiên là với phần mục tiêu…

  & lt; p id = "para1" & gt; Đây là phần mục tiêu của chúng tôi # 1. & lt; / p & gt;  

Và trình kích hoạt, tức là liên kết nhảy của chúng tôi để nhắm mục tiêu phần mà chúng tôi vừa khai báo ở trên. Liên kết này là bản trình diễn trực tiếp của liên kết nhảy.

  & lt; a href = "# para1" & gt; Đi tới Phần # 1 & lt; / a & gt;  

Liên kết đến địa chỉ email

Rất dễ dàng để liên kết với đa phương tiện như hình ảnh, video, âm thanh, tài liệu. Những gì chúng tôi phải làm là lưu trữ chúng ở đâu đó trên web và lấy URL từ đó.

  & lt; a href = "https: //path/to/the/document.pdf" & gt; Siêu liên kết HTML & lt; / a & gt;  

Có một chút khác biệt để làm điều tương tự đối với một địa chỉ email. Nếu tôi muốn mọi người nhấp vào liên kết để gửi email cho tôi, thì điều đó có thể đạt được bằng cách này…

  & lt; a href = "mailto: admin@w3bits.com" & gt; Gửi email cho tôi & lt; / a & gt;  

Đánh dấu trên tạo một liên kết mà khi được nhấp vào sẽ mở ứng dụng email (ví dụ: Outlook, Apple Mail, v.v.) với admin@w3bits.com trong trường “Tới”.

Xem Thêm  JavaScript getElementsByName () - tài liệu lấy phần tử theo tên

Siêu liên kết HTML: Liên kết địa chỉ email

Nhưng cũng có trường chủ đề bên dưới trường “Tới”. Chắc chắn rồi, hãy thêm chủ đề vào liên kết email.

  & lt; a href = "mailto: admin@w3bits.com? subject = Want% 20to% 20say% 20hello!" & gt; Gửi email cho tôi & lt; / a & gt;  

Đó là gì % 20 đang làm gì trong chủ đề ngọt ngào của chúng tôi? Như bạn có thể đã biết, URL mã hóa khoảng trắng để đảm bảo an toàn khi truyền dữ liệu. % 20 đó chỉ là các ký tự khoảng trắng được mã hóa.

Cc? Bcc? Chắc chắn rồi.

  & lt; a href = "mailto: admin@w3bits.com? subject = Want% 20to% 20say% 20hello! & amp; cc=w3bits@gmail.com& bcc = c99.rahul @ gmail.com "& gt; Gửi email cho tôi & lt; / a & gt;  

Trông có vẻ xấu xí, nhưng thực hiện công việc theo cách bạn muốn. Tại sao không thêm nội dung cho tin nhắn?

  & lt; a href = "mailto: admin@w3bits.com? subject = Want% 20to% 20say% 20hello! & amp; cc=w3bits@gmail.com& bcc = c99.rahul @ gmail.com & amp; body = Stopping% 20by% 20to% 20say% 20hello! "& gt; Gửi email cho tôi & lt; / a & gt;  

Siêu liên kết HTML: Liên kết địa chỉ email với nội dung thư Thật tuyệt phải không ?

Thuộc tính quan hệ của siêu liên kết HTML

Các trình thu thập thông tin của công cụ tìm kiếm ngày nay yêu cầu quản trị viên web chỉ định một điều cụ thể về siêu liên kết. Đây là mối quan hệ của URL được liên kết với tài liệu chứa nó.

Và đây là nơi mà thuộc tính quan hệ của siêu liên kết HTML xuất hiện trong bức tranh. Nó cho phép bạn thông báo cho các trình thu thập dữ liệu Web…

  1. Có theo dõi hay không hoặc xem xét hoặc đánh giá một liên kết (rel = "nofollow")
  2. Nếu liên kết là bên ngoài (rel = "external")
  3. Có ngăn thông tin liên kết giới thiệu chuyển đến trang web mục tiêu hay không ( rel = "noreferrer noopener" )

Đây là cách bạn tạo một liên kết bên ngoài với sự trợ giúp của các thuộc tính target và rel, các thuộc tính này cũng không được theo dõi bởi các trình thu thập thông tin tìm kiếm:

  & lt; a href = "// w3bits.com/guides/hyperlinks/" target = "_ blank" rel = "nofollow external noreferrer noopener" & gt; Triển khai siêu liên kết thuộc tính 'rel' & lt; / a & gt;  

Chúng tôi có thể làm một số việc khác với siêu liên kết HTML, cũng bao gồm cả việc sử dụng JavaScript. Để đơn giản hóa mọi thứ, hãy lưu lại để xem một hướng dẫn khác trong tương lai.

Xem Thêm  Ba cách để tải động nội dung HTML vào một trang web - tải html vào html

Cho đến lúc đó, hãy kết bạn với tất cả các tính năng siêu liên kết HTML đã thảo luận ở trên.

Chúc mọi điều tốt đẹp!


Xem thêm những thông tin liên quan đến chủ đề html tạo siêu liên kết

Adding Hyperlinks – HTML Tutorial

alt

  • Tác giả: UrbanGraphixInc
  • Ngày đăng: 2011-07-09
  • Đánh giá: 4 ⭐ ( 3790 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video I will be showing you how to make hyperlinks in HTML. Please like favorite and subscribe. It really helps me out also please comment and help give me feed back.

    From now I will post HTML tutorials about 2-4 minutes long showing you how to do some small features of coding.

Liên kết trong HTML

  • Tác giả: webvn.com
  • Đánh giá: 5 ⭐ ( 5301 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ví dụ và cách sử dụng liên kết trong HTML.

One moment, please…

  • Tác giả: thegioiphp.com
  • Đánh giá: 4 ⭐ ( 5801 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

One moment, please…

  • Tác giả: www.dammio.com
  • Đánh giá: 5 ⭐ ( 8516 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hướng dẫn chi tiết cách dùng thẻ a trong HTML tạo siêu liên kết

  • Tác giả: gitiho.com
  • Đánh giá: 5 ⭐ ( 3043 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn chi tiết, chính xác nhất về cách dùng thẻ a trong HTML để tạo siêu liên kết (Hyperlink). Hãy cùng tìm hiểu ngay để biết thêm một kỹ năng viết code HTML nhé.

[Tự học HTML] Liên kết(Link) trong HTML

  • Tác giả: cafedev.vn
  • Đánh giá: 3 ⭐ ( 9470 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cafedev chia sẻ về Liên kết được tìm thấy trong gần như tất cả các trang web. Liên kết cho phép người dùng nhấp theo cách của họ từ trang này sang trang khác.

Liên kết trong HTML5

  • Tác giả: comdy.vn
  • Đánh giá: 3 ⭐ ( 3703 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 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.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php