Html & javascript_for_visual_learners_tutorial_-_174_pages

HTML and JavaScript
for Visual Learners
1810 Monument Avenue, Suite 100
Richmond, VA 23220
www.visibooks.com

HTML and JavaScript for Visual Learners
Published by Visibooks, LLC, Richmond, VA
Copyright
Suggestions
If you have a suggestion on how to improve this book, send it to
improvements@visibooks.com. If we use it, we’ll send you a complete set
of all published Visibooks and post your name in the Acknowledgements of
the next edition.
Trademarks and Disclaimer
Visibooks™ is a trademark of Visibooks, LLC. All brand and product names in
this book are trademarks or registered trademarks of their respective companies.
Visibooks™ makes every effort to ensure that the information in this book is
accurate. However, Visibooks™ makes no warranty, expressed or implied, with
respect to the accuracy, quality, reliability, or freedom from error of this
document or the products described in it. Visibooks™ makes no representation or
warranty with respect to this book’s contents, and specifically disclaims any
implied warranties or fitness for any particular purpose. Visibooks™ disclaims all
liability for any direct, indirect, consequential, incidental, exemplary, or special
damages resulting from the use of the information in this document or from the
use of any products described in it. Mention of any product does not constitute an
endorsement of that product by Visibooks™. Data used in examples are intended
to be fictional. Any resemblance to real companies, people, or organizations is
entirely coincidental.
International Standard Book Number: 0-9707479-2-6
First Edition
You have permission to post this book on a Web site, e-mail it, print it,
or pass it along for free to anyone you like, as long as you make no
changes or edits to its contents or digital format. Make as many copies
as you want. However, the right to sell this book, whether in digital or
bound form, is strictly reserved to Visibooks, LLC.

Download other Visibooks for free at www.visibooks.com
Table of Contents
Introduction ............................................................................................... 1
HTML Basics.................................................................... 3
Create a home page..............................................................................4
Create the home page......................................................................................................4
View the page in a browser ............................................................................................11
Format pages and text.........................................................................14
Change fonts...................................................................................................................14
Change text size.............................................................................................................16
Change text weight ........................................................................................................17
Change text color ...........................................................................................................18
Align text.........................................................................................................................19
Indent text.......................................................................................................................21
Create lists......................................................................................................................23
Create links tonew pages...................................................................25
Step 1: Create a new page .............................................................................................25
Step 2: Link to the new page........................................................................................28
Create e-mail and external links.......................................................... 31
Create an e-mail link......................................................................................................31
Link to an external site ..................................................................................................33
Insert and align graphics....................................................................34
Capture a graphic from the Web...................................................................................34
Insert a graphic...............................................................................................................36
Align a graphic................................................................................................................38
Format a graphic.............................................................................................................41
Create a basic navigation system........................................................ 44
Link back to the home page ..........................................................................................44
Link pages to each other ...............................................................................................45
Use graphics as links.....................................................................................................46
Use graphics as links.....................................................................................................47
Change page, link colors ....................................................................50
Change background color of page ................................................................................50
Change link colors..........................................................................................................51
Change link colors..........................................................................................................52

Layout & Navigation...................................................... 57
Lay out pages using tables.................................................................58
Create a table.................................................................................................................58
Create a table.................................................................................................................59
Format a table ................................................................................................................63
Create a table-based home page .................................................................................67
Create new table-based pages......................................................................................73
Create navigation bars........................................................................76
Create a navigation bar for a home page ....................................................................76
Create a navigation bar for a main section page ........................................................79
Add subsections tosite......................................................................82
Insert a table for content and subsection links..........................................................82
Create subsection pages...............................................................................................84
Place tables within tables...................................................................88
Link toan external siteusing frames................................................... 91
Interactivity...................................................................99
Insert META tags.............................................................................. 100
Create forms .................................................................................... 102
Use style sheets................................................................................ 111
Create a style sheet......................................................................................................112
Apply a style sheet.......................................................................................................114
Create link effects with style sheets...........................................................................117
Upload sites toa Web server..............................................................121
Advanced Layout.......................................................... 131
Employ background graphics............................................................ 132
Employ spacer GIFs ...........................................................................135
Insert a horizontal rule......................................................................137
Specify page margins....................................................................... 138

Practical JavaScript......................................................141
Enable rollover graphics....................................................................142
View source code..........................................................................................................143
Copy source code .........................................................................................................144
Modify source code......................................................................................................146
Open new windows...........................................................................150
Validate form input............................................................................153
Validate form input............................................................................154
See how it works ..........................................................................................................154
Insert the validation script..........................................................................................155
Modify the <FORM> tag.................................................................................................156
Additional Resources ..............................................................................157
HTML Tag Chart .......................................................................................159
Index.......................................................................................................165

1
Introduction
Welcome toHTML and JavaScript for Visual Learners. If you’ve never
useda Visibookbefore,you’ll findthat it contains several hundred
illustrations,withcomparativelylittle text. It presents essential tasks,
breaks themdown intosteps,then walks you throughthemwith
illustrations.
What you’ll learn
You’ll learn howtouse HTMLtocreate a
solid,attractive Website that’s easyto
navigate. You’ll alsolearn howtoupload
it toa Webserver.
You won’t become an expert in Web
publishing—that takes practice andreal-
worldexperience. But you will learn the
fundamentals of site-building,andget a
goodfoundation on whichtobuild
professional-level skills.
Additional resources for acquiring expert-
level HTMLandJavaScript skills are
foundat the endof this book.
How you’ll learn it
This bookhas five sections: HTMLBasics,
Layout & Navigation,Interactivity,
AdvancedLayout,andPractical
JavaScript.
At the endof eachtaskandsection are
practice exercises. Don’t worryif you
can’t workthroughthe whole bookin a
dayor two. Take your time,andtrytodothe practice. You can check
your workagainst examples postedon the Web.
Follow thesteps
!
Seetheresults

2
Before you begin
Before you begin,it’s important that you knowWindows well. A
working knowledge of Windows makes it mucheasier tolearn HTML
andJavaScript. You shouldbe familiar with:
• Howdirectories work
• Windows Explorer
• Basic wordprocessing
Make sure you can performthe following tasks:
• Create a folder on your computer’s harddrive
• Create a folder within a folder
• Copya paragraphfromone document andpaste it intoanother.
If you have trouble doing this,set
aside a couple of hours tolearn
Windows basics. Have a friendor
co-worker whois proficient with
computers walkyou through
Windows Explorer,creating folders
andbecoming familiar withfile
extensions.
You shouldalsopractice using the
Cut,Copy,andPaste commands in
a standardwordprocessing
program. When you can dothese
things on your own,you’re readyto
learn HTMLandJavaScript.

3
HTML Basics
In this section, you’ll learn how to:
• Create a home page
• Format text
• Create links to new pages
• Create e-mail and external links
• Insert graphics
• Create a navigation system
• Change page and link colors
You’ll build a site that looks like this:

4
Create a home page
Create the home page
1. Open a browser,suchas Internet Explorer or Netscape Navigator.
2. Open the programNotepad. Dothis byfirst clicking the
button on the taskbar,then Programs,then Accessories,then
Notepad.
3. At the topof the Notepadscreen,type:
<HTML>
Tip:HTML is a tag. Tags are instructions to a Web browser. This
particular instruction lets the Web browser know that what follows is
a Web page, written in HTML.
Tags can be written in upper-case or lower-case letters—it doesn’t
matter which. HTML, html, or HtMl are all fine.

5
4. Save the file.
5. When the Save As windowappears,select the C: drive in the
Save in drop-down list.
6. Create a newfolder byclicking on the icon.

6
7. Name the newfolder “Dogs,” then double-clickit soit appears in
the Save in box.
8. In the File name textbox,type index.html.
9. In the Save as type drop-down list,select All Files. When you’re
done,the windowshouldlooklike this:

7
10.Save the page byclicking on the Save button.
11. Belowthe HTML tag,type:
HEAD
!--Created by Your Name--
/HEAD
Tip: The HEAD section contains information that doesn’t show up
on the page when it is viewed in a browser. Note the closing
/HEAD tag: in HTML, you must give the browser instructions to
end something as well as start it.
Home page file names
All Webpages have a .html extension (or .htm).
All home pages have the file name index.html. index.html
comes up automaticallywhen the address of a domain or
directorywhere it’s locatedis typedintoa browser.
For instance,if you gotowww.visibooks.com,the home page
appears automatically. That’s because its file name is
index.html. If the file name of the Visibooks home page was
homepage.html,you’dhave totype
www.visibooks.com/homepage.html toget it toappear.
The Microsoft exception: Toget your home page tocome up
automaticallyon a Webserver running Microsoft’s Internet
Information Server as it’s operating system,give your home
page the file name default.htm.

8
Tip: !--Created by Your Name-- is called a comment.
Whatever text is between the dashes won’t show up on a browser’s
screen—it’s only visible if someone views the page’s HTML code. You
need to include the ! for this to work.
12.Belowthe /HEAD tag,title the page “AHome Page About
Dogs” byusing TITLE tags:
TITLE
A Home Page About Dogs
/TITLE
Tip: Note that the text “AHome Page About Dogs” is not a tag. It is
text surrounded by tags. The TITLE tags tell the browser what to
do with the text: make it the title of the page.

9
13.Belowthe /TITLE tag,add:
BODY
/BODY
Tip: Anything you want to be visible in a browser’s main window,
put between the BODY and /BODY tags.
Page titles
The title of a Webpage describes the page. It’s what appears in
a browser’s Historylist. The title alsoshows upas a linkwhen a
page comes upin a searchengine. If all your pages have
discrete,descriptive titles,they’ll be easier for people tofind.
The page title shows upin the top,or “title,” bar of the browser
usedtoviewit. The title of this page is Dogs.

10
14.Belowthe /BODY tag,close the /HTML tag. When you’re
finished,the code shouldlooklike this:
15.Between the BODY and/BODY tags,type the words:
Dogs Home Page
16. Save the page.

11
View the page in a browser
1. Gotothe browser andon its menu bar,clickFile,then Open.
Tip: If you’re using Netscape Communicator instead of Internet
Explorer, click Open Page,then Choose File.
2. When the Open windowappears,clickthe Browse button.

12
3. When the newwindowappears,navigate tothe Dogs folder in the
Look in drop-down list,then select the home page: index.html.
4. Clickthe Open button,then the OK button. The page should
come upin the browser andlooklike this:
You have createda home page titled“A Home Page About
Dogs.”
The home page’s file name is index.html.
It is locatedin a folder calledDogs on the C: drive.

13
Practice: Create a home page
A. What is the correct file name for a home page?
B. Why is there a special file name for home pages?
C. Why is it important that the home page—and all other pages in a
Web site—have accurate titles?
D. What is the difference between a page’s title and its file name?
Answers
A. index.html
B. It allows home pages to appear in a browser without typing the file name as part of a Web address.
C. Accurate titles allow people to find pages easier when bookmarking them or searching in a browser’s History list.
D. A page title appears in the Title bar at the top of the browser. It’s plain text, such as “The Smith Family: Vacation
Pictures,” that makes it easy for people to keep track of a page. A page’s file name, such as vacpics.html, is how the
computer keeps track of it.

14
Format pages and text
Change fonts
1. In front of the words “Dogs Home Page,” insert a FONT tag
withthe attribute FACE=”arial”:
FONT FACE=”arial”Dogs Home Page/FONT
2. After the words,close the FONT tag:
FONT FACE=”arial”Dogs Home Page/FONT
Tip:Think of an attribute as a sub-instruction to the browser. In this
case, the FONT tag tells the browser that text will be changed, and
the FACE attribute tells it how to change, specifying the Arial
typeface.

15
3. Viewthe page in the browser. Clickthe browser’s Refresh button,
andthe page shouldlooklike this:
Tip: If a page doesn’t look like it’s supposed to—or nothing shows up
at all—check the HTML code you’ve written. You might have left out
a quote or made some other small mistake. Something that seems
insignificant can wreck a page:
FONT FACE=”arial
Web fonts
When text is viewedon a computer,onlyfonts installedon the
computer can be seen. For instance,if someone createda page
that specifiedthe Tekton font,almost noone viewing it would
see it in Tekton because veryfewcomputers have that font
installed. Computers without Tekton woulddisplaytext in the
default font: Times New Roman.
All Windows computers have the Arial font installed.
Windows 95 andlater computers have Verdana. Macintoshes
have Helvetica,the font that Arial is basedupon.
Tocover all bases,specifymultiple fonts:
FONT FACE=”verdana,arial,helvetica”
Missing endquote(“)
Textis inthe
Arial font

16
Change text size
1. In Notepad,addthe SIZE=”+4” attribute tothe FONT tag:
FONT FACE=”arial” SIZE=”+4”Dogs Home
Page/FONT
2. Save the page andviewit in the browser. It shouldlooklike this:

17
Change text weight
1. In Notepad,addthe B tag in front of the words “Dogs Home
Page” andclose it after them:
FONT FACE=”arial” SIZE=”+4”BDogs Home
Page/B/FONT
Tip: Wheninserting multiple tags, arrange them in mirror-image
order. The tags and text above are a good example: since it starts with
the FONT tag, it ends with the /FONT tag. Tags that aren’t
arranged in mirror-image order can cause display problems in some
browsers.

18
Change text color
1. In the FONT tag,addthe attribute COLOR=”red”:
FONT FACE=”arial” SIZE=”+4” COLOR=”red”
2. Save the page. Viewit in the browser,andthe text shouldshowup
red.
3. Change the text color toblack,then save the page.
FONT FACE=”arial” SIZE=”+4” COLOR=”black”

19
Align text
1. Beneaththe present text andtags,insert a P tag tobegin a new
paragraph.
2. Beneaththe P tag,insert the tag FONT FACE=”arial”
SIZE=”-1” andthe words “These are my favorite
breeds of dog:”
3. Within the P tag,addthe attribute ALIGN=”right”:
P ALIGN=”right”
4. Adda closing /P tag after the newparagraph.
P ALIGN=”right”
FONT FACE=”arial” SIZE=”-1”These are my
favorite breeds of dog:
/P

20
Tip: Usually a P tag requires no closing /P tag in HTML, but
in this case the ALIGN=”right” attribute is used. The closing
/P tag after the paragraph keeps the browser from right-aligning
whatever is beneath it.
5. Save the page,then viewit in the browser. It shouldlooklike this:
6. Remove the ALIGN=”right” attribute fromthe P tag.
Tip: To generate a single-line break rather than the double-space a
P tag generates, use the BR tag. Putting a BR or “Break” tag
between two lines of text will bump the second line down to the next
line:
FONT FACE=”arial” SIZE=”+4”BDogs Home
Page/B/FONT
BR
FONT FACE=”arial” SIZE=”-1”These are my
favorite breeds of dog:

21
Indent text
1. Belowthe text,“These are myfavorite breeds of dog:,” insert three
newparagraphs:
PChesapeake Bay Retriever/P
PGerman Shepherd/P
PYorkshire Terrier/P
2. Enclose these paragraphs in UnorderedList tags toindent them:
UL
PChesapeake Bay Retriever/P
PGerman Shepherd/P
PYorkshire Terrier/P
/UL

22
Tip: Notice how all the text below the FONT FACE=”arial”
SIZE=”-1” tag looks the same. It will stay that way until the
closing /FONT tag is inserted.

23
Create lists
1. Withthe three breeds of dog,replace the P and/P tags with
LI tags togenerate bullets in front of the text that follows:
UL
LIChesapeake Bay Retriever
LIGerman Shepherd
LIYorkshire Terrier
/UL

24
Practice: Format pages and text
A. Why are the most common font choices Arial, Verdana, and
Helvetica?
B. What kinds of computers have the font Arial installed? Which have
Helvetica instead?
1. Change the title of the home page to“My Favorite Dogs.”
2. Change the bulletedlist toa numberedlist.
Tip: Use OL instead of UL to generate a numbered list.
3. Change the numberedlist backtoa bulletedlist.
4. Make the list items bold. When you viewit in the browser,the page
shouldlooklike this:
Answers
A. Those are the fonts that most Windows computers have installed.
B. Windows computers have Arial, Macs have Helvetica.

25
Create links to new pages
Step 1: Create a new page
1. In Notepad,change the title of the page to“Chesapeake Bay
Retrievers,” then take out all the tags andtext between the
BODY and/BODY tags.
2. On the menu bar,clickFile,then Save As.
3. Save the newpage withthe file name chesapeake.html.
Tip: Remember to Save as type: All Files.

26
4. Beneaththe BODY tag,type “Chesapeake BayRetrievers.” This is
the page heading. Make it verdana,bold,size +3:
BODY
FONT FACE=”verdana” SIZE=”+3”BChesapeake
Bay Retrievers/B/FONT
/BODY
File names for the Web
Most Webservers are Unix- or Linux-based,whichdon’t deal
cleanlywithspaces in file names. For instance if you name a
file fido page.html,it mayshowupin the URLbox of the
browser as fido%20page.html.
Also,Webservers are case-sensitive,sokeeping file names
lower-case eliminates a potential source of mistakes.
Make all file names in a Website—pages,graphics and
folders—lower-case,withnospaces.
Correct file name: german.html
Incorrect: German Shepherds.html

27
5. Save the page.
Providing navigation clues with text size
The heading of the Chesapeake BayRetriever page is made one
size smaller than the heading of the home page. That’s because
the CBRpage is one stepdown in the site hierarchy.
Level 1: Dogs
(toplevel heading; SIZE=”+4”)
Level 2: Chesapeake BayRetrievers
(second-level heading; SIZE=”+3”)
Making the heading of the CBRpage smaller than the home
page’s heading helps showpeople where theyare in the site.
Dogs
ChesapeakeBay
Retrievers

28
Step 2: Link to the new page
1. Open the home page (index.html) in Notepad. In front of the first
item,Chesapeake Bay Retriever,insert an anchor tag.
Then close the anchor tag :
LIBA HREF=”chesapeake.html”Chesapeake
Bay Retriever/A/B
How an anchor tag works
Anchor tags create a clickable linktoanother page.
A pagewith this filename… …is linkedtothesewords.
a href=”filename.html”New Page/a

29
2. Save the home page andviewit in the browser. The words
Chesapeake Bay Retriever shouldbe a link,andthe page
3. Click on the Chesapeake Bay Retriever link. The Chesapeake
BayRetriever page shouldappear in the browser.

30
Practice: Create links to new pages
A. Why should file names be lower-case and free of spaces?
B. Why should the headings on section pages (Chesapeake Bay
Retrievers, German Shepherds) be smaller than the heading of the
home page?
1. Create newpages for German Shepherds andYorkshire Terriers.
Page Title File Name
German Shepherds German Shepherds german.html
Yorkshire Terriers Yorkshire Terriers yorkshire.html
2. On the home page,linkthe words German Shepherd and
Yorkshire Terrier totheir pages.
3. On the home page,remove the words “Home Page” after
“Dogs.”
4. On the Chesapeake BayRetriever,German ShepherdandYorkshire
Terrier pages,put the page headings in the same font andweight as
the home page (Verdana; bold).
5. Make the page headings of these pages one size smaller than the
heading on the home page,just like on the Chesapeake Bay
Retriever page.
6. Save all pages andclickon the home page’s links tomake sure they
work.
Answers
A. Because most Web servers deal better with lower-case, spaceless file names.
B. It provides site users with a visual distinction between first-level (home) pages and second-level (main section) pages.

31
Create e-mail and external links
Create an e-mail link
1. In a newparagraphbeneaththe list,type the sentence “For more
information, contact info@visibooks.com.”
2. Surroundthe e-mail address withanchor tags,but insteadof
linking it toa Webpage,use the mailto commandtolinkit toan
e-mail program:
For more information, contact
A HREF=”mailto:info@visibooks.com”
info@visibooks.com/A

32
3. Save the page. When you viewit in the browser,it shouldlooklike
this:
How e-mail links work
When someone goes toa Website andclicks on an e-mail link,
it’s supposedtoopen the e-mail programon that person’s
computer andinsert the address intoa newmessage.
If the person’s e-mail programisn’t configuredcorrectly,this
won’t work. That’s whye-mail links shoulduse the e-mail
address as a link: sopeople can enter the address manuallyif
theyhave to.

33
Link to an external site
1. In Notepad,adda newsentence after the last one. Type the
sentence,“Please also visit www.dogs.com.”
2. Surroundthe Webaddress www.dogs.com withthese anchor
tags tolinkit tothe external Website:
A
HREF=”http://www.dogs.com”www.dogs.com/A
Tip: For an external link to work, you must type http:// as part of
the Web address.
3. Save the page.
4. Previewthe page in the browser,then clickon the linktosee if it
links tothe external site www.dogs.com.
5. Close the browser.

34
Insert and align graphics
Capture a graphic from the Web
1. Open a newbrowser window.
2. Gotothe Website www.visibooks.com/dogpics.
3. Place your cursor on top of the picture of the Chesapeake Bay
Retriever,then clickwithyour right mouse button.
Rightmouse
button

35
4. ClickSave Picture As.
5. When the Save Picture windowappears,select the “Dogs” folder
in the Save in drop-down list.
6. Create a newfolder within Dogs called“graphics.”
7. Double-clickon the graphics folder soit appears in the Save in
drop-down list.
8. Clickthe Save button tosave the graphic inside the graphics
folder.
Tip: Creating this separate sub-folder to hold your site’s graphics
makes the site easier to organize and update.

36
Insert a graphic
1. In Notepad,open the Chesapeake BayRetriever page,file name
chesapeake.html.
2. Create a newparagraphunder the main heading.
3. In the newparagraph,insert an image tag:
IMG SRC=”graphics/chessie.gif”
Tip: Notice that in this image tag there’s a “path.” For the image
source, the tag first points to the graphics folder, then to the file name
of the image within it.
folder graphic

37
4. Save the page,then viewit in the browser. It shouldnowlooklike
this:

38
Align a graphic
1. In a newparagraphbelowthe 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.

39
2. Save the page andviewit in the browser. The page shouldlooklike
this:
3. GobacktoNotepadandaddthe ALIGN=”left” attribute tothe
IMG tag:
ALIGN=”left”

40
4. Save the page andviewit in the browser (just clickthe “Refresh”
or “Reload” button). It shouldlooklike this:

41
Format a graphic
1. In the Chesapeake BayRetriever page,addthis ALT attribute tothe
IMG tag:
IMG SRC=”graphics/chessie.gif” ALIGN=”left”
ALT=”Chesapeake Bay Retriever”
2. Addthe VSPACE=”4” andHSPACE=”12” attributes as well:
ALT=”Chesapeake Bay Retriever” VSPACE=”4”
HSPACE=”12”
3. Also,addthe BORDER=”1” attribute:
HSPACE=”12” BORDER=”1”
“Alt” text allows visually-impairedpeople toknowwhat a
graphic represents. Alt text alsoallows searchengines toindex
visual content.

42
4. Save the page andviewit in the browser. It shouldnowlooklike
this:
5. Move your cursor ontothe graphic. The “Alt” text—an alternative
text description of the graphic—shouldpopup.
The text shouldbe alignedwiththe topof the graphic.
Tip: If you know the dimensions of a graphic, you can make it load
faster by specifying its width and height in pixels:
HSPACE=”12” BORDER=”1” WIDTH=”150”
HEIGHT=”189”
AnHSPACE of 12 creates a
horizontal spaceof 12 pixels
aroundthegraphic thatnothing
canoccupy
A Borderof 1 creates a1-pixel
borderaroundthegraphic

43
Practice: Insert graphics
A. Why should you specify Alt text for each graphic you insert?
1. Gotowww.visibooks.com/dogpics. Save the German Shepherds
graphic in C:dogsgraphics withthe file name shepherds.gif.
2. Save the Yorkshire Terrier graphic in C:dogsgraphics withthe
file name yorkie.gif.
3. Insert shepherds.gif intothe German Shepherds page in a new
paragraphbelowthe heading.
4. Insert yorkie.gif intothe Yorkshire Terriers page in a new
paragraphbelowthe heading.
5. On the German Shepherds page,type “German Shepherds are
smart dogs” in a paragraphbelowthe graphic.
6. On the Yorkshire Terriers page,type “Yorkshire Terriers are
cute” in a paragraphbelowthe graphic.
7. On bothpages,align the text tothe side of the graphic,as on the
Chesapeake BayRetrievers page.
8. On bothpages,give the graphic a border of 1,vspace of 4,and
hspace of 12.
9. On all three “Dog” pages,put all paragraphtext (not the main
headings) in the arial font,witha size of -1.
Answers
A. Alt text makes it easier for vision-impaired people to understand a page’s content, and makes it easier for search engines to
catalog it.

44
Create a basic navigation system
Link back to the home page
1. In Notepad,open the Chesapeake BayRetrievers page,
chesapeake.html.
2. Type the word“Home” in a newparagraphbeneaththe first
paragraph.
3. Enclose it in anchor tags that linkit backtothe home page:
A HREF=”index.html”Home/A
Tip: Remember, index.html is the file name for the home page.
4. Save the page,andviewit in the browser. The wordHome should
nowbe a link,andthe page shouldlooklike this:
5. On the German Shepherds page,create a linkbacktothe home
page. Dothis the same wayyou createdthe linkfor the Chesapeake
Bayretriever page.
6. On the Yorkshire Terriers page,create the same sort of linkbackto
the home page.

45
Link pages to each other
1. In Notepad,open the Chesapeake BayRetrievers page.
2. Following the Home link,type:
| Chesapeake Bay Retrievers | German Shepherds |
Yorkshire Terriers
3. Make the words “Chesapeake Bay Retrievers” boldto
showsite users “You are here.”
4. Linkthe words “German Shepherds” tothe German Shepherds
page:
A HREF=”german.html”German Shepherds/A
5. Linkthe words “Yorkshire Terriers” tothe Yorkshire Terriers
page.

46
Showing “you are here”
Asite’s navigational systemshouldshowpeople twothings:
where theyare,andwhere theycan go.
Toshowpeople where theyare,make the linkcorresponding
tothe current page intoplain text. This lets users knowthat if
theycan’t gotothat page,theymust be looking at it.
Home | Chesapeake Bay Retrievers | German Shepherds | Yorkshire Terriers
Youarehere
Making the text boldreinforces the “you are here” message.

47
Use graphics as links
1. In Notepad,open the home page. Belowthe bulletedlist of links,in
a newparagraph,insert the Chesapeake BayRetriever,German
ShepherdandYorkshire Terrier graphics:
IMG SRC=”graphics/shepherds.gif”
IMG SRC=”graphics/yorkie.gif”
2. Enclose the first image tag within anchor tags that linkit tothe
Chesapeake BayRetriever page:
A HREF=”chesapeake.html”IMG
SRC=”graphics/chessie.gif”/A
3. Save the page,then previewit in the browser. When you clickon
the Chesapeake BayRetriever graphic,it shouldtake you tothe
Chesapeake BayRetriever page.
4. GobacktoNotepadandaddthe BORDER=”0” attribute tothe
first image tag:
A HREF=”chesapeake.html”IMG
SRC=”graphics/chessie.gif” BORDER=”0”/A

48
5. Save the page andviewit in the browser again. The blue link
border aroundthe Chesapeake BayRetriever graphic shouldbe
gone:

49
Practice: Create a navigation system
A. What’s a good way to show site users “You are here?”
Task: Tomake your Dogs site looklike the site at
www.visibooks.com/dogs.
1. In Notepad,open the German Shepherds page,german.html.
2. Following the Home link,type:
| Chesapeake Bay Retrievers | German Shepherds |
Yorkshire Terriers
3. Make the words German Shepherds bold.
4. Linkthe words Chesapeake Bay Retrievers and
Yorkshire Terriers totheir corresponding pages.
5. Save the page.
6. Using the same system,create navigation links for the Yorkshire
Terriers page. Then save the page.
7. On the home page,linkthe German Shepherds graphic tothe
German Shepherds page. Dothe same for the Yorkshire Terriers
graphic.
8. Take out the linkborders of these graphics.
9. When finished,previewyour Dogs site in the browser. It should
looklike the site at www.visibooks.com/dogs.
Answers
A. Make the link corresponding to the current page bold, and plain text (no longer a link).

50
Change page, link colors
Change background color of page
1. Open the home page in Notepad.
2. In the BODY tag,addthe attribute BGCOLOR=”#ffffcc”:
BODY BGCOLOR=”#ffffcc”
3. Save the page andviewit in the browser. The backgroundcolor of
the page shouldnowbe pale yellow.
Hexadecimal colors
The ffffcc that stands for pale yellowis a hexadecimal
color. Hexadecimal colors allowyou tospecifycolors more
preciselythan you can withwords. For example,you coulduse
the attribute BGCOLOR=yellow in the bodytag andthe page
backgroundwouldturn bright yellow,but if you used
BGCOLOR=pale yellow,that wouldn’t work.
For shades of color,hexadecimals must be used. Theywork
like this:
Computers showcolor as a mix of red,green andblue. In
hexadecimal colors,the first pair of letters or numbers signify
red,the secondpair signifygreen,andthe thirdpair signify
blue:
Red Green Blue
ff ff cc

51
Hexadecimal colors, continued
The color values gofromthe maximumamount of color (ff)
tonocolor at all (00):
Max Mid-range None
ff cc 99 66 33 00
Navyblue wouldbe shown in hexadecimals as nored(00),no
green,(00),anda little bit of blue (66):
000066
Alist of hexadecimal color codes is postedat:
www.webmonkey.com/reference/color_codes

52
Change link colors
1. In the home page,addthe attribute LINK=”#ff0000” tothe
BODY tag:
BODY BGCOLOR=”#ffffcc” LINK=”#ff0000”
This makes the links on the page showup in red.
2. Addthe attribute VLINK=”#00ff00” tothe BODY tag:
BODY BGCOLOR=”#ffffcc” LINK=”#ff0000”
VLINK=”#00ff00”
This makes visitedlinks showupin green.
Tip: Visited links are links to pages that have already been viewed in
the browser.

53
3. Save the page andviewit in the browser. The links on the page
shouldeither be redor green.
Consistent link colors
Linkcolors shouldbe consistent throughout a Website. If the
links on one page are red,theyshouldbe redon everypage.
Learning that “redequals link” once is mucheasier for people
than having tofigure out the linkcolor for eachpage or section
of a site.

54
Practice: HTML Basics
Task: Tocreate a Website about cats that looks like the site at
www.visibooks.com/cats.
1. Create a newhome page andtitle it “The Wonderful World of
Cats.”
2. Save it in a newfolder on the C: drive calledCats:
C:Cats
3. Make the heading of the page read“The Wonderful World of
Cats.”
4. Belowthe main heading on the home page,insert a bulletedlist:
House Cats
Alley Cats
Big Cats
5. Make these items arial,witha size of -1.

55
6. Linkeachlist itemtoa newpage about it. For instance,link
“House Cats” toa newpage about house cats withfile name
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 main headings of all four pages in the Arial font. Make
thembold. Give the home page’s heading a size of +3. Give the
headings of the other pages a size of +2.
9. On eachpage,write a descriptive sentence or twoin a new
paragraphbelowthe main heading. Make it arial,witha size of -1.
10.Gotowww.visibooks.com/catpics andget the three cat graphics
there. Put themin a folder called“graphics” within the C:Cats
folder.

56
11.Insert the appropriate graphic on eachof the 3 pages between the
main heading andthe descriptive text below.
12.Align eachgraphic left,then specifyvspace of 4 andhspace of 16.
13.Linkeachof the three “cat” pages backtothe home page,andto
eachother. On eachpage,make the “you are here” linkintobold,
plain text.
14.Make the backgroundcolor of eachpage light grey.
15.Make the linkcolor on eachpage bright red. Make the visitedlink
color orange.
16.Previewthe site in the browser. It shouldlooklike the site at
www.visibooks.com/cats.

57
Layout Navigation
• Lay out pages using tables
• Create navigation bars
• Add subsections to site
• Place tables within tables
• Link to an external site using frames

58
Lay out pages using tables
Tables and Web page layout
Almost all professional-qualityWebsites are laidout using
tables. Just like a spreadsheet has cells that contain numbers,a
table on a Webpage has cells that contain links,graphics,and
text.
The lines on this page clearlyshowits layout withtable cells:
cell cell cell

59
Create a table
1. Create a newfolder on the C: drive called“Travel.”
2. In Notepad,create a home page (file name index.html) titled
“Traveling Down South.” Save it in the Travel folder.
Tip: Make sure that your new home page has the correct file name—
index.html—and all necessary tags:
HTML
HEAD
/HEAD
TITLE
Traveling Down South
/TITLE
BODY
/BODY
/HTML
3. You’re going tocreate a simple one-row,two-cell table that looks
like this:
links content
4. The first step is tobegin the table. Belowthe BODY tag,begin
your table withthe TABLE tag:
BODY
TABLE
5. Belowthe TABLE tag,start a rowwiththe TR (Table Row)
tag:
BODY
TABLE
TR

60
6. In the table row,start the first cell withthe TD (Table Data) tag:
BODY
TABLE
TR
TD
7. After the TD tag,type the word“links,” then close the cell
withthe /TD tag:
BODY
TABLE
TR
TDLinks/TD
You’ve createdthe first cell in the row:
links content
8. Nowcreate the secondcell in the rowbyadding a TD tag,the
wordContent,andclosing the cell witha /TD tag:
BODY
TABLE
TR
TDLinks/TD
TDContent/TD
links content

61
9. Finishthe table byclosing the rowwitha /TR tag,then closing
the table withthe /TABLE tag:
BODY
TABLE
TR
TDLinks/TD
TDContent/TD
/TR
/TABLE

62
10.You have set upthe basic table. Tomake it possible tosee the table
outlines in a browser,addthe attribute BORDER=”1” tothe
TABLE tag:
BODY
TABLE BORDER=1
TR
TDLinks/TD
TDContent/TD
/TR
/TABLE
11.Save the page,then viewit in the browser. It shouldlooklike this:

63
Format a table
1. Nowyou’ll extendthe table. In Notepad,addthe WIDTH=”100%”
attribute tothe TABLE tag:
BODY
TABLE BORDER=1 WIDTH=”100%”
TR
TDLinks/TD
TDContent/TD
/TR
/TABLE

64
Percentage vs. fixed-width tables
When laying out a page using a table,set the table’s widthat
100%. That way,the contents of the page can stretchtofill the
whole monitor,regardless of the monitor’s resolution.
If you want it tofit a fixed-widthtable on all monitors,you’re
limitedtoa table 580 pixels wide:
640 pixels
width of
low-
resolution
monitor
- 20 pixels
browseroffset: the
distancethatpage
contentis indented
fromthesides ofthe
browser
- 40 pixels
20 forthe
vertical
scroll bar,
plus 20 extra
= 580 pixels
width
available
fortable
Creating pages withfixed-widthtables offers precise control,
but wastes space on higher-resolution monitors:

Page:laid out using a table 580 pixels wide

Monitorusedtoview page:1280 pixels wide

65
3. Remove the table border byspecifying BORDER=”0”:
BODY
TABLE BORDER=”0” WIDTH=”100%”
TR
TDLinks/TD
TDContent/TD
/TR
/TABLE
4. Make the first cell light greybyadding the attribute
BGOLOR=”#CCCCCC” tothe first TD tag:
BODY
TR
TD BGCOLOR=”#CCCCCC”Links/TD
TDContent/TD
/TR
/TABLE

66
6. You’ll notice that the wordLinks is right up against the edge of the
left-handcell. Toadda 16-pixel margin between the edge of the
cells andtheir contents,addthe attribute CELLPADDING=”16”
tothe TABLE tag:
BODY
CELLPADDING=”16”
TR
TDContent/TD
/TR
/TABLE
7. Toeliminate the spacing between cells,addthe attribute
CELLSPACING=”0” tothe TABLE tag:
BODY
CELLPADDING=”16” CELLSPACING=”0”
TR
TDContent/TD
/TR
/TABLE
Cell Padding creates acushion
of pixels betweentheedgeof
thecell andwhat’s insideit.
Cell Spacing is the
spacebetweencells.
Inthis case, 0 pixels

67
Create a table-based home page
1. Create a folder called“graphics” inside the Travel folder on your
harddrive.
2. Gotowww.visibooks.com/travelpic. Capture the graphic there
(uva.gif) andsave it in the graphics folder.
3. In the right-handcell on the home page,replace the wordContent
withthe heading “Traveling South.” Give the heading a size
of +3,put it in the Verdana font,andmake it bold.
4. Insert the graphic in a newparagraphbeneaththe heading.
5. Under the graphic,addthe following sentences as a newparagraph:
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.
Make the text arial,size -1.

68
6. In the left-handcell,replace the wordLinks withthe names of this
site’s main sections: Richmond,Williamsburg andCharleston.
Separate themwithP tags andput themin the arial font,at size
-1.
The code for the page can looklike this:

69

70
8. Tobring the left-handcell’s content tothe topof the cell,addthe
attribute VALIGN=”top” tothe first TD tag. (Tocover all
bases,addthe attribute tothe secondTD 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”BTraveling
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

71
9. Tocontrol the widths of the table cells,addthe attribute
WIDTH=”20%” tothe first TD tag,andthe attribute
WIDTH=”80%” tothe second:
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”BTraveling
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

72
10.Save the page andviewit in the browser. It shouldnowlooklike
this:

73
Create new table-based pages
1. On the Notepadmenu bar,clickEdit,then Select All.
2. Once all the code on the page is selected,clickEdit,then Copy.
3. On the menu bar,clickFile,then New.
4. When a newblankpage comes up,clickEdit,then Paste.

74
5. Save the newpage at C:Travel withthe file name richmond.html.
6. Title the newpage “Richmond, VA.”
7. Open a browser andgotowww.visibooks.com/travelpic/richpic.
Capture the Richmond,Virginia graphic there (capitol.jpg) and
place it in the graphics folder.
8. Replace the “Traveling South” heading withone that reads
“Richmond, Virginia.” Give it a size of +2.
9. Replace the home page graphic withthe Richmondgraphic.
Beneaththe graphic,in a newparagraph,type the sentence,
“Richmond is the capital of Virginia.”
10.Addthe word“Home” belowthe words in the left-handcell. When
you’re done,the page shouldlooklike this:

75
Practice: Lay out pages using tables
A. Why do you usually want to create tables with a percentage width,
rather than a fixed-pixel width?
Task: Tomake your Travel site lookandworklike the one at
www.visibooks.com/travel.
1. Create pages for Williamsburg andCharleston just like the
Richmond page.
Get the graphic andtext for the Williamsburg page at
www.visibooks.com/travelpic/willpic. Get the Charleston graphic
andtext at www.visibooks.com/travelpic/charlpic.
2. Using the words Richmond,Williamsburg,Charleston,and
Home in the left-handcell of eachpage,linkall the pages in this
Website toeachother.
TIP: Don’t forget to transform the link that shows “You Are Here”
into bold, plain text.
3. Insert the text andgraphics in their appropriate pages.
4. Align all graphics tothe left. Give themvspace of 4 pixels and
hspace of 12 pixels. Give eachgraphic appropriate Alt text.
5. When you’re done,previewthe site in the browser. It shouldlook
andworklike www.visibooks.com/travel.
Answers
A. Fixed-width tables waste space and make pages look a bit sparse when viewed on higher-resolution monitors.

76
Create navigation bars
Create a navigation bar for a home page
1. Create a folder called“Travel West” on your harddrive at
C:Travel West.
2. Create a home page titled“Traveling West for Vacation.” Save it
in the Travel West folder.
3. Between the BODY and/BODY tags,create a table withone
rowand3 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 word“California.” In the
secondcell,“The Rockies,” andin the thirdcell,“The
Midwest.”
6. Make eachcell 33% wide (except for the middle one,whichhas to
be 34%: their summust equal the table widthof 100%).

77
7. Center the words in eachcell withCENTER 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 eachcell toarial,size -1,andchange the
backgroundcolor of all cells tolight grey(#cccccc).
9. When you’re done,previewthe page in the browser. The table
10.Belowthe table,in a newparagraph,enter the heading
“Traveling West.” Make it arial,size +4,bold.
11.Belowthat,adda newparagraphwiththis 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.

78
12.Make the newparagraphverdana,size -1 andsave the page.
13.Viewthe page in the browser. It shouldlooklike this:

79
Create a navigation bar for a main section page
1. Create a newpage withfile name california.html. Title it
“Vacationing in California.”
2. Make the table just like the one on the home page,except with4
cells insteadof 3.
Tip: Don’t forget to change the cell widths. There are now four cells,
and their widths must add up to 100%. That means 25% per cell.
3. Format the table andtext just like on the home page,but make the
California cell bright yellow(BGCOLOR=”#ffff00”) toshow
“You are here.”
4. When you’re done,save the page andviewit in the browser. The
table shouldlooklike this:
5. Linkthe wordHome tothe home page (A
HREF=”index.html”Home/A),then save the page.
6. Open the home page in Notepad.
7. Linkthe wordCalifornia tothe California page.
8. Save the page.

80
Practice: Create navigation bars
Task: Tomake your Travel West site looklike the site at
www.visibooks.com/travelwest.
1. Create a newblankpage andsave it withthe file name
midwest.html. It will be The Midwest page,but leave it blankfor
right now.
2. Create a newpage withfile name rockies.html. This is The Rockies
page. Title it “Nature in the Rocky Mountains.” Make its
navigation bar table exactlylike that of the California page.
3. Change the “You are here” yellowbackgroundcolor fromthe
California cell toThe Rockies cell.
4. LinkCalifornia,The Midwest andHome totheir respective
pages.
5. When you’re done,previewthe page in the browser. It shouldlook
like this:

81
6. Repeat this process withthe California andMidwest pages so
they’ve got functioning navigation bars that show“you are here.”
7. Gotothe home page andin the navigation bar,linkThe Rockies
andThe Midwest totheir respective pages.
8. Make all text that corresponds tothe current page bold. (Example:
make “The Rockies” boldon The Rockies page.)
9. When you’re done,previewthe site in the browser. It shouldlook
like the site at www.visibooks.com/travelwest.

82
Add subsections to site
Insert a table for content and subsection links
1. In Notepad,open the California page in the Traveling West Web
site.
2. Belowthe navigation bar table,addanother table that has one row
andtwocells in the row. Give the table the attributes:
WIDTH=”100%”
BORDER=”0”
CELLPADDING=”16”
CELLSPACING=”0”
3. Make the first cell 25% wide andthe secondcell 75% wide.
4. In the left-handcell,put the subsections for the main California
section:
The Golden Gate Bridge
P
Highway 101
P
Big Sur

83
5. In the right-handcell,put the heading “Places to visit in
California.” Belowthe heading,in a newparagraph,type the
sentence :
When in California, be sure to see the
Golden Gate bridge, Highway 101, and Big Sur.
6. Align the contents of bothcells tothe topof each.
7. Make the text in the left-handnavigation cell arial,size -1.
8. Make the heading in the right-handcell bold,arial,size +3. Make
the paragraphbeneaththe heading verdana,size -1.
9. When you’re done,save the page andpreviewit in the browser.
The page shouldlooklike this:

84
Create subsection pages
1. Create newblankpages for subsections The Golden Gate Bridge,
Highway101 andBig Sur:
Page Title File Name
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. Copythe tables fromthe California page andpaste themintothe
Golden Gate Bridge page.
3. On the Golden Gate Bridge page,change the heading toread
“Seeing the Golden Gate Bridge.” Make it size +2.
4. Belowthe heading,change the paragraphtoread:
The Golden Gate Bridge isn't golden--it's actually
orange.
5. Make it verdana,size -1.

85
6. Linkthe words California,Highway 101,andBig Sur totheir
respective pages. Leave The Golden Gate Bridge as plain text to
show“you are here.”
7. When you’re done,save the page andviewit in the browser. It
Consistent page layout
Copying tables fromone page andpasting themintonew
pages ensures that all pages share the same layout.
This consistencymakes site navigation easier: nomatter which
page in the site is being viewed,a person knows where the
page’s links andcontent will be.

86
Practice: Add subsections to site
A. What’s the best way to keep tables consistent from page to page?
Task: Tomake your Travel West Website lookandworklike the one
at www.visibooks.com/travelwest2.
1. Open the California page in Notepad. LinkThe Golden Gate
Bridge,Highway101 andBig Sur totheir respective pages.
2. Open the Golden Gate Bridge page. Copybothtables fromthe
page.
3. Paste these tables intothe Highway101 page.
4. On the Highway101 page,linkthe words The Golden Gate
Bridge tothe Golden Gate Bridge page. Get ridof the anchor tags
aroundHighway 101 soit shows as plain text.
5. Change the Highway101 page’s heading anddescriptive text
beneathit soit looks like this:

87
6. Format the Big Sur page soits layout andnavigation are consistent
withthe Golden Gate Bridge andHighway101 pages.
Heading:
Staying in Big Sur
Paragraph:
There are many excellent hotels right on the ocean
in Big Sur.
7. Save all pages.
8. When you’re done creating all the pages in the California section of
this site,previewit in a browser. It shouldlookandworklike
www.visibooks.com/travelwest2.
Answers
A. Copying and pasting tables from one page to another.

88
Place tables within tables
1. In Notepad,open the Golden Gate Bridge page
(goldengate.html).
2. In front of the paragraphbelowthe main heading,begin a new
table with:
2 rows
1 cell in eachrow
WIDTH=”200”
CELLPADDING=”8”
Tip: To create a table with more than one row, just begin a new row
after ending the one above it:
TR
TD /TD
/TR
TR
TD /TD
/TR
Note: the widthis a number—200—whichrenders the widthin
pixels rather than as a percentage.
3. Color the topcell blue (#0000ff) andthe bottomcell grey
(#cccccc).
4. In the topcell,put the words,“A Whole Lot of Paint.” Center the
words andmake thembold.

89
5. In the bottomcell,type the sentence:
The Golden Gate bridge is covered with enough paint to coat
four battleships.
6. Make the text arial,size -1.
7. Save the page andviewit in the browser. When you’re done,it
8. Make the text in the topcell white. Dothis byadding the
COLOR=”#ffffff” attribute tothe FONT tag:
FONT FACE=arial SIZE=”-1”
COLOR=”#ffffff”
BA Whole Lot of Paint/B
/FONT

90
9. Addthe ALIGN=”right” attribute tothe TABLE tag:
TABLE WIDTH=”200” BORDER=”0”
CELLPADDING=”8” ALIGN=”right”
10.Save the page andpreviewit in the browser. The page shouldlook
like this:

91
Link to an external site using frames
How touse frames
“Frames” are a waytoput more than one Webpage at a time
on a computer’s screen:
2=CA
2=CA 2=CA!

Alive example of frames can be seen at
www.visibooks.com/frames.
Manysites that usedframes have noweliminatedthem,
returning tosingle-page layouts. That’s because frames have
serious drawbacks:
• Frames are difficult toupdate. Everyscreen involves
three or more pages tokeep trackof: the frameset itself,
andat least twoothers togoin the frames.
• Frame navigation is tricky. Links require special
“targets” that gofrompage toframe.
• Frames often require people toscroll annoyinglyin
more than one place.
However,frames are useful for one thing: theyallowa user to
get backtoa site withone clickwhile clicking throughother
sites linkedtoit. An example of this can be seen in the external
links at www.charuhas.com/sites.html.
The following exercise demonstrates howtouse frames to
provide convenient links toexternal sites.

92
1. On the Golden Gate Bridge page,in a newparagraphbelowthe
first one,type:
Visit the Web site for the Golden Gate bridge at
www.goldengate.org.
www.goldengate.org will be linkedtothe frameset page.
2. Create a newblankpage withfile name framesetgg.html. This will
be the “frameset” page that holds twoother pages.
3. Insert this HTMLcode intothe newblankpage:
HTML
HEAD/HEAD
TITLEGolden Gate Frameset/TITLE
FRAMESET ROWS=50,*
FRAME NAME=topframe SRC=backtogg.html
FRAME NAME=bottomframe
SRC=http://www.goldengate.org
/FRAMESET
/HTML

93
Tip: The ROWS=”50,*” attribute in the FRAMESET tag tells
the frameset to make the top frame 50 pixels high, and to allow the
bottom frame to fill in the rest of the available space beneath it.
The top frame will contain the link back to the Golden Gate Bridge
page. The bottom frame will contain an external site:
www.goldengate.org.
Link back to the Golden Gate Bridge page

The goldengate.org site will display here

4. Save framesetgg.html.
5. Create a newpage withfile name backtogg.html. This is the page
that will contain a linkbacktothe Golden Gate Bridge page.
6. Give the newpage a light greybackground,anda single linkon it:
Back to the Golden Gate Bridge page.
7. Use an anchor tag withthe TARGET=”_top” attribute tolink
backtothe Golden Gate Bridge page:
A HREF=”goldengate.html” TARGET=”_top”Back
to the Golden Gate Bridge page/A

94
Tip:The TARGET=”_top” attribute enables linking to a page
outside of the current frame…
Clickhere Gotonew pageoutsideframe
Back to the Golden Gate Bridge
Page
Golden Gate Bridge Page
…which avoids clicking on the link and having the page come up in
the same frame:
Clickhere Pagecomes up insameframe
Back to the Golden Gate Bridge
Page
Golden Gate Bridge page
8. Make the linkarial,size -1,andbold.
9. Save the page.

95
10.Open framesetgg.html in the browser. It shouldlooklike this:
11.Clickon the Back to the Golden Gate Bridge page link. It
shouldtake you backtothe Golden Gate Bridge page.

96
Tip: To make the frameset look more crisp and clean, try using the
following attributes in framesetgg.html:
HTML
HEAD
/HEAD
TITLEGolden Gate Frameset/TITLE
FRAMESET ROWS=28,* FRAMEBORDER=”0”
FRAME NAME=topframe SRC=backtogg.html
MARGINWIDTH=”12” MARGINHEIGHT=”4”
SCROLLING=”NO” NORESIZE
SRC=http://www.goldengate.org”
MARGINWIDTH=12 MARGINHEIGHT=12
SCROLLING=”AUTO” NORESIZE
/FRAMESET
/HTML

97
Practice: Layout Navigation
A. Why is it important that navigational links stay in the same place and
order on pages throughout a Web site?
B. What is the minimum number of files that must be used to make a
frameset work?
Task: Make your Travel West Website lookandfunction like the one
at www.visibooks.com/travelwest3.
1. Layout the Rockies page using tables soit looks like the California
page.
Heading for the Rockies page:
Nature in the Rocky Mountains
2. Create pages for three subsections of The Rockies main section:
Streams
Snow
Rock Formations
3. Make sure that these pages are linkedandlaidout just like the
Golden Gate Bridge,Highway101 andBig Sur pages.
Page File name Heading
Streams streams.html Mountain Streams
Snow snow.html Snow in the Rockies
Rock
Formations
rocks.html Rock Formations

98
4. Repeat this process withthe Midwest section of the site. The
subsections of the Midwest section are:
St. Louis
Chicago
DeMoines
Page File name Heading
Midwest midwest.html Cities of the Midwest
St. Louis stlouis.html St. Louis
Chicago chicago.html Chicago
DeMoines demoines.html DeMoines
5. On the Chicagopage,insert a one-row,one-cell,fixed-widthtable
200 pixels wide,withcell padding 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 nation’s biggest
stockyards.”
7. On the St. Louis page,linktothe external Website
www.stlouis.comusing frames.
Paragraph for St. Louis page:
Find out what’s going on in St. Louis at
www.stlouis.com.
8. When you’re done,open the Travel West site in the browser. It
shouldlookandfunction like the one at
www.visibooks.com/travelwest3.

99
Interactivity
• Insert META tags
• Create forms
• Format text with style sheets
• Employ templates
• Upload sites to a Web server

100
Insert META tags
1. In Notepad,open upthe home page of the Travel West Website.
2. Beneaththe HEAD andsignature (!--your name--) tags,
insert the first META tag for describing 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
META tags
METAtags are HTMLtags that can include a description of
the page,as well as “keywords that provide clues toits content.
METAtags make a page easier tofindandindex bysearch
engines.
METAtags don’t showupon a Webpage. Rather,theyreside
unseen in its HTMLcode.

101
3. Beneaththe “description” meta tag,insert a newMETA tag for
its searchkeywords:
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

102
Create forms
1. Create a newpage withfile name infoform.html.
2. Title the page “Request for Information” andsave it in the Travel
West folder on your harddrive.
3. Belowthe BODY tag,type the sentence:
Fill out the following form to get more
information about traveling West:
4. Belowthe 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. Belowthe FORM tag,create a table with4 rows and2 cells in
eachrow. Make the width50%,give it cellpadding of 4,anda
border of 1.

103
6. In the top three left-handcells,put:
Name:
Address:
E-Mail:
8. In the top right-handcell,insert a text input field. Dothis withan
INPUT tag:
TR
TDName:/TD
TDINPUT TYPE=”text” NAME=”name”
SIZE=”20”/TD
/TR
Tip: The TYPE of this input is “text,” which makes it a textbox.
The NAME of this input is “name,” which is how the server knows
that it’s where people enter their name. The SIZE is 20 characters—
the length of the textbox.

104
9. Save the page andviewit in a browser. It shouldnowlooklike this:
10.Insert textboxes in the cells next toAddress andE-mail as well.
Name the input textbox next toAddress “address,” andname
the input textbox next toE-mail “email.”
INPUT TYPE=”text” NAME=”address” SIZE=”20”
11.Save the page andviewit in the browser. It shouldnowlooklike
this:
Textinputbox

105
12.In the last row’s right-handcell,insert a submit button,INPUT
TYPE=”submit”. Use the VALUE attribute tospecifythe text
displayedon the button:
TR
TDE-mail:/TD
TDINPUT TYPE=”text” NAME=email
SIZE=”20”/TD
/TR
TR
TD/TD
TDINPUT TYPE=”submit” VALUE=Send me
info /TD
/TR
/TABLE
13.Save the page andviewit in the browser. When you’re done,the
page shouldlooklike this:

106
14.Remove the border fromthe table andalign the text in the left-
handcells tothe right.
TDP ALIGN=”right”Name:/TD
15.Make the left-handcell in the first row5% wide,andthe right-
handcell in the first row45% wide.
Tip: By specifying the width of cells in the first row, the cells in the
rows beneath will assume the same widths.
16.Save the page,viewit in the browser,andit shouldlooklike this:

107
17.Open the home page in Notepadandadda newparagraph:
Get more information about Western Travel
mailed to you
18.Linkthis sentence toinfoform.html.
19.Save the page andviewit in the browser. It shouldlooklike this:
20.Clickon the linksentence. It shouldbring upthe page withthe
form.

108
Making a form work
Tomake a formwork,an action must be assignedtoit. Toadd
an action toyour form,addthe ACTION attribute tothe
FORM tag.
Consult withyour Webserver administrator tospecifywhat
action you shouldassign. For example,an action for a form
might looksomething like this:
FORM METHOD=”POST”
ACTION=http://www.yourdomain.com/cgi-
bin/formmail.pl”
This tells the formtopost its data toa programcalled
formmail.pl on at yourdomain.com. This programmight take
the formdata ande-mail it towhomever you choose.

109
Practice: Create forms
1. Create a newpage withfile name favoritesform.html. Title it “My
Favorite Places.”
2. Insert a form,then insert a table withfour rows andtwocells in
eachrow. Fill the cells withthe text andformobjects seen below:
Tip: The HTML code for a drop-down list looks like this:
SELECT NAME=select
OPTIONFirst Choice/OPTION
OPTIONSecond Choice/OPTION
OPTIONThird Choice/OPTION
/SELECT
The HTML code for radio buttons looks like this:
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
Drop-down
list
Radio
buttons

110
3. Put these values in the drop-down list:
California
The Rockies
The Midwest
4. When finished,save the page andpreviewit in the browser. It

111
Use style sheets
The pros and cons of style sheets
Style sheets are a flexible,powerful tool for laying out and
formatting Webpages. Theyalloweverypage in a site toget
displayinstructions fromjust one style sheet.
For instance,if you createda 1,000 page Website using style
sheets,andyou wantedtochange the linkcolor on everypage,
you’donlyneedtochange the linkcolor on one style sheet.
Without style sheets,you’dhave tochange 1,000 individual
pages.
Style sheets can alsocreate displayeffects. An example of this is
at www.visibooks.com. When you roll your cursor over links,
theybecome underlined—if you’re viewing the page withthe
Internet Explorer browser.
That’s the disadvantage of using style sheets: they’re
interpreteddifferentlybyeachbrowser. Astyle sheet-based
page viewedin Internet Explorer maylookdifferent than it
does in Netscape Navigator or other browsers.

112
Create a style sheet
1. Create a newpage withfile name format.css.
2. Save it in a newfolder on the C: drive calledCSS Site.
Tip: This is a style sheet, not a Web page. It’s a file that gives Web
pages formatting instructions, but isn’t ever seen. It contains no
HTML, and has a different file extension: .css rather than .html.
3. On the blankformat.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 component parts of the formatting instructions for
the .bodytext style:
.bodytext The type of text tobe formatted.
font-
family
The fonts in whichthe text shouldbe
displayed. First the computer looks for
Courier New,then Courier,then a
monospacedfont.
The quotes in “Courier New” allow the
computer to read font names with spaces.
font-size The size of the text. Unlike in HTML,style
sheets allowspecific point sizes tobe used.
font-
weight
Boldor plain text.
color The color of the text.
background
-color
Changes the color of the page area directly
behindthe text.

113
4. Save format.css. It shouldlooklike this:

114
Apply a style sheet
1. In Notepad,create a newhome page andput it the CSS Site
folder.
2. Title the home page “Style Sheet Demo Page.”
3. Belowthe BODY tag,type the text CSS Site. Make it a size 1
heading using H1 tags:
BODY
H1CSS Site/H1
4. In a newparagraphbeneathit,type the sentence,“Cascading Style
Sheets are a powerful andflexible tool for formatting Webpages:”
BODY
H1CSS Site/H1
PCascading Style Sheets are a powerful and
flexible tool for formatting Web pages/P

115
6. Belowthe HEAD tag,adda LINK tag that points to
format.css:
HTML
HEAD
LINK REL=stylesheet HREF=format.css
/HEAD
TITLEStyle Sheet Demo Page/TITLE
7. In the P tag,addthe CLASS attribute that points tothe
.bodytext style:
P CLASS=bodytextCascading Style Sheets
are a powerful and flexible tool for
formatting Web pages./P
8. Save the home page andviewit in the browser. It shouldlooklike
this:
The home page’s LINK REL=stylesheet
HREF=format.css tag referredtoformat.css for
formatting instructions.
The paragraphon the page referredtothe .bodytext style on
format.css for formatting instructions.

116
Tip: To use the same stylesheet to format pages throughout a site, just
insert the same LINK tag in each Web page. For instance, if there
were 100 pages in the CSS Site, they could all contain the same
LINK REL=stylesheet HREF=format.css tag
and format body text the same way by using the P
CLASS=”bodytext” tag.

117
Create link effects with style sheets
“Cascading” style sheets
Style instructions can be containedwithin a Webpage itself,
without referring toa separate style sheet. These instructions will
override those of the style sheet,hence the term“Cascading Style
Sheets:”
Aninstructionina
page’s text…
FONT
COLOR=”#ff0000”
This is red
text./FONT
…overrides astyle
instructionforthepage…
STYLE
TYPE=text/css
.greentext { color:
“#00ff00” }
/STYLE
BODY
P
CLASS=”greentext”
This is green text.
…which overrides astyle
instructionforthesite.
LINK REL=”stylesheet”
HREF=”format.css”
/HEAD
BODY
P CLASS=”bodytext”
This is blue text.
The following exercise employs an in-page style.

118
9. In the CSS Site folder,open the home page in Notepad.
10. Belowthe HEAD tag,replace this:
withthis:
STYLE TYPE=text/css
!--
A:link {color:#ff0000; text-
decoration:none}
A:visited {color:#ff0000; text-decoration:
none}
A:hover {color:#00ff00; text-decoration:
underline}
--
/STYLE
11.Belowthe present paragraph,adda newparagraph:
A good resource for learning more about
style sheets is Webmonkey.
12.Linkthe word“Webmonkey” tothe external site
http://www.webmonkey.com. Also,make the wordWebmonkey
bold.
13.Save the page andrefreshit in the browser. When you put your
cursor on the wordWebmonkey,it shouldchange fromredand
plain togreen andunderlined.

119
Practice: Using style sheets
1. Open format.css in Notepad.
2. Addthe following style instruction belowthe .bodytext style:
.heading {font-family: Verdana, Arial,
Helvetica, sans-serif; font-size: 48pt}
3. Save format.css.
4. Open the home page andreplace:
STYLE TYPE=text/css
!--
A:link {color:”#ff0000”; text-decoration:
none}
A:visited {color:”#ff0000”; text-decoration:
none}
A:hover {color:”#00ff00”; text-decoration:
underline}
--
/STYLE
withthe original LINK tag:

120
5. Addthe CLASS=”heading” attribute tothe H1 tag.
H1 CLASS=”heading”
6. Save the home page andviewit in the browser. It shouldlooklike
this:

121
Upload sites to a Web server
1. DownloadWS_FTPLE andinstall it.
2. Open the program. You shouldsee an initial Session Properties
window. It shouldlooklike this:
FTP
FTPstands for “File Transfer Protocol,a waytotransfer files
between computers over the Internet. Uploading a site toa
Webserver requires special FTPsoftware.
The most popular programusedtouploadanddownloadWeb
pages froma server is WS_FTP. The LE version is free andcan
be downloadedat www.download.comor www.tucows.com.
The Proversion costs $39.95,andcan alsobe foundat the Web
site of the companythat makes it,www.ipswitch.com.
Beloware instructions for uploading files using the free LE
version.

122
3. Clickthe Newbutton.
4. In the Profile Name textbox,enter the name of your upload
process,suchas “Upload my Web site.”
5. In the Host Name/Address textbox,enter the name or IPaddress
of your Webserver. It can be something like www.visibooks.com,
washington.patriot.net,or 207.176.7.217.
Tip: Contact your Web server administrator to find out the Host
Name or IPAddress of your Web server. The Web server
administrator can also supply your User ID and Password.
6. Leave the Host Type set at Automatic detect,andinput your
User ID andPassword.
7. Checkthe Save Pwd checkbox,then clickthe Apply button. The
Session Properties windowshouldnowlooksomething like this:

123
8. Clickthe OK button,andafter your Webserver is contactedthe
WS_FTPwindowwill appear. It shouldlooksomething like this:
9. At the top of the left-handLocal System window,double-clickon
the green arrowicon togoupin the file hierarchy. Double-click
it again toget tothe C: drive.
10.Double-clickon the folder containing your Website toopen it up.
11.In the right-handRemote System window,double-clickon the
public_html folder,or the folder that leads toyour site on the
server.
Yourcomputer Web server

124
12.You shouldnowsee your Webpages on your computer andon
your Webserver. Tosendover your Webpages,highlight them,
then clickon the button tosendthemtothe Webserver.
Tip: If there are already pages on your Web server, the new pages you
send over will replace the old versions with the same file name.

125
Practice: Interactivity
Create a new home page and site
1. Create a newhome page titled“World Dances.” Save it at
C:Dance.
2. Create a home page for the site that looks like this:
Tip: Get the graphics and text for this page at
www.visibooks.com/dancing.
3. At the bottomof this andeveryother page in the site,put an e-mail
linktoinfo@worlddance.org.

126
Create main section pages
1. Linkthe words American,Latin,andEuropean in the navigation
bar tonewmain section pages on American,Latin,andEuropean
dance,respectively.
Tip: Get the images and text for these pages at
www.visibooks.com/dancing.
The American dance page shouldlooklike this:
2. Make the Latin andEuropean pages lookconsistent withthe
American dance page.

127
Create subsection pages
1. On the American dance page,linkthe words Lindy Hop and
Foxtrot tonewsubsection pages on those dances. The LindyHop
page shouldlooklike this:
Tip: Get the images and text for this and the other subsection pages at
www.visibooks.com/dancesub.
2. Make the Foxtrot page lookconsistent withthe LindyHoppage.
3. Create the subsection pages Tango,Merengue,andSalsa for the
Latin section.
4. Create the subsection pages Waltz andContra Dancing for the
European section.

128
META tags
1. Include this METAdescription in the home page:
Dances Aroundthe Worldincludes information about American,
Latin andEuropean dances.
2. Include these METAkeywords in the home page:
dance, worldwide, tango, merengue, salsa, lindy hop, foxtrot,
waltz, contra dancing.

129
Creating forms
1. On the home page,insert a formthat looks like this:
2. When you’re done,previewthe whole Website in the browser. It
shouldlooklike the site at www.visibooks.com/worlddancing.

130

131
Advanced Layout
• Employ background images
• Employ spacer GIFs
• Insert a horizontal rule
• Specify page margins
You’ll create a page that looks like this:

132
Employ background graphics
1. Open Notepad.
2. Create a newpage withall necessaryHTMLtags anda two-cell
table:
Rows: 1
Cells: 2
Width: 100 Percent
Border: 0
Cell Padding: 18
Cell Spacing: 0
3. Save the file on your computer’s Desktopwiththe file name
advlayout.html. Title it Advanced Layout.
4. Give bothcells in the table a darkblue backgroundcolor
(#000099).
5. Make the first cell 10% wide,andthe secondcell 90% wide.

133
6. Gotowww.visibooks.com/advlayout/picsandsave techtool.gif on
your computer’s Desktop. Insert it in the left-handcell.
7. Gotowww.visibooks.com/advlayout/picsandsave bkgd.gif on
your computer’s Desktop. Make it the backgroundof the right-
handcell using the BACKGROUND attribute:
TD WIDTH=”90%” BGCOLOR=#000099
BACKGROUND=”bkgd.gif”
8. In the right-handcell,type the text,“The Magazine for People
Who Like Gadgets.”
9. Make the text arial,size +1,bold.
10.Color the text white.
11.Previewthe page in the browser. It shouldlooklike this:
Tip: Notice the line towards the bottom of the cell where bkgd.gif
begins repeating. It repeats because background graphics tile to fill all
available space in a cell. The cell is 136 pixels tall: 100 pixels for
techtool.gif, plus 36 for Cell Padding (18 pixels at the top and bottom
of techtool.gif).
bkgd.gif is only 123 pixels tall; therefore, there’s 13 pixels of space left
to fill. To fix this, use an image editing program like Photoshop,
Fireworks or Paint Shop pro to make the background image 136 pixels
tall.

134
12.Belowthe first table,insert a three-cell table witha widthof 100%
andcellpadding of 4. It’s border andcellpadding shouldbe 0. Make
the cells equal widthandcolor themblack.
13.In the first cell,enter the text,“Laptops.” In the second,“Cell
Phones,” andin the third,“PDAs.” Make the text white andcenter
it withing the cells.
14.Save the page andviewit in the browser. It shouldlooklike this:

135
Employ spacer GIFs
1. Gotowww.visibooks.com/advlayout/pics andsave spacer.gif on
your computer’s Desktop.
2. Belowthe toptwotables,insert a thirdtable just like the first table.
3. Insert spacer.gif in the left-handcell. Give it a widthof 100 and
height of 1.
TD WIDTH=10% BGCOLOR=#000099IMG
SRC=spacer.gif WIDTH=100
HEIGHT=1/TD
Tip: Most spacer GIFs are 1x1 pixel, which load very quickly online.
This one started out as 50x50 to make it easier to see and save.
4. Change the backgroundcolor of the cell containing spacer.gif to
bright yellow(#ffff00).
Why use spacer GIFs?
Spacer GIFs are usedtostretchtable cells toan exact width.
Theyare transparent,sotheyremain invisible regardless of the
cell’s backgroundcolor.
Aspacer GIF is usedin the exercise below. It keeps the widthof
the left-handcell constant,regardless of the size or resolution
of the screen usedtoviewit.

136
5. Put text in the right-handcell sothe page looks like this when
viewedin the browser:
6. Set the browser tohighresolution—1024x768 pixels. The page
Notice howthe left-handcells in the topandbottomtables staythe
same width,regardless of the widthof the browser usedtoview
them.

137
Insert a horizontal rule
1. Belowthe text in the right-handcell,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-Drule. Togive it a cleaner look,addthe
attributes NOSHADE andSIZE=”1” tothe HR tag:
HR NOSHADE SIZE=”1”
3. Place text belowthe horizontal rule soit looks like this when
viewedin the browser:

138
Specify page margins
1. In the BODY tag,addthe LEFTMARGIN,RIGHTMARGIN,
TOPMARGIN,MARGINWIDTH andMARGINHEIGHT attributes.
Give themall a value of zero:
BODY LEFTMARGIN=0 RIGHTMARGIN=0
TOPMARGIN=0 MARGINWIDTH=0
MARGINHEIGHT=0
Tip: The LEFTMARGIN, RIGHTMARGIN, and MARGINWIDTH
(along with TOPMARGIN and MARGINHEIGHT) attributes are
redundant to account for browser differences: Internet Explorer
recognizes LEFTMARGIN, RIGHTMARGIN and TOPMARGIN,
while Netscape Navigator recognizes MARGINWIDTH and
MARGINHEIGHT.
2. Specifya backgroundcolor of white (#ffffff) for the cell
containing the page’s text. Specifya backgroundcolor of darkblue
(#000099) for the page itself.

139
3. Save the page andviewit in the browser. When you’re done,it

140
Practice: Advanced layout
1. Give the navigation table (the one withLaptops,Cell Phones and
PDAs) five cells.
2. Put |characters (on the same keyas the backslash character on
your keyboard) in the cells surrounding the one that contains Cell
Phones.
3. Give the cells withthe |characters a widthof 1%,andcenter the |
characters within the cells.
4. Color the |characters white. When you’re done,the page should
looklike the one at www.visibooks.com/advancedlayout:

141
Practical JavaScript
• Enable rollover graphics
• Open new windows
• Validate form input
You’ll incorporate functions that look like this:
Creating rollover graphic links
Opening new windows
Validating forms

142
Enable rollover graphics
What is JavaScript?
JavaScript is a programming language that sits in the HTML
code of a Webpage. It’s not an industrial-strengthlanguage
like C++,Java,or Perl that’s usedtoprogramWebservers.
Rather,JavaScript is usedtoperformsimple functions within
Webpages.
The following section shows you howtoemployJavaScript’s
three most useful functions. It won’t teachyou howtowrite
programs in JavaScript. Learning a programming language is
just that: learning a newlanguage,whichcan take months or
years tomaster. Rather,you’ll learn howtoobtain functioning
JavaScript scripts andmodifythemtodowhat you want.
This approachis fast andeffective. There are thousands of
JavaScript scripts available for free on the Webthat perform
anything you’dwant todoin a Webpage—all you have todo
is customize them.
Working with source code
Sometimes you’ll see a Webpage andsaytoyourself,“I
wonder howtheydidthat?” Byviewing the page’s HTMLand
JavaScript source code,you can findout.
You can alsocopysource code,paste it intopages you’re
working on,andmodifyit. Since that’s soeasytodo,source
code for Webpages isn’t usuallycopyrighted.
The following exercise shows you howtocopy,paste,and
modifyan existing JavaScript toput rollover graphic links on
your Webpages.

143
View source code
1. Create a folder on your harddrive called“rollover,” at C:/rollover.
2. Using the browser,gotowww.visibooks.com/advancedlayout.
3. Viewthe page’s source code byclicking View,then Source.

144
Copy source code
1. Acopyof Notepadwithadvancedlayout(1) in the title bar will
appear. Select all the HTML,then copyit.
2. Create a newblankpage in Notepadandpaste all the copied
HTMLcode intoit.
3. Save the page at C:rollover as index.html.
4. Create a folder within the rollover folder calledgraphics:
C:rollovergraphics.
5. Gotowww.visibooks.com/rolloverpics. Capture all six graphics
there andsave themin the graphics folder.

145
6. Gotowww.visibooks.com/rollover.
The graphics in the navigation bar are
rollover links:
7. Viewits source code andhighlight all
the code between andincluding the
SCRIPT and/SCRIPT tags.
It’s between the HEAD and
/HEAD tags:
8. Copythis JavaScript code.
9. Paste the JavaScript code between the HEAD and/HEAD tags
in index.html.

146
Modify source code
1. You’ll notice that the names of the graphics specifiedin the
JavaScript (laptops2.gif,laptops.gif,
cellphones2.gif…) don’t correspondwiththe names of the
graphics in your graphics folder.
Modifythe source code tospecifythe correct file names 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;
Graphics
thatsit
there
when
cursoris
off link
Graphics
thatpop
up when
cursoris
onlink

147
2. Gobacktowww.visibooks.com/rollover in the browser,andview
the page’s source code. Scroll down until you see the code for the
secondtable,the one that defines the blacknavigation bar.
3. Highlight andcopythe anchor tag withthe onMouseOver and
onMouseOut attributes,the closing anchor tag (/a),andthe
image tag inside them. It links tolaptops.html:
4. In index.html,get ridof the twocells withthe |characters in them.

148
5. Paste the anchor tags andthe image tag theyenclose into
index.html sotheyreplace the wordLaptops:
From this:
TD WIDTH=33%
BGCOLOR=#000000CENTERFONT FACE=arial
SIZE=-1
COLOR=#ffffffLaptops/FONT/CENTER/TD
To this:
TD WIDTH=33% BGCOLOR=#000000CENTERA
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 name for the graphic being linkedfrom
laptops.gif toyour graphic: lap.gif.
7. Save index.html andviewit in the browser. It shouldworklike
this:

149
Practice: Enable rollover graphics
1. In the navigation bar of index.html,replace the words “Cell
Phones” and“PDAs” withrollover graphics. Use the graphics
cellbright.gif,cell.gif,pdabright.gif andpda.gif.
Tip: Modify the anchor tag and image code in the first cell for use in
the other two.
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 done,save the page andviewit in the browser. It

150
Open new windows
1. In Notepad,open upthe home page for the Travel West Website:
index.html at C:Travel West.
2. In the browser,gotowww.visibooks.com/newwindow.
3. Viewthe source code for the page. Highlight andcopythe
JavaScript code between the HEAD and/HEAD tags.
4. Paste it belowthe META tags in index.html:

151
5. Change the JavaScript code sothat it opens infoform.html in the
newwindow:
From this:
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
To this:
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
Tip: JavaScript is not HTML—it’s a programming language. It works
better without quotes around values. Also, don’t change the case of
words in a script that works. JavaScript is, unlike HTML, case-
sensitive.

152
6. Viewthe source code again at www.visibooks.com/newwindow.
7. Findthe anchor tag between the BODY and/BODY tags that
refers tothe JavaScript function Contact().
FONT FACE=arial SIZE=+1BA
HREF=javascript:Contact()Open new window
with form inside/A/B/FONT
Tip: A function is a job performed by a program. The one above is
named Contact(). Its job is to open the window that allows people
to contact Visibooks.
8. Copythe anchor tag,then paste it intoindex.html soit links the
secondsentence tothe
From this:
A HREF=infoform.htmlGet more information
about Western travel mailed to you/A
To this:
A HREF=javascript:Contact()Get more
information about Western travel mailed to
you/A
9. Save index.html andviewit in the browser.

153
10.Clickon the linkedsentence. Anewwindowshouldpopupwith
the forminside:
Tip: To change the size and appearance of the window that pops up,
change the values after 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')
Changeto
status=no
togetridof
thestatus
baratthe
bottomof
thewindow
Changewidth and
heightvalues to
changesizeof
window inpixels

154
Validate form input
See how it works
1. In Notepad,open infoform.html in the Travel West site.
2. In the browser,gotowww.visibooks.com/validate.
3. Clickon the Send me info button. When you do,an alert window
shouldappear. When you enter your name andclickthe button,
another alert windowshouldappear that reads,“Please input
your address.” This alsoworks withthe e-mail input.

155
Insert the validation script
1. Viewthe source of the page at www.visibooks.com/validate,and
copythe JavaScript between the HEAD tags:
script
!--
function validate()
{
if (document.info.name.value==)
{
alert (Please input your name.)
return false
}
if (document.info.address.value==)
{
alert (Please input your address.)
return false
}
if (document.info.email.value==)
{
alert (Please input your e-mail address.)
return false
}
}
//--
/script
Tip:Here’s a diagram that explains the if statement variables:

if (document.info.address.value==)
2. Paste it between the HEAD tags in infoform.html.
Comment
tags hide
thescript
fromolder,
non-
JavaScript
capable
browsers
sothey
don’t
display it
Stands for
pageitself
Nameof
form
Identifies
inputfield
Denotes
blankfield

156
Modify the FORM tag
1. Adda NAME attribute tothe FORM tag. Name the form“info:”
FORM NAME=info METHOD=”POST”
action=http://www.yourserver.com/cgi-
bin/formmail.pl
2. Addthe attribute ONSUBMIT tothe FORM tag. Tell the form
that when the submit button is clicked,performthe 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 howthe JavaScript’s if statement input
variables have the same name as the form’s input fields:
script
!--
functionvalidate()
{
if(document.info.name.value==)
{
alert(Pleaseinputyourname.)
returnfalse
}
if(document.info.address.value==)
{
alert(Pleaseinputyouraddress.)
returnfalse
}
if(document.info.email.value==)
{
alert(Pleaseinputyoure-mail address.)
returnfalse
}
}
//--
/script
TABLE WIDTH=”50%”
CELLPADDING=”4”
BORDER=”0”TRTD
WIDTH=”5%”P
ALIGN=”right”Name:/TD
TDWIDTH=”45%”INPUT
TYPE=”text” NAME=name
SIZE=”20”/TD/TRTR
TDPALIGN=”right”Address:/TD
TDINPUT TYPE=TEXT
NAME=address SIZE=”20”
/TD/TRTR
TDPALIGN=”right”E-
mail:/TDTDINPUT TYPE=”text”
NAME=email SIZE=”20”
/TD/TRTRTD/TDTDINPUT
TYPE=”submit” VALUE=Send me
info/TD/TR/TABLE
4. Viewinfoform.html in the browser. It shouldlookandworklike
the format www.visibooks.com/validate.

157
Additional Resources
Webmonkey (www.webmonkey.com)
Ahow-tosite for people building Websites,filledwithexcellent
tutorials andresources.
EchoEcho (www.echoecho.com)
Even more tutorials than Webmonkey,andall clear anddetailed.
Contains helpful statistics on browser usage,monitor settings,
platforms,andother technologyusedtoviewWebpages.
Project Cool (www.projectcool.com)
Knowledge,guidance andinspiration for people building Websites. It
includes a goodstyle sheet guide at
projectcool.com/developer/reference/css_style.html.
Web Review (www.webreview.com)
Asharpandinformative site for Webdevelopers,withsections on
Authoring,Design,Development,E-Commerce,Multimedia,and
Back-EndWebserver Programming.
HTMLHelp (www.htmlhelp.com)
Goodresource site withlots of information on style sheets andHTML
technical standards. Includes online tools suchas an HTMLvalidator,
linkchecker,andASCII character guide.
HTML XHTML: The Definitive Guide (book)
ChuckMusciano,Bill Kennedy,O’Reilly; ISBN: 059600026X
Like most O’Reillybooks,gearedtowards programmers. A
comprehensive resource for HTML,but better yet,a guide tomaking
HTMLworkwithXML—the “next big thing” in Webdevelopment.
Voodoo’s Introduction to JavaScript (rummelplatz.uni-
mannheim/~skoch/js/tutorial.htm)
One of the original JavaScript tutorials,andstill excellent. Explains the
“why” as well as the “how” of programming in JavaScript.
HomeSite
The mother of all HTMLediting programs. Allows search-and-replace
throughentire sites,andincludes manyother useful features.
Downloada 30-daytrial version at www.allaire.com.

158

159
HTML Tag Chart
Task Tag Example
Set up a Web page HTML
HEAD/HEAD
TITLE/TITLE
BODY/BODY
/HTML
HTML
HEAD
Signature, Meta tags, JavaScript,
Style sheets go here
/HEAD
TITLE
The page’s title goes here
/TITLE
BODY
Whateveryouwant to appearonthe
screengoes here
/BODY
/HTML
Format text
Createaparagraph P This is aparagraph.
Alignparagraph right; center
paragraph
PALIGN=”right”/P
PALIGN=”center”/P
This paragraph is centered
inthis cell by using the
ALIGN attribute.
Maketextbold B/B This textis bold.
Indenttext UL/UL This textis indented
Create
bulleted list
UL
LI
/UL
• Listitem
• Listitem
Createnumbered list OL
LI
/OL
1. Item#1
2. Item#2

160
Task Tag Example
Create a link
Linktoapagewithinsite A HREF=”x.html”/A This sentenceis linked toapage
aboutXtopic.
Createane-mail link A
HREF=“mailto:you@x.com”/A
you@x.com
Linktoanexternal page A
HREF=“http://www.x.com”/A
This sentenceis linked to
www.x.com.
Insert a graphic
Insertgraphic IMG SRC=”x.gif”
Alignagraphic rightorleft IMG SRC=”x.gif” ALIGN=”right”
IMG SRC=”x.gif” ALIGN=”left”
Textflows in
tothesideofthegraphic
whenit’s aligned rightorleft.
Add vertical, horizontal space
around agraphic
IMG SRC=”x.gif” VSPACE=”x”
IMG SRC=”x.gif” HSPACE=”x”
Creates vertical and horizontal
spacearound graphic that
nothing canoccupy.
Remove/Add border IMG SRC=”x.gif” BORDER=”0”
IMG SRC=”x.gif” BORDER=”1”
Insert horizontal rule
Create rule HR
Remove 3-D effect, specify
size
HR NOSHADE SIZE=”1”

161
Task Tag Example
Change whole page
Changebackground color BODY BGCOLOR=”#cccccc” Pagewith grey background
Changelink, visited linkcolors BODY LINK=”#ff0000”
VLINK=”#00ff00”
Red link
Greenlink
Changepagemargins BODY
TOPMARGIN=”0”
LEFTMARGIN=”0”
RIGHTMARGIN=”0”
MARGINWIDTH=”0”
MARGINHEIGHT=”0”
Textand graphics onpage
gorighttoits edges.
Create a table
Inserttable TABLE
TR
TD/TD
TD/TD
/TR
/TABLE
Specify widths TABLE WIDTH=”100%”
TR
TDWIDTH=”20%”
TDWIDTH=”80%”
/TR
/TABLE
20% 80%
Specify border TABLE BORDER=”0”
Pad cells TABLE CELLPADDING=”16”
Cell contents
areinset
16 pixels from
edgeofcells
Spacecells TABLE CELLSPACING=”24” Cells are
separated
by 24 pixels

162
Task Tag Example
Changecell background color TDBGCOLOR=”#000000
Insertbackground imageincell TDBACKGROUND=”x.gif”
Employ frames
Createaframeset HTML
HEAD/HEAD
TITLE/TITLE
FRAMESET ROWS=50,*
FRAME NAME=topframe
SRC=x.html
SRC=y.html
/FRAMESET
/HTML
Include forms
Establish form FORM
Inserttextbox FORM
INPUT TYPE=”text”
Specify size INPUT TYPE=”text” SIZE=”20”
Specify name INPUT NAME=”x”
Insertcheckbox INPUT TYPE=”checkbox”
Insertradiobuttons INPUT TYPE=”radio”
Makeonly oneclickable INPUT TYPE=”radio”
NAME=”radiobut”
VALUE=”radio1”
INPUT TYPE=”radio”
NAME=”radiobut”
VALUE=”radio2”

163
Task Tag Example
Insertdrop-downlist SELECT NAME=x
OPTION/OPTION
OPTION/OPTION
OPTION/OPTION
/SELECT
SELECT NAME=x
OPTIONFirst Choice/OPTION
OPTIONSecond Choice/OPTION
OPTIONThird Choice/OPTION
/SELECT
Insertcommentfield TEXTAREA NAME=x COLS=22
rows=8/TEXTAREA
Insertsubmitbutton INPUT TYPE=”submit”
Changetextonbutton INPUT TYPE=”submit”
VALUE=”your text here”

164
Task Tag Example
Employ style sheets
Createstylesheet Savefilewith .css extension. stylesheetname.css
Createstyle .stylename{ }
Specify fontfamily .stylename{
font-family:”arial,sans-serif” }
Specify fontsize .stylename{
font-size:”32pt” }
Specify fontweight .stylename{
font-wight:”bold” }
Specify fontcolor .stylename{
color:”#0000ff” }
Specify background color .stylename{
background-color:”#cccc99” }
Linktoastylesheet LINK REL=”stylesheet”
HREF=”stylesheetname.css”
Apply astyle Pclass=”stylename”
H2class=”stylename”
Createrollovereffects A:hover{
color:#00ff00;
text-decoration: underline}

165
Index
Browser
Internet Explorer .................................................................................................11
Netscape Communicator....................................................................................11
viewing pages .......................................................................................................11
Colors
hexadecimal..........................................................................................................50
link.........................................................................................................................52
page.......................................................................................................................50
table cells...............................................................................................................65
Forms..............................................................................................................................102
action...................................................................................................................108
validation............................................................................................................154
Frames..............................................................................................................................91
frameset ................................................................................................................92
Graphics
aligning .................................................................................................................38
background........................................................................................................132
capturing...............................................................................................................34
copyright...............................................................................................................35
formatting.............................................................................................................41
inserting ................................................................................................................36
rollover................................................................................................................142
spacers.................................................................................................................135
using as links ........................................................................................................47
Home Page
creating ...................................................................................................................4
file name .................................................................................................................7
Horizontal Rule............................................................................................................137
JavaScript.......................................................................................................................141
form validation..................................................................................................155
Open New Window...........................................................................................150
programming.....................................................................................................142
rollovers..............................................................................................................149
Links
e-mail....................................................................................................................31
external sites .........................................................................................................33
target .....................................................................................................................94
to new page...........................................................................................................25
Navigation
bars........................................................................................................................76
clues.......................................................................................................................27
system....................................................................................................................44
you are here..........................................................................................................46

166
Software
Notepad...................................................................................................................4
Source Code...................................................................................................................143
copying................................................................................................................144
modifying............................................................................................................146
Style Sheets.....................................................................................................................111
applying...............................................................................................................114
creating................................................................................................................112
link effects ...........................................................................................................117
Tables................................................................................................................................58
border....................................................................................................................62
creating..................................................................................................................59
formatting.............................................................................................................63
tables within..........................................................................................................88
width......................................................................................................................63
Tag
A (anchor).......................................................................................................28
BODY.................................................................................................................9
FONT...............................................................................................................15
HEAD.................................................................................................................7
HTML................................................................................................................4
IMG..................................................................................................................39
META.............................................................................................................100
P........................................................................................................................19
TABLE..............................................................................................................59
TITLE.................................................................................................................9
Text
aligning..................................................................................................................19
centering ...............................................................................................................77
changing color......................................................................................................18
changing fonts......................................................................................................14
changing size.........................................................................................................16
changing weight ...................................................................................................17
creating lists..........................................................................................................23
indenting...............................................................................................................21
Web fonts..............................................................................................................15
Uploading.......................................................................................................................121
FTP......................................................................................................................121
Web Page
consistent layout ..................................................................................................85
layout.....................................................................................................................58
margins................................................................................................................138
proper file names .................................................................................................26
title...........................................................................................................................8
Web Server.....................................................................................................................123

Download Visibooks for Free
All Visibooks can be downloaded at www.visibooks.com.
Visibooks believes that you shouldn’t have to rely on strangers’ reviews or skim at a
bookstore when deciding which computer book to buy. By putting our books online for
you to download and review, we make it easier to find the right book.
Visibooks are free. Why buy a bound copy?
Visibooks are more useful on paper than as digital files. If you’d like to trade a small
amount of money for a big chunk of time, purchase a bound copy of your Visibook:
Print-It-Yourself Buy a Bound Copy
Printing Spend 1-2 hours printing it at
home, or 30 minutes at work trying
not to get caught using the office
printer. Plus 1-2 hours to go to
Kinko’s, have it bound, then bring
it back. Or 5minutes to pick up and
sort pages that fell out after being
bound with a clip.
2 minutes to order
Binding Spend $1.50 for 150 sheets of
paper, plus $2 depletion ofprinter
cartridge, plus $8 for plastic comb
binding.
Less than $20 for a spiral-bound
copy, printed on heavyweight paper
with full-color cover.
Total Spend 30 minutes to 4 hours.
Spend $3.50 to $11.50.
2 minutes, less than $25 shipped.
Know someone who’d like to download Visibooks for free?
Tell someone about Visibooks: www.visibooks.com/refer.html.
Want to know when new Visibooks are published?
Sign up to be notified via e-mail: www.visibooks.com/notify.html.

Other books on Web publishing from
FrontPage2000 for Visual Learners
Teaches people how to build Web sites using FrontPage 2000. Addresses
improvements from previous versions.
Dreamweaver 4 for Visual Learners
Covers both basic and advanced features of one of the easiest to use site-
building programs.
TheVisual Learner’s GuidetoManaging Web Projects
Goes beyond the nuts-and-bolts of site-building to show people how to
plan, organize, build and manage effective Web sites.

Html & javascript_for_visual_learners_tutorial_-_174_pages

Recommended

More Related Content

Viewers also liked (11)

Similar to Html & javascript_for_visual_learners_tutorial_-_174_pages (20)

Recently uploaded (20)

Html & javascript_for_visual_learners_tutorial_-_174_pages