Skip to main content.

Web Based Programming Tutorials

Homepage | Forum - Join the forum to discuss anything related to programming! | Programming Resources

The Complete Idiot's Guide to Creating an HTML Web Page

Chapter 16 -- The Best Free HTML Editor: HTML Writer

Chapter 16

The Best Free HTML Editor:
HTML Writer


CONTENTS



One of my goals in writing this book is to provide you with everything you need to get started in the Web page publishing profession. That's why this book's disk is filled with HTML examples, hypertext files containing links to HTML resources, graphics, an FTP program, and a graphics viewer for converting files. The final thing we need to add to this grab bag of HTML gewgaws is some HTML editing software. So I scoured the Net looking for an editor that was powerful, but also easy to use and cheap (preferably free). After auditioning plenty of pretenders to the throne, I finally settled on HTML Writer. This slick program does just about everything an editor should (except, unfortunately, edit HTML tables), and it's a snap to use. The price is right, too: HTML Writer is free, no strings attached. This chapter shows you how to use HTML Writer to create, edit, and test your hypertext documents.

HTML Writer Is Free, But…
<PLEA>
HTML Writer is a free program. You can use it until you're blue in the face, or until kingdom come, and you won't have to fork out a dime. However, HTML Writer's author (Kris Nosack) calls the program donationware. That means he'd gladly accept donations to help defray the costs of developing the software. (The suggested donation is $10, but you can send whatever you like.) Kris, who's a graduate student, has clearly worked hard to make HTML Writer a solid program, so I encourage you to send whatever you can afford if you plan on using HTML Writer regularly.

</PLEA>

Cranking Up HTML Writer

After you install HTML Writer (see the appendix titled "The Goodies on the Disk" for instructions), the program is more or less ready for action. Your first order of business is to start HTML Writer using one of the following techniques:

Once HTML Writer loads, you'll see a screen similar to the one shown on the next page.

Getting a Document Onscreen

You can't do a whole heckuva lot with HTML Writer at first. To activate most of its options, you need to either start a fresh file, or open an existing HTML file:

HTML Writer Doesn't Do Long Filenames
If you're using HTML Writer on a Windows 95 system, note that you won't be able to save your documents with long filenames. If you already have some files with long names, they'll appear in shortened form in the Open dialog box. For example, HomeSweetHome.htm appears as homesw~1.htm, and homepage.html appears as homepa~1.htm.

The main HTML Writer window.

Once you get a document on board, most of HTML Writer's toolbar buttons come to life, and the menu bar sprouts a few more menus. See the figure below.

You need to start a new document (or open an existing one) to activate most of HTML Writer's options.

It's a Setup: Getting HTML Writer Ready to Go

Before you start working on your HTML document, there are a few setup options you should adjust so HTML Writer will work the way you do. All these options are available on the Options menu (duh), so here's a rundown of the various commands you need to check out:

Toolbar  This command toggles the toolbar on and off. Unless you don't have a mouse, you should leave this option checked (i.e., activated).
Status Bar  This command toggles the status bar on and off.
Button Hints  When this command is checked, a short description of each toolbar button appears if you let your mouse pointer linger over a button for a second or two. (Note, as well, that the status bar also shows a description of each button.)
Word Wrap  This command toggles word wrap on and off. Although this option is off by default, I'd recommend turning it on so all your text stays inside the document window.
Clock  This command displays a menu of time formats, which govern the appearance of the clock that appears in HTML Writer's status bar (it's in the bottom right corner of the screen).
Templates  This command displays a menu of options that let you define or select special HTML Writer files called templates. If you find yourself using the same basic structure for your pages, you can put that structure in a template and then reuse it for each new file. I won't cover templates in this chapter, but the Help system gives you the basics.
Uppercase Tags  This command determines whether HTML Writer inserts tags either as lowercase (e.g., <b> and </b>) or as uppercase (e.g., <B> and </B>). Although it really makes no difference whether your tags are uppercase or lowercase, uppercase tags are much easier to read, so I'd recommend activating this option.
Save on Test  As you'll see later on, HTML Writer lets you test your documents by loading them into a browser. If you activate this command, HTML Writer saves the document before sending it to the browser. This is a good idea, so you should activate this command.
Save as Unix Text  Activating this command tells HTML Writer to save your documents using the Unix text format (which is slightly different than the format used by DOS and Windows systems). If your pages look fine on the Web, don't worry about this command; if, however, you're seeing extra garbage characters in your Web pages, activating this command might help.
Test Using  This command determines which browser you want to use for testing. In the cascade menu that appears, select either Mosaic, Cello, or Netscape. If you use another browser (such as Internet Explorer), you can ignore this command.
Screen Font  This command controls the font that HTML Writer uses to display your text and tags. (It has nothing to do with how your pages look on the Web, however.) The default font is bold italic, which is hard to read. To get something more reasonable, select this command, choose the appropriate options in the Font dialog box (such as Regular in the Font style list), and then select OK.

Note that you only have to adjust these options once. HTML Writer stores your preferences for you, so they'll all be set automatically the next time you load the program.

Creating an HTML Document with HTML Writer

HTML Writer is basically just a text editor that also knows how to do the HTML thing. So using HTML Writer is easy as pie: just type your regular text in the document window and then use the menu commands or toolbar buttons to insert HTML codes when you need them. Here are the basic steps you'll follow for each document:

  1. Begin the document by including the HTML codes that define the structure of the document (such as <HTML>, <HEAD>, <TITLE>, and <BODY>).
  2. For text not affected by any tags, just type the text into the document.
  3. When you need to insert an HTML tag, position the cursor where you want the tag to appear and then choose the appropriate menu command or toolbar button. HTML Writer inserts the tag or tags. For the latter, the cursor is placed between the tags (e.g. between <I> and </I>) and then you enter your text.
  4. Save the file periodically by selecting the File menu's Save command (or by pressing Ctrl+S).
  5. Test the file from time to time by selecting the File menu's Test command (more on this later; see "Taking the Document for a Test Drive," below).
  6. Repeat steps 2-5 until you're done.

The next few sections expand on step 3 by showing you how to insert the various HTML tags.

Inserting Document Tags

In HTML Writer, "document" tags are the tags that define the overall HTML structure of the file. There are four of these basic tags in all: <HTML>, <HEAD>, <TITLE>, and <BODY>. I gave you the scoop on these tags back in Chapter 4, "Laying the Foundation: The Basic Structure of a Web Page." HTML Writer also defines a fifth document tag-<ISINDEX>-that I didn't cover.

To insert one of these tags, position the cursor appropriately in the document window, pull down the HTML menu, select the Document command, and then select either Html, Head, Title, or Body. The following screen shows how the document looks after you select the Html command. Notice how HTML Writer inserts both the <HTML> and </HTML> tags and then positions the cursor in between them. (At this point, you'll probably want to press Enter a few times to give yourself some room for the next tags.)

A document with the <HTML> and </HTML> tags inserted.

Inserting Style Tags

HTML Writer's style tags cover text formatting (such as the <I> tag for italics) and headers (such as <H1>). (If you need a refresher course on these tags, head back to Chapter 5 "From Buck-Naked to Beautiful: Dressing Up Your Page.")

You can apply these tags (and, indeed, many of the other tags we'll be talking about) using either of the following methods:

To apply one of the text formatting style tags, first pull down the HTML menu and select the Style command. Then choose one of the commands listed in the following table (or you can use the toolbar buttons or keyboard shortcuts shown in the table).

Style
Tags
Command
Button
Shortcut
Bold
<B></B>
Bold
Ctrl+B
Italic
<I></I>
Italic
Ctrl+I
Underline
<U></U>
Underline
Ctrl+U
Typewriter
<TT></TT>
Typewriter
None
None

HTML Menu Shortcut
You can display the HTML menu quickly by right-clicking on the document text. The shortcut menu that appears gives you access to all the HTML menu commands.

For the heading styles, select the HTML menu's Style command, then choose the Header command to display another cascade menu. The following table spells out which command (and toolbar button) inserts which tags.

TagsCommand Button
<H1></H1>
1 (Top level)
<H2></H2>
2
<H3></H3>
3
<H4></H4>
4
<H5></H5>
5
<H6></H6>
6 (Bottom level)

Inserting Paragraph Tags

Paragraph tags? Isn't there just one paragraph tag: <P>? Well, not in the HTML Writer world where the line break (<BR>), horizontal rule (<HR>), and preformatted (<PRE> and </PRE>) tags are grouped into this category, as are a few other obscure tags that we won't worry about. (I talked about the <P> tag in Chapter 4. You'll find info on the other tags in Chapter 5.)

Hey, it's a free country, so why the heck not? You'll find the commands for these tags by pulling down the HTML menu and selecting the Paragraph command. Here's a summary of the available tags, and their corresponding menu commands, toolbar buttons, and keyboard shortcuts:

TagsCommand
Button
Shortcut
<P>Paragraph
Ctrl+P
<BR>Line Break
Ctrl+L
<HR>Horizontal Rule
Ctrl+H
<PRE></PRE>Preformatted
None

Inserting Image Tags

HTML Writer makes it easy to add <IMG> tags for graphics, especially tags that include options such as alternate text (ALT) and alignment (ALIGN). (This graphics stuff was explained in gory detail back in Chapter 8 "A Picture Is Worth a Thousand Clicks: Working with Images.") Here are the steps to follow to insert an <IMG> tag in your document:

  1. Pull down the HTML menu, select the Hyperlinks command, and then select the Inline Image command. (Why is the Inline Image command stuffed inside the Hyperlinks menu? Beats me. Hey, I just write about 'em; I don't make 'em.) The Inline Image dialog box appears, as shown in the following figure.

    You can also display the Inline Image dialog box by clicking on this button in the toolbar.

    Use the Inline Image dialog box to specify the options for the <IMG> tag.

  2. Use the URL text box to enter the name and location of the graphics file. Note that the URL box also doubles as a drop-down list box that keeps track of the last 20 filenames you entered.
  3. Use the Alternate Text box to enter a text alternative for non-graphical browsers.
  4. Use the Alignment options (Bottom, Middle, Top) to choose an alignment for the image.
  5. Select OK to insert the <IMG> tag with the options you specified.

Inserting Link Tags I: Remote Links

HTML Writer divides links into two categories: remote links that jump to a specified URL, and targets that link to a specific section of a document. (Need a link lesson? Then Chapter 7 "Making the Jump to Hyperspace: Adding Links," is the place you ought to be.) This section covers remote links; targets are covered in the next section.

Here are the steps to follow to insert a remote link in your document:

  1. Enter your link text and highlight it.
  2. Pull down the HTML menu, select the Hyperlinks command, and then select the Remote command. The Hypertext Remote Link dialog box appears, as shown in the following figure.
    You can also click on this button in the toolbar to display the Hypertext Remote Link dialog box.
  3. Use the URL text box to enter the URL you want to go to when the reader selects the link.
  4. Select OK.

HTML Writer inserts a link tag that takes the following form:


<A HREF="The URL you entered">Your link text</A>

Use this dialog box to enter the URL for the link.

Inserting Link Tags II: Targets

Recall from Chapter 7that you can insert an "anchor" inside a hypertext document and then create a link that points to that anchor. This enables your readers to jump to specific sections of the document. HTML Writer uses the term target instead of anchor, but the principle is the same.

To set up the target, highlight the text, select the HTML menu's Hyperlinks command, and then select the Target command. The Hypertext Link Target dialog box appears, as shown below. In the Target Name text box, enter a name for the target (this is the name you'll use later on when you set up a link to the target) and then select OK. HTML Writer inserts an <A> tag of the following form:


<A NAME="The name you entered">Your target text</A>

Clicking on this button in the toolbar will also display the Hypertext Link Target dialog box.

Use the Hypertext Link Target dialog box to enter a name for the target.

The next item on the agenda is to create a link that points to the target you just created. To do this, highlight the link text, select the HTML menu's Hyperlinks command, and then select the Local command. In the Hypertext Local Link dialog box that appears (see below), use the Target Name text box to enter the name of the target, and then select OK. HTML Writer inserts an <A> tag of the following form:


<A HREF="#The target name you entered">Your link text</A>

Clicking on this button in the toolbar will also display the Hypertext Local Link dialog box.

Use the Hypertext Local Link dialog box to enter the name of the target to which you want to link.

Inserting List Tags

Looking to add a list or two to your document? Whether you need a bulleted list, a numbered list, or a definition list, HTML Writer is up to the job. (I took you through lists in more detail back in Chapter 6 "A Fistful of List Grist for Your Web Page Mill.")

To insert the container tags for the list (<UL> and </UL> for a bulleted list; <OL> and </OL> for a numbered list; <DL> and </DL> for a definition list), select the HTML menu's Lists command, and then choose one of the commands (or toolbar buttons) shown in the following table.

Tags
Command
Button
<UL></UL>
Bulleted
<OL></OL>
Numbered
<DL></DL>
Definition

To insert an <LI> tag for an item in a bulleted or numbered list, select the HTML menu's Lists command, and then choose List Item (or press Ctrl+K).

You can also insert the <LI> tag by clicking on this button in the toolbar.

To insert a <DT> tag for a term in a definition list, pull down the HTML menu, select Lists, and then select Term Item. To insert a <DD> tag for a definition in a definition list, select the HTML menu's Lists command, and then select Def. Item.

Clicking on this toolbar button inserts the following sequence of tags: <DL><DT><DD></DL>.

Inserting Character Codes

If you want to insert a code for a non-standard character (i.e., those characters that don't show up on your keyboard), HTML Writer has several methods to choose from. (I went through all this character code rigmarole in Chapter 5 "From Buck-Naked to Beautiful: Dressing Up Your Page.")

To give it a whirl, pull down the HTML menu, select Other, and then choose one of the following commands:

Special Characters  This command displays another cascade menu that contains a few characters, most notably the less than (<) and greater than (>) signs.
Extended Characters  This command displays the Extended Characters dialog box shown below. As you can see, these are all foreign characters. Highlight the one you want and then select OK.

Use the Extended Characters dialog box to pick out the foreign character you want to insert.

ASCII Character  This command displays the ASCII Character dialog box shown in the following figure. Enter the ASCII code of the character you want and then select OK. (See the appendix titled "HTML Codes for Cool Characters" for the ASCII codes of some characters you might want to use.)

In the ASCII Character dialog box, enter the ASCII code of the character you want to insert.

Inserting the Date
It's a good idea to include the current date and time in your page so people know when you last updated the text. You can do this in HTML Writer by selecting the Edit menu's Time/Date command. HTML Writer inserts both the date and the time (feel free to delete the time if you think it's overkill).

Taking the Document for a Test Drive

After you shoehorn some text and HTML tags into your document, you'll probably want to load it into a Web browser to see how things look. Normally you'd have to get out of the program you used to create the document, load the browser, and then load the document. One of HTML Writer's nicest features is that it lets you combine all these steps into a single command. Here's how it works:

  1. Pull down the File menu and select the Test command.
    You can also test the document by clicking on this toolbar button.
  2. If you activated the Options menu's Save on Test command and you haven't saved the document for the first time, the Save As dialog box appears. Enter a name for the document and then select OK.
  3. If this is the first time you've run the Test command, HTML Writer will complain that it can't find your browser, as shown in the dialog box below. (By default, HTML Writer thinks you use Mosaic; don't worry, you can ignore this if you use a different browser.) Select OK to display the Location of Browser dialog box, where Browser is the name of your browser.
  4. Use the Folders list to find the file that runs your browser (e.g. NETSCAPE.EXE), highlight it in the File name list, and then select OK. HTML Writer loads the browser and displays your document.

This alert appears the first time you run the Test command.

Keeping HTML Writer Up-to-Date
Kris Nosack, the developer of HTML Writer, comes out with new versions of the program from time to time. To keep informed of the latest developments, keep an eye peeled on the HTML Writer home page:
http://lal.cs.byu.edu/people/nosack/
There's also an HTML Writer mailing list you can subscribe to for technical help, questions, and to suggest improvements. If you'd like to check it out, send a subscription request to the following address:
html-writer@byu.edu
In the body of the message, just say you'd like to subscribe to the HTML Writer mailing list.

The Least You Need to Know

This chapter showed you how to write HTML the easy way with HTML Writer. Here's a rehash of the main events:

  • Although HTML Writer is free, the programmer would appreciate a small donation to help cover the development costs.
  • You start a new document by selecting the File menu's New command (or by pressing Ctrl+N). To open an existing document, select the File menu's Open command, or press Ctrl+O.
  • Use the Options menu commands to remake HTML Writer in your own image. In particular, I'd recommend turning on Word Wrap, Uppercase Tags, and Save on Test. Also, use the Screen Font command to choose a more readable font.
  • To insert a tag, highlight the affected text (if necessary) and then choose the tag you want from the HTML menu.
  • To see how the document looks in a browser, select the File menu's Test command.