# ASHE (A Simple HTML Editor)

ASHE was designed and implemented by:

John R. Punin
puninj@cs.rpi.edu
(518) 276-4849

ASHE was supervised by:

Mukkai Krishnamoorthy
moorthy@cs.rpi.edu
(518) 276-6911

© 1994 Copyright by

Rensselaer Polytechnic Institute
Department of Computer Science
Troy, New York 12180

- Introduction
- User Manual
  - Starting ASHE
  - Writing a simple HTML Document
    - Title
    - Header
    - Paragraph
  - Format of HTML Document
  - The File Window
  - Edit Menu
  - Hyperlinks and References in HTML
  - Images
  - Preformatted Text
  - Basic Styles
  - Lists
  - Characters
  - HTML Forms Menu
    - Form Definition
    - Input field
    - Select field
    - Options in a select field
    - Text area field
  - Additional Features
    - Local Navigation
    - Mark Tags
    - Clear
    - Print
- Key Bindings
  - Normal Command Keys
  - Menus Keys
- Numerical Character References
- Additional Information

## Introduction

This document is a description of a HTML (HyperText Markup Language) Editor (ASHE). HTML is the markup language used in the World Wide Web project and the NCSA Mosaic networked information browser. This editor does not cover HTML entirely but this tool will help you to create full HTML documents in no time.

The name of this editor is ASHE (A Simple HTML Editor) and it is written in C and Motif OSF Windows. The visual interface is based on the XMosaic Visual interface since the purpose of this editor is to write HTML documents that can be browsed by Mosaic.

Up: ASHE Menu

## User Manual

## Starting ASHE

Start the program up by typing xhtml. After a short delay, a window will appear with the title HTML Editor

The main window has the following sections :

- Menu Bar with the main options
- User Message Area
- Title of the HTML Document
- Text Area with scroll bars
- HTML Browser Area
- Name of the File
- PushButtons area with most frequent commands

To start writing your document you have to focus on the text window. To use the menus you click in the Labels of the Menu Bar. All menus are pull down and you can choose any of the items of the menus by just clicking in one of them.

Up: ASHE Menu

## Writing a simple HTML Document

If you want to write a very simple HTML Document you should know how to use these three commands: Title, Header and Paragraph. These commands are under the Menu HTML and also are implemented as Push Buttons in the bottom of the main window. If you would rather use the keyboard than the mouse, refer to the Key Bindings where you can find the control keys to execute these commands.

Here is an example of a simple document :

    <TITLE>My First HTML Document</TITLE>

    <H1>This is a big Header</H1>
    This is a short paragraph I do not like
    to write too much<P>

All HTML documents must have a title. In general HTML use tags to indicate formatting or structural information. A tag is simply a left angle bracket ( < ) followed by a directive and zero or more parameters followed by a right angle bracket ( > ).

Up: ASHE Menu

### Title

`<title>`. . .`</title>`

When you execute the Title option from the HTML menu, a Dialog window pops up asking you for the title. If you already have a title in your document, this is replaced, otherwise the title is inserted at the begining of the document and appears in the title bar. You can also select with the mouse a section of your document and this will be your new title.

Up: ASHE Menu

### Header

`<h1>`. . . `</h1>`Most prominent header

The Header option pops up a Dialog Window that lets you select between 6 sizes of the headers where 1 is the biggest and the default in the window. If you had selected a line of text prior to selecting the Header option then a begin header tag appears to the immediate left of the selected text and the end header tag appears to the immediate right of the selected text. If no text was selected then the header tags appear about the cursor in the document edit window.

Up: ASHE Menu

### Paragraph

This option simply inserts the tag <P> at the current cursor position in the document. This denotes an end of paragraph. HTML ignores whitespace.

Up: ASHE Menu

## Format of HTML Documents

An HTML document is composed of a single element:

  `<html>`. . .`</html>`

that is, in turn, composed of head and body elements:

  `<head>`. . .`</head>`

and

  `<body>`. . .`</body>`

To allow older HTML documents to remain readable, `<html>`, `<head>`, and `<body>` are actually optional within HTML documents.

Here is an example of a simple document :

    <HTML>
    <HEAD>
    <TITLE>My First HTML Document</TITLE>
    </HEAD>
    <BODY>
    <H1>This is a big Header</H1>
    This is a short paragraph I do not like
    to write too much<P>
    </BODY>
    </HTML>

The HTML, HEAD and BODY tags can be inserted by typing them in or by selecting the menu option from the Document submenu under the HTML menu.

Up: ASHE Menu

## The File Window

The File window pops up when you select the Open, Save as or Insert options under the File menu.

This window has the following sections:

- Filter
  This is used to show the current directory. You can move to another directory, just enter the new directory path in the Filter window and push the Filter button. You can use *.html as a mask of all HTML files in the directory.
- Directories
  Shows the Directories under the current Directory. Clicking on a directory enters the directory.
- Files
  Shows the files in your current directory. If you select one of these files the name appears in the Selection text entry dialog.
- Selection
  Here you can enter the name of your file.
- Open, Save or Insert
  When you press this button the file is opened, saved or inserted in the text window. Once a file is opened the name of the file is shown in the File window at the bottom of the main window.

There is a limitation to the size of an open a file. In practice this is not a problem because the purpose of HTML is to link several documents with hyperlinks. Therefore short documents can be read more quickly and effectively than large documents.

Up: ASHE Menu

## Edit Menu

ASHE uses many of the key bindings of emacs.

In the Edit menu you will find the Cut, Copy, Paste and Delete options. These options can be used when you select a text. A typical action for selecting text using the mouse is the click-drag technique. When text is selected, it is rendered in reverse video. Now the Cut and Copy options can be used for the user. Once one of the options is executed, with the Paste option you can move or copy the selected text. The Delete option clears the selected text.

Up: ASHE Menu

## Hyperlinks and References in HTML

This options permits you to create hyperlinks and references in your document. The whole point of HTML is to allow networked hypertext. The tag used for HTML is A which stands for Anchor. The format is the following :

- Start with the directive <A
- The parameter HREF=``document.html''
- If the document has a reference the parameter is: HREF=``document.html#reference''
- If the reference is in the same file you can omit the name of the file. Thus HREF=``#reference''.
- Close the bracket >
- Text that should show up as the hypertext link
- End by giving the ending tag </A>

This is made simple by ASHE. Following these steps.

- Select with the mouse the text that is going to be the hypertext link
- Click on the Hyperlink option under the HTML menu or use the Link push button. A Hyperlink Dialog Window will appear.
- Enter the destination file and/or the destination label inside the file. If no file is entered the HTML assumes that the label is inside the current doument. If no label is specified the HTML assumes that the destination is the top of the specified file. Either the file or the label must be provided.
- Once the Ok button is pressed, the link is automatically created for the selected text.
- Use the command undo, if something is wrong in the hyperlink.

If the file that you want to access is in different host domain, you should use URL as the name of the file.

The structure of a Universal Resource Location (URL) is similar to:

    		ResourceType://host.domain:port/pathname

where the possible resource types include: file, http, ftp, news, gopher, telnet and wais, and the colon followed by the TCP port number is optional.

To create a reference in your document, just select the reference option and a Dialog window asks for the name that you want to give to the reference. The reference is set under this format

    		<A NAME="name_of_reference">selected text</A>

Up: ASHE Menu

## Images

Images are supported by NCSA Mosaic and Mosaic Netscape so ASHE can help you insert images anywhere in your document.

Move your cursor where you want the image to be inserted. Select the Image option under the HTML menu and a Dialog window will ask you for the complete name of your image file. Make sure that this image is in X bitmap or GIF format. You can also select the position of the image relative to the text, top, middle or bottom. And, if the image is ismap or not

This is the tag that will be inserted in your document.

    		<IMG ALIGN="TOP" SRC="image_name.gif">

Up: ASHE Menu

## Preformatted Text

This option puts whole sections of text in a fixed-width font and also causes blank spaces to be significant.

Select the text that you want to show in Mosaic in the same way as you see in ASHE. Click in the option Preformat under the HTML menu and a Message window with the selected text that you want to show preformatted. The tags <PRE> and </PRE> are inserted at the extremes of the selected text.

Up: ASHE Menu

## Basic Styles

The Styles menu is used to change characteristic of the fonts on XMosaic. These are:

- Emphasis
  Emphasis in the selected text.
- Strong
  Stronger emphasis in the selected text.
- Code
  Put the selected text in fixed-width font.
- Cite
  Used for citation.
- Blockquote
  Used for quotations.
- Address
  Used to specify the author of a document and provides a means of contacting the author. (e.g., e-mail, address, ...).
- Bold
  Makes the selected text appear in bold face.
- Italic
  Makes the selected text appear in italics.
- Underline
  Underlines the selected text.
- Typewriter
  The selected text uses `typewriter font.`

To apply a style to some text, just select a text and choose one of these menu options. The corresponding tags will be added to the HTML document.

Up: ASHE Menu

## Lists

There are three kinds of lists that you can generate with ASHE: Definition List, Bulleted and Numbered List. All of them are under theListsmenu.

A Definition list usually consists of alternating ``Definition titles'' (dt's) and ``Definition descriptions'' (dd's). Think of a definition lists as a glossary: a list of terms or phrases, each of which has an associated definition.

To set this list use the option Definition and this will insert:

    <DL>
    <DT>Title Definition
    <DD>Description of the title and more stuff
    </DL>

You can insert more definitions inside of the list, using the option Term. This option will insert the tags <DT> and <DD> inside of the Definition list.

You already know bulleted and numbered lists. These can be generated with the option Unordered and Ordered. If you select text the text becomes the first item of the list. Thus, the following are examples of what ASHE does.

    <UL>
    <LI>Selected Text
    </UL>

    or

    <OL>
    <LI>Selected Text
    </OL>

You can insert more items, using the Item option under the menu or the push button at the bottom of the main window.

Up: ASHE Menu

## Characters

The general format for special characters is: &keyword;. Display a particular character identified by a special keyword. In the menu Characters, there are four entities &amp; (&), &quot; ("), &lt; (<) and &gt; (>). You can refer to the Key bindings to facilitate these characters.

Up: ASHE Menu

## Additional Features

### Local Navigation

ASHE can navigate locally. If you select a hyperlink in the HTML Browser area and if the URL is referred to a local file to the current file, a new ASHE window is displayed with the file selected. If the file is not found, an error message is displayed in the User Message area.

Up: ASHE Menu

### Mark Tags

Pushing this toggle button underlines all tags The marks are attached to the tags so when you insert more text, the tags continue underlined. If you pressed the mark tags button again all marks dissapear automatically. When a file is read and the mark tagsbutton is on, all tags are underlined immediately.

Up: ASHE Menu

### Clear

This option clears the text area and the HTML browser area but keep the current file name.

Up: ASHE Menu

### Print

This option pops up a window asking for the name of a printer. When you push the Ok button the file document is printed.

Up: ASHE Menu

## HTML Forms Menu

The HTML forms menu allows to define HTML documents containing forms to be filled out by users. When a user fills out the form and presses a button indicating the form should be "submitted," the information on the form is sent to a server for processing. The server will usually prepare an HTML document using the information supplied by the user and return it to the client for display.

Up: ASHE Menu

## Form Definition

`<form>`. . .`</form>`

Define a form within an HTML document. A document may contain multiple `<form>` elements, but `<form>` elements may not be nested. Note that non-form tags can be used within a `<form>` element. Attributes and their arguments:

`action`:
  The URL location of the program that will process the form.
`method`: One of `get` or `post`
  The method chosen to exchange data between the client and the program started to process the form. `post` is preferred for most applications.

When you select the option Form in the menu Forms, a Form dialog window is shown. Now, you can type the URL action and select the method get or post. If you have selected a text, the form tags are inserted to the extremes of the selected text.

Up: ASHE Menu

## Input field

`<input>` (there is no ending tag)

Defines an input field where the user may enter information on the form. Each input field assigns a value to a variable which has a specified `name` and a specified data `type`. Attributes and their arguments:

`type`
  Specifies the data type for the variable.
  - `type="text"` and `type="password"` accept character data
  - `type="checkbox"` is either selected or not
  - `type="radio"` allows selection of only one of several radio fields, if they all have the same variable name
  - `type="submit"` is an action button that sends the completed form to the query server
  - `type="reset"` is a button that resets the form variables to their default values
`name`
  `"textstring"` where `textstring` is a symbolic name (not displayed) identifying the `input` variable as in:
  `<input type="checkbox" name="box1">`
`value`
  `"textstring"` where the function of `textstring` depends on the argument for `type`.

  - For `type="text"` or `type="password"`, `textstring` is the default value for the `input` variable.
  - If `type="checkbox"` or `type="radio"`, `textstring` is the value of the `input` variable when it is "checked".
  - For `type="reset"` or `type="submit"`, `textstring` is a label that will appear on the submit or reset button in place of the words "`submit`" and "`reset`".
`checked`
  No arguments. For `type="checkbox"` or `type="radio"`, if `checked` is present the `input` field is "checked" by default.
`size`
  `width` where `width` is an integer value representing the number of characters allowed for the `type="text"` or `type="password" input` fields.
`maxlength`
  `length` where `length` is the number of characters accepted for `type="text"` or `type="password"`. This attribute is only valid for single line `"text"` or `"password"` fields.

ASHE has the Input submenu under the Forms menus. Each item is a different type of input field as described above. When one of them is selected, it is shown a dialog window to set the needed attributes for the input field. Attributes such as maxlength and size are verified to be integers. Since this is one tag, you do not have to select text previously. Make sure that the input field is inside of a HTML form.

Up: ASHE Menu

## Select field

`<select>`. . .`</select>`

defines and displays a set of optional list items from which the user can select one or more items. This element requires an `<option>` element for each item in the list. Attributes and their arguments:

`name`
  `"textstring"` where `textstring` is the symbolic identifier for the `select` field variable.
`size`
  The argument for `size` is an integer value representing the number of `<option>` items that will be displayed at one time.
`multiple`
  No arguments. If present, the `multiple` attribute allows selection of more than one `<option>` value.

Select field is under the menu Forms. When it is selected, it displays a dialog window to inquire about the name of the variable, number of option items (size) to be displayed and if it is multiple selected or not.

Up: ASHE Menu

## Options in a select field

`<option>`

Within the `<select>` element the `<option>` tags are used to define the possible values for the `select` field. If the attribute `selected` is present then the `option` value is selected by default. In the following example all three options may be chosen but IBM is selected by default.

`<select multiple>`
`<option>SUN`
`<option selected>IBM`
`<option>APPLE`
`</select>`

Option is an item in the Forms menu. When this is chosen, a dialog window asks about the value to be sent when this option is selected and if this option is selected or not .

Up: ASHE Menu

## Text area field

`<textarea>`. . . default text . . .`</textarea>`

Defines a rectangular field where the user may enter text data. If "default text" is present it will be displayed when the field appears. Otherwise the field will be blank. Attributes and their values:

`name`
  `"textstring"` where `textstring` is a symbolic name that identifies the `<textarea>` variable.
`rows` and `cols`
  Both attributes take an integer value which represents the lines and number of characters per line in the `<textarea>` to be displayed.

Text area field is under the menu Forms. The Text area dialog window asks for the name of the variable and the number of rows and columns that the text area is going to display. If you have selected a text, the text area tags are going to be inserted to the extremes of this text.

Up: ASHE Menu

## Key Bindings

## Normal Command Keys

     Ctrl-b  	Move backward a character.
     Meta-b 	Move backward a word.
     Meta-[		Move backward a paragraph.
     Meta-< 	Move beginning of file
     Meta->  	Move end of file
     Ctrl-e  	Move end of line
     Ctrl-f  	Move forward a character
     Meta-]  	Move forward a paragraph
     Ctrl-d  	Kill next character
     Ctrl-w 	Kill Selection
     Ctrl-y  	Restore what you have deleted
     Ctrl-k  	Kill until the end of Line
     Meta-Backspace Kill previous word
     Ctrl-o  	Insert newline
     Ctrl-j  	Insert newline and move forward
     Ctrl-n  	Move to next line
     Ctrl-p  	Move to previous line

Up: ASHE Menu

## Menus Keys

All menus can be accesed by the key Meta or Alt and the letter that is underlined and an item of the menu can be chosen just typing the letter that is underlined for that item.

For example: Meta-f-n will select the menu File and the option New under this menu.

The key bindings for some menu option are :

    Meta-n		New File
    Meta-o  	Open File
    Meta-s		Save File
    Meta-a		Save as ... File
    Meta-I 		Insert File
    Ctrl-r		Reload HTML Document
    Meta-P		Print HTML Document
    Meta-q		Quit

    Ctrl-Meta-p	Paste
    Ctrl-Meta-d	Delete
    Ctrl-Meta-u	Undo

    Meta-t		Title
    Meta-p		Paragraph
    Meta-H		Horizontal Rule
    Meta-F		Preformat
    Meta-C		Commentary
    Meta-L		Hyperlink
    Meta-N		Reference
    Meta-G		Image

    Meta-b 		Bold

    Meta-D		Definition List
    Meta-T		Term
    Meta-U		Unordered Lists
    Meta-O		Ordered Lists
    Meta-i		Item

    Ctrl-h		Help

The key bindings for special characters are :

    Ctrl-G 		> (&gt;)
    Ctrl-L		< (&lt;)
    Ctrl-&		& (&amp;)
    Ctrl-Q		" (&quot;)

Up: ASHE Menu

## Numerical Character References

The following is a list of the HTML special characters :

    Char	HTML

    ¡	&#161;

    ¢	&#162;

    £	&#163;

    ¤	&#164;

    ¥	&#165;

    ¦	&#166;

    §	&#167;

    ¨	&#168;

    ©	&#169;

    ª	&#170;

    «	&#171;

    ¬	&#172;

    	&#173;

    ®	&#174;

    ¯	&#175;

    °	&#176;

    ±	&#177;

    ²	&#178;

    ³	&#179;

    ´	&#180;

    µ	&#181;

    ¶	&#182;

    ·	&#183;

    ¸	&#184;

    ¹	&#185;

    º	&#186;

    »	&#187;

    ¼	&#188;

    ½	&#189;

    ¾	&#190;

    ¿	&#191;

    À	&#192;

    Á	&#193;

    Â	&#194;

    Ã	&#195;

    Ä	&#196;

    Å	&#197;

    Æ	&#198;

    Ç	&#199;

    È	&#200;

    É	&#201;

    Ê	&#202;

    Ë	&#203;

    Ì	&#204;

    Í	&#205;

    Î	&#206;

    Ï	&#207;

    Ð	&#208;

    Ñ	&#209;

    Ò	&#210;

    Ó	&#211;

    Ô	&#212;

    Õ	&#213;

    Ö	&#214;

    ×	&#215;

    Ø	&#216;

    Ù	&#217;

    Ú	&#218;

    Û	&#219;

    Ü	&#220;

    Ý	&#221;

    Þ	&#222;

    ß	&#223;

    à	&#224;

    á	&#225;

    â	&#226;

    ã	&#227;

    ä	&#228;

    å	&#229;

    æ	&#230;

    ç	&#231;

    è	&#232;

    é	&#233;

    ê	&#234;

    ë	&#235;

    ì	&#236;

    í	&#237;

    î	&#238;

    ï	&#239;

    ð	&#240;

    ñ	&#241;

    ò	&#242;

    ó	&#243;

    ô	&#244;

    õ	&#245;

    ö	&#246;

    ÷	&#247;

    ø	&#248;

    ù	&#249;

    ú	&#250;

    û	&#251;

    ü	&#252;

    ý	&#253;

    þ	&#254;

    ÿ	&#255;

Up: ASHE Menu

## Additional Information

HTML Quick Reference:
http://kuhttp.cc.ukans.edu/lynx_help/HTML_quick.html

The World Wibe Web FAQ:
http://sunsite.unc.edu/boutell/faq/www_faq.html

Virtual Library/CyberWeb: WWW Development:
http://www.charm.net/~web/Vlib.html

Composing Good HTML:
http://www.willamette.edu/html-composition/strict-html.html

Description of URLs:
http://info.cern.ch/hypertext/WWW/Addressing/Addressing.html

Instantaneous Introduction to HTML Forms:
http://kuhttp.cc.ukans.edu/info/forms/forms-intro.html

The Common Gateway Interface:
http://hoohoo.ncsa.uiuc.edu/cgi/

A Simple HTML Editor:
http://www.ncsa.uiuc.edu/SDG/IT94/Proceedings/Autools/krishnamoorthy/user.html

Environment for Preparing HTML Documents:
http://www.cs.rpi.edu/~puninj/TALK/head.html

NCSA Mosaic HELP Menu: on HTML and on URL

Up: ASHE Menu

Friends that contributed ideas during ASHE development

David Harrison
http://www.cs.rpi.edu/~harrisod

Jim Teresco
http://www.cs.rpi.edu/~terescoj