HTML & Web Design

Introduction & Intermediate Levels

Day One

 
 
 
 

T.I. McLaughlin

mcse, mct, b-admin, a+, webmaster

tom@mclaughlin.net

http://tom.mclaughlin.net


Table of Contents

Basic Concepts.............................................................................................................................. 5

Tags:............................................................................................................................................................................................ 5

Head:............................................................................................................................................................................................ 5

Title:............................................................................................................................................................................................. 5

Body:............................................................................................................................................................................................ 5

Headings:.................................................................................................................................................................................... 5

Paragraphs:................................................................................................................................................................................ 5

Alignment:.................................................................................................................................................................................. 6

Lists:............................................................................................................................................................................................ 6

A Basic HTML Document............................................................................................................ 7

<P> Paragraph command......................................................................................................................................................... 7

<BR> Line Break command.................................................................................................................................................... 7

<Center> command................................................................................................................................................................... 7

<ALIGN> command................................................................................................................................................................... 7

<I> Italicize (Emphasis or Citation) command:.................................................................................................................... 8

<B> Bold (Strong) command:.................................................................................................................................................. 8

<UL> Indentation (Blockquote) command:............................................................................................................................ 8

<H1> (Big) command:............................................................................................................................................................... 8

<HR> command:......................................................................................................................................................................... 8

Lists.............................................................................................................................................. 10

Ordered Lists........................................................................................................................................................................... 10

Unordered Lists....................................................................................................................................................................... 10

Directory lists.......................................................................................................................................................................... 11

Definition Lists........................................................................................................................................................................ 11

Hyperlinks................................................................................................................................... 12

Local Links.............................................................................................................................................................................. 12

Absolute Links........................................................................................................................................................................ 12

Bookmark hyperlinks:.......................................................................................................................................................... 12

Mailto: command..................................................................................................................................................................... 13

Embedding Images...................................................................................................................... 14

<IMG SRC> command:........................................................................................................................................................... 14

Hyperlink an Image:............................................................................................................................................................... 14

Tables:......................................................................................................................................... 16

Fixing Column Widths:.......................................................................................................................................................... 18

Setting Table Borders:........................................................................................................................................................... 18

Forms:.......................................................................................................................................... 19

Form Elements......................................................................................................................................................................... 19

Optional attributes are:.......................................................................................................................................................... 20

Form Submission.................................................................................................................................................................... 21

The form-urlencoded Media Type.................................................................................................................................... 21

Example Form Submission:................................................................................................................................................... 21

CGI-BIN...................................................................................................................................... 24


HTML & WEB DESIGN - DAY TWO....................................................................................... X

Image Maps................................................................................................................................. 25

Advanced Formatting.................................................................................................................. 26

Controlling Document Backgrounds.................................................................................................................................. 26

The Bgcolor Attribute............................................................................................................................................................ 26

Text Attributes......................................................................................................................................................................... 26

The Link, Vlink, And Alink Attribute................................................................................................................................ 26

Controlling Individual Text Attributes:.............................................................................................................................. 26

Preventing Line Breaks:....................................................................................................................................................... 27

Multi-Column Text:................................................................................................................................................................ 27

Scrolling:.................................................................................................................................................................................. 27

Margins:................................................................................................................................................................................... 27

Buttons:..................................................................................................................................................................................... 28

Inline Video:............................................................................................................................................................................. 28

Embedded Objects:..................................................................................................................... 28

Frames......................................................................................................................................... 29

NOFRAMES............................................................................................................................... 30

Floating Frames:.......................................................................................................................... 30

META TAGS............................................................................................................................... 31

Abstract..................................................................................................................................................................................... 31

Introduction.............................................................................................................................................................................. 31

The META Tag......................................................................................................................................................................... 31

HTTP-EQUIV........................................................................................................................................................................... 31

NAME........................................................................................................................................................................................ 32

CONTENT................................................................................................................................................................................ 32

Cataloguing an HTML document......................................................................................................................................... 32

Page Transitions..................................................................................................................................................................... 32

Search Engines:...................................................................................................................................................................... 32

Cascading Style Sheets............................................................................................................... 33

The Contents of a Style Sheet............................................................................................................................................... 33

Linking a Style Sheet to a Page........................................................................................................................................... 33

To link a page to an external style sheet............................................................................................................................. 33

Cascading Style Sheets Tip:................................................................................................................................................. 34

Inline Video:................................................................................................................................ 34

Embedded Objects:..................................................................................................................... 34

Cookies........................................................................................................................................ 35

What is XML?............................................................................................................................. 37

Introduction to DHTML............................................................................................................. 38

JAVA AND JAVASCRIPT........................................................................................................ 39

What is needed?...................................................................................................................................................................... 39

Flash - Introduction..................................................................................................................... 40

Shockwave - Introduction............................................................................................................ 40

E-Commerce - Introduction......................................................................................................... 41

A Tutorial on E-commerce..................................................................................................................................................... 41

WebMonkey's HTML Cheat Sheet........................................................................................... 41

Legaleese:

This document mentions several HTML viewers and companies by name, this is not intended as an endorsement of any company or product.  All trademarks are recognized as belonging to their respective owners.

Introduction

Publishing information electronically requires some medium to present the information to the reader. A graphics viewer is used to access pictures, Example. An HTML viewer (or web browser as they are commonly known) is a program which presents electronic documents, in HTML format, to the reader.

The hypertext Mark-up Language (HTML) is a simple data format used to create formatted electronic documents with hyperlinks to other documents and resources (this hyper linking to other documents is known as hypertext) that are portable from one computer platform to another.  That is, an HTML document created on a PC may also be read by a user of a UNIX machine or an Atari, Macintosh and so on. The term "mark-up" is a printing expression describing the process of putting together words and picture to form a document. HTML, is used electronically to put together words (text) and pictures (images) into a finished presentation document. Recent innovations mean that video clips and

sound can also be added,  making HTML a full multimedia publishing medium.

You will probably be familiar with the idea of formatted documents, these are produced by word processors. A formatted document has a variation in its appearance. It looks pretty. Where as an unformatted document has all the text in one style. Links to other documents and resources may be a newer idea for you.

A standard formatted document simply conveys information, and may suggest other sources of information to the reader. A hypertext document does the same, but where a suggestion of other information is made a provision is made for the reader to click the mouse button or press a keyboard button and the program being used to view the hypertext document will load and display the linked document.

Example, this is a formatted text document that you are reading.  If I wish to refer you to another document, titled "order.doc" to view that document you need to select the file option from your viewer software, and open the named file. With a hypertext document, you could simply point the mouse to the words "order.doc" which would be displayed in a different color, and click the mouse button to ask the viewer software to load and display the document. Of course as the author of the document, I would have to include some instruction to the viewer software that would enable you to do that. These instructions form part of the HTML language. They are called "hyperlinks" and provide a path to other documents or resources, called Uniform Resource Locations, or URLs for short.

HTML documents are viewed with an HTML viewer, or "web browser" as they are starting to be known in PC circles. The most common HTML viewers used by PC users are Microsoft's Internet Explorer and Netscape's Navigator. But there are others. Mosaic, by NCSA is available in a number of custom Internet packages including Quarter-deck's Internet connectivity package and is perhaps the next most widely used. What is less well known is that all HTML viewers present HTML documents slightly differently. Although HTML is specified, HTML viewers do not pay too much attention to the official specifications and manufacturers have added support (both documented and not!) for a variety of additional features and commands including built-in Java compilers to understand Java code and support for Frames.

If you are publishing your document for a known audience, you should know which HTML viewer will be used to access the document, and you should be aware of the facilities supported by that viewer. When publishing for the World Wide Web you should remember that your audience is comprised of millions of people, with dozens of different HTML viewers, which whilst supporting basic features, have many discrepancies in their support of advanced features. Some may not even have the ability to display images. So while this e-text describes and illustrates many features found only in one or two HTML viewers, it should not be viewed as a recommendation to use these features for general HTML publishing.


Basic Concepts

As with any aspect of computing, HTML introduces some new concepts and jargon. It is necessary to be familiar with these basic terms in order to understand the rest of this document.

Tags:

Tags provide instructions to an HTML viewer about elements such as headings, paragraphs, lists, character highlighting, and hyperlinks.  Most HTML elements are identified in a document as a start-tag followed by an end tag. The start-tag provides the HTML viewer with the element name and attributes, followed by the content. The end-tag

tells the HTML viewer about the end of the element. Start-tags are delimited by `<'and `>'; end tags are delimited by `</' and `>'.

Example:

 <H1>This is a Heading</H1>

In the above example the start-tag is <H1> and the end-tag is </H1>

Comments:

To include comments in an HTML document, use a comment declaration. The entire comment declaration is ignored.

Example:

 <!-- This is a comment -->

 <!-- This is a multiple-line

 comment -->

Head:

The head of an HTML document, defined by the start-tag <HEAD> and delimited by the end-tag </HEAD>, is where heading information about the document goes. The heading information is an unordered collection of information about the document, such as the title of the document.

Example:

 <HEAD>

 <TITLE>Document Title</TITLE>

 </HEAD>

This example declares the document title to the HTML viewer as "Document Title".

The title element contains your document title and identifies its content in a global context. The title is displayed somewhere on the HTML viewer window (usually at the top), but not within the document area. The title is also used for book marking and during a WAIS search of a server and should be less than 64 characters long.

Title:

Every HTML document must contain a TITLE element. The title should identify the contents of the document in a global context. A short title, such as "Introduction" may be meaningless out of context. A title such as "Introduction to HTML Elements" is more appropriate. An HTML viewer may display the title of a document in a history list or as a label for the window displaying the document.

Example:

<TITLE>Put something descriptive in  the Title area</TITLE>

Body:

The BODY section of an HTML document is where the text to be displayed is placed. This is the largest section of an HTML document, and is defined by the start-tag <BODY> and terminated by the end-tag </BODY>

Example:

 <BODY>

 This is displayed in the HTML viewer text window

 </BODY>

Headings:

Headings are generally displayed in a larger type-face (or font) than the main text. HTML provides two systems for declaring a heading.

The old system, which is recognized by all HTML viewers, supports six sizes of text declared by the start-tags <H1>, <H2>, <H3>, <H4>, <H5> and <H6>, each of which has a corresponding end-tag such as </H1>, </H2> and so on. The text sizes range from <H1> the biggest, through <H3> the default size to <H6> the smallest.

Example:

 <H1>This is a large heading</H1>

 <H3>This is in the normal default size</H3>

 <H6>This is very small!</H6>

Paragraphs:

Unlike most word processors, HTML viewers ignore carriage returns, and additionally multiple spaces are reduced to a single space. The paragraph command (<P> and </P>) tells the HTML viewer that the text contained within the start-tag and end-tag is a paragraph. Paragraphs are displayed by the HTML viewer separated by a single blank line from the preceding items.

Example:

 <P>

 This is a paragraph.

 This second line is actually displayed by an HTML viewer on the same  line as the previous line, as the carriage return is ignored.

 </P>

 <P>

 This second paragraph is displayed with a single blank line between  it and the previous paragraph.

 </P>

This results in the following to be displayed by an HTML viewer:

This is a paragraph. This second line is actually displayed by an  HTML viewer on the same line as the previous line, as the carriage  return is ignored.   This second paragraph is displayed with a single blank line between  it and the previous paragraph.

Alignment:

Text and images may be aligned to the left, to the right, centered or justified.

Lists:

A list is simply a list of items. The HTML viewer automatically starts each list item on a new line, and handles list numbering and bulleting depending upon how the HTML author has declared the list.

Hyperlinks:

Hyperlinks are a provision allowing the user of the HTML document to navigate through the document and to external resources. Hyperlinks may be local, allowing navigation within the currently loaded document, or external providing access to other documents not loaded and resources such as ftp servers and mail servers.  These generally come in blue text and underlined


A Basic HTML Document

A simple HTML document is comprised of the following components:

NOTE: Use lower case whenever possible, the examples are upper case for emphasis.

<HTML> A HTML declaration tag,

<HEAD> A heading tag,

<TITLE> A title, such as within the Head.

<BODY> A body declaration tag:

The main body of the document - this is what the people browsing will see.

A body termination tag </BODY> and finally an HTML termination tag: </HTML>

Example:

  <HTML>

 <HEAD>

 <TITLE>Example HTML Document</TITLE>

 <BODY>

 This is an example HTML document.

 </BODY>

 </HTML>

Adding Headings:

Headings can be added to an HTML document with the heading tags in the BODY section;

<H1> through <H6>.

Example:

  <HTML>

 <HEAD>

 <TITLE>Example HTML Document</TITLE>

 <BODY>

 <H1>Main Heading</H1>

 <P>

 This is an example HTML document.

 </P>

 </BODY>

<P> Paragraph command

 Notice the use of the paragraph start-tag <P> and end-tag </P> which tells the HTML viewer to display the text as a new paragraph, and not as a continuation of the heading line.

Simple Formatting

HTML viewers do not recognize carriage-returns in the text. Instead, they display the text as continuous lines, breaking each line at a word end so that it fits in the text window. This is known as word-wrap. You can force a line break with the HTML tag <BR>.

<BR> Line Break command

Example:

This is line one<BR>This is line two

Which displays as:

 This is line one

 This is line two

<Center> command

Centering a line of text is also easy. The HTML tag <CENTER> causes all subsequent text and images to be displayed in the centre of the text window until a </CENTER> end-tag is reached.

Example:

<CENTER>

<H1>Main Heading</H1>

<P>

This is an example HTML document.

</CENTER>

If you just want to center a single heading, you can use the "align=" command within the heading tag, Example: <H1 align=center>

The example HTML document would then look like this:

<H1 align=center>Main Heading</H1>

<P>

 This is an example HTML document.

<ALIGN> command

The ALIGN= command may also be added to the paragraph tag, <P> to align an entire paragraph, Example:

 <P ALIGN=CENTER>In addition to defining the size of the typeface used to display text (heading), HTML also supports bold, italic, strikethrough, underline, subscript and superscript formats. The following example illustrates the popular formatting tags:

<H1 align=center>Main Heading</H1>

 <P>

Paragraphs are contained within a <P> and </P> tag pair, although the end-tag </P> is not needed if another paragraph starts with a <P> start-tag. Paragraphs may be aligned, with the "align=" command,

Example:

A standard paragraph

<P>

Left aligned paragraph

<P align=left>

Center aligned paragraph

<P align=center>

Right aligned paragraph

<P align=right>

<I> Italicize (Emphasis or Citation) command:

Text defined as italic.  An Italic address is declared by the tag pair <I > and </I >,

Example:

 <I>

 This text will normally be displayed in italic.

 </I>

<B> Bold (Strong) command:

Strong text is declared by the tag pair <B> and </B> and is usually displayed in bold.

<UL> Indentation (Blockquote) command:

Text defined as a UL or "Blockquote" for older browsers is displayed as a new paragraph, and usually displayed indented from the left margin, and with some HTML viewers in a unique typeface. A UL is declared by the tag pair: <UL> and </UL>, remember it's not the <I> command - that's italicize!

Example:

<UL>

            This section will normally be displayed indented.

 </UL>

<CODE> Source Code command:

Source code is declared by the tag pair <CODE> and </CODE> and is usually displayed in a fixed width font, though this may be changed by the user of the HTML viewer.  Generally used to show how the coding is done and not having the browser actually do it.

<H1> (Big) command:

Big text is declared by the tag pair <H#> and </H#> and is usually displayed larger than the ordinary text and has up to 6 sizes.

Dividers

HTML provides three basic ways of dividing a document window: Paragraphs, Line Breaks, and Horizontal Rules.

Line breaks are enforced with the <BR> tag. When an HTML viewer encounters the <BR> tag, the cursor is moved down one line and to the left of the window. If an alignment is in operation, the next displayed line will be aligned correctly.

<HR> command:

Horizontal rules are affected with the <HR> tag. This tells the HTML viewer to display a graphical horizontal line across the entire width of the window. The form of the rule can be amended with the optional "size=", "width=", "noshade" and "align=" parameters.

The vertical thickness of the horizontal rule can be defined by adding a size= parameter to the <HR> tag. The number following the size= parameter tells the HTML viewer how many vertical pixel lines to use for the rule.

Example:

 <HR size=4>

By default, a horizontal rule extends the entire width of the window. The width= parameter may be used to specify the horizontal width of the rule either in pixels, or as a percentage of the window width:

 <HR width=100> or  <HR width=50%> <- this one is preferable

Horizontal rules are usually aligned in the center of the window, or if an alignment is in force, they follow the rules of the current alignment. This may be overridden by the align= parameter,

Example:

 <HR align=left>  <HR align=center>  <HR align=right>

Finally, horizontal rules are displayed in a 3d representation. This can be changed to a solid thick 2 dimensional line with the noshade parameter:

  <HR noshade>

As usual, these parameters can be mixed together,

Example:

 <HR align=right width=50% size=10 noshade>


Lists

HTML supports a number of types of list: Ordered, Unordered, Definition, Menu and Directory.

Ordered lists are displayed one item per line, with a sequential numbering system to the left of each item. An ordered list is declared by the start-tag <OL> and terminated with the end-tag </OL>.  Individual items are declared with the tag <LI>.

Ordered Lists

Example:

 <OL>

 <LI> Item one

 <LI> Item two

 <LI> Item three

 </OL>

Which is displayed by an HTML viewer as:

 1.   Item one

 2.   Item two

 3.   Item three

The numbering system may be amended with the optional TYPE= command.

The valid types are A,a,I,i, giving the following displays:

Example:

Capital A <OL TYPE="A">

 A.   Item one

 B.   Item two

 C.   Item three

Small A <OL TYPE="a">

 a.   Item one

 b.   Item two

 c.   Item three

Numbered Lists  <OL TYPE="1">

1. Item One

2. Item Two

3. Item Three

Roman Capital <OL TYPE="I">

 I.   Item one

 II.  Item two

 III. Item three

Roman Small <OL TYPE="i">

 i.    Item one

 ii.   Item two

 iii.  Item three

 

The starting number may be defined by adding a START= command to the ordered list declaration,

Example:

<OL START=100>

Which then produces the following display:

 100. Item one

 101. Item two

 102. Item three

The numbering order may be further amended during the list by adding a VALUE= command to a list item declaration,

Example:

<OL START=100>

 <LI> Item one

 <LI VALUE=500> Item two

 <LI> Item three

 </OL>

Which produces the following display:

 100. Item one

 500. Item two

 501. Item three

Unordered Lists

An unordered list is displayed without numbering, but with bullets,

Example:

 <UL>

 <LI> Item one

 <LI> Item two

 <LI> Item three

 </UL>

Which is displayed by an HTML viewer as:

·         Item one

·         Item two

·         Item three

Some HTML viewers allow the bullet style to be redefined with a TYPE=command, accepting the values DISC, CIRCLE and SQUARE,

Example:

 <UL TYPE=SQUARE>

 <LI> Item one

 <LI> Item two

 <LI> Item three

 </UL>

Directory lists

Directory lists are specified by the <DIR> element, are similar to unordered lists. They represent a list of short items, typically up to 20 characters each. Items in a directory list may be arranged in columns, typically 24 characters wide, but may not be nested (unlike

other lists). Some HTML viewers will further display directory lists in a different font to other lists.

Definition Lists

Definition lists are used for listing terms and their definitions. A definition list is declared with the start-tag <DL>, and rather than using the list item tag <LI>, it uses a pair of tags, data-term and data-definition, <DT> and <DD> respectively. The data-definition is

displayed indented from the preceding data-term.

Example:

 <DL>

 <DT>Definition one

 <DD> Description of definition one which can wrap around to more  than one line

 <DT>Definition two

 <DD> Description two which can wrap around<BR>to more than one line

 <DT>Definition three

 <DD> Description of definition three

 </DL>

Which is displayed by an HTML viewer as:

 Definition one

      Description of definition one which can wrap around to more than one line

 Definition two

      Description of definition two which can also wrap around to more than one line

 Definition three

      Description of definition three


Hyperlinks

Hyperlinks enable the user of an HTML document to navigate through the currently loaded document (using local hyperlinks) and to external resources.

All  hyperlinks are defined in the HTML source code by anchors. An anchor is the following HTML code: <A..>.  There are local links and absolute links.

Local Links

A local link is one that will bring the person to another page on your website.

Example:

 <A HREF="page2.html">Click Here For Page Two</A>

Absolute Links

An absolute link is one that will take the person to another website.

Example:

<A HREF="http://tom.mclaughlin.net>Click Here for Tom's Website</A>

An image could be used instead of the text, by replacing the hyperlink display text with an inline image command,

Example:

 <A HREF="http://page2.html"><img src="part2.gif" alt="page 2 graphic"></A>

Bookmark hyperlinks:

Local hyperlinks, known as "Fragment Identifiers", are defined in a hypertext address by a # character following the resource.  If navigation is required within the local document, the resource may be omitted so that a local hyperlink may look like:

 <A HREF="#introduction">Introduction</A>

Selecting this hyperlink will cause the HTML viewer to search the current document for a declaration of "introduction". This declaration is achieved with the anchor name tag <A NAME=>, like this:

 <A NAME="Introduction">

Notice that the <A NAME=> tag does not have an end-tag, and is case insensitive. It doesn't matter if the anchor name is declared as "INTRODUCTION" or "Introduction" or even "introDuction" it will still be found by a hyperlink to "#introduction".  Local hyperlinks can be added to hyperlinks to external documents to force the HTML viewer to load an external document and then navigate straight to a desired section within that document.

Example:

 <A HREF="http://page2.html#section_3">Life and Love</A>

This will create a hyperlink to the anchor "section_3" within the HTML document "part_two.htm".  The following HTML document illustrates the use of local hyperlinks to form a table of contents to a document. Although this document is very short, you can see how the principle can be applied to longer and more complex documents.

*Copy and Paste this part unto Notepad and save it as "jumper.html"*

 <HTML>

 <HEAD>

 </HEAD>

 <BODY>

 <TITLE>Local Hyperlink Example HTML document</TITLE>

  <P>

 <H2>Contents</H2>

  <OL>

 <LI><A HREF="#AEGIR">Aegir</A>

 <LI><A HREF="#AESIR">Aesir</A>

 <LI><A HREF="#ASGARD">Asgard</A>

 <LI><A HREF="#BALDER">Balder</A>

</OL>

  <A NAME="AEGIR"><I><B>Aegir</B></I>

 <P>

 In Norse mythology, Aegir is the god of the sea.

 <P>

 <A NAME="AESIR"><I><B>Aesir</B></I>

 <P>

 The Aesir were the principal gods in Norse mythology.

 They lived in <A HREF="#ASGARD">Asgard</A>.

 <P>

 <A NAME="ASGARD"><I><B>Asgard</B></I>

 <P>

 In Norse mythology Asgard was the home of the gods.

 <P>

 <A NAME="BALDER"><I><B>Balder</B></I>

 <P>

 In Norse mythology, Balder was the son of Odin and Freya and husband  of Nanna,

 and the best, wisest, and most loved of all the gods. He was killed, at  Loki's instigation, by a twig of mistletoe shot by the blind god  Hodur.

 <P>

</BODY>

 </HTML>

*End Copy and Paste*

Netscape introduced a number of new commands for hyperlinks. TARGET=can be used to open the hyperlink document in a new instance of the HTML viewer, or a specified frame. More about frames in Advanced HTML.

Example:

 <A HREF=next.htm TARGET=_BLANK>Next Document</A>

When the hyperlink "Next Document" is selected, the document "next.htm" will be opened and displayed in a new instance of the HTML viewer.

Hyperlinks are not restricted to other HTML documents. They can be used to access news servers, gopher servers, send mail and access ftp servers.

Mailto: command

A hyperlink to send mail uses the URL "mailto:"

Example the following link attempts to send an email message to me:

 <A HREF="mailto:tom@mclaughlin.net">Feedback</A>

Some HTML viewers will also support the addition of an optional subject, to save the user typing it in.

Example:

 <A HREF="mailto:tom@mclaughlin.net" ?SUBJECT=Feedback>Feedback</A>

Files can be sent to the user through FTP links, to send a specific file, use something like:

 < A HREF="ftp://server/path/filename">Download HTML notes zipped file</A>

Example:

 Download <a href="ftp://tom.mclaughlin.net/htmlnotes.zip">HTMLnotes.ZIP</A>

The HTML viewer will usually contact the FTP server, and attempt to connect using the name "anonymous" and sending the user's email address as a password.


Embedding Images

What would a website be like without pictures? Boring!  Might as well have a text file up to read.  While it may be good to have a lot of information up on the website, it depends of course on your target audience, but pictures do enhance even technical pages. 

My suggestion is have no more then 3 pictures per page.  Why? Because of loading times, and distraction from the fact of what you are trying to say to the viewer.  Remember a picture is worth a 1000 words, so how many would 4 or more pictures worth? I think you get my point, that would be a lot of reading!

Pictures come in 3 standard formats for the Internet:  *.JPG, *.BMP, *.GIF

- JPG, or JPEG's (Joint Photographic Experts Group) are great for clarity and footprint size, they are compressed files but don't loose any of the sharpness of the picture. I recommend this for most of your pictures.

- BMP (Bit Maps) are great for paintings, or cartoon type characters.  If your picture has any letters in it, such as "SALE!" I would suggest you would  want to use the BMP as the JPG would square off the letters.

- GIF (Graphics Interchange Format) is used for motion type pictures. You know, the one's with the running dog across the screen?  Plus you can make rotating banners with it via GIF89, usually included with Front Page or other programs.

Most newer HTML viewers can display pictures, called images, in various forms.  The most popular being GIF and JPEG formats. The procedure for telling the HTML viewer to display the image is the same regardless of the image format:

 <img src="imagename">

 Example:

 <img src="picture.gif">

Will cause the HTML viewer to display the image "picture.gif".

Some HTML viewers cannot display images, so you can provide text which will be displayed by these viewers instead of the image by including it with the "alt=" parameter,  this is a good habit to get into, we will discuss this later under Search Engine on the Advanced Level of HTML.

Example:

 <img src="picture.gif" alt="Picture of a tree">

The image may be aligned in relation to the surrounding text using the optional "align=" parameter. If no alignment parameter is specified, text following the image will be displayed at the bottom right of the image. Different HTML viewers handle the alignment of text and images differently, so be careful!

The size of the image can be declared to the HTML viewer with the optional "width=" and "height=" parameters. If these are not specified, the HTML viewer will display the image at its full size. If however you specify these size parameters, the image will be displayed

to the specified size in pixels.

Example:

 <img src="picture.gif" width=640 height=480>

Remember for better search engine positioning, put the Alt (alternate) command with your picture!

<IMG SRC> command:

To insert a picture into your website, you need the <img src="picutrename.jpg> command.  You can place graphic images on your pages, if the graphic image is stored as a separate file on your server or some other server on the net. The file format must be readable by the browser.

There are two common types of images: the ".GIF" or ".JPG" formats. While .gif pictures are common, I have found the .jpg gives the same image, but is smaller in file size, meaning quicker loading time and less file space taken up on your homepage.

In it's simplest form, the tag to cause a graphic to be placed on the page looks like this: "<img src="Ted2.jpg">"

You can control the position of the image. The most basic way to do this is to treat it as text. For example, surrounding the image tag with "<center> Ted2.jpg </center>" tags.  If you want the image to have a name while loading, put a "alt=name" in the command line, or even what size you wish to have it displayed at, then the following commands must be added:
<center><img src="Ted2.jpg" alt=Freddie width=100 height=100><center>

that will control the size and position of the graphic, you can experiment to what size the graphic can be by increasing or decreasing the numbers.

Hyperlink an Image:

If you wish to use the graphic as a hyperlink to another page, then "surround" the image command with the hyperlink command you learned earlier.

Example:

<a href=page2.html><img src=Ted2.jpg alt="Freddie the Teddie"></a>, and if you don't wish to have a border around the image use: <img src=Ted2.jpg border=none alt="Freddie the Teddie"> command.

One very important thing to remember always spell the name of the image EXACTLY the way it is saved as. Meaning if it has a Capital letter, or if it is all lower case, then it has to be called up that way. I get a lot of requests from people "I can't get my graphic to show, how come?"...well their spelling and capitalization is wrong.

Like the teddy bear image, it's called "Ted2.jpg" notice the Captial "T" in Ted2.jpg. If I went then and by accident used a small "t" instead <img src=ted2.jpg> it will show up as what is called a "broken image. 

There is much more to be said about graphic images, since they are a key element in really good pages, and can also detract from your page by making it very "slow" or crowded. Use graphics sparingly, or at the most, use a lot of ".jpg" formats. One urge every newbie has is to put EVERYTHING on their first homepage page like me, yes, I admit I did it, so after about 3 hours of loading your page finally is able to view!

Learn to make more pages, and less graphics! Or use design software to make “thumbnails” (smaller versions of the pictures) and link those thumbnails to the larger picture.


Good graphic programs are Adobe Photoshop 6.0 or Print Shop Pro 7 (almost the same in quality and cheaper in price as Adobe).


Tables:

The HTML table tags enable an HTML author to display information in a tabular format. A table is a grid of cells, each cell may contain a mixture of text and images and be a different size to the other cells in the table.

A table is declared within the start-tag <TABLE> and end-tag </TABLE>.  You can specify a border and its width in pixels for the table by adding a BORDER= command to the table start-tag,

Example:

 <TABLE BORDER=1>

Will give the displayed table a border 1 pixel wide. A wider border can be forced with BORDER=10

Example:

 <TABLE BORDER=10>

The spacing between the cells can also be determined in pixels with the CELLSPACING= command. If you want a 10 pixel gutter between the table cells add the command CELLSPACING=10 to the table start-tag:

 <TABLE CELLSPACING=10>

The spacing between the cell walls and the enclosed data  can also be determined in pixels with the CELLPADDING= command. If you want a 10 pixel gutter between the table cell walls and the data in the cell add the command CELLPADDING=10 to the table start-tag:

 <TABLE CELLPADDING=10>

Finally the width of the table can be expressed in pixels, or as a ratio of the document window width with the WIDTH= command;

 <TABLE WIDTH=50%>

Putting this together we might want a table 200 pixels wide, with a cell spacing of 5 pixels and a border of 4 pixels width. The following table start-tag will achieve this:

 <TABLE CELLSPACING=5 WIDTH=200 BORDER=4>

A caption can be included for the table with the caption tags <CAPTION> and </CAPTION>. The text or image contained within the caption tags will usually be displayed centred at the top of the table, just above the top border line. You can force the caption to be displayed below the table by adding the ALIGN=BOTTOM command to the caption start-tag,

Example:

 <TABLE>

 <CAPTION>This caption displays above the table</CAPTION>

 </TABLE>

  <TABLE>

 <CAPTION ALIGN=BOTTOM>This caption displays below the table</CAPTION>

 </TABLE>

Table cells are defined in terms or rows and within the rows, columns (either "table header" or "table data" cells). A table row is defined within the tags <TR> and </TR>,

Example:

 <TABLE>

 <TR>

This is a table cell...

 </TR>

 </TABLE>

A table header column is defined within a row by the tags <TH> and </TH>, Example;

 <TABLE>

 <TR>

 <TH>

 This is a table!

 </TH>

 </TR>

 </TABLE>

Table header cells are, by default, displayed in BOLD and aligned in the center both horizontally and vertically.

A table data column is defined within a row by the tags <TD> and </TD>,

Table data cells are, by default, aligned left and vertically centered within the cell.

Each table column may have individual alignment characteristics defined by the ALIGN= and VALIGN= commands which override the default settings. The ALIGN= command can be used to force the display to the left or right of the cell, and the VALIGN= command to force the display to the top or bottom of the cell

Example:

 <HTML>

 <HEAD>

 <TITLE>Table Example</TITLE>

 </HEAD>

  <TABLE CELLSPACING=10 BORDER=1 WIDTH=100%>

 <CAPTION ALIGN=BOTTOM>Table Caption</CAPTION>

 <TR>

 <TD>

 Cell One is aligned to the left and in the center vertically

 </TD>

 <TD>

 Cell Two

 <P>has multiple lines

 <P>in it

 <P>and is displayed to the left of the cell

 </TD>

 </TR>

  <TR>

 <TD ALIGN=CENTER VALIGN=TOP>

 Cell Three is centered horizontally,

 <P>at the top of the cell

 </TD>

 <TD ALIGN=RIGHT>

 Cell Four is another

 <P>multiple line cell

 <P>displayed to the right

 </TD>

  </TR>

 </TABLE>

 </BODY>

 </HTML>

You can stop the HTML viewer from word-wrapping the text within a cell by adding the command NOWRAP to the cell definition,

Example:

 <TD NOWRAP>This text will be displayed as one long line</TD>

The size of the cell can be determined, to a degree, with the COLSPAN=and ROWSPAN= commands. These tell the HTML viewer how many columns and rows the cell is to span in relation to the rest of the table.

Example:

 <HTML>

 <HEAD>

 <!-- Example of a simple table -->

 <TITLE>Simple Table</TITLE>

 </HEAD>

 <BODY>

 <TABLE BORDER=1>

 <TR><TH colspan=3>Protoplasm</TH></TR>

 <TR><TH>Plants</TH><TH>Invertebrates</TH><TH>Vertebrates</TH></TR>

 </TABLE>

 </BODY>

 </HTML>

Blank or empty cells can be defined to force cells within a row to the right,

Example:

 <TD></TD>

Microsoft's Internet Explorer supports use of the BGCOLOR= command in the <TABLE> tag.  It allows the background colour of the table to be specified using a standard rrggbb hex triplet.

Example:

 <TABLE BGCOLOR="FFFFFF">

Microsoft's Internet Explorer includes support for the BORDERCOLOR=command which sets the border colour of the table. It takes as a parameter a rrggbb hex triplet.  It is necessary for the BORDER attribute to be present in the main <TABLE> tag for border colouring to work.

Microsoft's Internet Explorer allows use of the BORDERCOLORLIGHT=command to set independently, the lighter colour to be displayed on a 3-dimensional <TABLE> border.  It is the opposite of BORDERCOLORDARK.  It takes a colour parameter defined by a rrggbb hex triplet.  It is necessary for the BORDER attribute to be present in the main <TABLE> tag for border colouring to work.

Microsoft's Internet Explorer allows use of the BORDERCOLORDARK=command to set independently, the darker colour to be displayed on a 3-dimensional <TABLE> border.  It is the opposite of BORDERCOLORLIGHT.  It takes as a parameter a colour defined by a rrggbb hex triplet.  It is necessary for the BORDER attribute to be present in the main

<TABLE> element for border colouring to work.

NOTE: The BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT and BORDERCOLORDARK attributes can also be used in <TH>, <TR> and <TD>tags, with the colour defined in the last element over-riding those defined before.  E.g. if a <TD> element contains a BORDERCOLOR attribute setting, the setting specified will be used instead of any colour settings that may have been specified in the <TR> element, which in turn over-rides any colour settings in the <TABLE> element.

Some HTML viewers support the placing of background images inside the <TABLE>, <TH> and <TD> tags. If used in the <TABLE> element, the image will be tiled behind all of the table cells.

Example:

 <TABLE BACKGROUND="myimage.gif">

Fixing Column Widths:

The HTML viewer property of displaying images within table cells can be exploited to create fixed column widths in a table, where the data contained within the columns varies in width. Normally, the HTML viewer generates columns based upon the widest element in the table column, creating uneven column widths. However, by forcing one cell in each column to a desired width, as wide or wider than the widest cell, you can create even column widths. One way to do this is to create a GIF image, of a single colour 2 x 2 pixel in size and make it transparent. Being so small this image will occupy a negligible amount of disk space and load even remotely very fast. Then this image can be used as an invisible element within a table cell to widen the cell as desired. The following example does not work with Mosaic, which does not support the image HEIGHT= and WIDTH= commands within a table cell, but it does work with Internet Explorer:

 <HTML>

 <HEAD>

 <!-- Example of a fixed width table -->

 <TITLE>Table</TITLE>

 </HEAD>

 <BODY>

  <TABLE BORDER=1>

 <CAPTION><H1>Fixed Width Table Demonstration</H1></CAPTION>

 <TR>

 <TD><IMG SRC=spacer.gif height=1 width=300><BR>1.00</TD><TD><IMG

 SRC=spacer.gif height=1 width=300><BR>8654.88</TD><TD><IMG

 SRC=spacer.gif  height=1 width=300><BR>7430456.78</TD> <TR>

 <TD>46.00</TD><TD>87134.93</TD><TD>4031565.42</TD> <TR>

 <TD>51.00</TD><TD>554.10</TD><TD>440436.67</TD> <TR>

 <TD>11.00</TD><TD>6414.43</TD><TD>472816.72</TD> <TR>

 <TD>83.00</TD><TD>9824.01</TD><TD>734436.63</TD> </TR>

 </TABLE>

 </BODY>

 </HTML>

Setting Table Borders:

Internet Explorer supports the use of the FRAME= command which requires the BORDER= command to be set and affects the display of the table borders.  It can accept any of the following parameters:

void      this removes all the external borders

above     this displays external borders at the top of the table only

below     this displays external borders at the bottom of the table only

hsides    this displays external borders at the horizontal sides of the table. ie: at the top and bottom.

lhs       this displays external borders at the left hand edges of the table only

rhs       this displays external borders at the right hand edges of the table only.

vsides    this displays external borders at both left and right hand edges of the table

box       this displays a box around the table (i.e. top, bottom, left and right hand sides)

Internet Explorer supports the RULES= command.  It requires the BORDER value to be set and may only be used in tables where the <THEAD>, <TBODY> and <TFOOT> tags have been declared.  It affects the display of the internal table borders ("rules").  It can accept the following parameters:

 none      this removes all the internal rules

 basic     this displays horizontal borders between the <THEAD>, <TBODY> and <TFOOT> sections

 rows      this displays horizontal borders between all rows

 cols      this displays horizontal borders between all columns

 all       this displays all the internal rules.

Internet Explorer provides the <COLGROUP> and </COLGROUP> tag pair which can be used within a <TABLE> definition to group columns together to set their alignment properties.  It accepts the following attributes:

ALIGN="center|justify|left|right"

This sets the text alignment within the column group. The default value is "center"

 VALIGN="baseline|bottom|middle|top"

This sets the vertical text alignment within the column group.

  SPAN=

 This can be used to set the number of columns upon which the ALIGN and VALIGN attributes are to act.


Forms:

Forms provide a mechanism for passing information from the HTML viewer back to a program at the web server or through email to you.  Forms are the best way to get "true time" results or comments from your clients/viewers.   We will be discussing this in depth in next (Intermediate) level of HTML.

A form is a template for a form data set and an associated method and action URI used on the WWW. Forms have no relevance to local HTML publishing. A form data set is a sequence of name/value pair fields. The names are specified on the NAME attributes of form input elements, and the values are given initial values by various forms of markup and edited by the user. The resulting form data set is used to access an information service as a function of the action and method.

Forms elements can be mixed in with document structuring elements. Example, a PRE element may contain a FORM element, or a FORM element may contain lists which contain INPUT elements. This gives considerable flexibility in designing the layout of forms.

Form Elements

<FORM>

The <FORM> element contains a sequence of input elements, along with document structuring elements. The attributes are:

ACTION= specifies the action URI for the form. The action URI of a form defaults to the base URI of the document.

METHOD= selects a method of accessing the action URI. The set of applicable methods is a function of the scheme of the action URI of the form. See section Query Forms: METHOD=GET and section Forms with Side-Effects:

METHOD=POST.

ENCTYPE = specifies the media type used to encode the name/value pairs for transport, in case the protocol does not itself impose a format.

<INPUT>

The <INPUT> element represents a field for user input. The TYPE= attribute discriminates between several variations of fields.

The <INPUT> element has a number of attributes. The set of applicable attributes depends on the value of the TYPE= attribute.

The default value of the TYPE attribute is `TEXT', indicating a single line text entry field. (Use the TEXTAREA element for multi-line text fields.)

Required attributes are:

NAME, the name for the form field corresponding to this element.

The optional attributes are MAXLENGTH which constrains the number of characters that can be entered into a text input field. If the value of MAXLENGTH is greater than the value of the SIZE attribute, the field should scroll appropriately. The default number of characters is unlimited.

SIZE specifies the amount of display space allocated to this input field according to its type. The default depends on the user agent.

VALUE defines the initial value of the field.  Example:

 <p>

 Street Address:

 <input name=street><br>

 Town:

 <input name=city size=20 maxlength=20><br>

 Post Code:

 <input name=post size=10 maxlength=10><br>

An INPUT element with `TYPE=PASSWORD' is a text field as above, except that the value is obscured as it is entered.

Example:

 <p>Name:

 <input name=login>

 Password:

 <input type=password name=passwd>

An INPUT element with `TYPE=CHECKBOX' represents a boolean choice. A set of such elements with the same name represents an n-of-many choice field. Required attributes are:

NAME a symbolic name for the form field corresponding to this element or group of elements.

VALUE the portion of the value of the field contributed by this element.

Optional attributes are:

CHECKED indicates that the initial state is on.

Example:

 <p>

 What flavours do you like?

 <input type=checkbox name=flavour value=vanilla>

 Vanilla<br>

 <input type=checkbox name=flavour value=strawberry>

 Strawberry<br>

 <input type=checkbox name=flavour value=chocolate checked>

 Chocolate<br>

An INPUT element with `TYPE=RADIO' represents a boolean choice. A set of such elements with the same name represents a 1-of-many choice field. The NAME and VALUE attributes are required as for check boxes.

Optional attributes are:

CHECKED indicates that the initial state is on.

At all times, exactly one of the radio buttons in a set is checked. If none of the INPUT elements of a set of radio buttons specifies `CHECKED', then the user agent must check the first radio button of the set initially.

Example:

 <p>

 Which is your favorite?

 <input type=radio name=flavour value=vanilla>

 Vanilla<br>

 <input type=radio name=flavour value=strawberry>

 Strawberry<br>

 <input type=radio name=flavour value=chocolate>

 Chocolate<br>

An INPUT element with `TYPE=IMAGE' specifies an image resource to display, and allows input of two form fields: the x and y coordinate of a pixel chosen from the image. The names of the fields are the name of the field with `.x' and `.y' appended. `TYPE=IMAGE' implies `TYPE=SUBMIT' processing; that is, when a pixel is chosen, the form as a whole is submitted.

The NAME attribute is required as for other input fields. The SRC attribute is required and the ALIGN is optional as for the IMG element.

Example:

 <p>

 Choose a point on the map:

 <input type=image name=point src="map.gif">

An INPUT element with `TYPE=HIDDEN' represents a hidden field.The user does not interact with this field; instead, the VALUE attribute specifies the value of the field. The NAME and VALUE attributes are required.

Example:

 <input type=hidden name=context value="l2k3j4l2k3j4l2k3j4lk23">

An INPUT element with `TYPE=SUBMIT' represents an input option, typically a button, that instructs the user agent to submit the form.

Optional attributes are: 

NAME indicates that this element contributes a form field whose value is given by the VALUE attribute. If the NAME attribute is not present, this element does not contribute a form field.

VALUE indicates a label for the input button. 

Example:

 You may submit this request internally:

 <input type=submit name=recipient value=internal><br>  or to the external world:

 <input type=submit name=recipient value=world>

An INPUT element with `TYPE=RESET' represents an input option, typically a button, that instructs the user agent to reset the form's fields to their initial states. The VALUE attribute, if present, indicates a label for the input button.

Example:

 When you are finished, you may submit this request:

 <input type=submit><br> You may clear the form and start over at any time:

 <input type=reset>

The SELECT element constrains the form field to an enumerated list of values. The values are given in OPTION elements. Attributes are:

MULTIPLE indicates that more than one option may be included in the value.

NAME specifies the name of the form field.

SIZE specifies the number of visible items. Select fields of size one are typically pop-down menus, whereas select fields with size greater than one are typically lists.

Example:

 <SELECT NAME="flavor">

 <OPTION>Vanilla

 <OPTION>Strawberry

 <OPTION value="RumRasin">Rum and Raisin

 <OPTION selected>Peach and Orange

 </SELECT>

The initial state has the first option selected, unless a SELECTED attribute is present on any of the OPTION elements.

The Option element can only occur within a Select element. It represents one choice, and has the following attributes:

SELECTED Indicates that this option is initially selected.

VALUE indicates the value to be returned if this option is chosen. The field value defaults to the content of the OPTION element.

The content of the OPTION element is presented to the user to represent the option. It is used as a returned value if the VALUE attribute is not present.

The TEXTAREA element represents a multi-line text field. Attributes are:

COLS the number of visible columns to display for the text area, in characters.

NAME specifies the name of the form field.

ROWS the number of visible rows to display for the text area, in characters.

Example:

 <TEXTAREA NAME="address" ROWS=6 COLS=64>

 HAL Computer Systems

 1315 Dell Avenue

 Campbell, California 95008

 </TEXTAREA>

The content of the TEXTAREA element is the field's initial value.

Typically, the ROWS and COLS attributes determine the visible dimension of the field in characters. The field is typically rendered in a fixed-width font. HTML user agents should allow text to extend beyond these limits by scrolling as needed.

Form Submission

An HTML user agent begins processing a form by presenting the document with the fields in their initial state. The user is allowed to modify the fields, constrained by the field type etc. When the user indicates that the form should be submitted (using a submit button or image input), the form data set is processed according to its method, action URI and enctype.

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

The form-urlencoded Media Type

The default encoding for all forms is `application/x-www-form-urlencoded'. A form data set is represented in this media type as follows:

1. The form field names and values are escaped: space characters are replaced by `+', and then reserved characters are escaped as per URL; that is, non-alphanumeric characters are replaced by `%HH', a percent sign and two hexadecimal digits representing the ASCII code of the character. Line breaks, as in multi-line text field values, are represented as CR LF pairs, i.e. `%0D%0A'.

2. The fields are listed in the order they appear in the document with the name separated from the value by `=' and the pairs separated from each other by `&'. Fields with null values may be omitted. In particular, unselected radio buttons and checkboxes should not appear in the encoded data, but hidden fields with VALUE attributes present should.

Query Forms: METHOD=GET

If the processing of a form is idem potent (i.e. it has no lasting observable effect on the state of the world), then the form method should be `GET'. Many database searches have no visible side-effects and make ideal applications of query forms.

To process a form whose action URL is an HTTP URL and whose method is `GET', the user agent starts with the action URI and appends a `?' and the form data set, in `application/x-www-form-urlencoded' format as above. The user agent then traverses the link to this URI just as if it were an anchor (see section Activation of Hyperlinks).

Forms with Side-Effects: METHOD=POST

If the service associated with the processing of a form has side effects (Example, modification of a database or subscription to a service), the method should be `POST'.

To process a form whose action URL is an HTTP URL and whose method is `POST', the user agent conducts an HTTP POST transaction using the action URI, and a message body of type `application/x-www-form-urlencoded' format as above. The user agent should display the response from the HTTP POST interaction just as it would display the response from an HTTP GET above.

Example Form Submission:

<html><head>

<title>Sample of HTML Form Submission</title>

 <H1>Sample Questionnaire</H1>

 <P>

 Please fill out this questionnaire:

 <FORM METHOD="POST" ACTION="http://www.w3.org/sample">

 <P>

 Your name: <INPUT NAME="name" size="48">

 <P>

 Male <INPUT NAME="gender" TYPE=RADIO VALUE="male">

 <P>

 Female <INPUT NAME="gender" TYPE=RADIO VALUE="female">

 <P>

 Number in family: <INPUT NAME="family" TYPE=text>

 <P>

 Cities in which you maintain a residence:

 <UL>

 <LI>Kent <INPUT NAME="city" TYPE=checkbox VALUE="kent">

 <LI>Miami <INPUT NAME="city" TYPE=checkbox VALUE="miami">

 <LI>Other <TEXTAREA NAME="other" cols=48 rows=4></textarea>

 </UL>

 Nickname: <INPUT NAME="nickname" SIZE="42">

 <P>

 Thank you for responding to this questionnaire.

 <P>

 <INPUT TYPE=SUBMIT> <INPUT TYPE=RESET>

 </FORM>

Note that the radio input has an initial value, while the checkbox has none.

The user might edit the fields and request that the form be submitted.

Interpretation of the message submitted is done by the URI. This requires you to have access to your WWW server and knowledge of CGI.

<html><head>

<title>example of forms</title>

</head>

<body>

<FORM METHOD="POST" ACTION="../cgi-bin/test-cgi">

<p>Enter Your Name:

<input type="text" name="longText" size="50" maxlength="30">

<p>please enter your password     <input type="password" name="passwd">

<p>Choose an Animal

<ul>

<li><input type="radio" name="theType" value="cat"> cat

<li><input type="radio" name="theType" value="dog">dog

<li><input type="radio" name="theType" value="fish"> fish

</ul>

Choose a vegetable.

<ul>

<li><INPUT TYPE=RADIO  NAME="vegg"  VALUE="tom">tomato<BR>

<li><INPUT TYPE=RADIO  NAME="vegg"  VALUE="zuch">zuchinni<BR>

</ul>

<p>Profession (choose all that apply):

<ul>

<li><input type="checkbox"  name="doc"> Doctor

<li><input type="checkbox"  name="law">Lawyer

<li><input type="checkbox"  name="teacher"> Teacher

<li><input type="checkbox"  name="accountant">Accountant

</ul>

<p>What is the colour of your hair?

<SELECT name="hrcolor">

<option value="bla"> black

<OPTION value="blo">blonde

<OPTION value="brow">brown

<option value="grey">grey

</SELECT>

<p>What is the colour of your eyes?

<SELECT name="eyeclr">

<option value="bla"> black

<OPTION value="blo">blonde

<OPTION selected value="brow">brown

<option value="grey">grey

</SELECT>

<p>

Comments:<br>

<textarea name="cat" rows="7" cols="50" >

</textarea>

<br>

<br>

<INPUT TYPE=SUBMIT value="Click here to enter your info"><input type="reset">

</FORM>

</body></html>

Will look like this:

Top of Form 1

Enter Your Name:

please enter your password

Choose an Animal

cat

dog

fish

Choose a vegetable.

tomato

zuchinni

Profession (choose all that apply):

Doctor

Lawyer

Teacher

Accountant

What is the colour of your hair?  

What is the colour of your eyes?  

Comments:



CGI-BIN

CGI stands for Common Gateway Interface which allows you to create Web pages on the fly based on information from buttons, checkboxes, text input and so on. The pages can be images, sounds, text and indeed everything else transferable by the Web. They can even be references to other Web pages.

Allows HTTP server to run programs that generate dynamic documents, rather than being restricted to delivering only static documents

To enable CGI on a Web server, Web Master designates directory as CGI-bin directory and "bin" comes from old convention that directory containing executable programs has "bin" (for BINary code) in its name -- /bin, /usr/bin, /usr/local/www/bin.  Often programs named with suffix .cgi (like search.cgi) , Web server runs program and sends output from program to client.

Normally when a Web browser looks up a URL the following happens. First your computer contacts the HTTP server with the URL. The HTTP server looks at the filename requested by your computer and then sends that file back. Your computer then displays the file in the appropriate format.

However, it is possible to set up the HTTP server so that whenever a file in a certain directory is requested that file is not sent back; instead it is executed as a program, and whatever that program outputs is sent back for your computer to display. This function is called the Common Gateway Interface or CGI. The programs are called CGI scripts. The directory that the CGI scripts sit in cannot be specified by you alone - you need the help of whoever runs your HTTP server.

In summary CGI scripts are programs which can generate and send back anything: sound, pictures, HTML documents, and so on.  There is a good tutorial on http://www.sanford.com/introcgi/start.html website.

Here’s a look at a CGI script.  First of all, the first two lines of the print out are special. The first line must be

Content-type: text/html  - so that the browser knows what kind of document it is and therefore how to display it. In this case it is a text document of the subclass HTML. You can also send back plain ASCII documents by using text/plain instead. Sound samples and images also have to have the content type specified appropriately. The second line must be blank (ie it must contain just a line feed). This line is reserved for future development.

The second point is really a tip: Strings in perl programs can span over several lines. This means the main part of your perl program can just be one enormous print statement.

For example, the following CGI Perl script:

#!/usr/local/bin/perl

#

# CGI script to print a basic HTML page

#

print "Content-type: text/html\n\n

<HEAD>

      <TITLE>Simple HTML Example</TITLE>

</HEAD>

<BODY>

<HR>

<H1>Hello, this is my first CGI script!</H1>

<HR>

</BODY>

";

is a Perl script named cgi-bin/simple.pl. This Perl script can be called from within an HTML document with the anchored link http://www.sanford.com/introcgi/cgi-bin/simple.pl

                                  

HTML & Web Design

Advanced & Expert Levels

Day Two

Image Map

Image maps are a number of links defined as areas of a displayed image. They can be thought of as two distinct components, a map and an image. The map giving instructions as to the links and the image simply being a standard inline image. Each pixel of the image can be a link to another URL if required, but more usually different areas of

the image link to different URLs. The following example illustrates the use of a simple image map. The image is displayed as normal with an <IMG> tag, but with the addition of the USEMAP command to indicate that the inline image is an image map.

Example:

 <IMG SRC="map.gif" USEMAP="sample.html">

The map component may be processed by the HTML viewer (a client side image map) or by the HTTP server if the HTML viewer cannot process maps.

A server image map is defined by adding the command ISMAP to the <IMG> tag,

Example:

 <IMG SRC="map.gif" USEMAP="sample.html" ISMAP>

In this case, the HTML viewer will expect the map information to be processed by the server.

A client side image map (CSIM), however, is a map processed by the HTML viewer, which gets the map information from an HTML document found by the hyperlink following the USEMAP= command, in this case it follows later in the same document, and occurs between the <MAP> and </MAP> tags:

 <IMG SRC="map.gif" width=300 height=200 USEMAP="#sample">

 <MAP NAME="sample">

 <AREA SHAPE=RECT COORDS="60,80,120,100" HREF=map1.htm>

 <AREA SHAPE=RECT COORDS="140,130,210,160" HREF=map2.htm>

 <AREA SHAPE=RECT COORDS="80,20,220,50" HREF=map3.htm>

 </MAP>

The first line tells the HTML viewer that this is a map, and assigns it a unique name, in this case "sample". The next three lines define three link areas within the image. Each area is defined with one

The forms:

 <AREA SHAPE=RECT COORDS="top,left,bottom,right" HREF=URL>

 or

 <AREA SHAPE=CIRCLE COORDS="x,,y,radius" HREF=URL>

 or

 <AREA SHAPE=POLY COORDS="x,y,x2,y2,x3,y3....xn,yn" HREF=URL>

These co-ordinates are pixel co-ordinates within the image and define a region within which the link occurs. The SHAPE=RECT command expects a rectangular region described by two pairs of co-ordinates. The SHAPE=CIRCLE command expects a circular region described by the co-ordinates of the circle centre, followed by the radius. The final

example, SHAPE=POLY describes a multi-sided area.

Here is the complete HTML example with blank lines inserted to make it easier to read and determine the individual areas:

 <HTML>

 <HEAD>

 <TITLE>Example Image Map</TITLE>

 </HEAD>

 <BODY>

 <H1 align=center>This Is An Image Map Example</H1>

 <CENTER>

 <IMG SRC="map.gif" width=300 height=200 USEMAP="#sample" ISMAP>

 </CENTER>

 <MAP NAME="sample">

 <AREA SHAPE=RECT COORDS="60,80,120,100" HREF=map1.htm>

 <AREA SHAPE=RECT COORDS="140,130,210,160" HREF=map2.htm>

 <AREA SHAPE=RECT COORDS="80,20,220,50" HREF=map3.htm>

 </MAP>

 </BODY>

 </HTML>

A NOHREF command, rather than an HREF= command, indicates that clicks in the defined area should not perform a hyperlink.  An HREF tag specifies where a click in that area should lead.  Note that a relative anchor specification will be expanded using the URL of the map description as a base, rather than using the URL of the document from which the map description is referenced (important if the map definition is in a file separate to the main document).  If a BASE tag is present in the document containing the map description, that URL will be used as the base.

Any number of AREA tags may be specified within a map. If two areas intersect, the one which appears first in the map definition takes precedence in the overlapping region, and it's hyperlink jump will take place rather than the one specified in the later defined area. In this way, a default hyperlink may be made by defining an area covering the entire image, and placing this definition at the end of the map, so that any overlapping areas will take precedence over the default area.

Advanced Formatting

Multiple Spaces:

HTML viewers reduce all white space into a single space character. If you want to add spaces between words, or pad a table column with white space you can use the &nbsp; entity.

Example:

 Hello &nbsp; &nbsp; &nbsp; World

Will display as

 Hello    World

Controlling Document Backgrounds

The Background Attribute

Recent versions of the proposed HTML 3.0 spec. have added a BACKGROUND attribute to the BODY tag. The purpose of this attribute is to specify a URL pointing to an image that is to be used as a background for the document. In Mosaic 2.1.1, Netscape and Internet Explorer, this background image is used to tile the full background of the document-viewing area. Thus specifying:

 <BODY BACKGROUND="aluminum.gif">

 Document here

 </BODY>

would cause whatever text, images, etc. appeared in that document to be placed on a tiled background image. If you prefer, a single large image may be displayed which does not scroll when the document window does by adding the command BGPROPERTIES=FIXED,

Example:

 <BODY BACKGROUND="aluminum.gif" BGPROPERTIES=FIXED>

 Document here

 </BODY>

The Bgcolor Attribute

Although not standard HTML, it is possible to define the colour of the background displayed by most modern HTML viewers, including Mosaic 2.1.1, Netscape Navigator and Microsoft Internet Explorer with the BGCOLOR= command.

 <BODY BGCOLOR="#rrggbb">

 Document here

 </BODY>

Where "#rrggbb" is a hexadecimal red-green-blue triplet used to specify the background colour.

Text Attributes

Like the BGCOLOR= command, the TEXT= command controls the attribute of normal text displayed in a document.

 <BODY TEXT="#rrggbb">

 Document here

 </BODY>

The Link, Vlink, And Alink Attribute

These attributes let you control the colouring of link text. VLINK stands for visited link, and ALINK stands for active link. The default colouring of these is: LINK=blue, VLINK=purple, and ALINK=red. Again the format for these attributes is the same as that for the BGCOLOR= and TEXT= commands.

Example:

 <BODY LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb">

 Document here

 </BODY>

Putting it all together, here is an example from Netscape which illustrates a use of global colour attributes:

 <HTML>

 <HEAD>

 <TITLE>Colour Control Example</TITLE>

 </HEAD>

 <BODY BGCOLOR="#000000" TEXT="#F0F0F0" LINK="#FFFF00"

 VLINK="#22AA22"     ALINK="#0077FF">

 This is an example document.  Text is light-grey on black, and  <a href="nowhere.html">anchors</a> are yellow at first,  flashing blue-green when activated, and pale green if already  visited.

 </BODY>

 </HTML>

Controlling Individual Text Attributes:

Some new HTML viewers, notably Netscape Navigator and Microsoft Internet Explorer support a new tag, <FONT>. The <FONT> tag enables the HTML author to specify a font size , colour and typeface. The size ranges from 1 to 7, smallest to largest. The colour takes a standard rgb hexadecimal triplet to define the attribute of the text within the

<FONT> and </FONT> tags.

Example:

 <FONT SIZE=6 COLOR="FF0000" FACE="Arial">This is a Large Red Heading  in Arial Font</FONT>

The font size can also be determined relative to the base font size using + and - in the FONT SIZE= command,

Example:

 <FONT SIZE=+1>This is the next size up from the standard text</FONT>

 <FONT SIZE=-1>This is the next size down from the standard  text</FONT>

The base font size, colour and typeface can similarly be set with the BASEFONT command,

Example:

 <BASEFONT SIZE=4 FACE="ARIAL" COLOR="FF0000">

Will set the base font size to slightly larger than the default, which is size 3.

You can specify the name of different faces,

Example:

 <font face="arial, courier, geneva">

the HTML viewer will use "courier" if "arial" is not available on the system, or "geneva" if courier is not available either.

Preventing Line Breaks:

Both Netscape and Internet Explorer support the <NOBR> and </NOBR> tag pair which prevent a long line from being broken. Instead the document view window must be scrolled to the right by the user with the scroll-bar to view the remainder of the text line.

Example:

<NOBR>The Abecedarian were the followers of Nicholas Storck, a 16th  century German Anabaptist. They were so called because they rejected all worldly knowledge including learning the alphabet.</NOBR>

Multi-Column Text:

Currently, multi-column text only seems to be supported by Netscape Navigator. It is defined with the tag pair <MULTICOL COLS=n> and </MULTICOL>,

Example:

 <MULTICOL COLS=4>

 This is multiple column text displayed by Netscape Navigator

</MULTICOL>

Displays the text within the multicol tags in 4 columns.

The column widths and gutter between the columns can be defined by adding the WIDTH= and GUTTER= commands to the <MULTICOL> tag.

Scrolling:

Microsoft's Internet Explorer supports scrolling lines of text, which are declared by the <MARQUEE> tag. Only one line may be declared within each <MARQUEE> tag, line breaks <BR> being ignored.

Example:

 <MARQUEE>

 This is a horizontal, animated, scrolling line of text!

 </MARQUEE>

The <MARQUEE> tag also supports colour definition triplets for the background colour of the scrolling text,

Example:

 <MARQUEE BGCOLOR="#FFFFFF">

 This is a horizontal, animated, scrolling line of text!

 </MARQUEE>

The behaviour of the scrolling text can be amended with the BEHAVIOR= command. This supports three parameters; SCROLL, SLIDE and ALTERNATE.

The default command is BEHAVIOR=SCROLL, which displays the text scrolling across the screen.

Adding the command BEHAVIOUR=ALTERNATE to the <MARQUEE> tag causes the scrolling text to scroll to the right edge of the document window, and then change direction, so that it scrolls left-to-right and then right-to-left.

 <MARQUEE BEHAVIOR=ALTERNATE>

The SLIDE parameter causes the text to scroll on at the right-hand side of the document window and slide over to the left before stopping, with the text displayed at the left margin of the document window.

The direction of the traveling text can be changed from right-to-left by the inclusion of the DIRECTION= command to the <MARQUEE> tag.

Example, this will scroll from left-to-right, instead of the default right-to-left.

 <MARQUEE DIRECTION=RIGHT>

Margins:

Microsoft's Internet Explorer supports the definition of a left and a top margin with the commands LEFTMARGIN= and TOPMARGIN= which are added to the <BODY> tag,

Example:

 <BODY LEFTMARGIN=10 TOPMARGIN=10>

The margin size is measured in pixels and applies to the entire document.

Buttons:

Form buttons can be used as unusual, 3d links. Example, the following code creates a 3d button with the inscription "Link", which when pressed jumps to the URL

www.pins.co.uk/upages/probertm/index.html.

Inline Video:

Microsoft's Internet Explorer allows the author to embed .AVI (Audio Video Interleave) video clips in HTML documents.  This is done with the DYNSRC= command for the <IMG> tag.  Using the <IMG> tag for this purpose makes it possible to add video clips to pages, but also have other browsers display still images in their place.

Example;

 <IMG DYNSRC="video.avi" SRC="dancing.gif" WIDTH=50 HEIGHT=50

 LOOP=INFINITE ALIGN=RIGHT>

The DYNSRC= command specifies the address of a video clip to be displayed in the window.  In the above example, Internet Explorer will play the movie file "video.avi"; while other browsers will display the picture "dancing.gif"

You can add a START= command to the tag to specify when the video file should start playing.  This attribute can be set to either FILEOPEN or MOUSEOVER.  The default setting is FILEOPEN which means that the video will start playing as soon as the HTML document has finished loading.  The MOUSEOVER parameter defines that the video will start playing when the user moves the mouse cursor over the animation.  Both can be specified together if necessary.

The CONTROLS command is a flag, which if specified causes a set of controls to be displayed under the video clip window.

The LOOP= command specifies how many times a video clip will loop when activated.  If n=-1, or if LOOP=INFINITE is specified, the video will loop indefinitely.

The LOOPDELAY= command specifies, in milliseconds, how long a video clip will wait between play back loops.

Embedded Objects:

The <EMBED> tag allows you to put objects (video clips, sound or whatever) directly into an HTML page. The syntax is:

 <EMBED SRC="object_to_embed">

The <EMBED> element allows an HTML author to embed documents of any type. The HTML viewer needs to have an application which can view the data installed correctly on their machine, or have a "plug-in" (for Netscape Navigator) that can manipulate the embedded file format.

The <EMBED> element can be used more or less the same as the <IMG> element and so accepts typical image embedding commands such as WIDTH, HEIGHT, BORDER, HSPACE, VSPACE.

Example, to embed a sound file:

 <embed src="sound.wav">

Which are then downloaded to the HTML viewer, and played by a fitted soundcard, if the user has one and the HTML viewer supports sound.


Frames

Frames divide Web pages into multiple, scrollable regions which enable the HTML author to present information in a more flexible and useful fashion. Each region, or frame, has several features:

 1. It can be given an individual URL, so it can load information independent of the other frames on the page;

 2. It can be given a NAME, allowing it to be targeted by other URLs,  and;

 3. It can resize dynamically if the user changes the window's size.

 (Resizing can also be disabled, ensuring a constant frame size.)

A frame is declared with the start-tag <FRAMESET> and the end-tag </FRAMESET> which replace the traditional <BODY> and </BODY> tags in a standard HTML document. The FRAMESET start-tag defines how many frames (regions) the viewer window will be divided into, and the sizes of these regions. The region sizes are defined in terms of pixel rows and columns. Example, to divide the document window into two equal frames, one above the other you can use the command;

 <FRAMESET ROWS=*,*>

The ROWS= command takes a comma separated list of pixel heights in numbers, or in percentages or * to declare the pixel row height of each frame. Replacing a number with an asterisk * tells the HTML viewer to divide the available display area equally. The COLS= command is similar, but applies to the horizontal width of each frame.

This example will split the display into two equal windows, and display a different URL in each, 1.htm in one and 2.htm in the other:

 <html>

 <head>

 <title>Frame Example</title>

 </head>

 <frameset rows=*,*>

 <frame src=1.htm>

 <frame src=2.htm>

 </frameset>

 </html>

This example does the same, but divides the display vertically instead of horizontally;

 <html>

 <head>

 <title>Frame Example</title>

 </head>

 <frameset cols=*,*>

 <frame src=1.htm>

 <frame src=2.htm>

 </frameset>

 </html>

Frames may be assigned names, by adding the NAME= command to the <FRAME> tag,

Example:

 <FRAME SRC=1.HTM NAME=ONE>

By default, the HTML viewer will decide whether or not to add scroll bars to the frame. If you want to suppress this, add the command SCROLLING=NO to the <FRAME> tag,

Example:

 <FRAME SRC=1.HTM SCROLLING=NO>

A top and a left margin may be applied to each frame with the MARGINHEIGHT= and MARGINWIDTH= commands within the <FRAME> tag. The margin will force a blank area to the left and top of the resource displayed within the frame.

Example:

 <FRAME SRC=1.HTM MARGINHEIGHT=10 MARGINWIDTH=10>

Hyperlinks within a frame, will by default load new resources into the current frame. However, this can be amended so that the new document is loaded into a different frame. If you have named your frames with the NAME= command, then the target frame can be easily defined with:

 <A HREF=new_doc.htm TARGET=named_frame>Link</A>

Here is a complete example comprised of a number of separate source files. The name of each source file is in the title in brackets,

Example:

 <html>

 <head>

 <title>Frame Test (test.htm)</title>

 </head>

 <frameset rows=*,*>

 <frame src=test1.htm name=test1>

 <frame src=test2.htm name=test2>

 </frameset>

 </html>

 

<html>

 <head>

 <title>Frame Test (test1.htm)</title>

 </head>

 <body>

 This is file TEST1.HTM

 </body>

 </html>

<html>

 <head>

 <title>Frame Test (test2.htm)</title>

 </head>

 <frameset cols=*,*>

 <frame src=test_a.htm name=testa>

 <frame src=test_b.htm name=testb>

 </frameset>

 </html>

<html>

 <head>

 <title>Frame Test (test_a.htm)</title>

 </head>

 <body>

 This is file TEST_A.HTM

 </body>

 </html>

<html>

 <head>

 <title>Frame Test (test_b.htm)</title>

 </head>

 <body>

 This is file TEST_B.HTM

 <P>

 <A href=test_c.htm target = test1>Load test_c.htm</A>

 </body>

 </html>

 <html>

 <head>

 <title>Frame Test (test_c.htm)</title>

 </head>

 <body>

 This is file TEST_C.HTM

 </body>

 </html>

NOFRAMES

For browsers which don't there is the tag pair <NOFRAMES> and </NOFRAMES> which declare a section of the document to be displayed if the HTML viewer does not recognize frames.  This can be used to display a message or alternative form of the document when viewed by HTML viewers which do not recognize frames,

Example:

 <html>

 <head>

 <title>Frame Test</title>

 </head>

  <noframes>

 This will only be displayed if the HTML viewer does not support  frames

 </noframes>

  <frameset rows=*,*>

 <frame src=test1.htm name=test1>

 <frame src=test2.htm name=test2>

 </frameset>

 </html>

Floating Frames:

Microsoft's Internet Explorer has introduced the floating frame, specified with the tag pair <IFRAME> and </IFRAME>. These behave in a manner a cross between an inline image and a frame. That is, documents can be loaded into a floating frame just like any other frame, but floating frames are displayed as though they were an inline image.

Example:

 <IFRAME NAME="frame1" width="400" height="200"

 SRC="welcome.htm"></IFRAME>

Any text specified between the tags will be displayed to HTML viewers which do not support floating frames, instead of the frame.

Example:

 <IFRAME NAME="frame1" width="400" height="200" SRC="welcome.htm">

 Sorry! This site can only be viewed with Internet Explorer

 </IFRAME>

META TAGS

Meta tags are a new, and as yet non-formalized aspect of HTML used by the WWW. The following information from the Internet Engineering Task Force was distributed in January 1996, and should only be viewed as work in progress.

The META element is an extensible container for use in identifying specialized document meta-information. Meta-information has two main functions:

1) to provide a means to discover that the data set exists and how it might be obtained or accessed; and

2) to document the content, quality, and features of a data set, indicating its fitness for use.

Each META element specifies a name/value pair. If multiple META elements are provided with the same name, their combined contents - concatenated as a comma-separated list - is the value associated with that name.

HTTP servers may read the content of the document HEAD to generate header fields from certain Meta information. WWW Search Engines also may make use of META information to automatically build an entry for a site.

Abstract

This document defines a strict synopsis for the META Tag of HTML.

The grammar is extended to the contents of the HTTP-EQUIV field, defining a set of words to use to allow document cataloguing.

Introduction

Now the synopsis of the META HTTP-EQUIV Tag is not severe, allowing so the use of different key words to define the same things.

The functions like this:

 <META HTTP-EQUIV = "author" CONTENT = "Pennac, Rossi">

or:

 <META HTTP-EQUIV = "writer" CONTENT = "Pennac, Rossi">

could reppresent the same concepts with two different syntax.

The aim of this Draft is to define which are the words to use to define the contents of an HTML document.

The META Tag

The META element is used within the HEAD element to embed documents meta-information not defined by other HTML elements. Such information can be extracted by servers/clients for use in identifying, indexing and cataloging specialized document meta-information.

Although it is generally preferable to used named elements that have well defined semantics for each type of meta-information, such as title, this element is provided for situations where strict SGML parsing is necessary and the local DTD is not extensible.

In addition, HTTP servers can read the contents of the document head to generate response headers corresponding to any elements defining a value for the attribute HTTP-EQUIV.  This provides document authors with a mechanism (not necessarily the preferred one) for identifying information that should be included in the response headers of an HTTP request.

The META element has three attributes:

 - HTTP-EQUIV

 - NAME

 - CONTENT

The HTTP-EQUIV and the NAME attributes are mutually exclusives.

HTTP-EQUIV.

This attribute binds the element to an HTTP response header. If the semantics of the HTTP response header named by this attribute is known, then the contents can be processed based on a well defined syntactic mapping, whether or not the DTD includes anything about it.

HTTP header names are case insensitive. If absent, the NAME attribute should be used to identify the meta-information and it should not be used within an HTTP response header.

It is possible to use any text string, but if you want to define these properties you have to use the following words:

keywords:      to indicate the keywords of the document

author:        to indicate the author of the document

timestamp:          to indicate when the document is authored

                          (HTTP-date format)

expire:             to indicate the expire date of the document

                          (HTTP-date format)

language:      to indicate the language of the document

                          (using ISO3316 code or ISO639 code)

abstract:           to indicate the abstract of the document

organization:  to indicate the organization of the author

revision:           to indicate the revision number of the document

                          (format: 00, 01, 02, or 000, 001, ...)

An HTTP server must process these tags for an HEAD HTTP requester.  Do not name an HTTP-EQUIV attribute the same as a response header that should typically only be generated by the HTTP server. Some inappropriate names are "Server", "Date", and "Last-Modified".  Whether a name is inappropriate depends on the particular server

implementation. It is recommended that servers ignore any META elements that specify HTTP equivalents (case insensitively) to their own reserved response headers.

NAME.

This attributes can be used to define some properties such as "number of pages" or "preferred browser" or any info an author want to insert in his document. The keywords indicates in the previous paragraph for the HTTP-EQUIV are still valid also in the NAME context.

Example:

 <META NAME= "Maybe Published By" CONTENT = "McDraw Bill">

or

 <META NAME= "keywords" CONTENT = "manual, scouting">

Do not use the META element to define information that should be associated with an existing HTML element.

CONTENT

Used to supply a value for a named property.  It can contain more than one single information; it is possible to use the Boolean operator (AND, OR) to insert a Boolean definition of the field.

The AND operator will be represented by the SPACE (ASCII[32]) and the OR operator by the COMMA (ASCII[44]).  The AND operator is processed before the OR operator. So a string like this: "Red ball, White pen" means :"(Red AND ball) OR (White AND pen)".

Example:

 <META HTTP-EQUIV= "Keywords" CONTENT= "Italy Products, Italy  Tourism">

The spaces between a comma and a word or vice versa are ignored.

Cataloguing an HTML document

These 'keywords' were specifically conceived to catalogue HTML documents. This allows the software agents to index at best your own document.

To do a preliminary indexing, it's important to use at least the HTTP-EQUIV meta-tag "keywords".

How to keep your pages from being stored in the browser's cache

To accomplish this, use the HTTP-EQUIV meta tag.
For example, <meta HTTP-EQUIV="Expires" CONTENT="Tue, 04 Dec 1996 21:00:00 GMT">

How to make a page automatically jump to a new page

This is done with the Meta " REFRESH" tag. It looks like this :

<META HTTP-EQUIV="refresh" CONTENT="15;URL=http://www.domain.com">

The text in red indicates the parts of this meta that you will change to meet your needs. The "15" is the number of second before the page jumps to the URL you indicate.  Cut and paste the code, customize it and insert it into your code just under the <TITLE> tag.

*Note : "Refresh" is the Name you will enter in the FP page properties dialog box and "15;URL=http://www.domain.com" is the Value you will enter.

Page Transitions

Page Transitions are done using a Meta Tag.  The tag looks like this:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=23)">

<HEAD>  <TITLE>T.McLaughlin & Associates Web Site ...computer training, computers, internet, msoffice, nt, html, web design, help</TITLE>

<META name="resource-type" content="document">

<META name="distribution" content="GLOBAL">

<META name="description" content="Computer Training and Helps, Great Laughs, and lots of Information">

<META name="copyright" content="2000, T.McLaughlin & Associates ">

<META name="keywords" content="computer training, computers, internet, msoffice, nt, html, web design, help">

<META NAME="author" content="T.McLaughlin">

<META HTTP-EQUIV="Reply-To" content="tom@mclaughlin.net">

<META HTTP-EQUIV="content-type:" content="text/html; charset=ISO-8859-1">

<META HTTP-EQUIV="content-language" content="en">

 </HEAD>

Search Engines:

Alta Vista - http://www.altavista.digital.com/

HotBot - http://www.hotbot.com/

Lycos - http://www.lycos.com/

Excite - http://www.excite.com/

InfoSeek - http://www.infoseek.com/

WebCrawler - http://www.webcrawler.com/

Cascading Style Sheets

Cascading style sheets allow Web site authors more control over the appearance and presentation of their pages and extend the ability To precisely specify the location and appearance of elements on a page and create special effects. By defining style information in one location — the style sheet — an author can then link the style sheet to all of the pages in a Web site to create a consistent, uniform appearance across the entire site. Cascading style sheets are an evolving standard being developed by the World Wide Web Consortium (commonly called the “W3C”) for the next generation of Web browsers.

The Contents of a Style Sheet

A cascading style sheet defines the styles that can be applied to pages or page elements. Each style definition, or style rule, consists of a selector followed by the properties and values for that selector. The following are simple examples of style rules defined in a style sheet:

H1 { font-size: x-large; color: green }

H2 { font-size: large; color: blue }

In the example, H1 and H2 are selectors, which correspond to style names. The selector’s properties and values are contained within the curly braces { }. font-size is a property, and x-large is the value of the font-size property. You can specify multiple properties for a selector by separating each with a semi-colon ( ; ).

Linking a Style Sheet to a Page

There are three primary methods of implementing style sheets on pages in your web:

·         By linking a page to an external style sheet.

·         By creating an embedded style sheet on a page.

·         By applying inline styles to individual elements on a page.

Each method has advantages and disadvantages:

Use an external style sheet when you want to apply the same styles consistently across some or all pages in your Web site. By defining styles in one or more external style sheets and linking them to pages in your web, you ensure consistency of appearance throughout those pages. If you decide to change a style, you need only make one change — in the external style sheet — and the change will be reflected in all of the pages linked to that style sheet. Typically, an external style sheet uses the .css file extension, such as mystyles.css.

·         Use an embedded style sheet when you want to define styles only for the active page in the webpage.

·         Use inline styles to apply cascading style sheet properties to individual elements on a page.

If a page is linked to an external style sheet, the embedded or inline styles that you create for that page will either extend or override properties specified in the external style sheet.

Note   If a theme has been applied to a page, you should avoid or minimize the use of embedded style sheets or inline styles, or that page may not display properly. You should never edit a theme’s .css files, or you may render the theme unusable.

Use this procedure to create an external style sheet that you can link to all of the pages in the current web to provide a consistent, uniform appearance.

1    Open Windows Notepad, the default text editor for .CSS files.

2    Type the style rules you want to define.

3    Save the file with a .CSS file extension, such as  “mystyles.css”, and exit Notepad.

4    Import the file into the FrontPage web.

To link a page to an external style sheet

Use this procedure to link the active page in the web to an external style sheet. By linking pages in the current web to an external style sheet, you can apply a uniform, consistent appearance to those pages.

Note   If the active page is linked to an external style sheet, any embedded style sheet or inline styles that you create for the page will either extend or override properties specified in the external style sheet.

If the page does not contain an embedded style sheet, switch to the HTML View, and then type an HTML <LINK> tag between the beginning and ending <HEAD> tags, similar to the following example:

<HEAD>

<LINK REL=stylesheet HREF=”mystyles.css” TYPE=”text/css”>

</HEAD>

Substitute the name or URL of your external style sheet for “mystyles.css”.

If the page contains an embedded style sheet, on the Format menu, choose Stylesheet. In the Format Stylesheet dialog box, type an @IMPORT tag at the beginning of the SGML comment tag (<!-- comment -->) that contains the style rules, similar to the following example:

<style>

<!--

@import URL(/mystyles.css) ;

H1 { font-size: x-large; color: green }

H2 { font-size: large; color: blue }

.note { font-size: small }

#footer { font-family: serif }

-->

</style>

Substitute the absolute URL or relative URL of the external style sheet for “/mystyles.css”.

Cascading Style Sheets Tip:

Be Careful with Curly Braces

When building an inline style sheet, beware of using the curly braces to enclose your style. This can cause your style to be incompatible with multiple browsers.

Cascading style sheets are powerful new features of HTML 4 that give you much more control over the look of your web pages. Unfortunately browser support for CSS has lagged behind the standards, making it hard to know exactly how the major browsers will handle your styles. If you aren't aware of these issues, you'll encounter serious compatibility problems with your site. The definition of inline style sheets is a good example of this.

You can define a style sheet for your document in one of two ways:

·         As a document-wide style contained inside a STYLE tag

·         As an element-specific style using the STYLE attribute

For example, if you were defining a style to be used throughout your page, you might define it like this:

<STYLE>

P                   { color : red }

</STYLE>

<P> This is red text </P>

This style would render all paragraphs in your page in red text.

But suppose you wanted to apply this style to just one paragraph in your page. One way to do this is to define an inline style sheet as follows:

<P  STYLE=" color  : red">  This is red text </P>

Notice that you don't use the curly braces to contain the inline style declaration. Curly braces are used to separate one or more style declarations from the style selector to which they apply (in our example the style selector is the P tag). For an inline style sheet the style is already tied to a single page element, so you don't need a selector or curly braces. In fact, use of curly braces is aviolation of the style sheet standards.

However, Microsoft Internet Explorer forgives this error. If you include curly braces in your inline style sheet, MSIE will display the page as you intended. Netscape Navigator applies a strict interpretation of the standards and rejects any inline style that includes the braces. That means Navigator won't display your style at all.

Keep that in mind if you use Internet Explorer as your default browser. You still need to test your page under both major browsers.

Inline Video:

Microsoft's Internet Explorer allows the author to embed .AVI (Audio Video Interleave) video clips in HTML documents.  This is done with the DYNSRC= command for the <IMG> tag.  Using the <IMG> tag for this purpose makes it possible to add video clips to pages, but also have other browsers display still images in their place.

For example;

 <IMG DYNSRC="video.avi" SRC="dancing.gif" WIDTH=50 HEIGHT=50

 LOOP=INFINITE ALIGN=RIGHT>

The DYNSRC= command specifies the address of a video clip to be displayed in the window.  In the above example, Internet Explorer will play the movie file

"video.avi"; while other browsers will display the picture "dancing.gif"

You can add a START= command to the tag to specify when the video file should start playing.  This attribute can be set to either FILEOPEN or MOUSEOVER.  The default setting is FILEOPEN which means that the video will start playing as soon as the HTML document has finished loading.  The MOUSEOVER parameter defines that the video will start playing when the user moves the mouse cursor over the animation.  Both can be

specified together if necessary.

·         The CONTROLS command is a flag, which if specified causes a set of controls to be displayed under the video clip window.

·         The LOOP= command specifies how many times a video clip will loop when activated.  If n=-1, or if LOOP=INFINITE is specified, the video will loop indefinitely.

·         The LOOPDELAY= command specifies, in milliseconds, how long a video clip will wait between play back loops.

Embedded Objects:

The <EMBED> tag allows you to put objects (video clips, sound or whatever) directly into an HTML page. The syntax is:

 <EMBED SRC="object_to_embed">

The <EMBED> element allows an HTML author to embed documents of any type. The HTML viewer needs to have an application which can view the data installed correctly on their machine, or have a "plug-in" (for Netscape Navigator) that can manipulate the embedded file format.

The <EMBED> element can be used more or less the same as the <IMG> element and so accepts typical image embedding commands such as WIDTH, HEIGHT, BORDER, HSPACE, VSPACE.

For example, to embed a sound file:

 <embed src="sound.wav">

Which are then downloaded to the HTML viewer, and played by a fitted soundcard, if the user has one and the HTML viewer supports sound.

Cookies

What do they do? Should we accept them blindly? Are any of them a threat? Should we purge the cookie file occasionally? How big are they

You may have noticed that Web sites are getting smarter by the day. They seem to "know" more and more about you each time you visit. For instance, you may bookmark a popular site such as the Netscape General Store or CDnow, and find that the computer on the other end knows not only that you've been there before, but exactly when you last visited, and what you were looking at the last time you clicked by.

Spooky, you say? Exciting? Perhaps a little of both?

Most Web sites accomplish this stunning feat with HTTP cookies. A cookie is a small piece of information that's sent to your browser - along with an HTML page - when you access a particular site. When a cookie arrives, your browser generally saves this information to your hard drive; when you return to that site, some of the stored information will be sent back to the Web server, along with your new request.

Sites with "shopping carts" are a good example of cookies in action: You browse a series of Web pages for items to buy, and when you find something you want, you "add it" to your shopping cart by clicking a button on the page. Later, you can view these items all together.

The funny thing is, even though you're communicating through an "anonymous" connection, the site always knows exactly what's in your personal shopping cart. It doesn't seem to matter whether you've clicked away to somewhere else and come back, or even if you've completely shut down your computer and returned days later. The site still knows who you are, and what you were shopping for.

Cookies work their magic by expanding the abilities of HTTP, so it's hard to talk about one without first explaining the other. HTTP (hypertext transfer protocol) is a group of standards that cover the way Web pages, graphics, and other data should be transferred across the Net. In other words, it's the rules of the road.

Every server and browser on the Web uses this standard to communicate. A small HTTP header is sent with each transaction, telling the receiving end exactly what it's getting. These headers communicate requests from browsers, as well as server responses. A normal HTTP response header looks something like this:

HTTP/1.0 200 Found
Date: Wed, 30 Oct 1996 23:48:22 GMT
Server: Apache/1.1.1 HotWired/1.0
Location: http://www.hotwired.com/frontdoor/
Content: text/webmonkey/html

This header (or something like it) is sent with every single file that comes to you through the Web. So why haven't you noticed? Well, the information contained inside a cookie isn't displayed. In fact, a cookie is designed to be invisible to the user. Your browser is smart enough to strip off the information and just give you the page you're looking for.

One of the limitations of HTTP is that it's a "stateless" connection. It works more or less like a vending machine: You push a button, and if everything checks out (i.e., you have correct change), it gives you what you want. The vending machine doesn't know anything about you, except that you ordered a root beer and it served you one. There's not a lot of information going back and forth.

The HTTP cookie is an attempt to make regular HTTP a little smarter by including more information inside the HTTP header. By adding a "Set Cookie...." line to the HTTP header, the server can deliver cookie information to your browser. Your Web browser then saves this information and sends it back to the server the next time you visit the same site. Through this system, a kind of "persistent state" can be maintained, even though there's never any direct communication between your browser and the cookie-setting server.

Cookies can be useful at times, and its really simple once you understand the basics! The thing to remember is, when you want to SET a cookie, always use RESPONSE.cookies (I capitalized response for emphasis - its not case sensitive)... when you want to GET info from a cookie, you'll want to use REQUEST.cookies... That being said, let's say you want to set a real simple cookie, let's use UserID as an example. So... to set the cookie (again, keeping this very simple), we'll do something like this:  response.cookies("UserID")="Kathi"

Remember that strings must be enclosed in double quotes. If that had been a numeric value, no quotes would have been needed. Another very important note is that you should put <% response.buffer=true %> at the very start of the script (the first line on the page to avoid an error. Cookie information is carried in the http headers, and if those headers have already been written, you'll see a nice little error message informing you of that fact. Now, let's say you want to retrieve that cookie from another page and write it out to the browser. All you'd have to do is:

response.write request.cookies("UserID")

Die, Cookie, Die ;)
Another thing to remember is that if you don't set an expiration date for the cookie, it "dies" when the browser is closed, so if you want it to persist on the user's system, you will need to set an expiration date like this:

response.cookies("UserID").Expires=DateAdd("d",30,Date)

In the above example, I set it to expire in 30 days using the DateAdd function - the "d" is for days. "m" can be used here for month, "y" for year... the number is the number of units (be it days, months or years), and Date just fills in today's date...

Let's say you have a cookie you want to die immediately, you could do the following:

response.cookies("UserID").Expires=DateAdd("d",-1,Date)

This sets the expiration to yesterday, which in effect kills the cookie and removes it from the user's system immediately.

Using Keys
You can also use "keys" in your cookies. For example, I have an application where I track a user's first name (fname), last name (lname), and User ID (UID). Rather than set these all individually, I just set them all as part of a single cookie, using "user" as a key:

response.cookies("user")("fname")="Kathi"
response.cookies("user")("lname")="O'Shea"
response.cookies("user")("UID")="kathio"

This way you can store a lot of information in one cookie, and iterate through the values if needed:

For each item in request.cookies("user")

    response.write item & ": " & request.cookies(item) & "
"

Next

The above for...next would send a list to the browser like this:

fname: Kathi
lname: O'Shea
UID: kathio


What is XML?

·         XML stands for EXtensible Markup Language

·         XML is a markup language much like HTML.

·         XML was designed to describe data.

·         XML tags are not predefined in XML. You must define your own tags.

·         XML is self describing.

·         XML uses a DTD (Document Type Definition) to formally describe the data.

The main difference between XML and HTML

XML is not a replacement for HTML.
XML and HTML were designed with different goals:

XML was designed to describe data and to focus on what data is.
HTML was designed to display data and to focus on how data looks.

XML is about data

HTML is about displaying information, XML is about describing information.

XML is extensible

The tags used to markup HTML documents and the structure of HTML documents are predefined. The author of HTML documents can only use tags that are defined in the HTML standard.

XML allows the author to define his own tags and his own document structure.

XML is a complement to HTML

It is important to understand that XML is not a replacement for HTML. In the future development of the Web it is most likely that XML will be used to structure and describe the Web data, while HTML will be used to format and display the same data.

XML in future Web development

http://www.refsnesdata.no/xml/xml_whatis.asp Data has been participating in XML development since its creation. It has been amazing to see how quickly the XML standard has been developed, and how quickly a large number of software vendors have adopted the standard.

We strongly believe that XML will be as important to the future of the Web as HTML has been to the foundation of the Web. And possibly XML will be the future for all data manipulation and data transmission.

XML can keep data separated from your HTML

HTML pages are used to display data. Data is often stored inside HTML pages. With XML this data can now be stored in a separate XML file. This way you can concentrate on using HTML for formatting and display, and be sure that changes in the underlying data will not force changes to any of your HTML code.

XML can also store data inside HTML documents

XML data can also be stored inside HTML pages as "Data Islands". You can still concentrate on using HTML for formatting and displaying the data.

XML can be used to exchange data

In the real world, computer systems and databases contain data in incompatible formats. One of the most time consuming challenges for developers has been to exchange data between such systems over the Internet. Converting the data to XML can greatly reduce this complexity and create data that can be read by different types of applications.

XML can be used to store data

XML can also be used to store data in files or in databases. Applications can be written to store and retrieve information from the store, and generic applications can be used to display the data.


Introduction to DHTML

 DHTML, or Dynamic HTML, is not a language in and of itself like HTML or JavaScript. Rather, it's a method used to design a web page by mixing HTML, CSS and scripting all into one, working document. If we had to call it anything, it probably would be called a hybrid language since it uses the highlights of HTML, CSS and scripting. Ultimately, it gives the designer complete control over the web page positioning, look and behavior.

What is Needed?
 First, you need knowledge of HTML, CSS (cascading style sheets) and some scripting language such as JavaScript or VBScript. Second, you need either Internet Explorer 4 (or higher), Netscape Navigator 4 (or higher) or both. The reason for this is that these are the only two browsers that provide support for DHTML. It would be best to have both, though, because they have different ways of using DHTML. Lastly, you would need a text editor to write and edit all the code. If you use a WYSIWYG, (What You See Is What You Get), editor, now is a good time to learn how to use a text editor, unless it has special support for writing DHTML.

What it Can Do
DHTML gives you ability to position elements of a web page to precise (x,y,z) coordinates and dynamically change the position with script. Every property of a web page element can be altered with the use of a script language. Some properties include color, size, visibility, alignment, etc.. You can achieve some awesome effects with DHTML.

How Does it Work?
Various elements of a web page such as images and blocks of text are organized into groups with the <div> or <layer> tags. The groups are then given a list of properties using the cascading style sheet specification and a name to distinguish them from each other. Then through the use of a scripting language, you can dynamically change the CSS attribute of each group. It's really quite neat how the three elements of web design can come together in a dynamic union.

Should I Learn DHTML?
Right now, DHTML is only readable with newer versions (4+) of Internet Explorer and Netscape Navigator so it's not really priority one knowledge. It's good for fun and added effects on your pages but due to it's limited support and unstanderdization between browsers, probably shouldn't be used for major sites. If you do choose to do your web pages in DHTML be sure to allow the users without a compatible browser the choice to view a non-DHTML version of your site.

The Internet Explorer (IE) Way
Internet Explorer uses the <div> tag to group DHTML elements together into workable units. The <div> tag is simply an HTML tag that is used in grouping similar content together. Then (CSS) style attributes are assigned to each <div> tag which can be manipulated by script such as JavaScript or VBScript.

The HTML
The HTML needed to make DHTML work includes the use of the <div> tag to group together DHTML elements such as text, images and other <div> groups. So in a way, DHTML has a modular design as compared the to procedural design of regular HTML. By modular design I mean content is nicely contained in easily manageable units. Regular HTML is rather chaotic and not very structured making it harder to control. Below is an example of a how a DHTML page is structured into groups.


JAVA AND JAVASCRIPT

CGI programs were once simply programs that ran on the Web Server

Java allows programs that run on the Web Server or ... the Web Browser

Java is complete object-oriented programming language derived from C++

It has all advantages of C++, but does away with unpleasant aspects like pointers and memory allocation

Therefore, it is easier to use and more secure

Java comes with collection of libraries (packages)

Library of user interface objects called AWT (Abstract Window ToolKit)

I/O library

Network library

Java APPLICATIONS run on Web server

Java APPLETS run on Web browser

Java programming requires a Java compiler

Netscape includes scripting language called JavaScript

JavaScript is scripting language like Perl

Can accomplish simple tasks in JavaScript that would take much more effort to accomplish in Java

Netscape provides on-line JavaScript documentation

JavaScript is a language that works with HTML to enhance web pages and make them more interactive. It allows a web designer to swap images, create windows on-the-fly, check form fields, and more.

Remember that JavaScript is not Java. Java was created by Sun Microsystems to be a robust programming language. It is a compiled language whose programs can be attached to web pages in the form of applets or used in stand-alone applications. JavaScript, on the other hand, was created by Netscape. It is a simpler language than Java. It is not compiled (like HTML code) and it is generally embedded into HTML code itself.

JavaScript in not JScript either. JScript is Microsoft's equivalent of JavaScript. Much of the code is the same and both are identified by the language="javascript". However, JavaScript and JScript are not identical. Each of these languages has the same basic qualities, but their higher end functionality differs.

What is needed?

Very little is needed to create JavaScript. Like HTML the only thing needed to create JavaScript code is a simple text editor (like Notepad) and the only thing needed to view it is a web browser that is JavaScript enabled (like Netscape 2.0 and above or Internet Explorer 3.0 and above). Besides software, basic HTML knowledge is needed. It is good to know some of the more advanced HTML like the <FORM> tags and all its subparts, but it is not required.

What are some of the basics?
The JavaScript code is generally embedded into HTML code. It is usually placed between the <HEAD> and the </HEAD> tags, but it can also be placed in the body of the web page (between the <BODY> and </BODY> tags).

The JavaScript code is placed between the <SCRIPT LANGUAGE="JAVASCRIPT"> and the </SCRIPT> tags. Since some web browsers are not JavaScript enabled the tags <!-- and //--> are used around the JavaScript code to hide it (as you can see these tags are just the HTML comment tags with an added "//" before the end comment tag).

Like HTML, JavaScript has its own comment codes. There are two types:

// this is the first, which is a one-line comment
/* and this is the second,
   which is a block
   comment */

Here is what we have so far:

<HTML>
<HEAD><TITLE>a title</TITLE>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!-- hide the code from non-JavaScript enabled browsers
     //a comment to describe the following code
     . . .the JavaScript code
// stop hiding -->
</SCRIPT>

</HEAD>
. . .

It is important to note that JavaScript is case sensitive. That means that the case of the letters of a command, a variable, and a function matter. That is to say, the "if" statement is not the same as the "IF" statement.

When you work through this tutorial you will come across a number of examples of JavaScript. These cannot jump out and bite you (at least, not yet), so don't be afraid to give them a try. Go ahead and copy the code into a test HTML document add see what you can do with it.

As JavaScript cannot really jump out and harm you in the physical sense, it cannot harm you in the digital sense either. JavaScript is not as powerful as the more robust languages like Java or C++, so don't be afraid of accidentally killing you system with a rogue JavaScript script.

Also, it is beyond the scope of this tutorial to show you everything there is to know about JavaScript. A good way to keep your knowledge of JavaScript growing is to see how other web designers use JavaScript. If you see something new and cool that you do not know how to do, then take a look at the code and see if you can recreate similar effects. Play around with the language, have fun with it.

Flash - Introduction

You may be asking yourself "What is flash?".  Flash is a media format based on Director by Macromedia. Flash can create movies that are incredibly small yet very functional. Most of the latest browsers include the Flash plug-in, but if they don't you can download it for free.

The first thing you need to do is get the fully-functional Flash demo off the Macromedia web site. This will allow you to play with Flash for 30-days to find out if you want to buy the program. Once you have set up the program, open it up and you will be ready to go onto the next part of the tutorial. 

Flash is a type of Internet multimedia that combines vector based graphics as well as bit-mapped graphics, sound and animation into a compact yet dynamic movie. For more information about vector graphics check out Types of Graphic Programs tip. With Flash you can create animations, movies, presentation trailers, games or even an entire web site! It integrates seamlessly with web pages when users have the Flash viewer plug-in.

The actual building of a Flash movie is very modular. You create basic objects, or symbols, which then can be combined and made into new objects. If you edit a basic object, all the instances of that object in the movie and other objects are also edited. It has a hierarchial structure as far as objects go.

Shockwave - Introduction

http://www.macromedia.com/shockwave/download/

Shockwave Player is everywhere
Shockwave Player is free, easy to get, and available to everyone on the Web. Shockwave Player ships with Windows 95, 98, MacOS, Internet Explorer CD, America Online, and Netscape Navigator.

The Web standard for multimedia
Shockwave Player is the Web standard for entertaining, engaging, rich media playback. It lets you view interactive Web content like games, business presentations, entertainment, and advertisements from your Web browser. You've probably seen Shockwave Player in action on top business and entertainment sites like Disney.com, Intel.com, and SharperImage.com, Palm Computing, and thousands of other Web sites.


E-Commerce - Introduction

by Kevin Hakman

http://hotwired.lycos.com/webmonkey/e-business/building/tutorials/tutorial3.html

(or sign up for ATTA’s E-commerce course)

A Tutorial on E-commerce

So you want to put your business online and get a piece of that multibillion dollar marketplace you've read about?

One of the most popular Internet myths claims that building an online store is easy: All the customer has to do is point, click, and buy! But in reality, successful e-commerce is far more complex and unlike any other Web site project you may have tackled in the past. Before that first cyberbuck finds its way into your bank account, you need to do considerable research and planning.

Lesson 1: Getting Started and Making a Plan
When it comes to getting your e-commerce site started, don't just dive right into the deep end. Instead, get your feet wet with an advance plan.

Lesson 2: How to Sell, Sell, Sell!
To find out which online sales techniques best suit your business and products, look and learn from the different approaches employed by companies that have already taken the online business plunge.

Lesson 3: Transactions
Roll up your sleeves and get technical with the nitty-gritty of transactions, credit cards, tax, shipping, integration with fulfillment systems, and customer service.

Lesson 4: Build, Buy, or Rent?
There are lots of prepackaged e-commerce solutions out there. Before you decide which one makes the most sense for you, take a look at the technology issues related to doing business online.

Lesson 5: Building your Customer Base
Well, your site's built, but that doesn't mean your work's finished. Now you need to get paying customers to come in. Learn how to attract new customers by improving the effectiveness of your marketing programs and fine-tuning your site.

To get you started, let's take a look at an imaginary (yet all too real) company that suddenly decides to heed the siren call of e-commerce.

So your online store is finally up and running. Good work! Unleash the confetti and champagne corks - you deserve it. But once you're finished celebrating, there's still work to be done. Now you need to get your customers to actually visit the site.

If your company is willing to spend the big bucks, you can get the word out about your site by using traditional advertising venues, such as billboards, bus ads, direct mail, radio spots, or even television commercials. You can also place banner ads on other Web sites that cater to your customer base. If money's an issue (as it so often is), there are ways to drum up Web traffic on the cheap. Some of these advertising techniques will work better than others, depending on what you're selling and to whom.

How do you know if your advertisements and marketing tactics are working (i.e., making you money)? To be truly effective, your advertising needs to do more than simply attract visitors to your site: It needs to attract customers who buy your products. To pinpoint which of your marketing tactics are working and which aren't, take a look at your log files.

WebMonkey's HTML Cheat Sheet

 


Basic Tags
- - - - - - - - - -

<html></html>

Creates an HTML document

<head></head>

Sets off the title and other information that isn't displayed on the Web page itself

<body></body>

Sets off the visible portion of the document

 

Header Tags
- - - - - - - - - -

<title></title>

Puts the name of the document in the title bar

 

Body Attributes
- - - - - - - - - -

<body bgcolor=?>

Sets the background color, using name or hex value

<body text=?>

Sets the text color, using name or hex value

<body link=?>

Sets the color of links, using name or hex value

<body vlink=?>

Sets the color of followed links, using name or hex value

<body alink=?>

Sets the color of links on click

 

Text tags
- - - - - - - - - -

<pre></pre>

Creates preformatted text

<h1></h1>

Creates the largest headline

<h6></h6>

Creates the smallest headline

<b></b>

Creates bold text

<i></i>

Creates italic text

<tt></tt>

Creates teletype, or typewriter-style text

<cite></cite>

Creates a citation, usually italic

<em></em>

Emphasizes a word (with italic or bold)

<strong></strong>

Emphasizes a word (with italic or bold)

<font size=?></font>

Sets size of font, from 1 to 7

<font color=?></font>

Sets font color, using name or hex value

 

Links
- - - - - - - - - -

<a href="URL"></a>

Creates a hyperlink

<a href="mailto:EMAIL"></a>

Creates a mailto link

<a name="NAME"></a>

Creates a target location within a document

<a href="#NAME"></a>

Links to that target location from elsewhere in the document


 

Formatting
- - - - - - - - - -

<p>

Creates a new paragraph

<p align=?>

Aligns a paragraph to the left, right, or center

<br>

Inserts a line break

<blockquote>
</blockquote>

Indents text from both sides

<dl></dl>

Creates a definition list

<dt>

Precedes each definition term

<dd>

Precedes each definition

<ol></ol>

Creates a numbered list

<li>

Precedes each list item, and adds a number

<ul></ul>

Creates a bulleted list

<li>

Precedes each list item, and adds the bullet

<div align=?>

A generic tag used to format large blocks of HTML, also used for stylesheets

   
 

Graphical Elements
- - - - - - - - - -

<img src="name">

Adds an image

<img src="name" align=?>

Aligns an image: left, right, center; bottom, top, middle

<img src="name" border=?>

Sets size of border around an image

<hr>

Inserts a horizontal rule

<hr size=?>

Sets size (height) of rule

<hr width=?>

Sets width of rule, in percentage or absolute value

<hr noshade>

Creates a rule without a shadow

   
 

Tables
- - - - - - - - - -

<table></table>

Creates a table

<tr></tr>

Sets off each row in a table

<td></td>

Sets off each cell in a row

<th></th>

Sets off the table header (a normal cell with bold, centered text)

 

Table Attributes
- - - - - - - - - -

<table border=#>

Sets width of border around table cells

<table cellspacing=#>

Sets amount of space between table cells

<table cellpadding=#>

Sets amount of space between a cell's border and its contents

<table width=# or %>

Sets width of table - in pixels or as a percentage of document width

<tr align=?> or <td align=?>

Sets alignment for cell(s) (left, center, or right)

<tr valign=?> or <td valign=?>

Sets vertical alignment for cell(s) (top, middle, or bottom)

<td colspan=#>

Sets number of columns a cell should span (default=1)

<td rowspan=#>

Sets number of rows a cell should span (default=1)

<td nowrap>

Prevents the lines within a cell from being broken to fit

   


Frames
- - - - - - - - - -

<frameset></frameset>

Precedes the <body> tag in a frames document; can also be nested in other framesets

<frameset rows="value,value">

Defines the rows within a frameset, using number in pixels, or percentage of width

<frameset cols="value,value">

Defines the columns within a frameset, using number in pixels, or percentage of width

<frame>

Defines a single frame - or region - within a frameset

<noframes></noframes>

Defines what will appear on browsers that don't support frames

   
 

Frames Attributes
- - - - - - - - - -

<frame src="URL">

Specifies which HTML document should be displayed

<frame name="name">

Names the frame, or region, so it may be targeted by other frames

<frame marginwidth=#>

Defines the left and right margins for the frame; must be equal to or greater than 1

<frame marginheight=#>

Defines the top and bottom margins for the frame; must be equal to or greater than 1

<frame scrolling=VALUE>

Sets whether the frame has a scrollbar; value may equal "yes," "no," or "auto." The default, as in ordinary documents, is auto.

<frame noresize>

Prevents the user from resizing a frame

   
 

Forms
- - - - - - - - - -

 

For functional forms, you'll have to run a CGI script. The HTML just creates the appearance of a form.

<form></form>

Creates all forms

<select multiple name="NAME" size=?></select>

Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll.

<option>

Sets off each menu item

<select name="NAME"></select>

Creates a pulldown menu

<option>

Sets off each menu item

<textarea name="NAME"
cols=40 rows=8></textarea>

Creates a text box area. Columns set the width; rows set the height.

<input type="checkbox"
name="NAME">

Creates a checkbox. Text follows tag.

<input type="radio"
name="NAME" value="x">

Creates a radio button. Text follows tag

<input type=text
name="foo" size=20>

Creates a one-line text area. Size sets length, in characters.

<input type="submit"
value="NAME">

Creates a Submit button

<input type="image" border=0
name="NAME" src="name.gif">

Creates a Submit button using an image

<input type="reset">

Creates a Reset button