A HTML block is a customisable block allowing you to add images, text, links or even embedded code or widgets two blocks at the side of your course.
You don’t need to understand HTML code to use it.
You can add more than one block as you see here where we have for instance an image of the Arc de Triomphe in Paris which links to a website of Paris tourism and we have tweets from a twitter hashtag.
To add a block we go to the gear menu top right and turn on the editing and then from the Add block link in the nav drawer, we choose the block we want – HTML block.
Let’s add an image and link to that image so when the block is added we need to configure the new HTML block by clicking the gear icon.
We give it a title – I’m going to call it Bonjour and then in the content we add the image we want.
I already have a Public domain image of the Arc de Triomphe on my desktop so I’m simply going to drag it in.
Note the text editor I’m using is Moodle’s Atto editor.
If you are using a different editor such as Tiny MCE you won’t be able to drag and drop your image in.
You can change this from your User menu > Preferences.
We could simply save it and display it now, but we’re going to link this image to Paris tourism website.
So if we select the image and then click the link icon we can then paste in the URL of the Paris tourism website which we will have already found and copied in another tab.
When we save the changes we will see the images there and it’s linked to the website.
And that is how you add HTML blocks – but optionally, if you would like to try something more challenging – you don’t have to – but let’s try adding tweets from a Twitter hashtag.
How about #learnfrench as this is Sam’s course, our teacher.
For this we need to expand the editor and click on the HTML code link because we’re going to embed some code from Twitter.
We then need to go to the settings of our own Twitter account and then choose widgets and then create new and search.
We type in the hashtag we want with any customisations and then click create widget this then produces some code we can copy and paste back in the Atto editor.
It doesn’t matter if we don’t know what it actually means we go back to our editor paste in the code save and there we have along with our image HTML block a Twitter block with the tweets from the hashtag.