Advanced HTML Guide

(This Advanced HTML Guide was last modified March 11, 2004. Please send any comments or suggestions to Prof. Dunsmore.)

This Advanced HTML Guide has been accessed 347326 times.

Transparent Backgrounds for Images
Web Icons
Dynamic Documents
Helping Search Engines Find Your Website
Common Gateway Interface (CGI)
Image Maps
Client Side Image Maps
Java and JavaScript
Guest Books

Transparent Backgrounds for Images

Many images look better if their background color matches browser window

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


16 pixel x 16 pixel .ico icon

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....


...if do this, can rename icon to something other than favicon.ico

Icon is used for homepage and all other pages of Website




USA Today



Server sends down page

Browser displays page but leaves connection open

Whenever server wants, sends another page and browser displays it


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

Document reloads itself once a second

<HTML> <HEAD> <META HTTP-EQUIV="Refresh" CONTENT=15> <TITLE>Live Doppler 18</TITLE> </HEAD> <BODY> <H4>Live Doppler 18</H4> <IMG SRC="Weather/Doppler/Radar.jpg"> </BODY> </HTMl>

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

To Load Another URL

<HTML> <HEAD> <META HTTP-EQUIV="Refresh" CONTENT="10; URL="> <TITLE>It's a Joke...</TITLE> </HEAD> <BODY> I told the warden that I was going to break out... </BODY> </HTMl> <HTML> <HEAD> <TITLE>It's a Joke...</TITLE> </HEAD> <BODY> I told the warden that I was going to break out... <P> Later that week I developed a case of CHICKEN POX! </BODY> </HTMl>

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

Helping Search Engines Find Your Website

Many search engines rely heavily on the TITLE

Use keywords in the TITLE

International Programs (study abroad,
students, scholars, campus seminars,
faculty resource guide)
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 -->


Page or screen can be divided into sections called frames

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

HTML Guide Demo


Frame Document has basic structure much like normal HTML document, except BODY container replaced by FRAMESET container







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 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 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 tag can be nested inside other FRAMESET tags


Defines single frame in frameset

Some selected attributes --


SRC attribute takes URL of document to be displayed in this frame


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 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 attribute is flag indicating frame is not resizable by user

By default all frames are resizable


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)


By default, there is an 8 pixel margin left and right in each frame. Can make this smaller or larger.


By default, there is an 8 pixel margin top and bottom in each frame. Can make this smaller or larger.


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


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:

<IFRAME SRC=url WIDTH= pixels | percent HEIGHT= pixels | percent ALIGN= TOP | MIDDLE | BOTTOM | LEFT | RIGHT> </IFRAME>


Creates a floating frame that works very much like an IFRAME:

<OBJECT DATA=url WIDTH= pixels | percent HEIGHT= pixels | percent ALIGN= TOP | MIDDLE | BOTTOM | LEFT | RIGHT> </ OBJECT>

Common Gateway Interface (CGI)

CGI stands for Common Gateway Interface -- place where Web server goes to find programs that it needs to run

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++

Image Maps

Imagemap program is usually part of cgi-bin directory

(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 652,423 652,383

poly 395,184 658,188 592,325 538,337 466,320 357,253

rect 237,59 343,184

Imagemap file can be named anything but usually uses suffix .map (like

(3) Reference your imagemap in an HTML file

<A HREF="cgi-bin/bxd/imagemap/bxd/">
<IMG SRC="images/worldmap.gif" BORDER=2 ISMAP> </A>
Office of International Programs Demo

imagemap 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

<A HREF = "">
<IMG SRC="images/worldmap.gif" ISMAP>
Bring up that page and notice that most Web browsers tell you the x,y location of any point....

Client Side Image Maps

Limitations of server side image map implementation:

(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

Client Side Image Map Demo

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"]>
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="">
<AREA SHAPE="POLY" COORDS="145,134,220,189,77,188" HREF="">
<AREA SHAPE="RECT" COORDS="1,1,289,218" HREF="">


HTML forms are used to get information from user before giving requested information

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

What is your favorite city?

The code for this form is:
<FORM METHOD=POST ACTION=/cgi-bin/city.cgi>
What is your favorite city?<BR>

Where do you live?

The code for this form is:
<FORM METHOD=POST ACTION=/cgi-bin/guestbook.cgi>
Where do you live?<BR>

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

Please enter your password:

The code for this form is:
<FORM METHOD=POST ACTION=/cgi-bin/password.cgi>
Please enter your password:<BR>


The code for this form is:
<FORM METHOD=POST ACTION=/cgi-bin/sports.cgi>
<INPUT TYPE=CHECKBOX NAME=tennis VALUE="tennis "> Tennis
<INPUT TYPE=CHECKBOX NAME=bball VALUE="basketball "> Basketball
<INPUT TYPE=CHECKBOX NAME=shuffle VALUE="shuffleboard "> Shuffleboard


The code for this form is:
<FORM METHOD=POST ACTION=/cgi-bin/radio.cgi>
Freshman <INPUT TYPE=RADIO NAME=year VALUE="your Sophomore year" CHECKED>
Sophomore <INPUT TYPE=RADIO NAME=year VALUE="your Junior year">
Junior <INPUT TYPE=RADIO NAME=year VALUE="your Senior year">
Senior <INPUT TYPE=RADIO NAME=year VALUE="your graduation!">


The code for this form is:
<FORM METHOD=POST ACTION=/cgi-bin/address.cgi>

Purdue University 
West Lafayette, Indiana 47907 


The code for this form is:
<OPTION>Ohio State 

The code for this form is:
<OPTION>Ohio State 

Processing Form Data In CGI Programs


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 (=)

A Forms Example

The CGI program

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 and Javascript

CGI programs were once simply programs that ran on the Web Server

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

Java Animation Example

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(),
   if (img != null) 
     while (true) 
       try {Thread.sleep(1000);}
       catch (InterruptedException e){}
       while (i < imgHeight)
         try {Thread.sleep(50);}
         catch (InterruptedException e){}
 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);
 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


Purdue University Department of Foods and Nutrition has a visitor counter

Typical standard visitor counter is fairly simple CGI program

In the HTML...

This website has been accessed
<IMG SRC=" cgi-bin/count.cgi">

count.cgi is a C program

What does count.cgi do?

(1) Reads a file called that contains a single integer count

(2) Increments count by one and writes it into (updates)

(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="" 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 &nbsp;
<!-- counter -->
&nbsp; 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 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:

"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=" 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 :-)

Guest Books

CGI programs can be used to create Guest Books, message boards, comment pages

American Society for Nutrional Science Guest Book

C++ Add Item to Guest Book program "gb"

C++ Look at Guest Book program "viewlog"