Canvas Migration and HTML Files

There are several ways you can present HTML files within Canvas. This is a suggested workflow for Course Units where the majority of the content is HTML.

It’s likely that the migration from Blackboard to Canvas will have ‘smushed’ the links to HTML files into a single Canvas page. Rather than have the HTML files only accessible from within a page, it’s better to have them as part of a Module so students can clearly see the amount of content to work through. This guide will walk you through how to convert the HTML files to be displayed embedded in individual pages.

screenshot of how HTML file can be migrated into Canvas — Fig 1: HTML files ‘smushed’ into a single page after Migration

Screenshot of HTML files after this rebuild — Fig 2: HTML content after rebuild

To work through this guide successfully, it’s recommended you log into Canvas and access your course unit. Have this guide open and accessible. Have the Files section of your Canvas unit open in a separate browser tab as you will be referring to this area consistently as you progress through the build.

Step 1: Create a new Module for the week named appropriately

Using the Purple + Module button at the top of the page create a new module.

Most course units are delivered in a weekly format and so we will create a Module called ‘Week1: Appropriate title’.

screenshot of the +Module button in canvas

Step 2: For every HTML file create a Canvas Page with an appropriate name

In the newly created Module click the +icon, select Page from the drop down menu and select [Create Page] and then add in an appropriate title.

screenshot of the create pages menu in Canvas

In this example each Page title has been prefixed with weekNumber.itemNumber …(e.g. 2.1 for 1^st item in Week 2). Doing this prevents the creation of lots of pages with the same name in the back end of Canvas, useful should you need to differentiate between them later on.

Step 3: Access the first page and click the edit button

Step 4: Access the HTML editor – </>

The Rich Content Editor allows you to input text and media into the page but for this task we need to add some HTML code so switch the editor into HTML view by clicking the </> button at the bottom.

Step 5: Paste in the stub of the iFrame content

The width is scalable, you can modify the height to suit, if your html page is longer than 1000px a scroll bar will be created.

Step 6: Navigate to the Files section of Canvas which should already be open in a separate browser tab.

In the Files section find your HTML file – when located right click and copy the link address/url

Step 7: Paste the Address inside the quotation marks of the src=”” of the stub iFrame code.

Then delete EVERYTHING after the ?, (but leave the ?)

so….

becomes…

Step 8: Click ‘Save’ or ‘Save and Publish‘

You’ve now embedded the HTML file into a Canvas Page go back to Step three and access the next page and repeat.

Step 9: Once you have completed all the Modules for you course simply copy each Module one into your teaching space.

Click the Copy To option in the finished Module

Screen shot of the Module Copy To function in Canvas

Step 10: Select the Course you want to copy to

Search using the Unit code, make sure you select the Teaching and space and not the BB_Migration version, or a Legacy course from a previous year.