Lab 3
Page 7

Adding Graphics and Sound to Your Page

Adding Graphics

One of the things that distinguishes an eye-catching sight from a mundane one is the clever use of pictures, or graphics. These graphics can come from many different places - you might draw them yourself on the computer using an art program, you might scan actual photographs into the computer, or you can simply take them from other web sites.

Next week you will learn a lot more about graphics. For now you can just use some of the ones you've found on the Web, as well as the picture taken of you earlier in this course. As long as the filenames of the pictures you are using end in ".gif" or ".jpg" the pictures should be able to be displayed.

First, you'll make a link to someone else's image without copying it onto your computer.

1. Find a graphic you like somewhere on the web.
2. Right-click on it and choose "View this Image"
3. Copy the URL listed in the "Location" box in your Netscape window
4. Type the following line into your HTML file to include this image:
   <IMG SRC = "The URL goes here">
5. Insert the URL you copied into the correct place.
6. Save and view your web page to make sure the picture appears correctly.

Next, you're going to display a picture which you've saved onto your computer.

1. Right-click on this link and open it in another window.
2. On that page, follow the instructions to find and copy the picture that was taken of you last week. If you don't want to use a picture of yourself, there is a very nice tiger you can use.
3. Save the picture in the same folder as your HTML file.
4. Type the following line into your HTML file to include this image:
   <IMG SRC = "the filename goes here">
5. Type in the name of the picture file in the appropriate place.
6. Save and view your web page to make sure your picture appears correctly.

Adding Sound to Your Web Site (optional)

In a later lab, you'll learn how to record, capture, and edit your own sounds. For now, however, we will be working with sounds that you find anywhere else on the Web. Because you cannot listen to any of these sounds without headphones, this section is optional. Lab TAs may have headphones for you to borrow. If you do not have headphones, you may want to do this at a later date.

If you did not get the URLs for any sounds last week, go to a search engine and attempt to locate one. Good things to search for are the names of favorite music groups, movies, and even television shows. There are usually many sites for such entertainment-related topics, and often they will have sounds there.

CAUTION - you are only looking for ".WAV" files. Just as the web browser is only able to display certain kinds of picture files, it can only play sounds from certain kinds of sound files as well. You will know that you have an appropriate file (a "wav" file) because the last three letters of its filename (its extension) will be .WAV

When you find a sound you like, use the following instructions to include it in your web page.

1. Move the mouse over the hypertext link which leads to the sound file
2. Right-click and choose "Save Link As..."
3. Save the sound in the same folder as your HTML file.
4. Type one of the following line into your web page to include it in your web page:
   • If you want it to be a link, type:
     <A HREF = "filename.wav">Here's a sound</A>
   • If you want it to play automatically, type:
     <EMBED SRC = "filename.wav">
5. Replace "filename.wav" with the name of your sound file.
6. Save your file and load it into Netscape to make sure it works properly.