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 the following:
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 its 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 reasons for it. If you have an old or underpowered 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 frequently 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 underpowered 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 underpowered 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.
Figure 30.1 : HotDog is a very popular and well regarded
standalone HTML editor.
| Tip |
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 to convert a large batch of HTML documents into plain text. |
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. 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 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 necessarily 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.
Figure 30.2 : 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 URLs, you can also create a link through 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.
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.
Figure 30.4 : Find the internal destination point you
want, and select it.
| Caution |
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. |
| Caution |
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 lay out their home pages ahead of time. |
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.
Figure 30.5 : HotDog enables you to put in many different
forms.
| Caution |
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.
Figure 30.6 : 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.
Figure 30.7 : Link and text colors are changed through
this dialog box.
| Note |
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. |
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.
Figure 30.8 : 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+.
Figure 30.9 : 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 holds a list of recently accessed values. Creating destination points for internal hyperlink jumps is a simple matter of filling out the Name field.
Figure 30.10: Link 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 an 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.
Figure 30.11: 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 jam-packed 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.
Figure 30.12: 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.
Figure 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.
Figure 30.14: 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.
Figure 30.15: Live Markup is a good HTML editor for people who are'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 pop up 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, and Live Markup will be installed. The entire distribution takes about three megabytes of disk space.
The version that MediaTech makes available to everybody is its 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).
| Tip |
Be sure to use the right mouse button a lot with Live Markup. Many HTML elements and attributes alike are hidden under it. |
| Caution |
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. |
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.
| Caution |
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. |
| Caution |
Live Markup's help files are poorly written. |
Another problem with Live Markup relates with how it displays your Web page. On the whole, its 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 elements as the icons, by selecting the Insert menu heading. What 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).
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 will let you put in pictures. This allows you 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.
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.
| Caution |
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. |
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 an 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.
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.
| Tip |
Arachnid only enables you to load images that are in the same folder as your project file. |
<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 todefine the appearance of the table row (see fig. 30.21).
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, high-light 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.
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.
| Tip |
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).
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.
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 the 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.
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.
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.
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.
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 four 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.
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.
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 documents in HTML.edit's index.
Pressing the Page Up key will show the previous screenful of HTML
text. While the Page Down key will similarly show you the next
screenful of your Web page.
| Tip |
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. |
| Caution |
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. |
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.
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.
| Tip |
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.
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.
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 have
to define each row in your table, then the rows, headers, and
finally the caption.
| Tip |
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). |
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).
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.
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.
| Tip |
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). |
For those HTML authors who mainly use UNIX and X Windows/Motif, asWedit by AdvaSoft (http://www.advasoft.com/) is a 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 30 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 program 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.
Getting asWedit is a simple matter of downloading a pre-built
binary. Simply download the executable that matches your UNIX
box fromftp://sunsite.doc.ic.ac.uk/packages/www/asWedit/.
Available platforms include Sun Sparc, DEC Alpha, AIX, NeXT, and
HPUX. 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.
| Tip |
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.
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 is 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.
Unlike many other tags-only HTML editors, 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).
| Note |
When your cursor is in an HTML tag, some menu and toolbar options will become enabled. |
Probably one of the most common HTML elements 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 an 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.
Perhaps asWedit's strong suit is that it's just jam-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).
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.
| Note |
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.
| Tip |
LISP is a programming language used mainly for artificial intelligence. |
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 markers, 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.