SNS Web Site Style Guide

Introduction

In order to obtain a consistent design for the SNS web site, it is necessary to follow the coding standards defined below. Most are just examples. We allow all the HTML 4.01 tags listed here, except Frames, Meta Info, and Programming, except where permission is given by us.

Contents

Validation

No matter what sort of page you have written, it must be valid. All pages must be tested for validity via the W3C Markup Validation Service. We cannot help with page design issues unless your page is valid first. Click the image below to test the validity of this page:

Valid HTML 4.01 Transitional

Page Template

Pages must be saved with a .php extension, such as mypage.php. Every page must start with the standard page header and end with the standard page footer as shown below.

Example: page structure 
<?php 
$pagetitle="SNS Web Site Style Guide";
$keywords="SNS, style guide, html, php";
$description="The School of Natural Sciences in the Institute for Advanced Study";
include("/var/www/html/public/includes/header.inc.php"); 
?>

<!--Enter or edit page content below this line.-->

<p>Page content goes here</p>.

<!--Do not edit below this.-->
<?php include("/var/www/html/public/includes/footer.inc.php"); ?>

Several variables in the header can and should be edited to customize the page:

$pagetite
The title of the page as it will appear in a browser window.
$keywords
A short list of keywords to help search engines.
$description
A short description of the page's contents that will appear with search engine results.

Paragraphs

Example - paragraphs:

Paragraphs are always surrounded with proper tags.

New paragraphs also are surrounded with tags.

Code - paragraphs: 
<p>Paragraphs are always surrounded with proper tags.</p>
<p>New paragraphs also are surrounded with tags.</p>

Text

Example - text:

Here is some strongly typed text, but sometimes you just want to emphasize something or both.

Code - text: 
<p>Here is some <strong>strongly typed text</strong>, but sometimes you just want
to <em>emphasize something</em> or <strong><em>both</em></strong>.</p>

Links

Example - links:

Links to internal documents should always be relative, and links to external sites are done as usual.

Code - links 
<p>Links to <a href="/computing">internal documents</a> should always be relative, and
links to <a href="http://www.google.com">external sites</a> are done as usual.</p>

Headings

Use headings to structure your pages. <h1> is reserved for the page title, but you may use the ones shown below.

Example - headings:

Subheading 2

Subheading 2

Subheading 4

Subheading 5
Code - headings: 
<h2>Subheading 2</h2>
<h3>Subheading 2</h3>
<h4>Subheading 4</h4>
<h5>Subheading 5</h5>

Unordered Lists

Unordered lists are not numbered.

Example - unordered list: Code - unordered list: 
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Ordered Lists

Ordered lists are numbered.

Example - ordered list:
  1. Item 1
  2. Item 2
Code - ordered list: 
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

Definition Lists

Example - definition list:
Coffee
Black hot drink
Milk
White cold drink
Code - definition list: 
<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>
Example - definition list with emphasis:
Coffee
Black hot drink
Milk
White cold drink
Code - definition list with emphasis: 
<dl class="bolddef">
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

Tables

Always provide a summary field for a table.

Example - simple table:
Column 1 Column 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
Code - simple table: 
<table border="1" summary="a simple table">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
  </tr>
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
  </tr>
</table>

Horizontal Lines

Example - horizontal lines:

some text

Code - horizontal lines: 
<hr>
<p>some text</p>
<hr>