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 <span style=”color: #800080;”>change</span>
Insert <span style=”color: #800080;”> before the word with the colour change.
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.
<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
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=”http://www.elearnhub.org”>Check out eLearn Hub!</a>
To open as a link in a new page:
<a href=”http://www.elearnhub.org” 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:
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/ZzjVxRva4Qw” 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
This makes the text one size bigger, use this up to 7 times bigger.
<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!
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!