Step-by-Step HTML: Using Images

Inline Images

The "Image" Tag

The use of images on the World Wide Web is rampant, with .gif and .jpg files being used for everything from personal Web pages to banner ads on commercial sites. This particular tag is also one of the more difficult tags to use, both because of the number of attributes and options and because aligning text with images can often be very difficult. We'll take a good look at the tag, but we'll put off some of the options for later in the tutorial. After all, at this point, you just want the image to show up on your page, right?

<IMG ALIGN="value" ALT="alternate text" BORDER=# HEIGHT=# HSPACE=# LOWSRC="URL" SRC="URL" �UNITS="unit type" WIDTH=# VSPACE=# ISMAP="server map URL" USEMAP="client map URL">

Although you may hear otherwise, the only required attribute of the <IMG> tag is SRC.

ALIGN allows you to specify how you want the image aligned in relation to the text it will be displayed alongside. The accepted values are TOP, MIDDLE, BOTTOM, LEFT, and RIGHT; depending on your browser, you may also be able to use TEXTTOP, ABSMIDDLE, BASELINE, and ABSBOTTOM.
ALT is an underused attribute in most Web pages. It provides alternate text for the browser to display in the event that it cannot display the image, and provides the text as an underlay for the image in case someone uses a text-only browser to view your page, such as someone with a visual impairment. Try to make the text descriptive of the image.
BORDER will outline your image with a colored border (default is blue; style sheets allow for different colors) to set it apart from other content. The value range is numeric, with a 0 being no border and a 5 being very noticeable.
HEIGHT is the preferred height for the image to use for display. Usually, this value is set to the height of the image.
HSPACE indicates how much horizontal space, or "padding", you want to include around your image in relation to other content. If you do not specify an HSPACE value, side-by-side images will meet at the edges, or text will appear to run directly into the edge of your image.
LOWSRC is great for sites expecting a large number of dial-up viewers, but is not supported by all browsers. It allows you to specify a second image, usually smaller and of lower quality, for the browser to load and display while the actual image is being loaded. For example, you could use an image editor to copy a full-color .jpg file to a lower-quality, black-and-white .gif. When the visitor accesses your page, the page loads displaying the quicker-loading black-and-white picture, slowly copying over the top of it with the higher-quality color image. This gives the viewer something to look at and anticipate while waiting for the image to load.
SRC is the real meat of this tag. Specify the URL for the image you want to load.
UNITS gives you the opportunity to change how the HEIGHT and WIDTH are measured. The default value is pixels, but an alternate value of en can be used; this will cause height and width to be calculated by English standard measurement (inches).
WIDTH is the preferred width for the image to use for display. Usually, this value is set to the width of the image.
VSPACE indicates the amount of vertical space ("padding") to include around the image in relation to other content on the page.
ISMAP indicates whether this image will be used as a server-side image map (covered later), and specifies a URL to use.
USEMAP indicates whether this image will be used as a client-side image map, specifying a URL to use to define mapped areas.

Examples of Image Alignment

Some of the ALIGN values may be a little bit difficult to understand without seeing them in action. Hence, here are some examples of image alignment in relation to text. The text lines were specifically broken in places to show how multi-line text will relate to the image. The examples will also show the image tag placed before the text and in the middle of the text.

This text in your HTML file:		results in this:
<IMG SRC="./rose.gif" ALIGN="TOP">Here is some sample text. This is after a line break.		Here is some sample text. This is after a line break.
Here is some <IMG SRC="./rose.gif" ALIGN="TOP"> sample text. This is after a line break.		Here is some sample text. This is after a line break.
<IMG SRC="./rose.gif" ALIGN="MIDDLE">Here is some sample text. This is after a line break.		Here is some sample text. This is after a line break.
Here is some <IMG SRC="./rose.gif" ALIGN="MIDDLE"> sample text. This is after a line break.		Here is some sample text. This is after a line break.
<IMG SRC="./rose.gif" ALIGN="BOTTOM">Here is some sample text. This is after a line break.		Here is some sample text. This is after a line break.
Here is some <IMG SRC="./rose.gif" ALIGN="BOTTOM"> sample text. This is after a line break.		Here is some sample text. This is after a line break.
<IMG SRC="./rose.gif" ALIGN="LEFT">Here is some sample text. This is after a line break.		Here is some sample text. This is after a line break.
Here is some <IMG SRC=".rose.gif" ALIGN="LEFT"> sample text. This is after a line break.		Here is some sample text. This is after a line break.
<IMG SRC="./rose.gif" ALIGN="RIGHT">Here is some sample text. This is after a line break.		Here is some sample text. This is after a line break.
Here is some <IMG SRC="./rose.gif" ALIGN="RIGHT"> sample text. This is after a line break.		Here is some sample text. This is after a line break.
<IMG SRC="./rose.gif" ALIGN="TEXTTOP"> Here is some sample text. This is after a line break.		Here is some sample text. This is after a line break.
Here is some <IMG SRC="./rose.gif" ALIGN="TEXTTOP"> sample text. This is after a line break.		Here is some sample text. This is after a line break.
<IMG SRC="./rose.gif" ALIGN="ABSMIDDLE">Here is some sample text. This is after a line break.		Here is some sample text. This is after a line break.
Here is some <IMG SRC="./rose.gif" ALIGN="ABSMIDDLE"> sample text. This is after a line break.		Here is some sample text. This is after a line break.
<IMG SRC="./rose.gif" ALIGN="BASELINE">Here is some sample text. This is after a line break.		Here is some sample text. This is after a line break.
Here is some <IMG SRC="./rose.gif" ALIGN="BASELINE"> sample text. This is after a line break.		Here is some sample text. This is after a line break.
<IMG SRC="./rose.gif" ALIGN="ABSBOTTOM">Here is some sample text. This is after a line break.		Here is some sample text. This is after a line break.
Here is some <IMG SRC="./rose.gif" ALIGN="ABSBOTTOM"> sample text. This is after a line break.		Here is some sample text. This is after a line break.

Using an Image as a Link

On the previous page, I made a point to have "Content" placed between the opening and closing tag of an anchor. This is so that you can arrange for images to be the actual links to other pages. If you and your friends design web pages for fun, have people browsing your site click on images of your friends to go to their sites, rather than just textual links.

The format is the same as a regular anchor, with an image tag put in place of text, like so:

<A HREF="#TopAnchor"><IMG SRC="./happy.gif"></A>

Simple, huh?

Using an Image as Background Wallpaper

The <BODY> tag allows the use of an image for your background, rather than just a solid color. Find an image -- any format that your browser may display -- and prep it for use on the page. This may mean that you will need to trim the image to a smaller size, and may mean that you will need to use an image editor to make it a lighter color so your other context will be visible.

The image will be tiled in the background, and will overlay any "BGCOLOR" setting that you may have set. The format of the <BODY> tag now looks like this:

<BODY BACKGROUND="./pink_fabric.gif">

and the result looks like this.

Next, some basic table creation and manipulation, so you can do the things I've been doing throughout this tutorial. It will give you the basic syntax for a table, but not all the bells and whistles (that's for later!).