HTML templates can be used to create engaging and interactive content layouts within a D2L Brightspace course. Templates include both text layout pages, such as introduction and conclusion layouts, and dynamic pages with interactive elements, such as accordions and tabs. You can view examples of HTML templates in the Brightspace Tools Course (self-enroll through this link) under the HTML Content Pages module. HTML Templates are powerful, but can be tricky to setup and configure. You must create your HTML Templates carefully to ensure that the page elements do not break. Heed the warnings on the page below, and reach out to TLS Support if you have questions or need assistance.
What are the benefits of using HTML templates?
Templates improve the look and feel of courses, and can help you organize your content more meaningfully by adding page elements. HTML templates aredesigned to meet Universal Design for Learning and Accessibility standards (WCAG). Templates include formatting styles, such as heading levels and paragraphs, that help create content that is accessible for assistive technologies.
Applying a template to an existing page will overwrite the content and you will lose your work. We recommend selecting and applying the HTML template before adding content (images, videos, etc.) to the Brightspace editor.
Most HTML Templates will not require you to make any changes to the HTML code. We do not recommend editing the original templates as this can break the HTML code.
Important Processes for Using HTML Templates
When building HTML pages, you will need to follow a specific workflow to ensure the elements in the template won’t break. Follow this process as you build your templates:
Re-name your files meaningully to ensure you know what that image or document is about. This will make the process easier for you when embedding these elements on your web pages.
Create folders in the Manage File section that correspond to the elements you are bringing in. For example: Create a main folder called Module 1 and inside that folder create sub-folders called Module 1 Images, Module 1 Documents, and then insert all the images and documents in their specific folders. This will help you get organized and locate the items you need faster once you are creating your pages.
Once all your documents and images are named and placed in the proper folders, then you can proceed to the creation of the webpages.
You might also want to add a sub-folder in each module in the Manage File section called Html Pages. Once you create your webpages, you can change the new path to those pages in that folder. This way all your webpages will be located in a specific folder allotted to them.
WARNING: Be careful with content in the Manage Files area of Brightspace. Do not re-name the images and documents you place inside the folders, and do not re-name the folders, nor move items from a folder to another folder after you have created the webpages. Doing so is likely to break the elements you have on your webpages.
To use and edit HTML templates, you first need to create a file in the course module you wish to add the template.
WARNING: Brightspace loads all videos to an HTML page even if they are “hidden” in accordions or tabs. We recommend only uploading 4-5 videos per webpage to minimize page loading time.
Log in to Brightspace with your MyCarletonOne credentials.
On the Brightspace homepage, locate your course in one of the following ways:
Click on the course tile under the My Courses widget.
Click the Course Selector Grid and select the course from the drop-down menu. If you are enrolled in more than 20 courses, you can search for the course name using the search bar.
In the navbar, click Content.
Under Table of Contents in the left sidebar, click on the module or submodulewhere you would like the HTML Template to be located.
TIP: When beginning to build your course, it is considered best practice to create a hidden module that houses every content template, so you can use this as a reference. For instructions on how to add or edit a course module, see Adding Modules or Sub-Modules.
In the drop-down menu, select Create a File.
Enter a Title.
Click the Select a Document Template button to view the available template options.
NOTE: Each template offers instructions on how to customize its contents to fit your content.
TIP: Replace the default images in the templates to make the visuals more meaningful to your learners and course content.
In the drop-down menu, select a template you want to apply to the file. Template options include:
intro: This template features a full-screen image for visual impact and a clean area for a course description. Note: the images on a template can be replaced by any images of your preference.
module_intro: This template features a prominent banner image across the top and a numbered list could be used to list a module’s learning objectives. This makes it ideal as the first page of a module in a course.
Once you select the template, start editing and customizing it in the HTML Editor (see example below). For instructions on how to upload or format content in the HTML editor, see Using the HTML Editor.
TIP: To view how the template will appear to students, click the Preview icon
When you finish editing. Click Save and Close.
Watch the video tutorial below for an overview of using HTML Templates in Brightspace: