As an educator in higher ed; chances are you will be asked to make an online course using an LMS. Whether you use it to make your own course, or to modify an existing one, Learning Management Systems each have some sort of HTML editor. These HTML editors are meant to be easy to use, but can just as easily become the bane of your existence.
When ever you choose to create a module, or edit any sort of existing content you will be presented with the HTML Editor Window. There are a couple of different flavors of editor out there like the venerable Tiny MCE, and the new WordPress editor, but they all have a WYSIWYG view, and a code/text view. The WYSIWYG view is a rendered view, and the code view reveals the HTML code that produces the rendered view. In WYSIWYG view you have a limited amount of control over your content, and if you cut/paste into it (for example from MS Word) you are making it very likely for mayhem to occur. Conversely, using the code view, you have total control over how your content is rendered.
Always Start With The Basics
The term “Markup Language” comes from the print world. In the not too distant past, magazine layout artists used large sheets to layout each page. They would place a picture here, and a text block there, and would markup the sheets to indicate things like margin widths, indentations, and gutter widths. These notes were called markup, and form the basis of thinking behind HTML tags. HTML is used in very much the same way as print markup.
To put it very simply, we surround our content with tags to describe the content that is held within those tags.
For example, to identify a paragraph I would surround it with the paragraph tag. To identify a header I would surround it using a header tag. By doing this it allows us to not only semantically define the content held within those tags, but also define the structure of the document.
With just a few simple tags, much of the world’s content is delivered.
I have personally coded hundreds of learning objects by hand, and created many online courses using an LMS. If I have learned anything, it’s that most online content is defined using a small subset of HTML tags.
- The Paragraph Tag <p>
- The Heading Tag <h1>
- The List Tag <ul>
- The Table Tag <table>
- The Image Tag <img>
- The Anchor Tag <a>
What the heck is a tag anyway?
Most HTML tags are made up of two parts so that you can surround the content you would like to identify. With that in mind, most tags have a beginning tag and an end tag. The beginning tag is always just the tag itself and the end tag is that same tag with a terminal forward slash.
So, to make a paragraph I would surround the paragraph of text with my beginning and terminal tag pair like so.
<p>This is a paragraph of text that is useful to me because it's illustrating a point I am trying to make.</p>
Notice how the tags surround the content.
Some other tags do not have an explicit closing tag, but close themselves.
Like the following image tag.
`<img src=”img/myImage.jpg” alt=”this is an image”>`
You will see both types as we progress.
The Paragraph Tag <p>
The paragraph tag is the most used tag on the internet. It’s used to define a paragraph of text. A paragraph is usually thought of as a group of words preceded and followed by a blank line. It allows you to group thoughts and concepts together. Here is yet another example.
<p>This is a paragraph that is made up of a single line of text.</p>
The Heading Tag <h1>
There are actually 6 header tags. The <h1> tag is used to identify the most important headline on the page. The <h2> through <h6> tags are used to identify sub headings. Think of defining an outline. The title of the outline is the H1, and next level of sub headings would be h2, then h3, etc…
<h1>The Main Idea</h1> <p>This is an introductory paragraph that has a lot to say about the content of the page as a whole.</p> <h2>First Subheading</h2>
The List Tags
The list tag is pretty self explanatory; it is used to define both ordered and unordered lists. There are two versions of the tag that you should be aware of, the ordered list (OL) and un-ordered list (UL). Both types of lists have a tag in common that is used to populate the list, and that is the List Item Tag (<li>). Once you see a list in action this should all become clearer to you. So let’s move on to our first type of list.
The Unordered list <ul>
In my experience, this is the most used type of list within all of education. Whether that stems from the already prolific use of Powerpoint we will never know.
The unordered list is used to define a list of things that do not require numbering. Otherwise known as the bulleted list.
To form a list, first lay down your list tags like so…
Once the list is made, you can fill it up with list items using the <li> tag.
<ul> <li>List Item</li> <li>List Item</li> </ul>
Each list item is wrapped in a nice pair of <li> tags, and the group of list items is wrapped in the list tag. The same is true of ordered list.
The Ordered List <ol>
The ordered list tag is used to define numbered lists. Its main characteristic is that it numbers each entry.
Just like with any list; start with the ordered list tags.
Then start adding your list items.
<ol> <li>Item One</li> <li><Item Two</li> </ol>
You can nest lists within each other, ad infinitum.
The Table Tag <table>
The table tag is used for one thing, and one thing only…displaying tabular data.
Many instructors are under the impression that tables should be used to layout random content that they would liked to be grouped into rows. This is bad practice for many reasons that I could go on all day about, but let’s just stick with that and move on.
The W3C describes the table tag simply …
Tables are defined with the <table> tag.
A table is divided into rows with the <tr> tag. (tr stands for table row)
A row is divided into data cells with the <td> tag. (td stands for table data)
A row can also be divided into headings with the <th> tag. (th stands for table heading)
It’s fairly easy to make a table; start by forming the basic table tags.
To add rows to the table you utilize the <tr> tag.
<table> <tr></tr> </table>
To add cells to each row insert <td> tags filled with data.
<table> <tr> <td>Description</td> <td>Quantity</td> </tr> </table>
From there you can add more rows to fill out the table.
<table> <tr> <td>Description</td> <td>Quantity</td> </tr> <tr> <td>Hammer</td> <td>57</td> <tr> </table>
Notice that the first row in the table is really made up of row headers and not actual data. There is a tag for that called Table Header <th> that we can use to make those cells act like column headers.
Lets change that first row from data cells to column headers by just changing the surrounding tags from <td> to <th>.
<table> <tr> <th>Description</th> <th>Quantity</th> </tr> <tr> <td>Hammer</td> <td>57</td> <tr> </table>
That’s how you form a basic table. Obviously you can go much farther than we have gone here, but I wanted to keep things as simple as possible so you can glean at least a basic understanding of the subject.
The Image Tag <img>
The image tag is one of those tags I spoke about earlier that is formed using only a single tag. When using an editor located within a web application it is often easier to create the tag initially using the built in upload image tool. If you need to tweak it after that this will give you a good idea of how the tag is formed so you can understand what you are looking at when you see one.
First off, let me show you a basic fully formed <img> tag in action. Notice that the img tag has what are called “attributes” defined already. (“src” and “alt”)
<img src=”path/toImage.jpg” alt=”This should describe the content of the image”>
This might look confusing at first, but take a minute to deconstruct each part in your mind.
The tag itself starts out predictably with img. This simply identifies the tag as an image tag.
The next part is the source attribute (src=”path/toImage.jpg”.) This defines the image source, and points to the file on the server file system. If you use the upload feature then this bit is filled out for you automatically.
The next attribute is the alt attribute(alt=”This should describe the content of the image”.) The alt attribute is used by screen reader software to interpret the content of the image. It is important that within the alt attribute you describe the content of the image as if you were looking at it with your two eyes, NOT the name of the image or the role it plays on the page.
The Anchor Tag <a>
Whenever I mention the anchor tag to anyone other than a fellow web professional I have to use the term “link” tag or they never understand what I am talking about.
The Anchor Tag is used to form hyperlinks. Those links could point to wholly separate web pages, or to a specific place inside the existing page. To use the tag just surround whatever you want to make a link. In this example I am making a whole paragraph link out to my website.
<a href=”http://ianvanhoof.com”><p>Ian Vanhoof’s Website</p></a>
This is another one of those tags that has a bunch of attributes you can include with it, but we are going to stick to the bare bones explanation within this context so you can understand what’s going on here.
Let’s break it down. The anchor tag starts out identifying itself as an anchor using the standard tag pair <a></a>. As with any other tag you use them to surround whatever you want to make a clickable link.
Take a look at the href attribute within our example anchor tag.
<a href=”http://ianvanhoof.com”><p>Ian Vanhoof’s Website</p></a>
The href attribute defines the destination web address you want the user to travel too once the link is clicked. It’s that simple.
In that last example we surrounded a paragraph, but that could just as easily be an image. Like so.
<a href=”http://www.ianvanhoof.com”> <img src="img/ianLogo.png"alt="This is the logo for ian vanhoof's website, if you click it you will travel to ianvanhoof.com"> </a>
The Possibilities are ENDLESS.
I really hope that this has helped even ONE educator out there. It doesn’t take much to become proficient in these basic tags. I would be surprised if you will need any further training in HTML to provide the same content that you do in a traditional classroom using Powerpoint. Just don’t forget to provide this link to your fellow compatriots that you find sitting in front of their computers with a confused look on their face trying to get half of the stupid paragraph to stop being RED and indented 5 spaces.