HTML Chapter 1

8/8/2019 HTML Chapter 1

1/52

HTMLCreqting q Web Sitewith linls

Resumes Unlimiied is o compony ihotspeciolizes in resume wriiing. You wontio odvonce your curreni posilion withinlhe compony by using your recentlygoined experience on ihe lniernet. Youcon envision developing resumes osWeb poges ond ihen moking iheresumes occessible to people oli overihe world. Your cusiomers' resumes willbe online ond instcrnily viewoble osWeb poges.You know you will be oble io con,zinceyour boss, Mork Mullet, thot lhis ideowill o{{er the compcrny Iniernei exposureond morkeiing presence when you hoveihe octuol product to demonsirote Wilhthis in mind, you vrill develop two Webpoges using HTML. The {irst Web pogeconsisis of in{ormolion oboui ResumesUnlimiied, on e-moil hyperlink to thecompony, ond o link 1o o second Webpoge. The second Web poge contoins oclienl resume ond o link io o periinenipoge on the World Wide Web. A{terihese Web poges ore compleied, youcon loke them to Mork for the big sell.

ntroductionAn important feature of the'World'Wide Web is its capability oallowing easy movement from one \7eb page to another inapparent continuity. An exciting aspect of 'Web page developmis the ability to link'Web pages together. In this project, you wlearn how to connect'Web pages using the following types ofhyperlinks, or links.

Links within a'Web pageLinks to another'Web page on the same'Web siteLinks to another'Web siteE-mail linksYou will identify the various links and learn how to use the

and then create a two-page \feb site that uses each type of link.

[ 'io;.., Two - Web ResIn Project 1, you used HTML to create and edit a Web page. Inthis project, you will use HTML to create a new'Web page for'Web Res and its associated links (Figure 2-1.a) and improve theappearance of the Sample Resume \7eb page that consists of thMarie M. Santos resume (Figure 2-1b) to which 'Web Res linksThe two completed Veb pages shown in Figures 2-La and2-1b contain links to take the visitor from one page to the otheThe first page is the'Web Res home page. It displays informatioabout'Web Res and the services it offers. The second page is thSample Resume page. This page contains internal links to allowvisitors to move easily from section to section within the'Webpage. In addition, the Sample Resume page contains both textand image links to an outside'Web site.Using Notepad, you will create the \feb Res page and editthe Sample Resume page. The unedited Sample Resume page isincluded on the HTML Data Disk. Then, using your browser,you will view the pages and follow the links you have created.

*9 r oc3


2/52


3/52

HTMLHTM 2.6 . Proiecl 2 ' Creoling o Web Site wilh Links

T1-lntroduction to LinksMillions of linked 'Web pages make up the 'World Wide \feb. Hyperlinks, or links, -used to connect a Web f"g. to another Web page on the same' or a different,'Webserver located anywhere in the world. Links can be created to allow a visitor to ngate to an atea on the same Web page, to another \7eb page within a'Web site, orIn entirely different'Web site. Links also can be used to create an e-mail link easilVisitors to a Web page can have immediate access to another'Web page or a diffesection of the same Web page by clicking a link. The power of the'Web centers onlinking capabilities.Yo1t.un use either text or an image as a hotspotfor a link. A hotspot is an areof text or an image in which the mouse pointer changes when it is moved over thearea. GenerallS tte mouse pointer changes to a pointing hand when it is moved oa hotsPot. This changenotifies the user that theis a link from that textimage. Additionally, texlinks generally are unde

lined and different in coto indicate their functioFigure 2-2 shows a samof text used as a hotspoand Figure 2-3 shows asample of an image usea hotspot. Moving themouse pointer over thehotspot also displays thURL to which you willmoved on the status bathe browser (Figure 2-3FIGURE 2-2

$*4.,d t?sts* .a

fiql:':s lilt*tatin*!a*n & i!.ar4en,...,r-- '-*---;.:: :.' text link l':'

URL onstatus bar

FIGURE 2.3


4/52

lnlroduclion to links ' HTM2.

$fioreVboarLinking ColorsYou con chonge the link colorsin populor browsers. lnMicrosoft lnternet Explorer,you find color selections onthe View menu using lnternetOptions. ln Netscope Commu-nicotor, on the Edit menu, clickPreferences. ln both products,you chonge colors by clickingthe color bors.

lilfith text links, you always should use descriptive text as the clickable word(s).Avoid using the words, Click here, alone as the linking text because they do not givethe visitor the purpose of the link.Unless otherwise stated in the tag, the color of text links use browser-dependent defaults throughout a \Web page. The format of the tag used to change,ror-"1, visited, and active link colors from the default is


5/52

HIM 2.8 ' Ptoiect 2 ' Creoling o Web Site wilh Linkslinking within q Web Poge

Links within a page allow visitors to move quickly from one section of the'wp"g;;; ;";ther. thisTs especially important in large'web pages. Your visitor caview the sections th^t-^r" of inr.r"r, iithout having to scroll entirely through th\reb page. Deuelop.rs ofr.,, t"" links within a Web page as commands or a tab.."iririi. Vr"ny W"b O"t.r contain a list at the top of th" page that links to othsections within tt. ,r'-Jp"ge, as shown in Figure 2-5. In this proiect, you will;hi, tp" of link to go fror,'.-the top section of the resume to other sections'

Menu Option Links:I rsl ]J:::itt-rlr,:n

Target olThrd Link

torllAboatHTilll HelpMony World Wide Web sitesprovide Help for new HTMLdevelopers. For more intormo-tion obout HTML HelP, visit theHTML More About Poge(www. scsite.co n / hlrr,l/more.htm) ond click HTMLHelp Desk.

FIGURE 2.5

linking to Another web Poge within the ssme web sireThe second type of link connects one web page to another page-within th

Web site. Figure Z-A ,lro*, how these links woik. A visitor clicks a link on thpage of a'Web ,it. lligot. 2-6a),andmoves to another page on the same'Web"Ft-ffi i-etl.\r.b ri;;;;r.."ity use these types of links Lecause a Web site u.-orirlr,, of multiple p"g.i, and visitors need a-way to move from one'Web paganother. In this pr.t.; t;; will create this type of link to move from

the 'Wet o-. p"g. to th; S"-pf! Resume page. You then will have a reverse order linallow the visitor ro l-nou. from the-sample Resume page back to the home pa


6/52

lnlroduclion lo Links ' HIM 2.9

p!fl whoweare Where

r GURE 2-6q

ri"[t" """in"teb pageOsdity Hedih C.r6 Worldwlr6

Lb!i!-!lp!4q h.r!!i!r! 3 d! 1844!.,g:_UL1C tr:,n4 Q urtrq _lqifi 4lf

http: //www. dbbott.com/lesearch/nde , htm

E| A$hqttLSdtodc (Lslly tle.hi Cr WdldYvide

--'Scienca & Technology -:Above all, Abbott is a science compmy More thm 5,000 Abbottscientists aromd lhe world re cornmitted to developtrg new healthcae technologies to irnprove lives Read on to leam more about outapproach io the science ofhealth cae - for today md the future.

; linked ii p"s: _i

Developing breakthrough health cre technologr takes more thm comrnitrnent. It takes lime. Fund:rg. Creatrve drinking To,upport ori .o*t n.nt to advmcmg medrcal science, we devote more thm $ 1 brlhon every yer towad the research anddmlopment olmovahve health cae solutions Here's what we're locusurg on today: h@Usingbothintema1andextema1resowces'ousciendstsrepusuingnewcompoundsm.*.inl th..uorutic ueas, such as immoscience, anti-infectives, newoscience md a5'ing and

FIGURE 2.6b


7/52

HIm 2.10 ' Proiect 2 ' Creoling o Web Site wilh links

FIGURE 2-7o

l,inking to Anolher Web SileA very important feature of the .$reb is the capability of linking one \reb site to

another. 'Web develop;;r-;r. these links ,o .on,t"t't their Web sites to sites elsewherecontaininginformationonthesametopic'Thesametagusedtolinkwithinthesame'Web site is used to fi* io ."i.rr,"t \7et sites. You will i""tt this type of link in thisproject by linking,o it"rrrr*.rsity from which the student on

rhe resume graduated'you will create ,*o tlri"iio,t, of th" link. one will link from text; the other will linkfrom an image of ttr. rnlu.rsity (Figure 2-7a). clicking either the text link or theimage link takes ,fr. uJirot ,o th" P".trd.r. University Yrtb pug" (Figure 2-7b)'

HTMt

FIGURE 2-7b


8/52

lntroduclion lo Links . HTM2linking to E-lhsil

A well-designed 'Web page always provides a way for visitors to contact the 'Webdeveloper. An easy way to do this is by providing an e-mail link somewhere on the'Web site home page. Visitors use this link to contact the company to request addi-tional information. Visitors also can comment on the'Web site or notify the devel-oper of a problem. Figures 2-8a and 2-Bb are examples of an e-mail link.

FIGURE 2.8bIturting Notepod

You will use Notepad as the text editor for the HTML files. Perform the follow-=r sreps to start Notepad.. sTA[rT iiiCI'TEPAD,O Click the Start buton on rhe taskbar and then point to Programs on the Start

Point to Accessories on the Programs submenu and then point to Notepad onthe Accessories submenu.Click Notepad.

a&

FIGURE 2-8o


9/52

HIM 2.12 ' Proiect 2 ' Creoling o Web Site with Links,$,,&@

If necessary, click the Maximize button'Click Edit on the menu bar.If 'WordWrap is not checked' click'WordWrap'

Thfrorrorrpod *in4ow displays (Figwre 2-9) and'Word\Vrap is enabled.

E*fur r."ting a Home PageA home page is the main page of a \reb site. Visitors to a'web site generally.will"j.* ,t "i.-"- e page first. the home page that you develop in this project will havtwo linkst a lini to the second page and an e-mail link'On the ho-. p"g", it is impoitant to identify the purpose.of your'Web site' Yshould state clearly *hut th. \rl.b ,i,. is about and how the visitor can move fromone page on the ,it. to "nother. The links from one web page to another shouldapparenr. It is up to the'web developer to design the-web site in such a -'vay that,r'"irig"tion is clear. It also is standarJ to include an e-mail link on the home pagevisitJrs can e-mail you directly from the initial page'

FIGURE 2.9


10/52

Creoling o Home Poge . HItl 2.1

., ':l'{Jo,o,3)gi0t:Oo

lntering lnitiql HTtll TogsIn Project 1, you entered an initial set of HTML tags. These tags define theoverall structure of a standard \feb page. The following steps show how to enter theinitial HTML tags.

frnrat*r> "nd rh"n press the .*r.* k"y.Type and then press the EvrEn key.Type


11/52

HTMTHTM 2.14 . Proiect 2 . Creoling o Web Site wilh Links

Entering a HecdingAs discussed in Project 1, the tag assigns the largest possible size to a

heading. Recall that the alignment attribute with the tag will center the heading. Using the tag can enhance the heading further. Anytext on a Web page can be altered to attract more attention with the beginning and ending tags. Table 2-2lists the different FONT attributesthat can be used to enhance standard text.

. (honges fie fonl color. lJses color codes. (honges fie fonl lype. lf lhe user does not specifu o fonf, the texl displays inthe defoult font. (honges fte foil size. (hoices ronge from I lo 7, or relulive volues surh os +2

The format that you will use to change the color of the text is with the color number code between the quotation marks. Figure2-11 shows examples of some of these functions and how they affect the text.

(0r0R

stzl

Toble 2-2

FIGURE 2.I I


12/52

(reoling o Home Poge . HTlll 2.To Enter o HeodingClick line 6 betweenlhe ond logs, type < FONTC0L0R:"i1000066")WebRes(/F0NT>ond then prers themrtr key.You olwoys shou/d end theiogs in the opposite direcfionin which you storted lhem.You storfed this /ine with the fog, ond fhen usedihe tog. You endedihem the opposite woy, insei-;ng first ond then second (Figure2-12).This fechnique is simi-y lo moth equofions.

FIGURE 2-I2

treb Ees Hone Pagelreb Bes


13/52

HTMtHIm 2.16 . Proiect 2 ' Creoting o Web Site with Links

l,ll>

line 7

line 11

TITLE>tfeb Res Hone Page/HEAD>BODY>Hl ALIGH="CENTER">t'teb Besp>Eesunes unlinited, the prenier international resune uriting conpan!' has exPanded toiOe fleUf Resunes Uniinitea recentlg has forned a new diuision catled l'leb Bes, which isiIir"i"."rur" uritinq seruice for the Internet. l'leb Res specializes in t'rortd t'lide t'teb

ion "no publishin6. ilake gour resune instantly auailable uorlduide_...put it on thethe l,lorldthere5unetleb ?

paragrtag and

FIGURE 2.I3

In Project 1, you entered a bulleted list on the'!feb page. You did not specifybullet type, so rh; default, disc, was used. On this Web page, you will change thetype of builer used in the list to give the page a more distinctive look. You changetire bullet type by using the TYPE-"name" attribute, where name can be square orcircle. If you want to ,rse the default (circle, or disc), you need not specify it. Thecode to create the bulleted list is provided in Table 2-3.

Entering Bulleted lists

ilt2l3l4t5t6t7l8l920

0ur componyWeb poge resums creslion snd publhhinq0nline dulobose of 1ob listings, for o voriety of tontocl ond full-time posilions

perform the following steps to enter the two bulleted lists that display on the\Web Res home page.

Toble 2'3


14/52

Web Poge lmoges . HTm 2.1

ffio${boatHTtl ColorsColor is on importont ospectof Web development. Visuollyoppeoling Web sites otlroctvisitors. For more informolionobout HTML color, visit theHTML More About poge(www. scsite.co n / hl'r'l/more.htm) ond click HTMLColoring Web Grophics.

To Enter Two Bulleted lists''l) ll necessory, rlick'-J llne ll.' it Enler the HIt[ code\r (Ioble 2.31.' r\ Press the EilrtR key.'.:./The HTML code disp/oys(Figure 2-l 4).

secondbulleted list

TITLE>Neb Ees Hone Paqe/HEAD>BODY>Hl nLIGH="CEHTEB">t'leb Res

0ur conpanyFounded in 1996 by l4ark HuIletHeadquartered in SeattIe, t'lashington2>0ur seruicesI>lreb page resune creation and publishing0nIine-database of job Iistings, for a uariety of contract and fuIl-tine Positions/UL>

/BODY>/HTHL>

FIGURE 2-I4

" eb Page ImagesYou can use images in many ways to enhance the look of a \feb page. Images can beused as backgrounds, horizontal rules, or as pictures or graphics on any'Web page.They make the'Web pages more interesting and colorful. Images can be used to helpclarify a point being made in the text or as links to other'Web pages. They also canbe directional symbols that allow the visitor to navigate through the'Web site.Clqsses of lmoges

The two classes of images for'Web pages are inline and external. lnline imogesare those that display on the'Web page directly, together with the text. Externolimoges are stored separately from the'Web page and are displayed only when ther-isitor clicks a link to display them. The purpose of the'Web page determines whichclass of image you use.lmoge lypes

Three types of files can be used as images: JPEG, GIF, and PNG. In this project,vou will use JPEG files. Joint Photographic Experts Groups (JPEG) files have anixtension of .jpg, .jpe, or .jp.g. A JPEG (pronounced IAY-peg) is a graphic image thatis saved using compression techniques to make it smaller for download on the \ileb.\\zhen you create a JPEG image, you can specify the image quality to reach a balancebetween image quality and file size. JPEG files often are used for photographsbecause they support millions of colors. These generally are more complex images.


15/52

HIIll2.l8 ' Proiecl 2 ' (reoling o Web Site with Links

support PNG images.

you also can use Graphics Interchange Format (GIF) images on a web page.These are files with an e"t.nsio.r of .gif. A graphic image saved as a GIF (pronouncedjiff or giffl also is saved using compression iechniques to make it smaller for down-load on the'web. GIF suppoit, -or. colors and resolutions than JPEG, making it.tp..i"ffy effective fo, sca.t.ted photographs. The technique used to compress GIF -files (called LZ'W compression), ho**.4 is patented, whichrneans companies- mak-ing products that use the GIF format must obtain a license' This does not apply totyii."t 'Web users or businesses that include GIFs in their'Web pages' GIF images.dis-pl"y on. line at a time when loading. lnterloced GIF images load all at once' startingi"ir'fr " blurry look and becoming sharper as they load. This-is a good technique.touse for large images because the.-'web page visitor can see a blurred outline of what isto come as it loads.The third type of image file is Portable Network Graphics (PNG), designatedwith a .png or .ping .*t..,"rion. A patent-free alternative to the GIF, the PNG format,h", b..n d".u.lop.J"nd approved by the \rorld Wide \reb Consortium as an Inter-,r.t g."phi.r rtrndurd. fni pHC (pronounce d ping) format, also is a compressed fileforriat'that supports multiple colors and resolutions. At this time, not all browsers

HTML

If an image is not in one of these formatsyou can use a paint program to convert thei-"g. to a Web image (.gif, .png, or .ipg) format. Many paint programs allow you to savea GIF image as interlaced. A number of painprograms are available in the marketplaceioday. Adobe Photoshop and Corel Draw aretwo popular Paint Programs.lnoge Altributes

Table 2-4lists the attributes that can beused with the tag.You will use three of these attributes inthe tags that you create in this proj-ect. The SRC attribute is used to define theURL that you want to load. The HEIGHTand WIDTH attributes will define the imagesize.

ATIGN

AI.IBORDTRHTIGHT

HSPACE

sRc\,SPATEttrl0TH

$ficstAbor,rrJBotkground lrnogesWhen choosing o bockgroundimoge, do not select one thotoverpowers lhe Web Poge.Assure lhot the bockgroundimoge does not moke lhe texldifficult to reod. The WoridWide Web hos o voriety ofWeb sites with bockgroundimoges. Mony of these requi'eihot you nome the Web site oso source for ihe imoge. Formore informotion obout bock-ground imoges, visit theHTML More About Poge(www.scsite.co m /hlrr,l/more.htm) ond clickBockground lmoges.

o (ontols olignment. [on selecl from boilom, middle, top, left, or right. Alternolive lexl l0 dhploy when on imoge h being looded. Defines lhe border widlh. Defines the height of the imoger lmproves looding lime. Delines the horizonlol spoce lhd seporotes fte image from fie texl. Delines the URL of the imoge lo be looded. Defines lhe verlicol spate thol seporoles ihe image fiom lhe lext. Dcfines the width of the imge. lmproves looding rime

i,nserting BackgfCIufrd and Hcizontal Rule ImagesIn Project 1, you inserted a colored background and a default horizontal rule to givyo.r, YZ.b page more pizzazz.In this proiect, you will use the tag to inserti-"g., to f.".rr.d ur,h. background and horizontal rule. The two image files-thatyou"*ill use are stored on the HTML Data Disk. If you do not have a copy of thei-lfVif- Data Disk, see the inside back cover for instructions for downloading theHTML Data Disk, or see your instructor'lnserting o Bcckground lmuge

Yor'. use the BACKGROUND attribute to insert the background image on the'Webpage. The BACKGROUND attribute defines the source of the image' This statemeni.li, th. browser where ro locare the image you want displayed.

Toble 2-4


16/52

lnserling Bockground ond Horizontol Rule lmoges ' HIm2.l9

To lnserl o Batkground lrnuge

i\ Click imnediotely-il to the right of the Yin the log online 5 to position theinsedion poinlond then press rine 5lhe srtclrm.t) Iype BACKGRoUND:\J "greyback.jpS"

os the ottribule.The HTML code disp/oys(Ftgure 2-15). When dis-ployed, the Web poge bock-ground now hos o grey,lightly textured /ook.

TITLE>tleb Ees Hone Page/ HEAD >

0ur conPanYFounded in 1996 by l'lark Hu1letHeadquartered in SeattIe, Hashington


17/52

HTMTHTIvl2.20 . Proiect 2 . Creoting o Web Site with Links

@ To lnsert u Horizontol Rule lmoge,l) (lickimmediotely\r' to the right of the tog on line 5 ondlhen press the rtrrn key.

I -tine O -i1) Iype TITLE>t'reb Res H0ne Page/HEAD>B0DY BACI{cR0UND="greyback.jpg">ALIGN="CENTEB">Ueb ResEesunes Unlimited,-the prenier international resune uriting conpan!, has expanded to the trortdde lleb! Resunes Untinited recentlg has forned a neu diuision called l,leb Res, uhich is theItinate resume uriting seruice for the Internet. lreb Res specializes in ttorlO UiOe l,reb resunecreation and pubtishing- I'lake your resune instantly auailable t,orlduide....put it on the l,leb!
0ur conpan!Founded in 1996 bg Hark Hullet(LI>Headquartred in SeattIe, tlashington
0ur seruicesUL TvPE="square">LI>tleb page resune creation and publishingLI>0ntine ddtabase of job Iistings, for a uarietg of contract and full-tine positions/uL>

i#asg I


18/52

lnserling Bockground ond Horizontol Rule lmoges ' HTIII 2.21

I To (opy ond Puste TextPosition lhe mousepoinler immediotelyto the lefl of the tog in line 7.

\ ltne /

(TITLE>tleb Ees Hone PageBesunes Unlinited, the prenier international resune uriting conpang, has expanded to the l'lorldide tleb? Resunps Unlinited recentl! has forned a neu diuision called l'leb Res, uhich is theItinate resune uriting seruice for the Internet. lleb Bes specializes in llortd t'lide l'leb resuneeation and pubtishinq. Hake qour resune instantly auailabte uorldwide....put it on the t'leb!
0ur conpanyFounded in 1c96 by Hark I'lulletHeadquartered in Sedttle, ttashington< /UL>0ur seruicestleb page resune creation and publishinq(LI)0nline databdse of job listings, for a uariety of contract and fult-tine positions(lLI)
FIGURE 2.T 8

,t) Drog through the >*r in the log.The lext, < /MG SRC= "bluebor.ipg"HEIGHT:5 WIDTH:5OO>, is highlighted(Figure 2-18).

,;\ clirk Edir on rhee/ menu bor ond thenpoint to Copy (Figure2-re).fie l(HTT(HEf(TII/BODY>/HTHL>

L I >Headquarte!a,l-g. in S9a!!:l e:.-. l',ashingtonFounded in 1996 by nark HulletI>Headquartered in SedttIe, tlashinqtonUL>2>0ur seruicesL TYPE="5qudre">I>tleb page resune creation and publishingI>0n1ine database of job listings, for a uarietg of contract and full-tine positions


19/52

Hlllt2.22 ' Proiecl 2 ' Creoling o Web Site wilh Links HTMt

;) Click Poste ond then-'J press lhe EilrER key.The HTML code disp/oys withthe posted lext (Figure 2-21).

HThL>IITLE>tleb Bes Horne Paqe

HEAD>t',leb Res0ur conpangTYPE="square">I>Founded in 1996 by Hark l4ulletI>Hpadquartered in Seattle, t{ashingtonIUL>H2>0ur seruices(UL TYPE="square">(LI>l,leb page resune creation and publishingii>onrihe"oatabase o job listin!s, for a uariet1t of contract and full-tine positions

HTEE>


20/52

Adding o Link to the Serond Web Poge . HIM 2.23To Enter the Text ond Togs for o link to Another Web Puge

i) Wirh rhe inserrion\-// poinl on line 23iust before lhe tog,lype(P)To learn moreabout servi ces thatr{eb Res can provi de,:l ease browse oursr'te or cal I us at(206) 555-1Web.rrevi ew our l,leb pageresume sample.(/P) ondlhen press the nrtn key(Figure 2-221.

Click immediotelybefore the s insomple on line 24. Type

Resunes Unlinited, the prenier international resune ruriting companU, has expanded to the l,lorldide tteb! Resunes Unlinited recpntlg has forned a npu diuision called lleb Res, uhich is theItinate resunp uriting seruice for the Intprnet. I'leb Res specializps in {,lorld llide lleb resunereation and publishing. llake gour resume instantlg auailable uorIduide.....put it on the tleb!

H2>0ur conpang(UL TVPE="square">I>Founded in 1996 bU Hark ],lulletHeadquartered in Seattle, lrashingtonH2>0ur seruicesUL TYPE="squarP">LI>treb page resune creation and publishingLI>0nline database of job tistings, for a uariety of contract and full-tine positions(/LI)IUL>DENTEB>P>To learn more about seruices that tleb Ees can prouide, please brouse our site or call u5 at206) 555-ll,teb. Preuipu our l,leb page resume sanple.
lBODY>/HT]IL> newparagraph
:s s # i!ffi,S:tt#r'{FIGUP.E 2-22

HTHL>HEAD>TITLE>treb Ees Hone Paqe/HEND>B0DY BACHGR0UHD="greyback. jpg">Hl ALIGN="CEHTEB">ueb Res


21/52

Adding on E-Moil Link ' Hllll2.25Soving and Printing the HTtll lile

you should save the HTML file and print it. A printed copy of the file also isimportant for your reference._.,.i,.,,'..i I ) Insert the HTML Data Disk in drive A. If you do not have a copy of thev HTML Data Disk, see the inside back cover for instructions for downloadingthe HTML Data Disk, or see your instructor., 2 ) Click File on rhe menu bar and then click Save As. Type webreshome.htm in theE/ File name text box. If necessary, click 3r/z Floppy (A:) in the Save in list. Clickthe Save button in the Save As dialog box.

Click File on the menu bar and then click Print.Tbe HTML file prints (Figure 2-25).

tabEatb#@>cataw b, w 9.46/7twODt Xt(Gm'9tr.i&e}, JPg">c1 Er*"cm"i


22/52

HTMLHTM2.26 . Proiect 2 . Creoling o Web Site wilh Links

ffi*rs)AboarWeb Poge lestingAn importont port of Webpoge development is testingWeb poge links. For moreinformotion obout link testing,visit the HTMI More Aboutpoge (www.scsite.com/html,/more.htm) ond clickWeb Poge Testing.

iewing the Web Page and Testing rhe LinksJust as in Project 1, you should view the 'Web Page using a browser. It also is impor-tant to test the links to verify that they function as expected.When the home page displays, you can click the e-mail hyperlink to verify thatit works correctly. You also can test the link ro rhe second p"ge by clicking it. thesecond \web page, samplel.htm, will display, although it is not completed. In therernainder of this project, you add other features to samplel.htm to create the \Webpage shown in Figure 2-1b on page HTM 2.5.

J),Eoo(9

Start your browser.If your browser window is not maximized, click the Maximize bufton.Click the Address bar.Type a : \webreshome. htm in the Address texr box.Press the l.Nrun key.

Your hrrtuser displdys the \x/eb page, wcbresbonte.htm (Figttre i zel

w*eb Res

home page

ResrxnEs Unlunited, the premier intemationai resrme uuhrg corrpany, haslTrrlmted receltly lias lomed a neu' dirisron rallerl Web Les. wturh is thrTleb Re:r str,ecralues n trrdd rMide $Ieb resmre creatron m,C publislmg.wrrrldmde. . put it on the -$,Irb IOur company

. Fourded in 1996 by L,{ak- Muller changedr Headquaterud n lieattJr, Wasirqetrn bullet types

%l?Ji?l'J" -E;Ta,ded r.i the Vrorltl Wide ltrIeb I Resmes t-ulhmate resme mh4g semce for the Intemet. IMake you r rsurnr mstmtly auailable l

lr1[:s+

background :;,:image :::Our services

. Web page resrme creatirn md publrshug changed. ottlirre rJatabase ofjob lish4qs, lor a vrirty ol contart md flrll-hme posinons bullet ttpeshorizontalrule image

Ta 1em more about sennces that-v,le b Res car p*nrle, phase browse ou slte rr call us at f!061r 55i- t-$Jeb preview oulrleb page resmre :.u'j d text ltnk tOsecond oaoeI-rnil votr . offienls to ur at ,, .' r -.jJ!.j __,'11 hDre " =g hry rlornp*eretntl: : dE j # S W e-mail I pare: link .--:-

FIGURE 2-25


23/52

Viewing lhe Web Poge ond Tesling lhe Links . HTM 2.2This page includes background and horizontal rule images and a different bullet

rype. This page also has two links. The first hotspot is the word, sample, and willlink to the sample resume on the second'Web page. The second hotspot is the e-mailaddress, [email protected], and will link to a New Message window. Before testingthe links, follow this step to print the'Web page.

T0 PRil,{T TF{E WEB__IPAGE _ _@ Click the Print button on the Standard Buttons toolbar.The printed'Web page displays (Figwre 2-27).

lYeb ResRmumfl Unlirnite4 the pmis intrf,rdoml rsumc witing mmpmy, hs expedd io th wtrld widWbl Reruncr Unl lmltd rently hu fonncd a nw divirim mlled web Rs, whiah i. th ultimstrgrun wrlthg r&aio for the ltrhmot. Wb Rer rpocirlirer in World Wido Wcb mure ereatlon aldpubllrhlng, Mlk your rsune iffhntly rv.ilable worldwide,,,,,pul it on thc wblOur companyr Foundod ln 1996 by MadcMullotI Hcadquartrd in Scattl, WarhtnSfonOur senlccsI Wb p&8 rB6umo orsetion and publbhingI Online dihbas ofjob lirtiogr, for r vriety of ertnat md full-titn poritiotrTo lc6rn morc Ebout rrais$ trEt Wob Rr6 em povid, plilr brcwr our rite u crll u * (206)555-lWob, Preview our Wb peg rsum6 saople,E-mall yaur eonnents lo w at $ebre\,qqi t om,

FIGURE 2-27Perform the steps on the next page to test the links in the'Web Res \feb page.


24/52

HTMLHTM 2.28 . Proiect 2 . (reoting o Web Site with LinksTo Test the links

t-) Point to the e.moil\J link,[email protected] mouse poinler chongesfo o pointing hond (Figure2.28).

[email protected].

A New Messoge windowdisp/oys (Frgure 2-29). Theoddress, [email protected],disp/oys in the To texf box.

FIGURE 2.28Be* Home Page - Microroft lafernft.ExDlerdt

I iiii i*l ge..i E. i:.i=:it=i i'.:Bjj:

ESend G Ev @ '"_rr,,'* EResmes ffi!-- address jnUflrmrter [email protected] To text boxWEb Ret {E::J - .::'-:':: i: ,.:i,r:' :1:r: | ,;-;. 1;:i;:,it. rp6fljpi4 G':EE1= ;,:,:: I -.:r:::j j:r.

i-+'-; ---le - ;tr : s l--= Gl .q+:jed**JES Ft]et--4tglJ"*"t lpth lrrsm d"lpIsl ResmesIntemet

tliai i,-:i lri :-':i i: : :,,i r -Our rrFr.Hr

Our sr\il.Or

T+ leam]ff"1"E-mai you rorffients to us at rril

Re* Hm Pnge,

Resumes Ilnllmted, tie prerrier intemational reswne mhrrg compaay, has e;,amded to the -$,Iodd lyrde Web I ResmresUrJ:tlted recentJy has fbmed a neru diviston called Web Res, wllch is the ultimate resxne wrihng seruce for dre IntemetWeb Res rpecialter n \llorld lfrde V,leb resme creahon ard publishing. Make yo,r resme qrsimtly ava:jable-rorlJude. put rr on the lHebOur company

' Forurded n 1996 by Mah Muller. Headquartered in'jeattle, ltrlashingt+nOur services

. $leb pae reswe creatic n md pubJrshrgr Online database oflob hstrgs, ftr a vuieff oiccntract md firll-hnre poslhonsTo lem rnore about serrices that Web Res cal prodde, plea:e browse au. site or'\IIeb page resurae srnple.

e-maillin k

$!tqtJ:: # q # S iJ l4e8ry,ryqioe liE1,/.sF""H*p"s..

call us at {206) J55- l.t'leb Prenew orrE-rrad you cofimEnts to us at t:J

1i5ffiffi-l,s#rd.

&g,gFIGURE 2.29

Preview ow


25/52

;\ Click the (losee) bufion in the l{ewfrlessoge window.

With rhe HTilIL DoroDisk in drive A"

point to the link, somple.The mouse pointer chonges-o o pointing hond (Figure2-s0).

Viewing the Web Poge ond Tesling the Links ' HIM 2.

FIGURE 2.30

fiatlAboutE-tloil linksAlthough it is not common,you con ossign more thonone e-moil oddress lo omoilto: log. Use the form" moilto:[email protected],[email protected]" in the tog. Some olderbrowsers moy not support thistog.

o

continued on the next page


26/52

Hllll 2.30 . Proiect 2 . Creoling o Web Site with Links

@ Cllck somple.The sompleT.htm poge dis-ploys (Figure 2-31). This Webpoge is on HTML documenlcreoted for you ond siored onthe HTML Doio Disk.

I secondpage prior to'enhancements

FIGURE 2.3I

Marie M. Santos110 Mwew Street

Scherenille, Indima 46375/)1qr 555-?51fismtosm@jsp. cam

Objechve: To obtm a progrmer/malyst positron utl a progresslve compmy that recognizes the potential md advmceduses oftechnologl.SummaryCOMPUTER TECHNOLOGY professional mth fou yetrs expeflEnce ratring from system softwue development totechrucal support. Strengths nclude problem solving rod malysis, oral md witten comwications, diagnostics, schedulrtg,interpersonal relahons, directing others whrle promobrlg a spirit ofparnrersllp with students, peers ffid support groups.Education

r B S. n Computer Technolory, May 1999, Pwdue Universr$. A S. in Te chnical Writlng, December 1996, Prairie State C+llEgeExperiencePURDTIE UNIIERSITY, WestLafayette, IN 1996 - PresentLab Consuitmt/Ilelp Desk Coordnator, Computlng SemicesResponsible for main cmpus computer laboratory operation, schedulirg student workers, aswering student softwaequeshons, md proudulg tecluucal support

. Improved shrdent satisfaction by providing techdcai assistmce lor a vriety of hudwre md softrure issues.. Des:gned new repor-tlng methodologXr that enswed complimce wth deparlmental quality improvement objectives.. Trained student workers cn Help Desh md computer use wtl concentration ott operations md system softrvreimproving student worhers' Frowledge md produchuFy

INIERNATTONALBUSINESS I4ACHII'TES @M, Chicago, IL 1995Accowt Systems Eng'ineer/Co-op PosrtionResponsible for technical sales asslstfficE md customEr technical support for the midrarge customer base.

. Sold md nstalled multiple midrmge system upgrades based on m aalysis of sang md grotth needs tlat increasedyedy revenue by 20%.. Received IBM Mems Seruice Awud for cust+mer satislaction with midrarge system upgrade installailon project.PRiIRIE STATE COLLEGE. Chcag+, IL 1994 - 1995Ofi ce Assrstmt, EngJrsh Depat-htentB.esponsible lor vrious adroistratiye Frctions includirg reseuch, reception, mswering telephones, secretaial, ad wordFrocesstrtg. lrouded suppor-i fbr secretary ad Erghsh deparlmetrt

. Supemsed the nstalladon of new systEm softwde updates improving efficiency md effectivenessr Updated the student database md coordinated the ma:Jug olthe dEpart'netrt newslettEr'Hardware SkillsIBM PC md compatibles, Apple Macintosh, IIND{ systemsSoftware Skills NIIIML, Microsoft FrontPage, L,[crosoft Intemet lrfomation Seruer 4.0, $lmdows, .filindows ]:llf Seruer/Vlorkstation, :Microsoft Ofice Professional. Visual Basrc 5, C+, Visual l+/lava, Lfrcrosoft Project, Mcrosoft Access, Mcrosoft ,PowerPoint


27/52

Editing the Second Web Poge . HTM 2.

,l'farie.'lL ^\krrfas110 lt{umerv Street

Scheren'r11e, Indraa 453?5(2 19j 555,2:,1 li :i : rllrAr i 'j

Objettive: To obtat a progrmet/melyst posrhon with a progres slre . nmpaq' that recogryes the p otenhal md advmc e duses oftechnol+6rSummaryCOMPUTER TECHNOLOGY profes*onal with low yeas erlenence ru,ging li-om system sofuede dere$F(rent t(,tecldlcal $upport. Strengdrs mclude problern soltrg md malysis, rral ard witten comrunications,


28/52

Creoling o Web Site with Links

lirst35 lines ofHTML file

Perform the following steps to open the samplel.htm file in Notepad and ediHTML file.i,0 (jiif:ii 'ili lifilllt, ,rtitrirO Click the Notepad button on the taskbar.,2) with the HTML Data Disk in drive A, click File on the menu bar and thenv' click Open.O If necessarg click the Look in box arrow and then click 3lzFloppy (A:).*f) If necessary, click the Files of type box arrow and then click All files (".").v Click samplel.htm.O Click the Open button in the Open dialog box.The first 35 lines of the HTML code for samplel.htm disptay (Figure 2-33).

FIGURE 2-33Adding Bold lo lext

You previously used theof other tags can be used toformatting elements. Figureformat tags.

tag to alter the appearance of text. A numbeformat text as well. Table 2-6 shows some of those2-34 shows a sample \7eb page with some of the text

Hl ALI0H="CEHTER">Harie 14. Santos110 Huiruieu StreetSchereruilte, Indiana 46375cENTEE>(219) 5ss-2s10CEIITER>santosr*!isp. conCENTER>>Objectiue: To obtain a progranner/anaust position uith a progressiue conpang that recognizese potential and aduanced uses of technologg_

SunnargB-S. in Conputer Technologg, I,tag 1999, purdue Uniuersit!I>n.S. in Technicat tfritinq, Decenber 1996, prairie State College


29/52

Toble 2-6

4>


30/52

HTM 2.34 . Proiecl 2 . (reoling o Web Site wilh Links

To Add Bcld to Text

For formatting entire secfions of text, you can use the BLOCKQUOTE orPRE tags. Blockqu}e sets off a section of text by indenting the left and right margpreformoHed text maintains its original line breaks and spacing. This can be usedtext that you have in column format that you want to tfansfer to a'Web page'In this section, you will add bold and italics to the text in samplel'htm' Chaning the characteristics of the text can help to call attention to that portion of texyou should use rhese elements with discretion, however. A Web page with l"9.Tbold or italicized text is distracting. You can see examples of the bold and italicizrext on the finished version of the"\ffeb page in Figure 2-32 on pageHTM 2'31'

i r \ ClickimmediotelY\Y ro the left ol the oin 0biective on line 15.Iype os lhe log {Figure2.3s).

sanple Resume/HEfiD)B0DY BACKGR0UHD="gre!back -jpg">

P>Hirie il- santos(CEHTEF>116 Huiruieu StreetSchereruille, Indiana 46375(219) 555-25-t0iiEHfti>ie HiEF='.nairto:santosrEisp.con">5antosfilisp.con
ER>110 Huiruieu StreetSchereruille, Indiana 46375(cENTER>(219) 555-2516iiiHrre>ie HiEF="mailto : santosr*!isp - con">santosrEisp'con
0bjectiue: To obtain.a pto9t11Tt{1n:1fl^ry::t}9l.uith a progressiqe conpanu thatd aOuanceO uses of technologg'
ecognizes the PotPntial an
H2>sunnargieipunnur uHIUEnsITY|, ltest Lafayette, IH,1996 - PresentigR>Lab consultant.aHelp Desk Coordinator' Conputing Seruicesi;;;;;;p;;;i;i" ror t"in ""tput "otput*r'raboratory operation' scheduling student"nir"iiirq student softuare qirestioni, and prouiding technical support'I151"*pr"r -ilorEpad tls{*iBnPrqFetdt-.{

FIGURE 2-36


31/52

Editing the Second Web Poge . HTM 2.3Adding ltolirs to lext

To give the resume a polished look, some of the text in the Experience section ofthe resume should be both bold and italic. The following steps use the tag to ital-icize keywords.

To Add ltolks to Texl(llck innedlotelyto the right of thelog on llne 7. Iype otlhe tog.Clitk imnedlotely tothe right of Sontos

on line 7. Type Harie 14. Santos110 Huiruieu streetSchereruitle, Indiana {6375(219) 555-2510santosr*!isp. con
A-S. in Technical l,rriting, Irecenber 1996, Prairie State Coltege(H 2 > Ex p er ien c P< / H2>
PURDUE UHIUEBSITV1, ilest Lafayette, IN 1996 - Present IBE>Lab consultant/Help Desk coordinator, computing seruicesBR>Responsible for nain canpus conputer laborator! operation, scheduling student sorkers,inq student softuare questions, and prouidinq teDhnical support.
.:1=1,.i-t-.r:-,.:,.,..,, ffi


32/52

HTMTHTm 2.36 ' Proieci 2 ' Creoling o Web Site wilh Links

o ilffIllt''j'll';qround lobConsultonl/HelP DeskCoordinotor on line 32'IilIERilArl0l{At BUSI1lESSilACHltlES (lBtrl) on line45, Account SYstemsEngineel/Co'oPPosilion on line{5, PRAIRIESTAIE COILEGE on line57, ond 0flice Arsislonl,English DePoilmenl online 58.The bo/d ond a6'Ditolic togs disP/oYn 4n\(ftgure z-.so1.

@D:-

FIGURE 2-38

Editi:.l$eir*:'glF.:' ,,.',,': :,.,'. . , ,.- - -:IiiH9:l]Fffi il'ii, ur*,''"/ I>' !":!-!:l:v":::;,,li"l'll';'lil?iilBR>PUBDUE lJNlUtHlr.r.Y\t L/\ru' ' rutino Seruices:Et*:iliittl;i*i'::ll'l:1i"3.::';lt:l'lii:i*lir'lnii*:l:**'ltli'n"q' s'luoen'l r''rkers '


33/52

Editing the Second Web Poge . HTM 2Font color #000099 will change the text from the default black color to a darkblue. Refer to Table 1-2 onpage HTM 1.29 tosee the list of possible color codes.

Chunging the Delqult Bullet lypeThe default type for a bulleted, or unordered, list is disc. In the web Res homepage, you changed the bullet type to square. To be consistent, subsequent pages in

the site should have square bullets as well.

To Change the Bullet Type

insert o spoceond then type ( line2s' -,TYPE:"square" os the tog{Figure 2-40).

t ) Click immediotely\J to the right ol theI in the tog on line25. Press lhe smcrrrn to

2 ) Repeot Step I to\J chonge the bulletiypes on lines35,50, ond 53(Figure 2-411.

( line 36

line 50

FIGURE 2-4O

00HPUTER TEDHN0L0GV.professional uith four gears experience ranging fron sgstensoftuare deueloPnent to technicat support- Strengths include problen soluing-and anaigsis, oratand uritten connunications, diagnostics, scheduling, interpericnal relationi, Oirecti-ng oinersuhile pronoting a spirit of partnership uith students, peeis and support groups_(/p)(H2)Education bullet typeSu nna rg

(H2>Experi enceBR>PURDUE UHIUEESIIV, {test Lafagette, IN 1996 - presentBR>Lab Consultant,/Help Desk Coordinator, Computing SeruicesBR>EPsponsibte for nain canpus conputer laborator! operatiotr, scheduling student rrorkers,uering student softuare questions, and prouiding technical support.Itl :i -htm - tlotepad ar$k Heflfie - litiHtrsl iHS{.+ -a*l pr,.r

UL TYPE="square">LI>Improued student satisfaction bg prouiding technical assistance for a uariptg of harduare andsoftuare issues.Designed neu reporting nPthodologg that ensured conpliance uith departnentat qualitgimprouenent objectiues.Trained student uorkers on Help Desk and conputer use uith concentrdtion on operations andslsten softuare inprouing student uorkers, knol,tedge and productiuity.
IHTERNATIOHAL BUSINESS HncHINES ( IBH), chicaqo, IL 1g95nccount Slstens Engineer/Co-op position
Eesponsible for technical sales assistanDe and customer technical support for thp midrangeUL TVPE="square">LI>Sold and installed nultiple nidrange s!sten upgrades based on an analgsis of sizing and

uith nidrange systen upgradeouth needs that increased yearl! reuenue b! 209.LI>Receiued IBH Heans Seruice Auard for custoner satisfactionIlation project-PEAIBIE STATE C0LLEGE, chicago, rL 1q94 * 199Soffice Assistant, English Departnent
Responsible for uarious adninistratiue functions including research, reception, ansueringtelephones, secretarial, and uord processing. prouided support for secretary;nd E;qrish

LI>superuised the instdllation of neu systen softuare updates inprouing efficienca andffectiuenBss.LI>tlpdated the student database and coordinated the nailing of the departnent nelusletter./UL> IH2>Harduare SkiIls

FIGURE 2-4I


34/52

HTM 2.38 .

4r \ Click File on the/ menu bor ond thenclick Scve.

r \ Aclivole vourY browser fy clickingthe Somple Resume bultonon lhe loskbor.! \ Click the Relresh/ button on the

Slondord Bullons toolbor.The Somp/e Resume Webpoge disp/oys (Figure 2-42)

Murie I'1. Santos1.10 Mwiew Street

Scherem.lle, Indrma 463?5rl1qr 555-)510'xs!9tv@tu,t!

coloredtext

bold text

squarebullets

bold anditalicizedtext

squarebullets


i squarebullets


squarebu llets

Olrjective: To obtam a programer/malyst position u'ith a proglEsslue compmy lhat recognizes the potential md advmceduses oltechnologXr bold texlSummaryC(IMPUTER TECHNOLOGY professi+nal mth fou yeas experience rangiqg &onr systen: softwtre deteloFment totrrh*ru.l ,rpport strengtts include pr+blem s+lving md malysre, oral md mtten commmications, dragn+stics' schedulrg'ir,t*rp.rronJr*lutiorr, Jo""nr,g other while promotir:g a spirit o[prmership with students, peers and suppott groups

Educationr B.S. m Computer Techrology, May 1999, Pudue Uruversrty- . A S. in Technical Wrin:q, December 1996' Prme Siate ColLege

ExperiencePUR-DAE UNTYE&SITY,1]IesI Lafayrtte, IN 1996 - PresentLab Consultmt/Helqt Desk Caordinatnr, Compuhng SemcesResponsible for mm cmpus compuftr laboratory operation, schedulilg student workers, mswering shrdent sotrvaequestions, md prouding techdral suppart

.Inrprove


35/52

lnserling on lmoge ond Wropping Texl

The bullets display as squares rather than discs as shown inFigwe 2-42.

frrr*rrin g anlmageand Wr appingTextTable2-4 on page HTM 2.18lists the attributes available for use in the tag.You previously used the HEIGHT and WIDTH attributes when you inserted thehorizontal rule image. In this section, you will use the BORDER attribure to elimi-nate the border around an image. You also will use the ALIGN attribute to align textwith the image.A border on an image makes the image display as if it has a frame around it.This may be distracting if the image is used as a link. 'With a border around theimage, the default (or selected) link colors display around the image when the link isnormal, active, or visited. Figure 2-43 shows an image with a border and no linking(left), together with the same image with linking (center). Normal images and visitedlinks display as indicated. The image on the right in Figure 2-43 shows the changedcolor when the link has been visited, giving the image an entirely different look.

Links and Borders image withborder andnormal link I image withi border andI visited link

-t

I El .. I lil;ert{'=.-lglg*-** ,*"**"r** ry"-l rImage with borderS md no link jlmage with borderS md nomal link ilmage

FIGURE 2-43

Alignment also is a key consideration when inserting an image. Alignment cangive an image and surrounding text completely different looks. Figure 2-44 on thenext page shows a Right alignment of the text, which wraps the text around theimage. The format of that command is .You will use right alignment for the completed Web page as shown in Figure 2-32 onpage HTM 2.31. To end right-aligned text wrap, use the
tagwhere you want the text to stop. Figure 2-45 on the next page shows a Left align-ment of the text around an image. In the left-aligned example, you may want to usethe
tag before the first bullet, which would break the line anddisplay all of the bullets beneath the image.

C: \Shelly-Cashman\Proiect2\Addtl H T ML\linkbord. html


36/52

HTMtHIM 2.40 . Ptoiecl 2 ' (reoling o Web Sile with links

FIGURE 2-44

!iw' Sc Fi'in*es Hb.t&if* l:-::e,l ,star:' ,8elsh ifuoe I Ssgh+.*' ,3 #: GFavsla #iAde* D:\\dlND0Vt5\Proliler\Denise\Derktop\samp e1 htmExperience rmageALIGN=LEFT

PUI-IrIIE IINIvERSITT, '$'Ie st Lat'ayette, tr'T 1996 - PreseniLab C onsultmtrtleip D e sk C,r ordnator, {on'putlng S eruire sResponsible lor main cmpus computer laboratorT operation, scheduJlg student workBfs,ffiswrnng student :rofi:rue questions. md prludrg terhrical support'

. Improved student satislaction by prouding techdcal assista!f,e lor a vmety of hrdwueand softq'me tssues. Desrgned new repor-nng methodr,lo$r that ensrred complimre with depa:trntntal qr:alrry irtprovement objechves. Trmed stLrdent workers an Help Desk md computer use wth c rncrntrafion cn operations md system sofl-wre

rnprotnrg snrdent worhers' tnowledge and productiratv

INTERNATIONAIBUSINESS kL{CIID{ES @ID' Chtago' IL 1995Accowt Systems Engneer/Co-op PositionResponsibie lor techdral sales assistmcE md customer technical support lor the mdrmge customer base

. Sold md mstalled mulhple mdrange system upgrades based on m malysts of smg urtl growth needs drat increasedyerly revenue bY 20910.!=.+=5-.:=-111-!-:+'==.9::,1{=':=a!-!'-Le'3:::,:.:':'-4:rrdror :,::rLallaho4.!]11':i:,:i:.j-.::':=:=:-i

Figure 2-46a shows an example of one line of text with ALIGN=TOP used inthe tag. This aligns the tagged text with the top of the image, with theremainder of the text displaying after the image. Figure 2-46b shows the same textwith the ALIGN=MIDDiE atribute, and Figure 2-46c shows the same text with thALIGN=BOTTOM attribute.

ExperienceP U RD UE {Il/tllgftSlfy, We st Lalavette, IN 1 99 6 - Prc sentLal Cansulnntrlle$t Desk Caonllnaur, Camputing Sen'icesResponsibie for nratn campus computer laboratory operation, srhedtrlulg student lTorkers,answering student sofllvile questions, md prondrng technical :rrppart'

. lmproved str:ded satisfaction by proudmg techrlcal assistmce ltr a tuiety of hxdwaemd s+fuware issues.. Desrgned newreporhng methoclologJ that ensued rcmphmce wth departmental qualrry improvement ob,jechtes. Trained siudent workers on Help Desk md romputer use wth concentration on operations md system softwreunproving str:dent workers' knowiedge dd produchrtrty

INTEANATIONAL BIJSINESS b[ACffIffE'S f8'!], Chirago, IL 1995Account Systems Engineer{o+p Pasition I;}Responsible lor technical saies asststdEe ffid customaf techncal supp.rrt ft:r the midlange customer base '\

. Sold md mstalled flulh:ple mdra+ge system upgrades based on m malysis ol smg md gron'th needs that increased

rmageALIGN=RIGHT

FIGURE 2-45


37/52

d, ',',1 -.6.'-=tl1onals Fdsem Mdi Print

lnserling on lmoge ond Wropping Texl . HTM2.4lFIGURE 2-46o

FIGURE 2.46b

ihtrr

F S v:g,!: :"9*.,Fynde Eb

* rperienceffi PARDAE ANMRSITF. West Lafavette. IN 1996 - Present rmageALIGN=TOP-:i Cansaltmt1lelp Desk Coordinata4 Compurtng SemicesI =: ::-::lle for main cmpus computer laboratory operation, scheduhg sh:dent workers, answerirrg sludent softwre:::=.:i, md prov:du1g teclnna.l support.' !:proved siudent satisfaction by proud:ng. lel[ed new repor-n4g methodoiory tlat' lrmed studeat workers on llelp Desk adr:proving studed worhers' krowledge md

::'7E Rt\,IA T ONAI B I/SIldgSSl}f/ ClL1V}ca aat Sy sterc Exgineento+p losifianG -$*e ,, :::,::: ,. .,, r. :j ,

+,.,,, .*=.:;:=:: ::. :.:it6 .r*, :r,'#-:g-G #-e=-{*.ee{re*h, Itq*F' : *Hrfi Faqite* Hktsc Nhdi}Fb': Frik*ls :,!,*d9' - \lEmplEl.htm ' , .F*rd ' f*

$aichl I*l#rs ::t*reie+ ,'SelF

- ,: ::966 : 'Eggsh r-g-Ficorife

FIGURE 2-46c


38/52

HTM 2.42 . Ptoiecl 2 ' Creoling o Web Site with Links HTMI.

insert an image with right-aligned, wrappedHTM 2.40.The image is contained on thelnserting qn Inoge with Wropped lext

The following steps show how totext, as shown in Figure 2-44 on pageHTML Data Disk.

To lnseil on lmoge with Wropped Texti) Click the llotepod\J builon onthe toskbor. ("::l- -- tag

When rhe Hlfrllcode disploys, tlickimmediotely olter the
tog on line 31.Iype nesponsible for nain campus conputer laboratorg operation, scheduling student uorkers'nsuering student softuare questions, and prouiding technical suPport-UL TYPE="square">Llllnproued student satisfaction by prouiding technicat assistance for a uariet! of harduareoftuare issues.LI>Designed neu reporting nethodotogg that ensured compliance uith dePartnental qualityinprouenent objectiues.(LI>Trained student uorkers on Help Desk and conputer use uith concentration on operations andproductiuit!.

Chicago, IL -1995ysten softuare inprouing student uorkers' knouledge and/UL>BE>IHTERHATIONAL BUSIHESS HACHIHES (IBH)'(BR>Account systems Engineer/co-oP Position
Responsible for technical sales assistance and custoner technical supPort for the nidrangeustoner base.

Sold and installed nuttiDle nidranqe sqstpn upgrades based on an analysis of sizing andqrouth needs that increased gearl9 reuenue bg 2f+-iLI>Beceiued I8H Heans Seruice nuard for custotser satisfaction uith nidrange sgsten upgradeinstatlation project-

FIGURE 2-47

In the tag added in the above steps, the SRC attribute indicates the finame of the image file, BORDER=0 will set no border around the image, theHEIGHT and WIDTH are in number of pixels, 41165=RIGHT will align theimage to the right of thtext, and the ALT willplay the alternate text,Purdue Fountain, as thimage is loading. The Aattribute displays textwhile the image is loadThis helps to keep thetor informed of what isgoing to display whenimage has loaded com-pletely. Figure 2-48 shoan example of what hapens when an image isloading with the optionALI attribute.

To tDD

ExperiencePURDUE UN{VERSITF, West Laflayette, IN 1996 - FresentLal Consultmt{He$t Desk Coardinator, Compunng SerocesResponsible for main campus computer laboratory operation, schedulu4 student workers,mswering student softwue questions, md proudurg techncal support

Improved student sahsfaction by prouding techrucal assistmce for a vaieS of hudwue

FIGURE 2.48

1I lP!rdue Fnuntnrnl


39/52

Adding Texl ond lmoge Links lo Anolher Web Siie . HIM 2.4

A Odrrrg Text and Image Links to Another Web Sitel-. of the most important features of the 'World'Wide'Web is the capability to link:rir-l one'Web site to another Veb site anywhere else in the world. In this section,i:l: create a link to a'Web site at Purdue University in rVest Lafayette,Indiana. You:::ie a text link associated with the universitg as well as an image link of thec:ool.llding q lexl link to Another Web Site

In the following steps, you link the words, Purdue University, to the home page:i lhe university'Web site. You use the HREF attribute in the tag to create this-:1. Between the quotation marks in the HREF attribute, you type the URL forl-:rdue University. You can link to any other Web site by typing in the full URL for:: site.To Add o Text link to Another Web SiteCllck lmmediutelylo the lefl of Purdueor llne 25.Iype trO.5. inl]technical ttriting, Decernber 1996, Prairie State CoIIege !t i----r---E): ending ;lH2>PUnDUE UHIUERSITY, l,rest Lafalette, IH 1C96 - presentLab Consultant/Hplp Desk Coordinator, Conputing Seruice5
Responsible for nain canpus conputer taboratory operation, schedulinq student uorkers,student softuare questions, and prouiding technical support.

(UL TYPE="square">(LI>InProued student satisfaction by prouiding technical assistance for a uariety of harduare andFoftr,rare issues.(lLI)LI>Designed neu reporting nethodology that ensured conpliance uith departnental qualitynprouenent objectiues.>Trained student uorkers on HeIp Desk and conputer usp uith concentration on operations andy5ten softuare inprouing student uorkers' knosledge and productiuity.fllL>
INTERHATIOHAL BUSIHESS I4ftCHIHES (IBI,I), ghicago, IL 1995 ]
Rccount S!stems Engineer/Co-op PositionBesponsible for technical sales assistance and custoner technical support for the nidrange


40/52

HTMtHTM 2.44 . Proiett 2 ' Creoling o Web Site wilh Links

Education. B S in ComputerTerhltlogy. May 1999' Lr l,rr lilrr1 ' I rl! text link. A. S ur Tecimcal 'Wnt4g, Dec ember 'l 996, lrame\-Ate Coliege

ExperiencePURDLTE UNIVERSITY,WesILaiayette, IN 1996 - PrerentLal ConsukmuHelp Desk Cootdinulnr, Campurtng Sen'ircsFlesporLsiLle frr main cmpus computer laboratory operahon, scheduling student rqorkers,arswerulq student softwae questions, ad prouding techdral support

. Lrrpr< ted studEtt sailsfattion by prou&ng techrutal asslstffif e lor a raiety of hrd'caremd s+fi:rore tssues. lresrgnr,J new reporling rrethodology that ensued cotnpJrace ffith dEFarhnental quality improvement ob.lectives, Trmed sildent workErs on Help Drsk ild computer use with concenhati+n on opetations md system softwreimproung studelt worhtrs' hrowledge md produchnry.

INTERATATIONAL nUSINESS MACHINES {IBM 'hirsg':' IL 1995

FIGURE 2-50

Adding qn Inqge link to Anolher Web SileIn the following steps, you insert the HTML tag to link the image inserted in the

Experience section of the resume to the university Web site. You use the same tail used above to create the image link.

@ To Add sil lmoge link ts Another Web Sitel-\ Click immediolely-/ to the lefl of the log on line 32.

' line 32

HREF forimage linkEile Edii 5sr! [elp

LI>Sold and installed multi4le nidranqe srrqti

cnnn,,f i ng Seruicesending ration, scheduling student uorkers'image link hnical supPort.

the nidrange

BR>Lab Consultant/Help Desk Coordinats'BR>Eesponsibte for nain canpus conputer Iablype Oesigneo neu reporting nethodology that ensured conpliance urith departnental qualityinprouenent ob jectiues.traineC student uorkers on Help Desk and conputer use uith concentration on operation5 anden softrjare inprouing student uorkers' knouledge and productiuitg-


41/52

Figure 2-52 shows you what.:cwser. You can tell that this is::ci'ed over the image.4-9qpE Iryry:!i:l':",t_1$1-1ltreqE',

(reoling Links wilhin o Web Poge . HrM 2.4like when displayed in themouse pointer changes when

this link will looka link because the

+g\ .Fd--slHma l 13 i+}v4 :@3'*tI Fu{s@n, Mail Rhr'$r,:= iJ. Stfi Feteeh *G#56sch f6'rsiter Hislcrt '_.!lEdit : ; LinkrEtlucation

. 3. S ifl Computer TechnoloEy, May j g!9, !g4U, Uqgliq. A S. n Terhmcal l,lJriting, Deceniber 19g6, lratre State CollEEEErperiencePL:EDUE UN1I/ Rgm'. West L;rfayrtte. DT '1996 - presrntLai Consultmtlle$t Desk Cootdinator, Computing Senices-:.:;lonsibie for rnan cmpus computer labrrator-r /)pErnhon, :rhe tLfing student \rorkers,:-:ruerine str:rJent roftwa.e questions, md prouding techdral support

Lrrproved student satisfaction by prornding techucal assrstarce lor a v*etr7 of hud'oa*

}1'TEANATIONAI, BIlStA/gS'S ,}{C CHINES tIBIt{), Chioago. IL i 995t I *t9:/4!qw.Fsdqe.*d# glbt"iii'i'-89t-11;; # &l i* g i; lisnpter . HereFnd

Desgned new reportrng methadol+ry that ensrired c,:nrphmre wrth depalmerrtal q,:alitv urproremerrt oblectivrsTra$td student'sorkers ori Help l)esk md computer use mth concentratiorl on oFernhons-ftrJ system rofi'"r'aretrnllrovLtg shldeilt vnorhers' Fnowledqe an.l prcductrvity.

FIGURE 2-52

reating Links wirhin a \Xrbb Page,he final links that you will create in this project are links within the Sample Resume\\'eb page. Because the Sample Resume is a long page, it would be easier flr the visi-:ors to have a menu or list at the rop of the \feb page so they could move immedi-.itely to another secion. view the rweb page in Figuie 2-32 onpage HTM 2.31 toiee what these links will look like when completed.Figure 2-53a on the next page shows an example of linking from the word,Education, at the top of the page, to the Education section in another part of the\\ieb page (Figure 2-53b on rhe nexr page). lfhen the mouse poinrer is moved over:he wor:d, Education, and clicked (Figure 2-s3a), the browseireposirions, or links,.he page to rhe Education rarger (Figure 2-53b).To create links within the same \7eb page, you first ser the rargers for the links.-\ torget is a section within a XTeb page to which you want to link. You have decidedIt rvould be easier for the Y/eb page visitors to be able to go qurickly from the top of:he sample Resume page to the Education, Experience, Hardware, and Software sec-iions of the resume. You therefore set targets at the beginning of these four sections.Ybu then create the links to these targets. To do this, you .r.ut. a list of words thatvou will use as links. The bulleted list shown in Figure 2-53a provides the link text.When creating this bulleted list, you insert the .At tag with a variation of the HREF.rttribute to provide the links to the targets.

mo1$abozrlinks on o WebPogeAn odditionol use of theonchor tog is to ollow visilorsto move within o single Webpoge. Use the NAME ottributeto ollow movement from oneoreo of the Web poge toonother locoiion on the somepoge. This linking technique isporticulorly useful on excep-tionolly long poges. An indexof links olso con provide eosyoccess io vorious oreos withinthe Web poge.


42/52

HTMLHTIvI 2.46 . Proiect 2 ' (reoling o Web Site wilh Links

110 Muiruiew SaeetSchtrennlle, Indraa 463?5

\4 LJ ) JJJ-ZJ LVsaltogm@jsp. com

Objective Tr obtm a progrmerr'malyst posrlion lvith a progrcssive compaay lhat recogrlzes the potential md advmcedures dteclnologtSurnmaryCOIIPLITER TECHNTJLOGY professional with fou yeus experience rar6,ing &om system sofhrare developflen! toterhniral supprrt. Sreng;ths mcirr,le problem s+lvr1g md malysis, oral a:rd written comrnmications, diagnostics, scheduhg,interpersonai rel;rtiols, direchrg others whrle promoting a sptit olpartnerslup wth siudents, peers md support groups

link lo. Educahrhq education. F*;J target. E"!**ii**;fi!*GtfttJw*6"-*.- ry.:- i:: - i.] iHffi,ffi:t#&g :l:3rqqr4:lrEpd

FIGURE 2-53o

ffte Edit Uie* &s F$#ite$ Els : JEJ'strp.+"Back **

Aadre*r !.p'] nedrcatic r ::J i,itr**

E

Education targetnamededucation. E S. n Computer Techrologlr, May '1999, Pwdu* Unversitv. A.S. n Teclncal Wntng, December 1996, Prairie State CollegeExperiencePLIRDLIE UN/-RSITfl, \Ilest Lafayettr, D'tr 1996 - PresentLal Consultmt$Ielp ilesk Caardinator, Corryuting SemicesResponsihle lor mm campus computer laboratory operation, scheduling student worhers'mswerirg sfudent sofurre ques[ons, md proudrng technrcal suppctt

. Inproved shrdent satisfhcticn by providing techntal assistmce for a vme$ olhadwareard softwzu'e issues

. Desrgned ne'o report4g meth*dology that ensrred complialce wrth departrnental quality improvement ob.lectives. Trmed studcnt workers on Help Desk md computer use with concenfation on operations md system sofu+rueimproving student workers' klowledgr md produttrnly

hINT'ERNATIONAI dtrSInIE'SS n{ll CH INES (IBM), Ctrcaso, [- 1 995 ,S My Corp*a ,fu-{rc E**,6st.t[ ff gjd ? . i'ryqrr]:!lqgd, 1i,ilifis."F,- u"*"r - ttlt-

FIGURE 2-53b


43/52


44/52

HTMt:;:. {ilr il -,-: t-t _lt:

Olct hnedlolelyto the lett of rhe tcg on line72.

log online 75.

.?) Tvpe IHTERNeTI0NALBUsIHEsSt,lAcHINEs{reH}nccount S!stens Engineer/Co-op position(/IX/B)>Responsible for technical sales assistance and custoner technical support for the midrangetoner base-Sold and insta>sord and installed nultiple nidrange slsten upgrades based on an analgsis of sizing andouth needs that increased yearly reuenue bg 26t,.i./LI>I>Receiued IB1'l l'leans seruice Aulrd for cusioner satisfaction uith nidrange sgstem upgradeinstatletion project. PReIBIE STATE CoLLEGEsuperuised the instarration of neu system softuare updates inprouing efficienca andffectiueness.LI>updated tha studPnt database and coordinatpd the nairing of the departnent neusretter-

HAI4E="harduare">Harduare SkiIIsIBI'l PC and conpatibles, AppIe t4acintosh, UHIX sgstensSoftuare SkitIsHL-,- I'licrosoft FrontPage, Hicrosoft Internet Infornation seruer 4.0, l4indous, Itindous NTr/lJorkstation' Hicrosoft 0ffice professionar, uisuat Basic 5, c**,-uiiuii"Ji"r.r"u",crosoft Project, Hicrosoft Accpss, Hicrosoft pouerpoint


45/52

Creoting Links within o Web Poge ' Hltil2.4To Add links lo lhe Turgets

r \ Click immediotely-Y to the right of the tog on line 22 ondlhen press the nrtr keytwice.

2) Iype 0bjectiue: Toizes the potential

le pronoting a spirit of pnrtnership uith students, peers and support groups-
TYPE="square">(LI)(A HEEF="ileducation">Education(./A)(/LI )
obtain a progranner/analgst position uith a progressiue compang thatand aduanced uses of technologg.

completedbulleted list lortarget menuI>ExperienceI>Hardware

8.S. in Conputer Technolog!, Hay 1999' PurdueiuersitgI>n.s. in Technical trriting, Decenber 1996, Prairie state CoUege

Sof tuare>l


46/52

HTMI.HIM 2.50 . Prolect 2 . Creoting o Web Site with Linkslinking to the Top of the Poge

Another link can make browsing easier for visitors. In several logical places onthis'Web page, you should provide links that quickly move the visitors to rhe top othe'web page. Look attheTo /op links in Figure 2-32 on page HTM 2.31 to seeexamples of these additional links. To create these links, you first need to set the taget at the top of the page. Then you create three links to that target after the Eduction, Experience, and Software sections. Because the Hardware and Software sectioare short, you do not need an additionalTo top link after the Hardware section.

To Link to ihe Top ol *r PcgrI ) Click line 5 ond\-/ then pressthe rtrrn key.

- line 6

2 ) Iype santosr$!isp-con

S unna ry

To topl ,'#;""1"i3;,A HAI4E="experience">ExperienceE>pURDUE UNIUERSITy, uest Lafalette,

>Lab Consultant/He1p Desk Coordinator, Conputitrg Seruices>Responsible for nain canpus computer taboratorg operition, schpduring student uorkers,ing student softuare questions, and prouiding technical support. .:Inproued student satisfaction bg prouiding technical assistance for a uariet! of harduare and .:

Present

tuare issues-(LI>Designpd neu reporting nethodologu that ensured Donpriance uith departnentarinprouenent objectiues.LI>Trained student uorkers on Help Desk and conputer use uith concentration on operations andUsten softuare inprouing student uorkers' knouledge and productiuit!./UL>

FIGURE 2-59


47/52

Creoling [inks within o Web Poge . HIIil 2.5

tog ond then prest theiITEr key.

Repeol Step 4 online 80 lo insert the

Repeot Step 4 online 89 to insert the

sales assistance and custoner technical the nidrange

l,lindous, ttindous NTUisual J++/Jeua,

ustoner base.

log ond then press therxrtn key.-ne HTML code disp/oys=igure 2-60).

sold and installed nultiPle nidrange slsten upgrades based on an analysis of sizing andgrouth needs that increased yearlg reuenue by 20e.4./LI>Receiued IBH Heals Seruice Ruard for custoner satisfaction uith midrange sgsten upgradeinstallation project.(BR>0ffice Assistant, English Departnpntall>BB>Besponsible for uarious adninistrdtiue functions including research, reception, ansueringelephones' secretariar, and uord processing- prouided supporI for secretary !nd Enqrishepartnent.

TYPE="square">LI>superuised the instarration of neu sgsten softuare updates inprouing efficienca andffectiueness.UPdate.l the student.latabase and coordinated the naiting of the departnent neusretter.(P>To topn NAHE="harduare">Harduare SkitlsP>IBl'l PC atrd conpatibtes, Apple Hacintosh, UHIN sgstens

NAl4E="sof tuarp">Sof tuare SkilIs

HTHL, I'licrosoft Frontpage, Hicrosoft Internet Infornation SeruerSeruer/ltorkstation, I'ticrosoft 0ffice professional, Uisual Basic 5,l4icrosoft Project, l,ticrosoft Access, llicrosoft pouerpoint

To topl

FIGURE 2-60

This creates a new paragraph using the

and
tags, italicizes the textusing the and tags, sets the font to a small size using the and the tags, and sers the link to the top target


48/52

HTM 2.52 . Proiect 2 . Creoling o Web Site wilh Links

aaqtLlrdAt4ate/M/L!>t t&r.EX/bulTV'';'I'Tt tttE ,rtry.tt t tS trgf - PE.aaE|.4wtbl. to, *L^ c,ryu ..tpct ! llbor.torfr otrr.absabra rcxt*rat $fr.ELnt agrac.'lg bttttFa (lDaatL6a, t:ttqor;,t'Ptry.d .tsbnt, tttttteLLB by g.Ntdtag t hfts1vLEt.Ey ot ligl},rt. tnll tot*uta L.wa,rtaLn 4 aC}{j.nL toth.aEt en XaLp g.tlt ard cotBtar s.grutagLd, afi tyt6 tctE rra ,,qtrdtnt tleibnt. t,rtbtaPt.B,t CLvily,

HTML

9qrl41:ttttntl0ll! 'fT,ITEBA ,{|tt tA lI*tt Ai.dp/ t! 1t9Sta#t cl'lts trttne/co--olt ?sitl#/Ix/t>fi>Lrl$sib:a f9r t dnidLl rd.r #rirt 'e .Fd st# grdrisl ,!tps&t$ thc rlCa$EF rut*F bM,tqbryir.d t c tilt l'ltis oC N tlttd @ft*rc uFa.*.e i.rywiFg.ttt etane' .uC ottetlr*tt.i.r.f.& *LLLA/'/2>t; tC .rd aott ftbLr, ry?L Xreirteh/ A;fr tyrt*,rrfi.t NIoEwtE 'cst?q./ l4iclstt Int trg lefo*tio tcffi 4.0,uLicp.r.t gLacpi. f, tcfrc/tork E tt&, ',taBo*tt Offt Eofrdrl*l/ ViHlu$t4 5, e++, vi'ML t#/J&rt xisostf tiojet/ tti4teft tc4r/ tlJssottPwtPoi.nt4/t>


49/52

Creoling [inks wilhin o Web Poge ' HIm 2.53"0 \/[EVi THE \iit:B 'PA\(t[U Click the Sampler i) Click the RefreshThe enbanced'Web page displays (Figure 2-32 on page HTM 2'31)'

RilNi TI-[[ N'/ES FAG[.lJ-r) Click the Print button on the Standard Buttons toolbar'

Resume button on the taskbar.button.

Tbe Web page Prints (Figure 2-52).

Marie M. SantosI l0 Muiryicw Str@tSchercnillc, lndim 46375(2r9) 55s-25t0sun!Q!L(4\P.qqu

ObJtrtlve: To obtain a progrmr/oatyrt pcition with a progrE66ivc compillpotential md advanced uscs of tchrologySummaryCOMPUTER TECHNOLOGY professional with four ye6 erprienc ril8indcveloDment to ehnical supgon sreng$t include problem slving and amly6'mmrinicatioro. diagnostici, rheduling. inerpemml relaliom' direding olherof partnq$hip with Etudents, ps md $upport Sroupt,

I &!]lcitilpI Expcrienc:gI Hdd\\'reI SslrrreEducation

I B,S, in Compun Trchtrology, May 1999, PurJ'rt t r'r er lt\--r A.S. in Trhnical wriling. D4ember 1996. Prairie Str CollegeTqq.ExperiencePURDIJE ANMRSITF, W$t Lafayettt, IN 1996 - PleentIab Consulunt/H etp Detk Coonlinator, Computing Sewie6 - - -.Responsible for roin camps computer bbqatory oPeratiotr sheduling Istudint *o.kem. m.*ering studenl rcftwae queslioru. and Providing ttsahdcal suppolt,

r Irnproved 6tudnt stirf4ti@ by providitrg tahtrical 66klfrce tq avdiety of b{dwil and sftwm iss$sr Designed new reporting methodology that truGd comPliec with dpanimFovmont objectives,r itiin"a *uO"nt *-*"rs on Help Desk od ompltsr uE with @n@ntrati(systen mftwac improving stu&nt wortrs'tnowledge and prodrc'ivity'

INTEhNATTONAL BUSINESS MACHINES (IBM), Chicago, lL 1995Account Strlem Englnea/Co'op PotldoniliiJiifi'r,r?Jit-rri"a robr ^ii"t"n* -d cu'totrr ichrieal $upport for the midtangc su$mer bre'I Sold ild itstalld multiple midrmge ryrtcm upgrdee bmd on an'a3iydia of tizitg nd grov*rncedc that ircrceed yeuly rcvetwb'! 20qar il*"iuJ lsM M"-t s"-i* nt.o for fletoffi taliEfedm with midrilge f;yntam upgtaditrtallation prcject.

PRAIRIE STATE COLI'EGE,Chic"go,lL 1994 ' 1995Ofrrc Atthlanl, Enclfuh De,arlmsf,t#;;b;;;;;ffi;; rdmiinisrativc tunctimt ircluditg roreech, t*ption' ffiwding tclcphwt'*remial, od wrd prMirins Providcd rur4pn fot wtcw Nd Englisb dpartent'I Sumird tlr instatlaiq of rw ry$m rcftwtre lpdaar imProt ing etfalnc"y ald effaiv*esi U-frurl *t tt a.nl daube ild ffidinatld thc roiling of rh d'paffit rcwrlettrr'

L,,tt+Ilardware SkillsIBM PC md ompatibls, Apple Meinloth, UNIX syrtenrSoftware SkillsHTML, Mismft Fro ntPage, Micrwfilt*swtlnfmation Swet 4'0, Wiodsws' Windtws NTso*oJipu*rtuti-, rtlis;oft offl@ Ptofcsrional, visul Bffiic 5 ,c++'vltwl t++ltava"MiswftProje! Miswft A@sr, Micr@ft PowerPointI4'?RetLrnt tt \\1:b Res lULtLIrt:


50/52

HIM 2.54 ' Proiecl 2 ' (reoiing o Web Site wilh Links

Ugp46E = 20

The'web pages are complete. In this proiect, you created a home page for \rebRes. This p"g. .intuins an e--ail link so the'Web page visitors can contact \feb Restt "lro .onr"i"n, a link to the second \7eb page in the \feb site, samplel'htm' You themade enhancemenrs to the samplel.htm'web page on the HTML Data Disk. Youadded bold and italics to text t; vary the look within the page' You inserted an imagand linked it to another'Web site. You also linked text to another'Web site'Testing the Links

Testing all of these changes is very important. You should insure that all of thelinks worli by clicking the links and verifying that each link takes you where itshould. You also ,noitd test the \feb pages it -ot. than one browser to insure thathe \7eb pages display as you expect.ore About Images

Images make \reb pages more interesting. Inserting images on'web pages helps to^tt irtvisitors. You u"sed several image attributes when inserting images-in this proect. Spacing between and around images and text also is important' as shown belowe good idea for very large images is discussed as well'Horizonlal ond Uertitql SPace

HSPACE and VSPACE attributes control the amount of horizontal and verticalspace around an image. If you wrap the text around an image, you may want to ad,i-" ,p"." so the t."t do., not appear to run into the image. Figure 2-63 displays,"-pl.i of the HSpACE and VSPA-CE attributes. Additional vertical space displays"bou. and below the image where vsPACE=20. Additional horizontal space displayto the right and the left of the image where g5p4QE=20'

@H+#1***He is l-vear-old and is just now leam4g how to rvalk Marhew has a brg sisrer

Ths is Matthew McDeutt. He is 1-year-old and is just now leamrg how to walk Matthew has a bg sister

@s;ra:;#'*HSPA'E

Tlls is Matthew McDevitt. He is 1-yem-okl and is just now leaffflg how to walk. Matthet' has a blg ststerwhose nme is MeladeHSPACE=O HSPACE = 20

Ttus is Matthew McDentt He rs 7-yeat-ol'J md is just now leammg ho'c to walk Matthew has a bgsister ri/hose nme is MelmieHSPACE=20 h

FIGURE 2-63


51/52

More About lmoges ' HTM 2.55

ffi*re=)Aboatlip tutYou do not hove to be ogrophics designer to creoteottroclive Web poges. Freeimoges ore ovoiloble onnumerous Web sites. Formore informotion oboutfree imoges, visit the HTMLMore Aboul poge(www.scsite.co n / hlr.'l/more.htm) ond click Clip Art

Thumbnqil lmogesImage loading is improved by many \Web developers who use thumbnail images.

.-- thumbnoil imoge is a smaller version of the image itself. The thumbnail is used as arK rhar, when clicked, will load the full-sized image. Figure 2-64a shows an exam-:-. of a thumbnail image that loads the full-sized image when clicked (Figure 2-64b).-,t.rding images can take a long time, depending on the size and the complexity of:re image. Visitors to the \Web page may not want to wait. Web developers use:rumbnail images to give the visitor the opportunity to decide whether or not they',,,'anr to see the full-sized image. You can create a thumbnail version of the image by::sizing the image in a paint program and saving it with a different file name. You:ren use the smaller version (thumbnail) of the image in the'Sfeb page with a link to:he larger version of the image. The required tags are , where largeimage.gif is the name of the full-sized:mage, and thumbnail.gif is the name of the smaller version of the image. If the visi-:or clicks the thumbnail image, he or she can use the Back button on the browser'sSrandard Buttons toolbar to return to the original '!7eb page displaying the thumb-nail image.

G.;3t'':3 !A gFaroit*+: Hig*y Cha*rrdt i Fjh{r*n . Hd Plir9 t{a&

FIGURE 2-64o

FIGURE 2-64b


52/52

HTMt

-g - cE -,,c-!. o='F ?= here to Obtain ImagesYou can obtain images from a number of different sources. Clip art can be useWeb pages as well as images you create yourself with a paint program. you canimages, pictures-,.or graphics with a-scanrrer or use a digital ."-.i" to tuk. pi.tthat can be read by-the computer. You also can copy fo'od i-"g"s from the inteThe'web contains thousands of image files on .ouniJs subjecti thar can r. aoloaded free and used for tto.t.o--.i.ial purposes. u;;g one of the popular seengines, do a search on the words, Free GIFs, and see how -arry hits yo, get. ythen can right-click.an image that you want and save ir. Regardiess olwhelre yothe images, always be aware of copyright rules and regulations.

= E= :t;-L roiect Summary

In this project, you used Notepad to create and edit two HTML text files. you developed a two-page webthat had links from each page to the other. You learned the terms and definitions of linking and used each ofour types of links in your pages. You created a link from the home page to the second page, together withfrom the second page back to the home page. You created an e-mailjinl tn"r, *h* clicked, opened up a NMessage window' You set target links withln-the second p"g" "nd th".r .r""t"i " bull.t"d list to link ro rhosItargets' You also created a link to another'web site, "r,d'.rid both text "";;l;;ge to link to the site. yolearned more about'web page images and reviewed examples of m1n4 ;;;d;;niques. you showed youtwo ntreb pages to your boss, Mark Mullet, and he *as thrilled with ihe ,"Jrlt] you probably will have morWeb development work to do now.

r -,.K)

i'' hat You Should KnowHaving completed this project, you now should be able to perform the following tasks.

t:{i! j

i Add Bold to Text (HTM 2.34)i' Add an E-Mail Link (HTM 2.24)', Add an Image Link to Another Web Site(HTM 2.44)I Add Italics to Text (HTM 2.35)' Add Links to the Targets (HTM 2.4g)Add a Text Link to Another \7eb Site (HTM 2.43):'r Change the Bullet Type (HTM 2.37)' Change Text Color (HTM 2.3G)Complete the Link Back to the Home page(HTM 2.s1), Copy and Paste Text (HTM 2.21)', Enter a Heading (HTM 2.15)-' Enter Initial HTML Tags (HTM 2.13)Enter Text (HTM 2.15)

Enter the Text and Tags for a Linkto Another \7eb Page (HTM 2.23)Enter Two Bulleted Lists (HTM 2.17)Insert a Background Image (HTM 2.1g)Insert a Horizontal Rule Image (HTM 2.20)Insert an Image with \Trapped Text (HTM 2.42)Link to the Top of the page (HTM 2.50)Open the HTML File (HTM 2.32)Print the \7eb Page (HTM 2.27, HTM 2.53)Save and Print the HTML Frle (HTM 2.25HTM 2.s1)Set Link Targets (HTM 2.47)Start Notepad (HTM 2.11)Test the Links (HTM 2.28)\/iew the Web Page (HTM 2.26, HTM 2.53)

Documents

HTML Chapter 1