Understanding HTML Webpage

STEP 1
1 With the website structure setup that you did previously, we will now start to construct our first page. 2 Select File > New File > New Docu ent . Ensure that you select Page Type with "ayout #none$. This should be the default setting. T!"

% Save as &inde!' , (rea)weaver will put on &.ht)l' auto)atically. *t is the convention to call the ho)epage &inde+'. , -reate a (ivs called &navwrapper', &content.top', &content.)iddle' and &content.botto)'. /e)e)ber that you will be wor0ing in the #body$ #1body$ so you should have #1head$ #body$ "di# id$%na#wrapper%>"&di#> "di# id$'content(top'>"&di#> "di# id$'content( iddle'>"&di#> "di# id$'content(botto '>"&di#> #1body$ #1ht)l$ 2 -reate a -SS rules for all the (*3s. 4ou will set the width of the bo+s to 526 pi+els and set the )argin to auto on right and left. This will centre the content within the browser window. e.g for the content.top (iv 7content.top 8 width9 :26p+; )argin<right9 auto; )argin<left9 auto; = STEP ) a open te+t.part1.t+t fro) download copy and paste into the &content.top' div b apply the correct tags to the te+t. c >se the print out of &understanding ht)l' as a guide for paragraph brea0s and other for)atting. 4ou will be using #h1$ #p$ #strong$#font si?e$ #tt$ #code$ and #i$ tags. @ Tip the #code$ tag is used to tag ht)l code that is not )eant to be visible to the browser. *.e its hu)an readable. As an e+a)ple in this te+t we have & the #strong$ tag is saying to start bold te+t'. Because we donCt want the browser to read #strong$ as a tag we will put a

#code$ tag around it. Dirst re)ove the #$ on either side, then highlight &strong' with )ouse .select For at > St*le > +ode fro) the !enu. 4ou will then get &#code$strong#1code$'. Si)ply add #$ on the outside to get &##code$strong#1code$$'

STEP , +reate +SS -ules .or t/e tags 0ou s/ould create one .or eac/1 E1g put in /1 into t/e selector na e 2or use drop selector31 -epeat .or "p>and "code>

0ou s/ould ai

to /a#e t/is

7navwrapper 8 width9 :26p+; )argin<right9 auto; )argin<left9 auto; = 7content.top 8 width9 :26p+; )argin<right9 auto; )argin<left9 auto; = body 8

)argin<left9 6p+; )argin<top9 6p+; = 7content.)iddle 8 width9 :26p+; )argin<right9 auto; )argin<left9 auto; = 7content.botto) 8 width9 :26p+; )argin<right9 auto; )argin<left9 auto; = h1 8 font<fa)ily9 Arial, elvetica, sans<serif; font<si?e9 2,p+; = h2 8 font<fa)ily9 Arial, elvetica, sans<serif; font<si?e9 1Ep+; = p8 font<fa)ily9 Arial, elvetica, sans<serif; font<si?e9 1,p+; = code 8 font<fa)ily9 Arial, elvetica, sans<serif; font<si?e9 1,p+; = STEP , 1 2 Fpen and copy te+t te+t.part%.t+t fro) download into &content.botto)' As you did in STEP % for)at the te+t with the correct #h2$#p$ tags etc, following the loo0 of the print out. /e)e)ber you will need to use the #code$ tag techniGue where there is hu)an readable T!" tags

STEP 2 1 2 4ou will now create the te+t layout for the &content.)iddle' div Between the opening and closing tag of #div idHIcontent.)iddleI$ and #1div$

#h2$-o))on Tags#1h2$ #table$ #thead$ #tr$#td$#strong$Sy)bol#1strong$#1td$#td$#strong$(efines#1strong$#1td$#1tr$ #1thead$ #tbody$ #tr$#td$##code$ht)l#1code$$#1td$#td$Start of the T!" docu)ent#1td$#1tr$ #tr$#td$##code$head#1code$$#1td$#td$The docu)ent heading#1td$#1tr$ #tr$#td$##code$body#1code$$#1td$#td$The body of the docu)ent#1td$#1tr$

#tr$#td$##code$title#1code$$#1td$#td$The docu)ent title#1td$#1tr$ #tr$#td$##code$div#1code$$#1td$#td$A section in a docu)ent#1td$#1tr$ #tr$#td$##code$span#1code$$#1td$#td$A section in a docu)ent#1td$#1tr$ #tr$#td$##code$h1#1code$$#1td$#td$Te+t heading#1td$#1tr$ #tr$#td$##code$p#1code$$#1td$#td$A paragraph#1td$#1tr$ #tr$#td$##code$style#1code$$#1td$#td$Dor)at of te+t#1td$#1tr$ #tr$#td$##code$i)g#1code$$#1td$#td$An i)age placeholder#1td$#1tr$ #tr$#td$##code$a#1code$$#1td$#td$A hyperlin0#1td$#1tr$ #tr$#td$##code$ifra)e#1code$$#1td$#td$An inline fra)e#1td$#1tr$ #tr$#td$##code$#J<< co))ent <<$#1code$$#1td$#td$A co))ent#1td$#1tr$ #1tbody$ #1table$ % Set Bac0ground color of 7content.)iddle to dar0 grey and te+t to white. Put a 26 pi+el padding all around. We need to change the bo+ width to 516p+ to ta0e account of the e+tra ,6 pi+els it now has.

STEP 5 -SS !EK> We will now co)plete the inde+ page with a )enu 1 2 % Wor0ing in the &navwrapper' div Within the opening and closing tags, create a #ul$#1ul$ Within the opening and closing tags, create #li$ #1li$ tags #li$#a hrefHIinde+.ht)lI$ T!"#1a$#1li$ #li$#a hrefHIhosting.ht)lI$ osting#1a$#1li$ #li$#a hrefHIlearning.css.ht)lI$-SS#1a$#1li$ #li$#a hrefHIdesign.ht)lI$(esign#1a$#1li$ create +SS rules .or 7navwrapper 8 )argin9 6p+; padding9 6p+; te+t<decoration9 none;

= 4na#wrapper ul 5 )argin9 6p+; padding9 6p+; = 4na#wrapper ul li 8 float9 left; )argin9 6p+; padding9 6p+; position9 relative; width9 126p+; list<style<type9 none; font<fa)ily9 3erdana, Leneva, sans<serif;

= 4na#wrapper ul li a 5 width9 126p+; height9 26p+; color9 7666; te+t<decoration9 none; display9 bloc0; te+t<align9 center; 6 4na#wrapper a7/o#er 5 font<weight9bold; bac0ground<color97--MM--; 6 Fne last thing lets put so)e padding in the content.top div. Add 26p+ all around. Add a light grey bac0ground. The bo+ width di)ensions will need to be changed to :16 to ta0e account of the e+tra ,6 pi+els. Add a light grey bac0ground to content.botto) div, 26 pi+els around and change the bo+ width to :16p+. The navwrapper div should have a bo+ width of :26p+ width light grey bac0ground and 26 p+ padding on the top.