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.
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.
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.
BlindText Generator’s Snippets http://www.blindtextgenerator.com/snippets
HTML Interactive Cheat sheet https://digital.com/tools/html-cheatsheet
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
- Instructors, Systematically Improve Your Online courses – 13th September 2021
- Instructors, Improve Accessibility on Your Moodle Courses (3.10) – 13th July 2021
- Gamify Online Lessons with Realtime Quizzes – 13th June 2021