Welcome!

Interested in jazzing up your course a bit? Here are some accessible HTML codes you can use to make your course engaging, and help your students be successful in your course. The following codes are aligned in creating an inclusive environment for all students. This means student usability has been tested, especially for those who use assistive technologies like screen-reader.

More Updates to Come!

Follow me on my Twitter Handle @madronaliezl to get updates on this course. I will create videos that will walk you through the customizing process. I will also highlight in yellow within the code source what you need to customize. Hope this helps!

Questions? Concerns? Contact:

The Following Codes Require Basic Knowledge in HTML Coding

Please read this before asking for help. winking smiley face

The content is organized in modules based on function. Within each module, find the element you would like to view and click the page title.

On the top half of the screen, you'll see an example of what the content/page will look like to students. Below that is either:

The HTML code you need to duplicate the page in your course
OR
Directions for how to create the same thing in your course (if duplicate code isn't feasible)

Using the HTML Code

When copying the HTML code, please follow these directions carefully:

Highlight and copy the entire HTML code portion of the page content (everything below the dark black horizontal line).
Go to the page of the Canvas Course you wish to modify or create a new page or open an existing one.
Click Edit.
Toggle the HTML Editor link so you're in the coding area. (The RCE toolbar will no longer show.)
Paste the code in the editing box.
Click Save and voila, there you have it!

Quick Tips: Good to know!

TIP#1:

After pasting the code, switch to the Rich Content Editor to view the result of your code before saving.

TIP#2:

It is much easier to modify some elements of your code in the Rich Content Editor such as: font size, font color, alignment, and adding text.

Tip#3:

You can combine more than one of these codes by placing one code in the content area of another code.

Acknowledgment

UW Instructure Canvas LMS Style Guide*

*Note: These source codes will need to be vetted for accessibility.