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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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 (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.
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.
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 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.
HotDog is a very popular and well regarded stand-alone HTML editor.
HotDog is useful for converting existing
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.
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.
You can easily insert HTML elements by double clicking in this floating window.
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.
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.
Find the internal destination point you want, and select it.
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.
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.
You can create tables and the data they'll hold with this dialog box.
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.
Link and text colors are changed through this dialog box.
Creating lists in HotDog requires a bit of
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.
Kenn Nesbitt's WebEdit is a feature-loaded, tags-only HTML editor.
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.
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+.
Most of the HTML tags you'll ever need are hiding behind this toolbar.
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
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.
The URL Builder is a great feature for new Web authors to learn the
URL structure.
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.
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.
You can see roughly what your marquee will look like at the bottom of the dialog box.
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.
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.
All of WebEdit's dialog boxes have button tips for HTML attributes.
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 (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.
Live Markup is a good HTML editor for people who aren't familiar
with HTML.
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.
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
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.
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).
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 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.
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.
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.
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.
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,
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.
To link something to a URL, you must select the URL from a list of existing URLs.
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.
Inserting a graphic is a simple matter of finding the picture you want.
<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).
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.
The appearance of an entire table can be controlled with this dialog box.
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).
You must give a distinct name to every button form.
You can add either a Submit button or a Reset button to your Web page.
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.
Specifying colors is easy with Arachnid.
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.
World Wide Web Weaver makes all of its supported HTML tags available
through multiple windows.
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.
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.
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.
You can see what your table will look like in this dialog box.
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 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.
Although HTML.edit has many floating windows, you only need to concern yourself with the floating toolbar.
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.
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.
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.
Before you can start creating a new Web page, you have to give it a title.
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
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.
While you can get rid of the floating toolbar, there's really no reason to do so.
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.
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.
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.
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.
You specify which file on your hard drive to use as an image by clicking in the SRC field.
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
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).
During the text to table conversion process, you have to indicate some display attributes of it.
Next, you have to tell HTML.edit what type of headings you want for the table.
Finally, you have to define when one cell data ends, and another begins.
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.
All new forms must be given some critical information that controls its behavior.
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.
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
The Form Palette floating window is a great way to create lots of forms.
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.
Although it has the look and feel of a Windows program, asWedit is an X Windows/Motif HTML editor.
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 FeelEntering 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.
Tear-off menus are great if you access particular menu items a lot.
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.
Most of the time, you can only put in HTML attributes is by modifying an HTML tag itself.
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.
You can make basic or advanced links with this dialog box
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).
Putting in JAVA Applets is a simple matter of filling out this dialog
box.
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.
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
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.
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.
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.
|
