Code for and Examples of Images

<IMG SRC="http://webcom.com/~webcom/graphics/constr.gif" ALT="[Web Communications: Under Construction]">

The construction sign above is an example of an "in-line" image. It is called in-line because it is interleaved with text (and potentially other multimedia objects, such as sound or video clips). In-line is opposed to "external" images, which are images in formats not native to the Web browser - the Web browser can be configured to automatically launch an external image viewer program (based on the file extension) which does know how to display the format the image is stored in. However, such an image cannot be seamlessly displayed in-line within the web page, as in the above example.

The line after the image shows the "source code" used to display this image. The SRC tag defines the location of the image displayed. If the browser viewing the document cannot display images, the text of the ALT tag will be displayed. If there is no ALT tag, [IMAGE] will be displayed in place of the image.

Note: use brackets around the text in ALT tags if you wish to enable people to distinguish between text substituted for an image and normal text.

To create in-line images, just insert the filename (and path to, if necessary) of an image between the quotes after the SRC tag.

The example in-line image above is not clickable, by itself. To make it clickable, see the WebCom clickable images tutorial.

To place an image in one of your files, you would insert a pointer to wherever the image is stored, such as:

<IMG SRC="http://webcom.com/~webcom/[youruserid]/graphics/yourimage.gif" ALT="Your Words">

It is not necessary to put "http://webcom.com/~webcom/[youruserid]/" before the name of the image (though it can be more convenient and easier to manage in some cases). If it is stored in the same directory as the file using it, then you can simply type:

<IMG SRC="yourimage.gif" ALT="Your Words">

If the image is stored in a directory underneath the document displaying it, then use:

<IMG SRC="subdirectory/yourimage.gif" ALT="Your Words">

to refer to it.

Any standard Unix path can be used to point to an image, as long as it is in one of the directories under your "www" directory (yes, you can also point to images stored on other systems, with the drawback that there is no guarantee that the other system will be operating when someone chooses to view your page, which will result in an error message or other signal indicating the image could not be loaded).

Aligning an Image on Your Page

<IMG SRC="http://webcom.com/~webcom/graphics/constr.gif" ALT="[Web Communications: Under Construction]" ALIGN = "RIGHT">

Code for Hotlinks to Images

Construction GIF

<A HREF="http://webcom.com/~webcom/graphics/constr.gif"> Construction GIF</A>

If the person is using a browser (such as lynx) that is unable display the image itself, it will either be automatically loaded into an external viewer, or the user will be asked whether or not they wish to download it. Insert the filename (and path to, if necessary) of the image between the quotes. Then place a label describing the image between the > and <.

To place a "downloadable" image on one a page, insert a hotlink to wherever the image is stored, such as:

<A HREF="http://webcom.com/~webcom/[youruserid]/graphics/yourimage.gif">Your Image</A>

You don't necessarily have to have to put "http://webcom.com/~webcom/[youruserid]/" before the name of the image (though this can be more convenient to manage in some cases). If the image is stored in the same directory as the file using it, then you can simply insert (as above):

<A HREF="yourimage.gif">

If the image is stored in a directory underneath the document pointing to it, then use:

<IMG SRC="subdirectory/yourimage.gif" ALT="Your Words">

to refer to it.

Any standard Unix path can be used to point to an image, as long as the image is stored in one of the directories under your "www" directory.