Tạo liên kết

Bản chất của Internet là các trang web được liên kết với nhau. Chắc bạn cũng không lạ gì khi click vào các đường dẫn khi lướt web, nhưng chúng được tạo thành như thế nào?

Chúng ta sẽ cùng tìm hiểu:

• Tạo liên kết giữa các trang bằng thẻ <a>
• Thuộc tính của một thẻ HTML

Tạo liên kết

1. Trong VS Code, bạn hãy tạo một tập tin mới tên là about.html có nội dung như sau:

   about.html

   <p>Đây không phải là trang chủ mà là trang giới thiệu.</p>

2. Thêm đoạn HTML sau vào tập tin index.html và lưu lại:

   index.html

   <a href="about.html">Xem Giới thiệu</a>

3. Mở tập tin index.html trong trình duyệt, bạn sẽ thấy như sau:

4. Click vào “Xem Giới thiệu”, bạn sẽ thấy nội dung của tập tin about.html.

5. Chúng ta vừa tạo một liên kết giữa trang index.html và about.html 🥳

Thẻ <a> và thuộc tính href

Trong HTML, thẻ <a> (bắt nguồn từ chữ anchor, nghĩa là “mỏ neo”) được dùng để tạo liên kết giữa các trang với nhau. Cách sử dụng cũng tương tự như thẻ <p> nhưng chúng ta sẽ khai báo thêm thuộc tính href trong phần mở thẻ như sau:

Trong HTML, thuộc tính của thẻ được mở đầu bằng tên thuộc tính, theo sau là dấu bằng =, cuối cùng là giá trị của thuộc tính được bọc trong dấu ngoặc kép ".

Thuộc tính href mô tả đường dẫn URL khi người dùng click vào liên kết. Chúng ta có thể khai báo href là:

• Tên của một tập tin HTML khác, ví dụ href="about.html".
• URL của một website khác, ví dụ href="https://google.com".
• Một địa chỉ email, ví dụ href="mailto:me@example.com". Lưu ý là phải có mailto: trước địa chỉ email.

Viết thường hay viết hoa?

Tên thẻ cũng như tên thuộc tính HTML KHÔNG phân biệt chữ hoa thường, nên bạn có thể viết <a href="about.html"> hay <A HREF="about.html"> hay <a HreF="about.html"> đều ra cùng kết quả. Trong thực tế thì hầu hết mọi người sử dụng chữ thường để gõ nhanh và nhìn mã nguồn thống nhất hơn.

Tuy nhiên href="about.html" và href="ABOUT.html" lại trỏ đến hai tập tin có tên khác nhau, nên bạn cần lưu ý kiểm tra khi liên kết đến tập tin nhé.

Mở liên kết ở một tab mới

Nếu muốn liên kết được mở ra ở một tab mới, bạn có thể sử dụng thuộc tính target="_blank" của thẻ <a>.

1. Trong tập tin index.html, thêm vào đoạn sau:

   index.html

   <a target="_blank" href="https://google.com">
     <!--x-->
     Google (mở ở tab mới)
   </a>

2. Mở tập tin index.html trong trình duyệt và click vào liên kết “Google (mở ở tab mới)”.

3. Bạn sẽ thấy trang chủ Google hiện ra ở một tab mới.

Chúng ta thấy một thẻ HTML có thể có nhiều thuộc tính khác nhau, và thứ tự xuất hiện của chúng trong phần mở thẻ KHÔNG quan trọng. Bạn có thể viết <a target="_blank" href="https://google.com"> hay <a href="https://google.com" target="_blank"> đều được.

Vì sao lại có thêm dòng chữ “(mở ở tab mới)”?

Khi click vào một liên kết, các trình duyệt đều sẽ mở trang ở tab hiện tại. Khi chúng ta thay đổi hành vi này và mở liên kết ở tab mới, bạn được khuyến khích nên thông báo để người sử dụng không bị bất ngờ.

Một số trang web thêm vào một icon nhỏ ở cuối các liên kết ngoài để đánh dấu cho người sử dụng.

Ảnh chụp màn hình trang Wikipedia tiếng Việt hiển thị một danh sách các liên kết. Mỗi liên kết được gắn một icon nhỏ gợi ý liên kết sẽ được mở ra ở tab mới.

Bài tập

Bài 1

Trong trang about.html, thêm vào một liên kết có tên “Quay lại trang chủ” mà khi click vào người dùng sẽ thấy trang index.html.

Click để xem lời giải

about.html

<p>Đây không phải là trang chủ mà là trang giới thiệu.</p>

<a href="index.html">Quay lại trang chủ</a>

Bài 2

Trong trang index.html, thêm vào một liên kết “Gửi email cho tui” để khách truy cập có thể liên hệ với bạn.

Click để xem lời giải

Thay thế bằng địa chỉ email của bạn nhé.

index.html

<a href="mailto:hello@example.com">Gửi mail cho tui</a>