Giáo án tích hợp AI Tin học 12 THUD Bài 8 Định dạng văn bản

- 0 / 0
(Tài liệu chưa được thẩm định)
Nguồn:
Người gửi: Hoàng Trọng Kỳ Anh
Ngày gửi: 17h:35' 14-10-2026
Dung lượng: 5.1 MB
Số lượt tải: 14
Nguồn:
Người gửi: Hoàng Trọng Kỳ Anh
Ngày gửi: 17h:35' 14-10-2026
Dung lượng: 5.1 MB
Số lượt tải: 14
Số lượt thích:
0 người
CHÀO MỪNG CÁC EM
ĐẾN BUỔI HỌC NÀY!
BÀI 8: ĐỊNH DẠNG
VĂN BẢN
KHỞI ĐỘNG
KHỞI ĐỘNG
Cho hai đoạn văn bản như Hình 8.1. Cách định
dạng
đoạn văn bản nào đẹp hơn? Tại sao?
Hình 8.1. Đoạn văn bản
KHỞI ĐỘNG
Tiêu đề nổi bật hơn so với phần nội dung.
Mỗi câu thơ được viết riêng một dòng.
Giữa các dòng thơ có khoảng cách.
Đoạn văn bản rõ ràng, dễ nhìn, dễ đọc.
KHỞI ĐỘNG
NỘI DUNG BÀI HỌC
1
3
Thuộc tính thẻ
Các thẻ định dạng
phông chữ
2
4
Các thẻ định dạng
trình bày văn bản
Thực hành định dạng
văn bản và phông chữ
1
THUỘC TÍNH THẺ
KHỞI ĐỘNG
HOẠT ĐỘNG 1
Nhận biết thuộc tính thẻ
Hãy quan sát các thẻ trong tệp
newpage.html ở Hoạt động 2, Bài
7. Trong các thẻ đó có một thẻ có
thêm thuộc tính. Theo em đó là thẻ
nào? Em hãy đưa ra dự đoán về
tác dụng của các thuộc tính thẻ.
HOẠT ĐỘNG 1
Nhận biết thuộc tính thẻ
Thẻ có thêm thuộc tính:
thẻ meta.
Thuộc tính charset="utf-8"
đảm bảo trang web hiển thị
đúng các kí tự và ngôn ngữ
khác nhau trên toàn thế giới.
KHỞI ĐỘNG
Các thẻ có bắt buộc phải có thuộc
tính không?
Thuộc tính thẻ có tác dụng gì?
Thuộc tính thẻ được khai báo như
thế nào?
Thuộc tính thẻ được đặt ở vị trí nào?
Một thẻ có thể có nhiều thuộc tính
được không?
THẢO LUẬN NHÓM
1. Thuộc tính thẻ
Thẻ có thể có hoặc không có thuộc tính.
Tác dụng: bổ sung thông tin, làm rõ các điều khiển được thẻ chỉ định.
Cách khai báo:
Vị trí: nằm trong thẻ bắt đầu (không nằm trong thẻ kết thúc), sau tên
thẻ.
Một thẻ có thể có nhiều thuộc tính được ngăn cách bởi dấu cách.
KHỞI ĐỘNG
1. Thuộc tính thẻ
Thuộc tính style:
Được sử dụng thường xuyên nhất.
Dùng để thiết lập định dạng văn bản (chọn màu sắc, phông chữ, cỡ chữ,
kiểu chữ, căn lề, tạo khung,... cho một phần tử HTML).
Câu hỏi củng cố SGK tr.47
Xác định các tên thuộc tính và thẻ chứa thuộc tính tương ứng
xuất hiện trong Bài 7.
Trang 40:
Trang 41:
Trang 44:
KHỞI ĐỘNG
KẾT LUẬN
Thẻ có thể có hoặc không có thuộc tính.
Thuộc tính của thẻ có tác dụng bổ sung
thông tin, làm rõ cách xử lí cho thẻ
chứa nó.
2
CÁC THẺ ĐỊNH DẠNG
TRÌNH BÀY VĂN BẢN
KHỞI ĐỘNG
HOẠT ĐỘNG 2
Xác định thành phần cấu thành một văn bả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 đó.
Tiêu đề.
Các đoạn văn bản.
Các đề mục.
Các hình ảnh minh họa.
a) Định dạng tiêu đề
THẢO LUẬN NHÓM
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ì?
KHỞI ĐỘNG
a) Định dạng tiêu đề
HTML sử dụng các thẻ dạng (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ẻ được sử dụng cho tiêu đề chính hay tiêu đề
ĐẾN BUỔI HỌC NÀY!
BÀI 8: ĐỊNH DẠNG
VĂN BẢN
KHỞI ĐỘNG
KHỞI ĐỘNG
Cho hai đoạn văn bản như Hình 8.1. Cách định
dạng
đoạn văn bản nào đẹp hơn? Tại sao?
Hình 8.1. Đoạn văn bản
KHỞI ĐỘNG
Tiêu đề nổi bật hơn so với phần nội dung.
Mỗi câu thơ được viết riêng một dòng.
Giữa các dòng thơ có khoảng cách.
Đoạn văn bản rõ ràng, dễ nhìn, dễ đọc.
KHỞI ĐỘNG
NỘI DUNG BÀI HỌC
1
3
Thuộc tính thẻ
Các thẻ định dạng
phông chữ
2
4
Các thẻ định dạng
trình bày văn bản
Thực hành định dạng
văn bản và phông chữ
1
THUỘC TÍNH THẺ
KHỞI ĐỘNG
HOẠT ĐỘNG 1
Nhận biết thuộc tính thẻ
Hãy quan sát các thẻ trong tệp
newpage.html ở Hoạt động 2, Bài
7. Trong các thẻ đó có một thẻ có
thêm thuộc tính. Theo em đó là thẻ
nào? Em hãy đưa ra dự đoán về
tác dụng của các thuộc tính thẻ.
HOẠT ĐỘNG 1
Nhận biết thuộc tính thẻ
Thẻ có thêm thuộc tính:
thẻ meta.
Thuộc tính charset="utf-8"
đảm bảo trang web hiển thị
đúng các kí tự và ngôn ngữ
khác nhau trên toàn thế giới.
KHỞI ĐỘNG
Các thẻ có bắt buộc phải có thuộc
tính không?
Thuộc tính thẻ có tác dụng gì?
Thuộc tính thẻ được khai báo như
thế nào?
Thuộc tính thẻ được đặt ở vị trí nào?
Một thẻ có thể có nhiều thuộc tính
được không?
THẢO LUẬN NHÓM
1. Thuộc tính thẻ
Thẻ có thể có hoặc không có thuộc tính.
Tác dụng: bổ sung thông tin, làm rõ các điều khiển được thẻ chỉ định.
Cách khai báo:
Vị trí: nằm trong thẻ bắt đầu (không nằm trong thẻ kết thúc), sau tên
thẻ.
Một thẻ có thể có nhiều thuộc tính được ngăn cách bởi dấu cách.
KHỞI ĐỘNG
1. Thuộc tính thẻ
Thuộc tính style:
Được sử dụng thường xuyên nhất.
Dùng để thiết lập định dạng văn bản (chọn màu sắc, phông chữ, cỡ chữ,
kiểu chữ, căn lề, tạo khung,... cho một phần tử HTML).
Câu hỏi củng cố SGK tr.47
Xác định các tên thuộc tính và thẻ chứa thuộc tính tương ứng
xuất hiện trong Bài 7.
Trang 40:
Trang 41:
Trang 44:
KHỞI ĐỘNG
KẾT LUẬN
Thẻ có thể có hoặc không có thuộc tính.
Thuộc tính của thẻ có tác dụng bổ sung
thông tin, làm rõ cách xử lí cho thẻ
chứa nó.
2
CÁC THẺ ĐỊNH DẠNG
TRÌNH BÀY VĂN BẢN
KHỞI ĐỘNG
HOẠT ĐỘNG 2
Xác định thành phần cấu thành một văn bả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 đó.
Tiêu đề.
Các đoạn văn bản.
Các đề mục.
Các hình ảnh minh họa.
a) Định dạng tiêu đề
THẢO LUẬN NHÓM
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ì?
KHỞI ĐỘNG
a) Định dạng tiêu đề
HTML sử dụng các thẻ dạng
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ẻ
đượ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ẻ và tiếp tục với
các mức tiếp theo,…
a) Định dạng tiêu đề
LỢI ÍCH
Trình duyệt sử dụng thẻ
để 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ẻ để
xác định cấu trúc và
nội dung trang web.
KHỞI ĐỘNG
a) Định dạng tiêu đề
Ví dụ 1: Đoạn mã HTML 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
b) Định dạng đoạn văn bản
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ẻ …
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?
THẢO LUẬN NHÓM
KHỞI ĐỘNG
b) Định dạng đoạn văn bản
Sử dụng thẻ để định dạng đoạn văn bản:
Khi gặp cặp thẻ
…
, 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, 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.
b) Định dạng đoạn văn bản
Khi cần thao tác với nhiều loại nội dung, sử dụng cặp thẻ
... hay ... để tạo một khối chứa nội dung
bất kì đặt ở giữa hai thẻ:
• Phần tử là một khối, bắt đầu trên dòng mới.
• Phần tử 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.
KHỞI ĐỘNG
b) Định dạng đoạn văn bản
Sử dụng thuộc tính style để thêm các định dạng như
khung, lề,... cho đoạn.
Lưu ý: thẻ
và
để xuống dòng hoặc tạo ra một
đường kẻ ngang trên trang web.
Câu hỏi củng 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?
Câu 2. Chỉnh sửa đoạn mã HTML trong Ví dụ 1 để hiển thị thêm một
đường kẻ ngang phân tách giữa dòng tiêu đề “Tin học 12” và nội dung
phía dưới.
KHỞI ĐỘNG
Trả lời
Câu 1.
• Trình duyệt hiển thị thành 4 dòng.
• Khoảng cách giữa các dòng: khi sử dụng thẻ
, khoảng cách giữa
hai dòng nhỏ hơn so với thẻ . Tuy nhiên hai loại khoảng cách đều
có
thể
điều
chỉnh
(bằng
thuộc
margin-top/margin-bottom).
Câu 2. Thêm thẻ
vào sau dòng đầu tiên.
tính
line-height
hoặc
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ẻ , có 6 mức tiêu đề từ đến . Đoạn văn
bản được định dạng bởi thẻ
. Khối là một phần tử chứa
nhiều loại dữ liệu, được định nghĩa bởi thẻ
và .
KHỞI ĐỘNG
CẢM ƠN CÁC EM ĐÃ
LẮNG NGHE BÀI GIẢNG!
các mức tiếp theo,…
a) Định dạng tiêu đề
LỢI ÍCH
Trình duyệt sử dụng thẻ
để 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ẻ
xác định cấu trúc và
nội dung trang web.
KHỞI ĐỘNG
a) Định dạng tiêu đề
Ví dụ 1: Đoạn mã HTML 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
b) Định dạng đoạn văn bản
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ẻ
…
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?
THẢO LUẬN NHÓM
KHỞI ĐỘNG
b) Định dạng đoạn văn bản
Sử dụng thẻ
để định dạng đoạn văn bản:
Khi gặp cặp thẻ
…
, trình duyệt sẽ hiển thị nội dung đoạntrê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, 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.
b) Định dạng đoạn văn bản
Khi cần thao tác với nhiều loại nội dung, sử dụng cặp thẻ
...
hay ... để tạo một khối chứa nội dungbất kì đặt ở giữa hai thẻ:
• Phần tử
là một khối, bắt đầu trên dòng mới.
• Phần tử 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.
KHỞI ĐỘNG
b) Định dạng đoạn văn bản
Sử dụng thuộc tính style để thêm các định dạng như
khung, lề,... cho đoạn.
Lưu ý: thẻ
và
để xuống dòng hoặc tạo ra một
đường kẻ ngang trên trang web.
Câu hỏi củng 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?
Câu 2. Chỉnh sửa đoạn mã HTML trong Ví dụ 1 để hiển thị thêm một
đường kẻ ngang phân tách giữa dòng tiêu đề “Tin học 12” và nội dung
phía dưới.
KHỞI ĐỘNG
Trả lời
Câu 1.
• Trình duyệt hiển thị thành 4 dòng.
• Khoảng cách giữa các dòng: khi sử dụng thẻ
, khoảng cách giữa
hai dòng nhỏ hơn so với thẻ
vào sau dòng đầu tiên.
tính
line-height
hoặc
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ẻ, có 6 mức tiêu đề từ đến
• Phần tử 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.
KHỞI ĐỘNG
b) Định dạng đoạn văn bản
Sử dụng thuộc tính style để thêm các định dạng như
khung, lề,... cho đoạn.
Lưu ý: thẻ
và
để xuống dòng hoặc tạo ra một
đường kẻ ngang trên trang web.
Câu hỏi củng 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?
Câu 2. Chỉnh sửa đoạn mã HTML trong Ví dụ 1 để hiển thị thêm một
đường kẻ ngang phân tách giữa dòng tiêu đề “Tin học 12” và nội dung
phía dưới.
KHỞI ĐỘNG
Trả lời
Câu 1.
• Trình duyệt hiển thị thành 4 dòng.
• Khoảng cách giữa các dòng: khi sử dụng thẻ
, khoảng cách giữa
hai dòng nhỏ hơn so với thẻ
. Tuy nhiên hai loại khoảng cách đều
có
thể
điều
chỉnh
(bằng
thuộc
margin-top/margin-bottom).
Câu 2. Thêm thẻ
vào sau dòng đầu tiên.
tính
line-height
hoặc
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ẻ
đến . Đoạn văn
bản được định dạng bởi thẻ
bản được định dạng bởi thẻ
. Khối là một phần tử chứa
nhiều loại dữ liệu, được định nghĩa bởi thẻ
và .
KHỞI ĐỘNG
CẢM ƠN CÁC EM ĐÃ
LẮNG NGHE BÀI GIẢNG!
KHỞI ĐỘNG
CẢM ƠN CÁC EM ĐÃ
LẮNG NGHE BÀI GIẢNG!
 







Các ý kiến mới nhất