Chương 2 - Ngôn NG HTML

KHOA CÔNG NGHỆ THÔNG TIN
PHÁT TRIỂN TRANG WEB CĂN BẢN

BASIC WEBSITE DEVELOPMENT
HỌC KỲ I – NĂM HỌC 2023-2024
ĐÀO TẠO CHUYÊN NGÀNH CHUNG

CHƯƠNG 2
NGÔN NGỮ HTML
(Hyper Text Markup Language)
Giới thiệu
HTML là gì?
• HTML là viết tắt cho Hyper Text Markup Language (Ngôn ngữ Đánh dấu
Siêu văn bản)
• HTML là ngôn ngữ đánh dấu chuẩn để tạo các trang Web.
• HTML mô tả cấu trúc của một trang Web
• HTML chứa một chuỗi các phần tử (element)
• Phần tử HTML nói cho trình duyệt (browser) cách trình bày nội dung
• Các phần tử HTML gán nhãn các phần nội dung như là “đây là đề mục",
“đây là đoạn văn", “đây là liên kết"...
3
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
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
5
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!
Thẻ bắt đầu Nội dung phần tử 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>
<br> Không có Không có
6
HTML Cơ Bản
Tài liệu HTML
• Tất cả các tài liệu HTML phải bắt đầu với một khai báo loại tài liệu: <!DOCTYPE html>.
• Tài liệu HTML bắt đầu chính nó với <html> và kết thúc với </html>.
• Phần thấy được của tài liệu HTML nằm giữa <body> và </body>.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
7
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
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:
<h1>Đây là đề mục 1</h1>

9
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>

</body>
</html>
10
HTML Cơ Bản
Đoạn văn (paragraph)
• Đoạn văn được xác định với thẻ <p>:
<p>Đây là một đoạn văn.</p>

<p>Đây là một đoạn văn khác.</p>
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
11
HTML Cơ Bản
Liên kết (link)
• Liên kết được xác định với thẻ <a>:
<a href="https://www.w3schools.com">Đây là một liên kết</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>
<a href="https://www.w3schools.com">This is a link</a>
</body>
</html>
12
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:
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
13
<!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
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)…
<p style="color:red;">Đây là đoạn văn màu đỏ.</p>
<!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
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
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ử:
<p title="I'm a tooltip">This is a paragraph.</p>
<!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
Đị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
Đị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.
<i>Văn bản này nghiêng</i>
<em>Văn bản này được nhấn mạnh</em>
<!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
Định dạng
Phần tử <small>
• Phần tử <small>xác định văn bản nhỏ hơn
<small>Đây là văn bản nhỏ hơn.</small>
<!DOCTYPE html>
<html>
<body>
<p>This is some normal text.</p>
<p><small>This is some smaller text.</small></p>
</body>
</html>
20
Đị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)
<p>Đừng quên mua <mark>sữa</mark> hôm nay.</p>
<!DOCTYPE html>
<html>
<body>
<p>Do not forget to buy <mark>milk</mark>
today.</p>
</body>
</html>
21
Đị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:
<p>Màu yêu thích của tôi là <del>xanh</del>

đỏ.</p>
<!DOCTYPE html>
<html>
<body>
<p>My favorite color is <del>blue</del>
red.</p>
</body>
</html>
22
Đị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:
<p>Màu yêu thích của tôi là <del>xanh</del>

<ins>đỏ</ins>.</p>
<!DOCTYPE html>
<html>
<body>
<p>My favorite color is <del>blue</del>
<ins>red</ins>.</p>
</body>
</html>
23
Định dạng
Phần tử <sub>
• Phần tử <sub> xác định văn bản chỉ số dưới, như H2O:
<p>This is <sub>subscripted</sub> text.</p>
<!DOCTYPE html>
<html>
<body>
<p>This is <sub>subscripted</sub> text.</p>
</body>
</html>
24
Đị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]:
<p>This is <sup>superscripted</sup> text.</p>
<!DOCTYPE html>
<html>
<body>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>
25
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
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
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
28
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
<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
30
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>
</body>
</html>
31
Â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
Â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.
<audio controls autoplay>

Your browser does not support the audio element.
</audio>
<audio controls autoplay muted>

Your browser does not support the audio element.
</audio>
33
video
• Để chiếu video trong HTML, ta dung phần tử <video>
<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
• Thuộc tính autoplay, muted
34
Các Thẻ Định Dạng Bảng Biểu
(HTML Tables)
Lập trình Ứng dụng Web
35
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
37
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
Đị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
Ô (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
• 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
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
43
Đầ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
45
46
• 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
• Để 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
• 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
• 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
• Với thuộc tính border-style, ta có thể thiết lập diện mạo của đường biên.
• Các giá trị được cho phép:
51
• 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
53
• 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.
• Dùng thuộc tính style với thuộc tính width

hoặc height để xác định kích thước của
bảng, dòng hoặc cột.
54
• Để thiết lập độ rộng của bảng, thêm thuộc tính style vào phần tử <table>:
• Chú ý: Dùng đơn vị phần trăm cho độ

rộng có nghĩa là rộng thế nào so với phần
tử cha của nó, trong trường hợp này là
phần tử <body>.
55
• Để thiết lập kích thước cột, ta thêm thuộc tính style vào <th> hoặc <td>
• Ví dụ: Thiết lập độ rộng cột đầu tiên thành 70%:
56
• Để 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
58
• 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
• Đầ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
• Để 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
• Theo mặc định, đầu đề bảng sẽ in đậm và căn giữa:
62
• Để căn lề trái cho đầu đề bảng, ta dùng thuộc tính CSS text-align :
63
• Ta có thể có đầu đề bảng trải dài trên hai hay nhiều cột.
• Để làm điều này, ta dùng thuộc tính colspan

của phần tử <th> :
64
• Ta có thể thêm một tiêu đề (caption) làm đề mục cho toàn bảng
• Để thêm caption cho bảng, ta dung

thẻ <caption>:
• Chú ý: Thẻ <caption> nên được

chèn ngay sau thẻ <table>.
65
66
• 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 ô
Với khoảng đệm (padding) Với khoảng cách (spacing)
67
• 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
• Để 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
• Khoảng cách ô (spacing) là khoảng cách giữa các ô.

• Theo mặc định khoảng cách ô là 2 pixel.
• Để thay đổi khoảng cách giữa các ô, ta dùng thuộc tính CSS border-
spacing trên phần tử table:
• Ví dụ:
70
71
• Bảng có thể có các ô trải dài trên nhiều dòng và/hay nhiều cột.
72
• Để làm cho một ô trải dài trên nhiều cột, ta dùng thuộc tính colspan:
• Chú ý: Giá trị của thuộc colspan

đại diện cho số cột trải dài.
73
• Để làm cho một ô trải dài trên nhiều dòng, ta dùng thuộc tính rowspan :
• Chú ý: Giá trị của thuộc tính rowspan đại

diện cho số dòng trải dài.
74
75
• 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
• Để 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.
• Thiết lập :nth-child(even) cho các phần tử dữ liệu bảng:

• Chú ý: đặt bộ chọn (selector)
:nth-child() lên cả phần tử th và
td nếu ta muốn có kiểu dáng
trên cả ô đầu để và ô thường.
77
• 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.
• Dùng màu rgba() color để xác

định độ trong suốt của màu:
78
• 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.
• Thêm thuộc tính border-bottom vào tất

cả các phần tử trđể được các đường
ngang phân cách:
79
• 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
81
• 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
• 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
• 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
• 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
• Ta có thể ẩn các cột với thuộc tính visibility: collapse
86
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
HTML FORM
88
• 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
• HTML Form
• Xử lý Form
90
• 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
• HTML Form
 Ví dụ :
92
• HTML Form
 Ví dụ :
93
• 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
• HTML Form
 Phần tử <form>:
95
• 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
• 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
• 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
• 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
• 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
• HTML Form
 Radio Button
101
• 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
• 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
• HTML Form
 Nút Submit
104
• HTML Form
 Nút Submit
105
• 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
• 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
• 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
• 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
• 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
• 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
• HTML Form
• Các phần tử HTML Form
• Xử lý Form
112
• Các phần tử HTML Form
 <input>
 <label>
 <select>
 <textarea>
 <button>
 <fieldset>
 <legend>
 <datalist>
 <output>
 <option>
 <optgroup>
113
• HTML Form
• Các loại HTML Input
• Xử lý Form
114
 <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
 <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
 <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
• HTML Form
• Các thuộc tính của HTML Input
• Xử lý Form
118
 value
 readonly
 disabled
 size
 maxlength
 min
 max
 multiple
 pattern
 placeholder
119
 required
 step
 autofocus
 height
 width
 list
 autocomplete
120
• HTML Form
• Các thuộc tính của Input Form
• Xử lý Form
121
• Các thuộc tính của Input Form
 form
 formaction
 formenctype
 formmethod
 formtarget
 formnovalidate
122
• HTML Form
• Xử lý Form
123
• 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
• Xử lý Form
125
• Xử lý Form
126
• HTML Form
• Xử lý Form
127

Chương 2 - Ngôn NG HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chương 2 - Ngôn NG HTML

Uploaded by

Copyright:

Available Formats

KHOA CÔNG NGHỆ THÔNG TIN

PHÁT TRIỂN TRANG WEB CĂN BẢN

HỌC KỲ I – NĂM HỌC 2023-2024

ĐÀO TẠO CHUYÊN NGÀNH CHUNG

<h1>My First Heading</h1>

Thẻ bắt đầu Nội dung phần tử Thẻ kết thúc

<h1>My First Heading</h1>

<h1>Đây là đề mục 1</h1>

<h1>This is heading 1</h1>

<p>Đây là một đoạn văn.</p>

<a href="https://www.w3schools.com">Đây là một liên kết</a>

<a href="https://www.w3schools.com">This is a link</a>

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

<p style="color:red;">Đây là đoạn văn màu đỏ.</p>

<p title="I'm a tooltip">This is a paragraph.</p>

<i>Văn bản này nghiêng</i>

<em>Văn bản này được nhấn mạnh</em>

<small>Đây là văn bản nhỏ hơn.</small>

<p>Đừng quên mua <mark>sữa</mark> hôm nay.</p>

<p>Màu yêu thích của tôi là <del>xanh</del>

<p>Màu yêu thích của tôi là <del>xanh</del>

<p>This is <sub>subscripted</sub> text.</p>

<p>This is <sub>subscripted</sub> text.</p>

<p>This is <sup>superscripted</sup> text.</p>

<p>This is <sup>superscripted</sup> text.</p>

<h2>An unordered HTML list</h2>

<h2>An ordered HTML list</h2>

<audio controls autoplay>

<audio controls autoplay muted>

<video width="320" height="240" controls>

• Thuộc tính autoplay, muted

• Các giá trị được cho phép:

• Dùng thuộc tính style với thuộc tính width

• Chú ý: Dùng đơn vị phần trăm cho độ

• Ví dụ: Thiết lập độ rộng cột đầu tiên thành 70%:

• Để làm điều này, ta dùng thuộc tính colspan

• Để thêm caption cho bảng, ta dung

• Chú ý: Thẻ <caption> nên được

Với khoảng đệm (padding) Với khoảng cách (spacing)

• Khoảng cách ô (spacing) là khoảng cách giữa các ô.

• Chú ý: Giá trị của thuộc colspan

• Chú ý: Giá trị của thuộc tính rowspan đại

• Thiết lập :nth-child(even) cho các phần tử dữ liệu bảng:

• Dùng màu rgba() color để xác

• Thêm thuộc tính border-bottom vào tất

You might also like