BÀI 10 - TẠO LIÊN KẾT (KNTT

Bài 10 - Tạo liên kết (kntt) Đây là bài soạn lý thuyết tin học 12 - sách Kết nối tri thức. Bài học này là kiến thức cốt lõi chung cho cả hai định hướng: Khoa học máy tính (cs) và Tin học ứng dụng (ict). Quý Thầy Cô và các em học sinh truy cập để làm tài liệu tham khảo nhé. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

TÓM TẮT NỘI DUNG:
1. Siêu văn bản và đường dẫ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
b) Liên kết đến một vị trí khác trong cùng website
3. Thực hành 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à 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. Khi xem siêu văn bản, không cần xem tuần tự từ đầu đến cuối mà có thể nhờ các siêu liên kết để truy cập vị trí tương ứng không theo trình tự nào.
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. Người dùng có thể dễ dàng truy cập đến văn bản liên kết bằng cách nháy chuột vào vị trí đặt liên kết trong văn bản ban đầu.
Trong HTML, người ta sử dụng thẻ <a> cho các liên kết. Cấu trúc chung của thẻ <a> có dạng:

Trong đó URL là địa chỉ (đường dẫn) tham chiếu tới tài liệu được liên kết. Thuộc tính href dùng để cung cấp địa chỉ của trang web hay tài nguyên được liên kết (URL) tới. Đường dẫn URL phải được nằm trong cặp dấu nháy kép " ". 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 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: Cung cấp một địa chỉ đầy đủ bao gồm cả giao thức (http:// hoặc https://), tên miền (doman name) là tên đường dẫn chi tiết nếu cần. Khi sử dụng liên kết trên mạng Internet (mà tài liệu không nằm trên máy chủ của mình), ta cần phải sử dụng đường dẫn tuyệt đối. Ví dụ: href=”https://www.nxbgd.vn/”. Đôi khi đường dẫn tuyệt đối rất dài và khó nhìn, ta vẫn cần để một cách chính xác.
• Đườ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. Đường dẫn tương đối được 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), nó không yêu cầu giao thức hay tên miền, mà chỉ cần tên đường dẫn. Ví dụ: Với cấu trúc website như Hình 10.1, nếu ta đang ở trang index.html thì liên kết href=”BT/bai_tap_1.html” là đường dẫn tương đối tới tệp tin bai_tap_1.html trong thư mục BT, thư mục BT nằm trong cùng thư mục cha với index.html.

2. CÁC 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 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 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 trên website của Nhà xuất bản Giáo dục Việt Nam trên trang web của mình, em sử dụng đoạn mã:

Kết quả có được là đoạn văn bản đã được liên kết đến trang web Sách điện tử của bộ sách Kết nối tri thức với cuộc sống. Khi nháy chuột vào liên kết, trình duyệt sẽ gọi tới trang web Sách điện tử và hiển thị nội dung trang web.

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

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 (http:// hoặc https://), trình duyệt kiểm tra địa chỉ đó trên máy chủ hiện tại để tìm tài liệu và liên kết. Tên đường dẫn được sử dụng để xác định tệp được liên kết.
Để hiểu rõ về cách viết đường dẫn tương đối, xét website có cấu trúc đơn giản như Hình 10.1.

Các trường hợp liên kết trong website có thể là:
• Liên kết tới trang web cùng thư mục
Để liên kết tới một tệp trong cùng thư mục, ta chỉ cần cung cấp tên của tệp liên kết tới. Ví dụ tạo liên kết từ trang index.html tới trang thong_tin.html như sau:

• Liên kết tới trang web thuộc thư mục khác, dưới một cấp.
Đường dẫn đến trang web khác thư mục, dưới một cấp gồm tên thư mục và tên tệp được phân cách bằng dấu “/”. Ví dụ: tạo liên kết từ trang index.html tới trang bai_tap_1.html như sau:

• Liên kết tới trang web thuộc thư mục khác dưới hai (hay nhiều) cấp.
Tương tự, đường dẫn gồm tên các thư mục và tên tệp cần được liên kết theo thứ tự từ trên xuống. Mỗi cấp thư mục hoặc tệp tin được phân cấp bởi dấu “/”. Ví dụ: tạo liên kết từ trang index.html tới trang bai_tap_on_tap.html như sau:

Trong trường hợp trang web liên kết tới nằm ở thư mục cấp trên, ta sử dụng các ký tự “../”. Khi sử dụng “../” trong đường dẫn, tức là chỉ định “trở lại thư mục trên một mức” của thư mục chứa tệp có liên kết. Số cụm “../” trong đường dẫn tương ứng với số mức quay trở lại thư mục ở mức trên.
Ví dụ, đoạn mã html sau chỉ dẫn địa 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 mẹ của thư mục bai_tap:

• 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ụ như khi ta đọc tới cuối trang mà muốn chuyển nhanh về đầu trang. Để tạo liên kết trong cùng trang ta thực hiện hai bước:
Bước 1. Tạo phần tử HTML có thuộc tính id nằm tại vị trí được liên kết đến.
Bước 2. Tạo liên kết tới phần tử trê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ờ trong tài liệu để có thể quay lại dễ dàng. Để là vị trí đích, thuộc tính id cần được đặt tên duy nhất (chỉ xuất hiện duy nhất một lần trong toàn bộ trang web) và được gọi là mã định danh đoạn.
Để liên kết tới phần tử vừa tạo, ta thiết lập thuộc tính href="#mã_định_danh_đoạn”.
Ví dụ: Hai câu lệnh dưới đây sẽ tạo một bản với id là Thong_tin và đặt liên kết tới bảng đó:

• Tạo liên kết cho hình ảnh.
Để tạo liên kết tới hình ảnh, ta cần hiển thị ảnh trong trang web với thẻ <img>:

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.
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 được lưu trong tệp có địa chỉ images/sun.png và tạo đường liên kết từ ảnh tới trang thong_tin.html thì đoạn mã có dạng như sau: