Giáo án Tin học 12 Chân trời sáng tạo Bài F11: Định kiểu CSS cho bảng và phần tử

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ẽ:

- Thực hiện được việc định kiểu CSS cho bảng và phần tử

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 các thẻ HTML đã học về bảng và đoạn văn bản. Nhận xét được về cách trang trí bảng bằng HTML.

b) Nội dung: HS ôn tập lại kiến thức về các thẻ HTML đã học về bảng và đoạn văn bản.

c) Sản phẩm: Một số thuộc tính định dạng bảng.

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

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

- GV cho HS nối tên một số thuộc tính định dạng bảng với ý nghĩa của nó.

Giáo án Tin học 12 Chân trời sáng tạo Bài F11: Định kiểu CSS cho bảng và phần tử <div>

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

- HS vận dụng những kiến thức đã học để hoàn thành hoạt động.

- 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ình bày đáp án.

Gợi ý trả lời:

Giáo án Tin học 12 Chân trời sáng tạo Bài F11: Định kiểu CSS cho bảng và phần tử <div>

- 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: Ở bài F3, các em đã được học về cách tạo bảng cũng như một số thuộc tính định dạng bảng. Và để giúp các em ôn tập lại kiến thức đồng thời biết cách định kiểu CSS cho bảng, chúng ta sẽ cùng nhau đến với Bài F11: Định kiểu CSS cho bảng và phần tử

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

Hoạt động 1: Định kiểu cho bảng

a) Mục tiêu: Cung cấp cho HS kĩ thuật định kiểu cho bảng.

b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1. Định kiểu cho bảng và thực hiện nhiệm vụ.

c) Sản phẩm:Kĩ thuật định kiểu cho bảng.

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ời các câu hỏi:

+ Theo em, những yếu tố nào cần được quan tâm khi định kiểu CSS cho bảng?

+ Trong trường hợp bảng có nhiều hàng hoặc nhiều cột, làm thế nào để giúp người dùng nhanh chóng và dễ dàng nhận biết nội dung của bảng?

- GV đưa ra ví dụ minh hoạ đường viền mặc định của bảng từ đó đặt câu hỏi:

+ Để hiển thị đường viền đơn cho các ô trong bảng, em cần sử dụng thuộc tính CSS với giá trị như thế nào?

- GV phân tích Ví dụ 1 để HS hiểu và biết cách định kiểu đường viền cho bảng.

- GV tiếp tục đặt câu hỏi định hướng:

+ Để thêm phần đẹp mắt và nổi bật cho bảng, em nên định kiểu màu nền như thế nào?

- GV giới thiệu một số cách làm tăng tính trực quan cho bảng, đồng thời phân tích Ví dụ 2 và Ví dụ 3 để HS hiểu và biết cách định kiểu màu nền cho bảng.

1. Định kiểu cho bảng

Đường viền và màu nền của bảng là những yếu tố cần quan tâm khi định kiểu CSS cho bảng.

* Đường viền

- Bên cạnh tính thẩm mĩ, trong trường hợp bảng có nhiều hàng hoặc nhiều cột, việc tô màu nền cho hàng theo hình thức xen kẽ nhau là một cách giúp người dùng nhanh chóng và dễ dàng nhận biết nội dung của bảng.

Ví dụ:

+ Bảng 1 dưới đây gồm 5 hàng và 3 cột chưa được định kiểu CSS cho bảng.

Giáo án Tin học 12 Chân trời sáng tạo Bài F11: Định kiểu CSS cho bảng và phần tử <div>

Hình 1. Bảng 1 được tạo từ mã lệnh HTML và chưa được định kiểu CSS

+ Sau khi định kiểu cho bảng:

· Các hàng được tô màu nền xen kẽ với nhau, trong đó hàng chẵn màu xám và hàng lẻ màu trắng.

· Hàng tiêu đề được tô màu xanh nhằm phân biệt với các hàng nội dung.

· Các ô từ hàng 2 trở đi có đường viền đơn màu xanh.

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

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:

Trang trước Trang sau

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