14. Lumping & Splitting

Would ya look at that, you've made a single web page! But, NOW, my HTML-literate friend, it is time to transform this ordinary long-scrolling "page" into a logically connected "web" of information.

For organizing your information, sometimes it's better to "lump" things together; other times it is better to "split" them apart. Scrolling through long web pages is often tedious and becomes boring. Long, single web pages take longer to load over slower networks when compare to a series of smaller pages.

So far we have built one long web page with a link to a shorter page. In lesson 8d we created a list of links that worked as a table of contents by connecting them to named anchors for the different sections of the Web-Page. These same divisions would be good breakpoints for splitting the single long page into sub-pages

We are now going to split the single Web file into a series of smaller web pages, linked as shown in this diagram below. The entry point is the main index/cover page, index.htm that has the links that point to each of the other parts of our lesson:

Introduction { intro.htm } Venus { venus.htm } Volcanic Tours Of Venus { volcanic.htm } Tropical Centres Of Venus { tropical.htm } Uranus { uranus.htm } Skiing On Mt Wannahockaloogie { mtwanna.htm } Skating on Lake Unix { lakeunix.htm }

Each page will link back to the index as well as to the preceding and following pages. Also note the two-way link between volcanic.htm and issapissin.htm

And our new directory structure will now look like this:

Structure

Work Folder         index.html       content directory intro.htm issapissin.htm lakeunix.htm mtwanna.htm tropical.htm uranus.htm venus.htm volcanic.htm         images buttonleft.jpg beach.jpg lake.jpg seismo.jpg skiing.jpg stamp.gif trees.jpg Uranus.jpg venus.gif Volcano.jpg

NOTE: To complete this lesson, we are going to create quite a few new files and also do a fair bit of copy/pasting from the files we have been working on. Make sure that you are comfortable switching between the different application and document windows on your computer.

The first thing we are going to do is create a new index.htm file, which will be the "cover" page for our Space Tours Web Site.

1. First we need to make a copy of the index.htm file we have been working on and name it oldindex.htm or something you prefer. This is a very good habit when you start making major changes to your web pages!
2. Now open the original version of the index.htm file in your text editor. This is the file that we have been working on to this point.
3. We are going to use the picture, the opening text/quotation, and the table of contents as the content for our title page. To do this, we will remove the sections that will be "split" out to other web pages.

   
   <h2><a name="intro">Introduction</a></h2>	
   
   	Right through to the
   
   <hr /> tag above our address footer			  
   			 

   You may want to compare your HTML file to an EXAMPLE of how it should look at this point.

4. Now look at the section labelled "In this Lesson.." In our previous work, we used hypertext links to jump to a named anchor..
   (e.g. <a name="xxx"> .. </a>) in the same document (see lesson 8a). Now we are going to modify these anchor links so that each jumps to another web page (which we will create below).

   Find the portion that reads:

   <b>In this Lesson..</b>
    <ul><i>
      <li><a href="#intro">
        Introduction</a></li>
      <li><a href="#venus">
        Venus</a></li>
      <li><a href="#volcanic">
        Volcanic Tours Of Venus</a></li>
      <li><a href="#tropical">
        Tropical Centres Of Venus</a></li>
      <li><a href="#uranus">
        Uranus</a></li>
      <li><a href="#wannahock">
        Skiing On Mt. WannaHockALoogie</a></li>
      <li><a href="#unix">
        Skating on Lake Unix</a></li>
   </i></ul>
   <hr />

   And change your document so it now reads.

   <b>In this Lesson...</b>
    <ul><i>
      <li><a href="content/intro.htm">
        Introduction</a></li>
      <li><a href="content/venus.htm">
        Venus</a></li>
      <li><a href="content/volcanic.htm">
        Volcanic Tours Of Venus</a></li>
      <li><a href="content/tropical.htm">
        Tropical Centres Of Venus</a></li>
      <li><a href="content/uranus.htm">
        Uranus</a></li>
      <li><a href="content/mtwanna.htm">
        Skiing On Mt. WannaHockALoogie</a></li>
      <li><a href="content/lakeunix.htm">
        Skating on Lake Unix</a></li>
   </i></ul>
   <hr />

Compare your HTML file again to an EXAMPLE of how it should look now.

Now what we will have to do is create the individual files for the other parts of this lesson. It will be easier if we first create a template file that we can modify for each of the different pages we are going to make.

1. In your text editor, create the new file called temp.htm
2. In this file, put the following HTML (If you wish, you can copy an EXAMPLE template file):

   HTML

   NOTES

   <html> <head> <title>XXXXXXXX</title> </head> <body> <h5>Tours Menu <a href="index.htm">Index</a> <a href="xxxx.htm">back</a> <a href="xxxx.htm">next</a></h5> <h2>XXXXXXXX</h2> : : : <hr /> <address> <b>Page title</b><br /> created by Chris Bland, <a href="mailto:chris@eazyhtml.com"> chris@eazyhtml.com</a><br /> Eazy HTML, <a href="http://www.eazyhtml.com/"> Eazy HTML</a> <p><tt> last modified: December 13, 2004 </tt></p> </address> <p><tt> URL: http://www.eazyhtml.com/pages/xxxx.htm </tt></p> <body> </html>

   HEAD: This is for the head portion of each document; XXXXXXXX is the name of that page. THE NAVIGATION At the top of each of our pages we are going to use the small header (h5) to create our navigation links. Index will navigate back to the main cover page. next and back will link to the following and preceding pages. All you will have to do is fill in the correct file name in for xxxx.htm. Notice how this is providing a common visual clue to each of our web pages. THE HEADER We are going to be using a header=2 (h2) to put a title in to each page. ADDRESS FOOTER See how we set the footer up and is now set up to indicate the name of the main web page with a hyperlink link back to it, as well as a line of text that indicates the name of the current document your viewing XXXXXXXX. Placing the name of the page here also adds another important visual clue to the location of your web page in the structure of the web site we are now creating. URL: Be sure to modify this line to reflect the document's URL and name

3. Now we are going to make 7 copies of the temp.htm file & then make the appropriate changes by naming each of the files:
   
   
   • intro.htm
     { Introduction } <- In The Header (h2) tag.
   • lakeunix.htm
     { Skating Lake Unix } <- In The Header (h2) tag.
   • mtwanna.htm
     { Skiing On Mt. Wannahockaloogie } <- In The Header (h2) tag.
   • tropical.htm
     { Venus's Tropical Centres } <- In The Header (h2) tag.
   • uranus.htm
     { Uranus } <- In The Header (h2) tag.
   • venus.htm
     { Venus } <- In The Header (h2) tag.
   • volcanic.htm
     { Venus's Volcanic Tours } <- In The Header (h2) tag.
   
   
4. Now, we are going to open the old index.html file (that we re-named earlier) in your text editor. For each of the new files we are about to create, you will have to copy the HTML that was underneath that section's <h2>...</h2> header and paste it into the new files we created in the previous step.

   Finally, you're going to have to modify the hyperlink in issapissin.htm file. Previously, the link returned to a named anchor on the main page. Now it should link to the volcanic.htm file. Open issapissin.htm file in your text editor and edit the line to read:

   
     <a href="volcanic.htm">
      <img src="images/buttonleft.jpg" border="0">
       Return to <i>Eazy Space Tours</i></a>
   			

CHECK YOUR WORK
Now compare your web pages with this EXAMPLE of how it should appear. If the pages you made are different from the sample or the hypertext links aren't working correctly, review the text you entered in the text editor. In this lesson we created a lot of files and it is very easy to make a typographical error.

MORE INFORMATION
Stylistically, your web pages are a lot more readable and neater if the hypertext links are integrated into the text of the content it's self. This will become more important as you begin to create more & more web pages that have hypertext to link them together. Compare:

Click Here hypertext links

The Quick Brown Fox Jumped Over The Lazy Cow. Bread And Butter. The Quick Brown Fox Jumped Over The Lazy Cow. Bread And Butter. The Quick Brown Fox Jumped Over The Lazy Cow. Bread And Butter. The Quick Brown Fox Jumped Over The Lazy Cow. Bread And Butter. (click here to view a picture)The Quick Brown Fox Jumped Over The Lazy Cow. Bread And Butter. The Quick Brown Fox Jumped Over The Lazy Cow. Bread And Butter. The Quick Brown Fox Jumped Over The Lazy Cow. Bread And Butter. The Quick Brown Fox Jumped Over The Lazy Cow. Bread And Butter. The Quick Brown Fox Jumped Over The Lazy Cow. Bread And Butter. The Quick Brown Fox Jumped Over The Lazy Cow. Bread And Butter. The Quick Brown Fox Jumped Over The Lazy Cow. (Click here to view a second image) Bread And Butter. The Quick Brown Fox Jumped Over The Lazy Cow.

Integrated hypertext links

The Quick Brown Fox Jumped Over The Lazy Cow. Bread And Butter. The Quick Brown Fox Jumped Over The Lazy Cow. Bread And Butter. The Quick Brown Fox Jumped Over The Lazy Cow. Bread And Butter. The Quick Brown Fox Jumped Over The Lazy Cow. Bread And Butter. The Quick Brown Fox Jumped Over The Lazy Cow. Bread And Butter. The Quick Brown Fox Jumped Over The Lazy Cow. Bread And Butter. The Quick Brown Fox Jumped Over The Lazy Cow. Bread And Butter. The Quick Brown Fox Jumped Over The Lazy Cow. Bread And Butter. The Quick Brown Fox Jumped Over The Lazy Cow. Bread And Butter. The Quick Brown Fox Jumped Over The Lazy Cow. Bread And Butter. The Quick Brown Fox Jumped Over The Lazy Cow. Bread And Butter.

It's very apparent that the "Click here..." hypertext not only disrupts the flow of your text, but the text is not related to the intended item at all. Integrated hypertext links like we showed you in the second example is a much better way of linking to images and it does not interrupt the flow of your text.

Practice
Experiment with the Integration of hypertext links into your own web page. This can be effective for adding some more variety to your web page layout and still remains neat and readable.

Top of page | Previous Lesson| Lessons Index | Next Lesson