1. K-State home
  2. »Syllabi

Canvas

Contact:

Visit the IT Help Desk

Phone: 785-532-7722
Walk in: Cat's Pause Lounge, K-State Student Union
E-mail: helpdesk@k-state.edu

Self-service:
Submit online service request
Search IT Knowledge Base

Syllabi

A well-formulated syllabus gets your course off to a good start and designing your syllabus with headings is the first step. Heading Styles allow students to skim the document to find the content they need. Headings make your syllabi accessible because screen readers and text-to-speech tools are programmed to recognize headings.

To learn more, click on the buttons inside the tabbed menu.

This Microsoft video, Improve Header Accessibility, will demonstrate the steps to use styles for headings to make your syllabus easier to navigate. Download a pre-formatted Course Syllabus Template or Distance Syllabus Template to get started.

Add a heading style in Word:

  1. Type the document as plain text.
  2. Select a line that is a heading.
  3. Select the Home tab in the ribbon.
  4. Select the appropriate heading level in the Styles group, such as the Heading 1.

Confirm the syllabus navigational structure

  1. Select the View tab in the ribbon.
  2. Select Navigation Pane in the Show group

Heading Styles principles can be applied when creating your online syllabus in Canvas with main headings sectioned as tab for easy navigation. This design allows anyone to navigate through the information in the syllabus quickly.

How to add HTML Code in Canvas

  1. Select and copy the basic text code on this page or load the advanced HTML code
  2. Select View All Pages at the top of the current page.
  3. Select +Page in the Pages list.
  4. Enter a Title for the Page, such as Course Syllabus.
  5. Select HTML Editor.
  6. Paste the code into the content area.
  7. Select Save or Save and Publish.
  8. Edit the page with your own content.

Basic Tabbed Syllabus Code

<!--Copy below This Line-->

<div class="enhanceable_content tabs">
<ul>
<li><a href="#fragment-1"><span>Instructor Information</span></a></li>
<li><a href="#fragment-2"><span>Course Information</span></a></li>
<li><a href="#fragment-3"><span>Course Elements</span></a></li>
<li><a href="#fragment-4"><span>Technical Requirements</span></a></li>
<li><a href="#fragment-5"><span> KSU Services and Policies</span></a></li>
<li><a href="#fragment-6"><span>Weapons Policies</span></a></li>
</ul>
<div id="fragment-1">
<p>Add your text anywhere between this paragraph</p>
<p style="border-top: 1px solid black;">&nbsp;</p>
<p style="text-align: right;">Select the&nbsp;<strong>Course Information</strong> tab above for more information.</p>
</div>
<div id="fragment-2">
<p>Add your text anywhere between this paragraph</p>
<p style="border-top: 1px solid black;">&nbsp;</p>
<p style="text-align: right;">Select the&nbsp;<strong>Course Elements</strong> tab above for more information.</p>
</div>
<div id="fragment-3">
<table class="ic-Table">
<thead>
<tr>
<th>Week</th>
<th>Date</th>
<th>Topics Covered</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Weeks</td>
<td>Dates</td>
<td>Topic Description</td>
<td>Comment</td>
</tr>
</tbody>
</table>
<p style="border-top: 1px solid black;">&nbsp;</p>
<p style="text-align: right;">Select the&nbsp;<strong>Technical Requirements</strong> tab above for more information.</p>
</div>
<div id="fragment-4">
<p>Add your text anywhere between this paragraph</p>
<p style="border-top: 1px solid black;">&nbsp;</p>
<p style="text-align: right;">Select the&nbsp;<strong>KSU Polices and Services</strong> tab above for more information.</p>
</div>
<div id="fragment-5">
<p>Add your text anywhere between this paragraph</p>
<p style="border-top: 1px solid black;">&nbsp;</p>
<p style="text-align: right;">Select the&nbsp;<strong>Wepons Polices</strong> tab above for more information.</p>
</div>
<div id="fragment-6">
<p>Add your text anywhere between this paragraph</p></div>
<div>
</div>
</div>

<!--Copy above This Line-->

Note: The beginning code creates tabs for each heading of your syllabus. The tabs are identified as enumerated Fragments - #, such as fragment-1, 2, 3, and so on. The text that follows labels the heading, i.e., Instructor Information, Course Information, Course Elements, etc. The sections content follows with a “div” or divider ID: <div id="fragment-1">.