HTML

*9 r oc
Creqting q Web Site 3

with linls

Resumes Unlimiied is o compony ihot

speciolizes in resume wriiing. You wont
ntroduction
io odvonce your curreni posilion within An important feature of the'World'Wide Web is its capability of
lhe compony by using your recently allowing easy movement from one \7eb page to another in
'Web
goined experience on ihe lniernet. You apparent continuity. An exciting aspect of page development
con envision developing resumes os is the ability to link'Web pages together. In this project, you will
Web poges ond ihen moking ihe learn how to connect'Web pages using the following types of
resumes occessible to people oli over hyperlinks, or links.
ihe world. Your cusiomers' resumes will Links within a'Web page
be online ond instcrnily viewoble os Links to another'Web page on the same'Web site
Web poges. Links to another'Web site
E-mail links
You know you will be oble io con,zince
your boss, Mork Mullet, thot lhis ideo You will identify the various links and learn how to use them,
will o{{er the compcrny Iniernei exposure and then create a two-page \feb site that uses each type of link.
ond morkeiing presence when you hove
ihe octuol product to demonsirote Wilh
this in mind, you vrill develop two Web [ 'io;.., Two Web Res
poges using HTML. The {irst Web poge
In Project 1, you used
-HTML to create and edit a Web page. In
consisis of in{ormolion oboui Resumes
this project, you will use HTML to create a new'Web page for
Unlimiied, on e-moil hyperlink to the 'Web
Res and its associated links (Figure 2-1.a) and improve the
compony, ond o link 1o o second Web
appearance of the Sample Resume \7eb page that consists of the
poge. The second Web poge contoins o 'Web
Marie M. Santos resume (Figure 2-1b) to which Res links.
clienl resume ond o link io o periineni
The two completed Veb pages shown in Figures 2-La and
poge on the World Wide Web. A{ter
2-1b contain links to take the visitor from one page to the other.
ihese Web poges ore compleied, you
The first page is the'Web Res home page. It displays information
con loke them to Mork for the big sell. it offers. The second page is the
about'Web Res and the services
Sample Resume page. This page contains internal links to allow
visitors to move easily from section to section within the'Web
page. In addition, the Sample Resume page contains both text
and image links to an outside'Web site.
Using Notepad, you will create the \feb Res page and edit
the Sample Resume page. The unedited Sample Resume page is
included on the HTML Data Disk. Then, using your browser,
you will view the pages and follow the links you have created.
 C{

o
4
4
FIGURE 2-l o

W.eb Res

expaflded to the World Vilide Webl Resmes

Resrrnes Unlinuted. the premier intemational resurne wiling comp*ny, has
the Intemet
ii;;;;;;;Jflyiu, tor*"a u drvision called 'tlfeb Res, whrch ts the diimate resume wrihng seruce for
r.*
,lr;Rrr u'Wodd Wide Web reswne c.reati+n and pubhshrng Make your resume instandl amtlable
rp..irlires
worldwde....pui it on the Web !

Our company
. Founded in 1996 bY Mark Mullet Mmie M. Santos second
. Headquartered in Seattle, Wasburgton
1lC [email protected]
Web page
Scberede, h&da16ll5
(219) 5i5-?51i
Our services 4g!'lgtLtlt
'\I,Ieb
r Fage resume crealion ird publishirg Obje.dv. To obt@ aprogal@s/edrspon[ot nS a!rog€$1tc omldvSatr"oryet tle !'bih' dd a4ttuted

.Onlinedatabaseofjofi.sfrngs,foravanetycfconkactandfirll-limeposilons
Summary
de'dopment ti
call us at COMtrTER TECIfiOLOGY prolesidd d fow vers e+anen" ralw ton svsbm s4hde
To learn more about s nnces that Web Res can provide, please browse our site or redlnral$ppod Steqmsnclu,te probkr sol@ md diiss nrd mdMten rom'ucarnn
&@os!rs' s'lsdilrs
'$treb ;'ecb€ aipd ofpm*sla! uS ehdenrs' l'eri -c nppodsouPs
page resme :rr'J' uery*rclJremoa., othtrs wh6-Pr.nolT
link to
second Page . llve text link to
E-mal your cofiments to us at l:: re - 7J!f r{l: .Lz:ry Purdue University
. l4az: home page
. ttrc
Education
image link to
BS s CompuErTe.holos. Mav 1999.!q!lr.]i{!4 Purdue University
'. nTEchcilWa!4, Decembd 19t6, lrffie lble Colege
AS
home page

Experience

PURDUE UNMRSITv.1[estLafaver IN 1996 - p'rrEnr

'
Ian Canstufrel! Desk he,&t' )4 Caryldda kryices
R.sponslle fornd cdFus.om!' -r Laboratory oPerahob 3chedil€ studelt wo*eE
ilsd4 studed sotue qur_-ros, ddltoudrytech.el surlod
. lnptoved stud- -, sdsfa.bonbYProfldqte.hcd a*rtd.e lor avdrry
'f!adtn:
dd soF <ue.
r n -4edAe{reP.tu€mdsadolo$fiatsnsuedc'lPlmcenft&ptueilJqdtvmlntBnlent ilB'hte'l
t, . Trmed s*dea wo**s o! Heb D.sk dd .ompuer !3e qS to!'erfta!'r' nn tlrI an'a' dd sF' i s'tu're
spro@ sbdeni workes hodtdge dd lrodu.hqtr

INTER.ITAaTIONAI AASIM<s MinELdn'-': : -D'+', L 19"

Ac@lnt slsen tu9in ,tu? Poiao^
Reryonsftle for erha sJes assdoce ild.u$omerte'b'd srypodf'rSe dilqs ''Ddn!rtfase
. Soldednsldedndupietud4dsvddmrygads:basedondmJvtsofsqdds'!tl!e:irfrathnea':d
yedly t*enue bY 20%
.lecde,tBMMeassemcsAwddftrcusionerraBla'!!n$i*o&4eslsemulsaden$Ja!'n!r':3d

PRAIRIE STAre COLL-EGE, Chceo, [ 1994 ' i995

Ofrce Asdtu1 Eryilsh Dqdredr
i;. **t fin bons n.Ludi+ r'sed'h L"'ePhon &'ftry h:'"Fh'nes re'1*il Id !"rd
ri+*,rf. "d.**an'e
!r!.esq Proilded sdppofrf.i se.req ddB€ldl depmid

. Saperised he nst?land olnil tydem sotude uldat8, @!r'q e$tncv tui sFeililer's:
. U;dahd ihe studenr dahbase dd .no.tuated se @alo€ !(se dela enr n'tirner
1e
;.
Hardware Skills
I3M P. bd,ompdbF. AoPts Na-4.'\ }E{ *'"a.
ter.
Software Skills
ion
ltllJl, Mcrosoftlrod4e,Mcrosoftkemeilf.mabon Sdaer4 Hsdrwr' Sturd'rws ]{ S-'ftrf;rrfi3f 'n
he '
MtrosoB ffift lrcfe$pd. Vrsud Bar J. C+ ilsud J+/Ja!a. I!'r's'ft Pr le't l*ci"ift
Att
's:
M'r':'t

)w
)

it
is FIGURE 2.I b

r: HTM 2.5

d.
 HTML
HTM 2.6 . Proiecl 2 ' Creoling o Web Site wilh Links

T1-

lntroduction to Links
'Web 'World
Millions of linked pages make up the Wide \feb. Hyperlinks, or links, -are
used to connect a Web f"g. to another Web page on the same' or a different,'Web
server located anywhere in the world. Links can be created to allow a visitor to navi-
gate to an atea on the same Web page, to another \7eb page within a'Web site, or to
In entirely different'Web site. Links also can be used to create an e-mail link easily.
Visitors to a Web page can have immediate access to another'Web page or a different
section of the same Web page by clicking a link. The power of the'Web centers on its
linking capabilities.
Yo1t.un use either text or an image as a hotspotfor a link. A hotspot is an area
of text or an image in which the mouse pointer changes when it is moved over the
area. GenerallS tte mouse pointer changes to a pointing hand when it is moved over
a hotsPot. This change
notifies the user that there
is a link from that text or
image. Additionally, text
links generally are under-
lined and different in color
to indicate their function.
Figure 2-2 shows a sample
of text used as a hotspot,
and Figure 2-3 shows a
$*4.,d t?sts* .a sample of an image used as
a hotspot. Moving the
mouse pointer over the
fiql:':s lilt*tatin* hotspot also displays the
URL to which you will be
!a*n & i!.ar4en moved on the status bar of
,...,r-- '-*---;.
:: :.' text link l':' the browser (Figure 2-3).

FIGURE 2-2

URL on
status bar

FIGURE 2.3
 q{
lnlroduclion to links ' HTM2.7
vr
o
E
G
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 give
$fioreVboar
the visitor the purpose of the link.
Linking Colors
Unless otherwise stated in the <BODY> tag, the color of text links use browser-
You con chonge the link colors
dependent defaults throughout a \Web page. The format of the tag used to change in populor browsers. ln
,ror-"1, visited, and active link colors from the default is <BODY LINK="color" Microsoft lnternet Explorer,
VlfNK=,,color" ALINK="color"> where color is a designated color code. Browsers you find color selections on
generally have a standard default color for normal links but different active and vis- the View menu using lnternet

i"ted link colors, according ro the browser used. The same color defaults apply to the
Options. ln Netscope Commu-
nicotor, on the Edit menu, click
border color around an ilage link. If the image has no border, no color will display Preferences. ln both products,
around the image. Table2-f lisrs the color control attributes that can be used in link- you chonge colors by clicking
ing. In Figure 2--4 you can see samples of text links in all three states (normal, vis- the color bors.

ited, and active).

Toble 2-l

. link color, withoul mouse over il or before hoving been visiled

r (onlrols fte rolor of o normol link fiot hos not been clitked
. Defoult tolor usuolly is blue
. Vhiled link
'/r.lNK
r (ontrols the rolor of s link thot hos been ditked 0r visited
r Defouft tolor usuolly is green or red
ALINI( o Aclive link
r (ontols the color of o link on whith s mouse hos been pressed bul not dirked
. Defouh tolor usuolly is green or red

Fe gS:':gr3+, gr' Fg$€rt&i::A{'b: ': I ,:

-E
:.:..'::'

64a:1.,,.;1:::la+wiid :
]s..::*i1.,:
::,-:.,t*it*,.;,.:-*dr@.':f{fam gge*r
.,
Fds
lE,
l*Ai
3 E
J V Fi&seefi h{at
fhafrH{e::
E ,' F6* ,
H
g*

normal
link

- r rtii iir;f LJ.r t t-n til[r'l

- visrted
r r! irrhti xnl: link

-.--.*'""""-Y}l

FIGURE 2-4
HIM 2.8 ' Ptoiect 2 ' Creoling o Web Site wilh Links

linking within q Web Poge

one section of the'web
Links within a page allow visitors to move quickly from
in large'web pages. Your visitor can
p"g;;; ;";ther. thisTs especially important through the
view the sections th^t-^r" of inr.r"r, iithout having to scroll entirely
commands or a table of
\reb page. Deuelop.rs ofr.,, t"" links within a Web page as

.."iririi. Vr"ny W"b O"t.r contain a list at the top of th" this proiect, youtowill
page that links other
create
sections within tt. ,r'-Jp"ge, as shown in Figure
2-5. In
;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

FIGURE 2.5

linking to Another web Poge within the ssme web sire

torllAboat The second type of link connects one web page to another
page-within the same
clicks a link on the home
HTilll Help Web site. Figure Z-A ,lro*, how these links woik. A visitor
page on the same'Web site
page of a'Web ,it. lligot. 2-6a),andmoves to another
Mony World Wide Web sites
provide Help for new HTML
"Ft-ffi i-etl.\r.b ri;;;;r.."ity use these types of links Lecause a Web site usuallv
from one'Web page to
developers. For more intormo- .-orirlr,, of multiple p"g.i, and visitors need a-way to move 'Web
tion obout HTML HelP, visit the another. In this pr.t.; t;; will create this type of link
to move from the Res
order link to
t o-. p"g. to th; S"-pf! Resume page. You then will
HTML More About Poge have a reverse
(www. scsite.co n / hlrr,l / to the home page'
more.htm) ond click HTML allow the visitor ro l-nou. from the-sample Resume page back
Help Desk.
 lnlroduclion lo Links ' HIM 2.9

ri"[t"
Web """in"t
page

Osdity Hedih C.r6 Worldwlr6

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

p!fl whoweare Where

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

A$hqttLSdtodc (Lslly tle.hi Cr€

r GURE 2-6q E| WdldYvide
; linked
p"s: i

i _i

--'Scienca & Technology -:

Above all, Abbott is a science compmy More thm 5,000 Abbott

scientists aromd lhe world re cornmitted to developtrg new health
cae technologies to irnprove lives Read on to leam more about out
approach io the science ofhealth cae for today md the future.
-

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

FIGURE 2.6b
 HTMt
2 ' Creoling o Web Site wilh links
HIm 2.10 ' Proiect

l,inking to Anolher Web Sile

.$reb to
is the capability of linking one \reb site
A very important feature of the
sites to sites elsewhere
another.
'Web
develop;;r-;r. these links ,o .on,t"t't their Web
containinginformationonthesametopic'Thesametagusedtolinkwithinthesame
You will i""tt this type of link in this
'Web
site is used to fi* io ."i.rr,"t \7et sites.
the student on rhe resume graduated'
project by linking,o it"rrrr*.rsity from which the other will link
you will create ,*o tlri"iio,t, of th" link. one will link from text;
clicking either the text link or the
from an image of ttr. rnlu.rsity (Figure 2-7a).
University Yrtb pug" (Figure 2-7b)'
image link takes ,fr. uJirot ,o th" P".trd.r.

FIGURE 2-7o

FIGURE 2-7b

I
 C\t
lntroduclion lo Links . HTM2.ll
lrJl
o
4
A.
linking to E-lhsil
'Web 'Web
A well-designed page always provides a way for visitors to contact the
developer. 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-8o

FIGURE 2.8b

Iturting 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

a Point to Accessories on the Programs submenu and then point to Notepad on

the Accessories submenu.

& Click Notepad.

HIM 2.12 ' Proiect 2 ' Creoling o Web Site with Links

,$ If necessary, click the Maximize button'

,,& Click Edit on the menu bar.
'WordWrap is not checked' click'WordWrap'
If
@
Thfrorrorrpod *in4ow displays (Figwre 2-9) and'Word\Vrap is enabled.

FIGURE 2.9

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

visitJrs can e-mail you directly from the initial page'

 Creoling o Home Poge . HItl 2.13
C\r

tJ
g
o
4
E
lntering lnitiql HTtll Togs
In Project 1, you entered an initial set of HTML tags. These tags define the
overall structure of a standard \feb page. The following steps show how to enter the
initial HTML tags.

., ':l
frnrat*r> rh"n press the .*r.* k"y.
'{J "nd
o
,o
Type <HEAD) and then press the ENTER key.

Type (TITLE)Web Res Home Page(/TITLE> and then press the EvrEn key.
,3) Type </HEAD) and then press the ENrEn key.

g Type <BODY> and then press the ENTER key twice.

i0 Type <i B0DY) and then press the rNrEn key.

t:O Type </HTML) as the final tag.

o Position the insertion on the blank line between the <BODY> and </BODY>
tags.

The HTML code dtsllals liigrr" 2-L0).

THL)

TITLE>tleb Res Hone Paqe</TITLE>

/HEAD>

/80DY>
/HT]'lL>

FIGURE 2-I O
 HTMT
HTM 2.14 . Proiect 2 . Creoling o Web Site wilh Links

Entering a Hecding
As discussed in Project 1, the <H1> tag assigns the largest possible size to a
heading. Recall that the alignment attribute with the tag <H1 ALIGN="CENTER">
will center the heading. Using the <FONT> tag can enhance the heading further. Any
text on a Web page can be altered to attract more attention with the beginning
<FONT> and ending </FONT> tags. Table 2-2lists the different FONT attributes
that can be used to enhance standard text.

Toble 2-2

(0r0R . (honges fie fonl color

. lJses color codes
. (honges fie fonl lype
. lf lhe user does not specifu o fonf, the texl displays in
the defoult font

stzl . (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 <FONT
COLOR=" "> with the color number code between the quotation marks. Figure
2-11 shows examples of some of these functions and how they affect the text.

FIGURE 2.I I
 ::lF::r:: ::=
(reoling o Home Poge . HTlll 2.15 :Fi:i:.:.::
-.1*.-...::.:::
.18 ::r.=
::j::
::!li-
:,lE:,=_:
'&::.:::
:E! :..1 , '

To Enter o Heoding

Click line 6 between

lhe <B0DY> ond <HTI,IL>
</BODY> logs, type <H1 <HEAD>
<TITLE>treb Ees Hone Page<./TITLE>
AL I GN:''C ENTER''>< FONT </HEAD>
<BODY>
C0L0R:"i1000066")Web <H-l ALIGN="CENTER"><FoNT C0L0B="$000066">lreb Bes<,/F0HT></Hl)
Res(/F0NT></H1> </BODY>
</HTHL>
ond then prers the
mrtr key.

You olwoys shou/d end the

iogs in the opposite direcfion
in which you storted lhem.
You storfed this /ine with the
<H7> fog, ond fhen used
ihe <FONI> tog. You ended
ihem the opposite woy, insei-
;ng </FONT> first ond then
</Hl > second (Figure
2-12).This fechnique is simi-
y lo moth equofions.

FIGURE 2-I2

Entering lext
In Project 1, you entered a paragraph of text using the <P> and </P> tags.
?erform the following steps to enter text for this \7eb page. lont Sizes
The font ottribufe used most
.O frequently is SIZE. The volues
ENTER TEXI
of font sizes ronge from 1 to
'With 7, with 3 being the defoult.
the insertion point on line 7,type (P)Resumes Unl imi ted, the premi er
You olso con specify the font
intennatjonal nesume writing company, has expanded to the tlorld size os o relotive volue using
Wide Web! Resumes Unlimited recently has formed a new divjsion o + or - sign. These relolive
called l,leb Res, which is the ultjmate resume writing service for volues ronge from -3 to +4.
the Internet. Web Res special izes in l,lor"ld Wr'de Web resume
creati on and publ i shi ng. Make your" resume i nstantly avai I abl e
worldwide....put it on the Web!(/P) as the first paragraph in the body.
Press the uNrln key.
O
-::e paragrapb displays (Figure 2-13 on the next page).
 HTMt
HIm 2.16 . Proiect 2 ' Creoting o Web Site with Links

l,ll>

TITLE>tfeb Res Hone Page</TITLE>

line 7 /HEAD>
BODY>
Hl ALIGH="CENTER"><F0HT C0L0R="*600866">t'teb Bes<1F0NT></H1>
p>Eesunes unlinited, the prenier international resune uriting conpan!' has exPanded to the l,lorld
line iOe fleUf Resunes Uniinitea recentlg has forned a new diuision catled l'leb Bes, which is the
uritinq seruice for the Internet. l'leb Res specializes in t'rortd t'lide t'teb re5une
11
iIir"i"."rur"
ion publishin6. ilake gour resune instantly auailable uorlduide_...put it on the tleb ? </P>
"no
</BODY>
</HTHL>

paragraph
tag and text

FIGURE 2.I3

Entering Bulleted lists

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

Toble 2'3

il <H2>0ur compony</H2>
t2 <Ul TlfP[=osquore'>
l3 <U>Founded in 1996 by Mork Mullet</Ll>
l4 <11>lleodquorlered in Seofl le, Woshinglon</[l>
t5 </uL>
t6 <H2>0ur services</ll2>
t7 <UI TlfPE='squoreo>
l8 <Ll>Web poge resums creslion snd publhhinq</Ll>
l9 <U>0nline dulobose of 1ob listings, for o voriety of tontocl ond full-time posilions</Ll>
20 </vL>

perform the following steps to enter the two bulleted lists that display on the
\Web Res home page.
 FI
Web Poge lmoges . HTm 2.17
H
o
e
I

To Enter Two Bulleted lists

''l) ll necessory, rlick

'-J llne ll.
TITLE>Neb Ees Hone Paqe</TITLE>
/HEAD>
HIt[ code
\rit
' Enler the BODY>
Hl nLIGH="CEHTEB"><FoNT C0L0R="S000066">t'leb Res</F0HT><1H1>
(Ioble 2.31.

<H2>0ur conpany</H2>
' r\
'.:./ Press the EilrtR key. <t L TYPE="square">
<LI>Founded in 1996 by l4ark HuIlet</LI>
<LI>Headquartered in SeattIe, t'lashington</LI>
The HTML code disp/oys
2>0ur seruices</H2)
(Figure 2-l 4). L TYPE="square">
second I>lreb page resune creation and publishing</LI)
bulleted list LI>0nIine-database of job Iistings, for a uariety of contract and fuIl-tine Positions</LI>
/UL>

/BODY>
/HTHL>

FIGURE 2-I4

" eb Page Images

You can use images in many ways to enhance the look of a \feb page. Images can be
used 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 help ffio${boat
clarify a point being made in the text or as links to other'Web pages. They also can
be directional symbols that allow the visitor to navigate through the'Web site.
HTtl Colors
Color is on importont ospect
of Web development. Visuolly
Clqsses of lmoges oppeoling Web sites otlroct
visitors. For more informolion
The two classes of images for'Web pages are inline and external. lnline imoges obout HTML color, visit the
are those that display on the'Web page directly, together with the text. Externol HTML More About poge

imoges are stored separately from the'Web page and are displayed only when the /
(www. scsite.co n / hl'r'l
more.htm) ond click HTML
r-isitor clicks a link to display them. The purpose of the'Web page determines which Coloring Web Grophics.
class 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 an
ixtension of .jpg, .jpe, or .jp.g. A JPEG (pronounced IAY-peg) is a graphic image that
is 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 balance
between image quality and file size. JPEG files often are used for photographs
because they support millions of colors. These generally are more complex images.
 HTML
HIIll2.l8 ' Proiecl 2 ' (reoling o Web Site with Links

you also can use Graphics Interchange Format (GIF) images on a web page.
GIF (pronounced
These are files with an e"t.nsio.r of .gif. A graphic image saved as a
jiff 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
-
mak-
files (called LZ'W compression), ho**.4 is patented, whichrneans companies-
to
ing products that use the GIF format must obtain a license' This does not apply
'Web include GIFs in their'Web pages' GIF images.dis-
tyii."t users or businesses that
pl"y on. line at a time when loading. lnterloced GIF images load all at once' starting
i"ir'fr blurry look and becoming sharper as they load. This-is a good technique.to
"
use for large images because the.-'web page visitor can see a blurred
outline of what is
to come as it loads.
The third type of image file is Portable Network Graphics (PNG), designated
with 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-
file
,r.t g."phi.r rtrndurd. fni pHC (pronounce d ping) format, also is a compressed
forriat'that supports multiple colors and resolutions. At this time, not all browsers
support PNG images.
If an image is not in one of these formats'
you can use a paint program to convert the
Toble 2-4 i-"g. to a Web image (.gif, .png, or .ipg) for-
mat. Many paint programs allow you to save
a GIF image as interlaced. A number of paint
ATIGN o (ontols olignment programs are available in the marketplace
. [on selecl from boilom, middle, top, left, or right ioday. Adobe Photoshop and Corel Draw are
AI.I . Alternolive lexl l0 dhploy when on imoge h being looded two popular Paint Programs.
BORDTR . Defines lhe border widlh
HTIGHT . Defines the height of the imoge lnoge Altributes
r lmproves looding lime Table 2-4lists the attributes that can be
HSPACE . Delines the horizonlol spoce lhd seporotes fte image from fie texl used with the <IMG> tag.
sRc . Delines the URL of the imoge lo be looded You will use three of these attributes in
. Defines lhe verlicol spate thol seporoles ihe image fiom lhe lext the <IMG> tags that you create in this proj-
ect. The SRC attribute is used to define the
\,SPATE

ttrl0TH . Dcfines the width of the imge URL that you want to load. The HEIGHT
. lmproves looding rime and WIDTH attributes will define the image
size.

$ficstAbor,rr
J i

Botkground lrnoges ,nserting BackgfCIufrd and Hcizontal Rule Images

to give
When choosing o bockground
In Project 1, you inserted a colored background and a default horizontal rule
imoge, do not select one thot
yo.r, YZ.b page more pizzazz.In this proiect, you will use the <IMG> tag to insert
overpowers lhe Web Poge.
Assure lhot the bockground i-"g., to f.".rr.d ur,h. background and horizontal rule. The two image files-that
imoge does not moke lhe texl you"*ill use are stored on the HTML Data Disk. If you do not have a copy of the
difficult to reod. The Worid
Wide Web hos o voriety of
i-lfVif- Data Disk, see the inside back cover for instructions for downloading the
Web sites with bockground HTML Data Disk, or see your instructor'
imoges. Mony of these requi'e
ihot you nome the Web site os
o source for ihe imoge. For lnserting o Bcckground lmuge
more informotion obout bock-
Yor'. use the BACKGROUND attribute to insert the background image on the'Web
ground imoges, visit the
page. The BACKGROUND attribute defines the source of the image' This
statement
HTML More About Poge
(www.scsite.co m /hlrr,l / i.li, th. browser where ro locare the image you want displayed.
more.htm) ond click
Bockground lmoges.

I
 C{
lnserling Bockground ond Horizontol Rule lmoges ' HIm2.l9
r
o
4
4

To lnserl o Batkground lrnuge

i\ Click imnediotely
-il to the right of the Y
in the <BODY> log on TITLE>tleb Ees Hone Page</TITLE>
line 5 to position the / HEAD >

insedion poinl
ond then press
rine 5

lhe srtclrm.
<H2>0ur conPanY</H2>
<t L TvPE="square">
<LI>Founded in 1996 by l'lark Hu1let</LI>
<LI>Headquartered in SeattIe, Hashington</LI>
t) Iype BACKGRoUND: </ UL>
\J "greyback.jpS" <H2)0ur seruices</H2>
<llL TYPE="square">
os the ottribule. <LI>tleb page resune creation and pubtisning</LI>
iliiii"iii*-o"tabase of job tistin!1s, for a uariety of contract and furl-tine positions(1LI)
</UL>
The HTML code disp/oys
</BODY>
(Ftgure 2-15). When dis- </HTHL>

ployed, the Web poge bock-

ground now hos o grey,
lightly textured /ook. FIGURE 2.15

lnserling o Horizontql Rule lnoge

In addition to the SRC
attribute, you will use the
HEIGHT and\7IDTH
affributes in the <IMG>
tag to insert the horizontal
rule image. Defining the
height and width of an
image helps the image dis-
play faster in the browser
because the'!feb browser
does not have to calculate
rhe dimensions. Most
paint programs will indi-
cate the height and width
of an image in pixels
(number of dots). You can
use the dimensions of the
image itself or alter these
dimensions within the
<IMG> tag. Define image
dimensions carefully. If
vou make an image too
1arge, it will look grainy,
eb as shown in Figure 2-L6.
3nt FIGURE 2-T 6
 HTMT
HTIvl2.20 . Proiect 2 . Creoting o Web Site with Links

@ To lnsert u Horizontol Rule lmoge

,l)
\r'
(lickimmediotely
to the right of the
</Hl > tog on line 5 ond HEAD>
TITLE>t'reb Res H0ne Page</TITLE>
lhen press the rtrrn key. /HEAD>
-tine B0DY BACI{cR0UND="greyback.jpg">
-
I O ALIGN="CENTEB"><F0NT C0L0R=.'S000066'.>Ueb Res</F0NT><./Hl)
GENTEB><IHG SRc="btuebar.jp9" HEIGHT=S WIDTH=500><,rcEHTER)l
>Eesunes Unlimited,-the prenier international resune uriting conpan!, has expanded to the trortd
i1)
\-/
Iype <CENTER) de lleb! Resunes Untinited recentlg has forned a neu diuision called l,leb Res, uhich is the
Itinate resume uriting seruice for the Internet. lreb Res specializes in ttorlO UiOe l,reb resune
<IMG sRC: creation and pubtishing- I'lake your resune instantly auailable t,orlduide....put it on the l,leb!</p>
"bl ueba r .j pS" <H2>0ur conpan!<,/H2>
<UL TvPE="square">
HEIGHT:5 WIDTH:5OO> <LI>Founded in 1996 bg Hark Hullet<,/LI>
(LI>Headquart€red in SeattIe, tlashington<,/LI>
</CENTER> os lhe log.
<H2>0ur seruices</H?>
UL TvPE="square">
The HTML code disp/oys LI>tleb page resune creation and publishing</LI>
LI>0ntine ddtabase of job Iistings, for a uarietg of contract and full-tine positions<,/LI>
(Figure 2-17). /uL>
</B0DV>
</HTHL>

i#asg I

FIGURE 2-I7

with this HTML tag, the height and width of this horizontal rule image are
enlarged slightly to make the horizontal rule more evenly dispersed across the \X/eb
page.

Copying ond Posting lext

One of the best features of Windows is the capability to copy and paste rext. You
can use the Copy and Paste commands to copy text from one area of a file to
another, which eliminates the need to type the same command twice. you will use
these commands to copy the horizontal rule image to another section of the \Web
page, resulting in a more balanced look. Because you have typed the image insert
command once, you can just copy it to another section of the file.
 (\I
lnserling Bockground ond Horizontol Rule lmoges ' HTIII 2.21
q
o
e
I

I To (opy ond Puste Text

Position lhe mouse

poinler immediotely
to the lefl of the <HEND>
(TITLE>tleb Ees Hone Page</TITLE)
<CEI{IER> tog in line 7.
highlighted
\ ltne / text

>Besunes Unlinited, the prenier international resune uriting conpang, has expanded to the l'lorld
,t) Drog through the > ide tleb? Resunps Unlinited recentl! has forned a neu diuision called l'leb Res, uhich is the
*r in the </(EllIER>
Itinate resune uriting seruice for the Internet. lleb Bes specializes in llortd t'lide l'leb resune
eation and pubtishinq. Hake qour resune instantly auailabte uorldwide....put it on the t'leb!</P>
<H2>0ur conpany</H2>
log. <UL TvPE="square">
<LI>Founded in 1c96 by Hark I'lullet</LI>
<LI>Headquartered in Sedttle, ttashington</LI>
The lext, <CENTER> < /UL>
< /MG SRC= "bluebor.ipg" <H2>0ur seruices<lH2>
<UL TYPE="5quare">
HEIGHT:5 WIDTH:5OO> <LI>tleb page resune creation and publishinq</LI>
(LI)0nline databdse of job listings, for a uariety of contract and fult-tine positions(lLI)
</CENTER>, is highlighted </UL>

(Figure 2-18).

FIGURE 2.T 8

,;\ clirk
Edir on rhe
e/ menu bor ond then
fie l gdl Sesch Eetg
{otg-
point to Copy (Figure
(HTT
(HEf *jlt -,_ Edit menu
(TII E4' cldd'{ /TttLE)
2-re). </HE
(B0t k'commino
Coov

c0

px €elel&ll the prenier internationat resune uriting conpany, has expanded to the t'lorId
dr Timg,l0ate FF inited recentlq has forned a neu diuision calted t'tet) Ees, uhich is the
seruice for the Internet. l,leb Bes specializes in l'lortd ttide l'leb resune
re; v Usd\#rnF . Hake your resune instantly auailable uorlduide....put it on the lleb!<./P>
H2) Setf${...
UL
<LI>Founded in 1996 bq Hark HuIIet</LI)
L I >Headquarte!a,l-g. in S9a!!:l e:.-. l',ashington</.!- l+:,i:. ::i.:::::::::.,:=:,-.., L::

FIGURE 2-I9

j'3\ Click Copy ond

lhen click line 22. rFl gdft ls|tl
<HTT
Selp

<
<TII
HEf
-qg-,Et'l.z
i,ri' ill-:: age</TITLE> Paste
+:{r iri+il
'?\ Click Edir on rhe
<1Ht
yrack . j pg")
comrnand

i/ menu bor ond then

<Hl
<cEt
(p>F $eb*lA[
::P-lEii"
--="-:--**.-_--
oNT C0l0F="il009066">+leb Re5</F0NT></Hl>
.jpg" HEIGHT=5 tIIDTH=500></cENTEB>
the prenier international resune uriting conpan!, has exPanded to the llorld
point lo Poste (Figure idr *----
Tire&ita f5 inited recently has forned a neu diuision called l'reb Res, uhich is the
rti ----- ng seruice for the Internet. lleb Res specializes in l'lor1d l'lide t{eb resune
2.20). rr Slcd\dep ng- l,lake your resune instanttg auailable uortduide."-.put it on the ueb?</P>
<H2) g6|isr|
<UL TYPE="squ
I>Founded in 1996 by nark Hullet</LI>
I>Headquartered in SedttIe, tlashinqton</LI>
UL>
2>0ur seruices</H2>
L TYPE="5qudre">
I>tleb page resune creation and publishing</LI>
I>0n1ine database of job listings, for a uarietg of contract and full-tine positions</LI)
IUL>
( line 22
/BODY>
/HTHL>

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

;) Click Poste ond then

-'J press lhe EilrER key. HThL>
<HEAD>
IITLE>tleb Bes Horne Paqe</TITLE>
The HTML code disp/oys with HEAD>
<B0DY BACKGB0UHD="greyback. jpg">
the posted lext (Figure 2-21). <Hl ALIGH="CEilTER"><F0HT C0L0R="S008066">t',leb Res</F0HT></H1>
<CEHIEE><IHG SBc="bluebar.jP9" HEIGHT=S l'IIDTH=s0o></CEHTER>
<p>Eesunes Unlinited, tne Ii'Enier international resune uriting conpany! has expanded to the t',orld
iOe UeOt Eesumes UniiniteA recently has Forned a netu diuision called l'leb Bes, uhich is the
iiir"i".urur* uriting seruice for the Internet. l{eb nes specializes in t'lor1d t'lidP l'leb resume
[ion publi5hin6. Hake gour resune instantly auailabie uorlduide....put it on the t'leb?</P>
"no
2>0ur conpang</H2>
TYPE="square">
I>Foundedin 1996 by Hark l4ullet</Ll>
I>Hpadquartered in Seattle, t{ashington</LI>
IUL>
H2>0ur seruices</H2>
(UL TYPE="square">
(LI>l,leb page resune creation and publishing</LI>
ii>onrihe"oatabase o€ job listin!s, for a uariet1t of contract and full-tine positions</LI>
HTEE><IHG SBc="bluebar.jpg" HEIGHT=s t'IIDTH=50S></CEHTER>
pasted
</BODY> line
<lHTlll>

r:=::=:r:-:-:t::i=:-:.:i::-.:-::.::=q-:::,:!:

FIGURE 2.21

\,
- dding a Link to the Second Web Page
'Web 'Sfeb
As discussed in Project 1, a site is a collection of pages created and main-
tained by a group or individual. One link used frequently in \feb development is a
link to another Vr.b p"g. within the same'Web site. In this project, you will add a
link from the \feb Res home page to a Sample Resume page.
The <A> and </A> tags are used to create links. This often is called the onchor
lVeb page, which is
tog because it is used to create anchors for links within the same
diicussed later in this project. Table 2-5 shows some of the attributes associated with
the <A> tag and their functions. You will use the Hypertext REFerence (HREF)
'Web 'Web
attribute r; link to another page within the same site. HREF indicates the
name or URL of the file to which the link points. You will use the HREF attribute
most often together with the <A> anchor tag in HTML coding.
You will .r.ed t*o items to create a link to another Web page: the text that will
serve as the hotspot, and the name of the file to which you want to link. In the next
steps, you will define these two items.

Entering the Text ond lags for

Toble 2-5
q link to Another Web Poge
Now you will enter a pangraph of text and
Ser lhe size of fte shope using pixel or percenloge len$hs
select a word or words within the paragraph to use
c00RDs

HREF Defines fte URL of the linked poge as the hotspot. Your selection should immediately tell
'When
I{AMT Defines on onchor the'S7eb page visitor the purpose of the link.
the link on the home page is clicked, the browser will
RET Forword link rypes
display the Sample Resume page. Because this text is
Rtrt Raverse link types
in paragraph format, you will use the <P> and </P>
TANG$ Delermines where *e poge will displcy tags, as discussed in Project 1.

L
 C\l
Adding o Link to the Serond Web Poge . HIM 2.23
r
o
e
CL

To Enter the Text ond Togs for o link to Another Web Puge

i) Wirh rhe inserrion

\-// poinl on line 23
<HTHL>
iust before lhe <HEfiD>
<TITLE>tteb Res Hone Page</TITLE>
</B0DY> tog,lype </HEAD>
<B0DY BnCEGn0UHD="gre9back. jpg">
(P)To learn more <CEHTEB><H1><F0NI C0L0R="fl008066">tteb Res</FoHT></H1></cEllTER>
GEHTER><Il,lc SRC="blupbar.jpg" HEIGHT=5 tIIDTH=500><ICEHTEB>
about servi ces that <P>Resunes Unlinited, the prenier international resune ruriting companU, has expanded to the l,lorld
r{eb Res can provi de, ide tteb! Resunes Unlinited recpntlg has forned a npu diuision called lleb Res, uhich is the
Itinate resunp uriting seruice for the Intprnet. I'leb Res specializps in {,lorld llide lleb resune
:l ease browse our reation and publishing. llake gour resume instantlg auailable uorIduide.....put it on the tleb!<P>
H2>0ur conpang<,/H2>
sr'te or cal I us at (UL TVPE="square">
I>Founded in 1996 bU Hark ],lullet</LI)
(206) 555-1Web. LI>Headquartered in Seattle, lrashington<,11I>
rrevi ew our l,leb page H2>0ur seruices<,/H2>
UL TYPE="squarP">
resume sample.(/P) ond LI>treb page resune creation and publishing</LI>
LI>0nline database of job tistings, for a uariety of contract and full-tine positions(/LI)
lhen press the nrtn key IUL>
(Figure 2-221. DENTEB><IHG SBc="bluebar-jpg" HEIGHI=5 ITIDTH=508><,/0ENTER>
P>To learn more about seruices that tleb Ees can prouide, please brouse our site or call u5 at
206) 555-ll,teb. Preuipu our l,leb page resume sanple.</P>
Q"it-1' lBODY> new
/HT]IL> paragraph

:s € s # i!ffi€,S:tt#r'{

FIGUP.E 2-22

Click immediotely
before the s in HTHL>
somple on line 24. Type <A HEAD>
TITLE>treb Ees Hone Paqe<./TITLE>
-REF:"sampl e1. htm") lo /HEND>
B0DY BACHGR0UHD="greyback. jpg">
creole lhe Iink destinolion. Hl ALIGN="CEHTEB"><F0NT C0L0R="*000966">ueb Res</F0NT></Hl)
<cENTER><IHG SRC=..btuebar.jpg" HEIGHT=5 l,tIDTH=500><,/CEHTEn>
<P>Besunes Unlinitpd, the prenier international resune uriting conpany, has expanded to the l,lorld
l,lide tleb! Resunes Unlinited recpntlg has forned a nelr diuision called teb Bes, uhich is the
ultinate resune uriting spruice for the Internet. l,leb Res specializes in tlortd l,lide l,leb resune
l-;\ Click immediorely creation and publishing. l4ake !our resune instantl! auailable uor1duide....put it on the t'leb!</P>
€/ ofter the e in
<H2>0ur conpany</H2>
<tlL TVPE="square">
somple. Type </A> to end <LI>Founded in 1996 b9 Hark Hullet<.rLI>
<LI>Headquartered in Seattle, l,ashington<,/LI>
lhe tog. </UL>
<H2>0ur seruices<,/H2>
<UL TVPE="square">
-^e HTML code disp/oys <LI>Heb page resune creation and publishing<1LI>
<LI>0nline database of job listings, for a uariety of contract and fult-time positions<,/LI>
= gure 2-23). </UL>
-'e </A> tag I<cENrEB><fi'rc SRC="bruebar.jpg" HETGHT=5 t'TIDTH=586><,/CEHTER>
new 1<P>To learn nore about seruices that tleb Res can prouide, please brouse our sitp or call us at
{.^--, --- -,, - Preuieu our l'reb page resune <A HnEF="sanpte1.htn">sanpte</A>.1</P)
-Jrcoles the end, oaragraph (206) 555-1lteb-
i </BODY>
- ihe hofspol fexf. (,/HT t4L)

text used end of

for link link

FIGURE 2-23
 FI
Adding on E-Moil Link ' Hllll2.25
g
o
4
L

Soving and Printing the HTtll lile

you should save the HTML file and print it. A printed copy of the file also is
important for your reference.

_.,.i,.,,'..
i I ) Insert the HTML Data Disk in drive A. If you do not have a copy of the
v HTML Data Disk, see the inside back cover for instructions for downloading
the HTML Data Disk, or see your instructor.
2) Click File on rhe menu bar and then click Save As. Type webreshome.htm in the
E/
,
File name text box. If necessary, click 3r/z Floppy (A:) in the Save in list. Click
the 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/7tw
</w>
€ODt Xt(Gm'9tr.i&e}, JPg">
c1 Er*"cm"i<rcr orc"toooo65"# b.</w/sl>
ffiffi rc"b1u.b.!.Jtt9" Etffi5 ffi500x/ffi
<l&!rct oarlt d, a pic.ler irailtao[t latr Eltlng a4)ayt w
e.nd.d b & htld ri& n bl b.E hlirit'd @!t.ly htr tod ' d
oflirrii -ru kb br, dd 1r fr ulthb ldq El6at Frlo tor tu
;;;;, t b E 4*1rtiz.! It b!1d lld. t b t"l. ct€tld rd r8blrtbinE'
hr. t; rorn talatty tYtlbl rctwt&. . ..98E tt @ tnt ;&!</D
42tu qctf<lE2>
&Wi.qlnr>
sl>?ou!d.d h 1996 W wb HL.t</u>
<I*rd4ur6!d h bttL.' ft.btryb?Lt>
<lw
&tu..nLa.</P>
@ gw".q8d>
<DfrO prg. sdD cnltid &d ltrtblttbi!{</U>
<infr.r-at U.. ot js 1i.649., to! r ruhty of cdE&t rnd dl-tu
t ridelLt>
<lw
<dww ap"bruss.JPg" Er&5 Ew5ooxl@
<86 hm Dt. rbout t.rlo. tb.t kb k @ Ptdi&, P1..s brdr or tib
o! 411 u. rt (205t 555-1hb' ?wb @r 16 I[9o tgm q
eF"t -tI.1.bb"iq,L*/D' <lb
<D!.flil yo6 ildb b s .t 4
Ets"Dt1-b:Eb!..€i.P'cd">r.bt .€ La. dl>.</>
<lfiD
</w

FIGURE 2.25
 HTML
HTM2.26 . Proiect 2 . Creoling o Web Site wilh Links

ffi*rs)Aboar
iewing the Web Page and Testing rhe Links
Web Poge lesting
'Web
An importont port of Web Just as in Project 1, you should view the Page using a browser. It also is impor-
poge development is testing tant to test the links to verify that they function as expected.
Web poge links. For more When the home page displays, you can click the e-mail hyperlink to verify that
informotion obout link testing, it works correctly. You also can test the link ro rhe second p"ge by clicking it. the
visit the HTMI More About
poge (www.scsite.com/
second \web page, samplel.htm, will display, although it is not completed. In the
html,/more.htm) ond click rernainder of this project, you add other features to samplel.htm to create the \Web
Web Poge Testing. page shown in Figure 2-1b on page HTM 2.5.

Start your browser.

J)
,E If your browser window is not maximized, click the Maximize bufton.

o Click the Address bar.

o
(9
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
% l?Ji?l'J" -
ResrxnEs Unlunited, the premier intemationai resrme uuhrg corrpany, Resmes
has E;Ta,ded r.i the Vrorltl Wide ltrIeb I
t-
lTrrlmted receltly lias lomed a neu' dirisron rallerl Web Les. wturh is thr ulhmate resme mh4g semce for the Intemet.
rMide I
Tleb Re:r str,ecralues n trrdd $Ieb resmre creatron m,C publislmg. Make you rsurnr mstmtly auailable
r
-$,Irb
wrrrldmde. . put it on the I
l
lr
Our company 1[:
s

home page
. Fourded in 1996 by L,{ak- Muller changed
+

r Headquaterud n lieattJr, Wasirqetrn bullet types 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 ttpes

horizontal
rule 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 ou
lrleb page resmre :.u'j d
text ltnk tO
second oaoe
I-rnil votr . offienls to ur at ,, .' r -.jJ!.j __,'11
h
Dre "
hry rlornp*er
=g
etntl: : dE €j # S W e-mail I pare
: link .--:-

FIGURE 2-25
 Viewing lhe Web Poge ond Tesling lhe Links . HTM 2.27

This 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 will
link to the sample resume on the second'Web page. The second hotspot is the e-mail
address, [email protected], and will link to a New Message window. Before testing
the 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 Res

Rmumfl Unlirnite4 the pmis int€rf,rdoml r€sumc witing mmpmy, hs exped€d io th€ wtrld wid€
W€bl Reruncr Unllmlt€d r€e€ntly hu fonncd a nw divirim mlled web Rs, whiah i. th€ ultimst€
rgrun€ wrlthg r&ai€o for the ltrhmot. W€b Rer rpocirlirer in World Wido Wcb mure ereatlon ald
publlrhlng, Mlk€ your r€sune iffhntly rv.ilable worldwide,,,,,pul it on thc w€bl

Our company
r Foundod ln 1996 by MadcMullot
I Hcadquart€r€d in Scattl€, WarhtnSfon

Our senlccs

I W€b p&8€ rB6umo orsetion and publbhing

I Online dihbas€ ofjob lirtiogr, for r vriety of ertnat md full-titn€ poritiotr

To lc6rn morc Ebout r€rais$ trEt Wob Rr6 em povid€, plilr€ brcwr€ our rite u crll u * (206)
555-lWob, Preview our W€b peg€ rsum6 saople,

E-mall yaur eonnents lo w at $ebre\,qqi t om,

FIGURE 2-27

Perform the steps on the next page to test the links in the'Web Res \feb page.
/'
. HTML
2.
I
I

HTM 2.28 Proiect (reoting o Web Site with Links

ll

To Test the links

t-)
\J
Point to the e.moil
link,
[email protected].

The mouse poinler chonges

fo o pointing hond (Figure
Ilnllmted, tie prerrier intemational reswne mhrrg compaay, has e;,amded to the -$,Iodd lyrde
Resumes
Web I Resmres
2.28). UrJ:tlted
recentJy has fbmed a neru diviston called Web Res, wllch is the ultimate resxne wrihng seruce
for dre Intemet
Web Res rpecialter n \llorld lfrde V,leb resme creahon ard publishing. Make yo,r resme qrsimtly ava:jable
-rorlJude. put rr on the lHeb

Our company
Forurded n 1996 by Mah Muller
'.
Headquartered in'jeattle, ltrlashingt+n

Our services
. $leb pa€e reswe creatic n md pubJrshrg
r Online database oflob hstrgs, ftr a vuieff oiccntract md firll-hnre poslhons

To lem rnore about serrices that Web Res cal prodde, plea:e browse au. site or call us at
l.t'leb Prenew orr
'\IIeb {206) J55-
page resurae srnple.

e-mail
E-rrad you cofimEnts to us at lin k
t:J
$!tqtJ:: # q # S iJ €l4e8ry,ryqioe liE1,/.sF""H*p"s.. 1i5ffiffi-l,s#rd. f,

FIGURE 2.28

I Cliclr
[email protected]. I iiii
i-+'-;
Be* Home Page - Microroft lafernft.ExDlerdt

i*l ge..i E.
---le -
i:.i=:it=i i'.:Bjj:

;tr
: s l-€-= G
A New Messoge window l .q+:
jed*€*JES Ft]et--4tglJ"*"t lpth lrrsm d"lp
disp/oys (Frgure 2-29). The
ESend G Ev @ '"_rr,,'* E
oddress, [email protected], ffi!--
Resmes
disp/oys in the To texf box. Uflrmrter
WEb Ret €{E€::J
€€[email protected]
- .::'-:':: i: ,.:i,r:' :1:r: | ,;-;.
address jn
To text box
1;:i;:,it. r
sl Resmes
Intemet

p6fljpi4 G':EE1= ;,:,:: I -.:r:::j j:r.

tliai i,-:i lri :-':i i: : :,,i r -
Our r

rFr
.Hr

Our s

r\il
.Or

T+ leam
Preview ow
]ff"1"

E-mai you rorffients to us at

rril
&g,g Re* Hm Pnge,

FIGURE 2.29
 (\I
Viewing the Web Poge ond Tesling the Links ' HIM 2.29
H
o
E
4
;\ Click the (lose
e) bufion in the l{ew
frlessoge window.

o With rhe HTilIL Doro

Disk in drive A"
point to the link, somple.

The mouse pointer chonges

-o o pointing hond (Figure
2-s0).

FIGURE 2.30

fiatlAbout
E-tloil links
Although it is not common,
you con ossign more thon
one e-moil oddress lo o
moilto: log. Use the form
" moilto:[email protected],

[email protected]" in the
<A HREF=> tog. Some older
browsers moy not support this
tog.

continued on the next page)

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

Cllck somple.
@
The sompleT.htm poge dis-
ploys (Figure 2-31). This Web
poge is on HTML documenl
creoted for you ond siored on
Marie M. Santos
the HTML Doio Disk.
110 Mwew Street
I second Scherenille, Indima 46375
page prior to /)1qr 555-?51fi
'enhancements
smtosm@jsp. cam

Objechve: To obtm a progrmer/malyst positron utl a progresslve compmy that recognizes the potential md advmced
uses oftechnologl.

Summary
COMPUTER TECHNOLOGY professional mth fou yetrs expeflEnce ratr€ing from system softwue development to
techrucal 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+llEge

Experience

PURDTIE UNIIERSITY, WestLafayette, IN 1996 - Present

Lab Consuitmt/Ilelp Desk Coordnator, Computlng Semices
Responsible for main cmpus computer laboratory operation, schedulirg student workers, aswering student softwae
queshons, 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 softrvre
improving student worhers' Frowledge md produchuFy

INIERNATTONALBUSINESS I4ACHII'TES @M, Chicago, IL 1995

Accowt Systems Eng'ineer/Co-op Posrtion
Responsible 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 increased
yedy revenue by 20%.
. Received IBM Mems Seruice Awud for cust+mer satislaction with midrarge system upgrade installailon project.

PRiIRIE STATE COLLEGE. Chcag+, IL 1994 - 1995

Ofi ce Assrstmt, EngJrsh Depat-htent
B.esponsible lor vrious adroistratiye Frctions includirg reseuch, reception, mswering telephones, secretaial, ad word
Frocesstrtg. lrouded suppor-i fbr secretary ad Erghsh deparlmetrt

. Supemsed the nstalladon of new systEm softwde updates improving efficiency md effectiveness
r Updated the student database md coordinated the ma:Jug olthe dEpart'netrt newslettEr'

Hardware Skills
IBM PC md compatibles, Apple Macintosh, IIND{ systems

Software Skills N
.filindows
IIIML, Microsoft FrontPage, L,[crosoft Intemet lrfomation Seruer 4.0, $lmdows, ]:llf Seruer/Vlorkstation, :

Microsoft Ofice Professional. Visual Basrc 5, C+, Visual l+/lava, Lfrcrosoft Project, Mcrosoft Access, Mcrosoft ,

PowerPoint

FIGURE 2.3I

I
I
I
4
 FI
Editing the Second Web Poge . HTM 2.31

o
&
CL
Once you have veri-
: - r:rilt the two links
.. scroll through the
--_:re1.htm Web page to
. .'.' tis appeafance. In the
iving section, you will
,l'farie.'lL ^\krrfas target
named top

:: .rnks within the sam- 110 lt{umerv Street

- :-.htm page and a link Scheren'r11e,

(2
Indraa 453?5
19j 555,2:,1 l
- .rother \7eb site. i :i : rllrAr i 'j

a Objettive: To obtat a progrmet/melyst posrhon with a progres slre . nmpaq' that recogryes the p otenhal md advmc e d
uses oftechnol+6r

Summary
Second Web Vage COMPUTER 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, <lqgnoshcs, rchedulrrg,
nterpersotral relations, diectug others wbrle promotulg a spnt ofpartrrer shp wth studetts, F,eer3 dd support groups.
. -.= samplel.htm \feb
::- has been created for . f.;]u!s
' $s1lr5111; links to
i and stored on the . Itqlir *.,:
r S,riirr:r:
targets
-. . \lL Data Disk. lt is a
,.:rple of a resume with Education target

. - previously discussed . B S. n Computer Technologr, I'[ay 1 999, I r:.l,rt''rirr.:, r. :,,

::::ures, such as an e-mail . A S ir Teclaacal Wrinq, D:cember 1996, Praine State Coilege

:<. headings, and bullets, links to other

Web site
. :.ady in place. Experience target
In this section, you
-ll enhance the text by PLIRDAE ANII/ERSIflI. WestLal-ayette, IN 1!96 - Preserrt
.:.ling bold, italics, and Lal Cansakmt'4telp Desk Coatdinaur, Conqatiag Senices
Respoosrble for mm cmpus coeputer laboratory oFelahoi, schEdultr€l jhldent wDrkerr,
- -or. You also will learn es6'eilIg sbdent softwtre qrEshons, md proudug teclucal support
-. ,\\'to insert an image
r Inprored sfudent satirfachon by prnu,Ju1g iecbdcal assistoce lor a rmetsy of hudwre
::d wrap the text around .
md soffrae rsues
DesignednewrepoftuigmetlLodolosrthatensuedrompltmceuathdepar-tlerta.iqrralrtyaltrr.orrement+bjerthres
:. \bu will add two other . TlajnEd gfudent workers on Heip Desk rrd rjomputer usE qtlt contEatratlan on oFrratlord md lysfsril s.ftrtre
mFrormg student worl,.ers' Loowledge md produ.butlr
:-. res of links within the
:-.ne \feb page and to
IN?-ERNATIONAL B ASINESS $LACHINES //dM,l, Chcago, tr- 1!95
.:other \feb site. Finally, Arcount S!\kN Etgineerto+p Posidon

'u rvill link the image

Responsible for techniaal sales asrstdce ald .ust(rner tEchniaal suppsrt for lhe rldrr,ge llrtomer base

,:d the text. r Soldmdnstalledoultrplerru&dEesYsteIrluFgra'lesbasedonarmalysrsofsa4gmdgroq4hnee.:lstlatncreased

yedy revenue by )00/o
The browser in Figure r RereivedIBh{I{emsSemceAwa,lf+rcustonetsahsfictionwiftrrcimge3yitemuFEradenstallafiorproject

---i1 displays the current

.:mple l.htm Web page. PRAIME STATE COLiEGf,. Chicago. IL 1!94 - 1995
\Web page with Office Assistml Engilsh Depadwnt
- re same Rrsponsible for vmous admmstrative Fmctions rrcluding reserch, reciptlon, msvrerig telephones. searetmal, dd wor,l
pr+cess$E Protided support lor seDrEtary ild Er€lsh depal1lnerlt
::hancements is shown in
:'.eure 2-32. r Supemsed the nstallahofl ofneq' system softwtre upilates ffiprowg efficiency ard effectiveness
r UFdatEdthestudeotdatabasemdcoordnatedthemalngoftledeFarhreotnewslrtiel

i.l l"ll

Hardware Skills target

IBM !C m.l tornpatrbles, Apple ldacmtorh, TIl,Tf{ rystrmr

Software Skills target

lfIML, Mlcrosoft Front!age. Microsoft Intimet lnJormah.n Setrer { 0, $Iurdt,ws, $Iildaq,s NT SEtrEr/Workstahon
Mcrosoft Oflice Professi+nal, Vtstal Bartc 5, {l#, l,tsuai J#/:Iata, }.rlr'rosoft Prolect, Mcrosoft Access, lvlirroslft
Power!o8l
lin k
l.'rt: to top

igl M9 f!6eula
FIGURE 2-32 :S &-::4 -€ l :=li+fit€-rGFFi

lt
 Creoling o Web Site with Links

Perform the following steps to open the samplel.htm file in Notepad and edit
HTML file.

i,0 (jiif:ii 'ili lifilllt, ,rtitrir

Click the Notepad button on the taskbar.
O
,2) with the HTML Data Disk in drive A, click File on the menu bar and then
v' click Open.
If necessarg click the Look in box arrow and then click 3lzFloppy (A:).
O
*f) Ifnecessary, click the Files of type box arrow and then click All files (".").
v Click samplel.htm.
Click the Open button in the Open dialog box.
O
The first 35 lines of the HTML code for samplel.htm disptay (Figure 2-33).

Hl ALI0H="CEHTER">Harie 14. Santos</H1>

<CENTER>110 Huiruieu Street<,/CEHTEB)
CEilTER>Schereruilte, Indiana 46375</CEHTER>
cENTEE>(219) 5ss-2s10</cEHTEB>
CEIITER><A HREF="naiIto :santosfflisp. con">santosr*!isp. con</a><ICEilTEn><./p>
CENTER><IHG SRC="b1uebar-jpg" HEIcHT=5 l.flDTlt=S06></CEHTER>

>Objectiue: To obtain a progranner/anaust position uith a progressiue conpang that recognizes

lirst e potential and aduanced uses of technologg_</p>
35 lines of
HTML file <H2>Sunnarg<,/H2)
<P>C0I4PUTEE TECHN0L0GY professionat uith four gears experience ranging fron slsten softuare
deuelopnent to technical support. strengths include probten sotuinf aio anatglis, oral and
uritten connunications, diagnostics, scheduling, interpersonal relitions, oiiectinq others uhile
ting a spirit of partnirship uith sturtenti, peers and support qroupi_</e>

I>B-S. in Conputer Technologg, I,tag 1999, purdue Uniuersit!<,/LI>

I>n.S. in Technicat tfritinq, Decenber 1996, prairie State College<,/LI)
</UL>

<H2>Experience<,/H2> T
<BR>PUEDUE UNIUEBSITV, l,lest Lafagette, IN 1C96 - present -L
<BB>Lab Consultant.rHelp Desk Coordinator, Conputing Seruices
<BR>Responsible for nain canpus conputer laboratory operation, scheduting student uorkers,
ing sttrdent softuare questions, ano prouiding t;chnical support_

FIGURE 2-33

Adding Bold lo lext

You previously used the <FONT> tag to alter the appearance of text. A number
of other tags can be used to format text as well. Table 2-6 shows some of those
formatting elements. Figure 2-34 shows a sample \7eb page with some of the text
format tags.

|l,'
 c\a
Editing the Serond Web Poge . HIM 2.33
r
o
4
4

Toble 2-6

<g> </B> (reoles bold lext

<BlG> </BlG> lncreoses the fonl size in comporison lo the sunounding lexl

<B[OTKQUOTE> </BtOO(QUOTE> lndenls morgins on seclions of lext

4> </l> holirizes lexl

<PRt> </PRE> Supporls prefomoiled moteriol

<5MAIb </SMALL> Decreoses fie fonl size in tomporison lo lhe surrounding lexl

<STRIKb </STRIKE> Slrikes firough iexl

<su8> </suB> Suhsaipts lexl

<sub </suP> Superscripls lexl

<TT> <nT> Dhploys teleffpe or monospo(e texl

<[J> </u> lJnderlines lext

Iesf Farnr*Jring Fr€*

l::; rs nomal tert mth no fomatnng

lhis is bold text <B> bold text

This is BIG tert <BIG> BIG text

For lomattrlg entire sections of tett, you cm use other tags. Blockquote sets of a section of text ndentrrg the
left md nglt mrgrs. Pre-formatted tert mmtms ix ongnal line breaks and spactlg <BLOCHQUOTE>

--:r-,1:----J r--r /T\ italicized

-..-
text BLOCKOUOTE

: te>n with a sub-^*-, <SIIB> versus text wilh a superscflFr <SIIP,

surr!r

strikethrough
ffizctghtc<r <STRIKE>

13 teletyFe or monospace cext (TT)

underlined
: underlined tert <UL> text

i:r::-.:ta.=1:=.:

Ter[ For*rtttirq lrur,

Wxr*)Abozt
FIGURE 2.34
Texl Jormotting
Strikeout lext can be used to indicate changes to information. Strikeout also is You con indent entire blocks of
text by using the <BLOCK-
.-..1 to indicate sale, or slashed, prices on a company's Web page. Underlining text QUOTE></BLOCKQUOTE>
- . r helps to emphasize it. Links almost always are underlined, so be cautious with togs. Bolh lnternel Explorer
.:erlining nonlink text. Monospoced text is used to indicate text that you want to ond Netscope Communicotor
- .:rnguish from the normal text. The BIG and SMAtt tags also are used to change the indent lhe text on eilher side
by 40 pixels. You con use <P>
-:.-: size relative to the text around it. Subscripl and superscript are used for text that
ond <BR> togs within the
- -.i be placed above or below the normal text. blockquote togs lo control line
breoking within the text.
HTM 2.34 . Proiecl 2 . (reoling o Web Site wilh Links

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

To Add Bcld to Text

ir\ ClickimmediotelY
\Y ro the left ol the o <HTHL>

in 0biective on line 15. <HEND>

<TITLE>sanple Resume<,/TITLE>
Iype <B> os lhe log {Figure /HEfiD)
B0DY BACKGR0UHD="gre!back -jpg">
2.3s). P><Hl ALIGH="CEHTEB">Hirie il- santos<1H1>
Huiruieu Street<,/CENTEE>
(CEHTEF>116
<CEHTEB>Schereruille, Indiana 46375</CEtITEE>
<cENrEB>(219) 555-25-t0</cEHTEB>
iiEHfti>ie HiEF='.nairto:santosrEisp.con">5antosfilisp.con</a></cENTER></P>
line 15
ER><IHG sRc="bluebar-jpg" HEIGHT=s t'TIDIH=506></tEHTER)
that
<P><B>0bjectiuel: To obtain a progranner/analgst position uith a progressiue conpany
;;;;;;i;;; ine 'potentiar and ;du;nced uses or technorog1t'</P>

FIGURE 2.35

ir\
\7
ClitkimmediotelY CEHTER>110 Huiruieu Street<.1CENTEB>
ro the righr of <CENTER>Schereruille, Indiana 46375</CEHTER>
(cENTER>(219) 555-2516<ItEHTER>
lhe last e in iiiHrre>ie HiEF="mailto : santosr*!isp - con">santosrEisp'con<1a><'/cEHTER></P>
Obiective on ' l'n"t?. . <cEHTEn><IHG SBC="bluebar-jpg" HETGHT=s IIIDTH=s00><',/cEHTER>

line l5 ond <P><B>0bjectiue</B>: To obtain.a pto9t11Tt{1n:1fl^ry::t}9l.uith

a progressiqe conpanu that
ecognizes the PotPntial an d aOuanceO uses of technologg'</P>
then type (/B) rinele.

os lhe ending log. H2>sunnarg<lH2

i;;ilffiili;n-iacHn0l0cY<lB> proressional uith rour gears experience ranging rron slsten
tuare dpuelopnent to tecnni[;i;;il;;i. iirengths incrude prouren soruing and dnalusis, oral
interperionar..::l::r::::^ltiectins others
uritten connunications';i;;;";ii;;' icneourins'
it:';;;il.;;;";";;;;i; ;; p"'in*isr'ip''itn stuoeiis' peeis and support sroups'</P>
RePeol StePs I ond
'i/,l l
1
2 ro bold coIrlPUrER
iile-s. in conputer Technologg' Hay 199c, Purdue.tlniuersitg</LI>
IECHIIOLOOY i;;;.i: i; ie"hnicar t'triting]-6ece-nber 1ee6' Prairie state colrege<llI>
on line 19 ond ' -rne31 '

<H2>Experience</H2>
PURDUE - Present
iin>ieipunnur uHIUEnsITY</B>|, ltest Lafayette, IH,1996Seruices
UNIVERSITY on line 31. igR>Lab consultant.aHelp Desk Coordinator' Conputing
i;;;;;;p;;;i;i" ror t"in operation' scheduling student
""tput
student softuare "otput*r'raboratory
qirestioni, and prouiding technical support'
"nir"iiirq
The bo/d iogs surround lhe I
word, Oblecftve, on line 15, 151"*pr"r -ilorEpad tls{*iBnPrqFetdt-.{
COMPUTER IECHNOLOGY
on line 19, ond PURDUE FIGURE 2-36
UNIVERSIry on line 3i
(Figure 2-36).
 Gr[.
Editing the Second Web Poge . HTM 2.35 l-+::-."':
Iil,: : :"
.1.|:.. . :
{3. ,,,:
E
r'
Adding ltolirs to lext
To give the resume a polished look, some of the text in the Experience section of
the resume should be both bold and italic. The following steps use the <I> tag to ital-
icize keywords.

To Add ltolks to Texl

(llck innedlotely
to the right of the
<Hl ALlGil=oCEllIERo>
log on llne 7. Iype <t> ot
lhe tog.
><Hl ALIGH="CENTEB"><I>Harie 14. Santos</I></H1>
<cEHTEB>110 Huiruieu street</cEHTER>
Schereruitle, Indiana {6375</CEIITER>
<cEHTER>(219) 555-2510</CENTER>
Clitk imnedlotely to <CEHTER><A HREF="nailto :santosn$lisp. con">santosr*!isp. con</A></CENTER></P>
the right of Sontos <cEHTEB><tt'lc SRC="bIuebar.jpg" HEIGHT=5 tIIDTH=500X,/CEHTEE)
on line 7. Type </I) os lhe ><B>objectiue<IB>: To obtain a proqranner/analust position uith a proqressiue companq that
tog. ecognizes the potential and aduanced uses of technologg.<./P>
<H2> S unna r! <l H 2>
(P><B>C0iIPUTEB TECHII0L0GY</B> professional tuith four years experience ranging fron sgsten
softi,rare deuelopnent to technical support. Strengths include problen soluing and anallsis, oral
Repeol Steps I ond and uritten connunications, diagnostics, scheduling, interpersonal retations, directing others
Ie prornoting a spirit of partnership lrith students, peers and support groups.<./P>
2 to ltollcke
( H2 >E du c a t io n <,,.H 2 >
PURDUE UI{IVERSITY on
line 31. <LI>B-S. in Conputer Technology, Hay 1999, Purdue llniuersit!'</LI>
(LI>A-S. in Technical l,rriting, Irecenber 1996, Prairie State Coltege</LI>

fhe odiocent fogs, (H2 > Ex p er ien c P< / H2>

<B></> ond </l></B>, ilest Lafayette, IN 1996 - Present

<BR><B><I>PURDUE UHIUEBSITV</I></B>1,
BE>Labconsultant/Help Desk coordinator, computing seruices
I
surrounding PURDUE BR>Responsible for nain canpus conputer laborator! operation, scheduling student sorkers,
inq student softuare questions, and prouidinq teDhnical support.
UN/VERS/ry on line 3 7 show
how lo bo/d ond itolicize o .:1=1,.i-t-.r:-,.:,.,..,, ffi
word or phrose (Figure 2-37)
FIGURE 2.37
 HTMT

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

o ilffIllt''j'll';
</r><lB>
Editi:.l$eir*:'g€lF.:'

:IiiH9:l]Fffi
,,.',,': :,.,'. .

il'ii, ur*,''"/ I></B>'

, ,.- - -

L/\ru' ' !":!-!:l:v":::;,,li"l'll';'lil?iil

(BR><B><I>PUBDUE lJNlUtHlr.r.Y\t rutino Seruices</I></8>
s'luoen'l r''rkers '
qround lob :Et*:iliittl;i*i'::ll'l:1i"3.::';lt:l'lii:i*lir'lnii*:l:**'ltli'n"q'
<nonsibre tor narrr
""*""
iig student softuare quest i;H;';no-piouioini
t;chnical suPPort'
Consultonl/HelP Desk
of harduare and
Coordinotor on line 32' <UL> prouiding technical assistance for a uarietu
<rI>InDroued student satrsfaction bu
IilIERilArl0l{At BUSI1lESS in+tr"i'" issues.</Ll> ltith departnental
..mnriincF Hith quality
departnentar quarrrv
:illH:ii"i:;";i;tit-ii..r"n nethodotos! that ensured conpriance
ilACHltlES (lBtrl) on line i.orou"tint objectiues'</LI> on operation5 and
>rrdrrrtsu studpnt uorkeril:l^l:'l-:::1.:"1":fllll::'"H;"rll:l"Ellil;:liiii"
<Li>Traineo knouledge and
45, Account SYstems ten softt{are inProuing stu dent uorkers'
Engineel/Co'oP (IBH)</I><'/B>' Ghicago' IL 19C5
BUSIHESS HACHINES
Posilion on line @D:- <BB><B><I>IHTERHATI0HAL

:[[',i:f;iili;l$i"l{ii;;,::itl:i:{':;lt,lH::':ff':i:ilier tectrnicar support ror the nidranse

{5, PRAIRIE
STAIE COILEGE on line of sizing and
on-"n analgsis
57, ond 0flice Arsislonl, llli'"'o "rd +r::"11:9^T:i:'ll:,li'i:l::":';;-l#l?ti,oi' ou'"0 uitn midrangP sgsten upgrade
English DePoilmenl on ?lllll.li:l; Ili.,,::ll"i::;ri-'i,,i.ir- i"i:-.u,io*", salisraction
installation Project'</LI>
line 58.
chicago',-IL 199tr - 1S95

The bo/d ond a6'D (BR><B><I>PBAInIE STqTE G0LLEGE</I></B>',

(BR><B><I>0rrice Assistant:';;;ii;;'il;;;tinenti'rt
(BXl*esoorr5rurror uarrsui-:[!ilii:iiii:l"i;;;:*n"l;:ilg;lfl
><re>l

itolic togs disP/oY

(BR>Responsibre ^--"0-t""0 processing' Prouided suPport ;ff":::l;.ili"3li"l;nil:il*"nn
teleDhones' secretarial, a
(ftgure z-.so1.
n 4n\ nent. I

i#.ei #'S:'l !l$ *ob1'31-.-19i?$

FIGURE 2-38

Adding Color lo Text

can enhance its look. You will change
Changing the color of the text also page HTM 2.37)'
th. ;i;;;i ihe heading to highlight rt (Figve 2-32 on

$$tt.-.-qrt11 !
r;\ Click immediolelY
:,) to the right ol the <HTHL) font
ending tag
<l) tog on line 7.IYPe i ltLe>S"tPt" Resune</T ITLF)
/'onnv
HEAD>
<FONT COLOR: encxcnouHD-"qregback. jpg">
"/1000099"> -a,"-'r-\
os lhe lcg. !'---

,'l\ Click immediolelY to CENTEB><IHG SFc="bluebar'jpg" HEIGHT=5 l'IIDTH=s00></CEHTER>

compan! that
a) lhe righl of sonlos <P><B>0biectiue</B>: To obtain a Proqranner/anaIgst
potential
position
uses of technoloqu'</P>
ujth a progresslue
rpcnonizes the
on line 7. IYPe </FONT> ot "nl-"ou"i""i
H2>Sunmarg</H2>
the log (Figure 2'39).

FIGURE 2-39
 Editing the Second Web Poge . HTM 2.37
CY

r
o
4
4
Font color #000099 will change the text from the default black color to a dark
blue. Refer to Table 1-2 onpage HTM 1.29 tosee the list of possible color codes.

Chunging the Delqult Bullet lype

The default type for a bulleted, or unordered, list is disc. In the web Res home
page, 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

\Jt )
Click immediotely
H2 >Su nna rg <,/ H2 >
to the right ol the <P><B>00HPUTER TEDHN0L0GV<./B>.professional uith four gears experience ranging fron sgsten
softuare deueloPnent to technicat support- Strengths include problen soluing-and anaigsis, orat
I in the <UL> tog on line and uritten connunications, diagnostics, scheduling, interpericnal relationi, Oirecti-ng oiners
25. Press lhe smcrrrn to uhile pronoting a spirit of partnership uith students, peeis and support groups_(/p)
insert o spoce (H2)Education<,/H2> bullet type
( line2s'
ond then type
\, - <UL TVPE="square"F
<LI>8.S. in Conputer Technology, Hag 1999, purdue Uniuersitg</LI>
<LI>4.S. in Technical tlriting, Decenber 1996, prairie stdte College</LI>
TYPE:"square" os the tog </UL>

{Figure 2-40). (H2>Experi ence<,/H2>

BR><B><I>PURDUE UHIUEESIIV</I></B>, {test Lafagette, IN 1996 - present
BR><B><I>Lab Consultant,/Help Desk Coordinator, Computing Seruices</I><18>
BR>EPsponsibte for nain canpus conputer laborator! operatiotr, scheduling student rrorkers,
uering student softuare questions, and prouiding technical support.
I

s tl :i -htm - tlotepad ar$k Heflfie litiHtrsl

- iHS{.+ -a*l
pr,.r

FIGURE 2-4O

2) Repeot Step I to
\J chonge the bullet
iypes on lines UL TYPE="square">
( line 36 LI>Improued student satisfaction bg prouiding technical assistance for a uariptg of harduare and
35,50, ond 53 softuare issues.<,/LI>
<LI>Designed neu reporting nPthodologg that ensured conpliance uith departnentat qualitg
(Figure 2-411. improuenent objectiues.</LI>
<LI>Trained student uorkers on Help Desk and conputer use uith concentrdtion on operations and
slsten softuare inprouing student uorkers, knol,tedge and productiuity.<,/LI>
</UL>

<BR><B><I>IHTERNATIOHAL BUSINESS HncHINES ( IBH)</I></8>, chicaqo, IL 1g95

<88><B><I>nccount Slstens Engineer/Co-op position<,/I><,/B>
<BR>Eesponsible for technical sales assistanDe and customer technical support for thp midrange

UL TVPE="square">
line 50 LI>Sold and installed nultiple nidrange s!sten upgrades based on an analgsis of sizing and
outh needs that increased yearl! reuenue b! 209.<,/LI>
LI>Receiued IBH Heans Seruice Auard for custoner satisfaction uith nidrange systen upgrade
Ilation project-</Ll>

<B><I>PEAIBIE STATE C0LLEGE</I></B>, chicago, rL 1q94 * 199S

<88><B><I>office Assistant, English Departnent<./I><,/B>
<BR>Responsiblefor uarious adninistratiue functions including research, reception, ansuering
telephones, secretarial, and uord processing. prouided support for secretary;nd E;qrish

LI>superuised the instdllation of neu systen softuare updates inprouing efficienca and
ffectiuenBss.<,/LI>
LI>tlpdated the student database and coordinated the nailing of the departnent nelusletter.</LI>
/UL>
I
H2>Harduare SkiIls</H2>

FIGURE 2-4I
HTM 2.38 .

4r \ Click File on the

€/ i tile ES I*w Ss Favotn* Bsb
menu bor ond then
click Scve.
:--t-.- t- *- - -"-:::-*
__tl
Helrath if-#
e ,-t ftieh
S fl F*ster
Search
A @- €-H
€ Fu{s-s . Histov Md Prrf
-E&
Ad*es6 it* A \rtsmFlel htri

r\ Aclivole vour Murie I'1. Santos

colored
text
Y browser fy clicking
1.10 Mwiew Street
the Somple Resume bulton Scherem.lle, Indrma 463?5
on lhe loskbor. bold text
rl1qr 555-)510
'xs!9tv@tu,t!

!\ Click the Relresh

Olrjective: To obtam a programer/malyst position u'ith a proglEsslue compmy lhat recognizes the potential md advmced
€/ button on the uses oltechnologXr
bold texl
Slondord Bullons toolbor.
Summary
The Somp/e Resume Web C(IMPUTER TECHNOLOGY professi+nal mth fou yeas experience rangiqg &onr
systen: softwtre deteloFment to
dragn+stics' schedulrg'
poge disp/oys (Figure 2-42) trrh*ru.l ,rpport strengtts include pr+blem s+lving md malysre, oral md mtten commmications,
peers and suppott groups
ir,t*rp.rronJr*lutiorr, Jo""nr,g other while promotir:g a spirit o[prmership with students,

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

Experience

bold and PUR-DAE UNTYE&SITY,1]IesI Lafayrtte, IN 1996 - Present

italicized
text Lab Consultmt/Helqt Desk Caordinatnr, Compuhng Semces
Responsible for mm cmpus compuftr laboratory operation, schedulilg student workers, mswering shrdent sotrvae
questions, md prouding techdral suppart

.Inrprove<lsru.lenrsahsfarhrnbyproudurgrechnicalassistmreForavmellrolhadwremdsofuwaetssues'
square quallty ffiFrovtmeni +bjertives
- . D*rgned new report'g methoicio.g thui"nsw"d cornphmte with depaltrflEntal
bullets on operations md system softwre
. Trained studeni workers on llelp Disk and computer use tilh concentrahotr
mprowrg strrdent workers' knowledge md productiviFy

bold and 'INTERATATIONAL BUSINESS MACffII/ES (16'1aJ' Chicago IL 1995

italicized
text Ac&unt S! slans Engineer,Co+p Po sition
Resp+nsible lor techrucal saies assirtmr" ffid customEr technical support
for the midrange customer base'

. sold md mstalled mulhple mdrage system upgrades base d or, an malysts +l sung md growh needs that increased
i
square tjlHfiH.1T'r'=r*".
bullets customer sarisfacrron witt, mdrange system upgrade nstallation project.
, l"rT:tt Au,rd for

bold and P&AIME STATE COLLEGE' Chicag.. IL 1994 - 1995

italicized
text Office Assistmt, Engfish DePat+nunt
Llsporarble lor mous admmstratrve finctions includmg re seach, reception, mswerirg telephones' secretmal' md word
pro,rEssu€. Irovided suppo* lor secrelill md Erulsh deparlnenl

. Superrised tle installation olnew system soffrare updates mprovirg effictency

ard effectiveness'
square
bu llets . rJjOut.athestudentqlatabaremdcoordinatedthemaiitgofttredelafimetrtnEwsl'ttEf

Hardware Skills
IBM PC m J carnpahbl:s. rpple Macintosh. LIbfD{ systems

Software Skills
'$,Indows, liindows NT Seruerfilorkstation'
IIIIvIL, Microsoft FrontPage, Mirrosoft Intemet L4bmaf,an setret 4.0,
l,frcrosoft Ofice !r+fesstonal, Visual Bff1s J, N#' Visual J#/Java. Mrrosoft Proiect' Microsoft Accrss' Mrroso$
Purwe#omt I

FIGURE 2-42 Srxrili #E fr i * j

; $amEtei'|tot*rad.- -- ll€lsaode€sw'lili'c-"
 lnserling on lmoge ond Wropping Texl

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

frrr*rrin g anlmageand Wr appingText

Table2-4 on page HTM 2.18lists the attributes available for use in the <IMG> tag.
You previously used the HEIGHT and WIDTH attributes when you inserted the
horizontal 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 text
with 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 the
image, the default (or selected) link colors display around the image when the link is
normal, 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 visited
links display as indicated. The image on the right in Figure 2-43 shows the changed
color when the link has been visited, giving the image an entirely different look.

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

image with I image with

Links and Borders border and
normal link
i
I
border and
visited link

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

-t

FIGURE 2-43

Alignment also is a key consideration when inserting an image. Alignment can

give an image and surrounding text completely different looks. Figure 2-44 on the
next page shows a Right alignment of the text, which wraps the text around the
image. The format of that command is <IMG SRC="ovallaeb.gif" ALIGN=RIGHT>.
You will use right alignment for the completed Web page as shown in Figure 2-32 on
page HTM 2.31. To end right-aligned text wrap, use the <BR CLEAR=RIGHT> tag
where 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 use
the <BR CLEAR=LEFT> tag before the first bullet, which would break the line and
display all of the bullets beneath the image.
 HTMt
HIM 2.40 . Ptoiecl 2 ' (reoling o Web Sile with links

rmage
Experience ALIGN=RIGHT

P U RD U E {Il/tllgftSlfy, We st Lalavette, IN 1 99 6 - Prc sent

Lal Cansulnntrlle$t Desk Caonllnaur, Camputing Sen'ices
Responsibie 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 hxdwae

md s+fuware issues.
ob,jechtes
. Desrgned newreporhng methoclologJ that ensued rcmphmce wth departmental qualrry improvement
. Trained siudent workers on Help Desk md romputer use wth concentration on operations md system
softwre
unproving str:dent workers' knowiedge dd produchrtrty

INTEANATIONAL BIJSINESS b[ACffIffE'S f8'!], Chirago, IL 1995

Account 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
.

FIGURE 2-44

!iw' Sc Fi'in*es H€b

.t
&if*
+.*' ,3 #:€
l:-::e,l ,star:' ,8els€h ifuoe I Ssgh
G
Favsla€
#
iAde* D:\\dlND0Vt5\Proliler\Denise\Derktop\samp e1 htm

Experience rmage
ALIGN=LEFT

'$'Ie
PUI-IrIIE IINIvERSITT, st Lat'ayette, tr'T 1996 - Preseni

Lab onsultmtrtleip D e sk C,r ordnator, {on'putlng S eruire s

C
Responsible 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 hrdwue

and softq'me tssues
objechves
. Desrgned new repor-nng methodr,lo$r that ensrred complimre with depa:trntntal qr:alrry irtprovement
. 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 1995

Accowt Systems Engneer/Co-op Position
Responsibie 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 increased
yerly revenue bY 20910.
:,::rLallaho4.!]11':i:,:i:.j-.::':=:=:-i
FIGURE 2-45 !=.+=5-.:=-111-!-:+'==.9::,1{=':=a!-!'-Le'3:::,:.:':'-4:rrdror

Figure 2-46a shows an example of one line of text with ALIGN=TOP used in
the <Iil4G> tag. This aligns the tagged text with the top of the image, with the
remainder of the text displaying after the image. Figure 2-46b shows the same text
with the ALIGN=MIDDiE atribute, and Figure 2-46c shows the same text with the
ALIGN=BOTTOM attribute.
-F"
(\I
lnserling on lmoge ond Wropping Texl . HTM2.4l
r
o
4
4
FIGURE 2-46o
F S v:g,!: :"9*.,F€ynde Eb

h
i
:=.:;:=::
+,.,,,
::.
.* .r*, :r,'#-:g-G #-e=-{*.e €' , .

:.:it€6 : *Hrfi
Fe{re*h, Itq*F' Frik*lsFaqite* Hktsc Nhdi}Fb': :,!,*d F*rd ' f*
trr 9' - \lEmplEl.htm

* rperience

ffi
w
-:i
PARDAE ANMRSITF.

Cansaltmt1lelp Desk Coordinata4 Compurtng Semices

I =: ::-::lle for main cmpus computer laboratory operation, scheduhg
:::=.:i, md prov:du1g teclnna.l support.
West Lafavette. IN 1996 - Present

sh:dent workers, answerirrg sludent

rmage
ALIGN=TOP

softwre

' !:proved siudent satisfaction by proud:ng

. lel€[ed new repor-n4g methodoiory tlat
' lrmed studeat workers on llelp Desk ad
r:proving studed worhers' krowledge md

::'7E Rt\,IA TIO NAI B I/SIldgSSl}f/ ClL1V

}ca aat Sy sterc Exgineento+p losifian

G -$*e ,, :::,::: ,. .,, r. :j ,

:t*reie+
-.6.'-=
,'SelF

€-
::966
:
,'
: 'Eggsh
U
^l
*l#rs
I

:
€
$aich
r-g
-Ficorife d, '€,',1
Fdsem Mdi
tl1onals Print

FIGURE 2.46b

FIGURE 2-46c
I HTM 2.42 . Ptoiecl 2 ' Creoling o Web Site with Links

lnserting qn Inoge with Wropped lext

The following steps show how to insert an image with right-aligned, wrapped
text, as shown in Figure 2-44 on page HTM 2.40.The image is contained on the
HTMI.

HTML Data Disk.

To lnseil on lmoge with Wropped Text

i) Click the llotepod

\J <lMG> tag
builon on
the toskbor. ("::l- -- <H2>Experience</H2> ,:-:'
<eR><Iitc Spc="ouallapii.qif" B6BDEE=0 HEIGHT=119 IIIDTH=182 nLIGH=FIGHT ALT="IPurdue
ountain]"><B>kI>PURDUE UNIUEFSITY</I></B>, t'lest Lafagette' IH_1996 - Present
'Consultant/HeIP
eR><B><i>Lab Desk coordinator, Conputing Seruices<1I><18>
BR>nesponsible for nain campus conputer laboratorg operation, scheduling student uorkers'
When rhe Hlfrll nsuering student softuare questions, and prouiding technical suPport-
code disploys, tlick UL TYPE="square">
immediotely olter the Llllnproued student satisfaction by prouiding technicat assistance for a uariet! of harduare
oftuare issues.</LI>
<BR> tog on line 31. LI>Designed neu reporting nethodotogg that ensured compliance uith dePartnental quality
inprouenent objectiues.</LI>
(LI>Trained student uorkers on Help Desk and conputer use uith concentration on operations and
ysten softuare inprouing student uorkers' knouledge and productiuit!.</LI>
/UL>
Iype <IMG SRC: BUSIHESS HACHIHES (IBH)</I><,IB>' Chicago, IL -1995
BE><B><I>IHTERHATIONAL
"oval I aeb. gi f" (BR><8><I>Account systems Engineer/co-oP Position<,lI><./B>
<BR>Responsible for technical sales assistance and custoner technical supPort for the nidrange
BORDER:O HEIGHT:119 ustoner base.
WIDTH:182 ALIGN: <UL TYPE="square">
<LI>Sold and installed nuttiDle nidranqe sqstpn upgrades based on an analysis of sizing and
RIGHT ALT:"IPurdue qrouth needs that increased gearl9 reuenue bg 2f+-<lLl>
Fountai nl ") lo inseil the iLI>Beceiued I8H Heans Seruice nuard for custotser satisfaction uith nidrange sgsten upgrade
instatlation project-</LI>
imoge ond wrop terl. <tuL>

The HTML code disp/oys

(Figure 2-47). FIGURE 2-47

In the <IMG> tag added in the above steps, the SRC attribute indicates the file
name of the image file, BORDER=0 will set no border around the image, the
HEIGHT and WIDTH are in number of pixels, 41165=RIGHT will align the
image to the right of the
text, and the ALT will dis-
play the alternate text,
Purdue Fountain, as the
image is loading. The ALT
attribute displays text
while the image is loading.
To tDD
This helps to keep the visi-
Experience tor informed of what is
going to display when the
PURDUE UN{VERSITF, West Laflayette, IN 1996 - Fresent
image has loaded com-
Lal Consultmt{He$t Desk Coardinator, Compunng Seroces 1I lP!rdue Fnuntnrnl pletely. Figure 2-48 shows
Responsible for main campus computer laboratory operation, schedulu4 student workers, an example of what hap-
mswering student softwue questions, md proudurg techncal support
pens when an image is
Improved student sahsfaction by prouding techrucal assistmce for a vaieS of hudwue loading with the optional
ALI attribute.
FIGURE 2.48
 Adding Texl ond lmoge Links lo Anolher Web Siie . HIM 2.43

A Odrrrg Text and Image Links to Another Web Site

l-. 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 the
c: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 <A> tag to create this
-:1. Between the quotation marks in the HREF attribute, you type the URL for
l-: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 Site

Cllck lmmediutely
lo the lefl of Purdue
or llne 25. H2>Sunmar!</H2>
professional urith four gears experience ranging from systen
<B>CoIIPUTEB TECHH0L0GY</B>
tuare deuelopnent to technical support. Strenf@Toblen soluing and analgsis, oral
uritten connunications, diagnostics, schedutl HREFattribute lonat relationi, directing others
le pronoting a spirit of partnprship uith stu{ fortextlink lnd support groups.</p>
Iype <A HREF:
>Education</H2>
"http / /www. TYPE="square">
I>8.S. in Co-nputer Technologg, t4ay'1999, <R HBEF="http://uuu-purdue.edu">purdue
:urdue. edu") iuersitq<lA>k/L I>
to lnsert the llnk. trO.5. inl]technical ttriting, Decernber 1996, Prairie State CoIIege</LI>
<,/uL>
't !
i----r---
<H2>E): ending ;lH2>
<8R><tr textlink iuallaeb-gif" 80BDER=0 HEICHT=119 ttlDTH='t82 ALIcN=RIcHT ALT="Ipurdue
Cllck lmnedlolely ountai,il-7s7iI>PUnDUE UHIUERSITY</I></8>, l,rest Lafalette, IH 1C96 - present
<BB><B><I>Lab Consultant/Hplp Desk Coordinator, Conputing Seruice5</I></B>
to the right of <BR>Responsible for nain canpus conputer taboratory operation, schedulinq student uorkers,
student softuare questions, and prouiding technical support.
Unlverrlty on llne 27.
(UL TYPE="square">
(LI>InProued student satisfaction by prouiding technical assistance for a uariety of harduare and
Foftr,rare issues.(lLI)
LI>Designed neu reporting nethodology that ensured conpliance uith departnental quality
Iype </A) to end nprouenent objectiues.</LI>
>Trained student uorkers on HeIp Desk and conputer usp uith concentration on operations and
the tog. y5ten softuare inprouing student uorkers' knosledge and productiuity.<./LI>
fllL>
The HTML code disp/oys <BR><B><I>INTERHATIOHAL BUSIHESS I4ftCHIHES (IBI,I)</I><18>, ghicago, IL 1995
<BR><8><I>Rccount S!stems Engineer/Co-op Position</I></B> ]
(Fisure 2-49).
<BB>Besponsible for technical sales assistance and custoner technical support for the nidrange

FIGURE 2.49

After adding this link, the'Web page displays as shown in Figure 2-50 on the
next page. You know that this is a text link because the text is blue and underlined.
The mouse pointer also changes when moved over this hotspot.
 HTMt
HTM 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
'Wnt4g, Dec ember 'l
. A. S ur Tecimcal 996, lrame\-Ate Coliege

Experience

PURDLTE UNIVERSITY,WesILaiayette, IN 1996 - Prerent

Lal ConsukmuHelp Desk Cootdinulnr, Campurtng Sen'ircs
FlesporLsiLle frr main cmpus computer laboratory operahon, scheduling student rqorkers,
arswerulq student softwae questions, ad prouding techdral support

. ted studEtt sailsfattion by prou&ng techrutal asslstffif

Lrrpr< e lor a raiety of hrd'care
md 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 softwre
improung studelt worhtrs' hrowledge md produchnry.

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

FIGURE 2-50

Adding qn Inqge link to Anolher Web Sile

In 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 <A>
tail used above to create the image link.

sil lmoge link ts Another Web Site

@ To Add

HREF for

l-\ Click immediolely

Eile Edii 5sr! [elp
image link

-/ to the lefl of the

<llllG> log on line 32. BR><A HREF="httpr//rfuu.purdue.edu"><Il4G SRC="ouallaeb.gif" B0nDER=0 HEIGHT=11S t'IIDTH=182
' LIGN=RIGHT 611=;'lpurdue'Fountainl"></A>kB><I>PURDUE UHIUERSITY</I></B>, lrest Lafagette'
line 32
BB><B><I>Lab Consultant/Help Desk Coordinats' cnnn,,f i ng Seruices</I></B>
Iype <A HREF: BR>Eesponsibte for nain canpus conputer Iabl ending ration, scheduling student uorkers'
uering student softuare questions, and pr image link hnical supPort.
"http; / /www.
purdue. edu") lo inserl <UL TYPE="square">
(LI>Inproued student satisfaction b! prouiding assistance for a uariety of hardl',are and

lhe link. softuare issues -</LI>

iiI>Oesigneo neu reporting nethodology that ensured conpliance urith departnental quality
inprouenent ob jectiues.</LI>
<Li>traineC student uorkers on Help Desk and conputer use uith concentration on operation5 and
en softrjare inprouing student uorkers' knouledge and productiuitg-</LI>
e'r Click immediolely </U L)
:J to the light of <BR><B><I>INTERNATIOHAL BUSINESS HACHIHES ( IBH}</I></B>' ChiCAgO' IL 1995
Founloin]o> on line 33. <BB><B><I>nccount Sgstens Engineer,/Co-op Position<,/I><lB>
<BF>Responsible for technicai sates assistance and custoner technical support the nidrange
Iype </A> to end the custoner base.
log. <UL TYPE="square">
:'nqrades basq4. on an analuSis of sizing
LI>Sold and installed multi4le nidranqe srrqti AI-|.4:::::-i:.::..,..-

The HTML code disp/oys

(Frgure 2-51). FIGURE 2-5I
 (\I
(reoling Links wilhin o Web Poge . HrM 2.45
r
o
4
A.
Figure 2-52 shows you what this link will look like when displayed in the
.:cwser. You can tell that this is a link because the mouse pointer changes when
::ci'ed over the image.

4-9qpE Iryry:!i:l':",t_1$1-1ltreqE',

+
g€\
€€
l'$r,:= iJ.
13
v4
Stfi
i+}
Feteeh
.Fd
--sl
Hma l
*G#
56sch f6'rsiter Hislcrt
3'*t€Mail
I Fu{s@n,
:@

Rhr
'_.!l
Edit

:; Linkr

Etlucation
. 3. S ifl Computer TechnoloEy, May j g!9, !g4U, Uqgliq
. A S. n Terhmcal l,lJriting, Deceniber 19g6, lratre State CollEEE

Erperience

PL:EDUE UN1I/ Rgm'. West L;rfayrtte. DT '1996 - presrnt

Lai 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*

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

}1'TEANATIONAI, BIlStA/gS'S ,}{C CHINES tIBIt{), Chioago. IL i 995

t I *t9:/4!qw.Fsdqe.*d# glbt"iii'i'-
89t-11;; # &l i* g i; €lisnpter . HereFnd

FIGURE 2-52

reating Links wirhin a \Xrbb Page mo1$abozr

,he final links that you will create in this project are links within the Sample Resume links on o Web
\\'eb page. Because the Sample Resume is a long page, it would be easier flr the visi- Poge
:ors to have a menu or list at the rop of the \feb page so they could move immedi- An odditionol use of the
.itely to another secion. view the rweb page in Figuie 2-32 onpage HTM 2.31 to onchor tog is to ollow visilors
to move within o single Web
iee what these links will look like when completed.
poge. Use the NAME ottribute
Figure 2-53a on the next page shows an example of linking from the word, to ollow movement from one
Education, at the top of the page, to the Education section in another part of the oreo of the Web poge to
\\ieb page (Figure 2-53b on rhe nexr page). lfhen the mouse poinrer is moved over onother locoiion on the some
poge. This linking technique is
:he wor:d, Education, and clicked (Figure 2-s3a), the browseireposirions, or links, porticulorly useful on excep-
.he page to rhe Education rarger (Figure 2-53b). tionolly long poges. An index
To create links within the same \7eb page, you first ser the rargers for the links. of links olso con provide eosy
-\ torget is a section within a XTeb page to which you want to link. You have decided occess io vorious oreos within
the Web poge.
It 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 that
vou 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.
 HTML
HTIvI 2.46 . Proiect 2 ' (reoling o Web Site wilh Links

110 Muiruiew Saeet

Schtrennlle, Indraa 463?5
\4 LJ ) JJJ-ZJ LV

saltogm@jsp. com

Objective Tr obtm a progrmerr'malyst posrlion lvith a progrcssive compaay lhat recogrlzes the potential md advmced
ures dteclnologt

Surnmary
COIIPLITER TECHNTJLOGY professional with fou yeus experience rar6,ing &om system sofhrare developflen! to
terhniral 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$ E€ls :

JEJ
.+" **
Back 's
$trp
Aadre*r !.p'] nedrcatic r ::J i,itr**

target
Education named
education
'1999, Pwdu* Unversitv
. E S. n Computer Techrologlr, May
. A.S. n Teclncal Wntng, December 1996, Prairie State College

Experience

PLIRDLIE UN/-RSITfl,
\Ilest Lafayettr, D'tr 1996 - Present
Lal Consultmt$Ielp ilesk Caardinator, Corryuting Semices
Responsihle 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$ olhadware

ard 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+rue
improving student workers' klowledgr md produttrnly
h
INT'ERNATIONAI dtrSInIE'SS n{ll CH IN ES (IBM), Ctrcaso, [- 1 995 E
f, 1i,i ,S My Corp*a
6st.t[ ff gjd ? . i'ryqrr]:!lqgd, lifis."F,- u"*"r - ttlt- ,fu-{rc E**

FIGURE 2-53b
.!t'

€{
(reoling [inks wilhin o Web Poge . Httt2.4t
!,
EI
cr
e
A.
Setting the link Torgets
To set link targets, you again use the <A> tag. You use the NAME attribure,
:.rther than the HREF attribute used previously. When the visitor clicks a link to a
'oecific section of the \7eb page, you want the visitor to be directed to that area of
:re Web page. In the following sreps, you ser the four link targets.

Click immediotely
to the left of the
<H2> tog on llne 24' fi NAl,lE="education"><,/A><H2>Education</H2>
,liy2a --,
)
UL TYPE="square">
<LI>B.S- in Conputer Technologg, Hay 1999, <A HREF="http://uu!r_purdue_edu,'>purdue
Uniuersity</n><.rL I >
<LI>n-S. in Technical Writing, Decenber 1996, prairie State College<,/LI>
Iype <A NAME- </UL>
"educati on")(/A) <e NAHE="experience"><1n>kH2>Experience</H2)
lo rreole o torgel nomed _ .' (BB><A HREF="http:,/,/uuu.purdue.edu"><IilG
snc="ouallaeb-gif" BoRDER=0 HEIGHT=1-t9 HIDTH=182
ALIGH=RIGHT ALT="IPurdue Fountainl"></A><B><I>pURDUE UNIUERSITV</I><,rB>, Uest Lafagette,
educotion. Present
: i,n" gi' <BR><B><I>Lab Consuttant,/Help Desk Coordinator, Conputing Seruices<,/I><./B>
(BB>Besponsibte for nain campus csnpxter laboratorg operation, scheduting student uorkers,
ing student softuare questioni, and prouidin-g technical support.
Click immediotely to UL TVPE="square">
I>Inproued student satisfaction by prouiding technical assistance for a uariety of harduare and
the left of rhe ftuare issues.<,/LI>
I>Desigtred neu reporting nethodology that ensured conpriance uith departnentar qualitg
<H2> log on line 31. prouenent ob jectiues.<./LI>
<LI>Trained student uorkers on HeIp Desk and computer usp uith concentration on operations and
sgsten softuare inprouing student uorkers' knouledge and productiuit!.</LI>
</UL>

d
\J
Type <A NAME: BB><B><I>INTERNATIoHAL BUSIIIESS HACHIHES ( IBH)<./I><,/B>, chicago,
BR><B><I)Account S!stens Enqineer/Co-op position<,/I></B>
rL 1995
"experi ence") <BR>BesPonsible for technical sales assistance and Dustoner technical support for the nidrange
(/A) lo rreole o lorget Dustoner basP-

named erperience. UL TYPE-"square">

I
LI>sold and installed multiPle nidrange slsten upgrades based on an analgsis of sizing and
grouth needs that increased yearl! reuenue by 26t,"<.tLI>
The HTML code disp/oys <Ll>Eeceiued I8H Heans seruice nuard for custoner satisfaction uith nidrange systen upgrade
installation project -</LI>
(Ftgure 2-54).
l-ht6 - f*ot€Fad

FIGURE 2-54
 HTMt
:;:. {ilr il -,-: t-t _lt:

Olct hnedlolely
to the lett of rhe
><B><I>IHTERNeTI0NALBUsIHEsSt,lAcHINEs{reH}</I></@
<H2> tcg on line72. ><B><I>nccount S!stens Engineer/Co-op position(/IX/B)
>Responsible for technical sales assistance and custoner technical support for the midrange
toner base-

.?) Tvpe <A NAME:

<UL TYPE="square">
<LI>Sold installed
r>sord and insta nultiple nidrange slsten upgrades based on an analgsis of sizing and
\/ "ha rdwa re")(/A) outh needs that increased yearly reuenue bg 26t,.i./LI>
I>Receiued IB1'l l'leans seruice Aulrd for cusioner satisfaction uith nidrange sgstem upgrade
lo creole o lorgel nomed instatletion project. <,r.LI>
hordwore.
Chicaqo, IL 1Cgrr _ .t9C5
<BB><B><I>PReIBIE STATE CoLLEGE<,.I)</B>,
<BB><E><I>0ffice nssistant, English Oepartnent<,ri><1e>
::l::::*:":::_l::_:lii"::."91i1r::i":i::_ Iun:tiot: includins research . reception , ansuerins
telephones, secretariar, and uord processing. prouided trppo.i r"i i""i*t"rg-:;;t;rii;;
''i1
\J
Click immediorely deDartnent -

to the left of the

LI>superuised the instarration of neu system softuare updates inprouing efficienca
<H2> log on ffectiueness.</LI> and
line 72 ,
LI>updated tha studPnt database and coordinatpd the nairing of the departnent neusretter-</LI>
line 75.
line 75 HAI4E="harduare"></A><H2>Harduare SkiIIs</H2>
IBI'l PC and conpatibles, AppIe t4acintosh, UHIX sgstens<,tp)
,'/!) Iype <A NAME:
\-'t "sof twa re")(/A)
<A HeHE="softuare"><,rn>kgZ>Softuare
HL-,-
SkitIs<,/HZ>
I'licrosoft FrontPage, Hicrosoft Internet Infornation seruer 4.0, l4indous, Itindous
r/lJorkstation' Hicrosoft 0ffice professionar, uisuat Basic 5, c**,-uiiuii"Ji"r.r"u", NT

lo creole o lorgel nomed crosoft Project, Hicrosoft Accpss, Hicrosoft pouerpoint</p>

softwore.

The HTML code dispioys

(Figure 2-55). You now hove
four lorgefs sef.
FIGURE 2-55

The targets (education, experience, hardware, and software) are complete. you
now are ready to create the links to these targets.

Adding links to the lorgets

To create links to the four targets, you again use the <A> tag. you also use a
slight variation of the HREF attribute. Perform the following steps to set the four
link targets.
 Grl
Creoting Links within o Web Poge ' Hltil2.49
u
o
4
4

To Add links lo lhe Turgets

r\ Click immediotely
-Y to the right of the NTEB>(219) 555-2510</CEHTER>
<lP> tog on line 22 ond NTEE><fi HREF="nailto:santosr*!isp.con">santosr*!isp.con</a></CEHTER></P>

lhen press the nrtr key EB><II'IG SBC="bIUEbAT.JPg'' HEIGHT=5 t'IIDTH=5OO></CENTER>

twice. <p><B>0bjectiue<1B>: To obtain a progranner/analyst position uith a progressiue compang that

recoqnizes the potential dnd aduanced uses of technology.<1P>

<H2> Su nna ry< / H2>

<p><e>c0t4pulER TECHH0L0GY</B> professional uith four years experience ranging fron systen
Iype <UL rYPE:
\/2)
softlrare deuelopnent to techni;al strpport- Strengths include problem soluing and anallsis, oral
Scheduling, interpersonal
diagnostics, scheduling,
d uritten connunications, diaqnostiCs,
and relattons, dirPcting
anterpersonal reLations, oarPcf others
"square") Ond ile pronotinq a spirit of partnershiP uith students, peers and support groups-</P>
then press the ttrtr key. L TypE="square,'> bulleted
t><c tnEFj"ileducation">Education</A></LI> list for targel
line 22 menu

at i on<1

\-/ )
,3 Iype <t-I> NA l,lE= "pd u ca t i on " ></
UL IYPE="square">
A> < H2> Edu c H 2>

<A HREF: LI>B-S. in Conputer Technolog!, hay 1C99, <n HnEF="http:.//uuu-purdue-edu">Purdue

niuersit!</A><./L I>
"/feducati on") rI>n.s. in Technical tlritinq, Decenber 1996, Prairie state Gollege</LI>
/UL>
Educati on(/ A)(/ LI) ond
(A NAHE="experience"></n><H2>Experience</H2>
lhen press the nrtn key. <SE><n HREF="http:1/uuu-purdue-edu"><IHG SRC="ouallaeb.gif" B0BDEB=0 HEIGHT=119 tTIDTH=182
IGH=BIcHT 611=;'lturdue Fountainl"></n><B><I>PURDUE UHIUERSITY</B></I>, tlest LafayettP, IN 1996
Presant
The HTML code disp/oys <BB><E><I>Lab Consultant/Hetp Desk Coordinator<,/B></I>' ConPuting Seruices
(Fisure 2-56). <BE>Besponsible for nain canpus conputer laborator! operation, scheduling student uorkers,
ansuering student softi,rare questions, and prouiding technical supPort-
I
<UL TYPE="square">
<LI)Inprcued student satisfaction by prouiding technicat assistance for a uariety of harduare and ?

sro*lil*! er gl g illE;;Frffio'- &Jsmoonerru'

FIGURE 2-56

11 ) Iype <LI)
\./ <A HREF: <cEHrER>(21C) 555-2510</CEIITEB>
"/fexperi ence <CENTEE><A HREF="mailto:santosn*lisp.con">santosdaisp-con</a></CEHTEE></P>

")Experi ence(/A) <CEHTER><Il4G SRC="bluebar - jP9" HEIGHT=5 l'IIDTH=506)(/CEIITER)

</LI> ond lhen ptess the ><B>0bjectiue<./B>: To obtain a progranner/analgst position uith a progressiue compang that
izes the potential and aduanced uses of technologg.</P>
rxrtr key. Iype < t- I >
H2>Sumnarg</H2>
<A HREF:"/lhardware") professional uith four years experience ranging fron sgstem
p><e>c01'tpuTEE TECHH0L0GY</B>

Hardware(/A)(/LI) oftuare deuelopnent to techni;al support. Strenqths inctude Problen soluing and atratgsis, oral
nd uritten conhunications, diagnostlcs, scheduting, interpersonal retrations, alirecting others
ond then press the llrtn le pronoting a spirit of pnrtnership uith students, peers and support groups-</P>
key. Iype <LI><A HREF: TYPE="square">
(LI)(A HEEF="ileducation">Education(./A)(/LI ) completed
"ifs of twa re " )Sof twa re I><A HBEF="texperience">Experience</A><lLI> bulleted list lor
I><A HBEF="Sharduare">Hardware</A></LI>
</ A></ LI) ond then presr <L I ><e HREF="Ssof tuare">Sof tuare</R><1LI >
target menu
>l
the rrrtn key. Iype </UL>.
<fi HAI'tE="education"></A><H2>Education(/H2)
<UL TYPE="square">
The HTML code disp/oys <LI>8.S. in Conputer Technolog!, Hay 1999' <A HREF="httP:/./uuu-purdue.edu">Purdue
(Figure 2-57). iuersitg</A></L I >
I>n.s. in Technical trriting, Decenber 1996, Prairie state CoUege</LI>
IUL>

Present
BR><B><I>Lab Consultant/Help tlesk Coordinator <1I>, conputing Seruices

FIGURE 2.57

lllr,
r
I

HIM 2.50 . 2 . HTMI.

Prolect Creoting o Web Site with Links
*

linking to the Top of the Poge

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

To Link to ihe Top ol *r Pcgr

I)
\-/
Click line 5 ond
then press
the rtrrn key.
-
TITLE>SanpIe Resune<./TITLE>
line 6 /HEED>
<B0DY BnC[GR0UH0="greyba target
named top
2) Iype <A NAME: <n HAl,lE="top"><,/A>l
\-/ "top")(/A) os the <P><Hl ALIGN="CENTER"><I><FoNT C0L0E='.S680099..>Harie
<CENTEn>110 Huiruies Street<,/CENTER>
t{_ Santos<,/FoNT></I></H1>

tog. <CENIEB>SchereruilLe, Indiana 46375</CEHTER>

<cEHTEE> (2-r 9) 555-251 0<,/CEHTER>
<CEHTEE><A HREF="naiIto:[email protected],,>santosr$!isp-con<,/a></CEHTER><./p>
fhe torget is set of the fop of <CEHTER><IHc SEC="bluebar-jpg" HEIGHT=5 ttlDTH=500></CENTER>
fhe Web poge (Figure 2-58). <P><B)0bjectiue</B>: To obtain a progranmer/anaust position uith a progressiue
recognizesthepotentia1andaduancedu5esofteitrno1ogy.</P>
<H 2> S unna ry <./ H 2>
professional uith four years experience ranging fron systen
<P><B)C0NPUTER TECIIN0L0GV<,/B>
software deueloPment to technical support- Strengths include problen sotuing-and
soluing-and anaigsis, oral
ana-lgsis, ora
and uritten connunications, diagnostics, schedul
scheduling, interperional relationi, oirecti-nq oiners
uhile pronoting a spirit of partnership with students, peers and support groups-<1p>

FIGURE 2-58

I\ Click line 39 ond

€l then press the rrrrr
key. <A NAHE="education"></A><H2>Education<,/H2)
<tlL TYPE="square">
<LI>8.S. in Conputer Technologg, t{a! 1C99, <n HREF=.'http://uuu.purdue.edu.'>purdue
line 39 UniuersitU</A><,1L I>
I>R-S- in Technical trritinq, Dpcenber 19q6, prairie State
.l) Iype <P)<I> </uL>
\/ <FONT sIZE:-1> p><r><FoHT srzE=-1><A HREF="stop">To top</A></F0NT><tt><re>l ,'#;""1"i3;,
A HAI4E="experience"></A><H2>Experience<,/H2>
<A HREF:"/ftop")To E><A HEEF="http://uuu.purdue.edu"><It{G SRc="ouatlaeb.gif" B0RDER=g HEIGHT=119 HIDTH=1g2
top(/A)(/ F0NT></ I >
IGH=RIGHT ALT="IPurdue Fountain]"><14><8><I>pURDUE UNIUERSITy</I></B>, uest Lafalette,
Present
(/P) os the tog. ><B><I>Lab Consultant/He1p Desk Coordinator, Conputitrg Seruices</I></B>
>Responsible for nain canpus computer taboratorg operition, schpduring student uorkers,
ing student softuare questions, and prouiding technical support.
The link is set fo the top
<UL TYPE="square"> .:
torget (Figure 2-59). <LI>Inproued student satisfaction bg prouiding technical assistance for a uariet! of harduare and .:
tuare issues-<,/LI>
(LI>Designpd neu reporting nethodologu that ensured Donpriance uith departnentar
inprouenent objectiues.<,lLI>
LI>Trained student uorkers on Help Desk and conputer use uith concentration on operations and
Usten softuare inprouing student uorkers' knouledge and productiuit!.</LI>
/UL>

FIGURE 2-59
 C\
Creoling [inks within o Web Poge . HIIil 2.5t
E
o
4
4
Repeol Step 4 on
line 80 lo insert the
sales assistance and custoner technical the nidrange
tog ond then prest the ustoner base.
iITEr key. <UL TYPE="square">
<LI>sold and installed nultiPle nidrange slsten upgrades based on an analysis of sizing and
grouth needs that increased yearlg reuenue by 20e.4./LI>
<Ll>Receiued IBH Heals Seruice Ruard for custoner satisfaction uith midrange sgsten upgrade
installation project.</LI>
Repeot Step 4 on
line 89 to insert the (BR><B><I)pBAIRIE STATE C0LLEGE</I><./B>, Chicago, IL .tc94 _
1c95
log ond then press the (88><8><I>0ffice Assistant, English Departnpntall></B>
BB>Besponsible for uarious adninistrdtiue functions including research, reception, ansuering
rxrtn key. elephones' secretariar, and uord processing- prouided supporI for secretary !nd Enqrish
epartnent.
-ne HTML code disp/oys TYPE="square">
LI>superuised the instarration of neu sgsten softuare updates inprouing efficienca and
=igure 2-60). ffectiueness.<.1LI>
<LI>UPdate.l the student.latabase and coordinated the naiting of the departnent neusretter.<1LI>
</uL>
(P><I><F0llT SIZE=-1><n HREF="*top">To top</A></FoilT><lt><tp>

n NAHE="harduare"><14><H2>Harduare Skitls<./H2>
P>IBl'l PC atrd conpatibtes, Apple Hacintosh, UHIN sgstens</p>

tuare SkilIs</H2>
NAl4E="sof tuarp"></A><I2>Sof
<P>HTHL, I'licrosoft Frontpage, Hicrosoft Internet Infornation Seruer l,lindous, ttindous NT
Seruer/ltorkstation, I'ticrosoft 0ffice professional, Uisual Basic 5, Uisual J++/Jeua,
l4icrosoft Project, l,ticrosoft Access, llicrosoft pouerpoint</p>
<P><I><FoNT SIZE=-1><A HREF="$top">To top</A></FoilT></I><,/p>l

FIGURE 2-60

This creates a new paragraph using the <p> and </p> tags, italicizes the text
using the <I> and </I> tags, sets the font to a small size using the <FoNT srzE=-r>
and the </FONT> tags, and sers the link to the top target <AHREF=,.#rop"></A>
using the anchor tag.
one final link is from the Sample Resume'web page back to the'web Res home
page. In the following sreps, you create a link at the bottom of this \feb page that
will take the visitor back to the home page.

-,,, (-0-'-r" -i .: tiiri;i

ir'- ll r;r'ir"ii i'i-l li:ii ijOli.' L)iiiG! irfiu S;i\\lE i,rli.D Prll,ri:l i r.LI lr'r'il-,1. iii.ii
If necessary, click the blank line just above the </BODy> tag.
O
Type (P>(I><A HREF:"webreshome.htm")Return to Web Res home
O- page(/A></D</p> as the tag and then press the rNrrn key.
Save the HTML file by clicking File on the menu bar and then clicking Save.
1!)
Click File on the menu bar and then click print.
O
The HTML file prints (Figure 2-G1 on the next page).
 HTML
HTM 2.52 . Proiect 2 . Creoling o Web Site wilh Links

aaqtLl

<n rt>
<gzp>
<rTrtt rBpt b.w</Et'L'>
</frtg>
<taDt Hrnot,t9-,, Er.!beb, tpq" >
<^W"E t,x/D
<H81 tlld."Cillll"xlxlg*, C,'3E, 10000994n't rL. X, tBto'</rgrtx/t>4/flr>
<CrfrA>Llo bt qt d tb,oa/ effr'|,
<C'filHch.r.ni7L, frdits a6l7 5</ Cfrtt;r>
<cfrw l21r't g5t-25t0</efr7w>
<cffijv,r, t*l'"sLllc, E$ta.r4t.p,6*">rtrterr4tlt,*,/. /etltttx/p>
<Cwutrc rrc,'tblv,ts.t,Jw" nt *500x/e''t',l>
''''ffii''
<9*>Abj.cELv.</rrt ,o cbui,n a fBog9*t/.MLyrt peritid ritb r IEoEF liye
eo.t.Dtr tArt t.cotntt. t!. lFbglrl rnd a&.dr.4 rBt et t *wLog!,</r>
<1:2>tl5!tt</fi2>
<reeofit|'t t ,'lf''il1}lt6r</r> prot rrtsl rtti fsr t'...r .rt*riro nngirit
,ril .y.ta tuCErrE. *.t.'.pmt to taslBi4l .s,,rgtt, tEtBEtl',e i$lcC. prebt$
.otrLrt B1 Nlyctt, gtrl t 1trLttd ffitstisa/ dt|!rertjrr/ rdedcli*t,
t4h4r.rrml r.L.bL6t| 41f.attr9 oth.rr fllriL tr*gtrt I lpif,it of
prrtsr.tip vi*tt .todirr,t , Fptt tnA .qlrgr! grgqr, </9> ,

<ltL tlrt-q tq{t , >

<LIre n l." l&tarbL64>rdAt4ate/M/L!>
<!ls fltttr"r.ry.tt@, *lryN.L.M</ rg</Lt>
<U><l l8lF'th.r*rf r.">t t&r.EX/b</Lt>
<hrXA Wl." f tortu.r.H rtor*tE,< / p</I)r>
</vt>
o ltt,'-"..fsrtid"xlrx',jt>tuer9 fi</E:z>
<W
''tu'tE*aa.>
<Ll>t,4, Ln Coryst r tcbslcay, ,by Ltrrt 4
tt ;ll-"btl+ t / / ffi ,F!r.l+.,.&r">tur&r Vni'v$ait'</ tp< / Lr>
<Lr>^ r, tn t shttol ,rltirt, Dr6r*.! 1r9,, t&irir Bb,t^ ?^t.ent'.,,
</w,
<N1><|OB ttzbtx^ l*,f-n l*peuo taj4/t></tg:*x/t> 9qrl41
4 l*b".q.t L@" X / Lda.< / A2>
€ts rntt-"httt, / /ffi ^><,.2>Lt('.E
,t*&p,d$"xl',#t t**' NrIL.&,t
rtwra2 rLtm-affia E." lre.t&,. r@trint,x/lxtxt> <^fi>
ulTV'';'I'T<ltx/t>t tttE
^t ,rtry.tt t tS trgf - PE.aaE
<D<lxt>'.b Cs.tLt rE/C.!p D.tL eocrt4Bto9</Ix/,>t ' <lf><txl>:ttttntl0ll! ,{|€tt tA lI*t</r></t>t €Ai€.dp/ t! 1t9S
{q>|.4wtbl. to, *L^ c,ryu ..tpct ! llbor.torfr otrr. <L€xl>ta#t cl'lts 'fT,ITEBA
trttne/co--olt ?sitl#/Ix/t>
absabra rcxt*rat $fr.ELnt agrac.'lg bttttFa (lDaatL6a, t: grdrisl ,!tps&
ttqor;, fi>Lrl$sib:a f9r t dnidLl rd.r #rirt .Fd st#
t$ thc rlCa$EF rut*F bM, 'e
<n, nb"'flt."> <9! ?Yft-"rqu44>
<,t>t'Ptry.d .tsbnt, tttttteLLB by g.Ntdtag t €hfts1 <rl>ggld .r4 isttllrd illtifl. ri{bsEe st'rt- qvrrC.6 bsrcd ff s mlyri,
vLEt.Ey ot ligl},rt. tnll tot*uta L.wa,</LI> af
<Lr*atLqtud w t'fDECLit rthqlology tt t alrcraal 6ofi' ttting .{4 trdtb toad, lftrt ircrsr.d ysfly rd# b! 208.</LI>
qalt ty L4tEqwt obTettv.r, < /L!> <!f>iastv.d lX llF 6cFte ,. #d fd wtilf, rig*ef.a*is rt$ **kstc
<rlt>rtaLn 4 aC}{j.nL toth.aEt en XaLp g.tlt ard cotBtar s. ,{ttd g'gF.<b lMt4ll-tls tEet&*,</tt>
grutagLd, afi tyt6 tctE rra ,,qtrdtnt tleibnt. t,rtbta </w
Pt.B,t CLvily,</L7> <nxtxt>ttlt*It 9t 7, *Llt'd'</D</t>, c''tsr'o/ II, 19t - 19ts
<ln><lxI>Oftie / tdtllrt Drprtmt</Ix/t>
Oi>i.twibL fcl ytrlcu .*irire..rtsivc twtis
^.DtttBt +*lcdlrt fffif.#/
rc6qtt6, M.riat t,lqhet/ *t t$t r, ed r#d tEffislrg. trdidad
rqtF ! ts *tat ty r*{f trtrltrb dcptfhdt.
& d?Eec.E*t ">
<lt>tqbryir.d t c tilt l'ltis oC N tlttd @ft*rc uFa.*.e i.rywiFg
.ttt etane' .uC ottetlr*tt.</tl>
<lllFd.trd &. .t*^t drt b*€ .rd @rdt*tcd Sc rilift of t#. Ca||rtBC
ffi.rrLae,</Lt>
<lfr>
<lxl><|glt B'aD'-L>4 tFr-"rtdt"tto tqx/tx/tort!'</txlf>
<l Fb.rdrs.'x^Ke>i.r.f.& *LLLA/'/2>
<>t; tC .rd aott ftbLr, ry?L Xreirteh/ A;fr tyrt*,</>

<r>rrfi.t NIoEwtE l4iclstt Int trg lefo*tio tcffi 4.0,

uLicp.r.t gLacpi. f, 'cst?q./
tcfrc/tork E tt&, Offt€ Eofrdrl*l/ ViHl
u$t4 5, e++, vi'ML t#/J&rt xisostf ',taBo*tt
tiojet/ tti4teft tc4r/ tlJssott
PwtPoi.nt4/t>
<lxlxrcilt Bra'4-rx^ fftF."ttdPl>?c ta"</^x/rcft></rx/>
<txlxl ntts"rabrcrie.btt">i.*ss to ** i.r be F r</D</tx,/tt
</'p9'>
</re

FIGURE 2.6I
 c\.
Creoling [inks wilhin o Web Poge ' HIm 2.53
E
o
e
CL

"0 \/[EVi THE \iit:B 'PA\(t[

Click the Sample Resume button on the taskbar.

U
r i) Click the Refresh button.

The enbanced'Web page displays (Figure 2-32 on page HTM 2'31)'

-lJ- RilNi TI-[[ N'/ES FAG[.

Click the Print button on the Standard Buttons toolbar'
r)
Tbe Web page Prints (Figure 2-52).

Marie M. Santos
I l0 Muiryicw Str@t
Schercnillc, lndim 46375
(2r9) 55s-25t0
sun!Q!L(4\P.qqu

ObJtrtlve: To obtain a progrmr/oatyrt pcition with a progrE66ivc compill

potential md advanced uscs of t€chrology
INTEhNATTONAL BUSINESS MACHIN ES (I BM), Chicago, lL 1995
Account Strlem Englnea/Co'op Potldon
Summary bre'
iliiJiifi'r,r?Jit-rri"a robr -d cu'totrr i€chrieal $upport for the midtangc su$mer
^ii"t"n*
COMPUTER TECHNOLOGY professional with four ye6 erp€rienc ril8in I Sold ild itstall€d multiple midrmge ryrtcm upgrdee bmd on an'a3iydia of tizitg nd grov*r
dcveloDment to ehnical supgon sreng$t include problem slving and amly6'
ncedc that ircrceed yeuly rcvetwb'! 20qa
mmrinicatioro. diagnostici, rheduling. inerpemml relaliom' direding olher r il*"iuJ lsM M"-t s"-i* nt.o for fletoffi taliEfedm with midrilge f;yntam upgtad€
of partnq$hip with Etudents, p€€s md $upport Sroupt,
itrtallation prcject.
I &!]lcitilp
I Expcrienc:g PRAIRIE STATE COLI'EGE,Chic"go,lL 1994 ' 1995
I Hdd\\'re Ofrrc Atthlanl, Enclfuh De,arlmsf,t
I Sslrrre #;;b;;;;;ffi;; rdmiinisrativc tunctimt ircluditg roreech, t*ption' ffiwding tclcphwt'
*remial, od wrd prMirins Providcd rur4pn fot wtcw Nd Englisb d€partent'
Education
I Sumird tlr instatlaiq of rw ry$m rcftwtre lpdaar imProt ing etfalnc"y ald effaiv*es
I B,S, in Compun Trchtrology, May 1999, PurJ'rt t r'r er lt\-- i U-frurl *t tt a.nl daube ild ffidinatld thc roiling of rh€ d'paffit rcwrlettrr'
r A.S. in Trhnical wriling. D4ember 1996. Prairie Str College
L,,tt+
Tqq.
Ilardware Skills
Experience
IBM PC md ompatibl€s, Apple Meinloth, UNIX syrtenr

PURDIJE ANMRSITF, W$t Lafayettt, IN 1996 - Pleent Software Skills

Iab Consulunt/H etp Detk Coonlinator, Computing Sewie6 - - -.
roin camps computer bbqatory oPeratiotr sheduling I
Responsible for
studenl rcftwae queslioru. and Providing
HTML, Mismft Fro ntPage, Micrwfilt*swtlnfmation Swet 4'0, Wiodsws' Windtws NT
studint *o.kem. m.*ering t so*oJipu*rtuti-, rtlis;oft offl@ Ptofcsrional, visul Bffiic 5 ,c++'vltwl t++ltava"Miswft
tsahdcal suppolt,
Proje! Miswft A@sr, Micr@ft PowerPoint

r Irnproved 6tud€nt stirf4ti@ by providitrg tahtrical 66klfrce tq a

I4'?
vdiety of b{dwil€ and sftwm iss$s
r Designed new reporting methodology that €truGd comPliec with d€pan RetLrnt tt \\1:b Res lULtLIrt:<,'
imFovmont 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'

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

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

Testing the Links

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

ore About Images

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

Horizonlal ond Uertitql SPace

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

He is l-vear-old and is just now leam4g how to rvalk Marhew has a brg
sisrer

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

HSPA'E
Ugp46E = 20

@s;ra:;#'* just now leaffflg how to walk. Matthet' has a blg stster
Tlls is Matthew McDevitt. He is 1-yem-okl and is
nme is Melade
whose
HSPACE=O HSPACE = 20

just now leammg ho'c to walk Matthew has a bg

Ttus is Matthew McDentt He rs 7-yeat-ol'J md is
sister ri/hose nme is Melmie
HSPACE=20 h

FIGURE 2-63
I C\
More About lmoges ' HTM 2.55
r
o
4
4
Thumbnqil lmoges
ffi*re=)Aboat
Image 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 a €lip tut
rK rhar, when clicked, will load the full-sized image. Figure 2-64a shows an exam- You do not hove to be o
:-. of a thumbnail image that loads the full-sized image when clicked (Figure 2-64b). grophics designer to creote
long time, depending on the size and the complexity of ottroclive Web poges. Free
-,t.rding images can take a\Web imoges ore ovoiloble on
:re image. Visitors to the page may not want to wait. Web developers use numerous Web sites. For
:rumbnail images to give the visitor the opportunity to decide whether or not they more informotion obout
',,,'anr to see the full-sized image. You can create a thumbnail version of the image by free imoges, visit the HTML
More Aboul poge
::sizing the image in a paint program and saving it with a different file name. You
/
(www.scsite.co n / hlr.'l
:ren use the smaller version (thumbnail) of the image in the'Sfeb page with a link to more.htm) ond click Clip Art
:he larger version of the image. The required tags are <A HREF-"largeimage.gif">
<lMG SRC="rhumbnail.gif"></A>, 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's
'!7eb
Srandard Buttons toolbar to return to the original page displaying the thumb-
nail image.

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

FIGURE 2-64o

FIGURE 2-64b
 HTMt
r -,.K)

- cE
-g!. €
-,,c-
o='

F ?= here to Obtain Images

You can obtain images from a number of different sources.
Clip art can be used on
Web pages as well as images you create yourself with a paint
program. you can scan
images, pictures-,.or graphics with a-scanrrer or use a digital
that can be read by-the computer. You also can copy
."-.i" to tuk. pi.t.rr.,
fo'od i-"g"s from the internet.
The'web contains thousands of image files on .ouniJs subjecti
thar can r. ao*rr-
loaded free and used for tto.t.o--.i.ial purposes. u;;g
one of the popular search
engines, do a search on the words, Free GIFs, and see how
then can right-click.an image that you want and save ir. -arry hits yo, get. you
Regardiess olwhelre you ger
the 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 web site
that had links from each page to the other. You learned the terms
and definitions of linking and used each of the
four types of links in your pages. You created a link from the home
page to the second page, together with one
from the second page back to the home page. You created an
e-mailjinl tn"r, *h* clicked, opened up a New
Message window' You set target links withln-the second p"g"
th".r .r""t"i bull.t"d list to link ro rhose
Itargets' You also created a link to another'web site, "nd
both text " to the site. you
learned more about'web page images and reviewed examples "";;l;;ge to link
"r,d'.rid of m1n4 ;;;d;;niques. you showed your
two ntreb pages to your boss, Mark Mullet, and he *as thrilled
'Web with ihe ,"Jrlt] you probably will have more
development work to do now.

'! t:{
i
j i'' hat You Should Know
Having completed this project, you now should be able to perform
the following tasks.
i Add Bold to Text (HTM 2.34) Enter the Text and Tags for a Link
i' Add an E-Mail Link (HTM 2.24) to Another \7eb Page (HTM 2.23)
', Add an Image Link to Another Web Site Enter Two Bulleted Lists (HTM 2.17)
(HTM 2.44) Insert a Background Image (HTM 2.1g)
I Add Italics to Text (HTM 2.35) Insert a Horizontal Rule Image (HTM 2.20)
' Add Links to the Targets (HTM 2.4g) Insert an Image with \Trapped Text (HTM 2.42)
Add a Text Link to Another \7eb Site (HTM 2.43) Link to the Top of the page (HTM 2.50)
:'r Change the Bullet Type (HTM 2.37)
Open the HTML File (HTM 2.32)
' Change Text Color (HTM 2.3G) Print the \7eb Page (HTM 2.27, HTM 2.53)
Complete the Link Back to the Home page Save and Print the HTML Frle (HTM 2.25
(HTM 2.s1)
HTM 2.s1)
, Copy and Paste Text (HTM 2.21)
Set Link Targets (HTM 2.47)
', Enter
a Heading (HTM 2.15) Start Notepad (HTM 2.11)
-' Enter
Initial HTML Tags (HTM 2.13) Test the Links (HTM 2.28)
Enter Text (HTM 2.15)
\/iew the Web Page (HTM 2.26, HTM 2.53)