WebTk Editor Exercise

This page contains a series of editing exercises for the WebTk Editor. Try things out on this page as you read about them. Don't worry about harming the page! When you see underlined text, go ahead and do the action specified by the underlined text.

Viewing HTML Tags

Find the button labeled Show Html to righthand side of the control panel. Click on Show Html and WebTk displays the HTML tags that are used in this document. You cannot edit the tags directly (yet). Instead, WebTk automatically inserts or deletes tags as you edit the page. Use the Show Html button to verify the operation of WebTk. The tags get in your way during normal operation, so click on the button again to hide the HTML tags. If you edit the page with the tags showing, WebTk may remove them from the display.

Edit vs. Browse Modes

Just below the Show Html button are two buttons labeled Edit and Browse. These buttons toggle the behavior of WebTk between an editor and a regular Web browser. Click on Edit to enter edit mode; click on Browse to enter 'surfing' (read-only) mode.

Hint: If you shift-click on a hypertext link, WebTk will open a new window to view the page. This works in both Edit and Browse modes. If you click on a link in Browse mode then the same window is reused to view the new page. If you click on a link in Edit mode then you can alter the text of the hyperlink. If the insert cursor is in a hypertext link, then you can edit the link by double clicking, or with the Edit Link entry in the Html menu. Double-click on this link here.

The Style Menu

Select some text by dragging with the left mouse button. Then use the Style menu to add some attributes to the text, like strong, emphasis, or code.

Some of these styles are available in the toolbar. Find the B button near the middle of the toolbar and use that to add bold to some selected text.

You must use the Plain Text operation from the Style menu to clear styles from text. Use the Plain Text operation to clear the underlines from this paragraph.

Nodes and Paragraphs

I use the term node to refer to a heading (e.g. <h1>), a paragraph (<p>), or list item (<li>). When you hit the <Return> key, WebTk makes a new node that is the same as the current type. Put the cursor somewhere in the Nodes and Paragraphs heading and hit <Return>. Then use <BackSpace> to rejoin the two headings into one.

You change a node's type as in FrameMaker. Put the insert cursor in a node and choose a type from the Paragraph menu. Try changing this paragraph into a block quote, for example. Many of the paragraph types are also in the toolbar on the left. Block quote is abbreviated as bq.

A block quote looks like this. It is indented at both margins to offset it from the rest of the text. Some browsers additionally display it in italics.

Preformatted Text

The <pre> node is a little different. A newline is inserted when you hit <Return>. Use the End Pre operation to move your cursor to the end of the preformatted text so you can start a new type of paragraph. This operation appears in the toolbar as /pre.

Lists

Start a list by changing a paragraph into a list element. Click in this paragraph to set the insert cursor, then choose a list type from the List menu. Alternatively, just choose one of ol, ul, or dl from the toolbar. This will convert this paragraph into a list element.

If you need to convert lots of paragraphs into list elements, let me start by apologizing. You'll have to put the insert cursor in each one and then click the list type on the toolbar. Do that now on this paragraph to merge it into the list you started with the previous paragraph.

To add anew list element, press <Return> while inside an element, or at its end. Click here and hit <Return>.