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

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

BÀI 16: ĐỊNH DẠNG KHUNG

(2 tiết)

I. MỤC TIÊU

1. Kiến thức

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

• Sử dụng được CSS để định dạng khung văn bản, kích thước khung, kiểu đường viền,…

• Biết sử dụng CSS cho các bộ chọn khác nhau (id, class,…).

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:

• Phân biệt được phần tử khối và phần tử nội tuyến.

• Hiểu được ý nghĩa các thuộc tính liên quan đến khung. Chỉ ra được thuộc tính và giá trị thuộc tính đó trên ví dụ cụ thể.

• Hiểu được ý nghĩa, cách thiết lập và áp dụng bộ chọn đặc biệt (bộ chọn lớp, bộ chọn với mã định danh, bộ chọn thuộc tính) của CSS.

Năng lực số:

• 2.4.NC1a: Sử dụng thành thạo thẻ “Computed” trong công cụ Developer Tools (F12) trên trình duyệt để quan sát trực quan kích thước thực tế của các thành phần (Box Model Visualization).

• 6.1.NC1a: Phân tích được nguyên nhân gây vỡ giao diện (ví dụ: cộng dồn margin, tràn box) và đưa ra giải pháp xử lý kĩ thuật.

• 6.2.NC1a: Sử dụng Chatbot AI để tư vấn cách tính toán kích thước tổng thể của phần tử (Total Width/Height) và viết mã CSS cho các trạng thái tương tác phức tạp (hover effects).

• 5.2.NC1a: Thiết kế được các thành phần giao diện (Card, Button, Menu) có bố cục chuẩn xác từng pixel.

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.D2.2: Phát triển hệ thống AI (ứng dụng AI để gỡ lỗi và tối ưu hoá cấu trúc Box Model).

3. Phẩm chất

• Có ý thức chủ động tìm hiểu và cập nhật các kiến thức mới.

• Cẩn thận, tỉ mỉ khi viết các câu lệnh.

• Luôn có ý thức tìm kiếm, lựa chọn các cách làm mới, đơn giản và hiệu quả cho các tình huống thực tiễn.

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

• GV: SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng, bài trình chiếu (Slide), máy chiếu, phòng máy tính có kết nối Internet, các ví dụ minh hoạ tương ứng trong bài như mô tả SGK, video AI tạo bằng công cụ AI được dùng để khởi động bài học.

• 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

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

a) Mục tiêu: HS được gợi ý cách giải quyết với câu hỏi làm thế nào có thể thiết lập định dạng để ứng dụng khác biệt với cùng một phần tử HTML.

b) Nội dung: HS thảo luận nhóm để trả lời 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, sau đó nêu câu hỏi Khởi động SGK trang 89 cho các nhóm thảo luận:

Trên một trang web thường có rất nhiều phần tử cùng loại (cùng tên thẻ). Ví dụ thẻ p sẽ tương ứng với rất nhiều phần tử của trang web. Một định dạng với bộ chọn p sẽ áp dụng cho tất cả các thẻ p. Nếu muốn phân biệt các thẻ p với nhau và muốn tạo ra các CSS để phân biệt các thẻ p thì có thể thực hiện được không?

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.

- GV quan sát và hỗ trợ HS khi cần thiết.

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

- GV mời đại diện các nhóm HS trình bày kết quả thảo luận.

Gợi ý trả lời: Có thể tạo ra các CSS để phân biệt các phần tử HTML cùng loại bằng cách thiết lập các định dạng kiểu lớp.

- HS khác lắng nghe, nhận xét và bổ sung.

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: CSS có thể hỗ trợ thiết lập các định dạng kiểu lớp để định dạng khác biệt với cùng một phần tử HTML. Để giúp các em hiểu rõ hơn, chúng ta sẽ cùng nhau đến với Bài 16: Định dạng khung.

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

Hoạt động 1: Tìm hiểu và phân biệt phần tử khối và phần tử nội tuyến

a) Mục tiêu: HS biết và hiểu khái niệm kiểu phần tử khối và nội tuyến thông qua thuộc tính display.

b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1. PHÂN LOẠI PHẦN TỬ KHỐI VÀ NỘI TUYẾN và thực hiện nhiệm vụ.

c) Sản phẩm: Phần tử khối và phần tử nội tuyến.

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

Hoạt động 2: Tìm hiểu cách thiết lập định dạng khung cho các phần tử

a) Mục tiêu: HS biết được các khái niệm và định nghĩa liên quan đến khung viền của phần tử HTML, phân biệt được sự khác nhau giữa khung của phần tử khối và phần tử nội tuyến, biết cách đặt các định dạng cho khung này.

b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 2. THIẾT LẬP ĐỊNH DẠNG KHUNG BẰNG CSS, thảo luận nhóm thực hiện nhiệm vụ.

c) Sản phẩm: Cách thiết lập định dạng khung cho các phần tử.

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