Using Generative AI to create content and HTML in Canvas

Tips and Tricks for those less familiar with the use of tools such as ChatGPT or CoPilot for producing teaching and learning content

📄 Ben's CANVAS Tips and Templates
✨ Share Your Feedback

Introduction
Templates
Using HTML
Using AI
What Now?

About this page of content

Who is this page for?: Colleagues working in FE & HE who want to produce a higher standard of teaching and learning content in software such as Canvas LMS.
What does it include?: This content is an overview of the Canvas support content developed by Ben Jane at Plymouth Marjon University in Dec 2024 to Apr 2025 and contains brief guides on how to use this support content.
Why is it Canvas Support #1?: While this resource highlights a step change in how we can use Canvas, it is not presented as the final style guide, standard or expectation for MEGA projects. While this work does appear to be significantly better than anything else on offer we need wider engagement with this approach, more experimentation with adopted and adapted versions [...and possibly some design input from someone with proper skills in this area - BJ] before this might serve as a standard or expectation. In the meantime, I think we can produce some great content using these approaches and it's offered here for use by anyone who thinks it will add value..
How to use this resource: I've set up this support resource in one of my templates to illustrate what is possible in Canvas. There are a few tabs across this page that should be self-explanatory. Dive in wherever you want to.
What about more support?: Once colleagues have reviewed this resource, we can talk about what other support you might need to help develop new resources in Canvas pages.

Key Principles of this approach

Shared templates and page elements.
Ideas for generating new templates and elements.
Finding spaces for more conversations about what works and what doesn't work in Canvas.
The design approach...
- More content on Canvas pages that have a narrative structure wrapped around teaching and learning content (i.e. not just ppt slides)
- A website approach to presenting course content.
- User-centred design
- Simplicity
- Visual Hierarchy
  - Minimal scrolling....have as much important content and navigation "above the fold

The Design Content on offer

I've produced a number of resources for developing content on Canvas pages
Click the dropdown box, "About This Resource" for a video explainer of the content
Content includes:
- Page templates
- Specific Design Elements that can be dropped into pages that you design
- Other content like; Using AI to produce quizzes, embedding files, making videos using OBS

🔗 Visit: Home Page to view a selection of templates made available for the public

⏯️ Watch: The video below is the one hosted at the top of my Canvas Template page. It is 7 min and gives an overview of the content available in my original resource

HTML: The Basics

Use of these templates involves engagement with the HTML editor on a Page in Canvas. This can be quite daunting for those that have not done it before. However, it does not require much (any) knowledge of HTML coding to use these templates and only minimal knowledge to edit it. Importantly, the advent of generative AI means that code can now be manipulated using AI and by using prompts that are quite descriptive and not particularly technical.

Getting Started with HTML in Canvas LMS

1. Using HTML Toggle Function

Access the HTML editor by clicking the "< />" button at the bottom of the Rich Content Editor.
Copy and paste provided HTML templates into the editor.
When adding new text, replace existing text within the HTML structure rather than inserting it into blank spaces.

2. Navigating HTML Structure

Identify section start and end tags (e.g., <div> and </div>).
Copy or delete entire sections by selecting all content between opening and closing tags.
Modify attributes like height or color within tags.

3. Managing Line Spaces

Look for <p> </p> tags, which is a line space (a non-breaking space entity).
Add or remove <p> </p> tags to adjust spacing between elements.

4. Troubleshooting

Try ctrl-Z undo if you haven't saved it yet.
Consider the restore page function (see page versions at top right of your page when saved).
Ask AI for help:
- Copy the entire HTML snippet.
- Paste it into an AI assistant like ChatGPT or DeepSeek.
- Ask specific questions, such as:
  - "Why does the second section not look like the first section? Can you please change it to match?"
  - "Can you tidy this section up so all the line spacing is consistent?"

Tips for Success

Using HTML in Canvas can seem daunting but it's about as hard as academic referencing:
- Attention to detail is key.
- Rules may seem complex at first, but they become easier with practice.
Use the "Preview" function in Canvas to check your work frequently.
Start with small changes and gradually build complexity.

Remember, making mistakes is part of the learning process. If you encounter issues, take a break and return with fresh eyes, or ask a colleague for help.

📖 Read: How do I use the HTML view in the Rich Content Editor?

📖 Read: A very basic introduction to HTML

🔗 Example: Accordion Header Examples

⏯️ Watch: It's not essential to learn much about HTML code but this video shows some of the components parts of Dropdown menus and how we can edit the code to adapt the resulting feature of a page

Using AI for coding

Here's a guide for using generative AI to develop and enhance HTML code, tailored for teachers with limited coding experience:

If the code that AI produces doesn't work in Canvas: Remind the AI tool that you are "unable to use CSS or JAVA and that you are only using the HTML editor in Canvas LMS as a teacher" maybe, "I have this code that I know does work though....[insert code]".

Leveraging AI for HTML Development

1. Code Cleanup and Formatting

Use AI to tidy up your HTML code when:

Something goes wrong and you need to fix errors.
The formatting needs improvement for better readability.

Example prompt: "Please clean up and format this HTML code for better readability: [paste your code here]"

2. Creating New Templates

Generate new HTML templates based on elements you know work well:

Describe the layout and components you want.
Specify any particular styling preferences.

Example prompt: "Create an HTML template for a class homepage with a header, navigation menu, main content area, and footer", maybe also include HTML for sections and designs that you want included.

3. Color Scheme Modifications

Utilize AI to suggest or implement color changes:

Describe your desired color scheme or mood.
Provide any existing color codes you want to incorporate.

Example prompt: "Modify this HTML to use a warm, autumn-inspired color scheme for text and backgrounds", or "please use a color scheme on this template that matches this color [insert color code]".

4. Generating Content

Create subject-matter content to populate your HTML:

Specify the topic and desired length.
Indicate any key points to include.

Example prompt: "Write a 200-word introduction about key counselling skills for a peer to peer mentoring project".

5. Combining Templates and Content

Merge existing HTML templates with newly generated content:

Provide both the template and the content.
Specify how you want the content laid out within the template.

Example prompt: "Insert this content about the water cycle into the main content area of the following HTML template, maintaining the existing structure: [paste template and content]".

6. Accessibility Enhancements

Improve the accessibility of your HTML:

Ask AI to add appropriate alt text for images.
Ensure proper heading structure.

Example prompt: "Review this HTML and suggest improvements for accessibility, including adding alt text to images and ensuring proper heading hierarchy".

7. Responsive Design Elements

Incorporate basic responsive design principles:

Request mobile-friendly adjustments.
Ensure text readability on different screen sizes.

Example prompt: "Modify this HTML to be more mobile-friendly, ensuring text is readable on smaller screens".

Remember, while AI is a powerful tool, always review and test the generated code to ensure it meets your specific needs and functions correctly in your learning management system.

📖 Read: Prompts for HTML Template Generation with AI - https://writingmate.ai/blog/html-template-generation-ai

Check Your Understanding

Check Your Understanding

Specific Example: Imagine you are designing a new Canvas page for a course module. You want to use HTML to create a visually engaging layout but are unsure where to start. What should you do to ensure your page is both functional and visually appealing?

A. Use a pre-designed HTML template from Ben's Canvas Tips and Templates, then customize it using the HTML editor.

B. Avoid using HTML and stick to the Rich Content Editor, as HTML is too complex for beginners.

C. Copy and paste random HTML code from the internet without testing it in Canvas.

Correct! Using a pre-designed HTML template is a great way to start. You can customize it using the HTML editor, and tools like AI can help you make adjustments without needing advanced coding skills.

Incorrect. While the Rich Content Editor is useful, learning basic HTML can significantly enhance your Canvas pages. Start with templates and gradually build your skills.

Incorrect. Copying random HTML code without understanding or testing it can lead to errors and broken pages. Always use trusted templates and test your code in Canvas.

Suggested Actions

The best way to find out what is possible in terms of production of teaching and learning content in canvas is to have a go. Here are some suggested activities:

Set up a new page in any Canvas space....go to the template page and copy some HTML...drop it into your own blank page and start playing with it.
- The template page is here Ben's CANVAS Tips and Templates
Try combining use of generative AI (ChatGPT, Deep Seek, perplexity.ai, Gemini) with your development of new pages by pasting HTML in to the AI and requesting ideas, and new code to try out.
- The toggle between Rich Text Editor and HTML editor is your new friend! </>
- Remember!....to see how it will look on the page you will probably need to SAVE the page and view it outside the editor.
- If you make any wrong turns....restore previous page....ask AI....try building in a draft page and then copying across to it's final destination....ask others

Workshop

The document below has notes and content from the Workshop held 28/2/25.

Access the Editable document here

↑ Go to the top of this page