Cách tạo siêu liên kết trong HTML

Khi bạn đang xây dựng một trang web, bạn có thể muốn tham khảo một trang hoặc trang web khác. Ví dụ:bạn có thể đang tạo một blog và muốn liên kết đến một bài báo mà bạn cho là có liên quan.

Siêu liên kết , hoặc các liên kết, được sử dụng để kết nối một trang web này với một trang web khác và cho phép người dùng di chuyển giữa nhiều trang web một cách nhanh chóng. Siêu liên kết có thể được sử dụng để liên kết đến các trang khác trên trang web của riêng bạn hoặc các trang trên các trang web khác nhau.

Trong hướng dẫn này, chúng tôi sẽ phân tích các khái niệm cơ bản về siêu liên kết trong HTML. Chúng ta sẽ nói về cách đặt mục tiêu cho các liên kết, cách tạo neo cho dấu trang và liên kết đến địa chỉ email và các phần tử web.

Siêu liên kết HTML

<a href="your_url">This text will go to a URL.</a>

Văn bản giữa các thẻ của chúng tôi sẽ liên kết đến URL mà chúng tôi chỉ định trong thẻ mở của mình. Chúng tôi sử dụng href để chọn mục tiêu của URL. Đây có thể là một URL tuyệt đối hoặc liên kết tuyệt đối, chẳng hạn như https://www.careerkarma.com hoặc một URL liên quan đến một nơi nào đó trên trang web của chúng tôi.

Đây là một ví dụ về một liên kết trỏ đến địa chỉ web của trang chủ Career Karma:

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

<a href="https://www.careerkarma.com">Career Karma</a>

Các loại thẻ siêu liên kết HTML

Có ba loại liên kết có thể xuất hiện trong trình duyệt. Những điều này như sau:

• Các liên kết không được mong đợi , xuất hiện với màu xanh lam
• Các liên kết đã truy cập , xuất hiện với màu tím
• Liên kết đang hoạt động , xuất hiện với màu đỏ

Một số trang web ghi đè những màu này, có nghĩa là chúng xuất hiện khác nhau, nhưng đó là những loại liên kết chính mà bạn có thể tạo kiểu trong HTML .

HTML siêu liên kết:Mục tiêu

Bạn có thể thay đổi cách mở một liên kết. Ví dụ:giả sử bạn muốn một liên kết mở trong một tab mới trong trình duyệt web của người dùng. Điều này sẽ đảm bảo người dùng không mất vị trí của họ trên trang web mà họ hiện đang xem.

Đó là nơi có liên kết targetHTML có thuộc tính. Bằng cách sử dụng liên kết target , bạn có thể chỉ định nơi trình duyệt sẽ mở tài nguyên mà bạn đã liên kết.

Có bốn loại mục tiêu bạn có thể sử dụng, như sau:

• _ chính mình :Truy cập tài nguyên web trong cùng một cửa sổ và tab. Đây là mục tiêu mặc định được sử dụng trong HTML siêu liên kết.
• _parent :Truy cập tài nguyên web trong cửa sổ mẹ.
• _blank :Truy cập tài nguyên web trong cửa sổ hoặc tab mới.
• _top :Truy cập tài nguyên web trong một cửa sổ trình duyệt đầy đủ.

Dưới đây là ví dụ về một vài trong số các liên kết này đang hoạt động:

<a href="https://www.careerkarma.com" target="_self">This link will open in this tab.</a>
<a href="https://www.careerkarma.com" target="_parent">This link will open a parent window.</a>
<a href="https://www.careerkarma.com" target="_blank">This link will open in a new tab.</a>
<a href="https://www.careerkarma.com" target="_top">This link will open in a full browser window.</a>

Siêu liên kết HTML:Dấu trang neo

Siêu liên kết trong HTML cũng có thể tham chiếu một phần cụ thể của HTML tài liệu. Điều này hữu ích nếu bạn có một trang web dài và muốn hướng người dùng đến một vị trí cụ thể trong văn bản.

Trước khi bắt đầu sử dụng neo dấu trang, trước tiên bạn cần xác định thuộc tính ID trên phần tử mà bạn muốn người dùng truy cập. Dưới đây là một ví dụ về khai báo thuộc tính ID trên tiêu đề trong trang web:

<h3 id="subtitle3">Subtitle 3</h3>

Chúng tôi đã cấp cho thẻ tiêu đề HTML là id subtitle3 , sau đó chúng tôi có thể sử dụng để tham chiếu nó trong một siêu kết nối .

Đây là một ví dụ về siêu kết nối tham chiếu đến tiêu đề này:

<a href="#subtitle3">Go to Subtitle 3</a>

Thay vì chỉ định một URL trong href của chúng tôi , chúng tôi chỉ định ID của phần tử mà chúng tôi muốn liên kết. Chúng tôi thêm dấu thăng trước id (#) đó để trình duyệt biết tài liệu được liên kết nằm trên trang web của chúng tôi.

Thẻ neo HTML

Thẻ ký tự liên kết HTML đề cập đến thẻ. Thẻ này liên kết người dùng với một tài nguyên web khác. Thuộc tính “href” xác định tài nguyên mà người dùng sẽ được sử dụng khi họ nhấp vào liên kết.

Ví dụ về thẻ neo HTML

URL tương đối

Nếu bạn đang liên kết đến một tài nguyên trên cùng một tài liệu HTML mà bạn đang phát triển, bạn có thể sử dụng một URL tương đối. URL tương đối cũng được gọi là liên kết cục bộ và không sử dụng cú pháp “https://www.sitename.com”. Thay vào đó, các URL tương đối trỏ đến đường dẫn tệp của một tài nguyên web cụ thể trên máy chủ cục bộ.

Giả sử chúng tôi đang tạo một liên kết trên trang web Career Karma sẽ trỏ đến blog của chúng tôi. Thay vì sử dụng một URL tuyệt đối, chúng tôi có thể sử dụng một URL cục bộ, bởi vì trang web của chúng tôi là trang Career Karma. Đây là mã chúng tôi sẽ sử dụng để tạo liên kết này:

<a href="/blog">Career Karma blog</a>

Khi chúng ta nhấp vào dòng chữ blog Nghiệp dư , chúng tôi được đưa đến / blog tài nguyên trên trang web của chúng tôi.

Địa chỉ Email

Thẻ liên kết cũng có thể được sử dụng để liên kết đến một địa chỉ email. Khi một liên kết đến một địa chỉ email được nhấp vào, chương trình email mặc định của người dùng sẽ được mở. Người dùng sẽ được hỏi xem họ có muốn gửi tin nhắn đến địa chỉ email bạn đã chỉ định hay không.

Để liên kết đến một địa chỉ email, chúng ta cần bắt đầu liên kết của mình bằng giao thức mailto:. Dưới đây là một ví dụ về liên kết đến một địa chỉ email trong HTML:

<a href="mailto:nothing@google.com">Send an email to us!</a>

Khi chúng tôi nhấp vào liên kết của mình, chương trình email của chúng tôi sẽ mở ra và yêu cầu chúng tôi gửi email đến “nothing@google.com”.

Liên kết tới một phần tử

Thẻ liên kết có thể liên kết đến một phần tử trên trang web. Bạn có thể tạo liên kết này bằng cách chỉ định id của phần tử mà mỏ neo sẽ trỏ tới. Giả sử chúng tôi muốn có một liên kết để đưa người dùng của mình đến tiêu đề Tiêu đề kiểm tra trên một trang web. Chúng tôi có thể tạo liên kết này bằng mã sau:

<a href="#test_heading">Jump to Test Heading</a>

<h2 id="test_heading">Test Heading</h2>

Khi chúng tôi nhấp vào liên kết của mình, trang web của chúng tôi sẽ cuộn xuống phần tử có id test_heading .

Kết luận

Siêu liên kết có thể được sử dụng trong HTML để liên kết một trang web hoặc tài nguyên với một trang web hoặc tài nguyên khác. Bạn có thể sử dụng siêu liên kết để kết nối với các tài nguyên trên trang web của bạn hoặc trên bất kỳ trang web nào khác. Trong hướng dẫn này, chúng tôi đã chia nhỏ cách sử dụng siêu liên kết trong một HTML tài liệu.

Với tất cả thông tin này, bạn đã sẵn sàng tạo siêu liên kết trong HTML như một bậc thầy!

Để tìm hiểu thêm về cách viết mã trong HTML, hãy đọc hướng dẫn Cách học HTML của chúng tôi.