In This Article
Editing HTML in the Lesson Builder
The text element in the lesson builder has the option to edit HTML (Hypertext Markup Language), allowing more customizability to the lesson being created.
After adding the text element > select "Edit HTML" > the text box will change to a black window displaying HTML formatting.
When using HTML code, information is grouped between two carets < .. >. The information between these carets is what tells Learning how to format the text in the lesson builder.
HTML Element Syntax
Tag - tags define where the element starts and ends.
Attribute - lives in between the carets. It consists of a name such as style.
Value - is the modification occurring to the attribute. An example of value would be: "color:yellow."
Element Content - tells the builder the text in the element content should be yellow.
Supported HTML Modifications
The text element supports the following HTML formatting tags:
Paragraph: <p></p>; <br></br>
Italic: <i></i>; <em></em>
Bold: <b></b>; <strong></strong>
Underline: <u></u>; <p style="text-decoration: underline;">
Strikethrough: <s></s>; <strike></strike>
Font Color: <p style="color:yellow"></p>; <span style="color:yellow"></span>
The names of colors can be used (e.g., blue) or the hex code for the particular color can be used (e.g., #f9cf36).
Font Style: <p style="font-family:proxima-nova"></p>
Font Size: <p style="font-size:20px">Text here</p>
Subscript: <sub></sub>
Superscript: <sup></sup>
Horizontal Line: <hr>
Line Spacing: <p style="line-height:X">
Image: <img src='IMAGE LINK'>
Note: This URL must be a direct link to a publically hosted image. If the image is not available to the public, it will appear as a broken image in Learning.
Note: The <script> tag is not supported.
Including HTML Formatting in the Text Element
After opening up the HTML view in the lesson builder > the user can update their text with their desired customizing > then select "Edit HTML" again.
The customized text then appears with the desired formatting.
Using HTML to Modify Tables Within the Text Element
Tables can also be modified with the HTML tool in the lesson builder. To include a table, select the table icon in the text menu bar.
After inserting the table > select "Edit HTML."
The following is customizable:
Widen the Outside Table Border
To widen the outside border use the following code at the very beginning in place of "<table>."
<table border="3">
The width preference is up to the user but is not recommended to go over the size of five.
Widen the Inner Table Lines
To widen the inner lines use the following code in place of every "<td>" in the code.
<td style="border : 2px solid">
For the inner table lines, it is not recommended to exceed the size of three.
The table below has an inner line width of two.
Change the Font
To change the font of the text use the following code inside the "<table>" brackets at the very beginning of the code block.
<p style="font-family:FONT NAME">YOUR TEXT HERE</p>
To change the text to look identical to the default text in Learning, use the font name of "proxima-nova."
Questions? Please contact the Support team at support@lessonly.com.