|
| BÀI HỌC
Sắp xếp văn bản vào giữa trang
Trong các bài học trước, bạn thấy rằng trang Web của bạn chỉ được căn lề bên trái, và bạn muốn trình bày trang Web của mình đẹp hơn bằng cách sắp xếp các đoạn văn bản vào giữa trang, HTML có nhiều cách giúp bạn thực hiện điều này.
Cách thứ nhất: Bạn đặt đoạn văn bản cần sắp xếp vào giữa trang nằm giữa Tag <CENTER> và </CENTER>.
Ví dụ:
<FONT FACE="Arial" SIZE="2">
<CENTER>Xin chúc mừng bạn</CENTER>
</FONT>
Sẽ cho kết quả như sau:
 |
 Chân trời tri thức - Internet today |
 |
 |
 |
|
|
Xin chúc mừng bạn
|
|
 |
 Done |
 |
 |
Tuy nhiên cách này có một trình duyệt không hỗ trợ, tốt nhất là bạn dùng cách thứ hai đó là đặt thuộc tính ALIGN cho thẻ <P>.
Các giá trị của thuộc tính này gồm Left (mặc định), Center, Right và Justify (canh đều 2 bên).
Ví dụ:
<FONT FACE="Arial" SIZE="2">
<P ALIGN=center>Xin chúc mừng bạn</P>
<P ALIGN=justify>Trong các bài học trước, bạn thấy rằng trang Web của bạn chỉ được căn lề bên trái, và bạn muốn trình bày trang Web của mình đẹp hơn bằng cách sắp xếp các đoạn văn bản vào giữa trang, HTML có nhiều cách giúp bạn thực hiện điều này.
<P ALIGN=right>Bạn cũng có thể canh dòng chữ này sang bên phải của trang.
</FONT>
Sẽ cho kết quả như sau:
Sắp xếp tương đối giữa văn bản và hình ảnh
Khi muốn có văn bản phủ xung quanh hình ảnh, bạn chỉ việc thêm thuộc tính ALIGN vào Tag <IMG>.
Ví dụ:
<IMG SRC="images/anh1.gif" ALIGN="right">
Sẽ cho kết quả:
|
Chân trời tri thức - Internet today |
|
|
|
|
|
|
|
|
Done |
|
|
So với không có thuộc tính ALIGN:
<IMG SRC="images/anh1.gif">
|
Chân trời tri thức - Internet today |
|
|
|
|
|
|
|
|
Done |
|
|
Khi văn bản hoặc những mục khác được sắp cùng với hình ảnh khá ngắn và bạn muốn đẩy văn bản kế tiếp xuống bên dưới hình ảnh, bạn hãy sử dụng thuộc tính CLEAR trong Tag <BR>:
<BR CLEAR=left>
<BR CLEAR=right>
<BR CLEAR=all>
Tag <BR> với thuộc tính CLEAR sẽ xoá đi tất cả cách sắp xếp có trong Tag <IMG>.
Ví dụ: Khi Tag <BR> chưa có thuộc tính CLEAR:
<IMG SRC="images/anh1.gif" ALIGN=Top> Hình ảnh với thuộc tính ALIGN=Top
|
Chân trời tri thức - Internet today |
|
|
|
|
|
Hình ảnh với thuộc tính ALIGN=Top
|
|
|
Done |
|
|
Khi có thêm Tag <BR CLEAR=All>
<IMG SRC="images/anh1.gif" ALIGN=Top><BR CLEAR=All>Hình ảnh với thuộc tính ALIGN=Top
|
Chân trời tri thức - Internet today |
|
|
|
|
|
Hình ảnh với thuộc tính ALIGN=Top
|
|
|
Done |
|
|
Khi cần trình bày văn bản phủ quanh hình ảnh với một khoảng cách nhất định ta dùng thêm các thuộc tính VSPACE và HSPACE trong Tag <IMG>. Trong đó VSPACE là khoảng cách giữa bên trên hay bên dưới của hình ảnh và văn bản còn HSPACE là khoảng cách giữa bên phải hay bên trái của hình ảnh và văn bản.
Ví dụ:
<FONT FACE="Arial" SIZE="2">
<IMG SRC="images/anh1.gif" ALIGN=left VSPACE=10 HSPACE=20>Khi văn bản hoặc những mục khác được sắp cùng với hình ảnh khá ngắn và bạn muốn đẩy văn bản kế tiếp xuống bên dưới hình ảnh, bạn hãy sử dụng Tag <BR> với thuộc tính CLEAR.
<P>Khi cần trình bày văn bản phủ quanh hình ảnh với một khoảng cách nhất định ta dùng thêm các thuộc tính VSPACE và HSPACE trong Tag <IMG>. Trong đó vspace là khoảng cách giữa bên trên hay bên dưới của hình ảnh và văn bản còn hspace là khoảng cách giữa bên phải hay bên trái của hình ảnh và văn bản.
</FONT>
So với khi không có các thuộc tính VSPACE và HSPACE:
<FONT FACE="Arial" SIZE="2">
<IMG SRC="images/anh1.gif" ALIGN=left>Khi văn bản hoặc những mục khác được sắp cùng với hình ảnh khá ngắn và bạn muốn đẩy văn bản kế tiếp xuống bên dưới hình ảnh, bạn hãy sử dụng Tag <BR> với thuộc tính CLEAR.
<P>Khi cần trình bày văn bản phủ quanh hình ảnh với một khoảng cách nhất định ta dùng thêm các thuộc tính VSPACE và HSPACE trong Tag <IMG>. Trong đó vspace là khoảng cách giữa bên trên hay bên dưới của hình ảnh và văn bản còn hspace là khoảng cách giữa bên phải hay bên trái của hình ảnh và văn bản.
</FONT>
Chỉnh lề và sắp xếp văn bản
Ngoài các cách sắp xếp văn bản mà bạn đã biết, HTML còn cho chúng ta thêm một Tag căn chỉnh văn bản nữa, đó là <DIV> ... </DIV>. Vùng văn bản chịu ảnh hưởng của Tag này dựa vào thuộc tính ALIGN của thẻ <DIV>.
<FONT FACE="Arial" SIZE="2">
<DIV ALIGN= left>
Ngoài các cách sắp xếp văn bản mà bạn đã biết, HTML còn cho chúng ta thêm một Tag căn chỉnh văn bản nữa, đó là <DIV> ... </DIV>.
<P>Vùng văn bản chịu ảnh hưởng của Tag này dựa vào thuộc tính ALIGN.
</DIV>
</FONT>
<FONT FACE="Arial" SIZE="2">
<DIV ALIGN= center>
Ngoài các cách sắp xếp văn bản mà bạn đã biết, HTML còn cho chúng ta thêm một Tag căn chỉnh văn bản nữa, đó là <DIV> ... </DIV>.
<P>Vùng văn bản chịu ảnh hưởng của Tag này dựa vào thuộc tính ALIGN.
</DIV>
</FONT>
<FONT FACE="Arial" SIZE="2">
<DIV ALIGN= right>
Ngoài các cách sắp xếp văn bản mà bạn đã biết, HTML còn cho chúng ta thêm một Tag căn chỉnh văn bản nữa, đó là <DIV> ... </DIV>.
<P>Vùng văn bản chịu ảnh hưởng của Tag này dựa vào thuộc tính ALIGN.
</DIV>
</FONT>
| THỰC HÀNH
Bây giờ bạn hãy tạo một trang Web hiển thị một tin nào đó, như các trang tin của VNN chẳng hạn, trong đó có sử dụng các hình ảnh minh hoạ cho tin. Yêu cầu sử dụng thuộc tính vspace và hspace để căn chỉnh khoảng cách giữa văn bản và hình ảnh cho đẹp, sử dụng Tag <DIV> để canh lề cho đoạn văn bản.
Theo Tạp chí Tin học I-Today
|
File Edit View Favorites Tools Help