HTML Hyper Text Markup Language: Adding Images Using HTML

Images

Images: adding them to your page

• GIF images (they end with a .gif file extension)
• JPEG images (they end with a .jpg file extension)

The (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:

SRC="my_picture.gif">

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

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:

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

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:

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:

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

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

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:

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:

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:

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.


This text is aligned with the top of the image (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.


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


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


And this text is left of the image as the image is aligned to the right (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.