A Simple Way to Create Web Pages
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
You can use any image on a web page. Remember
copyright rules when "borrowing" 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
imgs/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
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
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="imgs/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="imgs/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="imgs/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
This information compliments of
Maine Web Design & Hosting Services
Copyright 2000 by Computer Infotech®
Updated December 2004