HTML Tutorial

CONTENTS:

  1. NOTES
  2. SETUP
  3. BODY
  4. COMMENT
  5. LINKS
  6. HEADINGS
  7. SIZES
  8. FORMATS
  9. STYLES
  10. HORIZONTAL LINES
  11. GRAPHICS
  12. LISTS
  13. TABLES
  14. FORMS
  15. IMAGE MAP
  16. META TAGS
  17. SPECIAL CHARACTERS
  18. JAVA

NOTES:

Unix, Mac and PC computers can be used as Internet hosts. To avoid problems and facilitate portability, use only lower case file names and restrict the name to eight characters or less. Use .html, .gif, .jpeg, etc. as a file name extension. Beware that ZipIt and PKZIP automatically shorten the extension to three characters.

Web browsers ignore white space like tabs, carriage returns or extra blanks, except in the case of lists.

The default font of most browsers is Chicago. Any headings smaller than 4 are illegible in this font.

All browsers understand basic HTML commands. Others understand HTML+. Still others, like Netscape interpret HTML commands that have not even been proposed as standard. Universal HTML is designated by an asterisk (*). Avoid using all other commands unless a standard HTML option is provided as an alternative for those who have a less capable browsers. Some do it by choice to achieve higher performance (MacWeb). I've asked Terje Norderhaug to identify * items. You'll get a new version of this after I get his response.

Some sites require that a link (LINK REV, BASE) reference be inserted in the header to facilitate site maintenance or avoid confusion. These statements must be temporarily commented-out for hypertext navigation to work with local files.


SETUP:

<HTML> indicates the beginning of an HTML document and the file name that the window will be saved as if you so choose. It must be the first command in your HTML file. All of the following HTML commands must follow a <HTML> command and precede a </HTML> command.

<TITLE> menu bar text </TITLE> is an abbreviated description of the page. It should be the second command in your HTML file.

<HEAD> heading in normal font </HEAD> indicates page category. It should be the third command in your HTML file.


BODY:

<BODY> indicates the beginning of the body of the HTML document where everything else resides. It should be the fourth command in your HTML file. All of the following HTML commands must follow a <BODY> command and precede a </BODY> command.

<BODY BGCOLOR=RRGGBB> changes the background color where RR is the red value, GG is the green value, BB is the blue value, defined by hexadecimal values from 00 to FF. Select the color to see what is looks like. BGColor is a Netscape extension and not part of HTML2.

Example Color Representations

Color

Tint

Value

Reds

Pale Pink

FFCCCC

Bright Pink

FF0066

True Red

FF0000

Oranges

Peach

FF9955

Pumpkin

FF9933

Orange

FF6600

Yellows

Pale Yellow

FFFFAA

Bright Yellow

FFFF00

Gold

FFAA00

Greens

Aqua

AADDOO

Sea Green

OOFFAA

True Green

OOFFOO

Blues

Pale Blue

BBDDFF

Cornflower Blue

3300CC

True Blue

OOOOFF

Violets

Magenta

FFOOFF

Fuchsia

FFOOAA

Purple

CCOOFF

Neutrals

White

FFFFFF

Bone

FFFFCC

Sand

FFCC99

Burnt Sienna

551011

Light Grey

CCCCCC

Dark Grey

669999

Black

000000

<BODY TEXT=RRGGBB> changes all of the text color as above.

<BODY LINK=RRGGBB> changes the color of link text as above.

<BODY VLINK=RRGGBB> changes the color of visited link text as above.

<BODY BACKGROUND="image.gif"> Uses image as background.


COMMENT:

<!- comment -> is not visible when displayed by a browser, but helps document your HTML for others:


LINKS:

Hypertext is what makes HTML powerful. It allows the selection of highlighted (color/underline) text or graphic (border) to cause a jump to another part of the same file, to another file on the same computer or to another file an another computer anywhere in the world.

Anchor Link Tag
<A HREF="#AP">displayed text</A> jumps the display to the referenced anchor point elsewhere in the document.

<Anchor Point Tag
<A NAME="AP">displayed text is an anchor point of the name AP. Use the file name of the referenced (linked) file as the name of its anchorpoint.

Using pairs of link and point tags is how the Table of Contents of this document was made.

Link Tag
<A HREF="linkfile.html">displayed text</A> jumps the display to a file named "linkfile" in the same directory (folder) as this file. Try it: displayed text. A full path name is required if the file is in another directory. If the file is on another computer, its path name must be prefixed with http:// and its site address, e.g. www.mysite/htmldir/.

This is how samples of the Example Color Representations are displayed. Selecting the color jumps you to another HTML file in which the body background has the selected color.

When the displayed text" is a graphic, a border (normally blue) is put around it. Netscape permits border widths from 0 (none) to 6.

To save domain name lookup time, host all of your files on the same server and use internal links to those files (no http://). For example, assume the following directory structure:
server web folder
default.htm
images
other.htm
ServerSubcatagoryFolder
default.htm
images
neatgraphic.gif
othersub.htm
YourFolder
default.htm
images
graphic.gif

graphic.jpg

video.mov

sound.aif

music.wav

yourother.htm

stillothers.htm

An internal link from stillothers.htm to yourother.htm would be <A HREF="ServerSubcatagoryFolder/YourFolder/yourother.htm">Your Other file in a directory two levels lower than the top.</A>.

An internal link from your default.htm to yourother.htm would be <A HREF="yourother.htm">Your Other file in the same directory</A>.

An internal link from your default.htm to othersub.htm would be <A HREF="../othersub.htm">Other file in higher level directory</A>.

An internal link from your default.htm to stillothers.htm would be <A HREF="../../stillothers.htm">Other file in directory two levels up.</A>.

Similarly, an internal link to graphic.jpg from yourother.htm would be <IMG SRC="images/graphic.jpg">.

An internal link to neatgraphic.gif from yourother.htm would be <IMG SRC="../images/neatgraphic.gif">.

An internal link to sound.aif from stillothers.htm would be <IMG SRC="ServerSubcatagoryFolder/YourFolder/images/sound.aif">.

MailTo <A HREF=MAILTO:"email@address"> MailTo</A> is a special Link Tag. It causes an email window to be displayed with the addressee and addressor addresses already in place, ready for the addressor to enter message text.
?subject=topic ?cc=person@domain.com, ?bcc=person@site.com


HEADINGS:

All headings are bold and include blank lines before and after. Given that the default font for Netscape and other browsers is Chicago, use only heading sizes from 1 to 4.


SIZES:

Only Netscape will allow font sizes to vary within a word.


FORMATS:

<P>paragraph</P> includes blank lines before and after:

paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph

line break<BR> without blank lines before and after:
line break
line break
line break

<NOBR>no line break</NOBR> is useful for controlling how a graphic within text appears, but the line will just run off the right of the window unless you break it with <BR> or <P>:
no line break no line break no line break no line break no line break no line break no line break

<P ALIGN=CENTER>center paragraph</P> aligns the center of a paragraph with the preceding graphic. ALIGN=CENTER is not yet adopted as a standard, but it is preferred over the CENTER container (<CENTER> ... </CENTER>):

center paragraph center paragraph center paragraph center paragraph center paragraph center paragraph center paragraph.

<CENTER>center line</CENTER> centers the enclosed text on the screen:

center line

<BLOCKQUOTE>block quote</BLOCKQUOTE> indents and justifies paragraph:

block quote block quote block quote block quote block quote block quote block quote block quote block quote block quote block quote block quote

<PRE>preformatted text</PRE> displays text exactly as it is in a non-proportional font:

preformatted text
wbr forces a word break. This is useful in combination with the nobr element to permit line-breaks where they could otherwise not occur. This element has no attributes.
<nobr>This line would go on
forever,except that I have
this neat tag called wbr
that does <wbr />this!</nobr>

Before<SPACER TYPE=horizontal SIZE=20>after.

Before<SPACER TYPE=vertical SIZE=30>

after.

 


STYLES:

Only Netscape will allow font styles to vary within a word.

<ADDRESS>address</ADDRESS> italicizes the text:

address address address address address address address address address address address

<BLINK>blink</BLINK> flashes the text background on and off (not standard, Netscape only):
blink

<B>bold</B> darkens and thickens the text (not standard):
bold

<CITE>cite</CITE> italicizes, inserts a blank line and may reduce the size of the text:

cite

<CODE>code</CODE> uses courier font to distinguish programming language from other text:
code

<DFN>definition</DFN> Seems to be normal text. Don't know what advantage it is:

definition definition definition definition definition definition definition definition

<DL COMPACT><DT>glossary name<DD>glossary definition glossary definition glossary definition glossary definition</D>

glossary name
glossary definition glossary definition glossary definition glossary definition

<EM>emphasis</EM> italicizes and may increase the size of the text:
emphasis

<TT>fixed width</TT> creates table:
fixed width

<I>italic</I> italicizes text (not standard):
italic

<KBD>keyboard</KBD> imposes non-proportional (typewriter) font on text:
keyboard

<SAMP>sample</SAMP> specifies non-proportional font:
sample sample sample sample sample sample sample sample sample sample sample

<STRIKE>strike-through text</STRIKE>
This is strike-through text.

<STRONG>stong emphasis</STRONG> bolds and may enlarge the text:
strong emphasis

<VAR>variable</VAR> is intended to distinguish a variable from a command:
variable
 

marquee

Displays a scrolling text message within a document. Only Internet Explorer recognizes this element. Use the more
supported Java or JavaScript to achieve the same effect for a broader audience.
<marquee direction="left " behavior=="scroll " scrolldelay=="250 " scrollamount=="10 ">Big sale today on fuzzy wuzzy widgets!</marquee>
behavior="scroll|slide|alternate"


HORIZONTAL LINES:

<HR> default:


<HR WIDTH=100 ALIGN=Center> specifies a line length of 100 pixels, the default line thickness aligned to the center of the page:


<HR WIDTH=50% SIZE=10 ALIGN=right> specifies line length of 50% of the page width a line thickness of 10 pixels aligned right:


<HR NOSHADE WIDTH=50% SIZE=5 ALIGN=left> specifies a non-shaded line:


Within BLOCKTEXT horizontal line parameters are based on the text width, not the window width.


GRAPHICS:

<IMG WIDTH=74 HEIGHT=74 ALT="alternative text" ALIGN=LEFT SRC="Imoney.GIF""> Graphic should be sized correctly to be viewed as expected by non-Netscape browsers, so Width and Height should normally be unnecessary. In the following case, the graphic is twice actual size.

<IMG ALT="hand with money in it" ALIGN=RIGHT SRC="Imoney.GIF"> Here it is actual size aligned right:

<IMG ALT="hand with money in it" SRC="Imoney"> Alternate text appears when the graphic cannot be displayed.

<IMG ALIGN=TOP SRC="Imoney.GIF"> Graphic aligned TOP following this text:

<IMG ALIGN=TEXTTOP SRC="Imoney.GIF"> Graphic aligned TEXTTOP following this text:

<IMG ALIGN=MIDDLE SRC="Imoney.GIF"> Graphic aligned MIDDLE following this text:

<IMG ALIGN=ABSMIDDLE SRC="Imoney.GIF"> Graphic aligned ABSMIDDLE following this text:

<IMG ALIGN=BASELINE SRC="Imoney.GIF"> Graphic aligned BASELINE following this text:

<IMG ALIGN=BOTTOM SRC="Imoney.GIF"> Graphic aligned BOTTOM following this text:

<IMG ALIGN=ABSBOTTOM SRC="Imoney.GIF"> Graphic aligned ABSBOTTOM following this text:

<IMG BORDER=5 SRC="Imoney.GIF"> Graphic with 5 pixel border around it:

Use VSPACE and HSPACE parameters with the IMG commandto keep text away from an image.
VSPACE=6 adds space abve and below an image
HSPACE=6 adds space to the left and right of an image.

Sample icons. Over 3,000 icons and graphics are in a searchable database in the Multimedia Co-Op store at synergy-mall.com (currently closed) to which you can add your own graphics, animations, video, virtual reality, music and sounds for easy reference. All the ones I added are free. You may charge for the download of the ones you add.

embed
Places an embedded object into a document. Examples of embedded objects include MIDI files and digital video files. Because the embed element is not part of the HTML standard, use the object element instead. If the browser does not have built-in support for an object, users will need a plug-in to use the object within the document.
<embed src="fur_elise.midi " AUTOSTART=true, LOOP=true ALIGN=direction WIDTH=w HEIGHT=h>
 
dynsrc="url"
Specifies the relative or absolute location of a dynamic image (VRML, video file, and so on). Internet Explorer
<img dynsrc="foo.avi ">


LISTS:

List commands control the formatting of ordered lists of text/graphics.

Using glossary command (Term/Definition) for indented list:

<DL>
<DT>Line 1</DT>
<DD>Line 2<DD>
<DD>Line 3</DD>
<DD>Line 4<DD>
<DT>Line 5</DT>
<DD>Line 6</DD>
<DL>

begets:
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6

Bullet lists:

automatic bullet type as a function of indentation (BLOCKQUOTE or lists within lists) -

  <ul>
    <li>Line 1</li>
    <ul>
      <li>Line 2</li>
      <li>Line 3</li>
      <ul>
        <li>Line 4</li>
      </ul>
    </ul>
    <li>Line 5</li>
    <ul>
      <li>Line 6</li>
    </ul>
  </ul>

begets:

forced bullet type -

<UL TYPE="DISC">
<LI>Line 1</LI>
<LI>Line 2</LI>
<LI>Line 3</LI>
</UL>

begets:

<UL TYPE="CIRCLE">
<LI>Line 1</LI>
<LI>Line 2</LI>
<LI>Line 3</LI>
</UL>

begets:

<UL TYPE="SQUARE">
<LI>Line 1</LI>
<LI>Line 2</LI>
<LI>Line 3</LI>
</UL>

begets:

automatic number type as a function of indentation (BLOCKQUOTE or lists within lists) -

<ol>
  <li>Line 1</li>
  <ol>
    <li>Line 2</li>
    <li>Line 3</li>
    <ol>
      <li>Line 4</li>
    </ol>
  </ol>
  <li>Line 5</li>
  <ol>
    <li>Line 6</li>
  </ol>
</ol>

begets:

  1. Line 1
    1. Line 2
    2. Line 3
      1. Line 4
  2. Line 5
    1. Line 6

forced numbering -

<UL TYPE="1">
<LI>Line 1</LI>
<LI>Line 2</LI>
<LI>Line 3</LI>
</UL>

begets:

  1. Line 1
  2. Line 2
  3. Line 3

<UL TYPE="I">
<LI>Line 1</LI>
<LI>Line 2</LI>
<LI>Line 3</LI>
</UL>

begets:

  1. Line 1
  2. Line 2
  3. Line 3

<UL TYPE="i">
<LI>Line 1</LI>
<LI>Line 2</LI>
<LI>Line 3</LI>
</UL>

begets:

  1. Line 1
  2. Line 2
  3. Line 3

nbsp;


<UL TYPE="A">
<LI>Line 1</LI>
<LI>Line 2</LI>
<LI>Line 3</LI>
</UL>

begets:

  1. Line 1
  2. Line 2
  3. Line 3

<UL TYPE="a">
<LI>Line 1</LI>
<LI>Line 2</LI>
<LI>Line 3</LI>
</UL>

begets:

  1. Line 1
  2. Line 2
  3. Line 3


TABLES:

Include a raw text version for those who have browsers that don't understand tables.

<TABLE> <CAPTION>caption aligned default (top)</CAPTION> <TR><TH>header, col. 1, row 1</TH> <TH>header, col. 2, row 1</TH> <TH>header, col. 3, row 1</TH></TR> <TR><TD>col. 1, row 2</TD <TD>col. 2, row 2</TD> <TD>col. 3, row 2</TD></TR> <TR><TD>col. 1, row 3</TD> <TD>col. 2, row 3</TD> <TD>col. 3, row 3</TD></TR> </TABLE>

caption aligned default (top)

header, col. 1, row 1

header, col. 2, row 1

header, col. 3, row 1

col. 1, row 2

col. 2, row 2

col. 3, row 2

col. 1, row 3

col. 2, row 3

col. 3, row 3

With border, caption aligned bottom and headers in left column rather than top row:

<TABLE BORDER> <CAPTION ALIGN=BOTTOM>caption aligned bottom</CAPTION> <TR><TH>header, col. 1, row 1</TH> <TD>col. 2, row 1</TD> <TD>col. 3, row 1</TD></TR> <TR><TH>header, col. 1, row 2</TH> <TD>col. 2, row 2</TD> <TD>col. 3, row 2</TD></TR> <TR><TH>header, col. 1, row 3</TH> <TD>col. 2, row 3</TD> <TD>col. 3, row 3</TD></TR> </TABLE>

caption aligned bottom

header, col. 1, row 1

col. 2, row 1

col. 3, row 1

header, col. 1, row 2

col. 2, row 2

col. 3, row 2

header, col. 1, row 3

col. 2, row 3

col. 3, row 3

Cell contents can be aligned to the left, center or right by setting ALIGN accordingly, or to the top or bottom of a cell by setting VALIGN accordingly. If ALIGN and VALIGN are used with <TH>...</TH> or <TD>...</TD>, then they control the alignment of each cell enclosed in those tags. If ALIGN and VALIGN are used with <TR>...</TR>, then they control all of the cells associated with that row.

<TABLE BORDER> <CAPTION>cell contents aligned center in row 2, right in column 3, row 1, top in row 3 column 2, bottom in column 3, row 3 and with a graphic in column 1 row 3 and both row 1 and column 1 as headers</CAPTION> <TR><TH>header, col. 1, row 1</TH> <TH>header, col. 2, row 1</TH> <TH ALIGN=RIGHT>header, col. 3, row 1 with extra stuff</TH></TR> <TR ALIGN=CENTER><TH>col. 1, row 2 with extra stuff</TH <TD>col. 2, row 2</TD> <TD>col. 3, row 2</TD></TR> <TR><TH>col. 1, row 3 with graphic </TH> <TD VALIGN=TOP>col. 2, row 3</TD> <TD VALIGN=BOTTOM>col. 3, row 3</TD></TR> </TABLE>

cell contents aligned center in row 2, right in column 3, row 1, top in row 3 column 2, bottom in column 3, row 3 and with a graphic in column 1 row 3 and both row 1 and column 1 as headers

header, col. 1, row 1

header, col. 2, row 1

header, col. 3, row 1 with extra stuff

col. 1, row 2 with extra stuff

col. 2, row 2
col. 3, row 2

col. 1, row 3 with graphic

col. 2, row 3

col. 3, row 3

bgcolor="#rrggbb" or "…"
Specifies the background color within all table cells in the table. You can substitute color names for the hexadecimal RGB values. This attribute is deprecated in favor of style sheets.
<table bgcolor="peach ">…</table>
border="n"
Specifies the thickness (in pixels) of borders around each table cell. Use a value of 0 to produce a table with no visible borders.
<table border="0 ">…</table>
bordercolor="#rrggbb" or "…"
Specifies the color of the borders of all the table cells in the table. You can substitute color names for the hexadecimal RGB values.
<table bordercolor="#3f9a11 ">…</table>
bordercolordark="#rrggbb" or "…"
Specifies the darker color used to draw 3-D borders around the table cells. You can substitute color names for the hexadecimal RGB values.
<table bordercolordark="silver ">…</table>
bordercolorlight="#rrggbb" or "…"
Specifies the lighter color used to draw 3-D borders around the table cells. You can substitute color names for the hexadecimal RGB values.
<table bordercolorlight="white ">…</table>
cellpadding="n"
Specifies the space (in pixels) between the edges of table cells and their contents.
<table cellpadding="5 ">…</table>
cellspacing="n"
Specifies the space (in pixels) between the borders of table cells and the borders of adjacent cells.
<table border="2 " cellspacing=="5 ">…</table>

TABINDEX=n sets tab order

frame="void|border|above|below|hsides|lhs|rhs|vsides|box"
Specifies the external borderlines around the table. For the frame attribute to work, set the border attribute to a nonzero value.
Value - Specifies
void - No borderlines
box or border - Borderlines around the entire table (the default)
above - A borderline along the top edge
below - A borderline along the bottom edge
hsides - Borderlines along the top and bottom edges
lhs - A borderline along the left edge
rhs - A borderline along the right edge
vsides - Borderlines along the left and right edges
<table border="2 " rules=="all " frame=="vsides ">…</table>
id="…"
Assigns a unique ID selector to an instance of the table element. When you then assign a style to that ID selector, it
affects only that one instance of the table element.
<table id="123 ">…</table>
rules="none|rows|cols|all|groups"
Specifies where rule lines appear inside the table. For the rules attribute to work, set the border attribute to a
nonzero value.
Value - Specifies
none - No rule lines
rows -Rule lines between rows
cols -Rule lines between columns
all -All possible rule lines
groups - Rule lines between the groups defined by the tfoot , thead , tbody , and colgroup elements


FORMS:

<FORM METHOD=POST ACTION=/cgi-bin/users/gen_form2> begins a form.
</FORM> ends a form. POST transfers the input information to the gateway script using the standard input. GET uses a UNIX shell, which is limited in capacity, so POST is preferred. ACTION specifies the program that is to process the information.

Edit text field of fixed character length and maximum number of characters:
<INPUT TYPE="text" NAME="Edit text field size=30 characters and max size (optional)=35" SIZE=30 MAXLENGTH=35 VALUE="default value (optional)" >

Password text field, whatever is typed is replaced by dots:
<INPUT TYPE="password" NAME="Password text field size=6" SIZE=6 >

Large scrollable text field
<TEXTAREA NAME="Large text field 10 rows by 50 characters" ROWS=10 COLS=50>Default Value (optional)</TEXTAREA>

Pop-up Menu with three options:
<SELECT NAME="Pop-up Menu">
<OPTION> Option 1
<OPTION> Option 2
<OPTION> Option 3
</SELECT>

Check Box checked
<INPUT TYPE="checkbox" NAME="Check Box checked" VALUE="Value when checked (optional)" CHECKED>

Check Box unchecked <INPUT TYPE="checkbox" NAME="Check Box unchecked" >

Radio Button checked
<INPUT TYPE="radio" NAME="Radio Box checked" VALUE="Value when checked (optional)" CHECKED>

>Radio Button unchecked
<INPUT TYPE="radio" NAME="Radio Box unchecked" >

Set of Radio Buttons
<INPUT TYPE="radio" NAME="Radio Box set" VALUE="1" >
<INPUT TYPE="radio" NAME="Radio Box set" VALUE="2" >
<INPUT TYPE="radio" NAME="Radio Box set" VALUE="3" >

Hidden item to be sent to program along with other form information (good for multiple uses of the same form).
<INPUT TYPE="hidden" NAME="Hidden item" VALUE="Value of hidden item">

File Upload
<INPUT TYPE="file" TYPE="multipart/form-data" NAME="title"
where file creates the upload box, multipart/form-data specifies the file format, title specifies the files being uploaded and size specifies the box width.

Reset button clears form
<INPUT TYPE="reset" VALUE="Reset title (optional)" >

Submit button sends information in form to cgi program
<INPUT TYPE="submit" VALUE="Submit title (optional)" ></FORM>


IMAGE MAP:

Image maps are images with selectable areas on them.
<A HREF="/cgi-bin/imagemap">
<IMG SRC="imagemap.gif" ISMAP>
</A>
links the image to a cgi script for processing.

Define selectable areas on the image by specifying their coordinates (Photoshop will provide coordinate information)
circle URL.html x,y r
rect URL.html x1,y1 x2,y2
poly URL.html x1,y1 x2,y2 x3,y3... xn,yn
point URL.html x,y
where URL is the directory/path name of the file to be opened if the area is selected.

Modern HTML development tools do all of this work for you.


META TAGS

<META NAME="revisit-after" CONTENT ="30 days">

<META NAME="classification" CONTENT ="Internet">

<META NAME="description" CONTENT="Site description">

<META NAME="keywords" CONTENT="keyword, keyphrase, etc.">

<META NAME="generator" CONTENT="Some program">

<META NAME="robots" CONTENT="ALL">

<META NAME="distribution" CONTENT="Global">

<META NAME="rating" CONTENT="Safe For Kids">

<META NAME="copyright" CONTENT="2003 Synergy Enterprises">

<META NAME="author" CONTENT="Synergy Enterprises">

<META NAME="doc-type" CONTENT="Public">

<META NAME="doc-class" CONTENT="Completed">

<META NAME="doc-rights" CONTENT="Copywritten Work">

<META NAME="date.created" CONTENT="20 Jan 2006">

<META NAME="date.modified" CONTENT="20 Jan 2006">

<META http-equiv="Content-type" CONTENT="text/html;charset=ISO-8859-1">

For more information, visit http://vancouver-webpages.com/META/

Sample:

<META NAME="DESCRIPTION" Content="Synergy Enterprises - Helping you be all you can be by helping you get more out of what you've got. We utilize a number of independent contractors whose capabilities range from Web page design, webmaster, marketing and back-end databases to animation, desktop publishing, desktop video, PC and Mac networks, AppleScript programming, and enterprise integration.">

<META NAME="KEYWORDS" Content="internet, intranet, web, database, filemaker, web page development, web site development, web page hosting, web site hosting, internet services, database development, e-commerce, mall, store, shopping center, marketing, webmaster, programmer, programming, Macintosh">


Special Characters

The following is a list of the International Standards Organization (ISO) Latin-1 characters and their corresponding numeric entities.

Note If a browser does not recognize a numeric entity, then the characters listed in brackets appear in its place.

Numeric entity (raw HTML option)

Special character produced

&#00;-&#08;

Unused

&#09;

Horizontal tab

&#10;

Line feed

&#11;-&#12;

Unused

&#13;

Carriage Return

&#14;-&#31;

Unused

&#32;

Space

&#33;

! (Exclamation mark)

&#34;

" (Quotation mark)

&#35;

# (Number sign)

&#36;

$ (Dollar sign)

&#37;

% (Percent sign)

&#38;

& (Ampersand)

&#39;

' (Apostrophe)

&#40;

( (Left parenthesis)

&#41;

) (Right parenthesis)

&#42;

* (Asterisk)

&#43;

+ (Plus sign)

&#44;

, (Comma)

&#45;

- (Hyphen)

&#46;

. (Period)

&#47;

/ (Solidus - slash)

&#48;-&#57;

0 1 2 3 4 5 6 7 8 9 (Digits 0-9)

&#58;

: (Colon)

&#59;

; (Semi-colon)

&#60;

< (Less than)

&#61;

= (Equals sign)

&#62;

> (Greater than)

&#63;

? (Question mark)

&#64;

@ (Commercial at)

&#65;-&#90;

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z (Letters A-Z)

&#91;

[ (Left square bracket)

&#92;

(Reverse solidus - backslash)

&#93;

] (Right square bracket)

&#94;

^ (Caret)

&#95;

_ (Horizontal bar - underbar)

&#96;

\Q (Grave accent - back apostrophe)

&#97;-&#122;

a b c d e f g h i j k l m n o p q r s t u v w x y z (Letters a-z)

&#123;

{ (Left curly brace)

&#124;

| (Vertical bar)

&#125;

} (Right curly brace)

&#126;

~ (Tilde)

&#127;-&#159;

Unused

Values 128-159

These values are not assigned to displayable characters in the ISO8859-1 code and should not be used for displayable characters in HTML.

&#160;

Non-breaking space [&nbsp]

&#161;

¡ (Inverted exclamation) [&iexcl; &iexcl]

&#162;

¢ (Cent sign) [&cent; &cent]

&#163;

£ (Pound sterling) [&pound; &pound]

&#164;

¤ (General currency sign) [&curren; &curren]

&#165;

¥ (Yen sign) [&yen; &yen]

&#166;

(Broken vertical bar) [&brvbar; &brvbar]

&#167;

§ (Section sign) [&sect; &sect]

&#168;

¨ (Umlaut - dieresis) [&uml; &uml]

&#169;

© (Copyright) [&copy; ©]

&#170;

ª (Feminine ordinal) [&ordf; &ordf]

&#171;

« (Left angle quote, guillemotleft) [&laquo; &laquo]

&#172;

¬ (Not sign) [&not; &not]

&#173;

- (Soft hyphen) [&shy; &shy] Many browsers do not properly handle this character. It is better to use the &shy; entity name instead of this ISO numeric entity.

&#174;

® (Registered trademark) [&reg; ®]

&#175;

¯ (Macron accent) [&macr; &macr]

&#176;

\xa1 (Degree sign) [&deg; &deg]

&#177;

± (Plus or minus) [&plusmn; &plusmn]

&#178;

(Superscript two) [&sup2; &sup2]

&#179;

(Superscript three) [&sup3; &sup3]

&#180;

´ (Acute accent) [&acute; &acute]

&#181;

µ (Micro sign) [&micro; &micro]

&#182;

¶ (Paragraph sign) [&para; &para]

&#183;

· (Middle dot) [&middot; &middot]

&#184;

¸ (Cedilla) [&cedil; &cedil]

&#185;

(Superscript one) [&sup1; &sup1]

&#186;

º (Masculine ordinal) [&ordm; &ordm]

&#187;

» (Right angle quote, guillemotright) [&raquo; &raquo]

&#188;

(Fraction one-fourth) [&frac14; &frac14]

&#189;

(Fraction one-half) [&frac12; &frac12]

&#190;

(Fraction three-fourths) [&frac34; &frac34]

&#191;

¿ (Inverted question mark) [&iquest; &iquest]

&#192;

À (Capital A, grave accent) [&Agrave; À]

&#193;

Á (Capital A, acute accent) [&Aacute; Á]

&#194;

 (Capital A, circumflex accent) [&Acirc; Â]

&#195;

à (Capital A, tilde) [&Atilde; Ã]

&#196;

Ä (Capital A, dieresis or umlaut mark) [&Auml; Ä]

&#197;

Å (Capital A, ring) [&Aring; Å]

&#198;

Æ (Capital AE dipthong, ligature) [&AElig; Æ]

&#199;

Ç (Capital C, cedilla) [&Ccedil; Ç]

&#200;

È (Capital E, grave accent) [&Egrave; È]

&#201;

É (Capital E, acute accent) [&Eacute; É]

&#202;

Ê (Capital E, circumflex accent) [&Ecirc; Ê]

&#203;

Ë (Capital E, dieresis or umlaut mark) [&Euml; Ë]

&#204;

Ì (Capital I, grave accent) [&Igrave; Ì]

&#205;

Í (Capital I, acute accent) [&Iacute; Í]

&#206;

Î (Capital I, circumflex accent) [&Icirc; Î]

&#207;

Ï (Capital I, dieresis or umlaut mark) [&Iuml; Ï]

&#208;

(Capital Eth, Icelandic) [&ETH; ]

&#209;

Ñ (Capital N, tilde) [&Ntilde; Ñ]

&#210;

Ò (Capital O, grave accent) [&Ograve; Ò]

&#211;

Ó (Capital O, acute accent) [&Oacute; Ó]

&#212;

Ô (Capital O, circumflex accent) [&Ocirc; Ô]

&#213;

Õ (Capital O, tilde accent) [&Otilde; Õ]

&#214;

Ö (Capital O, dieresis or umlaut mark) [&Ouml; Ö]

&#215;

x (Multiply sign) [&times; &times]

&#216;

Ø (Capital O, slash) [&Oslash; Ø]

&#217;

Ù (Capital U, grave accent) [&Ugrave; Ù]

&#218;

Ú (Capital U, acute accent) [&Uacute; Ú]

&#219;

Û (Capital U, circumflex accent) [&Ucirc; Û]

&#220;

Ü (Capital U, dieresis or umlaut mark) [&Uuml; Ü]

&#221;

(Capital Y, acute accent) [&Yacute; ]

&#222;

(Capital THORN, Icelandic) [&THORN; \xde ]

&#223;

ß (Small sharp s, German, sz ligature) [&szlig; ß]

&#224;

à (Small a, grave accent) [&agrave; à]

&#225;

á (Small a, acute accent) [&aacute; á]

&#226;

â (Small a, circumflex accent) [&acirc; â]

&#227;

ã (Small a, tilde accent) [&atilde; ã]

&#228;

ä (Small a, dieresis or umlaut mark) [&auml; ä]

&#229;

å (Small a, ring) [&aring; å]

&#230;

æ (Small ae dipthong, ligature) [&aelig; æ]

&#231;

ç (Small c, cedilla) [&ccedil; ç]

&#232;

è (Small e, grave accent) [&egrave; è]

&#233;

é (Small e, acute accent) [&eacute; é]

&#234;

ê (Small e, circumflex accent) [&ecirc; ê]

&#235;

ë (Small e, dieresis or umlaut mark) [&euml; ë]

&#236;

ì (Small i, grave accent) [&igrave; ì]

&#237;

í (Small i, acute accent) [&iacute; í]

&#238;

î (Small i, circumflex accent) [&icirc; î]

&#239;

ï (Small i, dieresis or umlaut mark) [&iuml; ï]

&#240;

(Small eth, Icelandic) [&eth; ]

&#241;

ñ (Small n, tilde) [&ntilde; ñ]

&#242;

ò (Small o, grave accent) [&ograve; ò]

&#243;

ó (Small o, acute accent) [&oacute; ó]

&#244;

ô (Small o, circumflex accent) [&ocirc; ô]

&#245;

õ (Small o, tilde) [&otilde; õ]

&#246;

ö (Small o, dieresis or umlaut mark) [&ouml; ö]

&#247;

÷ (Division sign) [&divide; &divide]

&#248;

ø (Small o, slash) [&oslash; ø]

&#249;

ù (Small u, grave accent) [&ugrave; ù]

&#250;

ú (Small u, acute accent) [&uacute; ú]

&#251;

û (Small u, circumflex accent) [&ucirc; û]

&#252;

ü (Small u, dieresis or umlaut mark) [&uuml; ü]

&#253;

(Small y, acute accent) [&yacute; ]

&#254;

(Small thorn, Icelandic) [&thorn; \xdf ]

&#255;

ÿ (Small y, dieresis or umlaut mark) [&yuml; ÿ]


JAVA

Event Handlers

When users interact with your Web page through JavaScript scripts, you need event handlers to recognize the event and communicate back to your script. Event handlers help manage the interaction between your users and your JavaScript objects by providing the information in the user response to the JavaScript for later use. This section is an alphabetic listing of the available JavaScript event handlers. Each entry describes a single event handler, includes examples, and identifies the objects for which the event handler works. The syntax for these event handlers can be seen in the corresponding object listings.

onblur

A blur occurs when the focus moves from one object to another on the page. The object that was in focus loses focus and is blurred. The onblur event handler works for the select , text , and textarea objects.

Example
onblur="document.login.submit()";

When the user leaves the field, the system submits the information for logging into the next page.

onchange

A change occurs when the user alters the contents of an object and then moves the focus from the object. The object is changed. Use the onchange event handler to validate the information submitted by users. The onchange event handler works for the select , text , and textarea objects.

Example
onchange="testName(this.value)";

This example sends the contents of the field to the testName function when the user changes information and leaves the field.

onclick

A click occurs when the user clicks an object on the page with the mouse. This event could lead to a selection or a change or could launch a piece of JavaScript code. The onclick event handler works for the document , button , checkbox , radio , link , reset , and submit objects. It has been updated to not act if the event handler returns false when it's employed by a checkbox , radio , submit ,or reset object.

Example
onclick="compute(this.form)";

When the user clicks the object, the script runs the compute function and sends the form contents.

ondblclick

A double-click occurs when the user clicks twice very quickly on an object on the page. This event handler was introduced in JavaScript 1.2, so it will not work with versions of Netscape Navigator 3 or earlier or with Internet Explorer 3 or earlier. The ondblclick event handler is not implemented in the Macintosh versions of the Netscape Navigator browser. It works for the document , area (in an image map), and link objects.

Example
<a href="seeMyFamily.html " ondblclick=="this.href ='theFastTour '">

This example loads a different page if the user double-clicks a link. ondragdrop A drag-and-drop occurs when the user drops an object, such as a file, onto the browser window. Note that this event was introduced in JavaScript 1.2, so it will not work with versions of Netscape Navigator 3 or earlier or with Internet Explorer 3 or earlier. The ondragdrop event handler works for the window object.

Example
ondragdrop="send(newInfo)";

This passes the dropped object to a function called send . This could be preformatted data that the user can mail to you by dropping the file onto the Web page.

onfocus

The focus on a page is selected when the user either tabs or clicks a field or an object on the page. Selecting within a field does not create a focus event; rather, it generates a select event. The onfocus event handler works for the select , text , and textarea objects.

Example
onfocus="msgWindow.document.write('Tell me what you want!')";

When the user clicks in the field object, the script writes out the phrase "Tell me what you want!"

onkeydown

A key down occurs as the user presses a keyboard key. This event precedes the keyPress event. This event was introduced in JavaScript 1.2, so it will not work with versions of Netscape Navigator 3 or earlier or with Internet Explorer 3 or earlier. The onkeydown event handler works for the document , image , link , and textarea objects.

Example
onkeydown="msgWindow.document.write('Tell me what you want!')";

When the user presses the key, the script writes out the phrase "Tell me what you want!"

onkeypress

A key press occurs when the user presses or holds a keyboard key. You can use this in combination with fromCharCode and charCodeAt methods to determine which key was pressed. This is useful for operations where you prompt the user to type Y for yes and any other key for no. The onkeypress event handler works for the document , image , link , and textarea objects. This event was introduced in JavaScript 1.2, so it will not work with versions of Netscape Navigator 3 or earlier or with Internet Explorer 3 or earlier.

Example
onkeypress="msgWindow.document.write('Tell me what you want!')";

When the user presses the key, the script writes out the phrase "Tell me what you want!"

onkeyup

A key up occurs when the user releases the keyboard key. You can use this to clear the results of the onkeypress or onkeydown event handlers. The onkeyup event handler works for the document, image, link, and textareaobjects. This event was introduced in JavaScript 1.2, so it will not work with versions of Netscape Navigator 3 or earlier or with Internet Explorer 3 or earlier.

Example
onkeyup="msgWindow.document.write('Tell me what you want!')";

When the user releases the key, the script writes out the phrase "Tell me what you want!"

onload

A load event occurs when the browser receives all the page information, including framesets, and displays it. Locate the onload event handler inside the body or frame-set elements. The onload event handler works for the window object.

Example
<body onload="window.alert('Current as of ' ++ document.lastModified +'!')">

This example opens an alert window after the page is loaded and displays a message that includes the lastModified property. This gives the user the document's modification date.

onmousedown

A mouse button down occurs when the user presses one of the mouse buttons. You can use the event properties to determine which button was pressed. The onmousedown event handler works for the button , document , and link objects. This event was introduced in JavaScript 1.2, so it will not work with versions of Netscape Navigator 3 or earlier or with Internet Explorer 3 or earlier.

Example
onmousedown="msgWindow.document.write ('Tell me what you want!')";

When the user moves the mouse button down, the script writes out the phrase "Tell me what you want!"

onmousemove

A mouse movement occurs when the user moves the mouse over any point on the page. This is not an event handler that works for any particular object, but can be invoked if an object requests the event. This event was introduced in JavaScript 1.2, so it will not work with versions of Netscape Navigator 3 or earlier or with Internet Explorer 3 or earlier.

Example
onmousemove="msgWindow.document.write ('Tell me what you want!')";

When the user moves the mouse, the script writes out the phrase "Tell me what you want!"

onmouseout

An onmouseout event occurs when the user moves the mouse point off an object on the page. This event handler defines what should happen when the user removes the mouse from an object such as a link. This event was introduced in JavaScript 1.2, so it will not work with versions of Netscape Navigator 3 or earlier or with Internet Explorer 3 or earlier. The onmouseout event handler works for the area , layer , and link objects.

Example
<a href="myFamily.html " onmouseout=="alert ('Hey,we 've got great pics down this way,come back!')"> Meet My Family</a>

When the user's mouse passes off the Meet My Family link, an alert box appears with the message "Hey, we've got great pics down this way, come back!"

onmouseover

An onmouseOver event occurs when the user passes the mouse pointer over an object on the page. You must return True within the event handler if you want to set the sta tus or defaultStatus properties. The onmouseover event handler works for the area , layer , and link objects. The area object is a type of link object which defines an area of an image as an image map. The layer object is part of the document object's layers array property, and is referenced by id or index value.

Example
onmouseover="window.status="Come on in!";return true ";

When the user's mouse pointer passes over the object, the message "Come on in!" appears in the status line. You can also change the image in place, highlighting image links on the page. <a href="intropage.html "onmouseover="document.pic1.src='images/jumpwild.jpg '" onmouseout="document.pic1.src='images/jump.jpg '" onclick="return true "></a>

In this example, the page displays the image jump.jpg,which is linked to the XHTML page intropage. When the user passes the mouse pointer over the image but does not click, the image changes to jumpwild.jpg . When the user clicks the image to jump, the return value of True is set by the onclick event handler before the jump is made.

onmouseup

A mouse button up event occurs when the user releases the mouse button. This event was introduced in JavaScript 1.2, so it will not work with versions of Netscape Navigator 3 or earlier or with Internet Explorer 3 or earlier. The onmouseup event handler works for the button , document , and link objects.

Example
<a href="myFamily.html " onmouseup=="alert ('Hey,we 've got great pics down this way,come back!')"> Meet My Family</a>

When the user's mouse button moves back up while over the Meet My Family link, an alert box appears with the message "Hey, we've got great pics down this way, come back!"

onmove

A move occurs when the user or a browser-driven script moves a window or a frame. This event was introduced in JavaScript 1.2, so it will not work with versions of Netscape Navigator 3 or earlier or with Internet Explorer 3 or earlier. The onmove event handler works for the window and frame objects.

Example
onmove="window.status='Come on in!'";

When the window moves, the message "Come on in!" appears in the status line. onselect A select event occurs when the user highlights text inside a text or textarea field (the onselect event handler works for the text and textarea objects).

Example
onselect="document.bgColor=blue ";

The background color of the document changes to blue when the user selects text from the field.

onresize

A resize occurs when the user or a browser-driven script changes the size of the window or frame. This event was introduced in JavaScript 1.2, so it will not work with versions of Netscape Navigator 3 or earlier or with Internet Explorer 3 or earlier. The onresize event handler works for the window and frame objects.

Example
onresize="window.status='Stop that!'";

When the window is resized, the message "Stop that!" appears in the status line.

onreset

Use the onreset event handler to act when the form is reset; it works for the form object.

Example
<body>
<form name="form1 " id=="form1 "
onreset="alert('Please try again!')" … >>
<input type="text " name=="newInTown " value=="" size=="100 "
maxlength="25 " //>
<input type="Reset " name=="Reset " value=="Reset " //>
</form>
This example prints a "Please try again!" alert box when the user resets the form.

onsubmit

When the document is one or more forms, use the onsubmit event handler to validate the contents of the form. This event handler works for the form object.

Example
<script type="text/javascript " language=="javascript ">
function hotelGuys (checksOut){
if (checksOut =="false "){
alert("Please fill in all fields.");}
else {
document.forms [0 ].submit();
alert("We came here Jasper ");}}
</script>
<form name="form1 " id=="form1 "
onsubmit="hotelGuys(checksOut ='true ')">
<input type="text " name=="newInTown " value=="" size=="100 "
maxlength="25 " //>
<input type="submit " name=="register " value=="" //>
</form>

This example uses an if statement either to request more information from the user or to submit the form. Normally, you wouldn't set the state in the call. You would call another function that would test the entries, and that function would then call hotelGuys.

onunload

Like the load event, the unload event occurs when the browser leaves a page. One good use for the onunload event handler is to clear any function variables you may have set into motion with the onload or other event handlers. The onunload event handler works for the window object.

Example
<body onload="CountOn(4)" onunload=="ClearCount()">…</body>

A counter starts when the page begins loading. You can use this to display a splash screen for a limited time. When the user leaves the page, the counter is reset to zero by the ClearCount function.

 

<IMG SRC=".../images/Noho.gif ONMOUSEOVER="window.status='Selecting this image will display a large version in a separate window'; return true">


</BODY> indicates the end of the body of the HTML document.

</HTML> indicates the end of an HTML document.


| W.T. Holmes | Web | Internet |