GA tích hợp NLS và AI Tin học 12 THUD Bài 13: Khái niệm, vai trò của CSS

Giáo án năng lực số và AI Tin học 12 (ứng dụng) Bài 13: Khái niệm, vai trò của CSS được biên soạn theo định hướng phát triển phẩm chất – năng lực. Nội dung có tích hợp NLS và AI giúp HS rèn luyện khả năng ứng dụng công nghệ, thao tác số ngay trong tiết học. Tài liệu ở dạng file Word, dễ chỉnh sửa – dễ tải về, phù hợp cho GV sử dụng từ năm học 2026.

Nội dung chi tiết

Ngày soạn:…/…/…

Ngày dạy:…/…/…

BÀI 13: KHÁI NIỆM, VAI TRÒ CỦA CSS

(2 tiết)

I. MỤC TIÊU

1. Kiến thức

Sau bài học này, HS sẽ:

Hiểu được vai trò và ý nghĩa của mẫu định dạng CSS (Cascading Style Sheets) trong việc trình bày trang web.

2. Năng lực

Năng lực chung:

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:

Thực hiện thiết lập CSS bằng 3 cách trong một số ví dụ cụ thể, từ đó thấy được ưu và nhược điểm của từng cách, lựa chọn được cách thực hiện phù hợp với nhiệm vụ.

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ố.
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.4.NC1a: Lập trình.
5.1.NC1b: Hiểu nguyên lý hoạt động của các hệ thống kỹ thuật số và tối ưu hóa hệ thống.
5.2.NC1a: Đánh giá và lựa chọn các công cụ số, môi trường hoặc giải pháp kỹ thuật số phù hợp để giải quyết các nhu cầu.
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ể.

Năng lực AI:

12.C2.1: Các yêu cầu dành cho công cụ AI hỗ trợ các hoạt động học tập và xã hội (hỗ trợ việc lựa chọn công cụ AI phù hợp trong học tập).
12.D1.1: Giải pháp hệ thống AI (HS phân tích và nhận diện phương án thiết kế hệ thống tách biệt HTML – CSS).

3. Phẩm chất

Hình thành ý thức trách nhiệm khi làm việc nhóm. Rèn tính cẩn thận, kiên trì, chăm chỉ học hỏi để hoàn thành nhiệm vụ được giao.

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

GV: KHBD, SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng, 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 Tin học ứng dụng, vở ghi.

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

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

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

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

Hoạt động 1: Tìm hiểu khái niệm và ý nghĩa của CSS

a) Mục tiêu: HS được làm quen với khái niệm CSS và ý nghĩa của mẫu định dạng CSS.

b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1. KHÁI NIỆM MẪU ĐỊNH DẠNG CSS, thảo luận nhóm thực hiện nhiệm vụ.

c) Sản phẩm: Khái niệm và ý nghĩa của CSS.

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

Hoạt động 2: Tìm hiểu cấu trúc tổng quát của CSS

a) Mục tiêu: HS biết được cấu trúc tổng quát của các mẫu định dạng CSS và ý nghĩa của các mẫu định dạng này trong văn bản HTML.

b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 2. CẤU TRÚC CSS, thảo luận nhóm thực hiện nhiệm vụ.

c) Sản phẩm: Cấu trúc tổng quát của CSS.

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

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

Hoạt động 3: Tìm hiểu ý nghĩa, vai trò của CSS

a) Mục tiêu: HS nắm được ý nghĩa, vai trò của CSS.

b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 3. VAI TRÒ, Ý NGHĨA CỦA CSS, thảo luận nhóm thực hiện nhiệm vụ.

c) Sản phẩm: Ý nghĩa, vai trò của CSS.

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

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

SẢN PHẨM DỰ KIẾN

NLS/AI

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

- GV yêu cầu HS hoạt động theo nhóm 2 – 3 HS, đọc Hoạt động 3 – Tìm hiểu ý nghĩa, vai trò của CSS tr.74 SGK và thảo luận trả lời các câu hỏi:

Tìm hiểu, thảo luận và trả lời các câu hỏi sau:

1. Nếu không dùng CSS thì các định dạng của trang web phải thực hiện theo cách nào?

2. Sử dụng CSS có những ưu điểm gì trong việc định dạng trang web?

- GV chia lớp thành các nhóm 2 – 3 HS và yêu cầu:

Sử dụng công cụ số tìm kiếm thông tin kết hợp đọc SGK để trả lời các câu hỏi sau:

+ Sử dụng CSS có ý nghĩa như thế nào trong việc định dạng trang web?

+ CSS có vai trò như thế nào trong việc định dạng trang web?

- Khi thảo luận về ưu điểm của CSS trong việc tách biệt nội dung và định dạng để "tối ưu hóa hệ thống", GV mở rộng về việc cấu trúc dữ liệu sạch (HTML) kết hợp với CSS độc lập sẽ giúp các thuật toán AI dễ dàng trích xuất thông tin (Web Scraping/Parsing) hơn. HS nhận diện việc tách biệt này là một "phương án thiết kế" hệ thống thông minh, giúp trang web vận hành hiệu quả hơn trong hệ sinh thái số có AI.

- 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.75:

Câu 1. Nếu muốn tất cả các đoạn văn bản của trang web có màu xanh (blue) thì cần thiết lập định dạng CSS như thế nào?

Câu 2. Giả sử có một mẫu định dạng CSS như sau:

Hãy giải thích ý nghĩa của mẫu định dạng CSS trên.

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

- HS sử dụng công cụ số tìm hiểu kiến thức.

- HS tìm hiểu nội dung mục 3 SGK tr.74 – 75 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:

- HS đọc kết quả tìm kiếm, đối chiếu với SGK và rút ra kết 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 3 SGK tr.74:

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

3. VAI TRÒ, Ý NGHĨA CỦA CSS

- Ý nghĩa: Nếu không dùng CSS thì khi định dạng nội dung trang web ta phải thực hiện thông qua việc thiết lập các thuộc tính cho từng phần tử HTML.

- Vai trò: CSS ra đời để phục vụ việc định dạng nội dung trang web một cách thống nhất, nhanh chóng và thuận tiện:

+ CSS tách việc nhập nội dung trang web bằng thẻ HTML và việc định dạng thành hai công việc độc lập với nhau.

Giúp giảm nhẹ công việc nhập nội dung, tăng tính chuyên nghiệp của việc định dạng.

+ Các mẫu định dạng của CSS có thể được viết ngay trong phần head của trang HTML, chỉ cần viết một lần và áp dụng cho tất cả các phần tử trong bộ chọn.

Các định CSS được thiết lập một lần và được dùng nhiều lần.

+ Các mẫu định dạng có thể viết trong tệp CSS ngoài và kết nối vào bất kì trang web nào.

Tính năng này cho phép định dạng một lần và áp dụng cho nhiều trang web, thậm chí cả một website. Nếu một website (hay trang web) cần thay đổi định dạng thì có thể chỉ cần chỉnh sửa một lần.

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

- 5.2.NC1b: HS sử dụng công cụ số để tìm kiếm thông tin.

- 5.1.NC1b: HS phân tích và giải thích được việc sử dụng CSS giúp giảm dung lượng tệp HTML, tiết kiệm băng thông mạng và tăng tốc độ tải trang – một yếu tố then chốt trong trải nghiệm người dùng và tối ưu hóa công cụ tìm kiếm.

- 12.D1.1: HS phân tích và nhận diện phương án thiết kế hệ thống tách biệt HTML – CSS là cách vận hành tối ưu giúp các hệ thống AI xử lý dữ liệu web chính xác và hiệu quả hơn.

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

a) Mục tiêu: Giúp HS củng cố lại kiến thức được học trong bài.

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

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

- Phiếu bài tập.

- HS hiểu rõ hơn về khái niệm, vai trò của CSS.

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

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

4. HOẠT ĐỘNG VẬN DỤNG

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

b) Nội dung: GV hướng dẫn HS hoàn thành bài tập phần Vận dụng SGK tr.75.

c) Sản phẩm: HS hoàn thành bài tập phần Vận dụng SGK tr.75.

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

Bước 1: GV chuyển giao nhiệm vụ học tập

- GV yêu cầu HS hoạt động cá nhân, hoàn thành bài tập phần Vận dụng SGK trang 75.

Câu 1. Trong các phần mềm soạn thảo văn bản thường có chức năng tạo các mẫu định dạng Style Sheet, dùng để tạo khuôn cho các đoạn (paragraph) của văn bản. Em hãy trình bày sự giống nhau và tương thích của Style Sheet trong các phần mềm soạn thảo văn bản với CSS của trang web.

Câu 2. Thiết lập trang web với nội dung sau và định dạng trang bằng các mẫu CSS.

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

- HS tiếp nhận và thực hiện nhiệm vụ.

- GV quan sát, hỗ trợ khi HS cần.

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

- HS quan sát bài làm của các bạn khác, nhận xét nhau.

Gợi ý trả lời:

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

[3.4.NC1a: Viết mã lệnh HTML, CSS.

3.1.NC1a: Sử dụng các công cụ kỹ thuật số để tạo, thiết kế và phát triển các nội dung số phức tạp.]

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

- GV chuẩn kiến thức và kết thúc tiết học.

* HƯỚNG DẪN VỀ NHÀ

Ghi nhớ kiến thức trong bài.
Hoàn thành các bài tập trong SBT.
Chuẩn bị bài mới Bài 14 – Định dạng văn bản bằng CSS.

GA tích hợp NLS và AI Tin học 12 THUD Bài 13: Khái niệm, vai trò của CSS

Nội dung chi tiết

Đầy đủ GA tích hợp NLS và AI Tin học 12 TH ứng dụng - Trọn bộ cả năm

Tài liệu cùng môn học

Tài liệu khác

Xem thêm nội dung