Images are used in HTML documents to one: make the page visually effective and two: display information. Images are used a lot with links, which will be discussed in the next section. Although images are wonderful, a page with too many images may take time for people to load, which can be fairly frustrating, and as a business aspect, it could lose clients.
- <IMG SRC="url "> - The Image Tag. If an image is to be displayed the <IMG> tag is the one to use. However saying you want an image doesn't help much unless you say where the image i. Using SRC="url." in the image tag will tell the page where the image is. If the image is in the same directory as the page there is no need to type out the whole url of the image, just its name (and extension) will do. So <IMG SRC="goofy.gif"> will display the picture: "goofy.gif" in the current directory. If the image is not in the current directory, a full url will be needed to access it.
- <IMG .. ALIGN="?"> - Alignment. The Same way align everything else we can align images. If you wish the image be displayed in the center of the page it stands to reason that you would use <IMG SRC="url" ALIGN="CENTER">, Alternatively you could have the image the the LEFT, RIGHT, TOP, BOTTOM or MIDDLE. The MIDDLE alignment is used to center the image vertically as well as horizontally.
- <IMG .. WIDTH="??" HEIGHT="??"> - Image Size. Very often you have an image but you want it to fit into a certain space, this is where being able to size the image comes in handy. By using this you can either specify the exact size (in pixels), or you can specify it as a percentage of the page, table, or frame that it is in. By specifying the image size, you allow the page to load faster, believe it or not, and also ensure that the page set out is not changed. A missing image, or if images are turned off, could mean that your page may look completely different to what it did before. It is also required for JavaScript image swapping.
- <IMG .. ALT="text "> - Alternate Text. This is especially usefull to the user, what it does is display text where the image should be until the image is loaded, or in some cases all the time if they have turned images off. When using alternate text, it is better to have the image set to the specific size, this allows the text to be read and not just a little cross or broken picture.
- <IMG .. LOWSRC="url "> - Low Res Alternate Image. Another page load time saving tag. This allows a another image to be displayed temporarily while the other image loads. It is mainly used for older browsers (like Netscape 1.0), but with todays technology, page loading time should not really be a problem.
- <IMG .. BORDER="?"> - Image Border. Sometimes you require a border around the image for whatever reason. Sometimes you may require the border to a graphic that links you somewhere. By specifying BORDER="0" you effectively remove the border. Here the question mark represents the border thickness in pixels
- <IMG .. VSPACE="?" HSPACE="?"> - Runaround Space. The runaround space is the space (in pixels) surrounding the image. Once again you may wish to add it or remove it as the default depends on the browser. As you are probably aware the VSPACE is the space above and below the image, and the HSPACE is the space on either side of the image.
Example on graphics: Click Here to open example in an new window
The tags used will be shown in the example.
| Prev | Top | Next |
| http://htmlguide.drgrog.com/alpha/ |
Copyright © 1999 Robert Duncan |
