BDW Session 05

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


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


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


4/53

S pht trin cc cng ngh web

BDWS / Bi 6 4


5/53

Gii thiu HTML5 (1)

BDWS / Bi 6 5


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


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/53

Cc th b cc (Layout) (1)

BDWS / Bi 6 8


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.


10/53

V d v cc th b cc

B cc HTML5

BDWS / Bi 6 10


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


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


13/53

V d cc th biu mu HTML5

BDWS / Bi 6 13

E-mail: Homepage: Points:

Points:Date:

Kt qu trn trnhduyt Opera


14/53

Video trn Web (1)

BDWS / Bi 6 14


15/53

Video trn Web (2)

BDWS / Bi 6 15

c, codekinh d


16/53


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.


18/53


19/53

ha 2D v 3D

BDWS / Bi 6 19


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


21/53

V d th Canvas

BDWS / Bi 5 21


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


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


24/53


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


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


27/53


28/53

CSS3 ng vin (2)

Trnh duyt h tr:

BDWS / Bi 5 28


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


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


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


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


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


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


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


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


37/53


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


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


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


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


42/53


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


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


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


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


47/53


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


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


50/53

CSS3 Hiu ng hot hnh (2)

Trnh duythduyt :

BDWS / Bi 5 50


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


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


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.

Documents

BDW Session 05