Introduction to images in HTML
There are two parts to the process of using images in web pages. The first is in finding or creating the image and preparing them for the web, and the second is defining (using HTML) how the image should be displayed within the page. Here we are considering the second part; we have a separate page covering the more genaral concepts involved in handling digital images.Images as part of a web page
Images are placed within a web page with the <img> tag. They are always expanded in-situ by a browser that has the "auto-load images" option set; ie. they are in-line elements which are not automatically displayed on a new line, as you can see
in this example. If the image file cannot be found then the "broken picture" icon (or in some browsers the text defined by the "alt" attribute) is displayed in its place. The browser you are currently using does this: 
.
The <img> tag does not have a closing tag but requires a src attribute to specify the source of the image. Here is a example of an image tag with some additional attributes which are discussed below:
<img> tag attributes
We have already considered the src attribute - it can specify a local (on the same server as the page it is defined in) file or one somewhere else on the web. All the other attributes are optional. The alt and border attributes are straightforward, but you should be aware that some browsers add a border by default if no border attribute is present, so if you do not want a border it is safer to always specify border="0". hspace and vspace attributes can be used with a value in pixels to specify a clear buffer on the left and right, or top and bottom, respectively, of the image.The usemap attribute is used to identify the image as a clickable image map. This turns the image into an active graphical element which can be used to define links to other pages. We have a separate page devoted to clickable maps.
The align attribute can have a value of "left" or "right", and refers to the positioning of the image on the page. But this attribute has an additional effect; it causes the text to flow around the picture, which avoids the large areas of blank space you would otherwise get if the browser followed its default rule for handling images in-line (compare the effect with the train picture above, which creates a space between the lines of text even though the picture was deliberately chosen to not be very high, with the same image to the right). As a result this attribute is very commonly used with images in web pages.
The width and height attributes, as their names suggest, set the width and height, in pixels, of the space used to display the image, but they must be used with care. If the values are different from the real size of the picture then the browser will 'squeeze' or 'stretch' the picture as required to make it fit the size specified, which will result in a distorted image. Setting these attributes does not change the size of the downloaded picture file, so will not make it download faster. The main use for width and height is to tell the browser in advance how much room to allow for the picture; this may allow it to render the page faster or its parts in a preferable sequence.
There is another occassion when the width and height attributes are useful - when you want to efficiently specify a fixed rectangle of blank space. This is done by having a small (say 4 by 4 pixel) blank transparent picture stored as a GIF. Because it is very small it downloads very quickly. But you can control the amount of space it takes up on the screen, and therefore use it as a horizontal and/or vertical "spacer", by setting appropriate values for the width and height attributes of the image tag. This type of spacer can be very useful; for example to limit the "squeezing" of table cells which can result in an untidy thin vertical column of text. Just define your (invisible) spacer to be the minimum width which maintains the integrity of your text (and say one pixel high) and put it at the top or bottom of the cell; because pictures must be displayed whole, the cell cannot be made narrower than the width of the picture.
In the example below the image has been defined with a border and is four pixels high to show how it is placed in the cell; when used in a real situation without a border the image in entirely invisible. Here is the HTML:
and here is how it is displayed:
 Text which must not be split up |
Images as complete pages
Since the address of an image on the web is a valid URL, images can be loaded in place of the current page, or possibly more commonly in a new window or a frame, using the <a> tag with an href attribute. This allows a user to choose whether or not to download and view the image. The HTML is no different from that used to define a link to a "normal" page:
The "target" option (discussed elsewhere in relation to frames) is available to control which page, or frame, the image is displayed in; by default the picture replaces the content of the current page.
This is an example of an image in its own page. Use the browser back button to return to this page.
Previous
Next
Index
Home