Adding images to your page
<img /> tag
The basic tag to put an image into a web page is :
<img src="nameofyourimagefile.gif" height="100" width="100" alt="Sensible description of your image." />
src
The actual path and filename of your image file. Write the file location the same way you would if you were linking to it, except as the src attribute of an img tag instead of the href attribute of an a tag of course.
This means if the image is on another server you will need to use the entire URL (eg: http://www.domain-of-image.com/path/image.gif ). Usually you should avoid pulling images off of other servers. It slows down load time and if you don't have permission from the other site they could get angry at you for stealing bandwidth and remove the image or replace it with something you don't want.
height & width
Use the actual height and width of your image in pixels.
While the browser will load the page and the image with out these, it is better to always use them. If you specify height and width Netscape will save space for the image and continue to load the rest of the page. If you don't specify it, the page seems to take longer because Netscape won't show anything else until the image has completely loaded and it knows what size it is. IE will continue to show text while the image loads, but stuff on the page jumps around strangely as the image loads.
Putting the wrong height and width will cause the browser to force the image into those dimensions. This is usually a bad thing. If you want the image to be smaller, resize it in a graphics program so that the actual file size is smaller. If you make the image larger using html the quality diminishes. Note the pixelation of the vine on html miracle-gro. A more finely detailed, rounder image or a photograph would be very ugly like this. See what it does to the circle below, when it is resized to 2 and 3 times larger than its real size.
The exception is when you have a small solid color gif, and you resize it to make a line or block of color.
alt
The text you put in the alt tag is what shows up:
- If the user's browser does not do graphics or if graphics are turned off; maybe a text-only browser or screen reader for the blind.
- While graphics are still downloading and aren't ready yet.
- In the little yellow box that shows up when you put the cursor over graphics when using certain browsers on a PC.
- They are also read by some search engines in their attempt to discover what a page is really about.
Make the alt text descriptive of your image. If you don't have anything useful to say in the alt tag, it is best to make one that just says alt="" with nothing between the quotes. Look at the source of this page and see what I've said for alt text on these images.
Other useful img attributes
align
To make text wrap around an image you need to add an align attribute to the image tag. align="right" will put the image to the right side of the text and align="left" will put it to the left. If you want text inbetween two images, first put the one that is aligned right, then the one aligned left, and then the text that goes in the middle.
If the image is align="top"
then the top of it is lined up to the top of the text.
If the image is align="bottom"
then the bottom of it lines up to the bottom of the text.
If the image is align="center"
then it puts its center at the bottom of the text
These alignments are very quirky though. If these three lines were on the same line they won't work right. I very rarely use these, but I use "right" and "left" all the time.
hspace, vspace
hspace stands for horizontal space, with it you can set how much space there is on the sides of an image before the text or next image.
vspace stands for vertical space, with it you can set how much space there is on the top and bottom of an image before the text or next image.
Using image as a link
To use an image as a link, all you have to do is place it between a link <a href=....> tag and a </a> tag. You may place text within the same a href tag if you wish. Be extra sure to use useful alt text for an image used as a link.
There will be a border around the graphic in the same color as your links are when you use it as a link. If you don't want the border you will need to add border="0" inside the image tag.