Click on this button in the Elements Bar.
bandwagon \ noun, 1. A cause that attracts increasing numbers of adherents. 2. A current trend.
We've seen bandwagons come and go-hula hoops, Pet Rocks, and Barney-bashing come to mind-but the World Wide Web may turn out to be the biggest of them all. Everywhere you look, companies and individuals-elbows akimbo-are looking to carve out some sitting room on the Web bandwagon. Most of them just want to make a splash on the Web, but there's no shortage of opportunists who'd like to make a buck as well. So although the Internet has traditionally been a place where good programs could be had at a great price (i.e., free), lots of software developers are thumbing their noses at tradition and charging for their creations.
There's nothing inherently wrong with this (it's just good old-fashioned capitalism, after all), but as a consumer you want to get the biggest bang for your buck. In this chapter, we'll look at a commercial HTML editor that will give you a big-time bang and then some. It's called HotDog and it's one of the nicest HTML editors around. (Actually, the HotDog folks call their products "Web editors.") HotDog is 100 percent all-beef and packed with features that are sure to make your HTML chores easier. Although a single chapter isn't nearly enough to do justice to all of HotDog's features (that would require an entire book), I'll try to cover the most important options so you can get HotDog happening with a minimum of fuss and bother.
The HotDog vendor is Sausage Software, and you'll need to download a copy of the program from their Web site (see the figure below). Here's the address:
http://www.sausage.com/download.htm
You can download HotDog from this Web page.
The first decision to make is which version of HotDog you want to try. HotDog Standard is a great little program that should satisfy the needs of most Web authors (it's the version I'll be talking about in this chapter). HotDog Professional is the high-end version that includes nifty features such as unlimited file size, multiple levels of Undo, a spelling checker, an HTML syntax checker, and the ability to open and save multiple documents (called a project) at once. In either case, you can use the program free for 30 days, after which it will no longer work. If you'd like to keep on using HotDog, you'll need to fork over $29.95 for HotDog Standard, or $99.95 for HotDog Professional.
To download the program from the Sausage Software site, make sure you're viewing the Web page shown above, and then select either the HotDog Standard link or the HotDog Professional link. These links take you to the Sausage FTP server, which will automatically send the file to your machine. Your browser may ask you what you want to do with the file. Select the Save to Disk option, and then select a location on your hard drive for the file.
Here are the steps to follow in order to install HotDog on your computer:
To run properly, HotDog requires a separate file called VBRUN300.DLL. You need to install this file in the Windows SYSTEM directory before starting HotDog. Why doesn't HotDog include this file? Well, lots of other programs use VBRUN300.DLL, so many people already have it installed. It's a big file (about 400K), so the HotDog folks decided to leave it out to reduce the download times. If you don't have this file in your SYSTEM directory (which is usually C:\WINDOWS\SYSTEM), follow these steps to extract it from this book's disk:
With HotDog now safely ensconced on your hard drive, you're ready to take your first bite. If you didn't start HotDog after the installation, you can crank it up by using one of the following techniques:
The first time you run HotDog, you'll see a screen titled The Boring Legal Stuff. You can read this mumbo-jumbo if you feel brave enough, but I recommend you just select the I Agree button and get the heck out of there.
The second time you run HotDog (and each subsequent time during your 30-day trial period), a "nag" screen appears to let you know how many days you have left to evaluate HotDog (assuming, of course, you haven't yet forked out the hard-earned cash to register HotDog). Select OK to continue loading.
You'll eventually see the Welcome to HotDog! dialog box. You can safely ignore most of the options in this window (since you already know about HTML and I'm about to tell you how to use HotDog). If you'd rather not be bothered by this screen in the future, activate the Don't show this screen again check box. To get to HotDog's main screen at long last (see below), select the Use HotDog Now option.
As you can see in the figure above, HotDog is kind enough not only to load a new HTML document for you at startup, but also to populate the document with the basic HTML tags. How thoughtful! (Note, however, that you'll need to replace the default title with your own invention.) Don't see a new document? Bummer. You can get one by using any of the following methods:
Click on this button in the Elements Bar.
| Opening a New File Automatically |
If HotDog doesn't automatically start a new file for you at startup, you can change that quickly enough. Pull down the Tools menu, select Options, and then select the Saving/Starting tab in the Options dialog box that appears. Activate the Open New Document when HotDog starts check box, and then select Save Options. |
If you prefer to open an existing document, here are the methods you use to open a file:
Click on this button in the Elements Bar.
In the Open File dialog box that appears, highlight the file you want to work with and then select OK to open it. Note that HotDog displays the name of each open file in the Documents Bar at the bottom of the screen (see the figure below). You can select a file by clicking on its name in the Document Bar, or by selecting it from the Window menu.
Here are your options for saving your files:
Click on this button in the Elements Bar to save the active document.
Conveniently, HotDog marks documents that have unsaved changes
by placing a red "X" beside the file's name in the Documents
Bar (see the figure shown earlier for an example).
| HotDog Doesn't Like Long Filenames |
If you're using HotDog 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 File dialog box. For example, the filename Bad Craziness.htm appears as badcra~1.htm, and homepage.html appears as homepa~1.htm. |
Since HotDog is really just a text editor with a whole whack of HTML bells and whistles thrown in for good measure, it's extremely easy to use. You simply type your 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 2 by showing you how to insert the various HTML tags. I'll divide everything up into two separate chunks:
The most straightforward way to toss a tag into your document is to use HotDog's Tags menu. The commands on this menu produce dialog boxes that give you a list of all the available tags. You select one of the items from the list, drag it into the document, and HotDog dutifully inserts the appropriate tag. For example, if you select the Font command in the Tags menu, you'll see the Tags - [Font] window shown in the following figure.
Use the Tags-[Font] window to add font-related tags to your document.
As you can see, this list includes items for all the font-related tags and attributes, including Bold (<B>) and Italic (<I>). Now you either position the cursor where you want the tags to appear, or else highlight the existing text you want to affect. From here, you can insert the tags by using any of the following three techniques:
Note that the window stays on screen after you've inserted a tag,
so you're free to insert tags until you're blue in the face. (You
can use your mouse to adjust the position of the cursor inside
the document, if necessary.) When you're done, just close the
window by double-clicking on the icon in the upper-left corner,
by clicking on the Close button (Windows 95 only), or by
pressing Alt+F4.
| Tag City |
HotDog also has a Tags window that displays a monster list of all the available tags. To check it out, pull down the View menu and select the Tags command, or press F6. You can also display the Tags window by clicking on the Button Bar's Tags button. |
You can also insert tags directly by using the buttons on the Elements Bar. Just position the cursor appropriately and then click merrily away. Here's a rundown of the various buttons you can use:
| Tag Type | ||
| Bold |  |
|
| Italic |  |
|
| Underline |  |
|
| 1st-level heading |  |
|
| 2nd-level heading |  |
|
| 3rd-level heading |  |
|
| 4th-level heading |  |
|
| 5th-level heading |  |
|
| 6th-level heading |  |
|
| Image alignment attribute |  |
|
| Image alignment attribute |  |
|
| Image alignment attribute |  |
|
| Center text |  |
|
| Numbered list |  |
|
| Bulleted list |  |
|
| Definition list |  |
|
| Paragraph |  |
|
| Line break |  |
|
| Horizontal rule |  |
| Font Formatting Foofaraw |
By default, HotDog inserts the <STRONG> tag for bold and the <EM> (emphasis) tag for italics. If, like me, you prefer the traditional <B> and <I> tags, you can easily bend HotDog to your will. Pull down the Tools menu, select the Options command, and deactivate the Use Strong and Emphasis, not Bold and Italics check box. Click the Save Options button to put the new setting into effect. Note that HotDog's Format menu boasts a number of commands that enable you to insert tags that format text. Most of the commands simply insert tags directly into the document. These include the commands Bold (keyboard shortcut: Ctrl+B), Italics (Ctrl+I), Underline (Ctrl+U), Blinking, and Center. If you want to insert multiple font tags at once, try the Font command (or press F2). |
Inserting individual tags directly is fine for simple tags such as bold and paragraph. However, if you're working with more complex HTML constructions-such as tables and links-it can be time-consuming and it's not all that much easier than coding HTML by hand. (Except, of course, for the major bonus of not having to memorize all those tags!)
To make your Web weaving easier, HotDog offers a better way to build more sophisticated objects. The idea is that you use a dialog box to define how you want the object to appear, and then HotDog handles the dirty work of gathering up the appropriate tags and attributes and inserting them in the document. The next few sections show you how this works for images, links, tables, and lists.
As you learned back in Chapter 8 "A Picture Is Worth a Thousand Clicks: Working with Images," the <IMG> tag that inserts a graphics file has quite a few options. Toss in the Netscape extensions to the <IMG> tag (see Chapter 10), and you've got quite a load to work with. To make the <IMG> tag easier to figure out, HotDog has a dialog box that spells out the various options. To see it, select the Insert menu's Image (Advanced) command, or press Ctrl+M. The Image Properties dialog box appears, as shown below.
Use the Image Properties dialog box to specify the details for your <IMG> tags.
This dialog box is weighed down with all sorts of options, but there are only a few you need to worry about:
Image File Enter the name of the graphics file.
Alternate Description Enter a text alternative for non-graphical browsers.
Width Enter the width, in pixels, of the image (this is a Netscape extension).
Height Enter the height, in pixels, of the image (this is also a Netscape extension).
Alignment Select an alignment attribute.
When you're done, select OK to insert the <IMG> tag with the options you specified.
To insert an image as a link, select the Insert menu's Image command, or click on the Image button in the Button Bar. In the Insert Image dialog box that appears, enter the image's filename in the Image File text box, enter the URL of the linked document in the Document to Launch text box, and enter a text alternative in the Alternate Description text box. When you're done, select OK to insert the link.
The Image button from HotDog's Button Bar.
HotDog enables you to insert two kinds of links: remote links that display a different document and targets that jump to another section of the current document. (A complete link lesson can be found in Chapter 7 "Making the Jump to Hyperspace: Adding Links.") This section covers remote links; targets are covered in next section.
The HotDog programmers, bless their nerdy hearts, have provided you with no less than four ways to insert a remote link in your document:
The External button from HotDog's Button Bar.
Use this dialog box to build a URL for a remote link.
The Internet button from HotDog's Button Bar.
Use this dialog box to select which Internet service you want the link to launch.
Recall from Chapter 7 that 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. HotDog uses the term target instead of anchor, but the principle is the same. To set up the target, highlight the text and select the Insert menu's Hypertext Target command. (Ctrl+G is the keyboard shortcut, and Target is the Button Bar button of choice.) In the Enter Target ID dialog box that appears, enter a name for the target and then select OK. HotDog inserts an <A> tag of the following form:
<A NAME="The name you enter">Your target text</A>
The Target button.
Your next task is to create a link that points to the target you just created. To do this, select the Insert menu's Jump Within this Document command (you can also try Ctrl+K or the Internal button). In the Select Hypertext Target dialog box (see below), highlight a name in the Hypertext Target ID list, enter the link text in the Description of Link text box, and then select OK. HotDog inserts an <A> tag of the following form:
<A HREF="#The target name you enter">Your link text</A>
The Internal button.
As you learned the hard way back in Chapter 11, "Table Talk: Adding Tables to Your Page," tables are complex beasts compared to most HTML tags. However, HotDog, with its usual winning way, simplifies table design and makes it almost pleasurable. Here are the steps to follow to create a table with HotDog:
The Table button.
HotDog's Create Table dialog box makes it a breeze to create even the most complex tables.
Looking to add a list or two to your document? Whether you need a bulleted list, a numbered list, or a definition list, HotDog is up to the task. (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 Insert menu's List command (or press Ctrl+L). In the Create List Element dialog box, choose the List Type (Bulleted, Numbered, or Definition List), choose the Type of bullets or numbers you want, and then select OK.
If you want to insert a code for a non-standard character (i.e., those characters that don't show up on your keyboard), HotDog has an Entity List window (see below) that lists all your choices. To display this window, select the View menu's Special Characters command, or press F7, or click on the Charset button in the Button Bar.
The Charset button.
To insert a character, either double-click on the appropriate list item, or highlight the item and press Enter. When you're done, close the window by double-clicking on the icon in the upper-left corner, by clicking on the Close button (Windows 95 only), or by pressing Alt+F4.
Use the Entity List window to pick out
the characters 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 HotDog by selecting the Insert menu's Special command, and then selecting the Date/Time command. In the Insert Date/Time dialog box that appears, select the date format and then select OK. |
When you slap up some text and tags, you'll likely want to load the document into a Web browser to see if things look okay. Instead of switching to your browser and loading the document, HotDog lets you combine these steps into a single command. Here's how it works:
The Preview button.
This chapter showed you how to cook up a tasty HTML meal using the HotDog Web editor. Here's a recap of some of the ingredients we used:
http://www.sausage.com/download.htm
![Use the Tags-[Font] window to add font-related tags to your document.](f17-3.gif){kind=link}
