ArticlesHow to Add Audio to Your Web Site Using Flash

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!).

Part of HTML's strength is its ability to link documents and display images. Linking will be shown in Lesson 7.

Unlike a word processing document or PowerPoint presentation, where the image is saved in the actual document, HTML brings images into the browser. For instance if you have an HTML document called mypage.html, the image is not saved in the HTML, but rather is called from a local folder or specified location. In other words if you wanted to display the image myforecast.gif in an HTML document, you would need to call it into the page from a specific folder. If you are sharing the HTML document, you would also need to share the image.

The tag for calling an image into an HTML document is <img src="myforecast.gif"> Obviously "myforecast.gif" could be named virtually anything.

The following image:

was called into this HTML document with the following source.

In this example "../ws/" is the folder location while "alcviewsc.jpg" is the actual name of the image.

You cannot call any image into an HTML document, but rather it must be in GIF, JPEG, or PNG format. These end with the extension of .gif, .jpg, and .png respectively.

Articles: How to Add Audio to Your Web Site Using Flash

For more information we recommend:
Web Warrior Guide To Web Design

Articles: Inserting Images

Why Use Images?

Part of HTML's strength is its ability to link documents and display images. Linking will be shown in Lesson 7.

Next>> Headers and Bullets

Articles: How to Add Audio to Your Web Site Using Flash

For more information we recommend: Web Warrior Guide To Web Design

Articles: Inserting Images

Why Use Images?

Part of HTML's strength is its ability to link documents and display images. Linking will be shown in Lesson 7.

Next>> Headers and Bullets

For more information we recommend:
Web Warrior Guide To Web Design