Adding Images

You've got some basics down and have started on a simple page with some content. You're probably going to want to add some images to that page. This is relatively simple. First you need to find an image you want to use. You don't have to know how to make graphics for the web - there are also lots of places on the web that have free clip art you can download for use on your web pages.

Once you find an image you like, download it to your hard drive. In either Internet Explorer or Netscape Navigator browsers, you can right mouse click on an image. In Explorer, scroll down to "Save Picture As" and save the image to a directory on your hard drive. In Navigator, scroll down to "Save Image As". On a Mac, you can simple hold down your mouse button until a scroll down screen appears and you do the same.

I recommend you create a directory on your computer that is called "web", and then create a folder called "images" in the "web" folder. Keep all your HTML documents in the web folder and your web images in the images folder.

Here's a brief list of sites that have free graphics. Go find an image that you like, save it to your hard drive and come back and learn how to add it to your webpage.

If you've done what I've recommended, you have a "web" folder on your hard drive, and an "images" folder in your "web" folder. And you've also got at least one or two images in your images folder that you've recently downloaded. Now take a look at the following code:

   <IMG SRC="images/imagename.jpg">

That code uses the IMAGE element with the SRC attribute. The SRC attribute lets the browser know where the image is located. Place this code in one of your HTML documents in your web folder and put the filename.fileextension in the images folder where filename is the name of the image, and fileextension is the type of image (we'll assume for now that it will either be .jpg or .gif). Click here to see an example.