Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Let's have a look at the HTML Editor that's build into Moodle and learn how to really leverage this tool. To do this let's create another blog entry. Go up to the upper right-hand corner of your screen and click on the link for your name in the Your are logged in as space. Then we'll click the tab for Blog and we'll go ahead and add a new entry, by clicking on the link for Add a new entry. We will give this blog entry a title of Learning to use the HTML Editor.
We'll then go down to the main blog body entry. First we'll add a line of text where we can add some formatting. So we'll add a line that simply says, Here is a top level heading. Hit Enter or Return a few times, then select that block of text that we just wrote, and click the dropdown menu and select Heading 1. Now the text is showing up in a large Heading 1 style. I can click down near the bottom, then I can add additional text and format it using the tools at the top such as Bold, Italics, Underline Strikethrough, Subscript, Superscript and so forth. You are probably quite familiar with many of these tools as the icon that are appearing here are the same ones that are used throughout most text editing programs.
The second line of icons allows you to control the justification of your text, the direction or flow of text from left to right or right to left. You would only use these if you are trying to write text in another language that is not typically written or read from left to right. The section allows you to create either ordered or bulleted list. You can increase or decrease the indent of the text with the next couple of tools and change the color of text or if the background color of a particular area with the standard color pickers. If you want to add a horizontal line or horizontal rule, you can simply do that by clicking this button here and then a horizontal line will show up allowing you to separate content inside of your text.
The next set of tools allows us to create links. Let's say we have some content of our on Flickr that we want to link. To do this, begin by simply opening up a new tab on your browser. If you are using Firefox, you can use Command+T or Ctrl+T to open a new tab. Then simply go to Flickr, www.flickr.com. We'll then do a search for some content that we want to add in. I know I have already tagged some content with moodle_esst. I'll type that into the Search field and then click the Search button.
Now I get a listing of a bunch of images that I have posted all were related to Moodle Essential training series. To link directly to all of these images, I'll just go ahead and select the whole URL at the top of the page and copy with Command+C or Ctrl+C. Then I'll come back over to the tab that has my blog entry in it and I'll type in, Here is a link to some content on Flickr related to this training. I'll then go ahead and select content on Flickr and then click the icon for Insert a web link. I can then type in the full URL or simply paste it with Command+V or Ctrl+V. I can give the page a title Images for Moodle Training and then set a Target.
Now the Target allows us to tell our web browser what we want to happen when a user clicks on this link. If we leave the Target set to None then the resulting web page will just reload inside of the main window that we are already working in. But if we want to have the user stay on the page that we were currently at, but have the link open up in the new window, we can simply select New Window from the dropdown menu for Target. The page that we were going to does not have any anchors and the anchors are not going to be very common for you to use unless you have created the content and created anchors, which would allow you to link down to a particular point inside of a page.
So we'll go ahead and leave Anchors left alone and then click the OK button. Now we have our link that's been created for us. But if we were to click on this link right now, we are not going to see anything happened. In order to test it, we need to go ahead and scroll all the way to the bottom of our page and then click the Save Changes button. This will update the content on our page and we are able to then click on the link that showing up inside of our blog entry. And a new tab is created for us with the search parameters that we set up taking us directly to the images on this page. But what if we want to display one of these images inside of our blog entry.
To do that we'll have to use a little trick here. On this Flickr page we have this image of a Mithrax what I want to do is right-click or Ctrl+Click on this image and say View Image. This is going to open up just this image inside of our browser window and we are going to get the complete URL to this image up here in the top of our window. Let's go ahead and select that URL and copy it with Command+C or Ctrl+C then go back over to the tab that has your Moodle blog in it and then click on the Edit button on the lower right-hand corner of this blog post. This will take us back into our HTML Editor. We'll go ahead and click at the end of the line where we've got this text and hit Enter or Return a couple of time and now we'll click the button here for inserting an image.
The Insert an image window pops open and it asks us for the URL to the image. I'll go ahead and hit Command+V or Ctrl+ V on my keyboard to paste in the URL of the specific image that we want to show on Flickr. Next, we'll simply add in some alternate text. Here we'll put image of a Mithrax. We can choose to add some controls for the Alignment, Thickness of a border around the image or any Spacing that we want to have set. I'll go ahead and leave all of these at the default and then click the OK button.
Now the image that's located up on Flickr is being pushed directly inside of this blog entry. I can scroll all the way to the bottom of the page, click the Save changes button, and now I can see that this image is properly attached to this blog entry. There are lots of additional tricks that you can use with the HTML editor to add additional interest and content to any page that you are using inside of Moodle that uses the HTML editor. Now note that not everything that you can normally do inside of HTML is going to work inside of the Moodle HTML editor.
This is because not all HTML code is allowed to be used by students on all servers. So you may run into some roadblocks on a particular Moodle installation that you are working on. If you do you may need to contact the IT department at your institution to find out what's specific code is allowed and not allowed inside of any Moodle page that you are working on. Let's go ahead and return back on to our main course by first clicking on the link back to our institution and then clicking on the link to our course. In this case, Introduction to Coral Reef Ecology.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 91106 Viewers
80 Video lessons · 138156 Viewers
59 Video lessons · 56972 Viewers
52 Video lessons · 70605 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.