Advanced HTML

Advanced HTML

Taking Your Pages to the Next Level

Jim Hamlin

This page left intentionally blank.

Introduction

HTML Overview - Getting Things Started

Coding Structure

HTML Markup

Attributes

Markup Syntax Must be Exact

Document Components

Defining a document

Header

Body

Footer

Layout and Format Components

Layout commands

Line Breaks

Horizontal rules

Address format

Paragraphs

Format commands

Boldface

Italic

Emphasis

Keyboard text

Blink

Short Citation

Source Code

Sample text

Strong emphasis

Typewriter text

Variable

Headings

Exercise

URL

Naming and Linking

Naming regions of your document

Exercise

Adding Graphics

Graphic Formats

JPEG

GIF

Adding Graphics to Your Page

Providing an Alternate

Wrapping Text Around Your Graphic

Graphic Links

Sizing an Image

Exercise

Basic Lists

Numbered lists

Unordered lists

Definition lists

List Headers

Nesting lists

Exercise

Basic Tables

Basic Elements

Adding Borders

Adding Headers

Exercise

Adding a Title

Applying Text Formatting

Cell Alignment

Exercise

Cells Which Span Columns and Rows

Exercise

Image Maps

Creating an Image

Exercise

Creating a Map

Products

Map THIS!

MapEdit

MapMaker

WebMap

Web Hotspots 2.0 / 3.0

Using Map THIS!

Load the Image

Define Clickable Regions

Define Region Settings

Saving the Image

Working More Effectively

Exercise

Adding a Map to Your Page

Exercise

Supplemental Exercise

Compatibility Considerations / Alernatives

Compatibility Considerations

Exercise

Using Multiple Graphics

Exercise

Client Side Image Maps

SpyGlass Style Image Maps

HTML 3 Figure Image Maps

Changing Font, Color, & Background

Changing your background

The background color

Exercise

Using an image instead

Exercise

Font Size

Creating a Base Font for Your Document

Changing the Font

Exercises:

Changing Font Color

Exercise

Changing Font Face

Exercise

Adding Colors to Your Table

Exercise

Sound and Animation

What was that? Adding Sound to Your Page

Exercise

Playing Inline Animation

Exercise

Extra… Extra… Scrolling Marquee…

Controlling the Scroll

Exercise

Changing the Color

Exercise

Changing the Size

Alignment of Text

Exercise

Utilizing Forms

What is a Form?

Defining a Form

Form Submission

METHOD=GET

METHOD=POST

Submit and Reset

Exercise

Using a Test Server

Exercise

Form Controls and Characteristics

Text Entry Fields

Exercise

Changing the Characteristics of Your Text Entry Fields

Exercise

Applying Default Values

Exercise

File Attachments

Exercise

Check Boxes

Exercise

Radio Buttons

Exercise

Password Entry Fields

Exercise

Combo Boxes (Option Menus)

Exercise

Selection List Boxes

Exercise

Multiline Freeform Text

Exercise

Hidden Elements

Exercise

CGI

Introducing CGI

Environment Variables

Input Streams

Output Streams

Perl CGI Scripts

cgi-utils.pl

cgi.pm

C/C++ CGI Programs

CGI Alternative - Mail it

Placing the Program on the Server
I've Been Framed!

Frame Documents

Targets

Extending Frames

Nesting Frames

Imagemaps In Frames

Adding Life to Your Page With Animated GIFs

What is an Animated GIF?

What makes up a GIF?

Header

Logical Screen Descriptor

Loop

Control

Image

Comment Block

Trailer

Animation Tools

Tools

GIF Construction Set

GifBuilder

GIFMation

PhotoImpact GIF Animator

Using GifCon to Create Animation

CGI Input and Output - C

Server Environment Variables
Common Variables

Additional Variables
Useful URLs
Style Guides

Icons

Background images

Web color utilities

HTML design pages, more info!
Table Exercise

Introduction

The purpose of this courseware is to introduce you to some of the more advanced commands and features which allow you produce more professional and effective documents on the World Wide Web, one of the most popular resources on the Internet. Upon successful completion of this courseware, you will be able to:

Insert various media into your documents

Create frames for your document

Utilize image maps

Create forms

Create animated graphics

Use basic CGI

Create identification blocks

Change the default behavior of your document

Create a link to other media types

Utilize navigation buttons

HTML is a very broad markup language which can be used by a variety of different Web browsers. This courseware presents some of the advanced features which are compatible with most browsers. This courseware will also investigate some of the "extensions" which can only be used with particular browsers and touch on some of the new features proposed in HTML 3. Additionally, you will be introduced to some of the other tools which can be used to help make your document more sophisticated.

This course assumes you have a basic understanding of the Internet, Microsoft Windows, and basic HTML markup. Exercises presented in this book are result oriented. Exercises in this book instruct you what needs to be done, not the steps to do it. By reading through the section carefully, all information needed to complete the exercises is available. If in doubt, try it in your browser! There's nothing wrong with a little experimentation… J

HTML Overview - Getting Things Started

This section is designed to ensure that you are sufficiently acquainted with HTML syntax and many of the basic HTML tags. This section also covers many of the new features offered with HTML 3. This section will focus on:

Coding Structure

Document Components

Layout and Format Components

URL

Naming and Linking

Adding Graphics

Basic Lists

Basic Tables

Coding Structure

HTML Markup

The HTML language consists of a number of special text tags used by the browser to setup the document, format text, and establish links to Internet resources.

Tags are very similar to the way you would structure a word processing document. For example, special codes are used to denote a boldface font. In order for the document to know which text to boldface, you must mark the beginning and end of the text. Tags work in very much the same way: you must tell them where to begin and where to end.

Since HTML documents are purely text, unlike word processing documents, you must provide the WEB browser a means by which to identify tags. This is done by enclosing the command within angle brackets: "<" and ">". For example, the force line break would be <BR>.

The force line break is one of the few examples of HTML codes which do not require a corresponding closing code. Many of the tags require you to tell the browser where to end. This is accomplished by using the same tag but only with a "/" beginning the command. Using the example above, boldfacing some text can be accomplished by placing a <B> at the beginning and </B> to close.

<B>This is bolded text</B>

Tags are not case sensitive: <HTML>, <html>, and <HtMl> are all equivalent. Text within tags is displayed as is typed. However, any spaces which are contained with the text are only displayed as a single space, regardless of how many spaces are used.

It is important to note that markup tags can be nested within one another. Again using the example above, you could pose the question: What if I wanted to create a forced line break with some bolded text? You could of course do this:

<B>This is the first line of bolded text.</B><BR>

<B>This is the second line of bolded text.</B>

However, by using nested tags, you could eliminate some of the tags required to accomplish the same task:

<B>This is the first line of bolded text.<BR>

This is the second line of bolded text.</B>

Attributes

All of the tags within the HTML language have default characteristics. In order to change those characteristics you must change the tag’s attributes. This is done through the use of predefined attribute commands, with each tag having its own set. For example, the default behavior of the horizontal rule tag can be changed. You can adjust its alignment, length, thickness, and even its shading.

For example, if you wanted to create a thicker left justified centered horizontal rule with a width of 100:

As you can see, attributes are enclosed within the angle brackets.

Markup Syntax Must be Exact

Browsers rely on one thing: the recognition of tags. If a browser is unable to recognize a tag, it plainly does not understand it. Browsers are very simple in the way that if they do not understand a tag, they ignore it. Right now you may be asking yourself: why a browser would not be able to understand a given tag? Two of the most common reasons why a browser would not recognize a tag are:

The tag being used is not supported by the browser reading it.

The tag’s syntax is incorrect.

Some browsers, such as Netscape, have their own enhancements to the HTML standard. These enhancements are usually supported only by the browser for which they were created. For example, many Netscape enhancements do not work with Mosaic browsers.

Problems with the tag’s syntax can be caused by a variety of reasons. You may have spelled the tag incorrectly, you may have used attributes which are not associated with that tag, you have nested tags within a tag which does not support nesting of that tag, or extra characters are added to the tag which make its recognition impossible.

Some tips to help you to avoid making these mistakes include:

Ensure that you have spelled the tag correctly.

Ensure that no extra characters have been included within the tag which do not belong. This includes spaces! For example, with the tag <CENTER>, putting spaces before < CENTER>, after <CENTER >, or anywhere in the middle <CE NTER> will make the tag unrecognizable.

Get a reference guide for the commands. This will tell you three important things: the attributes which can be used with this tag, tags that this tag can be nested in, and tags which be nested in this tag.

Document Components

HTML documents, similar to normal word processing documents, ideally consist of a header, body, and footer.

Defining a document

Each of the three sections make up a single HTML document. For some browsers to respond correctly to your markup commands, you must identify a document as an HTML document. This is accomplished through the use of a tag. The <HTML> tag is used to show the start of a document and a corresponding </HTML> tag is used to denote the end of the document. Although many browsers do not require you to use this tag, it is a good idea to include it for compatibility reasons.

Header

A header is used to define information about the document itself. This includes the document’s name, default font, background color, and others. Defining a header for a document is actually quite simple. All that is required to define a header is to enclose the header information the header tag starting with <HEAD> and closing with </HEAD>.

The name of the document, or the document’s title, is the title which is displayed in the title bar of the browser. A document’s title is defined within the HTML title tag: <TITLE> to begin the heading and </TITLE> to signify its close.

Body

The body contains the information which you want to convey to the user. This is accomplished through the use of text, media, and links to other documents. The body of a document is represented with the markup tag <BODY> and since it acts on a set of data requires a closing tag </BODY>.

Footer

The footer, although not formally defined as part of a document, is typically included at the bottom of the body. The footer usually contains the author, copyright information, date of creation, and version number.

Here is an example of an HTML document describing the above elements:

<HTML>

<HEAD>

<TITLE>Sample Web Page</TITLE>

</HEAD>

<BODY>

For questions or comments about my WEB Pages, please EMail

<A HREF="mailto:jdoe@somecompany.com">jdoe@somewhere.com.</A>

John Doe<BR>

Some Company Corporation<BR>

#000 - 00000 Some Address<BR>

Somewhere, Prov. Canada X9X 9X9<BR>

Tel: (604) 999-9999 Fax: (604) 888-8888<BR><BR>

Revised: October 1, 1997<BR><BR>

<B>URL:http://somecompany.com/accounts/jhamlin/default.html</B>

</ADDRESS>

</CENTER>

</BODY>

</HTML>

Layout and Format Components

There are a number of layout and format tags which can be used to change the attributes of the text and to control the text flow within the document.

Layout commands

HTML layout commands help you break the text flow and create divisions in your document. Two commands which help you do this are the line break tag and the horizontal rule tag.

Line Breaks

An HTML browser will always attempt to fit as much text on a line before it wraps to the next line. This is good in most cases, but what if you wanted to ensure that a line break occurred after a certain point? The solution would be to make use of a line break tag to tell the browser that even though there is room for more text on the current line, skip to the next line anyway. The tag used to perform this action is <BR>. (A closing tag is not required in this case as this command is a one time only type of command and does not act on a range of text.)

This line will keep wrapping and wrapping to the size of browsers view area until a formal line break is sent. A line break will force text following the break to the next line.<BR>

Another line, somewhat shorter.<BR>

Horizontal rules

A horizontal rule is a horizontal line used to separate sets of text or links. This line, generated by the tag <HR>, is typically a couple of pixels wide and is shadowed.

The horizontal rule has a number of attributes which allow you to change it's default behavior. Attributes include alignment, width, size, and shading:

ALIGN=(LEFT|RIGHT|CENTER)

Change alignment

NOSHADE

Eliminate shading of horizontal bar

SIZE="size"

Number used to define vertical width. Valid values are from 1 to 7

WIDTH=(number|percent)

Used to define the exact width in pixels or the percentage of the line that the rule is to occupy

Address format

The address format is used to denote information about the HTML document. This information is typically enclosed as part of the footer and consists of information such as the author’s name, address, signature file, and contact information. The <ADDRESS> tag is used to start the address format and the </ADDRESS> closes the address format. The address tag is typically enclosed within the <BODY> of a document, and can contain many other tags including <A>, <BR>, <P>, and many others.

For questions or comments about my WEB Pages, please EMail

<A HREF="mailto:jdoe@somecompany.com">jdoe@somecompany.com.</A><BR>

<BR>

Revised: January 1, 1997<BR><BR>

<B>URL:http://somecompany.com/accounts/jdoe/default.html</B>

</ADDRESS>

</CENTER>

Paragraphs

You would use a paragraph in a Web page for typically the same reason you would use a paragraph in printed information: to separate ideas or concepts into distinguishable divisions. The paragraph tag will cause a line break followed by an additional line. The paragraph is a singleton tag in that it does not act on a range of text. The markup to create a paragraph division is <P>.

What is this you may ask? What exactly are we trying to demonstrate? Why it is one of our useful tags known as the paragraph. You will notice that the paragraph tag makes a paragraph which resembles what a paragraph would look like in a printed document. A line break from the current line followed by a blank line is symbolic of the paragraph.<P>

What is this you may ask? It is the second paragraph. It is not as long though.

Format commands

There are many tags used exclusively to manipulate the characteristics of the text displayed on the screen. Since this family of tags acts on a given set of text, both opening and closing tags are required. These tags can be used to change the attributes of the text by adding bold, italics, and emphasis. In addition, the font itself can also be changed to reflect a particular type of text.

Boldface

The boldface tag changes the text enclosed within its starting tag and closing tag to become bolded. The tag is started with a <B> and closed with </B>. This tag should be used when you want to draw attention to specific words or sentences.

This is <B>bolded</B> text.

Italic

The italic tag makes the text which is enclosed within the start <I> and the </I> appear in italics.

The time to strike is when <I>the o pportunity presents itself.</I>

Emphasis

The emphasis tag changes the characters enclosed within to appear emphasized. (This is very similar to making text italics.) This tag is started with <EM> and is closed with </EM>. It should be noted that when you want something to appear different from the rest of the text on the screen, the emphasis tag should be used rather than the italics tag. This is because some users set their browsers to emphasize text in a different color rather than the default of italics.

this system is <EM>fully</EM> customizable

Keyboard text

The keyboard text tag changes the characters enclosed to signal to the user that it is text which is typed at the keyboard. This tag is started with <KBD> and closed with </KBD>. This text is typically displayed as courier, common to many text based display systems.

If you want to copy all the files from your current directory to your floppy, one way is to type:<BR>

<BR>

Blink

The blink tag changes the text characteristic to blinking for any text enclosed. Although various browsers will support this tag, note that this tag is a Netscape extension. The tag is started with a <BLINK> and closed with a </BLINK>.

<BLINK>Look at this text blink!</BLINK><BR>

Short Citation

The short citation tag produces a different font which is characteristic of citations in printed documents. The tag is started with a <CITE> and closed with </CITE>. The citation command will typically be used to show a citation or a reference to other data sources.

From <CITE>The HTML Handbook</CITE> by John Doe, 1995.

Source Code

The source code tag is useful if you have documents which include snippets of source code. This tag will change the font to a type which resembles a font often used when source code is printed. This tag is started with <CODE> and closed with </CODE>.

The following code is an example in C++ which demonstrates output:<BR>

<BR>

<CODE>

void main() { <BR>

cout << var1 << var2; <BR>

} <BR>

</CODE>

Sample text

The sample text tag is used for literal characters or to represent the output of a program. This tag is started with <SAMP> and closed with </SAMP>.

Typing an unknown command at the command prompt on an MSDOS will often result in:<BR>

<BR>

<SAMP>Bad command or file name</SAMP>

Strong emphasis

The strong emphasis tag is used when you want to bring attention to particular words within the text of a document. The strong emphasis tag is started with <STRONG> and closed with </STRONG>. It is recommended that use of this tag is limited to words which need to stand out. Overuse of this tag will nullify the effect.

There was <STRONG>absolutely no</STRONG> reason to respond in that fashion.

Typewriter text

The typewriter (teletype) tag is used when you want text which is monospaced. This type of text typically is shown in block courier and is used with text you want to appear output from a line printer of typewriter. This tag is started with <TT> and is closed with </TT>.

If you were to redirect the output of a directory listing to the printer, the result would be: <BR>

<BR>

<TT>

Volume in drive C is MSDOS <BR>

Volume Serial Number is 12D8-3C33 <BR>

Directory of C:\ <BR>

</TT>

Variable

The variable tag is used to indicate to the users that this is information which they must supply. For example, if you were describing a command line utility for DOS or UNIX, the parameters which the user should supply would be formatted with the variable tag. This tag is started with <VAR> and is closed with </VAR>.

The syntax for the delete command in DOS is: <BR>

<BR>

<CODE>DEL</CODE> <VAR>filename</VAR>

Headings

Headings, similar to text formatting commands, are used to help make your document easier to read. However headings are different from formatting commands as they offer structure for your document. Headings are used to logically divide sections of your document to assist transition from one topic to the next.

The heading tag is used to format a particular range of text, which requires the use of and opening and closing tag. The opening and closing tags used to create headings are <H#> and </H#> where "#" can be a number between "1" and "6". (Levels "1" to "6" range from largest to smallest).

<H1>Level One Heading</H1>

<H2>Level Two Heading</H2>

<H3>Level Three Heading</H3>

<H4>Level Four Heading</H4>

<H5>Level Five Heading</H5>

<H6>Level Six Heading</H6>

Exercise

Create a HTML document by defining a header and body.

This page will include your hobbies, sports, and other interests. Plan out your topics accordingly. Create headers which head the topics and sub-topics for each section.

Add a small blurb within each section. Use formatting and layout tags to manipulate the text.

Create a footer for your document. Use a horizontal rule to separate the body from the footer.

Save your document and load into your browser.

URL

A Uniform Resource Locator (URL) is used to instruct the WWW browser how to connect to an Internet resource. A URL represents the type of resource and the exact location the resource can be located at. The URL’s syntax for an HTML file is:

aaaa://bbb.bbb.bbb:cc/ddd/ddd/ddd/eee#fff

aaaa: Data source / protocol / access method

This specifies the mechanism used to access the data which exists at the link. Recognized links include:

ftp:// Use the FTP (File Transfer Protocol) to retrieve a file.

gopher:// File system index accessed through the gopher protocol.

http:// A hypertext HTML document.

mailto:// Send email to a particular address using a predefined form generated

by the browser.

news:// Points to a USENET newsgroup or article name.

telnet:// Links to a remote system using the login arguments passed.

WAIS:// Points to a Wide Area Information Server on the Internet.

file:// Points to a locally accessible file (local disk system).

https:// Hypertext Transfer Protocol (Secure)

Here are some others (these are not commonly used in your documents):

nntp:// Local Network News Transport Protocol

cid:// Content identifiers for MIME

mid:// Message identifiers for electronic mail

afs:// AFS file access

prospero:// Prospero link

x-exec:// Executable program

//bbb.bbb.bbb Domain name / node

The domain name or internet address where the resource is located. The default is the current computer.

:cc Port

The process address a Web session needs to connect with. Most of the time it is 80, which also happens to be the default. If you want to use the default, the port can be omitted.

/ddd/ddd/ddd/ Path

This represents the resource’s path on the server. This path can include directories and subdirectories.

eee Resource name

The resource name is the actual name of the object which is to be connected to.

#fff Arguments

Arguments can be used to pass parameters to a program or can be used to locate a particular spot in an HTML document.

Naming and Linking

Links to Internet resources are accomplished through the use of an HTML tag. This tag, known as the anchor <A>, provides a method for the user of a page to make hypermedia links. The anchor tag can be used to define a "link to" or can be used to define a destination; these also happen to be the minimum attributes which can be used with this tag.

In order to "link to" using the anchor tag you are required to use the HREF attribute. The HREF attribute is used to define the Internet resource which you wish to link to. The syntax of the HREF attribute is simply HREF="URL". The URL can be any Internet resource which you wish to provide a link to. For example, if you wanted to provide a link to the Netscape home page:

<A HREF="http://home.netscape.com/">Netscape Inc.</A>

The words "Netscape Inc." in this particular example are used as the anchor to the home page at home.netscape.com. The text is visually changed through the use of color to indicate to the user of the page that the text "Netscape Inc." is an anchor.

Defining a destination is used within web pages to further subdivide the document. With anchors, you can specify various points throughout the document which the user can jump to. This makes it easier to locate specific information within a document from the document itself or from another document.

Naming regions of your document

Some web document designers like to maintain larger documents rather than having many smaller documents. It is reasonable to assume that a larger document would resemble a similar logical structure to the smaller document method: the document would contain a table of contents and the associated data. The solution is to use internal links within a document. By providing internal links, the user can quickly jump to particular points in the document. Links at jump points should also be provided to related points and the table of contents.

This process of providing internal links, known as intra-document linking, is performed using the anchor, <A>, tag. The first step to setting up an intra-document link is to establish a name for the beginning of text you want to jump to. This is done using the extension NAME, whose syntax follows: NAME="thename". As with other tags, you must remember to provide the closing </A> at the end the text you wish to name.

<A NAME="Subject1">This is subject 1.</A>

In order to make it possible for a user to make a jump you must provide an anchor to that point. This is also performed using the anchor tag. However this time you must provide a jump mechanism to the named point. The extension which is used to perform this is called HREF, whose syntax follows: HREF="URL". As noted earlier, a URL represents a network resource such as another page, FTP, Telnet, etc. What we want to do is connect to a web page. (The syntax of the URL is: "locationandnameofpage#nameoftext".) However, we want to connect to the name of a point on the page we are currently on. To accomplish this, simply omit the name and location of the document (or you can specify the name and location of the current document if you like typing. J )

<A HREF="#Subject1">(Subject 1)</A>

Some style guides recommend that the text which is to be used as the anchor, in this particular example "Subject 1", be placed in brackets to represent an internal jump. The following is an example which demonstrates the use of the anchor tag when creating a table of contents for your document.

<HTML>

<HEAD>

</HEAD>

<BODY>

<H2><A NAME="TOC">Table of Contents</A></H2><P>

<A HREF="#Topic1">Topic 1</A><BR>

<A HREF="#Topic2">Topic 2</A><BR>

<A HREF="#Topic3">Topic 3</A><BR>

<P>

<H2><A NAME="Topic1">Topic 1</A></H2>

This is text about topic 1.<BR>

<P>

<H2><A NAME="Topic2">Topic 2</A></H2>

This is text about topic 2.<BR>

<P>

<H2><A NAME="Topic3">Topic 3</A></H2>

This is text about topic 3.<BR>

<P>

</BODY>

</HTML>

As you have already seen the syntax for a URL for the document name itself and for the position within that page is "locationandnameofpage#nameoftext". In the previous section you discovered how to make links within the current document. In contrast to linking within the current document, to link to other documents you must provide the location and name of the document you wish to connect to. Additionally, you can specify a specific point in that document the same way you do to provide jumps within the current document. Also note that the "name" which is used to name a region is case sensitive in some browsers. Ensure that the name used for naming the region matches the name which is used as the reference.

Exercise

For the document you created in the previous exercise, create a table of contents for the document to contain internal links.

Test in your browser.

Break the single document into multiple documents to demonstrate linking between multiple documents. Use one page as your table of contents. Provide links back to the original table of contents document.

Using a search engine locate a some related links to your subject matter. Note the links and provide links to these sites using anchors within your subject material. A search engine you may want to use can be found at www.search.com.

Test in your browser.

Adding Graphics

Graphic Formats

The two most commonly supported still graphics formats are the GIF and JPEG.

JPEG

The JPEG or JPG is a graphics format produced by the Joint Photographic Experts Group. This format is known for its compressed size and quality with scanned images.

GIF

The GIF, graphics interchange format, is known for it’s sharp image. A GIF can come in two formats: interlaced and non-interlaced. A GIF also supports the ability to make one of the colors in the palette a transparent color.

Interlaced GIFs

Interlaced GIFs appear as a poor resolution first and then improve in resolution until the entire image has arrived. This type of GIF is ideal if you want to provide the users of your page with a general idea of what the content of your page is before the entire page is loaded. If the browser that the user of your page uses does not support progressive display then this option will not take the intended effect; the image will be entirely loaded and then displayed.

Non-Interlaced GIFs

Non-interlaced GIFs appear on the screen in a linear fashion from the top row of pixels to the bottom row of pixels until the entire image arrives.

Transparent GIFs

Transparent GIFs are great because they give the illusion that they are blending in with the user’s display. This is accomplished by assigning one color to be transparent. When the image is received by the user’s browser, the transparent color is replaced with the color of the browser’s background. Note that this is only available if your user’s browser supports transparent colors.

Adding Graphics to Your Page

Adding images to your document will make it look better than just a plain old text page. Graphics add color and often help to convey your message better (A picture is worth a thousand words - couldn’t resist!) Including graphics on your page is not as hard as you may think. The tag to accomplish such a feat is the image, <IMG>, command.

The <IMG> command always requires a location of a graphic which it is to display on your page. The definition of a graphic to be loaded is represented in the attribute SRC (SRC follows the syntax SRC="...".)

The image source as shown above can be in a variety of forms. It can be a filename, relative filename and directory, or be a URL to a graphic file.

Providing an Alternate

In many cases, users of a page who are not capable of displaying a graphic on their page are left with a big mess! In other cases users who are using a graphical browser but have graphics turned off are left with icons in the place of the graphic. It is your responsibility to try to make the screens of these people as easy to read as possible. Rather than just not loading a graphic, you should provide a text alternative.

There are many conventions used. If the graphic represents a logo or icon you generally use an alternative phrase such as "[Image]". If you use graphics in a list, you would most likely provide the user with an alternative that makes sense, such as "*".

Creating an alternative to loading an image is accomplished through the use of the attribute ALT. Alt follows the syntax ALT="..." where ... represents the text to put in the graphic’s place. For example, if you had a graphical bullet and wanted to provide an alternative such as "*":

If you wanted to replace an image such as a logo with a text representative you could do something like this:

Note that some browsers such as Internet Explorer use the alternate attribute as a tooltip for the image. In the above example, the user would see a tooltip named "[Image]" displayed. When keeping this in mind, you may wish to use more descriptive text.

Wrapping Text Around Your Graphic

You may often have a large image that you want to display on your page. Whenever you insert a picture the default is not to wrap text around it. (Floating text). This can make your image appear as a foreign object in the document and can make your document longer than it needs to be. To wrap text around an image you can use the ALIGN attribute. There are two values of this attribute which define how text is wrapped: LEFT and RIGHT. The LEFT value will place the image on the left side of the page and allow text to wrap the right side. The RIGHT attribute will do the opposite, placing the image on the right side and wrapping the text on the left.

ALIGN=LEFT|RIGHT

Graphic Links

You have already seen how to make text based anchors which link to Internet resources. In fact, you can use images as well. To use an image as a link you simply include the image within the anchor tag. In the following example a link to Netscape’s home page is chosen by a Netscape graphic anchor.

It is important to note that you are not limited to using either text or graphics. You can use them both! Simply include whatever you want to be used as the anchor within the anchor tag.

<A HREF="http://home.netscape.com/"><IMG SRC="netscape.gif">Netscape Inc.</A>

Whenever you make a graphic an anchor in a link, a border is placed around the image by default to show that the image is an anchor. But what if you didn’t want those borders placed around your document? There is an attribute named BORDER which allows you to specify the width of the border which is placed around the image. If you decided you did not want a border, you could define the border width to be 0. On the other hand, if you wanted a thicker border you could define the border width to be 3, 4, 5, or even 30!

BORDER=##

Sizing an Image

In version 3 of HTML the ability to size an image has been proposed. Netscape and several other graphical browsers will allow the use of the sizing attributes. These attributes are WIDTH and HEIGHT.

The WIDTH and HEIGHT attributes can be used in three ways:

You can specify the width of the image and the height will be appropriately scaled.

You can specify the height of the image and the width will be appropriately scaled.

You can specify both the width and height independent of one another.

WIDTH=##

HEIGHT=##

Using the WIDTH or HEIGHT attribute can be used to effectively reduce an image to a particular height or width that fits the application in your page. Note that when using both the WIDTH and HEIGHT attributes together that you do not get any horizontal or vertical scaling to keep the image height and width relative to their original sizes (the aspect ratio is not preserved).

In addition to re-sizing the image, you can also control how it gets placed by defining the horizontal and vertical spacing. Using the horizontal spacing attribute "hspace=x" you can place x number of guaranteed transparent pixels on either side of the image; the vertical attribute "vspace=x" works the same way only it places x transparent pixels above and below the image. This is useful if you wanted to have a guaranteed amount of white space around any particular image.

Exercise

Obtain some images from the Internet. If you cannot find one you like, have a look at a graphic library. Some are listed in Appendix C.

Include in your document examples of: text alternatives, text wrap, and image sizing.

Use a graphic as a link. Turn borders off to remove blue border.

Test in your browser.

Using paint shop pro, create an image for yourself. Create a "template" web page which contains basic HTML commands which will exist on all your pages. Include your graphic on the top of the page. Templates are very useful as they give your pages a consistent look.

Use navigation buttons you find on the Internet to link pages.

Basic Lists

Lists are used to distinguish lines of text from other paragraphs within your document. They can also be used to show a logical sequence of events. List tags will either indent your text lines, bullet them, or number them. Most common list types include unordered lists, ordered lists, and definition lists.

Numbered lists

The numbered list, also known as an ordered list, is used to show a list of items which should be shown in a particular order. The ordered list is started by the markup tag <OL> and completed with the markup tag </OL>. Each line in the list begins with a <LI>. The resulting output is a numbered list of lines.

<OL>

<LI> This is the first item.

<LI> This is the second item.

<LI> This is the third item.

<LI> This is the fourth item.

</OL>

In addition to creating the list, HTML 3 offers some list configuration ability. You can begin a list at a particular number by specifying the SEQNUM=## attribute of the <OL> tag. Using the SEQNUM attribute will start the list at ## rather than at 1.

<LI> This is the third item.

<LI> This is the fourth item.

</OL>

You can also skip numbers within your list by using the SKIP attribute within your <LI> tag. SKIP=## will skip ## number of items before continuing the number sequence. For example, if you wanted your list to skip 4 numbers between steps, the following code could be used.

<OL>

<LI> This is the first item.

<LI SKIP=4> This is the second item.

<LI> This is the third item.

<LI> This is the fourth item.

</OL>

Lists can also be related to other lists within a page. For example: If you have a list in your document and then conclude the list to include some additional information, you can continue your list where your last list left off. The CONTINUE attribute will force the ordered list to start with the next number in the previous list's sequence.

<LI> This is the third item.

<LI> This is the fourth item.

</OL>

Netscape incorporates a few extensions which allow you change the type of numbering which is performed. The default numbering, {1,2,3,…} can be changed to use either Roman numerals {I,II,III,IV,…} or letters of the alphabet {A,B,C,…}. This is performed using the TYPE attribute of the <OL> tag. To use Roman numerals, use TYPE=I. To use letters of the alphabet, use TYPE=A.

<LI> This is the first item.

<LI> This is the second item.

<LI> This is the third item.

</OL>

<LI> This is the first item.

<LI> This is the second item.

<LI> This is the third item.

</OL>

Note that the type attribute can also be applied within the <LI> tag in the event you wanted to override the numbering of a particular item.

Unordered lists

The unordered list is typically used to emphasize several short lines of information. The unordered list is started by the markup tag <UL> and completed with the markup tag </UL>. Each line in the list begins with a <LI>. The resulting output is a bulleted list of lines.

<UL>

<LI> This is the first item.

<LI> This is the second item.

<LI> This is the third item.

<LI> This is the fourth item.

</UL>

Netscape incorporates some extensions which allow you to define the type of bullet which is used in the unordered list. You can change the bullet to be a disc, square, or circle. As with the custom numbering of an ordered list, the TYPE attribute is used. The TYPE attribute in this context use disc, square, or circle to define the type of bullet.

<LI> This is the first item.

<LI> This is the second item.

<LI> This is the third item.

</UL>

Note that the type attribute can also be applied within the <LI> tag in the event you wanted to override the default bullet of a particular item in the list.

Definition lists

The definition list is used to create glossaries. The first item in the list is the term and the second is the definition of that term. The definition list is started by the markup tag <DL> and completed with the markup tag </DL>. Each term in the list begins with the markup <DT> and the corresponding definition is denoted with <DD>.

<DL>

<DT> Term A

<DD> Definition of term A

<DT> Term B

<DD> Definition of term B

</DL>

List Headers

When creating a list, it is now possible to include list headers. List headers are created using the <LH> tag and a closing </LH> tag. The <LH> tag is placed between the opening and closing list tags for the type of list you are creating. This tag can be placed anywhere between the open and close of the list. Generally, the header is placed near the beginning of the list.

<UL>

<LH> This is the heading for the item list</LH>

<LI> This is the first item.

<LI> This is the second item.

<LI> This is the third item.

<LI> This is the fourth item.

</UL>

Nesting lists

Any list can be nested within another. Nesting is accomplished by placing the open and closing tag of the nested list between the open and closing tag of the list to nest in. Nested lists will appear indented from the list which contains it. Lists which are included within lists also can take on a new bullet style. For example, Netscape will use the solid circle, open square, and then solid square. An example which demonstrates the use of nesting is shown below. Notice that the bullets in the fourth level are not unique. This is because it is not typically recommended to create lists with a depth of more than three.

<HTML>

<HEAD>

</HEAD>

<BODY>

<UL>

<LI>Markup Languages

<UL>

<LI>SGML

<UL>

<LI>TEST

<UL>

<LI>Line1

<LI>Line2

</UL>

<LI>TEST2

</UL>

<LI>HTML

<LI>VRML

</UL>

<LI>Programming Languages

<UL>

<LI>Basic

<LI>Pascal

</UL>

</BODY>

</HTML>

(Note that this example shows indented lines. This is not necessary to make the internal lists indented and is only used for better readability of the code; multiple spaces are collapsed into a single space)

Exercise

Create a document which contains a list for each of the following. An ordered list for a recipe or repair guide. An unordered list of your favorite computer programs. A definition list of terms used in your job or at school.

Nest these lists in an unordered list. Include a list header for the parent list.

Test in your browser and experiment changing the numbering for the unordered list and the bullet type for the ordered list.

Basic Tables

As in written documents, there are some times when you require the use of a table to organize information. There are many times when a list will be sufficient to organize information you wish to present to the user. When you need to introduce another level of detail you can make use of a table.

Basic Elements

The HTML markup tags to define a table are <TABLE> to signify the start of a table, and </TABLE> to signify the end of the table.

<TABLE>

. (table elements)

</TABLE>

Essentially, a table is a collection of data organized into rows and columns. There is no difference between a table in a written document and ones contained within HTML documents.

Tables in HTML documents are organized by row. What this means is that you must explicitly define a row and then add a variable number of data elements to that row. The HTML markup tags to define a row in a table are <TR> to signify the start of a row, and </TR> to signify the end of a row.

<TABLE>

<TR>

. (row elements)

</TR>

<TR>

. (row elements)

</TR>

</TABLE>

Obviously you have to do more than just define rows in your table. (That’s the first step.) You must now define the data elements which are contained within the row. To accomplish this there is another tag, <TD>. <TD> works the same way as other table tags as it starts with a <TD> and ends with a </TD>.

<TABLE>

<TR>

<TD>Column 1 Row 1</TD>

<TD>Column 2 Row 1</TD>

<TD>Column 3 Row 1</TD>

</TR>

<TR>

<TD>Column 1 Row 2</TD>

<TD>Column 2 Row 2</TD>

<TD>Column 3 Row 2</TD>

</TR>

</TABLE>

Adding Borders

You will notice in this example that no borders are defined for the table itself. There are times when complex data is being put into your table and you need physical separators. In order to do this, you are required to define the border of the table. This is done through the attribute BORDER which is placed with the <TABLE> markup tag. Syntax: <TABLE BORDER=#>. So for example, if you wanted a border of one, you simply use:

Adding Headers

Now that we have what physically looks like a table, you will notice that we are missing an important part: namely the headers for the columns. It is as easy to define headers as it is data elements. The markup to define a header is <TH> to start the header and </TH> to end the header. You will notice that headers are placed within the <TR> tag the same way the <TD> is inserted.

<TR>

<TH>Column 1</TH>

<TH>Column 2</TH>

<TH>Column 3</TH>

</TR>

Headers can additionally be used to signify rows as well. It just takes a bit of planning about how you are going to structure your table. In order to add headers for each row, you will be required to create an extra column at the start of every row.

<TR>

<TH></TH>

<TH>Column 1</TH>

<TH>Column 2</TH>

<TH>Column 3</TH>

</TR>

<TR>

<TH>Row 1</TH>

<TD>Column 1 Row 1</TD>

<TD>Column 2 Row 1</TD>

<TD>Column 3 Row 1</TD>

</TR><TR>

<TH>Row 2</TH>

<TD>Column 1 Row 2</TD>

<TD>Column 2 Row 2</TD>

<TD>Column 3 Row 2</TD>

</TR>

</TABLE>

Exercise

Create a table much like the one defined above. Your table should be 4 columns across and 5 rows down.

Add an additional column to the left side of the table for row headings and add an additional row to the top for column headings.

Set the border to be a size of 2.

Test in your browser.

Adding a Title

Another useful feature of tables is the ability to assign a title to a table. This is accomplished through the use of the <CAPTION> markup tag. The caption tag must be enclosed within the <TABLE> ... </TABLE> tags and must have the text to be used in the title contained within it. Note that a table can only effectively contain one caption.

<CAPTION>Title of Table</CAPTION>

<TR>

<TD>Column 1 Row 1</TD>

<TD>Column 2 Row 1</TD>

<TD>Column 3 Row 1</TD>

</TR>

</TABLE>

You should note that you can place a title at the bottom of a table. The <CAPTION> tag has an attribute "ALIGN" which defines where the caption will be placed. In order to place the caption at the end of a table you can change the caption line to the following:

<CAPTION ALIGN=BOTTOM>Title of Table</CAPTION>

Applying Text Formatting

As you may have noticed, headings by default are boldfaced and centered. You can apply any formatting markup tags to the text within a cell as well. For example, if you wanted to boldface the word Column in our example in the first row, first column all you would need to do is wrap the word Column in the boldface markup tag as shown:

<TR>

<TD><B>Column</B> 1 Row 1</TD>

<TD>Column 2 Row 1</TD>

<TD>Column 3 Row 1</TD>

</TR>

Cell Alignment

Headings, by default appear centered in the cell of a table. What if you wanted to align other cells not being used as headers? There is an ALIGN attribute which will do this for you. This ALIGN attribute can be used in both the cell and in the row tags. Now before jumping ahead and adding the align attribute to all cells, you should consider all the cells which you want to affect. If you want to affect all the entire row of a table, you should consider using the ALIGN attribute in the row tag; if you want to affect only specific cells, use the ALIGN in the cell tags; if a good portion of the row is changed from the default, you may also want to consider using the row ALIGN and the cell ALIGN. The cell ALIGN will always take precedence over the row ALIGN. By knowing this, you can define a default behavior for all the cells within a row, and then set individual alignment behavior on a cell by cell basis if it deviates from the default you set in the row.

Whew! Here’s an example to clarify. You must note that the default behavior for a row and for a cell is LEFT justified. If you wanted to redefine the behavior so that the default for the row is "CENTER"ed, you would define the row attribute as:

Once you have set the row to be centered, you may require that the first data element remain left or right justified. You could do this by:

Not only can you align your text based on horizontal alignment, but you can also align your text vertically within the cell. There will be many times when the text within your cell will wrap to the next line and cause a cell to take up two or more vertical lines. The default behavior is to have the text align to the CENTER of the cell. There may be some situations where you want to make the text to align to the top or bottom of the cell. This is accomplished through the use of the VALIGN attribute. This attribute can be one of three values: MIDDLE, TOP, or BOTTOM. This attribute works in very much the same way as the ALIGN attribute where you can define a particular default to the entire row and change individual cells. If you recall, this is done by defining a vertical alignment within the row <TR> tag and then redefining the vertical alignment within the cell.

Row alignment Cell alignment

Exercise

Using the previous exercise, add a title to the table.

Make the text of one cell of your choice italics, another cell bold, and another cell bold and italics.

Change the third row to default to centering. Make the last item in that row (column 5) right justified.

Insert an image into the first data column of the last row.

Change the vertical alignment of the last row to be bottom.

Cells Which Span Columns and Rows

You have now experimented with tables which contain a fixed number of rows and a fixed number of columns. There may be an occasion where a column is not required within a particular row. If you were just to remove the data tag you would find that your column alignment would be wrong. This is because the browser interprets each cell one at a time and places them into the table. The browser has no knowledge of your intentions and you cannot assume it does. However, there is a way for you to tell the browser that a particular cell is going to consume two or more columns. This is done at the cell level using the COLSPAN attribute. This attribute follows the syntax: COLSPAN=#.

Using our recurring example, if we wanted the second column (1st data column) to consume two cells and we eliminated the third physical column, we would change the document so the last row reads:

<TR>

<TH>Column 1</TH>

<TH>Column 2</TH>

<TH>Column 3</TH>

</TR>

<TR>

<TD>Column 1 Row 1</TD>

<TD>Column 2 Row 1</TD>

<TD>Column 3 Row 1</TD>

</TR>

<TR>

<TH>Row 2</TH>

<TD COLSPAN=2>Column 1 Row 2</TD>

<TD>Column 2 Row 2</TD>

</TR>

</TABLE>

In addition to the combining of cells on a columnar basis, you also have the ability to combine rows. This is accomplished in very much the same way. The attribute to accomplish this is through the use of the ROWSPAN attribute.

<TR>

<TH>Column 1</TH>

<TH>Column 2</TH>

<TH>Column 3</TH>

</TR>

<TR>

<TH>Row 1</TH>

<TD ROWSPAN=2>Column 1</TD>

<TD>Column 2 Row 1</TD>

<TD>Column 3 Row 1</TD>

</TR>

<TR>

<TH>Row 2</TH>

<TD>Column 1 Row 2</TD>

<TD>Column 2 Row 2</TD>

</TR>

</TABLE>

The ROWSPAN and COLSPAN attributes can both be used within a table or within the same sets of cells. There may be times where it is hard to keep track of how a browser will interpret the spanning of cells, so you may need to verify in your browser.

Exercise

Reproduce the table shown below:

Image Maps

You have seen that you can link to other documents using the anchor tag. While creating links between documents and jumping within your document you may have used an image to create the link. This, as you remember, was accomplished by placing the image tag within the anchor tag.

Often this was useful when you had several distinct images as each could have their own link. But, what if you had a single image? Or you want to set up a standard navigation toolbar on your page? This can be accomplished through the use of image maps.

When the user views an image map, they can click on any portion of the image they wish. The image is divided into several sections which represent different links. When the user clicks a particular link, the coordinates of the click is recorded. The appropriate link which resides in that coordinate range is then activated.

This section will focus on:

Creating an image

Creating a map

Adding a map to your page

Compatibility considerations

Creating an Image

Netscape is a good example of a site which uses an image map for navigation. While looking at their page you will notice a number of graphic images placed throughout the page. You will also notice a set of buttons below the main Netscape graphic. These are the navigation buttons for the site.

Each button is distinguished from the other by their coordinates. "Company & Products" has a different location than "Assistance". When the user clicks on a link, the coordinates are recorded. These coordinates are then sent to the server to determine what link to activate.

Netscape is an example which uses a button bar style to reveal links to the user. You of course are not restricted to using a button bar style. Some Web designers use graphics like scenic pictures to show links. For example, if tourism France had a web page, they could use a picture or map of the city and define clickable regions within the picture. If a user clicked on the Eiffel Tower, then they would be presented more information on that monument.

A clickable image can be any type of picture, as long as it is a graphic type of GIF or JPEG. Although you can use scanned images or images from other locations, most web designers choose to create their own. An image can be created with any graphic utility. One of the more popular shareware graphic programs, and the one which we will use for this section, is Paint Shop Pro.

In the Netscape example, the image map represents a button bar of rectangular buttons. This is one of the easiest image maps to create as each button is the same size and shape. The rectangular shape is also one of the easiest to map. Clickable areas can be defined in other shapes as well including circles and polygons such as triangles, hexagons, etc.

Squares and rectangles are defined by the coordinates of the upper left corner and the lower right corner.

Polygons are defined by supplying the coordinates of all the corners.

Circles are first defined by their center, with a clickable area defined by its radius.

When making graphics to be used in image maps keep the following in mind:

The image map must be saved in GIF or JPEG format.

Images should be planned out prior to using the software. Sketch the graphic on a piece of paper or white board. Note any links which may be missing. Try to make the graphic as clear as possible. It's often easier to make a change during the planning stage than after the graphic is mostly completed.

Images should be easy for your user to understand. Although graphics are an easy way for a user to identify where a link will take them, a label for the image is often a good way to make it that much clearer.

Exercise

Create an image map button bar similar to the one which shown in this section. Include a button to your home page, a page about yourself, sports, hobbies, work, etc. If you wish to create a button bar for a company, consider making sections such as general information, products, marketing, employment opportunities, etc.

Creating a Map

Once you have created the image to be used for the map file, the next step is to create a map file. This map file basically contains a list of coordinates that form the map (clickable) regions. Each region defined by the map has an associated hyperlink. When the user clicks on a clickable region of the image, the map file is used by the Web server to determine which region was selected by matching the coordinates supplied by the browser.

Of course, you don't have to create the map file manually yourself. You can make use of various software to simplify the task. In general, most mapping software load up the image, allow you to graphically divide the image into regions, and assign links to those regions. As was noted in the previous section, regions can take a variety of shapes including squares, rectangles, circles, and polygons. Remaining areas of the image can be made to be default regions or can be set up to do nothing.

Products

There are a variety of useful products which can be used to create map files. Some of the more popular ones are listed below. The one which we will be using in this courseware is Map THIS!

Map THIS!

Map THIS! is a freeware Windows (Win32) image map generator by Todd Wilson which has won numerous Web awards. Version 1.31 is the latest and last version. A new product, Live Image, which is packed with new features is being produced which will replace Map THIS!

Map THIS! can be found at http://www.ecaetc.ohio-state.edu/tc/mt/

MapEdit

MapEdit is a WYSIWYG editor for imagemaps. Authored by Thomas Boutell, the keeper of the WWW FAQ. This editor supports the GIF, JPG, and PNG formats.

MapEdit comes in versions for a number of different operating systems which include Microsoft Windows 3.1, Microsoft Windows 95 and NT on normal PCs, Microsoft Windows NT for the DEC Alpha, Linux (ELF support needed), Solaris 2.5 (INTEL), HP/UX 9 on the HP 700 series, AIX version 4.1, Solaris 2.5 (SPARC), BSDI OS 2.x, HP/UX 9 on the HP 300 series, DEC Alpha, running OSF/1 (4.0), SCO Unix 3.0 (COFF), SCO Unix 5.0 (ELF), HP/UX 10, FreeBSD, SunOS 4.1.3 (SPARC), and SGI Irix 5.3.

MapEdit can be found at http://www.boutell.com/mapedit/

MapMaker

MapMaker allows you to Interactively create an image map for any inline image anywhere on the WWW by specifying the URL of the page which includes the inline images. The image map file is created by defining individual polygons on the image which you specify. Each polygon is defined by specifying the vertices of the polygon in order. Once you have selected an image upon which to create an image map, you can define each polygon by clicking on the image. MapMaker is designed for Mosaic or Unix boxes and is incompatible with some other browsers, such as Netscape or Mosaic on the Mac.

MapMaker can be found at http://www.tns.lcs.mit.edu/cgi-bin/mapmaker

WebMap

For those of you who have a Macintosh, the best image map generator is currently WebMap. Version 1.01 is shareware and the new version 2.0X is payware. This is authored by City.net.

WebMap can be found at http://www.city.net/cnx/software/webmap.html

Web Hotspots 2.0 / 3.0

Web Hotspots 2.0 is an image map editor for Windows supporting both server and client-side image maps, multiple image file formats including GIF and JPEG and more microscopic (zoomed-in) editing, advanced shape manipulation, subtractive regions (cutouts), starter host page generation, insertion of host (i.e., IMG) entries into existing pages, and live testing for Windows Sockets 1.1 compliant configurations.

Web Hotspots can be found at http://www.cris.com/~automata/hotspots.shtml

Using Map THIS!

Creating an image map with Map This! can be broken down into a few simple steps:

Load the image.

Define clickable regions.

Define settings for clickable regions.

Save image and define map settings.

Load the Image

Start Map This! and select New from the File menu. You will then be prompted for the

name of the graphic file you want to create the image map for.

Once the graphic has been opened, you will be able to begin working with your image.

Define Clickable Regions

In the window of the graphic which has been opened is a toolbar with four options: define rectangle, define circle/oval, define polygon, and select area.

These tools are used to define each of the areas which are to be used as clickable regions. Each tool has a particular function and are as follows:

Define Rectangle

You can create new rectangles by moving the mouse pointer to the location for the first corner. While holding the left mouse button, drag the mouse pointer to the opposite corner. Release the mouse pointer when you are done.

Define Circle/Oval

You can create new circles by moving the mouse pointer to the location of the center of the circle. While holding the left mouse button, drag the mouse pointer to the radius of the circle. This is known as pull from center.

Define Polygon

You can create any type of polygon using the polygon tool. Create odd shapes, triangles, etc. For example, you can use the polygon tool to make a rough shape of a car. You create a new polygon by moving the mouse pointer to the first corner of the polygon. Click the left mouse button to start the polygon. Move the mouse pointer and click for the second corner. Continue until you have created all your "nodes". Complete the polygon either by clicking near the starting point or by double clicking the left mouse button.

Select Area

The arrow tool can be used to move, reshape, or delete existing areas. You can move an area by positioning the mouse pointer over an area. When the mouse pointer changes to a four way arrow, drag the area to a different location using the left mouse button. Deleting an area can be accomplished by right clicking on the area and selecting "Delete Area" from the popup menu. Reshaping can be done by clicking on "nodes" which make up the shape and dragging the node to a new location.

Once an area is created, a border is drawn around the area and if filled using a hatched pattern.

Define Region Settings

When you have finished defining the clickable regions on your image, you can change the settings of the region. Note: You can define the region settings for a region any time after it is created. To change the settings for a clickable region select the "Select Area" tool and right click on the region. Select "Edit Area Info" from the popup menu.

You have the ability to set the URL to activate when the area is clicked. In this example, the page destination.htm will be loaded when the user activates the particular region. Note that you can also connect to named anchors on the same page or on different pages. Within the map file, include the name of the anchor.

http://thedomain/thepage.html#thename

Saving the Image

Once you have defined all the clickable regions for the image and have changed the settings for each of those regions, you can save the image map by selecting "Save As" from the File menu. A dialog will appear requesting additional information on the map file and what format to save it as.

Enter a title for the image map in the title field and type your name into the author field. Default URL is used as a link to any region of the image which does not have an area associated with it. If you want to assign no link to be your default, you must connect call a CGI script to return back a no response message, #204 (contact your system administrator to find out if your site has such a program.) A description is useful as it provides additional information as to what the map file does. The format setting allows you to specify what map format you want to use. This format must match the format used on the server where you are placing the map file. The most common, and default, format is NCSA. If you are unsure of the format to use, contact the administrator of your service provider to determine the correct type.

Working More Effectively

You can speed up your work by using a few of the advanced features of Map This! For instance, you can test the map file you just created by selecting "Test Map" from the Goodies menu. This allows you to see what links will be activated when a user clicks on a particular region of the image. When you have finished testing your map, select Done.

Magnification tools can be used to focus on particular areas of your image. This gives you the ability to zoom in on an area and then create more precise regions. "Zoom In" from the View menu is used to magnify, "Zoom Out" returns you to the state previous to the magnification.

Another useful feature is the ability to list all the clickable regions being used for an image. This is especially useful if you have a large number of regions defined.

The area list is accessed by selecting "Area List" from the View menu. From within the area list, you can select and edit any region in the list. When a region is selected in the list, the region is also selected on the image view. You can scroll through the list by clicking on the up and down arrows. You can delete a region by selecting the "X" button. Editing area information can be accessed by clicking on the pencil button.

Exercise

Create a map file for each of the buttons on the button bar created in the previous assignment. Edit the settings for each of the regions to assign a link. Test the links by testing the map within the Map This! program.

Adding a Map to Your Page

The final step to creating an image map is referencing your map from your HTML document. An image map is referenced from an anchor tag. The anchor tag is placed in the HTML file where you want the image map to reside. The anchor tag as you remember follows the following syntax:

The URL in this case is the name and location of your map file. Where your map file can be placed depends on the configuration of your service provider. Some providers place these files in a CGI-BIN directory and others are placed in the same directory as the HTML file.

Once you define your anchor, the next step is to include the image within the anchor. This is done by placing the IMG tag between the opening and closing anchor tags. (This is the same as using an image as a link.) An additional attribute is required to distinguish the image as an image map. This is done with the ISMAP attribute. The ISMAP attribute is placed inside the IMG tag.

Placing the IMG tag between the anchor tags will then resemble:

As with other graphic links, you will notice that the image of an image map has a border. This border, in most cases, should be removed for aesthetics. You can remove the border in the same fashion as removing a border from a graphic link. The BORDER attribute with a value of 0 can be used to accomplish this.

You can supply an alternate to the image map as you do with normal embedded images. Note that this does not specifically pertain to image maps. The behavior is the same as a normal graphic in that the alternate text is displayed until the image map is displayed. If a user is using a text browser, the alternate text is displayed. This alternate text has no function except to tell the user that an image map was not displayed. If you want to provide alternates to the image map, refer to the next section on compatibility and alternatives.

The map cannot be tested from your local machine, and must be uploaded to a server. As a final step, in order to test your image map, the HTML document, graphic used as the map, and map file must be loaded onto the web server. You can upload using FTP, or another facility provided by your ISP.

If you have problems running the image map, there may be a special configuration on your ISP or they may be using a different type of map file. Consult your administrator for information on the type of maps used on the site, the location where the map files should be stored, and any other special considerations.

If you would like more information on the CGI imagemap programs including source and documentation you can connect to:

NCSA

http://hoohoo.ncsa.uiuc.edu/docs/tutorials/imagemapping.html

CERN

http://www.w3.org/hypertext/WWW/Daemon/User/CGI/HTImageDoc.html

Exercise

Create an HTML document which will be used to contain the image map.

Supplemental Exercise

Download an image from the Internet which is either a picture or map. Load this image into Map This! and create clickable regions for each area. These areas will most likely be polygons. Assign links to each region. Test the image map from within Map This! An image of a map can be obtained from http://www.city.net/ or you can find your own by searching on the net.

Compatibility Considerations / Alernatives

There are considerations which should be made when developing image maps:

What if my user's browser does not support graphics?

What if my user has "auto load graphics" turned off?

What if their browser does not support image maps?

How efficient is the map for my user?

When trying to answer these questions, you need to realize that your audience may not be using the same tools as yourself, and that their connection/configuration may be different. With image maps, coordinates are processed at the server which increases interaction. If your ISP's server is quite busy, network traffic is high, or the user's connection is slow, will this interaction slow your user down?

You may also want to consider using individual graphics and links to achieve a result similar to the map. Image maps look good and function well for some, but can you achieve the same result with regular links? Remember that links to images are processed locally.

Additionally, for increased compatibility, you should always provide text alternatives to your image map; whether you are using individual graphics or a map.

You may also want to consider a relatively new extension to HTML, client side image maps, which actually process the coordinates on the client machine.

Compatibility Considerations

There are times when your user may be using a browser which does not support graphics, or they simply have "load graphics" turned off. To allow these users to be able to navigate your pages, you should provide text alternatives to the image map. These text alternatives typically appear below the image map or at the bottom of your page.

Text alternatives can be in a variety of forms. If you recall the Netscape button bar example from the start of this chapter, you will note that several options are available. As text alternatives, they have decided to break the topic into more specific jumps.

Probably the most common type of text alternative is simply providing a substitute for the button bar. This is usually done at the bottom of a document. Typically items listed for the button bar separated with "|" or are enclosed in square brackets "[ button ]". TD Bank is an example of a site which uses text alternatives as well as the button bar.

Exercise

Edit the document containing the button bar to include text alternatives for those whose browsers do not support or do not load graphics.

Using Multiple Graphics

One alternative to using an image map is using multiple graphics, each with their own link. Many sites have decided to go this route, including Microsoft. This is often referred to as a pseudo image map. There are several reasons why this may be a better alternative:

Easier to maintain. If you want to add a link, you can just create the graphic and add the link to the web page.

If you wanted to make changes to an image map, you would be required to modify the image and then create a new map file.

Many image maps are server side image maps. Only now are client side image maps available. In many cases, developers would use individual images as response time is faster.

More customized look. Want image to change while on a different topic. Makes it easier to maintain.

For changing images, more disk space efficient as images would most likely be smaller.

All browsers support pseudo image maps.

This is an example of the Microsoft home page. Notice that the buttons across the top of the document are individual images, each with their own link.

The developers also notify the user to which page they are currently on by highlighting that button. In this example, we are on the "home" page, as Microsoft is highlighted. This would be most costly to do using an image map as several versions of the entire image would need to be stored on the Web Server. Changes to the menu would also require changes to each one of the versions of images.

The first step to creating the pseudo image map is creating all the graphic buttons. Once you have created all the graphics, you can begin incorporating your links in your document. To create a pseudo image map using multiple graphics, you have to put all the tags together without any spaces or line feeds between them. Additionally, you may need to adjust the size so the buttons appear uniform and you will most likely want to turn link borders off.

Note that in the example there are no spaces or line feeds between any of the opening and closing tags. Also note that each graphic is linked to a different web page.

Exercise

Break the image map graphic created in the previous exercises into several smaller images. Create an HTML document which produces a result that resembles the image map created earlier. Include in the document links which were used when creating the map file.

Client Side Image Maps

So far you have seen how server side image maps can make it easier for the user to navigate your pages. Image maps are useful for site navigation controls which may be an unusual shape or part of a larger image. Now these advantages can be expanded by using a new kind of image map: client side image map.

Client side image maps offer several advantages over the usual server side image map:

No server interaction is required. All the map information is stored in the HTML document and is processed on the client machine. The reduced communication between the client and server often translates into much better response times.

Intranets are becoming very popular in businesses. Intranets are typically accessed either locally or through a LAN. Server side image maps do not function in these types of environments as they are only supported across the HTTP protocol on the WWW. Client side image maps function on these configurations as processing is performed on the client.

When a user moves their mouse to the map file, they do not receive any visual feedback on the link they can connect to. If you remember, using graphics as links shows you the URL in the status bar of your browser window. Client side maps also show the URL.

There are two types of client side image maps: figure based (HTML 3) and Spyglass-style. Currently, only UdiWWW fully supports figures. Spyglass-style imagemaps are currently supported by Spyglass Mosaic (2.1 or greater), Netscape (2.0b1 or greater), and Microsoft Internet Explorer (2.0 Beta or greater). Although there is not currently much support for figure based image maps, expect to see more support in the future. This is because figures offer many features including captions, overlays, and HTML markup as alternate text.

SpyGlass Style Image Maps

The map information for SpyGlass style image maps is embedded into the HTML document. The Netscape site is an example of a place which uses SpyGlass style image maps. You will recognize this button bar from the one shown earlier in this chapter.

A snippet of Netscape's default home page code which uses this image is shown here.

</MAP>

You will notice that this code snippet has a number of new tags and attributes. We will examine these next.

The first new tag, <MAP>, is one which defines the image map. <MAP> contains all the information regarding the map areas and therefore requires a closing </MAP>. The <MAP> tag also has a name attribute which must be used in order to reference the map.

You will notice that in Netscape's example, <AREA> is used to define each of the clickable regions. You will also notice that no particular shape is defined. This is because the rectangle is the default attribute for the shape of the clickable area. In the following example, both lines of code will yield the same result.

Other geometric SHAPEs which are supported are the "rect", "polygon" and "circle". The COORDS attribute will have different values depending on the SHAPE of the area. (Note: with some browsers you may find that only the "rect" shape is supported.) Shapes are not case sensitive so they can appear as rect, Rect, RECT, or other combinations.

Shape

Coordinate Style

Rect

(x,y) of corner, (x,y) of opposite corner. (Usually upper left / lower right)

Circle

(x,y) of the center, n for the length of the radius (in pixels).

Polygon

(x,y)(x,y)(x,y)… series of xy coordinates for each node in the polygon.

</map>

Note that if you overlap any of the areas that no error occurs. The browser, when looking at a coordinate which was clicked, will choose the first coordinate which matches a region (the region listed first will take precedence.)

The final attribute of the shape tag is the HREF attribute. This attribute works the same as with an anchor attribute. The HREF attribute represents the URL which will be accessed when the user activates the clickable region. This URL can be either an absolute or a relative URL.

If you want to assign a default region for the imagemap as is done with server side image maps, create an area which uses the coordinates for the entire image. You will recall that when regions are overlapped, the first in the list will take precedence. Therefore, the default region should appear last in the list.

</MAP>

If you want the default area to perform no action, the process is much simpler than server side image maps. You will recall that with server side image maps you must call a CGI to return back a message to the browser. With client side image maps, you do nothing! If you do not specify a default region, then none will be created. Although it is not necessary, you can specify a default region and specify a NOHREF attribute.

</MAP>

Once you have defined your map, you can use it by modifying the IMG used in your document. Place the IMG in your document where you want the image map to appear. For client side image maps an addition attribute, USEMAP, is used to define what map file will be used with the image.

Exercise

Create an image map for your button bar using the SpyGlass style client side mapping. Load the document into your browser and test. Examine sections of the image to ensure the correct link is being activated.

Supplemental Exercise

Using the map or picture you obtained in one of the previous exercises, create a client side image map. Try to use each of the geometric shapes for the image map. An example of a site which has a map file which functions like this is the Universal Studios home page at http://jurassic.unicity.com/.

Is it possible to share map files between documents?

Sharing map files between documents is relatively easy with client side image maps. You will note the attribute USEMAP which is contained within the <IMG> tag. This attribute actually follows the following syntax:

USEMAP="filename#mapname"

USEMAP="file.htm#mapname"

If the map file is contained within a different file, include the filename prior to the '#' symbol in the USEMAP parameter. If you like, you can create a file which only contains the image map. This will allow any document which needs it access without the overhead of loading an entire other document. Additionally, should you want to make changes the image map, it is much easier to change one rather than a number of files.

What if my user's browser only supports server side image maps?

Having a user which only has the ability to view and use server side imagemaps is not a problem. It is relatively easy to add support for both types of maps. You can add support for client side image maps by adding the anchor around the image as was done with stand alone server side image maps. In addition, add the ISMAP attribute to the <IMG> tag to indicate that it is an imagemap.

</A>

Note that most browsers which support both types will attempt to utilize the client side image map. If the browser does not support the client side image map, the USEMAP attribute will be ignored and a request will be sent to the server.

If you are concerned with compatibility, utilizing both client side and server side image maps is ideal. Using both will produce a document which runs more efficiently on the newer browsers, but still is able to function on older browsers which do not support client side image maps.

Exercise

Create a map file in a separate document which can be accessed by a number of pages. Create a set of pages to access the map file to test the map. Test the documents in your browser.

Create a document, or revise an existing document, which demonstrates the use of using both client side and server side image maps.

HTML 3 Figure Image Maps

A tag new to HTML 3 is the Figure (FIG) tag. The figure tag provides a number of features, including the ability to create client side image maps. The figure tag is not widely supported as of yet, not even by Internet Explorer or Navigator. However, this tag is very powerful and will most likely be incorporated in future browsers. Therefore a brief look at this tag will provide you with a background for when it becomes available.

The <FIG> tag functions very much like the <IMG> tag. One of the big differences though is that the <FIG> tag has a corresponding closing </FIG>. This indicates that it is a container rather than a singleton. The <FIG> tag has a SRC attribute which functions the same way as the <IMG> tag. However, as the <FIG> tag is a container, text which is displayed when the image cannot be displayed is placed between the <FIG> and </FIG>.

<FIG SRC="buttonbar.gif">Some <B>alternate</B> text.</FIG>

You will notice that tags can be used within the alternate text, a key advantage to the ALT attribute predecessor.

The following is an example of using the <FIG> tag to create a client side image map:

<H3>Choose from the following options:</H3>

<LI><A HREF="default.htm" SHAPE="default">Default</A>

</UL>

</FIG>

You will notice that not only simple formatting tags can be used within a <FIG> tag. In this example, we have used headers, lists, and anchors. As with SpyGlass style client side image maps, regions are embedded within the HTML document. Both the shape, size, and URL information are embedded within the anchor <A> tag. You can put anything between the <FIG> and </FIG> tags and it will be ignored should the browser support figures. Only anchors which contain the attribute SHAPE are used to define the image map. If the <FIG> tag is not supported by a browser, then whatever appears between the <FIG> and </FIG> tags are used as the alternative. This is ideal as you define a menu, as shown above, as an alternative to the map.

As noted earlier, the figure tag is not widely supported yet. If you want to use the figure tag in your documents, you can set up a server side image map in the same manner as with the SpyGlass style client maps. The following example demonstrates how you can add the server side support.

<H3>Choose from the following options:</H3>

<LI><A HREF="default.htm" SHAPE="default">Default</A>

</UL>

</FIG>

A browser which supports figures will produce a client side image map. If the browser does not support the figure tag, then the server side image map will be displayed instead.

Exercise

Create a figure image map document using the image created earlier in the chapter.

Incorporate support for server side image maps to the document you just created.

Changing Font, Color, & Background

So far you have been exposed to the various tags which allow you to format your text. In this chapter, we will extend your ability to create different size fonts, different style fonts, and change font color. Not all browsers will support these tags. For the most part Netscape and Internet Explorer have support. The best way to ensure your pages will load correctly on various browsers is to try them!

This section will focus on:

Changing the Background Color

Using a Background Image

Changing the Font Size

Setting the Font Color

Changing the Font Face

Customizing Table Colors

Changing your background

Blah! Don't you just love the default gray background? To make your pages look a little less drab you can change the background of any of your documents to a particular color. If a color doesn't suit your fancy then you can consider using an image instead.

The background color

The body of your document is controlled by a tag which is placed in the header of your document. The tag, <BODY>, has an explicit attribute which is used to set the background color of your document. This attribute, "BGCOLOR", follows the following syntax: BGCOLOR="#rrggbb". What the "#rrggbb" translates in to is the red, green, and blue mixture which makes up your desired color. A very good way to determine the color you are looking for is to use the Paint Shop Pro application to do the work for you. Don’t sample a color, reload, sample, reload! The process to determine the color is as follows:

Load Paint Shop Pro.

Create a new image accepting the defaults.

Open the color palette in Paint Shop Pro by double clicking on the foreground color.

Experiment typing in numbers between 0 and 255 in the Red, Green, and Blue edit fields in the bottom right of the dialog. (The color will appear to the left, in the color field.)

Once you have found a color which you are happy with you are ready to convert the numbers which make up the color into hexadecimal. (These are in decimal.)

Note the numbers.

An easy way to convert numbers from decimal to hexadecimal is to use the Calculator Application. Load the calculator application.

If the calculator is not already in scientific mode, change the mode to scientific using the "View" menu.

Ensure that the radio "Dec" is selected. (Decimal.)

Enter the number representing the red color into the calculator.

Change the radio to Hex. You will notice that the number changed. You will want to note this number because this is the number you use with the BGCOLOR attribute.

Repeat steps 12 through 14 for Green and Blue.

Now that you have the color of the background noted in hexadecimal, you know the numbers to substitute the rr, gg, and bb.

<BODY BGCOLOR="#FF3366"> (reddish color)

Now that you have done it the hard way, another way to determine colors is to use one of the many services offered on the Web. Check out the "Web color utilities" section in Appendix C. Note that these only work if you are online. This previous method, as it uses local programs, does not require you to be logged on.

Exercise

Using Paint Shop Pro, determine a color you would like to use for your background.

Using Calculator determine the color in hexadecimal.

Create a new document which changes the color of the background.

Test in your browser.

Using an image instead

You have the ability to use graphics in your backgrounds to make your pages a little more interesting. Rather than giving an explicit color for the background you can specify an image to be used instead. The attribute used to determine the image is BACKGROUND and follows the syntax BACKGROUND="...".

What must be used with the attribute is a qualified URL which points to an image, or just the image name itself. For example:

You will notice that the image is tiled on your page, very similar to the tiling which is performed on the windows background for wallpaper.

When you scroll the document, the background scrolls along with the text and other graphics on the page. If you want to prevent this from happening, you can add an attribute to the BODY tag which will instruct the browser not to scroll the graphic. The attribute BGPROPERTIES=FIXED prevents scrolling. Note that this is an Internet Explorer extension and may not work on all browsers.

Be careful not to use images which are too busy. This will deter from your page and make it unreadable.

Exercise

Create a new document which uses an image background. You can obtain an image from a background archive on the Net listed in Appendix C.

Test in your browser.

Font Size

There are occasions when you may want to change the font size of the text within your document. You may want to enlarge the text of a document for easier readability or reduce the font so more text can be placed on the screen. It should be noted that the tags introduced in this section are Netscape extensions and may not work with all browsers.

Creating a Base Font for Your Document

Usually the default font size in graphical browsers is 3. You can change the base font of your document to change this default. The base font tag is considered a singleton where it only requires one tag to implement. When a base font tag is used, all text under the declaration of the base font will be set to a size defined in the tag. This base font is ended when the browser has finished displaying all the text of the document on the screen or until a font change tag is encountered.

The tag is constructed with the tag <BASEFONT> and is placed in the header <HEAD>..</HEAD> of your document. This particular tag has only one attribute, SIZE. This attribute is required! Valid sizes range between 1 and 7. The complete syntax is then <BASEFONT SIZE="#"> where "#" is a valid number from 1 to 7. (1 is the smallest and 7 is the largest, in contrast to the way that the headers work with 1 being the largest and 6 being the smallest.)

<HTML>

</HEADER>

<BODY>

This is a test of basefont size 6.

</BODY>

</HTML>

Changing the Font

Once the base font for a document has been set, you can change the font anywhere within the document using the font tag. The font command is used very much the same way the base font tag. This command is most typically used within the body of your document to change the size of the font relative to the text which follows. The font tag consists of the following: <FONT SIZE="#"> where # is a valid number between 1 and 7 (7 being the largest.)

The following example sets a base font size then redefines the size within the body of the document:

<HTML>

<HEAD>

</HEAD>

<BODY>

This is the size of base font 4.<BR>

<FONT SIZE="6">Now we have changed the font to 6 using the font tag.</FONT><BR>

</BODY>

</HTML>

So far you have seen how the base font can be used to define the size of the document and the font tag can be used to define the font size within the document. You may be asking yourself, why bother with a base font size at all if you can just make use of the font tag? The interesting thing to note about the font tag is that it does not require an exact number in its size attribute. Instead of having to specify the exact size of the font, you can specify an offset from the base font. This offers a big advantage! If you made use of offsets for your sizing of your fonts and decided that you wanted to make all your fonts one size smaller, all you would have to do is change the base font size to one smaller. All the other fonts tags throughout the document would follow suit as they are relative to the base font. (Note: You do not necessarily need to define a base font to use the offsets with the font command as Netscape defines the default base font of 3.)

To make use of font offsets, you simply specify how much smaller or how much larger you want your font compared to the base font. This is defined using the same attribute as before, SIZE. For example, if you wanted your font to be one larger than the base, you would use SIZE="+1". One smaller would be SIZE="-1". If you wanted to return to your base font size you could use SIZE="+0". The following example is the same as the one before with only one difference: the font sizes are being adjusted relative to the size of the base font. The following code produces the same result as in the previous example.

<HTML>

<HEAD>

</HEAD>

<BODY>

This is the size of base font 4.<BR>

<FONT SIZE="+2">Now we have changed the font to 6 using the font tag.<BR></FONT>

</BODY>

</HTML>

Exercises:

Create a page which constructs a base font.

Change the font to three different sizes using the font tag with an explicit size.

Create another page which duplicates the page created in step 2. This time use offset size changes.

Changing Font Color

You can define the default font colors for different text within your document. This can be done with the BODY attribute. From within the BODY attribute, you can change the color of the normal text, links, and visited links. The colors defined within the BODY attribute are thought to be base colors, much like the base font size defined in the header of your document.

Attribute

Usage

Description

TEXT

TEXT="#000000"

Default text.

LINK

LINK="#000080"

Text used as an anchor (link).

VLINK

VLINK="#FF0000"

Text used as an anchor which has been accessed (visited link).

If you want to change the font color within your document, the FONT tag is used. The FONT tag has an attribute COLOR which can change the text.

<FONT COLOR="#FF0000">This is a different color.</FONT>

Note that the BASEFONT tag can also be used to set the default color of the document. This is the tag that was used earlier to set the default size of the font. The attributes with this work the same as with the others. Note that this tag takes precedence over the BODY attribute. If you have this tag defined in the header and attempt to change the color with the BODY, no change will take place.

Exercise

Create a document which uses the base font tag to change the default color of the text. Make the default a reddish color.

Apply font colors in the document. Choose a blue, green, and orange.

Use the body attributes to change the colors of the text. Create a hyperlink. Test in your browser. Notice that the color changes after the link is activated.

Changing Font Face

Not only can you set the font color and size, but you can also change the font itself. This is know as setting the font face. As with the font manipulation we have seen so far, the <FONT> tag is again used. When assigning a type, you use the attribute FACE.

From within the FACE attribute, a list of font names can be specified. The browser will go through each font defined in the FACE attribute until it finds one which exists on the system. If a font is available on the system, it will be used. If none are available, a default font will be used.

<FONT FACE="Arial,Times Roman, Courier">This text will be in either Arial, Times Roman, or Courier.</FONT>

When choosing a font face, try to stick to ones which are commonly installed in Windows. If you choose more common fonts, the likelihood that they will be on your users computer is greatly increased.

<HTML>

<HEAD>

</HEAD>

<BODY>

<FONT SIZE=7 FACE="Arial">This text is Arial.</FONT><BR>

<FONT SIZE=7 FACE="Times Roman">This text is Times Roman.</FONT><BR>

<FONT SIZE=7 FACE="Courier New">This text is Courier.</FONT><BR>

</BODY>

</HTML>

Exercise

Enter the example in this section and observe the results.

Check out the different fonts which are installed on your system. Apply three of those to some text within your document.

Try adding a font with a made up name to observe how the browser ignores fonts it does not recognize.

Adding Colors to Your Table

Tired of the bland colors which are used when creating a table? Internet Explorer supports a variety of different attributes which can be used to add colors to your tables. (Note that these are IE extensions and may be ignored by some browsers.)

Changing the background color for your table is as easy as changing the background color for your document. By adding a BGCOLOR attribute to the table tag, you can define the color you want to use. For example, if you wanted a green background for your table, you could use:

<TR>

<TD>Column 1 Row 1</TD>

<TD>Column 2 Row 1</TD>

<TD>Column 3 Row 1</TD>

</TR>

<TR>

<TD>Column 1 Row 2</TD>

<TD>Column 2 Row 2</TD>

<TD>Column 3 Row 2</TD>

</TR>

</TABLE>

The background color attribute (BGCOLOR) can also be applied to the table row <TR>, table header <TH>, and table data <TD> tags. Note that a table row will take precedence over settings in the table, and a header or data will take precedence over both the table or row. If you want to define a color for an entire row, place the BGCOLOR attribute in the row which you wish to change. If you want to change the color for a column, you must place the BGCOLOR attribute in each of the <TD> tags which make up the column.

In addition to the background color, you can change the color of the border. This is accomplished with three attributes: BORDERCOLOR, BORDERCOLORLIGHT, and BORDERCOLORDARK. Each of these attributes make up the border and give it the 3D look. These attributes are assigned an RGB code in the same fashion as the BGCOLOR attribute. Using a BORDERCOLOR will set both the dark and light attributes to be the same color. If you use BORDERCOLORLIGHT and BORDERCOLORDARK you can explicitly set the shadows.

<TR>

<TD>Column 1 Row 1</TD>

<TD>Column 2 Row 1</TD>

<TD>Column 3 Row 1</TD>

</TR>

</TABLE>

<TR>

<TD>Column 1 Row 1</TD>

<TD>Column 2 Row 1</TD>

<TD>Column 3 Row 1</TD>

</TR>

</TABLE>

Exercise

Create a table which has 3 rows and 4 columns.

Add borders to your table.

Change the table's background color to green.

Change the border color to black.

Change the dark border color to black, and the light border color to white.

Sound and Animation

So far you have most likely only used still graphics in your document. You can actually use other types of media. These include animation files and sound clips. Not all browsers will support the inline video and sound. Be careful to test your document in browsers which your users will most likely be using. This section does not cover animated GIFs as it is covered in a subsequent chapter.

This section will focus on:

Adding sound to your page

Inserting a video clip on your page

Adding a Scrolling Marquee

What was that? Adding Sound to Your Page

There are many types and formats of multimedia. One type, sound, is not normally directly supported by the web browser. Usually, a helper application is required in order to play the sound. This section will describe a way to add sound which is compatible for anyone who has a sound helper application. The other way is to make use of Microsoft's new extension to the HTML language to play sound inline. Although the playing of sound can be a powerful addition to your web page, be aware that not everyone will have the required hardware or helper applications set up.

Prior to Microsoft's extension to the HTML language, web page developers used what is called client pull to force the browser to pull in another file automatically. In order to take advantage of this, users require a browser which supports helper applications and client pull. Browsers such as Netscape Navigator, Mosaic 2.0, and Microsoft Internet Explorer 2.0 can be used in this fashion.

You can set up your document to automatically pull another document by using the <META> tag. This tag can be placed anywhere within the header of the document <HEAD>…</HEAD>.

<HEAD>

</HEAD>

In order to explain how this works, lets break this tag down. The first attribute HTTP-EQUIV=REFRESH instructs the browser to refresh the page. The second attribute CONTENT, and the most important, tells the browser how long to wait and what to send. The first part of content "30;" tells the server to wait 30 seconds before sending the next content. The URL tells the server which resource to send to the browser, in this case a sound file. The net result is 30 seconds after a page begins to load, a sound is played to the user.

You may be wondering, why wait at all? The answer is that the timer, in our example 30 seconds, starts as soon as the page starts loading. If we have a number of graphics on our page, the sound will begin playing prior to the completion of the graphics loading. This will ultimately interrupt the download of the graphics to the user. In order to compensate for the length of time it takes to load the graphics, you can instruct the server to wait a certain amount of time. If you want to calculate how much time you should leave, look at the content of your page. Typically your users will be using a minimum of a 14.4K modem. A 14.4K modem usually takes about 1 second to load 1K of information. If you have 10K of information (graphics), then your should allow at least 10 seconds prior to loading the sound. If is often a good idea to tack on a few seconds for a safety margin. Usually a 5% margin of error can be expected.

With Internet Explorer, adding sound does not require the communication to the server and is a natural extension to the HTML language. Sound can be added to a document with the <BGSOUND> tag, which can be placed anywhere inside the <BODY> section. Digitized sound format which are supported by this tag are .WAV, .AU, or MIDI music.

The sound file is referenced using the SRC attribute and is played as soon as the document is loaded. This is different from the previous method where the sound plays immediately.

You have the ability to replay the sound a number of times after it is loaded. With the LOOP attribute you can specify a particular number of loops or you can make your sound loop indefinitely. The format for this attribute is LOOP=# for a particular number of loops or LOOP=INFINITE for an indefinite number of loops.

Try to keep the sound file as small as possible. As with graphic files, the larger the resources, the longer it will take to load the document. This is especially a concern if your user has a slow Internet connection.

Exercise

Locate and download a sound file on the Internet. You can use www.search.com or your favorite web browser. Save the file on your disk.

Create a document which uses the sound file and test in your browser. You will require a browser which supports this tag in order for the test to function successfully.

Playing Inline Animation

One of the great Internet Explorer extensions is the ability to insert inline video easily into your document. This is accomplished through the use of our faithful <IMG> tag. The <IMG> tag, as part of an extension to Internet Explorer, has the ability to reference an animation file. Currently this extension only supports the AVI (audio video interleave) format. If you want to use animation files in other formats you will have to convert them to an AVI.

This is accomplished with an attribute DYNSRC (dynamic source). The DYNSRC is the same as the SRC attribute in that it is a qualified URL to a file. The <IMG> tag is placed in the HTML code where you want the inline video to appear. An example of loading a video called "video.avi" is shown here.

Not all browsers will support inline video. Knowing this, you should provide an alternative to the video the same way as you provide a text alternative to a graphic. This is accomplished by placing the DYNSRC and SRC attributes within the tag. Internet explorer will look to the DYNSRC first when deciding on what file to open. Other browsers, which do not support the DYNSRC attribute, will ignore it and load the still image referenced by SRC. The still image is typically a frame of the video clip.

You can control how the video plays with a few additional attributes. One such attribute, LOOP, allows you to control the number of times the video loops. With the LOOP attribute you can specify a particular number of loops or you can make your video loop indefinitely. The format for this attribute is LOOP=# for a particular number of loops or LOOP=INFINITE for an indefinite number of loops.

In addition to controlling the number of loops, you can also control when the video is to begin playing. The START attribute can dictate that the video should start once the HTML document is opened, START=FILEOPEN, or when the mouse pointer passes over the video image, START=MOUSEOVER.

START=FILEOPEN and START=MOUSEOVER can be used together:

This example plays the AVI when the page is loaded. Subsequent playing of the AVI is triggered when the user moves their mouse pointer over the embedded AVI.

You can create your own AVI files or obtain existing files from the Internet. The following is an example of a clock video which is provided as an example with Windows NT 4.

So far you have seen how you can control the video playback to the user. In addition you can give the user control! You can give the user the ability to playback, pause, fast forward, or rewind your video. To do this, simply add an additional attribute CONTROLS to the <IMG> tag.

By adding the attribute CONTROLS, the user will get controls similar to the ones shown below:

As a final note, similar to the sound files, try to keep the AVI files as small as possible. These files, like large graphic files, can take a while to load for a user who has a slower connection.

Exercise

Locate an AVI file on the Internet. You can use www.search.com or your favorite web browser.

Insert the AVI into a web page.

Experiment with the looping attributes.

Place two AVI files onto your page. One which activates upon page load and the other which waits for the user's cursor to pass over it.

Add controls to the inline image and experiment.

Extra… Extra… Scrolling Marquee…

Have you ever wanted to include an electronic billboard in your document? Now it is possible by using a simple Internet Explorer extension to HTML. Internet Explorer provides a tag which allows you to create a message which can be scrolled across your users screen. The <MARQUEE> tag is placed in the document where you want the marquee to occur. Text which is used as the marquee is placed between <MARQUEE> and </MARQUEE>.

<MARQUEE>Extra! Extra! Read All About It!</MARQUEE>

Now that you have a marquee in your page, it's time to spice it up!

Controlling the Scroll

By default, the text of marquee will scroll from right to left. You can reverse the direction by using the DIRECTION attribute. By placing DIRECTION=RIGHT in your marquee tag, text will scroll from the left to the right.

<MARQUEE DIRECTION=RIGHT>Extra! Extra! Read All About It!</MARQUEE>

The type of scrolling action can also be modified. Using the BEHAVIOR attribute will allow you to change the way the text is scrolled. The default is SCROLL which moves from one side to the other then repeats. By using BEHAVIOR=SLIDE you can start the text from one side, slide in, and stop the text at the other margin. When using BEHAVIOR=ALTERNATE you can have the text bounce from side to side from within the marquee.

<MARQUEE BEHAVIOR=SLIDE>This marquee will scroll in and "stick."</MARQUEE>

<MARQUEE BEHAVIOR=ALTERNATE>This text will bounce back and forth.</MARQUEE>

If you want to define the number of times a marquee will loop, you can do so with the LOOP attribute. When no LOOP attribute is specified, the marquee is scrolled indefinitely the same as if you had specified LOOP=INFINITE. If you specify a number, LOOP=n, the marquee will loop "n" times.

<MARQUEE LOOP=4>This marquee will loop four times.</MARQUEE>

Two other attributes allow you to specify the speed of the marquee. The first attribute, SCROLLAMOUNT, specifies the number of pixels between each successive draw of the marquee text. The second, SCROLLDELAY, specifies the number of milliseconds between each successive draw of the marquee text. By using these two in combination, you can produce fast marquees or slower marquees.

<MARQUEE SCROLLDELAY=5 SCROLLAMOUNT=50>Very fast marquee.</MARQUEE>

<MARQUEE SCROLLDELAY=100 SCROLLAMOUNT=1>Very slow marquee.</MARQUEE>

Exercise

Create a document which contains a "welcome" scrolling marquee.

Change the behavior of the marquee and the direction.

Test in your browser.

Set a finite number of loops.

Create two additional marquees which demonstrate a slow marquee and a fast marquee.

Test in your browser.

Changing the Color

The color of the marquee can be changed in the same fashion as changing the background color of a document or table. The BGCOLOR attribute can be used to specify the background color for the marquee. The format is BGCOLOR="#rrggbb" as with the BODY tag.

<MARQUEE BGCOLOR=#00FF00>This marquee has a green background!</MARQUEE>

If you want to change the color of the text, you can embed the MARQUEE within a FONT tag.

<MARQUEE BGCOLOR=#00FFFF>This is a scrolling marquee.</MARQUEE>

</FONT>

In addition to color, remember that the FONT tag can also be used to change the size of the font. By using <FONT SIZE=n> you can create marquee with larger text.

<MARQUEE BGCOLOR=#00FFFF>This is a scrolling marquee.</MARQUEE>

</FONT>

Exercise

Create a document which has a marquee that has a black background and white text.

Change the size of the marquee text to 7.

Test in your browser.

Experiment with a few other color combinations and sizes.

Changing the Size

The height and width of your marquee can be set using the HEIGHT and WIDTH attributes. Each attribute follows can be specified by an exact number "=n" or can be specified by a percentage of the screen "=n%". You can specify either attribute or both for a given marquee.

<MARQUEE WIDTH=20 BGCOLOR="#FFFFFF">Width Marquee!</MARQUEE>

<BR>

<MARQUEE HEIGHT=20 BGCOLOR="#FFFFFF">Height Marquee!</MARQUEE>

<BR>

<MARQUEE WIDTH=20 HEIGHT=20 BGCOLOR="#FFFFFF">Width and Height!</MARQUEE>

Alignment of Text

When adding images to your document, you have the ability to tell the browser how you want the text to be positioned next to the image. You can do the same with the marquee if you specify a width for the marquee. The attribute ALIGN can be used to instruct the browser to place text at the TOP, MIDDLE, or BOTTOM. By default, text is placed at the bottom next to the marquee.

This is a scrolling marquee.

</MARQUEE>

</FONT>

Text aligned to the top<BR>

This is a scrolling marquee.

</MARQUEE>

</FONT>

Text aligned to the middle<BR>

This is a scrolling marquee.

</MARQUEE>

</FONT>

Text aligned to the bottom<BR>

In addition to adding an alignment, you have the added ability to ensure a certain amount of space around your marquee is preserved. By using the HSPACE and VSPACE attributes you can specify how much space (in pixels) from the left and right or bottom and top you want.

<MARQUEE HSPACE=10 VSPACE=10>This marquee will be separated from the surrounding text by a 10-pixel border.</MARQUEE>

Exercise

Create a document which demonstrates the alignment of the text next to the marquee. The marquee should use the default font size with a specified height of 40.

Create a marquee which does the same alignment as step one. This marquee will not have a specified height and will use a font size of 6.

Test in your browser.

Utilizing Forms

In most cases you will be presenting information to your user. However, there are times when you may want to gather information from your user. For example, if you have a mailing list, you may want a page where your user can input their name and address. You may want to set up a page which is an order form that allows users to buy directly from your web page. You may have a database or data store and the user has to submit queries to obtain information from your database. And the list goes on!

By using forms, you can allow the user to supply information in a variety of different ways. The various controls which can be used in a form allow the user to enter passwords, choose from lists, or enter free form text allow the user to enter information in an easy to use, natural manner.

Of course, forms are only the front end mechanism for allowing the user to input the information. Programs, known as CGI, must be set up to handle the requests sent in by the user. Although this section will touch on CGI, CGI is beyond the scope of this manual and is discussed in high level terms only.

This section will focus on:

What is a form?

Defining a form

Form Submission

Using a test server to test submitted data

What type of controls can be placed on a form?

Using CGI

What is a Form?

Web forms facilitate the collection of information from the user of the Web page. This information can be either information used by the author of the site, or can be used by the user to more request more specific information from the Web server.

No matter what application, the use of forms usually consists of five steps:

In a Web page, tags will be included which set up the form in order to solicit information from your users.

When the user has completed the form, the user can send their information to the server.

The program on the server will accept the input information and decode the contents.

The program will process the decoded information. This process could include an endless number of actions including writing information to the database, triggering some other event in the system, or creating a web page to send back to the user. Typically, a Web page is sent back to the user no matter what the operation.

The custom Web page is sent back to the user containing additional information or notice that the results were received.

Step three and four are handled by either a script or program written in Perl (a common scripting language) or another language such as C. These programs can be programmed to manipulate text, files, and other information.

The form tags in step one are not difficult to code. For the most part, these tags are constructed in the same way as other HTML tags. The difficulty in forms usually lies in creating the programs used to process user information. The CGI, or Common Gateway Interface, is used as a means to define the communication of information between a client machine and the server. This book does not cover CGI, but does recommend places where you can find example CGI code which you can use directly for your own use.

Defining a Form

The tag <FORM> specifies that the document contains a form. More specifically, the <FORM> tag identifies where the form is to start in the document. The form tag must surround all the other form tags contained within the form. Therefore, a closing </FORM> is required to denote the end of the form.

The <FORM> tag has two important attributes: the METHOD and the ACTION.

The METHOD attribute specifies how information is transferred to the Web server. The two choices for the method of transfer are POST and GET. The difference between POST and GET are that the POST method instructs the server to process the form line by line whereas the GET method instructs the server to process the entire form at once.

Note that most Internet Service Providers recommend that you use the POST method on their server. As the GET method passes an entire string of concatenated values, you run the risk of having the forms contents truncated by hard coded shell command argument lengths. With the POST method, the chance of any given line being longer than the argument length is next to nil. Note that with some browsers and servers the METHOD is defaulted to GET so it is usually best to explicitly define the type of METHOD you wish.

The ACTION attribute tells the server how to process the data in the form by defining the URL of the program on the Web server which will process the user's data. Usually if this attribute is absent, the current document URL is used.

More than one form can be placed within an HTML document. This is done by including more than one set of opening and closing <FORM> tags within the document. Note that although you can include more than one form in a document, you cannot nest forms.

Form Submission

Once the user has input all the information on the form, the user presses the "Submit" button. This button instructs the browser to package up the information and send the information to the server in the form dictated by the <FORM> attribute. This section is included prior to describing the other form commands as this assists us in debugging the form.

METHOD=GET

As was described earlier in the previous section, the contents of the form are assembled into a query which concatenates the values of the fields in the form. The query URL, once assembled, will resemble:

action?name=value&name=value&name=value

From this example, you can see that the GET actually concatenates the values contained within the form. The "action" is the URL which is specified by the ACTION attribute of the FORM tag.

As you will soon see, the name represents the name of the field which the user entered information and the value represents the value entered. During testing of your forms you will find that text fields and password fields are shown directly as the value. If the user left the field blank, the field will still be included as part of the query string will be empty "name=". Check boxes and radio buttons rely on attributes contained within their tags. The VALUE attribute will specify the value included within the query if the box is checked. Otherwise, the field is dropped from the query string. With radio buttons, buttons are grouped using the same NAME but different VALUEs. The value which is included with the query string will be the VALUE of the radio which is selected.

METHOD=POST

With POST, the contents of the form are encoded in the same fashion as with the GET method. However, rather than sending then with the URL specified in the forms ACTION attribute, the contents of the form are sent as a data block as part of the POST operation. The data block is then sent to the URL which the data block is being POSTed.

Submit and Reset

Two very common buttons that you will find on most forms are the "Submit" button and the "Reset" button. As was noted at the beginning of this section, the "Submit" button is pressed by the user when they have entered all the information on the form. Pressing the "Submit" button instructs the browser to package all the information on the form and send it to the server. The "Submit" button is created by the tag <INPUT>. The <INPUT> tag can be used for a variety of different user input as you will see later in the chapter. For our purposes, we want to instruct the browser to create a "Submit" button. We can do this by providing INPUT a TYPE=SUBMIT attribute. Typically this button is placed near the bottom of the form. Note that this button is required. If you do not include this button, your form will be useless as your user has no means to instruct the browser to send information to the server for processing.

</FORM>

The "Reset" button is used to clear all fields in the form or return them to the default values defined by each control tag. Although the "Reset" button is not required like the "Submit" button, it is generally a good idea to provide your user a means to reset the form to its initial state. The "Reset" button is created using the INPUT tag with a TYPE=RESET. As with "Submit", "Reset" is generally placed at the bottom of the form.

</FORM>

The following is an example of using both the "Submit" and "Reset" buttons:

</FORM>

Note that in this example, the buttons are placed next to one another. You can control the placement of buttons by using the <BR> and <P> tags to advance lines.

You can also change the text which appears within the button. This is done by using the attribute VALUE. For example, if you can change the text of the button to read "Submit Query" by adding a VALUE="Submit Query" to the INPUT tag. You can also change the text within the "Reset" button through the same means.

<P>

</FORM>

Exercise

Create a document which contains a form. The first form you create will should contain both the SUBMIT and RESET buttons.

Change the label of the buttons.

Load the document into the browser. Do not be concerned yet with the "url" ACTION. We will experiment with some test servers in the next section.

Using a Test Server

Using a test server, or creating your own test programs on your server, is useful as you can easily determine exactly what is being sent to the server. The NCSA HTTPd Development Team operates a server, Hoohoo, which is used to test and demonstrate the latest versions of NCSA HTTPd. You can also make use of this server to test your forms.

If you write a fill out form, you can test what was submitted by using the following POST or GET methods:

METHOD="POST"

ACTION="http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query"

METHOD="GET"

ACTION="http://hoohoo.ncsa.uiuc.edu/cgi-bin/query"

The results of what was submitted will appear with name/value pairs decoded and itemized.

An important thing to reiterate from earlier in the chapter is that the GET method often passes all the concatenated in a single query. This will often cause problems at the server end as warned by NCSA HTTPd Development Team.

Important note: If you use the GET method in your form, you will notice that the example GET server will choke if too much data (more than a couple hundred bytes) is submitted at a time -- the server is passing the data to the form-processing module via a shell command line, and the maximum shell command line length is being exceeded. This problem does not exist with the POST method and server.

Exercise

Revise the FORM tag to have the appropriate URL for the METHOD you are using.

Load the page into the browser and test the SUBMIT button. You should notice that no results are passed as there are no user input fields.

Form Controls and Characteristics

There are a variety of different controls which can be used on your form. Each of these controls will suit a particular purpose. If you want to obtain a line of text, perhaps a text entry is appropriate. If you want the user to "check" particular items on your form check boxes may be suitable. Allowing your user to pick from a list can be performed by using a list box or a combo box. There are a variety of other controls and combinations which will best suit your needs.

Text Entry Fields

The first type of control is a text entry field. This is created by using the <INPUT> tag. You have already seen how this tag creates your SUBMIT and RESET buttons. If you do not specify a TYPE, then a text field is assumed by default.

One of the simplest forms you could have consists of a single text entry field. Because the form only contains a single text entry field, the query can be submitted by pressing the SUBMIT button or by hitting the Enter key on the keyboard. Also note that the NAME attribute is not required since there are no other text entry fields on the form. (It is recommended that fields always be named for future maintenance of the form.)

Text Entry Field: <INPUT NAME="entry">

<P>

<P>

</FORM>

If you decide to have more than one text field on a form, you must give a distinct name to each field with the NAME attribute.

Text Entry Field One: <INPUT NAME="entry1"> <P>

Text Entry Field Two: <INPUT NAME="entry2"> <P>

</FORM>

If the user had entered "Test" in the first field and "Me" in the second field, the data block would look like

?entry1=Test&entry2=Me

when the query is submitted. If nothing is entered into any of the fields then the "name=value" is still submitted, but without a value. For example, if "Test" is in the first field and nothing in the second then the data block will resemble:

?entry1=Test&entry2=

Exercise

Create a form which is used to obtain the user's address from them using text fields. Include the user's name, address, city, province/state, country, postal/zip code, and contact number.

Each field should be appropriately named.

Load the document into the browser and submit the results to the test server to test the form.

Changing the Characteristics of Your Text Entry Fields

So far you have used the text fields using the default characteristics of a text field. You can however change the size of the text field to display more text on the screen.

Then default text field displays 20 characters of text on the screen. You can change the size of the text field with the attribute SIZE. For example, if you wanted to double the size of your default text field, use the attribute SIZE=40.

Note that the default size and sizes defined by the attribute SIZE do not affect the amount of text which can be entered. They only dictate how much text the user can see at a given time. If you wanted to restrict the number of characters the user can enter, then you can use the attribute MAXLENGTH. For example, if you wanted to restrict the number of characters the user could enter to 2, then MAXLENGTH=2 can be used. If MAXLENGTH is not present, the default will be unlimited. Although not required, typically you change the SIZE to match the MAXLENGTH. The text entry field is assumed to scroll appropriately if MAXLENGTH is greater than SIZE.

The following example shows the comparison of the three types. Notice when testing the maximum length type that when the user hits the maximum length no further text can be entered and the user is audibly notified.

Default edit box: <INPUT NAME="entry1">

<P>

Edit box 40 char long: <INPUT SIZE=40 NAME="entry2">

<P>

Edit box with a max length and size of 2: <INPUT SIZE=2 MAXLENGTH=2 NAME="entry3">

<P>

<P>

</FORM>

Exercise

Revise your form containing the user information to change the lengths of the fields to sizes which are appropriate to the data which is being entered.

Change the maximum length of the fields where appropriate.

Test the form in your browser.

Applying Default Values

There are times when you may want to include default values for the text fields which are displayed to your user. This will give them the opportunity to either accept your default or change the text to something which they want to enter.

This is done by using the VALUE attribute contained within the INPUT tag. You will remember this attribute when we used it with the types "Submit" and "Reset" to change the label on the button. The VALUE attribute is used in the same fashion with a text edit field: VALUE="Default Value".

The following example shows two fields: the first with a default and the second without a default.

Text entry with default: <INPUT NAME="entry1" VALUE="the default"> <P>

Text entry with no: <INPUT NAME="entry2"> <P>

</FORM>

Exercise

Revise your form containing the user information and add defaults where appropriate.

Test the form in your browser. Notice that default values are submitted.

File Attachments

If you want to specify the name of a file, you can include a file attachment field. This is done by the attribute TYPE=FILE. The user will be given a edit box where they can enter the name of the file. Additionally, the user can specify the name using the Browse button. Currently this is only supported by Netscape. The size of the field can be controlled with the SIZE attribute as with normal text fields.

File: <INPUT TYPE=FILE NAME="entry">

<P>

<P>

</FORM>

Exercise

Create a form using a file attachment field.

Test the field in your browser. If you are using Netscape, try using the Browse ability.

Submit to the server and you will notice that the name of the file is submitted.

Check Boxes

Checkbox fields allow the user to select or deselect options on a form. Checkbox fields represent boolean values where they are either "on" or "off". Although checkboxes are often grouped near one another on a form, checkboxes are independent of other checkbox controls. Any number of checkboxes can be on or off at any time. A checkbox consists of the square box control and a label which indicates the choice by selecting the button.

Checkbox fields are created using the <INPUT> tag with a TYPE=CHECKBOX. As with other controls, a checkbox is named by using the NAME attribute. The label which indicates the choice immediately follows the INPUT tag.

<INPUT TYPE=CHECKBOX> NAME="check1">Check 1

If you wish to have the control follow the label, you can simply place the label text immediately before the INPUT tag.

Check 1<INPUT TYPE=CHECKBOX> NAME="check1">

When the query is constructed, checkboxes which are off are ignored completely and checkboxes which are checked (on) are given the value of "on" by default. If you wish to specify the value of a checkbox which is checked, you can do so with the VALUE attribute.

<INPUT TYPE=CHECKBOX> NAME="check1" VALUE="checked">Check 1

When the server receives the query, a checkbox is interpreted in much the same way as a text entry field. The result is a variable NAME with a VALUE.

The example which follows shows three checkboxes side by side.

Check all that apply:

<P>

<INPUT TYPE=CHECKBOX NAME="check1">Check 1

<INPUT TYPE=CHECKBOX NAME="check2">Check 2

<INPUT TYPE=CHECKBOX NAME="check3">Check 3

<P>

<P>

</FORM>

If you wanted the checkboxes to appear on different lines, you can include line breaks to drop the next control to the next line.

Check all that apply:

<P>

<INPUT TYPE=CHECKBOX NAME="check1">Check 1<BR>

<INPUT TYPE=CHECKBOX NAME="check2">Check 2<BR>

<INPUT TYPE=CHECKBOX NAME="check3">Check 3<BR>

By default, checkboxes are off when a form is first loaded. You initialize the fields to be checked by setting the attribute CHECKED in the INPUT tag for the checkbox.

<INPUT TYPE=CHECKBOX NAME="check1" CHECKED>Check 1

Remember that the reset button will reset all elements to their default states. If the user pressed "Reset" then all check boxes will be returned to their original "checked" or "unchecked" states. If you have a form which has no default values, you may want to consider naming your reset button to something like "Clear" or "Clear Form".

Exercise

Create a form which allows the user to choose what they would like to have on their sandwich.

On the form, include check boxes which are defaulted to "on" and are defaulted to "off"

Test in your browser.

Submit to the server and observe which fields are submitted.

Radio Buttons

The radio button control is identified by a round button and a label indicating the choice if the user selects that button. A radio button is one of several other radio buttons on the form which allow the user to select one from the group. In contrast to checkboxes, radio buttons are mutually exclusive. This means that only one radio button out of a group of related radio buttons can be selected.

To insert a radio group into your form, use the <INPUT> tag with an attribute TYPE=RADIO.

The radio control is named in the same fashion as the checkbox control using the NAME attribute. The difference with radio buttons is that all radio buttons within the group have the same name. The VALUE attribute of a radio control is the value of the control when it is selected. In the example which follows, if the second button is selected then a value of "item2" is packaged in the query and sent to the server. Note that radio buttons have the same default as checkboxes, "on", when they are selected. This of course is meaningless in with this control so you should change the value of each button. The label which is used to identify the button to the user immediately follows or is in front of the INPUT tag.

<INPUT NAME="group" TYPE=RADIO VALUE="item1">Item 1

<INPUT NAME="group" TYPE=RADIO VALUE="item2">Item 2

<INPUT NAME="group" TYPE=RADIO VALUE="item3">Item 3

<INPUT NAME="group" TYPE=RADIO VALUE="item4">Item 4

By default, no radio controls are selected when the form loads. All controls are "off". The nature of a radio control indicates that at least one control in the group must be selected. Therefore, you should also specify one radio control to be "checked". This is done in the same fashion as the checkbox with the CHECKED attribute. This is demonstrated in the example following. You will also notice that radio controls do not need to be immediately following one another; you can have various formatting tags between them.

Payment Method:<P>

<INPUT TYPE="radio" NAME="paymethod" VALUE="check"> Check.<BR>

Credit card:<BR>

<INPUT TYPE="radio" NAME="paymethod" VALUE="mastercard"> Mastercard.<BR>

</BLOCKQUOTE><P>

</FORM>

On a form, you can have radio controls within a group. You can also have multiple groupings of radio controls on the same form. Keeping your user in mind, try to avoid mixing controls of different groupings. Attempting to keep things obvious for the user will prevent confusion.

Exercise

Create a form which includes a radio control.

Try placing two unique radio control groupings on the form.

Test in your browser.

Submit to the server and observe which fields are submitted.

Password Entry Fields

Password entry fields are useful if you want to obtain information from the user which is sensitive. This type of sensitive information can be submitted as typed, but cannot be seen on the screen while it is being typed.

Password fields are added to a form using the INPUT tag with and attribute TYPE=PASSWORD. The password field can be named in the same fashion as a text field with the NAME attribute.

Password fields act in much the same behavior as text fields. However, the password entry field hides the text which is entered by the user by replacing entered text with asterisks "******".

In addition to the text being hidden, the password field has a few other differences from a normal text field. The length of the field, dictated by the SIZE attribute, is the maximum length the user can enter for their password. For example, if the SIZE is set to 20, then a maximum of 20 characters can be entered into the password. The MAXLENGTH attribute can also be used to define the maximum length of the password. A MAXLENGTH=20 will prevent the user from entering a password greater than 20 characters.

Password: <INPUT TYPE=PASSWORD NAME="password" MAXLENGTH=20 SIZE=20>

MAXLENGTH and SIZE may act differently with different browsers. For example, although scrolling is supposed to occur for password entry fields which have a MAXLENGTH greater than SIZE, the password is actually limited by the SIZE. The reverse is not the same. If a SIZE is greater than the MAXLENGTH, the MAXLENGTH will dictate the limit. Basically, the limit is defined by the smaller of the two. This should be tested on browsers which you expect the users will be using. If you are unsure, it is safest to use MAXLENGTH and SIZE as the same value.

Please log in.

<P>

Username: <INPUT NAME="username">

<P>

Password: <INPUT TYPE=PASSWORD NAME="password" MAXLENGTH=20 SIZE=20>

<P>

<P>

</FORM>

When the user enters text into the password field, you will notice that text which is entered appears as asterisks on the screen.

Exercise

Create a logon form as in the example.

Create a password which is restricted to 10 characters and a username which is restricted to 20 characters.

Change the labels of the "Submit" and "Reset" buttons.

Test in your browser.

Submit to the server and observe which fields are submitted. You will notice that the password is sent as clear text to the server.

Combo Boxes (Option Menus)

A combo box combines two controls: a list of items and a static edit control displaying the currently selected item in the list. The list box portion of the control may be displayed or hidden by selecting the drop down arrow next to the control.

Closed state

Opened state

The selection list is created in much the same way as an unordered list. The beginning of the selection list is denoted with the <SELECT> tag and the end of the list with the </SELECT> tag. Options which the user can choose from are placed between the <SELECT> and </SELECT> tag and are preceded with the <OPTION> tag. The name of the list is defined by the NAME attribute placed in the <SELECT> tag.

What is your primary language?

<OPTION>English

<OPTION>French

<OPTION>German

<OPTION>Spanish

<OPTION>Japanese

</SELECT>

<P>

<P>

</FORM>

The default option is the first OPTION that appears between the <SELECT> … </SELECT> tags. If you want to set the default to be another option, you do not have to move the option to the top of the list. You can set any option to be the default by using the attribute SELECTED with the option tag. The selected option in the list and displayed in the static text field will be whichever OPTION tag has the SELECTED attribute. In the example below, French is the default language.

What is your primary language?

<OPTION>English

<OPTION SELECTED>French

<OPTION>German

<OPTION>Spanish

<OPTION>Japanese

</SELECT>

<P>

<P>

</FORM>

Exercise

Revise your user information form from earlier in the chapter to include a language field.

Include at least one other field which demonstrates the use of this type of control. For example, annual household income ranges.

Test in your browser.

Submit to the server and observe what is submitted.

Selection List Boxes

Much like a combo box, a list box is a control which contains a list of items which the user can choose. However, the list box does not have a static text field which displays the current selected item. The list box always remains visible and is never hidden.

The same tags which are used to create the combo box are used to create the list box: <OPTION> tags for each item in the list are surrounded by the opening <SELECT> tag and closing </SELECT> tag. The list box is named in the same fashion with the NAME attribute. This name must be set as it is used to put together the query string for the submitted form. What differentiates a combo box from the list box is defining the size of the list. The SIZE attribute is used to define the size of the list on screen. For example, if you wanted to have a list which displayed 5 items on the screen at any given time, use SIZE=5.

<SELECT NAME="primlang" SIZE=5>

<OPTION>English

<OPTION SELECTED>French

<OPTION>German

<OPTION>Spanish

<OPTION>Japanese

</SELECT>

You will notice from the three earlier examples that the SELECTED attribute can also be applied to the list box in order to set a default selected item.

If the number of items is less than the defined size for the list box then the list box will have empty space at the bottom.

<SELECT NAME="primlang" SIZE=10>

<OPTION>English

<OPTION SELECTED>French

<OPTION>German

<OPTION>Spanish

<OPTION>Japanese

</SELECT>

If the number of items is greater than the defined size for the list box then the list box will allow the user to scroll between available items.

<SELECT NAME="primlang" SIZE=5>

<OPTION>English

<OPTION SELECTED>French

<OPTION>German

<OPTION>Spanish

<OPTION>Japanese

<OPTION>Russian

<OPTION>Chinese

<OPTION>Punjabi

</SELECT>

If a SIZE is defined to be 1, then the list will be drawn as a combo box.

So far we the lists we have created could have either been in the form of a combo box or a list box. The only advantage really offered so far was the ability to see more options when the control is not active. Another advantage to using list boxes is the ability to allow the user to select multiple items from the list. This is done by adding the attribute MULTIPLE to the SELECT tag.

Note that the MULTIPLE attribute will always force the list to be drawn as a list box, even if no SIZE is defined. If the MULTIPLE attribute is set for the list, note that the SELECTED attribute can be applied to more than one list.

What is your favorite color?

<OPTION>Red

<OPTION SELECTED>Green

<OPTION>Blue

<OPTION>Purple

<OPTION>Mauve

<OPTION>Black

<OPTION SELECTED>White

<OPTION>Yellow

<OPTION>Orange

<OPTION>Indigo

<OPTION SELECTED>Violet

<OPTION>Don't have one

</SELECT><P>

</FORM>

Exercise

Create a form which presents two list boxes to the user. The first list box should ask them what computer languages they have used before. The other list box asks them what type of computer system they are currently working on. Revise your user information form from earlier in the chapter to include a language field.

Use the MULTIPLE attribute where appropriate. Practice resizing the list box.

Test in your browser.

Submit to the server and observe what is submitted.

Multiline Freeform Text

This control allows the user to enter text which may occupy more than one entry line. As with the selection boxes, the free form text field uses a different tag to create the control. The control is created with the tag <TEXTAREA> and is closed with </TEXTAREA>. As with other controls, the TEXTAREA control must be named. This is done with the NAME attribute.

The TEXTAREA tag displays several rows of input up to the number of rows specified by the attribute ROWS. For example, "ROWS=4" specifies 4 rows of input for the control (vertical height in characters). The number of columns can also be set in the same fashion with the attribute COLS (horizontal width in characters). Any amount of text can be entered into the TEXTAREA field. The control automatically has scrollbars and once the number of rows is passed, the scrollbars are activated.

If you wanted to provide default text in the TEXTAREA control, place text between the opening and closing TEXTAREA tags.

Default text

is placed between the tags.

</TEXTAREA>

The contents of the TEXTAREA tag must be straight ASCII text. Note that carriage return line feeds are used from the HTML. In the above example, you will notice that there is a blank line at the top and the text occupies two lines.

You can include multiple multiline text input controls to solicit information from your user.

Comments And Feedback Always Welcome

<P>

Positive Comments:

<P>

<P>

Negative Comments:

<P>

<P>

</FORM>

Exercise

Create a web page which is used as a feedback page for you web site. Include multiline text fields and two other types of controls in the form.

Test in your browser.

Submit to the server and observe what is submitted.

Hidden Elements

Hidden elements can be used to pass information to the server without the information being displayed on the form. For example, you may use the same script to process various different forms. You can use the hidden element to tell the server which form is being submitted.

Hidden elements are created by using the INPUT tag with a TYPE=HIDDEN. The NAME attribute is used to name the element and the VALUE is the information which is assigned to the element.

</FORM>

Remember that hidden elements are not necessary secret from your user. The user can view your source at any time through most browsers by selecting a "View Document Source" option.

Exercise

Enter the form shown in the example.

Test in your browser. You will notice that the hidden elements are not displayed.

Submit to the server and observe what is submitted.

CGI

Introducing CGI

So far this chapter has introduced you to the controls used to solicit information from the user. You will recall from the beginning of the chapter that setting up the form and creating the means for the user to submit the form only accounts for the first two steps.

The first two steps are performed on the client machine (browser). The last three steps are performed on the server. Parsing the user input and parsing the information is performed by what are called CGI programs or scripts. CGI (common gateway interface) scripts are designed to process data submitted by the form.

Note that CGI is not a language. CGI is a protocol that can be used to communicate between Web forms and the program on the server. A CGI program can be written in any language that can read the input stream (STDIN), write to the output stream (STDOUT), and read environment variables.

A CGI script can be written in a variety of different languages. The most common are perl, C/C++, and Visual Basic.

C/C++

Fortran

PERL

Any Unix shell

Visual Basic

AppleScript

If a programming language such as C++ or Visual Basic is used, the program must be compiled before it can run. Programs such as perl or Unix shell are interpreted. Interpreted programs are read one line at a time and used by the computer to execute instructions. Compiled programs are already converted to separate machine instructions (binary). Therefore CGI written with a language which is compiled is typically referred to as a program. CGI written with an interpretive language is referred to as a script. You will find that many people will use the terms program and script interchangeably.

The type of language you choose depends on the type of server you are running your programs on and what you are trying to accomplish. It also depends on what you have available. Obviously you're not going to use AppleScript in a Unix environment.

What you will find in many cases is that you do not need to do any hard core CGI programming work. You will find it simpler, quicker, and less bug prone to find a good library and use the functions which it provides. These libraries are available in most, if not all, of the languages mentioned earlier. This will in essence allow you to focus on how the information is going to be processed and what information is going to be sent back to the user rather than the finicky details of CGI.

Included in this section are some references to useful scripting libraries which assist in parsing the input and creating web pages to send back to the user. Creating dynamic pages which contain forms is also made easy through the use of some of these libraries.

If you want to find out more about CGI in general, there is a number of links at:

http://www.yahoo.com/computers_and_internet/internet/world_wide_web/cgi___common_gateway_interface/index.html

Environment Variables

When a CGI script is executed on the Web server, environment variables are set. Each of these environment variables are available for use. Three of the most commonly used variables are:

QUERY_STRING

When a form is submitted with the GET method, the QUERY_STRING is used to hold the parameters which are passed. These parameters, whose structure was explained earlier in the chapter, must be parsed in order to be used.

CONTENT_LENGTH

When a form is submitted with the POST method, the CONTENT_LENGTH informs the server how much information must be read from the input buffer.

REQUEST_METHOD

How was the form submitted? POST or GET?

Using these environment variables you can determine how a request was made and how to obtain the information. For example, if the REQUEST_METHOD is GET then you know to read and parse the QUERY_STRING. If the REQUEST_METHOD is POST then you must read CONTENT_LENGTH bytes from the input stream. A complete listing of environment variables can be found in Appendix B.

Input Streams

When a form is submitted, the CGI program receives the form information as a set of name=value pairs. This set of name=value pairs are given as one long string which needs to be parsed. You can choose to write your own parser or you can use an existing one from a library. (I recommend finding a good library!)

You will remember that the format of the string is:

name1=value1&name2=value2&name3=value3

This string is encoded to separate each of the name/value pairs and is also encoded to remove ambiguity with spaces and symbols. The parsing routine which you write or obtain must perform a series of steps:

Split all the name=value pairs which are separated by "&".

Split the name and value as separated by "=".

Convert all "+" signs to spaces.

Convert all "%xx" sequences to the character whose ascii value equals "xx".

Input can be received either through the QUERY_STRING for GETs or can be obtained from STDIN (standard input stream) for POSTs.

Output Streams

CGI output is performed by sending output to the STDOUT. When you want to send a response back to the user, the first line to the STDOUT should be:

Content-Type: text/html

followed by an additional blank line. All the information which is sent to STDOUT after this point is the information contained within the HTML page to be sent to the user.

Content-Type is the type of document which is being returned. Content-Type is one of three server directives which can be included in a header. The other two, Location and Status, are not as common as the Content-Type.

The Location is used to specify to the server that a reference to a document will be returned rather than an actual document. URLs assigned to a location will be redirected just as if the user had selected that URL. Text can be sent back as if the user had requested the text file. Location can also be used to reference other Internet resources such as gopher.

Location: /path/document.txt -return the doc.txt document from the server.

Location: gopher://gopher.ncsa.uiuc.edu/ -refer user to gopher server.

The final directive, Status, is used to give the server an HTTP/1.0 status line to send to the client. The format is nnn xxxxx, where nnn is the 3-digit status code, and xxxxx is the reason string, such as "Forbidden".

Perl CGI Scripts

Perl is a popular CGI language as it can be run on many different platforms. You will also find that perl for the most part is not machine specific; the code written on one platform can be converted to other platforms. Perl is a scripted language which is interpreted at the time it is run. In contrast, software running on your computer, such as your browser, is called a compiled program: it has already been converted into machine instructions. However, perl is optimized for scanning text files, extracting information, and printing reports: many of the functions necessary to parse and create web pages. Anyone with a programming background can pick up perl quite quicky as it has many of the features common to languages.

If you want to know more about perl, you can visit the perl site at:

http://perl.com/perl/index.html

The latest release of perl can be obtained from the Comprehensive Perl Archive Network (CPAN):

http://perl.com/CPAN/CPAN.html

A couple of useful libraries used to parse input from the browser are cgi-utils.pl for perl4 and cgi.pm for perl5.

cgi-utils.pl

This library, intended for perl4, provides a few useful scripting routines which can be used with your CGI scripts. This library focuses on parsing input and decoding/encoding escape codes. This library can be found at:

http://www-genome.wi.mit.edu/WWW/tools/scripting/cgi-utils.html

cgi.pm

This is an extensive library which is intended for perl5. This library includes not only input parsing but a large number of scripts used to create dynamic web pages containing forms and other markup. This library can be found at:

http://www-genome.wi.mit.edu/ftp/pub/software/WWW/

Other utilities which may be of interest can be found at:

cool modules list

http://perl.com/perl/info/cool_modules.html

extensive modules list

ftp://ftp.sedl.org/pub/mirrors/CPAN/modules/00modlist.long.html

C/C++ CGI Programs

C/C++ is a popular language used on PC platforms running Windows and on Unix machines. C can be a useful language to write CGI programs in if you already have familiarity with structured languages. From C you have the ability to access environment variables, examine the standard input stream and write to the standard output stream. C/C++ is a language which is compiled into machine code (a program). The vast number of libraries available for database access and data manipulation may make C the language of choice.

An example of using C to process scripts is in Appendix A. The example demonstrates several concepts:

Reading environment variables

Reading the input stream

Writing to the output stream

Writing the input stream back to the output stream

When the program is accessed from the server, the initial output is shown in the following two snapshots. You will notice that there is no submitted information. All environment variables that were set by CGI are sent back to the browser in a table. You will notice that the request method is initially GET. This is because the CGI script was directly called from the browser's URL line. When the page is generated the second time via the SUBMIT button on the page, the request method becomes POST.

The code generated by the CGI program is similar to other HTML documents. You will notice that the HTML code in this document is not static: it contains fields which are generated based on the current environment and information supplied by the user.

<HTML>

<HEAD>

<TITLE>A Simple Form IO HTML Document</TITLE>

</HEAD>

<BODY>

<BIG><B><I>A simple fill out form.</I></B></BIG><P>

</FORM>

<HR>

<BIG><B><I>Submitted Information</I></B></BIG><P>

No data<BR>

<HR>

<BIG><B><I>Environment Variables</I><B></BIG><P>

<TR><TD><B>ServerSoftware</B></TD><TD>Microsoft-PWS/2.0</TD></TR>

<TR><TD><B>ServerName</B></TD><TD>charting.healthvision.com</TD></TR>

<TR><TD><B>GatewayInterface</B></TD><TD>CGI/1.1</TD></TR>

<TR><TD><B>ServerProtocol</B></TD><TD>HTTP/1.0</TD></TR>

<TR><TD><B>ServerPort</B></TD><TD>80</TD></TR>

<TR><TD><B>RequestMethod</B></TD><TD>GET</TD></TR>

<TR><TD><B>PathInfo</B></TD><TD></TD></TR>

<TR><TD><B>PathTranslated</B></TD><TD>C:\InetPub\wwwroot</TD></TR>

<TR><TD><B>ScriptName</B></TD><TD>/scripts/tools/cgime2.exe</TD></TR>

<TR><TD><B>QueryString</B></TD><TD></TD></TR>

<TR><TD><B>RemoteHost</B></TD><TD>134.87.14.30</TD></TR>

<TR><TD><B>RemoteAddr</B></TD><TD>134.87.14.30</TD></TR>

<TR><TD><B>AuthType</B></TD><TD></TD></TR>

<TR><TD><B>RemoteUser</B></TD><TD></TD></TR>

<TR><TD><B>RemoteIdent</B></TD><TD></TD></TR>

<TR><TD><B>Accept</B></TD><TD>image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, */*</TD></TR>

<TR><TD><B>UserAgent</B></TD><TD>Mozilla/2.0 (compatible; MSIE 3.0; Windows NT)</TD></TR>

<TR><TD><B>ContentType</B></TD><TD></TD></TR>

<TR><TD><B>ContentLengthString</B></TD><TD>0</TD></TR>

</TABLE>

</BODY>

</HTML>

The user can enter information into the two text edit fields created by the HTML document. This text can be alpha, numeric, or symbols.

Symbols which are entered by the user are converted to their ASCII numeric representation as shown in the next snapshot. You will also recall that spaces are converted to "+" and parameters are separated by "&".

Most CGI programs, after reading the input stream, must parse this stream in order to use the parameters.

CGI Alternative - Mail it

An alternative to using CGI to process information is to mail the results to an email address. In the <FORM> tag, specify the ACTION attribute to be a "mailto:" URL. An additional attribute ENCTYPE, although not commonly used, should be set to "text/plain".

You should be careful when doing this as not all browsers will support this format of mailed text. Also consider that no response will be sent to the user and the mailed text which is sent is unformated.

Placing the Program on the Server

The method of placing you program on the Web server will vary depending on the configuration of you Internet provider. Some administrators will allow you to put CGI scripts in your personal directories with your Web pages. Others insist that all CGI is put into a specific directory such as "cgi-bin". You will need to verify with your Web administrator:

Where CGI programs are stored.

The method of uploading these programs to the server.

The program can be run on the server.

The naming convention used for programs.

You should also ensure that:

Your CGI program is executable. Verify that it runs properly on the server.

The CGI program can access all data files which it needs.

Before placing a CGI script on your machine also consider the security implications. You are giving an external user the ability to run a program on your server. Try to consider security holes which may arise with a script you are placing on your machine. By considering security in your design, you may avoid the malicious behavior of a hacker.

Exercise

Create an HTML document which allows the user to mail results to an email address.

Browse the Web for CGI parsing and generation scripts starting with some of the addresses shown in this chapter. You will find that a little browsing for programs which you can use will save you a lot of time.

I've Been Framed!

By using frames, you have the ability to alter the user's view of your pages. Rather than looking at a single view window, you can divide the view window into multiple "panes". By creating a pane, a logo can be placed on the top, a menu bar can be placed along the left, or navigation controls can be along the bottom. Each of these panes are independent of other panes and as a result scroll independently.

In this section we will look at:

Frame documents

Targets

Extending frames

Nesting frames

Imagemaps in frames

Frame Documents

Creating framed documents will be very different from documents you have created in the past. Up until this point you have been concerned with one view (pane). Now, using frames, you can have several panes each with their own independent characteristics and sizes. The first step is to creating framed documents is to create a parent document, often referred to as a frame document.

The frame document is used to dictate the size and position of the panes. The frame document does not contain a body. The body tag is replaced with a FRAMESET tag used to define panes and is closed with a </FRAMESET>.

<HTML>

<HEAD>

<TITLE>Title of my document</TITLE>

</HEAD>

</FRAMESET>

The FRAMESET attribute has two attributes which can be used to define panes: COLS and ROWS. The following definition creates a document with three panes of equal width and height. The document is divided vertically.

</FRAMESET>

The "*" indicates to the browser that all remaining height is to be assigned to the pane. Since all three panes are defined using "*", then all are given equal height (1/3 of the document height).

Within the FRAMESET tag is a definition of each of the panes. Each pane is defined using the FRAME tag. The FRAME tag has two attributes which are used to name the frame and specify an initial document source.

</FRAMESET>

In order for the document to load, the blank.htm document must exist and must contain some form of output.

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

If you wanted to split the document into columns, replace the ROWS attribute with the COLS attribute in the FRAMESET tag.

Exercise

Create a frame document which breaks the document into two rows.

Create two separate documents which will be loaded into each of the two panes. For the text of the first, enter "Table of Contents". For the text of the second, enter "Introduction".

Assign each of the two pages to each of the two rows.

Test in your browser.

Targets

Creating the frame document was only the first step. Hypertext documents you have created thus far have always jumped to the appropriate page associated with the link. This caused a refresh of the viewing area with the new HTML page. You can now, using Frames, redirect this link to a particular pane defined by the frame document.

You will recall that a link is created using the anchor <A> tag.

This will cause page 1 to be loaded to the main viewing window of the browser. If you have frames defined, you can specify that the Page1.htm document be loaded into a particular pane. This is done using the TARGET attribute. (Assume for our purposes that a frame document has been created which contains a pane called "pane1".)

This type of configuration is useful if you have a table of contents which you always want displayed and several chapters accessed by the table of contents.

Frame document

<HTML>

<HEAD>

<TITLE>Title of my document</TITLE>

</HEAD>

</FRAMESET>

</HTML>

TOC document

<HTML>

<HEAD>

<TITLE>Title of my document</TITLE>

</HEAD>

<BODY>

<H3>Table of Contents</H3>

<A HREF="intro.htm" TARGET="chapter">Introduction</A><BR>

<A HREF="ch1.htm" TARGET="chapter">Chapter 1</A><BR>

<A HREF="ch2.htm" TARGET="chapter">Chapter 2</A><BR>

<A HREF="ch3.htm" TARGET="chapter">Chapter 3</A><BR>

</BODY>

</HTML>

You of course will need to create introduction and chapter documents to be loaded into the chapter pane.

When using the table of contents now, the topic will be loaded on the bottom pane and the table of contents will remain on the top pane.

Exercise

In this exercise we will be reproducing the table of contents as was presented in this section. You will be creating a total of 6 documents.

Enter the frame document shown in this section. If you would like to have the document broken down by column use the COLS attribute rather than ROWS.

Enter the table of contents document shown in this section. The target defined in the hyperlinks must match the name assigned to the pane in the frame document.

Create an introduction page which will be used as the default.

Create chapters 1, 2, and 3.

Test in your browser.

Extending Frames

As with other features in HTML, you have the ability to further customize how you want your frames to look and act. Currently in our examples, the FRAMESET tag has been used to create frames which are all equal sizes (columns or rows). You may want to change the sizes of the frames. This is accomplished by making changes to the ROWS or COLS attribute. The following examples demonstrate the abilities of the FRAMESET tag.

Create three equal size columns or rows (relative sizes)

Middle row will be twice the size of other rows (relative sizes)

Middle row will be an exact size of 70 pixels (fixed center middle size, relative top and bottom)

Top row will occupy 30% of screen, middle will occupy 60%, and bottom will occupy 10% (relative sizes)

In addition to defining the size of the panes, you can also define the characteristics of the pane. You will notice that when information in a particular document exceeds the size of a pane, then scroll bars are added. If you want to disable this, you can add the attribute SCROLLING="no" to the FRAME tag.

Also by default, the user has the ability to change the size of the frames which you defined within the FRAMESET tag. You can disable this ability by using the NORESIZE attribute of the FRAME tag. This attribute will prohibit the ability to resize this pane only.

At times the information contained within a pane may appear to close to the borders of the pane. You will recall that you had the ability to define a certain amount of vertical (VSPACE) and horizontal (HSPACE) space around an image. The attributes MARGINHEIGHT and MARGINWIDTH provide you the same type of ability with frames. These attributes create a border (defined in pixels) within the pane. Information such as text and images cannot be placed within this buffer area.

What about users who have browsers which do not support frames? The first thing you should always consider doing is creating a set of documents which do not use frames. This will allow users who cannot display frames the ability to navigate your pages effectively. In addition, you can utilize the NOFRAMES tag. The <NOFRAMES> .. </NOFRAMES> tags are placed between the <FRAMESET> .. </FRAMESET> tags. All information which you want displayed to users who cannot display frames is placed within the NOFRAMES opening and closing tags. Non-frames browsers will ignore all the frames tags, including the NOFRAMES tag and render the text and standard HTML that exists within NOFRAMES.

<HTML>

<HEAD>

<TITLE>Title of my document</TITLE>

</HEAD>

<H3>Attention</H3>

You have tried to load a page which contains frames. Your browser does not have the

ability to render frames. The latest versions of Internet Explorer and Netscape

Navigator have this ability. You can either install these or you can connect to our

<A HREF="noframetoc.htm">alternate pages</A> which do not use frames.

</NOFRAMES>

</FRAMESET>

</HTML>

Exercise

In this exercise, you will be changing the frame document from the previous exercise.

Experiment changing the size of the panes using the methods in this section.

Add a NOFRAMES tag to your document for users who cannot render frames.

Disable scrolling in the TOC pane.

Disable the ability to resize the TOC pane.

Assign a border of 5 around the information contained within the chapter pane.

Test in your browser.

Nesting Frames

So far you have created frames either vertically or horizontally (in columns or rows). You can extend this ability and create frames both horizontally and vertically. To accomplish this, you can do what is known as "nesting frames". When nesting frames, you must first define either a set of columns or a set of rows. These will act as the parent frames. You can create child frames within a particular frame which for example will produce two columns within a single row.

Nesting frames is actually as simple as nesting tags within your HTML document. In our example, we will create two parent columns. The second parent column will contain two rows. The first step is to create the parent columns:

<HTML>

<HEAD>

<TITLE>Title of my document</TITLE>

</HEAD>

</FRAMESET>

</HTML>

You will notice that we have only defined one frame so far: the first parent column. The second column is based on two framed rows. We will need to nest the two framed rows in the second column by nesting a FRAMESET tag within the parent FRAMESET tag.

<HTML>

<HEAD>

<TITLE>Title of my document</TITLE>

</HEAD>

</FRAMESET>

</HTML>

Imagemaps In Frames

It is possible to combine client side image maps with frames technology. To combine the two, use the TARGET attribute to load the URLs into specific windows in a frames document. If you have a small frame which is used as the button bar (for our purposes call it buttonbar) and a large frame (called textwindow), the user clicking on regions of the image map will load particular documents into the textwindow pane.

As you will have seen before, the AREA tag is used to define clickable regions of the image map.

By adding the TARGET attribute to the AREA tag, you can specify which pane you want the document to be loaded in.

Adding Life to Your Page With Animated GIFs

Adding animation to a page can liven it up and make it more informative. Some page developers use animation to instruct the user more effectively on their topic (i.e. a working 3D engine).

In this section we will look at the theory behind animated GIFs and how to create them for your own page. This section will cover:

What is an animated GIF?

How do you create one?

Inserting one into your page.

What is an Animated GIF?

The GIF (graphic interchange format) image is one of the two main still graphic formats supported by graphical Web browsers. The newest type, GIF89a, builds on the GIF87a format by offering several new features. One such feature, transparency, you most likely have already experimented with while creating transparent colors which show the background colors. As you will see, the GIF standard is not just a single-image file format. It also allows multiple images to be stored in a single file which can be played back as an animation.

There are many advantages to using GIF animation:

Many animations are created using "server push" or "client pull". This is the same technique that was introduced in an earlier chapter to pull in sounds for a page using CGI. Using a GIF animation will yield better performance as server interaction is reduced.

For many Web authors, CGI is not even an option as it may be restricted on their site for security reasons.

As you will see, with GIF animation, you can optimize the image to only reflect changes which have occurred in particular areas of the GIF. With CGI animation, the whole frame is transmitted.

GIF animations can easily be repeated an infinite number of times without the need for server interaction.

Netscape offers what are known as plug-ins. These support animation, but only for those users who are using Netscape. This is not a good option as they do not work across platforms.

As they are files, they can be cached into the computer's memory and will operate faster.

Usually smaller than an inline movie or Java applet so download time is smaller.

Benefits of GIFs including transparency, compression, and interlacing.

The same image can be used on the same page multiple times.

Adding an animated GIF to your page is as easy as adding a single image graphic. Use the <IMG SRC="…"> tag.

Some disadvantages to using GIF animation include:

GIF limits to 256 colors.

Better compression with JPG type images.

Animation can be slowed or interrupted by other images being loaded.

Cannot be used as a background GIF.

Easy for people to "borrow" (steal) your animated GIFs.

What makes up a GIF?

A GIF is composed of what are called blocks. These blocks can be grouped into three categories: Control, Graphic-Rendering, and Special Purpose. Control blocks are used to control how the graphic is handled. These include the Header, Logical Screen Descriptor, Graphic Control Extension, and Trailer. Graphic-Rendering blocks are used to render the graphic. These include the Image Descriptor and the Plain Text Extension. Special Purpose blocks such as the Comment Extension and the Application Extension are not used by GIF decoders at all (for informational purposes only or for specific applications.) The Logical Screen Descriptor and the Global Color Table affect all the images in a single file.

An example of a GIF89a animation file is:

GIF89A HEADER

LOGICAL SCREEN DESCRIPTOR

GLOBAL PALETTE

LOOP : 4

COMMENT "Author: Your Name"

COMMENT "First image"

CONTROL for IMAGE #1

IMAGE #1

COMMENT "Second Image"

CONTROL for IMAGE #2

IMAGE#2

COMMENT "Third Image"

CONTROL for IMAGE #3

IMAGE #3

TRAILER

Header

The header is the first block in every file. It contains the GIF version of the file (either GIF87a or GIF89a). GIF image decoders use this information to determine the version of the file.

Logical Screen Descriptor

The logical screen descriptor is always the second block in the file. This block defined the area of pixels which will be used as the display area for the animation (like the viewing area at the movie theater.) This reserves a particular amount of space in the browser window for the animation to be created. The logical screen area should be large enough to display all of your individual frames in it. If an image in the GIF file is larger than the logical screen or extends beyond the screen, the portion that is off-screen will not be displayed. If the image is smaller than the logical screen, then a blank border will surround the image (if not transparent.) From within the screen block, you also choose a color for the background from the global color table of the GIF.

Loop

The loop block can be used to define the number of times an animation will play.

Control

The control block controls particular aspects of how a slide in the image is displayed. Each control block will only affect a single Image block that immediately follows it. The control block is used to determine:

use of the global palette or local palette

use of transparent color

delay time before displaying image (in 1/100ths of a second)

how the image is removed

Image

The image block contains the actual image (slide) used to compose the animated GIF. The image block also contains the image's size, position on the logical screen, and palette.

Comment Block

Comments can be included in the GIF. These are not used during rendering but are useful when wanting to include information about each frame in the animation. Comments can also be used to identify yourself as the author of the GIF.

Trailer

The trailer indicates the end of the GIF file.

Animation Tools

There are a variety of different tools which can be used to produce animated GIFs. These tools vary in the operating systems they support and the capabilities for conversion of other animation files, handling of images, and optimization for the graphic file. The following are some of the more common tools. (In this course, GIF Construction Set (GifCon) is used.)

Tools

GIF Construction Set

The GIF Construction Set, by Alchemy Mindworks, is a shareware program used to create animated PC GIFs.

http://www.mindworkshop.com/alchemy/gifcon.html

GifBuilder

GifBuilder, by Yves Piguet, is a scriptable Macintosh shareware utility that creates animated GIFs.

http://iawww.epfl.ch/Staff/Yves.Piguet/clip2gif-home/GifBuilder.html

GIFMation

GIFMation, by BoxTop Software, is a Payware GIF animation program.

http://www.boxtopsoft.com/

PhotoImpact GIF Animator

PhotoImpact is a PC-based GIF animation program which has built-in effects and uses a frame difference method to optimize GIFs.

http://www.ulead.com/

Using GifCon to Create Animation

To create a new animated GIF, start the GifCon application and choose "File, New" from the menu. What will be created is a blank GIF will only a header.

HEADER GIF89A Screen (640x480)

The GifCon header contains both the GIF header and logical screen descriptor (you will recall these from our discussion earlier in the chapter.) These control the logical screen width and height, background color, and palette. A blank GIF has a default size of 640 by 480 pixels, width by height (standard VGA size on PC computer.) You will want to change the logical size to match the largest width and height of images used in the animation. (Often this is left until you have inserted all your images.) You can edit the header by selecting the header and hitting the "Edit" button.

To insert and image, click on the "Insert" button and choose "Image" from the object insert menu. An open box will appear allowing you to choose the image file to insert. Select the image file and click on the "Ok" button. If any colors in the image are not represented by the global palette, a dialog box will pop up with up to six choices.

Use a local palette for this image. This will allow you to use the local palette of the image being inserted. Note that this option is not recommended because the unpredictable results which might incur form using it.

Use a local grey palette for this image. The image will be converted to grey scale and installed with a local palette.

Remap this image to the global palette. This is a good choice for mechanical images and drawings, but a really bad choice for photographs. Each colour in the source image will be replaced by the closest match from the global palette.

Dither this image to the global palette. This is a good choice for photographs as it will give you the best color match.

Use this image as the global palette. This option will only be available if no other image blocks currently exist in your GIF file, such as when you create a new file.

Use it as is. No checking or correction will be performed, and the colours in your imported image will fall where they may.

The IMAGE will now appear on the block list. It will show how big the image is in pixels (width by height) and how many colors are in the image.

HEADER GIF89A Screen (640x480)

IMAGE T1.GIF 70 x 68, 256 colours

You have the ability to edit the options associated with an image. Select the image then click the "Edit" button. From the edit dialog, you can specify the X & Y position of the image, relative to the screen area defined in the header block. A coordinate of 0 by 0 relates to the top left hand corner of where the GIF is placed on the Web page.

A control block can be placed into the GIF by selecting the "Insert" button and then "Control" from the Insert Object menu. Only one should be inserted before each image. It should be placed immediately before the image it is meant to control. Once you add the control block, you will want to edit the default options.

HEADER GIF89A Screen (640x480)

CONTROL

IMAGE T1.GIF 70 x 68, 256 colours

A color can be specified to be transparent. To set a transparent color, click on the check box "Transparent color". The default transparency color is 0. By clicking on a color, you get to see the current palette associated with this image. Select the color that should be replaced with transparency. You can also use the eyedropper tool to pick the color from the image itself. Control blocks only affect the first image that follows it. You must insert a control block with transparency before every image to get an animation which has a transparent background.

The delay is measured in 1/100s of a second. The delay is usually handled by displaying the image, waiting the time interval, and then removing the image. Once the image is removed, the control block of the next image should take over. The "Remove by" option dictates what is done with an image once the time delay has elapsed. You can specify several options:

Nothing / Leave As Is. Basically both options perform the same operation, they don’t do anything with the image.

Previous Image. This restores the image to the way it looked before it was laid down. (Currently not supported by any browsers.)

Background. Paint the background of the browser over the image's area.

Once the first image and control block have been created, you can insert additional images and control blocks in the same fashion.

HEADER GIF89A Screen (640x480)

CONTROL

IMAGE T1.GIF 70 x 68, 256 colours

CONTROL

IMAGE T2.GIF 70 x 68, 256 colours

CONTROL

IMAGE T3.GIF 70 x 68, 256 colours

CONTROL

IMAGE T4.GIF 70 x 68, 256 colours

Selecting the "View" button will allow the animated image to be viewed, frame by frame. To simplify your task of creating the animated GIF, you may also want to use the animation wizard, "File, Animation Wizard". A loop can be added to the image by selecting the "Insert" button followed by "Loop" from the Insert option menu. The loop can be edited by the edit button; the default is 1000.

Exercise

Locate images on the net or create your own set of images.

Use these images to construct your own animated GIF.

Add control blocks for each of the images. If the control block is the same for each image, you can copy and paste control blocks using the clipboard.

Insert a loop block.

Test the image using the "View" button.

Create a page and add the image to the page. Test in your browser.

CGI Input and Output - C

This is an example of using C to process scripts. The example demonstrates several concepts:

Reading environment variables

Reading the input stream

Writing to the output stream

Writing the input stream back to the output stream

//CGI2ME.C [ console app cgi2me.exe ]

#include <stdio.h>

#include <stdlib.h>

//Environment Variables

char *ServerSoftware, *ServerName, *GatewayInterface, *ServerProtocol, *ServerPort;

char *RequestMethod, *PathInfo, *PathTranslated, *ScriptName, *QueryString;

char *RemoteHost, *RemoteAddr, *AuthType, *RemoteUser, *RemoteIdent, *Accept;

char *UserAgent, *ContentType, *ContentLengthString;

int ContentLength;

//Get the environment variable

void GetEnvString(char **s, char *var)

{

*s = getenv(var);

if (!(*s)) {

*s = "";

}

//Get all environment variables

void GetEnvironment()

{

GetEnvString(&ServerSoftware, "SERVER_SOFTWARE");

GetEnvString(&ServerName, "SERVER_NAME");

GetEnvString(&GatewayInterface, "GATEWAY_INTERFACE");

GetEnvString(&ServerProtocol, "SERVER_PROTOCOL");

GetEnvString(&ServerPort, "SERVER_PORT");

GetEnvString(&RequestMethod, "REQUEST_METHOD");

GetEnvString(&PathInfo, "PATH_INFO");

GetEnvString(&PathTranslated, "PATH_TRANSLATED");

GetEnvString(&ScriptName, "SCRIPT_NAME");

GetEnvString(&QueryString, "QUERY_STRING");

GetEnvString(&RemoteHost, "REMOTE_HOST");

GetEnvString(&RemoteAddr, "REMOTE_ADDR");

GetEnvString(&AuthType, "AUTH_TYPE");

GetEnvString(&RemoteUser, "REMOTE_USER");

GetEnvString(&RemoteIdent, "REMOTE_IDENT");

GetEnvString(&ContentType, "CONTENT_TYPE");

GetEnvString(&Accept, "HTTP_ACCEPT");

GetEnvString(&UserAgent, "HTTP_USER_AGENT");

GetEnvString(&ContentLengthString, "CONTENT_LENGTH");

ContentLength = atoi(ContentLengthString);

}

//Write an line containing environment variables to the output stream

void WriteEnvironmentLine(char *envlinedesc, char *envline)

{

fprintf(stdout,"<TR><TD><B>%s</B></TD><TD>%s</TD></TR>\n",envlinedesc, envline);

}

//Write all environment variables to the output stream

void WriteEnvironment()

{

fprintf(stdout,"<BIG><B><I>Environment Variables</I><B></BIG><P>\n");

fprintf(stdout,"<TABLE BORDER=1>\n");

WriteEnvironmentLine("ServerSoftware",ServerSoftware);

WriteEnvironmentLine("ServerName",ServerName);

WriteEnvironmentLine("GatewayInterface",GatewayInterface);

WriteEnvironmentLine("ServerProtocol",ServerProtocol);

WriteEnvironmentLine("ServerPort",ServerPort);

WriteEnvironmentLine("RequestMethod",RequestMethod);

WriteEnvironmentLine("PathInfo",PathInfo);

WriteEnvironmentLine("PathTranslated",PathTranslated);

WriteEnvironmentLine("ScriptName",ScriptName);

WriteEnvironmentLine("QueryString",QueryString);

WriteEnvironmentLine("RemoteHost",RemoteHost);

WriteEnvironmentLine("RemoteAddr",RemoteAddr);

WriteEnvironmentLine("AuthType",AuthType);

WriteEnvironmentLine("RemoteUser",RemoteUser);

WriteEnvironmentLine("RemoteIdent",RemoteIdent);

WriteEnvironmentLine("Accept",Accept);

WriteEnvironmentLine("UserAgent",UserAgent);

WriteEnvironmentLine("ContentType",ContentType);

WriteEnvironmentLine("ContentLengthString",ContentLengthString);

fprintf(stdout,"</TABLE>\n");

}

//Examine string

int StrEqNc(char *s1, char *s2) {

while(1) {

if (!(*s1)) {

if (!(*s2)) {

return 1;

} else {

return 0;

}

} else if (!(*s2)) {

return 0;

}

if (isalpha(*s1)) {

if (tolower(*s1) != tolower(*s2)) {

return 0;

}

} else if ((*s1) != (*s2)) {

return 0;

}

s1++;

s2++;

}

void main()

{

char *input;

//Get the environment variables for the connection

GetEnvironment();

//Define HTML document and header

fprintf(stdout,"Content-Type: text/html");

fprintf(stdout,"\n\n");

fprintf(stdout,"<HTML>\n");

fprintf(stdout,"<HEAD>\n");

fprintf(stdout,"<TITLE>A Simple Form IO HTML Document</TITLE>\n");

fprintf(stdout,"</HEAD>\n");

fprintf(stdout,"<BODY>\n");

//Input Form

fprintf(stdout,"<BIG><B><I>A simple fill out form.</I></B></BIG><P>\n");

fprintf(stdout,"<FORM METHOD=\"POST\" ACTION=\"http://charting.healthvision.com/scripts/tools/cgime2.exe\">\n");

fprintf(stdout,"<INPUT NAME=\"inputline1\"><BR>\n");

fprintf(stdout,"<INPUT NAME=\"inputline2\"><P>\n");

fprintf(stdout,"<INPUT TYPE=SUBMIT>\n");

fprintf(stdout,"<INPUT TYPE=RESET>\n");

fprintf(stdout,"</FORM>\n");

//User Input from previous SUBMIT

fprintf(stdout,"<HR>\n");

fprintf(stdout,"<BIG><B><I>Submitted Information</I></B></BIG><P>\n");

//posting support, obtain input stream

if (StrEqNc(RequestMethod, "post"))

{

if (ContentLength>0)

{

input = (char *) malloc(ContentLength);

fread(input, 1, ContentLength, stdin);

if (ContentLength>0)

{

fprintf(stdout,"%s<BR>\n",input);

}

else

{

fprintf(stdout,"No data<BR>\n");

}

free(input);

}

else

{

fprintf(stdout,"No data<BR>\n");

}

//Dump Environment Variables

fprintf(stdout,"<HR>\n");

WriteEnvironment();

//Close Document

fprintf(stdout,"</BODY>\n");

fprintf(stdout,"</HTML>\n");

}

Server Environment Variables

Common Variables

Additional Variables

SERVER_SOFTWARE

The name and version of the information server software answering the request. The format is name/version.

SERVER_NAME

The server's host name, DNS alias, or IP address.

GATEWAY_INTERFACE

The CGI specification version to which the server complies. The format is CGI/revision

SERVER_PROTOCOL

The name and version of the protocol which made the request. The format is protocol/revision.

SERVER_PORT

The port number to which the request was sent. Most commonly 80.

PATH_INFO

The extra path information, as given by the client. Additional path information is passed after the filename of the CGI script. For example will set PATH_INFO to "/morepath/info".

HTTP://www.host.com/path/script.cgi/morepath/info

PATH_TRANSLATED

A translated version of PATH_INFO which performs virtual-to-physical mapping of the path.

SCRIPT_NAME

The name and virtual path to the script being executed.

REMOTE_HOST

The host name which is making the request.

REMOTE_ADDR

The IP address of the host making the request.

AUTH_TYPE

Used to validate the user if the server supports user authentication and the script is protected.

REMOTE_USER

The username which the user has been authenticated as if the server supports authentication and the script is protected.

REMOTE_IDENT

If the HTTP server supports RFC 931 identification, then this variable will be set to the remote user name retrieved from the server.

CONTENT_TYPE

For queries which have attached information, such as HTTP POST and PUT, this is the content type of the data.

HTTP_ACCEPT

The MIME types which the client will accept, as given by HTTP headers. Each item in this list should be separated by commas as per the HTTP spec. The format is type/subtype, type/subtype, …

HTTP_USER_AGENT

The browser the client is using to send the request.

HTTP_REFERER

The URL of the form that was submitted.

Useful URLs

Style Guides

Web Style

http://WWW.Charm.Net/~web/Style/

CERN's Style Guide

http://www.w3.org/hypertext/WWW/Provider/Style/Introduction.html

Virtual Library/CyberWeb

http://WWW.Stars.com/Vlib/Providers/Style.html

Good Home Page Design

http://www.access.digex.net/~werbach/page_design.html

Yale C/AIM WWW Style

http://info.med.yale.edu/caim/StyleManual_Top.HTML

Webspace Design

http://www.webcom.com/~hurleyj/article/index.html

Field Guide

http://nearnet.gnn.com/gnn/news/feature/netizens/fieldguide.html

Icons

Yahoo Icon Index

http://www.yahoo.com/Computers/World_Wide_Web/Programming/Icons

DJ's Icon Catalog

http://www.delorie.com/gif/

Icons from UMass

http://donald.phast.umass.edu/icons/

Icons from Cornell

http://www.tc.cornell.edu/Icons/

Icons from Upenn

http://www.cis.upenn.edu/~mjd/icons/

Icons from ucsd.edu

http://inls.ucsd.edu/y/OhBoy/icons.html

Anthony's Icon Library

http://www.cit.gu.edu.au/~anthony/icons/

QBullets

http://www.matterform.com/mf/qbullets/aboutqbullets.html

Icon Library

http://www.nas.nasa.gov/NAS/WebWeavers/icons.html

SaberSpace Graphics Depot

http://www.netrunner.net/~sabercat/

Icons from LAL

http://lal.cs.byu.edu/buttons/gifs.html

Sandra's Clip Art Server

http://www.cs.yale.edu/HTML/YALE/CS/HyPlans/loosemore-sandra/clipart.html

HTML Developers Icons

http://oneworld.wa.com/htmldev/devpage/icon/

Computer related icons

http://www.cs.indiana.edu/elisp/w3/icons/

Web Comm. Archive

http://www.webcom.com/power/icons.html

GNN Icons

http://nearnet.gnn.com/icons/

Daniel's Icon Archive

http://www.jsc.nasa.gov/~mccoy/Icons/index.html

Image Index

http://www.winternet.com/~drozone/imagesindex.html

Icons!

http://www2.uncg.edu:80/~rdralph/icons/

Icons from kiae.su

http://www.kiae.su/www/icon/

Icons from quadralay.com

http://www.quadralay.com/icons/

Icons from passau

http://www.uni-passau.de/icons/

Background images

Pattern Land

http://www.netcreations.com/patternland/index.html

Textureland

http://www.europa.com/~yyz/textures/textures.html

The KPT Backgrounds Archive

http://the-tech.mit.edu/cgi-bin/KPT_bgs.pl

Netscape

http://www2.netscape.com/assist/net_sites/bg/backgrounds.html

HYPE Background Selector

http://www.phantom.com/~giant/HYPE_BACK/hypeback.html

Russ' Backgrounds

http://www.issi.com/people/russ/backgrounds.html

Julianne's Background Textures

http://www.sfsu.edu/~jtolson/textures/textures.htm

H's Backgrounds

http://www.princeton.edu/~champ/background.html

Web color utilities

The Color Specifier

http://www.interport.net/~giant/COLOR/hype_color.html

Background Colors

http://www.infi.net/wwwimages/colorindex.html

ColorHex

http://firehorse.com/colorhex

RGBtoHex

http://www.lne.com/lemay/rgb.html

Colors and Hex Equivalents

http://www.ohiou.edu/~rbarrett/webaholics/ver2/colors.html

Color Ramper

http://www.netcreations.com/ramper/index.html

HTML design pages, more info!

Netscape HTML Extensions

http://home.mcom.com/home/services_docs/html-extensions.html

The official HTML specification

http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html

HTML Assistant

http://web1.osf.org:8001/ri/hci_papers/html-asst.html

HTML Tips

http://www.best.com/~dsiegel/tips/tips_home.html

The 'Official' HTML 2.0 DTD (HAL)

http://www.halsoft.com/sgml/html-2.0/DTD-HOME.html

The 'Official' HTML 3.0 DTD (HAL)

http://www.halsoft.com:80/sgml/html-3.0/DTD-HOME.html

Composing Good HTML

http://www.willamette.edu/html-composition/strict-html.html

How to write HTML

http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

HTML Writers Guild

http://www.mindspring.com/guild/

A Guide to URLs

http://www.netspace.org/users/dwb/url-guide.html

A Beginner's Guide to URLs

http://www.ncsa.uiuc.edu/demoweb/url-primer.html

The HTML Quick Reference Guide

http://kuhttp.cc.ukans.edu/lynx_help/HTML_quick.html

HTML Specification Version 3.0

http://www.hpl.hp.co.uk/people/dsr/html/CoverPage.html

Webcom's HTML Guide

http://www.webcom.com/~webcom/html/tutor/welcome.html

A Primer on writing HTMLs

http://www.ncsa.uiuc.edu/demoweb/html-primer.html

HTML Reference

http://www.sandia.gov/sci_compute/html_ref.html

Reference for HTML and the Web

http://server.uwindsor.ca:8000/~watson6/wwwstart.html

HTML Writer Home Page

http://lal.cs.byu.edu/people/nosack/index.html

Table Exercise

Answer to last question in chapter 1.

<HTML>

<HEAD>

<TITLE>Table Exercise</TITLE>

</HEAD>

<CAPTION>Table Exercise</CAPTION>

<TR>

<TH>Heading 1</TH>

<TH>Heading 2</TH>

<TH COLSPAN=2>Heading 3</TH>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

ALIGN=(LEFT\|RIGHT\|CENTER)	Change alignment
NOSHADE	Eliminate shading of horizontal bar
SIZE="size"	Number used to define vertical width. Valid values are from 1 to 7
WIDTH=(number\|percent)	Used to define the exact width in pixels or the percentage of the line that the rule is to occupy

Define Rectangle	You can create new rectangles by moving the mouse pointer to the location for the first corner. While holding the left mouse button, drag the mouse pointer to the opposite corner. Release the mouse pointer when you are done.
Define Circle/Oval	You can create new circles by moving the mouse pointer to the location of the center of the circle. While holding the left mouse button, drag the mouse pointer to the radius of the circle. This is known as pull from center.
Define Polygon	You can create any type of polygon using the polygon tool. Create odd shapes, triangles, etc. For example, you can use the polygon tool to make a rough shape of a car. You create a new polygon by moving the mouse pointer to the first corner of the polygon. Click the left mouse button to start the polygon. Move the mouse pointer and click for the second corner. Continue until you have created all your "nodes". Complete the polygon either by clicking near the starting point or by double clicking the left mouse button.
Select Area	The arrow tool can be used to move, reshape, or delete existing areas. You can move an area by positioning the mouse pointer over an area. When the mouse pointer changes to a four way arrow, drag the area to a different location using the left mouse button. Deleting an area can be accomplished by right clicking on the area and selecting "Delete Area" from the popup menu. Reshaping can be done by clicking on "nodes" which make up the shape and dragging the node to a new location.

NCSA	http://hoohoo.ncsa.uiuc.edu/docs/tutorials/imagemapping.html
CERN	http://www.w3.org/hypertext/WWW/Daemon/User/CGI/HTImageDoc.html

Shape	Coordinate Style
Rect	(x,y) of corner, (x,y) of opposite corner. (Usually upper left / lower right)
Circle	(x,y) of the center, n for the length of the radius (in pixels).
Polygon	(x,y)(x,y)(x,y)… series of xy coordinates for each node in the polygon.

Attribute	Usage	Description
TEXT	TEXT="#000000"	Default text.
LINK	LINK="#000080"	Text used as an anchor (link).
VLINK	VLINK="#FF0000"	Text used as an anchor which has been accessed (visited link).

METHOD="POST"	ACTION="http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query"
METHOD="GET"	ACTION="http://hoohoo.ncsa.uiuc.edu/cgi-bin/query"

QUERY_STRING	When a form is submitted with the GET method, the QUERY_STRING is used to hold the parameters which are passed. These parameters, whose structure was explained earlier in the chapter, must be parsed in order to be used.
CONTENT_LENGTH	When a form is submitted with the POST method, the CONTENT_LENGTH informs the server how much information must be read from the input buffer.
REQUEST_METHOD	How was the form submitted? POST or GET?

cool modules list	http://perl.com/perl/info/cool_modules.html
extensive modules list	ftp://ftp.sedl.org/pub/mirrors/CPAN/modules/00modlist.long.html

SERVER_SOFTWARE	The name and version of the information server software answering the request. The format is name/version.
SERVER_NAME	The server's host name, DNS alias, or IP address.
GATEWAY_INTERFACE	The CGI specification version to which the server complies. The format is CGI/revision
SERVER_PROTOCOL	The name and version of the protocol which made the request. The format is protocol/revision.
SERVER_PORT	The port number to which the request was sent. Most commonly 80.
PATH_INFO	The extra path information, as given by the client. Additional path information is passed after the filename of the CGI script. For example will set PATH_INFO to "/morepath/info". HTTP://www.host.com/path/script.cgi/morepath/info
PATH_TRANSLATED	A translated version of PATH_INFO which performs virtual-to-physical mapping of the path.
SCRIPT_NAME	The name and virtual path to the script being executed.
REMOTE_HOST	The host name which is making the request.
REMOTE_ADDR	The IP address of the host making the request.
AUTH_TYPE	Used to validate the user if the server supports user authentication and the script is protected.
REMOTE_USER	The username which the user has been authenticated as if the server supports authentication and the script is protected.
REMOTE_IDENT	If the HTTP server supports RFC 931 identification, then this variable will be set to the remote user name retrieved from the server.
CONTENT_TYPE	For queries which have attached information, such as HTTP POST and PUT, this is the content type of the data.
HTTP_ACCEPT	The MIME types which the client will accept, as given by HTTP headers. Each item in this list should be separated by commas as per the HTTP spec. The format is type/subtype, type/subtype, …
HTTP_USER_AGENT	The browser the client is using to send the request.
HTTP_REFERER	The URL of the form that was submitted.

Web Style	http://WWW.Charm.Net/~web/Style/
CERN's Style Guide	http://www.w3.org/hypertext/WWW/Provider/Style/Introduction.html
Virtual Library/CyberWeb	http://WWW.Stars.com/Vlib/Providers/Style.html
Good Home Page Design	http://www.access.digex.net/~werbach/page_design.html
Yale C/AIM WWW Style	http://info.med.yale.edu/caim/StyleManual_Top.HTML
Webspace Design	http://www.webcom.com/~hurleyj/article/index.html
Field Guide	http://nearnet.gnn.com/gnn/news/feature/netizens/fieldguide.html

Yahoo Icon Index	http://www.yahoo.com/Computers/World_Wide_Web/Programming/Icons
DJ's Icon Catalog	http://www.delorie.com/gif/
Icons from UMass	http://donald.phast.umass.edu/icons/
Icons from Cornell	http://www.tc.cornell.edu/Icons/
Icons from Upenn	http://www.cis.upenn.edu/~mjd/icons/
Icons from ucsd.edu	http://inls.ucsd.edu/y/OhBoy/icons.html
Anthony's Icon Library	http://www.cit.gu.edu.au/~anthony/icons/
QBullets	http://www.matterform.com/mf/qbullets/aboutqbullets.html
Icon Library	http://www.nas.nasa.gov/NAS/WebWeavers/icons.html
SaberSpace Graphics Depot	http://www.netrunner.net/~sabercat/
Icons from LAL	http://lal.cs.byu.edu/buttons/gifs.html
Sandra's Clip Art Server	http://www.cs.yale.edu/HTML/YALE/CS/HyPlans/loosemore-sandra/clipart.html
HTML Developers Icons	http://oneworld.wa.com/htmldev/devpage/icon/
Computer related icons	http://www.cs.indiana.edu/elisp/w3/icons/
Web Comm. Archive	http://www.webcom.com/power/icons.html
GNN Icons	http://nearnet.gnn.com/icons/
Daniel's Icon Archive	http://www.jsc.nasa.gov/~mccoy/Icons/index.html
Image Index	http://www.winternet.com/~drozone/imagesindex.html
Icons!	http://www2.uncg.edu:80/~rdralph/icons/
Icons from kiae.su	http://www.kiae.su/www/icon/
Icons from quadralay.com	http://www.quadralay.com/icons/
Icons from passau	http://www.uni-passau.de/icons/

Pattern Land	http://www.netcreations.com/patternland/index.html
Textureland	http://www.europa.com/~yyz/textures/textures.html
The KPT Backgrounds Archive	http://the-tech.mit.edu/cgi-bin/KPT_bgs.pl
Netscape	http://www2.netscape.com/assist/net_sites/bg/backgrounds.html
HYPE Background Selector	http://www.phantom.com/~giant/HYPE_BACK/hypeback.html
Russ' Backgrounds	http://www.issi.com/people/russ/backgrounds.html
Julianne's Background Textures	http://www.sfsu.edu/~jtolson/textures/textures.htm
H's Backgrounds	http://www.princeton.edu/~champ/background.html

The Color Specifier	http://www.interport.net/~giant/COLOR/hype_color.html
Background Colors	http://www.infi.net/wwwimages/colorindex.html
ColorHex	http://firehorse.com/colorhex
RGBtoHex	http://www.lne.com/lemay/rgb.html
Colors and Hex Equivalents	http://www.ohiou.edu/~rbarrett/webaholics/ver2/colors.html
Color Ramper	http://www.netcreations.com/ramper/index.html

Netscape HTML Extensions	http://home.mcom.com/home/services_docs/html-extensions.html
The official HTML specification	http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html
HTML Assistant	http://web1.osf.org:8001/ri/hci_papers/html-asst.html
HTML Tips	http://www.best.com/~dsiegel/tips/tips_home.html
The 'Official' HTML 2.0 DTD (HAL)	http://www.halsoft.com/sgml/html-2.0/DTD-HOME.html
The 'Official' HTML 3.0 DTD (HAL)	http://www.halsoft.com:80/sgml/html-3.0/DTD-HOME.html
Composing Good HTML	http://www.willamette.edu/html-composition/strict-html.html
How to write HTML	http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html
HTML Writers Guild	http://www.mindspring.com/guild/
A Guide to URLs	http://www.netspace.org/users/dwb/url-guide.html
A Beginner's Guide to URLs	http://www.ncsa.uiuc.edu/demoweb/url-primer.html
The HTML Quick Reference Guide	http://kuhttp.cc.ukans.edu/lynx_help/HTML_quick.html
HTML Specification Version 3.0	http://www.hpl.hp.co.uk/people/dsr/html/CoverPage.html
Webcom's HTML Guide	http://www.webcom.com/~webcom/html/tutor/welcome.html
A Primer on writing HTMLs	http://www.ncsa.uiuc.edu/demoweb/html-primer.html
HTML Reference	http://www.sandia.gov/sci_compute/html_ref.html
Reference for HTML and the Web	http://server.uwindsor.ca:8000/~watson6/wwwstart.html
HTML Writer Home Page	http://lal.cs.byu.edu/people/nosack/index.html