Giáo án Tin học 12 Chân trời sáng tạo Bài F9: Một số kĩ thuật định kiểu bằng vùng chọn trong CSS

Giáo án Tin học 12 Chân trời sáng tạo Bài F9: Một số kĩ thuật định kiểu bằng vùng chọn trong CSS

Xem thử

Chỉ từ 400k mua trọn bộ Kế hoạch bài dạy (KHBD) hay Giáo án Tin học 12 Chân trời sáng tạo 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: 1053587071 - NGUYEN VAN DOAN - 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

Sau bài học này, HS sẽ:

- Sử dụng được các yếu tố của vùng chọn (selector) như class, id, tag,…

2. Năng lực

Năng lực chung:

- Tự chủ và tự học: Tự lực (Chủ động, tích cực thực hiện công việc của bản thân).

- Giao tiếp và hợp tác: Xác định trách nhiệm và hoạt động của bản thân (Phân tích được các công việc cần thực hiện để hoàn thành nhiệm vụ của nhóm trong các hoạt động nhóm).

- Giải quyết vấn đề và sáng tạo:Hình thành và triển khai ý tưởng mới (Nêu được nhiều ý tưởng mới trong học tập, suy nghĩ không theo lối mòn, tạo ra yếu tố mới dựa trên những ý tưởng khác nhau).

Năng lực Tin học:

- NLc (Giải quyết vấn đề với sự hỗ trợ của công nghệ thông tin và truyền thông): Biết cách tổ chức lại mã lệnh theo hướng mới phù hợp hơn để định kiểu cho trang web portfolio.html.

3. Phẩm chất

- Chăm chỉ: Tích cực tìm tòi và sáng tạo trong việc tìm hiểu các thuộc tính cơ bản của CSS.

- Trung thực, trách nhiệm: Trung thực khi giới thiệu bản thân, tôn trọng bản quyền khi sử dụng thông tin, hình ảnh để xây dựng trang web.

II. THIẾT BỊ DẠY HỌC VÀ HỌC LIỆU

1. Đối với giáo viên

- SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng– Chân trời sáng tạo, bài trình chiếu(Slide), máy chiếu, phiếu học tập.

- Máy tính có cài sẵn phần mềm Visual Studio Code và có kết nối Internet, các tệp HTML và CSS dùng trong hoạt động Thực hành.

2. Đối với học sinh

- SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng– Chân trời sáng tạo, vở ghi.

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

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

a) Mục tiêu: Ôn lại kiến thức đã học về cách định kiểu CSS. Nhận ra được những hạn chế khi định kiểu riêng lẻ cho từng phần tử.

b) Nội dung: HS nghiên cứu nội dung hoạt động Khởi động SGK trang 150, suy nghĩ trả lời câu hỏi theo kiến thức của mình.

c) Sản phẩm: Những hạn chế của việc viết mã lệnh CSS cho thuộc tính style trong từng thẻ <h1>.

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

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

- GV chia lớp thành 4 nhóm học tập, trình chiếu hình ảnh trên slide để gợi ý cho HS trả lời câu hỏi Khởi động SGK trang 150.

- GV nêu câu hỏi cho các nhóm thảo luận: Theo em, khi định kiểu cho các đề mục h1, việc viết mã lệnh CSS cho thuộc tính style trong từng thẻ <h1> gặp phải những hạn chế nào?

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

- Các nhóm HS thảo luận và trả lời câu hỏi Khởi động SGK trang 150.

- GV quan sát quá trình các nhóm thảo luận, giải đáp thắc mắc nếu HS chưa rõ.

Bước 3: Báo cáo kết quả hoạt động, thảo luận:

- GV mời một số nhóm báo cáo kết quả thảo luận.

Gợi ý trả lời:

Khi định kiểu cho các đề mục h1, việc viết mã lệnh CSS cho thuộc tính style trong từng thẻ <h1> sẽ gặp phải những hạn chế sau:

+ Không thể tái sử dụng: Khi viết mã CSS trong thuộc tính style của mỗi thẻ <h1>, mã đó chỉ áp dụng cho thẻ đó cụ thể. Điều này làm cho việc tái sử dụng mã CSS trở nên khó khăn. Nếu có nhiều thẻ <h1> trong trang thì phải viết mã CSS tương tự cho mỗi thẻ.

+ Phức tạp và khó quản lý: Nếu cần áp dụng nhiều thuộc tính CSS cho mỗi thẻ <h1>, việc viết mã trong thuộc tính style có thể trở nên phức tạp và khó quản lý. Mã CSS sẽ phải được viết trực tiếp trong từng thẻ, làm cho mã HTML trở nên lộn xộn và khó đọc.

+ Ghi đè ưu tiên: Khi viết mã CSS trong thuộc tính style, nó sẽ ghi đè lên bất kỳ quy tắc CSS nào được áp dụng từ các tệp CSS bên ngoài hoặc trong thẻ <style>. Điều này có thể gây ra xung đột và khó kiểm soát ưu tiên của các quy tắc CSS.

+Giới hạn khả năng chọn và áp dụng mã CSS theo cách linh hoạt và tái sử dụng.

- Các nhóm khác lắng nghe và góp ý.

Bước 4: Đánh giá kết quả thực hiện:

GV đánh giá kết quả của HS, dẫn dắt HS vào bài học mới: Khi định kiểu cho các phần tử giống nhau trong tệp .html, việc viết mã lệnh CSS cho thuộc tính style trong từng thẻ sẽ gặp phải một số hạn chế. Để giải quyết được những hạn chế đó, các em có thể định kiểu CSS bằng vùng chọn. Vậy để giúp các em biết cách sử dụng các yếu tố của vùng chọn như class, id, tag,… chúng ta sẽ cùng nhau đến với Bài F9: Một số kĩ thuật định kiểu bằng vùng chọn trong CSS.

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

Hoạt động 1: Khái niệm vùng chọn CSS

a) Mục tiêu: Cung cấp cho HS khái niệm vùng chọn CSS và một số yếu tố của vùng chọn, các lợi ích khi định kiểu CSS bằng vùng chọn trong việc phát triển trang web.

b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1. Khái niệm vùng chọn CSS và thực hiện nhiệm vụ.

c) Sản phẩm: Những thuộc tính định kiểu cho màu sắc và phông chữ:

- Khái niệm vùng chọn CSS.

- Một số yếu tố của vùng chọn.

- Các lợi ích khi định kiểu CSS bằng vùng chọn.

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

HOẠT ĐỘNG CỦA GV VÀ HS

SẢN PHẨM DỰ KIẾN

Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS hoạt động cá nhân và trả lờicâu hỏi: + Theo em, làm thế nào để giải quyết được những hạn chế của việc viết mã lệnh CSS cho từng thẻ <h1> trong ví dụ ở hoạt động Khởi động? - Từ hoạt động Khởi động, GV giới thiệu cho HS về vùng chọn CSS và cách khai báo vùng chọn. - GV tiếp tục đặt câu hỏi định hướng: + Theo em, định kiểu CSS bằng vùng chọn đem lại những lợi ích gì trong việc phát triển trang web? - 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 Làm tr.151 SGK:

1. Khái niệm vùng chọn CSS - Trong ví dụ ở hoạt động Khởi động, phần mã lệnh CSS có thể được viết tách rời với nội dung như sau: Để định kiểu cho các phần tử h1 như cách viết trên, em phải thực hiện thao tác chỉ định phần tử h1. - Khái niệm:Trong CSS, vùng chọn là khuôn mẫu dùng để chỉ định phần tử HTML cụ thể sẽ được định kiểu. → Khai báo vùng chọn là cách thức thuận tiện để áp dụng cùng một kiểu CSS cho một nhóm các phần tử xác định.

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

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

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

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 Chân trời sáng tạo 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 Chân trời sáng tạo hay, chuẩn khác:

• Giáo án Tin học lớp 12 Bài F10: Định kiểu CSS cho siêu liên kết và danh sách

• Giáo án Tin học lớp 12 Bài F11: Định kiểu CSS cho bảng và phần tử <div>

• Giáo án Tin học lớp 12 Bài F12: Định kiểu CSS cho biểu mẫu

• Giáo án Tin học lớp 12 Bài F13: Dự án tạo trang web (tiếp theo)

• Giáo án Tin học lớp 12 Bài G1: Nhóm nghề dịch vụ thuộc ngành Công nghệ thông tin

---