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

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

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

>eturn to etscape.edu8)+ansas 5tate ?niversity'(a) &)ul' &hr' Please send !o""ents to 'a $re. -e will now download this file and place it on your disk.ksu.orter &li'#illary $ambert &li'Your Name &)ul' &hr' &h9'(urrent .E CA5E/0L NOT TO DOWNLOAD AN<TH2N= THAT 2+ ON A PA=E W2TH A COP<52=HT MA53. PA=E+ O0T THE5E THAT HAVE /5EE . *. 5pecify the name that you want to save the file as and also specify to save to A drive.!o"8)we "aster9"&!o"#uter.. Aet on etscape and go to the Internet.u"!#. 5EMEM.78$tt#:((www.AC3=5O0ND+ AND 2MA=E+ /O5 <O0 TO DOWNLOAD. 3. -hen finished viewing.E54 O.edu)courses)fall*CCD)"A AT)"A AT.1su.BB #ome .ark'(a) &li'(arnegie "ellon ?niversity &li'"IT &li''a $re. minimi.>#g .edu8)?niversity of "aryland at (ollege .u"d.age% http%))www. 9.e etscape and return to your document in otepad.78$tt#:((www. 5mith /ellowship . <O0 M0+T . (lick your right mouse button. 0se t$e na"e #ur#le. THE5E A5E +EVE5AL WE.articipants in the 6ohn !.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.rogram&)h9' &ul' &li''a $re. Aoto the "anagment .78"ailto:we "aster9"&!o"#uter.BBA) You will see that the background color on this page is purple. 5elect the 5ave <ackground As option .&li'#ugh .+E5VE ALL COP<52=HT LAW+. (lick t$e 5ELOAD utton to see the results of your work. Lesson #:: Download a . The color is actually being retrieved from a file.!o"'(a) &)body' &)html' 5ave your work once again.

located in "anhattan.&)a'&) p' &hr' &h9'"y (omputer@s "anhattan 5taff&)h9' &ul' &li'6ane 5mith &li'6ohn :avis . researchers at both the graduate student and faculty)research associate levels can compete for grants of up to 7*21. In addition. including &a hrefFGhttp%))www. +ansas. -e will download an image from this site.comG'smithfellow4mycomputer. training sessions are available for various software packages. 5mith /ellowship program. -hen finished. &html' &head' &title'"y (omputer (ompany&)title' &)head' & od& a!1ground78#ur#le. return to otepad.com. please call *-011-222-*032 or send e-mail to &a hrefFGmailto%smithfellow4mycomputer. speciali.comG'-ord.a!1ground Color and old to &our Page.E5 TO O. http%))www.geocities.comG'"icrosoft &)a'!xcel and &a hrefFGhttp%))www. right clicking with your mouse.&)a'&)p' &p'' )"y (omputer (ompany'( ) also has an ongoing partnership in the 5oftware !ngineering field at several universities around the country.>#g8) &h*''!enter)"y (omputer (ompany&)h*''(!enter) &p'' )"y (omputer (ompany'( ). /or more information regarding the 5mith /ellowship program.com.comG'info4mycomputer.htm :ownload the gas !an or any other image that you want to your disk. please call *-011222-*032 or e-mail to &a hrefFGmailto%info4mycomputer. Add the html codes indicated in old.wordperfect.+E5VE ALL COP<52=HT LAW+.&)a' /or more information. You also download images the same way. Through our &a hrefFGfellow. 8ne of the best places to get free images to download is a site called 8Wel!o"e to t$e =ra#$i! +tation8.htmG'6ohn !.es in software sales and support. and choosing save image as.)icon*9. DO NOT DOWNLOAD AND 0+E COP<52=HTED MATE52AL.microsoft. Lesson #?: Adding a .com)5iliconEalley)BB1. 5EMEM. by pointing to the picture.111 to be used toward advances in 5oftware !ngineering.-e also want to download an image. 5ave the file as gas.erfect.gi.

close out your document in otepad and open a new otepad document.com&)a'.lease send comments to &a hrefFGmailto%webmaster4mycomputer.umd.8). minimi. 5mith /ellowship . All 5ig$ts 5eser.hiladelphia.&)b' "y territory includes .orter &li'#illary $ambert &li'Your Name &)ul' &hr' &h9'(urrent .(.comG'youremail4mycomputer.rogram&)h9' &ul' &li'&a hrefFGhttp%))www.ark&)a' &li'(arnegie "ellon ?niversity &li'"IT &li'&a hrefFGhttp%))www.eduG'+ansas 5tate ?niversity&)a' &)ul' &hr' 'i"g sr!78gas.eduG'?niversity of "aryland at (ollege .** or e-mail me at &a hrefFGmailto%youremail4mycomputer.. (lick t$e 5ELOAD utton to see the results of your work.gi.articipants in the 6ohn !.ksu. !nter the #T"$ code in the exact form as you see printed below% &html' &head' &title'Your Name .com&)a' '$r) '!enter)Co#&rig$t @#1AB 1BBC M& Co"#uter Co"#an&4 2n!.ed'(!enter) &)body' &)html' 5ave your work once again. and >ichmond.comG'webmaster4mycomputer.&)p' . Lesson #A: Creating an E"#lo&ee Ho"e#age -e will next create an employee homepage.&li'#ugh . "y (omputer (ompany&)h9'&)center' &hr' &p'I am a regional sales manager for &b'"y (omputer (ompany. <altimore. -hen finished viewing. "ake sure word wrap is turned on.e etscape and return to your document in otepad.umcp. /irst. please contact me at *-011-222-*032 ext . -ashington :. 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. >eturn to etscape."y (omputer (ompany&)title' &)head' &body'&center'&h*'Your Name&)h*' &h9'5ales "anager.

5elect /ile.htmG'>eturn to "y (omputer (ompany. open up etscape.sgi. :ouble click in the /ile name text box and save the file as e"#lo&ee.si.(. 5elect the 8pen option and you should be able to see the results of your work. 5witch to A drive and you should be able to see the file you =ust created displayed. Lesson #C: Creating a Ta le -e will next create a table for our employee homepage.hiladelphia. (lick 8k To view the results of your work..age&)a'&)center' &center'(opyright HI*BC *CCD "y (omputer (ompany. .edu)potatoeG'"r.e etscape and reopen your document in otepad. (hoose the 5ave 8ption 9. #ome .&)b' "y territory includes . 5elect the /ile "enu.$t" 3. -ashington :. "y (omputer (ompany&)h9'&)center' &hr' &p'I am a regional sales manager for &b'"y (omputer (ompany. Inc..govG'The -hite #ouse&)a' &li'&a hrefFGhttp%)) winnie.buffalo."y (omputer (ompany&)title' &)head' &body'&center'&h*'Your Name&)h*' &h9'5ales "anager.com)sgistart. All >ights >eserved&)center' &)body' &)html' To save your #T"l file *. !nter the #T"$ code indicated in old. If you reside in one of these areas and . <altimore. Inc. 5elect :rives and change the drive to A . and >ichmond.acsu. &html' &head' &title'Your Name .otatoe #ead&)a' &li'&a hrefFGhttp%))www. 8ur table will be centered in the middle of our page and it will have a black border. 5elect the 8pen /ile in <rowser option.&h9'5ome Interesting 5ites&)h9' &ul' &li'&a hrefFGhttp%))www. "inimi.whitehouse.htmG'The 5mithsonian&)a' &)ul' &hr' &center'&a hrefFGcomputer. Test t$e 5eturn to Ho"e Page $&#erteDt to "a1e sure t$at it wor1s.

buffalo. Inc. . This completes the #T"$ -eb . Inc.htmG'>eturn to "y (omputer (ompany.com)sgistart.age Tutorial.ig 1% Con.** or e-mail me at &a hrefFGmailto%youremail4mycomputer.edu)potatoeG'"r.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).htmG'The 5mithsonian&)a' &)ul' &hr' '!enter)'Ta le .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.age&)a'&)center' &center'(opyright HI*BC *CCD "y (omputer (ompany.otatoe #ead&)a' &li'&a hrefFGhttp%))www. All >ights >eserved&)center' &)body' &)html' 5ave your work once again. Aood luckKKK .govG'The -hite #ouse&)a' &li'&a hrefFGhttp%)) winnie. please contact me at *-011-222-*032 ext .com&)a'.whitehouse. (lick t$e 5ELOAD utton to see the results of your work.sgi.would be interested in one of our software purchase and support plans or one of our training programs. The only thing that is left is for you to create your own home page and publish it on the Intranet.si.order .order!olor 8#EEEEEE) '!a#tion)' )+ele!ted .&)pHg tJ &h9'5ome Interesting 5ites&)h9' &ul' &li'&a hrefFGhttp%))www.comG'youremail4mycomputer.acsu. #ome . >eturn to etscape.