Chapter 17

The Best Commercial HTML Editor:
HotDog

• Getting Your Hands on HotDog
  • Downloading the HotDog File
  • Installing HotDog
  • Installing VBRUN300.DLL
• Serving Up HotDog
• Working with Documents
• Creating an HTML Document with HotDog
• Inserting Tags Directly
• Inserting Objects
  • Inserting an Image
  • Inserting a Remote Link
  • Inserting a Target
  • Inserting a Table
  • Inserting a List
• Inserting Character Codes
• Getting a Sneak Preview of Your Document
• The Least You Need to Know

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.

Getting Your Hands on HotDog

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.

Downloading the HotDog File

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.

Installing HotDog

Here are the steps to follow in order to install HotDog on your computer:

1. In Program Manager (Windows 3.1) or Explorer (Windows 95), double-click on the HotDog file you downloaded. If you grabbed HotDog Standard, the filename is STANDARD.EXE; if your choice was HotDog Pro, the filename is HDP2INST.EXE. (Note that these filenames may change as new versions of HotDog are released.) This starts the HotDog setup program.
2. The first dialog box that appears gives you a short introduction to HotDog. (It also mentions something about needing a file named VBRUN300.DLL. If you don't have this file, the next section shows you how to get it from this book's disk.) Select OK to continue. The Select Destination Directory dialog box appears.
3. Select the drive and directory where you want HotDog installed, and then select OK. The setup program displays the Make Backups? dialog box.
4. Select Yes to tell the program to make backup copies of any files it replaces during the installation. Now the Select Backup Directory dialog box appears.
5. The default backup directory is fine, so just select OK. The setup program starts copying the HotDog files. When it's done, a dialog box appears asking if you want to create a program group (or a Start menu folder, if you're using Windows 95).
6. Select Yes. Another dialog box appears so you can select the program group or folder to use.
7. Make your choice and then select OK. The Installation Complete! dialog box appears.
8. If you're sure you have a copy of VBRUN300.DLL in your Windows SYSTEM directory, you can select Yes to start HotDog. If you don't have the file, select No, instead, and read the next section.

Installing VBRUN300.DLL

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:

1. Insert this book's disk in the appropriate floppy drive.
2. In Program Manager or File Manager, pull down the File menu and select the Run command. If you're using Windows 95, open the Start menu and select Run. The Run dialog box appears.
3. Type the following command:
   a:\expand vbrun300.dl_ c:\windows\system\vbrun300.dll
   You'll need to adjust this command if the disk is in a drive other than a, or if Windows is in a directory other than c:\windows.
4. Select OK. VBRUN300.DLL is extracted from the disk and placed in the SYSTEM directory.

Serving Up HotDog

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:

• If you're using Windows 3.1, double-click on the HotDog icon in the HotDog program group.
• If you're using Windows 95, open the Start menu, select Programs, open the HotDog folder, and then select the HotDog item.

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.

The main HotDog window.

Working with Documents

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:

• Select the File menu's New command.
• Press Ctrl+N.
  Click on this button in the Elements Bar.

If you prefer to open an existing document, here are the methods you use to open a file:

• Select the File menu's Open command.
• Press Ctrl+O.
  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:

• To save the active document, pull down the File menu and select the Save command, or press Ctrl+S.
• To save all the open documents, select the File menu's Save All command.
  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).
 

Creating an HTML Document with HotDog

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:

1. Type in your document text.
2. When you need to insert an HTML tag, either highlight the text you want to affect, or position the cursor where you want the tag to appear, and then choose the appropriate menu command or toolbar button (which I'll talk about in the rest of this chapter).
3. Save the file from time to time, as described earlier.
4. Preview the file every now and then to see how things look in a browser (see "Getting a Sneak Preview of Your Document," below).
5. Repeat steps 2-4 until you've had enough.

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:

• Inserting tags directly into the document.
• Inserting tags by inserting "objects" such as tables and lists.

Inserting Tags Directly

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:

• Drag an item from the list and drop it anywhere inside the document.
• Double-click on an item.
• Use the up and down arrow keys to highlight an item and then press Enter.

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.
 

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:

Inserting Objects

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.

Inserting an Image

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.

Inserting a Remote Link

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:

• Method #1. If you know the URL, the easiest method is to select the Insert menu's Simple URL command (or press F4 for faster service). In the Insert URL dialog box that appears, enter the URL in the URL text box, enter the link text in the Description text box, and then select OK.
• Method #2. If you're just testing your links on your own system, you can insert a link to a document on your hard disk. Pull down the Insert menu and select the Jump to a Document in this System command (or press Ctrl+J). When the Choose File dialog box shows up, highlight the file and then select OK.
• Method #3. For a bit more control over the remote document's URL, try the Insert menu's Jump to a Document on Another System command. (You can also try slamming Ctrl+H on your keyboard or clicking on the External button in the Button Bar.) HotDog tosses the Build External Hypertext Link dialog box on screen, as shown in the following figure.
  The External button from HotDog's Button Bar.

Use this dialog box to build a URL for a remote link.

• This dialog box splits the components of the URL into various controls: a Resource Type drop-down list, and text boxes for Host Address, Port (which is usually left blank), Path, File Name, and Target. (I talked about most of this stuff back in Chapter 7.) Now type your link text into the Description of Link text box and select OK. Stick a fork in it, it's done!
• Method #4. If you want your link to launch some kind of Internet service (such as e-mail or FTP), try the Insert menu's Launch an Internet Service command. (Keyboardists can press Ctrl+Y and mouse mavens can click on the Button Bar's Internet button.) HotDog displays the Create HyperText Link dialog box, shown below. Select the button that corresponds to the service you want the link to run. For example, to create a mailto (e-mail) link, you'd select the Let the User send Mail to someone button. Enter the appropriate data in the new dialog box that appears, and then select OK.
  The Internet button from HotDog's Button Bar.

Use this dialog box to select which Internet service you want the link to launch.

Inserting a Target

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.

Use the Select Hypertext Target dialog box to select the name of the target to which you want to link.

Inserting a Table

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:

1. Pull down the Insert menu and select the Table command. Those in a rush might want to try pressing Ctrl+T or clicking on the Button Bar's Table button, instead. HotDog heaves the Create Table dialog box onto the screen. The figure below shows a completed version of this dialog box.

   The Table button.

2. If you want to use a caption, enter it in the Caption text box and then choose either the TOP or BOTTOM option.
3. Enter the total number of columns in the Columns box, and the total number of rows in the Rows box.
4. If you want one or more columns to be headings, enter the number in the Heading Cols box. If you want one or more rows to be headings, enter the number in the Heading Rows box. (Note that these values don't affect the total number of rows or columns.)
5. If necessary, use the Width and Height text boxes to enter a width and height for the table.
    

   HotDog's Create Table dialog box makes it a breeze to create even the most complex tables.

6. If needed, enter a value for the Cell Padding and Cell Spacing.
7. Enter the border width you want to use in the Border Width text box.
8. The Sample Table area is a grid that shows the number of rows and columns you specified in Step 3. For each cell, select it (either by clicking on it or by using the arrow keys to move around) and enter the data that you want to appear in the cell.
9. When you're done, select OK to insert the table in all its glory.

Inserting a List

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.

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

Getting a Sneak Preview of Your Document

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:

1. Pull down the File menu and select the Preview Document command. (You can also try pressing F5 or clicking on the Preview button.) If this is the first time you've run this command, HotDog complains that there's no default browser.
   The Preview button.
2. Select OK to display the Choose Browser dialog box.
3. Find and highlight the .EXE file that starts the browser program and then select OK. HotDog loads the browser and displays your document.

The Least You Need to Know

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:

• To get HotDog (remember that you have to pay for HotDog if you plan on using it past the 30-day trial period), head for the following URL:

http://www.sausage.com/download.htm

• 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.
• To insert a tag directly, highlight the affected text (if necessary) and then choose the tag command you want from the Tags menu. In the dialog box that appears, double-click on the tag or drag it into the document.
• To insert an object such as an image, link, or table, select the appropriate Insert menu command and then fill in the dialog box that appears.
• To see how the document looks in a browser, select the File menu's Preview Document command, or press F5.

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