HTML editor: Difference between revisions
Helen Foster (talk | contribs) m (category) |
Helen Foster (talk | contribs) (→See also: discussion link added) |
||
Line 222: | Line 222: | ||
*[[HTML editor settings]] - change the look of the HTML toolbar | *[[HTML editor settings]] - change the look of the HTML toolbar | ||
*Using Moodle [http://moodle.org/mod/forum/view.php?id=1035 HTML editor forum] | *Using Moodle [http://moodle.org/mod/forum/view.php?id=1035 HTML editor forum] | ||
* | Using Moodle forum discussions: | ||
*[http://moodle.org/mod/forum/discuss.php?d=64354 Question about insert image function in HTML editor] including methods of enabling students to insert images using the HTML editor | |||
*[http://moodle.org/mod/forum/discuss.php?d=66805 Need to display english special phonetic symbols for ESL students] | |||
*[http://moodle.org/mod/forum/discuss.php?d=83115 tables in HTML editor] | |||
[[Category:Teacher]] | [[Category:Teacher]] |
Revision as of 07:54, 16 May 2008
Moodle has developed a standard toolbar that serves as an HTML interface. This page describes some of the features of this tool. Several of the icons on the toolbar are similar to those found on many text editing programs and have similar functions.
For example, you can cut/copy and paste text from other applications into this editor and formatting will be preserved. There is the usual clipboard icon which is for pasting text that has been copied or cut. Or use the usual short cut keys of Control+C and Control+V .
HTML editor toolbar features
Inserting images
Moodle allows you to upload pictures into a course or site folder, then insert that image into the content area. It is also possible to use an existing image located outside of your Moodle site.
You can include images in the content area by using the button. This will bring up an insert picture edit screen to assist you in inserting an image. Moodle recognizes JPG, GIF and PNG as image files.
Inserting tables
- To add layout to your texts, you can use the "Insert Tables" button in the toolbar.
- Most table editing tools are only visible if you click the Enlarge Editor button.
Enlarge editor
The button will expand the HTML editor area.
Inserting links
To make a new link,
- type the text that you want to be a link
- select the text
- click the link button in the toolbar
- Type (or paste, or browse to) the URL you want to link to
- Click OK
NOTE: This process does NOT work inside the wiki module where you need to use the Wiki link system (square brackets containing the label and the link separated by a vertical line character)
Inserting smilies (emoticons)
To embed these small icons in your text, click on the smiley icon in the toolbar. A dialog will pop up that allows you to select from the following smiley icons. (Alternatively, you can just type the corresponding code straight into your text and it will be converted later when your text is displayed).
Code editing
The button changes the display window to raw HTML code. This can be useful for those of you that know how to use it (or want to learn!). Most of the buttons do not work there, not even the Search and Replace unfortunately.
Clean Word button
The clean Word button removes some Word formatting from your pasted text so that the page is smaller, less complex and thus loads faster. The Microsoft Office HTML Filter 2.0 removes all Word code from HTML file far more effectively. This filter is already built into office in Microsoft Office XP onwards.
Shortcut keys
Here are some common editing short cut or hot keys.
Keys | Action |
---|---|
Ctrl-C | Copy |
Ctrl-V | Paste |
Ctrl-X | Cut |
Ctrl-P | Change the font size |
Ctrl-H | Change text format (headings etc.) |
Ctrl-1 | to Ctrl-6 Change heading level |
Ctrl-B | Make text bold |
Ctrl-I | Make text italic |
Ctrl-U | Underline text |
Ctrl-S | Strikethrough text |
Ctrl-, | Subscript |
Ctrl-. | Superscript |
Ctrl-O | Change the font |
Ctrl-0 | Clean Word HTML |
Ctrl-Z | Undo |
Ctrl-Y | Redo |
Ctrl-L | Justify left |
Ctrl-E | Center |
Ctrl-J | Justify full |
Ctrl-/ | Text runs left to right |
Ctrl-| | Text runs right to left |
Ctrl-; | Decrease indent |
Ctrl-' | Increase indent |
Ctrl-G | Change text colour |
Ctrl-K | Change background colour |
Ctrl-F | Search and replace |
Ctrl-` | Switch to HTML source code view |
Ctrl-M | Toggle fullscreen editor mode |
Ctrl-Alt-O | Insert ordered list |
Ctrl-Alt-U | Insert unordered list |
Ctrl-Alt-R | Insert horizontal rule |
Ctrl-Alt-A | Create anchor |
Ctrl-Alt-L | Create link |
Ctrl-Alt-D | Unlink |
Ctrl-Alt-N | Turn off autolinking |
Ctrl-Alt-I | Insert image |
Ctrl-Alt-T | Insert table |
Ctrl-Alt-S | Insert emoticon |
Ctrl-Alt-C | Insert special character |
Ctrl-= | Change text language for screen readers, or specify language for the Multilang filter |
Tips and Tricks
- Theme settings can control the default fonts in the HTML editor. It is possible to have individual themes for a context (for example, a course may have its own theme).
- When you choose many functions a new small window will open. Unfortunately it can often open BEHIND the window you are in so you may miss that anything has happened. You can check new windows with [Alt]+[Tab].
- The HTML editor does not work in all browsers. If you are using a Mac OS X and for some reason it does not appear, try using Firefox instead of Safari as a browser.
See also
- Page content - for more assistance on using some of above editing icons
- HTML in Moodle
- HTML editor settings - change the look of the HTML toolbar
- Using Moodle HTML editor forum
Using Moodle forum discussions:
- Question about insert image function in HTML editor including methods of enabling students to insert images using the HTML editor
- Need to display english special phonetic symbols for ESL students
- tables in HTML editor