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 As with any other project, the first phase in creating a new

web site is planning. This involves determining the site’s

navigation structure, content, and page layout. It is only

after this has been accomplished that HTML coding or

authoring tools like FrontPage can be used effectively to

actually create the site.

The planning process involves:

Define site purpose

o What are the web site’s objectives?

o Who is the target audience?

o What is their connectivity (dial up,

broadband, network, etc.)?

o What computers (PC/Mac) and browsers

(IE, Netscape, Opera, etc.) do they use?

Define content

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.

The Five Golden Rules

Create a clear visual

hierarchy on each

page.

Take advantage of

conventions.

Break pages into

clearly defined

areas.

Make it obvious

what’s clickable.

Minimize noise.

Source:

Don’t Make Me Think, Steve

Krug

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.

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.

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.

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.

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.

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

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.

Site ID Global Navigation

Breadcrumb Trail

“You are here” indicator

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.

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.

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

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>

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:

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.

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.

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.

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.

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

Use the Show All button - - to display formatting marks.

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.

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.

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.

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.

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.

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

display the page in whatever font the user has set as default.

Don’t use the underline style as it will look like a hyperlink and

confuse the reader.

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.

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.

Modifying Picture Properties

Once you have inserted the image, you can change its size and positioning on the screen.

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.

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.

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.

Dragging on a corner handle sizes the graphic proportionately.

Dragging the middle handle will distort the image.

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.

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.

Hyperlink

button

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.

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.

Web address

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.

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.

Location name More locations

File name

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.

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.

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.

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.

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.

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

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

1.

2.

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.

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.

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.

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.

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

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.

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.

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.

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

Pages

Below

New Page 3 Pages Above and

at the Same Level as New Page 3

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.

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

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

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.

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

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.

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.

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.

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.

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.

local

view remote

view

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 protected]">...</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

Values

Element

Types

Example inherited

border Sets border

width, style and

color.

See border

width, style,

and color

All {border:

medium solid

green}

No

border-

bottom

Set the bottom

border width

style, and color.

See border

width, style,

and color

All {border-

bottom:

medium solid

green}

No

border-

bottom-

width

Set the bottom

border width

thin,

medium,

thick, or

length value

All {border-

bottom-

width: thin}

No

border-

color

Set the border

color

A color value,

color,

#RRGGBB

All {border:

#0000ff}

No

border-

left

Set the left

border width

style, and color.

See border

width, style,

and color

All {border-left:

medium solid

green}

No

border-

left-width

Set the left

border width

thin,

medium,

thick, or

length value

All {border-left-

width: thin}

No

border-

right

Set the right

border width

style, and color.

See border

width, style,

and color

All {border-

right:

medium solid

green}

No

border-

right-

width

Set the right

border width

thin,

medium,

thick, or

length value

All {border-

right-width:

thin}

No

border-

style

Sets border style none, dotted,

dashed,

solid, double,

groove,

ridge, inset,

outset

All {border:

dashed}

No

border-

top

Set the top border

width style, and color.

See border

width, style,

and color

All {border-

top:

medium

solid

green}

No

border-

top-

width

Set the top border

width

thin,

medium,

thick, or

length value

All {border-

top-width:

thin}

No

border-

width

Sets Border width. thin,

medium,

thick, or

length value

All {border-

width: 8}

No

clear Determines where

floating elements are

allowed.

none, left,

right, both

All {clear:

left}

No

float Specifies how text is

wrapped and where it

is aligned.

none, left,

right

All {float:

left}

No

height Height of element auto or a

height value

Block elements

and IMG,

INPUT,

TEXTAREA,

SELECT, and

OBJECT

{height:

200}

No

margin Set element margin

width. A single value

sets all margins, two

values set top and

bottom, four values

set top, right, bottom,

and left margins.

auto, length

value, or

percent value

All {margin:

4em 2em

4em 2em}

No

margin-

bottom

Set element bottom

margin

length value,

or percent

value

All {margin-

bottom:

4em}

No

margin-

left

Set element left

margin

length value,

or percent

value

All {margin-

left: 4em}

No

margin-

right

Set element right

margin

length value,

or percent

value

All {margin-

right:

4em}

No

margin-

top

Set element top margin length value,

or percent

value

All {margin-

top: 4em}

No

padding Space between border

and content. A single

value sets all sides,

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.

length value,

or percent

value

All {padding:

4em}

No

padding-

bottom

Space between bottom

border and content.

length value,

or percent

value

All {padding-

bottom:

4em}

No

padding-

left

Space between left

border and content.

length value,

or percent

value

All {padding-

left: 4em}

No

padding-

right

Space between right

border and content.

length value,

or percent

value

All {padding-

right:

4em}

No

padding-

top

Space between top

border and content.

length value,

or percent

value

All {padding-

top: 4em}

No

width Width of element auto or a

height value

in length or

percentage

Block

elements and

IMG, INPUT,

TEXTAREA,

SELECT, and

OBJECT

{width:

40em}

No

Background and Color Properties Name Description Possible Values Element Types Example inherited

background Set

background

color,

repeat,

image,

attachment,

or position.

See

background-

color,

background-

image,

background-

attachment,

background-

repeat,

background-

position

All {background: #8080ff} No

background-

attachment

Determines

if the

background

image is

fixed or

scroll.

scroll, fixed All {background-attachment:

scroll}

No

background-

color

Sets the

background

color.

Named or

value color

All {background-color: #8080ff} No

background-

image

Sets the

background

image.

url All {background-image:

url('../../../../gifs/flowers.gif')}

No

background-

position

Sets the

background

image

initial

position.

top, center,

bottom, left,

center,

right, or

percent

values

Block and

IMG,

INPUT,

TEXTAREA,

SELECT,

and

OBJECT

{background-position: left

top}

No

background-

repeat

Sets how

the

background

image is

repeated.

repeat,

repeat-x,

repeat-y,

no-repeat

All {background-repeat: no-

repeat}

No

color Sets

element

color.

Named or

value color

All {color: green} Yes

Classification Properties Name Description Possible

Values

Element

Types

Example inherited

display Sets the type of

element.

block, inline,

list-item, none

All {display:

list-item}

No

list-style Sets list style type

and/or position.

See list-style-type

and list-style-

position

List-

item

{list-style:

circle}

Yes

list-style-

image

Sets image to be

used as the list

item marker.

url List-

item

{list-style-

image:

url(this.gif)}

Yes

list-style-

type

Sets list style

type.

circle, disc,

decimal, lower-

alpha, lower-

roman, none,

square, upper-

alpha, upper-

roman

List-

item

{list-style-

type: square}

Yes

list-style-

position

Sets where the

marker is place

relative to the text

and its wrapping

position.

inside, outside List-

item

{list-style:

circle}

Yes

whitespace Sets treatment of

spaces inside the

element.

normal, pre,

nowrap

Block {whitespace:

pre}

Yes

Font Properties Name Description Possible Values Element

Types

Example inherited

font Used to define

font properties

See font-family,

font-size, font-style,

font-variant, and

font-weight.

All {font:

20pt}

Yes

font-

family

Used to define

font family to

use

family name All {font-

family:

ariel

roman}

Yes

font-

size

Used to define

font size to

use

xx-small, x-small,

small, medium,

large, x-large, xx-

large, larger,

smaller, length

value, or percent

value

All {font-size:

18pt}

Yes

font-

style

Used to define font

style to use

normal, italic, oblique All {font-style:

italic}

Yes

font-

variant

Used to determine

whether to use

normal or small caps

normal, small-caps All {font-

variant:

small-caps}

Yes

font-

weight

Sets font weight. normal, bold, bolder,

lighter, 100, 200, 300,

400, 500, 600, 700, 800,

900

All {font-

weight:

600}

Yes

Text Properties Name Description Possible

Values

Element

Types

Example inherited

letter-

spacing

Sets the space

between

characters.

normal or

length value

All {letter-

spacing:

0.2em}

Yes

line-height Sets the height

of lines.

normal, a

number, a

percent of the

element font

size,

All {line-

height: 2}

Yes

text-align Sets the

alignment of

text.

left, right,

center, justify

Block {text-align:

center}

Yes

text-

decoration

Sets the

special

decoration

attributes of

text.

none, overline,

underline, line-

through, blink

All {text-

decoration:

blink}

No

text-

indent

Sets the

element's first

line amount of

indentation.

length or

percentage

value

Block {text-

indent: 5%}

Yes

text-

transform

Transforms

text to one of

the set values.

none,

capitalize,

uppercase,

lowercase

All {text-

transform:

uppercase}

Yes

vertical-

align

Sets vertical

position.

baseline, sub.

super, top,

middle, bottom,

text-top, text-

bottom, or

percent value

Inline {vertical-

align: sub}

No

word-

spacing

Sets extra

space between

words.

normal or

length value

All {word-

spacing:

0.2em}

Yes

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

[email protected]

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