ACADEMIC TECHNOLOGY SUPPORT
Desire2Learn:
Building HTML Content
ats@etsu.edu | 439-8611
www.etsu.edu/ats
Table of Contents:
Managing Expectations ........................................................................................ 1
Why Create HTML Content?............................................................................... 1
D2L Prep Work..................................................................................................... 2
What is HTML?..................................................................................................... 7
Exercise: Matching Content Types ..................................................................... 8
Basic HTML Syntax .............................................................................................. 9
Quiz: HTML Basics ........................................................................................... 13
Building New Content within Templates.......................................................... 14
Conclusion ........................................................................................................... 20
What about the WYSIWYG Editor? ................................................................. 21
Exercise & Quiz Answers .................................................................................. 22
Additional Resources .......................................................................................... 22
Managing Expectations
I want to let you know what to expect in this workshop/guide before we get into deep water. The focus here
will be on how to create HTML content in D2L. Since we will need to use a variety of tools to complete that
task, this workshop/guide is technical in nature. We’re going to spend a lot of hands-on time learning to
understand and work with D2L, HTML, and file management. By the end, you should have the information
and resources necessary to get started creating HTML content in your own D2L courses. This will be the
beginning of a learning process, so do not expect to be an expert by the time you are finished here.
Why Create HTML Content?
Before we get started with the “how” I do want to address the “why,” because if you aren’t sure why you
would want to do something in the first place then you won’t be motivated to do it.
The primary reason for placing your course content in the HTML
format is that it is accessible. It is easy for students—any student—to
open. You see, with other popular formats like Microsoft Word or
PowerPoint, even PDF, users must have an appropriate plug-in or
software application in order to open and view the content. You may
respond by saying, “Well most people have a PDF reader,” and based
on my experience I would say that you are probably correct. However,
compatibility across devices is becoming more and more complicated as new mobile devices are being
introduced into the marketplace, and a large percentage of people are using these devices as their primary
means of internet access. On many of these mobile devices, you can find ways to open a PDF file (with a
little bit of effort), but all of them will open an HTML file with no questions asked. This is because all of
these devices already have a web browsing application installed. You have to use a web browser to access
D2L in the first place, so if you are on a D2L site then you already have the means to open an HTML file. In
fact, D2L is, in itself, made up of HTML! This means that anyone that goes to your D2L course can open
HTML content. This is a big advantage, and definitely a best practice. As an instructor, you ought to want to
create an accessible, user-friendly experience for your course, because a friendly technical environment will
foster a better learning environment.
Support Contact: Daniel Gibson, Technology Development Coordinator (gibsondv@etsu.edu; 439-8244)
1
1
D2L Prep Work
Though this guide does introduce you to the basics of HTML, it does not demonstrate or require you to go
through the process of creating HTML files from beginning to end. Instead, we recommend that you utilize a
pre-built HTML template (which will be supplied to you). However, to work with a template we need to do
some prep work inside D2L before we start working with the HTML language.
Free HTML Templates Available Online
Desire2Learn has developed their own set of HTML templates, which are free to download and use in your
D2L courses. These templates consist of pre-built HTML pages which you can customize with your own
content. It certainly is not required that you use one of these templates in your own course, but you will likely
find that they make your content more readable than plain HTML. Here’s a quick comparison of the same
HTML content—one written in plain HTML and the other using one of the D2L templates:
Plain HTML
D2L T
Template
l (“Ordinary
(“O d
Bl
Blue”)
”)
Cascading Style Sheets (CSS)
These templates look better because they implement an additional language called Cascading Style Sheets (CSS)
that modifies the plain HTML. CSS can be utilized to customize the look and formatting of HTML elements.
This guide will not cover CSS (you don’t need to know how to use it to implement one of these templates),
but if you are interested in learning more about it then I encourage you to check out websites like W3Schools
to get started.
Download one of these templates (or more) for yourself
This guide is going to show you how to use these D2L templates, so go ahead and pick one that you like from
the D2L HTML Templates page of the ATS site (http://www.etsu.edu/academicaffairs/elearning/
ats/training/exercisefiles/d2l_templates.aspx) and download it. Save the .zip file in a place that you will be
able to find it (like your desktop), because you will need to use it to follow along with the guide.
2
Uploading a Template Package to Your D2L Site
Once you have a template package downloaded you need to put it in D2L. Uploading your template to your
D2L site will require that you follow a specific set of steps, so get your mouse-clicking finger ready and follow
along with the steps below:
1. Go to ETSU’s D2L login page (http://elearn.etsu.edu/) and sign in with your ETSU username
and password. Once you have logged in, you will be taken to the D2L My Home page.
2. From the D2L My Home page, navigate to a course where you are the instructor.
(You may have to click on the “Instructor” tab inside the “My ETSU Courses” box)
3. Navigate to the “Content” area of your course (1), then click on the “Manage Files” link (2)
4. Create a new folder, upload the template package, and then unzip it
Use the Manage Files tool to create a new folder called ‘css’ (1), and then upload (2) and unzip (3) the template
file inside the newly created ‘css’ folder. (See image on the next page.)
Support Contact: Daniel Gibson, Technology Development Coordinator (gibsondv@etsu.edu; 439-8244)
3
3
Once you have unzipped the folder, you will have both a zipped and an unzipped version of the folder on
your site. You can delete the .zip file. (Check the box to the left of the .zip file, and then click on the trashcan icon.)
Preparing Template Files for Use
You can begin working with the template files now that they are in your D2L course. To make the upcoming
process of copying the template easier on yourself, this guide recommends that you add the blank template
file as a hidden topic to your course content. By doing this, you can reference quickly, and use it as a starting
point for all new template-based content in your course.
1. Create a New Topic Based on the “blank_template.htm” file
Go to “Manage Content” (1) and click on the “New Topic” button at the top of the page (2). This will take
you the New Topic page, where you will need to select the “Course File” link (3).
Once on the New Topic – Course File page, select an existing module as the parent module for this topic (or add
a new module) (4), give the topic a name (like “Blank Template”) (5), and then click the “Browse” button and
find the “blank_template.htm” file within your course’s new ‘css’ folder (6).
4
Once you have selected the blank_template.htm file, click on the “Restrictions” tab (7) and then on that tab
check the “Hide this topic” box and then click the “Save” button (9).
Now that the blank template is in place in your course content, you can access it easily to copy it and build
new topics that your students will actually see and use.
Creating New Topics from the Blank Template
Now that all template files are in place, you can begin to build new topics that utilize template information.
There are several ways that you could attempt to copy your blank template file, but this author recommends
that you do it in the following manner:
1. Edit the “Blank Template” topic
From the Manage Content page, click on the pencil icon to the right of the “Blank Template” topic, which we
created earlier.
2. Open the HTML source editor and copy all the HTML
Click on the “Edit HTML Source” button (shown below) and then, from the HTML editor, use the keyboard
shortcut CTRL + A to select all the content in the editor, and then copy the contents of the editor.
Once you’ve copied the HTML information from the Blank Template file, you can press the cancel button
(twice) to cancel the editing of the template document.
Support Contact: Daniel Gibson, Technology Development Coordinator (gibsondv@etsu.edu; 439-8244)
5
5
3. Create a New Topic File
Back on the Manage Content page, select one of the “New Topic” links. Then, on the New Topic page, select
“Create New File”. This will take you to the topic editor.
4. Define the New Topic
Provide a title for your new topic, give the topic a file name (with no spaces or special characters—you can
use hyphens and underscores), and make sure that the file will be created in the correct course folder. By
default, new course files are added to your course’s root folder, but this will quickly result in a mess if you
place all of you content in one folder. We recommend that you organize your course files in sub-directories
that match your modules.
5. Open the HTML Source Editor and Paste in the Template Information
Click on the “HTML Source Editor” icon (same as earlier) and select all the content already in the editor
(CTRL + A), then paste in your copied template content. Click the “Update” button in the bottom left of the
HTML Source Editor window.
Click the “Save” button in the bottom right of the Create New File window.
To preview your template-based file, click the “Preview” button next to the HTML Source Editor button.
6
What is HTML?
HTML stands for Hypertext Markup Language. Those words alone may not provide much meaning, so it
may be easier for you to think of HTML as a means to describe web page content.
Conceptually, a markup language is very simple; it is a system for annotating
documents in order to define the various components within those documents. A
markup language is not the same as a programming language, which actually works
with data to make decisions and perform tasks.
In this workshop, we are going to break down a fairly straightforward document into individual elements
based on each element’s content type. This may sound more complicated than it really is. To demonstrate,
let’s practice with a little exercise (on the next page).
The Etymology of “Hypertext” (For word nerds)
The term Hypertext was coined by Theodor Holm Nelson, and was intended to connote
“the extension or generality of text.” He coined the word to signify the non-linear nature and
potential of a “web” of interconnected texts that could be contained in and retrieved from
computational devices. It has become a bit of a misnomer as the medium has evolved, because
hypertext now includes other media, like images and video, and not just text; therefore the word
“hypermedia” (also coined by Nelson) would now be more appropriate. However, the original
word seems to have found a permanent place in the HTML acronym, and it may never officially
change.
Do the exercise on the next page and then return to this text.
If I were a gambling man then I’d bet $1,000 that you aced that exercise. (Please observe that I am not
actually a gambling man.) You may not be accustomed to using some of the web terms associated with these
content types—for instance, you might say “bulleted list” instead of “unordered list”—but my guess is that
you were able to figure it out with relative ease.
Working with HTML, conceptually, isn’t much different than this exercise. However, instead of assigning
number values to every content type, we are going to have to use HTML syntax—its lingo, or way of talking.
Let’s take a look at the HTML syntax now.
Support Contact: Daniel Gibson, Technology Development Coordinator (gibsondv@etsu.edu; 439-8244)
7
7
Exercise:
Matching Content Types
Match each content type (left) with an area of the document (right) by assigning each content type’s corresponding number to one of the boxes on the right. Each option is used only once.
Content Types:
1. Unordered List
2. Paragraph
3. Heading
4. Image
5. Horizontal Rule
6. Hyperlink
8
Basic HTML Syntax
Elements
HTML markup is made up entirely of individual, standardized elements, which describe both the document
and the document’s content. In order to define one of these elements you have to use a kind of coded
marker, most commonly referred to as a “tag.” (See the heading example below.)
Elements that Contain Content
Here is a standard, top-level heading element:
This example demonstrates the basic syntax for any element which contains content. The content is
surrounded by two tags, and each tag is composed of a standard element name (in this case “h1”) which is
enclosed in angle brackets. Both tags are necessary to define this content. The first tag indicates the beginning
of the content, and the second is used to indicate the end of the content. The only required difference
between an opening and closing tag is that the closing tag must contain a forward slash before the name of
the element. Anything that is typed between these two tags will be considered a part of the heading.
Element Names
Most elements are named with a kind of abbreviation or shorthand. You will have to
memorize their names or consult a reference in order to identify and use them.
The heading above gives you a good idea of what most elements will look like in HTML. You could use this
syntax to define several other forms of content by simply changing the element name. For example, here is
the paragraph from our first exercise:
<p>Academic Technology offers a wide range of equipment ready for faculty and staff to
check out. Need a video camera or audio recorder? Need a portable projector or just
want to see how an iPod works? Check the list below for equipment we have available,
and feel free to call ahead and reserve anything you know you might need for a certain
event. Some items are limited in quantity, so be sure to call early.</p>
The only difference is that “p” has replaced “h1”, and the paragraph content is now between the two tags.
Simple, no?
Support Contact: Daniel Gibson, Technology Development Coordinator (gibsondv@etsu.edu; 439-8244)
9
Elements that Do Not Contain Content (Empty elements)
Not all elements contain content; some make declarations. These are called empty elements. One of the most
common elements of this type is the line break element:
<br />
A line break causes the page content to jump down to the next line, but doesn’t contain any content in itself.
You will notice that there is a forward slash just before the closing angle bracket; this is used in place of a
separate closing tag, because again, this element doesn’t contain any content, and therefore doesn’t need a
separate closing tag to signal when it ends. An empty element is merely a one-off statement which declares
that something should exist or happen at that particular point in the document.
Another example of an empty element is the image tag, shown below:
<img />
You may say, “An image can be a part of a page’s content. How is it that an image tag is not considered to
contain any content?” Good question. Images aren’t truly defined from within an HTML document the way
text is; they exist as a separate file which can be called into an HTML page. Since this is the case, you don’t
have to create the image content inside the HTML document, but merely state that it exists. However, you do
have to tell the browser where to find the image you want to use, and for that we are going to need to use an
element attribute.
Element Attributes
Using plain elements, like in the examples above, will get you started, but you will quickly want to spice things
up and modify some of the basic properties of your HTML content. The most basic way to modify an
element is to use an element attribute. Element attributes are pre-defined properties, specific to each individual
element, which can be given unique values in order to change the way an element behaves or appears. Here is
the basic syntax for defining an attribute within a content containing element and an empty element,
respectively.
<element attribute="value">Content</element>
<element attribute="value" />
Pay careful attention to the syntax of those two previous statements. First, notice that only the first tag
contains the attribute information. Also, the spacing of is important and should be emulated. There needs to
be a space between the name of the element and the name of the attribute, then an equal sign, then the value
inside quotations. If you don’t use that exact syntax then things are liable to break.
Let’s look at a more practical example. Earlier I mentioned that we would need to use an attribute to define
an image. Here is an image element with the image’s location defined by the source attribute:
<img src="happyface.jpg" />
10
You can, and in many cases you will need to, use multiple attributes within a single element. Here is another
image example, with all the attributes that you would typically see used for an image:
<img src="happyface.jpg" alt="Happy face drawing" height="150" width="150" />
There are several attributes in place here, so let’s break them down.
src
“Src” is short for “source”. This directs the browser to the image file that will be
called with the HTML document is loaded. The image must be downloaded
separately from the HTML file in order for the user to see it, so having many
images, or large images, will slow down the process of loading the page.
alt
“Alt” is short for “alternate text”—an accessibility measure which insures that those
who can’t see the image will be able to understand the content by reading a text
description. You are legally required (encouraged?) to include accessibility
information where necessary.
height & width
These are pretty self-explanatory. The default unit of measure for these attributes is
the pixel, so any number you put here will be interpreted as pixels.
Other attributes
Each element has its own list of applicable attributes, and each attribute accepts a
specific kind of value. The only way to know what your options are is to consult a
reference (like www.W3Schools.com) and then memorize these as you go along.
Nesting Elements
As you develop your content in HTML you will find instances where one type of content will need to exist
inside of another. For instance, perhaps you want to create a link within a paragraph. This is called nesting
elements, and it is common practice. Here’s an example of what a link within a paragraph would look like:
<p>Academic Technology offers a wide range of equipment ready for faculty and staff to
check out. <a href="equipment.html">Browse our available equipment.</a></p>
When multiple elements are nested, you must close the tags in order of last-created to first-created. Put
another way, you have to work from the inside out. Here’s a simplified representation of the principle (using
fake element names):
<1>first <2>second <3>third</3></2></1>
If you do not close tags properly then you could end up with a final product that displays or behaves
improperly, so be sure to look out for misplaced closing tags.
Putting it all Together
I’m going to trust that you now have a basic understanding of how HTML markup works. There is a lot left
to learn, but my hope is that you will now be able to look at HTML without being completely bewildered—
maybe you can even understand some of it!
Support Contact: Daniel Gibson, Technology Development Coordinator (gibsondv@etsu.edu; 439-8244)
11
Remember that matching content types exercise (Pg. 8)? Here it is in plain HTML:
<!DOCTYPE html>
<html>
<head>
<title>ATS Solutions & Support – Equipment Checkout</title>
</head>
<body>
<h1>Equipment Checkout</h1>
<p class="subhead">Providing short-term equipment and device loans for ETSU faculty
and staff</p>
<hr />
<img src="equipmentCheckout.jpg" alt="Close-up still image of a digital camera."
height="122" width="532" />
<p>Academic Technology offers a wide range of equipment ready for faculty and staff to
check out. Need a video camera or audio recorder? Need a portable projector or just
want to see how an iPod works? Check the list below for equipment we have available,
and feel free to call ahead and reserve anything you know you might need for a certain
event. Some items are limited in quantity, so be sure to call early.</p>
<ul>
<li>Cameras</li>
<li>Laptops</li>
<li>Microphones & Recorders</li>
<li>PC Peripherals</li>
<li>Projectors</li>
<li>Response Systems</li>
<li>Tablets, eReaders, & Mobile Devices</li>
</ul>
<a href="equipmentDetails.html">Read More >></a>
</body>
</html>
Missing Pieces
There’s a lot of code in the example above that we didn’t cover, but that is okay. This guide isn’t going to
provide you with a comprehensive understanding of HTML in one sitting. For now you just need to be able
to examine an example and identify the building blocks.
Before we move on, let’s reinforce some of this information with a quick quiz!
12
Quiz:
HTML Basics
1. What is the function of HTML?
a. It provides a system for annotating documents
b. It describes content
c. It delivers instructions to a web browser regarding how to display web page content
d. All of the above
e. None of the above
2. Which of the following definitions is false?
a. An empty element does not contain content
b. An element attribute provides additional information about an element
c. Tags are coded markers which define elements within an HTML document
d. HTML is an acronym for “Hippopotamus Took My Lunch”
3. Which of the following is an empty element?
a. <p>Paragraph goes here…</p>
b. <hr />
c. <h1 class="blue">Blue Heading</h1>
d. <img src="logo.jpg" alt="Company logo" height="85" width="85" />
e. a and c
f. b and d
4. Which of the following statements uses proper HTML syntax?
a. <p>Paragraph goes here…
b. <a href="webpage.html">Link</a>
c. <br >
d. <h1 class=blue>Blue Heading</h1>
e. b and d
5. Which of the following statements uses properly nested elements?
a. <ul><li>List Item #1</li></ul>
b. <p><a href="webpage.html">Link</p></a>
c. <p>Name<br />E-mail address<br />Phone Number</p>
d. a and c
e. None of the above
Support Contact: Daniel Gibson, Technology Development Coordinator (gibsondv@etsu.edu; 439-8244)
13
Building New Content within Templates
All the essential pieces are now in place within D2L, and you have a basic understanding of how HTML
works, so let’s put it all together and create some real content.
Converting Documents into HTML
For this guide I’ve developed some simple content in Microsoft Word about D2L discussions. I now want to
place this content inside my D2L course. If you want to use my content then you can download it to use for
yourself (http://www.etsu.edu/academicaffairs/elearning/ats/training/exercisefiles/d2l_discussions.zip).
Sample Content File
Just like with the matching content types exercise earlier in this guide, you should examine your content and
determine how to break it down into appropriate content types. The sample document (shown above) is
made up of headings, paragraphs, lists, and an image—pretty straightforward. Let’s translate it into HTML!
The Content Editor
D2L has a basic WYSIWYG editor. (Often pronounced “wizzywig,” which is short for
“what you see is what you get.” Unfortunately, what you see in this kind of editor is often not
what you actually get. It is a habitual liar, and is not to be trusted.) You could attempt to use this
editor, but your content will inevitably break. There are some tasks that work well in the editor,
but I would advise that you first become comfortable with editing HTML. Knowing how to fix
minor HTML problems will free you to use the WYSIWYG editor in the future.
14
1. Open your blank topic in the HTML source editor
Return to your D2L course, where you have already created a new blank topic based on the blank template
file. Open your blank topic in editing mode.
From the Edit Topic page, click on the “Edit HTML Source” button.
2. Modify some of the existing elements and their content
The following steps are based on the provided sample content file. If you are creating custom content you
may not need to take exactly the same steps.
a) <title>
First, you need to change the content inside the <title></title> tags. The default content
is “Sample Template – Stripped.” Your title should be changed to relate to your course
content. You may want to start with your course number and then the topic title (e.g. “JAPN
1010 – Module 1 – Hiragana”)
b) <h1>
The template includes a page header (h1). Replace the content inside the <h1></h1> tags
so that it says “D2L Discussions” instead of “Page Header.”
c) <h2>
Replace the content inside the <h2></h2> tags so that it says “Discussion Forums &
Topics List:” instead of “Section Header.”
d) <div>
The last set of existing elements that you will want to consider are a couple of <div> tags.
You’ll notice two of these divs just below the <h2> tag in the previous step. A <div> tag
represents a “division” in the page, and contains content which is considered separate from
other areas of the page. These two divs both have an attribute called ID. The ID attribute is
a way of naming elements so that they can be identified by other languages that modify
HTML. In this case, these div ID’s are being referenced in the CSS so that their formatting
can be uniquely modified.
Support Contact: Daniel Gibson, Technology Development Coordinator (gibsondv@etsu.edu; 439-8244)
15
Both of these divs exist as optional areas of content which you may or may not need. One—
“footnotes”—contains an area for references and other footnote information. The other—
“footer”—contains an area for any extra footer information that you may want to include. In
the case of my sample content, I do not need an area for footnotes, but I will use the footer
area to add a kind of label for my page. Since I do not need the footnotes, I can delete the
div and its content (<div id="footnotes">Footnotes go here (if
desired).</div>)
At this point we have only modified the existing HTML. The image below displays what areas have been
modified at this point (green = updated content ; red = deleted content). Next we will need to add new
HTML to fill out our content.
3. Add the remaining text content
At this point we have a couple of headings and the footer, but there’s a lot of text content still remaining in
the original sample document. This remaining content is entirely made up of paragraphs, numbered lists, and
a section header. Here is some example markup that will have to be used for this content:
<p>Paragraph text</p>
<ol><li>List item 1</li><li>List item 2</li></ol>
<h2></h2>
See if you can bring the remaining text into the HTML source editor and mark it up using the examples
above as a guide. Once you’ve given it a shot, compare it with the code below and see how you did.
Note: The light gray code shown below is a part of the original template, and it is critical, but it should be left alone. Its
appearance has been de-emphasized.
16
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head lang="en">
<link rel="stylesheet" type="text/css" href="/content/enforced2/3047632ATSSDB019/css/DeskPaper/stylesheet.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>D2L Discussions</title>
</head>
<body>
<div id="container">
<div id="decorative">&nbsp;&nbsp;</div>
<div id="header">
<h1>D2L Discussions</h1>
<p>Discussions is a communication tool used to discuss topics from class, sign up for assignments
or projects, ask general course questions, etc. Student conversations are logged and organized
in the Discussions. Conversations are grouped into threads that contain a main posting and all
related replies. Instructors will create the forum for your class and each course will be
somewhat different, but these general instructions will assist you.</p>
</div>
<div id="body">
<h2>Discussion Forums &amp; Topics List:</h2>
<p>To get to D2L Discussions page, click on the “Discussions” link from the top Navigation
Bar.</p>
<ol>
<li>The “Display” drop down menu will allow you to select between "All Forums and Topics" and
"Topics with Unread". If you select "All Forums and Topics" you will see all discussion Forums
that are available in your course. If you choose "Topics with Unread" you will see the
discussion Topics where you have yet to read through the messages. This can be a great tool to
jump right to Topics you still need to read through.</li>
<li>In the list of discussions, you will first see one or more Forum titles, along with
descriptions of what the instructor may want students to post. You can think of a Forum as a
category for discussion under which several Topics may be discussed.</li>
<li>You may see a couple of graphic icons displayed just to the right of a Forum or Topic title.
These icons indicate that a Forum or Topic is visible or available for new posts only during a
specific range of dates. If these icons are present then you will also see the associated date
ranges at the bottom of the Forum or Topic description. The visible attribute dictates how long
students are able to view the discussion, and the locked attribute dictates how long students are
able to post new messages into that particular discussion.</li>
<li>Underneath a Forum, you will see one or more Topics for discussion. Note how it tells you
how many messages are posted in the Topic and how many you have left to read. Clicking on the
Topic name will take you to a list of messages for that particular Topic.</li>
</ol>
<h2>Making a Discussion Board Post</h2>
<p>After clicking on a Topic title, you will be taken to a new page which displays a list of
messages, if any, that have been created within that topic.</p>
<ol>
<li>To add a new message, click the “Compose” button near the top of the page. This will open the
“New Message” window. This new window will list the name of the Forum and Topic under which you
are posting a new message.</li>
<li>The first thing you need to provide is the subject or title of your new message. This is
what other users will see in the messages list.</li>
<li>Below the “Subject:” field is the “Message:” field, where you will enter the content of your
discussion post. There is a basic word editor to allow you to format your message, with tools
such as bold, underline, italics, orientation, and even a spell checker.</li>
<li>Beneath the message area there is an Attachment tool which will allow you to attach a file to
your message. If you have a file that you would like to attach, click the “Add a File” button
and then browse your computer for the file you want to attach. Once you have found it, highlight
the file and select Open.</li>
<li>If you need to cancel the creation of your new message, look to the bottom left of the “New
Message” window, where you will see the “Cancel” button, which will delete anything you have
added on this screen and return you to the last discussion Topic you were in.</li>
<li>Once you have filled in all the relevant information for your post you can click the “Post”
button in the bottom right of the “New Message” window to submit your post to the discussion
Topic. It will be immediately available for everyone to read.</li>
</ol>
<div id="footer"><em>Daniel's Development Course</em></div>
</div>
</div>
Support Contact: Daniel Gibson, Technology Development Coordinator (gibsondv@etsu.edu; 439-8244)
17
4. Adding images
Now that all the necessary text content is in place, we can add the image used in the original sample
document. However, in order to add the image it will be best if we use the WYSIWYG editor (gasp!), so press
the “Update” button at the bottom of the HTML source editor and let’s move over to the other editor.
Inside the WYSIWYG editor, click just in front of the first word in the first paragraph (“Discussions”) to
place the editing cursor there (1), and then click on the “Insert an image” button in the menu bar (2). This
will open an image selection menu.
Click on the “Browse” button and find the accompanying image that came with the sample content
document, then click “Upload.” This will open an alternate text menu.
Alternate text is text that will display if the image does not load. You should include some descriptive
information about any images you add to your HTML pages. Here I designated “Chat bubble graphic” as the
alt text. I also checked the option “This image is decorative.” Click “OK” here when you are done. Your
image will then be inserted into the document.
18
The image isn’t positioned exactly where I would like it to be. To re-align the image, we can click on the
image to select it, and then click on one of the alignment options in the menu bar. I selected the “Align right”
option for my image (shown above). This will cause the text below the image to wrap along its left side.
At this point I am satisfied with my content, so I will click the “Save” button to commit to those changes.
5. Previewing you content
Click on the “Preview” button to get a look at your final product. Here’s what my content looks like inside
the Desk Paper HTML template:
Support Contact: Daniel Gibson, Technology Development Coordinator (gibsondv@etsu.edu; 439-8244)
19
We hath wrought epic content. Win!
Conclusion
If you’ve followed this guide all the way through then you should now have a complete, working HTML
document integrated into your course. The process of creating HTML content may be long and cumbersome
initially, but as you gain experience it will require less time and effort. (If you find that your time is already
limited, you could, perhaps, find an assistant who could help you move your content into HTML.)
Remember that the reason we make this content in HTML is because of its incredible accessibility. HTML
content will be accessible to anyone on any device. While the work is harder up at first, it will hopefully
prevent you from having to worry about technical problems in the future.
20
What about the WYSIWYG Editor?
I intentionally avoided the WYSIWYG editor for most of this guide, because if you don’t understand the
underlying HTML then the WYSIWYG editor will likely just create problems that you can’t fix. However,
once you get comfortable looking at HTML and fixing basic syntax problems I would encourage you to try
out the WYSIWYG editor. I’ve already mentioned that it is your best option for incorporating images, but it
can do some other things as well.
Basic Text Editing
If you just need to fix a typo or change a word in a sentence then the WYSIWYG editor is a fine option. You
may run into trouble, however, if you try to select a large portion of text (an entire paragraph, list, or heading)
and then cut or edit it. Sometimes the WYSIWYG will select more underlying HTML than you anticipate,
and then alter it when you try to make edits.
Import Content from Microsoft Word
There is a special command in the WYSIWYG editor that helps you to paste content from Microsoft Word
(it looks like a clipboard with a MS Word icon on top of it). It won’t copy all the formatting perfectly, but it
will help to avoid potential disasters when pasting content from Word.
Basic Text Formatting
If you want to make some text italicized, or convert text to a heading, you can do so quickly in the
WYSIWYG editor. There are also some paragraph alignment and character formatting options. These can all
be used safely when they are being applied to specific sets of text.
Working with Tables
The HTML code necessary to create tables is a bit monstrous. It is very tedious to manipulate the many tags
that make up the average table, so I would recommend that you try using the WYSIWYG editor to create this
kind of content. If your HTML suffers, you can check out W3Schools.
Inserting Special Content (Symbols, Equations, Multimedia)
D2L has some special features built into the WYSIWYG editor that allow you to insert special forms of
content. It is possible to build this content in the HTML editor, but you are better off using the built in
features.
Support Contact: Daniel Gibson, Technology Development Coordinator (gibsondv@etsu.edu; 439-8244)
21
Exercise & Quiz Answers
Matching Content Types (from top to bottom): 3. Heading, 5. Horizontal Rule, 4. Image, 2. Paragraph, 1.
Unordered List, 6. Hyperlink
HTML Basics: 1. d 2. d 3. f 4. b 5. d
Additional Resources
W3Schools – HTML Element Reference:
http://www.w3schools.com/tags/default.asp/
D2L HTML Templates (ETSU ATS Modified):
http://www.etsu.edu/academicaffairs/elearning/ats/training/exercisefiles/d2l_templates.aspx
D2L HTML Templates (Originals):
http://www.desire2learn.com/products/accessibility/instructor-resources/HTML-templates/
22