HTML Editor: Basic

The HTML Editor can be accessed from several tools that allow instructors and students to insert more than a single line of text. Follow the instructions below to use the HTML Editor to achieve specific outcomes.

For a general overview of the HTML Editor's functions, see HTML Editor: Overview.

HTML is used to create webpages that can include text, graphics, video, audio, or special characters such as mathematical symbols. (See HTML Cheat Sheet for more HTML information.) If you aren't familiar with HTML, use the Design Mode of the HTML Editor to create and format content. In this mode, you can simply type your content and use built-in tools to format your text, insert images and lists, and create links. Use the buttons at the lower left of the HTML Editor window to change between Design Mode and HTML Mode.

Create Text

Most HTML documents include at least some text, if only to introduce graphics or other content that follows.

1. Open the HTML Editor by clicking HTML Editor.

HTML Editor

2. Type text in the window. Be sure to create line breaks between headings, paragraphs, and lists by pressing "return/enter" at the end of each line. For best results, type all text into the document and then apply any needed formatting.

To ensure text is properly displayed, remove any formatting before copying and pasting text from a word processing document into the HTML Editor. You can later reapply any formatting within the HTML Editor. See Removing Formatting from Word-Processing Documents for information.

3. If you would like to format your text or insert graphics or link, see instructions for those options below.

4. When done, click Insert.

Format Text

Formatting within the HTML editor is similar to formatting within a word processor. Formatting options include headings and lists, as well as words that are bold, italicized, or differently colored. You can also change the font and font size.

To format text:

1. Highlight the text to be formatted in the HTML Editor window.

Some HTML formatting applies to an entire paragraph (headings, lists, etc), while other formatting should apply only to a few words (bold, italic, new color). Because of inconsistencies in the HTML Editor's behavior across different browsers, we recommend that you select the entire word or paragraph to which the formatting should apply before clicking the format button.

2. Click the formatting tool icon in the HTML Editor toolbar. (See the Toolbar Legend for a list of formatting tools and their icons.)

Insert a QuickLink

Quicklink allows you easily create links to other web resources. You can insert a Quicklink to another part of your course or to another website.

Use Quicklinks to link to files stored in other systems, such as Library resources, Media Manager files, and streaming media. See Working with Other Media Sources for information about these content options.

To insert a QuickLink to another part of your course:

1. Open the HTML Editor by clicking HTML Editor.

2. Click QuickLink.

3. Under Category, choose the course tool you wish to link to.

4. Choose an Item. (This menu will change to reflect the Category selected.)

5. Enter a Link Caption to use as the linked text. To a course participant, this text will appear in color and underlined to represent the link.

6. Select whether this item (quiz, content item, etc.) will appear within the current window without the Carmen frame around it, within the Carmen frame, or in a new window.

To insert a QuickLink to another website:

1. Open the HTML Editor by clicking HTML Editor.

2. Click QuickLink.

3. Under Category, choose URL Link.

4. For Link to, enter the web address of the link here. You can use copy-and-paste, or type the actual address.

5. Enter a Link Caption to use as the linked text. To a course participant, this text will appear in color and underlined to represent the link.

6. Select whether this website will appear within the current window without the Carmen frame around it, within the Carmen frame, or in a new window.

Insert an Image

Insert an image that has already been uploaded to your course, or insert one that is saved on your computer.

1. Position your cursor in the HTML Editor window where you want the image to appear.

Although images may be inserted on the same line as text, we recommend placing images on a separate line. This allows the image to be altered without affecting the surrounding text.

2. Click Insert Image.

3. To use an image already uploaded to the course, click Course Image. To use an image saved on your computer, click Upload Image. Navigate to the desired image.

4. Type a brief description of the image in the Alternate Text box.

Alternative Text will appear when a student hovers a mouse pointer over the image and will appear in your content if the image is unavailable. It also allows visually-impaired users with special software to hear your description of the image.

5. Click Insert to return to HTML Editor.

After an image has been inserted, it can be resized, moved, or positioned to the left, right, or center.

To change size of an image:

1. Click on the image to select it. Eight white square 'handles' will appear on the edges of the image – one at each corner and one in the middle of each of the four sides.

2. There are two ways to resize an image with the handles:

To resize the image while maintaining its proportions, click and drag one of the four handles on the corners.
To resize and reshape the image, click and drag one of the handles in the middle of a side. For instance, dragging the middle top or bottom handle will resize only the height of the image.

To move or position an image:

1. Click on the image to select it. Eight white square 'handles' will appear on the edges of the image to show the image is selected. DO NOT drag the handles or you will resize the image rather than move it.

2. There are two options for repositioning an image:

To move the image within the page, click and hold in the center of the image (not on the handles!) and drag the image to its new location.
To position the image to the left, right, or center, click the paragraph justification buttons in the toolbar.

If any text is on the same line as the image, the text will move with the image to its new justification. If there is a caption for the image, it makes sense to shift the caption to match the justification of the image.

Insert a Symbol

The HTML Editor includes a tool to insert a symbol from a set of pre-defined characters, including Greek letters and mathematical symbols.

To insert a symbol:

1. Place the cursor where the symbol is to be inserted.

2. Click Insert Symbol.

3. Choose a symbol to insert

After a symbol is inserted, you can resize and reposition it like any other image. However, symbols are low-resolution images that will look "pixilated" if enlarged too far.