HTML commands for images

You'll notice that many documents you see have images that appear on the page. These images must be gif or xbm images. Other images can be included with a document, but require the browser to "spawn" an external viewer (which also means you must have that external viewer installed on your machine).

The first thing you have to do to have an image on your page is to locate or create your gif image. There are thousands of public domain images available on the Internet, some of which are gif images, some are, say .bmp images that can be converted and then saved as gif images. You can also create your own image and save it as a gif file. As a reminder, be sure to use only those images which you create yourself or have permission to use.

NC State University has several gif images on their Web server that are available for you to use in your document. These include images such as

There are many others available. Feel free to browse the page of Graphics you can use.

Putting an image in your document

Images that appear on a Web page are called in-line images. When you have the image ready to be placed in your document, you must provide the path/location or complete URL of the image. The HTML tag is as follows

<img src="path or URL of image file">

For example, <img src="http://www.ncsu.edu/images/new.gif">
Where "img src" stands for image source followed in quotes by the URL of the image. In this particular example, it is an image called "new.gif" that is located on the Web server "www.ncsu.edu" in the directory "images".

If the image happened to be in the same directory as the document you are working on, you would simply reference the name of the file without needing the complete URL.

For example, if you have a gif called "mypicture.gif" in the same directory as the file, your reference would be 

 <img src="mypicture.gif">

Text and Image Alignment

Attributes of the image tag

Text can be "floated" to the right or left of an image. The align=left attribute will float text down and to the left of the image; align=right will float text down and to the right of the image.

The tagging looks like this:

   <img src="http://www.ncsu.edu/images/32x32/bshelf_clear.gif" align=right>This 
   is an image of a bookshelf.  With this new align=right tag, the text can 
   be beside it instead of below it.  It looks nice this way.<br clear=right>



   <img src="http://www.ncsu.edu/images/32x32/bshelf_clear.gif" align=left>This 
   is an image of a bookshelf.  With this new align=left tag, the text can be 
   beside it instead of below it.  It looks nice this way.<br clear=left>

It will appear like this on the Web page:

This is an image of a bookshelf. With this new align=right tag, the text can be beside it instead of below it. It looks nice this way.


This is an image of a bookshelf. With this new align=left tag, the text can be beside it instead of below it. It looks nice this way.

Important note: If you are floating text beside an image and use the <p> tag, a blank line will be inserted and the following text will also appear beside the image. When you want your remaining text to be below the image, you must include a <br clear=> tag so that text will go down to the next clear margin, below the picture. Specify clear=left if you are using align=left and clear=right if you are using align=right. The clear attribute is Netscape-only.

Leaving space around an image

You can increase the space around an image by specifying a horizontal or vertical margin in pixels.

For instance, adding the attribute hspace=20 will put a 20 pixel margin to the right and left of the image. The attribute vspace= adds space to the top and bottom of the image.

The tagging looks like this:

   <img src="http://www.ncsu.edu/images/32x32/bshelf_clear.gif" align=left hspace=20>This
   is an image of a bookshelf.  The text is aligned to the left and there is a 
   horizontal space of 20 pixels.  It looks nice this way.  It helps to add a 
   horizontal space to the image so the text is not so close to the 
   picture.<br clear=left>
It will appear like this on the Web page:

This is an image of a bookshelf. The text is aligned to the left and there is a horizontal space of 20 pixels. It looks nice this way. It helps to add a horizontal space to the image so the text is not so close to the picture.

There are other attributes of the image tag, some of which are explained in Netscape's Extensions to HTML tutorial.

Alternative text

Just in case a gif can't be displayed for some reason (network troubles or a user is viewing your document with Lynx, a line-mode WWW browser), it's a good idea to use the alt modifier to specify what should be printed if your graphic can't be displayed.

<img align=middle alt="Spiffy pic" src="http://www.ncsu.edu/images/testgif.gif">

Making an image into a link

Anything can be a link--text or images. To make an image into a link you simply put the image tag inside the tag for a link. For instance, we could make the belltower image into a link to the NC State homepage so that when the user clicked on the belltower the NC State homepage would appear. The tag would look like this 
 <a href="http://www.ncsu.edu"><img
src="http://www.ncsu.edu/images/ncsubell-red.gif"></a>
As you can see, the <img src> tag is inside the <a href></a> tag. When an image is a link it will have a blue box around it in some browsers. Because your user may be viewing your document with Lynx (and won't be able to access any images) it is a good idea to have text along with an image as a link.

Supported image formats

The latest release of almost every Web client now supports the "gif" and "jpeg" image formats. Both formats are ways of encoding image data, although the two are very distinct in the way they achieve this encoding.

GIF = Graphics Interchange Format
JPEG = Joint Photographic Experts Group

There are many programs on Unix, Macintosh and the Intel platforms that can convert between these and other graphic formats.

Return to Table of Contents