Making a Web Page in D2L
D2L allows you to create and edit web pages. For example, if you created a web page in
SeaMonkey for use in D2L, you can edit it right in D2L. Or you can create the webpage in D2L.
1. First, open the D2L site where you wish to add a web page. Then, click on the Content
button. From there, select “New Topic” and then “Create New File.”
2. There are four steps here as you set up your web page.
a. Choose the module where your web page will be available to students. This step
b. Give your page a title that students will understand. This step is mandatory.
c. Under File Name, the program will automatically name your file what you named
it in the title. However, for faster loading, you can remove the spaces in the title
or name it “Quiz3.” This step is optional.
d. Under “Choose destination,” you can decide where your page resides in the file
manager. You might wish to create a folder, for example, called “Module_1” and
put everything associated with module 1 in that folder. Therefore, in this step, you
can store this page in that Module_1 folder. This step is optional.
Finally, click the “Save” button at the bottom. Perform this step often to save your work.
3. Now that your web page is set up, you are ready to create the page. On your canvas,
select “Advanced” and at the bottom of the workspace, click on the toggle that allows
you to work “full screen.” NOTE: To save your work, you will need to hit the toggle
again and click on “Save.”
4. Now, let’s create a web page with colored text, links, an image, a YouTube video, an
embedded object, and a Quicklink to a D2L object. First, click in the workspace. Then,
type a sentence. Highlight your sentence. You can change the format of the text by
clicking on “Format.” The default is paragraph, and that setting is best for body test. If
you have created a heading for your web page, you may wish to choose “Header 1,”
which is a larger, bolded look appropriate for a header. Next, you can choose a font.
Remember that all browsers can show three fonts: Times New Roman, Arial, and
Courier. Other than that, there are no guarantees as to what a student’s computer will
display with regard to font. If you choose “Holly Hobby” font, students will likely only
see Arial. So don’t spend a lot of time picking out fancy fonts to decorate your web
pages. If you need to show a specific font—say you want to show students what Zephyr
font looks like—then you should perform a screen capture of that font and add the
example as an image to make sure students see it the way you intend.
You can also choose font size. A good rule
is to choose 14 for titles and 12 for body
text. D2L will make your web site font look
extremely small as you create it.
5. To change the font color, click on the arrow beside the T with two lines under it. A range
of color choices will appear.
6. Now that your title is arranged, begin creating the learning object. The first thing to do is
to add some content. If you wish to add text, then use the “Paste from Word” tool. If you
wish to upload a pdf, video, or audio file, or add an embed code, then use the “Insert
7. Let’s start with pasting from Word. When you click on the “Paste from Word” button, a
window opens on your screen. What it is asking you to do is go to the Word document
that you want to paste from, open it, highlight with your mouse the text you want to copy,
and use Control+C (on a pc) or Command+C (on a Mac) to copy that text. Select
Control+A (on a pc) or Command+A (on a Mac) to copy the entire text. Next, return to
the D2L page and the open window and click in the window. Select Control+V (on a pc)
or Command+V (on a Mac) to paste the text. D2L will now optimize the text for you.
You are advised to use the Hot Keys instead of the right mouse click because D2L does
not always allow you to copy and paste with the right mouse click. This action can only
copy text. Images must be added separately. Take a look at your text. You may need to
change each line back to “Paragraph” and “Times New Roman” and “12 Point” or
whatever your preferences are to make each line look the same.
8. To add an image, click on “Insert an Image.”
9. To upload an image from your computer, click on “My Computer” and then “Browse”
(for PC) or “Choose File” (for Mac) and find the file on your computer. You can also
select “Choose destination” to store this file in a specific folder, such as a “Module_1”
folder in your D2L files. Then, click on “Upload.”
10. You will be prompted to provide alternate text about this image for your visually
Click “okay” and you will see your image on the page. You can resize it and move it just
as you would in MS Word (by dragging it and dropping it where you want it to move it,
or clicking on it and dragging the white square “handles” in and out to resize it).
11. To upload a document, such as a pdf, or anything you want to upload from your computer
(an audio file, a video file, etc), click in “Insert Stuff” (as shown in number 6) and then
“My Computer.” Next, click on “Browse” (for PC) or “Choose File” (for Mac) and find
the file you want to add. When you have found it, you can also click on “Choose
destination” to add the file to a specific folder in you D2L files, such as “Module_1.”
When you are finished, click on “Upload.”
In the box beside “Title,” provide the information students need to know what this
document is for. If you have already told them to “Read the article on land mines,” then
you might put “Article on Landmines” in the title box. If you haven’t told students
anything, then you might put, “Read this article on landmines.” When you have titled
your item, click on “Insert.”
You will see a link in your web page that links to your document.
12. To link something that is already in your D2L files, you can use the “Insert Stuff” and
“Course Offering Files.” You can link Hot Potatoes exercises in this way.
Go to “Insert Stuff” and choose “Course Offering Files.” There, you will be shown all
your course offering files. If you have stored items in specific folders, you will see those
folders listed. You can open a folder by clicking on it. When you have found the file you
want to add, click on the radio button (the circle) beside it and then choose “Next.” At
that point, you will be prompted to add a title to a document and a title and alternate text
to a multimedia file. The example below shows a podcast being added from the Course
On Mac, there is also an option to size it. If you leave it blank it will automatically go to
13. To link a YouTube video, click on “Insert Stuff” and “YouTube Video.” Then, put
whatever it is you want to insert into the search bar. If you know the name of the video,
type that into the search bar. If you simply know that you are looking for a video on using
wikis, put that information into the search bar. Click on “Search,” and D2L will search
YouTube for you.
Click on the video you want (it will then highlight itself in blue), and then choose “Next.”
Then click “Insert” on the next page.
IMPORTANT: You may get a warning from your computer that it cannot show all the
content. IGNORE IT until you have finished loading the YouTube video and then toggled
back to the normal view and saved your content. Remember to save often.
14. To insert a link from the Internet, click on “Insert Stuff” and “Insert Link.” Then, paste or
type the link’s URL/web address into the box provided and click “Next.”
You will be asked to provide a title for the link. Again, think about your students as your
primary audience. Do they need to be told, “Click here to access the KSU Home Page”?
Click on “Insert,” and your link will be pasted in the web page for you. If it is not pasted
in the right place, you can highlight the text, copy it, and paste it somewhere else. The
text will retain the link.
15. Embed codes are html codes that make videos and programs look like, well, videos and
programs instead of just links. Why might you want an embed code? Well, YouTube
videos look more interesting when pasted as embed codes instead of links, but D2L
already does that for you with its “Insert Stuff>YouTube” tool. Panopto videos can be
pasted with embed codes, but students lose the ability to look at the slides and take notes.
VoiceThread applications can be pasted with embed codes, but you have to remember to
change the size by +200 for height and width twice so that the VoiceThread is user
friendly. So embed codes are not always the best way to handle linking something.
A good example of a time to always use an embed code is with a program called
“Micropoll.” It’s a free way to poll your students. You can access Micropoll at
http://www.micropoll.com. Once you have created your poll, you will be presented with
two ways to share it: by link or by embed code. Click on the embed code and copy it.
Then, in the D2L web page, click on “Insert Stuff” and “Embed Code.” Paste your embed
code in the box provided, and click “Next.” Note that embed codes are four or five times
longer than web page links.
On the next page, D2L will try to confirm your choice, but it might look like gibberish.
Just click on “Insert.”
Your embed code insertion might not show up in the editing panel. You may have to
click on “Content” and open the web page from there to see everything.
To get back to the editing screen after checking to make sure your embed code worked,
click on “Content,” find your webpage, and click on the pencil next to it.
16. An advantage of creating your module content in this fashion rather than in SoftChalk is
that you can link quizzes, assignments, and discussion boards that will automatically
populate the D2L gradebook. To link a D2L item, click on “Insert Quicklink.” It is right
beside the “Insert Stuff” button.
17. You will be asked to choose a category.
After you have chosen the item that you
wish to insert, you will be presented with a
list of files in that category.
18. Choose the item you wish to insert.
Provide the link caption. Tell students what it is, and if necessary, what to do with it.
You can choose to have the item open in the whole window, the same frame, or a new
window. When you are finished, click “Insert.”
Your link will appear in your web page. It will be linked to the D2L gradebook if you
have linked the assignment/quiz/discussion board that you chose.
19. You can add anything to your web page, if you know html. One easy thing to do is to
change the background color of your web page. There are five steps to complete this task.
a. You need the code.
You want what is called a hex code. A hex code is a six digit code that html reads
as a color.
For example: light blue is #ADDFFF
Goldenrod is #EDDA74
Wheat is #F5DEB3
The above three are popular background colors because they are easy to read
black text through. Always think about readability when you pick fonts and
colors. You can Google “hex code” to find pages that list hex codes. Several good
b. You need the rest of the code. To change the background color, you put your
chosen code into the background code. Here is the background code
As you might be able to see, there is already a hex code in this code. It’s a light
yellow. If you want to see that color or how it looks with black text, or colors that
would look good on the page with it, you can go here:
http://www.colorhexa.com/ffff99 and view a full report.
ffff99 is a light yellow.
c. Now, you need to swap the code that is there (light yellow) for your chosen code
(let’s go with light blue unless you want to use something else).
We are going to change light yellow: <body bgcolor="#ffff99">
To light blue: <body bgcolor="#ADDFFF">
d. At the bottom of your web page in D2L, to the far left of the “toggle full screen”
icon, is an html icon
Click on it to see the code in your web page.
Six lines down into the code, you will see a line that says “<body>.”
For many web pages today, the default background color is white. In D2L, that
situation holds true. There is no code because the default color is white. You will
replace the code “<body>” with
So the page will look like this:
When you are finished, click on “Update” at the bottom of the page.
You won’t see any change. The next step is VERY IMPORTANT.
e. Back at the bottom of your screen, click on the “Toggle” button to get back to the
smaller screen where your “Save” button is. If you are prompted to “Show all
content,” ignore the prompt.
Now, click on “Save.”
Go to the “Content” button at the top, and click on it. Now, peruse the contents to find
your web page.
Only at this point should you tell your browser to “Show all content.” If you do it before,
it will reload before saving, and your work will be lost.
You should be able to see your full web page at this point.
Final note: To edit your web page, click on the pencil beside it in the content page.
This tutorial created by Dr. Tamara Powell, March 2013.
Edited by Tiffani Reardon, March 2013.