 | ||||
 | ||||
 | ||||
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> |
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.
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. |
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.
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.
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:
The next few sections expand on step 3 by showing you how to insert the various HTML 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.
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).
| ||||
| ||||
| ||||
| 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.
| Tags | Command | Button |
| <H1></H1> |  |
|
| <H2></H2> |  |
|
| <H3></H3> |  |
|
| <H4></H4> |  |
|
| <H5></H5> |  |
|
| <H6></H6> |  |
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:
| Tags | Command | ||
| <P> | Paragraph |  | |
| <BR> | Line Break |  | |
| <HR> | Horizontal Rule |  |
|
| <PRE></PRE> | Preformatted |  |
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:
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.
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:
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.
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.
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.
 | ||
 | ||
 |
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>.
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). |
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:
You can also test the document by clicking on this toolbar button.
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. |
This chapter showed you how to write HTML the easy way with HTML Writer. Here's a rehash of the main events:
