{"id":2596,"date":"2025-05-02T13:10:19","date_gmt":"2025-05-02T12:10:19","guid":{"rendered":"https:\/\/www.elearning.fse.manchester.ac.uk\/getting-started-with-canvas\/?p=2596"},"modified":"2025-08-20T10:40:27","modified_gmt":"2025-08-20T09:40:27","slug":"canvas-migration-and-html-files-2","status":"publish","type":"post","link":"https:\/\/www.elearning.fse.manchester.ac.uk\/getting-started-with-canvas\/canvas-migration-and-html-files-2\/","title":{"rendered":"Canvas Migration and HTML Files"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

It\u2019s likely that the migration from Blackboard to Canvas will have \u2018smushed\u2019 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.<\/p>\n\n\n\n

\n
\n
\"\"
Fig 1: HTML files ‘smushed’ into a single page after Migration<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
Fig 2: HTML content after rebuild<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

To work through this guide successfully, it\u2019s recommended you log into Canvas and access your course unit. Have this guide open and accessible. Have the Files<\/strong> 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.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n

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.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n

Contents<\/strong><\/p>\n\n\n\n

    \n
  1. Copy all your HTML content from the BB_Migration Space to the Teaching Space<\/a><\/li>\n\n\n\n
  2. Create Pages for HTML files<\/a><\/li>\n\n\n\n
  3. Edit an HTML Page<\/a><\/li>\n\n\n\n
  4. Update HTML Files<\/a><\/li>\n<\/ol>\n<\/div>\n\n\n\n

    Step 1: Copy all your HTML content from the BB_Migration Space to the Teaching Space<\/h2>\n\n\n\n

    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). <\/p>\n\n\n\n

    \"Canvas<\/figure>\n\n\n\n

    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.<\/p>\n\n\n\n

    \"Canvas<\/figure>\n\n\n\n
    \n

    Step 2: Create Pages for HTML files<\/h2>\n<\/div>\n\n\n\n

    Follow the steps below to create a Module<\/strong> and Page<\/strong> for HTML files.<\/p>\n\n\n\n

      \n
    1. Using the purple ‘+ Module<\/strong>‘ 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<\/strong> called \u2018Week 1: Appropriate title<\/strong>\u2019.<\/li>\n<\/ol>\n\n\n\n
      \"Module<\/figure>\n\n\n\n

      2. In the newly created Module<\/strong>, select the ‘+<\/strong>‘ icon.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      3. Choose ‘Page<\/strong>‘ from the drop-down menu, select ‘[ Create Page ]’<\/strong>, add in an appropriate title, and choose ‘Add item<\/strong>‘.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      In this example each Page<\/strong> title has been prefixed with  weekNumber.itemNumber \u2026(e.g. 2.1 for 1st<\/sup> item in Week 2).<\/strong> 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.<\/p>\n\n\n\n

      \n

      Step 3: Edit an HTML Page<\/h2>\n<\/div>\n\n\n\n

      Follow the steps below to create and edit your HTML page so it displays correctly.<\/p>\n\n\n\n

        \n
      1. Access the Page<\/strong> you created in your new Module<\/strong> from Step 1 above and select the ‘Edit<\/strong>‘ button.<\/li>\n<\/ol>\n\n\n\n
        \"\"<\/figure>\n\n\n\n

        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 ‘<\/><\/strong>‘ button at the bottom.<\/p>\n\n\n\n

        \"\"<\/figure>\n\n\n\n

        3. Paste the below code in the stub of the iFrame content.<\/p>\n\n\n\n

        <p><iframe src=\"\" width=\"100%\" height=\"1000\" ><\/iframe><\/p><\/pre>\n\n\n\n
        \n
        \n
        \n
        \"\"<\/figure>\n<\/div>\n\n\n\n
        \n
        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.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
        4. Navigate to the Files<\/strong> section in the course navigation menu<\/strong> (which should already be open in a separate browser tab) and find your HTML file.<\/p>\n\n\n\n
        5. Once located, open the file within the Canvas File preview, hover over the download option (down arrow) and copy link Address<\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        6. Paste the address inside the quotation marks of the src=””<\/strong> of the stub iFrame code, then delete everything after the ‘?<\/strong>‘, (but leave the ‘?<\/strong>‘)<\/p>\n\n\n\n
        E.g.:<\/p>\n\n\n\n
        <p><iframe src=”https:\/\/canvas.manchester.ac.uk\/files\/xxxxxxx\/download?download_frd=1<\/strong>” width=”100%” height=”1000″ ><\/iframe><\/p><\/p>\n\n\n\n
        Becomes:<\/p>\n\n\n\n
        <p><iframe src=”https:\/\/canvas.manchester.ac.uk\/files\/xxxxxxx\/download?<\/strong>” width=”100%” height=”1000″ ><\/iframe><\/p><\/p>\n\n\n\n
        7. Select ‘Save<\/strong>‘ or ‘Save and Publish<\/strong>‘.<\/p>\n\n\n\n
        You have now embedded the HTML file into a Canvas Page. You can repeat the steps in this section to edit the other Pages<\/strong>.

        PLEASE NOTE: <\/strong>Subsequent updates to Canvas may change how this works, if so please contact the eLearning team for advise!<\/p>\n\n\n\n
        \n
        Update HTML Files<\/h2>\n<\/div>\n\n\n\n
        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.<\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        \n
        \n
        \n
        \"\"<\/figure>\n<\/div>\n\n\n\n
        \n
        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.<\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
        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\u2019s likely that the migration from Blackboard to Canvas will have \u2018smushed\u2019 the links to HTML files into a single Canvas page. Rather than have the HTML files […]<\/p>\n","protected":false},"author":53,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2596","post","type-post","status-publish","format-standard","hentry","category-uncategorised"],"_links":{"self":[{"href":"https:\/\/www.elearning.fse.manchester.ac.uk\/getting-started-with-canvas\/wp-json\/wp\/v2\/posts\/2596","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.elearning.fse.manchester.ac.uk\/getting-started-with-canvas\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.elearning.fse.manchester.ac.uk\/getting-started-with-canvas\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.elearning.fse.manchester.ac.uk\/getting-started-with-canvas\/wp-json\/wp\/v2\/users\/53"}],"replies":[{"embeddable":true,"href":"https:\/\/www.elearning.fse.manchester.ac.uk\/getting-started-with-canvas\/wp-json\/wp\/v2\/comments?post=2596"}],"version-history":[{"count":30,"href":"https:\/\/www.elearning.fse.manchester.ac.uk\/getting-started-with-canvas\/wp-json\/wp\/v2\/posts\/2596\/revisions"}],"predecessor-version":[{"id":3647,"href":"https:\/\/www.elearning.fse.manchester.ac.uk\/getting-started-with-canvas\/wp-json\/wp\/v2\/posts\/2596\/revisions\/3647"}],"wp:attachment":[{"href":"https:\/\/www.elearning.fse.manchester.ac.uk\/getting-started-with-canvas\/wp-json\/wp\/v2\/media?parent=2596"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.elearning.fse.manchester.ac.uk\/getting-started-with-canvas\/wp-json\/wp\/v2\/categories?post=2596"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.elearning.fse.manchester.ac.uk\/getting-started-with-canvas\/wp-json\/wp\/v2\/tags?post=2596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}