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.

Step 1: Copy all your HTML content from the BB_Migration Space to the Teaching Space

Before you start the rebuild you will need to copy ALL of the HTL content – INCLUDING any reference files – images, CSS and any scripts. The simplest way to do this is to access the File area of your BB_Migration space find the folder that contains all this information and download it as a Zip file (click on three dots next to the folder and select Download).

Then upload the Zip file into the Files section of your Teaching space. You will be asked whether you which to Unpack the file you must select this option. You will now have created a full copy of all your HTML, CSS and scripts relevant to this content.

Follow the steps below to create a Module and Page for HTML files.

1. 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 ‘Week 1: Appropriate title’.

2. In the newly created Module, select the ‘+‘ icon.

3. Choose ‘Page‘ from the drop-down menu, select ‘[ Create Page ]’, add in an appropriate title, and choose ‘Add item‘.

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.

Follow the steps below to create and edit your HTML page so it displays correctly.

1. Access the Page you created in your new Module from Step 1 above and select the ‘Edit‘ button.

2. This will take you to The Rich Content Editor (RCE). The RCE 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 selecting the ‘</>‘ button at the bottom.

3. Paste the below code in the stub of the iFrame content.

<p><iframe src="" width="100%" height="1000" ></iframe></p>

4. Navigate to the Files section in the course navigation menu (which should already be open in a separate browser tab) and find your HTML file.

5. Once located, right click on the HTML file and copy the link address/url.

6. Paste the address inside the quotation marks of the src=”” of the stub iFrame code, then delete everything after the ‘?‘, (but leave the ‘?‘)

E.g.:

<p><iframe src=”https://canvas.manchester.ac.uk/files/xxxxxxx/download?download_frd=1” width=”100%” height=”1000″ ></iframe></p>

Becomes:

<p><iframe src=”https://canvas.manchester.ac.uk/files/xxxxxxx/download?” width=”100%” height=”1000″ ></iframe></p>

7. Select ‘Save‘ or ‘Save and Publish‘.

You have now embedded the HTML file into a Canvas Page. You can repeat the steps in this section to edit the other Pages.

If you need to update your HTML content, you need to ensure you upload the file with the exact same name as the file you wish to replace. This will generate a ‘Replace’ prompt, which will overwrite the HTML file and preserve the URL used within the iFrame.