HTML - pictures
introduction
software
tags
basic page
text
layout
< pictures >
background
text color
hyperlinks
quick recap
tag overview
publishing
promotion
epilogue
 		      Sofar we have only looked at text. Very nice, but your page still looks a bit barren, if not boring. We are going to try putting a picture on the page. 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.

    <IMG SRC="mandela.jpg">

    Portrait of Nelson Mandela

Image size
    You could suffice in only stating the file name. 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. You can also determine the size with most graphics editors and viewers.
    <IMG SRC="mandela.jpg" WIDTH="140" HEIGHT="185">
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.

    <IMG SRC="mandela.jpg" WIDTH="140" HEIGHT="185" BORDER="0" ALT="Portrait of Nelson Mandela">
File types
    Only use GIF or JPEG (JPG) picture files. Not all browsers support other types. You can easily convert different file types with graphics editor or viewer. Make sure your images no larger than about 25 kilobytes. Else it will take too long to load.

How to get pictures
    Where do you get pictures? Easy. Any picture shown in your browser can be downloaded. Point your mouse to it, press the right button, click save image in the mouse menu, and save it to your harddisk. But don't just use any image. Keep copyright matters in mind. You can find enough pictures you are allowed to use. There are a lot of sites with collections of free graphics.
    TIP: Should you want to copy your desktop, you don't really need screen capture software. Just pres your PrntScrn key, and it will copy your desktop to the windows clipboard. Simultaneously pressing the Alt key will copy only the topmost window. To use this clip you can paste it into any graphics editor, like IrfanView, and save it as a graphics file.