• HTML Editor Views
• Creating Content with the HTML Editor (Design View)
• HTML Editor Icons
• Inserting Images
• Inserting Tables
• Editing Table Properties
• Inserting QuickLinks
• Inserting Audio/Video Files (Wav, Real, Windows Media, Real Video, Quicktime, AVI and Flash)

The HTML Editor in the iLearn system allows you to create HTML content from within iLearn, and it is available in most areas of iLearn that require you to input text. You can use it to create course content, post discussion messages, create articles, and many other tasks.

Accessing the HTML Editor
To open the HTML Editor, simply click the edit icon ( )above the textbox that you are entering content into. If the icon does not appear, the HTML Editor is not available for that particular textbox.

HTML Editor Views

The HTML Editor has two views: Design and HTML. You can toggle between these views by clicking the Design and HTML buttons in the bottom left of the HTML Editor page.

Design View:

The Design view of the HTML Editor allows you to easily create and format content, without any knowledge of HTML. Simply type your content and use the available icons to apply formatting to your text, insert images and tables, and create links.

If you have already composed your content as text, (not HTML) in another application (such as a word processor) you can copy and paste your content into the Design view of the HTML Editor.

HTML View:

The HTML view shows you the HTML code that is used to create your content. You will most likely only use this view if you have experience with HTML code and would like to edit the code beyond the formatting functions available in the Design view. If you have created HTML code in another application, you can also copy and paste the code into the HTML view of the HTML Editor.

Creating Content with the HTML Editor

To create/edit content with iLearn's HTML Editor:

1. Navigate to existing Topic or click Add Topic and Create New File.

2. When viewing the Topic you want to Edit click the giant "E" in the upper right corner.

When building a New Topic the HTML Editor is automatically opened when you follow Step 1. The HTML Editor displays in a new window. The Design view appears by default.

3. Type your content into the HTML Editor.

4. To format your content, select the applicable text and click the appropriate formatting button, as described in the table below.

5. To insert tables, images, links, audio/video/animation files, special characters, and equations, use the Insert buttons.

6. Click Insert once you have finished editing your content.

HTML Editor Icons

Function	7.4 Icon	8.1 Icon
Cut - Cuts the selected material and places it on the clipboard.
Copy - Copies the selected content to the clipboard and places it on the clipboard.
Paste - Pastes the content from the clipboard into the HTML editor where ever your cursor is currently located.
Undo / Redo - will Undo or Redo the last action you did in the HTML Editor.
Alignment - Aligns the selected paragraph to Left , Center, Right, or Justified.
Horizontal Rule - will place a line across the screen wherever your cursor is currently located.	N / A
Paragraph - creates a paragraph break.	N / A
Line Break - creates a line break.	N / A
Lists - Inserts a Numbered or Bulleted list.
Outdent / Indent - Moves the margin of the selected paragraph to the Left or Right.
Subscript / Superscript - will make the selected text into Superscript or Subscript.
Strikethrough - will put a line through the text that is currently selected.	N / A
Spellcheck - Checks the spelling of your content, but you must click Finish for the changes to take effect.
Font Style - Applies the selected style to the selected text.
Bold / Italic / Underline - Makes the selected text Bold, Italic or Underlined.
Foreground Color - Changes the color of the selected text.
Insert Table - Inserts a Table at the current location of your cursor.
Insert Object - Allows you to insert audio and video files, as well as flash animation at the current location of your cursor.
Insert Image / Object from LOR
Insert Image - Inserts an Image at the current location of your cursor.
Insert Quicklink - Allows you to insert a link to a course file or external website.
Insert Symbol - Allows you to insert symbols and other special characters at the current location of your cursor.
Insert Equation - Launches the Equation Editor, allowing you to insert equations at the current location of your cursor.
Design Mode - will let you switch back and forth between the two modes.
HTML Mode - will let you switch back and forth between the two modes.

Inserting Images

Inserting an Image Into Content:

1. Place your cursor where you want the Image to be inserted.

2. Click the Insert Image button ( ).

The Insert Image page displays:

Inserting an Image from a URL:

To insert an image that is stored on another website:

1. In the Insert Image page, click URL

2. Enter the URL for the location of the image in the URL field.

3. Enter a brief description of the image in the Alternate Text field. This text appears if a user hovers their mouse pointer over the image. It will also appear in your content if the image is unavailable.

4. Click Insert . The image should now appear in your content.

Inserting an Image from a Course File or from your Computer:

1. Click Course File on the Insert Image page to insert an image from your course files, or click Upload File to insert an image stored on your computer.

2. Click Browse beside the Course Image field.

3. Select the image you want to open and the location of the selected image will display in the Course Image textbox.

4. Enter a brief description of the image in the Alternate Text field. This text appears if a user hovers their mouse pointer over the image, or if the image is unavailable.

5. Click Insert.

• If you chose Upload File in Step 1, the Save As page displays. Use the Folder droplist to navigate to the course folder you want to upload your image into.
• Ensure the name of your file is correct in the File Name field.
• Click Save.

Your image appears in your HTML content, and is uploaded into your course files if you choose Upload File.

Inserting Tables

To insert a Table:

1. Place your cursor where you want the Table to appear in your content.

2. Click the Insert Table button . A grid displays below the Insert Table button.

3. Drag your mouse pointer across the grid to highlight the applicable number of Rows and Columns for your table and click the left mouse button. A Table is inserted at the cursor location with the selected number of Rows and Columns.

Editing Table Properties

After you have inserted a Table into your content you can go back up to the icon and try a few of its edit features.

Inserting QuickLinks

Adding a Quicklink to your Content:
1. Click the Insert Quicklink button . The Insert Quicklink page displays.

2. Choose the type of link you want to create from the Category droplist (ex: quiz, course content, URL)

• If you choose chat, checklist, content,discussion forums, and topics, dropbox, quizzes, or survey from the Category droplist, choose the item you want to link to from the Item droplist.
• If you choose Course file from the Category droplist, click Browse and select the applicable file in the files viewer window that appears.
• If you choose Learning Object Repository from the Category droplist, search for the applicable item in the Learning Object Repository page that displays.
• If you choose URL Link , type the applicable URL in the Link To field.

3. Type the text you want to use as the link in the Link Caption field.

4. Select whether you would like the learning object to open in the Whole Window (eliminating any frames on the page), in the Same Frame (keeping any frames, such as navbars, that may be in the current page), or in a New Window.

5. Click Insert .Your New link appears in your HTML content.

Inserting Audio/Video Files

To insert a Wav, Real, Windows Media, Real Video, Quicktime, AVI or Flash into your course by using the HTML Editor (if you want to link to a streaming video then use a QuickLink in the HTML Editor and Not the Insert Object button):

1. Click the Insert Object button . The Insert Object page displays.

2. Click the Course Object link to insert an object from your course files or Upload Object to insert an object from your computer.

3. Choose an Object Type from the top Drop Down menu.

4. Click Browse to find and select the correct file. If you would like to use a streamed file already uploaded on a different site, you can use this address in the Browse field.

5. Enter a Height and Width (in pixels) for the object. It is never a bad thing to go too big, but to go too small may cause the movie to not display correctly. We recommend 500x500 if you are not sure of what a good size is.

6. Check Show Controls if you would like to display a small toolbar with Stop and Play buttons below the object.

7. Check Auto Play to have the file start playing automatically when a user views your content.

8. Click Insert.

• If you chose Upload Object in Step 2, the Save As page appears. Use the Folder droplist to navigate to the folder you want to upload your image to.
• Ensure the name of your file is correct in the File Name field.
• Click Save.
• Somewhere on the HTML page that you are creating you will also want to make sure to put a link up to where your students can download a free movie player that matches your video file type.

Audio/Video Services Request Form
Use this form to request the following types of services:

• Classroom Tapings
• Event Tapings
• Consulting
• Dubs
• VHS Tape:5-120 min.
• VHS Tape:180 min .
• CD-ROM:blank
• DVD-R
• Mini DV
• Audio Tape