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

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 :

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:

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 :

This is made simple by ASHE. Following these steps.

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:

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

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