| Pictures may be the element you most wish
to insert into your web pages other than text. Whether it
is a photo or a graphic image, the HTML tag to do it is
the same. Here's an example of the Img tag with
its often used key attributes:
<img src="images/officemap.gif"
alt="Office Map" width="160" height="120"
hspace="10" vspace="10" align="left"
border="0" />
The SRC Attribute
You specify the path of the image to be displayed by the
src attribute. It
can be a full URL such as http://www.website.com/images/mypicture.jpg,
or a location relative to the web page that displays the
image.
If the web page is http://www.website.com/mywebpage.htm,
then the relative path of the same image at the full URL
is images/mypicture.jpg.
If the web page is http://www.website.com/myfolder/mywebpage.htm,
then the path of the same image relative to the page becomes
../images/mypicture.jpg, where "../"
instructs the webserver to go up one folder level out of
myfolder and then
into the images folder
to obtain the picture.
The ALT Attribute
Some browsers provide users the preference of turning off
loading images, and your visitors may have chosen to do
that. If you do not want to miss out communicating a key
message conveyed by an image on your web page, you use the
alt attribute to provide
the text to be displayed by the visitor's browser.
The Size Attributes
The visitor's browser will display your web page more quickly
if you specify the image's dimensions by the width
and height attributes.
You may specify values other than the actual size to scale
the image. Normally you should not do this. Scaling up does
not improve a picture, and scaling down does not reduce
its size.
There is one important use for image scaling, however.
We have included a 1x1 pixel transparent image named spacer.gif
in each images folder of our free web templates.
The size of this file is obviously very small and has practically
zero impact on the loading speed of your web pages. We insert
it into our web pages wherever we need to introduce some
space and scale it to the necessary dimensions. It is used
at about 50 places on this web page for example. There is
one right after this paragraph to add 10 more pixels of
blank space before the bold text below, to hint to you that
the text in bold is more related to the text under it than
to those above.
The ALIGN Attribute
If you want text to wrap around the image instead of appearing
just before or after, set this attribute to either left
or right. Insert the img
tag BEFORE the text that should wrap around the image. If
you set the attribute value to left, the image
appears on the left with the text on its right. Once the
text flows past the bottom of the image, it will continue
on as usual across the full width of the text column. An
example is the cover image of the HTML book at the bottom
of this web page.
If you want to break text wrapping before reaching the
bottom level of the image and start new text under it, insert
the line break tag <br clear="all"
/> where you want the break to occur.
The Space Attributes
Very likely you don't want the image almost touching the
text that wraps around it. You can easily add comfortable
space around an image by setting the hspace
and vspace attributes.
For the cover image of the HTML book below, we have set
10 pixels for hspace and 5 for vspace.
The BORDER Attributes
If you want to add a black border around an image, include
this attribute and set it to a number above zero. The value
sets the border thickness. You may leave out this attribute
or give it a zero value to remove the border. There is a
difference between these two options, however. If you use
an image as a hyperlink label, leaving out the border
attribute will still put a blue border around the image
to indicate that it is a link. Setting the attribute to
zero removes the blue border.
Several Tips
To ensure your web pages load quickly, the first thing
you do is to optimize the images. Use the JPEG format for
photos and GIF for graphics. Do not make them bigger than
necessary.
You may enclose an image by the <p> </p> tags
to have it well separated from text above and below it.
If you simply want to add a horizontal line between blocks
of contents to introduce a more visible break, you don't
need to create an image. Just use this HTML tag: <hr
align="center" width="100%" size="1"
noshade />. This adds a horizontal rule,
1-pixel thick, across the full width of the text column,
centered and without shading. If you want the width to be
100 pixels, leave out the "%" symbol. The line
will be shaded if you leave out the word noshade.
The example tag above is used to insert the line above the
[Top of Page] link at the bottom of this web page.
|
