Step by Step Instructions

HTML Code

The syntax, including all possible HTML 3 options and Netscape extensions, for describing an image in HTML, is as follows:

<IMG options>

Where options is one or more of the following. In the cases where a particular option is only available for certain versions of Netscape, these are denoted with abbreviations like [N1.1] for Netscape 1.1 or newer.

SRC="filename"

The URL of the image to be displayed. Images should almost always be in either JPEG or GIF format, wth names that end with .jpg or .gif, respectively. Without this option, nothing will be displayed.

LOWSRC="filename"

Specifies the URL of a low resolution version of the graphic which is loaded and displayed prior to the high resolution version from the SRC= option. The purpose of this is to allow the user to see something while waiting for the highly detailed image (which has a much larger file size) to load. However, this option is not used very often since the introduction of support for interlaced GIFs.

ALT="alternate text"

Text which is displayed in place of the graphic. This is visible if the user either has a text-only Web browser (like lynx) or has the Auto Load Images option in Netscape turned off. While it is not necessary to describe every single image you use, describing things like graphical banners and section names can be of great help to anyone who does not always see the graphics.

WIDTH="number"
HEIGHT="number"

Specifies the width and height, in pixels, of the image as displayed on the page. Even though images can be reduced or increased in size using these options, it usually results in much better results to physically resize the image in Photoshop instead.

However, using these options to specify the exact size of the image (without scaling) results in a more pleasing appearance while the page loads, so they should always be used for this purpose.

HSPACE="number"
VSPACE="number"

In cases where text would otherwise run right up to the edge of an image, these options can be used to add a few pixels of whitespace around the horizontal and vertical edges. For example, compare the blue-green bar to the right of this paragraph (which uses HSPACE="20") to the samples in the table below, which have no horizontal space.

BORDER="number"

This option affects how a border is placed around an image. It is mostly used in the case where the image is a clickable link. By specifying BORDER="0", you can prevent there being any border at all around the object (in most newer browsers). By specifying a number greater than 1, you can increase the border from its default value, making it thicker, like so:

BORDER=0

BORDER=1

BORDER=2

BORDER=10

ALIGN="TOP or BOTTOM or MIDDLE [All versions]
or LEFT or RIGHT [N1.1]
or TEXTTOP or ABSMIDDLE or BASELINE or ABSBOTTOM" [N2.0]

Affects the alignment of text following the graphic. This table, which can obviously only show those modes supported by your browser, demonstrates each version:

Two lines of text using ALIGN=TOP	Two lines of text using ALIGN=BOTTOM	Two lines of text using ALIGN=MIDDLE
Two lines of text using ALIGN=LEFT	Two lines of text using ALIGN=RIGHT	Two lines of text using ALIGN=TEXTTOP
Two lines of text using ALIGN=ABSMIDDLE	Two lines of text using ALIGN=BASELINE	Two lines of text using ALIGN=ABSBOTTOM

ISMAP
USEMAP="mapfile"

Both of the options refer to using image maps, a topic which is beyond the scope of this document.

---

A Note About URLs

When specifying the location of a file, there are two types of URLs that can be used, relative and absolute.

An absolute URL contains the name of the site and the entire path to get to a file. For example, the URL of the main Admission page is http://www.mtholyoke.edu/adm/index.shtml

However, if you want to refer to a page or image which is on the same host as the referring page, there is no need to re-type the http://hostname part of the URL. A relative URL can be used instead.

For example, the page you are reading right now is located in the folder http://www.mtholyoke.edu/help/creating-pages/imaging/. In order to create a reference to the index.shtml page in Admission, there is no need to have the http://www.mtholyoke.edu at the beginning, because it resides on the same host as this page. Instead, only /adm/index.shtml is needed.

Similarly, in order to include the GIF file vert.gif, which resides in the same folder as the file you are reading, there is no need to include any path information at all. Simply using <IMG HREF="vert.gif"> works just fine, as you can see from all of the blue-green vertical bars appearing above.

The biggest advantage in using relative URLs wherever possible, aside from not having to type so much, is that if the files ever need to be moved to another location (or even another server alltogether), no changes will need to be made to the URLs. On the other hand, had you used absolute URLs, every one of them would have to be corrected.

Top | Previous Page | Next Page