Skip to content
Instructional Design Knowledge Base
Instructional Design Knowledge Base
Share
Explore

icon picker
HTML, Manage Files, Bootstrap

HTML

D2L Brightspace’s HTML Editor is integrated throughout all of the tools, discussion topics, Dropbox folders, etc., and provides a quick option for HTML content creation. Any code should be as accessible as possible. This is important as some users may only have a keyboard or may need to use a screen reader. They may be accessing the course using any number of devices from their phone, laptop, or tablet. Pages should also be as responsive, as possible, and work well within different browsers.
General things to keep in mind as you create or edit HTML.
Keep accessibility in mind.
Proper use of Headings.
Close all HTML elements (<p></p>).
Keep it simple and easy to maintain.
Include HTML comments as necessary to explain complex code.
Avoid inline styles, especially in complex html documents.
Make your code easy to read.
Do not add blank lines without a reason, but do add them for readability. Add blank lines to separate large or logical code blocks.
Do not use unnecessary blank lines and indentation.
When using the Bootstrap template to build Instructional Materials, make sure to revise and edit in the HTML file using a program like Dreamweaver, then upload/replace the file in the content area. Using the built-in HTML editor in D2L will scrub some divs and break the formatting in places.

Manage Files

You can also create HTML, CSS, and JS files offline and upload them into the course shell’s Manage Files tool. The Manage Files tool is a file management system for the course. You can use this tool to organize and upload files associated with the course. You should organize files following best practices for a small website directory structure. Manage Files should be organized following the structure provided by the LiveWebFiles located in the template files.

⁠
image.png
⁠
⁠

You can add folders, as necessary, for additional files like PowerPoint, Documents, etc. to help with organization. If you work offline, you can zip up the contents of the LiveWebFiles folder and upload it Manage Files. Make sure your folders are located in the root folder and not within a folder. While everything will still work, adding extra folders can make maintenance of the html files tricky.Make sure to remove any unused or archived files from Manage Files. There is no need to archive files, as old courses are not cleared out.

Bootstrap

The template we use for the weekly Instructional Materials incorporates
Bootstrap
⁠
, which includes CSS, JS, along with
Font Awesome
⁠
and many prebuild components. Check the template for the versions.
Bootstrap includes a number of prebuilt components. Feel free to explore the options as you build, however keep in mind that the code must be accessible and work on multiple browsers, as well as different devices.
The Bootstrap template also uses a javascript Slickquiz knowledge check template at the end of each week. Review the
Building a Slickquiz Knowledge Check
⁠
instructional video for more details on how to manage that code.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.