Liên kết HTML – Cách Chèn Liên kết đến Trang web bằng Mã HREF – mã html cho liên kết trang web

Một trang web được tạo thành từ các phần thông tin khác nhau trực tiếp trong các phần khác nhau và trên các trang khác nhau trong chính trang web.

Bạn cũng có thể tìm thông tin liên quan đến trang web đó trên các trang thuộc các trang web khác nhau.

Tất cả các phần và trang này được liên kết với nhau trong HTML bằng thuộc tính href .

Trong bài viết này, chúng ta sẽ xem xét thuật ngữ Siêu kết nối. Sau đó, chúng ta sẽ tìm hiểu về các cách khác nhau mà bạn có thể tạo siêu liên kết, href làm gì và cách sử dụng thuộc tính href một cách thích hợp để liên kết các phần và trang.

Trong HTML, có nhiều dạng liên kết khác nhau. Trong hình ảnh, có thuộc tính src để “liên kết” nguồn của hình ảnh.

Đối với biểu định kiểu, có thẻ link với thuộc tính href để “liên kết” nguồn của biểu định kiểu.

Đối với thẻ liên kết, có thuộc tính href để “liên kết” phần hoặc trang được tham chiếu. Liên kết neo còn được gọi là siêu liên kết.

Khi người dùng theo dõi một siêu liên kết, họ đang điều hướng đến trang đó. Siêu liên kết là các phần tử tham chiếu đến một tài liệu khác, sao cho khi người dùng nhấp vào phần tử đó, họ sẽ được chuyển hướng đến tài liệu mới.

Như đã nêu ở trên, bạn có thể muốn liên kết các trang khác nhau (trong trang web của bạn hoặc bên ngoài) hoặc các phần trên trang web của bạn.

Trong bài viết này, tôi sẽ nêu bật ba cách tạo siêu liên kết. Những cách khác nhau này rất quan trọng cần biết vì chúng xác định giá trị của thuộc tính href .

Được rồi, bây giờ chúng ta hãy xem xét ba cách khác nhau đó.

1. Khi bạn muốn liên kết đến các phần của trang

Ví dụ: bạn có thể sử dụng phương pháp này khi tạo trang có mục lục.

Trong trường hợp này, bạn có thể không muốn người đọc phải cuộn xuống phần cuối cùng. Thật tuyệt nếu họ có thể nhấp vào nó trong mục lục và trình duyệt sẽ đưa họ trực tiếp đến đó.

Loại liên kết này xảy ra trong cùng một tài liệu và chỉ đưa người đọc đến các phần khác nhau. Chúng ta sẽ tìm hiểu cách tạo siêu liên kết cho trường hợp sử dụng này khi chúng ta tìm hiểu về thuộc tính href .

2. Khi bạn muốn liên kết đến một trang khác trong một trang web

Trên trang web của bạn, bạn có thể có trang chủ, trang giới thiệu, trang dịch vụ và các loại trang khác. Phương pháp này giúp người dùng điều hướng từ trang này sang trang khác.

3. Khi bạn muốn liên kết đến các trang bên ngoài

Đôi khi, trang web của bạn có thể không chứa một số thông tin nhất định và một trang web khác có thể có thông tin đó. Trong những trường hợp như vậy, bạn có thể muốn tham khảo trang web khác.

Để làm điều này, bạn sẽ tạo một siêu liên kết bên ngoài để điều hướng người dùng đến trang web khác.

Đây là ba cách chính để liên kết các trang. Bây giờ, hãy xem thuộc tính href có thể giúp bạn kích hoạt chúng như thế nào.

Cách sử dụng thuộc tính href

href là một thuộc tính được sử dụng để tham chiếu đến một tài liệu khác. Bạn có thể tìm thấy nó trên thẻ link và thẻ anchor .

Thuộc tính href được sử dụng trên các thẻ liên kết ( a ) để tạo siêu liên kết trong các trang web. Giá trị của thuộc tính chứa URL mà siêu liên kết trỏ tới. Bạn có thể sử dụng nó như thế này:

  & lt; a href = "URL" & gt; Siêu liên kết & lt; / a & gt;
 

Tuy nhiên, các giá trị URL có thể khác nhau tùy thuộc vào những gì bạn đang trỏ đến. Đối với ba cách mà chúng tôi đã xem xét trước đó, hãy xem cách bạn có thể sử dụng href .

Trong trường hợp này, giá trị sẽ là id của phần tử bắt đầu phần. Điều đó có nghĩa là chúng ta sẽ có một cái gì đó như thế này:

  & lt; a href = "# second-section" & gt; Chuyển đến phần thứ hai & lt; / a & gt;
& lt;! -
  Một số nội dung ở đây
 - & gt;
& lt; section id = "second-section" & gt;
& lt; h2 & gt; Phần thứ hai & lt; / h2 & gt;
& lt; / phần & gt;
 

Khi siêu liên kết “Chuyển đến phần thứ hai” được nhấp vào, trình duyệt sẽ cuộn xuống phần có id được liên kết. Ngoài ra, URL trên thanh URL của trình duyệt cũng thay đổi.

Ví dụ: nếu URL trước đó là mywebsite.com , thì URL mới sẽ là mywebsite.com # second-option.

2. Cách sử dụng href để liên kết các trang trong trang web

Để sử dụng href theo cách này, bạn cần hiểu URL tương đối và URL tuyệt đối là gì.

URL tương đối là các URL ngắn trỏ đến một tài liệu trên cùng một trang web. Nó giống như việc bạn đang ở đâu, làm cách nào để bạn đến được nơi này, nơi khác trên cùng một trang web?

Điều này trái ngược với URL tuyệt đối. Đối với những điều này, bạn không quan tâm đến vị trí hiện tại của mình – bạn cung cấp đầy đủ thông tin chi tiết để đến một nơi khác như bạn đã bắt đầu lại từ đầu.

Để điều hướng giữa các trang trực tuyến trên một trang web, bạn có thể sử dụng bất kỳ URL nào trong số các URL này, nhưng URL tương đối thường được sử dụng.

Giả sử bạn đang ở trang chủ và bạn muốn tham khảo trang giới thiệu. Dưới đây là cách sử dụng thuộc tính href để làm điều đó:

  & lt; a href = '/ about' & gt; Giới thiệu về trang & lt; / a & gt;
 

Từ trang chủ (giả sử mywebsite.com ), liên kết trên sẽ điều hướng đến mywebsite.com/about .

Có một số điều đáng lưu ý về dấu gạch chéo ( / ) trước liên kết. / yêu cầu trình duyệt thêm liên kết vào thư mục gốc của trang web (là miền). Vì vậy, gốc là mywebsite.com và liên kết được thêm vào như sau: mywebsite.com/about .

Nếu không có dấu gạch chéo ( & lt; a href = 'about' & gt; ), trình duyệt sẽ thay thế đường dẫn hiện tại bằng / about .

Ví dụ: nếu chúng tôi hiện đang truy cập mywebsite.com/projects/generator và chúng tôi có các liên kết sau:

  & lt; a href = 'about' & gt; About 1 & lt; / a & gt;
& lt; a href = '/ about' & gt; About 2 & lt; / a & gt;
 

“Khoảng 1” sẽ điều hướng đến mywebsite.com/projects/about (thay thế đường dẫn hiện tại / generator ) và “About 2” sẽ điều hướng đến mywebsite.com/about

3. Cách sử dụng href để liên kết đến các trang trên trang web khác

Vì nó nằm trên một trang web khác, không có cách nào chúng tôi có thể sử dụng URL tương đối. Đối với điều này, chúng tôi cần chỉ định nguồn tuyệt đối của tài liệu mà chúng tôi đang tham khảo.

Ví dụ: giả sử chúng tôi đang ở trên mywebsite.com và chúng tôi muốn tham chiếu đến google.com , đây là cách chúng tôi thực hiện với href :

  & lt; a href = 'https: //google.com'> Google & lt; a & gt;
 

Nếu chúng tôi chỉ viết google.com , thì trình duyệt sẽ coi nó như một trang trong một trang web, do đó gắn nó vào mywebsite.com .

Kết luận

Trong bài viết này, chúng ta đã biết cách thuộc tính href cho phép chúng ta tạo các loại liên kết khác nhau. Các liên kết khác nhau này hiển thị các cách khác nhau mà các tài liệu / trang có thể được tham chiếu trong một trang web.