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

Trang trước Trang sau

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 Cánh diều bản word chuẩn kiến thức, trình bày đẹp mắt, dễ dàng chỉnh sửa:

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ể.

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.

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

- GV trình chiếu Hình 1 và giới thiệu về mô hình hộp, sau đó yêu cầu HS trả lời các câu hỏi:

+ Em hãy quan sát Hình 1 và trình 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 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:

- HS tìm hiểu nội dung mục 1 SGK tr.83 – 84 và trả lời các câu hỏi mà GV đưa ra.

- GV quan sát, theo dõi 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:

- HS trả lời các câu hỏi và nhận xét lẫn nhau.

Bước 4: Đánh giá kết quả thực hiện:

- GV nêu nhận xét, chính xác hoá lại các nội dung trả lời của HS.

1. Mô hình hộp trong trình bày phần tử HTML

- Các phần tử trong văn bản HTML được trình bày trên trình duyệt web theo mô hình hộp (Box model).

Giáo án Tin học 12 Cánh diều Bài 11: Mô hình hộp, bố cục trang web (ảnh 1)

Hình 1. Cấu trúc logic của mô hình hộp trong trình bày phần tử HTML

Theo đó, mỗi phần tử khi được trình bày có cấu trúc logic gồm các hộp chữ nhật xác định các vùng nội dung và vùng đường viền:

● Ngăn cách nhau giữa vùng nội dung và vùng đường viền là một vùng đệm mặc định hiển thị trong suốt, giúp phân tách nội dung và đường viền khi hiển thị trên màn hình trình duyệt web.

● Vùng lề là một vùng mặc định hiển thị trong suốt, bao ngoài vùng đường viền để phân tách các phần tử được hiển thị cạnh 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 các thuộc tính định dạng CSS.

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

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

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

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 Cánh diều 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 Cánh diều hay, chuẩn khác:

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