Giáo án Tin học 12 Kết nối tri thức Bài 15: Tạo màu cho chữ và nền

Chỉ từ 400k mua trọn bộ Kế hoạch bài dạy (KHBD) hay Giáo án Tin học 12 Kết nối tri thức bản word chuẩn kiến thức, trình bày đẹp mắt, dễ dàng chỉnh sửa:

B1: gửi phí vào tk: 0711000255837 - NGUYEN THANH TUYEN - Ngân hàng Vietcombank (QR)
B2: Nhắn tin tới Zalo VietJack Official - nhấn vào đây để thông báo và nhận giáo án

I. MỤC TIÊU

1. Kiến thức

Học sinh được học về:

- Cách thiết lập hệ thống màu sắc của CSS.

- Các thuộc tính màu sắc của định dạng CSS.

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

2. Năng lực

- Sử dụng được CSS để thiết lập màu cho chữ và nền.

- Nâng cao khả năng tự học.

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 chuẩn bị:

• SGK, bài giảng PPT, phòng máy tính có kết nối Internet, máy chiếu.

• Chuẩn bị các ví dụ minh hoạ tương ứng trong bài như mô tả SGK, có thể sử dụng mô phỏng cho HS trên lớp, không mất thời gian gõ lại.

- HS: SGK, vở ghi, chuẩn bị bài ở nhà.

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

Bài học được thực hiện trong 2 tiết: 1 tiết lí thuyết, 1 tiết thực hành.

- Tiết lí thuyết: Hoạt động 1,2,3,4

- Tiết thực hành: Hoạt động 5,6,7

A. MỞ ĐẦU

Hoạt động 1: Khởi động (5 phút)

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) Tổ chức thực hiện

- GV đưa ra ví dụ, đặt câu hỏi:

• Phân tích thành phần mẫu định dạng: bộ chọn, thuộc tính, giá trị?

• Dự đoán các định dạng các mẫu có thiết lập cùng màu không?

Ví dụ các mẫu định dạng

a. p {color: rgb (128,0,128);}

b. p {color: #800080;}

c. p {color: hsl (300,100%,25.1%);}

d. p {color: purple;}

- HS suy nghĩ trả lời. Vì ý d quen thuộc với HS nên HS sẽ trả lời được chi tiết.

- Dựa trên câu trả lời của HS, GV phân tích, nhắc lại cách thiết lập màu, có nhiều cách thiết lập giá trị màu, cả 4 cách trên đều thiết lập chữ màu tím cho phần tử p ➔ dẫn dắt vào bài.

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

Hoạt động 2. Tìm hiểu về cách biểu diễn màu sắc trong CSS (15 phút)

a) Mục tiêu

- Học sinh biết về 3 cách biểu diễn màu sắc trong CSS, có khả năng biểu diễn màu sắc nào đó bằng 3 cách.

(Nội dung về biểu diễn màu sắc HS đã được học rải rác trong chương trình Tin học 10, 11, vì vậy HS tiếp cận nội dung này tương đối dễ dàng.)

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

# 1. Chuyển giao nhiệm vụ

- GV chia nhóm 3 HS, yêu cầu HS đọc SGK, ghi chú các nội dung quan trọng, trả lời câu hỏi 1.

- GV chốt kiến thức về 3 cách biểu diễn màu.

- GV giới thiệu về cách biểu diễn màu xám (hoặc đen, hoặc trắng). Đặt câu hỏi thảo luận. HS thảo luận nhóm.

- GV đặt câu hỏi tự luyện giúp củng cố kiến thức.

Nội dung:

1. Đọc SGK Mục 1/83, 84. Với mỗi cách biểu diễn màu, nêu ý nghĩa, ví dụ?

+ Biểu diễn màu trong CSS (3 cách)

a. Dùng tên màu

b. Dùng hệ màu RGB

c. Dùng hệ màu HSL

- Với mỗi nội dung, tìm hiểu về tên thuộc tính, ý nghĩa, giá trị, ví dụ áp dụng.

+ Biểu diễn màu xám.

- Cách biểu diễn màu xám

- Màu được biểu diễn bằng 2 cách sau đây có giống nhau không?

rgb (220,220,220) và rgb (135,135,135)

hsl (120, 0%, 50%) và hsl (230, 0%, 50%)

2. Câu hỏi tự luyện trang 84

3. Tra cứu mã màu

# 2. Thực hiện nhiệm vụ

- HS đọc, thảo luận nhóm, nghiên cứu SGK, tóm tắt nội dung, trả lời câu hỏi.

- HS thảo luận, trả lời câu hỏi về biểu diễn màu xám.

- HS nghe giáo viên hướng dẫn về cách tra cứu mã màu.

Kết quả:

1. Biểu diễn màu trong CSS

a) Dùng tên màu

VD: red, green, white, yellow, silver, …

b) Dùng hệ màu RGB (red, green, blue)

rgb (x-red, x-green, x-blue): Trong đó, x-red, x-green, x-blue nhận các giá trị độc lập từ 0- 255

rgb (x-red%, x-green%, x-blue%): Trong đó, x-red, x-green, x-blue biểu thị giá trị phần trăm của 255.

rgb(#rrggbb): Trong đó, rr, gg, bb là giá trị trong hệ đếm hexa.

VD:

Giáo án Tin học 12 Kết nối tri thức Bài 15: Tạo màu cho chữ và nền

c) Sử dụng hệ màu HSL (Hue, Saturation, Lightness)

HSL (Hue, Saturation, Lightness)

Trong đó:

Hue: nhận giá trị từ 0-360 Saturation: nhận giá trị từ 0%-100% Lightness: nhận giá trị từ 0%-100% VD:

Lệnh HTML:

Tiêu đề sử dụng màu hsl

Mẫu định dạng CSS: h1 {color: hsl (360, 70%, 60%);}

Kết quả:

* Biểu diễn màu xám:

rgb(x,x,x): tham số r, g, b bằng nhau

hsl(h, 0%, x%): tham số saturation bằng 0%

* Biểu diễn màu xám bằng 2 cách cho ra kết quả khác nhau.

2. Câu hỏi tự luyện trang 84

C1. Các màu cơ bản được thể hiện bằng RGB như sau:

red (255,0,0)

blue (0,0,255)

yellow (255,255,0)

magenta (255,0,255)

green (0,255,0)

cyan (0,255,255)

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

3. Tra cứu mã màu:

https://www.w3schools.com/tags/ ref_colornames.asp

# 3. Báo cáo, thảo luận

- Sau 4 phút, GV mời một số nhóm trả lời câu hỏi, nhóm khác nhận xét, bổ sung.

- GV nhận xét, chốt kiến thức.

- GV giới thiệu về cách biểu diễn màu xám (hoặc đen, hoặc trắng). Đặt câu hỏi thảo luận.

- HS trả lời. GV nhận xét, cho HS quan sát kết quả ➔ kết luận: Cùng là biểu diễn màu xám nhưng chỉ số khác nhau cho màu khác nhau.

- Từ câu trả lời cho câu hỏi thảo luận, HS dễ dàng trả lời câu hỏi tự luyện 2/84.

- GV lưu ý HS: Việc nhớ mã màu và chỉ số cho từng màu khi biểu diễn màu bằng hệ màu RGB và HSL tương đối khó khăn và không cần thiết. HS chỉ cần nắm được cấu trúc. Khi cần tra cứu mã màu, HS tra cứu trên trang web

https://www.w3schools.com/tags/ref_colornames.asp

GV hướng dẫn HS cách tra cứu.

................................

(Nguồn: NXB Giáo dục)

Trên đây tóm tắt một số nội dung miễn phí trong bộ Kế hoạch bài dạy (KHBD) hay Giáo án Tin học 12 Kết nối tri thức mới nhất, để mua tài liệu đầy đủ, Thầy/Cô vui lòng xem thử:

Xem thử

Xem thêm các bài soạn Giáo án Tin học lớp 12 Kết nối tri thức hay, chuẩn khác:

Trang trước Trang sau

Đề thi, giáo án lớp 12 các môn học