<!doctype html>
  <meta charset="utf-8">
  <title>Some Pictures</title>
    .it { font-style: italic; }
    .ul { font-decoration: underline; }
 <body style="background-color: yellow">
  <p>The family cat: <img src="cat.jpg" style="vertical-align: middle"></p> 
  <p style="text-align: right">
   <img src="cat.jpg" style="height: 70px; width: 400px; vertical-align: top">
   Here he is on a thin day
  <p style="text-align: center">
   Feeling <img src="cat.jpg" style="height: 100px; 
        vertical-align: bottom"> small.
  <p style="text-align: center">
    <img src="http://www.mc.edu/themes/mississippi_college_2012/images/subnav-clock-tower.jpg"><br>
    Does Anybody Really Know<br>What Time It Is?
  <p style="margin-left: 0.25cm;">
      <img src="down/simple.png" 
        style="float: right; padding: 4px; border: 1pt solid black;
            margin-left: 4px;">
    Objects, images or other things, can be styled 
    <span class="ul">float left</span> or
    <span class="ul">float right</span>.  This causes 
    text to flow around them.  This can be very useful or very 
    <span class="it">frustrating</span>.  The diagram to the right describes the
    process of viewing a page on your workstation.  Your browser
    sends a request for a file.  The server attempts to locate the
    file and respond.  The server responds with the contents of the
    file (or an error message if it couldn't find it).  The browser
    reads the contents of the file over the net and formats it.
    This allows various types of browsers the freedom to apply 
    whatever formatting rules serves it best.
    If the page contains images, the browser must request these
    separately after it receives the page.  Consequently, 
    loading a single page may result in <span class="it">several</span>
    requests from browser to server, or perhaps to 
    <span class="it">multiple servers</span>.