For example:
<img src="title.jpg">
This is refered to as a relative file name as its use assumes the image
is always in the same folder as the web page. If, as is common, the
images are kept in an 'images' sub-folder, the tag would be written
as:
<img src="images/title.gif">
The image could be on a completely different web site on the other
side of the world, in which case the full web address or URL should
be given:
<img src="http://www.gifsunlimited.com/images/title.gif">
Align
align="left" {or right, center}
For example:
<img src="title.gif" align="left">
An image can be included 'inline' with text in a web page. This simply
means that the image tag is inserted in the text where you want the
image to appear. If the 'align' parameter is included, you can dictate
how the image relates to that text:
| align="top" |
Text is aligned with
the top of the image. |
| align="middle" |
Text is aligned with
the middle of the image. |
| align="bottom" |
Text is aligned with
the bottom of the image. |
These options leave large gaps of white space on the page as images
are usually much taller than the text. It is better if text can 'wrap'
around the image. The following options provide for this:
| align="left"
|
Text will wrap around
the right side of the image and the bottom. |
| align="right"
|
Text will wrap around
the left side of the image and the bottom. |
Height, Width
height="150"
For example:
<img src="title.gif" height="150" width="200">
The height and width of an image can be given in pixels. Note - this
is not made available to 'dictate' the size of the image, but to warn
the browser of its coming. If you increase the size of an image using
this method, the quality will be very poor. If you reduce the size of
an image, you will have wasted bandwidth downloading the full image.
These parameters ensure that as the page is downloading space is reserved
for the image, and the page is not constantly reshaping and images arrive.
Alt
alt="New York skyline"
The alt parameter is designed to allow the developer to provide an alternative
to the image for browsers which do not display images. In practice it
should be used as some search engines take not of this text in building
their rankings,and as the mouse pointer hovers over an image this text
will be displayed, a possible design feature.
Border
border="0"
By default a browser displays a 1 pixel border around an image. The
border width can be increased as a design feature to eg 5 or 10 pixels.
Where the image is used as a hyperlink, the border will usually be a
distracting bright blue. It is common in this case to specify border="0".
Vspace, Hspace
vspace="10"
These parameters determine how much space (pixels) is left around an
image before text encroaches on it. Their use prevents a page having
a cluttered appearance.
An image tag with parameters might be:
<img src="title.gif" height="150" width="200"
align="left" border="0" vspace="5" hspace="5"
alt="Guide To HTML">
