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.
Adding a Background Color
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:
<div style="background: #f2ea9d;">
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>
<style="height: 1px; vertical-align: middle; text-align: center; background-color: #00274c; width: 269.667px;">
<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>
<style="height: 1px; vertical-align: middle; text-align: center; background-color: #ffcb05; width: 246.964px;">
<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>
Please note that when creating custom HTML coding in Canvas, only certain HTML tags are supported. Be sure to check out the list of permitted HTML tags. If you're interested in learning more about HTML in Canvas, this help guide from Lower Columbia College shares tips & tricks for everyone from HTML-beginners to experts!
For any additional questions about creating a graphical syllabus using HTML, reach out to the Learning and Teaching Consultants today!
References:
HTML Coding in Canvas: https://lcc.instructure.com/courses/1696714
Miller & Barnett, 2010, p. 63.
