Welcome to

Sorry, you can't see the Lake animation, but here's a still image:

How to link applets into web pages

Linking a Java applet into a web page is a lot like linking a GIF or JPG image file. Just as you might display an image using a tag like this:

<IMG SRC="MyPic.jpg" ...

to link an applet, you might say:

<APPLET CODE="Lake.class"...

The <APPLET tag's CODE= keyword does the same job as the IMG tag's SRC= keyword, telling the browser to download the specified file (applets have a .class filename extension). You handle .class files exactly as you would a JPG or GIF, uploading them to your web server and, typically, storing them in the same folder as the HTML file(s) that call them.

<APPLET is actually a tag pair (or 'HTML code block'), with a corresponding terminator tag and optional extra tags and entries, like this:

<APPLET CODE="MyApplet.class" WIDTH=300 HEIGHT=200 ALIGN=bottom>
<PARAM NAME=param_name VALUE="param_value">
<PARAM NAME=param_name VALUE="param_value">
Text for display by browsers which don't support Java
<IMG SRC="NoJava.jpg">


(= Mandatory items) (= Optional items [specific to each applet])(= content for non-Java browsers)

the <APPLET tag's WIDTH, HEIGHT and ALIGN keywords perform the same function as they do in an <IMG tag, defining the size of the applet's screen window (within the browser display), and how text and other page content aligns alongside the window. The <APPLET.. tag can include other keywords - see Microsoft's Internet Client SDK for details (choose APPLET from the index).

<PARAM tags supply parameter data to the applet, for example the name of the image file to be displayed by Lake.class. An applet's <PARAMs are decided by the applet's author - some applets take no parameters, while others may take a mixture of mandatory and optional ones.

Following the <PARAM tags (if any), you can include ordinary HTML content for display by browsers which don't support Java. Finally comes the </APPLET> tag, which is required even if there are no <PARAM tags or non-java content.

Most downloadable Java applets come with a readme.txt or other documentation file, describing the applet's parameters and other details. Many also come with a sample HTML page and other components (image files etc), so you can see them in action (all these files are typically bundled together into a .zip archive file). However only the .class file (the applet itself) needs to be uploaded to your server. Some applets call other applets - if so, the applet's documentation will tell you which other .class file(s) you need to upload.

How this page works

This page uses David Griffiths' brilliant Lake.class applet to place Bath's Royal Crescent on the waterfront, using Lake's optional overlay parameter to display a transparent GIF containing a caption, which appears over the 'water'. (To download lake.class complete with documentation, click the DG logo at the top of the page)

Here's how I prepared the image files and coded the <APPLET tag to bring the applet and images together.

I began with an image of the Royal Crescent (reduced in size here for download time-saving):

Using Paint Shop Pro (what else?) I rotated it right by 1 degree to make the crescent more horizontal, then cropped off some of the sky and most of the lawn.

Here's the cropped image file used by the Lake.class applet on this page:

RCwide.jpg (18868 bytes)

To give Lake.class room to display the 'lake' below the crescent, I gave it a display area just under twice the image's depth, like this

<APPLET CODE="Lake.class" WIDTH=710 HEIGHT=210...

Applarea.gif (49986 bytes)

(it's 'just under' twice the depth in order to avoid the 'grey margin' being visible - click here for an example of the grey margin in action).

Then I created a new transparent GIF equal to the size of the applet window I was going to use (i.e. the cropped image plus the virtual lake - 710 X 210 pixels). I drew the caption text on that, and used it as the applet's overlay image (note that the actual image doesn't have a black border).

Lcapt.gif (1735 bytes)

Finally, I added some page content for display by non Java-equipped browsers:

Sorry, you can't see the Lake animation, but here's a still image:<br><IMG SRC="Lkstll.jpg">

Here's what non-Java browsers will display:

Sorry, you can't see the Lake animation, but here's a still image:

(I made the still image by loading this page into my browser, then grabbing the applet's display area using Paint Shop Pro)

Here's the full HTML code for this page's applet call:

<APPLET CODE="Lake.class" WIDTH=710 HEIGHT=210 ALIGN=bottom style="border: 2px black solid">
<PARAM NAME=image VALUE="RCwide.jpg">
<PARAM NAME=overlay VALUE="LCapt.gif">
Sorry, you can't see the Lake animation, but here's a still image:<br><IMG SRC="Lkstll.jpg">

Back to menu