DePaul University Teaching Commons > Teaching Guides > Technology > Desire2Learn > Tools > More Tools > HTML Editor

HTML Editor

D2L's HTML editor appears whenever you create or edit new pages in the Content area, emails in the Classlist area, items in the news area, and widgets for your course home page. In addition, it appears when you add instructions to dropbox folders, quizzes, and discussion topics and forums. 

In addition to entering and formatting text, the HTML editor allows you to insert images and hyperlinks, upload files, and embed videos. (See the Panopto section for detailed instructions on embedding videos in HTML pages.)

Inserting a Link 

You can create two types of links in the HTML editor: links to websites outside of your D2L course site (called "external" links) and links to other parts of your D2L course site (called "quicklinks" in D2L's terminology or "relative" links in general web design terms.)

Insert a Link to an External Website

  1. Select the location for your link by either highlighting some text, selecting an image, or placing your cursor on the page where the link will appear.
  2. Click the Insert Quicklink icon. A pop-up window will open that displays many options.
  3. Select URL, which is the last item on the list. Options for setting up the link will be displayed.
  4. Enter the website’s address in the “URL” field.
  5. Enter the text you want displayed for the link in the "Title" field.
  6. Select New Window. This means the link will open in a new tab or window. Due to restrictions set by most browsers, your link will not work if this option is not selected.
  7. Click the Insert button. The window will close, and the link will now appear in the HTML editor's text box.

Insert a Link to an Item in your Course Site

  1. Select the location for your link by either highlighting some text, selecting an image, or placing your cursor on the page where the link will appear.
  2. Click the Insert Quicklink icon. A pop-up window that displays link options will open.
  3. Select the type of activity from the options on the list. For example,
    • If you want to link to a dropbox folder, select Dropbox, then select the folder from the list of ones that are available in your course. 
    • If you want to link to a discussion topic, select Discussions, then select a forum, then select the topic from the list of ones that are available in your course.
    • If you want to link to a news item, select News, then select the news item from the list of ones available in your course.

Inserting an Image

  1. Place your cursor where you want to the image to appear within the HTML editor's text box .
  2. Click the Insert Image button. The "Add a File" pop-up window will open.
  3. Select the image you want to insert.
    • If the image is on your computer, click the Upload button. Select the file on your computer, then click the Add button.
    • If the image is located on the web, click the URL option on the menu on the left side of the window. Enter or paste the web address for the image in the “Enter the URL of an existing file” field, then click the Add button.
  4. Enter descriptive text for your image. This text is displayed by screen reader programs to make your course site accessible to students. If the image conveys no information, select This image is decorative instead.
  5. Click OK. Your image will appear in the HTML editor's text box.

Adding Headings

D2L has pre-formatted heading and subheading styles you can use to organize content.

  1. Highlight the text you want to format.
  2. Click the dropdown arrow next to Paragraph, then select the heading style you want to apply. Your text will be changed to this heading style.
  • NOTE: Expanding the list of options displayed in the HTML editor

    If you don't see the Paragraph dropdown menu in the ribbon of options that appears across the top of the HTML editor's text box, click the icon to display all of its buttons.


Uploading Files

Follow these steps to add a link to a document in the HTML editor. You should not upload files that are larger than 25 MB.

  1. Place your cursor where you want to the link to the document to appear within the HTML editor's text box.
  2. Click the Insert Stuff icon. The
  3. Click Browse.
  4. Locate the file on your computer.
  5. Click Upload.
  6. When the file has finished uploading, enter settings for the file type you uploaded.
    • If you are uploading a Word, PDF, or other type of document, enter a title for it in the “Link Text” field.
    • If you are uploading an audio or video file, enter a title and alternate text. The alternate text will display if the student’s computer does not support embedded media.
  7. Click Refresh Preview to preview how the file will be displayed to students.
  8. Click Insert. A link to the file will now appear in your textbox.

Embedding Videos and other Content

Use these instructions to embed video hosted on an external website, such as YouTube or Ooyala. If you want have a video file that you want to add, see the Panopto guide instead of this section.

You can use this procedure to embed other content in D2L, such as Twitter feeds and calendars, as long as its site provides an embed code.

  1. Copy the video's embed code from the site on which its hosted.
  2. Click the Insert Stuff button in the HTML Editor. The Insert Stuff pop-up window will open.
  3. Click Enter Embed Code on the left side of the window.
  4. Paste the embed code you copied from the external site into the Embed Code field.
  5. Click the Next button to preview the video.
  6. Click the Insert button. The window will close, and the video will appear in your page.
  • NOTE: What is an embed code?

    Embed code is HTML code that you can add to your course site to displays content stored in an external website. The embed code will be located in different places depending on which website is hosting the content. 

​​
Teaching Commons

1 E. Jackson
Chicago, IL 60604
(312) 362-8057
dtc@depaul.edu