Skip to main content.

Web Based Programming Tutorials

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

How to use HTML 3.2

Chapter 17 -- Working with Multiple HTML Documents

Chapter 17

Working with Multiple HTML Documents


One of the most difficult tasks you'll encounter as an HTML author will be organizing all of your documents together to build a comprehensive and coherent Web site. Top-notch Web sites are more than just collections of HTML documents-the best sites are pulled together with consistent and thoughtful design.

In this chapter, you'll learn a few simple guidelines for pulling together your documents in order to build a Web site that is easy to navigate and understand. With a little effort, you can easily create and maintain the type of high-quality and compelling Web site that users will come back to again and again.

How to Organize Multiple HTML Documents

One of the first tasks you'll need to tackle when deciding how to put together multiple Web pages is how you'll physically store your documents on the server. You may be tempted to throw everything-all of your HTML documents, images, sounds, and other files-into a single directory on the server. This chaotic style of organization will appear easier in the beginning, but will eventually wreak havoc on your ability to maintain and update the Web site on an ongoing basis.

This section will give you a few tips, tricks, and pointers to get you started on organizing an efficient and easily maintainable Web site.

Tip Sheet

  1. Plan out your Web site on paper before you begin writing any HTML code. A rough sketch of all the documents you will need to prepare can help put your entire site in perspective and help you organize and create your Web site effectively. Planning an interactive multimedia Web site with plain pencil and paper may seem strange at first, but the important idea here is to plan ahead.
  2. Use subdirectories to separate different sections of your site. Each subdirectory can hold all of the relevant documents for a particular section. For example, create a subdirectory called budget to hold all of the HTML documents related to budget issues.

    Figure 17.2 :

  3. Create a special subdirectory called images to store all of your GIF and JPEG images in. If you use the same image, such as a logo, in several documents, it's much easier to have all of the documents point to one image file in a common subdirectory. For example, the URL to an image stored in a common images subdirectory might look like <A HREF="images/mylogo.gif">.

    Figure 17.3 :

  4. Develop a consistent look and feel for all of the documents in your Web site. If you use particular colors and background images in your documents, repeat those colors and images in all of your documents.
  5. Write a brief style guide that explains how headings, horizontal rules, and other HTML elements should appear in your documents. This is especially helpful if more than one person will be creating HTML documents for your Web site, and it will ensure that all of your HTML documents are consistent. You might even want to create your style guide as an HTML document for easy reference and clear examples.

    Figure 17.4 :

How to Use Navigational Aids

Providing easy ways to navigate through your pages is another crucial aspect of building an effective Web site. As with the overall organization, consistency is the most important part of designing ways to navigate through your documents.

In this section, you'll learn a few tips and tricks for creating simple icons and menus to make navigating your Web site easier and more productive.

Tip Sheet

  1. One of the most useful navigational aids is the button bar menu. This is usually a clickable image map that contains links to other parts of the Web site. If you maintain a large site with many documents, including a button bar or similar type of menu is a must.

    Figure 17.6 :

  2. If you include a clickable image map, be sure to also include an alternative text-only button bar as well. This way, users with browsers that do not support graphics will still be able to navigate around your Web site.

    Figure 17.7 :

  3. If your HTML documents follow a particular order, you should include icons with arrows. These images should be hyperlinks that point to the previous and next documents in the reading sequence. You should also include an icon that allows the reader to quickly return to the first or 'top' document in the sequence.

    Figure 17.8 :

  4. If your documents are constantly updated, it's a good idea to include icons that show which items are new and updated. Place these icons next to the hyperlinks that point to the new or updated documents.

    Figure 17.9 :

  5. Above all, be sure to maintain a consistent style and location for your navigational aids. Use the same button bars, icons, and menus throughout your Web site. If you make your Web site easy to navigate and understand, your readers will be more likely to visit again.