Google

ASHE (A Simple HTML Editor) - xhtml 1.3

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 :

  • 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

New HTML Document

If you would like to write a new document, you should select the option New under the File Menu. A dialog window pops up asking for a title of the document. The new document could be a HTML document or simple text document. If you choose the first one, this is displayed in your text window using the title that you typed in. 
<HTML>
<HEAD>
<TITLE>My First HTML Document</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>
If you choose a text document, the text window is cleared and you can start writing your document.

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

Exporting HTML Documents

You can export HTML documents using the option Export as under the File Menu. A File window is displayed and you can choose to export to your HTML documents to Plain Text , Formatted Text and Postscript files.

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 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">
Use the reload button to see this image in the browser area. ASHE only can display GIF and bitmap Images.

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 the Lists menu.

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

Separators

There are three separators that you can find under the menu HTML :
  • Paragraph <P>
  • Line Break <BR>
  • Horizontal Rule <HR>

Up: ASHE Menu

Additional Features


Displaying Documents on Browsers

ASHE helps you to display your HTML Documents either on Mosaic or Netscape.

  • Mosaic
    To display your documents on Mosaic you should use CCI (Common Client Interface) that allows to communicate ASHE with Mosaic via TCP/IP. Please follow these simple steps:

    1. Choose the CCI option under the File Menu on Mosaic and a dialog windows asks you for the CCI Port Address. Use a port number between 1025-65536 and click in the radio button Accept requests.
    2. Choose the CCI option under the File Menu on ASHE and a dialog windows asks your for the Port Number. This window already shows the Name of the file and the Host Machine where you are running ASHE. Once that you write the same port number that Mosaic are listening to and click in the Ok button, the current file is shown on Mosaic.

    If you modify the name Host Machine and also the URL to send in the CCI dialog window, you can show documents to people on the whole web as long as they have a running sessions of Mosaic.

  • Netscape
    To show the current document on Netscape, you just use the Netscape option under the File Menu. This option will pops up a Netscape Connection dialog window to ask you to Load or Reload your current file.

Up: ASHE Menu

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

Options Menu

The Options menu has two items:
  • Load Images. To display or not images in the browser area
  • Table Support. To display or not tables in the browser area

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 
 Ctrl-v 	Move to next page
 Meta-v		Move to previous page

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
Ctrl-t		CCI connection with Mosaic
Ctrl-z		Netscape Connection
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-k		Line Break
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;)
The key bindings for the HTML Browser Area: 
Space		Move to next page
Return		Move to next page
Backspace 	Move to previous page
Delete		Move to previous page
Up		Move to previous line
Down		Move to next line

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.stars.com/

Yahoo Index on the WWW:
http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/

Web Style Manual:
http://info.med.yale.edu/caim/StyleManual_Top.HTML

Description of URLs:
http://www.w3.org/pub/WWW/Addressing/Addressing.html

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

NCSA Mosaic Common Client Interface (CCI):
http://www.ncsa.uiuc.edu/SDG/Software/XMosaic/CCI/cci-spec.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