HTML & JavaScript

|
Presentation slides for
SED ± Division karROX
First Edition
|

ë | ë ava Script
Introduction to HTML Introduction to JavaScript

Overview of HTML Page Creation Java Script Syntax
Headings, Paragraphs & Breaks Basic Programming Constructs
Character Formatting Objects, Events and the Document
Lists Object Model
Images Alerts, Prompts and Confirms
Anchors URL¶s and Image Maps Form Validation
Tables Mouse Over Effects
Frames Pop--Up Windows
Pop
Forms
Java
Special Elements
Cascading Style Sheets

u

|
ë inear edia
?inear media is a term used to describe any media where there is a defined
beginning and a linear progression to the end. Forms of linear media such as
movies, audio and videotapes, and most books are organized with this
expectation. The World Wide Web, however, is organized very differently.
ë |permedia
|ypermedia is where the user simply selects the next item of interest and is
immediately transported to that new location
location.. A good example is an audio CD
where you can choose song 5 and listen to it almost immediately.
immediately. Contrast this
with an audiotape where you would have to scan through from your current
location on the tape to the beginning of the song.
song.
When this concept is applied to text you get hypertext, where by ÕClicking} on
a link or hotspot (hyperlink) you are immediately transported to a new
location within the same page or to a new page altogether.
altogether.

ë When you interlink a large number of pages of text on different computers all over the
world, you get a spider web-
web-like system of links and pages.
pages. This is known as the World
Wide Web ± a system whereby pages stored on many different web servers, connected to
the Internet, are linked together.
together.
ë The system is useful because all of the pages are created in the same format.
format. This format
or "language" is called |TM?, (|ypertext Markup ?anguage) a subset of an international
standard for electronic document exchanged called SGM? (Standard Generalized Markup
?anguage)..
?anguage)
ë at is | arkup?
ë |TM? is a set of logical codes (markup) in parentheses that constitute the appearance of a
web document and the information it contains.
E.g. · This
This text would appear bold in the browser·
browser·
The codes are enclosed by less than "·
"·", and greater than " "" brackets. These
bracketed codes of the markup are commonly referred to as tags. |TM? codes
are always enclosed between brackets and are not case- case-sensitive; meaning, it does
not matter whether you type them in upper case or lower case. |owever, tags are
easier to recognize in a web document if they are capitalized.

Most elements have an opening element (tag) and a closing element (tag) distinguished
by the "/" inside the "<" opening bracket.
bracket.
The first word or character that appears inside the "<" opening bracket is called the
element.. An element is a command that tells the browser to do something, such as
element
<FONT>..
<FONT>
Words that follow the element and are contained inside the ">" bracket of the opening tag
are called attributes.
attributes. Attributes are not repeated or contained in the closing element (tag).
(tag).
Confused? Attributes are another way of describing the element¶s properties. properties. For
instance, a t-shirt can have several properties or "attributes" ± the t-shirt¶s color, size,
material etc.
etc. are all attributes.
attributes.
Attributes that appear to the right of the element are separated by a space, and followed
by an equal sign.
sign. The value of the attribute is contained in quotes.
quotes. In the following
example the element is FONT, the attribute is CO?OR, and the value of that attribute is
B? E E..
E.g. <FONT CO?OR="B? E">This text would be blue</FONT>
Most |TM? elements have more than one attribute.
attribute.
E.g. <FONT CO?OR="B? E" SIZE="+ SIZE="+11">This text would be blue and one size larger
than normal</FONT>

Document Structure
The way a document is marked up with elements and their attributes is according to a
Document Type Definition (DTD).
(DTD). These are the rules that govern the way in which a
document can be marked up. up.
The authoritative source for information about |TM? and the |TM? DTD is the World
Wide Web Consortium (W3 (W3C) at http:
http://www.
//www.w3.org
org.. The World Wide Web Consortium
is a not-
not-for-
for-profit organization that coordinates the evolution of the Web.
Web. It includes the
Internet Engineering Task Force, the group of people who make recommendations for
new markup
markup..
Ñ asic Document
An element called |TM? surrounds the whole document.
document. This element contains two sub-
sub-
elements, |EAD and BODY.
BODY. These elements are required to form any |TM? document
document..

Structure of |
<html>
<head><title>Document Title</title></head>
<body>
«..
</body>
</html>
<|TM?>
<|EAD> has sub sub--elements that define header material:
material:
<TIT?E> document title.title. The title of your document is what appears in a web browser¶s
Favorite or Bookmark list. list. Your document¶s title should be as descriptive as possible.
possible.
Search engines on the Internet use the document¶s title for indexing purposes.
purposes. </TIT?E>
<BASE> can be used to record the document's location in the form of a R? R?.. The R?
recorded here may be used to resolve a relative R? (necessary if the document is not
accessed in its original location).
location). </BASE>

<ISINDEX> indicates to the browser that the document is an index document.
document. This is
used only if the document is on a server that does indexing
indexing.. </ISINDEX>
<?INK> indicates a relationship between this document and some other object on the
Web.. </?INK>
Web
<META> provides information such as the page¶s keywords and description that
appears in |TTP headers.
headers. </META>
<SCRIPT> contains either JAVA Script or VB Script </SCRIPT>
<STY?E> contains information used by cascading style sheets </STY?E>
</|EAD>
<BODY> the remaining |TM? elements are contained within these tags. tags.
</BODY>
</|TM?>

u

| u

u oosing a ext Editor
There are many different programs that you can use to create web documents documents.. Text
editors are basic word processing programs without all of the "bells and whistles" of fullfull--
blown word processors
processors.. The advantage of using a text editor is that the files are created
and saved with few if any invisible formatting codes, which could drastically effect your
document when, saved as a web page and displayed in a browser.browser. For this reason, text
editors can be used quite effectively to create web documents
documents..
|TM? Editors enable users to create documents quickly and easily by pushing a few
buttons.. Instead of entering all of the |TM? codes by hand, these programs will generate
buttons
the |TM? source code¶ for you you.. |TM? Editors are excellent tools for experienced web
developers;; however, it is important that you learn and understand the |TM? language
developers
so that you can edit code and fix bugs¶ in your pages
pages..
The current versions of both Microsoft Word and Corel WordPerfect also have the
abilities to create web pages
pages..
For this course, we will focus on using the standard Microsoft Windows text editor,
NotePad.. You can apply the same concepts using any text editor on any platform.
NotePad platform.

Starting NotePad
NotePad is the standard text editor that comes with both 16 and 32-
32-bit versions of the Microsoft
Windows operating system.
system. To start NotePad in Windows 95 follow the steps below
below::
ulick on t e "Start" button located on our indows task bar bar..
ulick on "Programs" and t en click on t e director menu labeled "Ñccessories".
"Ñccessories".
?ocate the shortcut called "NotePad" and click the shortcut once.
once.
In NotePad you would start with:
with:
<|TM?>
<|EAD>
<TIT?E></TIT?E>
</|EAD>
<BODY>
</BODY>
</|TM?>

At this point your page has a |EAD and a BODY section inside the |TM? tags tags.. You
also have a TIT?E element, inside the |EAD element, which you should fill in in.. The text
in the TIT?E element is used by the surfer¶s browser and also by search engines.
engines.
The TIT?E of your document appears in the very top line of the user¶s browserbrowser.. If the
user chooses to "Bookmark" your page or save as a "Favorite";
"Favorite"; it is the TIT?E that is
added to the list.
list.
The text in your TIT?E should be as descriptive as possible because this is what many
search engines, on the Internet, use for indexing your site
site..
Setting Document Properties
Document properties are controlled by attributes of the BODY element

element.. For example,
there are color settings for the background color of the page, the document¶s text and
different states of links.
links.

ë

uolor uodes

Colors are set using "RGB" color codes,
which are, represented as hexadecimal

values.. Each 2-digit section of the code
values

represents the amount, in sequence, of red,
green or blue that forms the color.
color. For
example, an RGB value with 00 as the first
two digits has no red in the color . See the

chart below for a listing of some of the
commonly used colors
colors::
!"
# $
% #
"" #&'(
)) *
+ &,
-

The BODY Element
The BODY Element of a web page is an important element in regards to the page¶s
appearance.. This element contains information about the page¶s background color, the
appearance
background image, as well as the text and link colors.
colors.
If the BODY Element is left blank, web browsers will revert to their default colors.
colors. In
older browsers, if the BODY element is left blank, the page¶s background color will be a
light gray.
gray. The newer browsers, IE 4+ and Netscape 4+, default to using the client¶s
Windows colors settings.
settings.
It is very common to see web pages with their background color set to white or some
other color.
color. To set your document¶s background color, you need to edit the <BODY>
element by adding the BGCO?OR attribute
attribute.. The following example would display a
document with a white background color:
color:
<BODY BGCO?OR="#FFFFFF"></BODY>
TEXT Color
The TEXT attribute is used to control the color of all the normal text in the
document.. This will affect all of the text within the document that is not being
document
colored by some other element, such as a link.
link.

The default color for text is black.
black. The TEXT attribute would be added as follows:
follows:
<BODY BGCO?OR="#FFFFFF" TEXT="#FF TEXT="#FF0000 0000"></BODY>
"></BODY>
In this example, the document¶s page color is white and the text would be red. red. As
suggested earlier, it is important to ensure that your document¶s text is a color that will
stand out from your background color.
color.
?INK, V?INK, and A?INK
These attributes control the colors of the different link states:
states:
?INK - initial appearance ± default = Blue
V?INK - visited link ± default = Purple
A?INK - active link being clicked ± default = Red
Many web developers will set the link colors of their documents to flow with the color
scheme of the site.
site. The format for setting these attributes is
is::
<BODY BGCO?OR="#FFFFFF" TEXT="#FF
TEXT="#FF0000 0000"" ?INK="#0000
?INK="# 0000FF"
FF"
V?INK="#FF00
V?INK="#FF 00FF"
FF" A?INK="FFFF
A?INK="FFFF00 00">
">
The results of the above BODY element would be a white background with links being
blue, visited links as magenta and active links colored in yellow.
yellow.

sing Image Backgrounds
The BODY element also gives you the ability of setting an image as the document¶s
background.. Background images are "tiled" in the web browser
background browser;; which means that they
are replicated and positioned below and beside each other until the browser screen is
filled.. To create a professional look, images must be seamless¶
filled seamless¶.. Meaning that when the
copies are placed below and beside each other the seams are invisible.
invisible.
sing background images can be very effective if used properly
properly.. For instance, you may
want your company¶s logo as your background or you could also create a border
background so that it appears as though your page is divided into two columns. columns. A
background image must be either in the form of a .gif or .jpg file.
file.
An example of a background image¶s |TM? code is as follows:
<BODY BACKGRO ND="logo.gif" BGCO?OR="#FFFFFF">
In this example, we have set the document¶s background image to logo.gif¶. We have
also added the BGCO?OR attribute as well so that the browser window will have a white
background during the process of loading the background image.

Previewing Your ork
ë Once you have created your basic starting document and set your document properties
it is a good idea to save your file
file.. Since you are publishing for the Internet, you must
save your files in a format that web browsers can interpret.
interpret. A standard web page¶s file
extension is usually ".htm"htm".. Some developers name their files with the extension
".html" but this format is not compliant on all platforms.
platforms. In our examples we will use
the .htm file extension.
extension.
ë To save a file, in NotePad, follow these steps:
steps:
ocate and click on t e menu called "File .. .."
"
Select t e option under File enu labeled "Save Ñs «"
In t e "File Name" text box, tpe in t e entire name of our file (including t e
extension . tml)
tml).. i.e. index.
index. tml
ë In NotePad you have to type the entire filename including its extension.
extension. If you do not
type in the file¶s extension, NotePad will assume that you want your document to be a
text document with the extension .txt. txt.

Edit, Save & View ucle
ë As you continue to add to your web document(s), it is important to preview your work in
a browser such as Netscape Navigator or Microsoft Internet Explorer.
Explorer.
ë To preview your work, open a web browser and do the following: following:
In Netscape Navigator:
Navigator:
ulick on t e menu labeled "File «"
ocate t e menu option, "Open Page « "

In Microsoft Internet Explorer:
Explorer:
± Click on the menu labeled "File «"
± ?ocate the menu option, "Open «"
In t e "Open Page" dialog box, click on t e "u oose File «" button and
locate our web document
document.. Ensure t at t e "Navigator" button option is
clicked as ou want to preview t e work in t e browser window
window..
Once ou ave c osen t e file click on "Open"

In t e "Open" dialog box, click on t e " rowse «" button and locate our
web document. ulick "OK" once ou ave selected our file.
Once you have opened and previewed your work in a web browser, you can continue
working by adding to and editing the html file, saving the file with the changes and
then viewing the changed file.
You will be more productive if you do not close your web browsers; simply minimize
them and continue working. When you want to preview your work again:
save our tml file¶s c anges
switc to one of our browsers
old down t e [S|IF ke
in Netscape, click on t e button labeled "REOÑD"
in IE click on t e button labeled "REFRES|"
The web browser will load the same document but with the new revisions. This process
is the Edit, Save and View cycle

u
|

, ·|
| , ·|
·|
·|
Inside the BODY element, heading elements |1 through |6 are generally used for
major divisions of the document.
document. |eadings are not mandatory.
mandatory. |eadings are permitted to
appear in any order, but you will obtain the best results when your documents are
displayed in a browser if you follow these guidelines:
guidelines:
| s ould be used as t e ig est level of eading, | as t e next ig est, and
so fort .
You s ould not skip eading levels
levels e.g., an | s ould not appear after an |,
unless t ere is an | between t emem..
The size of the text surrounded by a heading element varies from very large in an <|1
<|1>
tag to very small in an <|6
<|6> tag.
tag.
2
,, ·P ·P
2
Paragraphs allow you to add text to a document in such a way that it will automatically
adjust the end of line to suit the window size of the browser in which it is being
displayed. Each line of text will stretch the entire length of the window.

If you try to type two words separated by five spaces, only one space will display in the
browser
Browsers ignore multiple spaces between words, within paragraphs and within tables.
tables. If
you have areas where you would like extra spaces or you want your empty paragraphs to
give you extra line spacing, you will want to insert a NBSP (non(non--breaking space).
space). A
NBSP is an invisible character that takes up one space.
space.
To insert a NBSP type

, · R
£ ,
?ine breaks allow you to decide where the text will break on a line or continue to the end
of the window. There may be instances where you want the text to appear on the next
line. Example: a return address - contained in one Paragraph but on multiple lines or text
in a |eader, such as a title for the document.
You can insert a Forced ?ine Break <BR>
A <BR> is an Empty Element, meaning that it may contain attributes but it does not
contain content. The <BR> element does not have a closing tag. The closing tag, </BR>,
is not required as this element marks a position and does not contain content.

The <BR> element uses one attribute ± C?EAR which can have a value of ?EFT,
RIG|T or A??. The C?EAR attribute forces a line down; if an image is located at the
page¶s left margin, the clear ?EFT attribute will move the cursor down to the first line
that is cleared at the left margin. The same applies with the option of the clear RIG|T
attribute. If an image is at either the left or right margins, the clear A?? attribute will
force a line break until both margins are cleared.
Horizontal Rule,
Rule, <|R>
The <|R> element causes the browser to display a horizontal line (rule) in your
document. This element does not use a closing tag, </|R>. Simply type <|R> to insert a
horizontal line (rule) element into your document.

Ke attributes for use wit t e ·|R element
Ñ

÷ , . )/" ()/"
01 . )/" $2

)
."

3-÷1, . "

" . 4 5
6 3 " 46.7 7

5
-6- ""
. 4 , 8 "
5

u
u

!
old, Italic and ot er u aracter Formatting Elements
ë <FONT SIZE="+
SIZE="+22">Two sizes bigger</FONT> Text size can be modified with the font
element and the size attribute.
attribute. The size attribute can be set as an absolute value from 1 to
7 or as a relative value using the "+" or "-" sign
sign.. Normal text is size 3.
ë <B> Bold </B>
ë <I> Italic </I>
ë < > nderline </ > (Not recommended, as links are underlined.
underlined.)
ë Color = #RRGGBB" The CO?OR attribute of the FONT element element..
ë E.g. <FONT CO?OR="#RRGGBB">this text has color</FONT>
ë <PRE> Preformatted </PRE> >Text enclosed by PRE tags is displayed in a mono- mono-
spaced font.
font. Spaces and line breaks are supported without additional elements or special
characters..
characters
ë <EM> Emphasis </EM> browsers usually display this as italics. italics.
ë <STRONG> STRONG </STRONG> browsers display this as bold. bold.
ë <TT> TE?ETYPE </TT> Text is displayed in a mono- mono-spaced font.
font.
ë <CITE> Citation </CITE> represents a document citation.citation.

Sample uoding
ë <P><FONT SIZE="+1">One Size ?arger</FONT> - Normal -
ë <FONT SIZE="-
SIZE="-1">One Size Smaller</FONT><BR>
ë <B>Bold</B> - <I>Italics
<I>Italics</I>
</I> - < > nderlined
nderlined</
</ > -
ë <FONT CO?OR="#FF0000">Colored</FONT><BR>
ë <EM>Emphasized
<EM> Emphasized</EM>
</EM> - <STRONG>Strong</STRONG> -
ë <TT>Tele Type</TT><BR>
ë <CITE>Citation
<CITE> Citation</CITE></P>
</CITE></P>
Netscape Navigator Sample

Ñlignment
Some elements have attributes for alignment (A?IGN) e.g. |eadings,
Paragraphs and |orizontal Rules.
Rules. The three alignment values are: are: ?EFT,
RIG|T, CENTER.
CENTER.
Alignment of many other elements is not well supported, meaning that you
can¶t rely on getting the desired results.
results. Proper positioning of all of the
components in a web page can be achieved by using other elements to control
alignment::
alignment
<DIV A?IGN="
A?IGN="value
value"></DIV>
"></DIV> Represents a division in the document and can
contain most other element types.
types. The alignment attribute of the DIV element is
well supported.
supported.
<CENTER></CENTER> Will center elements.
elements.
<TAB?E></TAB?E> Inside a TAB?E, alignment can be set for each
individual cell.
cell.

SPEuIÑ u|ÑRÑu ERS
÷

÷

)" 9 ): ; " 9:
"" 9 ": ""; " 9:

" 9
: ;< ")
9<"):

) 9
): 9:
.
9.
$': " 9:
.
. 9.
$(: " 9 :

Ñdditional u aracter Formatting Elements
<STRIKE>>strike-through text </STRIKE>
<STRIKE>>strike-
<BIG> places text in a big font </BIG>
<SMA??> places text in a small font <SMA??>
<S B> places text in subscript position </S B>
<S P> places text in superscript style position</S P>
Example 1:
<P><STRIKE> strike-
strike-through text </STRIKE><BR>
<BIG> places text in a big font </BIG><BR>
<SMA??> places text in a small font </SMA??><BR>
<S B> places text in subscript position </S B> Normal
<S P> places text in superscript style position</S P><BR>
</P>

Results 1: (viewed in Navigator )
These special formatting elements are used for technical documentation applications:
<DFN> defining instance of the enclosed term </DFN>

<CODE> used for extracts of program code </CODE>>
<SAMP> used for sample output from programs, scripts, etc. </SAMP>
<KBD> used for text to be typed by the user </KBD>
<VAR> used for variables or arguments to commands </VAR>

Example 2:
<P><DFN> defining instance of the enclosed term </DFN><BR>
<CODE> used for extracts of program code </CODE><BR>
<SAMP> used for sample output from programs, scripts, etc. </SAMP><BR>
<KBD> used for text to be typed by the user </KBD><BR>
<VAR> used for variables or arguments to commands </VAR><BR></P>
Results 2: (viewed in Navigator )

<BASEFONT>
sed to set the base font size.
size. The size attribute is an integer value ranging from 1 to 7. The base
font applies to the normal and preformatted text but not to headings, except where these are
modified using the FONT element with a relative font size.size.
</BASEFONT>
<B?OCKQ OTE>
This element is used to enclose block quotations from other works or to indent sections of a
document.. (It indents from both sides in a browser) This element can also contain most other
document
formatting elements such as |eadings, paragraphs, tables, etc.etc.
</B?OCKQ OTE>
<ADDRESS>
The address element specifies information such as authorship and contact details for the current
document.. There is no support for an alignment attribute with the <ADDRESS> element
document element.. You will
need to use some other method if you want the address displayed differently from left aligned.
aligned.
</ADDRESS>

Example 3:
<P><B?OCKQ OTE>This is the first day of the rest of your life, make it
count.</B?OCKQ OTE>
<CENTER><ADDRESS>180 Attwell Dr. Suite 130<BR>Toronto, ON<BR>M9W
6A9</ADDRESS></CENTER></P>
<|6>|eading 6</|6>
<P>Paragraph 6, ... </P>
Results 3:
This is the first day of the rest of your life, make it count.
180 Attwell Dr. Suite 130
Toronto, ON
M9W 6A9
|eading 6
Paragraph 6, ...

u
"

ist Elements
|TM? supplies several list elements. Most list elements are composed of one or more <?l> (list
item) elements
?: nordered ?ist.
Items in this list start with a list mark such as a bullet. Browsers will usually change the list mark in
nested lists.
< ?>
<?I>?ist item...</?I>
</ ?>
You have the choice of three bullet types: Disc (default), Circle, Square. These are
controlled in Netscape Navigator by the "TYPE" attribute for the < ?> element.
< ? TYPE="SQ ARE">
</ ?>

O? : Ordered ?ist?ist..
Items in this list are numbered
automatically by the browser.
browser.
<O?>
<?I>?ist item...
item...</?I>
</?I>
<?I>?ist item...
item...</?I>
</?I>
<?I>?ist item...
item...</?I>
</?I>
</O?>
You have the choice of setting the TYPE Y ÷
Attribute to one of five numbering
styles..
styles $ <
<" $7(7 7=
6 ) 7<7
7=
>)) ) 777=
6 777=
>)) 7 7 7=

You can also specify a starting number for an ordered list.
list. The value of the START Attribute is
always an Arabic number (1,2,3,4«). Changing the starting number may be useful in a situation
where your list items are separated by an image or by text unrelated to the list.
list.
<O? TYPE="i">
</O?>
<P> nrelated text ... </P>
<O? TYPE="i" START="3">
</O?>
D Definition ist.
This kind of list is different from the others. Each item in a D? consists of one or more
Definition Terms (DT elements) , followed by one or more Definition Descriptions (DD
elements).

<D?>
<DT>|TM?</DT>
<DD>|yper Text Markup ?anguage</DD>
<DT>Dog</DT>
<DD>A human's best friend!</DD>
</D?>
Nesting ists
You can nest lists by inserting a ?, O?, etc., inside a list item (?I).

!
< ? TYPE="SQ ARE">
<?I>?ist item...
<O? TYPE="i" START="3">
</O?>
</?I>
</ ?>
ë

u
# !
!
Supported Image Formats
GIF: Graphic Interchange Format uses a maximum of 256 colors, and uses combinations
GIF:
of these to create colors beyond that number.
number. The GIF format is best for displaying
images that have been designed using a graphics program, like logos, icons, and
buttons..
buttons
GIF images come in two different versions and have some extra functionality that
JPEGs do not
not.. You can save GIF images in GIF 87 or GIF 89 89aa format.
format. GIF 89 89aa is
newer and has the following features that GIF 87 and JPEG files do not:not:
Interlacing:: if you save a GIF 89
Interlacing 89aa image as interlaced, the browser will be able to
display the image as it loads, getting gradually crisper and clearer until it is finished.
finished.
Interlaced GIFs have slightly larger file sizes than non-
non-interlaced GIFs, so you will
have to decide whether the interlacing effect is worth the extra download time for
your images
images..

ë Transparency: with GIF 89
Transparency: 89aa format images you can set a single color to be
transparent, that is, it will allow the background color or image to show through it it..
Transparency is most commonly used to make the rectangular background canvas of
an image invisible;
invisible; this feature can be very effective in Web page design.
design.
ë Animated GIFs:
GIFs: GIF 89 89aa images can also be animated using special software.
software.
Animated GIF images are simply a number of GIF images saved into a single file
and looped.
looped. Netscape Navigator and Microsoft Internet Explorer can both display
animated GIFs, but many other browsers cannot, and may not be able to display
even the first image in the loop.
loop. se animated GIFs with caution.
caution.
JPG, JPEG
JPEG:: Joint Photographic Expert Group, is a good format for photographs
because JPEG files can contain millions of colors.
colors.
JPEG images don't give you the option of including transparency or of interlacing
images, but they do allow you to specify the degree of file compression so that you
can create a balance between image quality and file size.
size.

imited Support or Non-
Non-Supported Image Formats
The following image formats are supported by some client computers but not all,
and as such are not recommended to be included in your |TM? pages pages.. You should
first convert them to a supported format using a graphics editor, such as Corel Photo
Paint or Adobe Photoshop
Photoshop..
ë PNG:: Portable Network Graphics, is good for combinations of text and graphics
PNG
within one image.
image. PNG permits truecolor images, variable transparency, platform-
platform-
independent display, and a fast 2D interlacing scheme.
scheme. Currently only supported by
Internet Explorer.
Explorer.
ë BMP:: MS Windows BitMaP
BMP
ë TIFF:: Tagged Image File Format
TIFF
ë PCX:: Originally developed by ZSOFT for its PC Paintbrush program, PCX is a
PCX
graphics file format for graphics programs running on PCs.
PCs.

Inserting Images
<IMG></IMG> This element defines a graphic image on the page. page. It is typically
used for inline images
Image File (SRC):
(SRC): This value will be a R? (location of the image) E.g.
http:://www.
http //www.domain
domain..com/dir/file.
com/dir/file.ext or /dir/file.
/dir/file.ext.
ext.
Alternate Text (A?T):
(A?T): This is a text field that describes an image or acts as a label.
label. It
is displayed when people turn the graphics off in their browsers, or when they
position the cursor over a graphic image (now supported in most browsers).
browsers). It is also
helpful as an accessibility feature.
feature.
Alignment (A?IGN):
(A?IGN): This allows you to align the image on your page page.. The options
include Bottom, Middle, Top, ?eft, Right, TextTop, ABSMiddle, Baseline, and
ABSBottom..
ABSBottom
Width (WIDT|):
(WIDT|): is the width of the image in pixels.pixels. This value can be obtained
from a graphics program or can be left unspecified.
unspecified.
|eight (|EIG|T):
(|EIG|T): is the height of the image in pixels.
pixels. This value can be obtained
from a graphics program or can be left unspecified.
unspecified.

Border (BORDER):
(BORDER): is for a border around the image, specified in pixels.
pixels. If you use
an image in an anchor you will want to set the border value to zero so that it is not
outlined..
outlined
Additional Image Attributes
|SPACE:: is for |orizontal Space on both sides of the image specified in pixels.
|SPACE pixels. A
setting of 5 will put five pixels of invisible space on both sides of the image.
image.
VSPACE:: is for Vertical Space on the top and bottom of the image specified in
VSPACE
pixels.. A setting of 5 will put five pixels of invisible space above and below the
pixels
image..
image

u
$ %
&'!
ink Elements
It is normal for |TM? documents to contain links to other documents, which can be
located anywhere on the Web.
Web. These links are provided by R?s ( niform
Resource ?ocators) , which give the location and filename of a document, and the
method used to access it
it..
The following elements represent links to other documents:

documents:
<A |REF=" R?"> </A> </A>:: The |REF attribute of the anchor element specifies a
R?.. If this attribute has a value, the contents of the <A> </A> element will be
R?
highlighted when the document is displayed in a browser window, and ÕClicking} on
this content will cause the browser to attempt to open the file specified by the R?
R?..
E.g.<A |REF=http
|REF=http:://www.
//www.karrox
karrox..com>XtraNet niversity</A>
niversity</A>.. In this example
the text "XtraNet niversity" represents the contents that would be highlighted as a
link to the file named as the value of the |REF
|REF..

ink pes
ere are t ree major tpes of links
Internal inks are links within a document. They help in the navigation of large
documents.
?ocal ?inks: are links to documents on the local web server. ?ocal links can be the
full R? (Complete e.g. http://www.yourdomain.com/sales/report.htm) or partial
(Relative to your current directory e.g. /sales/report.htm).
External inks links to pages on other web servers. External links are always the
full R?.

èRs - èniform Resource ocators
A R? is a standard way of referencing a Service, a |ost name, a Port, and a
Directory--path.
Directory path.
Service::// |ost name : Port / Directory-
Service Directory-path
E.g. http:
http://www.
//www.1stvirtual
stvirtual..com:
com:80/default
80/default..htm
Not all of these components appear in each R?, as you will see when you learn
about the different types of R?s for different services.
services. But the preceding example
is a good general guide.
guide.
|TTP ± |yperText Transport Protocol
E.g. http:
http://www.
//www.1stvirtual
stvirtual..com/default.
com/default.htm
e tpe of service is identified as ttp ttp.. It is t e standard protocol for
linking to web pages wit multimedia content. content.
e |ost name is www, in t e domain stvirtual, in t e zone com (t at
identifies it as a èS commercial site.
site.)
default
default.. tm is t e actual web pagepage..

FTP ± File Transfer Protocol
E.g. ftp:
ftp://ftp.
//ftp.1stvirtual.
stvirtual.com/prizes/brkbrk.
com/prizes/brkbrk.wav
e tpe of service is identified as ftp. ftp. is service is used to create links to
files to be downloaded from ftp servers servers..
e |ost name is ftp.ftp.stvirtual
stvirtual..com.
com.
e subdirector is prizes.
prizes.
e file is brkbrk.
brkbrk.wav
ë News ± News Groups
ë E.g. news:
news:alt.
alt.internet.
internet.services
e tpe of service is identified as news, for t e èsenet newsgroup service service..
e newsgroup is alt alt..internet.
internet.services.
services.
ë This will invoke a clients newsreader program. program.
ë Gopher
ë E.g. gopher:
gopher://owl.
//owl.trc.
trc.purdue.
purdue.edu/
e tpe of service is identified as gop er. er. ( a predecessor to t e orld ide
eb )
e |ost name is owl.owl.trctrc..perdue.
perdue.edu
edu..

E-mail ± Electronic ail
E.g. mailto:
mailto: webmaster@1
webmaster@1stvirtual.
stvirtual.com
e tpe of service is identified as t e mail client program.
program. is tpe of link
will launc t e users mail client.
client.
e recipient of t e message is webmaster@
webmaster@stvirtual
stvirtual..com
elnet ± Remote erminal Emulation
E.g. telnet:
telnet://media.
//media.mit.
mit.edu
e tpe of service is identified as t e telnet client program.
program.
The |ost name is media.
media.mit.
mit.edu.
edu.
Internal inks
?inks can also be created inside large documents to simplify navigation.
navigation. Today's
world wants to be able to get to the information quickly, and move around easily.easily.
Internal links can help you meet these goals.
goals.

Select some text at a place in t e document t at ou would like to create a
link to, t en add an anc or to link to like t is
is
<A NAME="bookmark_name">Book Mark</A>
The NAME attribute of an anchor element specifies a location in the document that
we will link to shortly.
shortly. All NAME attributes in a document must be unique.
unique.
Next select t e text t at ou would like to create as a link to t e location
created above.
above. Ñdd t e following anc or around t e text link.
link.
<A |REF="#bookmark_name">Goto Book Mark</A>
The surfer will only see the link created in step two, they will not see the anchor
created in step one.
one.

Image Maps
Image maps are images, usually in gif format that have been divided into regions;
regions;
clicking in a region of the image causes the web surfer to be connected to a new
R?.. Image maps are a graphical form of creating links between pages.
R? pages.
There are two types of image maps:
maps:
client
client--side
server
server--side
Both types of image maps involve a listing of co
co--ordinates that define the mapping
regions and which R?s those co co--ordinates are associated with.
with. This is known as
the map file.
file.

Server--side Image aps
Server
Server-side image maps (called ISMAP) involve a separate map file that is linked to
Server-
the image by a program running on a Web server. Server-
Server-side image maps are one of
two flavors NCSA - National Center for Supercomputer Applications or CERN -
Conseil European pour la Recherche Nuc?aire.
<A |REF="http://sitename/picture.map">
<IMG ISMAP SRC="Picture.gif" BORDER=0>
</A>
ulient--side Image aps

ulient
Client-side image maps ( SEMAP) use a map file that is part of the |TM?
Client-
document (in an element called MAP), and is linked to the image by the Web
browsers.

<IMG SRC="Picture.gif" SEMAP="#map1">
<MAP NAME="map1">
<AREA S|APE="RECT" COORDS="9,120, 56,149" |REF="whatever.htm">
<AREA S|APE="RECT" COORDS="100,200, 156,249" |REF="wherever.htm">
</MAP>

u
( )*
)*
ables
The <TAB?E> </TAB?E> element has four sub sub--elements; Table Row <TR></TR>,
Table |eader <T|></T|>, Table Data <TD> </TD>, and Caption <CAPTION>
</CAPTION>. The Table Row elements usually contain Table |eader elements or
Table Data elements. The Table |eader and Table Data elements can contain several
of the body elements, which allows for rich formatting of the data in the table. A
brief |TM? code sample follows:
<TAB?E BORDER="1">
<TR>
<T|>Column 1 |eader</T|>
</TR>
<TR>
<TD>Row 1 - Col 1 </TD>
</TR>

<TR>
</TR>
<TR>
</TR>
</TAB?E>
ë

$; $ $; (
(; $ (; (
; $ ; (

able Ñttributes
uolor Some browsers support background colors in a table.

uolor table. The color you
select will be expressed as a hexadecimal red-
red-green-
green-blue value.
value. You can enter this
value directly or you can enter one of the standard Windows color names.
names. (these
color names are currently supported only by Microsoft Internet Explorer).
Explorer).
idt you can specify the table width as an absolute number of pixels or a
percentage of the document width.
width. The width corresponds to the WIDT| attribute of
the TAB?E element.
element. You can set the width for table cells as well.
well.
order the lines that form the boundary of each table cell when the file is displayed
order
in a browser.
browser. You can choose a numerical value for the border width, which
specifies the border in pixels, or 'BORDER' (causing the browser to draw the default
border).. The table border corresponds to the BORDER attribute of the TAB?E
border)
element.. A setting of BORDER="0
element BORDER="0" will make the border disappear.
disappear.
Some browsers do not draw borders around empty table cells. cells. You may want to
insert a NBSP in each cell when you create the table so that each cell will display
border and background color.
color.

CellSpacing: Cell Spacing represents the space between cells and is specified in
CellSpacing:
pixels..
pixels
CellPadding:: Cell Padding is the space between the cell border and the cell contents
CellPadding
and is specified in pixels.
pixels.
Align:: tables can have left, right, or center alignment.
Align alignment. The alignment attribute of the
<TAB?E> is not well supported and you will want to use <DIV> or <CENTER> to
control the position of your table in your document
document..
Background:: Background Image, will be tiled in Internet Explorer 3.0 and above.
Background above.
BorderColor:: The color of the border around the table.
BorderColor table. This is supported properly by
Navigator 4.0, and Internet Explorer 3.0 and above.
above.
BorderColor?ight:
BorderColor?ight: ?ight color used to outline two sides of a cell or the table, only
supported in Internet Explorer 2.0 and above.
above.
orderuolorDark Dark color used to outline two sides of a cell or the table, only
orderuolorDark
supported in Internet Explorer 2.0 and above.
above.

able uaption
A Table caption allows you to specify a line of text that will appear centered above
or below the table. This can act like a title for the table.
<TAB?E BORDER="1" CE??PADDING="2">
<CAPTION A?IGN="BOTTOM">?abel for my Table</CAPTION>
<TR>
The caption element has one attribute A?IGN that can be either TOP (above the
table) or BOTTOM (below the table). You can use standard character formatting
codes inside the CAPTION element.

able |eader
Table Data cells are represented by the TD elementelement.. Cells can also be T| (Table
|eader) elements which results in the contents of the Table |eader cells appearing
centered and in bold text.
text.
If you simply wish to bold the text, we suggest that you insert a B or STRONG
element inside the table cell(s) instead of changing the table cell element.
element.
Table Data and Table |eader Attributes
Colspan:: Specifies how many cell columns of the table this cell should span.
Colspan span.
Rowspan:: Specifies how many cell rows of the table this cell should span.
Rowspan span.
Align:: cell data can have left, right, or center alignment.
Align alignment.
Valign:: cell data can have top, middle, or bottom alignment.
Valign alignment.
Background:: Background Image, will be tiled in Internet Explorer 3.0 and above.
Background above.
BGColor:: Some browsers support background colors.
BGColor colors. The color you select will be
expressed as a hexadecimal red-
red-green-
green-blue value.
value.

Width: you can specify the width as an absolute number of pixels or a percentage of
the document width.
|eight: you can specify the height as an absolute number of pixels or a percentage
of the document height.
A table example using ROWSPAN and CO?SPAN.
Notice that in the case of the CO?SPAN that there is only one TD tag set. In the
case of the ROWSPAN, the row below is less one TD tag set.
<TAB?E BORDER="1" CE??PADDING="2">
<CAPTION A?IGN="BOTTOM">?abel for my Table<CAPTION>
<TR>
</TR>
<TR>
<TD CO?SPAN="2">Row 1 - Col 1 </TD>
</TR>
<TR>
<TD ROWSPAN="2">Row 2 - Col 1 </TD>

</TR>
<TR>
</TR>
</TAB?E>

u
+
!
Frames
A framed page is actually made up of multiple |TM? pages. There is one |TM?
document that describes how to break up the single browser window into multiple
windowpanes. Each windowpane is filled with an |TM? document.
For example to make a framed page with a windowpane on the left and one on the
right requires three |TM? pages. Doc1.html and Doc2.html are the pages that
contain content. Frames.html is the page that describes the division of the single
browser window into two windowpanes.

Frame Page Ñrc itecture
A <FRAMESET> element is placed in the |TM? document before the <BODY> element. The
<FRAMESET> describes the amount of screen real estate given to each windowpane by
dividing the screen into ROWS or CO?S. The <FRAMESET> will then contain <FRAME>
elements, one per division of the browser window.
<|TM?>
<|EAD>
<TIT?E>Framed Page<TIT?E>
</|EAD>
<FRAMESET CO?S="23%,77%">
<FRAME SRC="doc1.htm" NAME="left_pane" SCRO??ING="NO">
<FRAME SRC="doc2.htm" NAME="right_pane" SCRO??ING="YES">
<NOFRAMES>
<BODY>

<!
 -->
</BODY>
</NOFRAMES>
</FRAMESET>
</|TM?>
Older browsers are written to ignore tags/elements that they don¶t understand so they will
ignore the <FRAMESET>, <FRAME>, and <NOFRAMES> tags tags.. As a result older browsers
will be able to display the contents placed between the <BODY></BODY> tags tags.. Many authors
use a message indicating that the site is built using frames and that the surfer should upgrade
their browser.
browser. You can actually put content in the <BODY> tags such as navigation to a non- non-
frames version of your site
site..
ureating a Frames Page
<FRAMESET>
The FRAMESET element creates divisions in the browser window in a single direction.
direction. This
allows you to define the divisions as either rows or columns
columns..

ë
Determines t e size and number of rectangular rows wit in a ·FRÑESE . e are
set from top of t e displa area to t e bottom.
Possible values are
absolute pixel units, i.e. "360,120"
a percentage of screen height, e.g. "75%,25%"
proportional values using the asterisk (*). This is often combined with a value in pixels
e.g. "360,*"
e latter enables t e developer to allocate all unassigned vertical space proportionatel.
Values are given wit in quotation marks and separated b commas in | source.
u
Determines t e size and number of rectangular columns wit in a ·FRÑESE . e
are set from left to rig t of t e displa area.
Possible values are
absolute pixel units, i.e. "480.160"
a percentage of screen height, i.e. "75%,25%"
proportional values using the asterisk (*). This is often combined with a value in pixels
e.g. "480,*"

The latter enables the developer to allocate all unassigned vertical space
proportionately.. Values are given within quotation marks and separated by commas
proportionately
in |TM? source
source..
Other Key Attributes of the FRAMESET ElementElement::
FRAMEBORDER :
Possible values 0, 1, YES, NO
NO.. A setting of zero will create a borderless frame.
frame.
FRAMESPACING :
This attribute is specified in pixels.
pixels. If you go to borderless frames you will need to
set this value to zero as well, or you will have a gap between your frames where the
border used to be
be..
BORDER :
Possible values 0, 1. A setting of zero will create a borderless frame.
frame.
BORDERCO?OR :
This attribute is allows you choose a color for your border
border.. This attribute is rarely
used..
used
·FRAME>
This element defines a single frame within a frameset.
frameset. There will be a FRAME
element for each division created by the FRAMESET element element.. This tag has the
following attributes:
attributes:

SRC:
SRC:
Required, as it provides the R? for the page that will be displayed in the frame.
frame.
NAME::
NAME
Required for frames that will allow targeting by other |TM? documents
documents.. In order
for a link to display the retrieved file in a frame other than the frame in which the
link was {Clicked} in, the targeted frame must be referenced by its name.
name.
Works in conjunction with the TARGET attribute of the <A>, <AREA>, <BASE>,
and <FORM> tags tags.. All names must begin with an alphanumeric value and not the
underscore character.
character.
MARGINWIDT|::
MARGINWIDT|
Optional attribute stated in pixels.
pixels. Determines horizontal space between the
<FRAME> contents and the frame's borders.
borders.
MARGIN|EIG|T
MARGIN|EIG|T::
Optional attribute stated in pixels.
pixels. Determines vertical space between the
<FRAME> contents and the frame's borders.
borders.

SCRO??ING:
Displays a scroll bar(s) in the frame. Possible values are:
es ± alwas displa scroll bar(s)
no ± never displa scroll bar(s)
auto ± browser will decide based on frame contents
The default value for this attribute is "auto".
NORESIZE:
Optional - prevents viewers from resizing the frame. By default the user can stretch
or shrink the frame's display by selecting the frame's border and moving it up, down,
left, or right.
·NOFRAMES>
Frame--capable browsers ignore all |TM? within this tag including the contents of
Frame
the BODY element. Browsers that don¶t support frames will ignore all frame
elements, and interpret the <NOFRAMES> content, beginning with the <BODY>
element.

This element does not have any attributes.
<|TM?>
<|EAD>
<TIT?E>Framed Page<TIT?E>
</|EAD>
<FRAMESET CO?S="23%,77%">
<FRAME SRC="doc1.htm" NAME="left_pane" SCRO??ING="NO">
<FRAME SRC="doc2.htm" NAME="right_pane" SCRO??ING="YES">
<NOFRAMES>
<BODY>
<P>This is a Framed page. pgrade your browser to support frames.</P>
</BODY>
</NOFRAMES>
</FRAMESET>
</|TM?>

uompound FRÑESE Divisions
You may want to create a frames design with a combination of rows and columns
In this case a second FRAMESET element will be inserted in the place of the
FRAME element that would describe the second row.row. The second FRAMESET will
divide the remaining screen real estate into 2 columns.
columns. This "nested" FRAMESET
will then be followed by 2 FRAME elements to describe each of the subsequent
frame divisions created.
created.

<|TM?> <|EAD> <TIT?E>Compound Frames Page<TIT?E></|EAD>
<FRAMESET ROWS="120,*">
<FRAME SRC="banner_file.htm">
<FRAMESET CO?S="120,*">
<FRAME SRC="links_file.htm">
<FRAME SRC="content_file.htm" NAME="content">
<NOFRAMES><BODY>default message</BODY></NOFRAMES>
</FRAMESET>
</FRAMESET>
</|TM?>
argets
When you are creating links for use in a frames environment you will need to
specify an additional attribute called TARGET.
TARGET. The TARGET attribute uses the
NAME attribute of the FRAME element
element..
For example if we were to place a link in doc1
doc1.htm that linked to doc3
doc3.htm and we
wanted doc3
doc3.htm to be displayed in the right windowpane;
windowpane; the |TM? code would
appear in doc1
doc1.htm as follows:
follows:

<A |REF="doc
|REF="doc33.htm" TARGET="right_pane">?ink to Document 3</A>
Warning.. If you fail to specify a TARGET frame name the linked document will be
Warning
displayed in the current frame.
frame.
Warning.. Frame NAMEs and TARGET values are case sensitive and must match
Warning
exactly to work.
work. If they don¶t match it will create a new browser window like with
the special target "_blank".
"_blank".
The following elements have TARGET attributes:
attributes:
<A> sample - <A |REF="file

|REF="file..htm" TARGET="Frame-
TARGET="Frame-window-
window-name">
<AREA> sample - <AREA S|APE="RECT" COORDS="
COORDS="55,6,2,4"
|REF="file..htm" TARGET="Frame-
|REF="file TARGET="Frame-window-
window-name">
<BASE> sample - <BASE TARGET="Frame
TARGET="Frame--window-
window-name">
<FORM> sample - <FORM ACTION="cgi
ACTION="cgi--bin/script" TARGET="Frame-
TARGET="Frame-window-
window-
name">
Special argets
There are 4 special target names that cannot be assigned by the NAME attribute of
the FRAME tagtag.. Each of these reserved names serves a special function when used
with the TARGET attribute.
attribute. These special names and functions are:
are:
TARGET="_top"

This loads the linked document into the full browser window with the R? specified
by the |REF attribute.
attribute. This is particularly useful for moving between a frames
environment and a non-non-frames environment.
environment.
TARGET="_blank"
Opens a new browser window and loads the document specified in the R? attribute
into that new window
window.. The window is not named.
named.
TARGET="_self"
?oads the document in the same window where the anchor was ÕClicked}ÕClicked}.. This is
the default setting for linking elements.
elements. This attribute would generally be used to
override the TARGET attribute of the <BASE> tag tag..
TARGET="_parent"
The _parent frame is a prior frameset that the current frameset was "spawned" from
from..
If there isn¶t one then it is the browser window
window..

<|TM?>
<|EAD>
<TIT?E>Document 1, doc1.htm</TIT?E>
</|EAD>
<BODY>
<P>
?inks<BR>
<A |REF="doc3.htm" TARGET="right_pane">Document 3 in the right
pane</A><BR>
<A |REF="doc4.htm" TARGET="_top">Document 4 in top</A><BR>
<A |REF="doc4.htm" TARGET="_blank">Document 4 in blank</A><BR>
<A |REF="doc4.htm" TARGET="_self">Document 4 in self</A><BR>
</P>
</BODY>
</|TM?>

u
,-
!
Forms
To insert a form we use the <FORM> </FORM> tags tags.. The rest of the form elements
must be inserted in between the form tags.
tags.
NOTE:: The FORM element has no formatting attributes.
NOTE attributes.
For example
example::
<|TM?> <|EAD> <TIT?E>Sample Form</TIT?E> </|EAD>
<BODY BGCO?OR="FFFFFF">
<FORM ACTION="http://www.karrox.com/formtest.asp">
<P>First Name: <INP T TYPE="TEXT" NAME="fname"
MAX?ENGT|="50"><BR>
?ast Name: <INP T TYPE="TEXT" NAME="lname" MAX?ENGT|="50"></P>
<P><INP T TYPE="S BMIT" NAME="Submit1" VA? E="Send Info"></P>
</FORM> </BODY> </|TM?>
e attributes of t e ·FOR element are
ION is the R? of the CGI (Common Gateway Interface) program that is
Ñu ION
going to accept the data from the form, process it, and send a response back to the
browser..
browser

MET|OD: GET (default) or POST specifies which |TTP method will be used to
MET|OD:
send the form¶s contents to the web server
server.. The CGI application should be written to
accept the data from either method.
method.
ENCTYPE:: determines the mechanism used to encode the form contents.
ENCTYPE contents. You can
leave this attribute as default (unspecified) unless you are creating a file upload
field..
field
NAME:: is a form name used by VB or JAVA scripts
NAME scripts..
TARGET:: is the target frame where the response page will show up
TARGET up..
The rest of the form elements are used to create the form seen in the browser and
collect the data to be sent to the application.
application.
Form Elements
Form elements have properties:

properties: Text boxes, Password boxes, Checkboxes, Option
(Radio) buttons, Submit, Reset, File, |idden and Image.
Image. The properties are specified
in the TYPE Attribute of the |TM? element <INP T> </INP T>. T>.

· Y
0+,? 0). 3+>0.
3,? % < ) "" ))

%6>,? 0 ""

@ <
<) "" ))

1,A,? B</

<.
÷ ,? 3<.

"/.
C6,301? /<.

"
)

Text boxes:
boxes: sed to provide input fields for text, phone numbers, dates, etc.etc.
<INP T TYPE="TEXT">
Browser will display
Textboxes use the following attributes:
attributes:
TYPE:: text
TYPE
SIZE:: determines the size of the textbox in characters.
SIZE characters. Default = 20 characters
MAXSIZE:: determines the maximum number of characters that the field will accept.
MAXSIZE accept.
NAME:: is the name of the variable to be sent to the CGI application
NAME application..
VA? E E:: will display its contents as the default value.
value.
Password:: sed to allow entry of passwords
Password
<INP T TYPE="PASSWORD">

Text typed in a password box is starred out in the browser display.
Password boxes use the following attributes:
TYPE: password
SIZE: determines the size of the textbox in characters.
MAXSIZE: determines the maximum size of the password in characters.
NAME: is the name of the variable to be sent to the CGI application.
VA? E: is usually blank.
|idden sed to send data to the CGI application that you don¶t want the web surfer
to see, change or have to enter but is necessary for the application to process the
form correctly.
<INP T TYPE="|IDDEN">
Nothing is displayed in the browser.
|idden inputs have the following attributes:
TYPE: hidden
VA? E: is usually set to a value expected by the CGI application.

Check Box: Check boxes allow the users to select more than one option.
<INP T TYPE="C|ECKBOX">
Checkboxes have the following attributes:
TYPE: checkbox
C|ECKED: is blank or C|ECKED as the initial status
VA? E: is usually set to a value.
Radio Button: Radio buttons allow users to select only one option.
<INP T TYPE="RADIO">
Radio buttons have the following attributes:
TYPE: radio
C|ECKED: is blank or C|ECKED as the initial status. Only one radio button can
be checked.
VA? E: usually has a set value.

File pload
pload:: You can use a file upload to allow surfers to upload files to your web
server..
server
<INP T TYPE="FI?E">
File pload has the following attributes:
attributes:
NAME application..
SIZE:: is the size of the text box in characters.
SIZE characters.
MAXSIZE:: is the maximum size of the input in the textbox in characters.
MAXSIZE characters.
ENCTYPE:: is a list of (MIME) types that the field can be used to upload.
ENCTYPE upload.
Pus utton This element would be used with either JavaScript or VBScript to
utton
cause an action to take place.
place.
<INP T TYPE="B TTON">
Submit Every set of Form tags requires a Submit button.
Submit button. This is the element that
causes the browser to send the names and values of the other elements to the CGI
Application specified by the ACTION attribute of the FORM element
element..
<INP T TYPE="S BMIT">

Submit has the following attributes:
attributes:
TYPE:: submit
TYPE
NAME:: value used by the CGI script for processing
NAME
VA? E E:: determines the text label on the button, usually Submit Query.
Query.
Image Submit Button:
Button: Allows you to substitute an image for the standard submit
button..
button
<INP T TYPE="IMAGE" SRC=" R?">
Image submit button has the following attributes:
attributes:
TYPE:: Image
TYPE
NAME:: is the name of the button to be used in scripting.
NAME scripting.
SRC:: R? of the Image file.
SRC file.
Reset It is a good idea to include one of these for each form where users are
Reset
entering data.
data. It allows the surfer to clear all the input in the form.
form.
<INP T TYPE="RESET">
Reset buttons have the following attributes:
attributes:
TYPE:: reset
TYPE
VA? E E:: determines the text label on the button, usually Reset.
Reset.

|E FOO IN ÑRE O |ER EEEN S |Ñ ÑY E èSED IN
FORS..
FORS
Y
<TEXTAREA> </TEXTAREA> is an element that allows for free form text entry. entry.
Textarea has the following attributes:
attributes:
NAME application..
ROWS:: the number of rows to the textbox.
ROWS textbox.
CO?S:: the number of columns to the textbox.
CO?S textbox.
WRAP:: defaults to OFF.
WRAP OFF. You should set wrap to "VIRT A?" or "P|YSICA?" so
that the text wraps in the browser display as the surfer types
types..
Select
The two following examples are <SE?ECT> </SE?ECT> elements, where the
attributes are set differently.
differently.
The Select element¶s attributes are:
are:
NAME application..
SIZE:: This sets the number of visible choices.
SIZE choices.
M ?TIP?E
?TIP?E:: The presence of this attribute signifies that the user can make multiple
selections.. By default only one selection is allowed.
selections allowed.

If Size =1 then Drop Down ?ist will come.
If SIZE is greater than one then ?ist Box will come.
Option
The list items are added to the <SE?ECT> element by inserting <OPTION>
</OPTION> elements.
The Option Element¶s attributes are:
SE?ECTED: When this attribute is present, the option is selected when the
document is initially loaded. It is an error for more than one option to be selected.
VA? E: Specifies the value the variable named in the select element.
<P><SE?ECT SIZE="1">
<OPTION VA? E="1" SE?ECTED="SE?ECTED">Item 1</OPTION>
<OPTION VA? E="2">Item 2</OPTION></SE?ECT></P>

uommon atewa Interface (uI)
When the user has finished filling in the form and presses "Submit" the data is sent
to the application on the server specified in the ACTION attribute of the form
element..
element
The application is commonly referred to as a CGI application/program
application/program.. It resides
and runs on the web server
server.. It is typically but not always stored in a directory called
cgi--bin.
cgi bin.
The application can be written in any language;
language; however, it must be one supported
by your webserver¶s operating system and webserver software. software. A very popular
language for creating CGI applications is PER? (Practical Extraction Report
?anguage)..
?anguage)
PER? is an interpreted language with rich text manipulation characteristics.
characteristics. Because
it is interpreted its performance compared to a compiled CGI application is slower,
thus negatively affecting server performance.
performance. It has been ported to most popular
operating systems and is currently available for most versions of NIX, Windows
NT, and Windows 95 95.. The actual application is commonly referred to as a script.
script.

uI Scripts
CGI Scripts process the form's data, and send a response back to the user.
They can be written to calculate numbers as in a sales order. They can format data
and put it into a database such as a mailing list or guest book. Depending on the
situation, a CGI Script can be written to do almost anything.
Intranet Application Development Architectures
1. Simple CGI Program

The client fills out an |TM? document containing the <FORM> element and
presses the submit button. This sends the data the user entered to the web server.
2. The web server receives the data and passes it to the program specified in the
ACTION attribute of the <FORM> element. This program is called a CGI (Common
Gateway Interface) program. It can be written in a number of languages; VBScript,
JavaScript, PER?, C++, etc. It can perform a number of different functions.
3. The CGI program creates a new |TM? document on the fly and sends it to
the client.
2. Three-
Three-Tier Web Application Development

The client fills out an |TM? document containing the <FORM> element and presses
the submit button. This sends the data the user entered to the web server.
Gateway Interface) program. It can be written in a number of languages; VBScript,
JavaScript, PER?, C++, etc.
The program in this case creates a command and issues it to the database server.
3. The Database Server receives the command and issues it against the database.
The data returned from the command is then sent back to the CGI application running
on the web server.
4. The CGI program creates a new |TM? document on the fly with the data
returned from the database server and sends it to the client.

3. Four-
Four-Tier Web Application Development
1. The client fills out an |TM? document containing the <FORM> element and
presses the submit button. This sends the data the user entered to the web server.
Gateway Interface) program.
In this case the program invokes a transaction on the transaction server.

3. The Database Server receives a command from the transaction server and
issues it against the database.
4. The data returned from the command is then sent back to the transaction, this
cycle will continue until the transaction fails or completes.
5. When the transaction completes successfully or unsuccessfully it passes the
result to the web server.
6. The CGI program running on the web server then creates a new |TM?
document on the fly with the data returned from the transaction server and sends it to
the client.

u
,,
ÑVÑ
The Java programming language was developed by Sun Microsystems

Microsystems.. It was
developed to be cross-
cross-platform and device-
device-independent, meaning the compiled
program should run on Macs, PCs, and nix machines.
machines. It is a powerful, full-
full-featured
object oriented programming language.
language. The browser creates an environment for
JAVA applets to run in called a JAVA Virtual Machine.
Machine. This provides platform
independence for JAVA Applets
Applets..
An applet, for those not familiar with the term, is the name of the mini-
mini-applications
created with the JAVA programming language.
language. The creation of applets is beyond the
scope of this course.
course. Applets are separate compiled programs with the file extension
of "class"
"class".. They are downloaded with the page through the use of the <APP?ET>
tag.. The |TM? syntax for the APP?ET tag, and its associated PARAM tag is as
tag
follows::
follows
·APPLET>
Designates a Java applet.

applet. Instead of containing the code necessary to perform a task,
this tag contains a reference to the code needed to perform the task.
task.

The Applet element has one sub- sub-element, the <PARAM> element, which passes
values to the applet that affect the operation of the program.
program.
Applet has the following attributes:
attributes: >
CODEBASE:: Directory or folder where the applet(s) are located.
CODEBASE located.
CODE:: Defines the compiled applet that is to be loaded.
CODE loaded.
WIDT|:: Determines the width of the area, in pixels, reserved to display the applet
WIDT|
in the browser.
browser.
|EIG|T:: Determines the height of the area, in pixels, reserved to display the applet
|EIG|T
in the browser.
browser.
·PARAM>
This tag passes a parameter to the applet.
applet. It has two attributes:
attributes:
NAME:: Names the parameter for recognition by the applet.
NAME applet.
VA? E E:: Defines a value for the parameter specified by the NAME attribute
attribute.. All
data is passed to the applet as a string variable.
variable.
· PARAM>
· APPLET>

When using Java in your pages, it is important to be aware that its support is not
universal.. If, like many authors, you are showcasing your use of JAVA on the page,
universal
it is advisable to include text in the document that alerts viewers to this fact.
fact. This is
especially true when the applet itself is the centerpiece of the document.
document.
Since JAVA applets must be downloaded with your |TM? page they increase
download time.
time. Once downloaded, the JAVA Virtual Machine must be started and
the applet will then start to run.
run. This is usually indicated in the status line of most
browsers..
browsers

u ,. */*!

*/*!
èses of t e eta Element
ë u 2 2
Client pull describes a scenario where the |TM? page has a META element inside
the |EAD element of the document, which instructs the browser to REFRES| the
view of that page.
page. Other attributes of the refresh instruction specify the time
interval and the R? to be used.
used. In this way, a series of pages can be presented
without the user requesting the new pages to be loaded.
loaded.
<META |TTP EQ IV="Refresh"CONTENT="1; R?=../directory/filename.htm">

You can use the Meta element to embed information in the |ead of your page that the search
engines will use to display a description of your site.
<META NAME="description" CONTENT="This is my company¶s web site. The site
contains information on our products and services.">

X
You can use the Meta element to embed information in the |ead of your page that
the search engines will use for keywords when people are searching for your site
site..
<META NAME="keywords" CONTENT="product name, service name, company
name, country, province/state, industry, etc.
etc.">

You can embed the author¶s name in a Meta element
<META NAME="author" CONTENT="Your Name"
u
Similarly you can embed the company name.
name.
<META NAME="company" CONTENT="Company Name">
u

<META NAME="copyright" CONTENT="Copyright © 1997 Your Name or
Company name.
name. All rights reserved.
reserved.">

Example:
Example:
<|TM?> <|EAD> <TIT?E>My |TM? Document</TIT?E>
<META NAME="description" CONTENT="This is my company¶s web site site.. The
site contains information on our products and services.
services.">
<META NAME="keywords" CONTENT="product name, service name, company
name, country, province/state, industry, etc.
etc.">
<META NAME="author" CONTENT="Your Name">
<META NAME="company" CONTENT="Company Name">
<META NAME="copyright" CONTENT="Copyright © 1997 Your Name or
Company name.
name. All rights reserved.
reserved.">
</|EAD> <BODY> </BODY> </|EAD></html>
Ñdding Sound to an | Page
When sound files are included in web pages the browser must first download the
audio file and then start the player software;
software; this can seem to take an extremely long
time over some connections.
connections. Depending on the browser that the client is using either
the Embed element or the BGSound element will be supported.
supported.

Embed
The <EMBED></EMBED> element is used to place audio in a web page page.. It is
supported by Netscape Navigator, and some ActiveX extensions to Internet
Explorer.. The Embed element has the following attributes:
Explorer attributes:
SRC:: defines the R? of the sound file
SRC file..
CONTRO?S
CONTRO?S:: You have your choice of several controls including console, small
console, play button, etc.
etc.
A TOSTART:
TOSTART: when set to true the sound will start once the sound file is
downloaded..
downloaded
|IDDEN:: when set to true it will hide the controls, default is false.
|IDDEN false.
?OOP:: defines how many times the sound file will play.
?OOP play.
VO? ME:ME: sets the default volume when playing first starts.
starts.
|EIG|T:: in pixels depends on choice of controls.
|EIG|T controls.
WIDT|:: in pixels depends on choice of controls.
WIDT| controls.
<EMBED SRC=file:
SRC=file:///C|/WINDOWS/MEDIA/Jungle%
///C|/WINDOWS/MEDIA/Jungle%20Exit 20Exit..wav WIDT|="
WIDT|="145145""
|EIG|T="60
|EIG|T=" 60"" A TOSTART="TR E" VO? ME="100
ME="100""
CONTRO?S="CONSO?E" |IDDEN="TR E">

The following sound formats are supported:
supported: .WAV or .A audio files, or .MID midi files.
files.
BGSound
The <BGSO ND></BGSO ND> element is used to place background audio in a page,
it is supported by Internet Explorer.
Explorer. BGSound has the following the following
attributes::
attributes
SRC:: defines the R? of the sound file
SRC file..
?OOP:: defines how many times the sound file will play.
?OOP play.
DE?AY:: defines the delay between loops.
DE?AY loops.
TIT?E
TIT?E:: the text that describes the sound.
sound.
<BGSO ND SRC=fileSRC=file::///C|/WINDOWS/MEDIA/Jungle%
///C|/WINDOWS/MEDIA/Jungle%20Start
20Start..wav ?OOP="
?OOP="22"
TIT?E="Jungle theme" DE?AY="5
DE?AY="5">
The following sound formats are supported:
supported: .WAV or .A audio files, or .MID midi
files..
files
Ñnimation Elements
p
The <MARQ EE></MARQ EE> element defines text that is displayed in an
animated region of the browser.
browser.

WIDT|: of the marquee in pixels.
WIDT|: pixels.
|EIG|T:: of the marquee in pixels.
|EIG|T pixels.
?OOP:: defines how many times the text will travel through the space.
?OOP space.
BGCO?OR:: defines the background color of the marquee.
BGCO?OR marquee.
BE|AVIOR:
BE|AVIOR: defines how the text should move in the marquee.
marquee.
SCRO??DE?AY
SCRO??DE?AY:: sets the number of milliseconds before refreshes.
refreshes.
<MARQ EE BE|AVIOR="Alternate" BGCO?OR="#FFFFBGCO?OR="#FFFF80 80"" ?OOP="
?OOP="55">This
Text is Animated!</MARQ EE>
The Marquee element is currently only supported by Internet Explorer, Navigator just
displays the text between the <MARQ EE> and </MARQEE> tags. tags.
£
The <B?INK></B?INK> element is supported by Navigator.Navigator. It will cause text to
blink.. You can combine it with most text formatting for the desired effect.
blink effect. The element
has no attributes
<B?INK>This Text will blink</B?INK>
A word of caution this element should be used very cautiously as it will become
annoying to repeat visitors.
visitors.

u ,u
*

Introduction to uascading Stle S eets
Cascading style sheets are a recent addition to |TM? pages
pages.. Web page designers
have long been frustrated at the lack of control they have, over how a page will
appear.. Cascading Style Sheets are a way of controlling the way the browser
appear
displays the page.
page. For the experienced designer, Cascading Style Sheets will be a
welcome feature that will save a lot of time normally spent on repetitive style
formatting commands.
commands. You can specify a particular font size in points or pixels and
control the spacing and indentation, etc.
etc. Cascading Style Sheets will give you
much more control over the text on the page.
page.
There are three ways to add Style information to you web page
page::
Inline stles
Embedded stle s eets
inked stle s eets

We will cover the concepts behind all three.
three.
Microsoft Internet Explorer (3.0 and above) and Netscape Communicator 4.0
provide the most extensive support for cascading style sheets at this time.
time.
The specifications for the evolving CSS standard can be found at the W3C
Consortium's Web page at http: http://www.
//www.w3.org/
org/.. You will need to use the CSS
standard section of the site or some other CSS reference to see all of the details for
writing style commands.
commands. This Chapter will focus on showing you how to apply style
commands to your documents
documents..
Inline Stles
The first method of adding Style to a web page is to use the STY?E attribute of a
selected element.
element. To use an inline style, you add a STY?E attribute to a specific
instance of an element, using the following syntax:
syntax:
<E?EMENT STY?E="property:
STY?E="property:value;
value; property:
property:value;
value; «"></E?EMENT>
For example
example:: <B STY?E="color:
STY?E="color:navy;
navy;">In the navy.
navy.</B> This text would appear
bold and navy in a browser.
browser.
An inline style may be applied to any |TM? element, from <A> to <VAR>, and
modifies only the specific instance (occurrence in the document) of the element to
which you apply it
it..

u
<|TM?><|EAD><TIT?E>Style Samples</TIT?E></|EAD>
<BODY BGCO?OR="#FFFFFF">
<|22 STY?E="CO?OR:
<| STY?E="CO?OR:RED">This |eading has Style!</| Style!</|22>
<|22>This |eading has Style!</|
<| Style!</|2 2>
<|22>Introduction</|
<| >Introduction</|2 2>
<|22>Sales and Marketing</|2
<| Marketing</|2>
<P>This is normal text.
text.</P>
<|22>Operations</|
<| >Operations</|2 2>
<|22>Summary</|
<| >Summary</|22>
</BODY>
</|TM?>
When viewed in a browser you can see that in this file the STY?E command only
affects the element that it is applied to.
Inline Styles are used rarely because they are as much work as using the <FONT>
tag. They are sometimes used to override styles from embedded style sheets or from
a linked cascading style sheet; this will be demonstrated later.

Embedded Stle S eets
To use an embedded style sheet, you define a style block (delimited by the <STY?E>
and </STY?E> tags), which should be placed in the <|EAD> section of the
document.. This block consists of a set of style rules, where each rule defines a style for
document
an |TM? element or group of elements
elements..
<|EAD><TIT?E> Embedded Style Sheet Example </TIT?E>
<STY?E TYPE="text/css">
</STY?E>
</|EAD>
</BODY>
A required attribute of the Style element is TYPE and it should be set to text/css.
text/css. A
disadvantage of Embedded Style sheets is that the style commands only apply to the
document they are embedded in in..
Some browsers are not CSS-
CSS-compliant and will display the contents of the STY?E
element in the document window.
window. For this reason it is a good idea to surround an
embedded style sheet with an |TM? comment comment.. This will cause the content to be
ignored by non
non--CSS browsers, but still interpreted by CSS compliant browsers.
browsers.

Type `'
-->' just before the STY?E end- end-tag, but after the style sheet information.
information.
A style rule has two parts
parts::
A selector that identifies an |TM? element or group of elements
A declaration of the style properties to be applied to that selector
The generic syntax for a style rule is as follows:
follows:
selector {property:
{property:value;
value; property:
property:value;
value; « }
Each style rule must start with a selector or group of selectors, followed by an open brace
({), followed by a set of declarations.
declarations. Each of these declarations ends with a semi-
semi-colon
and each property is separated from its value(s) by a colon (:), ending with a close brace
(})..
(})
Add the following STY?E element to the previous code sample: sample:
<STY?E TYPE="text/css"> <! 
--> </STY?E>
sing the Embedded Style Sheet will make all of the <|2 <|2> elements in the document
display in blue, except for the <|2 <|2> that still contains the inline style command.
command. This
illustrates that the inline style command is a higher priority and takes precedence over the
embedded commands if they are in conflict.conflict.

inked Stle s eets
The easiest method for adding style to multiple |TM? documents is to use ?inked Style
Sheets.. A ?inked Style Sheet is a separate file that contains all of the style information.
Sheets information.
This is an example of a Cascading Style Sheet.
Sheet.
|2 {
color:: fuchsia;
color fuchsia;
text--decoration:
text decoration: line-
line-through;
through;
}
To link the style sheet to the |TM? page you use a ?INK element in the head of your
document.. The required attributes are |REF=" R?" and RE?="STY?ES|EET";
document RE?="STY?ES|EET"; both the
TIT?E and TYPE are optional.
optional. But TIT?E must match the Title: Title: property in the Style
Sheet), and TYPE should be set to "text/css".
"text/css".
To create a linked style sheet you can use Notepad and save the file with the file extension
.css E.g. h2_styles.
_styles.css

To have the style sheet work with your |TM? file you need to link the file using a ?INK
element..
element
Sample Code added to previous file:
file:
<|EAD>
<TIT?E>Style Samples</TIT?E>
<?INK RE?="STY?ES|EET" |REF="h2_styles.css">
<STY?E TYPE="text/css"></STY?E>
--></STY?E>
</|EAD>
View the file in your browsers and you will see that the colors are still controlled by the
higher priority inline and embedded style commands but because the text decoration
command does not conflict with anything, it is applied to all of the <|2
<|2> elements in the
document

ulasses
If you expect to have formatting variations for different instances of a single element, or
you would like to have different elements share the same format, using a class name as a
selector is a good approach. This is often referred to as "sub-
"sub-classing" an element. C?ASS
is an |TM? attribute that has no display characteristics and that you can apply to any
element, like this:
<|2 C?ASS="sales">Styles applied to the sales section<|2>
The style rule for sales could be declared as follows:
<STY?E> 
--> </STY?E>
Note That the selector begins with a period (.), which is the required syntax for class names
as selectors.
A class is simply a group of elements, possibly scattered throughout a document, all of
which have the same value for their C?ASS attribute
attribute..
To apply a class to a group of elements, set the C?ASS attribute for all that apply:
apply:

<|2 C?ASS="sales"> Sales and Marketing</|2
<|2 Marketing</|2>
<P C?ASS="sales">This is normal text. text.</P>
In the browser, notice how the styles associated with the C?ASS value are applied to
the tagged elements and also notice that they override the other conflicting style
commands..
commands
IDs
?ike C?ASS, ID is an |TM? attribute that does not affect the display of an element
and can be applied to any element.
element. In general, while class names are usually given to
groups of element instances sharing some common function or format (relative
importance, context, and so on), ID is used to identify one specific instance of an
element.. Style rules selected by the ID attribute are declared using the pound sign
element
(#) to precede the selector, as follows:
follows:
<STY?E>
--> </STY?E>
Note : While many elements can have the same C?ASS attribute value, only one
element in any document can have a particular ID attribute value.
value.

IDs are intended to be unique identifiers for elements in a document.
document. Cascading style
sheets let you associate an ID attribute with a set of style properties and values, so that you
can format a particular element instance in a certain way.
way.
Note:: Class and ID attribute values must start with a letter and can contain only letters,
Note
numbers, and `-' (hyphen)
(hyphen)..
DIV and SPAN
Just as C?ASS and ID appear to have little use beyond setting styles (and scripting), the
two |TM? elements <DIV> and <SPAN> are almost exclusively used as containers for
CSS properties
properties.. <DIV> and <SPAN>, like C?ASS and ID -- but unlike other |TM?
elements -- have no inherent display characteristics, with one exception each. each. <DIV>
defines a block consisting of text and |TM? tags, and separates this block from
surrounding content by line breaks, while <SPAN> is an inline element which "flows" in
with surrounding content
content..
<STY?E>
<!

-->
</STY?E>

<P>Some text about to run into a big DIV tag</P>
<DIV>I am a DIV</DIV>
<P>and narrowly escape.
escape.</P>
<P>Some text about to flow seamlessly into a SPAN tag <SPAN>I am a SPAN</SPAN>
and make a smooth getaway.
getaway.</P>
RESULTS::
RESULTS
Some text about to run into a big DIV tag
and narrowly escape.
escape.
Some text about to flow seamlessly into a SPAN tag I am a SPAN and make a smooth
getaway..
getaway
uascading and In eritance
The style sheets we are discussing are called Cascading Style Sheets.
Sheets. Simply stated,
"cascading" in CSS specifies how an element instance may properly be affected by styles
of different types (inline style, embedded style sheet, linked style sheet, imported style
sheet) and selected in a number of ways (element tag, class, ID).
ID). The logic is simple:
simple: CSS
cascades from general to specific, and from top to bottom.
bottom.

<|EAD>
<STY?E>
<!

-->
</STY?E>
</|EAD>
<BODY>
<P ID="idP1" C?ASS="clsCode">Multiple styles, no conflicts.</P>
</BODY>
idP1
idP 1's formatting is affected by the style rules for <BODY>, <P>, clsCode, and idP1 idP1.
These potentially conflicting styles are resolved through the laws of cascading and
inheritance..
inheritance is means t at first, t e · ODY-
ODY-selected stle (background-
(background-color) is
applied, followed b t e ·P ·P--selected stle, clsuode, and finall, idP
idP, wit eac stle
taking precedence over t e previous one. one. If we ad an inline stle defined as well, it
would ave been applied last, overriding all ot ers ers.. In t e cascade, for t e same
element, a rule wit ID as t e selector takes precedence over a rule wit uÑSS as
t e selector.
selector. uÑSS, in turn, takes precedence over t e | element name as
selector..
selector

This is referred to as "specificity" of the selector. The order of specificity, from greatest to
least, is:
inline stles
ID
uÑSS
| element
There were no conflicting style assignments -- for example, the background color for the
paragraph was set only in the <BODY> rule, and the font size was set only in the clsCode
style rule ² so the styles "trickled down" to the next selector unaltered.
In the case of conflicting assignments with identical selectors, a style selected by a
selector of greater specificity takes precedence. For example, let's apply a color value
(white) to the #idP1 declaration. This will "conflict" with the color value specified in the
.clsCode specification. Since #idP1 has greater specificity, its color (white) will win out
over the previously set color (navy).

u ,

ava Script versus ÑVÑ
JAVA is a strongly typed, compiled programming language developed by Sun
Microsystems.. JavaScript, developed originally by Netscape, is a lightweight, interpreted
Microsystems
programming language initially called ?iveScript
?iveScript.. The two languages are not related in any
way.. All programming languages share a certain amount of similarity.
way similarity.
Interpreted programs versus uompiled programs
Before we start discussing the differences between interpreted and compiled we have to
define the term source code or as it is more commonly referred to, the code. code. The code is the
plain text commands that the program is written in in.. All programming languages start out as
source code, it is then either interpreted or compiled.
compiled. The code that you will create in this
course can be considered source code.
code.
Interpreted programming languages tend to be simpler to program but slower to execute in
general.. Each time a program is run it has to be interpreted (interrogated) line by line, based
general
on the flow of execution (you will see later branches and loops affect the flow of execution)
execution)..
Compiled programming languages have a more complex syntax, and require more strict
programming practices.
practices. With a compiled programming language you first write the source
code, then you feed it to a compiler (a special computer program) which produces an
executable binary program.
program. On the Windows platforms the output of the compiler usually
ends in the ".exe" file extension.
extension. The program that comes out of the compilation process
tends to be platform (operating system) specific.
specific. The key benefit for the programmer is that
no other programmer can look at the source code once it is compiled.
compiled. The other key factor is
that the language used to write the source code becomes irrelevant once it has been

compiled..
compiled
JAVA is a compiled language that is platform independent, whereas JavaScript is
an interpreted language.
language. The browser provides the platform independence for
JAVA through its JAVA Virtual Machine, and the interpreter for JavaScriptJavaScript.. As a
result, the browser you are writing your scripts for is important.
important.
earn avaScript
JavaScript is the only scripting language currently supported by the popular web
browsers.. Netscape Navigator only supports JavaScript, whereas Microsoft
browsers
Internet Explorer supports both JavaScript and VBScript.
VBScript. JavaScript can also be
used on web servers for what's called server side scripting as well. well. The time you
invest into learning the JavaScript language will provide you with what is now
considered to be a core skill for web development
development..
at ou can use avaScript for
JavaScript can extend the usefulness of your web pages beyond what you can do
with just |TM?
|TM?.. In this course you will use it to ensure that a user is inputting data
into your forms in the correct format, to create interesting buttons with mouse
rollover effects, and to create pop-
pop-up windows.
windows. When combined with Cascading
Style Sheets, you can create what are called Dynamic |TM? pages pages.. By learning
JavaScript your needs and imagination will lead you to extend your |TM? pages pages..
Ñbout avaScript

JavaScript is an interpreted programming language that can be embedded into an
|TM? web page page..
Interpreted means that the entire web page is downloaded to the browser and the JavaScript
code is executed when an event is triggered.
triggered. When the code is executed it is interpreted one
line at a time.
time. There are a number of events that will trigger the execution of a JavaScript,
like a click on a form button, or the completion of a web page loading.
loading.
Netscape originally created JavaScript;

JavaScript; It has since been standardized by the European
Computer Manufactures Association (ECMA). (ECMA). Today there are several versions of
JavaScript (1.0, 1.1, 1.2,« ) and the language is continually developing as both the Internet
and the web evolve
evolve..
The different versions follow somewhat browser development, and the older browsers do
not support newer versions of JavaScript
JavaScript..
Inserting ulient Side avaScript into an | Page
JavaScript is added to an |TM? page using the SCRIPT tag. The script tags should be
placed inside the head tag of the document. If an older browser looks at a page containing
script tags it will ignore them, as older browsers are written to ignore tags they can't
interpret.
JavaScript code should also be placed inside an |TM? Comment tag set.
E.g. 
-->

u ,"

0
When used with Java Scripts the ending comment tag will also start with two slashes //
which is the JavaScript code for comment. This tells the JavaScript interpreter to ignore that
statement.
This is a standard way for adding JavaScript to your |TM? pages so that it works properly
for browsers that are JavaScript enabled and those that do not support JavaScript.
<|TM?>
<|EAD>
<TIT?E>Web Page containing JavaScript</TIT?E>
<SCRIPT ?ANG AGE="JAVASCRIPT">
<!

-->
</SCRIPT>
</|EAD>
<BODY>
(|TM? document goes here)
</BODY>
</|TM?>

We may also put in a single line of code attached to an event. event. Events will be explained
later.. The general syntax for this structure is
later is::
<|TM?_TAG Attibute="option" onEvent="JavaScript code statements go here">stuff in
between the opening and closing tag</|TM?_TAG>
Sntax and uonventions
Writing in any language follows rules and conventions.
conventions. For example, the English language
requires that each sentence must contain a subject and verb to be legitimate.
legitimate. You must also
capitalize the first letter of a sentence, and end each sentence with punctuation such as a
period or question mark.mark. This is the syntax, or grammar of the English language.language. Each
programming language has a similar set of rules commonly referred to as the syntax. syntax.
avaScript as several rules and conventions for its sntax sntax
Case--sensitivity
Case sensitivity::
JavaScript is a case-
case-sensitive language, meaning that the language will treat these words
differently:: example, Example, EXAMP?E
differently
Semicolons::
Semicolons
All statements should end in a semicolon.
semicolon. The semicolon separates one statement from
another..i.e. var x = 0; var y = 10;
another 10;

ite Space
Space
JavaScript, like |TM?, ignores spaces, tabs, and newlines that appear in statements. statements.
JavaScript does, however recognize spaces, tabs, and newlines that are part of a string.
string. We
will talk more about strings later in the course.
course.
var x=0
x=0; is the same as var x = 0;
All of these examples will produce the same results.
results. It is a good idea to put some spacing
in your code to make it easier to read.read. It is not good programming practice to stretch
statements over several lines.
lines.
You do need a space between a programming command and the thing it is working on on.. For
example, you need a space between var and the variable name. name.
e ackslas (\) and Strings
Strings
The backslash character named as such because it leans backwards, and it should not be
confused with the forwardslash character (/) that leans forwards.forwards. The backslash has a
special purpose in JavaScript strings.
strings. It will be followed by another character that
represents something in a string that cannot be typed on the keyboard.
keyboard.
For example we want the word "You" to appear on one line and the word "Clicked" on a
new line and "me" on a third line.
line. The string would look like this:
this:
'You\\nClicked
'You nClicked\\nme'.
nme'.

The \n represents a carriage return and a line feed. feed. These are the two operations that take
place when you use the return on a typewriter.
typewriter. The results would look like this:
this:
You
Clicked
me
These backslash and letter combinations are commonly referred to as escape sequences. sequences.
Some of the common sequences are: are:
\b backspace
\f form feed
\n new line
\r carriage return (no linefeed)
\t tab
\' single quote (apostrop e)
\" double quote
The last two are important and can be used like this: this:
'You didn
didn\\'t get that done' or "You didn
didn\\'t get that done³
The \ tells the interpreter that in this case it should print the single quote and not interpret it
as a delimiter.
delimiter.

Opening and ulosing rackets rackets
All brackets you open must be closed! This includes ( ), [ ], and { }.
i.e.
winpop = window
window..open('ex
open('ex. tm','popup','scrollbars=es')
tm','popup','scrollbars=es');;
if ( x[0
x[0 == 0 ) {
x[0
x[0 = 0;
x[
x[ = 0;
}
e curl brackets { } are used to contain multiple avaScript statements.statements. In t e above
example x[0 x[0=
=00; and x[
x[=0
=0; are two different statements.
statements.
The square brackets [ ] are part of a special data structure called arrays.
arrays. Arrays will be covered later
in the course.
course.
The curved brackets ( ) are used to contain a function or a method¶s arguments.
arguments. Functions and
methods will be described shortly.
shortly. Multiple arguments are separated by commas
commas..
i.e. ('ex1
('ex1.htm','popup','scrollbars=yes')
htm','popup','scrollbars=yes')..
Comments::
Comments
You can create a comment using the double forward slashes, like this: this:
// this is a comment
Or for multiple line comments you can open the comment with a forward slash and an asterisk "/*",
and close it with an asterisk followed by a forward slash "*/" like this:
this:

/* Comments are often used by programmers
to leave notes about their program logic so that when
they return to update it, or someone else needs to edit it,
they can understand what the programmer was doing at the time.time.
*/
Variable and Function Names
In the next Chapter you will be introduced to variables and functions. functions. As the
programmer you get to choose and assign the names.names. The names of the variables and
functions must follow these simple rules.
rules.
e first c aracter must be a letter of t e alp abet (lowercase or uppercase),
an underscore (_) or a dollar sign ($). e dollar sign is not recommended as it
is not supported prior to avaScript ver ..
You uÑNNO use a number as t e first c aracter of t e name. name.
Names uÑNNO contain spaces. spaces.
Names uÑNNO matc an of t e reserved words. words.
The following are examples of valid names:
names:
x, add_two_num, x ,, w atever, $mone_string

pes of Variables
A big difference between JavaScript and other languages like JAVA and C is that
JavaScript is untyped
untyped.. This means that a JavaScript variable can hold a value of any data
type, and its data type does not have to be set when declaring the variable.
variable. This allows
you to change the data type of a variable during the execution of your program, for
example::
example
We recommend that you use descriptive names for your variables and your functions and
that you adopt a standard way of naming things.
things. The two formats that are common are;
are;
using the underscore to replace spaces, or capitalizing the first letter of complete words
after the first word in the name.
name.
For example
example::
add_two_num, addTwoNumbers,
JavaScript tends to use the latter for its naming conventions.
conventions.
Reserved ords
There are a number of words that make up the components of the JavaScript language.
language.
These words cannot be used for variable or function names because the program
interpreter would be unable to distinguish between a default JavaScript command and
your variable or function name.
name.

u ," !!u
Declaring Your Variables
A variable is a name assigned to a location in a computer's memory to store data.

data. Before you
can use a variable in a JavaScript program, you must declare its name.
name. Variables are declared
with the var keyword, like this:
this:
var x;
var y;
var sum;
sum;
You can also declare multiple variables with the same var keyword.
keyword.
var x, y, sum;
sum;
To take it one step further you can combine variable declaration with initialization.
initialization.
var x = 1, y = 3, sum = 0;
If you don't specify an initial value for a variable when you declare it, the initial value is a
special JavaScript undefined value.
value.
Remember:: JavaScript is case-
Remember case-sensitive so x and X are two different variable names.
names.

var x = 10;
10;
x = "ten";
"ten";
In this example the variable x is first assigned the integer value of 10,
10, and then the string
value of the word ten
ten..
sing Operators
Operators are the things that act on variables
variables.. We have already seen an operator used in
the previous example, where we were assigning values to our variables
variables.. The example
used one of the most common operators, "=" or the assignment operator. operator. Another
operator would be the addition operator "+".
"+".
var x = 1, y = 3, sum = 0;
sum = x + y;
This small chunk of JavaScript code will declare the variables x, y and sum and assign
the number 1 to x, 3 to y and 0 to sum.
sum. The second line of the script will add x to y and
assign it to sum.
sum. The value of the sum variable will be 4.
Other operators are used to compare things, i.e. "==" equality, ">" greater than. than. For
example,
var x = 1, y = 3, sum = 0;
if ( sum == 0 ) {
sum = x + y;
}

èsing Operators
Operators are the things that act on variables. We have already seen an operator used in
the previous example, where we were assigning values to our variables. The example used
one of the most common operators, "=" or the assignment operator. Another operator
would be the addition operator "+".
var x = 1, y = 3, sum = 0;
sum = x + y;
This small chunk of JavaScript code will declare the variables x, y and sum and assign the
number 1 to x, 3 to y and 0 to sum. The second line of the script will add x to y and assign
it to sum. The value of the sum variable will be 4.
Other operators are used to compare things, i.e. "==" equality, ">" greater than. For
example,
var x = 1, y = 3, sum = 0;
if ( sum == 0 ) {
sum = x + y;
}

This bit of code first checks to see if sum is equal to zero, and if so then it adds x and y
together and assigns the result to sum.
sum. The "if" statement is an example of a control structure
which we will examine shortly.
shortly.
avaScript Operators
u
These are probably the most common operators.
operators. They are used for common mathematical
operations..
operations
nary negation ( - ),Increment ( ++ ),Decrement ( -- ),Multiplication ( * ),Division ( / )
Modulo arithmetic ( % ),Addition ( + ),Subtraction ( - )
ogical
These operators are very commonly used in conditional statements like "if" and "switch" that
you will be learning about shortly.
shortly.
?ogical NOT ( ! ),?ess than ( < ),Greater than ( > ),?ess than or equal to ( <= ),Greater than or
equal to ( >= ),Equality ( == ),Inequality ( != ),?ogical AND ( && )
?ogical OR ( || ),Conditional (trinary) ( ?: ),Comma ( , ),Bitwise
You have probably heard that computers work with bits and bytes. bytes. These operators do work
with bits or zeros and ones.
ones. These operators are very rarely used.
used.
Bitwise NOT ( ~ ),Bitwise Shift ?eft ( << ),Bitwise Shift Right ( >> ), nsigned Shift Right (
>>> ),Bitwise AND ( & ),Bitwise XOR ( ^ ),Bitwise OR ( | )

Ñssignment
It is important to note that the single equal sign is used for assignment and not for testing
equality. The compound assignment operators can combine a couple of programming
steps to make your code tighter, and more efficient.
Assignment ( = )
Compound assignment operators
Addition (+=),Subtraction (- (-=),Multiplication (*=),Division (/=)
Modulo Arithmetic (%=),?eft Shift (<<=),Right Shift (>>=)
nsigned Right Shift (>>>=),Bitwise And (&=),Bitwise Or (|=)
Bitwise Xor (^=)
switc
The switch statement is handy when a variable may take on a number of values and you
want to test for some of those values. The use of "switch" is shorter and easier to read
than a number of "if" statements.
switch(n) {
case 1: //start here if n equals 1.
// place code here
break;
case 2: //start here if n equals 2.
// place code here

break; // stop here
.
.
.
default; // if all other conditions fail do this
// place code here
break;
}
oops
A loop is a programming structure that forces the statements contained within its delimiters
to execute over and over again until a condition is met at which point the loop ends.
w ile
While a condition is true, execute one or more statements. "While loops" are especially
useful when you do not know how many times you have to loop, but you know you should
stop when you meet the condition.
var x = 1;
while ( x <= 10 ) { // loop until x is greater than 10
until x is greaterthan 10
x++; // add one to the value of x
}

for
"For loops" are useful when you know exactly how many times you want the loop to
execute.
var x;
for ( x = 1; x <= 10; x++ ) { // loop while x is <= 10
do something ten times
}
Functions
Functions are an important part of programming as they allow you to create chunks of
code that perform a specific task.task. Functions in JavaScript are called subroutines or
procedures in other programming languages.
languages. JavaScript has a number of built-
built-in functions
that are part of the language.
language. JavaScript also gives you the ability to create your own
functions.. Your JavaScript programs may be made up of one function or several functions.
functions functions.
Built--in
Built in::
The built in functions are there to perform a number of actions that programmers expect to
be part of a programming language. language. Some of the built in functions include: include:
parseFloat(string
parseFloat( string value),
value), parseInt(
parseInt(string
string value),
value), isNaN(
isNaN(value
value),
), etc
etc.... We will use these
functions later in the course.
course.

Programmer ureated
Functions that you create start with the command "function" and are followed by the
name for the function. For example:
function function_name( argument1, argument2, « ) {
.
.
JavaScript statements go here
.
.
} // end of function
sually the name is an indicator of the action the function is going to provide such as
"checkForm". The name is followed by a set of parenthesis and inside the parenthesis
there can be a number of arguments. Arguments are the variable names that will be used
for values (data) being passed to the function.
All functions have the ability to pass back a value through the return statement. Another
way of saying this is you can pass data into a function using its arguments, and get the
results out with a returned value. Functions can only return one value. In the example
below the sum of two numbers is returned by the add_two_num() function.

var globalVar = 1999;
function add_two_num( a, b) {
var sum = a + b;
return sum;
} // end of function add_two_num
function mainProgram() {
var x = 5, y = 3, total = 0;
total = add_two_num( x , y );
alert(total); // display the value of total
}
In t e above example
example
The function mainProgram declares variables and assigns their initial values as follows - "x"
equal to 5, "y" equal to 3 and "total" equal to 0
Then it calls the add_two_num function and passes in the values of x and y.
In the add_two_num function the values are added together and stored in a variable named
sum..
sum
The value of sum is returned back to the mainProgram function and stored in the variable
named total.
total.
The value of total is then displayed to user in an alert box.
box.

Variables declared in a function are only available while within that function¶s braces { }.
These are commonly referred to as local variables.
variables. Another type of variable is a global
variable.. Global variables are available to all functions, and should be used with caution, as
variable
it is easy to assign the wrong value to a global variable.
variable. In the above example globalVar is a
global variable because it is declared outside of all of the functions

u ,#)1/ 2!)1*
Objects
An object is a collection of variables (parameters) and functions (methods). The syntax for
using an object is: object.parameter, or object.method(). A string is an object in JavaScript
and has several methods and parameters.
var StringVar = new String("This is a string of characters.");

var x = StringVar.length;
StringVar = StringVar.to pperCase();
If this code is executed StringVar is a new variable with the value of "This is a string of
characters..". The x variable is set to the length of the StringVar, in this case 31.
characters 31. ?ength is a
property of the string object.
object. If you count the characters (letters, spaces, and punctuation)
between the quotes you will see that it adds up to 31. 31. The to pperCase() method converts
all of the alpha characters in the string to upper case i.e. "T|IS IS A STRING OF
C|ARACTERS..".
C|ARACTERS
JavaScript has the following objects built into the language:
language: String, Math, Date and Array.
Array.
The string object has a number of methods for manipulating strings as demonstrated above
with the to pperCase() method.
method. The math object is a collection of methods and properties
for performing mathematical operations like: like: min(), max(), sin(), cos(), etc
etc..
.. The date
object is a collection of methods for working with dates and time.time. The array object allows
programmers to create collections of data.
data. Arrays will be discussed shortly.
shortly.

e new operator
Objects and arrays cannot simply be typed into your JavaScript programs! They must be
created. We use the "new" operator to create a new instance of an object or an array. To put
that another way the new operator creates a copy of an existing object or an array structure
and assigns the name you want to it.
The generic syntax is:
o = new Object();
Since objects are made up of methods (functions) and parameters (variables), the newly
created object "o" in this case has all of the same methods and parameters of the original
Object. The parameters will all be set to their default value. Arrays will be covered shortly.
e Document Object odel (DO)
The browser provides us with a series of objects.
objects. The browser window that the page is
displayed in is known as the window object
object.. The |TM? page displayed by your browser is
known as the document object.
object. The document object is probably the most commonly used
object in client-
client-side JavaScript.
JavaScript.
The |TM? elements that you add to a page also extend the object hierarchy.
hierarchy. An example is
the FORM element and the elements that reside inside the form. form. This means that you can
reference these objects, as illustrated in the |TM? page below:
below:

window.document.forms[0]
Refers to the first form in the document. Forms are implemented as arrays in the DOM. If
there is more than one form on page the numbers will start at zero and go up.
window.document.Form1
Refers to the form by name Form1
window.document.Form1.FirstName.value
Refers to the value typed into the textbox named FirstName by the client, in the form
named Form1
<|TM?><|EAD><TIT?E>Simple Form</TIT?E></|EAD>
<BODY>
<FORM NAME="Form1">
Name: <INP T TYPE="TEXT" NAME="FirstName"><BR>
<INP T TYPE="Button" VA? E="Submit Info" >
</FORM>
<FORM NAME="Form2">
Name: <INP T TYPE="TEXT" NAME="?astName"><BR>
<INP T TYPE="Button" VA? E="Submit Info" >
</FORM></BODY></|TM?>

!)* **
2 ! )1 *
3245

Ñrras
JavaScript, similar to other programming languages, has the capabilities to use a data
structure called an array.
array. An array is a collection of data where each piece of data is held
in a numbered position within the array.
array. A one
one--dimensional array would be similar to a
column in a spreadsheet.
spreadsheet.
Each position in the array is assigned an index number beginning with 0 for the first
position, 1 for the second position, and so on
on.. This allows any position within the array,
or "element" of the array, to be referenced by its index number.
number.
The index of the array is indicated by the number contained within the square brackets.
brackets.
An array is implemented as an object in JavaScript and can be created using the "new"
statement..
statement
var a = new Array(); creates an array called "a"
a[0] = 1.2; sets the first element
a[1] = "JavaScript"; sets the second element
Arrays are important to understand because a number of components of the Document
Object Model (DOM) are implemented as arrays, like forms, images, and elements.
elements.

Events
Events are the triggers that call (start) one of your functions
functions.. Your client
client--side JavaScript
programs will not execute (run / be interpreted) unless started by an event.
event. An event could
be an action such as clicking on a button or placing your mouse over an image.
image. We will use
the onClick event for starting our form validation scripts, and the onMouseOver event for
creating graphic images that change when you place your cursor over them. them.
The available event handlers in JavaScript are:
are: (remember JavaScript is case-
case-sensitive)
onClick( )
A click event occurs when a button, checkbox, radio button, reset button, or submit button
is clicked.
clicked. This event is regularly used with a button to start script execution.
execution.
<INP T TYPE="Button" VA? E="Click Me"
onClick="window..alert('You Clicked me');
onClick="window me');">
In the above example when you click on the button "Click Me" it will execute the
JavaScript statement "window.
"window.alert('You Clicked me');me');". You can call any function or
method this way.
way.
onSubmit( )
A submit event occurs when the user submits a form. form. This event is regularly used with a
form and a submit button to start the form validation script.
script.

<FORM action="http
action="http:://www.
//www.karrox
karrox..com/formtest.
com/formtest.asp"
onSubmit="return checkform();
checkform();">
In the above example when the user clicks on the submit button, it will execute the function
"checkform()".. If the form passes all the validation tests, a true value is returned and the
"checkform()"
data will be passed to the "formtest.
"formtest.asp" CGI program
program.. If the form contents do not pass the
validation tests, it will not send the data to the "formtest.
"formtest.asp" CGI program
program..
Note:: We will be using these events in our discussion of Alerts, Prompts, and
Note
Confirmations;; as well as, for Form Validation.
Confirmations Validation.
onMouseOver( )
An onMouseOver event occurs when the user positions their mouse over a hyperlink, or a
linked region of a client-
client-side image map.
map.
<a href="http:
href="http://synergy.
//synergy.simplenet.
simplenet.com/simpsons/"
onMouseOver="window..status='The best Simpsons Webpage on the NET!';
onMouseOver="window NET!'; return
true;;">Click for information on the Simpsons.
true Simpsons.</A>
In the above example an |TM? link to a web site is created using the anchor tag. tag. The
onMouseOver() event is added to the anchor tag, and in this case the script will put a
message in the status line of the browser window
window.. Take a look at the results below.
below.

Note the message in the status line of the browser window.
onMouseOut( )
An onMouseOut event occurs when the user moves their mouse off of a hyperlink, or a
linked region of a client-
client-side image map.
<a href="http://synergy.simplenet.com/simpsons/"
onMouseOut="window.status='The best Simpsons Webpage on the NET!'; return
true;">Click for information on the Simpsons.</A>
This example is the similar to the one above, except when the mouse is over the link, the
hyperlink R? is shown in the status line, and when the mouse is moved off the hyperlink
the message is displayed.
Note We will be using these events in the Chapter on using Mouse Roll-
Roll-overs.

onFocus( )
This event occurs when a user tabs into or clicks on a password field, a text field, a
textarea, or a File pload field in an |TM? form. If a user clicks on one of these elements
in a form, it is receiving the user's focus.
<INP T TYPE="TEXT" NAME="Month"
onFocus="window.status=('Please enter the Month as two digits 01 through 12'); return
true;">
In this example when the user clicks on the month box or tabs into it a message is
displayed in the status line of the browser that indicates what the user should type in.

onChange( )
The change event happens when the user leaves a password, text, textarea or File pload
field in an |TM? form, and its value has changed.
onChange="window.status=('The value of the Month Changed!!!!'); return true;" >
<INP T TYPE="TEXT" NAME="Year">
onBlur( )
The blur event triggers when the user leaves a password, text, textarea or File pload field in
an |TM? form.
onBlur="window.status=('Do you not care about the value of the Month!'); return true;">
<INP T TYPE="TEXT" NAME="Year">
Note: It is usually a good idea to use either onChange or onBlur, and not both at the same
time as they will appear to conflict with one another.
on?oad( )
The load event triggers when the browser finishes loading a document or all the frame pages
within a <FRAMESET>.
ë <BODY on?oad="alert('Welcome to our website!');">

In this example after the page has completed loading into the browser the alert message
below is popped up.
onènload( )
The unload event occurs when you move to a new document. For example if you use the
back button, or click on a link to another page the unload event will occur.
<BODY on nload="alert('Thanks for checking out our site!');">
This example will popup the following message when someone moves off of the current
page.

Note: It is possible to specify multiple events on a single |TM? tag
Note: tag.. For example,
<a href="http:
href="http://synergy.
//synergy.simplenet.
simplenet.com/simpsons/"
onMouseOver="mouse11.src='gifs/mouse_over
onMouseOver="mouse src='gifs/mouse_over..gif';
gif'; "
onMouseOut="mouse11.src='gifs/mouse_out
onMouseOut="mouse src='gifs/mouse_out..gif';
gif'; ">
We will use this feature in the mouse over section.
section.

u ,$%* !u !
Ñlerts, Prompts, and uonfirms
Alerts, Prompts, and Confirms are all methods of the window object that create
predefined, popup style dialogue boxes within a window object.
window.alert( message ) The "message" is plain text (not |TM?) that displays in a dialog
box popped up over a window. The alert box will have a button labeled "OK" that will
dismiss the alert box when clicked.
window.alert("Hello Gary!");
The above line of code would produce the following popup window.

window.prompt( message, default) The "message" is again plain text that will be displayed
window.
in the dialog box popped up over the window, and the default is a string that is displayed as
the default input.
input. When default is set to "", nothing will be in the prompt box.
box. The prompt
window will have an input field for the user to enter information and an "OK" button and a
"Cancel" button.
button. This method will return the value that the user types in
in..
window..prompt('Please enter your name','Your Name')
window Name');;
The above line of code would produce the following popup window
window.confirm( question ) The question is another plain text string. It should be a

question that you want answered by the user.
window.confirm('Ñre ou reall over ears of age?');
The above line of code would produce the following popup window

If the user clicks on the OK button the method will return a Boolean value of true. true. If
however the user clicks on the cancel button the method will return a Boolean value of
false.. These return values can be stored in a variable like ageTest and used with branching
false
logic..
logic
ageTest = window.
window.confirm('Are you really over 21 years of age?');
age?');
Our lab for this section will demonstrate using all three window methods
methods..
et's examine t e following | Form example example
<|TM?> <|EAD> <TIT?E>Simple Form</TIT?E> </|EAD>
<BODY>
<FORM NAME="Form1">
Name: <INP T TYPE="TEXT" NAME="Name"><BR>
<INP T TYPE="Button" VA? E="Submit Info">
</FORM></BODY> </|TM?>

At this point the form will do nothing when the "Submit Info" button is pressed. What
we will first do is use the onClick event on the button to popup an alert message that
says |ello "The name typed in" followed by an exclamation mark.

To make this button function we need to add the onClick event to our |TM? page page..
<INP T TYPE="Button" VA? E="Submit Info"
onClick="window..alert('|ello ' + document.
onClick="window document.Form1
Form1.Name.
Name.value + '!');
'!');">
This says when the user clicks on the button, the browser will create an alert (the popup).
popup).
Alert is a method of the window object object.. In this case the string '|ello ' will be
concatenated with the data typed in by the user in the textbox and concatenated with the
exclamation mark.
mark. Single quotes are used to delimit the strings in this example because
the |TM? code requires the double quotation marks as delimiters of the attribute
onClick.. Remember our discussion of syntax
onClick syntax;; the JavaScript statement must end with a
semicolon..
semicolon
Y

<|TM?><|EAD><TIT?E> sing Prompts, Confirms, and Alerts</TIT?E>
<!

</SCRIPT>
</|EAD>
<BODY onload="do_stuff()">
<|1> sing Prompts, Confirms, and Alerts</|1>
</BODY>
</|TM?>

u ,( !6*
ureating a FOR wit an Ñctive uursor
When a web page, containing a FORM element, loads in the browser there is no default
condition that places the cursor inside the first input element.
element. If the user just starts to type,
nothing happens because the cursor is not active, anywhere in the document in the browser.
browser.
Many authors that create forms for use on the web would like to have the cursor placed and
active in the first input field.
field. It would mean that a person browsing wouldn¶t have to click
in the field before entering data;
data; they could simply begin to type.
type.
FORM elements of the type text, password, textarea and file upload support, not only
events such as onClick and onBlur but they also support the methods of "focus" and "blur"."blur".
This means that you can tell the cursor to be placed in the input field or that it can¶t be
placed in specified fields.
fields. If you combine this feature with the page¶s on?oad event you
can place the cursor in a designated field when the page loads.
loads.
<BODY on?oad="document.CardForm.|oldersName.focus()">
<FORM NAME="CardForm" action="http://www.karrox.com/formtest.asp">
Enter Cardholders Name: <INP T TYPE="TEXT" NAME="|oldersName"><BR>
<INP T TYPE="Submit" VA? E="Submit Info">
</FORM>
</BODY>
</|TM?>

èsing Form u ecking
Form validation is accomplished by using JavaScript to preprocess the information the
user types into a form before the data is sent to a CGI based server application.
application. This
practice is more efficient than allowing incorrectly formatted data to be sent to the server.
server.
If the information is incorrectly formatted you can alert the user with a pop-
pop-up and force
them to correct the mistake.
mistake. Form validation is one of the most common uses of
JavaScript
To examine this process we expand on our FORM in our web page page::
<BODY on?oad="document.CardForm.|oldersName.focus()">
<FORM NAME="CardForm" action="http://www.karrox.com/formtest.asp">
Card Number: <INP T TYPE="TEXT" NAME="CardNumber" SIZE="16"
MAX?ENGT|="16"><BR>
Card Expiry Date: <INP T TYPE="TEXT" NAME="CardMonth" SIZE="2"
MAX?ENGT|="2">
<INP T TYPE="TEXT" NAME="CardYear" SIZE="2" MAX?ENGT|="2"><BR>

This form has, as much "checking" as there is available with |TM?.|TM?. The card number
field is restricted to 16 characters, but does not require 16 at this point.
point. Our month and
year fields are broken into two text areas that will only allow two characters each, but do
not require two.
two.
Our script must c eck

eck
To make sure a name is entered into the Cardholder's Name field. field. We will test this by
making sure the user has typed in at least one character.
character.
To make sure the card number is 16 characters long, and is made up of only numbers.
numbers. We
will do this by testing the length of the string typed in by user, and testing to make sure
that it is only made up of numbers
numbers..

To make sure the month and year are entered as numbers, and that they are valid. This
means the month must be between 1 and 12 and the year must be greater than or equal to
this current year.
If any of these criteria are not met then an alert should notify the user of what is wrong, and
the information should not be sent to the server for processing.
uomplete Script
<|TM?> <|EAD> <TIT?E>Simple Form</TIT?E>

<!
-->
</SCRIPT>
</|EAD><BODY on?oad="document.CardForm.|oldersName.focus()">
FORM NAME="CardForm" action="http://www.karrox.com/formtest.asp" onsubmit="return
checkform();">

Card Number: <INP T TYPE="TEXT" NAME="CardNumber" SIZE="16"
MAX?ENGT|="16"><BR>
Card Expiry Date: <INP T TYPE="TEXT" NAME="CardMonth" SIZE="2"
MAX?ENGT|="2">
/<INP T TYPE="TEXT" NAME="CardYear" SIZE="2" MAX?ENGT|="2"><BR>

u ,( /
Image Object
When you add the |TM? tag <IMG> to your web page you are creating an image object. object.
For example
example::
<IMG SRC="gifs/mouse_out
SRC="gifs/mouse_out..gif">
The image objects on your page can be referenced as an array, where document.
document.image[0
image[0]
refers to the first image on the page, and document.
document.image[1
image[1] the second and so on
on.. If you
add the NAME attribute to the <IMG> tag we can use the value of the NAME attribute to
reference the image object.
object. For example
example::
<IMG NAME="mouse
NAME="mouse11" src="gifs/mouse_out
src="gifs/mouse_out..gif" border=
border=00>
This image object can be referenced as document.
document.image['mouse1
image['mouse1'].
']. Remember that
JavaScript is case sensitive and "mouse1
"mouse1" is different from "Mouse1
"Mouse1" or "MO SE SE11".
The generic syntax we will be using in this section is
is::
document..images['imagename'].
document images['imagename'].property = newvalue;
newvalue;
The image object has the following properties:
properties:
border
This value can only be read, and is the width of the border around the image specified in
pixels by the BORDER attribute
attribute..

complete
This value can only be read, and is a Boolean value that will let you know if the image
has completed downloading (true) or not (false).
(false).
eig t
This is a read only value that specifies the height in pixels of image set by the |EIG|T
attribute..
attribute
space
This is a read-
read-only value, and refers to the space on the right and left of the image
specified in pixels by the |SPACE attribute
attribute..
lowsrc
This is a readwrite string that specifies a R? of an alternate image. image. The image should
be suitable for display at low resolutions
resolutions;; it is specified by the ?OWSRC attribute
attribute..
name
This is a read-
read-only value, specified by the NAME attribute
attribute.. As you will see it is a good
idea to name your images
images..
src
This is a readwrite string that specifies a R? of the image.image.
vspace
This is a read-
read-only value, and refers to the space on the top and bottom of the image
specified in pixels by the VSPACE attribute
attribute. .

width
This is a read only value that specifies the width in pixels of image set by the WIDT|
attribute..
attribute
Since we can read and write to the src property, we can change the image that is
displayed in the browser.
browser. This is what allows us to create mouse roll-
roll-over, sometimes
called hover buttons, when used in combination with the <A> element in creating links.
links.
Mouse--over
Mouse
In the mouse rollover script that we will create, we will be changing the src property of
the appropriate image object when the onMouseOver and onMouseOut events are
triggered.. We will start with a very basic and simple implementation and then add to it to
triggered
make it more flexible and powerful.
powerful.
To create the effect we need two graphic images that are generally the same with a little
bit of difference for example mouse_out.
mouse_out.gif and mouse_over.
mouse_over.gif, both located in the \gifs
subdirectory of your student files.
files.
The following |TM? page codes with the addition of the JavaScript events will change
the image when the user positions their mouse over the image and change it back again
when they move their mouse off the image.
image. The image is originally set to the mouse off
image using the <IMG> tag tag..

<|TM?><|EAD><TIT?E>Mouse Over and Mouse Out</TIT?E></|EAD>
<BODY>
<a href="http://synergy.simplenet.com/simpsons/"
onMouseOver="mouse1.src='gifs/mouse_over.gif'; "
onMouseOut="mouse1.src='gifs/mouse_out.gif'; ">
<IMG name="mouse1" src="gifs/mouse_out.gif" border=0></A>
</BODY></|TM?>

u ,+
,+&7
Pop-up Windows
Pop-
In this Chapter we are going to be using the window object and the open and close
methods.. This particular programming technique can be put to good use or it can be
methods
misused.. A good use is to highlight a product a customer may be interested in
misused in..
window..open( URL, Name, Features, Replace )
window
Arguments::
Arguments
URL
the R? of the document to be displayed in the new window
window..
Name
an optional string that specifies the name property that can be used with the target
attribute..
attribute
Features
is a comma-
comma-separated list of features about the window; window; always?owered,
alwaysRaised, channelmode, dependent, directories, fullscreen, height, hotkeys,
inner|eight, innerWidth, left, location, menubar, outer|eight, innerWidth, resizable,
screenX, screenY, scrollbars, status, toolbar, top, width, z-lock

Replace
Optional boolean argument, that states weather the page that gets loaded gets added to
the page history in the browser.
browser. This argument was intended for use when changing the
contents of a window.
window.
window..close()
window
This method allows the user to close a window.
window.
!

When you create a new pop-pop-up window you will need to turn off any window features
that you do not want displayed in the window.
window. As well, you will need to set the size of
your new window.
window.
(status bar):
bar): the line at the bottom of the browser that displays information.
information. To
display a window with no status bar, set status=no.
status=no.
shows the URL of the page you are looking at
at.. To turn the location bar off,
location=no..
location=no
contains the buttons you use to move through history (back, and forward) to

stop web page loading, etc.
etc. To display a window with no toolbar, set toolbar=no
is the bar that has all of the drop down menus.
menus. To turn the menubar off,
menubar=no..
menubar=no

are the sliders on the right hand side and bottom of a window that let you

move up or down and left or right.
right. To turn off the scrollbars, scrollbars=no
scrollbars=no..
control the window's position from the left of your screen in pixels. pixels.
Left is used by Internet Explorer and screenX is used by Navigator.
Navigator.
! ! control the windows position from the top of your screen in pixels.
pixels. Top
is used by Internet Explorer and screenY is used by Navigator.
Navigator.

is the height of the window in pixels.

pixels.

is the width of the window in pixels.

pixels.
The following feature string sets the height to 500 pixels, width to 400, 400, and turns off the
menubar, scrollbars, status line, and the toolbars, and positions the window at the top of
the screen one hundred pixels from the left of the screen.
screen.
window..open('height=500
window open('height=500,width=
,width=400
400,, menubar=no, scrollbars=no, status=no,
toolbar=no, screenX=100
screenX=100,screenY=
,screenY=0 0,left=100
,left=100,top=
,top=00')
u

e can modif our script to create t e document t at will appear in our new
window instead of displaing a pre-
pre-made document as we did previousl
previousl..

To create the actual |TM? page that will appear in our pop
pop--up window we need to use
the document.write() method. This method allows us to write text to the specified
document. For example:
winpopup.document.write('<|TM?>\
winpopup.document.write('<|TM?>\n<|EAD>\ n<|EAD>\n');
This line will start the creation of our |TM? document in the window identified by the
winpopup window object.
uomplete Script
<|TM?><|EAD><TIT?E>JavaScript Popup Window</TIT?E>
<!

</SCRIPT></|EAD><BODY><FORM NAME="FORM1">
<INP T TYPE="B TTON" VA? E="Popup Window"
ONC?ICK="popupwin();">

HTML &amp; JavaScript

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML &amp; JavaScript

Uploaded by

Copyright:

Available Formats

| 

Presentation slides for

SED ± Division karROX

 Introduction to HTML  Introduction to JavaScript

Setting Document Properties

Document properties are controlled by attributes of the BODY element

÷ ,  . )/" ()/"

01  .   )/"  $ 2

3-÷1,     .  "

6 3 "  46.7 7 

)"  9 ):  ; " 9:

"" 9 ": ""; " 9:

<DFN> defining instance of the enclosed term </DFN>

D Definition ist.

The following elements represent links to other documents:

ulient--side Image aps

$; $ $; (

(; $ (; (

 ; $  ; (

uolor Some browsers support background colors in a table.

ureating a Frames Page

<A> sample - <A |REF="file

Form elements have properties:

0+,? 0). 3+>0.

3,? %  < ) "" ))

%6>,? 0  ""

The Java programming language was developed by Sun Microsystems

Designates a Java applet.

<META |TTP EQ IV="Refresh"CONTENT="1; R?=../directory/filename.htm">

Netscape originally created JavaScript;

A variable is a name assigned to a location in a computer's memory to store data.

var StringVar = new String("This is a string of characters.");

window.confirm( question ) The question is another plain text string. It should be a

Our script must c eck

<|TM?> <|EAD> <TIT?E>Simple Form</TIT?E>

    !

You might also like

HTML & JavaScript

HTML & JavaScript

|

Introduction to HTML Introduction to JavaScript

÷ , . )/" ()/"

01 . )/" $2

3-÷1, . "

6 3 " 46.7 7

)" 9 ): ; " 9:

"" 9 ": ""; " 9:

D Definition ist.

$; $ $; (

(; $ (; (

; $ ; (

uolor Some browsers support background colors in a table.

0+,? 0). 3+>0.

3,? % < ) "" ))

%6>,? 0 ""

Our script must c eck

!