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:
(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:
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.
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:
In order, these set:
Next 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:
Beginning the second line are the text alignment choices:
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:
-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:
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:
Next is the icon to add an anchor within the text (most people won’t use this unless they are familiar with HTML):
These 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.
-
opens up a window to get, select and format the image.
-
opens up a window to set the table parameters.
-
opens a window to create mathematical expressions
-
opens a window with a variety of emoticons that are available
-
opens a window with a variety of special characters
-
opens a window so you can find and replace particular text (say you misspelled a word or name several time...)
Spellchecker icon:
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.
Enlarge 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!
(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:
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.
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:
In order, these set:
- Language of the item
- Bold
- Italics
- Underline
- Strikethrough
- Subscript
- Superscript
Next 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:
Beginning the second line are the text alignment choices:
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:
-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:
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:
Next is the icon to add an anchor within the text (most people won’t use this unless they are familiar with HTML):
These 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.
-
opens up a window to get, select and format the image.-
opens up a window to set the table parameters.-
opens a window to create mathematical expressions-
opens a window with a variety of emoticons that are available-
opens a window with a variety of special characters-
opens a window so you can find and replace particular text (say you misspelled a word or name several time...)Spellchecker icon:
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.Enlarge 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!