Giáo án điện tử Khoa học máy tính 12 kết nối Bài 8: Định dạng văn bản (P2)

CHÀO MỪNG CÁC EM

ĐẾN BUỔI HỌC NÀY!

BÀI 8: ĐỊNH DẠNG

VĂN BẢN

NỘI DUNG BÀI HỌC

1

Thuộc tính thẻ

2

Các thẻ định dạng trình bày văn bản

3

Các thẻ định dạng phông chữ

4

Thực hành định dạng văn bản và phông chữ

CÁC THẺ ĐỊNH DẠNG

PHÔNG CHỮ

Xác định các dạng đặc biệt của chữ khi trình bày một văn bản

HOẠT ĐỘNG 3

Khi muốn nhấn mạnh vào một nội dung trong văn bản, em thường thấy nội dung đó được viết như thế nào?

Xác định các dạng đặc biệt của chữ khi trình bày một văn bản

HOẠT ĐỘNG 3

Khi muốn nhấn mạnh vào một nội dung trong văn bản, em thường thấy nội dung đó được viết như thế nào?

Viết đậm, nghiêng, gạch chân, đánh dấu (highlight),…

a) Định dạng kiểu chữ

HTML5 cung cấp những thẻ định dạng kiểu chữ nào?

THẢO LUẬN NHÓM

Bảng 8.1. Một số thẻ định dạng kiểu chữ

là câu

a) Định dạng kiểu chữ

LƯU Ý

HTML5 không hỗ trợ thẻ <big> và <u> → thay bằng giá trị font-size và text-decoration trong thuộc tính style.

Các thẻ <strong>, <em> có cùng tác dụng định dạng chữ đậm, nghiêng giống các thẻ <b>, <i> nhưng các thẻ này có ý nghĩa nhấn mạnh vào ngữ nghĩa của nội dung và được khuyến khích sử dụng nhiều hơn trong định dạng văn bản.

a) Định dạng kiểu chữ

Ví dụ 2: Trong đoạn mã HTML sau, đoạn thứ nhất nhấn mạnh vào môn học hay là “Tin học”, đoạn thứ hai nhấn mạnh vào mức độ “rất” hay của môn Tin học.

• Thuộc tính nào được sử dụng để định dạng phông chữ?
• Trong HTML5, các thuộc tính màu sắc, phông chữ, cỡ chữ được xác định như thế nào?

THẢO LUẬN NHÓM

b) Định dạng phông chữ

b) Định dạng phông chữ

Sử dụng thuộc tính style để định dạng phông chữ.

Các thuộc tính màu sắc, phông chữ, cỡ chữ được xác định như sau:

• Màu sắc:
• Phông chữ:
• Cỡ chữ:
• Cách xác định cỡ chữ: dùng số kèm đơn vị (px-pixel, mm, cm,...), cỡ chữ thông dụng (small, medium, large,...).

LƯU Ý

Giá trị màu sắc được sử dụng theo tiếng Anh: red, green, blue, grey, yellow, black, brown,... hoặc giá trị màu trong hệ RGB.

Khi muốn thực hiện nhiều định dạng phông đồng thời, ta đặt các cặp tên: giá trị trong phần giá trị của thuộc tính, ngăn cách nhau bởi dấu ";".

b) Định dạng phông chữ

Câu hỏi củng cố SGK tr.50

Với cùng một đoạn văn bản, kết quả khi định dạng trong các trường hợp sau giống và khác nhau như thế nào?

Kiểu 1 có cỡ chữ to hơn kiểu 2 (15px so với 10px) và được gạch chân.

KẾT LUẬN

• Mỗi kiểu chữ khác nhau như in đậm, in nghiêng, chỉ số trên/dưới,... đều có thẻ tương ứng để điều khiển.

• Để định dạng phông chữ ta sử dụng thuộc tính style trong HTML5.

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

Hình 8.3. Đoạn văn bản cần trình bày bằng HTML

Bước 1: Phân tích thành phần của đoạn văn bản:

• Tiêu đề: Dòng 1, 2, 3. Trong đó dòng 1 ở mức tiêu đề cao hơn.

• Đoạn: 3 đoạn, tương ứng với 3 bước làm.

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.

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 2: Dùng thẻ <h> để viết 3 dòng đầu:

• Sử dụng thẻ <h1> cho dòng 1 và <h2> cho dòng 2, 3 (hoặc <h2> cho dòng 1 và <h3> cho dòng 2, 3).

• Dùng thuộc tính style để thay đổi màu chữ.

• Dùng thẻ <sup> để viết số mũ ở dòng 2:

Nhiệm vụ: Viết đoạn mã HTML để trình bày

đoạn văn bản trong Hình 8.3

---------------------------------------

----------------------Còn tiếp---------------------