Giáo án NLS Tin học 12 THUD kết nối Bài 16: Định dạng khung
Giáo án NLS Tin học 12 (ứng dụng) kết nối tri thức Bài 16: Định dạng khung. Với năng lực số được tích hợp, tiết học sẽ giúp học sinh làm quen và ứng dụng công nghệ, tin học. KHBD này là file word, tải về dễ dàng. Là mẫu giáo án mới nhất năm 2026 để giáo viên dạy tốt môn Tin học 12.
Xem: => Giáo án tích hợp NLS Tin học 12 TH ứng dụng Kết nối tri thức
Ngày soạn:…/…/…
Ngày dạy:…/…/…
BÀI 16: ĐỊNH DẠNG KHUNG
(2 tiết)
I. MỤC TIÊU
1. Kiến thức
Sau bài học này, HS sẽ:
- Sử dụng được CSS để định dạng khung văn bản, kích thước khung, kiểu đường viền,…
- Biết sử dụng CSS cho các bộ chọn khác nhau (id, class,…).
2. Năng lực
Năng lực chung:
- 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:
- Phân biệt được phần tử khối và phần tử nội tuyến.
- Hiểu được ý nghĩa các thuộc tính liên quan đến khung. Chỉ ra được thuộc tính và giá trị thuộc tính đó trên ví dụ cụ thể.
- Hiểu được ý nghĩa, cách thiết lập và áp dụng bộ chọn đặc biệt (bộ chọn lớp, bộ chọn với mã định danh, bộ chọn thuộc tính) của CSS.
Năng lực số:
- 2.4.NC1a: Sử dụng thành thạo thẻ “Computed” trong công cụ Developer Tools (F12) trên trình duyệt để quan sát trực quan kích thước thực tế của các thành phần (Box Model Visualization).
- 6.1.NC1a: Phân tích được nguyên nhân gây vỡ giao diện (ví dụ: cộng dồn margin, tràn box) và đưa ra giải pháp xử lý kĩ thuật.
- 6.2.NC1a: Sử dụng Chatbot AI để tư vấn cách tính toán kích thước tổng thể của phần tử (Total Width/Height) và viết mã CSS cho các trạng thái tương tác phức tạp (hover effects).
- 5.2.NC1a: Thiết kế được các thành phần giao diện (Card, Button, Menu) có bố cục chuẩn xác từng pixel.
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 câu lệnh.
- Luôn có ý thức tìm kiếm, lựa chọn các cách làm mới, đơn giản và hiệu quả cho các tình huống thực tiễn.
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 – Kết nối tri thức, bài trình chiếu (Slide), máy chiếu, phòng máy tính có kết nối Internet, các ví dụ minh hoạ tương ứng trong bài như mô tả SGK, video AI tạo bằng công cụ AI được dùng để khởi động bài học.
- HS: SGK, SBT Tin học 12 – Định hướng Khoa học máy tính – Kết nối tri thức, vở ghi.
III. TIẾN TRÌNH DẠY HỌC
A. HOẠT ĐỘNG KHỞI ĐỘNG
a) Mục tiêu: HS được gợi ý cách giải quyết với câu hỏi làm thế nào có thể thiết lập định dạng để ứng dụng khác biệt với cùng một phần tử HTML.
b) Nội dung: HS thảo luận nhóm để trả lời câu hỏi.
c) Sản phẩm: Từ yêu cầu, HS vận dụng sự hiểu biết để trả lời câu hỏi GV đưa ra.
d) Tổ chức thực hiện:
Bước 1: GV chuyển giao nhiệm vụ:
- GV yêu cầu xem video AI được thiết kế để phục vụ bài dạy và trả lời câu hỏi xuất hiện trong video đó.
- GV chia lớp thành 4 nhóm học tập, sau đó nêu câu hỏi Khởi động SGK trang 89 cho các nhóm thảo luận:
Trên một trang web thường có rất nhiều phần tử cùng loại (cùng tên thẻ). Ví dụ thẻ p sẽ tương ứng với rất nhiều phần tử của trang web. Một định dạng với bộ chọn p sẽ áp dụng cho tất cả các thẻ p. Nếu muốn phân biệt các thẻ p với nhau và muốn tạo ra các CSS để phân biệt các thẻ p thì có thể thực hiện được không?
Bước 2: HS thực hiện nhiệm vụ học tập:
- HS xem video và suy nghĩ câu trả lờ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 đại diện các nhóm HS trình bày kết quả thảo luận.
Gợi ý trả lời: Có thể tạo ra các CSS để phân biệt các phần tử HTML cùng loại bằng cách thiết lập các định dạng kiểu lớp.
- 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ận xét, đánh giá và kết luận.
[6.1.NC1a: HS sử dụng công cụ AI hoặc sản phẩm số do GV cung cấp để tiếp nhận thông tin, trả lời câu hỏi đơn giản.
2.1.NC1a: HS thực hiện các tương tác cơ bản với học liệu số (xem video, trả lời câu hỏi trên môi trường số).
1.1.NC1a: HS tiếp cận, khai thác được thông tin từ nguồn học liệu số dưới sự hướng dẫn của GV.]
- GV đánh giá kết quả của HS, dẫn dắt HS vào bài học mới: CSS có thể hỗ trợ thiết lập các định dạng kiểu lớp để định dạng khác biệt với cùng một phần tử HTML. Để giúp các em hiểu rõ hơn, chúng ta sẽ cùng nhau đến với Bài 16: Định dạng khung.
B. HÌNH THÀNH KIẾN THỨC MỚI
Hoạt động 1: Tìm hiểu và phân biệt phần tử khối và phần tử nội tuyến
a) Mục tiêu: HS biết và hiểu khái niệm kiểu phần tử khối và nội tuyến thông qua thuộc tính display.
b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1.PHÂN LOẠI PHẦN TỬ KHỐI VÀ NỘI TUYẾN và thực hiện nhiệm vụ.
c) Sản phẩm: Phần tử khối và phần tử nội tuyến.
d) Tổ chức thực hiện:
…………………………………………..
…………………………………………..
…………………………………………..
Hoạt động 2: Tìm hiểu cách thiết lập định dạng khung cho các phần tử
a) Mục tiêu: HS biết được các khái niệm và định nghĩa liên quan đến khung viền của phần tử HTML, phân biệt được sự khác nhau giữa khung của phần tử khối và phần tử nội tuyến, biết cách đặt các định dạng cho khung này.
b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 2. THIẾT LẬP ĐỊNH DẠNG KHUNG BẰNG CSS, thảo luận nhóm thực hiện nhiệm vụ.
c) Sản phẩm: Cách thiết lập định dạng khung cho các phần tử.
d) Tổ chức thực hiện:
| HOẠT ĐỘNG CỦA GV VÀ HS | SẢN PHẨM DỰ KIẾN | NLS | |
Bước 1: GV chuyển giao nhiệm vụ: - GV cho HS đọc Hoạt động 2 – Tìm hiểu cách thiết lập định dạng khung cho các phần tử SGK tr.90: Quan sát Hình 16.3 để biết các thông số chính của khung của phần tử HTML để có thể hiểu được cách thiết lập khung, viền bằng CSS.
Hình 16.3. Các thông số chính của khung - GV lưu ý HS về việc thiết lập định dạng khung cho phần tử dạng khối và các phần tử nội tuyến. - GV chia lớp thành các nhóm 2 – 3 HS, mỗi nhóm tìm hiểu về một nhóm thuộc tính: + Em hãy trình bày một số thuộc tính liên quan đến khung của một phần tử HTML theo cách phân loại sau:
+ Các thuộc tính liên quan đến khung có tính kế thừa không? - GV phân tích ví dụ SGK tr.91 để HS hiểu rõ hơn về cách thiết lập định dạng khung. - GV vẽ mô hình hộp lên bảng: Nhân (Content), Đệm (Padding), Vỏ (Border), Khoảng cách (Margin). Sau đó đặt vấn đề: “Nếu width: 100px, padding: 20px, border: 5px. Vậy tổng chiều rộng của cái hộp là bao nhiêu?” Từ đó yêu cầu HS giải thích sự khác nhau giữa box-sizing: content-box và border-box. - GV yêu cầu HS vận dụng kiến thức vừa tìm hiểu, trả lời câu hỏi Hoạt động củng cố kiến thức tr.92 SGK: Câu 1. Trong các thuộc tính khung của một phần tử HTML, khoảng cách từ vùng văn bản đến đường viền khung được gọi là gì? Câu 2. Lề khung khác gì với vùng đệm? 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 2 SGK tr.90 – 91 sau đó trao đổi, thảo luận trả lời các câu hỏi mà GV đưa ra. - HS sử dụng AI để giải quyết bài toán kích thước: “Cách tính tổng chiều rộng (Total Width) của một phần tử HTML trong CSS mặc định? Giải thích sự khác biệt giữa box-sizing: content-box và border-box.” - GV quan sát và trợ giúp HS (nếu cần thiết). Bước 3: Báo cáo kết quả hoạt động, thảo luận: - GV mời đại diện các nhóm báo cáo kết quả thảo luận. - Các nhóm khác đưa ra ý kiến nhận xét. Bước 4: Đánh giá kết quả thực hiện nhiệm vụ học tập: - Từ kết quả thảo luận của nhóm, GV nhận xét, đánh giá quá trình HS thực hiện nhiệm vụ. - GV chính xác hoá lại các nội dung kiến thức. - GV chốt kiến thức theo Hộp kiến thức:
| 2. THIẾT LẬP ĐỊNH DẠNG KHUNG BẰNG CSS - Lưu ý: Cần phân biệt hai loại phần tử HTML, phần tử khối và phần tử nội tuyến. Với phần tử dạng khối, các khung được xác định với đầy đủ tính chất, còn với các phần tử nội tuyến thì khung chỉ có thể thiết lập mà không có các thông số chiều cao, chiều rộng. Bảng 16.2. Các thuộc tính liên quan đến khung
* Các thuộc tính trên đều không có tính kế thừa. - Ví dụ: Cho một đoạn mã HTML như sau:
Nếu thiết lập mẫu định dạng như Hình 16.4a cho đoạn mã HTML ở trên thì kết quả nhận được tương tự như Hình 16.4b.
a) Mẫu định dạng khung viền
b) Kết quả hiển thị trên trình duyệt Hình 16.4. Định dạng khung | - 6.1.NC1a: Phân tích các yếu tố kĩ thuật ảnh hưởng đến hiển thị để đưa ra giải pháp thiết kế chính xác. | |
Hướng dẫn trả lời câu hỏi Hoạt động củng cố kiến thức tr.92 SGK: Câu 1. Trong các thuộc tính khung của một phần tử HTML, khoảng cách từ vùng văn bản đến đường viền khung được gọi là vùng đệm (padding). Câu 2. - Lề khung là khoảng cách từ khung đến phần text bên ngoài khung. - Vùng đệm là khoảng cách từ khung đến phần text bên trong khung. | |||
Hoạt động 3: Tìm hiểu một số cách thiết lập các bộ chọn đặc biệt khác
a) Mục tiêu: HS biết và hiểu được cách thiết lập định dạng cho các phần tử đặc biệt để trả lời câu hỏi đã được đặt ra ở phần hoạt động Khởi động.
b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 3. MỘT SỐ BỘ CHỌN ĐẶC BIỆT CỦA CSS, thảo luận nhóm thực hiện nhiệm vụ.
c) Sản phẩm: Các cách thiết lập bộ chọn là tổ hợp các phần tử.
d) Tổ chức thực hiện:
…………………………………………..
…………………………………………..
…………………………………………..
Hoạt động 4: Thực hành
a) Mục tiêu: HS thực hành tạo trang web.
b) Nội dung: GV hướng dẫn HS thực hiện Nhiệm vụ SGK tr.93 để tạo trang web theo yêu cầu.
c) Sản phẩm: Trang web được tạo theo yêu cầu.
d) Tổ chức thực hiện:
| HOẠT ĐỘNG CỦA GV - HS | DỰ KIẾN SẢN PHẨM | NLS |
Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS đọc kĩ yêu cầu của Nhiệm vụ thực hành SGK tr.93 và thực hành cá nhân theo hướng dẫn. Yêu cầu: Tạo trang web mô tả bảng 16 tên màu cơ bản CSS như Hình 16.5.
Hình 16.5. Bảng 16 tên màu cơ bản Gợi ý: Bài thực hành có thể thực hiện theo hai bước: Bước 1. Thiết lập bảng với nội dung như trong Hình 16.5 nhưng chưa định dạng. Bước 2. Viết bổ sung các mẫu CSS để định dạng khung đúng như Hình 16.5. Hướng dẫn: Bước 1. Thiết lập trang web theo nội dung như Hình 16.5. + Sử dụng các thẻ <table> </table> để thiết lập bảng:
+ Lưu ý các ô cuối của mỗi hàng cần được thiết lập màu nền theo đúng thông số màu đã ghi tại cột 1 hoặc cột 2.
Bước 2. Thiết lập mẫu CSS để tạo khuôn khung, viền cho bảng.
Bước 2: HS thực hiện nhiệm vụ học tập: - HS tiếp nhận và thực hiện theo đúng hướng dẫn để hoàn thành yêu cầu thực hành. - Trong quá trình HS thực hành, GV quan sát, hỗ trợ, giải đáp các vướng mắc của HS. Bước 3: Báo cáo kết quả hoạt động, thảo luận: - HS lưu, mở tệp bằng trình duyệt web và báo cáo kết quả cho GV. Bước 4: Đánh giá kết quả thực hiện: - GV nhận xét, kiểm tra kết quả thực hiện Nhiệm vụ thực hành của HS. - Nhiệm vụ thực hành được gọi là hoàn thành khi HS tạo được trang web như Hình 16.5. | 4. THỰC HÀNH Nhiệm vụ: Tạo trang web Bước 1. HS thiết lập trang web theo nội dung như Hình 16.5.
Bước 2. HS thiết lập mẫu CSS để tạo khuôn khung, viền cho bảng.
| - 5.2.NC1a: Sáng tạo và xuất bản nội dung số. - 6.1.NC1a: Xác định nhu cầu và giải quyết vấn đề kỹ thuật. |
C. HOẠT ĐỘNG LUYỆN TẬP
a) Mục tiêu: Giúp HS củng cố lại kiến thức được học trong bài.
b) Nội dung: GV giao nhiệm vụ cho HS, HS hoàn thành phiếu bài tập và hoạt động Luyện tập SGK tr.95.
c) Sản phẩm học tập:
- Phiếu bài tập.
- Hoạt động Luyện tập.
d) Tổ chức thực hiện:
…………………………………………..
…………………………………………..
…………………………………………..
D. HOẠT ĐỘNG VẬN DỤNG
a) Mục tiêu: HS vận dụng kiến thức được học giải quyết bài toán thực tế.
b) Nội dung: HS thực hiện hoạt động Vận dụng SGK tr.95.
c) Sản phẩm: HS hoàn thành bài tập phần Vận dụng SGK tr.95.
d) Tổ chức thực hiện:
Bước 1: GV chuyển giao nhiệm vụ học tập
- GV yêu cầu HS làm việc cá nhân, hoàn thành bài tập phần Vận dụng SGK tr.95.
Câu 1. Giả sử nội dung trang web của em có rất nhiều thẻ p, trong đó có ba đoạn mà em thấy quan trọng nhất, kí hiệu các đoạn này là P1, P2, P3. Có cách nào thiết lập định dạng CSS để có thể định dạng P1 khác biệt, P2 và P3 có cùng kiểu và cũng khác biệt không? Tất cả các đoạn còn lại có định dạng giống nhau. Hãy nêu cách giải quyết vấn đề của em.
Câu 2. Có thể thiết lập định dạng cho các khung với thông số khung, viền trên, dưới, trái, phải khác nhau được không? Em hãy tìm hiểu và trình bày cách thiết lập định dạng CSS cho các khung, viền như vậy.
Bước 2: HS thực hiện nhiệm vụ học tập
- HS tiếp nhận và thực hiện nhiệm vụ.
- GV quan sát, hỗ trợ khi HS cần.
Bước 3: Báo cáo kết quả hoạt động, thảo luận
- GV mời một số HS trình bày câu trả lời.
- HS khác chú ý lắng nghe, đưa ra ý kiến nhận xét.
Gợi ý đáp án:
Câu 1. Với yêu cầu này có thể thiết lập như sau:
+ Phần tử P1 có thể thiết lập mã định danh nào đó, ví dụ #p1.
+ Với hai phần tử P2, P3 có thể định nghĩa cho vào một lớp và thiết lập định dạng CSS cho lớp này.
Câu 2. CSS còn hỗ trợ việc định dạng viền khung cho các đường kẻ trái, phải, trên, dưới của khung. Sử dụng các thuộc tính sau: border-left, border-right, border-top, border-bottom.
Bước 4: Đánh giá kết quả thực hiện
- GV chính xác hoá lại các nội dung trả lời của HS.
- GV chuẩn kiến thức và kết thúc tiết học.
[6.1.NC1a: Xác định và giải quyết vấn đề kỹ thuật.]
E. THÔNG TIN BỔ SUNG
…………………………………………..
…………………………………………..
…………………………………………..
=> Giáo án Tin học ứng dụng 12 kết nối bài 16: Định dạng khung