Skip to main content

Creating an HTML page as training material

  • Last updated:
  • Administrators

Introduction

In your learning platform, you can embed videos, text, and pages from other websites into specific text boxes for HTML page training material, thus making your training material engaging for your users.

This article outlines how to embed videos or iframes from other websites into HTML page training material.

Please note! You can link videos from YouTube, Wistia, and Vimeo as video training material without using the HTML page training material.

Creating an HTML page training material

Begin by logging into your platform as the Superadmin. Then, access the Navigation menu. Then, in the Content and Delivery (folder icon), select the Courses item. Now, on the main Courses page, find the course in which you want to upload training material 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 pages as training material

Press the Insert/Edit video button in the 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. The image that will be displayed before playing the video. It will be the cover image of this training material. 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 training material, 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 training material. You can resize the video using the squares on the corners of the video.

Accessibility hint: Use semantic HTML to make sure that your content is accessible to everybody. Learn more about accessibility in your platform.

Uploading an HTML page

You can then move to the Additional Info tab, where you can insert a short description of the training material and select a thumbnail. You can also upload a thumbnail, if desired.

You can also add tags to your training material to improve its searchability in your platform’s global search. If the auto-tagging feature is enabled in your platform, some tags may be automatically generated based on the content of your asset, as understood by your platform using artificial intelligence. Auto-tagging relies on the platform’s ability to extract text or generate a transcript. See the complete list of supported content types for text extraction and transcript generation. You can edit or remove tags at any time, with a limit of 15 tags per training material and of 32 characters per tag. 

Now, press Save Changes to create the training material, 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 training material appears to your users.

Adding iframes to HTML pages as training material

You can also add iframes to your HTML Page training material, so you can show different web pages inside your courses. Once you're on the upload page for the training material, add a title and insert text into the description text box, as necessary.  

Inserting an iframe as an HTML page training material

In order to add an iframe to the training material, you must first insert the URL you are planning to include in the list of URLs allowed within your platform.

To do so, access the Navigation menu. In the Configuration (spanner icon), select the Platform setup and tools item, then press the Advanced settings subitem. In the Advanced Settings menu, select the E-Learning tab. In the Iframe Allow List section, type the URL into the corresponding text box, then press Add. It will now be properly displayed on your platform. Please note that URLs on the allow list do not accept wildcard characters, or placeholders such as (*).

Once you've added the URL to your allow list, you can insert the iframe into your HTML training material. In the description box on the upload page for the training material, choose the Source code icon. html page source code Then, insert the URL between the following tags

<iframe src="https://mydomain.com"></iframe>

and replace https://mydomain.com with the URL you want to insert in the iframe. Please remember that the training material will be marked as complete when the user opens its page.

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 training material.
  • Use it when you want to show an external website or page to the user.
  • To keep your HTML page safe, avoid using JavaScript functions like onmouseover and onmouseout in button codes as they can be exploited in Cross-Site Scripting (XSS) attacks. Also, be cautious with CSS3 code, as it may pose security risks and could be partially or entirely stripped for safety measures.