HTML Editor

 HTML Editor

The Desire2Learn HTML Editor is a powerful tool found throughout the Learning Environment that aids in the creation of formatted HTML content.

Accessing the HTML Editor | HTML Editor Tabs | Using the HTML Editor

 Accessing the HTML Editor

The HTML Editor is integrated with all tools in the Learning Environment where HTML content is created. This includes editing Discussions topics, creating custom instructions for Dropbox folders, and creating Content topics.

To access the HTML editor, do one of the following:

• Click on any applicable text field (All text fields using the HTML Editor will turn yellow when you hover the mouse over them).

• Click the Edit (pencil) icon next to a text field.

Note: Some tools in D2L will activate the HTML Editor automatically.  Such tools include the Content and Widget Management tools.  Just click on the main window of the HTML Editor and type in the box.

 HTML Editor Tabs

You can toggle between the Basic and Advanced tabs within the HTML Editor to change which tools are displayed. 

Basic Tools: Spell Check; Text Formatting (Bold, Italic, Underline); Text Alignment (Left, Center, Right, Justified); Bullets; Numbers; Insert Table; Insert Image; Insert QuickLink; Insert Object

Advanced Tools: Cut; Copy; Paste; Paste as Plain Text; Paste from Microsoft Word; Undo; Redo; Text Formatting (Bold, Italic, Underline); Text Alignment (Left, Center, Right, Justified); Bullets; Numbers; Indent; Horizontal Ruler; Subscript; Superscript; Strikethrough; Directions (left to right, right to left); Font Formatting (font, size, etc); Insert Table; Insert Image; Insert Special Character; Insert Equation; Insert Object; Insert QuickLink; Spell Check

 Using the HTML Editor

The HTML Editor contains many tools to help you create your own content for your course.  Some of the important tools included in the HTML Editor are as follows:

		Cut: Cut selected text
		Copy: Copy selected text
		Paste: Paste cut/copied text
		Paste as Plain Text: Paste cut/copied text as plain text (removes formatting)
		Paste from Microsoft Word: Paste text cut/copied from Microsoft Word (retains formatting)
		Table: Insert a customizable table
		Insert Image: Embed an image from your computer or from your course
		Equation: Insert a mathematical equation
		Insert Stuff: Embed an object, such as a video, from your computer or from your course
		QuickLink: Insert a link to a course content or to an external website
		Full Screen: Use the HTML Editor in full screen view mode
		Preview: Preview your HTML Content in a new window
		HTML Source: Edit the HTML Source code (experienced users only)

Note: You can hover your mouse over a tool icon and a description will pop up.

Make sure you remember to save your HTML Editor content by clicking the Save button at the bottom of the Editor window.

 

Using Insert Stuff feature

The insert stuff feature can be used for multiple reasons. When you click on the icon, a smaller window pops up within the current frame. With insert stuff, you are able to search files from your computer, insert mp3 files, embed videos from YouTube or Films on Demand, insert pictures from Flickr account or insert a URL.

My Computer

1. Select the My Computer icon on the left side of the screen, click the browse button next to the search bar.

2. Select the file you wish to upload and click Open.

3. Add text to go along with the link, if desired, then click the Insert button in the bottom left corner of the page.

 

Course Offering Files

1. Select the Course Offering Files on the left side of the screen.

2. Select the file you wish to upload, specify the media type, and click Next.

3. Create link text, alternative link text, and specify whether or not the item is decorative. (You also have the option to choose whether or not the audio will play automatically when the page is opened.)

4. Preview the audio, if you wish, and click Insert.

YouTube

1. Click the YouTube icon on the left side of the screen.

2. Perform a search for what it is you're looking for, click on your desired video and click next

3. Preview the video, click insert.

Flickr

Flickr is an image hosting site that you can utilize to add an image to a post via the Insert Stuff tool. To add a Flickr image, do the following:

1. Click the Flickr icon on the left side of the screen

2. Perform a search, click on your desired image, then click Next in the bottom left corner of the screen.

 

3. Add alternate text for the image and specify whether or not it is decorative.

4. When you are satisfied with the image, click insert.

 

Insert Link

1. Click the Insert Link icon on the left side of the screen.

2. Type or paste the URL desired into the text box, click next.

3. Add link text, preview if you wish, then click Insert

Enter Embed Code

You can copy the embed code of videos, pictures, audio etc. by right-clicking the item and clicking "copy embed html." To do this through the Add Stuff feature, follow these steps:

1. Click the Enter Embed Code icon on the left side of the page.

2. Paste the copied embed html into the text box. Click Next

 

3. Preview the embedded content, click Insert.