Template (Header + Sidebar): The Content Part

If you want to include a Table of contents, put it immediately after the h1 header line. A horizontal line will be added automatically after the ordered list. Example:

This HTML page presents the structural elements, which are formatted in the CSS file headerSidebar.css.

1. Headers

Try to restrict your text to h1, h2 and h3 headers; h4 headers use run-in style.

This is an h2 Header

And a Paragraph of text following h2.

This is an h3 Header

And a Paragraph of text following h3.

This is an h4 Header.

And a Paragraph of text following h4.

2. How to display code

For displaying a code snippet in a block use the pre and code tags. An important line of code can be emphasized by enclosing it with the strong tag, which will color the statement in red. The code snippet will be enclosed by a dotted border. Example:

this is some less important code 
              this is the important statement
              this is another line of less important code

To display code inline enclose it with the code tag, i.e. type inline <code>some statement</code>

3. Notes

Notes can be set appart by using <div class="note">. Example:

Note

This is the text of our note. The border will be drawn automatically. The header "Note" (tag h3) could be any other text or could be missing altogether. This is the corresponding HTML snippet:

<div class="note">
                  <h3> Note </h3>
                  <p> This is the text ... </p>
               </div>

4. Setting apart a paragraph

To separate off a paragraph use class="break". Use it for example at the end of a page to separate off the list of related sites. A horizontal line will be drawn above the header subject. Example: Last paragraph on this page with title "See also".

5. Summary of CSS supported tags

Summary of formatting available for a Page which uses file `headerSidebar.css`
Element	Detail	Code	Comment
header h1, h2, h3, h4		<h1> ... </h1> etc
text	emphasize	<strong> ... </strong>	[1]
text	abbreviation	<abbr title="..."> ... </abbr>	short description in title [2]
text	acronym	<acronym title="..."> ... </acronym>	short description in title [2]
code	inline	<code> ... </code>
code	block	<pre> <code> ... </code> </pre>	presents code snippet in a framed block
code	block + emphasize	<pre> <code><strong> ... </strong></code> </pre>	colors the code red
code	block + indentation	<pre> <code class="m1"> ... </code> </pre>	m1 indents by 1 unit, ... m6 indents by 6 units
table	default		displayed as this table
table	no borders	<table class="noBorders"> ... </table>	for displaying aligned text [3]
ordered list	table of contents	<ol id="toc"> ... </ol>	reduces line height
[any element]	hide content	<div class="hide"> ... </div>	for hiding content of an element
div	flash contents	<div class="separator"> &emsp; </div>	ensures that all previous elements are displayed above the separator

5.1 Comments

If a term is mentioned for the first time, emphasize it with the strong tag, which will show the term in bold. Example: Our pages follow HTML 4.01 standard.
To see the effect of the tags abbr and acronym and the accompanying text in their corresponding title, move your mouse over the words HTML and CSS in the first sentence of this page.
To present aligned text use table and class="noBorder". Example (header row optional):

col1 col2

col1_row1 col2_row1

col1_row2 col2_row2

Template (Header + Sidebar): The Content Part

Table of contents

1. Headers

This is an h2 Header

This is an h3 Header

This is an h4 Header.

2. How to display code

3. Notes

Note

4. Setting apart a paragraph

5. Summary of CSS supported tags

5.1 Comments

6. Display of lists

6.1 Display of unordered lists

6.2 Display of ordered lists

6.3 Definition List

See also

col1	col2
col1_row1	col2_row1
col1_row2	col2_row2