BÀI 10. TẠO LIÊN KẾT

1. SIÊU VĂN BẢN VÀ ĐƯỜNG DẪN

Siêu văn bản (Hypertext): Là văn bản tích hợp nhiều dạng dữ liệu (ảnh, âm thanh...) và đặc biệt là các siêu liên kết dẫn đến các tài liệu khác.

Siêu liên kết (Hyperlink): Giúp người đọc chuyển nhanh đến nội dung liên quan mà không cần đọc tuần tự.

Thẻ tạo liên kết: Sử dụng thẻ <a> với thuộc tính href chứa địa chỉ đích.

• Cấu trúc: <a href="Địa_chỉ_đích">Nội dung hiển thị</a>.

Phân loại đường dẫn (URL) trong href:

• Đường dẫn tuyệt đối: Chứa đầy đủ giao thức (http/https) và tên miền. Dùng khi liên kết đến website bên ngoài.

• Đường dẫn tương đối: Chỉ chứa tên tệp hoặc đường dẫn tính từ vị trí hiện tại. Dùng cho các trang trong cùng website.

2. CÁC CÁCH LIÊN KẾT TỚI MỘT TRANG WEB

a) Liên kết tới một trang web khác (Liên kết ngoài)

• Dùng để trỏ tới một trang web trên Internet (không nằm trên máy mình).
• Bắt buộc dùng đường dẫn tuyệt đối.

b) Liên kết đến một vị trí khác trong cùng website (Liên kết trong)

Sử dụng đường dẫn tương đối để liên kết các trang nội bộ. Có các trường hợp sau:

• Liên kết cùng thư mục: Chỉ cần viết tên tệp.

• Liên kết đến thư mục con (cấp dưới): Viết theo cú pháp tên_thư_mục/tên_tệp.

• Liên kết đến thư mục cha (cấp trên): Dùng ../ để quay lui một cấp thư mục.

• Liên kết đến vị trí cụ thể trong cùng một trang (Bookmark):
  • Bước 1: Đặt id tại vị trí đích: <the_html id="ten_id">...</the_html>.
  • Bước 2: Tạo link trỏ đến id đó với dấu #: <a href="#ten_id">...</a>.

• Tạo liên kết cho hình ảnh: Lồng thẻ <img> vào bên trong thẻ <a>.

3. THỰC HÀNH TẠO LIÊN KẾT

Nhiệm vụ 1: Tạo liên kết trong cùng trang

• Mục tiêu: Bấm vào dòng chữ giới thiệu sẽ nhảy đến bảng nội dung bên dưới.
• Cách làm:
  • Đặt id="CLBTT" cho thẻ <table> bảng câu lạc bộ.
  • Tạo thẻ <a> với href="#CLBTT" bao quanh dòng chữ muốn bấm.
• Ví dụ: <a href="#CLBTT">Xem lịch hoạt động</a>

Nhiệm vụ 2: Tạo liên kết sang trang khác

• Mục tiêu: Từ trang chủ bấm để sang trang thông tin chi tiết.
• Cách làm: Viết đường dẫn tương đối đến tệp tin mới tạo.
• Ví dụ: <a href="thong_tin.html">Xem thông tin chi tiết</a>.