Adding resources

The various resources available mean that almost any kind of web content can be added to the course.

Book

Adding a box around text

You might want to highlight some text by adding a box around it.

To add a box around text, while you are editing your book go to Tools/Source code Pro in the text editor’s menu or click on the Source code Pro icon.

Go to the point on the page where you want to add the box and copy in one of the lines of HTML code below:

<div style="width: 200px; border: 1px solid black; border-radius: 5px; padding: 10px; margin: 10px;"><p> This is a basic box with a black border and some text inside it.</p></div>

<div style="width: 200px; border: 2px solid black; border-style: dotted; padding: 10px; margin: 10px;"><p> This is a basic box with a black dotted border and some text inside it.</p></div>

<div style="width: 200px; border: thick red; border-style: dashed; padding: 10px; margin: 10px;"><p> This is a basic box with a red dashed border and some text inside it.</p></div>

<div style=" width: 200px; border: 5px double black; padding: 10px; margin: background-color: lavender"><p> This is a basic box with a double black border and some text inside it.</p></div>

<p style="border-left: 5px solid blue"> This is a blue left border and some text.</p>

Then click on the Save button.

These are just some examples of the many available style options for boxes. If you are familiar with HTML you can use your own styles, or you can adjust the width, border size, border colour, padding, margin, border corners, background colour and border type in these examples using standard inline CSS.

(If you’re new to the subject, W3Schools’ CSS tutorial is a good starting point.)