Cấu trúc trang web HTML

Cấu trúc cơ bản của một tài liệu HTML như sau:


<!DOCTYPE html>
<html>
<head>
Chứa các khai báo như tiêu đề, mã kí tự,…
</head>
<body>
Nội dung trang web
</body>
</html>

Thẻ DOCTYPE

<!DOCTYPE> phải được đặt đầu tiên trong HTML, nó đứng trước thẻ <html>. Khai báo <!DOCTYPE> không phải là 1 thẻ HTML, nó là chỉ dẫn cho trình duyệt biết phiên bản HTML được sử dụng. Trong HTML4.01, <!DOCTYPE> đề cập đến DTD, bởi vì HTML 4.01 dựa trên SGML. DTD xác định các quy tắc cho các ngôn ngữ đánh dấu để trình duyệt hiển thị một các chính xác. HTML5 không dựa trên SGML, do đó nó không yêu cầu tham chiếu tới DTD.

Các phiên bản HTML

Phiên bản	Năm
HTML	1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML	2000
HTML5	2014

Thẻ html

Xác định một văn bản dạng HTML. Bắt đầu bằng <html> và kết thúc bằng </html>

Thẻ head

Bên trong phần tử <head> chứa siêu dữ liệu (metadata) – là dữ liệu mô tả dữ liệu.
Các phần tử trong <head> dùng để mô tả siêu dữ liệu gồm : <title>, <style>, <meta>, <link>,…
là phần đầu trong cấu trúc tài liệu HTML.

Thẻ title

Nằm trong thẻ head
Định nghĩa tiêu đề của trang web. Thẻ là cần thiết trong tất cả các trang “HTML/XHTML”.
Tác dụng:
- Xác định tiêu đề trên thanh công cụ của trình duyệt
- Cung cấp tiêu đề cho trang khi nó được bổ sung vào mục yêu thích
- Hiển thị tiêu đề cho trang web trong kết quả của công cụ tìm kiếm

Ví dụ:


<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề….</title>
</head>
<body>
Nội dung……
</body>
</html>

Thẻ meta

Thường được sử dụng để mô tả trang, từ khóa, tác giả của tài liệu, sửa đổi lần cuối…

Có thể được sử dụng bởi các trình duyệt (cách để hiển thị nội dung hoặc tải lại trang), các công cụ tìm kiếm (từ khóa), hoặc những dịch vụ web khác.

Thẻ luôn nằm trong head

Nội dung thẻ này không được hiển thị trên trang.

Ví dụ:

Định nghĩa từ khoá cho các công cụ tìm kiếm


<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

Định nghĩa một mô tả cho trang web


<meta name="description" content="Trang web đầu tiên của tôi">

Định nghĩa tập kí tự được dùng


<meta charset="UTF-8">

Định nghĩa tác giả của trang web


<meta name="author" content="Trần ngọc Minh">

Thẻ link

Xác định mối quan hệ giữa trang web với các tệp tin bên ngoài.
Thẻ thường được sử dụng để liên kết đến tập tin CSS.
Nằm trong thẻ head

Ví dụ: liên kết trang web hiện tại với tập tin CSS tên mystyle.css


<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề….</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
Nội dung……
</body>
</html>

Thẻ style

Được sử dụng để định nghĩa CSS kiểu inline cho trang web.
Nằm trong thẻ head

Ví dụ:


<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề….</title>
<link rel="stylesheet" href="mystyle.css">
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<body>
Nội dung……
</body>
</html>

Thẻ script

Dùng để định nghĩa ngôn ngữ hướng client Javascript

Ví dụ:


<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề….</title>
<link rel="stylesheet" href="mystyle.css">
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
<script>
function myFunction {
document.getElementById("demo").innerHTML =
"Hello JavaScript!";
}
</script>
</head>
<body>
Nội dung……
</body>
</html>

Thẻ base

Xác định URL cơ sở cho tất cả các URL tương đối của cả trang.

Ví dụ:


<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề….</title>
<link rel="stylesheet" href="mystyle.css">
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
<script>
function myFunction {
document.getElementById("demo").innerHTML =
"Hello JavaScript!";
}
</script>
<base href="http://www.w3schools.com/images/" target="_blank">
</head>
<body>
Nội dung……
</body>
</html>

Thẻ BODY

Thẻ <body> định nghĩa nội dung chính của trang web.
Thẻ <body> bao gồm tất cả các thành phần của trang HTML, như text, liên kết, hình ảnh, bảng, danh sách,…

Định dạng văn bản

Văn bản thuần (plain text)

Là văn bản chưa được định dạng. Ví dụ đoạn mã HTML sau hiển thị các đoạn văn bản chưa định dạng:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p> Đây là đoạn văn bản </p>
<p> Đây là đoạn văn bản khác </p>
</body>
</html>

Soạn thảo bằng Notepad++ sẽ trông như sau:

Hiển thị bằng trình duyệt web Chrome:

Đoạn văn bản

Thẻ <p> định nghĩa một đoạn văn bản.
Thẻ <p> tự động tạo một khoảng trắng trước và sau nó, khoảng trắng này tùy trình duyệt sẽ khác nhau.
Bên trong thẻ <p> có thể chứa các tag thuộc nhóm inline như <a>, <span>, <img>

Cấu trúc phần tử p:


<p>Nội dung đoạn văn bản</p>

Ví dụ:

Mã Html viết:


<p>This is a paragraph</p>

Hiển thị trình duyệt:

Các thẻ định dạng văn bản

Thẻ	Mô tả
<b>	Tô đậm văn bản
<i>	In nghiêng văn bản
<em>	Xác định đoạn văn bản được nhấn mạn
<smal>	Tạo chữ nhỏ
<strong>	Tạo chữ đậm (giống <b>)
<sub>	Tạo văn bản lệch dưới phải, ví dụ H₂
<sup>	Tạo văn bản lệch trên phải, ví dụ e = mc²
<ins>	Gạch chân văn bản
<del>	Gạch ngang qua văn bản

Heading (tiêu đề)

Các thẻ heading: trong HTML, thẻ <h1> đến <h6> được sử dụng để làm tiêu đề. <h1> đến <h6> xác định tiêu đề theo mức độ quan trọng giảm dần.

Ví dụ:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
<h4>This is a heading 4</h4>
<h5>This is a heading 5</h5>
<h6>This is a heading 6</h6>
</body>
</html>

Kết quả >

Khi sử dụng các thẻ heading cần chú ý:

Sau mỗi dòng tiêu đề HTML sẽ tự động thêm mới dòng trắng vào trước và sau của dòng tiêu đề.
Thẻ tiêu đề là quan trọng.
Chỉ sử dụng các <h1> đến <h6> để làm tiêu đề. Không sử dụng các thẻ này để làm cho đoạn văn bôi đậm hoặc lớn hơn.
Công cụ tìm kiếm sử dụng những thẻ tiều đề để đánh chỉ mục cấu trúc và nội dung của trang web.
Thẻ <h1> nên sử dụng như các đề mục chính, tiếp theo là thẻ <h2> sau đó là <h3>

Siêu liên kết

Thẻ a

Thẻ <a> định nghĩa một siêu liên kết (link), được sử dụng để liên kết từ trang này đến trang khác.
Một liên kết (link) là 1 từ, 1 câu hoặc 1 hình ảnh mà ta có thể click vào để chuyển đến một trang khác.
Khi di chuyển con trỏ đến liên kết (link), con trỏ chuột sẽ biến thành bàn tay.
Thuộc tính quan trong nhất trong thẻ <a> là thuôc tính “href”, nó chỉ ra liên kết tới trang cần chuyển.

Siêu liên kết

Mặc định, các liên kết xuất hiện như sau trong tất cả các trình duyệt:

Một liên kết được gạch dưới và màu xanh
Một liên kết đã được mở nó được gạch dưới và màu tím
Một liên kết được kích hoạt nó được nhấn mạnh và màu đỏ

Điểm neo

Điểm neo tự định nghĩa

Tạo điểm neo bằng thẻ <a> : <a name=”anchor1″></a> (với anchor1 là tên điểm neo) (ví dụ : tạo điểm neo là ở đầu trang web).
Tại liên kết nào bạn muốn khi người dùng click vào thì sẽ quay về vị trí điểm neo mà bạn đã tạo trước đó (ví dụ : đang đứng ở cuối trang, khi click vào “về đầu trang” thì lập tức quay về điểm neo ở đầu trang): tạo thẻ <a href=”#anchor1″>Về đầu trang</a>

Ví dụ:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<a name="dau"></a>
<table width="500" height="900" border="1" align="center">
<tr>
<td valign= "top"><a href= "#cuoi">Về cuối
trang</a></td>
</tr>
<tr>
<td valign= "bottom"><a href= "#dau">Về đầu
trang</a></td>
</tr>
</table>
<a name="cuoi"></a>
</body>
</html>

Điểm neo định nghĩa sẵn

Cũng có thể tạo mối liên kết trong bản thân tài liệu siêu văn bản, từ phần này đến phần khác. Điều này rất có ích khi tài liệu có kích thước lớn. Ta có thể tạo mục lục toàn bộ nội dung trên phần đầu trang gồm tên các chương và liên kết từng tên chương đến phần nội dung tương ứng.

Ví dụ:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p><a href= "#C4">Jump to Chapter 4</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2 id= "C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>

Xem kết quả >

Thành phần đa phương tiện

Hình ảnh

Hình ảnh dữ liệu

Là hình ảnh cung cấp thông tin nào đó cho người xem như thông tin sản phẩm, thông tin cá nhân,…

Hình ảnh trang trí

Chỉ có tính trang trí cho website.

Thẻ img

Cú pháp:

Thẻ định nghĩa hình ảnh trong HTML là img.
Thẻ img là rỗng, chỉ chứa thuộc tính và không có thẻ đóng.

Cách viết:


<img một số thuộc tính>

Một số thuộc tính cơ bản đi kèm thẻ img:

Thuộc tính	Mô tả
*src*	Xác định đường dẫn (url) của hình ảnh
*alt*	Cung cấp thông tin về hình ảnh cho người xem nếu vì một lý do nào đó mà hình ảnh không được hiển thị
*width*	Xác định chiều rộng của ảnh
*height*	Xác định chiều cao của ảnh

Ví dụ 1: nếu tập tin HTML và tập tin ảnh (anh.png) nằm trên cùng một thư mục, chiều rộng ảnh 200px, chiều cao ảnh 150px:


<img src="anh.png" alt="anh khong tim thay" width="200" height="150">

Kết quả:

Nếu ảnh không tìm thấy thì kết quả sẽ thế này:

Ví dụ 2: nếu tập tin HTML và tập tin ảnh (anh.png) không nằm trên cùng một thư mục (thư mục Image, cùng ổ đĩa), chiều rộng ảnh 200px, chiều cao ảnh 150px và dùng đường dẫn tương đối trong thuộc tính src:


<img src="Image/anh.png" alt="anh khong tim thay" width="200" height="150">

Ví dụ 3: nếu tập tin HTML và tập tin ảnh (anh.png) không nằm trên cùng một thư mục (trong ổ đĩa D và nằm trong thư mục Image), chiều rộng ảnh 200px, chiều cao ảnh 150px và dùng đường dẫn tuyệt đối trong thuộc tính src:


<img src="D:/Image/anh.png" alt="anh khong tim thay" width="200" height="150">

Ví dụ 4: nếu không dùng thuộc tính width và height thì ảnh sẽ hiển thị với kích thước mặc định:


<img src=" anh.png" alt="anh khong tim thay">

Âm thanh, phim, flash

Âm thanh (audio)

Tập tin âm thanh có một số định dạng phổ biến hiện nay là mp3, ogg và wav. Các trình duyệt hỗ trợ cho các định dạng này như sau:

Trình duyệt	MP3	Wav	Ogg
IE	Hỗ trợ	Không hỗ trợ	Không hỗ trợ
Chrome	Hỗ trợ	Hỗ trợ	Hỗ trợ
Firefox	Hỗ trợ	Hỗ trợ	Hỗ trợ
Safari	Hỗ trợ	Hỗ trợ	Không hỗ trợ
Opera	Hỗ trợ	Hỗ trợ	Hỗ trợ

Dùng thẻ <audio> để định nghĩa tập tin âm thanh. Phiên bản trình duyệt web hỗ trợ thẻ <audio> như sau:

Trình duyệt	Phiên bản (trở lên) hỗ trợ thẻ <audio>
IE	9.0
Chrome	4.0
Firefox	3.5
Safari	4.0
Opera	10.5

Ví dụ:


<audio controls>

<source src="horse.ogg" type="audio/ogg">

<source src="horse.mp3" type="audio/mpeg">

Trình duyệt web không hỗ trợ thẻ <audio>

</audio>

Các giá trị của thuộc tính controls gồm: play, pause, seeking và volume; thuộc tính source xác định đường dẫn các tập tin âm thanh.

(Có thể tham khảo chi tiết hơn về cách dùng thẻ <audio> và các thuộc tính của nó tại http://www.w3schools.com/html/html5_audio.asp )

Phim (video)

Một số định dạng phổ biến hiện nay của các tập tin phim (video) như mp4, webm và ogg. Các trình duyệt hỗ trợ cho các định dạng này như sau:

Trình duyệt	MP4	WebM	Ogg
IE	Hỗ trợ	Không hỗ trợ	Không hỗ trợ
Chrome	Hỗ trợ	Hỗ trợ	Hỗ trợ
Firefox	Hỗ trợ	Hỗ trợ	Hỗ trợ
Safari	Hỗ trợ	Không hỗ trợ	Không hỗ trợ
Opera	Hỗ trợ (từ Opera 25)	Hỗ trợ	Hỗ trợ

Dùng thẻ <video> để định nghĩa tập tin phim. Phiên bản trình duyệt web hỗ trợ thẻ <video> như sau:

Trình duyệt	Phiên bản (trở lên) hỗ trợ thẻ <audio>
IE	9.0
Chrome	4.0
Firefox	3.5
Safari	4.0
Opera	10.5

Ví dụ:


<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Trình duyệt không hỗ trợ thẻ <video>
</video>

Các giá trị của thuộc tính controls gồm: play, pause, seeking và volume; thuộc tính source xác định đường dẫn các tập tin phim; width, height xác định kích thước vùng hiển thị tập tin phim trên trang web.

(Có thể tham khảo chi tiết hơn về cách dùng thẻ <video> và các thuộc tính của nó tại http://www.w3schools.com/html/html5_video.asp )

Flash

Các tập tin flash thường có định dạng là swf và có thể được thêm vào trang web bằng thẻ được hỗ trợ bởi tất cả các trình duyệt.

Ví dụ về nhúng tập tin flash (quangcao.swf) vào trang web bằng :

Thuộc tính data (giống source) xác định đường dẫn các tập tin flash; width, height xác định kích thước vùng hiển thị tập tin flash trên trang web.

Ngoài việc dùng để nhúng các tập tin flash, <object> còn có thể dùng để nhúng các tập tin có định dạng khác như Java applets, PDF readers, v.v. Chi tiết có thể tham khảo thêm tại http://www.w3schools.com/html/html_object.asp.

Danh sách

Danh sách không thứ tự

Danh sách không thứ tự trong HTML được định nghĩa bằng thẻ <ul>; mỗi mục của danh sách bắt đầu bằng thẻ <li>. Măc định, các mục trong danh sách không thứ tự được đánh dấu bởi các dấu chấm tròn đen (bullets).

Ví dụ định nghĩa danh sách không thứ tự:


<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Xem kết quả >

Chúng ta có thể định nghĩa lại các kí hiệu cho các mục trong danh sách với thuộc tính style, cụ thể như sau:

Style	Mô tả
list-style-type:disc	Các mục trong danh sách được đánh dấu bằng các dấu chấm đen tròn
list-style-type:circle	Các mục trong danh sách được đánh dấu bằng các dấu tròn
list-style-type:square	Các mục trong danh sách được đánh dấu bằng các dấu vuông
list-style-type:none	Các mục trong danh sách không được đánh dấu

Ví dụ dùng thuộc tính style

Ví dụ 1:


<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Xem kết quả >

Ví dụ 2:


<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Xem kết quả >

Ví dụ 3:


<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li> </ul>

Xem kết quả >

Danh sách có thứ tự

Danh sách có thứ tự trong HTML được định nghĩa bằng thẻ <ol>; mỗi mục của danh sách bắt đầu bằng thẻ <li>. Măc định, các mục trong danh sách có thứ tự được đánh dấu bởi 1., 2., 3.,….

Ví dụ định nghĩa danh sách có thứ tự:


<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Xem kết quả >

Chúng ta có thể định nghĩa lại các kí hiệu cho các mục trong danh sách với thuộc tính type, cụ thể như sau:

Type	Mô tả
type=”1″	Các mục trong danh sách được đánh dấu bằng số (mặc định)
type=”A”	Các mục trong danh sách được đánh dấu bằng chữ cái in hoa
type=”a”	Các mục trong danh sách được đánh dấu bằng chữ cái in thường
type=”I”	Các mục trong danh sách được đánh dấu bằng số La Mã in hoa
type=”i”	Các mục trong danh sách được đánh dấu bằng số La Mã in thường

Ví dụ dùng thuộc tính Type

Ví dụ 1:


<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Xem kết quả >

Ví dụ 2:


<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Xem kết quả >

Ví dụ 3:


<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Xem kết quả >

Ví dụ 4:


<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Xem kết quả >

Ví dụ 5:


<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Xem kết quả >

Danh sách định nghĩa

Danh sách định nghĩa bắt đầu bằng các thẻ <dl>, <dt> và <dd>, với:

<dl> viết tắt của chữ “definition list” có nghĩa là sự xác định (hay định nghĩa) danh sách.
<dt> viết tắt của chữ “defines an item” có nghĩa là xác định (hay định nghĩa) một mục.
<dd> viết tắt của chữ “defines describe an item” có nghĩa là xác định (hay định nghĩa) một mô tả của một mục.

Ví dụ về danh sách định nghĩa:


<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Xem kết quả >

Bảng biểu

Tạo bảng

Thẻ <table> được dùng để tạo một bảng HTML.

Cú pháp:


<table>
…
</table>

Cấu trúc của bảng


<table>
<tr> <!-- Hàng tiêu đề -->
<th> …</th>
<th>…</th>
……
</tr>
<tr> <!-- Hàng dữ liệu -->
<td> …</td>
<td>…</td>
……
</tr>
…………
</table>

Ví dụ:


<table>
<tr> <!-- Hàng tiêu đề -->
<th> Tên </th>
<th> Tuổi </th>
<th> Giới tính </th>
</tr>
<tr> <!-- Hàng dữ liệu thứ 1 -->
<td> Minh </td>
<td> 30 </td>
<td> Nam </td>
</tr>
<tr> <!-- Hàng dữ liệu thứ 2 -->
<td> Dũng </td>
<td> 55 </td>
<td> Nam </td>
</tr>
</table>

Xem kết quả >

Dùng thuộc tính border và style để tạo viền và độ rộng cho bảng, bổ sung vào ví dụ trên như sau:


<table border="1" style="width:100%" >
<tr> <!-- Hàng tiêu đề -->
<th> Tên </th>
<th> Tuổi </th>
<th> Giới tính </th>
</tr>
<tr> <!-- Hàng dữ liệu thứ 1 -->
<td> Minh </td>
<td> 30 </td>
<td> Nam </td>
</tr>
<tr> <!-- Hàng dữ liệu thứ 2 -->
<td> Dũng </td>
<td> 55 </td>
<td> Nam </td>
</tr>
</table>

Kết quả >

Đoạn mã trên tạo bảng với viền (border) có độ dày 1 pixel và có độ rộng 100% (chiều rộng trang web), kết quả sẽ như sau:

Thẻ thead, tfoot, tbody

Thẻ <thead> được dùng để nhóm các thành phần đầu trong <table>.
Thẻ <thead> nên được kết hợp với tag <tfoot> và tag <tbody>, trong đó:
- Thẻ <tfoot> được dùng để nhóm các thành phần footer (phần chân) trong <table>.
- Thẻ <tbody> dùng để nhóm các thành phần nội dung trong <table>.

Ví dụ về dùng <thead>, <tfoot>, <tbody>:


<table>
<thead> <!—phần thead -- >
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot> <!—phần tfoot -- >
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody> <!—phần tbody -- >
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody> </table>

Dữ liệu của bảng

Thẻ <td> xác định phần tử nội dung của table

Dòng dữ liệu

Thẻ <tr> xác định hàng của table.

Ô dữ liệu

Thẻ <td> được dùng để tạo một phần tử nội dung trong bảng HTML
Thuộc tính colspan: Xác định số cột được gộp trong một phần tử <table>
Thuộc tính rowspan: Xác định số hàng được gộp trong một phần tử <table>

Ví dụ về dùng các thuộc tính rowspan:


<table border = '1'>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2"> $50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>

Kết quả >

Ví dụ về dùng các thuộc tính colspan:


<table border = '1'>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$100</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>

Kết quả >

Biểu mẫu

Tạo biểu mẫu

Thẻ <form> được dùng để tạo một “biểu mẫu” HTML cho người dùng.
Thẻ <form> được dùng để truyền dữ liệu lên máy chủ.
Thẻ <form> không nên dùng để điều khiển layout.
Cú pháp:


<form>
….các thành phần của form
</form>

Nhập liệu dạng text

Thẻ <textarea> dùng để nhập nhiều dòng văn bản.
Thẻ <textarea> có thể chứa được nhiều ký tự và làm cho văn bản có một chiều rộng cố định (thường là font Courier).
Kích thước của vùng văn bản có thể được xác định bởi các thuộc tính rows và cols, và cũng có thể điều chỉnh thông qua width và height trong css

Cú pháp


<textarea>………</textarea>

Ví dụ: khai báo vùng textarea 10 hàng, 30 cột


<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>

Kết quả >

Input dạng text: Sử dụng để nhập các văn bản ngắn và chỉ một hàng.

Ví dụ: tạo input text rỗng và chứa tối đa 30 kí tự


<input type="text" value="" size="30">

Kết quả >

Nhập liệu dạng lựa chọn

Sử dụng cho nhiều lựa chọn khác nhau ta dùng kiểu input checkbox

Cú pháp:


<input type="checkbox">

Ví dụ :

<input type="checkbox">Sport
<br>
<input type="checkbox">Music

Kết quả >

• Sử dụng cho một chọn lựa duy nhất ta dùng kiểu input radio.
Cú pháp:


<input type="radio">

Ví dụ :


<input type="radio">Male
<br>
<input type="radio">Female

Kết quả >

Nhập liệu dạng lựa chọn từ danh sách

Thẻ <select> được dùng để tạo một danh sách chọn lựa (danh sách thả xuống).
Thẻ <option> bên trong thành phần select, định nghĩa giá trị tùy chọn trong danh sách.
Thẻ <select> và <option> được thường được đặt trong <form> cho người dùng lựa chọn danh sách.

Ví dụ:


<select>
<option>Danh sách 01</option>
<option>Danh sách 02</option>
<option>Danh sách 03</option>
<option>Danh sách 03</option>
</select>

Kết quả >

Các dạng dữ liệu khác

Image: input dạng image sử dụng như một nút nhấn bằng hình ảnh.

Ví dụ:


<input type="image" src="images/btn_submit.jpeg" alt="SUBMIT" name=""/>

Kết quả >

Password: với input dạng password các text hiển thị bên trong dưới dạng password.

Ví dụ:


<input type="password" name="" value="" size="30" />

Kết quả >

Hidden: dạng này sẽ không hiển thì ra trình duyệt. Được sử dụng khi không muốn dữ liệu bị thay đổi.


<input type="hidden" name="" value="" size="30" />

Các loại nút nhấn

Submit: dùng để gửi dữ liệu lên server, dữ liệu được gửi thông qua thuộc tính action trong <form>.

Ví dụ:


<input type="submit" name=""" value="Submit" />

Kết quả:

Reset: dùng để reset lại giá trị trong <form>.

Ví dụ:


<input type="reset" name=""" value="Reset" />

Kết quả:

Button: sử dụng như một nút nhấn.

Ví dụ:


<input type="button" name="" value="Click" />

Kết quả:

Học HTML & CSS >

Trần Ngọc Minh Notes

Stay hungry, stay foolish!