BI 1

NHNG KHI NIM U TIN V HTML5

MC TIU BI HC
nh ngha v HTML5
Tng qut v c php ca HTML5
Mt s thnh phn mi ca HTML5
Tng quan v HTML5 API (giao din lp trnh ng
dng) v cng ngh h tr
Gii thiu CSS3

Slide 1 - Nhng khi nim u tin v HTML5

NH NGHA HTML5

NH NGHA HTML5
Thnh phn ca HTML5:

Th HTML mi
Thuc .nh CSS3

HTML5

Javascript
Cng ngh h tr tch bit

Slide 1 - Nhng khi nim u tin v HTML5

NH NGHA HTML5
HTML5 v h HTML5:
HTML5:
L nhng thnh phn nh du/ c php mi
Cc th (tag)
V d: <ul>, <li>, <div>,

H HTML5:
Bao gm cc th mi
Cng ngh mi: CSS3, Geolocation, Web storage, web
workers, web socket
Tc dng ca cng ngh mi:
Cung cp tnh nng mnh m cho b cng c
To ra website hu dng & tinh xo
Slide 1 - Nhng khi nim u tin v HTML5

NH NGHA HTML5
Phm vi s dng HTML5:
PC
Thit b di ng & smartphone
.......

Slide 1 - Nhng khi nim u tin v HTML5

TNG QUAN V C PHP HTML5

TNG QUAN V C PHP HTML5

Ngn ng HTML5 gii thiu mt s th/ thnh phn
mi gip cu trc trang web c logic thit thc
hn
Phin bn trc

HTML5

<div id="header" > This is my header

</div>


#header { width:960px; height:100px;
background-color:gray;
}

<header> This is my header </

header>


header { width:960px; height:100px;
background-color:gray;
}

Slide 1 - Nhng khi nim u tin v HTML5

TNG QUAN V C PHP HTML5

Thnh phn mi trong HTML5:
A: <header>
B: <nav>
C: <section>
D:<article>
E: <aside>
F: <footer>

Slide 1 - Nhng khi nim u tin v HTML5

TNG QUAN V C PHP HTML5

Tn ca thnh phn mi da theo tn cc thnh
phn thng dng c s dng trong phn b cc
trang web hin nay (div id="footer",div
id="nav",...).
Tc dng ca cc thnh phn mi trong HTML5:
Gim bt s ph thuc vo th <div>
Thay th bi mt cu trc trang web thng nht, d
c hn

HTML5 khng thay th bt k c php HTML no;

m ch b sung thm cc thnh phn (th) mi
vo danh sch hin c
Slide 1 - Nhng khi nim u tin v HTML5

10

MT S THNH PHN MI CA
HTML5

THNH PHN MI CA HTML5

Mt s thnh phn mi:

<video>
<audio>

Thnh phn

<canvas>
Web form
.

Slide 1 - Nhng khi nim u tin v HTML5

12

THNH PHN MI CA HTML5

<video> v <audio>:
Cho php nhng video v file m thanh vo trang web
Khng cn s dng ti plug-in ca trnh duyt
Video
<video src="catz.mp4" width="400"
height="300"></video>

Slide 1 - Nhng khi nim u tin v HTML5

m thanh
<audio src="high_seas_rip.mp3"
controls preload="auto" autobuer>
</audio>

13

THNH PHN MI CA HTML5

Slide 1 - Nhng khi nim u tin v HTML5

14

THNH PHN MI CA HTML5

<canvas>:
Cung cp cc tnh nng v v hot hnh
Lm vic ging nh mt bng v trn trang web
C th thm cc m JavaScript hoc cc tnh nng
hot hnh mi ca CSS3 lm cho i tng c
to ra trn bng v di chuyn, bin mt, thay i t
l, ...
Lu hnh nh va v di dng .png

Slide 1 - Nhng khi nim u tin v HTML5

15

THNH PHN MI CA HTML5

Khai bo <canvas>:
<canvas id="myCanvas"></canvas>

S dng javascript:
<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>

Slide 1 - Nhng khi nim u tin v HTML5

16

THNH PHN MI CA HTML5

Web form:
Thnh phn form mi trong HTML khi c thc thi
s gip qu trnh lm vic vi cc form tr nn d
dng hn so vi hin ti
<input type="email" required>

Slide 1 - Nhng khi nim u tin v HTML5

17

THNH PHN MI CA HTML5

Mt s thnh phn mi khc:
<figure>, <figurecaption>: gn nhn (hoc ch thch
nh) cho cc hnh nh trn trang web
<hgroup>: nhm mt tp cc thnh phn vo mt
thnh phn hp l
.

Slide 1 - Nhng khi nim u tin v HTML5

18

TNG QUAN V HTML5 API

TNG QUAN V HTML5 API

API (Application Programming Interfaces giao din
lp trnh ng dng):
L cch to ra cc ng dng s dng cc thnh phn
c dng sn
Khng ch c p dng trong pht trin web m
cn c vi cc ngn ng kch bn
Mc ch chnh ca API l chun ha c ch lm
vic v n gin ha cc nhim v lp trnh phc tp
Mt s HTML5 API: Drag and Drop, Web storage,
Microdata,v Geolocation

Slide 1 - Nhng khi nim u tin v HTML5

20

TNG QUAN V HTML5 API

API Geolocation:
Gip xc nh v tr a l ca trnh duyt web.
Thng tin ny c s dng gi di dng d
liu lin quan da trn v tr
Geolocation hin ti ang c kch hot trong mt
s trnh duyt hin i

Slide 1 - Nhng khi nim u tin v HTML5

21

TNG QUAN V HTML5 API

V d :flickr.com/map

Slide 1 - Nhng khi nim u tin v HTML5

22

TNG QUAN V HTML5 API

Web workers:
WebWorkers l mt framework (nn tng) gii quyt
vn hiu sut ca trnh duyt
L m kch bn chy trn mt lung ring bit

Web storage:
Ci tin cookie ca trnh duyt
Cookie l mt cng ngh b gii hn v kh khn cho
cc nh thit k c th s dng.
Web storage nng cp m hnh ny cung cp
khng gian lu tr ln hn cho cc ng dng web
hin i
Slide 1 - Nhng khi nim u tin v HTML5

23

TNG QUAN V HTML5 API

localStorage:
D liu c th truy cp ti bt
k thi im no, ngay c khi
ng trnh duyt hoc khi h
thng khi ng li
Web storage
sessionStorage:
D liu b mt i khi ng
trnh duyt

Slide 1 - Nhng khi nim u tin v HTML5

24

CSS3

CSS3
CSS3 khng phi l mt thnh phn ca HTML5,
nhng li c mi lin quan mt thit vi HTML5
CSS3 c pht trin song song vi HTML5

Slide 1 - Nhng khi nim u tin v HTML5

26

CSS3
Mt s thnh phn CSS3 mi:
CSS animation (CSS hot hnh)
CSS transition (CSS chuyn i)
CSS 2D/ 3D transformation: transform
CSS3 background, border, RGAa color, gradient, drop
shadows, gc bo trn, .: border-radius, backgroundimage, border-image
Web font: @font-face

Slide 1 - Nhng khi nim u tin v HTML5

27

TNG KT
HTML5 cung cp cc thnh phn mi, da theo tn
cc thnh phn thng dng c s dng trong
phn b cc trang web: footer, nav, section, article,
aside, footer
Mt s thnh phn mi ca HTML5: <video>,
<audio>, <canvas>,
API: L cch to ra cc ng dng s dng cc thnh
phn c dng sn
Mt s HTML5 API: Drag and Drop, Web storage,
Microdata,v Geolocation

CSS3 khng phi l mt thnh phn ca HTML5,

nhng li c mi lin quan mt thit vi HTML5
Slide 1 - Nhng khi nim u tin v HTML5

28