My Tutorial On Web

WEB DESIGN
BASIC
INTRODUCTION TO WEB DEVELOPMENT
BY
CHIBUEZE EJIMNKEONYE
WEB DEVELOPMENT 2
CHAPTER 1
DAY 1
Introduction
In the writing of this document, I have made certain assumptions which I should state clearly. The
first is that you are using a graphical web browser such as Netscape, Mosaic, etc., and not a
character-based browser such as Lynx. I have tried to keep my explanations and examples as
"universal" as possible, but I make no guarantees as to this.
The second is that you are somewhat familiar with the operation of a Web browser and have already
visited several Web sites. If this is not the case, you should do so before starting this tutorial. If
you're looking for something which will explain various terms you've seen or heard.
The third thing is that when I talk about text, or content, or things of that nature, I am generally not
referring to what appears in the Web browser. I'm talking about what is in the actual HTML file.
There can be a big difference; make sure you know what I'm talking about.
Terms
There are a few common terms which I will use again and again. I'll just quickly define them here.
Again, if you're looking for a comprehensive list of terms.
The actual 'meat' of a document -- all of the words, images, and links which a user can read
and interact with. I use this term a lot to mean "whatever you put in the document."
Hyperlink
A link from one document to another, or to any resource, or within a document. For example,
just above where its says "Beginner's Web Glossary" and that text is highlighted in some
fashion. The default is usually blue, underlined text, but your display may vary.
In-line
Almost always used in the context "in-line image," this refers to a resource of some type
which is placed directly into a document. As I say, this is nearly always an image, but the
future could see things like in-line animations.
URL
The Uniform Resource Locator is a "standard" way of easily expressing the location and data
type of a resource. URLs in general take the form "protocol://address" where protocol is
something like gopher, FTP, telnet, and so on, and the address is merely the server and
pathname (if any) of a given resource or page. For more information, take a look at the
Beginner's Guide to URLs at the National Center for Supercomputing Applications (NCSA).
http://www.ncsa.uiuc.edu/demoweb/url-primer.html
Your Web Browser
The part of your Web browser I'll mention most often is the browser display window (also the
display window or browser window). This is the part of the Web browser where the actual contents
of an HTML document are displayed.
Yes, that's right, the text you're reading at this very moment is in the browser display window.
The other thing I'll mention is the history list (sometimes called the go list). That's the list of pages
you've visited during the current session. In most browsers, it is available as either a menu or a pop-
up dialog box.
Writing to the Norm
No, not the fat guy on "Cheers." Actually, it's a fundamental issue every Web author needs to know
about and appreciate.
Web browsers are written by different people. Each person has their own idea about how Web
documents should look. Therefore, any given Web document will be displayed differently by
different browsers. In fact, it will be displayed differently by different copies of the same browser, if
the two copies have different preferences set.
Therefore, you need to keep this principle foremost in your mind at all times: you cannot guarantee
that your document will appear to other people exactly as it does to you. In other words, don't fall
Chybusky
WEB DEVELOPMENT 3
into the trap of obsessively re-writing a document just to get it to "fit on one screen," or so a line of
text is exactly "one screen wide." This is as pointless as trying to take a picture that will always be
one foot wide, no matter how big the projection screen. Changes in font, font size, window size, and
so on will all invalidate your attempts.
On the other hand, you want to write documents which look acceptable to most people. How? Well,
it's almost an art form in itself, but my recommendation is that you assume that most people will set
their browser to display text in a common font such as Times at a point size of somewhere between
10 and 15 points. While you shouldn't spend your time trying to precisely engineer page
arrangement, you also shouldn't waste time worrying about how pages will look for someone whose
display is set to 27-point Garamond.
What is an HTML File?
• HTML stands for Hyper Text Markup Language
• An HTML file is a text file containing small markup tags
• The markup tags tell the Web browser how to display the page
• An HTML file must have an htm or html file extension
• An HTML file can be created using a simple text editor
HTML, or HyperText Markup Language is designed to specify the logical organisation of a
document, with important hypertext extensions. It is not designed to be the language of a
WYSIWYG word processor such as Word or WordPerfect. This choice was made because the same
HTML document may be viewed by many different "browsers", of very different abilities. Thus, for
example, HTML allows you to mark selections of text as titles or paragraphs, and then leaves the
interpretation of these marked elements up to the browser. For example one browser may indent the
beginning of a paragraph, while another may only leave a blank line.
HTML instructions divide the text of a document into blocks called elements. These can be divided
into two broad categories -- those that define how the BODY of the document is to be displayed by
the browser and those that define information `about' the document, such as the title or relationships
to other documents. The vocabulary of these elements and a description of the overall design of
HTML documents is given in the rest of Section 2. The Last part of the section also describes
standard naming schemes for HTML documents and related files.
The detailed rules for HTML (the names of the tags/elements, how they can be used) are defined
using another language known as the standard generalized markup language, or SGML. SGML is
wickedly difficult, and was designed for massive document collections, such as repair manuals for
F-16 fighters, or maintenance plans for nuclear submarines. Fortunately, HTML is much simpler!
However, SGML has useful features that HTML lacks.
Do You Want to Try It?
If you are running Windows, start Notepad.
If you are on a Mac, start SimpleText.
In OSX start TextEdit and change the following preferences: Open the the "Format" menu and select
"Plain text" instead of "Rich text". Then open the "Preferences" window under the "Text Edit" menu
and select "Ignore rich text commands in HTML files". Your HTML code will probably not work if
you do not change the preferences above!
Type in the following text:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
Save the file as "mypage.htm".
Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your browser. A
dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just
Chybusky
WEB DEVELOPMENT 4
created - "mypage.htm" - select it and click "Open". Now you should see an address in the dialog
box, for example "C:\MyDocuments\mypage.htm". Click OK, and the browser will display the page.
Example Explained
The first tag in your HTML document is <html>. This tag tells your browser that this is the start of
an HTML document. The last tag in your document is </html>. This tag tells your browser that this
is the end of the HTML document.
The text between the <head> tag and the </head> tag is header information. Header information is
not displayed in the browser window.
The text between the <title> tags is the title of your document. The title is displayed in your
browser's caption.
The text between the <body> tags is the text that will be displayed in your browser.
The text between the <b> and </b> tags will be displayed in a bold font.
HTM or HTML Extension?

When you save an HTML file, you can use either the .htm or the .html extension. We have used .htm
in our examples. It might be a bad habit inherited from the past when some of the commonly used
software only allowed three letter extensions.
With newer software we think it will be perfectly safe to use .html.
Note on HTML Editors:
You can easily edit HTML files using a WYSIWYG (what you see is what you get) editor like
FrontPage or Dreamweaver, instead of writing your markup tags in a plain text file.
However, if you want to be a skillful Web developer, we strongly recommend that you use a plain
text editor to learn your primer HTML.
Elements in HTML Documents

The HTML instructions, along with the text to which the instructions apply, are called HTML
elements. The HTML instructions are themselves called tags, and look like <element_name> -- that is,
they are simply the element name surrounded by left and right angle brackets.
Most elements mark blocks of the document for particular purpose or formatting: the above
<element_name> tag marks the beginning of such as section. The end of this section is then marked
by the ending tag </element_name> -- note the leading slash character "/" that appears in front of the
element name in an end tag. End, or stop tags are always indicated by this leading slash character.
For example, the heading at the top of this page is an H2 element, (a level 2 heading) which is
written as:
<H2> 2.1 Elements in HTML </H2>.
Empty Elements
Some elements are empty -- that is, they do not affect a block of the document in some way. These
elements do not require an ending tag. An example is the <HR> element, which draws a horizontal
line across the page. This element would simply be entered as
<HR>
Upper and Lower Case
Element names are case insensitive. Thus, the the horizontal rule element can be written as any of
<hr>, <Hr> or <HR>.
Elements can have Attributes
Many elements can have arguments that pass parameters to the interpreter handling this element.
These arguments are called attributes of the element. For example, consider the element A, which
marks a region of text as the beginning (or end) of a hypertext link. This element can have several
attributes. One of them, HREF, specifies the hypertext document to which the marked piece of text
is linked. To specify this in the tag for A you write:
<A HREF="http://www.somewhere.ca/file.html"> marked text </a>.
Chybusky
WEB DEVELOPMENT 5
where the attribute HREF is assigned the indicated value. Note that the A element is not empty, and
that it is closed by the tag </a>. Note also that end tags never take attributes -- the attributes to an
element are always placed in the start tag.
HTML Tags
HTML documents are text files made up of HTML elements.
HTML elements are defined using HTML tags.
• HTML tags are used to mark-up HTML elements
• HTML tags are surrounded by the two characters < and >
• The surrounding characters are called angle brackets
• HTML tags normally come in pairs like <b> and </b>
• The first tag in a pair is the start tag, the second tag is the end tag
• The text between the start and end tags is the element content
• HTML tags are not case sensitive, <b> means the same as <B>
HTML Elements
<html>
<head>
<title>Title of page</title>
</head>
<body>
</body>
</html>
This is an HTML element:
<b>This text is bold</b>
The HTML element starts with a start tag: <b>
The content of the HTML element is: This text is bold
The HTML element ends with an end tag: </b>
The purpose of the <b> tag is to define an HTML element that should be displayed as bold.
This is also an HTML element:
<body>
</body>
This HTML element starts with the start tag <body>, and ends with the end tag </body>.
The purpose of the <body> tag is to define the HTML element that contains the body of the HTML
document.
HTML Document Structure

HTML documents are structured into two parts, the HEAD, and the BODY. Both of these are
contained within the HTML element -- this element simply denotes this as an HTML document.
The head contains information about the document that is not generally displayed with the
document, such as its TITLE. The BODY contains the body of the text, and is where you place the
document material to be displayed. Elements allowed inside the HEAD, such as TITLE, are not
allowed inside the BODY, and vice versa.
Example of Document Structure
<HTML>
<HEAD>
<TITLE> Environmental Change Project </TITLE>
</HEAD>
<BODY>
<h1> Environmental Change Project </h1>
Welcome to the home page of the Environmental Change Project.

This project is different from other projects with similar
Chybusky
WEB DEVELOPMENT 6
names. In our case we actually wish to change the
climate. For example, we would like hot beaches in Northern
Quebec, and deserts near Chicago.
<p>So how will we do this. Well we do the following

<ul>
<li><A HREF="burn.html">Burn</A> more forests.
<li>Destroy the
<A HREF="http://who.zoo.do/ozone.html">Ozone</A> layer.
<li>Birth more <A HREF="ftp:foo.do.do/cows.gif">cows</a>
</ul>
</BODY>
</HTML>
Naming Scheme for HTML Documents

When your HTML browser (Netscape Navigator, Internet Explorer, Opera, lynx etc.....) retrieves a
file, it must know what type of data it has received in order to know what to do with it. Hypertext
(that is, HTTP) servers explicitly tell the browser the type of the data being sent. In other cases, such
as when the browser is using FTP to access a remote file, or when the browser is reading a file from
your local disk (such as when you are editing pages prior to publishing them to a Web server), the
browsers "guesses" the data type from the filename extension -- that is the part after the dot in the
filename. For example, HTML files are identified by names such as name.html, where the .html
extension indicates an HTML document.
Four letter extensions are common. This is not a problem with UNIX computers or Macintoshes,
since these machines place no restriction on the filename. DOS and Windows 3.1 machines are
unfortunately restricted to a three letter extension. Generally the extension is truncated to three
letters (i.e. .html becomes .htm).
Here are some of the standard extensions, and their meanings:
.html (also .htm)
HTML document, containing text and HTML mark-up instructions.
.txt
A plain text file. The browser presents the file as a block of text and does not process it for
mark-up instructions. Browsers generally treat unknown types of data as a text file.
.gif
A GIF format image file.
.xbm
An X-Bitmap (black&white) image file.
.xpm
An X-Pixmap (colour) image file.
.jpeg (also .jpg)
A jpeg-encoded image file.
.mpeg (also .mpg or .mpe)
An mpeg-encoded video file.
.qt
A (Macintosh) QuickTime-format video file
.avi
A (Microsoft) AVI-format video file
.au
An aiff-encoded audio (sound) file.
.Z
A compressed file - compressed using the adaptive Lempel-Ziv coding. This
compression/decompression program are commonly found on UNIX computers.
.gz
A compressed file - compressed using the GNU gzip program. This program is common on
UNIX computers and is available on PCs and Macintoshes.
Chybusky
WEB DEVELOPMENT 7
MIME Types and File Data Formats
The World Wide Web actually uses MIME types (Multipurpose Internet Mail Extension) to define
the type of a particular piece of information being sent from a Web server to a browser. A browser in
turn determines, from the MIME type, how the data should be treated. Each browser has a
configuration (menu or file) that maps the types of the data to particular functions. A browser can
handle many types of data itself (e.g. HTML documents, GIF images) while other types are passed
to auxiliary programs, such as image viewers, movie or sound players, plugins, and so on.
HTTP servers send MIME contents-types header messages ahead of every file they deliver to a
browser. This header explicitly tells the browser what type of data is being sent. Thus a server must
have a way of telling the type of data it is sending. Usually the server has a configuration file that
relates filename extensions to the appropriate MIME type. For example, the MIME type for HTML
documents is text/html. Thus, if a browser reqests that a server send the file blobs.html, the server first
looks up the MIME type corresponding to the .html extension. The server then sends a message to the
browser saying that data of content-type text/html is being sent, after which the server sends the
actual data.
Other servers, such as FTP servers, do not send this MIME type information. In this case, the
browser "guesses" the MIME type, based on the filename extension. Thus each browser must be
configured with a list that relates typical extensions to the "most likely" type of data. This is also
how a browser determines the type of files accessed locally of the computer.
Versions of HTML
HTML is an evolving language, and each new version is given a number. The first definitive version
was HTML 2.0 -- this had most of the elements we know and love, but was missing some of the
Netscape/Microsoft extensions, and did not support tables, or ALIGN attributes.
HTML 3 (late 1995) was an ambitious effort on the part of Dave Raggett to upgrade the features and
utility of HTML. However, it was never completed or implemented, although many features were
integrated in the next "official" version of HTML, known as HTML 3.2.
HTML 3.2 was the next official version, integrating support for TABLES, image, heading and other
element ALIGN attributes, and a few other finicky details. HTML 3.2 is the current "universal"
dialect -- essentially all browsers understand HTML 3.2. IT was, however, missing some of the
Netscape/Microsoft extensions, such as FRAMEs, EMBED and APPLET. Support for these (after a
fashion) came in HTML 4.0
HTML 4.01 is the current official standard. It includes support for most of the proprietary
extensions, plus support for extra features (Internationalized documents, support for Cascading Style
Sheets, extra TABLE, FORM, and JavaScript enhancements), that are not universally supported.
Some of these enhancements are not discussed in these online notes. They are discussed in detail in
The HTML 4.0 Sourcebook, available in most bookstores.
For more details about the various versions of HTML, you are also referred to the bibliography,
which contains references to the various specifications, and to my online resource that defines the
structural rules of the different HTML variants, found at the URL
http://www.utoronto.ca/webdocs/HTMLdocs/HTML_Spec/html.html documents.
However, the evolution of HTML has now ceased -- HTML 4.01 is the last version of HTML. For
the future, HTML is being replaced by a new language, called XHTML -- for the eXtensible
HyperText Markup Language. The differences are actually small, but important, as described on the
next section.
However, HTML and XHTML are very similar, so the things you learn in this tutorial will still be
useful. My newer book, The XHTML 1.0 Language and Design Sourcebook, explains in details these
differences and how to use the new XHTML language. On the other hand, Section 2.5 of this tutorial
covers the most important differences, and costs a whole lot less!
Basic Notes - Useful Tips
When you write HTML text, you can never be sure how the text is displayed in another browser.
Some people have large computer displays, some have small. The text will be reformatted every
Chybusky
WEB DEVELOPMENT 8
time the user resizes his window. Never try to format the text in your editor by adding empty lines
and spaces to the text.
HTML will truncate the spaces in your text. Any number of spaces count as one. Some extra
information: In HTML a new line counts as one space.
Using empty paragraphs <p> to insert blank lines is a bad habit. Use the <br> tag instead. (But don't
use the <br> tag to create lists. Wait until you have learned about HTML lists.)
You might have noticed that paragraphs can be written without the closing tag </p>. Don't rely on it.
The next version of HTML will not allow you to skip ANY closing tags.
HTML automatically adds an extra blank line before and after some elements, like before and after a
paragraph, and before and after a heading.
We use a horizontal rule (the <hr> tag), to separate the sections in our tutorials.
Basic HTML Tags
Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment
HTML Character Entities
Some characters like the < character, have a special meaning in HTML, and therefore cannot be used
in the text.
To display a less than sign (<) in HTML, we have to use a character entity.
Character Entities
Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of
an HTML tag. If we want the browser to actually display these characters we must insert character
entities in the HTML source.
A character entity has three parts: an ampersand (&), an entity name or a # and an entity number,
and finally a semicolon (;).
To display a less than sign in an HTML document we must write: < or <
The advantage of using a name instead of a number is that a name is easier to remember. The
disadvantage is that not all browsers support the newest entity names, while the support for entity
numbers is very good in almost all browsers.
Note that the entities are case sensitive.
Non-breaking Space
The most common character entity in HTML is the non-breaking space.
Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will
remove 9 of them. To add spaces to your text, use the character entity.
The Most Common Character Entities:
Result Description Entity Name Entity Number
non-breaking space
< less than < <
> greater than > >
& ampersand & &
" quotation mark " "
' apostrophe ' (does not work in IE) '
Chybusky
WEB DEVELOPMENT 9
Some Other Commonly Used Character Entities:
Result Description Entity Name Entity Number
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
§ section § §
© copyright © ©
® registered trademark ® ®
× multiplication × ×
÷ division ÷ ÷
Chybusky
WEB DEVELOPMENT 10
Day 2
HEAD
The HEAD contains general information, or meta-information, about the document. It is the first
thing in any document, lying above the BODY and just after the <HTML> tag starting the
document.
The contents of the HEAD are not displayed as part of the document text: the displayed material is
found within the BODY. Consequently, only certain mark-up elements can be placed within the
HEAD. These are:
• BASE -- A record of the original URL of the document: this allows you to move the
document to a new directory (or even a new site) and have relative URLs access the
appropriate place with respect to the original URL.
• ISINDEX -- Usually placed in the HEAD by the server or a server script/program to indicate
that a document is searchable.
• LINK -- Defines the relationship(s) between this document and another or others. A
document can have several LINK elements.
• META -- A container for document metainformation.
• NEXTID -- A parameter used by automated HTML editors to create unique identifiers for
the documents. NOTE: This attribute was dropped in HTML 4.0, so you should avoid it in
new documents.
• TITLE -- The title of the document. This element is mandatory -- all documents must have
a TITLE.
• STYLE -- Stylesheet instructions, written in a stylesheet language. Stylesheet instructions
specify how the document should be formatted for display. Very few browser currently
support stylesheets.
• SCRIPT -- Script program code -- for enclosing, within a document, scripting program code
that should be run with -- and that can interact with -- the document. Example lanuages are
JavaScript and VBScript.
Example of a HEAD
<HTML>
<HEAD>
<TITLE> Goofy Stuff from Blobby Page </TITLE>
<BASE HREF="http://www.somewhere.org/stuff/blob.html">
<LINK HREF="http://www.somewhere.org/stuff/index.html" REL="index">
</HEAD>
<BODY>
..... text of the document
</BODY>
</HTML>
LINK Element
The LINK element belongs within the HEAD element of an HTML document. It is to be used to
indicate a relationship between the document and other documents or objects. Consequently a
document may have any number of LINK elements, to indicate all the possible relationships between
the document and other, related documents.
The LINK element is empty (i.e, there is no closing </LINK>) but takes the same attributes as the
Anchor (A) element. Typically, a LINK element would be used to indicate authorship, related
indexes and glossaries, older or more recent versions, etc. Links can also indicate the tree structure
in which the document was authored by pointing, for example, to the "parent", "next" or "previous"
documents.
LINK is currently used to referenced external cascading stylesheet files, using the format
<LINK HREF="url-to-stylesheet" REL="stylesheet">.
Examples of LINK
<HEAD>
<LINK HREF="file2.html" REL="next">
Chybusky
WEB DEVELOPMENT 11
<LINK HREF="/cgi-reg/gloss.pl" REL="glossary">
<LINK HREF="/cgi-bin/index.pl" REL="index">
<LINK HREF="toc.html" REL="contents">
<LINK HREF="file0.html" REL="previous">
</HEAD>
META
META is a general element for document meta-information -- that is, for information about the
document that cannot be expressed by LINK, BASE or the other HEAD elements. There are two
ways this can be expressed.
HTTP-Equivalent META Information
Sometimes you want a header to contain information that would ordinarily be returned by the server
as a field in the HTTP headers. For example, you could use META to include an expiry date for files
that are periodically updated. The META element would be:
<META HTTP-EQUIV="Expires" CONTENT="25-Dec-1995 12:00:00 GMT">
NOTE -- You should not use this element to override a header that is correctly sent by a server, as
this will confuse the browser, or may confuse a proxy server lying between someone's browser and
the site from which the document originates
Netscape (and Other) Extension to META
Netscape browsers support META elements of the form:
<META HTTP-EQUIV="Refresh" CONTENT="12; URL=http://foo.bar/blatz.html">
Several browsers, including Netscape Navigator, Microsoft Internet Explorer and AOL 1.2.3 support
this 'Refresh" header. With the above example, the browser will, after a delay of 12 seconds, access
the indicated URL.
An alternative form is:
<META HTTP-EQUIV="Refresh" CONTENT="10">
in which case the browser would wait 10 seconds and then re-access the currently displayed
document.
Arbitrary User-Specified META Information
A user might want to include information about the document, such as keywords for indexing, the
name of the author, and so on. This can be done with META elements such as the following:
<META NAME="author" CONTENT="Ian Graham">
<META NAME="keywords" CONTENT="html documentation web url">
<META NAME="editor" CONTENT="HTML SuperPro">
The attribute NAME refers to arbitrary user-selected names, while HTTP-EQUIV means that the
value has a real equivalent header in the HTTP protocol. Again this is only really useful given tools
for processing these data. At present, there are very few tools that take advantage of META element
content.
Commonly-Understood META Elements Formats
There are several other common META elements that are used to provide information to Web-
indexing robots -- that is, the automated tools that retrieve Web pages and create searchable indexes,
such as those found at Lycos, AltaVista, or Yahoo. Additional information about these special uses
for META are found at http://vancouver-webpages.com/META/.
TITLE
The title of a document is specified by the TITLE element, which should be placed in the document
HEAD. Each document can have only one title, which should identify the document content in a
general way.
The Title is not part of the document text and cannot contain hypertext links or special markup
commands -- it must be simple text. Often the title is used to label the window displaying the text, or
is used to label a place in a browser's history or bookmark list. It therefore should be short -- less
than 64 characters is strongly recommended.
Examples of TITLE
Some appropriate titles might be:
<TITLE>Article by Rivest and Neuman. 1989(b)</TITLE>
Chybusky
WEB DEVELOPMENT 12
or
<TITLE>Introduction to MIME types </TITLE>
Examples of inappropriate titles are those which are not meaningful without the related document:
<TITLE>Introduction</TITLE>
or those that are too long:
<TITLE>Remarks on the Quantum-Gravity effects of "Bean
Pole" diversification in Mononucleosis patients in Developing
Countries under Economic Conditions Prevalent during
the Second half of the Twentieth Century, and Related Papers:
a Summary</TITLE>
SCRIPT Element
With Navigator 2.0, Netscape introduced a SCRIPT element in the document HEAD or BODY. This
element can contain a executable script, written in JavaScript, which can set up program
functionality within the document itself.
Javascript is a simple scripting language, loosely based on the Java language. Javascript can interact
with the displayed text, several of the text-display ares on the screen, as well as fill-in FORMS. If
you've ever seen a fill-in form that seems to auto-tabulate numbers, or have notices a scrolling
marquee appear in the status-line at the bottom of your netscape window, then you are seeing a
javascript in action.
SCRIPT and the Different Browsers
Internet Explorer 3 and greater also support JavaScript, although they support a slightly different
version of the language, which they call Jscript. The result is that some Java/Jscript programs work
on IE 3/4 and not on Netscape 3/4, and vice versa. Moreover, scripts that work on IE 4 may not work
on IE 3, as the script languages are evolving rapidly, and add many new features from version to
version.
Internet Explorer also supports a second scripting language, known as VBScript, or Visual Basic
Scripting. This language is similar to the Visual Basic languages familiar to many Windows
developers, and provides essentially the same features as JavaScript.
SCRIPT and Dynamic HTML
As of version 4 of the browsers, Netscape and Microsoft let the script program dynamically interact
with the HTML document that is displayed on the page. This is known as dynamic HTML, and
makes page design much more interesteing. However -- and unfortunately -- Microsoft and Netscape
have done this in completely different ways, such that dynamic HTML scripts written for Internet
Explorer 4 will not work with Netscape Navigator 4, and vice versa.
This situation will improve with version 5 of the browsers, as they will both support a common way
of writing programs that interact with the document. This common mechanism is known as the
Document Object Model or DOM. Both Netscape and Microsoft have promised support for this
standard, which will make it much easier to write scripts that work everywhere.
STYLE Element (HTML 3)
HTML 3.2 introduced initially support for style sheets. A style sheet is a suplementary documents,
written in a language different than HTML, which contain style formatting instructions that can be
applied to an HTML document. The STYLE element can be used to reference such an external
documennt, or it can contain a set of formatting instructions to be used in the document.
This is done by either:
• referencing an external stylesheet via tags such as <STYLE HREF="url_to_stylesheet">.
• enclosing the information between <STYLE> and </STYLE>
The STYLE is currently supported by Netscape Navigator 4 and Internet Explorer 4. However, both
browsers do not properly support the style sheet language, (known as cascading style sheets), so that
the element is not widely used.
Please see the related style sheets document for more information about stylesheets.
Chybusky
WEB DEVELOPMENT 13
DAY 3
BODY
The BODY element contains all the content of a document, as opposed to the HEAD, which
contains information about the document. Various mark-up elements are allowed within the body to
indicate headings, paragraphs, lists, hypertext links, images, and so on. These are described and
illustrated in documents following this one.
The following shows typical use of HEAD and BODY elements, using this document as an example:
<HTML>
<HEAD>
<TITLE> BODY element in HTML </TITLE>
<BASE HREF="http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/body.html">
</HEAD>
<BODY>
[<a href="htmlindex.html">ToC</a>]
[<a href="htmlindex.html">Up</a>]
<H1> BODY Element in HTML </H1>
<p> The BODY element contains all the content of the document,
as opposed to the <a href="head.html">HEAD</a>, which
contains information about the document. </p>......
</BODY>
</HTML>
The BACKGROUND Attribute
In HTML 2.0, the BODY element had no attributes. Netscape 1.1 introduces the single attribute
BACKGROUND. This allows you to specify an image file to use as a background (a bit like a
watermark) behind the displayed text and graphics.
The following example (please read the following text and then follow the example link)
<BODY BACKGROUND="back/marble.gif">
<h1> Bla Bla Bla </h1>
<p> And still more text....
</BODY>
tiles the window background with the designated GIF image. Just click on the anchor to look at the
example.
HTML 3.2 Extensions
Setting a background color is not enough -- for example, if you set the background to black, you
need to be able to change the color of the text as well. Netscape introduced several new attributes for
controlling the text color. These are described below, and became, as of HTML 3.2, part of the
HTML standard. There is also an example document illustrating these BODY attributes.
BGCOLOR="#rrggbb"
Sets the background color to the specified RGB color value, where RR GG and BB are the
hexadecimal color codes for the Red, Green and Blue levels, ranging from 0 to 255 -- that is,
00 to FF. The color "000000" is black, while "FFFFFF" is white. If there is also a
background image, the BGCOLOR is used as the color underneath the background image --
if the background image is transparent, this is the color that shows through.
TEXT="#rrggbb"
Sets the default text color to the specified RGB color value.
LINK="#rrggbb"
Sets the default text color of hypertext anchors to the specified RGB color value.
VLINK="#rrggbb"
Sets the default text color of visited hypertext links to the specified RGB color value.
Chybusky
WEB DEVELOPMENT 14
Most browsers also support special color names (white, blue, etc.). A list of the allowed colors is
found at the supporting Web site for my HTML book, at:
http://www.utoronto.ca/ian/books/html4ed/appf/color1.html.
Netscape 4 /Internet Explorer 4 Extensions
These browsers added attributes that set the padding around the text the page -- essentially setting
the page margins. Of course, the two companies selected different names for these attributes. These
properties are:
LEFTMARGIN="nn" (Navigator 4) and MARGINWIDTH="nn" (Internet Explorer 4/5)
Sets the page margin on the left (and right for Internet Explorer) of the page to be of size nn
pixels.
TOPMARGIN="nn" (Naviagator 4) and MARGINHEIGHT="nn" (Internet Explorer 4/5)
Sets the page margin at the top of the page to be of size nn pixels.
Organization of Elements in the BODY
A. Text Block Elements
As mentioned on the previous page, the BODY element contains all the displayed content of a
document. Structurally, the document content is organized into blocks of text, such as paragraphs,
lists, headings, paragraphs, block quotations, and so on. These are generically called block elements,
since they "block" chunks of text together into logical units. Block elements can often contain other
blocks -- for example, a list item can contain paragraphs or block quotations, so that these elements
can often nest together.
The block-level elements are:
• Hn (Headings)
• P
• ADDRESS
• BLOCKQUOTE
• PRE
• HR
• FORM
• TABLE
• DIV (HTML 3.2 and up)
B. Text Emphasis Elements
At the next level down are text-level markup elements. These are elements that mark text for special
meanings, for example, that a particular piece of text is emphasised (EM) or a citation (CITE), or
that specify the desired physical formatting, such as boldface (B) or italics (I). These elements can
usually appear anywhere inside a block element, with a few exceptions (you can't have images inside
a PRE element).
C. Special Elements -- Hypertext Anchors
Analogous to the text-level markup is the anchor (A) element. This is the element that marks
hypertext links. Obviously you want to know a lot about this one.
D. Character-Level Elements
Then are what I call character-level elements, namely line breaks (BR) and images (IMG). These are
treated much like characters, and can appear wherever there is a character in a document.
E. Character References
Finally there are character or entity references. These are special HTML "escape" codes that can be
used to enter special characters that are hard to type, such as accented or other non-ascii characters.
You also need to use these to type angle brackets or ampersand characters -- as these are otherwise
interpreted as HTML tags (< ... > ) or as the beginnings of character or entity references (&).
Section Headings
HTML allows for six levels of headings, marked by the element names H1, H2... H6. There is no
forced hierarchy in these headings, but for consistency you should use the top level (H1) for main
headings, and lower levels for progressively less important ones. In general hypertext documents
should be broken up so that each page does not occupy much more than a single screen. In these
Chybusky
WEB DEVELOPMENT 15
cases you can use the H1 heading to mark the main document heading, and the others to mark
subheadings.
Heading Alignment: The ALIGN Attribute
HTML 3 proposed an ALIGN attribute to the heading element, which allows an author to "hint" at
the desired alignment of the heading on the display.The possible values are ALIGN="left" (the
default) to left-align the heading, ALIGN="center" to center the heading, and ALIGN="right" to
right-align the heading. Several browsers understand left and center alignment, while very few
understand right-alignment. Some examples are shown below.
Examples of Headings
The following examples show the HTML coding for the six heading types, along with the results
(note that the results will vary from viewer to viewer)
<H1 align="left"> Heading type H1 </H1>
Heading type H1
<H2 align="center"> Heading type H2 </H2>
Heading type H2
<H3 align="right"> Heading type H3 </H3>
Heading type H3
<H4> Heading type H4 </H4>
Heading type H4
Heading type H5
Heading type H6
Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the
smallest heading.
<h1>This is a heading</h1>
HTML automatically adds an extra blank line before and after a heading.
Marking Paragraphs
The P element marks a block of text as a paragraph -- the tag <P> marks the beginning of the
paragraph, while the tag </P> marks the end of a paragraph. The end tag, however, is optional, as a
paragraph is automatically ended when you start another paragraph, or when you start a heading,
blockquote, list, table or form.
In general, a browser will add appropriate spacings and indents to indicate the paragraph. Note that
the Netscape Navigator often adds extra vertical spacing after a paragraph if you end the paragraph
with a </P> end tag. This is a "bug" with Netscape, but can be used as a "feature" if you want to more
finely control line spacings between a paragraph and a following element such as a table or a
horizontal rule
For example, the above text, including the heading, was marked up as follows:
<p> The P element marks a
block of text as a paragraph -- the tag <code><P></code>
marks the beginning of the paragraph, while the tag
<code></P></code> marks the end of a paragraph. The end
tag, however, is optional, as a paragraph is automatically
ended when you start another paragraph, or when you start
a heading, blockquote, list, table or form.</p>
<p>In general, a browser will add appropriate spacings and
Chybusky
WEB DEVELOPMENT 16
indents to indicate the paragraph. Note that the Netscape
Navigator often adds extra vertical spacing after a paragraph
if you end the paragraph with a <code></P></code>
end tag. This is a "bug" with Netscape, but can be used
as a "feature" if you want to more finely control line
spacings between a paragraph and a following element such
as a table or a horizontal rule</p>
Changes for HTML 3.2: Paragraph Alignment
HTML 3.2 introduced the ALIGN attribute to control the alignment of text, and also introduced ID
to act as a location marker for the paragrah. More specifically:
ALIGN = "left" | "center" | "right" | "justify" (... examples)
ALIGN controls the alignment of text within the paragraph. Left and right alignment flush
the text with the left and right margins, respectively, while center alignment centers the text.
Justify should left and right justify the text.
Please select the "examples" anchor above to see examples of the different alignments.
ID = "name_token" (not widely supported)
Mark the paragraph for a possible reference via a URL. Thus, ID should act much like the
NAME attribute of a hypertext anchor (A) element. However, this use for ID is currently
only supported by the Internet Explrer 4. The value assigned to ID is a name token.
Paragraphs
Paragraphs are defined with the <p> tag.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML automatically adds an extra blank line before and after a paragraph.
ADDRESS Element
The ADDRESS element is used for address information, signatures, statements of authorship, etc. It
is often placed at the bottom (or top) of a document. The rendering of the contents of the ADDRESS
is left up to the browser -- most browsers render the ADDRESS in italics. It may also be right
justified, or indented.
Examples of ADDRESS
<ADDRESS><A HREF="address.html">A.N.Other</A></ADDRESS> </P>
<p><ADDRESS>
Newsletter editor<br>
J.R. Brown<br>
JimquickPost News, Jumquick, CT 01234<br>
Tel (123) 456 7890
</ADDRESS> </p>
These are rendered as
A.N.Other
Newsletter editor
J.R. Brown
JimquickPost News, Jumquick, CT 01234
Tel (123) 456 7890
An address cannot contain P, BLOCKQUOTE, FORM or other block elements, but can contain text,
text markup (emphasis, etc.), anchor elements or even images.
BLOCKQUOTE Element
The BLOCKQUOTE element defines a block quotation of text. A typical browser will render this in
an appropriate way, for example by slightly indenting the text, or by italicizing it. BLOCKQUOTE
also causes a paragraph break, and typically forces white space both before and after the quotation.
BLOCKQUOTE can contain paragraphs, and most standard markup.
Example of BLOCKQUOTE
For example, the following text:
Chybusky
WEB DEVELOPMENT 17
I think it ends
<BLOCKQUOTE><P>Soft you now, the fair Ophelia. Nymph, in
thy orisons, be all my sins remembered. Fair twilight,
and foxy swarms of ants, did slyly open the jars of jam. </p>
</BLOCKQUOTE>
but I might be wrong.
Is rendered as follows:
I think it ends
Soft you now, the fair Ophelia. Nymph, in thy orisons, be all my sins remembered.
Fair twilight, and foxy swarms of ants, did slyly open the jars of jam.
but I might be wrong.
Attributes
In HTML 3.2 and up, BLOCKQUOTE can take the ALIGN attribute to specify how the text inside
BLOCKQUOTE should be aligned. The supported values are
• ALIGN="center" (center alignment)
• ALIGN="left" (left alignment -- the default)
• ALIGN="right" (right alignment)
• ALIGN="justify" (left-right justification). Justify alignment is not widely supported.
DIV -- Block Divisions
HTML 3.2 introduced the element DIV, to allow you to block together other block body elements,
and associate them together. This has practical purposes -- DIV can take the ALIGN attribute, and
all blocks (P, BLOCKQUOTE, etc.) inside a DIV will inherit the text alignment specified by the
outside DIV. Structurally, DIV can also take the CLASS attribute, which is used to specify the
semantic meaning of the block. For example <DIV CLASS="abstract"> ..... </DIV> could be used
to mark out the block of text that is a document's abstract. This is very useful when organizing text,
and is much desired by document authors.
All modern browsers support the DIV element, but it is not supported by older browsers, such as
Mosaic 2.0, Netscape Navigator 1.1 and Internet Explorer 2.0.
Example of DIV
The following is an example of DIV (look below to see how it displays on your browser):
<DIV ALIGN="center" CLASS="test_block">

<h3> Test Heading -- how is it aligned?</h3>
<P>Here is the first paragraph. This will be center-aligned if
the browser understands DIV.
<P ALIGN="left">
This second paragraph should be left-aligned,
as the ALIGN attribute of the paragraph element should override
the alignment specified by the outer element.
</DIV>
here is some following text. If the browser does not understand
DIV this line will flow into the previous paragraph -- therefore
make sure, if using DIV, to properly block out all text within
and outside the DIV.
...this is displayed as:
Test Heading -- how is it aligned?

Here is the first paragraph. This will be center-aligned if the browser understands DIV.
This second paragraph should be left-aligned, as the ALIGN attribute of the paragraph element
should override the alignment specified by the outer element.
Chybusky
WEB DEVELOPMENT 18
here is some following text. If the browser does not understand DIV this line will flow into the
previous paragraph -- therefore make sure, if using DIV, to properly block out all text within and
outside the DIV.
Chybusky
WEB DEVELOPMENT 19
DAY 4
Lists
HTML supports several elements for making lists. They can be divided into two types: glossary lists,
and regular lists. Glossary Lists are denoted by the element <DL>, while regular lists are denoted by
the elements <UL>, <OL>, <MENU> and <DIR>. Lists can be nested. Thus you can have a regular list
within a regular list, a regular list within a glossary list, and so on. Some examples are shown below.
This document describes glossary lists. The following document ([Next] from the menu at the top of
the page) explains the formatting of regular lists.
DL Element: Glossary Lists
This list type, also known as a definition list, is used to present a list of items along with descriptive
paragraphs. This can be used for glossaries, but is also useful for presenting a named list of items
and their meanings. The items within the list are introduced by the two elements:
<DT> -- The `Term' (a single line)
<DD> -- The `Definition' (may be multiple lines)
DL can take a single attribute, COMPACT, to signify that the list is small (or large) and should be
rendered in a physically compact way. This attribute is ignored by several browsers.
Example of DL Lists
Here is an example from the Paragraphs section of this manual (with a small addition to show a
nested regular list:)
<dl>
<dt> Things to Avoid: </dt>
<dd> You should NOT use elements that define paragraph
formatting within the PRE element. This means you should
not use <code> <P>, <ADDRESS>, <Hn>
</code>and so
on. You should avoid the use of tab characters -- use single
blank characters to space text apart. </dd>
<dt> Things That are OK: </dt>
<dd>You <em> can </em> use Anchor. A typed
carriage return will cause a new line in the presented text.
People you should never let format lists include:
<ul>
<li> Bozo the Clown </li>
<li> Uncle Fester </li>
<li> Knights who say nii </li>
</ul>
Which would be downright silly in the first place. </dd>
</dl>
This is rendered as:
Things to Avoid:
You should NOT use elements that define paragraph formatting within the PRE element.
This means you should not use <P>, <ADDRESS>, <Hn> and so on. You should avoid the use of
tab characters -- use single blank characters to space text apart.
Things That are OK:
You can use Anchor. A typed carriage return will cause a new line in the presented text.
People you should never let format lists include:
• Bozo the Clown
• Uncle Fester
• Knights who go nii
Which would be downright silly in the first place.
Regular Lists ( ... Netscape Extensions)
A regular list is a sequence of paragraphs, each of which may be preceded by a special mark,
sequence number, or nothing at all. The syntax is:
<UL>
Chybusky
WEB DEVELOPMENT 20
<LI> list element </LI>
<LI> another list element ... </LI>
</UL>
where the opening element defining the list type can be one of
• UL -- A list of multi-line paragraphs, listed separately and usually marked by a bullet or
similar symbol (Unordered List)
• OL -- A list of multi-line paragraphs, listed separately and ordered numerically in some way
(Ordered List)
• MENU -- An Unordered List of smaller paragraphs, this is similar to UL but is formatted (if
possible) in a more compact manner. NOTE: MENU was dropped from the language as of
HTML 4.0 -- you should use UL instead.
• DIR -- A list of short elements, typically less than 20 characters in length. These may may be
arranged in columns across the page, as opposed to one above the other. This is browser
dependent. >NOTE: DIR was dropped from the language as of HTML 4.0 -- you should use
UL instead.
Here are four examples, showing the rendering for the four different types. The text we will format
is as follows:
Hi. The following is an example list.
<UL>
<LI> list element. The quick brown fox jumped over the
lazy dog. The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
<LI> another list element ...
</UL>
The following four examples use the four possible list elements UL, OL, MENU and DIR.
UL List
Hi. The following is an example list.
• list element. The quick brown fox jumped over the lazy dog. The quick brown fox jumped
over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox
jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
• another list element ...
OL List
Hi. The following is an example OL (ordered) list.
1. list element. The quick brown fox jumped over the lazy dog. The quick brown fox jumped
2. another list element ...
MENU List
Hi. The following is an example MENU list.
list element. The quick brown fox jumped over the lazy dog. The quick brown fox jumped
another list element ...
DIR List
Hi. The following is an example DIR list.
list element. The quick brown fox jumped over the lazy dog. The quick brown fox jumped
another list element ...
Chybusky
WEB DEVELOPMENT 21
Netscape Extensions to List Elements
Netscape introduced several "extension" attributes for list elements, all of which were subsequently
integrated into standard HTML. Essentially all browsers now support these attributes.
OL Element -- START and TYPE Attributes
These attributes control the numbering of ordered lists.
• START -- specifies the starting number for a numbered list. Thus START="4" means that
the list will start with the number 4.
• TYPE = "A", "a", "I", "i" or "1" -- specifies how the items are numbered. "A" or "a"
indicate letter ordering (upper or lower case), while "I" or "i" indicate roman numerals (upper
or lower case). "1" is the default, and indicates numerical ordering.
UL Element -- TYPE Attribute
The Netscape browser supports a TYPE attribute to the UL element for specifying the type of bullet
to be used with the list items. Possible values are "disc" (filled disc), "circle" (open circle) and
"square" (open square).
LI Element -- TYPE and VALUE Attributes
The Netscape browser supports TYPE and VALUE attributes for the LI element. VALUE is valid
only inside an OL list, and specifies the item number for the given list item. All subsequent items are
ordered from this number. The TYPE attribute specifies the type of numbering ("A", etc.) or
bulleting ("circle", etc.) depending on whether the LI is inside an OL or UL list.
List Examples
Here are some examples.
<ol start=4 type="i">
<li>First item
<li>Second item
<li value=2>Third item; value=2
<li type="A">Second item; type="A"
</ol>
which is rendered as:
iv. First item
v. Second item
ii. Third item; value=2
D. Second item; type="A"
Netscape Extensions to List Elements
Netscape introduced several "extension" attributes for list elements, all of which were subsequently
integrated into standard HTML. Essentially all browsers now support these attributes.
OL Element -- START and TYPE Attributes
These attributes control the numbering of ordered lists.
• START -- specifies the starting number for a numbered list. Thus START="4" means that
the list will start with the number 4.
• TYPE = "A", "a", "I", "i" or "1" -- specifies how the items are numbered. "A" or "a"
indicate letter ordering (upper or lower case), while "I" or "i" indicate roman numerals (upper
or lower case). "1" is the default, and indicates numerical ordering.
UL Element -- TYPE Attribute
The Netscape browser supports a TYPE attribute to the UL element for specifying the type of bullet
to be used with the list items. Possible values are "disc" (filled disc), "circle" (open circle) and
"square" (open square).
LI Element -- TYPE and VALUE Attributes
The Netscape browser supports TYPE and VALUE attributes for the LI element. VALUE is valid
only inside an OL list, and specifies the item number for the given list item. All subsequent items are
ordered from this number. The TYPE attribute specifies the type of numbering ("A", etc.) or
bulleting ("circle", etc.) depending on whether the LI is inside an OL or UL list.
Chybusky
WEB DEVELOPMENT 22
List Examples
Here are some examples.
<ol start=4 type="i">
<li>First item
<li>Second item
<li value=2>Third item; value=2
<li type="A">Second item; type="A"
</ol>
which is rendered as:
iv. First item
v. Second item
ii. Third item; value=2
D. Second item; type="A"
Images
Besides hyperlinks, the other great advantage of the Web is the ability to integrate graphic images
into a document. Some would argue that this represents one of the greatest strengths of the Web.
Graphics are certainly used as heavily as hyperlinks, and represent most of the data which is
transferred, so it's fitting that we spend some time discussing them. By the time you finish this
chapter, you'll be able to create eye-catching pages that will make you the envy of your friends!
Okay, so that would be the case if you had friends like mine. Never mind.
IMG
Images are placed in Web documents using the IMG tag. This tag is empty, and therefore has no
closing tag. The basic form of the image tag is <IMG>, but just like <A>, <IMG> by itself is pointless--
it will do nothing. At the very least, you need to let the browser know where to find the image that
it's supposed to place in the document.
This brings up an important point. Visually speaking, images are part of a Web document, but in
reality an HTML file and any graphics it refers to are actually all separate files. In other words, one
HTML file which has five graphics within it makes a total of six files required to make the page look
right. These files are all stored on a Web server, but don't have to all be in the same exact place.
(Often, server administrators will set up separate directories for pictures.)
In order to make the IMG tag work, you need to use an SRC attribute. SRC stands for "source," as
in, "the source of this graphic." (One way to read a typical image tag is "image source equals..."
You'll see what I mean in a minute.) The value of SRC is the URL of the graphic you want to have
displayed on your Web page. Thus, a typical image tag will take the form:
<IMG SRC="URL of graphic">
The URL of the graphic is just like the URLs used in the anchor tag ,except in this case the location
used is that of the graphic file. A graphic named "blat.gif" located in the directory "pics" on the
server "www.site.edu" would have the URL http://www.site.edu/pics/blat.gif. You can use either relative
or full URLs to refer to the graphic file.
Okay, but how does the browser know where to put a graphic once it's been loaded? In relation to
the text, the browser puts a graphic wherever an image tag occurs in the document. It will do this as
though the graphic were just another piece of the text (which, in a certain way, it is). For example, if
you put an image tag between two sentences, the browser would show the first sentence, then the
graphic, and then the second sentence right after the graphic. Thus...
Further inquiries should be directed to Jodi at x303.
<IMG SRC="pix/redsquare.gif">
There will be a meeting next Tuesday night...
...will look like this:
Further inquiries should be sent to Jodi at x303. There will be a meeting next Tuesday
night...
Images can be placed almost anywhere within the body of the document. They can be between
paragraphs, within paragraphs, in list items or definition-list definitions, and even within headings.
Placing images within links is also possible. To do so, merely place the IMG tag within the anchor
container. For example:
Chybusky
WEB DEVELOPMENT 23
<A HREF="http://www.site.net/">
<IMG SRC="generic-image.gif">
</A>
You can also mix in text to either side of the image, or both sides: it doesn't matter. Let's say that
you wanted to put a link to a copyright notice, and you wanted to draw attention to the link with a
small warning symbol. It might go something like this:
<A HREF="tcopy.html">
<IMG SRC="pix/warning.gif"> Unauthorized duplication is prohibited!
</A>
The above markup would then appear as:
Unauthorized duplication is prohibited!
As you can see, if you do include text within the anchor container, then it will be a part of the anchor
along with the image.
There are two other attributes to the IMG tag which should be discussed in this tutorial. Both are less
frequently used than SRC (because SRC is so essential) but each is important in its own way. In my
opinion, the more important of the two is...
ALT
The ALT attribute is used to define "alternate text" for an image. The value of ALT is author-
defined text, enclosed in double-quotes, and ALT text can be any amount of plain text, long or short.
To pick one of an infinite number of examples, a warning symbol could be marked up as follows:
<IMG SRC="warning.gif" ALT="Warning!!!">
This ALT text will have no effect whatsoever in a graphical browser with image loading turned on.
So what's the point? ALT improves the display and usefulness of your document for people who are
stuck with text-only browsers such as Lynx, or who have turned image loading off. Since these users
cannot see graphics, the browser will substitute a marker such as "[IMAGE]" for any image tag. This
is, in effect, a placeholder, but a frustrating one, since there isn't any way for the user to tell what the
image is, or what it says, or what its purpose is.
However, if ALT text has been defined, the browser will display that text instead of the placeholder.
This makes the display a lot nicer and more useful for users who can't see the graphics, and doesn't
affect users who can see graphics at all. A common trick to make image placeholder disappear in text-
only browsers is to set the ALT text to be a single space:
<IMG SRC="generic-image.gif" ALT=" ">
Some people also use no space at all (ALT="") but this particular use of the ALT tag has been known
to confuse certain Web browsers, including some older, but still common, versions of Netscape. For
maximum safety, use the single-space ALT text.
Figure 1 shows two Lynx (text-based Web browser) screen-shots. The first (Figure 1a) is of a
document with a number of images that have not had any ALT text defined. The second screen-shot
(Figure 1b) is the same document, but this time the images have been enhanced with ALT text.
Chybusky
WEB DEVELOPMENT 24
Notice how the use of ALT tags significantly reduces the "clutter" in the document.
In addition to character-based browsers, some graphical browsers will use the ALT text if automatic
image-loading has been turned off. Therefore, ALT is really more of a consideration to the reader
than it is a necessary component of the image tag, but it is still important to the design of any
intelligently constructed Web page.
ALIGN
As was pointed out in Example 1, a lot of vertical space can be wasted when graphics are integrated
into paragraphs. This is because ordinary HTML 2.0 does not support anything which allows for
multiple lines of text flowing past a graphic.
However, the text can be shifted within the vertical space which is created by the graphic. In
addition to having the text lined up with the bottom of the graphic, you can align it to either the top
or the middle of the graphic. This is accomplished using the ALIGN attribute, as in the following:
<IMG SRC="generic-image.gif" ALIGN=top>
This will cause the top of any text on the same line as that graphic to be aligned with the top of the
graphic. There is also an ALIGN=middle option, which will align the text's baseline with the middle of
the graphic, and of course ALIGN=bottom, which is the default display strategy for most browsers.
While the above is all true for HTML 2.0, it is also the case that the HTML 3.2 specification
supports the flowing of text around graphics (that is, allowing multiple lines to wrap around a
graphic). The ability to flow text around a graphic is accomplished through an extension of the
ALIGN attribute, but I will not discuss it here, leaving that instead to another tutorial
Getting the Right Format
Before you go flying off to create the ultimate killer graphic, you need to remember that the
"universal" standard (at least for the near future) is the GIF file format. GIF stands for Graphic
Interchange Format, and all graphical browsers use that format for in-lined images. While this may
change to some degree in the future, for now, my advice is to use GIF files in order to ensure
maximum cross-browser compatibility.
Most advanced graphics programs will save to the GIF format. If they do not, they will usually save
to a format like PICT or PCX, which can then be converted using another program. If you are not
sure how to get your graphics into the GIF format, ask your local computer graphics whiz.
As you have probably guessed, a discussion of graphics could fill up its own tutorial-- there are
issues like file sizing, when to use GIF and when to use JPEG, transparent areas, future
development, and image mapping, just for starters.
Unfortunately, I haven't enough room in this tutorial to tackle this subject. Besides, most of it isn't
about HTML, but more about style decisions, which is outside the scope of my intent for this work.
There are some good style guides available; see Appendix C for some possibly useful links. I hate to
Chybusky
WEB DEVELOPMENT 25
leave you hanging like this, but as Dirty Harry once said, "A man's got to know his limitations."
Sorry.
HR -- Horizontal Ruled Line
The HR element is used to draw a horizontal dividing line completely across the screen. This can be
to logically separate blocks of text, or to separate icon lists from the body of the text.
The HR element is empty (you don't need a </HR>). Netscape extensions are discussed at the bottom
of the page.
Example of HR
The following shows an example of the use of <HR> and the resulting rendering (on your browser).
<p>
The following document is scanned from the back of
a cereal box. To see the scanned image, press the
icon at the bottom of the text ....
</p>
<HR>
<H1> MIGHTY CHOKEE-OS! </H1>
<p>The cereal of chocolate deprived kiddies everywhere! </p>
<p> Aren't you lucky your parents love you enough
to buy you CHOCKEE-OS! </p>
<p> Remember to ask Mom and Dad for NEW SUPER
CHOCKEE-OS, now with Nicotine!!! </p>
This is rendered as:
The following document is scanned from the back of a cereal box. To see the
scanned image, press the icon at the bottom of the text ....
MIGHTY CHOKEE-OS!
The cereal of chocolate deprived kiddies everywhere!
Aren't you lucky your parents love you enough to buy you CHOCKEE-OS!
Remember to ask Mom and Dad for NEW SUPER CHOCKEE-OS, now with
Nicotine!!!
Netscape Attribute Extensions
Netscape introduced four attribute extensions to the HR element -- these are now widely
supported by current browsers, and are integrated into the HTML 4 specification. These
attributes and their meanings are:
• SIZE="n" --specifies the vertical width, in pixels, of the dividing line (n is an
integer).
• WIDTH="n", or "n%" --specifies the horizontal width, in pixels or as a percentage
of the display width, of the dividing line (n is an integer).
• ALIGN="left", "right", "center" -- specifies the alignment of the dividing line on
the page. The default is centered.
• NOSHADE --Draw the dividing line as a solid black bar -- the default is a shaded
bar.
Internet Explorer 3+ also supports a COLOR attribute to set the color of the horizontal rule.
This is not supported by Netscape Navigator.
Here are some examples:
<hr size=4 width=80%>
<hr size=10 width=40>
<hr size=10 width=40 align="left">
<hr size=10 width=40 align="left" noshade>
<hr size = 5 width=20% align="right">
<hr size = 5 width=20% align="left" color="red">
Which are rendered as
Chybusky
WEB DEVELOPMENT 26
You will see nothing special unless your browser supports these Netscape attributes.
Preformatted Text
The PRE element is used to enclose text to be displayed with a fixed width typewriter-like font. This
is useful for presenting text that has been formatted for a teletype, or for a fixed width character
display. It is also commonly used to present typed computer code examples.
In particular, as HTML 2.0 did not contain a TABLE element, the PRE element was the only way in
which structured tables could be properly displayed on most current browsers.
HTML now supports tables, and TABLEs are now supporteed by almost all browsers. This is
discussed in the TABLES documentation.
PRE takes one optional attribute: WIDTH. This supposedly specifies the maximum number of
characters that can be displayed on a single line. However, most browsers ignore this attribute
completely. It is likely that the WIDTH attribute will be dropped in subsequent versions of HTML.
You can include character emphasis elements (EM, STRONG, B, I, etc.) as well as hypertext
anchors within a PRE.
Things to Avoid
You should NOT use elements that define paragraph formatting within the PRE element.
This means you should not use <P>, <ADDRESS>, <Hn> and so on. You should avoid the use of
tab characters -- use single blank characters to space text apart.
Things That are OK
You can use Anchor. A typed carriage return will cause a new line in the presented text.
Example of PRE
The following text:
<PRE WIDTH=30>
Hi there. This is a rather <EM>stupid</EM> example.
Lord only knows what I was thinking at the time. I
suppose I should get more sleep when I do this stuff. But
why should I try and write Shakespearean sonnets when it is
just a stupid example of the <A HREF="pre.html">PRE</A> element!
</PRE>
is rendered:
Hi there. This is a rather stupid example.
Lord only knows what I was thinking at the time. I
suppose I should get more sleep when I do this stuff. But
why should I try and write Shakespearean sonnets when it is
just a stupid example of the PRE element!
Special Effect Tags

You may recall that in Chapter 3, I made a point about using headings to emphasize text within a
paragraph. (For those of you who missed it, the point was that you can't use headings that way.) I
also promised to show you how to highlight text. That's what this chapter is about, among other
things.
Logical Style Tags
The "correct" way to highlight text is to use the logical tags, which do not directly specify the type
of highlighting they will employ. There are 'defaults' written into the specification (see the
quotations below) but there is no direct rule about which tag should be displayed in what way. This
is entirely in keeping with HTML's structural nature.
Emphasis
To quote from the HTML 2.0 specification, the <EM> and </EM> tags provide "typographic
emphasis, typically italics."
Strong
Again from the specification, the <STRONG> and </STRONG> tags provide "strong
typographic emphasis, typically bold."
Chybusky
WEB DEVELOPMENT 27
Citation
<CITE> and </CITE> specify a citation; this includes information like book titles, references,
and so on. The text is usually displayed using italics.
These tags are recommended for use because they leave the most control to the reader of a
document. However, in the real world, the tags in the next section are a lot more popular than those
above.
Forced Style Tags
The tags I will cover here are sometimes called forced style tags, because their very nature forces a
certain style within the document (at least, that's the idea). This does run counter to the entire
"HTML is purely structural" philosophy, but my advice is not to worry about it too much. As long as
you use the logical style tags where appropriate, then you're fine.
The four most commonly used forced style tags are very simple:
Boldface
Everything between <B> and </B> is boldfaced.
Italics
Everything between <I> and </I> is italicized.
Underline
Everything between <U> and </U> should be underlined; however, see the note below.
Typewriter Text
Everything between <TT> and </TT> is in typewriter text (a monospaced font in most browsers).
This is typically used for variable names, or to show snippets of HTML.
The HTML 2.0 Specification does allow the mixing of these styles, but does not require that a
consistent appearance be maintained. In other words, different browsers will display combined styles
differently. Some will pick one or the other style, others will not display either, and a few will
simply crash.
In some browsers, especially Netscape up to 1.12/1.22, the underline tag is not recognized. This is
because the underline tag is still being proposed for inclusion in the HTML specification. As of this
writing, it was still not part of official HTML 2.0 but part of the 3.0 draft. Most browsers do support
underlining, but be aware that you cannot count on this. If the word "underlined" in the explanation
for Underline, above, is in fact not underlined, then your browser does not support the underline tag.
Chybusky
WEB DEVELOPMENT 28
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
DAY 5
HTML Tables And Form
With HTML you can create tables.
Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each
row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the
content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules,
tables, etc.
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
How it looks in a browser:
row 1, cell 1 row 1, cell 2
Tables and the Border Attribute

If you do not specify a border attribute the table will be displayed without any borders. Sometimes
this can be useful, but most of the time, you want the borders to show.
To display a table with borders, you will have to use the border attribute:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
Headings in a Table
Headings in a table are defined with the <th> tag.
Chybusky
WEB DEVELOPMENT 29
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Heading Another Heading
Empty Cells in a Table
Table cells with no content are not displayed very well in most browsers.
<table border="1">
<tr>
</tr>
<tr>
<td></td>
</tr>
</table>
row 2, cell 1
Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the
border).
To avoid this, add a non-breaking space ( ) to empty data cells, to make the borders visible:
<table border="1">
<tr>
</tr>
<tr>
<td> </td>
</tr>
</table>
row 2, cell 1
Table Tags
Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
Chybusky
WEB DEVELOPMENT 30
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in a table
<thead> Defines a table head
<tbody> Defines a table body
<tfoot> Defines a table footer
FORMS Element for fill-out Forms
The HTML Language contains several elements that allow for user input. The simplest of these is
ISINDEX, which can take a single line of text as user input. Much more sophisicated is the FORM
element and its associated sub-elements INPUT, TEXTAREA, and SELECT, which allow for more
sophisticated user input via fill-in FORMs. These allow for author specified radio and checkbox
buttons (using INPUT elements), single-line text input fields (again using INPUT), selectable lists
(via SELECT) and block text input regions (via TEXTAREA).
The data input into a FORM are sent to a server, although in this case the FORM element contains
an attribute, ACTION, which specifies the URL to which the data should be sent. In addition, the
FORM element can select the HTTP method by which the data are sent -- the GET HTTP method
means that the data are appended to the URL like a query string, while the POST method means that
the data are sent as a message body, much as data are sent from the server to the browser, but in the
opposite direction.
I have not written a long on-line description of forms, although this topic is covered in detail in my
printed book, and there are several FORM examples in the online supporting Web site. This online
collection contains (1) a simple introduction to what FORMS do and (2) a link to the more detailed
NCSA document (containing serveral examples)
What do FORMS do?
The FORM element allows you to create a fill-out form: the user reading the HTML document will
see the FORM elements as user input elements -- he or she can then type information into the fields
or select from buttons and pull-down menus to input their data. WHen the user submits the FORM,
the data are encoded and transmitted to a server, where it must be interpreted and processed by a
program. In general, this is done by so-called CGI, or Common Gateway Interface programs,
residing on an HTTP server.
An example (if rather idiotic) FORM is:
<FORM ACTION="http://bla.bla.edu/cgi-bin/some-prgm" METHOD=POST>
First entry field: <INPUT NAME="entry1"> <BR>
Second entry field: <INPUT NAME="entry2" VALUE="bloop"> <BR>
Third entry field: <INPUT NAME="entry3"> ---
Select Option: <SELECT NAME="entry4">
<OPTION VALUE="no1">Frogs
<OPTION VALUE="no2">Peaches
<OPTION VALUE="no3">Cream
<OPTION VALUE="no4">Newts
</SELECT>
To submit the query, press:
<INPUT TYPE="submit" VALUE="Submit Query">. <P>
</FORM>
(note that you can use TABLEs to format the layout of the form). The above FORM is rendered as
follows:
First text entry field:

bloop
Second entry field:
Third entry field: --- Select Option:
Submit Query
To submit the query, press: .
Chybusky
WEB DEVELOPMENT 31
The user simply fills in the blanks or selects items from the list and presses "submit" (note that this
form tries to access a nonexistent remote resource!)
FORMS are supported by practically all browsers. If you see nothing above here that looks like a
form, then your browser must be very old!
Meanings of FORM Attributes
The ACTION specifies the url to which the form results will be sent: this URL should point to a cgi-
bin/ script or program. If absent, the ACTION is taken to be the url of the current document -- that
is, the data is returned to the same place from whence the document came.
The METHOD specifies the HTTP method to be used to submit the form information to the server.
METHOD can have two arguments:
• GET (the default) - the form contents are appended to the url (after the question mark) just as
with ISINDEX queries.
• POST - the form contents are sent to the server in the body of the message. This is the
recommended usage, although you must be sure your HTTP server supports the POST
method.
The ENCTYPE attribute specifies the way in which the data are to be encoded. This attribute is only
relevant when METHOD="post", as the GET method only allows one type of encoding. For "post",
the two possible values are:
• "application/x-www-form-urlencoded" (the default) - the form contents is encoded as if it
were to be appended to the end of a URL (as in GET method).
• "multipart/form-data" - the data is send as a MIME multipart message.
The latter is useful for big forms, for forms that include files sent from the browser (using file
upload), or for document written in non ASCII characters (for example, Japanese or Hebrew).
If you are writing your own FORMS you also need to write a cgi-bin script or program to interpret
the FORM entries -- after all, something has to understand the data sent to the server. You will
therefore also want to look at the cgi-bin section and related documents.
Chybusky
WEB DEVELOPMENT 32
Extra
HTML Colors
Colors are displayed combining RED, GREEN, and BLUE light sources.
Color Values
HTML colors can be defined as a hexadecimal notation for the combination of Red, Green, and Blue
color values (RGB).
The lowest value that can be given to one light source is 0 (hex #00) and the highest value is 255
(hex #FF).
The table below shows the result of combining Red, Green, and Blue light sources:.
Color Color HEX Color RGB
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)
W3C Standard Color Names

W3C has listed 16 color names that will validate with an HTML validator.
The color names are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red,
silver, teal, white, and yellow.
Cross-browser Color Names

A collection of nearly 150 color names are supported by all major browsers.
View the cross-browser color names
Cross-browser Color Values

Some years ago, when most computers only supported 256 different colors, a list of 216 Web Safe
Colors was suggested as a Web standard. The reason for this was that the Microsoft and Mac
operating system used 40 different "reserved" fixed system colors (about 20 each).
We are not sure how important this is now, since most computers today have the ability to display
millions of different colors, but the choice is left to you.
The 216 cross-browser color palette was created to ensure that all computers would display the
colors correctly when running a 256 color palette:
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
Chybusky
WEB DEVELOPMENT 33
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
HTML Color Values

Colors are displayed combining RED, GREEN, and BLUE light sources.
Color Values
HTML colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue
color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex #00).
The highest value is 255 (hex #FF).
Turn Off the Red

If you turn off the Red light completely, there are 65536 different combination of Green and Blue
(256 x 256) to experiment with.
Click here to see some of these combinations of Green and Blue.
Chybusky
WEB DEVELOPMENT 34
Turn On the Red
By setting the Red parameter to its maximum value, there are still 65536 different combination of
Green and Blue (256 x 256) to experiment with.
Click here to see some of these combinations of Green and Blue.
16 Million Different Colors

The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million
different colors to play with (256 x 256 x 256).
Most modern monitors are capable of displaying at least 16384 different colors.
If you look at the color table below, you will see the result of varying the red light from 0 to 255,
while keeping the green and blue light at zero.
To see a full list of 16384 different colors based on red light varying from 0 to 255, click on one of
the hexadecimal or rgb values below.
Red Light HEX RGB
#000000 rgb(0,0,0)
#080000 rgb(8,0,0)
#100000 rgb(16,0,0)
#180000 rgb(24,0,0)
#200000 rgb(32,0,0)
#280000 rgb(40,0,0)
#300000 rgb(48,0,0)
#380000 rgb(56,0,0)
#400000 rgb(64,0,0)
#480000 rgb(72,0,0)
#500000 rgb(80,0,0)
#580000 rgb(88,0,0)
#600000 rgb(96,0,0)
#680000 rgb(104,0,0)
#700000 rgb(112,0,0)
#780000 rgb(120,0,0)
#800000 rgb(128,0,0)
#880000 rgb(136,0,0)
#900000 rgb(144,0,0)
#980000 rgb(152,0,0)
#A00000 rgb(160,0,0)
#A80000 rgb(168,0,0)
#B00000 rgb(176,0,0)
#B80000 rgb(184,0,0)
#C00000 rgb(192,0,0)
#C80000 rgb(200,0,0)
#D00000 rgb(208,0,0)
#D80000 rgb(216,0,0)
#E00000 rgb(224,0,0)
#E80000 rgb(232,0,0)
#F00000 rgb(240,0,0)
Chybusky
WEB DEVELOPMENT 35
#F80000 rgb(248,0,0)
#FF0000 rgb(255,0,0)
Shades of Gray
Gray colors are displayed using an equal amount of power to all of the light sources. To make it
easier for you to select the right gray color we have compiled a table of gray shades for you:
RGB(0,0,0) #000000
RGB(8,8,8) #080808
RGB(16,16,16) #101010
RGB(24,24,24) #181818
RGB(32,32,32) #202020
RGB(40,40,40) #282828
RGB(48,48,48) #303030
RGB(56,56,56) #383838
RGB(64,64,64) #404040
RGB(72,72,72) #484848
RGB(80,80,80) #505050
RGB(88,88,88) #585858
RGB(96,96,96) #606060
RGB(104,104,104) #686868
RGB(112,112,112) #707070
RGB(120,120,120) #787878
RGB(128,128,128) #808080
RGB(136,136,136) #888888
RGB(144,144,144) #909090
RGB(152,152,152) #989898
RGB(160,160,160) #A0A0A0
RGB(168,168,168) #A8A8A8
RGB(176,176,176) #B0B0B0
RGB(184,184,184) #B8B8B8
RGB(192,192,192) #C0C0C0
RGB(200,200,200) #C8C8C8
RGB(208,208,208) #D0D0D0
RGB(216,216,216) #D8D8D8
RGB(224,224,224) #E0E0E0
RGB(232,232,232) #E8E8E8
RGB(240,240,240) #F0F0F0
RGB(248,248,248) #F8F8F8
RGB(255,255,255) #FFFFFF
HTML Color Names

The table below provides a list of the color names that are supported by all major browsers.
Chybusky
WEB DEVELOPMENT 36
Note: If you want your pages to validate with an HTML or a CSS validator, W3C has listed 16 color
names that you can use: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple,
red, silver, teal, white, and yellow. If you want to use other colors, you must specify their RGB or
HEX value.
Click on a color name (or a hex value) to view the color as the background-color along with
different text colors:
Color Name Color HEX Color
AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Cyan #00FFFF
DarkBlue #00008B
DarkCyan #008B8B
DarkGoldenRod #B8860B
DarkGray #A9A9A9
DarkGrey #A9A9A9
DarkGreen #006400
DarkKhaki #BDB76B
DarkMagenta #8B008B
DarkOliveGreen #556B2F
Darkorange #FF8C00
DarkOrchid #9932CC
DarkRed #8B0000
DarkSalmon #E9967A
DarkSeaGreen #8FBC8F
DarkSlateBlue #483D8B
DarkSlateGray #2F4F4F
Chybusky
WEB DEVELOPMENT 37
DarkSlateGrey #2F4F4F
DarkTurquoise #00CED1
DarkViolet #9400D3
DeepPink #FF1493
DeepSkyBlue #00BFFF
DimGray #696969
DimGrey #696969
DodgerBlue #1E90FF
FireBrick #B22222
FloralWhite #FFFAF0
ForestGreen #228B22
Fuchsia #FF00FF
Gainsboro #DCDCDC
GhostWhite #F8F8FF
Gold #FFD700
GoldenRod #DAA520
Gray #808080
Grey #808080
Green #008000
GreenYellow #ADFF2F
HoneyDew #F0FFF0
HotPink #FF69B4
IndianRed #CD5C5C
Indigo #4B0082
Ivory #FFFFF0
Khaki #F0E68C
Lavender #E6E6FA
LavenderBlush #FFF0F5
LawnGreen #7CFC00
LemonChiffon #FFFACD
LightBlue #ADD8E6
LightCoral #F08080
LightCyan #E0FFFF
LightGoldenRodYellow #FAFAD2
LightGray #D3D3D3
LightGrey #D3D3D3
LightGreen #90EE90
LightPink #FFB6C1
LightSalmon #FFA07A
LightSeaGreen #20B2AA
LightSkyBlue #87CEFA
LightSlateGray #778899
LightSlateGrey #778899
Chybusky
WEB DEVELOPMENT 38
LightSteelBlue #B0C4DE
LightYellow #FFFFE0
Lime #00FF00
LimeGreen #32CD32
Linen #FAF0E6
Magenta #FF00FF
Maroon #800000
MediumAquaMarine #66CDAA
MediumBlue #0000CD
MediumOrchid #BA55D3
MediumPurple #9370D8
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGreen #00FA9A
MediumTurquoise #48D1CC
MediumVioletRed #C71585
MidnightBlue #191970
MintCream #F5FFFA
MistyRose #FFE4E1
Moccasin #FFE4B5
NavajoWhite #FFDEAD
Navy #000080
OldLace #FDF5E6
Olive #808000
OliveDrab #6B8E23
Orange #FFA500
OrangeRed #FF4500
Orchid #DA70D6
PaleGoldenRod #EEE8AA
PaleGreen #98FB98
PaleTurquoise #AFEEEE
PaleVioletRed #D87093
PapayaWhip #FFEFD5
PeachPuff #FFDAB9
Peru #CD853F
Pink #FFC0CB
Plum #DDA0DD
PowderBlue #B0E0E6
Purple #800080
Red #FF0000
RosyBrown #BC8F8F
RoyalBlue #4169E1
SaddleBrown #8B4513
Chybusky
WEB DEVELOPMENT 39
Salmon #FA8072
SandyBrown #F4A460
SeaGreen #2E8B57
SeaShell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
SkyBlue #87CEEB
SlateBlue #6A5ACD
SlateGray #708090
SlateGrey #708090
Snow #FFFAFA
SpringGreen #00FF7F
SteelBlue #4682B4
Tan #D2B48C
Teal #008080
Thistle #D8BFD8
Tomato #FF6347
Turquoise #40E0D0
Violet #EE82EE
Wheat #F5DEB3
White #FFFFFF
WhiteSmoke #F5F5F5
Yellow #FFFF00
YellowGreen #9ACD32
Chybusky
WEB DEVELOPMENT 40
CHAPTER 2
DAY 6
INTRODUCTION TO JavaScript
This course deals with Scripts. A Script is a segment of code that manipulates the browser and its
contents in ways that is not possible with ordinary HTML or Cascading Style Sheets. By using a
script in your web pages, you can gain more control of how the page looks and behaves: dates and
times can be added to the page, form elements validated before the contents are sent, browser details
checked, cookies set, even simple games can be added to a web page - all with a scripting language.
The learning curve for scripting is a lot a steeper than HTML and Style Sheets. But you can learn the
basics, and use scripts on your own pages, without it causing you too much trouble. The scripting
language covered in these pages is meant to get you started on the subject, and is not intended as an
in-depth study.
We're going to study the JavaScript programming language, because it is a widely-used scripting
language for web pages. All the scripts in these pages have been tested with modern versions of a
wide variety of browsers. If you're ready, then, let's make a start.
A First Script
Let's jump right in with a bit of code. Fire up whatever HTML Editor you use. With your editor
open, copy the following code. When you're done copying it, save your work and load it into your
browser.
<HTML>
<HEAD>
<TITLE>A First Script</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = JavaScript>
document.write("Hello World")
</SCRIPT>
</BODY>
</HTML>
All right, how did you get on? All that typing should have gotten you this in the browser:
"Hello World"
Granted, that's a heck of a lot of trouble to go to just to write "Hello World". But it's a start. Let's
explain what's going on.
When you're writing your scripts, you enclose them between two <SCRIPT> tags, an opening one
and a closing one. The opening one should tell the browser what language the script is written in:
The closing Script tag is just the word SCRIPT in between two angle brackets with a forward slash:
</SCRIPT>
Most of your JavaScript will go between these two tags. So what's all that "document dot write" bit?
Document is part of something called the Document Object Model. Document refers to all the text
and HTML elements between the two BODY tags. And that includes any attributes inside the
BODY tag itself. Like BGCOLOR.
Write( ) is a method of Document. A method is a bit of code that actually does something. As
opposed to a Property, which IS something. Methods are usually Verbs, and Properties usually
Chybusky
WEB DEVELOPMENT 41
Nouns. The Write( ) method writes text (and numbers as well) between the two BODY tags on your
page.
For all you English language experts out there who might be protesting about the lack of capital
letters, Document is spelt with a lowercase "d", and Write with a lowercase "w". Try changing your
code to this and see what happens:
Document.Write("Hello World")
JavaScript is damned picky about capital letters - it doesn't like them at all!
The part or parts between the two brackets of write( ) are what will be written to your page. Direct
text goes between two double quotes; Variables don't need any. Whoops, we haven't done variables
yet. We'll get to them.
So the whole line reads "Write the text Hello World between the two BODY tags of the web page."
Don't worry if you don't understand some of that - the main point is that you are up and running, and
you've written your first script. The journey has just started.
Where to put the Script Tags
The Script Tag and HTML
At the moment, we have our script between the two BODY tags. And it works perfectly well here.
It's quite happy where it is. However, SCRIPTS are best kept in the HEAD section of your HTML.
This is because any code in the HEAD section will be dealt with first by the browser. And besides,
it's neater up there. You're not cluttering up your HTML code with lots of JavaScript.
So, cut your script out of the BODY section, and paste it into the HEAD section. Like this:
<HTML>
<HEAD>
<TITLE>A First Script</TITLE>
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Save your work, and then view the results in your browser. Did it make a difference? No, it did not.
But rest assured that your script was dealt with before anything in the BODY section.
You can also put your scripts into HTML tags. Here's the document.write() code inserted into a
Form's Button code:
<BODY>
<INPUT TYPE = Button VALUE = "Click Me" OnClick = "document.write('Hello World')">
</BODY>
Looks a bit messy, but then scripting languages can get like that. Notice, however, that we've shifted
the document code to our button:
OnClick = "document.write('Hello World')"
OnClick is an event that can be applied to buttons (amongst other things.) We'll get to Events later,
but for now, note that the same code we wrote earlier then goes after an equals sign ( = ). Or is it the
same code? Have you spotted the difference?
Yes, Hello World is now in single quotes! That's because we used up our double quotes surrounding
the document.write() part. And JavaScript doesn't like you using two sets of double quotes in the
same bit of code. There's a lot of things that JavaScript doesn't like. Get used to it.
So what have we learnt so far? We've learnt this:
• Scripting code is written between a pair of <SCRIPT> </SCRIPT> tags
• You can refer to the two BODY tags by using the word "document"
• You can use the write( ) method of document to insert stuff onto your web pages
Chybusky
WEB DEVELOPMENT 42
• JavaScript is very picky about the way you spell things
The Pop-up message box
We've seen one way to display text - with the write() method of document. Another way to display
text (and numbers) is with a little pop-up box. These are called Alert boxes in JavaScript, and they
are ideal for nagging your users when they don't fill in your forms correctly. Here's a picture of one:
The code for an Alert box is quite simple. It's this:

alert("That was not a proper email address")
Notice the cunning use of "alert" for an alert box? The message you want to get over to your users
goes between the two brackets. Surround your text message with double quotes, or single quotes if
you're putting it after an equals sign in a HTML element.
OnClick = "alert('That was not a proper email address')"
All right, now that we know how to nag our users with pop-up boxes and written messages, what
else can we do? Lots, actually. Let's have a look at that document thing again.
The Document Object (Part One)
Chybusky
WEB DEVELOPMENT 43
DAY 7
That Document Thing
As was mentioned, document is a part of the Document Object Model. We saw a method that can be
used with document, but here's a couple more (Properties and Methods).
Properties
• bgColor
• fgColor
• title
• location
• images
• forms
Methods
• open()
• close()
• write()
• writeln()
There are quite a few more Properties and Methods you can use with document, but these are
enough for us. Let's see how you can use them in your own scripts.
Start a new web page in your HTML Editor (Or use an old one, if you like - waste not, want not!)
Then add this to the BODY section of your page:
<BODY>
<INPUT TYPE = Button VALUE = "Colour One" Onclick = "document.bgColor = 'Red'">
<INPUT TYPE = Button VALUE = "Colour Two" Onclick = "document.bgColor = 'Blue'">
<INPUT TYPE = Button VALUE = "Colour Three" Onclick = "document.bgColor = 'Green'">
</BODY>
Remember, when you're typing the OnClick code that this bit
"document.bgColor = "
is surrounded by double quotes, and this bit:
'Green'
is surrounded by single quotes. And the whole thing is a confusion of single and double quotes:
Onclick = "document.bgColor = 'Green'"
When you're done, save your work and view the results in your browser. Click the button and see
what happens.
Well, how did you get on? That should impress the neighbours, hey? If it doesn't, you have some
very strange people living next-door to you. Try moving house until you find some neighbours who
are impressed.
The background colour of your web page should have changed colour when you clicked a button. It
did this because of the bgColor poperty of the document object.
document.bgColor =
After the equals sign, you can either type a name of a colour, or better use an Hexadecimal value:
document.bgColor = #FF0000
document.bgColor = #0000FF
document.bgColor = #00FF00
The fgColor property is similar to the bgColor property. Except it will change the colour of any
foreground text on your page. Try it out and see how it works. You only need to change the "b" of
"bgColor" to an "f". And type some text.
Chybusky
WEB DEVELOPMENT 44
The document Title Property
The Title of a web page appears at the very top of the browser window. You set it by typing some
text between the two <TITLE> tags. You can use JavaScript to either get the Title or to set a new
one. Here's a script that pops up the Title in an alert box. Try it out and see it in action:
<HTML>
<HEAD>
<TITLE>The title of this web page</TITLE>
alert(document.title)
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
You can also reset the title of the web page. Change you alert code to this:
alert(document.title = "Now I've changed it")
The equals sign in there doesn't actually mean equals. It means "assign the value". So what we're
saying is "Assign the value of 'Now I've changed it' to the title of the document."
Any direct text that you type after the "assignment operator" (the equals sign) needs to go inside
double quotes.
Load up your new code in your browser, and watch what happens. First, you'll get an alert box:
Netscape/Mozilla Alert Box
Internet Explorer Alert Box
But that's not the only thing that happens. If you look at the very top of your browser, the title should
have change from "The title of this web page" to "Now I've changed it." Here's the changed version
in the two most popular browsers:
Now that you're an expert with alert boxes, here's a little exercise.
Chybusky
WEB DEVELOPMENT 45
Exercise
• Use an alert box to test out the location property of document.
In the next part, we'll see how to set up an easy rollover using JavaScript and images.
Chybusky
WEB DEVELOPMENT 46
Day 8
A JavaScript Rollover
For this part, you may need these two images. Right click on the images, and save them to your own
computer:
Now we can begin.

A useful property of document is images. The images property tells you if any images are loaded. If
the answer is yes, and your HTML images have a NAME attribute, document.images can gain
access to them. Why is this useful? Well, let's see. Examine this HTML code for an image:
<BODY>
<IMG SRC = "pointer1.jpg" NAME = "but1">
</BODY>
Simple enough, because it's just standard HTML Image code. We can turn the image into a link by
surrounding it with an Anchor tag:
<BODY>
<A HREF = "page2.html">

<IMG SRC = "pointer1.jpg" NAME = "but1" Border = 0>
</A>
</BODY>
Still, simple enough: now we've just added the HREF tag and switched the borders off in the image.
However, we can add a bit of JavaScript to the Anchor link. This bit of JavaScript uses the images
property of document. Like this:
<BODY>
<A HREF = "page2.html" OnMouseOver = "document.images.but1.src= 'pointer2.jpg'">
<IMG SRC = "pointer1.jpg" NAME = "but1" Border = 0>
</A>
</BODY>
That code looks a bit messy spread over two lines. Notice, though, what was added to the HREF
code. It was this:
OnMouseOver = "document.images.but1.src= 'pointer2.jpg'"
Remember the OnClick event of the button you did? Well, OnMouseOver is another event you can
use. This event does something when the user places the mouse over a link, or an image, or
whatever. After the equals sign (assignment operator, if you please), we write the code (not
forgetting all those awfully messy double and single quotes):
"document.images.but1.src= 'pointer2.jpg'"
See what we're pointing at? The document.images part is pointing to our image that has the NAME
but1. We're then saying access the SOURCE (src), and change it to 'pointer2.jpg'.
To see the effect that all this code has, move your mouse over the image below. Move it away and
then back again.
Neat, hey? Are the neighbours impressed yet? Blimey, they're a tough crowd.
The code for the "dancing hand" uses an event related to the OnMouseOver event - the OnMouseOut
event. The code is then exactly the same, except you're resetting the image back to pointer2:
OnMouseOut ="document.images.but1.src='pointer2.jpg'"
Chybusky
WEB DEVELOPMENT 47
So by using the images property of document you can create a rollover effect. This is not, however,
the recommended way to create a rollover. The standard way is to pre-load the images in the head
section of the web page, then use something called a function to switch the images around.
Another property of document is forms. We're going to use the Form property of document to
validate user input. For that, we need to delve a little deeper into the JavaScript, so we'll leave it till
later.
JavaScript Methods and Events
Let's have a look at those document Methods. They were: open( ), close( ), write( ), writeln( ).
We've already done write( ), and writeln( ) is the same as write( ) except that you get a line break. So
we'll look (briefly) at open( ) and close( )
open( )
We're not going to be using this method, but for reference purposes here's what it does.
The default for document.write( ) is to write stuff in the current document window - the browser
window. It doesn't need to open a new window, because it already has one to work with. You can
use document.open( ) to create a new document and send it things like HTML code. You could send
the HTML code with document.write( )
document.open( )
document.write("<H1>Hello</H1>")
close( )
This method is used to close the document you created with the open( ) method.
Events
Two useful document Events you can use are these:
onLoad =
onUnload =
These are typically used in the BODY section of the HTML code. Here's two pieces of code that will
annoy visitors to your site:
<BODY onLoad = "alert('Welcome to my web page')">

Or when they leave your site, there's this:
<BODY onUnoad = "alert('Goodbye - Have a nice day')">
We'll see another way to annoy your visitors when we create a pop-up window. We'll do that real
soon. The next part will look at another object that is widely used - the navigator object.
Testing your Visitor's Browser
The document object dealt with code between the BODY tags. The navigator object is used to
reveal information about the browser your visitors are using. Because some browsers can't deal with
certain things (like the document.images code we wrote), the navigator object is typically used to
help divert these users away from any code that they can't handle.
Two Properties of the navigator object are:
appName
userAgent
Let's use an alert box to test them out. If you don't want to open a new page for this exercise, you can
just comment out any old code between SCRIPT tags. Like this:
// document.open()
// document.write("<H1>Hello</H1>")
The two forward slashes mean "please ignore this code". Whether you decide to create a new web
page, or use an old one, type this code in the HEAD section of the page:
alert(navigator.appName)
</SCRIPT>
Chybusky
WEB DEVELOPMENT 48
If you're using Internet Explorer, you'll get this before the page loads:
Whereas, if you're using Netscape/Mozilla, you'll get this before the page loads:
Try changing the alert box to this:

alert("Your Browser is: " + navigator.appName)
</SCRIPT>
The plus sign (+) is used to combine things. Here, we're combining the direct text "Your Browser
is:" with whatever value is returned from navigator.appName. Note that the direct text has double
quotes surrounding it, and navigator.appName doesn't. Save your work and load the web page
again. You should get something like this (in Netscape):
OK, so we can tell which browser our visitor is using. But there are many different versions of
Netscape and Internet Explorer. An early version of Netscape won't be able to do as much as the
latest version, and therefore may not be able to run our scripts. If we just use navigator.appName we
won't be able to tell if our user has an early version or the latest version.
To solve the problem, we can use navigator.userAgent. Change your alert box to this:
alert(navigator.userAgent)
Now reload your web page.
Internet Explorer will give you something like this:
The part that's useful to us is MSIE 5.01. This tells us that our visitor is using Microsoft Internet
Explorer version 5.01. Here's the Netscape version:
The information we're looking for is now on the end: Netscape 6
Chybusky
WEB DEVELOPMENT 49
By using navigator.userAgent we can return all of that text and store it in a variable. We'd then use
a JavaScript function to strip out the bit we're looking for. An IF statement is then typically used to
execute code depending on what the browser is.
In the next part, we'll take a look at how to get the size of the screen your visitor is using, and take a
little history lesson.
Screen Size, the History Property
The window object is actually at the top of the DOM tree. It's the boss man of the Document Object
Model. If we we're being strictly accurate, we should have been using this:
window.document.write("Hello")
And this:
window.navigator.userAgent
But for convenience sake, window is usually left off. This is because most of your code will be
written in the current browser window, and not some other window that you haven't told your
browser about.
The window object has some other useful tricks up its sleeve, though. You can find out information
about the screen your visitor is using. By using the screen Property of window, you can add
Properties that screen has. Like this:
window.screen.height
Some other properties of screen are: width, availHeight, availWidth, colorDepth.
Let's use width and height to get the size of the screen our visitors are using. After all, they might
have a tiny monitor and have to scroll way to the left to see our fancy web page. We could then
redirect them to another page, if they have a small monitor.
Screen Size
Copy this code into your editor. Place it in the HEAD section of your HTML. Save your work and
test the script in your browser:
<Script language = JavaScript>
UserWidth = window.screen.width
UserHeight = window.screen.height
UserWidth = "Screen Width = " + UserWidth
UserHeight = " Screen Height = " + UserHeight
alert(UserWidth + UserHeight)
</Script>
The code is a little more complicated than before. But not too complicated. First, we're storing the
value in width to something called a variable:
A variable is a little storage area. Think of it as a little cupboard or drawer. Instead of putting socks
or underwear in the drawer, you're putting text or number into it. Your little storage area needs a
name (else how could you tell which drawer held the socks and which your underwear?). The
variable name is UserWidth. This is a name we made up ourselves. You can use just about anything
you want as a variable name. (But there are a number of words JavaScript likes to keep for itself.)
To put something in your drawer (variable) you type an assignment operator (the equals sign), then
type whatever you want to put into the drawer (variable).
If you putting text into the variable, surround the text with double quotes:
UserWidth = "This will hold a width"
If you're putting numbers into the variable, don't surround the numbers with double quotes:
UserWidth = 600
Or you can combine the two with the plus sign (+):
UserWidth = "This will hold a width of " + 600
You can also put the value held in another variable into your new variable. Like we did for our code:
The value held in the last bit (width), is now stored in our variable with the name UserWidth. Then
we just combine direct text with the value we've just stored in UserWidth:
UserWidth = "Screen Width = " + UserWidth
Chybusky
WEB DEVELOPMENT 50
Finally, we combine the two variables in an alert box:
alert(UserWidth + UserHeight)
When you load your web page, you should see a message box like this one:
Exercise
Use availHeight, availWidth, colorDepth to find out the available height of your own screen, the
available width of your own screen, and the colour depth of your screen. Display the results in an
alert box like this one (Netscape):
You can start a new line by adding "\n" to the end of your variable declaration. Like this:
AHeight = window.screen.availHeight + "\n"
The history object

The history object can be added to window. The history object can be used to move your user back
or forward. The result is exactly the same as clicking the Back and Forward buttons on the browser
toolbar. You can also use history.go() to move your users a specified number of pages either
backwards or forwards. The history object works like this:
alert("Sorry, this page is under construction")
window.history.back()
</Script>
That script could go in say page2.html. On page1.html, there might be a link leading to page2.html.
When the link is clicked, the above script will be executed in page2.html. The results is that first the
alert box displays. Then the second line of code gets executed. This uses the back() method of the
history object to take the user back to where they came from. The forward() method the same way,
except your user will be taken forward one page in the browsing history.
To use the go() method of the history object, just type a number in between those two brackets. Like
this:
window.history.go( -2 )
The minus two means back two pages. To go forward, just remove the minus sign (-).
OK, we've explored a fair bit of the Document Object Model. You should, by now, have a good idea
of what can be done with it. To do anything more, though, we're going to need to delve a little
deeper into the JavaScript language. So a word of warning - programming starts here!
Chybusky
WEB DEVELOPMENT 51
Day 9
Setting up variables in JavaScript
You have just learnt what a variable is (Screen height and width section), and that it is a little
storage area for text and numbers. Let's explore variables a bit more.
Variables
For our purposes, variables can hold two types of information: Numbers, and Strings. We've seen
how strings work (strings are text), so let's have a go at number variables.
Number variables in JavaScript can be integers, floating point, or Boolean. An integer is a number
without a decimal point; if you absolutely insist on having a decimal point then the thing you want is
called a floating point number; Boolean numbers are not really numbers at all but just a record of
whether something is true or not true (think of a light switch - is it on or off?). Here's some examples
of all three number types:
Integer Floating Point Boolean 3 3.5 true 16 16.8 false 136 136.58 true
To store one of those number types into a variable, just use the assignment operator ( = ). The
number goes on the right hand side of the assignment operator, and your variable name goes on the
left. Here's an example of how to store number types into variables:
Number1 = 3
Number2 = 3.5
Number3 = true
Number1, Number2, and Number3 are our variable names. We could have used anything we liked
here. As long as we're not using the handful of words JavaScript reserves for itself, and not starting
with a number, and not putting any spaces in the variable name, we're all right. Here's some valid
and invalid variable names
BobsNumber = 3 (valid variable name)
Bobs Number = 3 (invalid variable name - space)
3bobsnumber = 3 (invalid variable name - starts with a number)
A good idea when declaring variables, and putting values into them, is to use the word var in front
of them. Like this:
var Number1 = 3
The word var is short for variable. It ensures that any variable with the same name elsewhere in your
code doesn't overwrite it. Which is a pain, believe me. For clarity's sake, however, we'll leave var
out of our declarations.
You can store the value in one variable name in another variable. Take this as an example:
A=2
B=A
Here, the variable "A" is assigned a value of 2. The value inside "A" is then assigned to the variable
"B". So what's inside "B"? Not the letter "A", but the number 2, of course.
If you want to add, subtract, multiply, and divide your values, you'll need the operators. The four
basic operators are these :
+ (Add)
- (Subtract)
* (Multiply)
/ (Divide)
Actually, the last two should be the first two. That's because Multiply ( * ) and Divide ( / ) are done
first when JavaScript is doing its sums. But, anyway, here's the operators in action. Try these scripts
out in a web page, and see how you get on:
<SCRIPT Language = JavaScript>
A=2
B=A
C=B+A
alert(C)
</SCRIPT>
Chybusky
WEB DEVELOPMENT 52
A=2
B=4
C=B*A
alert(C)
</SCRIPT>
A=2
B=4
B=B-A
alert(B)
</SCRIPT>
A=2
B=4
B=B/A
alert(B)
</SCRIPT>
A=2
B=4
C=6
D = (B * C) / A
alert(D)
</SCRIPT>
So, how did you get on? The brackets in the last script are for sectioning off code that you want
handled separately. Anything in brackets gets dealt with first. So B is multiplied by C first, then the
total is divided by A.
Adding numbers in textboxes
We'll design a web page with a three text boxes and a command button. When the command button
is clicked, any numbers in the first two boxes will be added together. The answer will appear in the
third text box. Here's what your form will look like when it's finished (The button doesn't do
anything yet, if you click it):
Number One: Number Two:
Total:
So you type a number into the Number One text box, and type a number into the Number Two text
box. When the "Add Numbers" button is clicked, the total will appear in the "Total" box. Let's
design the HTML Form first (You can copy and paste this).
<FORM NAME = frmOne>
Number One: <INPUT TYPE = Text NAME = txtFirstNumber SIZE = 5 value ="">
Number Two: <INPUT TYPE = Text NAME = txtSecondNumber SIZE = 5 value ="">
<P>
Total: <INPUT TYPE = Text NAME = txtThirdNumber SIZE = 5 value = "">
<P>
<Input Type = Button NAME = b1 VALUE = "Add Numbers" onClick = calculate()>
</FORM>
OK, it might look a bit messy, but it's just a standard HTML form. You can use your HTML Editor
to design it. Note a few things about the form, though. First, that the form has a NAME:
When we're writing the code, we need to tell the browser which form we're talking about. Our form
is called "frmOne". For the very same reason, all three text boxes have NAMES:
Chybusky
WEB DEVELOPMENT 53
txtFirstNumber
txtSecondNumber
txtThirdNumber
Note, too, that all three text boxes have a VALUE attribute.
The button has an onClick event that is crucial to the operation:
onClick = calculate( )
Remember that name - calculate( ). We're going to be seeing that in the SCRIPT section. So, in the
HEAD section of your web page, write the following script:
<SCRIPT language = JavaScript>
function calculate() {
A = document.frmOne.txtFirstNumber.value
B = document.frmOne.txtSecondNumber.value
C = (A + B)
document.frmOne.txtThirdNumber.value = C
}
</SCRIPT>
A function is a way to group together a section of code. This function will calculate the two numbers
from our text boxes, and pop the answer in the third text box. The syntax for a JavaScript function is
this:
function FunctionName() {
}
Our FunctionName was calculate(), which was the one from the command button. When the button
is clicked, the browser will try to find a function called calculate(). Note that when setting up a
function you need a lowercase "f" and not a capital "F". After the name of your function, type a pair
of round brackets. You can put something called an argument in between the round brackets. But our
function has no arguments, so we just leave them empty. After the round brackets, type a space, then
type a left curly bracket { . The code for the function itself goes next (on a new line), and then you
type a right curly bracket }.
Here's our function again:
C = (A + B)
}
The first line of the code is this:
The value we're putting in the variable called "A" is coming from the first text box. The part on the
right of the equals sign ( = ) might look a bit long and complicated, but all we're doing is telling the
browser which text box we're referring to. We're saying this:
"In the document there is a form called frmOne. This form has a text box called
txtFirstNumber. Whatever value has been typed into this text box, store it in the
variable called A."
We do the same for the second text box, storing its value in the variable called B.
The third line of code adds together the two values A and B. The total is then stored in the variable
called C.
Once we have our answer in C, we then need to store it in the third text box on the form. So we have
to say "Assign the value in the variable called C to the text box called txtThirdNumber."
To finish it all off, we type our right curly bracket }.
Chybusky
WEB DEVELOPMENT 54
So, after you've finished typing all that code, load it into your browser and give it a try. Test out the
boxes and button below, to see what yours should do. Enter a 2 in the first box, and a 2 in the second
box. Then click the Add Numbers button. You should get 22!
Total:
Two plus two does not equal twenty two! Our programme seems to have joined our two numbers
together, rather than adding them together.
The problem lies in those text boxes. Not surprisingly, what you get form a text box is text. So when
we typed in the number 2, the programme thought it was text. When we told the programme to add
the numbers we did it like this:
C = (A + B)
Because the programme thinks there is text in the variables A and B, it will join them together
instead of adding them up. When you tried to add up 2 + 2, you got 22 and not 4. So what's the
solution?
One solution is to force the programme to recognise the text as a number. We can use the JavaScript
function eval(). Like this:
A = eval(document.frmOne.txtFirstNumber.value)
B = eval(document.frmOne.txtSecondNumber.value)
In other words, surround your document code with the round brackets of the eval() function. Just the
first two, A and B.
Another, neater, solution is to use JavaScript's in-built Number() function:
A = Number(A)
B = Number(B)
Make sure Number has a capital "N", and not a lowercase "n". This will force JavaScript to
recognize the value from a text box as a number. Using this method, however, will get you a "NaN"
in the your answer text box, if your user enters a string (two + two instead of 2 + 2. NaN stands for
Not a Number). So you need to do some error checking for this, which we'll get to later.
For now, pretend that your users are all well behaved, and wouldn't dream of spoiling your code by
entering text instead of numbers!
When you've amended your code, try your programme again. It should work properly now.
Ok, here's a little exercise. Have a go at this.
Exercise
Add a second button to your form. When this button is clicked, the two numbers in the first and
second text boxes should be multiplied together. The answer should appear in the third text box. You
will need to write a second function below the first one you have just wrote. When you're done, your
code should work like the one below. Enter some numbers in the boxes below, then click the button
to test out the scripts.
Total:
Right, that should have given you lots of practice with variables. Not to mention practice with
getting things from text boxes on forms. We'll move on to Control Flow now. We'll use loops to turn
our little programme into a "times table" calculator, and we'll use if statements to help us evaluate
things.
Chybusky
WEB DEVELOPMENT 55
Day 10
JavaScript If Statements
To write more complex programmes in any language, you need something called control flow. This
is just controlling the direction of the programme so that it's not so linear. Instead of reading your
code line by line, and every single line, you can skip lines of code depending on certain conditions.
For example, if you're using an OK and Cancel alert box, and the user clicks OK, you can execute
one piece of code. If, however, the user clicks Cancel, you can have a different segment of code
executed. This is called Control Flow. Don't worry if none of that makes sense - it will become
clearer when you follow the examples. Programming is, after all, about doing, and not yakking.
If Statement
If statements are the backbone of programming. Some people even go so far as to say that in a sense,
all programming is a series of If statements. To get you started on just what an If statement is, type
this code into the HEAD section of a HTML page, then test it out:
ConfirmStatus = confirm("Format Your Hard Drive?")
if (ConfirmStatus == true) {
alert("Formatting Hard Drive Now ")
}
</SCRIPT>
The first line of code is what gives you a new type of message box -confirm. It looks like this in
Internet Explorer (NOTE: We're not actually going to format anything!)
The programme then waits until you click either the OK button or the Cancel button.
Whichever button you click, the answer will be stored in the variable ConfirmStatus. The answer, in
this case, is a Boolean value: it's either True or False. If you click OK on a confirm box, the answer
will be true; if you click Cancel on a confirm box, the answer will be false.
What you as a programmer have to do next is to check which button the user clicked. Was OK
clicked or was Cancel clicked? If the OK button was clicked, you'll want to do one thing; if the
Cancel button was clicked, you'll want to do another thing. So you need to test what is inside the
variable ConfirmStatus. You do the testing with an if statement. Our if statement was as simple as if
statement get. It was this:
}
Note the format for an if statement:

if (condition to test) {
Your statement here
}
• First you type the word if (in lowercase letters)
• Next, type a space, then your condition inside round brackets
• Type another space, then type a left curly bracket {
• On a new line, type your statement (what you want to happen)
• Finish with a right curly bracket }
Chybusky
WEB DEVELOPMENT 56
If you're checking what's inside a variable, JavaScript requires a double equals sign (==). It means
"has a value of". In our condition to test, we wanted to check whether the variable ConfirmStatus
was true or false. So we did this:
ConfirmStatus == true
We're saying "If ConfirmStatus has a value of true" then execute the next line of code. The next line
of code was an alert box:
The main point to bear in mind here is that you would only get the alert message IF you clicked the
OK button. Because then the variable ConfirmStatus would be true. But what if the user clicked
Cancel? What happens then?
If the Cancel button is clicked, the ConfirmStatus variable will be false. In that case, our alert box
statement doesn't get executed - the programme will just ignore that line and move on to the next
line of code.
We can, however, add another statement to check for a false condition. Change your code to this:
}
if (ConfirmStatus == false) {
alert("Tough! Formatting Hard Drive anyway")
}
</SCRIPT>
The new code is in bold. All we've done is add a second if statement to check for a false condition. If
ConfirmStatus is false (the Cancel button was clicked), then the second alert box is displayed.
All you're saying with if statement is this:
"If it's true, do one thing; if it's false do another thing"
You can add as many if statements as you need, and you can nest one if statement inside another.
For example, you could add another confirm box inside the second statement, and nest another if
condition. Like this:
if (ConfirmStatus == false) {
nested = confirm("Ah, go on! Let me format your hard drive")
if (nested == true) {
alert("Thanks!")
}
if (nested == false) {
alert("Spoil Sport!")
}
}
When you're nesting if statement like that, things can get a little complicated. To move on to if ...
else statements, click the link below.
If … else statements
We saw in the last part of this Control Flow section that to test two conditions (true and false) two if
statements were needed. But you don't have to use separate if statements. Instead, you can use the
else word. This is ideal for Boolean values. Here's our code again, this time with an if … else
statement.
alert("Formatting Hard Drive Now")
}
else {
alert("Tough! Formatting Hard Drive anyway")
}
Chybusky
WEB DEVELOPMENT 57
The first if statement is exactly the same. Now, though, instead of our second if statement to test for
a false condition, we've used the word else. The format for an if … else statement is this:
Statement 1
}
else {
Statement 2
}
So if the first statement isn't true, the code beneath else gets executed.
if … else if
If you need multiple if statements, then if … else if is the one to use. In the code below, we'll check
to see what number is in a text box. Depending on which number was typed in, we'll display an
appropriate (or inappropriate) message. First, you're going to need a few more symbols to work with.
You've already met the double equals symbol (==), and know that this means "has a value of".
Here's some more.
>
<
<=
>=
!=
&&
||
Greater than
Less than
Less than or equal to
Greater than or equal to
Not equal to
Evaluation And
Evaluation Or
We'll see how these operators work with our next little programme. So design an HTML page with
the following form on it.
<FORM NAME = "AgeTest">
Type in your age, then click the button:
<INPUT TYPE = Text NAME = txtAge Size = 15>
<INPUT TYPE = Button NAME = "b1" VALUE = "Age Tester" onClick = message()>
</FORM>
Once you've typed the HTML code for the form, type this JavaScript code in the HEAD section of
your page:
<SCRIPT language = javascript>
function message() {
age = document.AgeTest.txtAge.value
if (age < 16) {
alert("How's school these days?")
}
else if(age > 16) {
alert("It's tough being an adult")
}
}
</SCRIPT>
We had another onClick event for our command button, which called the message( ) function. When
the message( ) is called, it first stores the value in the text box into a variable called age.
Chybusky
WEB DEVELOPMENT 58
age = document.AgeTest.txtAge.value
Next, we need to test what is inside the age variable. We started the test with an if statement:
if (age < 16) {
}
Notice one of our new symbols in the "condition to test":
age < 16
If the value stored in the variable age is less than 16, then the condition will be true. If the condition
is true then our statement will get executed. The statement was an alert box:
Next, because we're checking for multiple values, we have the else if condition. Ours was this:
if (age < 16) {
}
else if(age > 16) {
}
The format for the else if part is this:

statement 1
}
else if(condition to test) {
statement 1
}
It's just another if statement with the word else in front of it (type a space after the word else). You
can add as many else if conditions as you want. You can also add an ordinary else statement at the
end, just to trap anything not met by your conditions. After all, somebody might type text into your
text box, or minus numbers, or nothing at all. In which case, this could solve your problems (though
it's no substitute for more thorough error checking):
if (age < 16) {
}
else if(age > 16) {
}
else {
alert("Please try again")
}
Chybusky
WEB DEVELOPMENT 59
DAY 11
The Operators, And, Or
Notice in that last code that the second age test uses the Greater Than symbol ( > ). Try entering the
number 16 in your text box, and then click your button. What happened? If you haven't added the
final else statement, then nothing will happen.
This is because we're testing for Less Than 16 in the first if statement, and then testing for Greater
Than 16 in the first else statement. We're not testing for exactly 16. So none of our statements will
be true. What we need is another of our symbols. Either >= (Greater Than or Equal to) or <= (Less
Than or Equal to).
So, change your code. Take out either the Less Than symbol ( < ) or the Greater Than symbol ( > ).
In it's place, insert either <= or >= to see what happens. Play about with the symbols to see how they
work. What happens if you put both in? Like this:
if (age <= 16) {
}
else if(age >= 16) {
}
else {
alert("Please try again")
}
Exercise
Add a few more else if statements, and test for these ages groups:
17 to 25
26 to 40
41 to 65
66 and over
Add a suitable alert message for when the command button is clicked.
With an exercise like the one above, it's really handy to use the AND operator (&&) and the OR
operator ( || ). Here's how to use them.
AND and OR
These two operators will return a Boolean value. You use them when you want to test two or more
conditions. For example, if you wanted to test if someone was over 65 and had a buss pass, use
AND; if you wanted to test if someone was over 65 or had a buss pass, use OR. Like this:
if (Age >= 65 && BusPass == false) {
alert("Pensioners - Get your free bus pass now!")
}
If BOTH conditions are true then the IF Statement is true. If just one of them is false, then the entire
IF Statement is false. Note the format (and where the round brackets are):
if (condition1 && condition2) {
Code if true here
}
Contrast that with the OR operator:
if (Age >= 65 || BusPass == false) {
alert("Pensioners - Get your free bus pass now!")
}
This time, if just one of your conditions is true then the entire IF statement is true. They both need to
be false for the entire IF Statement to be false. The format (syntax) is the same, except for the two
pipe characters ( || ) in place of the two ampersands (&&).
Chybusky
WEB DEVELOPMENT 60
Not a Number
Let's use the AND operator to solve our little problem from a previous lesson. You'll remember what
that problem was - if a user enters text into our text boxes, then we get the "NaN" error message in
our answer text box. Here's the problem form. Click the Add Numbers button and see what happens:
tw o tw o
Total:
What we need to do is to check the text in the text box. If they are both numbers, then we can go
ahead and add them up; if just one of them isn't, then we can display an alert box to tell the user to
try again. Our original code was this:
A = Number(A)
B = Number(B)
C= A + B
</SCRIPT>
We can insert an If statement on the third line of the code which will check if the user entered a
number. Only then will we do the adding up. The if statement we can use is this:
if (Number(A) && Number(B)) {
A = Number(A)
B = Number(B)
C=A+B
}
else {
alert("Please enter a number in both boxes")
}
Notice the use of the AND operator (&&). What we're saying is: "If it's true that A is a number
AND if its true that B is a number, then execute the code below; otherwise, display an alert box."
Amend your code to include the if .. else statement, and test it out in a browser. It should work all
right now.
Except! Try entering two zeros in the text boxes and see what happens. Can you think of a solution?
When you've solved the problem, you can move on to Loops.
Chybusky
WEB DEVELOPMENT 61
Day 12
JavaScript For Loops
So what's a loop then? A loop is something that goes round and round. If I told you to move a finger
around in a loop, you'd have no problem with the order (unless you have no fingers!) In
programming, it's exactly the same. Except a programming loop will go round and round until you
tell it to stop. You also need to tell the programme two other things - where to start your loop, and
what to do after it's finished one lap (known as the update expression).
There are three types of loops in JavaScript: for loops, while loops, and do … while loops. We'll
start with the most common type - the for loop.
For Loops
Here's a JavaScript for loop in a little script. Type, or copy and paste, it into the HEAD section of
web page (along with the script tags) and test it out.
counter = 0
for(start = 1; start < 10; start++) {
counter = counter + 1
document.write("start = " + start + " counter = " + counter + "<BR>")
}
How did you get on? You should have this printed on your page:
start = 1 counter = 1
The format for a for loop is this:
for (start value; end value; update expression) {
}
The first thing you need to do is type the name of the loop you're using, in this case for (in lower
case letters). In between round brackets, you then type your three conditions:
Start Value
The first condition is where you tell JavaScript the initial value of your loop. In other words, start the
loop at what number? We used this:
start = 1
We're assigning a value of 1 to a variable called start. Like all variables, you can make up your own
name. A popular name for the initial variable is the letter i . You can set the initial condition before
the loop begins. Like this:
start = 1
for(start; start < 11; start++) {
The result is the same - the start number for the loop is 1
End Value
Next, you have to tell JavaScript when to end your loop. This can be a number, a Boolean value, a
string, etc. Here, we're telling JavaScript to bail out of the loop when the value of the variable start is
Less Than 11.
Update Expression
Loops need a way of getting the next number in a series. If the loop couldn't update the starting
value, it would be stuck on the starting value. If we didn't update our start value, our loop would get
stuck on 1. In other words, you need to tell the loop how it is to go round and round. We used this:
Chybusky
WEB DEVELOPMENT 62
start++
In the java programming language the double plus symbol (++) means increment (increase the value
by one). It's just a short way of saying this:
start = start + 1
You can go down by one (decrement) by using the double minus symbol (--), but we won't go into
that.
So our whole loop reads "Starting at a value of 1, keep going round and round until the start
value is less than 11. Increase the starting value by one each time round the loop."
Every time the loop goes round, the code between our two curly brackets { } gets executed:
counter = counter + 1
document.write("start = " + start + " counter = " + counter + "<BR>")
Notice that we're just incrementing the counter variable by 1 each time round the loop, exactly the
same as what we're doing with the start variable. So we could have put this instead:
counter++
The effect would be the same. As an experiment, try setting the value of the counter to 11 outside the
loop (it's currently counter = 0). Then inside the loop, use counter- - (the double minus sign).
OK, all that theory might be getting a bit heavy. Time to write our little "times table" programme,
that was mentioned in the last section.
A Times Table Programme
Design a web page that looks like the one below. (It's just basic HTML and shouldn't cause you too
much trouble. Though, if you want to copy and paste all the code, you can click this link:)
1 10 2
Start Number: End Number: Multiply By:
Reset
Once you've designed your form, you can start the programming. The programme is quite simple:
when the "Times Table" button is clicked, the times table specified in the "Multiply By" text box
will appear in the Text Area below it (1 time 2 = 2, 2 times 2 = 4, 3 times 4 = 12, etc).
The Programme at the top of the page didn't do anything when you clicked the "Times Table"
button. Here's one that does. Click the button to see what we're going to be programming:
1 10 2
Start Number: End Number: Multiply By:
Reset
Chybusky
WEB DEVELOPMENT 63
The numbers in the first two text boxes (1 and 10) will be used for the start and end value of our for
loop. So, here's the code: Add it to the HEAD section of your web page. Test it out and then move
on to the explanation.
start = document.frmOne.txtStart.value
end = document.frmOne.txtEnd.value
times = document.frmOne.txtTimes.value
if(Number(start) && Number(end) && Number(times)) {
start = Number(start)
end = Number(end)
times = Number(times)
result = document.frmOne.taOne
for(i = start; i <= end; i++) {
answer = i * times
result.value = result.value + (i + " times " + times + " = " + answer + "\n")
}
}
else {
alert("Please enter numbers in the boxes")
}
}
Granted, it might look a touch long and complicated, but it's not really - you can handle it. To help
you, let's break it down and see what's going on.
We start by passing the values from the three text boxes into three variables:
start = document.frmOne.txtStart.value
end = document.frmOne.txtEnd.value
times = document.frmOne.txtTimes.value
Next, we set up an if … else statement to check that our user is typing numbers into our text boxes:
if(Number(start) && Number(end) && Number(times)) {
else {
}
The thing you need to be careful of here is that you have all the round brackets in place. Otherwise
your programme won't work. But once we have our if … else statement set up we can enter our
statements in between the curly brackets.
If the user has indeed entered all numbers, we need code to make the programme work. We start
with these three lines:
start = Number(start)
end = Number(end)
times = Number(times)
All we're doing here is ensuring that JavaScript gets the point that they are actually numbers in the
text box and not strings.
The next line is a bit new to you:
result = document.frmOne.taOne
The code document.frmOne.taOne is the Text Area on our form. All we're doing is storing the text
area object itself into a variable called result. This is to save us having to type out
document.frmOne.taOne.value = every time we need it. Now, we can just type result.value = and
JavaScript will know what we mean.
And then we have our for loop. Here it is, minus the code that will display the result in the text area:
for(i = start; i <= end; i++) {
answer = i * times
}
Chybusky
WEB DEVELOPMENT 64
In the round brackets of the for loop, we're saying, "Assign the value in the variable called start to
the variable called i (i = start). Stop looping when the value in the variable called end is Less
than or Equal to the value in the variable called i (i <= end). Every time round the loop, add
one to the variable called i (i++)."
The code inside the for loop, the code that gets executed each time round the loop, is this:
answer = i * times
Remember, the variable times holds the times table, the 2 times table by default. This is being
multiplied by whatever is inside the variable i. Each time round the loop, i will have a different value
- first 1, then 2, then 3, etc. The answer is then stored in the variable that we called answer.
Finally, we displayed the result in our text area with this rather long line:
result.value = result.value + (i + " times " + times + " = " + answer + "\n")
It would have been even longer if we hadn't stored the text area into the variable called result. If we
hadn't, the line would be this long:
document.frmOne.taOne.value = document.frmOne.taOne.value + (i + " times " + times + " =
" + answer + "\n")
Which is very messy indeed. But all the line is doing is joining the various bits together: the variable
i is joined with some direct text ("times "), which is joined with the variable times, which is joined
with an equals sign ( " = " ), which is joined with the variable answer, which is joined with the new
line character ( "\n" ). Phew! And it doesn't end there, because we need to keep whatever is already
in the text area:
result.value = result.value +
The only thing left to do is write the code for the else statement. Fortunately, there not much to do
there except display an alert box inviting the user to try again:
else {
alert("Please enter numbers in the boxes")
}
And that's it - your very own times table generator. If you have children, show them the programme
you wrote. They'll be very impressed and tell you how brilliant you are. Children are like that.
Of course, your programme is not perfect, which I'm sure the children will discover. Especially if
they enter a 10 as the start number and a 1 as the end number. Anything you can do to trap this
error? Another if statement somewhere, perhaps?
JavaScript While and Do Loops

While Loops
Instead of using a for loop, you have the option to use a while loop. The structure of a while loop is
more simple than a for loop, because you're only evaluating the one condition. The loop goes round
and round while the condition is true. When the condition is false, the programme breaks out of the
while loop. Here's the syntax for a while loop:
while (condition) {
statement
}
And here's some code to try. All it does is increment a variable called counter:
counter = 1
while (counter < 11) {
document.write(" counter = " + counter + "<BR>")
counter++
}
The condition to test for is counter < 11. Each time round the while loop, that condition is checked.
If counter is less than eleven then the condition is true. When counter is greater than eleven then the
condition is false. A while loop will stop going round and round when a condition is false.
If you use a while loop, be careful that you don't create an infinite loop. You'd create one of these if
you didn't provide a way for you condition to be evaluated as true. We can create an infinite loop
Chybusky
WEB DEVELOPMENT 65
with the while loop above. All we have to do is comment out the line where the counter variable is
incremented. Like this:
counter = 1
//counter++
}
Notice the two forward slashes before counter++. This line will now be ignored. Because the loop is
going round and round while counter is less than 11, the loop will never end - counter will always be
1.
Here's the times table programme again, only now we've used a while loop instead of a for loop (the
lines that write the result to the text area have been left out):
start = 1
end = 1
times = 2
answer = 0
while (end < 11) {
answer = start * times
start++
end++
}
The while loop calculates the 2 times tables, up to a ten times 2. Can you see what's going on? Make
sure you understand the code. If not, it's a good idea to go back and read this section again. You
won't be considered a failure. Honest.
Do ... While loops

This type is loop is almost identical to the while loop, except that the condition comes at the end:
do
statement
while (condition)
The difference is that your statement gets executed at least once. In a normal while loop, the
condition could be met before your statement gets executed. Don't worry too much about do while
loops.
Break and Switch Statements in JavaScript
The Break Statement
There are times when you need to break out of a loop before the whole thing gets executed. Or, you
want to break out of the loop because of an error your user made. In which case, you can use the
break statement. Fortunately, this involves nothing more than typing the word break. Here's some
not very useful code that demonstrates the use of the break statement:
TeacherInterrupts = true
counter = 1
if (TeacherInterrupts == true) break
counter++
}
Try the code out and see what happens.
Switch Statements
These types of statements can be very useful. A switch statement is used when you want to choose
just one of several possible outcomes. Our age tester was a good example. We had several ages
Chybusky
WEB DEVELOPMENT 66
groups that we were testing for, and a person could be in only one of them. We used a series of if
statements to test which one our user belonged to.
A better way to do the testing is with a switch statement. Here, the value in Age is coming from a
drop-down combo box on a form called frmOne:
Age = document.frmOne.cmbAge.value
switch (Age) {
case "1":
alert("still at school")
break
case "2":
alert("still young")
break
case "3":
alert("start lying")
break
case "4":
alert("start saving")
break
default:
alert("undetermined")
}
The switch statement starts with the word switch. What you are testing for comes next, in round
brackets. In the code above, we're testing what is inside the variable Age. Next, type a curly bracket
{, then on a new line, you set a series of values that could be in the variable Age.
Each value that could be in your variable is preceded by the word case. A colon comes after the
value. If the value is going to be text, then use double quotes; if the value is going to be a number,
don't use the quotes:
case "1":
All we're saying is, "If it is the case that the variable Age holds the value "1", then we've found a
winner."
Once a match has been found, any code after the colon ( : ) will be executed. For us, that was an alert
box:
You have to tell JavaScript to break out of the switch statement. Just use the break statement,
otherwise the next case down will get executed as well:
case "1":
break
It was mentioned that the value in Age was coming from a drop-down box on a form. Here's the
HTML code for that:
<select name = cmbAge>
<option value = 1>5 to 16</option>
<option value = 4>46+</option>
</select>
</Form>
We have four options in the drop down box, each with a value 1 to 4. It's this value that is going into
the variable Age. Because the value from a HTML drop-down box will be a string (text) and not a
number, each value for the case was surrounded by double quotes.
Chybusky
WEB DEVELOPMENT 67
Switch statements are an ideal way to check the value returned from a drop down box on a form.
Instead of having an alert box in the case statement, you could direct your users to another web page.
Like this:
page = document.frmOne.cmbAge.value
switch (page) {
case "1":
document.URL = "page1.html"
break
case "2":
break
case "3":
break
case "4":
break
default:
alert("An error occurred so we're staying here")
}
The default is what you get when none of your case statements are true.
All right, that's enough about Control Flow. By now, you should have a good idea of how things like
if statements, for loops, and switches work. Of course, we can't expect you to have mastered the
subject, so you may well have to revise this section until the knowledge sinks in. There is a steep
learning curve here, so don't get too frustrated if you're having problems.
Chybusky
WEB DEVELOPMENT 68
Day 13
Hurray for Arrays!
You know what a variable is - just a little drawer in your computer's memory. Instead of holding
socks or underwear, variables hold text and numbers. Except, a variable will hold only one value.
You can store a single number in a variable, or a single string. An array is a variable that holds more
than one number, or more than one string. Let's make a start on explaining how arrays work.
Setting up an Array
To set up an array in JavaScript you have to create an array object. This, for us, involves nothing
more complicated that using the word new. Like this:
Seasons = new Array(3)
The above code would set up an array that could hold four different values in it (arrays start at zero).
To put something into each "slot" in the array, you'd just do this:
Seasons[0] = "Winter"
Seasons[1] = "Spring"
Seasons[2] = "Summer"
Seasons[3] = "Autumn"
Our array is called Seasons. In between round brackets, we had an upper limit for the array - 3. (The
number in round brackets is called the Index). When we're assigning values to each position in the
array, we just type the name of the array, and then one of the numbers in square brackets. After
typing the assignment operator (=), we type the value we want to go into that "slot" of the array.
Another way to set up an array is to have all the values inside the round brackets of the word Array.
Like this:
Seasons = new Array("Winter", "Spring", "Summer", "Autumn")
We still have an array with four values in it, but we've fixed the values inside of the round brackets.
To get at the value inside an array, just use its index number. Like this:
So putting that altogether in a script would give us this:
<SCRIPT language=JavaScript>
alert(Seasons[2])
</SCRIPT>
Test out the script in a web page and see how it works. Change the value of the index from 2 to one
of the other numbers and see what happens. Change the value of the index to a number higher than 3
and see what happens.
Array Methods
Here's another thing you can try. Add this line just before the alert box (on a line of its own):
Seasons.sort()
Now type in 3 as the index number in your alert box. The alert box will now display "Winter".
Despite the fact that our array has Winter at position 0. The reason why it does this is because we
used a method for on our array - sort(). Because Array is now an object, we only need the array
name followed by a full stop. After the full stop type the method you want to use.
The sort() method will sort your array alphabetically. You can sort your array in reverse order with
this:
Seasons.reverse()
In which case, the value in the last position will become the first value, the second last position will
become the second value, etc. We can use another method of arrays to see this more clearly. Add
this line after the sort() method:
Seasons.join()
Chybusky
WEB DEVELOPMENT 69
So you should have this as your code:
Seasons.sort()
Seasons.join()
alert(Seasons)
When you test this code out, you should get a message box like this one:
However, if you use Seasons.reverse() instead of Seasons.sort() you'll get a message box something
like this one:
There are a few more array methods you can use, but they are a touch advanced for us at this stage.
For the record, they are: concat, pop, push, shift, slice, unshift. But try not to worry about them.
In the next part, we'll take a look a closer look at that number in round brackets - the index number
of an array.
The index number of an array
Arrays really come in to their own when you access their index numbers. You can use a variable in
place of the index number. Then, if you increment the variable, you can access the elements in your
array. As an example, try this script in a web page. For the web page, create a form called frmOne.
Put a button on the form, and a text box called txtSeason. If you prefer, copy and paste this one:
<FORM name = frmOne>
<INPUT Type = text name = txtData>
<INPUT Type = button value = " Seasons " onClick = GetSeasons()>
</FORM>
When you've got the form in place, add this script to the HEAD section of your code:
<SCRIPT language=JavaScript>
inc = 0
function GetSeasons () {
document.frmOne.txtData.value = Seasons[inc]
inc++
}
</SCRIPT>
Chybusky
WEB DEVELOPMENT 70
We're setting up the array in exactly the same way. Now, though, we're calling a function with the
onClick event of the button in the Form:
onClick = GetSeasons()
The function will set up the array. It also puts a value in our text box. But note what the value is - it's
one of our elements in the array. But which element is it?
document.frmOne.txtData.value = Seasons[inc]
The inc is a variable. It was set up outside the function, making it global (all your functions can see a
global variable):
inc = 0
So the first value put into our text box is this:
document.frmOne.txtData.value = Seasons[0]
In the final line of the code, we then increment the variable:
inc++
So every time the button is clicked, 1 will get added to the inc variable. The next time you click the
button, the code is really this:
document.frmOne.txtData.value = Seasons[1]
When the value in the inc variable goes above 3, you'll get this in the text box:
undefined
That's because we don't have a position number 4 in our array. You can reset the inc variable like
this:
if (inc > 3) inc = 0
That should prevent "undefined" from displaying in the text box.
Arrays are used a lot inside loops. We're going to see how that works now by creating a lottery
number generator. But before continuing you should ensure that you have a good understanding of
how for loops work. If not, go back and revise.
In the next part, we'll start work on a lottery programme.
Arrays and Loops
If you want to assign a value to a position in an array, you can just do this:
Array[9] = "Hello World"
To display the value, just access its index number again:
alert(Array[9])
The fact that you can access the index number of an array to assign values makes them very handy in
loops. To start our lottery number generator (UK lottery), we're going to create an array of 49
numbers. Number 1 will be at position 1 in the array, number 2 at position 2, etc. We could do this
for all 49 numbers:
Lottery = new Array(49)
Lottery[1] = 1
Lottery[2] = 2
Lottery[3] = 3
Lottery[4] = 4
But we'd have a laborious job typing all the array positions out, and all the values for them. Instead,
we can use a loop to fill our array with the numbers 1 to 49. Here's the loop we can use:
for (i = 1; i < 50; i++) {
Lottery[i] = i
}
Isn't that easier? But how does it work? Well, first we set a start position for our for loop by
assigning 1 to the variable called i (i = 1). The end position for our loop is when the variable i is not
less than 50 (i < 50). Every time round the loop 1 gets added to i (i++).
Then we assign the value of i to a position in our array:
Lottery[i] = i
At first, the value in i is 1. Which gives us this in reality:
Lottery[1] = 1
The next time round the loop, 1 gets add to the variable i. So we'd then have this:
Chybusky
WEB DEVELOPMENT 71
Lottery[2] = 2
By the time the loop ends, all 49 positions in our array would be filled with the numbers 1 to 49.
And that's all there is to it - a couple of lines of code has saved us reams of typing!
To demonstrate that it does indeed work, create this form on a new web page:
<Form name = frmOne>
<textarea name = taAll rows = 10 cols = 15></textarea>
<INPUT Type = button Value = " Get Lottery Numbers" onClick = getNumbers()>
</form>
Make sure your form has the NAME frmOne, and that your TEXTAREA has the NAME taAll. For
the button, you're adding a onClick event which calls the function getNumbers().
When you have your form in place, add this script to the HEAD section of your web page:
function getNumbers() {
TA = document.frmOne.taAll
lottery = new Array(49)
for (i = 1; i < 50; i++) {
lottery[i] = i
TA.value = TA.value + lottery[i] + "\n"
}
}
</SCRIPT>
To see what your programme should do, click this link (opens in a new window):
We've started the script with a function:
}
The first line inside the function is just assigning the text area on our form to a variable call TA. This
will make things easier for us, and we won't have to keep typing it all out when we want to add
things to the text area:
On the next line, we set up our array:
Next comes our for loop:
for (i = 1; i < 50; i++) {
lottery[i] = i
}
Notice the line that has been added to the for loop:
All that line is doing is adding the values in our array to the text area. We want to keep whatever is
inside the text area, so we have to say:
TA.value = TA.value +
Then we add the value from the array, with a new line character at the end:
lottery[i] + "\n"
When you've finished adding the code to the HEAD section, test it out. When you click the button,
the numbers 1 to 49 will be added to your text area.
For a lottery, though, we need to shuffle all the numbers. Otherwise, everybody would win!
Shuffling the numbers in an Array
OK, the next thing we want to do is shuffle our numbers up. Once the numbers are shuffled up, we
can just peel off the first six for our lottery numbers. Again, we'll use arrays inside loops to do this
for us.
The code that shuffle the numbers up might be a tad complex at this stage of your programming
career. The code is this:
Chybusky
WEB DEVELOPMENT 72
for (i = 1; i < 50; i++) {
newnumber = (Math.random() * 49) + 1
newnumber = parseInt(newnumber, 10)
temp = lottery[i]
lottery[i] = lottery[newnumber]
lottery[newnumber] = temp
}
When you add it to your other code, your script should look like this (new code is in red bold text):
temp = 0
newnumber = 0
document.frmOne.taAll.value = ""
for (i = 1; i < 50; i++) {
lottery[i] = i
}
for (i = 1; i < 50; i++) {
temp = lottery[i]
lottery[i] = lottery[newnumber]
lottery[newnumber] = temp
}
}
</SCRIPT>
The first few new lines are just setting up variables temp and newnumber, and clearing the text area:
temp = 0
newnumber = 0
document.frmOne.taAll.value = ""
Notice, too, that the code that inserted numbers into the text area has now been cut. We'll use
another for loop to display the shuffled numbers. So our first for loop is just this:
for (i = 1; i < 50; i++) {
lottery[i] = i
}
That's the for loop that puts the numbers 1 to 49 into our array. But they are in a nice orderly
fashion. What we want is to shuffle them up a bit. Hence our rather complex second for loop:
The idea behind our shuffle code is this: Grab a random number from 1 to 49. Store the current array
value in a temp variable. Get the array[Random Number] value and put this into the current array
value. Swap the current array value with the array[Random Number] value.
That explanation might not be quite so crystal clear, but all the code is doing is swapping numbers
around. The first two lines in the for loop get us our random number:
The code Math.random() gets you a random number between 0 and 1. We're then multiplying that
random number by 49, then adding 1. This will ensure that we get a random number between 1 and
49. Except, the number will be a floating point number. A rather long one. Something like this:
12.34528569
To chop off the part after the point, we can use the in-built function parseInt(). We need only pass it
the number and what numerical base we want (10 will get you decimal).
The rest of the code works like this (assuming the random number generated is 12)
Chybusky
WEB DEVELOPMENT 73
temp = lottery[1]
lottery[1] = lottery[12]
lottery[12] = temp
In other words, the numbers 1 and 12 have swapped places. Don't worry if you don't understand
what's going on. The rest of the code is a lot easier.
OK, we've found a way to jumble up all our nice, orderly numbers. Now what?
Well, we can use a loop to display the results of all that jumbling. Add this for loop underneath the
code that shuffled the numbers:
for (i = 1; i < 50; i++) {
TA.value = TA.value + "lottery[" + i + "] = " + lottery[i] + "\n"
}
All the code inside that loop is doing is putting the array values into the text area. It's adding a bit of
text along side the values as well. Try it out and see what happens. You should now see something
like this in your text area (click the link to test out the programme so far):
As you can see, our 49 numbers are nicely shuffled. All we need to do now is peel off the first six
numbers and we have our very own lottery number generator. Which brings us neatly to an exercise.
Exercise
Write the code that peels off the first six numbers. Display the results in a separate text area on the
web page.
Exercise
Amend your lottery programme to include the following:
• Six text boxes for entering lottery numbers
• One text box to display how many numbers came up
• One text box to display the number of draws
The finished programme might look something like this:
For this exercise, you're writing a programme that checks the lottery numbers from the six text
boxes. The numbers in the six text boxes will be checked against those drawn in the text area under
"winning lottery numbers".
Display how many numbers were correctly guessed. Display how many draws there have been.
(This number will be incremented every time the "Get Lottery Numbers" button is clicked.)
You have already written most of the programme. To check the numbers in the text boxes against
the winning numbers, you'll need one for loop inside another. Add a counter to record the number of
winnings numbers.
And that wraps up this section on the basics of programming. You can move on to the next section,
which is all about javascript Events, and javascript functions.
Chybusky
WEB DEVELOPMENT 74
DAY 14
JavaScript Events - Browser Detection
You have already met a few JavaScript events that you can use in your code. The one you're most
familiar with is onClick. You have also met the onMouseOver event and the onMouseOut event.
These events are just special in-built instructions to the browser. The browser sees the event name,
and knows that some code is coming up that it needs to execute. You don't really have to worry
about how the browser executes the events. With JavaScript, what you should concentrate on is what
the events do, and how you use them.
Here, then, is a list of (some) events you can use with JavaScript:
onClick
onDblClick
onDragDrop
onKeyDown
KeyPress
KeyUp
MouseDown
MouseMove
MouseOut
MouseOver
MouseUp
Move
Resize
onLoad
onUnload
onChange
onReset
onSelect
onSubmit
The problem is that although most browsers recognise those events, the event itself can be quite
torturous to use, especially since Netscape came up with the Event Object. The Event Object is a
way for the window itself to record events. For example, if the mouse was clicked in the window
you can record the position of the mouse pointer. But Internet Explorer doesn't recognise this Event
Object of Netscape's. So any code you write which uses the Netscape's Event Object will cause an
error if the page is loaded into Internet Explorer.
The standard way round this is to write code which detects the browser type. Because there are a lot
of other things that one browser can do that the other can't, browser detection is considered good
practice.
In this next segment, we'll look at one way to detect which browser the user has (Netscape or
Internet Explorer), and then direct them to the relevant code. The code they'll get tells them the
mouse position on the screen. You'd better hang on to your hats, though, because this could be quite
a bumpy ride!
Browser Detection
We start detecting the browser with the navigator object. You met this object earlier. It's quite
simple:
Browser = navigator.appName
The appName property will tell us whether the user has Netscape or Internet Explorer (we're
assuming just these two are used). The variable Browser will then hold either the text "Netscape" or
"Microsoft Internet Explorer".
Next, we need to search that text for either the word "Netscape" or the word "Microsoft".
Net = Browser.indexOf("Netscape")
Micro = Browser.indexOf("Microsoft")
Chybusky
WEB DEVELOPMENT 75
One way you can search text is with the in-built function indexOf. Remember, our variable Browser
is holding the text. After typing a full stop, you type indexOf followed by a pair of round brackets.
Inside the round brackets you put the text you're looking for. The text you're looking for goes in
double quotes if it's direct text. (No quotes are used if the text you're looking for is in a variable.)
Browser.indexOf("Netscape")
All that means is, "Search whatever is inside the variable Browser and find out if the word
Netscape is there." If Netscape is there, what will be returned is the position of the first letter of the
word Netscape. The search starts at position zero. If the word Netscape is not found, what will be
returned is the number minus one (-1).
Our two variables, Net and Micro, will then hold either zero or greater, or minus one.
We can use an if statement to test which one holds the minus one, and which one doesn't: Here's the
entire script. Place it in the HEAD section of a web page and try it out.
<Script language = javascript>
Netscape = false
IE = false
if(Net >= 0) {
Netscape = true
alert("You're using Netscape")
}
if(Micro >= 0) {
IE = true
alert("You're using Internet Explorer")
}
</script>
And that's it - a simple (ish) way detect which browser is being used. However, more code would
usually need to be added. This is because some older versions of Netscape or Internet Explorer
wouldn't be able to process this next code. So you would need to get which version of Netscape or
Internet Explorer was being used. You'd use navigator.appversion for this. But as this is supposed to
be as section on events, we'll leave that aside.
In the next part, we'll explore the onMouseDown event.
JavaScript Events - OnMouseDown
What we'll do in the pages that follow is to detect the position of the mouse pointer when the user
clicks on the screen. To do that, you need to find the X coordinate and the Y coordinate.
• The X coordinate tells you how far left of the screen you are
• The Y coordinate tells you how far down the screen you are.
Both Netscape and Internet Explorer use the screenX and screenY property. If you're sure that your
users will all have Internet Explorer, then the task is fairly easy. Here's the script:
<HEAD>
<TITLE>XY Coordinates</TITLE>
<SCRIPT Language = javascript>
function XYpos() {
xPos = event.screenX
yPos = event.screenY
alert(xPos + " left " + yPos + " down")
}
</Script>
</HEAD>
<BODY onMouseDown = XYpos()>
Chybusky
WEB DEVELOPMENT 76
The BODY section of the HTML is where we put the event handler onMouseDown. Now, every
time the mouse is clicked anywhere in the Body of the web page, the function XYpos() gets called.
Inside the function, the property screenX and the property screenY (which are both properties of
event) are put inside two variables:
So xPos will hold how far left the mouse pointer is when the page is clicked; and yPos will hold far
down the mouse pointer is when the page is clicked.
Both coordinates are then displayed in an alert box:
If you have Netscape, however, the code will point blank refuse to work!
If we add our Browser detector code to the script above, though, we can get Netscape to display an
error message. Try changing you code to this:
<Script language = javascript>
Netscape = false
IE = false
if(Net >= 0) {
Netscape = true
}
if(Micro >= 0) {
IE = true
}
function XYpos() {
if (IE == true) {
}
else if (Netscape == true) {
alert("Script won't work: " + "\n" + "You're using Netscape")
}
}
</script>
After the browser detection code, we've added our XYpos() function. This time, we've put some if
statements in it. If the user has Internet Explorer, we're all right; if the user has Netscape, display the
message:
function XYpos() {
if (IE == true) {
}
else if (Netscape == true) {
alert("Script only works with Internet Explorer - sorry!")
}
}
So Internet Explorer's way to get the coordinates of the mouse pointer is not too difficult. The reason
why the script is so long is simply because Netscape refuses to cooperate. We therefore have to add
browser detection code and do one thing for Internet Explorer and do another thing for Netscape.
Chybusky
WEB DEVELOPMENT 77
If you want to detect the mousedown event with Netscape then the process is quite complicated. We
won't go into here, but you can click the link below to see the script in action. To view the source
code, click View > Source in Internet Explorer. Netscape/Mozilla users should click View > Page
Source. When you see the code, you'll know why we didn't go into it!
But that's enough of complicated events. I'm sure you've had your fill. In the next part, we'll take a
look at some simple events, as we go through the list.
(Shawn sent me the following in an email, for which I thank him. This works in both IE and
FireFox/Mozilla. Try it, if you have both browsers:
function XYpos(event){
alert(event.screenX + " left " + event.screenY + " down")
}
<body onClick= XYpos(event) bgcolor = white>
As he says, Much simpler!)
JavaScript Events
onClick
We've already used this event quite a lot. But you can use it with buttons, images, links, radio
buttons, check boxes. Here's a simple onClick event used with an image:
<IMG SRC = red.jpg onClick = "alert('No stealing the images!')">
onDblClick
Same as above, really. Try inserting Dbl into onClick and see what happens.
onKeyDown
This events fires when a key on your keyboard is pressed. It applies to buttons, textboxes, text areas,
and links. If you had a search box on a form, for example, you might want to activate the search
when the user presses the Return/Enter key on the keyboard. For Netscape users, though, you need
to use this:
window.captureEvents(Event.KEYPRESS)
And that's only the start of your problems!
An easier example of the KeyDown event that works in both browsers is this:
<INPUT type = text onKeyDown = "alert('Key pressed')">
onMouseOver
You've seen this in action already when we wrote the script for the "dancing hand". Associated
events are onMouseOut and onMouseDown. They are mainly used for links and images. A typical
use of onMouseOver is to swap images around when creating a rollover effect.
Onblur
This event takes places when objects lose focus. If you click inside one text box then click outside it
the textbox has lost focus. That's when the onBlur event fires.
<INPUT TYPE = text onBlur = "alert('Lost focus')">
Here's an example. Click inside the first text box, then click inside the second one.
When you move away from the textbox, you should see the alert box. You can write code to check if
something like an email address is correct. If not, you can reset the text box to a blank string.
onSubmit
This is a very useful event that can be used for data validation on a form. You can use this event
with a Submit button. The details on the form can then be checked for errors. If you catch any errors,
Chybusky
WEB DEVELOPMENT 78
you can then stop the form's details from being submitted. Here's an example. Note the use of the
word return. This is set to a Boolean value. If return is false then the form doesn't get submitted; if
it's true then the form is submitted. (More about return in the next section.)
<FORM name = f1 onSubmit = "return Validate()">

<INPUT Type = Submit Value = " Send ">
</FORM>
The form is not much good because it only has a submit button. But notice where the onSubmit
event is - in the FORM tag, and not with the Submit button.
Here's the Validate() function. It doesn't do any checking. All it does is to display an alert message.
function Validate() {
Details = false
if (Details == false) {
alert("errors detected")
return false
}
if (Details == true) {
alert("Form Submitted")
return true
}
}
In the function, we've set a variable (Details) to false. This is just for testing purposes, and means the
user has filled out the form incorrectly. Look at the two return values, though. If the Details are false
then return gets set to false, and the form isn't submitted; if the Details are true then return is true,
and the form is submitted.
If you want, add a Method and an Action to your Form. Like this one:
<form name = f1 onSubmit = "return Validate()"
Method = post Action="Mailto:MyEmailAddress@MyISP.com" Enctype="text/plain">
(The Enctype will send the details in plain text that's much easier to read.)
Test out the code on a web page. Change the Details variable to true and click the button. We're
going to do some real error checking in the next section, and we'll meet onSubmit again.
Speaking of that next section - let's get right to it.
Chybusky
WEB DEVELOPMENT 79
Day 15
JavaScript Functions
We've already used functions a fair bit in these pages. We're going to explore them a bit further.
Functions, if you remember, are simply sectioned-off pieces of code. When you want to use your
code segment, call it by its name and it will come running.
We're now going to design a little calculator. It's limited in what it can do, as it only calculates two
numbers at a time. It can add, divide, multiply and subtract. To save you time designing the HTML
for this calculator, you can get a copy by clicking the link below. When the web page opens, click
File > Save and save it to your hard drive.
Nice, isn't it? Only the HTML is included in the code for the web page. All the script tags have been
taken out, so it won't work. But we'll see how functions work with this calculator. Off we go then.
To work the calculator, press a number. Then press an operator (plus, times, subtract, or divide).
Press another number, then press the equals button (=). If you want to clear the display, click the cls
button.
Passing a value to a function
So far with functions, we have just been doing this sort of thing:
function add() {
Our code segment here
}
The name of the function is add. Immediately following the name are a pair of round brackets ( ). To
call (use) our functions, we've doing this:
<Input Type = button onClick = add()>
Inside the round brackets, we haven't put anything. They have been empty brackets. But functions
are given extra power by putting something inside the brackets. This "something" is called an
argument. An argument is really just a variable. What you're doing by giving your function an
argument is passing a value to your function. We're going to do that with our calculator.
Our first function will accept one argument. The value being passed to our function comes from the
number buttons on our calculator. If you have a look at the HTML calculator code in the page you
saved, you'll see this for the buttons:
<Input type = button name = b1 value = " 3 " onClick =calculate(3)>
The value above is the text on the button face. This is the number three button. When this is clicked,
the number three will appear in the display. Look at the onClick event:
onClick =calculate(3)
The onClick event is calling our function, which has the name calculate(). However, we've now put
something inside of the round brackets. We've put the number three in there, which is the value of
our button. Here's the function we're going to add, minus any code:
function calculate(number) {
}
Our function now accepts an argument - number. This is a variable into which we can place values.
When the 3 button is clicked on the calculator, a value of 3 will be placed into the number variable.
If another button is clicked, the 7 button for example, a value of 7 will be passed to the number
variable. We can then use this number variable in our code for the function:
frm = document.frmOne.txtDisplay
frm.value = frm.value + number
}
You should be able to work out what the code for the function does, but here's an explanation. The
Display textbox is first put into a variable called frm. We then add whatever is in the variable
number (our argument) to whatever is already in the display text box. Here, add means "join
together". So if you wanted 22 in the Display text box you would click the 2 button twice.
Chybusky
WEB DEVELOPMENT 80
This is a nice, simple function that display numbers in a text box. You can add the function to your
calculator. Either type or copy and paste the function into the HEAD section of your code.
OK, now that we know how to pass a value to a function, we can set up a second function to deal
with the operators. When you click one of the operator buttons (plus, minus, etc) you can pass the
operator to a new function in the same way you've just done. First, set up the onClick event in the
HTML form (this has already been done):
<Input Type = Button value = " plus " onClick = operator("+")>
Notice the name of our new function, and the value we are going to pass to it when the "plus" button
is clicked:
onClick = operator("+")
What we're passing to our new function is the plus symbol ( + ). We're passing it as a string, hence
the double quotes surrounding it. For the divide button, we have this for the onClick event:
onClick = operator("/")
In other words, a different symbol will be passed to our new function depending on which operator
button is clicked. Here's the code for the function:
function operator(opval) {
TheOperator = opval
total = document.frmOne.txtDisplay.value
document.frmOne.txtDisplay.value = ""
}
This time, the variable inside our function is called opval. This is our argument. When an operator
button is clicked, opval will contain one of our four symbols. Inside the function we then pass this
value to a variable which we have called TheOperator. Besides passing the operator symbol to a
variable, this function also gets the value from the display and passes it to a variable called total. The
text box is then cleared ready for another number to be entered.
So add this new function to your script, just below the first one. However, the variables total and
TheOperator need to have their values read from another function. So we have to make them global.
We do this by declaring them at the top of the code, just before the first function:
var total = 0
var TheOperator = 0
frm = document.frmOne.txtDisplay
frm.value = frm.value + number
}
function operator(opval) {
TheOperator = opval
total = document.frmOne.txtDisplay.value
document.frmOne.txtDisplay.value = ""
}
</SCRIPT>
With our two global variables set up, we can now do the calculating part. The calculating is done
when the equals sign is clicked on the calculator. Again, we do this with an onClick event. This time
from the equals button on the form:
<Input Type = Button value = " = " onClick = equals()>
We don't need to pass anything to our equals function (it's a simple little code segment), so we're
back to the empty round brackets. This means that it's a function that doesn't accept arguments.
Here's the entire function that does the calculating:
function equals() {
CurentDisplayValue = eval(document.frmOne.txtDisplay.value)
PreviousDisplayValue = eval(total)
if(TheOperator =="+") {
answer = PreviousDisplayValue + CurentDisplayValue
Chybusky
WEB DEVELOPMENT 81
}
else if(TheOperator == "*") {
answer = PreviousDisplayValue * CurentDisplayValue
}
else if(TheOperator == "-") {
answer = PreviousDisplayValue - CurentDisplayValue
}
else if(TheOperator == "/") {
answer = PreviousDisplayValue / CurentDisplayValue
}
document.frmOne.txtDisplay.value = answer
}
The code looks a tad messy, but that because of the variable names we've chosen to use. First, we
pass whatever is currently in the Display text box to a variable called CurentDisplaValue:
CurentDisplayValue = eval(document.frmOne.txtDisplay.value)
The eval() part just ensures that JavaScript doesn't try to concatenate when we want to add up. The
second line of our code gets the value stored in our global variable total and passes it to the new
variable called PreviousDisplayValue:
PreviousDisplayValue = eval(total)
The rest of the code just uses if statements to check what is inside our other global variable
TheOperator. The final line just pops the answer into the Display text box.
And that's it. A very simple calculator that demonstrates how to pass values to functions by setting
up arguments. You can pass more than one argument at a time to a function. But we've kept things
simple by using only one argument with each function.
Add the new code to your calculator and see it in action. When you get it working, it should be like
the one in this link below:
Calling other functions within a function
Functions can call other functions, and have a value passed back to the calling line. We'll see how
that works now. Once you have grasped the concept, what we're then going to do is write code to
validate data that a user might enter on a form.
First, though, here's an example of a function being called inside another function. To test it out,
create a web page with a button on it. Set the onClick event for the button to this:
onClick = GetValue()
Once you have your web page with a button on it, add this code to the HEAD section of the page:
function GetValue() {
returnvalue()
}
function returnvalue() {
n1 = 10
n2 = 5
answer = n1 - n2
return false
}
</SCRIPT>
When the button on your page is clicked, it calls the function GetValue(). The only line of code in
the GetValue() function calls the second function:
returnvalue()
When this second function is called, all the code inside it is executed. Control then passes back to
the first function. Any other lines for the first function are then executed.
Notice the line of code that reads return false. We really should have had this return word at the end
of all our functions. It's actually a question: "Does the function return a value?" In other words, Are
we finished with this function or not?
Chybusky
WEB DEVELOPMENT 82
If the function does return a value you can either use return true, or more likely you can return a
value back to the first function. In our second function, we were subtracting one number from
another and putting the answer into a variable called answer. But we weren't doing anything with
this variable, so nobody would be able to see what the answer was. In this next example, we'll return
the answer to the first function:
total = returnvalue()
alert(total)
}
function returnvalue() {
n1 = 10
n2 = 5
answer = n1 - n2
return answer
}
The first function now does something slightly different. The call to the second function,
returnvalue(), has gone on the right hand side of an equals sign (= ). On the left hand side of the
equals sign we have a variable called total. What we're saying here is "Assign the value of
returnvalue() to the total variable."
But the same thing happens: the second function is called and has its code executed. However, we've
now told the second function to return a value:
return answer
And what's inside the answer variable? The answer to the sum 10 - 5. This is the value that gets
passed back to the calling line, which was:
Now the variable total will hold the value from the function. Finally, we've displayed the result in an
alert box. Run the code and see how it works.
Passing values to a function
When we called the second function above, we didn't pass any values to it. The round brackets of
our function were entirely empty:
They were empty because the second function accepted no arguments. Here's the same code again,
but this time the second function does accept an argument. In fact, it accepts two arguments:
total = returnvalue(10, 2)
alert(total)
}
function returnvalue(num1, num2) {
answer = num1 - num2
return answer
}
The function returnvalue() is now this:
returnvalue(num1, num2)
We've set up two variable inside the round brackets called num1 and num2. When we call the
second function from the GetValue() function we put something into those two variables:
total = returnvalue(10, 2)
Now, the numbers 10 and 2 will be passed to the second function. These values will be stored in the
two variables. The 10 will be stored in num1 and the 2 will be stored in num2.
Once the values are in the second function, you can do something with them. All we did was
subtract one from the other, and stored the result in the variable answer. The value in answer was
then returned to the calling line:
return answer
Chybusky
WEB DEVELOPMENT 83
OK, now you know how to call function, and have one function call anther, we can do some work on
form validation.
Chybusky
WEB DEVELOPMENT 84
Day 16
JavaScript Form Validation
The form you'll work with is quite simple. It will be used only for your visitors to leave their name,
email address and some comments. They will be invited to say what they liked about the site, and
what they didn't like. This will be done with check boxes. The form we're going to use can be copied
to your own computer by clicking the link below. When the web page loads, save a copy to your
hard drive. So load it up and let's do some coding.
When the Submit button on the form is clicked, we'll use functions to validate the form. If we detect
anything not quite right, we'll invite the user to try again. If the form is OK, we'll send it to an email
address.
The first thing to do is to set up a function to handle the onSubmit event. This function will call
other functions: one function to check the Name text box, one to check the email address, and so on.
So open up the code for the form. Notice the names of our form elements:
Form Name: f1
Name textbox: Name
Email textbox: Email
Comments text area: Comments
Likes Checkboxes: Liked
Dislikes Checkboxes: Hated
Submit Button Event: Validate()
And here's the function for the Submit event:
function Validate() {
Message = ""
Message = Message + CheckName()
Message = Message + CheckEmail()
Message = Message + CheckComments()
Message = Message + CheckLikes()
Message = Message + CheckHates()
if (Message == "") {
return true
}
else {
alert(Message)
return false
}
}
All we're going to be doing is building up a variable called Message. At the start, Message is set to a
blank string:
Message = ""
If, after all our functions have been called, Message is still a blank string, then no errors have
occurred. If no errors have occurred, we can set return to true. Setting return to true will ensure that
the form gets sent. If an error has occurred, then a function will insert some text into the Message
variable. If Message contains any text, then return gets set to false. When return is false the form
doesn't get sent, and the message itself will be displayed in an alert box:
if (Message == "") {
return true
}
else {
alert(Message)
return false
}
Chybusky
WEB DEVELOPMENT 85
Look at the lines that call the functions, though. Here's the first one, the function that checks the
Name textbox:
Message = Message + CheckName()
So we're saying "Put into the variable Message the value returned from the function CheckName().
Keep what was originally in the variable Message." Here's the function to add to your code:
function CheckName() {
UserName = document.f1.Name.value
if (UserName == "") {
Message = "Something's wrong with your name" + "\n"
}
else {
Message = ""
}
return Message
}
First, we put the value from the Name textbox into a variable called UserName:
UserName = document.f1.Name.value
Then we have an if statement to check what is inside of UserName. If the textbox is blank then the
user hasn't entered a name, and the variable UserName will be a blank string. In which case it's an
error. If there is something in the textbox then no error has occurred and we can set the Message
variable to a blank string.
if (UserName == "") {
}
else {
Message = ""
}
Finally, we tell the function to return whatever is inside the Message variable:
return Message
So after the first function call we'd really have either this:
Or this:
Message = ""
If it's the first one, the form won't get sent; if it's the second one, then the user filled the name in
correctly.
In the next part, we'll continue with the functions on our form. We'll tackle email addresses next.
Using JavaScript to Validate an Email Address
Checking for a valid email address is a little more difficult. We have to make sure that the user
typed an "at" sign ( @ ). But we also have to make sure that there's "dot" something at the end: .com,
.co.uk, .net or whatever.
But we also have to check that these are in the right place. If we don't, then the user could enter this:
My.com@FooledYou
instead of something like this:
FooledYou@MyISP.com
In order to check the email address, we can use the in-built JavaScript functions indexOf() and its
brother function lastIndexOf(). The syntax for the functions is this:
stringName.indexOf(searchValue, [fromIndex])
Here's an example:
Email = "FooledYou@MyISP.com"
AtPos = Email.indexOf("@")
Email is the String Name, the text we want to search. The function indexOf() will then search that
text for you. But you have to tell it what to search for. In the example, we told it to search for an "at"
sign ("@"). We could have told the function what position in the string to start the search
Chybusky
WEB DEVELOPMENT 86
[fromIndex]. But you can leave that out if you want to search all the string. The function will then
start the search from the beginning of your string.
If the function indexOf() finds our "at" sign, it will return a number. The number is the position in
the string where the "at" sign was found. If it doesn't find it, minus one (-1) will be returned.
The related function lastIndexOf() does exactly the same thing, except it starts the search from the
last character in your string and works backwards.
Let's build our function to check for a valid email address. We can start with this:
function CheckEmail() {
email = document.f1.email.value
AtPos = email.indexOf("@")
StopPos = email.lastIndexOf(".")
if (AtPos == -1 || StopPos == -1) {
Message = "Not a valid email address"
}
}
We start by passing the email address from the text box to a variable called email:
email = document.f1.email.value
We then use the indexOf() function to check if the email contains an "at" sign:
We can then use the lastIndexOf() function to get the position of the last full stop:
StopPos= email.lastIndexOf(".")
If the two functions have found something, the two variable AtPos and StopPos will both contain
numbers greater than minus one (-1). We add an if statement to check what is inside of these two
variables:
}
In the if statement, we're saying "if the variable AtPos has a value of -1 OR ( | | ) if the variable
StopPos has a value of -1 THEN put some text into the variable Message. Set the return value of the
function to false."
Remember: the OR operator (| |) will return a value of true if any one of its conditions are met. When
an if statement is true, the code inside the curly brackets will get executed.
OK, once we're satisfied that the email does contain an "at" sign and a full stop, we can add another
if statement to check whereabouts these two symbols are in the email address. We don't want the
user to enter something like this:
My.com@FooledYou
In the above email address, there is a full stop and an "at" symbol. So the function lastIndexOf() will
have returned the position of the last full stop, and the function indexOf() will have returned the
position of the "at" sign. However, the email address is not a proper email address. We can prevent
this error with our second if statement:
if (StopPos < AtPos) {
}
The variable StopPos is recording the position of the last full stop in the email address. If this
position is less than the position of the "at" symbol, then we have an error. In which case the
Message variable will contain some text.
Another thing we can check for is this type of error:
FooledYou@.com
In the address above, the last full stop comes after the "at" sign. Our two previous if statement will
not have picked this up. However, the email address is still invalid: there is no address to send it to!
We can add another if statement to check for this:
Chybusky
WEB DEVELOPMENT 87
if (StopPos - AtPos == 1) {
}
The above if statement will check the numerical difference between the full stop position and the
"at" position. If the difference is only 1, then we've caught the error.
And that's about it for our email checker. There are still one or two things you'd need to check about
the email address. These two addresses for example will slip through the net:
@FooledYou.com
Me@FooledYou.
So you might want to (and should now be able to) write if statements to check for these errors.
function CheckEmail() {
email = document.f1.Email.value
StopPos = email.lastIndexOf(".")
Message = ""
if (email == "") {
Message = "Not a valid Email address" + "\n"
}
}
if (StopPos < AtPos) {
}
if (StopPos - AtPos == 1) {
}
return Message
}
We've added another if statement to the function. All it does is check to see if there is anything in the
email text box at all:
if (email == "") {
Message = "Not a valid Email address" + "\n"
}
A new line character has also been added ("\n" ).
In the next part, we'll see how to validate and return checkboxes values.
JavaScript and Checkboxes
The only thing we're going to do with our check boxes on our form is to see if they have been ticked
or not. If a box has been ticked, then no errors have occurred; if none of the boxes have been ticked,
then an error has occurred, and the user will get an alert box. So our check box validation is a "yes"
or "no" affair: Have they ticked a box or not?
What we're not doing is returned the text from the check boxes. The text for our check boxes was
"Cool layout", "Easy to Navigate", etc. We're not passing these values back when the Submit button
is clicked. All the same, we'll see how this is done.
On our Form, the Check box HTML code was this:
<input type="checkbox" name="Liked" value="Cool Layout">Cool Layout
<input type="checkbox" name="Liked" value="Easy to Navigate">Easy to Navigate
<input type="checkbox" name="Liked" value="Great Contents">Great Contents
The NAME value is crucial. For all our check boxes, the NAME is the same - "Liked". The text that
people see on the page comes after the right angle bracket ( > ). The VALUE of the checkbox is the
same as the text that people see on the page. (But it doesn't have to be).
With this in mind, here's our Check Box function:
function CheckLikes() {
Chybusky
WEB DEVELOPMENT 88
boxes = document.f1.Liked.length
txt = ""
for (i = 0; i < boxes; i++) {
if (document.f1.Liked[i].checked) {
txt = txt + document.f1.Liked[i].value + " "
}
}
if (txt == "") {
Message = "No Boxes ticked"
}
else {
Message = ""
}
return Message
}
We start the function by getting the length of the check boxes:
boxes = document.f1.Liked.length
The length here means "How many Check Boxes are there". So our code reads "Of all the check
boxes in the form called f1, how many are there with the name Liked?" The answer will be
inserted into a variable called boxes.
After we set a variable called txt to a blank string (txt = "") we add a for loop to check all of the
boxes with the NAME Liked:
for (i = 0; i < boxes; i++) {
if (document.f1.Liked[i].checked) {
}
}
Because we've given all of our checkboxes the same NAME, the browser can see them as an array of
checkboxes. With an array, we can loop round checking values.
The for loop is set to start at zero, and the end condition is that value we put into the variable boxes -
the number of checkboxes on our form.
Inside the loop, we can access the index number of each check box:
if (document.f1.Liked[i].checked)
Because the for loop started at zero, the check box Liked[0] will be examined first. If it has been
checked, a true value is returned. The statement below is then executed:
The VALUE from the check box Liked[0] is added to the variable called txt.
Next time round the loop, the variable i will be 1. So the second check box will be examined to see if
it was checked or not. If it has been, the VALUE of the checkbox is added to the txt variable.
And we go round and around examining the checkboxes called Liked. At the end of the loop, the
variable txt will either hold the values from the check boxes, or it will still be a blank string.
Depending on which it is, we can return a value for our function:
if (txt == "") {
Message = "No Boxes ticked"
}
else {
Message = ""
}
return Message
Again, we're building up our Message variable. Or not building it up, if no boxes have been ticked.
The function for our second lot of check boxes, the ones called "Hated", works in exactly the same
way as the function above. Except you would changed the "Liked" to "Hated".
Chybusky
WEB DEVELOPMENT 89
And that concludes our script to check form elements for errors. Once you add all the code, and test
it out, you'd get a message box when the form is submitted but nothing has been entered. Try out the
code by clicking the link below. Leave everything blank, then click submit.
To see all the code, click View > Source (in Internet Explorer).
In the next few parts, we'll take a look at how to validate other form elements: drop down boxes, list
boxes, and Radio Buttons.
Using JavaScript to Validate a Drop Down Box
A drop down box on a form allows you to select one option among many. It looks like this:
North East
Here's the HTML code for the above drop down box:
<SELECT NAME = s1>
<OPTION VALUE = "NE" selected >North East</OPTION>
<OPTION VALUE = "NW">North West</OPTION>
<OPTION VALUE = "SE">South East</OPTION>
<OPTION VALUE = "SW">South West</OPTION>
<OPTION VALUE = "Midlands">Midlands</OPTION>
</SELECT>
Notice the NAME of our Select box (as the drop down box is called in HTML world). The NAME
we've chosen is s1. The name of our form is f1. So here's a function that gets which item the user
selected:
function GetSelectedItem() {
len = document.f1.s1.length
i=0
chosen = "none"
for (i = 0; i < len; i++) {
if (document.f1.s1[i].selected) {
chosen = document.f1.s1[i].value
}
}
return chosen
}
The code is similar to the check box code. We set the length of the select box (length is how many
items in the list, minus 1 item):
Then inside the loop, we again access the index number of the SELECT object:
document.f1.s1[i].selected
So, s1[0] is the first item in the list, s1[1] the second item, s1[2] the third, and so on.
Once the selected item has been detected, you access it's value property and pop it into a variable:
chosen = document.f1.s1[i].value
You can test out the script by selecting an item from the box below.
North East
What we've done with this box is to add an event to the select box. The event calls the function:
<SELECT NAME = s1 onChange = GetSelectedItem()>
In the next part, we'll see how to get at which items have been selected in a list box.
Using JavaScript to Validate a List Box
A form element closely related to the Select element is the Multiple select. This time, the elements is
a list box where you can select more than one item. You select more than one item by holding down
the Ctrl key on your keyboard and then clicking items with your left mouse button. Here's what they
look like:
Chybusky
WEB DEVELOPMENT 90
Shopping
Fashion
Opera
Books
Pop Music
To get which items have been selected, we can use the same code we used for the drop down list.
The only difference is the line inside the if statement:
i=0
chosen = ""
for (i = 0; i < len; i++) {
if (document.f1.s1[i].selected) {
chosen = chosen + document.f1.s1[i].value + "\n"
}
}
return chosen
}
The main thing that's changed is this line:
chosen = chosen + document.f1.s1[i].value + "\n"
And the only thing we're doing different is adding the selected item to whatever is already inside the
variable called chosen and we've added the new line character to the end. Also changed is chosen =
"" insted of "none",
As a matter of interest, the HTML code for a Multiple select list box is this:
<SELECT NAME = s1 size = 5 multiple>
SIZE is how many items in the list (starting at 1). Then you just add the word multiple. The rest of
the HTML code is the same as the SELECT box.
You can test out the script by selecting a few items from the box below. Then click the button.
Shopping
Fashion
Opera
Books
Get Selected Items
Pop Music
In the final part of the Form Validation section, we'll take a look at how to validate Radio Buttons
Using JavaScript to Validate Radio Buttons
Radio buttons are closely related to check boxes. Only, with a radio button you get just the one
choice from a list of options. With a check box you can tick all the boxes, if you wanted. Here's what
radio buttons look like on a form:
Your Location:
North East North West South East South West Midlands
If you clicked another option, the one already selected is deselected. Here's the HTML code for our
radio buttons:
<Input type = radio Name = r1 Value = "NE">North East
<Input type = radio Name = r1 Value = "NW">North West
<Input type = radio Name = r1 Value = "SE">South East
<Input type = radio Name = r1 Value = "SW">South West
<Input type = radio Name = r1 Value = "midlands">Midlands
Notice that the NAME of all the radio buttons is the same - r1. We use this name in our JavaScript
function. Again, we're assuming the NAME of our form is f1. Here's a function which checks which
radio button was selected:
chosen = ""
len = document.f1.r1.length
Chybusky
WEB DEVELOPMENT 91
for (i = 0; i <len; i++) {
if (document.f1.r1[i].checked) {
chosen = document.f1.r1[i].value
}
}
if (chosen == "") {
alert("No Location Chosen")
}
else {
alert(chosen)
}
}
Again. We're just looping round and checking which item is selected. This time, we're using the
checked property of the radio button:
if (document.f1.r1[i].checked)
If a checked item is found, the value of the radio button clicked will be put into our chosen variable:
chosen = document.f1.r1[i].value
Try out the Radio Buttons again. Select an option and see what happens
Your Location:
North East North West South East South West Midlands
And with radio buttons tested, we can leave this Form validation section for good. You need never
return again, if you don't want to.
Chybusky
WEB DEVELOPMENT 92
Day 17
Substring() and Split()
For this last section of the Javascript course, we're going to look at manipulating text with
Javascript's own in-built functions. These in-built functions can really make your life easier, and if
you're serious about learning the Javascript language you just have to know them. The ones we're
going to cover are these:
substring()
charAt()
split () and join()
toUpperCase()
toLowerCase()
We're going to learn about substring() and split() first. To get the hang of these functions, we'll
create a simple little game. Off we go.
A Name Swapper Game

The game we'll create is this: A name is entered in a text box. When a button is clicked, a function
will swap the first two letters of the surname with the first two letters of the first name, and vice
versa.
If that's not too clear, here's the little programme we're going to write. Click the button below and
see what happens.
Bill Gates
The "Ga" of Gates is now the "Bi" of Bill; and the "Bi" of Bill is now the "Ga" of Gates.
So, create a web page with a button and a text box on it, just like above. Put the textbox and button
inside of FORM tags. Call the form f1 and the text box t1. Add an onClick() event to the button. The
onClick event will call our function:
onClick = jumble()
function jumble() {
}
The first thing we need to do in our function is get the name from the text box.
function jumble() {
fname = document.f1.t1.value
}
split()
Next, we need to split the name entered into a first name and a second name. We can use the split()
function for that:
function jumble() {
SplitName = fname.split(" ")
}
The split() function splits text and puts the pieces into an array, with each piece taking up one slot in
the array. For example, if you were to split "This is some text", the split() function would create an
array with four slots (zero to 3). The first slot in the array would contain "This", the second slot
would contain "is", the third "some" and the fourth "text".
The syntax for the split() function is this:
String.split([separator])
String is the text you want to split. You then type a full stop followed by split(). Inside the round
brackets you type the character that you want the function to use when it's doing the splitting (the
separator). In our function we typed a space surrounded by double quotes:
SplitName = fname.split(" ")
Chybusky
WEB DEVELOPMENT 93
So we're telling the function to look for a single space in the variable fname. When it finds a single
space, use that to add an item to the array.
When it finishes splitting, our variable SplitName will be an array. You can access all the "pieces" in
the array by referring to the index number. You can do it very simply, like this:
SplitName[0]
SplitName[1]
Or you can use a loop, like this:
for (num = 0; num < SplitName.length; num++) {
document.write(SplitName[num])
}
The length of SplitName is how many slots in the array - the length of the array, in other words.
We'll do it the simple way, because we know we only want to manipulate a first name and a second
name.
sname = fname.split(" ")
first = sname[0]
second = sname[1]
So first will now hold the first name from the text box, and second will hold the surname from the
text box.
Before we go any further, a function related to split() is join(). The join function will join together
strings in an array. The syntax is this:
arrayname.join(separator)
Here's an example of how to use it:
aryText = new Array("This", "is", "some", "text")
t1 = artText.join()
t2 = artText.join(" ")
t3 = artText.join(" - ")
The empty round brackets of t1 gets you a comma as a separator (the default); the t2 puts in spaces
as a separator; the t3 puts in a minus sign as a separator. So the three variables will now be this:
t1 = This, is, some, text
t2 = This is some text
t3 = This-is-some-text
But back to our little programme. We have just got the first and surnames and put them into
variables. Now what? Well, we now have to chop our two names up a bit. Remember: we're
swapping the first two characters of each name. We'll do them one at a time. Let's chop the first
name up.
substring()
We need to grab the first two characters of our first name, and separate them from the rest of the
name. We can use the function substring() to do this.
first1 = first.substring(0, 2)
first2 = first.substring(2, first.length)
The syntax for substring() is this:

stringname.substring(indexA, indexB)
After typing the string you want to manipulate, you type a full stop. The name of the function comes
next: substring(). In between the round brackets, you need two numbers: where you want to start the
search (IndexA), and where you want to end the search (IndexB). Look at how we used the function:
So we're saying, "Search the variable called first. Start the search at position zero (zero is the
first character of the string). End the search at position 2." The function will then strip the
characters specified and put them into the variable first1. So, if we started with the first name of
"Bill", the code above would put "Bi" into the variable first1.
To get the rest of the name, we did this:
Chybusky
WEB DEVELOPMENT 94
Now, we're starting the search from position 2. We're ending at the length of the variable first.
Again, if we started with the first name of "Bill", the code above would put "ll" into the variable
first2.
You can use substring() to strip character from right to left, instead of left to right as we did. All you
need to do is make indexB a smaller number than indexA. So if we did this:
the function substring() would start the search on the right hand side, at character zero. It would then
grab characters up to indexA, which is set at two above. In other words, it would grab two characters
starting from the right. Had it been 5, 0 it would grab five character from the right.
OK, we've found a way to chop our first name up. We can do the same for the surname:
second1 = second.substring(0, 2)
second2 = second.substring(2, second.length)
The only thing left to do now is joined the jumbled pieces together and display the result in the text
box:
fname = second1 + first2 + " " + first1 + second2
document.f1.t1.value = fname
The entire code for our jumble() function is then this:
function jumble() {
sname = fname.split(" ")
first = sname[0]
second = sname[1]
second1 = second.substring(0, 2)
second2 = second.substring(2, second.length)
fname = second1 + first2 + " " + first1 + second2
document.f1.t1.value = fname
}
Add it to your web page and test it out. When Bill Gates is entered into your text box, you should get
"Gall Bites" when the button is clicked.
Using the charat() function
Another useful in-built JavaScript function is chartAt(). We'll see how this works by creating an
anagram programme. We'll keep the same format of text box and button. But this time, when the
button is clicked, the programme will create an anagram of the name in the text box. Try it out by
clicking the button below (though you might need to click the button a few times before you get
anything useful):
Bill Gates
An Anagram Programme
To create your own anagram programme, you need a button and a text box on a your web page. The
form is called f1, and the text box is called t2. The onClick event of the button is this:
onClick = anagram()
Again, we start our function by getting the name from the text box:
function anagram() {
}
Once we've got the name, the technique we're going to use is this:
• Put all the individual letters (and spaces) into an array
• Use a shuffle algorithm to jumble up the letters in the array
• Display the jumbled letters in the text box
Chybusky
WEB DEVELOPMENT 95
Before we tackle the first step, let's use a simple in-built function to convert all the letters in the
name:
fname = fname.toLowerCase()
The two inbuilt JavaScript function toLowerCase() and toUppercase() do exactly what you'd expect
them to do: convert all the characters to either lower case letters or to uppercase letters. The string
you're trying to convert comes first. In the code above, we wanted to convert whatever was in the
variable fname to lowercase letters.
Now that we've got the name from the text box, and converted the letters to lowercase, we can tackle
the first step of our three on the list: Put all the individual letters (and spaces) into an array.
We set up the array like this:
aryText = new Array(fname.length)
}
All we're doing here is setting up an array called aryText. The number of slots (positions) in the
array is set by fname.length. This will get you how many characters are in the variable fname. The
number of characters is also the size of the array - one slot for each character.
Once we've created the array, we can fill all the slots with the characters from our text box. First we
get the length of the array:
len = aryText.length
We then use the length as the upper boundary for a for loop:
for (i = 0; i < len; i++) {
aryText[i] = fname.charAt(i)
}
Notice the line that is filling our new array:
We are accessing each slot in the array with aryText[i]. We're setting the value of each slot to a
character from our text box:
= fname.charAt(i)
And there's the charAt() function. The charAt() function returns the position of character in a string.
charat()
The syntax for the charat() function is this:
stringname.charAt(index)
First you type the string you want the function to search. After a full stop, you type the name of the
function: charAt(). In between the round brackets, you type a number (index). This number is used
by the function to search your string. The search will start at 0. So if you type charAt(5), the function
will tell you what character is at this position. For example:
Text = "Some text"
OneCharacter = Text.charAt(5)
The variable OneCharacter will hold the letter "t" of text.
We used the charAt() function like this:
= fname.charAt(i)
The sting fname will be searched by the function. We've set the search position to our loop number.
So what we're really doing is this:
= fname.charAt(0)
= fname.charAt(1)
Chybusky
WEB DEVELOPMENT 96
= fname.charAt(2)
= fname.charAt(3)
The character at these positions is then transferred to a slot in our array:
And that will fill the array with each character from our text box. Once the array is filled, we can
move on to step two - Use a shuffle algorithm to jumble up the letters in the array.
This is not as complicated as it sounds. In fact, you've already met the shuffle algorithm. We used
one when we created the lottery programme. We can use the same one again:
for (i = 1; i < len; i++) {
newnumber = (Math.random() * len)
temp = aryText[i]
aryText[i] = aryText[newnumber]
aryText[newnumber] = temp
}
The last time we met this, we selected a random number from 1 to 49, which corresponded to a
lottery number. This time, we want a random number from zero to the length of our array. We've
already got the length of the array in the len variable. So we can use that to grab a random number:
Remember: the Math.random() function gets you a random number from zero to 1. If we multiply
this by the length of our array, we can use this number as an index. But the random number will be a
floating point number. So we have to chop off all the .342678 bit. That's what this does:
Once we have our index number, we can use it to swap the letters around in our array:
temp = aryText[i]
Now that we've jumbled up all the letters in our array, we can use the join() function to join all the
separate letters in the array. When we've done that, we'll have one single name again, and we can
display it in the text box:
NewName = ""
NewName = aryText.join("")
document.f1.t2.value = NewName
Notice the join() function:
aryText.join("")
We're saying join all the elements in the array, but don't use anything as a separator. That's we've put
a pair of double quotes in between the round brackets. But the double quotes have no space between
them.
Finally, display the new name in the text box:
And that's it - our own little anagram generator. Here's the entire code, in case you want to copy and
paste it:
aryText = new Array(fname.length)
len = aryText.length
for (i = 0; i < len; i++) {
}
Chybusky
WEB DEVELOPMENT 97
newnumber = ""
temp = ""
i=0
for (i = 1; i < len; i++) {
temp = aryText[i]
}
NewName = ""
NewName = aryText.join("")
}
</SCRIPT>
Now that you know a thing or two about string manipulation, we can end this section. In fact, the
entire javascript course is coming to an end. You should now have the skills to take your
programming further, and develop better scripts than the ones you've learned with us. Good luck -
and have fun with your JavaScript programming.
Chybusky
WEB DEVELOPMENT 98
Chapter 3
Microsoft FrontPage 2003
Introduction
Microsoft Office FrontPage 2003 has an improved design environment, new layout and design tools,
templates, and improved themes— all created to help you realize your Web site vision without
requiring any knowledge of HTML.
Improved work environment and larger design area
FrontPage 2003 centralizes all of the Web design features and gives you a panoramic view of your
entire Web site, making site and page design easier than ever. The larger design area also reduces
scrolling.
Layout tables and cells
You can create professional-looking Web page layouts by using layout tables and cells. A layout
table is the framework you create for your page. Layout cells are regions within that framework that
contain the content in a page, including text, images, Web parts, and other elements. You can select
from a list of predefined layouts or you can draw your own— and you can try a variety of layouts
before you make your final decision.
The layout table tools are located in an easily accessible task pane. You can use the tools to apply
additional formatting, such as rounded corners, borders, autostretch, and other visual effects.
Image Tracing
When you use image tracing, you create a mock-up image of a Web page in a graphics program and
then use it as a visual guide to create or trace the Web page design in FrontPage. You can show or
hide the image, set its opacity, and change its position.
Dynamic Web Templates
You can quickly create HTML pages that share the same layout by attaching Dynamic Web
Templates to them. You can specify that certain regions within a template are available for editing,
while all of the other regions remain protected. This means that you can allow others to add and edit
content, yet preserve the layout of the pages and the template itself.
You can use any number of Dynamic Web Templates in a Web site, and you can attach a Dynamic
Web Template to as many pages as you like. You can also save Dynamic Web Template (.dwt) files
to any location. If you choose to detach a Dynamic Web Template from one or more pages in a site,
you do not remove the content from those pages. You remove only the formatting provided by the
template.
Page rulers and layout grid
Precision design and placement is a snap with helpful positioning guides, such as page rulers and the
background layout grid. You can customize the rulers or the grid by choosing a unit of measurement,
line styles and colors, and spacing options.
Design-time layers
In FrontPage 2003, layers can contain HTML elements, such as text and graphics. In the Layers task
pane, you can view an itemized list of all the layers on your Web page. You can overlap, nest, and
show or hide layers on a page. You can also animate layers by using the Behaviors task pane, which
enables you to add Dynamic HTML (DHTML) script to any element on a Web page.
Improved themes
FrontPage 2003 uses cascading style sheets rather than HTML to apply themes, so your files are
smaller, more transparent, and easier to control and modify. Additionally, pages with HTML themes
applied in previous versions retain their settings in FrontPage 2003.
Develop your Web site
Microsoft Office FrontPage 2003 has an improved authoring environment, new graphic features,
powerful coding tools to help you apply and increase your knowledge of various coding languages,
and tools to help you create interactive scripts. In addition, FrontPage 2003 generates efficient and
clean HTML and gives you more control over the code.
Chybusky
WEB DEVELOPMENT 99
Web page views
You can work with your Web pages in any of the following Page views:
Design view Design and edit Web pages in Design view. This view provides an approximated
WYSIWIG authoring experience as you create your Web pages by using the design tools.
Code view View, write, and edit the HTML tags yourself. With the optimized code features in
FrontPage 2003, you can create clean HTML, and it is easier for you to remove any code that you do
not want.
Split view Review and edit Web page content in a split-screen format that offers you simultaneous
access to both the Code and Design views.
Preview view Approximate how the page will look in the Web browser without having to save
your page. Use this view to check changes you make as you create your Web page.
Graphics tools
Improved graphic support
Working with graphics from other programs is easier than ever. New interfaces clearly explain the
default behaviors when you import images into your Web site and what behavior to expect while
you edit those images. This gives you more control over how images are displayed and saved.
Multiple-editor configuration
Choose which editor to use for different types of content. For example, if you have a number of GIF
format files, some of which are photos and some of which are diagrams, you can edit the photos in
Adobe PhotoShop and work with the diagrams in Microsoft Office Visio 2003.
Macromedia Flash support
To enhance and update your FrontPage Web site, you can now add Macromedia Flash content,
including movies, repetitive audio-enhanced animations, and previously recorded presentations or
courses. You can set options for automatic playback, such as playing a short animation one time
when the site visitor first loads the page or looping the content to play continuously.
Scripting and coding tools
Behaviors
Behaviors are scripting options that enable you to quickly add interactivity or increased functionality
to text or other elements of your Web page. For example, you can add a behavior to an image so that
it displays differently when a site visitor moves the pointer over it. You can also view and edit the
scripts associated with the current page by viewing a list in the Behaviors task pane.
Interactive Buttons
You can add professional-looking buttons to your Web page by selecting them from a list. After you
select a button, add button text, choose the font and button color, define a link, and set the image and
text settings for original, hover, and pressed states.
Quick Tag Tools
Use the Quick Tag Selector to quickly select any tag in your Web page. Use the Quick Tag Editor to
insert, wrap, and edit HTML tags.
Code snippets
In FrontPage, code snippets are one or more lines of HTML or other code that you can save and use
again. You can store blocks of code and insert them in pages from a library of code snippets. Code
snippets can contain anything you can insert in Code view— HTML, CSS, and so forth.
Chybusky
WEB DEVELOPMENT 100
Day 18
About creating and designing Web pages
Some of the content in this topic may not be applicable to some languages.
Web pages are the basic documents of the World Wide Web. They can either be part of a Web site,
or they can stand alone. Many of the features in Microsoft FrontPage are used when working with a
Web site. There are also features in FrontPage that will help you to both design and create your Web
page.
To help you create professional-looking and well-designed Web pages, FrontPage provides several
page templates that you can use to quickly create pages with a variety of layouts and functions. For
example, you can use a FrontPage template to create a user registration page, guest book, feedback
form, a page with a search form, and more.
You can use themes to create pages with a consistent design. A theme contains unified design
elements with a color scheme, including fonts, graphics, backgrounds, navigation bars, horizontal
lines, and other page elements.
If you prefer to design and lay out pages yourself, you can start with a blank page, and then do one
or more of the following:
• Use frames, tables, layouts, or absolute positioning to precisely position text and graphics on
a page.
• Add page elements, such as text, graphics, page banners, tables, forms, hyperlinks, and so on.
• Add dynamic elements such as Flash content, video, sound, or animated GIFs.
• Add content or functionality that can change, such as marquees, hit counters, time stamps,
page transitions, interactive buttons, and behaviors that use Dynamic HTML (DHTML).
• Format text by applying styles or using style sheets.
• Set the background of your Web page with either color or pictures.
• Create your own page templates by using dynamic Web templates, which can include pages
that contain page settings, formatting, and page elements.
You can also start with a graphical representation of your Web site, called a tracing image. You can
do this by creating a mock-up of a Web page image in a graphics program and then use it as a visual
guide to re-create or trace the Web page design.
Editing in FrontPage
You do not need to know how to code in HTML to use FrontPage. While you edit pages as you
would in a word processor — typing and formatting text, and adding graphics, tables, and other page
elements — FrontPage adds the HTML tags in the background. You simply edit your pages in
Design view.
However, if you want to familiarize yourself with HTML or edit HTML code directly, you can also
use Code view, which displays the HTML code of a Web page, or Split view, which displays both
Code view and Design view simultaneously.
If you are familiar with HTML, you can display the HTML tags in Code view and you can write and
edit the HTML tags yourself. With the create and maintain optimized code options available in
FrontPage, you can create clean HTML, and easily remove any code that you do not want.
In FrontPage, you can use Extensible Markup Language (XML) to complement, rather than replace,
your HTML. You can view or edit files, apply standard formatting to the structure of code in XML
files, view the XML tree, and create custom displays of XML data on Web pages. For example, you
can create a Web page that displays data from an XML file, format that data, and apply filtering,
sorting, and conditional formatting to display the data the way you want.
Turn support for FrontPage Web components on or off
1. On the Tools menu, click Page Options, and then click the Authoring tab.
2. Do one of the following:
o To turn support on or off for Web components that can make it easier to create and
design Web pages — such as a photo gallery — select or clear the Author-time Web
Components check box.
Chybusky
WEB DEVELOPMENT 101
o To turn support on or off for Web components that are available on Web sites located
on Web servers running FrontPage Server Extensions from Microsoft, SharePoint
Team Services from Microsoft, or Microsoft Windows SharePoint Services, select or
clear the Browse-time Web Components check box.
Note When you turn on support for author-time Web components, support for link bars and shared
borders is not automatically turned on as well. To turn support on or off for link bars or shared
borders, select or clear the Navigation or Shared Borders check box.
About tracing images
You can create a mock-up of a Web page image in a graphics program and then use it as a visual
guide to re-create or trace the Web page design. This is called a tracing image and it can be a JPEG,
GIF, PNG, or BMP image. After you set a tracing image, it appears in the background of the
document window in Design view. You can show or hide the image, set its opacity, and change its
position.
You can view the tracing image only in Microsoft FrontPage. You cannot see the tracing image
when you view your site by using a Web browser.
After you set a tracing image, it is stored in a layer between the background image and the editor in
FrontPage. If the opacity of the tracing image is set to '0' you will not be able to see it, but you will
be able to see all the text and object elements.
The X and Y coordinates of the tracing image correspond to the upper-left corner of the document
window. You can set the placement of the tracing image in pixels by choosing the X (side to side)
and Y (up or down) coordinates in the Tracing Image dialog box. If your margins are set to a
margin other then '0', the tracing image will not take them into account as the tracing image
placement is always set relative to the upper-left corner of the document. The following illustrations
show how the X and Y coordinates determine the placement of the tracing image.
When you save a Web page that contains a tracing image, you will be prompted to save the tracing
image as an embedded file in your Web site. Doing this will not effect the appearance of your site in
a browser. If you set a second tracing image for a page, the first image disappears.
Set a tracing image
1. In Page view, at the bottom of the document window, click Design .
2. On the View menu, point to Tracing Image, and then click Configure.
3. Locate and click the file you want to set as a tracing image, and then click Insert.
4. In the X box, type or select the horizontal coordinates for the tracing image in pixels.
5. In the Y box, type or select the vertical coordinates for the tracing image in pixels.
6. Under Opacity, move the slider to set the opacity of the tracing image.
Show or hide a tracing image
• In Page view, at the bottom of the document window, click Design .
• On the View menu, point to Tracing Image, and then click Show Image.
Open a Web page
Do one of the following:
Open a page from within the current Web site

• In Folders view, double-click the page.
Open a page on a different Web site or in a local file system

Important Open files from a trusted source. Question messages, attachments or files from
unexpected sources. If a file has an unusual filename, timestamp, extension, file size, or other
property, do not open the file. Always scan files with antivirus software before opening them. In the
course of infecting a hard drive or a Web server, some viruses may create files or overwrite existing
ones. If opened, these files may cause harm to your system. Make sure your server is running up-to-
Chybusky
WEB DEVELOPMENT 102
date antivirus software. For more information, contact your Web server administrator or Web site
hosting company.
1. In Folders view, locate and click the file you want, and then click Open .
Note If you open a Web page that is on a different Web site from the one you have open, a new
instance of Microsoft FrontPage will open.
Create a new Web page
1. On the File menu, click New.
2. In the New task pane, under New page, do one of the following:
o To create a Web page from a blank page, click Blank page.
o To create a Web page from a dynamic Web template that you’ve created, click From
existing page, locate and click the template, and then click Create new.
o To create a Web page from a template included with Microsoft FrontPage, click
More page templates, click the tab for the type of template you want, and then click
a template.
Save a Web page
Save a Web page to the current Web site

• Do one of the following if you have:
Not saved the page
1. Click Save .
2. Locate and double-click the folder where you want to save the page.
3. In the File name box, type the file name of the page, and then click Save.
Opened the page from the current Web site
o Click Save .
Opened the page from a location outside the current Web site
5. On the File menu, click Save As.
6. Locate and double-click the folder where you want to save the page.
7. In the File name box, type the file name of the page, and then click Save.
Save a Web page to a different Web site

2. Locate and click the Web site where you want to save the page.
3. In the File name box, type the name of the page.
4. Click Save .
Save a Web page to a file system

2. Locate and click the location in the file system where you want to save the page.
3. In the File name box, type the name of the page.
4. Click Save.
Save a Web page automatically before previewing it in the browser

1. On the File menu, point to Preview in Browser, and then click Edit Browser List.
2. Click the Automatically save page before previewing check box.
Chybusky
WEB DEVELOPMENT 103
Notes
• If you have added graphics, ActiveX controls (ActiveX control: A control, such as a check
box or button that offers options to users or runs macros or scripts that automate a task. You
can write macros for the control in Microsoft Visual Basic for Applications or scripts in
Microsoft Script Editor.), sound files, or other objects to the page, you will be prompted to
save them to the same location as the page.
• To ensure that all site visitors can follow URLs (Uniform Resource Locator (URL): An
address that specifies a protocol (such as HTTP or FTP) and a location of an object,
document, World Wide Web page, or other destination on the Internet or an intranet, for
example: http://www.microsoft.com/.) regardless of their computer language or operating
system, you should use plain ASCII (ASCII: Code representing characters in the English
language as numbers. Each character is assigned a number from 0 to 127. Most computers
use ASCII to represent text and to transfer data from one computer to another.) characters in
the URLs for your Web pages. On intranets, using non-ASCII characters in a file name will
work as long as the server (server: On a local area network, a computer that controls access
to all or part of the network and its resources, such as printers. On the World Wide Web, a
computer running Web server software that responds to HTTP protocol requests. Also called
a host.) and all clients share the same system code page.
Set Web page margins
2. Right-click the page, and then click Page Properties on the shortcut menu.
3. Click the Advanced tab.
4. Do one or all of the following:
Set a top margin

1. In the Top Margin box, enter a value for a top margin in pixels (pixel: A single unit
of measurement that your computer's display hardware uses to paint images on your
screen. These units, which often appear as tiny dots, compose the pictures displayed
by your screen.).
2. In the Margin Height box, enter a value for the height of the margin in pixels.
Set a left margin

3. In the Left Margin box, enter a value for a left margin in pixels.
4. In the Margin Width box, enter a value for the width of the margin in pixels.
Set a bottom margin

5. In the Bottom Margin box, enter a value for a bottom margin in pixels.
6. In the Margin Height box, enter a value for the height of the margin in pixels.
Set a right margin

7. In the Right Margin box, enter a value for a right margin in pixels.
8. In the Margin Width box, enter a value for the width of the margin in pixels.
Chybusky
WEB DEVELOPMENT 104
Day 19
About layout tables and cells
Overview of layout tables and cells
With Microsoft Office FrontPage 2003, you can create professional-looking Web page layouts by
using layout tables and cells. A layout table is the framework you create for the page layout. Layout
cells are the regions within that framework that contain the content in a page, including text, images,
Web parts, and other elements. Together, layout tables and cells represent horizontal and vertical
regions that users can add to Web pages, which can provide a sophisticated visual structure for your
content.
The following example displays a layout table and cells in the initial stages, where the layout table is
shown with a lighter background color and the cells are shown as dark rectangles within the table.
The following example shows the same layout table and cells with content.
You can use the predefined layout tables that are available in the Layout Tables and Cells task pane
to help you get a quick start on a Web page. You can also create your own custom layout table by
drawing tables and cells. Additionally, you can edit a Web page that contains layout tables and cells
that you added by using FrontPage or another Web authoring tool, including Macromedia
Dreamweaver.
You can draw a layout table that contains a cell along the top edge of the page to hold a header
graphic, a cell on the left edge of the page to hold a link bar, and another cell to hold the main
content of a Web page, that snaps to the right edge of the page. You can create simple or complex
layout tables, depending on your requirements.
Working with layout tables and cells
You can draw a layout table and then add cells on your Web page by using the layout tools,
available in the Layout Tables and Cells task pane. You can select a predefined layout table
template, or you can create your own layout table and adjust width and height settings, set the
alignment, set the page margins, and apply color and special borders.
When you click the border of a layout table or cell to activate it, labels representing the column
width and row height appear on each side. Each label includes a drop-down arrow that you can click
to view a list of options for resizing a column or row.
The following example shows how a layout table or cell looks in FrontPage when you have clicked
the border to activate it.
You can also select one column or row in a table and enable it to automatically expand to fill as
much of a browser window as possible. The expanding cell functionality is referred to as autostretch.
When you click the arrow on the column width or row height resize label, and then click Make
Column Autostretch or Make Row Autostretch, you make that cell an autostretch cell, and the
cell will automatically resize to fit the available space of a site visitor's browser window.
About the Layout Tables and Cells task pane
The Layout Tables and Cells and Cell Formatting task panes are the primary tools for working
with layout tables and cells. You can accomplish the following in these task panes:
• Draw a layout table.
• Insert a layout cell.
• Set the width and height of a table or cell.
• Adjust page margins.
• Set the alignment of a layout table or cell.
• Turn the layout tools on and off.
• Select a predefined layout table.
Formatting layout cells
Chybusky
WEB DEVELOPMENT 105
After you have added a layout table and the individual cells to make up the structure of your Web
page, you can begin adding details such as color, graphical borders, drop shadows, and other
decorative effects — including corners that create a tab-like look on selected edges of a cell.
Add or draw a layout table
1. On the Table menu, click Layout Tables and Cells.
2. In the Layout Tables and Cells task pane, do one of the following:
Add a layout table from the Table layout template list
o Under Table layout, select a layout table from the list of templates.
Draw a layout table
2. Under New tables and cells, click Draw Layout Table .

3. Move the pointer to the leftmost corner of the document window, and then drag to
draw the table.
4. In the Layout Tables and Cells task pane, under Table properties, set the properties
that you want.
Add a cell to a layout table
1. In the Layout Tables and Cells task pane, under New tables and cells, click Draw Layout
Cell .
2. On the layout table, drag the pointer to draw the cell.
3. Repeat steps 1 and 2 to add more cells.
Tip
To draw two or more cells, one after the other, click Draw Layout Cell , and press and
hold CTRL while you drag the pointer.
4. To set properties for a selected cell, on the Layout Tables and Cells task pane, click Cell
Formatting and select the properties you want.
Resize a layout table or cell
Resize a layout table or cell in small increments

1. Click the border of the layout table or cell.
2. Press and hold ALT, and then drag the border to resize it.
Resize a layout table or cell by using autostretch

2. To activate a layout table or cell, click the border.
3. On the column width or row height label, click the arrow to display the drop-down menu,
and then click Make Row Autostretch or Make Column Autostretch.
Note You can apply autostretch to only one cell in a layout table. The corresponding rows or
columns in the layout table must be set at a fixed width or height.
Set properties for a layout table
1. In the document window, click the border of the layout table that you want to set properties
for.
2. In the Layout Tables and Cells task pane, under Table properties, select the properties that
you want.
Tip
To override the default margins of a Web page and let the layout table span to the edges of the
document window, set the margin properties to 0 (zero).
Chybusky
WEB DEVELOPMENT 106
Set the corner and shadow properties for a layout cell
1. In the document window, click the border of the cell that you want to set the corner and
shadow properties for.
2. In the Layout Tables and Cells task pane, click Cell Formatting.
3. Click Cell Corners and Shadows, and then do one or more of the following:
Change corner properties of a layout cell

o Under Corners, do one or more of the following:
To add a custom image to a corner of a cell, click Use custom image, and
then click Browse to locate the graphic you want to use.
To set width or height of a cell corner, in the Width and Height boxes, type
the value that you want in pixels (pixel: A single unit of measurement that
your computer's display hardware uses to paint images on your screen. These
units, which often appear as tiny dots, compose the pictures displayed by your
screen.).
To add color to a cell corner, click a color from the Color list.
To add color to the border of a cell corner, click a color from the Border
color list.
To apply a corner to the top, bottom, or both top and bottom sides of a cell,
under Apply, click the options that you want.
Change shadow properties of a layout cell
o Under Shadows, do the following:
To set the width of a drop shadow for a cell, in the Width box, type the value
that you want in pixels.
To set the intensity of a drop shadow of a cell, in the Softness box, type the
value that you want in pixels.
To add color to a drop shadow of a cell, click a color from the Color list.
To add color to a drop shadow of a cell border, click a color from the Border
color list.
To set the side on which a drop shadow falls, under Apply, click the option
that you want.
Set the header and footer properties for a layout cell
1. In the document window, click the border of the cell that you want to set the header or footer
properties for.
3. In the Cell Formatting task pane, click Cell Header and Footer, and then do one or more
of the following:
Set the header properties for a layout cell

Under Header, click Show header, and then do one or more of the following:
o To change the default, in the Height box, type a value that you want in pixels (pixel:
A single unit of measurement that your computer's display hardware uses to paint
images on your screen. These units, which often appear as tiny dots, compose the
pictures displayed by your screen.).
o To set the cell padding for the number of pixels between the cell header and the cell
boundaries, in the Padding box, type a value in pixels.
o To set the vertical alignment of a cell header, in the VAlign list, click Top, Middle,
or Bottom.
o To set the background color of a cell header, click a color in the BgColor list.
o To set the thickness of a header cell border, in the Border width box, type a value in
pixels to indicate the width of the border you want.
Chybusky
WEB DEVELOPMENT 107
o To add color to a cell header border, click a color from the Border color list.
Set the footer properties for a layout cell

Under Footer, click Show footer, and then do one or more of the following:
o To change the default, in the Height box, type a value that you want in pixels (pixel:
A single unit of measurement that your computer's display hardware uses to paint
images on your screen. These units, which often appear as tiny dots, compose the
pictures displayed by your screen.).
o To set the cell padding for the number of pixels between the cell footer and the cell
o To set the vertical alignment of a cell footer, in the VAlign list, click Top, Middle, or
Bottom.
o To set the background color of a cell footer, click a color in the BgColor list.
o To set the thickness of a footer cell border, in the Border width box, type a value in
pixels to indicate the width of the border you want.
o To add color to a cell footer border, click a color from the Border color list.
Set the layout and border properties for a layout cell
1. In the document window, click the border of the cell that you want to set the layout and
border properties for.
3. In the Cell Formatting task pane, click Cell properties and borders, and then do one or
more of the following:
Set the layout properties for a layout cell

Under Layout cell properties, do one or more of the following:
o To set the fixed width or height of a cell, in the Width and Height boxes, type the
value that you want in pixels (pixel: A single unit of measurement that your
computer's display hardware uses to paint images on your screen. These units, which
often appear as tiny dots, compose the pictures displayed by your screen.).
o To set the padding for the number of pixels between content in a cell and the cell
o To set the vertical alignment of a cell, in the VAlign list, select Top, Middle, or
Bottom.
o To set the background color of a cell, click a color in the BgColor list.
Set the border properties for a layout cell
Under Borders, do one or more of the following:
o To set the thickness of a cell border, in the Width box, type a value in pixels to
indicate the width of the border you want.
o To add color to a cell border, click a color from the Color list.
o Under Apply, click the button that indicates the type of border you want to apply to
the cell.
Turn layout tools for layout tables on or off
The layout tools in Microsoft FrontPage are turned off by default.
• Do one of the following:
Turn the layout tools on
1. On the Table menu, click Layout Tables and Cells.
2. In the Layout Tables and Cells task pane, add a layout table.
When you add a layout table, the tools turn on automatically.
Turn the layout tools off
1. Click the border of a layout table or cell.
2. In the Layout Tables and Cells task pane, click Show Layout Tool .
Chybusky
WEB DEVELOPMENT 108
Tip
If you maintain a layout table or cell in a page with the layout tools turned off, you can always turn
the tools back on by clicking Show Layout Tool .

Delete a layout table or cell
Delete a single layout cell
• Click the border of the layout cell and then press DELETE.
Delete a layout table
• If the layout tools are turned on and the entire layout table is activated, press DELETE.
• If the layout tools are turned off or the layout table is not activated, in the Layout Tables
and Cells task pane, click Show Layout Tool to activate it, and then press DELETE.
Chybusky
WEB DEVELOPMENT 109
Day 20
About formatting text
You can format text in Microsoft FrontPage as you would using a word processor — to add visual
organization, emphasis, and structure. You can change the font, size, style, color, spacing, and
vertical position of text, and add effects such as underlining. You can also control spacing and
indentation, add bullets and numbers, and set alignment.
You can apply formatting to either selected words, or an entire paragraph. A general rule is that you
can apply font properties such as font, size, color, highlighting, and effects to selected text, and
paragraph properties such as alignment, bullets, numbering, shading, and borders to entire
paragraphs. For example, you can italicize a single word in a paragraph, but if you try to align the
word to the right, the entire paragraph will align right as well.
Formatting individual characters and words
Properties that you can apply to text include:
• Font and font size.
• Text formatting effects, which include italics, underline, bold, or strikethrough.
• Properties that increase or decrease the space between characters to expand or condense your
text.
• Properties that raise or lower text from the other text on a line; for example, to mark a word
with a copyright symbol or to indicate a footnote. You can also specify the number of
points (point: Unit of measure referring to the height of a printed character. A point equals
1/72 of an inch, or approximately 1/28 of a centimeter.) to raise or lower text.
• Highlighting a word or an individual letter.
Formatting paragraphs
A paragraph is a block of text that is separated from another by a paragraph mark . If lines of
text are separated by line breaks , the text is considered to be one paragraph. The paragraph
marks and the line breaks are hidden characters that can be displayed if needed.
Properties that you can apply to entire paragraphs include:
• Spacing between lines in a paragraph.
• Borders around text.
• Line and paragraph indentation.
• Numbered, bulleted, or multi-level lists.
• Shading to an entire line or paragraph.
Select text or graphics
Any amount of text

• Drag over the text.
A word
• Double-click the word.
A line of text
• Point to the left of the line until the pointer changes to a right-pointing arrow, and then click.
A paragraph
Chybusky
WEB DEVELOPMENT 110
• Point to the left of the paragraph until the pointer changes to a right-pointing arrow, and then
double-click. Or triple-click anywhere in the paragraph.
Multiple paragraphs
• Point to the left of the paragraphs until the pointer changes to a right-pointing arrow, and
then drag up or down.
A graphic
• Click the graphic.
Format text
1. Select the text you want to format, right-click, and then click Font on the shortcut menu.
2. Click the Font tab.
3. Select the properties you want.
Set the spacing between characters
2. Select the text, right-click, and then click Font on the shortcut menu.
3. Click the Character Spacing tab.
4. In the Spacing box, do one of the following:
o To increase the space between characters, click Expanded.
o To decrease the space between characters, click Condensed.
5. In the By box, enter a number, in pixels, to specify how much you want to increase or
decrease the space between characters.
Insert a symbol
2. Place the insertion point where you want to insert a symbol or special character.
3. On the Insert menu, click Symbol.
4. Click the symbol or special character you want to insert, and then click Insert.
5. Click Close.
Create a bulleted or numbered list
If you are using a theme (theme: A theme applies a set of coordinated graphic elements to a
document, page, or across all pages in a Web site. Themes can consist of designs and color schemes
for fonts, link bars, and other page elements.), the Plain Bullets tab is unavailable.

2. Place the insertion point where you want to create a list.
3. On the Format menu, click Bullets and Numbering.
Create a bulleted list
1. Click the Plain Bullets tab, click the box with the bullets you want to use, and then click
OK.
2. Type text next to the bullet, and then press ENTER.
3. To end the list, press ENTER again.
Create a bulleted list using pictures
1. Click the Picture Bullets tab, and then click Specify picture.
2. Locate and click the graphic file that you want to use as a bullet, click Open, and then click
OK.
Note When you save the Web page, if the graphic file you used for the custom bullet is not in the
current Web site, Microsoft FrontPage will prompt you to save it to the current Web site in GIF
Chybusky
WEB DEVELOPMENT 111
(GIF: A graphics file format (.gif extension in Windows) used to display indexed-color graphics on
the World Wide Web. It supports up to 256 colors and uses lossless compression, meaning that no
image data is lost when the file is compressed.)or JPEG (JPEG: A graphics file format (.jpg
extension in Microsoft Windows) supported by many Web browsers that was developed for
compressing and storing photographic images. It's best used for graphics with many colors, such as
scanned photos.) format.
Create a numbered list
1. Click the Numbers tab, click the style of numbers or letters you want to use, and then click
OK.
Add bullets or numbers to existing text
If you are using a theme, the Plain Bullets tab is unavailable.

2. Click the text that you want to add bullets to.
Add plain bullets to text
• Click the Plain Bullets tab, and then click the box with the bullets you want to use.
Add picture bullets to text

1. Click the Picture Bullets tab, and then click Specify picture.
2. Locate and select the graphic file that you want to use as a bullet, and then click Open.
Note When you save the Web page, if the graphic file you used for the custom bullet is not in the
current Web site, Microsoft FrontPage will prompt you to save it to the current Web site in GIF
format.
Add numbers to text
• Click the Numbers tab, and then click the style of numbers or letters you want to use.
Remove numbers or bullets from a list
2. Select the items in the list.
o If the list uses bullets, on the Plain Bullets tab, click the box with no bullets.
o If the list uses numbers or letters, on the Numbers tab, click the box with no
numbering.
o If the list uses picture bullets, on the Picture Bullets tab, in the Specify pictures box,
clear the file name.
About tables
A table is made up of rows and columns of cells into which you can insert text and graphics.
You can customize your tables in a variety of ways to make them more attractive and easy to read.
Work with rows and columns
You can create more cells in your table by splitting one cell into two or more cells. You can also
merge adjacent cells into one cell.
Once you have all the rows and columns you need in your table, you can set the row heights and
column widths the way you want them.
You can define the row heights and column widths to be a percentage of the overall table size, a
specific size in pixels, or set all rows and columns to be spaced uniformly.
Copy and paste content
Chybusky
WEB DEVELOPMENT 112
You can copy content from one cell to cells in adjacent rows or columns in your table without
having to cut and paste each time. For example, to copy the contents of a cell in the first row of a
table, you can select that cell and drag across all the adjacent cells in the same row and then click a
Fill command.
Control text and table layout
You can control how your table appears on the page by setting the table alignment — tables can be
aligned to the left, right, or center of the page. The following table is centered on the Web page.
You can also control the height and width of the table by entering pixel and percentage values. For
example, you can set the width of the table to 80 percent of the overall page width (or frame width,
if the table is in a frame). If a site visitor resizes the browser window, the page size and table change
accordingly. On pages that include a table and text, you can also specify whether you want text to
flow around the sides of the table.
By specifying the way text appears inside each cell, you can control how much space there is
between the border and text of a cell, and you can set the horizontal and vertical alignment of text. In
addition, table text can be formatted like any other text — you can change the font style, size, color,
and other attributes.
Set border specifications
You can customize the way borders appear in your tables. For example, you could change the
thickness of the outer border of a table, set the border color for the whole table, or set a different
border color for individual cells. You can choose one color for the border or, if you prefer a three-
dimensional look, you can choose two colors — a light color and a dark color.
Choose backgrounds
You can choose background colors and pictures for your tables. Background colors can be used to
shade specific columns or rows to add emphasis. You can use background pictures to add visual
appeal to your tables.
You can set background colors and pictures for certain cells, or you can set them for the whole table.
Create captions and headers
You can add a caption above a table as a title, or below a table to summarize its content for site
visitors. You can also format the caption text.
To emphasize certain cells in your table, you can specify them as table headers. For example, in the
table below, the first row and first column contain labels. They are formatted as table headers so that
they stand out from the rest of the table. By default, a table header is formatted as bold text.
However, you can modify the table header style and define additional properties for your table
headers, such as shading.
Note You can also create visually-structured Web pages by adding a layout table from a list of
predesigned layouts in the Layout Tables and Cells task pane, or you can draw a layout to meet
your customized needs.
Add a table
2. Place the insertion point where you want to insert the table.
3. On the Table menu, point to Insert, and then click Table.
4. Set the properties that you want.
Note To make the properties that you specified the default for all new tables, under Set, click the
Set as default for new tables check box.
Add a cell, row, or column to a table
2. Do one or more of the following:
Add a cell
1. Place the insertion point in the cell next to where you want to add a cell.
2. On the Table menu, point to Insert, and then click Cell.
Chybusky
WEB DEVELOPMENT 113
Add a row
3. Place the insertion point in the row above or below the row that you want to add.
4. On the Table menu, point to Insert, and then click Rows or Columns.
5. Click Rows, and then type or select the number of rows you want to add.
6. Under Location, specify if you want to place the row above or below the selected
row.
Add a column
7. Place the insertion point in the column next to where you want to add a column.
8. On the Table menu, point to Insert, and then click Rows or Columns.
9. Click Columns, and then type or select the number of columns you want to add.
10. Under Location, specify if you want to place the column to the right or left of the
selected column.
Set the properties of a cell
2. Place the insertion point in the cell, right-click, and then click Cell Properties on the
shortcut menu.
3. Set the properties that you want.
Chybusky
WEB DEVELOPMENT 114
Day 21
About styles
A style is a set of formatting characteristics identified by a unique name. Styles enable you to
quickly format a whole group of page elements in one simple task.
You can apply styles to most page elements in Microsoft FrontPage, including text (individual
characters or entire paragraphs), graphics, and tables.
About built-in and user-defined styles
With FrontPage, you can choose from a group of built-in styles, or you can create your own user-
defined styles. Built-in styles are frequently used formatting options available by default in the Style
box. User-defined styles can be modifications to built-in styles, or class selectors (class selector: In
cascading style sheets, a name identifying a user-defined style. Depending on how it's defined, a
class selector can be used with a single type of tag or with any HTML tag inside the BODY
element.) that you create.
You can access both built-in and user-defined styles from the same style list when you're editing a
page.
Using styles with page elements
You can choose from several categories of styles.
• Paragraph-level styles A paragraph-level (paragraph style: A combination of character-
and paragraph-formatting characteristics that are named and stored as a set. You can select a
paragraph and use the style to apply all of the formatting characteristics to the paragraph at
one time.) style is usually applied to start and end paragraph tags (<p>) and can affect any
text contained between those tags. In addition, a paragraph-level style can also be applied to
other tags, such as <div>.
• Character-level styles A character-level style (character style: A combination of any of
the character-formatting options that are identified by a style name.) applies to just the text
within a paragraph.
The table in the following example has a blue outset border, which is the result of a style
being added through the table property options.
Note If you apply a user-defined style to a page element that is already formatted with a standard
HTML tag, both formatting characteristics are used.
For example, if you select a paragraph styled as Heading 1, and then apply a user-defined style
named .redbg that adds a red border, you get the standard Heading 1 formatting (Times New Roman,
Bold, 24 pt, and left-aligned) surrounded by a red border.
The class name of the user-defined style is appended to the end of the HTML tag in the Style box,
listing the new style as Heading2.redbg.
About cascading style sheets

A Cascading Style Sheet (CSS) is used to apply consistent style information across multiple Web
pages. A CSS contains style definitions that describe the styles you want to apply to pages or page
elements. Each style definition consists of a selector (selector: In a cascading style sheet style
definition (or style rule), the HTML element linked to a particular set of style properties and values.)
followed by the properties and values for that selector.
The following are examples of style definitions defined in a CSS:
H1 { font-size: x-large; color: green }
H2 { font-size: large; color: blue }
.note { font-size: small }
#footer { font-family: serif }
In the example, H1 and H2 are selectors that modify the formatting properties of standard HTML
tags. The selectors' properties and values are contained within the curly braces { } — font-size is a
property, and x-large is the value of the font-size property. You can specify multiple properties for a
Chybusky
WEB DEVELOPMENT 115
selector by separating each with a semi-colon ( ; ). In the example, .note is a class selector (class
selector: In cascading style sheets, a name identifying a user-defined style. Depending on how it's
defined, a class selector can be used with a single type of tag or with any HTML tag inside the
BODY element.), and #footer is an ID selector (ID selector: In a cascading style sheet style
definition (or style rule), a selector that is used to define a style for an individual page element,
usually as an inline style.).
FrontPage primarily deals with two types of cascading style sheets — embedded and external —
although a third type, inline, is occasionally used.
• Embedded cascading style sheet When you create or modify a style to be used on a single
page, FrontPage creates a cascading style sheet for you. Called an embedded cascading style
sheet, it is a collection of code stored between HTML <STYLE> tags between the <HEAD>
tags of the page. Any style you create for that page is stored in the embedded style sheet as a
class selector.
• External cascading style sheet External cascading style sheets are the most useful because
they can be attached to multiple Web pages. You can apply the same styles consistently
across an entire Web site.
If you decide to change a style, you need only make one change — in the external cascading
style sheet — and the pages in your Web site will reflect the change. Typically, an external
style sheet uses the .css file name extension, such as Mystyles.css.
• Inline cascading style sheet A third type of cascading style sheet, inline, contains user-
defined styles that are applied to a single page element. This type of cascading style sheet is
usually created when you add styles using the Style button on a page element's Properties
dialog box.
Add a style to a cascading style sheet
1. In Page view, do one of the following:
o To add a style to an external (external cascading style sheet: A cascading style sheet
in a file with a .css file name extension. A .css file is composed solely of style rules in
valid .css syntax, without any surrounding HTML tags.) cascading style sheet
(CSS) (CSS: A cascading style sheet is a document containing style information that
can be referenced by multiple Web pages. Styles define appearance and formatting of
content on Web pages and allow authors more control over how content is displayed
in browsers.), open the .css file.
External CSS files have a .css extension.
o To add a style to an embedded CSS (embedded cascading style sheet: A cascading
style sheet contained within the Web page to which it is applied.), open the Web page
that contains the CSS.
2. On the Format menu, click Style, and then click New.
3. In the Name (selector) box, enter a name for the new style.
Do not type spaces in the style name.
4. In the Style type box, select whether the style will be a Paragraph or Character style.
5. Click Format, and then specify the formatting characteristics for the new style:
o To set font properties — such as the font family or color, or character spacing —
click Font.
o To set alignment, indentation, or spacing, click Paragraph.
o To set borders and shading, click Border.
o To set the style of bullets or numbering, click Numbering.
o To set positioning properties — such as wrapping style, location, or z-order (an
element's position in the layers of the page) — click Position.
6. Select the options you want.
7. You have to attach a CSS to a document before the styles will be available for that document.
Apply a style
Do one or more of the following:
Chybusky
WEB DEVELOPMENT 116

Apply a style to text
1. Select the text or paragraph that you want to apply a style to.
2. On the Formatting toolbar, in the Style box , click the built-in (built-in style:
The formatting attributes that are available by default in the FrontPage style list.) or
user-defined (user-defined style: A new style or a modification to a built-in style.
User-defined styles always contain cascading style sheet formatting attributes.)
character or paragraph style you want.
Notes
Character styles (character style: A combination of any of the character-
formatting options that are identified by a style name.) are shown in the Style
box by a small, underlined letter a in front of the style name. Use character
styles when you select part, but not all, of a paragraph.
Only one built-in character style is installed with Microsoft FrontPage (shown
in the Style box as Default Character Style and preceded by a small,
underlined letter a). The Default Character Style removes formatting applied
by user-defined character styles.
Paragraph styles (paragraph style: A combination of character- and paragraph-
formatting characteristics that are named and stored as a set. You can select a
paragraph and use the style to apply all of the formatting characteristics to the
paragraph at one time.) are identified by a paragraph symbol (for built-in
styles) or the absence of a character or symbol (for user-defined styles) in
front of the style name.
Apply a style to a page element
3. Click the page element.
4. On the Format menu, click Properties.
5. Click the Style button.
To apply a style from the embedded (embedded cascading style sheet: A
cascading style sheet contained within the Web page to which it is applied.)
cascading style sheet (CSS: A cascading style sheet is a document containing
style information that can be referenced by multiple Web pages. Styles define
appearance and formatting of content on Web pages and allow authors more
control over how content is displayed in browsers.) (CSS) for the page, click
the Class box, and then click a selection in the list of available class
selectors (class selector: In cascading style sheets, a name identifying a user-
defined style. Depending on how it's defined, a class selector can be used with
a single type of tag or with any HTML tag inside the BODY element.).
To apply a style from an external (external cascading style sheet: A cascading
style sheet in a file with a .css file name extension. A .css file is composed
solely of style rules in valid .css syntax, without any surrounding HTML
tags.) CSS, type the name of the style in the Class box.
To apply an ID selector (ID selector: In a cascading style sheet style definition
(or style rule), a selector that is used to define a style for an individual page
element, usually as an inline style.), type the name of the selector in the ID
box.
To create an inline (inline cascading style sheet: A cascading style sheet that
is applied to a single page element, or to a specified sequence of page
elements.) CSS, click Format, and then click Font, Paragraph, Border,
Numbering, or Position to specify the formatting characteristics.
Chybusky
WEB DEVELOPMENT 117
Note If the dialog box does not have a Style button, you can apply a style to a page
element by using the Style box. To do so, on the Formatting toolbar, click the Style
box and then click the built-in (built-in style: The formatting attributes that are
available by default in the FrontPage style list.) or user-defined (user-defined style: A
new style or a modification to a built-in style. User-defined styles always contain
cascading style sheet formatting attributes.) style you want to apply.
Remove a style from a cascading style sheet
o To remove a style from an external (external cascading style sheet: A cascading style
sheet in a file with a .css file name extension. A .css file is composed solely of style
rules in valid .css syntax, without any surrounding HTML tags.) cascading style sheet
(CSS) (CSS: A cascading style sheet is a document containing style information that
can be referenced by multiple Web pages. Styles define appearance and formatting of
in browsers.), open the .css file that contains the style.
External CSS files have a .css extension.
o To remove a style from an embedded CSS (embedded cascading style sheet: A
cascading style sheet contained within the Web page to which it is applied.), open the
Web page that contains the style.
2. On the Format menu, click Style.
3. In the List box, select User-defined styles.
4. In the Style box, select the user-defined style (user-defined style: A new style or a
modification to a built-in style. User-defined styles always contain cascading style sheet
formatting attributes.) you want to delete, or the built-in style (built-in style: The formatting
attributes that are available by default in the FrontPage style list.) from which you want to
remove custom formatting characteristics.
5. Click Delete.
About positioning page elements
Positioning is how you place elements, such as text and graphics, on a page. You can place elements
in front of or behind other elements, or group them together.
Types of positioning
You can position page elements in the following ways:
Absolute positioning
You can use absolute positioning to place an element at an exact location on a page. An element
placed using absolute positioning remains at a fixed location relative to the top-left corner of the
page. It floats on top of, or sits behind, text or other page elements.
You can place the element by dragging it to the location you want, or you can specify coordinates,
which are relative to the upper-left corner of the page or frame the element is in, as shown in the
example below.
The x- and y-coordinates of a page element
The position of the page element in Microsoft FrontPage
The position of the page element in a Web browser

If an absolutely positioned element is placed in a position box (position box: In Design view, a
rectangle representing a page area with CSS positioning applied. The position box, which may
contain any page elements, is visible only when Show All is selected on the Standard toolbar.), the
coordinates are relative to the upper-left corner of the position box, rather than the page.
You can specify the coordinates of the page element relative to the upper-left corner of its container,
in pixels (pixel: A single unit of measurement that your computer's display hardware uses to paint
Chybusky
WEB DEVELOPMENT 118
images on your screen. These units, which often appear as tiny dots, compose the pictures displayed
by your screen.). You can also specify the dimensions of a position box by using the following units:
• Pixels (px)
• Font size (em)
• X-height of the font (ex)
• Inches (in)
• Centimeters (cm)
• Millimeters (mm)
• Points (pt), where one point is equal to 1/72 of an inch
• Percentage of the page height or width (%)
For example, you can set a position box to be the same width as the page (set Width to 100%), and
20 pixels high (set Height to 20 px).
When viewed at different screen resolutions (resolution: The fineness of detail in an image or text
produced by a monitor or printer.), the element might not be placed as you intended, although the
element still appears at the pixel coordinates you specified. When the screen resolution changes, so
does the layout, since other page elements such as text are displayed differently.
Note Adding page elements by using absolute positioning with DHTML (DHTML: An extension of
Hypertext Markup Language (HTML) that adds multimedia, database access, and an object model
that programs can use to change styles and attributes of page elements (objects) and to replace
existing elements (objects) with new ones.) may cause either the DHTML effect or the absolutely
positioned element to behave unexpectedly.
Relative positioning
Use relative positioning to place page elements inline with text. Regardless of the changes you make
to the page above or below this point, the layout of the relatively positioned element remains intact.
You can use relative positioning for animation and DHTML effects.
Floating
You can create a floating page element that lets other elements, such as text, wrap around it. A
floating element is removed from the flow of text, and is aligned left or right. You can also specify
the height and width of the floating area of the element. For example, the figure below shows how
text flows around a paragraph that floats to the right, creating a sidebar of text that is aligned to the
right of the page regardless of the layout of text around it.
Stacking
You can use positioning to overlap elements. The z-order refers to an element's position in a stack of
elements, which includes the page itself. The main page layer is zero; a positive z-order means that
the element is in front of the main layer, and a negative number means the item is behind it. Using a
negative number, you can even position elements "underneath" the page layer.
Working with positioned elements
After you position your page elements, you can work with them in the following ways:
Selecting a positioned element
You can select some page elements by clicking them directly or by using the menu commands.
Many types of page elements, such as graphics, form fields, and other objects, are indicated with an
anchor icon when you show all nonprinting characters. The anchor is displayed in the text flow
where you originally inserted the element. To select the object, you select the corresponding anchor
icon.
Grouping page elements

You can combine the types of positioning to achieve a variety of results, such as to keep a group of
page elements together as a unit. For example, you can add a position box (position box: In Design
view, a rectangle representing a page area with CSS positioning applied. The position box, which
may contain any page elements, is visible only when Show All is selected on the Standard toolbar.)
to a page, and inside the box, add multiple page elements using absolute positioning to lay them out.
The result is a position box that is positioned with respect to the text flow on the page, but the layout
of the elements inside the box is always preserved, regardless of any changes you make to the rest of
Chybusky
WEB DEVELOPMENT 119
the page. Even when the window is resized, the layout of the elements inside the position box
remains the same.
Grouping page elements
Layout of grouped elements is preserved, even when the Web browser window is resized
Ensuring that positioned items are displayed properly
To view the properties of a page element, position the mouse pointer over it. The properties are
displayed as a ScreenTip (ScreenTips: Notes that appear on the screen to provide information about
a toolbar button, tracked change, or comment, or to display a footnote or endnote. ScreenTips also
display the text that will appear if you choose to insert a date or AutoText entry.).
Page layout can vary when viewed at different screen resolutions, even though an absolutely
positioned element always appears at the same coordinates you specify. To ensure the page is
displayed well to all site visitors, you should test it at different screen resolutions.
Note Positioning works with Web browsers that support cascading style sheets (CSS) (CSS: A
cascading style sheet is a document containing style information that can be referenced by multiple
Web pages. Styles define appearance and formatting of content on Web pages and allow authors
more control over how content is displayed in browsers.) 2.0, such as Microsoft Internet Explorer
4.0 and later, and Netscape Navigator 4.0 and later. When viewed in earlier browser versions,
positioned content is aligned left, and is located inline with the text rather than uniquely positioned.
Position a page element
2. Select the page element you want.
3. On the Format menu, click Position.
4. Specify the type of positioning you want.
o To fix the position box at the insertion point — relative positioning — under
Positioning style, click Relative.
o To enable the position box to be placed precisely on the page — absolute
positioning — under Positioning style, click Absolute.
5. Specify any additional settings that are relevant to the position of the element.
How?
o To set pixel coordinates, under Location and size, specify a value in the Left and
Top boxes.
o Under Wrapping style, specify how you want the page elements to wrap around the
position box.
o To specify the z-order, which is the element's position in the layers of the page,
specify a value in the Z-Order box. A positive value means that the element is in
front of the main text-flow layer (layer 0), and a negative value means the item is
behind it.
Group page elements
2. Place the insertion point where you want to put a position box (position box: In Design view,
a rectangle representing a page area with CSS positioning applied. The position box, which
may contain any page elements, is visible only when Show All is selected on the Standard
toolbar.), and then press ENTER to insert a new blank line.
3. Select the blank line, making sure to include the paragraph marker.
If the paragraph markers are not visible, on the Standard toolbar, click Show All .
4. On the Format menu, click Position.
o To fix the position box at the insertion point — relative positioning — under
Positioning style, click Relative, and then click OK.
Chybusky
WEB DEVELOPMENT 120
o To enable the position box to be placed precisely on the page — absolute
positioning — under Positioning style, click Absolute, and then click OK.
6. Click inside the position box, and then insert a page element — for example, a graphic.
7. Click the page element that is inside the position box.
8. On the Format menu, click Position, and then click Absolute.
9. Repeat steps 6 through 8 for each page element you want to place in the position box.
About cascading style sheet compatibility
When you design your Web site by using Microsoft FrontPage, you can enable compatibility with an
array of different browsers and technologies, among which are cascading style sheet (CSS) features.
If you design a Web site for compatibility with a Web browser that doesn't support CSS, some
options that use CSS are unavailable on menus when you author your Web pages. This is to prevent
you from accidentally using features that won't be compatible with the Web browsers used by your
site visitors.
Because FrontPage uses CSS to implement some style features, some menu items will be
unavailable when support for CSS is turned off.
Some of these options are:
• On the Insert menu, the Layer command is unavailable.
• On the Format menu, these commands are unavailable: Style, Style Sheet Links, Borders
and Shading, and Position.
• In the Font dialog box, some font effects on the Font tab and the Spacing and Position
options on the Character Spacing tab are unavailable.
• In the Page Templates dialog box, the Style Sheet tab is unavailable.
• In the Paragraph dialog box, the Indentation and Spacing options are unavailable.
• In the Layers task pane, all of the options are unavailable.
• In the Theme task pane, you can view thumbnail images of the themes, but you cannot apply
a theme to your page.
Create a cascading style sheet
Create an external cascading style sheet (CSS)
2. In the New task pane (task pane: A window within an Office application that provides
commonly used commands. Its location and small size allow you to use these commands
while still working on your files.), under New page, click More page templates.
3. On the Style Sheets tab, click the type of CSS you want to create.
Microsoft FrontPage creates a new page with a .css file name extension and opens it for
editing. Before you can link the .css file to a Web page, you must save it.
Create an embedded CSS
To create an embedded CSS, you must define a style that you want to include in it.

3. Click New, and then in the Name (selector) box, type the name of the new style.
4. Under Style Type, choose whether the style will be a Paragraph or Character style.
5. Click Format, and then specify the formatting characteristics for the new style.
Note When you apply a style directly to an item using the Style button on its Properties dialog box,
the style is applied directly to the element, creating what is called an inline cascading style
sheet (inline cascading style sheet: A cascading style sheet that is applied to a single page element,
or to a specified sequence of page elements.) (CSS).
Edit a cascading style sheet

Chybusky
WEB DEVELOPMENT 121
o To edit an external (external cascading style sheet: A cascading style sheet in a file
with a .css file name extension. A .css file is composed solely of style rules in valid
.css syntax, without any surrounding HTML tags.) cascading style sheet (CSS) (CSS:
A cascading style sheet is a document containing style information that can be
referenced by multiple Web pages. Styles define appearance and formatting of
in browsers.), open the .css file.
o To edit an embedded CSS (embedded cascading style sheet: A cascading style sheet
contained within the Web page to which it is applied.), open the Web page that
contains it.
3. In the List box, do one of the following:
o To edit a custom style you created, click User-defined styles.
o To edit a style for a standard HTML tag, click HTML tags.
4. In the Styles box, double-click the style.
o To change the style type for the style, click Paragraph or Character in the Style
type box.
o To change formatting characteristics for the style, click Format, click the type of
formatting attributes you want to change, and then select the options you want.
Link to an external cascading style sheet
2. On the Format menu, click Style Sheet Links, and then click Add.
3. Locate and click the .css file for the external cascading style sheet (CSS), and then click OK.
o To link the external CSS to only the current page, click Selected page(s).
o To link the external CSS to all pages in the current Web site, click All Pages.
Turn support for cascading style sheets on or off
1. On the Tools menu, click Page Options, and then click the Authoring tab.
o To turn support for commands that use cascading style sheets (CSS) version 1.0 on or
off, select or clear the CSS 1.0 (formatting) check box.
CSS 1.0 enables you to add attributes to a tag, such as increasing the space before or
after a paragraph.
o To turn support for commands that use CSS version 2.0 on or off, select or clear the
CSS 2.0 (positioning) check box.
CSS 2.0 enables pixel-precise positioning and grouping of page elements.
Chybusky
WEB DEVELOPMENT 122
Day 22
About creating a Web site
A Web site is a group of related Web pages that is hosted by an HTTP (HTTP: Internet protocol that
delivers information on the World Wide Web. Makes it possible for a user with a client program to
enter a URL (or click a hyperlink) and retrieve text, graphics, sound, and other digital information
from a Web server.) server on the World Wide Web. Most Web sites provide a home page to site
visitors as a starting point. The home page is interconnected with other pages by using hyperlinks
and a navigational structure.
You can create a Web site that is either disk-based or server-based. A disk-based Web site is one that
is hosted on a local computer. A server-based Web site is hosted by a Web server, such as Microsoft
Internet Information Server (IIS), or a virtual server network.
To help you create a Web site more quickly, you can use the Microsoft FrontPage
templates (template: A set of predesigned formats for text and graphics on which new Web pages
and sites can be based. After a page or site is created using a template, you can customize it.) and
wizards (wizard: A feature that asks questions and then creates an item, such as a form or Web page,
according to your answers.). When you use one of these tools, FrontPage does most of the structural
work for you, leaving you free to concentrate on the content of the site. You can use templates and
wizards to help you create anything from a bare bones Web page to a complex, multi-page,
interactive Web site.
The basic steps for creating a FrontPage Web site, include the following:
1. Obtain a Web site hosting account or URL (Uniform Resource Locator (URL): An address
that specifies a protocol (such as HTTP or FTP) and a location of an object, document,
World Wide Web page, or other destination on the Internet or an intranet. For example:
http://www.example.com/.) from a hosting service, such as an Internet service provider
(ISP) (ISP: A business that provides access to the Internet for such things as electronic mail,
chat rooms, or use of the World Wide Web. Some ISPs are multinational, offering access in
many locations, while others are limited to a specific region.) or a Web Presence Provider
(WPP) (Web Presence Provider (WPP): A Web hosting and Internet Service Provider who
manages the Web server hardware and software required to make your Web site available on
the Internet.).
2. Create your Web site structure using the templates and wizards.
3. Add your own personalized content.
4. Publish your Web site to the public on the World Wide Web.
With administrator permissions, a Web site hosting account, and connectivity to a server running
Microsoft Windows SharePoint Services, you can create a SharePoint site and then customize it
using Microsoft FrontPage.
A Web site can contain one or more subsites. A subsite is a Web site that is nested inside another
Web site. A Web site that contains subsites is called a top-level site (top level site: The uppermost
folder in a hierarchy of Web site folders. A top level site can be hosted on a Web server, a virtual
server network, or a local computer hard disk.). If you think of a Web site as a directory containing a
set of folders, a subsite is a subfolder containing a stand-alone Web site.
Subsites have independent administration, authoring, and browsing permissions. Therefore, you can
display restricted information or information that is pertinent to only one group of site visitors on a
subsite.
You can convert folders under a top-level Web site to subsites. Likewise, you can convert a subsite
to a subfolder. However, many of the Web site settings can be lost during this process, including, but
not limited to hyperlinks in navigation bars and tasks associated with these pages. These features are
lost because the navigation structure and tasks are stored per Web site. Additionally, the larger the
contents of the Web site, the longer it takes to convert the Web site to a subfolder or a subfolder to a
Web site.
Chybusky
WEB DEVELOPMENT 123
Create a Web site

2. In the New task pane, under New Web site, click the type of Web site that you want to
create.
3. Click the Web site template that you want.
4. Locate and click the location where you want to publish your site, and then click Open.
Notes
o You can either publish your site to a local directory or folder on your hard disk or
network, or publish it to the Internet where your account is located.
o If you create a SharePoint site, you must publish it to a server running Microsoft
SharePoint Services.
Create a subsite
Convert an existing folder into a subsite
1. In the Folder List, right-click the folder that you want to create a subsite in, point to New,
and then click Subsite.
3. Under Options, select the Add to current Web site check box.
Create a new subsite by using a template
2. In the New task pane, under New Web site, click the type of Web site that you want to
create.
4. Under Options, select the Add to current Web site check box.
Notes
• You can either publish your site to a local directory or folder on your hard disk or network,
or publish it to the Internet where your account is located.
• If you create a SharePoint site, you must publish it to a server running Microsoft SharePoint
Services.
Open a Web site
1. On the File menu, click Open Site.
2. In the Look In box, locate and click the Web site that you want to open.
3. Click Open.
Note If you already have a Web site open, each subsequent Web site will open in a new Microsoft
FrontPage window.
Rename a Web site
1. On the Tools menu, click Site Settings.
2. Click the General tab.
3. In the Web name box, type a new name for the Web site.
About hyperlinks
A hyperlink is a link from one Web page or file to another, including a picture or multimedia file, or
to an e-mail address or program. When a site visitor clicks the hyperlink, the destination is displayed
in a Web browser, opened, or ran, depending on the type of the destination.
For example, a hyperlink to a page displays the page in the Web browser, and a hyperlink to an
Audio Video Interleave (AVI) (AVI: A Microsoft Windows multimedia file format for sound and
videos that uses the Microsoft Resource Interchange File Format (RIFF) specification.) file opens
the file in a media player.
Ways to use hyperlinks
• To navigate to a file or Web page on a network, intranet, or Internet
• To navigate to a file or Web page that you plan to create in the future
Chybusky
WEB DEVELOPMENT 124
• To designate a picture as a hyperlink to a destination
• To send an e-mail message
• To start a file transfer, such as downloading a file or sending a file by FTP (FTP: A
communication protocol that makes it possible for a user to transfer files between remote
locations on a network. This protocol also allows users to use FTP commands, such as listing
files and folders, to work with files on a remote location.)
• To go to a bookmark (bookmark: A location or selection of text in a file that you name for
reference purposes. Bookmarks identify a location within your file that you can later refer or
link to.)
After you create a hyperlink, follow it to verify that it goes to the destination page, file, e-mail
address, program, or bookmark you intended. When a site visitor points to text or a picture that
contains a hyperlink, the pointer depicts a hand, indicating that the user can click the item. Microsoft
FrontPage follows hyperlinks and displays them in different ways depending on the destination:
• The destination is a Web page FrontPage opens the page for editing in Page view.
• The destination is a bookmark FrontPage opens the page and scrolls down to the
bookmark.
• The destination is a file FrontPage opens the file in its associate editor. For example,
FrontPage opens a text file in Notepad.
• The destination is not in the current Web site FrontPage opens a copy of the destination
Web page or file.
How URLs work
When you create a hyperlink, its destination is encoded as a Uniform Resource Locator (URL) .
A URL is an address that specifies a protocol (such as HTTP or FTP), and it contains a Web
server (Web server: A computer that hosts Web pages and responds to requests from browsers. Also
known as an HTTP server, a Web server stores files whose URLs begin with http://.) or network
location, path, and file name, as shown in the following table:
Example Description
http:// Protocol
www.example.com Web server
office/productinfo/ Path
default.htm File name
Absolute and relative URLS
• An absolute URL contains a full address, including the protocol, the Web server, the path,
and the file name.
• A relative URL has one or more missing parts of the address. The missing information is
taken from the page that contains the URL. For example, if the protocol and Web server are
missing, the Web browser uses the protocol and domain of the current page.
It is common for pages in a Web site to use relative URLs that contain only a partial path and file
name. If the files are moved to another server, any hyperlinks will continue to work as long as the
relative positions of the pages remain unchanged. For example, a hyperlink on Products.htm points
to a page named Apple.htm in a folder named Food; if both pages are moved to a folder named Food
on a different server, the URL in the hyperlink will still be correct.
Using text or pictures as hyperlinks
You can create a hyperlink to be text or a picture.
A text hyperlink is a word or phrase that you assign a destination URL (Uniform Resource Locator
(URL): An address that specifies a protocol (such as HTTP or FTP) and a location of an object,
document, World Wide Web page, or other destination on the Internet or an intranet, for example:
http://www.microsoft.com/.).
A picture hyperlink is a picture that you assign a destination URL in one of two ways:
Chybusky
WEB DEVELOPMENT 125
• You can allocate the entire picture to be a default hyperlink. In this case, the site visitor can
click any part of the picture to display its destination. For example, a button is a picture with
a default hyperlink.
• You can assign the picture to one or more hotspots, which are hyperlink regions on the
picture. A picture that contains hotspots is called an image map. For example, an image map
can be a picture that represents different parts of a Web site (such as the home page, a catalog
page, and so on). The site visitor clicks a certain area of the image map to display the
corresponding page.
How hyperlinks are displayed

Web browsers usually underline text hyperlinks and display them in a different color. Hyperlinks on
a picture are not always visible. However, a site visitor can tell that a picture has a hyperlink by
positioning the mouse pointer over it. The mouse pointer changes appearance, usually to a pointing
hand.
To emphasize a hyperlink even more, you can also add Dynamic HTML (DHTML) (DHTML: An
extension of Hypertext Markup Language (HTML) that adds multimedia, database access, and an
object model that programs can use to change styles and attributes of page elements (objects) and to
replace existing elements (objects) with new ones.) effects or animation to hyperlinks, as shown in
the following illustration:
Setting colors for hyperlinks
You can choose the colors that a Web browser will use for displaying hyperlinks. If you use standard
HTML attributes, you can select three colors to use for a hyperlink, depending on its status:
Hyperlink A hyperlink that has not been selected
Active hyperlink A hyperlink that is currently selected
Visited hyperlink A hyperlink that has already been followed
Note If you use Cascading Style Sheets (CSS) (CSS: A cascading style sheet is a document
containing style information that can be referenced by multiple Web pages. Styles define appearance
and formatting of content on Web pages and allow authors more control over how content is
displayed in browsers.), you can also control the color the hyperlink shows when the site visitor rests
the pointer over it. CSS can also add other attributes to your hyperlinks. See the FrontPage Styles
topics for more information.
Using bookmarks
A bookmark is a location or selected text on a page that you have marked.
You can use bookmarks as a destination for a hyperlink. For example, if you want to display a
certain section of a page to the site visitor, add a hyperlink with the bookmark as its destination.
When the site visitor clicks the hyperlink, the relevant part of the page is displayed rather than the
top of the page.
You can also use one or more bookmarks to find locations on a page. For example, add a bookmark
to each main heading on a page. When you are editing the page, you can quickly find each section
by going to the corresponding bookmark.
If you bookmark a location (rather than text), the bookmark is indicated in FrontPage by . If
you bookmark text, the text displays with a dashed underline.
Renaming and moving files in your Web site
When you rename a file in your Web site, Microsoft FrontPage checks to see whether there are any
hyperlinks to the file. If there are, FrontPage updates the hyperlinks with the new file name. When
you move a file in your Web site (for example, to a folder or subfolder), FrontPage automatically
updates any hyperlinks to that file with its new location.
Testing and repairing broken hyperlinks
Before you publish a Web site, you should always test all hyperlinks. If your Web site contains a
broken hyperlink (one that has an invalid destination URL, when the site visitor clicks the hyperlink
the Web browser displays an error message. The cause might be as simple as a mistyped URL or a
Chybusky
WEB DEVELOPMENT 126
URL that points to a page that you deleted from your Web site. If the destination is another page on
the World Wide Web, the page might have been moved or deleted.
Create a hyperlink
• In Page view, at the bottom of the document window, click Design , and then do one of
the following:
Create a hyperlink to an existing page or file
1. Select the text or the picture that you want to use as the hyperlink.
If you do not select text or a picture, the destination URL is displayed as the hyperlink text.
2. On the Standard toolbar, click Insert Hyperlink .

3. Under Link to, click Existing File or Web Page.
4. Select the page or file you want to use as a destination.
Create a hyperlink to a new page

3. Under Link to, click Create New Document.
4. In the Name of new document box, type the name of the file you want to create and link to.
If you want to create a document in a different location, under Full Path, click Change,
browse to the location where you want to create the file, and then click OK.
5. Under When to edit, specify whether you want to edit the file now or later.
Create a hyperlink to a page or file on the World Wide Web
3. Under Link to, click Existing File or Web Page, and then click Browse the Web .
4. In your Web browser, browse to the page that you want to link to, and then press ALT+TAB
to switch back to Microsoft FrontPage. The location of the page you visited is displayed in
the Address box.
Create a hyperlink to an e-mail address

3. Under Link to, click E-mail Address.
4. Type the e-mail address you want in the E-mail address box, or select an e-mail address in
the Recently used e-mail addresses box.
5. In the Subject box, type the subject of the e-mail message.
Note Some Web browsers and e-mail programs may not recognize the subject line.
Create a hyperlink to a bookmark

3. Under Link to, click Existing File or Web Page.
4. Select the page that contains the bookmark (bookmark: A location or selection of text in a
file that you name for reference purposes. Bookmarks identify a location within your file that
you can later refer or link to.), and then click Bookmark.
Chybusky
WEB DEVELOPMENT 127
5. Under Select an existing place in the document, click the bookmark you want to use as the
destination, and then click OK.
Edit a hyperlink
Change the text of a hyperlink

2. Select the hyperlink text, and type the new text.
Change the destination of a hyperlink

2. Right-click the hyperlink, and click Hyperlink Properties on the shortcut menu.
3. In the Address box, enter the hyperlink destination you want.
Change the target frame

2. Select the text or picture that you are using as a hyperlink, and then click Insert Hyperlink.
3. In the Edit Hyperlink dialog box, click Target Frame, and then do one of the following:
Choose a target frame within your frames page
o In the Target Frame dialog box, the Current frames page area shows a map of your
frames page. Click in the frame you would like to set as the target frame.
Choose a target frame either within your frames page or outside of it
o In the Target Frame dialog box, the Common targets area gives you several target
frame options. Click one of the options to select a target frame.
Remove a hyperlink
In Page view, at the bottom of the document window, click Design , and do one of the
following:
Delete the hyperlink completely, including the hyperlink text

Select the hyperlink and press DELETE.
Preserve the hyperlink text but delete the hyperlink associated with it
Select the hyperlink and click Insert Hyperlink .

Click Remove Link.
About creating a navigation structure
When you design your Web site, one of the most important considerations is providing a logical
navigation structure, allowing site visitors to find the content they want quickly and easily. You
want to ensure that site visitors always know where they are in the site, and provide them with the
proper context for the content they are reading.
Microsoft FrontPage includes the following methods to help you add a navigation structure to your
Web site:
Link bars
A link bar is a set of hyperlinks that enable site visitors to navigate to the pages in your Web site.
You place link bars in a prominent and consistent location on each page, and they act as a map to the
pages you designate. You can create link bars with either graphic or text hyperlinks.
When you create your Web site, you can either create link bars that you specify the links for, or add
a link bar that is based on the navigation structure of your site. FrontPage maintains the link bars you
create; if you move or add a page, FrontPage updates the link bar accordingly.
You can format your link bars in the following ways:
Chybusky
WEB DEVELOPMENT 128
You can place link bars horizontally or vertically on a page.
You can add more than one link bar to each page, for example to navigate to different page
levels.
You can change the style of a link bar that uses buttons instead of text.
The types of link bars that you can add to your Web site include the following:
Link bars based on a navigation structure
After you have designed your Web site and determined a hierarchical and logical flow for the
content, you can add a link bar based on that navigation structure. The structure determines which
hyperlinks you will assign to the link bar, and the node labels determine the labels for those
hyperlinks.
The following example shows the structure of a Web site in Navigation view and an explanation of
the relationships among the pages in the site:
Home page The first page that is added to a navigation structure is typically named Default.htm or
Index.htm, and is indicated by the home page icon . In the preceding example, Home is the
home page.
Global level pages These pages are at the same level as — but do not include — the home page. In
the preceding example, the global level page is Contacts.
Parent level pages These pages are located directly above another page or pages, including pages
that are directly connected to the parent level page on the same level (with the exception of the
Home page). In the preceding example, the parent level page for What's New is Home.
Child level pages One or more pages that are located directly below a parent level page. In the
preceding example, Home has three child level pages (What's New, Products, and Services),
Contacts has one child level page (Jobs), and Products has two child level pages (Search and
Ordering).
Same level pages Pages that are on the same level in the hierarchical structure and share the same
parent level page. In the preceding example, What's New, Products, and Services are same level
pages; Search and Ordering are also same level pages.
Back and next pages In the preceding example, if you add a link bar that includes back and next
links to the Products page, the next link directs the site visitor to Services and the back link directs
the site visitor to What's New.
When you add a link bar that includes back and next links, FrontPage relies on the navigation
structure of the Web site to automatically set up those links. You can add hyperlinks to the home
page and to the parent level page of the active page by using the link bar properties dialog box.
Additionally, in Navigation view, you can create links to external Web pages.
Custom link bars
When you add a custom link bar, you can link to any of the pages within your Web site, as well as to
external pages. You can set the link bar up in any way that you want, you can add back and next
links, and you can add and remove pages from it at any time.
Table of contents
You can configure FrontPage to automatically generate a table of contents based on the
categories (category: A classification for labeling and grouping Web pages and files by common
criteria such as page contents, file types, or a similar distinction.) that you assign to your pages. For
users of FrontPage client software that connect to servers running FrontPage Server Extensions or
SharePoint Team Services v1.0 from Microsoft, you can configure FrontPage to automatically
generate a table of contents based on the navigation structure of your Web site. While the actual
links do not display in FrontPage, they do in the Web browser. This functionality is not available if
you connect to a server that is running Microsoft Windows SharePoint Services.
When you create a site map, you select the categories that you want and create a Table of Contents,
and this makes up the list of all the pages belonging to those categories. For example, if you sell
appliances, your site map might have columns of hyperlinks for Large Appliances, Small
Appliances, and Customer Service. You can create this kind of site map by using categories.
Chybusky
WEB DEVELOPMENT 129
You can format your table of contents — for example, change the heading font size — and you can
also set it so that FrontPage automatically recalculates the table of contents whenever you edit a
page in your Web site.
Site maps
For a personal or small Web site, you can create a site map with a list of hyperlinks to all the Web
site's pages, by using the Table of Contents Web component.
For a corporate presence or large Web site, a site map typically contains lists of hyperlinks to pages
in different subsites (subsite (formally known as subweb): A named subdirectory of the top level site
that is a complete FrontPage-based Web site. Each subsite can have independent administration,
authoring and browsing permissions from the top level site and other subsites.), categories (category:
A classification for labeling and grouping Web pages and files by common criteria such as page
contents, file types, or a similar distinction.), or other groups organized under logical headings. For
example, if you sell appliances, your site map might have columns of hyperlinks for Large
Appliances, Small Appliances, and Customer Service. You can create this kind of site map by using
categories.
Create a navigation structure
On the View menu, click Navigation, and do one or more of the following:
Add an existing page
In the Folder List, click the page that you want, and then drag it to a location in the
navigation structure.
If the Folder List is hidden, on the View menu, click Folder List.
Add a new page under an existing page
In the navigation structure, right-click the page, point to New, and then click Page on the
shortcut menu.
Move a page
In the navigation structure, drag the page to another location within the structure.
Remove a page
In the navigation structure, right-click the page, and then click Delete on the shortcut
menu.
To save your edits without switching views, right-click the document window background, and
then click Apply Changes on the shortcut menu.
Customize Navigation view
If you create a navigation structure in Navigation view, you can customize how that structure is
displayed.
To Do This
Right-click the view background, point to Zoom on the
Zoom in or out shortcut menu, and then click the percentage that you
want to zoom in or out.
Automatically size a large navigation Right-click the view background, point to Zoom on the
structure to fit into the view shortcut menu, and then click Size to Fit.
Change the orientation of how the structure Right-click the view background, and then click
is displayed Portrait/Landscape on the shortcut menu.
Expand all of the subtrees (the pages below
Right-click the view background, and then click
a parent page) so that you can see the entire
Expand All on the shortcut menu.
navigation structure
Right-click any page in the subtree, and then click View
Show or hide only the pages in a subtree
Subtree Only on the shortcut menu.
Add a link bar to a Web page
Open your Web site in Page view.
Place the insertion point where you want to add the link bar.
Chybusky
WEB DEVELOPMENT 130
On the Insert menu, click Navigation.
In the Component type list, click Link Bars.
Add a link bar with custom links
In the Choose a bar type list, click Bar with custom links, and then click Next.
Click the link bar style that you want to use for this link bar.
Click Next.
Click the page orientation that you want, and then click Finish.
Add a new link bar
Click Create new.
Type a name for the new link bar, and then click OK.
Click Add link.
In the Text to display box, type the text that you want to appear on the link bar, and then
click OK.
Locate and click the page that you want the custom link bar to link to.
Repeat steps 3 through 5 for each link that you want to add to the link bar.
To set the order for how you want site visitors to view the links on the link bar, click the
Move up or Move down button.
Add an existing link bar
Under Choose existing, click the name of the link bar that you want to use, and then
click OK.
Add a link bar with back and next links

In the Choose a bar type list, click Bar with back and next links, and then click Next.
Click the link bar style that you want to use for this link bar.
Click Next.
Click the page orientation that you want, and then click Finish.
Create a new link bar
Click Create new.
Type a name for the new link bar, and then click OK.
Click Add link.
In the Text to display box, type the text (such as back or next) that you want to appear
on the link bar.
Locate and click the page that you want to link to from the custom link bar, and then
click OK.
Repeat steps 3 through 5 for each link that you want to add to the link bar.
To set the order for how you want site visitors to view the links on the link bar, click the
Move up or Move down button.
Note Depending on where it is in the list, you can link to an external page by using the Back
or Next link on the link bar. However, you cannot add the same link bar to a page that is not
in the active Web site.
Use an existing link bar
In the Choose existing box, click the name of the link bar that you want to use, and then
click OK.
Add a link bar based on the navigation structure
Add a hyperlink to a link bar
Add a hyperlink based on the navigation structure
In Navigation view, right-click the page in the structure that you want to add a hyperlink to, and
then click Add Existing Page on the shortcut menu.
Chybusky
WEB DEVELOPMENT 131
Locate and click the file you want to link to, and then click OK.
To save the changes, right-click the background in Navigation view, and then click Apply
Changes on the shortcut menu.
Add a hyperlink to a custom link bar
In Page view, at the bottom of the document window, click Design .

Double-click the link bar.
Click Add link.
Locate and click the file you want to link to and then click OK.
Edit a link bar
Do one or both of the following:
Edit a link on a link bar that is based on the navigation structure

• Do one of the following:
Change hyperlink options

2. Double-click the link bar.
3. Under Hyperlinks to add to page, click the hyperlink options that you want to
display, and then click OK.
Note If you specify hyperlinks that are not in the navigation tree, a link bar will not
be displayed on the page.
Exclude a page
4. In Navigation view, right-click the page that you want to exclude.
5. Click Included in Link Bars on the shortcut menu.
Note All child-level pages under the excluded page will also be excluded by default. If you
do not want this setting to affect a child-level page, right-click the child-level page, and then
click Included in Link Bars on the shortcut menu.
Edit a link on a custom link bar or a link bar with back and next links
1. In Page view, double-click the link bar.
o To add more links to the link bar, click Add link.
o To delete a link from a link bar, click the link, and then click Remove link.
o To change the URL or the display text of a link, click Modify link.
o To change the order of the links on a link bar, in the Links list, click the link, and
then click Move up or Move down.
For link bars with back and next links, moving the links up or down affects how the
links are ordered in relation to one another on the link bar.
Chybusky
WEB DEVELOPMENT 132
Day 23
About collecting data using forms
After you decide what form fields to put on your form, the next step is to set rules for the ways you
want your site visitors to enter data in the fields. These data entry rules, also called validation, make
sure that a site visitor fills out the form correctly. For example, you can set up an order form for your
products, but unless the customer's name, address, and payment information are correctly entered, he
or she won't be able to complete the order.
Setting rules for how site visitors enter data in forms
• Types of rules you can set for your form fields:
Text box validation
You can specify the type of data, as well as other criteria, to allow for text boxes and text
areas. For example, to collect a member number or a serial number, set up a text box to
accept only numbers and disallow the use all other characters as appropriate. You can also
require a fixed number of characters so that a site visitor does not omit a number or letter by
mistake.
Option button validation
You can require a selection to be made from a group of option buttons. For example, if your
form has two option buttons, Yes and No, and a site visitor tries to submit the form without
making a selection, a message is displayed.
Drop-down box validation
You can require a site visitor to make a choice from a drop-down box, set the minimum and
maximum number of choices to allow, and disallow the first choice from being selected. For
example, you can disallow the first item from being selected if it is an instruction, such as
"Select an item."
Handling information you collect from the form
After setting up the data entry rules, you need to decide how you want the form results to be
handled. After a site visitor submits the form, you must collect the data that he or she entered— the
form results— so you can view them, display them to the visitor, or work with them as needed.
When a site visitor submits a form in the browser, the values of each of the form fields between the
<form> and </form> tags are sent to a form handler (form handler: A program on a server that is
executed when a site visitor submits a form. A form in FrontPage is associated with a form handler.).
For example, if the form field is a text box, the value sent to the form handler is the text entered in
the text box. Microsoft FrontPage provides several form handlers, which take the form results and
perform various actions.
Save the results to a database
Each time a site visitor submits a form, FrontPage saves the information to a database. For
example, if you use a form to collect contact information, you can save the results directly to
your customer database. You can save results to an existing database or FrontPage can create
one for you.
Save the results to a text, HTML, or XML file
Each time a site visitor submits a form, FrontPage attaches the results to a file. You can then
open the file and view the results. For example, you can set up a guest book for your Web
site and choose to save the results to an HTML file. You can create a link to the file so that
site visitors can see what others have written. In the case of saving form results to an XML
file, you can use the results in FrontPage, or export the results into any application that
understands XML, such as Microsoft Office Excel 2003.
Send the results in e-mail

Each time a site visitor submits a form, FrontPage sends you an e-mail message containing
the results of that form.
You can also choose to use your custom scripts to handle the form results.
Chybusky
WEB DEVELOPMENT 133
Security
• Cross-site scripting is a security vulnerability that could affect many Web sites and site
visitors. The vulnerability is the result of coding mistakes in Web applications. For more
information about cross-site scripting and how to protect your Web site and site visitors, see
information about the cross-site scripting security vulnerability on the Microsoft TechNet
Web site.
• Use this feature with caution. Sensitive or confidential information could be revealed to other
users.
Create a form
When you insert a form, Microsoft FrontPage inserts a rectangular area outlined with a dashed line
that contains a Submit and a Reset button. Inside this rectangular area, you can add text and form
fields, such as text boxes, option buttons, check boxes, drop-down boxes, and push buttons.

2. On the Insert menu, point to Form, and then select the fields you want to add to your form.
Add a text box to a form
2. Do one or both of the following:
Add a text box
1. Click in the form where you want to place the text box.
If you are inserting a form field but have not already created a form, Microsoft
FrontPage automatically creates a form area and inserts the field inside that form
area. The form area appears as a dashed line when you are editing the page.
2. On the Insert menu, point to Form, and then click Textbox.
3. Type the label for the text box directly on the form.
Set the properties for a text box
4. Double-click the text box.
5. In the Name box, type a name to identify the text box.
For your form to work correctly, you need to use a unique name for this form field.
6. If you want text to appear in the text box when a site visitor first opens the form, type
the text in the Initial value box.
7. In the Width in characters box, type a number indicating how many characters wide
you want the box to be.
8. Next to Password field, click Yes to ensure that characters in this text box do not
display on the screen.
Security Specifying this option does not encrypt data that is typed in this text box.
Click the Style button to access other options for formatting your form using cascading style
sheets (cascading style sheets (CSS): Declarations, either embedded in a Web page or stored in a
separate .css file that is linked to a Web page, that specify the appearance of particular HTML
elements.) as an inline style (inline style: A method of applying cascading style sheet properties and
values to an element on a page, such as a table. You can use this method even if the page is not
linked to an
Add a check box to a form
Add a check box
1. Click in the form where you want to place the check box.
Chybusky
WEB DEVELOPMENT 134
2. On the Insert menu, point to Form, and then click Checkbox.
3. On the form, beside the check box, type the label.
You can give the site visitor the ability to select the check box by clicking the check
box label.
How?
1. Select the text and the check box.
2. On the Insert menu, point to Form, and then click Label.
Set the properties of a check box

4. Double-click the check box.
5. In the Name box, type a name to identify the check box.
6. In the Value box, type the value to associate with this field.
When the check box is selected, this value is returned with the form results, and is
displayed on the default confirmation page. If the check box has not been selected,
the group name is included, but the value is blank.
7. Click Checked if you want the check box to be selected by default when a site visitor
first opens the form.
8. Click the Style button to access other options for formatting your form using
cascading style sheets as an inline style.
Add a drop-down box to a form
Add a drop-down box
Click in the form where you want to place the drop-down box.
If you are inserting a form field but have not already created a form, Microsoft FrontPage
automatically creates a form area and inserts the field inside that form area. The form area
appears as a dashed line when you are editing the page.
On the Insert menu, point to Form, and then click Drop-down box.
Type the label beside or above the drop-down box on the form.
Set the properties of a drop-down box
Double-click the drop-down box.
In the Name box, type a name to identify the drop-down box.
Click Add to add the choices you want to display in the drop-down box.
In the Choice box, type an option you want to display in the drop-down box.
If you want the value for this choice to be different from the text displayed in the drop-down
box itself, select Specify value, and then type the value in the box.
For example, a choice in the menu could be John, but the value returned in the form results
could be me.
Click Selected under Initial State if you want the choice to be selected by default when a site
visitor first opens the form.
Click OK.
Repeat steps 3 through 6 for each choice you want to add.
To change the order in which choices are displayed, click a choice in the list, and then click the
Move Up or Move Down button.
In the Height box, type how many lines of text you want to show in the drop-down box.
For example, if the drop-down box has three options, you can set the height to 3 so that all
choices are visible.
Chybusky
WEB DEVELOPMENT 135
Click Yes under Allow multiple selections if you want to allow multiple selections in the drop-
down box. If you click No, the site visitor will be able to make one choice only.
Click the Style button to access other options for formatting your form using cascading style
sheets as an inline style.
Add an option button to a form
For each option button you want to add to a form (or a group of option buttons), do one or both
of the following:
Add an option button
Click in the form where you want to place the option button.
On the Insert menu, point to Form, and then click Option Button.
Type the label for the option button directly on the form, next to the option button.
You can specify whether site visitors select the option by clicking the button or its
label.
How?
Select the text and the option button.
On the Insert menu, point to Form, and then click Label.
Set the properties of an option button
Double-click the option button.
In the Group name box, type a name to identify the group to which this option button
belongs.
In the Value box, type the value to associate with this field.
If this option button is selected, this value is returned with the form results, and is
displayed on the default confirmation page.
Beside Initial state, click Selected if you want the option button to be selected by default
when a site visitor first opens the form.
Click the Style button to access other options for formatting your form using cascading
style sheets as an inline style.
Add a submit button to a form
2. Do the following:
Add a submit button
1. Click in the form where you want to place the submit button (push button).
2. On the Insert menu, point to Form, and then click Push Button.
Set the properties of a submit button
3. Double-click the button.
4. In the Name box, type a name to identify the button.
5. Beside Button type click Submit.
6. By default, the button label text changes to Submit. You can type a different button
label in the Value/label box.
Chybusky
WEB DEVELOPMENT 136
Add a reset button to a form
Add a reset button
1. Click in the form where you want to place the reset button (push button).
Set the properties of a reset button
3. Double-click the button.
4. In the Name box, type a name to identify the button.
5. Beside Button type click Reset.
6. By default, the button label text changes to Reset. You can type a different button
label in the Value/label box.
Add a push button to a form
Add a push button
1. Click in the form where you want to place the push button.
Set the properties of a push button
3. Double-click the push button.
4. In the Name box, type a name to identify the button in the form results.
5. In the Value/label box, type the text that will appear on the button.
6. In the Button type box, select Normal.
cascading style sheet as an inline style Click the Code button to view the HTML
of your page so that you can write a script for your button to give it an action.
Add a text area to a form
Add a text area
1. Click in the form where you want to place the text area.
2. On the Insert menu, point to Form, and then click Text Area.
3. Type the label for the text area directly on the form.
Set the properties of a text area

4. Double-click the text area.
Chybusky
WEB DEVELOPMENT 137
5. In the Name box, type a name to identify the text area.
6. If you want text to appear in the text area when a site visitor first opens the form, type
the text in the Initial value box.
7. In the Width in characters box, type a number indicating how many characters wide
you want the text area to be.
8. In the Number of lines box, type a number indicating how many lines of text high
you want the text area to be.
Add a group box to a form
Add a group box
1. Click in the form where you want to place the group box.
2. On the Insert menu, point to Form, and then click Group Box.
Set the properties of a group box
3. Right-click in the group box, and then click Group Box Properties on the shortcut
menu.
4. In the Label box, type the name of the label for your group box.
5. In the Align box, select the alignment you want for your group box label.
Add an advanced button to a form
Add an advanced button
1. Click in the form where you want to place the advanced button.
2. On the Insert menu, point to Form, and then click Advanced Button.
Set the properties of an advanced button
3. Right-click on the button, and then click Advanced Button Properties on the
shortcut menu.
4. In the Name box, type a name.
5. In the Value box, type the value that is to be sent to the form handler.
6. In the Button Type box, select the type of button you want to use.
If you select Normal, you will need to write a script for the button to have a function.
7. In the Button Size area, select, in characters, the width and height of the button.
Add a picture as a submit button to a form
Chybusky
WEB DEVELOPMENT 138
Add a picture as a submit button
1. Click in the form where you want to place the submit button.
2. On the Insert menu, point to Form, and then click Picture.
Set the properties of the picture submit button
3. Right-click the picture, and then click Form Field Properties on the shortcut menu.
4. On the Form Field tab, in the Name box, type a name to identify the picture.
5. On the Appearance tab, click the Style button to access other options for formatting
your form using cascading style sheets as an inline style.
Add a file upload control to a form
2. Place the insertion point where you want to add the file upload control.
3. On the Insert menu, point to Form, and then click File Upload.
4. In the Destination Folder dialog box, click Create New Folder, and then type the name of
the folder.
5. Press ENTER, and then click OK.
6. Set the properties of the folder where uploaded files are stored.
How?
1. In the Folder List, right-click the folder, and then click Properties on the shortcut
menu.
2. Clear the Allow scripts to be run check box.
3. Select Allow anonymous upload to this directory.
4. Select Allow uploaded files to overwrite existing file names if you want existing
files to be overwritten.
5. Click OK.
Add a hidden field to a form
To add hidden fields to a form, follow these steps:
1. Open the page that contains the form.

3. Right-click a form field, and then click Form Properties.
4. In the Form Properties dialog box, click Advanced.
5. Click Add.
6. In the Name box, type the name of the new hidden field.
7. In the Value box, type the value that is to be sent to the form handler.
Note You do not need to enter a value if you are using hidden fields to store information (for
example, from one page to another in a multi-page form), or to collect additional data from
your site visitors (for example, a login name or a timestamp).
Delete a field from a form
You can delete fields from a form as needed. Every field— with the exception of a hidden field—
can be deleted in the same way.

Delete a field that is not hidden

o Click the field you want to delete, and then press DELETE.
Chybusky
WEB DEVELOPMENT 139
Delete a field that is hidden
2. Right-click the form, and then click Form Properties on the shortcut menu.
3. Click Advanced.
4. Select the hidden field from the list, and then click Remove.
Disable automatic form functionality for form fields
By default, when you insert a form field outside of a form area, Microsoft FrontPage creates a form
area with Submit and Reset buttons, and then inserts the field inside the form.
If you want to use form fields with scripts rather than inside forms, you need to first disable this
feature by doing the following:
1. On the Tools menu, click Page Options.
2. On the General tab, clear the Automatically enclose form fields within a form box to
disable automatic forms.
Now you can write a script to use with your form fields and not have to use the FrontPage automatic
form area.
Set the tab order in a form
2. Double-click a field to edit its properties.
3. In the Tab order box, type a number (1 - 999) indicating the tab order for the selected field.
If you specify the same number for two or more fields, the field that is first on the page will
come first in the tab order. To remove the field from the tab order, type -1.
4. Repeat this procedure for each field for which you want to set the tab order.
Note Only Microsoft Internet Explorer 4.0 and later support a custom tab order. Other Web
browsers and earlier versions of Internet Explorer use the default tab order.
Set a keyboard shortcut for a field in a form
Once you have inserted a form, do the following:

2. Type text next to the field to create a label for it.
3. Select the text and the field.
4. On the Insert menu, point to Form, and then click Label.
5. Select a letter in the field's label to use as the shortcut.
6. Click Underline
Chybusky

My Tutorial On Web

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

My Tutorial On Web

Uploaded by

Copyright:

Available Formats

WEB DESIGN

INTRODUCTION TO WEB DEVELOPMENT

HTM or HTML Extension?

Elements in HTML Documents

HTML Document Structure

Welcome to the home page of the Environmental Change Project.

<p>So how will we do this. Well we do the following

Naming Scheme for HTML Documents

<H1> BODY Element in HTML </H1>

<p>In general, a browser will add appropriate spacings and

<DIV ALIGN="center" CLASS="test_block">

...this is displayed as:

Test Heading -- how is it aligned?

Special Effect Tags

Tables and the Border Attribute

First text entry field:

W3C Standard Color Names

Cross-browser Color Names

Cross-browser Color Values

HTML Color Values

Turn Off the Red

16 Million Different Colors

HTML Color Names

The code for an Alert box is quite simple. It's this:

The document Title Property

Internet Explorer Alert Box

Now we can begin.

<A HREF = "page2.html">

<BODY onLoad = "alert('Welcome to my web page')">

Try changing the alert box to this:

The information we're looking for is now on the end: Netscape 6

The history object

Note the format for an if statement:

The format for the else if part is this:

JavaScript While and Do Loops

Do ... While loops

<FORM name = f1 onSubmit = "return Validate()">

A Name Swapper Game

The syntax for substring() is this:

Open a page from within the current Web site

Open a page on a different Web site or in a local file system

Save a Web page to the current Web site

Not saved the page

Opened the page from the current Web site

Save a Web page to a different Web site

Save a Web page to a file system

Save a Web page automatically before previewing it in the browser

Set a top margin

Set a left margin

Set a bottom margin

Set a right margin

Formatting layout cells

Draw a layout table

2. Under New tables and cells, click Draw Layout Table .

Resize a layout table or cell in small increments

Resize a layout table or cell by using autostretch

1. In Page view, at the bottom of the document window, click Design .

Change corner properties of a layout cell

Set the header properties for a layout cell

Set the footer properties for a layout cell

Set the layout properties for a layout cell

the tools back on by clicking Show Layout Tool .

Any amount of text