HTML5 XP session 02 giới thiệu về HTML 5 t1

Bài 02:
Giới thiệu về HTML5
NexTGen Web

Aptech Ltd.

Mục tiêu

 !

"# $%&'()*+

(,-$.%!

(#/0123435/.%!

,6 ,7-

 .89 .:;$<%$2=
Aptech Ltd.
>?.%0@%%=A=BB%
Giới thiệu HTML

;C9 D=.=E .# ! !=32!"!1707FG0H!9D;7/I%/<
. !J=$B:K$.%!$#L.M0D%N

.%!7FGO6$P!B0Q!,R !S

A0Q!,R !S T/U

V#//<M6.M$D0!9 . !N


W$X6.:;!Y0!K$7-!7;7 F-!@%!Z.D
E"!@.5D;$P![2:#;%2

I%$/\.5D;7/]"!@!F^0H!3_2`! %0<NNN
Aptech Ltd.
HTML 3.0
HTML 3.2
HTML 4.0
HTML 5.0
a?.%0@%%=J=$A=BB%
Lịch sử phát triển 1-2

HTML đã phát triển trong những năm qua với sự ra đời của bộ tiêu chuẩn và chi tiết kỹ thuật mới.
Aptech Ltd.
?.%0@%%=A=BB%
Lịch sử phát triển 2-2

2:$9 !"!170B:K$RSN

\Bb!12I1!7c7/-$9 a$OB!:7cO.9 W3&'
37c$2d  A.N

7FG$OB!4K!7//B0Q!7FG.:;$<07!F7%I"!
D4$!N
Aptech Ltd.
e?.%0@%%=J=$A=BB%
Các tính năng mới của HTML5
Các tính năng của
HTML 5

Các tính năng của
HTML 5
Phần tử <canvas> được sử
dụng cho việc đồ họa
Phần tử <canvas> được sử
dụng cho việc đồ họa
Cung cấp hỗ trợ lưu trữ cục bộ
Cung cấp hỗ trợ lưu trữ cục bộ
Các phần tử nội dung giúp cấu
trúc tài liệu
Các phần tử nội dung giúp cấu
trúc tài liệu
Phần tử <audio> và <video> có
sẵn cho media playback (phương
tiện truyền thông)
Phần tử <audio> và <video> có
sẵn cho media playback (phương
tiện truyền thông)
Có các control mới cho
form
Có các control mới cho
form
Web workers API được đưa thêm vào
nhằm hỗ trợ tiến trình nền (background)
để không làm ảnh hưởng đến tiến trình
chính
Web workers API được đưa thêm vào
nhằm hỗ trợ tiến trình nền (background)
để không làm ảnh hưởng đến tiến trình
chính

Web socket API cung cấp kết
nối liên tục giữa máy chủ và
máy khách
Web socket API cung cấp kết
nối liên tục giữa máy chủ và
máy khách
Aptech Ltd.
f?.%0@%%=J=$A=BB%
Phương pháp tiếp cận mới và linh hoạt của HTML5
HTML 5
HTML 5
Giúp loại bỏ các plug-in (như
Flash) và sử dụng hỗ trợ cho audio
và video
Giúp loại bỏ các plug-in (như
Flash) và sử dụng hỗ trợ cho audio
và video
Giúp tạo ra các Internet clients phong
phú bằng việc sử dụng sử dụng các
plug-in như Flash
Giúp tạo ra các Internet clients phong
phú bằng việc sử dụng sử dụng các
plug-in như Flash
Cung cấp các phần tử mô tả ngữ
nghĩa
Cung cấp các phần tử mô tả ngữ
nghĩa
Sử dụng tính năng Web worker để làm
cho JavaScript thêm hiệu quả
Sử dụng tính năng Web worker để làm

cho JavaScript thêm hiệu quả
Cung cấp chức năng bộ nhớ đệm
và lưu trữ phía client
Cung cấp chức năng bộ nhớ đệm
và lưu trữ phía client
Cung cấp các tính năng mới trong
CSS như bộ chọn được cải tiến,
bóng đổ vv
Cung cấp các tính năng mới trong
CSS như bộ chọn được cải tiến,
bóng đổ vv
Cung cấp các tính năng mới cho
các ứng dụng điện thoại di động
Cung cấp các tính năng mới cho
các ứng dụng điện thoại di động
Aptech Ltd.
Trình duyệt tải tài liệu mà trong đó gồm có các đánh dấu HTML và CSS
Trình duyệt tải tài liệu mà trong đó gồm có các đánh dấu HTML và CSS
Trình duyệt tạo ra một mô hình nội tại(internal model) của tài liệu có
chứa các phần tử HTML sau khi tải trang
Trình duyệt tạo ra một mô hình nội tại(internal model) của tài liệu có
chứa các phần tử HTML sau khi tải trang
Trình duyệt tải mã JavaScript và thực hiện chúng sau khi tải trang
Trình duyệt tải mã JavaScript và thực hiện chúng sau khi tải trang
API cho phép truy cập vào audio, video, và các công nghệ cần thiết khác
để xây dựng các ứng dụng
API cho phép truy cập vào audio, video, và các công nghệ cần thiết khác
để xây dựng các ứng dụng
g?.%0@%%=J=$A=BB%
Cách làm việc của HTML 5

Aptech Ltd.
hT$ %!i,R !S34R j.$=S30!N(,$/<%B5$C7#;Z9 N
,$C7!iT!%cXkRlS3@;7;2:3#"!%cT47FGm$k03
!%cX7T!RnSN
42c = 2="7<0I!0!N
,#;Z7FG;!o!F,$C73F!T0!Ip%RS .F:9 N
q
Phần tử (element) 1-2

(O60!9 . !J=$=%0I!m320I!.Z-$9 N
Aptech Ltd.
r
Phần tử (element) 2-2

MB /<.ZN
Aptech Ltd.
Có hai loại phần tử HTML: là thẻ chứa(container) và thẻ độc lập(standalone).
Một thẻ chứa bao gồm thẻ bắt đầu, nội dung, các phần tử con và thẻ kết thúc.
Tất cả các phần tử cơ bản của HTML đều là phần tử chứa.
Phần tử độc lập bao gồm thẻ bắt đầu, các thuộc tính và kết thúc bằng /> mà không có bất kỳ nội dung nào.

Các loại phần tử
Aptech Ltd.
?.%0@%%=A=BB%
Cấu trúc một tài liệu HTML 5
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html" charset=UTF-8" />

<title>Your Website</title>
</head>
<body>
This is my first web page
</body>
</html>
Aptech Ltd.
>
DOCTYPE

"!$%%.M0DBo:$9 29 $IN

VmD2# $%7@:.%!2.F#$#Ls#7FG;N

(%p.M0D7/7FGE-#T.M$D0!. . !t=$9 $IN
DOCTYPE2# $%.%!
<!DOCTYPE html>

hT2Z.%!u!F:$.%!F-!2 B D9 N

&'()*+u!F-!.M0DuN
Aptech Ltd.
a
Các thẻ cơ bản 1-6

27FGI%2:Y3,4# 3Z!v. 0!7<0I!N

2!"!1.M$DT.ZN

V0.Zv. .Z9 0!3,.ZE7<.Z9 . !3.%!#70.M$Dv. 

7<0I!N

. !2Fk.!N2N

(.Z-$9 2$ %!iBoFB U

HTML

*2!o70B5$C79 2N

hT$ %!i,$C7,#;ZT0I!lnlnF-!6!N

hT26 26 #$:.%!N
Aptech Ltd.

Các thẻ cơ bản 2-6

HEAD

*+w&!"!@. !t=$FY#%Rx=Dt%.0S!"!1B0Q!N

x=Dt%.0B7 !2]!1_ .X!.%!. !t=$37FGB0Q!$k$Dy#;7/E7<. !
t=$DT2:_ 7;@:y#;N

TITLE

*?+%p$IE7<@:79 . !t=$3*T0I!l?+nl?+nN

:77FG/<.: :7R2=S9 .M0DJ=$N,?+7FG7c$:.%!+w&N
Aptech Ltd.

e
Các thẻ cơ bản 3-6

META

,= B0Q!7//<"!@012N

.%!30!,=0 B0Q!7/E7< . =.=%0!N

,l= nU
<meta charset="utf-8" />

z{|g2sT #`5F^!7FGB0Q!7/}.G$!1N

(TBo4#2:_ 7;,= T/7FGB0Q!7/# $%"!@!. !N

"!@D#"!7FG/<.%!.M0DN

,= !%"!Qy#;3.M0D30<Qt=$"!@7T2;7/E=.F%cT
7FG$TC012T2:_ 9 29 $IN
Aptech Ltd.
f
Các thẻ cơ bản 4-6

LINK

,<link>B0Q!7/v. o2:!1 2!i!D:$:!%N

hTB0Q!7/#;GBD2=B==BN4D=v. #/0!9 ~2=T2:#;30Q•=EBB€2
.•~2=BD2=B==N

<link type="text/css" rel="stylesheet" href="first.css">

4D=#"!80H!.%!3M(AA7s7FG# $%c72‚BD2=%N&%]DZ
2U
<link rel="stylesheet" href="first.css">
Aptech Ltd.
g
Các thẻ cơ bản 5-6

SCRIPT

ƒ3d  A.2!"!1#<$c7‚N

4D=7FG$•7.%!,B.N

,B.2U
<script src="first.js"></script>
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Webinar</title>
<link rel="stylesheet" href="first.css">
<script src="first.js"></script>
</head>
</html>
Aptech Ltd.
q
Các thẻ cơ bản 6-6


BODY

*„%0D%p$I:0!%/<„IT//<0!$P!B0Q!7<0 !K
2313N

ƒ0QN
Aptech Ltd.
r
Các loại dữ liệu 1-2

#/012E7<2%I012!%4#/0!T/<.:. !N

(#/012!ZE7<2%I7<0I!FBC709 012N

„!0F7mD"2%I0!# N
Kiểu

dữ liệu
Mô tả
Text Strings
Quy định cụ thể nội dung văn bản, đó là có thể đọc được bởi người sử dụng.
Uniform Resource Identifiers
(URIs)
Xác định vị trí của các trang web hoặc các tập tin mạng.
Colors
Xác định màu sắc được áp dụng cho các nội dung trên trang web.
Lengths
Xác định khoảng cách giữa các phần tử HTML. Giá trị chiều dài có thể được trong Pixels, dài, hoặc
MultiLength. Pixel tham khảo các chấm nhỏ trên màn hình.

Content Types
Xác định loại nội dung được hiển thị trên một trang web. Các loại nội dung bao gồm 'text / html "để hiển thị
văn bản,' image / gif 'để hiển thị hình ảnh của một định dạng gif.,' Video / mpg 'để hiển thị một tập tin video có
định dạng mpg
Aptech Ltd.

Các loại dữ liệu 2-2

MB 2#:#/012# U
Các kiểu dữ liệu
cơ bản trong
HTML
Độ dài
Kiểu nội
dung
Kiểu chuỗi
Màu sắc URIs
Aptech Ltd.

Các thuộc tính

(4!Z!"!@:%N

„!B 2#:4!B0Q!.%!N
Thuộc tính Mô tả
class Chỉ ra tên lớp cho một phần tử.
contextmenu Chỉ ra menu ngữ cảnh cho một phần tử.
dir Chỉ ra hướng văn bản hiện có cho nội dung.
draggable Chỉ ra chức năng kéo của một phần tử.
dropzone Xác định xem dữ liệu khi kéo được sao chép, di chuyển, hoặc liên kết, khi giảm.

style Chỉ ra CSS nội tuyến cho một phần tử.
title Chỉ ra thông tin thêm về phần tử
Aptech Ltd.
>
Các thực thể trong HTML

.%!3TBo#5T`!… 7c$3#"!//<.5@;. .M0DNV//<1!#5D3B
0Q!#55/R . =.=@DS7/ D;N

h1!5/DT/7FG/<.:. !t=$$P!B0Q!ZB 7mDU
&entity_name; Hoặc &#entity_number;

„!0F7mD%DBo5/F^!7FGB0Q!N
Kết quả Mô tả Tên thực thể Mã số của thực thể (hệ 16)
%|$.= #!B = †$B‡ †ˆer‡
<
2=BB  †2‡ †ˆer‡
>
!.= =.  †!‡ †ˆe‡
&
=.B 0 † ‡ †ˆ>g‡
€
=.% †=.%‡ †ˆg>ea‡
©
%D.! †%D‡ †ˆeq‡
Aptech Ltd.
TH!= 0R7S6 #"!0H!bodyRmST6 T
09 2N
.F7mD7FG!,# 7/EmD05!O60!.%!H!$%0D9 
2N

,<table> 2F^!7FGB0Q!7/.M$D012TO6
,<div> 27FGB0Q!7//<0!FM32:#;3K$3
=3‰%.3N
!iT7/E7<O6Y!.%!$%0D2N
Bố cục trang Web trong HTML 5
a?.%0@%%=J=$A=BB%
Aptech Ltd.
Bố cục trang Web trong HTML 5
?.%0@%%=J=$A=BB%
Vùng để đặt logo, tên, phụ đề,
và mô tả ngắn về trang web
Vùng để đặt logo, tên, phụ đề,
và mô tả ngắn về trang web
Vùng chứa các liên kết dẫn đến một
số danh mục hiện có bên trong web
site hoặc liên kết bên ngoài
Vùng chứa các liên kết dẫn đến một
số danh mục hiện có bên trong web
site hoặc liên kết bên ngoài
Bao gồm tác giả, tên công ty, các liên kết
liên quan đến quy tắc, điều khoản và điều
kiện, bản đồ vị trí và các dữ liệu khác
Bao gồm tác giả, tên công ty, các liên kết
liên quan đến quy tắc, điều khoản và điều
kiện, bản đồ vị trí và các dữ liệu khác
Vùng chứa các liên kết cho
việc điều hướng
(navigation)
Vùng chứa các liên kết cho
việc điều hướng

(navigation)
Vùng chứa danh sách sản phẩm,
mô tả sản phẩm, blog hoặc các
thông tin khác
Vùng chứa danh sách sản phẩm,
mô tả sản phẩm, blog hoặc các
thông tin khác