WebCT Tipsheets - HTML Editor and Spellcheck

Competencies

After reading this document, you will be able to:

• Employ the HTML Editor and Spellcheck capabilities to format content

The HTML Editor

The HTML editor makes it easy to enhance the text with a variety of font sizes and colors. The editor also allows formatting of pages, such as columns, tables, and includes spellchecking capability. The HTML editor is available from Content Module, Discussions, Mail, Manage Files, Organizer Pages, Student Homepages, and Student Presentations.

Instructors may use the HTML editor from the file manager or when creating or editing Organizer and Content pages. The HTML editor is also available to instructors and students when sending email or posting to discussions. Students can access the editor from email, discussions, student homepages, and student presentations.

The HTML editor allows you to work on your content in two different ways—using the
WYSIWYG view, which displays text and graphics as they would appear in a browser, or using the HTML View, which displays the HTML code.

Accessing the HTML Editor

The HTML text editor works the same way in each WebCT tool. In each case, the editor is accessed from the text block area of each tool. Specific instruction on how to use the editor is located below in the Using the HTML Editor section.

Note Depending on the admin settings in place at your institution, the HTML editor may not be available.

Accessing the HTML editor within Manage Files

You can edit .html, .htm, and .txt files in Manage Files.

To access the HTML editor within Manage Files

1 From the Control Panel, click Manage Files. The Manage Files screen appears.

2 Under Folders and Files, click the file that you want to edit. The Edit File screen appears.

3 To edit the content and format the text using the editor, click HTML editor. The HTML editor displays.

Figure 1: The Create File View

The HTML editor allows you to work on your content in two different ways—using WYSIWYG (What You See Is What You Get) view, which displays text and graphics as they will appear in a browser, or using HTML View, which displays the HTML code. To change the view in which you're working, on the HTML editor status bar, click WYSIWYG or HTML View.

Accessing the HTML editor within other WebCT tools

The HTML editor is available within Content Module, Discussions, Mail, Manage Files, Organizer Pages, Student Homepages, and Student Presentations.

Organizer pages

The HTML editor is available when adding an Upper or Lower Textbox, or when editing a text block.

1 From any Organizer page, click Designer Options.

2 Under Options: Textblocks, choose either add upper textblock or add lower textblock. The textblock area displays.

3 Click HTML Editor.

Note The HTML editor allows you to work on your content in two different ways—using WYSIWYG view, which displays text and graphics as they will appear in a browser, or using HTML View, which displays the HTML code. To change the view in which you're working, on the HTML editor status bar, click WYSIWYG or HTML View.

Content Module

The HTML Editor is accessed when edit options are chosen while in the Designer Options view.

Mail

Enhanced font and formatting is available from when Compose New Email or Reply to Email options are chosen. Plain text email may be sent by typing in the textblock or the HTML editor may be chosen.

Student Pages and Student Presentations

The HTML editor is available when textblock options are chosen.

Using the HTML Editor

The HTML Editor Toolbar

You can enter text in the HTML editor the same way you enter text in a word processor, by simply typing. You can also copy and paste text into the HTML editor. In the WebCT HTML editor, you will do most of your formatting by using the toolbar. Most of the features pointed out in the following section will be part of this toolbar.

Figure 2: HTML Editor Toolbar

To expand or shrink the toolbar

To shrink the toolbar in the HTML editor, click the Shrink the toolbar button. To Expand the toolbar, click the Expand the toolbar button.

To Check Spelling

From the toolbar, click Spell Check . If the HTML editor finds a possible spelling error, the Check Spelling dialog box appears. Make your changes and, when the spelling check is complete, click OK.

Formatting Text

To change the text font

Select the text you want to change. From the Font Type drop-down list , select a font type. The selected text is modified.

To change the text size

Select the text you want to change. From the Font Size drop-down list , select a font size. The selected text is modified.

To change the color of text

Select the text you want to change. From the toolbar, click Font Color . The Colors dialog box appears. Under Standard Colors, click a color. The color of the text changes.

Note If you mouse over a color, the color's name and hexadecimal code appear in the dialog box's title bar.

To format paragraphs

Click the paragraph you want to change. From the Paragraph Format drop-down list , select a format. The selected paragraph is modified.

To align text with the left margin

Select the text you want to change. From the toolbar, click Align Left . The text is aligned to the left.

To center text

Select the text you want to change. From the toolbar, click Center . The text is centered.

To align text with the right margin

Select the text you want to change. From the toolbar, click Align Right . The text is aligned to the right.

To increase the left indent of an entire paragraph

Select the paragraph you want to change. From the toolbar, click Increase Indent . The indent increases.

To decrease the left indent of an entire paragraph

Select the paragraph you want to change. From the toolbar, click Decrease Indent . The indent decreases.

To Add Bullets or Numbers to a List

1 In the editing area, click where you want the list to appear, or select the item(s) you want to add bullets or numbers.

2 From the toolbar, do one of the following: to add bullets, click Bullets , to add a numbered list, click Numbered List , and to add an alphabetical lists, click Alphabetical List .

3 When you press Enter to add the next list item, the HTML editor automatically inserts the next bullet or number

4 When you want to finish the list, click Bullets , Numbered List , or Alphabetical List again.

Formatting Images, Tables, and Links

To insert an image

1 In the editing area, click where you want to insert an image.

2 From the toolbar, click Insert Image . The Insert Image dialog box appears.

3 In the Source text box, do one of the following:

If the image is saved in the main My-Files folder, enter the file name of the image. For example, to insert an image named Europe_map.gif, which is saved in the main My-Files folder, you would enter Europe_map.gif.

If the image is saved in a folder within My-Files, enter the path and file name of the image. For example, to insert an image named Asia_map.gif, which is saved in a folder named Maps in the main My-Files folder, you would enter Maps/Asia_map.gif.

If the image is on a different web site, enter the full address of the web site, the path, and the file name of the image.

4 In the ALT-String text box, enter a short description of the image. This text displays in a browser when you mouse over the image.

5 In the Border Width text box, enter the width of the border in pixels.

6 In the Size text boxes, enter the width and height of the image in pixels, and click OK. The image is inserted.

To insert a table

1 In the editing area, click where you want to insert a table.

2 From the toolbar, click Insert Table . The Table Properties dialog box appears.

3 Select the desired number of rows and columns; the table, row, column, cell, and color properties, and click OK. The table is inserted.

To add a row to a table

1 In the table, click in a cell above or below where you want to insert the row.

2 From the toolbar, click Insert Row . The Insert Row dialog box appears.

3 Select the position in which you want to insert the row and click Insert Row. The row is inserted.

To add a column to a table

1 In the table, click in a cell to the left or right of where you want to insert the column.

2 From the toolbar, click Insert Column . The Insert Column dialog box appears.

3 Select the position in which you want to insert the column and click Insert Column. The column is inserted.

To insert a hyperlink

1 Select the text or image you want to represent the hyperlink. You can create a link from text or an image to another document or web site.

2 From the toolbar, click Insert Hyperlink . The Insert Hyperlink dialog box appears.

3 In the Href text box, do one of the following:

If you want to insert a link to an HTML document saved in the main My-Files folder, delete http:// and enter the file name of the document. For example, to insert a link to a document named European_history.html, saved in the main My-Files folder, you would enter European_history.html.

If you want to insert a link to an HTML document saved in a folder within the main My-Files folder, delete http:// and enter the path and file name of the document. For example, to insert a link to an HTML document named Asian_history.html, which is saved in a folder named History in the main My-Files folder, you would enter History/Asian_history.html.

If you want to insert a link to a web site, enter the full address of the web site, including the protocol http:// or https://.

4 To the right of the Target text box, click and select the location in which the link should appear.

5 Click OK. The hyperlink is inserted.