 |
 |
 |
| |
|
|
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.
| 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.
General syntax for using a graphic: <IMG SRC="filename.ext">
The image will default to the left margin, unless the tag follows the text.
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.
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.
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>
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"
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 |