Bài 5: Đoạn văn HTML – Tìm hiểu về HTML Paragraphs

Bài 5: Đoạn văn HTML

Trong bài viết này bạn sẽ tìm hiểu về cách tạo ra những đoạn văn HTML đơn giản nhất. Bài viết này thuộc chuyên mục Tự Học HTML. Chúng tôi hy vọng trước đó bạn đã xem bài 4 về Thẻ Tiêu Đề HTML.

Bài 5: Đoạn văn HTML - Tìm hiểu về HTML Paragraphs
Bài 5: Đoạn văn HTML – Tìm hiểu về HTML Paragraphs

Cách tạo đoạn văn trong HTML

Chúng ta sẽ sử dụng thẻ Paragraphs hay còn được viết code là p. Đây là thẻ được sử dụng để xuất bản các đoạn văn bản trên trang web.

Đoạn văn được xác định với thẻ <p>. Thẻ đoạn văn là một thẻ rất cơ bản và thường là thẻ đầu tiên bạn sẽ cần để xuất bản văn bản của mình trên các trang web. Đây là một ví dụ:

Lưu ý: Trình duyệt các biểu định kiểu dựng sẵn tự động tạo một số khoảng trắng bên trên và bên dưới nội dung của một đoạn (được gọi là lề ). Nhưng bạn có thể ghi đè lên nó bằng CSS.

Không cần sử dụng thẻ đóng ?

Trong HTML 4 và các phiên bản trước đó. Bạn chỉ cần một thẻ Mở là đủ để hiển thị đoạn văn bản muốn hiển thị trên web. Hầu hết các trình duyệt sẽ hiển thị HTML chính xác ngay cả khi bạn quên thẻ Đóng. Ví dụ:

Thẻ đoạn văn HTML trong ví dụ trên sẽ hoạt động trong hầu hết các trình duyệt web. Nhưng trong thực tế Học Làm Web khuyên bạn không nên quên thẻ đóng. Bởi trong nhiều trường hợp nó sẽ bị lỗi khi kết hợp với nhiều thẻ khác nhau.

Lưu ý: Vì mục đích tương thích trong tương lai và thực hành việc học lập trình thật tốt. Bạn nên sử dụng cả thẻ mở và thẻ đóng cho các đoạn văn.

Tạo ngắt dòng trong đoạn văn HTML

Chúng ta sẽ sử dụng thẻ <br> để chèn một ngắt dòng (xuống dòng) trên trang web. Vì <br>là một phần tử trống , do đó không cần thẻ đóng như kiểu </br>.

Lưu ý: Không sử dụng đoạn trống tức là <p></p>để thêm không gian trong trang web của bạn. Trình duyệt có thể bỏ qua các đoạn trống vì nó là thẻ logic. Sử dụng thuộc tính CSS marginthay thế để điều chỉnh không gian xung quanh các thành phần.

Tạo đường kẻ ngang trong đoạn văn HTML

Bạn có thể sử dụng thẻ <hr>để tạo các đường kẻ ngang để phân tách trực quan các phần nội dung trên trang web. Giống như <br><hr>thẻ cũng là một yếu tố trống rỗng. Đây là một ví dụ:

Quản lý không gian trắng trong đoạn văn

Thông thường trình duyệt sẽ hiển thị nhiều khoảng trắng được tạo bên trong mã đoạn văn HTML. Chỉ cần bạn sử dụng phím Enter hoặc phím Tab trên bàn phím. Các đoạn văn sau sẽ được hiển thị trong một dòng mà không có thêm khoảng trắng:

Chèn &nbsp;để tạo thêm khoảng trắng liên tiếp, trong khi chèn <br>thẻ để tạo ngắt dòng trên các trang web của bạn, như được minh họa trong ví dụ sau:

Bạn cũng có thể sử dụng thẻ <pre>để hiển thị khoảng trắng, tab, ngắt dòng, v.v. Chính xác như được ghi trong tệp HTML. Nó rất hữu ích trong việc trình bày văn bản trong đó không gian và ngắt dòng là quan trọng.

Ví dụ sau sẽ hiển thị văn bản trong trình duyệt như trong mã nguồn:

Mẹo: Văn bản trong thẻ <pre> thường được trình duyệt hiển thị theo phông chữ đơn cách hoặc chiều rộng cố định. Nhưng bạn có thể ghi đè lên phần này bằng thuộc tính CSS font. Sau này chúng ta sẽ được học CSS.

Hãy tiếp tục đến bài học tiếp theo nhé.

Có thể bạn chưa xem

Leave a Reply

avatar
  Subscribe  
Notify of