Date post: | 05-Apr-2018 |
Category: |
Documents |
Upload: | liberty150 |
View: | 227 times |
Download: | 0 times |
of 53
8/2/2019 BDW Session 05
1/53
FPT APTECH COMPUTER EDUCATION HANOI
BDWS Bi 5
Module 16: Cc th HTML5
Module 17: Gii thiu CSS3
8/2/2019 BDW Session 05
2/53
Bi 6 Mc tiu (1)
BDWS / Bi 6 2
Gii thiu HTML5
Cc th HTML5 mi
Gii thch cc th b cc
Gii thch cc th trong biu mu (Form) HTML5
Gii thch th Video v th Audio
Gii thch th Canvas
8/2/2019 BDW Session 05
3/53
Bi 6 Mc tiu (2)
Gii thiu CSS3
Cc c im mi trong CSS3
o ng bo trn (Rounded borders)
o Trong sut (Transparency)
o H tr thuc tnh Multi-column (Multi-column support)
o Bin hnh v hot hnh(animation)
BDWS / Bi 6 3
8/2/2019 BDW Session 05
4/53
S pht trin cc cng ngh web
BDWS / Bi 6 4
8/2/2019 BDW Session 05
5/53
Gii thiu HTML5 (1)
BDWS / Bi 6 5
8/2/2019 BDW Session 05
6/53
Gii thiu HTML5 (2)
HTML5 l thhktipca HTML.
HTML5 s l chunmi cho HTML, XHTML, v HTML
DOM.
HTML5 vnang trong giai on pht trin. Tuy nhin,
huht cc trnh duythiniu c htr HTML5.
BDWS / Bi 6 6
8/2/2019 BDW Session 05
7/53
Cc th mi trong HTML5
Cc th ng ngha (cc th b cc, cc th quan h
lin kt)
Cc th Web Forms 2.0 (Cc trng nhp d liu)
Cc th a phng tin (th Audio, th Video)
Th ha 2D v 3D (Canvas, WebGL)
BDWS / Bi 6 7
8/2/2019 BDW Session 05
8/53
Cc th b cc (Layout) (1)
BDWS / Bi 6 8
8/2/2019 BDW Session 05
9/53
Cc th b cc (Layout) (2)
BDWS / Bi 6 9
Th M t Dng cho ni dung bn ngoi, nhvnbntmtbn tin,
blog, dinn hay btcni dung no khc tngun bnngoi.
Dng cho ni dung ngoi cc ni dung n c t. Nidung nmsang mt bn so vini dung xung quanh.
Dng cho chn trang ti liu hay mton ti liu, c thgm c tn tc gi, ngy to ti liu, thng tin lin h, thngtin vbnquyn.
Dng cho giithiu ti liuhocmton ti liu, c th baogmviciuhng.
Dng cho phniuhng Dng cho mton ti liu. V dnh cc chng, tiu ,
chn trang hay btcon ti liu no khc.
8/2/2019 BDW Session 05
10/53
V d v cc th b cc
B cc HTML5
BDWS / Bi 6 10
8/2/2019 BDW Session 05
11/53
Cc th biu mu HTML5 (1)
HTML5 c vi kiuu vo ivibiumu.
Nhngcimmi ny to cho cc iukhinnhp
liu v kim tra tnh hpldliutthn.
Cc kiunhpliu:o email
o url
o number
o range
o Cc trnh chn ngy thng (ngy, thng, tun, thi gian, ngythng)
o Mu tn kim
BDWS / Bi 6 11
8/2/2019 BDW Session 05
12/53
Cc th biu mu HTML5 (2)
Trnh duyt h tr
BDWS / Bi 6 12
Loinhpliu IE Firefox Opera Chrome Safari
email Khng Khng 9.0 Khng Khng
url Khng Khng 9.0 Khng Khng
number Khng Khng 9.0 Khng Khng
range Khng Khng 9.0 4.0 4.0
Date pickers Khng Khng 9.0 Khng Khng
search Khng Khng 11.0 Khng Khng
color Khng Khng 11.0 Khng Khng
8/2/2019 BDW Session 05
13/53
V d cc th biu mu HTML5
BDWS / Bi 6 13
E-mail: Homepage: Points:
Points:Date:
Kt qu trn trnhduyt Opera
8/2/2019 BDW Session 05
14/53
Video trn Web (1)
BDWS / Bi 6 14
8/2/2019 BDW Session 05
15/53
Video trn Web (2)
BDWS / Bi 6 15
c, codekinh d
8/2/2019 BDW Session 05
16/53
8/2/2019 BDW Session 05
17/53
Cc thuc tnh th Video
BDWS / Bi 6 17
Attribute Value Description
audio muted Xc nhtrng thi mcnhca audio. Hinti, ch c muted lcsdng.
autoplay autoplay Nu c, th video sbtu ngay khi sn sng.
controls controls Nu c, cc iukhinchinth, chnghn nt play.
height pixels Thitlpchiu cao ca video player
loop loop Nu c, video schilpilplimi khi kt thc.
poster url Xc nh URL canhthhin video.
preload preload Nu c, video scti khi ti trang, v sn sng chy. Bbqua nu c thuc tnh autoplay.
src url URL ca video chi
width pixels Thit lpchiurngca video player.
8/2/2019 BDW Session 05
18/53
8/2/2019 BDW Session 05
19/53
ha 2D v 3D
BDWS / Bi 6 19
8/2/2019 BDW Session 05
20/53
Th Canvas
Th canvas ca HTML5 sdng javascript v hnhtrn trang web.
Canvas l mt vng hnh chnht, v bniukhin
cttc cc pixel trn .
BDWS / Bi 5 20
8/2/2019 BDW Session 05
21/53
V d th Canvas
BDWS / Bi 5 21
8/2/2019 BDW Session 05
22/53
Gii thiu CSS3
CSS csdngiukhinkiu v bccca
trang web.
CSS3 l chunminhtca CSS.
CSS3 c nhngcimmicp 3 cak thut
W3C CSS, hin tih tr hon ho cc hiung
ha v cc kthuthot hnh tin tin.
BDWS / Bi 5 22
8/2/2019 BDW Session 05
23/53
Cc c im mi trong CSS3
ng bo trn
bng
Tnh trong sut
Hiu ng vn bn
H tr nhiu ct
Bin hnh v hot hnh
BDWS / Bi 5 23
8/2/2019 BDW Session 05
24/53
8/2/2019 BDW Session 05
25/53
Nhng m rng CSS canh cung cp c th (2)
thch ng vi vic pht hnh phn m rng ca
cc nh cung cp c th, chi tit k thut CSS nh
nghamtnhdngc th m cc nh cung cps
lm theo :
o '-' + id nh cung cp + '-' + thuc tnh
o '_' + id nh cung cp + '-' + attribute
V d:
o -moz-border-radius: 10px;
o -webkit-border-radius: 10px;
BDWS / Bi 5 25
8/2/2019 BDW Session 05
26/53
Tin t Tn t chc-ms- Microsoft
-mso- Microsoft Office
-moz- Mozilla Foundation (Gecko-based browsers)
-o- Opera Software-atsc- Advanced Television Standards Committee
-wap- The WAP Forum
-webkit- Safari (and other WebKit-based browsers)
-khtml- Konqueror browser
Nhng m rng CSS canh cung cp c th (1)
BDWS / Bi 5 26
8/2/2019 BDW Session 05
27/53
8/2/2019 BDW Session 05
28/53
CSS3 ng vin (2)
Trnh duyt h tr:
BDWS / Bi 5 28
8/2/2019 BDW Session 05
29/53
CSS3 ng vin cong
BDWS / Bi 5 29
/* CSS */
#roundedborder
{
border:2px solid #a1a1a1; padding:10px; background:#dddddd; width:300px;
-webkit-border-radius:25px; -moz-border-radius:25px; /* Firefox */
}
The border-radius property allows you to add rounded
corners to elements.
Kt qu
8/2/2019 BDW Session 05
30/53
CSS3 Hp c bng
BDWS / Bi 5 30
/* CSS */#shadowbox{
width:300px; height:100px; background-color:yellow;-moz-box-shadow: 10px 10px 5px #888888; /* Firefox */-webkit-box-shadow: 10px 10px 5px #888888; /* Safari and Chrome */box-shadow: 10px 10px 5px #888888;
}
Kt qu
8/2/2019 BDW Session 05
31/53
CSS3 ng vin nh
BDWS / Bi 5 31
/* CSS */#round{
border-width:15px; width:250px; padding:10px 20px;-moz-border-image:url(border.png) 30 30 round; /* Firefox */-webkit-border-image:url(border.png) 30 30 round; /* Safari and
Chrome */
border-image:url(border.png) 30 30 round;}
Here, the image is tiled (repeated) to fill the area.
Kt qu
8/2/2019 BDW Session 05
32/53
CSS3 trong sut
Thuc tnh opacity ca CSS3 cho php thay i
trong sutcamtphnt.
V dv trong sut 60% :o opacity: 0.6;
BDWS / Bi 5 32
8/2/2019 BDW Session 05
33/53
CSS3 - Web Fonts
Trc CSS3, cc nh thitk web phisdng font
ci trong my ngi dng.
Vi CSS3, cc nh thitk web c th nhng font s
dng quy tc @font-face.
Trnh duythtr :
BDWS / Bi 5 33
8/2/2019 BDW Session 05
34/53
CSS3 - Web Fonts V d
BDWS / Bi 5 34
/* CSS */@font-face{
font-family: myFirstFont;src: url('Sansation_Light.ttf')
}#content
{ font-family:myFirstFont;}
With CSS3, websites can finally use
fonts other than the pre selected"web-safe" fonts.
Kt qu
8/2/2019 BDW Session 05
35/53
CSS3 Hiu ng vn bn
CSS3 c mt vi c tnh mi dnh cho vn bn :
o text-shadow
o word-wrap
Trnh duyt h tr :
BDWS / Bi 5 35
8/2/2019 BDW Session 05
36/53
V d bng vn bn CSS3
BDWS / Bi 5 36
/* CSS */h1{
text-shadow: 5px 5px 5px#FF0000;}
Text-shadow effect!
Kt qu
8/2/2019 BDW Session 05
37/53
8/2/2019 BDW Session 05
38/53
CSS3 Nhiu ct
Vi CSS3, ngithitk web c thtonhiuctb tr cc onvnbn gingnh cc t bo.
Cc thuc tnh multiple column:o column-count
o column-gap
o column-rule
Trnh duythtr :
BDWS / Bi 5 38
8/2/2019 BDW Session 05
39/53
CSS3 V d v nhiu ct
BDWS / Bi 5 39
/* CSS */
.newspaper{
-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrome */-moz-column-gap:20px; /* Firefox */-webkit-column-gap:20px; /* Safari and Chrome */
}This is sample text. This is sample text. This is sample text. This is sample text.This is sample text. This is sample text. This is sample text. This is sample text.
Kt qu
8/2/2019 BDW Session 05
40/53
CSS3 Thay i
Sdngbin hnh trong CSS3, ngithitk web cth di chuyn,m rng, xoay, quay, v ko dn ccphnt.
Cc phngthcbin hnh 2d :o translate()
o rotate()o scale()
o skew()
Trnh duythtr :
BDWS / Bi 5 40
8/2/2019 BDW Session 05
41/53
Phng thc translate()
S dng phng thc translate(), mt phn t di
chuynv tr hintica n, phthuc vo cc is
truyn vo so vi bn tri (trc X) v so vinh(trcY).
V d, translate(50px,100px) schuynphn ti 50
pixel tnh t bn tri v 100 pixel tnh tnh.
BDWS / Bi 5 41
8/2/2019 BDW Session 05
42/53
8/2/2019 BDW Session 05
43/53
Phng thc rotate()
Phng thc rotate() quay phn t theo chiu kim
ng h mt gc . Cc gi tr m c php s
dng v quay phntngc kim ngh. V d, rotate(30deg) s quay mtphn t cng chiu
kim ngh 30 .
BDWS / Bi 5 43
8/2/2019 BDW Session 05
44/53
V d phng thc rotate()
BDWS / Bi 5 44
/* CSS */div{
margin:10px; width:100px; height:75px;background:lavender; border:1px solid black;
}
div#div2{
transform:rotate(30deg);-moz-transform:rotate(30deg);-webkit-transform:rotate(30deg);
}
Hello. This is a DIV element.Hello. This is a DIV element.
Kt qu
8/2/2019 BDW Session 05
45/53
Phng thc scale()
Phng thc scale() method quay tng hoc gim
kch thccamtphnt.
V d, scale(2,4) chuyn i chiu ngang gp i v
chiu cao gp 4 ln kch thcgcca n.
BDWS / Bi 5 45
8/2/2019 BDW Session 05
46/53
V d phng thc scale()
BDWS / Bi 5 46
/* CSS */div{
width:100px;height:75px;background-color:lavender;
border:1px solid black;}div#div2{
margin:100px;transform:scale(2,3);-moz-transform:scale(2,3);-webkit-transform:scale(2,3);
}Hello. This is a DIV element.Hello. This is a DIV element.
Kt qu
8/2/2019 BDW Session 05
47/53
8/2/2019 BDW Session 05
48/53
V d phng thc skew()
BDWS / Bi 5 48
/* CSS */div{
margin:20px; width:100px; height:75px;background-color:lavender;border:1px solid black;
}div#div2{
transform:skew(30deg,20deg);-moz-transform:skew(30deg,20deg);-webkit-transform:skew(30deg,20deg);
}
Hello. This is a DIV element.Hello. This is a DIV element.
Kt qu
8/2/2019 BDW Session 05
49/53
CSS3 - Hiu ng hot hnh (1)
Vi CSS3, chng ta c th to hot hnh thay cho
hnh nh ng, hot hnh flash v JavaScript trong
nhiu trang web.
Hiungbin hnh CSS lm thay i cch xuthin
mtphn t trn trnh duyt theo phng thcdch,
quay,
Trong CSS3, sdng @keyframe tohot hnh.
BDWS / Bi 5 49
8/2/2019 BDW Session 05
50/53
CSS3 Hiu ng hot hnh (2)
Trnh duythduyt :
BDWS / Bi 5 50
8/2/2019 BDW Session 05
51/53
V d v hot hnh CSS3
BDWS / Bi 5 51
/* CSS in Safari and Chrome */@-webkit-keyframes myfirst{
from {background: red;}to {background: yellow;}
}
#box{
width:100px; height:100px; background:red;animation: myfirst 5s;-webkit-animation: myfirst 5s; /* Safari and Chrome */
}
Animation
8/2/2019 BDW Session 05
52/53
Bi 6 Tng kt (1)
HTML5 l thh HTML ktip.
HTML5 s l chunmi cho HTML, XHTML, v HTML
DOM.
Cc th mi trong HTML5 :
o Cc th ng ngh (th b cc, cc th quan h lin kt )
o Cc th Web Forms 2.0 (Cc th nhp liu)
o a phng tin (th Audio Tag, th Video)
o
ha 2D v 3D (th Canvas, WebGL)
BDWS / Bi 5 52
8/2/2019 BDW Session 05
53/53
BDWS / Bi 5 53
Bi 6 Tng kt (2)
CSS3 l chunmtmi. CSS3 bao gm cc c im mi cp 3 ca k
thut W3C CSS vi cc hiu ng ha v cc kthuthot hnh mi.
c im CSS3 :o ng vin cong.
o bng.
o trong sut
o nh nn
o H tr thuc tnh Multi-column(Multi-column support)
o Bin hnh v hot hnh.