Images are applied to a page using the <IMG> tag. There are lots of
wonderful things that you can do with graphics, but always remember -- don't
overdo it! Large graphics take ages to load and will annoy the heck out of
your visitors.
Note: a lot of users disabled graphics on their computers so graphics on
webpages don't download. Make sure your page is understandable without graphics.
<IMG>
Attributes of the <IMG> tag are:
SRC
ALT
Align
Width
Height
Border
HSpace
VSpace
Of these, SRC is required, while the others are implied.
SRC
This specifies the SouRCe of the picture or image to include.
SRC alwaysincludes the file name, the path name is implied. The path name
may be relative or absolute. The code is:
<IMG SRC="somepath/someimage.gif">
It's possible to specify a source file from anywhere -- just put the full
URL as the SRC:
<IMG SRC="http://www.someserver.org/directory/someimage.gif">
ALT
This tag is really important! Its purpose is to tell visitors what the picture
is if, for whatever reason, the graphic can't download. Another important
aspect is the ALT attribute is also used by special browsers for the handicapped.
Don't forget this one! Here's the code:
<IMG ALT="description">
ALIGN
You can use this to align the graphic, in the same manner that you would
format text.
<IMG ALIGN="alignment">
Choose TOP, MIDDLE, BOTTOM, LEFT or RIGHT and place it where "alignment"
is. However, these can be relative to where the text is if there's text in
the same table row or column as the picture. Therefore, it's best that you
put graphics in their own column or row so you don't get jumbled text.
WIDTH & HEIGHT
With these attributes, you can set the image to scale -- you specify how
large or small you want the picture in pixels, and the browser will scale
the picture for you. However, it's best not to shrink really large pictures
because the file size of the picture is still the same, and therefore takes
ages to load.
<IMG WIDTH=n HEIGHT=n>
Where n is, put the width and height in pixels.
Even if you aren't scaling an image, make sure the width and height are applied
to the graphic at actual size. This will help the page load faster.
BORDER
This will put a border around your image -- and if your graphic is a link,
the border will appear as the link color.
<IMG BORDER=n>
Where n is, place a numerical value in pixels. Setting n to 0 will
turn border off. Setting it to any other value will alter the thickness of
the border; 1 is narrowest.
HSPACE & VSPACE
These attributes are used to control the white space around an image.
<IMG HSPACE=n VSPACE=n>
Where n is a numerical value in pixels.
Let's move on to Links |
