18/08/2018, 10:36

Đoạn văn bản trong HTML

1) Đoạn văn bản là gì? Đoạn văn bản (hay còn được gọi là khối văn bản). Ở giữa hai đoạn văn bản được cách nhau bởi một khoảng trắng. Ví dụ, dưới đây là 3 đoạn văn bản: Web cơ bản hướng dẫn học lập trình web (1), Web cơ bản hướng dẫn học lập trình web (1), Web cơ bản hướng dẫn học lập ...

1) Đoạn văn bản là gì?

Đoạn văn bản (hay còn được gọi là khối văn bản). Ở giữa hai đoạn văn bản được cách nhau bởi một khoảng trắng.

Ví dụ, dưới đây là 3 đoạn văn bản:

Web cơ bản hướng dẫn học lập trình web (1), Web cơ bản hướng dẫn học lập trình web (1), Web cơ bản hướng dẫn học lập trình web (1), Web cơ bản hướng dẫn học lập trình web (1), Web cơ bản hướng dẫn học lập trình web (1), Web cơ bản hướng dẫn học lập trình web (1), Web cơ bản hướng dẫn học lập trình web (1), Web cơ bản hướng dẫn học lập trình web (1), Web cơ bản hướng dẫn học lập trình web (1), Web cơ bản hướng dẫn học lập trình web (1), Web cơ bản hướng dẫn học lập trình web (1)

Web cơ bản hướng dẫn học lập trình web (2), Web cơ bản hướng dẫn học lập trình web (2), Web cơ bản hướng dẫn học lập trình web (2), Web cơ bản hướng dẫn học lập trình web (2), Web cơ bản hướng dẫn học lập trình web (2), Web cơ bản hướng dẫn học lập trình web (2), Web cơ bản hướng dẫn học lập trình web (2), Web cơ bản hướng dẫn học lập trình web (2), Web cơ bản hướng dẫn học lập trình web (2), Web cơ bản hướng dẫn học lập trình web (2), Web cơ bản hướng dẫn học lập trình web (2)

Web cơ bản hướng dẫn học lập trình web (3), Web cơ bản hướng dẫn học lập trình web (3), Web cơ bản hướng dẫn học lập trình web (3), Web cơ bản hướng dẫn học lập trình web (3), Web cơ bản hướng dẫn học lập trình web (3), Web cơ bản hướng dẫn học lập trình web (3), Web cơ bản hướng dẫn học lập trình web (3), Web cơ bản hướng dẫn học lập trình web (3), Web cơ bản hướng dẫn học lập trình web (3), Web cơ bản hướng dẫn học lập trình web (3), Web cơ bản hướng dẫn học lập trình web (3)

2) Cú pháp tạo một đoạn văn bản

Để tạo một đoạn văn bản, ta sử dụng cặp thẻ <p></p>

Ví dụ

Khi thực thi đoạn mã

<p>Web cơ bản 1</p>
<p>Web cơ bản 2</p>
<p>Web cơ bản 3</p>

Màn hình của trình duyệt sẽ hiển thị 3 đoạn văn bản như sau:

web cơ bản 1

web cơ bản 2

web cơ bản 3
Xem ví dụ

3) Canh lề cho đoạn văn bản

Giống như trong trình soạn thảo Word, ta cũng có thể canh lề cho đoạn văn nằm bên trái, phải, giữa, hoặc canh đều hai bên mép trái phải.

Để canh lề cho đoạn văn trong HTML ta thêm thuộc tính align vào thẻ <p>, giống cú pháp dưới đây:

<p align="left|center|right|justify">Nội dung của đoạn văn bản</p>

Trong đó:

  • left: canh cho đoạn văn nằm bên trái (mặc định là đoạn văn được nằm ở bên trái, nên giá trị này không cần thiết)
  • center: canh cho đoạn văn nằm ở giữa
  • right: canh cho đoạn văn nằm bên phải
  • justify: canh đều hai bên mép trái phải cho đoạn văn
Ví dụ
<p align="left">Web cơ bản</p>
<p align="center">Web cơ bản</p>
<p align="right">Web cơ bản</p>
<p align="justify">Web cơ bản</p>
Xem ví dụ

4) Ký tự khoảng trắng &nbsp; và thẻ xuống dòng <br>

Khi thực thi một đoạn mã HTML, các dấu xuống dòng và các ký tự khoảng trắng dư thừa sẽ bị loại bỏ.

Ví dụ

Khi thực thi đoạn mã:

<p>web cơ                  bản hướng         dẫn 
          học lập trình     web từ A           đến Z</p>

Trên màn hình trình duyệt sẽ không hiển thị giống như ý muốn lúc soạn thảo của ta, nó sẽ loại bỏ các dấu xuống dòng và các khoảng trắng dư thừa. Nó sẽ hiển thị là:

web cơ bản hướng dẫn học lập trình web từ A đến Z
Xem ví dụ

Do đó, nếu muốn tạo thêm khoảng trắng thì ta dùng ký tự &nbsp; (một ký tự &nbsp; tương đương với một dấu khoảng trắng)

Còn muốn xuống dòng thì ta dùng thẻ <br>

Ví dụ

Khi thực thi đoạn mã:

<p>web cơ&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bản hướng&nbsp;&nbsp;&nbsp;dẫn<br>
&nbsp;&nbsp;&nbsp;học lập trình&nbsp;&nbsp;&nbsp;web từ A&nbsp;&nbsp;&nbsp;&nbsp;đến Z</p>

Màn hình trình duyệt sẽ hiển thị là:

web cơ       bản hướng   dẫn
   học lập trình   web từ A    đến Z
Xem ví dụ

Lưu ý: Thẻ <br> không nhất thiết phải đặt ở cuối dòng, bạn có thể đặt nó ở bất kỳ đâu. Nó mang ý nghĩa như một dấu xuống dòng, miễn nó nằm ở đâu thì nội dung phía sau nó sẽ được xuống dòng.

0