For example, suppose you're making a simple web site for a company
called Wizard's Widgets, and you want the site to consist of three
pages: a home page (index.html), an ordering page (ordering.html),
and a page of contact information (contact.html). You'd like all three
pages to have the same basic layout, with a logo in the upper left
corner, a title across the top, and a menu down the left-hand side.
The pages might look like this:
This has a consistent look across all the pages; the only parts that
differ from page to page are the title across the top, and the text in
the middle of the page.
The HTML for one of these pages, say the home page, might
look like this:
<table width=100% border=0 cellpadding=2>
<td width=20% valign=top><a href="index.html">
<img border=0 src="wlogo.png"></a></td>
<td width=80% valign=top align=center>
<tr><td colspan=2> </td></tr>
Wizard's offers the world's best widgets at unbeatable
prices. Order yours today and receive a free gadget gift
with your order.
You'd probably start creating this site by writing index.html
first. Once you've done that, you could create the other two pages by
copying index.html and changing the title across the top and
the text in the middle of the page.
If you later decide to change other than this "main body" of text,
or the title, however, for example if you add another
page to the site and want to add a link for it to the menu on the left
side, you'll need to edit three different pages to make that change.
In this simple example it'd be relatively easy because the page design
is so simple and the site only has three pages. But in reality most
web pages are much more complicated than this, and most web sites have
many more than three pages, and making identical changes to a bunch of
pages is a pain and is error prone.
So some way to specify the common parts of the pages just
once, so that you'll only have to change them in one place if/when
they change, would be really helpful.
Next: Server-Side Includes