Bài 8: Định Dạng Văn Bản

Mục tiêu

• Biết dùng thẻ HTML để định dạng văn bản, phông chữ (dựa trên thuộc tính thẻ và thuộc tính style).

1. Thuộc tính của thẻ (attribute)

• Mọi phần tử HTML có thể có thuộc tính; thuộc tính viết trong thẻ mở, đứng sau tên thẻ. Cú pháp: ten_thuoc_tinh="giatri"; nhiều thuộc tính cách nhau bằng dấu cách.
• Ví dụ minh họa cách ghi nhiều thuộc tính trong cùng một thẻ.
• style là thuộc tính dùng thường xuyên để thiết lập định dạng (màu, phông, cỡ, kiểu, căn lề, khung…).

<!-- Cú pháp thuộc tính -->
<tagname attr1="value1" attr2="value2">...</tagname>

<!-- Ví dụ nhiều thuộc tính trong <p> -->
<p id="lead" class="intro" style="color:#e11d48;font-weight:600;">Xin chào!</p>

<!-- Liên kết an toàn khi mở tab mới -->
<a href="https://example.com" target="_blank" rel="noopener" title="Trang ví dụ">Xem ví dụ</a>

2. Thẻ định dạng trình bày văn bản

a) Tiêu đề

• Dãy thẻ <h1> … <h6> biểu diễn tiêu đề từ quan trọng đến ít quan trọng. Dùng <h1> cho tiêu đề chính, tiếp theo là <h2>, <h3>,…
• Công cụ tìm kiếm và trình duyệt dựa vào thẻ tiêu đề để hiểu cấu trúc nội dung.
• Có ví dụ cấu trúc đề mục bằng thẻ <h1>…<h4>.

<h1>Chủ đề chính</h1>
<h2>Mục 1</h2>
<h3>Tiểu mục 1.1</h3>
<h4>Chi tiết 1.1.a</h4>

b) Đoạn văn & khối nội dung

• Đoạn văn: dùng cặp thẻ <p>…</p>; trình duyệt tự tách dòng và chừa khoảng cách trước/sau đoạn.
• Khối & nội dung nội dòng: <div>…</div> tạo khối bắt đầu ở dòng mới; <span>…</span> đánh dấu nội dung nhỏ nằm cùng dòng.
• Ngắt dòng & kẻ ngang: <br> để xuống dòng, <hr> để kẻ đường ngang.

<p>Đây là một đoạn văn mẫu.</p>
<div style="border:1px solid #cbd5e1;padding:8px;border-radius:8px;">
  Khối nội dung <span style="color:#2563eb">nội dòng</span> ở cùng dòng.
</div>
<p>Dòng 1<br>Dòng 2 (xuống dòng bằng <code>&lt;br&gt;</code>)</p>
<hr>

3. Thẻ định dạng kiểu chữ & phông chữ

a) Kiểu chữ (nhấn mạnh ý nghĩa & hình thức)

• Một số kiểu thường dùng: đậm <strong> / <b>, nghiêng <em> / <i>, gạch chân <u>, đánh dấu <mark>, nhỏ chữ <small>, chỉ số trên <sup>, chỉ số dưới <sub>, gạch xoá <del>.
• Lưu ý HTML5: không khuyến nghị <u> và không hỗ trợ <big>; nên thay bằng text-decoration và font-size trong style.
• <strong> và <em> vừa đổi hình thức vừa nhấn mạnh ngữ nghĩa, được khuyến khích hơn <b>, <i>.

<p>Đậm: <strong>quan trọng</strong> (ngữ nghĩa) / <b>đậm</b> (trang trí).</p>
<p>Nghiêng: <em>nhấn mạnh</em> / <i>nghiêng</i>.</p>
<p>Chỉ số: H<sub>2</sub>O, x<sup>2</sup> + y<sup>2</sup>.</p>
<p><span style="text-decoration:underline">Gạch chân bằng CSS</span>, <del>đã xoá</del>, <mark>đánh dấu</mark>.</p>
<p><small>Chữ nhỏ dùng &lt;small&gt;</small></p>

b) Phông chữ (màu, họ phông, cỡ chữ)

• Màu: <p style="color:…">…</p>; họ phông: font-family; cỡ chữ: font-size.
• Cỡ chữ có thể dùng đơn vị (px, mm, cm, …) hoặc từ khóa (small, medium, large, …).
• Tên màu tiếng Anh hoặc mã màu (#RRGGBB, rgb(), hsl()) đều dùng được.
• Gộp nhiều thuộc tính trong cùng style, ngăn cách bằng dấu ;.
• So sánh hai cách thiết lập cùng màu đỏ nhưng khác cỡ/gạch chân.

<p style="color:red;font-size:18px;font-family:Arial, sans-serif;">Đoạn chữ đỏ 18px</p>
<p style="color:#ff0000;text-decoration:underline;font-size:14px;">Đoạn chữ đỏ 14px có gạch chân</p>

4. Thực hành định dạng (theo Hình 8.3)

<h1 style="color:#0ea5e9">Phương trình bậc hai</h1>
<h2>ax<sup>2</sup> + bx + c = 0</h2>
<h3>Các bước giải</h3>

<p><strong>Bước 1:</strong> Tính &Delta; = b<sup>2</sup> − 4ac.</p>
<p><strong>Bước 2:</strong> So sánh &Delta; với 0.</p>
<p><strong>Bước 3:</strong> Kết luận nghiệm.</p>

<h3>Điều kiện</h3>
<p>
  (7) Nếu &Delta; > 0 → hai nghiệm phân biệt.<br>
  (8) Nếu &Delta; = 0 → nghiệm kép.<br>
  (9) Nếu &Delta; < 0 → vô nghiệm.
</p>

Từ khóa ghi nhớ