Web Designing - Book

Choosing a layout method is often very personal.
One person might prefer absolute positioning while

another only uses floats with relative sized blocks.
- Mr. Nishant Rai
Syllabus
Course Contents:
Module I
Introduction to html programming
History of HTML, Structure of HTML, Adding Comments, Formatting Text,

Creating List, Creating Definition List, Creating Hyper Text Links, Creating Link
Lists, Inserting Inline Images, Creating Image Links, Horizontal Rules, Address
Tag, Working with Text
Changing font Sizes and Colors, Using Background Image, Marquee Tag.
Module II
Tables and frames, Creating Tables, Table Element, Adding Border, Adding
Column Headings, Adding Spacing and Padding, Adding a Caption, Setting the
table Width and Height, Add Row Headings, Aligning Cell contents, Setting
Column Width, Centering a Table, Inserting and Image, Spannig Columns,
Spanning Rows Assigning Backgroung Colors, Frame Elements, Creation of
Frame Based Pages, Noframes Element.
Module III
Forms and Java Script Introduction to Forms, Form Elements, Front level
validations using JavaScript
Module IV
Cascading style sheets, Overview of style sheets, Different ways to use style
sheets, Selectors DIV and SPAN Elements, Adding style to a Document, Use id
Classes and Ids, Style Sheet Properties.
Module V: XML
Introduction to XML, XML Basics, XML Structure, Developing a DTD from XML
code, Viewing XML, Viewing XML using the XML Data Source Object, Viewing
XML using Style Sheets.
Text & References:

Text:
HTML, DHTML, JavaScript, Perl, CGI, Ivan Bayross, BPB Publication.
References:
HTML Complete Reference, BPB Publication.
Internet for everyone, Alexis Leon and Mathew Leon, Leon Tech world.
Module I
Introduction to HTML
Basic Web Design
This hands-on workshop introduces you to the basic principles of Web site design and
authoring using HTML. You will then use FrontPage to create your web page or site and
publish it to the World Wide Web for viewing.
Objectives
Understand and apply design principles when creating and modifying a Web site.
Recognize HTML and Web terminology such as hypertext, tags, browser, and
HTML.
Identify the basic structure of an HTML document and create a simple Web page
using HTML.
Create a new Web site or modify an existing website using FrontPage.
Use tables to design the layout of a Web page.
Understand how typography works on the Web and format fonts and paragraphs..
Set Web page properties such as background colors and images.
Understand graphic formats for Web pages; insert graphics, modify picture
properties
Developing a Web Site

The Five Golden Rules
As with any other project, the first phase in creating a new
web site is planning. This involves determining the site’s
Create a clear visual
navigation structure, content, and page layout. It is only
hierarchy on each
after this has been accomplished that HTML coding or
page.
authoring tools like FrontPage can be used effectively to
actually create the site. Take advantage of
conventions.
The planning process involves: Break pages into
Define site purpose clearly defined
o What are the web site’s objectives? areas.
o Who is the target audience? Make it obvious
o What is their connectivity (dial up, what’s clickable.
broadband, network, etc.)? Minimize noise.
o What computers (PC/Mac) and browsers
(IE, Netscape, Opera, etc.) do they use? Source:
Don’t Make Me Think, Steve
Define content Krug
o What you have and what you need.
o How it will be organized. Categorize
information rather than defining categories
and filling them. Build the site structure around content organization.
o What graphics are required and how many? Remember, the larger the
number of graphics, the longer the page will take to download.
Develop a file naming convention and stick to it.
Web files and folders should not have any spaces and be in lowercase.
Use the underscore (_) to connect words in file names.
File names cannot contain colons (:), asterisks (*), questions marks
(?), or other special characters.
Avoid spaces in file or folder names. If necessary use an underscore between

words.
Determine site architecture and navigation. A simple flowchart-style sketch
usually works best. Hierarchical models are best suited to the web.
Use sticky notes to organize your navigation structure. Use one sticky
note per page and arrange them on a wall or table till you achieve
your desired hierarchy. Index cards can be used in a similar manner.
Sketch page layouts and content layouts to create appropriate page design.
Assess sketches for appropriateness, placement, consistency and usability, and
revise if necessary.
Designing Navigation Bars

The main goal of your website should be to make it easy for users to perform useful
tasks. Develop a clear information architecture that is simple, consistent, and follows
convention.
Key Elements of Navigation
Site ID.
Global navigation bar.
―You are here‖ indicator.
Local navigation bar.
Breadcrumb trail
Small text version of navigation bars (optional)
Source: Don’t Make Me Think, Steve Krug
Site ID Global Navigation
Breadcrumb Trail
“You are here” indicator
Local Navigation
You will know you have succeeded if your site navigation helps users answer these basic
questions:
Where am I? (Site ID)
Where page am I on? (Indicator)
Where can I go? (Navigation)
Page Design
With web pages, the layout design process accounts for the arrangement of text and
graphics elements on the page. These elements can be broadly divided into:
Page Header: Located at the top of the page, it includes the page banner or title
and the navigation bars.
Page Footer: Located at the bottom of the page, this is where you insert copyright
and authoring information, the date of the most recent update, institutional
affiliation.
Side Navigation: This is usually a rail along the side of the page that displays the
global or local navigation.
It is usually a good policy to sketch out the page layout and identify the position of
each element on that page as demonstrated in the diagram below.
Page
Header
Navigation
Panel
Page
Footer
Home Page Layout
Has to convey site identity and mission: what it is and what it’s
for.
Has to provide an overview of what the site has to offer, and how
it’s organized.
Should provide a way to search the site.
Has to appeal to diverse interests.
Source: Don’t Make Me Think, Steve Krug
Design Concepts
When designing a web site, you need to consider four basic design elements:
Appropriateness
o Does it match with the site’s target audience?
o Do the graphics mesh with the site’s intended purpose?
o Do the tone and style of the language complement the site’s objectives?
Placement
o Place the most important information at the top of the page.
o Use white space to create breaks between page elements.
Consistency
o Place page elements like titles, banners, logos, and navigation elements in
the same spot on every page.
o Consistent visual cues provide the user with a reference point, making it
easier for them to navigate the site.
Usability
o Make the site self-explanatory. Don’t make your users think!
o Make your ―clickables‖ obvious.
o Follow conventions.
o Keep your text brief and to the point. The less there is to scan, the easier it
will be for your users to find their information.
o Design for the lowest common denominator of 800x600 pixels in screen
resolution.
o Screen-size page banners and navigation bars should not exceed 760
pixels in width, and 410 pixels in height.


Introduction to HTML
What is HTML?
An acronym for Hypertext Markup Language, HTML is the language used to create web
documents. Contrary to popular notion, HTML is not a programming language. It is
simply a set of codes that define the layout and content of a web page so that they can be
read and displayed by a web browser. A non-proprietary language, HTML can be created
by a simple text editor as well as a sophisticated web authoring tool like FrontPage.
The World Wide Web Consortium, also know as the W3C, monitors the development of
HTML. As new features are added and obsolete ones deprecated (removed), it is assigned
version numbers. The most recent version is HTML 4.01.
HTML Documents
HTML documents are made up of tags or angled brackets (<>) that contain an element
within them to determine the layout and formatting of the web page. For example, <B> is
the tag used to define text in bold where ―B‖ is the element contained within the tag.
Elements can also include attributes, or additional information for that element.
Attributes are included inside the start tag. For example, you can specify the alignment of
images (top, middle, or bottom) by including the appropriate attribute with the image
source HTML code.
Structure
The basic HTML document is contained within the <HTML> </HTML> tags and
comprises two sections: Head and Body.
The Head contains the page title and meta-tags within the <HEAD> </HEAD> tags. Any
JavaScript code that is used, as well as Cascading Style Sheet information is also
contained within the Head. This section will not be displayed on the web page.
The Body holds the actual content of the page (text, graphics, lists, etc.) contained within
the <BODY> </BODY> tags. The <HTML>, <HEAD>, <TITLE>, and <BODY> tags
are also referred to as document tags.
A basic HTML document would look something like this:
<HTML>
<HEAD>
<TITLE>A Simple HTML Example</TITLE>
</HEAD>
<BODY>
Welcome to the world of HTML. This is the first paragraph.
</BODY>
</HTML>
Tags are case insensitive, i.e. <B> will work as well as <b>.
Not all tags work with all web browsers. If a browser does not
recognize a tag, it simply ignores it. It will display the
information contained within the tags however.
Creating an HTML Document

Since HTML documents are essentially text files with the extension .htm or.html, any
basic text editor like Notepad WordPad can be used to create one. You can also the
HTML view in authoring systems like FrontPage or Dreamweaver, or HTML hand
coding applications like Home Site.
HTML documents do not recognize white spaces created by formatting tools such as
spaces, linefeeds, and carriage returns. These are automatically compressed into a single
space when the page is displayed in the browser. For instance, the HTML code in the
example above can also be written out as
<HTML>
<HEAD><TITLE>A Simple HTML Example</TITLE></HEAD>
<BODY>Welcome to the world of HTML. This is the first
paragraph.</BODY>
</HTML>
and it would still display in exactly the same manner in the browser. However, it is harder
to read and edit in this format. Consequently, for clarity in reading and editing HTML, it
is best to structure the document using carriage returns and indents.
Markup Tags
The information contained in the Body section of an HTML document is formatted using
markup tags. These tags allow us to create paragraphs, line breaks, headings, lists, etc.
They can also be used to set the position of the content using alignment attributes. The
most common markup tags are:
Heading
These tags are used to highlight text by making them bigger and bolder than normal text.
There are six levels of headings numbered 1 through 6, where 1 is the biggest and 6 is the
smallest heading. Headings are specified as <Hy> </Hy> where H stands for heading and
y is the level number (1 to 6).
E.g.:
<HTML>
<HEAD>
<TITLE> Headings</TITLE
</HEAD>
<BODY>
<H1>Level 1 heading</H1>
<H2>Level 2 heading</H2>
</BODY>
</HTML>
Paragraph
These tags, denoted by <P> </P>, are used to define paragraphs. Since HTML does not
recognize carriage returns, it is especially important to use these tags to indicate
paragraphs, or you will end up with as one long block of text.
E.g.:
<HTML>
<HEAD>
<TITLE> Working with Paragraphs </TITLE
</HEAD>
<BODY>
<P>This is the opening paragraph for this page. It does not have much information at
the moment, but it indicates how a paragraph is constructed in HTML.
</P>
<P>This is the second paragraph on this page.
</P>
</BODY>
</HTML>
Paragraphs can be positioned or aligned relative to the sides of the page by using the
ALIGN=―alignment‖ attribute within the opening tag where the value for alignment is
left, right, center, or justified. The default alignment for a paragraph tag is left.
E.g.
<HTML>
<HEAD>
<TITLE> Working with Paragraphs </TITLE
</HEAD>
<BODY>
<P align = ―center‖>This is the opening paragraph for this page. I have used the
attribute align with the value center to put it in the middle of the page.
</P>
<P align = ―right‖>This is the second paragraph on this page and it is right aligned.
</P>
</BODY>
</HTML>
Line Break
The line break tag <BR> is used to simulate the effect of creating a line break by pressing
the Enter key on the keyboard. It is one of the few HTML tags that is not paired with a
closing tag.
E.g.
<HTML>
<HEAD><TITLE> Page with Line Breaks </TITLE
</HEAD>
<BODY>
Trinity University<BR>
One Trinity Place<BR>
San Antonio, TX 78212<BR>
USA
</BODY>
</HTML>
Comments
Comments are one of the most useful tools in HTML as they can be used to explain and
clarify the structure of the HTML code to other readers. They can also be used to include
information such as the name of the person editing a file or the software and version used
in creating a file. Comments do not appear on the web page. To include a comment in
your HTML file, enter:


Introduction to FrontPage
What is FrontPage?
FrontPage is an application used to create web pages. As an authoring tool, FrontPage
includes tools that allow you to design, create, manage, and publish web pages without
needing prior knowledge of HTML. However, a basic grounding in HTML allows you to
tweak and optimize the HTML code that FrontPage generates.
Creating a New Web Page
To launch FrontPage 2002, click on the shortcut on your desktop
(see image on the right). If no icon is available on the desktop, click
on the Start button in the lower left corner of the screen, then
Programs, and then on Microsoft FrontPage.
Unlike previous versions of FrontPage where a new page
automatically appeared on launching the application, when you first launch FrontPage
2002, it displays an empty screen (grey area). To create your first web page click File 
New  Page or Web or on the Create a new normal page icon.
Your screen should now look like this.
Source: Microsoft Office XP Inside Out

The Views bar, on the left of the screen, allows you to view your web
page or site, in many different ways. Notice that the topmost button
titled Page seems to be ―depressed.‖ This indicates that you are in the
Editor view. This view is primarily used when creating and editing a
web page or site.
Folders, shows you your web site in ―file‖ form. You can’t see
anything at the moment because we haven’t created a web site.
Reports will show you the status of all the pages in your web site as
you create them.
Navigation will show you, as you create your web site pages, a little
organization chart. The lines connecting the boxes (as shown in the
Navigation icon button), indicate the hyperlinks between the pages.
Tasks is a little word processor that lets you maintain a ―To Do” list
once you begin creating your web site.
Click back on the Page view to begin building your web page.
Page Views
FrontPage allows you to work on your page in three views:
Normal View or the WYSIWYG (What You See Is
What You Get) editor. This is the most commonly
used view.
HTML View, which displays the HTML code generated for the page. This is
useful if you want to modify or tweak the HTML code.
Preview Page View displays the page as it would appear on a web browser. You
cannot make any modifications in this view.
To select a specific view, click on the appropriate tab in the lower left hand corner of the
Page View window.
Use the Reveal Tags (Ctrl+/) option under View in the Menu Bar to
display HTML tags in the Normal View. These tags are for
information only and cannot be edited or changed in this view.
Page Properties
The page properties option allows you to change the default look (white) of your
webpage by adding a background images or color, page titles, and even sound and
animation.
To view the Page Properties screen, select

Format  Background in the Menu Bar.
You can also right-click on the page and select
Page Properties in the pop-up menu.
You should now see the Page Properties screen shown below.. As you can see, you can
set a number of page options here. For this class, we will only work with title, and
background color and image.
General
In the title box, type in a new
page title, appropriate to your
page. It is not a good idea to
have background sounds on
your web page as it slows the
download.
Background
Click on the Background tab
to change screen options. To
add a background image, click
on the Browse button and
navigate to the location of the
desired image.
To change the default

background and text colors,
click on the little arrow to drop
down the menu.
You can also change hyperlink colors in the same manner. However, it is advisable to
stay with the convention i.e.:
Blue for a page that has not been visited yet.
Purple for a page that has been viewed.
Red is the color of the link as it is being pressed.
Light colored backgrounds with dark text work well together.

A dark background can add drama, but needs a bright text color for
contrast..
Bright colors are eye-catching, but can tire a reader. Use them sparingly.
Use background images that have subtle patterns and textures. A busy
background image makes it harder for the user to read the content.
Working with Text

To place content in a new page simply start typing in the information onto the page, like
you would in a word processor. Check that you are in the Page View (the Page button in
the View bar will have a square around it) and that your cursor is flashing on the left
hand side of the white area.
At the upper left corner, above the white area, you should
see the indicator new_page_1.htm. If you don’t, click on
the Page button again.
Type in a heading for your page (E.g. My First Web Page) and then press the Enter key.
Every time you press the Enter key, FrontPage automatically generates a paragraph tag
(<P> </P>) with a blank line after it.
To insert a line break (<BR>) instead of a paragraph break, use the Shift-Enter
combination.
When modifying a web page, it is best to view the formatting marks.

Use the Show All button - - to display formatting marks.
Formatting Text
You can format text to be in different fonts, sizes, styles, and colors using the lists and
buttons on the toolbar or the Format  Font option in the Menu Bar.
Font List
Size List
Font Type
It is best to select a simple, san-serif font that is easily available on most computers to
avoid variations in how the page is displayed. Choose fonts such as Arial, Verdana, or
Helvetica that are easy to read and available on most computers.
Avoid leaving the font setting at Normal or Default. This will

display the page in whatever font the user has set as default.
Font Style
This usually refers to setting text as bold, italics, headers, lists, etc.. An easy method to
convert text to bold or italics is to select the text and then click on the Bold ( ) or
Italics ( ) button.
Don’t use the underline style as it will look like a hyperlink and
confuse the reader.
To set text as a header or list, select the appropriate option

from the Style menu on the Tool Bar. Header sizes range
from 1 to 6, with 1 as the largest and 6 as the smallest.
Font Size
In web documents, font sizes have different values from the point sizes used in word
processors. The latter are indicated in parentheses next to the HTML sizes for a sense of
proportion. A point size of 2 or 3 works the best for paragraph text. Select the desired
size from the list or the Font dialog box.
The Font dialog box offer allows you to set text effects such as
superscripts, subscripts, strikethrough, etc. Not all of them are
supported by browsers, and some, like Blink, can also be annoying.
Avoid using them.
Font Color
You can select font color along with other options in the
Font dialog box. You can also use the Font Color button
on the Tool Bar.
Formatting Paragraphs
Paragraphs are aligned or positioned relative to the sides of the web page as Left, Right,
Centered, or Justified. You can align a paragraph with any of the following methods:
Right-click in the paragraph and select the Paragraph command from the menu.
Select Format  Paragraph
Use the Align Left ( ), Align Right ( ), Center ( ), or Justify ( ) buttons
on the Tool Bar.
The first two methods will open a dialog box where you can set the alignment as well
other options such as text indents and line spacing.
Inserting a Picture
Graphics for web documents should be in one of the following formats:
GIF (Graphic Interchange Format): Limited to 256 colors, therefore, best suited for
logos and clip art (non-photo images)
JPEG (Joint Photographic Experts Group): This format supports millions of colors
and is ideal for photographs. Save scanned photos in this format.
To insert your picture, click on Insert

 Picture in the Menu Bar. Select
From File or Clip Art to specify the
file location.
When the Picture menu screen appears,
navigate to the location of the desired
image, select it, and then click Insert to
place it on the page.
In order for the page to load correctly, all the ―parts‖ of the web page
(graphics, animations, video files, photos, sounds, etc.) have to be located
in the ―same place‖. If the web ―page‖ can’t find items, you will not be
able to see them in your page.
Make sure you put your image files in the same location as your web
page.
Modifying Picture Properties

Once you have inserted the image, you can change its size and positioning on the screen.
To resize an image, click on it once to select and display the sizing handles (small
―squares‖ at each of the corners and in the middle of the top, bottom, and side edges).
Use these handles to change image proportions.
Dragging on a corner handle sizes the graphic proportionately.

Dragging the middle handle will distort the image.
For precise sizing as well as to set other options, right-click on the image and select
Picture Properties from the menu to display the Picture Properties dialog box.
Change the Alignment of the

image depending on how you
want it positioned on the page.
To add a border, enter a value

(in pixels) in the Border
Thickness box. The higher your
value, the thicker your border
will be. The default value is 0 or
No Border.
Use the Horizontal spacing and

Vertical spacing options to add
white space around the picture,
both above and below (vertical)
or on both sides (horizontal).
This prevents text from running
into the image.
Cropping Graphics
You can also resize an image by cropping it so that you only retain the details you want.
Basic cropping can be done in FrontPage itself as follows:
Select View  Toolbars  Pictures to bring up the Pictures toolbar.
Click on the Crop button ( ) to display the cropping box on the graphic.
Drag the cropping box handles to size the box and click on the Crop button again
to crop the graphic.
It is highly recommended that you use an image editing application like

Adobe Photoshop to resize and crop images, and then insert the modified
images into your web page.
Hyperlinks
A web page’s power lies in its ability to link text and/or an image to another document or
section of a document. Text hyperlinks are underlined and highlighted in blue to make it
easy for the reader to pick them out while scanning the page.
Select the text or graphic that will function as the hyperlink, then select Insert 
Hyperlink from the Menu Bar or use the shortcut Ctrl+K. You can also click on the
Hyperlink button on the Tool Bar.
In the Insert Hyperlink dialog box, click on the Hyperlink button at the top of the
dialog box.
Hyperlink
button
A Text Help will appear indicating that this button will ―Browse to the web.‖ You will
then be taken to the default page in your browser. In the Address Area, type in the
address of the web page or site you would like to link to and tap the Enter key to go to
that page. When you see the web site, click on the Front Page button at the bottom of
your screen in the task bar.
This will take you back to FrontPage 2002 and the Insert Hyperlink dialog box.
Click on the Browsed Pages button and select your site from the list of choices that
appears. The Address area at the bottom of the menu screen will also indicate the web
address to which you browsed. Click on OK to complete placing the hyperlink.
Web address
Bookmark Links
Bookmark links are used to link to a section within the same document. It is particularly
useful with long documents that would require the user to scroll up and down. There are
two steps to adding a bookmark link:
Create the bookmark.
Create a link to the bookmark.
To create a bookmark, position the cursor by the first word of

the section you want to bookmark and select Insert 
Bookmark from the Menu Bar. Give the bookmark a
suitably descriptive name and select OK. In the Normal Page
View, a bookmark will show with a dashed underline.
To create the hyperlink to the bookmark, select the text to be hyperlinked, then select
Insert  Hyperlink from the Menu Bar or use the shortcut Ctrl+K. You can also click
on the Hyperlink button on the Tool Bar.
This will open up the Insert Hyperlink dialog box. Click on the
Bookmark… button and select the appropriate bookmark. The
hyperlinked text will now appear as blue underlined on the page.
To test your link, hold down the Ctrl key and click on the link.
Email Links
Email links are used so that users can email webmasters or other contact individuals their
comments and feedback. To create an email link, select Insert  Hyperlink from the
Menu Bar or use the shortcut Ctrl+K. You can also click on the Hyperlink button on
the Tool Bar. In the Insert Hyperlink dialog box, click on Email Address and fill out
the email address.
Saving Your Web Page

It’s wise to save your web page periodically so that you don’t lose your work. You can
save your file by selecting the Save option from the File menu (File  Save), or by
clicking the Save button.
When you save a web page for the first time, the Save As dialog box will appear. The
Save In box displays the location name. Click on the arrow on the right hand corner of
the box to display more locations. When the Save In box displays the desired location,
type in the file name in the File name box and click the Save button. FrontPage will
automatically add the extension .htm to the file name.
More locations
Location name
File name
FrontPage will try to use your title for the name of the web page.
If it is more than 8 characters long, some older computer systems and
servers might not work well with the name.
Also, the name should not have an apostrophe (’) as this is a reserved
Java character and could cause later problems as well.
Tables
A table on a web document is essentially a grid of rows and columns. Each intersection
of a row and a column creates a cell. Tables make it easier to design page layouts because
they allow you to display information in a formatted tabular form.
Table properties for each web page should be determined and sketched out as early as
possible. Several small tables will load faster than one long table. Sometimes,
depending on the content, you may need to tables within tables. These are called nested
tables.
Creating a Table
To create a table on your page, place the cursor at the point you want the table to be and
select Table  Insert  Table from the Menu
Bar. This will display the Insert Table dialog box
shown below.
Use the Rows and Columns options to determine the

number of rows and columns in the table. (This is where having a sketch becomes
handy.)
Select OK once you have entered your options.
You can create a basic table using the Table button ( ) on the Tool
Bar. Click the button and drag the mouse over the grid, highlighting the
cells that should appear on the table. When the table size has been
selected, click the mouse button again.
Table Properties
Specify width sets the width of the table by a distinct number of pixels or by a
percentage of the screen width. Use the In pixels option, when you want the table to be a
certain width and avoid horizontal size changes.
Alignment refers to the table's position on the page as in centered, left, right, or justified.
The default is usually left alignment.
Cell padding is the number of pixels between the text and the cell walls.
Cell spacing is the number of pixels between each table cell.
Specify height is usually not necessary to set since the height depends on the number of
rows in the table.
Border size indicates the thickness of the border around each cell. Tables used for
content layout should have a border of 0 to hide the borders. Tables that are used to
display tabular information can have their borders set to higher values.
E.g.
Table with no border The same table with a border of 5 pixels
Border color defines the color used for the border. For example, the border color in the
table above is grey.
Background color adds a colored background to the table cells.

E.g.
Use background picture add a background image to the table.
E.g.
Working with Cells

To add content (text or graphic) to a cell, click in the cell to place the cursor there, then
type to enter text or insert the graphic.
Within a cell, the formatting options are the same as within the document. Therefore,
pressing the Enter key will create a paragraph break, while pressing Shift+Enter will
create a line break.
Pressing the Down Arrow (↓) key will move the cursor out of the table and to a new
paragraph below.
Cell Properties
To modify cells properties, first select the cells to be changed, then select Tables 
Properties  Cell from the Menu Bar. You can also right-click within a cell and select
Cell Properties from the menu. Either option will bring up the Cell Properties dialog
box.
Horizontal alignment defines the position of the content within the cell. The default
is the Left side of the table cell. You can change this to Centered, Right, or
Justified.
Vertical alignment refers to the position of the contents relative to the top and
bottom of the cell. The default is at the Middle.
Specify width and specify height defines the width and height of the cells. Percentages
refer to the portion of the table, not the entire screen.
The Header cell option will automatically bold and center the cell content.
Border color changes the color of the cell border as demonstrated below.
Background color changes the cell's background color.
Background image adds a graphic to the background of each cell.
Spanning Cells
Sometimes, you may need to create a cell that spans rows or columns; a cell that carries
the page banner or title for example. In such situations, you will need to span that cell
across columns or rows as the case may be. Using the table used in the above examples, it
would work like this:
Insert a new row at the top of the table.

Type the text of the row that will be spanned across the columns into the first cell.
Highlight
both cells in the top row and select Table  Merge Cells from the Menu Bar.
You can also right-click and select it from the popup menu.
Inserting Rows and Columns
To add rows or columns to a table, place a cursor in the cell that the new row or column
will be adjacent to. Then select Table  Insert  Rows or Columns from the Menu
Bar to open the Insert Rows or Columns dialog
box.
To insert a row, select Rows and enter the

Number of Rows.
Then select the Location of the new row by
selecting Above selection or Below
selection from where you placed the cursor
in step 1.
Click Columns to insert a new column and
the choices will change. Enter the Number
of columns and the Location left or right of
the selected point.
Click OK.
You can also insert a row or column right-clicking in the cell the new row or
column will be adjacent to. Select Insert Row or Insert Column from the
popup menu.

Creating a Website
In this section, you will learn to create a small web site using FrontPage. It is
recommended that you familiarize yourself with the basic concepts of web design, and
learn to use FrontPage to create and edit web pages prior to creating a web site.
In the chapter Introduction to FrontPage, you learnt to hyperlink to other web pages
and sites. When creating a web site, FrontPage automatically creates the links to the other
pages in your web site.
Launch FrontPage by clicking on the shortcut on your desktop (see

image on the right). If no icon is available on the desktop, click on
the Start button in the lower left corner of the screen, then
Programs, and then on Microsoft FrontPage. Take a few
moments to review what the screen should look like and re-familiarize yourself with the
various buttons on the top and left side of the screen.
If you still have your single web page on the screen, select File  Close in the
Menu Bar. If you are prompted to save your changes, select Yes.
To create a new web site, select File  New  Page or Web in the Menu Bar. This
will bring up a ―Task Pane‖ on the
right hand side of your screen.
The Task Pane is Office 2002’s alternative to the dialog box. It is a Web-style
command area that you can dock along the right or left edge of your screen or
float anywhere on the screen.
Source: Microsoft Office SP Inside Out
Place your cursor over the small yellow folder

with an ―earth‖ on it or on the text Empty Web.
You will notice that the words Empty Web are

now underlined in blue. You will also notice that
your cursor will change to the ―small pointy
hand‖ hyperlink icon. Click on Empty Web to
display the Web Site Templates dialog box.
To create a space for your web site, you need to

do the following in the dialog box:
First (1) , make sure that the upper left icon One Page Web is highlighted. If
it is not, click on it.
Second (2), in the ―white area‖ under Options, specify the location of your
new web by typing in c:\webtest.
If your Web Site Templates dialog box should looks like the one on the following
page, click OK. This will take you back to the FrontPage 2002 main screen.
It may appear that nothing has happened. However, if you look at the upper left
corner of your screen you will see that the web site c:\webtest has been created (se
image below).
Since this is a web site, and the Views Bar on the left of the screen is set on Page,
you will have to select another button in the Views Bar to be able to see and work
with your web site.
1
.
2
.
To visually see/confirm that your web site has been

created by FrontPage, click on View in the Menu
Bar. In the drop-down menu, click on Folder List .
The Folder List will now appear on the left side of your screen to the right of the
Views Bar. The Folder List indicates that your new web site is located on the C: drive in
the Folder webtest. Notice also that two new folders have been created by FrontPage:
private and images. FrontPage has also created your initial home page called index.htm
To create our web site we’ll want to be in the Navigation View, so click on the
Navigation button on the View Bar. When this process is complete
you will see your initial Home Page of the web site in the center of
the screen.
Take a few minutes to look at all of the “stuff” on the screen. Take note of the words
below the Home Page (index.htm), they’re important.
Saving Your Web Site

If you haven’t already, you’ll notice that the Save option under File in the Menu Bar is
grayed out, as is the Save button in the Tool Bar. One of the neat things in FrontPage
2002 is that it automatically saves your web site as you make a change.
To see this, select File  Exit in the Menu Bar. FrontPage will close. Now open
FrontPage as you did at the beginning of this tutorial. Your new web site will shows up
just as you had left it. This is a new feature of FrontPage 2002.
Working on Your Web Site

To begin working on your web site pages, select File  Open and click on the small
triangle to the right of the Look in area. Navigate to your saved Web (webtest), select
index.htm (or the file you want to work on), and click on Open. Then switch to the
Navigation View so you can get started creating your web site
If your Folder List view area is still

visible, simply click on the small ―X‖
in the upper right corner of the
Folder List view area.
You will still have to save individual web page

changes as you work on them.
Creating Web Site Structure
You should be in Navigation View at this point.
First, click on the Home or Index Page in the middle of the screen. Prior to your click,
it will appear as a light yellow icon, when you click on it, it will turn blue. This indicates
to FrontPage which page you desire to work on. In this case you will add, and
automatically link, three additional pages below your main home page.
If you accidentally double-clicked on the Home/Index Page icon, FrontPage will

assume you want to edit the page and load it in the Editor. Simply click on the
Navigation button in the View Bar and you’ll be back where you want to be.
Again, make sure the Home Page icon is blue. To add the first page
under your home page, click on the New Page button (looks like a sheet
of paper) in the upper left corner of the screen. As soon as you click,
your screen will change to reflect that you have just created New Page 1 below your
Home Page (index.htm).
This is where FrontPage really does its work. When you add a new
page, FrontPage automatically hyperlinks it to the corresponding
page. Your screen should now look like the one at the right.
Add two more pages under your Home Page (index.htm). Each
time, click on the Home Page (index.htm) to turn it blue, and then
click on the New Page button. Your screen should now look like
the one below:.
Next, we’ll add two pages under New Page 3. The process is similar to what we just did.
First, click on New Page 3, to turn it blue, and then click on the New Page button. Do
this twice. Your web site should now look like the one below.
If you make a mistake as you are adding new pages, simply
click-on the erroneous new page and tap the Delete key.
Or right click on the page and select Delete from the popup
menu.
You can also click on the Undo button.
You now have the beginning of a small web site.
Before you can look at it however, you need to do a very important task. You need to
tell FrontPage what you want to see on your web pages in your web site. To do this,
select Format  Shared Borders in the Menu Bar. This will bring up the Shared
Borders dialog box.
Shared borders allow you to display content that is identical to all

pages without having to repeat the process for each page. If you add
or edit an element in a shared border in one page, it will affect the
content in all the pages that display that shared border.
Typically, a top shared border will contain a page banner and

navigation bar, the left another navigation bar, and the bottom,
information such as email, copyright notice, etc.
To make the titles and the links of each web page visible, select All Pages. Also check
the squares to the left of Top and Include navigation buttons, and Left, and Include
navigation buttons.
Your Shared Borders screen should look exactly like the one on the following page.
When it does, select OK.
To see what your site looks like at this point, double click on the Home Page
(index.htm) icon. You can also right-click on the Home Page (index.htm) icon and
select Open from the popup menu. This will load the Home Page in the Editor (Page
View).
Take a few moments to look at the top of the page in the Editor (Page View). It should
look like the view below.
Observe that the title to the Home Page (index.htm) appears at the top of the page in the
Editor (Page View) – just as it did when FrontPage created it.
Also, New Page 1, 2 and 3 on the left side of the page are links to the pages that you
created one level below the Home Page (index..htm).
As indicated earlier, you will return to the Navigation View and re-name these pages so
that they make more sense to your web site. Don’t worry about the dashed lines, these
are simply there to assist you later in the Page View. They will disappear when you view
your web site in a browser.
Viewing Your Website in a Browser

To see what the site would look like on the Web, in Page View, click
on the browser button in the Tool Bar. Or select File  Preview in
Browser from the Menu Bar.
When you choose Preview in Browser, FrontPage will ask you to

choose a browser available on your computer. Internet Explorer is
the default browser at Trinity University.
However, when possible, it is recommended that you view the site

in other browsers such as Netscape and AOL to ensure
compatibility.
Your initial view of your Home Page (index.htm) should look like the image below.
In the browser, your ―blank‖ website will respond like any other website. When you
move the cursor over the titles New Page 1, New Page 2, and New Page 3, you will
notice that the pointing hand appears, indicating a hyperlink.
Click on New Page 1, it should look like the image below.

The text buttons on the line below the title New Page 1 are hyperlinks back to the
Home Page and to pages 2 and 3. When you created your Shared Borders, you set it up
so that links to pages that are above or on the same level as the current page (New Page
1 in this example) show below the page title.
It does not matter if there are more than three pages above, or on the same level as the
current page, all the pages will show with their names. These are part of the automatic
hyperlinks that FrontPage creates.
Now click on New Page 3 in the browser. Your browser should now look like the image
below.
Pages
Below
New
Page 3 Pages Above and
at the Same Level
as New Page 3
Remember the two new pages you created below New Page 3? These now show up as
New Page 4 and New Page 5 on the left side of the page. The line below New Page 3
now contains the text links for pages above or on the same navigation level as New Page
3.
Creating Titles for Website Pages

To get an idea of how page titles are displayed in FrontPage, click on the Folders button
in the View Bar. You should now see the following screen:
The Name column on the left side of the screen displays the file names (index.htm,
new_page_1, etc.) for each page. The Title column displays the actual page names as
they appear on the Navigation View boxes (index.htm, New Page 1, etc.). When you
rename the page titles, the new titles will appear in the Title column.
To rename a file name (new_page_1.htm in this example), right-

click on the file name in the Folder View in the View Bar, select
Rename, and type in the desired file name.
Remember the file name conventions outlined earlier in this

book when renaming files.
Return to the Navigation View in the View Bar to give your pages new titles.
Click once on the Home Page (index.htm) box to turn it blue.

Then click on the title (index.htm) and wait a few moments till
the title is highlighted in blue. Your screen should look like the
image on the right.
In a Windows program this indicates that you can edit the text. You can start typing
immediately to replace index.htm, or you can delete the text and then type in the new
page title.
For now, type in First Name’s Home Page where First Name’s is
your first name, and tap the Enter key when you are finished. Select
View  Refresh on the Menu Bar to update your changes. You
will see the page title is now the one you entered.
Place the following titles for the other pages in your website in a similar manner. Once
you get the hang of this, you can change the titles to anything you desire, add more pages,
etc.
New Page 1: About Me
New Page 2: About My Family
New Page 3: My Hobbies
New Page 4: Type-in the name of a hobby
New Page 5: Type-in the name of another hobby
When you are done, select View 

Refresh on the Menu Bar to
update your changes
Now return to the Folder view by

clicking on the Folder button on the
View Bar. Your Title column,
should look similar to this one.
To see what your updated site looks like in the browser, first return to the Navigation
view by clicking on the Navigation button in the View Bar.
Double-click on your home page icon (ABC’s Home Page) or right-

click on the home page icon and select Open from the popup menu.
This will load the page in the Page View.
In Page View, click on the browser button in the Tool Bar, or select
File  Preview in Browser in the Menu Bar.
If nothing seems to happen, or it looks like your browser hasn’t

opened, look at the Task Bar at the bottom of your screen. Your browser button
should be flashing blue. If it is, click on it to bring up your web site.
Click around your web site. You will notice that FrontPage has automatically changed
all of your pages and buttons.
Themes
For a website to be effective, it needs to have consistent design. FrontPage allows you to
create this easily by using themes, or consistent formatting features that are applied to all
the elements of a page. Applying the same theme to all the pages gives the entire website
Themes affect the following web page characteristics:
Background color or image.

Text colors and fonts used with paragraph styles (Normal and Heading 1 to
Heading 6).
Text hyperlink colors.
Images used for bullets in bulleted lists.
Images used for horizontal rules.
Text color and font, and images used in page banners and navigation bars.
Table border colors.
Source: Microsoft Office XP Inside Out
a consistent look. (You can change them page by page later if you so desire).
If you are not there already, return to FrontPage by clicking on the FrontPage button in
the Task Bar at the bottom of the screen. It does not matter which view (Page,
Navigation, etc.) you are in when you return to FrontPage.
Select Format  Theme in the Menu Bar. This will take you to the Themes dialog
box.. When it first appears, you will notice that the
display area is blank. this is because at this point, you
have not yet selected a theme to view.
Select a theme from the choices in the left side of the

dialog box. When you do, your selection will be
highlighted in blue and the theme will appear in the
sample screen. Go through the choices to pick one you
like.
When you have decided on a theme, make sure you select one of the options under Apply
Theme to:.
If you select All pages, the theme will be applied to all the pages in your website.
If you choose Selected page(s), FrontPage will apply the theme to only those
pages.
Remember the consistency rule while making your choice! Click OK when you are
ready.
This will bring up the following message screen:
It indicates that all of your formatting will be changed to the theme you selected. Click
Yes.
To see if your theme has been applied to the website, click on the Navigation button in
the Views Bar. When you see your website organization chart, double-click on your
home page at the top of the chart. As before, this will take you to the Page view and
your home page. You will notice that the theme you chose has been applied to this
page.
You are now ready to save your website and view it in a web browser. To save your
pages, select File  Save All in the Menu Bar.
When you are in the Page view, you’ll need to save

your changes to each page just like you did when
creating a single web page.
You can save each page individually, or all of them at

the same time with the Save All option.
Don’t forget to save frequently as you are editing

your individual web pages.
You are now ready to view your updated website in the browser. Click on the Preview in
Browser button, or select File  Preview in Browser in the Menu Bar to open your
website in the browser. Browse around to see how everything works.
Once you have created a website, you can make changes to it

at any time by selecting File  Open Web in the Menu Bar.
Make sure that you are in the Folder or Navigation view in
the Views Bar when you do this.
Publishing Websites
For people to see it on the Web, you will need to publish your website. In other words,
you need to copy it to a specified location on a Web server.
Trinity’s web server is indicated by Web on TUCC-Web’ (W:):. You can access it by
clicking on the My Computer icon on the desktop, or by right-clicking the Start button
and selecting Explore from the popup menu.
As you can see, there are two parts to the Web server.
The trinity folder is used to allocate web space
to campus departments so they can publish
departmental websites.
The users folder is the personal web space allocated to faculty and staff to publish
non-departmental websites. This space is available on request.
To publish your website, select File  Publish Web from the Menu Bar. This will
display the Publish Destination dialog box as shown below.
In the Enter publish destination box, type the full URL (address) of the location you
want to publish to as indicated in the picture.
Don’t use the Browse button to navigate to the W: drive! You need to enter the
complete URL.
You will now be prompted to enter your username and password as shown below. When
typing in your username, make sure you use the following format: trinity\username.
Once you connect, you will see the Publish Web dialog box displayed on the following
page.
local remote
view view
The top part of the dialog box indicates the location you are publishing from and the one
you are publishing to. Use the Change button to change the publishing location if you
need to.
The middle area of the dialog box is divided into two parts:
The local view is on the left.
The remote view is on the right.
If you are publishing for the first time, simply click on the Publish button to copy your
files to the specified web location. If your website has subwebs (websites within
websites), make sure you have checked off on the Include subwebs option. In fact, it is a
good policy to check this off always before publishing.
If you are publishing a modified/edited website,

you can opt to publish only the changed pages by
clicking on the Options button in the Publish web
dialog box.
Once the “publish” is complete, you will see the following dialog box. Select Click here
to view your published web site to view your web site on the Web.
Congratulations! You have successfully created your first website.
HTML TAG LIST
BASIC TAGS
<html>...</html>
Creates the html document
<head>...</head>
Contains the head information, such as the title and meta tags which are not visible to the
user
<title>...</title>
Contains the title of the document which appears at the top of the browser window
BODY
<body>...</body>
Contains the viewed portion of the document
<body bgcolor="?">
Sets the color of the background in hexadecimal code
<body background="filename.xxx">
Sets an image as a page's background (wallpaper)
<body text="color">
Specifies the color of normal text in hexadecimal code
<body link="color">
Specifies the default color of unvisited links in hexadecimal code
<body alink="color">
Specifies the color of links on click in hexadecimal code
<body vlink="color">
Specifies the color of followed links in hexadecimal code
FORMATTING
<p>...</p>
Creates a new paragraph
<p align=?>
Aligns a paragraph to the left, right, or center
<br>
Inserts a line break
<blockquote>...</blockquote>
Indents text from both sides
LISTS
<dl>...</dl>
Creates a definition list
<dt>
Precedes each definition term
<dd>
Precedes each definition
<ol>...</ol>
Creates a numbered list
<li>...</li>
Precedes each list item, and adds a number
<ul>...</ul>
Creates a bulleted list
<div align=?>
A generic tag used to format large blocks of HTML, also used for stylesheets
TEXT ATTRIBUTES
<pre>...</pre>
Creates preformatted text
<hl>...</hl> to <h6>...</h6>
Creates headings – H1 largest, H6 smallest
<b>...</b>
Creates bold text
<i>...</i>
Creates italic text
<tt>...</tt>
Creates teletype, or typewriter-style text
<cite>...</cite>
Creates a citation, usually italic
<em>...</em>
Emphasizes a word (with italic or bold)
<strong>...</strong>
Emphasizes a word (with italic or bold)
<sub>...</sub>
Subscript - text is lower than baseline
<sup>...</sup>
Superscript - text is higher than basline
FONT ATTRIBUTES
<font>...</font>
Changes font attributes for text within the tags
<font size="value">...</font>
Sets the font to a size from 1 to 7, with 1 the smallest and 7 the largest
<font face="name">...</font>
Sets the font face
<font color="color">...</font>
Sets the font color using hexadecimal code or ―color‖ <font color=‖blue‖>
IMAGES
<img>
Embeds an image in the document at the location of the tag
IMAGE FORMULA
<IMG SRC=”filename.xxx”>
<img src="url" alt="text">
Adds an image with a text description
<img src="url" alt="text" align="direction">

Aligns an image to the left, right, center, bottom, or top
<img src="url" alt="text" border="number">

Sets the size of the border around an image
<img src="url" alt="text" height="pixels">

Sets the height of an image
<img src="url" alt="text" width="pixels">

Sets the width of an image
<img src="url" alt="text" hspace="pixels">

Sets a horizontal margin to be placed around an image
<img src="url" alt="text" vspace="pixels">

Sets a vertical margin to be placed around an image
<img src="url" alt="text" usemap="map-name">

Designates an image as a client-side image map
LINKS
URL FORMULA
<A HREF=”URL”>LinkText</A>
<a>...</a>
Designates the origin and destination of a hyperlink
<a href="#name">...</a>
Links to a target location in the current page
<a href="URL#name">...</a>
Links to a target location in a page outside the current page
<a name="name">...</a>
Sets a target location within a document
<a href="mailto:email@something.com">...</a>
Creates a mailto link
TABLES
<table>...</table>
Generates a table
<table border="pixels">
Sets the size of cell borders
<table cellspacing="pixels">
Sets the amount of space between cells
<table cellpadding="pixels">
Sets the amount of space between a border and cell content
<table height="pixels" or "%">

Sets the height of a table
<table width="pixels" or "%">

Sets the width of a table
<td>...</td>
Defines a table data cell
<td colspan="columns">
Sets a cell to span columns
<td rowspan="rows">
Sets a cell to span rows
<td nowrap>
Prevents the lines within a cell from wrapping
<th>...</th>
Defines a table header with bold, centered table data
<tr>...</tr>
Defines a table row
<tr align="?"> or <td align="?">

Aligns the contents of a row or cell to the left, right, or center
<tr valign="?"> or <td valign="?">

Sets the vertical alignment of a row or cell to the top, middle, or bottom
FRAMES
<frameset>...</frameset>
Specifies the layout of subsections in the main browser window
<frameset rows="value,value">
Defines the rows within a frameset
<frameset cols="value,value">
Defines the columns within a frameset
<noframes>...</noframes>
Provides alternate content for browsers that do not support frames
<frame src="?">
Defines the appearance and content of a single frame
<frame name="name">
Labels the frame for targeting by other frames
<frame marginwidth="#">
Sets the margin width of a frame
<frame marginheight="#">
Sets the margin height of a frame
<frame scrolling="value">
Creates a frame scrollbar
<frame noresize>
Prevents the resizing of a frame
It is best to not use frames for usability reasons and so that search engines can spider the
site effectively
HORIZONTAL RULES
<hr>
Inserts a horizontal rule
<hr size=?>
Sets size (height) of rule
<hr width=?>
Sets width of rule, in percentage or absolute value
<hr noshade>
Creates a rule without a shadow
FORMS
<form>...</form>
Generates a container for all form elements
<form action="url">
Designates the path of the script to process input from the form
<form method="get|post">
Instructs the browser how to interact with the form URL
<form accept="media type">

Defines which MIME types are supported by the server processing the form
<form accept-charset="text">
Defines which character sets are supported by the server processing the form
<form enctype="media type">

Defines the format of the submitted data
<option>
Defines each menu item
<select name="name">...</select>
Generates a pull-down menu
<input type="checkbox">
Generates a check box
<input type="hidden">
Conceals a field from view
<input type="image">
Generates an image that acts like a Submit button
<input type="password">
Generates a one-line password box
<input type="radio">
Generates a radio button
<input type="text">
Generates a one-line text box
<input type="submit">
Generates a Submit button (send form)
<input type="reset">
Generates a Reset button (clear form)
SPECIAL CHARACTERS
&
&
Ampersand
™
™
Trademark
®
®
Registered trademark
©
©
Copyright
"
"
Double quote marks

―
Left quote

‖
Right quote
&frasl;
/
Forward slash
<
<
Less than arrow
>
>
Greater than arrow
»
»
Right pointing double angle quotation mark
«
«
Left pointing double angle quotation mark

—
Em-dash
£
£
Pound sign (GBP currency)
°
30°
Degree
¼
¼
Quarter
½
½
Half
¾
¾
Three quarters
·
·
Middle dot
¡
¡
Inverted exclamation mark
&spades;
?
Black spade suit
&clubs;
?
Black club suit
&hearts;
?
Black hearts suit
&diams;
?
Black diamond suit
MODULE
Advance HTML & CSS

HTML Versions
You should be aware that there are historically many versions of the HTML
specification. You will read most about the HTML 3.0, 3.2, and 4.0 specification. I
have tried to display HTML tags and attributes that are supported by the 3.2 and 4.0
specification, but cannot guarantee that all tags and attributes contained herein will
work in all versions of HTML. There are several HTML common document types when
refering to HTML 4.0 which are:
Strict - HTML 4.0 without frame or HTML 3.2 depreciated feature support.
Frame - HTML 4.0/3.2 with frame support.
Transitional or loose - Supports features of HTML 3.2 that are being depreciated in
HTML 4.0. This DTD does not support framesets. Some depreciated tags/elements
not supported by strict HTML 4.0 are CENTER, FRAME, FRAMESET, NOFRAMES,
IFRAME, ISINDEX, DIR, MENU, APPLET, BASEFONT, FONT, S, STRIKE, and U.
This document covers most commonly used HTML elements and attributes, but not
all. For an excellent source of information regarding available HTML 4.0 elements and
attributes, refer to the Web Design Group's web page, HTML 4.0 Reference section.
Used in combination with information from the Web Design Group and the World
Wide Web Consortium web pages (See the links section or "Recommended Reading"
section of this document for URL) this document should provide a thorough
introduction to HTML.
HTML Support
You should also know that many of the element tags are being depreciated in favor
of cascading style
sheets. This means that some of the attributes with regard to text fonts and color
are being depreciated and these values are to be controlled using the style sheets.
This makes it easier to control the attributes of multiple HTML documents such as the
HTML in this document from one cascading file sheet file. You should learn at least
minimal control of attributes using style sheets before writing great quanties of
documents and thereby being forced to go back and change your files. Some
examples in this document demonstrate the use of style sheet and inline style
commands. Many of the elements not supported by the strict HTML 4.0 document
type definition (DTD) will be noted with the word "depreciated" where they are
presented.
One other consideration to be aware of is that various client web browsers have
various support for various methods of setting attributes and displaying information
that is contained in web pages. For instance, not all older web browsers support
frames, but most clients should have web browsers today that support frames. Also
some style sheet properties may be supported by some browsers but not by others.
The best way to determine what will work is to read referenced documentation and
experiment.
Getting ready to create a website

You can create your web site off line using a standard text editor, an HTML text
editor, or a HTML graphics editor. I recommend using an HTML text editor which lets
you see the HTML tags in a different color than the surrounding text which makes
them easier to see. The free ware editor, Arachnophillia, is a good choice to begin
with. There are also some editors which perform validation dynamically. One of these
may be an even better choice if you can obtain one.
Directory Structure
You will want to create your web pages in a separate directory on your computer and
as you link deeper into your web pages you will want to create more sub-directories.
Normally, I use the following structure:
mainpage - The main folder for your web page, name it an appropriate name for
your web site. Your HTML files for your home page will go here.
gifs - Where I put all gif files to be used in common with the mainpage and other
pages such as buttons used to provide links to other parts of my web page. I
usually place all backgrounds here. I do not put pictures for specific sections
here. For example, all pictures that are used in "The CTDP Networking Guide" are
placed with the HTML files in that folder.
subject1 - In the case of the CTDP, this may be "Linux". Your html and graphics files
for a particular web page subsection will go here. Subject1/sub1 - Sub subjects of
subject 1.
subect1/sub2
subject2 - This may be "networking".

subject2.
Starting with a Template

To begin your first web page, you will want to create a template from which you can
start all your pages which has the basic structure of an HTML document as shown in
the "HTML document Structure" section of this document. You can copy the example
file shown there into your editor's file or make your own. You will want to follow the
standard HTML structure of HTML, HEAD, and BODY elements. If you want to set
your HTML page with multiple frames, for example with an HTML index on the left
side for easier document viewing, you will need to become familiar with the section
on FRAMES before you begin. If working with frames is initially too complicated, stick
with the standard HEAD, BODY structure until you gain familiarity.
HTML Structure
HTML uses tags that are encased in brackets like the following:
<>
HTML documents consist of elements which are constructed with tags. For instance,
a paragraph is considered to be an html element constructed with the tags <P> and
</P>. The <P> tag begins the paragraph element and the </P> tag ends the
element. The following is a paragraph element.
<p>This is a sample paragraph element. Any text in a paragraph goes here.</p>
Not all tags have a tag for ending the element such as the line break, <br> tag. The
HTML document is begun with the <html> tag and ended with the </html> tag.
Elements of an HTML document include the HEAD, BODY, paragraphs, lists, tables,
and more. Elements may be embedded within each other. Also some elements have
attributes embedded in the tag that define characteristics of the element such as
the placing of text, size of text, source of an image, and other characteristics
depending on the element. These attributes are listed in this document when the
element is discussed in detail.
An HTML document is structured with two main elements:
1 HEAD
2 BODY
An Example HTML File

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"><html><head> <meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1"> <meta name="GENERATOR"
content="Arachnophilia 3.9"> <meta name="description" content="Comprehensive
Documentation and information about HTML."> <meta name="keywords"
content="HTML, tags, commands"> <title>The CTDP HTML Guide</title>
<link href="style.css" rel="stylesheet" type="text/css"></style>
Linking - Use the link element in the HTML header to link an external text file
style sheet to the HTML document. Example: <link href="style.css" rel="stylesheet"
type="text/css">
Importing - One style sheet may be imported from another by using the
"@import" command in
the style sheet that is performing the import.

Inline - Style information may be included with each individual element using
the STYLE attribute which is common to all elements. See the "Common Attributes"
section. Many examples in this document show style being controlled using the
STYLE attribute. Although this is acceptable for specific elements whose
characteristics must be different such as the color of a horizontal line, it is wiser to
control most element style using the external style sheets.
The STYLE Element

Attributes:
Type - Defines the content type such as "text/css".
Media - Defines the intended media the page will be displayed on. Values
include all, aural, braille, handheld, print, projection, screen, tty, and tv.
Title - Gives the title sheet an optional title.
Example Embedded Style Sheet

When setting document style, place the STYLE element with the <STYLE> beginning
tag and </STYLE> ending tag between the HEAD and the BODY elements. Therefore
placement would be as follows:
<html><head><title>Example Style Settings</title></head><style
type="text/css"></style>
Other settable parameters include:
font-style: italic
font-weight: bold
font-size: 200% - Indicates twice the size of normal text.
font-family: roman, serif, "Times New Roman"
text-transform: uppercase
background-color: blue
The section "CSS Properties" contains a more complete list of parameters and the
elements they work with.
Setting an HTML Page with a Style Sheet
To set an HTML page up to use a style sheet, a link must be provided in the header
section as follows:
Transitional//EN"><html><head><meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1"><meta name="GENERATOR"
content="Arachnophilia 3.9"><meta name="description" content="The Computer
Technology Documentation HTML Guide - Setting Document Style"><meta
name="keywords" content="Documentation, HTML, html document style, style,
setting document style, setting html document style"><title>The CTDP HTML Guide
- Setting Document Style</title><link href="style.css" rel="stylesheet"
type="text/css"></head><body>...</body>
The Style Sheet File (style.css)
body {background-color: #ffffff; color: #000000; background:
url('../../../../gifs/flowers.gif') }a:link { color: #0000ff }a:visited { color: #7f007f }
a:active { color: #ff0000 }h1, H2 { text-align: center }h3 { color: #600060
}blockquote { color: #0000ff }pre { color: #0000ff }.indent { margin-right: 5%;
margin-left: 5%; color: #0000ff }.center { text-align: center }.firstindent { text-
indent: 2em}div.outline { border-top: solid medium navy }hr { color: #80b0ff;
height: 5; width: 50%; text-align: center }hr#firsthr { color: #80b0ff; height: 15;
width: 100% }
This style sheet is used to set the style for various HTML elements on every page of
this document. To change the style, only the style sheet needs to be changed. Note
that the style sheet sets the wallpaper for the HTML page along with the background
color, foreground color, active link color, visited link color, and unvisited link
color(A:link). It also sets colors for the BLOCKQUOTE and PRE elements along with
defining some CLASS characteristics and one ID characteristic.
Using the CLASS Attribute
The CLASS and ID attributes allow very convenient and precise control of the style of
specific elements in HTML documents. The CLASS attribute allows attributes to be
assigned to almost any element based on a class name. Class style information is
specified in the style sheet with the period, ".", followed by the class name as in the
following example:
Note that this same line is used in the example style sheet above. To use this in the
HTML file, when the beginning tag of the element is declared, the class is specified as
in the following statement:
<p class="indent">
This causes the paragraph element to have the style characteristics assigned to the
class "indent" so long as those style characteristics are appropriate to the element
they are being applied to. In this case the paragraph element is indented much like
the blockquote element and its color is also set to blue. Classes may also be
assigned to specific elements so they can only be used with that elements.
Assingments in the style sheet to specific elements similar to "PRE.center { text-
align: center }".
Using the ID Attribute

The ID attribute is useful since it allows you to specify exactly which element will
have the desired style. This is done with a line like the following as shown in the
style sheet example above.
hr#firsthr { color: #80b0ff; height: 15; width: 100% }
When the first horizontal line is declared on the HTML page it is declared as follows:
<hr id="firsthr">
The line for the code in this example is at the top of this page. All other lines on the
page appear as defined by the following entry from the above style sheet:
hr { color: #80b0ff; height: 5; width: 50%; text-align: center }
The line appears below and in several other places on this page. Please note that ID
selectors are not required to be associated with a specific element in the style sheet
although I think it makes more sense to do so.
Context Selection
Allows elements containing inline elements to have special assigned values as in the
following example:
table b ( color: red }
This example sets the color of any bold text in a table to red.
Grouping Elements for Style Characteristics
The example above contains the following line:
h1, h2 { text-align: center }
This line allows style characteristics to be assigned to both elements H1 and H2 at
the same time. The elements are separated by commas.
Pseudo Classes
Some elements have specific automatially assigned classes. For example the anchor
(A) element has the classes link, visited, and active. The following lines in the style
sheet assign color style characteristics to these classes.
a:link { color: #0000ff }a:visited { color: #7f007f }a:active { color: #ff0000 }
Note that the element is separated from the pseudo name using a colon. Also a
"first-line" and a "first-letter" pseudo class exists for each block element.
CSS Properties
This section only provides a quick reference for the CSS properties, for complete
details refer to the Web Design Group's web page CSS section.
Application of these properties are based on the element type as described earlier in
the "Element Categories" section.
Box Properties
Name Description Possible Element Example inherited
Values Types
border Sets border See border All {border: No
width, style and width, style, medium solid
color. and color green}
border- Set the bottom See border All {border- No

bottom border width width, style, bottom:
style, and color. and color medium solid
green}
border- Set the bottom thin, All {border- No

bottom- border width medium, bottom-
width thick, or width: thin}
length value
border- Set the border A color value, All {border: No
color color color, #0000ff}
#RRGGBB
border- Set the left See border All {border-left: No
left border width width, style, medium solid
style, and color. and color green}
border- Set the left thin, All {border-left- No

left-width border width medium, width: thin}
thick, or
length value
border- Set the right See border All {border- No
right border width width, style, right:
style, and color. and color medium solid
green}
border- Set the right thin, All {border- No
right- border width medium, right-width:
width thick, or thin}
length value
border- Sets border style none, dotted, All {border: No
style dashed, dashed}
solid, double,
groove,
ridge, inset,
outset
border- Set the top border See border All {border- No

top width style, and color. width, style, top:
and color medium
solid
green}
border- Set the top border thin, All {border- No
top- width medium, top-width:
width thick, or thin}
length value
border- Sets Border width. thin, All {border- No
width medium, width: 8}
thick, or
length value
clear Determines where none, left, All {clear: No
floating elements are right, both left}
allowed.
float Specifies how text is none, left, All {float: No

wrapped and where it right left}
is aligned.
height Height of element auto or a Block elements {height: No

height value and IMG, 200}
INPUT,
TEXTAREA,
SELECT, and
OBJECT
margin Set element margin auto, length All {margin: No

width. A single value value, or 4em 2em
sets all margins, two percent value 4em 2em}
values set top and
bottom, four values
set top, right, bottom,
and left margins.
margin- Set element bottom length value, All {margin- No

bottom margin or percent bottom:
value 4em}
margin- Set element left length value, All {margin- No
left margin or percent left: 4em}
value
margin- Set element right length value, All {margin- No
right margin or percent right:
value 4em}
margin- Set element top margin length value, All {margin- No

top or percent top: 4em}
value
padding Space between border length value, All {padding: No
and content. A single or percent 4em}
value sets all sides, value
two values set
top/bottom and
left/right, three values
set top, right/left, and
bottom, and four
values set top, right,
bottom, and left.
padding- Space between bottom length value, All {padding- No

bottom border and content. or percent bottom:
value 4em}
padding- Space between left length value, All {padding- No

left border and content. or percent left: 4em}
value
padding- Space between right length value, All {padding- No
right border and content. or percent right:
value 4em}
padding- Space between top length value, All {padding- No

top border and content. or percent top: 4em}
value
width Width of element auto or a Block {width: No
height value elements and 40em}
in length or IMG, INPUT,
percentage TEXTAREA,
SELECT, and
OBJECT
Background and Color Properties

Name Description Possible Values Element Types Example inherited
background Set See All {background: #8080ff} No
background background-
color, color,
repeat, background-
image, image,
attachment, background-
or position. attachment,
background-
repeat,
background-
position
background- Determines scroll, fixed All {background-attachment: No

attachment if the scroll}
background
image is
fixed or
scroll.
background- Sets the Named or All {background-color: #8080ff} No
color background value color
color.
background- Sets the url All {background-image: No

image background url('../../../../gifs/flowers.gif')}
image.
background- Sets the top, center, Block and {background-position: left No

position background bottom, left, IMG, top}
image center, INPUT,
initial right, or TEXTAREA,
position. percent SELECT,
values and
OBJECT
background- Sets how repeat, All {background-repeat: no- No
repeat the repeat-x, repeat}
background repeat-y,
image is no-repeat
repeated.
color Sets Named or All {color: green} Yes
element value color
color.
Classification Properties
Values Types
display Sets the type of block, inline, All {display: No

element. list-item, none list-item}
list-style Sets list style type See list-style-type List- {list-style: Yes
and/or position. and list-style- item circle}
position
list-style- Sets image to be url List- {list-style- Yes

image used as the list item image:
item marker. url(this.gif)}
list-style- Sets list style circle, disc, List- {list-style- Yes

type type. decimal, lower- item type: square}
alpha, lower-
roman, none,
square, upper-
alpha, upper-
roman
list-style- Sets where the inside, outside List- {list-style: Yes

position marker is place item circle}
relative to the text
and its wrapping
position.
whitespace Sets treatment of normal, pre, Block {whitespace: Yes

spaces inside the nowrap pre}
element.
Font Properties
Name Description Possible Values Element Example inherited
Types
font Used to define See font-family, All {font: Yes
font properties font-size, font-style, 20pt}
font-variant, and
font-weight.
font- Used to define family name All {font- Yes

family font family to family:
use ariel
roman}
font- Used to define xx-small, x-small, All {font-size: Yes
size font size to small, medium, 18pt}
use large, x-large, xx-
large, larger,
smaller, length
value, or percent
value
font- Used to define font normal, italic, oblique All {font-style: Yes
style style to use italic}
font- Used to determine normal, small-caps All {font- Yes

variant whether to use variant:
normal or small caps small-caps}
font- Sets font weight. normal, bold, bolder, All {font- Yes
weight lighter, 100, 200, 300, weight:
400, 500, 600, 700, 800, 600}
900
Text Properties
Values Types
letter- Sets the space normal or All {letter- Yes
spacing between length value spacing:
characters. 0.2em}
line-height Sets the height normal, a All {line- Yes
of lines. number, a height: 2}
percent of the
element font
size,
text-align Sets the left, right, Block {text-align: Yes
alignment of center, justify center}
text.
text- Sets the none, overline, All {text- No
decoration special underline, line- decoration:
decoration through, blink blink}
attributes of
text.
text- Sets the length or Block {text- Yes
indent element's first percentage indent: 5%}
line amount of value
indentation.
text- Transforms none, All {text- Yes
transform text to one of capitalize, transform:
the set values. uppercase, uppercase}
lowercase
vertical- Sets vertical baseline, sub. Inline {vertical- No
align position. super, top, align: sub}
middle, bottom,
text-top, text-
bottom, or
percent value
word- Sets extra normal or All {word- Yes

spacing space between length value spacing:
words. 0.2em}
HTML Graphics
The <IMG> tag is used to embed graphics in HTML pages. They may be embedded
inside other elements such as anchors. When embedded inside an anchor, then the
user left clicks on the image, they will go to the designated link (rather, their
browser will load a file from the designated link). The <IMG> element has no ending
tag.
IMG Attributes
SRC="../greenhomebutton.gif" - The path and filename of the image which
specifies its location.
ALT="Home" - This is a message displayed if the image could not be found.
ALIGN="TOP" - (Depreciated). Sets the image alignment. The image is
aligned to the left or right column if the value is LEFT or RIGHT,The values, TOP,
MIDDLE, BOTTOM, ABSMIDDLE, and ABSBOTTOM, set the vertical alignment with
items in the same line.
VSPACE=3 - (Depreciated). The space between the image and the text
above and below it in pixels.
HSPACE=5 - (Depreciated). The space between the image and the text to
the left and right of it in pixels.
BORDER=10 - (Depreciated). Sets a border of the specified width in pixels
to be drawn around the image.
HEIGHT=33 - The height of the image. If this is not specified, the image will
be the size as determined by the gif file. This can be set in pixels or a percentage of
the browser window height.
WIDTH=115 - The width of the image. If this is not specified, the image will
be the size as determined by the gif file. This can be set in pixels or a percentage of
the browser window width.
ISMAP - Identifies the image as an image map. The image map lets the user
point and click different parts of the image to load other web pages.
USEMAP - Specifies the client side image map file to be used.
The line break element, <BR> and the horizontal rule element <HR> may be placed
inside the <IMG> element.
Example 1
The following code will display a gif file:
<img src="MyPicture.gif" alt="Outdoor Scene">
This code sets an alternate text of "Outdoor Sceen" in the event the "MyPicture.gif"
file is not
displayable. This usually occur if it cannot be found or if the user has their browser
controls set not to display pictures.
Example 2
In this example the additional feature is added that sets the size of the picture
relative to the size of the browser window. The size of the picture is set to 20% of
the height of the browser window and 40% of the width.
<img src="MyPicture.gif" alt="Outdoor Scene" height="20%" width="40%">
Example 3
If you are interested in displaying pictures that are of significant size which may be
accessed for possible download for sharing with friends or family, this example gives
some valuable advice. If you are interested in making several graphic files
accessable from one page such as files scanned from pictures, it would be worthwhile
to make a file of about one fifth the height and width of the original file, then make it
a link to the original file for viewing or download. This is because the download time
of your web page with many large graphic files may be excessive. In this example
two smaller files are placed on a page next to each other. These files are links to the
larger files to be viewed or downloaded.
<div style="text-align: center"<a href="Picture1.gif"><img src="SmallPicture.gif"
ALT="Picture1" height="20%" width="40%"></a><a href="Picture2.gif"><img
srcC="SmallPicture2l.gif" ALT="Picture2" height="20%" width="40%"></a></div>
In this example the style attribute "text-align: center" is set. See the section on style
and style sheet attributes for more information about this attribute.
Example 4
In this example some JavaScript code is added so the name or description of the
picture is displayed when the viewer places their mouse cursor on the link.
<div style="text-align: center"><a href="Picture1.gif"
onMouseOver="window.status='Picture1' ;return true"
onMouseOut="window.status='';return true"><img src="SmallPicture.gif"
alt="Picture1" height="20%" width="40%"></a><a href="Picture2.gif"
onMouseOver="window.status='Picture2' ;return true"
onMouseOut="window.status='';return true"><img src="SmallPicture2l.gif"

alt="Picture2" height="20%" width="40%"></a></div>
Example 5
The following code will display a linked image that will return you to the HTML start
section:
<div style="text-align: center"><a href="htmlintroduction.html" target="right"
onMouseOver="window.status='To The HTML Start (intro) Page' ;return true"
onMouseOut="window.status='';return true"><img SRC="bluestartbutton.gif"
alt="Home" vspace="3" border="3" height="35" width="120"></a></div>
This is the result:
Image areas and Maps
To use a web browser to click on various areas of an image file and go to a specific
web page depending on the area clicked upon requires the use of the <MAP> and
<AREA> elements. The <MAP> element has an ending tag, </MAP> while the
<AREA> element does not.
MAP and IMAGE Tags and Attributes
<MAP> - Starts a client-side image map. This must be referenced in an image
<IMG> tag. This element will include <AREA> tags.
</MAP> - Ends the image map element.
<AREA> - Defines areas of an image map that the user may click on to
establish a link. SHAPE=RECT - Defines the shape of the click able area. Valid values
are POLY, RECT, and CIRCLE.
COORDS="2,50,102,101" - Defines, in pixels, the top-left and bottom-right
coordinates of the clickable linked region in the image.
HREF="leftwing.htm" - Defines the location of the web page that is loaded
when the area in the image is clicked.
Example Code
<img src="airplane.gif" ismap usemap="#airplane.map"></a> <map
name="airplane.map"><area shape="rect coordsS="2,50,102,101"
HREF="leftwing.html"><area shape="rect" coords="110,10,160,300"
HREF="fusalage.html"> <area shape="rect" coords="162,50,262,101"
HREF="rightwing.html"> </map>
HTML Sound
The BGSOUND element is used to play sounds on a web page. There is no end tag
for the <bgsound> element. To play sounds all that is required is to put a line like
the following on your web page:
<bgsound src="1234usmc.wav" loop="-1">
This line is used on this page to play sound.
BGSOUND element attributes
SRC="1234usmc.wav" - The location or the URL of the WAV, MIDI, or AU file
to play.
LOOP="-1" - The number of times the file will will loop. A value of INFINATE
or -1 will loop indefinitely.
HTML Links
HTML Anchors and Links
Anchors are used to specify link locations or to set anchors for locations to link to.
This enables the person using the browser to click on a link (anchor) and their
browser will go to the location pointed to by the anchor. Anchors begin with the <A>
tag and end with the </A> tag.
Anchor Attributes
NAME - Sets an anchor at a named location in the document for later use by
an anchor tag.
HREF="hw.html" - A hypertext reference which defines the name of the
document or the named location in the document for the anchor link to send the web
browser to.
TARGET - Specifies the frame target the referenced page will be put into. The
target may me a named window or one of the special reserved names below. If the
target is a named window that exists the web page the link points to will be loaded
into that window. If a window by that name does not exist, a new window with that
name will be created. _blank - The web linked page loads in a new window and does
not name the window.
_parent - The new page will load in the parent frame or window.
_self - The new page will load in the same window that the link is in. If the
link is in a frame, it will load inside the frame. This is the default target.
_top - The new page will load into the top window reguardless of how many
framesets deep the link is embedded.
Examples
Example 1 - Named Anchor
At the top of this page is a named anchor which is used for other examples on this
page. Its text is:
<a name="top"></a>
Example 2 - Link to another page
This is an example of HTML source code using an anchor link:

<a href="htmlintroduction.html" target="right">Introduction</a>
Introduction
It will take you to the introduction page if you click on it.
Example 3 - A Mail Link
This example shows how to set up a mail link that invokes the installed mail program
when it is clicked on. Here's the source code:
<a href="mailto: ctdp@operamail.com">ctdp@operamail.com</a>
Below is the implemented example. If you click on it it should invoke your mail
program such as Microsoft Outlook so you can send an e-mail. Feel free to click on it
to see the effect. You can send an e-mail telling us that the example worked or exit
the e-mail program.
ctdp@operamail.com
Example 4 - Image Link
This is an example of HTML source code using an anchor link with a button image
embedded (It also includes some JavaScript):
<a href="htmlgraphics.html" target="right" onMouseOver="window.status='To
graphics page' ;return true" onMouseOut="window.status='';return true"<>img
src="bluestartbutton.gif" alt="Graphics" vspace="3" border="0" height="35"
width="120"></a>
Here's how it looks and works:
It will take you to the graphics page of this document. The JavaScript part includes
the "onMouseOver" and onMouseOut" definitions. They are event handlers for the
MouseOver and MouseOut events. The "window.status" definition is an attribute of
the window object. You can read about JavaScript in the JavaScript Manual.
Example 5 - Local Page Link
Here's an example of HTML source code that will take you to the top of the page:
<a href="#top">Take me to the top of this page.</a>
Take me to the top of this page.
Example 6 - Non-Underlined Link
Here's an example of HTML source code that will take you to the top of the page, but
it is not underlined:
<a href="#top" style="text-decoration: none" >Take me to the top of this
page.</a>
Example 7 - Hidden Link
Here's an example of HTML source code that will take you to the top of the page, but
it is not underlined, nor is the color changed for a normal link color. It is also
embedded with other text to make it harder to find. This link is essentially hidden
and can only be found by placing the mouse directly over
the link.
Take me to the <a href="#top" style="text-decoration: none" style="color='black'"
>top</a> of this page.
Example 8 - Target set to top
Take me to the <a href="index.html" target = "_top">main HTML</a> page.
Take me to the main HTML page.
Example 9 - Target set to self
Take me to the <a href="index.html" target = "_self">main HTML</a> page.
Here's how it looks and works (Use the BACK button on your browser to return):
Take me to the main HTMLpage.
Example 10 - Target set to blank
Take me to the <a href="index.html" target = "_blank">main HTML</a> page.
Take me to the main HTML page.
If you continue clicking on this link, it will continue making new pages.
HTML Forms
Forms allow those who come to your website to provide input to your webserver.
Some reasons to use forms are to allow visitors to partake in polls or sign up as a
member. Also orders for merchandise may be placed using forms. Usually the forms
are supported by a client side script program which will be sure the form is properly
filled out before it is sent to the server. Also the form will invoke a script program
which runs on the server. This script program will receive the data and store it on
the server, then respond with a message to the user telling them that the form was
submitted.
This document is not intended to teach script writing, so it will concentrate on the
HTML side of form writing.
Form tags and attributes
<FORM> - Starts an input form. </FORM> - Ends an input form.
ACTION="..." - The address of the script to process this form input.
METHOD="POST" - The method used to send the data from the form to the
server. The options are POST and GET. Normally POST is used.
<BUTTON> - Used to define a FORM submit, reset, or push button.

</BUTTON> - Ends the button. Attributes: ACCESSKEY - A shortkey used to give the
focus to the label.
DISABLED - A boolean value that makes the button unavailable for use.
NAME - Sets the name sent to the server as part of the name/value pair when
the form is submitted.
ONBLUR - Sets a script program to run when the element loses focus.
ONFOCUS - Sets a script program to run when the element gets focus.
TABINDEX - Sets the tabbing order of the element.
TYPE - Sets the button type to one of submit, reset, or button.
VALUE - Sets the value of the button to be sent to the webserver when the
form is submitted.
<FIELDSET> - Allows grouping of form controls. </FIELDSET> ends the fieldset.

<INPUT> - An input element for a form. ACCEPT - The acceptable media
types for file upload.
ACCESSKEY - A shortcut character.
ALIGN="CENTER" - (Depreciated). Sets the way the text and image will
align.
ALT - Alternate text for the image.
CHECKED - This indicates that the item is checked is it is a check box or radio
button.
DISABLED - A boolean value that makes the input object unavailable for use.
MAXLENGTH="7" - The most characters that may be put in a text region.
NAME="RegForm" - The name of the form which is passed to the script
running on the server.
ONCHANGE - Script to run when the element is changed.
ONSELECT - Script to run when the element text is selected.
SIZE="3" - The number of characters an input region should be filled with.
SRC="bluebutton.gif" - The name of the source file for an image to be
displayed on the form.
TYPE="TEXT" - The type of input to be done. The options are BUTTON,
CHECKBOX, FILE, HIDDEN, IMAGE, RADIO, RESET, SUBMIT, PASSWORD, or TEXT.
VALUE="1" - Specifies the default value for a text item. It specifies the label
of a reset or submit button or the value to be returned when a check box or radio
button is selected.
<LABEL> - Allows an ability to click on a text label to select a form control.

<.LABEL> ends a label. Attributes: ACCESSKEY - A shortkey used to give the focus
to the label.
FOR - Sets the control associated with the label which ust match the control
name.
<TEXTAREA> - Indicates an element that has multiple text lines.

</TEXTAREA> - Ends a Text entry form element. Attributes: ACCESSKEY - A
shortkey used to give the focus to the element.
COLS="3" - The number of columns in the text area.
NAME="AddressLines" - The name of the textarea which is passed to the
script running on the server.
ROWS="3" - The number of rows in the text area.
<SELECT> - Creates a list of items that can be selected. </SELECT> ends the
select area. Attributes: DISABLED - A boolean value that makes the select object
unavailable for use.
MULTIPLE - Allows more than one selection from the scrolling list.
NAME="state" - The name of the selection item that is passed to the script
running on the server.
SIZE="1" - The number of selections that will be displayed. If a value of SIZE
is set, the selection will be a scrolling list. If no SIZE value is set the selection will be
a pop-up menu.
http://www.comptechdoc.org/guides/htmlguide/htmlforms.html (2 of 6)7/21/2003 7:45:08 AM HTML Forms
<OPTGROUP> - Sets up choices inside a SELECT menu. </OPTGROUP> ends

the group. Attributes: DISABLED - A boolean value that makes the object
unavailable for use.
LABEL - Describes available choices.
<OPTION> - Used to set items in a list of selectable items. </OPTION> ends

the OPTION element. This is found within the SELECT element. DISABLED - A
boolean value that makes the object unavailable for use.
LABEL
SELECTED - This will be the default value if this attribute is included in the
OPTION element
VALUE="10" - This is the value to be submitted to the CGI script program if
this option is selected when the user submits the form.
An example Form
<h2 style="text-align: center">Computer Technology Documentation
Project</h2><h2 style="text-align: center">Member Registration</h2><hr
style="height: 5" WIDTH=90%> <div style="text-align:
center"><table><td><pre><form name="RegistrationForm" method="post"
action="/cgi-bin/response.pl"><b>First Name: </b><input type="text"
name="firstname"><b>Last Name: </b><input type="text"
name="lastname"><b>Address1: </b><input type="text"
name="addr1"><b>Address2: </b><input type="text" name="addr2"><b>City:
</b><input type="text" name="city"><b>State: </b><select name="state"
size="1"> <option value="1">AL <option value="2">AK <option value="3">AR
<option value="4">AS <option value="5">AZ <option value="6">CA <option
value="7">CO <option value="8">CT
<option value="9">DC <option value="10">DE <option value="11">FL <option
value="12">FM <option value="13">GA <option value="14">GU <option
value="15">HI <option value="16">ID <option value="17">IA <option
value="18">IL <option value="19">IN <option value="20">KS <option
value="21">KY <option value="22">LA <option value="23">MA <option
value="24">MD <option value="25">ME <option value="26">MH <option
value="26">MI <option value="28">MN <option value="29">MO <option
value="30">MP <option value="31">MS <option value="32">MT <option
value="33">NC <option value="34">ND <option value="35">NE <option
value="36">NH <option value="37">NJ <option value="38">NM <option
value="39">NV <option value="40">NY <option value="41">OH <option
value="42">OK <option value="43">OR <option value="44">PA <option
value="45">PR <option value="46">PW <option value="47">RI <option
value="48">SC <option value="49">SD <option value="50">TN <option
value="51">TX
<option value="52">UT <option value="53">VA <option value="54">VI <option

value="55">VT <option value="56">WA <option value="57">WI <option
value="58">WV <option value="59">WY</select><b>Zip: </b><input type="text"
name="zip" maxlength="10" size="10"><b>Area Code/Phone:</b><input
type="text" name="code" maxlength="3" size="3"><input type="text"
name="phone" maxlength="7" size="7"><div style="text-align: center"><input
type="button" name="cmdSubmit" value="Submit"> <input type="reset"
value="clear"></div></pre></form></td></table></div></body>
How the Form Looks:

Computer Technology Documentation Project
Member Registration
First Name: Last Name: Address1: Address2: City: State: Zip: Area
Code/Phone:
HTML Script Embedding
This document is not intended to teach script writing, but will only define some of the
related tags and give an example script so the user can get an idea how to embed
script in HTML. This document also does not explain how to get information entered
in a script form to the server. That is a subject that will be described when the hyper
text transfer protol (HTTP) and server side script writing is discussed.
The script below will check inputs from the form, below, to be sure they have been
entered correctly before sending the data to the server. If you attempt to press
submit in the form below without filling the appropriate fields in, you will see that the
script is active.
SCRIPT Element Attributes
The script element is usually embedded in the document header but may be placed
in the head or the body of the HTML document so long as it occurs before code that
invokes it.
CHARSET - (Depreciated). The encoding of any external script specified such
as "iso-8859-1".
DEFER - (Depreciated). The script is not parsed until the HTML document is
rendered.
EVENT - Specifies the event used to trigger the script.
FOR - Specifies an object (combined with an action) that is used to trigger the
script event
LANGUAGE - (Depreciated). Tells the name of the language the script is
written in. Required for most browsers. Possible values are JavaScript, VBScript, and
JavaScript1.1
SRC - (Depreciated). Specifies an external script which may include a URL
path to another webserver.
TYPE - The new method to specify the script language using MIME
specification rather than the LANGUAGE attribute. This attribute is not widely
supported yet.
The NOSCRIPT element is used to provide alternate content when a browser does
not support script.
Scripting Events
ondblclick
onclick
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
An example Script
How the script looks:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"><head><title>New
CTDP Member Registration</title><scrypt type="text/javascript" for="cmdSubmit"
event="onclick" language=JavaScript>
XML documents require a root element. The root element appears only once and
encapsulates the entire XML elements and data in the document, in the same way
<HTML> ... </HTML> contains the contents of an HTML document.
Since XML uses certain characters for its own syntax, these characters must be supplied
in another way. For this reason XML introduces five standard entity references
< >
These entity references must be used for literal left and right angle brackets which
are used in XML as element tag delimiters.
' "
These entity references must be used for single and double quotes which are used in
XML as element tag delimiters.
&
& must be used for literal ampersands. Ampersands are used in XML for entity
references.
In the following we give an example. The first line is the XML declaration. It
defines the XML version of the document. Furthermore library is the root element
appearing only once and containing all the other elements. We save the XML with
any filename and an .xml extension. Then we load the file onto an XML-parser
such as IE 6, NetScape 6, Opera 4+, Ice Browser, or Mozilla.
<?xml version="1.0" standalone="yes"?>
<?xml-stylesheet type="text/xsl" href="library.xsl"?>


<library>
<book>
<title> SymbolicC++ </title>
<subtitle> An Introduction to Computer Algebra </subtitle>
<author> Tan Kiat Shi, Willi Hans Steeb, Yorick Hardy </author>
<ISBN> 1852332603 </ISBN>
<publisher> Springer </publisher>
<city> London </city>
<year> 2000 </year>
</book>
<book>
<title> Classical and Quantum Computing </title>
<subtitle> with C++ and Java Simulations </subtitle>
<author> Yorick Hardy and Willi Hans Steeb </author>
<ISBN> 3764366109 </ISBN>
<publisher> Birkhauser Publishing </publisher>
<city> Basel </city>
<year> 20001 </year>
</book>
</library>
If we consider the XML file from an SQL table point of view then each
<book> ... </book>
block would be one row in the table library.
The following example shows how to use an attribute. The attribute is sex.
<people>
<person sex="male">
<lastname> Steeb </lastname>
<firstname> Willi Hans </firstname>
<profession> Professor </profession>
</person>
<person sex="female">
<lastname> de Sousa </lastname>
<firstname> Nela </firstname>
<profession> Lecturer </profession>
</person>
</people>
We can rewrite it without using an attribute.
<people>
<person>
<sex> male </sex>
<lastname> Steeb </lastname>
<firstname> Willi Hans </firstname>
<profession> Professor </profession>
</person>
<person>
<sex> female </sex>
<lastname> de Sousa </lastname>
<firstname> Nela </firstname>
<profession> Lecturer </profession>
</person>
</people>
The polynomial
p(x; y) = 2x3y2 ¡ 4y5
could be encoded in XML as
<?xml version="1.0"?>
<polynomial>
<term>
<factor> 2 </factor>
<variable>
<name> x </name>
<exponent> 3 </exponent>
</variable>
<variable>
<name> y </name>
</variable>
</term>
<term>
<factor> -4 </factor>
<variable>
<name> x </name>
</variable>
<variable>
<name> y </name>
</variable>
</term>
</polynomial>
2.2 Schema
A schema is a formal way of defining and validating the content of an XML document.
A well-formed XML document that conforms to its schema is said to be valid.
The schema is how we assign the data types to each tag and any attributes that are
contained in the XML document. A schema is a structured document which must
obey XML syntax rules. It is composed of a series of predefined tags and attributes
that are part of the XML language and are used to set the data types for the values
associated with our custom tags. Not only do we get to create custom XML tags,
but we can also denote that an XML data value is, for example, an integer data
type. Thus we can assign specific data types to specific XML data values. A schema
can be part of the XML document or a separate file.
The XML tags and attributes to create a schema are:
The Schema tag serves as a container element that delimits the beginning and end
of the schema. This tag must be closed.
The xmlns attribute is used to declare the data types of the schema XML namespace.
The value is a URL or URN address that the browser will access to get information
on the data types to allow code validation.
The xmlns:dt attribute is used to declare the data types of the schema XML namespace.
The value is a URL (Uniform Resource Locator) or URN (Uniform Resource
Name) address that the browser will access to get information on the data types to
allow code validation. If we are using IE 5 to view our XML document, then we
must include the xmlns and the xmlns:dt attributes exactly as displayed below
<Schema xmlns="urn:schema-microsoft-com:xml-data"
xmlns:dt="urn:schemas-microsoft-com:datatypes">
...
</Schema>
The AttributeType tag is used to declare the data type for an attribute of an XML
tag. This tag must be closed.
The name attribute provides the name of the attribute.
The dt:type attribute dictates the data type of the attribute.
The permitted values are:

binary boolean byte date
decimal double float int
integer long negativeInteger
nonNegativeInteger nonPositiveInteger
positiveInteger recurringInstant
short string time timeDuration
timeInstant
unsignedByte unsignedShort unsignedInt unsignedLong
The attribute tag is used to associate a previously data typed attribute to a tag.
This tag must be closed.
The type attribute provides the data type of the custom attribute.
The ElementType tag is used to declare the data type for a custom XML tag. The
tag must be closed.
The content attribute describes the intended content of the XML tag. There are
four permitted values:
Type Description
======= ===============================
eltOnly contains only elements
empty contains no content
mixed contains both elements and text
textOnly contains only text
==========================================
The name attribute provides the name of the tag (element).
The dt:type attributes dictates the data type of the tag (element). There are 23
permitted values (see above).
The element tag is used to associate a previously data typed tag to an element.
This tag must be closed.
The type attribute provides the type of the custom XML element.
2.3 Document Type Definition
The purpose of Document Type Definition (DTD) is to define the legal building
blocks of an XML document. A DTD can be declared inline in our XML document
or as an external reference. An example with an external reference is given below.
XML provides an application independent way of sharing data. With a DTD, independent
groups of developers can agree to use a common DTD for interchanging
data. Our application can use a standard DTD to verify that data that we receive
from the outside world is valid. We can also use a DTD to verify our own data.
XML documents (and HTML documents) are made up by the following building
blocks:
Elements, Tags, Attributes, Entities, PCDATA, CDATA
Attributes provide extra information about elements. Attributes are placed inside
the start tag of an element. Attributes come in name/value pairs. PCDATA means
parsed character data. We think of character data as the text found between the
start tag and the end tag of an XML. PCDATA is text that will be parsed by a
parser. Tags inside the text will be treated as markup and entities will be expanded.
CDATA also means character data. CDATA is text that will not be parsed by a
parser. Tags inside the text will NOT be treated as markup and entities will not be
expanded. Entities are variables used to define common text. Entities references are
references are references to entities. For example, the HTML entity reference
is used to insert an extra space in an HTML document. Entities are expanded when
a document is parsed by an XML parser.




<!ENTITY % reference "person IDREF #REQUIRED">
<!ELEMENT person (name | father)*>
<!ATTLIST person id ID #REQUIRED sex (m | f) #IMPLIED>
<!ELEMENT name (#PCDATA)>
<!ELEMENT father EMPTY>
<!ATTLIST father %reference;>
The XML file is given by



<!DOCTYPE familytree SYSTEM "familytree.dtd">
<familytree>
<person id="p1" sex = "m">
<name> Olaf </name>
</person>
<name> Theo </name>
<father person = "p1" />
</person>
<name> Ario </name>
</person>
<name> Carl </name>
</person>
</familytree>
Each person is identified by a unique id. This will be invaluable for later processing
of individuals. For processing the XML file we have to provide an XSL file.
2.4 Displaying XML using Data Binding

Internet Explorer 5 and 6 contain a DSO (Data Source Object) that permits displaying
the data in an XML document on an HTML page by using the technology
of client-side data binding. This involves taking the XML data from the server-side,
transferring the data to the client side for future access, and binding the data to an
HTML tag. The data is treated like a record set in ADO (ActiveX Data Object)
and the data can be manipulated by using the various methods and properties of the
ADO Recordset object. In our example, we use these features to navigate through
our data. Once the data is bound to an HTML tag, it can be viewed on IE 5 and
6. There are fifteen HTML tags that can be used for data binding:
a applet button div frame iframe img input
label marquee object select span table textarea
These fifteen tags can use two special proprietary attributes, datasrc and datafld,
that are only recognized on IE 4, IE 5 and IE 6.
<span> or <div> elements can be used to display XML data.
The datasrc attribute allows the linking of the HTML tag to the XML data document.
The datafld attribute is used to name the XML data field that we wish to
display.
These attributes are very easy to use and only require one line of code to access an
XML data value. The sign # signifies a link. Note that this is a complete HTML
element with both an opening and closing tag.
For our data binding example we use the MyXML.xml file with the library example.
We want to create an HTML page that displays the XML data for the
title subtitle author ISBN publisher city year
We want to be able to scroll through the list of books using navigation buttons
and see the data for any book. To do so, we use the src attribute of an inline xml
element to link our HTML page to the XML document. We use the HTML span
tag for the data binding. We use the datasrc attribute to link each span element
to the xml element. We use the datafld attribute to bind the specified XML data
value to the span element. We use previous and next input buttons to call data
navigation functions. We use MoveNext() and MovePrevious() ADO methods to
navigate our data. We apply RecordCount and AbsolutePosition ADO properties
to limit our data navigation so that we never go to BOF or EOF.
<HTML>
<TITLE> Data Binding </TITLE>
<BODY>
<xml id="xmlLibrary" src="file://c:\books\java\library.xml">
</xml>
<B> Use the buttons to scroll up and down the library </B>
<BR><BR>
TITLE: <span datasrc="#xmlLibrary" datafld="title"></span>
<BR>
SUBTITLE: <span datasrc="#xmlLibrary" datafld="subtitle"></span>
<BR>
AUTHOR: <span datasrc="#xmlLibrary" datafld="author"></span>
<BR>
ISBN: <span datasrc="#xmlLibrary" datafld="ISBN"></span>
<BR>
PUBLISHER: <span datasrc="#xmlLibrary" datafld="publisher"></span>
<BR>
CITY: <span datasrc="#xmlLibrary" datafld="city"></span>
<BR>
YEAR: <span datasrc="#xmlLibrary" datafld="year"></span>
<BR>
<input type="button" value="Previous" onclick="Previous()">
<input type="button" value="Next" onclick="Next()">
<SCRIPT LANGUAGE="JavaScript">
function Previous()
{
if(xmlLibrary.recordset.AbsolutePosition > 1)
xmlLibrary.recordset.movePrevious();
}
function Next()
{
if(xmlLibrary.recordset.AbsolutePosition <
xmlLibrary.recordset.RecordCount)
xmlLibrary.recordset.moveNext();
}
</SCRIPT>
</BODY>
</HTML>
2.5 Displaying XML Using XSL

XSL is the acronym for the Extensible Stylesheet Language which is an application
of XML. XSL is a powerful styling language that uses special stylesheets to create
templates to display the data contained in an XML page in a variety of ways. We
use XSL to transform an XML document into an HTML page that can be viewed on
Internet Explorer. We do this by creating a separate XSL document that is linked
to the XML document. XSL is composed of two parts: XSLT which stands for XSL
Transformation and is used to transform from an XML doucment to another format
which may be HTML, PDF or LaTEX. XSLFO which stands for XSL Formatting
which is the native XML equivalent of Cascading Style Sheets (CSS). XSLFO is
thus reponsible for rendering information in a visual way.
This technology can be used with IE 5 and IE 6. The Microsoft version and XSL
does not fully support all the recommendations set for this language by the World
Wide Web Consortium (W3C). However, XSL can be used on the server-side so that
the output is browser independent.
XSL is not a large language. It is composed of twenty tag-like elements and associated
attribute-like methods. Like XML, all XSL elements must have an opening
and closing tag. All XSL tags have the same namespace prefix, xsl:, to denote
that this is an XSL element. Notice the use of the colon. After the prefix, the suffix
designates the tag’s purpose.
In order to display our XML document, we only need three of the XSL elements.
xsl:template
The xsl:template element is used to define a template. It can also be used as a
container element to declare the start and stop of an XSL coding sequence. We use
it in this manner in our example. In order for this to work in IE 6, we must use the
following code exactly
<xsl:template xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
The next element we use is
xsl:for-each
This element is used to create a for ... each loop which allows looping through
all the values for an XML data field. We use the select attribute to specify the
name of the XML data element.
xsl:value-of
The xsl:value-of element is used to insert the value of the XML data field into
the template. We use the select attribute to specify the name of the XML data
field. The xsl:value-of element allows us to display the data value for an XML
tag.
An example is given in the following. The Library.xml file is given by

<?xml-stylesheet type="text/xsl" href="library.xsl"?>


<library>
<book>
<title> SymbolicC++ </title>
<subtitle> An Introduction to Computer Algebra </subtitle>
<author> Tan Kiat Shi, Willi Hans Steeb, Yorick Hardy </author>
<ISBN> 1852332603 </ISBN>
<publisher> Springer </publisher>
<city> London </city>
<year> 2000 </year>
</book>
<book>
<title> Classical and Quantum Computing </title>
<subtitle> with C++ and Java Simulations </subtitle>
<author> Yorick Hardy and Willi Hans Steeb </author>
<ISBN> 3764366109 </ISBN>
<publisher> Birkhauser Publishing </publisher>
<city> Basel </city>
<year> 20001 </year>
</book>
</library>
The file library.xsl is given by
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<HTML>
<BODY>
<xsl:for-each select="library/book">
<DIV>
TITLE: <xsl:value-of select="title"/>
<BR/>
AUTHOR: <xsl:value-of select="author"/>
<BR/>
YEAR: <xsl:value-of select="year"/>
<HR/>
</DIV>
</xsl:for-each>
</BODY>
</HTML>
</xsl:template>
</xsl:stylesheet>
To put an conditional if test against the content of the file, we simply add an
xsl:if element to our document. In the example we consider the table for a sporting
competition
name points
======================
Snowbird John 6234
Adler Jack 3234
Eagle Carl 134
======================
Each row of the table is identified as a
<result> ... </result>
block for the xml-file. We only want the display the table for the participants who
have more than 200 points.
The file if.xml is given by


<?xml-stylesheet type="text/xsl" href="if.xsl"?>
<ranking>
<result>
<name> Snowbird John </name>
<points> 6234 </points>
</result>
<result>
<name> Adler Jack </name>
</result>
<result>
<name> Eagle Carl </name>
</result>
</ranking>
42 CHAPTER 2. XML
The if.xsl-file is given by

<HTML>
<BODY>
<TABLE border="2">
<TR>
<TH> Name </TH>
<TH> Points </TH>
</TR>
<xsl:for-each select="ranking/result">
<xsl:if test="points > 200">
<TR>
<TD><xsl:value-of select="name"/></TD>
<TD><xsl:value-of select="points"/></TD>
</TR>
</xsl:if>
</xsl:for-each>
</TABLE>
</BODY>
</HTML>
</xsl:template>
</xsl:stylesheet>
The following two programs show an application of xsl:sort. The attributes we

can use are
order = "ascending/descending"
lang = "..."
data-type = "text/number"
case-order = "upper-first/lower-first"
The file sort.xml is given by


<?xml-stylesheet type="text/xsl" href="sort.xsl"?>
<ranking>
<player>
<name> Snowbird </name>
</player>
<player>
<name> Adler </name>
</player>
<player>
<name> Eagle </name>
</player>
</ranking>
The file sort.xsl is given by
<HTML>
<BODY>
<TABLE border="2">
<TR>
<TH> Name </TH>
<TH> Points </TH>
</TR>
<xsl:for-each select="ranking/player">
<xsl:sort select="points" order="descending" data-type="number"/>
<TR>
<TD><xsl:value-of select="name"/></TD>
<TD><xsl:value-of select="points"/></TD>
</TR>
</xsl:for-each>
</TABLE>
</BODY>
</HTML>
</xsl:template>
</xsl:stylesheet>
2.6 Using org.w3c.dom.*
The Document Object Model (DOM) is a platform- and language-neutral interface
that will allow programs and scripts to dynamically access and update the content,
structure and style of documents. The document can be further processed and the
results of that processing can be incorporated back into the presented page. DOM,
the offical W3C API for XML, builds an internal model for the XML document
which is a tree. The web site is
http://www.w3.org
In order to construct the tree it has to read the XML document sequentially, extracting
elements, attributes and name space definitions as well as processing instructions.
In the Level 1 DOM, each object, whatever it may be exactly, is a Node. For
example
<P> This is Chapter 1 </P>
has created two nodes: an element P and a text node with the content This is
Chapter 1. The text node is inside the element, so it is considered a child node of
the element. Conversely, the element is considered the parent node of the text node.
If we consider
<P> This is <B> Chapter 1 </B> </P>
the element node P has two children, one of which has a child of its own.
<P>
|
-----------------------
||
This is <B>
|
Chapter 1
Next we show how to display image metadata with ImageIO as XML-file using DOM.
Given a jpeg-file Image0.jpg. IIOMetadata contains meta information about the
image, so not the actual pixels, but the compression, keywords, comments, etc. If
we convert from one format to another, we do not want to loose this information.
A ImageTranscoder understands this meta data and maps it onto another format.
Internally, Metadata is stored as a bunch of IIOMetadataNodes. They implement
the org.w3c.dom interface. The format of this DOM tree is plug-in dependent:
the native format (as format features are different), but plug-ins may support the
plug-in neutral format.
The following example program displays, using the XSLT transformation package,
the plug-in neutral format.
// Main.java
import javax.imageio.metadata.*;
import javax.imageio.stream.*;
import javax.imageio.*;
import java.awt.image.*;
import java.util.*;
import java.io.*;
import javax.xml.transform.stream.*;
import javax.xml.transform.dom.*;
import javax.xml.transform.*;
import javax.xml.parsers.*;
import org.w3c.dom.*; // for Node class
public class Main
{
public static void main(String []args) throws Exception
{
Iterator readers = ImageIO.getImageReadersByFormatName("jpg");
ImageReader reader = (ImageReader) readers.next();
ImageInputStream iis =
ImageIO.createImageInputStream(new File("Image0.jpg"));
reader.setInput(iis,true);
BufferedImage bi = reader.read(0);
IIOMetadata metadata = reader.getImageMetadata(0);
Node node =
(Node) metadata.getAsTree(metadata.getNativeMetadataFormatName());
// use the XSLT transformation package
// to output the DOM tree we just created
TransformerFactory tf = TransformerFactory.newInstance();
Transformer transformer = tf.newTransformer();
transformer.transform(new DOMSource(node),new StreamResult(System.out));
}
}
Chapter 3
JavaScript
3.1 Introduction
The HTML language used to create pages for the World Wide Web was originally
designed to produce plain and static documents, stuff like engineering notes and
long-winded arguments by scientist types. When the Web first started, the only
browsing software available for it was text-based.
JavaScript makes HTML come alive. JavaScript is a scripting language for HTML
and the Netscape Navigator browser, version 2.0 and later. JavaScript is a
crossplatform,
object-oriented language. Core JavaScript contains a core set of objects
as Array, Date, and Math, and a core set of language elements such as operators,
control structures, and statements. JavaScript “scripts” are small programs that interact
with Netscape and the HTML content of a page. We can create a JavaScript
program to add sound or simple animation, pre-validate a form before the user’s
response
is sent to our company’s server, search through a small database, set options
based on user preferences, and much more. JavaScript performs the same function
as a macro in a word processor or electronic spreadsheet program. A macro is a
small program designed solely to run inside a program, automating some task or
enhancing a feature of the program. The difference here is that instead of a word
processor or electronic spreadsheet application, JavaScript is designed for use with
Netscape and surfing on the World Wide Web.
JavaScript is used in Netscape 2.0 and later versions, as well as in Microsoft Internet
Explorer 3.0 and later versions. As the co-developer of JavaScript, Netscape has
wanted to make JavaScript an open’standard, meaning that other companies can
use and implement JavaScript in their own Internet products. When JavaScript
was first announced in December of 1995, over two dozen companies jumped on the
bandwagon, promising to support it in future products.
Thus JavaScript is an authoring language for the typical Web page designer. It
is a scripting language in which the program is embedded as part of the HTML
document retrieved by the browser.
A JavaScript program consists of one or more instructions (also referred to as code
or commands) included with the HTML markup tags that form our Web documents.
When Netscape encounters a JavaScript instruction, it stops to process it.
For example, the instruction might tell Netscape to format and display text and
graphics on the page. Unlike a program witten in Java, JavaScript programs are
not in separate files (though this is an option using Netscape 3.0 and later). Instead,
the JavaScript instructions are mixed together with familiar HTML markup tags
such as <H1>, <P>, and <IMG>.
Because JavaScript is embedded in HTML documents, we can use any text editor
or Web page editor to write our JavaScript programs. The only requirement is that
the editor must allow direct input.
Netscape needs to be told that we are giving it JavaScript instructions, and these
instructions are enclosed between
<SCRIPT> ... </SCRIPT>
tags. Within the script tag we can have only valid JavaScript instructions. We
cannot put HTML tags for Netscape to render inside the <SCRIPT> tags, and we
cannot put JavaScript instructions outside the <SCRIPT> tags.
JavaScript is designed on a simple object-based paradigm. An object is a construct
with properties that are JavaScript variables or other objects. An object also has
functions associated with it that are known as the object’s methods. In addition to
objects that are predefined in the Navigator client and the server, we can define or
own objects. A JavaScript object has properties associated with it. We access the
properties of an object with a simple notation
objectName.propertyName
Note that JavaScript is case-sensitive. Comments in JavaScript are the same as in
C, C++ and Java, namely
// ...
and
/* ... */
Core JavaScript can be extended for a variety of purposes by supplementing it with
additional objects; for example: Client-side JavaScript extends the core language
by supplying objects to control a browser and its Document Object Model. Serverside
JavaScript extends the core language by suppling objects relevant to running
JavaScript on a server.
3.2. DOCUMENT OBJECT 49
3.2 Document Object
The document object contains information about the current document, such as its
title, when it was last modified, and the color of the background.
The document methods interact with the document. The most commonly used
document method is
document.write("text");
and
document.writeln("text");
which writes text to the browers window. The document objects is itself a property
of the window object. JavaScript assumes that we mean the current window when
we use the syntax given above. Thus the write and writeln methods insert text
into the document. The two methods are identical, except that writeln appends a
new line character to the end of the string.
The command
document.bgColor = "red";
sets the background color to red. As an exmple of these two commands consider
<HTML>
<HEAD>
<TITLE> document.html </TITLE>
</HEAD>
<BODY>
<SCRIPT>
document.write("Hello Egoli");
document.write("\n");
str1 = "willi";
str2 = "hans";
document.write("<P> str1 = " + str1 + " str2 = " + str2);
</SCRIPT>
</BODY>
</HTML>
The concatention operator + concatenates two strings values together.

The following program shows that the prompt provides a string even if we enter
digits. Then + will do concatenation. Thus to obtain numbers we use the Number
object.
<HTML>
<SCRIPT>
n = prompt("enter n: ","");
m = prompt("enter m: ","");
x = n + m;
document.write("x = " + x,"<BR>"); // concatenates strings n and m
u = Number(n);
v = Number(m);
r = u + v;
document.write("r = " + r,"<BR>"); // addition of numbers
</SCRIPT>
</HTML>
3.3 Window Object

The window object represents the contents of an entire browser window. The method
open() is a method to open a new window.
win = window.open("OpenMe.html");
fills it with the specified document. The user interface methods are special methods
of the window object. They all display a dialog box asking for user input. JavaScript
has three ready-made dialog boxes that we can use to interact with our visitors. All
three display a (fixed) title and a message, which we can set, and hold execution of
the script until the user responds. The dialog boxes are
alert(message) confirm(message) prompt(message,default)
The most important one is
alert("message");
We use this method whenever we wish to display a message. This message is diplayed
in a dialog box. The user reads the message and chooses OK to dismiss the dialog box.
The confirm(message) carries an OK and a Cancel button, and returns the value
true or false, depending upon which button was clicked. We apply it when we are
offering our visitor a simple Yes/No choice. We use confirm() in an if() test.
The dialog box prompt(message,default) carries a text box and OK and Cancel
buttons. It returns whatever text was entered. We use it to obtain information on
pages where we do not want to have a form.
<HTML>
<HEAD>
<TITLE> window.html </TITLE>
</HEAD>
<BODY>
<SCRIPT>
alert("System dialog boxes");
if(confirm("Do you want to do this?"))
alert("Let us begin")
else
alert("In any case we do it")
lnum = prompt("Enter your lucky number",""); // "" clears text box
</SCRIPT>
</BODY>
</HTML>
3.4 Data Types

Data types must not be declared we just define them. JavaScript recognizes the
following types of values:
numbers, such as 18 or 2.81
logical (boolean) values, either true or false
strings such as willi. The String literal is zero or more characters enclosed in
double " or single ' quotation marks.
null (null value). a special keyword denoting a null value. null is also a primitive
value. Since JavaScript is case sensitive, null is not the same as Null, NULL, or any
other variants. The null value behaves as 0 in numeric context and as false in
boolean context.
undefined, a top-level property whose value is undefined. undefined is also a primitive
value.
The assignment operator = assigns a value to its left operand based on the value of
its right operand. For example
i = 4;
x = 3.14159;
found = true;
nfound = false;
str = "xxxyyy";
c = 'X';
Variables can also be declared using the keyword var. For example
var username;
var max = 500;
The first line creates the variable username, but without giving it a value; the second
creates max and assigns 500 to it.
The rules for variable names are the same as those for object names. Names must
start with a letter or underscore and may contain any combinations of letters and
digits. Spaces cannot be used.
3.4. DATA TYPES 53
<HTML>
<HEAD>
<TITLE> DataTypes.html </TITLE>
</HEAD>
<BODY>
<SCRIPT>
i = 4;
x = 3.14159;
c = 'X';
found = true;
nfound = false;
str = "xy";
document.write("i = " + i,"<BR>");
document.write("x = " + x,"<BR>");
document.write("c = " + c,"<BR>");
document.write("found = " + found,"<BR>");
document.write("nfound = " + nfound,"<BR>");
document.write("str = " + str,"<BR>");
n = null;
document.write("n = " + n,"<BR>"); // => null
div = n/4;
document.write("div = " + div,"<BR>"); // => 0
r = "The answer is " + 60;
document.write("r = " + r,"<BR>");
s = 60 + " is the answer";
document.write("s = " + s,"<BR>");
myList = ["Berlin", , "London", "Singapore"];
document.write("myList[1] = " + myList[1],"<BR>"); // => undefined
</SCRIPT>
</BODY>
</HTML>
3.5 Special Characters

A string literal is zero or more characters enclosed in double " or single ' quotation
marks. In addition to ordinary characters, we can also include special characters in
strings. The special characters are
Character Meaning
========= =========
\b backspace
\f form feed
\n newline
\r carriage return
\t tab
\' apostrophe or single quote
\" double quote
\\ backslash character \
\XXX character with the Latin-1 encoding specified by up
three octal digits XXX between 0 and 377.
\251 is the octal sequence for the copyright symbol
\xXX character with the Latin-1 encoding specified by the
two hexadecimal digits XX between 00 and FF.
\xA9 is the hexadecimal sequence for the copyright
symbol.
======================================================
=========
The following program shows an application
<HTML>
<HEAD>
<TITLE> Special.html </TITLE>
</HEAD>
<BODY>
<SCRIPT>
str1 = "one line \n another line";
document.write("str1 = " + str1,"<BR>"); // one line another line
s = "one line <BR> another line";
document.write("s = " + s,"<BR>"); // s = one line
// another line
str2 = "a tab \t in a string";
document.write("str2 = " + str2,"<BR>");
str3 = "She reads \"The Nonlinear Workbook\" by W.-H. Steeb"
3.5. SPECIAL CHARACTERS 55
document.write("str3 = " + str3,"<BR>");
symbol1 = "\251"
document.write("symbol1 = " + symbol1,"<BR>"); // @
symbol2 = "\xA9"
document.write("symbol2 = " + symbol2,"<BR>"); // @
</SCRIPT>
</BODY>
</HTML>
3.6 Arithmetic Operations

The arithmetic operations are
+ addition
- subtraction
* multiplication
/ division
% modulus (remainder)
++ increment operator
-- decrement operator
As in C, C++ and Java the operators ++ and -- have a preincrement (predecrement)
and postincrement (postdecrement) version. We notice that division is floating
point division. Thus 1/4 returns 0.25. JavaScript also has the shorthand operators
x += y for x = x + y etc. The following program shows how the arithmetic
operators are used.
<HTML>
<HEAD>
<TITLE> JSArith.html </TITLE>
</HEAD>
<BODY>
<SCRIPT>
i = 7;
j = -3;
k = i + j;
document.write("<BR> k = " + k + "<BR>");
m = i - j;
document.write("<BR> m = " + m + "<BR>");
n = i*j;
document.write("<BR> n = " + n + "<BR>");
p = i/j;
document.write("<BR> p = " + p + "<BR>");
r = i%j;
document.write("<BR> r = " + r + "<BR>");
i++;
document.write("<BR> i = " + i + "<BR>");
j--;
document.write("<BR> j = " + j + "<BR>");
</SCRIPT>
</BODY>
</HTML>
3.7 Comparison Operators

A comparison operator compares its operands and returns a logical value based on
whether the comparision is true. The operands can be numerical or string values.
Strings are compared based on the standard lexicographical ordering (ASCII table).
The following table describes the comparision operators
Operator Name Description
======== ============
==========================================
== equal returns true if the operands are equal
!= not equal returns true if the operands are not equal
> greater than returns true if the left operand is
greater than the right operand
>= greater than returns true if the left operand is
or equal greater than or equal to the right operand
< less than returns true if the left operand is
less than the right operand
<= less than returns true if the left operand is
or equal less or equal to the right operand
======================================================
=============
<HTML>
<HEAD>
<TITLE> Comparison.html </TITLE>
</HEAD>
<BODY>
<SCRIPT>
result1 = (3 == 3);
document.write("result1 = " + result1,"<BR>"); // => true
result2 = (3 != 3);
document.write("result2 = " + result2,"<BR>"); // => false
result3 = (4 > 2);
document.write("result3 = " + result3,"<BR>"); // => true
</SCRIPT>
</BODY>
</HTML>
3.8 Bitwise Operators

Bitwise operators treat their operands as a set of 32 bits (zeros and ones). For
example the decimal number 14 has the binary representation
14 -> 00000000 00000000 00000000 000001110
The bitwise operators are the bitwise AND &, the bitwise OR |, the bitwise XOR ^,
and the bitwise NOT ~. Furthermore we have the left shift <<, the sign-propagating
right shift >> and the zero-fill right shift >>>.
<HTML>
<HEAD>
<TITLE> Bitwise.html </TITLE>
</HEAD>
<BODY>
<SCRIPT>
m = 9;
n = 16;
p1 = m & n; // AND
p2 = m | n; // OR
p3 = m ^ n; // XOR
p4 = ~m; // NOT
p5 = ++p4; // increment by 1
document.write("p1 =" + p1,"<BR>"); // => 0
document.write("p4 =" + p4,"<BR>"); // => -9
document.write("p5 =" + p5,"<BR>"); // => -9
q1 = 31 >> 2;
document.write("q1 =" + q1,"<BR>"); // => 7
q2 = 3 << 3;
document.write("q2 =" + q2,"<BR>"); // => 24
q3 = -9 >> 2;
document.write("q3 = " + q3,"<BR>"); // => -3
q4 = -9 >>> 2;
document.write("q4 = " + q4,"<BR>"); // => 1073741821
</SCRIPT>
</BODY>
</HTML>
The following program shows how the bitwise operation & and the shift operations
are applied for the Russian farmer multiplication.
3.8. BITWISE OPERATORS 59
<HTML>
<SCRIPT>
x = prompt("Enter m: ","");
y = prompt("Enter n: ","");
m = Number(x);
n = Number(y);
if(m == 0) document.write("0","<BR>");
if(n == 0) document.write("0","<BR>");
if(m == 1) document.write(n,"<BR>");
if(n == 1) document.write(m,"<BR>");
temp = 0;
while(m != 0)
{
document.write(m,"<BR>");
document.write(n,"<BR>");
if((m & 1) == 1)
temp = n + temp;
document.write("temp:" + temp,"<BR>");
m = m >> 1; n = n << 1;
}
document.write(temp);
</SCRIPT>
</HTML>
3.9 Program Flow

JavaScript supports a compact set of statements we can use to control the program
flow. They are
conditional statements: if ... else and switch
loop statements: for, while, do ... while, label, break, continue. Note that
label is not itself a looping statement, but is frequently used with these statements.
There is no goto in JavaScript.
The if ... else, switch, for, while, do ... while conditions have the form as
in Java.
The logical operators
&& logical AND
|| logical OR
! logical NOT
also have the same form as in Java, C and C++. Furthermore the relational operators
are
== equal to < less than <= less than or equal to
!= not equal to > greater than >= greater than equal to
An example is
if((i%3) == 0) { ... }
The for loop and while loop are the same as in Java. For example
...
for(n=1;n<10;n++)
{
x = i*n;
}
The break statement provides a way of escaping from for or while loops. For
example
for(count=0;count<5;count++)
{
answer = 4;
if(answer == (count*count))
break;
}
3.9. PROGRAM FLOW 61
The following program uses two for loops to generate a triangle of asterisks.
<HTML>
<COMMENT> asterisk.html </COMMENT>
<SCRIPT>
n = 9;
for(i=1;i<n;i++)
{
for(j=1;j<=i;j++)
{
document.write("*");
}
document.write("<BR>");
}
</SCRIPT>
</HTML>
A switch statement allows a program to evaluate an expression and attempt to
match the expression’s value to a case label. If a match is found, the program executes
the associated statement.
<HTML>
<COMMENT> MSwitch.html </COMMENT>
<SCRIPT>
MArray = [ 3, 4, 1, 1, 4, -3, 1, 6 ];
for(j=0;j<MArray.length;j++)
{
switch(MArray[j])
{
case 1: document.write("number is 1","<BR>")
break;
case 3: document.write("number is 3","<BR>")
break;
default: document.write("number is not 1 or 3","<BR>")
break;
}
}
</SCRIPT>
</HTML>
<HTML>
62 CHAPTER 3. JAVASCRIPT
<COMMENT> SSwitch.html </COMMENT>
<SCRIPT>
s = new String("bella");
for(j=0;j<s.length;j++)
{
c = s.charAt(j);
document.write("j = " + j, "<BR>");
switch(c)
{
case 'a': document.write("character is 'a'","<BR>")
break;
case 'b': document.write("character is 'b'","<BR>")
break;
default: document.write("character is not 'a' or 'b'","<BR>")
break;
}
}
</SCRIPT>
</HTML>
The continue statement inside a for loop or while loop skips over any remaining
lines and loops round again.
3.9. PROGRAM FLOW 63
The following HTML file gives an example how the for loop and the while loop is
used.
<HTML>
<HEAD>
<TITLE> JSLoop.html </TITLE>
</HEAD>
<BODY>
<SCRIPT>
document.write("Hello Egoli");
for(i=1;i<=10;i++)
{
if((i%2) == 0)
{
document.write("<P>Loop: " + i + "</P>");
}
}
alert("We are leaving the first Script block");
</SCRIPT>
<B> Now we use a script again </B>
<SCRIPT>
sum = 0;
count = 0;
while(count < 10)
{
sum += count;
count++;
}
document.write("<BR> sum = " + sum);
</SCRIPT>
<BR><BR>
<B> Again we enter script to set the background colour </B>
<SCRIPT>
</SCRIPT>
</BODY>
</HTML>
JavaScript also has a for ... in statement. It uses it to manipulate objects. The
form is
for(varname in objname)
{ forbody }
The following program shows an example of the for ... in statement.
<HTML>
<TITLE> forin.html </TITLE>
<BODY>
<SCRIPT>
languages = ["C++", "Java", "C", "Lisp"];
var language = "C";
var label = 0;
for(var i in languages)
{
if(language == languages[i])
{
document.write("language in list on position: " + i,"<BR>");
label = 1;
}
}
document.write("label = " + label,"<BR>");
if(label == 0)
{ document.write("language not in list"); }
</SCRIPT>
</BODY>
</HTML>
The purpose of the with statement in JavaScript is to permit a number of object

references to be made to the same object (or instance) without having to repeat the
name of that object. A with statement looks as follows
with(object)
{
statements
}
The following with statement specifies that the Math object is the default object.
<HTML>
<HEAD>
<TITLE> with.html </TITLE>
</HEAD>
<BODY>
<SCRIPT>
var a = 3.0;
var b = 7.0;
var result1;
var result2;
with(Math)
{
result1 = PI*a*b;
result2 = sin(a)*sin(a) + cos(b)*cos(b);
}
document.write("result1 = " + result1,"<BR>");
document.write("result2 = " + result2,"<BR>");
</SCRIPT>
</BODY>
</HTML>
3.10 Recursion
Recursion plays a central role in computer science. A recursive function is one whose
definition includes a call to itself. More generally, a recursive method is a method
that calls itself either directly or indirectly through another method. A recursion
needs a stopping condition. JavaScript allows recursion.
The following program shows how to use recursion for the generatimg of the Fibonacci
numbers.
<HTML>
<COMMENT> recursion.html </COMMENT>
<SCRIPT>
x = prompt("Enter the position of the Fibonacci number","");
n = Number(x);
function fib(n)
{
if(n<=2) return 1;
else return (fib(n-1)+fib(n-2));
}
result = fib(n);
document.write("Fibonacci number is: " + result,"<BR>");
</SCRIPT>
</HTML>
3.11 Other JavaScript Constructs
The new operator creates a new copy of an object. We can use the new operator
to create an instance of a user-defined object type or one of the predefined object
types
Arrays, Boolean, Date, Functions, Image, Number, Object,
Option, RegExp, String
An example is
mystring = new String("xxyy");
now = new Date();
JavaScript also has the this pointer which refers to the current object. In general,
this refers to the calling object in a method. The syntax is
this
this.object
The object name helps to disambiguate what this means. The this keyword is
also often used to define a new property in a user-defined object. When combined
with the FORM property, this can refer to the current object’s parent form.
We use the var statement to explicitly declare a variable. We may also define a
value for the variable at the same time we declare it, but this is not necessary. The
var statement also sets the scope of a variable when a function is defined inside a
function. For example
var name1 = "value";
name1 = "value";
Used outside of a user-defined function, both of these do exactly the same. Both
create a global variable. A global variable can be accessed from any function in any
window or frame that is currently loaded. If we use var name1 inside a user-defined
function it is local in scope, we only can see it inside the function.
The void operator specifies an expression to be evaluated without returning a value.
The delete operator deletes an object, an object’s property, or an element at a
specified index in an array.
3.12 Functions
JavaScript allows the use of functions indicated by the keyword function. The var
statement inside a function makes the variable local, i.e. it goes out of scope when
we leave the function.
The following HTML file show how functions are used within JavaScript. The
program opens a window where we see
Type something here
a textbox and a button called ClickMe. We enter some text in the textbox, for
example Egoli-Gauteng. Then we click at the Button ClickMe. The method alert
opens a dialog box and displays
The value of the textbox is: Egoli-Gauteng
Then click OK to close the dialog box.
<HTML>
<COMMENT> MyForm.html </COMMENT>
<BODY>
function testMe(form)
{
Ret = form.box.value;
alert("The value of the textbox is: " + Ret);
}
</SCRIPT>
<FORM>
Type something here <INPUT TYPE="text" NAME="box"><P>
<INPUT TYPE="button" NAME="button" VALUE="ClickMe"
onClick = "testMe(this.form)">
</FORM>
</BODY>
</HTML>
In the following example we show the use of two functions. The HTML commands
to display a table of the square roots of the integers from 1 to 20 are embedded in
the JavaScript code.
<HTML>
<COMMENT> Function.html </COMMENT>
<HEAD>
function sqrttable(myWindow)
{
myWindow.document.write("<B> Square Root Table </B><BR>");
myWindow.document.write("<HR>");
myWindow.document.write("<TABLE BORDER=1 CELLSPACING=5>");
myWindow.document.write("<TR><TD>Number</TD><TD>Squareroot</TD></TR>");
for(var i=1;i<=20;i++)
{
myWindow.document.write("<TR><TD>" + i + "</TD><TD>" + Math.sqrt(i) +
"</TD></TR>");
}
myWindow.document.write("</TABLE>");
myWindow.document.write("<HR>");
}
function display()
{
var dynWindow = window.open("","Title","width=200,height=300,scrollbars",
+ "resizable");
sqrttable(dynWindow);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="Show it">
<input type=button value="show table" onClick="display()">
</FORM>
</BODY>
</HTML>
3.13 Creating New Objects

Using a constructor function we can create an object with the following two steps
1. Define the object type by writing a constructor function
2. Create an instance of the object with new
To define an object, create a function for the object type that specifies its name,
properties, and methods. The following HTML file gives an example.
<HTML>
<COMMENT> car.html </COMMENT>
<BODY>
<SCRIPT>
function car(make,model,year)
{
this.make = make
this.model = model
this.year = year
}
mycar = new car("BMW","Z3",2000)
yourcar = new car("Volkswagen","Beetle",1999)
hiscar = new car("Audi","A6",2000)
document.write("<P> mycar = " + mycar.model)
document.write("<P> yourcar = " + yourcar.year)
document.write("<P> hiscar = " + hiscar.make)
</SCRIPT>
</BODY>
</HTML>
3.14. PREDEFINED CORE OBJECTS 71
3.14 Predefined Core Objects
JavaScript provides the predefined core objects
Array, Boolean, String, Math, Number
In the following programs we show how the predefined objects are used.
An array is an ordered set of values that we refer to with a name and an index. The
Array object has methods for manipulating arrays in various ways, such as joining,
reversing, and sorting them. It has a property for determing the array length and
other properties.
An array can be created as follows:
arrayObjectName = new Array(element0,element1,...,elementN)
or
arrayObjectName = new Array(arrayLength)
Array literals are also Array objects. For example the following literal is an Array
object
cities = ["London", "Paris", "Berlin"]
The first program shows how the predefined core object Array is used.
<HTML>
<HEAD>
<TITLE> Array.html </TITLE>
</HEAD>
<BODY>
<SCRIPT>
myArray = new Array("C++", "Lisp", "Java");
document.write(myArray.join(),"<BR>");
document.write(myArray.reverse(),"<BR>");
yourArray = new Array(3);
yourArray = myArray.sort();
document.write("yourArray = " + yourArray,"<BR>");
newArray = new Array("Assembler", "VHDL");
concatArray = new Array(5);
concatArray = myArray.concat(newArray);
document.write("concatArray = " + concatArray,"<BR><BR>");
x = new Array(2);
x[0] = 2;
x[1] = 5;
result = x[0]*x[1];
document.write(result,"<BR><BR>"); // => 10
document.write("length = " + x.length,"<BR><BR>"); // => 2
a = new Array(4)
for(i=0;i<4;i++)
{
a[i] = new Array(4)
for(j=0;j<4;j++)
{
a[i][j] = "["+i+","+j+"]"
}
}
for(i=0;i<4;i++)
{
str = "Row "+i+": "
for(j=0;j<4;j++)
{
3.14. PREDEFINED CORE OBJECTS 73
str += a[i][j];
}
document.write(str,"<P>")
}
</SCRIPT>
</BODY>
</HTML>
The Boolean object is a wrapper around the primitive Boolean data type.
<HTML>
<HEAD>
<TITLE> Boolean.html </TITLE>
</HEAD>
<BODY>
<SCRIPT>
r = Math.random();
if(r < 0.5)
{
b = new Boolean(true);
}
else
{
b = new Boolean(false);
}
document.write("b = " + b,"<BR>");
</SCRIPT>
</BODY>
</HTML>
The String object is a wrapper around the string primitive data type. We should
not confuse a string literal with the String object. For example
s1 = "egoli"; // creates a string literal value
s2 = new String("egoli"); // creates a String object
We can call any of the methods of the String object on a string literal value.
JavaScript automatically converts the string literal to a temporary String object,
calls the method, and then discards the temporary String object.
The following program shows an application of several methods of the String object.
<HTML>
<HEAD>
<TITLE> String.html </TITLE>
</HEAD>
<BODY>
<SCRIPT>
mystring = new String("Hello Egoli");
lgth = mystring.length;
document.write("lgth = " + lgth,"<BR><BR>"); // => 11
ch = mystring.charAt(3);
document.write("ch = " + ch,"<BR><BR>"); // => l
chcode = mystring.charCodeAt(3);
document.write("chcode = " + chcode,"<BR><BR>"); // => 108
sub = mystring.substring(2,6);
document.write("sub = " + sub,"<BR><BR>"); // => llo
lower = mystring.toLowerCase();
document.write("lower = " + lower,"<BR><BR>"); // => hello egoli
yourstring = new String("willi-hans");
upper = yourstring.toUpperCase();
document.write("upper = " + upper,"<BR><BR>"); // => WILLI-HANS
string1 = new String("carl-");
string2 = new String("otto");
string3 = string1.concat(string2);
document.write("string3 = " + string3,"<BR><BR>"); // => carl-otto
str = new String("12 34 45");

myarray = new Array(3);
myarray = str.split(" ");
document.write("myarray[0] = " + myarray[0],"<BR>"); // => 12
</SCRIPT>
</BODY>
</HTML>
The top-level predefined function eval evaluates a string of JavaScript code without
reference to a particular object. The syntax is
eval(expr)
where expr is a string to be evaluated.
<HTML>
<HEAD>
<TITLE> Eval.html </TITLE>
</HEAD>
<BODY>
<SCRIPT>
s1 = "3 + 3";
s2 = new String("3 + 3");
document.write("result1 = " + eval(s1),"<BR>"); // => 6
document.write("result2 = " + eval(s2),"<BR>"); // => 3 + 3
</SCRIPT>
</BODY>
</HTML>
The predefined Math object has properties for mathematical constants and functions.
Standard mathematical functions are methods of Math. For example
abs, sin, cos, tan, acos, asin, atan, exp, log
ceil, floor, min, max, pow, round, sqrt
An application is as follows:
<HTML>
<HEAD>
<TITLE> Math.html </TITLE>
</HEAD>
<BODY>
<SCRIPT>
document.write(Math.sin(1.14159),"<BR>");
document.write(Math.sin(Math.PI),"<BR><BR>");
r = 2.0; theta = 1.0;
with(Math)
{
a = PI*r*r;
y = r*sin(theta)
x = r*cos(theta)
}
document.write("a = " + a,"<BR>");
document.write("y = " + y,"<BR>");
document.write("x = " + x,"<BR>");
z = Math.random();
document.write("z = " + z,"<BR>");
r1 = Math.max(3,4,2,7,1);
document.write("r1 = " + r1,"<BR>"); // 7
r2 = Math.min(3,1,10,20,2,3,9);
document.write("r2 = " + r2,"<BR>"); // 1
</SCRIPT>
</BODY>
</HTML>
The Number object has properties for numerical constants, such as maximum value,
not-a-number (NaN), and infinity. We cannot change the values of these constants.
<HTML>
<HEAD>
<TITLE> Number.html </TITLE>
</HEAD>
<BODY>
<SCRIPT>
biggestNum = Number.MAX_VALUE;
document.write("biggestNum =" + biggestNum,"<BR>");
smallestNum = Number.MIN_VALUE;
document.write("smallestNum = " + smallestNum,"<BR>");
diff = biggestNum - smallestNum;
document.write("diff = " + diff,"<BR>");
infiniteNum = Number.POSITIVE_INFINITY;
document.write("infiniteNum = " + infiniteNum,"<BR>");
negInfiniteNum = Number.NEGATIVE_INFINITY;
document.write("negInfiniteNum = " + negInfiniteNum,"<BR>");
notANum = Number.NaN;
document.write("notANum = " + notANum,"<BR>");
</SCRIPT>
</BODY>
</HTML>
3.15 Object object

JavaScript supports a generic Object() object, which we can use to make new
objects. The following two programs show how to create and use one-dimensional
arrays using the Object object. In the first program we enter the colour and click
the Find button. The hextriplet is displayed. In the second program we enter the
name of the customer and click the Find button. This provides us with the complete
information about the customer. The method
String toLowerCase()
converts a string to all lowercase.
<HTML>
<HEAD>
<TITLE> DataBase.html </TITLE>
</HEAD>
<BODY>
Colour = new Object()
Colour[0]=10
Colour[1]="aliceblue"
Colour[2]="antiquewhite"
Colour[3]="aqua"
Colour[4]="aquamarine"
Colour[5]="azure"
Colour[6]="beige"
Colour[7]="bisque"
Colour[8]="black"
Colour[9]="blanchedalmond"
Colour[10]="blue"
Data = new Object()
Data[1]="f0f8ff"
Data[2]="faebd7"
Data[3]="00ffff"
Data[4]="7fffd4"
Data[5]="f0ffff"
Data[6]="f5f5dc"
Data[7]="ffe4c4"
Data[8]="000000"
Data[9]="ffebcd"
Data[10]="0000ff"
function checkDatabase()
{
var Found = false;
var Item = document.testform.color.value.toLowerCase();
Count = 1;
while(Count <= Colour[0])
{
if(Item == Colour[Count])
{
Found = true;
alert("The hex triplet for '" + Item + "' is #" + Data[Count]);
break;
}
Count++;
} // end while
if(!Found)
alert("The color '" + Item +"' is not listed in the database");
}
</SCRIPT>
<FORM NAME="testform" onSubmit="checkDatabase()">
Specify a color name, then click the
"Find" button to see its hex triplet:
<BR>
<INPUT TYPE="text" NAME="color" VALUE="" onClick=0> <P>
<INPUT TYPE="button" NAME="button" VALUE="Find"
onClick="checkDatabase()">
</FORM>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> DataBase2.html </TITLE>
</HEAD>
Names = new Object()
Names[0]=6
Names[1]="cooper"
Names[2]="smith"
Names[3]="jones"
Names[4]="michaels"
Names[5]="avery"
Names[6]="baldwin"
Data = new Object()
Data[1]="Olli|Cooper|44 Porto Street|666-000"
Data[2]="John|Smith|123 Main Street|555-1111"
Data[3]="Fred|Jones|PO Box 5|555-2222"
Data[4]="Gabby|Michaels|555 Maplewood|555-3333"
Data[5]="Alice|Avery|1006 Pike Place|555-4444"
Data[6]="Steven|Baldwin|5 Covey Ave|555=5555"
function checkDatabase()
{
var Found = false; // local variable
var Item = document.testform.customer.value.toLowerCase();
for(Count=1;Count<=Names[0];Count++)
{
if(Item == Names[Count])
{
Found = true;
var Ret = parser(Data[Count], "|");
var Temp = "";
for(i=1;i<=Ret[0];i++)
{
Temp += Ret[i] + "\n";
}
alert(Temp);
break;
}
}
if(!Found)
alert("Sorry, the name '" + Item +"' is not listed in the database.")
3.15. OBJECT OBJECT 81
} // end function checkDatabase()
function parser(InString,Sep)
{
NumSeps=1;
for(Count=1;Count<InString.length;Count++)
{
if(InString.charAt(Count)==Sep)
NumSeps++;
}
parse = new Object();
Start=0; Count=1; ParseMark=0;
LoopCtrl=1;
while(LoopCtrl==1)
{
ParseMark = InString.indexOf(Sep,ParseMark);
TestMark = ParseMark+0;
if((TestMark==0) || (TestMark==-1))
{
parse[Count]= InString.substring(Start,InString.length);
LoopCtrl=0;
break;
}
parse[Count] = InString.substring(Start,ParseMark);
Start=ParseMark+1;
ParseMark=Start;
Count++;
}
parse[0]=Count;
return (parse);
} // end function parser()
</SCRIPT>
<FORM NAME="testform" onSubmit="checkDatabase()">
Enter the customer's name, then click the "Find" button:
<BR>
<INPUT TYPE="text" NAME="customer" VALUE="" onClick=0> <P>
<INPUT TYPE="button" NAME="button" VALUE="Find"
onClick="checkDatabase()">
</FORM>
</BODY>
</HTML>
3.16 Date Object

The Date object is used to work with dates and times. We create an instance of the
Date object with the new keyword. To store the current date in a variable called
my_date:
my_date = new Date()
After creating an instance of the Date object, we can access all the methods of the
object from the my_date variable. We have to keep in mind that the method
getMonth()
returns the month of a Date object from 0-11, where 0=January, 1=February, etc.
The following program shows an example.
<HTML>
<HEAD> </HEAD>

<BODY>
document.write("<CENTER><H2> Today is </H2><BR>");
var date = new Date();
var dd = date.getDate();
var mm = date.getMonth() + 1;
var yy = date.getYear();
if(dd < 10) dd = "0" + dd;
if(mm < 10) mm = "0" + mm;
if(yy < 10) yy = "0" + yy;
document.write("<B>" + dd + "." + mm + "." + yy + "</B>");
document.write("</CENTER>");
</SCRIPT>
</BODY>
</HTML>
3.16. DATE OBJECT 83
In the second program we test whether the present time is am or pm.
<HTML>
<HEAD>
<TITLE> clockset.html </TITLE>
</HEAD>
function setClock()
{
now = new Date();
var CurHour = now.getHours();
var CurMinute = now.getMinutes();
now = null;
if(CurHour >= 12)
{
CurHour = CurHour - 12;
Ampm = "pm";
}
else
Ampm = "am";
if(CurHour == 0)
CurHour = "12";
if(CurMinute < 10)
CurMinute = "0" + CurMinute
else
CurMinute = "" + CurMinute
CurHour = "" + CurHour;
Time = CurHour + ":" + CurMinute + Ampm
document.clocktext.clock.value = Time;
setTimeout("setClock()",1000*30)
}
</SCRIPT>
</HEAD>
<BODY onLoad = "setClock()">
<FORM NAME = "clocktext">
<INPUT TYPE="text" NAME="clock" VALUE="" SIZE=8>
</FORM>
</BODY>
</HTML>
3.17 Regular Expression

Regular expressions are patterns used to match character combinations in strings.
In JavaScript, regular expressions are also objects. These patterns are used with
the exec and test methods of RegExp, and the match, replace, search and split
methods of String. We can construct regular expression either using the constructor
function of the RegExp object, for example
re = new RegExp("abc+de")
or using an object initializer, for example
re = /abc+de/
Using the constructor function provides runtime compilation of the regular expression.
Regular expression have two optional flags that allow for global and case
insensitive searching. To indicate a global search we use the g flag. To indicate
a case insensitive search we use the i flag. These flags can be used separatly or
together in either order, and are included as part of the regular expression.
The methods that use regular expressions are:
exec A RegExp methods that executes a search for a match in a string.
It returns an array of information.
test A RegExp method that tests for a match in a string.
It returns true or false.
match A String method that executes a search for a match in a string.
It returns an array of information or null on a mismatch.
search A String method that tests for a match in a string.
It returns the index of the match, or -1 if the search fails.
replace A String method that executes a search for a match in a string,
and replaces the matched substring with the replacement
substring.
split A String method that uses a regular expression or a fixed
string to break a string into an array of substrings.
Pattern matching in JavaScript and Perl is closely related.
There are a large number of special characters in regular expressions. In the following
we list some of them.
The backslash \ indicates that the next character is special and not to be interpreted
literally. For example, /b/ matches the character b. However /\b/ means match a
word boundary.
The character ^ indicates matches at the beginning of input or line. For example,
/^X/ does not match the X in "in X" but does match it in "Xenia".
The character $ indicates matches at end of input or line. For example, t$ does not
match the t in "otto", but does match it in "art".
Using the asterisk * we can test whether the preceding characters matches 0 or more
times.
The + indicates matches of the preceding characters 1 or more times.
Using ? we can find the matches of the preceding characters 0 or 1 time. For example,
/el?le?/ matches the "el" in "angel" and "le" in "angle".
The command (x) matches "x" and remembers the match. Thus including parentheses
in a regular expression pattern causes the corresponding submatch to be
remembered. For example, /x(y)x/ matches the string "xyx" and remembers y.
The commmand x | y matches either x or y.
Let n be a positive integer. Then {n} matches exactly n occurrences of the preceding
character.
[xyz] is a character set. It matches any one of the enclosed characters. We can
specify a range of characters by using a hyphen. For example, [abcd] is the same
as [a-d]. The expression [^xyz] is a negated or complemented character set. It
matches anything that is not included in the brackets. Again we can specify a range
of characters by using a hyphen.
The command [\b] matches a backspace and \b matches a word boundary such
as space. The command \d matches a digit character. This is equivalent to [0-9].
With the command \D we match any non-digit character. This is equivalent to
[^0-9]. The command \f matches a form-feed, \n a line-feed, \r a carriage return,
\t a tab.
With \w we can match any alphanumeric character including underscore. It is
equivalent to [A-Za-z0-9_].
<HTML>
<COMMENT> RegExp.html </COMMENT>
<BODY>
<SCRIPT>
re0 = /xyx/
result0 = re0.exec("czxyyyxer")
document.writeln(result0)
// => null
re1 = /xyx/
result1 = re1.exec("czxyxer")
// => xyx
re2 = /^X/
result2 = re2.exec("Xylon")
// => X
re3 = /^X/
result3 = re3.exec("ylonX")
// => null
re4 = /t$/
result4 = re4.exec("art")
// => t
re5 = /t$/
result5 = re5.exec("otto")
// => null
re6 = /le?/
result6 = re6.exec("angle")
// => le
re7 = new RegExp("a+")
result7 = re7.exec("Cbaabbaxc")
// => aa
re8 = /xy+x/
// => xyyyx
re9 = /x(y+)x/
// => xyyyx, yyy
re10 = /xx aa$\n/
result10 = re10.test("yybb ++")
// => false
// \w matches any alphanumeric characters
// \s matches a single character other than white space
re11 = /(\w+)\s(\w+)/
str1 = "willi hans"
result11 = str1.replace(re11,"$2,$1")
// hans willi
re12 = new RegExp("[a-z]")
result12 = re12.exec("12345ac")
// => a
</SCRIPT>
</BODY>
</HTML>
3.18 Prompts
The prompt is a special method of the window object. It displays a dialog box with
a single-text box and Cancel and OK buttons
prompt(message,defaultText)
The word prompt tells JavaScript that a dialog box will appear on the screen. The
word message is the text that is displayed in the prompt box. Lastly, the word
defaultText is the text displayed in the text box.
<HTML>
<HEAD>
<COMMENT> prompt.html </COMMENT>
</HEAD>
<BODY bgcolor=yellow text=black>
var i;
var j;
var k;
i = 1;
j = 1;
document.write("<H4>");
var m = prompt("enter the number of Fibonacci numbers:",0);
document.write(i + "<BR>");
document.write(j + "<BR>");
k = i + j;
document.write(k + "<BR>");
for(var n=3;n<=m-1;n++)
{
i = j;
j = k;
k = i + j;
document.write(k + "<BR>");
}
</SCRIPT>
</BODY>
</HTML>
3.19 Events
JavaScript programs are typically event-driven. Events are actions that occur on
the Web page, usually of something the user does. Examples are: a button click is
an event, giving focus to a form element, resizing the page, submitting a form.
An event, then, is the action which triggers an event handler. The event handler
specifies which JavaScript code to execute. Often, event handlers are placed within
the HTML tag which creates the object on which the event acts. For example, a
hyperlink is subject to a mouseover event, meaning that its event handler will be
triggered when a mouse passes over the link. The JavaScript which is called by the
event handler may be any valid JavaScript code: a single statement or a series of
statements, although most often it is a function call.
The set of all events which may occur, and the particular page elements on which
they can occur, is part of the Document Object Model (DOM), and not of JavaScript
itself. Thus, Netscape and Microsoft do not share the exact same set of events, nor
are all page elements subject to the same events between browsers.
The table below displays some of the most commonly used events supported in both
DOM’s.
Event Occurs when ... Event Handler
========== =========================== =============
click User clicks on form or link onclick
change User changes value of text, onchange
textarea, or select element
focus User gives form element onfocus
input focus
blur User removes input focus onblur
from form element
mouseover User moves mouse pointer onmouseover
over a link or anchor
mouseout User moves mouse pointer onmouseout
off of link or anchor
select User selects form element's onselect
input field
submit User submits a form onsubmit
resize User resizes the browser onresize
window
load User loads the page in the onload
Navigator
unload User exits the page onunload

The following program shows an example.
<HTML>
<COMMENT> Event1.html </COMMENT>
<HEAD>
window.onresize = message;
function message()
{
alert("The window has been resized!");
}
</SCRIPT>
</HEAD>
<BODY>
Please resize the window.
</BODY>
</HTML>
In the following example we demonstrate the onBlur event and can see how it is
possible to force a user to enter valid information into a form. The user is forced to
enter a number from 0 to 9.
<HTML>
<COMMENT> onblur.html </COMMENT>
<HEAD>
function isDigit(c)
{
return ((c >= "0") && (c <= "9"))
}
function checkValue(field)
{
if(!isDigit(field.value))
{
alert("You must enter a digit from 0 to 9.");
field.focus();
}
if((field.value.length < 0) || (parseInt(field.value) >= 10))
{
alert("You did not enter a digit from 0 to 9");
field.focus();
}
}
</SCRIPT>
<FORM>
Please enter a number from 0 to 9:
<INPUT TYPE=TEXT NAME="number" SIZE=3 onBlur="checkValue(this);">
<BR><BR>
Please enter your name:
<INPUT TYPE=TEXT NAME="name" SIZE=25>
</FORM>
</BODY>
</HTML>
The following example demonstrates the onChange event. We built a pulldown menu
that allows users to jump to different websites or URLs.
<HTML>
<COMMENT> onchange.html </COMMENT>
<HEAD>
function jumpTo(URL_List)
{
var URL = URL_List.options[URL_List.selectedIndex].value;
window.location.href = URL;
}
</SCRIPT>
<FORM>
<SELECT NAME="site" onChange="jumpTo(this);">
<OPTION VALUE="http://www.fhso.ch/~steeb"> Applied University Solothurn
<OPTION VALUE="http://issc.rau.ac.za"> ISSC
</SELECT>
</FORM>
</BODY>
</HTML>
The following example demonstrates the onClick event.

<HTML>
<COMMENT> onclick.html </COMMENT>
<HEAD>
function informuser()
{
alert("I told you not to press that button");
}
</SCRIPT>
<FORM>
<INPUT TYPE=button NAME="button" VALUE="Do not press this button"
onClick="informuser();">
</FORM>
</BODY>
</HTML>
The following example demonstrates the onFocus event.

<HTML>
<COMMENT> onfocus.html </COMMENT>
<HEAD>
var alreadyWarned = false;
function displayHelp()
{
if(!alreadyWarned)
{
alert("Enter your phone number in (xx) xxx-xxxx format");
alreadyWarned = true;
}
}
</SCRIPT>
<FORM>
<INPUT TYPE=text NAME="phonenumber" SIZE=15
onFocus = "displayHelp();">
</FORM>
</BODY>
</HTML>
3.20 Java Applets and JavaScript

JavaScript can be used to control the behaviour of a Java applet without knowing
much about the design of the applet. All public variables, methods, and properties
are available for JavaScript access. Each applet in a document is reflected in
JavaScript as
document.appletName
where appletName is the value of the NAME attribute of the <APPLET> tag.
The following Java program Welcome.java and the HTML program Welcome.html
show an application. We define a
public void setString(String s)
method that accepts a string argument, assigns it to myString, and calls the
repaint() method. The file Welcome.java is given by
// Welcome.java
import java.applet.Applet;
import java.awt.Graphics;
public class Welcome extends Applet
{
String myString;
public void init()
{
myString = new String("Welcome to ISSC")
}
public void paint(Graphics g)
{
g.drawString(myString,25,25);
}
public void setString(String s)
{
myString = s;
repaint();
}
}
The HTML file is given by

<HTML>
<COMMENT> Welcome.html </COMMENT>
<BODY>
<APPLET CODE="Welcome.class" NAME="Welcome" WIDTH=275 HEIGHT=135>
</APPLET>
<SCRIPT>
function insert()
{
document.Welcome.setString(document.myform.str.value)
}
</SCRIPT>
<FORM NAME="myform">
<INPUT TYPE="button" VALUE="SET STRING" onClick="insert()">
<INPUT TYPE="text" SIZE="20" NAME="str">
</FORM>
</BODY>
</HTML>
3.21 JavaScript and XML

The Document Object Model (DOM) is the model that describes how all elements
in the HTML page, like input fields, images, paragraphcs etc., are related to the
topmost structure: the document itself. By calling the elements by its proper DOM
name, we can influence it. The Level 1 DOM Recommendation has been developed
by the W3C to provide any programming language with access to each part of an
XML document. Thus we can use JavaScript to parse an XML document. Notice
that DOM is based on a tree structure. Our XML file describes a polynomial. Our
polynomial consists of two terms, namely
p(x; y) = 2x3y2 ¡ 4y5 :

<polynomial>
<term>
<factor> 2 </factor>
<variable>
<name> x </name>
</variable>
<variable>
<name> y </name>
</variable>
</term>
<term>
<factor> -4 </factor>
<variable>
<name> x </name>
</variable>
<variable>
<name> y </name>
</variable>
</term>
</polynomial>
Knowing the exact structure of the DOM tree, we can walk through it in search of
the element we want to find using the commands
parentNode, childNodes[0], childNodes[1], ... , firstChild, lastChild
The following HTML-file with the embedded JavaScript code finds elements in the
tree structure of the polynomial.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" FOR="window" EVENT="ONLOAD">
Document = polynom.XMLDocument;
factor1.innerText=
Document.documentElement.firstChild.firstChild.text;
name1.innerText=
Document.documentElement.firstChild.childNodes[1].firstChild.text;
factor2.innerText=
Document.documentElement.lastChild.firstChild.text;
</SCRIPT>
</HEAD>
<BODY>
<xml id="polynom" src="file://c:\books\java\poly.xml"></xml>
Factor 1: <span id="factor1"></span>
<BR>
Name 1: <span id="name1"></span>
<BR>
Factor 2: <span id="factor2"></span>
</BODY>
</HTML>
The output is:
Factor 1: 2
Name 1: x
Factor 2: -4
3.22 Loading a js-file

Given a js file, for example the file asterik.js
3.22. LOADING A JS-FILE 99
n = 9;
for(i=1;i<n;i++)
{
for(j=1;j<=i;j++)
{
document.write("*");
}
document.write("<BR>");
}
The file is loaded in a HTML file as follows
<HTML>
<SCRIPT type="text/javascript">
function staticLoad(url)
{
document.write('<script src="',url,
'"type="text/JavaScript"><\/script>');
}
staticLoad("asterisk.js");
</SCRIPT>
</HTML>
In the following two programs display.html and display.js we display the time
with the time interval of 1000ms (1 second).
<HTML>

<SCRIPT src="display.js">
</SCRIPT>
<BODY onload="show_time(); window.setInterval(show_time,1000);">
</BODY>
</HTML>
The display.js file is
function show_time()
{
document.open();
document.write(
"<HTML> \n" +
" \n" +
"<SCRIPT src=\"display.js\"> \n" +
"<\/SCRIPT> \n" +
" \n" +
"<BODY onload=\"window.setInterval(show_time,1000);\"> \n" +
" \n" +
"<B> Date: <\/B><BR>" + Date() + "<BR><BR> \n" +
" \n" +
"<FORM> \n" +
"<\/FORM> \n" +
" \n" +
"<\/BODY> \n" +
"<\/HTML>");
document.close(); // force render
}
Chapter 4
Resources and Web Sites
There are a large number of web sites which provide information, news and tutorials
of Java, HTML and JavaScript. Furthermore there are web sites to download new
versions of Java, HTML and JavaScript.
The main web sites of SUN Microsystems for Java are
http://java.sun.com/
http://java.sun.com/jdc/
http://developer.java.sun.com/
Another useful web site for Java, HTML and JavaScript is “The Web Developer’s
Virtual Library”
http://wdvl.com/WDVL/About.html
The WDVL has more than 2000 pages and some 6000 links.
The web site
http://www.niu.edu/acad/english/htmlref.html
provides an HTML reference guide. The web site
http://developer.netscape.com/docs/
provides links to technical manuals and articles for Java, JavaScript and HTML.
The offical word on the latest standard in HTML can be found on the web site
http://www.w3.org/pub/WWW/MarkUp/MarkUp.html
101
102 CHAPTER 4. RESOURCES AND WEB SITES
Information about XML can be found on the web sites
http://www.w3.org/XML/
http://www.w3schools.com/
Bibliography
[1] Horton Ivor, Beginning Java 2, WROX Press, Birmingham, UK, 1999
[2] Jaworski Jamie, Java 1.2 Unleashed, SAMS NET, Macmillan Computer Publishing,
USA, 1998
[3] Johnson Marc, JavaScript Manual of Style, Macmillan Computer Publishing,
USA, 1996
[4] McComb Gordon, JavaScript Sourcebook, Wiley Computer Publishing, New
York, 1996
[5] Willi-Hans Steeb, The Nonlinear Workbook: Chaos, Fractals, Cellular Automata,
Neural Networks, Genetic Algorithms, Fuzzy Logic with C++, Java,
SymbolicC++ and Reduce Programs, World Scientific, Singapore, 1999
[6] Tan Kiat Shi, Willi-Hans Steeb and Yorick Hardy, SymbolicC++: An Introduction
to Computer Algebra Using Object-Oriented Programming, 2nd edition
Springer-Verlag, London, 2000

Web Designing - Book

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

Web Designing - Book

Uploaded by

Copyright:

Available Formats

Choosing a layout method is often very personal.

One person might prefer absolute positioning while

Introduction to html programming

History of HTML, Structure of HTML, Adding Comments, Formatting Text,

Text & References:

HTML, DHTML, JavaScript, Perl, CGI, Ivan Bayross, BPB Publication.

HTML Complete Reference, BPB Publication.

Developing a Web Site

Avoid spaces in file or folder names. If necessary use an underscore between

Designing Navigation Bars

Key Elements of Navigation

Home Page Layout

Creating an HTML Document

Source: Microsoft Office XP Inside Out

To view the Page Properties screen, select

To change the default

Light colored backgrounds with dark text work well together.

Working with Text

When modifying a web page, it is best to view the formatting marks.

Avoid leaving the font setting at Normal or Default. This will

To set text as a header or list, select the appropriate option

To insert your picture, click on Insert

Modifying Picture Properties

Dragging on a corner handle sizes the graphic proportionately.

Change the Alignment of the

To add a border, enter a value

Use the Horizontal spacing and

It is highly recommended that you use an image editing application like

To create a bookmark, position the cursor by the first word of

Saving Your Web Page

Use the Rows and Columns options to determine the

Cell spacing is the number of pixels between each table cell.

Table with no border The same table with a border of 5 pixels

Background color adds a colored background to the table cells.

Working with Cells

Background color changes the cell's background color.

Background image adds a graphic to the background of each cell.

Insert a new row at the top of the table.

To insert a row, select Rows and enter the

Launch FrontPage by clicking on the shortcut on your desktop (see

Place your cursor over the small yellow folder

You will notice that the words Empty Web are

To create a space for your web site, you need to

To visually see/confirm that your web site has been

Saving Your Web Site

Working on Your Web Site

If your Folder List view area is still

You will still have to save individual web page

If you accidentally double-clicked on the Home/Index Page icon, FrontPage will

You can also click on the Undo button.

You now have the beginning of a small web site.

Shared borders allow you to display content that is identical to all

Typically, a top shared border will contain a page banner and

Viewing Your Website in a Browser

When you choose Preview in Browser, FrontPage will ask you to

However, when possible, it is recommended that you view the site

Click on New Page 1, it should look like the image below.

Creating Titles for Website Pages

To rename a file name (new_page_1.htm in this example), right-

Remember the file name conventions outlined earlier in this

Click once on the Home Page (index.htm) box to turn it blue.

When you are done, select View 

Now return to the Folder view by