<figure> and <figcaption> and relative and absolute URLs

handbook/computing/hbmanual1.html

@@ -50,7 +50,7 @@ so you cannot use "Edit this page". These pages will not show "Edit this page" i
 <p>Then once created, you can edit it the same way that you edit a pre-existing page. 
 
 <h3>Linking in New Pages</h3>
-<p>You link your new page into the handbook by editing another page in which you want to create a link. For example if you have created a new page describing your wonderful new sleeping bag/hammock technique, then you might want to add a link in to <a href="../kitlist.html">Expo Personal Gear List</a>. Unfortunately the "create link" icon (a picture of 3 links of a chain) is disabled in the on-line editor so you would have to click on the HTML icon and insert the link by editing the HTML directly using an <em>&lt;a href="filename"&gt;</em> tag.
+<p>You link your new page into the handbook by editing another page in which you want to create a link. For example if you have created a new page describing your wonderful new sleeping bag/hammock technique, then you might want to add a link in to <a href="../kitlist.html">Expo Personal Gear List</a>. Unfortunately the "create link" icon (a picture of 3 links of a chain) is disabled in the on-line editor so you would have to click on the HTML icon and insert the link by editing the HTML directly using an <em>&lt;a href="filename"&gt;</em> tag. See <a href="#images">Images: Relative and Absolute URLs</a> below for how to structure the URLs in the <var>href</var> attribute.
 
 <h3>Conventions</h3>
 [This should all be moved to a different page as it covers all files and names, just just the handbook pages.]
@@ -85,16 +85,44 @@ Otherwise it's easy to make pages that work on Windows, but which don't on Linux
 <li> Never create two files spelt the same except for capitalisation. They will overwrite each other if edited on a Windows machine <em>without any warning</em>. This is particularly a problem for the filenames generated on phones for photographs.
     
 </ul>
-<h4>Images</h4>
+<h4 id="images">Images: Relative and Absolute URLs</h4>
 <ul>
 <li>Older parts of the website have sub-folders "i/", "l/", and "t/" holding respectively<br />
 i/ - the image file at full resolution (600px width usually)</br>
 l/ - an html file which displays the full image with a caption and some description</br>
 t/ - a thumbnail image which is usually used inside an &lt;a&gt; tag to link to the l/ html file.
-
-
 </ul>
 
+<p>When creating figures use one of these two constructions. The first with "rooted" URLs beginning with a "/":</p>
+<code><pre>
+&lt;figure class="onright"&gt;
+&lt;a href="/piclinks/typing.htm"&gt;&lt;img  src="/images/typing.jpg"&gt;&lt;/a&gt;
+&lt;br&gt;&lt;figcaption&gt;Tony Rooke at computer in 1991 - in the old potato hut&lt;/figcaption&gt;
+&lt;/figure&gt;</pre></code>
+or, with "relative" URLs, where the URL does not start with a "/":
+<code><pre>
+&lt;figure class="onleft"&gt;
+&lt;a href="../l/hut-cables.html"&gt;&lt;img width=200 src="../i/acer-blue-aspire-one-netbook.jpg"&gt;&lt;/a&gt;
+&lt;br&gt;&lt;figcaption&gt;AA1 netbook&lt;br /&gt; sits high up out of reach&lt;br /&gt; 
+(ours is less shiny)&lt;/figcaption&gt;
+&lt;/figure&gt;
+</pre></code>
+<ul>
+<li>"Rooted" URLs will work werever your fragment of HTML ends up. This root is the always the root of the <var>:expoweb:</var> repo, i.e. <var>/home/expo/expoweb/</var>.
+<li>"Relative" URLs will be relative to wherever the webpage <em>is being viewed from</em> as located in the published
+strcuture. This is often not where you think it is (especially for individual logbook entries and cave descriptions) but for handbook pages it is straightforward: you can see the location in the browser URL bar and for this page it is in the folder <var>"/handbook/computing/"</var>.
+</ul>
+
+
+
+<p>
+P.S. In older pages that have not been updated recently, you may see this archaic form:</p>
+<code><pre>
+&lt;a href="/years/2018/logbook.html#t2018-08-03w"&gt;&lt;img src="i/logbookpage.jpg" class="onright"&gt;&lt;/a&gt;
+</pre></code>
+Where the <var>class="onright"</var> attribute is set on the IMG tag and not on the FIGURE tag or an enclosing DIV tag. If you find one of those in a page you are editing, please update it to use the current &lt;figure&gt; and &lt;figcaption&gt; structure. [Note the mixed URLs in this example, one is absolute and one is relative: this is not a recommended style.]
+
+
 <hr />
 <h3 id="tidy">Tidying up and committing the edits</h3>
 <p>'Edit This Page' edits the file served on the web, saves it, adds it to the list of proposed git updates, then finally does the git 'commit' on the server. Things can go wrong at each step of the process.

handbook/logbooks.html

@@ -133,7 +133,16 @@ idea to type up <i>just your trip(s)</i> in a separate file, e.g. "logbook-mynew
 <h3 id="format">Format of the online logbooks</a></h3>
 
 
-<p>Do whatever you like to try and represent the logbook in html. The only rigid structure is the markup to allow troggle to parse the files into 'trips':</p>
+<p>Do whatever you like to try and represent the logbook in html but do keep is <em>simple</em>. Don't try any clever HTML stuff. See the <a href="computing/hbmanual1.html#images">"Edit this Page"</a> instructions for how to insert images and figures.
+
+
+<p>When writing logbook entries, just use <a href="computing/hbmanual1.html#images">relative URLs</a> to the same folder as your text, e.g. <var>href="mynicepic.jpg"</var> and the image and the logbook HTML will, for a 2017 expo, be put into <var>/years/2017/</var>.
+
+<p>One special suggestion: do not use &lt;P&gt; paragraph tags. Well, you can if you like, but they will be stripped out and replaced by double-newlines when the file is parsed. This is because  &lt;P&gt; paragraph tags cannot be nested - that is not allowed in HTML - and the fragment you are writing will be merged with other fragments and may be put inside a higher-level paragraph. [This is also true for Cave Description text in <a href="survey/caveentry.html">"Edit this Cave"</a>.]
+
+<h4> Logbook-specific HTML</h4>
+<p>
+The only rigid structure is the markup to allow troggle to parse the logbook files into 'trips':</p>
 <code><pre>
 &lt;hr /&gt;
 &lt;div class="tripdate" id="t2007-07-12B"&gt;2007-07-12&lt;/div&gt;

handbook/survey/caveentry.html

@@ -45,6 +45,7 @@ This page outlines step 6 of the survey production process. Each step is documen
     to have some idea what is going on behind the scenes. So you are recommended to have a quick look
     at the <a href="newcavefile.html">new cave file method</a> even if you have no intention of using it.
   </p>
+  
 <h3>Guidebook description</h3>
 
 <p>
@@ -79,6 +80,9 @@ If it is a complex cave, you will type this description, and pass it on to someo
 will file it in the right place. For a simple cave you can do it all yourself with the
 the <a href="/newcave/">New Cave form</a> - but not yet.
 
+<h3>Guidebook description formatting</h3>
+<p>You are typing an HTML fragment which will be assembled into a complete page. So follow our usual rules about
+<a href="../computing/hbmanual1.html#images">putting images in Handbook pages</a> and  <a href="../logbooks.html#format">writing HTML in logbooks</a>
 
   <h2>Recommended procedure</h2>