Creating an HTML Page as a Learning Object

Learn how to create an HTML page in your courses

Last Updated

August 8th, 2019

Reading Time

4 min

User Level

DISCLAIMER: Some content in this article outlines how to use functionalities with the new Course Management. Check out this article for further info.

Introduction

In your learning platform, you can embed videos, text, and pages from other websites into specific text boxes for HTML page learning objects, thus making your training material engaging for your users. This article outlines how to embed videos or iFrames from other websites into HTML Page learning objects.

Please note: You can link videos from YouTube, Wistia, and Vimeo as video learning objects without using the HTML page learning object.

Creating an HTML Page Learning Object

Begin by logging into your platform as the Superadmin. Then, access the Admin Menu from the gear icon in the top right corner. Then, in the E-Learning section, click on the Course Management item. Now, on the main Course Management page, find the course in which you want to upload a learning object from the list of courses, click on its description and move to the Training Material tab.

Press the Add Training Material button. From the dropdown menu, select HTML Page. On the upload page, begin by typing in a title and description into the corresponding text boxes. For the description, you can edit the text as necessary. Now, you can insert videos, photos, or iFrames as desired.

Inserting Videos or Photos into HTML Page Learning Objects

Press the Insert Video button in the markup toolbar at the top of the description text box. In the pop up box, fill out each text box as necessary:

  • Source. The video’s URL.
  • Alternative Source. An alternative URL for the video.
  • Poster. An image that will be displayed before playing the video. It will be the cover image of this learning object. Press the folder icon next to the text box to upload an image. Once you select the image, press Insert.
  • Dimensions. You can set your own dimensions for the learning object, if necessary. You can also flag the option to constrain proportions.

Alternatively, you can click on the Embed tab at the top of the pop up box to configure the code of the video. When you’re finished, press the OK button at the bottom of the pop up box. The video will now appear in the description text box for the learning object. You can resize the video using the squares on the corners of the video.

html page create

You can then move to the Additional Info tab, where you can insert a short description of the learning object and select a thumbnail. You can also upload a thumbnail, if desired.  You can also add tags to your learning object to improve its searchability in your platform’s global search. Some tags may be automatically generated based on the content of your asset, as understood by your platform using artificial intelligence (note that this only works for English content). You can edit or remove tags at any time, with a limit of 15 tags per learning object. To ensure that your content is a supported file type for the auto-tagging functionality, please review the list of supported content types here.

Now, press Save Changes to create the learning object, which will now appear in the list of training materials on the course’s Training Materials page. You can switch to learner view by using the Learner View button in the action bar at the top of the Training Materials page. In the learner view, you can view how your new learning object appears to your users.

Adding iFrames to HTML Page Learning Objects

You can also add iFrames to your HTML Page learning objects, so you can show different web pages inside your courses. Once you’re on the upload page for the learning object, add a title and insert text into the description text box, as necessary.

HTML page

In order to add an iFrame into the learning object, you must first insert the URL you are planning to include into the Whitelist allowed within your LMS. To do so, access the Admin Menu, then press the Advanced Settings item from the Settings Section. On the Advanced Settings menu, select the E-Learning tab. In the iFrame Whitelist section, type the URL into the corresponding text box, then press Add. It will now be properly displayed in your platform. Please note that Whitelisted URLs do not accept wildcard characters, such placeholder as (*).

html page Advanced settings

Once you’ve added the URL to your Whitelist, you can insert the iframe into your HTML object. In the description box on the upload page for the learning object, choose the Source code icon.

html page source code

Then, insert the URL between the following tags <iframe src=”http://mydomain.com”></iframe> and replace http://mydomain.com with the URL you want to insert in the iframe. Please remember that the object will be marked as completed when the user closes the page using the ‘X’ close button at the top of the page for the learning object.

Best Practices

Keep the following best practices in mind when creating and managing an HTML page:

  • Use it in a course as the first element, in order to create an introduction to your course. The main difference between an HTML page and a Course Description widget is that in the first case the introduction will be immediately visible without scrolling down the page.
  • Use it to provide instruction about how to use learning objects.
  • Use it when you want to show an external website or page to the user.