Make your own free website on
You are here --> [Displaying Images - Adding Life to Your Pages] --> Jump To Article

HTML Made Simple
Author: Mike Ware
Website: [warebiz] :: "The Programmer's Domain" -
Copyright © 2002 Michael Shawn Ware, All Rights Reserved.

    --> Getting Started with HTML - First Things First
    --> Ground Zero - Where Do I Begin?
    --> HTML Tags - It's All About Tags
    --> Character Formatting - How to Spice Up Text
    --> HTML Lists - Looking Sharp and Organized
    --> Hyperlinks - Getting Out and Around
    --> HTML Tables - Far From Picnic Tables
    --> [Displaying Images - Adding Life to Your Pages]
    --> HTML Forms - Forming What?
    --> Image Mapping and Editing - Importance of Being Unique
    --> Frames - Structuring Static Document Layout


Displaying Images - Adding Life to Your Pages

Including Images
If a web page needs a visual appeal, an important step in the design should be the creation of many custom images. Most visitors prefer looking at informative pictures and images rather than reading text, and visitors are also drawn to looking at images before text. Web designers should add relevant images to their web pages to add visual life and substance toward the overall layout of the web site.

Most web browsers can display images in GIF and JPEG format, but with new browser capabilities, more file formats are capable of being displayed. To include an image in a web page document, use the image search <img src="imageURL"> tag, which specifies the name and type of image to be displayed and perhaps the full path of the image.

NOTE: If you do not specify the full path, the image must be in the current web directory.

The image search tag has the following form:

    <img src="image.type">

where the name and type of image is placed between the quotes or perhaps the full path of the image. For example, if an image named logo of format gif is in the current web directory, the following image search specification would be sufficient:

    <img src="logo.gif">

The image search tag comes equip with width="" and height="" attributes to specify the width and height of the image in pixels. Specifying width and height attributes for an image has been said to allow for faster loading times. It simply lets the browser allocate space on the web page for the image. For an example, if the previous logo image had dimensions of 200 by 100, the following image search specification would be sufficient:

    <img src="logo.gif" width="200" height="100">

Because some browsers cannot display certain image formats and some visitors choose to turn off image loading, web designers should also use the alt="" attribute to inform the visitor of which type of graphic would have been displayed. The text is displayed instead of the image only if the browser refuses to load the image. The alt="" attribute will also provide a balloon tip containing the information you specify between the quotes when a mouse is hovering over the displayed image. For example, consider the following image search specification with a newly added alt attribute to our previous logo image:

    <img src="logo.gif" width="200" height="100" alt="Web Page Logo">

Once you master adding one image to a web page, the same routine is applied for each new image to be added. When displaying multiple images, it is recommended to place the images in a table structure using the <table> tag so the images will appear exactly where they are specified to appear.

I know you have encountered a form at one time or another while searching the internet. You have probably filled out many online forms, submitted them, and never thought twice about how they actually worked. Well, the next section provides some basic but important facts concerning HTML forms. Read on for more about forms...

Move on to next topic: HTML Forms - Forming What?

Back to Top