Getting Started with Canvas

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.

Fig 1: HTML files ‘smushed’ into a single page after Migration
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.

Migrated HTML files containing LaTeX may not render the LaTeX initially, depending on how they have been created. However, once the HTML files have been embedded into a page, as per the guide below, LaTeX content should render correctly.

Contents

  1. Create Pages for HTML files
  2. Edit an HTML Page
  3. Publish HTML files in your Canvas Teaching space
  4. Update HTML Files

Step 1: Create Pages for HTML files

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’.
Module button

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 1st 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 2: Edit an HTML Page

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>

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.

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.

Step 3: Publish HTML files in your Canvas Teaching space

Follow the steps below to publish your HTML files in the correct Canvas space.

Once you have completed steps 1 and 2 above and have finished all Modules for your course, simply copy each Module onto your Teaching space.

  1. In the finished Module, select the ‘Copy To‘ option.
Screen shot of the Module Copy To function in Canvas

2. Choose the course you want to copy to by searching the unit code.

Make sure you select the Teaching space and not the BB_Migration version or a Legacy course from a previous year.

Update HTML Files

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.

If you do not replace the file, it will add your HTML file as an additional version with a separate URL and you would need to update the iFrame.