Tạo liên kết

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

a) Khái niệm Siêu văn bản (Hypertext)

• 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 thông thường mà còn chứa nhiều dạng dữ liệu khác như hình ảnh, âm thanh, video... và đặc biệt là chứa các siêu liên kết (hyperlink) trỏ tới các siêu văn bản khác.
• Siêu liên kết (Hyperlink hay liên kết): Là một tham chiếu dẫn tới một siêu văn bản hoặc một tài nguyên số khác. Người dùng có thể dễ dàng chuyển tới vị trí đích bằng cách nhấp chuột vào vị trí đặt liên kết.
• Nhờ có siêu liên kết, hệ thống World Wide Web (WWW) được hình thành như một mạng lưới khổng lồ kết nối hàng triệu máy chủ và trang web trên toàn cầu.

graph LR
    A["Trang Web A (index.html)"] -->|"Thẻ <a href='...'>"| B["Trang Web B (Chi tiết)"]
    A -->|"Liên kết ngoài"| C["Website khác (Google, Wikipedia)"]
    A -->|"Liên kết Bookmark (#id)"| A1["Phần cuối trang A"]
    style A fill:#e0f2fe,stroke:#0284c7,stroke-width:2px
    style B fill:#fef3c7,stroke:#d97706,stroke-width:2px
    style C fill:#dcfce7,stroke:#16a34a,stroke-width:2px

b) Cú pháp thẻ liên kết <a> trong HTML

Trong HTML, người ta sử dụng thẻ <a> (viết tắt của anchor - mỏ neo) để tạo liên kết.

Cấu trúc chuẩn:

<a href="URL">Nội dung hiển thị tại vị trí đặt liên kết</a>

• Thuộc tính href (Hypertext Reference): Là thuộc tính bắt buộc, dùng để chỉ định địa chỉ (đường dẫn URL) của tài liệu hoặc trang web được liên kết tới.
• Giá trị của href phải được đặt trong cặp dấu nháy kép "" hoặc nháy đơn ''.
• Phần văn bản hoặc phần tử nằm giữa cặp thẻ <a> và </a> chính là đối tượng mà người dùng nhìn thấy trên màn hình để nhấp chuột (thường được trình duyệt gạch chân và đổi sang màu xanh lam mặc định).

c) Phân biệt đường dẫn tuyệt đối và đường dẫn tương đối

Có hai loại đường dẫn URL cơ bản trong thiết kế web:

❓ Câu hỏi củng cố (Trang 58):
Trong các đường dẫn sau, đường dẫn nào là tuyệt đối, đường dẫn nào là tương đối?
a) html/cach_tao_lien_ket.html
b) http://google.com
c) mail.google.com/mail/u/0/#inbox/FMfcgzGMpKDHQFwcdfxCmMtxvZ

Lời giải chi tiết:

• a) Là đường dẫn tương đối vì không có giao thức (http:// hay https://) và tên miền, chỉ bắt đầu bằng thư mục con html/.
• b) Là đường dẫn tuyệt đối vì có giao thức http:// và tên miền google.com.
• c) Là đường dẫn tuyệt đối (đã ngụ ý giao thức mạng web trên hệ thống, bắt đầu với tên miền con mail.google.com và đường dẫn phân cấp tài nguyên).

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 - External Link)

Liên kết từ trang web của mình tới một trang web hoàn toàn khác trên Internet. Sử dụng đường dẫn tuyệt đối:

<p>
  Truy cập: 
  <a href="https://hanhtrangso.nxbgd.vn/sach-dien-tu?book_active=0">
    Sách điện tử Kết nối tri thức với cuộc sống
  </a>
</p>

💡 Mẹo: Để mở liên kết ngoài sang một tab trình duyệt mới thay vì đè lên trang hiện tại, thêm thuộc tính target="_blank":

<a href="https://google.com" target="_blank">Tìm kiếm trên Google</a>

Python Script

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

Xét cấu trúc thư mục website chuẩn như sau:

web/
├── index.html
├── thong_tin.html
├── images/
│   ├── sun.png
│   └── star.gif
└── bai_tap/
    ├── bai_tap_1.html
    ├── bai_tap_2.html
    └── on_tap/
        └── bai_tap_on_tap.html

Quy tắc điều hướng tương đối:

1. Tệp nằm cùng thư mục: Chỉ cần ghi trực tiếp tên tệp đích. Từ index.html trỏ tới thong_tin.html:
   <a href="thong_tin.html">Giới thiệu về trang web</a>
   

   Python Script
2. Tệp nằm trong thư mục con (dưới 1 cấp): Viết tên thư mục con, dấu gạch chéo /, rồi đến tên tệp. Từ index.html trỏ tới bai_tap_1.html:
   <a href="bai_tap/bai_tap_1.html">Bài tập 1</a>
   

   Python Script
3. Tệp nằm trong thư mục con nhiều cấp: Từ index.html trỏ tới bai_tap_on_tap.html:
   <a href="bai_tap/on_tap/bai_tap_on_tap.html">Bài tập ôn tập</a>
   

   Python Script
4. Trở lại thư mục cha (lên trên 1 cấp): Dùng ký hiệu ../ (hai dấu chấm và dấu gạch chéo). Từ bai_tap_1.html (trong thư mục con bai_tap/) trỏ ngược về index.html (ở thư mục cha web/):
   <a href="../index.html">Quay lại trang chủ</a>
   

   Python Script
   Nếu muốn lùi lên 2 cấp thư mục: Dùng ../../.

c) Liên kết tới vị trí khác trong cùng trang web (Bookmark / Anchor Link)

Khi trang web rất dài, ta muốn người dùng nhấp vào mục lục ở đầu trang là nhảy ngay xuống bảng số liệu hay kết luận ở cuối trang. Kỹ thuật này gồm 2 bước:

• Bước 1: Đặt ID định danh tại vị trí đích
  Gán thuộc tính id cho phần tử HTML đích (lưu ý id phải là duy nhất trong toàn trang):
  <table id="Thong_tin">
    ... nội dung bảng ...
  </table>
  

  Python Script
• Bước 2: Tạo liên kết trỏ tới ID đó (dùng dấu thăng #)
  <a href="#Thong_tin">Xem Bảng Thông tin chi tiết</a>
  

  Python Script

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

Để biến một bức ảnh thành nút bấm có thể nhấp chuột chuyển trang, ta lồng thẻ <img> vào giữa cặp thẻ <a>:

<a href="thong_tin.html">
  <img src="images/sun.png" alt="Biểu tượng mặt trời">
</a>

❓ Câu hỏi củng cố (Trang 60):
Viết đoạn mã HTML để hiển thị một danh sách không thứ tự trong tệp index.html. Danh sách gồm ba mục: bài tập 1, bài tập 2 và ôn tập. Ba mục này liên kết tương ứng với ba tệp bai_tap_1.html, bai_tap_2.html và bai_tap_on_tap.html.

Lời giải mẫu:

<h3>Danh mục bài tập:</h3>
<ul>
  <li><a href="bai_tap/bai_tap_1.html">Bài tập 1</a></li>
  <li><a href="bai_tap/bai_tap_2.html">Bài tập 2</a></li>
  <li><a href="bai_tap/on_tap/bai_tap_on_tap.html">Bài tập ôn tập</a></li>
</ul>