Hướng dẫn how do i make a hyperlink in html? - làm cách nào để tạo một siêu liên kết trong html?

  • Trước
  • Tổng quan: Giới thiệu về HTML
  • Tiếp theo

Siêu liên kết thực sự quan trọng - chúng là những gì làm cho web trở thành một trang web. Bài viết này cho thấy cú pháp cần thiết để tạo một liên kết và thảo luận về các thực tiễn tốt nhất liên kết.

Show

Siêu liên kết là gì?

Siêu liên kết là một trong những đổi mới thú vị nhất mà Web cung cấp. Chúng là một tính năng của web ngay từ đầu và là điều làm cho web trở thành một trang web. Siêu liên kết cho phép chúng tôi liên kết các tài liệu với các tài liệu hoặc tài nguyên khác, liên kết đến các phần cụ thể của tài liệu hoặc cung cấp ứng dụng tại một địa chỉ web. Hầu như bất kỳ nội dung web nào cũng có thể được chuyển đổi thành một liên kết để khi được nhấp hoặc kích hoạt, trình duyệt web sẽ chuyển đến một địa chỉ web khác (URL).

Lưu ý: Một URL có thể trỏ đến các tệp HTML, tệp văn bản, hình ảnh, tài liệu văn bản, tệp video và âm thanh hoặc bất cứ điều gì khác sống trên web. Nếu trình duyệt web không biết cách hiển thị hoặc xử lý tệp, nó sẽ hỏi bạn nếu bạn muốn mở tệp (trong trường hợp đó, nhiệm vụ mở hoặc xử lý tệp được chuyển cho một ứng dụng gốc phù hợp trên thiết bị) hoặc tải xuống tệp (trong trường hợp đó bạn có thể cố gắng đối phó với nó sau này). A URL can point to HTML files, text files, images, text documents, video and audio files, or anything else that lives on the Web. If the web browser doesn't know how to display or handle the file, it will ask you if you want to open the file (in which case the duty of opening or handling the file is passed to a suitable native app on the device) or download the file (in which case you can try to deal with it later on).

Ví dụ, trang chủ của BBC chứa nhiều liên kết không chỉ vào nhiều câu chuyện tin tức, mà còn các khu vực khác nhau của trang web (chức năng điều hướng), trang đăng nhập/đăng ký (công cụ người dùng) và hơn thế nữa.

Hướng dẫn how do i make a hyperlink in html? - làm cách nào để tạo một siêu liên kết trong html?

Giải phẫu của một liên kết

Một liên kết cơ bản được tạo bằng cách gói văn bản hoặc nội dung khác, xem các liên kết cấp khối, bên trong phần tử

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
5 và sử dụng thuộc tính
<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
6, còn được gọi là tham chiếu siêu văn bản hoặc mục tiêu, chứa địa chỉ web.Hypertext Reference, or target, that contains the web address.

<p>
  I'm creating a link to
  <a href="https://www.mozilla.org/en-US/">the Mozilla homepagea>.
p>

Điều này cho chúng ta kết quả sau:

Tôi đang tạo một liên kết đến trang chủ Mozilla.

Thêm thông tin hỗ trợ với thuộc tính tiêu đề

Một thuộc tính khác mà bạn có thể muốn thêm vào các liên kết của mình là

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
7. Tiêu đề chứa thông tin bổ sung về liên kết, chẳng hạn như loại thông tin mà trang chứa hoặc những điều cần biết trên trang web.

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>

Điều này cho chúng ta kết quả sau đây và di chuột qua liên kết hiển thị tiêu đề dưới dạng công cụ:

Tôi đang tạo một liên kết đến trang chủ Mozilla.

Thêm thông tin hỗ trợ với thuộc tính tiêu đề A link title is only revealed on mouse hover, which means that people relying on keyboard controls or touchscreens to navigate web pages will have difficulty accessing title information. If a title's information is truly important to the usability of the page, then you should present it in a manner that will be accessible to all users, for example by putting it in the regular text.

Điều này cho chúng ta kết quả sau đây và di chuột qua liên kết hiển thị tiêu đề dưới dạng công cụ:

  • Lưu ý: Một tiêu đề liên kết chỉ được tiết lộ trên chuột di chuột, điều đó có nghĩa là mọi người dựa vào điều khiển bàn phím hoặc màn hình cảm ứng để điều hướng các trang web sẽ gặp khó khăn trong việc truy cập thông tin tiêu đề. Nếu thông tin của một tiêu đề thực sự quan trọng đối với khả năng sử dụng của trang, thì bạn nên trình bày nó theo cách có thể truy cập được cho tất cả người dùng, ví dụ bằng cách đặt nó vào văn bản thông thường.
  • Học tập tích cực: Tạo liên kết ví dụ của riêng bạn
  • Tạo một tài liệu HTML bằng Trình chỉnh sửa mã cục bộ của bạn và mẫu bắt đầu của chúng tôi.

Bên trong thân HTML, thêm một hoặc nhiều đoạn văn hoặc các loại nội dung khác mà bạn đã biết.

Thay đổi một số nội dung thành các liên kết.

Bao gồm các thuộc tính tiêu đề.

Liên kết cấp khối You'll find out more about using images on the Web in a future article.

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>

Lưu ý: Bạn sẽ tìm hiểu thêm về việc sử dụng hình ảnh trên web trong một bài viết trong tương lai.

Một đoạn mồi nhanh trên URL và đường dẫn

Hướng dẫn how do i make a hyperlink in html? - làm cách nào để tạo một siêu liên kết trong html?

Để hiểu đầy đủ các mục tiêu liên kết, bạn cần hiểu các URL và đường dẫn tệp. Phần này cung cấp cho bạn thông tin bạn cần để đạt được điều này.root of this directory structure is called

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
1. When working locally with a website, you'll have one directory that contains the entire site. Inside the root, we have an
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
2 file and a
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
3. In a real website,
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
2 would be our home page or landing page (a web page that serves as the entry point for a website or a particular section of a website.).

URL hoặc Trình định vị tài nguyên thống nhất là một chuỗi văn bản xác định vị trí của một cái gì đó trên web. Ví dụ, trang chủ tiếng Anh của Mozilla được đặt tại

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
0.

  • URL sử dụng đường dẫn để tìm tệp. Các đường dẫn chỉ định nơi tệp bạn quan tâm nằm trong hệ thống tập tin. Chúng ta hãy xem một ví dụ về cấu trúc thư mục, xem thư mục tạo hyperlinks.: If you wanted to include a hyperlink inside
    <a href="https://www.mozilla.org/en-US/">
      <img src="mozilla-image.png" alt="Mozilla homepage" />
    a>
    
    2 (the top level
    <a href="https://www.mozilla.org/en-US/">
      <img src="mozilla-image.png" alt="Mozilla homepage" />
    a>
    
    2) pointing to
    <a href="https://www.mozilla.org/en-US/">
      <img src="mozilla-image.png" alt="Mozilla homepage" />
    a>
    
    3, you would specify the filename that you want to link to, because it's in the same directory as the current file. The URL you would use is
    <a href="https://www.mozilla.org/en-US/">
      <img src="mozilla-image.png" alt="Mozilla homepage" />
    a>
    
    3:

    <p>
      Want to contact a specific staff member? Find details on our
      <a href="contacts.html">contacts pagea>.
    p>
    

  • Di chuyển xuống các thư mục con: Nếu bạn muốn bao gồm một siêu liên kết bên trong
    <a href="https://www.mozilla.org/en-US/">
      <img src="mozilla-image.png" alt="Mozilla homepage" />
    a>
    
    2 (cấp cao nhất
    <a href="https://www.mozilla.org/en-US/">
      <img src="mozilla-image.png" alt="Mozilla homepage" />
    a>
    
    2) trỏ đến
    <p>
      Want to contact a specific staff member? Find details on our
      <a href="contacts.html">contacts pagea>.
    p>
    
    7, bạn sẽ cần đi vào thư mục
    <a href="https://www.mozilla.org/en-US/">
      <img src="mozilla-image.png" alt="Mozilla homepage" />
    a>
    
    6 trước khi chỉ ra tệp bạn muốn liên kết. Điều này được thực hiện bằng cách chỉ định tên của thư mục, sau đó là một dấu gạch chéo phía trước, sau đó là tên của tệp. URL bạn sẽ sử dụng là
    <p>
      Want to contact a specific staff member? Find details on our
      <a href="contacts.html">contacts pagea>.
    p>
    
    7:
    : If you wanted to include a hyperlink inside
    <a href="https://www.mozilla.org/en-US/">
      <img src="mozilla-image.png" alt="Mozilla homepage" />
    a>
    
    2 (the top level
    <a href="https://www.mozilla.org/en-US/">
      <img src="mozilla-image.png" alt="Mozilla homepage" />
    a>
    
    2) pointing to
    <p>
      Want to contact a specific staff member? Find details on our
      <a href="contacts.html">contacts pagea>.
    p>
    
    7, you would need to go down into the
    <a href="https://www.mozilla.org/en-US/">
      <img src="mozilla-image.png" alt="Mozilla homepage" />
    a>
    
    6 directory before indicating the file you want to link to. This is done by specifying the directory's name, then a forward slash, then the name of the file. The URL you would use is
    <p>
      Want to contact a specific staff member? Find details on our
      <a href="contacts.html">contacts pagea>.
    p>
    
    7:

    <p>Visit my <a href="projects/index.html">project homepagea>.p>
    

  • Di chuyển trở lại vào các thư mục phụ huynh: Nếu bạn muốn bao gồm một siêu liên kết bên trong
    <p>
      Want to contact a specific staff member? Find details on our
      <a href="contacts.html">contacts pagea>.
    p>
    
    7 chỉ vào
    <p>Visit my <a href="projects/index.html">project homepagea>.p>
    
    1, bạn sẽ phải đi lên một cấp độ thư mục, sau đó quay lại thư mục
    <p>Visit my <a href="projects/index.html">project homepagea>.p>
    
    2. Để đi lên một thư mục, sử dụng hai dấu chấm -
    <p>Visit my <a href="projects/index.html">project homepagea>.p>
    
    3 - vì vậy URL bạn sẽ sử dụng là
    <p>Visit my <a href="projects/index.html">project homepagea>.p>
    
    4:
    : If you wanted to include a hyperlink inside
    <p>
      Want to contact a specific staff member? Find details on our
      <a href="contacts.html">contacts pagea>.
    p>
    
    7 pointing to
    <p>Visit my <a href="projects/index.html">project homepagea>.p>
    
    1, you'd have to go up a directory level, then back down into the
    <p>Visit my <a href="projects/index.html">project homepagea>.p>
    
    2 directory. To go up a directory, use two dots —
    <p>Visit my <a href="projects/index.html">project homepagea>.p>
    
    3 — so the URL you would use is
    <p>Visit my <a href="projects/index.html">project homepagea>.p>
    
    4:

    <p>A link to my <a href="../pdfs/project-brief.pdf">project briefa>.p>
    

Lưu ý: Bạn có thể kết hợp nhiều trường hợp của các tính năng này thành các URL phức tạp, nếu cần, ví dụ:

<p>Visit my <a href="projects/index.html">project homepagea>.p>
5. You can combine multiple instances of these features into complex URLs, if needed, for example:
<p>Visit my <a href="projects/index.html">project homepagea>.p>
5.

Tài liệu mảnh vỡ

Có thể liên kết đến một phần cụ thể của tài liệu HTML, được gọi là đoạn tài liệu, thay vì chỉ lên đầu tài liệu. Để làm điều này, trước tiên bạn phải gán một thuộc tính

<p>Visit my <a href="projects/index.html">project homepagea>.p>
6 cho phần tử bạn muốn liên kết đến. Thông thường có ý nghĩa khi liên kết với một tiêu đề cụ thể, vì vậy điều này sẽ trông giống như sau:document fragment, rather than just to the top of the document. To do this you first have to assign an
<p>Visit my <a href="projects/index.html">project homepagea>.p>
6 attribute to the element you want to link to. It normally makes sense to link to a specific heading, so this would look something like the following:

<h2 id="Mailing_address">Mailing addressh2>

Sau đó, để liên kết đến

<p>Visit my <a href="projects/index.html">project homepagea>.p>
6 cụ thể đó, bạn sẽ bao gồm nó ở cuối URL, trước đó là ký hiệu băm/pound (
<p>Visit my <a href="projects/index.html">project homepagea>.p>
8), ví dụ::

<p>
  Want to write us a letter? Use our
  <a href="contacts.html#Mailing_address">mailing addressa>.
p>

Bạn thậm chí có thể sử dụng tham chiếu đoạn tài liệu của riêng mình để liên kết đến một phần khác của tài liệu hiện tại:

<p>
  The <a href="#Mailing_address">company mailing addressa> can be found at the
  bottom of this page.
p>

URL tuyệt đối so với tương đối

Hai thuật ngữ bạn sẽ gặp trên web là URL tuyệt đối và URL tương đối:absolute URL and relative URL:

URL tuyệt đối: trỏ đến một vị trí được xác định bởi vị trí tuyệt đối của nó trên web, bao gồm giao thức và tên miền. Ví dụ: nếu trang

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
2 được tải lên thư mục gọi là
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
6 nằm bên trong gốc của máy chủ web và tên miền của trang web là
<p>A link to my <a href="../pdfs/project-brief.pdf">project briefa>.p>
1, trang sẽ có sẵn tại cho một trang đích như
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
2 để tải nếu nó không được chỉ định trong URL.)
: Points to a location defined by its absolute location on the web, including protocol and domain name. For example, if an
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
2 page is uploaded to a directory called
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
6 that sits inside the root of a web server, and the website's domain is
<p>A link to my <a href="../pdfs/project-brief.pdf">project briefa>.p>
1, the page would be available at
<p>A link to my <a href="../pdfs/project-brief.pdf">project briefa>.p>
2 (or even just
<p>A link to my <a href="../pdfs/project-brief.pdf">project briefa>.p>
3, as most web servers just look for a landing page such as
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
2 to load if it isn't specified in the URL.)

Một URL tuyệt đối sẽ luôn chỉ vào cùng một vị trí, bất kể nó được sử dụng ở đâu.

URL tương đối: Chỉ vào một vị trí liên quan đến tệp bạn đang liên kết, giống như những gì chúng tôi đã xem xét trong phần trước. Ví dụ: nếu chúng tôi muốn liên kết từ tệp ví dụ của chúng tôi tại

<p>A link to my <a href="../pdfs/project-brief.pdf">project briefa>.p>
2 với tệp PDF trong cùng một thư mục, URL sẽ chỉ là tên tệp -
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
7 - ​​không cần thêm thông tin. Nếu PDF có sẵn trong một thư mục con bên trong
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
6 được gọi là
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
5, liên kết tương đối sẽ là
<p>Visit my <a href="projects/index.html">project homepagea>.p>
1 (URL tuyệt đối tương đương sẽ là
<h2 id="Mailing_address">Mailing addressh2>
0.)
: Points to a location that is relative to the file you are linking from, more like what we looked at in the previous section. For example, if we wanted to link from our example file at
<p>A link to my <a href="../pdfs/project-brief.pdf">project briefa>.p>
2 to a PDF file in the same directory, the URL would just be the filename —
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
7 — no extra information needed. If the PDF was available in a subdirectory inside
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
6 called
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
5, the relative link would be
<p>Visit my <a href="projects/index.html">project homepagea>.p>
1 (the equivalent absolute URL would be
<h2 id="Mailing_address">Mailing addressh2>
0.)

Một URL tương đối sẽ trỏ đến các địa điểm khác nhau tùy thuộc vào vị trí thực tế của tệp bạn tham khảo - ví dụ: nếu chúng tôi chuyển tệp

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
2 của chúng tôi ra khỏi thư mục
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
6 và vào gốc của trang web (cấp cao nhất, không phải trong bất kỳ thư mục nào) , liên kết URL tương đối
<p>Visit my <a href="projects/index.html">project homepagea>.p>
1 bên trong nó sẽ chỉ vào một tệp được đặt tại
<h2 id="Mailing_address">Mailing addressh2>
4, không phải là một tệp nằm ở
<h2 id="Mailing_address">Mailing addressh2>
0.root of the website (the top level, not in any directories), the
<p>Visit my <a href="projects/index.html">project homepagea>.p>
1 relative URL link inside it would now point to a file located at
<h2 id="Mailing_address">Mailing addressh2>
4, not a file located at
<h2 id="Mailing_address">Mailing addressh2>
0.

Tất nhiên, vị trí của tệp

<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
7 và thư mục
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
5 sẽ không đột nhiên thay đổi vì bạn đã di chuyển tệp
<a href="https://www.mozilla.org/en-US/">
  <img src="mozilla-image.png" alt="Mozilla homepage" />
a>
2 - điều này sẽ làm cho liên kết của bạn chỉ sai vị trí, vì vậy nó sẽ không hoạt động nếu nhấp vào. Bạn cần cẩn thận!

Liên kết thực tiễn tốt nhất

Có một số thực tiễn tốt nhất để làm theo khi viết liên kết. Hãy nhìn vào những điều này bây giờ.

Sử dụng từ ngữ liên kết rõ ràng

Thật dễ dàng để ném liên kết lên trang của bạn. Như thế là không đủ. Chúng tôi cần làm cho các liên kết của chúng tôi có thể truy cập được cho tất cả các độc giả, bất kể bối cảnh hiện tại của họ và công cụ nào họ thích. Ví dụ:

  • Người dùng đầu đọc màn hình thích nhảy xung quanh từ liên kết đến liên kết trên trang và đọc các liên kết ra khỏi ngữ cảnh.
  • Các công cụ tìm kiếm sử dụng văn bản liên kết để chỉ mục các tệp đích, do đó, bạn nên đưa các từ khóa vào văn bản liên kết của bạn để mô tả hiệu quả những gì được liên kết.
  • Người đọc trực quan lướt qua trang thay vì đọc từng từ và mắt của họ sẽ được vẽ vào các tính năng trang nổi bật, như các liên kết. Họ sẽ tìm thấy văn bản liên kết mô tả hữu ích.

Hãy xem xét một ví dụ cụ thể:

Liên kết tốt Văn bản: Tải xuống Firefox link text: Download Firefox

<p><a href="https://www.mozilla.org/firefox/">
  Download Firefox
a>p>

Link Link Text: Bấm vào đây để tải xuống Firefox link text: Click here to download Firefox

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
0

Mẹo khác:

  • Đừng lặp lại URL như là một phần của văn bản liên kết - URL trông xấu xí và âm thanh thậm chí còn xấu hơn khi trình đọc màn hình đọc chúng ra từng chữ cái.
  • Đừng nói "liên kết" hoặc "liên kết đến" trong văn bản liên kết - đó chỉ là tiếng ồn. Người đọc màn hình nói với mọi người rằng có một liên kết. Người dùng trực quan cũng sẽ biết có một liên kết, bởi vì các liên kết thường được tạo kiểu theo một màu khác và được gạch chân (quy ước này thường không nên bị phá vỡ, vì người dùng đã quen với nó).
  • Giữ văn bản liên kết của bạn càng ngắn càng tốt - điều này rất hữu ích vì người đọc màn hình cần diễn giải toàn bộ văn bản liên kết.
  • Giảm thiểu các trường hợp trong đó nhiều bản sao của cùng một văn bản được liên kết với các địa điểm khác nhau. Điều này có thể gây ra sự cố cho người dùng đầu đọc màn hình, nếu có một danh sách các liên kết ngoài ngữ cảnh được dán nhãn "Nhấp vào đây", "Bấm vào đây", "Bấm vào đây".

Liên kết với các tài nguyên không phải HTML-Để lại các biển chỉ dẫn rõ ràng

Khi liên kết với một tài nguyên sẽ được tải xuống (như tài liệu PDF hoặc Word), được phát trực tuyến (như video hoặc âm thanh) hoặc có một hiệu ứng bất ngờ khác (mở cửa sổ bật lên hoặc tải phim flash), bạn nên thêm từ ngữ rõ ràng để giảm bất kỳ sự nhầm lẫn.

Ví dụ:

  • Nếu bạn đang sử dụng kết nối băng thông thấp, hãy nhấp vào liên kết và sau đó tải xuống nhiều megabyte bắt đầu bất ngờ.
  • Nếu bạn không cài đặt trình phát flash, nhấp vào liên kết và sau đó đột nhiên được đưa đến một trang yêu cầu flash.

Chúng ta hãy xem một số ví dụ, để xem loại văn bản nào có thể được sử dụng ở đây:

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
1

Sử dụng thuộc tính tải xuống khi liên kết để tải xuống

Khi bạn đang liên kết với một tài nguyên sẽ được tải xuống thay vì mở trong trình duyệt, bạn có thể sử dụng thuộc tính

<h2 id="Mailing_address">Mailing addressh2>
9 để cung cấp tên tệp lưu mặc định. Dưới đây là một ví dụ với liên kết tải xuống đến phiên bản Windows mới nhất của Firefox:

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
2

Đối với bài tập này, chúng tôi muốn bạn liên kết một số trang cùng với menu điều hướng để tạo một trang web nhân. Đây là một cách phổ biến trong đó một trang web được tạo - cùng một cấu trúc trang được sử dụng trên mỗi trang, bao gồm cùng một menu điều hướng, vì vậy khi các liên kết được nhấp vào, nó mang lại ấn tượng rằng bạn đang ở cùng một nơi và nội dung khác nhau là được đưa lên.

Bạn sẽ cần tạo các bản sao cục bộ của bốn trang sau, tất cả trong cùng một thư mục. Để biết danh sách tệp đầy đủ, hãy xem thư mục bắt đầu-Menu-khởi động:

  • index.html
  • projects.html
  • pictures.html
  • social.html

Bạn nên:

  1. Thêm một danh sách không có thứ tự ở vị trí được chỉ định trên một trang bao gồm tên của các trang để liên kết đến. Một menu điều hướng thường chỉ là một danh sách các liên kết, vì vậy đây là về mặt ngữ nghĩa.
  2. Thay đổi từng tên trang thành một liên kết đến trang đó.
  3. Sao chép menu điều hướng trên mỗi trang.
  4. Trên mỗi trang, chỉ xóa liên kết đến cùng một trang - thật khó hiểu và không cần thiết cho một trang để bao gồm một liên kết đến chính nó. Và, việc thiếu một liên kết đóng một lời nhắc nhở trực quan tốt về trang nào bạn hiện đang ở.

Ví dụ đã hoàn thành sẽ trông giống với trang sau:

Hướng dẫn how do i make a hyperlink in html? - làm cách nào để tạo một siêu liên kết trong html?

Lưu ý: Nếu bạn bị mắc kẹt hoặc không chắc chắn nếu bạn đã hiểu đúng, bạn có thể kiểm tra thư mục được đánh dấu-được đánh dấu để xem câu trả lời chính xác. If you get stuck, or aren't sure if you have got it right, you can check the navigation-menu-marked-up directory to see the correct answer.

Liên kết e-mail

Có thể tạo các liên kết hoặc nút, khi nhấp vào, hãy mở một tin nhắn email gửi đi mới thay vì liên kết với một tài nguyên hoặc trang. Điều này được thực hiện bằng cách sử dụng phần tử

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
5 và sơ đồ URL
<p>
  Want to write us a letter? Use our
  <a href="contacts.html#Mailing_address">mailing addressa>.
p>
1.

Trong mẫu cơ bản và thường được sử dụng nhất, liên kết

<p>
  Want to write us a letter? Use our
  <a href="contacts.html#Mailing_address">mailing addressa>.
p>
1 cho biết địa chỉ email của người nhận dự định. Ví dụ:

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
3

Điều này dẫn đến một liên kết trông như thế này: Gửi email đến hư không.

Trong thực tế, địa chỉ email là tùy chọn. Nếu bạn bỏ qua nó và

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
6 của bạn là "mailto:", một cửa sổ email mới sẽ được mở bởi ứng dụng email của người dùng mà không có địa chỉ đích. Điều này thường hữu ích vì các liên kết "chia sẻ" mà người dùng có thể nhấp để gửi email đến địa chỉ lựa chọn họ.

Chỉ định chi tiết

Ngoài địa chỉ email, bạn có thể cung cấp thông tin khác. Trên thực tế, bất kỳ trường tiêu đề thư tiêu chuẩn nào cũng có thể được thêm vào URL

<p>
  Want to write us a letter? Use our
  <a href="contacts.html#Mailing_address">mailing addressa>.
p>
4 bạn cung cấp. Được sử dụng phổ biến nhất trong số này là "chủ đề", "cc" và "cơ thể" (không phải là trường tiêu đề thực sự, nhưng cho phép bạn chỉ định một thông báo nội dung ngắn cho email mới). Mỗi trường và giá trị của nó được chỉ định là một thuật ngữ truy vấn.

Đây là một ví dụ bao gồm CC, BCC, chủ đề và cơ thể:

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute">the Mozilla homepagea>.
p>
4

Lưu ý: Các giá trị của mỗi trường phải được mã hóa URL với các ký tự không in (các ký tự vô hình như tab, trả về vận chuyển và ngắt trang) và không gian được giới thiệu phần trăm. Ngoài ra, lưu ý việc sử dụng dấu câu hỏi (

<p>
  Want to write us a letter? Use our
  <a href="contacts.html#Mailing_address">mailing addressa>.
p>
5) để tách URL chính khỏi các giá trị trường và ampersands (&) để tách từng trường trong URL
<p>
  Want to write us a letter? Use our
  <a href="contacts.html#Mailing_address">mailing addressa>.
p>
1. Đây là ký hiệu truy vấn URL tiêu chuẩn. Đọc phương thức GET để hiểu ký hiệu truy vấn URL nào được sử dụng phổ biến hơn.
The values of each field must be URL-encoded with non-printing characters (invisible characters like tabs, carriage returns, and page breaks) and spaces percent-escaped. Also, note the use of the question mark (
<p>
  Want to write us a letter? Use our
  <a href="contacts.html#Mailing_address">mailing addressa>.
p>
5) to separate the main URL from the field values, and ampersands (&) to separate each field in the
<p>
  Want to write us a letter? Use our
  <a href="contacts.html#Mailing_address">mailing addressa>.
p>
1 URL. This is standard URL query notation. Read The GET method to understand what URL query notation is more commonly used for.

Dưới đây là một vài URL

<p>
  Want to write us a letter? Use our
  <a href="contacts.html#Mailing_address">mailing addressa>.
p>
4 mẫu khác:

  • mailto:
  • mailto:
  • mailto:,
  • mailto:? cc =
  • mailto:?cc=&subject=This%20is%20the%20subject

Kiểm tra kỹ năng của bạn!

Bạn đã đạt đến cuối bài viết này, nhưng bạn có thể nhớ thông tin quan trọng nhất không? Bạn có thể tìm thấy một số bài kiểm tra tiếp theo để xác minh rằng bạn đã giữ lại thông tin này trước khi bạn tiếp tục - xem Kiểm tra kỹ năng của bạn: Liên kết.

Bản tóm tắt

Đó là nó cho các liên kết, dù sao đi nữa! Bạn sẽ quay lại các liên kết sau này trong khóa học khi bạn bắt đầu nhìn vào kiểu dáng chúng. Tiếp theo cho HTML, chúng tôi sẽ quay lại ngữ nghĩa văn bản và xem xét một số tính năng nâng cao/khác thường hơn mà bạn sẽ thấy hữu ích - định dạng văn bản nâng cao là điểm dừng tiếp theo của bạn.

  • Trước
  • Tổng quan: Giới thiệu về HTML
  • Tiếp theo

Trong mô -đun này

Làm cách nào để tạo một liên kết siêu liên kết?

Tạo một siêu liên kết đến một vị trí trên web Chọn văn bản hoặc hình ảnh mà bạn muốn hiển thị dưới dạng siêu liên kết.Nhấn Ctrl+K.Bạn cũng có thể nhấp chuột phải vào văn bản hoặc hình ảnh và nhấp vào liên kết trên menu phím tắt.Trong hộp Chèn Hộp siêu liên kết, nhập hoặc dán liên kết của bạn vào hộp địa chỉ.Select the text or picture that you want to display as a hyperlink. Press Ctrl+K. You can also right-click the text or picture and click Link on the shortcut menu. In the Insert Hyperlink box, type or paste your link in the Address box.

Làm thế nào để bạn thực hiện văn bản có thể nhấp trong HTML?

Giúp một người chỉ định mục tiêu. Điều này được theo sau bằng cách thêm văn bản có thể nhấp trong HTML.Ví dụ: trong ví dụ trên, https://testbook.com/ là liên kết được đính kèm với trang web của Test TestBook trang web.Cuối cùng, để hoàn thành nó, bạn có thể thêm thẻ để cho biết nơi liên kết kết thúc. This is followed by adding the text that is clickable in HTML. For example, in the above example, https://testbook.com/ is the link that is attached to the text “Testbook website page”. Finally, to finish it, you can add the tag to indicate where the link ends.