Introduction To HTML - HTML Tutorials in Web Page Design by J. Gilson

INTRODUCTION TO HTML - html tutorials in web page design by J.
Gilson
LESSON ONE - INTRODUCING HTML
You may read the following sections in their entirety

or use these choices to go directly to a section.
| Understanding HTML | | Different Versions of HTML | | The Netscape Problem |

| HTML software to assist in web page design |
UNDERSTANDING HTML
HTML stands for HyperText Markup Language.
H yper
T ext
M arkup
L anguage
LET'S BREAK THIS DOWN A LITTLE FURTHER
HYPER
You may have heard the expression "hyper" in describing someone. In simplest terms, it means active,
kind of "all over the place". The word "Hyper" as part of HTML is similar in context. It simply means
that when you are on the internet using a browser such as Netscape Navigator or Internet Explorer, you
can in fact, go "all over the place". In browsing through the World Wide Web (WWW), if you see
something you like, you can go immediately to it. There is no set order to do things in. Hyper is the
opposite of "linear". Linear means that there is a certain order you must follow such as "you must do this
before you can do that". Programming languages such as BASIC and FORTRAN are linear. HTML does
not hold to that and allows you to jump to any page on the WWW and at any time. Thus the word
HYPER refers to the idea that the text in HTML is not linear.
TEXT
We are working with text only files. More on that in Lesson Two.
http://www.htmltutorials.ca/lesson1.htm? (1 of 7)06/03/2004 09:03:09

INTRODUCTION TO HTML - html tutorials in web page design by J. Gilson
MARKUP
"Markup" comes from the fact that in order to create web pages, we will be typing in the text and then
"marking up" the text. If you are familiar with WordPerfect, consider this example. Suppose you just
typed a document in WordPerfect. If you choose REVEAL CODES from the VIEW menu, the monitor
screen or Window splits into two parts. The top half of the screen shows the text you typed in and the
bottom half shows the same text but with the words marked up with "codes" or "tags". For example,
suppose you typed the following three lines in WordPerfect:
Hi, this is bold
This is italics
These words are centered
If you choose REVEAL CODES, you would see the following on the bottom half of your screen in one
version of WordPerfect:
[Bold On]Hi, this is bold[Bold off][HRt]

[HRt]
[Italic On]This is italics[Italic Off][HRt]
[HRt]
[Just:Center]These words are centered[HRt]
In other words, the text has been marked up with codes or tags as indicated between the [ ] symbols.
Each [HRt] indicates that the ENTER key was pressed. [Bold On] means that everything after this tag is
bolded. The [Bold Off] tag simply says that bolding is to end here. Unless you choose REVEAL
CODES, you won't see these tags. All word processors have codes that tell the computer how to display
the document, how to print it out, etc.
In HTML, WordPerfect tags or the tags from any other word processor won't work. HTML has its
own set of tags to mark up text. If you want something bolded or centered, you have to indicate so with
HTML tags. WordPerfect automatically puts the tags in for you. In HTML, you must put in the tags
yourself. If you want to see the tags for this page, just choose VIEW from the menu bar of your browser
and then choose SOURCE or DOCUMENT SOURCE.
LANGUAGE
"Language" means that we are using a language with all its syntax. Note that HTML is not a
programming language such as BASIC or FORTRAN. These are linear programming languages and are
based on a whole different set of rules and are far more complicated to learn. The HTML language is

easy to learn (trust me).
| top | | bottom |
DIFFERENT VERSIONS OF HTML
HTML 1.0
The original version of HTML was HTML 1.0. It had very limited features which greatly limited what
you could do in designing your web pages.
HTML 2.0
HTML 2.0 then arrived and included all the features of HTML 1.0 plus several new features for web
page design. Until January, 1997, HTML 2.0 was the standard in web page design.
HTML 3.0
HTML 2.0 served its purpose very well, but many people designing web pages (called HTML authors or
webmasters) wanted more control over their web pages and more ways to mark up their text and
enhance the appearance of their websites. Netscape, the leading browser at that time, introduced new
tags and attributes called the Netscape Extension Tags. Other browsers tried to duplicate them but
Netscape did not fully specify their new tags and so these extension tags did not work in most other
browsers. It led to considerable confusion and problems when HTML authors used these tags and
attributes and then saw that they didn't work as expected in other browsers.
At about that time, an HTML working group, led by Dave Raggett, introduced the HTML 3.0 draft
which included many new and useful enhancements to HTML. However, most browsers only
implemented a few elements from this draft. The phrase "HTML 3.0 enhanced" quickly became popular
on the web but it more often than not referred to documents containing browser specific tags (discussed
below in "The Netscape Problem" section), instead of referring to documents adhering to the HTML 3.0
draft. This was one of the reasons why the draft was abandoned. HTML 3.0 is now an expired draft.
Another reason why HTML 3.0 did not make it was because it was so "big". Future versions were now
to be introduced in a more "modular" way so that browsers can implement them modular by modular or
bit by bit.
HTML 3.2 (WILBUR)
As more browser-specific tags were introduced, it became obvious that a new standard was needed. For
this reason, the Word Wide Web Consortium (W3C), founded in 1994 to develop common standards for

the evolution of the World Wide Web, drafted the WILBUR standard, which later became known as
HTML 3.2. HTML 3.2 captures the recommended practice as of early 1996 and became the official
standard in January, 1997. Most, if not all, popular browsers in use today fully support HTML 3.2.
HTML 4.0 (COUGAR)
HTML 4.0 is the current version of HTML. In the early days it was code-named COUGAR. This version
introduces new functionality, most of which comes from the expired HTML 3.0 draft. This version
became a recommendation in December, 1997 and is now the official standard as of April, 1998.
Explorer has done a very good job in implementing the many features of HTML 4.0. Unfortunately,
Netscape has not kept pace. The latest version of Netscape Communicator still does not recognize the
many tags and attributes introduced with HTML 4.0. This means that a web page that involves HTML
4.0 specific tags will look great in Explorer but can look disastrous in Netscape.
| top | | bottom |
THE NETSCAPE PROBLEM
As stated above, in the early days of HTML, Netscape created a number of its own tags (extension tags)
to HTML 2.0 that were not part of the official HTML 2.0 version. In other words, Netscape created a
number of additional tags that would work beautifully in Netscape, but were not supported by other
browsers such as Internet Explorer. Many of these extension tags did not even make it into HTML 3.2.
This means that if you were using Netscape extension tags, while they may create good looking web
pages in Netscape, the same pages viewed in Explorer would look entirely different and in fact give
results that you did not want.
This Netscape problem also illustrates the case for the need of a standard language that can be used by
all browsers. Imagine what will happen if each browser were allowed to develop its own tags. You will
simply end up with all browser specific web pages. It would become impossible to design web pages
that will work in all browsers. We need continuity and we need a standard language for all browsers.
Netscape has argued that their extension tags will not shut down or hang up other browsers. Thus if
another browser does not recognize a Netscape extension tag, it will simply ignore it - as if it didn't
exist. Therefore if you centered text on a web page using a Netscape extension tag, then the text simply
wouldn't be centered in these other browsers. While I have concentrated on the Netscape problem, the
same arguments can also be stated for Explorer browsers for they too had their own extensions.
So what do we have here? Well, in summary, we have:
1. HTML 2.0 tags

2. HTML 3.2 tags

3. HTML 4.0 tags

4. Netscape extensions
5. Explorer extensions
Sounds confusing? Well it really isn't that bad. Basic web page design is, in fact, easy to learn. In this
course we will be designing web pages using HTML 3.2 standard code because HTML 3.2 tags and
attributes are accepted by most, if not all, versions of the most popular browsers in use today. I am
assuming that you will want as many people as possible to be able to read your web pages. You can
create excellent web pages using HTML 3.2 content. Using Netscape extension tags that are not part of
HTML 3.2 simply means that many of these tags will only work when viewed in Netscape. Similarly if
you use Explorer extension tags that are not part of HTML 3.2 then many of these tags will only work
when viewed in Explorer. Even if 80% of the people use high level browsers that can view your web
pages in the way you want them viewed, it still means that 20% or several million viewers will not be
able to view your web pages in the way you want them viewed. We need to keep these things in mind
when designing web pages. And if you are planning to make some money with your website, you
certainly do not want to leave out any potential customers. You want the widest possible audience.
We will also study a number of Netscape and Explorer extension tags because you should be aware of
what they are. Some of you may also want the control that these extension tags give - even if it means
shutting out a portion of the audience on some of your web pages. At one time Netscape browsers
dominated the browser market. Then Explorer started to take a larger share of the market at the expense
of Netscape. Today, Explorer dominates the market and appears to be the browser of choice for most
people.
| top | | bottom |
HTML SOFTWARE TO ASSIST IN WEB PAGE DESIGN
Should I not simply use one of the programs on the market that makes up web pages for me? You could.
While all of them will give a basic home page, a number of them are limited in what they can do. Many
do not, for example, give you all the features of HTML. However, I am also sure that there are programs
on the market (and new programs coming out all the time) that do incorporate most of the features of the
various versions of HTML. Still, in order to get maximum use out of these programs, you need to
understand HTML and what it can do for you in the design of web pages. It would be good to know
what will work in most browsers and what won't work. It would be good to know what tags are browser
specific or what tags will work only in a high level browser. If you understand the basics of HTML, you
will have a much better understanding of what you are trying to accomplish with these market programs.
You could also use an HTML program to assist you with some of the basic stuff and then code the rest
yourself with your knowledge of HTML. Someday you may want to experiment with some of these
programs. There is no doubt that learning the basics of the HTML language is necessary to fully

understand these web page design programs. Knowing HTML will allow you to tweak and fine tune a
web page to perfection.
To illustrate what I am trying to say, here are three unsolicited testimonials I received. This first one is
from Karen who lives in the state of Georgia, USA. She writes: "I can't thank you enough for taking the
time to explain HTML. I'm off work due to an illness. Being bored out of my mind I decided to try to
create a web page without any knowledge of HTML. The programs I used did the basics, but I found
them confusing because I lacked the knowledge of HTML. So I went surfing and found your website. I
must say that I am impressed. After going through all the lessons, I've got some great ideas and can't
wait to get started on my own page. I decided to dump the programs and do all the coding myself. When
I finish my web page there will be a note of thanks and link to your website. My greatest appreciation,
Karen."
Here is an email I received from Brenda who lives in Illinois. She writes: "I have printed all of the pages
of your lessons and am impressed at the level of information it contains. I can actually understand what
you are talking about although I am brand new to HTML. I am teaching myself how to create my
company web page using FrontPage and I have an embarrassingly simple web page on Geocities. Some
trouble has occurred in FrontPage with extensions and color changes, hence I am trying to learn HTML
to correct them. Thank you so much for taking the time to create these lessons. They are fabulous!
Brenda."
Our third email is from Sharon who lives in Pennsylvania, USA. She writes: "After being overwhelmed
by HomeSite, and constrained by templates on free space websites, this is exactly what I was looking
for. You write in a wonderfully clear, concise way, that's easy to follow. Your problems are instructive,
and the pace is perfect. THANK YOU!"
I have also received many other e-mails from people expressing similar view points. I'm not advocating
that we "dump" these programs. For some people they are very essential in designing websites and in
updating them. But the point to be made is that it is better to take some time and learn HTML first. Then
if you do run into some problems with these programs, you will know how to correct them.
So now sit back, relax, and learn a whole new language called HTML. You will be happy you did.
| Back to the top of the page |
| Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Two |
The information contained in these free 21 lessons is Copyright ©, Brantford Educational

Services, 1997 - 2003 by local and international copyright laws. All rights reserved. It is
therefore illegal to copy these lessons into another website. If you find a copyright violation,
please report it to htmltutorials@bfree.on.ca

GETTING STARTED - html tutorials in web page design by J. Gilson
LESSON TWO - GETTING STARTED

| What do I need to get started? | | Saving your web pages |

| Naming your HTML document | | Server requirements for naming home pages |
| Loading your HTML document into your browser |
| Getting your web page on the internet | | Getting a counter for your web page |
WHAT DO I NEED TO BEGIN DESIGNING A HOME PAGE?
YOU NEED A DIRECTORY (also called a FOLDER)

You should set up a directory or folder to hold only your HTML files (also called documents) for
the web pages you are designing. Work in that directory only. If you are doing all these lessons,
you may also wish to set up a separate directory to hold all my examples for testing in your
browser. The best way to learn is by doing so when I give you an example or a problem for you
to work on, be sure to try it out to see what it would look like on the web through your browser.
You can then alter the example to experiment with different effects. In any event, you need some
place to put your work. If you do not know how to create a directory, be sure to call someone
who does know and can tell you how to do it.
YOU DO NOT NEED TO HAVE YOUR MODEM CONNECTED

You do not need to be connected by modem to your server. You can write and design your
HTML pages off-line. If all you are doing is designing web pages, you have no need to go on the
internet. Besides, if you are paying by the hour, you don't want to pay any more than you have to.
Also, if you have only one telephone line to your house and you are connected by phone, there is
no need to tie up the line for hours at a time. How do you disconnect the modem? Well, in most
cases, when you load the browser, a little window opens up to dial the server. Simply click
CANCEL, and choose to work off-line. If you are using an old version of a browser and this
method doesn't work, you may need to call on someone to help you. So remember, you do not
need to be connected by modem to design your web pages.
YOU NEED A BROWSER

Netscape Navigator (also called Netscape Communicator) and Internet Explorer are among
today's most popular browsers and there are different versions of each of these. Netscape, as of
version 4.0, is called Netscape Communicator. Before version 4.0, it was called Netscape
http://www.htmltutorials.ca/lesson2.htm (1 of 9)06/03/2004 09:03:35

Navigator. There are other browsers also but they are not nearly as popular as Netscape and
Explorer. Most likely you already have a browser or you wouldn't be reading this.
YOU NEED A WORD PROCESSOR

You need a word processor such as WordPerfect or Microsoft Word or Microsoft Works. I like
using NOTEPAD which can be found in the ACCESSORIES directory (also know as the
ACCESSORIES "GROUP"). In Windows 95, for example, NOTEPAD is found by choosing
"START", then choosing "PROGRAMS", then choosing "ACCESSORIES" and finally choosing
NOTEPAD. Notepad is a simple "text editor" that loads almost instantly. A text editor is a very
simple word processor. NOTEPAD also quickly loads any file I need and quickly saves the file.
As we will see later in this lesson, there are other reasons as well for using a text editor such as
NOTEPAD.
Sometimes a web page can become so big that it will no longer fit into NOTEPAD. In this case,
you will need to switch to another text editor or to your word processor to complete the page. I
will from here on be referring to NOTEPAD as the text editor of choice. Of course if you wish,
you can use any text editor or word processor.
In summary, you basically:
1. do your work in a text editor such as NOTEPAD (typing in all the text and tags)
2. save your work in an HTML file using any appropriate name
3. load the HTML file into the browser to see how your web page looks and works
4. switch back to NOTEPAD to make any corrections, changes, etc.
YOU NEED TO HAVE BOTH YOUR BROWSER AND NOTEPAD ACTIVELY

RUNNING
To design a web page, you need to have BOTH your browser AND NOTEPAD active at the same time.
In other words, while you are working with one, the other is sitting there in the background. This way
you can quickly SWITCH back and forth between them. If you do not know how to have both your
browser and NOTEPAD (or any text editor) running at the same time, be sure to ask someone who does
know.
| top | | bottom |
SAVING YOUR HTML FILE (OR DOCUMENT)
● IF YOU ARE USING ONLY NOTEPAD or similar text editor:

Simply type in a suitable file name (along with an extension discussed in the next section) and

click on "OK".
● IF YOU ARE USING WORDPERFECT, WORD, WORKS (or any popular word
processor):
In lesson one, I gave an example in WordPerfect of what happens when you chose REVEAL
CODES. In the lower half of the screen, you see your text all marked up with WordPerfect tags.
If you need to review this, just click here on Lesson One. Well, it doesn't matter which word
processor you use, it will have its own set of tags or codes which lets it know what the margins
are, what is bolded, underlined, when the ENTER key has been pressed, and so on. If you save
your HTML web page as a normal document file, all these little tags or codes are saved as well.
In HTML, we don't want that. You must save your work as TEXT ONLY files. HTML browsers
can read only text. If you don't save as TEXT ONLY, you will be saving a lot more than text.
You will also be saving margin settings, bold, italics, indents, etc. When you are ready to save
your HTML document or file, you must first choose SAVE AS ... from the FILE menu. Then,
besides choosing a suitable file name, you must make sure to also choose TEXT ONLY, ASCII
TEXT DOS, MSDOS TEXT, PLAIN TEXT, or just TEXT - your processor will have one of
these options or a similar option. You can then click on "OK" to save your HTML file.
| top | | bottom |
NAMING YOUR TEXT ONLY FILE
You need to give your file (that is, your web page) a name. You not only have to give it a name but you
also need to add a suffix to the name.
THE NAME: If you are using an IBM or IBM compatible computer and not running Windows 95 or
higher, your file name is limited to a maximum of 8 characters. Otherwise the name can be longer.
THE SUFFIX: The suffix is an extension to the name and declares the kind of document that it is. In
HTML, the suffix is either ".htm" or ".html". "Htm" or "html" tells the browser you are working with
HTML files - that is, an HTML document.
You use ".htm" if you are using an IBM or IBM compatible computer and not running Windows 95 or
higher, and you can use (but don't have to) ".html" if you are using a MAC, UNIX or AMIGA computer
or if you are running Windows 95 or higher on an IBM or IBM compatible.
So if "homepage" is the name of the HTML document, we have:
homepage.htm for IBM and IBM compatibles not running at least Windows 95 AND
homepage.html for MAC, UNIX and AMIGA computers, and running at least Windows 95 on IBM

and IBM compatibles.
As I stated above, Windows 95 on the IBM and IBM compatibles allow more than 8 characters for the
file name and allow four characters (.html) for the suffix or extension, However, if you plan to transfer
your HTML files to another IBM or compatible computer that does not use at least Windows 95, or you
are using a program to transfer your files to the internet that does not accept more than 8 characters for
the file name, you will run into trouble if you use more than 8 characters for the file name and the four
character extension. Therefore I suggest you consider these situations before deciding on the length of
the file names and the extension (.htm or .html).
So, in summary, remember:
1. Choose SAVE AS ...

2. Choose saving the file as TEXT ONLY, ASCII TEXT DOS, MSDOS TEXT, or PLAIN TEXT if
you are using WordPerfect, Word, or Works, etc. With NOTEPAD you do not have to do this as
it automatically saves the file as text only.
3. Type in a name for your file (no more than 8 characters for IBM and IBM compatibles and not
running at least Windows 95).
4. Add the extension ".htm" for IBM and IBM compatibles not running at least Windows 95, OR ".
html" for MAC, UNIX, AMIGA computers and Windows 95 or higher users.
5. Click on the "OK" button
6. Once an HTML document has been saved, from then on you only need to choose SAVE instead
of SAVE AS ... as your file name and type will not be changed.
| top | | bottom |
SERVER REQUIREMENTS FOR NAMING HOME PAGES
When you design a website, generally you have a "home page" plus other pages that are linked to this
home page. A home page is then your main page that contains information about you, your business or
organization, plus a menu of choices for linking to your other pages or to other websites. For this
section, I will use the Brant FreeNet as an example. What I say here is true for most, if not all companies
that provide internet services. One of my connections to the internet is through the Brant FreeNet, a non-
profit organization. Now, anyone with Brant FreeNet who wants to set up a Home Page is strongly
encouraged to name it index.htm. If you plan to have other pages connected to your home page, you can
give it any name you like and with either the .htm or .html extension. But for the main home page, it
should be index.htm. The reason for this is that index.htm is the default name for any home page on
line with the Brant FreeNet. This means that if someone is visiting one of your other pages, and would
like to see your home page, all they have to do is erase the file name in the address location line, press
the ENTER key, and your home page will be displayed. If you don't name your home page index.htm,

the browser will not be able to locate your home page and the viewer will receive an error message. The
same is true if you are visiting another web page anywhere on the World Wide Web (WWW). If you
want to see a home page, just erase the name and you should be connected to the home page.
For example, let's suppose one address from a web page is:
http://www.bfree.on.ca/comdir/retire/buchanan/Lifelease.htm
If you were to erase the file name in the address location line so that it looks like:
http://www.bfree.on.ca/comdir/retire/buchanan/
you will be connected to their main home page which is:
http://www.bfree.on.ca/comdir/retire/buchanan/index.htm
Each internet service provider has its own default file name for home pages. If you do not know what
yours is, you should ask someone from the company who is providing you the internet service what you
should name your home page. Also, the next time you are surfing the WWW, try this method to see if
you can connect to someone's home page.
| top | | bottom |
LOADING YOUR HTML DOCUMENT INTO THE BROWSER
Once you have saved your HTML file or document, you need to SWITCH over to your browser which is
running in the background. Once you activate your browser, choose File from the menu bar, and then
choose Open ... or Open File ... or Open File in Browser ... (one of them should be in the File menu).
You will then need to locate your file, click on the file name and then click the Okay button. Your
HTML file will appear in the browser. You can only observe your file in the browser - you can not edit
in the browser. Once you have seen how your HTML file looks in the browser, you can then SWITCH
back to NOTEPAD to continue working and editing.
NOTE:
(1) If you want to LOAD a new HTML file into NOTEPAD, and the name does not show up in the
correct directory in the dialog window, choose to show All Files (*.*) in the Files of type line and the
name should then appear. Click on the name and then on the Open button.
(2) If you use a word processor other than NOTEPAD, you may first need to CLOSE the HTML file
before it can be loaded into your browser. With NOTEPAD this is not necessary.

If some of this sounds confusing, don't worry, you will get a chance to practice saving and loading in
Lesson Three.
Now here are some questions to answer. The answers are given at the end of this lesson.
1. What does HTML stand for?

2. Assuming that we have the proper computer platforms, which of the following are legal names
for web pages?
a) contents.htm
b) ordering.html
c) homepage.txt
d) faq.htl
e) ThankYou505.htm
f) products-warehouse.html
3. Answer True or False:
HTML web pages are always saved as text only files.
4. What web page will load if the URL is http://www.html-tutorials/
| Click here to see the answers |
| top | | bottom |
GETTING YOUR WEB PAGE ON THE INTERNET
When you finish creating your website, you may wish to place it on the World Wide Web (that is, on the
internet). To place your website on the internet, you need a host. That is, you need to find an internet
company to host your website. You may have an internet business and willing to pay a monthly fee to
have your website hosted. There are hundred of companies willing to host your website for under $10
per month with your own domain name. You will of course be required to purchase your domain name
which today is relatively cheap. If you go to your favorite search engines and do a search on "web page
hosting" or "web page providers" or "web hosting service", etc., there will be no shortage of search
results to check out. One host to check out is host-smart.com. With Host-Smart you get 3 GIG's of
bandwidth transfer, 50MB of storage space, No Set Up Fees, Unlimited Email Aliases and much more.
The cost is only $7.95 per month with no contracts to sign. Click here if you would like to visit and learn
more about the services of host-smart.com.
On the other hand, you may only have a small internet business or a personal web page, and you do not

want to pay any money to have your website hosted. In other words, you want a free web page hosting
service. There are many internet companies willing to host your website for free. Many of these
companies are good companies giving away lots of free web space - more than you will likely ever need.
Some of these hosting companies also offer unlimited E-mail addresses, message boards, guestbooks,
personalized domain names, counters and site stats. Some will even provide sponsors that will pay for
visitors you send from your free website. Most have easy to learn instructions on how to transfer your
website to the internet through their hosting service.
If these companies are willing to host your website for free, then what is the catch? The catch is that you
will be required to display some form of advertising - such as advertising their services to all your
visitors. If you would like a free website I would suggest that you click here to visit http://www.
thefreesite.com where you will find a listing of several internet companies that offer free hosting
services plus a host of other free things. The actual page that lists these companies is located at http://
www.thefreesite.com/Free_Web_Space/index.html.
TheFreeSite.com checks out each internet company before advertising their free services on TheFreeSite.
com website, and then includes a description or comment on each listing. So TheFreeSite.com is a good
place to start if you are looking for something free.
Checking out all these internet companies offering free web pages can be confusing so here are two
suggestions on what to avoid:
1. Try to avoid a hosting company that places their advertisements in a pop-up window. What
happens here is that every time a visitor displays a page from your website, a window pops up
which the visitor then has to close. Many people find these pop-up windows very annoying and
it tends to turn them off. These pop-up windows are also a sure sign that your web page is being
hosted for free. If you want a professional looking website then I would suggest that you avoid
hosts with pop-up advertising windows. Look for a host that will require you to display a banner
instead of pop-up windows.
2. Try to avoid an internet company that will place your website in a frame and their advertising in
another frame. Frames are not studied until Lesson 13 but if you want to see what a frames page
looks like now, just click here to see my Lesson 13. It is a frames page with the title ("Lesson 13
- Frames") in one horizontal frame that never moves, and the lesson itself in another frame with a
scroll bar so that you can scroll through the lesson. The setup for a host that places your website
in a frame is about the same. They will place their advertisements in a horizontal frame that never
moves (either at the top of the page or at the bottom of the page) and your web page will be
placed in a second frame with a scroll bar.
There are a number of people do not care for frames and also many of the top search engines are
not equipped to properly index web pages with frames. Thus if you intend to place your web page
with the search engines, there is a good chance you will not get very good placements.

TheFreeSite.com does include hosts that do not require the displaying of pop-up windows and frames. If
I had to choose between (1) and (2), I would go with (2). However, you should try to find a host that
avoids both (1) and (2).
| top | | bottom |
GETTING A COUNTER FOR YOUR WEB PAGE
You may wish to place a counter on your home page before placing your website on the internet. A
counter will tell you how many visitors visit your website. That is, a counter keeps track of the number
of hits to your website. A counter cannot be created with HTML. It requires a scripting language to
make a counter (such as a JavaScript or a CGI Script). For this reason, almost everyone gets a free
counter and free counters are plentiful. If you would like to check out some free counters for your
website, click here to visit http://www.thefreesite.com where you will find a listing of several internet
companies that offer free counters. The actual page that lists these companies is located at http://www.
thefreesite.com/Webmaster_Freebies/Free_counters_and_trackers/index.html. These free counters come
complete with all the necessary coding to place on your website. Just cut & paste the coding that they
provide and you have a counter on your website. Counters are usually placed at the bottom of a web
page.
There are all kinds of counters that you can choose from. You can get a simple counter that only keeps a
record of hits to your website or you can get a counter that gives a lot more information. Many counters
not only keep a running total of hits to your website, but they can also tell you where a visitor comes
from, what their computer screen resolution is, what browser they are using, and even how long they
spent browsing your site. Many counters also give you information such as hits by the hour, day, week,
month and year. You can get a counter that gives data in colorful 3D graphs, or styles that you can
customize by text color, background color, size, font, etc. One company offers a counter that will even
tell you what keywords your visitors used to locate you.
How do you access all this other information about your visitors? Well, with the counter comes your
own personal access page located at the company's website that will give you all this information about
your visitors. Thus the company giving you the free counter will also provide everything you need along
with complete instructions.
While you are visiting TheFreeSite.com, you may wish to subscribe to their free newsletter. It is a great
newsletter giving you the latest in freebies. TheFreeSite.com claims to offer the web's largest collection
of freebies and that their free stuff listings are the most complete on the internet. I tend to agree with
them.

| top | | bottom |
ANSWERS
1. HTML stands for HyperText Markup Language.

2. a) contents.htm is a legal web page name.
b) ordering.html is a legal name.
c) homepage.txt is not a legal name. Even though web pages are saved as text only files, the
extension (or suffix) must be .htm or .html.
d) faq.htl is not a legal name. The extension must be .htm or .html.
e) ThankYou505.htm is a legal name as numbers are allowed in the file name.
f) products-warehouse.html is a legal name as dashes (and underscores) are allowed. However,
you should not start a name with a dash or underscore.
3. True
4. You are only given the domain name (html-tutorials). There is no web page filename given.
Therefore the default web page will be loaded which is usually the home page.
| Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Three |
The information contained in these 21 free lessons is Copyright ©, Brantford Educational


BASIC TAGS - html tutorials in web page design by J. Gilson
LESSON THREE - UNDERSTANDING THE BASIC TAGS

| Tags | | <BR>, <P> and <HR> tags | | <HTML> and </HTML> tags | | Correct use of tags |
| <HEAD>, <TITLE> and <BODY> tags |
HTML TAGS
HTML works in a very straightforward manner. You type in your text and your tags. To get large print,
centered text, bold text, text in italics, indented sentences, colored text, etc., is nothing more than
inserting tags around your text. These tags are more accurately called ELEMENTS and you should
think of these elements as describing the meaning of the text they contain, rather than how the enclosed
text should be displayed. This concept is called content-based markup, as opposed to presentational
markup. We will get more into this in Lesson Four when we study web page design. Because we don't
want the tags (elements) to appear in the browser, we need a way to tell the browser that something is a
tag - and this is easy to do. To tell the browser that something is a tag, you simply place "less than" and
"greater than" symbols around them. The LESS THAN symbol is "<" and the GREATER THAN
symbol is ">". These symbols are also called "Angle Brackets". Thus we have an opening angle bracket
"<" and a closing angle bracket ">" around each tag. I have also heard them called "pointed brackets".
| top | | bottom |
<BR>, <P> and <HR> TAGS
<BR>
<BR> tells your browser to go to the beginning of the next line. BR stands for line BReak. <BR> acts in
the same way as the ENTER key on your keyboard. When you press the ENTER key, the cursor goes to
the beginning of the next line. With <BR>, the browser is also told to go to the beginning of the next
line. Remember that when you save an HTML document, you are saving it as TEXT ONLY which
means that no codes are saved and so your browser will not know when to end a line and continue on to
the next line. The <BR> tag does this for you.

<P>
<P> for Paragraph tells your browser to insert a blank or empty line and then begin a new line (a new
paragraph). <BR> tells the browser when a line has ended while <P> tells the browser to leave a blank
line and begin a new paragraph.
<HR>
<HR> puts a line across the page. HR stands for Horizontal Rule. The two lines you see below were put
there with <HR> tags.
| top | | bottom |
<HTML> and </HTML> tags
Before we can try out the <BR>, <P>, and <HR> features, we first need to learn how to set things up
properly in an HTML document (or file as it is also called). Every HTML document should first be
declared that it is in fact an HTML document. When the document is completed we also need to indicate
this. You do this with the tags <HTML> and </HTML>. Recall that HTML stands for HyperText
Markup Language which is the language of web page design.
<HTML> is the beginning tag and </HTML> is the ending tag. The forward slash before the tag (</ >)
cancels the effect of the tag. This is true for all tags that affect text. Thus <HTML> tells the browser that
what follows is an HTML document and </HTML> tells the browser that the HTML document is
completed. You can therefore think of the <HTML> and </HTML> tags as "containers", containing the
entire HTML document. Therefore HTML is called a container tag. You should use the HTML element
for each of your web pages.
I used the word "should" when I stated that you "should" use the HTML element for each of your web
pages. In reality, the HTML element is not required and may safely be omitted. After all, what other
kind of document is there on the web? I still continue to use the HTML tags as I like to declare things
for what they are and with no ambiguity.
| top | | bottom |
CORRECT USE OF TAGS
We have "beginning" or "opening" tags (such as <HTML>) and we have "ending" or "closing" tags
(such as </HTML>). Many elements consist of an opening tag and a closing tag. An element that has an
opening and closing tag is referred to as a container element because anything contained between these

tags are affected by the element.
Closing Tags cannot be placed just anywhere. Use the "Last In = First Out" principle or "LIFO". That is,
the "Last" tag "In" must be the "First" tag "Out". Another way of stating this is that the last tag activated
must be the first tag terminated. An example of a correct sequence of tags is:
<tag1><tag2> statements </tag2></tag1>
In this example, <tag1> is activated first, and then <tag2>. Thus <tag2> must be terminated first with </
tag2> followed by the termination of <tag1> (</tag1>). In other words, tags are closed in reverse order
to the way they are opened. Thus the first tag opened must be the last tag closed.
An example of an incorrect placement of tags is:
<tag1><tag2> statements </tag1></tag2>
In this example, the last tag opened (<tag2>) is not the first tag closed. That is, these tags overlap. </
tag2> must come before </tag1>. Therefore this example does not satisfy the LIFO principle. Container
tags cannot overlap each other. If you do not place tags properly, your web page simply won't work.
The following is another example of a correct use of tags:
<tagA><tagC><tagB><tagD> statements </tagD></tagB></tagC></tagA>
Problem 1: Is the following example a correct use of tags? The answer is given at the end of this lesson.
<tag1><tag2> blah, blah, blah </tag2>

<tag3>
blah
blah
blah
<tag4> blah, blah, blah </tag4></tag3>
blah
blah
blah </tag1>
| Click here to see the answer |
| top | | bottom |

<HEAD>, </HEAD>, <TITLE>, </TITLE>, <BODY> and </BODY> tags
In this section we will study the HEAD, TITLE and BODY container elements and we will learn about
these tags (most people still refer to "elements" as "tags") by studying the following HTML document.
It is good to be actively involved in each lesson, so please SWITCH to NOTEPAD, and type in the
following HTML web page. After you have typed it in, save the document using any suitable name
(such as RIDDLE.HTM), and then SWITCH back to your browser and load the document into your
browser to see the results as they should be (given below the document).
Here is the web page. Please type:
<HTML>
<HEAD>
<TITLE>WEB PAGE DESIGN - BASIC TAGS</TITLE>
</HEAD>
<BODY>
Hi, my name is John Gilson.<BR>
This is my first attempt at a Web page.<HR>
Here is a riddle for you.
<P>Why did the lobster blush?<HR>
Because it saw the salad dressing.<BR><BR><HR>
</BODY>
</HTML>
Now when you load this document into your browser, you should see the following on the screen:
Hi, my name is John Gilson.

This is my first attempt at a Web page.
Why did the lobster blush?
Because it saw the salad dressing.

Now for a discussion on this HTML document.

Line 1 of what you typed in (<HTML>) tells the browser that what follows is an HTML document, and
the last line (</HTML>) tells the browser that the HTML document is finished. Line 2 (<HEAD>) is a
new tag which we will now take a look at this tag.
<HEAD> and </HEAD> tags
Each page of your web pages should have these tags. Statements (or tags) that give information to a
person visiting your website, or information such as those needed for a Search Engine are placed
between the <HEAD> and </HEAD> tags. Thus the HEAD part of a document provides information
about the document. You do not see this information displayed on the browser screen. It can be seen by
choosing DOCUMENT SOURCE from the VIEW menu of your browser. The HEAD tag must not
contain any text or normal markup tags. If it does, the browser will assume that it is in the BODY part of
the document (studied below). The HEAD tag can actually be omitted, but only if you group all the tags
that go in it at the top of the document. To avoid any potential problems, I would suggest that you
include the HEAD tag in your own documents. If you go back to my home page and choose
DOCUMENT SOURCE from the VIEW menu, you will see other statements between the <HEAD> and
</HEAD> tags. Take me back there now. We will study these statements in a future lesson when we
learn how to get your web pages on the World Wide Web.
<TITLE> and </TITLE> tags
One of the statements that must included between the <HEAD> and </HEAD> tags is the TITLE of
your web pages. The title in our example (line 3) is "WEB PAGE DESIGN - BASIC TAGS". Notice
that this title is placed by the browser at the very top of the screen - above the menu choices. In Netscape
it reads:
Netscape-[WEB PAGE DESIGN - BASIC TAGS]
Thus Netscape has added its name to the title. The TITLE of your website or of your web page must
occur between the <TITLE> and </TITLE> tags and you are only allowed one TITLE element per page.
The information you provide in the title is also used to label the bookmark entry for your web page and
is also a caption in search engine results. Therefore you should take time to make up a good descriptive
title for each of your web pages. You will notice that each of my lessons has its own title that describes
in general the content of the lesson. Because we do not want the title to be displayed on the browser
screen, the <TITLE> and </TITLE> tags must be placed between the <HEAD> and </HEAD> tags
<BODY> and </BODY> tags
After the title comes the main body of your Web page. It contains all the text and tags. It is the part that
will be displayed on the browser screen. Thus the BODY element contains the actual contents of the

document. Of course the tags will not be displayed on the browser screen. The tags only tell the browser
how to display the information. The body of each of your Web pages should be declared with BODY
tags. <BODY> tells your browser that what follows is to be the body of the Web page and </BODY>
tells the browser that the body part of the page has ended. Thus the <BODY> and </BODY> tags are
container tags, containing the body of your document. The BODY tag is also an optional tag. If you
place all the HEAD elements first, the browser will know where the actual document body begins. I
believe it is still a good rule to include the BODY tag. I like the idea of declaring things for what they
are. This way there will be no confusion for any early or ancient browser that relies on these
declarations.
Now here is the above HTML document again with the lines in the body numbered for later discussion
purposes, along with the results when viewed in the browser. Below the results is a discussion of the
BODY part of the document and some questions for you to answer.
<HTML>
<HEAD>
<TITLE>WEB PAGE DESIGN - BASIC TAGS</TITLE>
</HEAD>
<BODY>
Line 1: Hi, my name is John Gilson.<BR>
Line 2: This is my first attempt at a Web page.<HR>
Line 3: Here is a riddle for you.
Line 4: <P>Why did the lobster blush?<HR>
Line 5: Because it saw the salad dressing.<BR><BR><HR>
</BODY>
</HTML>
Hi, my name is John Gilson.

This is my first attempt at a Web page.
Why did the lobster blush?
Because it saw the salad dressing.
Discussion

Notice the <BR> at the end of line 1. It simply tells the browser to drop down to the next line. The
<HR> tag at the end of line 2 placed the first line across the page. Notice that the <HR> tag does not
place any blank lines (empty rows) above or below the Horizontal Rule.
Problem 2: Why is the <P> tag at the beginning of line 4 ("Why did the lobster blush?") and not at the
end of line 3 ("Here is a riddle for you.")?
| Click here to go to the answer section |
The second line across the page was placed by the <HR> tag at the end of line 4.
I wanted to leave a blank line before the third and last Horizontal Rule is placed by the browser across
the page. I did this with two <BR> tags (line 5). The first <BR> tag tells the browser to go to the
beginning of the next line. The second <BR> tag again tells the browser to go to the beginning of the
next line which in effect places a blank line on the screen. The <HR> tag then placed the line across the
page.
Problem 3: One <P> has the same effect as two <BR> tags since the <P> tag forces a blank line before
continuing on. Why then did I not simply use one <P> tag instead of two <BR> tags at the end of line 5?
Problem 4: What does HR stand for in <HR>
Problem 5: Do all tags require a beginning and an ending tag?
Problem 6: Must tags be written in capital (upper case) letters?
Problem 7: When you typed in the above HTML document, some of the tags were indented (such as
<HEAD> and <TITLE>). Do you have to indent tags?
IN SUMMARY, WE HAVE:
<HTML>
<HEAD>
<TITLE>the title or name of your page goes here </TITLE>
</HEAD>
<BODY>
.
.
.

all your web page work goes here in this section

.
.
.
</BODY>
</HTML>
Problem 8: Based on your knowledge of the basic tags, write down exactly what you think will be
printed by your browser for the following HTML document. The answer is given in the answer section
(no cheating now). Let's assume that the <HTML>, <HEAD> and <TITLE> tags have already been
typed in.
<BODY>
I am learning a lot about
designing my own web pages.

</BODY></HTML>
| top | | bottom |
ANSWERS
1. Yes. All tags are terminated in the reverse order to the way in which they were activated. These
tags satisfy the principle of "LIFO".
2. I could have placed the <P> tag at the end of line 3 as in:
Here is a riddle for you.<P>
It would have given the same results. However, this is not considered good form in HTML. The
<P> tag stands for Paragraph and so implies the beginning of a new paragraph. It does not imply
the end of a paragraph. Therefore you should never end a line or paragraph with a <P> tag. You
end lines with <BR> as it tells the browser to BReak here and begin a new line. Of course you
can also end any line or paragraph with an <HR> tag. (Actually there is a </P> tag that can be
used to end a paragraph. This </P> tag isn't used very much, but it does have its uses and we will
take a look at the </P> tag when we study centering text in Lesson Four.)
3. Two <BR> tags may have the same effect as one <P>, but we have reached the end of the HTML
document. There are no more paragraphs and so the <P> tag should not be used as it denotes the
beginning of a new paragraph.
4. Horizontal Rule.

5. No. <BR>, <P> and <HR> are three examples that do not require an ending tag. They are also
known as "stand alone tags".
6. No. You can write in lower case letters if you want to. The browser does not care. I use upper
case letters so that I can easily and quickly identify tags from text when working with my web
pages.
7. No. You do not have to indent tags. I only do it for visual effects to quickly spot certain tags and
to be able to tell tags from the text. Indenting (and leaving blank lines) is also good for setting
apart sections of the document for later searching and editing purposes.
8. This is how the browser will interpret this HTML document:
I am learning a lot about designing my own web pages.
Since there are no <BR> or <P> tags in the document, the browser is unable to determine when
you want the line to end or when you want blank lines. That is why everything was printed on the
same line as one statement. The browser can only read text and has to be told through the use of
tags what to do with the text. You can use this to your advantage when making up your web
pages. You can use blank lines to section off portions of your work. This will make it easier to
spot the sections later when you are looking for them. Also, the large space between the words
"a" and "lot" was ignored. You can insert as many spaces as you like, but the browser only allows
for one space between words and sentences. If you want more space between words or to indent
lines and paragraphs, there is a way to do it, and I will show you how in Lesson Five.
| Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Four |


LOGICAL TAGS - html tutorials in web page design by J. Gilson
LESSON FOUR - TAGS THAT AFFECT THE APPEARANCE OF

YOUR TEXT

| Designing your Web page | | Header tags | | Centering text | | Emphasizing text |
DESIGNING YOUR WEB PAGES
Just how should you design your web pages? Well, you should not design your pages only for
appearance. You also need to design your pages for content. For example, you could add color to
certain portions of text or you can highlight certain words with color to make them stand out. In your
browser, it may look great. However, many people still use browsers that do not support coloring
portions of text. So while it looks great in your browser, it will not give the same looks in other
browsers, and text that you thought were highlighted by color will not be highlighted in these other
browsers. Color is used to change the appearance of text. If a browser can't perform the appearance
change, it has no way to determine an alternative. As a result the color attribute is simply ignored.
Also, you may be able to fit a heading neatly on one line in your browser while in another browser, the
font size could be a little bigger and the heading will not fit on one line. Or the reverse could be true, a
heading may not fit on one line in your browser, but in another browser with a little smaller font size, it
will fit into one line. Thus the appearance of the heading in your browser could be different in another
browser. Also keep in mind that some browsers and servers do not support graphics. A user also has the
option of turning off graphics to speed up the loading of web pages. Of course we still want our web
pages to be pleasing to the eye but we need to keep in mind that how something looks in one browser
could look entirely different in another browser. One person told me how surprised she was to see her
web pages look so differently in another browser. She now designs her pages with this in mind.
Consider this example: Suppose you want to have something printed by the browser in italics to set it
apart from the rest of the text. Using the italics tag, you could tell the browser to "print these words in
italics". But what if someone's browser does not support the italics tag? The browser will simply not be
able to perform the requested "appearance" change and the tag will be ignored. The italics tag is a
Netscape extension tag that is not recognized by a number of browsers. Instead, it would be better to tell
the browser to "emphasize" the text through the "emphasis tag". In most browsers, this would be italics
but it could also be rendered as something else. In any event, the text will be emphasized in some

manner. The same is true for bolding text. If you tell the browser to bold a portion of text to make it
stand out from the rest of the text, you are assuming the browser will recognize the "boldface" tag. The
boldface tag is also a Netscape extension tag and so not recognized by a number of browsers. Instead, it
would be better to tell the browser to "strongly emphasize" the text. In most browsers this will be
boldface, but it could also be something else.
The "emphasis" and "strong emphasis" tags are "content based" markup tags and the above examples
illustrate why you should use "content based" markup tags to mark up your text. Content based markup
allows for browser independence. Knowing the meaning of a piece of text through a content based tag
allows a browser to pick the best way possible to display the text on the platform it is running. Tags that
are based on content and not on appearance are called LOGICAL TAGS. You are encouraged to use
logical tags because the browser can then pick the best way to display the text on the screen.
If all this sounds too confusing, don't quit on me. Just follow through on the following examples
involving logical tags. It should all become clear. Then I would suggest you come back and read again
this introduction on "Designing Your Web Pages".
| top | | bottom |
HEADER TAGS
Headings are controlled by HEADER tags. HEADER tags are logical tags and used extensively in
HTML documents to display headings. HEADER tags not only make your headings larger (or smaller),
they also bold the headings at the same time.
There are only six HEADER tags and they range from H1 to H6.
H1 produces the largest size heading and is called the "level 1 heading".
H6 produces the smallest size heading and is called the "level 6 heading".
To compare the different levels of headings, SWITCH to NOTEPAD and type in the following HTML
document (this will also allow you to experiment with the document):
<HTML>
<HEAD>
<TITLE>HEADING LEVELS</TITLE>
</HEAD>
<BODY>
<H1>THIS IS H1.</H1> THIS IS NORMAL SIZE.


<H6>THIS IS H6.</H6> THIS IS NORMAL SIZE.<HR>
</BODY>
</HTML>
Now SWITCH to your browser and load the document. This is what you should see in the browser
window:
THIS IS H1.
THIS IS NORMAL SIZE.
THIS IS H2.
THIS IS H3.
THIS IS H4.
THIS IS H5.
THIS IS H6.
Note the following points:
1. <H1> gives the largest size heading while <H6> gives the smallest size heading.
2. In most browsers, the HEADER tags print the headings in boldface. A Level 1 heading (H1),
because it is the largest heading, is considered to be the most prominent or most important

heading. The Level 2 heading (H2) is the second most important heading. That is, it is more
prominent than a Level 3 heading (H3) but less prominent than a Level 1 heading.
3. Good HTML form dictates that HEADER tags should be used in hierarchical order. Don't jump
all over the place with your heading levels. For example, if you use a Level 2 heading for a title
or heading, then the next size to use for a sub-title would be a level 3 heading.
Study the above HTML document again and answer the following problems. The answers are given at
the end of this lesson.
Problem 1: Which heading size is closest to the normal size?
Problem 2: Compare the document file with the results in your browser. Something does not seem to add
up. From what you have learned so far in these lessons, state some of the inconsistencies. These will be
fully explained in the answer section.
Final remarks on the HEADER tags:
● After all that has been said here about the header tags, keep in mind that they are logical tags.
This means that you cannot assume, for example, that H1 means "very large bold text" in every
browser. It will in most browsers - but you can't assume true in all browsers. It can be anything
the browser chooses it to be - which could be defined by the viewer.
● Some search engines give words appearing in headers more importance in their index. The
headers are often used by these search engines to build an "outline" of the document which
appears in the search results.
| top | | bottom |
CENTERING TEXT
You can see from my lessons that I make good use of centering headings and titles. The center command
is: ALIGN="CENTER" (no spaces around the equal sign) and must be used in conjunction with a
HEADER tag or the PARAGRAPH tag as in:
<H2 ALIGN="CENTER">a heading goes here</H2>

or
<P ALIGN="CENTER">a paragraph or block of text goes here</P>

Here are some points to remember concerning these two centering commands.
1. In the first example, a "heading" is centered (as indicated by the H2), and remember that because
we are using a Header tag, a blank line will automatically be inserted before and after the
heading. For this section, my heading "CENTERING TEXT" was centered using the H3 Header
tag.
2. The second example is used to center whole portions of text - which could be several lines of
text.
In other words, we are centering a "paragraph"

or "block of text" with each line centered on the screen
just as these lines are centered (hopefully).
To end centering a block of text,
we use the </P> tag which is the closing paragraph tag.
This </P> tag is a new tag for us
and one that you may not end up using all that often.
But it does have its uses and this is one of them.
Choose DOCUMENT SOURCE from the VIEW menu
if you want to see how I centered these lines.
3. In ALIGN="CENTER", the ALIGN part is called an attribute. In the first example, ALIGN is the
attribute for the Header tag. In the second example, ALIGN is the attribute for the Paragraph tag.
An attribute provides extra information about the tag and the text it encloses. An attribute can
have a value. In our two examples, the ALIGN attribute has the value "CENTER". In the first
example, the browser is told to place (align) the heading in the "center" of the line. If a viewer
should make the browser screen smaller, the heading will still remain centered in whatever the
new screen size is. In the next example, a heading will be centered. When you do the example, be
sure to try also ALIGN="RIGHT" and ALIGN="LEFT" (which is the default value if the ALIGN
attribute is not used).
4. The value must be enclosed in quotation marks if it contains anything more than letters, numbers,
hyphens and/or periods. Otherwise placing the quotes around the value is optional. Since our two
examples have only letters in the value ("CENTER"), the quotes may be omitted. If you are ever
in doubt about the quotes, then just put them in. Of course the attribute and value do not have to
be written in upper case (capital) letters either. They may be written in lower case. The maximum
length of an attribute and its value is 1024 characters including the quotation marks if used.
5. ALIGN="CENTER" is also called a "command within a command". The first command

(ALIGN), tells the browser to align something and the second command (CENTER) tells the
browser to align it in the center.

6. Sometimes you will see documents use only the CENTER command (no ALIGN="CENTER") to
center text as in:
<CENTER>
.
.
all lines or blocks of text will be centered between these two tags
.
.
</CENTER>
<CENTER> is one of the first Netscape extension tags and, as is the case with many Netscape
extension tags, not supported by a number of browsers. ALIGN="CENTER" is part of HTML 3.2
and already accepted by most browsers. You are therefore strongly encouraged to use
ALIGN="CENTER" for centering headings and paragraphs of text. If a browser does not support
the CENTER tag, the headings and text will simply be left justified. We will be using the
ALIGN="CENTER" command in the next example.
| top | | bottom |
EMPHASIZING TEXT
There are two ways to emphasize text that I want to introduce here. These were alluded to at the
beginning of this lesson under "Designing Your Web Pages". One is called ITALICS and the other is
called BOLDFACE. Let's study both of them with the following example, which will also include the
centering of the heading.
Please SWITCH to NOTEPAD and type in the following HTML document:
<HTML>
<HEAD>
<TITLE>OUTDOOR LIVING - ONTARIO</TITLE>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">OUTDOOR LIVING IN ONTARIO</H2>
<H3>POINTS OF INTEREST</H3><HR>
<P>Northern Ontario:
<P><STRONG>Five Mile Lake Provincial Park</STRONG>
<P><EM>1.5 square miles.</EM> Camping, fishing (<EM>walleye, northern pike, brook trout</EM>),
canoeing, self-guided nature trails.

<P><STRONG><EM>Recommended</EM></STRONG> <HR>
</BODY></HTML>
Now load the document into your browser and your web page should look like the following:
OUTDOOR LIVING IN ONTARIO
POINTS OF INTEREST
Northern Ontario:
Five Mile Lake Provincial Park
1.5 square miles. Camping, fishing (walleye, northern pike, brook trout), canoeing, self-guided nature
trails.
Recommended
Here are some questions for you to answer on the above example followed by a discussion on the
emphasis tags.
Problem 3: Which tag appears to "bold" text?
Problem 4: Which tag tells the browser to write the text in italics?
Problem 5: How was the word "Recommended" printed?
Problem 6: Why is there no <BR> tag at the end of the line "OUTDOOR LIVING IN ONTARIO" or a
<P> in front of the line "POINTS OF INTEREST" of the document you typed in?
<EM> = EMPHASIZE TEXT

<EM> is used to emphasize text. It is a logical tag and so describes the meaning of the text to be
displayed rather than how the text is to be displayed. In most browsers, the meaning is italics. However,
if the browser doesn't support italics or the viewer changes the meaning, the browser will pick the best
alternative way to display the text on the screen.
<STRONG> = STRONGLY EMPHASIZE TEXT
<STRONG> is also a logical tag. It is used to strongly emphasize text. <STRONG> is distinct from
<EM>. In most browsers, STRONG is identical to boldface. If a browser does not recognize boldface or
if the viewer changes the meaning of STRONG, then the browser will pick the best alternative from the
platform it is running on.
Using <B> for Boldface or <I> for Italics (Netscape Extension Tags)
<STRONG> is accepted by all browsers as a way of strongly emphasizing text which in most cases is
boldface. Instead of the <STRONG> and </STRONG> tags for strongly emphasizing text, you will
sometimes see <B> and </B> for bolding text. While <STRONG> is a "Logical Style Command", <B>
is not. <B> is a "Physical Style Command". A physical style command cannot be rendered differently.
Therefore if a browser does not accept the <B> tag, then your text will simply not be bolded as the
browser has no alternative way to display them on the screen.
The same reasoning is also be applied for using the tag <I> to print in italics instead of the <EM> tag.
Now if for some reason you want to ensure only italics or boldface and nothing else, then use the italic
font <I> or the boldface font <B>.
Here is your final problem to see how well you learned the information given in this lesson.
Problem 7: Make up an HTML document in NOTEPAD that gives the following web page in the
browser. In other words, when you are finished, your browser should show exactly the following (the
answer is given in the answer section):
TOSSED SALAD
Simple and attractive
1 large bunch of greens, preferably mixed

10 cherry tomatoes quartered
DRESSING
1/2 cup Mayonnaise
2 tbsp. Minced dill or sweet pickle
1 tsp. Prepared mustard
1/4 tsp. Onion powder
1 tsp. Granulated sugar
1 tbsp. Milk
Have greens ready in separate containers in refrigerator.
Dressing: Combine all ingredients together in a small bowl. Mix well. Spoon over greens. Toss to coat.
Add tomato and toss together lightly. Serves 8
| top | | bottom |
ANSWERS
1. <H4> appears to be closest to the normal size (at least in my browser).

2. First of all, if you look at the lines you typed in between the <BODY> and </BODY> tags, you
did not type in any <BR> or <P> commands. For example, we did not type in a <BR> tag
between "THIS IS H1" and "THIS IS NORMAL". Yet they were printed by the browser on
separate lines. They should have been printed on the same line. Also, there is no <BR> tag at the
end of any line and so everything should have been printed by the browser on one long line.
Well, the reason for all this is that HEADER tags (such as <H2>) are very fussy. They don't want
anything else on the same line with them. That is why "THIS IS NORMAL SIZE" was printed on
a separate line. Also, the HEADER tags are not very sociable. They like to be separated from the
rest of the crowd and so a HEADER tag will automatically place a blank or empty line above and
below the heading. That is why you also see a blank line above and below each heading tag. For
this reason, you do not need <BR> and <P> tags with HEADER tags. Of course, if you want
additional blank lines before or after a HEADER tag, you will then need to use <BR> or <P>
tags.
3. <STRONG>. Notice that the tag </STRONG> ends the "bolding" of text.
4. <EM> (which stands for EMphasize). Again, </EM> is needed to end italics.
5. It was printed in both boldface and italics.
6. We do not need <BR> or <P> tags because the line "Outdoor Living In Ontario" is a heading
(H2) and a Header tag provides its own line break and blank lines above and below the heading.
A new paragraph is always assumed to begin after a Header tag.
7. <HTML>

<HEAD>
<TITLE>SALAD RECIPE</TITLE>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">TOSSED SALAD</H2>
<H3 ALIGN="CENTER"><EM>Simple and attractive</EM></H3><HR>
<P>1 large bunch of greens, preferably mixed<BR>
10 cherry tomatoes quartered
<P><STRONG>DRESSING</STRONG><BR>
1/2 cup Mayonnaise<BR>
2 tbsp. Minced dill or sweet pickle<BR>
1 tsp. Prepared mustard<BR>
1/4 tsp. Onion powder<BR>
1 tsp. Granulated sugar<BR>
1 tbsp. Milk
<P><EM>Have greens ready in separate containers in refrigerator.</EM>
<P><STRONG>Dressing:</STRONG> Combine all ingredients together in a small bowl. Mix
well. Spoon over greens. Toss to coat. Add tomato and toss together lightly. <EM>Serves 8</
EM>
</BODY></HTML>
| Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Five |


INDENTING AND LISTS - html tutorials in web page design by J. Gilson
LESSON FIVE - INDENTING and CREATING SPACES WITH

and CREATING LISTS

| Indenting a line and creating spaces with | | Creating a list |

| Creating an Unordered List | | Creating an Ordered List | | Creating a Definition List |
| Changing appearance of bullets and numbers |
INDENTING A LINE and CREATING SPACES with
Notice that I indented the beginning of this paragraph. Remember that your browser normally prints
text left justified and only leaves one space between words and sentences. To force extra spaces or
simply to indent a line, use the following command. It works.

These six characters will create a space as if you pressed the space bar. I used 8 of them to indent
this paragraph as in:
        These six characters will ...
In , the nbsp stands for non-breaking space character. is simply known as the space
character. How many of these non-breaking space characters you use in a row is up to you. Use
whatever number suits your purpose. Note that the "nbsp" must be in lower case letters. &NBSP; will
not work. The character "&" is pronounced "ampersand" and these 6 characters form an ampersand
command. We know that browsers read commands inside angle brackets (< >). Well, browsers also
read commands between the "&" and ";" (that is, between the ampersand and semicolon). Ampersand
commands are used to create special characters not found on the keyboard such as the copyright symbol,
the trademark symbol, the symbol for degrees, etc. All you need to know is that special code that goes
between the "&" and the ";".
Here are some popular symbols and their ampersand commands that work in all browsers (commands
for subscripts and superscripts are covered in Lesson 17):

Non-breaking space
Copyright © ©
Trademark ™
® or
Registered ®
®
Less Than < <
Greater Than > >
Ampersand & &
Quote " "
Cent ¢ &#162
One quarter ¼ &#188
One half ½ &#189
Three quarters ¾ &#190
Degrees ° &#176
Larger middle dot • &#149
If all you want to do is indent a line or paragraph, using the ampersand command is quite simple. But the
ampersand command can also be cumbersome to work with. For example, try the following first
problem for this lesson.

Problem 1:SWITCH to NOTEPAD and make up an HTML document that gives the following output in
your browser. Indent my address 10 spaces (10 commands) from the left side of the screen, and
use 30 spaces between the "n" in Gilson and the "W" in William. Do the best you can to line everything
up. The answer is given in the answer section at the end of this lesson
John Gilson William Somebody

Pauline Johnson Collegiate 120 Somestreet
627 Colborne St. East Someplace, Somestate
Brantford, Ontario U.S.A. 45061
Canada, N3S 3M8
| top | | bottom |
CREATING A LIST
Lists are often used to present information in an easy to read fashion. Lists can also be used to indent
information. Lists can be bulleted, numbered or printed without bullets and numbers. It should also be
noted that in any type of list, you can still use the line break and paragraph tags and the normal text
markup tags to emphasize text, etc.
There are three types of lists:
● UNORDERED LISTS (uses bullets)

● ORDERED LISTS (uses numbers)
● DEFINITION LISTS (no numbers or bullets).
| top | | bottom |
CREATING AN UNORDERED LIST
Unordered Lists are bulleted lists. You use the opening tag <UL> to indicate the beginning of an
Unordered List. To indicate the end of the Unordered List, you use the ending tag </UL>. Furthermore,
each item in your bulleted list must begin with the tag <LI>. <LI> stands for List Item. This is how you
do it then:

<UL>
<LI>item
<LI>item
<LI>item
</UL>
To see an unordered list in action, SWITCH to NOTEPAD and type in the following HTML document.
When finished, save the document, SWITCH back to your browser and LOAD the document file so you
can see it in action and also to experiment with the document by trying different things. NOTE: Once a
document has been loaded into the browser, it is not necessary to choose FILE and then LOAD FILE
each time you want to check how your document looks. If your document is already in the browser, then
just click on the RELOAD button on the menu bar (assuming you have that option). This will reload
your document so you can examine your updates. Now back to the task at hand. Type in the following
HTML document which we will call document #1 as it will also be used later for ordered and definition
lists.
This is document #1:
<HTML>
<HEAD>
<TITLE>SAFETY TIPS </TITLE>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H2>
<UL>
<LI>Be able to swim
<LI>Wear a life jacket at all times
<LI>Don't stand up or move around
<LI>Don't overexert yourself
<LI>Use a bow light at night
</UL>
</BODY></HTML>
All my examples are for illustration purposes only. They should not be considered complete lists. This is
the way your document should look:
SAFETY TIPS FOR CANOEISTS

● Be able to swim
● Wear a life jacket at all times
● Don't stand up or move around

● Don't overexert yourself

● Use a bow light at night
Notice from the above results that:
1. <UL> denotes the beginning of an Unordered List

2. </UL> denotes the end of the Unordered List
3. each <LI> denotes the next item in the list to receive a bullet
4. the bullets are round and solid
5. each item in the list has been indented 3 or 4 spaces from the left side of the screen
6. no </LI> tag is required - although you can use it to signal the end of each List Item. However,
each new <LI> implies that the previous List Item is finished.
7. no <BR> tag is needed as each new LI command forces a line break before printing the next
item. Try experimenting with <BR> after a list item or a <P> tag before a list item.
You can also have lists within lists (nested lists). For example, the following HTML web page (which
we will call document #2) is the same as the last one, except that for the third item in the list, I have
added some statements on what to do if the canoe tips. What to do if the canoe tips will form a second
list of items within the first list. SWITCH to NOTEPAD and make the necessary changes so that the
web page now looks like the following.
Document #2 is:
<HTML>
<HEAD>
<TITLE>SAFETY TIPS</TITLE>
</HEAD>
<BODY>
<UL>
<LI>Be able to swim
<LI>Don't stand up or move around. If canoe tips,
<UL>
<LI>Hang on to the canoe
<LI>Use the canoe for support and
<LI>Swim to shore
</UL>


</UL>
</BODY></HTML>
I indented the second list for emphasis. You don't have to do that. Here is the browser output for this
web page.

● Be able to swim
● Wear a life jacket at all times
● Don't stand up or move around. If canoe tips,
❍ Hang on to the canoe
❍ Use the canoe for support and
❍ Swim to shore
● Don't overexert yourself

● Use a bow light at night
Notice that:
1. the second list was indented more than the first list
2. the second list also has bullets. In many browsers, they will be round, hollow bullets and not solid
as in the first list, or they may be square bullets. For these browsers, if you have a third list, you
will find the bullet changing to something else. Each time you move in a tier, the bullet style
changes. Try it. In some low level and older browsers, the bullets will all be round no matter
what tier you move to. This also illustrates the point that you must design your web pages on the
basis of content and not solely on the basis of appearance. For example, if you want bullets, have
them, and then let each browser handle how it will print them. If you still want square bullets for
those browsers that can handle them, that's fine too. Just remember that browsers that can't handle
them will simply print them their way.
3. for each <UL>tag, you need a </UL> tag. If you want lists within lists within lists, just remember
to follow the LIFO principle (Last In, First Out principle or in this case the last <UL> tag
activated must be the first tag terminated).
If you want to have your list line up more in the center of the page, the ALIGN="CENTER" command
won't work as it would center each list item. Thus your list will not look very good. To move your
bulleted list more to the center of the screen, simply use more <UL> tags as in:
<UL><UL><UL>
<LI>List Items
</UL></UL></UL>

| top | | bottom |
CREATING AN ORDERED LIST (A NUMBERED LIST)
An Ordered List is a numbered list where the numbers are in order beginning with the number 1. In
other words, instead of using bullets, numbers are used to number each item in the list. You treat an
Ordered List in the same way as an Unordered List, except that you use <OL> instead of <UL>. OL
stands for Ordered List.
To see an ordered list, let's use document #1 and simply change the <UL> tag to <OL> and the closing </
UL> tag to </OL>. So SWITCH to NOTEPAD, load in document #1 and make the two changes so that
the web page now looks like:
<HTML>
<HEAD>
</HEAD>
<BODY>
<OL>
<LI>Be able to swim
<LI>Don't stand up or move around
</OL>
</BODY></HTML>
This is the way your web page should now look:

1. Be able to swim
2. Wear a life jacket at all times
3. Don't stand up or move around
4. Don't overexert yourself
5. Use a bow light at night
Notice the similarities here to that of the Unordered List in that:

1. <OL> denotes the beginning of an ordered or numbered list

2. </OL> denotes the end of the ordered list
3. each <LI> denotes the next item in the list to receive a number
4. the numbers are in sequence (in order) - hence the name Ordered List)
5. each item in the list has been indented 4 or 5 spaces from the left side of the screen
6. no </LI> tag is required to end a list item.
7. no <BR> tag is needed to force a line break at the end of a list item.
8. With ordered lists, if you insert another item into the list, or if you delete an item from the list,
the list will automatically be renumbered (try it).
9. A list item can take up more than one line. These nine items are an Ordered List and note that list
items 8 and 9 take up more than one line and everything still nicely lines up. This is also true for
Unordered and Definition Lists (studied below)
COMBINING UNORDERED AND ORDERED LISTS
We can combine unordered and ordered lists. To see this, let's use HTML document #2 where we had a
list within a list. We will make some changes so that we will have a numbered list for the main items
and a bulleted list for the items on "what to do if the canoe tips". Here is the revised document #2.
<HTML>
<HEAD>
</HEAD>
<BODY>
<OL>
<LI>Be able to swim
<LI>Don't stand up or move around. If canoe tips,
<UL>
<LI>Hang on to the canoe
<LI>Use the canoe for support and
<LI>Swim to shore
</UL>

</OL>
</BODY></HTML>

Here is the browser output for this web page.

1. Be able to swim
2. Wear a life jacket at all times
3. Don't stand up or move around. If canoe tips,
❍ Hang on to the canoe
❍ Use the canoe for support and
❍ Swim to shore
4. Don't overexert yourself

5. Use a bow light at night
Notice in the output that the main list is numbered and the secondary list is bulleted.
| top | | bottom |
CREATING A DEFINITION LIST (NO BULLETS OR NUMBERS)
A Definition List also manipulates text for you. Unordered Lists and Ordered lists are "single item" or
"one tier" lists because each <LI> creates one list item. A Definition List is a "two item" or a "two tier"
list as you will see in the next example.
The following example illustrates a DEFINITION LIST and we will not use one of our previous
examples for this. SWITCH to NOTEPAD and type in the following new document.
<HTML>
<HEAD>
<TITLE>TRIP PLANNING</TITLE>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">SUMMER CAMPING TRIP PLANNING</H2><HR>
<DL>
<DT>Winter
<DD>Write for maps and travel brochures
<DD>Read camping books
<DD>Prepare budget and equipment list
<DT>Spring
<DD>Visit camping shows

<DD>Buy essential items

<DD>Make reservations
<DT>Week Before Trip
<DD>Have vehicle serviced
<DD>Vaccinate pets
<DD>Buy traveler's cheques
<DD>Cancel newspaper and other deliveries
<DT>Day before trip
<DD>Load vehicle
</DL>
</BODY></HTML>
When you execute this HTML document, it should look like the following:
SUMMER CAMPING TRIP PLANNING
Winter
Write for maps and travel brochures
Read camping books
Prepare budget and equipment list
Spring
Visit camping shows
Buy essential items
Make reservations
Week Before Trip
Have vehicle serviced
Vaccinate pets
Buy traveler's cheques
Cancel newspaper and other deliveries
Day before trip
Load vehicle
1. DL stands for Definition List and <DL> denotes the beginning of a Definition List. It also tells
the browser that a two item list or a two tier list is coming up.
2. </DL> denotes the end of a Definition List
3. DT stands for Definiton Term. It represents the set of first items in the list or the first tier. Each
<DT> defines a new term in the list. Note that these terms are not indented.
4. The DT tag may only contain text-level elements (definition of text-level elements given below).

5. The DT tag has an optional end tag (</DT>), as it is always clear from the context where the
tag's contents end.
6. DD stands for Definition Description. It gives the set of second items in the list or the second tier.
Note that the second tier is indented from the first tier (although this is not a guarantee in all
browsers) and that the second tier describes the items in the first tier. That is, the second tier is a
description of the first tier.
7. The DD end tag (</DD>) is also optional, as it is clear from the context where the tag's contents
end.
8. DD may contain block-level elements as well as text-level elements. There are two types of
elements in the BODY section of a web page and they are block-level elements and text-level
elements. Elements that generate a new paragraph such as a header tag (for example <H1>) or a
paragraph tag (<P>), are called block-level elements. Text-level elements are elements that do
not generate a new paragraph (examples are <EM> and <STRONG>).
A DL is used to provide a list of items with associated definitions. Each item should be placed in a DT
and its definition goes into a DD directly following it. If you are still confused, consider this brief
explanation of the Definition List. Each <DT> gives a term and each <DD> describes or supports that
term.
While it is legal to have a DL with only DT tags or with only DD tags, you are not encouraged to do
this. It really doesn't make sense, for example, to have a definition without a term. Also, do not use the
Definition List to indent a block of text. It is not good HTML form and indenting a section of text this
way is not guaranteed to work. It is considered invalid HTML.
Here is a problem that will keep you busy for awhile. Be sure to try it though. There's nothing like
learning by doing.
Problem 2: This problem involves all three types of lists (Unordered, Ordered and Definition Lists).
Make up a document that will give the following web page in your browser. It looks rather long, but just
start at the beginning and work your way slowly through it. The answer is given in the answer section.
FINDING YOUR WAY IN THE WILDERNESS

1. Seek expert advice about the area
❍ Get the best maps. On the map select
■ landmarks
■ mountains
■ lakes
❍ Get a good compass and
■ check slope of land
■ check direction of flowing streams
2. If there is snow on the ground, stay close to:

❍ roads
❍ trails and
❍ waterways
If you are inexperienced

do not travel alone
do not travel at night
If you do get lost
Don't panic
Don't wander in the dark
Give distress signals at regular intervals such as:
❍ three shouts
❍ three small fires
❍ three blasts of a whistle
❍ three rifle shots
It may be wise to sit tight and wait for searchers
| Click here to go to the answer |
| top | | bottom |
CHANGING THE STYLE OF YOUR BULLETS AND NUMBERS
The TYPE attribute
You can use the TYPE attribute to control the "appearance" of the bullets and also to control a numbered
list. However, the TYPE attribute is a Netscape extension and new to HTML 3.2. It is therefore not yet
supported by a number of browsers. So if you decide to use the TYPE attribute, you should be aware
that it will lose its effect in these other browsers.
CHANGING THE APPEARANCE OF BULLETS
Here is the way to change your bullets to SQUARE bullets:
<UL TYPE="SQUARE">
<LI>item 1
<LI>item 2
<LI>item 3
</UL>

If your browser supports the TYPE attribute, you should see the following square bullets. If your bullets
are not square, then your browser does not support the TYPE attribute.
■ item 1
■ item 2
■ item 3
You can also change the appearance of your bullets to hollow or open bullets with:
<UL TYPE="CIRCLE">
To get the round solid bullets back again (which is the default value), use:
<UL TYPE="DISC">
CHANGING THE APPEARANCE OF AN ORDERED LIST
We can also change the ordered list to something other than Arabic numbers (1, 2, 3, etc.). For example,
to change to a capitalized Roman Numeral numbered list, it is:
<OL TYPE="I">
<LI>item 1
<LI>item 2
<LI>item 3
</OL>
Note that the "I" is a capital or upper case "I" and not the number 1. The above example will give the
following output in the browser:
I. item 1
II. item 2
III. item 3
The following replacements for the numbered list can also be made:
<OL TYPE="i"> for lower case Roman Numerals (i, ii, iii, iv, and so on).
<OL TYPE="A"> for capital letters (A, B, C, and so on).
<OL TYPE="a"> for lower case letters (a, b, c, and so on).
Note that <OL TYPE="1"> (the number 1) is the default for listing the items as 1, 2, 3, and so on.

The START attribute
The START attribute like the TYPE attribute is new to HTML 3.2 and so do not assume it will work for
your website visitor.
The START attribute is used to begin an Ordered List with any number or letter. For example,
<OL START="3">
as in:
<OL START="3">
<LI>item 3
<LI>item 4
<LI>item 5
</OL>
will begin numbering the list with the number 3 as in:
3. item 3
4. item 4
5. item 5
Also, try the following if your browser supports these attributes:
<OL TYPE="I" START="3">

will begin numbering with Roman Numeral III.
<OL TYPE="i" START="3">

will begin numbering with Roman Numeral iii.
Problem 3: What do you think <OL TYPE="A" START="4"> will do to the list?
Problem 4: What will <OL TYPE="a" START="5"> do to the list?
| Click here to go to the answer |
The VALUE attribute
The VALUE attribute is used to change the number WITHIN A LIST and is used as part of the LI
command. The following example numbers the statements in the list as 1, 2, 3, 7, 8 as shown below the

document.
<OL>
<LI>This is List Item 1
<LI VALUE="7">This is List Item 7
</OL>
which gives the following results:
1. This is List Item 1

The COMPACT attribute
The COMPACT attribute basically tells the browser that the list items are short so that it can make the
list more compact. For example, the browser could put more than one list item on a line. The
COMPACT attribute is not widely implemented.
| top | | bottom |
ANSWERS
1. <HTML>
<HEAD>
<TITLE>Names and Addresses</TITLE>
</HEAD>
<BODY>
           John Gilson


   William Somebody<BR>
           Pauline Johnson
Collegiate          120 Somestreet<BR>
           627 Colborne St. East


Someplace, Somestate<BR>
           Brantford, Ontario

       U.S.A. 45061<BR>
           Canada, N3S
3M8<BR>
</BODY></HTML>
You can see from the above document why many people will use an alternate method such as
table (Lesson Twelve) to display information in columns.
2. This is how I did it. You may have found another way that yields the same results.
<HTML>
<HEAD>
<TITLE>Wilderness Adventures</TITLE>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">FINDING YOUR WAY IN THE WILDERNESS</H2>
<OL>
<LI>Seek expert advice about the area
<UL>
<LI>Get the best maps. On the map select
<UL>
<LI>landmarks
<LI>mountains
<LI>lakes
</UL>
<LI>Get a good compass and
<UL>
<LI>check slope of land
<LI>check direction of flowing streams
</UL>
</UL>
<LI>If there is snow on the ground, stay close to:
<UL>
<LI>roads
<LI>trails and
<LI>waterways
</UL>
</OL>
<DL>
<DT>If you are inexperienced
<DD>do not travel alone

<DD>do not travel at night

<DT>If you do get lost
<DD>Don't panic
<DD>Don't wander in the dark
<DD>Give distress signals at regular intervals such as:
<UL>
<LI>three shouts
<LI>three small fires
<LI>three blasts of a whistle
<LI>three rifle shots
</UL>
<DD>It may be wise to sit tight and wait for searchers
</DL>
</BODY></HTML>
3. The list will begin with the letter "D" (as in D, E, F, etc.).
4. The list will begin with the letter "e" (as in e, f, g, etc.).
| Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Six |


CREATING LINKS - html tutorials in web page design by J. Gilson
LESSON SIX - CREATING LINKS

| Links in general | | Links within a page - page jump |

| Linking to another page in your website |
| Linking to another page anywhere in the world | | Using a link button |
| MAILTO: (sending an e-mail) | | Placing your own subject in emails |
| Placing a message in the body of emails |
LINKS
You use links to:
1. jump from section to section within the same web page (also called Page Jump)
2. link to a different page within your own website (such as my linking this lesson to the next lesson
or to my home page)
3. link to another web page or website anywhere in the world
There are different ways to provide these links. The three most common ones are:
1. clicking on a word, phrase or sentence - such as those you see at the top of each of my lessons
(and also on my home page to choose the lessons).
2. clicking on a button - such as those you see at the very end of this lesson to take you back to my
home page or to the next lesson.
3. clicking on an image (that is, a picture or graphic). We will study images in Lessons Seven and
Eight.
| top | | bottom |
LINKS WITHIN A PAGE - PAGE JUMP

Notice at the top of this page I offer the choice of either reading this lesson in its entirety or choosing a
topic and going directly to that topic. If you were to print out this lesson, it would take approximately 11
sheets of letter size paper. On a browser screen, it can take some time scrolling to find a specific section
or topic. Many viewers do not want to waste a lot of time searching and so offering page jumps will
make this process easier. So with Page Jumps, you have the option of jumping to different sections or
topics without having to search through the entire web page for the topic.
Notice that at the end of each topic or section, I also offer the choice of going back to the top of the
page or to the bottom of the page. So you can see that I make good use of page jumps.
To offer a page jump, you need two items:
1. The command that points or sends the browser to another section on your web page.
2. The place or point on the page where you want the browser to jump to.
Here is the basic link command that points to another section on your web page.
<A HREF="#linkname">Click on these words</A>
Where "linkname" is the name of the section you are jumping or linking to. An example of a page jump
is the following (to return back here, just click on the BACK button on your browser menu bar):
click here to go to the top of the page
This is the actual command I used for this:
<H4 ALIGN="CENTER">
<A HREF="#top">click here to go to the top of the page</A></H4>
If you do not want to use a header tag, then use the paragraph tag as in:
<P ALIGN="CENTER">
<A HREF="#top">click here to go to the top of the page</A></P>
At the point or place where you want the browser to jump to, you insert the following command:
<A NAME="linkname"></A>
For example, at the top of this page (right after the BODY tag), I entered this command:
<A NAME="top"></A>

and this is the spot that the browser will jump to whenever someone clicks on the words "click here to
go to the top of the page".
Note the following points with these two commands:
1. When you move the mouse pointer anywhere on the words, "click here to go to the top of the
page", it turns into a pointing hand. Anytime you see a pointing hand, it means that you are on a
link and clicking on the link will take you some place. Notice that when you move the pointer
over the words "click here to go to the top of the page", the location of this lesson, the file name
of this lesson (lesson6.htm) and the "linkname" (#top) appears on the status line at the bottom of
the browser (try it to see for yourself).
2. "#top" is called the URL which stands for Universal Resource Locator. A URL is the address or
location of the link.
3. The A stands for Anchor. In general, the anchor tag tells the browser to anchor or to attach to
something else. In HREF="#top", we are using it to tell the browser to anchor or attach to another
section on the same page called "top".
4. Every Anchor tag must have a closing or end tag (</A>) to signal the end of the anchor.
5. The anchor element is a "container element". Everything contained between the <A> and </A>
tags is affected by the element. In our example, the container element A not only contains the
name of the section we are jumping to ("top"), but also the words to be clicked on ("click here to
go to the top of the page").
6. The Anchor element is called a Hyperlink as it allows you to link to any location or address you
want. The anchor tag is the glue for hypertext documents. When the enclosed text (which can
also be an image instead of text) is selected by the viewer, the viewer is immediately sent to the
location specified in the HREF attribute.
7. HREF stands for Hypertext REFerence. It means that "this is where the link is going to" - that is,
where the link is referenced. In my example, it is going to a section called "top".
8. As my example shows, the name I chose for the "linkname" was "top". Choose your link names
to reflect the section you are jumping to and there is no need to have long link names.
9. The # symbol that you see in the first command (in my example, "#top") must be there. The #
denotes an internal page link. Without it, your browser will be looking for the code name outside
the page you are on and of course, it won't find the name.
10. There is no # symbol in the NAME attribute.
11. The NAME attribute is used to set up "named anchors". The named anchor in our example is
"top". When you click on the link, the section where you place the NAME command (the target
of your HREF attribute) will appear at the top of the browser screen.
12. The name you choose in the HREF attribute, must match the case in the NAME attribute.
13. The value of the HREF attribute ("#top" in our example) and the value of the NAME attribute
("top") must be enclosed with quotation marks. If you don't enclose with quotation marks, the
hyperlink may not work correctly.
14. Anchors cannot be nested. You cannot have an anchor within an anchor.
15. Please note that the following two statements do exactly the same thing:

<A NAME="park"></A>A WALK THROUGH THE PARK
and
<A NAME="park">A WALK THROUGH THE PARK</A>
Both these statements will place "A WALK THROUGH THE PARK" at the top of the browser
screen when the viewer clicks to go to that section. With the first statement, a good HTML
validator (a program to make sure you are writing correct HTML) will warn you that you have
an empty container element A because no statement is contained between the anchor tags.
Normally when you use a container element, it would be expected that something would be
"contained" between the opening and closing tags - hence the warning. The second statement
avoids this warning message as "A WALK THROUGH THE PARK" is contained between the
anchor tags. Note also that a HEADER tag is not allowed between anchor tags, so if "A WALK
THROUGH THE PARK" uses a HEADER tag, then you must use the first statement.
Notice at the beginning of the lesson I have six choices to cover all the main topics. To separate them I
used vertical bars ( | ) as in:
| click here to go to the top of the page |
The vertical bar is usually located on the backslash key (\). It is the key that has the two vertical dashes
on it, one above the other. The two dashes will appear as a solid vertical bar in your text editor (such as
NotePad) and in your browser (and in other software as well).
Now, if you need more than one choice in the menu, you simply place each of your links side by side as
in:
| Links in general | | Links within a page - page jump | | Linking to another page in your
website | | Linking to another page anywhere in the world | | Using a link button | |
MAILTO: (sending an e-mail) |
These are the links at the beginning of this lesson. The links shown here most likely do not appear as
neatly as those at the beginning of this lesson, so we will work with this example until it does appear like
the links at the beginning of this lesson.
Here are the statements that support the above links:
<H4 ALIGN="CENTER"><A HREF="#links">| Links in general |</A>

<A HREF="#page">| Links within a page - page jump |</A>
<A HREF="#another">| Linking to another page in your website |</A>

<A HREF="#world">| Linking to another page anywhere in the world |</A>

<A HREF="#button">| Using a link button |</A>
<A HREF="#mail">| MAILTO: (sending an e-mail) |</A></H4>
There are several things that can be learned from this one example and here they are:
1. Notice that these page jumps are all centered with only ONE center command. Do not use the
<BR> tag. In other words, don't say, "I can only get these two links on one line and so I will
insert a page BReak command and then place the next three links on the next line, and so on. The
problem with doing this is that you are designing for appearance instead of for content. If you
want your links centered, then center them all with one ALIGN attribute and let each individual
browser decide how they will be centered. In some browsers, maybe three links can fit on one
line and in other browsers, maybe only two links will fit. Also, one browser may be able to fit all
your links into two lines while another browser may require three lines. You need to take all
these thoughts into consideration and so one center command is all you need and your links will
look good in all browsers.
2. Notice also that you not only can click on your link words (such as "Links in general"), but you
can also click on the vertical bars (they are also underlined and highlighted in blue). This is
because the vertical bars are also contained between the Anchor tags (that is, between the <A>
and the </A> tags). You may not want this. Notice at the top of this lesson that I do not have the
vertical bars as part of the link statement (they are not underlined). Compare the last example
which is:
| Links in general | | Links within a page - page jump| | Linking to another page in
your website | |Linking to another page anywhere in the world | |Using a link
button | | MAILTO: (sending an e-mail) |
to this example, where each choice is clearly separated and with no underlined and highlighted
vertical bars:
| Links in general | | Links within a page - page jump | | Linking to another page in
your website | | Linking to another page anywhere in the world | | Using a link
button | | MAILTO: (sending an e-mail) |
Here are the lines I used for this latest version.
<H4 ALIGN="CENTER">| <A HREF="#links">Links in general</A> | | <A

HREF="#page">Links within a page - page jump</A> | | <A HREF="#another">Linking to
another page in your website</A> | | <A HREF="#world">Linking to another page anywhere in
the world</A> | | <A HREF="#button">Using a link button</A> | | <A
HREF="#mail">MAILTO: (sending an e-mail)</A> |</H4>

3. Note that each pair of adjacent vertical bars is separated by one space.
4. Remember that the anchor tags (<A> and </A>) act as a container in that all that they contain
will be part of the link. If you do not want your vertical bars part of the link, then place them
outside of the anchor tags, that is, outside the container tags as shown above and as shown in the
following example:
| <A HREF="#page">Links within a page - page jump</A> |
5. If we have more links than will fit into one browser line, the browser will automatically wrap to
the next line. The problem is to avoid having part of a link on one line and the rest of it on the
next line. We don't want the vertical bars that surround a link to be separated from the links
either. For example, in our third choice, "Linking to another page in your website", we want to
ensure all these words are on the same line - whatever line that might be - including the vertical
bars around them. We don't want it to be split between two lines. To do this, we use the space
character ( ) to replace each space between words. This will fool the browser into thinking
that "| Linking to another page in your website |" is one long word and so if it won't all fit on one
line, the whole thing will be wrapped to the next line. This then is how part of the above would
look with an replacing each space between words including the vertical bars:
<H4 ALIGN="CENTER">
| <A HREF="#links">Links in general</A> |
| <A HREF="#page">Links within a page</A> |</H4>
You can type the above all in one long line in NOTEPAD if you want to. No matter how you type it in,
you must remember to place one space (no ) between each pair of adjacent vertical bars because
this is the only place that the browser will be able to make a split and wrap to the next line. Using this
method will ensure that no link gets cut up between two lines and that the vertical bars around the link
will also remain part of the link statement. The whole thing will then look like:
| Links in general | | Links within a page - page jump |

| Linking to another page in your website |
| Linking to another page anywhere in the world | | Using a link button |
| MAILTO: (sending an e-mail) |
which is what you see at the beginning of this lesson. Note how each link is kept together and that the
links are nicely centered. No link is split between two lines including the vertical lines around the links.
If you want to see exactly how I did all my links at the beginning of this lesson, just go the VIEW menu
and choose SOURCE or DOCUMENT SOURCE.
Instead of the vertical bars around the links, you might prefer square brackets [ ]. The only problem
with square brackets is that many text only browsers will automatically insert square brackets around

each link. Thus if the browser places square brackets around links and you also use them, then each of
your links will look like:
[[link words]]
which doesn't look so nice.
Here is a problem for you to work on.
Problem 1: Make up the statements that will produce the following page jumps (for this problem, do not
use the " " command):
| Walk through the park | | Going for a swim | | A bicycle ride |
Problem 2: Referring to Problem 1, what is the statement that you would place at the beginning of the
"Walk through the park" section?
Problem 3: Change your answer to Problem 1 so that no browser will be able to break up any link. That
is, if a link will not fit all on one line, it will place the entire link on the next line.
Later in this lesson, after we study links in general, Problem 6 deals with the case if you need to jump to
a certain point on another web page.
| top | | bottom |
LINKING TO ANOTHER PAGE IN YOUR WEBSITE
My main home page is the web page that contains a table of all these lessons. If you want to study a
particular topic then you can go to my home page and choose the needed lesson. Each lesson in this
course is also a web page, but it is not my home page. All my web pages (or simply "pages") taken
together make up my website. In the table on my home page, when you choose a lesson, the lesson
appears on the screen through a basic link command. Thus each cell in the table is a link to a lesson. At
the end of each lesson, I have three links - one giving you the option of returning to my home page, one
to my alternate home page, and one to go on to the next lesson.
Linking to pages within your own website is easy to do. Recall that the basic command for a page jump
studied in the last section is:

<A HREF="#linkname">Click on these words</A>
Well, to link to another page such as to your home page, just replace the #linkname with the name of
your file as in:
<A HREF="filename.htm">Click on these words</A>
For example, if your home page was named index.htm, you could have:
<A HREF="index.htm">Go back to home page</A>
which will be displayed in the browser as:
Go back to home page
If you do click on these words, the browser will immediately load my home page. To return to this spot,
click on the "BACK" button on the menu bar.
Note the following points with the above command:
1. As before, the A stands for anchor and in this case, it begins the attachment to another page.
2. HREF as before, tells the browser that this is where the link is going to.
3. The value of the attribute HREF is "index.htm". That is, "index.htm" is the file or document
name of the web page you are linking to. The file name must be enclosed with quotation marks.
4. Since the words "Go back to home page" are contained between the anchor tags <A> and </A>, a
person can click anywhere on those words and the browser will load the home page.
5. You do not need a <A NAME="filename"></A> command as the file (in our example, "index.
htm") already exists.
6. When you lay the mouse pointer anywhere on the words, "Go back to home page", you will see
the file name ("index.htm") and its location displayed on the status line at the bottom of the
browser screen. In other words, the complete URL is displayed.
Problem 4: Where will the browser look for this file called "index.htm" or whatever file name you
choose for your web page?
| top | | bottom |

LINKING TO ANOTHER PAGE ANYWHERE IN THE WORLD
Often you see web pages with links to other web pages or websites and these other web pages can be
anywhere in the World Wide Web (WWW). Recall in the above section, that the command to link to
another web page within your own website is:
<A HREF="filename">Click on these words</A>
as in:
<A HREF="index.htm">Go back to home page</A>
where the browser will load the file called "index.htm" when you click on the words "Go back to home
page".
To link to any page in the world, just replace the file name with the COMPLETE ADDRESS (URL) of
the page you want to link to. Remember that you must also enclose the COMPLETE ADDRESS (the
URL) of the link with quotation marks. For example, the command
<A HREF="http://www.hknet.com/card/">Want to e-mail a greeting card to someone?</A>
will link you to a website that lets you send e-mail greeting cards. If you want to try it now, here it is:
I would like to send an e-mail greeting card
Problem 5: In summary, the three link commands that we studied in this lesson are very similar
statements. The only differences are in the names. Here are the three situations showing their
similarities. Give a brief description of when each is used.
a) <A HREF="#top">enclosed text</A>
b) <A HREF="index.htm">enclosed text</A>
c) <A HREF="http://www.press.com/perma/">enclosed text</A>
Problem 6: Suppose you have a web page that contains pictures of your family and also of your pets.
Suppose also that this page of pictures is called pictures.htm. What command would you use to not

only load the pictures page, but the pets section on the pictures page. That is, we want to load the
pictures page and then do an immediate page jump to the pet pictures section.
| top | | bottom |
USING A LINK BUTTON
At the very end of this lesson, I used three link buttons - one to allow you to go back to my main home
page, one to my alternate home page, and one to take you to the next lesson. Buttons are neat and
professional looking. Here is an example of a link using a button (feel free to click on it and then choose
the BACK button to return to this spot).
Return to Home Page
Here are the HTML statements that give this button:
<H3 ALIGN="CENTER">
<FORM METHOD="GET" ACTION="index.htm">
<INPUT TYPE="submit" VALUE="Return to Home Page">
</FORM></H3>
Note the following explanations on these statements:
1. There are two main command lines here. The first one is called the FORM command and the
second one is called the INPUT command.
2. FORM is a container element. The opening tag tells the browser that a form item is going here.
The closing tag </FORM> ends the form item (which you see at the end of the statements). We
will learn about forms in a later lesson.
3. The FORM command has two attributes - METHOD and ACTION.
4. METHOD, a FORM attribute, tells the browser how to handle the FORM command. Its value
here is "GET". That is, the browser is to "get" something which in this case points to a link
through the ACTION attribute.
5. ACTION means the connection that you want to make. In this case, the action is a connection to
my home page which is a file called "index.htm". If you want to connect to a page on the WWW,
be sure to type in the complete address (URL). ACTION is a required attribute as it specifies the
URL of the location you want to link to.
6. The second command line is the INPUT command and it generates the button.

7. The TYPE attribute lets the browser know what TYPE of INPUT will occur. In this case we want
to SUBMIT a button (a button is assumed in "submit"). Thus TYPE="submit" produces a button.
8. The VALUE attribute gives the wording that will appear on the button.
9. Only the value of the ACTION and VALUE attributes require quotation marks. Quotation marks
for the METHOD and TYPE values are optional.
If you want two buttons above each other, then just repeat the above statements twice, changing the
ACTION and VALUE attributes to whatever is appropriate for your situation. Here are two centered
buttons. The statements are given below the buttons. The buttons are active so you can click on them.
Return to Home Page
Send me to Lesson Seven
Here are the statements that give the above two buttons:
<H3 ALIGN="CENTER">
</FORM>
<FORM METHOD="GET" ACTION="Lesson7.htm">
<INPUT TYPE="submit" VALUE="Send me to Lesson Seven">
</FORM></H3>
LINING UP LINK BUTTONS
Lining up link buttons so that they look like:
Return to Home Page Send me to Lesson Seven

is a little more complicated. However, if you want the statements now, here they are:
<TABLE BORDER="0">
<TR>
<TD><FORM METHOD="GET" ACTION="index.htm">
</FORM>
<TD><FORM METHOD="GET" ACTION="Lesson7.htm">
<INPUT TYPE="submit" VALUE="Send me to Lesson Seven">
</FORM>
</TABLE>

TR stands for Table Row and TD stands for Table Data. We will study tables on Lessons Eleven and
Twelve, but for now you can use these statements as they do work. If you want to see how I did the three
buttons at the end of this lesson just choose SOURCE or DOCUMENT SOURCE from the VIEW menu.
Final remarks about buttons.
● Normally, you do not use buttons to link to other web pages. Instead, use text and images to link
to other pages, where you click on some words or on an image to load another web page. Buttons
are usually used in FORMS and for executing scripts. If you visit my guestbook page, you will
see two buttons at the end of the form - one to submit the contents of the form and the other to
reset the form contents.
● When a web page is loaded after clicking on a button, you may see a question mark (?) after the
file name in the "location" bar as in: pictures.htm?. Don't worry about this. The question mark
simply indicates that the page was loaded by clicking on a form button.
| top | | bottom |
E-MAIL (using the MAILTO: command)
Before we leave this lesson on links, let's take a look at the command that allows people to write to you
simply by clicking on your e-mail address or on some statement pointing to your e-mail address. To do
this, we use the MAILTO: command which in effect creates a link to your server by opening up the e-
mail box allowing a message to be sent immediately.
Here is a statement that would allow anyone to send me an e-mail:
Please tell me what you think of these lessons by sending me, John Gilson, an e-mail.
Note that only "John Gilson" is underlined and in blue meaning that if you want to send me an e-mail,
you only need to click on my name. Try it and see what happens. You won't be able to send me an e-
mail as I am using a dummy address so you can experiment with the MAILTO: command. If you want
to send me an e-mail, you can do it from my home page. To close the e-mail box, just choose FILE and
then CLOSE and the e-mail box will disappear.
Here is the HTML line that gives the above statement:
Please tell me what you think of these lessons by sending

me, <A HREF="mailto:jcgilson@bfree.on.ca">John Gilson</A>, an e-mail.

In this example, jcgilson@bfree.on.ca is my complete e-mail address. For your own web pages, just
replace my e-mail address with yours. Note that the only difference between this e-mail link command
and a link to any web page is that the e-mail address goes in place of the web page URL.
Problem 7: Write the HTML statements that would give the following line on a web page. You can
replace my e-mail address with yours and then try sending yourself a message.
For more information, please send an e-mail to me, John Gilson, and I will get back to you as soon as
possible.
| top | | bottom |
PLACING YOUR OWN SUBJECT IN EMAILS
You can also add set the subject, cc, and bcc lines as part of the mailto: link. For example, to add a
topic (a subject) in the subject line of your e-mail (the most popular option), the format is:
<A HREF="mailto:jcgilson@bfree.on.ca?subject=topic">
as in:
<A HREF="mailto:jcgilson@bfree.on.ca?subject=product information">Please send more product

information</A>
If you want to include the e-mail address of the person you also want to receive a carbon copy of the
same e-mail (that is, the person you want to be cc'd), the format is:
<A HREF="mailto:jcgilson@bfree.on.ca?cc=person@site.com">
where person@site.com is the complete e-mail address of the person to be cc'd.
If you want to include the e-mail address of the person you also want to receive a blind carbon copy of
the same e-mail (that is, the person you want to be bcc'd), the format is:
<A HREF="mailto:jcgilson@bfree.on.ca?bcc=person@site.com">

1. Adding a subject, cc or bcc is not standard HTML, nor does any browser claim to support these
additions. However, they do work in both Netscape and Explorer on both Macs and Windows.
2. Note that there is no space behind the end of the e-mail address and the question mark (?) that
begins the extra information.
3. You are allowed to have spaces in the subject line, but no quotation marks (") are allowed as part
of the subject.
4. It is best to use only one of these three options at a time as this is all that Netscape allows - even
though Explorer can handle all the variables at once.
5. It appears that the success of these options also depend on the mail program used. An older
version mail client may not accept any of these options.
6. Keep in mind that a visitor can change the subject, cc and bcc lines. These additional options
after the question marks only start the e-mail in the way you would like to see them sent.
| top | | bottom |
PLACING A MESSAGE IN THE BODY OF EMAILS
You can also place a personal message in the body of an email using the ?body attribute as in:
<A HREF="mailto:?body=Don't forget also to send in your financial statements as soon as

possible.">Click here when ready to send us your email.</A>
In this example, the statement "Don't forget also to send in your financial statements as soon as possible"
is the instruction that will be placed in the body of the email.
The maximum length of a message is 250 characters. If your message is more than 250 characters
long, then either the entire message may not appear at all in the body or it will be cut off at 250
characters. So to be on the safe side, keep your message to no more than 250 characters.
| top | | bottom |
ANSWERS
1. The following is one way to solve the problem. You may have given the page jumps different
names. Note that the problem did not have the link words strongly emphasized. This is because I

used the paragraph tag (<P>) as in <P ALIGN="CENTER"> and then closed the section with </
P> instead of using a header tag such as <H3 ALIGN="CENTER">.
<P ALIGN="CENTER">
| <A HREF="#park">Walk through the park</A> | | <A HREF="#swim"> Going for a swim</A>
| | <A HREF="#bike">A bicycle ride</A> | </P>
2. Using my answer for Problem 1, the statement would be:
<A NAME="park"></A>
3. <P ALIGN="CENTER">
| <A HREF="#park">Walk through the park</A> | | <A
HREF="#swim">Going for a swim</A> | | <A
HREF="#bike">A bicycle ride</A> |</P>
4. The browser will look for the file in the current directory (also called "folder") - that is, the
directory that you are saving all your web pages in. Once you have your website on the World
Wide Web, the browser will look for the file in the directory or location that your server company
or provider has placed your pages in.
5. The first statement is used in page jumps.

The second statement is used in linking to another page in your directory (that is, to another one
of your web pages).
The third statement is used in linking to a website anywhere in the WWW.
6. To load the page called "pictures.htm" and then do a page jump to the pet pictures section, you
would combine the URL of the page with the name of the pet pictures section as in:
<A HREF="pictures.htm#pet">Click here to see pictures of our pets</A>
where "pet" is the name of the pet pictures section. At the beginning of the pet pictures you
would have something like:
<A NAME="pet">Here are pictures of our pets</A>
7. Whatever you want for the link words must be contained between the anchor tags. Therefore the
closing anchor tag must be placed after the word "possible". So we have:
For more information, please send an e-mail to me, <A HREF="mailto:jcgilson@bfree.on.

ca">John Gilson, and I will get back to you as soon as possible.</A>

Return to Home Page Return to Alternate Home Page
Send me to Lesson Seven


IMAGES - PART 1 - html tutorials in web page design by J. Gilson
LESSON SEVEN - IMAGES - PART 1

| Images - introduction | | Placing images on your web pages |

| Saving (downloading) an image | | Image formats | | Image attributes |
| Images not appearing in your browser? |
IMAGES (PICTURES, GRAPHICS, ICONS, CLIP ART, ETC.)
Up until now, everything has been text based and you should already be able to produce some very nice
text based web pages. We know of course that the World Wide Web (WWW) is much more than just
plain text. It is the ability of the internet to also provide images that makes it so very popular. Images are
also called pictures, graphics, icons, clip art, etc. Browse the web and you will see all kinds of images.
The chain at the top of this lesson was placed there as an image. There are millions of images out there
in the WWW and many of them are free for you to use. If you like an image and want to use it, then all
you need to do is to download (save) the image (this is called "taking the image") and I'll show you how
to do this later in this lesson. However, before you do download or save someone else's images, be sure
that it is in fact free to take. Often you are told somewhere in the website if the images are free to take or
if restrictions apply. If you do see an image you like and you don't know if you are allowed to download
it, then you should ask. Don't just take it. If you ask, usually you will be given permission to do so.
Remember this, when you place a web page on the internet, it is considered publishing and so all the
rules and laws of local and international publishing apply. So if you are in doubt, ask.
I have a directory or folder set aside for images that I download from the net and because there are so
many images out there, I have sub-directories to categorize them. Some of my categories are:
backgrounds, buttons, religious, animated images, lines, etc. If I need an image for a web page, I just
copy it to the directory I need it in.
While images can really add to a web page, be careful that you do not overuse them. It takes time for a
browser to display an image and so a lot of images can take a lot of time. Also, the bigger the image, the
longer it will take to display. Many viewers do not want to wait a long time. What often happens then, is
that viewers will leave your site before having really seen it, or they will turn off the graphics. To turn
off graphics is easy to do. In Netscape for example, you choose OPTIONS from the menu bar and then
choose AUTO LOAD IMAGES to turn off this option. Now it is possible to do certain things to speed

up the displaying of text and images and we will get to that later in this lesson.
| top | | bottom |
PLACING IMAGES ON YOUR WEB PAGE
The basic format is quite simple. It is:
<IMG SRC="image.gif">
where "image.gif" represents the name of the image.
The chain at the top of this lesson:
was put there with this command:
<IMG SRC="hrchain.gif">
A discussion on this image command.
1. I called my image "hrchain" standing for Horizontal Rule Chain because it can be used to replace
an <HR> or Horizontal Rule command. There are many places on the web where you can find
line images to replace horizontal rules. Here is one of them:
http://members.aol.com/dcreelma/imagesite/image.htm
2. IMG stands for "image" (IMaGe). It means that an image will be placed here. The IMG tag is
used to insert images within the text. These are often called "inline" images.
3. SRC stands for "source" (SouRCe). It is an IMG attribute that tells the browser where the source
for the image is, that is, the name of the image and where to find the image. Thus the SRC
attribute specifies the name and location (URL) of the image file. It can be a relative or an
absolute URL. The image should be located in the same directory as the web page it is to appear
on. Since no directory is given, the source is assume to be the current directory - the directory of
the web page.
4. "hrchain.gif" is the complete name of this image and this name follows the same format as your
HTML document names. That is, you have the name (in my case it is "hrchain"), a dot, and then
the suffix ("gif").

| top | | bottom |
SAVING AN IMAGE
There are thousands of images out there on the WWW and many of them are free for you to use in your
own web pages. If you see an image you really like and are not sure whether you are allowed to
download it for your own use, just e-mail the person or company and ask. Often there is an e-mail
address somewhere on the web page. To "download" an image to your hard drive means to "save" the
image on your hard drive.
To quickly save an image (this should work on most browsers), just place the mouse pointer anywhere
on the image, and click once with the RIGHT mouse button (that is, the opposite button that you would
normally use when clicking with your mouse). If this doesn't work, then click and hold the mouse button
down. A menu will pop up beside the image with a number of choices. One of these choices is Save
Image As ... or Save Picture As ... or Save Link As .... Choose the option that applies to your browser
and the usual dialog window will open up asking you where on your hard drive you want the file (that is,
the image) saved. For example, to practice saving an image, go back to the chain image at the beginning
of this lesson and save it (it is free to take).
This same method for saving an image can also be used to save a background image. If you see a
background (wallpaper) you like and are allowed to save it, just click anywhere on the wallpaper with
the right mouse button and follow the same procedure as described above for saving an image.
Finally, if you want to try my examples with images, you will need to save the images in my examples
into the same folder that you are saving my web page examples in (using the above method to save
images). If you do not save the images to your working folder, the images will not appear on your web
pages.
| top | | bottom |
IMAGE FORMATS
Most browsers only support two inline image formats or file types. They are (1) GIF and (2) JPEG.
Here is a brief discussion on these two formats as denoted by the suffixes.
1. .gif (pronounced "jiff" as in peanut butter). GIF stands for General Image Format. This format
was invented by Compuserve and is the most common format on the World Wide Web. Its

simple format is a series of pixels that line up to form a picture. This format can store black and
white, grayscale, and color images.
With images in this format, you are limited to a maximum of 256 colors for any image. If you
were to examine an image in a program such as LView Pro or Paint Shop Pro (visit http://
shareware.cnet.com/ and do a search to download either program), it will take the raw image data
and determine the 256 (or fewer) colors that best describe the color content of the image and
creates a color table changing these colors into integers (or decimal numbers as they are called)
ranging from 0 to 255 (= 256 numbers). Thus a picture of a blue sky will have mostly blues in the
color table while a picture of trees will have a lot of browns and greens in the table. Each actual
pixel in the original image is then examined for its true color and matched to the closest color in
the color table. The pixel is then assigned the corresponding decimal number which is called the
"color index value". The result of all this a table of color indexes along with a color map table
that maps each of these indexes into the chosen colors.
Color maps are known by a variety of names such as Color Table, Indexed Color, Palette, and
Color LookUp Table. Thus the GIF format stores its colors in a 256 color indexed color map.
This technique can do a very good job in creating images that are near identical to the original
image. The GIF format is ideal for images that contain larger single-colored regions (no more
than 256 colors) such as buttons, logos, icons, lines and clip art. If the image has more than 256
colors, you will have to reduce the number of colors in the image to 256 (by dithering for
example). Also, remember that the fewer colors you use, the smaller the file.
Color photographs, on the other hand, often contain more than 256 colors and with no large
single-colored regions. GIF images use a form of "lossless" compression called LZW named after
its creators. LZW compression works by finding repeated patterns within the image. The more
repeated patterns, the better the compression. Thus images with large blocks of color work great
as GIF files because they can be compressed so well. Scanned images such as photographs have
fewer large blocks of color and therefore do not compress as well. Thus photographs in GIF
format tend to look grainy and blotchy. There are two versions of the GIF format - GIF87 and
GIF89. The GIF89 format allows you to also make one of the colors of the image transparent
(such as the background color).
2. .jpeg or .jpg stands for Joint Photographic Experts Group. Recall that for IBM and IBM
compatibles not running Windows 95 or higher, only a 3 letter suffix is allowed, while for MAC,
Unix, Amiga and Windows 95 or higher users, a four character suffix is allowed. As the name
Joint Photographic Experts Group implies, this format was created especially for storing
photographic images, and it does this in a compact digital format. Thus this format can support
any number of colors (millions more than the 256 maximum number of colors in a GIF image) as
well as images that have no large single-color regions.
So if you are dealing with photographic images, JPEG format is recommended because of image

quality and image file size. JPEG file sizes are not determined by the number of colors, but by the
amount of compression. When you save an image in JPEG format, you choose how "lossy" you
want the compression to be - from lossless to extremely lossy. The more lossy the compression,
the smaller will be the resulting file size but also the less clear the detail. Extremely compressed
JPEG images can also look very grainy or blotchy. Therefore, if you are using JPEG format, try
different levels of compression to see what gives optimum quality.
A compressed file must be decompressed to be displayed and JPEG images can take significantly
longer than GIF images to decompress and display. This is because JPEG is a more complicated
form of compression. You might save file space on the Hard Drive with a JPEG image and so
save time loading the file, but decompressing and displaying the image can negate the time
savings.
| top | | bottom |
IMAGE ATTRIBUTES
BORDER and ALIGN attributes
There are a number of attributes that go with the IMG command (SRC is only one of them) and we will
begin our study of them with the BORDER and ALIGN attributes. Recall that an attribute supports or
modifies a command.
BORDER ATTRIBUTE
The BORDER attribute is used to place (or eliminate) a border around the image. The BORDER
attribute commands the browser to draw a border of an indicated size around the image. A border is
often used when the image is a link to show clearly that the entire area bounded by the border is a
hyperlink. Otherwise, it is often used as BORDER="0" (quotes are optional) to turn it off - that is, no
border.
ALIGN ATTRIBUTE
The ALIGN attribute is used in conjunction with placing text around the image. That is, ALIGN controls
the alignment of the image with respect to text. To see these attributes in action, please SWITCH to
NOTEPAD or to a similar text editor, and type in the following HTML document. I want you do some
experimenting with it.
<HTML>
<HEAD>

<TITLE>HALL RENTAL</TITLE>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">ABOUT OUR HALL</H2><HR>
<H4 ALIGN="LEFT"><IMG SRC="whechair.gif" BORDER="0" ALIGN="MIDDLE">We are
wheelchair accessible.</H4>
Please call for rates<HR>
</BODY></HTML>
Now save this web page. If you have not saved the wheelchair image (whechair.gif) then you need to
save it too. Remember that both the image and web page must be in the same folder. Once you have
saved the web page and image, then SWITCH back to your browser and load the document to see it in
action. This is what you should see:
ABOUT OUR HALL
We are wheelchair accessible.
Please call for rates
Now for a discussion on the above HTML document.
1. The ALIGN="LEFT" before the IMG command tells the browser to place the image on the left
side of the screen (which is actually the default value).
Problem 1: SWITCH to your text editor and change the ALIGN="LEFT" to

ALIGN="CENTER". Save the change, SWITCH back to your browser, and load the document.
What change do you see?
Problem 2: Now repeat this process and change to ALIGN="RIGHT". What happened this time?
Using a value of LEFT or RIGHT will make the image and text line up against the left or right
margin of the browser screen.

2. The BORDER="0" means that we want no border. It is clear from the image that we do not need
a border. Border widths are measured in pixels. Try a border of 10 pixels, that is, replace the
number 0 with the number 10 - as in BORDER="10". Note the difference. Sometimes you will
want a small border if the image comes with a clear or transparent background - especially if you
want the image to be a link (we will study images as links in Lesson Eight). Also, in some
situations, a browser will automatically place a border around the image and you may not want
that to happen. To avoid these situations, control the border with the BORDER attribute.
3. Exactly how big is one pixel? Does it have a specific size? The answer is that a pixel does not
have a specific size. Its size depends on a number of things. One of them is the resolution of the
monitor being used. A high resolution monitor has a smaller size pixel than a low resolution
monitor because a high resolution monitor has more pixels to the inch (or centimetre). Therefore
the size of your image will vary a little from browser to browser. However, your images (and
text) will always be in the right proportion no matter which monitor they are viewed on - and so
they will always look good in any browser.
4. Images can have text printed next to them. The ALIGN="MIDDLE" that you see after the
BORDER attribute tells the browser to align the words "We are wheelchair accessible" with the
middle of the image. Note that the command is "MIDDLE" and not "CENTER".
Also, only one line of text is allowed with this ALIGN command. If the line is too long or you
have more than one line, the rest will be placed below the image. Try adding some words or
another line to the words "We are wheelchair accessible" to see this happen.
Problem 3: Change the ALIGN="MIDDLE" to ALIGN="TOP". What happened?
Problem 4: Change to ALIGN="BOTTOM". What happened this time?
The values TOP, MIDDLE and BOTTOM specify where any text following the image should be placed.
Remember that if more than one line follows after the image, the additional lines will be placed below
the image. You can also force text below such an aligned image by using the BR tag with the CLEAR
attribute as in <BR CLEAR>. You may want to experiment with this attribute.
WIDTH, HEIGHT and HSPACE attributes
To understand the WIDTH, HEIGHT and HSPACE attributes, SWITCH to your text editor and make
changes to our wheelchair accessibility example so that it now looks like:
<HTML>

<HEAD>
</HEAD>
<BODY>
<H4 ALIGN="LEFT"><IMG SRC="whechair.gif" BORDER="0" ALIGN="MIDDLE" WIDTH="96"
HEIGHT="90" HSPACE="10">We are wheelchair accessible.</H4>
</BODY></HTML>
Now save the document, SWITCH back to your browser, load the document and this is what you should
see:
ABOUT OUR HALL
The WIDTH and HEIGHT attributes involve the size of the image. This size is measured in pixels.
Thus our size has a width of 96 pixels and a height of 90 pixels. In pixels, the difference between 96 and
90 is very small and may not even be noticeable. It is important for you to include the size of your
image. When you include the size of the image, the browser can then immediately set aside the required
space for your image and begin loading and displaying your text while the image is still being loaded.
This is important since most often images take longer to load than text. Remember also that the bigger
the image, the longer it will take the browser to load and display it. That is why you often see text being
displayed before images are completely displayed. If the browser does not know how much space to set
aside for your image, it will not know where to place the text. The browser then has to work on
displaying the image before the text. In other words, use the WIDTH and HEIGHT attributes as this
allows a browser to lay out a page in advance, as it then knows where the text around the image should
be placed.
Leaving out the WIDTH and HEIGHT attributes is also not considered good HTML coding practice. In

other words, if you want to follow good coding practices, the WIDTH and HEIGHT attributes must be
included with the IMG tag.
So you are strongly encouraged to include the WIDTH and HEIGHT attributes with your IMG tag. The
ideal situation is to have the WIDTH and HEIGHT sizes the same as the original image. That is, the
WIDTH and HEIGHT attributes should contain the actual image's dimensions. Using WIDTH and
HEIGHT with incorrect values, or with percentage values is not recommended. Most browsers will
resize the image to the indicated size, but this often gives poor results.
There are programs on the web that can be downloaded that create, change, modify and work with
images. These programs, such as Paint Shop Pro and LView Pro, will tell you the size of your image and
allow you to change its size to suit your needs (that is, you can resize the image).
If you see an image's size in a paint program or elsewhere written as 120 x 80, it means that the WIDTH
is 120 pixels and the HEIGHT is 80 pixels. The first number is always the width and the second
number is always the height. If there are three numbers as in 120 x 80 x 16, then the third number is the
number of colors associated with the image.
Problem 5: What do you think is the effect of the HSPACE attribute?
You can also use the VSPACE attribute to cover vertical spacing around the image. Thus HSPACE and
VSPACE indicate the number of pixels that should be left free around the image.
The ALT attribute
To see the effect of the ALT attribute, SWITCH to your text editor and make changes to the last
program so that it now looks like:
<HTML>
<HEAD>
</HEAD>
<BODY>
<H4 ALIGN="LEFT"><IMG SRC="whechair.gif" BORDER="0" ALIGN="MIDDLE" WIDTH="60"
HEIGHT="60" HSPACE="10" ALT="chair">We are wheelchair accessible.</H4>

</BODY></HTML>
Now save the document, SWITCH back to your browser, load the document and note carefully what is
printed in the space reserved for the image before it is displayed. Hopefully you will notice what was
printed - if not, try again.
Before an image is displayed, you often see a box or frame placed first and then the image is placed in
the box or frame. The "ALT" attribute allows you to write something in the frame before the image is
placed there.
Although the ALT attribute is not required for the image to be displayed, you should include it to follow
good coding practices. It should be used to replace the image's meaning, and not just to provide a
description of the image. In general, ALT text may not contain markup tags.
Why would we want to write something in the image box?
1. The ALT command is used to specify a text string to be displayed in browsers that do not support
images. If the browser is a text only browser (such as Lynx), the text in the ALT command will
replace the image. This then lets the person know that there is an image there and what it consists
of - something the viewer will appreciate .
2. Any user has the option of turning off the graphics display. If the the graphics display is turned
off, then your image will not be displayed and what is written in the frame is all that will appear
in its place. This again lets the person know what the image would have been if it had been
allowed to be displayed. So, when the image cannot be displayed for whatever reason, the
browser will display the ALT text instead.
3. While the image is being loaded (which can sometimes take awhile), the user will know what is
being loaded and can decide to wait for the image to load or go on to something else.
4. If you are interested in eventually placing your website on the internet through Search Engines
such as AltaVista, InfoSeek, Yahoo, WebCrawler, etc., you are recommended to use the ALT
attribute -- especially if the page you are submitting contains multiple images or image maps at
the top of the page. Some search engines take into account the text written in the ALT attribute
when creating your website's description, keywords, and where your website will be placed in a
search result.
The ALT attribute simply gives the user information about the image. If you do not want to have
anything printed in the frame, then use the command:
ALT=""
One example where you may not want something printed is in decorative images to prevent something
from being written in text only browsers. So if the image is purely decorational, use ALT="" or you
could use a decorative ALT text like "*".

Here is a summary of all the above attributes associated with the IMG tag. You can use them in any
order.
ALIGN can be "TOP" "MIDDLE", or "BOTTOM". Used for aligning one line of text beside the image.
BORDER used to place a border or to specify no border around the image
WIDTH used to state the width of the image that is to appear
HEIGHT used to state the height of the image that is to appear
ALT used to place text in the space where an image is located
HSPACE used to create horizontal space around the image
VSPACE used to create vertical space around the image
Of all these attributes, only the WIDTH, HEIGHT and ALT attributes are to be included for good
coding practices. The rest of the attributes are purely optional and you use them based on your
presentation needs.
Also, as you might have expected, the IMG attributes and values are not case sensitive. Thus, for
example, ALIGN="MIDDLE" is the same as ALIGN="middle" which is the same as align="middle".
We know that the ALIGN="MIDDLE" command places one line of text with the middle of the image.
Similarly ALIGN="TOP" will align one line of text with the top of the image and ALIGN="BOTTOM"
will align one line of text with the bottom of the image. Suppose you want more than one line of text to
be displayed beside the image. For example, the following has four statements beside the image:
BUCHANAN VILLAGE
An Adult Lifestyle Community for Seniors
Operated by the Retirement Home Association
● What is Buchanan Village all about?

● What is a "Life Lease" Retirement Community?
● The benefits of a Life Lease
● Who to contact for more information

Problem 6: Now write the HTML document that gives the above "Buchanan Village" example, keeping
the following points in mind:
1. The image is named cross1.gif

2. The width of the image is 60 pixels
3. The height of the image is 85 pixels
4. There is to be no border around the image
5. There is to be a horizontal space of 20 pixels around the image
6. The word "Cross" is displayed before the image is displayed
7. Each choice beside the cross is to be a link to another page (the links do not work as they are only
examples of what you can do)
8. Make up your own suitable file names for the links
9. The first title (BUCHANAN VILLAGE) is a level 1 heading
10. The second title (An Adult Lifestyle Community for Seniors) is a level 2 heading
11. The third title (Operated by the Retirement Home Association) is a level 3 heading
Our first example about the wheelchair accessibility in our hall, had the words "We are wheelchair
accessible" written beside the middle of the wheelchair image and to the right of the image. These were
the lines that gave us this result:
<HTML>
<HEAD>
</HEAD>
<BODY>
<H4 ALIGN="LEFT"><IMG SRC="whechair.gif" BORDER="0" ALIGN="MIDDLE">We are
wheelchair accessible.</H4>
</BODY></HTML>
Problem 7: Change whatever is necessary so that the words are written on the left side of the image and
everything is aligned to the right side of the browser screen as in the following (in some low level
browsers, the ALIGN="RIGHT" does not work and so everything will still be aligned to the left side of
the screen):

ABOUT OUR HALL
| top | | bottom |
IMAGES NOT APPEARING IN YOUR BROWSER?
If an image is not being displayed in your browser, then the browser simply can't locate it. Here are
some suggestions to try and fix the situation.
1. First make sure that the name of the image and the extension matches exactly the name and
extension used in the coding. For example, if the image is named gardens.jpeg, then the coding
must be:
<IMG SRC="gardens.jpeg">.
If you accidentally write:
<IMG SRC="garden.jpeg"> (name does not match)
or
<IMG SRC="gardens.jpg"> (extension does not match)
then the browser cannot display the image because there is not an exact match.
2. Place the images into the same folder as the web page. Often if they are not in the same folder,
they do not get displayed. So your best results will occur if the images are in the same folder as
the web page. If you place the images in the same folder as the web page, then the format for the
coding would then be simply:
<IMG SRC="ImageName.jpg">

as no path to the image needs to be specified.
3. If your images appear in your browser when you are working off-line, but they do not appear in
your browser after you have uploaded your web page to the internet (to your host server), then
make sure that you have also uploaded each image to your host server. You not only have to
upload your web pages to your host server, but you also need to upload each individual image.
| top | | bottom |
ANSWERS
1. The image and the words "We are wheelchair accessible" are placed in the center instead of on
the left side of the browser screen.
2. The image and the words are right justified.
3. The words "We are wheelchair accessible" is aligned with the top of the image.
4. The words "We are wheelchair accessible" is aligned with the bottom of the image.
5. HSPACE lets you determine the amount of horizontal space between the image and the text
(measured in pixels). In our example, I left 10 pixels of space between the wheelchair image and
the words "We are wheelchair accessible".
6. Here is one way to solve the problem:
<HTML>
<HEAD>
<TITLE>RETIREMENT LIVING - BUCHANAN VILLAGE</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">BUCHANAN VILLAGE</H1><HR>

<H2 ALIGN="CENTER">An Adult Lifestyle Community for Seniors</H2>
<H3 ALIGN="CENTER">Operated by the Retirement Home Association</H3>
<IMG SRC="cross1.gif" ALIGN="LEFT" WIDTH="60" HEIGHT="85" BORDER="0"
HSPACE="20" ALT="Cross">
<UL><LI><A HREF="About.htm">What is <EM>Buchanan Village</EM> all about?</A>
<LI><A HREF="Lifeleas.htm">What is a "Life Lease" Retirement Community?</A>
<LI><A HREF="Benefits.htm">The benefits of a Life Lease</A>
<LI><A HREF="Moreinfo.htm">Who to contact for more information</A><BR><BR>
</UL><HR>
</BODY></HTML>
This problem is a little unfair as it involves something we have not discussed yet (using

ALIGN="LEFT" in the IMG tag). Note that the ALIGN="MIDDLE" was not used as this would
only have allowed us to write one line of text beside the image. Instead we use ALIGN="LEFT"
which in effect places the image to the left side of the browser screen thus allowing several lines
of text on the right side of the image. Note that to make this work, the ALIGN attribute must be
part of the IMG tag.
If the HSPACE attribute is not used in the above IMG tag, the bullets will be hidden behind the
image in some Explorer browsers.
Also, I have inserted two <BR> tags at the end of "Who to contact for more information". I
needed these tags to make sure the Horizontal Rule was placed below the image and not beside
the image. However, adding two <BR> tags will not guarantee that the Horizontal Rule will be
placed below the image. Whether the HR appears in your browser beside the image or below the
image is dependent on text size. For example, if the text size setting in a visitor's browser is a
little smaller than normal, your browser will be able to place more text beside the image and so
there may be room for the browser to also place the Horizontal Rule beside the image. If the text
setting is a little bigger than normal, you will get fewer words beside the image and so the HR
will end up below the table. In Explorer, if you go to the "View" menu, choose "Text Size" (if it
is there) and then change the size of the text to see the effect on the positioning of the Horizontal
Rule.
This problem is solved when we study tables in Lesson 11 and 12. With tables, you can place the
image and text in a borderless table and then place the Horizontal Rule below the table.
7. Only one line needs to be changed. The ALIGN="LEFT" becomes ALIGN="RIGHT" and the
words "We are wheelchair accessible" must be placed in front of the IMG tag as in:
<H4 ALIGN="RIGHT">We are wheelchair accessible.<IMG SRC="whechair.gif"

BORDER="0" ALIGN="MIDDLE"></H4>
| Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Eight |


LESSON EIGHT - IMAGES - PART 2

| Using an image as a link | | Thumb-nail images | | Placing thumb-

nail images on a webpage |
USING AN IMAGE AS A LINK
When you want to turn something into a link, whether it be an image or whether it be a word, phrase or
sentence, you need the HREF attribute which basically says "this web page is where we are linking to"
when someone clicks on the image or words.
Here is an example of using an image for the link. Please SWITCH to NOTEPAD or to another text
editor, and type in the following HTML document:
<HTML>
<HEAD>
<TITLE>IMAGE AS A LINK</TITLE>
</HEAD>
<BODY>
<H4 ALIGN="CENTER"><A HREF="index.htm"><IMG SRC="back.gif" WIDTH="40"
HEIGHT="40" HSPACE="10" ALIGN="MIDDLE" ALT="home"></A>Click on the button to head
home</H4><HR>
</BODY></HTML>
After you have typed in the document, save it, and then SWITCH to your browser and load it. This is
what you should see:
Click on the button to head home

First click on the above button to see the image link work and then click on the browser's "BACK"
button to return to this spot. Note that when the mouse pointer moves anywhere over the image, it turns
into a pointing hand and the target address appears on the status line at the bottom of the browser screen.
Here are some questions for you to answer about this short HTML document:
Problem 1: When you clicked on the button, what web page did the browser load? That is, what was
the name of the web page that the browser loaded?
Problem 2: What is the complete name of the image?
Problem 3: What is written in the space reserved for the button before the button appears?
Problem 4: What is the effect of HSPACE="10"?
Problem 5: Change the above web page so that the words "Click on the button to head home" become
part of the link. This way, the person has the choice of either clicking on the button or on the words.
Problem 6: Why are the words "Click on the button to head home" strongly emphasized (bolded)?
If you do not like to use the word "click", then you could instead use the word "choose" as in: "Choose
the button to head home".
| top | | bottom |
THUMB-NAIL IMAGES
If you have several images to display such as a gallery of your favorite images, pictures and clipart, it
can take quite awhile for a browser to load them all - especially when the browser is running a 14.4 or
28.8 modem. Web pages will load only as fast as the server transmits and the modem accepts them. This
is one on the main reasons why you might see a company or individual offer several web pages of
images with only ten images to a page. If you place too many images on a page, your visitor may not be
patient enough to wait until they are all loaded. Also, the larger the image, the longer it will take to load.
This is where thumb-nail images can be of service. With thumb-nails, you offer a very small version
of each image (each small image is called a thumb-nail). A visitor to your web page can then click on
any thumb-nail to see the larger, original version. Thumb-nails allow for easier viewing of all the
images, allow for smaller web pages and allow for faster loading of the pages. Using thumb-nails also
allow the visitor to be in charge of what he or she wants to see.

| top | | bottom |
PLACING THUMB-NAIL IMAGES ON A WEB PAGE
There are two ways to place thumb-nail images on a web page. They are:
1. Using two images. The thumb-nail image will be the one image and the second image will be the
original full size image.
2. Using one image. You offer the same image for both the thumb-nail and the original image.
USING TWO IMAGES FOR EACH OF YOUR THUMB-NAILS
Many thumb-nail images are set up this way. You simply have two versions of the same image. The
thumb-nail image is the smaller version of the larger original full size image. Since we have two images,
each image will have its own name.
For example, if the image is named "cross1.gif", and the thumb-nail is named "cross1th.gif" (I use th to
denote the thumb-nail), the statement is:
<A HREF="cross1.gif"><IMG SRC="cross1th.gif"></A>
I left out the WIDTH and HEIGHT attributes to show you that I am not doing any resizing and that we
have in fact two distinct images with two distinct names ("cross1.gif" and "cross1th.gif"). Here is the
way it looks in the browser. Be sure to click on the thumb-nail to see the effect (use your left button or
the button you normally click with). If you do this, you should see the image displayed by itself in full
size. When you are finished viewing the image, you can save it (described above in the saving images
section). To return to this spot, just click on the BACK button or click the right mouse button and choose
BACK from the menu that pops up. Note: When the image is displayed by itself, you can also save it
by choosing FILE from the browser menu bar and then the SAVE AS ... option.
I first used LView Pro to resize the original image. The original size is 112 pixels wide and 144 pixels in
height. My thumb-nail size is 39 pixels wide and 50 pixels in height (keeping the same aspect ratio).
You can download LView Pro from:

http://shareware.cnet.com/
and do a search for LView Pro.
Note that the above command line:
<A HREF="cross1.gif"><IMG SRC="cross1th.gif"></A>
follows the same format as using any image for a link. The HREF attribute says that we are linking to
the image "cross1.gif" (that is, "cross1.gif" is where we are going to). The SRC (source) is the thumb-
nail "cross1th.gif". Thus when "cross1th.gif" is clicked on, "cross1.gif" will be loaded into the browser.
In this lesson's first section titled, "Using an image as a link", I gave the following example that made
the "back button" a link to my home page:
<A HREF="index.htm"><IMG SRC="back.gif" ...>
Note that the HREF points to my home page where in the above example, the HREF points to another
image ("cross1.gif" which is the original full size image).
Finally, you are free to use any IMG attribute studied in Lesson 7 - such as the ALT attribute to write
something in the thumb-nail image space. Also, most browsers will place a blue (the default color)
border around the thumb-nail image to indicated that the image is active and can be clicked on (just like
your browser underlines and prints link words in blue to indicate active links). After you click on the
image and later return to the same page, you will see the image with a purple border (the default color)
around it to indicate a visited link (just like your browser underlines and prints link words in purple to
indicate visited links). If you do NOT want to see this border, use BORDER="0" to eliminate it.
Here are three other thumb-nail images. I just repeated the above command line for each image. The
crosses were all taken from the CHRISTIAN WEBMASTER which is now owned by Cross Daily. Pay
them a visit if you like to see what else they have to offer.
To see the original full size image, just click on the image with your left mouse button (or the button you
normally use to click with).

Here are the lines that produced the above 3 thumb-nails and their original images.
<P><A HREF="cross3.gif"><IMG SRC="cross3th.gif" WIDTH="50" HEIGHT="50" ALT="cross"></

A>

A>

A>
Note that this time I included the WIDTH, HEIGHT and ALT attributes in the IMG tag for good coding
practices. You may be wondering why I did not include the WIDTH, HEIGHT and ALT attributes also
with the image in the anchor tag (the A tag). This is because these attributes are attributes of the IMG
tag and not of the A tag. That is, the A tag does not support these IMG attributes.
When you want to use an image on your web page, you may first have to resize the image to suit your
specific needs. I stated above that you can use LView Pro to change the size of an image. You can also
use a paint program like Paint Shop Pro for Windows, Transparency for Macs, and Photoshop for
Windows and Macs to resize and then save the resized image.
USING ONLY ONE IMAGE FOR EACH OF YOUR THUMB-NAILS
This is often the preferred method as you are offering the same image twice with the thumb-nail image
being displayed with the use of the WIDTH and HEIGHT attributes. This is a much faster and more
efficient method of loading images because the larger image that will be displayed has already been
loaded into the browser's cache and ready to be displayed at any time. A cache is where a browser keeps
a memory of images and pages while they display them.
Here is the command line that uses only one image to load both the thumb-nail and the original full size
image.

<A HREF="cross1.gif"><IMG SRC="cross1.gif" BORDER="0" WIDTH="39" HEIGHT="50"></A>
Here is this statement in action. Again you can use the same procedures as before to display the image in
full size, save the image, and return BACK to this spot.
To determine the WIDTH and HEIGHT of the thumb-nail, I resized the original image in LView Pro to
the thumb-nail size that I wanted and noted the dimensions (39 and 50) which I then used for the thumb-
nail. You may be able to determine a suitable thumb-nail size without having to use a software program
like LView Pro or Paint Shop Pro.
You may have noticed that the original image loaded faster than in the previous section. In the previous
section, the thumb-nail is loaded first and when you click on the thumb-nail, the browser then loads the
original image from the directory on the server. In this section, when the image is loaded, it is resized for
the thumb-nail. So the full size image appears much quicker because you are not loading a whole new
image. You are simply displaying it in normal size. Note in the command line that the same image name
is used for both the HREF and the SRC values ("cross1.gif") and that the thumb-nail has been resized to
a width of 39 pixels and a height of 50 pixels.
Your final question:
Problem 7: If you remove the BORDER="0" from the above command line which is:
<A HREF="cross1.gif"><IMG SRC="cross1.gif" BORDER="0" WIDTH="39" HEIGHT="50"></A>
what do you think will happen?
A WORD OF CAUTION CONCERNING IMAGES
When you use images in your web pages, ask yourself the question, "Am I using images where text
would suffice?" You might want to consider varying the size and color of text instead of creating your
web pages with a lot of images. I often see web pages with too many unnecessary images. Too many
images can result in a busy look which makes the page hard to read. Also, many images can greatly

increase the time it takes to load the page. This will certainly "turn off" many visitors to your website --
especially those still using lower version browsers and those with slower connections to the internet.
These visitors will simply stop the loading and go on to something else or they will turn off the
displaying of images altogether. Evaluate each image based on its contribution ("How important is this
image?") versus its cost in downloading time ("How large is this image?").
| top | | bottom |
ANSWERS
1. The browser loaded the web page named "index.htm" (my home page) as indicated in the HREF
attribute (HREF="index.htm").
2. The complete name of the image is "back.gif" as indicated in the SRC attribute (SRC="back.
gif").
3. "home" as written in the ALT attribute. Unfortunately, in some cases, the button may be too
small to show the complete word "home". Note that I chose "home" to represent the "meaning"
of the button.
4. There will be 10 pixels of space between the button and the words "Click on the button to head
home".
5. Recall that the anchor element is a container element. Therefore, what you want for the link must
be contained between the anchor tags. Thus if the words, "Click on the button to head home" are
to be part of the link, they must occur before the closing anchor tag. So all you have to do is
move the </A> tag to the end of the words as in:
Click on the button to head home</A>
Here it is shown as part of the complete statement.
<H4 ALIGN="CENTER"><A HREF="index.htm"><IMG SRC="back.gif" WIDTH="40"

HEIGHT="40" HSPACE="10" ALIGN="MIDDLE" ALT="home">Click on the button to head
home</A></H4><HR>
And here is how it looks in your browser. Note that the link words are now underlined to indicate
that you can also click on them:
Click on the button to head home
6. The words are strongly emphasized because they are contained between the H4 header tags

(<H4> and </H4>). Header tags always strongly emphasize text.

7. If you remove the BORDER="0", the browser will place its own border around the thumb-nail. If
your image does not have a transparent background, you may not want a border. If your image
has a transparent background, you may want the border. So if you do not want this border, use
BORDER="0".
Here is a comparison. The first thumb-nail does not have the BORDER attribute and so the
browser placed its own border, while the second one has BORDER="0" to prevent the browser
from placing one.
You can see from this example that if you want an image with a transparent background to be a link, a
border may be a good idea to clearly define the link's active region.
| Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Nine |


COLOR - html tutorials in web page design by J. Gilson
LESSON NINE - COLOR

| Understanding color | | Hexadecimal versus decimal |

| Changing the background color of a web page |
| Changing the color of all the text on a web page |
| Changing the color of a block of text |
| Using an image for the background of a web page |
| Preventing the background image from scrolling (a fixed background) |
UNDERSTANDING COLOR
The browser default background color for many browsers is gray with black text. As you may have
noticed in all of my lessons, I changed this gray background to a white background. I like a white
background with black letters. This makes for easier reading as it gives the greatest contrast. Generally
when you read a book, the pages are not gray but white. Magazines make great use of color. Often you
see headings emphasized in color (my headings in this lesson are in a maroon color) and advertisers use
color to attract attention to their ads.
If your browser supports color, you should see this lesson printed in red text with dark green links
(instead of the standard blue links). If you click on one these links and then return to the same spot, the
link becomes a "visited link". I changed the visited link color from the standard purple to a darker
magenta. When you click and hold the mouse button on a link (don't release the mouse button), it is
called an "active link". It represents the link that is currently being selected. The default color for an
active link is red. In this lesson I changed it to a dark blue color. We will be discussing each of these
situations later in this lesson. Keep in mind that the quality of color displayed in a browser is also
dependent on the quality of the monitor being used. Thus colors in some browsers may not be as sharp
as you might expect, or a color could be displayed in a slightly different shade than you might have
intended.
Click here if you would rather view this same lesson without the red text (standard black text).
Most, if not all browsers today support coloring the entire text, a block of text, changing the background
color of a web page and changing the color of the links. This lesson is for those who have browsers that

do support color in one form or another.
Because some people may still be using browsers that do not support full color, or using monitors that
do not support color (for example, a black and white monitor), or using monitors that do not have at least
16 bit color (which is the minimum you need), it is important that you do not rely totally on color for
emphasizing text. Remember that you are to design your web pages also for content and not just for
appearance. How a web page looks in your browser will not necessarily be how it looks in another
browser. So if you want to use color for those browsers that do support them (as I often do), that's fine,
but if you want to emphasize text, you must still use logical tags such as <STRONG> and <EM> or a
header tag. This way your text will still be emphasized whether a browser supports color or not, or if a
web page is being viewed in a color or in a black and white monitor. Remember also that some search
engine indexers do rely on the header tags to generate an overview of your web page and they will not
be able to get that overview if you use color instead. Color then should be used only as an enhancement
of your presentation.
| top | | bottom |
HEXADECIMAL VERSUS DECIMAL NUMBERS
To change the color of your text, background, etc., your need a six digit code preceded by a "#" sign.
The code takes the form "#RRGGBB" where RR stands for the amount or intensity of RED in the
color, GG for the intensity of GREEN, and BB for the intensity of BLUE.
Before we continue with this discussion, take a moment now and see a table giving a good range of
colors and their corresponding codes. The table is in Lesson Ten. When you are ready to return here, just
click on the BACK button.
Please send me to Lesson Ten to see the color table
Unfortunately, the numbers needed for the color codes are not in our number system which is the
Decimal System or base 10. No, the numbers needed for any color code are written as Hexadecimals or
base 16.
Our Decimal Number System uses the digits from 0 to 9 as in:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9
There are 10 of these digits and our number system is based on these 10 numbers - hence the name "base
10". Once you go past 9, you combine digits as in 10, 11, 12, etc.

The Hexadecimal Number System uses 16 different digits before digits are combined (hence the name
"base 16"). These 16 digits are:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
Once you go past "F", you combine the digits as in 10, 11, 12, etc. Here is the direct comparison
between the two systems:
DEC: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18
HEX: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12
Note that "A" is our number 10, "B" is our number 11, "C" is our number 12, "D" is our number 13, "E"
is our number 14, and "F" is our number 15. Continuing on, we have Hexadecimal 10 is our number 16,
Hexadecimal 11 is our number 17, and Hexadecimal 12 is our number 18. Thus Decimal 11 =
Hexadecimal B, Decimal 15 = Hexadecimal F, and Decimal 18 = Hexadecimal 12.
In the decimal number system, the intensity of each of the colors RED, GREEN and BLUE in a color
code ranges from 0 to 255 (= a range of 256 numbers). 0 is OFF meaning it contains no amount of the
color and 255 is FULL ON meaning full intensity of the color. Since the code for each of the three
colors must be given as a Hexadecimal Code, the intensity for each color ranges from 0 to FF (Hex FF =
Dec 255). In addition, the amount of each color must be given as a two digit code (2+2+2=6 digit code
for the color). Thus 00 is OFF meaning that Hex 00 contains no amount of that color, while
Hexadecimal FF is FULL ON meaning full intensity of that color. All the numbers in between Hex 00
and Hex FF give the millions of different colors. How many choices do you have? Well, if you have 256
choices for each colour and there are three basic colors (red, green, and blue), you have
256x256x256=16 777 216 different colors!
CONVERTING A DECIMAL NUMBER TO HEXADECIMAL
When you look at a color chart or palette in a program such as Paint Shop Pro or LView Pro, you will
see that all the colors are given as decimal numbers and not as hexadecimal numbers. For example,
suppose you see a color you like and it says that the RGB index (intensities of red, green and blue) is 46,
250 and 34 respectively. Before you can use the color in your HTML document, you must convert these
numbers to Hexadecimal and I have three suggestions on how to do this.
1. Use a scientific calculator that has a built in DEC-HEX converter.

2. If you are using Windows, SWITCH to the ACCESSORIES group where NOTEPAD is located
and you should find a calculator. Double click on the calculator and there it is!
Now, you need to change this calculator into a scientific calculator, so choose VIEW and then
choose SCIENTIFIC. Now you have a scientific calculator. Note the little round buttons beside
the HEX and DEC. They are called Radio Buttons. To change Decimal 46 into Hexadecimal, just

click in the radio button beside DEC and then type in 46 (or use the mouse and click on the
numbers 4 & 6). Now click on the radio button beside HEX and immediately the display shows
2E. Therefore, Dec 46 = Hex 2E.
3. Go to a website that will convert any decimal number for you. One such place is:
http://www.lne.com/rgb.html.
Using one of these three methods, you should also find that Dec 250 = Hex FA and Dec 34 = Hex 22.
Thus if the intensities of red, green, and blue are 46, 250 and 34 respectively, your Hex color code is
"#2EFA22"
Here is a problem for you to try:
Problem 1: What is the Hexadecimal code if the RGB factor is Dec 99,255,128?
CONVERTING A HEXADECIMAL NUMBER TO A DECIMAL NUMBER
To convert a Hexadecimal number to a decimal number, you can of course use a calculator that has this
capability or you can use the computer's built-in calculator. Here is a quick and easy way to change a
two digit Hexadecimal number into a decimal number. In a two digit Hexadecimal number, the first
digit (or rank) has weight equal to 16 and the second digit (or rank) has weight equal to 1. For example,
in the Hexadecimal number 9F, "9" is considered to be in the first rank and "F" is considered to be in
the second rank. Therefore the Hexadecimal number 9F = 9x16 + 15x1 = 144 + 15 = 159. Thus Hex 9F
= Dec 159. Recall that Hex F is equal to Dec 15 and that is why we have 15x1 since F is in the second
rank of 9F.
Using the above reasoning we have Hex FF = 15x16 + 15x1 = Dec 255.
Also, Hex C4 = 12x16 + 4x1 = Dec 196. Since Hex C = Dec 12 and it is in the first rank, we have
12x16.
Problem 2: What is the Decimal number if the Hexadecimal number is 7B?
| top | | bottom |

CHANGING THE BACKGROUND COLOR OF A WEB PAGE
To change the background color of your web page, you need two things:
● the command to change the color and

● the color code (Hex code)
This is the command to change the background colour:
<BODY BGCOLOR="#RRGGBB">
BGCOLOR stands for BackGround COLOR. Note that BGCOLOR is a BODY attribute. In other
words, BGCOLOR is supported by the BODY tag as you will see in the example document given below.
Also note that the # symbol is part of the code. Leaving out the # symbol is considered a poor coding
practice.
As stated in the above "hexadecimal versus decimal" section, RR stands for the intensity of RED in the
color, GG for the intensity of GREEN, and BB for the intensity of BLUE. Here are some basic color
codes:
#000000 = Black
#FF0000 = Red
#00FF00 = Green (more like a lime color)
#0000FF = Blue
#FFFF00 = Red + Green = Yellow
#FF00FF = Red + Blue = Magenta
#00FFFF = Green + Blue = Cyan
#FFFFFF = Red + Green + Blue = White
Here are some additional codes:
#808080 = Gray
#800000 = Maroon
#800080 = Purple
#008000 = Darker Green
#808000 = Olive
#000080 = Navy
#008080 = Teal
#C0C0C0 = Silver

Thus to get a white background, the command is:
<BODY BGCOLOR=#FFFFFF"> as in:
<HTML>
<HEAD>
<TITLE>WEB PAGE DESIGN</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
*
*
*
</BODY></HTML>
You can use any color code you like and the table in Lesson Ten gives a range of sample colors and their
corresponding Hexadecimal values.
Problem 3: Using one of the above codes, what is the command line if you want a full intensity blue
background and no amounts of red and green?
You can also use the following color names instead of their color codes but keep in mind that these
names are not as widely supported as the hexadecimal values.
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and
yellow
| top | | bottom |
CHANGING THE COLOR OF ALL THE TEXT ON A WEB PAGE
To change the text color of the entire or full web page, you need two things:
● The command to change the color and

● The color code (Hex code)

Changing the color of all the text is done through the BODY tag. This also applies to text links. If you
include the links, you can change the color up to four levels.
Here are the attributes of the BODY tag to control all the levels:
TEXT="#RRGGBB" to change the color of all the text on the page (full page text color.)
LINK="#RRGGBB" to change the color of all the links on the page (from the standard blue
color.)
ALINK="#RRGGBB" to change the color of all Active links (from the standard red color). This
color occurs when you click and hold down the mouse pointer over a link. ALINK stands for Active
LINK. That is, ALINK represents the link that is currently being selected and this link is highlighted
with the color defined in the ALINK value.
VLINK="#RRGGBB" to change the color of all the links after they have been visited (from the
standard purple color). VLINK stands for Visited LINK.
You should keep in mind that some people are used to seeing blue links and purple visited links. When
they see blue underlined text, they automatically associate this with a link. Changing these colors could
cause some confusion. So do use these color attributes with care - that is, don't over do it.
Problem 4: Give the BODY command line that gives a WHITE background, RED text, GREEN
(lime) links, BLUE active links, and MAGENTA visited links.
Color attributes affect the appearance of the web page and it is possible for a viewer to disable BODY
colors. Therefore, if you set one of the BODY color attributes (such as TEXT), it is recommended that
you set them all. If you don't, your specified color could conflict with a user's default. This could result
in unreadable text. So if you want control of the colors, set all the attributes. Also, do not set the
unvisited and visited links to the same color. It will confuse your viewers. Finally, you should be aware
that some colors do make text difficult to read if viewed on a black and white monitor (although most
people today are using color monitors). One way to find this out is to test your web pages on a black and
white monitor.
| top | | bottom |
CHANGING THE COLOR OF A BLOCK OF TEXT

While all browsers support changing the color of the entire text (full page text color) on a web page,
there may still a few low level browsers that do not support changing portions of text to a different
color, or surfers using a monitor that is not a color monitor. Therefore do not rely totally on color to
emphasize text. So use color if you want, but still use logical tags such as <STRONG>, <EM>, header
tags, etc. to emphasize text.
To change the color of only a portion of text (a block of text), use the formula:
<FONT COLOR="#RRGGBB">text text text</FONT>
where RRGGBB represents the Hex code of your desired colour. FONT is a container element and so
anything between the opening and closing FONT tags will be changed to the specified color. The closing
tag, </FONT>, restores the previous text color.
Problem 5: Write the command line that produces the following line in your browser with the words
"Netscape and Internet Explorer" in blue:
Among the most popular browsers are Netscape and Internet Explorer. Both can be downloaded from
the internet.
None of the browsers which support the FONT tag, allow their users to disable it. Yet it is possible for a
user to disable BODY colors. This means that if you use FONT COLOR to change font colors and the
viewer has overridden your BODY colors, the text may wind up invisible.
One final suggestion: If you plan to use the FONT tag with a HEADER tag, you should place the FONT
tag in front of the HEADER tag and not the other way around. For some reason, a number of browsers
that do not support the FONT tag for color, won't support the HEADER tag either if the HEADER tag is
not placed right before the heading. In other words, the HEADER tag will work in:
<FONT COLOR="#FF0000"><H2 ALIGN="CENTER">heading</H2></FONT>
but will not work in:
<H2 ALIGN="CENTER"><FONT COLOR="#FF0000">heading</FONT></H2>

| top | | bottom |
USING AN IMAGE FOR THE BACKGROUND OF A WEB PAGE (wallpapering

a background)
Do you want to see this lesson with a blue stucco background? If you do, just click here and then if you
want, you can continue the lesson with the stucco background or click the BACK button to return here.
When an image is used for the background of a web page (that is, when you see the background of a
web page wallpapered), it is actually one small .gif or .jpeg (or .jpg) image repeated over and over again.
Here is the actual full size image I used for the blue stucco background:
This little image named blue_stc.jpg was repeated over and over to make up the blue stucco
background. If you look closely at a web page with an image for the background you will often see the
repeated patterns. In my blue stucco background you will likely not see the repeated patterns (that is, the
repeated blue stucco image) because the nature of this stucco background creates a seamless pattern.
You can compare placing an image for the background of a web page to wallpapering a wall in your
home. By the time the wall is covered with wallpaper, it looks like one large sheet of wallpaper, but in
fact is made up of several narrow sections of paper, in which the seams are place together in such a way
that the patterns match.
Although the background wallpaper is made up of several smaller .gif or .jpeg images, it is loaded as
one file and is a BODY attribute. If you want to save the wallpaper (and your browser lets you), just do
it in the same way you save any image. For example, if you go back to my lesson with the blue stucco
background, just click anywhere on the stucco wallpaper with the right mouse button and then choose
SAVE AS... You can then save it to any folder, even changing the name if you want to.
The command to bring in a background image is:
<BODY BACKGROUND="image.jpg">
where "image.jpg" represents the name of the image. Note two points with this BACKGROUND
attribute:

1. This BACKGROUND attribute overrides the BGCOLOR attribute simply because the image
goes over top of the background color.
2. If the background image cannot be displayed by the browser, the color specified in BGCOLOR
will be used. If you do not specify a BGCOLOR, the browser's default background color will be
used.
Here is an example of a BODY tag that changes all the text to red, the links to a darker green, the active
link to blue, the visited link to a darker magenta, with a stucco background (which is the one I used).
<BODY TEXT="#FF0000" LINK="#336633" ALINK="#0000FF" VLINK="#FF66FF"

BACKGROUND="blue_stc.jpg">
You can have these attributes in any order and you do not have to use all of them. However, as we
learned earlier in this lesson, if you set one attribute, you should set them all to avoid possible conflicts
with a viewer's default values.
Note that an image for a background will result in your web page taking longer to load than a web page
with no image for a background. That is because it is an image and images take longer to load. I have
seen some very large images for backgrounds that result in web pages taking far too long to load. This
can turn off visitors who may leave your website before the page is finished loading.
You can also control the background color while the web page is loading the background image. For
example, if you do not want that gray background while the background image loads, you could change
it to a white (or some other color) background. As soon as the background image appears, it will wipe
over the white background. For example, the following BODY tag is the same as the above one except
that the background color will be white while the stucco background loads (the same as my stucco
example you visited). Try different colors and you will get different effects.
<BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#336633" ALINK="#0000FF"

VLINK="#FF66FF" BACKGROUND="blue_stc.jpg">
You are encouraged to include the BGCOLOR attribute along with the BACKGROUND attribute
because if the background wallpaper image cannot be displayed by the browser, the color specified in
BGCOLOR will be used.
You can create your own image backgrounds or you can take them off the net. There are several places
where you can find background images that are free to take. Just go to your favorite search engine and
do a search for "free background images".
| top | | bottom |

A FIXED BACKGROUND IMAGE
Every once in a while I get an email asking me for the coding to prevent the background image from
scrolling with the text. In other words, they would like to see the background image in a fixed position
with the text and images scrolling over top of it. Well, to prevent the background image from scrolling
(and thus also preventing the image from repeating itself over and over again), you use the
BGPROPERTIES attribute as in:
<BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" BACKGROUND="blue_stc.jpg"

BGPROPERTIES="fixed">
Note: The BGPROPERTIES attribute will only work in Explorer browsers as BGPROPERTIES is an
Explorer attribute. In other words, Netscape does not support the BGPROPERTIES attribute and so will
ignore the attribute and scroll the image with the text. Therefore it is a good idea to also see what your
web page will look like in Netscape or what it will look like without the BGPROPERTIES attribute.
Unfortunately there is no similar attribute that can be used for Netscape browsers.
| top | | bottom |
ANSWERS
1. Dec 99 = Hex 63; Dec 255 = Hex FF; Dec 128 = Hex 80, so the code would be "#63FF80".
2. Hex 7B = 7x16 + 11x1 = 112 + 11 = 123
3. <BODY BGCOLOR="#0000FF">
4. <BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#00FF00" ALINK="#0000FF"
VLINK="#FF00FF">
You can use these BODY attributes in any order.
5. Among the most popular browsers are <FONT COLOR="#0000FF">Netscape and Internet
Explorer</FONT>. Both of them can be downloaded from the Internet.
| Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Ten |



COLOR TABLE - html tutorials in web page design by J. Gilson
LESSON TEN - RGB COLOR TABLE

| About the color table | | Color table |
ABOUT THE COLOR TABLE
In Lesson Nine we learned that color codes must be given as hexadecimal numbers in the form
"#RRGGBB" where RR represents the intensity of red, GG the intensity of green and BB the intensity
of blue. Each intensity is a hexadecimal number from Hex 00 to Hex FF (= Dec 00 to Dec 255 = 256
intensities for each color). When using color codes in your HTML documents, you must have the #
symbol in front of the color code and the whole code must be enclosed within quotation marks. Below is
a table giving various colors and their corresponding codes. Since there are over 16 million color codes,
this table shows a cross sampling through all the codes. The table gives color intensities as multiples of
Hex 33 (= Dec 51). These multiples are HEX 00, 33, 66, 99, CC, and FF or 6 intensities of each color.
Thus we have 6 x 6 x 6 = 216 color codes in the table. You can use values other than those in the table
and I did just that with the last two rows using the color code "#800000" along with a few variations and
other color codes. So you can use any legal code you like. However, most browsers cannot distinguish
all these millions of color shades. For example, there are many codes that are so close to red that the
browser will simply round off to the red color code in the table. So if you give it a code whose shade the
browser cannot distinguish, it will "round off" to the nearest color in the table or one that it can
distinguish.
If you do not see any colors in the table given below, then your browser is not able to handle colors in
this way. You can do one of two things:
1. Get a higher version of your browser. You can download the latest version of either Netscape
Communicator or Internet Explorer by clicking on the appropriate button.
2. Or if you click here, you will see all the codes and their colors in an image table.

You use these color codes to change the background color, the full page text color, blocks of text, links,
active links and visited links. All of these except for changing blocks or portions of text, are done as
BODY attributes. For example,
<BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#00FF00" ALINK="#0000FF"

VLINK="#FF00FF">
gives a WHITE background, RED text, GREEN (lime) links, BLUE activated links, and
MAGENTA visited links. See Lesson Nine if you need to review the meanings of these attributes.
Note that the "0" in the codes is the number "0" and not the letter "O".
To change only a block of text, use the FONT tag with the COLOR attribute as in:
<FONT COLOR="#CC99FF">text text text</FONT>
where #CC99FF represents the color code. The closing FONT tag, (</FONT>), restores the previous
text color.
| top | | bottom |
COLOR TABLE
000000 000033 000066 000099 0000CC 0000FF
330000 330033 330066 330099 3300CC 3300FF
003300 003333 003366 003399 0033CC 0033FF
333300 333333 333366 333399 3333CC 3333FF
006600 006633 006666 006699 0066CC 0066FF
336600 336633 336666 336699 3366CC 3366FF
009900 009933 009966 009999 0099CC 0099FF
339900 339933 339966 339999 3399CC 3399FF

00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
660000 660033 660066 660099 6600CC 6600FF
990000 990033 990066 990099 9900CC 9900FF
663300 663333 663366 663399 6633CC 6633FF
993300 993333 993366 993399 9933CC 9933FF
666600 666633 666666 666699 6666CC 6666FF
996600 996633 996666 996699 9966CC 9966FF
669900 669933 669966 669999 6699CC 6699FF
999900 999933 999966 999999 9999CC 9999FF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF

CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
800000 800033 800066 800099 8000CC 8000FF
800080 008000 808000 000080 008080 C0C0C0
| Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Eleven |


BASIC TABLES - html tutorials in web page design by J. Gilson
LESSON ELEVEN - BASIC TABLES

| Introducing tables | | A basic table | | The BORDER attribute |

| Cell spacing and cell padding | | Table headings and the WIDTH attribute |
| Centering data | | <BR>, single cell tables, cell links, cell background colors |
| Images in cells |
INTRODUCING TABLES
I like tables and make good use of them. My main home page uses a table to point to each lesson and in
Lesson Ten, I used a table to print all the colors and their codes. Tables are great for summarizing large
amounts of information and for structuring data. Tables allow viewers to find what they need quickly
and easily. Tables are part of HTML 3.2 specifications and most of the popular browsers now support
them. This lesson is for those of you who want to incorporate a table into a web page and we will begin
with a basic table and progress from there. Lesson Twelve continues the study of tables with a look at
some of the more advanced features of table design.
| top | | bottom |
A BASIC TABLE
Here is a basic table. Note that there is no border around the table and that there are no lines separating
the data in the table.
VOLUNTEER SCHEDULE
12 P.
2 P.M.
9 A.M.
M.
NURSERY John Mary Marcia
SECURITY Kimberly George Ken

TICKETS Jacob Nancy Adam
Note that even though there are no lines to separate the items in the table and that some names are longer
than others, everything still nicely lines up. I am going to build on this example and I would like you to
follow along with me and also to do some of your own experimenting. So, SWITCH to NOTEPAD and
type in the following HTML document that gives the above table. Once you have typed it in, SAVE the
document, SWITCH back to your browser, and load the document to see the table. An explanation of the
commands is given below the document.
<HTML>
<HEAD>
<TITLE>VOLUNTEER SCHEDULE</TITLE>
</HEAD>
<BODY>
<H3 ALIGN="CENTER">
<TABLE>
<CAPTION><STRONG>VOLUNTEER SCHEDULE</STRONG></CAPTION>
<TR>
<TD>
<TD>9 A.M.
<TD>12 P.M.
<TD>2 P.M.
<TR>
<TD><STRONG>NURSERY</STRONG>
<TD>John
<TD>Mary
<TD>Marcia
<TR>
<TD><STRONG>SECURITY</STRONG>
<TD>Kimberly
<TD>George
<TD>Ken
<TR>
<TD><STRONG>TICKETS</STRONG>
<TD>Jacob
<TD>Nancy
<TD>Adam
</TABLE></H3>
</BODY></HTML>
Here is an explanation of this table.

1. A table must be declared with TABLE tags. Therefore <TABLE> denotes the beginning of a
table and </TABLE> denotes the end of the table. If you leave off the closing tag, your table
won't work. TABLE is a container element and so everything contained between the opening and
closing TABLE tags is part of the table.
2. This table begins with a CAPTION tag. The CAPTION tag is optional. It represents or describes
the contents of your table. Most browsers will automatically center the caption above the table
contents. A caption can be placed above or below the table. To place the caption below the table,
use the attribute ALIGN="BOTTOM" as in <CAPTION ALIGN="BOTTOM"> (try it). Note
also that I strongly emphasized the caption and my headings. This is optional but it does serve the
purpose of making your caption and headings stand out more.
3. A table is made up of rows and columns and tables are generated row by row with each row
going from left to right. A row is a horizontal collection of cells. Therefore, 9 A.M., 12 P.M. and
2 P.M. are in the first row; NURSERY, John, Mary and Marcia make up the second row;
SECURITY, Kimberly, George and Ken make up the third row. Our table has four rows.
Columns are vertical. Therefore NURSERY, SECURITY, TICKETS are in the first column,
while 9 A.M., John, Kimberly, and Jacob make up the second column, and so on.
4. Rows are divided into cells and each cell in our example is a data cell. A cell can also contain no
data (the first cell in the first row is empty or blank). Cells can also overlap. That is, a cell can
span across more than one row or span more than one column and we will deal with that in
Lesson Twelve.
5. TD stands for Table Data. It denotes the beginning of a new cell. You simply place this tag in
front of the information you want in the cell. Thus TD is used to mark up each individual cell.
The TD cell can contain almost anything such as tags that center, emphasize, and color text. A
data cell can contain lists, images, and even nested tables (a cell containing a table). The list goes
on. The closing TD tag (</TD>) is optional. Some people use it as good practice to close each
table cell explicitly. If you have a table inside a cell (nested tables), then you should use the
closing tag to close each cell and row as some browsers get nested tables wrong and will display
them incorrectly. So use </TD> if you want, as in:
<TD>9 A.M.</TD>
<TD>12 P.M.</TD>
but each new TD tag implies that the previous one has ended.
6. You begin each row with a <TR> tag. TR stands for Table Row. Tables are always constructed
as sequences of rows. Thus <TR> tells the browser that a new row is now beginning. If you don't
use the TR tag for each new row, the browser assumes the cells will keep going to the right.
There is also an optional end tag (</TR>) to explicitly terminate a row. However, each TR
implies that the previous row has ended. Again, if you have a table inside a cell, you are
recommended to close all cells and rows as some browsers need them to get the nested tables to
print correctly.
7. I used <H3 ALIGN="CENTER"> to center the table. The header tag, H3, has no effect on the
data. I could have used any header tag and the results would have been the same. You can also

use ALIGN="RIGHT" to have the table aligned with the right side of the browser screen (right
justified). If you remove this attribute, you will see the table aligned with the left side of the
browser screen (left justified). Note that some browsers may not honor the ALIGN attribute to
center a table.
8. Notice in our example, that the width of each column is not the same. This is because the width
of each column is determined by the width of the largest cell in that column.
| top | | bottom |
THE BORDER ATTRIBUTE
Now SWITCH to NOTEPAD and change the opening TABLE tag to:
<TABLE BORDER="1">
After you have saved the change, load the web page into your browser. This is what you should see:
VOLUNTEER SCHEDULE
12 P.
9 A.M. 2 P.M.
M.
The table now has a border around the outside and each cell is separated from the other cells with
borders. In some low level browsers, there will be no border around the empty cell. "Cells" are the
individual rectangles in the table. The "1" in BORDER="1" is called the "value" of the BORDER
attribute and here it specifies a border around the table 1 pixel wide. The quotation marks around the "1"
are optional. If you want to have a wider border, then change the "1" to a bigger number. For example,
change the "1" to a "10" so that we have a border of 10 pixels. Do this now to see the effect. Below is
the output with a border width around the table of 10 pixels. Try different pixel widths to see if there is
one you would like to use in your tables. Note: in some low level browsers, a wider border will only be
placed on the right side of the table and on the bottom of the table. In other words, there will be no wide
border around the top and left side of the table.
VOLUNTEER SCHEDULE

12 P.
9 A.M. 2 P.M.
M.
The default value for BORDER is 1. Therefore <TABLE BORDER> would have a border 1 pixel wide.
The HTML 3 draft did not include the values for the BORDER attribute and so browsers which use this
table model might draw a border around your table for BORDER="0". Try BORDER="0" to see what
happens to the table border.
Note that the empty cell is different in appearance from the rest of the cells. If you want it to look like
the rest of the cells, just place the space character in the cell. The invisible space character is the
ampersand command " " and was studied in Lesson Five. Let's do this now. Go back to our
HTML document in NOTEPAD and change the first <TD> tag that creates the empty cell to:
<TD>
Save this change, load the document into your browser and note that the browser now shows the empty
cell with the same appearance as a non empty cell.
VOLUNTEER SCHEDULE
12 P.
9 A.M. 2 P.M.
M.
| top | | bottom |
CELL SPACING and CELL PADDING
Change the TABLE command in our HTML document to include the CELLSPACING attribute as in
(also change the border value back to "1"):

<TABLE BORDER="1" CELLSPACING="5">
The quotation marks around the value "5" are also optional. Now when you load this document into your
browser, you should see:
VOLUNTEER SCHEDULE
12 P.
9 A.M. 2 P.M.
M.
Note that CELLSPACING affects the amount of spacing between cells. That is, the value in the
CELLSPACING attribute indicates how many pixels of white space there should be between individual
cells. Try different values for different effects. If you do not include a value, the default cell spacing
value is 2 pixels. Note: in some low level browsers, the borders around adjacent cells will also be
separated by the same number of pixels. This means that the borders will not look continuous. Tables
will look their best in all browsers if you use a CELLSPACING value of "0".
Now let's add the CELLPADDING attribute and change the cellspacing attribute to "2". Change the
TABLE command to:
<TABLE BORDER="1" CELLSPACING="2" CELLPADDING="5">
and this is what you should see:
VOLUNTEER SCHEDULE
12 P.
9 A.M. 2 P.M.
M.
Problem 1: What do you think is the effect of adding the CELLPADDING attribute to the TABLE tag?

If you are unsure, just change the number 5 to a bigger number.
| top | | bottom |
TABLE HEADINGS (<TH>) and the "WIDTH" ATTRIBUTE
The Table Header tag is often used when the cell's contents is a heading or label. For example, in our
table, The times (9 A.M., 12 P.M., 2 P.M.) are headings for the columns, while NURSERY,
SECURITY, and TICKETS are headings for the rows. To indicate these items as headings, you can use
the Table Header tag (<TH>) instead of the Table Data tag (<TD>). A cell that contains a heading is
called a "Header Cell".
To see the effect of the header tag, change our HTML document to look like the following (I also
changed the BORDER to "3", the CELLSPACING TO "0" and CELLPADDING to "3" - just so you can
see the different effects of these attribute values on the table):
<HTML>
<HEAD>
<TITLE>VOLUNTEER SCHEDULE</TITLE>
</HEAD>
<BODY>
<H3 ALIGN="CENTER">
<TR>
<TD>
<TH>9 A.M.
<TH>12 P.M.
<TH>2 P.M.
<TR>
<TH>NURSERY
<TD>John
<TD>Mary
<TD>Marcia
<TR>
<TH>SECURITY
<TD>Kimberly

<TD>George
<TD>Ken
<TR>
<TH>TICKETS
<TD>Jacob
<TD>Nancy
<TD>Adam
</TABLE></H3>
</BODY></HTML>
This is what your table should now look like:
VOLUNTEER SCHEDULE
12 P.
9 A.M. 2 P.M.
M.
Note the headings in the header cells are strongly emphasized (normally in bold). For this reason I
removed the STRONG tags from all the row and column headings. They became redundant. Note also
that each heading is centered in its cell (for example, note how the label TICKETS is centered in the
cell). This will become more noticeable in the next example. If you have more than one row in a cell, the
headings will also be centered vertically.
Now change the TABLE tag to include the WIDTH attribute. Change the TABLE tag to:
<TABLE BORDER="3" CELLSPACING="0" CELLPADDING="3" WIDTH="100%">
Now load the web page and this is what you should see:
VOLUNTEER SCHEDULE
9 A.M. 12 P.M. 2 P.M.


The table has been expanded to the width of the browser screen (100 per cent of the width of the screen).
If this did not happen, then your browser does not recognize the WIDTH attribute in this situation.
Notice again that the headings are emphasized and centered but the data in the cells are not centered.
You can use any suitable percentage for the width or you can specify the width in pixels. If your browser
did not accept the WIDTH attribute in the above example, try it again but specify the width in pixels this
time. For example, try WIDTH="600" (no %) and see what happens.
Specifying the width in pixels will give an exact width of the table which can't be changed. Specifying
the width as a percent of the current screen is preferred because the table will be expanded or
compressed to fit the width of the viewer's browser screen. Therefore using a percent will allow the table
to be changed if the window is resized. Using pixels for the width means that if the viewer resizes the
window to something smaller than the width you have specified, the view will not be able to see the
entire table.
| top | | bottom |
CENTERING DATA
You can control the placement of data in the individual cells by using the ALIGN attribute. For example,
let's center the name John, left justify the name Mary, and right justify the name Marcia. Let's also
center the entire SECURITY row (Kimberly, George and Ken) by placing the ALIGN attribute with the
TR tag for this row. To do this, change the following four sequential lines of our HTML document
(repeated here):
<TD>John
<TD>Mary
<TD>Marcia
<TR>
to the following:
<TD ALIGN="CENTER">John
<TD ALIGN="LEFT">Mary
<TD ALIGN="RIGHT">Marcia
<TR ALIGN="CENTER">
Now save the web page and load it into your browser. This is what you should see.
VOLUNTEER SCHEDULE

9 A.M. 12 P.M. 2 P.M.

Note that the name "John" was centered in the cell, "Mary" was aligned to the left side of the cell (which
is the default position) and that "Marcia" was aligned to the right side of the cell. Note also that the <TR
ALIGN="CENTER"> centered the contents of the entire row.
You can also control the width of any column. For example, let's change the width of the first column to
40% of the browsers screen width, the 9 A.M. column to 20% of the screen width, and the 12 P.M.
column to 10%. Change the first three cells in the first row to:
<TD WIDTH="40%">
<TH WIDTH="20%">9 A.M.
<TH WIDTH="10%">12 P.M.
Now save these changes and load the web page into your browser. This is what you should see:
VOLUNTEER SCHEDULE
9 A.M. 12 P.M. 2 P.M.

Note that the first column of headings has been expanded to 40% of the width of the browser screen.
The column with the heading 9 A.M. is 20% of the width of the screen and the 12 P.M. column has been
shrunk to only 10% of the screen width which may have forced the heading to be printed over two lines
(each line still centered). Again, if percentages have no effect on the column spacing, try specifying the
width in pixels.
Problem 2: What is the width of the last column in the above table?
| top | | bottom |

USING <BR>, SINGLE CELL TABLES, CELLS AS LINKS, CELL

BACKGROUND COLORS
USING THE <BR> TAG and SINGLE CELL TABLES
If a cell becomes too long in relation to the appearance of other cells, insert the <BR> tag. A cell can
contain as many lines of information as you want. For example, here is one cell from my main home
page. I removed the link as this is covered in the next section (each of my cells is a link to a lesson).
LESSON SIX
Creating Page Links,
Link Buttons, E-
mail
Here are the lines that make up this cell. Type in this new HTML page and be sure to include the
HTML, HEAD, TITLE and BODY elements.
<H3 ALIGN="CENTER">
<TABLE BORDER="3" CELLPADDING="3">
<TR>
<TD ALIGN="CENTER">LESSON SIX<BR>Creating Page Links,<BR>Link Buttons, E-mail
</TABLE></H3>
Using a value of "1" for the TABLE attribute will give the best looking border in low level browsers.
Note that a single cell table is a great way to place a box or frame around something you want to
emphasize or set apart. Notice the use of <BR> tags to force line breaks at key points in the text.
USING THE CELL AS A LINK TO ANOTHER WEB PAGE
There is much that you can do with data cells. One is using the cell as a link to another web page. Every
cell in my home page is a link to another page. So here is a problem for you to solve:
Problem 3: Change the above TD line which is:
<TD ALIGN="CENTER">LESSON SIX<BR>Creating Page Links,<BR>Link Buttons, E-mail
so that the entire cell becomes a link to Lesson Six. The file name (URL) for Lesson Six is "lesson6.
htm".

ADDING A BACKGROUND COLOR TO ANY CELL
This section assumes that your browser supports background colors.
Problem 4: Now change your answer to Problem 3 to include a light yellow background. Use
"#FFFFCC" for the color code (taken from the color table in Lesson Ten). Here is the cell with the light
yellow background:
LESSON SIX
Creating Page Links,
Link Buttons, E-
mail
Let's now try another problem:
Problem 5: The following table has a light yellow background in each heading cell and in the empty cell.
Change what is necessary in the "VOLUNTEER SCHEDULE" HTML document to make the table look
like the following: (set the border to 3 pixels, cell spacing to 0 pixels and cell padding to 3 pixels. Also
use the same yellow color code as in the previous example.)
VOLUNTEER SCHEDULE
9 A.M. 12 P.M. 2 P.M.

| top | | bottom |
PLACING AN IMAGE IN A CELL

To place an image in a cell, you follow the same rules as for placing an image on a web page. The
following example places a border 10 pixels wide around an image which is placed in a single cell table
and also makes the image a link to my home page.
The BODY of the HTML document that gives this example is:
<H3 ALIGN="CENTER">
<TABLE BORDER="10" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD><A HREF="index.htm"><IMG SRC="cross1.gif" ALIGN="CENTER" ALT="cross"
WIDTH="90" HEIGHT="120" BORDER="0"></A>
</TABLE></H3>
Experiment with different attribute values. Add some cell padding and cell spacing. Place a border
around the image as well as a border around the table, or experiment with the ALIGN attribute as in
ALIGN="RIGHT" and ALIGN="LEFT" or remove the ALIGN attribute altogether. You can learn a lot
from experimenting. For example, if you do not want the image to be a link, just remove the anchor tags
and the HREF attribute as in:
<TD><IMG SRC="cross1.gif" ALIGN="CENTER" ALT="cross" WIDTH="90" HEIGHT="120"

BORDER="0">
If you use images in a table, be sure to specify the WIDTH and HEIGHT attributes in the IMG tag. This
allows the browser to lay out the table in advance, so it can draw the table and place the text above and
below the table before the image is loaded. Not using the WIDTH and HEIGHT attributes can cause
unnecessary delays in displaying your web page.
| top | | bottom |

ANSWERS
1. CELLPADDING indicates how many pixels of space there should be between a cell's contents
and the edges of the cell. Again, the quotation marks around the value are optional.
2. Since the percents of the first three columns add to 70 (40+20+10), the width of the last column
must be 100% - 70% = 30%.
3. To turn a cell into a link, you need the anchor container element (A) and the HREF attribute
pointing to the name and location where the cell is to link to. If the entire cell is to be the link, the
closing anchor tag (</A>) must be placed at the end of the cell's contents. Since we want to load
Lesson Six, it is assumed to be in the current directory. The TD line that answers the problem is:
<TD ALIGN="CENTER"><A HREF="lesson6.htm">LESSON SIX<BR>Creating Page Links,

<BR>Link Buttons, E-mail</A>
If you want to link to a website anywhere on the WWW, be sure the HREF attribute contains the
complete address (URL) of the website.
4. BGCOLOR changes the background color. Up until now, we have assumed that the BGCOLOR
attribute belongs only to the BODY tag. Think of each cell as being a separate entity - almost like
a separate page. Thus you have a lot of control over what goes into any cell. In this example, the
BGCOLOR is a TD attribute. Here is the line that will give the desired light yellow background
color:
<TD ALIGN="CENTER" BGCOLOR="#FFFFCC"><A HREF="lesson6.htm">LESSON

SIX<BR>Creating Page Links,<BR>Link Buttons, E-mail</A>
5. To change the color for the entire first row in the table - including the empty cell, add the
BGCOLOR attribute to the TR tag. Using BGCOLOR with TR changes the background color of
the entire row. To change the background color of individual cells, you need to specify the
BGCOLOR attribute in each of those cells. So here is the body of the HTML document for this
table:
<H3 ALIGN="CENTER"> <TABLE BORDER="3" CELLSPACING="0"

CELLPADDING="3" WIDTH="100%">
<TR BGCOLOR="#FFFFCC">
<TD>
<TH>9 A.M.
<TH>12 P.M.
<TH>2 P.M.
<TR ALIGN="CENTER">
<TH BGCOLOR="#FFFFCC">NURSERY

<TD>John
<TD>Mary
<TD>Marcia
<TR ALIGN="CENTER">
<TH BGCOLOR="#FFFFCC">SECURITY
<TD>Kimberly
<TD>George
<TD>Ken
<TR ALIGN="CENTER">
<TH BGCOLOR="#FFFFCC">TICKETS
<TD>Jacob
<TD>Nancy
<TD>Adam
</TABLE></H3>
In the color table in Lesson Ten I basically alternated one row of cells containing the codes with
one row of cells containing the colors of those codes using the BGCOLOR attribute.
| Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Twelve |


ADVANCED TABLES - html tutorials in web page design by J. Gilson
LESSON TWELVE - ADVANCED TABLES

| Spanning columns and rows | | Printing a calendar | | A vertical side-line |

| Tables in browsers that do not support them |
SPANNING COLUMNS AND ROWS
COLSPAN
This lesson assumes that you understand the basic tables presented in Lesson Eleven and are now ready
to take a look at some more advanced table features.
You may have noticed in the table on my main home page that I did not use the CAPTION tag. Instead,
I placed the instructions for the table in the first row which spanned across all the columns. For example,
here is a simplified version of the table on my home page. I grouped the first four lessons together and
used a value of "3" for each of the BORDER, CELLSPACING and CELLPADDING attributes.
CHOOSE ANY LESSON
LESSON THREE LESSON FOUR

LESSON ONE LESSON TWO
<BR>, <P>, <HR> Emphasizing text
Introducing HTML Getting started
and other basic tags and Heading tag
Here are the lines that generated this part of the table (I double spaced the command lines for easier
viewing):
<TABLE BORDER="3" CELLSPACING="3" CELLPADDING="3" WIDTH ="100%">
<TR>

<TD ALIGN="CENTER" COLSPAN="4"><H3> <BR>CHOOSE ANY LESSON</H3>
<TR>
<TD ALIGN="CENTER"><A HREF="lesson1.htm">LESSON ONE<BR>Introducing HTML</A>
<TD ALIGN="CENTER"><A HREF="lesson2.htm">LESSON TWO<BR>Getting started</A>
<TD ALIGN="CENTER"><A HREF="lesson3.htm">LESSON THREE<BR><BR>, <P>,

<HR><BR> and other basic tags</A>
<TD ALIGN="CENTER"><A HREF="lesson4.htm">LESSON FOUR<BR>Emphasizing text<BR>

and Heading tag</A>
</TABLE>
The line that generated the first row that spanned across all four columns is:
<TD ALIGN="CENTER" COLSPAN="4"><H3> <BR>CHOOSE ANY LESSON</H3>
1. To span across any number of columns, use the COLSPAN attribute and state how many
columns the row is to span across. Thus in our example, COLSPAN="4"(the quote marks are
optional) tells the browser to span the first row across four columns.
2. The second row begins with LESSON ONE and note the <TR> tag to signify the beginning of
this row. Recall that <TR> stands for Table Row. Each new row must be designated with a
<TR> tag.
3. Note that each cell in row 2 is a link to another page. That is, each cell is contained between the
anchor tags <A> and </A>, and each HREF points to another file.
4. Note also the use of the <BR> tag to end lines at certain points in each cell. This is needed to
prevent the cell from becoming too wide.
5. The topics in the Lesson Three cell includes the <BR>, <P>, and <HR> tags. When you place the
"<" and ">" angle brackets around a word, the browser will treat the word as a tag and won't print
the word. So if I want to have <BR> treated by the browser as text and not as a tag, I use
ampersand commands to print the "<" and ">" symbols. The ampersand command for "<" is <.
The lt stands for "less than" The letters lt must be written in lower case as shown. The ampersand
command for ">" is > (greater than). The ampersand command was introduced in Lesson Five
and so if you need more information on this command, please visit Lesson Five.
6. I placed an ALIGN="CENTER" in each cell to center the contents of the cell. As discussed in
Lesson Eleven, I could have used only one ALIGN="CENTER" for the entire row if it is placed

with the TR tag as in:
<TR ALIGN="CENTER">
The following example shows two column spans. The first column span is the title which spans across
all three columns. The second column span is in the second row and is the cell "Starting Speed in Feet
per Minute" and it spans across the second and third columns.
METALS AND THEIR REASONABLE CUTTING

SPEEDS
Starting Speed
MATERIAL
in Feet per Minute
High-Speed
Carbide
Steel
Stainless Steel 50 150
Cast Iron 74 225
Brass 300 800
Copper 300 1000
Here are the lines that make this table. You any wish to SWITCH to NOTEPAD and type it in, then save
and load it into your browser to see if everything comes out the same. We will be making a change to
this table in the next section.
<HTML>
<HEAD>
<TITLE>METAL CUTTING SPEEDS</TITLE>
</HEAD>
<BODY>

<TR>
<TH COLSPAN="3">METALS AND THEIR REASONABLE CUTTING SPEEDS
<TR>
<TH>MATERIAL
<TH COLSPAN="2">Starting Speed<BR>in Feet per Minute
<TR>
<TH>

<TH>High-Speed<BR>Steel
<TH>Carbide
<TR>
<TD>Stainless Steel
<TD ALIGN="CENTER">50
<TR>
<TD>Cast Iron
<TR>
<TD>Brass
<TR>
<TD>Copper
</TABLE>
</BODY></HTML>
Now for a discussion:
1. Note that I used <TH> instead of <TD> for the cells that contain the headings. TH (Table
Header) both centers and emphasizes the headings.
2. Since "Starting Speed in Feet per Minute" spans across two columns, it is considered to take the
place of the cells in row 2, columns 2 and 3.
3. Note that each <TR> indicates the beginning of a new row in the table.
4. The first cell in row 3 is blank and to make it take on the appearance of the other cells, I placed
the space character ( ) in the cell.
5. Each number was centered in its cell with the ALIGN="CENTER" attribute.
ROWSPAN
Let's take the last example, and have the heading MATERIAL fill the first two rows in the first column
so that the empty cell is eliminated. In other words, let's change the table to look like:
METALS AND THEIR REASONABLE CUTTING SPEEDS

Starting Speed
in Feet per Minute
MATERIAL
High-Speed
Carbide
Steel
Stainless Steel 50 150
Cast Iron 74 225
Brass 300 800
Copper 300 1000
There are really only two changes that have to be made to have "MATERIAL" span two rows:
1. remove the empty cell and

2. add the ROWSPAN="2" to the <TH> tag for the "MATERIAL" cell.
Here are the first few rows in the BODY of the document. I also added <BR>'s in the first row of the
table to force an empty line above and below the title of the table. In most browsers, the <P> won't work
and in some browsers using the <BR> tag this way will not work either. But it will look good in those
browsers that do accept the <BR> to force blank or empty lines.

<TR>
<TH COLSPAN="3"><BR>METALS AND THEIR REASONABLE CUTTING SPEEDS<BR><BR>
<TR>
<TH ROWSPAN="2">MATERIAL
<TH COLSPAN="2">Starting Speed<BR>in Feet per Minute
<TR>
<TH>High-Speed<BR>Steel
<TH>Carbide
<TR>
Note that "MATERIAL" spans row 2, column 1 and row 3, column 1. These two cells are now
considered occupied. Thus the first <TH> for row 3 (High Speed Steel) is considered to be in the second
column. Therefore "High-Speed Steel" in the third row was printed in the second column as the first
column was occupied. So if a cell spans more than one row or column, just ignore the cell and move to
the next available cell in the row.
Now it's your turn to make up a table. There is nothing like learning by doing.
Problem 1: Make up the HTML document that will give the following table:

DRILL SPEEDS
CUTTING
DIAMETER SPEED
MATERIALS RPM
IN INCHES
Feet Metres
1. Brass 2.5 350 560
2. Cast iron 4.5 69 201
3. Copper 1 300 1200
4. Stainless Steel 3.625 46 167
| top | | bottom |
PRINTING A CALENDAR
A calendar is nothing more than a table with a lot of rows and columns.
Problem 2: Write the HTML document that gives the following calendar. Use the value "3" for each of
the attributes BORDER, CELLSPACING and CELLPADDING.
JULY
Sun Mon Tue Wed Thu Fri Sat
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

| top | | bottom |
A SIDE-LINE
If you would like to see your web page or part of your web page separated into two sections by a vertical
line (a side-line), you could set up it up as a one row, two column table. You could choose a table
WIDTH of 100% and a table HEIGHT of any number of pixels that you desire. The width of the table
can also be expressed in pixels. If your browser supports full color, the left side is colored yellow.
Here is an example:
This side is colored yellow This side just shows plain text.
Feel free to place anything You can color it too if you want.
on this side.
This side is 70% of the width of the screen.
This cell is 30% of the
browser screen width. Both sides are 600 pixels long.
But you can change it to anything you want.
Here is the BODY of the HTML document that gives this table.
Note that the HEIGHT is A brief explanation is given to the left.
in pixels (600) and not as a
percent. <TABLE BORDER="1" CELLSPACING="0"
VALIGN="TOP" (Verticle CELLPADDING="10" WIDTH="100%" HEIGHT="600">
ALIGN) aligns the text <TR VALIGN="TOP">
with the top of the cell. <TD WIDTH="30%" BGCOLOR="#FFFF00">This side is colored
yellow
<P>Feel free to place anything on this side.
<P>This cell is 30% of the browser screen width.
<TD WIDTH="70%">This side just shows plain text.
<P>You can color it too if you want.
<P>This side is 70% of the width of the screen.
<P>Both sides are 600 pixels long.
<P>But you can change it to anything you want.
</TABLE>

Now if you do not want a border, just remove the TABLE attributes BORDER and CELLSPACING so
the TABLE tag becomes:
<TABLE CELLPADDING="10" WIDTH="100%" HEIGHT="600">
Here is what you should see:
This side is colored yellow This side just shows plain text.
Feel free to place anything You can color it too if you want.
on this side.
This side is 70% of the width of the screen.
browser screen width. Both sides are 600 pixels long.
But you can change it to anything you want.
Here is the BODY of the HTML document that gives this table.
Note that the HEIGHT is A brief explanation is given to the left.
in pixels (600) and not as a
percent. <TABLE CELLPADDING="10" WIDTH="100%"
VALIGN="TOP" (Verticle HEIGHT="600">
ALIGN) aligns the text <TR VALIGN="TOP">
with the top of the cell. <TD WIDTH="30%" BGCOLOR="#FFFF00">This side is colored
yellow
<P>Feel free to place anything on this side.
<TD WIDTH="70%">This side just shows plain text.
<P>You can color it too if you want.
<P>This side is 70% of the width of the screen.
<P>Both sides are 600 pixels long.
<P>But you can change it to anything you want.

</TABLE>
Here is another example of a side-line dividing the screen into two two columns. I have removed the
yellow background color but you could experiment by leaving it in to see the effect. An explanation and
the BODY of this HTML document is given below the table.
This is the right side of the table.
I could have placed the vertical line (the image) in this cell by
aligning it to the left side of the cell.
This line is 600 pixels in height (the same length as the table) and 2
pixels wide.

Feel free to place

anything on this side.

browser screen width.
The vertical line is really

an image placed in this
cell and aligned to the

right side of the cell.
As stated in the above "invisible" table, the line is only an image which I named "linevert.gif". I placed it
in the first cell and aligned it to the right side of the cell. I just as easily could have placed it in the
second cell and aligned it to the left side of the cell. Feel free to save this line and use it in your own web
pages. As you can see below in the IMG statement, I defined the line to be 600 pixels long and 2 pixels
wide. If you save this image, be sure to experiment with different lengths and widths.
Here is the BODY of the HTML document that gives rise to this table.
<TABLE CELLPADDING="10" WIDTH="100%" HEIGHT="600">

<TR VALIGN="TOP">
<TD WIDTH="30%"><IMG SRC="linevert.gif" ALIGN="RIGHT" HEIGHT="600" WIDTH="2"
ALT="">Feel free to place anything on this side.
<P>The vertical line is really an <STRONG>image</STRONG> placed in this cell and aligned to the
right side of the cell.<BR>
<TD WIDTH="70%">This is the right side of the table.
<P> I could have placed the vertical line (the image) in this cell by aligning it to the left side of the cell.
<P> This line is 600 pixels in height (the same length as the table) and 2 pixels wide.
</TABLE>
You learned in Lesson Eleven that the WIDTH can also be expressed in pixels instead of as a percent.
Therefore, instead of WIDTH="30%" for the first cell, you could use, for example, WIDTH="200"
representing 200 pixels. If the average screen width is 600 pixels, then 200 pixels represents one third of
the width. I often see the first cell defined in pixels on other web pages. There is no need to define the
width at all for the second cell as screen widths vary from browser to browser. As you learned in the last
lesson, specifying a width in pixels will give an exact width which can't be changed (and you may want
this to be the case). Specifying the width as a percent of the current screen will allow the table to be
expanded or compressed to fit the viewer's browser screen. It would be a good learning experience to do
some experimenting with the WIDTH attribute.
There is one more side-line option that you will find very interesting and one that you may want to
consider. To see this one, along with an explanation, just click here.
| top | | bottom |

TABLES IN BROWSERS THAT DO NOT SUPPORT THEM
Many people today use browsers that support tables and tables are part of the HTML 3 specifications.
However, some early version browsers and text only browsers do not support tables. It can be very
confusing for your viewer if he or she is using a browser that does not support tables. The data will be
there, but the formatting is lost. For this reason on my main home page I offer an alternate home page
for viewers with browsers that do not support tables.
If you do not want to have an alternate page, there are some things you can do with your table so that if a
browser does not support tables, the data will still be readable. One thing you can do is to use the
Paragraph tag (<P>) at the beginning of each row. This Paragraph tag has no effect on any cell in the
table, but if a table cannot be displayed, this tag will force a new paragraph with each new row of
information. Here is an example showing the placement of the paragraph tag after the TR tag.
<TR><P><TD ALIGN="CENTER"><A HREF="lesson11.htm">LESSON ELEVEN<BR>BASIC

TABLES</A></TD>
If you would like to know more about what can be done to make tables even more readable in browsers
that do not support them, here is a web page that has a lengthy discussion on the topic.
| top | | bottom |
ANSWERS
Answer to Problem 1: Here is the BODY part of the HTML document. I numbered the first 13 lines so
I can refer to them in the discussion given below the document.
Line 1: <TABLE BORDER="5" CELLSPACING="0" CELLPADDING="3">

Line 2: <TR>
Line 3: <TH COLSPAN="6"><BR>DRILL SPEEDS<BR><BR>
Line 4: <TR>
Line 5: <TH ROWSPAN="2">
Line 6: <TH ROWSPAN="2">MATERIALS
Line 7: <TH ROWSPAN="2">DIAMETER<BR>IN INCHES
Line 8: <TH COLSPAN="2">CUTTING SPEED
Line 9: <TH ROWSPAN="2">RPM
Line 10: <TR>
Line 11: <TH>Feet
Line 12: <TH>Metres
Line 13: <TR>

<TD>1.
<TD>Brass
<TD ALIGN="CENTER">2.5
<TD>
<TD>560
<TR>
<TD>2.
<TD>Cast iron
<TD>
<TR>
<TD>3.
<TD>Copper
<TD>
<TR>
<TD>4.
<TD>Stainless Steel
<TD>
</TABLE>
1. The <TR> in line 2 indicates the beginning of the first row.

2. Note in this table that the title of the table (DRILL SPEEDS) spans across all six columns (line
3). Thus after the title, we begin a new row as indicated by the <TR> in line 4.
3. We are now in the second row of the table which is a row of headings. The first three cells in this
second row span 2 rows each (lines 5, 6, 7). Therefore, row 2, column 1; row 3, column 1; row 2
column 2, row 3 column 2; and row 2 column 3, row 3, column 3 are all occupied.
4. "CUTTING SPEED" is still considered to be in row 2 but it spans 2 columns instead of 2 rows
(line 8).
5. The heading RPM is also still in row 2 and it also spans 2 rows (line 9).
6. After the RPM cell is set up, we need to begin a new row (row 3) as indicated by the <TR> in
line 10.
7. Note that the headings "Feet" and Metres" are considered to be in row 3, columns 4 and 5
respectively. Since row 3, columns 1 to 3 are occupied, a <TD> will automatically place "Feet"

in column 4 (line 11) and "Metres" in column 5 (line 12). They are the only cells left to fill in row
3. Once that is done we begin row 4 (line 13). From row 4 and on, there are no more row and
column spans. Some of the cells are empty and as before I placed the space character in them.
Answer to Problem 2:
The first row in the table contains the month "JULY" and this row spans all 7 columns. The blank cell in
row 3 spans 2 columns (under "Sun" and "Mon") and to make it take on the appearance of the other
cells, I printed the space character ( ) in it. Feel free to experiment with different designs of
calendars. Here is the BODY of the HTML document that gives this calendar:
<H3 ALIGN="CENTER">
<P><TABLE BORDER="3" CELLSPACING="3" CELLPADDING="3">
<TR>
<TH COLSPAN="7">JULY
<TR>
<TH>Sun
<TH>Mon
<TH>Tue
<TH>Wed
<TH>Thu
<TH>Fri
<TH>Sat
<TR ALIGN="CENTER">
<TD COLSPAN="2">
<TD>1
<TD>2
<TD>3
<TD>4
<TD>5
<TR ALIGN="CENTER">
<TD>6
<TD>7
<TD>8
<TD>9
<TD>10
<TD>11
<TD>12
<TR ALIGN="CENTER">
<TD>13
<TD>14

<TD>15
<TD>16
<TD>17
<TD>18
<TD>19
<TR ALIGN="CENTER">
<TD>20
<TD>21
<TD>22
<TD>23
<TD>24
<TD>25
<TD>26
<TR ALIGN="CENTER">
<TD>27
<TD>28
<TD>29
<TD>30
<TD>31
<TD COLSPAN="2">
</TABLE></H3>
| Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Thirteen |


FRAMES - html tutorials in web page design by J. Gilson

| Introducing frames and frames in rows | | Leaving the frames page |

| Frames in columns | | Row and column frames mixed together |
| Sending information from one frame to another | | FRAMESET and FRAME attributes |
INTRODUCING FRAMES and FRAMES IN ROWS
This page has two frames. They are:
(1) the top frame with only "LESSON THIRTEEN - FRAMES" written in it; and
(2) the larger frame that you are reading in now.
Since most browsers do not support fancy fonts, the title "LESSON THIRTEEN - FRAMES" in the top
frame is a simple .gif image created using Paint Shop Pro and choosing one of its fonts.
Frames will be easier to understand if you understand how HTML TABLES work. I will assume that
you have read or know the material in Lessons 11 and 12 on tables. On this browser screen, the frames
are set up like a table with two rows as in:
frame 1
frame 2
With frames you are not writing web pages in the traditional sense. What you are in fact doing is
creating a template where more that one web page can sit. Frame commands allow you to display more
than one web page at the same time on the browser screen. In other words, each frame contains its own
web page. In addition, you also need a separate document that creates the frames. So for you to view this
screen, I had to make up three pages:
(1) the HTML document that creates the frames (that is, the document that creates the template for the
frames)

(2) the document that goes into the top frame (I named it "frame1.htm")
(3) the document that goes into the lower frame (I named it "frame2.htm")
Here is the complete HTML document that created these two frames:
<HTML>
<HEAD><TITLE>WEB PAGE DESIGN - FRAMES by John C. Gilson</TITLE>
</HEAD>
<FRAMESET ROWS="20%,80%">
<NOFRAMES>Sorry, but your browser does not support
frames. <A HREF="Normal13.htm">Please click here to see this lesson without frames.</A></
NOFRAMES>
<FRAME SRC="frame1.htm" NORESIZE SCROLLING="NO">
<FRAME SRC="frame2.htm">
</FRAMESET>
</HTML>
Problem 1:What appears to be missing in these statements?
Here is a discussion on these statements:
1. The FRAMESET element defines a set of frames that will make up the browser window. The
ROWS attribute defines two frames to be set up in rows (as opposed to columns). The value of
the ROWS attribute is "20%,80%". This value states that there are to be two rows of frames (one
frame per row). The top frame is to have a "height" of 20% of the browser screen and the bottom
frame to take up the remaining 80% space. In other words, I wanted a small frame at the top of
the screen (to only display "LESSON THIRTEEN - FRAMES") and one larger frame below to
display this lesson. Instead of using percentages, the ROWS attribute can also be expressed in
pixels or as a relative size (*). As a relative size, it would be ROWS="20%,*". The "*" means
whatever percent is left.
2. FRAMESET is a container element which means that everything contained between the opening
and closing tags (<FRAMESET> and </FRAMESET>) is part of the frame setup.
3. The FRAMESET tag is used instead of the BODY tag. Your frames will not work if you include
the BODY element (try it).
4. Only high level browsers support frames (you need at least a Netscape 2.02 or equivalent
browser) which means that there are millions of viewers using browsers that do not support
frames. For this reason you need to consider having an alternate page just for those browsers that
do not support frames. If a browser does not support frames, the message between the
NOFRAMES tags will be displayed. If you do not include the NOFRAMES container element,
these browsers will either give an error code or simply display a blank page. Note: you can
include the BODY element inside the NOFRAMES tags.
5. The FRAME tag denotes what goes into the frame. The SRC attribute specifies the source file (or
source document) for the frame. Since I only have two frames in this example, I only need two
FRAME tags. Row frames are set up from top to bottom. In our example, the web page that goes
into the top frame is called "frame1.htm" and the web page that goes into the bottom frame is
called "frame2.htm". If for some reason you want a page somewhere in the WWW to go into a
frame, be sure to include the complete URL of the web page.
6. For the top frame, I added two attributes to the FRAME tag:
❍ The NORESIZE attribute to prevent the viewer from resizing the frame (try resizing the
frame). Note that I did not use the NORESIZE attribute for the bottom frame so the
viewer will be able to resize this frame (try it).
❍ SCROLLING="NO" will prevent a scroll bar from being displayed. Note that there is no
scroll bar in the "Lesson Thirteen" title frame. Other values are "YES" (put in a scroll bar)
and "AUTO" (let the browser determine if a scroll bar is needed). Note in the second
FRAME tag, I do not have a SCROLLING attribute and there is a scroll bar on the right
side of the frame. In other words, if you do not specify a scroll bar, the browser will place
one if needed.
7. Since each frame represents a web page, you can do whatever is allowed with web pages, such as
inserting images, links to other web pages, etc.
| top | | bottom |
LEAVING THE FRAMES PAGE
If you use links in a frames window, the web page that you are linking to will appear in the frame when
the viewer clicks on the link. For example, if you click on the statement below, my alternate home page
will load into this frame. Try it and when you have seen enough click on the BACK button to return to
this page.
Send me to the alternate home page
The problem is you are still in the frames window. When you are ready to leave this web page to go on
to the next lesson or to go back to one of my home pages, you also want to leave this frames page. In
other words, you want the link to load the web page with no frames. To do this, simply add the
TARGET attribute with the value "_top" to the URL. For example, to go to my alternate home page and
at the same time eliminate the frames, it is:
<A HREF="altern.htm" TARGET="_top">
Note the underline before the word "top". It must be there. The TARGET attribute targets the hypertext
link to be its own web page. To see this, click on the following sentence and the alternate home page

will be loaded with no frames. Again, click the BACK button to return here.
Send me to the alternate home page
Problem 2: Suppose you want three rows of frames instead of two rows with the condition that the top
frame is to be 20% in height, and the middle frame 30%. What is the FRAMESET tag for this situation?
Problem 3: Repeat Problem 2 but with the condition that each frame is to occupy the same space on the
screen (that is, each frame is take up one third of the screen).
| top | | bottom |
FRAMES IN COLUMNS
Instead of having two (or more) rows of frames, suppose you want two (or more) columns of frames?
For example, suppose you want the layout of frames to be:
frame 1 frame 2
Well, all you need to do is replace the ROWS attribute with the COLS attribute and use whatever
percentages required to suit your needs. For example, if you want the two frames to be equal in size, it
would be:
<FRAMESET COLS="50%,50%">
Columns frames are generated from left to right. So if you want the left frame to be 30% of the width of
the screen, the FRAMESET tag would be:
| top | | bottom |
ROW AND COLUMN FRAMES MIXED TOGETHER

Suppose you want the browser screen configuration to look approximately like the following:
frame 3
frame 1
frame 4
frame 2 frame 5
Having this many frames can be quite messy as the browser screen is only so big. However, this is a
learning experience and you can adapt these thoughts to your particular needs. To see this configuration
in action, just click here and then click the BACK button to return here.
Here is the complete HTML document to accomplish this. We will leave out the NOFRAMES,
NORESIZE and SCROLLING attributes. You can of course include them in your own applications -
especially the NOFRAMES attribute. I have also numbered the lines for discussion purposes.
Line1: <HTML><HEAD><TITLE>WEB PAGE DESIGN - FRAMES</TITLE></HEAD>
Line2: <FRAMESET COLS="50%,50%">
Line3: <FRAMESET ROWS="75%,25%">

Line4: <FRAME SRC="Lesson1.htm">
Line6: </FRAMESET>
Line7: <FRAMESET ROWS="33%,33%,33%">

Line11: </FRAMESET>
Line12: </FRAMESET>
Line13: </HTML>
Discussion:
1. Note that there is no BODY tag. Remember that the FRAMESET tag takes the place of the
BODY tag.
2. Since this configuration of frames consists of 2 equally sized columns of frames, we will first set
up the two columns of frames (line 2) with each column one half or 50% of the screen width. We
then divide each column into row frames beginning with the left column.
3. Now in the left column, we want two rows - that is, two frames. Lines 3 to 6 take care of this. As
indicated, the top frame is to take up 75% of the column and the lower frame is to take up the
remaining 25% (line 3).

4. Line 4 places my Lesson One in the top left frame and line 5 places Lesson Two in the lower left
frame. This completes the first column of frames. That is, we are finished setting up the two rows
of frames in the first column as indicated in line 6.
5. We are now in the second column of frames. Line 7 sets up three frames to go into this column,
with each frame being 33% (or one-third of the column). Although 33%+33%+33% only adds to
99%, we learned earlier in this lesson that the browser will take the remaining 1% and distribute
it over these three sizes.
6. We now need to place web pages into these three frames and they will be placed going from top
to bottom. Thus Lesson Three will be placed in the top frame (line 8), Lesson Four in the middle
frame (line 9) and Lesson Five in the bottom frame (line 10). This completes the three rows in
this second column of frames.
7. Line 11 closes these three rows of frames.
8. We are now finished with setting up the two columns and line 12 ends setting up the two columns
of frames that were opened in line 2. Remember that we need an ending tag for each opening tag
and that the tags cannot overlap.
9. To make any particular frame active, just click inside that frame. For example, if you want to
print out the contents of frame 2, then click somewhere in frame 2 and then choose PRINT from
the menu.
Problem 4: Make up the web page that will produce the following configuration of frames. Make up
your own filenames and use 50% for all values.
frame 2
frame 1
frame 3
To see this configuration in action, click here and when you are finished observing the situation, click
the BACK button to return here.
Problem 5: Make up the web page that will set up the following configuration of frames. Again make up
your own filenames and use 50% for all values.
frame 1
frame 2 frame 3
To see this configuration in action, click here and when you are finished observing the situation, click
the BACK button to return here.

| top | | bottom |
SENDING INFORMATION FROM ONE FRAME TO ANOTHER
It is not uncommon to see two frames on the screen at the same time - a smaller frame on the left
containing mainly links and a larger frame on the right to display the information when a link is chosen.
To see this configuration at work, click here and when you are finished testing the situation, click the
BACK button to return here (you may have to click it a few times depending on the amount of testing).
In this example, the configuration is two columns as in:
frame A frame B
In order for the browser to send a document to another frame, you first need to name the frames. Lets
name the frame on the left "A" and the one on the right "B". The complete HTML document that
generated the frames and names is:
<HTML><HEAD><TITLE>WEB PAGE DESIGN - FRAMES by John C. Gilson</TITLE></HEAD>

<FRAME SRC="links.htm" NAME="A">
<FRAME SRC="showlink.htm" NAME="B">
</FRAMESET>
</HTML>
Note that the NAME attribute names the frames.
Here is the document "links.htm":

<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<P>This is frame A. In this frame you see links. If you click on any link, that is, on any lesson, that
lesson will appear in frame B. Go ahead, choose a lesson.
<P><A HREF="lesson1.htm" TARGET="B">Lesson One</A>
<P><A HREF="lesson2.htm" TARGET="B">Lesson Two</A>
<P><A HREF="lesson3.htm" TARGET="B">Lesson Three</A>
<P><A HREF="lesson4.htm" TARGET="B">Lesson Four</A>
</BODY></HTML>

Note that the TARGET attribute points to the frame named "B" as the target to receive any lesson
clicked on.
Here is "showlink.htm":

This is frame B and will display the links from frame A.
</BODY></HTML>
Note that the above example will also work for any number of frames. If you need three frames, just
name them A, B and C.
| top | | bottom |
SUMMARY OF FRAMESET AND FRAME ATTRIBUTES
We used two container elements (FRAMESET and FRAME) and each have their own attributes. We
already studied a number of them but there are also other attributes.
FRAMESET ATTRIBUTES
1. BORDER=" " specifies the width in pixels of the border drawn around the frames. (Netscape
only)
2. COLS=" " creates the frames as columns. The width of each column may be specified as a
percent (%), in pixels, or in relative size (*).
3. FRAMEBORDER=" " specifies whether or not a 3-D border is displayed around the frames.
Possible values are 0 for no frame, or 1 which is the default value. (Internet Explorer only)
4. FRAMESPACING=" " specifies the amount of space between the frames in pixels.
5. ROWS=" " creates the frames as rows. The height of each row may be specified as a percent, in
pixels, or in relative size.
6. SCROLLING=" " to determine whether or not scroll bars are to be displayed on all the frames.
Values are either "yes", "no" or "auto".
FRAME ATTRIBUTES
1. BORDER=" " specifies the width in pixels of the border drawn around the frame. (Netscape
only)
2. FRAMEBORDER=" " specifies whether or not a 3-D border is displayed around the frame.

Possible values are 0 for no frame, or 1 which is the default value. (Internet Explorer only)
3. MARGINHEIGHT=" " specifies the top and bottom margins of the frame in pixels
4. MARGINWIDTH=" " specifies the left and right margins of the frame in pixels
5. NORESIZE prevents the frame from being resized by the viewer
6. SCROLLING=" " determines whether or not scroll bars are to be displayed along the frame.
Values are either "yes", "no" or "auto".
7. SRC=" " specifies the source document to be placed in the frame.
Also, don't forget the following two points:
1. <NOFRAMES> and </NOFRAMES> tags to be placed inside the FRAMESET tags. Anything
placed between the NOFRAMES tags is printed only by browsers not supporting frames.
2. TARGET="_top" is to be used as part of the URL of a link to ensure that the frames page is
properly exited. For example,
<A HREF="http://www.html/index.htm" TARGET="_top">
allows the browser to exit the frames screen and load the web page called "index.htm". Without
the TARGET attribute, "index.htm" will be loaded into the current frame.
| top | | bottom |
ANSWERS
1. The BODY tags are missing. This is because the FRAMESET tag replaces the BODY tag. If you
put in a BODY tag, the frames won't work. You will receive exactly the same error message or
blank page that a browser not supporting frames displays.
2. If the first frame takes up 20% of the screen and the second frame takes up 30%, then the third
frame must take up 100%-20%-30% = 50%. Therefore the FRAMESET tag is:
<FRAMESET ROWS="20%,30%,50%">
Now if you do not want to do the arithmetic, then use relative size (*) and let the browser do the
calculating as in:
<FRAMESET ROWS="20%,30%,*">
3. 1/3 of 100% means that each frame is to take up 33 1/3% space. However, browsers will allow
the percents to add to 99 as well as to 100. For example, one solution to the problem is:
<FRAMESET ROWS="33%,33%,33%">
This only adds to 99%. What the browser then does is take the remaining one percent and
distributes it over the three sizes.
4. In this solution, we first set up two columns, and then split the second column into two frames.
Here is the complete HTML document:
<HTML><HEAD><TITLE>WEB PAGE DESIGN - FRAMES</TITLE></HEAD>

<FRAME SRC="webpage1.htm">
</FRAMESET>
</FRAMESET>
</HTML>
where "webpage1.htm" represents the complete URL of the page to be loaded into frame 1.
Similarly "webpage2.htm" will be loaded into frame 2 and "webpage3.htm" into frame 3.
5. This answer is similar to the answer to Problem 4. In Problem 4, we first set up two column
frames and then split the second column into two row frames. In this answer, we first set up two
row frames and then split the second row into two column frames. Here is the HTML document
that solves this problem:
<HTML><HEAD><TITLE>WEB PAGE DESIGN - FRAMES</TITLE></HEAD>

</FRAMESET>
</FRAMESET>
</HTML>

| Return to Home Page | | Return to Alternate Home Page |

| Send me to Lesson Fourteen |


TRANSPARENT IMAGES - html tutorials in web page design by J. Gilson
LESSON FOURTEEN - TRANSPARENT IMAGES

| Introducing transparent colors | | Creating a transparent color using Paint Shop Pro |
| Screen captures using Paint Shop Pro |
INTRODUCING TRANSPARENT IMAGES
Here is Smiley without a transparent background:
Here is Smiley with a transparent background:
Often an image will look better with a transparent background. A transparent background simply means
that you cannot see the background color of the image in your browser. There is a background color but
it isn't visible on the web page. In actual fact, the background color of the web page (no matter what
color it is) simply replaces the background color of the image.
You can make any color in the image transparent, but most often it is the background color. You can
only designate one color as being transparent. An image with a transparent color is called a
Transparent Image or a Transparent GIF. It has to be a GIF image. The image does not have to be a
GIF image to begin with, but it has to be saved as a GIF image.
If you want to designate the background color as being transparent, then the background of the image
must be a single color, not a combination of colors since only one color in the image's color map can be
designated as transparent. The background color should not be used anywhere else in the image because
it too would become transparent thus possibly distorting the image.
If you find that another part of the image also seems to disappear on the web page, it could be because
one of the colors in the image is also the same color as the background color of the web page. For this
reason, it is recommended that you control the background color of your web page with the BGCOLOR
attribute. This will override any default background color in a visitor's web page and so ensure the
results you want.

SOME POINTS TO REMEMBER WITH TRANSPARENT IMAGES:
1. The image background should be a single color.

2. The color designated for the background should not be used elsewhere in the image or used
extensively elsewhere in the image.
3. Not all GIF images have solid or smooth colored backgrounds. You may have to load the image
into a program such as Paint Shop Pro to change the background into one solid color before
making the background transparent.
4. Photographs do not work well as transparent images since it is hard to define a single color.
In order to make a color transparent, you need a program that will do it for you. Examples are Paint
Shop Pro for Windows, and Photoshop for Windows and Macs. I like Paint Shop Pro because it is easy
to use and it is also a great image editor. Paint Shop Pro is reasonably priced and you get a lot for the
money. What I also like about the makers of Paint Shop Pro is that on their website is a learning center
containing over 100 short tutorials on the power of Paint Shop Pro. For example, if you have a digital
camera and are into digital photography, or like working with scanned photographs or portraits, there are
over 60 easy to follow digital photography tutorials. These tutorials cover every conceivable adjustment
to a photograph using Paint Shop Pro. There are also many Web Design Tutorials and Art Resource
Tutorials - all designed for Paint Shop Pro.
However, Photoshop is also another very popular image editor that many people use and maybe they
also have a learning center.
I will be illustrating transparent images using Paint Shop Pro. If you do not have Paint Shop Pro or
Photoshop, you can download a fully functional copy for 30 days after which a decision to purchase
must be made. The current version of Paint Shop Pro is Paint Shop Pro 8 which is the version in these
lessons.
If you do not have a paint program, you can download one by clicking on the appropriate link:
Paint Shop Pro
Photoshop
| top | | bottom |
CREATING A TRANSPARENT COLOR USING PAINT SHOP PRO

If you do not have an image to work on, just save Smiley at the top of the page with the red background.
To do this, click on Smiley with the right mouse button and then from the pop-up menu, choose Save
Image As, or Save Picture As (one of these choices or a similar choice should be there). You can then
choose a folder and save the image.
After you have opened Paint Shop Pro, load the image that you want to create a transparent color for.
To illustrate changing a color into a transparent color, I will use Smiley as the example. Here are the
steps:
1. With Smiley displayed in Paint Shop Pro, choose Save As from the File menu. This will display
the Save As dialog window.
2. In the Save as type box, make sure it reads CompuServe Graphics Interchange (*.gif) as we
are saving a GIF image. If it does not say this, click into the box and choose this GIF file type. If
you choose to save the image as a jpeg image, you will not be able to choose a transparent color.
3. Now click on the Options button, located below the Help button. This will display the Save
Options dialog window which is:
4. In the Version section, make sure that Version 89a is selected. This GIF format was
standardized in 1989. There was a list of format standards and transparency was the first part of
the list - thus the "a" part. GIF89a supports animation as well as single color transparency. 87a is
the earlier version of the GIF format and does not support transparency or animation. 89a adds
support for transparency and animation and is the more recent version of the GIF format. For
more information on these formats, just click on the Help button located under the Cancel button.
5. In the Interlacing section, an interlaced image loads on a web page first as a low resolution
image, then slowly becomes clearer. This is also known as the Venetian Blind load effect. An
interlaced image allows viewers to get an idea of what the image looks like before it is finished
loading. Only GIF images can be interlaced. Often interlaced images are used in displaying
larger images that take a little longer to completely display - but not for displaying a

background image. Thus if you have a larger image, you may want to choose interlaced. Non-
interlaced means that we do not want the Venetian Blind load effect. Non-interlaced images are
best for small images because small images load quickly. So in the Interlacing section, select
Noninterlaced. Smiley is a small image and so there is no need to display it interlaced.
6. Now click on the Run Optimizer button. This will display the GIF Optimizer dialog window.
This is what you should see:
Note that this window contains four tabbed pages where you control the transparency, the color,
and the format options. The fifth page displays estimated download times of the image at various
modem speeds and is for your information only. You can use this page to decide if there needs to

be any further compression.

7. In the first tab, the Transparency tab, (which is the one being displayed in the above image),
there are a number of choices. Note that you can choose to save your image as a GIF file without
a transparency. In this case, you would choose the None option. Note also that the color red is
displayed in the rectangle beside Areas that match this color. Make sure that the radio button
beside this option is selected as we want to make this color transparent. Here is how you choose
the color that you want displayed in the box. That is, here is how to choose the transparent color.
8. When you move the cursor over Smiley, it turns into an eye-dropper. Click the eye-dropper on a
color and that color is immediately transferred to the box beside the words Areas that match
this color. This color will then be the transparent color. At the top of the GIF Optimizer dialog
window are two large Preview windows. The preview window on the left displays the current
image and the preview window on the right displays the resulting image with the transparency
added. So click on the color red in the image and you will see that red is displayed in the box
beside Areas that match this color. Note also that the color red in the resulting preview window
has been replaced with a light colored checker board background. The checker board background
will not be displayed in a browser. The checker board indicates the parts of the image that are
transparent.
9. In the GIF Optimizer dialog window we left the Tolerance setting at 1. However, you can
change this setting to a tolerance factor that indicates how closely colors much match the selected
color before they become transparent. At lower settings, only pixels of very similar colors also
become transparent while at higher settings, more pixels become transparent.
10. All the other settings can also be left as is. Note: Click on Use Wizard if you would like to use
the Wizard to guide you through the steps in making the red background transparent. You should
take some time to click on each of the other four tabs to see these other pages. If you want to
learn more about what is involved in these pages, click on the Help button at the bottom of the
GIF Optimizer window. The Paint Shop Pro Help window is very good and gives a good
understanding of the various options in these tabbed pages.
11. When ready to proceed, click on OK and the Save Copy As dialog window is displayed.
12. If you want to change the folder, you can now browse to the folder where you want to save the
new image.
13. In the File name box, give the transparent image a new name if you want to preserve the original
image. Otherwise you will be replacing the original image with the transparent image.
14. Click on Save and the image is saved with the transparent color.
15. To see your image with the transparent background, simply load it into your browser or try it out
on a web page.
| top | | bottom |
SCREEN CAPTURES USING PAINT SHOP PRO
Paint Shop Pro's Screen Capture function takes a picture of all or part of the screen and opens it in

Paint Shop Pro. These pictures, called screen captures, can be a part of a screen or of the entire screen.
You can capture an active window, or part of the contents of an active window. You can also capture the
controls of a program, such as a toolbar. For this lesson, I captured parts of Paint Shop Pro, saved them
as GIF images, and placed them where I needed them in the lesson.
After you select your preferences for screen captures, you can then make screen captures while working
in another program. So before we can use the Screen Capture function, we need to select the type and
method of capture in the Capture Setup dialog box. You can then make a capture immediately or
activate it later as needed. To setup the screen capture, here are the steps:
1. Choose File >Import > Screen Capture > Setup. This will display the Capture Setup dialog
window which looks like (this picture was created with a screen capture):
2. In the Capture section we select the type of capture.

❍ Area - lets you control the size of the capture area.
❍ Full screen - lets you capture the entire screen.
❍ Client area - lets you capture the workspace of the active window.
❍ Window - lets you capture the entire active window.
❍ Object - lets you capture a feature or group of features.
The Area option gives the most flexibility so leave this choice selected.
3. In the Activate capture using section, you need to select a method to use to activate a screen
capture. The choices are:
❍ Right mouse click
❍ Hot key
❍ Delay timer
Most people will choose either Right mouse click or Hot key to activate the screen capture.

Choose Hot key.

4. You now have to indicate which Hot key you want to use. The choice that is displayed is F10. If
you click into this box, you will see that the other options are F11, F12, Shift+F1 or Shift+F2.
Let's choose the F11 option. Thus our Hot key will be F11.
5. In the Options section you can include the cursor in the capture and also include multiple
captures. Note: You cannot include the cursor in an Area type capture.
6. You can now activate the screen capture function from this dialog window by clicking on the
Capture now button or close the dialog window without activating the function by clicking on
the OK button. Note that you can again receive more information on all these options by clicking
on the Help button. We will not do a capture at this time, so click on OK.
MAKING A SCREEN CAPTURE
Here are the steps to create a screen capture:
1. First, open Paint Shop Pro.

2. Now Open the application program from which you need to capture something - whether you
want to capture a full screen or just part of a screen.
3. Next, switch back to Paint Shop Pro. There are three ways to initiate the capture:
❍ Choose File >Import > Screen Capture > Start, or
❍ Hold down the Shift key and while holding it down, press the C key (Shift-C).
4. When you choose one of the above two options, you will be immediately switched back to the
application program you want to capture from (the one you opened in step 2).
5. Press F11, our Hot Key setup. The mouse pointer turns into a cross-hair. If you chose Right
mouse click to activate screen capture, then you need to right-click instead of pressing the F11
key.
6. Now click once with the left mouse button at the point you want to begin the capture. That is,
move the cursor to where you want to create a corner of the screen capture and click with your
left mouse button. This action starts the actual screen capture.
7. Next, drag out the area you want to capture. That is, move the cross-hair cursor to create a
rectangular outline of the capture area. Note that the pixel size of your image increases as you
drag out the area.
8. When you have finished dragging out the area to be captured, click again with the left mouse
button. That is, left-click the mouse to end the screen capture. As soon as you do this, the screen
captured image will be displayed in Paint Shop Pro.
9. You can now save the image by choosing Save As from the File menu and following the
procedures described in the above section on saving an image. The name assigned by Paint Shop
Pro will appear in the File name box. You can change the name or use the one assigned by Paint
Shop Pro.
There is also a very good Help section on Screen Captures. To see this Help section, just choose File
>Import > Screen Capture > Setup to display the Capture Setup dialog window, and then click on
the Help button located beside the Cancel button.

| top | | bottom |
| Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Fifteen |


ANIMATIONS - html tutorials in web page design by J. Gilson
LESSON FIFTEEN

| Introducing animation | | Getting started | | Our first animated GIF image |

| Creating the animation using GIF Construction Set |
| Creating the animation using Paint Shop Pro | | Our second animated GIF image |
| How the PJCVS MATH animated GIF was created |
| Creating LED signs, banners, and special-effect images |
INTRODUCING ANIMATION
An animated gif is a multiple-image GIF file. An animated gif is a series of GIF images placed one
after the other in an infinite loop giving the appearance of fluid motion. This is somewhat similar to a
flip book of pictures in which flipping the pages quickly makes the little pictures appear to move. What
you really have is a bunch of still pictures moving by quickly and your eyes see it as movement. You
can set the speed of movement of your animated gif image, however, the speed at which the image
actually moves can vary from browser to browser.
There are many websites on the WWW where you can find animated gifs. Just go to your favorite search
engine and do a search for sites offering animated gifs. Visit these sites to either download some
animated gifs (check if you need permission) or to gather ideas on making your own. We will make two
animated gifs so that you will have a good understanding of the process involved.

| top | | bottom |
GETTING STARTED
To make your own animated gif, you need two things:
1. A paint program to make your series of images such as Paint Shop Pro for Windows or
Photoshop from Adobe (http://www.adobe.com/), and
2. A program such as GIF Construction Set Professional to put all the images into animation. As
you will see later in this lesson, you can also use Paint Shop Pro to put your images into
animation.
In this lesson we will use Paint Shop Pro to make these GIF images but any paint program can be used
to create them. We will then use GIF Construction Set to put all the individual images into animation
and have them saved in one animated gif file.
So, if you do not have either of these programs, now is the time to get them. GIF Construction Set can
be downloaded as shareware which means you can try it out for free, but if you like it, you are expected
to pay a few dollars and register it (the cost is minimal). You can also download a fully functional copy
of Paint Shop Pro to try out free for 30 days, after which a decision to purchase must be made. The
current version of Paint Shop Pro is Paint Shop Pro 8 which is the version in these lessons.
You can go directly to the Paint Shop Pro and GIF Construction Set websites to download the software.
Just click on a graphic or text to enter the website.
Paint Shop Pro
GIF Construction Set
| top | | bottom |
OUR FIRST ANIMATED GIF

For our first example, we will construct the animation of the word ANIMATION that you see at the
beginning of this lesson. Note that this animation begins with the word ANIMATION, and then one
letter at a time is removed. Once all the letters have been removed, they begin to appear again, one letter
at a time, until the word ANIMATION is complete again. Each change represents a new image. This
sequence of images is then repeated over and over until you click on the Stop button (clicking on the
Stop button will stop all the animations). Here is the way the images appear - one after the other in this
order:
ANIMATION
ANIMATIO
ANIMATI
ANIMAT
ANIMA
ANIM
ANI
AN
A
blank image goes here (no letters)
A
AN
ANI
ANIM
ANIMA
ANIMAT
ANIMATI
ANIMATIO
(go back to the beginning and repeat - we are in a "loop")
Problem 1: Seems like a lot of images. How many distinct images are there in this example?
Problem 2: How many images are actually displayed before looping takes place?
CREATING OUR IMAGES
Here are the steps to create the above animation using Paint Shop Pro:
1. Open Paint Shop Pro.

2. We will now make sure that the Tools toolbar, the Tool Options palette and the Materials
palette (called the Color Palette in previous versions of Paint Shop Pro) are in view (displayed
in the main program window). The Tools toolbar is used to crop, paint, draw, add text as well as

a host of other image editing tasks. When a tool is selected from the Tools toolbar, there are often
options associated with the selection. The Tool Options palette contains these options. Two
examples of options are setting the size of the line width for the drawing tools and setting the
brush size and shape for the painting tools. The Materials palette sets the colors and materials
for painting, drawing, retouching, filling, etc. Here is how to bring the Tools toolbar, the Tool
Options Palette and the Materials palettes into view:
❍ Choose View from the Menu bar and then choose Toolbars to view the Toolbars drop
down menu. That is, choose View --> Toolbars. There are a number of Toolbar options
and those that are currently chosen are highlighted with a rectangle around them. If there
is no rectangle around the word Tools, then it means that the Tools toolbar is not
currently in view. If this is the case, then click on Tools to bring the Tools toolbar into
view. Now if you again choose View --> Toolbars you will see a rectangle around the
word Tools. The Tools toolbar is usually placed vertically on the left side of the Paint
Shop Pro main program window. Note: At this time every tool in the Tools toolbar is
grayed out meaning that they are inactive. In other words you can't use any of them. This
is because we do not have anything such as an image or object to work on yet.
❍ To display the Tool Options palette, choose View --> Palettes. From the palettes drop
down menu, chose Tool Options if it is not currently highlighted with a rectangle around
it. The default position of the Tool Options palette is underneath the Standard toolbar.
❍ To display the Materials palette, again choose View --> Palettes. From the palettes drop
down menu, chose Materials if it is not currently highlighted with a rectangle around it.
The default position of the Materials palette is at the right side of the main window.
3. We will now create our first image. Choose File from the menu bar, and then choose New (or
simply click on the New button in the Standard toolbar). This will display the New Image dialog
window.
4. You are now asked for some information about the new image such as the size of the image you
want to create. Enter 200 for the Width and enter 50 for the Height. These numbers represent the
width and height in pixels so make sure that the dimensions are in Pixels. This size is bigger than
what we need which is okay as we will resize the image later. The resolution can be left at 200
pixels per inch.
5. In the Image characteristics section, ensure that the Color (meaning background color) is
White. Everything else can be left as is (Raster Background selected, Color depth at 16 million,
and Transparent not selected). Click on OK. Note: Computer graphics are of two types: raster
and vector. As it states in the Paint Shop Pro User Guide, raster images (also called bitmap
images) are composed of individual elements called pixels. Thus an object in a raster image is
defined by its pixels and to edit the object you edit the pixels. Vector images use geometric
characteristics to define its objects. Examples of geometric characteristics are lines and curves
and their locations to define objects. Thus with vector images you edit objects or shapes rather
than pixels.
6. You should now have a new image named Image1 with nothing in it (except for a white
background). Just ignore the name for now.

7. In the Materials palette, there is the big color panel showing the available colors and is called
the Available Colors panel. Below the Available Colors panel are two big rectangles. The top
one is called the Foreground Material box and the one underneath it and a little to the right is
called the Background Material box. Now if you rest your mouse cursor over the Foreground
Material box, the words Foreground and Stroke Properties will pop in a text box along with
the current color and texture information. Rest your cursor over the Background Material box
and the words Background and Fill Properties will pop up along with the current color and
texture information. This box should be white as we chose white for the background color. Thus
the upper box affects the image's foreground and the lower box affects the image's background.
Below each box are three small buttons called Style buttons. Thus the Foreground Material box
has three style buttons and the Background Material box has three style buttons. If you rest the
mouse pointer on any of these three buttons you will get their names. The first one is called
Color and it is used to decide where we want a solid color, a gradient color or a pattern color.
You can see these options by clicking on the button. The middle button is called the Texture
button and it is used to turn the current texture on or off. The third button is called the
Transparency button and it specifies whether the foreground or background is to be transparent.
Transparent means that there is to be no style or texture.
Under the Foreground Material box, click on the third button as we want the foreground
material to be transparent. That is, we do not want any foreground style or texture.
8. Now click on the Background Material box. This will display the Material color palette. In the
cluster of little boxes, choose the color red. Red is the little box displaying R:255 G:0 B:0 when
the cursor moves over the box (= #FF0000). This is what you should have so far:
9. In the Tools toolbar, click on the Text tool (the one with the letter A on it).
10. Move the cursor over the new image and it will change into the Text tool cursor (a cross-hair
with the letter A attached). Before we write our text (ANIMATION), we need to set up the text
font, size, etc. Note that the Tool Options palette now displays the options for the Text tool. We
will now set these options.
❍ Click on the down arrow in the Create as box and choose Floating. This will allow us to
cut out one letter at a time from the word ANIMATION.
❍ Click on the down arrow in the Font box and choose Century Gothic.

❍ For the Font Size, choose 22. The rest can be left as is. This is what you should have:
11. You are now ready to enter the text. Click anywhere in the new image and the Text Entry dialog
window opens up. In the Enter text here box, type the word ANIMATION. Also make sure that
the Remember text is selected (there should be a checkmark in the check box). Now click on
Apply.
The word ANIMATION should now be in the new image (or at least part of it should be visible). The
word appears with dashes for letters and with the dashes moving.
We will now make our image smaller so that the word ANIMATION takes up the entire image with no
empty space around it. To do this,
1. Click on the Copy button in the standard toolbar (or choose Copy from the Edit menu).
2. Nothing appears to have changed. Now choose Paste from the Edit menu and from the Edit pop-
up menu, choose Paste As New Image. That is, choose Edit --> Paste --> Paste As New Image.
Note that the new image (named Image2) is now reduced to the size of the text with a light
colored checker board background.
The checker board background will not be displayed in a browser. The checker board indicates
the parts of the image that are transparent. We no longer need the original larger image so you
can delete it by clicking in the Close box at the top right corner of the image (the one with the X
in it).
3. We will now save this new smaller image. Choose File, then Save As.... This will display the
Save As dialog window. Now:
❍ Choose the folder you want to save these images in.
❍ Then click into the Save as type box and choose CompuServe Graphics Interchange (*.
gif).
❍ Also type in the name animat1 (short for animation 1 - our first image in the animation).
This will ensure that the image is saved as animat1.gif.

❍ Now click on the Options button. Make sure that the radio button beside Version 89a is
selected and also make sure that the radio button beside Noninterlaced is selected.
❍ Click on OK.
❍ Click on the Save button to save the image named animat1.gif.

❍ Since gif images have a maximum of 256 colors, you are now told this fact and asked if
you want to continue. Click on Yes and the image is saved.
Our first of 10 images has now been saved. Since we are making a little "movie", image by image, all
the images must be:
● the same size

● in the same format
● at the same color level (256 colors)
Since we have one image completed, we will use it as the template to create the rest of the images.
Let's now create the second image which is the word ANIMATION with the last letter "N" removed
(ANIMATIO).
1. It will be easier to delete individual letters if you first make the area around the image a little
bigger. So drag the sides out so that the image now looks like:
Note that the image itself is not made bigger. We are just increasing the space around the outside
of the image.
2. Now in the Tools toolbar click on the Selection tool, . This is the one with the dashed
rectangle on it. This will change the Tool Options - Text palette into the Tool Options -
Selection palette.
3. The little down arrow in the Selection tool means that the Selection tool has other options. If you
click on the down arrow, you will see that they are Selection, Freehand Selection and Magic
Wand. We want just the Selection option.
4. In the Tool Options - Selection palette, make sure that the Selection type reads Rectangle since
we are going to draw rectangles around the individual letters in the word ANIMATION. That is,
we will be doing our selecting with rectangles.
5. Now carefully drag a box (a rectangle) around the last letter N so that the letter N is completely
in the box. A rotating dashed rectangle should now be around the letter N.
6. Choose Edit, then Cut (or simply click on the Scissors button in the standard toolbar). The letter
N should now be gone. The rotating dashed rectangle will still be there but you can ignore it and
the dashes won't be saved when you save the image.
7. Using the same procedure as above for saving animat1.gif, save this new image without the
letter N (ANIMATIO) giving it the name animat2.gif. We now have two images - animat1.gif
and animat2.gif.

For the third image, cut the next letter (O) and save the resulting image (ANIMATI) as animat3.gif. If
you continue this process, the last letter left over (A) will be saved as animat9.gif. Cut this last letter so
that you have no letters left, and save this blank image as animat10.gif.
You now have all the images saved and are finished with Paint Shop Pro.
CREATING THE ANIMATION USING GIF CONSTRUCTION SET
In this section we will create the animation using GIF Construction Set. So first load GIF
Construction Set Professional as this program will take all of our image files and place them into one
animated GIF file. GIF Construction Set represents state of the art GIF animation software. GIF
Construction Set includes:
● An Animation Wizard to guide you through the process of creating the animation letting the
software do most of the work.
● A Supercompressor which analyses your completed animation and looks for ways to store it in a
smaller file without losing quality and animation (the smaller the file, the quicker the animation
will load and display in a browser).
● An incredible Banner maker that includes a variety of special effects to create sophisticated
banners.
● A LED sign maker which can be either still or animated.
● Transitions to create animated transitions between still images in an animation.
Now that you have the various individual images created for the word ANIMATION, we need to
assemble them into one animated GIF file using Gif Construction Set. To do this we first need to load all
the images into GIF Construction Set. If you would like to use the Animation Wizard and let GIF
Construction Set do it for you, here are the steps:
1. Click on File and then choose Animation Wizard. Another way to activate the Animation
Wizard is to simply click on the magic wand button, .
2. You now need to answer a few questions about how you want your animation to work. The first
screen is the welcome screen so after you have read the welcome, click on the Next button.
3. The next screen asks you if you want to create the animation for the World Wide Web. Make
sure that the Yes button is selected (a little black dot in the white circle) and click on Next.
4. You are now asked if you want the animation to loop indefinitely or if only want to have the
animation to animate once. Since we want our animation to loop over and over, make sure that
the Loop indefinitely button is selected. You can change this setting later after the animation has
been created. Click on Next.
5. You are now asked if the animated GIF is file drawn or photorealistic. Basically you are asked

how you want to handle the color palette for your GIF file. There are a number of choices and
they are:
❍ Matched to super palette. This choice should already be selected. This choice will have
GIF Construction Set look at all the colors in all your individual images and create a 256
color palette that best reflects all your images. It will then remap all the colors in your
images to this palette. This option usually gives you the best results.
❍ Dithered to super palette. This choice will have the Wizard look at all the colors in all
the images in your animation and produce a 256-color palette which best reflects all your
images. It will then dither all the colors in your source images to this palette. This option
is a good choice if you are building your animation from photorealistic images and you do
not intend to add transparency to it. Dithering is the complex pattern of alternating dots
that can be used to simulate the original colors. Dithering is often able to create very
effective simulations of the true colors in an image.
❍ Matched to first palette. This choice will have GIF Construction Set create the animation
using the color palette from the first image only in your animation. This choice will give
you more control over the use of colors in your animation but it can lead to display
problems if the colors in the first image are quite different from the colors in the rest of
the images.
❍ Photorealistic. This option has GIF Construction Set dither your images to a palette with
an even dispersal of colors from pure white to pure black. This is the best option if you are
building an animation with JPEG images where you have a wide range of colors.
❍ Drawn. This is the same as Photorealistic except that the images are remapped rather
than dithered. Remapping is suitable for line art but not for a photorealistic image.
❍ Drawn in sixteen colors is similar to the Drawn option except that it only uses a palette
with the 16 basic Windows colors. This choice is then suitable for simple animations with
a small color range.
6. For our example, leave the Matched to super palette selected. It is generally the best choice for
GIF images. Click on Next.
7. You are now asked for the delay between frames. These delays are divided into hundredths of a
second. Choose a delay of 10 hundredths of a second meaning each image will only appear for
10 one hundredths of a second. You can experiment with other numbers later. The one you see in
this browser was set to 10, but with all the other animated gifs, it could be running a little slower.
Click on Next.
8. You are now asked to select the images that you want to make up the animation. The names will
be placed in the Selected files box also called the File list box. Click on Select. This will display
the Open dialog window. Browse to where your saved the various GIF files that make up our
animation. We want the GIF files loaded in the order they are to appear in the animation. To do
this,
❍ Click on the name animat1 as this is the first in our series of images to be loaded. If you
accidentally load the wrong image, you can click Cancel and then click on Select again,
or you can delete the name in the File name box.
❍ Now hold down the Ctrl key and while holding it down, click on the name animat2, then

animat3, animat4, animat5, animat6, animat7, animat8, and animat9. Do not click on
animat10 because it will be inserted alpha numerically after animat1 which we do not
want. Note that when you click on the filenames, the names appear in the File name box.
Now click on Open. When you click on Open, the names are transferred to the File list
box.
❍ You are still in the Open dialog window. This time click on animat10 and then click on
Open. This will place animat10 right after animat9 in the File list box.
❍ Since our animation prints the word ANIMATION backwards and then frontwards, we
now have to reverse the above procedure, beginning with animat9 down to animat2.
Because the order is important, we must add these filenames one at a time - otherwise they
will be placed in alphanumeric order. So click on animat9 and then click on Open. Then
click on animat8 and then on Open. Continue this process until you have added animat2.
❍ We have now entered all the filenames, so click on Cancel to return to the Wizard. Note
that all the names and the folders they are located in have been placed in the File list box
in the order from animat1.gif to animat10.gif and then from animat9.gif to animat2.gif.
That is, we have the following (I have numbered them in the order they are to appear):
1 animat1.gif ANIMATION
2 animat2.gif ANIMATIO
3 animat3.gif ANIMATI
4 animat4.gif ANIMAT
5 animat5.gif ANIMA
6 animat6.gif ANIM
7 animat7.gif ANI
8 animat8.gif AN
9 animat9.gif A
10 animat10.gif
11 animat9.gif A
12 animat8.gif AN
13 animat7.gif ANI
14 animat6.gif ANIM
15 animat5.gif ANIMA
16 animat4.gif ANIMAT
17 animat3.gif ANIMATI
18 animat2.gif ANIMATIO
Now that we have added all the filenames in the correct order, here is a tip that you may find
useful. In the File list box that contains all the file names, you can select a filename and then
drag it to a new position. Therefore you could load all the filenames at one time into the File list
box and then drag them around the File list box into the correct order.
9. Click on Next to go to the next screen.

10. You are now told that the GIF file is completed and so click on Done to have the images loaded

into GIF Construction Set (this could take a moment).

11. You are now in the GIF Construction Set window. We will study the various parts of this window
later. You can now save the animation by choosing Save As from the File menu. You can accept
the name that GIF Construction places in the File name box or you can replace it with a name of
your choice.
12. To view your animation, click on the pair of glasses button (the View animation button), .
When finished viewing, click on the X to close the View window.
You can also load your images into GIF Construction Set without the wizard. To do this:
1. Click on File and then choose New. A window opens up with the word HEADER in it. We will
study the Header later.
2. Now from the Edit menu, choose Insert block and then choose Image (Edit --> Insert block --
> Image) since we are inserting an image.
3. As before with the Wizard, the Open dialog window appears. Again, hold down the Ctrl key and
click on animat1, animat2 up to and including animat9. Click on Open. You may be told that
the image you imported does not match the global palette for this file. Choose Remap this image
to the global palette and click on OK. In a moment, all the filenames along with their images
appear in the GIF Construction Set window.
4. Now again choose Edit --> Insert block --> Image. This time click on animat10 and click on
Open. We now have the images from animat1 to animat10.
5. Now add the rest of the images, one at a time, beginning with animat9 down to animat2.
6. You can now save what we have done so far, but keep in mind that we have not added any delay
between the images or told GIF Construction Set how we want the animation looped. We will do
this now.
MANAGING AND EDITING OUR ANIMATION
Whether you used the wizard or not to load the images, we will now learn to manage and edit our
animation. GIF Construction Set manages animation through blocks. Each GIF file consists of a series
of blocks that we can edit. We will therefore take a moment to understand these blocks.
● Header Block: Note that the first line in the GIF Construction window is the Header Block. A
GIF file only has one Header Block and it is always the first block in the file. Note that the
Header Block reads: HEADER GIF89a Screen (163x21) where 163x21 represents the width
and height in pixels of the animated image (the GIF file). You may not be able to see this entire
Header line but if you extend the width of the window or click on the Maximize button on the
Window Bar at the top right, you will see it. The Header also indicates that the animated image
will be saved as a GIF image in 89a format. The Header also contains other information about the
animated gif such as the background color for viewing your animation in GIF Construction Set
and the palette that all the images in the file will use. Double clicking on the Header line will
reveal all this information.

● Loop Block: There is only one Loop Block and this block specifies whether the animation is to
loop indefinitely or only a set number of times.
● Image Block: Each image has its own Image Block. This block stores the image and the
information relative to the image such as its location from the top left corner in relation to the
area in which the animation will appear.
● Control Block: With each image is a Control Block that tells the browser how to display the
image. The Control Block contains information such as what color is to be transparent, how long
the image should be displayed before the next image replaces it, etc. Double click on any image
line to display both the Image and Control Blocks.
● Comment Block: The Comment Block is located at the end of the file and stores hidden text
such as copyright information or whatever else you wish to place in it. These comments do not
appear in the animation but will appear when the animation is viewed in GIF Construction Set.
You can edit the Comment Block by double clicking on the block. Note: You will not be able to
eliminate the Unregistered Shareware comment. You can delete the Comment Block but it will
be replaced when you save the file. This comment block will not appear once you register the
program. So if you like this program and plan to use it personally or professionally, be sure to
register your copy.
Now that all the images have been loaded we will do some editing of the blocks.
1. First highlight all the images by clicking on the first Image Block (representing animat1) and
then while holding down the Shift key, click on the very last Image Block in the list (representing
animat2). All the Image Blocks should now be highlighted. Only the Header Block is not
highlighted. Any change that we now make will be applied to all the images in the GIF file.
2. From the Block menu, choose Manage. This will display the Block Management dialog
window.
3. Make sure that the radio button beside Set controls for the selected blocks is selected and click
on Apply. This will display the Edit Control dialog window.
4. Set the delay to 10 meaning each image appears for 10 one hundredths of a second. You can
experiment with other numbers later. The one you see in this browser was set to 10 but with all
the other animated gifs, it could be running a little slower.
5. Note that when GIF Construction Set loads your images, it will not load any transparency
information. If you want a transparent background, you should set it at this time. You can also
set any color to be transparent. Let's set the white background as the transparent color. Here is
how to do it:
❍ Click on the checkbox beside Transparent Colour to place an X in the box.
❍ Click in the box beside the Eyedropper tool and a color palette window opens up. Choose
the color white and the number of the color (215) goes into the box.
❍ If you do not know the exact color, you can choose the color you want transparent with

the Eyedropper tool. Click on the Eyedropper and your image will appear. Click
somewhere in the area of the color you wish to make transparent. The image disappears
and the number of the color you have chosen appears in the box.
❍ For the Remove By, choose Background so that our animated gif will have a transparent
background.
❍ Click on OK and you will be back to the Block Management dialog window.
6. Now click on the radio button beside Enable controls for the selected blocks and then click on
Apply.
7. Click on OK to return to the GIF Construction Set window.
Each image in the image file may now appear on a black background. This black background indicates
the transparent part of the GIF file.
You can also edit an individual Image Block. To do this, choose an Image Block and then double click
on it. This will display the Edit Image dialog box. Note that the width and height of the image are given
in pixels and the current position is 0 pixels from the top and 0 pixels from the left side of the area set
aside for the animation file. You can change these position values but not the size of the image as this is
automatically calculated by GIF Construction Set when the GIF file was constructed. Note that the
Control panel on the right side is similar to the one we used for all the images. Note also in this Control
panel that the delay for this image is 10 one-hundredths of a second which we just finished setting for all
the images. If you wish to experiment, you can change the time delay for this image to another delay
time. We are not going to change anything here so click on Cancel.
We now need to insert a loop. Double click on the Header Block. This will display the Edit Header
dialog window. Now click in the checkbox beside the word Loop to make sure that it is selected. Leave
the Iterations count at 0. A count of zero means that the animation will loop indefinitely. Note that the
background color is set to Black (which is the number 0). This is the black background you see with
each image in the GIF Construction Set window. If you would rather see a white background in the GIF
Construction Set window, then click on the button and choose the color white (number 215). That is all
we need to change so click on OK. You can now view the complete animation by clicking on the View
animation button.
You can now save the animated gif by clicking on File and then Save As. The type of files should say
GIF files. Choose the folder you want to save the animated GIF file in and type in a suitable name for
your GIF file. When ready, click on Save. You should also load the animated gif into your browser to
see the animation in your browser as compared to GIF Construction Set.
Problem 3: We used the following sequence for our animation:
ANIMATION
ANIMATIO
ANIMATI

ANIMAT
ANIMA
ANIM
.
.
.
instead of using the sequence beginning with the letter "A" as in:
A
AN
ANI
ANIM
ANIMA
ANIMAT
.
.
.
Why did we use the sequence in the way we did?
| top | | bottom |
CREATING THE ANIMATION USING PAINT SHOP PRO
You can also create the animation with Paint Shop Pro. So after you have completed the above section
using GIF Construction Set, you may also wish to try creating the animation with Paint Shop Pro. You
need to do the above section first (up to the part titled MANAGING AND EDITING OUR
ANIMATION) or at least read it over so that you know what you have to do with all the individual
images.
Included with Paint Shop Pro is Animation Shop. To load Animation Shop, from the Paint Shop Pro
main menu, choose File --> Jasc Software Products --> Launch Animation Shop. Included with
Animation Shop is an Animation Wizard to lead you step by step through the process. Once the Wizard
does its job, you then save the animation as a GIF file using any suitable filename.
| top | | bottom |

OUR SECOND ANIMATED GIF
For our second animation, we will make the bullet or ball that you see on each side of this section's
heading (there is only one ball repeated twice). We will create the ball in Paint Shop Pro and then paint
it in different colors with each color making up one image.
1. Open Paint Shop Pro.

2. If not already in view, make sure that the Tools toolbar, the Tool Options palette, and the
Materials palette are in view. To do this, choose View --> Toolbars --> Tools if you need to
place the Tools toolbar into view, choose View --> Palettes --> Tool Options for the Tool
options palette, and choose View --> Palettes --> Materials for the Materials palette.
3. Choose File and then New to display the New Image dialog window (or click on the New image
button in the standard toolbar).
4. Choose an image width of 50 pixels and a height of 50 pixels (bigger than required). Also make
sure that the Background color is set to White and that the dimension units are in pixels. Click
on OK.
5. In the Tools toolbar, click on the Selection tool (the rectangle) and the Tool Options palette
changes to the Tool Options - Selection Palette. Click in the Selection type box and select
Circle. The Feather can remain at 0 and the Antialias box should be selected (there should be a
checkmark in the checkbox). The Mode box can remain at Replace.
6. Move the cursor to the centre area of the image and drag out a small circle about the size of the
one beside the heading of this section. It will appear as a rotating dashed circle.
7. We will now copy this image and paste it as a completed image. So click on the Copy button in
the standard toolbar (or choose Copy from the Edit menu).
8. Nothing appears to have changed. Now choose Paste from the Edit menu and then from its pop-
up menu, choose Paste As New Image. The new image has now been reduced to the size of the
circle with a checker board background. It may not look like a circle but that is because of the
checker board background. Just drag the sides of the image to make the border around the image
a little bigger and the circle should appear a little clearer. You can now delete the first image we
created (Image1*) by clicking in the Close box (the one with the X in it).
9. Now click on the Flood Fill tool, , in the Tools toolbar to select it. The Tool Options -
Selection Palette has now been replaced with the Tool Options - Flood Fill Palette.
10. Make sure that the Blend mode box reads Normal and that the Match mode reads RGB Value.
The RGB Value will ensure that only the circle gets colored and not the area of the image
outside the circle. The Tolerance can remain at 20 and the Opacity at 100 (percent). Tolerance
is how closely the selected pixels must match the initial pixel we click. The range is 0 to 200. At
lower settings, only pixels of very similar colors are filled while at higher settings, more pixels
are filled. Keeping the Opacity at 100 ensures that all pixels that are not transparent will be
filled.
11. In the Materials Palette, click on the Foreground and Stroke Properties box. This will display

the Material dialog window. Choose the color red and click on OK.
12. The Flood Fill tool should still be selected. Now click with your left mouse button in the circle,
and the circle (the ball) should now be colored red. Note that when the cursor moves over the
circle, the cursor changes to the Flood Fill cursor. We have now completed our first ball in the
animation. It looks like
13. Now save this ball by choosing Save As from the File menu. This will display the Save As
dialog window. Now:
❍ Choose the folder that you want to save these images in.
❍ Click into the Save as type box and choose CompuServe Graphics Interchange (*.gif).
❍ Also type a name for the ball such as ball1. This will ensure that the image is saved as
ball1.gif.
❍ Now click on the Options button. Make sure that the radio button beside Version 89a is
selected and also make sure that the radio button beside Noninterlaced is selected.
❍ Click on OK.
14. Click on the Save button to save the image named ball1.gif.
15. Since gif images have a maximum of 256 colors, you are now told this fact and asked if you want
to continue. Click on Yes and the image is saved.
We will now create the remaining balls, giving each one its own color. Here are the steps:
1. With the ball image still selected, click on the Copy button in the standard toolbar and then
choose Paste --> Paste as New Image. You now have two red balls.
2. Again in the Materials palette, click on the Foreground color box. Now choose another color
such as Yellow and click on OK. The Foreground color box is now yellow.
3. The Flood Fill tool should still be selected so click on the pasted red ball with your left mouse
button and it will become yellow.
4. Now save the yellow ball in the same way you saved the red ball but using a name such as ball2.
gif.
5. Repeat steps 1, 2, 3, and 4 as many times as you like, each time choosing a different color and
naming the images ball3.gif, ball4.gif, ball5.gif, etc. Be careful that you do not choose colors
that are very close together in shades as some monitors may not be able to distinguish between
them.
6. When finished, use GIF Construction Set or use Paint Shop Pro's Animation Shop to turn these
images into animation using the same procedures as with our first animation. When finished, save
the animated gif using a suitable name such as balls.gif or bullets.gif.
| top | | bottom |

HOW THE PJCVS MATH ANIMATED GIF WAS CREATED
Now that you know the procedures involved, use your imagination to create some great looking
animated gifs.
For the PJCVS MATH animated gif, the part was done in a desktop publishing program using an
option that gave this design. This image was then copied and pasted into Paint Shop Pro.
The Pi symbol, , was created in Paint Shop Pro (which can also be created in any Paint or Desktop
program). It is nothing more than the font named symbol for the letter p. For example, to get the Pi
symbol in Paint Shop Pro, create a new image (choose File, New). Choose a size of around 75 pixels by
75 pixels if you want to duplicate what I have. Make sure the foreground color is blue or any suitable
color, and then click on the Text tool. Move the cursor to the new image, click once and the Text Entry
window opens up. For the Font, choose Symbol and for the Font Size, choose 36. In the Text box, type
the lower case letter p which will produce the pi symbol. Click on OK. Position the pi in the new image
and you have the identical pi I used.
I used the rectangular selection tool a lot to cut the pi from the image, resizing the width of pi (Resize
is located in the Image menu), and then pasting the pi back into the PJCVS image. Note that as the pi
spins around, it reverses itself. The reverse of an image was created using the Mirror option found in
the Image menu. Once I resized the pi, Mirror would give me the reverse pi. If you save the Math
Department's animated gif on your hard drive, and then load it into GIF Construction Set, you can see
each individual image that made up this animation.
| top | | bottom |
CREATING LED SIGNS, BANNERS, AND SPECIAL-EFFECT IMAGES

(TRANSITIONS) USING GIF CONSTRUCTION SET
CREATING LED SIGNS
This LED sign was created simply and easily using GIF Construction Set. To create a LED sign, open
GIF Construction Set, choose Edit and then LED Signs. The LED Sign dialog window opens up giving
you a number of options. You can set the color, adjust the playback speed and change the sign
dimensions. Have fun and experiment.

Note: GIF Construction Set's Help support is excellent. With GIF Construction Set, you don't need a
manual (and one does not come with the program). All you need to know is right there in the Help
section. So the first thing you might want to do is to click on the Help button located below the Cancel
button to receive complete explanations on all the options available to create LED signs. I also
recommend that you print the Help page for a handy quick reference guide.
CREATING BANNERS
Be sure to also try making a banner such as:
This banner was simply created using GIF Construction Set. Banners are GIF files which contain text. A
banner can be a simple one image GIF file with words printed on it or it can be an animated GIF file
with text scrolling from right to left. The Banner option, like the LED option, is located in the Edit
menu. Thus to create a banner, open GIF Construction Set, choose Edit and then Banner. This will
display the Banner dialog window giving you a number of options and text effects. The Help page is
also very good and I would suggest you print out this page as a handy reference (the Help button is
located at the bottom of the Banner dialog window beside the Test button).
CREATING SPECIAL-EFFECT IMAGES (TRANSITIONS)
A transition is a special effect that occurs when going from one image to the next image in an
animation. The Transitions function in GIF Construction set will created animated transitions between
your images. There are about two dozen special effects to choose from in GIF Construction Set. Here are
four of these special effects:
1. Dissolve: The images will fade in the transition from one image to the next.
2. Raster: The images will transition from one image to the next as a sequence of bars. You can
choose either horizontal and vertical rasters.
3. Tile: This transition will make your images appear in small squares, in random order.
4. Wipe: Your images will transition from one image to the next by wiping. There are four wipe
options, one from each direction.
Here are the steps to create a transition:
1. Select Edit and then Transition. This will display the Transition dialog window.
2. You now need to load your images into the Transitions window. To do this click on the Add
button. This will display the Open dialog window for you to select your images.
3. You now select the images. You can do this one image at a time or hold down the Ctrl key to

select multiple images. Click on Open. The images are now loaded and displayed in the
Transitions window. Now have fun and experiment with the different special effects. There is
also a very good transitions Help page that includes a description of all the various transitions.
Just click on the Help button located below the Cancel button
4. You can test the various transitions in your animation with the Test button. When you are
finished testing and have chosen a transition, click on OK. GIF Construction Set will then create
the animation and return to the GIF Construction Set window.
5. You can now save the animated GIF file.
Note: Paint Shop Pro also has a banner maker with many options and special effects. The banner maker
is part of Animation Shop so if you wish to experiment with Paint Shop Pro's banner maker, choose
File --> Jasc Software Products --> Launch Animation Shop Once you are in Animation Shop,
choose File --> Banner Wizard.
| top | | bottom |
ANSWERS
1. There are only 9 letters in the word ANIMATION but there are 10 distinct images, the tenth one
being the blank or empty image.
2. 18 images, including the blank image, are displayed before looping takes place, that is, before the
whole process repeats itself. Here are the 18 images which are numbered this time:
1 ANIMATION
2 ANIMATIO
3 ANIMATI
4 ANIMAT
5 ANIMA
6 ANIM
7 ANI
8 AN
9 A
10 a blank image
11 A
12 AN
13 ANI
14 ANIM

15 ANIMA
16 ANIMAT
17 ANIMATI
18 ANIMATIO
3. The complete word ANIMATION should appear first. This is for those browsers that do not
support animation. In these browsers, only the first image in the animation will be displayed.
Because these browsers can't show animation, it is important then, that they at least display the
complete image - in our case, the complete word. Another reason for the given order is that when
a web page containing an animated GIF is sent to the printer, often only the first image in the file
gets printed. Since a printer cannot print out all the individual images that make up the GIF file, it
will print the first image that the browser displays in the animation. This then is another reason
for a good first image in a GIF file.
| Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Sixteen |


FORMS - html tutorials in web page design by J. Gilson
LESSON SIXTEEN - FORMS

| Introducing forms | | CGI - Common Gateway Interface | | Creating a form |

| The FORM tag | | Using a CGI script instead of the mailto: command | | Text boxes |
| Pop-up menu boxes | | Radio buttons | | Check boxes | | Text area boxes |
| Submit and reset buttons, closing a form page | | Using an image to submit form data |
| Password boxes | | Hidden text | | URL encoding | | Free forms and guestbooks |
| Please sign my Guestbook |
INTRODUCING FORMS
One of the most powerful parts of a web page is the form. A form allows you to gather information from
a visitor or customer for immediate or for later use. The person fills in the form and then SUBMITS the
information (which is also called the form data) to your server.
Some of the information in the first two sections in this lesson may be a little confusing. This
information is designed to help you understand just how forms and CGI scripts work. There are several
companies on the internet that offer free forms and free guestbooks and they all come complete with all
the coding necessary to place them on your website. You cannot send the contents of a form directly to
your email address. It has to be routed through the internet company supplying the free form or
guestbook to be interpreted into a readable form through their CGI script and then sent to you. All this is
done almost instantly. That is, when a visitor clicks on the "send button", the information that the visitor
fills into the form or guestbook is sent to the internet company and then immediately to you. Obtaining a
free form or a free guestbook is discussed later in this lesson in the section titled, "Free forms and
guestbooks". So you don't need to worry about understanding everything in the first two sections in this
lesson. What you do want to learn is how to set up the various elements of a form so that you can
take a free form or guestbook and adapt it to your particular needs - and that is what this lesson is
all about.
One way to have the information from a form sent to you is through the mailto: command. An example
using this method is given later in the "Creating a form" section. With the mailto: command, the

information that a visitor fills in is sent immediately to your e-mail address when the "submit" button is
clicked. However, using the mailto: command is not a recommended method and here are the main
reasons:
1. The mailto: only works on Netscape-style browsers. Internet Explorer does not recognize
forms with the mailto: command in the same way that Netscape does. When Explorer encounters
the "mailto:" command, it will simply open up the e-mail box waiting for the visitor to send an e-
mail to you - as if "mailto:" was a regular HREF attribute. The HTML coding for forms,
however, will work on both Netscape and Explorer as well as on all other popular browsers.
2. There is no confirmation to the visitor of the form contents being sent.
3. The text arrives in your e-mail as one long line - all run together. Using the form given below in
the "Creating a form" section, and using my name and address, the first part of the data will look
like:
visitor_name=John+Gilson&visitor_address=6+Pioneer+Place&visitor_city=Brantford
&visitor_state=Ontario&visitor_country=Canada&visitor_code=N3R+7G7&visitor_email=
bes@bfree.on.ca&visitor_website=http%3A%2F%2Fwww.bfree.on.ca%2FHTML and so on ...
For most people, this form output is hard to read - especially if you have a lot of information to
sort through. I will be discussing this strange looking output in more detail in the section entitled
"URL encoding".
4. The mail arrives as an attached file. An attached file has to be opened in a text editor such as
Notepad, WordPerfect or Microsoft Word. You may be able to change this in your e-mail
program. There is often a configuration you can alter that will put the attachment right into the e-
mail body. Look through your configuration setup options to see if you can do this.
To get around these problems associated with the mailto: command, you attach the visitor's output of
your form to a CGI script which is the topic of the next section.
| top | | bottom |
CGI - COMMON GATEWAY INTERFACE
CGI stands for Common Gateway Interface. A CGI script allows you to send the information from a
form looking like regular easy to read e-mail without the problems associated with the mailto:
command. In other words, a CGI script can manipulate or process the information from a visitor into a
more readable and useful form. This is done at the server level and a response is returned to your
browser or to your e-mail address..
A CGI script together with the form allows you collect information from the visitor, analyze and parse

the information into a readable form, and then have the readable contents sent to you. When the visitor
submits the form data, the CGI script can also have another page pop up thanking the visitor for filling
out the form. You can also have the CGI script post what visitors write to another page. This allows
everyone to read what others write. You have to be careful with this one because it can take up a lot of
server space after a while.
A CGI script is a computer program that interprets the data sent to it by the visitor. It divides this long
stream of hard to read data into something you can more easily read and use. You can write the CGI
script yourself, have someone write it for you, or you can download a suitable script from the internet. If
all you want is a guestbook or an order form, there are plenty of places on the net to get a free one
(discussed later in the section "Free forms and guestbooks"). All the required information and coding
comes with the guestbook or form so you don't have to worry about CGI scripts. Everything you need to
know comes with the package.
CGI scripts are often written in a programming language such as C, Perl or JavaScript. The advantage
of using a language such as these three is that the script can be easily transferred from computer to
computer and doesn't need to be compiled into something else. In other words, you can download or
copy a JavaScript from someone else, adapt it to your needs and incorporate it into your web page.
| top | | bottom |
CREATING A FORM
While you may need to find an internet company offering free forms and guestbooks to interpret the
data, writing the HTML code to make the forms is easy. Every form has three parts:
1. the FORM tag

2. the actual form elements where the visitor enters the information
3. the SUBMIT tag which creates the button that sends all the collected information to the server
(usually to be interpreted by a CGI script).
Let's begin by setting up a simple Guestbook that asks for a name, address, e-mail address, plus other
information. The form and information presented here can apply to any type of form you may require on
your web page.
Here is the form we will set up. Below this form is the complete HTML coding along with explanations.
Note: This form is not connected to my e-mail address or to any CGI script so you can practice all you
like (I used a false e-mail address so my box won't fill up with e-mail from this lesson). If you haven't
already signed my real guestbook, you can do so by choosing "Please sign my Guestbook" from the
menu at the top of this lesson. You can also choose to sign my guestbook from my main and alternate

home pages.
I would be most pleased if you would take a moment to sign my guestbook and tell me
what you think of my website.
Name:
Address:
City: State/Province:
Country: United States Zip/Postal Code:
E-mail address:
If you have a website, let me know and I will pay you a visit!
website address:
Please rate my website!

It's Great! It's Good! It's Fair! It's Poor!
Tell me a little about yourself:

I am Male I am Female
Please indicate your interests. Check off as many as you wish!

skiing swimming jogging reading movies surfing the net sports in general
other
Seen any good websites lately? Got a good story to tell? Write them down or just say Hi!!

Thanks for visiting!

Submit! Start over
The above form uses the five most often used basic areas of form styles. These five areas are:
1. TEXT BOXES for entering one line of basic text. I used several text boxes such as for the
visitor's name, address and city.
2. POP-UP BOXES which are menu choices. I used the pop-up box to determine the visitor's
country.
3. RADIO BUTTONS which I used to rate my website and also to determine if the visitor is male
or female.
4. CHECK BOXES which I used to determine the visitor's interests.
5. TEXT AREA BOXES for the visitor to type a multi-line message. I used the TEXT AREA
BOX in the above form for the visitor to let me know of a good website, to tell me a story or to
just say "Hi!".
Below this paragraph is the complete HTML document that creates the above form and then we will
discuss the various parts. Please SWITCH to NOTEPAD, type in this HTML document so you can try it
out using your own e-mail address and also to get a feel of how a form works and how it appears in your
e-mail as an attached file and also what it will look like when you load it into a word processor. You will
also need this form typed in to answer some questions. And you can learn a lot by experimenting! Don't
forget to include the usual HEAD, TITLE and BODY tags. Once you have typed it in, you can then
SWITCH back to your browser, load the HTML file and begin testing and experimenting.
Now here is the HTML document. You can leave out the IMG tag if you don't want to save the
guestbook picture in your working directory.
<IMG SRC="signbook.gif" ALIGN="LEFT" HSPACE="15" ALT=""><STRONG>I would be most

pleased if you would take a moment to sign my guestbook and tell me what you think of my website.</

STRONG>
<P><FORM METHOD="POST" ACTION="mailto:jbes@bfree.on.ca">
Name: <INPUT TYPE="text" NAME="visitor_name" SIZE="35">
<P>Address: <INPUT TYPE="text" NAME="visitor_address" SIZE="35">
<P>City: <INPUT TYPE="text" NAME="visitor_city" SIZE="20">

State/Province: <INPUT TYPE="text" NAME="visitor_state" SIZE="25">
<P>Country: <SELECT NAME="visitor_country" SIZE="1">

<OPTION SELECTED>United States
<OPTION>Australia
<OPTION>Canada
<OPTION>England
<OPTION>France
<OPTION>Netherlands
<OPTION>New Zealand
</SELECT>
Zip/Postal Code: <INPUT TYPE="text" NAME="visitor_code" SIZE="10">
<P>E-mail address: <INPUT TYPE="text" NAME="visitor_email" SIZE="35">
<P><STRONG>If you have a website, let me know and I will pay you a visit!</STRONG><BR>
website address: <INPUT TYPE="text" NAME="visitor_website" SIZE="45">
<P><STRONG>Please rate my website!</STRONG><BR>

<INPUT TYPE="radio" NAME="rating" VALUE="great" CHECKED>It's Great!
<INPUT TYPE="radio" NAME="rating" VALUE="good">It's Good!
<INPUT TYPE="radio" NAME="rating" VALUE="fair">It's Fair!
<INPUT TYPE="radio" NAME="rating" VALUE="poor">It's Poor!
<P><STRONG>Tell me a little about yourself:</STRONG><BR>

<INPUT TYPE="radio" NAME="sex" VALUE="male">I am Male
<INPUT TYPE="radio" NAME="sex" VALUE="female">I am Female
<P><STRONG>Please indicate your interests. Check off as many as you wish!</STRONG><BR>

<INPUT TYPE="checkbox" NAME="interests" VALUE="ski">skiing
<INPUT TYPE="checkbox" NAME="interests" VALUE="swim">swimming
<INPUT TYPE="checkbox" NAME="interests" VALUE="jog">jogging
<INPUT TYPE="checkbox" NAME="interests" VALUE="read">reading

<INPUT TYPE="checkbox" NAME="interests" VALUE="movie">movies

<INPUT TYPE="checkbox" NAME="interests" VALUE="internet">surfing the net
<INPUT TYPE="checkbox" NAME="interests" VALUE="sport">sports in general
<INPUT TYPE="checkbox" NAME="interests" VALUE="other">other
<P><STRONG>Seen any good websites lately? Got a good story to tell? Write them down or just say
Hi!!</STRONG>
<P><TEXTAREA NAME="comment" ROWS="15" COLS="50"></TEXTAREA>
<FONT COLOR="#800000"><H3 ALIGN="center">Thanks for visiting!<BR>

<INPUT TYPE="submit" VALUE="Submit!">
<INPUT TYPE="reset" VALUE="Start over"></H3></FONT>
</FORM>
</BODY>
</HTML>
Now for a discussion on the above HTML coding:
THE FORM TAG
Our form begins with an image of a small guestbook followed by the instructions. Images are
completely dealt with in Lessons 7 and 8. Here are these lines again:
<IMG SRC="signbook.gif" ALIGN="LEFT" HSPACE="15" ALT=""> <STRONG>I would be most

pleased if you would take a moment to sign my guest book and tell me what you think of my website.</
STRONG>
I did not include a guestbook picture in my actual guestbook. However, I did make the guestbook title
(My GuestBook) into an image so I could use a special font.
Once you get past the opening statements, you then have to tell the browser that you are starting a form
and what you want done with the form. This command is:
<FORM METHOD="POST" ACTION="mailto:jbes@bfree.on.ca">
This command line does three things:
1. It tells the browser that a form is starting now. FORM is a container element in that it has an
opening tag (<FORM> ) and a closing tag (</FORM> ). Everything contained between these

opening and closing tags is part of the form.

2. It tells the browser that the METHOD of dealing with the form data is to POST it. METHOD is
a form attribute and POST is called the "value" of the attribute METHOD.
3. It tells the browser to post all the data from the visitor to my e-mail address (not my real e-mail
address). This is ACTION part. Giving the e-mail address will only work in Netscape style
browsers. There are two basic problems associated with using an e-mail address with the
ACTION attribute:
1. Few browsers support the "mailto:" action at this time. So only visitors that use those
browsers will be able to submit form data to you. Everyone else will either get an error
message or the e-mail box simply opens up in the normal way for someone to send an e-
mail to you which has nothing to do with the form.
2. If a browser does accept the mailto: e-mail address, it will still not decode the form input
before mailing it to you. Thus you get all your form input encoded which as you read
earlier makes the data difficult to read.
If you are going to try the mailto: command anyway, be sure to replace my e-mail address with yours so
you can fill out the form and send the data to yourself. If you use the given e-mail address in the mailto:
command, you will only get an error message stating that the address does not exist - so you need not
worry about sending me any of your test data. You can therefore experiment with the form all you like.
If you are planning to obtain a free form or guestbook, you will be given the FORM tag from the
company to insert into your coding. It will contain the necessary METHOD and ACTION attributes to
have the form contents sent to their CGI script for decoding.
| top | | bottom |
USING A CGI SCRIPT INSTEAD OF THE MAILTO: COMMAND
If a CGI script is used to interpret the form data, the ACTION attribute must then specify the URL of
the CGI script which processes the form and sends the processed information back to you. That is, when
using a CGI script to interpret the data, the action will not be an e-mail address as given in the previous
section, but will be an address such as:
http://www.domain_name.com/cgi-bin/your_directory/process_form
In other words, the FORM tag will look something like:
<FORM METHOD="POST" ACTION="http://www.domain_name.com/cgi-bin/your_directory/

process_form">

In this case, the ACTION attribute is sending the visitor information to a CGI script (which I called
"process_form") - wherever that CGI script is located. That is, the attribute ACTION contains the name
of the CGI script to process the form (process_form) as well as the location of the script (domain_name.
com/cgi-bin/your_directory). Thus the ACTION attribute contains the complete URL of the CGI script.
In our form, the METHOD of dealing with the form data is to POST it. Well, there are actually two
METHODS that can be used. That is, there are two values for the METHOD attribute. One is POST as
shown and the other is GET. GET is the default value if you don't use the METHOD attribute (the only
required attribute for the FORM tag is ACTION).
Now when using GET instead of POST, the data from the form is packaged and appended to the end of
the URL specified in the ACTION attribute. This data is actually sent to the CGI as a query-string
variable attached to the end of the ACTION URL as in:
http://www.domain_name.com/cgi-bin/your_directory/process_form?visitor_name=John+Gilson&
visitor_address=6+Pioneer+Place and so on...
When the server executes your CGI script to process the form, its sets this variable called "query-string"
to everything after the question mark in the URL. Thus with the GET method, all the encoded data is
assigned to the query-string variable. The drawback to the GET value is that there may be limits on the
data that can be stored in the variable. So if you could expect to receive lots of data (especially if you
have a large comment field), you might lose some of that data if you use the value GET.
POST, on the other hand, sends the data separately through a direct link to the server. In other words, it
is sent as a separate stream and is not assigned to a variable. For this reason, you can have as much data
as you want. It may therefore be safer to use POST rather than GET for the METHOD attribute. When
you get a form or guestbook off the net, you will be given the coding to use so you don't have to worry
whether to use POST or GET. In either case, the form data ends up on the server side (and therefore in
your CGI script) as coded data such as:
visitor_name=John+Gilson&visitor_address=6+Pioneer+Place&visitor_city=
Brantford&visitor_state=Ontario&visitor_country=Canada&visitor_code=N3R+7G7
&visitor_email=bes@bfree.on.ca&visitor_website=http%3A%2F%2Fwww.bfree.
on.ca%2FHTML and so on ...
The first step in your CGI script, then, is to decode all that data so you can manage it better.
Here are some final points for this section:
1. A form may contain markup tags to mark up your text.

2. A form cannot be nested. That is, you cannot have a form inside a form.
3. If your form is in a frame, you may want to include the attribute TARGET as part of any URL, as

in TARGET="_top" to load the result into the full body of the current window. Two other
attributes for TARGET are:
blank (TARGET="_blank") to load the result into a new blank window and
parent (TARGET="_parent") to load the result into the immediate parent of the document the
form is in.
Let's now look at each of the five form areas given in the above form.
| top | | bottom |
TEXT BOXES
The first form area is called the TEXT BOX. Text boxes contain one line of text and are often used for
names, addresses, credit card information, etc. I used it to get the visitor's name, address, city, State/
Province, Zip/Postal code, e-mail and website addresses. A guestbook normally will not require all this
information (see my actual guestbook). Here are the first four text boxes to serve as a reminder:
Name:
Address:
City: State/Province:
Here are the first two lines from the form asking for the name and address:
Name: <INPUT TYPE="text" NAME="visitor_name" SIZE="35">
<P>Address: <INPUT TYPE="text" NAME="visitor_address" SIZE="35">
A TEXT BOX is a box that allows for one line of text. In the first example, the viewer or visitor is
asked to type in his or her name. The visitor will first have to click into the box to activate it. In the
second box, the visitor is asked to type in the address.
The INPUT tag simply tells the browser that visitor input will occur here. This INPUT tag comes with a
number of attributes:

1. TYPE is an INPUT attribute that specifies the type of control that is to be used. In this case its
value is "text" meaning a one line text box.
2. NAME is the attribute that allows you to assign any name to the text box. In our case in asking
for the visitor's name, I have named it "visitor_name". In other words, the attribute NAME has
the value "visitor_name". Thus when the data is collected by the server, the information typed in
this text box will be identified by the value "visitor_name". Basically, when each piece of
information is sent by the visitor to the CGI script, it is sent in two parts: first an identifier or
name so you will know what data will follow and the second part is the actual data. An
important part of a form element is this concept of NAME/VALUE pairs. In our example, the
name is "visitor_name" and the data "value" is whatever the visitor types in for the name. Using
my name, John Gilson, this would be sent to the CGI script as: visitor_name=John+Gilson. Of
course a CGI script would print this information, along with all the other information from the
form, in a nice easy to read manner. Also keep in mind that nothing is actually sent to the server
until the visitor clicks on the "Submit!" button at the bottom of the form.
3. The SIZE attribute denotes the character length or size of the text box - that is, the length of the
input field. I chose a length of 35 for both the name and address, 20 for the city and 25 for the
State/Province. You can make your text boxes any size you wish. If the visitor enters more
characters than will fit into the box, the text will scroll. I like to think of "character length" as
representing the "size" or "length" of the text entry box as opposed to the "number of characters".
This is because not all characters are the same size. For example, in any text box, I can place
more lower case f's than I can upper case W's because a lower case "f" simply takes up less space
than an upper case "W". So the number of characters that will actually fit into a box will vary
depending on the characters used. However, you could think of the number of characters as being
"average size" characters. I like to think of the lower case "h" as representing an average size
character.
4. Using the VALUE attribute, you can have text printed in a text box when the form appears on the
page (called "default text"). For example, if you want to ask for the visitor's country using a text
box and you know that most of your visitors will be from the United States, then to have the
name "United States" appear in the box as default text, the INPUT tag would be something like:
Country: <INPUT TYPE="text" VALUE="United States" NAME="visitor_country"

SIZE="25">
If a visitor is not from the United States, then he or she would simply have to erase the name and
type in the correct country.
5. MAXLENGTH is another attribute you can use. To see what this attribute does, try the
following problem:
Problem 1: SWITCH to NOTEPAD and add the following attribute and value to the INPUT tag
that asks for the visitor's name:
MAXLENGTH="34"

so that the complete line looks like:
Name: <INPUT TYPE="text" NAME="visitor_name" SIZE="35" MAXLENGTH="34">
Now save the file, SWITCH back to your browser and then load the file. Type in a very long
name - longer than the box length. What happened?
Problem 2: SWITCH back to NOTEPAD and this time delete both the SIZE and MAXLENGTH
attributes from the visitor name box so that the line now looks like:
Name: <INPUT TYPE="text" NAME="visitor_name">
Now save the file, SWITCH back to your browser and load the file. Since we no longer have a
box size, what character length did the browser use? In other words, what is the default value for
the box length if you do not include the size attribute?
Note:
1. You can use a table to set up your form elements. So if you do not like the way the text boxes
line up, control them through the use of a table. See Lessons 11 and 12 if you need to review
tables.
2. Use <BR> (line BReak) and <P> (Paragraph) tags to space the form elements. As you likely
noticed, I used the <P> tag to double space the different sections of the form. I also wanted the
"City" and "State/Province" on the same line and so I did not force a line break between them
with a <BR> or <P> tag.
3. You can also use the ampersand command ( ) to force extra spaces between the headings
(such as the heading "Name:") and the text boxes. I used the ampersand command to force extra
spaces in different locations in my actual guestbook. You can see how this was done by visiting
my guestbook page and choosing "VIEW" from the menu bar and then "SOURCE" or
"DOCUMENT SOURCE".
| top | | bottom |

POP-UP MENU BOXES
The second form area is the POP-UP MENU BOX. Creating menus for your visitors makes it easy for
them to enter information or to provide criteria for a search without having to type anything. As an
illustration, I used the pop-up menu box for the viewer to choose the country. Here is a reminder of what
it looks like (in an actual situation, there would be many more countries listed):
Country: United States
The box, until clicked on, only shows one item. In our case, it is the "United States". Here is the HTML
coding to generate the pop-up menu box.
Country: <SELECT NAME="visitor_country" SIZE="1">

<OPTION SELECTED>United States
<OPTION>Australia
<OPTION>Canada
<OPTION>England
<OPTION>France
<OPTION>Netherlands
<OPTION>New Zealand
</SELECT>
Note the following points concerning the pop-up menu box:
1. The SELECT tag in the first line tells the browser that a SELECT form or POP-UP form is
going here. In this context, SELECT means to "SELECT" from a menu of choices. SELECT is
a container element in that it also requires a closing tag (</SELECT> ). Everything in between
the opening and closing tags is part of the pop-up menu form.
2. The NAME attribute follows the same reasoning as in the above TEXT BOX section in that it
specifies the NAME of the country list (part of the NAME/VALUE pair we discussed earlier).
Visitor_country is the name for this menu of countries that will identify the country when it is
collected by the server. I am naming this data "visitor_country" implying that what follows is the
visitor's country. Thus if a visitor selects Canada, the information will be sent to the server as
visitor_country=Canada. Again keep in mind that no information will be sent to the server until
the visitor clicks on the Submit! button at the bottom of the form.
3. The SIZE attribute has a value of "1". This denotes the number of items that must be initially
visible to the visitor. If set to "1", you will get a drop-down list. If it is set to more than one, you
will get a scrollable list. If you use the attribute MULTIPLE as in:
Country: <SELECT NAME="visitor_country" SIZE="2" MULTIPLE>
it will allow the visitor to select more than one item from the menu. Exactly how a visitor can

select more than one item at once is dependent on his or her browser's platform - so do not
include "instructions" on how to do this. They may be wrong and can cause a lot of confusion.
Obviously, allowing a selection of more than one country is not a good example as the visitor can
only live in one country - but it illustrates the point. Normally the pop-up menu is used to make
one selection.
4. Each OPTION tag denotes an item in the menu. I only gave 7 choices or options to illustrate the
pop-up menu but you can have as many as you wish. Note that with the United States option, I
used the attribute SELECTED. This attribute gives the default value. Since I wanted the United
States to be the choice by default, I used the SELECTED attribute to place this country's name in
the box. So use the SELECTED attribute if you feel there is a most common answer.
5. You can also use the VALUE attribute with the OPTION tag. The VALUE attribute allows you
to further identify the data when it is collected by the server. For example, suppose in your form
you decide to ask for your visitor's age category. You could have something like:
Age: <SELECT NAME="visitor_age" SIZE="1">

<OPTION VALUE="child">less than 8
<OPTION VALUE="youth">8 to 12
<OPTION VALUE="teenager">13 to 19
<OPTION VALUE="young adult>20 to 29
and so on...
If the visitor chooses "8 to 12", the data sent to the server will then be: visitor_age=youth, as
opposed to: visitor_age=8+to+12.
6. You must end the pop-up menu box section with the closing SELECT tag (</SELECT>).
The next part of the form asks for the Zip/Postal Code, E-mail and website addresses. I used the standard
TEXT BOX to obtain this information.
| top | | bottom |
RADIO BUTTONS
The third form area is called the RADIO BUTTON. These are the little round buttons that you see in
our form for rating the website and to find out if the visitor is male or female. Here again are the radio
buttons for our form:
Please rate my website!

It's Great! It's Good! It's Fair! It's Poor!

Tell me a little about yourself:

I am Male I am Female
Each button is "alive" which means that you can click on any one of them. When you click on a radio
button, the button "darkens" in the center. Also, you can only choose one button. If you choose another
button, the first one will give up its selection. The name Radio Button comes from "way back" when
car radios had big black plastic buttons to select stations. When you pushed a button, the dial moved.
When you pushed another button, the first choice was dropped and the dial moved again. You couldn't
push two buttons at once. Radio buttons in forms work in the same way.
Here are the lines that give these buttons beginning with the instruction.
<STRONG>Please rate my website!</STRONG><BR>

<INPUT TYPE="radio" NAME="rating" VALUE="great" CHECKED>It's Great!
<INPUT TYPE="radio" NAME="rating" VALUE="good">It's Good!
<INPUT TYPE="radio" NAME="rating" VALUE="fair">It's Fair!
<INPUT TYPE="radio" NAME="rating" VALUE="poor">It's Poor!
<P><STRONG>Tell me a little about yourself:</STRONG><BR>

<INPUT TYPE="radio" NAME="sex" VALUE="male">I am Male
<INPUT TYPE="radio" NAME="sex" VALUE="female">I am Female
Now for a discussion on these lines
1. The TYPE of INPUT is to be a RADIO button.

2. Note that the group of four buttons to rate the website all have the same NAME which I called
"rating". For the two buttons involving the sex of the visitor, I gave the same NAME "sex". The
NAME attribute identifies each radio button in a set of buttons and in any one set of radio
buttons, only one button can be selected. In other words, out of all the radio buttons with the
same name, only one can be active at a time. Thus the NAME attribute names the category the
buttons are in.
3. Each radio button must have a VALUE. The VALUE (part of the NAME/VALUE pair) is the
name assigned to the radio button. You must define a value for later sorting of the data by the
CGI script. For example, if the visitor chooses the radio button "It's Great!", the VALUE "great"
will be sent to the server (instead of "It's Great!"). Thus the information submitted to the server
will be "rating=great".
4. Note in the choice "It's Great!", I included the attribute CHECKED. The attribute CHECKED
makes the radio button active by default. Thus the choice "It's Great!" will be darkened or
checked - hoping that most visitors will agree with this choice and move on to the next part of the
form.
5. If it is not clear that only one choice is to be made, then you can always include an instruction
such as: Please select one of the following.

After rating the website, the next part of the form is to choose Male or Female. These statements follow
the same reasoning as for rating the website except that there are only two choices. As stated above,
choosing male or female is a different category than the website rating, so it needs its own name which I
called "sex". Note that I did not select one to be the default value because there is no "most common"
answer. Thus no default was set with the "checked" attribute.
| top | | bottom |
CHECK BOXES
The fourth area is the CHECK BOX. I used the CHECK BOX to determine the visitor's interests. The
given list in our form is only for illustration purposes and is by no means meant to be a complete list.
Often with lists such as these, there is also the choice of "Other" and then allowing the visitor to type in
what the "other" is (as I did in my actual guestbook).
Here are the check boxes as a reminder:
Please indicate your interests. Check off as many as you wish!

skiing swimming jogging reading movies surfing the net sports in general
other
Check boxes are much like radio buttons except for three differences:
● The item is a square (not round like a radio button).

● It is marked with an X or with a checkmark and not darkened as with radio buttons.
● You can check as many items as you wish. You are not limited to one selection as with radio
buttons.
Here is the HTML code for this part of the form beginning with the instruction.
<STRONG>Please indicate your interests. Check off as many as you wish!</STRONG><BR>

<INPUT TYPE="checkbox" NAME="interests" VALUE="ski">skiing
<INPUT TYPE="checkbox" NAME="interests" VALUE="swim">swimming
<INPUT TYPE="checkbox" NAME="interests" VALUE="jog">jogging
<INPUT TYPE="checkbox" NAME="interests" VALUE="read">reading
<INPUT TYPE="checkbox" NAME="interests" VALUE="movie">movies
<INPUT TYPE="checkbox" NAME="interests" VALUE="internet">surfing the net
<INPUT TYPE="checkbox" NAME="interests" VALUE="sport">sports in general
<INPUT TYPE="checkbox" NAME="interests" VALUE="other">other

The TYPE of INPUT as indicated is "checkbox" (no space in the word "checkbox").
TYPE="checkbox" produces a check box. A check box has two states - on and off. As with Radio
Buttons, the NAME indicates the "category" or "set" of check boxes which I have named "interests".
The VALUE will only be sent to the server if the corresponding check box is checked - that is, when the
check box is "on". Otherwise it is ignored altogether.
Also note the following two points:
1. If visitors might find it confusing to know what to do, you could include an instruction such as I
did ("check off as many as you wish") or something like: Select one or more of the following:
2. If you want one or more of the choices to be pre-selected by you, then use the attribute
CHECKED. You can check as many boxes as you like so that when the form page opens up to
the visitor, some of the boxes will already have checks in them. A visitor can always remove a
check by clicking in the checked box.
| top | | bottom |
TEXT AREA BOXES
The fifth and last area shown in the form is the TEXT AREA BOX (also know as the TEXT BLOCK)
and it allows the visitor to type in a block of text. The text area box is also called the COMMENT
BOX. Here is the Text Area Box once again beginning with the instructions:
Seen any good websites lately? Got a good story to tell? Write them down or just say Hi!!
The Text Area Box can be as reasonably big as you want. As well, more text can be entered than can fit

in the display area.
Here is the HTML code for the text area box beginning with the instructions:
<STRONG>Seen any good websites lately? Got a good story to tell? Write them down or just say Hi!!</
STRONG>
<P><TEXTAREA NAME="comment" ROWS="15" COLS="50"></TEXTAREA>
Now for the discussion:
1. TEXTAREA is one word. This tag tells the browser that a multi-lined Text Area Box is to be
created allowing the visitor to write something in the box. The Text Area Box is like the Text
Box we used for the name and address except that the Text Box only allows for one line of text.
The Text Area Box allows for many lines of text. All the viewer has to do is click in the box to
activate it and then begin typing the message.
2. The TEXTAREA tag unlike the TEXT BOX statement, requires a closing TEXTAREA tag as
indicated by the </TEXTAREA>.
3. Note that I named the text area box "comment" but you can give it any suitable name. When a
visitor types in the box, the data will be sent to the server as comment=data. Thus I know that
any data from the text area box will be first identified by the name "comment".
4. ROWS="15" tells the browser to set up 15 rows for the text and COLS="50" tells the browser
to set up 50 columns for the text - that is, 50 characters per row. The ROW attribute specifies
how high the text area box will be. The COLS attribute specifies how wide the text area box will
be. You can of course make the box bigger or smaller - whatever suits your needs. If you use a
column width of about 50, you will be certain that the text area box will easily fit in all browsers.
The text is printed in a "courier" font meaning that each character takes up the same amount of
space - whether a lower case "f" or an upper case "W". This allows the width to be specified as so
many characters per row.
5. Another attribute that can be used with the TEXTAREA tag is the WRAP attribute. It specifies
how text will wrap. Possible values are "hard", "soft" or "none". For example, if you want to
specify no wrapping of text, it will be WRAP="none". You can experiment with these attributes
so see their effects on the typing of text in the text area box.
6. With Netscape, vertical and horizontal scroll bars are automatically placed. With Explorer, the
scroll bars will only be placed when it is necessary to do so.
Problem 3: SWITCH to NOTEPAD and change the TEXTAREA tag to the following:
<P><TEXTAREA NAME="comment" ROWS="15" COLS="50">My favorite website address is:</

TEXTAREA>
Now save this change and load the HTML document back into your browser. What did this change do to
the text area box?

Problem 4: Our text area box consists of 15 rows and 50 columns. Now SWITCH back to NOTEPAD
and make whatever changes are necessary to determine the default number of rows and columns.
| top | | bottom |
SUBMIT AND RESET BUTTONS, CLOSING A FORM PAGE
Finally we need something to allow the visitor to send the visitor information (that is, the contents of the
form) to the server and to allow the visitor the option of starting over. Two buttons are then needed - one
to SUBMIT the information or data to the server and one to REDO the information. Here are these two
buttons again beginning with a "thank you":
Thanks for visiting!

Submit! Start over
Here are the commands I used to place these buttons beginning with the thank you. If your browser
supports coloring blocks of text, you may have noticed that the "Thanks for visiting!" was printed in a
maroon color. You can omit the FONT container element if you wish.
<FONT COLOR="#800000"><H3 ALIGN="center">Thanks for visiting!<BR>

<INPUT TYPE="submit" VALUE="Submit!">
<INPUT TYPE="reset" VALUE="Start over"></H3></FONT>
Discussion:
1. TYPE="submit" creates a 3-D button that submits the visitor's form data when clicked on.
2. You can give the button a name (an instruction) by using the VALUE attribute. In our form I
named it Submit! (VALUE="Submit!). Whatever instruction you decide to place on the button,
just make sure it's clear that a click will send the visitor's information to the server.
Problem 5: The VALUE attribute is optional. Switch to NOTEPAD and delete the
VALUE="Submit!" so that the line now looks like:
<INPUT TYPE="submit">
Save the change, load the changed HTML file into your browser. What is the default submit

message (that is, the default instruction) on the submit button?
3. TYPE="reset" creates a 3-D button that clears the entire form and resets everything back to the
original values when clicked on. You can also give this button a name or instruction by using the
VALUE attribute. You need to give the visitor an opportunity to start over with a fresh form -
including all the default values. If everyone could fill out a form perfectly the first time, we
would not need the "delete" and "back space" keys on the computer keyboard. So give your
visitors a "reset" button that will restore the form to its original state, because sometimes it's
easier just to start over with a clear form with all variables returning to their default settings.
4. The VALUE attribute for the reset button is used to give the instruction. In our form I chose to
use the instruction "Start over" (VALUE="Start over").
Problem 6: The VALUE attribute for the reset button is also optional. Switch to your text editor
and delete the VALUE="Start over". Save the change, load the HTML file into your browser.
What is the default reset message?
5. <H3 ALIGN="center"> centers the buttons and strongly emphasizes the "thank you".
6. A form must have at least one submit button. In other words, more than one submit button is
allowed. If each submit button has its own unique NAME attribute, then the name of the submit
button selected by the visitor is sent along with the rest of the form data. This allows the CGI
script to determine which button was pressed. For example, this can be done with:
<INPUT TYPE="submit" NAME="submit_name" VALUE="Submit!">
where "submit_name" is the name assigned to the button and with each button having its own
assigned name (part of the NAME/VALUE pairs to be sorted by the CGI script).
You can also have one or more images instead of a button to submit the form data or have a
combination of buttons and images to submit data. Each image can also have its own name so
that the CGI script can determine which image was clicked on. Using an image to submit data is
the topic of the next section.
7. The URL specified in the ACTION attribute of the FORM tag does not have to be an e-mail
address or a CGI script. One of the reasons for not wanting this is to get a 3-D button which when
clicked on takes you to a new page. For example, in Lesson 6 on links, part of the lesson creates
buttons for linking to other pages using the FORM container element. For example, to create a
simple 3-D button that links to my home page (index.htm), we have:


</FORM>
If you now go back to Lesson 6, you will have a better understanding of the HTML coding
involved in generating link buttons. Note that buttons are not normally used for ordinary links.
Buttons are usually used only with forms and other situations that involve submitting data.
Finally we MUST close the FORM page with the closing form tag which is </FORM> and end the
HTML document with the usual closing BODY (</BODY>) and HTML (</HTML>) tags.
| top | | bottom |
USING AN IMAGE TO SUBMIT FORM DATA
Instead of a submit button, you can use an image to submit the data information. With an image you
don't need a "submit" button because the form data is automatically sent when the user clicks on the
image.
Here is the HTML code using an image to submit the form data:
Name: <INPUT TYPE="image" SRC="image.gif" NAME="image_name">
1. "image.gif" represents the name of the image (or the URL of the image to be used). If you do not
precede the image with an instruction, the image should be self-explanatory to the visitor. In
other words, it should be clear to the visitor that the image is to be clicked on to send the form
data to the server.
2. When the visitor moves the mouse pointer over the image, it will turn into a pointing hand
indicating that the image is active.
3. When the visitor clicks on the image, the coordinates of the clicked point, measured in pixels
from the upper left hand corner of the image, are also sent. The coordinates are sent as x and y
coordinates. The x-coordinate is submitted with a ".x" appended to the NAME (which I called
"image_name" - but you can give it any suitable name). The y-coordinate is submitted with a ".
y" appended to the name. Try this feature to see it work. If you were using a map of the world as
the image for example, you could ask the visitor to indicate the country where he or she lives by
clicking on the map. From the coordinates, the CGI script can then determine the visitor's country
or region. However, for most people, the coordinates will not provide any useful information.
4. If you want to use more than one image to submit the data, you can give each image its own
unique NAME.

5. Note the absence of the VALUE attribute in this INPUT statement. The VALUE attribute is only
used to place instructional text on buttons - not on images. With images, the coordinates of the
clicked point take the place of the VALUE attribute ("NAME=coordinates" is sent to the server
as opposed to NAME=VALUE in the name/value pairs).
6. As is always the case with images, you can use the ALIGN attribute to specify the alignment of
the surrounding text with the image. Possible values are "top", "middle", "bottom", "left" or
"right".
7. In general, you should only use an image at the end of the form to submit data because as soon as
the image is clicked on, the form data is immediately sent to the server. You can, however, create
a questionnaire out of images if you make the next question appear after the data from the last
question has been sent to the server.
| top | | bottom |
PASSWORD BOXES
TYPE="password" creates a single line text box except that when the visitor types in the box, the
letters are hidden by bullets or asterisks.
Here is the HTML code to set up a password into your form (beginning with the instruction):
Please enter your password (max. 5 characters):

<INPUT TYPE="password" NAME="visitor_password" SIZE="6" MAXLENGTH="5">
Note the following three points:
1. NAME="visitor_password" simply means that when the data is collected by the server, the
characters typed in the password box will be identified by the name "visitor_password".
2. The SIZE attribute for the length of the box is optional. The default size, however, is dependent
on the browser used. On many browsers, it is 20 characters. On my browser it is 29 characters. It
is therefore recommended that you include the SIZE attribute for complete control of the box
length.
3. The MAXLENGTH attribute is also optional. MAXLENGTH simply defines the maximum
number of characters that can be entered.
| top | | bottom |
HIDDEN TEXT

Hidden elements are used to store information gathered from one form so that it can be used with the
data from another form. In other words, hidden elements are used by CGI scripts to transfer information
from one form to another. Nothing is displayed by the browser (that is, hidden elements are invisible
(hidden) to the visitor), but the information is still sent to the server.
Here is the HTML code for hidden text.
<INPUT TYPE="hidden" NAME="hidden_text" VALUE="visitor_id">
Note the following points for this INPUT line:
1. The information to be transferred is assigned the variable name "hidden_text".

2. The "visitor_id" is the information itself that is to be transferred.
3. The hidden text can be placed anywhere in the body of the HTML form.
Here is an example that involves hidden text. As you may know, I sell on this website a JavaScript
course, and some other products and services. It used to be that a company by the name of Net
MoneyIN processed all my credit card orders. If you clicked on the "order button", you left my website
and were taken to Net MoneyIn's secure site to fill in the form with your credit card information. At the
top of this secure order page was my company name (Brantford Educational Services) as well as the
name of what you were ordering (for example, JavaScript Course), the price ($19.95), the number of
copies being ordered (which was set to 1), and the total cost ($19.95). Now if this was the standard form
used by all Net MoneyIn customers, how did my information get there on their secure order form? Well,
the answer is through hidden text. Here is how it works: On my HTML web page that advertises my
JavaScript course, the button that you clicked on to take you to Net MoneyIn's secure order page was a
SUBMIT button in a FORM element. Here were some of the actual statements:
<H3 ALIGN="CENTER">
<FORM ACTION="https://www.netmoneyin.com/scripts/orders/order.cgi">
<INPUT TYPE="hidden" NAME="sn" VALUE="Brantford Educational Services">
<INPUT TYPE="hidden" NAME="se" VALUE="bes@bfree.on.ca">
<INPUT TYPE="hidden" NAME="su" VALUE="http://www.htmltutorials.ca/ordering.htm">
<INPUT TYPE="hidden" NAME="pd" VALUE="JavaScript Course">
<INPUT TYPE="hidden" NAME="pp" VALUE="19.95">
<INPUT TYPE="hidden" NAME="ou" VALUE="1">
<BR><INPUT TYPE="submit" VALUE="CLICK HERE TO PLACE YOUR ORDER BY CREDIT
CARD">
</FORM></H3>
These are the HTML statements given to me by the people at Net MoneyIn. Note that my company
name, "Brantford Educational Services" was stored in variable "sn". That is, "Brantford Educational

Services" was the VALUE assigned the NAME "sn" (making up a "name/value" pair). I was not allowed
to change the NAMES because they were used by Net MoneyIn for all their business customers to
transfer the VALUE information to the order page when the order button was clicked. However, I was
allowed to change the VALUES. So if I had a new company name, or a new e-mail address, or a new
price, I could make the change in my HTML document, and the new information was then instantly
transferred to the secure order page when the SUBMIT button was clicked! All companies that were
involved with Net MoneyIn had to use the same NAMES but with VALUES according to their own
businesses.
Also, when you clicked on the order button and went to Net MoneyIn's secure order page, you could
choose SOURCE or DOCUMENT SOURCE from the VIEW menu to see my company name, book
title, price, etc., as if they were typed in like any other part of the HTML document. They were,
however, transferred to those spots as hidden elements by a CGI script when you clicked on the order
button!
| top | | bottom |
URL ENCODING
URL encoding is the format that the browser uses to package the data from a form when it is sent to the
server. The browser gets all the names and values from the form input, encodes them as name/value
pairs, translates special characters such as those used in encoding, lines up all the data and sends them to
the server.
A sample of encoded data is:
visitor_name=John+Gilson&visitor_address=1725+Orrington+Ave.&visitor_city
=Evanston&visitor_state=Illinois&visitor_country=United+States&visitor_code=60201
&visitor_email=bes@bfree.on.ca&visitor_website=http%3A%2F%2Fwww.bfree.
on.ca%2FHTML%2F&rating=great&sex=male&interests=read&interests=internet ... and so on.
URL encoding follows these rules:
1. Name/value pairs are separated by ampersands (&).

2. Each name is separated from its corresponding value by an equal sign (=). In cases when the
visitor does not enter a value for a particular request, the name still appears in the output, but with
no value (for example, "visitor_address=").
3. Some special characters are encoded in hexadecimal preceded by a percent sign (%). Special
characters include =, &, /, : and %.
4. Spaces in the input are indicated by plus signs (+).

The first step for the CGI script is to decode all that data so you can manage it better. Fortunately, CGI
scripts do exist (or can often be easily made up) that will decode the name/value pairs into something
you can more easily work with. You can begin by checking with your internet provider. For a small fee
they may be able to provide the CGI script you need. If not, you can then search the internet for suitable
scripts or you can obtain a free guestbook or a free form as discussed in the next section. These free
guestbooks and forms include free access to CGI scripts to interpret the data.
| top | | bottom |
FREE FORMS AND GUESTBOOKS
I will end this lesson by stating that there are many places on the internet that offer free forms and
guestbooks. You can obtain a free form or a free guestbook by visiting the following "Free Stuff Page":
http://www.thefreesite.com/
Not only do they have links to websites offering free forms and guestbooks, they also have links to a
host of other free things such as free counters, free graphics, free games, etc., etc.
The main difference between a free guestbook and a free form is that a guestbook is simply a very short
form. With most free guestbooks, all the visitor has to do is enter his or her name, email address, and a
comment (much like a real guestbook that you would sign at a function - a name and maybe an address
or comment). If the visitor has a home page there is often also the opportunity to enter the URL. With a
free guestbook, visitor data is usually posted so everyone can view all the comments that are made.
Also, when a visitor chooses to sign the guestbook, he or she is taken to the website of the company that
has the guestbook. That is, everything is done from a remote server which can slow things down a little.
I tried out a number of the free guestbooks from the above location and they all worked.
I wanted more than a simple short form for my guestbook. I wanted complete control over every item in
my guestbook. I was able to do that from a company called Freedback.com whose URL is given below.
Freedback.com offers free forms with a lot of flexibility. I did the complete HTML coding for my
guestbook and used their CGI URL in the ACTION attribute of the FORM tag to decode the data.
Complete instructions are provided by Freedback.com. If you want to see my guestbook coding which is
based entirely on the information presented in this lesson, just visit my guestbook and choose SOURCE
from the VIEW menu.
My guestbook is in my directory on my ISP's server. This way I can add to the guestbook, delete items
from the guestbook - make any changes that I want. With Freedback.com, you are able to have as many
text boxes, check boxes, radio buttons, pop-up menus, etc. as you like. You are in complete control of

what you want your form to look like and what goes into your form - and it's all FREE! Only when the
visitor clicks on the "submit" button does the visitor information go to Freedback.com's server to be
decoded by their CGI script. When the visitor chooses "submit", a summary of the form data is
displayed to the visitor and at the same time, the decoded data is e-mailed to me. That is, Freedback.com
sends me the same summary as displayed to the visitor. Freedback.com makes their money from the
advertising that is displayed above the summary.
Here is Freedback.com's website that offers the free form that I used:
http://freedback.com/?self
| top | | bottom |
ANSWERS
1. You could not type more than 34 characters. The MAXLENGTH attribute lets you define a
maximum number of characters that can be entered in the text box. Keep in mind that a visitor
can type in more text than will fit in the text box - so if you want to make sure there is a limit, use
the MAXLENGTH attribute.
2. The default character length if you do not include the SIZE attribute is 20 for most browsers.
Because you never really know how someone's else browser displays default values, you should
always try to maintain control when possible. Thus you should include the SIZE attribute with
your text boxes.
3. The words "My favorite website address is:" appeared in the text area box. If you want to have
something written in the text area box when the form appears on the page (called "default text"),
write the information just before the </TEXTAREA> as shown in the problem - that is between
the opening and closing TEXTAREA tags. Note: Placing HTML coding in the text area box will
not work.
4. To determine the default number of rows and characters per row, first remove the ROWS and
COLS attributes so the line looks like:
<P><TEXTAREA NAME="comment"></TEXTAREA>
Then SAVE the changes, load the document into your browser and count the number of rows and
the number of characters per row. The results will vary depending on the browser used. Many
browsers will default to 4 rows and 40 characters per row. My browser defaults to only one row
with 20 characters per row. To maintain control of the size of the text area box, I strongly
recommend that you include the ROWS and COLS attributes. Here is a problem I did not ask you
to figure out. What is the maximum number of characters that a visitor can enter into a text area
box? Answer: 32,700 characters.

5. The default message is "Submit Query".

6. The default message is "Reset".

| Send me to Lesson Seventeen |


MORE TEXT FORMATTING - html tutorials in web page design by J. Gilson
LESSON SEVENTEEN - MORE TEXT FORMATTING

| Review of Logical and Physical text formatting | | The BASEFONT tag |

| Changing the font size of one or more characters of text | | BIG and SMALL tags |
| Changing the font face | | Block quotes | | Superscript and subscript |
| CITE, CODE, SAMP, TT, KBD, VAR and ADDRESS tags | | Underlining text |
| Formatting text with <PRE> | | Blinking text | | Adding a comment |
REVIEW OF LOGICAL AND PHYSICAL TEXT FORMATTING
Until HTML 3.2 came along, web page designers were quite limited in their choices of text formatting.
HTML 3.2 allows web page designers (that's you) to change the size, color and typeface of any of the
words and letters on the web page (although some of these options were previously available as
Netscape extension tags). When these pages are viewed in browsers that support HTML 3.2, they can be
quite attractive.
In Lesson Four, you were introduced to two types of tags - that is, two types of formatting techniques.
They were:
1. logical tags and

2. physical tags
With logical tags or logical formatting, each browser formats the affected area as best as it can given
the platform's strength and limitations. The great advantage of logical formatting is that while the actual
formatting may not be the same from browser to browser, the effect is the same. Thus while one browser
may show emphasis of text in italics, another may show it as bold. In any event, each browser will have
emphasized the text in the best way that it can. Examples of logical tags are <EM> and <STRONG>.
With physical tags or physical formatting, the browser is forced to print the text in exactly the way that
the designer intends. If the browser does not support those choices, then the tags are ignored because the
browser has no alternative way to display the text. Examples of physical tags are <I> and <B>.
In this lesson, I am presenting some additional text formatting alternatives to complete what was begun

in earlier lessons. Some of these alternatives are logical elements and some are physical elements.
| top | | bottom |
THE BASEFONT TAG
The BASEFONT tag changes the size of ALL the body text after the BASEFONT tag except for
HEADERS (defined by H1, H2, H3, H4, H5 and H6). Thus the BASEFONT tag is used to suggest a
default font size. Here is the statement that changes the default size to 5:
<BASEFONT SIZE="5">
Note the following discussion points:
1. BASEFONT is one word (no spaces). Most browsers now recognize the BASEFONT tag.
2. The SIZE attribute is an integer value ranging from 1 to 7. The default value is "3" which is the
font size the browser normally displays. Thus SIZE="5" is considered to be 2 sizes (also called
2 levels or 2 steps) larger than the default size of 3. Since the actual size of text varies from
browser to browser, it is impossible to define exactly how big one size is. We only know that
SIZE="5", for example, is 2 sizes larger than the normal default size of 3.
3. Relative font sizes also work with the BASEFONT tag. To indicate a relative base font size, use
the "+" or "-" with the number value. You can denote a relative base font size from +1 to +7 and
from -1 to -7.
For example, while <BASEFONT SIZE="5"> would set the default base font size to "5",
<BASEFONT SIZE="+5">
would set the new default base font size 5 levels larger than the current base font size. A
"relative" size is always given "relative" to the current default size. Thus while <BASEFONT
SIZE="2"> gives a default base font of size "2",
<BASEFONT SIZE="-2">
would give a base font size 2 levels smaller than the default size and
<BASEFONT SIZE="+2">
would give a base font size 2 levels larger than the default size.

4. The BASEFONT tag is not a container element. That is, there is no closing BASEFONT tag.
5. BASEFONT applies to all normal and preformatted tags but not to headers. Be aware then, that
using a BASEFONT tag could make the body text larger than the headers which could confuse
your readers.
6. You cannot use BASEFONT to change the size of individual characters or of a block of text.
There are other tags such as FONT, BIG and SMALL (also described in this lesson) that can be
used for this purpose.
7. Use only one BASEFONT tag in each HTML document as the BASEFONT tag affects all the
succeeding text. Normally the BASEFONT tag is used to change the base font of the entire page
and if this is the case, the BASEFONT tag should then be placed right after the opening BODY
tag. Thus you would have the HEAD, TITLE and BODY tags followed by the BASEFONT tag.
8. Choosing a large base font size may not look good in some browsers. However, you can use the
BASEFONT tag to increase the size of your text in short web pages to give a little more
importance to the whole page. Conversely, you can use a smaller base font in lengthy text
intensive pages to fit more text on a page.
9. In general you should have a good reason to change the base font size of your text. Users may
already have specified in their browser settings how they prefer to view text.
| top | | bottom |
CHANGING THE FONT SIZE OF ONE OR MORE CHARACTERS OF TEXT
U NBEL IEVABLE!
T he FONT tag can be used to change the size of one or more characters of text or of an entire block
of text. Changing the font size of a few characters or of a few words is a good way to make your text
stand out or to create some interesting effects. To change the font size of a few characters or of a block
of text to size "4", the FONT tag is:
<FONT SIZE="4">text text text</FONT>
Discussion:
1. FONT is a container element in that it has an opening FONT tag (<FONT>) and a closing FONT
tag (</FONT>).
2. The SIZE attribute indicates the size that the font is to be changed to. Sizes range in value from 1

to 7. The "T" in "The" in the above paragraph "The Font tag can be used to ..." was printed in a
font size of "7". A value of 3 is the default size (the same as the default size with BASEFONT).
Thus if you do not use a FONT tag, the text size that the browser uses is equivalent to a font size
of 3.
3. The word "unbelievable!" above was written in a "fisheye" pattern (changing the font size of
each letter in an ascending and then descending pattern). The word begins with a font size of 1
for the letter "U", a font size of "2" for the "N", a font size of "3" for the "B" and so on, to a font
size of 7 for the letter "E" and then going down one level at a time ending with a font size of "1"
for the "!". If the word "unbelievable" was printed in all the same size characters, then your
browser does not support the FONT tag for changing the size of characters.
4. Here is a summary of the various font sizes:
This is a font size of 1

5. The SIZE attribute can also take on a relative value. A relative size will change the font size
relative to the current font size. You can, of course, define the current font size with the
BASEFONT tag. In other words, if the BASEFONT tag is used, all relative font changes in the
document after the BASEFONT tag will be relative to that value. As discussed in the last section,
use the + or - with the values to indicate a relative size. Relative sizes range from +1 to +7 and
from -1 to -7. Thus:
<FONT SIZE="+2">text text text</FONT>
will print the text 2 levels or 2 steps larger than the default font.
and
<FONT SIZE="-3">text text text</FONT>
will print the text 3 levels smaller than the default font.
6. Use the FONT tag to change only a few characters or a few words. Use the BASEFONT tag to
change the font size of the entire page.

7. You should avoid making extreme font changes if possible. They can make a document hard to
read.
8. Do not use the FONT tag to take the place of header tags (H1, H2, H3, H4, H5 and H6). One of
the reasons for this is that some search engine indexers rely on the six header elements to
generate an overview of the document, and they will not be able to adequately index your
document if you use FONT instead of the HEADER elements. FONT should only be used as an
enhancement of your presentation. Try to limit your use of the FONT tag to small amounts of
special effects.
9. Although most popular browsers now support the FONT tag for changing the size of text, you
should also continue to use the <STRONG> and <EM> tags to emphasize text. This is because
FONT is a physical tag which means that if a browser does not recognize the FONT tag, the text
will still be emphasized through the <STRONG> and <EM> tags.
10. Finally, any browser which supports the FONT tag will not allow the user to disable it.
| top | | bottom |
BIG AND SMALL TAGS
The BIG and SMALL tags were Netscape extensions, but are now part of HTML 3.2. These tags
change the relative size of a given word or phrase with respect to the surrounding text. BIG and
SMALL are both container elements. That is, all the text that is contained between the opening and
closing tags is affected by the tag. Use the BIG tag to make the text a little bigger and use the
SMALL tag to make the text a little smaller.
The format for making the text a little bigger is:
<BIG>text text text</BIG>
and the format for making the text a little smaller is:
<SMALL>text text text</SMALL>
However, not all browsers display the effect of the BIG and SMALL elements in the same way. In fact,
when combined with the BASEFONT or FONT tags, the results can be unexpected. For example, in
Netscape, text formatted with BIG is always one size larger than the surrounding text, unless the
surrounding text is size 7 in which case BIG has no effect. Text formatted with SMALL is one size
smaller than the surrounding text, unless the surrounding text is size 2 or less, in which case SMALL has
no effect. Internet Explorer on the other hand always shows BIG text at size 4 and SMALL text at size
2. Therefore with Explorer, if you changed the body text size with the BASEFONT or FONT tags, the
result may not be "big" or "small" text. Instead, there may be no change at all or perhaps you could have

just the opposite effect of what you are trying to achieve. Now, as long as the text is normal size (3),
both Netscape and Explorer display BIG and SMALL in the same way.
Keep in mind that because BIG and SMALL are new, support for them is not yet universal with all
browsers. Thus if you want to ensure that the text is one level larger, it may be safer to use the FONT tag
with a SIZE of +1 (<FONT SIZE="+1">) instead of the BIG tag, and use <FONT SIZE="-1"> instead of
the SMALL tag to reduce the size by one level.
Nesting BIG tags as in:
<BIG><BIG>text text text</BIG></BIG>
will produce text in a larger font than with just one BIG tag. Similarly, nesting SMALL tags may
produce text in a smaller font than with just one SMALL tag. Keep in mind that while you are allowed
to nest BIG and SMALL tags, the results are undefined. That is, the results can't be predicted for all
browsers.
| top | | bottom |
CHANGING THE FONT FACE
The FONT tag with the FACE attribute allows you to specify the face of the font. Early versions of
HTML do not allow you to specify a particular font. HTML 3.2, however, does allow you to specify
which fonts you would prefer to have the web page or just a portion of the text displayed in. If the
browser does not support the desired fonts, the text is simply rendered in the default font.
Here is a list of some font faces. If some or all are still written in the normal default browser font, then
your browser does not support changing the font face in those situations.
<FONT FACE="arial">This is arial font</FONT>

<FONT FACE="algerian">This is algerian font</FONT>
<FONT FACE="braggadocio">This is braggadocio font</FONT>
<FONT FACE="courier">This is courier font</FONT>
<FONT FACE="desdemona">This is desdemona font</FONT>
<FONT FACE="garamond">This is garamond font</FONT>
<FONT FACE="modern">This is modern font</FONT>

1. The above list is not meant to be an exhaustive list. Try other fonts to see what you can come up
with. For a list of possible names, just go to your word processor or another program that allows
you to choose from various fonts.
2. You may list as many fonts as you wish in the FONT tag. Just remember to separate each choice
with a comma and a space as in:
<FONT FACE="arial, courier, modern">
Using this method, if the browsers recognizes the first font listed, it will use that one. If it doesn't
recognize the first font listed, it will go to the second font and use it. If it doesn't recognize the
second font, it will move to the third one and so on until it finds one it knows or until the list is
exhausted. In other words, the browser will use the first one available that it recognizes. If it
doesn't recognize any of the listed fonts, the text will simply be displayed in the default mode. If
you use this method, you should then write the font faces in order of preference.
The FONT tag is a versatile tag. It is used to change the text size, font face and also to change the color
of blocks of text. You can combine all these attributes into one FONT tag as in:
<FONT SIZE="4" FACE="arial" COLOR="#FF00FF">text text text</FONT>
| top | | bottom |
BLOCK QUOTES
You can use block quotes to set off a section or block of your text from the surrounding text - such as a
quotation by a famous author. To be more specific, you use the BLOCKQUOTE element if you are
quoting more than a few lines from a document. Block quotes are often printed with indented margins or
simply printed in italics (BLOCKQUOTE is a logical tag). If the margins are indented, then both the left
and right margins are indented. In e-mail, the standard symbol for a block quote is ">".
Here is an example using BLOCKQUOTE to quote from a book. The HTML coding follows the
example.
CAMPING ETIQUETTE - FIRE SAFETY

According to the Canadian Automobile Association in their book "Outdoors Canada" - A Unique and
Practical Guide to Wilderness and Wildlife, this is how you should practice fire safety when camping in
the great outdoors:

Be especially careful with fire and fuel. Put out a campfire by dousing it with water. Stir
the wet ashes until all sparks are extinguished, then cover the ashes with earth.
Don't carry wooden matches loose in a pocket - if you fall or slide on them they could
ignite. Better still, use safety matches. Store fuel containers in the shade and keep them
away from flames. Always extinguish a stove or lantern before disconnecting or refilling
its fuel tank.
Now here is the complete HTML coding for this example:
<H2 ALIGN="CENTER">CAMPING ETIQUETTE - FIRE SAFETY</H2>

According to the Canadian Automobile Association in their book "Outdoors Canada" - A Unique and
Practical Guide to Wilderness and Wildlife, this is how you should practice fire safety when camping in
the great outdoors:
<BLOCKQUOTE>
<P>Be especially careful with fire and fuel. Put out a campfire by dousing it with water. Stir the wet
ashes until all sparks are extinguished, then cover the ashes with earth.
<P>Don't carry wooden matches loose in a pocket - if you fall or slide on them they could ignite. Better
still, use safety matches. Store fuel containers in the shade and keep them away from flames. Always
extinguish a stove or lantern before disconnecting or refilling its fuel tank.
</BLOCKQUOTE>
1. BLOCKQUOTE is one word (no spaces). This tag was also part of HTML 2.0 so most, if not
all, browsers support this tag.
2. Do not use BLOCKQUOTE simply to create indented text. It is not considered good HTML
coding practice and you may not achieve the effect you want in all browsers. It could also
confuse search engine page indexers and summarizers.
3. It is also recommended that text not be placed directly between the opening and closing
BLOCKQUOTE tags. You should begin a block quote with an HTML tag such as I did above
with the <P> tag. However, most browsers will still display a block quote correctly even if you
ignore this rule.
4. Netscape places a blank line at the beginning of the block quote because of the <P> tag but most
versions of Explorer do not place a blank line. With these versions, the block quote gets pushed
up against the preceding line.
5. I used the <P> tag two times in the above example. BLOCKQUOTE can also contain other text
formatting techniques such as <EM> and <STRONG>.
6. If you quote from someone else's work, don't forget to include a credit and/or copyright notice.
| top | | bottom |

SUPERSCRIPT AND SUBSCRIPT
SUPERSCRIPT
Superscripts are letters or numbers that are raised slightly relative to the normal text as in:
The temperature outside is 78oF.
SUP stands for SUPerscript and if your browser supports superscripts you should see the degree symbol
raised slightly. I used the lower case letter "o" for the degree symbol. Here is the HTML coding for the
above line:
The temperature outside is 78<SUP>o</SUP>F.
SUP specifies that the enclosed text should be printed in superscript. That is, SUP is a container
element and so anything contained between the opening and closing tags will be raised or superscripted.
SUBSCRIPT
Subscripts are letters or numbers that are lowered slightly relative to the normal text as in:
The chemical expression for water is H20.
The HTML coding for this statement is:
The chemical expression for water is H<SUB>2</SUB>0.
SUB specifies that the enclosed text should be printed in SUBscript.
SUP and SUB are often used in mathematical formulas. Early versions of Netscape and Explorer are
unable to display superscripts and subscripts although Netscape 2 and higher have always been able to
handle them because they were Netscape extension tags. HTML 3.2 now includes these tags for defining
both kinds of offset text. Since SUP and SUB are new tags there are still many browsers out there that
do not support these tags. You should make sure that the text would still look readable in case these tags
are not recognized by the viewer's browser.
| top | | bottom |

CITE, CODE, SAMP, TT, KBD, VAR and ADDRESS TAGS
All seven of these container elements are ways to format your text - usually in a monospaced font. A
monospaced font has each character taking up the same amount of space on the browser screen (a carry
over from the old "typewriter days"). Thus a lower case "f" would take up as much space as the upper
case "W". "Courier" is a popular example of a monospaced font.
Of all the tags given in the title of this section, TT is the most common and it is also the only physical
tag. The others are all logical tags. If your browser supports some or all of these elements, you will see
them here as follows:
<CITE>This is CITE font</CITE>

<CODE>This is CODE font</CODE>
<SAMP>This is SAMP font</SAMP>
<TT>This is TT font</TT>
<KBD>This is KBD font</KBD>
<VAR>This is VAR font</VAR>
<ADDRESS>
This is ADDRESS font

</ADDRESS>
Some of these fonts give identical results - yet each has its own purpose in HTML coding. You should
therefore use each element only in the context they were designed for.
Now for a discussion of each element:
CITE
CITE is the logical tag for enclosing a citation - such as the title of a book or magazine. CITE normally
prints the citation in italics, the same as <I> does - however, CITE is less widely recognized and less
widely used than the "I" element.
Do not use CITE for anything but titles of cited works. For example, in a web page, the person could be
discussing HTML and wants to cite a reference. He/she could cite for example:
In the book, HTML CODING, 1997 the writer states that blah, blah, blah ...
In the book, <CITE>HTML CODING, 1997</CITE> the writer states that blah, blah, blah ...

If you do use CITE for other things, it can confuse others studying your coding and it will also confuse
search engine indexers that automatically extract information from your documents. Use <EM> to
emphasize in italics and use <I> for text which must appear in italics. In HTML 3.2, there is no tag to
mark up short cited phrases. For longer cited phrases, you can use the BLOCKQUOTE element.
CODE
CODE is used to enclose a sample of computer code and also to emphasize pieces of code inside a
block of text such as:
In the computer program, the line FOR I=1 to 10 sets up the counter.
In the computer program, the line <CODE>FOR I=1 to 10</CODE> sets up the counter.
CODE usually gives a monospaced font. If you need to deal with larger blocks of code (several lines of
code), it is recommended that you use the PRE element (discussed later in this lesson).
SAMP
SAMP is used to indicate a sample of text which should be used literally. For example,:
The error message General Protection Fault is well known to Windows users.
Here is the HTML coding for this statement:
The error message <SAMP>General Protection Fault</SAMP> is well known to Windows users.
SAMP will usually be rendered in a monospaced font. Now if you must have a monospaced font, do
not use SAMP. Instead use TT.
TT
TT stands for TeleType font (also known as Typewriter Text). It is the only font in this group that is
considered physical formatting. It is also the monospaced marker that is used most often. It is used to
simulate typewriter output. Since TT is a physical element, if a browser does not recognize the tag, it
will be ignored. For this reason, it may be better to use CODE or SAMP as these are logical tags that
allow the browser to pick the best possible rendering in each case.

KBD
The KBD element is used to indicate text which should be entered by the user. In other words, use KBD
in your discussions when you want to indicate that input from the viewer is required. It is usually printed
in a monospaced font although some browsers may choose to print it in some other manner such as in
bold face. If you want to ensure a monospaced font, use the TT tag instead. Here is an example:
Remember that when asked for a standard installation, type yes at the input prompt.
Here is the HTML coding for this line:
Remember that when asked for a standard installation, type <KBD>yes</KBD> at the input prompt.
VAR
VAR is used to mark up variables. The variables could be marked up in a monospaced font or it could
be marked up in some other way such as italics. If you were discussing a computer program for
example, you would use VAR to refer to the variables used in the program such as the statement:
In the BASIC program, the variable c is used for the loop counter.
Here is the HTML coding for this line:
In the BASIC program, the variable <VAR>c</VAR> is used for the loop counter.
ADDRESS
The ADDRESS element should be used if you want to enclose contact information - such as addresses
and phone numbers. It is also used to enclose the signature file of the author of the web page. In most
browsers the text will be rendered in italics, possibly with a slightly indented margin. If the text is not
printed in italics, it will be rendered in a monospaced font. Here is an example:
John Gilson
6 Pioneer Place
Brantford
The HTML coding for the above is:
<ADDRESS>John Gilson<BR>
6 Pioneer Place<BR>
Brantford</ADDRESS>

You may have noticed at the beginning of this section when all seven elements were compared, that only
the opening and closing ADDRESS tags force line breaks. In other words, the HTML coding:
My street address is <ADDRESS>1327 Orrington</ADDRESS> and my city is <ADDRESS>Chicago.

</ADDRESS>
produces:
My street address is
1327 Orrington
and my city is
Chicago.
Some closing general remarks for this section
1. Monospaced tags will not have any effect in browsers that display all their text in monospaced
fonts (such as Lynx).
2. To format several lines of monospaced text - especially if you require extra spaces - use the PRE
element.
3. Internet Explorer reduces the size of monospaced text by one level with respect to the body text.
Netscape displays monospaced text in the font and size chosen for "Fixed Font" in the "Fonts"
tab of the "General Preferences" dialogue box.
| top | | bottom |
UNDERLINING TEXT
The container element for underlining text is <U> as in:
<U>text to be underlined</U>
Unless it is very important to emphasize text by underlining, you are encouraged to avoid this tag.
Browsers use underlining to indicate hyperlinks and many viewers could be confused if they see "links"
that do not work - especially viewers with black and white or grayscale monitor screens. In fact, many
graphical browsers do not support underlined text since underlined text makes it harder to distinguish the
text from links. Also, Lynx displays text within the EM and STRONG tags with an underline and so
viewers can be confused by further underlining.

| top | | bottom |
PREFORMATTING TEXT WITH <PRE>
When you are working on an HTML document in a text editor such as NOTEPAD, you know that you
can place as many spaces between words as you like (with the SPACE BAR) or place as many blank
lines as you like (with the ENTER key). One reason for doing this is to enable you to section off
portions of text so that they will be easier to spot later. No matter how many spaces you have between
words, you will only see one space between adjacent words when the HTML document is loaded into
the browser. In other words, any additional blank spaces and blank lines are ignored. In HTML talk, this
is called "collapsing spaces". Thus when an HTML document is loaded into the browser, the browser
decides where to divide each line of text - depending mostly on window size - and collapses all extra
spaces and blank lines. There are of course ways to force extra spaces such as with the ampersand
command ( ) and blank lines can be inserted with the <P> and <BR> tags.
The PRE element allows you to keep the original line breaks and spacing that you have inserted into
the text in your HTML document. In other words, spaces are not collapsed. This is called
preformatted text. Preformatted text is ideal for homemade tables and art. Text inside the PRE tag will
be displayed in a monospaced font with some browsers (such as Explorer browsers) displaying the text
one level smaller. When building an HTML document in a text editor other than NOTEPAD, be sure to
use a monospaced font (such as Courier) so that you can see exactly what the table or art will look like
in the browser. NOTEPAD automatically prints text in a monospaced font.
Here is an example of a table done entirely with the <PRE> tag. This table compares two sets of units to
measure capacity and their conversion factors in the English system of measurement:
CAPACITY
Liquid Measure Dry Measure
16 fluid ounces = 1 pint 2 pints = 1 quart
2 pints = 1 quart 8 quarts = 1 peck
4 quarts = 1 gallon 4 pecks = 1 bushel
Here is the HTML coding for this table:
<PRE>
<STRONG>CAPACITY
Liquid Measure Dry Measure</STRONG>
16 fluid ounces = 1 pint 2 pints = 1 quart
2 pints = 1 quart 8 quarts = 1 peck
4 quarts = 1 gallon 4 pecks = 1 bushel

</PRE>
Here is a WORD SEARCH puzzle that was also done using the <PRE> tag. To see the HTML coding
for this one, just choose SOURCE or DOCUMENT SOURCE from the VIEW menu. This puzzle comes
from a magazine called "BIRDS & BLOOMS - a subscription magazine all about birds, flowers and for
those who love the great outdoors. The author of this puzzle is Janet Flower of Oregon.
Directions: All 30 of the flower words listed below are found in the puzzle. They appear across, up,
down, backward and even diagonally. Find the words and circle them. All the remaining letters will spell
the mystery word. The mystery word is given at the end of this lesson.
AMARYLLIS GLOXINIA MARIGOLD

AZALEA GRAPE HYACINTH MUM
BLUE GENTIAN HYACINTH PEONY
CROCUS JOHNNY JUMP UP PETUNIA
DAFFODIL JONQUIL ROSE
DAHLIA LARKSPUR SEGO
DAISY LAVENDER SNAPDRAGON
DAPHNE LILY TULIP
DELPHINIUM LILY OF THE VALLEY VIOLET
GENTIAN LUPINE ZINNIA
L I L Y O F T H E V A L L E Y
Y N O E P N O G A R D P A N S
B L U E G E N T I A N E S A V
P A M A R Y L L I S D A I S Y
U R U P S K R A L R S E G O M
P L I D O F F A D E M U M D U
M J A N D C A L D D A P T L I
U O I A A R Z U A N I I E O N
J N N I H O A P P E N L L G I
Y Q U T L C L I H V N U O I H
N U T N I U E N N A I T I R P
N I E E A S A E E L Z Y V A L
H L P G A I N I X O L G L M E
O R O S E H T N I C A Y H I D
J H T N I C A Y H E P A R G L
Discussion:
1. PRE is a container element and so everything between the opening (<PRE>) and closing (</
PRE>) tags will be part of the formatting. PRE is used to include sections of text in which

formatting is critical. Text contained within the PRE element will only be wrapped at the line
breaks in the HTML document and spaces will not be collapsed. A line break in the HTML
document occurs when you hit the ENTER key.
2. As you can see from the above two examples, if you must use the table format but don't want to
use TABLE tags, you can use preformatted text to line up the information in table like columns.
Because PRE uses a monospaced font, the table may not look quite as nice as it would with
TABLE tags.
3. Tables made with preformatted text will be readable by all browsers - not just the ones that
currently support official tables.
4. You can use tabs to indent text. However, it is better to create multiple spaces using the SPACE
BAR since those spaces will always be the right number.
5. You may have noticed in the CAPACITY conversion table that the headings were strongly
emphasized. Text-level markup is allowed inside the PRE element. However, not all tags are
supported. If you need to mark up your text, you should do it after you set up all your text in the
HTML document since mark up tags take up space in your HTML document but not on the page
in the browser.
6. Because preformatted text is displayed in a monospaced font to retain the formatting, you cannot
include tags that change the font of the text inside the PRE element. Images are also excluded
because they can cause problems with alignment. An image can't be translated to a certain
number of characters.
7. The <P> tag is not allowed inside the PRE element. If a browser encounters this tag, it will either
ignore it or insert two blank lines. Using the <BR> tag will force one blank line. Keep in mind
that with the PRE element, you don't need these tags as the ENTER key forces the lines breaks
for you.
8. There is an optional WIDTH attribute that can be used to indicate how wide the text area is to be
(for example: PRE WIDTH="50"). This would allow the browser to pick a font which fits the
entire text in the window. However, you should keep in mind that the WIDTH attribute is not
widely supported yet.
| top | | bottom |
BLINKING TEXT
Another way to make your important text stand out is to make it blink continually. If your browser
supports the blink element, you should see the title of this section, "BLINKING TEXT", blink. You can
also make links blink. Here is the HTML code to make text blink:
<BLINK>text text text</BLINK>
Discussion:

1. The BLINK element is a Netscape extension tag and is not listed as an HTML 3.2 element. Thus
BLINK is not supported by all browsers - especially by Explorer browsers.
2. The BLINK element causes the text between the opening and closing tags to have a blinking
affect. Depending on your browser, if it supports the BLINK tag, it will either make the text
disappear and appear at regular intervals or a large white block continually appears and
disappears behind the text.
3. You cannot blink text in the TITLE of your HTML document.
4. Images can be included in the BLINKING container element but they will not blink. Only text
can blink.
5. Blinking text blinks in a slightly lighter shade of its normal set color.
6. Be aware that blinking text can be annoying to a visitor. With animated images, when the web
page is loaded, the visitor can always click on the STOP button to stop the animation. Clicking
on the STOP button will not stop text from blinking. Also, blinking words will continually draw
attention to that one spot and, in some cases, can make it difficult to absorb the contents of the
page. You will, however, find a good number of pages on the WWW that includes this blinking
feature. Since blinking words will be irritating to some visitors, if you still want to use it, use it
sparingly (no more than a few words on a page).
| top | | bottom |
ADDING A COMMENT
Adding a comment is not a mark-up tag but I thought I would include it here in this lesson. Adding
comments to your HTML document is a diagnostic tool that can be used to remind you (and future web
designers/editors) what you are trying to achieve. Comments do not appear on the web page. In other
words, comments are invisible to the viewer.
Here is the HTML coding to specify a comment.

1. A comment begins with "".

2. Comments are used for describing things such as why a particular tag is being used and what
effect was hoped to achieve. Comments are also a great way to add reminders to your text -
reminders such as when to include, remove or update certain sections. Comments are also used to
indicate the beginning and ending of a piece of code such as:



.
.
.

Remember that while comments are invisible in the browser, they do appear when viewed in a
text editor or when a viewer chooses SOURCE or DOCUMENT SOURCE from the VIEW menu
in the browser.
3. If you want to state that your HTML document complies with HTML 3.2 standards then the
following simplified comment line must be the very first line in your HTML document - before
the HEAD tag:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
The WWW Consortium has released a draft version of HTML 4.0 and if your HTML document
complies with this draft, the DOCTYPE line must be:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Draft//EN">
ANSWER TO WORD SEARCH
The mystery word is VASE.

| Send me to Lesson Eighteen |


INDEX OF HTML TAGS - html tutorials in web page design by J. Gilson
LESSON EIGHTEEN - INDEX OF HTML 2.0 AND HTML 3.2 TAGS

| Introduction | | Alphabetical index of HTML 2.0 tags |

| Alphabetical index of HTML 3.2 (Wilbur) tags | | Grouping the tags |
| Tags in HTML 3.2 that are not part of HTML 2.0 |
| Alphabetical index of HTML 3.2 tags including the attributes | | The FRAME tag |
INTRODUCTION
The World Wide Web Consortium, known as W3C, was founded in 1994 to develop common
protocols for the evolution of the World Wide Web. The W3C is an international industry consortium
made up of Key Industry Players, Content Specialists and Experts and is jointly hosted by the
Massachusetts Institute of Technology Laboratory for Computer Science (MIT/LCS) in the United
States; the Institut National de Recherche en Informatique et en Automatique (INRIA) in Europe; and
the Keio University Shonan Fujisawa Campus in Asia. Membership is open to any organization that
signs a membership agreement (W3C cannot take individual memberships).
It is this Consortium that finds the common specifications for the World Wide Web for organizations to
build on. In other words, it is the Consortium's HTML working group that comes out with all these
different versions of HTML.
HTML is a language under construction. There are really three main driving forces that determine what
the next version of HTML will look like: (1) the World Wide Web Consortium, (2) Netscape
Communications and (3) Microsoft (owner of Internet Explorer). Now both Netscape and Microsoft
have agreed to abide by the decisions of the W3C of which they are members. However, these two
companies are in a battle to determine whose browser will be most used by the internet public. As a
result each company has produced a number of extension tags in the hopes of tipping the balance in their
favor. In this lesson, I am only indexing tags sanctioned by the W3C. However, at the end of the lesson
(the last choice in the menu at the top of this page), I give the tags and attributes associated with frames
even though they are not part of HTML 2.0 or HTML 3.2, because both Netscape and Explorer support
them.
If you start using a lot of tags and attributes that are only supported by a specific browser (such as
Netscape), you should consider warning viewers that the page is best viewed with that particular
browser.

This lesson begins with a listing of all the tags as defined in HTML version 2.0 specifications (HTML
2.0). Until January 1997, the "official" version of HTML was HTML 2.0. It has, and still is, serving its
purpose very well.
The current recommendation by the W3C HTML working group is HTML 3.2 also known as
"Wilbur". It became a recommendation in January, 1997.
HTML 4.0, also known as "Cougar", is W3C's next version of HTML. This version was formally
announced by the HTML working group in April, 1997. This is a work in progress and is expected to
become a proposed recommendation after a period of public review.
| top | | bottom |
ALPHABETICAL INDEX OF HTML 2.0 TAGS
Here is a simple alphabetical listing of HTML 2.0 tags.
 - To insert an invisible comment

<A> - To create a link or anchor
<ADDRESS> - To indicate address information
<B> - To display text in boldface
<BASE> - To specify the URL of the document used to generate any relative URLs
<BLOCKQUOTE> - To indicate that a block of text is a quotation
<BODY> - To enclosed the main section of a web page
<BR> - To create a line break
<CITE> - To indicate that the text is a short citation
<CODE> - To indicate text is a computer code
<DD> - To indicate a definition description in a definition list
<DIR> - To create a directory list

<DL> - To create a definition list

<DT> - To indicate a term to be defined in the definition list
<EM> - To emphasize text, usually in italics
<FORM> - To create an input form
<H1> - To create a level 1 header
<HEAD> - To create the head section of the web page
<HR> - To create a horizontal line (horizontal rule)
<HTML> - To identify the document as an HTML document
<I> - To display text in italics
<IMG> - To place an image on the web page
<INPUT> - To create a form element such as an input field, button, etc.
<ISINDEX> - To create a primitive search
<KBD> - To indicate text from a keyboard
<LI> - To create a list item
<LINK> - To define relationships between documents and to link to an external style sheet
<MENU> - To create a menu item list
<META> - To create an automatic page jump plus also used for document information
<OL> - To create an ordered list
<OPTION> - To create individual options in a form menu
<P> - To create a new paragraph
<PRE> - To create preformatted text
<SAMP> - To display sample text that should be used literally
<SELECT> - To create a menu in a form
<STRONG> - To strongly emphasize text, usually in boldface
<TEXTAREA> - To create a block area for text input in a form
<TITLE> - To create the document title
<TT> - To display text in a monospaced teletype font
<UL> - To create an unordered list
<VAR> - To indicate that the text is a variable
| top | | bottom |

ALPHABETICAL INDEX OF HTML 3.2 (WILBUR) TAGS
Here first is a simple alphabetical listing of the HTML 3.2 tags. Note that the HTML 3.2 tags include
all the HTML 2.0 tags.
) so they will remain hidden. This will also
ensure "backward compatibility" with older browsers.
There are two attributes that can be used with the SCRIPT element. They are LANGUAGE and SRC as
in:
<SCRIPT LANGUAGE="name of language" SRC="location of file containing script">
where the "name of language" specifies a language such as "JavaScript" or "VBScript" and where the
value of the SRC attribute specifies the location of the file containing the script. The SRC attribute can
be used if you don't want the code to be in the same HTML document.
There is also a NOSCRIPT element. It is used to enclose anything you want displayed by browsers that
do not support inline scripts. The opening (<NOSCRIPT>) and closing (</NOSCRIPT>) NOSCRIPT

tags are placed between the opening and closing SCRIPT tags.
<STRIKE>
The STRIKE element tells the browser to display the enclosed text in a strike-through appearance.
Usually this is done with a line through the middle of the text. Strike-through text is normally used to
show revisions to text. Since this tag is new, support for it is not universal. If you absolutely require
strike-through text, you would be better to do it as an image.
<STRIKE>This text will be striked if your browser supports the strike tag.</STRIKE>
Both Netscape and Internet Explorer accept the short form "S" in place of "STRIKE". That is, you can
use <S> and </S> instead of <STRIKE> and </STRIKE>.
<STYLE>
The STYLE tag is used in style sheets. Style sheets are a new way to customize web pages in ways that
were not possible before. With style sheets, you are able to specify fonts, colors, margins and many
other features to gain precise control over your presentation. Style sheets make it easy to give all of your
web pages a common look. My Lessons 30, 31 and 32 are devoted to designing web pages using style
sheets.
| top | | bottom |
PRINTING THIS LESSON
This lesson contains a lot of tags and so every once in awhile I get an email from someone who is
experiencing problems printing this lesson. There is nothing wrong with the lesson itself. It just that
some printers won't print the lesson, while other printers do print the lesson. One of the tags in this
lesson is causing the problem. It seems that the printer is trying to execute the tag which is causing the
error. The tag that is causing the problem can vary depending on the printer. If your printer refuses to
print the lesson, I would suggest you try the following method - Copy the lesson into your word
processor and print it from your word processor. That is,:
1. From the Edit menu in your browser, choose Select All to highlight this entire lesson.

2. Then from the Edit menu, choose Copy.
3. Load your word processor such as Microsoft Word and from the Edit menu, choose Paste (or
click on the Paste button).
4. Print the lesson from your word processor.
Note: The links may not print but that should be okay. If you want to try a link, you can always go back
to this actual lesson.
| Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Twenty |


IMAGE MAPS - html tutorials in web page design by J. Gilson
LESSON TWENTY - IMAGE MAPS

| Introduction to Image Maps | | Comparison of the three types of Image Maps |

| Creating our first Client Side Image Map | | Creating our second Image Map |
| Download Paint Shop Pro and Mapedit | | Using Mapedit to create an Image Map |
| Using Paint Shop Pro to create an Image Map | | Overlapping Hot Spots - Summary |
INTRODUCTION TO IMAGE MAPS
What is an image map?
An image map is an active clickable image that loads different web pages depending on what part of the
image is clicked. In an image map, the image is divided into regions or areas with each region or area
linked to a different URL. Thus an image map links the various areas of an image with a series of
URLs. These regions or areas are also called hotspots. Thus an image map is an image on a web page
that contains hotspots.
For example, here is a simple menu I created in Paint Shop Pro. This is one image that has been divided
into four areas with each area linking to a different page on my website.
As you move the mouse pointer over any of the four areas, notice the URL on the status line at the
bottom of the browser window and notice that as you go into another region, the URL changes to the
URL of the new region. Now take a moment and click in the various areas to see the different web pages
load. When you visit a link, click on the BACK button to return to this page.
ADVANTAGES OF USING IMAGE MAPS
1. Image maps provide an alternative to loading a page containing several linked images.
2. The image map allows you to use a single image to provide links to a number of different URLs.
This is especially useful if you have a website with a lot of images and you do not want to slow
down the loading of pages over slow connections.
3. Image maps can provide an aesthetically pleasing alternative to cluttered pages.

There are three types of image maps:
1. Client Side image maps

2. Server Side image maps
3. A combination of Client Side and Server Side image maps.
| top | | bottom |
COMPARISON OF THE THREE TYPES OF IMAGE MAPS
Until Netscape 2.02, Internet Explorer 2.0 and equivalent browsers came along, the only way to use
image maps was the "Server Side" method. A Server Side image map means that the server from your
Internet Service Provider (ISP) does the work in determining where on the image the visitor clicked and
what page to load. A "Client Side" image map means that your visitor's browser (that is, your client's
browser) determines where on the image the visitor clicked and what page to load. You can think of a
visitor to your website as being the "client".
SERVER SIDE IMAGE MAPS
Server Side image maps work in all browsers. There are four basic steps associated with Server Side
image maps. They are:
1. The visitor clicks on the image.

2. The coordinates of the clicked point are sent to a program running on your internet web server to
be processed. The web server is your host server, that is, the internet company's server that is
hosting your website.
3. The coordinates are then matched against a file containing a list of coordinates and URLs (called
a map file).
4. The URL associated with the coordinates that were clicked on is sent back to the visitor's browser
and the browser then loads the page associated with that URL.
Disadvantages of Server Side image maps:
1. The steps given above involves special interaction with your web server and this alone can slow
things down - and for many people, time is precious. Your web server needs to be contacted and
nothing can happen until there is a reply. The actual time it takes for the web server to associate
the coordinates with a link is trivial. Most of the time is wasted connecting to the web server and
starting the image map program.
2. Step 2 above involves running a CGI script or other software on the web server. Thus with Server

Side image maps, more system resources on your web server are being used.
3. When you move your mouse pointer over the image in a Server Side image map, all you see on
the status line at the bottom of the browser window are coordinates flying by along with the name
of the image map file. The status line does not tell you what page you would be loading. Thus
you are essentially clicking blindly. You would have to make it especially clear from the image
which page your browser would load for any particular region in the image.
Advantage of Server Side image maps:

ALL browsers support them.
CLIENT SIDE IMAGE MAPS
Client Side image maps work independently of your web server. That is, Client Side image maps are
interpreted by the visitor's browser and not by your web server. With Client Side image maps, you place
all the necessary data to run the map in your HTML document. Thus when a visitor (a client) clicks on
the image, the browser processes the coordinates of the clicked point without any interaction with your
web server.
Disadvantages of Client Side image maps:
Any browser older than Netscape Navigator 2.02 or Internet Explorer 2.0 or equivalent browsers do not
support image maps. However, today most everyone is using a later version browser so this is really no
longer a disadvantage.
Advantages of Client Side image maps:
1. No interaction with your web server is required to determine what URL to use. The visitor's
browser does all the work. No contact needs to be made with your ISP, no permissions to use
image maps are needed and no special software or system resources from your ISP are needed.
2. The major advantage is that Client Side image maps are much faster. This is especially true if
your web server is busy.
3. With Client Side image maps, the status bar at the bottom of the browser screen tells you the
URL of the web page you would be loading. As you move your mouse pointer over the various
regions of the image, the URL's are displayed on the status bar at the bottom of the browser
screen.
COMBINATION OF SERVER SIDE AND CLIENT SIDE IMAGE MAPS
This type of image map works in the following way: If the visitor's browser supports image maps, then
the visitor's browser does all the work. If the visitor's browser does not support image maps, then the
web server kicks in and does the necessary work. In other words, this type of "backward compatible"
image map functions as a Client Side image map when visited by a browser that recognizes image maps

and functions as a Server Side image map when visited by a browser that does not recognize image
maps.
Thus if you want total compatibility taking advantage of the time and system savings when browsers
recognize image maps, then this third combination choice is ideal.
Anytime you want to involve the web server in a special way, you need to ask your ISP for permission.
So you would check with them to see if they handle Server Side image maps and if so, how they are
handled. Again, all browsers in use today support client side image maps and so this section is also
redundant.
I feel that you should NEVER use Server Side image maps. ALWAYS use CLIENT SIDE image
maps because they are the ones that the browser can control without having to interact with your web
server or use your web server's resources.
Some people also include alternative text links. That is, the links in the image map are also repeated
somewhere on the web page as text links as in:
| <A HREF="index.htm">Home Page</A> | <A HREF="intro.htm">Introduction</A> |
You may wish to include text links for browsers that do not display images. These include non-graphical
browsers such as Lynx as well as browsers who have had their images turned off.
| top | | bottom |
CREATING OUR FIRST CLIENT SIDE IMAGE MAP
We will now study our first Client Side image map and we will do it with the above image. Here again is
the image.
Here are the statements that give this image map.
First we have the image tag which is:
<P ALIGN="center"><IMG SRC="map1.gif" WIDTH="400" HEIGHT="25" BORDER="0"

USEMAP="#menuline" ALT="Image Map"></P>
Discussion:
1. The first part of this statement (<P ALIGN="center">) centers the image using a paragraph tag.
Note the </P> at the end of the statement to indicate that the paragraph ends and the centering is
turned off.
2. The name of the image is map1.gif. Because of the absence of a path to the image, it is assumed
that the image is located in the same folder as the HTML document.
3. The width of the image is 400 pixels and the height is 25 pixels.
4. There is no border around the image (BORDER="0"). This was just a personal choice. You may
wish to include a border around the image.
5. The attribute USEMAP tells the browser that this is a Client Side image map defined under the
name menuline. Thus USEMAP="#menuline" tells the browser to USE the MAP file named
menuline located somewhere in this HTML document. The # indicates an internal link on the
same page - much like that of a page jump (Lesson Six). The USEMAP attribute tells the
browser which image map file to use for the image. This example uses the image map file named
menuline. We must associate a name with the map file and the name you choose is up to you.
The map file contains all the necessary data to run the image map. You can have any number of
image maps in the same HTML document as each image map will have its own unique name.
Note that the name is case sensitive. Thus USEMAP="#menuline" is different from
USEMAP="#Menuline".
You can think of an image map having basically two parts - (1) the image itself and (2) an invisible
map placed over the image. This invisible map breaks the image down into areas (also called regions
or hotspots) and assigns a link to each area. These areas are defined by coordinates. Thus when the
visitor clicks on the image, USEMAP="#menuline" tells the browser to go to the map file named
menuline to determine the required links and hotspots.
Here are the lines for the map file named menuline with a discussion to follow:
<BODY>
<MAP NAME="menuline">
<AREA SHAPE="rect" COORDS="0,0,100,24" HREF="index.htm">
<AREA SHAPE="rect" COORDS="101,0,200,24" HREF="intro.htm">
<AREA SHAPE="rect" COORDS="201,0,300,24" HREF="lesson21.htm">
<AREA SHAPE="rect" COORDS="301,0,400,24" HREF="topics.htm">
</MAP>
1. I placed the MAP element right after the opening BODY tag but it can be placed anywhere in
the BODY of the HTML document. The map file and the image itself are two separate and
distinct objects which combine to produce an effect.

2. Having the image map data for a Client Side image map in a completely separate HTML file is
not supported by Netscape and possibly by other browsers as well. Therefore you should place
the map file in the same HTML document as the image tag that references the map.
3. The MAP element provides ALL the image map data. All the information on the hotspots in the
image is found here. Note that MAP is a container element in that everything between the
opening and closing MAP tags is part of the map file.
4. The MAP element has one attribute which is the NAME attribute. In our example, the value of
the NAME attribute is menuline (NAME="menuline") which matches the name in the IMG tag.
Note that the # symbol is not required here.
5. Note that this map file contains a number of AREA tags which are located between the opening
and closing MAP tags. Recall that our image has four regions or areas and that is why there are
four AREA tags. In other words, each hot zone is defined with an AREA tag.
6. The HREF attribute specifies the URL that the hotspot points to. Thus if the visitor clicks in the
first hotspot, the browser will load my home page which is called index.htm. You can of course
link to a web page located anywhere on the World Wide Web. Just make sure to include the
complete URL of the web page you are linking to.
7. The AREA tag is also used to define the SHAPE of the region or hotspot. Note that the SHAPE
of each region or hotspot is that of a RECTANGLE. SHAPE="rect" could also be written as
SHAPE="rectangle".
8. The COORDS attribute defines the coordinates of the shape. As we will learn in the next
section, the shape can also be a circle or a polygon.
The above coordinates in our map file can be broken down as follows:
Note that for <AREA SHAPE="rect" COORDS="0,0,100,24" HREF="index.htm">, the

"0,0,100,24" breaks down into two pairs of coordinates - namely 0,0 and 100,24. The first pair of
coordinates represents the top left corner of the rectangular region and the second pair represents
the bottom right corner of the rectangle. That's all it takes to define a rectangular region - two
pairs of coordinates.
With any pair of coordinates, such as with 100,24, the first number (100) represent the
horizontal distance in pixels from the left side of the image and the second number (24)
represents the vertical distance in pixels from the top of the image.
Note that ALL the numbers in the COORDS attribute are separated with commas (,). I have also
seen pairs of coordinates separated with a space as in:

COORDS="0,0 100,24"
However, the World Wide Web Consortium (the W3C) recommends using commas for
separators.
If you think back to the Mathematics classroom, points on a graph are often written in the form (x,y)
where x represents the horizontal distance from the center (or origin) and y represents the vertical
distance from the center. Thus a rectangular hotspot is defined as COORDS="x1,y1,x2,y2" where x1,
y1 is the top left corner point of the rectangle and x2,y2 is the bottom right corner point of the
rectangle. Thus you can translate the COORDS attribute for the second region or hotspot as "The
rectangle goes from x=101, y=0 to x=200, y=24". Thus what the MAP element does is lay a point
graph (a map) over the image. The map is simply a grid of points. The image is there for the visual. It is
only there for the user to see and use as a guide. It is the map that is laying on top of the image that is
used by the browser - thus the name IMAGE MAP.
Now where do these coordinates come from? I got them from Paint Shop Pro but you can get them from
any paint program. For example, if you have a paint program, save the above original "menuline" image,
and then load the image into your paint program. With Paint Shop Pro, when you move the mouse
pointer over the image you can see the coordinates changing on the status bar at the bottom of the
screen. Note that the top left corner is 0,0 and that the bottom right corner of the first hotspot is around
100,24. I simply recorded these numbers and entered them in the AREA tag. Note that coordinates for
any hotspot is based on the fact that the top left corner of any image is defined to be 0,0.
If you do not have a paint program, you can download your own copy of Paint Shop Pro, by choosing
"Download Paint Shop Pro and Mapedit" from the links at the very top of this page.
There are also image map making software that will do all the work for you in creating an image map
and we will get into that later in this lesson.
The rectangle is not the only shape involved in image maps. The following section deals with all the
possible shapes for an image map.
Problem 1: If the URL for CNN is www.cnn.com/ and if the hotspot is a rectangle defined by 25,70
and 115,135 what would be the AREA tag?
| top | | bottom |
CREATING OUR SECOND IMAGE MAP

Here is our second image map. Note that it has four regions or hotspots: The triangle (which is classified
as a polygon), the circle, the rectangle and the yellow area around these three shapes.
Here first is the IMG tag:
<IMG SRC="map3.gif" WIDTH="200" HEIGHT="150" BORDER="0" USEMAP="#shapes"

ALT="Image Map">
Problem 2: What is the name of the image?
Problem 3: What did I name the image map?
Here is the image map file for the above map3.gif image:
<MAP NAME="shapes">
<AREA SHAPE="poly" COORDS="16,13,35,62,72,27,16,13" HREF="index.htm">
<AREA SHAPE="circle" COORDS="67,97,34" HREF="intro.htm">
</MAP>
Here is another look at the image map with the coordinates marked on the image:

As stated above, this image map contains different shaped areas or hotspots. Here is a summary of the
various shapes allowed in an image map.
1. rect - rectangle. We have already studied this one so here is a brief summary. Two pairs of
coordinates are needed to specify a rectangle (in our red rectangle they are 129,28 and 175,108).
The first pair of coordinates specifies the top left corner of the rectangle and the second pair
specifies the bottom right corner of the rectangle. I got these coordinates by loading the image
into Paint Shop Pro and then recording the mouse pointer positions in the top left and bottom
right corners of the rectangle.
2. circle - A circle is defined by its center and its distance from the center to any point on the
circumference of the circle (called the radius of the circle). Thus in our example 67,97,34 means
that the center of the circle is located at 67,97 and the radius is 34 pixels. Again I got these
numbers in Paint Shop Pro by doing my best to pinpoint the center of the circle with the mouse
pointer and recording the numbers from the status bar at the bottom of the screen. To find the
radius, I first recorded the coordinates of a point on the circle (33,97) that was on the same
horizontal line as the center, as shown in the above image. I then subtracted the horizontal
distances (the x's) to find the radius (r=67-33=34).
3. poly - polygon. A polygon is a figure that can have any number of sides. The one in the above
image has three sides and is called a triangle. I could have drawn a four sided figure (a
quadrilateral) or a five sided figure (a pentagon), etc. The important thing to know is that a
polygon is built up by a list of adjacent vertices - that is, by a list of coordinates connected in
order. They are all connected in order with the last pair of coordinates in the list equaling the first
pair of coordinates. This way there are no openings in the polygon. This is much like a game of
connecting the dots where all the dots are connected in order and last dot is connected to the first
dot. In our example, the coordinates that make up the triangle are 16,13,35,62,72,27,16,13. Note
that my first point 16,13 in the triangle is connected to the second point 35,62 which is connected
to the third point 72,27 which is connected to the first point 16,13. The first and last points must
be the same. In general, the coordinates of a polygon have the form x1,y1,x2,y2,x3,y3, ... ,xn,yn,
x1,y1 where xn,yn is the last point in the polygon which is then connected back to the first point.
4. You can use the full words rectangle, circle and polygon for the SHAPE attribute or you can use
their abbreviations rect, circ and poly.
THE DEFAULT AREA OF AN IMAGE

Our "shapes" image has four hotspots: the triangle, the rectangle, the circle and the default area around
these shapes. Our default area loads my web page that gives a list of all topics studied in these lessons
(topics.htm). In our example, the default area is defined by:
Discussion:
The default area should only be used once in a map file and is the last AREA tag listed. It is used to
indicate what should happen if the user selects a region which is not defined in any of the other AREA
tags.
Hotspots are checked in the order they appear in the map file and the URL corresponding to the first
match is returned. Thus if two or more hotspots overlap, the hotspot defined first in the map file takes
precedence over subsequent hotspots. Here is how it all works with our example. In our MAP file, the
first AREA tag listed is:
<AREA SHAPE="poly" COORDS="16,13,35,62,72,27,16,13" HREF="index.htm">
This AREA tags represent the polygon area of the image (which is our triangle). When a visitor clicks
on the image, the browser will first check to see if the coordinates of the clicked point fall within the
area defined by this polygon. If the answer is "yes", that is, the visitor clicked in the triangle, then my
Home Page will load. If the answer is "no", that is, the visitor did not click in the triangle, the browser
will then check the next AREA tag listed which is:
<AREA SHAPE="circle" COORDS="67,97,34" HREF="intro.htm">
The browser now checks to see if the coordinates of the clicked point matches the area defined by our
circle. If the answer is "yes", my introduction page is loaded. If the answer is "no", the browser then
checks the next AREA tag which is the red rectangle defined by:
Again if the answer is "yes", my JavaScript lesson will load. If the answer is "no", then the next AREA
tag is checked which is:
This AREA tag represents the rest of the image since the triangle, circle and rectangle were already
checked. The coordinates from 0,0 to 200,150 represents the full size of the image which covers all the
default areas. Any paint program will give the size of the image which is then also used for the WIDTH

and HEIGHT attributes in the IMG tag (<IMG SRC="map3.gif" WIDTH="200" HEIGHT="150"
BORDER="0" USEMAP="#shapes" ALT="Image Map">).
Remember that the default area must be the last AREA tag in the list of AREA tags as the other hotspots
need to take precedence over it. This means in our example, that if the coordinates do not fall within the
first three AREA tags, it must lie in the default area of the image.
Note: Instead of the above AREA tag for the default area, many image map software (including Mapedit
and Paint Shop Pro which we will use later in this lesson) will give the following for the default area:
<AREA SHAPE="default" HREF="topics.htm">
This statement tells the browser that any area in the image not defined in earlier AREA tags is
considered to be the default area and if the visitor clicks anywhere in this default area, then "topics.htm"
is to be loaded. Note that in this statement, the default area or hotspot does not have any coordinates.
There is a problem with using SHAPE="default" that you should be aware of. The default value for
the SHAPE attribute works fine in Netscape, but some versions of Internet Explorer, as well as other
browsers, do not recognize the default value. This means that the default area (topics.htm in our
example) will not load in those browsers. For this reason, if you require a default URL it is best to do it
using the SHAPE="rect" as in:
Problem 4: If the center of a circle is 30,65 and one point on the circle is 120,65, what would be the
COORDS attribute in the AREA tag?
Problem 5: It is acceptable to use percentages instead of pixels in the COORDS attribute. With this
method, the values are interpreted as percentages of the image's width and height respectively. If the
AREA tag is:
<AREA SHAPE="rect" COORDS="0,0,50%,100%">
how would the browser interpret this statement?
| top | | bottom |
DOWNLOAD PAINT SHOP PRO AND MAPEDIT

There are a number of paint programs to choose from. Two of the most popular ones are Paint Shop
Pro for Windows users and Photoshop for MAC users. You can try these programs for 30 days after a
decision to purchase must be made. This lesson uses Paint Shop Pro 8 and if you do not have a copy,
you can download one by clicking on the following link:
Paint Shop Pro
If you do not want to come up with all the image map coordinates yourself, there are a number of image
map making programs to choose from. Two popular ones are Mapedit and Paint Shop Pro. We will
first create an image map with Mapedit and then we will create an image map with Paint Shop Pro. To
do the next section, you will need Mapedit which you can obtain by clicking on the following link. It is
not a big program so it will not take very long to download it.
Mapedit
| top | | bottom |
USING MAPEDIT TO CREATE AN IMAGE MAP
The following search engine panel example came with permission from an internet company called
Connpad. However, they have since ceased to exist and so the link in the circle will not display the
Connpad website and will instead display my home page.
We will now use Mapedit to turn the following search engine panel image into an image map.
In order to use Mapedit, you first need an HTML document that contains the image that you want to
turn into an image map. This way Mapedit can update the image tag by adding the USEMAP attribute
and also insert the Map element with all the AREA tags. In other words, Mapedit will update the HTML
document for you by adding all the necessary tags and attributes.
So let's first create an HTML document according to the following steps:

1. Please SWITCH to NotePad or to a similar text editor and enter the following:
<HTML>
<HEAD>
<TITLE>Links to Search Engines</TITLE>
</HEAD>
<BODY>
Please choose from among the following Search Engines or click on the circle to visit my home
page.
<P ALIGN="center"><IMG SRC="toolpane.gif" WIDTH="440" HEIGHT="100"
BORDER="0" ALT="Image Map"></P>
</BODY>
</HTML>
2. Now save this HTML document naming it engines.htm (or use any suitable name of your
choosing). Note that this document contains no MAP file and that the IMG tag does not contain
the USEMAP attribute. As you will see, Mapedit will insert into this engines.htm document, the
USEMAP attribute and the MAP element.
3. Next, save the above image into the same folder as engines.htm. You can do this by clicking on
the image with the right mouse button to display a drop-down menu. Choose the Save picture
or image option to save the image. Use the same name toolpane.gif. Note: The image can be
either a gif image or a jpeg (jpg) image.
Once the HTML document (engines.htm) and the image (toolpane.gif) are in the same folder, here are
the steps involved to create the image map:
1. Open Mapedit and the Open dialog window opens up.

2. Browse to the folder where you saved the HTML document named engines.htm. Click on the
name engines.htm and then click on Open.
3. The Select Inline Image dialog window is now displayed. Since there could be several images
on a web page, you now need to select the image that you want turned into an image map. In our
case there is only one image on the web page, but of course there can be several images and in
that case all the images would be listed. Click on toolpane.gif to select it and then click on OK.
This will load and display the image. You may now wish to enlarge the Mapedit window by
clicking on the little Maximize button in the top right corner of the Mapedit window.
4. We are now ready to create our image map. Let's first take care of the link to Yahoo. Note that
the left end of the Yahoo hotspot is rounded. You may have been wondering why the W3C did
not include oval shapes with the other shapes because often ovals and curved ends look nicer
than rectangles. Some map imaging programs do include the oval shape as a forth choice.
However, the oval shape is also known to create problems in browsers and it is therefore
recommended that you not choose that option. Instead, if you have an oval shape or a curved end
as shown in our image, simply place a RECTANGLE around the shape - which means that the

hotspot will extend a little beyond the curvature but that is okay.
There are three tools located in the ToolBar for drawing the shapes to create the hotspots. They
are . The one we will use first is the rectangle tool. Now click on the rectangle tool
(the one on the left). This will display the First Time Hints box which tells you what to do.
Click on OK. These hints act similar to a Wizard that you often see in other software guiding you
through the process. If you do not wish to see these hints, click on No Hints, Please.
5. Move the mouse pointer to the top left corner of the region for Yahoo and click once with the
left mouse button.
6. Now drag the mouse pointer to the bottom right corner of the region so that the entire Yahoo
region is enclosed with a rectangle as follows:
7. Once the rectangle is positioned where you want it, click again with the left mouse button. This
will display another First Time Hints telling you what to do next. Click on OK. This will display
the Object URL dialog window. If you make a mistake, just click on Cancel and both the Object
URL window and the box around Yahoo will disappear and you can then try again.
8. Click in the top box labelled URL for clicks on this object and type the complete URL for
Yahoo which is (do not add quotes or anything else):
http://www.yahoo.com/
9. In the next box labelled Alternate (ALT) Text, type: Yahoo. Mapedit will place this in the ALT
attribute as the alternative text for this part of the image map. In the Help file, Mapedit states
"When your page is viewed by a web browser that does not support graphics, the user may also
be presented with a menu of the text alternatives, instead of an image. Up-to-date versions of the
popular Lynx browser support this feature. Netscape 4 will display the ALT text as pop-up text
when the mouse pointer moves over the hotspot. However, this feature of Netscape does not
work reliably. We DO NOT RECOMMEND relying heavily on this feature to display ALT text
as pop-up text. It often fails to work if the user has to scroll the window and there may be other
flaws as well. This is a problem with Netscape and it has nothing to do with Mapedit. ALT text is
intended for non-graphics browsers."
10. In the Mouse-Over (TITLE) Text box, leave the checkbox beside Same As ALT selected.
Mapedit states that "some newer web browsers, such as Microsoft Internet Explorer 4.0 and up
(but NOT including Netscape as of version 4.5), will display the TITLE text as "pop-up" text
when the mouse pointer moves over the hotspot. Mapedit 2.5 and later will automatically set the
TITLE text to match the ALT text unless you choose to turn this feature off using the "Same As

ALT" checkbox. If you choose to turn off that checkbox, you must enter the TITLE text
separately."
11. The next box reads: Target (For frames; usually left blank). If your HTML document involves
frames or if your HTML document is in a frame, you should type the value top in the box as this
will ensure Yahoo loading into a full body of the current window. You can also type in the value
blank to load the page into a new blank window. If you are not using frames, you can leave this
box blank.
12. Leave the two remaining boxes blank.
13. Click on OK and the dialog window disappears.
14. Repeat this process by placing a rectangle around each search engine's hotspot and use the
following URLs (you can add the appropriate "Alternative text"):
For Infoseek, use http://infoseek.go.com/

For Lycos, use http://www.lycos.com/
For Hotbot, use http://www.hotbot.com/
For Excite, use http://www.excite.com/
For Altavista, use http://www.altavista.com/
15. Now click on the circle tool in the ToolBar (the middle button) to place a circle around the circle
in the lower right corner of the image (to the right of the words "search panel"). Place the mouse
pointer in the center of the circle and click once. Now drag the mouse pointer so that a circle is
drawn around the circle. When you are satisfied, click the left mouse button once more to
indicate that the circle is finished and to open the Object URL dialog window. In the Object URL
window enter in the URL box:
http://www.htmltutorials.ca/
Next, enter something like "Home Page" for the alternative text. When you are finished placing
the rectangles and circle, the image should look like:
16. At any time you want to make changes, just choose Tools from the menu bar and then choose
Test+Edit. This will place a checkmark beside Test+Edit in the Tools menu to indicate that this
is the current active tool. Click on the hotspot you want to edit and the hotspot will change to
another color, and the Object URL window will open up for you to make your changes in.
Instead of choosing Test+Edit from the Tools menu, you can simply click on the Test and Edit

Hotspots tool, .
17. We haven't mentioned anything about the default area around our hotspots. In our example, if the
visitor clicks outside any hotspot, we want nothing to happen. Because we have not specified
anything for the default URL, Mapedit will assume that we want no default URL and will insert
the appropriate HTML coding for this (as you will see later). If you want a default URL, you can
do it in one of two ways:
1. Choose File from the menu bar and then choose Edit Default URL. The Default URL
window opens up for you to enter the default URL.
2. Click on the Test and Edit Hotspots tool, , from the Tools menu and click anywhere
in the default region. The Default URL window opens up for you to enter the default
URL.
18. Our next step is to save our work. Choose Save As from the File menu and the Save As dialog
window opens up. The name of the HTML document (engines) has already been placed in the
File name box and the current folder name placed in the Save in box. If you want to change the
name of your document (engines.htm) and/or the location of the document, you can do so now.
19. Click on Save and a dialog window opens up warning you that the file already exists. Choose
Yes to overwrite the file and the updated document named engines.htm now containing the
USEMAP attribute and the MAP element will be saved.
To see the image map in action, make sure you are connected to the internet since we are accessing
various search engines. SWITCH to your browser, LOAD the file named engines.htm and test your
image map.
Now to see what Mapedit did to the document, SWITCH to NotePad, re-load engines.htm as changes
were made to the document. Note that the image tag has been updated to include the USEMAP attribute
with the value #toolpane and that the MAP file has been added. This is what mine looks like. Your
coordinates will likely be a little different due to the fact that we drew the rectangles and circle in
approximate positions. You may have also used different alternative text for the ALT attributes.
<P ALIGN="center"><IMG SRC="toolpane.gif" WIDTH="440" HEIGHT="100" BORDER="0"

ALT="Image Map" usemap="#toolpane"></P>
<map name="toolpane">
<area shape="rect" alt="Yahoo" coords="4,8,110,43" href="http://www.yahoo.com/" title="Yahoo">
<area shape="rect" alt="Infoseek/Go" coords="111,8,220,43" href="http://infoseek.go.com/"
title="Infoseek/Go">
<area shape="rect" alt="Lycos" coords="221,8,327,43" href="http://www.lycos.com/" title="Lycos">
<area shape="rect" alt="Hotbot" coords="328,8,433,43" href="http://www.hotbot.com/" title="Hotbot">
<area shape="rect" alt="Excite" coords="4,52,110,86" href="http://www.excite.com/" title="Excite">
<area shape="rect" alt="Altavista" coords="111,52,225,86" href="http://www.altavista.com/"
title="Altavista">
<area shape="circle" alt="Home Page" coords="416,70,17" href="http://www.htmltutorials.ca/"
title="Home Page">

<area shape="default" nohref>

</map>
Note the last area tag. It says:
<area shape="default" nohref>
Since we did not specify a default URL, Mapedit assumed that there would not be one as indicated by
the attribute nohref meaning there is no href for the default area. NOHREF indicates that the particular
hotspot points to nothing. Thus if you have an area in your image map which is to do nothing, just use
the NOHREF attribute. Remember that only Netscape recognizes the "default" value for the SHAPE
attribute (shape="default"). Internet Explorer does not recognize default as a value for SHAPE and so
will ignore this AREA tag which is okay because we don't have a default URL anyway. In fact, you
could leave out this AREA tag altogether and everything will still work as planned.
Problem 6: In the above AREA tags from Mapedit, what is the center and radius of the circle hotspot?
Problem 7: What are ALL the HTML statements necessary to create an image map for the following
image? The conditions are given below the image.
Here are the conditions:
1. The hotspots are to take approximately the positions of the following outlined rectangles (the
URLs and e-mail address do not exist as this is an example for illustration purposes only):

2. The name of the image is to be menu.gif

3. The width of the image is 117 pixels and the height is 146 pixels and the image is to have no
border.
4. The name of the map file is to be business
5. The coordinates of the top left corner and bottom right corner for each rectangle and the URL to
be used is given as follows:
For the Home rectangle it is 21,4 and 96,31 and the URL is index2.htm
For the Product Information rectangle it is 5,38 and 113,77 and the URL is product.htm
For the Place Order rectangle it is 5,83 and 113,110 and the URL is order.htm
For the E-mail us rectangle it is 11,114 and 107,139 and the e-mail address is business@bus.
com
6. There is to be no default URL.

7. Include appropriate ALT and TITLE attributes.
USING PAINT SHOP PRO TO CREATE AN IMAGE MAP
An image map in Paint Shop Pro is created with the Image Mapper. Image Mapper does a great job in
creating image maps.
We will be using the same image that we used in the last section with Mapedit. Here is that image again:

1. If you want to follow along, just choose a folder or create a new folder and save the above image
to that folder. As you will see when you save the image, the name of the image is toolpane.gif.
2. The second step is to load into Paint Shop Pro the image that you just saved, or you can choose
another image that you want to convert into an image map. So open Paint Shop Pro. From the
File menu, choose Open. Browse to the folder that contains the image. Click on the image name
and click on Open. The image should now be displayed in Paint Shop Pro.
3. We now need to open the Image Mapper program. To do this, choose File --> Export -->
Image Mapper. That is, from the File menu, choose Export and then from the Export pop-up
menu, choose Image Mapper. The Image Mapper dialog window opens up with your image in the
Preview window.
Here is what you should have so far if you chose toolpane.gif for the image:

Just above the Cell Properties are seven tools for creating the image map. Here are these seven tools:
Starting from the left, we have:
1. The Arrow tool, . After you draw a hotspot you click on this tool to select the hotspot in
order to assign a link and alt text to it.

2. The Mover tool, . This tool allows you to move or reposition a hotspot. This is done by the
"click and drag" method. That is, click on the image with the left mouse button, and then while
holding down the mouse button, drag the hotspot to where you want it.
3. The Polygon tool, . This tool is used to create hotspots that have an irregular shape to them
(those shapes that are not circles, squares or rectangles).
4. The Rectangle tool, . This tool is used to create a rectangular or square hotspot.
5. The Circle tool, . This tool is used to create a circular hotspot.
6. The Delete tool, . This tool is used to delete a hotspot.

7. The Pan tool, . This tool is used to move an image that is too large to fit in the Preview
window. As you can see, my image is too wide to fit into the Preview window. The Pan tool
allows me to move the image so that the right side of the image comes into view.
Let's now draw our first hotspot. Here are the steps:
1. Clicking on the Rectangle tool to select it. Draw a rectangle over the Yahoo hotspot. To do this,
move the mouse pointer to the top left corner of the region for Yahoo, and click once and hold
down the left mouse button. Now drag the mouse pointer to the bottom right corner of the region
so that the entire Yahoo region is enclosed with a rectangle as follows:
If you make an error or want to start over, you can click on the Delete tool. If the positioning of
the rectangle is not quite right, you can click on the Mover tool and drag to the correct spot. Note
that there are two little handles on the green rectangle - one at the top left corner and one at the
bottom right corner. These handles are called nodes. If the rectangle around the hotspot is not
quite big enough or a little too big, you can adjust the size with these nodes. Choose a node, click
and drag it a little to see what I mean.
2. Note that the x and y positions of the hotspot are displayed just below the Target box. The top left
corner of the image is defined to be (0,0).
3. Next, click on the Arrow tool and in the URL box enter the URL for Yahoo which is:
http://www.yahoo.com/
4. In the next box labelled Alt text, type: Yahoo. Paint Shop Pro will place this in the ALT attribute

as the alternative text for this part of the image map.

5. You can leave the Target box blank. As stated above in the Mapedit section, if your HTML
document involves frames or if your HTML document is in a frame, you should choose the value
_top in the Target's pop-up box as this will ensure Yahoo loading into a full body of the current
window. You can also use the value _blank to load the page into a new blank window. If you are
not using frames, leave this box blank.
6. Repeat this process by placing a rectangle around each search engine's hotspot and use the
following URLs (you can add the appropriate alternative text):
For Infoseek, use http://infoseek.go.com/

For Lycos, use http://www.lycos.com/
For Hotbot, use http://www.hotbot.com/
For Excite, use http://www.excite.com/
For Altavista, use http://www.altavista.com/
Here is the panel with the rectangular hotspots.
7. As you can see in the above image, the rectangle around the Altavista hotspot is green while the
rectangles around the rest of them are red. The green rectangle indicates the hotspot that is
currently selected (or active) and its two nodes are visible, while the red rectangles indicate the
remaining inactive hotspots. You can choose different colors for the active and inactive hotspots
by clicking on the Preferences button. In the resulting dialog window, click in the Active map
border color box and from the resulting palette, choose a color. Do the same for the Inactive
map border color. Click OK to return to Image Mapper.
8. Now click on the Circle tool so that we can place a circle around the circle in the lower right
corner of the image (to the right of the words "search panel"). Place the mouse pointer in the
center of the circle and click the left mouse button and hold it down. While holding it down, drag
the mouse pointer so that a circle is drawn around the circle. When you are satisfied, release the
mouse button. Here is what you should have:

Note that the green circle has two nodes so that you can adjust the size of the circle if necessary.
In the URL box, enter the URL:
http://www.htmltutorials.ca/
Next, enter something like "Home Page" for the alternative text.
If you want to delete all the hotspots and start over, just click on the Clear button at the bottom of the
dialog window.
If you have an irregular shape, you choose the Polygon tool. When using the Polygon tool, you begin by
choosing a point on your image and click once. Then move the cursor over to the next spot and click
again. A colored line traces out the path as you click away from one spot to the next. To complete the
hotspot, your last click (the ending point) needs to be on top of the first click (the starting point). Here is
an example of an irregular shaped hotspot tracing out the State of Texas on a U.S. map drawn with the
Polygon tool. Note that each click produced a node that you can move or adjust to make a perfectly
drawn image map.
When you are finished creating the hotspots, you then need to save your work. To do this:
1. Click on the Save button or on the Save As button. This will display the HTML Save As dialog
window.
2. Paint Shop Pro is first going to create an HTML file that contains all the necessary coding for
your image map to work. So type in a suitable name for the web page (such as MyImageMap.
htm), choose where you want to save the image and then click on Save.
3. Now the Image Map Save As dialog window opens up. Type in a name for your image. You can
use the same original name (toolpane.gif) or choose a new name such as SearchEngines.gif.
Make sure that you are saving the image to the same folder as the web page and then click on
Save to save the image.
That's it. You can now load the HTML file (MyImageMap.htm) into NotePad if you wish to see the
coding that Paint Shop Pro created. If necessary, you can transfer this coding to an existing web page.
You can also load the HTML file into your browser to test the hotspot. From your browser, you can also
see the coding by choosing Source from the View menu.

You can also preview your image map in your browser by simply clicking on the Preview in browser
button which is the eye, .
Click on the Save Settings button if you only want to save the image map settings. Saving the map
settings allows you to load the settings back into the same image or into a different image at another
time. In other words, saving the settings will allow you continue working on the image map at a later
time. Just load in the image and then load in the settings. The settings will be saved with the extension .
jmd You can load the settings back into Image Mapper by clicking on the Load Settings button.
If one of the colors in your image is not displaying in your web page, then it is because the color has
been designated as transparent. To further control the image, click on the Optimize Image button. This
will display the GIF Optimizer dialog window where you can specify full or partial transparency,
image loading format (interlaced or non-interlaced), and so on.
As stated above, when creating a hotspot, the x and y coordinates for the hotspot are given below the
Target box. For example, suppose for the Yahoo hotspot we have:
On our web page, in the MAP element, Paint Shop Pro will translate these coordinates into
<AREA SHAPE="rect" COORDS="2,9,111,44" HREF=...>
Problem 8: In the above AREA tag created by Paint Shop Pro, the COORDS attribute reads:
COORDS="2,9,111,44"
What are the coordinates of the top left corner of the hotspot and what are the coordinates of the bottom
right corner of the hotspot?
| top | | bottom |
OVERLAPPING HOTSPOTS - SUMMARY
Hotspots are checked in the order they appear in the map file. Thus if two or more hotspots overlap, the

hotspot defined first in the map file takes precedence over subsequent hotspots. Therefore you must
place your hotspots in order from the most important hotspot to the least important. If you have a circle
inside of a rectangle, you need to place the circle shape first in the map file so that when a visitor clicks
into the circle, it will take precedence over the rest of the rectangle. The "default" hotspot is generally
placed last in the list.
| top | | bottom |
ANSWERS
1. The AREA tag would be:
<AREA SHAPE="rect" COORDS="25,70,115,135" HREF="http://www.cnn.com/">
2. The name of the image is map3.gif.

3. The name of the image map is shapes. That is, shapes is the name of the map file containing all
the image map data.
4. The center is given (30,65), but the radius is not given. So we need to find the radius. Since the
center and the point on the circle (120,65) are on the same horizontal line (they are both 65 pixels
from the top of the image), the radius would be 120-30=90 pixels. Thus the COORDS attribute
would be: COORDS="30,65,90"
5. The browser would interpret this statement as a rectangular hotspot extending from the left side
of the image to 50% (or half) of the image's width. The height of the hotspot would be the full
height of the image (100%).
6. My coordinates for the circle shape are 416,70,17 which means that the center is at 416,70 and
the radius is 17 pixels.
7. The image tag would be something like:
<IMG SRC="menu.gif" WIDTH="117" HEIGHT="146" BORDER="0" USEMAP="#business"

ALT="Image Map">
The MAP file would be something like:
<MAP NAME="business">
<AREA SHAPE="rect" COORDS="21,4,96,31" HREF="index2.htm" ALT="Home Page"
TITLE="Home Page">
<AREA SHAPE="rect" COORDS="5,38,113,77" HREF="product.htm" ALT="Product
Information" TITLE="Product Information">
<AREA SHAPE="rect" COORDS="5,83,113,110" HREF="order.htm" ALT="Place Order"
TITLE="Place Order">

<AREA SHAPE="rect" COORDS="11,114,107,139" HREF="mailto:business@bus.com"

ALT="E-mail us" TITLE="E-mail us">
</MAP>
Since there is no default area URL in the image, I left out the AREA tag that would have defined
the default area. Also, whether you use all lower case letters or have the ALT attribute before the
COORDS attribute does not matter. In other words,
<area shape="rect" alt="Home Page" coords="21,4,96,31" href="index.htm" title="Home Page">
is also acceptable and is in fact what Mapedit produced in the map file.
8. The coordinates of the top left corner is (2,9) and the coordinates of the bottom right corner is
(111,44). These coordinates give rise to the numbers in the COORDS attribute (2,9,111,44).
| Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Twenty-
One |

FUN WITH JAVASCRIPT by J. Gilson
LESSON TWENTY-ONE
FUN WITH JAVASCRIPT
| Java versus JavaScript | | Our first interactive JavaScript - The JavaScript Alert pop-
up window | | The Confirm and Prompt JavaScript windows |
| Personalizing your visitor's name | | Interacting with your visitor's computer clock |
| Conclusion - Want more JavaScript? |
JAVA VERSUS JAVASCRIPT
Both Java and JavaScript are programming languages that resemble a programming language called
C. They are both examples of modern Object Oriented Programming (OOP) Languages. They both
share a similar syntax and at first glance both appear to be the same. However, there are some very
important differences and it is because of these differences that we have in fact two languages - Java
and JavaScript. Each of these languages is suited to different applications and environments.
Object Oriented Programming means that the final program is made up of many parts or many
objects. For example, a lot of parts (objects) go into making a car and each object is important.
However, it's when they are all put together into that final product that counts. Just as many objects
make up the whole car, similarly, many objects in an OOP language make up the whole program.
JavaScript is the language of choice for creating interactive web pages. This is because JavaScript is
designed as an extension to HTML and is included within HTML codes. Java, on the other hand, is a
more general purpose language. While Java can also be used in web page development, it has very little
capability to interact with a browser. Yet Java is very capable of creating stand alone applications such
as a data base manager that can be run without being part of any web page.
Java was developed by Sun Microsystems. It is closely related to C and C++. To program in Java or to
see or include a Java Applet in your browser, you need to have at least Windows 95 or higher and your
browser must be at least a 32-bit version of Netscape Navigator 3.0, or at least a 32-bit version of
Internet Explorer 3.0. A Java Applet is a small Java program (hence the term Applet) used mostly to
create special effects and interactive events on your web pages such as led signs, clocks, calculators,
conversion tables and a host of other interactive events. Finally, to do any programming in Java or to test
applets, you need a Java Developers Kit (which you can get from the above Sun Microsystems website).

One of the basic differences between Java and JavaScript is that JavaScript is highly event driven. It is
great at detecting mouse clicks, pointer movements and visitor input. Java on the other hand is not so
tightly focused and an Applet may not accept any input at all. And if the Applet does respond to user
input, it does not react to other events that might occur outside its "window" or outside its realm.
Java is a very strict language. All variables must belong to a Java "class" (called an "object") and all
functions must be "methods" of a particular object" (recall that we are dealing with an "Object"
Oriented Programming language). That is, everything must be part of a class and all Java variables must
be declared and typed and this typing is quite strict. JavaScript, on the other hand, is a less strict
language than Java. Because it is a less strict language, it is much easier to write and much easier to
learn.
So you can see that in many ways JavaScript and Java are two different languages. There are still many
browsers in use today that do not support Java but it is now getting to the point that most browsers do
support JavaScript. So if you want to create dynamically interactive web pages, JavaScript is the
language to use. If you want to create independent applications that may or may not be delivered
through the web, then Java is the way to go. This lesson will concentrate on a few interactive
applications using JavaScript.
WHY LEARN JAVASCRIPT?
When you finish this lesson, you will know whether or not JavaScript is an area you want to pursue
further. With most people, when they see an interactive event they like, they will simply copy the code
(which is often written in JavaScript) and use it as is. They have no understanding what the code means
or why it works - but it works. So they just copy it and use it hoping no one will find out. Copying and
using other people's work without permission is really a violation of international copyright laws and has
been known to generate lawsuits.
If you have an understanding of JavaScript, you can make up your own interactive events. And if you
see something on another website you really like, then you will be able to adapt it to your own situation.
Learn JavaScript and you will know what you can change and what you can't change. JavaScript is not
difficult to learn if you take a step by step approach. This lesson will give you a taste of the fun you can
have with JavaScript on your web pages - so let's get started with our first example.
| top | | bottom |
OUR FIRST INTERACTIVE JAVASCRIPT - THE JAVASCRIPT ALERT POP-UP

WINDOW

Did you like the JavaScript Alert window that suddenly popped up when this web page was loaded? If
you did not see this Alert window, then one of two things is possible:
1. You are using a browser older than Netscape Navigator 2.0 or Internet Explorer 3.0. These older
browsers do not support JavaScript and so unfortunately the events that occur in this lesson
cannot be seen in your browser.
2. You are using a browser that has had the JavaScript turned off. This may be the case if you are
using at least Netscape 2.0 or at least Internet Explorer 3.0 (Netscape 4.0 and Explorer 4.0 and
newer versions should already have their JavaScripts enabled). Each browser version has its own
way of turning on (also called "enabling") JavaScript. Here are the instructions to turn on
JavaScript. If they don't work for your browser and you can't figure out how to do it, please ask
someone you know who can help you.
❍ For Netscape Navigator 3.0 or newer browsers: Choose Options from the menu bar at
the top of the browser screen, then choose Network Preferences, Languages, and then
Enable JavaScript.
❍ For Netscape 2.0: The original release of 2.0 does not come with an option to enable or
disable JavaScript. JavaScript is always enabled or "on".
❍ For Internet Explorer 3.x or 4.x: Select View from the menu at the top of the browser
screen, then choose Options, Security, and finally choose Run ActiveX Scripts.
❍ For Internet Explorer 5.0 or newer: Choose Tools from the menu bar at the top of the
browser screen, then choose Internet Options, click on the Security tab, click on the
Custom Level button, then scroll down and click on the radio button Enable under Script
ActiveX controls marked safe for scripting.
JavaScript, like any computer language, has a number of built-in functions which make programming a
little simpler. I used one such function for our JavaScript Alert window. Here is the line that makes up
this little interactive window:
<BODY onLoad="window.alert('I sure hope you bookmarked this website!')" BGCOLOR="#FFFFFF"

TEXT="#000000">
1. This simple statement that makes the JavaScript Alert window is part of the BODY tag. I also
like to specify a white background (BGCOLOR="#FFFFFF") with black text
(TEXT="#000000") and so I included these specifications with the BODY tag. Remember that
the BODY tag indicates the beginning of the BODY of the web page. Remember also that you
can only have one BODY tag on a web page.
2. OnLoad is a called an event handler. OnLoad tells the browser that the event must happen
when the web page is first or initially loaded (that is, produce this Alert window onLoading the
web page).

3. When the browser sees window.alert(), it knows what to do. Window is called an object and
alert() is called a method of the window object. An object can have many methods and for the
window object, alert() is one them. Note that () is simply an opening and closing bracket (in case
it is hard to read).
4. The message is called an argument and arguments must always be enclosed within parentheses
(that is, within brackets). The argument belongs to the method alert() and note that it is
enclosed with single quotation marks. Note that the whole statement for the onLoad event
handler is enclosed with double quotation marks. When two sets of quotation marks are required,
then one set must be double and the other set must be single quotation marks. Otherwise the
browser will be unable to keep things straight. Omitting these quotation marks will result in an
error message. Note that these quotation marks did not appear in the pop-up window.
5. If you want the message to be displayed only when the visitor leaves your web page, use
onUnload instead of onLoad. You can also change the message to suit your own needs.
6. I would suggest that you take some time to "play" with this statement by SWITCHING to
NOTEPAD or to a similar text editor, type in a HEAD, TITLE and then the BODY tag as in:
<HTML>
<HEAD>
<TITLE>Java Fun</TITLE>
</HEAD>
<BODY onLoad="window.alert('I sure hope you bookmarked this website!')"
BGCOLOR="#FFFFFF" TEXT="#000000">
</BODY>
</HTML>
Note: The onLoad attribute of the BODY tag (onLoad="window.alert('I sure hope you
bookmarked this website!')") must be printed on one line in Notepad or in whatever text editor
you are using. A browser looks for the closing quotation marks on the same line as the opening
quotation marks. If the closing quotation marks are on a different line, you have a JavaScript
error and the script will not work. Therefore make sure that onLoad="window.alert('I sure
hope you bookmarked this website!')" appears all on the same line in your text editor such as
Notepad.
Now save this HTML document using a suitable name such as alert.htm and then SWITCH back
to your browser and load the document to see the results. If you made a typing or other error,
SWITCH back to your word processor, correct the problem, save the corrected document and try
again.
Try also onUnload to see its effect and also try different length messages. You can learn a lot
from experimenting so take your time and try a few different things.
Unfortunately, the JavaScript Alert window that appeared when you loaded this web page will appear

every time you re-load or return to this page. This can be a nuisance for some people. Of course, you
can do a test to see if a visitor is simply returning to a web page or if the visitor is there for the very
first time. You can then adjust your introduction accordingly. For example, if the visitor is there for the
first time, you may want to ask for a name and welcome him or her to your website. If it is a return visit,
you may simply want to display a "welcome back" message along with the visitor's name. How this is all
done is beyond the scope of this lesson.
| top | | bottom |
THE CONFIRM AND PROMPT JAVASCRIPT WINDOWS
We will now study two other JavaScript windows and they are:
● the Confirm Window and

● the Prompt Window
Switch to Notepad or to another text editor and enter the following document exactly as shown. You can
also copy and paste to save some typing by following these steps:
1. Hold the mouse button down and drag the mouse cursor over the statements given below so that
the statements become highlighted.
2. Choose COPY from the EDIT menu.
3. Switch to your text editor such as Notepad and choose PASTE from the EDIT menu. Your
document will now be in your text editor.
4. Save the document using a suitable file name and extension (such as JavaFun.htm).
5. Switch back to your browser and load the file.
I think there is some value in typing if there isn't too much to type. If you make typing errors, you get a
chance to sharpen your editing skills in correcting these errors. However, the method you use is up to
you. Now here is your first document. Please enter into your text editor:
<HTML>
<HEAD>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</BODY>
</HTML>
Now save this web page (for example, JavaFun.htm), then switch to your browser, load the page to see
what happens. This example illustrates how to include JavaScript code in with your HTML code.
In order to avoid too many interactive events on this page at one time, I have these two JavaScript
windows on another page. Please click here to see these Confirm and Prompt windows. When you
have checked out the windows, return here for a discussion.
WELCOME BACK! Now here is your first problem:
Problem 1: a) When you clicked on OK in the Confirm window, what did your browser echo back on
the screen? That is, what did your browser immediately print on the screen?
b) When you clicked on Cancel in the Confirm window, what did your browser echo back on the
screen?
c) When you typed in your answer to the question What is your name please? and clicked on OK,
what did your browser echo back on the screen?
d) When you clicked on Cancel in the Prompt window, what was echoed back on the screen?
Here is the web page again but with the lines numbered for discussion purposes.
Line 1: <HTML>
Line 2: <HEAD>
Line 3: <TITLE>Java Fun</TITLE>
Line 4: </HEAD>
Line 5: <BODY BGCOLOR="#FFFFFF" TEXT="#000000">
Line 6:
Line 7: <SCRIPT LANGUAGE="JavaScript">
Line 8: 
Line 13: </SCRIPT>

Line 14:
Line 15: </BODY>
Line 16: </HTML>
Discussion:
1. Lines 1 to 5 represent the usual main parts of a web page. The BODY tag in line 5 also sets up
black text on a white background.
2. Line 6 is a blank line only to set the JavaScript apart from the standard main parts of the web
page. This blank line (as well as the blank line 14) can be omitted.
3. Line 7 tells the browser that what follows is JavaScript code. JavaScript code must be contained
within the SCRIPT element. Line 13 tells the browser that the JavaScript code has ended.
4. In lines 9, 10 and 11, document is called an object and write() is a method of the document
object. Obviously document.write tells the browser to write (or print) something. In lines 9 and
11, the two questions in the brackets are arguments that are passed to the write() method to be
printed. Note also that document.write must be written in lower case letters.
5. Confirm() (line 9) is a built-in function that opens a "Confirm window" and prints the question
"Do you like this website of HTML lessons?". Confirm() and prompt(), like alert(), are
methods of the window object. In JavaScript, the highest level object is the window object and
so if the object name is missing from a statement, the window object is assumed. Thus line 9
could also be written as:
document.write(window.confirm("Do you like this website of HTML lessons?"))
The question asked in line 9 is the argument for the method confirm() and must be contained
within quotation marks and brackets. Note also that the argument for the write() method must
also be contained within brackets (confirm("Do you like this website of HTML lessons?")).
Finally, for the reasons discussed earlier, line 9 must be written on one line in your text editor.
The same also applies to line 11.
6. The ("<BR>") in line 10 ensures a line break between the two responses. This line illustrates that
HTML code can also be used within JavaScript code. The quotation marks must be included
around the <BR>. You may have noticed that the two responses according to your input were
printed on separate lines. This was the result of the <BR> tag.
7. Notice that the entire script was enclosed as a comment. Line 8 is the opening comment line
which begins with  . The purpose for doing this is to
hide the code from older browsers that cannot interpret JavaScript. The  is the comment
container for HTML. Thus the HTML comment container will hide the code from an older
browser but will still allow the JavaScript to execute on a capable browser (and most browsers
today can interact with JavaScript). If you don't do it this way, all the code will be displayed in
older browsers as text on the screen. The // at the beginning of any line in a JavaScript program
(see line 12) tells the browser that this is a comment line and not to be executed as JavaScript.

Problem 2: In the statement:
document.write(prompt("Which lesson is your favorite?"))
a) What is the document part called?

b) What is write() called?
c) What is prompt() called?
d) What is Which lesson is your favorite? called?
Problem 3: Switch back to your word processor and remove the document.write from lines 9 and 11
and also remove line 10 completely, so that the JavaScript part of the web page now looks like:
confirm("Do you like this website of HTML lessons?")
prompt("Which lesson is your favorite?")
</SCRIPT>
Save these changes, switch to your browser and load this changed document. What is the effect of
removing the document.write part from the statements?
You can also include in this JavaScript code, the Alert window that you saw when this page was first
loaded. The line to include is:
alert("I sure hope you bookmarked this website!")
as in:
alert("I sure hope you bookmarked this website!")
confirm("Do you like this website of HTML lessons?")
prompt("Which lesson is your favorite?")
</SCRIPT>

| top | | bottom |
PERSONALIZING YOUR VISITOR'S NAME
Recall in our example introducing the Prompt window, when you typed an answer to the question,
Which lesson is your favorite? and clicked OK, your answer was immediately echoed back on the
screen. This really serves no useful purpose in an actual HTML document - so let's extend this example
by asking only for the visitor's name and instead of having the name echoed back on the screen, have
the browser print the name along with a nice comment. In other words, let's make the name interactive
and personal.
First click here to see this situation in action and then return here to continue with the lesson.
WELCOME BACK! Here are the lines that produced the Prompt window, the name and message.
Please switch to your word processor and enter the following lines:
<HTML>
<HEAD>
</HEAD>
<FONT COLOR="#FF00FF"><H2 ALIGN="center">

<!-- Hide the script from older browsers
var YourName
YourName = window.prompt("Please enter your name:")
document.write("Thank you " + YourName + "<BR>" + "Welcome to my website!")

</SCRIPT>
</H2></FONT>
</BODY>
</HTML>
Now save this document, load it into your browser and hopefully your results will be the same as what
you saw earlier. For discussion purposes, here is the document again with the lines numbered:

Line 1: <HTML>
Line 2: <HEAD>
Line 4: </HEAD>
Line 6:
Line 7:<FONT COLOR="#FF00FF"><H2 ALIGN="center">
Line 9: <!-- Hide the script from older browsers
Line 10:
Line 11: var YourName
Line 12: YourName = window.prompt("Please enter your name:")
Line 13:
Line 14: document.write("Thank you " + YourName + "<BR>" + "Welcome to my website!")
Line 15:
Line 17: </SCRIPT>
Line 18: </H2></FONT>
Line 19:
Line 20: </BODY>
Line 21: </HTML>
Discussion:
1. Line 6 is a blank line simply to separate the usual beginning elements from the body of the web
page.
2. Line 7 centers and colors the text using normal HTML coding.
3. Line 12 sets up the Prompt dialog window and has the instruction "Please enter your name:"
printed in it. Note in this line that whatever the visitor types for his or her name will be assigned
to variable YourName. YourName is called a variable. Variables are used to store data. So with
variable YourName, we are storing or assigning whatever name (or data) the visitor types in.
4. If we are going to use a variable, it should be declared to be such and line 11 does this with var
YourName (meaning that YourName is to be treated as a variable). Note that any variable used
in your script must be introduced or declared before that variable is used (the variable is being
used in line 12). It does not make sense to declare something to be a variable after it has been
used.
5. You can choose any legal name for the variable - as long as it is not a name reserved by
JavaScript for another use. I have a complete list of reserved variables names in my course
"Learn JavaScript All By Yourself!" (discussed in the "Conclusion" section at the end of this
lesson).
6. The word "window" in line 12 can be omitted since all methods will default to the window object
if the object name is omitted. Thus line 12 could simply be written as:

YourName = prompt("Please enter your name:")
7. You can actually leave out line 11 and the script will still work. This is because JavaScript is a
rather loose and tolerant language which is unlike C or Java. For this reason you can "get away"
with certain things in JavaScript that you can't get away with in C and Java. This however, does
not mean that we should not exercise good programming practice and OOP languages dictate that
variables should be declared. Browsers generally are quite tolerant to the HTML they accept.
However, we must still ensure good coding practices because otherwise the way a web page is
displayed in any particular browser is dependent on the error recovery scheme utilized by that
browser. Browsers are purposely designed to be tolerant in the HTML that they accept, but they
are not meant to be a substitute for an HTML editor. The same could be said for JavaScript. We
should be careful to do the best job that we can so that browsers can easily display the results.
8. Once the visitor has entered a name and clicked on OK, line 14 prints out "Thank you", followed
by the person's name (stored in variable YourName), followed by a line break (<BR>), followed
by "Welcome to my website!". The plus signs join these individual parts together.
Problem 4: In the above script, line 14 is the document.write statement. Note that Thank you is
enclosed within quotation marks. Thank you is called a string (think of it as a "string" of characters).
Why is there a space between the word you and the closing quotation mark (as in: "Thank you ")?
| top | | bottom |
INTERACTING WITH YOUR VISITOR'S COMPUTER CLOCK
Here is a little JavaScript program that gives a nice comment along with the current date and time. These
items will be given through the use of another JavaScript built-in object. First here are the results.
Hope you are having a great day!

Today's date is Sat Mar 06 09:11:48 GMT+0530 (India Standard Time) 2004
Please switch to your word processor and enter the following lines that give this output.
<HTML>
<HEAD>
</HEAD>

<H3 ALIGN="center">
document.write("Hope you are having a great day!")
document.write("Today's date is ",Date())
</SCRIPT></H3>
</BODY>
</HTML>
Now save the document, switch back to your browser and load the file to see the results for yourself. For
the discussion, here first is the web page again with line numbers added.
Line 1: <HTML>
Line 2: <HEAD>
Line 4: </HEAD>
Line 6:
Line 7: <H3 ALIGN="center">
Line 10: document.write("Hope you are having a great day!")
Line 12: document.write("Today's date is ",Date())
Line 14: </SCRIPT></H3>
Line 15:
Line 16: </BODY>
Line 17: </HTML>
Discussion:
1. In line 10, the statement Hope you are having a great day! was printed within the JavaScript
code. You can of course, have the statement printed outside the JavaScript code as regular
HTML text as in:
Hope you are having a great day!<BR>

</SCRIPT>
2. In line 12, the object Date() is all it takes to print the current date and time. Date() is a built-in
function that displays all this information. It is called an object because it is made up of many
methods (or parts) - such as the hour part, the minutes part, the day of week part, the year part,
etc. Each of these parts is called a method of the Date() object. Note that the empty brackets
after "Date", (), are necessary. It simply indicates to the browser that in this case there is no
argument for the Date object.
3. The information in Date() itself comes from the internal clock in your visitor's computer and so
the date will always be correct if the clock in your visitor's computer is correct (which we can
assume it is).
Problem 5: Our date and time program above has three document.write statements (lines 10, 11 and 12)
and here they are again:
document.write("Hope you are having a great day!")

What single document.write statement will take the place of these three statements? In other words,
replace the three document.write statements with one document.write statement.
Let's now make our date more interesting. Let's make a JavaScript program that checks the date function
of the visitor's computer clock and then prints a message according to the time of day. What this
JavaScript actually does is check to see if the time lies between midnight and 4 a.m. If this is the case,
we will have the browser assume that the visitor is up late and will print the message "Goodness you're
up late!". If the time is between 4 a.m. and 6 a.m. the browser will assume that the visitor is up early and
will print the message "Wow! You're up early!". If the time is between 6 a.m. and 12 noon, the message
will be simply "Good Morning!"; if the time is between 12 noon and 6 p.m., the message will be "Good
Afternoon!"; and if the time is between 6 p.m. and midnight, the message will be "Good Evening!".
Once the message has been printed, the browser will then print the date and time.
Here is the output for your current time of day:

Good Morning!
Today's date is Sat Mar 06 09:11:48 GMT+0530 (India Standard Time) 2004
Here are the lines that give this message and time. Please switch to your text editor and enter the
following exactly as given. It may look complicated at first but a complete explanation follows the
coding:
<HTML>
<HEAD>
</HEAD>
document.write("<CENTER><FONT SIZE=+1 COLOR=blue>")
today = new Date()
if((today.getHours() >=0) && (today.getHours() <4))

{
document.write("Goodness you're up late!")
}

{
document.write("Wow! You're up early!")
}

{
document.write("Good Morning!")
}

{
document.write("Good Afternoon!")
}
if((today.getHours() >=18) && (today.getHours() <=24))

{

document.write("Good Evening!")
}
document.write("</FONT></CENTER>")
</SCRIPT>
</BODY>
</HTML>
Now save this document, switch back to your browser, load the document and the output should be like
that given above. For the discussion, here is the web page again with numbered lines:
Line 1: <HTML>
Line 2: <HEAD>
Line 4: </HEAD>
Line 6:
Line 9:
Line 10: document.write("<CENTER><FONT SIZE=+1 COLOR=blue>")
Line 11:
Line 12: today = new Date()
Line 13:
Line 14: if((today.getHours() >=0) && (today.getHours() <4))
Line 15: {
Line 16: document.write("Goodness you're up late!")
Line 17: }
Line 18:
Line 20: {
Line 21: document.write("Wow! You're up early!")
Line 22: }
Line 23:
Line 25: {
Line 26: document.write("Good Morning!")
Line 27: }

Line 28:
Line 30: {
Line 31: document.write("Good Afternoon!")
Line 32: }
Line 33:
Line 34: if((today.getHours() >=18) && (today.getHours() <=24))
Line 35: {
Line 36: document.write("Good Evening!")
Line 37: }
Line 38:
Line 40: document.write("Today's date is ",Date())
Line 41: document.write("</FONT></CENTER>")
Line 43: </SCRIPT>
Line 44:
Line 45: </BODY>
Line 46: </HTML>
Discussion:
1. Some of the lines are blank and others are indented. This is very common with OOP languages.
Blank lines separate sections of script and indented lines make the script much easier to read and
can indicate what belongs together.
2. Line 10 centers the text and clock and prints the text one font size larger than the surrounding text
size. Note that these are HTML tags contained within quotation marks. Blue is defined to be the
color for the text and for the date and time.
3. Line 41 near the end of the script cancels the increased font size, the blue color and the centering
of text.
4. Line 12 transfers all the information in object Date() to variable today. Since Date() contains
several methods such as hour, minutes, date, year, etc. so today will also contain these same
methods and that is why today must also be thought of as an object. The word "new" must be
there. You will get an error message without it. You can think of new Date() as telling the
browser to "take a new instance of the date" or to "take a new reading of the date".
5. You can use any legal variable name for the object (that is, any name not reserved by JavaScript).
I chose the name "today" but you are free to choose some other name.
6. In today.getHours() (line 14), the browser will extract the hour from the object today. .
getHours() is a called a method of the object today. Some of the other methods that can be
extracted are .getMinutes(), .getMonth(), .getDate() and .getYear().
7. In line 14, the browser begins a series of checks on the hour of the date stored in object today in
order to determine what comment to write. These checks are done in lines 14, 19, 24, 29 and 34.
The browser does these checks by making use of conditional statements. Conditional statements

are if statements. The browser will check each conditional statement to determine if it is true or
if it is false. Conditional statements are often called if ... then statements meaning "if the
condition is true, then do this". Because the browser will check each of the five conditions in our
program, one at a time, we need to be very specific in our conditions. Here is how it all works:
The first condition is in line 14 and it has the browser check to see if the hour part of the date lies
between 0 AND 4 meaning between midnight and 4 a.m. If the condition is true then the
message "Goodness you're up late!" is printed (line 16). Note that the comment is surrounded by
brace brackets { }. Brace brackets are discussed below.
If the condition is false, that is, the time is not between 0 and 4 a.m., then the browser does not
execute the document.write statement in line 16 and instead drops down to line 19 which is the
next condition to be checked. Thus the part in the brace brackets will only be executed if the
condition is true.
The second condition is in line 19 and here the browser checks to see if the time is between 4 and
6 in the morning. If the answer is true, "Wow! You're up early!" is printed. If the condition is
false this message is not printed. Each condition is checked in this manner. After all the
conditions have been checked, the browser will be at line 39.
8. Once a message (such as "Good Morning") has been printed, we need a line break so that the date
and time will be printed on a new line. Line 39 forces this needed line break.
9. Line 40 prints the complete date and time.
10. As this is a 24 hour clock, the statement in line 29 which is:
will check for the time between 12 noon and 6 p.m. (12+6=18).
11. Note in the conditional statements that && is the symbol for AND (see line 14 for example).
AND is called a logical operator. The logical operator AND means that BOTH stated conditions
must be true. Another logical operator is OR written in JavaScript as ||. You would use OR if you
only want one of the two conditions to be true. To specify the AND and OR Logical Operators,
you require two of the same symbol. That is why you see && for AND and two vertical lines (||)
for OR.
The equal sign can also be used to check the time. For example, if you want to check specifically
if the hour was equal to 7, then the statement would have to be:
if(today.getHours() == 7)
In this case, the equal sign is not called a logical operator. It is a called a comparison operator
because you are using it to compare things. If you are using the equal sign to compare two
things, you need two equal signs in a row (==).

Note in line 12, today = new Date(), has only one equal sign. This is because we are not
comparing anything (there is no if statement involved). In this line, the equal sign is read as:
assign the object "new Date()" to the variable "today". That is, in this line 12, "=" represents an
assignment and not a comparison. Thus you use one equal sign for assignment and two equal
signs for comparison.
12. Spacing around symbols is optional. Thus "today.getHours() >=12" could also be written as
"today.getHours()>=12" or as "today.getHours() >= 12". It is a personal preference.
13. The { } are called brace brackets. For each opening brace bracket, {, there must be a closing
brace bracket, }. Brace brackets are used to enclose codes that belong together. Since we only
have one line of code after each "if" statement, we really did not need to use brace brackets.
However, Java, C and other OOP languages do require them, and possibly for consistency, brace
brackets are also usually included with JavaScript. So the opening brace bracket indicates that a
group of related lines are beginning and a closing brace bracket indicates that the grouping has
ended. Brace brackets are often found on lines by themselves so that they clearly indicate the
beginning and ending of a group of related coding statements. However, this does not have to be
the case.
Brace brackets can also be nested, that is, you can have brace brackets inside of brace brackets. If
you plan to use nested brace brackets, then the last one opened must be the first one closed (in the
same way that the last HTML tag opened must be the first one closed).
Problem 6: There are also other methods involving the Date object. For example, we already know that .
getHours() will only look at the hour part of the time. What do you think each of the following methods
involve?
a) .getMonth()
b) .getYear()
c) .getDate()
Problem 7: The function .getMonth is always out by one month. For example, March is interpreted as
the second month and not as the third month. The reason for this is because arrays start at zero (0) and
so January is considered to be month number zero. For this reason you need to add +1 to the month so
that January, for example, will be interpreted as 1 representing the first month. Now having said this,
what do you think the browser will print on the screen with the following line?
document.write("It is now "+(today.getMonth()+1)+"/"+today.getDate())

| top | | bottom |
CONCLUSION - WANT MORE JAVASCRIPT?
This lesson gives you a brief introduction to JavaScript. JavaScript can certainly add some interesting
interactions with your visitors. Yet there is so much more to learn - like creating your own personalized
digital clock to display on your web page, scrolling text in a box or scrolling a message on the Status Bar
at the bottom of the browser screen, having fun with colors, animations, functions, looping, random
numbers, and so on. I cover all these topics and many more topics in my course, "Learn JavaScript All
By Yourself!" which can be downloaded right into your computer.
Here is an example we will study early in the course. You know that in HTML, you can only set the
background color of a web page once. Now with JavaScript you can change the background color as
many times as you like on a page! To see this, just click on the following color names.
aliceblue antiquewhite
aqua aquamarine
azure beige
black blanchedalmond
blue brown
burlywood cadetblue
darkgray deeppink
back to white
This is just a sampling of nearly 150 beautiful built-in JavaScript colors that you will learn to code in
different ways! JavaScript can certainly spruce up your web pages and make them come alive. If you
have been able to learn HTML, then you can also learn JavaScript. It's really an easy language to learn!
If you are interested in an interactive series of JavaScript lessons written in the same easy interactive
style and layout as this website of HTML lessons, then I would like to recommend my course, "Learn
JavaScript All By Yourself!"
This series of 14 JavaScript lessons of over 300 pages is available for downloading as one zipped file
and now also includes four lessons on Dynamic HTML (DHTML).
Learn JavaScript All By Yourself!" begins with the assumption that you know nothing about
JavaScript. We will go a lot slower with the lessons in the book and with lots of explanations and

examples (we packed a lot of stuff in this Lesson 21).
These JavaScript lessons are the culmination of my efforts to produce the best possible self-learning
course on JavaScript available today - a course that assumes no prior knowledge of JavaScript.
Please click here if you would like more information or to place an order.
Here is an e-mail I received from Matthew Young. I have never met Matthew and I do not know who he
is, but I do want to thank him for the following which is reprinted with permission:
Thank you for sending me your tutorial "Learn JavaScript All By Yourself". I was very impressed with
the efficiency with which my order was processed and the simplicity of the entire procedure.
I must admit that I felt like a kid on Christmas Eve awaiting your course. During the week prior to
ordering your lessons I visited over 30 other JavaScript sites. Although I made some wonderful
discoveries and learnt much, none of these sites came even close to satisfying my hunger for a clear and
concise account of the why's and how's of JavaScript. I have been fairly busy this week and have only
made it through the first three lessons of your course; however, I learned more in the first three
paragraphs of it than I had whilst browsing through whole pages of some other sites!
I must congratulate you on the way you make everything seem so simple and straightforward (yet
without simplifying the material). Best of all, I am finding your lessons to be great FUN. I am hoping
that I can transform my site into something truly special - and something that will always be a reflection
upon your own work.
Thanks again.
Sincerely,
Matthew Young
Again, if you would like more information or to place an order, just click here.
| top | | bottom |
ANSWERS TO THE PROBLEMS POSED IN THIS LESSON
1. a) The answer depends on the browser you are using. In Netscape and in Internet Explorer 4.0
and later versions, the browser prints the word true on the screen. In older Explorer versions, the

browser prints the number -1.

b) If you are using Netscape and Explorer 4.0 and later versions, clicking on Cancel will generate
the word false. Older Explorer browsers will generate the number 0. Normally these values
would be used in a script to check a visitor's input to see what response was given and then
another script would be executed depending on the response.
c) The browser printed whatever you typed in the Prompt window.
d) In Netscape and Explorer 4.0 and later versions, the word "null" was echoed back on the
screen. In older Explorer versions, nothing was printed on the screen.
It appears that Internet Explorer 4.0 and later browsers and Netscape show the same results.
2. a) Document is called an object.
b) Write() is called a method of the document object.
c) Prompt() is a method of the window object.
d) "Which lesson is your favorite?" is called the argument for the prompt() method (and this
argument is passed on to the write() method to be printed).
3. The input was not echoed back on the screen.
4. The space is needed to ensure a space between Thank you and the visitors name (store in
variable YourName). For example, if the visitor's name was John, the line will read Thank you
John instead of Thank youJohn.
5. document.write("Hope you are having a great day!" + "<BR>" + "Today's date is ",Date())
6. a) .getMonth() has the browser look only at the month
b) .getYear() has the browser look only at the year
c) .getDate() has the browser look only at the day
7. The browser will print: It is now month/day as in: It is now 3/6
Congratulations on completing this series of 21 lessons. We also have more HTML lessons available.
Click here to learn more about our additional lessons.

Introduction To HTML - HTML Tutorials in Web Page Design by J. Gilson

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Introduction To HTML - HTML Tutorials in Web Page Design by J. Gilson

Hochgeladen von

Copyright:

Verfügbare Formate

INTRODUCTION TO HTML - html tutorials in web page design by J.

LESSON ONE - INTRODUCING HTML

You may read the following sections in their entirety

| Understanding HTML | | Different Versions of HTML | | The Netscape Problem |

HTML stands for HyperText Markup Language.

LET'S BREAK THIS DOWN A LITTLE FURTHER

http://www.htmltutorials.ca/lesson1.htm? (1 of 7)06/03/2004 09:03:09

Hi, this is bold

These words are centered

[Bold On]Hi, this is bold[Bold off][HRt]

http://www.htmltutorials.ca/lesson1.htm? (2 of 7)06/03/2004 09:03:09

easy to learn (trust me).

DIFFERENT VERSIONS OF HTML

HTML 3.2 (WILBUR)

http://www.htmltutorials.ca/lesson1.htm? (3 of 7)06/03/2004 09:03:09

HTML 4.0 (COUGAR)

THE NETSCAPE PROBLEM

So what do we have here? Well, in summary, we have:

1. HTML 2.0 tags

http://www.htmltutorials.ca/lesson1.htm? (4 of 7)06/03/2004 09:03:09

3. HTML 4.0 tags

HTML SOFTWARE TO ASSIST IN WEB PAGE DESIGN

http://www.htmltutorials.ca/lesson1.htm? (5 of 7)06/03/2004 09:03:09

| Back to the top of the page |

The information contained in these free 21 lessons is Copyright ©, Brantford Educational

http://www.htmltutorials.ca/lesson1.htm? (6 of 7)06/03/2004 09:03:09

http://www.htmltutorials.ca/lesson1.htm? (7 of 7)06/03/2004 09:03:09

LESSON TWO - GETTING STARTED

You may read the following sections in their entirety

| What do I need to get started? | | Saving your web pages |

WHAT DO I NEED TO BEGIN DESIGNING A HOME PAGE?

YOU NEED A DIRECTORY (also called a FOLDER)

YOU DO NOT NEED TO HAVE YOUR MODEM CONNECTED

YOU NEED A BROWSER

http://www.htmltutorials.ca/lesson2.htm (1 of 9)06/03/2004 09:03:35

YOU NEED A WORD PROCESSOR

In summary, you basically:

YOU NEED TO HAVE BOTH YOUR BROWSER AND NOTEPAD ACTIVELY

SAVING YOUR HTML FILE (OR DOCUMENT)

● IF YOU ARE USING ONLY NOTEPAD or similar text editor:

http://www.htmltutorials.ca/lesson2.htm (2 of 9)06/03/2004 09:03:35

NAMING YOUR TEXT ONLY FILE

So if "homepage" is the name of the HTML document, we have:

http://www.htmltutorials.ca/lesson2.htm (3 of 9)06/03/2004 09:03:35

and IBM compatibles.

So, in summary, remember:

1. Choose SAVE AS ...

SERVER REQUIREMENTS FOR NAMING HOME PAGES

http://www.htmltutorials.ca/lesson2.htm (4 of 9)06/03/2004 09:03:35

you will be connected to their main home page which is:

LOADING YOUR HTML DOCUMENT INTO THE BROWSER

http://www.htmltutorials.ca/lesson2.htm (5 of 9)06/03/2004 09:03:35

1. What does HTML stand for?

| Click here to see the answers |

GETTING YOUR WEB PAGE ON THE INTERNET

http://www.htmltutorials.ca/lesson2.htm (6 of 9)06/03/2004 09:03:35

http://www.htmltutorials.ca/lesson2.htm (7 of 9)06/03/2004 09:03:35

GETTING A COUNTER FOR YOUR WEB PAGE

http://www.htmltutorials.ca/lesson2.htm (8 of 9)06/03/2004 09:03:35

1. HTML stands for HyperText Markup Language.

| Back to the top of the page |

The information contained in these 21 free lessons is Copyright ©, Brantford Educational

http://www.htmltutorials.ca/lesson2.htm (9 of 9)06/03/2004 09:03:35