Bài 7: Đoạn văn trong Html ( HTML paragraphs )

Bài 7: Đoạn văn trong Html ( HTML paragraphs )

 

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

NỘI DUNG BÀI VIẾT

1. Tạo đoạn văn 
2. Hiển thị HTML Ra trình duyệt
3. Tạo Ngắt dòng
4. Tạo Dòng kẻ ngang 
5. Tạo khoảng trắng
6. văn bản được định dạng sẵn

Tạo đoạn văn 

Phần Tử HTML Thẻ <P> Được xác định đây chính là một đoạn văn

Thẻ <p> là một thẻ cơ bản để xuất bản các đoạn văn hiển thị trên các trang website của chúng ta. 

Ví Dụ: 

<p>This is a paragraph.</p><p>This is another paragraph.</p>

Xem Demo

Hiển thị HTML Ra trình duyệt

Với HTML, bạn không thể thay đổi cách hiển thị bằng cách thêm khoảng trắng hoặc dòng thừa trong mã HTML của mình.

Trình duyệt sẽ tự động loại bỏ bất kỳ khoảng trắng và dòng thừa nào khi trang được hiển thị:

<p>This paragraphcontains a lot of linesin the source code,but the browserignores it.</p><p>This paragraphcontains         a lot of spacesin the source         code,but the        browserignores it.</p>

Preview

Tạo Ngắt dòng

thẻ <br> được sử dụng để chèn một ngắt dòng vào trang website ( xuống dòng một đoạn văn hẳn hạn ) 

<br> là một thẻ trống nên không cần thẻ đóng </br>. 

đây là một trong những số thẻ đặt biệt không có thẻ đóng. nhưng đối với thẻ <p> thì có thẻ đóng nhé </p> 

Ví dụ: 

đây là điều nên sử dụng và thực hiện khi tạo ngắt dòng trong HTML <p>This is a paragraph <br> with line break.</p><p>This is <br>another paragraph <br> with line breaks.</p>đây là điều không nên sử dụng Trong HTML<p>This is a paragraph <p></p> with line break.</p><p>This is <p></p> another paragraph <p></p> with line breaks.</p>

Preview

Lưu ý:  không sử dụng đoạn v8n trống tức là <p></p> để thêm không gian các trang web của bạn. trỉnh duyệt có thể bỏ qua các đoạn văn trống vì nó là thẻ Logic. Thay vào đó, hãy sử dụng thuốc tính Margin của CSS để điều chỉnh không gian xung quanh các phần tử. 

Tạo Dòng kẻ ngang 

bạn có thể sử dụng thẻ <hr> tạo dòng kẻ ngang để phân tách các phần nội dung trên trang web một cách trực quan giống như <Br>, thẻ <hr> cũng là một phần tử trống. 

Ví dụ: 

<p>This is a paragraph.</p><hr><p>This is another paragraph.</p>

Preview

Tạo khoảng trắng

Thông thường trình duyệt sẽ hiển thị nhiều khoảng trắng được tạo ra bên trong mã HTML bằng các nhấn phím space-bar hoặc phím Tab trên bàn phím như một khoảng trắng duy nhất. 

nhiều ngắt dòng được tạo bên trong mã HTML thong qua việc nhấn phím enter cũng được hiển thị dưới dạng một khoản trắng. 

Các đoạn văn bản sẽ được hiển thị trong một dòng duy nhất mà không có bất kì khoảng trắng nào: 

<p>This paragraph contains  multiple   spaces    in the source code.</p><p>    This paragraph    contains multiple tabs and line breaks    in the source code.</p>

chèn kí tự &nbsp; để tạo thêm khoản trắng liên tiếp trong khi chèn thẻ <br> để tạo thêm ngắt dòng trên các trang web của bạn:

<p>This paragraph has multiple&nbsp;&nbsp;&nbsp;spaces.</p><p>This paragraph has multiple<br><br>line<br><br><br>breaks.</p>

Preview

văn bản được định dạng sẵn

Phần tử HTML <pre> xác định văn bản được định dạng trước.

Đôi khi dử dụng &nbsp; , <br> .... để quản lí không gian không thuận tiện lắm.

thây vào đó bạn hãy dụng thẻ <pre></pre> để hiển thị khoảng trắng, tab, ngắt dòng, chính xác như được viết trong file HTML. 

Nó rất hữu ít trong việc trình bày văn bản mà dấu cách và ngắt dòng là quan trọng như bài thơ hoặc source code. 

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

<pre>    Twinkle, twinkle, little star,     How I wonder what you are!     Up above the world so high,     Like a diamond in the sky.</pre>

Preview

mẹo: Văn bản bên trong phần tử <pre></pre> đường được trình duyệt hiển thị bằng phông chữ monospace  hoặc phông chữ có chiều động cố định ( fixed-widht ), chẳng hạn như Courier, nhưng bạn có thể ghi đè điều này bằng cách sử dụng thuộc tính font của CSS