The example I am going to use is an image called logo.gif, width of the image is 126 pixels wide, and the height is 50 pixels high.
The example is in 'red'.

(note: name is the name of your image, and if the image has the .gif extention, then the name of the image will be name.gif)

If this image is to be used as a hyperlink and you don't want the line to show around the image, add the following:

back to top

Next you need to add the width and height tags so the browser knows how much space to leave:

back to top

Don't forget to add the ALT tag, this is for those who have images turned off or for some other reason the picture can't be loaded:

If the image does not load then the text specified within the ALT= quotes will show instead.

back to top

This is a great way to get those images where you want them on the page.

All you need to do is add the ALIGN="left/right" attribute or the <CENTER></CENTER> tag to the <IMG SRC> tag.
(note: left or right)

Here I will be using the logo.gif image again.

EXAMPLE:

EXAMPLE:

EXAMPLE:

back to top

To align your text nicely next to the image, you can use the ALIGN attribute that we used in the previous examples.
To have the text start under the image, then you need to put a <BR> or <P> tag after the <IMG SRC> tag.
If you type the source and then the text without using the <BR> or <P> tags, it will look like this:

EXAMPLE: For Align LEFT

<IMG SRC="logo.gif" BORDER="0" WIDTH="126" HEIGHT="50" ALT="this is my logo image" ALIGN="left">

This is one of my logo's for my home at Geocities. I am situated in the 'Silicon Valley' Lakes District and my home number is 3055. The effects in this logo were created by using 'Filter Plugins' and the Paint Shop Pro graphics program. If you visit the 'Graphics Section' of this Site, you can see many links to great Sites that offer tips and tricks using Paint Shop Pro.

Notice how the words also continue below the image.

EXAMPLE: For Align RIGHT

<IMG SRC="logo.gif" BORDER="0" WIDTH="126" HEIGHT="50" ALT="this is my logo image" ALIGN="right">

This is one of my logo's for my home at Geocities. I am situated in the 'Silicon Valley' Lakes District and my home number is 3055. The effects in this logo were created by using 'Filter Plugins' and the Paint Shop Pro graphics program. If you visit the 'Graphics Section' of this Site, you can see many links to great Sites that offer tips and tricks using Paint Shop Pro.

VSPACE="?" = the amount (pixels) of 'Vertical space' between the image and the text.
HSPACE="?" = the amount (pixels) of 'Horizontal space' between the image and the text.

Notice in the images above how the text is close to the image, well to provide a gap between both image and text, we will use the VSPACE and HSPACE attributes.

EXAMPLE: For Align LEFT using VSPACE and HSPACE

<IMG SRC="logo.gif" BORDER="0" WIDTH="126" HEIGHT="50" ALT="this is my logo image" ALIGN="left" VSPACE="10" HSPACE="10">

This is one of my logo's for my home at Geocities. I am situated in the 'Silicon Valley' Lakes District and my home number is 3055. The effects in this logo were created by using 'Filter Plugins' and the Paint Shop Pro graphics program. If you visit the 'Graphics Section' of this Site, you can see many links to great Sites that offer tips and tricks using Paint Shop Pro.

There are different ways that you can also display the text next to the image.
If we put a <BR> or <P> tag after the <IMG SRC>, then the text will begin below the image.
The <BR> and the <P> tags can be used like you would when typing text:

EXAMPLE: Using <BR>

<IMG SRC="logo.gif" BORDER="0" WIDTH="126" HEIGHT="50" ALT="this is my logo image" ALIGN="left" VSPACE="10" HSPACE="10">

This is one of my logo's for my home at Geocities.<BR>
I am situated in the 'Silicon Valley' Lakes District and my home number is 3055. The effects in this logo were created by using 'Filter Plugins' and the Paint Shop Pro graphics program. If you visit the 'Graphics Section' of this Site, you can see many links to great Sites that offer tips and tricks using Paint Shop Pro.

EXAMPLE: Using <P>

<IMG SRC="logo.gif" BORDER="0" WIDTH="126" HEIGHT="50" ALT="this is my logo image" ALIGN="left" VSPACE="10" HSPACE="10">

This is one of my logo's for my home at Geocities.<P>

I am situated in the 'Silicon Valley' Lakes District and my home number is 3055. The effects in this logo were created by using 'Filter Plugins' and the Paint Shop Pro graphics program. If you visit the 'Graphics Section' of this Site, you can see many links to great Sites that offer tips and tricks using Paint Shop Pro.

EXAMPLE: Using <BR CLEAR=ALL>

This attribute will allow you to start more text below the image.

<IMG SRC="logo.gif" BORDER="0" WIDTH="126" HEIGHT="50" ALT="this is my logo image" ALIGN="left" VSPACE="10" HSPACE="10">

This is one of my logo's for my home at Geocities.<BR CLEAR=ALL>
I am situated in the 'Silicon Valley' Lakes District and my home number is 3055. The effects in this logo were created by using 'Filter Plugins' and the Paint Shop Pro graphics program. If you visit the 'Graphics Section' of this Site, you can see many links to great Sites that offer tips and tricks using Paint Shop Pro.