| Chapel, United States Naval Academy |
| Chapel, United States Naval Academy |
Well, pretty much whatever value you want to put on it. But a picture on your web page is worthless unless you can get it to show up correctly - and that's our next topic of discussion.
Web page graphics, also called images, are displayed using the IMG SRC tag, which looks like this:
Pretty straight forward, wouldn't you agree? Of course, like most other HTML tags, the IMG SRC tag has a whole slew of attributes (well, not a real slew - actually, there are only four attributes for the IMG SRC tag):
Okay, that was a trick question. But knowing how big a pixel is helps when designing a page so you can plan where to put your images. If you use a graphic editing package to do photo touchups and resizing or to draw grapics, it will tell you how big you final image is in pixels. If, on the other hand, you use graphics from a source other than yourself you'll need to know that
Another reason to use the height and width attributes is to allow the browser to predefine the page so that it can format the page more quickly while loading.
Note: While you can specify the height and width attributes for images that are larger than the size you specify, this will slow down the loading of the page
because, since you are displaying the image in a smaller area than it should occupy, the browser still has to load the whole image into memory to display it.
If you want to speed your load time, use a graphics editing package (I use PaintShop Pro) to resize the images you'll use on your page and display them full size.
You can still use the height and width attributes to help the browser lay out the page!
ALT is used to display a word or two about the image while it is loading, or in place of the image on text-only browsers. For this reason the value of the
ALT attribute should be something descriptive so that people know what they're not seeing.
VSPACE and HSPACE are used to "cushion" the image on the page, specifying how much blank space to add between the image and any wrap-around text. VSPACE adds space above and below the image; HSPACE adds space on the sides.
ALIGN=LEFT and ALIGN=RIGHT are two very useful attributes - they cause the image to be aligned with either the left or right margin of the page (like you couldn't figure that one out, right?), allowing the test to flow around the image. The image of the Midshipmen's color guard, left was done with the folowing HTML code:
Notice that the text wrapped around the image. The same thing would have happened if the ALIGN attribute specified RIGHT. However, if ALIGN had specified CENTER, the image would have been centered and the text would have started beneath it. This is demonstrated at the top of this page.
right this way!!
go ahead...follow it!
Back to Navpooh's Home Port
Back to HTML tutorial index