How does the web page look? Well, we're not going to include a screen shot this time, because adding those div elements should make no visual difference at all. The changes we just made are structural ones that we'll build on later.

Note: Show a Little Restraint

Don't go overboard adding divs. Some people can get carried away as they section off the page, with <div> tags appearing all over the place. Overly enthusiastic use of the div can result in a condition that has become known as "div-itis." Be careful not to litter your markup with superfluous <div> tags just because you can.

Splitting Up the Page

We've been making good progress on our fictitious site ... but is a web site really a web site when it contains only one page? Just as the question, "Can you have a sentence with just one word?" can be answered with a one-word sentence ("Yes"), so too can the question about our one-page web site. But it's not really ideal, is it? You didn't buy this book to learn how to create one page, did you?

Let's take a look at how we can split the page we've been working on into separate entities, and how these pages relate to each other.

First, let's just ensure that your page is in good shape before we go forward. The page should reflect the markup shown in the last large block presented in the previous section (after we added the <div> tags). If not, go to the code archive and grab the version that contains the divs). Save it as index.html in your web site's folder (if you see a prompt that asks whether you want to overwrite the existing file, click Yes).

Got that file ready? Let's break it into three pages. First, make two copies of the file:

• Click on the index.html icon in Windows Explorer or Finder.
• To copy the file, select Edit > Copy.
• To paste a copy in the same location, select Edit > Paste.
• Repeat the process once more.

You should now have three HTML files in the folder that holds your web site files. The index.html file should stay as it is for the time being, but take a moment to rename the other two (select each file in turn, choosing File > Rename, if you're using Windows; Mac users, simply select the file by clicking on it, then hit Return to edit the filename).

• Rename one file as contact.html (all lowercase).
• Rename the other one as about.html (all lowercase).

Note: Where's my File Extension?

If your filename appears as just index in Windows Explorer, your system is currently set up to hide extensions for files that Windows recognizes. To make the extensions visible, follow these simple steps:

1. Launch Windows Explorer.#eli#/
   
2. For Windows ME/2000/XP, select Tools > Folder Options... (on Windows 98, this is View > Folder Options...).#eli#/
   
3. Select the View tab.#eli#/
   
4. In the Advanced Settings group, make sure that Hide extensions for known file types does not have a tick next to it.

We have three identical copies of our XHTML page. Now, we need to edit the content of these pages so that each page includes only the content that's relevant to that page.

To open an existing file in Notepad, select File > Open, and in the window that appears, change Files of type to All Files. Now, when you go to your Web folder, you'll see that all the files in that folder are available for opening.

Opening a file in TextEdit is a similar process. Select File > Open to open a file, but make sure that Ignore rich text commands is checked.

In your text editor, open each page in turn, and edit them as follows (remembering to save your changes to each before you open the next file):

• index.html -- Delete the "About Us" and "Contact Us" sections (both the headings and the paragraphs that follow them), ensuring that the rest of the markup remains untouched. Be careful not to delete the <div> and </div> tags that enclose the body content.
• about.html -- Delete the introductory spiel (the level two heading and associated paragraphs, including the image) and remove the "Contact Us" section (including the heading and paragraphs).
• contact.html -- You should be getting the hang of this now (if you're not sure you've got it right, keep reading: we'll show the altered markup in a moment). This time, we're removing the introductory spiel and the "About Us" section.

Now, each of the three files contains the content that suits its respective filename, but a further change is required for the two newly created files. Open about.html in your text editor and make the following amendments:

• Change the contents of the title element to read "About BubbleUnder.com: who we are; what this site is for."
• Change the level three heading <h3>About Us</h3> to a level two heading. In the process of editing our original homepage, we've lost one of our heading levels. Previously, the "About Us" and "Contact Us" headings were marked up as level three headings that sat under the level two "Welcome" heading. It's not good practice to skip heading levels -- an h2 following h1 is preferable to an h3 following an h1.

Next, open contact.html in your text editor and make the following changes:

• Amend the contents of the title element to read, "Contact Us at Bubble Under."
• Change the level three heading to a level two heading, as you did for about.html.

If everything has gone to plan, you should have three files named index.html, about.html, and contact.html.

The markup for each should be as follows:

Example 2.14. index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>Bubble Under - The diving club for the south-west  
       UK</title>

   <meta http-equiv="Content-Type"  
       content="text/html; charset=utf-8" />
 </head>
 <body>
   <div id="header">
     <div id="sitebranding">
       <h1>BubbleUnder.com</h1>

     </div>
     <div id="tagline">
       <p>Diving club for the south-west UK - let's make a  
           splash!</p>
     </div>
   </div> <!-- end of header div -->

   <div id="bodycontent">
     <h2>Welcome to our super-dooper Scuba site</h2>
     <p><img src="divers-circle.jpg"
         alt="A circle of divers practice their skills"  
         width="200" height="162" /></p>
     <p>Glad you could drop in and share some air with us! You've
         passed your underwater navigation skills and  
         successfully found your way to the start point - or in  
         this case, our home page.</p>

   </div> <!-- end of bodycontent div -->
 </body>
</html>




Share and Enjoy: