Năng lực học tập, tự học: HS biết tự tìm kiếm, chuẩn bị và lựa chọn tài liệu, phương tiện học tập trước giờ học, quá trình tự giác tham gia các và thực hiện các hoạt động học tập cá nhân trong giờ học ở trên lớp,…
Năng lực giao tiếp và hợp tác: Khả năng phân công và phối hợp thực hiện nhiệm vụ học tập.
Năng lực giải quyết vấn đề sáng tạo: HS đưa ra các phương án trả lời cho câu hỏi, bài tập xử lý tình huống, vận dụng kiến thức, kĩ năng của bài học để giải quyết vấn đề thường gặp.

Năng lực Tin học:

Hiểu được khái niệm siêu văn bản, đường dẫn, đường dẫn tương đối và đường dẫn tuyệt đối.
Tạo được các siêu liên kết.

Năng lực số:

1.1.NC1a: Đáp ứng được nhu cầu thông tin.
1.1.NC1b: Áp dụng được kỹ thuật tìm kiếm để lấy được dữ liệu, thông tin và nội dung trong môi trường số.
1.3.NC1a: Thao tác được thông tin, dữ liệu và nội dung để tổ chức, lưu trữ và truy xuất dễ dàng hơn.
3.1.NC1a: Áp dụng được các cách tạo và chỉnh sửa nội dung ở các định dạng khác nhau.
3.2.NC1a: Làm việc với các mục nội dung và thông tin mới khác nhau, sửa đổi, tinh chỉnh, cải thiện và tích hợp chúng để tạo ra những mục mới và độc đáo.
3.4.NC1a: Lập trình.
5.2.NC1b: Áp dụng được các công cụ số khác nhau và các giải pháp công nghệ có thể có để giải quyết vấn đề.
6.1.NC1a: Phân tích được cách AI hoạt động trong các ứng dụng cụ thể.
6.2.NC1a: Lựa chọn và sử dụng được các công cụ AI phù hợp để nâng cao hiệu suất học tập và giải quyết vấn đề.

3. Phẩm chất

Hình thành tư duy tổng quan về sự liên kết giữa các thành phần trong một tổng hợp phức tạp.
Có trách nhiệm khi chia sẻ các nguồn tài nguyên trên không gian mạng.

II. THIẾT BỊ DẠY HỌC VÀ HỌC LIỆU

GV: KHBD, SGK, SBT Tin học 12 – Định hướng Khoa học máy tính – Kết nối tri thức, bài trình chiếu (Slide), phòng thực hành máy tính cài sẵn phần mềm soạn thảo HTML và kết nối Internet, máy chiếu, video AI tạo bằng công cụ AI được dùng để khởi động bài học, bộ câu hỏi trắc nghiệm trên phần mềm Quizizz.
HS: SGK, SBT Tin học 12 – Định hướng Khoa học máy tính – Kết nối tri thức, vở ghi.

III. TIẾN TRÌNH DẠY HỌC

1. HOẠT ĐỘNG KHỞI ĐỘNG

a) Mục tiêu: HS thấy được sự khác biệt giữa nội dung sách báo giấy và trang web. Từ đó thấy được những ưu việt của các trang web, khơi gợi tò mò cho HS, tạo hứng khởi bắt đầu bài học.

b) Nội dung: HS dựa vào hiểu biết để trả lời các câu hỏi.

c) Sản phẩm: Từ yêu cầu, HS vận dụng sự hiểu biết để trả lời câu hỏi GV đưa ra.

d) Tổ chức thực hiện:

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

- GV yêu cầu xem video AI được thiết kế để phục vụ bài dạy và trả lời câu hỏi xuất hiện trong video đó.

- GV chia lớp thành 4 nhóm học tập, cho HS xem website về báo điện tử https://vnexpress.net/, sau đó nêu câu hỏi Khởi động SGK trang 57 cho các nhóm thảo luận:

Em hãy nêu những điểm khác biệt khi em đọc thông tin trên các trang web với việc em đọc sách, báo giấy. Theo em, điểm khác biệt nào là quan trọng nhất?

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

- HS xem video và suy nghĩ câu trả lời.

- Các nhóm HS thảo luận và trả lời câu hỏi Khởi động SGK trang 57.

- GV quan sát quá trình các nhóm thảo luận, giải đáp thắc mắc nếu HS chưa rõ.

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

- GV mời một số nhóm báo cáo kết quả thảo luận.

Gợi ý trả lời:

Có một số điểm khác biệt quan trọng khi đọc thông tin trên các trang web so với việc đọc sách, báo giấy. Trong số đó, điểm khác biệt quan trọng nhất là tính tương tác và linh hoạt. Khi đọc thông tin trên các trang web, người đọc có thể tương tác trực tiếp với nội dung bằng cách nháy chuột vào liên kết để đi tới nội dung khác, tìm kiếm, xem video, gửi phản hồi, chia sẻ với người khác,…

- Các nhóm khác lắng nghe và góp ý.

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

- GV nhận xét, đánh giá và kết luận.

[6.1.NC1a: HS sử dụng công cụ AI hoặc sản phẩm số do GV cung cấp để tiếp nhận thông tin, trả lời câu hỏi đơn giản.

2.1.NC1a: HS thực hiện các tương tác cơ bản với học liệu số (xem video, trả lời câu hỏi trên môi trường số).

1.1.NC1a: HS tiếp cận, khai thác được thông tin từ nguồn học liệu số dưới sự hướng dẫn của GV.]

- GV đánh giá kết quả của HS, dẫn dắt HS vào bài học mới: Khi xây dựng trang web bằng HTML, các em có thể tạo liên kết từ một vị trí nào đó tới một vị trí bất kì trên Internet. Và để thực hiện được điều đó, chúng ta sẽ cùng nhau tìm hiểu Bài 10: Tạo liên kết.

2. HÌNH THÀNH KIẾN THỨC MỚI

Hoạt động 1: Nhận biết siêu văn bản

a) Mục tiêu: HS nhận biết đặc điểm đã chỉ ra trong hoạt động Khởi động chính là đặc điểm của siêu văn bản: có thể tạo liên kết tới các vị trí khác, từ đó có thể nhanh chóng chuyển đến vị trí được tham chiếu một cách chính xác.

b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1. SIÊU VĂN BẢN VÀ ĐƯỜNG DẪN, thảo luận nhóm thực hiện nhiệm vụ.

c) Sản phẩm: Khái niệm siêu văn bản, siêu liên kết, đường dẫn tuyệt đối và đường dẫn tương đối.

d) Tổ chức thực hiện:

…………………………………………..

Hoạt động 2: Tìm hiểu các cách tạo liên kết tới một trang web

a) Mục tiêu: HS nhận biết được khi nào nên dùng bố cục dạng bảng.

b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 2. CÁC CÁCH TẠO LIÊN KẾT TỚI MỘT TRANG WEB, thảo luận nhóm thực hiện nhiệm vụ.

c) Sản phẩm: HS biết cách tạo liên kết tới một trang web.

d) Tổ chức thực hiện:

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

SẢN PHẨM DỰ KIẾN

NLS

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

- 1.3.NC1a: Xác định cấu trúc, lưu trữ và biểu diễn dữ liệu (sử dụng các thẻ HTML) trong các hệ thống phức tạp.

- 3.4.NC1a: Viết được mã lệnh tạo liên kết.

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:

kenhhoctap

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.

kenhhoctap

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"

kenhhoctap

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 "/".

kenhhoctap

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 "/".

kenhhoctap

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

kenhhoctap

Hình 10.1.

kenhhoctap

Hoạt động 3: Thực hành tạo liên kết

a) Mục tiêu: HS vận dụng các nội dung đã học để tạo website có nhiều trang web liên kết với nhau.

b) Nội dung: GV hướng dẫn HS thực hiện theo 2 nhiệm vụ trong SGK để tạo liên kết theo yêu cầu.

c) Sản phẩm: HS tạo được liên kết trong cùng trang và liên kết sang trang khác.

d) Tổ chức thực hiện:

…………………………………………..

3. HOẠT ĐỘNG LUYỆN TẬP

a) Mục tiêu: HS vận dụng các kiến thức đã học để giải quyết bài toán.

b) Nội dung: GV giao nhiệm vụ cho HS, HS hoàn thành phiếu bài tập và phần Luyện tập SGK tr.61.

c) Sản phẩm học tập:

- Phiếu bài tập và phần Luyện tập SGK tr.61.

- HS hoàn thiện hiểu biết cơ bản về tạo liên kết.

d) Tổ chức thực hiện:

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

- GV tổng hợp các kiến thức cần ghi nhớ cho HS.

- GV tổ chức trò chơi trắc nghiệm nhanh trên Quizizz để củng cố toàn bài.

- GV cung cấp mã QR hoặc đường Links cho HS làm Phiếu bài tập, trả lời nhanh một số câu hỏi trắc nghiệm tổng kết bài học.

Trường THPT:………………………………………….

Lớp:……………………………………………………...

Họ và tên:……………………………………………….

PHIẾU BÀI TẬP TIN HỌC 12

ĐỊNH HƯỚNG KHOA HỌC MÁY TÍNH – KẾT NỐI TRI THỨC

BÀI 10: TẠO LIÊN KẾT

A. PHẦN TRẮC NGHIỆM NHIỀU PHƯƠNG ÁN LỰA CHỌN

Khoanh tròn vào chữ cái đứng trước câu trả lời đúng nhất:

Câu 1. Đoạn mã HTML dùng để tạo liên kết tới trang web https://www.google.com/ là

A. <a url="https://www.google.com/">Google</a>.

B. <a href="https://www.google.com/">Google</a>.

C. <a link="https://www.google.com/">Google</a>.

D. <a domain="https://www.google.com/">Google</a>.

Câu 2. Đoạn mã HTML dùng để tạo liên kết từ trang homepage.html tới trang product.html trong thư mục project là

A. <a href="project/homepage.html">Product List</a>.

B. <a url="project/product">Product List</a>.

C. <a link="project/product.html">Product List</a>.

D. <a href="project/product.html">Product List</a>.

Câu 3. Khi tạo liên kết tới một vị trí cụ thể trong cùng trang web, em cần tạo phần tử HTML có thuộc tính gì tại vị trí được liên kết đến?

A. Thuộc tính src.

B. Thuộc tính target.

C. Thuộc tính class.

D. Thuộc tính id.

Câu 4. Trong trường hợp trang web liên kết tới thuộc thư mục khác và ở mức trên, ta sử dụng các kí tự nào khi viết đường dẫn?

A. "..".

B. "./".

C. "../".

D. "/..".

Câu 5. Trường hợp liên kết nào sau đây là liên kết ngoài?

A. Liên kết từ một trang web tới một trang web khác trên Internet.

B. Liên kết tới trang web thuộc thư mục khác, dưới hai (hay nhiều) cấp.

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

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

B. PHẦN TRẮC NGHIỆM ĐÚNG – SAI

Câu 1. Siêu văn bản 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 tới siêu văn bản khác.

a. Các tệp có phần mở rộng .txt đều là các siêu văn bản.

b. Trong HTML, người ta sử dụng thẻ <href> để tạo siêu liên kết.

c. Có hai loại đường dẫn chính là đường dẫn tuyệt đối và đường dẫn tương đối.

d. Đường dẫn tương đối không yêu cầu giao thức hay tên miền mà chỉ cần tên đường dẫn.

LUYỆN TẬP:

Câu 1. Viết đoạn mã để tạo liên kết quay về trang chủ CLB.html trong trang thong_tin.html.

Câu 2. Viết một trang web giới thiệu bản thân, trong đó để ít nhất ba liên kết tới trang web (có thể là Facebook) của ba bạn cùng lớp.

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

- HS suy nghĩ, hoàn thành các bài tập GV yêu cầu và phần Luyện tập SGK tr.61.

- GV quan sát và hỗ trợ, hướng dẫn HS.

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

- HS trả lời nhanh câu hỏi trắc nghiệm.