Some of the special Mentors (like myself) have been given this book; so that we can quickly detect what you are supposed to be doing. A lot of the Mentors and other members don’t have the book so don’t release when somebody posts here they are following book material.
Yes, it talks about saving your file(s) first before reloading the browser; it is a common mistake that People forget to save their CSS and XHTML before viewing it in the browser. Then they wonder why their changes aren’t showing/updated. That’s because they are seeing the previously saved file - not the one the are still editing and haven’t saved.
You have several typos within that code but nothing that would prevent the image loading. I’ll assume your CSS ‘style1.css’ file is working. Since you said, you saw a question mark - possibly being a broken image.
Below is your corrected markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Bubble Under-The diving club for the south-west UK
</title>
<meta http-equiv="Content-Type" content=
"text/html; charset=utf-8" />
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="sitebranding">
<h1>
BubbleUnder.com
</h1>
</div>
<div id="tagline">
<p>
Diving club for the south-west UK-let's make a splash!
</p>
</div>
</div><!-- end of header div -->
<div id="navigation">
<ul>
<li>
<a href="index1.html">Home</a>
</li>
<li>
<a href="about.html">About Us</a>
</li>
<li>
<a href="contact.html">Contact Us</a>
</li>
</ul>
</div><!-- end of navigation div -->
<div id="bodycontent">
<h2>
Welcome to our super-duper Scuba site
</h2>
<p>
<img src="divers-circle.jpg" width="200" height="162"
alt="A circle of divers practice their skills" />
</p>
<p>
Glad you could drop in and share some air with us! You've
passed you're underwater navigation skills and
successfully found your way to the start point - or in
this case, our home page.
</p>
</div><!-- end of bodycontent div -->
</body>
</html>
Since you aren’t seeing the image and that code looks reasonable it basically means the: divers-circle.jpg isn’t where it is supposed to be or it has been renamed.
It must be in the same directory as: index.html
I assume you have also used the browser to directly open the image itself to double-check you have the correct path and that it displays.
Therefore like all great coders the thing to do is double check things. 
Then create a very simple page for example copy-and-paste the following and call it ‘test.htm’ and place it in the same directory as your; 'index.html’ which should also contain the *.jpg file.
Filename: test.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content=
"text/html; charset=UTF-8" />
<title>
Image test
</title>
<style type="text/css">
/*<![CDATA[*/
<!--
img { border: thick solid red; }
/*]]>*/
</style>
</head>
<body>
<div>
<img src="divers-circle.jpg" width="200" height="162" alt=
"A circle of divers practice their skills" />
<p>
"You hear a slurping sound"
</p>
</div>
</body>
</html>
If your image doesn’t load for this test.htm file then we can be certain the file is not where it should be and so forth.
Even if the image is actually missing (in my test.htm file) you should still see the red border and alt attribute text in Firefox. So try placing my ‘test.htm’ file in the same directory and opening it first.
Because it is a very common mistake misplacing things. 
