Skip to Content

HTML Pell-Mell

This post is specific to ASU Online courses in Pearson LearningStudio.

“HTML does NOT stand for having the time of my life!”

This was my initial reaction when discovering that I needed to learn about HyperText Markup Language (HTML) while working towards my master’s degree several years ago. I’ve now grown an appreciation for this markup language, and I would like to provide a few, basic tips when you feel ready to venture beyond the Design tab into the HTML tab in your LearningStudio courses.

Switching to HTML view in LearningStudio
Switching to HTML view in LearningStudio

Once you have created an item in Author mode, click the HTML tab and take a peek. What do you see? You might see brackets with letters, such as <p> or <h1> amongst a bunch of other code. No worries, this is normal! What we would like to see is more of a “clean” page rather than pages and pages of colorful code; more about this later.

Once you click the HTML tab, at the top of the page, you should see the following code linking to the university approved stylesheet:

<link href="http://asuonline-dev.asu.edu/css/index.css" rel="stylesheet" type="text/css" />

This stylesheet will help you get the university approved styling such as, line spacing, colors, icons and fonts. If other CSS code is present in your HTML, it may override the stylesheet. When you create a new page or item, be sure to copy the stylesheet and add it to the top.

When you click the HTML tab, most pages/items include the following:

<link href="http://asuonline-dev.asu.edu/css/index.css" rel="stylesheet" type="text/css" />
<h1>Heading!</h1>
<div id="video">
<p>Your text</p>
</div>

What does all this mean?

This is the university approved CSS stylesheet that I discussed earlier:

<link href="http://asuonline-dev.asu.edu/css/index.css" rel="stylesheet" type="text/css" />

Next you see a heading tag <h1> and a closing heading tag </h1> immediately after the heading title. We have h1, h2, and h3 for heading choices, h1 being the largest font size. We use headings instead of font tags so that the page can be used by students with disabilities. Screen reading tools work better with headings. The stylesheet will format your heading with the color code of #009933.

<h1>Heading!</h1>

Next you see a div tag <div id=”video”> to display icons for digital text, lecture presentation, video, audio, etc. Notice that the closing </div> tag comes later in the page. Note: These div tags can only be used with our stylesheet.

<div id="video">

Below are the more common div tags typically used in a course:

  • <div id=”digital-text”>
  • <div id=”lecture-presentation”>
  • <div id=”web-resources”>
  • <div id=”video”>
  • <div id=”audio”>
  • <div id=”self-check”>
  • <div id=”discussions”>
  • <div id=”group-work”>
  • <div id=”writing”>
  • <div id=”quiz”>
  • <div id=”review-icon”>
  • <div id=”digital-file”>
  • <div id=”redbox”>

Next you see a <p> tag to format the sentence and a closing </p> tag at the end of the sentence or paragraph.

<p>Your text</p>

The ending </div> tag is the last thing you typically see. Sometimes a horizontal rule <hr> is used to divide or end sections. If this closing </div> tag is anywhere else, you might find unwanted indenting.

</div>

All of this code may repeat over again if you have multiple sections with different information. It gets more complicated when images, video, and audio are added. For example, you might see <iframe>….</iframe> for a video. Other tags you might see are lists, such as <ol> (ordered list) for numbering or <ul> (unordered list) for bullets. For example:

<ul>
<li>list item</li>
<li>list item</li>
</ul>

Back to why we like a clean page—this is helpful to your instructional designer when searching for an error on the page, updating information or for formatting purposes. Here’s an example of a clean page:

Split view in Dreamweaver
Split view in Dreamweaver

The code on the left includes the stylesheet, a heading <h1>, a paragraph <p>, an icon <div id=”video”>, a list <ul> and a video <iframe>, and all of the tags have the appropriate closing tags. The page produced on the right is organized and clean. When tested in a browser, the actual video is shown without a box around the content.

You may have received a message from a student stating that she cannot view the material because there is a pattern repeating across the page. It’s easier for your instructional designer to assist you if you are using the university approved stylesheet and have a clean page. A messy page typically comes from copying from a document, another webpage or another Blackboard course then pasting it into LearningStudio.

Give it a try. You won’t break it! Create a new item. Paste the stylesheet at the top of the page—you can copy it directly from this post. Try adding a heading, an icon and a paragraph, maybe even a list. Be sure to explore HTML with your assigned instructional designer.

The following resources may be helpful as you explore HTML: