This is essential.
The value of the attribute is the URL of
the image. For example the following image
was included by the following HTML
<img src="envelop1.gif" alt="small envelope">
The value of this attribute controls the positioning of the image relative to the text. There no fewer than five standard distinct values defined in HTML 3.2 and several more non-standard values.
- top
The top of the image is aligned with the top of the current line which, might, be the top of another image. Note that this does not, necessarily correspond to the top of the text on the line, an earlier image with different alignment may well specify a new top. If the image is taller than a line of text (which is normally the case), then following lines of text will appear beneath the image, i.e. the text does not "flow round" the image.
Here's an example
of an image
presented with the align attribute set to top. You will see that
the top of the image is aligned with the tops of the letters.
There are two images in this line
and
.
The Union Jack image has default alignment (bottom) and the top
of the little envelope is aligned with the top of the Union Jack which
is the highest point on the line.
- middle
The centre of the image is aligned with the base line of the current text line.
Here's an example
showing the
effect of "middle" alignment .
Many browsers understand the non-HTML 3.2 value center as
having the same meaning as middle.
- bottom
This is the default alignment, i.e. what happens if you omit the align attribute.
Here's an example showing it in operation. The Union Jack image, which should appear on the next line of text unless you've set your browser incredibly wide, has its align specifically set to bottom.
Notice that the bottom of the image is aligned with the base line of
the text not the base of the text descenders.
- left
This alignment places the image at the left hand margin of the page with the text to the right of the image.
Here's an example.
This is the nearest normal HTML gets to flowing text around images and
the use of left (and right) aligned images is recommended for
most normal work illustrated with small in-line images.
Left and right aligned images used this way are far less disruptive of
the normal flow and presentation of text.
Some older browsers may not support left and right alignment.
By default there should be a small amount of space between the image and the text on its immediate right hand side if the text is left aligned, such space can be created by using the hspace of border attributes.
- right
This is similar to left alignment. The previous example is repeated. Note that the ragged right alignment of the text makes the use of a small right aligned image less effective than left alignment.
Here's an example.
This is the nearest normal HTML gets to flowing text around images and
the use of left (and right) aligned images is recommended for
most normal work illustrated with small in-line images.
Left and right aligned images used this way are far less disruptive of
the normal flow and presentation of text.
The same repeated with right aligned text.
Here's an example.
This is the nearest normal HTML gets to flowing text around images and
the use of left (and right) aligned images is recommended for
most normal work illustrated with small in-line images.
Left and right aligned images used this way are far less disruptive of
the normal flow and presentation of text.
The non-HTML 3.2 values texttop, baseline, absmiddle and absbottom are recognised by most browsers but the interpretations vary widely. The theory seems to be that
- texttop aligns the top of the image with the highest piece of text on the current line.
- baseline aligns the bottom of the image with the baseline of the text, excluding descenders. This should be the same as bottom unless there are other images on the line.
- absmiddle aligns the vertical centre of the image with the vertical centre of the complete line, including images. Note how this differs from middle which aligns the centre of the image with the text base line.
- absbottom aligns the bottom of the image with lowest point on the line.
The effects of the various alignments depend on the relative sizes of images and text.
If an image is being used as a link, i.e. included within <a> .. </a> tags with an href attribute then this attribute can be used to control the coloured border that will be drawn round the image.
Here's an example showing the small envelope again.
The border attribute is set to 5.
The value of the attribute is the border width in pixels.
The border can be suppressed entirely by setting the value of the border attribute epxlicitly to zero. This is useful if the image is an irregularly shaped image that merges into the background by being "transparent", however under these circumstances it is important to give users some other clue that the image is a link and can be clicked on.
In the absence of a specific setting of the border attribute
most browsers will generate a border whose width is
browser specific as is
illustrated here
The effect of using the border attribute on an image that
isn't a link is unclear.
Here's our little envelope again, this time not as a link but with
the border attribute set to 5.
These attributes can be used to instruct the browser to, effectively, expand or contract an image to a particular size in pixels. The width and height are expressed as decimal integers. The HTML 3.2 standards simply indicates that these attributes are used ot indicate the amount of space to reserve for the image, the expansion of the image to fill the space available is implicit.
On most browsers, if only one of width and height is specified the other value is automatically adjusted to preserve the aspect ratio of the image.
Here's the little envelope subjected to this treatment
with height set to 40 and width to 120.
This may be useful if you want a small image to fill a large
area but the pixels are likely to become very visible giving
a rather crude appearance.
Some browsers allow the value of the width attribute to be specified as a percentage of the window width, this results in an image whose size changes as the window size is changed. Here's an example, try resizing your browser window.
It is possible to stretch the image one way or another by changing the aspect ratio. With normal images this is not really useful however if the image is a simple block of colour then stretching it one way or the other can be used to created coloured bars without having to create and download lots of similar images. This can be used to create simple histograms in conjunction with the <table> tag.
These attributes control the total amount of space to be allocated to the image. The general effect is to put a border around an image. The values are quoted in pixels and specify the width (and height) of the border.
Here's the little envelope displayed with hspace set to 60
and vspace set to 40.
This is used to present alternative text to browsers that do not have image capability, have image capability turned off or to show what is happening whilst images are downloaded. The text is also useful for visually handicapped users and may also be of interest to searcg engine indexing programs.
The value of the attribute is simply the text. This can, most usefully, give some indication of the size and nature of the image. Many browsers will display the text when the cursor is held over the image and the mouse clicked.
This is a rather useful attribute that is not part of the HTML 3.2 standard. The purpose of the tag is to allow a "low-resolution" image to be displayed whilst the final "high-resolution" image is being down-loaded. The value of the attribute is, of course, the URL of the low-resolution image.
A typical example shows first a low-resolution monochrome image that requires a 35223 byte download, this is then overlaid with the high resolution colour image that requires a 449338 byte download. The low-resolution image was derived from the high-resolution by various pieces of image manipulation software. Seen down anything other than a very fast line this is very effective.
If your browser doesn't support lowsrc you can achieve a similar effect by combining the images in a non-looping animated GIF image. This, however, lacks the progressive rendering of the coloured image over the black and white background that makes the lowsrc version so attractive.