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

KHỞI ĐỘNG

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?

Giải rút gọn:

Định dạng 2 đẹp mắt hơn vì có định dạng, căn lề, màu chữ, độ lớn,… phù hợp.

Định dạng 1 bị đơn điệu.

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 newpage.html ở Hoạt động 2, 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ẻ.

Giải rút gọn:

Thuộc tính href và target trong thẻ <a>:

href:

• Xác định URL liên kết trỏ đến.

• Ví dụ: <a href="https://www.example.com">Liên kết</a>.

target:

• Xác định cách mở liên kết.

• _blank: Mở trong tab/cửa sổ mới (mặc định).

• Ví dụ: <a href="..." target="_blank">Liên kết</a>.

Câu hỏi 1: Xác định các tên thuộc tính và thẻ chứa thuộc tính tương ứng xuất hiện trong Bài 7.

Giải rút gọn:

-  Thẻ <title> có thuộc tính title để đặt tiêu đề trang web.

- Các thẻ còn lại (<div>, <h1>, <p>, <hr>) không có thuộc tính nào được sử dụng trong ví dụ này.

2. CÁC THẺ 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 đó.

Giải rút gọn:

- Tiêu đề: được định dạng bởi thẻ <h>.

- Đoạn văn bản: được định dạng bởi thẻ <p>.

- Khối: là một phẩn tử chứa nhiều loại dữ liệu, được định nghĩa bởi thẻ <div> và <span>.

Câu hỏi 1: Trình duyệt hiển thị đoạn mã html sau thành mấy dòng? Em có nhận xét gì về khoảng cách giữa các dòng?

Giải rút gọn:

Trình duyệt hiển thị đoạn mã HTML trên thành 5 dòng. Mỗi thẻ <p> được hiển thị trên một dòng riêng biệt.

Câu 2: Chỉnh sửa đoạn mã html trong Ví dụ 1 để hiển thị thêm một đường kẻ ngang phân tách giữa dòng tiêu đề “Tin học 12” và nội dung phía dưới.

Giải rút gọn:

Thêm dòng kẻ ngang phân cách tiêu đề với nội dung phía dưới:

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

Hoạt động 3: Xác định các dạng đặc biệt của chữ khi trình bày một văn bản

Thảo luận: Khi muốn nhấn mạnh vào một nội dung trong văn bản, em thường thấy nội dung đó được viết như thế nào?

Giải rút gọn:

Em thường thấy nội dung được nhấn mạnh được in đậm, in nghiêng, gạch chân,…

Câu hỏi: Với cùng một đoạn văn bản, kết quả khi định dạng trong các trường hợp sau giống và khác nhau như thế nào?

Giải rút gọn:

Cả hai kiểu đều sử dụng thuộc tính style để áp dụng các đặc điểm định dạng lên đoạn văn bản bên trong thẻ <p>. Kiểu 1 có thêm thuộc tính text-decoration: underline; để gạch chân chữ. Kiểu 2 sử dụng mã màu RGB rgb(255, 0, 0) để đặt màu chữ là màu đỏ.

LUYỆN TẬP

Câu 1: Hãy sửa lại phần tử sau để làm nổi bật ý chính của câu:

Giải rút gọn:

Các em có thể tham khảo câu lệnh sau:

Kết quả khi chạy:

Câu 2: Trình bày đoạn văn bản sau bằng mã HTML:

Giải rút gọn:

Các em sử dụng các câu lệnh dưới đây:

VẬN DỤNG

Câu 1: Hãy chỉ ra các bước cần thực hiện để sử dụng một màu cụ thể trong bức ảnh làm màu cho tiêu đề một bài thơ.

Giải rút gọn:

Ví dụ muốn dùng màu đỏ cho tiêu đề có thể sử dụng câu lệnh sau

Khi đó kết quả trả về là:

Câu 2: Hãy đưa ra cách định dạng một đoạn văn bản để được kết quả như sau:

Giải rút gọn:

Đây là nội đoạn code để tạo một phần, các em áp dụng spam để tạo thành hình trên:

Kết quả đoạn mã HTML trên: