and here's a bit more text and then a top aligned image and then we'll have a bit more text and finally a middle aligned image You already know that you can link to an image via the anchor element, for example <A HREF="myimage.gif">Look at my picture</A>. But we'd like to do more than that, we'd like to able to include images in our actual web pages.
The IMG element is an inline element (standalone as it has no content or end tag) which can go anywhere in the document. Inside a Heading, in a link, anywhere at all. It has rather more attributes than most of the elements we've looked at so far:
<IMG SRC="myimage.gif" WIDTH="100" HEIGHT="25" BORDER="0" ALT="A picture I made" HSPACE="10" VSPACE="10" ALIGN="left">
The SRC attribute tells the browser where to find the image file. It takes a URL as it's value just like the HREF attribute of a link. The image can be anywhere on the web and the URL can be a relative or an absolute one. Note that linking to other people's images without their permission is rude, and if you pass their work off as your own, illegal.
The HEIGHT and WIDTH attributes tell the browser what size to draw the image. Normally this will be the size of the image in pixels. But sometimes you want to make the browser draw the image at a larger or smaller size - to do this just put the desired size in pixels in here. Percentages are also supported, but not reliably and so are best avoided. By including the height and width the browser can render the page quicker as it doesn't need to wait for the image to download before it knows how much space to reserve for it on the screen.
BORDER sets the width of the image around the image in pixels. The default is zero for non-linked images and two pixels for images that are linked (i.e. <A HREF="..."><IMG ... ></A>). The BORDER attribute overrides these defaults. The colour of the border will be same as normal text/link colours.
Not everyone can see images. Some people use text mode or speaking browsers, some people surf with image loading turned off, and computer programmes (like search engines robots) can only see text. For these people some form of alternative is needed to represent your image: the ALT attribute. The ALT attribute should take a short textual value which serves to replace the image when necessary. If your image is purely decorative then ALT="" is recommended.
HSPACE and VSPACE are instructions to the browser to leave that many pixels of white space to the sides (Horizontal SPACE) and above and below (Vertical SPACE) the image.
ALIGN works slightly differently to the same attribute on blocks of text. There are a number of possible values, BOTTOM, MIDDLE and TOP refer to the alignment of an image with respect to the current line of text. So an image with ALIGN="bottom" would appear with the bottom of the image aligned with the bottom of the current line of text.
Here is some text with a bottom aligned image and here's a bit more text and then a top aligned image and then we'll have a bit more text and finally a middle aligned image
You may notice that the top, bottom and middle aren't quite where you think they are. This is due to the legacy of old fashioned typesetting. It also led Netscape to introduce some more attribute values of the same nature: TEXTTOP, BASELINE, ABSBOTTOM and ABSMIDDLE. Not all browsers will support them.
LEFT and RIGHT are a bit different. They tell the image to 'float' to the left or right margin of the page and for any following inline content to appear next to it. This paragraph is an example (the image also has vspace and hspace values of 10 to stop the text running straight up against the image).
Sometimes we won't want all the following text to float alongside the image. For instance the previous sentence could fit next to the image if the browser window was wide enough but we'd rather have it start below the image. This is done with code like this: <BR CLEAR="left">.
The BR, BReak, element is a standalone element with no end tag. It inserts a line break in the middle of a block of content. The CLEAR attribute indicates that the next line should start when the LEFT, RIGHT or ALL margins are clear of floated content. Hence <BR CLEAR="left"> told the browser to start the next line when the left margin was clear, i.e. after the image.
Adding a background image to a web page is also easy. The BODY tag takes another attribute, BACKGROUND, which has as it's value the URL of an image. The background will tile to cover the whole window and will start from the top left corner. Finer control over backgrounds is possible via CSS.