Image appears to float in window
Could change background color of image
BUT ... some browsers set their own background color
Best Solution -- Create image with one color as "transparent"
Tells browser to use background color for those color pixels in image
Image manipulation software (for example, Photoshop) can be used to select one color and mark it as "transparent"
Image with Red Background
Image with Transparent Red Background
Works well with GIF and PNG images
JPEG does not support transparent pixels because of the way it stores and uses pixel colors
Only choice in JPEG is to simulate transparency
Appears on Netscape tab and Address bar and Internet Explorer Favorites menu and Address bar
Must convert image to .ico format
Store favicon.ico in same folder (directory) as homepage of Website
Can also place following in HEAD section....
<LINK REL="SHORTCUT ICON" HREF="favicon.ico">
...if do this, can rename icon to something other than favicon.ico
Icon is used for homepage and all other pages of Website
Examples:
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
<META HTTP-EQUIV="Refresh" CONTENT=1>
Document reloads itself once a second
Document reloads itself every 15 seconds
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
Loads pox.html in 10 seconds
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
<TITLE>
International Programs (study abroad,
students, scholars, campus seminars,
faculty resource guide)
</TITLE>
Commas are ignored for keywords
Many search engines use the first 200-300 words for extracting a description and identifying keywords
Some search engines will let you
specify these yourself using
META tag
attribute
NAME
Remember: META tag must be in HEAD of HTML
document
<META NAME="Description"
CONTENT="The mission of the Office
of International Programs at Purdue
University is to facilitate the
development of educational
opportunities, research and other
services essential to Purdue
University's ability to perform its
land-grant university mission in the
context of the global environment of
the 21st century. ">
<META NAME="Keywords"
CONTENT="study abroad, students,
scholars, campus seminars, faculty
resource guide">
Some search engines pay attention to
comments as well as regular text
Use a comment to specify keywords without destroying the readability of the page
<!-- study abroad, students,
scholars, campus seminars, faculty
resource guide -->
Each frame contains its own unique URL, allowing users to scroll through multiple pages 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
Typical to use percentage values
<FRAMESET ROWS="10%,25%,65%">
If total is not 100%, all percentages will be scaled to make total of 100%
May use pixels instead of percentage values. Then, typical to use * to indicate all remaining space on the screen
<FRAMESET ROWS="100,250,*">
<FRAMESET ROWS="100,*,300,100">
COLS="list"
COLS attribute takes comma-separated list of values
<FRAMESET COLS="20%,80%">
If total is not 100%, all percentages will be scaled to make total of 100%
<FRAMESET COLS="200,*">
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 display cows.html in default window
<A HREF="cows.html" TARGET="ledge"> Cattle</A> will display cows.html in window named "ledge"
<A HREF="cows.html" TARGET="_self"> Cattle</A> will display 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 display cows.html in non-framed full-screen window -- useful for breaking out of frame nesting
<A HREF="cows.html" TARGET="_blank"> Cattle</A> will open a new browser window (on top of current one which is still there) and will display cows.html in that window
TARGET="_blank" can be used for any HREF (not just with frames) to display URL in new browser window on top of current one which is still there
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
BORDERCOLOR=color
Set the color for the border separating this frame from the others, for example, BORDERCOLOR=GREEN
BORDERCOLOR can be used with one or more <FRAME>s or with <FRAMESET > (to set default color for all borders)
MARGINWIDTH=pix
By default, there is an 8 pixel margin left and right in each frame. Can make this smaller or larger.
MARGINHEIGHT=pix
By default, there is an 8 pixel margin top and bottom in each frame. Can make this smaller or larger.
<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
IFRAMEs
WARNING -- This only works for the Internet Explorer and Netscape 6 and 7
Creates a floating frame that can be used exactly like an image:
OBJECTs
Creates a floating frame that works very much like an IFRAME:
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, WebMaster may designate one specific 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 CGI programs may be anywhere ... as long as they are 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, National Address Server facility uses CGI program to get search criteria, perform search, and return resulting information to client
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 the order in which you want them to appear
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
circle http://www.ippu.purdue.edu/malaysia/ 652,423 652,383
poly http://www.iss.purdue.edu/ 395,184 658,188 592,325 538,337 466,320 357,253
rect https://www.cco.purdue.edu/ 237,59 343,184
default http://www.cs.purdue.edu/homes/bxd/special.html
Imagemap file can be named anything but usually uses suffix .map (like world.map)
(3) Reference your imagemap in an HTML file
<A HREF="cgi-bin/bxd/imagemap/bxd/world.map">
<IMG SRC="images/worldmap.gif" BORDER=2 ISMAP> </A>
Office of International Programs Demo
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
<A HREF = "">
<IMG SRC="images/worldmap.gif" ISMAP>
</A>
Bring up that page and notice that most Web browsers tell you the x,y
location of any point....
(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
<IMG SRC="images/map.gif" BORDER=2 USEMAP="#places">
Regions of image are described using MAP element
<MAP NAME="name">
<AREA [SHAPE="shape"] COORDS="x,y,..." [HREF="reference"]>
</MAP>
Name specifies name of map so can be referenced by IMG element
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
<MAP NAME="places">
<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> tag indicates beginning of HTML
form
Should be followed by </FORM>
Document may contain one or more HTML forms
Attributes for the <FORM> tag:
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> tag 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 attribute of the
<FORM> tag
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> tag defines large text input field
Any text between
<TEXTAREA> and
</TEXTAREA> tags will be default text
displayed originally
<TEXTAREA> attributes:
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> tags
Must be used together
<OPTION> tag defines selection item
Multiple <OPTION> tags usually specified
Must be between <SELECT> and
</SELECT> tags
Attributes for the <SELECT> tag:
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
Attributes for the <OPTION> tag:
SELECTED -- This option selected by default
INPUT TYPE=TEXT
<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"><BR> <INPUT TYPE=SUBMIT> <INPUT TYPE=RESET> </FORM>
INPUT TYPE=TEXT
<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>
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
INPUT TYPE=PASSWORD
<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>
INPUT TYPE=CHECKBOX
<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>
INPUT TYPE=RADIO
<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>
TEXTAREA
<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>
SELECT and OPTION
<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 (=)
In order to email the contents of a form...
BUT, only works if user has established email connection to browser and does NOT work with Microsoft Outlook
Better solution ---
In order to use a Perl CGI script
Here is the Perl CGI script
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 = 180;
int imgHeight = 135;
public void run()
{
img = getImage(getCodeBase(),
"pegasusright.jpg");
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;
}
}
A Java Pie Chart
JavaScript is a scripting language that can be embedded right into the HTML file
Can accomplish simple tasks in JavaScript that would take much more effort to accomplish in Java
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:
<META HTTP-EQUIV="Expires" CONTENT="Day, DD Mon YYYY HH:MM:SS ZON">
"Day" is Sun, Mon, ..., Sat
DD is 01, 02, ..., 31
YYYY is the year
HH is 00, 01, ..., 23
MM is 00, 01, ..., 59
SS is 00, 01, ..., 59
ZON is the 3-character Time Zone indicator like GMT (the standard), EST, CST, MST, PST
GMT is always EST + 5
<META HTTP-EQUIV="Expires" CONTENT="Fri, 02 Apr 2004 15:08:00 EST">
...same as...
<META HTTP-EQUIV="Expires" CONTENT="Fri, 02 Apr 2004 20:08:00 GMT">
If you change the "Expires" date and time every few days, those
browsers with a cached version are forced back to obtain a new copy
... and to increment the visit counter
By the way, an illegal date (CONTENT="0") or expired date forces a browser back to obtain a new copy every time
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
This Meta tag instructs the browser NOT to cache this file. Any re-visits will require that the file be sent again from the server.
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"