Giáo án Tin học 12 · Kết nối tri thức · Chung, Khoa học máy tính và Tin học ứng dụng

Tin họcLớp 12Phần 4. Chủ đề 4 · Giải quyết vấn đề với sự trợ giúp của máy tính · Chung

Giáo án Bài 15. Tạo màu cho chữ và nền

Kế hoạch bài dạy theo mẫu Công văn 5512/BGDĐT-GDTrH · 1 tiết (45 phút)

Tải Word (.docx) Bài học trên Học liệu

I. Mục tiêu

1. Kiến thức

Nêu được: CSS đặt màu chữ bằng thuộc tính color và đặt màu nền bằng thuộc tính background-color.
Nêu được các cách viết màu: tên màu, mã hex #RRGGBB, rgb() và rgba().
Giải thích được: mỗi kênh RGB 8 bit nhận giá trị từ 0 đến 255; alpha nhận giá trị từ 0 (trong suốt) đến 1 (đục); màu có alpha được trộn với nền phía sau.
Vận dụng được color và background-color để tạo trang HTML/CSS có chữ và nền màu theo yêu cầu cho trước.
Nêu được: cần chọn màu tương phản, không chỉ dùng màu để truyền đạt thông tin; background-color không làm đổi màu của tệp ảnh nguồn.

2. Năng lực

a) Năng lực chung

Tự chủ và tự học: tự đọc mã mẫu, tự sửa giá trị màu trong CSS và quan sát kết quả trên trình duyệt để rút ra quy tắc.
Giao tiếp và hợp tác: trao đổi theo cặp về ý nghĩa từng kênh màu và cách trình bày nhãn “Đạt/Chưa đạt”, báo cáo kết quả rõ ràng.
Giải quyết vấn đề và sáng tạo: đề xuất cách sửa một trạng thái chỉ dùng màu để người không nhận biết được màu vẫn phân biệt được.

b) Năng lực đặc thù

Sử dụng và quản lí các phương tiện công nghệ thông tin và truyền thông: soạn tệp HTML/CSS, lưu bằng mã UTF-8 đúng tên tệp và mở tệp trên trình duyệt để kiểm tra.
Ứng xử phù hợp trong môi trường số: trình bày thông tin trên trang sao cho mọi người dùng, kể cả người không phân biệt được màu, đều đọc hiểu được.
Giải quyết vấn đề với sự hỗ trợ của công nghệ thông tin và truyền thông: thử các giá trị màu, quan sát độ tương phản trên màn hình và chọn phương án đúng.
Ứng dụng công nghệ thông tin và truyền thông trong học và tự học: dùng bài tập tương tác trên NeoEdu để tự kiểm tra kiến thức sau giờ học.
Hợp tác trong môi trường số: làm việc theo cặp, chia sẻ tệp mẫu và so sánh kết quả hiển thị giữa các máy.

3. Phẩm chất

Chăm chỉ: thử nhiều giá trị màu và kiểm tra lại kết quả đến khi trang đạt yêu cầu.
Trách nhiệm: kiểm tra sản phẩm trên nền thật, không chỉ dựa vào mã nguồn; ghi rõ giả định khi chưa có ảnh chụp kết quả.
Trung thực: ghi đúng kết quả quan sát được trên màn hình của mình, không sao chép đáp án mà không hiểu.

II. Thiết bị dạy học và học liệu

1. Giáo viên

Máy tính kết nối máy chiếu, trình duyệt web; tệp mẫu HTML/CSS trong bài (lưu UTF-8).
Học liệu số NeoEdu: bài giảng, ví dụ và bài tập tương tác tại neoedu.vn/learn/12/informatics/bai-15-tao-mau-cho-chu-va-nen.
Phiếu học tập số 1 (in hoặc chiếu), bảng phụ ghi sẵn ba cặp mã hex–rgb mẫu.
Thẻ màu hoặc hai đoạn văn bản mẫu (một chữ tương phản tốt, một chữ tương phản kém) để làm tình huống mở đầu.

2. Học sinh

Máy tính có trình duyệt web và phần mềm soạn thảo văn bản thuần (lưu được tệp .html với mã UTF-8).
Phiếu học tập số 1, bút chì, bút màu (để tự kiểm tra).
Sổ ghi chép để ghi kết quả thử nghiệm màu.

III. Tiến trình dạy học

Hoạt động 1: Mở đầu · 5 phút

Đọc chữ trên các nền khác nhau

a) Mục tiêu

Gợi nhớ kinh nghiệm thực tế về màu chữ và màu nền; nhận ra vai trò của độ tương phản và xác định nhiệm vụ học tập của bài.

b) Nội dung

GV chiếu hai dòng chữ cùng nội dung: một dòng có màu chữ và nền tương phản rõ, một dòng có màu chữ gần giống màu nền. HS quan sát và trả lời: Dòng nào dễ đọc hơn? Vì sao? Khi trình bày trên trang web, cần điều khiển màu chữ và màu nền bằng thuộc tính nào?

c) Sản phẩm

HS nêu được: dòng có tương phản rõ dễ đọc hơn vì chữ và nền khác biệt nhiều về độ sáng và màu sắc; màu chữ được đặt bằng color, màu nền bằng background-color. GV ghi tên bài “Tạo màu cho chữ và nền” lên bảng.

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

Hoạt động của giáo viên

Hoạt động của học sinh

Giáo viên
Bước 1: Chuyển giao nhiệm vụ
GV chiếu hai dòng chữ mẫu và đặt câu hỏi: Dòng nào dễ đọc hơn? Vì sao?
Học sinh
HS quan sát màn hình, suy nghĩ 30 giây và giơ tay trả lời.
Giáo viên
Bước 2: Thực hiện nhiệm vụ
GV gợi ý: Hãy nhìn xem chữ và nền khác nhau như thế nào về độ sáng và màu sắc.
Học sinh
HS so sánh hai dòng và ghi ý kiến ngắn vào sổ.
Giáo viên
Bước 3: Báo cáo, thảo luận
GV mời 2–3 HS trình bày; hỏi tiếp: Trên trang web, dùng thuộc tính nào để đổi màu chữ và màu nền?
Học sinh
Dự kiến: “Dòng thứ nhất dễ đọc vì tương phản rõ.” “Dùng color cho chữ và background-color cho nền.”
Giáo viên
Bước 4: Kết luận, nhận định
GV chốt: Muốn chữ dễ đọc cần chọn màu tương phản; CSS dùng color cho chữ, background-color cho nền. GV nêu mục tiêu của bài.
Học sinh
HS ghi tên bài và hai thuộc tính vào vở.

Hoạt động 2.1: Hình thành kiến thức mới · 12 phút

Đặt màu bằng tên, mã hex và rgb

a) Mục tiêu

Nêu được cú pháp color và background-color; giải thích được cách biểu diễn màu bằng mã hex và rgb(), mỗi kênh 8 bit có 256 mức.

b) Nội dung

HS làm việc theo cặp với Phiếu học tập số 1, phần A: đọc đoạn mã mẫu, xác định thuộc tính đặt màu chữ và màu nền; đọc mã #00FF00 và giải thích từng kênh; tính số mức của một kênh 8 bit; ghép mã hex với rgb tương ứng. HS kiểm tra thêm bằng bài giảng ví dụ trên NeoEdu.

c) Sản phẩm

Thuộc tính đặt màu chữ: color; thuộc tính đặt màu nền: background-color.
#00FF00 là rgb(0, 255, 0): kênh xanh lục tối đa, hai kênh đỏ và lam bằng 0.
Mỗi kênh 8 bit có $2^8 = 256$ mức, từ 0 đến 255.
Ghép cặp: #FF0000 là rgb(255, 0, 0); #0000FF là rgb(0, 0, 255); #FFFFFF là rgb(255, 255, 255).

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

Hoạt động của giáo viên

Hoạt động của học sinh

Giáo viên
Bước 1: Chuyển giao nhiệm vụ
GV phát Phiếu học tập số 1 (phần A), yêu cầu HS làm theo cặp trong 6 phút; chiếu đoạn mã mẫu lên bảng.
Học sinh
HS nhận phiếu, đọc mã mẫu và chia việc trong cặp (một bạn đọc mã, một bạn ghi).
Giáo viên
Bước 2: Thực hiện nhiệm vụ
GV đi quanh lớp, gợi ý: Hai chữ hex FF có nghĩa gì? Chữ số 0 trong kênh còn lại có tác dụng gì?
Học sinh
HS thử đổi giá trị trong mã mẫu, mở tệp trên trình duyệt để xem kết quả, ghi kết quả vào phiếu.
Giáo viên
Bước 3: Báo cáo, thảo luận
GV mời một cặp báo cáo cách giải thích #00FF00 và cách tính 256 mức; hỏi: Vì sao #FFFFFF là màu trắng?
Học sinh
Dự kiến: “#00FF00 có xanh lục tối đa, đỏ và lam bằng 0 nên là màu xanh lục.” “FF là 255, kênh có 255 là sáng nhất, cả ba kênh 255 cho trắng.”
Giáo viên
Bước 4: Kết luận, nhận định
GV chốt: Màu có thể viết bằng tên, mã hex #RRGGBB hoặc rgb(); mỗi kênh 8 bit nhận 0–255, tức 256 mức. GV nhắc HS không đổi màu tệp ảnh nguồn khi chỉ đặt background-color.
Học sinh
HS hoàn thiện phần A của phiếu và ghi kết luận vào vở.

Hoạt động 2.2: Hình thành kiến thức mới · 10 phút

Alpha, trộn màu nền và kiểm tra tương phản

a) Mục tiêu

Giải thích được alpha trong rgba() và việc màu có alpha được trộn với nền phía sau; nhận ra cần kiểm tra màu trên nền thật và không chỉ dùng màu để truyền thông tin.

b) Nội dung

HS thử nghiệm trên tệp mẫu: đổi giá trị alpha của rgba(255, 220, 100, 0.5) thành 0, 0,5 và 1, quan sát nền khi đặt trên nền trắng và trên nền tối; thử bỏ chữ nhãn và chỉ giữ màu để đánh giá. Làm phần B của Phiếu học tập số 1.

c) Sản phẩm

Alpha 0 là trong suốt hoàn toàn; alpha 1 là đục hoàn toàn; alpha $0{,}5$ là nền bán trong suốt, nhìn hòa vào nền phía sau.
Cùng khai báo rgba(255, 220, 100, 0.5) cho kết quả khác nhau khi đặt trên nền trắng và nền tối.
Khi chỉ dùng màu để phân biệt trạng thái, người không nhận biết được màu sẽ không hiểu; cần thêm chữ hoặc biểu tượng giải thích.

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

Hoạt động của giáo viên

Hoạt động của học sinh

Giáo viên
Bước 1: Chuyển giao nhiệm vụ
GV hướng dẫn: thay đổi alpha trong dòng .luu-y, lưu tệp, tải lại trang và ghi nhận xét; yêu cầu thử trên hai nền khác nhau.
Học sinh
HS mở tệp mẫu, đổi giá trị alpha lần lượt 0, $0{,}5$ , 1 và quan sát.
Giáo viên
Bước 2: Thực hiện nhiệm vụ
GV đi kiểm tra, hỏi: Khi alpha bằng 0, nền có còn nhìn thấy không?
Học sinh
HS ghi nhận xét vào phiếu phần B, thử thêm nền tối để so sánh.
Giáo viên
Bước 3: Báo cáo, thảo luận
GV mời HS nêu kết quả và hỏi: Nếu chỉ có hai màu đỏ và xanh không có chữ, người không phân biệt được màu có hiểu không?
Học sinh
Dự kiến: “Alpha 0 thì không thấy nền màu.” “Alpha 1 là màu đục.” “Không hiểu được, phải có chữ Đạt hoặc Chưa đạt.”
Giáo viên
Bước 4: Kết luận, nhận định
GV chốt: alpha từ 0 đến 1, màu có alpha được trộn với nền phía sau; luôn kiểm tra màu trên nền thật và dùng nhãn kèm màu để truyền thông tin.
Học sinh
HS ghi kết luận vào vở.

Hoạt động 3: Luyện tập · 10 phút

Củng cố cú pháp và nhận biết đúng sai

a) Mục tiêu

Vận dụng kiến thức về color, background-color, mã hex, rgb và alpha để trả lời đúng các câu hỏi trắc nghiệm và ghép cặp.

b) Nội dung

HS làm nhanh các câu hỏi sau trên Phiếu học tập số 1 (phần C) hoặc trên bài tập tương tác NeoEdu: (1) Thuộc tính đặt màu chữ là gì? A. background-color; B. font-family; C. color; D. border-width. (2) Mã #00FF00 biểu diễn RGB nào? A. 255,0,0; B. 0,255,0; C. 0,0,255; D. 255,255,255. (3) Alpha 0 trong rgba nghĩa là lớp màu hoàn toàn không trong suốt. Đúng hay sai? (4) Có bao nhiêu mức cho riêng kênh đỏ? (5) Ghép: #FF0000 – ?; #0000FF – ?; #FFFFFF – ?. (6) Bảng báo đạt/chưa đạt nên trình bày thế nào? A. Chỉ xanh/đỏ không nhãn; B. Chỉ dùng nền gần giống chữ; C. Màu kết hợp chữ “Đạt/Chưa đạt” rõ; D. Đổi màu ngẫu nhiên mỗi lần.

c) Sản phẩm

Đáp án: (1) C – color tác động màu chữ, nền dùng background-color. (2) B – FF ở kênh xanh lục, hai kênh còn lại 00. (3) Sai – alpha 0 là trong suốt, alpha 1 là đục hoàn toàn. (4) 256 mức, vì $2^8 = 256$ (từ 0 đến 255). (5) #FF0000 – rgb(255, 0, 0); #0000FF – rgb(0, 0, 255); #FFFFFF – rgb(255, 255, 255). (6) C – chữ/nhãn giải thích giữ được thông tin khi người dùng không phân biệt màu.

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

Hoạt động của giáo viên

Hoạt động của học sinh

Giáo viên
Bước 1: Chuyển giao nhiệm vụ
GV chiếu câu hỏi, nêu thời gian 6 phút; nhắc HS làm cá nhân trước rồi kiểm tra với bạn cùng bàn.
Học sinh
HS đọc đề và làm cá nhân vào phiếu phần C.
Giáo viên
Bước 2: Thực hiện nhiệm vụ
GV quan sát, nhắc HS đọc kỹ thuật ngữ “trong suốt” và “đục” khi làm câu 3.
Học sinh
HS trao đổi cặp, kiểm tra đáp án của nhau bằng cách đối chiếu cách đọc mã hex.
Giáo viên
Bước 3: Báo cáo, thảo luận
GV mời HS trả lời từng câu, chiếu đáp án; hỏi lại câu 3: Vì sao alpha 0 không phải là đục?
Học sinh
Dự kiến: câu 1 C, câu 2 B, câu 3 sai, câu 4 256, câu 5 ghép đúng như đáp án, câu 6 C.
Giáo viên
Bước 4: Kết luận, nhận định
GV nhận xét, chốt lỗi hay gặp: nhầm color với background-color; nhầm alpha 0 với đục hoàn toàn.
Học sinh
HS sửa lại đáp án sai trong phiếu.

Hoạt động 4: Vận dụng · 8 phút

Sửa trạng thái chỉ dùng màu

a) Mục tiêu

Vận dụng color, background-color và nhãn văn bản để sửa một trạng thái chỉ hiện chấm đỏ hoặc chấm xanh sao cho người không nhận biết được màu vẫn phân biệt được.

b) Nội dung

Đề bài: trang hiện hai trạng thái chỉ có chấm đỏ hoặc chấm xanh, không có văn bản. HS viết lại HTML/CSS: thêm nhãn “✓ Đạt” và “! Chưa đạt” kèm giải thích ngắn; đặt màu chữ .dat và .chua trên nền trắng; kiểm tra bằng cách đọc trang khi bỏ qua màu. Lưu tệp UTF-8 theo tên GV giao. Phần còn lại có thể hoàn thiện ở nhà.

c) Sản phẩm

Đoạn HTML mẫu: <p class="dat">✓ Đạt: chiều cao đã ghi đủ.</p> và <p class="chua">! Chưa đạt: thiếu ngày đo.</p>. CSS mẫu: .dat {color: #174f2a;} .chua {color: #7a241d;} trên nền trắng. Giải thích: nhãn và biểu tượng mang thông tin, màu chỉ hỗ trợ; vẫn kiểm tra độ tương phản trên màn hình thật.

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

Hoạt động của giáo viên

Hoạt động của học sinh

Giáo viên
Bước 1: Chuyển giao nhiệm vụ
GV giao đề, nhắc HS đọc phần yêu cầu và lưu tệp UTF-8 đúng tên được giao.
Học sinh
HS mở máy, tạo tệp mới và đọc đề.
Giáo viên
Bước 2: Thực hiện nhiệm vụ
GV hướng dẫn: thêm chữ vào trạng thái trước, sau đó đặt color và background-color; mở trình duyệt kiểm tra.
Học sinh
HS viết đoạn HTML và CSS, mở tệp trên trình duyệt, đọc lại trang khi không nhìn màu.
Giáo viên
Bước 3: Báo cáo, thảo luận
GV mời 2 HS trình bày sản phẩm, hỏi: Nếu bỏ hết màu thì trang còn truyền đạt được thông tin không?
Học sinh
Dự kiến: “Còn, vì có chữ Đạt và Chưa đạt.” “Màu chỉ hỗ trợ thêm, không phải dấu hiệu duy nhất.”
Giáo viên
Bước 4: Kết luận, nhận định
GV nhận xét sản phẩm và chốt: CSS đặt màu chữ bằng color, màu nền bằng background-color; luôn kèm nhãn và kiểm tra tương phản thực tế.
Học sinh
HS hoàn thiện sản phẩm và ghi nhận xét vào vở.

Phiếu học tập

Phiếu học tập số 1

Phần A – Đặt màu bằng tên, mã hex và rgb

Thuộc tính đặt màu chữ: ……
Thuộc tính đặt màu nền: ……
#00FF00 tương đương rgb(…, …, …). Giải thích: ……
Một kênh 8 bit có bao nhiêu mức? Viết phép tính: ……
Ghép: #FF0000 – ……; #0000FF – ……; #FFFFFF – ……

Phần B – Alpha và trộn màu nền

Thử rgba(255, 220, 100, alpha) với alpha = 0, 0,5 và 1. Nhận xét khi đặt trên nền trắng: ……
Nhận xét khi đặt trên nền tối: ……
Vì sao không nên chỉ dùng màu để báo Đạt/Chưa đạt? ……

Phần C – Kiểm tra nhanh

Thuộc tính đặt màu chữ là gì? A. background-color; B. font-family; C. color; D. border-width.
Mã #00FF00 biểu diễn RGB nào? A. 255,0,0; B. 0,255,0; C. 0,0,255; D. 255,255,255.
Alpha 0 trong rgba nghĩa là lớp màu hoàn toàn không trong suốt. Đúng hay sai?
Có bao nhiêu mức cho riêng kênh đỏ?
Bảng báo đạt/chưa đạt nên trình bày thế nào? A. Chỉ xanh/đỏ không nhãn; B. Chỉ dùng nền gần giống chữ; C. Màu kết hợp chữ “Đạt/Chưa đạt” rõ; D. Đổi màu ngẫu nhiên mỗi lần.

Hướng dẫn về nhà

Hoàn thiện trang báo Đạt/Chưa đạt trong hoạt động vận dụng: thêm ít nhất một trạng thái thứ ba (ví dụ “Cần kiểm tra”) với nhãn chữ và màu chữ khác nhau; lưu tệp UTF-8 theo tên GV giao.
Thử đổi giá trị alpha của một màu nền trong rgba() và chụp lại hai kết quả trên nền sáng và nền tối (mang theo ảnh hoặc mô tả bằng lời vào tiết sau); ghi lại nhận xét về độ tương phản.
Tự kiểm tra trên trang bài tập tương tác NeoEdu: neoedu.vn/learn/12/informatics/bai-15-tao-mau-cho-chu-va-nen; ghi lại câu sai và giải thích lý do bằng một câu ngắn.
Ôn lại: CSS đặt màu chữ bằng color và màu nền bằng background-color; mỗi kênh RGB 8 bit nhận 0–255; alpha từ 0 đến 1.

Giáo án do NeoEdu soạn với sự hỗ trợ của AI, dựa trên nội dung bài học trên Học liệu. Thầy cô nên đọc lại và điều chỉnh cho phù hợp với học sinh của mình; bản Word để sửa trực tiếp.