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 : cách tạo siêu kết nối trong html

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  Cách tạo ứng dụng Todo List với JavaScript - cách tạo một ứng dụng danh sách việc cần làm bằng javascript

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”.

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.

Xem Thêm  Xây dựng một Form liên hệ Bootstrap Sử dụng PHP và AJAX - ajax trong php

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.

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ủ đề cách tạo siêu liên kết trong html

4. HTML, CSS and JavaScript: Hyperlinks

alt

  • Tác giả: Computer Science
  • Ngày đăng: 2019-03-29
  • Đánh giá: 4 ⭐ ( 9558 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: This is the fourth in a series of computer science videos about creating a web page by combining HTML, CSS and JavaScript. It covers the use of the anchor tag to define a hyperlink on a web page. It shows how the href attribute of the anchor tag can be used to specify a link to another web page within the same web site, or to a page on an external website by means of a uniform resource locator (URL).
Xem Thêm  Tạo cơ sở dữ liệu trong SQL Server - cách tạo cơ sở dữ liệu sql

Cách Tạo Liên Kết Nội Trong Html, Cú Pháp, Ví Dụ Minh Họa, Cách Tạo Một Cái Liên Kết (Link) Trong Html

  • Tác giả: erosy.vn
  • Đánh giá: 4 ⭐ ( 8985 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn có thể thấy liên kết xuất hiện trên hầu hết tất cả các website, Liên kết cho phép người dùng chuyển từ trang này tới một trang khác

Cách để Tạo liên kết email trong HTML

  • Tác giả: www.wikihow.vn
  • Đánh giá: 5 ⭐ ( 2787 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách để Tạo liên kết email trong HTML. Người truy cập sẽ có trải nghiệm tuyệt vời nếu họ có thể dễ dàng liên lạc với bạn về bất kỳ mối bận tâm hay câu hỏi nào nảy ra trong quá trình xem website. Đây hẳn là một tính năng làm tăng giá trị…

Thẻ Tạo Link Liên Kết Trong HTML

  • Tác giả: nguyenhung.net
  • Đánh giá: 4 ⭐ ( 4036 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ a trong HTML – Thẻ tạo link liên kết trong HTML. Bài viết sẽ hướng dẫn cho bạn chi tiết nhất về thẻ a trong HTML cũng như cách dùng nó khi làm web.

Liên kết trong HTML5

  • Tác giả: comdy.vn
  • Đánh giá: 5 ⭐ ( 6639 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.

Siêu liên kết trong HTML

  • Tác giả: toidicode.com
  • Đánh giá: 3 ⭐ ( 7741 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: -Bạn có bao giờ thắc mắc: tại sao bạn vào được trang này, có phải bạn đã click vào 1 siêu liên kết nào đó không? Thì hôm nay mình xin giới thiệu cho mọi người về siêu liên kết trong HTML nhé!

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á: 4 ⭐ ( 5201 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é.

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