BI 1

NH!NG KHI NI"M #$U TIN V% HTML5

M!C TIU BI H"C
#'nh ngha v( HTML5
T)ng qut v( c php c*a HTML5
M+t s, thnh ph-n m.i c*a HTML5
T)ng quan v( HTML5 API (giao di/n l0p trnh 1ng
d2ng) v cng ngh/ h3 tr4
Gi.i thi/u CSS3
Slide 1 - Nh!ng khi ni"m #$u tin v% HTML5 2
#$NH NGHA HTML5
#$NH NGHA HTML5
Slide 1 - Nh!ng khi ni"m #$u tin v% HTML5 4
Thnh ph-n c*a HTML5:
1h P1ML ml
1huc unh CSS3
!avascrlpL
Cng ngh h Lro Lch blL
HTML5
#$NH NGHA HTML5
HTML5 v h5 HTML5:
HTML5:
L nh6ng thnh ph-n nh d7u/ c php m.i
Cc th8 (tag)
V d2: <ul>, <li>, <div>,
H5 HTML5:
Bao g9m cc th8 m.i
Cng ngh/ m.i: CSS3, Geolocation, Web storage, web
workers, web socket
Tc d2ng c*a cng ngh/ m.i:
Cung c7p tnh nng m:nh m; cho b+ cng c2
T:o ra website h6u d2ng & tinh x<o
Slide 1 - Nh!ng khi ni"m #$u tin v% HTML5 5
#$NH NGHA HTML5
Ph:m vi s= d2ng HTML5:
PC
Thi>t b' di ?+ng & smartphone
.......
Slide 1 - Nh!ng khi ni"m #$u tin v% HTML5 6
T%NG QUAN V& C PHP HTML5
T%NG QUAN V& C PHP HTML5
Ngn ng6 HTML5 gi.i thi/u m+t s, th8/ thnh ph-n
m.i gip c7u trc trang web ?@4c logic thi>t thAc
hBn
Slide 1 - Nh!ng khi ni"m #$u tin v% HTML5 8
!"#$% '(% )*+,- ./012
<dlv #345"6736*5 > 1hls ls my header
</dlv>


#header [ wldLh:960px, helghL:100px,
background-color:gray,
}




<header> 1hls ls my header </
header>


header [ wldLh:960px, helghL:100px,
background-color:gray,
}

T%NG QUAN V& C PHP HTML5
Thnh ph-n m.i trong HTML5:
A: <header>
B: <nav>
C: <section>
D:<article>
E: <aside>
F: <footer>
Slide 1 - Nh!ng khi ni"m #$u tin v% HTML5 9
T%NG QUAN V& C PHP HTML5
Tn c*a thnh ph-n m.i dAa theo tn cc thnh
ph-n thng d2ng ?@4c s= d2ng trong ph-n b, c2c
trang web hi/n nay (div id="footer",div
id="nav",...).
Tc d2ng c*a cc thnh ph-n m.i trong HTML5:
Gi<m b.t sA ph2 thu+c vo th8 <div>
Thay th> bCi m+t c7u trc trang web th,ng nh7t, dD
?5c hBn
HTML5 khng thay th& b7t k c php HTML no;
m chE b' sung thm cc thnh ph-n (th8) m.i
vo danh sch hi/n c
Slide 1 - Nh!ng khi ni"m #$u tin v% HTML5 10
M'T S( THNH PH)N M*I C+A
HTML5
THNH PH)N M*I C+A HTML5
M+t s, thnh ph-n m.i:
Slide 1 - Nh!ng khi ni"m #$u tin v% HTML5 12
1hanh phn
<vldeo>
<audlo>
<canvas>
Web form
..
THNH PH)N M*I C+A HTML5
<video> v <audio>:
Cho php nhng video v file m thanh vo trang web
Khng c-n s= d2ng t.i plug-in c*a trnh duy/t
Slide 1 - Nh!ng khi ni"m #$u tin v% HTML5 13
8#369 :; )"7%"
<vldeo src="caLz.mp4" wldLh="400"
helghL="300"></vldeo>

<audlo src="hlgh_seas_rlp.mp3"
conLrols preload="auLo" auLobuer>
</audlo>

THNH PH)N M*I C+A HTML5
Slide 1 - Nh!ng khi ni"m #$u tin v% HTML5 14
THNH PH)N M*I C+A HTML5
<canvas>:
Cung c7p cc tnh nng v; v ho:t hnh
Lm vi/c gi,ng nh@ m+t b<ng v; trn trang web
C thF thm cc m JavaScript hoGc cc tnh nng
ho:t hnh m.i c*a CSS3 ?F lm cho ?,i t@4ng ?@4c
t:o ra trn b<ng v; di chuyFn, bi>n m7t, thay ?)i tH
l/, ...
L@u hnh <nh vIa v; d@.i d:ng .png
Slide 1 - Nh!ng khi ni"m #$u tin v% HTML5 15
THNH PH)N M*I C+A HTML5
Khai bo <canvas>:
S= d2ng javascript:
Slide 1 - Nh!ng khi ni"m #$u tin v% HTML5 16
<canvas id="myCanvas"></canvas>

<script>
var canvas = document.getElementById ("myCanvas"), context
= canvas.getContext("2d");
// x = 10, y = 20, width = 200, height = 100 context.fillRect(10,
20, 200, 100);
</script>

THNH PH)N M*I C+A HTML5
Web form:
Thnh ph-n form m.i trong HTML khi ?@4c thAc thi
s; gip qu trnh lm vi/c v.i cc form trC nn dD
dng hBn so v.i hi/n t:i
Slide 1 - Nh!ng khi ni"m #$u tin v% HTML5 17
<input type="email" required>

THNH PH)N M*I C+A HTML5
M+t s, thnh ph-n m.i khc:
<figure>, <figurecaption>: gn nhn (hoGc ch thch
<nh) cho cc hnh <nh trn trang web
<hgroup>: nhm m+t t0p cc thnh ph-n vo m+t
thnh ph-n h4p l!
.
Slide 1 - Nh!ng khi ni"m #$u tin v% HTML5 18
T%NG QUAN V& HTML5 API
T%NG QUAN V& HTML5 API
API (Application Programming Interfaces giao di/n
l0p trnh 1ng d2ng):
L cch t:o ra cc 1ng d2ng s= d2ng cc thnh ph-n
?@4c dAng sJn
Khng chE ?@4c p d2ng trong pht triFn web m
cn c< v.i cc ngn ng6 k'ch b<n
M2c ch chnh c*a API l ?F chuKn ha cB ch> lm
vi/c v ?Bn gi<n ha cc nhi/m v2 l0p trnh ph1c t:p
M+t s, HTML5 API: Drag and Drop, Web storage,
Microdata,v Geolocation
Slide 1 - Nh!ng khi ni"m #$u tin v% HTML5 20
T%NG QUAN V& HTML5 API
API Geolocation:
Gip xc ?'nh v' tr ?'a l! c*a trnh duy/t web.
Thng tin ny ?@4c s= d2ng ?F g=i d@.i d:ng d6
li/u lin quan dAa trn v' tr
Geolocation hi/n t:i ang ?@4c kch ho:t trong m+t
s, trnh duy/t hi/n ?:i
Slide 1 - Nh!ng khi ni"m #$u tin v% HTML5 21
T%NG QUAN V& HTML5 API
V d2 :flickr.com/map
Slide 1 - Nh!ng khi ni"m #$u tin v% HTML5 22
T%NG QUAN V& HTML5 API
Web workers:
WebWorkers l m+t framework (n(n t<ng) gi<i quy>t
v7n ?( hi/u su7t c*a trnh duy/t
L m k'ch b<n ch:y trn m+t lu9ng ring bi/t
Web storage:
C<i ti>n cookie c*a trnh duy/t
Cookie l m+t cng ngh/ b' gi.i h:n v kh khn cho
cc nh thi>t k> ?F c thF s= d2ng.
Web storage nng c7p m hnh ny ?F cung c7p
khng gian l@u tr6 l.n hBn cho cc 1ng d2ng web
hi/n ?:i
Slide 1 - Nh!ng khi ni"m #$u tin v% HTML5 23
T%NG QUAN V& HTML5 API
Web sLorage
localSLorage:
uu llu c Lh Lruy cp Lal bL
ky Lhl dlm nao, ngay ca khl
dng Lrlnh duyL hoc khl h
Lhng khol dng lal
sesslonSLorage:
uu llu bl mL dl khl dng
Lrlnh duyL
Slide 1 - Nh!ng khi ni"m #$u tin v% HTML5 24
CSS3
CSS3
CSS3 khng ph<i l m+t thnh ph-n c*a HTML5,
nh@ng l:i c m,i lin quan m0t thi>t v.i HTML5
CSS3 ?@4c pht triFn song song v.i HTML5
Slide 1 - Nh!ng khi ni"m #$u tin v% HTML5 26
CSS3
M+t s, thnh ph-n CSS3 m.i:
CSS animation (CSS ho:t hnh)
CSS transition (CSS chuyFn ?)i)
CSS 2D/ 3D transformation: transform
CSS3 background, border, RGAa color, gradient, drop
shadows, gc bo trn, .: border-radius, background-
image, border-image
Web font: @font-face
Slide 1 - Nh!ng khi ni"m #$u tin v% HTML5 27
T%NG K,T
HTML5 cung c7p cc thnh ph-n m.i, dAa theo tn
cc thnh ph-n thng d2ng ?@4c s= d2ng trong
ph-n b, c2c trang web: footer, nav, section, article,
aside, footer
M+t s, thnh ph-n m.i c*a HTML5: <video>,
<audio>, <canvas>,
API: L cch t:o ra cc 1ng d2ng s= d2ng cc thnh
ph-n ?@4c dAng sJn
M+t s, HTML5 API: Drag and Drop, Web storage,
Microdata,v Geolocation
CSS3 khng ph<i l m+t thnh ph-n c*a HTML5,
nh@ng l:i c m,i lin quan m0t thi>t v.i HTML5
Slide 1 - Nh!ng khi ni"m #$u tin v% HTML5 28