Ngày soạn:…/…/…

Ngày dạy:…/…/…

BÀI 15: TẠO MÀU CHO CHỮ VÀ NỀN

(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 màu để thiết lập màu cho chữ và nền.

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:

• Hiểu được cách thiết lập hệ thống màu sắc của CSS.

• Biết cách sử dụng các thuộc tính màu sắc của định dạng CSS.

• Hiểu được bộ chọn CSS dạng tổ hợp các phần tử có quan hệ và ý nghĩa của các bộ chọn này.

Năng lực số:

• 2.4.NC1a: Sử dụng thành thạo công cụ dành cho nhà phát triển (Developer Tools/Inspect Element) trên trình duyệt để trích xuất mã màu (Color Picker) và kiểm tra sự phân cấp phần tử HTML (DOM tree).

• 6.2.NC1a: Sử dụng Chatbot AI để tạo bảng màu (Color Palette) hài hòa theo nguyên tắc thiết kế UI; nhờ AI giải thích và tạo ví dụ minh họa cho các bộ chọn phức tạp.

• 5.2.NC1a: Viết mã CSS sạch, tối ưu để thiết kế giao diện web có tính thẩm mỹ cao.

• 3.3.NC1a: Kiểm tra và tuân thủ quyền sử dụng hình ảnh khi thiết lập ảnh nền (background-image).

Năng lực AI:

• 12.C2.1: Các yêu cầu dành cho công cụ AI hỗ trợ các hoạt động học tập và xã hội (hỗ trợ việc lựa chọn công cụ AI phù hợp trong học tập).

• 12.D2.2: Phát triển hệ thống AI (ứng dụng AI để phân tích và gỡ lỗi mã lệnh CSS khi thiết lập bộ chọn phức tạp).

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.

• 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, 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, video AI tạo bằng công cụ AI được dùng để khởi động bài học.

• HS: SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng, vở ghi.

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

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

a) Mục tiêu:

- HS biết được có nhiều cách khác nhau để thiết lập giá trị cho thuộc tính màu sắc của đối tượng.

- Ô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 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 yêu cầu xem video AI được thiết kế để phục vụ bài dạy và trả lời câu hỏi xuất hiện trong video đó.

- GV trình chiếu hình ảnh trên slide để gợi ý cho HS trả lời câu hỏi Khởi động tr.83 SGK:

Các định dạng sau có thiết lập cùng một màu hay không? Em có nhận xét gì về cách thiết lập màu này?

a)

b)

c)

Bước 2: HS thực hiện nhiệm vụ học tập:

- HS xem video và suy nghĩ câu trả lời.

- HS quan sát hình ảnh và 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: Cả ba định dạng đều thiết lập cùng một màu tím, tuy nhiên mỗi định dạng lại sử dụng một hệ thống màu khác nhau:

a) Sử dụng giá trị RGB để thiết lập màu.

b) Sử dụng mã màu HEX để thiết lập màu.

c) Sử dụng giá trị HSL để thiết lập màu.

- 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ận xét, đánh giá và kết luận.

[6.1.NC1a: HS sử dụng công cụ AI hoặc sản phẩm số do GV cung cấp để tiếp nhận thông tin, trả lời câu hỏi đơn giản.

2.1.NC1a: HS thực hiện các tương tác cơ bản với học liệu số (xem video, trả lời câu hỏi trên môi trường số).

1.1.NC1a: HS tiếp cận, khai thác được thông tin từ nguồn học liệu số dưới sự hướng dẫn của GV.]

- GV đánh giá kết quả của HS, dẫn dắt HS vào bài học mới: Khi định dạng văn bản với CSS, các em có thể thiết lập màu bằng nhiều cách khác nhau. Vậy để giúp các em sử dụng được CSS để thiết lập màu cho chữ và nền, chúng ta sẽ cùng nhau đến với Bài 15: Tạo màu cho chữ và nền.

B. HÌNH THÀNH KIẾN THỨC MỚI

Hoạt động 1: Tìm hiểu cách biểu diễn màu trong HTML và CSS

a) Mục tiêu: HS được làm quen với cách thiết lập màu sắc bằng thuộc tính màu sắc của CSS hay HTML.

b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung Hoạt động 1, thảo luận nhóm thực hiện nhiệm vụ.

c) Sản phẩm: Các cách biểu diễn màu sắc trong HTML và CSS.

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

HOẠT ĐỘNG CỦA GV VÀ HS	SẢN PHẨM DỰ KIẾN	NLS/AI
Bước 1: GV chuyển giao nhiệm vụ: - GV cho HS đọc Hoạt động 1 – Tìm hiểu cách biểu diễn màu trong HTML và CSS tr.83 SGK: Cùng thảo luận và tìm hiểu hệ màu RGB hỗ trợ bởi HTML và CSS. - GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS, mỗi nhóm tìm hiểu một cách biểu diễn màu bằng cách trả lời các câu hỏi: a) Hệ màu RGB + Nguyên lí hoạt động của hệ màu RGB là gì? + Mỗi màu được biểu diễn bởi hệ RGB có cấu trúc như thế nào? + Trong CSS, mỗi giá trị màu RGB được thiết lập như thế nào? b) Hệ màu HSL + Hệ màu HSL biểu diễn màu sắc như thế nào? + Mỗi giá trị màu HSL được thiết lập như thế nào? c) Các tên màu có sẵn trong CSS + Ngoài cách sử dụng hàm rgb() và hsl(), CSS còn hỗ trợ cách biểu diễn màu nào? - GV hướng dẫn HS cách dùng Developer Tools để lấy màu từ bất kỳ trang web nào. - GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi Hoạt động củng cố kiến thức tr.84 SGK: Câu 1. Các màu cơ bản red, yellow, green, blue, magenta, cyan được thể hiện bằng hàm hsl như thế nào? Câu 2. Trong hệ màu rgb có bao nhiêu màu thuộc màu xám? Bước 2: HS thực hiện nhiệm vụ học tập: - HS tìm hiểu nội dung mục 1 SGK tr.83 – 84 sau đó trao đổi, thảo luận trả lời các câu hỏi mà GV đưa ra. - HS sử dụng công cụ Color Picker (hình cây bút) trong Developer Tools để chọn màu từ giao diện và sao chép mã HEX/RGB. - GV quan sát và trợ giúp HS (nếu cần thiết). Bước 3: Báo cáo kết quả hoạt động, thảo luận: - GV mời đại diện các nhóm báo cáo kết quả thảo luận. - Các nhóm khác đưa ra ý kiến nhận xét. Hướng dẫn trả lời câu hỏi Hoạt động củng cố kiến thức tr.84 SGK: Câu 1. Các màu cơ bản được thể hiện bằng hàm hsl như sau: red hsl(0,100%,50%) yellow hsl(60,100%,50%) green hsl(120,100%,50%) blue hsl(240,100%,50%) magenta hsl(300,100%,50%) cyan hsl(180,100%,50%) Câu 2. Trong hệ màu rgb có 256 màu thuộc màu xám. Các màu này có tham số RGB là rgb(x,x,x) với x chạy từ 0 đến 255. Bước 4: Đánh giá kết quả thực hiện nhiệm vụ học tập: - Từ kết quả thảo luận của nhóm, GV nhận xét, đánh giá quá trình HS thực hiện nhiệm vụ. - GV chính xác hoá lại các nội dung kiến thức. - GV chốt kiến thức theo Hộp kiến thức: Hệ màu trên trang web được hỗ trợ bởi HTML và CSS chủ yếu là hệ màu RGB. Ngoài ra, có thể sử dụng hệ màu HSL hoặc các tên màu có sẵn.	1. HỆ THỐNG MÀU CỦA CSS a) Hệ màu RGB - Nguyên lí hoạt động của hệ màu RGB: Hệ màu RGB (R – red, G – green, B – blue) hoạt động dựa trên nguyên lý tổng hợp ánh sáng, trong đó ba màu đỏ, xanh lá cây và xanh dương được kết hợp với nhau theo tỷ lệ khác nhau để tạo ra các màu khác. - Cấu trúc màu: Mỗi màu là một tổ hợp gồm ba giá trị (r, g, b), trong đó mỗi giá trị này là số nguyên nằm trong khoảng từ 0 đến 255, tức là một số 8 bit. Tổng số màu cho phép là màu. - Cách thiết lập giá trị màu RGB: rgb(x-red, x-green, x-blue): các tham số có thể nhận giá trị độc lập từ 0 đến 255. Màu trắng (white), rgb(255,255,255) rgb(100%,100%,100%) #ffffff rgb(x-red%, x-green%, x-blue%): các tham số biểu thị giá trị phần trăm của 255. Màu xám (gray), rgb(128,128,128) rgb(50%,50%,50%) #808080 #rrggbb: rr, gg, bb là giá trị trong hệ đếm hexa (hệ đếm cơ số 16). Màu đen (black), rgb(0,0,0), rgb(0%,0%,0%) #000000 b) Hệ màu HSL - Trong khi hệ màu RGB dựa trên ba màu cơ bản để tạo ra các màu khác. HSL tập trung vào cách mà con người cảm nhận màu sắc, làm cho nó trở thành một công cụ hữu ích trong thiết kế đồ họa và chỉnh sửa hình ảnh. - Cách biểu diễn màu sắc: Hệ màu HSL là một hệ màu sử dụng ba thông số để biểu diễn màu sắc gồm có: + H (Hue): Màu sắc. + S (Saturation): Độ bão hòa. + L (Lightness): Độ sáng. - Cách thiết lập giá trị màu HSL: hsl(hue, saturation, lightness) Trong đó: + hue là vòng tròn màu với giá trị từ 0 đến 360. + saturation chỉ độ bão hoà hay độ đậm đặc của màu với giá trị từ 0% đến 100%: Màu sẽ biến mất chỉ còn xám khi độ bão hoà bằng 0%. Màu sẽ đầy đủ nếu độ bão hoà bằng 100%. + lightness là độ sáng với giá trị từ 0% đến 100%: Với 0%, độ sáng thấp nhất, màu sẽ đen. Với 100%, độ sáng là lớn nhất, màu sẽ trắng. Đặt lightness = 50% để có màu đúng. Hình 15.2. Mô hình hệ màu HSL với các tham số Hue, Saturation, Light và mô hình vòng tròn màu Hue với giá trị từ 0° (đỏ) đến 360° (cũng là đỏ), 120° (xanh lá cây), 240° (xanh dương) c) Các tên màu có sẵn trong CSS - Bên cạnh việc thiết lập màu bằng các hàm rgb() và hsl(), CSS còn thiết lập sẵn các tên màu để dễ dàng cho việc sử dụng. - Phiên bản CSS2 thiết lập tên 16 màu chuẩn. và tên màu không phân biệt chữ hoa chữ thường. Ví dụ: black, gray, white, red, green, orange, yellow, purple, blue, lime.... - Phiên bản CSS3 đã thiết lập 140 tên màu. - Lưu ý: Các màu xám (hay đen trắng) có thể được thiết lập theo các cách sau: + rgb(x,x,x) với các tham số r, g, b bằng nhau. + (h,0%,x%) khi tham số saturation bằng 0%.	- 1.2.NC1a: HS hiểu cách máy tính lưu trữ và hiển thị màu sắc. - 2.4.NC1a: Vận hành thành thạo các công cụ phát triển phần mềm (Developer Tools) tích hợp trong trình duyệt để phân tích mã nguồn. - 5.2.NC1a: Sử dụng các hàm rgb(), hsl() hoặc mã Hex trong CSS để định dạng màu sắc cho trang web.

Hoạt động 2: Tìm hiểu cách thiết lập màu chữ và màu nền bằng CSS

a) Mục tiêu: HS biết và nắm vững cách thiết lập màu chữ, màu khung viền và màu nền cho các đối tượng văn bản HTML.

b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung Hoạt động 2, thảo luận nhóm thực hiện nhiệm vụ.

c) Sản phẩm: Cách thiết lập màu chữ và màu nền bằng CSS.

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