Table of Contents

A Simple Way to Create Web Pages

Adding Images

Now that you have learned some basic tags, let's have fun and add some images. Most images used on web pages are of the jpg, gif, or bmp type. When using images, you must be certain that the image is not too large (file size). Try to keep the image size under 50 kb. The smaller you can make the image, the faster the page will load. Remember: people are impatient. If the page takes too long to load, they may leave your site and go elsewhere.

You can use any image on a web page. Remember copyright rules when "borrowing" images. 

Storing Images 

When saving images to use on your web site, it is a good idea to create a subdirectory within your web site directory called "images". Store all of your images in this directory. This helps to keep your site more organized. When storing your images in a subdirectory, you must specify the directory name as well as the image name in source tag. For example, the subdirectory is images and the image name is dog.gif. You must type images/dog.gif in the source tag. When storing images in the same directory as your web pages, you only need to specify the image name, dog.gif. 

Saving Images from the Web

Right click on the picture of the dog. Select "Save picture as" from the drop down list. Find the directory that your index.htm is located in. Click on "Create new folder". Name the folder images. Then double-click the folder to open it. Check the file name. It should say dog.gif. Then click on save. You have just saved an image from a Web page.

Adding Images to your Web Page

To add this image to your web page, type the following:

<img src="images/dog.gif">

Save the file and view it in Internet Explorer. You should see the dog on your web page. If you don't see the dog, here are some things to check. Check to see if you spelled everything correctly. Be sure you include a period before gif. Check to see that you matched the case exactly, no capital letters. Open your images folder to see if the dog.gif is there. Open the folder that contains your web page to see if the images folder is there.

Specifying Width and Height of Images

It is always a good idea to include the width and height of your images. This reserves the correct amount of space on the page while waiting for the image to download from the server. In order to specify the width and height, you must first determine the width and height in a photo editing program. If you are using Microsoft Photo Editor, open the file in Photo Editor. Hold your cursor over the image. You should see W,H: 296,364 on the lower bar. This is the width and height with the width specified first. If you are using Paint Shop Pro 6, open the image in Paint Shop Pro. You should see Image: 296x364x256. The first two numbers are the width and height respectively. The third is the color depth.

To specify the width and height, type: <img src="images/dog.gif" width="296" height="364">.

Adding Alt Text

You can add alt text to images. This will enable people who have images turned off in their browsers to view the name of the image or any other message you would like. This also allows people to read the words while waiting for the image to download. To add alt text, type: <img src="images/dog.gif" width="296" height="364" alt="This is a dog.">.

Specifying Image Borders

You can choose the border width displayed around your image by adding the border attribute. Type <img src="images/dog.gif" width="296" height="364" alt="This is a dog." border="1">. Save your work and view it in your browser. Your image now has a border around it. Hold your cursor over the image. You should be able to read the alt text. Go back to Note Pad and change border="1" to border="0". By default, hyper linked images have a border around them. Using border="0" attribute will prevent any border from showing even when you create a hyperlink from your image. 

More Tags   Creating Hyperlinks

Copyright 2000 by Computer Infotech^®

Updated December 2004