Định dạng văn bản và phông chữ

Cho hai đoạn văn bản như Hình 8.1. Cách trình bày đoạn văn bản nào có định dạng đẹp hơn? Tại sao?

Trả lời: Đoạn văn bản có định dạng (có màu sắc, cỡ chữ, kiểu chữ khác nhau) sẽ đẹp hơn vì:

• Dễ đọc và dễ theo dõi hơn
• Phân cấp thông tin rõ ràng
• Thu hút người đọc hơn
• Chuyên nghiệp và thẩm mỹ hơn

1. Thuộc tính thẻ

Hoạt động 1: Nhận biết thuộc tính thẻ

Hãy quan sát các thể trong tệp HTML ở Bài 7. Trong các thể đó có một thể có thêm thuộc tính. Theo em đó là thể nào? Em hãy đưa ra dự đoán về tác dụng của các 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.

Quy tắc về thuộc tính:

• 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 câu lệnh như sau:

<Tên_thể thuộc_tính_1="giá_trị_1" thuộc_tính_2="giá_trị_2"> Nội dung </Tên_thể>

Ví dụ thực tế:

<p style="color: red; font-size: 16px;">Đoạn văn màu đỏ</p>
<div class="container" id="main">Nội dung trong div</div>
<a href="https://example.com" target="_blank">Link mở tab mới</a>

Thuộc tính style: 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.

Thể có thể có hoặc không 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ách xử lí cho thể chứa nó.

Các thuộc tính phổ biến:

• style: Định dạng CSS nội tuyến
• class: Tên lớp CSS
• id: Định danh duy nhất
• href: Đường dẫn (cho thẻ a)
• src: Nguồn (cho thẻ img, script)
• alt: Text thay thế (cho thẻ img)
• title: Tiêu đề (hiển thị khi hover)
• width, height: Kích thước
• target: Cách mở link

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

Hoạt động 2: Xác định thành phần cấu thành một văn bản

Thảo luận: Khi trình bày một văn bản (bài thơ, đoạn văn, trang web,...) có thể có những thành phần nào? Hãy kể tên các thành phần đó.

Các thành phần cấu thành văn bản:

• Tiêu đề chính, tiêu đề phụ
• Đoạn văn bản
• Từ khóa, từ quan trọng
• Danh sách, gạch đầu dòng
• Trích dẫn
• Chữ in đậm, in nghiêng
• Hình ảnh, minh họa
• Liên kết
• Tác giả, ngày tháng

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ẻ dạng <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,...

Cấu trúc thẻ tiêu đề:

<h1>Tiêu đề cấp 1 (quan trọng nhất)</h1>
<h2>Tiêu đề cấp 2</h2>
<h3>Tiêu đề cấp 3</h3>
<h4>Tiêu đề cấp 4</h4>
<h5>Tiêu đề cấp 5</h5>
<h6>Tiêu đề cấp 6 (ít quan trọng nhất)</h6>

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

Quy tắc sử dụng thẻ tiêu đề:

• Chỉ dùng một thẻ <h1> cho mỗi trang (tiêu đề chính)
• Không bỏ cấp tiêu đề (từ h1 nhảy h3)
• Sử dụng theo thứ tự phân cấp logic
• Nội dung tiêu đề phải phản ánh đúng nội dung bên dưới

Ví dụ thực tế:

<article>
    <h1>Hướng dẫn học HTML</h1>
    <h2>Chương 1: Giới thiệu HTML</h2>
    <h3>1.1 HTML là gì?</h3>
    <p>Nội dung giải thích...</p>
    <h3>1.2 Lịch sử HTML</h3>
    <p>Nội dung lịch sử...</p>
    <h2>Chương 2: Cú pháp HTML cơ bản</h2>
    <h3>2.1 Thẻ và phần tử</h3>
    <p>Nội dung thẻ...</p>
</article>