Now that you have a graphic (or graphics) for your Web page its time to learn how to place it on your page. The tag used to insert images in a Web page is the image or <.IMG>*** tag. The most basic way you can use this tag is as follows:

<.IMG SRC="URL/imagename.gif">

SRC or "source" is an attribute of the Image tag that tells the browser both the name and location of the graphic file. If your graphic file is located in the same directory as the HTML file there is no need for a URL.

Although this minimalist example would work, there are several other attributes that should be included when using the <.img> tag. The following few sections will describe them in detail.

The HEIGHT and WIDTH Attributes

These attributes should always be included when you place graphics in your Web page. The values used for HEIGHT and WIDTH are the dimensions of your graphic measured in pixels. Here is how they are used:

<.IMG SRC="URL/imagename.gif" WIDTH=150 HEIGHT=90>

In this example we have a graphic that is 150 pixels wide by 90 pixels high.

Knowing how a browser renders a Web page helps us to understand why these attributes are so important. The browser displays a page beginning from the top and working its way down. When it gets to a graphic that does not include the HEIGHT and WIDTH attributes it must wait until the entire image has been downloaded before proceeding with the rest of the page. If these attributes are included the browser will reserve a space the exact dimensions of the image and then quickly go on to the rest of the page. Then it will fill in the reserved spaces with the images as they are downloaded. This is creates a far more satisfying experience for your visitors.

The ALIGN Attribute

The ALIGN attribute controls the placement of the graphic relative to other elements on your Web page. It is used as follows:

<.IMG SRC="URL/imagename.gif" WIDTH=150 HEIGHT=90 ALIGN=left>

In this example "left" is the value of the ALIGN attribute. The following list will show the more common values for this attribute along with an explanation of what they do:

ALIGN=left - the graphic will align left on the Web page and any text that follows will wrap around the right edge of the graphic beginning at the top.

ALIGN=right - the graphic will align right on the Web page and any text that follows will wrap around the left edge of the graphic beginning at the top.

ALIGN=middle - the graphic will align to the left edge of the Web page and the text that follows will align to the middle of the graphic, beginning on the right edge.

ALIGN=bottom - the baseline of the text that follows the graphic will align with the bottom edge of the graphic.

ALIGN=top - the baseline of the text that follows the graphic will align with the top edge of the graphic

The best way to visualize how this attribute works is to create a sample page and experiment with it.

The HSPACE and VSPACE Attribute

These two attributes are used to create "white space" or a buffer zone around your graphic. HSPACE creates a horizontal space to the left and right of the graphic and VPSACE creates a vertical space above and below the graphic. Here is how this attribute is used:

<.IMG SRC="URL/imagename.gif" WIDTH=150 HEIGHT=90 HSPACE=6 VSPACE=6>

The addition of the HSPACE and VSPACE attributes can give your page an uncluttered look. If, for example, you use the ALIGN=left attribute without HSPACE, the text will actually touch the right edge of the graphic as it wraps around. Although this may be desirable, when it is not you can easily create a margin of specific dimensions around the graphic with these two attributes.

The ALT Attribute

The ALT attribute provides a text alternative to the graphic that is displayed as it is downloading. It may seem that this attribute is strictly optional - and it is - but there are good reasons to use it routinely with every graphic on your page. First of all, for users with slow Internet connects, the ALT attribute can quickly display text related to the graphic without having to wait for the graphic to arrive. This feature will make your pages much more user-friendly. Secondly, there are still many users who surf the Web with graphics turned off (most browsers give you this option). By keeping this in mind as you design your page, you can create a Web experience that will appeal to a much wider audience of users.

The BORDER Attribute

A border is a rectangular line that surrounds the graphic. The thickness of the line is set by a value in pixels as follows:

<.IMG SRC="URL/imagename.gif" WIDTH=150 HEIGHT=90 BORDER=1>

In this example, a 1 pixel thick border will surround the graphic. If the BORDER attribute is left out and the graphic is not a hyperlinked graphic, the default will be no border (or BORDER=0). If the graphic is a hyperlink the default without the attribute would be BORDER=1. Though this may sound confusing, there is a reason for the difference. The BORDER attribute is typically used to indicate that a graphic is a hyperlink, so the browser will, by default, put a border around linked graphics but leave them off of static graphics.

***We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use <tag> and not <.tag>.

---------------------

Going Further (Page 5 of 7)

Creating Hyperlinked Graphics

As mentioned above, graphics can be so much more than just illustrations or design elements on your Web page. For example, a graphic can be a button that is "pushed" or clicked on, to link the user to another page, play a sound effect or music clip, or initiate a file download. Or they can serve as menus to guide navigation. The trick to creating this kind of functionality is to use the graphic as a foundation for a hyperlink.

Creating a hyperlinked graphic is no more difficult than creating hyperlinked text. If your not sure how this is done review "name goes here" in the HTML Tutorial. Like text hyperlinks, hyperlinked graphics will use the <.a href>*** tag. The following example illustrates how a static graphic can be turned into a dynamic, hyperlinked graphic:

<.A HREF=http://www.yahoo.com><.IMG SRC="URL/imagename.gif" WIDTH=150 HEIGHT=90 ALT="Go to the Yahoo Homepage"><./A>

If you try this example remember that the browser will place a border around the graphic by default that is 1 pixel thick and will be the default link color (most likely blue). To turn the border off add BORDER=0 to the <.img src> tag.

There is really not much more to creating hyperlinked graphics. There is, however, one additional kind of hyperlinked graphic called an imagemap that is a bit more sophisticated. An imagemap is a single graphic that is divided up into separate hyperlinked regions. This technique will have to be covered in a future tutorial.

***We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use <tag> and not <.tag>.

---------------------

Improving the Performance of Graphical Web Pages (Page 7 of 7)

Graphic files are by nature much larger than text files. Because of this you should be sensitive to the total "weight" of your Web page as you build it. Too many graphics or graphics that are too large can slow down access to the page so much that many users will either give up before its fully downloaded or be annoyed or turned off by the extreme wait required to view it. No matter how well-designed your page may be, if it takes too long to access, not many people will ever get to see it. Here are some tips to optimize graphical Web pages and avoid some of these pitfalls:

1. Keep your graphics as small (in pixel dimensions) as possible. A well thought-out small graphic can often be as effective as a much larger graphic.

2. Try dividing larger graphics into two or more pieces. Although several smaller graphic files will download at about the same time as one larger file of equal size, the user will usually perceive it as faster because the browser will display parts of the graphic sooner.

3. Always use the HEIGHT and WIDTH attributes. Always. Without exception!

4. Reducing the color depth of GIF files or increasing the compression rate of JPEG files will reduce their size.

5. Well designed black and white graphics can at times be as gratifying as color graphics and will most likely download quicker.

6. Learn how to use HTML Tables (see our Table Tutorial). Tables with colored cells can give your page a richer, more graphical look without the use of graphics.

7. Use repeating graphic elements, like bullets, when possible. When the same graphic is used more than once on a page, or even on following pages, it does no need to be downloaded again.

8. Use fonts of different color and size as design elements on your pages.

9. Use a background color or a background graphic to give your page a more graphical look. This can be done by inserting this tag immediately after the opening <.BODY> tag:

<.BODY BACKGROUND=colorname>***

or

<.BODY BACKGROUND=graphic.ext>

You can use any of the 16 color names, RGB values you mix yourself, or a background graphic in .GIF or .JPG format.

***We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use <tag> and not <.tag>.

----------------------

7. How can I add some space between two images?

Use this tag:

<.IMG SRC="file1.xxx" HSPACE="5"><.IMG SRC="file2.xxx HSPACE="5">.

Replace "file1.xxx" and "file2.xxx" with the correct filenames and "5" with the number of pixels you want to use for the space needed.

***Note: We've added a period to HTML tags between the < and tag for display purposes. Do not use the period in your html documents. Eg. use <tag> and not <.tag>

----------------------