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.

T

H yper
T ext
T

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.

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
[email protected]
 LESSON TWO - GETTING STARTED

You may read the following sections in their entirety

or use these choices to go directly to a section.

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

| Back to the top of the 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 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
[email protected]
 LESSON THREE - UNDERSTANDING THE BASIC
TAGS

You may read the following sections in their entirety

or use these choices to go directly to a section.

| 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 Hyper Text Markup Language which is the
T

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.

Here is a riddle for you.

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.

Here is a riddle for you.

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?

| Click here to go to the answer section |

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.

| Back to the top of the page |

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

| Send me to Lesson Four |

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
[email protected]
 LESSON FOUR - TAGS THAT AFFECT THE
APPEARANCE OF YOUR TEXT

You may read the following sections in their entirety

or use these choices to go directly to a section.

| 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.
<H2>THIS IS H2.</H2> THIS IS NORMAL SIZE.
<H3>THIS IS H3.</H3> THIS IS NORMAL SIZE.
<H4>THIS IS H4.</H4> THIS IS NORMAL SIZE.
<H5>THIS IS H5.</H5> 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 NORMAL SIZE.

THIS IS H3.

THIS IS NORMAL SIZE.

THIS IS H4.

THIS IS NORMAL SIZE.

THIS IS H5.

THIS IS NORMAL SIZE.

THIS IS H6.

THIS IS NORMAL SIZE.

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.

| Click here to go to 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?

| Click here to go to the answer section |

<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>
 | Back to the top of the page |

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

| Send me to Lesson Five |

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
[email protected]
 LESSON FIVE - INDENTING and CREATING
SPACES WITH &nbsp; and CREATING LISTS

You may read the following sections in their entirety

or use these choices to go directly to a section.

| Indenting a line and creating spaces with &nbsp; | | 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 &nbsp;

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.

&nbsp;

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:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;These six characters will ...

In &nbsp;, the nbsp stands for non-breaking space character. &nbsp; 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 &nbsp;

 Copyright © &copy;

Trademark ™ &#153;

Registered ® &reg; or &#174;

Less Than < &lt;

Greater Than > &gt;

Ampersand & &amp;

Quote " &quot;

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 &nbsp; 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

| Click here to go to the answer section |

| 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>
<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. If canoe tips,
<UL>
<LI>Hang on to the canoe
<LI>Use the canoe for support and
<LI>Swim to shore
</UL>
<LI>Don't overexert yourself
<LI>Use a bow light at night
</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.

SAFETY TIPS FOR CANOEISTS

• Be able to swim
• Wear a life jacket at all times
• Don't stand up or move around. If canoe tips,
o Hang on to the canoe
o Use the canoe for support and
o 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>
<TITLE>SAFETY TIPS</TITLE>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H2>
<OL>
<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
</OL>
</BODY></HTML>

This is the way your web page should now look:

SAFETY TIPS FOR CANOEISTS

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>
<TITLE>SAFETY TIPS</TITLE>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H2>
<OL>
<LI>Be able to swim
<LI>Wear a life jacket at all times
<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>
<LI>Don't overexert yourself
<LI>Use a bow light at night
</OL>
</BODY></HTML>

Here is the browser output for this web page.

SAFETY TIPS FOR CANOEISTS

1. Be able to swim
2. Wear a life jacket at all times
3. Don't stand up or move around. If canoe tips,
o Hang on to the canoe
o Use the canoe for support and
o 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
Note the following points:

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
o Get the best maps. On the map select
ƒ landmarks
ƒ mountains
ƒ lakes
 o 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:
o Roads
o trails and
o 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 fire
• 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>This is List Item 2
<LI>This is List Item 3
<LI VALUE="7">This is List Item 7
<LI>This is List Item 8
</OL>

which gives the following results:

1. This is List Item 1

2. This is List Item 2
3. This is List Item 3

7. This is List Item 7

8. This is List Item 8

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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; John
Gilson &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;William
Somebody<BR>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Pauline
Johnson Collegiate &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
120 Somestreet<BR>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 627
Colborne St. East
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;Someplace, Somestate<BR>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Brantford, Ontario
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;U.S.A.
45061<BR>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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.).

| Back to the top of the page |

| Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Six |

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
[email protected]
 LESSON SIX - CREATING LINKS

You may read the following sections in their entirety

or use these choices to go directly to a section.

| 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 (&nbsp;) 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
&nbsp; replacing each space between words including the vertical bars:

<H4 ALIGN="CENTER">
|&nbsp;<A HREF="#links">Links&nbsp;in&nbsp;general</A>&nbsp;|
|&nbsp;<A
HREF="#page">Links&nbsp;within&nbsp;a&nbsp;page</A>&nbsp;|</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 &nbsp;) 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 "&nbsp;" 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.

| Click here to go to the answer section |

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?

| Click here to go to the answer section |

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

| Click here to go to the answer section |

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.

| Click here to go to the answer 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 METHOD="GET" ACTION="index.htm">
<INPUT TYPE="submit" VALUE="Return to Home Page">
</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">
<INPUT TYPE="submit" VALUE="Return to Home Page">
</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
T T

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:[email protected]">John Gilson</A>, an e-mail.

In this example, [email protected] 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.

| Click here to go to the answer section |

| 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:[email protected]?subject=topic">

as in:

<A HREF="mailto:[email protected]?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:[email protected][email protected]">

where [email protected] 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:[email protected][email protected]">

Note the following points:

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">
|&nbsp;<A
HREF="#park">Walk&nbsp;through&nbsp;the&nbsp;park</A>&nbsp;|
|&nbsp;<A HREF="#swim">Going&nbsp;for&nbsp;a&nbsp;swim</A>&nbsp;|
|&nbsp;<A HREF="#bike">A&nbsp;bicycle&nbsp;ride</A>&nbsp;|</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:[email protected]">John Gilson, and I will get back to you as
soon as possible.</A>

| Back to the top of the page |

Return to Home Page Return to Alternate Home Page

Send me to Lesson Seven

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
[email protected]
 LESSON SEVEN - IMAGES - PART 1

You may read the following sections in their entirety

or use these choices to go directly to a section.

| 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?

| Click here to go to the answer section |

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?

| Click here to go to the answer section |

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>
<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"
WIDTH="96" HEIGHT="90" HSPACE="10">We are wheelchair accessible.</H4>
Please call for rates<HR>
</BODY></HTML>

Now save the document, SWITCH back to your browser, load the document and this is
what you should see:

ABOUT OUR HALL

We are wheelchair accessible.

Please call for rates

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?

| Click here to go to the answer section |

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>
<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"
WIDTH="60" HEIGHT="60" HSPACE="10" ALT="chair">We are wheelchair
accessible.</H4>
Please call for rates<HR>
</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

| Click here to go to the answer section |

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

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

We are wheelchair accessible.

Please call for rates

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

| Back to the top of the page |

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

| Send me to Lesson Eight |

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
[email protected]
 LESSON EIGHT - IMAGES - PART 2

You may read the following sections in their entirety

or use these choices to go directly to a section.

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

| Click here to go to the answer section |

| 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>
<P><A HREF="cross4.gif"><IMG SRC="cross4th.gif" WIDTH="32" HEIGHT="50"
ALT="cross"></A>

<P><A HREF="cross6.gif"><IMG SRC="cross6th.gif" WIDTH="42" HEIGHT="52"

ALT="cross"></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?

| Click here to go to the answer section |

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.
 | Back to the top of the page |

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

| Send me to Lesson Nine |

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
[email protected]
 LESSON NINE - COLOR

You may read the following sections in their entirety

or use these choices to go directly to a section.

| 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?

| Click here to go to the answer section |

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?

| Click here to go to the answer section |

| 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?

| Click here to go to the answer section |

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.

| Click here to go to the answer section |

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.

| Click here to go to the answer section |

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.

| Back to the top of the page |

| Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Ten |

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
[email protected]
 LESSON TEN - RGB COLOR TABLE

You may read the following sections in their entirety

or use these choices to go directly to a section.

| 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

33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF

00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF

33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF

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

66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF

99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF

66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF

99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF

CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF

FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF

CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF

FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF

CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF

FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF

CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF

 FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF

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

| Back to the top of the page |

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

| Send me to Lesson Eleven |

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
[email protected]
 LESSON ELEVEN - BASIC TABLES

You may read the following sections in their entirety

or use these choices to go directly to a section.

| 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
9 A.M. 12 P.M. 2 P.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
9 A.M. 12 P.M. 2 P.M.
NURSERY John Mary Marcia
SECURITY Kimberly George Ken
TICKETS Jacob Nancy Adam
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
9 A.M. 12 P.M. 2 P.M.
NURSERY John Mary Marcia
SECURITY Kimberly George Ken
TICKETS Jacob Nancy Adam
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 "&nbsp;" 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>&nbsp;

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
9 A.M. 12 P.M. 2 P.M.
NURSERY John Mary Marcia
SECURITY Kimberly George Ken
TICKETS Jacob Nancy Adam

| 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
9 A.M. 12 P.M. 2 P.M.
NURSERY John Mary Marcia
SECURITY Kimberly George Ken
TICKETS Jacob Nancy Adam
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
9 A.M. 12 P.M. 2 P.M.

NURSERY John Mary Marcia

SECURITY Kimberly George Ken

TICKETS Jacob Nancy Adam

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.

| Click here to go to the answer section |

| 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">
<TABLE BORDER="3" CELLSPACING="0" CELLPADDING="3">
<CAPTION><STRONG>VOLUNTEER SCHEDULE</STRONG></CAPTION>
<TR>
<TD>&nbsp;
<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
9 A.M. 12 P.M. 2 P.M.
NURSERY John Mary Marcia
SECURITY Kimberly George Ken
TICKETS Jacob Nancy Adam
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.
NURSERY John Mary Marcia
SECURITY Kimberly George Ken
TICKETS Jacob Nancy Adam
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.
NURSERY John Mary Marcia
SECURITY Kimberly George Ken
TICKETS Jacob Nancy Adam
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%">&nbsp;
<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
12
9 A.M. 2 P.M.
P.M.
NURSERY John Mary Marcia
SECURITY Kimberly George Ken
TICKETS Jacob Nancy Adam
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?

| Click here to go to the answer section |

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

| Click here to go to the answer section |

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

| Click here to go to the answer section |

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.
NURSERY John Mary Marcia
SECURITY Kimberly George Ken
TICKETS Jacob Nancy Adam

| Click here to go to the answer section |

| 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%">
<CAPTION><STRONG>VOLUNTEER
SCHEDULE</STRONG></CAPTION>
<TR BGCOLOR="#FFFFCC">
<TD>&nbsp;
<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.

| Back to the top of the page |

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

| Send me to Lesson Twelve |

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
[email protected]
 LESSON TWELVE - ADVANCED TABLES

You may read the following sections in their entirety

or use these choices to go directly to a section.

| 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>&nbsp;<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>&lt;BR&gt;, &lt;P&gt;, &lt;HR&gt;<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>&nbsp;<BR>CHOOSE ANY

LESSON</H3>

Note the following points:

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 &lt;. The lt stands for
"less than" The letters lt must be written in lower case as shown. The ampersand
command for ">" is &gt; (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>

<TABLE BORDER="5" CELLSPACING="0" CELLPADDING="3">

<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>&nbsp;
<TH>High-Speed<BR>Steel
<TH>Carbide
<TR>
<TD>Stainless Steel
<TD ALIGN="CENTER">50
<TD ALIGN="CENTER">150
<TR>
<TD>Cast Iron
<TD ALIGN="CENTER">74
<TD ALIGN="CENTER">225
<TR>
<TD>Brass
<TD ALIGN="CENTER">300
<TD ALIGN="CENTER">800
<TR>
<TD>Copper
<TD ALIGN="CENTER">300
<TD ALIGN="CENTER">1000
</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 (&nbsp;) 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.

<TABLE BORDER="5" CELLSPACING="0" CELLPADDING="3">

<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

DIAMETER CUTTING 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

| Click here to go to the answer section |

| 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

| Click here to go to the answer section |

| 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 This side just shows plain text.

yellow
You can color it too if you want.
Feel free to place
anything on this side. This side is 70% of the width of the screen.

This cell is 30% of the Both sides are 600 pixels long.
browser screen width.
But you can change it to anything you want.

Here is the BODY of the HTML document that gives this

table. A brief explanation is given to the left.

Note that the HEIGHT <TABLE BORDER="1" CELLSPACING="0"

is in pixels (600) and CELLPADDING="10" WIDTH="100%" HEIGHT="600">
not as a percent. <TR VALIGN="TOP">
VALIGN="TOP" <TD WIDTH="30%" BGCOLOR="#FFFF00">This side is
(Verticle ALIGN) colored yellow
aligns the text with the <P>Feel free to place anything on this side.
top of the cell. <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 This side just shows plain text.

yellow
You can color it too if you want.
Feel free to place
anything on this side. This side is 70% of the width of the screen.

This cell is 30% of the Both sides are 600 pixels long.
browser screen width.
But you can change it to anything you want.

Here is the BODY of the HTML document that gives this

table. A brief explanation is given to the left.

Note that the HEIGHT <TABLE CELLPADDING="10" WIDTH="100%"

is in pixels (600) and HEIGHT="600">
not as a percent. <TR VALIGN="TOP">
VALIGN="TOP" <TD WIDTH="30%" BGCOLOR="#FFFF00">This side is
(Verticle ALIGN) colored yellow
aligns the text with the <P>Feel free to place anything on this side.
top of the cell. <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>

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.
Feel free to place This is the right side of the table.
anything on this side.
I could have placed the vertical line (the image) in this cell
This cell is 30% of the by aligning it to the left side of the cell.
browser screen width.
This line is 600 pixels in height (the same length as the table)
The vertical line is and 2 pixels wide.
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>This cell is 30% of the browser screen width.
<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">&nbsp;
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 ALIGN="CENTER">350
<TD>&nbsp;
<TD>560
<TR>
<TD>2.
<TD>Cast iron
<TD ALIGN="CENTER">4.5
<TD>&nbsp;
<TD ALIGN="CENTER">69
<TD ALIGN="CENTER">201
<TR>
<TD>3.
<TD>Copper
 <TD ALIGN="CENTER">1
<TD ALIGN="CENTER">300
<TD>&nbsp;
<TD ALIGN="CENTER">1200
<TR>
<TD>4.
<TD>Stainless Steel
<TD ALIGN="CENTER">3.625
<TD>&nbsp;
<TD ALIGN="CENTER">46
<TD ALIGN="CENTER">167
</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 (&nbsp;) 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">&nbsp;
<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">&nbsp;
</TABLE></H3>
 LESSON THIRTEEN
You may read the following sections in their entirety
or use these choices to go directly to a section.

| 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?

| Click here to go to the answer section |

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:
o 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).
o 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).

| Click here to go to the answer section |

| 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:

<FRAMESET COLS="30%,70%">

| 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">
Line5: <FRAME SRC="Lesson2.htm">
Line6: </FRAMESET>

Line7: <FRAMESET ROWS="33%,33%,33%">

Line8: <FRAME SRC="Lesson3.htm">
Line9: <FRAME SRC="Lesson4.htm">
Line10: <FRAME SRC="Lesson5.htm">
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.

| Click here to go to the answer section |

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.

| Click here to go to the answer section |

| 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>
<FRAMESET COLS="25%,75%">
<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":

<HTML><HEAD><TITLE>WEB PAGE DESIGN - FRAMES by John C.

Gilson</TITLE></HEAD>
<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":

<HTML><HEAD><TITLE>WEB PAGE DESIGN - FRAMES by John C.

Gilson</TITLE></HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
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>
<FRAMESET COLS="50%,50%">
<FRAME SRC="webpage1.htm">

<FRAMESET ROWS="50%,50%">
<FRAME SRC="webpage2.htm">
 <FRAME SRC="webpage3.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 ROWS="50%,50%">
<FRAME SRC="webpage1.htm">

<FRAMESET COLS="50%,50%">
<FRAME SRC="webpage2.htm">
<FRAME SRC="webpage3.htm">
</FRAMESET>

</FRAMESET>
</HTML>

| Back to the top of the page |

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

| Send me to Lesson Fourteen |

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
[email protected]
 LESSON FOURTEEN - TRANSPARENT IMAGES

You may read the following sections in their entirety

or use these choices to go directly to a section.

| Introducing transparent colors |

| Creating a transparent color using Paint Shop Pro |
| Saving an image 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. 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.
On the right side of the screen should be the Color Palette. If the Color Palette is not in
view, choose View from the Menu bar and then choose ToolBars. This will display the
Toolbars dialog window. Click into the checkbox beside Color Palette to select it. As
soon as you do this, Paint Shop Pro displays the Color Palette. When finished, click on
the Close button.

In the Color Palette, there is a Styles section and a Textures section. In each of these
sections are two rectangles. The top rectangle in each section is for changing the
Foreground of an image and the rectangle underneath it is for changing the Background
of an image. If you move the mouse pointer over a rectangle, the cursor will change into
an eye-dropper and a little box will also pop-up to remind you what the rectangle is used
for. If there is a color in the rectangle, the pop-up box will also give the RGB values. Our
image only has four colors - red, yellow and black with some white around the eyes.

The background color of Smiley is red which we want to make transparent. To do this
we need to display the color red in the background color rectangle in the Styles section.
Here are the steps:

1. In the Styles section, click on the little black arrow in the Background rectangle.
Choose the picture of the paint brush meaning that we want a solid color.
2. Now click on the Background rectangle (not on the arrow). This will display the
Select Color From Palette dialog window. There are not many colors in our
color palette because Smiley does not have many colors. Choose the color red
and then click on OK.
3. Since we are not editing the image, it does not matter what color is in the
foreground color rectangle. Mine is yellow, but yours could contain some other
color. This is what you should have:

What if you do not know the exact color that you want to make transparent? For example,
suppose that the color you want to make transparent is a shade of green. When you click
on the background rectangle in the Styles Section, you get a Color Palette that shows
various shades of green. You are not sure which color to pick that will match exactly the
shade of green you wish to make transparent. Well, there is an easy way to solve the
problem. You can simply let Paint Shop Pro select the color for you. Here are the steps to
let Paint Shop Pro choose the exact color that you wish to make transparent. Again I will
use Smiley as the example.
 1. First click on the Background Color rectangle in the Styles section. This will
display the Select Color From Palette dialog window.
2. Now instead of choosing a color from the Palette, move the cursor over to Smiley.
When the cursor moves over Smiley, it turns into an eye-dropper. Now click on a
color in Smiley and you will see in the Color Palette a rectangle placed around
the color you clicked on. Click on another color and the rectangle moves to that
new color. So if you are not sure of the color, just use the eye-dropper tool.
Now click somewhere in the red area in Smiley to place a rectangle around the
color red.
3. Click on OK and the color red that you picked will be displayed in the
Background Color rectangle.

All we have done so far is to choose the color we wish to make transparent. We now
have to save the image and tell Paint Shop Pro that the color in the Background Color
rectangle is to be transparent. This is done in the next section.

| top | | bottom |

SAVING AN IMAGE USING PAINT SHOP PRO

To save an image in Paint Shop Pro, here are the steps:

1. Choose File and then Save As. 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 that we chose for the transparent
color 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.
8. All the other settings can 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.
9. When ready to proceed, click on OK and the Save Copy As dialog window is
displayed.
10. If you want to change the folder, you can now browse to the folder where you
want to save the new image.
11. 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.
12. Click on Save and the image is saved with the transparent color.
13. 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 this 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.

o Area - lets you control the size of the capture area.
o Full screen - lets you capture the entire screen.
o Client area - lets you capture the workspace of the active window.
o Window - lets you capture the entire active window.
o 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:
o Right mouse click
o Hot key
o 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 standard choice is
F11. If you click into this box, you will see that the two other options are F12 or
Shift+F1. Let's leave the F11 choice selected.
5. In the Option 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:
o Choose File >Import > Screen Capture > Start, or
o Hold down the Shift key and while holding it down, press the C key
(Shift-C), or
o Simply click on the Start Capture button, , located on the toolbar.
4. When you choose one of the above three 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, the 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 follow
the procedures as described in the "Saving an image using Paint Shop Pro"
section. 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 |

| Back to the top of the page |

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

| Send me to Lesson Fifteen |
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
[email protected]
 LESSON FIFTEEN

You may read the following sections in their entirety

or use these choices to go directly to a section.

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

| Creating the animation using GIF Construction Set |
| 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.

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.

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?

| Click here to go to the answer section |

CREATING OUR IMAGES

Here are the steps to create the above animation using Paint Shop Pro:

1. Open Paint Shop Pro.

2. Make sure that the Tool Palette, the Color Palette, and the Tool Options Palette
are in view. If you choose View from the Menu bar and then choose ToolBars to
view the ToolBars dialog window, there should be checkmarks in the little boxes
beside these choices. If a checkmark is missing, just click into the appropriate box
and that Palette will come into view. Click on the Close button to close the dialog
window.
3. 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.
5. In the Image characteristics section, ensure that the Background color is
White. Click on OK.
6. You should now have a new image named Image1 with nothing in it. Just ignore
the name for now.
7. In the Color Palette, there is a Styles section and a Textures section. In each of
these sections are two rectangles. The top rectangle in each section is for changing
the Foreground of an image and the rectangle underneath it is for changing the
Background of an image.
o In the Styles section, click on the Foreground's little black arrow. This
will display four options. Choose Null meaning No Foreground color.
o Click on the little black arrow in the Background rectangle. Choose the
picture of the paint brush meaning that we want a solid color.
o Now click on the Background rectangle (not on the arrow). This will
display the Color palette. Choose the color red and then click on OK.
o In the Textures section, using the above procedure, set both the
Foreground and Background textures to Null since we are not applying
any textures. This is what you should have so far:

8. In the Tool Palette, click on the Text tool (the one with the letter A on it).
9. Move the cursor over the new image and it will change into the Text tool cursor (a
cross-hair with the letter A attached. Click somewhere on the image and the Text
Entry dialog window will be displayed. In the Text Entry dialog window, there
are a number of choices.
o Let's first choose the font for the text. Click on the down arrow in the
Name box and choose Century Gothic. For the Script, choose Western
(which should already be selected).
o For the Font Size, choose 22.
o In the Styles section, click on the little black arrow beside Stroke and
choose Null.
o Click on the black arrow beside Fill and choose Solid so that we will have
a solid color.
o Now click somewhere on the Fill rectangle. This will display the Color
Palette. Choose the color Red and click on OK.
o In the Textures section, choose Null for both the Stroke and Fill as we do
not want to texture the colors.
o In the Create as section, select the radio button beside the word Floating.
This will allow us to cut out one letter at a time from the word
ANIMATION.
 o You are now ready to enter the text. In the Enter text here box, type the
word ANIMATION. This is what you should have so far:

Click on OK (in Paint Shop Pro) as we are finished entering the text
information.

The word ANIMATION should now be in the new image (or at least part of it should be
visible). The word will appear with dashes for letters and with the dashing 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 click on the Paste New Image button in
the standard toolbar (or choose Paste from the Edit menu). 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. 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) and then choosing not
to save the image.
 3. We will now save this new smaller image. Choose File, then Save As.... This will
display the Save As dialog window. Now:
o Choose the folder you want to save these images in.
o Then click into the Save as type box and choose CompuServe Graphics
Interchange (*.gif).
o 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.
o 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.
o Click on OK.
o Click on the Save button to save the image named animat1.gif.
o 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. The Tool Options Palette should still be in view which is currently displaying
the Tool Options - Text palette. If this palette is not in view, click on the View
menu, then choose ToolBars to display all the Toolbars. Now select Tool
Options Palette by placing a checkmark in the box. Click on Close.
3. Now in the Tool Palette 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.
 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.
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.
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

Note: You can also create the animation with Paint Shop Pro. So after you complete this
section using GIF Construction Set, you may also wish to try creating the animation with
Paint Shop Pro. 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.

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:
o 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.
o 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.
o 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.
o 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.
o 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.
 o 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,
o 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.
o 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.
o 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.
o 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.
o 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

9. 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.
10. Click on Next to go to the next screen.
11. 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).
12. 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.
13. 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:
o Click on the checkbox beside Transparent Colour to place an X in the
box.
o 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.
o 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.
o For the Remove By, choose Background so that our animated gif will
have a transparent background.
o 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?

 | Click here to go to the answer section |

| 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 Tool Palette, the Color Palette, and the
Tool Options Palette are in view. If you choose View from the Menu bar and
then choose ToolBars to view the ToolBars dialog window, there should be
checkmarks in the little boxes beside these choices. If a checkmark is missing,
just click into the appropriate box and that Palette will come into view.
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
dimensions are in pixels. Click on OK.
5. In the Tool Palette, 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).
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 click on the Paste New Image button in
the standard toolbar (or choose Paste from the Edit menu). The new image has
now been reduced to the size of the circle with a checker board background. 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 Tool Palette 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.
 11. In the Color Palette, in the Styles section, click on the Foreground color
rectangle. This will display the Color Palette. Choose the color red and click on

OK. The Foreground Color rectangle should now look like .

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.
13. Now save this ball by choosing Save As from the File menu. This will display the
Save As dialog window. Now:
o Choose the folder that you want to save these images in.
o Click into the Save as type box and choose CompuServe Graphics
Interchange (*.gif).
o Also type a name for the ball such as ball1. This will ensure that the image
is saved as ball1.gif.
o 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.
o 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 click on the Paste button. You now have two red balls.
2. Again in the Color Palette, in the Styles section, click on the Foreground color
rectangle. Now choose another color such as Yellow and click on OK. The
Foreground color rectangle 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 close together in shades - for
example two close shades of blue. Some monitors are only able to display sixteen
colors and so may interpret the two shades of blue as the same color.
6. When finished, load GIF Construction Set 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.

| 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.
 LESSON SIXTEEN - FORMS

You may read the following sections in their entirety

or use these choices to go directly to a section.

| 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=Bran
tford
&visitor_state=Ontario&visitor_country=Canada&visitor_code=N3R+7G7&visit
or_email=
[email protected]&visitor_website=https%3A%2F%2Ffanyv88.com%3A443%2Fhttp%2Fwww.bfree.on.ca%2FHTM
L 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:

United States
Country: 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:[email protected]">

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:[email protected]">

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
&[email protected]&visitor_website=https%3A%2F%2Ffanyv88.com%3A443%2Fhttp%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?

| Click here to go to the answer section |

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?

| Click here to go to the answer section |

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 (&nbsp;) 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):
United States
Country:

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.

| Click here to go to the answer section |

| 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?

| Click here to go to the answer section |

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?

| Click here to go to the answer section |

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 METHOD="GET" ACTION="index.htm">

<INPUT TYPE="submit" VALUE="Return to Home Page">
</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">

Note the following points:

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="[email protected]">
<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
&[email protected]&visitor_website=https%3A%2F%2Ffanyv88.com%3A443%2Fhttp%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".

| Back to the top of the page |

 | Return to Home Page | | Return to Alternate Home Page |
| Send me to Lesson Seventeen |

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
[email protected]
 LESSON SEVENTEEN - MORE TEXT
FORMATTING

You may read the following sections in their entirety

or use these choices to go directly to a section.

| 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 NBE LI EVA BLE!

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
This is a font size of 2
This is a font size of 3
This is a font size of 4
This is a font size of 5
This is a font size of 6
This is a font size of 7
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>

Note the following points:

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>

Note the following points:

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

The HTML coding for this statement is:

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.
The HTML coding for this statement is:

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 (&nbsp;) 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.

<!-- your comment goes here -->

Note the following points:

1. A comment begins with "<!--" and ends 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:

<!-- BEGIN LINKEXCHANGE CODE -->

.
.
.

<!-- END LINKEXCHANGE CODE -->

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.

 | Back to the top of the page |

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

| Send me to Lesson Eighteen |

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
[email protected]
 LESSON EIGHTEEN - INDEX OF HTML 2.0 AND
HTML 3.2 TAGS
You may read the following sections in their entirety
or use these choices to go directly to a section.

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

<!-->, <A>, <ADDRESS>, <B>, <BASE>, <BLOCKQUOTE>, <BODY>, <BR>,

<CITE>, <CODE>, <DD>, <DIR>, <DL>, <DT>, <EM>, <FORM,> <H1>, <H2>,
<H3>, <H4>, <H5>, <H6>, <HEAD>, <HR>, <HTML>, <I>, <IMG>, <INPUT>,
<ISINDEX>, <KBD>, <LI>, <LINK>, <MENU>, <META>, <OL>, <OPTION>, <P>,
<PRE>, <SAMP>, <SELECT>, <STRONG>, <TEXTAREA>, <TITLE>, <TT>, <UL>,
<VAR>

The following is an alphabetical listing of these HTML 2.0 tags along with a statement
when each tag is used. A click on the tag name will take you to the lesson where the tag
is first introduced.

<!--> - 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
<H2> - To create a level 2 header
<H3> - To create a level 3 header
<H4> - To create a level 4 header
<H5> - To create a level 5 header
<H6> - To create a level 6 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.

<!-->, <A>, <ADDRESS>, <APPLET>, <AREA>, <B>, <BASE>, <BASEFONT>,

<BIG>, <BLOCKQUOTE>, <BODY>, <BR>, <CAPTION>, <CENTER>, <CITE>,
<CODE>, <DD>, <DFN>, <DIR>, <DIV>, <DL>, <DT>, <EM>, <FONT>, <FORM>
<H1>, <H2>, <H3>, <H4>, <H5>, <H6>, <HEAD>, <HR>, <HTML>, <I>, <IMG>,
<INPUT>, <ISINDEX>, <KBD>, <LINK>, <LI>, <MAP>, <MENU>, <META>,
<OL>, <OPTION>, <P>, <PARAM>, <PRE>, <SAMP>, <SCRIPT>, <SELECT>,
<SMALL>, <STRIKE>, <STRONG>, <STYLE>, <SUB>, <SUP>, <TABLE>, <TD>,
<TEXTAREA> <TH>, <TITLE>, <TR>, <TT>, <U>, <UL>, <VAR>

Below is an alphabetical listing of these HTML 3.2 tags along with a statement when
each tag is used. A click on the tag name will take you to the lesson where the tag is first
introduced.

<!--> - To insert an invisible comment

<A> - To create a link or anchor
<ADDRESS> - To indicate address information
<APPLET> - To insert an applet
<AREA> - To specify the coordinates of an image map
<B> - To display text in boldface
<BASE> - To specify the URL of the document used to generate any relative URLs
<BASEFONT> - To change the default font size throughout the entire page
<BIG> - To make text bigger than the surrounding text
<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
<CAPTION> - To create a caption for a table
<CENTER> - To center text, images and other elements
<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
<DFN> - To indicate the definition of a term when used for the first time
<DIR> - To create a directory list
<DIV> - To divide a page into logical sections
<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
<FONT> - To change the size, face and color of individual letters or words
<FORM> - To create an input form
<H1> - To create a level 1 header
<H2> - To create a level 2 header
<H3> - To create a level 3 header
<H4> - To create a level 4 header
<H5> - To create a level 5 header
<H6> - To create a level 6 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
<MAP> - To create a client-side image map
<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
<PARAM> - To transfer a parameter to an applet
<PRE> - To create preformatted text
<SAMP> - To display sample text that should be used literally
<SCRIPT> - To create an in-line script
<SELECT> - To create a menu in a form
<SMALL> - To make text smaller than the surrounding text
<STRIKE> - To display text with a line through it (same as <S>)
<STRONG> - To strongly emphasize text, usually in boldface
<STYLE> - To set up style information
<SUB> - To create a subscript
<SUP> - To create a superscript
<TABLE> - To create a table
<TD> - To create a regular cell in a table
<TEXTAREA> - To create a block area for text input in a form
<TH> - To create a header cell in a table
<TITLE> - To create the document title
<TR> - To create a new row in a table
<TT> - To display text in a monospaced teletype font
<U> - To place a line underneath text
<UL> - To create an unordered list
<VAR> - To indicate that the text is a variable

| top | | bottom |

GROUPING THE TAGS

Here is a breakdown of the HTML 3.2 elements into groups beginning with the elements
that, if used, must be placed in the HEAD section of the HTML document.

Elements for the HEAD section

The HEAD section of a document may only contain the following elements. If any other
elements or plain text occur inside the HEAD section, the browser will assume the
HEAD section has ended and that the BODY section has started.

<BASE> - To specify the URL of the document used to generate any relative URLs
<ISINDEX> - To create a primitive search
<LINK> - To define relationships between documents and to link to an external style
sheet
<META> - To create an automatic page jump plus also used for document information
<SCRIPT> - To create an in-line script
<STYLE> - To set up style information
<TITLE> - To create the document title

Elements for the BODY section

There are two types of elements in the BODY section 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 (also called in-line elements) are elements that do not generate a new paragraph
(examples are <EM> and <STRONG>).

Block-level elements

The BODY of a document consists of multiple block-level elements. Here are the block-
level elements:

Headings

<H1> - To create a level 1 header

<H2> - To create a level 2 header
<H3> - To create a level 3 header
<H4> - To create a level 4 header
<H5> - To create a level 5 header
<H6> - To create a level 6 header

Lists

<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
<LI> - To create a list item
<MENU> - To create a menu item list
<OL> - To create an ordered list
<UL> - To create an unordered list
Text containers

<ADDRESS> - To indicate address information

<BLOCKQUOTE> - To indicate that a block of text is a quotation
<P> - To create a new paragraph
<PRE> - To create preformatted text

Others

<CENTER> - To center text, images and other elements

<DIV> - To divide a page into logical sections
<FORM> - To create an input form
<HR> - To create a horizontal line (horizontal rule)
<TABLE> - To create a table

Text-level elements

These elements are used to mark up text inside block-level elements.

Logical markup

<CITE> - To indicate that the text is a short citation

<CODE> - To indicate text is a computer code
<DFN> - To indicate the definition of a term when used for the first time
<EM> - To emphasize text, usually in italics
<KBD> - To indicate text from a keyboard
<SAMP> - To display sample text that should be used literally
<STRONG> - To strongly emphasize text, usually in boldface
<VAR> - To indicate that the text is a variable

Physical markup

<B> - To display text in boldface

<BIG> - To make text bigger than the surrounding text
<I> - To display text in italics
<SMALL> - To make text smaller than the surrounding text
<STRIKE> - To display text with a line through it (same as <S>)
<SUB> - To create a subscript
<SUP> - To create a superscript
<TT> - To display text in a monospaced teletype font
<U> - To place a line underneath text

Special markup

<A> - To create a link or anchor

<APPLET> - To insert an applet
<AREA> - To specify the coordinates of an image map
<BASEFONT> - To change the default font size throughout the entire page
<BR> - To create a line break
<FONT> - To change the size, face and color of individual letters or words
<IMG> - To place an image on the web page
<MAP> - To create a client-side image map
<PARAM> - To transfer a parameter to an applet

Forms

<INPUT> - To create a form element such as an input field, button, etc.

<OPTION> - To create individual options in a form menu
<SELECT> - To create a menu in a form
<TEXTAREA> - To create a block area for text input in a form

Tables

<CAPTION> - To create a caption for a table

<TD> - To create a regular cell in a table
<TH> - To create a header cell in a table
<TR> - To create a new row in a table

| top | | bottom |

TAGS IN HTML 3.2 THAT ARE NOT PART OF HTML 2.O

The following is a list of tags that are part of HTML 3.2 but not part of HTML 2.0.

<APPLET> - To insert an applet

<AREA> - To specify the coordinates of an image map
<BASEFONT> - To change the default font size throughout the entire page
<BIG> - To make text bigger than the surrounding text
<CAPTION> - To create a caption for a table
<CENTER> - To center text, images and other elements
<DIV> - To divide a page into logical sections
<DFN> - To indicate the definition of a term when used for the first time
<FONT> - To change the size, face and color of individual letters or words
<MAP> - To create a client-side image map
<PARAM> - To transfer a parameter to an applet
<SCRIPT> - To create an in-line script
<SMALL> - To make text smaller than the surrounding text
<STRIKE> - To display text with a line through it (same as <S>)
<STYLE> - To set up style information
<SUB> - To create a subscript
<SUP> - To create a superscript
<TABLE> - To create a table
<TD> - To create a regular cell in a table
<TH> - To create a header cell in a table
<TR> - To create a new row in a table
<U> - To place a line underneath text

| top | | bottom |

ALPHABETICAL INDEX OF HTML 3.2 TAGS INCLUDING THE

ATTRIBUTES

We will conclude this lesson with an alphabetical listing of HTML 3.2 tags along with
their attributes if applicable. For any tag that has one or more attributes, the attributes
are bulleted and immediately follow the tag. A click on the tag name will take you to the
lesson where the tag is first introduced.

<!--> - To insert an invisible comment

<A> - To create a link or anchor

• HREF - To specify the URL of the page or the name of the anchor that the link
goes to
• NAME - To mark the specific area of the page that a link is to jump to

<ADDRESS> - To indicate address information

<APPLET> - To insert an applet

• CODE - To specify the URL of the applet's code

• HEIGHT - To specify the height of the applet
• WIDTH - To specify the width of the applet

<AREA> - To specify the coordinates of an image map

• COORDS - To give the coordinates of the area in an image map

• HREF - To specify the destination URL of the link of an area in the image map
• NOHREF - To make the click in the area in the image map have no effect
• SHAPE - To specify the shape of the area in an image map
• TARGET - To specify the window or frame that the link must be displayed in

<B> - To display text in boldface

<BASE> - To specify the URL of the document used to generate any relative URLs
<BASEFONT> - To change the default font size throughout the entire page

• SIZE - To change the size of text throughout the page

<BIG> - To make text bigger than the surrounding text
<BLOCKQUOTE> - To indicate that a block of text is a quotation
<BODY> - To enclosed the main section of a web page

• ALINK - To specify the color of active links

• BACKGROUND - To specify a background image
• BGCOLOR - To specify the background color
• LINK - To specify the color of new links
• TEXT - To specify the color of text
• VLINK - To specify the color of visited links

<BR> - To create a line break

• CLEAR - To stop text wrap on one or both sides of an image

<CAPTION> - To create a caption for a table

• ALIGN - For placing a caption above or below the table

<CENTER> - To center text, images and other elements

<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
<DFN> - To indicate the definition of a term when used for the first time
<DIR> - To create a directory list
<DIV> - To divide a page into logical sections

• ALIGN - To align a given section to the left, right or center

• CLASS - To give a name to each of the sections

<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
<FONT> - To change the size, face and color of individual letters or words

• COLOR - To change the text color

• FACE - To change the text font
• SIZE - To change the text size

<FORM> - To create an input form

• ACTION - To give the URL of the CGI script for the form
• METHOD - To determine how the form is to be processed

<H1> - To create a level 1 header

 • ALIGN - To align the header

<H2> - To create a level 2 header

• ALIGN - To align the header

<H3> - To create a level 3 header

• ALIGN - To align the header

<H4> - To create a level 4 header

• ALIGN - To align the header

<H5> - To create a level 5 header

• ALIGN - To align the header

<H6> - To create a level 6 header

• ALIGN - To align the header

<HEAD> - To create the head section of the web page

<HR> - To create a horizontal line (horizontal rule)

• ALIGN - To align the horizontal rule

• NOSHADE - To display the horizontal rule without shading
• SIZE - To specify the height of the horizontal rule
• WIDTH - To specify the width of the 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

• ALIGN - To align the image and for wrapping text around the image
• ALT - To give alternative text that will be displayed if the image is not displayed
• HSPACE - To specify the amount of space above and below the image
• LOWSRC - To specify the URL of the low resolution version of the image
• SRC - To specify the URL of the image
• USEMAP - To specify the image map that should be used with the referenced
image (Lesson 20)
• VSPACE - To specify the amount of space to the sides of the image
• WIDTH, HEIGHT - To specify the size of the image so that the web page is
loaded more quickly, or for scaling the image

<INPUT> - To create a form element such as an input field, button, etc.

 • CHECKED - To mark a radio button or a check box by default
• MAXLENGTH - To determine the maximum number of characters that can be
entered in a form element
• NAME - To identify the data collected by the element
• SIZE - To specify the width of a text box or password box.
• SRC - To specify the URL of the active image
• TYPE - To name the type of form element
• VALUE - To specify the data of the form element that will be sent to the server

<ISINDEX> - To create a primitive search

<KBD> - To indicate text from a keyboard
<LI> - To create a list item

• TYPE - To specify the symbol for this and the following list items
• VALUE - To specify the initial value for this and the following list items

<LINK> - To define relationships between documents and to link to an external style

sheet
<MAP> - To create a client-side image map

• NAME - To name the map so it can be referenced later

<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

• START - To specify the initial value of the first list item

• TYPE - To specify the symbol to begin each list item

<OPTION> - To create individual options in a form menu

• SELECTED - To make a menu option be selected by default in a blank form

• VALUE - To specify the initial value of a menu option

<P> - To create a new paragraph

• ALIGN - To align the paragraph

<PARAM> - To transfer a parameter to an applet

<PRE> - To create preformatted text
<SAMP> - To display sample text that should be used literally
<SCRIPT> - To create an in-line script
<SELECT> - To create a menu in a form

• MULTIPLE - To allow users to choose more than one option in the menu
• NAME - To identify the data collected by the menu
 • SIZE - To specify the number of items initially visible in the menu

<SMALL> - To make text smaller than the surrounding text

<STRIKE> - To display text with a line through it (same as <S>)
<STRONG> - To strongly emphasize text, usually in boldface
<STYLE> - To set up style information
<SUB> - To create a subscript
<SUP> - To create a superscript
<TABLE> - To create a table

• BORDER - To specify the thickness, if any, of the table border

• CELLPADDING - To specify the amount of space between a cell's contents and
its borders
• CELLSPACING - To specify the amount of space between cells
• WIDTH, HEIGHT - To specify the size of the table

<TD> - To create a regular cell in a table

• ALIGN - To align a cell's contents horizontally

• BGCOLOR - To change the background color of a cell
• COLSPAN - To span a cell across more than one column
• NOWRAP - To keep a cell's contents on one line
• ROWSPAN - To span a cell across more than one row
• VALIGN - To align a cell's contents vertically
• WIDTH, HEIGHT - To specify the size of the cell

<TEXTAREA> - To create a block area for text input in a form

• NAME - To identify the data that is gathered with the text block
• ROWS - To specify the number of rows in the text block
• COLS - To specify the number of columns in the text block

<TH> - To create a header cell in a table

• ALIGN - To align a cell's contents horizontally

• BGCOLOR - To change the background color of a cell
• COLSPAN - To span a cell across more than one column
• NOWRAP - To keep a cell's contents on one line
• ROWSPAN - To span a cell across more than one row
• VALIGN - To align a cell's contents vertically
• WIDTH, HEIGHT - To specify the size of the cell

<TITLE> - To create the document title

<TR> - To create a new row in a table

• ALIGN - To align the contents of the row horizontally

 • BGCOLOR - To change the color of the entire row
• VALIGN - To align the contents of the row vertically

<TT> - To display text in a monospaced teletype font

<U> - To place a line underneath text
<UL> - To create an unordered list

• TYPE - To specify the symbol to begin each list item

<VAR> - To indicate that the text is a variable

| top | | bottom |

THE FRAME TAG

The FRAME element is not part of HTML 2.0 or HTML 3.2. However, both higher level
Netscape and Explorer browsers do support frames making frames increasingly popular
among web page designers. So here are the tags and attributes associated with frames that
are supported by both Netscape and Internet Explorer:

<FRAME> - To create frames

• FRAMEBORDER - To display or hide frame borders

• MARGINHEIGHT - To specify a frame's top and bottom margins
• MARGINWIDTH - To specify a frame's left and right margins
• NAME - To name a frame so that it can be used as a target
• NORESIZE - To keep visitors from resizing a frame
• SCROLLING - To display or hide a frame's scrollbars
• SRC - To specify the initial URL to be displayed in a frame

<FRAMESET> - To define a frameset

• COLS - To determine the number and size of frames

• FRAMEBORDER - To display or hide frame borders
• ROWS - To determine the number and size of frames

<NOFRAMES> - To provide an alternative to frames for browsers that do not recognize

them

| Back to the top of the page |

 | Return to Home Page | | Return to Alternate Home Page |
| Send me to Lesson Nineteen |

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
[email protected]
 LESSON NINETEEN - THE REMAINING TAGS
You may read the following sections in their entirety
or use these choices to go directly to a section.

| Introduction | | BASE, DIR, ISINDEX, LINK, MENU and META tags |

| APPLET, DIV, DFN, PARAM, SCRIPT, STRIKE and STYLE tags |
| Printing this lesson |

Note: Some people like to print out these lessons on paper. If you tried to print this lesson
and your browser gave you an error message, then go to the section titled "Printing this
lesson".

INTRODUCTION

There are still a few tags found in both HTML 2.0 and HTML 3.2 that have not been
discussed in any of the previous lessons. Some of these tags are seldom used. However, it
would still be good to take some time and learn just what these tags are all about. The
first group of tags is part of HTML 2.0 (which also makes it part of HTML 3.2) and the
second group of tags is part of HTML 3.2 (and not part of HTML 2.0).

| top | | bottom |

BASE, DIR, ISINDEX, LINK, MENU and META TAGS

These tags all belong to HTML 2.0 and complete the discussion on HTML 2.0 tags.

<BASE>

The BASE tag is used in locating HTML documents. To understand the BASE tag, we
first need to understand what a relative URL is. If I were to give you directions to a
friend's house in my town, I might say, "My friend lives on Main Street, four houses
down from Elm Street. This is a relative address where the location is given relative to
another location. The starting point for the address is given relative to a BASE location
which is at Elm Street. That is, where the relative address points to depends on where the
information is given from. With the same information given in a different town, you
would never find the house.

The opposite of a relative address is an absolute address. An absolute address would be

analogous to a complete mailing address, including name, street and number, city, state,
zip code and country. If you were to send a letter, no matter which city or town the letter
is sent from, it will find the address. The mail service needs no other information.

In terms of URLs, a relative URL gives the location of a document or file relative to the
location of a base URL such as of a directory (also called a folder). You use the BASE
tag to define the base URL of the directory. All relative URL's in the document are
resolved against this base URL.

An absolute URL, on the other hand, gives the entire path to the document or file,
including the protocol, the server name, the complete path and the document or file name
itself. The most common protocol is http which stands for HyperText Transfer Protocol.
It is usually followed by a colon (:) and two forward slashes (//) as in http://.

The BASE tag is placed in the HEAD section of the HTML document (just like the
TITLE tag is placed in the HEAD section).

For example, if the BASE directory's URL (placed in the HEAD section) is:

<BASE HREF="http://www.htmltutorials.ca/">

then all relative URL's contained in the HTML document will be built using this URL as
a reference. So if the relative URL is:

<A HREF="lesson19.htm">

then this corresponds with the complete URL:

<A HREF="http://www.htmltutorials.ca/lesson19.htm">

You can also use relative URL's to go a level higher in the directory structure. For
example, if the BASE URL is:

<BASE HREF="http://www.htmltutorials.ca/">

then,

<A HREF="../lesson19.htm">

would correspond with the complete URL:

<A HREF="http://www.bfree.on.ca/lesson19.htm">

The "../" implies a directory one level up in the hierarchy.

You can also use relative URL's to go a level down, that is, a subdirectory of the current
directory. For example, if the BASE URL was:
<BASE HREF="http://www.htmltutorials.ca/">

then,

<A HREF="/index/lesson19.htm">

would correspond with the full URL:

<A HREF="http://www.htmltutorials.ca/index/lesson19.htm">

The BASE tag is used to indicate the correct location of a document or file on the server.
Normally the browser already knows this location. Therefore, it should not be necessary
to use this tag. Use it only if relative URL's won't work otherwise.

<DIR>

The DIR element is similar to the UL (Unordered List) element. DIR stands for
DIRectory list and it is used to produce a bulleted list of short items, typically up to 20
characters each. The format is:

<DIR>
<LI>
</DIR>

where each item is specified using <LI>. That is, <DIR> puts the enclosed items marked
with a <LI> in a directory listing. Items in a directory list may be arranged in columns,
typically 24 characters wide. DIR is seldom used and most HTML books do not even
mention this tag. This is because the three most recognized ways by browsers to organize
lists are OL (ordered list), UL (unordered list) and DL (definition list).

<ISINDEX>

<ISINDEX> is used in primitive searches. The format for this tag is:

<ISINDEX PROMPT="string" ACTION="location of CGI program">

The ISINDEX tag is placed in the HEAD section of the document and was used before
the FORM tag became popular. Today, this tag has been all but replaced by forms. The
ISINDEX tag was popular for simple searches using HTML and CGI scripts. When
<ISINDEX> is inserted into a document, it will allow the viewer to enter keywords
which are then sent to the server. The server then executes a search and returns the
results. The ISINDEX tag displays a text dialogue box indicating the presence of a
searchable index. The PROMPT attribute can be used to override the default message in
the dialogue box which is usually something like: "Enter search keywords". The default
search prompt often varied from browser to browser and wasn't relevant to what the
author wanted you to enter into the field. The prompt attribute got around that problem as
in:

<ISINDEX PROMPT="Enter your height:">

or

<ISINDEX PROMPT="Enter your numbers, separated by commas:">

The ISINDEX tag should be inserted by the server if the document can be searched on
the server (for example, if the document is generated with a CGI script). Just inserting the
ISINDEX tag will not make the document searchable. The server must be set up to
support it. For more flexibility, use a FORM instead.

<LINK>

Not many browsers support the LINK tag although it has some usefulness in site
maintenance and in style sheets. The LINK tag is placed in the HEAD section of the
HTML document.

In site maintenance, the LINK tag can be used to indicate the relationship between the
current document and another document. For this role, LINK has three attributes:

1. REL which defines the RELationship between the current document and another
document.
2. REV which defines a REVerse relationship between another document and the
current document.
3. HREF whose value is the URL of the other document.

The values of the REL and REV attributes are varied. Let's take a brief look at the first
two attributes beginning with the REV attribute.

REV

The most common use of the LINK tag is the following which indicates the author of the
document:

<LINK REV="made" HREF="mailto:[email protected]">

where the value of HREF is the mailto: command containing the e-mail address of the
author.
Some browsers, such as LYNX, can use this statement to send comments to the author of
the HTML document

REL

Another use of LINK is to create tool bars for common elements of documents, such as
REL values of home, next, previous, copyright, stylesheet, etc. By using these values, the
browser can automatically generate tool bars or button bars in the window header or
elsewhere that link to those documents. For example,

<LINK REL="home" HREF="URL of home page">

indicates the location of the current website's home page. A click on the tool bar or
button would load the home page.

Similarly, we have:

REL="toc"
indicates the location of the table of contents, or overview of the website.

REL="index"
indicates the location of the index which does not have to be the same as the table of
contents. The index could be alphabetical for example.

REL="glossary"
indicates the location of a glossary of terms for the website.

REL="copyright"
indicates the location of the page with copyright information for the site.

REL="help"
indicates the location of a help file for the website - which can be useful if the website is
complex or if the current document requires additional explanations (for example, a large
form to fill in).

REL="up"
indicates the location of the document which is up one level from the current document.

REL="next"
indicates the location of the next document in the series relative to the current document.

REL="previous"
indicates the location of the previous document in a series relative to the current
document.

Still another use of the LINK attribute is in style sheets. For example,
REL="stylesheet"
points to an external style sheet. It allows the current HTML document to use an external
style sheet. Style sheets are a new way to easily and effectively customize web pages in
ways that were not possible before. Please see the section on the STYLE tag for a little
more information on style sheets.

<MENU>

The MENU element produces a list like <UL> (a bulleted list). The format is:

<MENU>
<LI>
</MENU>

MENU puts the enclosed items marked with <LI> in a menu list. The list items should
be displayed in a more compact form. Not all browsers make this distinction and some
will print the list items without bullets. As with the <DIR> element described above,
<MENU> is also seldom used and most HTML books do not mention this tag.

<META>

The META tag is used to automatically move the visitor from one web page to another (a
page jump). You can even use it to create a web slide show. The following is an example
of a page jump where the visitor is automatically sent to another page without having to
do anything. This situation often occurs when a web page has been moved to another
address (a new URL). If you had bookmarked the old URL, the browser would of course
load the old page and the old page will load the new page. You are then expected to
bookmark the new URL. To see how this works, SWITCH to NOTEPAD and type in
the following HTML document exactly as you see it:

<HTML>
<HEAD>
<META HTTP-EQUIV="refresh" CONTENT="10; URL=index.htm">
</HEAD>
<BODY>
This URL has moved. Wait 10 seconds and you will automatically be taken to my new
URL called "index.htm" or <A HREF="index.htm">click here to go there now.</A>
</BODY>
</HTML>

Now save this HTML document using a suitable name (if you can't think of one, use
"jump.htm"). Then SWITCH back to your browser, load the document and observe what
happens (assuming that you are still on-line or that "index.htm" (which is my home page)
is in your working directory). Note that if you don't click on the instructional words,
"click here to go there now", the document called "index.htm" will automatically load
after 10 seconds (which could actually be longer depending on the speed of your browser
and the busyness of the server you are accessing). In an actual situation, you may not
want the visitor to wait 10 seconds. Five seconds may be long enough.

Note:

1. This META tag is often called "meta refresh" which causes the document given
in the URL to be loaded after a specified number of seconds as stated in the value
of the CONTENT attribute (10 seconds in the above example).
2. Make sure you use a display time that is long enough for your page to appear on
the screen and be read by the visitor. Do not use a display time of "zero" seconds
(CONTENT="0;) because then the visitor will not be able to go "back" with his
BACK button. As soon as he is back to the page with the "refresh" he will be
redirected to the page he is trying to get away from.
3. This use of the META tag works with both Netscape and Internet Explorer (and
will work with other browsers as well), both on Windows and Macs.
4. You can create a series of links to show a portfolio or a series of images without
having to create a lot of links and buttons by placing a META tag on each of
those pages.

ANOTHER USE FOR THE META TAG

The META tag is especially very important to include in your HTML document if you
plan to submit the URL to the search engines. This tag, located in the HEAD section, is
used to give a description of your web page or of your website to the search engines. It is
also used to pass on your website's keywords to these search engines (such as "Alta
Vista" and "Infoseek"). All this submitted information is called meta information.

Here are two META tags as found on my home page in relation to the HEAD and TITLE
tags. Note the order of these tags. They have been placed in order from the most
important to the least important. In other words, the TITLE tag is the most important tag
as all search engines recognize this tag and will utilize the information found in it. The
Keywords META tag is a little less important than the TITLE tag but a little more
important than the Description META tag. Other META tags can follow the Description
META tag. If you want to see some other META tags you can go to my home page and
choose "Source" or "Document Source" from the "View" menu.

<HEAD>
<TITLE>html tutorials in web page design</TITLE>
<META NAME="Keywords" CONTENT="html tutorials, html lessons, html help, web
page design, html 3.0, html 3.2, html 4.0">
<META NAME="Description" CONTENT="HTML tutorials and lessons in web page
design. Design your own website with over 30 easy to follow interactive html tutorials in
web page design.">
</HEAD>
<BODY>

Note that each META tag is given with NAME and CONTENT attributes along with
their values.

| top | | bottom |

APPLET, DIV, DFN, PARAM, SCRIPT, STRIKE and STYLE TAGS

These tags are new to HTML 3.2 and have not been discussed in previous lessons.

<APPLET> AND <PARAM> TAGS

<APPLET>

The APPLET element is used to set up a Java applet. Java applets are little
applications (hence the term applets) 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. These applets are written in a language called Java and can be
included in an HTML document, much as an image can be included. When you use a
Java compatible browser to view a web page that contains a Java applet, the applet's code
is transferred and executed by the browser.

There are many books devoted entirely to Java so I will only show you how to insert
applets on your web page once you have written them or copied them from another
source. To insert an applet, use the format:

<APPLET CODE="applet.class" WIDTH="100" HEIGHT="150"></APPLET>

where "applet.class" is the name of the applet and the WIDTH and HEIGHT attributes
specify the size of the applet. Note that the extension for an applet is .class.

Suppose the applet is a clock that will be placed on your web page. Since this clock is an
image (a picture), it can be treated as an image. Thus you can use the same attributes
with the APPLET tag as you can with the IMG tag except for SRC and attributes that
deal with image maps. Note that the location (URL) of the applet is indicated with
CODE instead of SRC.

The APPLET attributes give the browser information about the applet. The only
attributes that must be included are CODE, WIDTH and HEIGHT. Thus for the applet
clock we could have something like:

<APPLET CODE="clock.class" WIDTH="150" HEIGHT="125"></APPLET>

This statement tells the browser to load the applet whose compiled code is named
"clock.class" located in the same directory as the current HTML document and to set the
size of the applet to 150 pixels wide and 125 pixels high.

Here are the attributes that can be used with the APPLET tag:

• ALIGN with values left, center, right, top, middle, or bottom as in:
ALIGN="center".
• ALT to specify the text to be displayed by browsers that recognize the APPLET
tag but cannot run Java applets. Not all browsers support Java and those that do
often allow the user to disable it. So always provide alternate text so that your
visitors get something when they can't see the applet. If a browser doesn't
recognize the APPLET tag at all, it will simply ignore the tag.
• CODE to specify the name (location) of the Java applet (instead of SRC).
• CODEBASE to specify the base URL of the applet, that is, the directory that
contains the applet's code (similar to the BASE element for HTML documents).
Other classes for this applet will be searched at the location indicated in
CODEBASE. For example,

<APPLET CODEBASE="http://www.htmltutorials.ca/applets/"
CODE="biorhythm.class" WIDTH="400" HEIGHT="350">

tells the browser to load the applet whose compiled code is at the URL
http://www.htmltutorials.ca/applets/biorhythm.class and to set the size of the
applet at 400x350 pixels. Now if the CODEBASE attribute is not used, then the
document's URL is used.

• HEIGHT to specify the height of the applet either in pixels or as a percent of the
screen.
• HSPACE to specify the left and right margins of the outside of the applet in
pixels.
• NAME to specify the name of the applet instance - in case there is more than one
instance of the same applet on the page. This makes it possible for applets on the
same page to communicate with each other.
• VSPACE to specify the top and bottom margins of the outside of the applet in
pixels.
• WIDTH to specify the width of the applet either in pixels or as a percent of the
screen.

<PARAM>

If there are parameters that need to be passed on as arguments to the applet, then they
are done as NAME/VALUE pairs in a PARAM tag located between the opening and
closing APPLET tags. These arguments then take the form:

<PARAM NAME="name of argument" VALUE="value of argument">

For example, here is an example of an APPLET element that works out your biorhythm
that involves passing on parameters to the applet such as your birth date and other
information. The actual compiled applet code that works everything out would be stored
on the server in the same directory as the HTML document containing these statements:

Biorhythm Estimator
<APPLET CODE="Biorhythm.class" WIDTH="550" HEIGHT="220">
<PARAM NAME="Copyright" VALUE="name of person and e-mail address">
<PARAM NAME="BeginDate" VALUE="10">
<PARAM NAME="EndDate" VALUE="20">
<PARAM NAME="BackGroundColor" VALUE="#ffffff">
</APPLET>

The names and values are case sensitive so be sure you write the parameters in the
correct case.

As stated above with the ALT attribute, if a browser understands (that is, recognizes) the
APPLET tag but can't run the Java applet for some reason, it will display the text found
in the ALT attribute and if the browser can't understand the APPLET tag at all, it will
simply ignore the tag. Now if a browser does not recognize the APPLET tag, it would be
good to let the viewer know this. You can do this with alternate text between the
<PARAM> and </APPLET> tags as in (I have also included the ALT attribute in this
example):

Biorhythm Estimator
<APPLET CODE="Biorhythm.class" WIDTH="550" HEIGHT="220"> ALT="Your
browser understands the APPLET tag but for some reason isn't running the applet.
<PARAM NAME="Copyright" VALUE="name of person and e-mail address">
<PARAM NAME="BeginDate" VALUE="10">
<PARAM NAME="EndDate" VALUE="20">
<PARAM NAME="BackGroundColor" VALUE="#ffffff">
<HR>Your browser is completely ignoring the APPLET tag! If you were using a Java
enabled browser, you would see the Biorhythm Estimator Chart instead of these two
sentences.<HR>
</APPLET>

There are many places on the web where you can download freeware Java applets and
also get more information on Java applets. Here is one interesting website to visit:
http://www.javasoft.com/. For other sites, just go to your favorite search engine and do
a search for Java applets.

You can also download a Java Development Kit (JDK) from this same "javasoft"
website. It is available for both MAC and Windows. Even if you do not know how to
write Java applets, you can still use JDK to make minor changes to existing applets. You
make the desired change and then compile the new class file with the Java Compiler that
is part of JDK.
<DIV>

The DIV container element is used to mark up divisions in a document. With HTML 3.2,
you can only use it to set the default alignment for all enclosed block elements. It takes
the attribute ALIGN with values LEFT, RIGHT and CENTER. That is, just like with
other block elements such as <P> or a header tag such as <H1>, you can specify left,
right and centered alignments (for example, <DIV ALIGN="CENTER">). However,
instead of:

<DIV ALIGN="CENTER">

use

<CENTER>

as they are considered identical. That is, <CENTER> is shorthand for <DIV
ALIGN="CENTER"> and the CENTER element is more widely supported.

<DFN>

DFN stands for DeFiNition. It is a logical tag used to define or markup a term when the
term is used for the first time. This tag could have been grouped with the other logical
tags from Lesson Seventeen (ADDRESS, CITE, CODE, KBD, SAMP, VAR, etc.).
However these tags are all HTML 2.0 tags while DFN is not. DFN was added to HTML
3.2.

DFN usually renders the term in italics so the visitor can see that this is where the term is
used for the first time. The text is formatted to look like a definition. However, not all
browsers recognize this element and those that do not will simply ignore the tag. Here is
the DFN tag at work. If you see no difference then your browser does not support this
tag.

An Absolute URL shows the entire path to the file, including the protocol, the server
name, the complete path and the file name itself.

Here is the HTML coding for this statement:

An <DFN>Absolute URL</DFN> shows the entire path to the file, including the
protocol, the server name, the complete path and the file name itself.

You can also enclose the entire definition between the opening and closing DFN tags.
<SCRIPT>

The SCRIPT element is used for inline scripts. That is, it is used to contain scripts. This
tag is placed in the HEAD section of an HTML document and the format is:

<SCRIPT attribute> ... script statements ... </SCRIPT>

The SCRIPT element should contain a valid script such as a JavaScript. In HTML 3.2,
however, nothing is done with the text (script) inside this element (that is, the script is
simply hidden between these tags). You should see newer versions of HTML include
support for inline scripts such as the browser executing the enclosed scripting language.
Note that not all browsers support the SCRIPT element. Those that do not will not hide
the tag's contents. Therefore, if you need a script in your document, put them inside
HTML comment 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.

| Back to the top of the page |

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

| Send me to Lesson Twenty |

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
[email protected]
 LESSON TWENTY-ONE
FUN WITH JAVASCRIPT
You may read the following sections in their entirety
or use these choices to go directly to a section.

| 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.
o 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.
o 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".
o 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.
o 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">

Note the following points:

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>
<TITLE>Java Fun</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide the JavaScript from older browsers
document.write(confirm("Do you like this website of HTML lessons?"))
document.write("<BR>")
document.write(prompt("Which lesson is your favorite?"))
// End hiding of script -->
</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?

| Click here to go to the answer section |

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: <!-- Hide the JavaScript from older browsers
Line 9: document.write(confirm("Do you like this website of HTML lessons?"))
Line 10: document.write("<BR>")
Line 11: document.write(prompt("Which lesson is your favorite?"))
Line 12: // End hiding of script -->
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 <!-- and line 12 closes the comment 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?

| Click here to go to the answer section |

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:

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide the JavaScript from older browsers
confirm("Do you like this website of HTML lessons?")
prompt("Which lesson is your favorite?")
// End hiding of script -->
</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?

| Click here to go to the answer section |

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:

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide the JavaScript from older browsers
alert("I sure hope you bookmarked this website!")
confirm("Do you like this website of HTML lessons?")
prompt("Which lesson is your favorite?")
// End hiding of script -->
</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>
<TITLE>Java Fun</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">

<FONT COLOR="#FF00FF"><H2 ALIGN="center">

<SCRIPT LANGUAGE="JavaScript">
<!-- 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!")

// End hiding of script -->

</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 3: <TITLE>Java Fun</TITLE>
Line 4: </HEAD>
Line 5: <BODY BGCOLOR="#FFFFFF" TEXT="#000000">
Line 6:
Line 7:<FONT COLOR="#FF00FF"><H2 ALIGN="center">
Line 8: <SCRIPT LANGUAGE="JavaScript">
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 16: // End hiding of script -->
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 ")?

| Click here to go to the answer section |

| 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 Fri Jul 25 21:54:49 2003

Please switch to your word processor and enter the following lines that give this output.
<HTML>
<HEAD>
<TITLE>Java Fun</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">

<H3 ALIGN="center">
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide the JavaScript from older browsers
document.write("Hope you are having a great day!")
document.write("<BR>")
document.write("Today's date is ",Date())
// End hiding of script -->
</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 3: <TITLE>Java Fun</TITLE>
Line 4: </HEAD>
Line 5: <BODY BGCOLOR="#FFFFFF" TEXT="#000000">
Line 6:
Line 7: <H3 ALIGN="center">
Line 8: <SCRIPT LANGUAGE="JavaScript">
Line 9: <!-- Hide the JavaScript from older browsers
Line 10: document.write("Hope you are having a great day!")
Line 11: document.write("<BR>")
Line 12: document.write("Today's date is ",Date())
Line 13: // End hiding of script -->
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 LANGUAGE="JavaScript">
<!-- Hide the JavaScript from older browsers
document.write("Today's date is ",Date())
// End hiding of script -->
</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!")

document.write("<BR>")
document.write("Today's date is ",Date())

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.

| Click here to go to the answer section |

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 Evening!
Today's date is Fri Jul 25 21:54:51 2003

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>
<TITLE>Java Fun</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide the JavaScript from older browsers

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!")
}

if((today.getHours() >=4) && (today.getHours() <6))

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

if((today.getHours() >=6) && (today.getHours() <12))

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

if((today.getHours() >=12) && (today.getHours() <18))

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

if((today.getHours() >=18) && (today.getHours() <=24))

{
document.write("Good Evening!")
}
document.write("<BR>")
document.write("Today's date is ",Date())
document.write("</FONT></CENTER>")
// End hiding of script -->
</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 3: <TITLE>Java Fun</TITLE>
Line 4: </HEAD>
Line 5: <BODY BGCOLOR="#FFFFFF" TEXT="#000000">
Line 6:
Line 7: <SCRIPT LANGUAGE="JavaScript">
Line 8: <!-- Hide the JavaScript from older browsers
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 19: if((today.getHours() >=4) && (today.getHours() <6))
Line 20: {
Line 21: document.write("Wow! You're up early!")
Line 22: }
Line 23:
Line 24: if((today.getHours() >=6) && (today.getHours() <12))
Line 25: {
Line 26: document.write("Good Morning!")
Line 27: }
Line 28:
Line 29: if((today.getHours() >=12) && (today.getHours() <18))
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 39: document.write("<BR>")
Line 40: document.write("Today's date is ",Date())
Line 41: document.write("</FONT></CENTER>")
Line 42: // End hiding of script -->
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:

if((today.getHours() >=12) && (today.getHours() <18))

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()

| Click here to go to the answer section |

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())

| Click here to go to the answer section |

| 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 antiquew hite

aqua aquamarine

azure beige

black blanchedalmond

blue brow n

burlyw ood cadetblue

darkgray deeppink

back to w hite

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 7/25

Congratulations on completing this series of 21 lessons. We also have more HTML

lessons available. Click here to learn more about our additional lessons.

| Back to the top of the page |

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

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
[email protected]