Image appears to float in window
Could change background color of image
BUT ... some browsers set their own background color
Best Solution -- Create .gif image with one color as "transparent"
Tells browser to use background color for those color pixels in image
ppmtogif has "transparent" option
New Image --
Image with Transparent Red Background
JPEG does not support transparent pixels because of the way it stores and uses pixel colors
Server sends down page
Browser displays page but leaves connection open
Whenever server wants, sends another page and browser displays it
CLIENT PULL --
Server sends down page including directive that says "reload page in 5 seconds" or "load another URL in 10 seconds"
Client does as told, either reloading current page or getting another one
Dynamic Documents via Client Pull
Reload Page
Make sure META tag used inside HEAD of HTML document
Directive doesn't say "go get this page every 15 seconds from now until infinity"
Says "go get this page in 15 seconds"
If you set up "infinite reload" situation, only way to interrupt is by pressing Back button or by going to different URL
Make sure URL is fully-qualified
Don't use relative URL
Can dynamically load several documents consecutively this way
Last document should have no "Refresh" in it
TITLE
Use keywords in the TITLE
Many search engines use the first 200-300 words for extracting a description and identifying keywords
Some search engines (for example, InfoSeek, AltaVista) will let you
specify these yourself using META tag attribute
NAME
Remember: META tag must be in HEAD of HTML
document
Use a comment to specify keywords without destroying the readability of the page
Put MULTICOL container around text to put in multiple
columns
COLS attribute specifies number of columns
Each column is same width (varies depending on browser screen size)
GUTTER attribute specifies spacing between columns (in
pixels) (optional -- defaults to 10)
Each frame contains its own unique URL, allowing users to scroll through multiple sites simultaneously
Makes possible banners, ledges, tables of contents
Queries executed in one frame can generate results in another frame
Reduces need to jump back and forth between screens
Frame can function as ledge, constant area of the screen, keeping important information out front while the user scrolls through pages
FRAME DOCUMENT
Frame Document has basic structure much like normal HTML document, except BODY container replaced by FRAMESET container
<HTML>
<HEAD>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
FRAME SYNTAX
<FRAMESET>
Has 2 attributes ROWS and COLS
Frame document has no BODY
FRAMESET tag has matching /FRAMESET tag
Within FRAMESET can only have other nested FRAMESET tags, FRAME tags, or NOFRAMES tag
ROWS="list"
ROWS attribute takes comma-separated list of values
Best to use percentage values
<FRAMESET ROWS="10%,25%,65%">
If total is not 100%, all percentages will be scaled to match total of 100%
COLS="list"
COLS attribute takes comma-separated list of values
Best to use percentage values
<FRAMESET COLS="20%,80%">
If total is not 100%, all percentages will be scaled to match total of 100%
FRAMESET tag can be nested inside other FRAMESET tags
<FRAME>
Defines single frame in frameset
Some selected attributes --
SRC="url"
SRC attribute takes URL of document to be displayed in this frame
NAME="window_name"
NAME attribute assigns name to frame so it can be targeted by links in other documents ... usually from other frames in same document
NAME attribute is optional
Named frames can have window contents targeted with TARGET attribute
<BASE TARGET="window_name">
Used when all (or most) links in frame targeted to same window
TARGET attribute establishes default window_name
<A HREF="cows.html"> Cattle</A> will open cows.html in default window
<A HREF="cows.html" TARGET="ledge"> Cattle</A> will open cows.html in window named "ledge"
<A HREF="cows.html" TARGET="_self"> Cattle</A> will open cows.html in same frame the link is in -- useful for occasionally overriding a BASE target
<A HREF="cows.html" TARGET="_top"> Cattle</A> will open cows.html in non-framed full-screen window -- useful for breaking out of frame nesting
SCROLLING="yes|no|auto"
SCROLLING attribute describes if frame should have scrollbar or not
yes = scrollbars always visible for frame
no = scrollbars never visible
auto = browser decides whether scrollbars needed
SCROLLING attribute is optional
Default value is auto
NORESIZE
NORESIZE attribute is flag indicating frame is not resizable by user
By default all frames are resizable
<NOFRAMES>
NOFRAMES tag is for alternative content viewable by non-Frame-capable clients
By default, frames have BORDER=5
But, this can be changed with BORDER=n in outermost FRAMESET
BORDER=0 leads to frames with no borders at all
Need for scrollbars overrides BORDER=0
Allows HTTP server to run programs that generate dynamic documents, rather than being restricted to delivering only static documents
To enable CGI on a Web server, Web Master designates directory as CGI-bin directory
"bin" comes from old convention that directory containing executable programs has "bin" (for BINary code) in its name -- /bin, /usr/bin, /usr/local/www/bin
Often programs named with suffix .cgi (like search.cgi)
When client requests document from this directory, rather than sending program to client, Web server runs program and sends output from program to client
Should use CGI programming whenever you need to get input from user or whenever information you want to send is dynamic
For example, Rounder Records Catalog Search facility uses CGI-bin program to get search criteria, perform search, and return resulting information to client
Try searching for Artist / Musician "Little Jimmy"
Any programming language that is supported on server machine can be used for CGI programs
Popular languages are Java, PERL (Practical Extraction and Report Language), TCL (Tool Command Language), C, and C++
(1) Create an image
(2) Create an imagemap file
File maps regions in the image to URLs
Imagemap is collection of polygons, rectangles, and circles
Try to keep individual items in image spaced out far enough so user clearly knows what he or she is clicking on
Every line in imagemap file:
method URL coord1 coord2 ... coordn
method is one of the following:
default -- default URL -- coordinates: none (if click is not in a polygon, rectangle, or circle)
circle -- coordinates: center edgepoint
poly -- coordinates: up to 100 vertices in any order
rect - coordinates: upper-left lower-right
URL must be full (not relative) URL
Each method is evaluated in order placed in imagemap file
For overlapping areas (circle inside of a rectangle), place whichever one you want evaluated first before the other in the imagemap file
poly http://www.purdue.edu/OIP/iss/isshome.html 395,184 658,188 592,325 538,337 466,320 357,253
rect http://www.purdue.edu/UPS/Student/picc/ 237,59 343,184
(3) Reference your imagemap in an HTML file
A good way to identify pixel locations in an image used in a clickable image map...
Put the image in an HTML file between <A HREF> and </A> with the IMG attribute ISMAP
(1) Server transaction required to determine where link is directed
(2) No way for browser to show where portion of image map leads before user clicks on it
USEMAP attribute of IMG element indicates client-side image map
Argument to USEMAP specifies which map to use with image
Format similar to HREF attribute on anchors
If argument to USEMAP starts with a "#", assumed to be in the same document as the IMG tag
<AREA [SHAPE="shape"] COORDS="x,y,..." [HREF="reference"]>
</MAP>
Shape gives shape of area
Currently supported shapes include rectangles (RECT), polygons (POLY), circles (CIRCLE), and default (DEFAULT)
RECT - coordinates: upper-left lower-right
POLY -- coordinates: up to 100 vertices in any order
CIRCLE -- coordinates: center radius (NOTE! Differs from server-side image map which uses center and edgepoint)
DEFAULT usually unnecessary -- any region of image not defined by AREA tag assumed to do nothing
If DEFAULT is used to map to some other URL, put it last -- otherwise, nothing after it works (NOTE! Differs from server-side image map which uses DEFAULT in more sane manner)
COORDS tag gives coordinates of shape
HREF tag specifies where click in that area should lead
Unlike Server Side, HREF can be relative URL
<AREA SHAPE="CIRCLE" COORDS="229,70,35" HREF="getfit.html">
<AREA SHAPE="RECT" COORDS="30,46,157,95" HREF="http://www.nbc.com/">
<AREA SHAPE="POLY" COORDS="145,134,220,189,77,188" HREF="http://www.cbs.com/">
<AREA SHAPE="RECT" COORDS="1,1,289,218" HREF="http://www.fox.com/">
</MAP>
HTML Form Elements
<FORM> directive indicates beginning of HTML
form
Should be followed by </FORM>
Document may contain one or more HTML forms
Sub elements of the <FORM> directive:
ACTION="/cgi-bin/program.cgi" -- URL of CGI program that
will process output of form
METHOD="GET|POST" -- Method by which CGI Program will get
output from form
GET method places form output on URL in query string --
http://.../cgi-bin/search.cgi?bob+smith
POST method places output in stdin input
file of CGI program
<INPUT> directive defines an input field
TYPE=TEXT -- Text field that accepts character data (default)
TYPE=PASSWORD -- Text field that accepts character data,
but does not display it
TYPE=CHECKBOX -- Field that is either "on" or "off"
TYPE=RADIO -- Only one of group of radio buttons can be
"on", others are automatically turned off
TYPE=SUBMIT -- Sends the form to the URL defined in the
ACTION option of the <FORM> directive
TYPE=IMAGE NAME=SUBMIT SRC="..." -- also sends the form
information just like a Submit button
TYPE=RESET -- Browser resets form fields to default
values
NAME="name" -- Variable name associated with value of
input field
SIZE=size -- Length in characters of input field
(TEXT and PASSWORD input fields only)
MAXLENGTH=max -- Maximum number of characters for input
field (TEXT and PASSWORD input fields only)
CHECKED -- Field should be selected or checked by default
(CHECKBOX and RADIO input fields only)
VALUE=default input text displayed originally
(TEXT and PASSWORD input fields only)
VALUE=value returned when field is checked or selected
(CHECKBOX and RADIO input fields only)
VALUE=text displayed on button (SUBMIT and
RESET input fields only) -- Defaults are "Submit Query" and
"Reset"
<TEXTAREA> directive defines large text input field
Any text between
<TEXTAREA> and
</TEXTAREA> directive will be default text
displayed originally
<TEXTAREA> Options:
NAME="name" -- Variable name associated with text in
input area
WRAP=PHYSICAL -- The display word-wraps. The default is
WRAP=OFF
ROWS=rows -- Rows of text in input area
COLS=cols -- Columns of text in input area
<SELECT> and <OPTION> directives
Must be used together
<OPTION> directive defines selection item
Multiple <OPTION> directives usually specified
Must be between <SELECT> and
</SELECT> directives
Options to <SELECT> directive:
NAME="name" -- Variable name associated with returned
selection
SIZE=num -- Number of options displayed at any one time
MULTIPLE -- More than one selection can be made
Options to <OPTION> directive:
SELECTED -- This option selected by default
<FORM METHOD=POST ACTION=/cgi-bin/city.cgi> What is your favorite city?<BR> <INPUT TYPE=TEXT NAME=city SIZE=20 MAXLENGTH=40 VALUE="West Lafayette"> <INPUT TYPE=SUBMIT> <INPUT TYPE=RESET> </FORM>
<FORM METHOD=POST ACTION=/cgi-bin/guestbook.cgi> Where do you live?<BR> <INPUT TYPE=TEXT NAME=city SIZE=20 MAXLENGTH=40> <INPUT TYPE=IMAGE NAME=SUBMIT SRC="images/add.gif"> </FORM>
<FORM METHOD=POST ACTION=/cgi-bin/password.cgi> Please enter your password:<BR> <INPUT TYPE=PASSWORD NAME=pass SIZE=12 MAXLENGTH=12> <INPUT TYPE=SUBMIT VALUE=Submit> <INPUT TYPE=RESET> </FORM>
<FORM METHOD=POST ACTION=/cgi-bin/sports.cgi> <INPUT TYPE=CHECKBOX NAME=tennis VALUE="tennis "> Tennis <BR> <INPUT TYPE=CHECKBOX NAME=bball VALUE="basketball "> Basketball <BR> <INPUT TYPE=CHECKBOX NAME=shuffle VALUE="shuffleboard "> Shuffleboard <BR> <INPUT TYPE=CHECKBOX NAME=euchre value="euchre " CHECKED> Euchre <BR> <INPUT TYPE=SUBMIT VALUE=Submit> <INPUT TYPE=RESET VALUE="Start Over"> </FORM>
<FORM METHOD=POST ACTION=/cgi-bin/radio.cgi> Freshman <INPUT TYPE=RADIO NAME=year VALUE="your Sophomore year" CHECKED> <BR> Sophomore <INPUT TYPE=RADIO NAME=year VALUE="your Junior year"> <BR> Junior <INPUT TYPE=RADIO NAME=year VALUE="your Senior year"> <BR> Senior <INPUT TYPE=RADIO NAME=year VALUE="your graduation!"> <BR> <INPUT TYPE=SUBMIT VALUE=Submit> <INPUT TYPE=RESET> </FORM>
<FORM METHOD=POST ACTION=/cgi-bin/address.cgi> <TEXTAREA WRAP=PHYSICAL NAME=address ROWS=5 COLS=30> Purdue University West Lafayette, Indiana 47907 </TEXTAREA> <INPUT TYPE=SUBMIT VALUE=Submit> <INPUT TYPE=RESET VALUE=Restart> </FORM>
<FORM METHOD=POST ACTION=/cgi-bin/select.cgi> <SELECT NAME=univ SIZE=1> <OPTION>Indiana <OPTION SELECTED>Purdue <OPTION>Northwestern <OPTION>Ohio State <OPTION>Illinois </SELECT> <INPUT TYPE=SUBMIT VALUE=Submit> <INPUT TYPE=RESET> </FORM>
The code for this form is:
<FORM METHOD=POST ACTION=/cgi-bin/select.cgi> <SELECT NAME=univ SIZE=3> <OPTION>Indiana <OPTION SELECTED>Purdue <OPTION>Northwestern <OPTION>Ohio State <OPTION>Illinois </SELECT> <INPUT TYPE=SUBMIT VALUE=Submit> <INPUT TYPE=RESET> </FORM>
Processing Form Data In CGI Programs
GET vs. POST
GET method returns form data to your program in query string
POST method returns form data to your CGI program as standard input
POST method is preferred for forms, especially when form returns large amount of data
Data in Form fields are returned to CGI program as name=value pairs
Field name and field value separated by equal sign (=)
Java allows programs that run on the Web Server or ... the Web Browser
Java is complete object-oriented programming language derived from C++
Has all advantages of C++, but does away with unpleasant aspects like pointers and memory allocation
Easier to use and more secure
Java comes with collection of libraries (packages)
Library of user interface objects called AWT (Abstract Window ToolKit)
I/O library
Network library
Java APPLICATIONS run on Web server
Java APPLETS run on Web browser
Java programming requires Java compiler
import java.awt.*;
import java.applet.*;
public class Logo extends Applet implements Runnable
{
Image img;
Thread thd = null;
int i;
int imgWidth = 359;
int imgHeight = 121;
public void run()
{
img = getImage(getCodeBase(), "itilogo2.gif");
if (img != null)
{
i=imgHeight;
repaint();
while (true)
{
try {Thread.sleep(1000);} catch (InterruptedException e){}
i=0;
while (i < imgHeight)
{
repaint();
try {Thread.sleep(50);} catch (InterruptedException e){}
i+=4;
}
}
}
}
public void update(Graphics g)
{
if (img != null)
{
g.clipRect(0, 0, imgWidth, i);
g.drawImage(img, 0, i - imgHeight, null);
}
}
public void start()
{
if (thd == null)
{
thd = new Thread(this);
thd.start();
}
}
public void stop()
{
thd = null;
}
}
Netscape includes scripting language called JavaScript
JavaScript is scripting language like Perl
Can accomplish simple tasks in JavaScript that would take much more effort to accomplish in Java
Netscape provides on-line JavaScript documentation
Pick and Click with JavaScript
JavaScript onMouseOver can be used along with HREF in a standard link or in a client side image map
JavaScript onMouseOver can be used to change the appearance of images
Download each of the following JavaScript and mailto examples, change
the "mailto" field, and try them out:
(1) Confirm information received via
Browser window
(2) Confirm information received via
JavaScript confirmation mini-window
Use (or be careful about) the following:
A SUBMIT button is not always necessary;
If a <FORM> ... </FORM> has only
one TYPE=TEXT field, striking the return key in that
field submits the form.
You Don't Have to Use the Submit Button
You Don't Even Need a Submit Button
Typical standard visitor counter is fairly simple CGI program
In the HTML...
This website has been accessed
<IMG SRC="http://www.cfs.purdue.edu/cgi-bin/count.cgi">
times.
count.cgi is a C program
What does count.cgi do?
(1) Reads a file called count.data that contains a single integer count
(2) Increments count by one and writes it into (updates) count.data
(3) Selects the appropriate gif images from an image directory
(4) For example, if count is 004825, selects zero.gif, zero.gif, four.gif, eight.gif, two.gif, five.gif
(5) Creates 004825.gif image from these and makes SRC="http://www.cfs.purdue.edu/cgi-bin/count.cgi" the location of 004825.gif image
Another way to make visit counter ... that does not require gif "odometer"
Visit counter for this Advanced HTML guide works like this:
(1) All HTML code in a file that contains lines...
This Advanced HTML Guide has been accessed
<!-- counter -->
times.
(2) URL goes to C++ cgi program that "passes through" every line from Advanced HTML Guide to server ... except counter comment line.
(3) Counter comment line causes count_file to be read and incremented. New counter is passed to server and appears as standard text.
Problems With Visit Counters --
(1) Inflated by multiple reloads
Potential solution:
In the count.data file keep a table of the last few (3-10) requestors of the page. Do NOT add one to the counter for a request from one of those.
(2) Deflated by visits from browser cache
Potential solution:
DD is 01, 02, ..., 31
YYYY is the year
HH is 00, 01, ..., 23
MM is 00, 01, ..., 60
SS is 00, 01, ..., 60
ZON is the 3-character Time Zone indicator like GMT (the standard), EST, CST, MST, PST
GMT is always EST + 5
By the way, an illegal date (CONTENT="0") or expired date forces a browser back to obtain a new copy every time
If you do not want to (or cannot do this yourself) there are commercial sites that will host a counter for you (such as The Ultimate Counter)
You will be instructed to include something like
<IMG SRC="http://www.ultimatecounter.com/cgi-bin/count.cgi?Z4573">
Such hosts do this in exchange for money or publicity for their site
Final Note: Visit counters are like horoscopes -- fun to look at but probably not very meaningful :-)
American Society for Nutrional Science Guest Book
C++ Add Item to Guest Book program "gb"
C++ Look at Guest Book program "viewlog"
Description language for 3D scenes (worlds) -- similar to .gif and .jpeg
file extension .wrl -- Web Reality Language
Live3D Netscape plug-in
3D scenes with text, images, animation, sound, music, video
VRML 1.0 supports simple animations
VRML 2.0 (in development) supports complex animations
VRML 2.0 -- Java and JavaScript programs can act on VRML objects
Use <EMBED> tag to place VRML scene in HTML document
Similar to using the <IMG> tag to place 2D image in HTML document
<EMBED SRC="hallway.wrl" WIDTH=128 HEIGHT=128 BORDER=0
ALIGN=middle>
VRML will make it possible to "walk into" a page and ultimately handle and move objects in 3D space