HTML Code Tutorial

HTML image from the side We all use the Rich Content Editor to design our Canvas pages, as explained in the article What is the Rich Content Editor? from the Canvas Basics Guide. You have additional design options when you use the Canvas HTML editor (or the HTML/CSS editor), which is a mixture of formatting and scripting languages and codes. Here is Gregory Breyer's explanation of HTML and CSS (from an OTC 2019 workshop):

HTML

HTML (Hypertext Markup Language) provides the structure and content of your Canvas page. Content can be text, images, list, tables and other objects. If you create a page in the Rich Content Editor and then click through the HTML Editor, you will see that some HTML has already been added. HTML is what surrounds your content in matching tags. Tags are code with an opening tag and a closing tag which are surrounded by braces (also known as angle brackets or Less Than, Greater Than or < >).

A Header Tag would be written like:

<h2> my header </h2>

CSS

CSS or Cascading Style Sheets is where the real design magic happens. CSS is a collection of design instructions which are specifically formatted as part of the HTML. It is placed inside the opening tag after the tag and before the second brace HTML can include a style attribute. This is written like:

style = " "

So the h2 tag we saw above would have red text applied using the Following CSS inside the h2 tag.

<h2 style = "color: red;" > my header </h2>

Note that inside the style attribute quotes is a CSS property name, a colon, a property value, and a semi-colon.

Using HTML

Canvas makes it easy to toggle between the Rich Content Editor (RCE) and the HTML Editor, using the </> icon.

Many of the design resources in our Graphic Elements Table offer you the code to copy and paste into your pages.

Steps to see the HTML Code:

Edit your Canvas Page.
Toggle to the HTML editor by clicking the </> icon.
Paste your code in the appropriate place for your page design.
Toggle back to the RCE and make final edits.
Save the Page.

Important Icon You may need this article from the Canvas Instructor Guide: How do I use the HTML view in the Rich Content Editor as an instructor?

Raw and Pretty Code

You have the option in the HTML editor to view the code as "raw" or "pretty" with this toggle.

Toggle Raw and Pretty Editors

The pretty HTML editor displays line numbers and syntax highlighting with color and indentations. The raw HTML editor allows more keyboard shortcut commands (such as for copy and paste). The current default opens the raw HTML editor at the bottom of the page. If you toggle to the pretty HTML editor, you jump to the top of the page.

Pretty and Raw Codes

View Page History

If you make a mistake when working in the code, you can either exit the editor without saving by using the "Cancel" button or you can restore a previously saved page version using "View Page History" in the vertical ellipsis menu.

Arrows to View Page History

Important Icon You may need this article from the Canvas Instructor Guide: How do I view the history of a page in a course?

Video

Watch the 6 minute video below on using the HTML editor to add a shadbowbox to a Canvas page. One of our favorite resources for learning about HTML is W3Schools HTML Tutorial .

Return to Graphic Elements Table