ElearningWorld.org

For the online learning world

CoursesElearning WorldMoodle

Why teachers using Moodle should learn HTML

HTML and the LMS

I jump between BrightSpace and the Moodle learning management systems (LMS) everyday.  While they both have ample features in their WYSIWYG editing tool bars, they also provide an HTML source code editor.   Using HTML to finesse learning resources and activities should be a normal practice when developing within an LMS.

Many teacher developers do not take advantage of this functionality because they lack basic understanding of HTML code.  In this post, I offer options to learn HTML and reasons that educators and trainers should consider using it to enhance their courses. I am assuming that all developers already have a well-founded understanding of HTML.

 

Why Learn HTML?

You are creating a long Moodle page with a series of sequenced instructions that span from the top to the bottom of the document.  At one point you insert an image, then try to continue the list of instructions below the image.  For some reason the list separates into two lists.  That is, the numbering restarts at 1.  You try many things to get the lists to link up and form a continuous count.  If you are familiar with HTML there is an easy fix, but if you don’t it, can be a very frustrating experience. Or an image will not cooperate with you and move into that perfect position.  You try tables without visible lines but still, you are not happy with the position of the image.  Knowledge of HTML could be your answer. 

Most of these reasons also apply to other learning management systems.  LMS features such as activity/resource pages, widget blocks, and activity description sections offer an HTML editing option.  This is not strictly unique to LMSs as other development tools, H5P and Hot Potatoes,  also have an HTML editing mode to allow teacher/developers more control over their learning object presentation.   The following are reasons I think it is a good idea to learn the basics of HTML to improve LMS course functionality and appearance. All of the examples I will use going forward are with the Moodle LMS.

Clean up pasted content– While pasting text from external sources such as Word or Google Docs or a website, code often is attached to the text. Results can be frustrating as formatting including fonts, styles, and positioning can clash with your page.   If you open the HTML editor in your LMS, cleaning up the mess is possible.  There is a Moodle plugin, PasteSpecial, that cleans up pasted text from non-Atto editor sources.  If it is not installed in you Moodle instance, ask your administrator to consider it.

Embedding widgets – At times you will embed objects into your LMS pages. These can be videos, animations, functional widgets such as a poll or an audio player.  Moodle offers functions to embed or link to standard widgets, however, if it is an non-standard widget, it may not be possible. The embed code that is copied from the object’s site, is in HTML.  To embed any non-standard objects, opening the HTML code and pasting it in the appropriate position is necessary.

Customize elements – HTML attributes allow you to go beyond basic appearance of page items. A page item includes text, lines, tables, and images. This can be done using HTML tag attributes to customize positions, colour, dimensions and even functionality.

Include third party generated HTML snippets – HTML snippets are a logical sequences of HTML code that display a desired result. An example is the BlindText Generator’s input form snippet.  HTML can also be generated by using third party tools like the HTML Online Editor.  The resulting code can be pasted into your LMS HTML editor.

Cleaning up HTML code – The HTML Online editor (see link below) offers a clean code button.   If the HTML in an LMS page is too confusing and not displaying as required, then you can paste the HTML into the HTML Online editor and use the Clean button to remove code fragments and realign code so that it is easier to read.

The HTML block – Moodle’s HTML block offers a lot of potential for instructors to add functionality to their course home page. While HTML knowledge is not a requirement for using this block at all, it allows coders the potential to be creative with blocks.

IFRAMES – Inline Frame is an HTML tag that creates a window within an LMS HTML page to display content from another web address . In Moodle this can include: Google calendars, webpages with current content, YouTube and much more.  The Iframe tag is inserted and manipulated in the HTML editor.

 

Ways to learn HTML?

There are many tutorials, ready-made widgets and courses available on the web.  You can access most of these for free and learn at your own pace. One possible strategy to be come competent with HTML is to learn the basic structure, tags and some of their attributes. The jsut dive in and use it.  While using HTML to generate or enhance LMS learning objects, have a set of links to video help tutorials, an HTML tag reference and some code examples.   In this case, a little knowledge and a lot of elbow grease will eventually make you an HTML pro.

 

HTML Tutorials –  Out of the mountain of HTML online tutorials, I recommend the W3schools HTML tutorial.  Even though it does not feature videos, it is structured in a way that you can target the tags that are important to your development and learn the essential skills.

HTML references –  There are so many HTML references available online.  These are so useful when the code is not cooperating with you.  Finding working models online can speed up your HTML development.  The interactive HTML Cheat Sheet is a fast way to locate an HTML tag and find code samples with details about the tags and their attributes.

HTML courses –  Udemy is just one of several providers of free introduction to HTML courses. Most of these courses include modules on Cascading Style Sheets CSS, and JavaScript.  For the purposes of learning basic HTML, you should just focus on the HTML modules.  If you are curious later, you can continue with these modules.

Online HTML editors – A less structured way to learn how to manipulate HTML code is to use an online HTML editor.  Online code editors usually display a code window and a results window.  While trying out tags and attributes in the coding window, you can see the results instantly.

 

Final thoughts

There are much more professional resources that can be used to learn HTML code such as Adobe’s Dreamweaver, Lynda.com or a structured face-to-face HTML course.  The advice offered here is for those teaching professionals with limited professional development and IT budgets.

You do not have to become an HTML expert to improve your LMS course pages.  If you simply learn the structure of HTML and basic tags, these will allow you to improve existing page presentations and possibly have the confidence to be a little more creative with future content.

 

 

Resources

BlindText Generator’s Snippets http://www.blindtextgenerator.com/snippets

HTML Interactive Cheat sheet  https://digital.com/tools/html-cheatsheet

HTML Online editor https://html-online.com/editor   or https://www.onlinehtmleditor.net

Udemy HTML for Beginners https://www.udemy.com/html-and-css-for-beginners-crash-course-learn-fast-easy

W 3 Schools  https://www.w3schools.com/html/default.asp

 

John Allan
blank

John Allan

John is a Canadian who writes about learning object development and online facilitation from a teacher's perspective.

2 thoughts on “Why teachers using Moodle should learn HTML

  • John Allan

    Gareth, I agree with your comments. I have never thought of actively performing fine-adjustments of HTML page content as a workaround. I thought of these as a useful skills to refine LMS document presentation. While editors on LMSs and other learning object tools are steadily improving in terms of functionality and usability, there are still opportunities for workarounds.

    It is a hard sell to get non-computing educators to learn scripting or media manipulation/optimization. They already have their primary content to deal with and if they are using an LMS, most of them do not really need to nudge elements into specific places on an an HTML page. They would most likely format their document in a word processor, export it to PDF format and then upload it to the LMS.

    I promote the practice of learning HTML to instructional staff as a means of gaining more independence from dedicated instructional developers and developing an additional professional skill. In the majority of my interactions, instructors have no interest in scripting, or media optimization. If they have an interest, I provide “How To” guides, workshops and exemplars.

    thanks for your comments,

    John

    Reply
  • Hi John,

    I actually disagree. To me if a non-computing educator needs to learn the complexities of the underlying system in order to make better use of it then that system is not as developed as it should be to accomplish the desired tasks required of it.

    Yes, with the system as it stands then learning HTML is of benefit. But this feels like a workaround rather than a solution.

    Cheers,

    Gareth

    Reply

Add a reply or comment...