HTML Images

Images


In HTML you use <IMG> (image) tag. The picture itself is a separate file. The tag only points to that file, with the SRC (source) attribute. Put the image file in the same directory as your web page, to avoid problems. Otherwise your browser will not find the image and it won't show up on your screen.



It is better however to add the dimensions of the image (in pixels). The browser will make room for the image, and continue to display the rest of the page. Otherwise it woud first try to determine the size of the image, before it continues. Sometimes you don't get to see anything before all images are loaded. This may take quite a while.

The size is set with the WIDTH and HEIGHT attributes. If you don't know the size of your image, then view it in your browser. In Netscape press View|Document info. What you get is a new window, with info on the image. At the top it reads the size in pixels. Borders Many browsers show a border around the picture by default. All do when it is linked. Its width is set with the BORDER attribute. In most cases you won't want to see any border at all. Then you specify zero for border size.

Alternative text A final attribute is the ALT tag (alternative text). Some web surfers don't load images in their browser, to speed up the world wide wait. And there are some browsers which can only show text, like Lynx. Or text-only browsers for the visually impaired. Some browsers show a 'tooltip' text if you keep your mouse pointer over the image. For these cases you specify a text describing the image in the ALT tag.

body graphic

File types Only use GIF or JPEG (JPG) picture files. Not all browsers support other types. Make sure your images no larger than about 25 kilobytes. Else it will take too long to load.


Image

HTML graphic

Image with Border

HTML graphic

Linked Image

HTML graphic

Linked Image with no Border

HTML graphic


Home Forms Lists



1