Professional Documents
Culture Documents
Chương 2 - Ngôn NG HTML
Chương 2 - Ngôn NG HTML
3
KHOA CÔNG NGHỆ THÔNG TIN
Giới thiệu
Một tài liệu HTML đơn giản <!DOCTYPE html>
<html>
<head>
• <!DOCTYPE html> xác định là tài liệu là HTML5 <title>Page Title</title>
• <html> là phần tử gốc của trang HTML </head>
<body>
• <head> chứa các siêu thông tin (meta) về trang
• <title> xác định một tiêu đề cho trang HTML (nó <h1>My First Heading</h1>
được hiển thị trong thanh tiêu đề của trình <p>My first paragraph.</p>
duyệt)
</body>
• <body> xác định phần than của tài liệu, và là </html>
vùng chứa tất cả các nội dung thấy được, như là
các đề mục, đoạn văn, hình ảnh, liên kết, bảng
biểu, danh sách...
• <h1> xác định một đề mục lớn
• <p> xác định đoạn văn
4
KHOA CÔNG NGHỆ THÔNG TIN
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
</body>
</html>
5
KHOA CÔNG NGHỆ THÔNG TIN
Giới thiệu
Phần tử (element) HTML là gì?
• Một phần tử HTML được xác định bởi một thẻ bắt đầu (start tag), một vài nội dung, và
một thẻ kết thúc (end tag):
<tên thẻ> nội dung ở đây... </tên thẻ>
• Phần tử HTML là mọi thứ từ thẻ bắt đầu cho đến thẻ kết thúc:
<h1>Đề mục đầu tiên của tôi</h1>
<p>Đoạn văn đầu tiên của tôi.</p>
• Chú ý: Một số phần tử HTML không có nội dung (như phần tử <br> dùng để xuống
dòng). Những phần tử này được gọi là những phần tử rỗng (empty element). Những
phần tử rỗng không có thẻ kết thúc!
<!DOCTYPE html>
<html>
<body>
</body>
</html>
7
KHOA CÔNG NGHỆ THÔNG TIN
HTML Cơ Bản
Khai báo <!DOCTYPE>
• Khai báo <!DOCTYPE> diễn tả loại (type) tài liệu, và giúp cho trình duyệt hiển thị trang
web chính xác.
• Nó chỉ phải xuất hiện một lần, ở đầu trang (trước bất kỳ thẻ HTML nào).
• Khai báo <!DOCTYPE> không phân biệt chữ hoa – thường.
• Khai báo <!DOCTYPE> cho HTML5 là:
<!DOCTYPE html>
8
KHOA CÔNG NGHỆ THÔNG TIN
HTML Cơ Bản
Đề mục (heading)
• Đề mục HTML được xác định với các thẻ <h1> đến <h6>.
• <h1> xác định đề mục quan trọng nhất. <h6> xác định đề mục ít quan trọng nhất:
9
KHOA CÔNG NGHỆ THÔNG TIN
<!DOCTYPE html>
<html>
<body>
</body>
</html>
10
KHOA CÔNG NGHỆ THÔNG TIN
HTML Cơ Bản
Đoạn văn (paragraph)
• Đoạn văn được xác định với thẻ <p>:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
11
KHOA CÔNG NGHỆ THÔNG TIN
HTML Cơ Bản
Liên kết (link)
• Liên kết được xác định với thẻ <a>:
• Đích đến của liên kết được xác định trong thuộc tính href.
• Các thuộc tính được dùng để cung cấp thông tin bổ sung về phần tử HTML.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
</body>
</html>
12
KHOA CÔNG NGHỆ THÔNG TIN
HTML Cơ Bản
Hình ảnh (image)
• Hình ảnh HTML được xác định với thẻ <img>.
• Tập tin nguồn (src), văn bản thay thế (alt), độ rộng (width), và độ cao (height) được cung
cấp dưới dạng các thuộc tính:
13
KHOA CÔNG NGHỆ THÔNG TIN
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
</body>
</html>
14
KHOA CÔNG NGHỆ THÔNG TIN
HTML Cơ Bản
Thuộc tính style
• Thuộc tính style được dùng để thêm kiểu dáng vào một phần tử, như là màu chữ (color),
font chữ (font), kích cỡ (size), nền (background)…
<!DOCTYPE html>
<html>
<body>
<h2>The style Attribute</h2>
<p>The style attribute is used to add
styles to an element, such as color:</p>
<p style="color:red;">This is a red
paragraph.</p>
</body>
</html>
15
KHOA CÔNG NGHỆ THÔNG TIN
HTML Cơ Bản
Thuộc tính lang
• Ta nên chèn thuộc tính lang bên trong thẻ <html>, để khai báo ngôn ngữ cho trang Web.
Điều này có ý nghĩa trợ giúp cho công cụ tìm kiếm và trình duyệt.
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
16
KHOA CÔNG NGHỆ THÔNG TIN
HTML Cơ Bản
Thuộc tính title
• Thuộc tính title xác định một số thông tin mở rộng về phần tử.
• Giá trị của thuộc tính title sẽ được hiển thị như một tooltip khi di chuột lên phần tử:
<!DOCTYPE html>
<html>
<body>
<h2 title="I'm a header">The title
Attribute</h2>
<p title="I'm a tooltip">Mouse over this
paragraph, to display the title attribute as a
tooltip.</p>
</body>
</html>
17
KHOA CÔNG NGHỆ THÔNG TIN
Định dạng
Phần tử <b> và <strong>
• Phần tử <b> xác định văn bản in đậm (bold).
• Phần tử <strong> xác định văn bản có tầm quan trọng lớn. Nội dung được in đậm.
<b>Văn bản này in đậm</b>
<strong>Văn bản này quan trọng!</strong>
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
<p><strong>This text is important!</strong></p>
</body>
</html>
18
KHOA CÔNG NGHỆ THÔNG TIN
Định dạng
Phần tử <i> và <em>
• <i> xác định văn bản được in nghiêng (italic).
• <em> xác định văn bản nhấn mạnh (emphasize). Nội dung được in nghiêng.
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><i>This text is italic.</i></p>
<p><em>This text is emphasized.</em></p>
</body>
</html>
19
KHOA CÔNG NGHỆ THÔNG TIN
Định dạng
Phần tử <small>
• Phần tử <small>xác định văn bản nhỏ hơn
<!DOCTYPE html>
<html>
<body>
<p>This is some normal text.</p>
<p><small>This is some smaller text.</small></p>
</body>
</html>
20
KHOA CÔNG NGHỆ THÔNG TIN
Định dạng
Phần tử <mark>
• Phần tử <mark> xác định văn bản được đánh dấu (mark) hay nổi bật lên (highlight)
<!DOCTYPE html>
<html>
<body>
<p>Do not forget to buy <mark>milk</mark>
today.</p>
</body>
</html>
21
KHOA CÔNG NGHỆ THÔNG TIN
Định dạng
Phần tử <del>
• Phần tử <del> xác định văn bản bị xóa khỏi tài liệu. Trình duyệt sẽ gạch một đường qua
văn bản bị xóa:
<!DOCTYPE html>
<html>
<body>
<p>My favorite color is <del>blue</del>
red.</p>
</body>
</html>
22
KHOA CÔNG NGHỆ THÔNG TIN
Định dạng
Phần tử <ins>
• Phần tử <ins> xác định một văn bản được chèn vào tài liệu. Trình duyệt thường sẽ gạch
chân văn bản được chèn vào:
<!DOCTYPE html>
<html>
<body>
<p>My favorite color is <del>blue</del>
<ins>red</ins>.</p>
</body>
</html>
23
KHOA CÔNG NGHỆ THÔNG TIN
Định dạng
Phần tử <sub>
• Phần tử <sub> xác định văn bản chỉ số dưới, như H2O:
<!DOCTYPE html>
<html>
<body>
</body>
</html>
24
KHOA CÔNG NGHỆ THÔNG TIN
Định dạng
Phần tử <sup>
• Phần tử <sup> xác định văn bản chỉ số trên., như WWW[1]:
<!DOCTYPE html>
<html>
<body>
</body>
</html>
25
KHOA CÔNG NGHỆ THÔNG TIN
Ghi chú
• Ghi chú HTML không hiển thị trong trình duyệt, nhưng chúng giúp viết tài liệu cho mã
nguồn HTML.
• Ta có thể thêm ghi chú vào HTML theo cú pháp:
<!DOCTYPE html>
<html>
<body>
</body>
</html>
26
KHOA CÔNG NGHỆ THÔNG TIN
Danh sách
Danh sách không có thứ tự (Unordered List)
• Danh sách không có thứ tự bắt đầu với thẻ <ul>. Mỗi mục trong danh sách (list ite) bắt
đầu với thẻ <li>.
• Theo mặc định, các mục trong danh sách được đánh dấu với dấu đầu dòng (bullet) là
hình tròn đen nhỏ (small black circle) :
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
27
KHOA CÔNG NGHỆ THÔNG TIN
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
28
KHOA CÔNG NGHỆ THÔNG TIN
Danh sách
Danh sách có thứ tự (Ordered List)
• Một danh sách có thứ tự bắt đầu với thẻ <ol>. Mỗi mục trong danh sách (list item) bắt
đầu với thẻ <li>.
• Theo mặc định, các mục trong danh sách được đánh dấu với các số.
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
29
KHOA CÔNG NGHỆ THÔNG TIN
<!DOCTYPE html>
<html>
<body>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
30
KHOA CÔNG NGHỆ THÔNG TIN
Biểu tượng (Favicon)
• Biểu tượng (favicon) là một hình ảnh nhỏ được hiển thị trên thanh tiêu đề trình duyệt.
• Thêm phần tử <link> vào trang:
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
31
KHOA CÔNG NGHỆ THÔNG TIN
Âm thanh (audio)
• Để phát một tập tin âm thanh trong HTML, ta dùng phần tử <audio> :
• Thuộc tính controls thêm các điều khiển như play (phát), pause (tạm dừng), và volume
(âm lượng).
• Phần tử <source> cho phép ta xác định các tập tin âm thanh để trình duyệt chọn. Trình
duyệt sẽ chọn định dạng được nhận ra đầu tiên.
• Văn bản giữa thẻ <audio> và </audio> chỉ được hiển thị khi trình duyệt không hỗ trợ
phần tử <audio>.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio
element.
</audio>
32
KHOA CÔNG NGHỆ THÔNG TIN
Âm thanh (audio)
• Để bắt đầu tự động tập tin âm thanh, ta dùng thuộc tính autoplay.
• Thêm thuộc tính muted sau autoplay to làm cho tập tin âm thanh tự động phát nhưng bị
tắt tiếng.
33
KHOA CÔNG NGHỆ THÔNG TIN
video
• Để chiếu video trong HTML, ta dung phần tử <video>
34
KHOA CÔNG NGHỆ THÔNG TIN
Các Thẻ Định Dạng Bảng Biểu
(HTML Tables)
Lập trình Ứng dụng Web
35
KHOA CÔNG NGHỆ THÔNG TIN
Bảng biểu (table)
1. Bảng biểu (tables)
2. Đường biên bảng (table borders)
3. Kích thước bảng (table sizes)
4. Đầu đề bảng (table headers)
5. Khoảng cách & khoảng đệm bảng (Table Padding & Spacing)
6. Trộn cột & trộn dòng trong bảng (table colspan & rowspan)
7. Kiểu dáng bảng (table styling)
8. Nhóm cột trong bảng (table colgroup)
36
KHOA CÔNG NGHỆ THÔNG TIN
Bảng biểu (table)
1. Bảng biểu (tables)
2. Đường biên bảng (table borders)
3. Kích thước bảng (table sizes)
4. Đầu đề bảng (table headers)
5. Khoảng cách & khoảng đệm bảng (Table Padding & Spacing)
6. Trộn cột & trộn dòng trong bảng (table colspan & rowspan)
7. Kiểu dáng bảng (table styling)
8. Nhóm cột trong bảng (table colgroup)
37
KHOA CÔNG NGHỆ THÔNG TIN
1. Bảng biểu (tables)
Bảng biểu cho phép trình bày dữ liệu theo dạng cột và dòng
Ví dụ:
38
KHOA CÔNG NGHỆ THÔNG TIN
1. Bảng biểu (tables)
Định nghĩa Bảng biểu HTML
Bảng biểu (table) trong HTML chứa đựng các ô (cell) của bảng trong các
dòng (row) và các cột (col)
39
KHOA CÔNG NGHỆ THÔNG TIN
1. Bảng biểu (tables)
Ô (Cell)
• Mỗi ô được định nghĩa bởi một cặp thẻ <td> và </td>
• td là viết tắt của table data (dữ liệu của bảng)
• Nằm giữa <td> và </td> là nội dung của ô
40
KHOA CÔNG NGHỆ THÔNG TIN
1. Bảng biểu (tables)
• Chú ý: ô có thể chứa đựng tất cả các phần tử HTML: văn bản (text), hình
ảnh (images), danh sách (lists), liên kết (links), và bảng khác (tables)…
41
KHOA CÔNG NGHỆ THÔNG TIN
1. Bảng biểu (tables)
Dòng (Row)
• Mỗi dòng bắt đầu với thẻ <tr> và kết thúc với thẻ </tr>.
• tr là viết tắt của table row (dòng của bảng)
42
KHOA CÔNG NGHỆ THÔNG TIN
43
KHOA CÔNG NGHỆ THÔNG TIN
1. Bảng biểu (tables)
Đầu đề bảng (Table Header)
• Đôi khi ta muốn ô là ô đầu đề. Trong trường hợp này ta dùng thẻ <th> thay
cho thẻ <td>
44
KHOA CÔNG NGHỆ THÔNG TIN
45
KHOA CÔNG NGHỆ THÔNG TIN
Bảng biểu (table)
1. Bảng biểu (tables)
2. Đường biên bảng (table borders)
3. Kích thước bảng (table sizes)
4. Đầu đề bảng (table headers)
5. Khoảng cách & khoảng đệm bảng (Table Padding & Spacing)
6. Trộn cột & trộn dòng trong bảng (table colspan & rowspan)
7. Kiểu dáng bảng (table styling)
8. Nhóm cột trong bảng (table colgroup)
46
KHOA CÔNG NGHỆ THÔNG TIN
2. Đường biên bảng (table borders)
• Bảng có thể có các đường biên khác nhau về kiểu cách (style) và hình
dạng (shape).
• Khi thêm biên vào bảng, ta cũng thêm các biên vào quanh mỗi ô
• Để thêm biên, dùng thuộc tính CSS border của lên các thành phần table,
th và td:
47
KHOA CÔNG NGHỆ THÔNG TIN
2. Đường biên bảng (table borders)
• Để tránh đường đôi, thiết lập thuộc tính CSS border-collapse sang collapse
• Điều này làm cho các đường biên thu gọn thành một đường biên đơn:
48
KHOA CÔNG NGHỆ THÔNG TIN
2. Đường biên bảng (table borders)
• Nếu ta thiết lập màu nền mỗi ô, và cung cấp màu trắng cho đường biên
như màu nền của tài liệu, thì ta sẽ có ấn tượng về đường biên vô hình:
49
KHOA CÔNG NGHỆ THÔNG TIN
2. Đường biên bảng (table borders)
• Với thuộc tính border-radius, các đường biên sẽ có góc bo tròn:
• Bỏ qua đường biên bao quanh bảng bằng cách gỡ bỏ table khỏi bộ chọn
css:
50
KHOA CÔNG NGHỆ THÔNG TIN
2. Đường biên bảng (table borders)
• Với thuộc tính border-style, ta có thể thiết lập diện mạo của đường biên.
51
KHOA CÔNG NGHỆ THÔNG TIN
2. Đường biên bảng (table borders)
• Với thuộc tính border-color, ta có thể thiết lập màu sắc của đường biên.
52
KHOA CÔNG NGHỆ THÔNG TIN
Bảng biểu (table)
1. Bảng biểu (tables)
2. Đường biên bảng (table borders)
3. Kích thước bảng (table sizes)
4. Đầu đề bảng (table headers)
5. Khoảng cách & khoảng đệm bảng (Table Padding & Spacing)
6. Trộn cột & trộn dòng trong bảng (table colspan & rowspan)
7. Kiểu dáng bảng (table styling)
8. Nhóm cột trong bảng (table colgroup)
53
KHOA CÔNG NGHỆ THÔNG TIN
3. Kích thước bảng (table sizes)
• Bảng có thể có các kích thước khác nhau cho mỗi cột, dòng hay toàn
bảng.
54
KHOA CÔNG NGHỆ THÔNG TIN
3. Kích thước bảng (table sizes)
• Để thiết lập độ rộng của bảng, thêm thuộc tính style vào phần tử <table>:
55
KHOA CÔNG NGHỆ THÔNG TIN
3. Kích thước bảng (table sizes)
• Để thiết lập kích thước cột, ta thêm thuộc tính style vào <th> hoặc <td>
56
KHOA CÔNG NGHỆ THÔNG TIN
3. Kích thước bảng (table sizes)
• Để thiết lập chiều cao của dòng cụ thể, ta thêm thuộc tính style vào phần tử row của bảng:
• Ví dụ: Thiết lập chiều cao của dòng thứ hai thành 200 pixel:
57
KHOA CÔNG NGHỆ THÔNG TIN
Bảng biểu (table)
1. Bảng biểu (tables)
2. Đường biên bảng (table borders)
3. Kích thước bảng (table sizes)
4. Đầu đề bảng (table headers)
5. Khoảng cách & khoảng đệm bảng (Table Padding & Spacing)
6. Trộn cột & trộn dòng trong bảng (table colspan & rowspan)
7. Kiểu dáng bảng (table styling)
8. Nhóm cột trong bảng (table colgroup)
58
KHOA CÔNG NGHỆ THÔNG TIN
4. Đầu đề bảng (table headers)
• Bảng có thể có các đầu đề cho mỗi cột hoặc dòng, hoặc nhiều cột/dòng.
59
KHOA CÔNG NGHỆ THÔNG TIN
4. Đầu đề bảng (table headers)
• Đầu đề bảng được định nghĩa với các phần tử th. Mỗi phần tử th đại diện
cho một ô của bảng.
60
KHOA CÔNG NGHỆ THÔNG TIN
4. Đầu đề bảng (table headers)
• Để dùng cột đầu tiên làm đầu đề, ta định nghĩa ô đầu tiên mỗi dòng với
phần tử <th>:
61
KHOA CÔNG NGHỆ THÔNG TIN
4. Đầu đề bảng (table headers)
• Theo mặc định, đầu đề bảng sẽ in đậm và căn giữa:
62
KHOA CÔNG NGHỆ THÔNG TIN
4. Đầu đề bảng (table headers)
• Để căn lề trái cho đầu đề bảng, ta dùng thuộc tính CSS text-align :
63
KHOA CÔNG NGHỆ THÔNG TIN
4. Đầu đề bảng (table headers)
• Ta có thể có đầu đề bảng trải dài trên hai hay nhiều cột.
64
KHOA CÔNG NGHỆ THÔNG TIN
4. Đầu đề bảng (table headers)
• Ta có thể thêm một tiêu đề (caption) làm đề mục cho toàn bảng
65
KHOA CÔNG NGHỆ THÔNG TIN
Bảng biểu (table)
1. Bảng biểu (tables)
2. Đường biên bảng (table borders)
3. Kích thước bảng (table sizes)
4. Đầu đề bảng (table headers)
5. Khoảng cách & khoảng đệm bảng (Table Padding & Spacing)
6. Trộn cột & trộn dòng trong bảng (table colspan & rowspan)
7. Kiểu dáng bảng (table styling)
8. Nhóm cột trong bảng (table colgroup)
66
KHOA CÔNG NGHỆ THÔNG TIN
5. Khoảng cách & khoảng đệm bảng (Table Padding & Spacing)
• Bảng biểu có thể điều chỉnh khoảng đệm (padding) bên trong ô, và cũng
như khoảng cách (spacing) giữa các ô
67
KHOA CÔNG NGHỆ THÔNG TIN
5. Khoảng cách & khoảng đệm bảng (Table Padding & Spacing)
• Khoảng đệm ô là khoảng cách giữa cạnh của ô và nội dung của ô.
• Theo mặc định thì khoảng đệm (padding) được thiết lập thành 0.
• Để thêm khoảng đệm (padding) lên ô, dùng thuộc tính CSS padding:
• Ví dụ:
68
KHOA CÔNG NGHỆ THÔNG TIN
5. Khoảng cách & khoảng đệm bảng (Table Padding & Spacing)
• Để thêm padding cho phía trên nội dung, ta dùng thuộc tính padding-top.
• Và các cạnh khác với thuộc tính padding-bottom, padding-left, và
padding-right :
• Ví dụ:
69
KHOA CÔNG NGHỆ THÔNG TIN
5. Khoảng cách & khoảng đệm bảng (Table Padding & Spacing)
• Ví dụ:
70
KHOA CÔNG NGHỆ THÔNG TIN
Bảng biểu (table)
1. Bảng biểu (tables)
2. Đường biên bảng (table borders)
3. Kích thước bảng (table sizes)
4. Đầu đề bảng (table headers)
5. Khoảng cách & khoảng đệm bảng (Table Padding & Spacing)
6. Trộn cột & trộn dòng trong bảng (table colspan & rowspan)
7. Kiểu dáng bảng (table styling)
8. Nhóm cột trong bảng (table colgroup)
71
KHOA CÔNG NGHỆ THÔNG TIN
6. Trộn cột & trộn dòng trong bảng (table colspan & rowspan)
• Bảng có thể có các ô trải dài trên nhiều dòng và/hay nhiều cột.
72
KHOA CÔNG NGHỆ THÔNG TIN
6. Trộn cột & trộn dòng trong bảng (table colspan & rowspan)
• Để làm cho một ô trải dài trên nhiều cột, ta dùng thuộc tính colspan:
73
KHOA CÔNG NGHỆ THÔNG TIN
6. Trộn cột & trộn dòng trong bảng (table colspan & rowspan)
• Để làm cho một ô trải dài trên nhiều dòng, ta dùng thuộc tính rowspan :
74
KHOA CÔNG NGHỆ THÔNG TIN
Bảng biểu (table)
1. Bảng biểu (tables)
2. Đường biên bảng (table borders)
3. Kích thước bảng (table sizes)
4. Đầu đề bảng (table headers)
5. Khoảng cách & khoảng đệm bảng (Table Padding & Spacing)
6. Trộn cột & trộn dòng trong bảng (table colspan & rowspan)
7. Kiểu dáng bảng (table styling)
8. Nhóm cột trong bảng (table colgroup)
75
KHOA CÔNG NGHỆ THÔNG TIN
7. Kiểu dáng bảng (table styling)
• Dùng CSS để làm cho bảng trông tốt hơn
• Nếu ta thêm màu nền cho mỗi dòng khác nhau, ta sẽ được hiệu ứng sọc
ngựa vằn
• Chú ý: Nếu ta dùng (odd)
thay vì (even), kiểu dáng sẽ
xảy ra trên dòng 1,3,5…. thay
vì 2,4,6...
76
KHOA CÔNG NGHỆ THÔNG TIN
7. Kiểu dáng bảng (table styling)
• Để tạo sọc ngựa vằn theo chiều dọc, ta tạo kiểu (style) cho mỗi cột khác
nhau, thay vì mỗi dòng.
77
KHOA CÔNG NGHỆ THÔNG TIN
7. Kiểu dáng bảng (table styling)
• Ta có thể kết hợp định kiểu dáng để có sọc trên mỗi dòng và mỗi cột khác
nhau.
• Nếu ta dùng màu trong suốt, ta sẽ
được hiệu ứng chồng lấp.
78
KHOA CÔNG NGHỆ THÔNG TIN
7. Kiểu dáng bảng (table styling)
• Nếu ta xác định đường biên chỉ cho đáy mỗi dòng, ta sẽ có bảng với
đường ngang phân cách.
79
KHOA CÔNG NGHỆ THÔNG TIN
7. Kiểu dáng bảng (table styling)
• Dùng bộ chọn :hover trên tr để làm nổi bật dòng khi chuột di chuyển trên:
80
KHOA CÔNG NGHỆ THÔNG TIN
Bảng biểu (table)
1. Bảng biểu (tables)
2. Đường biên bảng (table borders)
3. Kích thước bảng (table sizes)
4. Đầu đề bảng (table headers)
5. Khoảng cách & khoảng đệm bảng (Table Padding & Spacing)
6. Trộn cột & trộn dòng trong bảng (table colspan & rowspan)
7. Kiểu dáng bảng (table styling)
8. Nhóm cột trong bảng (table colgroup)
81
KHOA CÔNG NGHỆ THÔNG TIN
8. Nhóm cột trong bảng (table colgroup)
• Nếu ta muốn định kiểu dáng hai cột đầu tiên của bảng, ta dùng phần tử
<colgroup> và <col>.
82
KHOA CÔNG NGHỆ THÔNG TIN
8. Nhóm cột trong bảng (table colgroup)
• Phần tử <colgroup> nên được dùng như vùng chứa để xác định thông số cột.
• Mỗi nhóm được xác định với một phần tử <col>.
• Thuộc tính span xác định bao nhiêu cột được định kiểu dáng.
• Thuộc tính style xác kiểu dáng để đưa cho các cột.
• Chú ý: Thẻ <colgroup> phải là
con của phần tử <table> và nên
được đặt trước bất kỳ phần tử
table nào khác, như <thead>,
<tr>, <td>…, nhưng sau phần tử
<caption>, nếu có.
83
KHOA CÔNG NGHỆ THÔNG TIN
8. Nhóm cột trong bảng (table colgroup)
• Nếu ta muốn định kiểu dáng cho nhiểu cột hơn với các kiểu dáng khác nhau,
ta dung nhiều phần tử <col> trong <colgroup>:
84
KHOA CÔNG NGHỆ THÔNG TIN
8. Nhóm cột trong bảng (table colgroup)
• Nếu ta muốn định kiểu dáng các cột ở giữa bảng, ta chèn phần tử <col> “rỗng”
(không có các định kiểu) cho các cột trước đó:
85
KHOA CÔNG NGHỆ THÔNG TIN
8. Nhóm cột trong bảng (table colgroup)
• Ta có thể ẩn các cột với thuộc tính visibility: collapse
86
KHOA CÔNG NGHỆ THÔNG TIN
Một số thuộc tính CSS dùng trong bảng
• background-color: <màu nền>
• background-image: url(<hình nền>)
• width: <độ rộng>
• height: <chiều cao>
• border: <thuộc tính biên>
87
KHOA CÔNG NGHỆ THÔNG TIN
HTML FORM
88
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
• Cá c phầ n tử HTML Form
• Cá c loạ i HTML Input
• Cá c thuộ c tính củ a HTML Input
• Cá c thuộ c tính củ a Input Form
• Xử lý Form
89
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
• Cá c phầ n tử HTML Form
• Cá c loạ i HTML Input
• Cá c thuộ c tính củ a HTML Input
• Cá c thuộ c tính củ a Input Form
• Xử lý Form
90
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
Mộ t HTML Form đượ c dù ng để thu thậ p thô ng tin dữ
liệu nhậ p củ a ngườ i dù ng
Dữ liệu nhậ p củ a ngườ i dù ng rấ t thườ ng đượ c gử i
lên server để xử lý
91
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
Ví dụ :
92
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
Ví dụ :
93
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
Phần tử <form>:
Phầ n tử <form> đượ c dung để tạ o mộ t biểu mẫ u
HTML cho dữ liệu nhậ p củ a ngườ i dung
Phầ n tử <form> là nơi chứ a cho cá c loạ i phầ n tử
nhậ p liệu khá c, như là : text field, checkbox, radio
button, submit button,…
94
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
Phần tử <form>:
95
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
Phần tử <input>:
Là phầ n tử thườ ng đượ c sử dụ ng nhấ t
Phầ n tử <input> có thể đượ c xuấ t ra theo nhiều
cá ch, tù y thuộ c và o thuộ c tính type.
96
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
Phần tử <input>:
<input type = “text”>: xuấ t mộ t trườ ng nhậ p vă n bả n đơn
dò ng
<input type = “radio”>: xuấ t mộ t nú t radio (để chọ n mộ t
hay nhiều lự a chọ n)
<input type = “checkbox”>: xuấ t mộ t hộ p kiểm (để lự a
chọ n khô ng hay nhiều lự a chọ n)
<input type = “submit”>: xuấ t mộ t nú t đệ trình (để đệ
trình biểu mẫ u)
<input type = “button”>: xuấ t mộ t nú t có thể click
97
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
Text Fields
<input type = “text”> định nghĩa mộ t trườ ng nhậ p liệu đơn
dò ng để nhậ p vă n bả n
98
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
Phần tử <label>
Thẻ <label> định nghĩa nhã n cho cá c phầ n tử củ a
biểu mẫ u
Thuộ c tính for củ a thẻ <label> nên bằ ng thuộ c
tính id củ a phầ n tử <input> để kết chú ng vớ i nhau
99
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
Radio Button
<input type = “radio”> định nghĩa mộ t nú t radio
Radio cho phép ngườ i dù ng chọ n 1 trong số giớ i
hạ n cá c lự a chọ n
100
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
Radio Button
101
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
Checkbox
<input type = “checkbox”> định nghĩa mộ t hộ p kiểm
Checkbox cho phép ngườ i dù ng chọ n khô ng hay nhiều tù y
chọ n trong số lượ ng giớ i hạ n cá c lự a chọ n
102
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
Nút Submit
<input type = “submit”> định nghĩa mộ t nú t để đệ
trình dữ liệu biểu mẫ u tớ i trình xử lý biểu mẫ u
Trình xử lý biểu mẫ u thô ng thườ ng là tậ p tin trên
server vớ i kịch bả n xử lý dữ liệu nhậ p
Trỉnh xử lý biểu mẫ u đượ c xá c định trong thuộ c
tính action củ a biểu mẫ u
103
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
Nút Submit
104
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
Nút Submit
105
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
Thuộc tính action
Thuộ c tính action định nghĩa hà nh độ ng đượ c thự c thi khi
biểu mẫ u đượ c đệ trình
Thườ ng thườ ng, dữ liệu củ a biểu mẫ u đượ c gử i lên tậ p tin
trên máy chủ khi ngườ i dung click chuộ t lên nú t submit
Nếu thuộ c tính action bị bỏ qua, action đượ c thiết lậ p là
trang hiện hà nh
106
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
Thuộc tính target
Thuộ c tính target xá c định nơi xuấ t kết quả hồ i
đá p nhậ n đượ c sau khi đệ trình biểu mẫ u
Thuộ c tính target có thể có cá c giá trị: _blank,
_self, _parent, _top, framename
Giá trị mặ c định là _self tứ c là kết quả hồ i đá p
trong cử a sổ hiện hà nh
107
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
Thuộc tính method
Thuộ c tính method xá c định phương thứ c HTTP đượ c
dung để đệ trình dữ liệu biểu mẫ u
Dữ liệu biểu mẫ u có thể đượ c gử i dướ i dạ ng cá c biến trong
URL (vớ i method = “get”) hoặ c giao tá c post HTTP (vớ i
method = “post”)
Phương thứ c HTTP mặ c định khi đệ trình dữ liệu biểu mẫ u
là GET
108
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
Thuộ c tính method
Lưu ý khi dùng GET:
o Thêm dữ liệu biểu mẫ u và o URL theo cậ p name/value
o KHÔ NG dung GET khi gử i dữ liệu nhạy cả m! (Dữ liệu
đệ trình thấy đượ c trong URL)
o Kích thướ c URL bị giớ i hạ n 2048 ký tự
o Hữ u ích khi đệ trình biểu mẫ u mà ngườ i dù ng muố n
bookmark kết quả
o GET thì tố t cho dữ liệu khô ng bả o mậ t, như chuỗ i truy
vấ n Google
109
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
Thuộ c tính method
Lưu ý khi dùng POST:
o Thêm dữ liệu và o trong thâ n củ a HTTP Request (dữ
liệu biểu mẫ u đệ trình khô ng hiển thị trên URL)
o POST thì khô ng giớ i hạ n kích thướ c, có thể đượ c dung
để lượ ng dữ liệu lớ n
o Việc đệ trình biểu mẫ u vớ i POST thì khô ng thể đượ c
bookmark
Mẹo: Luô n dung POST nếu dữ liệu biểu mẫ u co chứ a thô ng
tin cá nhâ n hoặ c nhạy cả m.
110
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
Thuộc tính name
Mỗ i trườ ng nhậ p liệu phả i có thuộ c tính name để
đệ trình
Nếu thuộ c tính name bị bỏ qua, giá trị củ a trườ ng
nhậ p liệu đó sẽ khô ng đượ c gử i
111
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
• Các phần tử HTML Form
• Cá c loạ i HTML Input
• Cá c thuộ c tính củ a HTML Input
• Cá c thuộ c tính củ a Input Form
• Xử lý Form
112
KHOA CÔNG NGHỆ THÔNG TIN
• Các phần tử HTML Form
<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>
113
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
• Cá c phầ n tử HTML Form
• Các loại HTML Input
• Cá c thuộ c tính củ a HTML Input
• Cá c thuộ c tính củ a Input Form
• Xử lý Form
114
KHOA CÔNG NGHỆ THÔNG TIN
• Các loại HTML Input
<input type = “button”>
<input type = “checkbox”>
<input type = “color”>
<input type = “date”>
<input type = “datetime-local”>
<input type = “email”>
<input type = “file”>
<input type = “hidden”>
<input type = “image”>
115
KHOA CÔNG NGHỆ THÔNG TIN
• Các loại HTML Input
<input type = “month”>
<input type = “number”>
<input type = “password”>
<input type = “radio”>
<input type = “range”>
<input type = “reset”>
<input type = “search”>
<input type = “submit”>
<input type = “tel”>
116
KHOA CÔNG NGHỆ THÔNG TIN
• Các loại HTML Input
<input type = “text”>
<input type = “time”>
<input type = “url”>
<input type = “week”>
• Mẹo: mặ c định giá trị thuộ c tính type là “text”
117
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
• Cá c phầ n tử HTML Form
• Cá c loạ i HTML Input
• Các thuộc tính của HTML Input
• Cá c thuộ c tính củ a Input Form
• Xử lý Form
118
KHOA CÔNG NGHỆ THÔNG TIN
• Các thuộc tính của HTML Input
value
readonly
disabled
size
maxlength
min
max
multiple
pattern
placeholder
119
KHOA CÔNG NGHỆ THÔNG TIN
• Các thuộc tính của HTML Input
required
step
autofocus
height
width
list
autocomplete
120
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
• Cá c phầ n tử HTML Form
• Cá c loạ i HTML Input
• Cá c thuộ c tính củ a HTML Input
• Các thuộc tính của Input Form
• Xử lý Form
121
KHOA CÔNG NGHỆ THÔNG TIN
• Các thuộc tính của Input Form
form
formaction
formenctype
formmethod
formtarget
formnovalidate
122
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
• Cá c phầ n tử HTML Form
• Cá c loạ i HTML Input
• Cá c thuộ c tính củ a HTML Input
• Cá c thuộ c tính củ a Input Form
• Xử lý Form
123
KHOA CÔNG NGHỆ THÔNG TIN
• Xử lý Form
Biến siêu toà n cụ c $_GET và $_POST đượ c dù ng để
thu thậ p dữ liệu biểu mẫ u
124
KHOA CÔNG NGHỆ THÔNG TIN
• Xử lý Form
125
KHOA CÔNG NGHỆ THÔNG TIN
• Xử lý Form
126
KHOA CÔNG NGHỆ THÔNG TIN
• HTML Form
• Cá c phầ n tử HTML Form
• Cá c loạ i HTML Input
• Cá c thuộ c tính củ a HTML Input
• Cá c thuộ c tính củ a Input Form
• Xử lý Form
127
KHOA CÔNG NGHỆ THÔNG TIN