Section 10.1. The Problem with Repeating Content | Creating Web Sites: The Missing Manual

10.1. The Problem with Repeating Content

By this point, you've amassed a solid toolkit of Web-page building tactics and tricks. You've learned to polish up your Web pages with modern fonts and colors, gussy them up with a trendy layout, and add images and links to the mix. However, as you apply these techniques to a complete Web site, you'll run into some new challenges.

One of the first consequences you'll face when you go from one Web page to a dozen is how to make them all consistent. If you carefully plan the structure of your Web site and you use external style sheets (Chapter 6), you'll be able to apply a common look and feel to as many pages as you want. However, style sheets won't help you if you need to have the same content in more than one page. That's a problem, because modern Web sites have specific elements that repeat on every pagetypically a header and a set of navigation buttons (see Figure 10-1).

Figure 10-1. On www.expedia.com, the same set of navigation tabs are always at the top of the window, no matter where you go. This common design crops up on sites throughout the Web.

In a large Web site, pasting the same bit of HTML into every page just isn't an optionit's a management disaster.

The problem could easily be solved if HTML supported a way to dynamically insert the contents of one HTML file into another. For example, imagine you had an <include> tag you could use like this:

 <html> <head></head> <body> <h1>Welcome to the First Page</h1>  <!-- This tag doesn't really exist. --> <include src="menu.htm">  <p>This is the welcome page. Just above this text is the handy menu for this site.</p> </body> </html>

Presumably, when the browser found the <include> tag it would request the menu.htm document and inject its HTML into the current location of the page. That way, you could create one copy of the menu.htm file and reuse it in several pages. Sadly, this feature never materialized in ordinary HTML, and Web developers have been forced to rely on other compromise measures.

Note: Many Web programming platforms do have an include feature. Examples include ASP, PHP, and ASP.NET (and a host of other techno-cool acronyms). Almost all of the Web's most popular sites are actually so-called Web applications (powerful programs that generate HTML on the fly) so they don't face the hassle of maintaining the same content in dozens of different files. Expedia (Figure 10-1) is one example.But don't rush off to pick up a degree in computer science just yet. Programming is a completely different cup of tea. Unless you have a lot of time to spare for removing cryptic bugs from computer code (a process known as debugging) and even more time to put them there in the first place (politely known as programming), you're better off using the techniques in this chapter instead.

Without a handy include feature, what's an enterprising Web designer to do? HTML doesn't include a feature for dynamically inserting a block of HTML into another file, but it does have a feature for splitting a Web browser window into several regions , or frames . Once you split the window in this way, you can show a different Web page in each frame. This feature is almost as good as the missing include feature (see the box below for some of the reasons why it's not quite the same).

FREQUENTLY ASKED QUESTION
The Frames Controversy

Are there reasons to avoid frames ?

The Web developer community has been steadily moving away from frames for several years . Although they're still alive and well in small- and medium- sized Web sites, you're unlikely to see them turn up in a large-scale Web site such as eBay or Amazon.

Some of the reasons that frames have a bad reputation are historicalfor example, ancient browsers didn't support them that well, and Web newbies used them in all the wrong ways. However, frames also have a few quirks of their own.

Here are the reasons that top-level Web professionals look like they've just bit into a lemon when you tell them you're thinking about using frames:

Search engine confusion . When you use a frame, you display several pages at once. This has the potential to confuse search engines when their automatic indexing robots stumble across just one file in a set that's meant to be shown together. They might have difficulty interpreting what your page is about, because the important content is stored in a separate page. Or, they might index your content page by itself. In this case, when someone follows the search engine link they'll wind up seeing your page without any of the other frames. These idiosyncrasies aren't the end of the world, but they aren't ideal.
Frame abuse . Some Stone Age Web developers used frames to keep part of their Web site visible when the visitor clicked on an external link. The effect is like an ad bar that never goes away. This leech-like use of frames is universally despised and almost completely expunged from today's Internet. One of the few Web sites that still uses it is www.about.com.
Future compatibility and accessibility . In Section 2.4 you learned about XHTML, the eventual successor to HTML. Although the earlier transitional versions of XHTML support frames, the latest versions don't. While frames will probably never disappear from the Web completely, they are slowly being phased out because they're not easily viewable by people with disabilities (who often use screen-reading devices) or those who use cell phones to surf the Web.
Less-effective URLs . When you surf to a frames page, the Web browser grabs the initial page for each frame. There's no way to supply visitors with a URL that lets them surf straight to the page they wantthey'll need to click their way through. You'll learn more about this issue on Section 10.3.4.

Throughout the rest of this chapter, you'll explore frames and learn how to use them to deal with repeating Web site content like headers and navigation bars.