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

SAU BÀI HỌC NÀY EM SẼ:

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

Vội vàng

Tôi muốn tắt nắng đi; Cho màu đừng nhạt mất; Tôi muốn buộc gió lại; Cho hương đừng bay đi.

Tôi muốn tắt nắng đi

Cho màu đừng nhạt mất;

Tôi muốn buộc gió lại

Cho hương đừng bay đi.

Hình 8.1. Đoạn văn bản

1. THUỘC TÍNH THẺ

Hoạt động 1

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

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.

Thuộc tính nằm trong thẻ bắt đầu, không nằm trong thẻ kết thúc. 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ẻ>

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, để 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. Thuộc tính được viết ngay sau tên thẻ.

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

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.

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

Hoạt động 2

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

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

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 đề. Ngoài ra, 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.

Ví dụ 1: Đoạn mã HTML dưới đây minh hoạ một văn bản có bốn mức tiêu đề:

<h1>Tin học 12</h1>
<h2>Phần chung</h2>
<h3>1. Máy tính và xã hội tri thức</h3>
<h4>1. Trí tuệ nhân tạo và ứng dụng</h4>
<h4>2. Trí tuệ nhân tạo trong khoa học và đời sống</h4>
<h3>2. Mạng máy tính và Internet</h3>
<h4>3. Thiết bị mạng</h4>

Tin học 12

Phần chung

Hình 8.2. Kết quả khi dùng thẻ tiêu đề trong Ví dụ 1

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

Một văn bản thường gồm nhiều đoạn văn bản. Các đoạn có thể được định dạng giống hoặc khác nhau tuỳ vào vị trí, nội dung và cách trang trí.

Cách đơn giản nhất để xác định đoạn là đặt nội dung đoạn trong cặp thẻ <p>Nội dung</p>. 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. Các đoạn được định dạng bằng thẻ <p> phù hợp với văn bản chứa nhiều chữ.

Khi cần thao tác với nhiều loại nội dung, ta có thể sử dụng thẻ <div> và thẻ <span>. Cặp thẻ <div> ... </div> 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, trong khi 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 hiển thị trên cùng dòng đang viết hay giữa dòng.

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

Một văn bản thông thường được tạo bởi hai thành phần cơ bản là tiêu đề và các đoạn văn bản. Tiêu đề được định dạng bởi thẻ <hx>, có 6 mức tiêu đề từ <h1> đến <h6>. Đ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>.

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

Hoạt động 3

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?

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

Có thể sử dụng các cặp thẻ trong Bảng 8.1 để trình bày đoạn văn bản với các kiểu chữ khác nhau.

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ữ nghiêng	<p>Đây <em>là câu</em> chuẩn</p>	Đây là câu chuẩn
Gạch chân	<p>Đây là câu <u>chuẩn</u></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 xoá (bằng nét gạch giữa chữ)	<del>	<p>Đây <del>là câu</del> chuẩn</p>

Lưu ý:

Ví dụ 2: Trong đoạn mã HTML sau, đoạn thứ nhất nhấn mạnh vào môn học "Tin học", đoạn thứ hai nhấn mạnh vào mức độ "rất" của môn Tin học.

<p>Môn <em>Tin học</em> rất hay.</p>
<p>Môn Tin học <em>rất</em> hay.</p>

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:

Lưu ý:

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?

Kiểu 1: <p style="color:red;font-family:Tahoma;font-size:15px;text-decoration:underline">
Kiểu 2: <p style="color:rgb(255,0,0);font-family:Tahoma;font-size:10px">

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

Nhiệm vụ: Viết đoạn mã HTML để trình bày đoạn văn bản trong Hình 8.3

1. Biện luận số nghiệm của phương trình bậc 2
2. Bài toán: Xác định số nghiệm của phương trình ax^2 + bx + c = 0 (a != 0)
3. Cách làm:
4. Xác định hệ số a, b và c
5. Tính delta = b^2 - 4ac
7. Nếu delta < 0: Phương trình vô nghiệm
8. Nếu delta = 0: Phương trình có nghiệm
9. Nếu delta > 0: Phương trình có hai nghiệm phân biệt

Hướng dẫn:

Bước 1. Phân tích thành phần của đoạn văn bản:

Lưu ý: Các dòng 7, 8, 9 đều bắt đầu viết trên dòng mới nhưng không là đoạn vì ta không thấy cách trước và sau như những dòng trên.

Bước 2. Dùng thẻ <h> để viết 3 dòng đầu:

Ta có thể sử dụng thẻ <h1> cho dòng 1 và <h2> cho dòng 2, 3 (hoặc <h2> cho dòng 1 và <h3> cho dòng 2, 3).

Để thay đổi màu sắc, dùng thuộc tính style; dùng thẻ <sup> để viết số mũ ở câu lệnh của dòng 2: <h3><span style="color:rgb(205,0,0)">Bài toán:</span> Xác định số nghiệm của phương trình ax² + bx + c = 0 (a != 0)</h3>

Bước 3. Dùng thẻ <p> để viết 3 đoạn bên dưới.

LUYỆN TẬP

INTERNET TỐC ĐỘ CAO

Dịch vụ Internet tốc độ cao là dịch vụ internet cáp quang chất lượng cao, ổn định, giá cả hợp lí.

Các tính năng nổi bật:

Tốc độ siêu cao từ 150 MBps trở lên

Lắp đặt nhanh chóng trong 24h

Phù hợp với cá nhân/Hộ gia đình

Tặng Modem 2 băng tần

Miễn phí lắp đặt

Hỗ trợ 24/7

VẬN DỤNG