HTML Tutorial

The purpose of this tutorial is to give you a basic, hands-on exercise in creating a simple web page. This will give you an exposure to a wide variety of commands. You first need to open up some type of text editor, such as NOTEPAD. After you hav entered your editor, make sure word wrap is turned on. In otepad, it can be found in the !dit "enu.

Lesson #1: Creating and Viewing a We Page

!nter the #T"$ code in the exact form as you see printed below% &html' &head' &title'"y (omputer (ompany&)title' &)head' &body' &h*'"y (omputer (ompany&)h*' &p'"y (omputer (ompany, located in "anhattan, +ansas, speciali,es in software sales and support. In addition, training sessions are available for various software packages, including "icrosoft !xcel and -ord.erfect. /or more information, please call *-011-222-*032 or e-mail to info4mycomputer.com.&)p' &p'"y (omputer (ompany also has an ongoing partnership in the 5oftware !ngineering field at several universities around the country. Through our 6ohn !. 5mith /ellowship program, researchers at both the graduate student and faculty)research associate levels can compete for grants of up to 7*21,111 to be used toward advances in 5oftware !ngineering. /or more information regarding the 5mith /ellowship program, please call *-011-222-*032 or send e-mail to smithfellow4mycomputer.com.&)p' &)body' &)html' To save your #T"l file *. 5elect /ile, (hoose the 5ave 8ption 9. 5elect :rives and change the drive to A ;. :ouble click in the /ile name text box and save the file as !o"#uter.$t" 3. (lick 8k To view the results of your work, open up etscape. 5elect the /ile "enu. 5elect the 8pen /ile in <rowser option. 5witch to A drive and you should be able to see the file you =ust created

displayed. 5elect the 8pen option and you should be able to see the results of your work. -hen you are done viewing your page, minimi,e etscape and return to your document in otepad.

Lesson #%: Adding Lists to &our We Page

-e will next add hard returns and an unordered list to your page. .lace your cursor after the '(#) in the second paragraph and add the #T"$ commands that are indicated in old. &html' &head' &title'"y (omputer (ompany&)title' &)head' &body' &h*'"y (omputer (ompany&)h*' &p'"y (omputer (ompany, located in "anhattan, +ansas, speciali,es in software sales and support. In addition, training sessions are available for various software packages, including "icrosoft !xcel and -ord.erfect. /or more information, please call *-011-222-*032 or e-mail to info4mycomputer.com.&)p' &p'"y (omputer (ompany also has an ongoing partnership in the 5oftware !ngineering field at several universities around the country. Through our 6ohn !. 5mith /ellowship program, researchers at both the graduate student and faculty)research associate levels can compete for grants of up to 7*21,111 to be used toward advances in 5oftware !ngineering. /or more information regarding the 5mith /ellowship program, please call *-011-222-*032 or send e-mail to smithfellow4mycomputer.com.&)p' '$r) '$%)M& Co"#uter*s Man$attan +ta,,'($%) 'ul) 'li)-ane +"it$ 'li)-o$n Da.is 'li)Hug$ Porter 'li)Hillar& La" ert 'li)Your Name '(ul) '$r) '$%)Current Parti!i#ants in t$e -o$n E. +"it$ /ellows$i# Progra"'($%) 'ul) 'li)0ni.ersit& o, Mar&land at College Par1 'li)Carnegie Mellon 0ni.ersit& 'li)M2T

'li)3ansas +tate 0ni.ersit& '(ul) '$r) &)body' &)html' 5ave your work once again. >eturn to etscape. T$is ti"e4 !li!1 t$e 5ELOAD utton to see the results of your work. -hen finished viewing, minimi,e etscape and return to your document in otepad.

Lesson #6: Adding Lin1s to &our We Page

$inks to your web page can be in the form of a local file, a ?>$ at a remote location, or a mailto reference that will allow someone to e-mail you directly from your web page. Add the html codes indicated in old. &html' &head' &title'"y (omputer (ompany&)title' &)head' &body' &h*'"y (omputer (ompany&)h*' &p'"y (omputer (ompany, located in "anhattan, +ansas, speciali,es in software sales and support. In addition, training sessions are available for various software packages, including 'a $re,78$tt#:((www."i!roso,t.!o"8)"icrosoft '(a)!xcel and 'a $re,78$tt#:((www.word#er,e!t.!o"8)-ord.erfect.'(a) /or more information, please call *011-222-*032 or e-mail to 'a $re,78"ailto:in,o9"&!o"#uter.!o"8)info4mycomputer.com.'(a)&)p ' &p'"y (omputer (ompany also has an ongoing partnership in the 5oftware !ngineering field at several universities around the country. Through our 'a $re,78,ellow.$t"8)6ohn !. 5mith /ellowship '(a )program, researchers at both the graduate student and faculty)research associate levels can compete for grants of up to 7*21,111 to be used toward advances in 5oftware !ngineering. /or more information regarding the 5mith /ellowship program, please call *-011222-*032 or send e-mail to 'a $re,78"ailto:s"it$,ellow9"&!o"#uter.!o"8)smithfellow4mycomputer.com.'(a )&)p' &hr' &h9'"y (omputer@s "anhattan 5taff&)h9' &ul' &li'6ane 5mith &li'6ohn :avis

&li'#ugh .orter &li'#illary $ambert &li'Your Name &)ul' &hr' &h9'(urrent .articipants in the 6ohn !. 5mith /ellowship .rogram&)h9' &ul' &li''a $re,78$tt#:((www.u"!#.u"d.edu8)?niversity of "aryland at (ollege .ark'(a) &li'(arnegie "ellon ?niversity &li'"IT &li''a $re,78$tt#:((www.1su.edu8)+ansas 5tate ?niversity'(a) &)ul' &hr' Please send !o""ents to 'a $re,78"ailto:we "aster9"&!o"#uter.!o"8)we "aster9"&!o"#uter.!o"'(a) &)body' &)html' 5ave your work once again. >eturn to etscape. (lick t$e 5ELOAD utton to see the results of your work. -hen finished viewing, minimi,e etscape and return to your document in otepad.

Lesson #:: Download a ;a!1ground

8ne of the easiest ways to add a background color to your web page is to download it from an existing web page. <O0 M0+T ;E CA5E/0L NOT TO DOWNLOAD AN<TH2N= THAT 2+ ON A PA=E W2TH A COP<52=HT MA53. THE5E A5E +EVE5AL WE; PA=E+ O0T THE5E THAT HAVE /5EE ;AC3=5O0ND+ AND 2MA=E+ /O5 <O0 TO DOWNLOAD. 5EMEM;E54 O;+E5VE ALL COP<52=HT LAW+. Aet on etscape and go to the Internet. Aoto the "anagment ;BB #ome .age% http%))www.ksu.edu)courses)fall*CCD)"A AT)"A AT;BBA) You will see that the background color on this page is purple. The color is actually being retrieved from a file. -e will now download this file and place it on your disk. *. (lick your right mouse button. 9. 5elect the 5ave <ackground As option ;. 5pecify the name that you want to save the file as and also specify to save to A drive. 3. 0se t$e na"e #ur#le.>#g

-e also want to download an image. You also download images the same way, by pointing to the picture, right clicking with your mouse, and choosing save image as. 8ne of the best places to get free images to download is a site called 8Wel!o"e to t$e =ra#$i! +tation8. -e will download an image from this site. http%))www.geocities.com)5iliconEalley)BB1;)icon*9.htm :ownload the gas !an or any other image that you want to your disk. 5ave the file as gas.gi, -hen finished, return to otepad. 5EMEM;E5 TO O;+E5VE ALL COP<52=HT LAW+. DO NOT DOWNLOAD AND 0+E COP<52=HTED MATE52AL.

Lesson #?: Adding a ;a!1ground Color and old to &our Page.

Add the html codes indicated in old. &html' &head' &title'"y (omputer (ompany&)title' &)head' & od& a!1ground78#ur#le.>#g8) &h*''!enter)"y (omputer (ompany&)h*''(!enter) &p'' )"y (omputer (ompany'( ), located in "anhattan, +ansas, speciali,es in software sales and support. In addition, training sessions are available for various software packages, including &a hrefFGhttp%))www.microsoft.comG'"icrosoft &)a'!xcel and &a hrefFGhttp%))www.wordperfect.comG'-ord.erfect.&)a' /or more information, please call *-011222-*032 or e-mail to &a hrefFGmailto%info4mycomputer.comG'info4mycomputer.com.&)a'&)p' &p'' )"y (omputer (ompany'( ) also has an ongoing partnership in the 5oftware !ngineering field at several universities around the country. Through our &a hrefFGfellow.htmG'6ohn !. 5mith /ellowship program, researchers at both the graduate student and faculty)research associate levels can compete for grants of up to 7*21,111 to be used toward advances in 5oftware !ngineering. /or more information regarding the 5mith /ellowship program, please call *-011-222-*032 or send e-mail to &a hrefFGmailto%smithfellow4mycomputer.comG'smithfellow4mycomputer.com.&)a'&) p' &hr' &h9'"y (omputer@s "anhattan 5taff&)h9' &ul' &li'6ane 5mith &li'6ohn :avis

&li'#ugh .orter &li'#illary $ambert &li'Your Name &)ul' &hr' &h9'(urrent .articipants in the 6ohn !. 5mith /ellowship .rogram&)h9' &ul' &li'&a hrefFGhttp%))www.umcp.umd.eduG'?niversity of "aryland at (ollege .ark&)a' &li'(arnegie "ellon ?niversity &li'"IT &li'&a hrefFGhttp%))www.ksu.eduG'+ansas 5tate ?niversity&)a' &)ul' &hr' 'i"g sr!78gas.gi,8).lease send comments to &a hrefFGmailto%webmaster4mycomputer.comG'webmaster4mycomputer.com&)a' '$r) '!enter)Co#&rig$t @#1AB 1BBC M& Co"#uter Co"#an&4 2n!. All 5ig$ts 5eser.ed'(!enter) &)body' &)html' 5ave your work once again. >eturn to etscape. (lick t$e 5ELOAD utton to see the results of your work. -hen finished viewing, minimi,e etscape and return to your document in otepad.

Lesson #A: Creating an E"#lo&ee Ho"e#age

-e will next create an employee homepage. /irst, close out your document in otepad and open a new otepad document. "ake sure word wrap is turned on. !nter the #T"$ code in the exact form as you see printed below% &html' &head' &title'Your Name - "y (omputer (ompany&)title' &)head' &body'&center'&h*'Your Name&)h*' &h9'5ales "anager, "y (omputer (ompany&)h9'&)center' &hr' &p'I am a regional sales manager for &b'"y (omputer (ompany.&)b' "y territory includes .hiladelphia, <altimore, -ashington :.(., and >ichmond. If you reside in one of these areas and would be interested in one of our software purchase and support plans or one of our training programs, please contact me at *-011-222-*032 ext ;** or e-mail me at &a hrefFGmailto%youremail4mycomputer.comG'youremail4mycomputer.com&)a'.&)p'

&h9'5ome Interesting 5ites&)h9' &ul' &li'&a hrefFGhttp%))www.whitehouse.govG'The -hite #ouse&)a' &li'&a hrefFGhttp%)) winnie.acsu.buffalo.edu)potatoeG'"r. .otatoe #ead&)a' &li'&a hrefFGhttp%))www.si.sgi.com)sgistart.htmG'The 5mithsonian&)a' &)ul' &hr' &center'&a hrefFGcomputer.htmG'>eturn to "y (omputer (ompany, Inc. #ome .age&)a'&)center' &center'(opyright HI*BC *CCD "y (omputer (ompany, Inc. All >ights >eserved&)center' &)body' &)html' To save your #T"l file *. 5elect /ile, (hoose the 5ave 8ption 9. 5elect :rives and change the drive to A ;. :ouble click in the /ile name text box and save the file as e"#lo&ee.$t" 3. (lick 8k To view the results of your work, open up etscape. 5elect the /ile "enu. 5elect the 8pen /ile in <rowser option. 5witch to A drive and you should be able to see the file you =ust created displayed. 5elect the 8pen option and you should be able to see the results of your work. Test t$e 5eturn to Ho"e Page $&#erteDt to "a1e sure t$at it wor1s.

Lesson #C: Creating a Ta le

-e will next create a table for our employee homepage. 8ur table will be centered in the middle of our page and it will have a black border. "inimi,e etscape and reopen your document in otepad. !nter the #T"$ code indicated in old. &html' &head' &title'Your Name - "y (omputer (ompany&)title' &)head' &body'&center'&h*'Your Name&)h*' &h9'5ales "anager, "y (omputer (ompany&)h9'&)center' &hr' &p'I am a regional sales manager for &b'"y (omputer (ompany.&)b' "y territory includes .hiladelphia, <altimore, -ashington :.(., and >ichmond. If you reside in one of these areas and

would be interested in one of our software purchase and support plans or one of our training programs, please contact me at *-011-222-*032 ext ;** or e-mail me at &a hrefFGmailto%youremail4mycomputer.comG'youremail4mycomputer.com&)a'.&)pHg tJ &h9'5ome Interesting 5ites&)h9' &ul' &li'&a hrefFGhttp%))www.whitehouse.govG'The -hite #ouse&)a' &li'&a hrefFGhttp%)) winnie.acsu.buffalo.edu)potatoeG'"r. .otatoe #ead&)a' &li'&a hrefFGhttp%))www.si.sgi.com)sgistart.htmG'The 5mithsonian&)a' &)ul' &hr' '!enter)'Ta le ;order ;order!olor 8#EEEEEE) '!a#tion)' )+ele!ted ;ig 1% Con,eren!e +!$ools'( )'(!a#tion) 'tr)'td)2owa +tate'(td)'td)A"es4 2A'(td)'(tr) 'tr)'td);a&lor'(td)'td)Wa!o4 TF '(td)'(tr) 'tr)'td)Colorado'(td)'td);oulder4 CO'(td)'(tr) 'tr)'td)3ansas'(td)'td)Lawren!e4 3+'(td)'(tr) 'tr)'td)3ansas +tate'(td)'td)Man$attan4 3+'(td)'(tr) 'tr)'td)Ne ras1a'(td)'td)Lin!oln4 NE'(td)'(tr) '(Ta le) '$r) &center'&a hrefFGcomputer.htmG'>eturn to "y (omputer (ompany, Inc. #ome .age&)a'&)center' &center'(opyright HI*BC *CCD "y (omputer (ompany, Inc. All >ights >eserved&)center' &)body' &)html' 5ave your work once again. >eturn to etscape. (lick t$e 5ELOAD utton to see the results of your work. This completes the #T"$ -eb .age Tutorial. The only thing that is left is for you to create your own home page and publish it on the Intranet. Aood luckKKK