Advanced HTML Guide

(This Advanced HTML Guide was last modified February 19, 2000. Please send any comments or suggestions to Prof. Dunsmore.)

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

tifftopnm < globe.tif | ppmtogif -trans #FF0000 > newglobe.gif

Existing Image --

giftopnm globe.gif | ppmtogif -trans #FF0000 > newglobe.gif

Image with Red Background

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

<META HTTP-EQUIV="Refresh" CONTENT=1>

Document reloads itself once a second

<META HTTP-EQUIV="Refresh" CONTENT=15>

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

<META HTTP-EQUIV="Refresh" CONTENT="8; URL=http://mentor.cc.purdue.edu/doc2.html">

Loads doc2.html in 8 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

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

<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 (for example, Excite) 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 -->

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)

<MULTICOL COLS=2> ... </MULTICOL>

This crucial Civil War campaign (April-July 1863) captured the last Confederate fortress on the Mississippi River, divided the Confederacy in two, and gave the Union complete control of the river. This victory, along with that at Gettysburg, Pennsylvania, (July 1-3, 1863) tilted the war in favor of the North. <MULTICOL COLS=3 GUTTER=7> ... </MULTICOL>

This crucial Civil War campaign (April-July 1863) captured the last Confederate fortress on the Mississippi River, divided the Confederacy in two, and gave the Union complete control of the river. This victory, along with that at Gettysburg, Pennsylvania, (July 1-3, 1863) tilted the war in favor of the North. Warning: This ONLY works for Netscape. The Internet Explorer will ignore the tag and display the text in one column (normal mode).

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

HTML Guide Demo

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

default http://www.cs.purdue.edu/homes/bxd/special.html

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

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

imagemap file world.map

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

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"]>

</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> 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)

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

<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

<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

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

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>

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

A Forms Example

The CGI program

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;
 }
}

3-D Java Cube

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

JavaScript Calculator

JavaScript Message Scroller

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 clickable images

JavaScript Handling of Forms

JavaScript Forms Example

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

<META HTTP-EQUIV="Expires" CONTENT="Fri, 24 Sep 1999 15:08:00 EST">

...same as...

<META HTTP-EQUIV="Expires" CONTENT="Fri, 24 Sep 1999 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

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>

Using VRML requires performance considerations since VRML is based on computation-intensive 3D graphics

VRML will make it possible to "walk into" a page and ultimately handle and move objects in 3D space