Skip to main content

Faculty: Basic Intro to HTML - Knowledgebase / Moodle / Faculty - SOU IT and Service Center Help Desk

Faculty: Basic Intro to HTML

Authors list

As we work to make our Moodle courses accessible to all of our students, it's helpful to be able to look "under the hood" of our text and have a basic understanding of what we are seeing. There is no need to be an HTML expert, but you can do a lot with just a little understanding of what you're looking at.

To view the HTML behind your textbox, click on the toggle icon in the upper left corner, then click on the HTML icon </> in the lower right corner. Click on the </> icon again to return to normal view.

html-1.png

In this example, we can see the code for a heading, an image, regular text, and a video player. If you are using the default "Atto" editor, it's easy to differentiate the code from the text: all of the code is displayed in a green font, the specific elements within the code appear in blue and red, while the text you have entered is black.  (See these common code "tags" to gain a better understanding of what the code means.)

The biggest thing to understand about HTML is that code has to be balanced: every element is introduced in brackets <like this> and then closes with a forward slash, </like this>. So, for instance, the code to make words bold begins <strong> and ends </strong>.

When you are looking at the HTML, you can select and delete text and/or codes, as needed. You may notice as you delete elements that some green code changes to red—that's a warning that the code is unbalanced in some way: you have an open command without a corresponding close, a typo in the brackets, or a missing bracket, for instance. If the red persists, the editor may be able to fix it for you or you may need to find the problem and fix it. And remember, if it gets really messed up, just cancel the operation entirely instead of saving your changes, then start over (or holler for help!).

Challenges in HTML

One of the biggest challenges we face is "messy" HTML that results from copying text from a Word document into a textbox. Here's an example of text copied from Word and pasted into a textbox:


In this case, everything that appears in red (following "style=") is irrelevant to the text itself—it's just junk that came over with the text from Word. 

Here are three ways to enter clean text in a Moodle textbox.

Contact the Center for the Advancement of Teaching and Learning for assistance in deciphering HTML.

Add a comment

Please log in or register to submit a comment.

Need a password reminder?