Welcome to the help page for the SunLabs HTML editor. If you must start right away, shift-click on exercises. A shift-click on a link opens a new window on the target page. You can read the rest of this while trying the exercises.
You can use the editor as a simple browser. Note the Edit/Browse mode buttons in the upper right part of the interface. Chosing Browse leaves the page read-only. Next to these buttons is a text entry labeled URL. Enter a URL here and press <Return> to view it. Or, follow hyperlinks by left-clicking on them. You can display the page in a new window by using shift-click. Shift-click works even in Edit Mode.
You will need to qualify file names with a leading file: in the URL entry, or use the Open operation under the File menu. Once you have established a base URL you can enter relative names in the URL entry.
To follow http: links you may need to tweak the Proxy setting under Preferences. If you clear the proxy host, then the browser tries to contact the http host directly.
This is a new program, so there are surely bugs. The editor makes a
backup copy of the page you are working (e.g., foo.bak
)
on the first time you Save your work. While there should never be a
core dump, you might drive the editor into a funky state. Every so
often, check the HTML by using the Show HTML check button. (Even
in this mode you cannot edit the tags directly :-) It could be possible
to clutter the page with some extra HTML markup. If things get so bad
you need to use a text editor to rescue things, please take the time
to send me a copy of the damaged page and some description of what
you think lead to the problem. Repeatable test cases are ideal.
There is a mostly-working multi-level undo. Keep pressing <Control-u> to get the editor to unwind what it has done. This is not always perfect, and you might need to press <Control-u> more than you expect. Be warned that the Refresh operation clears the undo log.
Below the menus are a set of buttons that represent HTML tags. If you do not know what these are, use the menus at first to learn them. Not all tags are in the toolbar. The Toolbar... menu item under Preferences brings up an editor that lets you customize the toolbar.
You can cut and paste within the editor and between the editor and raw HTML documents. Make a selection with the left mouse button (buton-1), and paste it using the middle mouse button (button-2). The Cut, Copy, and Paste keys also work. If you make a selection in the editor and paste it into another application, you get raw HTML markup. If you select raw HTML from some other document and you paste it into the editor, the HTML is rendered for you. You can copy between pages if you have multiple pages displayed. Shift-click on a link to have it displayed in a new window.
You create links and anchors with operations under the Html
menu, or with the a
toolbar button. The user interface
is still quite simple. Select a range of text with the first mouse
button and then select the menu operation. You are prompted for the
link URL and/or the anchor name.
You can edit a link or anchor by double-clicking, or with the Edit Link operation in the Html menu. Anchors are identified by a different color so you can find them.
An HTML hyperlink has two main attributes: HREF and NAME. The HREF is a URL like http://www.sun.com/. You create links to other locations by filling in the HREF with the destination URL.
An anchor is a point within a page that can be the target of a link.
You can have links from a table of contents, for example, into the
sections of a longer page. To create an anchor point, fill in the
NAME field. To reference an anchor point, use the #name
syntax in the URL. This page is a good example. The contents
at the top has links to the section headings. Go into Edit mode and
double click on the links to see how they fit together. T
The link editor has a set of Browse choices. If you select Anchor names you'll see a list of the anchors defined in the page. You can also browse the history list and the file system.
I use the term node to refer to a heading (e.g. <h1>
),
a paragraph (<p>
), or list item (<li>
).
There are several editting operations that operate on nodes and may
affect their type.
<ul>
you can change
it to a numbered list <ol>
by chosing that list
type from the List menu or the Toolbar.
<p>
tag before a paragraph.
You can add strong, emphasis, underline,
code
, and other looks to text with operations in the Style
menu. These common styles are available in the Toolbar as B, I, code
,
and U
buttons.
The only way to remove styles is with the Plain Text operation under the Style menu. Unlike many other editors, the style operations do not behave in a toggle fashion.
There is a bolditalic macro under the Macro menu that gives you a bold-italic look in one step.
You create a list by changing the type of an existing node, typically
a paragraph node. This changes the <p>
tag to an
<li>
tag and wraps up the new list element with
open and close tags for the list. Once you have a list going you can
add new items in two ways. First, you can just press <Return>
to end the current list item and start a new list item.
If you want a <p>
tag in the middle of your list
for some space, use <Control-Return>. This action ends the current
list item and inserts a <p>
tag. There are also
operations under List to add/remove the list bullet. This
changes between an <li>
and a <p>
tag.
You can nest lists. To start a sub-list, press <Tab> with the insert cursor in a list item. This starts a new sublist that contains the current list element. If you press <Shift-Tab> in a list, the list element is made part of the outer list. Think if this as indenting and outdenting list elements by using <Tab> and <Shift-Tab>, respectively. There are also operations under List to indent and outdent a list item.
Terminate a list with the End List operation in the List
menu. This moves the insert cursor out of the list and starts a new
<p>
node. Alternatively, you can type <Shift-Tab>
Start a form by selecting New Form... from the Form menu. There are three ways to start a form from the dialog:
<form>
tag around the current selection.
Make a selection before selecting New Form..., then select
Custom from the dialog.
<form>
tag around the whole page. Clear
any selection (just click somewhere) before selecting New Form...,
then select Custom from the dialog.
After starting your form, you are asked to fill in the attributes for the form tag. The ACTION field is the URL of the CGI script. The METHOD is either POST or GET, which affects how the script gets its input data.
Once you start your form you can add new form elements with the Add Form Item cascade menu. Hint - tear off this menu by selecting the first dotted-line entry at the top. This'll give you a crude "pallet" of form elements. You can also cut and paste form elements.
Click on a form element to modify its attributes. In general, you will need to set the NAME of each element so your CGI script knows where values come from. If you click on a Submit button, you can do a test submission to see what values will be posted by your form. This is all in edit mode, of course. In browse mode the form works as in a browser.
This editor and the HTML display library are written entirely in Tcl and Tk. This makes it extensible in some interesting ways. For example, see tags.tcl for the definition of a new HTML tag for selecting different colors, so you can include green, white, orange, or any color you like in your documents. We also have prototyped client-side form validation and the ability to download extensions into Safe Tcl interpreters.
The Macro menu lets you define and insert custom lumps of HTML markup.
The Preferences Toolbar... operation lets you customize the Toolbar. The edit toolbar can be programmed to:
webtk.tcl
file.
On UNIX this file is named ~/.webtk.tcl
.
On Windows and Macintosh this is webtk.tcl
in the user
folder of the webtk distribution.
Under HTML, the Link Validate/Chart operation computes a new page that summarizes the links on a family of pages. This works recursively, so you can start at your home page, for example, and verify what it references. Links off the server or to points higher in the URL hierarchy are NOT followed, so the process will terminate :-) You can aim this at any point in the web - it doesn't have to be a local page.
You can download images and other pages. First, make a selection that includes the images or links you are interested in. Then select the Image Download or URL Download operations under the Edit menu. These put the results into directories that you can define.