Moodle Monday - HTML Toolbar

When you are adding activities or resources on your Moodle site, you often have access to an HTML Editor toolbar such as the one pictured here:

toolbar

(If you do not see this toolbar, you are probably using a browser that does not support it. If you are able to, try using another browser such as Mozilla’s Firefox to see if you have access.)
Let’s break the toolbar down a little and describe what you can do with it!

The first couple are font formatting settings, allowing you to set the font type and size: font typefont size

The third one is a little less obvious, unless you have experience in working with HTML code. It uses some preset font formats that are set by the Moodle theme you are using.
presets

These presets might change any of the following, depending on which theme you use:
-color of the font or the background behind the font
-add a border around the font
-bold or italicize font
-text alignment
-spacing after a return
-font type & size

Next are a few font formatting selections:
formating

In order, these set:
  • Language of the item
  • Bold
  • Italics
  • Underline
  • Strikethrough
  • Subscript
  • Superscript
Clean up WordNext is a toggle to clean up the extra HTML added to the document when you paste in from a Word document.

Last on the first line are the undo & redo buttons: undo

Beginning the second line are the text alignment choices: alignment

Next are two directional icons (left to right or right to left) that are not applicable for most of you.

The next few icons are related to lists: lists
-the first does a numbered list (or ordered list in HTML speak)
-the second does a bulleted list (or unordered list in HTHL speak)

Then there are a couple icons to set your indents within a list, to move the items out or in; this enables you to make lists within lists: indent

color These two icons let you set the color. The one with the “T” sets the font color, while the one with the paint can sets the background behind the text.

This icon adds a horizontal line across the page: line

Next is the icon to add an anchor within the text (most people won’t use this unless they are familiar with HTML): anchor

hyperlinksThese icons let you manage any hyperlinks in the text. The first adds a link to highlighted text; the second breaks the hyperlink in the selected text; the third removes the hyperlink from the selected text.

This grouping of icons all allow you to insert items onto the page.
insert

-image opens up a window to get, select and format the image.
-table opens up a window to set the table parameters.
-drag math opens a window to create mathematical expressions
-emoticon opens a window with a variety of emoticons that are available
-character opens a window with a variety of special characters
-find opens a window so you can find and replace particular text (say you misspelled a word or name several time...)

Spellchecker icon: spellcheck

toggle toggles between the design (what you would see on the webpage) and HTML editing (what you see with all the HTML code) views; this is useful when having to paste in embed code.

enlargeEnlarge HTML Editor: the most useful icon is last! This opens up a larger editing window for you to work in.

As always, feel free with others that may find this useful!

Popular posts from this blog

Google Script - Create a Drop-Down List from Spreadsheet Column

2017 MACUL Conference - Adding Pre-Conference Sessions to your Registration

Google Classroom - Add "Class Materials"

Google Slides - Built in Back Channel!

2017 #MACUL Conference - Tipsheet #1