© Page Publisher: Duane R. Hurst
(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: //www.FreeEnglishSite.com
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
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"
href="URL">
<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
onload="JavaFile"
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
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:
<applet>
</applet>
<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="http://NETG.com/Appletsamples/"
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>
<head>
<title>Test</title>
</head>
<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">
</applet>
<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">
</applet>
</body>
</html>
Example of linking CGI script to web:
echo Content-type text/plain
echo
/bin/who
Now write the following HTML file:
<html>
<head>
<title>Link CGI Script to Web</title>
</head>
<h1>Linking CGI Script to the Web</h1>
<a href="http://.homeserver.com/cgi-bin.checklog?NAME">
Example of Output Header to load on HTML document:
echo Location: http://www.myserver.com/docs/mypage.html
echo
Now write the following HTML file:
<html>
<head>
<title>Link Style to a Document</title>
<style type="text/css">
span { color : }
</style>
</head>
</body>
<span>Hello</span>World
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">
COLOR IMAGES
NOTE: For a full color list, see http://www.lne.com/rgb.html
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
ActiveX
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
<address>
Use to --
1. Insert details about web creator; sid or how to
communicate with him.
2. Insert copyright notice or other warnings.
eg: <html>
<head>
<title>Addresses</title>
</head>
<body>
<hr>
<address>ThisIsIt@Ads.com
This Is It Ads</address>
-----------------------------------------
Argument String:
Single argument: (use ? )
href="http://www.myserver.com/cgi-bin/myscript?arg1"
Extra argument: ( use ? and + )
href="http://www.myserver.com/cgi-bin/myscript?arg1+arg2"
-----------------------------------------
<hr> Horizontal Rule:
<hr /> XHTML method to close a Horizontal Rule
Attributes:
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>
<head>
<title>Rule Lines</title>
</head>
<body>
<p>
<hr size="4" width="50%" align="left" noshade>
-----------------------------------------
<meta> open keyword search; no closing tag
NOTE: Use between <head> tags
Attributes:
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 "
& as &
© as © (copyright symbol)
as &#; (decimal entry; foreign language characters)
eg: ' as '
blank space as
right arrow as >
left arrow as <
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
Example:
<html>
<head>
<title>Company Form</title>
</head>
<body>
<h1>Name</h1>
<p>Information in detail.</p>
<p>Use <strong>Submit</strong> to submit results.</p>
<hr>
<form method="post" action="http://www.mcp.com/cgi-bin/post-query">
</p>
<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>
<p>
<input type="checkbox" name="checkbox" value="checkbox">Check</p>
<p><input type="reset" value="Cancel"></p>
</body>
</html>
Example of Guestbook file:
<html>
<head>
<title>Comments</title>
</head>
<body>
<!--GUESTBOOK-->
<h1>Comments</h1>
<p>Post information using this form.</p>
<p>Comments list started on <!--STARTDATE--> Apr 4 1995
Last post on <!--LASTDATE--> day and time</p>
<hr>
<b>Name</b>
</body>
</html>
Example of Multiline Area:
<html>
<head>
<title>Comment</title>
</head>
<body>
<h1>Comments</h1>
<p>This is a text area.</p>
<hr>
<form method="post" action="http://www.myhome.com/cgi-bin/processor">
Views:
<br>
<textarea name="Views" rows="5" cols="60">Views
</textarea>
</body>
</html>
-----------------------------------------
SELECTION LIST
<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:
<html>
<head>
<title>Comments</title>
</head>
<body>
<h1>Comments</h1>
<p>Info</p>
<hr>
<form method="post" action="http://www.myhome.com/cgi-bin/processor">
<select name="Browser List">
<option>Netscape
<option>Internet Explorer
</select>
</body>
</html>
SPECIAL NOTE:
Framesets/Frames currently are not popular on the internet. It is
best to avoid using them. They also are more difficult to make and
maintain.
<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>
<head>
<title>Name</title>
</head>
<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">
</frameset>
</html>
Link FILE TO SAME FRAME:
<html>
<head>
<title>Link File to Same Frame</title>
<h3>List of Files</h3>
<ul>
<li>
<a href="List.html" target="Bottom_Right">
NESTED FRAMESET:
Place one frameset within another frameset.
Example 1 of a NESTED Frameset:
<html>
<head>
<title>Complex Frames</title>
</head>
<frameset rows="*,80">
<frameset cols="30%,*">
<frame src="about:blank">
<frame src="about:blank">
</frameset>
<frame src="about:blank">
</frameset>
</html>
Example 2 of a NESTED Frameset:
<html>
<head>
<title>Complex Frames</title>
</head>
<frameset rows="*,*">
<frameset cols="*,*">
<frame src="Myfile.html">
<frame src="Our.html">
</frameset>
<frame src="base.html">
</frameset>
</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
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="http://www.myorg.com/file.html">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:
<html>
<head>
<title>Chapter Details</title>
</head>
<h3>Books in Library</h3>
<ul>
<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>
</ul>
</html>
Example of Frame link to HTML document in another frame:
<html>
<head>
<title>Frames</title>
</head>
<frameset rows="*,80">
<frameset cols="30%,*">
<frame src="file1.html" name="Test1">
<frame src="file2.html" name="Test2">
</frameset>
<frame src="endfile.html" name="footer">
</frameset>
</html>
Example of link to HTML document using [BASE]:
<html>
<head>
<title>Chapter Details</title>
<base target="Check_in">
</head>
<h3>Books in Library</h3>
<ul>
<li><a href="file1.html">HTML Program</a>
<li><a href="file2.html">Hyper text markup language</a>
</ul>
</html>
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"
onMouseOver="imgover(home1)"
onMouseOut="imgout(home1)">
Data Feeds</a>
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>Information</p>
<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>
<head>
<title>Lion</title>
<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>
IMAGE BACKGROUND
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">
IMAGE MAP
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">
</body>
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="http://www.creative.com/
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:http://img.www.site/arrows/right/File:red.gif
Add image to web page as follows:
eg 1: <img src="http://img.www.site/arrows/reight/red.gif">
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>
IMAGE TAGS
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>
LINE WRAP
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>
</html>
Java Application = stand alone program (using Java interpreter)
Java Applet = program attached to HTML page (executed on local
system)
JavaScript = program language that enables a browser to process
web-based applications; can process client-side scripts
Java software is on the internet at ftp://java.sun.com/pub/
NOTE: use { }
JavaScript structure:
1. Location
a. Protocol Name: eg: http:
b. Domain Name Website eg: //www.site.com
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)
OBJECT CONTAINER:
Properties
1. document.bgcolor (background color)
2. document.fgcolor (foreground color)
3. document.lastmodified
4. document.title
Example 1:
<html>
<head>
<title>Java Script</title>
<script language="JavaScript">
<!-- my first JavaScript
document.write(document.title);
// Scripting done -->
</script>
</head>
<body>
</body>
</html>
Example 2:
<html>
<head>
<title>Test Script</title>
<script language="JavaScript">
<!-- my first JavaScript
document.write(location.hostname);
// Scripting done -->
</script>
</head>
<body>
</body>
</html>
Example of JavaScript:
<html>
<head>
<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 -->
</script>
</head>
<body>Your web document goes here.
</body>
</html>
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 -->
</script></font></center>
NOTE: Use single ' to replace HTML " when using HTML code within a
JavaScript.
Example:
<!-- hide JavaScript
document.write("<a href='http://www.mydir/home/index.htm'>");
// end of hiding -->
EMBEDDED OBJECT
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>
Nesting unordered (bullet) within ordered (number) list:
Example:
<ol>
<li>List 1
<ul>
<li>Name 1
<li>Name 2
</ul>
<li>List 2
<ul>
<li>Name 1
<li>Name 2
</ul>
</ol>
Example of all HTML documents pointing to the same frame:
<html>
<head>
<title>Chapter Details</title>
<base target="Look">
</head>
<h3>Books in Library</h3>
<ul>
<li><a href="file1.html">Program in HTML</a>
<li><a href="file2.html">Text Language</a>
</ul>
</html>
<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>
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
Contains information on:
1. Font
2. Size
3. Color
Attributes:
<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:
<html>
<head>
<title>Comments</title>
</head>
<body>
<h1>Comments</h1>
<p>This is a data entry form example</p>
<ht>
<form method="post" action="http://www.myhome.com/cgi-bin/processor">
<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() {
this.name=getParameter("name");
}
public void paint(Graphics g)
{
g.drawString(this.name, 5, 50);
}
SYNTAX is:
<param name="ParameterName" value="ParameterValue">
Row and column format; column headings are in first row.
TABLE PARTS:
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)
ALTERNATIVES TO TABLE:
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
TABLE FORMAT ATTRIBUTES:
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
TABLE CELL COLORS
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>
TABLE EXAMPLES
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>
</html>
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>
</html>
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>
</html>
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>
TABLE LINKED WINDOWS
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>
HTML FILES:
(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 filename.pl <CR> (perl file)
Copy HTML File:
1. Type: cp filename.html newfile.html <CR>
CGI-BIN HTML FILES
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 server.web.agency <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 filename.pl <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 yourterminalname.servername.company <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: http://www.server.com/cgi-bin/loaddocument <CR>
Back to Topics
|
|
© Page Publisher: Duane R. Hurst
|
|