Khi dựng trang web để trình bày một vấn đề và hướng đi giải quyết, ta cần nối các trang lại với nhau và dẫn người đọc tới nguồn tham khảo. Công cụ làm việc đó là siêu liên kết.
1. Siêu liên kết là gì?
Siêu liên kết là một yếu tố trên trang web, khi người dùng bấm vào sẽ chuyển tới một đích chỉ định: có thể là trang khác trong cùng website, một website bên ngoài, một tập tin hoặc một vị trí trong chính trang đó. Nhờ liên kết mà các trang web riêng lẻ được nối thành mạng lưới thông tin toàn cầu (World Wide Web).
- Thẻ tạo liên kết: thẻ mở a và thẻ đóng của a, viết tắt của chữ anchor (mỏ neo).
- Vùng liên kết: phần nằm giữa hai thẻ a; có thể là văn bản hoặc hình ảnh, là chỗ người dùng nhìn thấy và bấm vào.
- Thuộc tính href: cho biết đích của liên kết; phải có href thì thẻ a mới trở thành liên kết bấm được. Trình duyệt thường hiển thị liên kết bằng chữ có màu riêng và gạch chân.
2. Cú pháp và các bước tạo liên kết
- 1.Xác định đích muốn tới: trang trong website, website bên ngoài hay một vị trí trong trang.
- 2.Ghi địa chỉ của đích vào thuộc tính href (dạng tuyệt đối hoặc tương đối, xem mục sau).
- 3.Viết nội dung hiển thị sao cho ngắn gọn, nói rõ điều gì sẽ xảy ra khi bấm.
- 4.Lưu tệp .html và mở bằng trình duyệt để bấm thử từng liên kết.
Mẫu chung và một liên kết cụ thể được viết như sau:
<a href="đích">Nội dung hiển thị</a> <a href="https://vi.wikipedia.org">Tra cứu trên Wikipedia</a>
3. Địa chỉ trong thuộc tính href
Có hai dạng địa chỉ thường dùng cho href.
- Địa chỉ tuyệt đối (absolute URL): gồm đầy đủ giao thức, tên miền và đường dẫn. Dùng khi liên kết tới website khác trên Internet; tiền tố thường là https://.
- Địa chỉ tương đối (relative path): chỉ nêu đường dẫn tính từ tệp hiện tại. Dùng để nối giữa các trang trong cùng một website, vì website có thể đổi tên miền hoặc chuyển thư mục mà liên kết vẫn đúng.
Một số cách viết tương đối thường gặp:
<!-- tệp cùng thư mục --> <a href="gioi_thieu.html">Trang giới thiệu</a> <!-- tệp trong thư mục con bai_viet --> <a href="bai_viet/trang2.html">Bài viết</a> <!-- tệp ở thư mục cha (lùi một cấp) --> <a href="../index.html">Về trang chủ</a>
Nên dùng tên gồm chữ cái không dấu, chữ số, dấu gạch dưới hoặc gạch nối, viết thường và không khoảng trắng; tránh ký hiệu tiếng Việt có dấu trong tên tệp. Nhiều máy chủ web phân biệt chữ hoa với chữ thường, nên phải ghi đúng tên như tệp thật.
4. Thuộc tính target và liên kết trong trang
- Thuộc tính target quy định nơi mở trang đích. target="_blank" mở trong tab (hoặc cửa sổ) mới; target="_self" mở ngay trong trang hiện tại, và đây là mặc định nếu không ghi target. Khi dẫn ra website bên ngoài, người ta hay thêm target="_blank" để người đọc không bị rời khỏi trang hiện tại.
- Liên kết trong cùng trang: đặt mã định danh id cho phần cần đến, rồi trỏ href tới id đó bằng dấu thăng ở đầu. Cách này dùng cho mục lục, nút “lên đầu trang”, “nhảy tới kết luận”, ...
<a href="https://example.com" target="_blank"> Mở trong tab mới</a> <h2 id="ket-luan">Kết luận</h2> <a href="#ket-luan">Nhảy tới phần Kết luận</a>
Chú ý: id phải là duy nhất trong trang; phần href của liên kết trong trang bắt đầu bằng dấu thăng rồi tới đúng id đó.
5. Ví dụ minh hoạ
Website gồm hai tệp nằm cùng một thư mục, nối với nhau bằng địa chỉ tương đối, có liên kết ra website ngoài và liên kết tới vị trí cụ thể trong một trang.
Nội dung tệp trang_chu.html:
<!DOCTYPE html> <html lang="vi"> <head> <meta charset="utf-8"> <title>Trang chu - CLB Sach</title> </head> <body> <h1 id="dau-trang">CLB Sach</h1> <p>Chao mung ban den CLB Sach.</p> <p><a href="gioi_thieu.html">Gioi thieu</a></p> <p><a href="https://example.com" target="_blank"> Tham khao them</a></p> </body> </html>
Nội dung tệp gioi_thieu.html:
<!DOCTYPE html> <html lang="vi"> <head> <meta charset="utf-8"> <title>Gioi thieu CLB Sach</title> </head> <body> <h1 id="gioi-thieu">Gioi thieu</h1> <p><a href="trang_chu.html">Ve trang chu</a></p> <p><a href="trang_chu.html#dau-trang"> Len dau trang</a></p> </body> </html>
Lời giải
Trang chủ dùng đường dẫn tương đối gioi_thieu.html để mở trang giới thiệu cùng thư mục, đồng thời dùng địa chỉ tuyệt đối kèm target="_blank" để mở website ngoài trong tab mới. Trang giới thiệu liên kết ngược về trang_chu.html; riêng đường dẫn tới một chỗ trong trang chủ được viết bằng tên tệp, rồi dấu thăng, rồi id của phần cần đến. Các liên kết hoạt động được vì tên tệp khớp và hai tệp nằm cùng một thư mục.
6. Lưu ý và lỗi hay gặp
- Thiếu href thì thẻ a chỉ là văn bản thường, bấm không chuyển trang; để href rỗng thì bấm vào chỉ tải lại trang hiện tại.
- Sai đường dẫn tương đối khi tệp không cùng thư mục; cần lùi thư mục bằng “..” để về thư mục cha.
- Quên đặt id ở phần đích hoặc ghi id không khớp thì liên kết trong trang không nhảy đúng chỗ.
- Tên tệp có dấu hoặc có khoảng trắng dễ gây lỗi khi đưa website lên mạng.
- Nội dung hiển thị nên rõ ràng (ghi rõ trang hoặc nơi sẽ đến) thay vì chỉ “bấm vào đây”.
7. Ôn tập
- 1.Thẻ nào dùng để tạo siêu liên kết? Thuộc tính nào của thẻ đó cho biết đích của liên kết?
- 2.Khi nào dùng địa chỉ tuyệt đối, khi nào dùng địa chỉ tương đối?
- 3.Giá trị target nào mở trang trong tab mới? Nếu không ghi target thì liên kết mở ở đâu?
- 4.Để tạo liên kết nhảy tới một đoạn trong cùng trang, ta cần đặt gì ở phần đích và viết gì trong href?
- 5.Một thẻ a chỉ có thẻ mở và thẻ đóng, thiếu thuộc tính href, thì liên kết có hoạt động không? Vì sao?
Gợi ý trả lời
- 1.Dùng thẻ a; thuộc tính href xác định đích cần tới, thiếu href thì không thành liên kết.
- 2.Tuyệt đối khi trỏ ra website khác (cần đủ giao thức và tên miền); tương đối khi nối giữa các trang trong cùng website.
- 3.Tab mới là target="_blank". Không ghi target thì mở trong trang hiện tại, tức target="_self".
- 4.Đặt id duy nhất tại phần đích, rồi viết href theo mẫu: dấu thăng rồi tới id đó.
- 5.Không hoạt động; thiếu href nên trình duyệt không biết phải chuyển tới đâu.