Adding Images To Your Pages
Whether they are used as
illustrations on a page, as background, or as links, images can add style and pizzazz to a
site.
Everyone wants a cool site... and part of cool is incorporating
good, useful graphics. Well-used graphic images make the site more interesting, add
information, and help with navigation.
With a little forethought, you can use images that pull in quickly,
display quickly, look good, and add value to your site. On the flip side, images can also
make your site a big, unwieldy bandwidth pig.
The Image Tag (<img
src="filename.gif" align=left/right width=XXX height=XXX
alt="text">)
You add images with the image tag. The image tag tells the browser
to display a specific image at this point in the page. The image tag inserts an image and
is used just once.
The location of the image is described by its URL. For example, this
code tells the browser to insert an image called "earth.gif" into the file. The
other attributes in the image tag describe how to place the image on the page.
The image tag has six basic attributes:
- src. Source. This is the location and name of the image you
are using. As with anchors and links, use the full URL if the image is on another server.
Use relative URLs if it is within your own site. Remember that the URL must begin and end
with quotes.
- align. Alignment. You can align the image to the right or left
side of the page. You cannot center it with the align attribute. (If you want to center it
try this trick: put a center-aligned paragraph tag above the image.)
- width. Width of the image in pixels.
- height. Height of the image in pixels.
- border. Width of the border around the image in pixels. Use
the border command only when the image is also the anchor for a link.
- alt. Alternate text. This is the text that appears in a
reader's browser if the reader has his or her image loading turned off or if the browser
doesn't display graphics. You should always include some brief alternate text. Remember
that the text must be surrounded with quotation marks.
Using Width and Height Attributes:
Technically you don't have to specify the exact width and height of
your images, but you should. Specifying image width and height lets the browser layout the
page and begin displaying the text while it is still downloading the image. The reader can
start using the page immediately instead of waiting for all the images. This increases
perceived speed and makes your readers feel like your site is fast.
Specify image size in pixels. Use your graphics program to see the
size of the image in pixels. Save the image file at the exact size you want to use.
Although most browsers will scale the image if the image file and your specified size are
different, rescaling consumes computer processing time. Picture the poor reader out there
with a 486 PC and 8 megs of RAM watching the computer go chug-a-chug-a-chug-a as your
image rescales on his or her screen. It is not a pretty sight.
Back to top of
page
Using the Image as a Link
You already know how to create a hypertext link. Instead of a using
a piece of text as the linked item, you can also use an image.
To link to an image simply substitute the image tag for the text between the on and off
anchor tags. The following example shows how to link to the file "frogs.html"
using both a text link and an image link. First, we'll create a text link, like this:
Frogs are your friends.<br>
<a href="frogs.html">Look at the frog!</a><br>
Ribbet. Ribbet.<br>
which displays like this in a web browser:
Frogs are your friends.
Look at the frog!
Ribbet. Ribbet.
Using the Break Tag with an Image
(<br clear=right/left/all>)
When working with images, you sometimes want the text to follow
below the image rather than run alongside the image. The break tag <br>
lets you do this.
Usually the break tag stands on its own without any attributes.
However, the tag does offer one attributes, clear.
Clear tells the browser to display the content which follows it
below the lowest part of the image. By putting a break tag with the clear switch set after
a graphic, you ensure that the text that follows the graphic appears underneath the
graphic rather than beside it.
The clear attribute has three possible values:
- clear=left tells the browser to look to the leftmost side of
the page and drop the text below the item there.
- clear=right tells the browser to look to the rightmost side
of the page and drop the text below the item there.
- clear=all tells the browser to look to all across the page
and drop the text below the lowest item on either side.
Back to top of
page
Images
Inline Images
