Step 5: HTML Tags for Images

When you use an image that you haven't created yourself, make sure that you do so legally. Some of the thousands of images on the Internet are in the public domain and can be used freely. However, many are not, and you'll need the owner's permission to use them. NC State University has several images that you can use, for example:

• a "new" image that would let people know your Web page has something new on it.
• Some circles, spheres and balls for use in a document
  

Displaying an image in your document

An image that appears on a Web page is called an in-line image. It isn't actually on the page, so there must be a link to it in order for the browser to locate and display it. For example, the tag for an image "new.gif" located in the "images" directory on the "www.ncsu.edu" Web server would be

     <img src="http://www.ncsu.edu/images/new.gif">

In this tag, "img src" stands for image source, and the path or URL of the image must be enclosed in quotes.

If the image and the document that displays it are in the same directory, you can use relative linking. For example,

     <img src="mypicture.gif">

You'll learn more about relative linking in Step 6 of this tutorial.

Text and image alignment

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

The tagging looks like this:

<img src="purpleball.gif" align=right>This 
   is an image of a ball.  With this new align=right tag, the text can be placed 
   to the left of the image instead of below it.  It looks nice this way.<br clear=right>
<img src="purpleball.gif" align=left>This 
   is an image of a ball.  With this new align=left tag, the text can be placed
   to the right of the image instead of below it.  It looks nice this way.<br clear=left>

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

Remember that the left/right alignment refers to where the image is positioned on the page, not the side of the image where the flowing text is positioned.

Note: If you are floating text beside an image and use the <p> tag, a blank line will be inserted and the remaining text will also appear beside the image. If you are using Netscape and 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="purpleball.gif" align=left hspace=20>This
   is an image of a ball.  The image 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>
      

This is an image of a ball. The image 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 (http://home.netscape.com/assist/net_sites/html_extensions.html).

Alternative text

Be sure to include the alt attribute for each of your images. This is the text that will be read by a text-only or audio Web browser or that will be displayed if your graphic can't be shown. It helps assure that your pages meet minimum standards for accessibility. For example:

   <img align=middle alt="NCSU wolf - go pack!" src="http://www.ncsu.edu/images/testgif.gif">

Supported image formats

The latest release of almost every Web browser supports the "gif," "jpeg" (also denoted "jpg") and "png" image formats. All these encode image data but in distinctly different ways.

GIF = Graphics Interchange Format
JPEG = Joint Photographic Experts Group
PNG = Portable Network Graphics

There are many programs on Unix, Macintosh and Intel platforms that can convert from one graphic format to another.

Go on to Step 6: Linking

Go back to Step 4: Basic HTML tags for text

Return to the Introduction

Last modified September 24, 2007 by cawalker