Giáo án Tin học 12 Chân trời sáng tạo Bài F12: Định kiểu CSS cho biểu mẫu

Giáo án Tin học 12 Chân trời sáng tạo Bài F12: Định kiểu CSS cho biểu mẫu

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

- Thực hiện được việc định kiểu CSS cho biểu mẫu.

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 HTML đã học về biểu mẫu, nhận xét một số biểu mẫu khảo sát trên trang web mà trường hay lớp em từng sử dụng.

b) Nội dung: HS suy nghĩ trả lời câu hỏi Khởi động theo hiểu biết của mình.

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 Khởi động.

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 về một biểu mẫu trên slide, yêu cầu HS hoạt động cá nhân, suy nghĩ và đưa ra nhận xét: Em hãy quan sát và nhận xét biểu mẫu thanh toán mua sắm trực tuyến sau:

Hình 1. Biểu mẫu thanh toán mua sắm trực tuyến

(Bài F5 – SGK Tin học 12 – Định hướng Tin học ứng dụng– Chân trời sáng tạo)

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:

Nhận xét về biểu mẫu thanh toán mua sắm trực tuyến:

+ Đơn giản và dễ sử dụng.

+ Các thông tin rõ ràng.

+ Có phần tuỳ chọn phương thức thanh toán.

- 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 F5, các em đã được giới thiệu về biểu mẫu cũng như tạo được một số thành phần trong biểu mẫu. 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 biểu mẫu, chúng ta sẽ cùng nhau đến với Bài F12: Định kiểu CSS cho biểu mẫu.

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

Hoạt động 1: Định kiểu cho hộp văn bản

a) Mục tiêu: Cung cấp cho HS cách định kiểu cho hộp văn bản cũng như các phần tử khác về phông chữ, đường viền, nền, vùng đệm, lề,…

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

c) Sản phẩm:Cách định kiểu cho hộp văn bả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, quan sát biểu mẫu dưới đây và trả lời các câu hỏi: + Theo em, vì sao lại cần định kiểu cho biểu mẫu? - GV giới thiệu một số thuộc tính CSS dùng để định kiểu cho biểu mẫu. - GV cho HS xem video https://www.youtube.com/shorts/-FxSjX-B1sM và tiếp tục đặt câu hỏi định hướng: + Hai trường input (Username, Password) trong biểu mẫu LOGIN ở hình trên được định kiểu theo cấp độ nào? A. inline. B. inline-block. C. block. D. none.

1. Định kiểu cho hộp văn bản - Định kiểu cho biểu mẫu không chỉ giúp tăng tính thẩm mĩ và sự nhất quán về hình thức cho biểu mẫu, mà còn tăng cường khả năng tiếp cận và trải nghiệm của người dùng: + Để tăng tính thẩm mĩ, em kết hợp các yếu tố về màu sắc và kích cỡ của văn bản, nền và đường viền. + Để cải thiện trải nghiệm của người dùng, em có thể điều chỉnh các yếu tố như độ rộng, khoảng cách, căn lề, phông chữ, hiệu ứng màu sắc và các dấu hiệu giúp biểu mẫu thêm trực quan, dễ đọc và dễ thao tác. - Tương tự như những phần tử khác, biểu mẫu cũng có những thuộc tính dùng để định kiểu phông chữ, đường viền, nền, vùng đệm, lề,... Bên cạnh đó, em có thể sử dụng những thuộc tính khác như display, box-sizing,… để thay đổi cách thức hiển thị của các thành phần trên biểu mẫu. - Trong HTML, những phần tử được xếp vào cấp độ block bao gồm: · <header>. · <div>. · <form>. · Các phần tử từ <h1> đến <h6>. …

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

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

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

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 F11: Định kiểu CSS cho bảng và phần tử <div>

• 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

• Giáo án Tin học lớp 12 Bài G2: Nhóm nghề quản trị thuộc ngành Công nghệ thông tin

• Giáo án Tin học lớp 12 Bài G3: Một số nghề ứng dụng tin học và một số ngành thuộc lĩnh vực Công nghệ thông tin

---