Giáo án Bài 13: Khái niệm, vai trò của CSS Tin học 12 Kết nối tri thức

Giáo án Tin học 12 – Định hướng Tin học ứng dụng – Kết nối tri thức -----------------------------
Kenhgiaovien.com - Zalo: 0386 168 725 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 1
Giáo án Tin học 12 – Định hướng Tin học ứng dụng – Kết nối tri thức -----------------------------
Kenhgiaovien.com - Zalo: 0386 168 725
- 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? 2
Giáo án Tin học 12 – Định hướng Tin học ứng dụng – Kết nối tri thức -----------------------------
Kenhgiaovien.com - Zalo: 0386 168 725 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.
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. 3
Giáo án Tin học 12 – Định hướng Tin học ứng dụng – Kết nối tri thức -----------------------------
Kenhgiaovien.com - Zalo: 0386 168 725
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ụ:
1. KHÁI NIỆM MẪU ĐỊNH DẠNG
- GV yêu cầu HS hoạt động cá nhân, đọc CSS
Hoạt động 1 – Tìm hiểu khái niệm và ý nghĩa - Trong đoạn mã nguồn ở Hình 13.2,
của CSS tr.71 SGK và trả lời các câu hỏi:
các dòng từ 6 đến 10 là một loại ngôn
1. Hình 13.2 là mã nguồn của trang web ngữ đặc biệt dùng để thiết lập các mẫu
trong Hình 13.1. Em có nhận xét gì về cách định dạng cho trang web. Các mẫu
thiết lập định dạng của trang này?
đị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 để
Hình 13.2. Mã nguồn của trang web
thiết lập các mẫu định dạng dùng
2. Em thấy gì từ đoạn mã nguồn trên? trong trang web.
- Từ hoạt động Khởi động, GV giới thiệu cho
- Trong Hình 13.3, ba mẫu định dạng HS về ngôn ngữ CSS.
tương ứng với ba dòng được ghi trong
- GV chia lớp thành các nhóm 2 – 3 HS để
thảo luận và đặt câu hỏi: thẻ : + CSS là gì? + Mẫu thứ nhất thiết lập 4