Professional Development Committee, Spring Technology Workshop
The Elements of Creating a Web PageHomePreviousNext

Introduction

Planning

Whole site design

Page design

Color and Graphics

  • Formats
  • Browser safe color
  • File size
  • Using GIFs
  • Image maps

    Implementation

    Promotion

    Innovation

    Site map


  • Color and Graphics Using GIFs

    Use the ALT element
    Remember to include the ALT element within the <IMG> tag to provide a textual label for the graphic.

    Use height and width elements
    These attributes are important because they allow the browser to allocate sufficient space for the image without having to wait for the image to completely download before beginning to display the text on the page. Also gives the user a chance to see the overall dimensions of the image before deciding to wait for the page to download completely.

    Transparent and interlaced GIFs
    A "transparent" GIF is an image with a transparent background. Transparency makes the image appear to float on your web page. GIF editor software that supports the GIF89a standard will probably provide a way to add transparency.

    Interlaced GIFs
    An interlaced GIF, instead of being transmitted and displayed top-to-bottom like a normal image, is first displayed at its full size with a very low resolution, then at a higher resolution, until it finally attains a normal appearance.

    Avoid animated GIFs

    Single pixel GIF trick
    The single pixel GIF is a clear GIF one pixel in size. Reference it with the <img> tag, using horizontal and vertical space attributes to make a clear rectangle of any size to use as a spacer.

    If I wanted a pixel GIF 5 pixels wide the HTML would be:
    <IMG hspace=5 SRC="pixel.gif">

    If I wanted a pixel GIF 5 pixels wide by 2 high, the HTML would be:
    <IMG hspace=5 vspace=2 SRC="pixel.gif">


    Comments? Contact:
    Julie Wetherill
    Copyright 1998, Harvard University. All rights reserved. Revised March 1998TopPreviousNext