BÀI 8 - ĐỊNH DẠNG VĂN BẢN (KNTT

Bài 8 - Định dạng văn bản (kntt) Đây là bài soạn lý thuyết tin học 12 - sách Kết nối tri thức. Bài học này là kiến thức cốt lõi chung cho cả hai định hướng: Khoa học máy tính (cs) và Tin học ứng dụng (ict). Quý Thầy Cô và các em học sinh truy cập để làm tài liệu tham khảo nhé. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

TÓM TẮT NỘI DUNG:
1. Thuộc tính thẻ
2. Các định dạng trình bày văn bản
a) Định dạng tiêu đề
b) Định dạng đoạn văn bản
3. Các thẻ định dạng phông chữ
a) Định dạng kiểu chữ
b) Định dạng phông chữ
4. Thực hành định dạng văn bản và phông chữ

1. THUỘC TÍNH THẺ

Mọi phần tử HTML đều có thể 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ác điều khiển được thẻ chỉ định.
Cú pháp để xác định thuộc tính: tên_thuộc_tính = "giá_trị", trừ các trường hợp đặc biệt chỉ cần tên thuộc tính để xác định giá trị Có hoặc Không.
Thuộc tính nằm trong thẻ bắt đầu (không nằm trong thẻ kết thúc), sau tên thẻ. Trong trường hợp thẻ có nhiều hơn một thuộc tính thì các thuộc tính được ngăn cách bởi dấu cách.
Ví dụ: Với thẻ có hai thuộc tính là thuộc_tính_1 nhận giá_trị_1 và thuộc_tính_2 nhận giá_trị_2, ta viết lệnh như sau:

Một trong những thuộc tính được sử dụng thường xuyên nhất là thuộc tính style, dùng để thiết lập định dạng văn bản như 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 ngay tại vị trí được viết.

2. CÁC ĐỊNH DẠNG TRÌNH BÀY VĂN BẢN

a) Định dạng tiêu đề

Để định dạng tiêu đề và các tiêu đề con xuất hiện trong văn bản ta sử dụng các thẻ <hx> trong đó x nhận một trong các giá trị từ 1 đến 6, thể hiện độ quan trọng giảm dần của nội dung. Thẻ <h1> nên đượ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,...
Khi sử dụng thẻ <hx> trình duyệt sẽ sử dụng chúng để 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 đề. Ngoài ra, các công cụ tìm kiếm sử dụng thẻ này để xác định cấu trúc và nội dung trang web.
Ví dụ 1: Đoạn mã html dưới đây minh họa một văn bản có 4 mức tiêu đề:

b) Định dạng đoạn văn bản

Một văn bản thường gồm nhiều đoạn văn bản tách rời nhau. Các đoạn có thể được định dạng giống hoặc khác nhau tùy vào vị trí, nội dung và cách trang trí.
Cách đơn giản nhất để xác định đoạn là đặt nội dung đoạn trong cặp thẻ <p>Nội dung</p>. 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. Các đoạn được định dạng bằng thẻ <p> phù hợp với văn bản chứa nhiều chữ.
Khi cần thao tác với nhiều loại nội dung ta có thể sử dụng phần tử <div> và thẻ <span>. 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, trong khi 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.

3. CÁC THẺ ĐỊNH DẠNG PHÔNG CHỮ

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

Một số kiểu chữ thường dùng bao gồm đậm, nghiêng, gạch chân, đánh dấu (highlight),... Các đoạn chữ cần được thiết lập kiểu chữ và được đặt trong cặp thẻ tương ứng, cụ thể như trong Bảng 8.1.

Lưu ý:
- HTML5 không hỗ trợ thẻ <big> và <u>, để điều khiển em nên 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.

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.

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

Để định dạng phông chữ ta sử dụng thuộc tính style. 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: <p style = "color:màu”>Nội dung.</p>.
• Phông chữ: <p style = "font-family:tên phông”>Nội dung.</p>.
• Cỡ chữ: <p style = "font-size:cỡ”>Nội dung.</p>. Có nhiều cách xác định cỡ chữ, phổ biến là dùng số kèm đơn vị (px-pixel, mm, cm,...) hoặc 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 “;”.