Designing a Graphical Syllabus with HTML in Canvas – Learning and Teaching Consulting

A dictionary highlighting the word "syllabus." — *© TungCheung / Adobe Stock*

Your syllabus is a contract, a user’s guide, and an advertisement all in one document. So why risk such an important message falling flat for its intended audience? Using verbal and visual cues to communicate stands the best chance of informing and inspiring students about all that your course has to offer. Plus, students engage with content more when it has color and a clear navigation.

“Combining text and graphics allows communicators to take advantage of each medium’s strengths and diminish each medium’s weaknesses” (Miller, Barnett 2010). When you offer choices to students in how they interact with and consume content (i.e., when you present images and text to convey the same information), you are engaged in effective Universal Design for Learning strategies.

Customizing Your Canvas Homepage

You can customize your Canvas homepage with quick links and images using basic HTML. Below you will find an example of a Canvas homepage that was customized using HTML, along with instructions on how to customize your own homepage in Canvas.

A customized Canvas homepage — *Example of a customized Canvas homepage.*

Adding a Background Color

Switch to HTML view by selecting View and then HTML Editor on Canvas. — *Switching to HTML view in Canvas.*

The simplest change you can make to your Canvas pages is to add a color background. To add a color background in a Canvas page, add the tag in the HTML view of the Rich Content Editor.

On the first line, include the code:

The “#f2ea9d” represents the hex code for the light yellow color. You can change the color by changing the hex code. Check out more hex codes with this hex code calculator.

Adding Navigation Buttoms

To add navigation buttons such as “Modules”, “Syllabus”, or “Grades”, include this code:

<div>

<h3><strong><a title=”Modules List” href=”https://umich.instructure.com/courses/588708/modules” data-api-endpoint=”https://umich.instructure.com/api/v1/courses/588708/modules” data-api-returntype=”[Module]”> <span style=”color: #00274c; font-size: 18pt;”> Modules </span></a></strong></h3>

</br>

<h3><strong><a title=”Course Syllabus” href=”https://umich.instructure.com/courses/588708/assignments/syllabus”><span style=”color: #ffcb05; font-size: 18pt;”>Syllabus</span></a></strong></h3>

</br>

<h3><strong> <span style=”color: #00274c; font-size: 18pt;”> <a title=”Grades” href=”https://umich.instructure.com/courses/588708/grades”> <span style=”color: #00274c; font-size: 18pt;”> Grades</span></a></span></strong></h3>

</div>