Mng my tnh 2015i Hc Bch Khoa H NiVin Cng Ngh Thng Tin V Truyn Thng

Bo co bi tp ln mnMNG MY TNH s 4: Tm hiu HTML5 v xy dng mt trang web n gin bng HTML5

Sinh vin:Nguyn Vn DngNguyn Thnh Huy2010128720131778

Ging vin: ThS. Bi Trng Tng

H Ni-2015

MC LC

1.HTML l g?31.1.Gii thiu.31.2.Lch s.31.3.Cu trc ti liu HTML41.4.HTML Tags51.5.XHTML.51.6.DHTML62.HTML5.62.1.Gii thiu.62.2.Nhng im mi trong HTML572.2.1.Khai bo DOCTYPE trong HMTL5 l rt n gin.72.2.2.Cu trc vn bn72.2.3.New input types92.2.4.New input attributes102.2.5.HTML5 Graphics112.2.6.New media elements123.Xy dng webside.143.1.Cu trc trang web143.2.Giao din trang web.153.3.HTML5 new input types and attributes153.4.HTML5 Graphics173.5.HTML5 Media20Ti liu tham kho.23

1. HTML l g?1.1. Gii thiu.HTML (ting Anh, vit tt cho HyperText Markup Language, hay l ngn ng nh du siu vn bn) l mt ngn ng nh du c thit k to nn cc trang web vi cc mu thng tin c trnh trn World Wide Web. HTML tr thnh mt chun Internet do t chc World Wide Web Consortium (W3C) duy tr.Phin bn chnh thc mi nht ca HTML l 4.01 (1999). Sau cc nh pht trin thay th n bng XHTML. Hin nay HTML ang c pht trin tip vi phin bn HTML5 ha hn mang li din mo mi cho Web.HTML khng phi l mt ngn ng lp trnh, n l ngn ng nh du s dng cc th HTML biu din trang web.Mi ti liu HTML (HTML document) l mt trang web.Cc th HTML cn c gi l cc phn t HTML (hay HTML element)1.2. Lch s.Ngy nay, HTML tr thnh ngn ng ch yu xy dng, thit k cc trang web. HTML c to ln u tin bi Berners-Lee nm 1991 nhng phin bn HTML 2.0 l chun HTML u tin c cng b chnh thc nm 1995. HTML 4.01 l mt phin bn ln ca HTML c cng b nm 1999 v l phin bn c s dng rng ri nht cho n tn ngy nay. Hin ti chng ta c phin bn HTML5 l mt s m rng ca HTML 4.01 v c cng b chnh thc vo nm 2012.

1.3. Cu trc ti liu HTMLMt ti liu HTML thng c cu trc nh sau.

Mt ti liu HMTL phi bt u bng th , v thng c chia thnh 2 phn chnh l phn u (header) v phn thn (body).Phn header bao gm cc thng tin v ti liu, nh l b k t s dng, tiu ca trang web, nhng lin kt n file c s dng trong ti liu nh CSS hoc javascriptPhn body trnh by ni dung trang web.1.4. HTML TagsNh ni trc , HTML l mt ngn ng nh du, s dng cc th khc nhau nh ng ni dung.HTML tag l t kha (tag name) c bao quanh bi cp du m ().

HTML tag thng i theo cp Th u tin c gi l th bt u (start tag) v th th 2 c gi l th kt thc (end tag) Th kt thc c vit tng t th bt u nhng them u gch cho (/) trc tn th.1.5. XHTML.XHTML (vit tt ca ting Anh Extensible HyperText Markup, ngn ng nh du siu vn bn m rng) l mt ngn ng nh du c cng kh nng nh HTML, nhng c c php cht ch hn.N lc tch phn ni dung ra khi phn hnh thc trnh by ca trang HTML a n s xut hin ca cc chun mi nh XHTML. Cc chun ny nhn mnh vo vic s dng th nh du vo vic xc nh cu trc ti liu nh phn mc, on vn, khi vn bn trch dn v cc bng ch khng khuyn dung cc th nh du mang tnh cht trnh by trc quan nh , . Nhng m mang tnh cht trnh by c loi b khi HMTL4.01 Strict v cc c t XHTML nhm to iu kin cho CSS. CSS cung cp mt gii php nhm gip tch cu trc HTML ra khi phn trnh by ni dung ca n.Mt s im khc bit gia HTML v XHTML Cc phn t phi c lng nhau ng cch: Trong HTML cc phn t c th c lng nhau khng ng th t nhng trong XHTML khng cho php iu . Phi c t dng chun (well formed): Tt c cc phn t XHTML phi c t lng bn trong phn t gc . Tt c cc phn t khc c th c cc phn t con. Cc phn t con phi i theo cp v phi c t lng nhau ng cch bn trong phn t m. Tn gi ca th u phi vit thng: Do XHTML k tha c php ca XML v mi trang XHTML c phn bit ch hoa ch thng, iu ny khng c trong HTML. Tt c cc phn t phi c ng: Trong HTML chp nhn mt s phn t khng phi ng nhng XHTML yu cu tt c cc th phi c ng. Cc gi tr ca thuc tnh phi c t trong du nhy kp: HTML chp nhn mt s thuc tnh c th khng t trong du nhy kp nhng XHTML yu cu phi thc hin iu ny. Vic ti gin thuc tnh l b nghim cm.1.6. DHTMLHTML ng hay DHTML (vit tt ting Anh: Dynamic HTML) l mt th hin ca vic to ra mt trang Web bng cch kt hp cc thnh phn: ngn ng nh du HTML tnh, ngn ng kch bn my khch (nh javascript) v ngn ng trnh din CSS v DOM.2. HTML5.2.1. Gii thiu.HTML5 l th h th 5 ca ngn ng HTML, xut hin vo thng 12 nm 2012, l mt ng vin c gii thiu bi W3C. Mc tiu ct li khi thit k ngn ng l ci thin kh nng h tr cho a phng tin mi nht trong khi vn gi n d dng c c bi con ngi v lun hiu c bi cc thit b v cc chng trnh my tnh nh trnh duyt web.HTML vn gi li nhng c im c bn ca HTML4 v b sung thm cc c t ni tri ca XHTML, DOM cp 2, c bit l JavaScript.L phin bn tip sau ca HTML 4.01, HTML5 phn nh thc t rng HTML v XHTML c s dng ph bin trn World Wide Web l mt hn hp cc tnh nng vi cc thng s k thut khc nhau, c gii thiu bi nhiu nh sn xut phn mm, cng vi cc sn phm phn mm c gii thiu nh trnh duyt web, nhng ngi thnh lp ph bin thc t v c qu nhiu li c php trong cc vn bn web. y l mt n lc xc nh mt ngn ng nh du duy nht c th c vit bng c php HTML hoc XHTML. N bao gm cc m hnh x l chi tit tang tnh tng thch, m rng, ci thin v chun ha cc nh du c sn cho ti liu, v a ra cc nh du mi v gii thiu giao din lp trnh ng dng (API) to ra cc ng dng web phc tp. Cng mt l do nh vy, HTML5 l mt ng vin tim nng cho nn tng di ng.c bit HTML5 c thm nhiu tnh nng c php mi. Chng bao gm cc th mi nh , v cc thnh phn , cng nh s tch hp cc ha vector c kh nng m rng ni dung v MatML cho cc cng thc ton hc. Nhng tnh nng ny c thit k lm cho n d dng bao qut, x l a phng tin v ni dung ha trn Web m khng cn phi dng n qun s hu b sung v APIs.Cc yu t mi khc nh, , , , c thit k lm phong ph thm ni dung ng ngha ca ti liu. HTML5 cng xc nh c th mt s cc x l cn thit cho cc ti liu khng hp l cc li c php s c x l thng nht ca tt c cc trnh duyt ph hp v cc tc nhn ngi dng khc.2.2. Nhng im mi trong HTML52.2.1. Khai bo DOCTYPE trong HMTL5 l rt n gin.Khai bo phi c t u tin trong ti liu HTML trc c th Khai bo khng phi l mt th HTML, n l cu lnh trnh duyt web bit v phin bn HTML c s dng vit ti liu.Trong HTML 4.01 khai bo tham chiu n DTD, bi v HTML 4.01 da trn SGML. DTD xc nh nhng c php, quy nh cho ngn ng nh du, da vo trnh duyt sinh ra ni dung chnh xc.HTML5 khng da trn SGML, do khng yu cu tham chiu n DTD.Khai bo trong HTML5Khai bo trong HTML4.01 StrictKhai bo trong XHTM1.12.2.2. Cu trc vn bnHTML4HTML4 s dng cc th div cu trc vn bn.HTML5HTML5 s dng mt b cc th xc nh r hn cc khi ni dung chnh cu trc mt vn bn.Html5 sekletontagdescriptionnh ngha mt mc ni dung trong ti liunh ngha ni dung phn bn cnh ni dung trang webnh ngha mt phn text c th c nh dng khc hng vi nhng text khc.nh ngha mt phn ph thm m ngi dng c th hin th hoc n.nh ngha mt hp dialog hoc ca snh ngha tiu ca phn t nh nh ngha phn t cha nh, thnh ngha footer ca vn bn hoc mt phn ca vn bnnh ngha header ca vn bn hoc mt phn ca vn bnnh ngha ni dung chnh ca vn bnnh ngha on text c nh du, nhn mnh, highlightednh ngha mt menu item m ngi dng c th gi t mt pupup menunh ngha t l trong mt phm vinh ngha phn cha cc lin kt trong vn bnnh ngha tin trnh ca mt nhim vnh ngha mt khu vc, mt phn trong ti liunh ngha phn u nhn thy ca th 2.2.3. New input typesHTML5 thm nhiu th nh ngha kiu input yu cu t ngi dng trong th form. V d nu chng ta thm thuc tnh type = email vo th input th trnh duyt ch cho php user nhp vo nh dng hp l ca email.Nhng kiu input mi c gii thiu trong HMTL52.2.4. New input attributesHTML5 thm nhiu thuc tnh mi ca th input, gip ngi lp trnh d dng hin th ni dung theo mun.SyntaxHTML5 cho php 4 kiu c php khc nhau i vi s dng thuc tnh trong th.V d 4 kiu c php s dng thuc tnh trong th input.2.2.5. HTML5 GraphicsCanvasTh c s dng v ha trn trang web s dng javascript.Canvas l mt vng hnh ch nht trn trang web, mc nh s khng c vin (border) v khng c ni dung.C php:Canvas c mt vi phng thc v ng thng, hnh trn, hnh ch nht, text hoc thm nh.V d: v mt hnh ch nht s dng javascriptHTML5 SVGSVG l mt ngn ng miu t 2D graphics trong XML.SVG l da trn XML, ngha l mi phn t l c sn bn trong SVG DOM, bn c th nh km x l s kin javascript cho mt thnh phn.Trong SVG, mi hnh v c nh nh mt i tng, nu thuc tnh ca mt i tng SVG thay i, trnh duyt s t ng v li.So snh Canvas v SVGCanvasSVGPhc thuc vo phn giiKhng ph thuc vo phn giiKhng h tr x l s kinH tr x l s kinNgho nn kh nng hin th textPh hp vi cc ng dng c vng hin th ln(google map)Bn c th lu nh di dng .png hoc .jpgSinh ra chm nu n phc tpPh hp vi game graphicKhng ph hp vi ng dng game2.2.6. New media elementsVideoTrc HMTL5 khng c chun trnh din video trn web. Video ch c th chy c bng cch s dng plugin (ging nh flash).Phn t xc nh chun nhng video vo trang web.C php:Thuc tnh controls thm vo c th iu khin video nh chy, dng v m lng.Hin ti c 3 nh dng video c h tr l: MP4, WebM v Ogg:AdioTrc HMTL5, khng c chun trnh din audio trn web. File Audio ch c th trnh din s dng plug-in (nh flash).Phn t xc nh chun nhng audio vo trang web.C php:Hin ti c 3 nh dng file audio c h tr cho phn t l: Mp3, Wav, v Ogg.New Media Elemts3. Xy dng webside.3.1. Cu trc trang webTrang web c xy dng da trn cu trc sau: Phn header: Th hin tiu chnh ca trang web Phn nav: trnh by nhng lin kt ti cc phn ni dung chnh ca trang web l cc article Phn section: gm nhiu article nh, l thn chnh th hin ni dung ca trang web. Phn article: cha nhng phn ni dung c chia nh ca trang web. Phn aside: cha nh, ni dung ph thm ca trang web. Phn footer: th hin footer ca trang web.3.2. Giao din trang web.3.3. HTML5 new input types and attributesGiao dinCode: new input types and attributes First name: Last name: Email: Phone Number: Birthday: 3.4. HTML5 GraphicsGiao dinCode HTML5 Graphics Canvas Example Draw Line Draw Circle Draw Text Clear var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var drawCircleButton = document.getElementById("drawCircleButton"); drawCircleButton.addEventListener("click", drawCircle); var drawTextButton = document.getElementById("drawTextButton"); drawTextButton.addEventListener("click", drawText); var drawLineButton = document.getElementById("drawLineButton"); drawLineButton.addEventListener("click", drawLine); var clearButton = document.getElementById("clearButton"); clearButton.addEventListener("click", clear); function drawCircle() { ctx.beginPath(); ctx.arc(95, 50, 40, 0, 2 * Math.PI); ctx.stroke(); } function drawLine() { ctx.moveTo(0, 0); ctx.lineTo(200, 100); ctx.stroke(); } function drawText() { ctx.font = "30px Arial"; ctx.fillStyle = "red"; ctx.fillText("Hello World", 10, 50); } function clear() { ctx.clearRect(0, 0, c.width, c.height); } 3.5. HTML5 MediaGiao dinCode HTML5 Media Trc HTML5, khng c chun trnh din video v audio trn web
video v audio ch c th c trnh din s dng plugin (nh flahs) Video Your browser does not support the video tag. Audio Your browser does not support the audio element. Ti liu tham kho. Internet & world wide web how to program, 5th, Paul Deitel, Harvey Deitel, Abbey Deitel. Css3 the missing manual, 3th, David Sawyer McFarland http://www.w3schools.com/html/html5_intro.asp http://vi.wikipedia.org/wiki/HTML http://en.wikipedia.org/wiki/HTML5 Nguyn Vn Dng Nguyn Thnh Huy Trang 23