Top Nav

Essential eLearning HTML

We all like to set up our webpages as easily as possible but sometimes things just don’t work. The video isn’t showing, the link isn’t opening properly, everything has just gone crazy…

Here’s some commonly used HTML to help easily format your page.

– it’s not a complete list, if there’s something you use all the time write it in the comments below. You may help someone else.

* Remember if < is used at the start of something, then > has to be used at the end as well.

AND Remember – triple check everything.  It something isn’t working correctly it’s likely that a space or feature has crept into the html.

Magic words: Keep It Simple Stupid!


Colour Change

Colour <span style=”color: #800080;”>change</span>

Insert <span style=”color: #800080;”> before the word with the colour change.

Colour<span style=”color:#800080;”>change</span>

Insert </span> after the word with the colour change.  This marks the boundaries of the colour change and reverts it back to the previous colour.


Background Colour

<span style=”background-color: #c65aff;”>Background</span> Colour

To change the background colour insert: <span style=”background-color:# c65aff;”> before the word with the background colour change.

Insert: </span> after the word with the background colour change (just like in the example above).


The number for the colour (#800080) can be found by using the eyedropper on image tools such as GIMP, or, if that sounds unfamiliar to you try using online tools such as

HTML Colour Codes

HTML Colour picker


Paragraph Space

In WordPress (this website uses WordPress) the HTML to leave a paragraph space is:


Some websites will use this for leaving tab spaces as well.

In other sites such as Moodle you’ll want to use:

<br>  blah blah blah amazing paragraph


Open Link in a New Page

In your elearning course you really want a link to open in a new page/tab if the link contains supplementary information.  If the link is a natural progression of the course then open in the same tab.


example: Check out eLearn Hub!

To open as a link in the same page:

<a href=””>Check out eLearn Hub!</a>

To open as a link in a new page:

<a href=”” target=”_blank”>Check out eLearn Hub!</a>


Show a video and change the display size

To show a video iframes can be your best friend.  An iframe basically puts a frame around an image or video and allows the media to be shown on your site.  You don’t have to upload the media, the iframe lets you show it linked to another site.

The Youtube embed code comes with the iframe already in the code:

youtube embed

<iframe width=”560″ height=”315″ src=”” frameborder=”0″ allowfullscreen></iframe>

*You can see the start and end have the words ‘iframe’.

If you need to use iframes use this HTML, change the dimensions to suit your page:

<iframe src = “youramazinglink.html“width=”100%” height=”300″



Note: To put a youtube video on your site you need to copy the text and paste it into the ‘HTML text’ side of your web page.

On WordPress it looks like this:

On Moodle it has this symbol: <>


Change the Font Size

 </FONT SIZE=+1>

This makes the text one size bigger, use this up to 7 times bigger.

For example:

<h1 style=“font-size:300%”>This is a heading</h1>
<p style=“font-size:160%”>This is a paragraph.</p>

It’s easier to use Styles for changing the text size as you want consistency throughout your course pages and you might find that text ends up being different sizes and looking messy!

<p style=”font-size:140px;”>YES</p>


Do you use different HTML?

This isn’t a long list so please add your most frequently used HTML.  Let’s share and help each other!





Hand write a html source code as concept

Hand write a html source code as concept



, , , ,

One Response to Essential eLearning HTML

  1. Mike Wilson July 7, 2016 at 6:57 am #

    Nice tutorial and tips and it very essential to also add jquery, css to your toolbox. Find more here:

Leave a Reply