Giáo án Chủ đề F Bài 11 Tin học 12 Cánh diều: Mô hình hộp, bố cục trang web

Ngày soạn:…/…/… Ngày dạy:…/…/…
BÀI 11: MÔ HÌNH HỘP, BỐ CỤC TRANG WEB
(2 tiết) I. MỤC TIÊU 1. Kiến thức
Sau bài học này, HS sẽ:
- Mô tả được mô hình hộp trong trình bày phần tử HTML.
- Trình bày được cách hiển thị phần tử theo khối, theo dòng.
- Nhận diện được các thành phần cơ bản trong bố cục trang web. 2. Năng lực
Năng lực chung:
- 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ể. 1
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, máy tí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 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. 2
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:
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ụ:
1. Mô hình hộp trong trình bày phần tử
- GV trình chiếu Hình 1 và giới thiệu HTML
về mô hình hộp, sau đó yêu cầu HS - Các phần tử trong văn bản HTML được trả lời các câu hỏi:
trình bày trên trình duyệt web theo mô hình
+ Em hãy quan sát Hình 1 và trình hộp (box model).
bày về cấu trúc logic của mô hình
hộp trong trình bày phần tử HTML.
+ Có thể điều chỉnh kích cỡ cho các
vùng hiển thị của mô hình hộp được 3
không? Nếu có thì em cần thực hiện như thế nào?
- GV phân tích Ví dụ 1 và Ví dụ 2 để
HS hiểu rõ và biết cách khai báo định
dạng các vùng hiển thị của mô hình hộp.
Bước 2: HS thực hiện nhiệm vụ học tập:
Hình 1. Cấu trúc logic của mô hình hộp trong
- HS tìm hiểu nội dung mục 1 SGK
trình bày phần tử HTML
tr.83 – 84 và trả lời các câu hỏi mà Theo đó, mỗi phần tử khi được trình bày có GV đưa ra.
cấu trúc logic gồm các hộp chữ nhật xác định
- GV quan sát, theo dõi và hỗ trợ HS các vùng nội dung và vùng đường viền: khi cần thiết.
 Ngăn cách nhau giữa vùng nội dung và
Bước 3: Báo cáo kết quả hoạt động,
vùng đường viền là một vùng đệm mặc thảo luận:
định hiển thị trong suốt, giúp phân tách nội
- HS trả lời các câu hỏi và nhận xét
dung và đường viền khi hiển thị trên màn lẫn nhau. hình trình duyệt web.
Bước 4: Đánh giá kết quả thực  Vùng lề là một vùng mặc định hiển thị hiện:
trong suốt, bao ngoài vùng đường viền để
- GV nêu nhận xét, chính xác hoá lại
phân tách các phần tử được hiển thị cạnh
các nội dung trả lời của HS. nhau.
- Thông thường, các trình duyệt web tự động
căn chỉnh để toàn bộ các phần tử được khai
báo trong văn bản HTML hiển thị đầy đủ trên
màn hình trình duyệt web. Tuy vậy, hoàn toàn
có thể điều chỉnh kích cỡ các vùng hiển thị
này bằng cách thiết lập giá trị phù hợp cho 4