Năng lực giao tiếp và hợp tác: khả năng thực hiện nhiệm vụ một cách độc lập hay theo nhóm; Trao đổi tích cực với giáo viên và các bạn khác trong lớp.
Năng lực tự chủ và tự học: biết lắng nghe và chia sẻ ý kiến cá nhân với bạn, nhóm và GV. Tích cực tham gia các hoạt động trong lớp.
Giải quyết vấn đề và sáng tạo: biết phối hợp với bạn bè khi làm việc nhóm, tư duy logic, sáng tạo khi giải quyết vấn đề.

Năng lực Tin học:

Mô tả được mô hình hộp trong trình bày phần tử HTML.
Thực hiện được việc hiển thị phần tử theo khối, theo dòng.
Nắm được bố cục trang web.

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, máy tí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: Giúp HS định hướng mục tiêu bài học.

b) Nội dung: HS nghiên cứu nội dung hoạt động Khởi động SGK trang 83 và đưa ra câu trả lời.

c) Sản phẩm: Nhận xét của HS về bố cục của hai trang web.

d) Tổ chức thực hiệ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 hai trang web và trả lời câu hỏi Khởi động SGK trang 83: Em hãy truy cập trang chủ của các website https://moet.gov.vn/

và https://tienphong.vn/. Theo em, bố cục của hai trang web này có giống nhau không?

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

- HS quan sát hai trang web 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:

Bố cục của hai trang web đều có đầy đủ các phần như: phần đầu trang (header), thanh điều hướng (navigation menu), phần nội dung (content), phần chân trang (footer). Tuy nhiên, cũng có một số điểm khác biệt về vị trí các phần, kiểu chữ, màu sắc và nội dung.

- 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: Thông thường, một trang web thường có bố cục bao gồm phần đầu trang (header), thanh điều hướng (navigation menu), phần nội dung (content), phần chân trang (footer). Tuy nhiên, mỗi trang web sẽ có cách trình bày nội dung, hình ảnh khác nhau. Vậy giúp các em biết cách hiển thị nội dung trên trang web theo nhiều kiểu khác nhau, chúng ta sẽ cùng nhau đến với Bài 11: Mô hình hộp, bố cục trang web.

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

Hoạt động 1: Mô hình hộp trong trình bày phần tử HTML

a) Mục tiêu:

- Cung cấp cho HS một số thuộc tính cơ bản trong mô hình hộp.

- Giúp HS hiểu và biết cách khai báo các vùng trong mô hình hộp.

b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1. Mô hình hộp trong trình bày phần tử HTML và thực hiện nhiệm vụ học tập.

c) Sản phẩm:

- Một số thuộc tính cơ bản trong mô hình hộp.

- Cách khai báo các vùng trong mô hình hộp.

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