Tkw02 - HTML Part 1

Thiết kế Web – Web Design
Chương 2 : HTML
Ths. Nguyễn Đỗ Thái Nguyên, Khoa CNTT, ĐH Sư phạm TpHCM
1
Nội dung
1. Giới thiệu chung về HTML
2. Trình bày văn bản trong HTML
3. Giới thiệu một số thẻ mới HTML5
4. Multimedia
5. Form trên trang web
6. IFrame
2
1. Giới thiệu chung – Định nghĩa
• HTML = HyperText Markup Language

ngôn ngữ đánh dấu siêu văn bản, là ngôn
ngữ dùng để viết trang web.
• Do Tim Berner Lee phát minh và được

W3C (World Wide Web Consortium) đưa
thành chuẩn năm 1994.
3
Lịch sử phát triển
HTML5 W3C Final Recommendation : Oct 28th, 2014
HTML5 is about
semantics and devices
mobile web information
architecture/semantics
4
Foundations of HTML:
Open Web Technology Stack:
5
http://blog.smartbear.com/software-quality/bid/167272/Understanding-The-Open-Web-Stack
1. Giới thiệu chung – Đặc điểm
• HTML sử dụng các thẻ (tags) để định
dạng dữ liệu
• HTML không phân biệt chữ hoa, chữ
thường
• Các trình duyệt thường không báo lỗi cú
pháp HTML.
• Khi viết sai cú pháp thì trình duyệt sẽ hiển
thị không đúng với dự định.
• Có nhiều thẻ, mỗi thẻ có 1 tên và mang ý
6
nghĩa khác nhau.
1. Giới thiệu chung – Đặc điểm (tt)
• Một thẻ có thể có các thuộc tính nhằm bổ sung
tác dụng cho thẻ.
• Mỗi thuộc tính có tên thuộc tính (tên_TT)
• Viết thẻ có thuộc tính:
<tên_thẻ tên_TT1=“giá_trị1” tên_TT2=“giá_trị2”…>
• Chú ý:
– Có thể thay đổi thứ tự, số lượng các thuộc tính mà
không gây ra lỗi cú pháp.
– Sự hỗ trợ các thẻ, thuộc tính ở mỗi trình duyệt là
khác nhau. Chỉ giống nhau ở các thẻ, thuộc tính cơ
bản.
– Thẻ đóng của thẻ có thuộc tính vẫn viết bình thường
(</tên_thẻ>)
• Có 2 loại thẻ: thẻ đóng và thẻ mở
• Cách viết thẻ:
– Thẻ mở: <tên_thẻ>
Ví dụ: <u>, <p>, <img>…
– Thẻ đóng tương ứng: </tên_thẻ>
Ví dụ: </u>, </p>
Chú ý:
• Luôn có thẻ mở nhưng có thể không có thẻ đóng
tương ứng. Ví dụ: <img> không có thẻ đóng
• Các thẻ có thể lồng nhau, nhưng không đan xen
lẫn nhau. 8
Ví dụ
• Tập tin HTML có phần mở rộng (đuôi) là
.HTM hoặc .HTML là tập tin thuần văn bản
(plain text)
• Có thể soạn thảo file HTML bằng bất cứ
trình soạn thảo “văn bản thuần” nào
(Notepad, EditPlus, Notepad++, …)
• Trình hỗ trợ soạn thảo HTML (trực quan,
code):
– Adobe Dreamweaver CS6
–…
10
11
2. TRÌNH BÀY TÀI LIỆU TRONG HTML
2.1 Thẻ thể hiện cấu trúc tài liệu

2.2 Thẻ META
2.3 Thẻ định dạng khối
2.4 Thẻ định dạng danh sách
2.5 Thẻ định dạng ký tự
2.6 Liên kết
2.7 Bảng
2.8 Một số lưu ý
12
2.1. Thẻ thể hiện cấu trúc tài liệu
13
2.1. Thẻ thể hiện cấu trúc tài liệu
• <html></html>: Định nghĩa phạm vi của
văn bản HTML
• <head></head>: Định nghĩa các mô tả về
trang HTML. Thông tin trong tag này không
được hiển thị trên trang web
• <title></title>: Mô tả tiêu đề trang web
• <body></body>: Xác định vùng thân của
trang web, nơi chứa các thông tin
14
HTML5 Doctype
• Dùng để chỉ rõ tài liệu theo chuẩn gì
(HTML5/XHTML5)
<!DOCTYPE html>
15
2.2. Thẻ META
• Đặt ở giữa <head>…</head>
• Thường dùng quy định thuộc tính cho
trang web
• Có tác dụng lớn với Search Engine
• Có 2 cách viết thẻ <meta>:
<META NAME="name" CONTENT="content">
<META HTTP-EQUIV="name"
CONTENT="content">
16
2.2. Thẻ META
Một số thẻ Meta thông dụng
• <META charset="utf-8">
• <META NAME="description" content="">
• <META NAME="keywords" content="">
• <META NAME="author" CONTENT="author's
name">
• <META HTTP-EQUIV="refresh"
CONTENT="delay;url=new url">
Link: http://www.w3schools.com/tags/tag_meta.asp 17
2.2. Thẻ META
Tự động chuyển hướng trang web
• Tự động chuyển hướng trang web sang

trang web khác (url) sau một khoảng thời
gian t (tính theo giây)
• Cú pháp
<head>
<META HTTP-EQUIV=“refresh” CONTENT=“t; URL=url”>
</head>
18
2.3. Thẻ định dạng khối tài liệu
Thẻ <DIV> được sử dụng để
DIV
đóng khối văn bản.
Thẻ <P> được sử dụng để định
P
dạng một đoạn văn bản.
Xác định 1 trong 6 cấp của tựa
H1,H2,H3,…,H6
đề (heading)
BR Ngắt dòng
Văn bản nằm trong thẻ này sẽ
PRE được trình bày như nguyên thủy
của nó khi gõ vào. 19
2.4. Thẻ định dạng danh sách
• OL
<OL TYPE=1/a/A/i/I>
– Danh sách được sắp xếp thứ <li>Mục 1</li>
tự <li>Mục 2</li>
– Hỗ trợ thuộc tính start cho <li>Mục 3</li>
phép chọn giá trị khởi đầu </OL>
• UL
– Danh sách không sắp xếp
<UL>
– Thẻ <LI> có thuộc tính TYPE <li>Mục 1</li>
có các giá trị <li>Mục 2</li>
• disc (chấm tròn đậm); <li>Mục 3</li>
• circle (vòng tròn); </UL>
• square (hình vuông) 21
22
23
2.5. Thẻ định dạng ký tự
<B></B>
In chữ đậm
<STRONG></STRONG>
<I></I><EM></EM> In chữ nghiêng
<U></U> In chữ gạch chân
<S></S><STRIKE></STRIKE> In chữ bị gạch ngang.
In chữ lớn hơn kích thước font hiện thời lên
một. Các thẻ <BIG> lồng nhau tạo ra hiệu ứng
chữ tăng dần. Đối với mỗi trình duyệt có giới
<BIG> ... </BIG> hạn về kích thước đối với mỗi font chữ, vượt
quá giới hạn này, các thẻ <BIG> sẽ không có ý
nghĩa.
In chữ nhỏ hơn bình thường bằng cách giảm
<SMALL> ... </SMALL> kích thước font hiện thời đi một. Tương tự như
thẻ BIG
<SUP> ... </SUP> Định dạng chỉ số trên (SuperScript)
<SUB> ... </SUB> Định dạng chỉ số dưới (SubScript) 24
2.6. Liên kết
• Thuộc tính:
– href=“đích liên kết”: Nếu trong cùng web nên sử dụng
đường dẫn tương đối.
– target=“tên cửa sổ đích”, tên cửa sổ phân biệt chữ
hoa/thường
• name: tải trang web vào frame có tên name
• _blank: tải trang web vào cửa sổ mới
• _parent: tải trang web vào cửa sổ cha của nó
• _self: tải trang web vào chính cửa sổ hiện hành
• _top: tải trang web vào cửa số cao nhất
25
2.6. Liên kết (tt)
• Lưu ý:
– Liên kết với địa chỉ e-mail thì đặt
href=“mailto:địa_chỉ_e-mail”
– Thực hiện lệnh JavaScript khi kích chuột vào thì đặt
href=“javascript:lệnh”
• Liên kết đến trang khác
– Thuộc tính href=“url của trang khác”
– Khi click vào liên kết sẽ chuyển đến trang khác
• Liên kết trong cùng một trang
– Thuộc tính href=“#id của thẻ trong trang”
– Khi click và liên kết sẽ chuyến đến thẻ có “id” được
ghi trong thuộc tính id của thẻ. 26
2.6. Liên kết (tt)
• Địa chỉ URL phân làm 2 loại :

– Địa chỉ tuyệt đối: Là vị trí tuyệt đối so với Mạng
Internet
– Địa chỉ tương đối: Là vị trí tương đối so với trang
web hiện hành đang chứ liên kết.
27
2.7 Bảng - Cấu trúc của 1 bảng
Bảng gồm nhiều dòng, một dòng

gồm nhiều ô, và chỉ có ô mới
chứa dữ liệu của bảng.
28
2.7 Bảng (tt)
STT Tên thẻ Mô tả - Ví dụ
1 <table>…</table> Khởi tạo 1 bảng
2 <tr>…</tr> Tạo 1 dòng (thẻ <tr> phải nằm trong
thẻ <table>)
3 <th>…<th> Tạo 1 ô tiêu đề (thẻ <th> phải nằm
trong thẻ <tr>)
4 <td>…</td> Tạo 1 ô dữ liệu (thẻ <td> phải nằm
trong thẻ <tr>)
• Tổng số thẻ <td> và <th> bằng số ô của bảng. Dòng có bao

nhiêu ô thì có bấy nhiêu thẻ <td> và/hoặc <th> nằm trong
cặp thẻ <tr>…</tr> tương ứng.
• Để có được một ô trống trong bảng (ô không có dữ liệu) thì
cần đặt nội dung ô là: 29
2.7. Bảng (tt)
• Thuộc tính của thẻ <table>:
– border=“số”: kích thước đường viền. Đặt bằng 0 (mặc
định): không có đường viền.
– width=“rộng”, height=“cao”: độ rộng và độ cao của bảng.
Có thể đặt theo 2 cách:
• n: (n là số) Quy định độ rộng, cao là n pixels
• n%: Quy định độ rộng, cao là n% độ rộng, cao của đối tượng
chứa bảng.
– cellspacing=“số”: Khoảng cách giữa 2 ô liên tiếp
– cellpadding=“số”: Khoảng cách từ góc ô đến nội dung ô
– bgcolor=“màu”: màu nền của bảng
– background=“địa_chỉ_ảnh”: Địa chỉ của file ảnh làm nền
cho bảng, sử dụng đường dẫn tương đối nếu có thể.30
2.7. Bảng (tt)
• Thuộc tính của thẻ <td>,<th>:
– bgcolor=“màu”: màu nền của ô
– background=“địa_chỉ_ảnh”: Địa chỉ của file ảnh làm nền cho ô.
Nên sử dụng đường dẫn tương đối nếu có thể.
– width=“rộng”, height=“cao”: độ rộng và độ cao của ô. Có thể đặt
theo 2 cách:
• n: (n là số) Quy định độ rộng, cao là n pixels
• n%: Quy định độ rộng, cao là n% độ rộng, cao của bảng.
– align=“căn_lề”: cách căn chỉnh dữ liệu trong ô theo chiều ngang:
left, right, center, justify.
– valign=“căn_lề_đứng”: cách căn chỉnh dữ liệu trong ô theo chiều
đứng: top, middle, bottom.
– colspan=“số”: số cột mà ô này chiếm (mặc định là 1)
– rowspan=“số”: số dòng mà ô này chiếm (mặc định là 1)
– nowrap: nếu có sẽ làm cho dữ liệu trong ô không tự xuống dòng
2.8. Một số lưu ý
• Lưu ý:
– Mọi khoảng trống, dấu xuống dòng trong HTML được thể
hiện trên trang web là 1 khoảng trống duy nhất
– Để gõ một số ký tự đặc biệt ta phải sử dụng mã:
• Khoảng trống (trong trường hợp muốn có nhiều hơn 1 ký tự
trống):
• Dấu nhỏ hơn (<) và lớn hơn (>): < >
• Dấu ngoặc kép (“): "
• Ký hiệu ©: ©
• Tham khảo:
http://www.w3schools.com/charsets/ref_utf_symbols.asp
• Ghi chú trong HTML:
 32
3. Một số thẻ mới HTML5
HTML5 giới thiệu 28 thẻ mới:
<section>, <article>, <aside>, <hgroup>,
<header>,<footer>, <nav>,
<figure>, <figcaption>, <video>, <audio>,
<source>, <embed>, <mark>,<progress>,
<meter>, <time>, <ruby>, <rt>, <rp>,<wbr>,
<canvas>, <command>, <details>,<summary>,
<datalist>, <keygen> and <output>
HTML5 = HTML + CSS + JS API 33
Structure
34
Structure
35
Structure
HTML5 offers new semantic elements to define different parts of a
web page:
• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary> 36
• <time>
<section>
• The section element represents a generic
section of a document or application. A section,
in this context, is a thematic grouping of content,
typically with a heading
37
<header>
• A header element is intended to usually contain
the section's heading (an h1–h6 element or an
hgroup element), but this is not required. The
header element can also be used to wrap a
section's table of contents, a search form, or any
relevant logos
38
<hgroup>
• The hgroup element represents the heading of a
section. The element is used to group a set of
h1–h6 elements when the heading has multiple
levels, such as subheadings, alternative titles, or
taglines
39
<footer>
• The footer element represents a footer for its
nearest ancestor sectioning content or
sectioning root element. A footer typically
contains information about its section such as
who wrote it, links to related documents,
copyright data, and the like
40
<article>
• The article element represents a self-contained
composition in a document, page, application, or site and
that is, in principle, independently distributable or
reusable, e.g. in syndication. This could be a forum post,
a magazine or newspaper article, a blog entry, a user-
submitted comment, an interactive widget or gadget, or
any other independent item of content..
41
<nav>
• The nav element represents a section of a page
that links to other pages or to parts within the
page: a section with navigation links
42
Block semantic element
• <aside>
• <figure>
43
<aside>
• The aside element represents a section of a
page that consists of content that is tangentially
related to the content around the aside element,
and which could be considered separate from
that content. Such sections are often
represented as sidebars in printed typography.
44
<figure>
• Specifies self-contained content, like
illustrations, diagrams, photos, code listings, etc
45
Inline semantic element
• <mark>
• <time>
• <meter>
• <progress>
46
<mark>
• Defines marked/highlighted text
47
<time>
• Defines a date/time
48
<meter>
• Defines a scalar measurement within a known
range (a gauge)
49
<progress>
• The progress element provides a simple and
effective way for a web designer to notify a user
of their progress regarding a specified task
4. Multimedia
4.1 Hình ảnh
4.2 Âm thanh
4.3 Video
4.4 Plugin
4.5 Video
51
4.1. Hình ảnh
• <img> : Không có thẻ đóng
• Các thuộc tính của tag <img>:
– align: left, right, center
– src : Đường dẫn đến file hình ảnh
– alt : Chú thích cho hình ảnh
– position: Top, Bottom, Middle
– border : Độ dày nét viền quanh ảnh (default=0)
– width: độ rộng
– height: độ cao
• Đặt ảnh nền cho trang web
– <body background=‘Image Path’>
52
4.2 HTML5 Audio
• Example:
<audio src="foo.wav" controls autoplay>
Your browser does not support the <audio>
element.
</audio>
• Property:
– src, autoplay, controls
– loop, autobuffer, preload, muted
53
4.2 HTML5 Audio - Media Types
File Format Media Type

MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav
54
Example
<audio id="audio" controls>
<source src="orion.ogg" type="audio/ogg" />
<source src="music.mp3" />
</audio>
var clip = document.getElementById('audio');

clip.muted = false; //câm
clip.play(); //phát
clip.pause(); //tạm dừng
55
4.3 HTML5 Video
• Example:
<video src="foo.mp4" width="300" height="200" controls>
Your browser does not support the <video> element.
</video>
• Property:
– src, autoplay, controls, height, width,
– loop, autobuffer, preload, poster
56
Handling Media Events
Event Description
abort This event is generated when playback is aborted.
canplay This event is generated when enough data is
available that the media can be played.
ended This event is generated when playback completes.
error This event is generated when an error occurs.
loadeddata This event is generated when the first frame of
the media has finished loading.
loadstart This event is generated when loading of the media
begins.
57
Event Description
pause This event is generated when playback is paused.
play This event is generated when playback starts or
resumes.
progress This event is generated periodically to inform the
progress of the downloading the media.
ratechange This event is generated when the playback speed
changes.
seeked This event is generated when a seek operation
completes.
58
Event Description
seeking This event is generated when a seek operation
begins.
suspend This event is generated when loading of the
media is suspended.
volumechange This event is generated when the audio volume
changes.
waiting This event is generated when the requested
operation (such as playback) is delayed
pending the completion of another operation
(such as a seek).
59
4.4 HTML Plug-ins
• Sử dụng <object> : hỗ trợ bởi tất cả
browser
• Ví dụ:
– <object width="400" height="50"
data="bookmark.swf"></object>
– <object width="100%" height="500px"
data="snippet.html"></object>
– <object data="audi.jpeg"></object>
60
4.4 HTML Plug-ins (tt)
• Sử dụng <embed> : chỉ được hỗ trợ bởi
một số browser.
• Ví dụ:
– <embed width="400" height="50"
src="bookmark.swf">
– <embed width="100%" height="500px"
src="snippet.html">
– <embed src="audi.jpeg">
61
4.5 YouTube
• Right click YT, chọn “Copy embed
code/Sao chép mã nhúng”
62
5. FORM TRONG TRANG WEB
1. Giới thiệu về Form
2. Các thành phần của Form
3. Một số thuộc tính mới
4. Gởi dữ liệu bằng phương thức

POST/GET
63
5.1. Giới thiệu về Form
• Được dùng để nhận dữ liệu từ phía người dùng
• Giúp gởi yêu cầu của người dùng đến trang xử
lý trong ứng dụng web
• Tag <form> dùng để chứa các thành phần khác
của form
• Những thành phần nhập liệu được gọi là Form
Field
– text field
– password field
– multiple-line text field
– …… 64
<form name=“..” action=“…” method=“POST/GET”>

</form>
• Là container chứa các thành phần nhập liệu khác.
• Các thuộc tính của <form>
– name: tên FORM
– action: chỉ định trang web nhận xử lý dữ liệu từ FORM
này khi có sự kiện click của button SUBMIT.
– method: Xác định phương thức chuyển dữ liệu (POST,
GET)
65
Dangnhap.html
<html>
<body>
<form Name=“Dangnhap”
Action=“./admin/xlDangnhap.php”
Method=“POST” >
………………
</form>
</body>
</html>
66
5.2. Các thành phần của Form
■ button ■ checkbox ■ file ■ hidden ■ image ■ password ■ radio ■ reset ■ submit ■ text
• <input type = “text” … /> (password)

• <input type = “radio” … />
• <input type = “checkbox” … />
• <input type = “file” … />
• <input type = “submit” … /> (reset, button)
• <textarea> …. </textarea>
• <select>
<option> …. <option>
</select>
• <fieldset>, <legend>
67
13 New Input Types
68
5.2. Thành phần của Form – Text field
• Dùng để nhập một dòng văn bản
• Ví dụ:
<input type=“text” name=“txtName”

value=“This is one line text with 301”
size=“20” maxlength=“30”> 69
5.2. Thành phần của Form – Password field
• Dùng để nhập mật khẩu

• Ví dụ:
<input type=“password” name=“txtPass”

value=“123456asdfgh”
size=“20” maxlength=“30”> 70
5.2. Thành phần của Form – Multiline text
• Dùng để nhập văn bản nhiều dòng

• Ví dụ:
<textarea cols="20" rows="5" wrap="off">

This is a text on multiline.
</textarea>
71
5.2. Thành phần của Form – Hidden text
• Dùng để truyền 1 giá trị của thuộc tính value

khi form được submit
• Không hiển thị ra trên màn hình
72
5.2. Thành phần của Form – Pull-down
<Select name=“…”>
<optgroup label=“…”>
<option [selected] value=“…” >……</option>
………
</optgroup>
<option [selected] value=“…” >……</option>
………
</select>
Xem code
ở slide tiếp
73
5.2. Thành phần của Form – Combo box
List box:
Select software: <select multiple>
<select name="DSSoftware">
<optgroup label="Multimedia">
<option value="WM">Window Media</option>
<option value=“KMP">KMPlayer</option>
</optgroup>
<optgroup label="Operation System">
<option value="W7">Windows 7</option>
<option value="W8">Windows 8.1</option>
<option value="W10">Windows 10</option>
</optgroup>
<option selected value="Office15">Office 2015</option>
</select> 74
5.2. Thành phần của Form – Checkbox
<input
type = “checkbox”
name = “…”
value = “…”
[checked]
>
Check box group: <br>

Anh văn: <input type="checkbox" name="Languages[ ]" value="En"><br>
Hoa: <input type="checkbox" name="Languages[ ]" value="Chz" checked><br>
Nhật: <input type="checkbox" name="Languages[ ]" value="Jp"><br>
75
5.2. Thành phần của Form – Radio
<input
type = “radio”
name = “…”
value = “…”
[checked]
> Lưu ý: trường hợp hai radio
không cùng tên.
Chọn giới tính : <br>
Nam: <input type="radio" name=“gt" value="nam" checked><br>
Nữ: <input type="radio" name=“gt" value="nữ"><br>
76
5.2. Thành phần của Form – File
• Sử dụng để upload file lên server
<form name=“frmMain” method=“POST” enctype=“multipart/form-data”

action=“xuly.php”>
Chọn ảnh:
<input type="file" name="fileUpload“><br>
<input type=“submit” value=“send”>
</form> 77
5.2. Thành phần của Form – Submit
• Nút phát lệnh và gởi dữ liệu của form đến trang
xử lý.
• Mỗi form chỉ có một nút submit và nút này được
viền đậm
<html>
<body>
<input type=“submit” value=“send”>
</form>
</body>
</html> 78
5.2. Thành phần của Form – Reset
• Dùng để trả lại giá trị mặc định cho các
control khác trong form
<html>
<body>
<input type=“submit” value=“send”><br>
<input type=“reset” value=“reset”>
</form>
</body>
</html> 79
5.2. Thành phần của Form – Button
80
5.2. Thành phần của Form – Button
• Có thể sử dụng thẻ <button>

• Ví dụ:
<button type="button" onclick="alert('Hello World!')">
Click Me!
</button>
81
5.2. Thành phần của Form – LABEL
Thành phần không bắt buộc, tăng khả năng truy cập cho form.
<label for="txtPhone">Phone</label>
<input type="text" name="txtPhone" id="txtPhone">
82
5.2. Thành phần của Form – Fieldset
<fieldset>
<legend> Subject </legend>
<input type="checkbox" name="Subject[ ]" value="Eng"> English<br>
<input type="checkbox" name="Subject[ ]" value="Math" checked>Mathematics<br>
<input type="checkbox" name="Subject[ ]" value="GraphTheory">Graph Theory
</fieldset>
83
5.3 Một số thuộc tính mới
• Của thẻ <form>: autocomplete, novalidate
• Của thẻ <input>:
– autocomplete – height and width
– autofocus – list
– form – min and max
– formaction – multiple
– formenctype – pattern (regexp)
– formmethod – placeholder
– formnovalidate – required
– formtarget – step
84
Search
<input type> search
Dùng để search hỗ trợ bởi Chrome, Opera, và

Safari.
Search Google:
<input type="search" name="googlesearch" />
85
Email
<input type> email
Hỗ trợ bởi Chrome, Opera, firefox và safari.

E-mail: <input type="email" name="usermail" />
86
URL
<input type> url
Dùng để nhập liệu địa chỉ web (URL address).
Field sẽ được tự động validate khi form submit.
Hỗ trợ bởi Chrome, Opera, firefox.
Add your homepage:

<input type="url" name="homepage" />
87
Range
<input type> range
Hỗ trợ Opera và WebKit (Chrome). Gồm có các
thuộc tính min, max, và step.
Dùng hỗ trợ validate nhập liệu số.
<label for="rating">On a scale of 1 to 10, my knowledge of

HTML5 is:</label>
<input type="range" min="1" max="10"
name="rating“>
88
Sliders
<form>
<input type="range" min="0" max="20" step="2"
value="2">
<input type=“submit” value=“Go”>
</form>
89
color
<input type> color
The color input type (type="color") provides the
user with a color picker Supported only in Opera,
Chrome
Select your favorite color:
<input type="color" name="favcolor" />
90
Spin Boxes
<form>
<input type="number" min="0" max="20" step="2"
value="2">
</form>
91
Date Pickers
<form>
<input type="date">
<input type="datetime">
<input type="datetime-local">
<input type=“time">
<input type="week">
<input type="month">
<input type="submit">
</form>
92
Data Lists
<form>
<input type=“text” list=“states”>
<datalist id=“states” >
<option value=“AK” label=“Alaska”>
<option value=“AL” label=“Alabama”>
<option value=“AR” label=“Arkansas”>
</datalist>
</form>
93
Datalist (tt)
<datalist id="frameworks">
<option value="MooTools">
<option value="Moobile">
<option value="Dojo Toolkit">
<option value="jQuery">
<option value="YUI">
</datalist>
<input name="frameworks" list="frameworks" />
94
keygen
<input type> keygen
The purpose of the <keygen> element is to provide a secure
way to authenticate users.
The <keygen> tag specifies a key-pair generator field in a
form. When the form is submitted, two keys are generated,
one private and one public.
The private key is stored locally, and the public key is sent
to the server. The public key could be used to generate a
client certificate to authenticate the user in the future.
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
95
output
<input type> output
The <output> element represents the result of a calculation

(like one performed by a script).
<form
oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" name="a" value="50" />100
+<input type="number" name="b" value="50" />
=<output name="x" for="a b"></output>
</form>
96
HTML5 Form Attribute Enhancements
• Các thuộc tính mới autofocus, required,
placeholder, maxlength, và pattern. Trong
đó required và placeholder sử dụng cho
textbox.
<form>
<input name="q" placeholder=“Search Text">
<input type="submit" value="Search">
</form>
97
5.4. Gởi dữ liệu bằng POST/GET
• Các đối số của Form được ghi kèm theo

vào đường dẫn URL của thuộc tính Action
trong tag <Form>
• Khối lượng dữ liệu đối số được truyền đi
của Form bị giới hạn bởi chiều dài tối đa
của một URL trên Address bar.
• Chiều dài tối đa của một URL là 2048
bytes
GET
98
<html>
<body>
<form method=“GET” action=“xuly.php”>
Anh văn: <input type="checkbox" name=“L1" value="En"><br>
Hoa: <input type="checkbox" name=“L2" value="Chz" checked><br>
Nhật: <input type="checkbox" name=“L3" value="Jp"><br>
<input type=“submit" value=“send">
</form>
</body>
</html>
GET
99
• Các đối số của Form được truyền “ngầm”

bên dưới
• Khối lượng dữ liệu đối số được truyền đi
của Form không phụ thuộc vào URL →
Không bị giới hạn
• Chỉ sử dụng được phương thức truyền
POST khi Action chỉ định đến trang web
thuộc dạng xử lý trên Server
POST 100
POST 101
6. Khung (iframe)
• Cho phép chia một trang web làm nhiều

phần, mỗi phần chứa nội dung của 1 trang
web khác
• Trình duyệt có thể không hỗ trợ khung
102
6. Khung (iframe) (tt)
• Tạo trang web chứa các khung và chèn:
<iframe src="URL"></iframe>
• Một số thuộc tính của <iframe>
– height and width
<iframe src="demo_iframe.htm" width="200"
height="200"></iframe>
– Remove the Border: style="border:none"
<iframe src="demo_iframe.htm" style="border:none"></iframe>
– Use iframe as a Target for a Link
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href=“abc.html“ target="iframe_a">ABC</a></p> 103
Bài tập tự làm
W3School HTML Exercise:
• http://www.w3schools.com/html/exercise.asp
104
Câu hỏi và thảo luận
105
Thảo luận
( ?)
0
Thảo luận
a. URL?
b. Các giao thức trao đổi thông tin?
c. Web editor?
Thảo luận
▪ Họ tên:
▪ Mã SV:
▪ Lớp:
▪ Khoá:
▪ Email:
▪ Số ĐT:
▪ Kỹ năng lập trình:
▪ Dự án web đã làm:
01 02 … 19 20

Tkw02 - HTML Part 1

Uploaded by

Document Information

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

Tkw02 - HTML Part 1

Uploaded by

Copyright:

Available Formats

Thiết kế Web – Web Design

Ths. Nguyễn Đỗ Thái Nguyên, Khoa CNTT, ĐH Sư phạm TpHCM

• HTML = HyperText Markup Language

• Do Tim Berner Lee phát minh và được

HTML5 W3C Final Recommendation : Oct 28th, 2014

2.1 Thẻ thể hiện cấu trúc tài liệu

• Tự động chuyển hướng trang web sang

• Địa chỉ URL phân làm 2 loại :

Bảng gồm nhiều dòng, một dòng

• Tổng số thẻ <td> và <th> bằng số ô của bảng. Dòng có bao

File Format Media Type

var clip = document.getElementById('audio');

1. Giới thiệu về Form

2. Các thành phần của Form

3. Một số thuộc tính mới

4. Gởi dữ liệu bằng phương thức

• <input type = “text” … /> (password)

<input type=“text” name=“txtName”

• Dùng để nhập mật khẩu

<input type=“password” name=“txtPass”

• Dùng để nhập văn bản nhiều dòng

<textarea cols="20" rows="5" wrap="off">

• Dùng để truyền 1 giá trị của thuộc tính value

Check box group: <br>

<form name=“frmMain” method=“POST” enctype=“multipart/form-data”

• Có thể sử dụng thẻ <button>

Dùng để search hỗ trợ bởi Chrome, Opera, và

Hỗ trợ bởi Chrome, Opera, firefox và safari.

Add your homepage:

<label for="rating">On a scale of 1 to 10, my knowledge of

<input name="frameworks" list="frameworks" />

The <output> element represents the result of a calculation

• Các đối số của Form được ghi kèm theo

• Các đối số của Form được truyền “ngầm”

• Cho phép chia một trang web làm nhiều

• Trình duyệt có thể không hỗ trợ khung

b. Các giao thức trao đổi thông tin?

You might also like