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 HTML và CSS để thiết kế trang web theo yêu cầu.

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 Khoa học máy tính – 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 Khoa học máy tính – 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: Ôn lại một số thuộc tính định dạng CSS cho các vùng hiển thị của mô hình hộp.

b) Nội dung: HS ôn tập lại một số thuộc tính định dạng CSS cho các vùng hiển thị của mô hình hộp.

c) Sản phẩm: Một số thuộc tính định dạng CSS cho các vùng hiển thị của mô hình hộp.

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 CSS với mô tả của nó.

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:

- 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: Ở những bài học trước, các em đã biết cách trình bày nội dung văn bản, chèn hình ảnh, âm thanh, video, tạo biểu mẫu và sử dụng CSS để định dạng. Để giúp các em ôn tập lại toàn bộ kiến thức về HTML, CSS, đồng thời được thực hành theo nội dung lí thuyết đã học, chúng ta sẽ cùng nhau đến với Bài 12: Dự án nhỏ: Tạo trang web báo tường.

B. DỰ ÁN HỌC TẬP

Giới thiệu dự án: Thiết kế trang web báo tường điện tử

a. Mục tiêu: HS nắm rõ yêu cầu và sản phẩm của dự án.

b. Nội dung: GV trình bày các yêu cầu chung của dự án.

c. Sản phẩm: Yêu cầu và mô tả sản phẩm của dự án.

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

HOẠT ĐỘNG CỦA GV - HS

DỰ KIẾN SẢN PHẨM

Bước 1: GV chuyển giao nhiệm vụ học tập

- GV trình bày các yêu cầu chung của dự án.

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

- HS chú ý lắng nghe.

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

- HS nắm rõ yêu cầu, sản phẩm và các tiêu chí đánh giá kết quả dự án.

Bước 4: Đánh giá kết quả, thực hiện nhiệm vụ học tập

- GV tổng kết lại các nội dung chính liên quan đến dự án.

1. Yêu cầu chung

Yêu cầu: Hãy thiết kế trang web báo tường điện tử của lớp em.

* Mô tả sản phẩm:

- Sản phẩm thứ nhất: Tệp dữ liệu dạng *.html tạo nội dung trang web.

Bảng 1. Những nội dung chính
của sản phẩm thứ nhất

1. Phần tiêu đề trang web (header) sử dụng hình ảnh hoặc văn bản được trình bày để làm nổi bật chủ đề của trang báo (chủ đề của trang báo do các nhóm tự đặt tên).

2. Phần nội dung chính (content) của báo tường gồm:

Bài giới thiệu.
Các bài viết.
Góc ảnh.
Góc âm nhạc, video clip.
Góc bình luận: tạo các biểu mẫu hỗ trợ nhập dữ liệu.

3. Phần chân trang web (footer) gồm:

Thông tin về nhóm.
Địa chỉ email của các học sinh đại diện nhóm.
Thông tin về ngày cập nhật nội dung gần nhất.
Thông tin về nguồn thông tin mà nội dung trang web của nhóm em tham khảo (nếu có).

- Sản phẩm thứ hai: Tệp dữ liệu dạng *.css khai báo các quy tắc định dạng CSS để áp dụng kiểu trình bày cho trang web.

Bảng 2. Những nội dung chính
của sản phẩm thứ hai

1. Khai báo CSS sử dụng bộ chọn định danh cho các thành phần chính của trang web: Phần tiêu đề, Phần nội dung, Phần chân trang.

2. Khai báo CSS sử dụng các bộ chọn lớp cho các thành phần của nội dung, ví dụ: tiêu đề bài viết, tên tác giả.

3. Khai báo CSS xác định vị trí hiển thị cho các phần tử HTML.

4. Thiết lập được định dạng CSS màu nền, màu chữ, phông chữ, cỡ chữ, đường viền cho các thành phần nội dung: bài giới thiệu, các bài viết, góc ảnh, góc âm nhạc, góc bình luận.

………………………

------------------------------

----------------- Còn tiếp ------------------

Trên chỉ là 1 phần của giáo án. Giáo án khi tải về có đầy đủ nội dung của bài. Đủ nội dung của học kì I + học kì II