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 17 -- The Best Commercial HTML Editor: HotDog

Chapter 17

The Best Commercial HTML Editor:


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:

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:

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:

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:

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:

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.

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

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
Tags Inserted
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
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 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:

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

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.

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.

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: