Bạn muốn viết một trang Web?

Bài 3. Định dạng văn bản

Mở đầu Bài học Phần kết

Bạn lại mở khuon.html trong Notepad và viết thêm phần text có màu đỏ sau đây:

<BODY BGCOLOR="#CCFFDD">
Chao cac ban !
Chuc mung cac ban den voi trang Web cua toi !

</BODY>

Save thay đổi vừa rồi vào trang03.html và mở nó ra trong Internet Explorer, trang Web mới của bạn trông sẽ như thế này:

Chao cac ban ! Chuc mung cac ban den voi trang Web cua toi !


Ô hay, tại sao browser lại không xuống dòng vậy? Sự thật là dù bạn có gõ xuống dòng bao nhiêu lần đi nữa thì browser vẫn chỉ hiển thị một dòng duy nhất thôi. Cú pháp HTML quy định là mỗi khi muốn xuống dòng bạn phải nói rõ cho browser biết bằng cách dùng tag <BR> (viết tắt của chữ Break). Bạn hãy thử thêm tag đó như sau:

<BODY BGCOLOR="#CCFFDD">
Chao cac ban !<BR>
Chuc mung cac ban den voi trang Web cua toi !
</BODY>

Save thay đổi vừa rồi và nhấn nút Refresh trong Internet Explorer, trang Web của bạn trông sẽ như thế này:

Chao cac ban !
Chuc mung cac ban den voi trang Web cua toi !

Các bạn chú ý là tag <BR> chỉ đứng một mình ở cuối dòng chứ không có tag kết thúc </BR>.


Tương tự như vậy, nếu muốn phân đoạn bạn cũng phải báo cho browser biết bằng cách bọc mỗi đoạn văn trong các tags <P></P> (viết tắt của chữ Paragraph) như sau:

<BODY BGCOLOR="#CCFFDD">
<P>Chao cac ban !</P>
<P>Chuc mung cac ban den voi trang Web cua toi !</P>
</BODY>

Sau khi save thay đổi vừa rồi và nhấn nút Refresh trong cửa sổ Internet Explorer của trang03.html bạn sẽ thấy:

Chao cac ban !

Chuc mung cac ban den voi trang Web cua toi !


Bạn cũng có thể vẽ thêm một đường ngang ngăn cách hai đoạn văn với tag <HR> như sau (HR là chữ viết tắt của Horizontal Ruler):

<BODY BGCOLOR="#CCFFDD">
<P>Chao cac ban !</P>
<HR>
<P>Chuc mung cac ban den voi trang Web cua toi !</P>
</BODY>

Lại save và nhấn nút Refresh trong Internet Explorer, trang Web của bạn trông sẽ như thế này:

Chao cac ban !


Chuc mung cac ban den voi trang Web cua toi !

Cũng như tag <BR>, tag <HR> chỉ đứng một mình chứ không cần có tag kết thúc tag </HR>.


Thông thường thì browser ép các câu và đoạn văn sang trái, như các bạn thấy qua các bước thực tập trên đây. Nếu muốn ép chúng sang phải hay đưa chúng vào giữa trang bạn có thể dùng tag <DIV></DIV> với attribute ALIGN="RIGHT" hay ALIGN="CENTER" (DIV là chữ viết tắt của Division, tức là một phần):

<BODY BGCOLOR="#CCFFDD">
<DIV ALIGN="RIGHT">
<P>Chao cac ban !</P>
</DIV>
<HR>
<DIV ALIGN="CENTER">
<P>Chuc mung cac ban den voi trang Web cua toi !</P>
</DIV>
</BODY>

Kết quả sẽ như thế này (tất nhiên, đừng quên hai động tác Save và Refresh nghe bạn):

Chao cac ban !


Chuc mung cac ban den voi trang Web cua toi !


Nhiều khi bạn cần sắp xếp nội dung thành nhiều đoạn như trong một danh sách hay một bảng liệt kê. Khi đó bạn phải dùng các tags <UL></UL> (Unordered List, danh sách không thứ tự) hay <OL></OL> (Ordered List, danh sách có thứ tự) như trong ví dụ sau:

<BODY BGCOLOR="#CCFFDD">
<DIV ALIGN="RIGHT">
<P>
<UL>
<LI>Chao cac ban !</LI>
<LI>Hello !</LI>
</UL>
</P>
</DIV>
<HR>
<DIV ALIGN="CENTER">
<P>
<OL>
<LI>Chuc mung cac ban den voi trang Web cua toi !</LI>
<LI>Welcome to my Website !</LI>
</OL>
</P>
</DIV>
</BODY>

Web browser sẽ hiển thị đoạn trên như sau:

  • Chao cac ban !
  • Hello !


  1. Chuc mung cac ban den voi trang Web cua toi !
  2. Welcome to my Website !

Trong một danh sách như trên thì mỗi đoạn hay yếu tố phải được bao bọc giữa các tags <LI></LI> (viết tắt của List Item, là yếu tố của danh sách).

Các bạn lưu ý là cách thức các tags được lồng vào nhau đều có ý nghĩa rõ ràng:

previous <-- Trang trước Tiếp theo --> next

Mở đầu Bài:

1 -  2 -  3 -  4 -  5 -  6 -  7 -  8 -  9

Phần kết


nguyen-chi@hcm.vnn.vn