Pages

07 November 2011

Tự Học PHP - Level 2 - Bài 2: Căn bản về HTML - Các thẻ xử lý font chữ

Nguồn:http://tutorial.phpvn.org

3. Các thẻ xử lý font chữ:
a. Thẻ Meta:
Thẻ này có nhiều thuộc tính khác nhau và cũng làm nhiều nhiệm vụ khác nhau. Tuy nhiên ở đây tôi chỉ nói về cách ứng dụng thẻ này để hiển thị các đoạn mã tiếng Việt.

Trước đây các loại font chữ tiếng Việt rất phong phú, điều này khiến cho người sử dụng tiếng Việt trên thế giới phải than trời ầm ỹ cả lên. Rất may là tại thời điểm này, hầu hết các font chữ tiếng Việt thời "đồ đá" không còn được ứng dụng trong thiết kế web nữa, thay vào đó là các chuẩn quốc tế Unicode.
Ở đây tôi xin giới thiệu 2 chuẩn Unicode tiếng Việt phổ biến và cách sử dụng thẻ meta cho từng trường hợp cụ thể:
- Mã UTF-8: Là mã font Unicode rút gọn (biểu diễn font chữ theo kiểu 8 bit. Khi ta khai báo:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Trình duyệt sẽ hiểu là từ khi đọc được dòng chữ này, nó sẽ giải mã các ký tự theo kiểu UTF-8. Và khi bạn gửi dữ liệu từ mẫu biểu của HTML đi, dữ liệu đó cũng phải được mã hoá theo tiêu chuẩn UTF-8.

Chẳng hạn, để trình duyệt hiển thị đúng bài thơ:

Trung thu là tết thiếu nhi
Tại sao người lớn lại đi chơi nhiều
Chơi nhiều thì sẽ làm liều
Làm liều lại đẻ ra nhiều thiếu nhi.

Thì đoạn mã HTML do ta sinh ra phải có dạng:

<HTML>
<BODY>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<p align="left" style="margin-left : 30">
<img src ="bigreen.gif">
Trung thu là tết thiếu nhi<BR>Tại sao ngÆ°á» i lá»›n lại Ä'i chÆ¡i nhiá» u <BR>ChÆ¡i nhiá» u thà sẽ là m liá» u<BR>Là m liá» u lại Ä'ẻ ra nhiá» u thiếu nhi.<BR></p>
</BODY>
</HTML>
Tất nhiên chúng ta có thể sử dụng chương trình Vietkey hoặc Unikey để gõ tiếng việt theo kiểu UTF-8 (sử dụng bảng mã Unicode UTF-8), nhưng sẽ hơi khó chịu một tí .

- Mã UTF-16 bít: Là mã font Unicode 16 bít. Ta phải khai báo như sau:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
Trình duyệt sẽ hiểu là từ khi đọc được dòng chữ này, nó sẽ giải mã các ký tự theo kiểu UTF-16 bit. Và khi bạn gửi dữ liệu từ mẫu biểu của HTML đi, dữ liệu đó cũng phải được mã hoá theo tiêu chuẩn UTF- 16 bít trên.

Chẳng hạn, để trình duyệt hiển thị đúng bài thơ:

Trung thu là tết thiếu nhi
Tại sao người lớn lại đi chơi nhiều
Chơi nhiều thì sẽ làm liều
Làm liều lại đẻ ra nhiều thiếu nhi.

Thì đoạn mã HTML do ta sinh ra phải có dạng:

<HTML>
<BODY>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<p align="left" style="margin-left : 30">
<img src ="bigreen.gif">
Trung thu l#224; t#7871;t thi#7871;u nhi<BR>T#7841;i sao ng#432;#7901;i l#7899;n l#7841;i #273;i ch#417;i nhi#7873;u.<BR>Ch#417;i nhi#7873;u th#236; s#7869; l#224;m li#7873;u<BR>L#224;m li#7873;u l#7841;i #273;#7867; ra nhi#7873;u thi#7871;u nhi<BR></p>
</BODY>
</HTML>
Tất nhiên chúng ta có thể sử dụng chương trình Vietkey hoặc Unikey để gõ tiếng Việt theo chuẩn này với hệ thống bảng mã Unicode UCS2

Chú ý:
1: Một số chương trình soạn thảo có hỗ trợ chế độ hiển thị mã tiếng Việt trong quá trình soạn thảo. Khi đó nếu các bạn mở chế độ mã HTML mà vẫn đọc được tiếng Việt như thường thì các bạn cứ ung dung gõ tiếng Việt theo kiểu Unicode thông thường là được. Còn nếu nó hiển thị ra các ký tự loằng ngoằng thì các bạn phải đoán mò ra dạng chuẩn mã hoá font của nó và sử dụng chế độ gõ chữ tương ứng.
2: Trong tài liệu này tôi sẽ đánh tiếng Việt thông thường, các bạn sẽ phải chịu trách nhiệm xử lý mã tiếng Việt trong các đoạn ví dụ.

b) Cặp thẻ <font>…</font>
Cặp thẻ này quy định tên font, màu sắc, kích cỡ font. Nó có những thuộc tính sau:
Face: Tên của font, chẳng hạn: Arial, .VnTime, Times New Roman
Size: Kích cỡ của font, bé nhất là 1.
Color: Màu sắc cùa font, bao gồm dấu # và 6 chữ số hex tiếp theo quy định mã màu RGB
Ví dụ:
<HTML>
<BODY>
<p align ="center"><font face="Arial" size="5" color="#800000">Tết trung thu</font></p>
<p align="left" style="margin-left : 30"><font size ="2" name ="Verdana">
Trung thu là tết thiếu nhi<BR>Tại sao người lớn lại đi chơi nhiều <BR>Chơi nhiều thì sẽ làm liều<BR>Làm liều lại đẻ ra nhiều thiếu nhi<BR></font></p>
</body></html>

c. Các thẻ định dạng chữ nghiêng, đậm, gạch chân:
- Định dang chữ đậm:
Cặp thẻ <B>…</B> xác định đoạn văn bản ở giữa sẽ bị in đậm. Cặp thẻ này không có tham số kèm theo.
- Định dang chữ nghiêng:
Cặp thẻ <i>…</i> xác định đoạn văn bản ở giữa sẽ bị in nghiêng. Cặp thẻ này không có tham số kèm theo.
- Định dang chữ gạch chân:
Cặp thẻ <u>…</u> xác định đoạn văn bản ở giữa sẽ bị gạch chân. Cặp thẻ này không có tham số kèm theo.
Ví dụ:
<HTML>
<BODY>
<p align ="center"><font face="Arial" size="5" color="#800000"><B><I>Tết trung thu</font></I></B></p>
<p align="left" style="margin-left : 30"><font size ="2" name ="Verdana">
Trung thu là tết thiếu nhi<BR>Tại sao người lớn lại đi chơi nhiều <BR>Chơi nhiều thì sẽ làm liều<BR>Làm liều lại đẻ ra nhiều thiếu nhi<BR></font></p>
</body></html>