HOME PAGE CONSTRUCTION
(CSC2991)

USING GRAPHICS

Use graphics when appropriate, but sparingly, to:

break up large amounts of text.

replace long passages of text (use a graph, for example to summarize data).

attract attention.

show something that would be difficult to describe.

However:

Graphics load slowly, compared to text.

Not everyone uses a graphical browser.

Colors may not be accurately reproduced.

GIF v. JPEG

CONSIDERATIONS GIF JPEG OUTCOME
   Speed TIE
   Browser Support GIF (by a nose)
   Colors 256 16.7Meg Meg GIF (usually),
JPEG ( for scanned images)
   Transparency * GIF
   Display Interlaced Progressive

* One particular color in the image is ignored, and the background color shows through. (Specify the background color as "Transparent Index".  Graphics programs vary as to how this is done.)

GIF files are usually preferred, but use whichever format your file is in.  Converting usually produces degradation - sometimes to a significant degree.

THE <IMG> TAG

General syntax for using a graphic: <IMG SRC="filename.ext">

The image will default to the left margin, unless the tag follows the text.

POSITION ATTRIBUTES FOR THE <IMG> TAG

TOP - The top of the first line of text will be aligned with the top edge of the image. Note that the second line goes here.

MIDDLE - The base of the first line of text will be aligned with the middle of the image. Note that the second line goes here.

ABSOLUTE MIDDLE -  The middle of the first line of text will be aligned with the real middle of the image. Note that the second line goes here.

BOTTOM - The base of the text will be aligned with the base edge of the image. Note that the second line goes here.

Wrap Around - Text can be made to wrap around an image very easily.  The image can be on either the Left-hand side or the Right-hand side of the block of text.  Because of the way the second line is handled, you should probably try to stick with a single line of text.  If a second line is absolutely necessary, using the bottom position usually seems to look best.

SCALING IMAGES

You can alter the size at which the image displays on the viewer's browser by changing the HEIGHT= and the WIDTH= (as measured in pixels).  Note that this will not change the size if the file.  It will only change the size of the image on the viewer's screen.

CLICKABLE IMAGES AS LINKS

You can also make the image a clickable image.  When the viewer clicks on it, he/she will see the full size image.

Use something like: <A HREF "AN URL"><IMG SRC="filename.ext"></A>

BACKGROUND IMAGES

You can spice up your page by specifying an image file to be used as your background. It will be seamlesly tiled as necessary to completely fill the screen. To specify a particular graphic as the background image, use the BACKGROUND attribute after the <BODY> tag:
BACKGROUND="filename.ext"

THE <ALT> TAG

Some people (poor souls) do not have graphical browsers, and some people with slow modems disable the automatic-loading-of-images feature to reduce download times. You may want to consider adding a text description of the image that only those poor souls will see.
Syntax:
<IMG SRC="file:///C|/dir/filename.ext" ALT="Whatever text you wish to provide.">

ADMINISTRIVIA

                                                                 
        Home       Syllabus         Day 1         Day 2         Day 3         Day 4

RESOURCES

                                                                 
  Resource List          Graphics4U    Backgrounds  Browser Images    Email Images  HPCBookmarks

INSTRUCTIONAL PAGES

                                  
         Lists  Manipulating
     Images
      Tables