Giáo án Khoa học máy tính 12 chân trời Bài F7: Giới thiệu CSS

BÀI F7: GIỚI THIỆU 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ẽ:

• Biết được ngôn ngữ CSS.

• Biết được các cách bổ sung mã lệnh CSS trong một trang web.

2. Năng lực

Năng lực chung: 

• Tự chủ và tự học: Tự lực (Chủ động, tích cực thực hiện công việc của bản thân).

• Giao tiếp và hợp tác: Xác định trách nhiệm và hoạt động của bản thân (Phân tích được các công việc cần thực hiện để hoàn thành nhiệm vụ của nhóm trong các hoạt động nhóm).

• Giải quyết vấn đề và sáng tạo: Hình thành và triển khai ý tưởng mới (Nêu được nhiều ý tưởng mới trong học tập, suy nghĩ không theo lối mòn, tạo ra yếu tố mới dựa trên những ý tưởng khác nhau).

Năng lực Tin học: 

• NLc (Giải quyết vấn đề với sự hỗ trợ của công nghệ thông tin và truyền thông): Biết chèn mã lệnh CSS vào trang web.

3. Phẩm chất

• Chăm chỉ: Tích cực tìm tòi và sáng tạo trong việc tìm hiểu một khái niệm mới là CSS.

• Trung thực, trách nhiệm: Trung thực khi giới thiệu bản thân, tôn trọng bản quyền khi sử dụng thông tin, hình ảnh để xây dựng trang web.

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

1. Đối với giáo viên

• SGK, SBT Tin học 12 – Định hướng Khoa học máy tính – Chân trời sáng tạo, bài trình chiếu (Slide), máy chiếu, phiếu học tập.

• Máy tính có cài sẵn phần mềm Visual Studio Code và có kết nối Internet, các tệp HTML và CSS dùng trong hoạt động Thực hành.

2. Đối với học sinh

• SGK, SBT Tin học 12 – Định hướng Khoa học máy tính – Chân trời sáng tạo, vở ghi.

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

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

a) Mục tiêu: Ôn lại kiến thức đã học và gợi ra các định dạng khác cho việc trình bày thẻ <h1> như thay đổi màu sắc và đổ bóng.

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 chia lớp thành các nhóm 3 – 4 HS, sau đó nêu câu hỏi cho các nhóm thảo luận: 

Quan sát trang web trong hình dưới đây và 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?

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 F7: Giới thiệu CSS. 

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

……Còn tiếp……