Page Editor

How to Use the (HTML) Page Editor

Any time you create a new Announcement, Content Topic, or even Quiz Question, you'll be working in the HTML Page Editor's "Design View." The design view loads automatically when you create or edit material.

Design View allows you to create and modify your course materials in a "what you see is what you get" (WYSIWYG) environment without needing any prior knowledge of HTML coding. 

Don't panic! You don't have to know anything about HTML or coding to successfully use the editor.

Tool Bars and Viewing

Heading levels

Take a look at the image above. The tools across the top of the window allow you to insert images, videos, tables, and other items; format your text; write mathematical formulas, and do a host of other chores. Click the down arrows for more tools, and on the far right of the top toolbar, click the ellipses icon to discover even more tools!

The tools in the bottom right corner allow you to control your editing view. Use the Toggle Fullscreen icon to maximize the default design window. If you edit your materials in fullscreen, click the toggle button when you're done so you can save your work. You cannot save your work while in fullscreen mode. You can also left-click your mouse and drag the Editor Resize icon to resize the viewing area.

Here's a handy tip: hover your mouse over any icon to find out the name of the tool. This gives you an idea of what the tool does.

Commonly Used Editing Tools


insert stuff button

When you click this icon, you'll get a pop-up menu offering you numerous options for inserting different kinds of "stuff," such as YouTube videos, Flickr photos, and videos from your own computer.

  1. Click the "Insert Stuff" icon.
  2. In the popup box, select the type of media you are inserting.
  3. From this point, the type of media you select with determine the steps you will take to upload your stuff.


Insert Image Button

To add an image:

  1. Click the "Insert Images" icon.
  2. In the popup box, select the location where you've stored your image. 
  3. Drag and drop your image into the box defined by the dashes, or click the "Upload" button to browse to your image.
  4. Click the blue "Add" button.
  5. In the new pop up window, add alternative text (alt text) for the image. For more on alt text, see the How to Add Images or Multimedia page in Module 4: Accessibility.
  6. Click the "OK" button.


Quicklink Button

When you click this icon, you'll get a popup window with several different kinds of pages you can link to. Some of these pages are within your class, like Announcements and Discussion Topics. Others are outside of the Vol State system, such as web links.

To create a link, write link text that describes the link's destination. Use this descriptive text as the link instead of the web address (URL). Then:

  1. Highlight the descriptive text for the link (ex. Volunteer State Community College).
  2. From the toolbar, click on the "Insert Quicklink" icon.
  3. Select Url in the Insert Quicklink window.
  4. Click the "Insert" button.


Format Tool Button

This tool gives you formatting options to make content look nice and be accessible to students with disabilities. When you click the pull down arrow you'll find several formatting options, such as Heading 1, Heading 2, and Paragraph.

Highlight your text, then select the appropriate formatting option. For more information on formatting, go to the Formatting page of the Accessibility section of this course.


List Tool Button

When adding items that are in a list use the built-in list tools.

  1. Select (highlight) the content you want to make into a list.
  2. From the toolbar, click the Unordered/Bulleted List icon if the order doesn't matter. Select the Ordered List from the drop-down menu if the order does matter.


Accessibility Checker Button

Use the Check Accessibility tool to make help ensure your work is accessible to all students. Caution: this tool can issue a "false positive." In other words, it may note you have an accessibility issue when you do not. The best way to use this tool is to learn more about making your materials accessible so  you can judge if the tool has correctly found inaccessible materials needing your attention. Be sure to review Module 4: Accessibility. We include several links to resources in Module 4 to help you learn about creating accessible materials.


Article ID: 57989
Mon 7/23/18 10:52 AM
Wed 8/1/18 3:50 PM