<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<title>Image Allignment</title>
</head>
<body>



<h1>Image Alignment</h1>

<table border="1">
  <tr><th>Alignment</th>
      <th>Result</th>
  </tr>
  <tr><th><code>LEFT</code></th>
      <td><img src="rude-pc.gif" align="left" style="width: 54px; height: 77px; border-width: 0px;" alt="Rude PC" />
          This positions the image at the left side,
          with text flowing around it on the right.
          This option was not available in HTML 2.0.
      </td>
  </tr>
  <tr><th><code>RIGHT</code></th>
      <td><img src="rude-pc.gif" align="right" style="width: 54px; height: 77px; border-width: 0px;" alt="Rude PC" />
          This positions the image at the right side,
          with text flowing around it on the left.
          This option was not available in HTML 2.0.
      </td>
  </tr>
  <tr><th><code>TOP</code></th>
      <td><img src="rude-pc.gif" align="top" style="width: 54px; height: 77px; border-width: 0px;" alt="Rude PC" />
          Here, the image runs into the paragraph
          and the line containing the image is
          aligned with the image top.
      </td>
  </tr>
  <tr><th><code>BOTTOM</code></th>
      <td><img src="rude-pc.gif" align="bottom" style="width: 54px; height: 77px; border-width: 0px;" alt="Rude PC" />
          Here, the image runs into the paragraph
          and the line containing the image is aligned
          with the image bottom.
      </td>
  </tr>
  <tr><th><code>MIDDLE</code></th>
      <td><img src="rude-pc.gif" align="middle" style="width: 54px; height: 77px; border-width: 0px;" alt="Rude PC" />
          Here, the image runs into the paragraph
          and the line containing the image is aligned
          with the image bottom.
      </td>
  </tr>
</table>

<p>Note <code>align</code> attribute will be eventually replaced by CSS settings.</p>


</body>
</html>