Placing images

When you insert an image into a MS-Word document, the image is actually stored in the .doc file. But with web pages, you put a tag into the web page to tell a browser the address (URL) of the image file that you want to display.

Readings

The <img> tag

<img src="some-graphic.gif"
   align="left | right | top | bottom | middle | absmiddle  ...."
     alt="description of the function of the image"
   title="anything else you want to say about the image"
  border="0"
   width="200"  
  height="100"
  hspace="10"
  vspace="10"
/>
All the crossed-out attributes have been "deprecated" by the W3C in favor of CSS ways of doing what these used to do.

src [Required!]

src acts just like href does in links to point to the location of an image file.

alt [Required!]

...an alternative, text description of the image, is important for handicapped accessibility: Blind folks can use screen readers to interact with the Web. The text specified in the alt attribute will be read out loud.

So, particularly if the image is necessary in your navigation scheme like this:
previous page
Your alt text should describe the function of the image: e.g. alt="go to the previous page", and not "a yellow arrow pointing left".

Secondary uses of this text:

title

May be used in a similar way to how it's used in the <a> tag: Text here functions as a description of the image (though not for handicapped accessibility). Will often show up as a tooltip.

width and height

Spacer image

<img src="/g/t.gif" alt="" height="1" width="50" />

Find the pixel dimensions of an image

...by Right-clicking on an image and


Useful CSS styles to use with images

Here are some of the useful CSS attributes for working with images. For example, if you were to set these style rules to affect all the img tags on your page...

img {
  float: left;     /* image goes left, and everything else 'wraps' to the right. */
  border: 1px solid #999999;   /* light gray border */
  padding: 2px;    /* 2 pixels of space between the image and the border */
  margin: 10px;    /* 10 pixels of space outside the border */
}

Christopher ColumbusYour images would look like this one. The effect of float: left is to make the image "float" to the left, and the text (or whatever else comes next on the page) "wraps" to the right. This word wrapping goes on to affect everything that comes next in the "flow" of your document, until you explicitly turn off word wrapping (see below).

Christopher, again!Here's how a "non-floating" image aligns next to some text it's been inserted in front of.

Turning off word-wrap

Sometimes you want to turn off word-wrap, so that things will start to display below the image instead of beside it. Do it with one of the three possible values for the clear attribute of the line break tag:

<br clear="left | right | all" />

Or, for example, this style for paragraphs assures that word wrap is turned off before the contents of any paragraph tag set are rendered:

p {
  clear: all
}
Christopher Columbus
Christopher Columbus

Actually, using this technique, we can get a "Matted picture" effect by using what we know so far about color and what we'll soon find out about CSS box attributes.

<div style="float: left; text-align: center;
   background-color: #aaaaaa;border: 2px solid #333366; 
   font-family: arial; font-size: 0.7em; color: #333366; 
   padding: 40px;margin:10px">
<img src="placingimages/2colonsmall.jpg" 
   style="height: 157px; width: 100px; border: 1px solid #333366;" 
   alt="Christopher Columbus" /><br />
Christopher Columbus
</div>

Using an image as a link

You can make an image into a graphical hypertext link by enclosing it within a link tagset, like

<a href="page2.html"><img src="aPicture.jpg" 
alt="next page"/></a>

Follow Chris to the lab page where we try this out:

Image attribute: Arrow from http://www.uvsc.edu/campusconnect/images/LeftArrow.jpg