Chapter 16

The Best Free HTML Editor:   HTML Writer

 CONTENTS

• Cranking Up HTML Writer
• Getting a Document Onscreen
• It's a Setup: Getting HTML Writer Ready to Go
• Creating an HTML Document with HTML Writer
  • Inserting Document Tags
  • Inserting Style Tags
  • Inserting Paragraph Tags
  • Inserting Image Tags
  • Inserting Link Tags I: Remote Links
  • Inserting Link Tags II: Targets
  • Inserting List Tags
  • Inserting Character Codes
• Taking the Document for a Test Drive
• The Least You Need to Know

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.

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:

• If you're using Windows 3.1, double-click on the HTML Writer icon in the CIG-HTML program group.
• If you're using Windows 95, open the Start menu, select Programs, open the CIG-HTML folder, and then select the HTML Writer item.
• If you don't see either the CIG-HTML program or folder, use File Manager (in Windows 3.1) or Explorer (in Windows 95) to find the directory where HTML Writer is installed, and then run the HTMLWRIT.EXE file.

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:

• To start a new HTML file, select the File menu's New command, or press Ctrl+N.
• To open an existing HTML file, select the File menu's Open command (or press Ctrl+O), select the file from the Open dialog box, and then select OK.

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.)

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:

• If the text you want to mark already exists, highlight the text and then apply the tags as described later in this section. (Tip: you can highlight a single word by double-clicking on it.) In this case, HTML Writer applies the appropriate start tag (e.g., <I>) to the left of the highlighted text and the corresponding end tag (e.g., </I>) to the right of the text.
• If the text doesn't exist, just apply the tag where the text will appear. HTML Writer adds both the start tag and the end tag side by side (e.g., <I></I>), so you just insert your text between them.

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).

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.

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:

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.

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

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.
3. You can also click on this button in the toolbar to display the Hypertext Remote Link dialog box.
4. Use the URL text box to enter the URL you want to go to when the reader selects the link.
5. Select OK.

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

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

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>

 © 2002 -  2009 LBCInformation Corporation. All rights reserved Eng.Hanna Ata Lahoud.