Sitedocs Style Sheet

Revised 20 April 2000
Created 20 November 1998

A basic style sheet for sitedocs pages. A horizontal rule (HR) separates the introductory paragraph from the rest of the page content. If there is a table of contents, it goes above the HR.

You can use the source of this page as a template, but remember to replace the header and footer text with the actual include statements.

[v] Meta Information
[v] Navigation (up, down, header and footer includes)
[v] Heading Styles
[v] Text Formatting
[v] Footnotes

Meta Information

Insert the document type definition at the very top (first line) of the document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html401/loose.dtd">

Insert the meta statements within the document head. Edit as necessary. Note: we should be able to use multiple e-mail addresses, separated by commas.

<META HTTP-EQUIV="author" CONTENT="Marilyn Kelly">
<META HTTP-EQUIV="e-mail" CONTENT="webmaster@open.k12.or.us">
<META NAME="review" CONTENT="01 jul 2000">

<META NAME="keywords" CONTENT="Server Standards, Site Documentation, K-12, Technology, Public School">
<META NAME="description" CONTENT="Style Sheet for Sitedocs">
<?set: document.modified="20 Apr 2000"?>

Top of page [^]

Navigation

Header:

Use sitedocsheader.inc on pages that use a left side bar (like the old OPEN green side bar).

<?include: "/sitedocs/includes/sitedocsheader.inc"?>

Use sitedocshdr1.inc on other pages.

<?include: "/sitedocs/includes/sitedocshdr1.inc"?>

Top of Page:

<P><A HREF="#top">Top of page<img src="/images/arrup.gif" alt="[^]" width="14" height="8" border="0"></a></P>

Contents (red down arrows):

Edit italicized text as appropriate (a href, linked text, anchor name).

<A HREF="#footnotes"><img src="/images/arrdown.gif" alt="[v]" width="14" height="11" border="0">Footnotes</a><BR>

For outline style, you can use spacer.gif (a blank image) to create an indent; increase or decrease the width attribute for a larger or smaller indent:

<A HREF="#footnotes"><IMG SRC="/images/spacer.gif" alt=" " WIDTH="12" HEIGHT="12" BORDER="0"><img src="/images/arrdown.gif" alt="[v]" width="14" height="11" border="0">Footnotes</a></BR>

Footer:

<?include: "/includes/openftr.inc"?>

Top of page [^]

Heading Styles

Use the following heading styles.

Main Topics

Use Heading 2, initial caps, no punctuation at end of heading (e.g., "General Information"). Put a break (BR) or use a horizontal rule (HR) above all but the first main topic.

Example:

General Information

<BR>
<H2>General Information</H2>
 

Subtopics

Use Heading 3, initial caps, no punctuation at end of heading, e.g., "Arts for All Seasons"

Example:

Arts for All Seasons

<H3>Arts for All Seasons</H3>
 

Sub, Subtopics

Use H4, initial caps, no punctuation at end of heading, e.g., "September Activities"

Example:

September Activities

<H4>September Activities</H4>

Top of page [^]

Text Formatting

For all paragraph text, use beginning (P) and ending (/P) paragraph tags. Vertical spacing seems to be more consistent that way.

Example:

<P>Use beginning and ending paragraph tags.</P>

Italicize new terms introduced in text, e.g., "the two container classes conditional statements and blocks are also defined."

Example:

...<EM>conditional statements</EM> and <EM>blocks</EM> are also...

Use bold and font size="-1" for itemized terms or phrases followed by definitions and(or) examples.

Example:

Block syntax

Block structures must adhere to the following syntax.

<P><B><FONT SIZE="-1">
Block syntax</FONT></B></P>

<P>Block structures must adhere to the following syntax.</P>

Use TT or PRE for code examples or snippets. Both TT and PRE are rendered as fixed-width fonts. The difference is that you can include text formatted with TT on the same line as surrounding text, while text formatted with PRE will always begin on a new line with a blank line before it (and a blank line after the ending PRE tag). Also, text formatted with TT wraps whereas text formatted with PRE doesn't.

Example 1:

You can use TT to embed a short code example like [<blockname>{: <parameters>}] ... [/<blockname>]1 within the text of a paragraph.

<P>...use TT to embed a short code example like <TT>[&lt;blockname&gt;{: &lt;parameters&gt;}] ... [/&lt;blockname&gt;]</TT> within the text of a paragraph.</P>

Example 2a:

Use PRE for multi-line code examples, for short examples that you want to display as a separate paragraph, or whenever you want to preserve the line breaks and character spaces of the original text:

<html>
<head>
<title>gdml compliance test for [self]</title>
</head>
<body>

<PRE>
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;gdml compliance test for [self]&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
</PRE>

Example 2b:

... or use TT together with paragraph tags and line breaks (but why?):

<html>
<head>
<title>gdml compliance test for [self]
</title>
</head>
<body>

<P><TT>
&lt;html&gt;
<BR>&lt;head&gt;
<BR>&lt;title&gt;gdml compliance test for [self]
<BR>&lt;/title&gt;
<BR>&lt;/head&gt;
<BR>&lt;body&gt;
</TT></P>

Top of page [^]

Footnotes

Superscript footnote numbers both in the text and in the footnote. 1

Example:

...and in the footnote. <SUP><A HREF="#footnote1">1</A></SUP>

List the footnotes at the end of the document in a tabled section separated from the page contents by an HR. You can view the page source for this document and copy the HTML code between <--Begin Example Footnotes Section --> and <-- End Example Footnotes Section --> to create a footnotes section for a new document. Then substitute appropriate footnote numbers and text.

Top of page [^]

Footnotes
1 Sample footnote. You can copy the footnotes section from the source for this document to create your own footnotes.