Including Images
They say a picture is worth a thousand words....
There are two parts to including images in your document.
Getting the Image
The first part is the hard part. So, we are mostly going to ignore it. Note: This topic will be covered in detail in a 'graphics for the web' seminar. Basically, this is the part where you take an image (somehow....) and turn it into a file (in the appropriate format, of course).This includes: downloading the image from an on-line archive; copying it from a CD-ROM of clip art; creating it yourself by hand with a draw or paint program; capturing an image on-screen, or capturing the output of a plotting program; using a digital camera and saving the image to disk; or scanning in an image from a drawing, photograph, or slide. This may also include converting the image file from one format to another, resizing or cropping the image, and so on. There are lots of possibilities--enough to make a whole seminar (or three) in themselves.
Essentially, what you need to know is that somehow, your image must become a file in a certain format. There are two formats that are most widely supported by the various browsers, and so for most purposes you should stick to one of those two. They are: GIF, or Compuserve's "Generic Image Format"; and JPEG, a format created by the Joint Photographic Experts Group.
Once you have the image, you need to upload it to your webspace, using one of the upload methods discussed on Day 2. If you are using a file transfer program or the upload command on the Network Server, be sure you transfer the file as binary, rather than ASCII, so that it doesn't get scrambled.
Including the Image "In-line"
This is the easy part. Inline images are inserted as IMG elements (pronounced image-). The tag for IMG has the keyword IMG, followed by a number of attributes, of which the most important is the SRC= attribute, which specifies the name or URL of the image file. So the tag looks like this:<IMG SRC="some-file.gif">
The SRC attribute will accept URL's as well as plain file names, so you can refer to images that are at other sites or in other directories, as long as you have the permission of the copyright holder for the image. (No loading Disney animations, please!)
Examples:
<IMG SRC="/icons/mthawk.gif">
<IMG SRC="http://www.site.com/clipart/baby.gif">
Another attribute that you should include in the image element is the ALT= attribute. This specifies some text that will be substituted if the browser is unable to display the image (such as when the browser is Lynx, for example). This looks like the following:
<IMG SRC="some-file.gif" ALT="Man eating fish">
Of course, if you aren't any more careful in choosing your words than I was, the reader may be unsure whether the picture was of a diner in a seafood restaurant, or a great white shark.
Image Links
It's relatively simple to make an image into a link: put the image element as the 'text' inside a hyperlink anchor element. The HTML for this looks like:
<A HREF="URL"> <IMG SRC="somefile.gif" ALT="Text of link"></A>The outline of the image will be displayed as blue (or whatever color the link color is designated). To avoid this, add the BORDER attribute to the IMG element:
<A HREF="URL"> <IMG SRC="somefile.gif" ALT="Text of link" BORDER="0"></A<
SDR, 15 Jun 1995.