HTML Editors

From Simple to WYSIWYG

As has been mentioned before, just about any text editing program can make web pages. Some programs are not designed for that, and may have difficulties. For example, a program I once used would let you create an HTML file and save it--but when you re-opened it, it would try to display the web page like a browser, and you could not edit the HTML code any more.

A good HTML editor will simply allow you to write the web page, give you help when you need it, and otherwise stay out of your way. A lot of what makes an editor good or bad depends on the tastes of the author. For example, some people like to stay in pure markup language code, writing web pages without any assistance, unable to see the page until they have finished. These are people who are very comfortable and practiced with writing web pages, and can render the HTML in their heads without looking at a browser. Of course, they must check things when they're through, but mostly they have no problems staying in the code.

Others, however, might prefer to avoid code entirely. There are programs which allow you to do this; they are called WYSIWYG editors. You remember WYSIWYG from a few chapters back: it's the ability to see the finished page, as it appears in a browser. A WYSIWYG editor allows you to only focus on writing text for the web page, and then you use buttons and other controls to insert images and tables, control colors and backgrounds, and so forth. You could create a whole web site and never write any HTML commands--the program will do it for you, automatically.

Many people work between these two extremes, often switching back and forth between HTML code and WYSIWYG views, writing the code by hand, but getting help with the difficult parts; creating the web pages from their mind's eye, but checking every minute or so to make sure they got it right. There are many editors of different types and costs to help you create web pages as you like.

In this class, we will be using the non-WYSIWYG editors, like Notepad or Notepad++. The reason: it helps you learn how to write HTML better. WYSIWYG editors are easy, but because it is possible to avoid HTML, you might not really learn HTML if you use one. Now, you might ask, "If it's possible to make a web page without learning HTML, why am I learning HTML?" The answer is that WYSIWYG editors are not perfect, and often they don't get the page exactl;y as you want it. Good web designers will almost always want or need to check the code and make their own personal changes directly to the HTML code. Additionally, the point of learning HTML in this class is to introduce you to the basics of coding.

Plain & Simple

Let's take a look at a few examples of HTML editors.

First, we have very plain editors, like Notepad (Windows) or TextEdit (Mac), both applications whihc come with the operating system. These are the most simple text editors possible, and are not designed for making web pages. All they do is allow you to type text, and save them as plain text files (though TextEdit can do more). An example of web page authoring in one of these programs looks like this:

Notice that the text is all black, and nothing allows you to insert or edit things with the push of a button. Simple--but it can be difficult to use for some.

A Little More Help, Please

Next, we have text editors which were created for people who write HTML or other computer languages. These editors give assistance to the writer--either a little or a lot--but they do not show what the finished web page looks like. They are not WYSIWYG at all. Examples are Notepad++ (Windows) and Fraise (Mac).

Here's a look at a window of Notepad++:

Notice a few differences. First, there are colors. This class of editors will "see" your HTML code, and following simple rules, it will change the colors of the code to show you if you are doing something right or wrong. HTML commands are one color, attributes another color, and values are a different color still. Such color-coding might look like this:

The color coding helps you see when you make a mistake. For example, look at the code below, which is the same as above except for one small mistake:

See the problem? I forgot the quote before the value in the command on the next-to-last line. The error is made more clear by the color--attributes, in this program, are supposed to be red, but mine stayed blue. That tells me I made a mistake, and from there, it's easy to find that I left out the quote mark.

Another feature is line numbers; this helps to debug"Debug" means to find and fix problems in the code the code. Take this example, from one of our review quizzes; I get an error message when I try to see the answers to one of the problems:

This allows me to go back and check like 110, as shown in the text editor:

Here, I can see that I asked to "print" (type out) the variable "p04" which is used to carry the reader's answer from the quiz page to the results page. From the error message, I can see that I forgot to "define" or create the variable… and so I look back and find this:

And there it is--I made variables p01 to p03, but forgot p04. The line numbers help me find where prblems are in the code.

These text editors can do much more; these are just a few examples of the features they offer to help programmers write their code.

But What about WYSIWYG?

One problem with the editors I have show so far is that they do not display the finished web page as it would appear in a browser. This can be very important; many people like to look at their work frequently. One answer is to have two programs running: a text editor to write the web page, and a browser to view it. The problem with that is that some find it difficult or confusing. You have to open the same file in two different programs, and must constantly remember to save and reload the pages.

An example of an editor which helps with this is Aptana Studio. It is free software, for both Windows and Mac, which also offers a quick way to switch between editor and browser views. Here's what the Aptana window looks like:

Notice that it offers the same features noted above: color-coding and line numbering. But also notice the two buttons at the bottom left, "Source" and "Safari." Clicking on the "Safari" button allows you to see what the page looks like in that browser:

You can also change the browser to whichever you wish to use to preview--an important feature, since different browser render the same web pages in different ways (as you will notice if you try to view this web page in Internet Explorer!).

Another neat feature in Aptana is the auto-complete. When you type HTML tags, Aptana sees the angled bracket and the first character you type, and gives you a list of possible commands. In the example below, I started a tag and just typed the letter "f" with the intention of using the "font" command:

As you can see, it not only shows me the command, but explains it to me, and tells me which browsers support it. All I have to do is hit the "Enter" key, and the command is auto-typed for me. If I then hit the "space" bar to start an attribute, a list of attributes comes up:

Beginners might find this very useful.

However, be warned--Aptana is fairly advanced, and could be confusing for some people. Additionally, it sometimes has problems with text on Asian-language versons of Windows, where the fix to the problem is not easy to explain.

Full WYSIWYG

Advanced software will go even further, adding split-screen views and many special features to help both beginning and advanced web designers. One famous example is Adobe Dreamweaver, which costs $400 ($150 with the academic discount), which has an interface that looks like this:

There are many more in between.

Remember, for this class, we will stay with simple editors--Notepad or Notepad++ for Windows, TextEdit or Fraise for the Mac.