HTML & CSS

Jan 11, 2014

What we will talk about:

Why Web Develo !ent" HTML & CSS #$a! le% Tool%

Let&% 'et %ta(te)*

Web page
A web page is a web document that is suitable for the World Wide Web and the web browser

Stati+ ,a'e% - Dyna!i+ ,a'e%

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

Can 9 have a web a'e, lea%e"

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+k #n) - ?(ont0en)

,H, .S, S7L

et+

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

HTML, CSS, Java%+(i t

Th(ee laye(% o/ web )e%i'n: St(u+tu(e, Style, >ehavio(

>#H.59<4 Java%+(i t

,4#S#=T.T9<= CSS 9!a'e(y

Th(ee laye(% o/ web )e%i'n

ST48CT84# HTML !a(ku Site lannin'

Th(ee laye(% o/ web )e%i'n

Th(ee laye(% o/ web )e%i'n

Th(ee laye(% o/ web )e%i'n

Th(ee laye(% o/ web )e%i'n

HTML

Hy e( Te$t A Ma(ku Lan'ua'e

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

)o+ty e ht!l hea) bo)y

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

The Bht!lD ele!ent )e/ine% the whole HTML )o+u!ent3

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

Bht!lD Bhea)D B-hea)D Bbo)yD Bh1DB-h1D B DB- D B-bo)yD B-ht!lD

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

The e%%ential ele!ent ta'%

,(i!a(y St(u+tu(e ht!l hea) bo)y Hea) #le!ent% title !eta link St(u+tu(al #le!ent% 1blo+k2 b( h1 H hI ul ol a i!' )iv ?o(!attin' #le!ent% 1inline2 e! i %t(on' b 6 blo+k6uote % an

.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

The e%%ential att(ibute%

link i!' a

Blink (elJ;%tyle%heet; ty e0;te$t-+%%; h(e/J;%tyle%heet-%tyle%3+%%;D

Bi!' %(+J;i!a'e%-i!a'e3@ '; altJ;Sa!;D Ba h(e/J;htt :--+olu!3e)u;DMy %+hoolB-aD

CSS

Ca%+a)in' A Style Sheet

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

Linke) 1e$te(nal2 %tyle%heet

#!be))e) 1inte(nal2 %tyle%heet

hi'h i! o(tan+e

9nline 1inte(nal2 Style%

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

<body> <div> <ul> <li></li> </ul> </div> </body>

9nhe(itan+e
bo)y !ake the a(a'(a h 1I $, 5e()ana, (e)

!ake the a(a'(a h blue

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>Hide this text.</p> <div>

<div id=plan-2323> <p>Here is some text.</p> <p class=hideclass>Hide this text.</p> <div>
CSS

#plan-2323.hideclass {display: none}

CSS Synta$

Synta$ J the (ule% /o( how to w(ite the lan'ua'e

Three terms for describing your styles:

CSS (ule CSS %ele+to( CSS )e+la(ation

CSS 4ule

selector {property: value;} )e+la(ation

#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}

The %ele+to( a%%o+iate% +%% (ule% with HTML ele!ent%3

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

The e%%ential %ele+to( ty e% 1ele!ent%2

,(i!a(y St(u+tu(e ht!l bo)y >o)y #le!ent% b( h1 H hI ul ol a i!' )iv ?o(!attin' #le!ent% e! i %t(on' b 6 blo+k6uote % an

9D Sele+to(%
CSS

#logo {declaration}
HTML

<img id=logo src= alt=>

.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%

9D: KL440L404L44 Cla%%: Male Cla%%: #! loyee

9D: K12L0E40MNOO Cla%%: ?e!ale Cla%%: #! loyee

De%+en)ant Sele+to(%
CSS

#sidebar .author {declaration}

HTML

<div id=sidebar> <p class=author></p> </div>

. % 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

<div class=ingredients time> <h1></h1> </div>

#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:

Hi)in' ele!ent% Tweakin' % e+i/i+ te$t %tyle% >(an)in'

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:

Client te$t A Client CSS

Example:

Lo'in #$a! le%

#=D

=<T#S

Cou a(e not e$ e+te) to :lea(n: HTML & CSS

Co)in' a web a'e wo(k% on (e6ui(e!ent0looku ba%i%

HTML - CSS /(a!ewo(k o/ a web a'e i% alway% available /o( /u(the( u%e

Make u%e(0/(ien)ly an) /un+tional web%ite%3

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