Leland Initiative Web Tutorial Series: Lesson 6--Using Images in a Web Page

Leland Initiative Web Tutorial Series:
Lesson 6--Using Images in a Web Page

Overview of Last Lesson

In the previous lesson, we covered how to create hyperlinks to pages on other web sites, to pages within the current web site, and to bookmarks on the same web page.

Before We Begin: Important Notes about Using Images

As you will see, putting images into your web page is really no big deal, but you do need to be aware of a few important considerations before we start:

You must have an image file before you can use it in your web page. I realize this may seem obvious, but the point is that the image is not something you can create via HTML within the web page itself. Instead, the image exists as a separate file on the web server. How can you get an image file? You can create your own using software such as Paintshop Pro, PhotoShop, and others. If you have Windows (3.x, '95, or NT), then you can use a program called PaintBrush that's included with Windows. Or, you can use an image that already exists. Check out some of the sites listed below for online image repositories.

Images come in many different formats. As a matter of fact, there are several hundred different image formats, including Bitmap (bmp), WordPerfect Graphics(wpg), and Windows Meta File (wmf). For images used in web pages, you should use either JPEG (jpg) files or GIF (gif) files. Look at the extension of the actual graphics file, and that will tell you what format it is in--you'll want files with either a ".jpg" or ".gif" extension.

You should be very careful about how many images you include in each web page, and you should try to keep the size of included images files to a minimum. It takes time for a visitor's web browser to download images. If there are too many--or if the images are too big--then it can take too long for the page to download, which can lead the visitor to giving up and exiting your site!

Why Use Images?

Strictly speaking, there really is no functional reason to include images in a web page. After all, the page will download just fine without them (and will download more quickly as explained above). Web builders include images for aesthetic reasons. It may sound silly, but web sites and web pages simply look better if a few images grace them. In addition, adding a logo (such as the one we'll be using in this lesson) to every page on a web site gives visitors a reference point to know where they are. If they see the same logo on every page, this lets them know that they are still on the same web site. Considering the huge number of web sites out there, it's important to give your visitors a reference point to they don't get lost or confused.

Using Images in a Web Page

The first step in including an image in your web page it to place the image file itself on the web server. Just as you must "upload" all HTML files (web pages) to a server before they can be accessed, you must also upload the image files to the same web site on the server. Remember, the images themselves are not part of the HTML file--they are separate files that exist independently. The purpose of this lesson is to show you how to include HTML tags within a page that tell the browser where the separate image files are. These tags simply tell the browser "Look here on the server for this image file, and include that image in this web page."

To understand how this works, you must first be familiar with how files are organized on a computer. Think of the hard drive on your own computer. You have a hard drive on your computer, and it is probably labeled as the "C" drive. You probably already know this from using "Windows Explorer" to locate files on your computer. Within your hard drive (we'll assume that it is in fact the "C" drive), there are also a number of "folders". These folders can be named anything you want. For example, you'll probably see a folder called "Windows" on your see drive. Within this "Windows" folder are a number of individual files, as well as more folders. If you are confused by all this, consult your computer support person or ask one of the computer gurus in your office for more details.

I am covering the topic of folders and how files are organized on a computer because you will need to know this in order to "point" to image files.

The Image Tag

Below is an example of an HTML tag used for images:

Note that, like all HTML tags, this one starts and ends with brackets (<>). The "img src" part of the tag stands for "image source". The part of the tag appearing after the equals sign ("images/logo.gif") is where the actual image file is located. This tag, then, is very similar to the hyperlink tag we covered in the last lesson. The difference is that, instead of telling the web browser where to look for another web page, this tag is telling the browser where to look for an image.

Note that the beginning part of the image location, "images/". When you see a forward slash, as in this case, that indicates that whatever appears to the left of the slash is a folder. In this case, then, the web browswer0 will look for a folder called "images" and will then attempt to locate the file "logo.gif" within that folder. Please note that the location of the image file is relative to where the HTML is. With our example, you will want to put our sample HTML file in the "root" of the C drive. That is, you need to copy the attached file and paste it directly into your C drive so that it is not located within any folder. Then, you'll need to create a folder in your C drive, name it "images", and put the image file (which I'll also attach) into the "images" folder.

Let's go ahead and use our sample web page to illustrate. I want the image, which is the USAID logo, to appear at the top of the web page. Here's how the HTML file looks after I put in the appropriate tag:

<html>

<head>

<title>USAID Mock Homepage</title>

</head>

<body>

<a name="top"><h1><center>US Agency for International Development</center></h1></a>

Thank you for visiting the US Agency for International Development's (USAID) fake web site.

<p>USAID is currently involved in a number of development projects worldwide. One example is the Agency's Leland Initiative. The Leland Initiative is designed to foster increased Internet access and use in about twenty African countries. One way the Initiative is trying to do this is by conducting an HTML "How To" online tutorial via the Leland Initiative listserv. You can find out more about this project by visiting the <a href="http://www.info.usaid.gov/regions/afr/leland/index.htm">Leland Initiative Homepage</a>. Or, if you'd rather write, please send correspondence to the following snail mail address:

<p align=center>Jeff Bland<br>

111 Anywhere Street<br>

Anywhere, USA 00000</p>

</body>

</html>

Note that the tag appears right after the <body> tag, making it appear at the top of the page.

If you were to preview this page now--before putting the image file onto your computer's hard drive--you wouldn't actually see the image at the top of the page. Instead, you'd only see a little symbol. That's because your page is looking for the image file but cannot find it--the little logo is simply a symbol browsers use to indicate an image that is missing.

However, if you put the image file into the right directory on your computer and open the HTML file again, you should see the logo.

Using an Image as a Hyperlink

In the last lesson, I said that you can turn images into hyperlinks. How do you do this? Well, you simply treat the image as if it were text. That is, put the hyperlink tags on each side of the image tag, just like you'd do with text. Let's make the USAID logo into a hyperlink so that if users click on the logo, they will be taken to USAID's home page. While we're at it, let's go ahead and center the logo as well. Here's how:

<html>

<head>

<title>USAID Mock Homepage</title>

</head>

<body>

<a name="top"><h1><center>US Agency for International Development</center></h1></a>

Thank you for visiting the US Agency for International Development's (USAID) fake web site.

<p align=center>Jeff Bland<br>

111 Anywhere Street<br>

Anywhere, USA 00000</p>

</body>

</html>

Note that the image tag now has tags for centering around it, as well as the tags to make it a hyperlink (don't forget the "</a>" tag to turn off the hyperlink or the "</center>" to turn off centering!).

Wrap Up

Images are an important element of web pages. They add color to your site and keep visitors interested in staying there. When they are used as hyperlinks, images can also act as visual cues to allow users to more easily navigate your site. Don't be afraid to be creative with images. You are limited only by your imagination. On the other hand, try to use images sparingly. If you overload a page with too many images, then it will take too long to load.

Related Sites

As usual, here are more web sites that can help you out:

http://www.cwru.edu/help/introHTML/TCh7.html
http://www.geocities.com/SiliconValley/Campus/1924/image.html
http://www.coolarchive.com/index.cfm (this one is a huge archive of images you can use in your web pages)

Next Session

In the next session, we'll start to cover creating tables. This topic is a tough one, so be ready!

Lesson 5 | Table of Contents | Lesson 7

This series was developed for USAID’s Leland Initiative by the Research and Reference Services Project (operated by the Academy for Educational Development).