ITEC110 HTML Lab Exercise

Part I. Introduction, Getting Started Note 1. This ITEC110 lab will use Dave Raggett's tutorial ( www.w3.org/MarkU /!ui"e# as a resour$e. Use %our browser a&" o e& u the li&k to the o&li&e tutorial above' rea" a&" s$a& through the tutorial i& or"er to er(or) the lab tasks or to a&swer the *uestio&s ose" i& the +te s below. Step 1. se Notepad. ,or this lab %ou will use -.TE/0D to e"it 1TM2 a&" to $reate a web age o& %our /C. +tartu the -.TE/0D a li$atio& a&" have it ru&&i&g while %ou work through the lab. Note !. The !etti&g +tarte" with 1TM2 tutorial $o&tai&s the i&(or)atio& %ou will &ee" to $o) lete /art I o( the 2ab. /art II is to be $o) lete" usi&g the asso$iate" 0"va&$e" 1TM2 tutorial whi$h $a& be li&ke" to (ro) the !etti&g +tarte" Tutorial. To $o) lete this lab3 %ou will &ee" to (i&ish both /arts I a&" II. 4ou $a& get e5tra $re"it b% $o) leti&g the 0""i&g a Tou$h o( +t%le tutorial (o& the use o( st%les sheets#. Step !. "ie# Source. I& the !etti&g +tarte" tutorial i&tro"u$tio& at the aragra h e&title" p.s.3 (ollow the i&stru$tio&s to view the 1TM2 sour$e o( the tutorial age. 1TM2 (1% erTe5t Marku 2a&guage# uses airs o( tags with attributes. -oti$e that the tag airs have a start tag 6T0!7 a&" a& e&" tag 6/T0!7. This is $hara$teristi$ o( all )arku la&guages. +$roll to the to o( the sour$e8s age (i( %ou are &ot alrea"% there# a&" %ou will see 6ht)l7 whi$h is the start tag re rese&ti&g the begi&&i&g o( the 1TM2 "o$u)e&t. -ow s$roll to the botto) a&" %ou8ll (i&" the e&" tag 6/ht)l7. 0s Dave sa%s3 use 9iew +our$e as a wa% to lear& how others have $o"e" i&teresti&g web ages. Step $. Initia%i&e 'our HTML docu(ent and tit%e. Use the te5t below (a(ter this ste #3 highlight3 $o %3 a&" aste the rovi"e" 1TM2 te) late (begi&&i&g at the 61TM27 start tag a&" goi&g through the 6/1TM27 e&" tag# i&to %our -.TE/0D "o$u)e&t. 0s Dave "es$ribes i& +tart with a Title3 )o"i(% the TIT2E tag to s e$i(% the title as :M% (irst 1TM2 "o$u)e&t;. +ave %our "o$u)e&t as a te5t (ile to %our worki&g "ire$tor%. Do this b% sele$ti&g File->Save As a&" the&3 i( &e$essar%3 e&sure %ou $ha&ge the "ire$tor% o( the -.TE/0D a li$atio& to %our worki&g "ire$tor%. That is where %ou wa&t to save the (ile. -e5t3 sele$t Save as Type as "All files" usi&g the "ro "ow& list. T% e i& the (ile &a)e as )t(%%ab.)t( or )t(%%ab.)t(% a&" sele$t Save. The e5te&sio& o( .)t( or .)t(% is i) orta&t (or the s%ste) to re$og&i<e the (ile as a& 1TM2 "o$u)e&t -ow3 $he$k out %our i&itial web age i& %our browser b% "ouble=$li$ki&g o& the (ile &a)e ( )t(%%ab.)t( or )t(%%ab.)t(%# (ro) withi& %our worki&g "ire$tor%. 4our title >M% (irst 1TM2 "o$u)e&t> shoul" be "is la%e" i& %our wi&"ow bor"er but the )ai& se$tio& o( the age will still be bla&k.

<!-make <!-HT !

The comment tags surrounding this sentence and the template below the text invisible when viewing with a browser--> Copy from after this line at the HT ! start T"# and up through the end T"# and paste this code into your $%T&'"( document-->

<HT !> <H&"(> <T)T!&> <*T)T!&> <*H&"(> <+%(,> <*+%(,> <*HT !>

Note $. Ea$h ti)e %ou )o"i(% save out %our web "o$u)e&t3 i& or"er to view the $ha&ges3 %ou will &ee" to use the re(resh i$o& o& the browser i& or"er to reloa" the &ew versio& o( the age. 0s %ou rea" through the tutorial3 %ou will )o"i(% the te) late i& a$$or"a&$e with the lab +te s. 4ou will a"" various 1TM2 $o) o&e&ts (like the TIT2E tag a&" "ata above# to %our 1TM2 "o$u)e&t a&" %ou shoul" a"" ea$h below the last )o"i(i$atio& e&tere". 4our web age will grow lo&ger a&" lo&ger with ea$h &ew a""itio&. Step *. Paragrap)s, Headings, E(p)asis. I& the 0"" hea"i&gs a&" aragra hs a&" 0""i&g a bit o( e) hasis se$tio&s3 (i&" a&" aste the tutorial e5a) les o( hea"i&g3 aragra h3 a&" e) hasis tags i&to the bo"% se$tio& o( %our 1TM2 "o$u)e&t. That is3 aste i& the h1 a&" h? hea"i&g e5a) les3 the two li&es o( aragra h e5a) les3 a&" the e) hasis e5a) le. Step +. Grap)ics and I(ages. -ow3 i& the 0""i&g i&terest to %our ages with i)ages se$tio&3 a"" two i)age tag li&es (without a&" with a& alt tag (or short "es$ri tio&# like those i& the tutorial a&" save %our "o$u)e&t a&" view i& %our browser to see the "i((ere&$e betwee& the). I&stea" o( the i)age tags "eali&g with peter.,pg i& the tutorial3 use the (ollowi&g two i)age tags i&stea". I( &e$essar%3 rune#s.gi- will &ee" to be $o ie" to %our worki&g "ire$tor%@
<img src="rulogo.jpg" width="144" height="45"> <img src="runews.gif" width="144" height="45" alt="RU News">

Note *. 4ou $a& view the se$o&" i)age's short "es$ri tio& b% )ousi&g over the i)age. Tr% it. Step .. H'pertext Lin/s. I& the 0""i&g li&ks to other ages se$tio&3 a"" three si)ilar web li&ks to %our age (a lo$al li&k3 a Aeb li&k3 a& i)age li&k#. I&stea" o( the li&ks i& the tutorial3 use the (ollowi&g@
his a lin! to <a href="lin!s.htm">Useful " #$ $in!s page<%a>. his is a lin! to <a href="http&%%www.w'.org%">(')<%a>. <a href="http&%%www.radford.edu"><img src="rulogo.jpg" alt="Radford Uni*ersit+ (e, -age"><%a>

0s be(ore3 I( &e$essar%3 the %in/s.)t( a&" ru%ogo.,pg (iles &ee" to be $o ie" i&to %our worki&g "ire$tor%. Step 0. Paragrap)s 1gain. The last (ew ste s have $reate" a se&te&$e (about e) hasis#3 two i)ages3 a&" three li&ks right &e5t to ea$h other o& the sa)e li&e whi$h wra s arou&". -ow3 i&sert the aragra h3 6/7 a&" 6//7 tags arou&" ea$h o( these ele)e&ts so that ea$h is o& a se arate li&e. That is3 the se&te&$e3 ea$h i)age3 a&" ea$h h% erte5t li&k shoul" be o& a se arate li&e (ollowi&g the $orre$t use o( the aragra h tags. Step 2. Lists. I& the Three ki&"s o( lists se$tio&3 a"" all (our o( the e5a) les o( lists (e5a$tl% as i& the tutorial# to %our web "o$u)e&t. These are bullete" u&or"ere"3 &u)bere" or"ere"3 "e(i&itio&s3 a&" &este". Step 3. 4our 5eb Page on t)e 5or%d 5ide 5eb. 4ou $a& $reate ages that %our (a)il% a&" (rie&"s $a& view. To see how this works3 $o % %our )t(%%ab.)t( or )t(%%ab.)t(% (ile to %our &etwork "rive3 i&to the pub%ic6)t(% (ol"er. Re&a)e %our (ile to index.)t( or index.)t(%. (0lter&ativel%3 i( %ou alrea"% have a& index.)t( or index.)t(% web age i& this "ire$tor%3 the& &a)e the (ile so)ethi&g else3 e.g.3 ('%abpage.)t(. The age $a& the& be a$$esse" (ro) the Aorl" Ai"e Aeb via the li&k )ttp788###.rad-ord.edu89'ouruserna(e i( it is &a)e" index.)t( or index.)t(%. The s%ste) k&ows to auto)ati$all% look (or i&"e5 (iles as the to level web ages i& the pub%ic6)t(% "ire$tor%. I( %ou &a)e" %our age ('%abpage.)t(3 it $a& be a$$esse" via the li&k )ttp788###.rad-ord.edu89'ouruserna(e8('%abpage.)t(. Step 10. -ow $o&ti&ue with /art II o( the lab $o&$er&i&g 1d:anced HTML. Part II. 1d:anced HTML. Step 11. Line ;rea/s. I& the se$tio& 1ow to (or$e li&e breaks3 aste Dave8s >li&e break> e5a) le i&to %our )t(%%ab.)t( or )t(%%ab.)t(% (ile. 0(ter $o %i&g the li&e break e5a) le i&to the (ile3 the& save a&" $he$k the result to see how the 6BR7 tag o erates. Step 1!. Non<brea/ing Spaces. -ow i& the se$tio& title" 1ow to i&tro"u$e &o&=breaki&g s a$es3 aste the above >&o&=breaki&g s a$es> e5a) le ($o$a $ola# i&to %our ht)llab (ile3 +ave it3 a&" $he$k the result i& %our browser. Step 1$. Specia% C)aracters. ,ollowi&g the tutorial se$tio& 1ow to use e&tities (or s e$ial $hara$ters3 i&sert $o %right3 registere" tra"e)ark3 a&" tra"e)ark s%)bols i&to %our "o$u)e&t3 ea$h o& a se arate li&e. Use li&e breaks to "o this. +ave a&" $he$k results as usual. Step 1*. Lin/ing #it)in Pages. 0$$or"i&g to the i&stru$tio&s i& 2i&ki&g i&to the )i""le o( web ages3 re la$e the (irst hea"i&g i& %our "o$u)e&t (>0&

i) orta&t hea"i&g># with the a ro riate $o"e to tur& it i&to a li&k target. The& at the botto) o( %our "o$u)e&t3 ut a li&k re(ere&$e to it usi&g $o"e si)ilar to that i& the tutorial8s i&stru$tio&s. -ow3 save the (ile a&" $he$k the result. ,ro) the botto) o( %our web age3 %ou shoul" be able to $li$k o& the li&k a&" it shoul" retur& %ou to the to o( %our age3 to the hea"i&g e&title" >0& i) orta&t hea"i&g;. Step 1+. Text and I(ages. -ow (ro) the se$tio& ,lowi&g te5t arou&" i)ages3 use the $o"e (or havi&g te5t (low to the le(t o( a gra hi$3 a&" )o"i(% the i)age tag $o"e (or the se$o&" ru&ews.gi( gra hi$ (the o&e with the alt tag# i& %our ht)llab (ile i& or"er to have te5t to the >le(t>' Use the te5t >This te5t will be (lowe" arou&" the le(t si"e o( the gra hi$> as i& the e5a) le. Step 1.. I(age Maps. /aste the >i)age )a > e5a) le below (si)ilar to that (ro) the tutorial se$tio& Cli$kable regio&s withi& i)ages#3 as is3 i&to %our ht)llab (ile. -oti$e how the i)age geo)etr% is e&tere"3 (irst b% sha e3 the& b% $oor"i&ates. -ow save a&" $he$k results b% $li$ki&g o& the various regio&s to see where it takes %ou.
<p align="center"> <img src="pages.gif" width="'.4" height="/45" alt="site map" usemap="0sitemap" ,order="1"> <map name="sitemap"> <area shape="circle" coords="1.2344345" href=" http&%%www.w'.org%#ar!Up%4uide%5*er*iew.html" alt="4etting 6tarted"> <area shape="circle" coords="4/3171345" href=" http&%%www.w'.org%#ar!Up%4uide%6t+le.html" alt="8 of 6t+le"> <area shape="circle" coords="1.23171345" alt="(e, -age 9esign"> <area shape="circle" coords="'1.317'345" href=" http&%%www.w'.org%#ar!Up%4uide%8d*anced.html" alt="8d*anced " #$"> <%map> <%p>

ouch

Step 10. Tab%es. Cust above the se$tio& e&title" Maki&g %our tables a$$essible3 /aste the table e5a) le that uses the bg$olor attribute ($olori&g tables without st%le sheets# i&to %our ht)llab (ile. Cha&ge the two $olors use" as the ba$kgrou&" $olors to Teal (1e5 is D00E0E0# a&" 0*ua (D00,,,,#. ,or the T0B2E stru$ture3 &oti$e the use o( the T0B2E attributes3 (ollowe" b% row TR3 hea"er T13 a&" $ell TD i&(or)atio&. Step 12. Tab%es 1gain. -ow3 (ollowi&g the tutorial8s i&stru$tio&s o& tables3 a"" a se$o&" table like the o&e Fust a""e" a&" )o"i(% this bor"erless table to a"" bor"er o( si<e 1 a&" to be E0G wi"th o( the web age.

Step 13. I(age =o%%<>:ers. /aste the >rollover> e5a) le s$ri t (ro) the se$tio& Roll=overs a&" other tri$ks (+CRI/T tags a&" ever%thi&g i& betwee&# i&to %our ht)llab (ile i&to the 1E0D se$tio&3 a(ter the title tags3 a&" be(ore the bo"% start tags. The a$tual li&k re(ere&$e (0 tag with 1RE, ortio&# to the rollovers a&" la$e)e&t o( the i)ages shoul" be i&serte" at the ver% botto) o( %our ht)llab (ile3 withi& the B.D4 tag. -oti$e the use o( the c)gI(g (u&$tio& a&" the "e$laratio& o( the eve&ts >onMouse>:er> a&" >onMouse>ut>. Mouseover the i)age to see the roll=over e((e$t. Step !0. Lab Co(p%etion and C)ec/o--. !et %our i&stru$tor to $he$k o(( %our lab $o) letio& b% viewi&g %our (i&al 1TM2 age whi$h shoul" "is la% the e&" result o( all lab ste s.

E?T=1 C=E@IT. ,ollow Dave8s 0""i&g a tou$h o( st%le tutorial a&" the& $reate a st%le sheet with the (ollowi&g ro erties a&" i&sert i&to %our ht)llab (ile usi&g +T42E tags la$e" a(ter the TIT2E tags3 be(ore the +CRI/T tags3 a&" withi& the 1E0D tags@ Bo"% te5t $olor )aroo&3 ba$kgrou&" white Bo"% )argi&s3 le(t a&" right 10G 11 hea"er )argi& le(t =EG 1? hea"er )argi& le(t =HG e) (e) hasis# i& bol" Bo"% (o&t (a)il% 9er"a&a3 sa&s=seri( 11 hea"er (o&t (a)il% !ara)o&"3 Ti)es -ew Ro)a&3 seri( 4ellow ba$kgrou&" u&"er the i)age )a Bor"er arou&" the i)age )a (hi&t@ use &este" tags#.