HTML Express for Windows 9x/NT/2000/XP

I have found that doing an HTML page is sometimes very tedious, but once you know HTML in general, an editor like HTML Express can help you get by all the tedious tasks required by coding HTML manually. There are many WYSIWIG editors on the market today, but to date, I have found no replacement for coding with straight HTML/Text. Most WYSIWIG editors only give you so much - then, you still have to get your hands dirty cleaning things up the way you really need it to look. This is where HTML Express shines. When you code something like a paragraph, you code it the way you want, not what your WYSIWIG editor thinks it should be.

There are limitations to this program, just like other programs, but I will outline them here. First of all, if you want to use the 'View' function, you must have Microsoft Internet Explorer Version 4.0 or later installed somewhere on your computer. The viewer is internal to HTML Express, but it uses some of the functionality of MSIE to give you it's own functions. Also, you must use the properties dialogue box to give HTML Express a default directory for your graphics. Most of us will agree, that good organization is a must in creating a web site, and therefore, having a default directory where all your graphics go is necessary. This also means that you have the freedom to code with the finished product in mind, and unlike some other HTML Editors, not be tied down to making it necessary to have the files in the directory when you are coding.

You will notice that, when running the program, many of the items are not available from the pulldown menus or the button bar. This is because, naturally, if you don't have a file to format, save or print, you don't need them. And also, the program would generate an error if you tried. Also, naturally, as soon as you need your menu/button items, you will get them.

Most of what HTML Express is and does can be broken down into three general pull-down menus:

Text Formatting
Inserting Items
Web Page

TEXT FORMATTING

I will probably skip Bold, Italics & Underline because, everyone who has a word processor on their computer, and anyone who has gotten this far, should know the functionality of these items. Suffice it to say that they are included in the Formatting Pull Down menu as well as the button bar on the main screen.

ALIGNMENT
The Left & Right alignments are in the form of :
<p align right> This is the paragraph </p>

The Center Alignment is the so-called 'Netscape Center':
<CENTER> This is the paragraph </CENTER>
HTML Express uses this version because it's the most consistent with what would be used on a printed page and a whole lot better looking on a web page. Most WYSIWIG editors on the market these days use the other way, but in reality, it looks a lot better the other way.(Editor's Opinion)


HEADER TAGS
Clicking on this pull down menu series, with a word or phrase highlighted, you can turn it into any one of the Heading sizes allowable in HTML.


FONT TAGS
After highlighting a text or phrase, you can either choose the font color, or the font size.
The font color selection brings up a normal Windows dialogue box from which you can use to choose the color you want for the font on the web page. The font color will also change on the text page you are creating, but this part is only for the time of creation. Once you save the file, close & re-open it, the color of the text will be the plain, old, normal, black color.

Clicking on the font size pull down menu series, with a text selection, you can change your selection into any one of the font sizes allowable in HTML.

Keep in mind that these provide their own Open Font tag and Close Font tag. Therefore, they are only to be used when only one font characteristic is to be used. If you want both the Font Size & Font Color changed on your selection, use the Font Format Assistant (next).

Font Format Assistant
This assistant is to be used when you want BOTH the color & the font size changed on the same section of selected text.


Line Breaks
There are two selections here - No Line Breaks and Full Line Breaks.
The No Line Breaks command is put around a text selection that you want un-broken on your web page.
The Full Line Break gives you a line break & clears it to the end of the line. This means that no graphics or anything else can go to the right of the Line Break, no matter what its own formatting is.


PREFORMATTED TEXT


SubScript & SuperScript
With subscript text, like the chemical formula for water, highlight the number '2' and choose Formatting/Subscript so that you will get : H20. In order to get 5-to the 10th power using Superscript, you would highlight the number '10' and choose Formatting/Superscript so that you will get: 510.


COLOR TAGS
This is a neat little utility which allows you to isolate, or separate the HTML tags in your document so that you can see what your document is designed like more easily. Each separate HTML tag is either colored or bold-faced to separate from the regular text. Keep in mind that this colorization is not save-able. Once you close the file, the coloring is technicall lost. However, when you re-open the file, you can re-color the file if desired, for you convenience. This utility is available in the HTML Express menu bar as well as the formatting pull-down menu.


COMMENT
Clicking this command with your selected text will, in effect, hide your selection on the web page. It will make it a comment and not visible. This is very good for documentation of larger web pages. You can use comments, just like programmers do to, to separate sections of HTML code for easier navigation. This command is available in the formatting pull-down menu as well as the HTML Express Toolbar.


CLEAN UP TEXT
Most HTML coders know the exasperation of viewing an HTML source file once it has gone through a UNIX box or Macintosh, or whatever. When you pull up the page, there are no line breaks and a whole lot of garbage-type characters on the screen. This makes for a horrible time trying to figure out the source. Well, be exasperated no longer! This command will do just what it says - it will clean up that awful page full of text & put it into a more HTML-friendly format.


Inserting Items

ANCHOR
This is also known as a 'Named Anchor' in HTML. It allows you to select text & make the selection a Named Anchor in your HTML document. This means that you can create a link to this anchor. You can either make it visible or invisible. An example of a good use for an invisible anchor would be to create a 'Top' anchor, like --
<A Name="top"><!--top--></A>
Simply put, what it does to create this invisible-ness is just to make it a comment. But it works just like an anchor in every way. If you wanted to use the highlighted text, say a heading, or a word, to be visible, just click in the Visible box. This command is available in the formatting pull-down menu as well as the HTML Express Toolbar.


LINK
The Link Dialogue box is a very widely useful tool, in my humble opinion. Not only does it allow you to type in the link (file or URL), but it allows you to browse for the file on your hard disk. If the file is in a directory other than the directory of the file you are creating, you will have to type that directory in. You can also specify a default directory, if needed in your preferences (under the File pull-down menu).
You can choose from three types of links:
HTTP
Named Anchor
None

If this is a link to another web site (http://www, etc), you will need to type in the www address & then click on the HTTP radio button. The program will automatically supply the 'HTTP://', as well as all the other link tag parts for you.

If this link is to a Named Anchor within this document, you can either type in the name of the anchor, or choose the anchor from a pull down list of all the Named Anchors on the page, and then click on the Named Anchor radio button. This provides all the appropriate HTML tag syntax for you.

Also, if you are creating a link which will be used in a frame, then, the optional 'Target Name' text box can be used to supply the name of the target frame in which you want it to appear.

And last but not least, if you click in the 'None' radio button, the default link, not referencing a named anchor or an external URL will be used.

As with most of the other items, the Link command is available in the formatting pull-down menu as well as the HTML Express Toolbar.


IMAGE
The default text input box is the 'Alternate Text' text box. Here, you will insert the text you want to appear when, in the unlikely event that someone views your page with a non-graphical browser. It also appears as a 'Tool-Tip' in some browsers when you run your mouse over the image. The Graphics Directory is where your graphic image resides. If you designate this in your Properties (Under the File pull-down menu), then it will always remain the same, but can be edited, if need be, on the fly. The alignment box is a pull-down menu of the available alignments for your graphic image.

As you will also see, you can designate your image as an Image Map & give it the URL of the Client side image map. Once you click on 'Select Picture', you can browse to anwhere your image is, select it and it will appear in the box in the lower portion of the dialogue box. The width & the height have been entered for you, so there will be no calculation necessary, unless you want to change the sizes. If you do not enter a number in the Border text box, then the default, Border=0 will be used.

Once all the data is exactly how you want it, just click the 'Apply button & the information will be transferred to your web page.


FORMS
For those who don't know, the actual functionality of a form, like saving the output to a text file, emailing it, adding it to a database, is done by adding another script of some kind to your pages (javascript, cgi, etc)

Forms are broken down into two 'Assistants' because Forms can get a little complex. The two Assistants are the Basic Form Assistant and the Form Content Assistant.

The Form Assistant basically gives you the shell of a form. It allows you to set the Action the form is to make (URL - Like a CGI script or Email), and set the transfer method (POST or GET).

Form Content Assistant
This assistant provides the following components and their options:

Text Field Name, Default Value, Length & Maximum Length
Password Field
Hidden Text
Upload a File
Radio Button Name, Default Value
Check Box
Text Box Name, Default Value, Number of Rows, Number of Columns
Pop-Up Menu Name, Multiple Selection
Selection List Name, Rows in Scroll Bar, Multiple Selection
Submit Form Name, Button Title
Reset Form
Option List Item - gives you the following:
<OPTION>
This inserts items in the selection list

Default Option List Item - gives you the following:
<OPTION SELECTED>
This will be the default item selected in the selection list


FRAMES Assistant
Some of the best features of this program are the 'Assistants'. These are the dialogues - not wizards - which give you the choices you need to do a particular function within an HTML document. The Frames Assistant is one of these. This feature comes in handy because frames tend to sometimes be tedious and this lessens the burden of the design process. However, there still needs to be good planning ahead of time so that the data you enter into the Frame Assistant will be meaningful.

There are technically two sections to the Frames Assistant. The first one deals with Frames in general. This is where you choose the border color and size and the orientation of your frames on the HTML page. The border color & size are self-explanatory. The orientation means that you are choosing whether your main frames focus is in rows or columns.

The second section deals with the aspects or properties of the frames themselves. As you will notice, at the bottom, there are 4 numbered buttons. Each of the features you are going to choice in this section need to be made for each frame you design. Once you make your choices, you click on the corresponding frame number to 'save' your choices for that frame into memory. Keep in mind that if you make new choices and click the same number, you overwrite your first batch of choices.

Also, it's best to design your frames in order, 1 through 4 because it's usually easier to keep track, mentally, of what you are actually designing. The URL box allows you to either type in your html page for the frame, or browse your hard disk for it. The Subdirectory box is only necessary if the file you choose is not in the root directory where the main frames page is. It is totally optional. As any frame designer knows, you need a name for each frame to act as a target for links. The Name box is where you assign your fram a name. Next, you assign the percentage of the screen the current frame is to take. All that's left now is the Scroll and Frame Border boxes. In the Scroll box, you have three choices, Auto, Yes and No. In the Frame Border box, you only have two choice, Yes or No.

Once you have completed your choices for your first frame, click the '1' button to save your choices into memory. This will clear the text entry boxes and allow you to make new choice for your next frame. Repeat the above for each of the frames you are designing. Once you have selected all your frames choices, click. The 'Apply' button. This action will put all your information on your page. It will even put in a section (which you need to change) which, for people using a non-frames-enabled browser, will either tell them what you want, or give them an HTML page to view.

In the Insert Pull-Down Menu, you have many other Frames capabilities. They are as follows:
FrameSet With Rows - This allows you to add another frameset with rows
FrameSet With Columns - This allows you to add another frameset with columns (duh!)

New FrameSource - gives you the following:
<FRAME SRC="EnterURLHere" Name="name" Scrolling="yes">
Your job will be to replace "EnterURLHere" with the actual URL you will be using, the name you are assigning that FrameSource, and whether or not you want it to scroll.
Name - allows you to enter a name for your FrameSource
Target - allows you to enter "Target=" along with the name of the target
Attributes
Margin Width & Margin Height - these items do pretty much what they say they do. The Margin Width sets the left margin, horizontally (in pixels) and the Margin Height sets the top margin, in pixels, vertically.

No Resize - This gives you the no resize command for the particular frame it's in.
NoFrames Tag- This gives you the following:
<NOFRAMES>
<BODY>
This is where you put the message for those people who don 't have frames
</BODY> </NOFRAMES>


SPECIAL CHARACTERS
There are some items which require some 'special' handling so they show up correctly in an HTML document. For instance, if you wanted to actually print out a left bracket (<) or right bracket (>), since web browsers interpret the left bracket as the start of tag, these items need to be handled specially to do so. The ampersand is another example of this. The following items are 'Special Characters' and are able to be inserted from its submenu:
Non-Breaking Space
Ampersand
Trademark
Registered Trademark
Copyright Symbol
Left & Right Brackets

BASIC HTML Tags
Line Break, Paragraph & Horizontal Rule are the first three of these insertable HTML Tags. Also, sometimes, things happen so that you need to open or close the HTML, HEAD, TITLE, or BODY of an HTML Document. This menu item adds the open and close tags individually for these items when needed.


META Tags
Here you will find the most commonly inserted META tags, insertable within the open & close HEAD tags. They are:
Keywords
<META NAME="KEYWORDS" CONTENT="Keywords go here">
Here, 'Keywords go here' will be highlighted, ready for your input. It all will be put directly following your 'HEAD' tag. If you don't have one, you will be prompted that you need one in order for this feature to work.
Description
You will get the following:
<META NAME="DESCRIPTION" CONTENT="Enter_descriptive_text_here">
Here, 'Enter_descriptive_text_here' will be highlighted, ready for your input. It all will be put directly following your 'HEAD' tag. If you don't have one, you will be prompted that you need one in order for this feature to work.
Author
You will get the following:
<META NAME="AUTHOR" CONTENT="Author Goes Here">
Here, 'Author Goes Here' will be highlighted, ready for your input. It all will be put directly following your 'HEAD' tag. If you don't have one, you will be prompted that you need one in order for this feature to work.
Refresh
You will get the following:
<META HTTP-Equiv="Refresh" CONTENT="Time in Seconds Goes Here" URL="URL goes Here">
Here, 'Time in Seconds Goes Here' will be highlighted, ready for your input. You will also need to change the text that says, 'URL goes Here' to tell it which URL to change to. It all will be put directly following your 'HEAD' tag. If you don't have one, you will be prompted that you need one in order for this feature to work


TABLES
From the Insert Pull Down Menu and also from the HTML Express Toolbar, there are selections for :
Table Tag, Table Row & Table Cell<BR> These allow you to select text & put the open and close tags for Table, Row & Cell around the Text. This allows you to manually build a Table around text you already have. Since the text remains highlighted, you should start from the top of the Table Hierarchy and go down. That is to say, highlight the text and choose 'Table Tag' first. This puts the open & close tags around your text, but leaves it highlighted. Then, choose the Table Row selection, which also leaves the text highlighted so you can then choose the Table Cell selection.

The Table Assistant does things a little differently. Here you can create the Table with the amount of rows and cells you want and then insert the text or image inside the cells individually. One of the great features of the HTML Express's implementation of Tables is that with 'indenting', in a hierarchical fashion, it is made much more easily readable.
The Table Row tag is indented to the first tab stop inside the margin. Then, the Table Cell tag is indented to the second tab stop inside the Table Row tags.

Also, there is a Background Color item which can be selected. This can be put within the Table Open Tag, the Table Row Open tag, or the Table Cell Open Tag. But remember there's no way to automate this one. Wherever you cursor is, that's where it will be inserted. The best choice is to put your cursor just inside the closing bracket of the tag. This way, a space is inserted just before the BGColor command is inserted and it is put in a reasonable place.

There is also a list of common Table Cell attributes that are insertable. Again, there is no really good way of automating this either except to make it necessary to put your cursor just to the right of the 'TD' inside the Table Cell open tag. If you don't, you will be prompted to do so. The cell attributes are :
Cell Alignment (vertical & horizontal)
Cell Width & Height
Cell Spacing & Padding
ColSpan & RowSpan
NoWrap


LIST TAGS
The following are the common list tags which are supported by HTML Express:
Ordered
Unordered
Menu
Definition
Each of the above list types are creatable with or without selected text. The 'List Item' tag can be used within the Ordered, Unordered and Menu Lists. For the Definition List, things are a little different. There are no close tags for Definition Title and Definition Item, so you can't have any text highlighted when inserting them. Just put your cursor just to the left of the text you want defined as a Title or Item and insert them.


STYLE SHEETS
At this time, there are two items supported concerning Style Sheets. One is the Link to StyleSheet, which will put a style sheet reference within the Open & Close Head Tags. The other is the embedded stylesheet which inserts the following:
<STYLE TYPE="text/css">
<!--
-->
</STYLE>

JAVASCRIPT
For the JavaScript savvy, HTML Express includes some basic shells for some JavaScript commands. Naturally, the basic Javascript shell is included along with the following: For Loop
Function - (generic tag "FunctionNameGoesHere" needs to be replace with designed function name)
If
If Else
While Loop
With Object
Along with these, the basic OnMouseOver and OnMouseOut events are included too. This is the exact text which will be inserted:
onMouseOver="WhatToDo(); window.status='StatusBarMessageHere'; return true" ("WhatToDo" is highlighted upon insertion) &
onMouseOut="WhatToDo(); window.status='StatusBarMessageHere'; return true" ("WhatToDo" is highlighted upon insertion)
With these mouse events, there are two items which are generic tags ("WhatToDo" & "StatusBarMessageHere") that naturally need to be replaced.
INSERT NAME
This 'command' can be put anywhere that it is desireable to apply a name. It is quite common in JavaScript to define objects, therefore it was put just under the JavaScript pull-down menu item. Naturally, there are other places/uses, like Frames. Nevertheless, the text :
Name="NameGoesHere"
is inserted using this pull-down menu item. The text 'NameGoesHere' is automatically highlighted for your immediate input.


HTML EXPRESS TOOLBAR
This menu item turns off & on the HTML Express Toolbar - the lowest toolbar with all the HTML-Specific buttons.


POP-UP MENUS (Right Mouse Button Click)
When any amount of text is highlighted and the right mouse button is clicked, a pop-up menu will appear which is the same as the 'Formatting' Pull-Down Menu.
When no text is highlighted and the right mouse button is clicked, a pop-up menu will appear which is the same as the 'Insert' Pull-Down Menu


WEB PAGE

SELECT COLORS
This window/Assistant lets you choose any of the basic colors of your HTML page - Background, Text, Link, Visited Link, Active Link. Just click on the item who's color you want to assign (right column) and move the scollbars, adjusting the RGB levels until you have the perfect match for that item. Once that item is selected, choose another item, and so on. Once you have applied all the colors you want, just click the 'Apply' button. This will locate your BODY Tag & insert your changes within the Tag.

BACKGROUND IMAGE
This selection window allows you to set a background image/graphic for your HTML page. Whichever graphic you choose will be tiled throughout the page. Here, the directory box will show your default subdirectory setting (set in Preferences), if you've set it. You can either leave it alone, if it's correct, or change it, if necessary. The Fixed Background check box is there for MSIE users who want the Background Image fixed when you scroll the text in the HTML page. This is also what the Fixed Background Pull Down Menu is for.


VIEW
One of the other great features of HTML Express - If you have MS Internet Explorer 4.0 or above installed on your machine, then HTML Express will use the 'engine' of it to create an internal Viewer for your HTML page. If you do not have it installed, HTML Express will inform you of this and, once you click the OK button, it will load your System's Default Browser in order to view your page.


These Help pages were written entirely with HTML Express!

Updated 11/16/1997 © 19997 HTML Express, August Wind Enterprises