Các loại thẻ nâng cao trong HTML

Việc sử dụng thẻ <font> trong HTML không được tán thành và sẽ bị loại bỏ ở những phiên bản HTML mới hơn. Dù cho rất nhiều người dùng nó, nhưng bạn nên cố gắng tránh dùng nó và dùng style để thay thế.

Thẻ HTML <font>

Với một dòng code HTML như sau, bạn có thể cụ thể kích cỡ và loại font cho trình duyệt

<p><font size="2" face="Verdana">

This is a paragraph.

</font></p><p><font size="3" face="Times">

This is another paragraph.

</font></p>

Thuộc tính của font

Thuộc tính	Ví dụ	Mục đích
size="number"	size="2"	Xác định kích cỡ
size="+number"	size="+1"	Tăng kích cỡ font
size="-number"	size="-1"	Giảm kích cỡ font
face="face-name"	face="Times"	Xác định tên font
color="color-value"	color="#eeff00"	Xác định màu chữ
color="color-name"	color="red"	Xác định màu chữ

Với frame bạn có thể hiển thị nhiều trang web trên cùng một cửa sổ trình duyệt. Mỗi một tài liệu HTML được gọi là một frame, và mỗi frame đều độc lập với những frame khác.

Những nhược điểm khi sử dụng frame:

Người làm web phải theo dõi nhiều tài liệu HTML

Khó có thể in ấn toàn bộ trang web.

Thẻ frameset

Thẻ <frameset> xác định bạn sẽ chia cửa sổ trình duyệt thành những frame như thế nào. Môi một frame xác định một tập hợp các hàng hoặc cột. Giá trị của hàng hoặc cột chỉ ra diện tích của màn hình mà frame đó sẽ chiếm.

Thẻ Frame

Thẻ <frame> xác định tài liệu HTML nào sẽ được chèn vào mỗi frame.Ở ví dụ dưới đây bạn có một frameset với hai cột. Cột thứ nhất được thiết lập là chiếm 25% độ rộng của cửa sổ trình duyệt. Cột thứ hai được thiết lập sẽ chiếm 75% độ rộng của cửa sổ trình duyệt. Tài liệu html tên là "frame_a.htm" được chèn vào cột thứ nhất, và "frame_b.htm" được chèn vào cột thứ hai.

<frameset cols="25%,75%"><frame src="frame_a.htm"><frame src="frame_b.htm"></frameset>

Chú ý:

Nếu frame của bạn có đường viền thì người dùng có thể định lại kích thước bằng cách kéo nó. Để tránh việc này bạn có thể thêm noresize="noresize" vào thẻ <frame>

Thêm thẻ <noframes> cho trình duyệt không hỗ trợ frame.

Navigation frame

Ví dụ này hướng dẫn bạn cách tạo ra một mục lục (navigation) bằng frame. Frame navigation chứa một danh sách những đường link và đích là ở frame thứ hai. Tài liệu "tryhtml_contents.htm" chứa 3 đường link và code của đường link như sau

<a href ="frame_a.htm" target ="showframe">Frame a</a><br><a href ="frame_b.htm" target ="showframe">Frame b</a><br><a href ="frame_c.htm" target ="showframe">Frame c</a>

Thẻ frame

Tag	Mô Tả
<frameset>	Kiểu a set of frames
<frame>	Kiểu a sub window (a frame)
<noframes>	Kiểu a noframe section for browsers that do not handle frames
<iframe>	Kiểu an inline sub window (frame)

Bảng được định dạng bởi thẻ <table>. Một bảng được chia ra làm nhiều hàng với thẻ <tr>, môi hàng được chia ra làm nhiều cột dữ liệu với thẻ <td>. Cbữ td là chữ viết tắt của "table data", là nội dung của cột dữ liệu. Một cột dữ liệu có thể bao gồm chữ, hình ảnh, danh sách, đoạn vắn, form và bảng vv…

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

Đoạn code trên sẽ hiển thị như thế này trong cửa sổ trình duyệt

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Bảng và thuộc tính đường biên

Nếu bạn không thiết lập thuộc tính đường biên cho bảng thì bảng của bạn sẽ được hiển thị mà không có đường biên. Đôi khi nó có thể hữu dụng nhưng thường thì bạn muốn bảng của bạn có đường biên.

Để hiển thị đường biên của một bảng, bạn phải sử dụng thuộc tính đường biên.

<table border="1"><tr><td>Row 1, cell 1</td><td>Row 1, cell 2</td></tr></table>

Heading trong bảng

Heading trong một bảng được xác định bằng thẻ <th>

<table border="1"><tr><th>Heading</th><th>Another Heading</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>

<tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>

Nó sẽ hiển thị như thế này ở trên trình duyệt

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Cột trống trong bảng

Cột trống không có nội dung thì không được hiển thị tốt lắm ở hầu hết các trình duyệt.

<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td></td></tr></table>

Nó sẽ có dạng thế này trên trình duyệt

row 1, cell 1	row 1, cell 2
row 2, cell 1

Bạn chú ý rằng đường biên bao quanh cột trống bị mất (nhưng trong trình duyệt Mozilla Firefox nó sẽ hiển thị đường biên)

Để tránh điều này xảy ra, bạn thêm một non-breaking space (&nbsp;) vào cột trống đó, để làm cho đường biên của nó được hiện thỉ.

<table border="1"><tr>

<td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>&nbsp;</td></tr></table>

Nó sẽ hiển thị như sau ở trình duyệt

row 1, cell 1	row 1, cell 2
row 2, cell 1

Chú ý:

Loại thẻ <thead>,<tbody> and <tfoot> ít khi được sử dụng, bởi vì nó không phải là tính năng được.

Thẻ table

Tag	Mô Tả
<table>	Vẽ bảng
<th>	hàng đầu của bảng
<tr>	hàng trong bảng
<td>	ô trong hàng
<caption>	nhãn của bảng
<colgroup>	nhóm các cột
<col>	Định các thuộc tính của cột
<thead>	Hàng Đầu bảng
<tbody>	Thân của bảng
<tfoot>	Hàng cuối bảng

HTML form được sử dụng để chọn những dữ liệu nhập vào khác nhau của người dùng.

Form

Một form là một vùng mà nó bao gồm những thành phần của form. Thành phần của form là những thành phần cho phép người dùng có thể điền thông tin như là trường chữ, menu thả xuống, nút radio, và các hộp kiểm vào một form.

Một form được xác định bởi thẻ <form>

<form><input><input></form>

Nhập liệu

Thẻ form được sử dụng nhiều nhất là thẻ <input>. Loại dữ liệu nhập vào sẽ được xác định bởi thuộc tính của nó. Những trường nhập liệu được sử dụng nhiều nhất được giải thích ở dưới đây.

Text field

Text field được sử dụng khi bạn muốn người dùng đánh chữ, số v.v.. vào một form.

<form>First name:

<input type="text" name="firstname">

<br>Last name:

<input type="text" name="lastname">

</form>

Nó sẽ xuất hiện như sau trong trình duyệt

First name:

Last name:

Bạn chú ý rằng bản thân của form thì bị ẩn đi. Hơn nữa trên hầu hết các trình duyệt trường text được mặc định là 20 ký tự.

Nút radio

Nút radio được sử dụng khi bạn muốn người dùng chọn một trong những lựa chọn bạn đưa ra.

<form><input type="radio" name="sex" value="male"> Male

<br><input type="radio" name="sex" value="female"> Female

</form>

Nó sẽ xuất hiện như sau trên trình duyệt

Male

Female

Chú ý rằng chỉ có một lựa chọn có thể được chọn.

Hộp kiểm

Hộp kiểm được sử dụng khi bạn muốn người chọn có thể chọn nhiều lựa chọn hơn.

<form><input type="checkbox" name="bike">

I have a bike

<br><input type="checkbox" name="car">

I have a car

</form>

Nó sẽ như sau trong trình duyệt

I have a bike

I have a car

Thuộc tính hoạt động cùa form và nút Submit.

Khi người dùng nhấp chuột vào nút "submit", nội dung của form đó sẽ được gửi đến một tệp tin khác. Thuộct ính hoạt động của form xác định tên của file mà nó sẽ gửi nội dung đến. Tệp tin đó được xác định trong thuộc tính hoạt động của form và thường thì nó sẽ có những hành động với dữ liệu nó nhận được.

<form name="input" action="html_form_action.asp"

method="get">Username:

<input type="text" name="user"<input type="submit" value="Submit">

</form>

Trong trình duyệt nó nhìn như sau

Username:

Khi bạn gõ tên bạn vào trường chữ ở trên và nhấp vào nút Submit, bạn sẽ gửi thông tin đó vào một trang gọi là "html_form_action.asp". Trang đó sẽ chỉ cho bạn thấy dữ liệu nhận được.

Thẻ của form

Tag	Mô Tả
<form>	Kiểu form để nhập thông tin
<input>	Một ô nhập liệu
<textarea>	Vùng nhập liệu có nhiều hàng
<label>	Nhãn
<fieldset>	Nhóm các vùng nhập với nhau
<legend>	nhản của 1 fieldset
<select>	Danh sách chọn
<optgroup>	nhóm các phần tử trong danh sách chọn
<option>	1 phần tử trong danh sách chọn
<button>	Nút bấm
<isindex>	Hết hỗ trợ. Dùng <input> thay thế