HTML Tutorial
CONTENTS:
- NOTES
- SETUP
- BODY
- COMMENT
- LINKS
- HEADINGS
- SIZES
- FORMATS
- STYLES
- HORIZONTAL LINES
- GRAPHICS
- LISTS
- TABLES
- FORMS
- IMAGE MAP
- META TAGS
- SPECIAL CHARACTERS
- 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.
|
Color |
Tint |
Value |
|---|---|---|
|
Reds |
||
|
Oranges |
||
|
Yellows |
||
|
Greens |
||
|
Blues |
||
|
Violets |
||
|
Neutrals |
||
<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.
<H1>heading 1</H1>:heading 1
- <H2>heading 2</H2>:
heading 2
- <H3>heading 3</H3>:
heading 3
- <H4>heading 4</H4>:
heading 4
- <H5>heading 5</H5>:
heading 5
- <H6>heading 6</H6>:
heading 6
SIZES:
<FONT SIZE=1>font size 1</FONT> (not standard)font size 1- <FONT SIZE=2>font size
2</FONT>
(not standard):
font size 2 - <FONT SIZE=3>font size
3</FONT>
(not standard):
font size 3 - <FONT SIZE=4>font size
4</FONT>
(not standard):
font size 4 - <FONT SIZE=5>font size
5</FONT>
(not standard):
font size 5 - <FONT SIZE=6>font size
6</FONT>
(not standard):
font size 6 - <FONT SIZE=7>font size
7</FONT>
(not standard):
font size 7
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
<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>center line</CENTER> centers the enclosed text on the screen:
<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>
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):
<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:
- Graphic file sizes should be less than 30 Kbytes.
- .GIF or .JPEG should suffix the file name, depending on type.
- Use GIF89A to make background invisible when possible
- Interleave (display alternate parts of image such that it gradually appears) large color images.
- Many browsers do not support alignment. Left is the default.
<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:
- Line 1
- Line 2
- Line 3
- Line 4
- Line 5
- Line 6
forced bullet type -
<UL TYPE="DISC">
<LI>Line 1</LI>
<LI>Line 2</LI>
<LI>Line 3</LI>
</UL>
begets:
<UL TYPE="CIRCLE">
- Line 1
- Line 2
- Line 3
<LI>Line 1</LI>
<LI>Line 2</LI>
<LI>Line 3</LI>
</UL>
begets:
<UL TYPE="SQUARE">
- Line 1
- Line 2
- Line 3
<LI>Line 1</LI>
<LI>Line 2</LI>
<LI>Line 3</LI>
</UL>
begets:
- Line 1
- Line 2
- Line 3
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:
- Line 1
- Line 2
- Line 3
- Line 4
- Line 5
- Line 6
forced numbering -
<UL TYPE="1">
<LI>Line 1</LI>
<LI>Line 2</LI>
<LI>Line 3</LI>
</UL>
begets:
- Line 1
- Line 2
- Line 3
<UL TYPE="I">
<LI>Line 1</LI>
<LI>Line 2</LI>
<LI>Line 3</LI>
</UL>
begets:
- Line 1
- Line 2
- Line 3
<UL TYPE="i">
<LI>Line 1</LI>
<LI>Line 2</LI>
<LI>Line 3</LI>
</UL>
begets:
- Line 1
- Line 2
- Line 3
nbsp;
<UL TYPE="A">
<LI>Line 1</LI>
<LI>Line 2</LI>
<LI>Line 3</LI>
</UL>
begets:
- Line 1
- Line 2
- Line 3
<UL TYPE="a">
<LI>Line 1</LI>
<LI>Line 2</LI>
<LI>Line 3</LI>
</UL>
begets:
- Line 1
- Line 2
- 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>
|
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>
|
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>
|
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. 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 |
|---|---|
|
�- |
Unused |
|
	 |
Horizontal tab |
|
|
Line feed |
|
- |
Unused |
|
|
Carriage Return |
|
- |
Unused |
|
  |
Space |
|
! |
! (Exclamation mark) |
|
" |
" (Quotation mark) |
|
# |
# (Number sign) |
|
$ |
$ (Dollar sign) |
|
% |
% (Percent sign) |
|
& |
& (Ampersand) |
|
' |
' (Apostrophe) |
|
( |
( (Left parenthesis) |
|
) |
) (Right parenthesis) |
|
* |
* (Asterisk) |
|
+ |
+ (Plus sign) |
|
, |
, (Comma) |
|
- |
- (Hyphen) |
|
. |
. (Period) |
|
/ |
/ (Solidus - slash) |
|
0-9 |
0 1 2 3 4 5 6 7 8 9 (Digits 0-9) |
|
: |
: (Colon) |
|
; |
; (Semi-colon) |
|
< |
< (Less than) |
|
= |
= (Equals sign) |
|
> |
> (Greater than) |
|
? |
? (Question mark) |
|
@ |
@ (Commercial at) |
|
A-Z |
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) |
|
[ |
[ (Left square bracket) |
|
\ |
(Reverse solidus - backslash) |
|
] |
] (Right square bracket) |
|
^ |
^ (Caret) |
|
_ |
_ (Horizontal bar - underbar) |
|
` |
\Q (Grave accent - back apostrophe) |
|
a-z |
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) |
|
{ |
{ (Left curly brace) |
|
| |
| (Vertical bar) |
|
} |
} (Right curly brace) |
|
~ |
~ (Tilde) |
|
-Ÿ |
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. |
|
  |
Non-breaking space [ ] |
|
¡ |
¡ (Inverted exclamation) [¡ ¡] |
|
¢ |
¢ (Cent sign) [¢ ¢] |
|
£ |
£ (Pound sterling) [£ £] |
|
¤ |
¤ (General currency sign) [¤ ¤] |
|
¥ |
¥ (Yen sign) [¥ ¥] |
|
¦ |
|
|
§ |
§ (Section sign) [§ §] |
|
¨ |
¨ (Umlaut - dieresis) [¨ ¨] |
|
© |
© (Copyright) [© ©] |
|
ª |
ª (Feminine ordinal) [ª ª] |
|
« |
« (Left angle quote, guillemotleft) [« «] |
|
¬ |
¬ (Not sign) [¬ ¬] |
|
­ |
- (Soft hyphen) [­ ­] Many browsers do not properly handle this character. It is better to use the ­ entity name instead of this ISO numeric entity. |
|
® |
® (Registered trademark) [® ®] |
|
¯ |
¯ (Macron accent) [¯ ¯] |
|
° |
\xa1 (Degree sign) [° °] |
|
± |
± (Plus or minus) [± ±] |
|
² |
|
|
³ |
|
|
´ |
´ (Acute accent) [´ ´] |
|
µ |
µ (Micro sign) [µ µ] |
|
¶ |
¶ (Paragraph sign) [¶ ¶] |
|
· |
· (Middle dot) [· ·] |
|
¸ |
¸ (Cedilla) [¸ ¸] |
|
¹ |
|
|
º |
º (Masculine ordinal) [º º] |
|
» |
» (Right angle quote, guillemotright) [» »] |
|
¼ |
|
|
½ |
|
|
¾ |
|
|
¿ |
¿ (Inverted question mark) [¿ ¿] |
|
À |
À (Capital A, grave accent) [À À] |
|
Á |
Á (Capital A, acute accent) [Á Á] |
|
 |
 (Capital A, circumflex accent) [ Â] |
|
à |
à (Capital A, tilde) [à Ã] |
|
Ä |
Ä (Capital A, dieresis or umlaut mark) [Ä Ä] |
|
Å |
Å (Capital A, ring) [Å Å] |
|
Æ |
Æ (Capital AE dipthong, ligature) [Æ Æ] |
|
Ç |
Ç (Capital C, cedilla) [Ç Ç] |
|
È |
È (Capital E, grave accent) [È È] |
|
É |
É (Capital E, acute accent) [É É] |
|
Ê |
Ê (Capital E, circumflex accent) [Ê Ê] |
|
Ë |
Ë (Capital E, dieresis or umlaut mark) [Ë Ë] |
|
Ì |
Ì (Capital I, grave accent) [Ì Ì] |
|
Í |
Í (Capital I, acute accent) [Í Í] |
|
Î |
Î (Capital I, circumflex accent) [Î Î] |
|
Ï |
Ï (Capital I, dieresis or umlaut mark) [Ï Ï] |
|
Ð |
|
|
Ñ |
Ñ (Capital N, tilde) [Ñ Ñ] |
|
Ò |
Ò (Capital O, grave accent) [Ò Ò] |
|
Ó |
Ó (Capital O, acute accent) [Ó Ó] |
|
Ô |
Ô (Capital O, circumflex accent) [Ô Ô] |
|
Õ |
Õ (Capital O, tilde accent) [Õ Õ] |
|
Ö |
Ö (Capital O, dieresis or umlaut mark) [Ö Ö] |
|
× |
x (Multiply sign) [× ×] |
|
Ø |
Ø (Capital O, slash) [Ø Ø] |
|
Ù |
Ù (Capital U, grave accent) [Ù Ù] |
|
Ú |
Ú (Capital U, acute accent) [Ú Ú] |
|
Û |
Û (Capital U, circumflex accent) [Û Û] |
|
Ü |
Ü (Capital U, dieresis or umlaut mark) [Ü Ü] |
|
Ý |
|
|
Þ |
|
|
ß |
ß (Small sharp s, German, sz ligature) [ß ß] |
|
à |
à (Small a, grave accent) [à à] |
|
á |
á (Small a, acute accent) [á á] |
|
â |
â (Small a, circumflex accent) [â â] |
|
ã |
ã (Small a, tilde accent) [ã ã] |
|
ä |
ä (Small a, dieresis or umlaut mark) [ä ä] |
|
å |
å (Small a, ring) [å å] |
|
æ |
æ (Small ae dipthong, ligature) [æ æ] |
|
ç |
ç (Small c, cedilla) [ç ç] |
|
è |
è (Small e, grave accent) [è è] |
|
é |
é (Small e, acute accent) [é é] |
|
ê |
ê (Small e, circumflex accent) [ê ê] |
|
ë |
ë (Small e, dieresis or umlaut mark) [ë ë] |
|
ì |
ì (Small i, grave accent) [ì ì] |
|
í |
í (Small i, acute accent) [í í] |
|
î |
î (Small i, circumflex accent) [î î] |
|
ï |
ï (Small i, dieresis or umlaut mark) [ï ï] |
|
ð |
|
|
ñ |
ñ (Small n, tilde) [ñ ñ] |
|
ò |
ò (Small o, grave accent) [ò ò] |
|
ó |
ó (Small o, acute accent) [ó ó] |
|
ô |
ô (Small o, circumflex accent) [ô ô] |
|
õ |
õ (Small o, tilde) [õ õ] |
|
ö |
ö (Small o, dieresis or umlaut mark) [ö ö] |
|
÷ |
÷ (Division sign) [÷ ÷] |
|
ø |
ø (Small o, slash) [ø ø] |
|
ù |
ù (Small u, grave accent) [ù ù] |
|
ú |
ú (Small u, acute accent) [ú ú] |
|
û |
û (Small u, circumflex accent) [û û] |
|
ü |
ü (Small u, dieresis or umlaut mark) [ü ü] |
|
ý |
|
|
þ |
|
|
ÿ |
ÿ (Small y, dieresis or umlaut mark) [ÿ ÿ] |
(Broken
vertical bar) [¦ ¦]
(Superscript
two) [² ²]
(Superscript
three) [³ ³]
(Superscript
one) [¹ ¹]
(Fraction
one-fourth) [¼ ¼]
(Fraction
one-half) [½ ½]
(Fraction
three-fourths) [¾ ¾]
(Capital
Eth, Icelandic) [Ð ]
(Capital
Y, acute accent) [Ý ]
(Capital
THORN, Icelandic) [Þ \xde ]
(Small
eth, Icelandic) [ð ]
(Small
y, acute accent) [ý ]
(Small
thorn, Icelandic) [þ \xdf ]
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.