BÀI 8. ĐỊNH DẠNG VĂN BẢN

1. THUỘC TÍNH THẺ

Khái niệm: Thuộc tính của thẻ dùng để bổ sung thông tin và làm rõ các điều khiển được thẻ chỉ định.

Vị trí và Cú pháp:

• Nằm trong thẻ bắt đầu, sau tên thẻ.
• Cú pháp: tên_thuộc_tính="giá trị".
• Nếu có nhiều thuộc tính thì ngăn cách nhau bởi dấu cách.

Thuộc tính phổ biến: Thuộc tính style thường xuyên được dùng để định dạng văn bản (màu sắc, phông chữ, cỡ chữ...).

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

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

Thẻ sử dụng: Sử dụng các thẻ từ <h1> đến <h6>.

Ý nghĩa:

• Số càng nhỏ (1) thì độ quan trọng càng cao (tiêu đề chính), số càng lớn (6) độ quan trọng càng giảm.
• Trình duyệt và công cụ tìm kiếm dùng thẻ này để xác định cấu trúc nội dung.

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

Thẻ đoạn văn <p>:

• Dùng cặp thẻ <p>...</p> để xác định một đoạn văn bản.
• Trình duyệt sẽ tự động xuống dòng và tạo khoảng trống nhỏ trước/sau đoạn.

Thẻ khối <div> và thẻ nội dòng <span>:

• <div>...</div>: Tạo một khối chứa nội dung, bắt đầu trên dòng mới (thường dùng cho các khối lớn).

• <span>...</span>: Tạo nhóm nội dung trong cùng một dòng (thường dùng để định dạng một cụm từ nhỏ).

Các thẻ hỗ trợ khác:

• <br>: Để xuống dòng.
• <hr>: Để tạo đường kẻ ngang.

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

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

Chữ đậm:

• Dùng <b> hoặc <strong> (thẻ <strong> mang ý nghĩa nhấn mạnh ngữ nghĩa hơn).

Chữ nghiêng:

• Dùng <i> hoặc <em> (thẻ <em> mang ý nghĩa nhấn mạnh ngữ nghĩa hơn).

Gạch chân:

• Dùng <u>. (Lưu ý: HTML5 ít dùng, nên dùng style).

Đánh dấu (Highlight):

• Dùng <mark>.

Chỉ số trên / Chỉ số dưới:

• Chỉ số trên (số mũ): <sup>.
• Chỉ số dưới (hóa học): <sub>.

Gạch xóa: Dùng <del>.

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

Màu sắc (color): Giá trị là tên màu tiếng Anh (red, blue...) hoặc mã RGB.

Kiểu phông (font-family): Xác định loại phông chữ (Arial, Tahoma...).

Cỡ chữ (font-size): Dùng đơn vị px, cm hoặc từ khóa (small, large).

Kết hợp nhiều định dạng: <p style="color:blue; font-size:20px">Chữ xanh và to</p>

4. THỰC HÀNH ĐỊNH DẠNG VĂN BẢN VÀ PHÔNG CHỮ

Quy trình để chuyển một văn bản thông thường sang HTML gồm 3 bước:

Bước 1: Phân tích thành phần: Xác định đâu là tiêu đề (cấp mấy), đâu là đoạn văn, đâu là xuống dòng.

• Ví dụ: Dòng "Bài toán" là tiêu đề, các bước giải là đoạn văn.

Bước 2: Sử dụng thẻ tiêu đề <h>: Áp dụng cho các mục lớn, kết hợp style màu sắc nếu cần.

• Ví dụ: <h3>Phương trình bậc 2</h3>

Bước 3: Sử dụng thẻ đoạn văn <p> và định dạng chi tiết: Viết nội dung, dùng <sub>, <sup> cho công thức toán, <strong> cho chỗ cần nhấn mạnh.

• Ví dụ: <p>Nghiệm x = x₁</p>