Giáo án Tin học 12 Cánh diều Bài 10: Bộ chọn lớp, bộ chọn định danh

Giáo án Tin học 12 Cánh diều Bài 10: Bộ chọn lớp, bộ chọn định danh

Xem thử

Chỉ từ 400k mua trọn bộ Giáo án Tin học 12 Cánh diều 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

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

- Sử dụng được bộ chọn lớp, bộ chọn định danh.

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:

- Sử dụng được bộ chọn lớp, bộ chọn định danh.

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 mã lệnh HTML.

- Hình thành tư duy lôgic phân tích yêu cầu cần đạt để thực hiện một nhiệm vụ cụ thể.

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 – Cánh diều, bài trình chiếu (Slide), máy chiếu, phòng thực hành có kết nối Internet.

- HS: SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng – Cánh diều, vở ghi.

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

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

a) Mục tiêu: Giúp HS định hướng mục tiêu bài học.

b) Nội dung: HS dựa vào hiểu biết để trả lời 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 trình chiếu hình ảnh trên slide, sau đó yêu cầu HS hoạt động cá nhân, suy nghĩ trả lời câu hỏi: Em hãy nhận xét về hai cách định dạng văn bản sau đây.

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

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

Gợi ý trả lời:

+ So sánh về 2 cách định dạng văn bản:

• Hình 1: Định dạng màu chữ trực tiếp cho từng phần tử HTML.

• Hình 2: Các phần tử HTML được khai báo class="red" đều được áp dụng quy tắc định dạng chung được viết trong cặp thẻ <style></style>.

- 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 giá kết quả của HS, dẫn dắt HS vào bài học mới: Khi định dạng cho các phần tử giống nhau trong tệp .html, việc viết lặp lại các quy tắc định dạng cho từng phần tử sẽ gặp phải một số hạn chế. Khi đó, các em có thể sử dụng bộ chọn lớp class và bộ chọn định danh id. Vậy để giúp các em hiểu và biết cách sử dụng hai thuộc tính này, chúng ta sẽ cùng nhau đến với Bài 10: Bộ chọn lớp, bộ chọn định danh.

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

Hoạt động 1: Bộ chọn lớp

a) Mục tiêu:

- Giúp HS hiểu và biết cách khai báo bộ chọn lớp.

- Giải thích và làm rõ cho HS sự khác biệt giữa sử dụng bộ chọn lớp và bộ chọn lớp gắn với phần tử cụ thể.

b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1. Bộ chọn lớp, thảo luận nhóm và thực hiện nhiệm vụ.

c) Sản phẩm: Cách khai báo bộ chọn lớp, sự khác biệt giữa sử dụng bộ chọn lớp và bộ chọn lớp gắn với phần tử cụ thể.

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 chiếu lại Hình 2 trong phần Khởi động và giới thiệu cho HS về bộ chọn lớp. - GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS và trả lời các câu hỏi: + Bộ chọn lớp được khai báo như thế nào? + Để áp dụng bộ chọn lớp cho phần tử cụ thể của văn bản HTML, em cần thực hiện như thế nào? - GV cung cấp cho HS cách khai báo bộ chọn lớp sử dụng cho một phần tử. 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.77 – 78 và thảo luận theo nhóm thực hiện nhiệm vụ. - GV quan sát và trợ giúp HS. Bước 3: Báo cáo kết quả hoạt động, thảo luận: - Đại diện các nhóm HS trả lời. - Các nhóm khác đưa ra ý kiến nhận xét.

1. Bộ chọn lớp - Mỗi bộ chọn lớp (class selector) được đặt tên, thường được dùng để khai báo các quy tắc định dạng được áp dụng chung cho nhiều phần tử trong văn bản HTML thay vì phải viết lặp lại các quy tắc này cho từng phần tử. - Cú pháp khai báo bộ chọn lớp: Trong đó, Tên_bộ_chọn_lớp do người tạo CSS tự định nghĩa và bắt đầu bằng dấu chấm. Lưu ý: + Nên hạn chế đặt tên bộ chọn định danh trùng với tên phần tử. + Do mục đích định danh nên tên định danh của phần tử thường là duy nhất trong một trang web. Ví dụ 1: Bảng định dạng CSS ở Hình 1 khai báo bộ chọn lớp được đặt tên là “red” và khai báo giá trị thuộc tính màu đỏ. Hình 1. Ví dụ khai báo bộ chọn lớp - Để áp dụng bộ chọn lớp có tên “Tên_bộ_chọn lớp” cho phần tử cụ thể của văn bản HTML, cần khai báo giá trị thuộc tính class của phần tử đó là “Tên_bộ_chọn_lớp”. Ví dụ 2: Văn bản HTML ở Hình 2a minh hoạ việc áp dụng bộ chọn lớp, kết quả hiển thị như Hình 2b. Các phần tử có thuộc tính class=“red” đều được định dạng chữ màu đỏ. Hình 2a. Ví dụ khai báo và áp dụng bộ chọn lớp

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

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

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

Trên đây tóm tắt một số nội dung miễn phí trong bộ Giáo án Tin học 12 Cánh diều 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 Cánh diều hay, chuẩn khác:

• Giáo án Tin 12 Bài 11: Mô hình hộp, bố cục trang web

• Giáo án Tin 12 Bài 12: Dự án nhỏ: Tạo trang web báo tường

• Giáo án Tin 12 Bài 1: Giới thiệu nhóm nghề Dịch vụ và Quản trị trong ngành Công nghệ thông tin

• Giáo án Tin 12 Bài 2: Một số nghề khác trong ngành Công nghệ thông tin và một số nghề ứng dụng công nghệ thông tin

• Giáo án Tin 12 Bài 3: Dự án nhỏ: Tìm hiểu thông tin tuyển sinh và hướng nghiệp về lĩnh vực đào tạo “Máy tính và Công nghệ thông tin” ở Việt Nam

---