I started working in the FITS department (then called Instructional Design and Development) at DePaul as a graduate assistant, and a large percentage of my duties at the time involved moving instructor-created content from a word-processing document into the learning management system–basically, a lot of copying and pasting. But it wasn’t as easy as it sounds. Simply copying text from Microsoft Word and pasting it into Blackboard or Desire2Learn often produces strange text formatting.

These are just a few of the text formatting problems I’ve seen:

• huge spaces between words
• abnormally small or large text
• seemingly random switches between serif and sans-serif fonts
• long strings of strange xml code that are visible to students.

Other times, of course, it copies exactly as you would expect it to. In short, when you copy from a word processor into a web form, it’s very difficult to predict, even for someone who’s been at this for as long as I have, exactly what you’re going to get.

At DePaul, we have a number of instructors who are tech literate enough to want to build content for their online courses themselves but don’t know what to do when these formatting errors occur, becoming understandably frustrated.

Almost everyone is more comfortable composing their text in a word processor rather than directly in a Web interface. And I wonder if it’s time for that to change. How much of the text we produce today is going to be consumed on paper, and how much of it is going to be consumed on a screen? Should we still be teaching our students to write in a word processor, when these compatibility issues persist with Web-based writing? Should we become just as comfortable writing in the web editor as we are in the word processor?

In a perfect world, word processors would copy perfectly clean HTML into the text boxes of whatever web form they’re pasted into. But until we have a word processor from that perfect world, the brave instructor might benefit from knowing some basic HTML.

I’m not going to go through all the HTML that goes into making a website—there are great comprehensive guides elsewhere for that already. Rather, I’m going to go through some basic HTML tags that allow you to format text when you’re working in something like a learning management system.

But before I delve in, you might ask how you access the HTML for whatever you’re working on? It varies depending on what you’re working in, but in Desire2Learn, you’ll see an “Edit HTML Source” button in the lower left corner.

HTML is made up of tags, which are recognizable because they are inside angle brackets, like this: <p>. Most tags have an opening and a closing, with the content for the tag in the middle. For example <p> is placed at the start of a block of text to identify it as a normal paragraph, and </p> is placed at the end to “close” the paragraph.

These are the basic tags your content might use:

• <p>…</p> – Paragraph
• <h1>…</h1> – Main (page) heading
• <h2>…</h2> – Subheading
• <h3>…</h3> – Sub-subheading
• <ul>…</ul> – Unordered list (bullet points)
• <ol>…<ol> – Ordered (numbered) list
• <li>…</li> – List item (used for each bullet or numbered item in a list. These should be nested inside a ul or ol tag.)
• <strong>…</strong> – Bold
• <em>…</em> – Italics
• <a href=”[web address of link]”>text of link</a> – a link
• <img src=”[web address of image]” /> – Image

This is an example of what clean HTML looks like, as viewed from the “View Source” button in Desire2Learn. Beneath that is an image of what actually displays when students see it. See if you can look back and forth between them and, based on the tags above, understand how the tags in the top image are producing the formatting in the bottom.

Click for full size

For working in a learning management system, the tags above are really all you should need. If you see any other code in the body of your html source, that’s probably what’s causing your text formatting problems. Here are some examples of things you might see that will cause formatting problems.

• <span> – These are often created when you copy from a word processor to a web text box as the system tries to preserve exact formatting, but usually do more harm than good. Make sure you delete both the opening and closing tag.
• &nbsp; – This isn’t an HTML tag per se. Rather, it’s displayed as an extra space. If your text is showing extra spaces, look for some of these in the body of your HTML source.
• <font face=”font” size=”number”> – Font tags can change the font face or font size. Make sure you delete both the opening and closing tag.

Working in HTML source isn’t for everyone and certainly not every instructor, but it is a little empowering to know exactly how your web text editor of choice—not even just in Desire2Learn— functions, and be able to go into the guts of the code and manually fix that which the system broke for you.

HTML is the language in which full websites are designed, so this is obviously just the basics. But if you want to learn more HTML, there are a lot of great resources out there, the most widely recommended for beginners being w3schools.com. Maybe this will be your entry point into the wide world of making websites.