Skip to main content.

Web Based Programming Tutorials

Homepage | Forum - Join the forum to discuss anything related to programming! | Programming Resources

The Complete Idiot's Guide to Creating an HTML Web Page

Chapter 20 -- Assorted Other Ways to Create HTML Documents

Chapter 20

Assorted Other Ways to Create
HTML Documents


CONTENTS



The last few chapters concentrated on individual HTML programs: Netscape Gold, HTML Writer, HotDog, Internet Assistant, and America Online's My Home Page. You can think of these chapters as single-course meals: nourishing enough, but lacking in variety. This chapter, however, takes more of a smorgasbord approach. I'll be plying you with various Web page-production snacks, including a savory selection of HTML editors (the best of the rest), some tasty techniques for slicing HTML codes from existing pages, some mouth-watering Web-based page-creation engines, and some scrumptious software for converting existing files into HTML format. Hope you brought your appetite!

Rapid Reviews of a Few More HTML Editors

Chapters 15 through 18 covered the HTML editors that are, in my semi-humble opinion, the best in the five main categories of Web authoring tools. (Those categories are: browser-based editors, such as Netscape Gold; free editors, such as HTML Writer; commercial editors, such as HotDog; word processor templates, such as Internet Assistant; and online page creation engines, such as My Home Page.) But the Web is such a gigantic phenomenon that it seems everybody and his sibling is coming out with a new program for editing HTML. Even though all of the programs we've looked at are excellent tools, they may not be just right for your needs as a budding Web welder. So, to give you a taste of what else is available, this section introduces a few more HTML editing programs and tells you where to go to pick them up.

Getting the WebEdit Page Editor

When I was evaluating commercial HTML editors for this book, I had a tough time trying to decide which one was best. Although I eventually settled on HotDog, I came this close to going with Kenn Nesbitt's excellent WebEdit program. It has an intuitive interface and support for just about every HTML tag on the planet, and it's really fast (way faster than HotDog, which runs like a dachshund through cheese dip). In the end, though, I chose HotDog because it was geared more towards beginning and less-experienced Web authors; WebEdit is, hands down, the editor of choice for experienced HTML hounds. Here are some of WebEdit's features:

WebEdit costs US$79.95 for corporate and government types. Home users, schools, and other nonprofiteers only have to shell out US$39.95. There's also a demo version that you can try out for 30 days. To download the demo version of WebEdit, first head for the WebEdit home page at the following URL:


http://www.nesbitt.com/

Surfing This on Easy Street
This chapter is chock full of links to Web pages and FTP sites. Rather than typing in these links yourself, you can take a load off your fingers by loading up the file named ASSORTED.HTM from this book's disk. This file contains links to all the sites mentioned in this chapter.

The WebEdit Download Page that appears has links to several Net locations from around the world that will serve up a copy of the WebEdit file. Click on any link that's nearby or strikes your fancy and save the file to your hard disk. The file you get (it's called WEBEDIT.ZIP, but that name may change as new versions are released) is compressed in ZIP format, so you need to use the WinZIP program (available on this book's disk; see the appendix named "The Goodies on the Disk" for instructions) to decompress it.

Once the decompression is complete, you should have a program named SETUP.EXE on your hard disk. Running this file starts the WebEdit installation program. Follow the instructions on the screen to install WebEdit on your system. When the installation is done, double-click the WebEdit icon (it should be in a program group named Nesbitt Software) to fire up WebEdit. The screen below shows the main WebEdit window.

The main WebEdit window.

Professional HTML Editing with HTMLed Pro

HTMLed Pro is a powerful program that can tackle any HTML project, large or small. It has some outstanding features, including the following:

HTMLed Pro costs US$99.95, or US$69.95 for educational institutions. You can also download a time-limited demonstration version (good for about one month) to check out HTMLed Pro before forking over any cash. To get your mitts on HTMLed Pro, surf to the following Web page:


http://www.ist.ca/htmledpro/

Follow the instructions on the screen to download HTMLed Pro to your computer. I'd recommend creating a new directory for HTMLed Pro (called, say, HTMLED) and saving the file into that directory. The file is compressed in ZIP format, so you need to use the WinZIP program (available on this book's disk; see the appendix named "The Goodies on the Disk" for instructions) to decompress it.

If you downloaded the demo version, you can get started right away by running the HTMLEDPR.EXE file. If you have the full version, run the installation program and then crank up HTMLEDPR.EXE. The screen below shows the HTMLed Pro window, which demonstrates this program's Achilles' heel: its interface. As you can see, thanks to all those buttons HTMLed Pro's screen is cluttered and uninviting. It's certainly as powerful and full-featured as anything on the HTML editor market (all those darn buttons have gotta do something!), but I'd like to see a facelift before I'd use this program full-time.

HTMLed Pro's window: an exercise in yucky interface design.

Stop the Web Presses: It's NaviPress!

In the last chapter, you learned how to create pages using America Online's My Home Page service. I also showed you how to use the My Place service to host multiple Web pages. But AOL's commitment to Web authoring goes deeper than that and it applies to non-AOL subscribers as well. AOL has come out with a new program called NaviService that aims to be "a one-stop solution for building and maintaining your web site." NaviService is actually two separate products: a browser/HTML combo called NaviPress (which I'll talk about here) and a collection of Web hosting services designed for different users (personal, corporate, and so on).

NaviPress takes a Web browser and a WYSIWYG HTML editor, ties them up in a bow, and presents them as a seamless, unified package. In other words, like Netscape Gold (see chapter 15), as you're creating a Web page, you can see exactly how it will look on the Web because you're building the page right in the browser. It's nice technology and it's a truly civilized way to construct a Web page. Here are a few other features of NaviPress:

On the down side, NaviPress is very slow, so you'll need a good supply of patience. If you'd like to give NaviPress a go, here's the URL of the NaviService home page:


http://www.naviservice.com/

Here you'll find a link for downloading NaviPress. Follow the link, and then follow the instructions for saving the version you need (NaviPress comes in Windows, Macintosh, and Unix flavors) to your hard drive. When that's done (it's a large file, so the download may take a while), decompress the file (in Windows, you just need to run the NAVIPRES.EXE file) and then run the Setup program.

When Setup is complete, double-click the NaviPress icon to get the show on the road. The figure below shows the NaviPress screen.

The NaviPress screen combines a browser and an HTML editor.

The Step-by-Step Web: WEB Wizard

If you've used any of Microsoft's Office products-Word, Excel, PowerPoint, and Access-you've probably come across a Wizard or two in your travels. Wizards are helpful tools that take you through complex tasks one step at a time. At each step, the Wizard presents a dialog box that asks you questions and gives you controls (such as text boxes and option buttons) for entering data and setting options.

WEB Wizard is a software program that takes the Wizard concept and applies it to creating Web pages. During a WEB Wizard "interview" (as it's called), a series of dialog boxes take you step-by-step through the creation of a simple page. You begin by specifying the page title, then subsequent dialogs prompt you for the background, images, text, lists, links (including a mailto link), and a filename.

WEB Wizard is perfect for folks who are scared to death of HTML and just want to put a page together as painlessly as possible. Even if you know how to use HTML, WEB Wizard is still a handy tool. You can use it to throw together your page basics, then you can load the file into a text editor (or an HTML editor) to fine-tune things.

To grab yourself a copy of WEB Wizard, get your browser to conjure up the following URL:


http://www.halcyon.com/artamedia/webwizard/

WEB Wizard comes in two Windows versions (a Mac version may be available by the time you read this): 16-bit (for Windows 3.1 and Windows for Workgroups) and 32-bit (for Windows 95 and Windows NT). Click on the appropriate link in the WEB Wizard home page, and then follow the instructions in the new page that's displayed. The downloaded file is compressed in ZIP format, so you need to use the WinZIP program (available on this book's disk; see the appendix named "The Goodies on the Disk" for instructions) to decompress it.

To start WEB Wizard, run the decompressed EXE file (WEBWIZ16.EXE or WEBWIZ32.EXE, depending on the version you downloaded). WEB Wizard will lead you through a series of dialog boxes in which you fill out various options and enter the page info. For example, you use the dialog box shown below to enter the title of the page and an optional subheading.

WEB Wizard leads you step-by-step through the page creation process.

Faded Glory: HoTMetaL

Back in the old days of the Web (say, about a year ago!), HTML editors were as rare as hens' teeth. In fact, about the only editor game in town was a program called HoTMetaL, which therefore held a virtual monopoly, both in mind and market share. As other editors quickly entered the fray, HoTMetaL held its own for a while, but it just couldn't keep up with the upstarts.

That's not to say that HoTMetaL is a bad program; far from it. (It wouldn't appear in this chapter if it were.) In fact, HoTMetal PRO 2.0 has even won some awards (such as PC Magazine's Editor's Choice Award). To my mind, though, it's just not quite as slick and easy to use as the other editors we've looked at. However, HoTMetaL is still worth considering because it packs a lot of features. In the free version, for example, you get the following:

If you move up to HoTMetaL PRO (which will set you back big bucks: US$195), you get these extra features:

If you'd like to try out HoTMetaL for yourself, the free version is available at the following Web address:


http://www.sq.com/

Find the link that takes you to the HoTMetaL Free page, click on the Download HoTMetaL Free link, and save the file to your hard disk (saving it to an empty directory is best). When the download is complete, double-click on the file to extract the HoTMetaL setup files. Now run SETUP.EXE and follow the instructions on-screen to install HoTMetaL. The figure below shows the basic HoTMetaL screen.

The HoTMetaL window.

HTML Editors for the Mac

Most of the editors we've looked at so far have been Windows-based. Mac mavens in the crowd shouldn't feel slighted, however, because there's no shortage of editors available for the Mac. Besides the Mac versions of NaviPress, WEB Wizard, and HoTMetaL mentioned earlier, you might want to check out the following programs:

HTML Grinder  HTML Grinder isn't an HTML editor, per se. Instead, it's a powerful set of tools for automating repetitive tasks, such as finding and replacing text in multiple documents, date-stamping pages automatically, appending text to multiple documents, adding Next Page and Previous Page links, and lots more. To check it out, head for the following address:

http://www.matterform.com/grinder/htmlgrinder.html

Page Mill  From Adobe-the PageMaker people-this program lets you create pages in a simple-to-use, word-processing layout. All HTML tags are hidden, and the screen gives you a WYSIWYG look at how your page will appear on the Web. Here's the address of the Page Mill home page:

http://www.adobe.com/Apps/PageMill/

World Wide Web Weaver  This is a powerful text editor that makes it easy to insert HTML tags. To find out more, check out the Web Weaver home page:

http://www.northnet.org/best/Web.Weaver/WWWW.html

More Mac HTML Editor Info
Of the six HTML editors I mentioned here (well, five if you don't count HTML Grinder), you're bound to find one you like. Don't despair, however, if nothing turns your crank. You can get info and reviews on lots more editors at the following site:
http://www.comvista.com/net/www/editor.html

Grabbing HTML from an Existing Page

Have you ever come across a particularly striking Web page and wondered just how the heck the author pulled it off? Or have you been struggling to duplicate the layout of a favorite page, only to be thwarted by the intricacies of some obscure HTML tags? Well, I have good news for you: most Web browsers have a feature that lets you peek under the hood, so to speak, and eyeball the page's underlying HTML tags. Not only that, but it's also possible in most cases to make a copy of either the entire page or of a chunk of HTML that suits your needs. You can then incorporate this purloined code into your own pages.

Is this ethical? That depends. Obviously, if you just copy another author's page verbatim and reprint it on your own site, it's not only unethical but it's illegal. The key here is the page text, which is protected by copyright law. The HTML tags, however, have no such protection, so there's nothing wrong with using them wholesale. After all, life's too short to be constantly reinventing HTML wheels. As long as you change the text between the tags, you'll be okay.

Here's how you grab a page's underlying HTML using Netscape, NCSA Mosaic, and Internet Explorer:

Netscape  To copy the entire page, pull down the File menu, select the Save As command, and then use the Save As dialog box to save the file to your hard disk. To grab just a piece of the page, select the View menu's Document Source command and then copy the tags you need from the window that appears (just highlight them and press Ctrl+C).
NSCA Mosaic  To make a copy of the whole page, lock, stock, and barrel, select the File menu's Save As command, and then use the Save As dialog box to save the file to your hard disk. To pocket just a piece of the page, select the File menu's Document Source command and then copy the tags you need from the window that appears.
Internet Explorer  To copy the document as a whole, pull down the File menu, select the Save As command, and then use the Save As dialog box to save the file to disk. If you only need part of the document, pull down the View menu and select the Source command. Internet Explorer loads the text and tags into Notepad (see the figure below), from which you can copy whatever HTML hunks you need.

In Internet Explorer, selecting the View menu's Source command loads the document's HTML into Notepad.

Web Pages That Create Web Pages

The WEB Wizard program we looked at earlier (see "The Step-by-Step Web: WEB Wizard") enables you to create a simple home page just by filling in a few dialog boxes. The Web equivalent of dialog boxes are, of course, forms (which I talked about back in Chapter 14, "Hack to the Future: What's Ahead for HTML and the Web"). So it makes sense that some intrepid soul would take the WEB Wizard concept, apply it to the Web itself, and come up with Web pages that help you create Web pages.

And, by golly, someone has actually done it! Actually, quite a few Webmeisters have done it, so you have a choice of Web-based page-creation engines. Here's a rundown of some of the better ones:

Automatic Home Page Generator  This is a simple form that lets you specify, among other things, inline images, a background image, text (or comments, as they're called), your current interests and projects, and hypertext links. Once you've filled in the blanks, select the Submit button at the bottom of the page to see how things look. You can then copy the page to your computer (as described in the last section) for use on your Web site. Here's the URL:

http://ugweb.cs.ualberta.ca/~ritter/cgi-bin/hpg.html

Create a Homepage  This is a well-designed form with a few extra bells and whistles (see the following figure). For example, there are fields for specifying the background image (with lots of examples), the color of the regular text and the link text, the title, headings, body text (you can even enter HTML tags for things like boldfacing and italics, if you like), sections (such as a sports section), and lots more. When you're done, select the Create your homepage! button and a compressed file containing your page will be e-mailed to you. Here's the address of Create a Homepage:

http://the-inter.net/www/future21/create1.html

Create a Homepage has a few extra options not found in other page-creation forms.

Make Your Own Home Page  This is a form that lets you include an opening image, text, your own HTML, and links. For the latter, the page has dozens of suggested links to choose from. You can also select whether you want the results e-mailed to you or displayed on-screen (which you can then copy to your computer, as described in the last section). When you've completed the form, select the Make me a home page button to finish the job. You can find Make Your Own Home Page at the following address:

http://www.goliath.org/makepage/

WWW Newbies Web Page Creator  This form gives you lots of options for the background color, text color, and link color. You can also enter headings, several paragraphs of text, and up to five links. Select the Send my home page button at the bottom of the form and the page will be e-mailed to you. You can find this form at the following URL:

http://www.soos.com/homepage/homepage.html

Converting Existing Documents to HTML

Throughout this book I've concentrated on creating HTML documents from scratch. But what do you do if you have an existing non-HTML document-such as a spreadsheet, database, or word-processing file-and you'd like to publish it on the Web? In some cases, you may be able to tack on the appropriate HTML bric-a-brac by hand, but that can be time-consuming. A better approach is to find a program that will automatically convert the document into its Web-ready, HTML equivalent. This section runs through a few conversion programs for popular file formats.

Converters Galore
This collection of converters is by no means exhaustive. If you don't see the converter you need, or if you don't like any of my suggestions, here are a couple of sites that boast more extensive converter listings:
http://union.ncsa.uiuc.edu/HyperNews/get/www/html/converters.html
http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/
HTML_Converters/

For starters, you should know that some HTML editors have conversion features built right in. For example, WebEdit (see "Getting the WebEdit Page Editor," earlier in this chapter) can convert some spreadsheet and database formats to HTML. Also, HTMLed Pro (see "Professional HTML Editing with HTMLed Pro") can convert RTF documents into HTML. (RTF is a document format developed by Microsoft. Many word processors-including Word and WordPerfect-can read and write RTF documents.) Otherwise, you might want to check out any of the following conversion programs:

The Ant  Converts Word for Windows and Word for Mac documents to HTML (and vice-versa).

http://mcia.com/ant/

BeyondPress  Converts QuarkXPress files to HTML.

http://www.astrobyte.com/Astrobyte/BeyondPressInfo.html

CyberLeaf  Converts word-processing files (including Word, WordPerfect, and FrameMaker) to HTML.

http://www.ileaf.com/ip.html

dbf2html  Converts dBASE files to HTML.

http://users.aol.com/hoskinsora/windows/dbf2html.zip

Excel to HTML Table Converter  Converts Excel worksheet data into an HTML table. Works with Excel 5.0 for Windows and the Mac, as well as Excel 7 for Windows 95.

http://rs712b.gsfc.nasa.gov/704/dgd/xl2html.html

Excel (Mac) to HTML Conversion Utility  Converts Excel 5 for the Macintosh worksheet files into HTML tables.

http://www.rhodes.edu/software/readme.html

rtftohtml  Converts documents in Rich Text Format (RTF) to HTML.

ftp://ftp.cray.com/src/WWWstuff/RTF/rtftohtml_overview.html

WPTOHTML (for WordPerfect 5.1)  Converts WordPerfect 5.1 for DOS documents to HTML format.

ftp://oak.oakland.edu/SimTel/msdos/wordperf/wpt51d10.zip

WPTOHTML (for WordPerfect 6.0)  Converts WordPerfect 6.0 for DOS documents to HTML format.

ftp://oak.oakland.edu/SimTel/msdos/wordperf/wpt60d10.zip

The Least You Need to Know

This chapter closed out our look at painless page production by examining miscellaneous methods for creating Web documents. I reviewed a few more HTML editors, showed you how to scoop out HTML from existing Web pages, examined some sites that let you create Web pages right on the Web, and listed some programs that enable you to convert documents in other formats to HTML.