TRANG CHỦ

Tin học 12 - Bài 10: Tạo liên kết

Ôn tập khái niệm siêu văn bản, hiểu URL tuyệt đối/tương đối và thực hành các kiểu liên kết trong trang, trong website và liên kết ngoài.

1. Siêu văn bản & đường dẫn

Siêu văn bản (hypertext)

  • Siêu văn bản là văn bản có thể chứa văn bản, âm thanh, hình ảnh… và các siêu liên kết (hyperlink) tới những tài liệu khác.
  • Người dùng không cần đọc tuần tự từ đầu đến cuối mà có thể nhảy đến các phần liên quan thông qua liên kết.

Thẻ liên kết & URL

Thẻ liên kết trong HTML có dạng: <a href="URL">Nội dung hiển thị</a>, trong đó thuộc tính href chứa URL của tài nguyên đích (trang HTML, hình ảnh, âm thanh, video…).

Ghi nhớ: URL (Uniform Resource Locator) dùng để chỉ vị trí tài nguyên trên web hoặc trong cùng website.

Các loại URL

  • URL tuyệt đối: gồm giao thức + tên miền + đường dẫn chi tiết, ví dụ: https://example.com/thu-muc/trang.html. Thường dùng khi liên kết tới tài nguyên trên Internet.
  • URL tương đối: mô tả đường dẫn tính từ vị trí tệp HTML hiện tại trong cùng website (cùng máy chủ). Ví dụ: BT/bai_tap_1.html.
Hypertext Hyperlink URL tuyệt đối URL tương đối <a href>

2. Các cách liên kết tới một trang web

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

  • Liên kết ngoài sử dụng thẻ <a> với đường dẫn tuyệt đối trong thuộc tính href.
  • Ví dụ: liên kết từ một trang bài học trong SGK tới mục “Sách điện tử” trên Internet.

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

Dùng đường dẫn tương đối để liên kết tới các trang khác nằm trong cùng website. Hình 10.1 (SGK tr.59) minh họa cấu trúc thư mục và các trường hợp:

  • Cùng thư mục: href="thong_tin.html".
  • Khác thư mục – dưới 1 cấp: href="bai_tap/bai_tap_1.html".
  • Khác thư mục – nhiều cấp: href="bai_tap/on_tap/bai_tap_on_tap.html".
  • Quay về thư mục cha: dùng ../ (mỗi ../ lùi lên 1 cấp thư mục), ví dụ: href="../index.html".
Khi di chuyển tệp HTML sang thư mục khác, cần kiểm tra và cập nhật lại các đường dẫn tương đối để liên kết không bị lỗi.

c) Liên kết tới một vị trí trong cùng trang

Các bước tạo liên kết trong trang:
  1. Bước 1: Gắn thuộc tính id duy nhất cho phần tử đích (đoạn nội dung cần nhảy tới).
  2. Bước 2: Tạo liên kết với thuộc tính href dạng #ten_id trỏ tới mã định danh đó.

Ví dụ:

<table id="Thong_tin">…</table>

<a href="#Thong_tin">Thông tin chi tiết</a>

d) Tạo liên kết cho hình ảnh

  • Có thể “bọc” thẻ <img> bên trong thẻ <a> để khi bấm vào hình ảnh sẽ mở liên kết.

Ví dụ (trang index.html liên kết tới thong_tin.html bằng ảnh trong thư mục images/sun.png):

<a href="thong_tin.html">
  <img src="images/sun.png" alt="Mặt trời">
</a>

3. Thực hành – Luyện tập – Vận dụng

Nhiệm vụ 1: Liên kết trong trang

  • Tạo bảng lịch hoạt động Câu lạc bộ (CLB) và gán một id cho bảng, ví dụ: id="CLBTT".
  • Đặt một liên kết ở đầu trang với href="#CLBTT" để khi bấm vào sẽ nhảy tới bảng lịch CLB.

Nhiệm vụ 2: Liên kết sang trang khác

  • Tạo trang thong_tin.html trong cùng website, chứa thông tin chi tiết về CLB (mục tiêu, lịch sinh hoạt, nội quy,…).
  • Trên trang chủ, tạo liên kết dùng đường dẫn tương đối để mở thong_tin.html.

Luyện tập / Vận dụng

  • Viết liên kết “Quay về trang chủ” trên các trang con, sử dụng đường dẫn tương đối thích hợp.
  • Xây dựng một trang giới thiệu có ít nhất 3 liên kết (tới các phần khác trong trang, tới các trang khác trong website hoặc liên kết ngoài).
  • Bổ sung mô tả chi tiết về các CLB và gắn các liên kết trong bảng lịch tới phần mô tả tương ứng trong cùng trang hoặc trong trang khác.
  • 📚 CỦNG CỐ TIẾT 1
Khi hoàn thành các nhiệm vụ, hãy kiểm tra lại toàn bộ liên kết (trong trang, trong website và liên kết ngoài) để đảm bảo không có liên kết bị gãy.