More on Images in Web Pages:

Images are used a lot on web pages.  However, be
careful not to use too many of them or to use really
large images on a web page as it can make the page
slow to download.

Images can be included with a line of text. For 
example, you might use:

 <H2><IMG SRC="harley.gif">Motorcycle Web Page</H2>

You can also use an ALIGN attribute with the IMG tag to 
specify whether the image should align with the TOP, 
MIDDLE, or BOTTOM of the current line. Here is an 
example, with the image used as a link:

 <P><A HREF="index.html"><IMG SRC="uparrow.gif" 
 ALIGN=BOTTOM></A>To home page</P>

HTML 3.2 added a Netscape extension that allows one to 
wrap lines of text next to an image. HTML 2 only 
allowed one line of text beside an image.  The 
attributes are LEFT and RIGHT, with LEFT aligning an 
image to the left margin with text to its right. Here 
is a brief example:

 <H2><IMG SRC="honda.gif" ALIGN=RIGHT 
 ALIGN=MIDDLE>Fred's Hondas</H2>
 <P>See Fred for a great deal on an automobile! New, 
 used, and leased Hondas are available. Repair shop is 
 open from 9 am to 7 pm, Monday through Friday.
 </P>

It also makes sense to provide something in place of
your images for users whose browsers don't handle graphics.
For example, the blind might use a simple text-based
browser such as lynx. If you design an Intranet for a 
company with blind employees, you may be required to 
make the Web pages accessible to these employees. (I 
don't know the details of the law, but the Americans 
with Disabilities Act may apply.) Here is how you use 
the ALT attribute to specify an alternative to an image:

 <P><A HREF="index.html"><IMG SRC="uparrow.gif" 
 ALIGN=BOTTOM ALT="[up arrow]"></A>To home page</P>

In a text-only browser, this might appear as:

[up arrow] To home page

The [up arrow] would be a clickable link.

To see how a web page looks in a text-only browser, log
into the Linux machine and try lynx.  You can start it
with a command of the form:

lynx URL

Fill in the desired URL, of course.

Note that small images generally load faster than large 
ones. If your page takes people 5 minutes to load, they 
may well give up before ever viewing your page.

One good technique is to provide a small image on your 
main web page, but make it a link to a larger picture 
of the same thing.  Let's use our honda page again:

 <H2><A HREF="bighonda.gif"><IMG SRC="smallhonda.gif" 
 ALIGN=RIGHT ALIGN=MIDDLE></A>Fred's Hondas</H2>
 <P>See Fred for a great deal on an automobile! New, 
 used, and leased Hondas are available. Repair shop is 
 open from 9 am to 7 pm, Monday through Friday.
 </P>

The link is the small honda image. Clicking on it jumps 
to a new screen that displays the large image. Such an 
image is called an external image to distinguish it 
from the inline images that IMG SRC gives.

You can also tell users exactly what they will get as 
in this example:

 <H2>Fred's Hondas</H2>
 <IMG SRC="smallhonda.gif">
 <UL>
    <LI><A HREF="bighonda.gif">Honda image
       (160K GIF file)</A>
    <LI><A HREF="bighonda.jpg">Honda image
       (80K JPEG file)</A>
 </UL>

This assumes that you have large GIF and JPEG images of
your honda. The user can then click on either line to 
jump to a screen that displays the desired image.

My home page on the Linux server has a little of the 
above type of thing. An older version used this:

 <P><A HREF="bighook.gif"><IMG SRC="hook.gif" 
 ALIGN=RIGHT ALIGN=MIDDLE
 ALT="[fractal image]"></A>
 Office location:  Physics 201<BR>
 Phone extension:  2416<BR>
 Email address:  carlsond@stvincent.edu</P>

Note that a small hook-shaped fractal image is used as 
the link to a larger version of the same image. The 
small image is also aligned to the right of the text in 
this paragraph. For text-only browsers, the small image 
would be replaced by [fractal image].

At the end of my old home page was an icon that one could
click on to return to the top of the page. The icon was
the link to be clicked on. It was aligned even with the 
bottom of the text: Return to the top. Note that text-
only browsers would display [go back icon] instead of 
the actual icon.  The following shows the html that was
used to give this:

 <P>
 <A HREF="#Top"><IMG SRC="/icons/back.gif" ALIGN=BOTTOM
 ALT="[go back icon]"></A>Return to the top
 </P>