Instructor Support for Educational Systems

How do I use HTML templates in my content?

Updated on

This article explains how you can use HTML templates in the content of your course.

Tip! Click here for tips & tricks and important notes regarding using HTML templates in Brightspace.

If you create an HTML document, you can use templates to structure your text and images. 

Note: Applying the template to an existing page will overwrite the content and you will lose your work. Click Cancel to discard the changes.

Add a template

  1. Go to the unit/lesson you want to add content to.
  2. Click on Create New in the top right corner.
  3. Click on HTML Document.
  1. Type in your title.
  2. If you do not want to use an example template, start typing below the ribbon. Else, see step 4.
  3. Add your own images, add formatting, add tables, etc. 
  4. If you would like to use a template, click on Templates in the top right corner and select one. The templates provide an example structure for the content item. You can add text, images, videos etc. Choose a template that best suits your content.
  5. Set the item to Visible if you want to immediately make it visible to other users in your course, or keep it Hidden until you are ready for others to see it.

Tips & Tricks using HTML Templates

Below you can find a couple of Tips & Tricks regarding the use of HTML Templates within Brightspace. 

Designing unit/lesson pages

You can select a HTML Template only when you add HTML files to your content. They can be used in a unit or lesson page, but they cannot be selected.

If want to add them to a unit or lesson page, you have to copy the HTML code of the template into the HTML code of the unit or lesson page.  

Start your unit and/or lesson page with a HTML template page to provide information in a neat and structured way.

Work in a bigger HTML source editor screen

It can be very cumbersome to use the tiny HTML source editor screen which appears in the HTML file editor when you decide to add content. Via Manage files you can have access to a much bigger screen to the HTML source code. Below you can find the steps to follow.

Steps to follow

  • Go to Course Tools > Course Admin > Manage files.
  • Click on the arrow next to the HTML file you want to adjust.
  • Click on Edit File.
  • Use the resize icon in the bottom right corner to enlarge the screen.
  • Click on the HTML Source editor icon in the bottom bar.
  • Now you have a big screen to tweak your HTML code.

Copy/Paste elements from HTML templates

Below you can find an advised way to copy HTML elements into the final version of your HTML page in Brightspace. 

Preparation for copying elements

  • Go to your course
  • Click on Content > Add > HTML document
  • Load your desired HTML template; e.g. 01_Course_Introduction.html
  • Open a new internet browser tab or window, and again go to your course and open another HTML Document. This second window will function as your notepad where you can load another template etc.

Copying HTML elements

  • Load the HTML template with the elements you wish to copy in your second window. If you want to use the whole template, it is better to load that template in your 1st window.
  • Copy elements from the 2nd screen into the 1st screen.
  • You can change the templates in the 2nd screen and copy different elements from multiple templates.

Copy/Paste text from other sources

We do not advise you to copy formatted text from a word document or other source files onto Brightspace. It is advised to paste plain text without formatting (ctrl, shift + v / cmd, shit + v). 

Faulty HTML code can be a source of many unwanted behavior. Not only can the text look very different in edit mode and live mode, but it can disrupt the look and feel of the Leiden University Templates as well. 

Below you can find an advised way to convert a word document into a HTML page in Brightspace. 

Preparation

  • Go to your course
  • Click on Content > Add > HTML document
  • Load your desired HTML template; e.g. 04_Basic_Page - No Banner
  • Open your Word document 

Copying from Word

  • Regular paragraph text: 
    • Select and copy the paragraph
    • With your cursor go to the desired place within the HTML document
    • Right click your mouse and select paste as plain text (ctrl, shift + v / cmd, shit + v)
  • (un)Ordered list - whole list:
    • Select the (un)ordered list in Word
    • Click on the list icon; to lose the bullets/numbers 
    • Copy the list 
    • With your cursor go to the desired place within the HTML document 
    • Right click your mouse and select paste as plain text (ctrl, shift + v / cmd, shit + v) 
    • Click within Brightspace on the list icon; to make it a list again. 
  • (un)Ordered list - per element/bullet 
    • In case you want to use the Large Number list or the check mark list it is advised to copy the list per bulletin/number.
    • Select the (un)ordered list in Word 
    • Click on the list icon; to lose the bullets/numbers 
    • Copy the top bulletin and paste it as plain text behind the large 01 or the check mark
    • Repeat for all elements, until completed. 


You can use the tips above for other sources; like web pages. Just keep in mind to paste text as plain text!

Previous Article How do I create and add a HTML document to Content?
Next Article Short video: HTML Templates (English only)