Using Images

There are only two types of images that can be viewed directly in browsers, GIF and JPEG.

GIF stands for Graphic Interchange Format. Gifs are usually small sized, low resolution images. They are very good for buttons and logos, but not for complex images such as photographs. Each color in a GIF image makes for a larger image.

JPEG stands for Joint Photographer Expert Group. JPEG's are usually larger sized, highly compressed, high resolution images. The JPEG format is excellent for photographs and detail work, and images with "millions of colors" work well with this format. JPEG's can also have attached comments.

Most of the images you normally work with on a computer are not in either of these formats, however. They are usually in PICT, BMP, TIFF, EPS, or other formats. Some of the pricier art software packages can automatically save as a GIF or JPEG file, but for the budget conscious educator, there are many shareware programs that work well.

One of the best is Graphic Converter. This shareware program allows you to translate almost any type of file into GIF or JPEG format, add comments, and do simple image editing.

To translate a file:

1. Open Graphic Converter
   
2. Select Open from the file menu and open nearly any image document.
   
3. Make any changes you would like to the image.
   
4. Select save as from the file menu and choose the format to be saved as.
   

That's it!

Now the best way to get lots of images to use in your HTML documents is to go to other people's sites and steal them. Just click on an image and hold down the mouse button. A pop up menu will ask you what to do with the image. Select "Save Image As...," and save the image to your disk. You should always give credit to the creator of the image that you are using, if known.

Using Animation

There are several types of animation that can be used on the web. The most popular are Shockwave (Director) images, QuickTime movies, and Animated Gifs.

Shockwave

Shockwave movies are very high quality and flexible types of animation. One of the drawbacks to using Shockwave in your documents is that a separate piece of software, called a "plug-in," has to be downloaded and installed before your users can see your animation. Another drawback is that the application used to create Shockwave movies, Macromedia Director, costs nearly a thousand dollars.

QuickTime

QuickTime movies have become very popular on the internet. They include both video and sound. There are many QuickTime movies available for your use, such as the movies included in Multimedia Encyclopedias. Many software programs such as Starry Night and Interactive Physics allow you to save your work as a QuickTime movie. If you actually want to create QuickTime movies frame by frame, the software is pretty expensive.

Netscape Navigator has built in QuickTime support so users usually won't have to download any special software. QuickTime movies are usually fairly large, taking up a lot of disk space on your server, and taking a lot of time to download.

How to put a QuickTime movie into your document:

1. Open the movie with the SimplePlayer or MoviePlayer application.
   
2. Select "Save as" from the file menu.
   
3. Near the bottom, check the boxes: "Make movie self contained" and "Playable on non-mac machines."
   
4. Save the movie using the suffix .mov, i.e., fishes.mov. in the folder where your HTML document is.
   
5. Now you will use the <EMBED> tag to place the movie. An example is below:

   <EMBED SRC="fishes.mov" PLUGINSPAGE="http://QuickTime.apple.com" CONTROLLER=false LOOP=false AUTOPLAY=false>

   The SRC is just like that in linked documents. PLUGINSPAGE is the URL the browser can go to if the user doesn't have the plugin. CONTROLLER, LOOP and AUTOPLAY are self explanatory and can have a value of either true or false. Please note: It's not nice to force some movie on a visitor and not allow the visitor to turn it off. To that end, do not used AUTOPLAY = true, LOOP = true, and CONTROLLER = false together.

That's about it for QuickTime movies.

Animated Gifs

Animated Gifs are the most popular form of animation on the web. They are usually used for changing logos and advertisements though they can be used for many purposes. They are small files, not much larger than regular images, and they download quickly. Their drawback is that they can't include sound.

You can copy animated gifs from many places on the net, but they are easy to make as well, using the GifBuilder 0.5 Freeware application. To put them into your documents, you just use the <IMG> tag as you would another image.

How to make animated gifs

Let's make a simple animated gif of a winking smiley face.

1. Open GifBuilder. From the Window menu, make sure that the frames and preview windows are open.
   
2. Open ClarisWorks or a similar art program.
   
3. Use the circle tool to draw a quarter sized circle.
   
4. Draw two smaller circles inside of the circle for eyes.
   
5. Use the pencil tool to draw a smile.
   
6. Select your drawing and then choose "Copy" from the Edit menu.
   
7. Go to the GifBuilder program and choose "Paste" from the Edit menu. In the frames window you should see something like "Clipboard 1, etc., etc." In the preview window, you should see your smiley face.
   
8. Go back to the art program.
   
9. Erase/Delete one of the eye circles and replace it with a small line. (This is the closed eye.)
   
10. Again select your drawing, choose "Copy" from the Edit menu, and paste it into GifBuilder.
    
11. Under the Options menu, select Loop and choose "Loop forever"
    
12. In the frames window, for the first entry, double click the number under Delay. Change it to 100.
    
13. You can preview your animation by going under the Animation menu to Start.
    
14. When you are satisfied with your animation, choose Save As from the File menu. Make sure to save your file with a .gif suffix, such as smiley.gif, and also make sure to save it in the same folder your page is in.

You can now place an <IMG> tag into your HTML document using SimpleText, that points to this image, and then you can see your animation by previewing it in Netscape. The sample code for this would be:

With a little more work, you can create animations like the one below on the left, or maybe one that really serves a purpose, like the one below on the right.

Adding Sound

There are many types of sound that can be used on the internet. For the Mac there are AIFF and AU files, for Windows there are WAV files.

Using a program such as SoundMachine or Sound App, you can save your recorded voice or other sounds as AIFF or AU files. To put them into your HTML document, you have to use the <EMBED> tag. The following is an example:

The SRC again is just the location of sound file. If the AUTOSTART attribute is true, the sound will begin playing as soon as it is downloaded. If the HIDDEN attribute is true, the sound won't take up space on your page.

In order for a user to hear the sound in Netscape, they have to have the Live Audio plugin installed on their system. It comes standard with Netscape 3.0 but can also be downloaded from the Netscape website.

Using JavaScript

JavaScript is a simple programming language that can be used very effectively within browsers. JavaScript can be either directly placed in an HTML file or can be a text file with a .js suffix that is called by an HTML document. You don't need to know anything about programming to use JavaScript.

On the disk there is a folder called "scripts" which contains several example scripts.

To place one of them into your HTML document, you use the <SCRIPT> tag.

To use JavaScript placed directly into an HTML document, use the <SCRIPT> tag as follows:

<SCRIPT LANGUAGE="JavaScript">

JavaScript code goes here

</SCRIPT>

If you would prefer to keep your scripts separate, you can use the SRC attribute to call the JavaScript code.The sample "code" is:

Below is a rundown of the scripts included on the disk:

Alert	This file tells you how to include an Alert command so that a box containing a message of your choice comes up.
colorpage.html	You can use this file as a basis for an HTML document. It allows the user to change the background color of a document by typing a color in a prompt.
confirm.html	This document can be used to have a user confirm some statement before being allowed to progress further.
DateStamp	The code in this document can be used to place a Last Updated message in a document.
RollingStatusMessage	The code in this document can be used to create a message that scrolls across the status bar at the bottom of a browser window.
scripttest.js	This file is a password checking script to be used in conjunction with secret.html below.
secret.html	This file is the basis for a pseudo secure HTML document. It allows certain access only for users with the correct password. Anyone who knows about JavaScript can figure out the password, so it's more appearance than anything else.
SpicingUpLinks	Use the code in this file to change the normal URL value that shows up in the status bar to a message of your choice.
WelcomeScript	You can adapt the code in this script to give a personalized welcome to a user who visits your site.

JavaScript is not easy to learn or use, although it does some great things. For help with JavaScript check out internet sites like WebCoder.com.