CC QUY TC C BN CA HTML5html 5, html5 c bn, html5 l g, s khc bit gia html thun v html5,ti liu v html, kha hc chuyn su v html & css ti h ni, o to lp trnh bng hmtl v css ti h ni, Cc quy tc c bn ca HTML51.S lc v HTML5HTML5 phn nh nhng thay i to ln theo cch m by gi bn kinh doanh trn web v trong m my. y l bi vit u tin trong lot bi bn phn c thit k tp trung vo nhng thay i trong HTML5, bt u bng cc th mi v t chc trang v cung cp thng tin cp cao v thit k trang web, to cc biu mu, s dng v gi tr ca cc API, v cc kh nng sng to m Canvas (Khung nn nh) cung cp.HTML5 cung cp cc cng c qun l d liu, ha, video, v m thanh c hiu qu. N to iu kin cho s pht trin ca cc ng dng gia cc trnh duyt vi nhau cho trang web cng nh cho cc thit b di ng.HTML5l mt trong nhng cng ngh thc y nhng ci tin trong cc dch v in ton m my di ng, v n tnh n tnh linh hot rng hn, cho php pht trin cc trang web th v v c kh nng tng tc. N cng a vo th v cc ci tin mi, bao gm cu trc thu nh, cc nt iu khin ca biu mu, cc API, a phng tin, h tr c s d liu, v tc x l nhanh hn ng k.Cc th mi trong HTML5 c tnh hp dn cao, bao gm c vai tr v cch s dng ca chng. Cc phin bn trc ca HTML thng dng cc th khng c g ni bt c. Tuy nhin, HTML5 c cc nhn trc quan, c kh nng m t cao. N cung cp cc nhn ni dung phong ph ngay lp tc xc nh ni dung. V d, th c b sung bng cc th v . Ngoi ra cc th , , , v cng a ra s m t chnh xc hn v cc kiu ni dung c th.HTML5cung cp: Cc th m t chnh xc nhng g chng c thit k cha ng. Tng cng kh nng truyn thng trn mng. Ci thin kh nng lu tr chung. Cc trnh lm vic trn nn Web (Web Workers) chy cc qu trnh nn. Giao din WebSocket thit lp kt ni lin tc gia cc ng dng c tr v my ch. Truy vn d liu c lu tr tt hn. Ci thin tc np v lu trang. H tr cho CSS3 qun l giao din ngi dng ha (GUI), c ngha l HTML5 c th c nh hng ni dung. Ci thin x l biu mu trnh duyt. Mt API c s d liu da trn-SQL cho php lu tr cc b, pha my khch.. Canvas v video, thm ha v video m khng cn ci t cc plug-in ca bn th ba. c t Geolocation API (API nh v ton cu), s dng kh nng nh v ca my in thoi thng minh kt hp cc dch v v cc ng dng m my di ng. Cc biu mu ci tin lm gim nhu cu phi ti v m JavaScript, cho php truyn thng hiu qu hn gia cc thit b di ng v cc my ch in ton m my.HTML5 to ra s tri nghim ngi dng hp dn hn: Cc trang c thit k bng HTML5 c th cung cp mt tri nghim ging nh vi cc ng dng ca my tnh bn. HTML5 cng cung cp pht trin nhiu nn tng nng cao bng cch kt hp kh nng ca cc API vi s c mt khp mi ni ca trnh duyt. Khi s dng HTML5, cc nh pht trin c th cung cp mt tri nghim ng dng hin i, tri chy qua cc nn tng.Khi bn ni HTML5, bn ang s dng php tc k cho s i mi lin tc. Cc th mi, cc phng thc mi, v mt framework pht trin chung da trn s tc ng ln nhau ca HTML5 v hai i tc ca n, CSS3 v JavaScript. y l ct li ca hin tng x l ng dng ly my khch lm trung tm. Ngoi cc vic trin khai cc k thut v cc phng thc ca cng ngh HTML5 cho my tnh bn, c th trin khai thc hin HTML5trong nhiu trnh duyt in thoi di ng web c tnh nng phong ph mt th trng ang pht trin, khi chng kin s ph bin ca cc h iu hnh web Apple iPhone, Google Android, v cc in thoi chy Palm.Mt kha cnh quan trng v sc mnh ca HTML5 l lp bn thng tin hoc chn ni dung, nu bn thch to ra mt qu trnh d hiu hn nhiu. Bn c th thy cng c ny thch hp cho vic thit k v pht trin hiu qu nh th no nh u th ngy cng tng ca n trong th gii x l web.HTML5 bo hiu s ra i ca mt qu trnh ng ngha c hiu qu hn mc vn bn v kim sot tt hn qua vic xy dng v s dng cc biu mu. Tt c nhng c im ny v nhiu im tt p khc na trong s i mi HTML5 l c s cho s thng tr ngy cng tng ca m hnh ny. Nhiu thc th c quan, thng mi v cc t chc khc na thm ch nhiu t chc trong s hu nh lin quan rt t n vic x l thng tin v truyn thng nh l hot ng c quan chnh ca h theo mc ny hay mc khc b trn ngp bi s pht trin ca hin tng ang pht trin ny.HTML5khng phi l cy n thn, v cng khng c g l thn thnh c. Tuy nhin, cc ti sn k thut v phng php lun ca n bin n tr thnh mt th tuyt vi khi bn mun tip cn.Lp k hoch trangBn s to mt trang web n gin. Trong qu trnh ny, ti tho lun mt s th mi c a vo trong HTML5. c hiu qu cao, bn phi lp k hoch xem xt tt c cc thnh phn bn mun ch to.Trang web m bn to ra s c thit k cao cp c hin th trong Hnh 1. Thit k trang c mt vng Header (Tiu ), mt vng Navigation (Chuyn hng), mt vng Article (Bi vit) c cha ba Section (phn), mt Aside (Nhn xt), v cui cng, l vng Footer (Chn trang). Trang ny c thit k lm vic trong trnh duyt Google Chrome, tr mt s th ln xn thy c, c th xy ra cng vi kh nng tng thch gia cc trnh duyt, bt ngun t vic hiu chnh cng nh cn tr hiu bit v cu trc c bn. Mc ch l to ra mt trang m t r rng vic s dng cc th HTML5 mi, cho thy bn c th s dng chng nh th no to ra m ng nh dng v thit k trang ngn gn.Hnh 1: K hoch trang web

Trong qu trnh to trang ny, ti ng phi CSS3, cn thit biu th ng cc trangHTML5.CSS3l cn thit cho nh kiu, chuyn hng, v cm nhn chung v trang HTML5. Cc nhm c tnh ca n, m bn c th tm thy ti trang web tham kho CSS3W3Schools, bao gm mt s phn t c ch nh nn, phng ch, phng mn, v hnh nh ng.Tuy nhin, trc khi bn bt u xy dng trang web ny, bn cn phi tm hiu v mt s th mi ca HTML5.Vng HeaderVng Header v d cha tiu v ph trang. Bn s dng th to ra ni dung cho vng Header ca trang. Th c th cha thng tin m v mt v ngoi chnh trang web . Trang web c to ra y c mt vng Header cho trang ny, c hin th trong thit k cao cp, cng nh vng Header bn trong vng Article v Section. Lit k 1 a ra mt v d nh du th .Lit k 1. V d th

Heading Text Text or images can be included here Logos are frequently placed here too

Th cng c th cha mt th , nh trong Lit k 2. Th to nhm cc tiu vi nhau, bng cch s dng cc mc tiu n c hin th y c mt tiu chnh (Main Heading) v mt ph (Sub-heading).Lit k 2. V d th

Main Heading Sub-heading Text or images can be included here

Vng NavigationBn to vng Navigation (Chuyn hng) ca trang bng cch s dng th . Phn t nh ngha mt vng c bit dnh cho vic chuyn hng. Th nn c s dng chuyn hng trang web chnh, khng dng thit lp cc lin kt c cha trong cc vng khc ca trang. Vng Navigation ny c th cha m nh c hin th trong Lit k 3.Lit k 3. V d th

Home

About Us

Our Products

Contact Us

Cc vng Article v SectionTrang web m bn ang thit k c cha mt phn Article, gi ni dung thc s ca trang. Bn s dng th to vng ny, v th nh ngha ni dung c th c s dng c lp vi cc ni dung khc c tm thy trn trang ny. V d, nu bn mun to ra mt ngun cp d liu RSS, bn c th s dng xc nh ni dung duy nht. Th xc nh ni dung c th c g b v c t trong ng cnh khc v c th hon ton d hiu.Vng Article trong k hoch ca Acme United c cha ba vng Section. Bn to ra cc vng ny bng cch s dng th . Mt cha cc vng thnh phn ca ni dung trang web c lin quan . Th v th na c th cha cc header (tiu ), cc footer (chn trang), hoc bt k cc thnh phn no khc cn thit hon thnh phn ny. Th dng cho ni dung to nhm. Ni dung cho c hai th v th thng bt u bng mt v kt thc bng mt , vi ni dung cho th ny gia.Th cng c th cha cc th , cng ging nh th c th cha cc th . Th nn c dng to nhm cc thng tin ging nhau, v th nn c s dng cho cc thng tin nh mt bi vit hoc mt blog m chng c th b g b v c t trong mt ng cnh mi m khng nh hng n ngha ca ni dung. Th nh tn gi ca n, cung cp mt gi thng tin y . Ngc li, th cha thng tin lin quan, tr thng tin khng th c t trong mt ng cnh khc vi chnh n, do ngha ca n s b mt.Xem Lit k 4 vi mt v d v cch s dng th v .Lit k 4. V d th v th

Content Content

Content Content

Cc phn t hnh nhC hai th v th cng nh th v th c th cha th . Bn s dng th ny cha cc nh, cc s , v cc nh chp.Th c th cha th , th ny cha ln lt cc ch thch cho hnh minh ha c trong th , cho php bn nhp mt m t c th gn hnh minh ha cht ch hn vi ni dung. Lit k 5 a ra mt v d v cu trc th v th .Lit k 5. V d th v th

Caption for the figure

Cc phn t a phng tinCc th v cng c th cha cc phn t phng tin khc nhau. HTML5 cung cp cc th truyn t nhanh ni dung ca chng. Cc phn t a phng tin, chng hn nh m thanh v video trc y thng ch c nhng vo, by gi c th c s dng chnh thng hn.Th xc nh ni dung m thanh, chng hn nh m nhc hoc lung m thanh khc bt k. Th c cc thuc tnh kim sot nhng g, khi no, v lm th no pht m thanh. Cc thuc tnh l src, preload (np trc), control (iu khin), loop (vng lp), v autoplay (pht t ng). Trong v d Lit k 6, m thanh bt u pht ngay sau khi ti trang ny v s pht lin tc, ng thi hin th cc nt iu khin ngi dng c th dng li hoc pht li m thanh.Lit k 6. V d th

Your browser does not support the audio tag.

Th cho php bn pht cc on video hoc to lung phng tin trc quan. N c tt c cc thuc tnh ca th cng thm ba thuc tnh na l: poster (qung co), width (chiu rng), v height (chiu cao). Thuc tnh poster cho php bn xc nh mt hnh nh c s dng trong khi video ang ti hoc trong hon cnh khng may khi cc video s khng ti c cht no.Lit k 7 cung cp mt v d v cu to th .Lit k 7. V d th

Your browser does not support the video tag

Cc th v c th cha th , nh ngha ti nguyn a phng tin cho cc th v . Vi phn t ny, bn nh r cc tp video v m thanh thay th t cc tp ny sau trnh duyt c th la chn da vo kiu phng tin ca mnh hoc s h tr ca codec (b m ha/gii m). Trong Lit k 8, c hai s la chn. Nu khng th pht phin bn WMA ca tp ny trong trnh duyt ang c s dng, th hy th MP3. Nu khng, s hin th thng bo ngi s dng bit l do m thanh khng c sn.Lit k 8. V d th

Your browser does not support the HTML 'audio' element.

Th nh ngha ni dung nhng c th c a vo mt trang v d, mt plug-in cho cc tp SWF ca Adobe Flash. Lit k 9 c cha thuc tnh type (kiu), xc nh ngun nhng l mt tp Flash.Lit k 9. V d th

Ngoi cc thuc tnh src v type, th cn c thuc tnh height (chiu cao) v width (chiu rng).Vng AsideBn to vng Aside theo k hoch Acme United bng cch s dng th . Hy s dng th ny khi bn mun to ni dung b sung m khng cn ch no thm vo bi vit. Trong cc tp ch, cc vng nhn xt thng c s dng lm ni bt mt im no v c thc hin trong chnh bi vit . Th cha ni dung c th c loi b m khng nh hng n cc thng tin c truyn t bi bi vit, phn on, hoc trang cha n.Lit k 10 a ra mt v d v cch s dng th .Lit k 10. V d th My family and I visited Euro Disney last year.

Disney in France Besides Euro Disney, there is a Disneyland in California.

Vng FooterPhn t cha thng tin v mt trang, bi vit, hoc mt phn, chng hn nh tc gi hoc ngy vit bi. L phn cui trang, n c th cha bn quyn hoc cc thng tin php l quan trng khc, nh trong Lit k 11.Lit k 11. V d th

Copyright 2011 Acme United. All rights reserved.

Cu trc mt trang

By gi bn bit cc th c bn cn thit to ra mt trang HTML5, chng ta hy bt u xy dng trang web ca bn. Bn s xy dng mt trang web cho Acme United. Trang hon thnh c hin th trong Hnh 2 v bn c th ti v s dngNo, chng ta hy xy dng mt trang web. Trc tin, c . Trong HTML5, c n gin ha: Tt c mi th bn cn nh l html. Vic ny khng ch lm n gin ho mc nhp cho th ny, m cng lm cho n c th nng cp d dng hn. Lu rng n khng c gi l html5, m ch l html. Bt k c bao nhiu phin bn HTML i na, th lun lun c th ch l html.Th cha tt c cc phn t HTML khc, tr th . Tt c cc phn t khc phi c lng vo gia th v . Xem Lit k 12.Lit k 12. V d th

Sau khi ch ra ni dung l html v ngn ng ting Anh, bn c phn t , c th cha cc on script (kch bn lnh), thng tin h tr trnh duyt, cc lin kt bng nh kiu, siu thng tin, v cc hm khi to khc. Bn c th s dng cc th sau trong phn head: Th (u ) l ni cha tiu hin ti ca trang v l mt phn t ca phn cn thit. l tiu m bn nhn thy pha trn cng ca trnh duyt khi xem trang. Th trong Lit k 13 xc nh bng nh kiu CSS3 s c s dng biu th trang HTML5. Bng nh kiu c gi l main-stylesheet.css.Lit k 13. V d th

HTML5 Fundamentals Example

Tip theo, bn s dng th , ngay sau cc th v , c m t trn. Vng trong v d ny cha tn ca cng ty ca bn, gi s l Acme United, v vng cha cc thng tin thng bo cho bn rng l ph "A Simple HTML5 Example". Lit k 14 m t iu ny.Lit k 14. V d th v th

Acme United A Simple HTML5 Example

Cho n nay CSS3 thng dng thit lp trang c hin th trong Lit k 15. Trc tin, bn thit lp phng ch cho trang, sau n cc chi tit cho phn thn. Bn nh ngha cc kch thc ca phn thn, ri thit k cu trc on tiu cho cc th tiu cp u tin v cp th hai. y l cc tiu m bn s s dng cho trang ny.Lit k 15. v d CSS3 #1* { font-family: Lucida Sans, Arial, Helvetica, sans-serif;}body { width: 800px; margin: 0em auto;}header h1 { font-size: 50px; margin: 0px; color: #006;}header h2 { font-size: 15px; margin: 0px; color: #99f; font-style: italic;}

Lit k 16 hin th th , c thit k x l chuyn hng trang web chnh.Lit k 16. V d th

Home

About Us

Contact Us

HTML5 cng c mt th mt th gy ra s nhm ln i vi mt s nh thit k v pht trin. S nhm ln bt ngun t thc t hiu lm rng vic chuyn hng ny l "navigation menu". Th , b phn i trong HTML k t phin bn 4.01 v gi y c ti sinh trong HTML5, c thit k tng cng tnh tng tc. Khng nn s dng n cho vic chuyn hng chnh. Th duy nht nn c s dng cho vic chuyn hng chnh l th . Bn s s dng th sau trong v d ny.nh dng ca chuyn hng c CSS3 x l. Mi nh ngha th c hin th trong Lit k 17 i din cho mt trng thi c th ca cc phn t

v

bn trong th .Lit k 17. V d CSS3 #2nav ul { list-style: none; padding: 0px; display: block; clear: right; background-color: #99f; padding-left: 4px; height: 24px;}nav ul li { display: inline; padding: 0px 20px 5px 10px; height: 24px; border-right: 1px solid #ccc;}nav ul li a { color: #006; text-decoration: none; font-size: 13px; font-weight: bold;}nav ul li a:hover { color: #fff;}

Tip theo l vng Article. Vng ny, c nh ngha bng th , cha thng tin ring ca mnh. Th c trong th cng cha mt th ring ca mnh. Xem Lit k 18.Lit k 18. V d th v

Article Heading Primum non nocere ad vitam Paramus . . . This is the first section heading Scientia potentia est qua nocent docentp . . .

Lit k 19 cho thy cch nh du CSS3 biu th ra nh dng ny. Lu rng nh ngha cho cc vng paragraph (on), header, v section tt c u c nh ngha cho th c cha chng trong . Th c nh ngha y khng c cng nh dng nh th c nh ngha mc page (page-level).Lit k 19. V d CSS3 #3article > header h1 { font-size: 40px; float: left; margin-left: 14px;}article > header h1 a { color: #000090; text-decoration: none;}article > section header h1 { font-size: 20px; margin-left: 25px;}article p { clear: both; margin-top: 0px; margin-left: 50px;}

Th th hai trong cha cng thng tin c bn nh u tin, nhng ln ny bn s s dng mt th , mt th , mt th >, v mt th . Xem Lit k 20.Th c s dng y trnh by thng tin khng phi l mt phn ca lung quanh n. Th cha mt nh ha ca Stonehenge. Th ny cng cha th , m bn s dng to cc button c cc tn l 4 Muse. Khi mt trong cc nt ny c nhn, n cung cp thng tin v Muse c th. Th c s dng bn trong th lm ni bt cc tveni, vidi, vici.Lit k 20. V d th v

Second section with mark, aside, menu & figure . . . veni, vidi, vici. Mater . . . This is an aside that has multiple lines. . . . Clio Thalia Urania Calliope Figure 1. Stonehenge

CSS3 cho phn ny c mt nh ngha mi cho th c chiu rng ngn hn chiu rng m bn t cho trang ny. S thay i ny cho php hin th nhng nhn xt bt u bn phi ch khng ln vn bn. Lit k 21 cho thy cch nh du ny.Lit k 21. V d CSS3 #4article p.next-to-aside { width: 500px;}article > section figure { margin-left: 180px; margin-bottom: 30px;}article > section > menu { margin-left: 120px;} aside p { position:relative; left:0px; top: -100px; z-index: 1; width: 200px; float: right; font-style: italic; color: #99f;}

Cc phn t videoy l thnh phn cui cng ca phn t : phn video. Video v d l mt nh dng ogg t ng pht khi trang c ti, pht lin tc, v cung cp cc nt iu khin tm dng v pht. Ngy nay, c nhiu trng hp cc video nh dng ogg s dng phn m rngogv(vcho video), nh trong Lit k 22. Th lm vic theo cng cch ny.Lit k 22. V d v This is a video section This video will work in Mozilla Firefox or Google Chrome only.

Lit k 23 cung cp cc nh ngha CSS3 cho phn video.Lit k 23. V d CSS3 #5article > section video { height: 200px; margin-left: 180px;}article > section div.no-html5-video{ height: 20px; text-align: center; color: #000090; font-size: 13px; font-style: italic; font-weight: bold ; background-color: #99f;}

Phn t footer v kt thc trang ny c hin th trong Lit k 24.Lit k 24. V d th Copyright: 2011 Acme United. All rights reserved.

CSS3 cho phn t footer c hin th trong Lit k 25.Lit k 25. V d CSS3 #5footer p { text-align: center; font-size: 12px; color: #888; margin-top: 24px;}