How to Place Images into a Webpage

Section 1 - Types of Images
Section 2 - Placing an Image.
Section 3 - Using Images as a background.
Section 4 - Using Images as a bullet.
Section 5 - Using Images as a Horizontal Rule.
Back

Section 1 - Types of Images

There are several types of images available to use on a webpage. However, the two universal standards are JPEG Bitmaps and CompuServe Bitmaps (commonly known as GIF). Each has its own advantages and disadvatages.

JPEG: The JPEG is a compressed photographic quality image. They are capable of a full spectrum of color, and can be very high quality, depending on the variable compression.

No Compression (7.40 KB)	20% Compression (2.82 KB)	70% Compression (1.30 KB)

GIF: The the CompuServe Bitmap (GIF) is also compressed image. It can only have 256 colors per image, and has only one compression ratio. However, it is capable of transparent backgrounds and animations. The GIF format is copyrited by CompuServe, and thus, GIF writing programs are never free.

Normal GIF (3.20 KB)	Transperant GIF (3.21 KB)	3-frame Animated GIF (8.26 KB)

Section 2 - Placing an Image.

To place an Image, simply insert the following code into your page:


        <IMG SRC="URL to image" WIDTH="width in pixels" HEIGHT="height in pixels"  ALT="Text description for those not capable of viewing images">

Section 3 - Placing Images as a background.

To use an image as your pages background, make your <body> tag look like this:


        <BODY BACKGROUND="URL to image" BGCOLOR="color similar to your image">

It is important to include the BGCOLOR, so that those not capable of graphics can still see your text easily.

What if your background makes your text difficult to see, but you would still like to use it? There is still hope. You may notice that on this page, the text is on black background, with the imaged background bordering it. This is used by wrapping a table around your page's content, like so:


        <BODY>

          <TABLE border="0" cellpadding="10" cellspacing="0" width="100%" bgcolor="A solid color that contrasts your text">

            <TR>

            Page Content

            </TR>

          </TABLE>

        <BODY>

Section 4 - Using Images as bullets.

To use an image as a bullet, you must first have a small image. You could shrink a large, but this usually has a less than useful effect. Once you have your image, enter the following code (be sure to place the space before you start your text):


        <IMG SRC="URL to bullet image" WIDTH="12 (or your font size)" HEIGHT="12 (or your font size)"  ALT="*"> Text<BR>

An example can be found in the list at the top of the page.

Section 5 - Using Images as Horizontal Rules.

To use an image as a Horizontal Rule, you need a short, wide image. Once you have your image, enter the following code:


        <DIV align="center">

        <IMG SRC="URL to HR image" WIDTH="width in pixels" HEIGHT="height in pixels"  ALT="70 underscore ( _ ) characters">

        </DIV>

The bars between sections are examples of images as horizontal rules.

You have now learned enough about images and their uses to begin your own creative designs. To go back, press the back image.