GA tích hợp NLS và AI Tin học 12 THUD Bài 8: Định dạng văn bản
Giáo án năng lực số và AI Tin học 12 (ứng dụng) Bài 8: Định dạng văn bản được biên soạn theo định hướng phát triển phẩm chất – năng lực. Nội dung có tích hợp NLS và AI giúp HS rèn luyện khả năng ứng dụng công nghệ, thao tác số ngay trong tiết học. Tài liệu ở dạng file Word, dễ chỉnh sửa – dễ tải về, phù hợp cho GV sử dụng từ năm học 2026.
Nội dung chi tiết
Ngày soạn:…/…/…
Ngày dạy:…/…/…
BÀI 8: ĐỊNH DẠNG VĂN BẢN
(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 thẻ HTML để định dạng văn bản, phông chữ.
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:
- Hiểu được ý nghĩa của thuộc tính thẻ.
- Phát hiện được các thẻ có thuộc tính thông qua cấu trúc.
- Hiểu được các thành phần khác nhau của văn bản cần có kiểu định dạng khác nhau, phù hợp và giúp nhấn mạnh nội dung.
- Biết được cấu trúc các thẻ định dạng văn bản.
- Sử dụng được được các thẻ HTML định dạng được tiêu đề, đoạn văn, phông chữ và kiểu chữ cho văn bản.
Năng lực số:
- 1.1.NC1a: Đáp ứng được nhu cầu thông tin.
- 1.1.NC1b: Áp dụng được kỹ thuật tìm kiếm để lấy được dữ liệu, thông tin và nội dung trong môi trường số.
- 1.3.NC1a: Thao tác được thông tin, dữ liệu và nội dung để tổ chức, lưu trữ và truy xuất dễ dàng hơn.
- 3.1.NC1a: Áp dụng được các cách tạo và chỉnh sửa nội dung ở các định dạng khác nhau.
- 3.2.NC1a: Làm việc với các mục nội dung và thông tin mới khác nhau, sửa đổi, tinh chỉnh, cải thiện và tích hợp chúng để tạo ra những mục mới và độc đáo.
- 3.4.NC1a: Lập trình.
- 5.2.NC1b: Áp dụng được các công cụ số khác nhau và các giải pháp công nghệ có thể có để giải quyết vấn đề.
- 6.1.NC1a: Phân tích được cách AI hoạt động trong các ứng dụng cụ thể.
- 6.2.NC1a: Lựa chọn và sử dụng được các công cụ AI phù hợp để nâng cao hiệu suất học tập và giải quyết vấn đề.
Năng lực AI:
- 12.C2.1: Các yêu cầu dành cho công cụ AI hỗ trợ các hoạt động học tập và xã hội (hỗ trợ việc lựa chọn công cụ AI phù hợp trong học tập).
- 12.D2.2: Phát triển hệ thống AI (ứng dụng AI để phân tích và gỡ lỗi mã lệnh HTML).
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: KHBD, SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng, bài trình chiếu (Slide), phòng thực hành máy tính cài sẵn phần mềm soạn thảo HTML và kết nối Internet, máy chiếu, video AI tạo bằng công cụ AI được dùng để khởi động bài học, bộ câu hỏi trắc nghiệm trên phần mềm Quizizz.
- HS: SGK, SBT Tin học 12 – Định hướng Tin học ứng dụng, vở ghi.
III. TIẾN TRÌNH DẠY HỌC
1. HOẠT ĐỘNG KHỞI ĐỘNG
a) Mục tiêu: HS thấy được tác dụng của việc trình bày một văn bản đẹp.
b) Nội dung: HS dựa vào hiểu biết để trả lời các 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 cho HS xem hình ảnh hai đoạn văn bản trong Hình 8.1, sau đó nêu câu hỏi Khởi động SGK trang 46:
b) | |
a) |
Hình 8.1. Đoạn văn bản
Cho hai đoạn văn bản như Hình 8.1. Các định dạng đoạn văn bản nào đẹp hơn? Tại sao?
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.
- HS quan sát hình ảnh 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 Khởi động tr.46 SGK.
Gợi ý trả lời:
Cách định dạng đoạn văn bản b đẹp hơn. Vì:
+ Tiêu đề được định dạng chữ đậm và có cỡ chữ lớn hơn tạo sự nổi bật so với phần nội dung.
+ Mỗi câu thơ được viết riêng một dòng, trình bày rõ ràng khiến người đọc dễ đọc hơn.
+ Khoảng cách giữa các dòng giúp đoạn văn bản rõ ràng và dễ nhìn hơn.
- 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 dẫn dắt HS vào bài học mới: Một văn bản được trình bày đúng quy cách và đẹp mắt sẽ thu hút người xem tập trung vào các nội dung quan trọng. Vậy để biết cách sử dụng các thẻ HTML để trình bày văn bản, chúng ta sẽ cùng nhau đến với Bài 8: Định dạng văn bản.
2. HÌNH THÀNH KIẾN THỨC MỚI
Hoạt động 1: Nhận biết thuộc tính thẻ
a) Mục tiêu: HS hiểu được ý nghĩa, tác dụng và cách khai báo thuộc tính thẻ.
b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1. THUỘC TÍNH THẺ, thảo luận nhóm thực hiện nhiệm vụ.
c) Sản phẩm: Ý nghĩa, tác dụng và cách khai báo thuộc tính thẻ.
d) Tổ chức thực hiện:
…………………………………………..
…………………………………………..
…………………………………………..
Hoạt động 2: Xác định thành phần cấu thành một văn bản
a) Mục tiêu: HS xác định được các thành phần của văn bản thông thường. Nhận dạng được cách định dạng cho từng thành phần đó.
b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 2. CÁC THẺ ĐỊNH DẠNG TRÌNH BÀY VĂN BẢN, thảo luận nhóm thực hiện nhiệm vụ.
c) Sản phẩm: Các thẻ định dạng trình bày văn bản.
d) Tổ chức thực hiện:
| HOẠT ĐỘNG CỦA GV VÀ HS | SẢN PHẨM DỰ KIẾN | NLS/AI |
a) Định dạng tiêu đề Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS thảo luận theo nhóm 2 – 3 HS, đọc Hoạt động 2 – Xác định thành phần cấu thành một văn bản SGK trang 47 và trả lời câu hỏi: Thảo luận: Khi trình bày một văn bản (bài thơ, đoạn văn, trang web,...) có thể có những thành phần nào? Hãy kể tên các thành phần đó. - GV chia lớp thành các nhóm 2 – 3 HS để thảo luận và đặt câu hỏi: + HTML5 hỗ trợ thẻ nào để định dạng tiêu đề? + Việc sử dụng thẻ định dạng tiêu đề mang lại những lợi ích gì? 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 2a SGK tr.47 và thảo luận theo nhóm thực hiện nhiệm vụ. - GV quan sát và trợ giúp HS. Bước 3: Báo cáo kết quả hoạt động, thảo luận: - Đại diện các nhóm HS trả lời. - Các nhóm khác đưa ra ý kiến nhận xét. Hướng dẫn trả lời câu hỏi Hoạt động 2 SGK tr.47: Những thành phần có thể có khi trình bày một văn bản là: + Tiêu đề. + Các đề mục. + Các đoạn văn bản. + Các hình ảnh minh họa. 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. | 2. CÁC THẺ ĐỊNH DẠNG TRÌNH BÀY VĂN BẢN a) Định dạng tiêu đề - HTML sử dụng các thẻ dạng <hx> trong đó x nhận một trong các giá trị từ 1 đến 6 để định dạng và phân cấp tiêu đề theo các mức khác nhau: + Thẻ <h1> được sử dụng cho tiêu đề chính hay tiêu đề chung của cả văn bản. + Các tiêu đề ở mức thấp hơn dùng thẻ <h2> và tiếp tục với các mức tiếp theo,… - Lợi ích khi sử dụng thẻ <hx>: + Trình duyệt sử dụng thẻ <hx> để hiển thị trang web và định dạng văn bản giúp người dùng đọc lướt trang web theo tiêu đề. + Các công cụ tìm kiếm sử dụng thẻ <hx> để xác định cấu trúc và nội dung trang web. Ví dụ 1: Đoạn mã HTML dưới đây minh hoạ một văn bản có bốn mức tiêu đề:
Hình 8.2. Kết quả khi dùng thẻ tiêu đề trong Ví dụ 1 | 1.3.NC1a: Xác định cấu trúc, lưu trữ và biểu diễn dữ liệu (sử dụng các thẻ HTML) trong các hệ thống phức tạp. |
b) Định dạng đoạn văn bản Bước 1: GV chuyển giao nhiệm vụ: - GV chia lớp thành các nhóm 2 – 3 HS để thảo luận và đặt câu hỏi: + HTML5 hỗ trợ thẻ nào để định dạng đoạn văn bản? + Trình duyệt sẽ hiển thị nội dung đoạn trong cặp thẻ <p>…</p> như thế nào? + Nội dung đoạn văn bản có thể chứa các phần tử khác được không? - 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 củng cố kiến thức SGK tr.48: Câu 1. Trình duyệt hiển thị đoạn mã HTML sau thành mấy dòng? Em có nhận xét gì về khoảng cách giữa các dòng?
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 2b SGK tr.48 và thảo luận theo nhóm thực hiện nhiệm vụ. - GV quan sát và trợ giúp HS. Bước 3: Báo cáo kết quả hoạt động, thảo luận: - Đại diện các nhóm HS trả lời. - Các nhóm khác đưa ra ý kiến nhận xét. Hướng dẫn trả lời Câu hỏi củng cố kiến thức SGK tr.48: Câu 1. + Trình duyệt hiển thị thành 4 dòng. + Nhận xét về khoảng cách giữa các dòng: một cách mặc định, khi sử dụng thẻ <br>, khoảng cách giữa hai dòng nhỏ hơn so với thẻ <p>. Tuy nhiên hai loại khoảng cách đều có thể điều chỉnh (bằng thuộc tính line-height hoặc margin-top/margin-bottom). Câu 2. Thêm thẻ <hr> vào sau dòng đầu tiên. 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. - GV kết luận: Một văn bản thông thường được tạo bởi hai thành phần cơ bản là tiêu đề và các đoạn văn bản. Tiêu đề được định dạng bởi thẻ <hx>, có 6 mức tiêu đề từ <h1> đến <h6>. Đoạn văn bản được định dạng bởi thẻ <p>. Khối là một phần tử chứa nhiều loại dữ liệu, được định nghĩa bởi thẻ <div> và <span>. | b) Định dạng đoạn văn bản - HTML sử dụng thẻ <p> để định dạng đoạn văn bản:
- Khi gặp cặp thẻ <p>…</p>, trình duyệt sẽ hiển thị nội dung đoạn trên dòng mới kèm với khoảng trống nhỏ trước và sau đoạn. - Nội dung đoạn có thể chứa văn bản, hình ảnh và cả các phần tử khác nhưng không được chứa tiêu đề, danh sách, phần tử phân đoạn hoặc các phần tử dạng khối khác. - Khi cần thao tác với nhiều loại nội dung, ta có thể sử dụng cặp thẻ <div>...</div> hay <span>...</span> để tạo một khối chứa nội dung bất kì đặt ở giữa hai thẻ: + Phần tử <div> là một khối, bắt đầu trên dòng mới. + Phần tử <span> có tác dụng tương tự nhưng sử dụng cho quy mô nhỏ hơn; nội dung khối hiển thị trên cùng dòng đang viết. - Để thêm các định dạng như khung, lề,... cho đoạn, ta sử dụng thuộc tính style. Thuộc tính này sẽ được giới thiệu chi tiết trong các bài sau. - Lưu ý: Ngoài các thẻ định dạng đoạn và khối kể trên, còn có hai thẻ <br> và <hr> để xuống dòng hoặc tạo ra một đường kẻ ngang trên trang web. | 1.3.NC1a: Xác định cấu trúc, lưu trữ và biểu diễn dữ liệu (sử dụng các thẻ HTML) trong các hệ thống phức tạp. |
Hoạt động 3: Xác định các dạng đặc biệt của chữ khi trình bày một văn bản
a) Mục tiêu: HS xác định được các dạng đặc biệt của chữ và cách định dạng tương ứng.
b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 3. CÁC THẺ ĐỊNH DẠNG PHÔNG CHỮ, thảo luận nhóm thực hiện nhiệm vụ.
c) Sản phẩm: Các thẻ định dạng kiểu chữ và phông chữ.
d) Tổ chức thực hiện:
…………………………………………..
…………………………………………..
…………………………………………..
Hoạt động 4: Thực hành định dạng văn bản và phông chữ
a) Mục tiêu: HS biết cách định dạng một văn bản đơn giản có cấu trúc gồm một số thành phần khác nhau.
b) Nội dung: GV hướng dẫn HS thực hiện theo nhiệm vụ trong SGK để trình bày đoạn văn bản theo yêu cầu.
c) Sản phẩm: HS viết được đoạn mã HTML để trình bày đoạn văn bản trong Hình 8.3.
d) Tổ chức thực hiện:
| HOẠT ĐỘNG CỦA GV VÀ HS | SẢN PHẨM DỰ KIẾN | NLS/AI |
Nhiệm vụ: Viết đoạn mã HTML để trình bày đoạn văn bản trong Hình 8.3
Hình 8.3. Đoạn văn bản cần trình bày bằng HTML Bước 1: GV chuyển giao nhiệm vụ: - GV yêu cầu HS đọc kĩ và thực hành cá nhân theo hướng dẫn của Nhiệm vụ SGK tr.50 – 51: + Bước 1: Phân tích thành phần của đoạn văn bản:
Lưu ý: Các dòng 7, 8, 9 đều bắt đầu viết trên dòng mới nhưng không là đoạn vì không cách trước và sau như những dòng trên. ………………………………………….. ………………………………………….. …………………………………………..
| 4. THỰC HÀNH ĐỊNH DẠNG VĂN BẢN VÀ PHÔNG CHỮ Nhiệm vụ: Viết đoạn mã HTML để trình bày đoạn văn bản trong Hình 8.3 - Bước 1: Đoạn văn bản bao gồm: + Tiêu đề: Dòng 1, 2, 3. + Đoạn: 3 đoạn. - Bước 2: Viết được 3 dòng tiêu đề.
- Bước 3: Viết được 3 đoạn bên dưới.
* Đoạn mã HTML hoàn chỉnh:
| - 3.4.NC1a: Viết mã lệnh HTML. - 3.1.NC1a: Sử dụng các công cụ kỹ thuật số để tạo, thiết kế và phát triển các nội dung số phức tạp. - 6.2.NC1a: Lựa chọn và sử dụng được các công cụ AI phù hợp để nâng cao hiệu suất học tập và giải quyết vấn đề. - 12.D2.2: HS sử dụng công cụ AI để phân tích nguyên nhân lỗi mã nguồn và lựa chọn phương án sửa lỗi phù hợp để đoạn mã hoạt động đúng. |
3. HOẠT ĐỘNG LUYỆN TẬP
a) Mục tiêu: HS vận dụng các kiến thức đã học, lựa chọn được công cụ phù hợp để thực hiện nhiệm vụ.
b) Nội dung: GV giao nhiệm vụ cho HS, HS hoàn thành phiếu bài tập.
c) Sản phẩm học tập:
- Phiếu bài tập.
- HS hoàn thiện hiểu biết cơ bản về định dạng văn bản.
d) Tổ chức thực hiện:
…………………………………………..
…………………………………………..
…………………………………………..
4. 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 hoàn thành bài tập 1, 2 SGK trang 51 phần Vận dụng.
c) Sản phẩm: HS hoàn thành tìm hiểu kiến thức.
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 hoạt động cá nhân hoàn thành bài tập phần Vận dụng SGK trang 51.
Câu 1. Hãy chỉ ra các bước cần thực hiện để sử dụng một màu cụ thể trong bức ảnh làm màu cho tiêu đề một bài thơ.
Câu 2. Hãy đưa ra cách định dạng một đoạn văn bản để được kết quả như sau:

Bước 2: HS thực hiện nhiệm vụ học tập
- HS tiếp nhận, thực hiện nhiệm vụ, thảo luận, đưa ra câu trả lời.
- GV quan sát quá trình HS thảo luận, hỗ trợ khi HS cần.
Bước 3: Báo cáo kết quả hoạt động, thảo luận
- GV cho HS trả lời.
Gợi ý trả lời:
Câu 1. Có thể thực hiện như sau:
…………………………………………..
…………………………………………..
…………………………………………..
[3.4.NC1a: Viết mã lệnh HTML.
3.1.NC1a: Sử dụng các công cụ kỹ thuật số để tạo, thiết kế và phát triển các nội dung số phức tạp.
6.2.NC1a: Lựa chọn và sử dụng được các công cụ AI phù hợp để nâng cao hiệu suất học tập và giải quyết vấn đề (tìm hiểu và gỡ lỗi khi lập trình).]
- HS khác quan sát, lắng nghe, nhận xét và bổ sung.
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.
* HƯỚNG DẪN VỀ NHÀ
- Ghi nhớ kiến thức trong bài.
- Hoàn thành các bài tập trong SBT.
- Chuẩn bị bài mới Bài 9 – Tạo danh sách, bảng.
Tài liệu cùng môn học
- Trắc nghiệm tin học ứng dụng 12 kết nối tri thức
- Giáo án word tin học ứng dụng 12 kết nối tri thức
- Giáo án ppt tin học ứng dụng 12 kết nối tri thức
- Giáo án chuyên đề tin học ứng dụng 12 kết nối tri thức
- Giáo án ppt chuyên đề tin học ứng dụng 12 kết nối tri thức
- Giải tin học ứng dụng 12 kết nối tri thức
- Phiếu bài tập tin học ứng dụng 12 kết nối tri thức
- Giải chuyên đề tin học ứng dụng 12 kết nối tri thức
- Lý thuyết tin học ứng dụng 12 kết nối tri thức
- Bài tập củng cố Tin học ứng dụng 12 kết nối tri thức
- Trắc nghiệm đúng sai tin học ứng dụng 12 kết nối tri thức
- Trắc nghiệm trả lời ngắn tin học ứng dụng 12 kết nối tri thức
- Đề thi tin học ứng dụng 12 kết nối tri thức
- Ppt trò chơi AI Tin học 12 Tin học ứng dụng Kết nối tri thức
- Video AI mở đầu Tin học 12 Tin học ứng dụng kết nối tri thức
- GA tích hợp NLS và AI Tin học 12 TH ứng dụng - Trọn bộ cả năm
Tài liệu khác
- Trắc nghiệm văn 12 kết nối tri thức
- Trắc nghiệm địa lí 12 kết nối tri thức
- Trắc nghiệm hóa học 12 kết nối tri thức
- Trắc nghiệm KTPL 12 kết nối tri thức
- Trắc nghiệm lịch sử 12 kết nối tri thức
- Trắc nghiệm sinh học 12 kết nối tri thức
- Trắc nghiệm toán 12 kết nối tri thức
- Trắc nghiệm quốc phòng 12 kết nối tri thức
- => Xem nhiều môn hơn






