The HTML Editor

WebCT 4.1 contains a feature that was not in previous versions, an HTML Editor. This is a What You See Is What You Get (WYSIWYG) Hypertext Markup Language (HTML) editor that allows you to create and publish content on the Web without having to know HTML.

The HTML editor provides word-processor-like features that display text and graphics the same as they will appear in a browser. The HTML editor is available from Content Module, Discussions, Mail, Manage Files, Organizer Pages, Student Homepages, and Student Presentations. The HTML editor is generally accessed from an HTML editor box at the lower left corner of the screen. (Note: The HTML editor is available to students in Discussions, Mail, Student Homepages, and Student Presentations tools.)

About the different views in HTML editor

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. In the WYSIWYG view, the screen will look as it does below. (The tool symbols are explained in the next few pages.)

Top of Page

Showing all paragraph marks

You can show or hide paragraph marks and other formatting marks. Showing paragraph marks help you see where each paragraph ends. To show all paragraph marks, click Show All . The paragraph marks and other formatting marks show.

Top of Page

Entering Text

You can enter text in the HTML editor the same way you enter text in a word processor.

1. In the tool, click HTML editor. The HTML editor appears.
2. In the editing area, enter your text.

Top of Page

Formatting Text

The WYSIWYG editor works like a standard word processor, and allows you to make many formatting changes. The functions and symbols follow:

Property	Symbol
Font Size	Use the Font Size drop-down list
Font Color
Bold
Italics
Underline	Not recommended for Web documents as underline usually indicates a hyperlink
Align Left
Center
Align Right
Increase Indent
Decrease Indent
Bullets
Numbered List
Alphabetical List
Cut (text or images)
Copy (text or images)
Paste (text or images)

Top of Page

Inserting Text from Another Source

You can insert text from another source into the editing area.

1. Copy the text from the other source.
2. In the editing area, click where you want the content to appear.
3. From the toolbar, click Insert Text . The Paste Text from Clipboard dialog box appears.
4. Paste the text into the dialog box by pressing CTRL+V.
5. Do one of the following:
   • If the text is in plain text format, select Plain Text.
   • If the text is in HTML format, select HTML.
6. Click Ok. The text is inserted.

Top of Page

Inserting a Symbol

1. In the editing area, click where you want to insert a symbol.
2. From the toolbar, click Insert Symbol . The Insert Symbol dialog box appears.
3. Click the symbol you want to insert. The symbol appears in the Insert box.
4. Click Insert. The symbol is inserted.
5. To close the Insert Symbol dialog box, click Close.

Top of Page

Inserting 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. (This is an accessibility requirement.)
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.

Top of Page

Inserting a Horizontal Line

1. In the editing area, click where you want to insert a horizontal line.
2. From the toolbar, click Insert Horizontal Line . A horizontal line is inserted.

Top of Page

Inserting 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.

Inserting the default table

The HTML editor's default table has four columns and three rows.

1. In the editing area, click where you want to insert the default table.
2. From the toolbar, click Insert Default Table . The table is inserted.

Adding 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.

Adding 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.

Top of Page

Inserting a Hyperlink

You can create a link from text or an image to another document or web site.

1. Select the text or image you want to represent the hyperlink.
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://.
  • Enter the file name of the document. For example, to insert a link to an HTML document named European_history.html, which is 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://.
  • 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.

Top of Page

Inserting an HTML Page

You can insert an external HTML page.

1. In the editing area, click where you want to insert the HTML file.
2. From the toolbar, click Insert HTML . The Insert HTML file at current position dialog box appears.
3. In the URL text box, following http://, enter the full address of the web site, the path, and the file name of the page.
4. Click Ok. The page is inserted.

Top of Page

Checking Spelling

1. From the toolbar, click Spelling Check . If the HTML editor finds a possible spelling error, the Check Spelling dialog box appears.
2. Make your changes.
3. When the spelling check is complete, click Ok.

Top of Page

Using the HTML editor on a Macintosh

If you are working on a Macintosh, before you exit the HTML editor, make sure you save your changes by clicking Save . If you exit the HTML editor without saving, any changes you made in the HTML editor will disappear.

Top of Page