Alternate Text
You have to keep in mind that some people have graphics turned off because they can save a lot of time by not waiting for images to open. Also, there are some people using browsers that cannot display graphics. Therefore, you should always include alternate text to be shown when the image isn't shown. In the most popular browsers, the alternate text is also displayed in a pop-up box (or "tool tip") when the visitor places the mouse cursor over the image.
The alternate text is simply a brief description of what the image is. In this case the image is a "smiley face".
 <IMG SRC="smiley.gif" ALT="smiley face">
Image Dimensions
Two more very important attributes are for specifying the dimensions of the image. When you tell how wide and how high the image is, the browser can display the entire page before loading the images. The visitor will then be able to start reading the text on the page while the images open. If you do not specify the dimensions, the browser has to scan the image, figure out the dimensions, make a place holder, and only then can the rest of the page be displayed in Navigator. In Explorer, the page will be displayed, but the text will jump all around while the images load, causing the readers to lose their place, which is very annoying. The page will take the same amount of time to load, but since the text can be displayed if you specify the image dimensions, doing so will give the appearance that your page opens quicker. To say it in other words, the page won't load faster, but the page will be displayed sooner, enabling the visitor to start reading the text while the images load. That is why it is important to specify the dimensions of an image.
You have three ways of finding the dimensions. The easiest is to write your pages in an HTML editor, such as Arachnophilia, and when you want an image you can click a button and the dimensions are automatically included inside the image tag. Another option is to open the image in the browser Netscape Navigator. The width and height would then be displayed in the title bar. If you have image-processing software, such as Paint Shop Pro or Photoshop, then you can use the program to open the image and find the dimensions.
<IMG SRC="smiley.gif" ALT="smiley face" WIDTH=35 HEIGHT=34>
Border
If you make an image to be a link, you will see a blue border around the image, which you may find annoying. The way to get rid of this border is to set the border to zero pixels. You can put a border around an image even when it isn't a link. In Netscape and IE4, the border is the same color as the text, but invisible in earlier versions of Explorer. Opera displays the border like a table border.
This image has a blue border, while the image below does not.
<IMG SRC="smiley.gif" ALT="smiley face" WIDTH=35 HEIGHT=34 BORDER=0>
<IMG SRC="smiley.gif" ALT="smiley face" WIDTH=35 HEIGHT=34 BORDER=3>
Alignment
I am sure you have noticed that only one line of text is directly next to an image, positioned at the bottom of the image. With the ALIGN attribute, you can position the text at the top, middle, bottom, or wrapped around either the left or right side. There is no attribute that will allow text to be wrapped around both sides of an image.
<IMG SRC="smiley.gif" ALT="smiley face" WIDTH=35 HEIGHT=34 ALIGN=TOP | MIDDLE | BOTTOM | LEFT | RIGHT>
| This image has align set at "top". |
This image has align set at "middle". |
This image has align set at "left". |
This image has align set at "right". |
Spacing
You can control how much space is in-between the image and surrounding text.
- HSPACE=?
- Specify in pixels the amount of horizontal space on the left and right side of the image.
- VSPACE=?
- Specify in pixels the amount of vertical space on the top and bottom side of the image.
<IMG SRC="smiley.gif" ALT="smiley face" WIDTH=35 HEIGHT=34 ALIGN=LEFT HSPACE=? VSPACE=?>
| HSPACE=10 |
VSPACE=10 |
BOTH |
| You don't have to read this. I could go on and on saying ablsolutely nothing at all just to get text to wrap underneath the image at most resolutions. |
You don't have to read this. I could go on and on saying ablsolutely nothing at all just to get text to wrap underneath the image at most resolutions. |
You don't have to read this. I could go on and on saying ablsolutely nothing at all just to get text to wrap underneath the image at most resolutions. |
Now that you have the image placed on your page, be sure to upload the image to your directory when you upload your page.
Last Modified: Monday, 19-Feb-01 11:06:38 PST
Page URL: http://geocities.datacellar.net/SiliconValley/Vista/2823/htmlchp4.html
| 
Remember that file names are case sensitive. If you have an image named "smiley.gif" and try to display it as "Smiley.gif", "SMILEY.gif", or "smiley.GIF", that image will not show. You must reference it as "smiley.gif". To help keep things straight, try to keep all file names in lower case.
