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

I - MỤC TIÊU BÀI HỌC

• Sử dụng được thẻ HTML để định dạng văn bản, phông chữ.

II - KIẾN THỨC CẦN GHI NHỚ

1. THUỘC TÍNH THẺ

- Thẻ có thể có hoặc không có thuộc tính.

- Tác dụng: bổ sung thông tin, làm rõ các điều khiển được thẻ chỉ định.

- Cách khai báo:

- Vị trí: 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ẻ.

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

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

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

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

- HTML sử dụng các thẻ dạng <hx> trong đó x nhận một trong các giá trị từ 1 đến 6 để định dạng và phân cấp tiêu đề theo các mức khác nhau:

+ Thẻ <h1> đượ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,…

- Lợi ích khi sử dụng thẻ <hx>:

+ Trình duyệt sử dụng thẻ <hx> để 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ẻ   <hx>  để xác định cấu trúc và nội dung trang web.

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

- HTML sử dụng thẻ <p> để định dạng đoạn văn bản:

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

- Khi cần thao tác với nhiều loại nội dung, ta có thể sử dụng 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.

+ 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ữ

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.

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:

+ Phông chữ:

+ Cỡ chữ: 

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 ";".

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

- Bước 1: Đoạn văn bản bao gồm:

• Tiêu đề: Dòng 1, 2, 3. 
• Đoạn: 3 đoạn.

- Bước 2: Viết được 3 dòng tiêu đề.

- Bước 3: Viết được 3 đoạn bên dưới.