Nội dung bài viết

    Xem thêm

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

    Với Giáo án PPT Bài 15: Tạo màu cho chữ và nền Tin học 12 sách Kết nối tri thức sẽ giúp thầy cô dễ dàng biên soạn và giảng dạy bằng giáo án điện tử hay POWERPOINT Tin học 12.

    Chỉ từ 250k mua trọn bộ Giáo án Tin học 12 Kết nối tri thức bản PPT trình bày khoa học, đẹp mắt:

    Xem thử tài liệu tại đây: Link tài liệu

    Các bước mua tài liệu:

    1 277 19/01/2026
    Mua tài liệu
    Trang trước
    Chia sẻ
    Trang sau  

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

    Nội dung đang được cập nhập...

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

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

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

    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

    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 điện tử Tin học 12 (Kết nối tri thức): Bài 15: Tạo màu cho chữ và nền (ảnh 1)

    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: <h1>Tiêu đề sử dụng màu hsl</h1>

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

    Kết quả: Giáo án điện tử Tin học 12 (Kết nối tri thức): Bài 15: Tạo màu cho chữ và nền (ảnh 1)

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

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

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

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

    Tham khảo các loạt bài Giáo án các môn lớp 12 - Kết nối tri thức khác:

    Bài viết cùng lớp mới nhất

    Xem thêm
    1 277 19/01/2026
    Mua tài liệu
    Trang trước
    Chia sẻ
    Trang sau  

    Xem thêm các chương trình khác: