<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
  "http://www.w3.org/TR/REC-html40/strict.dtd"
<HTML>


 <HEAD>
  <TITLE>
   Images
  </TITLE>
 </HEAD>
 <BODY>
 Hypertext Skills Group 
  <H1 ALIGN=Center>

  </H1>

Images

 
  <P>

The Image tags, <IMG > and </IMG > allow graphic images in several formats to be added to a web page. While the use of images can enliven a page and convey information effectively, care should be exercised as the size of the image files can significantly increase the time it takes to transfer a page across the Internet. 

  </P>
 
  <P>

It should also be borne in mind that some browsers only display text, not graphics. 

  </P>
 
  <P ALIGN=Center>
   <A HREF="formats.htm">

   </A>
  </P>

Image Formats 

  <H2>

  </H2>

Image Tags

 
   <P ALIGN=Center>
   <IMG SRC="size.gif"
        WIDTH=228
        HEIGHT=154
        ALT="A .GIF Image">

A .GIF Image 

  </P>
 
  <P>

For this image the SouRCe file is called size.gif, the WIDTH of the image is 228 pixels and the HEIGHT is 154 pixels. The ALTernative textual description is given for the benefit of browsers that do not display graphics. 

  </P>
 
  <P>

Specifying the width and height allows browsers to format the page efficiently and improves the presentation of the page. 

  </P>
 
  <H2>

  </H2>

Aligning Text And Graphics

 
  <P>

A small image, such as a bullet point, can be included in a piece of text such as a heading or a paragraph. When this is done the ALIGNment should be specified. In the following three examples, the text is aligned to the Top, the Middle and the Bottom of the image. 

  </P>
 
  <H3>
   <IMG SRC="small.gif"
        WIDTH=39
        HEIGHT=77
        ALIGN=Top>

ALIGN=Top

 
  </H3>
 
  <H3>
   <IMG SRC="small.gif"
        WIDTH=39
        HEIGHT=77
        ALIGN=Middle>

ALIGN=Middle

 
  </H3>
 
  <H3>
   <IMG SRC="small.gif"
        WIDTH=39
        HEIGHT=77
        ALIGN=Bottom>

ALIGN=Bottom

 
  </H3>
 
  <IMG SRC="einstein.jpg"
       WIDTH=142
       HEIGHT=237
       ALT="Einstein"
       ALIGN=Right>
  <P>
 Einstein

Text can be also be aligned to the Left or the Right of an image allowing the writing to flow around the picture. In this example the specification ALIGN=Right is used, placing the image to the right of the text. As some browsers do not recognise the specifications ALIGN=Right and ALIGN=Left consideration should be given to how the page will appear in this instance. It is also useful to know that the tag <BR CLEAR=All> will force subsequent text and images to appear below a Left or Right aligned image.

 
  </P>
  <BR CLEAR=All>
 
  <HR>
 
  <P ALIGN=Center>
   <A HREF="contents.htm">

   </A>
  </P>

Contents 

 </BODY>
</HTML>