Slide 2

BI 2
KH!I T"O, LM VI#C V$I M HTML5 V THNH

PH%N FORM
NH!C L"I BI TR#$C
'(nh ngha v) HTML5
T*ng qut v) c php c+a HTML5
M,t s- thnh ph.n m/i c+a HTML5
T*ng quan v) HTML5 API (giao di0n l1p trnh 2ng
d3ng) v cng ngh0 h4 tr5
Gi/i thi0u CSS3
Slide 2 - Kh!i t"o, lm vi#c v$i m HTML5 v thnh ph%n Form 2
M%C TIU BI H&C
S6 d3ng ngn ng7 nh d8u HTML5
Lm vi0c v/i cc ph.n t6 n,i dung (content) c+a
HTML5
T*ng quan v) nh7ng thnh ph.n form m/i c+a
HTML5
Lm vi0c v/i thnh ph.n form m/i trong HTML5
NGN NG' NH D(U HTML5
C php HTML5 r8t m9:
Khng phn bi0t ki:u ch7 in hoa, in th;<ng
Cc ph.n t6 khng b=t bu,c ph>i c th? ng
Khng b=t bu,c ph>i c d8u nhy kp cho thu,c tnh
<H1> !o"n tiu #$ 1</h1>
<p> !o"n v%n b&n cho ph'n n(i dung.
<img src=imageone.jpg alt=landscape>
C8u trc file m HTML5:
CCn1Ln1
meLadaLa ow secuonlng headlng phraslng embedded lnLeracuve
uCC1?L
Khai bo DOCTYPE:
DOCTYPE @;5c s6 d3ng @: ki:m tra h5p l0 cc ti
li0u
!"#$% '(% )*+,- ./012
<!uCC1?L P1ML u8LlC "-//W3C//
u1u P1ML 4.01
1ransluonal//Ln"
"hup://www.w3.org/18/hLml4/
loose.dLd">

<! uCC1?L hLml>

Vng m n,i dung (content) HTML5
conLenL
MeLadaLa
ow
secuonlng
headlng phraslng
embedded
lnLeracuve
Vng n,i dung Metadata:
L ph.n n,i dung thiAt l1p cch trnh by hoBc hnh vi c+a cc
n,i dung cn lCi trn trang
C th: s6 d3ng n,i dung metadata @: thiAt l1p quan h0 gi7a
cc ti li0u HTML
Th;<ng ch2a cc tD kha hoBc m t> cho trang web, v @;5c
cc b, my tm kiAm s6 d3ng @: phn loCi trang web
';5c @Bt trong thnh ph.n <head>
<head>
<title> SmoothieWorld: Providing access to the best smoothie
recipes anywhere. </title>
<meta charset=utf-8>
<link rel="stylesheet" href="styles.css media="all">
<script src= "jquery-1.4.2.min.js"></script>
</head>
Vng Flow:
'Ci di0n cho cc ph.n t6 @;5c coi l n,i dung c+a
trang web
Cc th? nh d8u n,i dung @)u thu,c vng ny
Nh7ng ph.n t6 @;5c thm m/i trong HTML5:
<article>, <aside>, <audio>, <canvas>,
<hgroup>, ...
<h3> This is flow content </h3>

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. </p>
Vng Sectioning:
L vng n,i dung m/i c+a HTML5
Bao gEm 4 ph.n t6: <article>, <aside>, <nav>, v
<section>
<aside>

<h1> New Additions </h1>
<h1> New Additions </h1>
<p> SmoothieWorld features smoothie recipes submitted by our
community of users. Here are some of the highest rated recipes of the
last 30 days.</p>

</aside>
Vng Heading:
Ch2a t8t c> cc ph.n t6 tiu @) tiu chuFn hi0n ang
@;5c s6 d3ng trong HTML 4.0 bao gEm: <h1>,
<h2>, ...
V/i HTML5: b* sung thm <hgroup>
<hgroup>
<h2>Top Rated Smoothies</h2>
<h3>The Funky Orange</h3>
</hgroup>
Vng Phrasing:
L vn b>n c+a ti li0u bao gEm cc ph.n t6 nh
d8u vn b>n bn trong m,t oCn vn
L t1p con c+a vng flow
Vng Embedded:
L n,i dung nh1p m,t ti nguyn khc nh; hnh >nh
hay video vo trong ti li0u
<p> The advantage of having <strong> good </strong> hiking boots
ecomes <em>extremely</em> clear after your third day of walking.</p>
<audio src="high_seas_rip.mp3" controls preload="auto" autobuffer> </
audio>
Vng Interactive:
L nh7ng ph.n t6 @;5c s6 d3ng @: t;Gng tc ng;<i
dng
<input type="button" value="Am I interactive?" onClick='alert("Yep I am
interactive")'>
PH)N T* N+I DUNG (CONTENT) C,A
HTML5
PH)N T* N+I DUNG (CONTENT) C,A HTML5
H4 tr5 sH t;Gng thch trn cc trnh duy0t cho
thnh ph.n HTML5:
S6 d3ng file reset.css: khai bo @: bu,c cc ph.n t6
m/i c+a HTML5 hi:n th( nh; m,t kh-i (block) thay v
hi:n th( inline
S6 d3ng javascript (@-i v/i phin b>n IE 6,7,8)
header, section, aside, nav, footer, figure, figcaption {
display:block;}
<link rel="stylesheet" media="screen href="reset.css" type="text/css" />
<link rel="stylesheet" media="screen href="base.css" type="text/css" />
<script src="modernizr-1.7.js type="text/javascript"></script>
Ph.n t6 <header>:
'Ci di0n cho m,t nhm h4 tr5 gi/i thi0u hoBc @(nh
h;/ng
C th: ch2a: ph.n t6 tiu @) (h1 ! h6), <hgroup>,
b>ng ch2a n,i dung, form tm kiAm,
Trong HTML5 c th: s6 d3ng ph.n t6 ny nhi)u l.n
<header>
<h1> The web's #1 resource for smoothie recipes </h1>
<img src="images/smoothieworld_logo.jpg width="200"
height="150 alt="smoothieworld_logo" />
</header>
Ph.n t6 <nav>:
Th;<ng @;5c s6 d3ng @: ch2a cc thnh ph.n i)u
h;/ng cho web
./012 3445
<nav>
<ul>
<ll><a class="nav-home"
href=#">Pome</a> </ll>
<ll><a class="nav-abouL"
href=#">AbouL us</a> </ll>
</ul>
</nav>

nav [
background-color:#606688, helghL:
33px, background-lmage:url(lmages/
bg_nav.glf), background-
lmage:url(lmages/bg_nav.glf),
background-repeaL:repeaL-x,
}

Thnh ph.n <section>:
bi:u diIn m,t vng chung c+a ti li0u hoBc 2ng d3ng
Nn s6 d3ng m,t section khi mu-n phn chia n,i
dung quan trJng nh; vn b>n v hnh >nh, thnh cc
vng
<section id="introduction-content">
<p><small>©
copyright 2038 </small></p>
</section>

Thnh ph.n <article>:
L thnh ph.n tH ch2a trong m,t ti li0u, trang, 2ng d3ng
hoBc site
C th& l'ng ph%n t( <article> vo trong ph%n t( <section>
L lHa chJn t-i ;u @: ch2a n,i dung sK @;5c ng t>i trong
nh7ng ng7 c>nh khc nhau hay th1m ch trn cc thiAt b(
ring bi0t
Ph.n t6 article c th: c m,t <header>, <footer>
<article>
<header>
<h2>A review of the Blend-o-Matic 3000</h2>
</header>
</article>

Thnh ph.n <aside>:
Cch s6 d3ng:
S6 d3ng cho vng sidebar c+a website
S6 d3ng cho m,t vng n,i dung lin quan bn trong
ph.n t6 <section>.
<aslde ld="secondary-conLenL">
<h2>new Addluons</h2>
<p>SmooLhleWorld feaLures
smooLhle reclpes submlued by our
communlLy of users. </p>
</aslde>

<aslde="arucleaslde">
<h3>need more uaLa?</h3>
<p>See how we puL Lhe 8lend-C-
Mauc 300 Lo
Lhe LesL. <a href="#">Llnk.</a></p>
</aslde>

Thnh ph.n <footer>:
Khng thu,c l/p cc ph.n t6 chia oCn; c th: c
nhi)u footer trn m,t trang web
./012 3445
<fooLer ld="slLelnfo">
<p>CopyrlghL SmooLhleWorld
2011 </p>
</fooLer>

#slLelnfo [
clear:boLh,
wldLh:960px,
helghL:118px,
paddlng-Lop:10px,
}

FORM V$I HTML5
FORM V$I HTML5
Cc thnh ph.n m/i c+a form HTML5 b* sung thm
ch2c nng m cc nh thiAt kA cng nh; cc nh
pht tri:n web th;<ng ph>i kAt h5p thng qua cc
ph;Gng ti0n khc nh; JavaScript v Flash
Cch lm vi0c c+a form
T)*ng tc
POST/ GET
Tr& v$
FORM V$I HTML5
C8u trc m form:

ID: cho php @(nh ki:u form v/i CSS
Action:
nGi g6i d7 li0u c+a ng;<i dng @: x6 l!
Th;<ng l URL trL t/i m k(ch b>n @;5c l;u trn my
ch+
Method:
Xc @(nh ph;Gng th2c g6i d7 li0u
gi tr( POST/ GET
<form id="contactform" action= method="post">
< code>
</form>
FORM V$I HTML5
Lm vi0c v/i thnh ph.n<label>:
L thnh ph.n khng b=t bu,c
Tng kh> nng truy c1p cho form
Lm vi0c v/i thnh ph.n < fieldset>:
': nhm cc ph.n t6 form trn trang
<label>First name:<input type="text name="firstname"> </label> <br />
<label>Last name:<input type="text name="lastname"> </label>
<fieldset>
<legend> Personal Information </legend>
<label>First name:<input type="text name="firstname"> </
label><br />
</fieldset>
FORM V$I HTML5
KAt h5p v/i thnh ph.n <legend> @: thm tiu @)
cho form
FORM V$I HTML5
Thm i)u khi:n <input> m/i v thu,c tnh:
Cho php cc nh thiAt kA s=p xAp d7 li0u tD cc
website m,t cch dI dng
D7 li0u c th: @;5c g6i tH @,ng t/i m,t cG s9 d7
li0u xc @(nh
<label for="email">Email:<input id="email type="email
name="customeremail"></label>
FORM V$I HTML5
<label for="website">Website:<input id="website" type="url
name="customerwebsite"></label>
<label for="firstname">First name:<input id="firstname" type="text"
name="firstname" placeholder="Enter Your First Name" required></label>
<label for="lastname">Last name:<input id="lastname" type="text"
name="lastname" placeholder="Enter Your Last Name" required></label>
FORM V$I HTML5
Lm vi0c v/i thnh ph.n <datalist>:
Xc @(nh m,t danh sch ty chJn cho
thnh ph.n input
<input list="smoothierecipes">
<datalist id="smoothierecipes>
<option value="Mango Smoothie">Mango Smoothie</
option>
<option value="Strawberry Smoothie">Strawberry Smoothie</option>
<option value="Banana Smoothie">Banana Smoothie</option>

</datalist>
FORM V$I HTML5
M,t s- thnh ph.n m/i trong i)u khi:n input:
<input type="range" min=0" max=100 value=0 step="10">
<input type=date>
<input type = color>
T-NG K.T
C php c+a HTML5 m9 hGn cc phin b>n tr;/c:
khng phn bi0t ch7 in hoa th;<ng, khng b=t
bu,c ph>i c th? ng, khng b=t bu,c ph>i c d8u
nhy kp cho thu,c tnh
Cch khai bo c+a HTML5 @Gn gi>n, rt gJn hGn r8t
nhi)u so v/i cc phin b>n tr;/c: <! DOCTYPE
html>, <input>, ...
C8u trc m HTML5 g=n li)n v/i c8u trc b- c3c
trang: <header>, <nav>, <article>, ....
HTML5 cung c8p nhi)u i)u khi:n trong form hGn,
dI dng hGn cho ng;<i thiAt kA & pht tri:n

Slide 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Slide 2

Uploaded by

Copyright:

Available Formats

BI 2

KH!I T"O, LM VI#C V$I M HTML5 V THNH

You might also like