03 - [ltweb]_html

Upload: hung-binh-tran

Post on 14-Feb-2018

219 views

Category:

Documents


0 download

TRANSCRIPT

  • 7/23/2019 03 - [Ltweb]_html

    1/81

    HSP

    Thit k trang web vi HTML

    Trn Th Thy Tinhttp://fit.hcmup.edu.vn/~tienttt

    [email protected]

    Modified: 16/9/2013

    http://fit.hcmup.edu.vn/~tienttthttp://fit.hcmup.edu.vn/~tienttt
  • 7/23/2019 03 - [Ltweb]_html

    2/81

    HTML

    Do Tim Berner Lee pht minh v c W3C (World WideWeb Consortium) a thnh chun nm 1994.

    HTML = HyperText Markup Language (Ngn ng nhdu siu vn bn)

    L ngn ng dng vit trang web.

    Cha cc thnh phn nh dng bo cho trnh duyt

    Web bit cch hin th mt trang Web.2

  • 7/23/2019 03 - [Ltweb]_html

    3/81

    HTMLLch s pht trin

    3

  • 7/23/2019 03 - [Ltweb]_html

    4/81

    c im ca HTML

    Mttrang web thng thnggmc 2 thnhphnchnh: Dliucatrang web (vnbn,m thanh, hnh nh...)

    Cc th (tag) HTML dng nh dngm tcch

    thccc dliutrn hinthtrn trnh duyt.

    HTMLkhng phnbitchhoa, chthng

    Cc trnh duytthngkhng bo lic php HTML, chhinthkhng ngvidnhkhi lic php.

    C nhiu th, mi th c 1 tn v mang ngha khc

    nhau. 4

  • 7/23/2019 03 - [Ltweb]_html

    5/81

    Th HTML

    Mtthc thc cc thuctnh nhmbsung tc dngcho th

    Mithuctnh c tn thuctnh (tn_TT)

    Vitthc thuctnh:

    Ch :

    C ththay itht,slngcc thuctnh m khng gy

    ra lic php S h tr cc th, thuc tnh mi trnh duyt l khc

    nhau. Chgingnhau cc th,thuctnh cbn.

    Th ng ca th c thuc tnh vn vit bnh thng

    () 5

  • 7/23/2019 03 - [Ltweb]_html

    6/81

    c im ca HTML

    C 2 loi th: th ng v th mCch vit th:

    Th m:

    V d: ,

    ,

    Th ng tng ng:

    V d: ,

    Ch :

    Lun c th m nhng c th khng c th ngtngng. V d: khng c thng

    Cc th c th lng nhau, nhngkhng anxen lnnhau.

    6

  • 7/23/2019 03 - [Ltweb]_html

    7/81

    V d

    7

  • 7/23/2019 03 - [Ltweb]_html

    8/81

    c im ca HTML

    Tp tin HTML c phn m rng (ui) l .htm hoc.html, l tptin thunvnbn(plain text).

    C thsonthofile HTMLbngbtctrnh sontho

    vnbn thun no (Notepad, EditPlus, Notepad++,

    )

    Trnh htrsonthoHTML (trcquan, code): Microsoft FrontPage

    Macromedia Dreamweaver

    8

  • 7/23/2019 03 - [Ltweb]_html

    9/81

    Cu trc ti liu HTML

    Ni dung thng tin ca trang web

    Ni dung hin th trn trnh duyt

    9

  • 7/23/2019 03 - [Ltweb]_html

    10/81

    Cc th HTML c bn Th Doctypes

    Xut hin u trang web.

    Gip Web browser bit trang web c vit vi ngn ngnh du l g, version bao nhiu,

    Thng tham chiu n 1 mt DTD (Document Type

    Definition)HTML4:

    HTML5:

    Reference:htt ://reference.site oint.com/html/doct es

    10

    http://reference.sitepoint.com/html/doctypeshttp://reference.sitepoint.com/html/doctypes
  • 7/23/2019 03 - [Ltweb]_html

    11/81

    Cc th HTML c bn Th Meta

    tgiaThngdng quy nhthuctnh cho trang web

    C tc dnglnviSearch Engine

    C 2 cch vitth:

    Nidung hinthtrn thanh tiu

    11

  • 7/23/2019 03 - [Ltweb]_html

    12/81

    Cc th HTML c bn Th Meta

    12

  • 7/23/2019 03 - [Ltweb]_html

    13/81

    Cc th HTML c bn Th Meta

    Tngchuynhng trang web sang trang web khc(URL) sau mtkhongthigian t (tnh theo giy)

    C php

    13

  • 7/23/2019 03 - [Ltweb]_html

    14/81

    Cc th HTML c bn Th body

    : Cha ni dung ca trang web.

    C php:

    Ni dung chnh ca trang web

    Cc thuc tnh ca

    Bgcolor: thit lp mu nn ca trang

    Color: thit lp mu ch

    Background: load 1 hnh lm nn cho trang Link: mu ca siu lin kt

    Vlink: mu ca siu lin kt xem qua

    Leftmargin: canh l tri cho trang

    Topmargin: canh l trn ca trang.14

  • 7/23/2019 03 - [Ltweb]_html

    15/81

    Cc th HTML c bn nh dng khi ti liu

    DIV Th c s dng ngkhivnbn.

    PTh

    csdngnhdng

    mtonvnbn.

    H1,H2,H3,,H6Xc nh 1 trong 6 cp ca ta (heading)

    BR Ngtdng

    PRE

    Vnbnnm trong thny sctrnh by nh nguyn thy ca n

    khi g vo.15

  • 7/23/2019 03 - [Ltweb]_html

    16/81

    Cc th HTML c bn nh dng khi ti liu

    V d

    16

  • 7/23/2019 03 - [Ltweb]_html

    17/81

    Cc th HTML c bn

    : Dng phn cch mt khi vnbn nhn mnh, on vn bn ny c tchthnh mt paragraph ring, thm khong trngtrn v di on ng thi tht vo so vi l tri

    (tng ng chc nng ca phm tab). V d:

    Ni dung khi vn bn c nhn mnh.

    17

  • 7/23/2019 03 - [Ltweb]_html

    18/81

    Cc th HTML c bn

    18

  • 7/23/2019 03 - [Ltweb]_html

    19/81

    Cc th HTML c bn nh dng danh sch

    OL Danh sch cspxpth

    t H tr thuc tnh start cho

    php chngi trkhiuUL

    Danh sch khng spxp Th c thuc tnh

    TYPE c cc gi tr disc (chmtrn m); circle (vng trn); square (hnh vung)

    Mc 1

    Mc 2

    Mc 3

    Mc 1Mc 2Mc 3

    19

  • 7/23/2019 03 - [Ltweb]_html

    20/81

    Cc th HTML c bn nh dng danh sch

    20

  • 7/23/2019 03 - [Ltweb]_html

    21/81

    Cc th HTML c bn nh dng danh sch

    21

  • 7/23/2019 03 - [Ltweb]_html

    22/81

    Cc th HTML c bn Th nh dng k t

    In chm

    In chnghing

    In chgchchn

    In chbgchngang.

    ... In chnhhnbnh thngbngcch gimkchthc font hin thi i mt. Tng t nh thBIG

    ... nhdngchstrn (SuperScript)

    ... nhdngchsdi(SubScript)

    ... Chn font ch, size hoc color, kch thcc thl tuyti (nhn gi tr t 1 n 7) hoc tngi(+2,-4...) so vifont chhinti.

    22

  • 7/23/2019 03 - [Ltweb]_html

    23/81

    Cc th HTML c bn Lin kt

    Thuctnh: href=chlin kt:Nutrong cng web nn sdngng

    dntngi. target=tncasch,tn casphnbitchhoa/thng

    name: ti trang web vo frame c tn name

    _blank: ti trang web vo ca s mi

    _parent: ti trang web vo ca s cha ca n _self: ti trang web vo chnh ca s hin hnh

    _top: ti trang web vo ca s cao nht

    23

  • 7/23/2019 03 - [Ltweb]_html

    24/81

    Cc th HTML c bn Lin kt

    Lu: Lin kt vi a ch e-mail th thref=mailto:a_ch_e-mail

    ThchinlnhJavaScript khi kch chutvo th thref=javascript:lnh

    Lin ktntrang khc Thuctnh href=urlcatrang khc

    Khi click vo lin ktschuynntrang khc

    Lin kttrong cng mttrang Thuctnh href=#idcathtrong trang

    Khi click v lin ktschuynnthc idcghi trongthuctnh id cath.

    24

  • 7/23/2019 03 - [Ltweb]_html

    25/81

    Cc th HTML c bn Lin kt

    a ch URL phn lm 2 loi :

    a ch tuyt i: L v tr tuyt i so vi Mng

    Internet a ch tng i: L v tr tng i so vi trang

    web hin hnh ang ch lin kt.

    25

  • 7/23/2019 03 - [Ltweb]_html

    26/81

    Cc th HTML c bn Lin kt (VD)

    26

  • 7/23/2019 03 - [Ltweb]_html

    27/81

    Cc th HTML c bn Bng

    27

  • 7/23/2019 03 - [Ltweb]_html

    28/81

    Cc th HTML c bn Bng

    28

  • 7/23/2019 03 - [Ltweb]_html

    29/81

    Cc th HTML c bn Bng

    29

  • 7/23/2019 03 - [Ltweb]_html

    30/81

    Cc th HTML c bn Bng

    HTML coi mt bng gm nhiu dng, mt dng gm nhiu , vch c mi cha d liu ca bng. Cc th: To bng: : Mi bng ch c 1 cp th ny. To dng: : Bng c bao nhiu dng th c by

    nhiu cp th ny To :

    tiu ca bng: d liu:

    Tng s th v bng s ca bng. Dng c baonhiu th c by nhiu th v/hoc nm trongcp th tng ng

    Ch : c c mt trng trong bng ( khng c dliu) th cn t ni dung l:

    30

  • 7/23/2019 03 - [Ltweb]_html

    31/81

    Cc th HTML c bn Bng

    Cc tham s border=s: kch thc ng vin. t bng 0 (mc nh):

    khng c ng vin.

    width=rng, height=cao: rng v cao ca bng. C

    th t theo 2 cch: n: (n l s) Quy nh rng, cao l n pixels n%: Quy nh rng, cao l n% rng, cao ca i tng cha

    bng.

    cellspacing=s: Khong cch gia 2 lin tip

    cellpadding=s: Khong cch t gc n ni dung bgcolor=mu: mu nn ca bng

    background=a_ch_nh: a ch ca file nh lm nn chobng. Nn s dng ng dn tng i nu c th.

    31

  • 7/23/2019 03 - [Ltweb]_html

    32/81

    Cc th HTML c bn Bng

    , bgcolor=mu: mu nn ca

    background=a_ch_nh: a ch ca file nh lm nn cho . Nn sdng ng dn tng i nu c th.

    width=rng, height=cao: rng v cao ca . C th t theo 2

    cch: n: (n l s) Quy nh rng, cao l n pixels n%: Quy nh rng, cao l n% rng, cao ca bng.

    align=cn_l: cch cn chnh d liu trong theo chiu ngang: left, right,center, justify.

    valign=cn l ng: cch cn chnh d liu trong theo chiu ng: top,middle, bottom.

    colspan=s: s ct m ny chim (mc nh l 1)

    rowspan=s: s dng m ny chim (mc nh l 1)

    nowrap: nu c s lm cho d liu trong khng t xung dng32

  • 7/23/2019 03 - [Ltweb]_html

    33/81

    Cc th HTML c bn

    Lu:

    Mi khong trng, du xung dng trong HTMLc thhin trn trang web l 1 khong trng duynht

    g mtsk tcbittaphisdngm: Khongtrng(trong trnghpmunc nhiuhn1 k t

    trng):

    Dunhhn(): < >

    Dungockp (): " K hiu:

    Ghi ch trong HTML:

    33

  • 7/23/2019 03 - [Ltweb]_html

    34/81

    Cc th HTML c bn Hnh nh

    : Khng c th ng

    Cc thuc tnh ca tag : Align: left, right, center

    SRC : ng dn n file hnh nh

    ALT : Ch thch cho hnh nh Position: Top, Bottom, Middle

    Border : dy nt vin quanh nh (default=0)

    Width: rng

    Height: cao

    t nh nn cho trang web

    34

  • 7/23/2019 03 - [Ltweb]_html

    35/81

    Cc th HTML c bn m thanh

    : Khng c tag ng

    Thuc tnh ca tag

    SRC : ng dn n file m thanh

    Loop : S ln lp (bng -1 : Lp v hn)

    thng t trong tag ca trang web.

    V d:

    35

  • 7/23/2019 03 - [Ltweb]_html

    36/81

    Cc th HTML c bn - Video

    Th khng c th ng

    Thuc tnh

    Width: rng

    Height: cao

    src: a ch ca tp tin video

  • 7/23/2019 03 - [Ltweb]_html

    37/81

    Cc th HTML c bn - Flash

    Th khng c th ng

    Thuc tnh

    Width: rng

    Height: cao

    src: a ch ca tp tin flash

  • 7/23/2019 03 - [Ltweb]_html

    38/81

    Cc th HTML c bn Th marquee

    : iu khin i tng chy 1 cch tng trn trang web.

    39

  • 7/23/2019 03 - [Ltweb]_html

    39/81

    HSP

    Form trong trang Web

    Trn Th Thy Tinhttp://fit.hcmup.edu.vn/~tienttt

    [email protected]

    http://fit.hcmup.edu.vn/~tienttthttp://fit.hcmup.edu.vn/~tienttt
  • 7/23/2019 03 - [Ltweb]_html

    40/81

    Form

    cdng nhndliutpha ngidng

    Gip giyu cucangidng ntrang xl trong

    ngdngweb

    Tag dng chacc thnhphnkhc caform

    Nhngthnhphnnhpliucgil Form Field

    text field password field

    multiple-line text field

    41

  • 7/23/2019 03 - [Ltweb]_html

    41/81

    Form

    L container chacc thnhphnnhpliukhc.

    Cc thuctnh ca NAME: tn FORM

    ACTION: chnhtrang web nhnxl dliutFORM ny

    khi c skinclick cabutton SUBMIT. METHOD: Xc nh phng thc chuyn d liu

    (POST,GET)

    42

  • 7/23/2019 03 - [Ltweb]_html

    42/81

    Form - VD

    Dangnhap.html

    43

  • 7/23/2019 03 - [Ltweb]_html

    43/81

    Cc thnh phn ca Form

    Text fieldPassword fieldMultiple-line text fieldHidden Text field

    Pull-down menu (Combo box, List box)Check boxRadio buttonFile Form Control

    Submit Button, Reset Button, Generalized ButtonLabelField SetTin ch form

    44

  • 7/23/2019 03 - [Ltweb]_html

    44/81

    Cc thnh phn ca Form Textfield

    Dng nhp mt dng vn bn

    45

  • 7/23/2019 03 - [Ltweb]_html

    45/81

    Cc thnh phn ca Form Passwordfield

    Dng nhp mt khu

    46

  • 7/23/2019 03 - [Ltweb]_html

    46/81

    Cc thnh phn ca Form Multiline text

    Dng nhp vn bn nhiu dng.

    This is a text on multiline.

    47

  • 7/23/2019 03 - [Ltweb]_html

    47/81

    Cc thnh phn ca Form Hidden text

    Dng truyn 1 gi tr ca thuc tnh value khi formc submit

    Khng hin th ra trn mn hnh

    48

  • 7/23/2019 03 - [Ltweb]_html

    48/81

    Cc thnh phn ca Form Combobox

    49

  • 7/23/2019 03 - [Ltweb]_html

    49/81

    Cc thnh phn ca Form ComboBox

    combo box:

    Window Media 10

    Jet Audio 9

    Windows XP

    Windows XP SP2

    Windows Vista

    Office 2007

    50

  • 7/23/2019 03 - [Ltweb]_html

    50/81

    Cc thnh phn ca Form ListBox

    combo box:

  • 7/23/2019 03 - [Ltweb]_html

    51/81

    Cc thnh phn ca Form Listbox

    combo box:

  • 7/23/2019 03 - [Ltweb]_html

    52/81

  • 7/23/2019 03 - [Ltweb]_html

    53/81

    Cc thnh phn ca Form Radio

    Radio Button Group :

    Nam:

    Nu:

    54

  • 7/23/2019 03 - [Ltweb]_html

    54/81

    Cc thnh phn ca Form File

  • 7/23/2019 03 - [Ltweb]_html

    55/81

    Cc thnh phn ca Form Submit

    Nt pht lnhv gidliucaform ntrang xl.

    Mi form ch c mtnt submitv nt ny cvinm

  • 7/23/2019 03 - [Ltweb]_html

    56/81

    Cc thnh phn ca Form Reset

    Dng tr li gi tr mc nh cho cc control khctrong form

  • 7/23/2019 03 - [Ltweb]_html

    57/81

    Cc thnh phn ca Form Button

    58

  • 7/23/2019 03 - [Ltweb]_html

    58/81

    Cc thnh phn ca Form Label

    59

  • 7/23/2019 03 - [Ltweb]_html

    59/81

    Cc thnh phn ca Form Fieldset

    Subject

    English

    Mathematics

    Graph

    Theory

    60

  • 7/23/2019 03 - [Ltweb]_html

    60/81

    Gi d liu bng phng thc GET

    Cc i s ca Form c ghi km theo vong dn URL ca thuc tnh Action trong tag

    Khi lng d liu i s c truyn i ca

    Form b gii hn bi chiu di ti a ca mt

    URL trn Address bar.

    Chiu di ti a ca mt URL l 2048 bytes61

  • 7/23/2019 03 - [Ltweb]_html

    61/81

    Gi d liu bng phng thc GET

    Anh vn:

    Nht:

  • 7/23/2019 03 - [Ltweb]_html

    62/81

    Gi d liu bng phng thc POST

    Cc i s ca Form c truyn ngm bndi

    Khi lng d liu i s c truyn i caForm khng ph thuc vo URL Khng bgiihn

    ChsdngcphngthctruynPOST khiAction chnhntrang web thucdngx ltrn Server

    63

    HSP

  • 7/23/2019 03 - [Ltweb]_html

    63/81

    HSP

  • 7/23/2019 03 - [Ltweb]_html

    64/81

    HTML5

    69

    ?

  • 7/23/2019 03 - [Ltweb]_html

    65/81

    HTML 5?

    HTM5 ~= HTML + CSS + JavaScript

    HTML ~= HTML4 + new HTML5 elements + remove

    some elements

    HTML5 is not yet an official standard, and no browsershave full HTML5 support.

    But all major browsers (Safari, Chrome, Firefox, Opera,

    Internet Explorer) continue to add new HTML5 features totheir latest versions.

    70

    HTML5 F

  • 7/23/2019 03 - [Ltweb]_html

    66/81

    HTML5 - Features

    New features should be based on HTML, CSS, DOM, and

    JavaScript

    Reduce the need for external plugins (like Flash)

    Better error handling

    More markup to replace scripting

    HTML5 should be device independent

    The development process should be visible to the public

    71

    HTML 5 F

  • 7/23/2019 03 - [Ltweb]_html

    67/81

    HTML 5 - Features

    New Elements

    The element for 2D drawing The and elements for media playback

    New content-specific elements, like , ,, ,

    New form controls, like calendar, date, time, email, url, search

    New Attributes

    Full CSS3 Support

    Support for local storage, local SQL Database. Remove elements: , , , ,

    , , , , , ,,

    References: http://www.w3schools.com/tags/default.asp 72

    HTML5 Mi i f i d

    http://www.w3schools.com/tags/default.asphttp://www.w3schools.com/tags/default.asphttp://www.w3schools.com/tags/default.asphttp://www.w3schools.com/tags/default.asp
  • 7/23/2019 03 - [Ltweb]_html

    68/81

    HTML5 - Minimum of required tags

    73

    C

  • 7/23/2019 03 - [Ltweb]_html

    69/81

    Canvas

    Canvas is a black element on which you can draw in realtime via JavaScript. Canvas has the advantages that as it

    is part of the HTML specification all browser will

    support it directly without the need to install a plugin.

    Currently canvas only supports 2D rendering but 3D

    rendering is planned for the future.References:

    http://www.w3schools.com/html/html5_canvas.asp74

    D & D (D D)

    http://www.w3schools.com/html/html5_canvas.asphttp://www.w3schools.com/html/html5_canvas.asp
  • 7/23/2019 03 - [Ltweb]_html

    70/81

    Drag & Drop (DnD)

    DnD requires only a few things to work:

    Make an element draggable: set the draggableattributeto true. A drop target

    JavaScript event handlers on the target to tell thebrowser it can drop

    References:

    http://www.w3schools.com/html/html5_draganddrop.asp

    http://html5demos.com/drag

    http://html5doctor.com/native-drag-and-drop/

    75

    G l ti

    http://www.w3schools.com/html/html5_draganddrop.asphttp://html5demos.com/draghttp://html5doctor.com/native-drag-and-drop/http://html5doctor.com/native-drag-and-drop/http://html5doctor.com/native-drag-and-drop/http://html5doctor.com/native-drag-and-drop/http://html5doctor.com/native-drag-and-drop/http://html5doctor.com/native-drag-and-drop/http://html5doctor.com/native-drag-and-drop/http://html5doctor.com/native-drag-and-drop/http://html5doctor.com/native-drag-and-drop/http://html5doctor.com/native-drag-and-drop/http://html5doctor.com/native-drag-and-drop/http://html5doctor.com/native-drag-and-drop/http://html5doctor.com/native-drag-and-drop/http://html5demos.com/draghttp://html5demos.com/draghttp://html5demos.com/draghttp://www.w3schools.com/html/html5_draganddrop.asphttp://www.w3schools.com/html/html5_draganddrop.asphttp://www.w3schools.com/html/html5_draganddrop.asphttp://www.w3schools.com/html/html5_draganddrop.asphttp://www.w3schools.com/html/html5_draganddrop.asp
  • 7/23/2019 03 - [Ltweb]_html

    71/81

    Geolocation

    The HTML5 Geolocation API is used to get thegeographical position of a user.

    Since this can compromise user privacy, the position is

    not available unless the user approves it.

    Geolocation is much more accurate for devices with

    GPS, like iPhone.

    References:

    http://www.w3schools.com/html/html5_geolocation.asp76

    Vid /A di

    http://www.w3schools.com/html/html5_geolocation.asphttp://www.w3schools.com/html/html5_geolocation.asphttp://www.w3schools.com/html/html5_geolocation.asp
  • 7/23/2019 03 - [Ltweb]_html

    72/81

    Video/Audio

    Until now, there has not been a standard for showing avideo/movie, play audio files on a web page.

    Today, most videos/audios are shown through a plug-in

    (like flash). However, different browsers may havedifferent plug-ins.

    HTML5 defines a new elements for that purpose:

    http://www.w3schools.com/html/html5_video.asp

    http://www.w3schools.com/html/html5_audio.asp 77

    I t T

    http://www.w3schools.com/html/html5_video.asphttp://www.w3schools.com/html/html5_audio.asphttp://www.w3schools.com/html/html5_audio.asphttp://www.w3schools.com/html/html5_video.asphttp://www.w3schools.com/html/html5_video.asp
  • 7/23/2019 03 - [Ltweb]_html

    73/81

    Input Type

    HTML5 has several new input types for forms. Thesenew features allow better input control and validation: Color

    Date

    Email Search

    Not all major browsers support all the new input types.However, you can already start using them; If they arenot supported, they will behave as regular text fields.

    78

    F l t

  • 7/23/2019 03 - [Ltweb]_html

    74/81

    Form element

    :provide an "autocomplete" feature on

    elements. Users will see a drop-down list of pre-defined

    options as they input data.

    :provide a secure way to authenticate users.

    : represents the result of a calculation (like one

    performed by a script).Not all major browsers support all the new form elements.

    However, you can already start using them; If they are not

    supported, they will behave as regular text fields.79

    Form Attrib te

  • 7/23/2019 03 - [Ltweb]_html

    75/81

    Form Attribute

    HTML5 has several new attributes for and

    .

    References:

    http://www.w3schools.com/html/html5_form_attribu

    tes.asp

    80

    Semantic

    http://www.w3schools.com/html/html5_form_attributes.asphttp://www.w3schools.com/html/html5_form_attributes.asphttp://www.w3schools.com/html/html5_form_attributes.asphttp://www.w3schools.com/html/html5_form_attributes.asphttp://www.w3schools.com/html/html5_form_attributes.asphttp://www.w3schools.com/html/html5_form_attributes.asphttp://www.w3schools.com/html/html5_form_attributes.asphttp://www.w3schools.com/html/html5_form_attributes.asp
  • 7/23/2019 03 - [Ltweb]_html

    76/81

    Semantic

    Semantic elements = Elements with meaning.

    A semantic element clearly describes its meaning toboth the browser and the developer.

    HTML5 offers new semantic elements to clearly

    define different parts of a web page:

    81

    Web Storage

  • 7/23/2019 03 - [Ltweb]_html

    77/81

    Web Storage

    Store data locally within the user's browser

    More secure and faster

    The data is not included with every server request, but usedONLY when asked for

    Possibility of storing large amounts of data, withoutaffecting the website's performance.

    The data is stored in key/value pairs, and a web page can

    only access data stored by itself.There are two new objects for storing data on the client:

    localStorage - stores data with no expiration date

    sessionStorage - stores data for one session82

    App cache

  • 7/23/2019 03 - [Ltweb]_html

    78/81

    App cache

    Web application is cached, and accessible without an

    internet connection.http://www.w3schools.com/html/html5_app_cache.a

    sp

    83

    References

    http://www.w3schools.com/html/html5_app_cache.asphttp://www.w3schools.com/html/html5_app_cache.asphttp://www.w3schools.com/html/html5_app_cache.asphttp://www.w3schools.com/html/html5_app_cache.asphttp://www.w3schools.com/html/html5_app_cache.asphttp://www.w3schools.com/html/html5_app_cache.asphttp://www.w3schools.com/html/html5_app_cache.asphttp://www.w3schools.com/html/html5_app_cache.asp
  • 7/23/2019 03 - [Ltweb]_html

    79/81

    References

    Wesites

    http://www.w3schools.com/html/html5_intro.asp

    http://www.slideshare.net/search/slideshow?q=HTML5

    Demo:

    http://slides.html5rocks.com/#landing-slidehttp://html5demos.com

    Kim tra trnh duyt:

    http://fmbip.com/

    http://detectmybrowser.com/http://html5test.com/

    84

    References

    http://www.w3schools.com/html/html5_intro.asphttp://www.w3schools.com/html/html5_intro.asphttp://www.slideshare.net/search/slideshow?q=HTML5http://slides.html5rocks.com/http://html5demos.com/http://fmbip.com/http://detectmybrowser.com/http://html5test.com/http://html5test.com/http://html5test.com/http://detectmybrowser.com/http://detectmybrowser.com/http://fmbip.com/http://fmbip.com/http://html5demos.com/http://html5demos.com/http://slides.html5rocks.com/http://slides.html5rocks.com/http://slides.html5rocks.com/http://slides.html5rocks.com/http://slides.html5rocks.com/http://www.slideshare.net/search/slideshow?q=HTML5http://www.slideshare.net/search/slideshow?q=HTML5http://www.w3schools.com/html/html5_intro.asphttp://www.w3schools.com/html/html5_intro.asphttp://www.w3schools.com/html/html5_intro.asphttp://www.w3schools.com/html/html5_intro.asp
  • 7/23/2019 03 - [Ltweb]_html

    80/81

    References

    HTML5 Specifications

    WHATWG

    http://www.whatwg.org/specs/web-apps/current-work/

    W3C

    http://dev.w3.org/html5/spec/Overview.html

    IETF (WebSocket specification)

    http://tools.ietf.org/html/draft-hixie-thewebsocketprotocol

    CSS 3 Specifications

    W3C

    http://www.w3.org/Style/CSS/current-work85

    HSP

  • 7/23/2019 03 - [Ltweb]_html

    81/81