HTML style conventions

Version: $Id: html.html,v 1.7 2001/03/05 12:50:23 chrisp Exp $

This document describes the simple HTML coding conventions for internal NaN documents by using templates.

1. Header template
2. Footer template
3. Body hints and tips
4. Using CSS style sheets

1. Header template

Copy-and-Paste the following part between the horizontal lines in the top of your document and change 'title' (twice) and 'keyword1' and 'keyword2' and 'Short intro' to your needs.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>title</TITLE>
<META name="keywords" content="keyword1, keyword2">
<!-- $Id: $ -->
</HEAD>
<BODY BGCOLOR="#ffffff">

<CENTER>
<H1>title</H1>
</CENTER>

Version: $Id: $

<P>

Short intro

<H2>Index</H2>

<!-- INDEX -->
<!-- END INDEX -->

The two $Id: $ parts will be filled in by CVS during the commit.

The INDEX must be generated before committing by running 'makehtmlindex yourdocument.html'. The makehtmlindex script can be found in /usr/local/bin/ on the repository server.

2. Footer template

Copy-and-Paste the following part between the horizontal lines to the end of your document.


</BODY>
</HTML>

3. Body hints and tips

Inbetween the header and the footer you preferably use between paragraphs:

<P>

(That is newline-<P>-newline for readability).

For lists use Ordered <OL> or non-ordered <UL> lists like:

<UL>

<LI>List item goes here

<P>

<LI>Another list item

</UL>

For hyperlinks use relative links wherever possible. Thus:

<A HREF="otherdocument.html">For a document</A>
<A HREF="otherdirectory/">Another directory</A>
<A HREF="HTTP://www.blender.nl/">Another webserver</A>
<IMG SRC="an_image.png" WIDTH="100" HEIGHT="50" ALT="some text">

Preformatted text can be inserted wherever necessary by using <PRE> :

<PRE>
Here two spaces are really  two  spaces.
Note that all HTML viewable parts of this webpage are done with <PRE>,
but keep in mind that some special characters like '<' must be replaced
by their HTML code.
See http://www.fmi.uni-passau.de/~ramsch/iso8859-1.html for a list.
</PRE>

Sometimes you will want to use a fixed-width font (to highlight keywords etc.) without breaking lines. For this you can use

<code>Keyword</code>

4. Using CSS style sheets

You can use CSS (Cascading Style Sheets) to format your document. CSS can redefine the formatting of the standard HTML formatting tags. This has the advantage that everybody can create their documents with their own edit tools while still maintaining a consistent visual quality.

A style is a group of formatting attributes that controls the appearance of a range of text in a single document. A CSS style sheet can be used to control several documents at once and includes all of the styles for a document. The advantage of using a CSS style sheet over an HTML style is that in addition to being linked to multiple documents, when a CSS style is updated or changed, the formatting of all the documents that use that style sheet are automatically updated as well.

CSS styles are identified by name or by HTML tag, allowing you to change an attribute of a style and see all text to which that style applies instantly reflect the change. CSS styles in HTML documents can control most of the traditional text formatting attributes such as font, size, and alignment. CSS styles can also specify unique HTML attributes such as positioning, special effects, and mouse rollovers.

CSS style sheets reside in the HEAD area of a document and define a series of styles. CSS styles can define the formatting attributes for HTML tags, ranges of text identified by a CLASS attribute, or text that meets criteria conforming to the Cascading Style Sheets (CSS) specification. Dreamweaver recognizes styles defined in existing documents as long as they conform to CSS guidelines.

We have prepared a CSS for the NaN development documents which is available at:
http://server/docs/develop/css/nan.css

Applying the NaN CSS to your document is easy. You only need to add the following line in the header of your HTML document (this assumes that the relative path from your document to the NaN CSS is correct):

<link rel="stylesheet" href="../css/nan.css">

Those of you that use Dreamweaver, can import the CSS by choosing Window > CSS Styles. Then, press the "Open Style Sheet..." button. Now, press the "Link..." button and select the style sheet. This will apply the Nan style sheet.

Have a look at the Blender user interface pages to see a preview of the NaN style sheet in action.