139
JASON SMITH BUILD AND DESIGN A WEBSITE AN INTRODUCTION TO HTML AND CSS http://learnhtmlcode.com How to Build And Design A

Design And Build A Website

Embed Size (px)

Citation preview

Page 1: Design And Build A Website

J A S O N S M I T H

BU I L DA ND DE S I G N A W EB S I TE

A N I N T R O D U C T I O NT O H T M L A N D C S S

http://learnhtmlcode.com

How to Build And Design A

Page 2: Design And Build A Website

!"#$%&'(%&)*+#,(&-&.*/+#0*1&-(2(034%"50#4(&04&6789&'(%&:;;

www.princexml.com
This document was created with Prince, a great way of getting web content onto paper.
Page 3: Design And Build A Website

!"#$%&'(%&)*+#,(&-&.*/+#0*1&-(&2(034%"50#4(&04&6789&'(%&:;;&:4<=3#,>0&?&@ABC

Page 4: Design And Build A Website

:4(0*(0+

!" !#$%&'()$*&#

7>*&!44DBE C

F*00#(,&;0'30*%@E G

F$4++'3=CE H

!!" +,-.

6789IE BC

6789&7=<4,3'<>=GE @C

6789&2J',*+KE @G

6789&643#L4(0'$&M"$*HE @H

6789&6*'%#(,+NE @O

6789&6=<*3$#(D+OE CB

6789&!"$$*0&9#+0+BAE CC

6789&7'/$*+BBE CG

6789&P43J+B@E IG

6789&Q'3',3'<>+BCE IO

6789&!$45DR"40*+BIE GB

6789&;<'(BGE GC

6789&9#(*&!3*'DBKE GG

!!!" /00

:;;BHE GO

:;;&2($#(*&S+E&2(0*3('$&S+E&TU0*3('$BNE KB

:;;&:$'++&S+E&2)BOE KC

:;;&!4U&84%*$@AE KG

:;;&!'5D,34"(%&:4$4"3&V&2J',*+@BE KO

:;;&BW:4$"J(&9'=4"0@@E HC

:;;&@W:4$"J(&9'=4"0@CE HG

:;;&CW:4$"J(&9'=4"0@IE HO

:;;&!43%*3+@GE NC

:;;&8'3,#(+@KE NG

:;;&Q'%%#(,@HE NH

<

Page 5: Design And Build A Website

:;;&!"$$*0&9#+0+@NE NO

:;;&P4(0&.*#,>0@OE OC

:;;&P4(0&P'J#$=CAE OH

:;;&7*U0&-$#,(CBE OO

:;;&7*U0&73'(+X43JC@E BAB

:;;&7*U0&)*543'0#4(CCE BAC

:;;&6=<*3$#(D+CIE BAG

:;;&YS*3X$4ZCGE BAH

!1" 2345637*8#

.*/&)*+#,(CKE BBC

7>*&T$*J*(0+&4X&.*/&)*+#,(CHE BBG

:;;&7>*J*+&V&7*J<$'0*+CNE B@B

1" 2345+&7$*#8

.*/&64+0#(,COE B@G

64Z&74&[<$4'%&-&.*/&;#0*&[+#(,&P7QIAE B@O

<#

Page 6: Design And Build A Website
Page 7: Design And Build A Website
Page 8: Design And Build A Website

B

!"#$%&'(#)%!"#$%&'(#)%""

Page 9: Design And Build A Website
Page 10: Design And Build A Website

!

7=*&!44>

\4" 5'( 3*'% ]!"#$% '(% )*+#,( - .*/+#0*^ 4( 0>* Z*/ '0 >00<1__$*'3(>0J$54%*E54JE \4"5'(&'$+4&%4Z($4'%&0>*&/44D&#(&S'3#4"+&*/44D&X43J'0+&#(5$"%#(,&*<"/`&J4/#&ab#(%$*c`&*05E

?

Page 11: Design And Build A Website
Page 12: Design And Build A Website

"

@*00#(,&;0'30*%

!"#$%#(, ' Z*/+#0* #+ ' $40 *'+#*3 0>'( =4" Z4"$% 0>#(DE -%J#00*%$=` 0>*3*d+ ' $40 4X 0*3J#(4$W4,=&=4"&(**%&04&3*J*J/*3`&/"0&$#D*&'(=0>#(,&*$+*`&<3'50#5*&J'D*+&<*3X*50E

2X =4" 5'( "+* ' Z43% <345*++43` =4" 5'( <34/'/$= /"#$% ' Z*/+#0*E 2( X'50` +*3S#5*+ $#D*.*/$= '(% ;R"'3*+<'5* '$$4Z (4S#5*+ 04 53*'0* /*'"0#X"$ Z*/ +#0*+ a<430X4$#4+` /$4,+` /"+#W(*++` *05Ec "+#(, ' +0*<W/=W+0*<` <4#(0W'(%W5$#5D #(0*3X'5* "+#(, 3*'%=WJ'%* 0*J<$'0*+E \4"5'( *S*( /"#$% '( 4($#(* +043* Z#0> '/+4$"0*$= (4 <34,3'JJ#(, D(4Z$*%,*` "+#(, ' +*3S#5*$#D*&;>4<#X=E

!"0 (4 J'00*3 >4Z *'+= #0 J'= /* 04 53*'0* ' Z*/+#0* "+#(, 044$+ $#D* .*/$=` ;>4<#X= 43.43%Q3*++` #0d+ #( =4"3 /*+0 #(0*3*+0 04 >'S* ' /'+#5 "(%*3+0'(%#(, 4X >4Z 04 Z*/+#0*+ '3*54(+03"50*%E

A<*3<#*B

\4" J#,>0 >'S* >*'3% 4X +4W5'$$*% .\;2.\F a.>'0 \4" ;** 2+ .>'0 \4" F*0c Z*/%*+#,( '<<+ $#D* )3*'JZ*'S*3 '(% F49#S*E .* Z4(0 /* "+#(, '(=0>#(, $#D* 0>'0 #( 0>#+,"#%* /*5'"+* 0>4+* '<<+ '50"'$$= J43* 5"J/*3+4J* 0>'( 0=<#(, 4"0 54%* a4(5* =4" $*'3(>4Z&04&54%*cE

.>'0d+ J43*` /"#$%#(, ' Z*/+#0* #+ J43* 0>'( e"+0 ' 0*5>(#5'$ 5>'$$*(,*E \4" (**% 04 >'S*' /'+#5 "(%*3+0'(%#(, a'(% '<<3*5#'0#4(c 4X ,44% %*+#,( *S*( #X =4" <$'( 04 >'S* +4J*4(*/"#$%&'&Z*/&+#0*&X43&=4"E

7=#(,+&C4"D$$&E**%

f -&0*U0_6789&*%#043&ag40*Q'%`&7*U0Q'%`&*05Ecf -(&P7Q&5$#*(0&a>00<1__5=/*3%"5DE5>cf .*/&>4+0#(, >00<1__$*'3(>0J$54%*E54J_'@

!*X43* Z* ,*0 +0'30*%` =4"d$$ <34/'/$= Z'(0 04 *U<$43* 4"3 ,$4++'3= 4X 0*3J#(4$4,= 0>'0 Z#$$/*&"+*%&#(&0>#+&,"#%*E

F

Page 13: Design And Build A Website
Page 14: Design And Build A Website

#

@$4++'3G

6*3* '3* +4J* 0*3J+ =4" (**% 04 D(4ZE \4" %4(d0 (**% 04 J*J43#L* 0>*+* 0*3J+` +#J<$=X'J#$#'3#L*&=4"3+*$X&Z#0>&0>*J&X43&X"0"3*&3*X*3*(5*E

7*H0&*%#043

:4(+#%*3 =4"3 Z43% <345*++43E .>*( =4" "+* '( '<< $#D* 8; .43%` 0>*3* #+ >#%%*( 54%**J/*%%*% #( 0>* %45"J*(0 0>'0 =4" 5'((40 #JJ*%#'0*$= +**E a7>#+ 54%* 0*3J+ >4Z 04 X43WJ'0&0*U0&'(%&4/e*50+&$#D*&0'/$*&'(%&#J',*+Ec

-(% Z* 5'( 3*S*'$ 0>#+ >#%%*( 54%* /= "+#(, ' 0*U0_54%* *%#043E 7>*3* '3* %4L*(+` #X(40` >"(%3*%+ 4X 0*U0 *%#043+ 04 'S'#$'/$*E -(% =4" 5'( "+* '(= <34,3'J =4" +** X#0E 64ZW*S*3` <3*00= J"5> '$$ 54J<"0*3+ '$3*'%= #(5$"%* ' 0*U0 *%#043E 2X =4" '3* ' .#(%4Z+ "+*3`=4" +>4"$% >'S* '( <34,3'J 4( =4"3 54J<"0*3 5'$$*% g40*<'%E a8'5 "+*3+ >'S* ' <34,3'J7*U0T%#0Ec

.C;2.C@

.>'0W\4"W;**W2+W.>'0W\4"WF*0a<34(4"(5*%&]Z#LL=WZ#,^c

7>#+&#+&'&0*3J&"+*%&04&%*+53#/*&<34,3'J+&0>'0&4XX*3&'&S#+"'$&#(0*3X'5*&X43&/"#$%#(,&0>#(,+E

IJ9&K&IJ2

[(#X43J&M*+4"35*&945'0#4(_[(#X43J&M*+4"35*&2%*(0#X#*3a'EDE'E&-&Z*/<',*&'%%3*++&+"5>&'+&]>00<1__$*'3(>0J$54%*E54J]c

- [M9 #+ /'+#5'$$= ' >"J'(W3*'%'/$* '%%3*++ X43 ' Z*/ <',* a'(% 40>*3 2(0*3(*03*+4"35*+cE 7>* 0*3J+ [M9 '(% [M2 '3* "+*% #(0*35>'(,*'/$= a'$0>4",> 0>*3* #+ ' 54(S4$"0*%0*5>(#5'$&*U<$'('0#4(&X43&Z>=&0>*=&+>4"$%(d0&/*cE

)4L'#(&('L*

-&%4J'#(&('J*&54(+#+0+&4X&0Z4&<'30+`&' !""# '(%&'( $%#$&'("&E$*'3(>0J$54%*E54J&#+&'&%4J'#(&('J*&'+&4<<4+*%&04&'&"3$&a]>00<1__$*'3(>0J$54%*E54J^c`]$*'3(>0J$54%*^&#+&0>*&%4J'#(&3440&a'+&#(&3440&Z43%c

M

Page 15: Design And Build A Website

]E54J^&#+&0>*&%4J'#(&*U0*(+#4(7>*3* '3* J'(= %4J'#( ('J* *U0*(+#4(+E 7>* J4+0 <4<"$'3 a'(% 4$%*+0 %4J'#(c *U0*(W

+#4(+&'3*&E54J`&E(*0`&E43,&'(%&E,4SE54J&+0'(%+&X43&]54JJ*35#'$^&'+&#+&,*(*3'$$=&"+*%&/=&/"+#(*++*+E(*0&+0'(%+&X43&](*0Z43D^&'(%&#+&,*(*3'$$=&"+*%&Z>*(&'&E54J&#+&"('S'#$'/$*EE43, +0'(%+ X43 43,'(#L'0#4( '(% #+ ,*(*3'$$= "+*% /= (4(W<34X#0 ,34"<+` /"0 +"5> %4J'#(

('J*&5'(&/*&3*,#+0*3*%&/=&'(=4(*EE,4S&+0'(%+&X43&,4S*3(J*(0&'(%&#+&*U5$"+#S*$=&"+*%&/=&0>*&[E;E&,4S*3(J*(0E-%%#0#4('$$=` *S*3= 54"(03= '34"(% 0>* Z43$% >'+ /**( '++#,(*% ' %4J'#( ('J* *U0*(+#4(

+"5> '+ ]E5'^ X43 :'('%' '(% ]E#(^ X43 2(%#'E F*(*3'$$=` 54"(03=W+<*5#X#5 %4J'#( *U0*(+#4(++",,*+0 0>* 0'3,*0 '"%#*(5* 4X 0>* Z*/+#0* #+ 0>* 54"(03= 0>'0 0>* %4J'#( *U0*(+#4( /*$4(,+04E 64Z*S*3` 0>*3*d+ (40>#(, +04<<#(, '(=4(* X34J "+#(, ' 54"(03=W+<*5#X#5 %4J'#( *U0*(W+#4( X43 '( #(0*3('0#4('$$= '"%#*(5*E 64Z*S*3` 3*,#+03'0#4( 4X +4J* 54"(03=W+<*5#X#5 %4J'#(*U0*(+#4(+&#+&3*+03#50*%&04&5#0#L*(+&4X&0>*&54"(03=&0>*&*U0*(+#4(+&/*$4(,+&04E

.>'0d+ J43*` +4J*0#J*+ 54J<'(#*+ 3*,#+0*3 %4J'#( ('J*+ Z>*3* 0>* 3440 '(% *U0*(+#4(X43J 0>* ('J* 4X 0>*#3 54J<'(=E P43 *U'J<$*` /$4E,+ a]/$4,+^cE 7>#+ <3'50#5* #+ 5'$$*% %4J'#(>'5D#(, '(% #+ ,*(*3'$$= "+*% Z>*( J43* 03'%#0#4('$ %4J'#( *U0*(+#4(+ aE54J` E(*0` *05c '3*"('S'#$'/$*E

.>'0d+ J43*` 54"(03=W+<*5#X#5 *U0*(+#4(+ '3* '$+4 "+*% Z>*( 0>*= >'<<*( 04 >'S* #(>*3W*(0&a/"0&"(#(0*(0#4('$$=&J*'(#(,c&0>'0d+&+"#0'/$*&X43&/3'(%#(,E

E0S X43 *U'J<$* /*$4(,+ 04 0>* #+$'(% 4X 7"S'$" '(% #+ 4X0*( "+*% X43 Z*/+#0*+ 3*$'0*% 040*$*S#+#4(&'(%&S#%*4E

EXJ /*$4(,+ 04 0>* P*%*3'0*% ;0'0*+ 4X 8#534(*+#' '(% #+ 4X0*( "+*% /= Z*/+#0*+ 3*$'0*% 043'%#4`&/34'%5'+0#(,&'(%_43&J"+#5E

'(%&+4&4(hgY7T1 E54 a<34(4"(5*% ]D4^ 43 ]5**W4>^c #+ '( '$0*3('0#S* 04 0>* ]E54J^ *U0*(+#4( '(% #0 #+

/*54J#(,&#(53*'+#(,$=&J'#(+03*'JE&a-$0>4",>`&<*3+4('$$=`&2&>'0*&#0Ec

)4L'#(&('L*&3*,#+03'3

- %4J'#( 3*,#+03'3 #+ ' 54J<'(= 0>'0 >'+ /**( '"0>43#L*% 04 +*$$ %4J'#( ('J*+E a*E,Eg'J*:>*'<`&F4)'%%=`&*05EcE

2N&'%%3*++

a2(0*3(*0&Q340454$&-%%3*++c2X&'&[M9&#+&'(&'%%3*++`&'(&2Q&'%%3*++&#+&'D#(&04&FQ;&5443%#('0*+E

9#(>&K&6GO*3$#(>

-&Z*/<',*&5'(&>'S*&0Z4&0=<*+&4X&$#(D+1&#(0*3('$&'(%&*U0*3('$E7>*+*&'3*&3*$'0#S*&0*3J+&/'+*%&4(&Z>*3*&0>*&$#(D&#+&X4"(%&'(%&Z>*3*&#0&<4#(0+&04E

P Q 2E7JA)I:72AE

Page 16: Design And Build A Website

2(0*3('$ $#(D+ <4#(0 04 X#$*+_<',*+ Z#0>#( 0>* Z*/+#0*_+*3S*3E P43 *U'J<$*` ' >4J* <',*54"$%&>'S*&'&$#(D&04&'&54(0'50&<',*&43&]'/4"0&"+^&<',*E

8*'(Z>#$*` *U0*3('$ $#(D+ <4#(0 04 X#$*+ 4( '(40>*3 Z*/+#0*_+*3S*3E 2X =4" =4" >'S* ' <4+0' $#(D 04 ' \4"7"/* 4( =4"3 P'5*/44D <',*E 7>* \4"7"/* $#(D #+ '( *U0*3('$ $#(D +#(5* #0d+<4#(0#(,&04&'&X#$*&4(&'(40>*3&+*3S*3E

N34,3'L&K&'OO$#5'0#4(&R'OOS

-&54J<"0*3&<34,3'J&#+&54%*&0>'0&5'(&5'(&J'(#<"$'0*&0>*&%'0'&4(&=4"3&54J<"0*3E

T#$*

-&54J<"0*3&X#$*&#+&'&54J<"0*3&%45"J*(0&0>'0&5'(&/*&3*'%&'(%&J4%#X#*%&/=&'(&'<<$#5'0#4(E

T4$%*3&K&)#3*5043G

- X#$* X4$%*3 _ %#3*5043= #+ ' D#(% 4X 54(0'#(*3 X43 54J<"0*3 X#$*+` J"5> $#D* ' <>=+#5'$ X4$%*3#+&"+*%&04&54(0'#(&'(%&43,'(#L*&<'<*3&%45"J*(0+E

T#$*&O'0=

-&X#$*&<'0>&*U<3*++*+&0>*&$45'0#4(&4X&'&X#$*&43&X4$%*3Ea*E,E&]:1__[+*3_!4/_8=&)45"J*(0+_3*+"J*E%45^c

.*/&/34B+*3

- Z*/ /34Z+*3 #+ ' 54J<"0*3 <34,3'J 0>'0 #+ "+*% X43 ('S#,'0#(, 0>* Z43$% Z#%* Z*/ a*E,E2(0*3(*0 TU<$43*3` P#3*X4U` :>34J*` ;'X'3#` *05Ec 2( 0>*43=` 0>* $44D '(% X"(50#4('$#0= 4X 'Z*/ +#0* +>4"$% (40 S'3= '534++ Z*/ /34Z+*3+E !"0 #( 3*'$#0=` 0>*3* '3* 0#J*+ Z>*( ' <'30#5"W$'3 Z*/ +#0* J'= (40 Z43D '+ #(0*(%*% 4( ' <'30#5"$'3 /34Z+*3E [+"'$$=` 0>*3*d+ S*3= $#00$* =4"5'(&%4&'/4"0&0>#+E

J*(%*3#(,

2(&0*3J+&4X&Z*/&/34Z+#(,`&3*(%*3#(,&3*X*3+&04&0>*&'50&4X&'&Z*/&/34Z+*3&$4'%#(,&'&Z*/&<',*E

;*3<*3

- +*3S*3 #+ '(= 54J<"0*3 0>'0 #+ 5'<'/$* 4X +*(%#(, '(% 3*5*#S#(, %'0'E 7>*3* '3* +<*5#'$#L*%54J<"0*3+ 0>'0 '3* "+*% '+ +*3S*3+` /"0 S#30"'$$= '(= 54J<"0*3 5'( /* "+*% '+ +*3S*3 #(5$"%#(,=4"3&8'5`&Q:&43&*S*(&=4"3&+J'30<>4(*E

Q U

Page 17: Design And Build A Website

.>*( =4"d3* '0 Z43D '(% =4" 54((*50 04 ' 54WZ43D*3+ 54J<"0*3` 0>* 54J<"0*3 =4" '3*54((*50&04&#+&'&+*3S*3E

.>*( =4" 54((*50 04 +4J*4(*d+ #7"(*+ $#/3'3= 4( ' 54J<"0*3 0>'0 #+ 4( =4"3 (*0Z43D`0>*&54J<"0*3&0>'0&=4"&'3*&54((*50#(,&04&#+&'&+*3S*3E

.>*( =4" '55*++ =4"3 *WJ'#$ "+#(, 8#534+4X0 Y"0$44D 4X 8'5 8'#$` =4" '3* 54((*50#(,04&'&+*3S*3E

.>*(&=4"&3"(&;D=<*&04&J'D*&5'$$+&4(&0>*&2(0*3(*0`&=4"&'3*&54((*50#(,&04&'&+*3S*3E7>*3* '3* %#XX*3*(0 D#(%+ 4X +*3S*3+ "+*% X43 03'(+J#00#(, '(% 3*5*#S#(, %#XX*3*(0 D#(%+ 4X

#(X43J'0#4(E.>*( =4" 4<*( =4"3 Z*/ /34Z+*3 '(% $4'% ' Z*/ <',*` =4" '3* 54((*50#(, 04 ' Z*/ +*3SW

*3&a43&J43*&+<*5#X#5'$$=`&'(&>00<&+*3S*3cE

VW Q 2E7JA)I:72AE

Page 18: Design And Build A Website

@

*+,-*+,-

Page 19: Design And Build A Website
Page 20: Design And Build A Website

$

6789

.='0&*H'50$G&#+&'&B*/&O',*X

- Z*/ <',* #+ S*3= J"5> $#D* ' 8; .43% X#$*i' %45"J*(0 0>'0 5'( 54(0'#( #J',*+` 0'/$*+`X43J'00*%&0*U0&a/4$%`&"(%*3$#(*`&#0'$#5+`&*05Ec`&'(%&$#(D+&04&40>*3&%45"J*(0+E

.>*( =4" "+* '( '<< $#D* 8; .43%` 0>*3* #+ 54%* *J/*%%*% #( 0>* %45"J*(0 0>'0 =4"5'((40 #JJ*%#'0*$= +**E 7>#+ 54%* %*0*3J#(*+ >4Z 0*U0 +>4"$% /* X43J'00*% '(% Z>*3*#J',*+ +>4"$% /* <$'5*%E ;#J#$'3$=` Z>*( =4" 4<*( ' Z*/ <',*` 0>*3* #+ 54%* *J/*%%*% #(0>* %45"J*(0 =4" 5'((40 #JJ*%#'0*$= +**E -X0*3'$$` Z>*( =4" 0*$$ 8; .43% 04 J'D* =4"30*U0 /4$% 43 "(%*3$#(*% 43 Z>'0*S*3h#0d+ (40 J',#5` '$$ 4X 0>#+ X43J'00#(, #(X43J'0#4( (**%+04&/*&+043*%&+4J*Z>*3*`&+4J*>4ZE

2X =4" Z'(0 04 +** Z>'0 2 J*'(` 03= %4Z($4'%#(, 0>#+ +'J<$* .43% %45"J*(0 '(% 0>*(4<*( #0 Z#0> ' 0*U0 *%#043E \4"d$$ +** 0>'0 ' $40 4X 0>* 0*U0 #+ 3*'%'/$*` /"0 0>*3*d+ '$+4 0*U0 0>'0'<<*'3+ 04 /* ,#//*3#+>i0>#+ #+ 0>* X43J'00#(, 54%* 0>'0 '$$4Z+ 8; .43% 04 %#+<$'= <3*00=`Z*$$&X43J'00*%&%45"J*(0+E

;#J#$'3$=` Z*/ <',*+ 54(0'#( X43J'00#(, #(+03"50#4(+ a6789c 0>'0 #(%#5'0*+ >4Z 0*U0 '(%J"$0#J*%#'&+>4"$%&/*&%#+<$'=*%&#(&'&Z*/&/34Z+*3E

g40*1 [+#(, ' Z*/ /34Z+*3` =4" 5'( S#*Z 0>* +4"35* 54%* 4X ' Z*/ <',*E [+"'$$=` 0>*3*d+'(&4<0#4(&5'$$*%&]j#*Z&;4"35*^&"(%*3&0>*&S#*Z&J*("&4X&=4"3&Z*/&/34Z+*3E

YH'LO$*

6*3*&#+&'(&*U'J<$*&4X&6789E

!"#$%&

!"'()&

!#*#%'&!+#*#%'&

V?

Page 21: Design And Build A Website

!+"'()&

!,-).&

!"/&0"*12*12(2"'()*34!+"/&

!"5&0"*12*12(216,7"'()*34!+"5&

!8&9-62:(32)-2(%%2;*3)12-<2#"*3412=*#"2>0?@A!+8&

!8&B-C2'D($8%'E2.-62:(32$(;'2(28(C(4C(8"2%*;'2#"*1A!+8&

!8&B-%%-=')2,.2(3-#"'C28(C(4C(8"AAA

!,C2+&2=*#"2(2%*3'2,C'(;A!+8&

!8&>-='F'C2#"(#2%*3'2,C'(;

$61#2,'2*3)*:(#')2=*#"2(32>0?@2#(4

-C2'%1'2*#2=-3#21"-=2682*32(2=',2,C-=1'CA!+8&

!8&9-62:(32(%1-2$(;'2#'D#2!1#C-34&,-%)!+1#C-34&

(3)2!'$&*#(%*:*G')!+'$&A!+8&

!"C&

VZ Q 6789

Page 22: Design And Build A Website

!8&0"*12*12(2!(2"C'<HI"##8J++%'(C3"#$%:-)'A:-$I&%*3;!+(&A!+8&

!+,-).&

!+"#$%&

!3*'>%4B(

7>*&$#(*&/*$4Z&#+&5'$$*%&'(&6789&*$*J*(0E!"#$%"&'(&'()("*)+&,-!."#$

-( 6789 *$*J*(0 ,*(*3'$$= 54(+#+0+ 4X 6789 0',+ a]k>Bl^ '(% ]k_>Bl^c 0>'0 +"334"(%54(0*(0&a]7>#+&#+&'&>*'%#(,^cE

-( 6789 0', #+ ' Z43% 43 5>'3'50*3 *(5$4+*% Z#0>#( 0>* ,3*'0*3 0>'( '(% $*++*3 0>'(+#,(+E!2&6789&0',+&"+"'$$=&54J*&#(&<'#3+m&'(&4<*(#(,&0',h!"/&h'(%&'&5$4+#(,&0',!+"/&64Z*S*3` 0>*3* '3* +4W5'$$*% +#(,$*04( 0',+ 0>'0 +0'(%'$4(*` $#D* 0>* 0', X43 ' >43#L4(0'$

3"$*!"C2+&;#(,$*04( 0',+ +>4"$% >'S* ' 5$4+#(, +$'+> aX43 *+40*3#5 3*'+4(+` *S*( 0>4",> 0>*= ,*(*3'$$=

Z43D&e"+0&X#(*&Z#0>4"0&0>*JcE6789 *$*J*(0+ 4($= 3*R"#3* '( 4<*(#(, '(% 5$4+#(, 0', Z>*( 0>*3* #+ +4J*0>#(, #(

/*0Z**(&0>*JE.*/ /34Z+*3+ %4 (40 %#+<$'= 6789 0',+` #(+0*'% 0>*= "+* 6789 0',+ 04 %*0*3J#(* Z>'0

4/e*50+&04&%#+<$'=&a0*U0`&#J',*+`&0'/$*+`&*05Ec&'(%&>4Z&0>*=&+>4"$%&/*&X43J'00*%E

;0*O[/G[;0*O

2( 43%*3 04 /*00*3 *U<$'#( >4Z 6789 Z43D+` 2 Z'(0 04 +>4Z =4" >4Z 04 53*'0* ' ' 3*'$$=/'+#5&Z*/&<',*&+0*<W/=W+0*<E&a-,'#(`&Z*d$$&,4&4S*3&'$$&4X&0>#+&','#(`&$'0*3`&#(&%*0'#$Ec

P#3+0`&2d$$&4<*(&J=&0*U0&*%#043E

Q VF

Page 23: Design And Build A Website

7>*(&2d$$&<'+0*&+4J*&0*U0&#(04&0>*&Z#(%4ZE./012%'1(3"104451#641#47#1)01")(4821)"&4"#4&13"&1$483#)94821$43&3:84;<

V\ Q 6789

Page 24: Design And Build A Website

g4Z&2d$$&+'S*&0>*&X#$*Ea-(= X#$* 0>'0 *(%+ #( E>0J 43 E>0J$ Z#$$ /* 03*'0*% '+ ' Z*/ <',* /= ' Z*/ /34Z+*3E 2 5'(

S#*Z&Z*/&<',*+&+043*%&4(&J=&54J<"0*3`&/"0&0>*=&'3*&(40&S#*Z'/$*&4(&0>*&2(0*3(*0Ec

Q VM

Page 25: Design And Build A Website

2 >'S* (40 53*'0* ' <34<*3 Z*/ <',* +#(5* #0 %4*+ (40 54(0'#( 6789 54%#(,E !"0 $*0d+ 0'D*'&$44D&'0&#0&'(=Z'=`&e"+0&04&+**&Z>'0&>'<<*(+E

VP Q 6789

Page 26: Design And Build A Website

-$$ 4X 0>* Z43%+ '3* 0>*3*` /"0 0>*=d3* '$$ $"J<*% 04,*0>*3 #( 4(* /#, "(3*'%'/$* /$45D 4X0*U0E

7>'0d+ /*5'"+* 0>* Z*/ /34Z+*3 %4*+(d0 D(4Z Z>'0 04 %4 Z#0> 0>* 0*U0E TS*( 0>4",> #0J'= '<<*'3 4/S#4"+ 04 "+` Z* (**% 04 0*$$ 0>* Z*/ /34Z+*3 Z>*3* <'3',3'<>+ /*,#( '(% *(%E-(%&Z*&5'(&%4&0>#+&R"#0*&+#J<$=&/=&"+#(,&0>*&<'3',3'<>&0',1!8&2!+8&

YH'LO$*

.*&5'(&'3/#03'3#$=&%*X#(*&<'3',3'<>+&'+&Z*&+**&X#0Ek<l20 #+ ' J*$'(5>4$= 4/e*50 04 0>4+* Z>4 Z'$D 0>34",> 0>#+ ,3*'0 04Z( 43 03'S*$ #( 0>*

Q VU

Page 27: Design And Build A Website

54"(03=` Z>*( 0>*= +** 0>* +03**0+` 0>* 34'%+` '(% 5'/#( %443+` 534Z%*% Z#0> /*,,'3+ 4X 0>*X*J'$* +*U` X4$$4Z*% /= 0>3**` X4"3` 43 +#U 5>#$%3*(` '$$ #( 3',+ '(% #J<430"(#(, *S*3= <'++*(W,*3&X43&'(&'$J+Ek_<l

-<<$=#(, 0>* <'3',3'<> 0', 5'( 0"3( 4"3 <3*S#4"+ J*++= /$4/ 4X 0*U0 #(04 +4J*0>#(, 0>'0$44D+&$#D*&0>#+h

g4Z 0>'0d+ J"5> /*00*3n 20 +0#$$ %4*+(d0 $44D $#D* ' <34<*3 Z*/ <',*` /"0 >4<*X"$$= =4"d3*,*00#(, ' +*(+* 4X >4Z 6789 Z43D+E 20d+ (40 J',#5` Z* +#J<$= (**% 04 ,#S* 0>* Z*/ /34Z+*3+#(+03"50#4(+&X43&>4Z&04&3*(%*3&4"3&Z*/&<',*E

]W Q 6789

Page 28: Design And Build A Website

T3'L*B43>

TS*( 0>4",> 4"3 Z*/ <',* #+ 3*(%*3#(, '+ Z* #(0*(%*%` #0d+ J#++#(, /'+#5 6789 0',+ 0>'0'3*&3*R"#3*%&X43&'$$&Z*/&<',*+E

a;4J* Z*/ /34Z+*3+ '3* J43* X43,#S#(, 0>'( 40>*3+ Z>*( #0 54J*+ 04 #J<34<*3 54%*E)4(d0 54(S#(5* =4"3+*$X 0>'0 =4" 5'( ,*0 'Z'= Z#0> +$4<<= 54%*` #0 J'= *(% "< 53*'0#(, <34/W$*J+&X43&=4"&$'0*3Ec

!*$4Z&#+&0>*&/'+#5&X3'J*Z43D&X43&'&+0'(%'3%&6789&Z*/&<',*E

!"#$%&

!"'()&

!#*#%'&!+#*#%'&

!+"'()&

!,-).&

!+,-).&

!+"#$%&

!3*'>%4B(

!"#$%& #(%#5'0*+&0>'0&0>#+&%45"J*(0&#+&#(&X'50&'(&6789&Z*/&<',*E!"'()& #+ 4"3 Z*/<',* >*'%*3E 7>#+ #+ Z>*3* Z* Z#$$ <$'5* #(X43J'0#4( '/4"0 4"3 Z*/W

<',* +"5> '+ 0>* 0#0$*` D*=Z43%+` '(% %*+53#<0#4(E a.*d$$ *U<$43* '$$ 4X 0>4+* 4<0#4(+ $'0*3 #(0>* ,"#%*Ec g4(* 4X 0>* #(X43J'0#4( <$'5* Z#0>#( 0>* k>*'%l Z#$$ '<<*'3 4( 0>* Z*/<',*#0+*$XE

Q ]V

Page 29: Design And Build A Website

!#*#%'& <*30'#(+ 04 0>* 0#0$* 4X 0>* Z*/ <',*E 7>* 0*U0 =4" *(0*3 >*3* J'= (40 (*5*++'3W#$=&J'05>&0>*&0#0$*&43&$4,4&0>'0&'<<*'3+&4(&0>*&Z*/&<',*&#0+*$XE

P43 *U'J<$*` =4" >'S* ' >*'%#(, 4( =4"3 Z*/ <',* 0>'0 3*'%+ ]-!: )3= :$*'(#(,^` J*'(WZ>#$* Z#0>#( =4"3 k0#0$*l 0', =4" J'= 54"$% *(0*3 0>* 0*U0` ]:'('%'d+ g4E B )3= :$*'(*3 i-!:)3=:$*'(#(,E54J^!,-).& <*30'#(+ 04 0>* /4%= 4X 4"3 Z*/<',*` #( 40>*3 Z43%+ 0>* 54(0*(0 '(% $'=4"0 4X

0>*&Z*/<',*&#0+*$XE

]] Q 6789

Page 30: Design And Build A Website

%

6789&7GO4,3'O=G

!4$%

)*+,-./*+,-./*+,0

!1#C-34&K%("E2,%("E2,%("A!+1#C-34&

20'$#5+

=83651:8361:836;

!'$&K%("E2,%("2,%("A!+'$&

]?

Page 31: Design And Build A Website
Page 32: Design And Build A Website

&

6789&2L',*+

A<*3<#*B

!*$421C:HILMNOPQ02RQ@2>PQPSI&

o7>*3*&#+&(4&5$4+#(,&0',&X43&0>*&#J',*&*$*J*(0E

.#%0=&'(%&6*#,=0

7>* /34Z+*3 Z#$$ '"04J'0#5'$$= %*0*3J#(* 0>* Z#%0> '(% >*#,>0 4X 0>* #J',*` /"0 #X =4" Z#+>04&J'("'$$=&+*0&0>4+*&S'$"*+`&=4"&5'(&%4&+4&"+#(,&0>*&Z#%0>&'(%&>*#,>0&'003#/"0*+E

64Z*S*3` ,*(*3'$$=` =4" +>4"$%(d0 "+* 0>* >*#,>0 '(% Z#%0> '003#/"0*+ 04 3*+#L* '( #J',*`#(+0*'%&=4"&+>4"$%&3*+#L*&0>*&#J',*&#0+*$X&"+#(,&'(&#J',*&*%#043o7>*&Z#%0>&'(%&>*#,>0&S'$"*+&5'(&*#0>*3&/*&<#U*$+&43&'&<*35*(0',*E

!*$421C:HILRQ@2TUPO2>PQPSI2=*)#"HIVW8DI2"'*4"#HIVW8DI&

]F

Page 33: Design And Build A Website
Page 34: Design And Build A Website

'

6789&643#^4(0'$&J"$*

A<*3<#*B

-&>43#L4(0'$&3"$*&#+&'&$#(*&0>'0&,*(*3'$$=&+*3S*+&'+&'&%#S#%*3&/*0Z**(&+*50#4(+&4X&54(0*(0E

!"C&

\4"&5'(&5>'(,*&0>*&Z#%0>&4X&0>*&3"$*&"+#(,&0>*&]+#L*^&<'3'J*0*3

!"C21*G'HIVI&

\4"&5'(&'$+4&'%e"+0&0>*&Z#%0>&'+&X4$$4Z+&a/=&%*X'"$0&#0d+&BAApc

!"C21*G'HIVI2=*)#"HI5WW8DI&

]M

Page 35: Design And Build A Website
Page 36: Design And Build A Website

(

6789&6*'%#(,+

A<*3<#*B

8"5> $#D* ' Z43% <345*++43` Z* 5'( X43J'0 0*U0 "+#(, ' >*'%#(, 0', 04 +#,(#X= %*,3**+ 4X#J<430'(5*E

!= %*X'"$0` >*'%#(, 0*U0 +#L* %*53*'+*+ '+ 0>* >*'%#(, $*S*$ #(53*'+*+E P43 *U'J<$*` ]>*'%W#(,&@q&Z#$$&/*&+J'$$*3&0>'(&]>*'%#(,&Bq&'(%&]>*'%#(,&Cq&Z#$$&/*&+J'$$*3&0>'(&]>*'%*3&@qE

]6*'%#(, Bq #+ 0>* 0=<#5'$$= "+*% X43 0>* 0#0$* 4X ' <',*` X4$$4Z*% /= ]>*'%#(, @q X43 +"/W0#0$*+'(%&+4&4(E

ag40*1 != %*X'"$0` >*'%#(, 0*U0 +#L*+ '3* 3*$'0#S* 04 0>* +#L* 4X 0>* /4%= 0*U0E 64Z*S*3` 0>*0*U0W+#L*&X43&'&>*'%#(,&5'(&/*&54J<$*0*$=&'3/#03'3=&"+#(,&:;;Ec

YH'LO$*

!"/&0"*12*12(2"/2"'()*34!+"/&

]U

Page 38: Design And Build A Website

)

6789&6GO*3$#(>+

;"LL'3G

-&>=<*3$#(D&5'(&*#0>*3&03#,,*3&'&X#$*&%4Z($4'%&43&+*(%&'&"+*3&04&'(40>*3&Z*/&<',*E

!(2"C'<HILMNOPQ02RQ@2>PQPSI&0'D#!+(&

AO*(&9#(>&2(&-&E*B&.#(%4B

7>* #(C4'#HI,%(3;I '003#/"0*&5'(&/*&"+*%&04&4<*(&'&$#(D&#(&'&(*Z&Z#(%4ZE

!(2"C'<HILMNOPQ02RQ@2>PQPSI2#(C4'#HIX,%(3;I2&0'D#!+(&

2L',*&9#(>

2X&=4"&Z'(0&04&0"3(&'(&#J',*&#(04&'&$#(D&=4"&(**%&04&Z3'<&0>*&k'l&0',&'34"(%&'(&k#J,l&0',E

!(2"C'<HILMNOPQ02@MNY2RQ@SI&!*$421C:HILMNOPQ02M?ZTP2RQ@SI&!+(&

?V

Page 39: Design And Build A Website
Page 40: Design And Build A Website

!*

6789&!"$$*0&9#+0+

A<*3<#*B

2X =4" Z'(0 04 53*'0* ' /"$$*0 $#+0 "+#(, ' Z43% <345*++43 43 6789` =4" 54"$% e"+0 53*'0* '(*Z <'3',3'<> 43 $#(* /3*'D X43 *'5> *'5> #0*J 4X =4"3 $#+0E \4" 54"$% J'("'$$= <3*X'5* *'5><'3',3'<>&Z#0>&'&("J/*3&43&$*00*3&43&+=J/4$&#(&43%*3&04&#(%#5'0*&#0&#+&<'30&4X&'&$#+0E

!"0 0>*3*d+ ' /*00*3 Z'=E 8"5> $#D* ' Z43% <345*++43` Z* 5'( X43J'0 4"3 0*U0 '+ ' $#+0 +40>'0 0>* '<<34<3#'0* 0*U0 #+ 3*<3*+*(0*% '+ ' $#+0 a'"04J'0#5'$$= <3*X'5*% Z#0> 0>* 3*$*S'(0("J/*3`&$*00*3&43&+=J/4$cE

7>*3*&'3*&0Z4&D#(%+&4X&/"$$*0&$#+0+1&43%*3*%&'(%&"(43%*3*%E

A3%*3*%&!"$$*0&9#+0+

Y3%*3*%&/"$$*0&$#+0+&'3*&("J/*3*%BE #0*J&B@E #0*J&@CE #0*J&CIE #0*J&I

A3%*3*%&!"$$*0&9#+0+

[(43%*3*%&/"$$*0&$#+0+&'3*&(40&("J/*3*%E&2(+0*'%`&*'5>&$#(*&#+&<3*X'5*%&/=&'&+=J/4$E

f #0*J&Bf #0*J&@f #0*J&Cf #0*J&I

[+#(,&6789&Z*&5'(&*U<3*++&'&43%*3*%&/"$$*0&$#+0&"+#(,&0>*&k4$l&0',1

!-%&

??

Page 41: Design And Build A Website

!%*&*#'$2/!+%*&

!%*&*#'$25!+%*&

!%*&*#'$2[!+%*&

!%*&*#'$2\!+%*&

!+-%&

Y3&Z*&5'(&*U<3*++&'(&"(43%*3*%&/"$$*0&$#+0&"+#(,&0>*&k"$l&0',1

!6%&

!%*&*#'$2/!+%*&

!%*&*#'$25!+%*&

!%*&*#'$2[!+%*&

!%*&*#'$2\!+%*&

!+6%&

?Z Q 6789

Page 42: Design And Build A Website

!!

6789&7'/$*+

A<*3<#*B

k0'/$*l 7'/$*

k03l 7'/$*&M4Z

k0%l 7'/"$'3&)'0'

k0>l 7'/$*&6*'%#(,

k5'<0#4(l :'<0#4(

:3*'0#(, 0'/$*+ "+#(, 6789 #+ ' $#00$* /#0 %#XX*3*(0 0>'( "+#(, 8; .43%E ;03#50$= +<*'D#(,`=4" 5'( (40 53*'0* 0'/$* 54$"J(+ "+#(, 6789E 2(+0*'%` =4" 5'( 4($= 53*'0* 34Z+ !#C&Z>#5> 54(0'#( 5*$$+ !#)&E 7>* 5*$$+ #( =4"3 X#3+0 34Z %*X#(* 0>* ("J/*3 4X 54$"J(+ #( =4"30'/$*E

YH'LO$*&_V'

5*$$&B 5*$$&@

YH'LO$*&_V/

B @

C I

?F

Page 43: Design And Build A Website

YH'LO$*&_V5

1 2 3 43

5+*$ BA BC BB

6$5+*$ B@ O BO BA

!3*'>%4B(

2(&43%*3&04&53*'0*&'&0'/$*&=4"&(**%&04&*+0'/$#+>&0>* !#(,%'& *$*J*(0E

!#(,%'&

!+#(,%'&

7>*(&=4"&(**%&04&53*'0*&'&0'/$*&34ZE

!#C&2!+#C&

-(%&Z#0>#(&*'5>&0'/$*&34Z&=4"&(**%&04&'%%&5*$$+&a0'/"$'3&%'0'c&k0%l

!#)&2!+#)&

.>*(&=4"&<"0&#0&'$$&04,*0>*3`&=4"&,*0&+4J*0>#(,&$#D*&0>#+EE

!#(,%'&

!#C&

!#)&:'%%2/!+#)&

!#)&:'%%25!+#)&

?\ Q 6789

Page 44: Design And Build A Website

!+#C&

!+#(,%'&

.>#5>&$44D+&$#D*&0>#+h5*$$&B 5*$$&@

7>* 0'/$* '/4S* %4*+(d0 3*'$$= $44D $#D* ' 0'/$* /*5'"+* #0d+ +53"(5>*% "< '(% 54(0'#(+ (4 /43W%*3+E&;4&$*0d+&'%%&+4J*&/43%*3+E

!43%*3+

5*$$&B 5*$$&@

!#(,%'2,-C)'CHI/I&

!#C&

!#)2,-C)'CHI/I&:'%%2/!+#)&

!#)2,-C)'CHI/I&:'%%25!+#)&

!+#C&

!+#(,%'&

:*$$&;O'5#(,

9*0d+&'%%&+<'5#(,&/*0Z**(&4"3&0'/$*&5*$$+&"+#(, :'%%18(:*34hEo7>*&S'$"*&=4"&*(0*3&Z#$$&/*&'55*<0*%&'+&<#U*$+E

5*$$&B 5*$$&@

!#(,%'2,-C)'CHI/I2:'%%18(:*34HI/WI&

!#C&

!#)2,-C)'CHI/I&:'%%2/!+#)&

Q ?M

Page 45: Design And Build A Website

!#)2,-C)'CHI/I&:'%%25!+#)&

!+#C&

!+#(,%'&

:*$$&N'%%#(,

-(%&(4Z&Z*d$$&'%%&5*$$&<'%%#(,&"+#(, :'%%8())*34ho7>*&S'$"*&=4"&*(0*3&Z#$$&/*&'55*<0*%&'+&<#U*$+E

5*$$&B 5*$$&@

!#(,%'2,-C)'CHI/I2:'%%18(:*34HI/WI2:'%%8())*34HI/WI&

!#,-).&

!#C&

!#)&:'%%2/!+#)&

!#)&:'%%25!+#)&

!+#C&

!+#,-).&

!+#(,%'&

7'/$*&6*'%#(,+

2X ' 0'/$* 5*$$ #+ J*'(0 04 54(0'#( ' >*'%#(, 3'0>*3 0>'( %'0'` "+* 0>* 0'/$* >*'%#(, 0', !#"&#(+0*'%&4X&0>*&0'/"$'3&%'0'&0', !#)&Ea7>#+ #+ (40 +03#50$= (*5*++'3=E \4" 54"$% ,*0 'Z'= Z#0> "+#(, 0>* !#)& 0',E !"0 #0d+ '$Z'=+' ,44% #%*' 04 43,'(#L* =4"3 %'0'_54(0*(0 +4 #0 5'( /* /*00*3 J'(#<"$'0*% '+ =4"3 (**%+5>'(,*E .>'0d+ J43*` 0'/$* >*'%#(,+ '3* /4$% /= %*X'"$0` Z>#5> /*00*3 %#+0#(,"#+>*+ 0>*J X430>*&3*+0&4X&=4"3&0'/$*&%'0'Ec

?P Q 6789

Page 46: Design And Build A Website

7$+8(&9.: 7$+8(&9.;

5*$$&B 5*$$&@

!#(,%'2,-C)'CHI/I2:'%%18(:*34HI/WI2:'%%8())*34HI/WI&

!#,-).&

!#C&

!#"&>'()*342/!+#"&

!#"&>'()*3425!+#"&

!+#C&

!#C&

!#)&:'%%2/!+#)&

!#)&:'%%25!+#)&

!+#C&

!+#,-).&

!+#(,%'&

7'/$*&'(%&:*$$&.#%0=

.*&5'(&54(034$&0>* =*)#" 4X&4"3&54$"J(+&'(%&*S*(&0>*&0'/$*&#0+*$XEo7>*&S'$"*&5'(&/*&'&<*35*(0',* ] 43&<#U*$+ 8DE

7$+8(&9.: 7$+8(&9.;

Q ?U

Page 47: Design And Build A Website

5*$$&B 5*$$&@

!#(,%'2,-C)'CHI/I22=*)#"HI/WW]I2:'%%18(:*34HI/WI2:'%%8())*34HI/WI&

!#,-).&

!#C&

!#"2=*)#"HI^W]I&>'()*342/!+#"&

!#"&>'()*3425!+#"&

!+#C&

!#C&

!#)&:'%%2/!+#)&

!#)&:'%%25!+#)&

!+#C&

!+#,-).&

!+#(,%'&

:4$"L(&;O'(

.* 5'( >'S* ' +#(,$* 5*$$ +<'( J"$0#<$* 54$"J(+ "+#(, :-%18(3E a7>#+ #+ *+<*5#'$$= "+*X"$Z>*(&=4"&>'S*&%'0'&0>'0&'<<$#*+&04&J43*&0>'(&4(*&>*'%#(,Eco7>*&S'$"*&4X :-%18(3 *R"'$+&0>*&("J/*3&54$"J+&=4"&Z4"$%&$#D*&=4"3&5*$$&04&+<'(E

< ) = > ?

ZW Q 6789

Page 48: Design And Build A Website

:'0+ )4,+ g_- !*'3+

!#(,%'2,-C)'CHI/I22=*)#"HI/WW]I2:'%%18(:*34HI/WI2:'%%8())*34HI/WI&

!#,-).&

!#C&

!#"&Z!+#"&

!#"&K!+#"&

!#"&_!+#"&

!#"&`!+#"&

!#"&P!+#"&

!+#C&

!#C&

!#)&_(#1!+#)&

!#)&`-41!+#)&

!#)2:-%18(3HI5I&N+Z!+#)&

!#)&K'(C1!+#)&

!+#C&

!+#,-).&

Q ZV

Page 49: Design And Build A Website

!+#(,%'&

J4B&;O'(

.*&5'(&'$+4&>'S*&'&+#(,$*&5*$$&+<'(&J"$0#<$*&34Z+&"+#(, C-=18(3

< )

/$'> /$'>

/$'>

/$'>

/$'>

!#(,%'2=*)#"HI/WW]I2,-C)'CHI/I2:'%%18(:*34HI/WI2:'%%8())*34HI/WI&

!#,-).&

!#C&

!#"&Z!+#"&

!#"&K!+#"&

!+#C&

!#C&

!#)&,%("!+#)&

!#)&,%("!+#)&

!+#C&

!#C&

Z] Q 6789

Page 50: Design And Build A Website

!#)2C-=18(3HI5I&,%("!+#)&

!#)&,%("!+#)&

!+#C&

!#C&

!#)&,%("!+#)&

!+#C&

!+#,-).&

!+#(,%'&

Q Z?

Page 51: Design And Build A Website
Page 52: Design And Build A Website

!"

6789&T43L+

A<*3<#*B

6789 X43J+ '3* S*3= J"5> $#D* 0>* D#(% J'%* X34J <'<*3 '(% #(Di0>*= 54(0'#( /$'(D /4UW*+ 0>'0 5'( /* "+*% X43 #(+*30#(, '(% 54$$*50#(, #(X43J'0#4(E 64Z*S*3` 6789 X43J+ '3* +*(00>34",>&0>*&2(0*3(*0&3'0>*3&0>'(&0>*&<4+0'$&+*3S#5*+E

7>*3*&'3*&'$$&D#(%+&4X&6789&X43J+1

f :4(0'50&P43Jf M*,#+03'0#4(&P43Jf 94,#(&P43Jf Y3%*3&P43Jf ;"3S*=&P43Jf *05E

F*(*3'$$=` 0>* 54(0*(0+ 4X '( 6789 X43J '3* +*(0 04 '( *WJ'#$ '%%3*++` /"0 #0 54"$% 54"$%'$+4 /* +043*% #( ' %'0'/'+* X43 +4J* 40>*3 <"3<4+*E .>'0*S*3 0>* 5'+*` '( 6789 X43J #+"+*$*++&Z#0>4"0&+4J*&D#(%&4X&+4X0Z'3*&+53#<0&a<><`&'+<`&Z>'0*S*3hcE

7>#+&0"043#'$&#+&4($=&54(5*3(*%&Z#0>&0>*&6789&'+<*50&4X&53*'0#(,&'&X43JE7>*3* '3* 0"3(D*= +4$"0#4(+ 0>'0 =4" 5'( 4XX*3 X43J X"(50#4('$#0= Z#0>4"0 '(= <34,3'JW

J#(,&D(4Z$*%,*&a*E,E&P43J+0'5DcE

7=*&Y$*L*(0+&4`&'&T43L

7>*&J4+0&/'+#5&6789&X43J&54(+#+0+&4X&'&X43J&X#*$%&'(%&'&+"/J#0&/"004(E

!<-C$23($'HI16,1:C*8#*-3X<-C$I2(:#*-3HI1-$'<-C$1:C*8#A8"8I2$'#"-)HI4'#I&

ZF

Page 53: Design And Build A Website

P7$(*%J2!*386#2#.8'HI#'D#I23($'HI61'CX'$(*%I&!*386#2#.8'HI16,$*#I2F(%6'HIO6,$*#I&

!+<-C$&

T43L&T#*$%+

7>*3*&'3*&G&D#(%+&4X&X43J&X#*$%+1

7*H0&T#*$%+

!<-C$&

B*C1#23($'J2!*386#2#.8'HI#'D#I23($'HI<*C1#3($'I&!,C&

@(1#23($'J2!*386#2#.8'HI#'D#I23($'HI%(1#3($'I&

!+<-C$&

)34O%4B(&8*("

!<-C$&

!1'%':#23($'HI:(C1I&

!-8#*-32F(%6'HI"-3)(I&>-3)(!+-8#*-3&

!-8#*-32F(%6'HI,$=I&K?a!+-8#*-3&

!-8#*-32F(%6'HI(6)*I&Z6)*!+-8#*-3&

!-8#*-32F(%6'HIB-C)I&B-C)!+-8#*-3&

Z\ Q 6789

Page 54: Design And Build A Website

!+1'%':#&

!+<-C$&

7*H0'3*'

!<-C$&

!#'D#(C'(2C-=1HI/WI2:-%1HI[WI&

Z%%2=-C;2(3)23-28%(.2$(;'12b(:;2(2)6%%2,-.A

!+#'D#(C'(&

!+<-C$&

N'++B43%&T#*$%

Q ZM

Page 55: Design And Build A Website

!<-C$&

c(11=-C)J2!*386#2#.8'HI8(11=-C)I23($'HI<--I&

!+<-C$&

J'%#4&!"004(+

!<-C$&

!*386#2#.8'HIC()*-I23($'HI<--I2F(%6'HI.'1I&9'1!,C&

!*386#2#.8'HIC()*-I23($'HI<--I2F(%6'HI3-I&N-

!+<-C$&

:=*5>/4H*+

!<-C$&

!*386#2#.8'HI:"':;,-DI23($'HI<--I2F(%6'HI?(:I&M2"(F'2(2?(:!,C&

!*386#2#.8'HI:"':;,-DI23($'HI<--I2F(%6'HIc_I&M2"(F'2(2c_

!+<-C$&

ZP Q 6789

Page 56: Design And Build A Website

!#

6789&N'3',3'O=+

A<*3<#*B

20d+&(40&*(4",>&04&+#J<$=&+*<'3'0*&0*U0&"+#(,&0>*&3*0"3(&D*=ETS*( 0>4",> #0 J'= '<<*'3 4/S#4"+ 04 >"J'( /*#(,+` Z* (**% 04 0*$$ 0>* Z*/ /34Z+*3

Z>*3* <'3',3'<>+ /*,#( '(% *(%E -(% Z* 5'( %4 0>#+ R"#0* +#J<$= /= "+#(, 0>* <'3',3'<>0',1!8&

YH'LO$*

!8&0"*12*12(32'D($8%'2-<2(28(C(4C(8"A!+8&

!8&a*#"-6#2#"'28(C(4C(8"2#(4AAAA!+8&

!8&AAA,C-=1'C12=-6%)2)*18%(.2#'D#2(12-3'2,*42,%-,A!+8&

9#(*&!3*'>+

2X&=4"&Z'(0&04&53*'0*&'&$#(*&/3*'D&Z#0>#(&'&<'3',3'<>&=4"&5'(&%4&+4&"+#(,&0>*0',E

YH'LO$*

7>#+&#+&'&<'3',3'<>Z#0>&'&$#(*&/3*'D

!8&0"*12*12(28(C(4C(8"2!,C&=*#"2(2%*3'2,C'(;!+8&

ZU

Page 57: Design And Build A Website
Page 58: Design And Build A Website

!$

6789&!$45>a"40*+

2(034%"50#4(

- /$45DR"40* #+ ' /$45D 4X 0*U0 a0=<#5'$$= '( *U5*3<0 43 $4(, R"40'0#4(c 0>'0 #+ X43J'00*% %#XWX*3*(0$= a#(%*(0*%` #0'$#5#L*%` *05Ec X34J 0>* J'#( /4%= 0*U0 Z>#$* J*'(0 04 /* 3*'% '+ <'304X 0>* ('33'0#S*E a- @A**BA"#$ #+ ' 0*'+*3_*U5*3<0 0>'0 S#+"'$$= >#,>$#,>0+ 0*U0 X34J 0>* J'#(/4%=&#(&43%*3&04&'003'50&'&3*'%*3d+&#(0*3*+0&'(%&'00*(0#4(Ec

YH'LO$*

7>#+&#+&'(&*U'J<$*&4X&'&/$45DR"40*E

!,%-:;d6-#'&

0"*12*12(32'D($8%'2-<2(2,%-:;d6-#'A

!+,%-:;d6-#'&

7>* ,%-:;d6-#' 0', #(%*(0+ 0*U0 04 #(%#5'0* #0d+ '( *U5*3<0_R"40'0#4(E [+#(, :;; =4" 5'(X"30>*3&+0=$#L*&0>*&0*U0&'+&=4"&+**&X#0E&64Z*S*3`&0>*3*&#+&(40&'&<3*%*X#(*%&0',&X43&<"$$R"40*+E

FV

Page 59: Design And Build A Website
Page 60: Design And Build A Website

!%

6789&;O'(

A<*3<#*B

8"5> $#D* ' %#S#%*3` 0>* 18(3 0', #+ "+*% #( 54(e"(50#4( Z#0> :;; 04 X"30>*3 +0=$#L* '(% X43WJ'0&0*U0&a'(%&40>*3&54(0*(0c&Z#0>#(&'(&6789&*$*J*(0E

YH'LO$*

A#"*32e<-3#7='*4"#J3-C$(%f2<-3#7<($*%.J4'-C4*(fg

!"/&0"*12*12(2"'()'C2=*#"2(2!18(32:%(11HI#"*3I&18(3!+18(3&!+"/&

F?

Page 61: Design And Build A Website

g40*&>4Z&0>*&Z43%&]+<'(^&#+&3*(%*3*%&%#XX*3*(0$=&0>'0&0>*&3*+0&4X&0>*&0*U0E

FZ Q 6789

Page 62: Design And Build A Website

!&

6789&9#(*&!3*'>

A<*3<#*B

7>* ,C 6789 0', #+ "+*% X43 $#(* /3*'D+E - $#(* /3*'D /* "+*% X43 0*U0 43 '(= 40>*3 54(0*(0E

YH'LO$*

!8&0"*12*12(32'D($8%'2-<2!,C&2(2%*3'2,C'(;!+8&

7>#+&#+&'(&*U'J<$*&4X'&$#(*&/3*'D

FF

Page 63: Design And Build A Website
Page 64: Design And Build A Website

C

??@@@@

Page 65: Design And Build A Website
Page 66: Design And Build A Website

!'

:;;

:'+5'%#(, ;0=$* ;>**0+ a:;;c '3* "+*% 04 54(034$ 0>* +0=$* '(% <4+#0#4(#(, 4X 6789 *$*J*(0+a<'3',3'<>+` >*'%#(,+` 0'/$*+` *05EcE :;; #+ 53"5#'$ X43 53*'0#(, ' %*5*(0 $44D#(, Z*/ +#0*`Z#0>4"0&:;;&=4"3&6789&Z4"$%&e"+0&/*&'&/$4/&4X&0*U0&'(%&#J',*+E

6*3*&#+&'(&*U'J<$*&4X&:;;E

"/22e:-%-CJ2,%6'f2<-3#71*G'J2/58Dfg

.>*( '<<$#*% 04 ' Z*/ <',*` *S*3= #(+0'(5* 4X 0>* >B 0', Z#$$ /* %#+<$'=*% B@<U #( +#L* '(%#(&0>*&54$43&]/$"*E^

-&:;;&<34<*30=&54(+#+0+&4X&'&+*$*5043&'(%&%*5$'3'0#4(E

7>* <34<*30= #+ Z3'<<*% #( 5"3$= /3'5*+ rs '(% 54(0'#(+ '$$ 4X 0>* X43J'00#(, '%e"+0J*(0+0>'0&Z#$$&'XX*50&6789&*$*J*(0+&0>'0&J'05>&0>*&+*$*5043E

7>*&+*$*5043&#+&0>*&*$*J*(0&0>'0&Z*&Z#+>&04&5"+04J#L*E7>*&%*5$'3'0#4(&3*<3*+*(0+&'&+<*5#X#5&J4%#X#5'0#4(E- %*5$'3'0#4( 54(+#+0+ 4X ' <34<*30= '(% ' S'$"*` +*<'3'0*% /= 54$4(` Z>#$* *(%#(, Z#0> '

+*J#W54$4(E\4" 5'( X"30>*3 54(034$_+*,3*,'0* 6789 *$*J*(0+ /= ,#S#(, 0>*J ' 5$'++ 43 2) '003#/"0*E

FU

Page 67: Design And Build A Website
Page 68: Design And Build A Website

!(

:;;&2($#(*&<+b&2(0*3('$&<+b&YH0*3('$

2($#(*&;0G$*

\4"&5'(&'%%&:;;&04&'(&6789&*$*J*(0&'+&'(&6789&'003#/"0*E

YH'LO$*

!"/21#.%'HI<-3#7=*'4"#J3-C$(%fI&

2(0*3('$&;0G$*&;=**0

Y3&=4"&"+*&' 1#.%' 0',&#(&0>* "'() +*50#4(&4X&=4"3&Z*/&<',*E

YH'LO$*

!1#.%'&

"/2e2<-3#7='*4"#J3-C$(%f2g

!+1#.%'&

YH0*3('$&;0G$*&;=**0

F*(*3'$$=` =4" Z#$$ Z'(0 <$'5* =4"3 :;; #( ' +*<'3'0* X#$*E a:>*5D 4"0 0>* :;; X#$* "+*% X430>#+&<',*Ec

7>*(&=4"&(**%&04&3*X*3*(5*&0>*&*U0*3('$&:;;&X#$*&#(&0>*&>*'%*3&4X&=4"3&6789&<',*E

!"'()&

!%*3;2C'%HI1#.%'1"''#I2#.8'HI#'D#+:11I2"C'<HI1#.%'A:11I&

\V

Page 69: Design And Build A Website

!+"'()&

\] Q :;;

Page 70: Design And Build A Website

!)

:;;&:$'++&<+b&2)

7>* 5$'++ '003#/"0* #+ ,*(*3'$$= "+*% 04 X43J'0 ' +#(,$* 6789 *$*J*(0 a+"5> '+ >*'%#(,+`X43J X#*$%+` *05EcE 8*'(Z>#$*` 0>* 2) '003#/"0* #+ "+*% X43 6789 *$*J*(0+ 0>'0 ,34"<_54(W0'#(&'%%#0#4('$&6789&*$*J*(0+&a%#S#%*3+`&X43J+`&*05cE

\4" 5'( 4($= >'S* 4(* #(+0'(5* 4X ' <'30#5"$'3 2) 4( =4"3 Z*/ <',*E 64Z*S*3` =4" 5'("+*&J"$0#<$*&#(+0'(5*+&4X&'&+<*5#X#5&5$'++E

P43 *U'J<$* =4" 5'( 4($= >'S* 4(* 2) %*+#,('0*% ]+#%*/'3E^ 64Z*S*3` =4" 5'( "+* ' 5$'++5'$$*%&]0#0$*^&'+&J'(=&0#J*+&'+&=4"d%&$#D*E

)4 (40 ,#S* ' 5$'++ 43 2) ' ('J* 0>'0 /*,#(+ Z#0> ' ("J/*3 a0>#+ Z#$$ (40 Z43D X43 J4+0/34Z+*3+cE

\?

Page 71: Design And Build A Website
Page 72: Design And Build A Website

"*

:;;&!4H&84%*$

.*/ <',*+ '3* *++*(0#'$$= ' 54$$*50#4( 4X /4U*+ a%#S#%*3+c 0>'0 '3* "+*% 04 53*'0* 34Z+ '(%54$"J(+E

7>* <4+#0#4( 4X ' %#S#%*3 a43 '(= 40>*3 6789 *$*J*(0c 5'( *#0>*3 /* '/+4$"0* 43 3*$'0#S*04&0>*&<4+#0#4(&4X&40>*3&4/e*50+&4(&0>*&<',*E

7>*3*&0Z4&<3#J'3=&:;;&<34<*30#*+&0>'0&5'(&/*&"+*%&X43&<4+#0#4(#(,1&X$4'0&'(%&J'3,#(E

\F

Page 75: Design And Build A Website
Page 76: Design And Build A Website

"!

:;;&!'5>,34"(%&:4$4"3&d&2L',*+

7>*3* '3* +*S*3'$ :;; <34<*30#*+ a,(:;4C-63)7:-%-C` ,(:;4C-63)7*$(4'` *05Ec0>'0 54(034$ 0>* /'5D,34"(% 54$4"3_#J',* 4X 6789 *$*J*(0+ a#(5$"%#(, 0>* /4%= 4X 0>*Z*/<',*&#0+*$XcE

M*J*J/*3 0>* /4%= #+ '( 6789 *$*J*(0E ;4 #X =4" Z'(0 04 54(034$ 0>* /'5D,34"(%54$4"3&4X&=4"3&Z*/&<',*`&=4"&(**%&04&J4%#X=&0>*&/4%=E

!'5>,34"(%&:4$43

N4++#/$*&e'$"*+

f 03'(+<'3*(0&a%*X'"$0cf #(>*3#0f >*U_3,/&S'$"*_54$4"3&('J*

YH'LO$*

"/2e2,(:;4C-63)7:-%-CJ2hWWWWWWf2g

!'5>,34"(%&2L',*

N4++#/$*&e'$"*+

(4(*&a%*X'"$0c#(>*3#0t[M2_[M9u

\U

Page 77: Design And Build A Website

YH'LO$*

,-).2e2,(:;4C-63)7*$(4'J26C%i'D($8%'Aj84kf2g

!'5>,34"(%&-00'5=L*(0

N4++#/$*&e'$"*+

+534$$&a%*X'"$0c#(>*3#0X#U*%

YH'LO$*

,-).2e2,(:;4C-63)7(##(:"$'3#J2<*D')f2g

!'5>,34"(%&2L',*&J*O*'0&K&7#$#(,

N4++#/$*&e'$"*+

f 3*<*'0&a%*X'"$0&_&0#$*%&_&3*<*'0#(,&0>*&#J',*&>43#L4(0'$$=&'(%&S*30#5'$$=cf #(>*3#0f 3*<*'0WU&a0>*&UW'U#+&_&3*<*'0#(,&0>*&#J',*&>43#L4(0'$$=cf 3*<*'0W=&a0>*&=W'U#+&_&3*<*'0#(,&0>*&#J',*&S*30#5'$$=cf (4W3*<*'0&a'&+#(,$*&#(+0'(5*&4X&0>*&#J',*&_&(40&3*<*'0#(,c

YH'LO$*

,-).2e2,(:;4C-63)7C'8'(#J23-7C'8'(#f2g

MW Q :;;

Page 78: Design And Build A Website

!'5>,34"(%&2L',*&;#^*

N4++#/$*&e'$"*+

$*(,0>&V&Z#%0>a#(&<#U*$+&43&<*35*(0',*+c

54S*3a;*0+ 0>* >*#,>0 '(% Z#%0> 4X 0>* /'5D,34"(% #J',* #( <*35*(0 4X 0>* <'3*(0 *$*J*(0E 7>* X#3+0 S'$"* +*0+ 0>*Z#%0>`&0>*&+*54(%&S'$"*&+*0+&0>*&>*#,>0E&2X&4($=&4(*&S'$"*&#+&,#S*(`&0>*&+*54(%&#+&+*0&04&]'"04^c

54(0'#(a;5'$* 0>* /'5D,34"(% #J',* 04 /* '+ $'3,* '+ <4++#/$* +4 0>'0 0>* /'5D,34"(% '3*' #+ 54J<$*0*$= 54S*3*% /= 0>*/'5D,34"(% #J',*E ;4J* <'30+ 4X 0>* /'5D,34"(% #J',* J'= (40 /* #( S#*Z Z#0>#( 0>* /'5D,34"(% <4+#0#4(#(,'3*'c

9*(,0=&d&.#%0=&;G(0'H

,(:;4C-63)71*G'J2%'34#"l=*)#"f

Q MV

Page 79: Design And Build A Website
Page 80: Design And Build A Website

""

:;;&V[:4$"L(&9'G4"0

YH'LO$*

!"#$%&

!"'()&

M?

Page 81: Design And Build A Website

!#*#%'&/7_-%6$320'$8%(#'!+#*#%'&

!1#.%'&

h=C(88'C2e=*)#"JmWW8Df2$(C4*3J(6#-fg

!+1#.%'&

!+"'()&

!,-).&

!)*F2*)HI=C(88'CI&

!8&,%("E2,%("E2,%("2!+8&

!+)*F&

!+,-).&

!+"#$%&

MZ Q :;;

Page 82: Design And Build A Website

"#

:;;&][:4$"L(&9'G4"0

YH'LO$*

!"#$%&

!"'()&

MF

Page 83: Design And Build A Website

!#*#%'&/7_-%6$320'$8%(#'!+#*#%'&

!1#.%'&

h=C(88'C2e=*)#"JmWW8Df2$(C4*3J(6#-fg

h:-3#'3#2e=*)#"J\VW8Df2<%-(#J%'<#fg

h1*)',(C2e=*)#"J/WW8Df2<%-(#JC*4"#fg

!+1#.%'&

!+"'()&

!,-).&

!)*F2*)HI=C(88'CI&

!)*F2*)HI:-3#'3#I&

!8&,%("E2,%("E2,%("2!+8&

!+)*F&

!)*F2*)HI1*)',(CI&

!8&,%("E2,%("E2,%("!+8&

!+)*F&

!+)*F&

M\ Q :;;

Page 84: Design And Build A Website

!+,-).&

!+"#$%&

Q MM

Page 85: Design And Build A Website
Page 86: Design And Build A Website

"$

:;;&?[:4$"L(&9'G4"0

YH'LO$*

!"#$%&

!"'()&

!#*#%'&/7_-%6$320'$8%(#'!+#*#%'&

MU

Page 87: Design And Build A Website

!1#.%'&

h=C(88'C2e=*)#"JnWW8Df2$(C4*3J(6#-fg

h:-3#'3#2e=*)#"JVWW8Df2<%-(#J%'<#f2$(C4*37%'<#JVW8Dfg

h%'<#,(C2e=*)#"J/VW8Df2<%-(#J%'<#fg

hC*4"#,(C2e=*)#"J/VW8Df2<%-(#JC*4"#fg

!+1#.%'&

!+"'()&

!,-).&

!)*F2*)HI=C(88'CI&

!)*F2*)HI%'<#,(CI&

!8&,%("E2,%("E2,%("!+8&

!+)*F&

!)*F2*)HI:-3#'3#I&

!8&,%("E2,%("E2,%("2!+8&

!+)*F&

!)*F2*)HIC*4"#,(CI&

PW Q :;;

Page 88: Design And Build A Website

!8&,%("E2,%("E2,%("!+8&

!+)*F&

!+)*F&

!+,-).&

!+"#$%&

Q PV

Page 89: Design And Build A Website
Page 90: Design And Build A Website

"%

:;;&!43%*3+

A<*3<#*B

7>* ,-C)'C <34<*30= #+ '( 'J'$,'J'0#4( 4X 0>* ,-C)'C7#-8` ,-C)'C7C*4"#`,-C)'C7,-##-$ '(% ,-C)'C7%'<# :;;&<34<*30#*+E

;G(0'H

a7>*&S'$"*+&<345**%&5$45DZ#+*`&+0'30#(,&X34J&0>*&04<Ec

,-C)'C2e2#-8lC*4"#l,-##-$l%'<#f2g

YH'LO$*

"/2e2,-C)'CJ2/W8D2[W8D2/W8D25W8Df2g

J*$'0*%&N34O*30#*+

f /43%*3W04<f /43%*3W3#,>0f /43%*3W/4004Jf /43%*3W$*X0

P?

Page 91: Design And Build A Website
Page 92: Design And Build A Website

"&

:;;&8'3,#(+

8'3,#(+&'XX*50&0>*&%#+0'(5*&/*0Z**(&6789&4/e*50+&4(&'&<',*E7>* $(C4*3 <34<*30= #+ '( 'J'$,'J'0#4( 4X 0>* $(C4*37#-8` $(C4*37C*4"#`

$(C4*37,-##-$ '(% $(C4*37%'<# :;;&<34<*30#*+E

;G(0'H

a7>*&S'$"*+&<345**%&5$45DZ#+*`&+0'30#(,&X34J&0>*&04<Ec

$(C4*32e2#-8lC*4"#l,-##-$l%'<#f2g

YH'LO$*

"/2e2$(C4*3J2/W8D2[W8D2/W8D25W8Df2g

J*$'0*%&N34O*30#*+

f J'3,#(W04<f J'3,#(W3#,>0f J'3,#(W/4004Jf J'3,#(W$*X0

PF

Page 93: Design And Build A Website
Page 94: Design And Build A Website

"'

:;;&N'%%#(,

A<*3<#*B

Q'%%#(,&'%%+&+<'5*&'34"(%&'(&6789&*$*J*(0&Z#0>4"0&'XX*50#(,&0>*&J'3,#(+E7>* 8())*34 <34<*30= #+ '( 'J'$,'J'0#4( 4X 0>* 8())*347#-8` 8())*347

C*4"#` 8())*347,-##-$ '(% 8())*347%'<# :;;&<34<*30#*+E

;G(0'H

a7>*&S'$"*+&<345**%&5$45DZ#+*`&+0'30#(,&X34J&0>*&04<Ec

8())*342e2#-8lC*4"#l,-##-$l%'<#f2g

YH'LO$*

"/2e28())*34J2/W8D2[W8D2/W8D25W8Df2g

J*$'0*%&N34O*30#*+

f <'%%#(,W04<f <'%%#(,W3#,>0f <'%%#(,W/4004Jf <'%%#(,W$*X0

PM

Page 95: Design And Build A Website
Page 96: Design And Build A Website

"(

:;;&!"$$*0&9#+0+

A<*3<#*B

7>'(D+ 04 :;;` 0>*3* '3* J'(= Z'=+ =4" 5'( X43J'0 ' /"$$*0 $#+0E 6*3*d+ ' R"#5D 4S*3S#*Z 4X+4J*&54JJ4(&X*'0"3*+E

2($#(*&9#+01&.=*(&'&/"$$*0&$#+0&#+(D0&'&/"$$*0&$#+0

[+#(, 0>* )*18%(. <34<*30=` =4" 5'( >'S* '$$ 4X 0>* #0*J+ #( =4"3 /"$$*0 $#+0 %#+<$'=*% 4(4(*&$#(*E

7>#+&#+&*+<*5#'$$=&"+*X"$&#X&Z'(0&04&53*'0*&'&>43#L4(0'$&J*("Eknv

E#($#(*W*U'J<$*&$#&r%#+<$'=1#($#(*msvl

BE $#+0&#0*J@E $#+0&#0*JCE $#+0&#0*J

!1#.%'&

A*3%*3'7'D($8%'2%*2e)*18%(.J*3%*3'fg

!+1#.%'&

!-%&

!%*&%*1#2*#'$!+%*&

!%*&%*1#2*#'$!+%*&

!%*&%*1#2*#'$!+%*&

!+-%&

PU

Page 97: Design And Build A Website

9#+0&;0G$*1&)*5#L'$+f&IOO*35'+*K94B*35'+*&J4L'(&E"L*3'$+f&:#35$*+f&;a"'3*+f&)#+5+&'(%&A0=*3;GL/4$+

[+#(,&0>* %*1#71#.%' <34<*30=`&=4"&5'(&5>'(,*&0>*&$44D&4X&=4"3&/"$$*0&$#+0E

YH'LO$*+

BE $#+0&#0*J@E $#+0&#0*JCE $#+0&#0*J

!-%21#.%'HI%*1#71#.%'7#.8'J21d6(C'fI&

!%"&1d6(C'!+%"&

!%*&%*1#2*#'$!+%*&

!%*&%*1#2*#'$!+%*&

!%*&%*1#2*#'$!+%*&

!+-%&

BE $#+0&#0*J@E $#+0&#0*JCE $#+0&#0*J

!-%21#.%'HI%*1#71#.%'7#.8'J2%-='C7C-$(3fI&

!%"&1d6(C'!+%"&

!%*&%*1#2*#'$!+%*&

!%*&%*1#2*#'$!+%*&

!%*&%*1#2*#'$!+%*&

!+-%&

UW Q :;;

Page 98: Design And Build A Website

N34O*30G&e'$"*+

C+*A$ >$'D!(@#("&'3J*(#'( 03'%#0#4('$&-3J*(#'(&("J/*3#(,5#35$* '&5#35$*5eDW#%*4,3'<>#5 <$'#(&#%*4,3'<>#5&("J/*3+%*5#J'$ '&("J/*3E&7>#+&#+&%*X'"$0&X43&k4$l%*5#J'$W$*'%#(,WL*34 '&("J/*3&Z#0>&$*'%#(,&L*34+&aAB`&A@`&AC`&*05Ec%#+5 '&X#$$*%&5#35$*E&7>#+&#+&%*X'"$0&X43&k"$l,*43,#'( 03'%#0#4('$&F*43,#'(&("J/*3#(,>*/3*Z 03'%#0#4('$&6*/3*Z&("J/*3#(,>#3','(' 03'%#0#4('$&6#3','('&("J/*3#(,>#3','('W#34>' 03'%#0#4('$&6#3','('&#34>'&("J/*3#(,

#(>*3#07>*&S'$"*&4X&0>*&$#+0;0=$*7=<*&<34<*30=&#+&#(>*3#0*%&X34J<'3*(0&*$*J*(0

D'0'D'(' 03'%#0#4('$&b'0'D'('&("J/*3#(,D'0'D'('W#34>' 03'%#0#4('$&b'0'D'('&#34>'&("J/*3#(,$4Z*3W'$<>' $4Z*3W'$<>'&a'`&/`&5`&%`&*`&*05Ec$4Z*3W,3**D $4Z*3W,3**D$4Z*3W$'0#( $4Z*3W$'0#(&a'`&/`&5`&%`&*`&*05Ec$4Z*3W34J'( $4Z*3W34J'(&a#`&##`&###`&#S`&S`&*05Ec(4(* g4&J'3D*3&#+&+>4Z(+R"'3* '&+R"'3*"<<*3W'$<>' "<<*3W'$<>'&a-`&!`&:`&)`&T`&*05Ec"<<*3W$'0#( "<<*3W$'0#(&a-`&!`&:`&)`&T`&*05Ec"<<*3W34J'( "<<*3W34J'(&a2`&22`&222`&2j`&j`&*05Ec

Q UV

Page 99: Design And Build A Website
Page 100: Design And Build A Website

")

:;;&T4(0&.*#,=0

A<*3<#*B

7>* <-3#7='*4"# <34<*30= #+ %*0*3J#(* 0>* Z*#,>0 4X ' X4(0E F*(*3'$$=` ' X4(0 5'( /*(43J'$ 43 /4$%E 64Z*S*3` 0>*3* '3* +4J* X4(0 Z>*3* 0>* S'$"*+ ]/4$%^ 43 ](43J'$^ %4 (40'<<$=E 8*'(Z>#$*` 0>*3* '3* 40>*3 X4(0+ 0>'0 4XX*3 %*,3**+ 4X 0>#5D(*++ aZ*#,>0c` +0'30#(, '0BAA&'(%&J4S#(,&"<&04&OAA&/=&#(53*J*(0+&4X&BAAE

- X4(0 Z*#,>0 4X IAA '(% (43J'$ 5'( /* "+*% #(0*35>'(,*'/$=E ;#J#$'3$=` ' X4(0 Z*#,>0 4XHAA&#+&0>*&+'J*&'+&5'$$#(,&#0&/4$%E

F*(*3'$$=` =4"d$$ 4($= /* #(0*3*+0*% #( >'S#(, ' ](43J'$^ 43 ]/4$%^ X4(0 Z*#,>0E !"0 4(+4J* 455'+#4(+` =4" J'= X#(% =4"3+*$X Z'(0#(, J43* <3*5#+* 54(034$ 4S*3 0>* $44D 4X =4"30*U0E

7>#+&J#,>0&+**J&'&$#00$*&54(X"+#(,`&+4&2d$$&"+*&+4J*&*U'J<$*+&04&#$$"+03'0*E

YH'LO$*+

!821#.%'HI<-3#7='*4"#J/WWfI&/WW!+8&

!821#.%'HI<-3#7='*4"#J\WWfI&\WW!+8&

!821#.%'HI<-3#7='*4"#JmWWfI&mWW!+8&

!821#.%'HI<-3#7='*4"#JnWWfI&nWW!+8&

U?

Page 101: Design And Build A Website

2( /40> 0>* +53**(+>40 '/4S* '(% /*$4Z` '$$ 4X 0>* $#(*+ >'S* 0>* +'J* X4(0W+#L*` /"0 %#XWX*3*(0&X4(0&Z*#,>0+E

UZ Q :;;

Page 102: Design And Build A Website

N4++#/$*&e'$"*+

f BAAf @AAf CAAf IAA&a43&](43J'$^cf GAAf KAAf HAA&a43&]/4$%^cf NAAf OAA

Q UF

Page 103: Design And Build A Website
Page 104: Design And Build A Website

#*

:;;&T4(0&T'L#$G

A<*3<#*B

\4" 5'( 54(034$ 0>* X4(0X'5* "+*% X43 3*(%*3#(, 0*U0 /= "+#(, 0>* <-3#7<($*%. <34<*30=E7>* X4(0WX'J#$= 5'( +"<<430 ' 3'(,* 4X S'$"*+ +*<'3'0*% /= 54JJ'+E != %*X'"$0` ' Z*/

/34Z+*3 Z#$$ '00*J<0 04 3*(%*3 0*U0 "+#(, 0>* X#3+0 X4(0X'5* %*5$'3*% #( ' 3'(,* 4X S'$"*+E 2X0>* Z*/ /34Z+*3 %4*+ 5'( (40 +"<<430 0>* +<*5#X#*% X4(0X'5*` #0 Z#$$ '00*J<0 04 $4'% 0>* (*U0X4(0X'5*&'(%&+4&4(h"(0#$&#0&X#(%+&'&X4(0X'5*&0>'0&#0&5'(&$4'%E

YH'LO$*

,-).282e<-3#7<($*%.JT'-C4*(E20*$'1E2I0*$'12N'=2Q-$(3IE21'C*<fg

;*3#`&<+&;'(+[+*3#`

YD'=` +4 >*3*d+ 0>* %#XX*3*(5* /*0Z**( +*3#X '(% +'(+W+*3#X X4(0X'5*+E ;*3#X X4(0X'5*+ >'S*0>4+*&$#00$*&5"3$=&>44D+&'(%&+0=$#+0#5&X$4"3#+>*+`&+'(+W+*3#X+&$'5D&0>4+*E

UM

Page 105: Design And Build A Website

.*/&;'`*&T4(0+

\4"3 4<*3'0#(, +=+0*J+ a8'5` .#(%4Z+` *05Ec #+ <3*$4'%*% Z#0> ' 54$$*50#4( 4X X4(0+E -(=4(*#+ X3** 04 #(+0'$$ '%%#0#4('$ X4(0+ 4( 0>*#3 54J<"0*3E !"0 Z>*( %*+#,(#(, ' Z*/+#0*` =4" (**%04 D**< #( J#(% 0>'0 =4"3 "+*3+ J'= (40 (*5*++'3#$= >'S* '55*++ 04 0>* +'J* X4(0+ =4" '3*"+#(,E

[+#(, :;;` =4" '3* X3** 04 +<*5#X= '(= X4(0 =4" %*+#3*E !"0 #X =4" +<*5#X= ' X4(0 0>'0 ' Z*/S#+#043 J#,>0 (40 >'S* #(+0'$$*%` =4"d$$ (**% 04 %*X#(* '$0*3('0#S*+ 0>'0 0>*3* /34Z+*3 Z#$$ /*'/$*&04&"+*&#(+0*'%E

7>*3* '3* +4J* X4(0+ 0>'0 '3* <3*W#(+0'$$*% 4( /40> 8'5 '(% .#(%4Z+ Q:+E !"0 0>*3* '3*40>*3&X4(0+&0>'0&'3*&<3*W#(+0'$$*%&4(&4(*&Y;`&/"0&(40&0>*&40>*3E

7>* #%*' #+ 04 +<*5#X= ' 3'(,* 4X X4(0+ 0>'0 '3* +#J#$'3 *(4",> +4 +"/+0#0"0*+ %4 (40 54JW<34J#+*&0>*&#(0*,3#0=&4X&=4"3&Z*/+#0*&%*+#,(E

g40*1 .>*( #( %4"/0` "+* =4" 5'( +<*5#X= '( 4<*3'0#(, +=+0*Jd+ %*X'"$0 +*3#X X4(0 "+#(,0>*&('J*&]+*3#X^&'(%&54(S*3+*$=&'&%*X'"$0&+'(+W+*3#X&5'(&/*&+<*5#X#*%&"+#(,&]+'(+W+*3#XE^

T4(0&;0'5>+6*3*&'3*&+4L*&0GO#5'$&B*/&+'`*&`4(0&+0'5>+b

-3#'$&!$'5D`&-3#'$&!$'5D`&F'%,*0`&+'(+W+*3#X:4J#5&;'(+&8;`&:4J#5&;'(+&8;`&5"3+#S*:4"3#*3&g*Z`&:4"3#*3&g*Z`&:4"3#*3`&J4(4+<'5*F*43,#'`&F*43,#'`&+*3#X2J<'50`&2J<'50`&:>'354'$`&+'(+W+*3#X9"5#%'&:4(+4$*`&84('54`&J4(4+<'5*9"5#%'&;'(+&[(#54%*`&9"5#%'&F3'(%*`&+'(+W+*3#XQ'$'0#(4&9#(40=<*`&!44D&-(0#R"'`&Q'$'0#(4`&+*3#X7'>4J'`&F*(*S'`&+'(+W+*3#X7#J*+&g*Z&M4J'(`&7#J*+`&+*3#X73*/"5>*0&8;`&6*$S*0#5'`&+'(+W+*3#Xj*3%'('`&j*3%'('`&F*(*S'`&+'(+W+*3#X8;&;'(+&;*3#X`&F*(*S'`&+'(+W+*3#X8;&;*3#X`&g*Z&\43D`&+*3#X

UP Q :;;

Page 106: Design And Build A Website

#!

:;;&7*H0&-$#,(

A<*3<#*B

\4" 5'( 54(034$ 0>* '$#,(J*(0_e"+0#X#5'0#4( 4X 0*U0 a'(% 5*30'#( 6789 *$*J*(0+c "+#(, 0>*#'D#7(%*43 <34<*30=E

N4++#/$*&e'$"*+

f $*X0f 3#,>0f 5*(0*3f e"+0#X=f #(>*3#0

UU

Page 107: Design And Build A Website
Page 108: Design And Build A Website

#"

:;;&7*H0&73'(+`43L

A<*3<#*B

[+#(, 0>* #'D#7#C(31<-C$ <34<*30= =4" 5'( 03'(+X43J 0>* 5'+* X43 0*U0 3*,'3%$*++ 4X>4Z #0 Z'+ 43#,#('$$= Z3#00*(E a*E,E 7*U0 Z3#00*( #( $4Z*3 5'+* 5'( /* 03'(+X43J*% #(04 "<<*3W5'+*Ec

N4++#/$*&e'$"*+

f (4(*&a%*X'"$0cf "<<*35'+*f $4Z*35'+*f 5'<#0'$#L*f #(>*3#0

VWV

Page 109: Design And Build A Website
Page 110: Design And Build A Website

##

:;;&7*H0&)*543'0#4(

A<*3<#*B

7>*&0*U0W%*543'0#4(&<34<*30=&#+&"+*%&04&'%%&"(%*3$#(*+`&4S*3$#(*+&'(%&$#(*W0>34",>+&04&0*U0E72Q1 7>#+ <34<*30= #+ *+<*5#'$$= >'(%= X43 *$#J#('0#(, 0>* "(%*3$#(* X34J >=<*3$#(D+ X43

+0=$#+0#5&3*'+4(+E

N4++#/$*&e'$"*+

f #(>*3#0f (4(*f "(%*3$#(*f 4S*3$#(*f $#(*W0>34",>

YH'LO$*

!821#.%'HI#'D#7)':-C(#*-3J63)'C%*3'fI&

0"*128(C(4C(8"2*1263)'C%*3')

!+8&

VW?

Page 111: Design And Build A Website
Page 112: Design And Build A Website

#$

:;;&6GO*3$#(>+

A<*3<#*B

\4"&5'(&+0=$#L*&$#(D+&"+#(,&:;;E( 'XX*50+&'$$&>=<*3$#(D&+0'0*+(J%*3; 'XX*50+&>=<*3$#(D+&0>'0&>'S*&(40&/**(&S#+#0*%&=*0(JF*1*#') 'XX*50+&$#(D+&0>'0&0>*&S#+#043&>'+&'$3*'%=&S#+#0*%(J"-F'C 'XX*50+&$#(D+&Z#0>&0>*&5"3+43&>4S*3+&4S*3&'&$#(D

YH'LO$*

2(&0>#+&*U'J<$*&Z*&Z#$$&*$#J#('0*&0>*&0*U0&"(%*3$#(*&0>'0d+&"+"'$$=&+>4Z&Z#0>&'&$#(DE

(2e#'D#7)':-C(#*-3J23-3'fg

VWF

Page 113: Design And Build A Website
Page 114: Design And Build A Website

#%

:;;&A<*3`$4B

A<*3<#*B

7>* -F'C<%-= <34<*30= #+ "+*% 04 54(034$ Z>'0 >'<<*(+ Z>*( '( 6789 *$*J*(0 a0=<#W5'$$=&'&%#S#%*3c&>'+&54(0*(0&0>'0&*U5**%+&0>*&+<'5*&'S'#$'/$*E

N4++#/$*&e'$"*+

f S#+#/$*f >#%%*(f +534$$f '"04f #(>*3#0

e#+#/$*&YH'LO$*

h,-D2e-F'C<%-=JF*1*,%'fg

VWM

Page 116: Design And Build A Website

;534$$&YH'LO$*

h,-D2e-F'C<%-=J1:C-%%fg

Q VWU

Page 118: Design And Build A Website

I

AA4:1B40)>"4:1B40)>"

Page 119: Design And Build A Website
Page 120: Design And Build A Website

#&

.*/&)*+#,(

A<*3<#*B

F44% %*+#,(` #( ,*(*3'$` #+ J43* 0>'( '*+0>*0#5+E .*/ %*+#,(` #( <'30#5"$'3` 3*R"#3*+ 4(* 0454(+#%*3&0>#(,+&$#D*&"+'/#$#0=_'55*++#/#$#0=&'(%&"+*3&*U<*3#*(5*&a[wcE

P43 *U'J<$*` #( 0>* *'3$= %'=+ 4X 0>* Z*/` 6789 X43J+ Z4"$% 0=<#5'$$= #(5$"%* ' ]+"/J#0^/"004( '+ Z*$$ '+ ' ]5$*'3^ /"004(E :$#5D#(, 0>* ]5$*'3^ /"004( Z4"$% *J<0= '$$ 4X 0>* %'0' '"+*3&>'+&*(0*3*%&#(04&'&X43JE

7>#+&#+&/'%&%*+#,(&'(%&#0&%4*+(d0&J'00*3&Z>'0&0>*&X43J&$44D+&$#D*E.>= Z4"$% '(=4(* Z'(0 04 5$*'3 '( *(0#3* X43Jx :4(+#%*3 '$$ 4X 0>* #(X43J'0#4( ' X43J

0=<#5'$$= 3*R"#3*+i('J*` '%%3*++` *WJ'#$` <>4(* ("J/*3` *05E 64Z $#D*$= #+ #0 0>'0 +4J*4(*Z4"$%&X#$$&4"0&TjTM\&+#(,$*&4(*&4X&0>4+*&X#*$%+&#(5433*50$=x&g40&$#D*$=E

.>'0d+ J43* $#D*$= #+ 0>'0 +4J*4(* Z#$$ '55#%*(0'$$= 5$#5D 0>* ]5$*'3^ /"004( Z>*( 0>*=J*'(0&04&5$#5D&0>*&]+"/J#0^&/"004(&+#(5*&0>*=&'3*&0=<#5'$$=&3#,>0&(*U0&04&*'5>&40>*3n

y"+0 /*5'"+* ' <'30#5"$'3 #%*' 43 <3'50#5* #+ <4<"$'3 %4*+ (40 J*'( #0d+ $4,#5'$ 43 "+*X"$E64Z*S*3` #0d+ (40 "(3*'+4('/$* 04 #J#0'0* 0>#(,+ 0>'0 '3* <4<"$'3E 2( X'50` -99 '30 '(% %*+#,(#+ %*3#S'0#S*m 0>* 03#5D #+ 04 'S4#% J'D#(, '3/#03'3= %*5#+#4(+E !"0` =4" +>4"$% 54(+0'(0$= +53"W0#(#L* =4"3 %*+#,( %*5#+#4(+ '(% 54(+#%*3 0>* #J<'50 #0 Z#$$ >'S* 4( "+*3+h'(% 0>'0 '<<$#*+04&'*+0>*0#5+&'+&Z*$$&'+&"+'/#$#0=E

-X0*3'$$` <3*00= 0>#(,+ '3*(d0 e"+0 (#5* 04 $44D #0h0>*= '$+4 J'D* "+ X**$+ 0>#(,+E !"0 e"+0/*5'"+* +4J*0>#(, #+ <3*00= 04 $44D '0 #0 %4*+(d0 J*'( #0 J'D*+ "+ X**$ Z>'0 0>* %*+#,(*3#(0*(%*%E

F44% %*+#,( (40 4($= J'D* =4"3 +#0* (#5*3 04 $44D '0 '(% *'+#*3 04 "+*` #0 5'( '$+4 /44+0+'$*+ '(% #(53*'+* 3*'%*3+>#< /*5'"+* =4" >'S* <34S#%*% "+*3+ Z#0> ' J43* <$*'+'(0 '(%<34%"50&"+*3&*U<*3#*(5*E

VV?

Page 121: Design And Build A Website
Page 122: Design And Build A Website

#'

7=*&Y$*L*(0+&4`&.*/&)*+#,(

744$7#O

- 044$0#< #+ ' $#00$* <4<"< /"//$* 0>'0d+ 3*S*'$*% Z>*( =4" >4S*3 4S*3 ' $#(DE

84%'$&.#(%4B&K&9#,=0/4H

P43 Z*/<',*+` ' J4%'$ Z#(%4Z #+ ' +53**( 0>'0 '<<*'3+ 4( 04< 4X 0>* J'#( 54(0*(0E -J4%'$ Z#(%4Z ,*(*3'$$= X435*+ 0>* "+*3 04 3*'% ' J*++',* 43 J'D* +4J* D#(% 4X %*5#+#4(/*X43* 0>*= 5'( 3*+"J* "+#(, 0>* Z*/+#0*E -%%#0#4('$$=` J4%'$ Z#(%4Z+ 5'( '$+4 /* "+*%04 %#+<$'= #J',*+` S#%*4` '(% *S*( 40>*3 Z*/<',*+ aS#' #X3'J*cm #( +"5> ' 54(0*U0 J4%'$

VVF

Page 123: Design And Build A Website

Z#(%4Z+ '3* 3*X*33*% 04 '+ ]$#,>0/4U*+E^

!3*'%53"L/+

!3*'%53"J+` '+ #( ]' 03'#$ 4X /3*'%53"J/+^ a'( '$$"+#4( 04 04 0>* 5>#$%3*(d+ X'#3= 0'$*` 6'(+*$'(% F3*0*$cE !3*'%53"J/+ 4XX*3+ "+*3+ ' 0*U0 3*<3*+*(0'0#4( 4X Z>*3* 0>*= '3* $45'0*% Z#0>#(0>* >#*3'35>= 4X 0>* +#0*E

VV\ Q .Y!&)Y;2@E

Page 126: Design And Build A Website

E'</'3&K&E'<#,'0#4(&!'3&K&)34O%4B(&8*("

N',#('0#4(

.>*(*S*3 =4" +** ' Z*/<',* 0>'0 '$$4Z+ =4" 04 /34Z+* 0>34",> ' +*3#*+ 4X 3*+"$0+_$#+0#(,+S#'&<',*&("J/*3&0>#+&X"(50#4('$#0=&#+&3*X*33*%&04&'+&<',#('0#4(E

Q VVU

Page 127: Design And Build A Website

N3#5*&:4LO'3#+4(&:='30

N#(0*3*+*+a"*&Rga"*3G&8'+4(3GS

Q#(0*3*+0 %#%(d0 #(S*(0 0>#+ +0=$* 4X $'=4"0` /"0 0>*= %#% <4<"$'3#L* #0E 2X =4" Z'(0 04 53*'0* 'Z*/+#0* 0>'0 X*'0"3*+ ' ,3#% Z>*3* S'3#4"+ *$*J*(0+ 4X %#XX*3*(0 >*#,>0+ (*'0$= X#0 04,*0>*3`=4"&Z#$$&<34/'/$=&Z'(0&04&"+*&'&y'S';53#<0&<$",#(&/'+*%&4(&ez"*3=&J'+4(3=E

V]W Q .Y!&)Y;2@E

Page 128: Design And Build A Website

#(

:;;&7=*L*+&d&7*LO$'0*+

- ,3*'0 Z'= 04 $*'3( '/4"0 Z*/ %*+#,( #+ 04 J4%#X= ' Z*/+#0* +4 #0 5'( X#0 =4"3 (**%+E M*J*JW/*3` '30 %4*+ (40 *U#+0 #( ' S'5""Jm *S*3=0>#(, #+ %*3#S'0#S*E 2( X'50` J'(= <34X*++#4('$ Z*/%*+#,(*3+ /'+* 0>*#3 Z43D 4( <3*WJ'%* 0*J<$'0*+ 0>'0 0>*= "$0#J'0*$= 5"+04J#L* 04 J**00>*#3&(**%+E

7>*3* '3* 0#J*+ Z>*( =4" (**% 04 53*'0* +4J*0>#(, X34J +53'05>E !"0` J4+0 4X 0>* 0#J*=4"3 (**%+ 5'( /* J**0 /= "+#(, ' <3*WJ'%* 0*J<$'0*E 7>*3* '3* $40+ 4X 0*J<$'0*+ 0>'0 '3*'S'#$'/$* X43 X3**` /"0 0>*= '3* "+"'$$= 4X R"*+0#4('/$* R"'$#0=E 2X =4" '3* Z#$$#(, 04 <'= X43

V]V

Page 129: Design And Build A Website

%*+#,(` ' 0*J<$'0* 5'( 54+0 '(=Z>*3* X34J X#S* /"5D+ "< 04 >"(%3*%+ a'(% *S*( 0>4"+'(%+c4X&%4$$'3+E

- ,44% +#0* 04 ,*0 +0'30*% Z#0> #+ 7>*J*P43*+0` 0>*= 4XX*3 0*J<$'0*+ '(% 0>*J*+ X43 /'+#5Z*/+#0*+&'(%&54(0*(0&J'(',*J*(0&+=+0*J+&a.43%Q3*++`&7"J/$3`&*05EcE

V]] Q .Y!&)Y;2@E

Page 130: Design And Build A Website

G

AA4:1*%0#)">4:1*%0#)">

Page 131: Design And Build A Website
Page 132: Design And Build A Website

#)

.*/&64+0#(,

A<*3<#*B

2X =4" Z'(0 <*4<$* 04 +** =4"3 Z*/+#0*` =4" (**% ' Z*/ +*3S*3 0>'0 #+ 54((*50*% 04 0>* 2(0*3W(*0E \4"3 54"$% "+* =4"3 >4J* 54J<"0*3 '+ ' Z*/ +*3S*3` /"0 J4+0 2(0*3(*0 +*3S#5* <34S#%*3++<*5#X#5'$$= X43/#% 3*+#%*(0#'$ 5"+04J*3+ X34J "+#(, 0>*#3 2(0*3(*0 X43 Z*/ >4+0#(,E .>'0d+J43*` =4"3 54J<"0*3 Z4"$% (**% X43 /* 3"((#(, @I >4"3+ ' %'=` +*S*( %'=+ ' Z**D` (4(W+04<E

P430"('0*$=` X43 ' 54"<$* /"5D+ ' J4(0> 5'( <'= X43 Z*/ >4+0#(, X34J ' Z*/ >4+0#(,<34S#%*3E 7>*3* '3* $#0*3'$$= 0>4"+'(%+ 4X Z*/ >4+0#(, <34S#%*3+ 04 5>44+* X34J Z#0> $40+ 4XX*'0"3*+E !"0 #X =4" '3* e"+0 +0'30#(, 4"0 '$$ =4" (**% #+ +4J*0>#(, 3*'$$= +#J<$* '(% 3*$#'/$*0>'0&5'(&,34Z&04&J**0&=4"3&(**%+E

8= +#0* $*'3(>0J$54%*E54J "+*+ -@ 64+0#(, a>00<1__$*'3(>0J54%*E54J_'@ WW +'S* BHp"+#(, 54"<4( {>0J$54%*{c /*5'"+* 0>*= '3* 5>*'< '(% 3*$#'/$* Z>#$* 4XX*3#(, $40+ 4X X*'0"3*++"5> '+ ;;6 '55*++ a*S*( #X =4" %4(d0 (**% #0 43 *S*( >'S* '(= #%*' Z>'0 0>'0 J*'(+` 4(* %'==4"&J#,>0&(**%&#0&'(%&J4+0&Z*/&>4+0#(,&<34S#%*3+&%4&(40&4XX*3&0>#+&X*'0"3*cE

@*00#(,&;0'30*%

7>#+ #+ ' R"#5D 4S*3S#*Z 4X >4Z 04 53*'0* ' Z*/ >4+0#(, '554"(0E 7>* +#,("< <345*++ Z#$$S'3=&X43&S'3#4"+&<34S#%*3+`&/"0&0>#+&4S*3S#*Z&+>4"$%&,#S*&=4"&'(&#%*'&4X&Z>'0&04&*U<*50E

g40*1 )4(d0 /* 'X3'#% 04 '+D R"*+0#4(+ 4X =4"3 Z*/ >4+0#(, <34S#%*3` #0d+ =4"3 J4(*= +4J'D*&+"3*&0>*=&*'3(&#0E

V]F

Page 133: Design And Build A Website

;0*O&V&c&e#+#0 -]&64+0#(, R=00O1KK$*'3(=0L$54%*b54LK']S

;0*O&]&c&:=44+*&C4"3&)4L'#(&E'L*

V]\ Q .Y!&6A;72E@

Page 134: Design And Build A Website

\4" 5'( "+* ' %4J'#( ('J* a*,E =4"3Z*/+#0*E54Jc 0>'0 =4" '$3*'%= 4Z( 43 =4" 5'( 53*'0*'&(*Z&4(*E&M*,'3%$*++`&=4"&5'(&'$Z'=+&'%%_3*,#+0*3&'%%#0#4('$&%4J'#(&('J*+&$'0*3E

;0*O&?&c&:=44+*&C4"3&AO0#4(+

h'0 0>* /4004J 4X 0>* <',*` =4" Z#$$ +** ' +*50#4( '+D#(, =4" 04 5>44+* 0>* +4X0Z'3* =4"Z4"$%&$#D*&04&'"04W#(+0'$$h#0&5'(&/*&.43%Q3*++&43&'(=&4X&0>*&40>*3&4<0#4(+&#(&0>*&$#+0E

Q V]M

Page 135: Design And Build A Website

)4(*

Y(5* =4" 54J<$*0* 0>* 5>*5D 4"0` =4"d$$ 3*5*#S* ' Z*$54J* <'5D',* S#' *WJ'#$ Z#0> '%%#0#4(W'$&%*0'#$+&54(5*3(#(,&=4"3&'554"(0&'(%&$4,#(&%*0'#$+E

V]P Q .Y!&6A;72E@

Page 136: Design And Build A Website

$*

64B&74&IO$4'%&-&.*/&;#0*&I+#(,&T7N

2( 43%*3 04 "<$4'% =4"3 Z*/<',* 04 0>* 2(0*3(*0 =4" (**% ' Z*/ >4+0#(, <34S#%*3 +"5> '+ -@64+0#(, WW >00<1__$*'3(>0J$54%*E54J_'@E a- Z*/ >4+0#(, <34S#%*3 #+ ' 54J<'(= 0>'0 3*(0+4"0&0>*&"+*&4X&0>*#3&2(0*3(*0W54((*50*%&+*3S*3+Ec

\4"d$$ '$+4 (**% '( P7Q 5$#*(0 a:=/*3%"5D a>00<1__5=/*3%"5DE5>c` P*05>` *05Ec -( P7Q5$#*(0 #+ +4X0Z'3* 0>'0 54((*50+ 04 '( P7Q +*3S*3E P7Q +0'(%+ X43 X#$* 03'(+X*3 <340454$` #0d+4($= <"3<4+* #+ 04 X'5#$#0'0* 0>* 03'(+X*3 4X 54J<"0*3 X#$*+ X34J 4(* 54J<"0*3 04 '(40>*3`Z>*3*'+ ' Z*/ /34Z+*3 #+ '( >00< 5$#*(0 aZ*/ /34Z+*3c 0>'0 5'( 4($= %#+<$'= X#$*+ #( 0>* X43J4X&'&Z*/&<',*E

M*J*J/*3` +*3S*3+ '3* e"+0 54J<"0*3+ aJ"5> $#D* =4"3 8'5 43 Q:cE -(% *S*3= +#(,$* Z*/<',* 4( 0>* 2(0*3(*0 #+ e"+0 ' 54$$*50#4( 4X X#$*+ +043*% #( ' X4$%*3 4( +4J* 54J<"0*3E ;*3S*3++#J<$* X'5#$#0'0* 0>* %*$#S*3= 4X 0>*+* X#$*+ X34J 4(* 54J<"0*3 04 '(40>*3h#( 0>* <34<*3 54(W0*U0E

.>*( =4" "+* ' Z*/ /34Z+*3 '(% 54((*50 04 ' +*3S*3` =4" '3* S#*Z#(, ' <'30#5"$'3 X#$* #(0>* $#J#0*% 54(0*U0 4X ' Z*/ /34Z+*3E ;#J#$'3$=` Z>*( =4" 54((*50 04 ' +*3S*3 "+#(, '( P7Q5$#*(0` =4" '3* S#*Z#(, 0>4+* +'J* X#$*+ #( '(40>*3 54(0*U0h' 54(0*U0 0>'0 '$$4Z+ X#$*+ '(%X4$%*3+&04&/*&53*'0*%`&%*$*0*%&43&J4%#X#*%E

2X =4" '3* +0#$$ "(5$*'3` 54(0#("* Z#0> 0>* 3*+0 4X 0>#+ 0"043#'$ '(% >4<*X"$$= 0>#(,+ Z#$$/*54J*&5$*'3&4(5*&=4"&+0'30&%4#(,&0>#(,+E

7"043#'$

Y<*(&=4"3&P7Q&5$#*(0ET(0*3 0>* +*3S*3_>4+0 '%%3*++ '(% 53*%*(0#'$+ a"+*3 '(% <'++Z43%c #( 0>* '<<34<3#'0*

X#*$%+E

V]U

Page 137: Design And Build A Website

2X&=4"&'3*&+"55*++X"$&=4"&+>4"$%&+**&'&X4$%*3&%#3*5043=&0>'0&$44D+&+4J*0>#(,&$#D*&0>#+h

V?W Q .Y!&6A;72E@

Page 138: Design And Build A Website

2( 43%*3 04 J'D* =4"3 Z*/ <',*+ S#*Z'/$* 4( 0>* Z*/` =4" (**% 04 "<$4'% =4"3 6789X#$*+&4(&04&=4"3&Z*/&+*3S*3`&/"0&Z*&(**%&04&J'D*&+"3*&0>*=&'3*&+*(0&04&0>*&3#,>0&%#3*5043=E

[+"'$$=` =4"3 X#$*+ Z#$$ 3*+#%* #( ' X4$%*3 5'$$*% ]<"/$#5|>0J$^ 43 ]ZZZ^` /"0 =4"3 Z*/>4+0 J#,>0 >'S* 0>*#3 +*3S*3 54(X#,"3*% %#XX*3*(0$=E a:>*5D 0>* ](*Z 5"+04J*3 %*0'#$+^ *WJ'#$X34J&=4"3&>4+0#(,&<34S#%*3&04&X#(%&4"0&Z>*3*&=4"d3*&+"<<4+*%&04&+043*&=4"3&X#$*+Ec

g40*1 2X =4" +** /40> ' ]<"/$#5|>0J$^ X4$%*3 '(% ' ]ZZZ^ X4$%*3` 0>* /40> ,4 0>* +'J*<$'5*E a7>* ]ZZZ^ #+ "+"'$$= '( '$#'+ <4#(0#(, 04 =4"3 <"/$#5|>0J$ %#3*5043=hJ"5> $#D* ' X#$*+>4305"0 4( =4"3 8'5 43 Q:E 2 >'S* (4 #%*' Z>= >4+0#(, <34S#%*3+ %4 0>#+` /"0 0>*3* =4" ,4Ec

Y(5*&=4"&>'S*&"<$4'%*%&=4"3&X#$*+&0>*=&+>4"$%&/*&S#*Z'/$*&S#'&=4"3&Z*/&+#0*&'%%3*++E

YH'LO$*&_V

9*0d+&+'=&=4"&3*,#+0*3*%&'&%4J'#(&5'$$*%&]'Z*+4J*E54J^2X =4" "<$4'% ' X#$* 5'$$*% <',*E>0J$ #0 Z#$$ /* '55*++#/$* 4( 0>* Z*/ '0

>00<1__'Z*+4J*E54J_<',*E>0J$

Q V?V

Page 139: Design And Build A Website

YH'LO$*&_]

9*0d+&+'=&=4"&53*'0*%&'&X4$%*3&#(&=4"3&]<"/$#5|>0J$^&%#3*5043=&5'$$*%&]+0"XX^2X =4" "<$4'% =4"3 ]<',*E>0J$^ 04 0>* ]+0"XX^ X4$%*3 0>'0 Z*/ <',* Z4"$% /* '55*++#/$* 4(

0>*&Z*/&'0&>00<1__'Z*+4J*E54J_+0"XX_<',*E>0J$

V?] Q .Y!&6A;72E@