III. Template explanation

Contents

1. Introduction

2. The document header

3. The page navigation header

4. The page navigation footer

5. The document footer

6. Template variables

7. The format of the the document body
    7.1 The table of contents

1. Introduction

This chapter explains the standard documentation template as it is used for ServerAtSchool-documentation. Basically there are four parts in the documentation template: the document header, the page navigation header, the page navigation footer and the document footer. These will all be discussed below.

A 'clean' version of the template can be found in the file template.txt. This file can be used to start a new chapter from scratch.

There are also some guidelines for the format of the document body. These are discussed in the paragraph 7. The format of the the document body below.

(top)

2. The document header

The document header is shown below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <meta name="MSSmartTagsPreventParsing" content="TRUE">
 <title>%%TITLE%%</title>
</head>

<body>

You can see that the document uses a strict HTML 4.01 document type with the iso-8859-1 characterset. Nothing spectaculair. Note that the header contains a meta-tag which prevents certain browsers to autonomously add links to the text in the name of user-friendlyness. We really don't need that. Note that the header contains a string %%TITLE%%. This is a placeholder for the chapter title. This is the text that will be displayed in the browser's title bar. These 'template variables' are further explained in the section 6. Template variables below.

NOTICE: It is very convenient to add a single word or acronym to the TITLE-tag identifying the book. In this document that would be the word 'Guidelines'. The title of this chapter in the TITLE-tag is: 'Guidelines - III. Template explanation'. This way the word 'Guidelines' shows up in the title bar of the browser window. You can separate the chapter title and the book title with a dash.

(top)

3. The page navigation header

Every page starts with a navigation bar. This is the HTML-code to create a navigation bar.

<!-- Begin of Standard Page Navigation Header -->
<div class="NAVHEADER">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
 <th colspan="3" align="center">
  %%BOOKTITLE%%
 </th>
</tr>
<tr>
 <td width="10%" align="left" valign="bottom">
  <a href="%%HREFPREV%%" accesskey="P">Prev</a>
 </td>
 <td width="80%" align="center" valign="bottom"></td>
 <td width="10%" align="right" valign="bottom">
  <a href="%%HREFNEXT%%" accesskey="N">Next</a>
 </td>
</tr>
</table>
<hr>
</div>
<!-- End of Standard Page Navigation Header -->

The navigation bar starts with the centered title of the book. This is not the title of the chapter. This navigation bar also has clickable links on the lefthand side and the righthand side which lead to the previous and the next chapter respectively. If there is no previous or next chapter, there is no clickable link and no text 'Prev' or 'Next'. Please refer to section 6. Template variables below for an explanation of the variables %%BOOKTITLE%%, %%HREFPREV%% and %%HREFNEXT%%.

Please note that the links also have the attribute accesskey. This allows for a so-called hotkey to follow the link by clicking a particular key combination on the keyboard. Often this is a key-combination, e.g. the letter P or N (as we use here) in combination with the Alt-key.

(top)

4. The page navigation footer

The page navigation footer uses this code.

<!-- Begin of Standard Page Navigation Footer -->
<div class="NAVFOOTER">
<hr>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
 <td width="33%" align="left" valign="top">
  <a href="%%HREFPREV%%" accesskey="P">Prev</a>
 </td>
 <td width="34%" align="center" valign="top">
  <a href="%%HREFHOME%%" accesskey="H">Home</a>
 </td>
 <td width="33%" align="right" valign="top">
  <a href="%%HREFNEXT%%" accesskey="N">Next</a>
 </td>
</tr>

<tr>
 <td width="33%" align="left" valign="top">
  %%TITLEPREV%%
 </td>
 <td width="34%" align="center" valign="top">
  &nbsp;
 </td>
 <td width="33%" align="right" valign="top">
  %%TITLENEXT%%
 </td>
</tr>
</table>
</div>
<!-- End of Standard Page Navigation Footer -->

This navigation footer looks very much like the navigation header. The same strategy is used for clickable links to the previous and the next chapter in the book. Note, however, that there is also a link labeled 'Home'. Clicking this link (or using the accesskey Alt-H) navigates to the table of contents of the book. This table of contents is used as the starting point for accessing the book. It is handy to have a link in every chapter that brings you back to the table of contents.

Note that the links not only have the labels 'Prev' and 'Next' but that the titles of the chapters are also shown. This makes it easier to navigate through the book. The titles of the previous and next chapters should be consistent. That is: %%TITLE%% in the file 'previous.html' should be identical to %%TITLEPREV%% in this document.

(top)

5. The document footer

The standard document footer is shown below.

<p>
<address>
<small>Author: %%AUTHORNAME%% &lt;%%AUTHOREMAIL%%&gt;</small>
</address>
<small>Last updated: %%YYYY-MM-DD%%</small>
</body>
</html>

Note that the author's name and email address are placed here, in the ADDRESS-tag. Also the date of last modification is placed in the document footer. Preferably this date follows the ISO date format but it is allowed to use a special code like $Date$ for use with CVS.

(top)

6. Template variables

%%TITLE%%
This is the chapter title.
%%BOOKTITLE%%
This is the title of the book.
%%HREFPREV%%
This is the link to the previous chapter, e.g. the string previous.html.
%%HREFHOME%%
This is the link to the table of contents, usually the string index.html.
%%HREFNEXT%%
This is the link to the next chapter, e.g. the string next.html.
%%TITLEPREV%%
This is the title of the previous chapter. It is the same text that would be used in the variable %%TITLE%% in the file previous.html.
%%TITLENEXT%%
This is the title of the next chapter. It is the same text that would be used in the variable %%TITLE%% in the file next.html.
%%AUTHORNAME%%
This is the name of the author of the text.
%%AUTHOREMAIL%%
This is the email address of the author. Note that this does not have to be a linked address (e.g. an A-tag with href="mailto:..."); a simple plain-text address is OK as long as it is obvious where the author can be reached. You may want to try and make it harder to harvest the e-mail address by constructs like author (at) example (dot) com.
%%YYYY-MM-DD%%
This is the date of the latest update of the document. Preferably this date is formatted the ISO-way, i.e. four-digit year, dash, two-digit month, dash two-digit day. Note, however, that a special date could also be used, e.g. $Date$ for use with CVS.

(top)

7. The format of the the document body

There are a few guidelines for the document body. First of all, the actual body, which starts right after the page navigation header, begins with the title of the chapter in an H1-tag.

<h1><a name="top">Template explanation</a></h1>

Note that this title has a name. This name, top, is used to jump to from a link at the end of every section. After this title there is always a section with the table of contents for this chapter. This is done via a section-title in an H2-tag.

7.1 The table of contents

The contents of this section is a list of clickable section titles which allow for easy navigating the document. Here is an example.

<h2>Contents</h2>

<a href="#h1">1. Introduction</a>
<p>
<a href="#h2">2. The document header</a>
<p>
<a href="#h3">3. The page navigation header</a>
<p>
<a href="#h4">4. The page navigation footer</a>
<p>
<a href="#h5">5. The document footer</a>
<p>
<a href="#h6">6. Template variables</a>
<p>
<a href="#h7">7. The format of the the document body</a><br>
&nbsp; &nbsp; <a href="#h7.1">7.1 The table of contents</a>

Note that it is allowable to link to sub-sections too. We use the crude way of adding two non-breakable spaces to indent the link in the table of contents. This may sound old fashioned but it does render properly in text-oriented browsers like Lynx.

The contents section is always followed by a section called "Introduction".

<h2><a name="h1">1. Introduction</a></h2>

Note that this section too, has a name (here: "h1"). This is the name that is linked to from the table of contents. This section summarises the contents of the chapter. As with all other sections (excluding the table of contents) the section ends with a clickable link which allows the user to jump to the top of the document.

<p align="right"><a href="#top">(top)</a>

Note that the link is positioned in the right hand side of the page. This is considered less disturbing than when this link would be flush left.

(top)

Author: Peter Fokker <peter (at) berestijn.nl>
$Id: template.html,v 1.6 2006/04/05 14:36:15 peter Exp $