How to use this template

This content template uses a CSS style sheet to format an HTML content topic. In order to view the template formatting you must save the TemplateFiles folder containing the stylesheet.css file and supporting images in the same root folder as your HTML files and reference the CSS file appropriately.

An easy way to use this template package is to:

1. Upload the template package to the appropriate folder in your course files.
2. Open one of the sample HTML pages (HowToUseThisTemplate.html, SampleContentTopic.html, SampleSyllabus.html or TemplateStyles.html).
3. Rename and save the sample HTML page as your first content topic.
4. Update and replace the content of the sample page with your content.

If you want to modify the CSS style sheet, modify it within the TemplateFiles folder since the HTML files provided (and the files you create based on these files) reference this folder: <link rel="stylesheet" type="text/css" href="TemplateFiles/stylesheet.css" />

If you want to replace the CSS style sheet, delete the existing style sheet and supporting images from the TemplateFiles folder and copy your replacement style sheet and supporting images into the folder (make sure you name the style sheet: stylesheet.css).

Note It is a good idea to have a backup copy of the template package in case you accidentally save over the sample files.

Headings

Note The Heading 1 style for this template is used for the "How to use this template" heading above.

The first heading level, Heading 1, of any document (HTML file, MS Word document, Adobe PDF, etc.) should be the title of the main content. You should only use one Heading 1 in each HTML topic. This heading, or title, helps readers understand the purpose of the topic. If you feel like you need more than one Heading 1 for your topic, consider breaking the content topic into multiple topics. Short, consistently laid out topics help readers manage your content without being overwhelmed. This can be particularly important to individuals with cognitive disabilities.

You should also define a title for your document that matches your Heading 1.

Heading 2

Sub-headings are important for a number of reasons:

• They visually break up a page which makes it more interesting and reduces eye strain.
• They help you logically order your content.
• They help learners identify and internalize transitions in information.
• They provide an easy way for individuals using screen readers (and other assistive technologies that interact with HTML content) to skim the page and jump between content.

All headings in your content topic should use proper heading tags. If you copy and paste the different heading elements in this template your headings should be tagged correctly. You can also use the formatting options available with most HTML editors (WYSIWYG editors) to select the appropriate heading level.

Heading 3

Your headings should be properly nested. For example, a Heading 3 element should only be used after a Heading 2 element or another Heading 3 element. Just as you shouldn't format a paragraph tag to look like a heading without actually using a heading tag, you shouldn't use a heading tag unless you are indicating a new section or sub-section of information.

Heading 4

A good design tip is to never use more than four levels of headings. If your content topic uses more than four levels of headings, consider reorganizing. Chances are the content topic will be clearer and less intimidating to readers after you have reorganized it.

Code samples:
<title>How to use this template</title>
<h1>How to use this template</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

Main content

Paragraphs

The paragraph element should be used for your main text. When formatting paragraph text you should ask yourself:

• Is the text large enough and simple enough that most readers won't strain their eyes if they read multiple pages (or topics) of information?
• Will the text still look good when readers use their browser's zoom functionality and screen magnifiers to increase the font size?
• Is there a strong contrast between the text color and the page background?

The default paragraph font in this template has been specifically chosen for online reading and resizes well when zoomed.

Paragraph formatting

The following is a list of alternative paragraph styles that can be used to draw attention to a paragraph or section of text.

• A blockquote style:

  What's in a name? That which we call a rose
  By any other name would smell as sweet

• A note paragraph style:

  Important Place essential information in a paragraph style with a background or border for visual emphasis.

• An emphasis paragraph style:

  Use this paragraph style to highlight or draw attention to an interesting paragraph or concept.

Code samples:
<p>Paragraph text</p>
<blockquote>What is a name? That which we call a rose<br>By any other name would smell as sweet</blockquote>
<p class="note"><span class="note">Important</span>Place essential information in a paragraph style with a background or border for visual emphasis.</p>
<p class="emphasis">Use this paragraph style to highlight or draw attention to an interesting paragraph or concept.</p>

List formatting

Lists are a great way of breaking up information on a page and drawing attention to key information and procedures. It is important that lists use the correct list tags and do not use breaks or empty paragraphs for formatting. Correctly tagging and formatting your lists ensures that non-visual readers can quickly assess how many items are in the list and readers who navigate by keyboard can move between list items without having to tab through empty paragraphs.

The following examples show a properly formatted unordered list, ordered list and definition list.

• List Item 1
• Sub-item 1
• Sub-item 2
• List Item 2

1. Step 1
1. Sub-step 1
2. Sub-step 2
2. Step 2

Rose

Any wild or cultivated flower of the genus Rosa. Typical varieties include red, pink, white and yellow flowers with prickly stems and pinnate leaves. A shade of the color pink. Verb: To flush (in the face or cheeks).

Name

A word, or a combination of words, by which a person, place, thing, or class of things is designated, called, or known.

Code samples:
<ul>
  <li>List item 1</li>
  <ul>
    <li>Sub-item 1</li>
    <li>Sub-item 2</li>
  </ul>
  <li>List item 2</li>
</ul>

<ol>
  <li>Step 1</li>
  <ol type="a">
    <li>Sub-step 1</li>
    <li>Sub-step 2</li>
  </ol>
  <li>Step 2</li>
</ol>

<dl>
  <dt>Rose</dt>
  <dd>Any wild or cultivated flower of the genus Rosa. Typical varieties include red, pink, white and yellow flowers with prickly stems and pinnate leaves. A shade of the color pink. Verb: To flush (in the face or cheeks).</dd>
  <dt>Name</dt>
  <dd>A word, or a combination of words, by which a person, place, thing, or class of things is designated, called, or known.</dd>
</dl>


Text formatting

Most word processing tools (such as MS Word) and HTML editors (such as Dreamweaver) provide simple interfaces for formatting paragraph text in order to add emphasis or call out the importance of a specific word, phrase or sentence. Typically this includes options to underline, bold, italicize, etc. Although these options are easy to use, they aren't always the best design choices. We suggest you use the formatted text options available in this template instead.

Here is a list of text elements we have formatted for you:

• A link style:

  This link is visually distinct from the normal paragraph text making it easy for readers to find. Three important tips to remember when creating links: a) the text for each link should be unique and descriptive (never use ambiguous link text such as "click here"); b) if your link opens in a new window include a link title similar to the following: "[link text] opens in a new window"; c) if you are linking to a media file include a link title similar to the following: "[link text] MS Word" or "[link text] MP3 file."

• A strong style:

  Use strong tags instead of bold tags if you are trying to emphasize the importance of a word or sentence in comparison to surrounding text. Screen readers and other assistive technologies should recognize the strong emphasis when reading or interpreting the text.

• An emphasis style:

  You can also use emphasis tags to emphasize the the importance of a word or sentence in comparison to surrounding text. Emphasis tags should be used in place of italics.

• A note style.
• A New! style.

Code samples:
<p>A <a href="www.desire2learn.com" title="Link to Desire2Learn Incorporated">link</a> style</p>
<p>A <strong>strong</strong> style:</p>
<p>An <em>emphasis</em> style:</p>
<p>A <span class="note">note</span> style.</p>
<p>A <span class="new">New!</span> style.</p>

Images

From a design perspective, there are two types of images used in HTML content: decorative images and informative images.

Decorative images

Graphics that are used for layout and design purposes that do not contribute any meaning to the page, such as: spacers, box corners, dividing lines and subtle background images.

Informative images

Any other graphics on the page, such as: photos, line drawings, graphics and icons. Background images that include text or pictures that convey information or mood are informative.

All images on a page, whether decorative or informative, need alternative text so they can be recognized by assistive technologies that interpret HTML. Alternative text is defined using the alt attribute. For decorative images the alt attribute should be marked as "". This tells screen readers and other assistive technologies that the image is decorative and does not need to be read. This is often described as setting a null value for the image. For informative images the alternative text should concisely describe what the image is trying to communicate rather than describing its appearance.

You should also add an image caption below your image. The caption should explain the purpose of the image. It may be the same or different than the alternative text.

This style sheet uses a div element to float images to the left or right of your paragraph text. If you are copying code for an image, make sure you copy the opening and closing div tags.

Code samples:
<img src="blueline.jpg" alt=""/>

<div class="imgRight">
  <img src="red_rose.jpg" alt="Red rose denoting love"/>
  <p class="caption">Red rose denoting love</p>
</div>

Tables

From a design perspective, there are also two types of table: layout tables and data tables.

Layout tables

Used to divide larger sections of information on a page into columns or segments for design purposes. Many designers consider layout tables a misuse of HTML tables; however, layout tables are very popular because they provide an easy way to group information in columns or panels.

Data tables

Use rows and columns to present relationships between sets of information. They display information in a grid and use row and column headers to communicate how data in different cells relate.

Tables can be very difficult for non-visual readers to interpret since screen readers and other assistive technologies always read the HTML code for a page from top to bottom, left to right (in a linear order). Therefore, in order for tables to make sense you must associate cells with the row and column headers and compare them to other cells so that non-visual readers can understand the context of a cell as their assistive technology reads cells from top to bottom, left to right.

There are a number of things you can do to improve the accessibility of tables:

• Keep your tables as simple as possible. Use paragraphs or lists to display information when possible.
• Include a table summary. The summary should explain the purpose of the table and a general description of its layout.
• Use heading tags and the scope attribute to define row and column headers in simple tables. The scope attribute helps browsers and screen readers interpret how cells relate.
• Use headers and id attributes for tables that have more than one heading level (nested tables). Nested tables are difficult to make accessible using an HTML Editor. To set up an accessible nested table you must assign an id attribute to each of your headings and then define which headings apply to each cell using the source code.

The following examples show a simple and complex (nested) table with correct markup. You will need to apply the principles outlined in the sample code to your own tables.

Romeo and Juliet Characters simple table

Character	Family loyalty	Living?
Romeo	Montague	Deceased
Mercutio	Montague	Deceased
Benvolio	Montague	Living
Juliet	Capulet	Deceased
Tybalt	Capulet	Deceased
Nurse	Capulet	Living
Count Paris	Capulet	Deceased

Romeo and Juliet Characters nested table

	Character	Relation	Living?
Montague	Romeo	Son of Lord Montague	Deceased
	Mercutio	Friend of Romeo	Deceased
	Benvolio	Cousin of Romeo	Living
Capulet	Juliet	Daughter of Lord Capulet	Deceased
	Tybalt	Cousin of Juliet	Deceased
	Nurse	Nurse to Juliet	Living

Code samples:
<table cellspacing="0" cellpadding="0" summary=" A simple table listing the characters in Shakespeare's Romeo and Juliet, their family loyalty and whether they are alive at the end of the play.">
  <caption>Romeo and Juliet Characters simple table</caption>
  <tr>
    <th scope="col" id="Character">Character</th>
    <th scope="col" id="FamilyLoyalty">Family loyalty</th>
    <th scope="col" id="Living">Living?</th>
  </tr>
  <tr>
    <th scope="row" id="Romeo" headers="Character">Romeo</th>
    <td headers="Romeo FamilyLoyalty">Montague</td>
    <td headers="Romeo Living">Deceased</td>
  </tr>
  <tr>
    <th scope="row" id="Mercutio" headers="Character">Mercutio</th>
    <td headers="Mercutio FamilyLoyalty">Montague</td>
    <td headers="Mercutio Living">Deceased</td>
  </tr>
  <tr>
    <th scope="row" id="Benvolio" headers="Character">Benvolio</th>
    <td headers="Benvolio FamilyLoyalty">Montague</td>
    <td headers="Benvolio Living">Living</td>
  </tr>
  <tr>
    <th scope="row" id="Juliet" headers="Character">Juliet</th>
    <td headers="Juliet FamilyLoyalty">Capulet</td>
    <td headers="Juliet Living">Deceased</td>
  </tr>
  <tr>
    <th scope="row" id="Tybalt" headers="Character">Tybalt</th>
    <td headers="Tybalt FamilyLoyalty">Capulet</td>
    <td headers="Tybalt Living">Deceased</td>
  </tr>
  <tr>
    <th scope="row" id="Nurse" headers="Character">Nurse</th>
    <td headers="Nurse FamilyLoyalty">Capulet</td>
    <td headers="Nurse Living">Living</td>
  </tr>
  <tr>
    <th scope="row" id="CountParis" headers="Character">Count Paris</th>
    <td headers="CountParis FamilyLoyalty">Capulet</td>
    <td headers="CountParis Living">Deceased</td>
  </tr>
</table>

<table cellspacing="0" cellpadding="0" summary="A table organized by family and then character showing which characters are alive at the end of Shakespeare's Romeo and Juliet.">
  <caption>Romeo and Juliet Characters nested table</caption>
  <tr>
    <td>&nbsp;</td>
    <th scope="col" id="Character">Character</th>
    <th scope="col" id="Relation">Relation</th>
    <th scope="col" id="Living">Living?</th>
  </tr>
  <tr>
    <th rowspan="3" id="Montague">Montague</th>
    <th id="Romeo" headers="Montague Character">Romeo</th>
    <td headers="Montague Romeo Relation">Son of Lord Montague</td>
    <td headers="Montague Romeo Living">Deceased</td>
  </tr>
  <tr>
    <th id="Mercutio" headers="Montague Character">Mercutio</th>
    <td headers="Montague Mercutio Relation">Friend of Romeo</td>
    <td headers="Montague Mercutio Living">Deceased</td>
  </tr>
  <tr>
    <th id="Benvolio" headers="Montague Character">Benvolio</th>
    <td headers="Montague Benvolio Relation">Cousin of Romeo</td>
    <td headers="Montague Benvolio Living">Living</td>
  </tr>
  <tr>
    <th rowspan="3" id="Capulet">Capulet</th>
    <th id="Juliet" headers="Capulet Character">Juliet</th>
    <td headers="Capulet Juliet Relation">Daughter of Lord Capulet</td>
    <td headers="Capulet Juliet Living">Deceased</td>
  </tr>
  <tr>
    <th id="Tybalt" headers="Capulet Character">Tybalt</th>
    <td headers="Capulet Tybalt Relation">Cousin of Juliet</td>
    <td headers="Capulet Tybalt Living">Deceased</td>
  </tr>
  <tr>
    <th id="Nurse" headers="Capulet Character">Nurse</th>
    <td headers="Capulet Nurse Relation">Nurse to Juliet</td>
    <td headers="Capulet Nurse Living">Living</td>
  </tr>
</table>

Helpful resources

• Web Accessibility for Online Learning A well-organized tutorial on creating accessible courses funded by the Sloan Foundation and CANnect, a consortium of schools and philanthropists committed to promoting accessible course design.
• W3C Web Accessibility Initiative The World Wide Web Consortium's Web Accessibility Initiative is the leading body for international web accessibility standards. Their site provides basic information about web accessibility as well as the Web Content Accessibility Guidelines, which are the basis of many accessibility compliance laws around the world.
• Web Accessibility in Mind (WebAIM) A leading provider of accessibility resources and information. A great site for finding general information about accessibility issues and resources for solving specific accessibility problems.
• WAVE Toolbar A free Firefox extension from WebAIM for evaluating the accessibility compliance of web pages. This tool allows you to check the accessibility of your HTML files similar to checking for spelling errors.

Place copyright and general information about your course or organization in the footer.