Professional Documents
Culture Documents
HTML & Css
HTML & Css
HTML & Css
Web page
A web page is a web document that is suitable for the World Wide Web and the web browser
S#45#4
a'e3ht!l
a'e3ht!l
a'e3ht!l
. %tati+ web%ite i% a '(ou o/ %el/0+ontaine), in)ivi)ual a'e% 1o( a'e2, %ent to the b(ow%e( /(o! the %e(ve( one0 a'e0at0a0ti!e3
,H,
S#45#4
S7L )ataba%e% HTML
a'e3ht!l
Dya!i+ web +ontent i% built when it i% (e6ue%te), by the u%e( )i(e+tly, o( (o'(a!!ati+ally while a u%e( i% on a a'e 1e3'3, /a+ebook u )ate%23 Mo%t web%ite% +ontain both %tati+ an) )yna!i+ ele!ent%3
/(ont0en)
HTML CSS Java%+(i t
S#45#4 4#78#ST
thank%*
,H,
S#45#4 4#S,<=S#
S7L )ataba%e%
ba+k0en) :(e+i e;
Se(ve(0%i)e - Client0%i)e
aka
a'e3ht!l
S#45#4
>4<WS#4
%tyle3+%%
%+(i t3@%
Client0%i)e 1/(ont0en)2 +o)in' in+lu)e% HTML, CSS an) Java%+(i t3 Thi% @u%t !ean% that ou( +o)e will be )ownloa)e) /(o! the %e(ve( an) then +o! ile) enti(ely in the b(ow%e(3
>#H.59<4 Java%+(i t
HTML
Hy e( Te$t
Ma(ku Lan'ua'e
. !a(ku lan'ua'e i% a %et o/ !a(ku ta'%3 The u( o%e o/ the ta'% i% to '(ou an) )e%+(ibe a'e +ontent3
Ma(ku Lan'ua'e Without any !a(ku to 'ive you( +ontent %t(u+tu(e, the b(ow%e( (en)e(% un/o(!atte) an) un%tyle) te$t, al%o known a% : lain te$t;3
Ma(ku Lan'ua'e HTML ta'% 'ive %t(u+tu(e an) !eanin' to you( +ontent3 :Se!anti+ !a(ku ; (e/e(% to the u%e o/ !eanin'/ul ta'% to )e%+(ibe +ontent 1e3'3 u%in' hea)e( ta'% /o( hea)e( +ontent23
Ma(ku Lan'ua'e <n+e you( +ontent i% !a(ke) u , the b(ow%e( a lie% built0in )e/ault %tyle% to the ta'%3 While you +an ove((i)e the%e %tyle% with +%%, you( !a(ke) u , non0+%% %tyle) )o+u!ent %houl) be (ea)able an) have a +lea( hie(a(+hy3
B*D<CTC,# ht!lD
The )o+ty e i% not a+tually a ta', but a )e+la(ation, tellin' the b(ow%e( what kin) o/ ht!l you a(e u%in'3 The )o+ty e above )e+la(e% HTML E3
Bht!lDB-ht!lD
Bhea)DB-hea)D
The Bhea)D ele!ent +ontain% % e+ial ele!ent% that in%t(u+t the b(ow%e( whe(e to /in) %tyle%heet%, (ovi)e !eta in/o, an) !o(e3
Bbo)yDB-bo)yD
The Bbo)yD ele!ent +ontain% the )o+u!ent +ontent 1what i% %hown in%i)e the b(ow%e( win)ow23
=e%tin' The u%e o/ ou( /i(%t th(ee ta'% 1ht!l, hea) an) bo)y2, int(o)u+e% an) i! o(tant +on+e t: =e%tin', whi+h i% when ta'% :w(a ; othe( ta'%3 When you +(eate !a(ku , you %houl) in)i+ate ne%tin' by in)entin' the ne%te) ta'% with 2 % a+e% 1 (e/e((e)2 o( a tab3
Do+u!ent Hie(a(+hy: ,a(ent%, +hil)(en an) %iblin'% Ju%t a% in a 'enealo'y t(ee, the /a!ily hie(a(+hy i% )e%+(ibe) in te(!% o/ (elation%hi %3 .ll ele!ent% in the )o+u!ent have a a(ent 1u to F)o+u!ent&, whi+h i% at the to 2, an) !ay have +hil)(en 1ne%te) in%i)e2 o( %iblin'% 1 la+e) alon'%i)e23
B a(ent $D B+hil) an) %iblin' yD B-+hil) an) %iblin' yD B+hil) an) %iblin' GD B-+hil) an) %iblin' GD B- a(ent $D
The Fa))(e%%& o/ an ele!ent The )o+u!ent hie(a(+hy (ovi)e% u% with an Fa))(e%%& /o( ea+h ele!ent3
in the )iv with +la%% :+lient0te$t0+ontaine(;, !ake all o/ the h2 ele!ent% o(an'e an) 24 $3
HTML #le!ent%
.nato!y o/ an #le!ent
Bta'DContentB-ta'D
.n HTML ele!ent in+lu)e% both the HTML ta' an) eve(ythin' between the ta' 1the +ontent23
.nato!y o/ an #le!ent
Bta'DContentB-ta'D
Ta'% no(!ally +o!e in ai(%3 The /i(%t ta' i% the %ta(t ta', an) the %e+on) ta' i% the en) ta'3
.nato!y o/ an #le!ent
Bh1DMain Hea)lineB-h1D
HTML ha% a )e/ine) %et o/ ta' na!e% 1al%o +alle) keywo()%2 that the b(ow%e( un)e(%tan)%3
.nato!y o/ an #le!ent
Bht!l lan'J;en;DB-ht!lD
Mo%t ele!ent% +an have att(ibute%, whi+h (ovi)e% a))itional in/o(!ation about the ele!ent3
.nato!y o/ an #le!ent
B)iv +la%%J;le/t0nav;DB-)ivD
.tt(ibute% alway% /ollow the %a!e /o(!at: na!eJ;value;3 Cou +an u%e eithe( %in'le o( )ouble 6uote%3
link i!' a
CSS
The Style%heet
. %tyle%heet i% a %et o/ (ule% )e/inin' how an ht!l ele!ent will be : (e%ente); in the b(ow%e(3 The%e (ule% a(e ta('ete) to % e+i/i+ ele!ent% in the ht!l )o+u!ent3
The Ca%+a)e
The :+a%+a)e; a(t o/ CSS i% a %et o/ (ule% /o( (e%olvin' +on/li+t% with !ulti le CSS (ule% a lie) to the %a!e ele!ent%3 ?o( e$a! le, i/ the(e a(e two (ule% )e/inin' the +olo( o( you( h1 ele!ent%, the (ule that +o!e% la%t in the +a%+a)e o()e( will :t(u! ; the othe(3
low i! o(tan+e
>(ow%e( %tyle%heet
9nhe(itan+e
Mo%t ele!ent% will inhe(it !any %tyle (o e(tie% /(o! thei( a(ent ele!ent% by )e/ault3
HTML relationship parent of site parent of ul and li, child of body parent of li, child of div and body child of ul, div, and body
9nhe(itan+e
bo)y !ake the a(a'(a h 1I $, 5e()ana, (e)
1I $, 5e()ana, blue
S e+i/i+ity
Sho(tly a/te( %tylin' you( /i(%t ht!l ele!ent%, you will /in) you(%el/ wantin' !o(e +ont(ol ove( whe(e you( %tyle% a(e a lie)3 Thi% i% whe(e % e+i/i+ity +o!e% in3 S e+i/i+ity (e/e(% to how % e+i/i+ you( %ele+to( i% in na!in' an ele!ent3
S e+i/i+ity
bo)y !ake the a(a'(a h 1I $, 5e()ana, (e) !ake the a(a'(a h blue 3 ink !ake the a(a'(a h ink 1I $, 5e()ana, ink
HTML
<div id=plan-2323> <p>Here is some text.</p> <p class=hideclass>Hide this text.</p> <div>
CSS
CSS Synta$
CSS 4ule
#ve(y %tyle i% )e/ine) by a %ele+to( an) a )e+la(ation3 The )e+la(ation +ontain% at lea%t one (o e(ty-value ai(3To'ethe( they a(e +alle) a CSS 4ule3
CSS Sele+to(
body {font-family: Arial, Helvetica} p {color: #666666} h1 {font-size: 24px} a {color: blue}
CSS Sele+to(
p { color: red }
The %ele+to( i% ty e) in /(ont o/ the )e+la(ation, with a % a+e %e a(atin' it an) the o enin' +u(ly0b(a+ket 1aka +u(ly0b(a+e23 Ty i+ally, e$t(a % a+e% an) (etu(n% a(e a))e) a% %hown /o( the %ake o/ (ea)ability3
CSS Sele+to(
h1,h2,h3,h4 { font-weight: bold }
Cou +an a ly %tyle% to !ulti le %ele+to(% in the %a!e (ule by %e a(atin' the %ele+to(% with +o!!a%3
CSS De+la(ation
p { property: value }
The )e+la(ation i% alway% )e/ine) in a (o e(tyvalue ai(3 The two a(e %e a(ate) by a +olon3 How you )e/ine the (o e(tie% will a//e+t how HTML ele!ent% a(e )i% laye)3
CSS De+la(ation
p { font-family: Arial, sans-serif; font-size: 14px; color: #666666; }
Cou +an a ly !ulti le )e+la(ation% to a %ele+to(1%2 by %e a(atin' the )el+a(ation% with %e!i0+olon%3
CSS Sele+to(%
Ty e 1ele!ent2 K 3 9D Cla%%
Ty e 1ele!ent2 Sele+to(%
body {declaration} p {declaration} h1 {declaration} ul {declaration}
The %i! le%t %ele+to( i% the ty e %ele+to(, whi+h ta('et% an ht!l ele!ent by na!e3
9D Sele+to(%
CSS
#logo {declaration}
HTML
.n 9D i% an ht!l att(ibute that i% a))e) to you( ht!l !a(ku 3 Cou (e/e(en+e that 9D in you( +%% with a ha%h3
Cla%% Sele+to(%
CSS
.ingredients {declaration}
HTML
<ul class=ingredients>
. +la%% i% an ht!l att(ibute that i% a))e) to you( ht!l !a(ku 3 Cou (e/e(en+e that 9D in you( +%% with a e(io)3
9D% v% Cla%%e%
The !o%t i! o(tant )i//e(en+e between 9D% an) +la%%e% i% that the(e +an be only one 9D on a a'e, but !ulti le +la%%e%3 .n 9D i% !o(e % e+i/i+ than a +la%%3 .n ele!ent +an have both an 9D an) !ulti le +la%%e%3
9D% v% Cla%%e%
De%+en)ant Sele+to(%
CSS
. % a+e between two %ele+to(% in)i+ate% a )e%+en)ant %ele+to(3 9n the e$a! le above, the %tyle i% ta('ete) to an ele!ent with the +la%% :autho(; in%i)e the i) :%i)eba(;3
Multi le +la%%e%
CSS
.ingredients.time {declaration}
HTML
#le!ent% +an have !ulti le +la%%e%, 'ivin' you !o(e +ont(ol3 The a(e w(itten in the CSS in the e$a+t o()e( they a ea( in the ht!l, with no % a+e%3
Common uses:
So!e thin'% you +an +han'e with CSS +olo(% ty e ty e %iGe ba+k'(oun)% % a+in' %iGe% bo()e(% o%ition% 1layout2 So!e thin'% you +an&t +han'e with CSS +ontent !a(ku
Example:
Example:
#=D
=<T#S
HTML - CSS /(a!ewo(k o/ a web a'e i% alway% available /o( /u(the( u%e
Develo in' online v-% o//line >e/o(e %ta(tin' any (o@e+t, take %o!e ti!e to e$ lo(e the (eviou%ly +(eate) one% o/ %i!ila( kin)3
Tool%
IDE
Dreamweaver Visual Studio Cloud9 Codean where Cloud IDE