Giáo án Khoa học máy tính 12 Kết nối bài 10: Tạo liên kết

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS hoạt động cá nhân, đọc Hoạt động 1 – Nhận biết siêu văn bản SGK tr.57 và trả lời câu hỏi:

Các tệp có phần mở rộng .docx được tạo bởi Microsoft Word có thể là một siêu văn bản còn tệp có phần mở rộng .txt tạo bởi Notepad thì không. Theo em, siêu văn bản có những đặc điểm gì?

- GV chia lớp thành các nhóm 2 – 3 HS để thảo luận và đặt câu hỏi:

+ Thế nào là siêu văn bản?

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

+ Trong HTML, các liên kết được tạo ra như thế nào?

+ Có mấy loại đường dẫn? Mỗi loại đường dẫn có đặc điểm gì?

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời Câu hỏi củng cố kiến thức SGK tr.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

Bước 2: HS thực hiện nhiệm vụ học tập:  

- HS tìm hiểu nội dung mục 1 SGK tr.57 – 58 và thảo luận theo nhóm thực hiện nhiệm vụ.

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- Đại diện các nhóm HS trả lời.

- Các nhóm khác đưa ra ý kiến nhận xét.

Hướng dẫn trả lời câu hỏi Hoạt động 1 SGK tr.57:

Đặc điểm của siêu văn bản: nội dung 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.

Hướng dẫn trả lời Câu hỏi củng cố kiến thức SGK tr.58:

+ Đường dẫn tuyệt đối: b.

+ Đường dẫn tương đối: a, c.

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

- GV kết luận:

Siêu văn bản là văn bản chứa nhiều loại dữ liệu và các liên kết tới siêu văn bản khác. Trong HTML, liên kết được xác định bằng thẻ <a> và thuộc tính href dùng để cung cấp đường dẫn (tuyệt đối hoặc tương đối) tới địa chỉ đích.

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.

- Tạo liên kết:

+ HTML sử dụng thẻ <a> để tạo 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. Đường dẫn URL phải được nằm trong cặp dấu nháy kép " ".

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

- Có hai loại URL chính:

+ Đườ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 (domain name) và đườ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. 

• Đượ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:

Hình 10.1.

Nếu đang ở trang index.html thì 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.

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

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

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS hoạt động cá nhân, đọc Hoạt động 2 – Tìm hiểu các cách tạo liên kết tới một trang web SGK trang 58 và trả lời câu hỏi:

Hãy kể tên các kiểu liên kết mà em đã gặp khi duyệt web hoặc khi đọc văn bản. 

- GV chia lớp thành các nhóm 2 – 3 HS để thảo luận và đặt câu hỏ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à gì?

+ Trong HTML, liên kết ngoài được tạo ra như thế nào?

Bước 2: HS thực hiện nhiệm vụ học tập:  

- HS tìm hiểu nội dung mục 2a SGK tr.58 và thảo luận theo nhóm thực hiện nhiệm vụ.

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- Đại diện các nhóm HS trả lời.

- Các nhóm khác đưa ra ý kiến nhận xét.

Hướng dẫn trả lời câu hỏi Hoạt động 2 SGK tr.58:

Một số kiểu liên kết: Liên kết văn bản, liên kết hình ảnh, liên kết menu và thanh điều hướng, liên kết trang web ngoại, liên kết đến vị trí cụ thể trong trang web, liên kết xã hội,…

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

2. CÁC CÁCH TẠO 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, 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 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ã:

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

Bước 1: GV chuyển giao nhiệm vụ:

- GV chia lớp thành các nhóm 2 – 3 HS để thảo luận và đặt câu hỏi:

+ Liên kết đến một vị trí khác trong cùng website được gọi là gì?

+ Trong HTML, liên kết trong được tạo ra như thế nào?

+ Có những trường hợp liên kết trong website nào? Mỗi loại liên kết được tạo ra như thế nào?

- GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời Câu hỏi củng cố kiến thức SGK tr.60:

Viết một đoạn mã HTML để hiển thị một danh sách không có 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ới ba trang tương ứng với ba tệp bai_tap_1.html, bai_tap_2.html và bai_tap_on_tap.html.

Bước 2: HS thực hiện nhiệm vụ học tập:  

- HS tìm hiểu nội dung mục 2b SGK tr.58 – 60 và thảo luận theo nhóm thực hiện nhiệm vụ. 

- GV quan sát và trợ giúp HS.

Bước 3: Báo cáo kết quả hoạt động, thảo luận: 

- Đại diện các nhóm HS trả lời.

- Các nhóm khác đưa ra ý kiến nhận xét.

Hướng dẫn trả lời Câu hỏi củng cố kiến thức SGK tr.60:

Bước 4: Đánh giá kết quả thực hiện: 

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

- GV kết luận:

Từ một vị trí trong trang web, ta có thể tạo liên kết tới trang web bất kì trên Internet, tới các trang web ở trên cùng máy chủ hay liên kết tới những vị trí khác trong cùng trang web.

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

- Liên kết đến một vị trí khác trong cùng website được gọi là liên kết trong.

- Để tạo liên kết trong, sử dụng thẻ <a> và truyền đườ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.

Hình 10.1. Cấu trúc một website

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

+ Liên kết tới trang web cùng thư mục: href="tên_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:

+ Liên kết tới trang web thuộc thư mục khác, dưới một cấp: đường dẫn 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:

+ Liên kết tới trang web thuộc thư mục khác, dưới hai (hay nhiều) cấp: đườ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 được phân cách bởi dấu "/".

Ví dụ: Tạo liên kết từ trang index.html tới trang bai_tap_on_tap.html:

* Trong trường hợp trang web liên kết tới nằm ở thư mục mức 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ụ: Tạo liên kết 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

Để 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. 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

• Bước 2: Tạo liên kết tới phần tử trên: href="#mã_định_danh_đoạn".

Ví dụ: Tạo liên kết tới bảng có id là Thong_tin:

+ Tạo liên kết tới 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í dụ: Tạo liên kết từ hình ảnh Mặt Trời tới trang thong_tin.html (Hình 10.1):

Hình 10.1.