HTML 4 For Dummies - Bonus Chapters

Lots of Hard Work


After we obtain the go-ahead for a site, the real work begins. Every site is different, but each one usually includes similar objects or employs similar tools during the creation process. Sometimes we strive to complete entire subjects at a time; other times we aim to complete graphics first and then polish off the markup. We’ve also started with blank pages and created the navigation first and dropped the content in last.

Ultimately, how you get things done or the order in which you accomplish them doesn’t matter (other than handling your short list of dependency relationships -- even Superman can’t subvert that order). To help you understand what we do, we list each significant activity and the tools we use in its pursuit in the following sections. Please note that these sections occur in no meaningful order, and we often perform each of these activities more than once in the course of completing a site.


The graphics we use on our Web sites range from navigational controls to content-specific images. You can find many different graphics tools to help you realize different graphical goals. We use one of two graphical utilities in some way for every graphic in our Web sites -- namely Adobe Photoshop and Paint Shop Pro.

We use Adobe Photoshop to create, manipulate, and edit large, high-resolution images. Photoshop offers many wonderful editing features and graphical capabilities. Some of its most notable abilities include reliable color management and a flexible selection feature (which is the ability to define specific areas of a graphic to edit while leaving others untouched. This is useful for cut and paste, fills, bleeds, and much more). Photoshop is also our graphics editor of choice when converting images to .GIF format.

We use Paint Shop Pro (PSP) to handle low-end graphics. This includes working with .GIFs after processing them through Photoshop, or those we create directly in PSP. PSP is great for direct editing of a 256-color palette. It can zoom in on images for pixel-by-pixel view and edit maneuvers. We also use PSP instead of Photoshop for .GIFs because PSP doesn’t take up as much memory or system resources and works faster when manipulating small or low-color images.

Using Photoshop and Paint Shop Pro on graphics doesn’t always give us everything we need for our sites. Here are some other specialized tools that we use less frequently when working with more sophisticated graphics:

Animated .GIFs

Web Icon Animated .GIFs are cool because they supply an easy method to add graphical action to a Web site. We use the GIF Construction Set (GCS) tool from Alchemy Mindworks. You can download the shareware version from

GCS is easy to use, but you must create the graphics first. In case you don’t know, an animated .GIF is just a series of images displayed one at a time in a timed sequence to create the illusion of movement (or a change in a displayed image). An animated .GIF can be constructed with anywhere from two to 2,000 images. The more images you use, the more animation that’s possible, but the larger the resulting file becomes.

We use Paint Shop Pro to create the images for animated .GIFs. We create the first image, then save it to a named and numbered file, such as angif01.gif. We then make a slight change to the graphic and save it again with a new name where the sequence number is incremented, such as anigif02.gif. We repeat this until our sequence is complete. Most of our animation consist of ten images or less.

Using GCS, we add each image in sequence to the animation and define its display properties. After the sequence is complete, we save it and load it in a browser to see how it works. Usually we must tweak things for a while to make the animated .GIF do what we want.

Web Icon For more information on creating animated .GIFs and related utilities, check out the GIF Animation information at

Image maps

When it comes to image maps, we think only one utility is worth the time (if you’re a Windows user, that is) -- LiveImage The predecessor to Map This!, LiveImage is an amazing tool for creating map files and HTML markup for client-side image maps. Since we discovered this tool, we no longer create image maps by hand. All we do now is create the graphic, convert it to .GIF, and then load it into LiveImage From there we simply point and click to define active regions and indicate their destinations. That’s all there is to it!

Web Icon

You can get more details and download shareware versions from:


HTML authoring is where you’ll spend most of your Web creation efforts. If you’re new to HTML, you may prefer using an HTML editor until you become more experienced with the markup. It didn’t take us long to run screaming from most HTML editors because we wanted more control over our markup. That’s why we always use a plain old text editor. Our preference is a tool called Programmers File Editor 32 (PFE). This utility has lots of the features you’d find in a full-blown word processor, but without the extra overhead and no mucking about with file types. This baby handles text-only formats and nothing else, but it includes lots of extensibility and macro-definition capabilities.

Web Icon

To learn more about PFE (or to download this freeware product), visit

We usually create a template file that we reuse for each of the pages within a given site or subsection. This makes creating navigation and footer information simple. Plus, it ensures that layout and construction of each page is nearly identical to other pages.


When we discover that we need to make changes to the same line in every document, especially when such changes are the same for all or many documents, we use a search-and-replace utility, called Search/Replace. This tool, from Floersch Enterprises, is easy and fast to use. Simply point it at those files you want handled and provide a search-and-replace string and then bingo -- it’s done!

Web Icon

Here’s the best place to obtain information about Search/Replace


No matter how good you are at creating HTML, you must check your work. We check our work both online and offline. During the offline phase (that’s the time before you FTP your files up to your Web server), we use three different browsers to test our work: Netscape Communicator, Microsoft Internet Explorer, and NCSA Mosaic. We use the newest full releases and any beta or preview releases of these browsers. Plus, we always look at our sites in progress with every browser we can lay our hands on. We want to present our content equally to everyone, so we make sure most browsers can handle our sites.


Even though we don’t use an HTML editor, that doesn’t mean that we code HTML straight from our forebrains. We often use online and offline references to look up attributes and values for tags. The offline resources we use include HTML 4 For Dummies and another handy guide: The HipPocket Guide to HTML 4.0, by Ed Tittel, James Michael Stewart, and Natanya Pitts. IDG Books Worldwide, 1997.

Web Icon

As for online resources, here are a few indispensable items:

Extra 10 Main Page | Previous Section | Next Section

Home | Bonus Chapters | FTP Resources | Site Overview | Book Contents | Book URLs | Book Examples | Wayfinding Toolkit | Contact Info

E-mail: HTML For Dummies

Webmaster: Natanya Pitts, LANWrights
Copyright Information
Revised -- January 16, 1998