First, put your image somewhere and tell the browser where it is
If you don't have any graphics yet, you can save the image below and experiment with it. To save it, right-click on the image and pick the Save Image... or Save Picture As... option.
Save your image in a suitable format and place it in the same directory as your webpage. You can then add it to your page using the following tag, in which image.gif is the name of the image file...
<IMG src="image.gif"></IMG>
Try this now in your test page.
You can imagine that if you have hundreds of webpages and images, having them in the same directory becomes very confusing. Because of this, before we go any further, you need to know how to refer to files in places other than in the same directory.
Lets structure our website a bit more. Say we keep all our HTML files in one directory, the www directory on our M drive...
M:\www\
We could put all our images in an images directory within this. For example...
M:\www\images\image.gif.
There are two different ways to reference this image from our HTML in the IMG tag. They are called relative and absolute references.
You would reference the image.gif file in your HTML file with the following relative tag...
<IMG src="images/image.gif"></IMG>
This is a 'relative' address. Note that the filename bit now has the directory the images are in included, but not the directory our HTML file is in. This is because the browser is going to use the position of the HTML file and look relative to it. The browser will first look in the directory it got the pages from for a directory called 'images', and then look in it for 'image.gif'. Note that you always use forward slashes in addresses. Relative addresses allow you to move your files as a block without having to change all the internal address references.
You can also reference directories parallel to each other, for example, if your text was stored in c:/web/homepage and your images in c:/web/images then you could reference the graphics from HTML files in the homepage directory with the following relative address...
<IMG src="../images/some_graphic.gif">
The '..' takes you from the homepage/ directory down to the web/ directory, from which you can go up a directory to images/ where the image file some_graphic.gif is stored.
If you know the address your graphic is going to be at, you can also put in the full or 'absolute' address for the image, for example...
<IMG src="http://www.geog.leeds.ac.uk/images/image.gif"></IMG>
Always remember to think about how your site will grow over the years and plan it appropriately now. It's very hard to change directory structures and filenames once people on the web start visiting them.
There is stuff you can do to make it easy for people looking at your images.
Images are sometimes slow to appear, so it is usual to put 'width=X height=Y' inside the image tag, where X and Y are in pixels.By putting in width and height you let the browser assign space on the screen for the image, and it can go on loading other stuff while it's waiting.
All image sizes are in pixels
Images are displayed at a size determined by the number of pixels (dots on the screen), so even if you save a gif file that's 10 cm across, if it's only 50 pixels across (a resolution of 5 pixels per cm), it will only be displayed 50 pixels wide on the final screen. Screens usually have a resolution of about 28.8 pixels per cm (72 per inch), so the same image will appear about 2cm across.
Helping people who can't see images well
Some people turn the image capacity of their browsers off if they're on a slow connection. In addition, blind people use 'speaking browsers', which read the text to them. It's worth preparing for these people by putting alt = "Text" in any image tags. Indeed, if you're making a page for a publicly funded organisation (like a University) it's now a legal requirement. The alt attribute defines a small amount of text that is used in blind browsers, shown when images aren't available, or sometimes shown when the mouse pointer is put over the image (if your browser does this, you should be able to see it when you put the pointer over the image above). Here's a reference to an image that doesn't exist...
<IMG src="some_image.gif" alt = "Photo: my girlfriend waterskiing, while competing in an watersports competition near the Japanese capital of Tokyo." width = 400 height = 45>
And the result (if you can't see any text, put your mouse over the icon)...
You can align images
To align objects in different positions around the screen, use 'align = X' in the object's tag, where you replace 'X' with 'center', 'left' or 'right'. To center a whole block of text or graphics, you can also use <DIV align=center></DIV> around the block of items.
Background images and colours
To set an image so that it is repeatedly shown behind your text as a background, put a reference to the image in your <BODY> tag, like this...
<BODY background="some_image.gif">
This is pretty hard to get looking anything but completely naff. As an alternatively you can use...
<BODY bgcolor=colour>
to set the background to a single colour (you can learn about the different available colours here). Note the US spelling.
Try saving the above image into the same directory as your index.html as brushedsteel.jpg and putting in the following reference instead of the BODY tag...
<BODY background="brushedsteel.jpg">
You should see something like this.