Learn@Illinois Moodle - Using the Atto HTML Text Editor
Learn how to use the Atto HTML text editor in your course site. The editor is what you are using whenever you enter text in your Moodle course site.
For a permanent link to this information, please use: https://go.illinois.edu/MoodleAttoEditor
If your text editor looks different, you may need to change your text editor, by following instructions on Changing your Text Editor.
- Expanding the Toolbar
- Bulleting and Numbering
- Linking and Unlinking
- Adding Images
- Adding Video from Illinois Media Space
- Adding Video from Ensemble (Instructors Only)
- Adding Video from Another Site (Instructors Only)
- Adding Audio by Recording within Moodle
- Undoing and Redoing
- Underline and Strike Through
- Creating Subscripts and Superscripts
- Aligning Text
- Font and Background Colors
- Equation Editor and Special Characters
- Creating Tables
- Cleaning Up Formatting
- Accessibility Checker and Screenreader Helper
- Word Count
- HTML Editing
- Full Screen
Expanding the Toolbar
Your editing toolbar can be expanded by clicking the Toolbar Toggle button.
Click the "i" Paragraph styles drop-down menu to create headings. We recommend using "Heading (large)," which corresponds to H3, for headings, and using "Heading (medium)," which corresponds to H4, for subheadings. This helps make your course site accessible to people using screen readers. Read more about typographic hierarchy.
Bulleting and Numbering
- Make sure to use bulleted or numbered lists instead of hyphens so that your text is accessible to all users.
- Click the Insert/remove bulleted list button to create a bulleted list. To make a numbered list, click the Insert/remove numbered list button.
To link to something out of the course site:
- Highlight the text that you want to link and click the Insert/edit link button.
- In the "Create link" pop-up window, enter the link URL. Check the Open in new window checkbox to avoid inadvertently forcing someone to navigate away from the course website.
- Click the Create link button. The linked text will now be blue.
- To undo this, click on or select the link text, and click the Unlink button.
- To add an image, select the Insert/edit image button. You can find an image on your computer or elsewhere.
- To find an image on your computer, click Browse repositories...
Note: To add an image from the internet, enter the URL in the "Enter URL".
- Next, click the Browse... button.
- Search for and select the image.
- Click the Open button, then click the Upload this file button.
- In the "Describe this image for someone who cannot see it" field, enter an image description and then click the Save image. See Alternative Text for guidelines on image description.
Note: You can resize the image by changing the numbers under Size and checking the Auto size option. You can also change the alignment by selecting options from the drop-down menu.
Adding Video from Illinois Media Space
You should not upload audio or video files directly to Moodle. If you have the file hosted on Illinois Media Space, click the Embed Illinois Media Space rainbow starburst icon. See Embedding Audio or Video from Illinois Media Space for more details.
Adding Video from Ensemble (Instructors Only)
You should not upload video files directly to Moodle. If you content is on Ensemble, see Adding CITL-Recorded Video Lectures to your Course.
Adding Video from Another Site (Instructors Only)
You should not upload video files directly to Moodle. You must have the file(s) hosted on another site/server. See Embedding Videos Using Code for instructions on how to embed video or audio from another site using code.
Adding Audio by Recording within Moodle
You can add audio recordings to your course content.
- Click on the Record microphone icon.
- In the pop-up window that appears, click the Start recording button.
Note: You will be able to record up to two minutes of sound.
- Press Record again to re-record or, if you are done, click Embed Recording.
Undoing and Redoing
- If you want to undo your last action, click the Undo left-facing arrow button.
- If you would like to redo an action you just undid, click the Redo right-facing arrow button.
Underline and Strike Through
- If you want to underline a word or a phrase, click the Underline button.
- If you would like to cross out a word or a phrase, click the Strike through button.
Creating Subscripts and Superscripts
- Select the desired text/number and click the Subscript button to create a subscript (a text or number set slightly below the line of type).
- Select the desired text/number and click the Superscript button to create a superscript (a text or number set slightly above the line of type).
- To align text to the left, select the desired text and click the Align left button.
- To center text, select the desired text and click the Align center button.
- To align text to the right, select the desired text and click the Align right button.
Font and Background Colors
- If you want to change font colors, select the text, and click on the More font colors paint brush icon and select a different color.
- If you want to highlight, select the text, and click on the More font background colors lightbulb icon to find a highlighter color.
Equation Editor and Special Characters
- To write equations, click on the Equation editor calculator icon. See Inserting Equations Using the Atto HTML Editor page for more information.
- Click on the Insert character icon to insert special characters.
To create a table, click on the Table grid icon. In the pop-up window that appears, adjust settings, and click Create table.
Cleaning Up Formatting
To remove unwanted formatting, select the text that you want to change and click the Clear formatting cursor button.
Accessibility Checker and Screenreader Helper
- Use the Accessibility checker to check the following aspects of accessibility of the text:
- Images - to make sure that images have descriptions (alt text)
- Font and background colors - to make sure that the color contrasts meets accessibility guidelines
- Formatting - to make sure that there are appropriate headings to organize the text
- Tables - to make sure that they have captions and headers in either rows or columns
- Images - to make sure that images have descriptions (alt text)
- For additional accessibility information about a section of your text, highlight the text, and click the Screen helper.
If you want to check how many words you have typed, you can click on the Wordcount pound/hashtag icon, and it will show both word and letter counts.
To edit the HTML code of your written text, you can click on the HTML icon. This can be useful to fix formatting, tables, links, and more!
To enter full-screen mode, click the Toggle full screen button.
Note: This can help with editing if there is a lot of material on the page.