Sử dụng thẻ HTML để tạo được các loại liên kết trên trang web.
1. Siêu văn bản và đường dẫn
Siêu văn bản (hypertext) là loại văn bản mà nội dung của nó không chỉ chứa văn bản mà còn có thể chứa nhiều dạng dữ liệu khác như âm thanh, hình ảnh,… và đặc biệt là chứa các siêu liên kết (hyperlink) tới siêu văn bản khác.
Siêu liên kết (còn gọi tắt là liên kết), là một tham chiếu để liên kết tới siêu văn bản khác.
Trong HTML, sử dụng thẻ <a> cho các liên kết.
<a href="URL">Nội dung hiển thị</a>Trong đó, liên kết URL có thể trỏ tới:
- Một tài liệu HTML khác
- Một hình ảnh
- Một tệp âm thanh hoặc video…
Có hai loại URL chính là đường dẫn tuyệt đối và đường dẫn tương đối
- Đường dẫn tuyệt đối: Là địa chỉ đầy đủ bao gồm cả giao thức (
http://hoặchttps://), tên miền và tên đường dẫn chi tiết (nếu cần).
Ví dụ:href="https://www.nxbgd.vn/". - Đường dẫn tương đối: Mô tả cách truy cập tài liệu được liên kết từ vị trí của tài liệu hiện tại liên kết tới một tài liệu khác trên cùng trang web. Không cần giao thức hay tên miền, chỉ cần tên đường dẫn.
Ví dụ:href="bai_tap/bai_tap_1.html"
2. Cách tạo liên kết tới một trang web
a. Liên kết tới một trang web khác
Còn được gọi là liên kết ngoài, sử dụng đường dẫn tuyệt đối. Ví dụ:
<a href="https://hanhtrangso.nxbgd.vn/sach-dien-tu">Sách điện tử</a>b. Liên kết đến một vị trí khác trong cùng website
Còn được gọi là liên kết trong. Sử dụng đường dẫn tương đối cho thuộc tính href (không có giao thức ở đầu http:// hoặc https://).
Ví dụ với cấu trúc của một website như sơ đồ sau:
Tạo một liên kết trên trang index.html, các trường hợp liên kết trong website có thể là:
- Liên kết tới trang cùng thư mục:
href="thong_tin.html" - Liên kết tới trang thuộc thư mục khác, dưới 1 cấp hay nhiều cấp:
href="bai_tap/bai_tap_1.html"
href="bai_tap/on_tap/bai_tap_on_tap.html" - Liên kế tới vị trí khác trong cùng một trang web (cùng là trang index.html):
href="#id_vi_tri" - Liên kết đến trang nằm ở thư mục cấp trên: sử dụng ký tự
../để trở về thư mục trên 01 mức
Ví dụ trong trangbai_tap_1.htmlđể tạo liên kết về trangthong_tin.htmlthì đường dẫn là:href="../thông_tin.html"
Bài tập củng cố
Trong sơ đồ cấu trúc website phía trên, hãy tạo một liên kết từ nội dung của tập tin bai_tap_on_tap.html trỏ về tập tin bai_tap_2.html trong thư mục bai_tap.
