Adding Graphics

You never actually add an image to your HTML page, instead you link to it.

Remember that every file on the Web is separate. An image is a separate file from an HTML page. In the HTML code, you use the <img> tag to link to your graphic, and the browser will display it "inline." What this means is that the browser reads all of your HTML code, following instructions on how to display everything. If it encounters an image tag, then it finds that file (you must provide a path to the image) and then plops it in the browser along with the rest of your page.

About the image tag:

• The image tag always has the attribute "src" (which stands for source).
  
  
• It does not require a closing tag.
  
  
• You can not type over an image, unless the image is used as a background image.
  
  
• The path to the image is in relation to the HTML page. So, give "directions" from where you saved your .htm file. You should have set up your file structure the way we discussed, so your "directions" or path would make your HTML page think something like:
  
  "I know where I am. According to your directions, I should see a folder called images and look in there. Then I will see the file you are talking about."

The code for inserting this arrow image looks like this:

<img src="images/arrow.gif">

The image tag also has attributes that give it more information on how it should be displayed.

Dimensions

It is a good idea to include the dimensions of your image so that the browser knows how much room to leave on the screen while the page loads.

<img src="images/arrow.gif" width="20" height="19">

Of course it doesn't matter so much for smaller images like this one, but larger images load quicker if you include the dimensions of the image file. The dimensions can be found by opening the image in Fireworks and going to Modify-->Canvas-->-->Image Size

Text Wrap

By aligning an image to the right or left, you can wrap text around it. Like in this example here. Remember that an image does not require a closing tag. In order to get your text to wrap around an image, like this, you can simply add the attribute align="right"

By default, all images will align to the left, so if you do not need text to wrap around an image, and you want your image on the left, just insert the image like we did above.

Remember that all tags can handle more than one attribute. Just string them along, one after the other. Remember to put the value of the attribute in quotes.

The code for aligning this image of the book to the right and wrapping text around it looks like this:

<img src="images/book.gif" width="128" height="168" align="right">

Obviously, to align the image to the left with a text wrap, just substitute "right" for "left"

Alignment and Spacing

Sometimes you will need to fix the alignment and spacing of an image. For example, let's look at the code for the letter c graphic above with the title Alignment and Spacing.

If I put the code:

<img src="images/0c.gif" width="16" height="16"> <b>Alignment and Spacing</b>

It would display like this:

Alignment and Spacing

The graphic is too close to the text and it is a little too high. To fix this, I can add some attributes to give it extra spacing and specific alignment.

<img src="images/0c.gif" width="16" height="16" hspace="5" align="absmiddle">
<b>Alignment and Spacing</b>

Here I added 2 more attributes.

hspace="5" means give the graphic 5 pixels of horizontal space on both sides. You can also use vspace to give your graphic some vertical space.

align="absmiddle" means align the graphic to the absolute middle of the text.

The result looks like this:

Alignment and Spacing

See this table of alignment attributes

Alt Text

It is also a good idea to use alternative text along with your image.

Alternative text can be included in your graphic for users with disabilities who use browsers that read the alt text because they can't see the image.

Alt text is also used so that you can rollover an image and get more information about it.

Roll your mouse over the image of this book to see an example

Alt text is an attribute that looks like this:

<img src="images/book.gif" width="128" height="168" align="right" alt="Studio MX Step By Step by Kirst Aho">

How to resize or edit your graphics

If you decide that you want your image to be bigger or smaller, you must open your image in Fireworks, and then:

Go to Modify-->Canvas-->Image Size

Make sure Constrain proportions is checked

Type in a new width or height dimension (and note the width and height of the image in pixels to include in your <img> tag)

You should be careful not to make a graphic larger or smaller by entering new dimensions in the image attribute.

The real dimensions of this image of the book is: width="125" height="168"

This image looks distorted because instead of this:

The code uses incorrect width and height dimensions:

<img src="images/book.gif" width="75" height="140">

The problem with shrinking an image by changing the dimensions is that you are not changing the dimensions of the image file, instead you are changing the dimensions in which the image is displayed. If this file was resized in Photoshop, it would have a smaller file size, which is good. But instead, we have an image that has a larger file size than it needs.

When you work in a HTML editor, like Dreamweaver, remember that you cannot resize your images in Dreamweaver, all you are doing is changing the dimensions that the file is displayed at. You are not changing the dimensions of the file itself.

Remember to resize your graphics in Fireworks (or other image editing program!

Use an image as a background

You can also use an image as a background, by adding an attribute to the body tag.

See these examples:

• Side Bar
• Texture
• Top Bar

What you need to know about images used as background images:

• Background images tile. This means that they repeat over and over and fill the whole screen. If you don't make your image big enough, you will see it repeat.
  
  
• Beware of:
  
  • Don't make your background too busy, it will be hard to read.
    
    
  • Don't make a background image to fit one page perfectly, because people have different resolution monitors and it will not look the same on all computers, i.e. don't make an image 800x600 pixels and expect it to work well as a background.
    
    
  • For the best results, make your background either thin and very long vertically (like the one to the left) or thin and very long horizontally so that it will tile evenly.
    • Vertical example 1 . 2 .
    • Horizontal example 1 .
      
      
  • Other backgrounds 1 . 2 .