HTML editor: Difference between revisions
(Rewrite intro, RichText was discontinued in 2003 ? Need to tag More work needed) |
(change heading levels, re organize a bit) |
||
| Line 1: | Line 1: | ||
Moodle has developed a stardard tool bar that serves as an HTML interface. This page describes some of the features. | Moodle has developed a stardard tool bar that serves as an HTML interface. This page describes some of the features. | ||
You can cut and paste text from other applications into this editor and formatting will be preserved. Just use the normal cut and paste menus in your web browser (or Control-C and Control-V). Here are some of the features. | |||
==HTML editor toolbar== | ==HTML editor toolbar features== | ||
[[Image:Course Lesson Page Content Toolbar.GIF|frame|center|HTML editor toolbar in a Lesson page]] | [[Image:Course Lesson Page Content Toolbar.GIF|frame|center|HTML editor toolbar in a Lesson page]] | ||
===Inserting images=== | |||
==Inserting images== | |||
If you have images that are already published on a web site and accessible via a URL, you can include these images in your texts using the "[[Page_content#Image_Insertion|Insert Image]]" button. Moodle recongizes JPG, GIF and PNG as image files. | If you have images that are already published on a web site and accessible via a URL, you can include these images in your texts using the "[[Page_content#Image_Insertion|Insert Image]]" button. Moodle recongizes JPG, GIF and PNG as image files. | ||
==Inserting tables== | ===Inserting tables=== | ||
*To add layout to your texts, you can use the "Insert Tables" button in the toolbar. | *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. | *Most table editing tools are only visible if you click the '''Enlarge Editor''' button. | ||
==Inserting links== | ===Inserting links=== | ||
To make a new link, | To make a new link, | ||
| Line 28: | Line 25: | ||
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 seperated by a vertical line character) | 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 seperated by a vertical line character) | ||
==Inserting smilies (emoticons)== | ===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). | 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=== | |||
'''Clean Word HTML button''' removes some Word formatting from your pasted text so that the page is smaller, less complex and thus loads faster. The [http://www.microsoft.com/downloads/details.aspx?FamilyID=209ADBEE-3FBD-482C-83B0-96FB79B74DED&displaylang=EN 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=== | |||
{| class="wikitable" style="text-align:center" | {| class="wikitable" style="text-align:center" | ||
|- | |- | ||
| Line 201: | Line 203: | ||
|} | |} | ||
==Default fonts== | ==Default fonts== | ||
Revision as of 13:00, 28 March 2008
Moodle has developed a stardard tool bar that serves as an HTML interface. This page describes some of the features.
You can cut and paste text from other applications into this editor and formatting will be preserved. Just use the normal cut and paste menus in your web browser (or Control-C and Control-V). Here are some of the features.
HTML editor toolbar features
Inserting images
If you have images that are already published on a web site and accessible via a URL, you can include these images in your texts using the "Insert Image" button. Moodle recongizes 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.
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 seperated 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
Clean Word HTML 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
| Keys | Action |
|---|---|
| Ctrl-C | Copy |
| Ctrl-V | Paste |
| Ctrl-X | Cut |
| Ctrl-O | Change the font |
| Ctrl-P | Change the font size |
| Ctrl-H | Change text format (headings etc.) |
| Ctrl-1 | to Ctrl-6 Change heading level |
| Ctrl-= | Change text language for screen readers, or specify language for the Multilang filter |
| Ctrl-B | Make text bold |
| Ctrl-I | Make text italic |
| Ctrl-U | Underline text |
| Ctrl-S | Strikethrough text |
| Ctrl-, | Subscript |
| Ctrl-. | Superscript |
| 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 |
Default fonts
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).
See also
- Page content - for more assistance on using some of above editing icons
- HTML in Moodle
- Editor settings
- Using Moodle HTML editor forum
- Using Moodle Question about insert image function in HTML editor forum discussion, including methods of enabling students to insert images using the HTML editor
- Using Moodle Need to display english special phonetic symbols for ESL students forum discussion
