Copyright ©1996, Que Corporation. All rights reserved. No part of this book may be used or reproduced in any form or by any means, or stored in a database or @retrieval system without prior written permission of the publisher except in the case of brief quotations embodied in critical articles and reviews. Making copies of any part of this book for any purpose other than your own personal use is a violation of @United States copyright laws. For information, address Que Corporation, 201 West 103rd Street, Indianapolis, IN 46290 or at support@mcp.com.

Notice: This material is excerpted from Special Edition Using HTML, 2nd Edition, ISBN: 0-7897-0758-6. This material has not yet been through the final proof reading stage that it will pass through before being published in printed form. Some errors may exist here that will be corrected before the book is published. This material is provided "as is" without any warranty of any kind.

Chapter 30 Other HTML Editors

As you might've guessed, there are literally scores of HTML editors around. Netscape Gold, Microsoft Internet Assistant, and Quarterdeck WebAuthor-covered in Chapters 27, 28, and 29, respectively- are just the big names. Because the World Wide Web is so popular nowadays, a lot of people have taken a shot at making @HTML programs. These programs range from being barely functional to feature laden.

In this chapter, you'll learn about:

@HTML editors can take the form of either a stand-alone program or an add-on program. They can also just show you HTML codes or give you a rough idea of what the page will look like. Whatever shape they take, however, HTML editors all fulfill the same basic function: they help you make a home page. How well they help you is another matter.

Because there's such a tremendous number of editors available, you can take your time deciding which one is best for you. If an editor doesn't meet your needs or just plain doesn't feel right, then throw it out. When choosing an HTML editor, consider the following questions:

Ultimately the decision is yours, but I'll cover some of the good and bad points of each editor to help you choose the right one.

Stand-Alone Editors

A stand-alone @HTML editor is a separate program that doesn't depend upon another program. Put another way, a stand-alone program is a complete HTML editing package. You don't need to have a program already installed on your system to use a stand-alone editor. These are probably the most prevalent types of editors around. All it takes to make such a program is a little @HTML knowledge and a little @programming experience. The programmers who create these stand-alone editors must decide on their look and feel: the button layout, which menu bar items go where, and so forth. Stand-alone editors are typically @shareware and written in the author's spare time.

Stand-Alone Editors' Strengths

A particularly strong reason for using a stand-alone editor is that it's shareware. This is good because most shareware registration costs are under $50. Also, they are generally the first ones to undergo changes, which is a benefit for you because the HTML standard is constantly evolving.

Shareware authors are typically one-man operations and can give you an updated editor usually within a week. As soon as they hear about a new HTML tag, they put it in, recompile the program, and make it available to everybody. All you have to do is check in regularly for the latest update. On the other hand, it takes a lot of time for a company to learn about the new standard, update their editor, update the manual, and inform you. As a general rule, therefore, most shareware stand-alone editors will be more up-to-date than anything else.

Another good reason to use stand-alone editors is that you don't need another program to use it. This makes it easier if you really like an editor and want your friends to use it. You don't need to make sure they have a particular program; you just point them to an FTP site. Stand-alone editors are also useful if you want to uninstall the HTML editor. Although some uninstall programs will watch for installation of program executables, they might not catch the installation of new libraries for an existing program.

Stand-Alone Editors' Weaknesses

Of course, there's got to be some drawbacks to using stand-alone editors or else that's all that would be available. Because they are self-contained programs, the user interface might be weird to you. Although you can overcome this after using the program for a while, you might not have that time if you want to jump right in and start writing HTML code. An unfamiliar user interface for a stand-alone editor might slow you down.

Another reason not to use a stand-alone editor is that it could take up a substantial amount of disk space. Because stand-alone programs are self-contained packages, they might need to install their own custom runtime libraries. Although you might already have some of these on your system, there's no guarantee that you will. Further, you're going to need disk space for any help files or related text files for showing you how to use the program. Although you'll still need some disk space for add-on modules, there is less overhead. The @libraries needed for a program are already loaded on your system, as are the useful text and help files.

Add-On Editors

An add-on editor is a module or program that connects to an existing piece of software. Typically, the only people who can create extensive add-on modules are the authors themselves. Because most @shareware programmers would just write a new program for new functionality, add-ons aren't usually done by the average person. Typically, the @software companies with large user bases write add-on modules. But just because an established program has added @HTML functionality doesn't mean you should go out and use it.

Add-On Editor's Strengths

Because most add-on modules or programs are provided by companies, they typically provide some form of support for their add-ons. Although they might not necessarily provide technical support, you can at least give them feedback. You also know that the add-on product will probably be upgraded in the future. The fact that it's a company backing the add-on-and not an individual-is a strong reason for using an add-on editor.

A very good reason to use an add-on HTML editor is that it's an extension of existing software. Because it's extending the functionality of a program you already have, it'll be easier to use immediately-you won't have to learn new buttons or menu bars with an add-on module.

Add-On Editor's Weaknesses

Add-on modules aren't the panacea of @HTML editors, and there's a number of good reason for it. If you have an old or under-powered machine, avoid add-on modules. You may already be waiting a while for some programs to start up. With an add-on editor, you're going to lengthen that wait. For example, if you find yourself waiting for a word processor to launch, avoid getting an HTML add-on for that word processor.

Another reason to avoid an @HTML editor that is an extension to an existing program is the user interface. Although the buttons and menus may be familiar, the add-on module's behavior may not be what you expect. Just because it's an extension to a program doesn't mean the program will know about its interface. You might not be able to control the way text is displayed or other subtle nuances that may annoy you.

Tags-Only Editors

There's more to an HTML editor than just whether it's a separate program or not. You have to decide how that editor enables you to modify your home page. An HTML editor that is a tags-only editor is one that shows you the actual HTML tags. That is, it doesn't show you what your home page will look like, just the codes being used. You're essentially programming your home page on the HTML-source level with a tags-only editor. Because you're dealing with a home page in its raw form, most HTML editors are similar to text editors. The majority of HTML editors available are tags-only editors.

Strengths of Tags-Only Editors

There are a number of good reasons that favor the use of tags-only @HTML editors. For one thing, tags-only HTML editors are usually the first programs for which new tags are supported. Because most tags-only editors simply dump out the start and end elements for @HTML tags, it's easy to accommodate new HTML tags. When new HTML start and end tags are finalized, tags-only editors can be quickly updated. They don't have to worry about what the new tags look like; they just need to know what they are.

Another good reason to use HTML tags-only editors is because they're generally faster for navigation. This is especially important if you're on a slow machine or you have a large home page. Because most tags-only editors do no HTML interpretation, they're mainly concerned with getting keyboard input and displaying text. This makes scrolling through a home page and text manipulation tasks much faster on tags-only editors.

Weaknesses of Tags-Only Editors

For all the good reasons you can find for using tags-only editors, there's an equal number of reasons not to. @HTML editors that are tags-only are very bad for newcomers to @HTML coding. People new to @HTML have no concept of what the tags do, how they look, and how they behave. Because tags-only editors do nothing to get around any of these issues, they're not good vehicles for learning how to write HTML code. Very few people unfamiliar with @HTML would be willing to fire up a tags-only editor and a browser just to see what each tag does. Tags-only editors are typically for people who already know HTML and don't want to keep typing tags.

Another reason to avoid tags-only editors is that most of them have no form of syntax checking. Because tags-only editors are only concerned with the tags, they really don't care how they look. Those tags-only editors that do syntax checking are mixed bags; the majority of them start up a browser with the current HTML document. This is little better than having you start up the browser yourself, saving the current HTML document, and loading it in the browser.

WYSIWYG Editors

WYSIWYG (What You See Is What You Get) editors are a good alternative to tags-only HTML editors. These HTML editors are programs that show you what the page will actually look like. The interpretation for the @HTML code is left up to the programmers, but often the tags are correctly rendered. Often, these editors shield the @Web author from the raw @HTML tags. There are many reasons for using these editors.

Strengths of WYSIWYG Editors

If you're a person new to HTML tags, page layout design, and the like, WYSIWYG editors should be your first choice. Because they show you what the rendered page will look like, you can get an idea of how to design your home page. Instead of worrying about missing starting or ending tags, WYSIWYG editors take that responsibility away from you. Just select an HTML tag to use, type the text for that style, and move on. You don't need to make guesses on how the different HTML tags will look-you'll see it right there.

Another reason for using WYSIWYG HTML editors is because they're self-contained packages. What I mean by this is that you don't necessarily need a browser when making your home page. Granted, if you know your HTML code, you won't need a browser anyway, but most people new to HTML aren't so fortunate. Because WYSIWYG HTML editors show you what the page will look like, you don't need to start a browser to see it. If you're running an under-powered machine, this is a great alternative for you. You won't need to start another application and use up more of the system's resources.

Weaknesses of WYSIWYG Editors

As a beginner, you might be thinking that WYSIWYG editors are great for learning. This is true, but there are a number of things wrong with them. Most of these faults lie with the inherent nature of WYSIWYG editors doing @HTML interpretation. For one thing, these types of editors tend to be rather slow and sluggish. The program has to spend a lot of @processor time interpreting @HTML code and then displaying it correctly on the screen.

For people with under-powered computers, WYSIWYG editors can be exceedingly slow. If you're not using at least a 486-level computer and 8 megs of RAM, you're not using a reasonably powerful computer. Rather than spending time creating your home page, you could be spending a lot of time listening to your hard drive crunching away. Not only is this bad if you're impatient, but all that activity adds to the wear and tear of your equipment.

Another problem with @HTML editors that are WYSIWYG is that they won't always have the latest tags. Because the editor must do the correct interpretation and displaying of HTML tags, the programmer must know what they look like and how they behave with other tags. This research process could take a programmer more than a few weeks to accomplish in his spare time.

HotDog

HotDog by @Sausage Software is a much ballyhooed stand-alone tags-only editor for @Windows 95 (see fig. 30.1). Like most anything with so much hype, the big question is, Does it deserve all the praise? In HotDog's case, sadly, no. That's not to say it's a bad editor, just that it's not an exceptional editor. HotDog is a capable @HTML editor trapped in a muddled user interface. It provides support for HTML 2, HTML 3, Netscape's extensions, and even Microsoft's extensions.

Fig. 30.1

HotDog is a very popular and well regarded stand-alone @HTML editor.

HotDog is useful for converting existing @HTML documents into plain text. Simply load the HTML file into HotDog and save it as a text file. This will preserve all the document formatting of the home page without the HTML code. This is useful if you want convert a large batch of HTML documents into plain text.

Getting and Installing HotDog

HotDog is available in two versions, the Standard version and the Pro version, from http://www.sausage.com/. The @Pro version offers a pseudo-WYSIWYG viewer, spell checking, and extra @configurability. Also, when you run the Pro version under Windows 3.1, it uses buttons similar to those in Windows 95. Unfortunately, this slows the whole program tremendously, and it is uneven in its attempt to simulate Windows 95. The @Standard version is a much better buy at $29.99 than the @Pro version, which goes for $99.99. HotDog's sleek and polished look makes it a good editor for most people new to HTML tags.

Once you get the version of HotDog you want, installing it is a simple matter. Using Windows 95's Explorer, simply find the program you just downloaded. Double click its icon, and you'll be presented with Sausage Software's installation utility. It allows you to specify where you want to install the program to. Also, you'll be asked if you want to make a backup copy of files that it will modify. This is a good idea if you're evaluating HotDog, as it'll let you restore your system to the way it was before installing it. After it's done copying the files into the necessary locations, you can start-up HotDog.

Moving Around

The general navigation of HotDog is intuitive as it follows general cursor conventions. The arrow keys move the cursor in the appropriate directions. Unfortunately, there's almost no good thing you could say about HotDog's user interface. There are a number of ways to insert tags, but they won't necessary behave the same way. Some buttons appear to recede when pressed while others don't. Some buttons that insert @HTML tags are controlled by user preferences, while other methods of inserting the same tags aren't.

Perhaps most troubling of all, however, is the way tags are inserted by HotDog into your @HTML document. The built-in facility for most HTML tags isn't quite like other HTML editors. With other editors, the tags are automatically put in the correct place around the selected text. With HotDog, when a button to insert a tag is pressed, it acts more like a keyboard macro: cursor commands are issued, keys are typed in, and cut and paste features are used. Although this may not seem to be a big deal, the problem is that all of these HotDog-issued commands are stored in the Undo buffer. As a result, if you accidentally insert a tag, you can't undo one operation; you have to undo a number of operations. The buttons behaving as macros is also a problem when you change your mind in creating an HTML element. There are some buttons in HotDog, that when you cancel out of them, will dislocate the object you had selected.

One bright spot in HotDog's favor is its versatility. It has many home page elements that are mere mouse clicks away. You can have a floating window with a complete list of HTML tags (see fig. 30.2). When you double click one of the tags, it's automatically inserted into the document for you. You can similarly have floating windows for specific groups of @HTML tags, such as heading, document, and body tags.

Fig. 30.2

You can easily insert HTML elements by double clicking in this floating window.

Working With Links

The most common element you'll want to put into your home page, aside from regular text, is a hyperlink. You can easily create hyperlinks by highlighting the text you want as a link and then clicking the button labeled External (Ctrl+H). This will bring up a dialog box in which you just fill out the information. If you're unsure of the syntax of URL's, you can also create a link through more friendlier means. Instead of clicking the External button, click the Internet button. This will bring up a dialog box (see fig. 30.3), where you can select the resource you want to link to. You'll then be asked for the necessary information for that resource.

Fig. 30.3

You can easily link the selected text to other Internet Resources. Just pick the resource you want to link to.

If you want jumps to go to another location in your home page, you can do that too. Internal links are easily created. First, define your destination spot: put your cursor where you want the destination point to be, click Target, and type the name of the destination when you're prompted for it. Next, highlight the text that you want to jump to the destination and click Internal (Ctrl+K). You'll get a dialog box with a list of existing destinations (see fig. 30.4). Just choose the one you want, and the internal jump is automatically done for you.

HotDog's linking facility seems to have problems when you're running more than one program. Sometimes, when you're cancelling out from creating a link, HotDog will switch over to another program. This happens even when HotDog is fully maximized.

You cannot create an internal jump until after you've defined the destination. There is no provision in HotDog for jumping to an unspecified destination. This will cause problems for those people who layout their home pages ahead of time.

Fig. 30.4

Find the internal destination point you want, and select it.

Forms and Tables

Eventually, you'll want to put more sophisticated elements in your Web page. You can easily put in forms and tables with HotDog, although support is uneven. <FORM> is probably the weaker of the two advanced HTML tags to be supported. When you click the Form button, you'll be presented with a list of forms you can create (see fig. 30.5). Each form brings up a different set of required attributes to be filled out. For whichever form you choose, enter as much information as you can for each field.

Fig. 30.5

HotDog enables you to put in many different forms.

HotDog's Forms support is extremely unstable. Too many times while telling HotDog to create the form, it will crash.

Tables, on the other hand, are incredibly well done and supported. HotDog provides possibly the most impressive interface for creating tables. Simply click the Table button (Ctrl+T) and you'll be given a dialog box (see fig. 30.6). You can change the Caption, the Columns, and the Rows just by typing the appropriate value. As you change the column and row values, the table at the bottom of the dialog box changes to match the new values. Not only do you see exactly what the dialog box will look like, you can also type the values for it. Just click the table cell you want to put data into, and type away.

Fig. 30.6

You can create tables and the data they'll hold with this dialog box.

Advanced Elements

Various other advanced @HTML elements are also supported by HotDog. Creating drop caps is very easy for new HTML authors: simply highlight the letter you want enlarged, choose Format, Big First Letter. You can define the colors for the foreground @font or link by selecting Format, Document. Click the Graphics/Colors tab, and you'll see a list of fonts and links and their current colors (see fig. 30.7). Click one of those entries, and change the color by using the Red, Green, and @Blue sliders.

Fig. 30.7

Link and text colors are changed through this dialog box.

Creating lists in HotDog requires a bit of @HTML knowledge. When you tell HotDog to create a list, it'll generate the start and end markers for the list tag. It will also make the appropriate code for the first list item. It's up to you to keep typing the other list items.

Kenn Nesbitt's WebEdit

If you use Windows 95 and already know the tags, try Kenn Nesbitt's WebEdit. It's a great and versatile tags-only HTML editor (see fig. 30.8). Sporting two toolbars, a large collection of HTML tags are available for your use. This program supports HTML 2 and HTML 3, as well as Netscape and Microsoft extensions to HTML. This is an @HTML editor intended for the professional and people very well versed in @HTML tags. This is probably the best HTML editor around for Windows 95.

Fig. 30.8

Kenn Nesbitt's WebEdit is a feature-loaded, tags-only HTML editor.

Getting and Installing WebEdit

You can get Kenn Nesbitt's WebEdit from http://www.nesbitt.com/ for a free 30-day evaluation. If you like it, you can buy it for $39.95 for educational users or $79.95 for business use. It comes on two disks and takes approximately five megabytes of disk space for a full installation. This is easily the best HTML editor available.

Installing WebEdit is a simple matter of double-clicking the installation program. You'll be prompted for the directory that you want to install WebEdit to. Once it's done copying all the files, you'll be asked which language lexicons you want. These lexicons are basically dictionaries to be used by WebEdit's spell-checker. The full version of WebEdit comes with dictionaries for @American English, @British English, French, German, Italian, Spanish, and HTML Tags.

The WebEdit Toolbars

Of the two toolbars, the top one is used for all file related tasks. The icons are pretty self-evident, enabling you to start a new home page, open an existing @HTML document, and save the current or all loaded files. The print, cut, copy, paste, and delete icons are obviously visible. The binoculars represent not just the find capability, but also the ability to search and replace.

For most people, however, the bottom toolbar is the one they'll use the most (see fig. 30.9). This is the toolbar where the HTML tags are most accessible. Whenever you select any of the buttons in the bottom toolbar, you're given a list of choices to select from. The server side includes (SSI) tags are the few @HTML elements that aren't available through this @toolbar, but are available through the menus. Simply choose Insert, and the selecting SSI+.

Fig. 30.9

Most of the HTML tags you'll ever need are hiding behind this toolbar.

Creating Links

Everything in WebEdit is represented in text at the raw @HTML code level. This makes everything, from text to images, easy to create hyperlinks for. It's a simple matter of highlighting the text or image tag, or both, and clicking the Anchor/Link button (Ctrl+L). This will bring up the Anchor/Link dialog box where you can specify any link-related attributes you want (see fig. 30.10). The drop-down list in some of the fields hold a list of recently accessed values. Creating destination points for internal hyperlink jumps is a simple matter of filling out the @Name field.

Fig. 30.10

Links of any sort are easy to create with WebEdit; use this dialog box.

If you're not familiar with URLs and how to build them, click the URL button. This will bring up WebEdit's URL Builder, which helps you create a URL (see fig. 30.11). People new to @HTML authoring will find this dialog box to be invaluable. You don't need to know how many slashes to add, when to use a colon, and whatnot. WebEdit takes care of all of that in this dialog box.

Fig. 30.11

The @URL Builder is a great feature for new @Web authors to learn the @URL structure.

HTML Tags

All other tags available in WebEdit-for tables, font styles, or whatever-behave the same. You can insert them into the document by one of two ways. The first way is to highlight the text that you want to apply a particular tag to and then select the appropriate tag. The text will be positioned correctly within the starting and ending markers of that particular element. The second method is to simply select the appropriate tags. For HTML containers, WebEdit will put out the start and end markers for the tag and then position the cursor in between. For other @HTML elements that don't contain anything, it'll bring up a dialog box. Simply fill out whatever fields you want and proceed; if you're not sure what a particular field does, don't put anything there.

Special Features

This program is already jammed pack with all the @HTML support you'd ever want. It provides support for Microsoft's proposed extensions to HTML, including Banner, Marquee (see fig. 30.12), and Background Sound. @Netscape's extensions are also impressively supported with built-in tags for Frames, @Font Colors, and @Client-Side Imagemaps. All the proposed @HTML 3 tags are also included in this program. To add to all of this, there is a pseudo-WYSIWYG previewer that shows you roughly what your Web page will look like. Although the previewer doesn't show images and can't really jump to links, it's still better than many other tags-only previewers.

Fig. 30.12

You can see roughly what your marquee will look like at the bottom of the dialog box.

Getting Help

Probably the best thing about WebEdit is its built-in help facility. To help you learn about HTML, you can find out which elements are supported by which browsers. Bring up the online help file, and search for a particular HTML tag. In the upper-left corner, you'll either see a Netscape icon or a Microsoft icon (see fig. 30.13). This tells you right away which browsers will be most likely to view your home page. For those people creating browser-specific Web pages, this is invaluable.

Fig. 30.13

Even @WebEdit's Help file will assist your learning about @HTML.

Whenever you add almost any HTML tag to your home page, you're presented with a dialog box. This is useful because all the HTML-related buttons and fields have button tips. Just leave your mouse cursor over any of the fields or buttons and you'll find out what it's for (see fig. 30.14). You don't need to dig through a manual to find out what each attribute does; the dialog boxes will tell you. @Kenn Nesbitt has done a fantastic job in making @HTML writing so much simpler with his extensive button tip facility.

Fig. 30.14

All of @WebEdit's dialog boxes have button tips for @HTML attributes.

Configuring WebEdit

WebEdit doesn't come with many configurable options, but that's because it does everything. Its few configurable options are under the Option menu. If you have a local directory where you keep other URLs you plan to use, you should choose the Select URL File Path. With WebEdit, you can have a browser load the HTML document you're currently working on. You can specify the location of the browser you want by Choosing the Select HTML Viewer. For those of you who don't want the toolbars to use tags, you can have floating toolbars as well. Choose Tools, Toolbars, and select the toolbars you want; they'll become floating toolbars.

Live Markup

Live Markup (see fig. 30.15) by MediaTech (http://www.mediatec.com/) is a well-intentioned @WYSIWYG HTML editor for @Windows 95. It provides support for HTML 2, some Netscape extensions, and popular HTML 3 elements. It's handicapped by a cumbersome user interface, but is workable for people new to Web authoring. Even though its WYSIWYG facility isn't perfect, it does give a great idea of what your Web page will look like, without needing a browser.

Fig. 30.15

@Live Markup is a good @HTML editor for people who aren't familiar with HTML.

Getting and Installing

Getting @Live Markup is a simple matter of pointing your favorite @Web browser to ftp://ftp.mediatec.com/pub/mediatech/lv16b22g.exe. It's about 1.1 megabytes to download the entire package, which will work on Windows 3.1 as well as Windows 95. Once you get it, simply locate the file and double-click on its icon. The self-extracting archive will popup a dialog box, asking you where you want to uncompress the files to. Once it's done uncompressing files, the installation program will begin. All you have to do is specify where you want to install the entire program to, and Live Markup will be installed. The entire distribution takes about 3 megabytes of @disk space.

The version that MediaTech makes available to everybody is their evaluation version. It's a 16-bit application, meaning it's not optimized for Windows 95. After the 14 day evaluation, you may purchase the complete version for $49.

General Navigation

Probably the worst part about Live Markup is its user interface. All objects in @Live Markup are treated as objects, which while not inherently bad, is poorly implemented. Most HTML elements that you create will have a default set of attributes used. To change these attributes, you must first select the object, then click on the right mouse button. This allows you to edit the attributes for that particular element (see fig. 30.16).

Be sure to use the right mouse button a lot with Live Markup. A lot of HTML elements and attributes alike are hidden under it.

Some of the options for a particular element aren't available through the right @mouse click menu. What isn't available might be available under editable attributes.

Fig. 30.16

Most of the options you want to use for text elements are available with the right mouse click button.

Inserting an HTML element of any sort is also problematical with Live Markup. Whatever HTML tag you want to create will depend on which element is currently selected. If no elements are selected, the newly created tag will appear at the top of the @Web page. If you already selected an element, the new tag will be below it. While this may not appear too unfriendly or unworkable, the fact that you can't move objects around is a tremendous problem.

So confusing is Live Markup's interface, that most of the help file is goal oriented. Rather than explaining what particular HTML tags do, or are used for, Live Markup focuses on how to get around its interface.

Live Markup's help files are poorly written.

Another problem with Live Markup relates with how it displays your Web page. On the whole, it's HTML interpretation is fairly good, but there are obvious holes in it. Its interpretation ability breaks down when you do advanced HTML tricks. Colored backgrounds and the like can easily confuse the HTML interpreter. Also, when you interact with any HTML tag, @Live Markup will completely refresh the @Web page. Sometimes it'll update objects that aren't visible in the window.

Working with Elements

By and large, the general method of inserting any @HTML element is done by clicking on its icon. You can also access the same HTML elements as the icons, by selecting the Insert menu heading. What HTML elements you don't see, are probably available by selecting an existing element, and clicking the right mouse button. Some elements, when selected, will bring up a dialog box, prompting you for more information (see fig. 30.17).

Fig. 30.17

Once you specify the size and appearance of a table, you can enter data into each cell.

Perhaps Live Markup's one saving grace is that it allows you to put in images almost anywhere. In particular, @Live Markup supports the little known ability to put images into table cells. While this may not sound terribly impressive, the fact that few other @HTML editors do the same thing is impressive. Where some HTML editors restrict you to mere text for table cell data, @Live Markup wil let you put in pictures. This allows you to to create sophisticated Web pages easily.

Arachnid

@Arachnid by @Second Look software at the @University of Iowa is a well-regarded @HTML editor for the Mac. It provides support for @HTML 2, @HTML 3, and some @Netscape extensions. This @WYSIWYG HTML editor is a respectable program that is good for new @Web authors. It shields the HTML code from the new HTML writer while providing adequate support for tags. For people who are still learning the HTML ropes, this is a good starting program.

Getting Around

When you first start Arachnid, you'll see the main window with two floating windows (see fig. 30.18). This is a bit cramped on a 14-inch monitor, but fortunately, you can get rid of the extra windows if you want. Arachnid works from a project concept: you don't design individual home pages; you design a Web site. As a result, the more Web pages you work on at once, the more useful some of Arachnid's features become. Also, the files that are created by @Arachnid are not standard @HTML documents. You must convert these project files into @Web pages by choosing File, Export to @HTML.

Fig. 30.18

@Arachnid comes with a main @WYSIWYG window and two floating windows.

This editor also has three distinct modes: the Text mode, the Pointer mode, and the Preview mode. The Text mode is where you enter actual text into the current Web document. The Pointer mode enables you to move the different @Arachnid objects around. Finally, the Preview mode shows you Arachnid's interpretation of how the current @HTML document will behave in a real @Web browser.

Objects and Arachnid

Almost everything you put into a @Web document will become an @Arachnid object. An object is first created when you leave the Pointer or @Preview modes and begin adding @HTML elements. When you've finished adding to the object by not being in Text mode, you stop adding to that object. What this means is that when you want a horizontal rule or a graphic after a body of text, you'll create a new object. Also, @Arachnid will prevent you from having overlapping objects. In addition, you can control the size of the objects while @Arachnid automatically arranges the objects in its own particular fashion.

Adding Text

You can add text to your home page by going into Text mode. Once you've clicked an area that doesn't have an object, the entire line becomes highlighted. Now, you can start typing whatever you want on that line. You can easily change the style of text by highlighting it in Text mode and choosing Format. Choose the appropriate style or element from the cascading menu. Most of the different text elements will only affect the highlighted text.

Choosing Format, @Text Alignment will affect all the text in the current object. If you don't want this to happen, go into Pointer mode and create a new text object.

Managing Links

The most important attribute in any home page is the hyperlink. Unfortunately, Arachnid's support of links-although extensive-is very cumbersome. You can create links in @Arachnid by first highlighting the text or graphic that you want linked. Next, choose the appropriate link type from the floating menu and then drag it to the main @Arachnid window. You can create links to other home pages, another page in your project, or a line in a page in your project.

When creating links to multimedia files, it's a simple matter of finding the file. However, when you're creating a link to anything specified by a URL, you must select from a list of existing URLs (see fig. 30.19). If the URL you want to link to isn't on the Arachnid list, you have to add it. Adding a new URL is a simple matter of clicking the @New button (Command+N). You'll be prompted for the URL you want to add along with the name you want to assign it. This might not seem to be a problem, but when you're using Arachnid for the first time, it's tedious adding your favorite URLs.

Fig. 30.19

To link something to a URL, you must select the URL from a list of existing URLs.

Working with Rules and Graphics

You can easily add a horizontal rule by choosing File, Insert Ruler (Command+R). It will create a horizontal line that spans across the entire width of the window. If you want to change the appearance of this line, simply go into Pointer mode and click the line. Next, choose Format, followed by Ruler Alignment, and choosing either Left, Center, or Right. The width of the rule can be changed to any value from one percent to 100 percent of the @window width by choosing Format, @Ruler Width. The Ruler Thickness can be set to any value from one through 10 as well as a user-defined value. Additionally, you can set the Ruler Shade to either Black or No Shade.

Adding graphics is even easier; simply choose File, Import Picture (Command+I). You'll be presented with the standard Macintosh file selector, which you use to locate the graphic you want (see fig. 30.20). After you've clicked OK, the image will appear in the next open space on your home page. Once loaded, this picture is an @Arachnid object by itself. You can change the border width by selecting the graphic and choosing Format, Image Border Size.

Fig. 30.20

Inserting a graphic is a simple matter of finding the picture you want.

@Arachnid only enables you to load images that are in the same folder as your project file.

Putting Tables

<TABLE> is a newly supported HTML element with Arachnid, and it shows. The interface for creating tables is still a bit uneven and counter-intuitive. To create a table, you must first type in the data for the table itself. Next, go into Text mode and highlight the text that you want to be in one cell. Now choose Format, HTML Extensions and select Table Data. A dialog box will be displayed that enables you to define the appearance of the table row (see fig. 30.21).

Fig. 30.21

@Arachnid enables you to define the appearance of each cell in your table.

Once you're happy with the settings, clicking OK will convert the existing data into a table cell. After you've defined each cell, you have to define the rows for the table. Highlight all the cells you want in a given row and choose HTML Extensions, Table Row. Finally, after all the rows are defined, highlight all the cells in your table and select HTML Extensions, Table. You'll be prompted with another dialog box that will enable you to control the overall appearance of the table (see fig. 30.22). You can add a table header or caption before or after you've created the table.

Fig. 30.22

The appearance of an entire table can be controlled with this dialog box.

Working with Forms

Working with the complex HTML element, <FORM>, is made easy with @Arachnid. Creating a form is a simple matter of clicking the appropriate form you want to create and using the mouse pointer to define the size and shape of the form. The form will instantly appear in the region you define, and you'll be prompted for its variable name.

After you've created any selection form, you can enter the data into the form directly. Simply go into Text mode, and click somewhere in that form. You can start typing the values you want for each line in that selection form.

Buttons, check boxes, and radio buttons are also very easy to create with @Arachnid. Simply select the appropriate form to create from the floating window. Next, use the mouse to specify the size and shape of the item. You'll be prompted to give the button or check box a distinct name (see fig. 30.23). For Submit and Reset buttons, you'll be asked which button you want to create (see fig. 30.24).

Fig. 30.23

You must give a distinct name to every button form.

Fig. 30.24

You can add either a Submit button or a Reset button to your Web page.

HTML Extensions

There are a number of new HTML extensions that @Arachnid adequately supports. The capability to specify colors for various home page elements, such as visited link color and background color, is possible. Whenever you want to change a color of your home page, you'll be given a color wheel (see fig. 30.25). Simply find the color you want to use and click it. You can fine tune the color until you're happy with it, then click OK.

Fig. 30.25

Specifying colors is easy with @Arachnid.

World Wide Web Weaver

World Wide Web Weaver by Miracle Software (http://www.northnet.org/best/) is a solid, tags-only HTML editor for the Macintosh (see fig. 30.26). It supports HTML 2, some HTML 3, and some of Netscape extensions to HTML. It makes use of floating windows and a toolbar to provide access to HTML tags. The @Netscape-specific tags are provided along with the standard set of @HTML tags. So, as a Web author, this means you'll have to know HTML tags fairly well to create a generic home page.

Fig. 30.26

@World Wide Web Weaver makes all of its supported @HTML tags available through multiple windows.

Putting in HTML Elements

The floating windows, although a little cumbersome at first, become a very workable user interface. Unlike other editors that embed the tags within menus or complex dialog boxes, @World Wide Web Weaver makes the tags available in the floating windows. So to make use of any HTML tag, simply click one of the tags in any window. The tag will automatically be used by World Wide Web Weaver.

Forms and Tables

@World Wide Web Weaver makes putting in forms and tables very easy for the casual @HTML author. When you click the Form button (Command+;), you'll be presented with two dialog boxes (see fig. 30.27). You create forms by selecting whichever one you want in the right-hand dialog box. You'll be prompted for information for that particular form. Once you're done, the form and its name will appear in the left-hand dialog box. You can modify the attributes for any forms in the dialog box by simply clicking it.

Fig. 30.27

Click the form you want to create on the right, and it will appear on the left.

Tables are also similarly easy to create in World Wide Web Weaver. By clicking the Simple Table button (Command+T), you'll be presented with a dialog box (see fig. 30.28). You can change the table's size and dimension on the right, and the preview of the table will be updated on the left. You can manually add the elements for each table cell just by clicking it. You'll be presented with a dialog box in which you can enter whatever information you want.

Fig. 30.28

You can see what your table will look like in this dialog box.

Text Tags

The various @HTML text elements are also supported with @World Wide Web Weaver. You can change the style and point size of the font from the Tags menu. Simply choose the appropriate menu item, and pick the value you want. The Text menu is only intended to help you create your home page. This can be misleading to new HTML authors who think that they're setting the font's color and typeface.

HTML.edit

HTML.edit is a well-rounded, tags-only, HTML editor for the Macintosh. It's written by Murray Altheim and is available from http://ogopogo.nttc.edu/tools/HTMLedit/HTMLedit.html. It provides up to HTML 2 support including popular extensions like tables and forms. All interaction between HTML.edit and the user is done through floating windows (see fig. 30.29). The few menu items available all have to do with navigating through the Web pages stored by @HTML.edit.

Fig. 30.29

Although HTML.edit has many floating windows, you only need to concern yourself with the floating toolbar.

Getting and Installing HTML.edit

HTML.edit is available in three executables, the 68000-specific, the PowerPC-specific, or the "fat" binaries. The 68000-specific program will only work on most older @Macs, while the @PowerPC file only works on @PowerPC Macs. If you're unsure which computer you have, get the fat binaries, as they will run on any Mac. You'll typically need about 4 megabytes of disk space to hold the entire HTML.edit distribution.

Navigating HTML.edit

HTML.edit works off the idea that you don't want to design just one Web page, you want to design a lot of them. To that end, HTML.edit doesn't allow you to open up individual HTML documents. There is one master index of HTML documents that you add your Web pages to (see fig. 30.30). You can create new, and import existing, HTML documents into the index, as well as exporting individual pages. This allows you to easily see all your Web pages at a glance.

Fig. 30.30

HTML.edit allows you to easily jump to the next, and previous Web page in the master index of your Web pages.

When you're ready to add a new page to the master index of HTML documents, you'll have to give it a title (see fig. 30.31). After that, you'll be presented with HTML.edit's main window (see fig. 30.32). Here, your @Web page is broken up into three distinct regions, the header, the body, and the footer. You can only go into each region by moving your mouse into that region, and clicking the button.

Fig. 30.31

Before you can start creating a new Web page, you have to give it a title.

Fig. 30.32

You can resize each region of a page, by clicking and dragging the separator.

The @keyboard cursor navigation is generally intuitive, but does have its faults. The arrow keys move your cursor in the corresponding direction, by one character or line. However, the Home and End keys take you to the first and last document in HTML.edit's index. Pressing the @Page Up key will show the previous @screenful of HTML text. While the Page Down key will similar show you the next screenful of your Web page.

Don't ignore the little tabs on the separators, near the left side of the window. They are used to create and save global headers and footers. This is particularly useful if you're trying to keep your Web pages consistent. It even comes with three pre-defined headers and footers for your use.

Make sure you see the text cursor before using the arrow keys. Some commands in HTML.edit will actually get rid of the cursor. When this happens, the @cursor keys will act like some of the buttons in the main window. The left arrow will show you the document previous to the current Web page, while the right arrow will bring up the next @HTML document.

The Toolbar

Almost everything you want to put in your Web page is accessible through the floating toolbar (see fig. 30.33). This @toolbar can be clicked and dragged by its title bar to anywhere on the screen you want. Simply put your mouse cursor over a particular button on the toolbar. Next, click and hold the mouse button. You'll be presented with a drop-down menu list of available options and HTML tags. These drop-down menus behave as normal menus on the menu bar, complete with cascading menu options.

Fig. 30.33

While you can get rid of the floating toolbar, there's really no reason to do so.

Tags and Styles

As with most Web pages, you'll probably want to put in some sort of text. This is done by simply putting your text cursor where you want to add text, and start typing. You can assign an HTML tag to that particular text by first highlighting it. Then, depending on which HTML attribute you want to give it, choose a particular button.

The HTML button allows you to use the less-often used HTML tags. That is, elements such as as <TITLE>, <HEAD>, and <BODY> can be found here. All of the @HTML tags that relate with creating lists can also be found here. The @Heading button will insert, obviously, any of the six @HTML headings. Finally, the @Style button hides the majority of @HTML text tags that you can use. Physical and @semantic HTML elements can be found under here. In particular, any user-defined @HTML tags can also be accessed with the @Style button.

Special characters, such as the less than, greater than, and ampersand are available under the HTML button. They are grouped under the general menu heading of "Entities".

The HTML, Heading, and Style buttons all have Index and Highlight options. The Index option, when selected will generate a list of all of a particular tag used in the current HTML document. This is useful if you're checking to make sure that certain words are of a particular style. The @Highlight option emphasizes the text enclosed within a particular style. Any text that HTML.edit finds that meets the criteria, will be displayed in bold.

Creating Links

Probably the most common HTML element you want to put in your Web page is a link. This can be a link of text or an image, to anything else on the @Net. Links don't necessarily have to go to other @Web pages, they can also go to other Internet resources. You can easily link in text or images to any URL you want. Simply use the mouse to highlight the block of HTML code that you want to create a hyperlink to. Next, click on the Anchor button on the floating toolbar. Select HyperText Link to make the highlighted text into a link. You'll be presented with a dialog box (see fig. 30.34) asking you for some details about the link. Simply fill out as much as you know, and click the OK button.

Fig. 30.34

The @Anchor Utility dialog box is used to specify attributes for hyperlinks.

See Chapter 7 for information on how to link to other Internet resources.

Adding Images

Images can easily be inserted into your @Web page with @HTML.edit. Simply click and hold the @mouse button on the @HTML button, and you'll see an option for inserting an image (Command+I). You'll be presented with a dialog box where you can enter various attributes for the image (see fig. 30.35). Clicking on the Source SRC tab, followed by the External File option will take you to a file locator dialog box. The @Alternate Text field is displayed when people are viewing your @Web page without a text browser.

Fig. 30.35

You specify which file on your hard drive to use as an image by clicking in the SRC field.

Creating Tables

Tables are sophisticated HTML elements that HTML.edit also allows you to create. You can create a table from one of two basic ways, a cell at a time, or convert existing text. The more cumbersome of the two is to define your table one cell at a time. Simply click and hold the @mouse button over the @Table button on the @toolbar. @Select Table Cell and enter in the data you want for that cell. Repeat this process for as many cells as you want. You next to have to define each row in your table, then the rows, headers, and finally the caption.

If you choose to create a table one cell at a time, you can make things easier on yourself. At the bottom of the @Table button is the @Table Palette option. This will bring up a floating window with all the table-related HTML tags (see fig. 30.36).

Fig. 30.36

The Table Palette floating window is a great way to easily access table-related tags.

The easier way of creating tables is to type in the data for the table itself. Next, click and hold down the @mouse button over the @Table button. Select the @Convert menu item, followed by the Text to @Table menu option. This will bring up a dialog box (see fig. 30.37), asking you how many pixels should be used for padding for the table. Next, you'll be asked for the character to be used to separate entries in the table (see fig. 30.38). Finally, you have to decide whether you want the columns or rows as table headings (see fig. 30.39).

Fig. 30.37

During the text to table conversion process, you have to indicate some display attributes of it.

Fig. 30.38

Next, you have to tell HTML.edit what type of headings you want for the table.

Fig. 30.39

Finally, you have to define when one cell data ends, and another begins.

Creating Forms

Forms are another advanced element that you'll see in many Web pages. Here too, HTML.edit provides an easy way of creating them. Simply position your screen cursor where you want the form to appear, and use the Form button on the toolbar. If you're creating a form for the first time, you'll be asked for some general information (see fig. 30.40). Most of the time, such as for a text text-input form (see fig. 30.41), you'll just be asked for some information.

Fig. 30.40

All new forms must be given some critical information that controls its behavior.

Fig. 30.41

With most forms, HTML.edit just asks you for some basic parameters.

The only exception to this rule is the selection list form. Here, you must select existing text that you want as the items in the selection list. Next, specify that you want to create a list selection form field, with the Form button on the toolbar. You'll be presented with a simple dialog box (see fig. 30.42), where you specify the attributes for the selection form field. Once you've clicked the OK button, the necessary @HTML code will be wrapped around the selected text.

Fig. 30.42

Use this dialog box to specify the behavior of your list selection form field.

If you want to create a series of forms, you can bring up the Form Palette. At the bottom of the @Form button is the @Form Palette menu item. This will bring up a floating window with all the table-related HTML tags (see fig. 30.43).

Fig. 30.43

The Form Palette floating window is a great way to create lots of forms.

asWedit

For those HTML authors who mainly use UNIX and X Windows/Motif, asWedit by AdvaSoft (http://www.advasoft.com/) is good package to look at. This X Windows/Motif program gives you all the power and functionality you'd want from a good HTML editor. It supports HTML 2, HTML 3, and Netscape extensions. This product is free for students and nonprofit organizations. Individuals and corporations can try it out for thirty days free of charge.

Perhaps the most striking thing about asWedit is its user interface (see fig. 30.44). It looks more like a Windows application than an X Windows application. There are button tips, context-sensitive help, and familiar keyboard shortcuts. The programs comes with two @toolbars that have the most commonly accessed features available. All the menu bars can be "torn off" the program and left as floating windows. People who might be afraid of the unfriendliness of @UNIX and X Windows/Motif will feel at home with @asWedit's interface.

Fig. 30.44

Although it has the look and feel of a Windows program, asWedit is an X Windows/Motif HTML editor.

Getting and Installing asWedit

Getting asWedit is a simple matter of downloading a pre-built binary. Simply download the executable that matches your Unix box from ftp://sunsite.doc.ic.ac.uk/packages/www/asWedit/. Available platforms include @Sun Sparc, DEC Alpha, AIX, NeXT, and HPUX. Common to The file size varies greatly depending on which platform you're getting, ranging from half a megabyte to three megabytes. Once you get the distribution that matches your system, uncompress and un-tar the file. asWedit will be installed into its own directory which has all the necessary files.

If you're low on disk space, use the following command to extract the asWedit distribution:

zcat [asWedit filename] | tar xvf -

If, for some reason, you find that asWedit is a limited or unfriendly package, don't despair. There's ASWedit (note the capitalization), which is the commercial version of asWedit. This version has some extra functionality, enables greater user customization, and has an even friendlier user interface. It retails for $149 and, like its cheaper counterpart, is available on all major UNIX platforms.

@General Look and Feel

Entering text with asWedit is a simple matter of putting your cursor somewhere, and typing. It also helps that asWedit follows the typical cursor movement conventions of many other programs. Consequently, if you've used almost any other word processor, or HTML editor, you'll have no problems with asWedit. It also comes with a full help file system, including context sensitive help. If you're not sure what a particular field for a dialog box, simply hit F1.

asWedit also features "tear-off" menus, which allow you to have all the menu lists in floating windows (see fig. 30.45). At the top of each of the menu lists is a dashed line which is selectable. Simply select that dashed line, and the menu will become floating. You can still access the menu through the regular menu bar, but its floating aspect makes it more accessible.

Fig. 30.45

Tear-off menus are great if you access particular menu items a lot.

Working with Tags

Unlike many other tags-only HTML editor, this program doesn't give you any attributes up front. That is, you select a particular tag, and it's inserted into your Web page. If you want to activate certain attributes, you often can't do it when you first create the tag. Most of the time, the only way to get an attribute is to put it after you've created the tag. Simply put your text cursor somewhere in an @HTML element marker, and click the @Edit Tag button. A dialog box pops up, depending on which HTML element the cursor is in, and allows you to activate whatever attributes you want (see fig. 30.46).

When your cursor is in an HTML tag, some menu and toolbar options will become enabled.

Fig. 30.46

Most of the time, you can only put in HTML attributes is by modifying an HTML tag itself.

Creating Links

Probably one of the most common HTML element you'll want to utilize is the hyperlink. This is done by simply clicking the Hyperlink button on the toolbar. Once you've done that, you'll be presented with a dialog box (see fig. 30.47). Most of the time, you simply enter a URL for the Link Destination field and click the OK button. You can specify the values for as many attributes as you want, and they will all be incorporated into the link. If you want to access some more anchor attributes, just click the More button.

Fig. 30.47

You can make basic or advanced links with this dialog box

Special Features

Perhaps asWedit's strong suit is that it's just jammed-packed with features. It has three distinct editing modes: text, HTML 2, and HTML 3. The text mode is equivalent to a tags-only editor in which all of the HTML elements are visible. In either HTML 2 or HTML 3 mode, only tags that are defined for that HTML level of specification are shown. When in one of these modes, the tags are color coordinated so you always know which tags belong together. Almost everything you'd ever want to put into a home page-tables, colored text, forms, and client-side imagemaps-are all in this impressive program. In addition to all of this, @asWedit also provides support for inserting @JAVA Applets into a @home page (see fig. 30.48).

Fig. 30.48

Putting in @JAVA Applets is a simple matter of filling out this dialog box.

Emacs HTML Mode

@Emacs is an incredibly powerful text editor for @UNIX, VMS, and Windows machines. This free text editor goes beyond the breadth and scope of most others. It has features that are often the domain of word processors, including spell checking, text justification, and multiple file support. Emacs works in very distinct modes: some features are only available in certain modes. It was just a matter of time before someone would take this text editor and create an @HTML add-on module for it. Nelson Minar has created such a facility.

Emacs is a keyboard-intensive, powerful text editor. A lot of the keystrokes here may seem strange to those unfamiliar with Emacs.

HTML Tags Support

This free @Emacs add-on module, written in the Emacs flavor of LISP, adds a new mode (see fig. 30.49). The new @HTML helper mode provides easy access to the most common @HTML codes. It provides support for most HTML 2 tags, but not HTML 3 or any of Microsoft's or Netscape's extensions. Consequently, this makes HTML helper mode a bit limited in the sophistication of your home page.

LISP is a @programming language used mainly for artificial @intelligence.

Fig. 30.49

@Emacs users can also write @HTML code by getting @HTML helper mode.

Also, the tag support is very basic. When you insert a tag, you're given just the bare minimum for that particular tag. Link tags don't have extra fields to fill in the extra attributes. The different attributes are only available through other Emacs keystrokes. This makes it difficult for new HTML authors, who might be familiar with Emacs, to create a Web page. The tag support also doesn't work on marked @Emacs regions.

Entering Text

To start writing in HTML helper mode, simply have Emacs switch over to it. Traditionally, this is done by hitting the Esc and X keys and then typing html-helper-mode. As with some other Emacs modes, most html-helper-mode commands are accessible by first pressing Ctrl+C. After that, you can generally just hit the key that corresponds to the first letter of the HTML tag you want to use. For example, if you want to specify the title for your home page, hit Ctrl+C and then Ctrl+B followed by the T key. The cursor is placed in between the start and end marker, so you can type in the title.

Creating Lists

Lists of all sorts are adequately supported with @HTML helper mode. When you choose to create a list, @Emacs will automatically create the start and end markers of that list. It will also put in the starting marker for the appropriate HTML tag for the list element you want to create. It won't create the ending marker for that tag, nor will it keep adding markers as you add more elements.


Internet & New Technologies Home Page - Que Home Page
For technical support for our books and software contact support@mcp.com
© 1996, Que Corporation