{"id":4891,"date":"2022-07-12T12:00:25","date_gmt":"2022-07-12T16:00:25","guid":{"rendered":"https:\/\/websites.emerson.edu\/itg\/?p=4891"},"modified":"2023-02-02T15:12:42","modified_gmt":"2023-02-02T20:12:42","slug":"spruce-up-your-course-with-html-in-canvas","status":"publish","type":"post","link":"https:\/\/websites.emerson.edu\/itg\/spruce-up-your-course-with-html-in-canvas\/","title":{"rendered":"Spruce Up Your Course with HTML in Canvas"},"content":{"rendered":"

Have you ever stumbled upon the HTML editor<\/a> in the Canvas Rich Content Editor and wondered what it was? HTML stands for HyperText Markup Language and is used to make webpages. Using HTML in Canvas allows you to organize your content and customize the look of your course. Read on for some HTML ideas you can easily incorporate into your course! <\/span><\/p>\n

How do I access the HTML Editor in Canvas?<\/h2>\n

To get started, find the Canvas item that you want to edit the HTML of, then click <\/span>Edit<\/b> on the item to get into its text editor. At the bottom right of the text editor, click the HTML editor button (<\/span><\/><\/b>):<\/span><\/p>\n

\"Screenshot<\/p>\n

Click the same button to switch back to the regular text editor.\u00a0<\/span><\/p>\n

HTML ideas and inspiration<\/h2>\n

Wrap text around images<\/h3>\n

If you like to embed images in your Canvas pages (or assignments, discussion boards, etc.), try out this technique to wrap text around your images for a new look. First, <\/span>upload and embed your image<\/span><\/a>, give the image <\/span>alt text<\/span><\/a>, and add accompanying text as you normally would. You can also <\/span>resize the image<\/span><\/a> from its default size if you wish.\u00a0<\/span><\/p>\n

Next, switch to the HTML editor. You should see your image designated by the \u2018img src\u2019 HTML attribute. Between \u2018img\u2019 and \u2018src\u2019 add the following: <\/span><\/p>\n

style=\"padding: 0 15px; float: left;\".<\/span><\/pre>\n
You can change the \u201cfloat\u201d value from left to right depending on if you want the image to appear wrapped in text on the left or right side of the page.\u00a0<\/span><\/p>\n
See <\/span>this Canvas Community blog post<\/span><\/a> by Stef for more information and a screenshot of what your page will look like after using this code.<\/span><\/p>\n
Split content into columns<\/h3>\n
Instead of the standard layout of Canvas pages, you can split your content into columns as in the screenshot below:<\/span><\/p>\n
\"Screenshot<\/p>\n
You might think that inserting a table in Canvas with invisible borders and populating it with your content is a good way to get a similar look as above, but it’s always better to use HTML rather than the built-in table maker\u2014tables must be formatted in a specific way in order for them to be accessible<\/a>, and using tables merely to control the layout of your content would result in a poorly-formatted and digitally inaccessible table. Instead, use HTML: first edit the page and add your content using the text editor as you normally would. Then, switch to the HTML editor and place this code around the content you added for each column of content: <\/span><\/p>\n
<div style=\"width: 45%; display: inline-block; vertical-align: top; padding: 15px;\"><\/span>\r\n[The HTML of one of the column's content you already added]<\/span>\r\n<\/div><\/span><\/pre>\n
Below is a screenshot of what the code looks like in my HTML Editor, with the code that creates the columns highlighted (the yellow highlights indicate the code that creates the first column while the blue highlights indicate the code that creates the second column). Click the image to enlarge:<\/span><\/p>\n
\"Screenshot<\/a><\/p>\n
To split into 3 columns, you should set the width to around 30% and adjust the padding value as well\u2014you may need to experiment with these and try out a few different combinations of values to achieve the look you\u2019re aiming for. For a more detailed explanation of this code snippet, see <\/span>birger_eriksson\u2019s post<\/span><\/a> on the Canvas Community.<\/span><\/p>\n
Adjust the size of an embedded Panopto video<\/h3>\n
You\u2019ve probably noticed that in the process of <\/span>embedding a Panopto video<\/span><\/a>, before inserting it into your Canvas page, you have the option of adjusting its size first. If you wanted to resize the video after you\u2019ve already embedded it, instead of re-doing the embed to resize, it would be easier to resize via the HTML editor.\u00a0<\/span><\/p>\n
All you need to do is change the values for \u2018width\u2019 and \u2018height\u2019 that you see in the video’s embed code (look for <\/span>iframe class=”lti-embed”\u2014<\/span>all embedded Panopto videos start with this code). The default values are 720px (pixels) for width and 405px for height. Experiment with adjusting the pixel values in the HTML editor and see what values work best for you.\u00a0<\/span><\/p>\n
Place content into a callout box<\/h3>\n
You can use callout boxes to highlight important information:<\/span><\/p>\n
\"A<\/p>\n
To create a callout box, first add all of your content in the order you\u2019d like them to appear in the Canvas text editor. Then, switch to the HTML editor. Find the code corresponding to the content you’d like to place into a callout box. Add the relevant code for the callout box around the code of this content, as in the example below:<\/span><\/p>\n
<div style=\"margin: 50px 15% 50px 15%; background-color: #ccc;\"><\/span>\r\n<div style=\"position: relative; top: -20px; left: -20px; padding: 20px; background: #fff; border: 2px solid #ccc;\"><\/span>\r\n[The HTML of the content you want placed inside the callout box]<\/span>\r\n<\/div><\/span>\r\n<\/div><\/span><\/pre>\n
When you switch back to the regular text editor you should now see a callout box with the content you isolated. You can add images, headers, and embedded Panopto videos within a callout box.<\/span><\/p>\n
Looking for more ideas or code snippets?<\/h3>\n
Canvas Community<\/span><\/a>, a forum where Canvas users can share ideas and information with each other, is a great place to browse for all your HTML inspo needs. If you have something specific in mind already and need to find out if it\u2019s possible to achieve in Canvas (and if so, how), try searching for it to see if anyone has discussed your idea previously. If you\u2019re looking for new ideas, try browsing the Instructional Designer blog (specifically the <\/span>HTML<\/span><\/a> and <\/span>code snippet<\/span><\/a> tags).\u00a0<\/span><\/p>\n
When you\u2019re browsing the Community, keep in mind that some posts are on the older side and may contain outdated information or code snippets that are no longer valid.<\/span><\/p>\n
Limitations<\/h2>\n
Please note that not all code, especially complex code, is accepted by the HTML editor in Canvas. You may find that you\u2019re adding valid code that should be reflected on the page you\u2019re editing, but after saving your work<\/span> you can see that the intended change wasn\u2019t picked up. If you check the editor you\u2019ll see that what you had entered has been removed from the HTML editor. This is an indication that what you\u2019re trying to do is not possible. For this reason we recommend sticking to the Canvas Community resources mentioned above when trying to look for HTML that will work in Canvas.<\/span><\/p>\n
Additionally, any HTML you use in your Canvas courses should be digitally accessible and functional on mobile devices. You can use the Ally accessibility checker within the Canvas RCE<\/a> to determine whether your HTML is digitally accessible, but free to reach out to us<\/a> if you have any accessibility-related questions. To ensure mobile functionality, we recommend checking that your content is appearing properly within the Canvas Teacher app<\/a>.<\/p>\n
Need more help?<\/h2>\n
Feel free to reach out to us at <\/span>itg@emerson.edu<\/span><\/a> or 617-824-8090 if you have any questions about using HTML in your Canvas course! We are not able to guarantee custom HTML solutions for every request, but we can provide best-effort to help you get started and troubleshoot HTML in Canvas.<\/span><\/p>\n
\n
Photo by Jackson Sophat<\/a> on Unsplash<\/a> <\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Have you ever stumbled upon the HTML editor in the Canvas Rich Content Editor and wondered what it was? HTML stands for HyperText Markup Language and is used to make webpages. Using HTML in Canvas allows you to organize your content and customize the look of your course. Read on for some HTML ideas you can easily incorporate into your course!<\/p>\n","protected":false},"author":2371,"featured_media":4893,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[2,3,6,10],"tags":[12,21,32,121,50,65,89],"class_list":["post-4891","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessibility","category-canvas","category-explore","category-panopto","tag-accessibility","tag-canvas-2","tag-digital-tools","tag-html","tag-images","tag-panopto","tag-web-design"],"_links":{"self":[{"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/posts\/4891","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/users\/2371"}],"replies":[{"embeddable":true,"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/comments?post=4891"}],"version-history":[{"count":28,"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/posts\/4891\/revisions"}],"predecessor-version":[{"id":4928,"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/posts\/4891\/revisions\/4928"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/media\/4893"}],"wp:attachment":[{"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/media?parent=4891"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/categories?post=4891"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/tags?post=4891"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}