Ở bài viết này tôi sẽ viết về các thẻ liên quan đến đoạn văn trong HTML. Ở bài viết này tôi cũng chia làm 02 phần gồm phần lý thuyết và phần bài tập.
1. Phần lý thuyết
1.1 Đoạn văn (Paragraphs) trong HTML
Thẻ <p> xác định một đoạn văn. Thẻ này gồm cặp thẻ: thẻ mở <p> và thẻ đóng </p>. Lưu ý rằng các bạn đừng bao giờ quên đóng thẻ.
Như hình trên bạn thấy, các trình duyệt sẽ tự động thêm một khoảng trắng vào trước và sau đoạn văn.
1.2 Đoạn văn (Paragraphs) trong HTML được trình duyệt hiển thị như thế nào?
Như hình trên bạn thấy, trình duyệt sẽ loại bỏ bất kỳ không gian thêm và dòng bổ sung khi trang được hiển thị. Không những thế, màn hình lớn hoặc nhỏ và cửa sổ thay đổi kích cỡ sẽ tạo ra các kết quả khác nhau ví dụ như ở hình trên màn hình càng nhỏ thì số dòng của một đoạn văn càng nhiều và ngược lại màn hình càng lớn thì số dòng của một đoạn văn càng ít.
1.3 Thẻ <br> ( ngắt dòng trong HTML)
Thẻ <br> xác định một ngắt dòng.
Sử dụng thẻ <br> nếu bạn muốn ngắt dòng (một dòng mới) mà không cần bắt đầu một đoạn mới.
Như hình trên bạn thấy, thẻ <br> là một thẻ rỗng, nghĩa là nó không có thẻ kết thúc.
1.4 Thẻ <pre> (xác định văn bản được định dạng sẵn trong HTML)
Văn bản bên trong thẻ <pre> được hiển thị bằng một phông chữ chiều rộng cố định (thường là Courier), và nó bảo vệ cả không gian và các ngắt dòng.
Như hình trên các bạn thấy sự khác nhau giữa thẻ <p> và thẻ <pre> về cách mà trình duyệt hiển thị.
1.5 Các thẻ được sử dụng trong bài viết
| Thẻ | Mô tả |
| <p> | xác định một đoạn văn |
| <br> | xác định một ngắt dòng |
| <pre> | xác định văn bản được định dạng trước |
2. Các bài tập
2.1 Bài tập 1 về đoạn văn
Thêm một đoạn văn vào tập tin dưới với văn bản “Hello World!”.
<!DOCTYPE html> <html> <body> </body> </html>
Gợi ý của bài tập 1
Gợi ý: Thêm thẻ <p>
Câu trả lời của bài tập 1
<!DOCTYPE html> <html> <body> <p>Hello World!</p> </body> </html>
2.2 Bài tập 2 về đoạn văn
Thêm thẻ đóng thích hợp vào tập tin dưới
<!DOCTYPE html> <html> <body> <h1>Đây là tiêu đề <p>Đây là đoạn văn. <p>Đây là đoạn văn khác. <p>Đây là đoạn văn khác nữa. </body> </html>
Gợi ý của bài tập 2
Gợi ý: Thêm thẻ đóng <h1> và thẻ đóng <p>.
Câu trả lời của bài tập 2
<!DOCTYPE html> <html> <body> <h1>Đây là tiêu đề</h1> <p>Đây là đoạn văn.</p> <p>Đây là đoạn văn khác.</p> <p>Đây là đoạn văn khác nữa.</p> </body> </html>
2.3 Bài tập 3 về đoạn văn
Sửa hiển thị đoạn dưới đây. Hiển thị đoạn trên 4 dòng bằng cách sử dụng các thẻ <br>
<!DOCTYPE html> <html> <body> <p> Đây là câu thứ 1. Đây là câu thứ 2. Đây là câu thứ 3. Đây là câu thứ 4. </p> </body> </html>
Gợi ý của bài tập 3
Gợi ý: Sử dụng thẻ <br> để tách các dòng.
Câu trả lời của bài tập 3
<!DOCTYPE html> <html> <body> <p> Đây là câu thứ 1.<br> Đây là câu thứ 2.<br> Đây là câu thứ 3.<br> Đây là câu thứ 4. </p> </body> </html>
2.4 Bài tập 4 về đoạn văn
Sửa chữa hiển thị bài thơ này. Hiển thị bài thơ như được đề xuất trong đoạn mã dưới đây bằng cách sử dụng <pre>.
<!DOCTYPE html> <html> <body> <p> Đây là câu thơ thứ 1. Đây là câu thơ thứ 2. Đây là câu thơ thứ 3. Đây là câu thơ thứ 4. </p> </body> </html>
Gợi ý của bài tập 4
Gợi ý: Sử dụng thẻ <pre> thay vì <p>.
Câu trả lời của bài tập 4
<!DOCTYPE html> <html> <body> <pre> Đây là câu thơ thứ 1. Đây là câu thơ thứ 2. Đây là câu thơ thứ 3. Đây là câu thơ thứ 4. </pre> </body> </html>
3. Lời cuối bài
Qua bài này chắc các bạn đã biết thẻ của đoạn văn là gì? Cách trình duyệt hiển thị đoạn văn ra sao và các thẻ liên quan đến nó. Bài kế tiếp tôi sẽ hướng dẫn các bạn các kiểu (Styles) có trong HTML.
The post [HTML bài 9] Đoạn văn (Paragraphs) trong HTML appeared first on Học online.
from WordPress http://ift.tt/2weNv9w
via IFTTT
Không có nhận xét nào:
Đăng nhận xét