[HTML] Bài 4.1: Nhóm Các Thẻ Block - Tag P và Các thẻ trình bày trang

Các thành phần trình bày trang để định dạng cả một đoạn văn bản và phải nằm trong phần thân của tài liệu. Có nhiều thẻ được sử dụng nhưng trong tài liệu này chỉ trình bày một số thẻ trình bày chính: định dạng phần địa chỉ (<ADDRESS>), đoạn văn bản (), xuống dòng ( ), căn chính giữa (<CENTER>), đường kẻ ngang (<HR>), đoạn văn bản đã định dạng sẵn (<PRE>), trích dẫn nguồn tài liệu (<BLOCKQUOTE>)

1. Định Dạng Đoạn Văn bản Thẻ P:

- Thẻ P là viết tắt của từ Paragraphs có nghĩa là đoạn văn bản.- Thẻ P giúp cho trình duyệt xác định được đoạn văn bản trong tài liệu HTML tức là trình duyệt tự động chèn thêm 1 dòng trắng phía trên và 1 dòng trắng phía dưới mỗi paragraphs. Cấu trúc thẻ: .......................

Ví Dụ:
Không có thẻ P:

<html>
 <head>
  <title> welcome to html</title>
 </head>
 <body>
  Trong Thực tế, mỗi loại trang web điều tồn tại 2 loại trang web, trang web tĩnh và trang web dộng Trang web tĩnh thường là trang web không kết nối đến CSDl, điều đó có nghĩa là chúng được thiết kế bằng các thẻ HTMLvaf client Sript. Ngược lại, trang web động được thiết kế bằng Server Sript.
  Trong Thực tế, mỗi loại trang web điều tồn tại 2 loại trang web, trang web tĩnh và trang web dộng Trang web tĩnh thường là trang web không kết nối đến CSDl, điều đó có nghĩa là chúng được thiết kế bằng các thẻ HTMLvaf client Sript. Ngược lại, trang web động được thiết kế bằng Server Sript.
 </body> 
</html>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

Có Thẻ P:

<html>
 <head>
  <title> welcome to html</title>
 </head>
 <body> 
  <p>Trong Thực tế, mỗi loại trang web điều tồn tại 2 loại trang web, trang web tĩnh và trang web dộng Trang web tĩnh thường là trang web không kết nối đến CSDl, điều đó có nghĩa là chúng được thiết kế bằng các thẻ HTMLvaf client Sript. Ngược lại, trang web động được thiết kế bằng Server Sript.</p>
  <p>Trong Thực tế, mỗi loại trang web điều tồn tại 2 loại trang web, trang web tĩnh và trang web dộng Trang web tĩnh thường là trang web không kết nối đến CSDl, điều đó có nghĩa là chúng được thiết kế bằng các thẻ HTMLvaf client Sript. Ngược lại, trang web động được thiết kế bằng Server Sript.</p>
 </body> 
</html>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

Qua ví Dụ trên chắt bạn đã thấy được công dụng của thẻ P.

2. Thẻ Xuống Dòng (đây là một thẻ thuộc nhóm inline )

Trong HTML bạn không thể thay đổi hiển thị bằng cách thêm các dấu xuống dòng (bấm Enter) hay thêm các khoảng trống (bấm space ) vào code của bạn được.
Trình duyệt sẽ tự động gỡ bỏ tất cả dấu xuống dòng trong code (bấm enter) và khoảng trống (space) nếu chúng đi với nhau nhiều hơn 1. Tức là bạn gõ bao nhiêu khoảng trống liền nhau thì trình duyệt củng tính là 1 khoảng trống. Tương tự đối với bấm enter xuống dòng. vậy nếu muốn xuống dòng nhưng không để lại các dòng trắng như thẻ P ta sẽ sử dụng thẻ Break (Br)
- Thẻ là một thẻ đơn không có thẻ đóng.
Ví Dụ:
Ở ví dụ này mình có phần không sử dụng thẻ br, có sử dụng thẻ br, sử dụng thẻ P và cả sử dụng thẻ tiêu đề để các bạn có thể dể dàng thấy được sự khác biệt.

<html>
 <head>
  <title> welcome to html</title>
 </head>
 <body>
    <h3>Ví Dụ Không Dùng Thẻ Break</h3>
    Nguyễn Hữu Trọng 
    Nguyễn Nhựt Thanh
    Trần Hoàng Phương
    <h3>Ví Dụ Dùng Thẻ Break</h3>
    Nguyễn Hữu Trọng <br/>
    Nguyễn Nhựt Thanh <br/>
    Trần Hoàng Phương <br/>
    <h3>Ví Dụ Dùng Thẻ Paragraphs</h3>
    <p>Nguyễn Hữu Trọng </p>
    <p>Nguyễn Nhựt Thanh </p>
    <p>Trần Hoàng Phương </p>
 </body> 
</html>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

3. Thẻ Định Dạng Địa chỉ:

Cho biết thông tin như địa chỉ, danh thiếp và tác giả, thường đặt ở đầu hay cuối tài liệu.
Thẻ định dạng: <ADDRESS>…</ADDRESS>
Ví Dụ:

<ADDRESS>
  Thiết Kế Website chuẩn với HTML <BR/>
  Rain<BR/>
  Phú Thành, Tân Phú, TB VL<BR/>
  Tel 123456789 
</ADDRESS>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

4. Đường Kẻ Ngang

- Thẻ này tạo ra đường kẻ ngang (Horizontal Rule) ngăn cách giữa các phần trong tài liệu.
- Là một thẻ đơn không có thẻ đóng
- Thẻ định nghĩa dạng: <HR>
Ví Dụ:
Code html:

<hr>
Đây là một ví dụ về thẻ Horizontal Rule

Hiển Thị Trên Trình Duyệt:

Đây là một ví dụ về thẻ Horizontal Rule

5. Thẻ Căn Giữa:

- Thẻ này dùng để căn chỉnh đoạn văn bản ở giữa chiều rộng trang văn bản.
- Thẻ định nghĩa dạng: <CENTER>...</CENTER>
- Thẻ này cũng có tác dụng xuống dòng khi kết thúc đoạn văn bản.

6. Đoạn Văn Bản Định Dạng Sẳn:

- Như ở phần trước mình đã nói , trình duyệt sẽ bỏ qua các dấu hiệu xuống dòng, bỏ qua các dòng trắng khoãng cách khi ta soạn thảo văn bản tuy nhiên bạn vẫn có thể hiển thị văn bản gióng như văn bản lúc soạn thảo của bạn bằng cách dùng thẻ PRE (Pre- formatted).
- Thẻ định Nghĩa dạng: <PRE> ................. </PRE>
Ví Dụ:

<pre>

Khi bạn muốn trình duyệt Web hiển thị đúng như bạn soạn thảo, bạn nhớ dùng tag pre

Bạn có thể xuống dòng.

Bạn có thể dùng dấu cách thoải mái....

</pre>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

7. Trích Dẫn Nguồn Tài Liệu Khác:

- Dùng để trích dẫn một đoạn văn bản, thường được thể hiện bằng chữ nghiêng có căn lề thụt vào trong (như một paragraph) và thường có một dòng trống trên và dưới.
- Thẻ định nghĩa dạng: <BLOCKQUOTE>...</BLOCKQUOTE>
Ví Dụ:

I think the poem ends
<BLOCKQUOTE>
Soft you now, the fair Ophelia. Nymph, in thy orisons, be all my sins remembed. </BLOCKQUOTE> but I am not sure.

(Mình sẽ tiếp tục giới thiệu với các bạn các tag định dạng khác ở bài tiếp theo ).

abcdasdasd

Thứ Ba, 13 tháng 8, 2013