HTML and Javascript-Visibooks

h1ML and java5cript
fer isuaI Learners

181c Monument Avenue, 5uite 1cc
kichmond, vA zzzc
www.visibooks.com

h1ML and java5cript fer isuaI Learners

Publisheu by Visibools, LLC, Richnonu, VA

Copyriht

5uestions

If you have a suggestion on how to inprove this bool, senu it to
improvementsvisibooks.com. If we use it, we`ll senu you a conplete set
of all publisheu Visibools anu post your nane in the Aclnowleugenents of
the next euition.

1rademarks and 0iscIaimer

Visibools is a trauenarl of Visibools, LLC. All branu anu prouuct nanes in
this bool are trauenarls or registereu trauenarls of their respective conpanies.

Visibools nales every effort to ensure that the infornation in this bool is
accurate. However, Visibools nales no warranty, expresseu or inplieu, with
respect to the accuracy, quality, reliability, or freeuon fron error of this
uocunent or the prouucts uescribeu in it. Visibools nales no representation or
warranty with respect to this bool`s contents, anu specifically uisclains any
inplieu warranties or fitness for any particular purpose. Visibools uisclains all
liability for any uirect, inuirect, consequential, inciuental, exenplary, or special
uanages resulting fron the use of the infornation in this uocunent or fron the
use of any prouucts uescribeu in it. Mention of any prouuct uoes not constitute an
enuorsenent of that prouuct by Visibools. Data useu in exanples are intenueu
to be fictional. Any resenblance to real conpanies, people, or organizations is
entirely coinciuental.

International Stanuaru Bool Nunber: 0-9707479-2-6

First Euition
You have pernission to post this bool on a Web site, e-nail it, print it,
or pass it along for free to anyone you lile, as long as you nale no
changes or euits to its contents or uigital fornat. Male as nany copies
as you want. However, the right to sell this bool, whether in uigital or
bounu forn, is strictly reserveu to Visibools, LLC.

0ownIoad other visibooks for free at www.visibooks.com
1abIe ef Centents

lntreductien ............................................................................................... :
h1ML 8asics.................................................................... g
Create a home pae.............................................................................. q
Create the home page......................................................................................................q
view the page in a browser ............................................................................................11
Iormat paes and text.........................................................................:q
Change fonts................................................................................................................... 1q
Change text size.............................................................................................................16
Change text weight ........................................................................................................ 1
Change text color ...........................................................................................................18
Align text.........................................................................................................................1
Indent text.......................................................................................................................z1
Create lists......................................................................................................................z
Create Iinks to new paes................................................................... zy
5tep 1: Create a new page .............................................................................................z
5tep z: Link to the new page........................................................................................ z8
Create e-maiI and externaI Iinks.......................................................... y:
Create an e-mail link...................................................................................................... 1
Link to an external site ..................................................................................................
Insert and aIin raphics.................................................................... yq
Capture a graphic from the web...................................................................................q
Insert a graphic...............................................................................................................6
Align a graphic................................................................................................................8
format a graphic............................................................................................................. q1
Create a basic naviation system........................................................ qq
Link back to the home page ..........................................................................................qq
Link pages to each other ...............................................................................................q
Use graphics as links.....................................................................................................q6
Use graphics as links.....................................................................................................q
Chane pae, Iink coIors .................................................................... yo
Change background color of page ................................................................................o
Change link colors.......................................................................................................... 1
Change link colors..........................................................................................................z

Layeut 8 kaviatien...................................................... y
Lay out paes usin tabIes................................................................. y8
Create a table................................................................................................................. 8
Create a table.................................................................................................................
format a table ................................................................................................................ 6
Create a table-based home page ................................................................................. 6
Create new table-based pages......................................................................................
Create naviation bars........................................................................ 6
Create a navigation bar for a home page .................................................................... 6
Create a navigation bar for a main section page ........................................................
Add subsections to site...................................................................... 8z
Insert a table for content and subsection links..........................................................8z
Create subsection pages............................................................................................... 8q
PIace tabIes within tabIes................................................................... 88
Link to an externaI site usin frames................................................... :
lnteractivity...................................................................
Insert Nf1A tas.............................................................................. :oo
Create forms .................................................................................... :oz
0se styIe sheets................................................................................ :::
Create a style sheet......................................................................................................11z
Apply a style sheet....................................................................................................... 11q
Create link effects with style sheets........................................................................... 11
0pIoad sites to a web server.............................................................. :z:
kdvanced Layeut.......................................................... :g:
fmpIoy backround raphics............................................................ :yz
fmpIoy spacer 6IIs ...........................................................................:yy
Insert a horizontaI ruIe......................................................................:y
5pecify pae marins....................................................................... :y8

FracticaI java5cript...................................................... :q:
fnabIe roIIover raphics....................................................................:qz
view source code.......................................................................................................... 1q
Copy source code ......................................................................................................... 1qq
Modify source code......................................................................................................1q6
0pen new windows...........................................................................:yo
VaIidate form input............................................................................:yy
VaIidate form input............................................................................ :yq
5ee how it works .......................................................................................................... 1q
Insert the validation script.......................................................................................... 1
Modify the :f0kM: tag.................................................................................................16

kdditienaI keseurces .............................................................................. :y

h1ML 1a Chart .......................................................................................:y

lndex.......................................................................................................:6y


1
lntreductien

Welcone to H1MI ov! }ovoSctpi jo Vtuol Ieove. If you`ve never
useu a Visibool before, you`ll finu that it contains several hunureu
illustrations, with conparatively little text. It presents essential tasls,
breals then uown into steps, then walls you through then with
illustrations.

what you'll learn

You`ll learn how to use HTML to create a
soliu, attractive Web site that`s easy to
navigate. You`ll also learn how to uploau
it to a Web server.

You won`t becone an expert in Web
publishing-that tales practice anu real-
worlu experience. But you will learn the
funuanentals of site-builuing, anu get a
goou founuation on which to builu
professional-level slills.

Auuitional resources for acquiring expert-
level HTML anu JavaScript slills are
founu at the enu of this bool.

how you'll learn it

This bool has five sections: HTML Basics,
Layout & Navigation, Interactivity,
Auvanceu Layout, anu Practical
JavaScript.

At the enu of each tasl anu section are
practice exercises. Don`t worry if you
can`t worl through the whole bool in a
uay or two. Tale your tine, anu try to uo the practice. You can checl
your worl against exanples posteu on the Web.

IoIIow the steps
!

5ee the resuIts

z
8efore you begin

Before you begin, it`s inportant that you lnow Winuows well. A
worling lnowleuge of Winuows nales it nuch easier to learn HTML
anu JavaScript. You shoulu be faniliar with:

How uirectories worl
Winuows Explorer
Basic woru processing

Male sure you can perforn the following tasls:

Create a foluer on your conputer`s haru urive
Create a foluer within a foluer
Copy a paragraph fron one uocunent anu paste it into another.

If you have trouble uoing this, set
asiue a couple of hours to learn
Winuows basics. Have a frienu or
co-worler who is proficient with
conputers wall you through
Winuows Explorer, creating foluers
anu beconing faniliar with file
extensions.

You shoulu also practice using the
Cut, Copy, anu Paste connanus in
a stanuaru woru processing
progran. When you can uo these
things on your own, you`re reauy to
learn HTML anu JavaScript.


h1ML 8asics

In this section, you'll learn how to:

Create a home pae
Iormat text
Create Iinks to new paes
Create e-maiI and externaI Iinks
Insert raphics
Create a naviation system
Chane pae and Iink coIors

You'll build a site that looks like this:

q
Create a home pae

Create the home page

1. Open a browser, such as Internet Explorer or Netscape Navigator.

2. Open the progran Notepau. Do this by first clicling the
button on the taslbar, then Programs, then Accessories, then
Notepad.

3. At the top of the Notepau screen, type:

<HTML>

1ip: <HTML> t o iog. 1og oe tviucitov io o Web bowe. 1ht
poitculo tviucitov lei ihe Web bowe kvow ihoi whoi jollow t
o Web poge, wtiiev tv H1MI.

1og cov be wtiiev tv uppe-coe o lowe-coe leiie-ti !oevi
woiie whtch. <HTML>, <html>, o <HtMl> oe oll jtve.


4. Save the file.

5. When the Save As winuow appears, select the C:\ urive in the
Save in urop-uown list.
6. Create a new foluer by clicling on the icon.

6
7. Nane the new foluer Dogs,` then uouble-clicl it so it appears in
the Save in box.

8. In the File name textbox, type index.html.

9. In the Save as type urop-uown list, select All Files. When you`re
uone, the winuow shoulu lool lile this:


10. Save the page by clicling on the Save button.

11. Below the <HTML> tag, type:

<HEAD>

</HEAD>

1ip: 1he <HEAD> ecitov coviotv tvjowoitov ihoi !oevi how up
ov ihe poge whev ti t vtewe! tv o bowe. Noie ihe clotvg
</HEAD> iog. tv H1MI, you wui gtve ihe bowe tviucitov io
ev! oweihtvg o well o ioi ti.

bome pae fiIe names

All Web pages have a .htnl extension (or .htn).

All hone pages have the file nane index.html. index.html
cones up autonatically when the auuress of a uonain or
uirectory where it`s locateu is typeu into a browser.

For instance, if you go to www.visibools.con, the hone page
appears autonatically. That`s because its file nane is
index.html. If the file nane of the Visibools hone page was
homepage.html, youù have to type
www.visibooks.com/homepage.html to get it to appear.

1he Mtcooji excepitov. To get your hone page to cone up
autonatically on a Web server running Microsoft`s Internet
Infornation Server as it`s operating systen, give your hone
page the file nane default.htm.

8
1ip:  t colle! o cowwevi.
Whoieve iexi t beiweev ihe !ohe wovi how up ov o bowe
ceev-ti ovly vttble tj oweove vtew ihe poge H1MI co!e. You
vee! io tvclu!e ihe ! jo iht io wok.

12. Below the </HEAD> tag, title the page A Hone Page About
Dogs` by using <TITLE> tags:

<TITLE>
A Home Page About Dogs
</TITLE>

1ip: Noie ihoi ihe iexi 'A Hone Page About Dogs t voi o iog. Ii t
iexi uouv!e! by iog. 1he <TITLE> iog iell ihe bowe whoi io
!o wtih ihe iexi. woke ti ihe itile oj ihe poge.


13. Below the </TITLE> tag, auu:

<BODY>

</BODY>

1ip: Avyihtvg you wovi io be vttble tv o bowe wotv wtv!ow,
pui beiweev ihe <BODY> ov! </BODY> iog.

Pae titIes

The title of a Web page uescribes the page. It`s what appears in
a browser`s History list. The title also shows up as a linl when a
page cones up in a search engine. If all your pages have
uiscrete, uescriptive titles, they`ll be easier for people to finu.

The page title shows up in the top, or title,` bar of the browser
useu to view it. The title of this page is Dogs.

1o
14. Below the </BODY> tag, close the </HTML> tag. When you`re
finisheu, the coue shoulu lool lile this:

15. Between the <BODY> anu </BODY> tags, type the worus:

Dogs Home Page

16. Save the page.

11
view the page in a browser

1. Go to the browser anu on its nenu bar, clicl File, then Open.

1ip: Ij youe utvg Neicope Cowwuvtcoio tvieo! oj Ivievei
Ixploe, cltck Open Page, ihev Choose File.

2. When the Open winuow appears, clicl the Browse button.

1z
3. When the new winuow appears, navigate to the Dogs foluer in the
Look in urop-uown list, then select the hone page: index.html.

4. Clicl the Open button, then the OK button. The page shoulu
cone up in the browser anu lool lile this:

You have createu a hone page titleu A Home Page About
Dogs.

The hone page`s file nane is index.html.

It is locateu in a foluer calleu Dogs on the C:\ urive.

1
Practice: Create a home pae

A. Whoi t ihe coeci jtle vowe jo o howe poge?

I. Why t ihee o pectol jtle vowe jo howe poge?

C. Why t ti twpoiovi ihoi ihe howe poge-ov! oll oihe poge tv o
Web tie-hove occuoie itile?

. Whoi t ihe !tjjeevce beiweev o poge itile ov! ti jtle vowe?

Answers

A. tv!ex.hiwl
I. I i ollow howe poge io oppeo tv o bow e wtihoui iyptvg ihe jtle vowe o poi oj o Web o!!e .
C. Accuoie itile ollow people io jtv! poge eo te whev bookwoktvg ihew o eochtvg tv o bow e Ht ioy lt i.
. A poge itile oppeo tv ihe 1tile bo oi ihe iop oj ihe bow e. I i plotv iexi, uch o '1he Swtih Fowtly. Vocoitov
Ptciue , ihoi woke ti eo y jo people io keep iock oj o poge. A poge jtle vowe, uch o vocptc .hiwl, t how ihe
cowpuie keep iock oj ti.

1q
Iormat paes and text

Change fonts

1. In front of the worus Dogs Hone Page
,` insert a <FONT> tag
with the attribute FACE=arial:

<FONT FACE=arial>Dogs Home Page</FONT>

2. After the worus, close the <FONT> tag:

<FONT FACE=arial>Dogs Home Page</FONT>

1ip: 1htvk oj ov oiitbuie o o ub-tviucitov io ihe bowe. Iv iht
coe, ihe <FONT> iog iell ihe bowe ihoi iexi wtll be chovge!, ov!
ihe FACE oiitbuie iell ti how io chovge, pectjytvg ihe Atol
iypejoce.

1
3. View the page in the browser. Clicl the browser`s Refresh button,
anu the page shoulu lool lile this:

1ip: Ij o poge !oevi look ltke ti uppoe! io-o voihtvg how up
oi oll-check ihe H1MI co!e youve wtiiev. You wtghi hove leji oui
o quoie o wo!e owe oihe woll wtioke. Soweihtvg ihoi eew
tvtgvtjtcovi cov weck o poge.

<FONT FACE=arial>

web fonts

When text is vieweu on a conputer, only fonts installeu on the
conputer can be seen. For instance, if soneone createu a page
that specifieu the 6AJ font, alnost no one viewing it woulu
see it in 6AJ because very few conputers have that font
installeu. Conputers without 6AJ woulu uisplay text in the
uefault font:
Times New Roman.

All Winuows conputers have the Arial font installeu.
Winuows 93 anu later conputers have Verdana. Macintoshes
have Helvetica, the font that Arial is baseu upon.

To cover all bases, specify nultiple fonts:

<FONT FACE=verdana,arial,helvetica>
Nissin end quote (")
1ext is in the
AriaI font

16
Change text size

1. In Notepau, auu the SIZE=+4 attribute to the <FONT> tag:

<FONT FACE=arial SIZE=+4>Dogs Home
Page</FONT>

2. Save the page anu view it in the browser. It shoulu lool lile this:

1
Change text weight

1. In Notepau, auu the <B> tag in front of the worus Dogs Home
Page` anu close it after then:

<FONT FACE=arial SIZE=+4><B>Dogs Home
Page</B></FONT>

1ip: Whev tveitvg wulitple iog, oovge ihew tv wto-twoge
o!e. 1he iog ov! iexi obove oe o goo! exowple. tvce ti ioi wtih
ihe <FONT> iog, ti ev! wtih ihe </FONT> iog. 1og ihoi oevi
oovge! tv wto-twoge o!e cov coue !tploy poblew tv owe
bowe.


18
Change text color

1. In the <FONT> tag, auu the attribute COLOR=red:

<FONT FACE=arial SIZE=+4 COLOR=red>

2. Save the page. View it in the browser, anu the text shoulu show up
reu.

3. Change the text color to blacl, then save the page.

<FONT FACE=arial SIZE=+4 COLOR=black>

1
Align text

1. Beneath the present text anu tags, insert a <P> tag to begin a new
paragraph.

2. Beneath the <P> tag, insert the tag <FONT FACE=arial
SIZE=-1> anu the worus These are my favorite
breeds of dog:

3. Within the <P> tag, auu the attribute ALIGN=right:

<P ALIGN=right>

4. Auu a closing </P> tag after the new paragraph.

<P ALIGN=right>

<FONT FACE=arial SIZE=-1>These are my
favorite breeds of dog:

</P>

zo
1ip: Uuolly o <P> iog equte vo clotvg </P> iog tv H1MI, bui
tv iht coe ihe ALIGN=right oiitbuie t ue!. 1he clotvg
</P> iog ojie ihe poogoph keep ihe bowe jow tghi-oltgvtvg
whoieve t beveoih ti.

5. Save the page, then view it in the browser. It shoulu lool lile this:

6. Renove the ALIGN=right attribute fron the <P> tag.

1ip: 1o geveoie o tvgle-ltve beok oihe ihov ihe !ouble-poce o
<P> iog geveoie, ue ihe <BR> iog. Puiitvg o <BR> o 'Ieok iog
beiweev iwo ltve oj iexi wtll buwp ihe ecov! ltve !owv io ihe vexi
ltve.

<FONT FACE=arial SIZE=+4><B>Dogs Home
Page</B></FONT>
<BR>
<FONT FACE=arial SIZE=-1>These are my
favorite breeds of dog:

z1
Indent text

1. Below the text, These are ny favorite breeus of uog:,` insert three
new paragraphs:

<P>Chesapeake Bay Retriever</P>

<P>German Shepherd</P>

<P>Yorkshire Terrier</P>

2. Enclose these paragraphs in Unoruereu List tags to inuent then:

<UL>

<P>Chesapeake Bay Retriever</P>

<P>German Shepherd</P>

<P>Yorkshire Terrier</P>

</UL>

zz

1ip: Noitce how oll ihe iexi below ihe <FONT FACE=arial
SIZE=-1> iog look ihe owe. Ii wtll ioy ihoi woy uvitl ihe
clotvg </FONT> iog t tveie!.

z
Create lists

1. With the three breeus of uog, replace the <P> anu </P> tags with
<LI> tags to generate bullets in front of the text that follows:

<UL>

<LI>Chesapeake Bay Retriever

<LI>German Shepherd

<LI>Yorkshire Terrier

</UL>


zq
Practice: Iormat paes and text

A. Why oe ihe woi cowwov jovi chotce Atol, Ve!ovo, ov!
Helveitco?

B. Whoi ktv! oj cowpuie hove ihe jovi Atol tviolle!? Whtch hove
Helveitco tvieo!?

1. Change the title of the hone page to My Favorite Dogs.`

2. Change the bulleteu list to a nunbereu list.

1ip: Ue <OL> tvieo! oj <UL> io geveoie o vuwbee! lti.

3. Change the nunbereu list bacl to a bulleteu list.

4. Male the list itens bolu. When you view it in the browser, the page
shoulu lool lile this:

Answers

A. 1ho e oe ihe jovi ihoi wo i Wtv!ow cowpuie hove tv iolle!.
I. Wtv!ow cowpuie hove Atol, Moc hove Helveitco.

z
Create Iinks to new paes

5tep 1: Create a new page

1. In Notepau, change the title of the page to Chesapeake Bay
Retrievers,` then tale out all the tags anu text between the
<BODY> anu </BODY> tags.

2. On the nenu bar, clicl File, then Save As.

3. Save the new page with the file nane chesapeake.html.

1ip: Iewewbe io Save as type: All Files.

z6

4. Beneath the <BODY> tag, type Chesapeale Bay Retrievers.` This is
the page heauing. Male it veruana, bolu, size +3:

<BODY>

<FONT FACE=verdana SIZE=+3><B>Chesapeake
Bay Retrievers</B></FONT>

</BODY>

IiIe names for the web

Most Web servers are Unix- or Linux-baseu, which uon`t ueal
cleanly with spaces in file nanes. For instance if you nane a
file fido page.html, it nay show up in the URL box of the
browser as fido%20page.html.

Also, Web servers are case-sensitive, so leeping file nanes
lower-case elininates a potential source of nistales.

Male all file nanes in a Web site-pages, graphics anu
foluers-lower-case, with no spaces.

Coeci jtle vowe. german.html

Ivcoeci. German Shepherds.html

z
5. Save the page.

Providin naviation cIues with text size

The heauing of the Chesapeale Bay Retriever page is naue one
size snaller than the heauing of the hone page. That`s because
the CBR page is one step uown in the site hierarchy.

Ievel 1: Dogs
(top level heauing; SIZE=+4)

Ievel 2: Chesapeale Bay Retrievers
(seconu-level heauing; SIZE=+3)

Maling the heauing of the CBR page snaller than the hone
page`s heauing helps show people where they are in the site.

0os
Chesapeake 8ay
ketrievers

z8
5tep z: Link to the new page

1. Open the hone page (index.html) in Notepau. In front of the first
iten, Chesapeake Bay Retriever, insert an anchor tag.
Then close the anchor tag :

<LI><B><A HREF=chesapeake.html>Chesapeake
Bay Retriever</A></B>

bow an anchor ta works

Anchor tags create a cliclable linl to another page.

A pae with this fiIe name. .is Iinked to these words.

<a href=filename.html>New Page</a>

z
2. Save the hone page anu view it in the browser. The worus
Chesapeake Bay Retriever shoulu be a linl, anu the page

3. Clicl on the Chesapeake Bay Retriever linl. The Chesapeale
Bay Retriever page shoulu appear in the browser.

o
Practice: Create Iinks to new paes

A. Why houl! jtle vowe be lowe-coe ov! jee oj poce?

I. Why houl! ihe heo!tvg ov ecitov poge ,Cheopeoke Ioy
Ieiteve, Cewov Shephe!) be wolle ihov ihe heo!tvg oj ihe
howe poge?

1. Create new pages for Gernan Shepherus anu Yorlshire Terriers.

Pae 1itIe IiIe hame
German Shepherds German Shepherds german.html
Yorkshire Terriers Yorkshire Terriers yorkshire.html

2. On the hone page, linl the worus German Shepherd anu
Yorkshire Terrier to their pages.

3. On the hone page, renove the worus Home Page` after
Dogs.`

4. On the Chesapeale Bay Retriever, Gernan Shepheru anu Yorlshire
Terrier pages, put the page heauings in the sane font anu weight as
the hone page (Veruana; bolu).

5. Male the page heauings of these pages one size snaller than the
heauing on the hone page, just lile on the Chesapeale Bay
Retriever page.

6. Save all pages anu clicl on the hone page`s linls to nale sure they
worl.

Answers

A. Iecou e wo i Web eve !eol beiie wtih lowe-co e, pocele jtle vowe .
I. I i povt!e tie u e wtih o vt uol !t itvcitov beiweev jt i-level ,howe) poge ov! ecov!-level ,wotv ecitov) poge .

1
Create e-maiI and externaI Iinks

Create an e-mail link

1. In a new paragraph beneath the list, type the sentence For more
information, contact info@visibooks.com.`

2. Surrounu the e-nail auuress with anchor tags, but insteau of
linling it to a Web page, use the mailto connanu to linl it to an
e-nail progran:

For more information, contact
<A HREF=mailto:info@visibooks.com>
info@visibooks.com</A>

z
3. Save the page. When you view it in the browser, it shoulu lool lile
this:

bow e-maiI Iinks work

When soneone goes to a Web site anu clicls on an e-nail linl,
it`s supposeu to open the e-nail progran on that person`s
conputer anu insert the auuress into a new nessage.

If the person`s e-nail progran isn`t configureu correctly, this
won`t worl. That`s why e-nail linls shoulu use the e-nail
auuress as a linl: so people can enter the auuress nanually if
they have to.


Link to an external site

1. In Notepau, auu a new sentence after the last one. Type the
sentence, Please also visit www.dogs.com.`

2. Surrounu the Web auuress www.dogs.com with these anchor
tags to linl it to the external Web site:

<A
HREF=http://www.dogs.com>www.dogs.com</A>

1ip: Fo ov exievol ltvk io wok, you wui iype http:// o poi oj
ihe Web o!!e.

3. Save the page.

4. Preview the page in the browser, then clicl on the linl to see if it
linls to the external site www.uogs.con.

5. Close the browser.

q
Insert and aIin raphics

Capture a graphic from the web

1. Open a new browser winuow.

2. Go to the Web site www.visibooks.com/dogpics.

3. Place your cursor on top of the picture of the Chesapeale Bay
Retriever, then clicl with your right nouse button.

kiht mouse
button


4. Clicl Save Picture As.

5. When the Save Picture winuow appears, select the Dogs foluer
in the Save in urop-uown list.

6. Create a new foluer within Dogs calleu graphics.`

7. Double-clicl on the graphics foluer so it appears in the Save in
urop-uown list.

8. Clicl the Save button to save the graphic insiue the graphics
foluer.

1ip: Ceoitvg iht epooie ub-jol!e io hol! you tie gophtc
woke ihe tie eote io ogovt:e ov! up!oie.

6
Insert a graphic

1. In Notepau, open the Chesapeale Bay Retriever page, file nane
chesapeake.html.

2. Create a new paragraph unuer the nain heauing.

3. In the new paragraph, insert an inage tag:

<IMG SRC=graphics/chessie.gif>

1ip: Noitce ihoi tv iht twoge iog ihee o 'poih. Fo ihe twoge
ouce, ihe iog jti potvi io ihe gophtc jol!e, ihev io ihe jtle vowe
oj ihe twoge wtihtv ti.

foIder raphic


4. Save the page, then view it in the browser. It shoulu now lool lile
this:

8
Align a graphic

1. In a new paragraph below the graphic, type in:

Chesapeake Bay Retrievers love water. If you
throw tennis balls in the water, these dogs
will chase them and bring them back until
your arm falls off.


2. Save the page anu view it in the browser. The page shoulu lool lile
this:

3. Go bacl to Notepau anu auu the ALIGN=left attribute to the
<IMG> tag:

<IMG SRC=graphics/chessie.gif
ALIGN=left>

qo
4. Save the page anu view it in the browser (just clicl the Refresh`
or Reload` button). It shoulu lool lile this:

q1
format a graphic

1. In the Chesapeale Bay Retriever page, auu this ALT attribute to the
<IMG> tag:

<IMG SRC=graphics/chessie.gif ALIGN=left
ALT=Chesapeake Bay Retriever>

2. Auu the VSPACE=4 anu HSPACE=12 attributes as well:

ALT=Chesapeake Bay Retriever VSPACE=4
HSPACE=12>

3. Also, auu the BORDER=1 attribute:

HSPACE=12 BORDER=1>

Alt` text allows visually-inpaireu people to lnow what a
graphic represents. Alt text also allows search engines to inuex
visual content.

qz
4. Save the page anu view it in the browser. It shoulu now lool lile
this:

5. Move your cursor onto the graphic. The Alt` text-an alternative
text uescription of the graphic-shoulu pop up.

The text shoulu be aligneu with the top of the graphic.

1ip: Ij you kvow ihe !twevtov oj o gophtc, you cov woke ti loo!
joie by pectjytvg ti wt!ih ov! hetghi tv ptxel.

HSPACE=12 BORDER=1 WIDTH=150
HEIGHT=189>

An b5PACf of :z creates a
horizontaI space of :z pixeIs
around the raphic that nothin
can occupy
A 8order of : creates a :-pixeI
border around the raphic

q
Practice: Insert raphics

A. Why houl! you pectjy Ali iexi jo eoch gophtc you tvei?

1. Go to www.visibooks.com/dogpics. Save the Gernan Shepherus
graphic in C:\dogs\graphics with the file nane shepherds.gif.

2. Save the Yorlshire Terrier graphic in C:\dogs\graphics with the
file nane yorkie.gif.

3. Insert shepherds.gif into the Gernan Shepherus page in a new
paragraph below the heauing.

4. Insert yorkie.gif into the Yorlshire Terriers page in a new
paragraph below the heauing.

5. On the Gernan Shepherus page, type German Shepherds are
smart dogs` in a paragraph below the graphic.

6. On the Yorlshire Terriers page, type Yorkshire Terriers are
cute` in a paragraph below the graphic.

7. On both pages, align the text to the siue of the graphic, as on the
Chesapeale Bay Retrievers page.

8. On both pages, give the graphic a boruer of 1, vspace of 4, anu
hspace of 12.

9. On all three Dog` pages, put all paragraph text (not the nain
heauings) in the arial font, with a size of -1.

Answers

A. Ali iexi woke ti eo te jo vt tov-twpote! people io uv!e iov! o poge covievi, ov! woke ti eo te jo eoch evgtve io
coiolog ti.

qq
Create a basic naviation system

Link back to the home page

1. In Notepau, open the Chesapeale Bay Retrievers page,
chesapeake.html.

2. Type the woru Home` in a new paragraph beneath the first
paragraph.

3. Enclose it in anchor tags that linl it bacl to the hone page:

<A HREF=index.html>Home</A>

1ip: Iewewbe, index.html t ihe jtle vowe jo ihe howe poge.

4. Save the page, anu view it in the browser. The woru Home shoulu
now be a linl, anu the page shoulu lool lile this:

5. On the Gernan Shepherus page, create a linl bacl to the hone
page. Do this the sane way you createu the linl for the Chesapeale
Bay retriever page.

6. On the Yorlshire Terriers page, create the sane sort of linl bacl to
the hone page.

q
Link pages to each other

1. In Notepau, open the Chesapeale Bay Retrievers page.

2. Following the Home linl, type:

| Chesapeake Bay Retrievers | German Shepherds |
Yorkshire Terriers

3. Male the worus Chesapeake Bay Retrievers` bolu to
show site users You are here.`

4. Linl the worus German Shepherds` to the Gernan Shepherus
page:

<A HREF=german.html>German Shepherds</A>

5. Linl the worus Yorkshire Terriers` to the Yorlshire Terriers
page.

q6

5howin "you are here"

A site`s navigational systen shoulu show people two things:
where they are, anu where they can go.

To show people where they are, nale the linl corresponuing
to the current page into plain text. This lets users lnow that if
they can`t go to that page, they nust be looling at it.

Home | Chesapeake Bay Retrievers | German Shepherds | Yorkshi re Terriers

You are here

Maling the text bolu reinforces the you are here` nessage.

q
Use graphics as links

1. In Notepau, open the hone page. Below the bulleteu list of linls, in
a new paragraph, insert the Chesapeale Bay Retriever, Gernan
Shepheru anu Yorlshire Terrier graphics:

<IMG SRC=graphics/chessie.gif>
<IMG SRC=graphics/shepherds.gif>
<IMG SRC=graphics/yorkie.gif>

2. Enclose the first inage tag within anchor tags that linl it to the
Chesapeale Bay Retriever page:

<A HREF=chesapeake.html><IMG
SRC=graphics/chessie.gif></A>

3. Save the page, then preview it in the browser. When you clicl on
the Chesapeale Bay Retriever graphic, it shoulu tale you to the
Chesapeale Bay Retriever page.

4. Go bacl to Notepau anu auu the BORDER=0 attribute to the
first inage tag:

<A HREF=chesapeake.html><IMG
SRC=graphics/chessie.gif BORDER=0></A>

q8
5. Save the page anu view it in the browser again. The blue linl
boruer arounu the Chesapeale Bay Retriever graphic shoulu be
gone:

q
Practice: Create a naviation system

A. Whoi o goo! woy io how tie ue 'You oe hee?

Task: To nale your Dogs site lool lile the site at
www.visibooks.com/dogs.

1. In Notepau, open the Gernan Shepherus page, german.html.

2. Following the Home linl, type:

| Chesapeake Bay Retrievers | German Shepherds |
Yorkshire Terriers

3. Male the worus German Shepherds bolu.

4. Linl the worus Chesapeake Bay Retrievers anu
Yorkshire Terriers to their corresponuing pages.

5. Save the page.

6. Using the sane systen, create navigation linls for the Yorlshire
Terriers page. Then save the page.

7. On the hone page, linl the Gernan Shepherus graphic to the
Gernan Shepherus page. Do the sane for the Yorlshire Terriers
graphic.

8. Tale out the linl boruers of these graphics.

9. When finisheu, preview your Dogs site in the browser. It shoulu
lool lile the site at www.visibooks.com/dogs.

Answers

A. Moke ihe ltvk coe pov!tvg io ihe cuevi poge bol!, ov! plotv iexi ,vo lovge o ltvk).

o
Chane pae, Iink coIors

Change background color of page

1. Open the hone page in Notepau.

2. In the <BODY> tag, auu the attribute BGCOLOR=#ffffcc:

<BODY BGCOLOR=#ffffcc>

3. Save the page anu view it in the browser. The baclgrounu color of
the page shoulu now be pale yellow.
bexadecimaI coIors

The ffffcc that stanus for pale yellow is a hexauecinal
color. Hexauecinal colors allow you to specify colors nore
precisely than you can with worus. For exanple, you coulu use
the attribute BGCOLOR=yellow in the bouy tag anu the page
baclgrounu woulu turn bright yellow, but if you useu
BGCOLOR=pale yellow, that woulun`t worl.

For shaues of color, hexauecinals nust be useu. They worl
lile this:

Conputers show color as a nix of reu, green anu blue. In
hexauecinal colors, the first pair of letters or nunbers signify
reu, the seconu pair signify green, anu the thiru pair signify
blue:

Ped Creen |ue
ff ff cc

1

hexacecimal cclcrs, ccntinuec

The color values go fron the naxinun anount of color (ff)
to no color at all (00):

Max M|d-range None
ff cc 99 66 33 00

Navy blue woulu be shown in hexauecinals as no reu (00), no
green, (00), anu a little bit of blue (66):

000066

A list of hexauecinal color coues is posteu at:

www.webmonkey.com/reference/color_codes

z
Change link colors

1. In the hone page, auu the attribute LINK=#ff0000 to the
<BODY> tag:

<BODY BGCOLOR=#ffffcc LINK=#ff0000>

This nales the linls on the page show up in reu.

2. Auu the attribute VLINK=#00ff00 to the <BODY> tag:

<BODY BGCOLOR=#ffffcc LINK=#ff0000
VLINK=#00ff00>

This nales visiteu linls show up in green.

1ip: Vttie! ltvk oe ltvk io poge ihoi hove oleo!y beev vtewe! tv
ihe bowe.


3. Save the page anu view it in the browser. The linls on the page
shoulu either be reu or green.

Consistent Iink coIors

Linl colors shoulu be consistent throughout a Web site. If the
linls on one page are reu, they shoulu be reu on every page.

Learning that reu equals linl` once is nuch easier for people
than having to figure out the linl color for each page or section
of a site.

q
Fractice: h1ML 8asics

Task: To create a Web site about cats that lools lile the site at
www.visibooks.com/cats.

1. Create a new hone page anu title it The Wonderful World of
Cats.`

2. Save it in a new foluer on the C:\ urive calleu Cats:

C:\Cats

3. Male the heauing of the page reau The Wonderful World of
Cats.`

4. Below the nain heauing on the hone page, insert a bulleteu list:

House Cats
Alley Cats
Big Cats

5. Male these itens arial, with a size of -1.


6. Linl each list iten to a new page about it. For instance, linl
House Cats` to a new page about house cats with file nane
housecats.html.

7. On each of these new pages, put a descriptive heading at the top
of the page. For instance, the words House Cats at the top of
the house cats page.

8. Put the nain heauings of all four pages in the Arial font. Male
then bolu. Give the hone page`s heauing a size of +3. Give the
heauings of the other pages a size of +2.

9. On each page, write a uescriptive sentence or two in a new
paragraph below the nain heauing. Male it arial, with a size of -1.

10. Go to www.visibooks.com/catpics anu get the three cat graphics
there. Put then in a foluer calleu graphics` within the C:\Cats
foluer.

6
11. Insert the appropriate graphic on each of the 3 pages between the
nain heauing anu the uescriptive text below.

12. Align each graphic left, then specify vspace of 4 anu hspace of 16.

13. Linl each of the three cat` pages bacl to the hone page, anu to
each other. On each page, nale the you are here` linl into bolu,
plain text.

14. Male the baclgrounu color of each page light grey.

15. Male the linl color on each page bright reu. Male the visiteu linl
color orange.

16. Preview the site in the browser. It shoulu lool lile the site at
www.visibooks.com/cats.


Layeut 8 kaviatien


Lay out paes usin tabIes
Create naviation bars
Add subsections to site
PIace tabIes within tabIes
Link to an externaI site usin frames


8
Lay out paes usin tabIes

1abIes and web pae Iayout

Alnost all professional-quality Web sites are laiu out using
tables. Just lile a spreausheet has cells that contain nunbers, a
table on a Web page has cells that contain linls, graphics, anu
text.

The lines on this page clearly show its layout with table cells:

ceII ceII ceII


Create a table

1. Create a new foluer on the C:\ urive calleu Travel.`

2. In Notepau, create a hone page (file nane index.html) titleu
Traveling Down South.` Save it in the Travel foluer.

1ip: Moke ue ihoi you vew howe poge ho ihe coeci jtle vowe-
tv!ex.hiwl-ov! oll veceoy iog.

<HTML>
<HEAD>
</HEAD>
<TITLE>
Traveling Down South
</TITLE>
<BODY>

</BODY>
</HTML>

3. You`re going to create a sinple one-row, two-cell table that lools
lile this:

links content

4. The first step is to begin the table. Below the <BODY> tag, begin
your table with the <TABLE> tag:

<BODY>
<TABLE>

5. Below the <TABLE> tag, start a row with the <TR> (Table Row)
tag:

<BODY>
<TABLE>
<TR>

6o
6. In the table row, start the first cell with the <TD> (Table Data) tag:

<BODY>
<TABLE>
<TR>
<TD>

7. After the <TD> tag, type the woru links,` then close the cell
with the </TD> tag:

<BODY>
<TABLE>
<TR>
<TD>Links</TD>

You`ve createu the first cell in the row:

links content

8. Now create the seconu cell in the row by auuing a <TD> tag, the
woru Content, anu closing the cell with a </TD> tag:

<BODY>
<TABLE>
<TR>
<TD>Links</TD>
<TD>Content</TD>

links content

61
9. Finish the table by closing the row with a </TR> tag, then closing
the table with the </TABLE> tag:

<BODY>
<TABLE>
<TR>
<TD>Links</TD>
<TD>Content</TD>
</TR>
</TABLE>

6z
10. You have set up the basic table. To nale it possible to see the table
outlines in a browser, auu the attribute BORDER=1 to the
<TABLE> tag:

<BODY>
<TABLE BORDER=1>
<TR>
<TD>Links</TD>
<TD>Content</TD>
</TR>
</TABLE>

11. Save the page, then view it in the browser. It shoulu lool lile this:

6
format a table

1. Now you`ll extenu the table. In Notepau, auu the WIDTH=100%
attribute to the <TABLE> tag:

<BODY>
<TABLE BORDER=1 WIDTH=100%>
<TR>
<TD>Links</TD>
<TD>Content</TD>
</TR>
</TABLE>


6q
Percentae vs. fixed-width tabIes

When laying out a page using a table, set the table`s wiuth at
100%. That way, the contents of the page can stretch to fill the
whole nonitor, regaruless of the nonitor`s resolution.

If you want it to fit a fixeu-wiuth table on all nonitors, you`re
liniteu to a table 380 pixels wiue:

6qo pixeIs
width of
Iow-
resoIution
monitor
-
zo pixeIs
browser offset: the
distance that pae
content is indented
from the sides of the
browser
-
qo pixeIs
zc for the
verticaI
scroII bar,
pIus zc extra
=
y8o pixeIs
width
avaiIabIe
for tabIe

Creating pages with fixeu-wiuth tables offers precise control,
but wastes space on higher-resolution nonitors:

Pae:
Iaid out usin a tabIe 8c pixeIs wide

Nonitor used to view pae:
1z8c pixeIs wide

6

3. Renove the table boruer by specifying BORDER=0:

<BODY>
<TR>
<TD>Links</TD>
<TD>Content</TD>
</TR>
</TABLE>

4. Male the first cell light grey by auuing the attribute
BGOLOR=#CCCCCC to the first <TD> tag:

<BODY>
<TR>
<TD BGCOLOR=#CCCCCC>Links</TD>
<TD>Content</TD>
</TR>
</TABLE>


66
6. You`ll notice that the woru
Links is right up against the euge of the
left-hanu cell. To auu a 16-pixel nargin between the euge of the
cells anu their contents, auu the attribute CELLPADDING=16
to the <TABLE> tag:

<BODY>
<TABLE BORDER=0 WIDTH=100%
CELLPADDING=16>
<TR>
<TD>Content</TD>
</TR>
</TABLE>

7. To elininate the spacing between cells, auu the attribute
CELLSPACING=0 to the <TABLE> tag:

<BODY>
CELLPADDING=16 CELLSPACING=0>
<TR>
<TD>Content</TD>
</TR>
</TABLE>


CeII Paddin creates a cushion
of pixeIs between the ede of
the ceII and what's inside it.
CeII 5pacin is the
space between ceIIs.
In this case, o pixeIs

6
Create a table-based home page

1. Create a foluer calleu graphics` insiue the Travel foluer on your
haru urive.

2. Go to www.visibooks.com/travelpic. Capture the graphic there
(uva.gif) anu save it in the graphics foluer.

3. In the right-hanu cell on the hone page, replace the woru
Content
with the heauing Traveling South.` Give the heauing a size
of +3, put it in the Veruana font, anu nale it bolu.

4. Insert the graphic in a new paragraph beneath the heauing.

5. Unuer the graphic, auu the following sentences as a new paragraph:

If you've got a couple of weeks for vacation, you might want
to visit the South. Richmond, Williamsburg, and Charleston
are all beautiful cities.

Male the text arial, size -1.

68
6. In the left-hanu cell, replace the woru
Links with the nanes of this
site`s nain sections: Richmond, Williamsburg anu Charleston.
Separate then with <P> tags anu put then in the arial font, at size
-1.

The coue for the page can lool lile this:

6

o
8. To bring the left-hanu cell`s content to the top of the cell, auu the
attribute VALIGN=top to the first <TD> tag. (To cover all
bases, auu the attribute to the seconu <TD> tag as well):

<TR>
<TD BGCOLOR=#CCCCCC VALIGN=top>
<FONT FACE="arial" SIZE=-1>
Richmond
<P>
Williamsburg
<P>
Charleston
</FONT>
</TD>
<TD VALIGN=top>
<FONT FACE="verdana" SIZE=+3><B>Traveling
South</B></FONT>
<P>
<IMG SRC="graphics/uva.gif">
<P>
<FONT FACE="arial" SIZE=-1>If you've got a
couple of weeks for vacation, you might want
to visit the South. Richmond, Williamsburg,
and Charleston are all beautiful
cities.</FONT>
</TD>
</TR>
</TABLE>

1
9. To control the wiuths of the table cells, auu the attribute
WIDTH=20% to the first <TD> tag, anu the attribute
WIDTH=80% to the seconu:

<TR>
<TD BGCOLOR=#CCCCCC VALIGN=top>
<FONT FACE="arial" SIZE=-1 WIDTH=20%>
Richmond
<P>
Williamsburg
<P>
Charleston
</FONT>
</TD>
<TD VALIGN=top WIDTH=80%>
<FONT FACE="verdana" SIZE=+3><B>Traveling
South</B></FONT>
<P>
<IMG SRC="graphics/uva.gif">
<P>
<FONT FACE="arial" SIZE=-1>If you've got a
couple of weeks for vacation, you might want
to visit the South. Richmond, Williamsburg,
and Charleston are all beautiful
cities.</FONT>
</TD>
</TR>
</TABLE>

z
this:


Create new table-based pages

1. On the Notepau nenu bar, clicl Edit, then Select All.

2. Once all the coue on the page is selecteu, clicl Edit, then Copy.

3. On the nenu bar, clicl File, then New.

4. When a new blanl page cones up, clicl Edit, then Paste.

q
5. Save the new page at C:\Travel with the file nane richmond.html.

6. Title the new page Richmond, VA.

7. Open a browser anu go to www.visibooks.com/travelpic/richpic.
Capture the Richnonu, Virginia graphic there (capitol.jpg) anu
place it in the graphics foluer.

8. Replace the Traveling South heauing with one that reaus
Richmond, Virginia. Give it a size of +2.

9. Replace the hone page graphic with the Richnonu graphic.
Beneath the graphic, in a new paragraph, type the sentence,
Richmond is the capital of Virginia.

10. Auu the woru Home` below the worus in the left-hanu cell. When
you`re uone, the page shoulu lool lile this:


Practice: Lay out paes usin tabIes

A. Why !o you uuolly wovi io ceoie ioble wtih o pecevioge wt!ih,
oihe ihov o jtxe!-ptxel wt!ih?

Task: To nale your Travel site lool anu worl lile the one at
www.visibooks.com/travel.

1. Create pages for Williamsburg anu Charleston just lile the
Richmond page.

Get the graphic anu text for the Williansburg page at
www.visibooks.com/travelpic/willpic. Get the Charleston graphic
anu text at www.visibooks.com/travelpic/charlpic.

2. Using the worus Richmond, Williamsburg, Charleston, anu
Home in the left-hanu cell of each page, linl all the pages in this
Web site to each other.

612 ovi jogei io iovjow ihe ltvk ihoi how 'You Ae Hee
tvio bol!, plotv iexi.

3. Insert the text anu graphics in their appropriate pages.

4. Align all graphics to the left. Give then vspace of 4 pixels anu
hspace of 12 pixels. Give each graphic appropriate Alt text.

5. When you`re uone, preview the site in the browser. It shoulu lool
anu worl lile www.visibooks.com/travel.

Answers

A. Ftxe!-wt!ih ioble wo ie poce ov! woke poge look o bti po e whev vtewe! ov htghe-e oluitov wovtio .

6
Create naviation bars

Create a navigation bar for a home page

1. Create a foluer calleu Travel West` on your haru urive at
C:\Travel West.

2. Create a hone page titleu Traveling West for Vacation.` Save it
in the Travel West foluer.

3. Between the <BODY> anu </BODY> tags, create a table with one
row anu 3 cells in the row:

<TABLE>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>

4. Give the <TABLE> tag these attributes:

WIDTH=100%
Border=0
CELLPADDING=4
CELLSPACING=0

5. In the table`s first cell, enter the woru California. In the
seconu cell,
The Rockies, anu in the thiru cell, The
Midwest.

6. Male each cell 33% wiue (except for the niuule one, which has to
be 34%: their sun nust equal the table wiuth of 100%).


7. Center the worus in each cell with <CENTER> tags:

<TD WIDTH=33%>
<CENTER>
California
</CENTER>
</TD>
<TD WIDTH=34%>
<CENTER>
The Rockies
</CENTER>
</TD>
<TD WIDTH=33%>
<CENTER>
The Midwest
</CENTER>
</TD>

8. Change the text in each cell to arial, size -1, anu change the
baclgrounu color of all cells to light grey (#cccccc).

9. When you`re uone, preview the page in the browser. The table

10. Below the table, in a new paragraph, enter the heauing
Traveling West.` Male it arial, size +4, bolu.

11. Below that, auu a new paragraph with this text:

When you go West, be sure to visit the
sights of California, the natural wonders of
the Rockies, and the cities of the Midwest.

8
12. Male the new paragraph veruana, size -1 anu save the page.

13. View the page in the browser. It shoulu lool lile this:

Create a navigation bar for a main section page

1. Create a new page with file nane california.html. Title it
Vacationing in California.

2. Male the table just lile the one on the hone page, except with 4
cells insteau of 3.

1ip: ovi jogei io chovge ihe cell wt!ih. 1hee oe vow jou cell,
ov! ihet wt!ih wui o!! up io 1uu. 1hoi weov 23 pe cell.

3. Fornat the table anu text just lile on the hone page, but nale the
California cell bright yellow (BGCOLOR=#ffff00) to show
You are here.`

4. When you`re uone, save the page anu view it in the browser. The
table shoulu lool lile this:

5. Linl the woru Home to the hone page (<A
HREF=index.html>Home</A>), then save the page.

6. Open the hone page in Notepau.

7. Linl the woru California to the California page.

8. Save the page.

8o
Practice: Create naviation bars

Task: To nale your Travel West site lool lile the site at
www.visibooks.com/travelwest.

1. Create a new blanl page anu save it with the file nane
midwest.html. It will be The Miuwest page, but leave it blanl for
right now.

2. Create a new page with file nane rockies.html. This is The Roclies
page. Title it Nature in the Rocky Mountains. Male its
navigation bar table exactly lile that of the California page.

3. Change the You are here` yellow baclgrounu color fron the
California cell to The Roclies cell.

4. Linl California, The Midwest anu Home to their respective
pages.

5. When you`re uone, preview the page in the browser. It shoulu lool
lile this:

81
6. Repeat this process with the California anu Miuwest pages so
they`ve got functioning navigation bars that show you are here.`

7. Go to the hone page anu in the navigation bar, linl The Rockies
anu The Midwest to their respective pages.

8. Male all text that corresponus to the current page bolu. (Exanple:
nale The Rockies` bolu on The Roclies page.)

9. When you`re uone, preview the site in the browser. It shoulu lool
lile the site at www.visibooks.com/travelwest.

8z
Add subsections to site

Insert a table for content and subsection links

1. In Notepau, open the California page in the Traveling West Web
site.

2. Below the navigation bar table, auu another table that has one row
anu two cells in the row. Give the table the attributes:

WIDTH=100%
BORDER=0
CELLPADDING=16
CELLSPACING=0

3. Male the first cell 23% wiue anu the seconu cell 73% wiue.

4. In the left-hanu cell, put the subsections for the nain California
section:

The Golden Gate Bridge
<P>
Highway 101
<P>
Big Sur

8
5. In the right-hanu cell, put the heauing Places to visit in
California.` Below the heauing, in a new paragraph, type the
sentence :

When in California, be sure to see the
Golden Gate bridge, Highway 101, and Big Sur.

6. Align the contents of both cells to the top of each.

7. Male the text in the left-hanu navigation cell arial, size -1.

8. Male the heauing in the right-hanu cell bolu, arial, size +3. Male
the paragraph beneath the heauing veruana, size -1.

9. When you`re uone, save the page anu preview it in the browser.
The page shoulu lool lile this:

8q
Create subsection pages

1. Create new blanl pages for subsections The Goluen Gate Briuge,
Highway 101 anu Big Sur:

Pae 1itIe IiIe hame
The Golden Gate
Bridge
Seeing the Golden
Gate Bridge
goldengate.html

Highway 101 Driving Highway 101 highway101.html
Big Sur Staying in Big Sur bigsur.html

2. Copy the tables fron the California page anu paste then into the
Goluen Gate Briuge page.

3. On the Goluen Gate Briuge page, change the heauing to reau
Seeing the Golden Gate Bridge.` Male it size +2.

4. Below the heauing, change the paragraph to reau:

The Golden Gate Bridge isn't golden--it's actually
orange.

5. Male it veruana, size -1.

8
6. Linl the worus California, Highway 101, anu Big Sur to their
respective pages. Leave The Golden Gate Bridge as plain text to
show you are here.`

7. When you`re uone, save the page anu view it in the browser. It

Consistent pae Iayout

Copying tables fron one page anu pasting then into new
pages ensures that all pages share the sane layout.

This consistency nales site navigation easier: no natter which
page in the site is being vieweu, a person lnows where the
page`s linls anu content will be.

86
Practice: Add subsections to site

A. Whoi ihe bei woy io keep ioble covtievi jow poge io poge?

Task: To nale your Travel West Web site lool anu worl lile the one
at www.visibooks.com/travelwest2.

1. Open the California page in Notepau. Linl The Goluen Gate
Briuge, Highway 101 anu Big Sur to their respective pages.

2. Open the Goluen Gate Briuge page. Copy both tables fron the
page.

3. Paste these tables into the Highway 101 page.

4. On the Highway 101 page, linl the worus The Golden Gate
Bridge to the Goluen Gate Briuge page. Get riu of the anchor tags
arounu Highway 101 so it shows as plain text.

5. Change the Highway 101 page`s heauing anu uescriptive text
beneath it so it lools lile this:

8
6. Fornat the Big Sur page so its layout anu navigation are consistent
with the Goluen Gate Briuge anu Highway 101 pages.

Heo!tvg.
Staying in Big Sur

Poogoph.
There are many excellent hotels right on the ocean
in Big Sur.

7. Save all pages.

8. When you`re uone creating all the pages in the California section of
this site, preview it in a browser. It shoulu lool anu worl lile
www.visibooks.com/travelwest2.

Answers

A. Copytvg ov! po itvg ioble jow ove poge io ovoihe.

88
PIace tabIes within tabIes

1. In Notepau, open the Goluen Gate Briuge page
(goldengate.html).

2. In front of the paragraph below the nain heauing, begin a new
table with:

2 rows
1 cell in each row
WIDTH=200
CELLPADDING=8

1ip: 1o ceoie o ioble wtih woe ihov ove ow, jui begtv o vew ow
ojie ev!tvg ihe ove obove ti.

<TR>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
</TR>

Note: the wiuth is a nunber-200-which renuers the wiuth in
pixels rather than as a percentage.

3. Color the top cell blue (#0000ff) anu the botton cell grey
(#cccccc).

4. In the top cell, put the worus, A Whole Lot of Paint. Center the
worus anu nale then bolu.

8
5. In the botton cell, type the sentence:

The Golden Gate bridge is covered with enough paint to coat
four battleships.

6. Male the text arial, size -1.

7. Save the page anu view it in the browser. When you`re uone, it

8. Male the text in the top cell white. Do this by auuing the
COLOR=#ffffff attribute to the <FONT> tag:

<FONT FACE="arial" SIZE=-1
COLOR=#ffffff>
<B>A Whole Lot of Paint</B>
</FONT>

o
9. Auu the ALIGN=right attribute to the <TABLE> tag:

<TABLE WIDTH=200 BORDER=0
CELLPADDING=8 ALIGN=right>

10. Save the page anu preview it in the browser. The page shoulu lool
lile this:

1
Link to an externaI site usin frames

bow to use frames

Franes` are a way to put nore than one Web page at a tine
on a conputer`s screen:

2=CA
2=CA 2=CA !

A live exanple of franes can be seen at
www.visibooks.com/frames.

Many sites that useu franes have now elininateu then,
returning to single-page layouts. That`s because franes have
serious urawbacls:

Franes are uifficult to upuate. Every screen involves
three or nore pages to leep tracl of: the franeset itself,
anu at least two others to go in the franes.
Frane navigation is tricly. Linls require special
targets` that go fron page to frane.
Franes often require people to scroll annoyingly in
nore than one place.

However, franes are useful for one thing: they allow a user to
get bacl to a site with one clicl while clicling through other
sites linleu to it. An exanple of this can be seen in the external
linls at www.charuhas.com/siies.him|.

The following exercise uenonstrates how to use franes to
proviue convenient linls to external sites.

z
1. On the Goluen Gate Briuge page, in a new paragraph below the
first one, type:

Visit the Web site for the Golden Gate bridge at
www.goldengate.org.

www.goluengate.org will be linleu to the franeset page.

2. Create a new blanl page with file nane framesetgg.html. This will
be the franeset` page that holus two other pages.

3. Insert this HTML coue into the new blanl page:

<HTML>

<HEAD></HEAD>

<TITLE>Golden Gate Frameset</TITLE>

<FRAMESET ROWS="50,*">

<FRAME NAME="topframe" SRC="backtogg.html">

<FRAME NAME="bottomframe"
SRC="http://www.goldengate.org">

</FRAMESET>

</HTML>


1ip: 1he ROWS=50,* oiitbuie tv ihe <FRAMESET> iog iell
ihe joweei io woke ihe iop jowe 3u ptxel htgh, ov! io ollow ihe
boiiow jowe io jtll tv ihe ei oj ihe ovotloble poce beveoih ti.

1he iop jowe wtll coviotv ihe ltvk bock io ihe Col!ev Coie It!ge
poge. 1he boiiow jowe wtll coviotv ov exievol tie.
www.gol!evgoie.og.

Link back to the Golden Gate Bridge page

The goldengate.org site will display here

4. Save framesetgg.html.

5. Create a new page with file nane backtogg.html. This is the page
that will contain a linl bacl to the Goluen Gate Briuge page.

6. Give the new page a light grey baclgrounu, anu a single linl on it:
Back to the Golden Gate Bridge page.

7. Use an anchor tag with the TARGET=_top attribute to linl
bacl to the Goluen Gate Briuge page:

<A HREF=goldengate.html TARGET=_top>Back
to the Golden Gate Bridge page</A>

q
1ip: 1he TARGET=_top oiitbuie evoble ltvktvg io o poge
ouit!e oj ihe cuevi jowe.

CIick here 6o to new pae outside frame

Back to the Gol den Gate Bri dge
Page

Golden Gate Bridge Page

.whtch ovot! cltcktvg ov ihe ltvk ov! hovtvg ihe poge cowe up tv
ihe owe jowe.

CIick here Pae comes up in same frame

Back to the Gol den Gate Bri dge
Page
Golden Gate Bridge page

8. Male the linl arial, size -1, anu bolu.

9. Save the page.


10. Open framesetgg.html in the browser. It shoulu lool lile this:

11. Clicl on the Back to the Golden Gate Bridge page linl. It
shoulu tale you bacl to the Goluen Gate Briuge page.

6
1ip: 1o woke ihe joweei look woe ctp ov! cleov, iy utvg ihe
jollowtvg oiitbuie tv framesetgg.html.

<HTML>

<HEAD>
</HEAD>

<TITLE>Golden Gate Frameset</TITLE>

<FRAMESET ROWS="28,*" FRAMEBORDER=0>

<FRAME NAME="topframe" SRC="backtogg.html"
MARGINWIDTH=12 MARGINHEIGHT=4
SCROLLING=NO NORESIZE>

<FRAME NAME="bottomframe"
SRC="http://www.goldengate.org
MARGINWIDTH="12" MARGINHEIGHT="12"
SCROLLING=AUTO NORESIZE>

</FRAMESET>

</HTML>

Fractice: Layeut 8 kaviatien

A. Why t ti twpoiovi ihoi vovtgoitovol ltvk ioy tv ihe owe ploce ov!
o!e ov poge ihoughoui o Web tie?

I. Whoi t ihe wtvtwuw vuwbe oj jtle ihoi wui be ue! io woke o
joweei wok?

Task: Male your Travel West Web site lool anu function lile the one
at www.visibooks.com/travelwest3.

1. Lay out the Roclies page using tables so it lools lile the California
page.

Heo!tvg jo ihe Iockte poge.
Nature in the Rocky Mountains

2. Create pages for three subsections of The Rockies nain section:

Streams
Snow
Rock Formations

3. Male sure that these pages are linleu anu laiu out just lile the
Goluen Gate Briuge, Highway 101 anu Big Sur pages.

Pae IiIe name beadin
Streams streams.html Mountain Streams
Snow snow.html Snow in the Rockies
Rock
Formations
rocks.html Rock Formations

8
4. Repeat this process with the Midwest section of the site. The
subsections of the Midwest section are:

St. Louis
Chicago
DeMoines

Pae IiIe name beadin
Midwest midwest.html Cities of the Midwest
St. Louis stlouis.html St. Louis
Chicago chicago.html Chicago
DeMoines demoines.html DeMoines

5. On the Chicago page, insert a one-row, one-cell, fixeu-wiuth table
200 pixels wiue, with cell pauuing of 4. Color it pale yellow
(BGCOLOR=#ffffcc).

6. In this table, put the sentence, In the past, Chicago was home
to Al Capone, Mayor Daley, and the nations biggest
stockyards.

7. On the St. Louis page, linl to the external Web site
www.stlouis.con using franes.

Poogoph jo Si. Iout poge.
Find out whats going on in St. Louis at
www.stlouis.com.

8. When you`re uone, open the Travel West site in the browser. It
shoulu lool anu function lile the one at
www.visibooks.com/travelwest3.

lnteractivity


Insert Nf1A tas
Create forms
Iormat text with styIe sheets
fmpIoy tempIates
0pIoad sites to a web server


1oo
Insert Nf1A tas

1. In Notepau, open up the hone page of the Travel West Web site.

2. Beneath the <HEAD> anu signature () tags,
insert the first <META> tag for uescribing the site`s contents:

<HEAD>
<META NAME=description CONTENT=This is
the Travel West Web site. It contains
information about vacationing in California,
the Rockies and the Midwest.>
</HEAD>

Nf1A tas

META tags are HTML tags that can incluue a uescription of
the page, as well as leyworus that proviue clues to its content.
META tags nale a page easier to finu anu inuex by search
engines.

META tags uon`t show up on a Web page. Rather, they resiue
unseen in its HTML coue.

1o1
3. Beneath the uescription` neta tag, insert a new <META> tag for
its search leyworus:

<HEAD>
<META NAME=description CONTENT=This is
the Travel West Web site. It contains
information about vacationing in California,
the Rockies and the Midwest.>
<META NAME="keywords" CONTENT=traveling,
travel, west, California, rockies, midwest,
golden gate bridge, highway 101, Big Sur,
streams, snow, rock formations, St. Louis,
Chicago, De Moines>
</HEAD>

1oz
Create forms

1. Create a new page with file nane infoform.html.

2. Title the page Request for Information` anu save it in the Travel
West foluer on your haru urive.

3. Below the <BODY> tag, type the sentence:

Fill out the following form to get more
information about traveling West:

4. Below the sentence, insert a <P> tag, then insert a <FORM> tag:

<BODY>

Fill out the following form to get more
information about traveling West:

<P>

<FORM>

</BODY>

5. Below the <FORM> tag, create a table with 4 rows anu 2 cells in
each row. Male the wiuth 30%, give it cellpauuing of 4, anu a
boruer of 1.

1o
6. In the top three left-hanu cells, put:

Name:
Address:
E-Mail:


8. In the top right-hanu cell, insert a text input fielu. Do this with an
<INPUT> tag:

<TR>
<TD>Name:</TD>
<TD><INPUT TYPE=text NAME=name
SIZE=20></TD>
</TR>

1ip: 1he TYPE oj iht tvpui t 'text, whtch woke ti o iexibox.
1he NAME oj iht tvpui t 'name, whtch t how ihe eve kvow
ihoi ti whee people evie ihet vowe. 1he SIZE t 20 choocie-
ihe levgih oj ihe iexibox.

1oq
9. Save the page anu view it in a browser. It shoulu now lool lile this:

10. Insert textboxes in the cells next to Address anu E-mail as well.
Nane the input textbox next to Address address,` anu nane
the input textbox next to E-mail email.`

<INPUT TYPE=text NAME=address SIZE=20>

this:

1ext input box

1o
12. In the last row`s right-hanu cell, insert a subnit button, <INPUT
TYPE=submit>. Use the VALUE attribute to specify the text
uisplayeu on the button:

<TR>
<TD>E-mail:</TD>
<TD><INPUT TYPE=text NAME="email"
SIZE=20></TD>
</TR>
<TR>
<TD></TD>
<TD><INPUT TYPE=submit VALUE="Send me
info"> </TD>
</TR>
</TABLE>

13. Save the page anu view it in the browser. When you`re uone, the
page shoulu lool lile this:

1o6
14. Renove the boruer fron the table anu align the text in the left-
hanu cells to the right.

<TD><P ALIGN=right>Name:</TD>

15. Male the left-hanu cell in the first row 3% wiue, anu the right-
hanu cell in the first row 43% wiue.

1ip: Iy pectjytvg ihe wt!ih oj cell tv ihe jti ow, ihe cell tv ihe
ow beveoih wtll ouwe ihe owe wt!ih.

16. Save the page, view it in the browser, anu it shoulu lool lile this:

1o
17. Open the hone page in Notepau anu auu a new paragraph:

Get more information about Western Travel
mailed to you

18. Linl this sentence to infoform.html.


20. Clicl on the linl sentence. It shoulu bring up the page with the
forn.

1o8

Nakin a form work

To nale a forn worl, an action nust be assigneu to it. To auu
an action to your forn, auu the ACTION attribute to the
<FORM> tag.

Consult with your Web server auninistrator to specify what
action you shoulu assign. For exanple, an action for a forn
night lool sonething lile this:

<FORM METHOD=POST
ACTION="http://www.yourdomain.com/cgi-
bin/formmail.pl>

This tells the forn to post its uata to a progran calleu
fornnail.pl on at youruonain.con. This progran night tale
the forn uata anu e-nail it to whonever you choose.

1o
Practice: Create forms

1. Create a new page with file nane favoritesform.html. Title it My
Favorite Places.`

2. Insert a forn, then insert a table with four rows anu two cells in
each row. Fill the cells with the text anu forn objects seen below:

1ip: 1he H1MI co!e jo o !op-!owv lti look ltke iht.

<SELECT NAME="select">
<OPTION>First Choice</OPTION>
<OPTION>Second Choice</OPTION>
<OPTION>Third Choice</OPTION>
</SELECT>

1he H1MI co!e jo o!to buiiov look ltke iht.

<input type="radio" name="radios"
value="radio1" checked> This is radio button
1
<br>
<input type="radio" name="radios"
value="radio2"> This is radio button 2

0rop-down
Iist
kadio
buttons

11o
3. Put these values in the urop-uown list:

California
The Rockies
The Midwest

4. When finisheu, save the page anu preview it in the browser. It

111
0se styIe sheets

1he pros and cons of styIe sheets

Style sheets are a flexible, powerful tool for laying out anu
fornatting Web pages. They allow every page in a site to get
uisplay instructions fron just one style sheet.

For instance, if you createu a 1,000 page Web site using style
sheets, anu you wanteu to change the linl color on every page,
youù only neeu to change the linl color on one style sheet.
Without style sheets, youù have to change 1,000 inuiviuual
pages.

Style sheets can also create uisplay effects. An exanple of this is
at www.visibools.con. When you roll your cursor over linls,
they becone unuerlineu-if you`re viewing the page with the
Internet Explorer browser.

That`s the uisauvantage of using style sheets: they`re
interpreteu uifferently by each browser. A style sheet-baseu
page vieweu in Internet Explorer nay lool uifferent than it
uoes in Netscape Navigator or other browsers.

11z
Create a style sheet

1. Create a new page with file nane format.css.

2. Save it in a new foluer on the C:\ urive calleu CSS Site.

1ip: 1ht t o iyle heei, voi o Web poge. Ii o jtle ihoi gtve Web
poge jowoiitvg tviucitov, bui tvi eve eev. Ii coviotv vo
H1MI, ov! ho o !tjjeevi jtle exievtov. .css oihe ihov .html.

3. On the blanl format.css page, insert the following instruction:

.bodytext {font-family:"Courier New",
Courier, mono; font-size:11pt; font-
weight:bold; color:#ff0000; background-
color:#ccccff}

Here are the conponent parts of the fornatting instructions for
the .bodytext style:

.bodytext
" "" " The type of text to be fornatteu.

font-
family
" "" " The fonts in which the text shoulu be
uisplayeu. First the conputer lools for
Courier New, then Courier, then a
nonospaceu font.

1he quoie tv 'Coute New ollow ihe
cowpuie io eo! jovi vowe wtih poce.

font-size
" "" " The size of the text. Unlile in HTML, style
sheets allow specific point sizes to be useu.

font-
weight

" "" " Bolu or plain text.

color
" "" " The color of the text.

background
-color
" "" " Changes the color of the page area uirectly
behinu the text.

11
4. Save format.css. It shoulu lool lile this:

11q
Apply a style sheet

1. In Notepau, create a new hone page anu put it the CSS Site
foluer.

2. Title the hone page Style Sheet Demo Page.`

3. Below the <BODY> tag, type the text CSS Site. Male it a size 1
heauing using <H1> tags:

<BODY>

<H1>CSS Site</H1>

4. In a new paragraph beneath it, type the sentence, Cascauing Style
Sheets are a powerful anu flexible tool for fornatting Web pages:`

<BODY>

<H1>CSS Site</H1>

<P>Cascading Style Sheets are a powerful and
flexible tool for formatting Web pages</P>


11
6. Below the <HEAD> tag, auu a <LINK> tag that points to
format.css:

<HTML>
<HEAD>
<LINK REL="stylesheet" HREF="format.css">
</HEAD>
<TITLE>Style Sheet Demo Page</TITLE>

7. In the <P> tag, auu the CLASS attribute that points to the
.bodytext style:

<P CLASS="bodytext">Cascading Style Sheets
are a powerful and flexible tool for
formatting Web pages.</P>

8. Save the hone page anu view it in the browser. It shoulu lool lile
this:

The hone page`s <LINK REL="stylesheet"
HREF="format.css"> tag referreu to format.css for
fornatting instructions.

The paragraph on the page referreu to the .bodytext style on
format.css for fornatting instructions.

116
1ip: 1o ue ihe owe iyleheei io jowoi poge ihoughoui o tie, jui
tvei ihe owe <LINK> iog tv eoch Web poge. Fo tviovce, tj ihee
wee 1uu poge tv ihe CSS Site, ihey coul! oll coviotv ihe owe
<LINK REL="stylesheet" HREF="format.css"> iog
ov! jowoi bo!y iexi ihe owe woy by utvg ihe <P
CLASS=bodytext> iog.

11
Create link effects with style sheets

"Cascadin" styIe sheets

Style instructions can be containeu within a Web page itself,
without referring to a separate style sheet. These instructions will
overriue those of the style sheet, hence the tern Cascauing Style
Sheets:`

An instruction in a
pae's text.

<FONT
COLOR=#ff0000>
This is red
text.</FONT>

.overrides a styIe
instruction for the pae.

<STYLE
TYPE="text/css">
.greentext { color:
#00ff00 }
</STYLE>

<BODY>
<P
CLASS=greentext>
This is green text.

.which overrides a styIe
instruction for the site.

<LINK REL=stylesheet
HREF=format.css>

</HEAD>

<BODY>

<P CLASS=bodytext>
This is blue text.

The following exercise enploys an in-page style.

118
9. In the CSS Site foluer, open the hone page in Notepau.

10. Below the <HEAD> tag, replace this:


with this:

<STYLE TYPE="text/css">

</STYLE>

11. Below the present paragraph, auu a new paragraph:

A good resource for learning more about
style sheets is Webmonkey.

12. Linl the woru Webmonkey` to the external site
http://www.webmonkey.com. Also, nale the woru Webmonkey
bolu.

13. Save the page anu refresh it in the browser. When you put your
cursor on the woru Webmonkey, it shoulu change fron reu anu
plain to green anu unuerlineu.

"

11
Practice: 0sin styIe sheets

1. Open format.css in Notepau.

2. Auu the following style instruction below the .bouytext style:

.heading {font-family: Verdana, Arial,
Helvetica, sans-serif; font-size: 48pt}

3. Save format.css.

4. Open the hone page anu replace:

<STYLE TYPE="text/css">

</STYLE>

with the original <LINK> tag:


1zo
5. Auu the CLASS=heading attribute to the <H1> tag.

<H1 CLASS=heading>

6. Save the hone page anu view it in the browser. It shoulu lool lile
this:

1z1
0pIoad sites to a web server

1. Downloau WS_FTP LE anu install it.

2. Open the progran. You shoulu see an initial Session Properties
winuow. It shoulu lool lile this:

I1P

FTP stanus for File Transfer Protocol, a way to transfer files
between conputers over the Internet. Uploauing a site to a
Web server requires special FTP software.

The nost popular progran useu to uploau anu uownloau Web
pages fron a server is WS_FTP. The LE version is free anu can
be uownloaueu at www.uownloau.con or www.tucows.con.

The Pro version costs $39.93, anu can also be founu at the Web
site of the conpany that nales it, www.ipswitch.con.

Below are instructions for uploauing files using the free LE
version.

1zz
3. Clicl the New button.

4. In the Profile Name textbox, enter the nane of your uploau
process, such as Upload my Web site.`

5. In the Host Name/Address textbox, enter the nane or IP auuress
of your Web server. It can be sonething lile www.visibooks.com,
washington.patriot.net, or 207.176.7.217.

1ip: Covioci you Web eve o!wtvtioio io jtv! oui ihe Hoi
Nowe o IP A!!e oj you Web eve. 1he Web eve
o!wtvtioio cov olo upply you Ue I ov! Powo!.

6. Leave the Host Type set at Automatic detect, anu input your
User ID anu Password.

7. Checl the Save Pwd checlbox, then clicl the Apply button. The
Session Properties winuow shoulu now lool sonething lile this:

1z
8. Clicl the OK button, anu after your Web server is contacteu the
WS_FTP winuow will appear. It shoulu lool sonething lile this:

9. At the top of the left-hanu Local System winuow, uouble-clicl on
the green arrow icon to go up in the file hierarchy. Double-clicl
it again to get to the C:\ urive.

10. Double-clicl on the foluer containing your Web site to open it up.

11. In the right-hanu Remote System winuow, uouble-clicl on the
public_html foluer, or the foluer that leaus to your site on the
server.

Your computer web server

1zq
12. You shoulu now see your Web pages on your conputer anu on
your Web server. To senu over your Web pages, highlight then,
then clicl on the button to senu then to the Web server.

1ip: Ij ihee oe oleo!y poge ov you Web eve, ihe vew poge you
ev! ove wtll eploce ihe ol! vetov wtih ihe owe jtle vowe.

1z
Fractice: lnteractivity

Create a new home pae and site

1. Create a new hone page titleu World Dances.` Save it at
C:\Dance.

2. Create a hone page for the site that lools lile this:

1ip: Cei ihe gophtc ov! iexi jo iht poge oi
www.visibooks.com/dancing.

3. At the botton of this anu every other page in the site, put an e-nail
linl to infoCworluuance.org.

1z6
Create main section paes

1. Linl the worus American, Latin, anu European in the navigation
bar to new nain section pages on Anerican, Latin, anu European
uance, respectively.

1ip: Cei ihe twoge ov! iexi jo ihee poge oi
www.visibooks.com/dancing.

The Anerican uance page shoulu lool lile this:

2. Male the Latin anu European pages lool consistent with the
Anerican uance page.

1z
Create subsection paes

1. On the Anerican uance page, linl the worus Lindy Hop anu
Foxtrot to new subsection pages on those uances. The Linuy Hop
page shoulu lool lile this:

1ip: Cei ihe twoge ov! iexi jo iht ov! ihe oihe ubecitov poge oi
www.visibooks.com/dancesub.

2. Male the Foxtrot page lool consistent with the Linuy Hop page.

3. Create the subsection pages Tango, Merengue, anu Salsa for the
Latin section.

4. Create the subsection pages Waltz anu Contra Dancing for the
European section.

1z8
Nf1A tas

1. Incluue this META uescription in the hone page:

Dances Arounu the Worlu incluues infornation about Anerican,
Latin anu European uances.

2. Incluue these META leyworus in the hone page:

dance, worldwide, tango, merengue, salsa, lindy hop, foxtrot,
waltz, contra dancing.

1z
Creatin forms

1. On the hone page, insert a forn that lools lile this:

2. When you`re uone, preview the whole Web site in the browser. It
shoulu lool lile the site at www.visibooks.com/worlddancing.

1o

11
kdvanced Layeut


fmpIoy backround imaes
fmpIoy spacer 6IIs
Insert a horizontaI ruIe
5pecify pae marins

You'll create a page that looks like this:

1z
fmpIoy backround raphics

1. Open Notepau.

2. Create a new page with all necessary HTML tags anu a two-cell
table:

Rows: 1
Cells: 2
Width: 100 Percent
Border: 0
Cell Padding: 18
Cell Spacing: 0

3. Save the file on your conputer`s Desltop with the file nane
advlayout.html. Title it Advanced Layout.

4. Give both cells in the table a uarl blue baclgrounu color
(#000099).

5. Male the first cell 10% wiue, anu the seconu cell 90% wiue.

1
6. Go to www.visibooks.com/adv|ayoui/pics anu save techtool.gif on
your conputer`s Desltop. Insert it in the left-hanu cell.

7. Go to www.visibooks.com/adv|ayoui/pics anu save bkgd.gif on
your conputer`s Desltop. Male it the baclgrounu of the right-
hanu cell using the BACKGROUND attribute:

<TD WIDTH=90% BGCOLOR="#000099"
BACKGROUND=bkgd.gif>

8. In the right-hanu cell, type the text, The Magazine for People
Who Like Gadgets.`

9. Male the text arial, size +1, bolu.

10. Color the text white.

11. Preview the page in the browser. It shoulu lool lile this:

1ip: Noitce ihe ltve iowo! ihe boiiow oj ihe cell whee bkgd.gif
begtv epeoitvg. Ii epeoi becoue bockgouv! gophtc itle io jtll oll
ovotloble poce tv o cell. 1he cell t 13o ptxel ioll. 1uu ptxel jo
iechiool.gtj, plu 3o jo Cell Po!!tvg ,18 ptxel oi ihe iop ov! boiiow
oj iechiool.gtj).

bkgd.gif t ovly 123 ptxel ioll, iheejoe, ihee 13 ptxel oj poce leji
io jtll. 1o jtx iht, ue ov twoge e!titvg pogow ltke Phoiohop,
Ftewok o Potvi Shop po io woke ihe bockgouv! twoge 13o ptxel
ioll.

1q
12. Below the first table, insert a three-cell table with a wiuth of 100%
anu cellpauuing of 4. It`s boruer anu cellpauuing shoulu be 0. Male
the cells equal wiuth anu color then blacl.

13. In the first cell, enter the text, Laptops.` In the seconu, Cell
Phones,` anu in the thiru, PDAs.` Male the text white anu center
it withing the cells.


1
fmpIoy spacer 6IIs

1. Go to www.visibooks.com/advlayout/pics anu save spacer.gif on
your conputer`s Desltop.

2. Below the top two tables, insert a thiru table just lile the first table.

3. Insert spacer.gif in the left-hanu cell. Give it a wiuth of 100 anu
height of 1.

<TD WIDTH="10%" BGCOLOR="#000099"><IMG
SRC="spacer.gif" WIDTH="100"
HEIGHT="1"></TD>

1ip: Moi poce CIF oe 1x1 ptxel, whtch loo! vey qutckly ovltve.
1ht ove ioie! oui o 3ux3u io woke ti eote io ee ov! ove.

4. Change the baclgrounu color of the cell containing spacer.gif to
bright yellow (#ffff00).

why use spacer 6IIs!

Spacer GIFs are useu to stretch table cells to an exact wiuth.
They are transparent, so they renain invisible regaruless of the
cell`s baclgrounu color.

A spacer GIF is useu in the exercise below. It leeps the wiuth of
the left-hanu cell constant, regaruless of the size or resolution
of the screen useu to view it.

16
5. Put text in the right-hanu cell so the page lools lile this when
vieweu in the browser:

6. Set the browser to high resolution-1024x768 pixels. The page

Notice how the left-hanu cells in the top anu botton tables stay the
sane wiuth, regaruless of the wiuth of the browser useu to view
then.

1
Insert a horizontaI ruIe

1. Below the text in the right-hanu cell, insert a <P> tag, then the tag
for a horizontal rule:

You can read our product reviews and also
offer your own opinions and observations on
high tech products.
<P>
<HR>

2. This generates a 3-D rule. To give it a cleaner lool, auu the
attributes NOSHADE anu SIZE=1 to the <HR> tag:

<HR NOSHADE SIZE=1>

3. Place text below the horizontal rule so it lools lile this when
vieweu in the browser:

18
5pecify pae marins

1. In the <BODY> tag, auu the LEFTMARGIN, RIGHTMARGIN,
TOPMARGIN, MARGINWIDTH anu MARGINHEIGHT attributes.
Give then all a value of zero:

<BODY LEFTMARGIN="0" RIGHTMARGIN="0"
TOPMARGIN="0" MARGINWIDTH="0"
MARGINHEIGHT="0">

1ip: 1he LEFTMARGIN, RIGHTMARGIN, ov! MARGINWIDTH
,olovg wtih TOPMARGIN ov! MARGINHEIGHT) oiitbuie oe
e!uv!ovi io occouvi jo bowe !tjjeevce. Ivievei Ixploe
ecogvt:e LEFTMARGIN, RIGHTMARGIN ov! TOPMARGIN,
whtle Neicope Novtgoio ecogvt:e MARGINWIDTH ov!
MARGINHEIGHT.

2. Specify a baclgrounu color of white (#ffffff) for the cell
containing the page`s text. Specify a baclgrounu color of uarl blue
(#000099) for the page itself.

1
3. Save the page anu view it in the browser. When you`re uone, it

1qo
Fractice: kdvanced Iayeut

1. Give the navigation table (the one with Laptops, Cell Phones anu
PDAs) five cells.

2. Put | characters (on the sane ley as the baclslash \ character on
your leyboaru) in the cells surrounuing the one that contains Cell
Phones.

3. Give the cells with the | characters a wiuth of 1%, anu center the l
characters within the cells.

4. Color the | characters white. When you`re uone, the page shoulu
lool lile the one at www.visibooks.com/advancedlayout:

1q1
FracticaI java5cript


fnabIe roIIover raphics
0pen new windows
VaIidate form input

You'll incorporate functions that look like this:

Creating rollover graphic links

0pening new windows

validating forms

1qz
fnabIe roIIover raphics

what is [ava5cript!

JavaScript is a progranning language that sits in the HTML
coue of a Web page. It`s not an inuustrial-strength language
lile C++, Java, or Perl that`s useu to progran Web servers.
Rather, JavaScript is useu to perforn sinple functions within
Web pages.

The following section shows you how to enploy JavaScript`s
three nost useful functions. It won`t teach you how to write
prograns in JavaScript. Learning a progranning language is
just that: learning a new language, which can tale nonths or
years to naster. Rather, you`ll learn how to obtain functioning
JavaScript scripts anu nouify then to uo what you want.

This approach is fast anu effective. There are thousanus of
JavaScript scripts available for free on the Web that perforn
anything youù want to uo in a Web page-all you have to uo
is custonize then.

workin with source code

Sonetines you`ll see a Web page anu say to yourself, I
wonuer how they uiu that?` By viewing the page`s HTML anu
JavaScript source coue, you can finu out.

You can also copy source coue, paste it into pages you`re
worling on, anu nouify it. Since that`s so easy to uo, source
coue for Web pages isn`t usually copyrighteu.

The following exercise shows you how to copy, paste, anu
nouify an existing JavaScript to put rollover graphic linls on
your Web pages.

1q
view source code

1. Create a foluer on your haru urive calleu rollover,` at C:/rollover.

2. Using the browser, go to www.visibooks.com/advancedlayout.

3. View the page`s source coue by clicling View , then Source.

1qq
Copy source code

1. A copy of Notepau with advancedlayout(1) in the title bar will
appear. Select all the HTML, then copy it.

2. Create a new blanl page in Notepau anu paste all the copieu
HTML coue into it.

3. Save the page at C:\rollover as index.html.

4. Create a foluer within the rollover foluer calleu graphics:
C:\rollover\graphics.

5. Go to www.visibooks.com/rolloverpics. Capture all six graphics
there anu save then in the graphics foluer.

1q
6. Go to www.visibooks.com/rollover.
The graphics in the navigation bar are
rollover linls:

7. View its source coue anu highlight all
the coue between anu incluuing the
<SCRIPT> anu </SCRIPT> tags.
It`s between the <HEAD> anu
</HEAD> tags:

8. Copy this JavaScript coue.

9. Paste the JavaScript coue between the <HEAD> anu </HEAD> tags
in index.html.

1q6
Modify source code

1. You`ll notice that the nanes of the graphics specifieu in the
JavaScript (laptops2.gif, laptops.gif,
cellphones2.gif.) uon`t corresponu with the nanes of the
graphics in your graphics foluer.

Mouify the source coue to specify the correct file nanes for your
graphics:

img1on = new Image();
img1on.src = "graphics/lapbright.gif";
img2on.src = "graphics/cellbright.gif";
img3on.src = "graphics/pdabright.gif";

img1off = new Image();
img1off.src = "graphics/lap.gif";
img2off.src = "graphics/cell.gif";
img3off.src = "graphics/pda.gif";

6raphics
that sit
there
when
cursor is
off Iink
6raphics
that pop
up when
cursor is
on Iink

1q
2. Go bacl to www.visibooks.com/rollover in the browser, anu view
the page`s source coue. Scroll uown until you see the coue for the
seconu table, the one that uefines the blacl navigation bar.

3. Highlight anu copy the anchor tag with the onMouseOver anu
onMouseOut attributes, the closing anchor tag (</a>), anu the
inage tag insiue then. It linls to laptops.html:

4. In index.html, get riu of the two cells with the | characters in then.

1q8
5. Paste the anchor tags anu the inage tag they enclose into
index.html so they replace the woru Laptops:

Fow iht.

<TD WIDTH="33%"
BGCOLOR="#000000"><CENTER><FONT FACE="arial"
SIZE="-1"
COLOR="#ffffff">Laptops</FONT></CENTER></TD>

1o iht.

<TD WIDTH="33%" BGCOLOR="#000000"><CENTER><A
HREF = "laptops.html"
onMouseOver = "imgOn('img1')"
onMouseOut = "imgOff('img1')"><IMG
SRC="graphics/laptops.gif" WIDTH="120"
HEIGHT="20" BORDER="0" name="img1"
alt="Laptops"></a></CENTER></TD>

6. Change the file nane for the graphic being linleu fron
laptops.gif to your graphic: lap.gif.

7. Save index.html anu view it in the browser. It shoulu worl lile
this:

1q
Practice: fnabIe roIIover raphics

1. In the navigation bar of index.html, replace the worus Cell
Phones` anu PDAs` with rollover graphics. Use the graphics
cellbright.gif, cell.gif, pdabright.gif anu pda.gif.

1ip: Mo!tjy ihe ovcho iog ov! twoge co!e tv ihe jti cell jo ue tv
ihe oihe iwo.

<A HREF = "laptops.html"
onMouseOver = "imgOn('img1')"
onMouseOut = "imgOff('img1')"><IMG
SRC="graphics/lap.gif" WIDTH="120"
HEIGHT="20" BORDER="0" name="img1"
alt="Laptops"></A>

2. When you`re uone, save the page anu view it in the browser. It

1o
0pen new windows

1. In Notepau, open up the hone page for the Travel West Web site:
index.html at C:\Travel West.

2. In the browser, go to www.visibooks.com/newwindow.

3. View the source coue for the page. Highlight anu copy the
JavaScript coue between the <HEAD> anu </HEAD> tags.

4. Paste it below the <META> tags in index.html:

11
5. Change the JavaScript coue so that it opens infoform.html in the
new winuow:

Fow iht.

<SCRIPT LANGUAGE="JavaScript">
function Contact()
{
OpenNewWindow =
window.open('contact.html','help','toolbar=n
o,location=0,directories=no,status=yes,menub
ar=0,scrollbars=yes,resizable=yes,width=300,
height=350');
}
</SCRIPT>

1o iht.

<SCRIPT LANGUAGE="JavaScript">
function Contact()
{
OpenNewWindow =
window.open('infoform.html','help','toolbar=
no,location=0,directories=no,status=yes,menu
bar=0,scrollbars=yes,resizable=yes,width=300
,height=350');
}
</SCRIPT>

1ip: }ovoSctpi t voi H1MI-ti o pogowwtvg lovguoge. Ii wok
beiie wtihoui quoie oouv! volue. Alo, !ovi chovge ihe coe oj
wo! tv o ctpi ihoi wok. }ovoSctpi t, uvltke H1MI, coe-
evtitve.

1z
6. View the source coue again at www.visibooks.com/newwindow.

7. Finu the anchor tag between the <BODY> anu </BODY> tags that
refers to the JavaScript function Contact().

<FONT FACE="arial" SIZE="+1"><B><A
HREF="javascript:Contact()">Open new window
with form inside</A></B></FONT>

1ip: A juvcitov t o job pejowe! by o pogow. 1he ove obove t
vowe! Contact(). Ii job t io opev ihe wtv!ow ihoi ollow people
io covioci Vttbook.

8. Copy the anchor tag, then paste it into inuex.htnl so it linls the
seconu sentence to the

Fow iht.

<A HREF="infoform.html">Get more information
about Western travel mailed to you</A>

1o iht.

<A HREF="javascript:Contact()">Get more
information about Western travel mailed to
you</A>

9. Save index.html anu view it in the browser.

1
10. Clicl on the linleu sentence. A new winuow shoulu pop up with
the forn insiue:

1ip: 1o chovge ihe t:e ov! oppeoovce oj ihe wtv!ow ihoi pop up,
chovge ihe volue ojie window.open.

OpenNewWindow =
window.open('contact.html','help','toolbar=n
o,
location=0,directories=no,status=yes,menubar
=0,
scrollbars=yes,resizable=yes,
width=300,height=350')

Chane to
status=no
to et rid of
the status
bar at the
bottom of
the window
Chane width and
heiht vaIues to
chane size of
window in pixeIs

1q
VaIidate form input

5ee how it works

1. In Notepau, open infoform.html in the Travel West site.

2. In the browser, go to www.visibooks.com/validate.

3. Clicl on the Send me info button. When you uo, an alert winuow
shoulu appear. When you enter your nane anu clicl the button,
another alert winuow shoulu appear that reaus, Please input
your address.` This also worls with the e-nail input.

1
Insert the validation script

1. View the source of the page at www.visibooks.com/validate, anu
copy the JavaScript between the <HEAD> tags:

<script>

</script>

1ip: Hee o !togow ihoi explotv ihe if ioiewevi votoble.

if (document.info.address.value=="")

2. Paste it between the <HEAD> tags in infoform.html.

Comment
tas hide
the script
from oIder,
non-
[ava5cript
capabIe
browsers
so they
don't
dispIay it
5tands for
pae itseIf
hame of
form
Identifies
input fieId
0enotes
bIank fieId

16
Modify the :f0kM: tag

1. Auu a NAME attribute to the <FORM> tag. Nane the forn info:`

<FORM NAME="info" METHOD=POST
action="http://www.yourserver.com/cgi-
bin/formmail.pl">

2. Auu the attribute ONSUBMIT to the <FORM> tag. Tell the forn
that when the subnit button is clicleu, perforn the function
return validate():

<FORM NAME="info" METHOD=POST
ONSUBMIT="return validate()"
action="http://www.yourserver.com/cgi-
bin/formmail.pl">

3. Save the page. Notice how the JavaScript`s if statenent input
variables have the sane nane as the forn`s input fielus:

script
l--
function vaIidate()
{
if (document.info.name.vaIue=="")
{
aIert ("PIease input your name.")
return faIse
}
if (document.info.address.vaIue=="")
{
aIert ("PIease input your address.")
return faIse
}
if (document.info.emaiI.vaIue=="")
{
aIert ("PIease input your e-maiI address.")
return faIse
}
}
[[--
[script

JA8LL w|0Jh="c"
CLLLPA00|h6=""
80k0Lk="c"JkJ0
w|0Jh=""P
AL|6h="riht"hame:[J0
J0w|0Jh="" |hPuJ
JYPL="text" hAML="name"
5|ZL="zc" [J0[JkJk
J0P AL|6h="riht"Address:[J0
J0 |hPuJ JYPL=JLXJ
hAML="accress" 5|ZL="zc"
[J0[JkJk
J0P AL|6h="riht"L-
maiI:[J0J0 |hPuJ JYPL="text"
hAML="emaI" 5|ZL="zc"
[J0[JkJkJ0[J0J0 |hPuJ
JYPL="submit" vALuL="5end me
info" [J0[Jk[JA8LL

4. View infoform.html in the browser. It shoulu lool anu worl lile
the forn at www.visibooks.com/validate.

1
kdditienaI keseurces

webmonkey (www.webmonkey.com)
A how-to site for people builuing Web sites, filleu with excellent
tutorials anu resources.

LchoLcho (www.echoecho.com)
Even nore tutorials than Webnonley, anu all clear anu uetaileu.
Contains helpful statistics on browser usage, nonitor settings,
platforns, anu other technology useu to view Web pages.

Project Cool (www.projectcool.com)
Knowleuge, guiuance anu inspiration for people builuing Web sites. It
incluues a goou style sheet guiue at
projectcool.con/ueveloper/reference/css_style.htnl.

web keview (www.webreview.com)
A sharp anu infornative site for Web uevelopers, with sections on
Authoring, Design, Developnent, E-Connerce, Multineuia, anu
Bacl-Enu Web server Progranning.

hJML help (www.htmlhelp.com)
Goou resource site with lots of infornation on style sheets anu HTML
technical stanuarus. Incluues online tools such as an HTML valiuator,
linl checler, anu ASCII character guiue.

h1ML 8 Xh1ML: 1he 0eIiritive 6uice (book)
Chucl Musciano, Bill Kenneuy, O`Reilly; ISBN: 039600026X
Lile nost O`Reilly bools, geareu towarus progranners. A
conprehensive resource for HTML, but better yet, a guiue to naling
HTML worl with XML-the next big thing` in Web uevelopnent.

voodoo's Introduction to |ava5cript (rummelplatz.uni-
mannheim[-skoch[js[tutorial.htm)
One of the original JavaScript tutorials, anu still excellent. Explains the
why` as well as the how` of progranning in JavaScript.

home5ite
The nother of all HTML euiting prograns. Allows search-anu-replace
through entire sites, anu incluues nany other useful features.
Downloau a 30-uay trial version at www.allaire.con.

18

1
h1ML 1a Chart

1ask 1a fxampIe

5et up a web pae

hJML
hLA0[hLA0
J|JLL[J|JLL
800Y[800Y
[hJML

hJML

hLA0
Sgratcre, Yeta tags, }avaScrpt,
StyIe sheets gc here
[hLA0

J|JLL
1he page's ttIe gces here
[J|JLL

800Y
whatever ycc Wart tc appear cr the
screer gces here
[800Y

[hJML

Iormat text

Create a paragraph

P

Jhis is a pararaph.

Align paragraph right, center
paragraph

P AL|6h="riht"[P

P AL|6h="center"[P

Jhis pararaph is centered
in this ceII by usin the
AL|6h attribute.

Make text bold

8[8

Jhis text is boId.

Indent text

uL[uL

Jhis text is indented

Create
bulleted list

uL
L|
[uL

List item
List item

Create numbered list

0L
L|
[0L

1. |tem #1
z. |tem #z

16o

1ask 1a fxampIe

Create a Iink

Link to a page within site

A hkL|="x.htmI"[A

Jhis sentence is Iinked to a pae
about X topic.

Create an e-mail link

A
hkL|=railto:you@x.cor"[A

you@x.com

Link to an external page

A
hkL|=http:[[WWW.x.cor"[A

Jhis sentence is Iinked to
www.x.com.

Insert a raphic

Insert graphic

|M6 5kC="x.if"

Align a graphic right or left

|M6 5kC="x.if" AL|6h="riht"

|M6 5kC="x.if" AL|6h="left"

Jext fIows in
to the side of the raphic
when it's aIined riht or Ieft.

Add vertical, horizontal space
around a graphic

|M6 5kC="x.if" VSPACL="x"

|M6 5kC="x.if" hSPACL="x"

Creates verticaI and horizontaI
space around raphic that
nothin can occupy.

kemove[Add border

|M6 5kC="x.if" 80k0Lk="o"

|M6 5kC="x.if" 80k0Lk=":"

Insert horizontaI ruIe

Create rule

hk

kemove -0 effect, specify
size

hk h0ShA0L S|ZL=":"

161

1ask 1a fxampIe

Chane whoIe pae

Change background color

800Y 86C0L0k="#cccccc"

Pae with rey backround

Change link, visited link colors

800Y L|hK="#ffoooo"
VL|hK="#ooffoo"

ked Iink

6reen Iink

Change page margins

800Y
J0PNAk6|h="o"
LL|JNAk6|h="o"
k|6hJNAk6|h="o"
NAk6|hw|0Jh="o"
NAk6|hhL|6hJ="o"

Jext and raphics on pae
o riht to its edes.

Create a tabIe

Insert table

JA8LL
Jk
J0[J0
J0[J0
[Jk
[JA8LL

5pecify widths

JA8LL w|0Jh=":oo"
Jk
J0w|0Jh="zo"
J0w|0Jh="8o"
[Jk
[JA8LL

zc 8c

5pecify border

JA8LL 80k0Lk="o"

Pad cells

JA8LL CLLLPA00|h6=":6"

CeII contents
are inset
16 pixeIs from
ede of ceIIs

5pace cells

JA8LL CLLLSPAC|h6="z"

CeIIs are
separated
by z pixeIs

16z

1ask 1a fxampIe

Change cell background color

J086C0L0k="#cccccc

Insert background image in cell

J08ACK6k0uh0="x.if"

fmpIoy frames

Create a frameset

hJML
hLA0[hLA0
J|JLL [J|JLL
|kAML5LJ k0w5="c,*"
|kAML hAML="topframe"
5kC="x.htmI"
|kAML hAML="bottomframe"
5kC="y.htmI"
[|kAML5LJ
[hJML

IncIude forms

Lstablish form

|0kM

Insert textbox

|0kM
|hPuJ JYPL="text"

5pecify size

|hPuJ JYPL="text" S|ZL="zo"

5pecify name

|hPuJ hANL="x"

Insert checkbox

|hPuJ JYPL="checkbox"

Insert radio buttons

|hPuJ JYPL="radio"

Make only one clickable

|hPuJ JYPL="radio"
hANL="radiobut"
VALuL="radio:"

|hPuJ JYPL="radio"
hANL="radiobut"
VALuL="radioz"

16

1ask 1a fxampIe

Insert drop-down list

5LLLCJ hAML="x"

0PJ|0h[0PJ|0h

0PJ|0h[0PJ|0h

0PJ|0h[0PJ|0h

[5LLLCJ

5LLLCJ hAML="x"
0PJ|0hIrst chcce[0PJ|0h
0PJ|0hSeccrc chcce[0PJ|0h
0PJ|0h1hrc chcce[0PJ|0h
[5LLLCJ

Insert comment field

JLXJAkLA hAML="x" C0L5="zz"
rows="8"[JLXJAkLA

Insert submit button

|hPuJ JYPL="submit"

Change text on button

|hPuJ JYPL="submit"
VALuL="your text here"

16q

Jask Ja Lxarple

fmpIoy styIe sheets

Create style sheet

5ave fiIe with .css extension.

styIesheetname.css

Create style

.styIename { }

5pecify font family

.styIename {
font-famiIy:"ariaI,sans-serif" }

5pecify font size

.styIename {
font-size:"zpt" }

5pecify font weight

.styIename {
font-wiht:"boId" }

5pecify font color

.styIename {
coIor:"#ccccff" }

5pecify background color

.styIename {
backround-coIor:"#ccccpp" }

Link to a style sheet

L|hK kLL="styIesheet"
hkL|="styIesheetname.css"

Apply a style

P cIass="styIename"

hz cIass="styIename"

Create rollover effects

A:hover {
coIor:"#ccffcc",
text-decoration: underIine }

16
lndex
Browser
Internet Explorer ................................................................................................. 11
Netscape Connunicator.................................................................................... 11
viewing pages ....................................................................................................... 11
Colors
hexauecinal.......................................................................................................... 30
linl......................................................................................................................... 32
page....................................................................................................................... 30
table cells............................................................................................................... 63
Forms..............................................................................................................................102
action................................................................................................................... 108
valiuation............................................................................................................ 134
Frames..............................................................................................................................91
franeset ................................................................................................................ 92
Graphics
aligning ................................................................................................................. 38
baclgrounu........................................................................................................ 132
capturing............................................................................................................... 34
copyright............................................................................................................... 33
fornatting............................................................................................................. 41
inserting ................................................................................................................ 36
rollover................................................................................................................ 142
spacers................................................................................................................. 133
using as linls ........................................................................................................ 47
Home Page
creating ................................................................................................................... 4
file nane ................................................................................................................. 7
Horizontal Rule............................................................................................................137
JavaScript.......................................................................................................................141
forn valiuation.................................................................................................. 133
Open New Winuow........................................................................................... 130
progranning..................................................................................................... 142
rollovers.............................................................................................................. 149
Iinks
e-nail .................................................................................................................... 31
external sites ......................................................................................................... 33
target ..................................................................................................................... 94
to new page........................................................................................................... 23
Navigation
bars........................................................................................................................ 76
clues....................................................................................................................... 27
systen.................................................................................................................... 44
you are here.......................................................................................................... 46

166
Software
Notepau...................................................................................................................4
Source Code...................................................................................................................143
copying................................................................................................................144
nouifying............................................................................................................146
Style Sheets.....................................................................................................................111
applying...............................................................................................................114
creating................................................................................................................112
linl effects ...........................................................................................................117
Tables................................................................................................................................58
boruer....................................................................................................................62
creating..................................................................................................................39
fornatting.............................................................................................................63
tables within..........................................................................................................88
wiuth......................................................................................................................63
Tag
<A> (anchor).......................................................................................................28
<BODY>.................................................................................................................9
<FONT>...............................................................................................................13
<HEAD>.................................................................................................................7
<HTML>................................................................................................................4
<IMG>..................................................................................................................39
<META>.............................................................................................................100
<P>........................................................................................................................19
<TABLE>..............................................................................................................39
<TITLE>.................................................................................................................9
Text
aligning..................................................................................................................19
centering ...............................................................................................................77
changing color......................................................................................................18
changing fonts......................................................................................................14
changing size.........................................................................................................16
changing weight ...................................................................................................17
creating lists..........................................................................................................23
inuenting...............................................................................................................21
Web fonts..............................................................................................................13
Uploading.......................................................................................................................121
FTP......................................................................................................................121
Web Page
consistent layout ..................................................................................................83
layout.....................................................................................................................38
nargins................................................................................................................138
proper file nanes .................................................................................................26
title...........................................................................................................................8
Web Server.....................................................................................................................123

0ewnIead isibeeks fer Free

AII Visibooks can be downIoaded at www.visibooks.com.
Visibools believes that you shoulun`t have to rely on strangers` reviews or slin at a
boolstore when ueciuing which conputer bool to buy. By putting our bools online for
you to uownloau anu review, we nale it easier to finu the right bool.

Visibooks are free. why buy a bound copy!
Visibools are nore useful on paper than as uigital files. If youù lile to traue a snall
anount of noney for a big chunl of tine, purchase a bounu copy of your Visibool:

Print-It-YourseIf 8uy a 8ound Copy
Printing 5pend 1-z hours printin it at
home, or c minutes at work tryin
not to et cauht usin the office
printer. PIus 1-z hours to o to
Kinko's, have it bound, then brin
it back. 0r minutes to pick up and
sort paes that feII out after bein
bound with a cIip.
z minutes to order
8inding 5pend $1.c for 1c sheets of
paper, pIus $z depIetion of printer
cartride, pIus $8 for pIastic comb
bindin.
Less than $zc for a spiraI-bound
copy, printed on heavyweiht paper
with fuII-coIor cover.
1otaI 5pend yo minutes to q hours.
5pend 5y.yo to 5::.yo.
z minutes, Iess than 5zy shipped.

Know someone who'd Iike to downIoad Visibooks for free!
Tell soneone about Visibools: www.visibooks.com/refer.html.

want to know when new Visibooks are pubIished!
Sign up to be notifieu via e-nail: www.visibooks.com/notify.html.

0ther books on web pubIishin from

FrentFae zooo fer isuaI Learners
Jeaches peopIe how to buiId web sites usin |rontPae zccc. Addresses
improvements from previous versions.

0reamweaver q fer isuaI Learners
Covers both basic and advanced features of one of the easiest to use site-
buiIdin prorams.

1he isuaI Learner's 6uide te Manain web Frejects
6oes beyond the nuts-and-boIts of site-buiIdin to show peopIe how to
pIan, oranize, buiId and manae effective web sites.

HTML and Javascript-Visibooks

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML and Javascript-Visibooks

Încărcat de

Drepturi de autor:

Formate disponibile

h1ML and java5cript

fer isuaI Learners

Create a navigation bar for a main section page

Fractice: Layeut 8 kaviatien

S-ar putea să vă placă și