About the Internet
About Web Browsers
Why Domain Names
HTML vs XHTML
Making Webpage Files
Naming Webpage Files
About HTML Tags
Basic HTML Page
DTDs and Doctype Tags
Spaces and New Lines
Bold, Italics, More
Comments in HTML
How to Add Images
Sources of Images
Image File Formats
Color in HTML & CSS
"Web-safe" Color Chart
Formatting with Tables
Intro to CSS
Ways to include CSS
Some Useful CSS
CSS Hover for Links
Promoting Your Site
Adding images to your page
<img /> tag
The basic tag to put an image into a web page is :
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.
The text you put in the alt tag is what shows up:
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 img attributes
These can be useful, but nowadays it may be better to use CSS padding and positioning.
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 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.