HTML Instructions

Copyright © 1999 by Duane R. Hurst
Back to Previous Page

      I wrote the following HTML guide at home in 1999.

  1.   HTML Tags and Usage
  2.   HTML Tags
  3.   Applets
  4.   CGI Script
  5.   Color Tags
  6.   Extras
  7.   Forms
  8.   Frameset
  9.   HTML Links
  10.   Images
  11.   Java and Embedded Objects
  12.   Lists
  13.   Marquee
  14.   Media Archive
  15.   Style Sheet
  16.   Table
  17.   HTML and CGI-Bin Files

HTML Tags and Usage
(PC server program requests info via CGI program script from Server  
database; response is sent through Gateway program.  Browser -> web server ->
via CGI to Gateway program -> browser.)

CGI  = Common Gateway Interface (CGI code/script; not used with simple 
         file transfers)

HTML = HyperText Markup Language (simple ASCII text); subset of SGML 
         (Standard Generalized Markup Language)

ISP  = Internet Service Provider

URL  = Uniform Resource Locator.  Specific WWW or Internet location
        (path name) on the web.
        1. Protocol = name:
           eg:  http:	(HyperText Transfer Protocol)
                goher: (University of Minnesota)
                ftp:   (File Transfer Protocol)
                mailto: (e-mail)
                news:   (Usenet news group)
        2. Domain Name = website ID (host)
           eg:  //
        3. Port number = defines location on server of info
           eg:  :80
        4. Directory Path = specify location of data on server
           eg:  /direc
             / = directory path on webserver
             \ = for command line interface
        5. File Name = accessed on server
           eg:  /doc.html (specify HTML doc on server)
        6. Anchor Name of HTML doc = exact location on web
           eg:  #end	

HTML Documents

Three main parts of an HTML document: 1. HTML = in all HTML documents 2. HEAD = title information 3. BODY = document itself Nesting = include a list within a list
Back to Topics


Tags indicate:
    1. Page elements
    2. Structure
    3. Format
    4. Hypertext links
NOTE:  Tags can be written in all or partial lower or upper case.
	   Only use lower case characters when writing in XHTML format.

?               separates URL and argument string (see Extras)
+               extra argument (see Extras)
<!--..-->       comment line; NOT displayed on screen
		  eg: <!--Guestbook--> = indicates use of a guestbook
<a>             open an HTML anchor (see HTML links; Images)
</a>            close an HTML anchor
action=" "      contains URL of script to execute when input is sent to a 
                  server (see Forms)
<address>       open address field (use for creator & copyright info --
                  see Extras)
</address>      close address field
<align=" ">     open alignment (see Applets; Extras; Images; Marquee; Table)
</align>        close alignment
alignment       align blocks of text (default=left)
		  eg:  <text alignment>
alink=" "       Active Link; default=red (see Color Tags)
alt=" "         alternative to image (see HTML Links; Images/Image Tags)
<applet>        open applet (see Applets)
</applet>       close applet
<area>          define coordinates in a clickable image map (see Images)
author=" "      State author's name of a document/webpage (see Extras under <meta>)
<b>             open bold print
</b>            close bold print
background=" "  specify screen image background (see Color Tags; Images)
<base>		define a global target for ALL links of a web page
		  (see HTML Links; Table)
bgcolor=" "	specify screen background (see Color Tags; Images; Marquee; Table)
bgproperties=	use to make an Image Map watermark background (see Images)
<big>		open large font size
</big>		close large font size
<blink>		open text flash/blink
</blink>	close text blink
<blockquote>	open (insert) block of quotation
		  eg:  <blockquote>I Wrote this text.<BR>
		       Hope it helps you.</blockquote>
</blockquote>	close insertion of a quotation
<body>		open HTML body
</body>		close HTML body
border=" "	border pixels by number (eg:  border="3")
		border="0"  equals "hide borders" (see Images; Table)
bordercolor=    color of border in a table cell (see Table)
<br>		line break (see Extras; Table)
<br />		XHTML method to write a line break
<caption>	open title for a table (see Table)
</caption>	close table title
cellpadding=	space between cells (see Table)
cellspacing=	space between cell edges & content (see Table)
<center>	open center text or graphic
</center>	close center text or graphic
<checked>	activate input element by default (see Forms)
<cite>		open book title, author & insert quote (in italics)
</cite>		close citation of titles and quotes
class=" "	use in <div>
		  eg:  <div class="main">
clear=" "	end line wrap (see Images)
code=" "	name of applet URL (see Applets)
<code>		open display program code (eg:  forms!"orders".Visible)
</code>		close display program code
color=" "	specify font color (see Color Tags; Table)
		  eg:  <font color="green">
		       </font color="green">  close font color
		NOTE: Best method is to use color code number.
		  eg:  <font color="#009900"
cols=" "	split screen in vertical frames (see Frameset; Forms)
colspan=" "	cell horizontal span (see Table)
content=" "	list individual keyword terms (see Extras under <meta>)
coors=" "	coordinates for image map (see Images)
		  eg:  <area shape="rect" coors="x1,y1,x2,y2,...,xn,yn"
<dd>		open glossary definition (used with DIR list - See List)
</dd>		close glossary definition (not needed, but OK to use)
<dfn>		open (definition) highlight text in a color-bordered box
</dfn>		close highlight text
<dtr>		open directory list (horizontal list - See List)
</dir>		close directory list
direction=" "	text direction in a Marquee (see Marquee)
<div>		open (Division) block of elements on a web page
		  (align= will align the entire block)
</div>		close block of elements on a web page
<dl>		open defined list (definition - See List)
</dl>		close defined list
<dt>		open definition term (used with DIR list - See List))
</dt>		close definition term (not needed, but OK to use)
<em>		open emphasis (usually in italics)
</em>		close emphasis
<embed>		embed an object in a web page (media file) NO closing tag
		Add:  1. src=" " indicate URL or file name to embed
		         eg:  <embed src="Tapes.mpg">
		      2. width="#" of embedded object
		      3. height="#" of embedded object
face=" "	change font face
		  eg:  <font face="Brush Script MT, Times New Roman">
<font>		adjust text font size (use with FACE and SIZE); default=3
		size="#" (1-7 available) use + or - to change size
		  eg:  <font size="+2">
</font>		close font size
<form>		open a fill-out form; form CANNOT be nested (see Forms)
</form>		close form
<frame>		open frame; no closing tag (see Frameset)
<frameset>	open frameset (see Frameset)
</frameset>	close frameset
<h1>		open largest font size (font color already set for TEXT)
		  sizes:  <h1> through <h5>
		  alternate method  eg: <font color="#0000ff" size="5">
</h1>		close largest font size
<head>		open header information
</head>		close header information
height=" "	(see Applets; Images/Image Tags; Marquee; Table)
<hr>		Horizontal Rule; add visable line (see Extras)
<hr />		XHTML method to close a Horizontal Rule
href=" "	Hyperlink Reference (see HTML Links; Images/Image Map)
hspace=" "	horizontal space (see Applets; Images/Image Tags; Marquee)
<html>		open HTML document (ALWAYS the first entry)
</html>		close HTML document (ALWAYS the last entry)
<i>		open italics
</i>		close italics
<img>		insert image (no closing tag)
<input>		specify simple input button (see Forms)
ismap		reference to an image map file (see Images/Image Map)
<kbd>		open keyboard entry
</kbd>		close keyboard entry
leftmargin=	use in <body>
<li>		use with EACH item in a given list (no </li> needed - See List)
</li>		XHTML method to close <li>
<link>		(see Style Sheet)
link=" "	default=blue (see Color Tags)
loop=" "	replay Marquee (see Marquee)
lowsrc=" "	low resolution image (see Images/Image Tags)
<map>		open image map in an HTML document (see Images)
</map>		close image map
marginheight=	use in <body>
marginwidth=	use in <body>
<marquee>	open scrolling text (see Marquee)
</marquee>	close scrolling text
<menu>		open menu list (vertical list - See List)
</menu>		close menu list
<meta>		open keyword search (see Extras under <meta>)
		No closing tag; use in <head> section
method=" "	the way data is sent from browser to server (see Forms)
		   1. <form method="get">  = append data as arguments
		   2. <form method="post"> = send data as a separate stream
name=" "	1. name of an image map (see Images/Image Map)
		   eg:  <map name="Colombia">
		2. parameter name (see Applets; Frameset)
		3. name of an input data variable (see Forms)
		4. keyword option (see under <meta>)
<nobr>		open no break (use with IMAGE gif files)
</nobr>		close no break
<noembed>	use as alternative to embed an object
</noembed>	close noembed
<noframes>	ignore info between <frameset> and <frame> tags (see Frameset)
nohref		no HTML reference (see Images/Image Map)
noresize	lock frame borders (see Frameset)
noshade=" "	plain black line (size in pixels; see Extras)
nowrap		turn off word wrap option in <td> or <th> (see Table)
onchange=" "	use in <form> (see Forms)
onload=" "	load an (animated) IMG in BODY background
onmouseout=" "	end onMouseOver (see HTML Links)
onmouseover=" "	begin show image when cursor is moved on an anchor line
		  (see HTML Links)
<ol>		open ordered list (numbers - See List)
</ol>		end ordered list
<option>	MUST use with <select> in a form Forms
<p>		open paragraph (ALWAYS left-justified)
</p>		close paragraph
<param>		open Param (no closing tag; see Applets)
<pre>		open preformatted text (NO changes to ASCII file)
</pre>		close preformatted text
rowrap=" "	info in cell wraps to next line (see Table)
rows=" "	split screen in horizontal frames (see Frameset; Forms)
rowspan=" "	cell vertical span (see Table)
<samp>		open sample text
</samp>		close sample text
scrollamount=	number in pixels (see Marquee)
scrolldelay=	delay in milliseconds (see Marquee)
scrolling=	place scrollbar in frame (see Frameset)
<select>	open selection list in a form (see Forms)
</select>	close selection list
shape=" "	type of shape for clickable map area (see Images/Image Map)
		  types:  circle; default (point); poly; rect
		  eg:  shape="circle"
size=" "	thickness in pixels (default=2  see Extras; Forms)
		  font size 1-7; eg:  <font size="3">
<small>		open small font size
</small>	close small font size
<spacer>	adds line in a table (see Table)
<span>		apply style to desired portion of document (see Style Sheet)
</span>		close span
src=" "		reference to anchor file (see Frameset; HTML Links
		  Images/Image Map)
<strike>	open strike through
</strike>	close strike through
<strong>	open strong emphasis (bold print)
</strong>	close strong emphasis
<style>		open style element (see Style Sheet)
</style>	close style element
<sub>		open subscript (1/2 line below text)
</sub>		close subscript
<sup>		open superscript (1/2 line above text)
</sup>		close superscript
<table>		define a table in HTML document (see Table)
</table>	close table
target=" "	target to view in window link (see Table; HTML Links)
<td>		open/insert table data (default Align Left & Center Vertical; 
		  see Table)
</td>		close table data
text=" "	default=black (see Color Tags)
		  eg:  <text="#009900">
<textarea>	open multiline area in a form (see Forms)
</textarea>	close multiline area
<th>		open table header (default Bold & Centered; see Table)
</th>		close table header
<title>		open title
</title>	close title
topmargin=" "	use in <body>
<tr>		open table row (see Table)
</tr>		close table row
type=" "	data entry element; 5 types (see Forms)
<u>		open underline
</u>		close underline
<ul>		open unordered list (bullets - See List)
</ul>		close unordered list
usemap="#"	activate client-side map (see Images/Image Map)
		  eg:  <img src="map.gif" usemap="#mapname">
<var>		open variable text
</var>		close variable text
valign=" "	vertical alignment (see Table)
value=" "	1. specify value of parameter name (see Applets)
		2. specify default value as stored in a variable (see Forms)
vlink=" "	Visited Link; default=purple (see Color Tags)
vspace=" "	Vertical Space (see Applets; Images/Image Tags; Marquee)
width=" "	see Applets; Extras; Images/Image Tags; Marquee; Table
Back to Topics

APPLETS (see Tags)

Applet		= Mini-program taht runs in another application; CANNOT run
		  directly from an operating system.  Download to create
		  special effects.  Usually created in JAVA script.
Plug-in API	= Set of header files & functions that enable a server to
		  support more functions.
Java Applet Tags:
<param>		used to pass run-time parameters to applet; NO closing tag
		Attributes:  1. name=  parameter name
		             2. value= specify value of parameter's name

Applet Tags:
1. code=	name of applet URL
		(full URL is not necessary if applet file is in the same
		directory as the current HTML document)
2. codebase=	full URL name if applet is NOT in the same directory
		eg:  <applet codebase=""
		     code="HTML.class" width="100" height="100" align="top"></applet>
3. getParameter();   use to interrogate the parameters contained in <param>
                     eg:  document.write(document.title);
4. width=	size in pixels
5. height=	size in pixels
6. align=	at END of tag string
   a. left
   b. right
   c. top
   d. texttop
   e. middle
   f. absmiddle
   g. "center baseline"
   h. bottom
   i. absbottom
      eg: <html>
          <h4>Subject<marquee bgcolor="#FFFF00" height="30" width="125" 
          align=bottom>Text of Message</marquee></h4>
          <applet code="HTML.class" width="100" height="100">
          <param name="My Text" value="Subject">
          <body text="#000080">
          <p><b><font size="5">HTML 3.2 document</b></p>
          Here is the sample applet:
          <applet code="HelloWorld.class" width="150" height="25">
          <param name="Color" value="#ff0000">
Back to Topics

CGI SCRIPT (see Tags)

Example of linking CGI script to web:
    echo Content-type text/plain

    Now write the following HTML file:
      <title>Link CGI Script to Web</title>
      <h1>Linking CGI Script to the Web</h1>
      <a href="">

Example of Output Header to load on HTML document:
    echo Location:

    Now write the following HTML file:
      <title>Link Style to a Document</title>
      <style type="text/css">
      span { color : }
Back to Topics

COLOR TAGS (see Tags)

For the <body>, use <font color="#">
    1. <text> controls color of normal text in body and table
       eg:  <text="red">
       eg:  <font color="#ff0000" size="5">  (use when changing a
            known text color to a different color; also
            includes changing font size in the example)
    2. link="color"   (default=blue)
    3. vlink="color"  (default=purple) Visited Link
    4. alink="color"  (default=red) Active Link; link when mouse
                       button is pressed & not yet released
bgcolor=" "	background color
<body bgcolor="#C0C0C0">  background is silver
    OR eg:  <body bgcolor="silver">
<body background="sample.gif">  use image as screen background
<body link="blue">  hyperlink name in document is blue in color
    eg:  <body bgcolor="lightgoldenrodyellow" text="dodgerblue"
         link="orange" vlink="brown" alink="purple">

NOTE: For a full color list, see Models: 1. HSB = Hue, Saturation & Brightness Hue = Actual shade of color; numbers 1 - 360 red = 0 & 360 yellow = 120 blue = 240 Saturation = Color intensity; measure in % 0% = no color 100% = full color Brightness = Light & dark; measure in # 0% = white 100% = black 2. RGB = Red, Green & Blue Color denoted in 3 numbers (0 - 255); 24-bit color 000 = black 255 255 255 = white
Back to Topics

EXTRAS (see Tags)

    Embedded Objects:
    1. ActiveX Controls	(reusable files)
    2. ActiveX Documents (word processor or spreadsheet documents)

Advantage over Plug-in: (supports multimedia)
    1. Execute without support of external software
    2. Build enterprise-wide applications

    Use to --
    1. Insert details about web creator; sid or how to
       communicate with him.
    2. Insert copyright notice or other warnings.
       eg:  <html>
            This Is It Ads</address>
Argument String:
    Single argument: (use ? )

    Extra argument: ( use ? and + )
<hr>	Horizontal Rule:
<hr />	XHTML method to close a Horizontal Rule
    1. size=" "    (thickness in pixels; default=3)
    2. width=" "   (in % or pixels; default=100%)
    3. align=" "   (default=center)
    4. noshade	   (to draw plain black line)
       eg: <html>
           <title>Rule Lines</title>
           <hr size="4" width="50%" align="left" noshade>
<meta>     open keyword search; no closing tag
    NOTE:  Use between <head> tags
    1. author=" "    name of person who wrote a document/webpage
    2. content=" "   description of keyword term listed between " "
    3. name=" "	     keyword option
Special Characters:
    Write the following to display in HTML document:
    "  as  &quot;
    &  as  &amp;
    ©  as  &copy;  (copyright symbol)
       as  &#;     (decimal entry; foreign language characters)
           eg:  '  as  &#39;
    blank space  as  &nbsp;
    right arrow  as  &GT;
    left arrow   as  &LT;
Back to Topics

FORMS (see Tags)

Generate a form:
		1. Create HTML document form
		2. Write CGI script to rocess the form's input
		   NOTE:  Form cannot be nested

action=" "	contains URL of script to execute when input is sent to
		a server
<checked>	activates an input element by default [used with Checkbox]
<form>		Specify a fill-out form
</form>		end FORM tag
<input>		specify simple input button in a form
	Attributes: 1. Password
	            2. Checkbox
	            3. Radio button
	            4. Submit
	            5. Reset button
	            6. File
	            7. Hidden
	            8. Image
method=" "	the way data is sent from browser to server
		1. <form method="get">  = append data as arguments
		2. <form method="post"> = send data as a separate stream
name=" "	specify name of a variable which holds input data
type=" "	data entry element; 5 types are:
		1. TEXT (create a single line field)
		2. CHECKBOX (create square button)
		   eg: <inout type="checkbox" name="vitamin" checked>
		       Essential Vitamins
		3. RADIO (create small circular button)
		4. SUBMIT (create "OK" button & send data)
		5. RESET (return form to original state)
		   eg: <inout type="reset" value="clear form">
value=" "	specify default value stored in a variable

    <title>Company Form</title>
    <p>Information in detail.</p>
    <p>Use <strong>Submit</strong> to submit results.</p>
    <form method="post" action="">
    <strong>Name: </strong>
    <input type="Text" name="theName" value="First Name">First Name</p>
    <p><strong>Sex: </strong>
    <input type="radio" name="theSex" value="male">Male</p>
    <input type="checkbox" name="checkbox" value="checkbox">Check</p>
    <p><input type="reset" value="Cancel"></p>

Example of Guestbook file:
    <p>Post information using this form.</p>
    <p>Comments list started on <!--STARTDATE--> Apr 4 1995
    Last post on <!--LASTDATE--> day and time</p>
Example of Multiline Area:
    <p>This is a text area.</p>
    <form method="post" action="">
    <textarea name="Views" rows="5" cols="60">Views


<option>	open option [MUST be used with <SELECT> and have at least
		one option]
<select>	open selection
</select>	close selection
size=" "	use with a number
		eg:  size="1"	[This is a popup list]

Example of a Selection List:
    <form method="post" action="">
    <select name="Browser List">
    <option>Internet Explorer
Back to Topics

FRAMESET (see Tags)
Framesets/Frames currently are not popular on the internet. It is 
best to avoid using them. They also are more difficult to make and

<base>		tag to use when ALL HTML documents point to the same
		frame; use in <head> tag
<frame>		frame definition document defines a page with multiple
		frames; associates HTML document with a frame; NO 
		closing tag
		eg:  <frame src="name.html">
<frameset>	open frameset
</frameset>	close frameset

NOTE:  Use extension .htm NOT .html when working in DOS.

Frame Types:
A. Static (info is constant; only 1 HTML displayed in frame)
   eg:  contains table & links to adjacent frame
        items:  control bar; copyright notice; title graphics
B. Dynamic (multi-HTML documents in frame)

To make a frame, MUST use the following:
1. Frameset document; NO <body> tag
   NOTE:  Replace .html with .htm when using DOS
2. Frameset tag (set of frames defined by FRAMESET tags)
   <frameset> and </frameset>
   a. cols=" "	prompt browser to split screen in vertical
      frames; width size in pixels or in %
   b. rows=" "	prompt browser to split screen in horizontal
      frames; height size in pixels or in %
      * = use maximum space in a cell
3. Frame tag (associates HTML document with each frame in a
   frameset; use <frame>) NO closing tag
   a. scrolling=" "   place scrollbar in frame
   b. src=" "	reference to a source file
   c. noresize	lock frame borders; connot move frame

NOTE:   <noframes> allow browsers to ignore info between
        <frameset> and <frame> tags
eg:     <html>
	<frameset cols="*,*">
	<h4><a href="intro.htm" target="right">Outcomes</h4></a>
	<hr width="80%">
	<frame src="learn.htm" scrolling="no" noresize>
	<frame src="intro.htm" scrolling="yes">

	<title>Link File to Same Frame</title>
	<h3>List of Files</h3>
	<a href="List.html" target="Bottom_Right">

	Place one frameset within another frameset.

Example 1 of a NESTED Frameset:
	<title>Complex Frames</title>
	<frameset rows="*,80">
	<frameset cols="30%,*">
	<frame src="about:blank">
	<frame src="about:blank">
	<frame src="about:blank">

Example 2 of a NESTED Frameset:
	<title>Complex Frames</title>
	<frameset rows="*,*">
	<frameset cols="*,*">
	<frame src="Myfile.html">
	<frame src="Our.html">
	<frame src="base.html">

Steps to link frame 1 to frame 2:
  1. Name all frames in a frameset
  2. Use target=" " in <a> tag to point a document to a particular frame
  3. Use name=" " to indicate the name of a target
Back to Topics

HTML LINKS (see Tags)

NOTE:  ALWAYS use inside quotes

Absolute Path Name = point to files based on an absolute
	location in a file system

href = Hyperlink Reference

Hyperlink Text = information placed between <a href=> and </a>
  eg:  <a href="">File Name</a>

Intra-document Link:  (within the same document)
  eg:  <a href="#anchorname">same document but different section</a>

Link to a Named Anchor:  (in a different document)
  eg:  <a href="fullURL.html#anchorname">different document</a>

Link to a Web Site:
  eg:  <a href="fullURL.html">Hyperlink Text Name</a>

Local Link = Hyperlink to a second web page on the same computer
  as the working document

Named Anchor = Hidden reference marker to a particular section of
  an HTML file.  (# is used for a Named Anchor)
  eg:  <a name="#Name"> Text to Link</a>
       (Text to Link = the Named Anchor)

Relative Path Name = ALWAYS point to files based on their location
  relative to a current file

Example of link file1.html to file2.html:
	<title>Chapter Details</title>
	<h3>Books in Library</h3>
	<li><a href="file1.html" target="Check_in">
	Programming in HTML</a>
	<li><a href="file2.html" target="No_check">
	Hyper text markup language</a>

Example of Frame link to HTML document in another frame:
	<frameset rows="*,80">
	<frameset cols="30%,*">
	<frame src="file1.html" name="Test1">
	<frame src="file2.html" name="Test2">
	<frame src="endfile.html" name="footer">

Example of link to HTML document using [BASE]:

	<title>Chapter Details</title>
	<base target="Check_in">
	<h3>Books in Library</h3>
	<li><a href="file1.html">HTML Program</a>
	<li><a href="file2.html">Hyper text markup language</a>

Example of showing image when the cursor moves over an HTML anchor:
	<img name="home1" src="../images/off.gif" width="11"
	height=11 border="0">
	<a href="./rd_feeds_setup.html" target="MainWindow"
	   Data Feeds</a>
Back to Topics

IMAGES (see Tags)
NOTE:  Right-click on an image and click on "View Page Source"
       to view the SOURCE.

.bmp	= Bitmap Image.  Simple image created via MS Paint, etc.
.gif	= Graphics Interchange Format image
	  (use with Logo; Icon; Simple image)
.jpg	= Joint Photographic Experts Group
.jpeg	= Joint Photographic Experts Group
.mpeg	= (.mpg) high-quality digital video

Line Wrap = wrap words next to an image
    1. open = type align="left" or align="right"
       eg:  <p><img align="left" src="butfly.gif"></p>
            <h2>Name Used</h2>
            <p>More Information</p>
            <br clear="left">
            <p>More Info</p>
    2. stop = type clear=" " or use <br> on the line
       clear="left" clear="right" or clear="all"

Plain Image = no link to server (default is no border)
              (type border="#" to show a border)
    eg:  <html>
<body> <p>Frame the Image<img src="lion.gif" border="5"> </p></body>
Thumbnail = clickable "hot spot" small image; has border type border="0" to hide border Types: 1. Inline (auto-loaded image); insert using src="URL" eg: <a href="name.html"> <img src="image.gif"></a> 2. External (stored separate from web page; linked to web page) image names ARE case sensitive in UNIX; insert image via <a>...</a> tags eg: <a href="songbird.gif">Song Bird</a>
1. Tiled:  BOTH foreground and background move when scrolled
           eg:  <body background="name.gif">

           Background color of screen (no Image background)
           eg:  <body background="silver">

2. Watermark:  ONLY foreground moves when scrolled
               type bgproperties="fixed" to activate Watermark image
               in <body> tag
               eg:  <body background="name.gif" bgproperties="fixed">

TYPES: 1. Client-Side Create: 1. HTML Code to indicate use of an image map 2. Map File on server (clickable area) 3. Web Page where it points & CGI script to link them 2. Server-Side Implement via image shown by client & program run on server a. image b. map file c. mapping program (clickable area on geometric figure) TAGS: <map> and </map> open/close server-side image map <area> define coordinates in a clickable image map a. shape=" " (Type of image) Types: 1. rect 2. poly 3. circle 4. default 5. point eg: <area shape="rect" coors="210,251 67,47"> <area shape="circle" coors="x,y,radius" href="URL"> b. coordinates eg: coors="x1,y1,x2,y2,...,xn,yn" coors="215,251 52,47" c. href=" " (give URL for hyperlink target) d. nohref e. alt=" " (alternate name) name=" " name of the image map: <body> <h1>A Virtual Aquarium</h1> <p>Please select an option:</p> <img src="fish.gif" usemap="#fishmaps"> <map name="fishmaps"> <area shape="rect" coors="220,250 50,45" href="URL">
NOTE: Use href="nohref" when there is no clickable area to link with a URL. Example of Clickable Image Map: <html> <head> <title>Chemistry Lab</title> </head> <body> <p>Select option:</p> <img src="chem.gif" usemap="#labmap"> <map name="labmap"> <area shape="rect" coors="70,0 0,37" href=" web/HTML/chem.html" target="newfile"> </map> </body> </html> Example of finding a red arrow image & attaching it to a web page: Image in directory -- URL: Add image to web page as follows: eg 1: <img src=""> eg 2: <img src="http://www.siteB/logo.gif"> ismap = tag to reference of an image map file eg: <body> <h1>The Virtual Concert</h1> <p><a href="URL"> <img src="name.gif" ismap>Test Map</a></p> </body>
align=" " position image 1. top (top item in a line) 2. middle (middle of a line) 3. bottom (bottom of a line) 4. texttop (top of tallest text item) 5. absmiddle (middle of line image/text) 6. baseline (image bottom with baseline) 7. absbottom (image bottom with lowest item) <area> Tag to define coordinates of a clickable area 1. alt=" " 2. coords= (shape coordinates in numbers or * ) 3. href= (give URL for target of hyperlink) 4. noref 5. shape=" " (rect; poly; circle; default) alt=" " add text explanation to an image (useful for text only browsers); alternative to picture or text; ONLY works with text you specify, NOT with URL alt=" " to hide an image (leave blank space between quotes) border=" " size in pixels (default=1) border="0" (hide border) height=" " size in pixels hspace=" " horizontal space left/right of an image (in pixels) <img> open image </img> close image ismap reference to an image map file lowsrc=" " preview image (low resolution image instead of full image) eg: preview "bigbike.gif" as "tinybike.gif" <img src="bigbike.gif" align=left lowsrc="tinybike.gif"> src=" " indicate file name or URL to include (ALWAYS use quotes) vspace=" " vertical space above/below an image (in pixels) width=" " size in pixels eg: <img src="disk.bmp" height="200" width="300"> Example of a caption under an image: <html> <head> <title>Field</title> <p><img align="left" src="flowers.gif"></p> <p>Flowers in Yellowstone Park</p> <br clear="left"> <p>Fowers in a Mountain Field.</p> Example of HSPACE and VSPACE: <html> <head> <title>Flower</title> <p><img src="rose.gif" vspace="30" hspace="30" align="left"> Text of an article</p>
align= start Line Wrap next to an image (left or right) eg: <img align="left"> <br> stop line wrap; stops wrap immediately after <br> <br /> XHTML method to stop a line wrap clear= stop line wrap; breaks line & begins next line of text at the end of an image Attributes: 1. clear="left" left aligned margin to image 2. clear="right" right aligned margin to image 3. clear="all" left & right aligned margin to image LINK to IMAGE 1. Text Only = alternative to an image; use description in brackets to replace an image eg: <body> <p><a href="index.html"> <img src="uparrow.gif" align="bottom" alt="[up]"> </a></p> </body> 2. HTML code for link on full graphic version of SAME web page: eg: <body> <p>Name<a href="Text Version.html">Text Name</a> version of this page is available</p> </body> HTML code for link on full graphic version to DIFFERENT web page: eg: <body> <p>Name</p> <a href="index.html"> <img src="UpArrow.gif"></a> </body> HTML code for link on BOTH image and text: eg: <body> <p><a href="left.html"> <img src="LeftAarrow.gif"> Information about the subject</a> </p></body> 3. Hide Text Only = method to hide an image; retain link type alt=" " (be sure to include the space) eg: <body> <p><a href="index.html" img src="arrow1.gif" align="bottom" alt=" "> Text of item description</a></p> </body> 4. Thumbnail Link eg: <html> <head>
<title>Basketball</title> </head>
<body> <h2>Basketball</h2> <a href="ballbig.gif"> <img src="ballsmall.gif"></a> <p>Information follows</p> </body>
Back to Topics


Java Application = stand alone program (using Java interpreter)
Java Applet      = program attached to HTML page (executed on local
JavaScript       = program language that enables a browser to process
                   web-based applications; can process client-side scripts

Java software is on the internet at

NOTE:  use { }

JavaScript structure:
    1. Location
	   a. Protocol     Name: eg: http:
	   b. Domain Name  Website eg: //
	   c. Path         Directory path eg: /mydirectory
	   d. Port         Defines location of info on server eg:  :80    
	2. History - record of sites visited by web browser
	3. Document
	   a. Forms
	   b. Links
	   c. Anchors
	   d. Function Types (text bos, radio button, etc.)
	4. Form - Information about form elements on a web page form
              (URL; to connect/submit form to client)

	1. document.bgcolor (background color)
	2. document.fgcolor (foreground color)
	3. document.lastmodified
	4. document.title

Example 1:
    <title>Java Script</title>
    <script language="JavaScript">
    <!-- my first JavaScript
    // Scripting done -->

Example 2:
    <title>Test Script</title>
    <script language="JavaScript">
    <!-- my first JavaScript
    // Scripting done -->

Example of JavaScript:
    <title>Test Script</title>
    <script language="JavaScript">
    <!-- Use start of document tags to hide JavaScript code
    // Your JavaScript code goes here.
    // Close the comment tag immediately before the </script> tag -->
    <body>Your web document goes here.

JavaScript sample for date/time updating of a file:
    <center><font color="red">
    <script language="JavaScript">
    <!-- hide script from old browsers
    document.write("<address>This page was last updated: " +
    document.lastModified + "</address>");
    // end of hiding -->

NOTE:  Use single ' to replace HTML " when using HTML code within a
       <!-- hide JavaScript
       document.write("<a href='http://www.mydir/home/index.htm'>");
       // end of hiding -->

Embedded Object = small program in Java applet (aka Live Objects) To Embed: 1. Create media file 2. Use <embed> tag; no closing tag <embed> Attributes: 1. src=" " URL path to media file 2. width=" " in pixels 3. height=" " in pixels eg: <html> <head> <title>Prints</title> </head> <body> <h1>Prints</h1> <h2>Tracking the Internet</h2> <embed src="myobject.gif" width="120" height="180"> <noembed> <img src="paw.gif" width="640" height="30" alt="***"> </noembed> <hr> </body> </html>
Back to Topics

LISTS (see Tags)

Nesting unordered (bullet) within ordered (number) list:
        <li>List 1
             <li>Name 1
             <li>Name 2
        <li>List 2
             <li>Name 1
             <li>Name 2

Example of all HTML documents pointing to the same frame:
    <title>Chapter Details</title>
    <base target="Look">
    <h3>Books in Library</h3>
        <li><a href="file1.html">Program in HTML</a>
        <li><a href="file2.html">Text Language</a>
Back to Topics

MARQUEE (see Tags)

<marquee> </marquee>     Scrolling text across the screen

Behavior Attributes:
    1.  Behavior:        Style:
        a. "scroll"      <marquee> default value
        b. "slide"       right to left, then stop
        c. "alternate"   back and forth
    2.  direction=" "
        a. (default)     move right to left
        b. "left"        move left to right
    3.  loop=" "
        a. 3             eg: loop="3" (repeat action 3 times)
        b. "indefinite"  continuous replay
    4.  scrollamount=    # of pixels; move when redrawn
        eg: <marquee scrollamount="7">Text of Message</marquee>
    5.  scrolldelay=     redraw image; time delay in milliseconds
        eg: <marquee scrolldelay="50">Text of Message</marquee>
    6.  bgcolor=" "      background color
        eg: <marquee bgcolor="#FFFF00">Text of Message</marquee>
            (color yellow = #FFFF00)  OR
            <marquee bgcolor="yellow">Text of Message</marquee>
    7.  height=" "       screen % taken by image
                         eg: height="50%"
    8.  width=" "        screen image by pixel numbers
                         eg: width="70"
    9.  hspace=" "       image horizontal size in pixels
                         eg: hspace="50%"
    10. vspace=" "       image vertical size in pixels
                         eg: vspace="25"
    11. align=" "
        a. top
        b. middle
        c. bottom
        eg: <marquee bgcolor="yellow" width="125" align="bottom">
            Scrolling Text</marquee>

Marquee in Header Tag:
    eg: <html>
<head><title>Colors</title></head> <h1><marquee="slide" direction="left" loop="3" scrollamount="5" scrolldelay="50" bgcolor="yellow" height="25%" width="125" align="bottom">Text of Message</marquee></h1> <body>Text</body> </html>
Embed a Marquee in an HTML tag to work an effect: eg: <h1><strike><marquee>Scrolling Text</marquee></strike></h1>
Back to Topics


Archive to "quick find" small sound/video files with inline image and
an icon.

To Create:
    1. Specify preliminary text and image
    2. Make thumbnail image
    3. Insert <img> link in an actual position of the archive file
    4. Link thumbnail image to an actual image
Back to Topics

STYLE SHEET (see Tags)

Contains information on:
    1. Font
    2. Size
    3. Color

    <span>       apply style information to desired portion of document
    </span>      close span
    title=" "    optional; needed when two or more style elements are
                   in a document
                 NOTE:  p = paragraph; use { }
    type=" "     text/css (default) is most common

Example of data entry form:
<title>Comments</title> </head> <body> <h1>Comments</h1> <p>This is a data entry form example</p> <ht> <form method="post" action=""> <select name="font"><option>Arial<option>Courier</select>
Example of font color and style declaration: NOTE: Spaces in the "span" line are not necessary. <html> <head>
<title>Link Style to Document</title> <style type="text/css"> span { color : red } </style> </head> <body> <span>Hello</span> World
Example of Font Style change: <html> <head>
<title>Link Style to Document</title> <style type="text/css"> span { font-style : small-caps } </style> </head> <body> <span>small</span> caps
Example of getParameter() import java.awt.Graphics; public class HelloWorld extends java.applet. applet { String name; public void init() {"name"); } public void paint(Graphics g) { g.drawString(, 5, 50); } SYNTAX is: <param name="ParameterName" value="ParameterValue">
Back to Topics

TABLE (see Tags)

Row and column format; column headings are in first row.

    1. Caption   = Name of table
    2. Heading   = Label row and column
    3. Data      = Values in table
    4. Cells     = Individual squares (cell can contain both
                     table data and heading)

    1. Lists
    2. Preformatted test = <pre>text here</pre>
    3. Link externally to table (to another HTML file)
    4. Use image; eg: <img src="name.gif">

<base>         Tag to define a global target for all links of a web page
bordercolor=   color of border in a table cell
<br>           add break in cell text
<caption>      open title for a table
</caption>     close table title
<spacer>       add line in a table; may use the following attributes:
                 1. size="#"
                 2. type=" " (horizontal or vertical)
<table>        open table (defines macro structure for a table)
</table>       close table
<td>           open/insert table data cell information
                 (default = align left & center vertical)
</td>          close table data cell
<th>           open table heading (default = bold & centered)
</th>          close table heading
<tr>           open table row
</tr>          close table row

    1.  align=" "      horizontal alignment (left; center; right)
                         default = center vertical & left margin
    2.  border=" "     size in pixels (default=1)
                         border="0" = hide border
    3.  cellpadding=   space between cell edges & content (default=1)
                         cellpadding="0" = cell edges will touch
    4.  cellspacing=   space between cell edges & content (default=2)
    5.  colspan=" "    force cell to span horizontally left to right
                         across number of columns specified (eg: colspan="3")
    6.  height=" "     size in pixels
    7.  nowrap         prohibits line wrap in <td> or <th>
    8.  rowrap=" "     information within a row wraps to the next line
    9.  rowspan=" "    force cell to span vertically down the number of
                         rows specified (eg: rowspan="3")
    10. target=" "     target to view in a window link
    11. valign=" "     vertical alignment (top; center; bottom)
                         default = center vertical & left margin
    12. width=" "      size in pixels; or size in %
                         eg: <table border="2" width="80%">  = table width
                             <td width="50%"> = cell width

FOREGROUND & BACKGROUND DEFAULT COLORS: 1. Standard: a. Foreground = black b. Background = white c. Text = black 2. Examples in Table tags: a. <table color="yellow"> b. <table bgcolor="red"> c. <font color="green"> 3. Examples in Row: a. <tr color="yellow"> b. <tr bgcolor="red"> c. <font color="green"> 4. Examples in Cell (Header): a. <th color="yellow"> b. <th bgcolor="red"> c. <font color="green"> 5. Examples in Cell (Data): a. <td color="yellow"> b. <td bgcolor="red"> c. <font color="green"> Example: <html> <head> <title>Colors</title> </head> <body> <table border="3" bgcolor="lightyellow"> <tr text="white" bgcolor="black"> <th><br></th> <th>January</th> <th>February</th> </tr> <tr> <th>Color Cell</th> <td bgcolor="yellow">12</td> </tr> </table> </body> </html>
1. Create cell spanning 3 rows and 2 columns: <html> <head> <title>Rows and Columns</title> </head> <body> <table boder="0" width="100%"> <caption>Multiple rows/columns</caption> <tr align="center"> <th rowspan="3" colspan="2">3R2C</th> </tr> </table> </body> 2. Cell Padding and Spacing: <html> <head> <title>Cell Space</title> </head> <body> <caption>Test Cell</caption> <table cellspacing="8" cellpadding="2"> </table> </body>
3. Varying Cell Alignment: <html> <head> <title>Cell Alignment</title> </head> <body> <table border="3"> <caption>Alignment</caption> <th>Data1</th> <th>Data2</th> <th>Data3</th> <tr> <td align="left" valign="top">1</td> <td align="center">2</td> <td align="right">3</td> </tr> </table> </body>
4. Varying Cell Size: <html> <head> <title>Rows and Columns</title> </head> <body> <table border width="200"> <caption>Cell Span</caption> <tr align=center> <th rowspan="2" solspan="2">2 x 2 cell</th> </tr> </table> </body>
5. Nested frame that defines two rows of equal size; first row contains two columns of equal size: <html> <head> <title>Reference</title> <frameset rows="*,*"> <frameset cols="*,*">
<frame src="row1.html"> <frame src="samerow.html"> </frameset> <frame src="row2.html">
6. Table with two Images and Title: <table border="0" width="100%"> <tr> <td><img src="image1.gif" alt="name1" align="left" height="100" width="50%"></td> <td><h1><center><font color="blue"><height="100" width="33%">Title </font></center></h1></td> <td><img src="image2.gif" alt="name2" align="right" height="100" width="50%"></td> </tr> </table>
Link to view multiple frames on a browser. eg: <a target="window_name"> <base> Tag to define a global target for all links of a web page. (See FRAMESET section for details on linking windows.) Example: <html> <head> <title>Linked Window</title> </head> <body> <h1>Linked Window</h1> <p> <a href="window.html" target="testwindow">Open Window</a>
Back to Topics


  (Many of these commands are a/w UNIX computer language.)
    1. Be sure to open your own subdirectory which holds html files.
         eg: /home/yourserver/yoursid/homepage/index.html
    2. Type:  ftp servername <CR>
    3. Hit <CR> when sid prompt appears.
    4. Enter servername password <CR>
    5. Type:  cd htdocs <CR>
              NOTE:  Type pwd <CR>  (to view your current location)
    6. Type:  put filename.html <CR>
              eg: put index.html <CR>  (This updates a web home page)
    7. Type:  ls -l <CR>  (to view files & permissions)
              NOTE:  These normally are 664
    8. Type:  bye <CR>  (to exit ftp)
              OR hit CTL-D keys to exit

Login Example to HomeAccount:
    1. Type:  /www/HomeAccount/ <CR>
    2. Type:  cd htdocs/; ls <CR>  (ls lists files in the directory)
    3. Type:  vi filename.html <CR>   (to enter "vi" edit mode)

Save gif Image Files to Virtual Server:
    NOTE:  Ensure that image file is NOT "rastor" type.
    1. Type:  /www/Images/ <CR>
    2. Type:  cp /home/yoursid/filename.gif . <CR>
              eg: cp /home/drhurst/orgchart.gif . <CR>

Delete a File:
    1. Type:  rm filename.html <CR>   (HTML file)
              rm filename.cgi <CR>    (cgi-bin file)
              rm <CR>     (perl file)

Copy HTML File:
    1. Type:  cp filename.html newfile.html <CR>

NOTE: DO NOT MAKE ANY CHANGES TO ANY EXECUTABLE PORTIONS OF CGI-BIN FILES! 1. Open a shell window & enable scrolling (right-click mouse button to view options). 2. Type: rlogin <CR> 3. Enter any necessary password <CR> 4. Type: csh (CR> 5. Type: cd htdocs <CR> OR cd cgi-bin <CR> 6. Type: ls <CR> (to view files) OR ls -l <CR> (to view files & permissions) 7. Type: vi filename.html <CR> OR vi filename.cgi <CR> OR vi <CR> (Depends on type of file you wish to edit.) NOTE: DO NOT save the file until you finish or are sure that you have not made an error! 8. While in "vi" edit mode, make desired changes and save by typing one of the following: :w <CR> = save and stay in vi mode :w! <CR> = force a save :wq <CR> = save and exit vi mode :q <CR> = quit vi mode :q! <CR> = quit vi mode and do not save any changes Copy CGI-Bin File: 1. Type: cp filename.cgi newfile.ext <CR> NOTE: This also is used for JAVA, PERL and .gif files Transfer Files: 1. Gif file: (to image directory) a. cd to desired subdirectory to transfer the file b. Type: bin <CR> (to enter binary mode) c. Type: get filename.gif <CR> (file is transferred) If unsuccessful, type: put filename.gif <CR> d. Type: bye <CR> (to exit bin) 2. Multi File Transfer: a. Enter ftp mode eg: ftp servername <CR> NOTE: ftp automatically comes up in ASCII mode. Type: ascii <CR> (to enter ASCII mode from bin mode) b. Type: mget *.html <CR> c. Select Y or N according to each file you wish to transfer d. For GIF Files: - While in ftp mode, type: bin <CR> - Type: mget *.gif <CR> View HTML File from the Web: 1. Open web program (Netscape or other) 2. Click on "view" (top of screen) 3. Click on "Page Source" (HTML file will appear in a window) NOTE: You can find "http" path by viewing what other people have used in their files. Other: 1. Type: ftp <CR> (from server to home directory) 2. "vi" commands: a = append (insert) cw = change word dd = delete line #dd = delete number of lines entered (eg: 5dd) shift-d = remove all characters to right of cursor 3. CGI Commands: a. To show system date, type: echo content-type text/plain <CR> echo <CR> /bin/date <CR> b. To show location, type: Location: <CR>

Back to Topics

  Back to Web Page Standards

© Page Publisher: Duane R. Hurst