10. HTML block in Moodle 3.3 Video Lecture | Moodle: Create Personalized Online Class - Professional Skills

HTML block.
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.