Home | HTML mode intro | About HTML mode | About Frontier menu | HTML mode manual
HTML mode version history | Frontier menu version history | Download

About HTML, CSS, and JavaScript modes

Example of HTML code The first mode I started working on was HTML mode. Before I began writing Alpha's HTML mode, I had tried several HTML editors, but I found none of them satisfying. I couldn't find any editor with which HTML editing could be done faster than simply typing the text. What's the point of using an HTML editor if all its functions slow you down?

I had for long used Alpha to write LaTeX and I thought it was just excellent. With Alpha I could write LaTeX documents a lot faster than with any other editor. Alpha at that time had an HTML mode written by Scott Brim, but unfortunately it was a bit outdated and lacked many HTML elements. So the first thing I did was to add all missing HTML elements. But once I'd begun programming I couldn't stop, so I kept adding new functions to HTML mode...

HTML mode has now got two child modes, CSS mode and JavaScript mode.

Alpha is not a WYSIWYG editor and it does not teach you HTML. It's a text editor for you who are looking for an editor which makes HTML editing easier and faster.

Alpha colors the code to make it easier to read. The image to the right shows how the text is colored in HTML mode. The coloring is customizable so you can the choose the colors you prefer.

CSS mode and JavaScript mode

Example of CSS code Example of JavaScript code There is support for editing of CSS and JavaScript in HTML mode. CSS mode and JavaScript mode are two modes for editing of external CSS and JavaScript documents, respectively. They have basically the same features as the features in HTML mode.

Why three modes? Well, basically to give you the set of functions you need for a certain type of document. HTML mode is for editing HTML documents (suffix .html, .htm or .shtml), CSS mode is for editing CSS documents (suffix .css) and JavaScript mode for editing JavaScript documents (suffix .js).

The image to the the left shows how the text is colored in JavaScript mode and the one to the right shows the text in CSS mode.

Online manual

Below I will mention some of the features in HTML mode. If you want to have a more detailed look before downloading you can browse the online manual. This manual can also be downloaded as a single file.

Features in HTML mode

Up to dateHTML mode knows HTML 4.0 and both Netscape's and Microsoft's extensions to HTML.
Key bindings for all elementsAll HTML elements have their own key binding, by which you can open a dialog window like the one below for FRAME. In this dialog you can give values to the attributes, and tags are then inserted in your document. The key bindings are completely user configurable. You can change them exactly as you like.
Attribute dialog
Speed typingWhen you insert HTML elements you will see black bullets being dribbled near where you insert elements. They are supposed to be a feature. The tab key takes you to the next one and deletes the bullet. For example when you insert H1 tags you will first get

Now type the header text,

and then hit tab to jump to the bullet and delete it. You are now ready to continue typing.
Word completionAnother way to speed up the typing is the word completion mechanism. It is best illustrated with an example. Let's say you want to type a TABLE tag. First type


If you now hit cmd-tab this is expanded to

Then you perhaps want the attribute CELLSPACING. Type the first few letters

and hit cmd-tab again.

Alpha tries to expand this as much as possible. Since there is also an attribute CELLPADDING Alpha expands this to CELL. Now type an 's' and hit cmd-tab again. Alpha then expand the text to

You can now type the value you want for CELLSPACING hit tab and write the next attribute.
Changing and removing tagsEditing HTML code is not only a matter of inserting new HTML tags. You want to easily be able to change and remove them too. HTML mode has several key shortcuts for this. For example, command-double-clicking on an opening tag opens a dialog with the current attribute values. Change them as you want and a new tag is inserted.
Preview in browserBrowser menuThe files are sent to your browser with one key storke. HTML mode has a user configurable menu where you can add your browsers and quickly change which browser Alpha sends the file to.
Jumping between filesCommand-double-clicking on a link in your document opens the corresponding file for editing. You can also open image file by command-double-clicking on the image tags. They are then opened in the program they were created with.
Home page windowsHome page windowYou can open windows with lists of your files. I call these windows 'home page windows'. From these windows you can cut and paste to make links. You can also open files for editing from these windows.
Formatting of the codeHTML mode has a customizable indentation of the code and a function to reformat messy code to make it more readable.
Checking linksHTML mode can check that all links between your files are ok, and lets you easily fix broken links.
Dynamically included filesSometimes you want to use the same code in many files. For example, you want every page to have the same header. This code can be put in a separate file and be dynamically included in other files. If you want to change the header you only have to change it in one place and then quickly update all the other files.
Character translationHTML mode translates special characters, å, ó, ü etc. to and from their HTML entities.
Extending HTML modeYou can define new HTML elements. Therefore you don't have to wait for Alpha to be updated to use it for new HTML.
More...There are of course more features in HTML mode. I let you discover them for yourself. Thanks for reading all the way down here


Home | HTML mode intro | About HTML mode | About Frontier menu | HTML mode manual
HTML mode version history | Frontier menu version history | Download