The document provides steps for inserting an image into a Moodle course using the HTML editor: 1. Access the course and topic where the image will be inserted and click "Turn editing on". 2. Click the "Insert Image" icon and select an image from your computer files. 3. The image will be uploaded and its link automatically inserted; add an alternative text description. 4. Click "OK" and "Save changes" to add the image to the course topic.

1. Using HTML Editor to
Insert an Image in Moodle

2. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Insert an Image in Moodle
After logging in to Moodle, click on the course into which you want to insert an image.
In this case, click on Demo Course.

3. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Insert an Image in Moodle
Let’s say you would like to insert an image in Topic 1. Click on Turn editing on to begin.

4. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Insert an Image in Moodle
Then click on the Edit summary icon ( ).

5. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Insert an Image in Moodle
And then click on the Insert Image icon ( ) on the toolbar.

6. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Insert an Image in Moodle
Click on the Browse... button to select an image from your computer.

7. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Insert an Image in Moodle
In this case, we select lttc.gif, then click on the Open button.

8. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Insert an Image in Moodle
Then click on the Upload button to start uploading.

9. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Insert an Image in Moodle
After the file has been uploaded successfully, click on the file in the File Browser box.

10. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Insert an Image in Moodle
The image’s link is automatically inserted in the Image URL field and
the image is shown in the Preview area.

11. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Insert an Image in Moodle
You must input a description of the image into the Alternative text field.
In this case, we type in “LTTC”.

12. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Insert an Image in Moodle
Then click on the OK button.

13. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Insert an Image in Moodle
Click on the Save changes button to return to the course’s front page.

14. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Insert an Image in Moodle
The image is successfully inserted in Topic 1.

15. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Insert an Image in Moodle
Web page: http://www.ied.edu.hk/lttc
Email: lttc@ied.edu.hk
This learning series numbered MOTS32-12.08.v2 of the Centre for Learning, Teaching and
Technology (LTTC) is licensed under a Creative Commons Attribution-NonCommercial-
NoDerivs 3.0 Hong Kong License.