Ring of Lake Applets: Lake Applet Tutorial 101

Lake Applets 101

Sooo, ya wanna learn how to make Lake applets, eh? Well, you've come to the right place. After you complete the Lake Applet 101 tutorial, not only will you know how to make your own Lake applets, you'll also go home with your very own code file and a free photo image to boot. Without further ado, let's get cracking!

Down and dirty, this is all you do: Download Lake.class and a graphic, then type in this:

<table border="5"><tr><td>
<applet code="Lake.class" width="300" height="256">
<param name="image" value="swans3.jpg">
</applet></td></tr></table>

and it looks like this:

What's that?? You want more details?? Well, ok. If you insist... Here's a list of what you'll need before you start:

The Lake.class file. This is the magical code file that David Griffiths invented. There are two versions. The older version is Lake.class with a capital "L" and it's about 5k in size. The newer version is lake.class with a lowercase "l" and is about 11k in size.

To download the smaller, older version, right click Lake.class and save it to your hard disk. In Netscape I believe you hit right click, then "save link as" and in IE, right click and "save target as." To download the larger, newer version, right click newlake.class and save it to your hard disk. Once you've saved it, you'll need to rename it to lake.class. You can't have both versions in the same directory.

Don't save either newlake.class or Lake.class as a text file - use "class document" or "all files." If your system gives you trouble saving the Lake.class - for example, it only allows a 3 digit extension of Lake.cla instead of the full Lake.class - you'll need to download the Lake.zip file instead. Click this Lake.zip and try saving that. (If you want to use the newer lake.class file (with a lowercase "l") then try downloading newlake.zip . If you do this, you won't have to rename the file because when you extract lake.class, it will already be in lower case). The Lake.zip file contains the Lake.class file and the sample graphic (swans3.jpg). You'll then need to unzip (extract) the files somewhere on your hard drive and then upload them to your web page server. Upload the file and graphic into the same directory as the html file that the applet will be placed on.

Example: You have a directory called applets and you want to put an applet on a page in that directory called applets1.html. You should upload the Lake.class file and the swans3.jpg graphic into that applets directory for the applet to work. If you cannot do that, or if you have an Angelfire or Homestead site (Angelfire automatically puts html files in one directory and all others - including Lake.class - into the IMAGES directory, with Homestead placing the files in the FILES directory), then you will need to use the codebase attribute, which I will explain a little later.

You'll need a graphic. Any graphic with a jpg or gif format should work, and I am supplying one for you to use. It's the one used for this tutorial and feel free to use it on your own home page. You can save it by clicking swans3.jpg . The Lake.zip file will also contain the graphic in addition to the Lake.class file.

For this tutorial it won't be necessary, but if you plan on making your own applets, you'll need a viewer program that lets you view the width and height of the graphic that you are using. Netscape gives the dimensions of graphics in the title bar when they are displayed in a window. With MSIE, you need to right-click on the image and choose "Properties" from the very bottom of the popup menu. The image name, path, and dimensions are displayed in a box that pops up on the screen. Also, many free viewer programs are available and a good place to check out is Tucows.com .

And last, of course, is the few lines of code to paste onto your page. Here it is again:

Ok, let's pick this baby apart and make some sense of it.

The first line ( <table border="5"> <tr> <td> ) , and the last line ( </td> </tr> </table> ) are table codes that are used for making the frame border around the applet. This isn't necessary for the applet to work, so if you decide that you don't want a border, either delete the tags or change the table border="5" to border="0"

The second line is <applet code="Lake.class" width="300" height="256"> All you need to be concerned with are the width and height tags. Applet code="Lake.class" just tells the computer that you want to run the java class file code named Lake.class. Width="300" is the actual width of the graphic that you are using, and it's a good idea to always use the exact width in that part of the code or it could cause some distortion.

Now the height is just a tad different. The general rule of thumb with Lake applets is to take the height of the graphic, double that, and then subract 10 to 20 pixels from that for the "height" to be used in the code. The swans3.jpg is 138 pixels high, so double that is 276 and subtract 20 gives you a height of 256 to be used in the code. The number you subtract can vary but should be at least 10 pixels or you'll see an ugly gap at the bottom.

The third line is <param name="image" value="swans3.jpg"> All you need to worry about is the " swans3.jpg " part. If you use another image instead of swans3.jpg, simply replace swans3.jpg with that image file name. Normally your images will be in the same directory as your html files, but if by chance you have your images in a separate directory, such as "photos" you'll need to include that directory name. It would then look like this: <param name="image" value="photos/swans3.jpg">.

The fourth line is </applet> This is the closing tag for the applet.

Remember to add here the closing tags for the table that make the frame border. Note: placing </applet></td></tr></table> on the same line eliminates the small gap that may appear at the right or on the bottom between the applet and the frame border. (Thanks Gus!)

Well, that's about it. Think ya can do it? I know you can!. Once you get through the first couple, creating basic Lake Applets is a piece of cake and a lot of fun to do. You can also experiment with different looks by adjusting the table borders and cellspacing, and adjusting the height in the code to suit your needs.

Ok, let's summarize, then I will briefly talk about the codebase for Angelfire sites.

Download the Lake.class file and upload it to your server into the directory that will be holding the html file of the applet.

Make sure the Lake.class gets renamed exactly to Lake.class if your uploading changes it.

Use the graphic here or a jpg or gif of your own. Get the width and height.

Type in the code. Using your graphic, change the swans3.jpg to whatever you called it.

Using your own graphic, adjust the width, height, and file name accordingly. Make the height in the code twice the height of the graphic minus 10-20 pixels.

SIT BACK AND ENJOY YOUR Lake APPLET. CONGRATULATIONS!

*GeoCities Users*
When you're using the Geo Editor and you try to preview your applet, it will not display. You'll probably get a message something like "cannot find Lake.class." That's a Geo quirk, but if you uploaded the Lake.class file properly, you should see your applet after you save the file and then view it. Thanks to Shelley for reminding me about that. {:-)

*Angelfire Users*
Angelfire has changed their policy of placing all image files into the "images" directory, including the Lake.class. You should now be able to create Lake applets using the above tutorial. I will leave the "special" tutorial in place below for other web hosts that this may apply to.

Angelfire site owners... you still here? Your situation is a tad different. Angelfire does not give you a choice where to put your files. All html files go in the main directory and every other file, including Lake.class, will automatically go into the images directory. To get around that, you need to use codebase in your code. Here is the code again for the above tutorial:

Below is an example of the code including codebase:

See the differences? Note the changes in lines 2 and 3 and apply them to your site.

*Homestead Users*
Follow the above Angelfire instructions EXCEPT replace IMAGES with FILES . An example of a Homestead Lake applet would look like this:

WHEWWWWWW..... I think that's it!

I hope this little class helps. It is really not as complicated as it may appear, but I tried to cover all aspects of the code so you would know what the hey you are typing into your page. If you need further help, click HERE to visit our Lake Applet Forum where our experts are awating your questions.

Want to review any of this? Here are the links:

Please re-read this page carefully before emailing me. Also, be specific. Make sure you include the page address you are trying to put the Lake applet on. Sending me a "It doesn't work" message with no page address or specifics kind of makes it tough to see what you did wrong. Click Here to send me an email . Thanks

This tutorial is entirely by Bruce Jodoin, but if you like this, feel free to copy it and use it on your page to help your visitors, or if you wish, link to this page on your site. The URL to link to is https://www.angelfire.com/art/lakeapplets/ . There are no obligations at all. I do hope though that once you get your Lake applets on your page that you will consider joining the Web Ring, " The Ring of Lake Applets ."

If you "graduated" from Lake Applets 101 and feel creative, take my Lake Applets 201 course and learn how to create Lakes using the very cool 3-D overlay effect.

Want another opinion or wanna learn even more? Click HERE to visit the Lake Applet Tutorials and Tips Page, brought to you by the members of "The Ring of Lake Applets."

Please visit the Lake.class creator