Giáo án Tin học 12 Cánh Diều - HK 2

Giáo án Tin học 12 Cánh Diều kì 2 - Giáo án Tin 12 Cánh Diều định hướng Tin học ứng dụng  học kì 2 không chỉ là tài liệu tham khảo thông thường, mà còn là người bạn đồng hành tin cậy, giúp thầy cô và học sinh khám phá những chân trời kiến thức mới mẻ, khơi dậy tiềm năng và phát triển toàn diện. Với nội dung bám sát chương trình giáo dục mới, giáo án mang đến những trải nghiệm thực tế, gắn liền với cuộc sống, giúp học sinh tự tin bước vào tương lai.

• Giáo án Hoạt động trải nghiệm 12 Chân trời sáng tạo Bản 1 - HK 1

Nội dung giáo án Tin học 12 Cánh Diều kì 2

CHỦ ĐỀ E (ICT) ỨNG DỤNG TIN HỌC

CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH

CHỦ ĐỀ G. HƯỚNG NGHIỆP VỚI TIN HỌC

Giáo án Tin học 12 Cánh Diều Bài 11: MÔ HÌNH HỘP, BỐ CỤC TRANG WEB

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). 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. Bảng 1. 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   - Định dạng vùng lề và vùng đệm cho một phần tử HTML: Sử dụng thuộc tính margin và padding, chỉ định giá trị là các khoảng cách, thường theo đơn vị pixel. · Để tường minh trong mã lệnh, em nên chỉ định đầy đủ 4 giá trị ứng với 4 khoảng cách trên, phải, dưới và trái.   · Cách chỉ định giá trị cho thuộc tính margin:   · Cách chỉ định giá trị cho thuộc tính padding: Lưu ý: Khi cả 4 khoảng cách đều bằng nhau, em chỉ cần chỉ định 1 giá trị duy nhất. Ví dụ 1. Văn bản HTML ở Hình 2a có khai báo thuộc tính định dạng kích thước vùng lề của phần tử p, kết quả hiển thị như Hình 2b. Hình 2a. Ví dụ sử dụng mô hình hộp trình bày đoạn văn bản Hình 2b. Kết quả khi mở văn bản HTML ở Hình 2a bằng trình duyệt web Ví dụ 2. Văn bản HTML ở Hình 3a có khai báo thuộc tính định dạng kích thước vùng đệm và đường viền của phần tử p, kết quả hiển thị như Hình 3b. Hình 3a. Ví dụ sử dụng thuộc tính xác định đường viền Hình 3b. Kết quả khi mở văn bản

Trên đây là một số nội dung trong bộ giáo án Tin học 12 Cánh Diều kì 2. Mời các bạn sử dụng file tải về để xem toàn bộ nội dung chi tiết.

Mời các bạn tham khảo các bài viết khác trong chuyên mục Giáo án bài giảng của Hoatieu.