Bài 8. Định dạng văn bản

Nội dung lý thuyết

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ó tác dụng bổ sung thông tin, làm rõ điều khiển được thẻ chỉ định.

tên_thuộc_tính = "giá_trị"

Một thẻ có thể có nhiều thuộc tính ngăn cách nhau bởi dấu cách.

thuộc_tính_1 = "giá_trị_1" thuộc_tính_2 = "giá_trị_2"

Thuộc tính được đặt trong thẻ mở, sau tên thẻ.

Thuộc tính thường dùng là style có tác dụng thiết lập định dạng văn bản như màu sắc, kiểu chữ,...

Ví dụ: Thiết lập dòng chữ Tin học 12 OLM màu đỏ như sau:

<p style="color:red">Tin học 12 OLM</p>

2. Các thẻ định dạng

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

Định dạng tiêu đề theo cấp độ bằng thẻ dạng <hx>, trong đó x là số từ 1 đến 6 theo chiều giảm dần của cấp độ.

Thẻ tiêu đề có tác dụng xác định cấu trúc và nội dung trang web.

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

Xác định đoạn văn bản:

  • Đặt nội dung cần hiển thị vào giữa cặp thẻ đóng mở p.
  • Đoạn văn hiển thị trên dòng mới, cách nhau một khoảng trống nhỏ trước và sau đoạn.
  • Nội dung đoạn không được chứa tiêu đề.

Xác định khối nội dung:

  • Đặt nội dung vào giữa cặp thẻ đóng mở div hoặc span.
  • Thẻ div sẽ bắt đầu trên dòng mới, thẻ span bắt đầu trên cùng dòng đang viết.

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

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

Một số thẻ định dạng kiểu chữ như sau:

Kiểu chữThẻVí dụHiển thị trên trình duyệt
Chữ thường 
<p> Đây là câu chuẩn </p>
Đây là câu chuẩn
Chữ đậm
<strong>;  <b>
<p> Đây <strong> là câu </strong> chuẩn </p>
Đây là câu chuẩn
Chữ in nghiêng
<em>; <i>
<p> Đây <em> là câu</em>chuẩn </p>
Đây là câu chuẩn
Gạch chân
<u>
<p> Đây <u> là câu<u> chuẩn </p>
Đây là câu chuẩn
Đánh dấu
<mark>
<p> Đây <mark> là câu </mark> chuẩn </p>
Đây là câu chuẩn
Giảm cỡ chữ
<small>
<p> Đây <small> là câu </small> chuẩn </p>
Đây là câu chuẩn
Chỉ số trên hoặc dưới
<sup>; <sub>
<p> Đây <sup> là câu </sup> chuẩn </p>
Đây là câu chuẩn
Đánh dấu xóa (bằng nét gạch giữa chữ)
<del>
<p> Đây <del> là câu </del> chuẩn </p>
Đây là câu chuẩn

Lưu ý: HTML 5 không hỗ trợ thẻ <big><u>, để điều khiển nên thay bằng giá trị font-sizetext-decoration trong thuộc tính style.

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

Sử dụng thuộc tính style để định dạng thuộc tính màu sắc, phông chữ,...

  • 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>

Sử dụng các cặp tên: Giá trị được ngăn cách nhau bởi dấu ";".