CÁC LOẠI THẺ SỬ DỤNG TRONG LẬP TRÌNH HTML

**Admin** Sun Jun 19, 2011 8:15 am

CÁC LOẠI THẺ SỬ DỤNG TRONG LẬP TRÌNH HTML
1. Các thẻ xử lý đoạn
a). Thẻ phân chia đoạn
Trong HTML, các đoạn tài liệu, văn bản, hình ảnh… được phân chia bằng cặp thẻ văn bản
Thẻ có 1 số thuộc tính sau:
Align: Thuộc tính này sẽ chứa 1 trong 3 giá trị:
- center: Đoạn tài liệu sẽ được canh chỉnh vào giữa
- left: Đoạn tài liệu sẽ được canh chỉnh theo lề trái
- right: Đoạn tài liệu sẽ được canh chỉnh theo lề phải
- justify: Đoạn tài liệu sẽ được canh chỉnh theo hai bên
Ví dụ:
<HTML>
<BODY>
 Thử một tí
</BODY>
</HTML>

Style: Thuộc tính này sẽ quy định khoảng cách lề của đoạn. Trong thuộc tính này lại có các thuộc tính con, tuy nhiên các thuộc tính con này được đặt cách nhau bằng dấu chấm phẩy. Tất nhiên các bạn cũng có thể loại bỏ thuộc tính con:
- margin-left : x (x là số nguyên chỉ định chiều rộng của lề trái)
- margin-right : y (y là số nguyên chỉ định chiều rộng của lề phải)
- margin-top: z (z là số nguyên chỉ định chiều rộng của lề trên)
- margin-bottom: t(t là số nguyên chỉ định chiều rộng của lề dưới)
- line-height: u% (u: khoảng cách giữa các dòng tính theo đơn vị 100 %)
Ví dụ:
<HTML>
<BODY>
 Thử hai tí. Tí thứ 2 này xác định đoạn văn bản căn giữa, có lề trái = 10, lề phải bằng 5, lề trên = 6, lề dưới = 6. Hết tí thứ 2.
 Thử ba tí. Tí thứ 3 này xác định đoạn văn bản căn trái, các lề đặt theo mặc định của trình duyệt
 Thử ba tí. Tí thứ 3 này xác định đoạn văn bản căn trái, các lề đặt theo mặc định của trình duyệt

</BODY>
</HTML>

b. Thẻ xuống dòng
Trong HTML, các ký tự xuống dòng không được sử dụng. Để ngắt một dòng nào đó, ta dùng thẻ . Đây là 1 thẻ đơn:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>

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 

</BODY>
</HTML>

Chú ý:
Một cặp thẻ khác cũng được sử dụng để canh chỉnh đoạn tài liệu hay bảng biểu:
- <center>…</center>: Xác định canh chỉnh một đoạn tài liệu hoặc bảng biểu vào giữa trang.

2. Các thẻ liên kết:

a. Thẻ liên kết với hình ảnh:
Trong HTML, chúng ta không thể chèn trực tiếp toàn bộ ruột gan của một file hình ảnh, mà ta phải chỉ dẫn đến hình ảnh đặt bên ngoài. Để làm điều này, ta dùng thẻ <img>. Đây là 1 thẻ đơn.
Thẻ này có một số thuộc tính sau:
- Src: Xác định địa chỉ URL của hình ảnh:
- align: Xác định kiểu canh lề:
- right: Canh theo lề phải
- left:Canh theo lề trái
- center:Canh theo lề giữa.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>

<img src ="bigreen.gif" align = "right">
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 

</BODY>
</HTML>
- border: Xác định chiều dày của viền bao quanh ảnh.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>

<img src ="bigreen.gif" border ="5">
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 
</BODY>
</HTML>

b. Thẻ liên kết trang web.
Để tạo một liên kết tới một trang web khác, ta dùng cặp thẻ <a></a>. Cặp thẻ này có các thuộc tính sau:
Href: Địa chỉ URL của trang web cần liên kết tới. bạn đã có một bookmark trên trang web, bạn có thể trỏ đến vị trí của bookmark bằng cách dùng thuộc tính href với dấu # và tên bookmark.
name: Xác định tên của bookmark (điểm liên kết trong nội tại trang web).
Ví dụ, ta có 2 trang web:
Trang thứ nhất có địa chỉ là "tettrungthu.htm", có nội dung sau:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>

<img src ="bigreen.gif" border ="5">
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 
</BODY>
</HTML>

Trang thứ 2 có tên là danhsachthovui.htm, có nội dung sau:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>

Tet trung thu

</BODY>
</HTML>
Giả sử ta muốn thêm một liên kết với file "tettrungthu.htm" vào chữ Tet trung thu trong file danhsachthovui.htm, ta phải chèn cặp thẻ <a>...</a> như sau:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>

<a href ="tettrungthu.htm">Tet trung thu</a>

</BODY>
</HTML>
Chú ý: cả 2 file này phải được đặt cùng thư mục. Trong trường hợp đặt khác thư mục các bạn phải ghi rõ đường dẫn đến file kia.
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">

<img src ="bigreen.gif">
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. 
</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-, 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">

<img src ="bigreen.gif">
Trung thu l#224; t#7871;t thi#7871;u nhi T#7841;i sao ng#432;#7901;i l#7899;n l#7841;i #273;i ch#417;i nhi#7873;u. Ch#417;i nhi#7873;u th#236; s#7869; l#224;m li#7873;u L#224;m li#7873;u l#7841;i #273;#7867; ra nhi#7873;u thi#7871;u nhi 
</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ẻ …
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>
Tết trung thu

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 
</body></html>

c. Các thẻ định dạng chữ nghiêng, đậm, gạch chân:
- Định dang chữ đậm:
Cặp thẻ … 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ẻ … 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ẻ … 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>
Tết trung thu

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 
</body></html>
4. Các cặp thẻ xử lý bảng:
Các bảng trong HTML được định nghĩa như sau:
Định nghĩa 1 bảng bởi cặp thẻ <table></table>
Trong 1 bảng (table) được chia làm nhiều dòng , mỗi dòng giới hạn bởi 1 cặp thẻ <tr></tr>.
Trong mỗi dòng lại có các ô , giới hạn bởi cặp thẻ <td></td>
Chẳng hạn để định nghĩa 1 bảng gồm có 1 dòng và 3 ô, ta làm như sau:
<table>
<tr>
<td>Ô thứ nhất</td>
<td>Ô thứ 2</td>
<td>Ô thứ 3</td>
</tr>
</table>

Hoặc để định nghĩa một bảng gồm 2 dòng, mỗi dòng 3 ô:
<table>
<tr>
<td>Ô thứ nhất dòng 1</td>
<td>Ô thứ 2 dòng 1</td>
<td>Ô thứ 3 dòng 1</td>
</tr>
<tr>
<td>Ô thứ nhất dòng 2</td>
<td>Ô thứ 2 dòng 2</td>
<td>Ô thứ 3 dòng 2</td>
</tr>
</table>
Chú ý: Số lượng các ô trong các dòng phải bằng nhau, nếu 1 dòng nào đó có số ô khác với dòng khác, bảng sẽ bị "vỡ kế hoạch". Để khắc phục điều này, ta phải tính trước trong 1 bảng, số lượng tối đa các ô của 1 dòng sẽ là bao nhiêu, sau đó có thể dùng thuộc tính colspan của thẻ <td> để gộp các ô trống trong cùng 1 hàng lại với nhau.

Thuộc tính colspan sẽ chỉ định số lượng các ô được gộp vào nhau trên một hàng.
Chẳng hạn:
<table>
<tr>
<td colspan = "2" >Chập ô thứ nhất và ô thứ 2 của dòng 1</td>
<td>Ô thứ 3 dòng 1</td>
</tr>
<tr>
<td>Ô thứ nhất dòng 2</td>
<td>Ô thứ 2 dòng 2</td>
<td>Ô thứ 3 dòng 2</td>
</tr>
</table>

Một số thuộc tính có liên quan:
Thẻ Table:
- border: Xác định độ dày của khung bao quanh bảng
- bordercolor: Màu của khung bao quanh, viết dưới dạng dấu # và 6 chữ số HEX tiếp theo.
- cellspacing: Xác định khoảng cách giữa các ô trong bảng.
- width: Xác định độ rộng của bảng
- background: Xác định hình ảnh sẽ được sử dụng để làm nền cho toàn bảng
- bgcolor: Xác định màu nền của bảng, viết theo kiểu #XXXXXX (số HEX).
Thẻ <td>
- width: Độ rộng của ô
- height: Chiều cao của ô
- colspan: Xác định bao nhiêu ô tính từ ô đó sẽ được chập vào làm 1 (trên cùng 1 dòng)
- rowspan: Xác định bao nhiêu ô tính từ ô đó sẽ được chập vào làm 1 (trên cùng 1 cột).
- background: Xác định hình ảnh sẽ được sử dụng để làm nền cho ô
- bgcolor: Xác định màu nền ô, viết theo kiểu #XXXXXX (số HEX).