Web Page Design Boot Camp

  Home |  Basics |  Intermediate |  Advanced |  Tools |  Site Map    Subtopics:

Getting Graphical

They say a picture is worth a thousand words and images can enhance the visual appeal of a web page. The markup tag used to insert images in a web document is the <img> tag. In its simplest form, the tag should include the following information:

<img src="URL">

where URL is the name of the image file to be displayed by the browser. If the file is in the same folder as the web page containing the <img> tag, you would only need to give the file name. Otherwise, you need to specify the path to folder as well as the file name. Many web page designers adopt the practice of creating a folder named images to hold all the image files used on a web site. If the index page of the site used an image named clown.gif, the img tag for it would be:

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

There are some other attributes that can be used with the img tag that can be beneficial. Among them are:

height
Specified the height of the image in pixels. Web page editing software generally insert this value after you've selected the file that is being used as the src.
width
Specifies the image width in pixels. Web page editing software generally insert this value after you've selected the file that is being used as the src.
alt
Displays the specified alternate name if image loading are turned off by the browser, a feature normally used only by folks on slow dial-up connections who don't want to wait for images to load.
name
Associates a name with the screen space occupied by the image. It is generally used in JavaScript routines that swap images displayed in a web page.

If the above tag for the clown.gif file used all of the above attributes, it would look like:

<img src="images/clown.gif" width=250 height=397 alt="clown picture" name="clownpic">