logo.gif

Images: adding them to your page

You can add graphic images in two formats to your web pages:

If you need some good clip art images, check out 321ClipArt.com.

The <IMG> (Image) tag is a 'one-sided' tag and requires several attributes for successfully embedding an image on your page:

SRC=
If you have a graphic image with the filename my_picture.gif then you would enter the filename as the Value for the SRC= attribute, like this:

<IMG SRC="my_picture.gif">

WIDTH= and HEIGHT=
You can set the height and width attributes like this:

<IMG SRC="picname.gif" WIDTH="100" HEIGHT="200">

The numbers I used refer to the image size in PIXELS. The above image would therefore appear on the page as 100 pixels wide, and 200 pixels high.

ALT=
It is ALWAYS a good habit to include the ALT= attribute. Some people turn OFF their browsers ability to display pictures for faster performance, and if you do not have a text description to replace the graphic, they won't be able to do or see much on your site. This is especially important if you have a menu built with graphic menu choices.

Put your mouse over the image below and watch what happens:

Testing the ALT text trick

A little box comes up with the text I specified in the image's ALT= attribute. This is how you would code it:

<IMG SRC="sample.gif" WIDTH="140" HEIGHT="64" ALT="Testing the ALT text trick" BORDER="0">

BORDER=
You can specify that your image be displayed with or without a border by adding a simple BORDER= attribute, like this:

<IMG SRC="picname.gif" WIDTH="100" HEIGHT="200" ALT="This is a test" BORDER="0">

BORDER="0" tells the browser not to use a border. (technically you are telling the browser to display the graphic with a border 0 [zero] pixels wide) If I wanted to use a border I could use a 1 instead of a 0 (zero) like this:

<IMG SRC="picname.gif" WIDTH="100" HEIGHT="200" ALT="This is a test" BORDER="1">

Try using a 2 or a 3 instead of a 1 and watch the results.

Image Dimensions: how to find out what they are

You can usually check the dimensions of your images in a graphic editing program of some sort, like Paint Shop Pro, or Adobe Photoshop. Some browsers will even show you the dimensions of the image, in the title bar, if you use the browser to view your image. Just type in the path and filename of the image in your browser's address bar:

c:\pictures\my_picture.gif

Changing Image Size

HTML allows you to specify any dimensions you like IN THE TAG. The image itself may well be 200 pixels wide and 150 pixels in height, but you can tell the browser to display bigger or smaller just by adjusting the size in the Tag attribute code.

To illustrate this, here is a sample image and it's coding:


<IMG SRC="sample.gif" WIDTH="140" HEIGHT="64">

This image is 140 pixels wide and 64 pixels high. This is what it tells me in my image editing program.

Now let's just change the number values in the WIDTH= and HEIGHT= attributes and see what happens:


<IMG SRC="sample.gif" WIDTH="200" HEIGHT="100">

In this example all I have done is changed the coding. I have simply told the browser to display the image in the dimensions I have chosen. If the file was 15k to start with, it will remain as a 15k filesize. The only thing that changes is the displayed dimensions.

PLEASE NOTE: It is important to note that arbitrarily changing the dimensions can drastically degrade the image quality very badly (as you can see above). If you need to make major changes to the size of a graphic, change the dimensions in your image editor and re-save the graphic with the new dimensions.

Aligning text beside an image

By adding the ALIGN= attribute to your Image tag, you can align text around your image. This is how you would code the ALIGN attribute in your tag:

<IMG SRC="sample.gif" WIDTH="200" HEIGHT="100" ALIGN="left"> This is where your text would go and the aligning would occur automatically since it is already coded into the image tag.

Correct Value's for this attribute are: "bottom", "top", "middle", "left" and "right" as shown below:

SampleImage By default the text is aligned to the bottom of an image. You can see where it starts and how it wraps around the image. There is no need to use ALIGN=BOTTOM since it is the default setting.


SampleImage This text is aligned with the top of the image (<IMG SRC="image.gif" ALT="SampleImage" ALIGN=TOP>). Notice how the browser aligns only one line and then goes down to the bottom of the image for the rest of the text.


SampleImage And this text is centered on the image (<IMG SRC="image.gif" ALT="SampleImage" ALIGN=MIDDLE>). Only one line of the text is aligned in the middle, and the rest drops down below the image.


SampleImage The text here wraps all along the right side of the image since the image is aligned to the left of the text (<IMG SRC="image.gif" ALT="SampleImage" ALIGN=LEFT>). All the text is right until it completes it's span of the image and then it wraps under the image.


SampleImage And this text is left of the image as the image is aligned to the right (<IMG SRC="image.gif" ALT="SampleImage" ALIGN=RIGHT>). All the text is left until it completes it's span of the image and then it wraps under the image.

Using this method of aligning is handy if you have small descriptions, or commentary to add to an image, but for much more precise placing of text blocks around your images you should consider using Tables.


Now that we have covered the very basics of page content, let's go have a look at some of the other tags you can use to spice up your page:

~~~~~ On to "Miscellaneous Useful Tags" ~~~~~