[back] [index]

Cách trang trí chữ, bố cục một trang web

 Trong trang trước, chúng ta đă đề cập đến cách định hướng một object trong document bằng cặp TAG: <center></center> Những ǵ nằm giữa cặp TAG này đều được Browser đưa vào giữa của window. Nếu bạn không định hướng th́ browser sẽ tự động theo thứ tự từ trái sang phải. Nhưng đừng vội thử với <left></left> hay <right></right> v́ hai cặp TAG này không tồn tại ;-)

Muốn có một trang mà tranh ở bên phải c̣n chữ ở bên trái bạn phải dùng đến TABLE. Cái đó sẽ được nhắc đến trong phần sau. Bạn có thể dùng cặp TAG <p></p> để tạo ra từng khổ của bài viết. Thực ra đây chỉ là một TAG đơn. Phần </p> ở đằng sau có thể bỏ đi cũng được. Tuy vậy đa phần các Webeditor vẫn đặt nó ở cuối một khổ. Bạn có thể định hướng khổ chữ về phía phải, trái hay vào trung tâm. Ai đă từng sử dụng Word đều biết đến điều đó, mỗi cái là không phải dùng đến TAG thôi. Bạn cũng có thể áp dụng TAG này cho bất kỳ một object nào khác như picture, video...

<p align="left"> Toàn bộ khổ chữ này sẽ hướng về phía trái </p>
<p align="center"> Toàn bộ khổ chữ này sẽ hướng vào trung tâm </p>
<p align="right"> Toàn bộ khổ chữ này sẽ hướng về bên phải </p>
<p align="right"><img src="h.clinton.gif" border="0"></p>

Cũng có thể viết như sau (không có </p>):

<p align="left"> Toàn bộ khổ chữ này sẽ hướng về phía trái
<p align="center"> Toàn bộ khổ chữ này sẽ hướng vào trung tâm
<p align="right"> Toàn bộ khổ chữ này sẽ hướng về bên phải
<p align="right"><img src="h.clinton.gif" border="0">


Tốt nhất bạn hăy [xem ví dụ]

Và sau đây là các khả năng trang trí chữ, có thể sẽ c̣n nhiều thủ thuật khác nữa nhưng cho một trang b́nh thường như của chúng ta th́ có thể gọi là tạm đủ:
  • <b>Ḍng chữ này đậm </b>

    •  
  • <strong> Ḍng này cũng đậm</strong>
     
  • <i>Ḍng chữ này nghiêng</i>
     
  • <big>Ḍng chữ này to hơn</big>
     
  • <b><i><u><big> Ḍng này vừa to, vừa nghiêng, vừa đậm, vừa gạch chân </big></u></i></b>
     
  • <small>Ḍng chữ này bé hơn</small>
     
  • <u>Ḍng này lại gạch chân</u>

    •  
  • Nếu cửa hàng bạn giảm giá từ <strike> € 20000 </strike> xuống € 15000
     
  • Tổng b́nh phương hai cạnh góc vuông bằng b́nh phương cạnh huyền:
    a    <sup>2</sup>+b<sup>2</sup>=c<sup>2</sup> (a2+b2=c2)
     
  • Công thức hóa học của nước là: H<sub>2</sub>O (H2O)

    •  
  • <em> Nếu bạn muốn nhấn mạnh điều ǵ </em>

    •  
  • Machine code: <code>100 Basic <br> 150 if....<br>then...<br>go to</code>

    •  
  • Tên phím của Keyboard: <kbd>Enter; Del; Contrl...</kbd>

    •  
  • Đưa ví dụ vào bài: <samp>Sample</samp>

    •  
  • Tên các Variables trong lĩnh vực Programming: <var>window.open("mywindow.html");</var>

    •  
  • Các trích dẫn từ những câu nói của ai đó: <cite>Học, học nữa học măi - Lê nin</cite>

    •  
  • Chỉ dành cho Netscape Browser: Chữ nhấp nháy <blink>Look at me now, i am blinking</blink>

    •  
  • Chỉ dành cho Internet explorer: Chữ chạy
    • <marquee border="0" behavior="slide" width="239" height="17" align="middle" scrolldelay="600" scrollamount="50">
      Look at me now, i am scrolling
      </marquee>
    • <marquee border="0" behavior="alternate" width="239" height="17" align="middle" bgcolor="#ffff00">
      Look at me now, i am scrolling
      </marquee>
    • <marquee border="0" width="239" height="17" align="middle">
      Look at me now, i am scrolling
      </marquee>


Khi cần một ḍng kẻ ngang qua trang web như dưới, bạn có thể dùng tag <hr> để "kẻ":
 

<hr> có thể mang những giá trị sau: "noshade" (không có bóng), width="x" (trong đó width là chiều rộng và x có thể là % ví dụ width="80%" hoặc pixel ví dụ width="600"), color="blue" (màu của ḍng kẻ), size="1" (độ đậm của ḍng kẻ). Ḍng trên được viết như sau: <hr noshade color="#0000FF" width="80%" size="1">

Thôi vậy, có lẽ thế là đủ rồi, nhiều quá lại loăng mất ;-)