HTML Editor overview

show more HTML Editor overview provides you with in-depth training on Education + Elearning. Taught by Chris Mattia as part of the Moodle 2.1 Essential Training for Teachers show less
please wait ...

HTML Editor overview

The most common tool that you'll use while building your Moodle course is the built-in HTML Editor, which stands for Hypertext Markup Language. This is the language that most every single web page on the Internet is created in, and Moodle has a built-in What You See Is What You Get Editor. You can access this editor through a variety of different ways. In this case, simply make sure you have editing turned on and then click on the dropdown menu for Add a resource from any block and go down and select the link for Label.

This will open up a simple page and show us our HTML Editor. Now the HTML Editor that's built into Moodle is from our project called TinyMCE. This is a greatly improved editor over previous versions. And some of nice things that you'll notice is when you click on the dropdown menu to set your font, you'll notice that the fonts are all displayed in the font face that they will appear in. You can also set the font size, the paragraph heading. There's an Undo and Redo button, a Find function, a Find/Replace function, a tool that will allow you to enter a fullscreen editing mode.

On the next row, you'll see some common formatting tools such as bold, italics, underline, strikethrough, subscript, and superscript. You can align your text either left, center, or right justified. The next set of tools work with HTML that you're bringing in from other locations. The first one, Cleanup messy code, allows you to paste code into your editor and then hit this tool in order to clean up any poorly formatted code.

Now I will note that not all browsers work with this tool the same way. And so you may want to use the Edit HTML Source button, paste your code in there, and then when you return back into the WYSIWYG view, or What You See Is What You Get, your code will be automatically cleaned up for you. The next button here is also very helpful, Remove formatting. Many times when you're trying to format some text inside of the HTML Editor and you've added a couple of different layers of formatting-- you've maybe bolded, italicized, changed the font color and changed the background color--and you're trying to select a particular parameter to get rid of it, oftentimes it can be difficult.

Simply selecting that text and hitting the Remove formatting button and starting over will allow you to move forward with your project much quicker. The next two tools allow you to paste in code from other applications. The first one allows you to take formatted text, select it, and paste it in as plain text, allowing you to control the formatting strictly inside of this HTML Editor. The other one allows you to paste in text from Microsoft Word and it'll clean up some of the additional formatting that Word applies.

The next tools allow you to control color: the first one allows you to control the color of text, and the second one allows you to control the background color of text or objects. The next set of tools allows you to control the direction of flow of your text. So, for many languages, text is read from left to right, but other languages, text is read from right to left, and these two buttons will allow you to select the default direction that your text will flow. On the third row, you have the ability to create lists, both unordered and ordered lists.

You can then also use the Outdent and Indent tools to create an outlined effect inside of your documents. The next box allows you to control links, both internal and external links, by inserting and editing them, breaking links that you've already created, or using this third tool which is a link with a red X through it that allows you to prevent auto-linking. In a later movie, we'll explore auto-linking to a great extent. The next set of tools allows you to control a variety of different media types to add interest to your documents.

The first one allows you to insert and edit images. Then you can insert or edit emoticons. You can insert and work with media, such as audio and video. This tool allows you to create equations. Sometimes you need to add some non-breaking spaces between characters. And this tool will allow you to insert those special characters. Other times you may need to add special characters, such as the degree sign, plus or minus, or a per mille sign, and Select special characters allows you to do that.

Next, you have the Insert a table tool. If you need to insert a table of numbers or data, you can use this tool to create your table. Finally, you have the Edit HTML Source tool and a spellchecker. And if you notice on the spellchecker there's a small dropdown menu to the right-hand side, and Moodle now allows you to spell-check in multiple different languages. Now that's a quick overview of the various tools that are included in the HTML Editor. Over the course of the next several movies, we'll put a lot of these tools into practice and format some content for our site.

HTML Editor overview
Video duration: 5m 9s 9h 53m Beginner


HTML Editor overview provides you with in-depth training on Education + Elearning. Taught by Chris Mattia as part of the Moodle 2.1 Essential Training for Teachers

Education + Elearning
please wait ...