HTML NOTES

http://www.echoecho.com/htmltables03.htm
Chapter 1

Internet Based Programming

World Wide Web

This term refers to an information system on the Internet that allows documents to be connected
to other documents by hypertext links, enabling the user to search for information by moving
from one document to another.

Role of web site in organizations

1
2
3
Chapter 2
Web programming
Web Programming refers to the writing, markup and coding involved in Web development,
which includes Web content, Web client and server scripting and network security.

Approaches to web programming

Web service is a kind of client / server process. Need interaction between client and server.
Programming for providing Web service can also be divided into the following approaches.
(a) Client-side programming:
Defines the operation to be performed on the client’s machine. Examples of this approach
includes:
• HTML
• Javascript
• Java
• Dreamweaver
• Flash
• SMIL, XML

(b) Server-side programming:

Defines the operation to be performed on the server.Examples of this approach includes:
• CGI
• PHP
• ASP

4
 • Perl
• Java Servlet

Criteria for choosing a web programming language

As noted earlier, many factors

must be considered prior to
beginning the language
selection process. Although
these factors eventually may
be included in the evaluation
criteria, they may also be used
to narrow the field of choices.
For example, the selection
will almost certainly be guided
by the methodology or
paradigm being taught and
the
number of languages to be
used throughout the series of

5
programming courses.
Another
decision is whether the
department wishes to use a
real language or a customised
teaching
language. Finally, the cost of
changing programming
languages must be considered
As noted earlier, many factors
must be considered prior to
beginning the language
selection process. Although
these factors eventually may
be included in the evaluation
criteria, they may also be used
to narrow the field of choices.
For example, the selection
6
will almost certainly be guided
by the methodology or
paradigm being taught and
the
number of languages to be
used throughout the series of
programming courses.
Another
decision is whether the
department wishes to use a
real language or a customised
teaching
language. Finally, the cost of
changing programming
languages must be considered
Cost of changing
Some educators naively think
that there is little cost in
7
changing programming
languages
because there are no serious
consequences if a decision
turns out badly. Lee and
Phillips
(2002) point out, however,
that considerable overhead
occurs in adopting a particular
language, including
preparation of lecture
materials, developing projects
and student
exercises, evaluating and
learning development
environments and installing
the chosen

8
language, requesting and
evaluating textbooks, and
training personnel. Such
overheads
indicate that care should be
taken when choosing a
language because that choice
is likely
to impact the educator for
several years.
1. Scalability

Scalability is the ability of a program to scale. For example, if you can do something on a
small database (say less than 1000 records), a program that is highly scalablewould work
well on a small set as well as working well on a large set (say millions, or billions of records)

2. Flexibility

Analogous to flexibility in general, the flexibility of programming languages refers to the

unexpectedly many ways in which utterings in the language can be used. Theflexibility in
the design of a program is offered through source code: modifying aprogram's source code
adapts the program's design

3. Robustness

9
 Robustness is the ability of a computer system to cope with errors during execution and
cope with erroneous input. Robustness can encompass many areas of computer science,
such as robust programming, robust machine learning, and Robust Security Network.

4. Exact requirements

5. Responsive

Responsive web design (RWD) is an approach to web design aimed at allowing desktop
webpages to be viewed in response to the size of the screen or web browser one is viewing
with.

6. Volume of data
7. Graphic content
8. Dynamic or static content
9. Cost

Common web programming interfaces

Common Client Interface (CCI)
Defines a set of interfaces and classes whose methods allow a client to perform typical data
access operations. Our example CoffeeEJB session bean includes methods that illustrate how to
use the CCI, in particular, the following CCI interfaces and classes:

Common Gateway Interface (CGI)

When your form is submitted you need a program that can receive the information and do
something with it. Such programs are sometimes referred to as: CGI programs.CGI stands for
Common Gateway Interface, which is computer latin for a program that translates information.

This translation is necessary because the server might be a UNIX machine while the visitor
might be sending information from a Windows platform. Windows and UNIX handle
information differently - so if there were no CGI, then UNIX machines could only communicate
with other UNIX machines etc. and that is pretty far from the basic idea of the world wide web.

10
 Chapter 3
HTML Basics
Webpages are written in HTML - a simple scripting language.HTML is short
for HyperText Markup Language. A web page is a computer file, encoded in HyperText Markup
Language HTML and containing text, graphics files, and sound files, which are accessible
through the World Wide Web. Hypertext is simply a piece of text that works as a link.
MarkupLanguage is a way of writing layout information within documents.

Basically an HTML document is a plain text file that contains text and nothing else. When a
browser opens an HTML file, the browser will look for HTML codes in the text and use them to
change the layout, insert images, or create links to other pages.

Since HTML documents are just text files they can be written in even the simplest text editor.

A more popular choice is to use a special HTML editor - maybe even one that puts focus on the
visual result rather than the codes - a so-called WYSIWYG editor ("What You See Is What You
Get").

Some of the most popular HTML editors, such as FrontPage or Dreamweaver will let you
create pages more or less as you write documents in Word or whatever text editor you're using.
However, there are some very good reasons to create your own pages - or parts of them - by
hand...

Why learn HTML

It is possible to create webpages without knowing anything about the HTML source behind the
page.There are excellent editors on the market that will take care of the HTML parts. All you
need to do is layout the page. However, if you want to make it above average in webdesign, it is
strongly recommended that you understand these tags. The most important benefits are:

 You can read the code of other people's pages, and "borrow" the cool effects.
 You can do the work yourself, when the editor simply refuses to create the effects you want.
 You can use tags the editor does not support.

You can write your HTML by hand with almost any available text editor, including notepad,
WordPad that comes as a standard program with Windows.All you need to do is type in the code,
then save the document, making sure to put an .html extension or an .htm extension to the file
(for instance "mypage.html").

HTML Tags
Basically, a computer sees an "A" as simply an "A" - whether it is bold, italic, big or small.
To tell the browser that an "A" should be bold we need to put a markup in front of the A. Such a
markup is called a Tag.

11
All HTML tags are enclosed in angle brackets, that is < and >. For example, a piece of text as it
appears on the screen.
This is an example of bold text.

HTML: the HTML for the above example:

This is an example of <b>bold</b> text.

As you can see, the start tag <b> indicates that whatever follows should be written in bold. The
corresponding end tag </b> indicates that the browser should stop writing text in bold.

Page structure
All normal webpages consist of a head and a body.
Head

Body

 The head is used for text and tags that do not show directly on the page.
 The body is used for text and tags that are shown directly on the page.

Finally, all webpages have an <html> tag at the beginning and the end, telling the browser where
the document starts and where it stops. For example the most basic code - the code you will use
for any page you make, is shown below:

<html>
<head>
<!-- This section is for the title and technical info of the
page. -->
</head>
<body>
<!-- This section is for all that you want to show on the page.
-->
</body>
</html>

Head Section
The head section of the webpage includes all the stuff that does not show directly on the
resulting page.

The <title> and </title> tags encapsulate the title of your page. The title is what shows in the top
of your browser window when the page is loaded.

Another thing you will often see in the head section is metatags. Metatags are used for, among
other things, to improve the rankings in search engines.

Quite often the head section contains javascript which is a programming language for more

12
complex HTML pages.

Finally, more and more pages contain codes for cascading style sheets (CSS).
CSS is a rather new technique for optimizing the layout of major websites.

Since these aspects are way out of reach at this stage we will proceed with explaining the body
section.
Body section
The body of the document contains all that can be seen when the user loads the page. In the rest
of this tutorial you can learn in detail about all the different aspects of HTML, including:

 Text
o Formatting
o Resizing
o Layout
o Listing
 Inserting objects in HTML document
o Images
o Video clip
o Background music
 Creating Hyperlinks
o Links to images
o To local pages
o To web pages at other sites
o To E-mails
o To Uniform Resources Locator
 Inserting objects in HTML document
o Images
o Video clip
o Background music
 Backgrounds
o Colors
o Images
o Hexadecimal Colors
 Tables
o Rows
o Columns
o Table width and height
 Designing a webpage with frames
o Frame set
o Frame column
o Frame rows

 Metatags

13
  Designing a webpage with forms
o Form input commands
o Text and numeric input commands
o Button commands
o Submit and reset commands
o
1. Text
Introduction
To enter text on your pages - all you have to do is simply enter the text.If you do not specify any
attributes for text it will use the default size, font etc. of the visitor's browser.

Browsers can only show fonts available on the visitor's PC.Therefore you are limited to using the
fonts that are available on almost any computer.If you need to use a fancy font, you should use
your graphics program to make an image with the text. This will assure that the visitor will see it
- even if he doesn't have the fancy font you're using.

Since images take up much more space than plain text, thus increasing download time, you
should use this option with care.

Base font
To specify the overall font for your page add the <basefont> tag at the beginning of
the <body> section.

Example: The page as it looks in the browser.

Hello! This is my page.
All text looks the same
since I only specified a basefont.

HTML: The code to produce the above example.

<html>
<head>
<title>my page</title>
</head>

<body>
<basefont face="arial, verdana, courier" size="4" color="green">
Hello! This is my page.<br>
All text looks the same<br>
since I only specified a basefont.<br>
</body>
</html>

The color attribute selects the desired color for your text. The face attribute selects
thedesired font.

Note:

14
 If you enter a list of fonts, like in the example, the browser will use the first font in
the list available on the visitor's computer.The size attribute specifies the desired
size, between 1 (smallest) and 7 (biggest).

Font tag
The <font> tag will change the font.

Example: How the output looks in the browser.

Hello! This is my page.

This local text looks different.

This text looks like the first line.

HTML: The code to produce the above example.

<html>
<head>
<title>My Page</title>
</head>

<body>
<basefont color="green" face="arial" size="4">
Hello! This is my page.<br><br>
<font color="red" face="arial" size="2">
This local text looks different.
</font>
<br><br>
This text looks like the first line.
</body>
</html>

The color attribute selects the desired color for your text. The face attribute selects the
desired font.

Text Links
The tags used to produce links are the <a> and </a>.
The <a> tells where the link should start and the </a> indicates where the link ends.
Everything between these two will work as a link.
The target of the link is added to the <a> tag using
the href="http://www.whateverpage.com" setting.

The example below shows how to make the word here work as a link to yahoo.

15
 Click <a href="http://www.yahoo.com">here</a> to go to yahoo.

You simply:

 Specify the target in the <a href=" ">.

 Then add the text that should work as a link.

 Finally add an </a> tag to indicate where the link ends.

Font format
These are the tags for text formats:
<b>text</b> writes text as bold
<i>text</i> writes text in italics
<u>text</u> writes underlined text
_text lowers text and makes it smaller
^text lifts text and makes it smaller
<blink>text</blink> guess yourself! (Note: Netscape only.)
<strike>text</strike> strikes a line through the text
<tt>text</tt> writes text as on a classic typewriter
<pre>text</pre> writes text exactly as it is, including spaces.
<em>text</em> usually makes text italic
<strong>text<strong> usually makes text bold
Font size
These are the tags for changing the font size.

<big>text</big> increase the size by one

<small>text</small> decrease the size by one

<h1> text</h1> writes text in biggest heading

<h6>text</h6> writes text in smallest heading

<font size="1">text</font> writes text in smallest fontsize. (8 pt)

16
<font size="7">

text </font>
writes text in biggest fontsize (36 pt)

The <small> and <big> tags are special in that they can be repeated. If you want to increase the
font size with a factor two, then you could do it like this:

bla bla bla <big><big>whatever</big></big> bla bla bla

Note:
While the font tag lets you specify font attributes in plain HTML, you really should look into the
tutorial on CSS to learn how to get full, flexible and much more advanced control of your text.

Text layout
These tags will let you control the layout.
HTML EXPLANATION
<p>text</p> Adds a paragraph break after the text.
(2 linebreaks).
<p align="left">text</p> Left justify text in paragraph.
<p align="center">text</p> Center text in paragraph.
<p align="right">text</p> Right justify text in paragraph.
text<br> Adds a single linebreak where the tag is.
<nobr>text</nobr> Turns off automatic linebreaks
- even if text is wider than the window.
Allows the browser to insert a linebreak
text<wbr> at exactly this point
- even if the text is within <nobr> tags.
<center>text</center> Center text.
<div align="center">text</div> Center text.
<div align="left">text</div> Left justify text.
<div align="right">text</div> Right justify text.

Example: the difference between layout tags:

RESULT HTML
Hello world- a linebreak does not Hello world -
insert a linebreak in HTML a linebreak does not
insert a linebreak in HTML

you will need <p>you will need</p>

to insert <p align="right">to insert</p>

17
special tags <p align="left">special tags</p>

that will insert that will insert<br>

linebreaks linebreaks<br>
where where<br>
you want it! you want it!<br>
<br>
Another method is to write a Another method is of course to write
sentence, that is long enough to a sentence, that is long enough to
force a linebreak. force a linebreak.<br>
<br>
This option can however be turned <nobr>This option can however be
offwith the nobr-tag.unless a wbr is turned off<wbr>with the nobr
used to force it! tag,<wbr>unless a wbr is used to
force it!</nobr>

You can also center <center>You can center</center>

And turn the center off And turn the center off
And on! <div align="center">And on!</div>
Go left! <div align="left">Go left!</div>
Go right! <div align="right">Go Right!</div>

Note in particular the difference between the <p> and the <div> tags. The <div> tag allows
you to justify content without being forced to add a double linebreak.

Also, note that these alignment tags are not limited to text. They work on text, images,
applets or whatever it is that you insert on the page.
2. Lists
Introduction
To create a bulleted list you need to add a <ul> and a </ul> tag at the beginning and the end
of the list.

Numbered lists have <ol> tags instead of <ul> tags.

To separate single list items use <li> and </li> tags.
There are special settings that you can use to customize the lists on your page.
On the following two pages you can learn in detail about bulleted and numbered lists.
Bulletted
This page shows how to make different kinds of bulleted lists.
You have the following bullet options:

 disc

18
  circle

 square

Look at these examples to see the detailed syntax.

HTML-CODE EXPLANATION / EXAMPLE
Makes a bulleted list using the default bullet type:
<ul>
<li>text</li>  text
<li>text</li>  text
<li>text</li>  text
</ul>

Starts a bulleted list using discs as bullets:

 This is one line

<ul type="disc">  This is another line
 And this is the final line

Starts a bulleted list using circles as bullets:

o This is one line

<ul type="circle"> o This is another line
o And this is the final line

Starts a bulleted list using squares as bullets:

 This is one line

<ul type="square">  This is another line
 And this is the final line

On the next page you can learn how to create and customize numbered lists....
Numbered list
This page shows how to make different kinds of numbered lists.
You have the following number options:

19
  Plain numbers

 Capital Letters

 Small Letters

 Capital Roman Numbers

 Small Roman Numbers

In addition to these options you can specify at which number the list should start. The default start
value for numbered lists is at number one (or the letter A).

Look at these examples to see the detailed syntax.

HTML-CODE EXPLANATION / EXAMPLE
Makes a numbered list using the default number
type:
<ol>
<li>text</li>
<li>text</li> 1. text
<li>text</li> 2. text
</ol> 3. text

Starts a numbered list, first # being 5.

5. This is one line

<ol start="5"> 6. This is another line
7. And this is the final line

Starts a numbered list, using capital letters.

A. This is one line

<ol type="A"> B. This is another line
C. And this is the final line

<ol type="a"> Starts a numbered list, using small letters.

20
 a. This is one line
b. This is another line
c. And this is the final line

Starts a numbered list, using capital roman numbers.

I. This is one line

<ol type="I"> II. This is another line
III. And this is the final line

Starts a numbered list, using small roman numbers.

i. This is one line

<ol type="i"> ii. This is another line
iii. And this is the final line

Starts a numbered list, using normal numbers.

1. This is one line

<ol type="1"> 2. This is another line
3. And this is the final line

An example of how type and start can be combined.

VII. This is one line

<ol type="I" start="7"> VIII. This is another line
IX. And this is the final line

3. Links
Introduction
Links are the most fundamental part of the world wide web.
It is the links that tie it all together.

There are three different kinds of links you can have on your website:

 Links to anchors on the current page (Internal).

 Links to other pages within the current site (Local)

21
  Links to pages outside the current site (Global).

It is possible to make texts and images work as links.

With a little creativity other objects, such as pushbuttons or even drop-down menus can
work as links as well.

This section will cover the usual links: Texts and Images.
How to make a link
The tags used to produce links are the <a> and </a>.
The <a> tells where the link should start and the </a> indicates where the link ends.
Everything between these two will work as a link.
The target of the link is added to the <a> tag using
the href="http://www.whateverpage.com" setting.

The example below shows how to make the word here work as a link to yahoo.
Click <a href="http://www.yahoo.com">here</a> to go to yahoo.

You simply:
 Specify the target in the <a href=" ">.

 Then add the text that should work as a link.

 Finally add an </a> tag to indicate where the link ends.

Colours on text links

There are a few settings that can be useful for controlling the colors of text links.

This page will teach you how to:

 Define colors for all links on the page.

22
  Define colors for individual links on the page.

Define colors for all links on the page

The general color of text links is specified in the <body> tag, like in the example below:
<body link="#C0C0C0" vlink="#808080" alink="#FF0000">

 link - standard link - to a page the visitor hasn't been to yet. (standard color is blue -
#0000FF).

 vlink - visited link - to a page the visitor has been to before. (standard color is purple -
#800080).

 alink - active link - the color of the link when the mouse is on it. (standard color is red -
#FF0000).

Note
You can click here to learn more about the hexadecimal colorsystem that is used in HTML.

Define colors for individual links on the page

The method described above is for setting overall link colors for the page.
However, you might want one or more links to have different colors than the rest of the page.
There are two methods for doing this:

23
  Placing font tags between the <a href> and the </a> tag.
This method will work on all browsers except MSIE 3.

 Using a style setting in the <a> tag.

This method works on MSIE3 and newer browsers.

The first technique would look like this:

Click <a href="http://www.yahoo.com"><font
color="FF00CC">here</font></a> to go to yahoo.

Note:
It is important that both the <font> and the </font> tags are between the <a href> and </a> tags.

The second technique would look like this:

Click <a href="http://www.yahoo.com" style="color:
rgb(0,255,0)">here</a> to go to yahoo.

Note:
The RGB numbers indicate amounts of red, green, and blue using values between 0 and 255. You can
read more about converting between RGB colors and hexadecimal colors here.

Now, since neither of the two methods covers all browsers, we need to use both techniques at
once.

This example will work on all browsers:

Click <a href="http://www.yahoo.com" style="color:
rgb(0,255,0)"><font color="FF00CC">here</font></a> to go to
yahoo.

The last example is interesting. Not only because it will work on all browsers. But even more
because it shows a general approach to making your pages browser safe.

Since browsers simply leave out information that is not understood, you can work around
browser differences by simply adding different settings for multiple
Link Targets
By default, links will open in the current window or frame.
You need to add a target if you want the link to open in another window or frame than the link itself
24
is placed in.

To do this you simply add a target="" to the <a href>.

This example will open yahoo in a new window:
<a href="http://www.yahoo.com" target="_blank">

Predefined targets are:

 _blank loads the page into a new browser window.

 _self loads the page into the current window.

 _parent loads the page into the frame that is superior to the frame the hyperlink is in.

 _top cancels all frames, and loads in full browser window.

In addition to these, you can also enter the name of a frame window if your page is within a
frameset.

You can click here to learn more about links in framesets.

No underline
By default, text links are underlined by the browser.
If your page is visited by MSIE3 or newer, you can turn off the underlining for an entire page by
adding a style tag to the head section of the document.

Look at this example:

<html>

<head>
<title>This is my page</title>
<style type="text/css">
<!--
A{text-decoration:none}
-->
</style>
</head>

25
 <body>
Welcome to my world!<br>
<a href="http://www.yahoo.com">This Link To Yahoo has no
underline</a>
</body>

</html>

Note:
The style setting will not cause an error if viewed on a browser that doesn't support it. The
browser will simply skip the effect - the link will look like an ordinary underlined link - but no
errors will occur.

Advance Text Links

Instead of just turning off the underline on all links you could be more specific in defining the way
you want your links to work.

In the example below underlining is turned off for all links.

The A:hover tells the browser that when the mouse is over a link the underline should appear.
The hover option only works on MSIE 4+.
(But it does not cause an error on Netscape if you include it - the effect just does not appear.).

<html>

<head>
<title>This is my page</title>
<style type="text/css">
<!--
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline}
-->
</style>

</head>

<body>
Welcome to my world!<br>
<a href="http://www.yahoo.com">This Link To Yahoo has no
underline</a>
</body>

</html>

The methods described above will turn off the underline effect for links on the entire page.

26
If you want to turn off the effect for just a single link, add a style property to the <a href> tag:

<a href="http://www.yahoo.com" style="text-decoration: none">Go

to Yahoo</a>

NOTE:
The method described above only works on MSIE 3, Netscape 4 or newer browsers.

You can make multiple style settings instead of just removing the underline. Why not define the
colors you want for visited links as well?

This example will show you how:

<html>

<head>
<title>This is my page</title>

<STYLE TYPE="text/css"><!--
A.set1:link {color: #FF00FF; }
A.set1:active {color: #FFFF00; }
A.set1:visited {color: #00FFFF; }

A.set2:link {color: #AA00FF; background: FF00AA; text-decoration:

none}
A.set2:active {color: #FF00AA; background: none transparent;}
A.set2:visited {color: #FFFF00; text-decoration: none}
--></STYLE>

</head>

<body>
Welcome to my world!<br>
<a href="http://www.yahoo.com CLASS=set1> Yahoo </a>
<a href="http://www.hotbot.com CLASS=set2> Hotbot </a>
</body>

</html>

Try clicking the two links below to see how these effects would work. (links have been deactivated
on this page)

Yahoo

27
 Hotbot

Image links
If you want to make an image work as a link, the method is exactly the same as with texts.
You simply place the <a href> and the </a> tags on each side of the image.
Below is the HTML code used to make the image work as a link to a page called myfile.htm:

<a href="myfile.htm"><img src="rainbow.gif"></a>

If you haven't entered a border setting you will see a small border around the image after turning it
into a link. To turn off this border, simply add border="0" to the <img> tag:

<a href="myfile.htm"><img src="rainbow.gif" border="0"></a>

Images that work as links can show a popup text when you place the mouse over it.
This is done with the alt property in the <img> tag.

For example:
<a href="myfile.htm"><img src="rainbow.gif" border="0" alt="Link
to this page"></a>

Image mapping
It is possible to make one image link to several pages, depending on where the image is clicked.
This technique is called imagemapping.

28
You simply specify which areas of the image should link to where.
In the example below, if you position the mouse in the upper left corner it links to yahoo .... and in
the lower right corner.... it links to hotbot.

<img src="rainbow.gif" usemap = #example border=0>

<map name=example>
<area shape=Rect Coords=0,0,29,29 Href="http://www.yahoo.com">
<area shape=Rect Coords=30,30,59,59
Href="http://www.hotbot.com">
</map>

In the above example we only used rectangular imagemappings. Possible shapes are:

 <area shape=rect coords= x1,y1, x2,y2 Href="http://www.domain.com">

 <area shape=circle coords= x1,y1, x2,y2 Href="http://www.domain.com">

 <area shape=polygon coords= x1,y1, x2,y2, .., xn,yn Href="http://www.domain.com">

There are excellent tools out there to help you create imagemaps. No one calculates the
coordinates by hand.

If you want to use imagemaps on your site you will need to get a program that will allow you
to simply drag the mouse over the areas you want to work as links.

Most HTML editors have this as a built-in function.

If you do not use an HTML editor, you can still get programs that will do this boring job for
you - best thing is - you can get it for free!

Below are links to websites that will help you create your imagemaps on the fly.

29
 Just make sure that the image is uploaded to the web before using these tools.
Link within a page
Linking to anchors is very similar to normal links. Normal links always point to the top of a page.
Anchors point to a place within a page.

A # in front of a link location specifies that the link is pointing to an anchor on a page. (Anchor
meaning a specific place in the middle of your page).

To link to an anchor you need to:

 Create a link pointing to the anchor

 Create the anchor itself.

An anchor is created using the <a> tag.

If you want to create an anchor called chapter4, you simply add this line where you want the anchor
to be:

<a name="chapter4"></a>

After doing this, you can make a link pointing to the anchor using the normal <a href> tag, like this:
Click <a href="#chapter4">here</a> to read chapter 4.

Note:
When linking to an anchor on a page you need to put a # in front of the anchor.

When you link to an anchor on the same page, simply enter

<a href="#YourAnchor">blabla</a>

When you link to anchors on external pages use this syntax:

<a href="http://www.yahoo.com#YahoosAnchor">blabla</a>

Link in Framesets

30
If a non-framebased HTML document contains a hyperlink that links to a page
called analysis.htm then it appears in the HTML document somewhat like this:

Click here to see the <a href="analysis.htm">Analysis</a> of the

project.

Now if the same link was in a frameset, (say in the frame window called menu) and we wanted it to
link to a page that is loaded in the other frame window, (named main) then the HTML code would
be:

Click here to see the <a

href="analysis.htm" target="main">Analysis</a> of the project

We simply added the desired frame window (main) as a target for the link.
The link will be opened in the main frame window instead of the menu frame window
where the link itself is located.

Link to Email
Having a link that allows visitors to send email from your website can be a great addition to your
site, making it easy for your visitors to send questions or comments.

There is a special link for this action.

Email lin ks are done much the same as links to other pages, using the
<a href> tag.

An email link would require the following code:

<a href="mailto:youremailaddress">Email Me</a>

This will result in the visitor's email program opening a new email with your address already in the
To: field.

If you wish to have a specific subject in the email, you can add it to the html code
using subject= setting :

<a href="mailto:email@echoecho.com?subject=SweetWords">
Send Email</a>

31
Suppose you want an email link for your visitors containing specific text in the body of their
message, simply add &body=:

<a href="mailto:email@echoecho.com?body=Please send me a copy of

your new program!">Send Email</a>

Or combine all the options and allow your visitor to send email with the address, subject and text
already entered.

<a href="mailto:email@echoecho.com?subject=SweetWords
&body=Please send me a copy of your new program!">Email Me</a>

Link to new window

If you want your link to open a page in a new window use the target="_blank" in the <a href> tag.
Targetting the link to "_blank" simply opens a new browser window that will load the linked page.
Linking to Yahoo the traditional way would require this link:
<a href="http://www.yahoo.com">Go to Yahoo</a>

If you add a target="_blank", the page will open in a new window:

<a href="http://www.yahoo.com" target="_blank">Go to Yahoo</a>

Click the link below to see this link in action:

Go to Yahoo

If you want to customize the new window as to which buttons, menus etc. should be
available and which size it should have, you will need to do that with javascript.

You can use our Popup Tool to create your own customized windows without knowledge of
javascript.
4. Images
Introduction
This section will show how to add images to your pages.
We will start out with a presentation of the two main image types on webpages: jpg and gif.

32
After that, we will proceed with various ways to insert and customize images, with a special focus
on the different alignments you can choose.

While the focus of this section is images, there are a couple of aspects related to images that are
not covered here.

 If you want to learn how to make images work as links, you should go to the links section.

 If you want to learn about browser safe colors for images, you should go to the hexcolor
section.

 If you want to learn about mouseover effects on images, you should go to the javascript
section.

GIF & JPG

Computers store images in several different ways.
Some storage methods focus on compressing the size of the image as much as possible.
A major problem with using images on websites is that images take much longer to load than text.
To reduce download times as much as possible two of the best image compressing formats used
on the web are:

GIF JPG
256 colors Unlimited colors
Can handle transparent areas Can't handle transparent areas
This format is not good at compressing Excellent for compressing photographs
photographs and complex images
In general, it is excellent for banners, In general, it is not good for banners,
buttons and clipart buttons and clipart.

This means that:

 Banners, buttons, dividers, clipart and other simple images usually work best as GIF's.

33
  Photographs and other complex images usually work best as JPG's.

If you want to use an image that is in a format other than JPG or GIF, you will need to load
the image into a graphics program and save it as either JPG or GIF.

Inserting in HTML

The tag used to insert an image is called img.

Below you see an image called "rainbow.gif".

Here is the HTML code used to insert the image on this webpage:
<img src="http://www.echoecho.com/rainbow.gif">

If the image is stored in the same folder as the HTML page, you can leave out the domain reference
(http://www.echoecho.com/) and simply insert the image with this code:

<img src="rainbow.gif">

On the following pages we will discuss different ways to control how your image is inserted.
Resizing
You can change the size of an image using the width and height attributes.
In general, it is not advisable to reduce image size using these settings, since the image will be
transferred over the internet in its original size no matter what reduction is set for it. This will slow the
loading of your webpage.

This means, that if you have an image that is bigger in size than you want it to be on your page, you
should reduce the size in a graphics program, rather than reducing the size on the webpage using
the width and height attributes.

On the contrary, sometimes, it can be wise to enlarge images using this technique.
Below are two presentations of the exact same image - with different settings for width and height.

34
 <img src="http://www.echoecho.com/rainbow.gif" width="60"
height="60">

<img src="http://www.echoecho.com/rainbow.gif" width="120"

height="120">

If you leave out the settings for width and height, the browser will automatically use the real size of
the image.

However, you should always enter the settings for width and height, even when using the real size!

The reason is that if the settings are left out, the browser can't build the page until the image is
loaded entirely.

This means, that the visitor cannot read text around the image while the image itself is loading -
which in turn will give the visitor an impression of a slow loading page.

This becomes especially true if the image is inside a table.

In that case, the whole table will not be shown until the image is loaded entirely.

Border around
You can add a border to the image using the border setting shown in the example below:
Note:
Netscape browsers will only show the border if the image is a link.

35
 <img src="http://www.echoecho.com/rainbow.gif" border="5">

Adding a border to your image might help the visitor recognize that the image is a link.
However, the net is filled with images that work as links and have no borders indicating it - so
the average visitor is used to letting the mouse run over images to see if they are links.

Still - if you have an image that is often mistaken you might consider adding a border to it -
although you should probably consider changing the image entirely - since if it does not
indicate by itself that it is a link then it isn't serving it's purpose.
Alternative text

Spacing around
You can easily add space over and under your images
with the Vspace attribute.

In a similar way you can add space to the left and right of the image using the Hspace attribute.
Below is an example using these attributes:

<img src="rainbow.gif" Hspace="30" Vspace="10">

As you see these settings allow you to add spacing around your image. Unfortunately, they also
force you to add the same spacing to each side of the image (over and under - or left and right).

The workaround for this, if you only want spacing on one side of the image is to use a 1x1 pixel
transparent gif image.

If, for example, you wanted a 10 pixel spacing to the left of your image you could use the
transparent image (pixel.gif) this way:

36
 <img src="pixel.gif" width="10" height="1"><img
src="rainbow.gif">

The 1x1 pixel transparent gif image is simply stretched to whatever size you want the
spacing to have.

This 1x1 pixel "cowboy-trick" is probably one of the most widely used workarounds on the
entire net.

The reasons are obvious: It works on all browsers and it gives you complete pixel precision
in your design!

Alignment
You can align images according to the text around it, using the following alignments:

 default aligns the image using the default settings of the Web browser. Same as baseline.

 left aligns the image in the left margin and wraps the text that follows the image.

 right aligns the image in the right margin and wraps the text that precedes the image.

 top aligns the top of the image with the surrounding text.

 texttop aligns the top of the image with the top of the tallest text in the line.

 middle aligns the middle of the image with the surrounding text.

37
  absmiddle aligns the image with the middle of the current line.

 baseline aligns the image with the baseline of the current line.

 bottom aligns the bottom of the image with the surrounding text.

 absbottom aligns the image with the bottom of the current line.

 center aligns the center of the image with the surrounding text.

In the table below you can see examples of the different vertical alignments you can make for an
image.

The note in the examples is only there to show how the circular sign is affected by other
images on the same line.

This means, that the alignments shown in the example are made to the circular sign and not the note.

HTML EXAMPLE

<img src="rainbow.gif" align="texttop">

bla bla bla bla

<img src="rainbow.gif" align="top">

bla bla bla bla

<img src="rainbow.gif" align="middle">

bla bla bla bla

<img src="rainbow.gif" align="absmiddle">

bla bla bla bla

<img src="rainbow.gif" align="bottom">

bla bla bla bla
<img src="rainbow.gif" align="absbottom">

38
 bla bla bla bla

<img src="rainbow.gif" align="baseline">

bla bla bla bla

Text wrapping
In addition to the vertical alignments covered on the previous page, images can also be aligned
horizontally.

To do this, add align="left" or align="right" to the <img> tag.

Consider these examples to see how it works:
HTML-CODE EXAMPLE

bla bla bla bla bla blabla bla bla

bla bla bla bla bla bla bla bla bla
<img src="rainbow.gif" bla bla bla bla bla bla bla bla bla
align="left"> bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla
bla bla bla bla bla

bla bla bla bla bla blabla bla bla

bla bla bla bla bla bla bla bla bla
<img src="rainbow.gif" bla bla bla bla bla bla bla bla bla
align="right"> bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla
bla bla bla bla bla

Another way to obtain the same effect would be to enter the image and text in an invisible
table. Entering text in one column and the image in another would create a similar effect.

6. TABLES

6.1 Introduction
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc.
into rows and columns of cells.Tables are used on websites for two major purposes:
 The obvious purpose of arranging information in a table
 The less obvious - but more widely used - purpose of creating a page layout with the use
of hidden tables.

Using tables to divide the page into different sections is an extremely powerful tool.
Almost all major sites on the web are using invisible tables to layout the pages.

39
The most important layout aspects that can be done with tables are:

 Dividing the page into separate sections.

An invisible table is excellent for this purpose.
 Creating menus.
Typically with one color for the header and another for the links following in the next
lines.
 Adding interactive form fields.
Typically a gray area containing a search option.
 Creating fast loading headers for the page.
A colored table with a text on it loads like a bullet compared to even a small banner.
 Easy alignment of images that have been cut into smaller pieces.

 A simple way to allow text to be written in two or more columns next to each other.

The importance of using tables for these layout purposes can't be overrated. However
there are a few things to keep in mind when doing so.

Most important is, that the content of a table is not shown until the entire table is loaded.
If you have extremely long pages, you should divide it into two or more tables - allowing
the user to start reading the upper content while the rest of the page is loading.

6.2 Basic tags

The HTML tables are created using the <table> tag in which the <tr> tag is used to
create table rows and <td> tag is used to create data cells.A table header is defined with
the <th> tag.

6.3 Table tags

Example
Create a HTML code to produce the following table.
Row 1, Column 1 Row 1, Column 2

Row 2, Column 1 Row 2, Column 2

Solution
<html>
<head>
<title>HTML Tables</title>
</head>
<body>

40
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

Table heading can be defined using <th> tag. This tag will be put to replace <td> tag,
which is used to represent actual data cell. Normally you will put your top row as table
heading as shown below, otherwise you can use <th> element in any row.

Here border is an attribute of <table> tag and it is used to put a border across all the cells. If
you do not need a border then you can use border="0".

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<tableborder="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>

41
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

Write a HTML code that will display the following table when run on a web
browser.

Name Salary

Ramesh Raman 5000

Shabbir Hussein 7000

6.4 Row/ column tags

Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge two or more columns into a single column.
Similar way you will use rowspan if you want to merge two or more rows.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<tableborder="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>

42
</tr>
<tr>
<tdrowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<tdcolspan="3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>

This will produce following result:

Column 1 Column 2 Column 3

Row 1 Cell
Row 1 Cell 3
2
Row 1 Cell 1
Row 2 Cell
Row 2 Cell 3
2

Row 3 Cell 1

Exercise
Write a HTML code that would be used to display the following table on a webpage when run on
a browser.

Products in a supermarket
Name Cost Date
Highly Perishable Oranges 100/kg 16/2/19
Bananas 120/kg 19/2/19
Perishable Colgate 200/= N/A
Close up 210/= N/A

43
 Aqua fresh 220/= N/A
Goods once sold not returned

6.5 Cell tags

Cellpadding and Cellspacing Attributes
There are two attribiutes called cellpadding and cellspacing which you will use to adjust the
white space in your table cells. The cellspacing attribute defines the width of the border, while
cellpadding represents the distance between cell borders and the content within a cell.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<tableborder="1"cellpadding="5"cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

This will produce following result:

Name Salary

44
Ramesh Raman 5000

Shabbir Hussein 7000

se settings can be added to both <tr> and <td> tags.

PROPERTY DESCRIPTION
align=
left aligns content to the left of cells
right aligns content to the right of cells
center aligns content to the center of the cells
background=filename sets a background image for the cells
bgcolor=#rrggbb sets a background color for the cells
bordercolor=#rrggbb sets color for the border of cells
bordercolordark=#rrggbb sets color for the border shadow of cells
valign=
top aligns to the top of cells
middle aligns to the middle of the cells
bottom aligns to the bottom of cells

width=
n specify a minimum width for the cells in pixels
n% specify a minimum width for the cells in percent of
the table width
height=
n minimum height of cells in pixels
n% minimum height of cells in percentage of table height

ROPERTY DESCRIPTION
align=
left aligns content to the left of cells
right aligns content to the right of cells
center aligns content to the center of the cells
background=filename sets a background image for the cells
bgcolor=#rrggbb sets a background color for the cells
bordercolor=#rrggbb sets color for the border of cells
bordercolordark=#rrggbb sets color for the border shadow of cells
valign=
top aligns to the top of cells
middle aligns to the middle of the cells
bottom aligns to the bottom of cells

width=
n specify a minimum width for the cells in pixels
n% specify a minimum width for the cells in percent of
the table width
height=
n minimum height of cells in pixels
n% minimum height of cells in percentage of table height

45
These settings are only valid for <td> tags.
PROPERTY DESCRIPTION
colspan=n number of columns a cell should span
nowrap protects against linebreaks, even though the content
of a cell might be wider than the browser window
rowspan=n number of rows a cell should span

Assignment
2025CSCS B/C Out of Classwork
(a) Write a HTML code that would be used to generate the following output. (10 marks)

Courses Offered at Best Technologies College.

Fees for
Fee per Fee per single
Course Duration Revision dates
semester subject subject for
revision
DICT 6 months 10,500 1,000 12/08/2014- 2,000
DSS 6 months 10,500 1,000 12/09/2014 2,000
CIT 6 months 9,500 900 1,500
15/09/2014-
CEET 6 months 9,50046 900 1,500
01/10/2012
CCAT 6 months 9,500 900 1,500
All fees is payable through the college account
(b) Change the border colors to red. (5 marks)
(c) Change background color of the table to green. (5 marks)
(d) Insert a graphic of your choice as a background. (5 marks)

47
7. COLOURS
7.1 Introduction
By default, your webpage background is white in color. It may not be pleasant to the
programmer, but this can be changed. HTML provides the following two ways to decorate a
webpage background.

7.2 Background colors

The bgcolor attribute is used to control the background of an HTML element, specifically page
body and table backgrounds. Following is the syntax to use bgcolor attribute with any HTML
tag.
<tagnamebgcolor="color_value"...>

This color_value can be given in any of the following formats:

(a) Format 1 - Use color name

<tablebgcolor="lime">

The name of the colour can be included in the code for example: Red, Blue, Red, Orange,
Lime among others.
(b) Format 1 - Use hex value
<tablebgcolor="#0000ff">

Hexadecimal color values are supported in all major browsers.

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and
BB (blue) hexadecimal integers specify the components of the color. All values must be
between 00 and FF.
For example, the #0000ff value is rendered as blue, because the blue component is set to
its highest value (ff) and the others are set to 00.

(c) Format 3 - Use color value in RGB terms

<tablebgcolor="rgb(0,0,120)">

RGB color values are supported in all major browsers.

An RGB color value is specified with: rgb(red, green, blue). Each parameter (red, green,
and blue) defines the intensity of the color and can be an integer between 0 and 255 or a
percentage value (from 0% to 100%).

For example, the rgb(0,0,255) value is rendered as blue, because the blue parameter is set
to its highest value (255) and the others are set to 0.

Also, the following values define equal color: rgb(0,0,255) and rgb(0%,0%,100%).

48
Example 7.1
Write a HTML code that would display a table with different colors as shown in figure 6.1 when
run on a browser.

This background is yellow

This background is sky blue
This background is green

Solution
<html>
<head>
<title>HTML Background Colors</title>
</head>
<body>
<!-- Format 1 - Use color name -->
<tablebgcolor="yellow"width="100%">
<tr><td>
This background is yellow
</td></tr>
</table>

<!-- Format 2 - Use hex value -->

<tablebgcolor="#6666FF"width="100%">
<tr><td>
This background is sky blue
</td></tr>
</table>

<!-- Format 3 - Use color value in RGB terms -->

<tablebgcolor="rgb(255,0,255)"width="100%">
<tr><td>
This background is green
</td></tr>
</table>

</body>
</html>

7.3 Background images

The background attribute can also be used to control the background of an HTML element,
specifically page body and table backgrounds. You can specify an image to set background of
your HTML page or table. Following is the syntax to use background attribute with any HTML
tag.

Note: The background attribute is deprecated and it is recommended to use Style Sheet for
background setting.
<tagnamebackground="Image URL"...>

49
The most frequently used image formats are JPEG, GIF and PNG images.

Example
Here are the examples to set background images of a table.

<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>

<!-- Set table background -->

<tablebackground="/images/html.gif"width="100%"height="100">
<tr><td>
This background is filled up with HTML image.
</td></tr>
</table>

</body>
</html>

This will produce following result:

7.4 Fixed images

The background image will scroll when the user scrolls down the page, unless
you have set it to be fixed. The following is the syntax for creating a fixed
image.

50
 <body background="drkrainbow.gif" bgproperties="fixed">

By adding the bgproperties="fixed" you force the browser to let the background
be fixed even if the user is scrolling down the page.
Exercise

8. Frames
8.1 Introduction
HTML frames are used to divide a browser window into multiple sections where each section
can load a separate HTML document. A collection of frames in the browser window is known
as a frameset. The window is divided into frames in a similar way the tables are organized: into
rows and columns.
Disadvantages of Frames
There are few drawbacks with using frames, so it's never recommended to use frames in your
webpages:
 Some smaller devices cannot cope with frames often because their screen is not big
enough to be divided up.
 Sometimes your page will be displayed differently on different computers due to different
screen resolution.
 The browser's back button might not work as the user hopes.
 There are still few browsers that do not support frame technology.

8.2 Creating frame sets

To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag
defines how to divide the window into frames. The rows attribute of <frameset> tag defines
horizontal frames and cols attribute defines vertical frames. Each frame is indicated by <frame>
tag and it defines which HTML document shall open into the frame.

Example
Following is the example to create three horizontal frames:

<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<framesetrows="10%,80%,10%">
<framename="top"src="/html/top_frame.htm"/>
<framename="main"src="/html/main_frame.htm"/>

51
<framename="bottom"src="/html/bottom_frame.htm"/>
<noframes>
<body>
Your browser does not support frames.
</body>+
</noframes>
</frameset>
</html>

This will produce following result:

Example 8.1
Let's put above example as follows, here we replaced rows attribute by cols and changed their
width. This will create all the three frames vertically:

<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<framesetcols="25%,50%,25%">
<framename="left"src="/html/top_frame.htm"/>
<framename="center"src="/html/main_frame.htm"/>
<framename="right"src="/html/bottom_frame.htm"/>
<noframes>

52
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>

This will produce following result:

Attribute Description

Cols specifies how many columns are contained in the frameset and the
size of each column. You can specify the width of each column in
one of four ways:

 Absolute values in pixels. For example to create three

vertical frames, use cols="100, 500,100".
 A percentage of the browser window. For example to create
three vertical frames, use cols="10%, 80%,10%".
 Using a wildcard symbol. For example to create three
vertical frames, use cols="10%, *,10%". In this case
wildcard takes remainder of the window.
 As relative widths of the browser window. For example to
create three vertical frames, use cols="3*,2*,1*". This is an
alternative to percentages. You can use relative widths of
the browser window. Here the window is divided into
sixths: the first column takes up half of the window, the
second takes one third, and the third takes one sixth.

53
 Rows This attribute works just like the cols attribute and takes the same
values, but it is used to specify the rows in the frameset. For
example to create two horizontal frames, use rows="10%, 90%".
You can specify the height of each row in the same way as
explained above for columns.

Border This attribute specifies the width of the border of each frame in
pixels. For example border="5". A value of zero means no border.

Frameborder This attribute specifies whether a three-dimensional border should

be displayed between frames. This attrubute takes value either 1
(yes) or 0 (no). For example frameborder="0" specifies no border.

Framespacin This attribute specifies the amount of space between frames in a

g frameset. This can take any integer value. For example
framespacing="10" means there should be 10 pixels spacing
between each frames.

The <frame> Tag Attributes

Following are important attributes of <frame> tag:

Attribute Description

Src This attribute is used to give the file name that should be loaded in the
frame. Its value can be any URL. For example, src="/html/top_frame.htm"
will load an HTML file available in html directory.

Name This attribute allows you to give a name to a frame. It is used to indicate
which frame a document should be loaded into. This is especially important
when you want to create links in one frame that load pages into an another
frame, in which case the second frame needs a name to identify itself as the
target of the link.

frameborder This attribute specifies whether or not the borders of that frame are shown;
it overrides the value given in the frameborder attribute on the <frameset>
tag if one is given, and this can take values either 1 (yes) or 0 (no).

marginwidth This attribute allows you to specify the width of the space between the left

54
 and right of the frame's borders and the frame's content. The value is given
in pixels. For example marginwidth="10".

marginheight This attribute allows you to specify the height of the space between the top
and bottom of the frame's borders and its contents. The value is given in
pixels. For example marginheight="10".

Noresize By default you can resize any frame by clicking and dragging on the
borders of a frame. The noresize attribute prevents a user from being able
to resize the frame. For example noresize="noresize".

Scrolling This attribute controls the appearance of the scrollbars that appear on the
frame. This takes values either "yes", "no" or "auto". For example
scrolling="no" means it should not have scroll bars.

Longdesc This attribute allows you to provide a link to another page containing a long
description of the contents of the frame. For example
longdesc="framedescription.htm"

Example 8.2

<html>
<frameset cols="50%,50%">
<frame src="micheal.gif" scrolling="yes">
<frame src="html.gif">
</frameset>

</html>

55
8.3 Default pages

Default pages are the pages that will be loaded when the frameset is opened the first
time.Furthermore, we can add names to each frame window using the name setting.This will
allow us to make a link in one frame window, open a page in another frame window. In this
example we added names and default pages to the frame windows:

<frameset cols="120,*" >

<frame src="menu.htm" name="menu" >
<frame src="frontf.htm" name="main" >
</frameset>

The entire frameset will look like this:

m main
e
n
u

We still have the screen divided in two columns, the left being 120 pixels the right using the rest
of the screen. (some screens are set to 640 pixels across, some to 800 and some to 1024, thats
why the * is needed).

But now we also have told the browser that the left frame window should load an HTML page
called menu.htm and that the right window should load an HTML document called frontf.htm.

In addition we have assigned the names menu and main to the two frame windows, so now we're
even able to link to specific windows.

56
We called the frame windows menu and main, but you could name them whatever you pleased.

The frameset with a menu window to the left and a main window to the right is the most
common frameset seen on the web.
There are a few more settings we could add to the frameset.
For instance you might want the frame borders to be invisible.
Proceed to the next page to learn how....

8.4 Resizable windows

By default once a frame has been created it is possible to resize a window. But if you
don’t want the frame windows to be resizeable, you should add the parameter "noresize"
to the frame src lines as shown below.

<frameset cols="120,*" frameborder="0" border="0"

framespacing="0">
<frame src="menu.htm" name="menu" noresize>
<frame src="frontf.htm" name="main" noresize>
</frameset>

Now let's proceed with even more parameters for our frameset...
8.5 Scrollbars
Syntax
<frame scrolling="auto|yes|no">
Attribute Values

Value Description

Auto Scrollbars appear if needed (this is default)

Yes Scrollbars are always shown (even if they are not needed)

No Scrollbars are never shown (even if they are needed)

Examples 1

On this page you can see examples of different framesets.

top
bottom

<frameset rows="16%,84%">

57
 <frame src="top.htm" name="top">
<frame src="bottom.htm" name="bottom">
</frameset>

Examples 2

tl tr

bottom

<frameset rows="16%,84%">
<frameset cols="50%,50%">
<frame src="tl.htm" name="tl">
<frame src="tr.htm" name="tr">
</frameset>
<frame src="bottom.htm" name="bottom">
</frameset>

Examples 3

top

left right

<frameset rows="16%,84%">
<frame src="top.htm" name="top">
<frameset cols="50%,50%">
<frame src="left.htm" name="left">
<frame src="right.htm" name="right">
</frameset>
</frameset>

topleft topright

58
 botleft botright

<frameset rows="50%,50%" cols="50%,50%">

<frame src="topleft.htm" name="topleft">
<frame src="topright.htm" name="topright">
<frame src="botleft.htm" name="botleft">
<frame src="botright.htm" name="botright">
</frameset>

topleft topright
brtl brtr
botleft botrbot

<frameset rows="50%,50%" cols="50%,50%">

<frame src="topleft.htm" name="topleft">
<frame src="topright.htm" name="topright">
<frame src="botleft.htm" name="botleft">
<frameset rows="50%,50%">
<frameset cols="50%,50%">
<frame src="brtl.htm" name="brtl">
<frame src="brtr.htm" name="brtr">
</frameset>
<frame src="botrbot.htm" name="botrbot">
</frameset>
</frameset>

topleft topright

botleft botright

<frameset rows="240,240" cols="320,320">

<frame src="topleft.htm" name="topleft">
<frame src="topright.htm" name="topright">
<frame src="botleft.htm" name="botleft">
<frame src="botright.htm" name="botright">
</frameset>

59
 topleft topright

botleft botright

<frameset rows="50%,*" cols="320,*">

<frame src="topleft.htm" name="topleft">
<frame src="topright.htm" name="topright">
<frame src="botleft.htm" name="botleft">
<frame src="botright.htm" name="botright">
</frameset>

Exercise 4.
Write a html code that would be used to display the following frameset browser window when
run.
20% 60% 20%
15%

10%
80%
70% 10%

15%

Example
Write a HTML code that would display the following Window when run on a browser.

60
Forms
Introduction
A form is simply an area that can contain form fields. Form fields are objects that allow the
visitor to enter information - for example text boxes, drop-down menus or radio buttons. When
the visitor clicks a submit button, the content of the form is usually sent to a program that runs on
the server. However, there are exceptions. JavaScript is sometimes used to create magic with
form fields. An example could be when turning options in a drop-down menu into normal links.

Examples of Application of forms

A typical form example would be a search engine.

SEARCH!

SEARCH THIS SITE

This is what happens when the form is submitted:

 The search words are sent to a program on the server.

 The program will search a database for matches.
 The program creates a webpage with the results.
 The results webpage is sent back to the visitor.

Another example would be a logon page.

61
 FREE WEB-EMAIL AT
ECHOECHO.COM

Username:

Password:

Log In

NEW USERS: SIGN UP HERE!

FORGOT YOUR PASSWORD?

This is what happens when the form is submitted:

 The ID and password are sent to a program on the server.

 The program will search a database for valid entries.
 If the entry is valid the visitor is sent to the protected page.
 If the entry is invalid the visitor is sent to a "failure" page.

Both examples send the contents of the form fields to programs running on the server.

CGI Scripts
When your form is submitted you need a program that can receive the information and do
something with it.Such programs are sometimes referred to as: CGI programs.CGI stands for
Common Gateway Interface, which is computer latin for a program that translates information.

This translation is necessary because the server might be a UNIX machine while the visitor
might be sending information from a Windows platform. Windows and UNIX handle
information differently - so if there were no CGI, then UNIX machines could only communicate
with other UNIX machines etc. and that is pretty far from the basic idea of the world wide web.

Form Tag
When a form is submitted, all fields on the form are being sent. The <form> tag tells the browser
where the form starts and ends. You can add all kinds of HTML tags between
the <form> and </form> tags.

This means that a form can easily include a table or an image along with the form fields
mentioned.

Syntax

62
 <html>
<head>
<title>My Page</title>
</head>

<body>
<!-- Here goes HTML -->
<form>
<!-- Here goes form fields and HTML -->
</form>
<!-- Here goes HTML -->
</body>
</html>

Note:
Unlike a table, forms are not visible on the page.

The form in our example is useless for two obvious reasons:

 First it contains no form fields. It is simply comparable to a blank sheet of paper.

 Second, it does not contain a recipient for the form once it is submitted.

To let the browser know where to send the content we add these properties to the <form> tag:

 action=address
 method=post or method=get

The address is the URL of the CGI script the content should be sent to.
The postand get methods are simply two different methods for submitting data to the script.

In the description of the script you are using it will be made clear whether the scripts should be
addressed using one method or the other.

Below is an example of a typical form tag, with both action and method specified.

<html>
<head>
<title>My Page</title>
</head>

<body>
<!-- Here goes HTML -->
<form method="post"
action="http://www.echoecho.com/cgi-bin/formmail.cgi">
<!-- Here goes form fields and HTML -->
</form>
<!-- Here goes HTML -->
</body>

63
 </html>

Form Fields
These fields can be added to your forms:

1. Text
Text fields are one line areas that allow the user to input text.
SETTINGS:

The table below shows a listing of valid settings for text fields:

HTML EXPLANATION EXAMPLE

text One line text field
size= Characters shown.
maxlength= Max characters allowed.
name= Name of the field.
value= Initial value in the field.
align= Alignment of the field.
tabindex= Tab order of the field.

The size option defines the width of the field. That is how many visible characters it can contain.

The maxlength option defines the maximum length of the field. That is how many characters
can be entered in the field.
If you do not specify a maxlength, the visitor can easily enter more characters than are visible in
the field at one time.

The name setting adds an internal name to the field so the program that handles the form can
identify the fields.

The value setting defines what will appear in the box as the default value.

The align setting defines how the field is aligned.

Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE,
ABSMIDDLE, ABSBOTTOM. The alignments are explained in the image section.
The tabindex setting defines in which order the different fields should be activated when the
visitor clicks the tab key.

EXAMPLE 2:

Look at this HTML example:

<html>
<head>
<title>My Page</title>

64
 </head>
<body>
<form name="myform">
<div align="center">
<br><br>
<input type="text" size="25" value="Enter your name here!">
<br><br>
</div>
</form>
</body>
</html>

And the resulting output from it:

Enter your name here!

2. Text areas
Unlike most other form fields, text areas are not defined with an <input> tag.

Instead you enter a <textarea> tag where you want the text area to start and a
closing </textarea> tag where you want the area to end.

Everything written between these tags will be presented in the text area box.

SETTINGS:

Below is a listing of valid settings for text areas:

HTML EXPLANATION EXAMPLE

textarea Text area - several lines
rows= Rows in the field.
cols= Columns in the field.
name= Name of the field.
tabindex= Tab order of the field.

wrap=
off Turns off linebreaking
virtual Shows linebreaking, but
sends text as entered.
physical
Inserts linebreaks when
needed and even sends it.

The cols and rows settings are straightforward and simple. They specify how many columns and
rows you want in your text area.

The name setting adds an internal name to the field so the program that handles the form can

65
 identify the fields.

The tabindex setting defines in which order the different fields should be activated when the
visitor clicks the tab key.

The wrap options are the most tricky part of text areas.
If you turn wrap off the text is handled as one long sequence of text without linebreaks.
If you set it to virtual the text appears on your page as if it recognized linebreaks - but when the
form is submitted the linebreaks are turned off.
If you set it to physical the text is submitted exactly as it appears on the screen - linebreaks
included.

AN EXAMPLE:
Look at this HTML example:
<html>
<head>
<title>My Page</title>
</head>

<body>
<form name="myform">
<div align="center">
This is outside the area<br><br>
<textarea cols="40" rows="5" name="myname">
Now we are inside the area - which is nice.
</textarea>
<br><br>
And now we are outside the area again.
</div>
</form>
</body>
</html>

The following will be displayed.

3. Password
Password fields are similar to text fields.
The difference is that what is entered into a password field shows up as dots on the screen.

66
This is, of course, to prevent others from reading the password on the screen.

SETTINGS:

Below is a listing of valid settings for password fields:

HTML EXPLANATION EXAMPLE

password One line password field
size= Characters shown.
maxlength= Max characters allowed.
name= Name of the field.
value= Initial value in the field.
align= Alignment of the field.
tabindex= Tab order of the field.

The size option defines the width of the field. That is how many visible characters it can
contain.

The maxlength option defines the maximum length of the field. That is how many
characters can be entered in the field.
If you do not specify a maxlength, the visitor can easily enter more characters than are
visible in the field at one time.

The name setting adds an internal name to the field so the program that handles the form
can identify the fields.

The value setting defines what will appear in the box as the default value.
The align setting defines how the field is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE,
ABSMIDDLE, ABSBOTTOM. The alignments are explained in the image section. You can
learn about the different alignments here.

The tabindex setting defines in which order the different fields should be activated when
the visitor clicks the tab key.

EXAMPLE:

Look at this HTML example:

<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform"
action="http://www.mydomain.com/myformhandler.cgi" method="POST">

67
 <div align="center">
Enter Password : <input type="password" size="25">
<br><br>
</div>
</form>
</body>
</html>

And the resulting output from it:

5.
6. Check boxes
Check boxes are used when you want to let the visitor select one or more options from a
set of alternatives. If only one option is to be selected at a time you should use radio
buttons instead.

SETTINGS:

Below is a listing of valid settings for check boxes:

HTML EXPLANATION EXAMPLE

checkbox Choose one or more options
name= Name of the field.
value= Value that is submitted if checked.
align= Alignment of the field.
tabindex= Tab order of the field.
checked Default check this field.

The name setting adds an internal name to the field so the program that handles the form
can identify the fields.

The value setting defines what will be submitted if checked.

The align setting defines how the field is aligned.

Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE,
ABSMIDDLE, ABSBOTTOM.

The tabindex setting defines in which order the different fields should be activated when
the visitor clicks the tab key.

EXAMPLE:

Look at this HTML example:

<html>
<head>
<title>My Page</title>

68
 </head>
<body>
<form name="myform"
action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center"><br>
<input type="checkbox" name="option1" value="Milk"> Milk<br>
<input type="checkbox" name="option2" value="Butter" checked>
Butter<br>
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>
<br>
</div>
</form>
</body>
</html>

And the resulting output from it:

Milk

Butter

Cheese

9. Radio Buttons
Radio buttons are used when you want to let the visitor select one - and just one - option
from a set of alternatives. If more options are to be allowed at the same time you should
use check boxes instead.

SETTINGS:

Below is a listing of valid settings for radio buttons:

HTML EXPLANATION EXAMPLE

radio Choose one - and only one - option
name= Name of the group.
value= Value that is submitted if checked.
align= Alignment of the field.
tabindex= Tab order of the field.
checked Default check this field.

The name setting tells which group of radio buttons the field belongs to. When you select
one button, all other buttons in the same group are unselected.
If you couldn't define which group the current button belongs to, you could only have one
group of radio buttons on each page.

The value setting defines what will be submitted if checked.

The align setting defines how the field is aligned.

Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE,

69
 ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section. You can learn about the different
alignments here.

The tabindex setting defines in which order the different fields should be activated when
the visitor clicks the tab key.

AN EXAMPLE:

Look at this HTML example:

<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform"
action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center"><br>
<input type="radio" name="group1" value="Milk"> Milk<br>
<input type="radio" name="group1" value="Butter" checked>
Butter<br>
<input type="radio" name="group1" value="Cheese"> Cheese
<hr>
<input type="radio" name="group2" value="Water"> Water<br>
<input type="radio" name="group2" value="Yoghurt"> Yoghurt <br>
<input type="radio" name="group2" value="Sweets" checked>
Sweets<br>
</div>
</form>
</body>
</html>

And the resulting output:

Milk

Butter

Cheese

Water

Yoghurt

Sweets

12. Drop-Down Menu

70
Drop-down menus are probably the most flexible objects you can add to your forms.
Depending on your settings, drop-down menus can serve the same purpose as radio
buttons (one selection only) or check boxes (multiple selections allowed).

The advantage of a drop-down menu, compared to radio buttons or check boxes, is that it
takes up less space.But that is also a disadvantage, because people can't see all options in
the menu right away.

There is a workaround for this - with the size setting, you can customize the menu so it
shows more than just one option at a time, but when you do that - you also lose the
advantage of taking up less space.

So whatever you decide - there is always a bonus and a price to pay.

Sometimes you may want to replace text fields with drop-down menus. This might be
because selecting from a menu is easier than typing. But it could also be because the
script that handles the form can't interpret just any text entry.

For example, you will often be asked to choose your county from a drop-down menu.
This might be because picking it from the menu is easier than typing the name of the
state.

Along the same line, you may often asked to enter the 2 letter initials of your state from a
drop-down menu as well.This could prevent confusion for the script that handles the form
input. If, say, the script was programmed to only accept capital letters, then a drop-down
menu would secure that no invalid entries were made.

Another typical example would be replacing links with drop-down menus.

SETTINGS:
Below is a listing of valid settings for drop-down menus:
HTML EXPLANATION EXAMPLE
select Drop-down menu
name= Name of the field.
size= Visible items in list.
multiple= Allows multiple choices if yes.

option Individual items in the menu.

selected Default select the item.
value= Value to send if selected.

71
 Drop-down menus combine <select> and <option>.
Both tags have an opening and a closing tag.

A typical example of the syntax would be:

<select>
<option>Milk</option>
<option>Coffee</option>
<option>Tea</option>
</select>

The <select> tag defines the menu.

The name setting adds an internal name to the field so the program that handles the form can
identify the fields.

The size option defines how many items should be visible at a time. Default is one item.

The multiple setting will allow for multiple selections if present.

The <option> tag defines the single items in the menu.

The value setting defines what will be submitted if the item is selected. This is not
always the same as what it says in the menu. If our field was defined this way:

<option value="ID">Idaho</option>

then, in the menu it would say "Idaho" but when the form was submitted the abbreviated
"ID" would actually be sent.

You can force an item to be default selected by adding the selected option: <option
selected>

AN EXAMPLE:

Look at this HTML example:

<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" method="POST">
<div align="center">
<select name="mydropdown">
<option value="Milk">Fresh Milk</option>
<option value="Cheese">Old Cheese</option>
<option value="Bread">Hot Bread</option>

72
 </select>
</div>
</form>
</body>
</html>

And the resulting output from it:

And the resulting output from it:

Fresh Milk

13. Submit button

When a visitor clicks a submit button, the form is sent to the address specified in
the action setting of the <form> tag.

Since visitors aren't always perfectionists you might consider adding a javascript
validation of the content before it is actually sent.

SETTINGS:
Below is a listing of valid settings for submit buttons:

HTML EXPLANATION EXAMPLE

submit Submit button
name= Name of the button.
value= Text written on the button.
align= Alignment of the button.
tabindex= Tab order of the button.

The name setting adds an internal name to the button so the program that handles the
form doesn't confuse the button with the other fields.

The value setting defines what is written on the button.

The align setting defines how the button is aligned.

Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE,
ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section.
You can learn about the different alignments here.

The tabindex setting defines in which order the different fields should be activated when
the visitor clicks the tab key.

AN EXAMPLE:

73
 Look at this HTML example:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" >
<div align="center">
<br><br>
<input type="text" size="25" value="Enter your name here!">
<br><input type="submit" value="Submit"><br>
</div>
</form>
</body>
</html>

And the resulting output from it:

15.
16. Reset button.

When a visitor clicks a reset button, the entries are reset to the default values.

SETTINGS:

Below is a listing of valid settings for reset buttons:

HTML EXPLANATION EXAMPLE

reset Reset button
name= Name of the button.
value= Text written on the button.
align= Alignment of the button.
tabindex= Tab order of the button.

The name setting adds an internal name to the button so the program that handles the form
doesn't confuse the button with the other fields.

The value setting defines what is written on the button.

The align setting defines how the button is aligned.

Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE,
ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section.
You can learn about the different alignments here.

74
The tabindex setting defines in which order the different fields should be activated when the
visitor clicks the tab key.

AN EXAMPLE:

Look at this HTML example:

<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform"
action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center">
<br><br>
<input type="text" size="25" value="Enter your name here!">
<br><input type="submit" value="Send me your name!"> <input
type="reset" value="Reset!"><br>
</div>
</form>
</body>
</html>

And the resulting output from it:

Enter your name here!

Send me your name! Reset!

75
JAVASCRIPT
JavaScript is a scripting language that allowsa programmer to add real programming to
webpages.

Small applications like a calculator or a primitive game of some sort can be created using
JavaScript.However, there are more serious uses for JavaScript:
 Browser Detection
Detecting the browser used by a visitor at a page. Depending on the browser, another
page specifically designed for that browser can then be loaded.

 Cookies
Storing information on the visitor's computer, then retrieving this information
automatically next time the user visits your page. This technique is called "cookies".

 Control Browsers
Opening pages in customized windows, where you specify if the browser's buttons, menu
line, status line or whatever should be present.

 Validate Forms
Validating inputs to fields before submitting a form.An example would be validating the
entered email address to see if it has an @ in it, since if not, it's not a valid address.

Where to place JavaScript in a HTML code.

Since JavaScript isn't HTML, the browser should know in advance when JavaScript is entered to
an HTML page. This is done using the <script> tag.

The browser will use the <script> type="text/javascript"> and </script> to tell where JavaScript
starts and ends.

Consider this example:

<html>
<head>
<title>My Javascript Page</title>
</head>

<body>
<script type="text/javascript">
alert("Welcome to my world!!!");
</script>
</body>
</html>

The word alert is a standard JavaScript command that causes an alert box to pop up on the

76
screen. The visitor will need to click the "OK" button in the alert box to proceed.

By entering the alert command between the

<script type="text/javascript"> and </script> tags, the browser will recognize it as a JavaScript
command.

If we had not entered the <script> tags, the browser would simply recognize it as pure text, and
just write it on the screen.You can enter JavaScript in both the <head> and <body> sections of
the document.In general however, it is advisable to keep as much as possible in
the <head>section.

VARIABLES

Variables can be compared to small boxes with names.If you were to store 5 items, you might
have a box for each item. On each box you would write what is in it.

 The boxes would be your variables.- Places to store things.

 The name on the boxes would be the variable names. The ones you'd use when
referring to each of the boxes.
 And finally the items, would be the content of the variables. What is stored in the
boxes.

A variable is simply a place in the computer's memory to store information. All variables are
referred to by the unique name you assigned to them.

Consider this example:

<html>
<head>
<title>My Javascript Page</title>
</head>

<body>
<script>
myname="Peter";
document.write(myname);
</script>
</body>
</html>

This example would write "Peter" in the document.

Note that when you want text to be stored in a variable you need to put the text in " ".
The reason is that JavaScript uses " " to tell the difference between text and variables.

Look at this example to see the importance of this.

77
 <html>
<head>
<title>My Javascript Page</title>
</head>

<body>
<script>
Peter="my first name";
myname=Peter;
document.write(myname);
</script>
</body>
</html>

Try to predict the output of the example before reading on.

- In the first line, the text "my first name" is stored in the Peter variable.
- In the second line, the Peter variable is stored in the myname variable.
- Finally in line 3, the myname variable is written to the document.

The result is that "my first name" will be written on the page.

if and else

Sometimes JavaScript requires the ability to make distinctions between different possibilities.

For example, you might have a script that checks which browser the user arrives with. If it's
MSIE, a page specifically designed for that browser should be loaded, if it's Netscape another
page should be loaded.

The general syntax for if statements is:

if (condition) {action1} else {action2};

An example could be:

if (browser=="MSIE") {alert("You are using MSIE")}

else {alert("You are using Netscape")};

Again it is important to note that if is written as "if".

Using the capital "IF" would cause an error.

Also note that when comparing variables you will need to have two equals signs next to each
other (==).

If we wrote browser="MSIE" we would actually store "MSIE" in the variable called browser.

When you write browser=="MSIE" JavaScript knows that you want it to compare rather than

78
assign a value.

More complex if statements can be made by simply entering new if statements in the else part:

if (condition) {action1}
else {if (condition) {action2} else {action3};};

An example:

if (browser=="MSIE") {alert("You are using MSIE")}

else {if (browser=="Netscape") {alert("You are using Netscape")}
else {alert("You are using an unknown browser")};};

AND, OR & NOT

To further enhance your if statements you can use the so-called logical operators.And is written
as && and is used when you want to check if more than one condition is true.

Ex: If the basket contains egg and the basket contains bacon, we can have egg and bacon.

The syntax is: if (condition && condition) {action}

if (hour==12 && minute==0) {alert("it's noon")};

Or is written as || and is used when more than a one condition should result in the check being
true. (|| is achieved by using the shift key combined with the \ key)

Ex: If the basket contains milk or the basket contains water, we can have something to
drink.

The syntax is: if (condition || condition) {action}

if (hour==11 || hour==10) {alert("it's less than 2 hours till

noon")};

Not is written as ! and is used to invert the result.Ex: If not the basket contains egg or not the
basket contains bacon, we cant have egg and bacon.

The syntax is: if (!(condition)) {action}

if (!(hour==11)) {alert("it's more than 1 hour till noon")};

Functions

79
Instead of just adding JavaScript to the page and having the browser perform the tasks as soon as
the script is read, you might want your JavaScript to be performed only upon the detection of a
certain event.

For example, if you made a JavaScript code that changed the background color of the page when
the user clicked a button, then you would need to tell the browser, that the script should not be
performed right away when loaded.

To keep the browser from performing a script as soon as it is loaded you need to write the script
as a function.

JavaScript written into functions will not be performed until you specifically ask for it. This way
you gain complete control of the timing.

Look at this example of script lines written as a function:

<html>
<head>
<script>
function myfunction()
{
alert("Welcome to my world!!");
}
</script>
</head>

<body>
<form name="myform">
<input type="button" value="Hit me" onclick="myfunction()">
</form>
</body>
</html>

Click the button to see what the script in the example does:

If the line: alert("Welcome to my world!!"); had not been written within a function, it would
simply be performed as soon as the line was loaded.

But since we wrote it as a function, it was not performed until you hit the button.

The call of the function is in this line:

<input type="button" value="Click Here" onclick="myfunction()">

As you can see, we placed the button in a form and added the event onClick="myfunction()" to
the properties of the button.

The next page gives a detailed description of the different events you could use to trigger

80
functions.

The general syntax for a function is:

function functionname(variable1, variable2,..., variableX)

{
// Here goes the javascript lines for the function
}

The { and the } marks the start and end of the function.

A typical bug when entering JavaScript functions is to forget about the importance of capitals in
javascript. The word function must be spelled exactly
function. Function or FUNCTION would cause an error.

Furthermore, use of capitals matters in the name of the function as well. If you had a function
called myfunction() it would cause an error if you referred to it
as Myfunction(), MYFUNCTION() or MyFunction().

LOOPS
Imagine that you wanted a script to perform the same routine over and over again 50 times in a
row.

An example could be if you wanted a script to produce a table comparing temperatures in

Fahrenheit and Celsius.
The script should produce 50 lines in a table showing different temperatures according to the two
scales.

Instead of adding 50 almost equal lines in your script you could use loops to make the script
perform a task like this.

There are two different kinds of loops: for and while.

The for loop is used when you know in advance how many times the script should perform.
For example if you wanted it to create exactly 50 lines.

The while loop is used when you want the loop to continue until a certain condition becomes
true.
For example, if you wanted to make a table comparing Celsius and Fahrenheit, stepping 15
degrees for each row, and you wanted the table to contain values up to 1200 degrees of Celsius.

Below is a description of each of these two loops:

FOR LOOPS:
81
SYNTAX:
for
(variable=startvalue; variable<=endvalue;variable=variable+incrementfacto
r)
{
// Here goes the script lines you want to loop.
}

Enter a variablename where it says variable.

Enter the startvalue of the loop where it says startvalue.
Enter the endvalue of the loop where it says endvalue.
Enter the factor each loop should increment where it says incrementfactor.

Note: The incrementfactor could be negative if you wanted.

Furthermore the <= could be any comparing statement, ex. >, == or whatever.

EXAMPLE:

<html>
<head>
<title>Celsius-Fahrenheit Converter</title>
</head>

<body>
<table border=3>
<tr><td>CELSIUS</td><td>FAHRENHEIT</td></tr>
<script language="javascript">
for (celsius=0; celsius<=50; celsius=celsius+1)
{
document.write("<tr><td>"+celsius+"</td><td>"
+((celsius*9/5)+32)+"</td></tr>");
}
</script>
</table>
</body>
</html>

Result from this example.

82
CELCIUS FAHRENHEIT
0 32
1 33.8
2 35.6
3 37.4
4 39.2
5 41
6 42.8
7 44.6
8 46.4
9 48.2
10 50
11 51.8
12 53.6
13 55.4
14 57.2
15 59
16 60.8
17 62.6
18 64.4
19 66.2
20 68
21 69.8
22 71.6
23 73.4
24 75.2
25 77
26 78.8
27 80.6
28 82.4
29 84.2
30 86
31 87.8
32 89.6
33 91.4
34 93.2
35 95
36 96.8

83
37 98.6
38 100.4
39 102.2
40 104
41 105.8
42 107.6
43 109.4
44 111.2
45 113
46 114.8
47 116.6
48 118.4
49 120.2
50 122

WHILE LOOPS:
SYNTAX:
while (variable<=endvalue)
{
// Here goes the script lines you want to loop.
}

Enter a variablename where it says variable.

Enter the endvalue of the loop where it says endvalue.

Note: The <= could be anything that would fit the purpose ex. >, == or whatever.

EXAMPLE:

<html>
<head>
<title>Celsius-Fahrenheit converter</title>
</head>

<body>
<table border=3>
<tr><td>CELSIUS</td><td>FAHRENHEIT</td></tr>
<script language="javascript">
celsius=0;
while (celsius<=50)
{
document.write("<tr><td>"+celsius+

84
 "</td><td>"+((celsius*9/5)+32)+"</td></tr>");
celsius=celsius+1;
}
</script>
</table>
</body>
</html>

BREAK & CONTINUE

Two special commands can be used in loops: break and continue.

break simply breaks the loop and continues with what might follow after the loop.

An example would be if you had a loop calculate the squareroot of numbers decrementing from
50.

Since calculating the square root of a negative number is an illegal mathemathic operation you
would like the loop to end when the square root of zero had been calculated.

To do this you would add this inside your loop:

if (value==0) {break};

continue breaks the current loop and continues with the next value.

An example would be if you had a loop that divided a certain value with a factor of numbers
ranging from -50 to +50.

Since division by zero is an illegal mathemathic procedure the loop would look like this:

for (value=-50; value<=50; value=value+1)

{
if (value==0) {continue};
document.write((100/value)+"<br>");
}

ARRAYS
When working with more complex scripts you might face a situation in which you would have
many more or less similar variables. Instead of being forced to write a line for each operation
done to such a variable, you can use arrays to help you automate the process.

Consider this example:

Example 1 Example 2
value1=10; value=new Array;
value2=20; for (number=1; number<=100;

85
 value3=30;
....
here would go 96 similar number=number+1)
lines { value[number]=number*10};
....
value100=1000

In example 1 you would need to enter 100 lines to perform an operation on your variables.

In example 2 you only need to enter 3 lines no matter how many variables you have.

An array must be defined before referring to any of thevariables in it.

This is done using the syntax: variablename=new Array;

Replace variblename with the desired name of your array.

Note: new must be written in small letters and Array must start with a capital A.

As the example indicated, arrays become extremely powerful when used in combination with
loops.

However, you don't have to handle array variables in loops.

Single variables can be addressed with a syntax like this:

value[9]=170;

86