I. Lý thuyết trọng tâm

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

Khi đọc thông tin trên các trang web, điểm khác biệt quan trọng nhất so với đọc sách báo giấy chính là khả năng nhấp chuột vào một vị trí để chuyển ngay đến nội dung liên quan. Đây chính là đặc trưng của siêu văn bản.

1.1. Siêu văn bản là gì?

Siêu văn bản (hypertext) là loại văn bản đặc biệt với hai đặc điểm nổi bật:

• Chứa đa dạng loại dữ liệu: Ngoài văn bản thuần túy, siêu văn bản còn có thể chứa âm thanh, hình ảnh, video và nhiều định dạng khác
• Chứa các siêu liên kết: Đây là điểm quan trọng nhất, cho phép kết nối đến các siêu văn bản khác

Khi xem siêu văn bản, người đọc không cần đọc tuần tự từ đầu đến cuối mà có thể nhờ các siêu liên kết để truy cập ngay vị trí mong muốn không theo trình tự nào.

Ví dụ phân biệt:

• Tệp .docx (Microsoft Word): Có thể là siêu văn bản vì chứa được hình ảnh, liên kết
• Tệp .txt (Notepad): Không phải siêu văn bản vì chỉ chứa văn bản thuần túy

1.2. Siêu liên kết là gì?

Siêu liên kết (hyperlink), hay còn gọi tắt là liên kết, là một tham chiếu dùng để kết nối tới siêu văn bản khác. Người dùng có thể dễ dàng truy cập đến văn bản được liên kết bằng cách nhấp chuột vào vị trí đặt liên kết trong văn bản ban đầu.

1.3. Thẻ tạo liên kết trong HTML

Trong HTML, liên kết được tạo bằng thẻ <a> (anchor – neo). Cấu trúc chung như sau:

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

Giải thích:

• <a>: Thẻ mở, đánh dấu bắt đầu liên kết
• href: Thuộc tính cung cấp địa chỉ của trang web hay tài nguyên được liên kết tới
• URL: Địa chỉ (đường dẫn) tham chiếu tới tài liệu đích, phải nằm trong cặp dấu nháy kép “”
• Nội dung hiển thị: Phần văn bản hoặc hình ảnh mà người dùng sẽ nhấp vào
• </a>: Thẻ đóng, đánh dấu kết thúc liên kết

Lưu ý: Phần lớn các liên kết trỏ tới một tài liệu HTML khác, nhưng ta cũng có thể trỏ tới hình ảnh, tệp âm thanh hoặc video.

1.4. Hai loại đường dẫn URL

Có hai loại URL chính được sử dụng trong thuộc tính href:

a) Đường dẫn tuyệt đối (Absolute URL)

Đường dẫn tuyệt đối cung cấp một địa chỉ đầy đủ, bao gồm:

• Giao thức: http:// hoặc https://
• Tên miền (domain name): ví dụ www.nxbgd.vn
• Đường dẫn chi tiết (nếu cần): ví dụ /sach-dien-tu

Khi nào sử dụng: Khi liên kết tới tài liệu trên mạng Internet mà tài liệu đó không nằm trên máy chủ của mình.

Ví dụ:

href="https://www.nxbgd.vn/"
href="https://hanhtrangso.nxbgd.vn/sach-dien-tu?book_active=0"

Lưu ý: Đôi khi đường dẫn tuyệt đối rất dài và khó nhìn, nhưng ta vẫn cần viết một cách chính xác.

b) Đường dẫn tương đối (Relative URL)

Đườ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. Loại đường dẫn này:

• Không yêu cầu giao thức hay tên miền
• Chỉ cần tên đường dẫn (tên thư mục và tên tệp)

Khi nào sử dụng: Khi liên kết tới một tài liệu khác trên cùng trang web (cùng máy chủ hoặc máy tính cài đặt trang web).

Ví dụ: Với cấu trúc website như Hình 10.1, nếu đang ở trang index.html thì:

href="bai_tap/bai_tap_1.html"

Đây là đường dẫn tương đối tới tệp bai_tap_1.html trong thư mục bai_tap.

1.5. Bảng so sánh hai loại đường dẫn

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

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

Liên kết từ một trang web tới một trang web khác trên Internet được gọi là liên kết ngoài. Để tạo liên kết ngoài, ta sử dụng thẻ <a> và truyền đường dẫn tuyệt đối cho thuộc tính href.

Ví dụ: Tạo liên kết tới mục Sách điện tử của bộ sách Kết nối tri thức với cuộc sống:

<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>

Kết quả: Đoạn văn bản “Sách điện tử Kết nối tri thức với cuộc sống” sẽ được hiển thị dưới dạng liên kết. Khi nhấp chuột vào, trình duyệt sẽ chuyển đến trang web Sách điện tử.

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

Trong lập trình web, phần lớn các liên kết được sử dụng là liên kết trỏ tới các trang trong website của mình, ví dụ từ trang chủ đi tới các trang nội dung chi tiết. Trường hợp này gọi là liên kết trong.

Ta sử dụng đường dẫn tương đối cho thuộc tính href. Khi đường dẫn không có giao thức ở đầu, trình duyệt sẽ kiểm tra địa chỉ đó trên máy chủ hiện tại để tìm tài liệu.

Các trường hợp liên kết trong website:

a) Liên kết tới trang web cùng thư mục

Khi tệp nguồn và tệp đích nằm trong cùng một thư mục, ta chỉ cần cung cấp tên của tệp liên kết tới.

<a href="thong_tin.html">Giới thiệu về trang web</a>

Giải thích: Từ trang index.html liên kết tới trang thong_tin.html (cả hai cùng nằm trong thư mục web).

b) Liên kết tới trang web thuộc thư mục con (dưới một cấp)

Đường dẫn gồm tên thư mục con và tên tệp, được phân cách bằng dấu /.

<a href="bai_tap/bai_tap_1.html">Bài tập 1</a>

Giải thích: Từ trang index.html liên kết tới trang bai_tap_1.html nằm trong thư mục bai_tap.

c) Liên kết tới trang web thuộc thư mục con (dưới nhiều cấp)

Đường dẫn gồm tên các thư mục và tên tệp theo thứ tự từ trên xuống, mỗi cấp được phân cách bởi dấu /.

<a href="bai_tap/on_tap/bai_tap_on_tap.html">Bài tập ôn tập</a>

Giải thích: Từ trang index.html liên kết tới trang bai_tap_on_tap.html nằm trong thư mục on_tap, mà thư mục on_tap lại nằm trong thư mục bai_tap.

d) Liên kết tới trang web thuộc thư mục cha (lên một hoặc nhiều cấp)

Khi trang web liên kết tới nằm ở thư mục mức trên, ta sử dụng ký tự đặc biệt ../. Mỗi cụm ../ trong đường dẫn có nghĩa là “trở lại thư mục trên một mức”.

<a href="../index.html">Quay lại trang chủ</a>

Giải thích: Từ trang bai_tap_1.html trong thư mục bai_tap, quay lại trang index.html trong thư mục web (là thư mục cha của bai_tap).

Bảng tổng hợp cách viết đường dẫn tương đối:

2.3. Liên kết tới vị trí khác trong cùng trang web

Ngoài việc liên kết tới trang web hay tài liệu khác, ta có thể tạo liên kết tới một vị trí cụ thể trong cùng trang web. Ví dụ: khi đọc tới cuối trang và muốn chuyển nhanh về đầu trang.

Cách thực hiện gồm 2 bước:

Bước 1: Tạo phần tử HTML có thuộc tính id tại vị trí được liên kết đến

Việc thiết lập thuộc tính id cho thẻ HTML tại vị trí cần liên kết giống như việc cắm cờ đánh dấu trong tài liệu để có thể quay lại dễ dàng.

Lưu ý: Thuộc tính id cần được đặt tên duy nhất (chỉ xuất hiện một lần trong toàn bộ trang web) và được gọi là mã định danh đoạn.

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

Bước 2: Tạo liên kết tới phần tử trên

Để liên kết tới phần tử có id, ta thiết lập thuộc tính href với giá trị là dấu # theo sau là mã định danh đoạn.

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

Ví dụ hoàn chỉnh:

<!-- Vị trí đặt liên kết (ở đầu trang) -->
<a href="#Thong_tin">Xem thông tin chi tiết</a>

<!-- Nội dung trang web... -->

<!-- Vị trí đích (ở cuối trang) -->
<table id="Thong_tin">
    <tr>
        <td>Nội dung bảng thông tin</td>
    </tr>
</table>

2.4. Tạo liên kết từ hình ảnh

Ta có thể biến một hình ảnh thành liên kết, nghĩa là khi người dùng nhấp vào hình ảnh sẽ được chuyển đến trang khác.

Cách thực hiện:

Bước 1: Hiển thị hình ảnh trong trang web với thẻ <img>

<img src="đường dẫn tới tệp ảnh">

Trong đó, đường dẫn tới tệp ảnh cũng sử dụng đường dẫn tuyệt đối hoặc đường dẫn tương đối như trên.

Bước 2: Đặt thẻ <img> bên trong thẻ <a> để tạo liên kết

<a href="đường dẫn tới trang đích">
    <img src="đường dẫn tới tệp ảnh">
</a>

Ví dụ: Với website có cấu trúc như Hình 10.1, trong trang index.html ta đặt hình ảnh Mặt Trời (lưu trong images/sun.png) và tạo liên kết từ ảnh tới trang thong_tin.html:

<a href="thong_tin.html">
    <img src="images/sun.png">
</a>

Kết quả: Hình ảnh Mặt Trời sẽ được hiển thị và khi nhấp vào ảnh, trình duyệt sẽ chuyển đến trang thong_tin.html.

2.5. Bảng tổng hợp các loại liên kết

Thầy Phạm Thành Danh

(Người kiểm duyệt, ra đề)

Chức vụ: Trưởng ban biên soạn môn Tin Học THPT

Trình độ: Cử nhân Sư phạm Tin học, Chứng chỉ hạng II, Chứng chỉ Tin học, Ngoại ngữ B1

Kinh nghiệm: 8+ năm kinh nghiệm tại Trường THPT Thuận Hóa