Giáo án Tin học ứng dụng 12 kết nối bài 13: Khái niệm, vai trò của CSS

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

(2 tiết)

I. YÊU CẦU CẦN ĐẠT

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

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: SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng – Kết nối tri thức, bài trình chiếu (Slide), phòng máy tính có kết nối Internet, máy chiếu, trang web nhỏ và một số tệp CSS.

• HS: SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng – Kết nối tri thức, vở ghi.

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

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

a) Mục tiêu: Gợi tò mò cho HS về cách thiết lập định dạng cho trang web thông qua một ví dụ cụ thể.

b) Nội dung: HS dựa vào hiểu biết để trả lời các câu hỏi phần Khởi động tr.71 SGK.

c) Sản phẩm: Từ yêu cầu, HS vận dụng sự hiểu biết để trả lời các câu hỏi phần Khởi động tr.71 SGK.

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

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

- GV chia lớp thành các nhóm 3 – 4 HS, sau đó nêu câu hỏi Khởi động SGK trang 71 cho các nhóm thảo luận: 

Quan sát trang web trong Hình 13.1, trả lời các câu hỏi sau:

• Mã nguồn trang web có những phần tử HTML nào?

• Định dạng các phần tử HTML này có đặc điểm chung nào?

• Có thể định dạng mẫu một lần để áp dụng mẫu đó cho nhiều phần tử HTML được không?

Hình 13.1. Trang web

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

- Các nhóm HS thảo luận và trả lời các câu hỏi.

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

• Mã nguồn trang web có phần tử h1 và phần tử p.

• 2 phần tử p có định dạng giống nhau.

• Có thể định dạng mẫu một lần để áp dụng mẫu đó cho nhiều phần tử HTML.

- 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 giá kết quả của HS, dẫn dắt HS vào bài học mới: Trong một trang web có thể có nhiều phần tử HTML được định dạng giống nhau. Khi đó chúng ta cần sử dụng một công cụ hỗ trợ giúp định dạng chung cho nhiều phần tử. Vậy để tìm hiểu về công cụ đó, chúng ta sẽ cùng nhau đến với Bài 13: Khái niệm, vai trò của CSS.

----------------

………Còn tiếp………