Saturday, February 11, 2017

Creating an HTML Page

Here are the steps to follow if you want to create a Ready-to-Use Canvas Page for your users to copy.

To get started, take a look at this pair: #OklaEd Chat Page and  #OklaEd Chat HTML. At the end of this process, you will end up with a similar pair of pages to share with your audience.


To share your Pages, you'll need a public course space in which to do this so that you can share links to the content with others. It's easy to create a public course space; see instructions here for creating a public course space and then adjusting some course settings to make your public space more user-friendly.

Now you are ready to create your Ready-to-Use Page with HTML:

1. Create Widget Page. In one browser tab, create your Widget Page. Here are tips on creating a table with the widget in the right column and explanatory information in the left column, and here's an example to guide you: #OklaEd Chat.

2. Create HTML Page. In a separate browser tab, create the Page that will house the HTML content. Give the page a title that indicates it contains the HTML content.

3. Copy HTML Code. Go to the Widget Page and toggle to the HTML mode. Highlight the entire contents, and then copy.

4. Paste HTML Code. In the other tab with your HTML Page, paste in the HTML code, but do that into the Rich Content Editor, NOT in the HTML view. Save and publish the page, leaving the page open in your browser. You will need the address to create a link in your Widget Page.

5. Connect Page to HTML. Now, go back to the tab where you have the Widget Page open, and edit the page in HTML mode. Paste in this HTML code to add a new area up at the top of the page, adding it at the very start of the page before the current contents:

<hr>CONTENT GOES HERE<hr>

Then, switch to the Rich Content Editor, and type in the text where it says "CONTENT GOES HERE," creating a link to your HTML page with the address you see displayed in the other tab. Here's an example: #OklaEd Chat Widget Page. When you are done, Save and Publish.

6. Connect HTML to Page. Now, do the same thing again in your HTML page in the other tab. You'll need to switch to the HTML Editor. Just like you did for the other page, paste in the "Content Goes Here" snippet. Then, switch back to the Rich Content Editor and create the link. Here's an example: #OklaEd Chat HTML Page. When you are done, Save and Publish.

You're done! Now you have two pages that will allow faculty members to preview the contents of the page they are adding, while also giving them the HTML content that they can use to easily add the page to their Canvas site.

You'll want to share the link to your Ready-to-Use Page with your faculty, along with instructions for adding the page to their Canvas course. I've written up step-by-step instructions here which you can link to and/or copy and modify for your own use: Copying an HTML Page.

For more advanced sharing options, you'll want to use the Canvas Commons. But if you are looking for a quick-and-easy way to share a Canvas Page with your faculty, this should work!

No comments:

Post a Comment