Giáo án Bài 14: Định dạng văn bản bằng 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 14: ĐỊNH DẠNG VĂN BẢN BẰNG CSS (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 văn bản, phông chữ. 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:
- Biết cách khai báo các thuộc tính định dạng phông chữ, màu sắc chữ, dòng văn bản.
- Hiểu được tính kế thừa của các mẫu định dạng CSS.
- Biết cách chọn theo thứ tự của các mẫu định dạng CSS. 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. 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
- Cẩn thận, tỉ mỉ khi viết các câu lệnh.
- Nâng cao tinh thần trách nhiệm khi làm việc nhóm.
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, các ví dụ
minh hoạ tương ứng trong bài như mô tả SGK.
- 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:
- HS định hướng được những nội dung định dạng văn bản có thể thực hiện được.
- Ôn tập lại kiến thức bài cũ, khơi gợi nhu cầu học tập nội dung mới.
b) Nội dung: HS dựa vào kiến thức đã học để trả lời các câu hỏi Khởi động tr.76 SGK.
c) Sản phẩm: Từ yêu cầu, HS vận dụng kiến thức đã học để trả lời câu hỏi Khởi động tr.76 SGK.
d) Tổ chức thực hiện:
Bước 1: GV chuyển giao nhiệm vụ:
- GV yêu cầu HS suy nghĩ trả lời câu hỏi Khởi động SGK trang 76:
Quan sát đoạn văn bản được thể hiện trên một trang web trong Hình 14.1. Em có
nhận xét gì về các định dạng liên quan đến phông chữ của văn bản?
Hình 14.1. Đoạn văn bản trên trang web 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
Bước 2: HS thực hiện nhiệm vụ học tập:
- HS vận dụng những kiến thức đã học để trả lời câu hỏ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 một số HS xung phong trả lời câu hỏi Khởi động tr.76 SGK.
Gợi ý trả lời: Đoạn văn bản trong Hình 14.1 sử dụng các phông chữ khác nhau.
- 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 giá kết quả của HS, dẫn dắt HS vào bài học mới: Việc định dạng phông chữ,
màu chữ và dòng văn bản sẽ nhanh và thuận tiện hơn khi sử dụng các mẫu định dạng
CSS. Vậy để giúp các em biết cách sử dụng CSS để định dạng văn bản, phông chữ,
chúng ta sẽ cùng nhau đến với Bài 14: Định dạng văn bản bằng CSS.
B. HÌNH THÀNH KIẾN THỨC MỚI
Hoạt động 1: Tìm hiểu các mẫu định dạng CSS định dạng văn bản
a) Mục tiêu: HS biết và nắm được một vài thuộc tính quan trọng của định dạng CSS
thường dùng để tạo khuôn và định dạng cho văn bản của trang web.
b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1. ĐỊNH DẠNG VĂN
BẢN BẰNG CSS, thảo luận nhóm thực hiện nhiệm vụ.
c) Sản phẩm: Các mẫu định dạng phông chữ, màu chữ, dòng văn bản.
d) Tổ chức thực hiện:
HOẠT ĐỘNG CỦA GV VÀ HS
SẢN PHẨM DỰ KIẾN
a) CSS định dạng phông chữ
1. ĐỊNH DẠNG VĂN BẢN BẰNG
Bước 1: GV chuyển giao nhiệm vụ: CSS
- GV yêu cầu HS đọc Hoạt động 1 – Tìm a) CSS định dạng phông chữ
hiểu các mẫu định dạng CSS định dạng văn CSS hỗ trợ thiết lập các thuộc tính bản tr.76 SGK:
liên quan đến chọn phông (font- 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
Các định dạng văn bản trong Hình 14.1 đều family), chọn cỡ chữ (font-size), chọn
liên quan đến định dạng kí tự gồm phông kiểu chữ (font-style), độ dày nét chữ
chữ, màu chữ và kiểu chữ. Các thuộc tính của (font-weight) và nhiều thuộc tính
CSS liên quan bao gồm định dạng phông chữ khác.
(text font), màu chữ (text color) và dòng văn - font-family:
bản (text line). Quan sát và thảo luận để hiểu + Chọn phông.
rõ hơn các mẫu định dạng CSS này.
+ Các phông chữ có thể được chia làm năm loại sau:
 serif: chữ có chân.
 sans-serif: chữ không chân.
Hình 14.1. Đoạn văn bản trên trang web
 monospace: chữ có chiều rộng
- GV chia lớp thành các nhóm 2 – 3 HS để đều nhau.
thảo luận và đặt câu hỏi:
 cursive: chữ viết tay.
+ CSS hỗ trợ thiết lập những thuộc tính liên
 fantasy: chữ trừu tượng.
quan đến định dạng phông chữ nào?
+ Mỗi thuộc tính có ý nghĩa và giá trị như thế
nào? Nêu ví dụ minh hoạ.
Bước 2: HS thực hiện nhiệm vụ học tập: Hình 14.2. Font-family
- HS tìm hiểu nội dung mục 1a SGK tr.76 – Ví dụ:
77 và thảo luận theo nhóm thực hiện nhiệm
+ Sau thuộc tính font-family là một vụ.
- GV quan sát và trợ giúp HS.
hay một danh sách các tên phông chữ.
Bước 3: Báo cáo kết quả hoạt động, thảo + Nếu tên phông chữ có chứa dấu luận:
cách thì cần đặt trong hai dấu nháy
- Đại diện các nhóm HS trả lời. kép (hoặc nháy đơn).
- Các nhóm khác đưa ra ý kiến nhận xét.
+ Danh sách các phông chữ này
thường cùng loại và tên của loại 4