1. Using HTML Editor to
Add a Hyperlink in a Moodle Course

2. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Add a Hyperlink in a Moodle Course
After logging in to Moodle, click on the course in which you want to add a hyperlink to an image or text.
In this case, click on Demo Course.

3. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Add a Hyperlink in a Moodle Course
In this example, we are going to add a hyperlink to either the image “Centre for Learning, Teaching and Technology”
or the text “LTTC Website” in Topic 1. To begin, click on Turn editing on.

4. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Add a Hyperlink in a Moodle Course
Then click on the Edit summary icon ( ).

5. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Add a Hyperlink in a Moodle Course
You can click on an image, for example, “Centre for Learning, Teaching and Technology”, to add a hyperlink to it.

6. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Add a Hyperlink in a Moodle Course
Or you may select a sentence/ text, say “LTTC Website”, by highlighting it.

7. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Add a Hyperlink in a Moodle Course
In this case, select the image “Centre for Learning, Teaching and Technology”,
then click on the Insert Web Link icon ( ).

8. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Add a Hyperlink in a Moodle Course
In the URL field, type in a website address, say http://ied.edu.hk/lttc/.
In the Title field, type in a title, e.g. LTTC_Weblog, to describe the link.

9. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Add a Hyperlink in a Moodle Course
Click on the Target pull-down menu. Four options appear:
New window; Same frame; Same window; and Other (out of order).

10. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Add a Hyperlink in a Moodle Course
In this case, we select New window. It means that the website
will be opened in a separate new window.

11. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Add a Hyperlink in a Moodle Course
Same frame means that the website will be opened in the same frame
while Same window means on the same page.

12. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Add a Hyperlink in a Moodle Course
The last option Other supposedly allows users to insert a target frame. It however does not work appropriately in Moodle and,
thus, it is marked (out of order).You are therefore advised not to select this option.

13. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Add a Hyperlink in a Moodle Course
Then click on OK.

14. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Add a Hyperlink in a Moodle Course
Then click on the Save changes button to finish

15. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Add a Hyperlink in a Moodle Course
LTTC_Weblog
Now, when you mouse over the image, you can see the title of the hyperlink.
You can double-click the image to access the website.

16. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Add a Hyperlink in a Moodle Course
LTTC_Weblog
Similarly, if you add a hyperlink to a sentence/ text, the title of the hyperlink will also be displayed
when you mouse over the sentence/ text.You can double-click the sentence/ text to access the website.

17. Centre for Learning, Teaching and Technology Moodle Series: Using HTML Editor to Add a Hyperlink in a Moodle Course
Web page: http://www.ied.edu.hk/lttc
Email: lttc@ied.edu.hk
This learning series numbered MOTS33-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.