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:

Biết cách khai báo các thuộc tính định dạng phông chữ, màu sắc chữ, dòng văn bản.
Hiểu được tính kế thừa của các mẫu định dạng CSS.
Biết cách chọn theo thứ tự của các mẫu định dạng CSS.

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.2.NC1b: Tiến hành đánh giá được các dữ liệu, thông tin và nội dung số khác nhau.
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.4.NC1a: Lập trình.
5.1.NC1b: Hiểu nguyên lý hoạt động của các hệ thống kỹ thuật số và tối ưu hóa hệ thống.
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ể.

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.
Nâng cao tinh thần trách nhiệm khi làm việc nhóm.

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 – Kết nối tri thức, 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 – Kết nối tri thức, vở ghi.

III. TIẾN TRÌNH DẠY HỌC

1. HOẠT ĐỘNG KHỞI ĐỘNG

a) Mục tiêu:

- HS định hướng được những nội dung định dạng văn bản có thể thực hiện được.

- Ôn tập lại kiến thức bài cũ, khơi gợi nhu cầu học tập nội dung mới.

b) Nội dung: HS dựa vào kiến thức đã học để trả lời các câu hỏi Khởi động tr.76 SGK.

c) Sản phẩm: Từ yêu cầu, HS vận dụng kiến thức đã học để trả lời câu hỏi Khởi động tr.76 SGK.

d) Tổ chức thực hiện:

Bước 1: GV chuyển giao nhiệm vụ:

- GV yêu cầu HS suy nghĩ trả lời câu hỏi Khởi động SGK trang 76:

- 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 đó.

Quan sát đoạn văn bản được thể hiện trên một trang web trong Hình 14.1. Em có nhận xét gì về các định dạng liên quan đến phông chữ của văn bản?

Hình 14.1. Đoạn văn bản trên trang web

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 vận dụng những kiến thức đã học để 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.76 SGK.

Gợi ý trả lời: Đoạn văn bản trong Hình 14.1 sử dụng các phông chữ khác nhau.

- 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: Việc định dạng phông chữ, màu chữ và dòng văn bản sẽ nhanh và thuận tiện hơn khi sử dụng các mẫu định dạng CSS. Vậy để giúp các em biết cách sử dụng CSS để định dạng văn bản, phông chữ, chúng ta sẽ cùng nhau đến với Bài 14: Định dạng văn bản bằng CSS.

2. HÌNH THÀNH KIẾN THỨC MỚI

Hoạt động 1: Tìm hiểu các mẫu định dạng CSS định dạng văn bản

a) Mục tiêu: HS biết và nắm được một vài thuộc tính quan trọng của định dạng CSS thường dùng để tạo khuôn và định dạng cho văn bản của trang web.

b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 1. ĐỊNH DẠNG VĂN BẢN BẰNG CSS, thảo luận nhóm thực hiện nhiệm vụ.

c) Sản phẩm: Các mẫu định dạng phông chữ, màu chữ, dòng văn bản.

d) Tổ chức thực hiện:

…………………………………………..

Hoạt động 2: Tìm hiểu tính kế thừa và cách chọn thứ tự ưu tiên của CSS

a) Mục tiêu: HS biết và nắm được một số quy tắc liên quan đến tính kế thừa và thứ tự ưu tiên áp dụng CSS.

b) Nội dung: GV giao nhiệm vụ; HS tìm hiểu nội dung mục 2. TÍNH KẾ THỪA VÀ CÁCH LỰA CHỌN THEO THỨ TỰ CỦA CSS, thảo luận nhóm thực hiện nhiệm vụ.

c) Sản phẩm: Tính kế thừa và cách chọn thứ tự ưu tiên của CSS.

d) Tổ chức thực hiện:

Hoạt động 3: Thực hành

a) Mục tiêu: HS vận dụng các kiến thức về định dạng văn bản trên ví dụ thực tiễn.

b) Nội dung: GV hướng dẫn HS thực hiện theo 2 nhiệm vụ trong SGK để định dạng văn bản.

c) Sản phẩm: HS thiết lập được mẫu CSS để định dạng văn bản theo yêu cầu.

d) Tổ chức thực hiện:

…………………………………………..

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

c) Sản phẩm học tập:

- Phiếu bài tập.

- HS hiểu rõ hơn về định dạng văn bản bằng CSS.

d) Tổ chức thực hiện:

Bước 1: GV chuyển giao nhiệm vụ:

- GV tổng hợp các kiến thức cần ghi nhớ cho HS.

- GV tổ chức trò chơi trắc nghiệm nhanh trên Quizizz để củng cố toàn bài.

- GV cung cấp mã QR hoặc đường Links cho HS làm Phiếu bài tập, trả lời nhanh một số câu hỏi trắc nghiệm tổng kết bài học.

Trường THPT:………………………………………….

Lớp:……………………………………………………...

Họ và tên:……………………………………………….

PHIẾU BÀI TẬP TIN HỌC 12

ĐỊNH HƯỚNG TIN HỌC ỨNG DỤNG – KẾT NỐI TRI THỨC

BÀI 14: ĐỊNH DẠNG VĂN BẢN BẰNG CSS

A. PHẦN TRẮC NGHIỆM NHIỀU PHƯƠNG ÁN LỰA CHỌN

Khoanh tròn vào chữ cái đứng trước câu trả lời đúng nhất:

Câu 1. Thuộc tính font-weight không nhận giá trị nào sau đây?

A. bold.

B. 800.

C. normal.

D. 1000.

Câu 2. Mẫu CSS định dạng phông chữ Courier cho toàn bộ nội dung trang HTML là

A. all {font-style: Courier;}.

B. * {font-family: Courier;}.

C. body {font-family: Courier;}.

D. * {font-weight: Courier;}.

Câu 3. Phát biểu nào sau đây sai?

A. Các mẫu định dạng văn bản cơ bản bao gồm các thuộc tính liên quan đến phông chữ, màu chữ và định dạng dòng văn bản.

B. Thuộc tính text-decoration thay thế và mở rộng cho thẻ u của HTML.

C. CSS mặc định coi chiều cao dòng văn bản = 2px.

D. Đường cơ sở là đường ngang mà các chữ cái đứng thẳng trên nó.

Câu 4. Mẫu CSS thiết lập chiều cao dòng văn bản bằng 1,5 lần chiều cao dòng hiện thời là

A. p {line-height: 1.5em;}.

B. p {line-height: 1.5rem;}.

C. p {line-height: 1.5;}.

D. p {line-height: 1.5in;}.

Câu 5. Để thiết lập kiểu chữ nghiêng của văn bản, em sử dụng thuộc tính CSS nào?

A. font-size.

B. font-weight.

C. font-style.

D. font-family.

B. PHẦN TRẮC NGHIỆM ĐÚNG – SAI

Câu 1. Các mẫu định dạng CSS được áp dụng theo nguyên tắc kế thừa trong mô hình cây HTML.

a. Nếu một mẫu CSS áp dụng cho một phần tử HTML bất kì thì nó sẽ được tự động áp dụng cho tất cả các phần tử là con, cháu của phần tử đó trong mô hình cây HTML (trừ các trường hợp ngoại lệ, ví dụ các phần tử với mẫu định dạng riêng).

b. Nếu có nhiều mẫu định dạng được viết cho cùng một bộ chọn thì mẫu viết đầu tiên sẽ được áp dụng.

c. Mức độ ưu tiên của * là cao nhất.

d. Thuộc tính text-decoration không có tính kế thừa.

- GV yêu cầu HS hoạt động cá nhân và thực hiện hoạt động Luyện tập SGK tr.82:

Câu 1. Mỗi phông chữ sau đây thuộc loại nào?

kenhhoctap Câu 2. Hãy liệt kê các thuộc tính CSS liên quan đến định dạng đoạn văn bản sau: