HTML introduction
images
Once upon a time the web was text only. Really. Today not only are pictures standard but sound, video, animation, forms and interactive pages are common. To put images on your web is a relatively simple affair, and often the hardest part is making sure your picture is in the right format, and size, for the web.
formats
There are three standard graphics formats for the web today, gif (pronounced 'gif' or 'jif'), jpeg (prounced 'j-peg' and png (pronounced p-n-g or ping). All are acronymns - Graphic Interchange Format, Joint Photographics Expert Group, and Portable Network Graphics respectively. While either can be used, the format chosen should depend on the nature of the image (see file size, below).
When discussing graphics, and file formats, all that is being talked about is the particular way the computer (and/or programs) saves the information, and importantly, the way a browser is able to interpret this information and turn it into a picture. There are dozens of graphics file formats in computer land, and it is sort of efficient to limit this to a couple for the web (though a new one is being developed, called png, which combines the best of both existing formats).
Therefore no matter what format your image starts out as (for example if you use the scanner in the Lab it will probably be a tiff or a pict file) it must be either in gif, jpeg or png format before you put it on the web. It is relatively straightforward exercise to convert an image file, though there are some tricks to preserving as much image quality as possible.
size
Apart from file formats the single biggest issue relating to images is their file size. This is because the image must come down the Internet like the web page itself, and if you are not careful about the size of your graphics your page will take forever to load, and noone will hang around to see if it was worth it.
This is a crucial part of designing and writing for the web, and is as significant as writing in a manner that is appropriate for hypertext. It is not only an issue of making your pages 'useable' - which is the same as readable, but requires an understanding of the technologies involved and their limitations. Indeed, it is often around issues of the use of images that most separates the web from other modes of publication, simply because of the bandwidth issue. However, while this is a limitation, it should be considered as one of the design conditions of the medium (just as having enough light to shoot in is a 'limitation' of making films). As suggested
, a page should be approximately 60K size in total, and this includes text and all graphics. This is one of the reasons why this page uses the same image twice for an example, as once it has been downloaded its reuse does not mean it needs to be downloaded again.
placing the image
Images are 'placed' in web pages by the use of tags. This shouldn't be surprising as it is how all of HTML works, but it means that images are not 'included' in or on a web page. This means that your images are stored as files and loaded separately from your text. This lets the one image be used many times on one or more pages, which is an unusual concept at first but extremely efficient. It can also make life faster since once an image is loaded it does not need to be retrieved again from wherever it came from, the browser 'knows' that it already has the image and just 'repeats' it.
To place an image you need to know its URL, since the tag that is used simply tells the browser to put the picture located here on the page here. This means, literally, that a web page can 'contain' graphics that reside on a server anywhere else.
The tag used is <img src="url of image">. The URL can be absolute or relative, and this is the simplest version of it. It can also include the 'height=height in pixels' and 'width=width in pixels' elements, which tell the browser how much screen space the gaphic will occupy, and PageSpinner will put these in for you automatically.
Hence this graphic:
Looks like this in html:
<img src="/admin/images/greylogo.jpg" alt="RMIT Hypertext logo" width="120" height="30" vspace="12" hspace="12" align="left">
The img part means it is a graphic (image), src points to a relative url for the image, alt is text that appears in place of the image, width is the width of the image in pixels height is height in pixels, vspace refers to vertical space around the image (in pixels) and hspace to horizontal space, align left means put graphic on left and wrap text to right. Align right is also a possibility.
This image:
has the <img src="http://www.rmit.edu.au/images/rmit-tl.gif" width= height= > tag. You will notice that while it is a relative URL it is from the top of the web server (you can tell this because the URL starts with the backslash).
To make the image a clickable image, just like a hypertext link, you do the same as you do with words, you surround the image with a href tag:
which looks like: <a href="http://www.rmit.edu.au/"><img src="http://www.rmit.edu.au/images/rmit-tl.gif"></a>
Finally, the box that is drawn around the graphic shows the reader that it is a link. If you do not want to box to appear include border=0 element in the tag. In the example above it would look like: <a href="http://www.rmit.edu.au/"><img src="http://www.rmit.edu.au/images/rmit-tl.gif" border="0"></a>
If it isn't obvious that the image is a link you should leave the border attribute as its default (off), so that readers know it is in fact a link.
index
| 
