Title GA_TinHoc12_THƯD_KNTT_ CĐ4. bài 13. Khái niệm, vai trò của CSS.docx ✅

1 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ụ. 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
2 - 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
3 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. B. 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 CỦA GV VÀ HS SẢN PHẨM DỰ KIẾN 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 1 – Tìm hiểu khái niệm và ý nghĩa 1. KHÁI NIỆM MẪU ĐỊNH DẠNG CSS - Trong đoạn mã nguồn ở Hình 13.2,
4 của CSS tr.71 SGK và trả lời các câu hỏi: 1. Hình 13.2 là mã nguồn của trang web trong Hình 13.1. Em có nhận xét gì về cách thiết lập định dạng của trang này? Hình 13.2. Mã nguồn của trang web 2. Em thấy gì từ đoạn mã nguồn trên? - Từ hoạt động Khởi động, GV giới thiệu cho HS về ngôn ngữ CSS. - GV chia lớp thành các nhóm 2 – 3 HS để thảo luận và đặt câu hỏi: + CSS là gì? + Ba mẫu định dạng tương ứng với ba dòng được ghi trong cặp thẻ <style></style> ở Hình 13. 3 được dùng để làm gì? CSS có cách viết và chức năng như thế nào? + Em hãy quan sát ví dụ sau và nhận xét về phạm vi áp dụng của các mẫu định dạng CSS? các dòng từ 6 đến 10 là một loại ngôn ngữ đặc biệt dùng để thiết lập các mẫu định dạng cho trang web. Các mẫu định dạng này được gọi là Cascading Style Sheets và viết tắt là CSS. Hình 13.3. Mẫu định dạng CSS - Khái niệm: CSS là định dạng độc lập với chuẩn HTML, được dùng để thiết lập các mẫu định dạng dùng trong trang web. - Trong Hình 13.3, ba mẫu định dạng tương ứng với ba dòng được ghi trong thẻ <style>...</style>: + Mẫu thứ nhất thiết lập màu chữ đỏ cho các phần tử <h1>. + Mẫu thứ hai thiết lập khung viền màu xanh có độ dày 2 pixel cũng được áp dụng cho các phần tử <h1>. + Mẫu thứ ba thiết lập dòng đầu thụt vào 15 pixel cho tất cả các phần tử <p>.