Giáo án NLS Tin học 12 THUD kết nối Bài 15: Tạo màu cho chữ và nền

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:

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: 

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.

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS nhắc lại kiến thức cũ về thứ tự ưu tiên áp dụng các mẫu định dạng đã được học ở Bài 14:

+ Các mẫu định dạng CSS được áp dụng theo nguyên tắc nào trong mô hình cây HTML?

+ Khi có nhiều mẫu định dạng CSS cùng áp dụng cho một phần tử HTML thì trình duyệt sẽ chọn các mẫu định dạng theo thứ tự ưu tiên nào để áp dụng?

- Từ đó, GV nhấn mạnh lại tính chất kế thừa trong mối quan hệ cha-con giữa các phần tử.

- GV cho HS đọc Hoạt động 3 – Tìm hiểu cách thiết lập bộ chọn là tổ hợp các phần tử tr.85 SGK để dẫn dắt vào bài học:

Quan sát, trao đổi và thảo luận về 4 trường hợp bộ chọn là tổ hợp các phần tử, nêu ý nghĩa và sự khác biệt giữa các trường hợp này: E F, E > F, E + F và E ~ F.

- GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS, mỗi nhóm sử dụng AI tìm hiểu một bộ chọn:

+ Em hãy nêu ý nghĩa và phân tích ví dụ áp dụng cho các trường hợp định dạng CSS có dạng là tổ hợp các phần tử có quan hệ với nhau.

- GV đặt câu hỏi: “Sự khác biệt giữa dấu cộng (+) và dấu ngã (~) là gì? Hãy nhờ AI tạo một ví dụ HTML và giải thích.”

- 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.87 SGK:

Câu 1. Trong ví dụ ở Hình 15.7, nếu thay mẫu em ~ strong bằng p > strong thì kết quả sẽ như thế nào?

Câu 2. Trong ví dụ ở Hình 15.7, nếu thay mẫu em ~ strong bằng em + strong thì kết quả sẽ như thế nào? 

Câu 3. Trong ví dụ ở Hình 15.7, nếu thay mẫu em ~ strong bằng p strong thì kết quả sẽ như thế nào? 

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 3 SGK tr.85 – 87 sau đó trao đổi, thảo luận trả lời các câu hỏi mà GV đưa ra. 

- HS sử dụng AI tìm hiểu các bộ chọn là tổ hợp các phần tử có quan hệ.

- HS nhập lệnh vào Chatbot AI: “Hãy viết một đoạn code HTML đơn giản gồm 5 thẻ <div> nằm cạnh nhau. Sau đó viết CSS dùng bộ chọn div + div và div ~ div để tô màu khác nhau. Giải thích tại sao kết quả lại khác nhau bằng ngôn ngữ dễ hiểu.”

- 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.

- HS đọc kết quả từ AI, đối chiếu với SGK và rút ra kết luận về bốn bộ chọ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.87  SGK:

Câu 1. Kết quả vẫn như cũ. Dòng chữ

“Tim Berners-Lee” vẫn có màu đỏ.

Câu 2. Kết quả vẫn như cũ. Dòng chữ “Tim Berners-Lee” vẫn có màu đỏ.

Câu 3. Kết quả vẫn như cũ. Dòng chữ “Tim Berners-Lee” vẫn có màu đỏ.

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: 

Các mẫu định dạng CSS được áp dụng theo nguyên tắc kế thừa trong mô hình cây HTML:

• Nếu mẫu định dạng được viết cho một phần tử thì sẽ được áp dụng mặc định cho tất cả các phần tử con, cháu. 
• Nếu có nhiều mẫu định dạng được viết cho cùng một bộ chọn thì mẫu viết sau cùng sẽ được áp dụng.  
• Nếu bộ chọn có kí tự  * thì được áp dụng cho mọi phần tử nhưng với độ ưu tiên thấp nhất. 
• Mẫu định dạng với kí hiệu !important có mức ưu tiên cao nhất.

2. THIẾT LẬP BỘ CHỌN LÀ TỔ HỢP CÁC PHẦN TỬ CÓ QUAN HỆ

Bảng 15.1. Bốn bộ chọn là tổ hợp các phần tử

a) Ví dụ minh hoạ cho trường hợp E F

Xét mẫu định dạng div p {color: blue;} áp dụng cho văn bản HTML sau:

Hình 15.4a. Mã HTML

Ta thấy:

- Đoạn văn bản đầu tiên là phần tử con của div.

- Đoạn văn bản thứ hai là phần tử con của body. Mẫu định dạng chỉ áp dụng cho phần tử p đầu tiên.

Hình 15.4b. Kết quả hiển thị trên trình duyệt

b) Ví dụ minh hoạ cho trường hợp E > F

Xét mẫu định dạng p > em {color: red;} áp dụng cho văn bản HTML sau:

Hình 15.5a. Mã HTML

Ta thấy: Trong đoạn văn bản này có hai phần tử em, nhưng chỉ phần tử em thứ hai là con trực tiếp của p. 

Mẫu định dạng chỉ áp dụng cho phần tử em thứ hai.

Hình 15.5b. Kết quả hiển thị trên trình duyệt

c) Ví dụ minh hoạ cho trường hợp E + F 

Xét định dạng em + strong {color: red;} áp dụng cho văn bản HTML sau:

Hình 15.6a. Mã HTML

Ta thấy: Trong văn bản có một phần tử strong liền kề với phần tử em và cả hai đều là con trực tiếp của p.

Mẫu định dạng sẽ áp dụng cho phần tử strong.

Hình 15.6b. Kết quả hiển thị trên trình duyệt

d) Ví dụ minh hoạ cho trường hợp E ~ F

Xét định dạng em ~ strong {color: red;} áp dụng cho văn bản HTML sau:

Hình 15.7a. Mã HTML

Ta thấy: Văn bản có hai phần tử strong đều nằm phía sau của phần tử em, do đó mẫu định dạng sẽ áp dụng cho cả hai phần tử strong.

Hình 15.7b. Kết quả hiển thị trên trình duyệt

Quan hệ E, F trong các trường hợp trên có thể mô tả như trong các sơ đồ sau:

- 1.2.NC1a: HS phân tích được mối quan hệ logic giữa các phần tử dữ liệu.

- 5.2.NC1a: HS sử dụng các cú pháp đặc biệt (>, +, ~) để điều khiển giao diện web một cách chính xác.

- 6.2.NC1a: Sử dụng AI như một trợ lý lập trình để giải thích cú pháp.

Trường THPT:………………………………………….

Lớp:……………………………………………………...

Họ và tên:……………………………………………….

PHIẾU BÀI TẬP TIN HỌC 12

ĐỊNH HƯỚNG KHOA HỌC MÁY TÍNH – KẾT NỐI TRI THỨC

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

A. PHẦN TRẮC NGHIỆM NHIỀU PHƯƠNG ÁN LỰA CHỌN

Khoanh tròn vào chữ cái đứng trước câu trả lời đúng nhất:

Câu 1. Phương án nào sau đây là cách thiết lập màu đen trong hệ màu RGB?

A. rgb(100%,100%,100%).

B. #808080.

C. rgb(255,255,255).

D. #000000.

Câu 2. Để định dạng màu khung viền quanh phần tử, em sử dụng thuộc tính CSS nào?

A. background-color.

B. bgcolor.

C. border.

D. color.

Câu 3. Ý nghĩa của bộ chọn E + F là gì?

A. Quan hệ anh em liền kề. Áp dụng cho các phần tử F là phần tử liền kề ngay sau E, E và F phải có cùng phần tử cha.

B. Quan hệ anh em. Áp dụng cho các phần tử F là phần tử đứng sau, không cần liên tục với E, E và F phải có cùng phần tử cha.

C. Quan hệ cha con trực tiếp. Áp dụng cho các phần tử F với điều kiện F là phần tử con/cháu của E, tức là E phải ở phía trên F trong cây HTML.

D. Quan hệ con cháu. Áp dụng cho các phần tử F với điều kiện F là phần tử con của E.

Câu 4. Mẫu CSS định dạng phần tử h1 có kiểu chữ đậm, màu chữ đỏ và màu nền hồng nhạt là

A.
B.
C.
D.

Câu 5. Mẫu CSS áp dụng cho các phần tử có quan hệ cha con trực tiếp là

A. div p {background-color: lightblue;}

B. p + em {color: red;}.

C. p > strong {color: green;}.

D. strong em {color: gray;}.

B. PHẦN TRẮC NGHIỆM ĐÚNG – SAI

Câu 1. HTML và CSS hỗ trợ hệ màu theo mẫu RGB và HSL.

a. Mỗi màu trong hệ màu RGB là một tổ hợp gồm 3 giá trị, 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 byte.

b. Trong hệ màu RGB có 255 màu thuộc màu xám.

c. Trong hệ màu HSL, màu sẽ biến mất chỉ còn xám khi độ bão hoà bằng 0%.

d. Trong hệ màu HSL, với độ sáng 100% thì màu sẽ đen.