Instructor Support for Educational Systems

How do I use the HTML editor?

Updated on

The options explained here relate to the HTML editor, not the text editor that appears when creating a "New unit". The reason for this is that the primary purpose of a "New unit" is to provide structure to a course, while the HTML editor is aimed at editing the content itself.

The HTML editor can be used to edit texts in for example Discussions, HTML documents and Assignments. In this article we will explain what functions the HTML editor contains and how you could use them.

  1. Paragraph Style Options: Choose from various styles for your paragraphs (e.g., Heading 1, Heading 2) to create different titles and paragraphs.
  2. Text Formatting Options: Select from various formatting options (e.g., style, color, size) to change different parts of your text.
  3. Paragraph Formatting Options: Choose the formatting for your paragraphs (e.g., Align Left, Increase Indentation, Bullets). You can also opt to type text from right to left instead of left to right.
  4. Insert Stuff: Add a file, video, or link.
  5. Insert Quicklink: Add a link to course materials.
  6. Insert Image: Add an image.
  7. Other Insert Options: Add other elements here (see here for an overview).
  8. Format Painter: Copy the text formatting from one paragraph and apply it to another.
  9. Accessibility Checker: Check the accessibility of your written paragraphs (e.g., Have you used the correct paragraph formatting?).
  10. Word Count: View the word count of your document.
  11. Preview: Here, you can view the text in a preview mode, allowing you to see the content and ensure it is displayed as intended before saving changes.
  12. HTML Source Editor: Format the content using HTML code that structures and styles the content. Use this view if you have experience with HTML codes.
  13. Due Date
  14. Start Date
  15. End Date

Other Insert Options

The purpose of Insert Practice is for students to test themselves and make learning interactive; therefore, there is no connection with grades in the Grade Book! For that purpose, continue to use quizzes or assignments.

  1. Equation: Add a (mathematical) equation here.
  2. Table: Add a table.
  3. Attributes: Add HTML attributes to (selected) content.
  4. Divider: Add a dividing line.
  5. Emoji: Add an emoticon.
  6. Symbols: Add a non-standard symbol.
  7. Insert Code: Insert a piece of code (such as JavaScript, Python, & C++).
  8. Insert Element
    • Use this to make the HTML page visually more attractive with a number of standard elements. Selecting an element will open a dialog box where information/images can be added to the template, depending on the chosen element. After adding the desired content to the element, you can view a preview via Preview. If it looks proper, the element can be inserted via Insert. Then, by clicking on an element in the HTML editor, the element can be modified, deleted, or moved.
  9. Insert Practice
    • With Insert Practice, you can use the HTML editor to allow students to test themselves on the material and make learning interactive. Depending on the chosen Practice, a dialog box will again be opened where questions and answers can be entered. A connection to the Grade Book is not possible - use Quizzes or Assignments for that.
  10. Layouts: Add multiple panels side by side. Depending on your choice, a number of panels will appear in the form of blocks. Then add content in the usual way in the panels in the editor.


Examples for Insert Element

Example 1: Accordion

'Accordion' is one of the option you can use for Insert Elements. As you can see in the example below you can collapsible items which open and close when clicked on. Here it will give you more information depending on which arrow you click on. 

Example 2: Carousel

Another example from Insert Elements is 'Carousel'. With the 'Carousel' template you can upload any number of pictures and make a slide show within a Brightspace course HTML page. By clicking on the arrows below the picture you move to the next or previous picture.

Example for Insert Practice  

Example 1: Fill in the blank

One of the options under Insert Practice is fill in the blank. Fill in the blank let's you fill in blank spaces in sentences as you can see in the example below. Afterwards you can check if the answers are correct.

Previous Article Short video: How do I add content?
Next Article What files can be downloaded by students?