<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Some Pictures</title>
<style>
.it { font-style: italic; }
.ul { font-decoration: underline; }
</style>
</head>
<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>
<p style="text-align: center">
Feeling <img src="cat.jpg" style="height: 100px;
vertical-align: bottom"> small.
</p>
<hr>
<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>
<hr>
<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>.
</p>
</body>
</HTML>