Writing HTML | About | FAQ | Alumni | References | Tags | Lessons | back | next |

14. Lumping v.s. Splitting

Objectives

• Transform a single web page to a series of linked pages
• Create a template for multiple web pages
• Build navigational features for connecting multiple web pages

Lesson

Are you a lumper or a splitter? Neither? Both?

For organizing 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. Long, single web pages take longer to load over networks when compare to a series of smaller pages.

In many cases, you can identify logical points to "split" information into multiple web-pages. However, there is no magical formula, and opinions will vary. You should strike a balance between pages with breaks that parallel the content yet avoid forcing the reader to click through too many screens of options and sub-options before getting to the desired information. It also becomes important to build in hypertext links that help the reader navigate your information web as well as providing visual clues about their location within the web.

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

Up to now we have created a directory called volc that contains our two HTML files (index.html, the lesson, and msh.html, a second web page). We also have a second directory called pictures that contains our graphic image files.

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

• Introduction
  [intro.html]
• Volcano Terminology
  [term.html]
• Volcanic Places in the USA
  [usa.html]
• Volcanic Places on Mars
  [mars.html]
• Research Project
  [proj.html]

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

The first thing we will do is create the new index.html file, which will be the "cover" page for our Volcano Web lesson:

1. First make a copy of the index.html file you have been working on and name it old.html or something like that.
2. Now open the original of the index.html file in your text editor. This is our lesson 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.

   Delete the sections from Introduction to References, that is everything between:

     <hr>
     <h2><A NAME="intro">Introduction</A></h2>
     A <b>volcano</b> is a location where magma, 
     or hot melted rock from within a planet, reaches the surface. 
      :

   and

      :
     <dt>Lipman, P.W. and Mullineaux (eds). (1981)
     <dd><I>The 1980 Eruptions of Mount St. Helens, Washington.</I>
     U.S. Geological Survey Professional Paper 1250.
     </dl>
   

   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 labeled "In this Lesson..." In our previous work, we used hypertext links to jump to a named anchor (e.g. <a name="term">..</a>) in the same document (see lesson 8a). Now we will 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><A HREF="#term">Volcano Terminology</A>
     <li><A HREF="#usa">Volcanic Places in the USA</A>
     <li><A HREF="#mars">Volcanic Places on Mars</A>
     <li><A HREF="#project">Research Project</A></i>
     </ul>

   and edit it to read:

   <B>In this Lesson...</B>
     <ul><i>
     <li><A HREF="intro.html">Introduction</A>
     <li><A HREF="term.html">Volcano Terminology</A>
     <li><A HREF="usa.html">Volcanic Places in the USA</A>
     <li><A HREF="mars.html">Volcanic Places on Mars</A>
     <li><A HREF="proj.html">Research Project</A></i>
     </ul>

   Compare your HTML file to an example of how it should look at this point.

   NOTE: Be sure you understand the different between a link written:

     <a href="#quest">go to questions</a>

   and another one written:

     <a href="quest.html">go to questions</a>

1. In your text editor, create a new file called temp.html
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>	HEAD: In the head portion of each document, XXXXXXXX is the name of that section
   <H5>Volcano Web / <A HREF="index.html">Index</A> / <A HREF="xxxx.html">back</A> / <A HREF="xxxx.html">next</A></H5>	NAVIGATION: At the top of each page we use a small header (h=5) to create navigation links. Index points back to the main cover page. next and back link to the following and preceding pages. You will have to fill in the appropriate file name in for xxxx.html. Notice how this provides a common visual clue to each of our web pages.
   <h2>XXXXXXXX</h2> : : :	HEADER: Use a header=2 to put a title for that page.
   <hr> <ADDRESS> <b><A HREF="index.html"> Writing HTML</A> : XXXXXXXX </b><p> created by Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu"> lava@pele.bigu.edu</A> <br> Volcanic Studies, <A HREF="http://www.bigu.edu/"> Big University</A><p> <TT>last modified: April 1, 1995</TT> </ADDRESS> <p>	ADDRESS FOOTER: Note how the footer is now set up to indicate the name of the main web page (with a link back to it) as well as a line of text that indicates the name of the current section XXXXXXXX. Placing the name of the page here adds another important visual clue to the location of this page in the structure of the web we are creating.
   <tt>URL: http://www.bigu.edu/web/xxxxxxxx.html </tt> <p <body> </html>	URL: Be sure to modify the line that indicates the document's URL to reflect its file name xxxxxxxx.html

3. Now you should make 5 copies of the template file and make the appropriate changes to the template:

   File Name	Section	Notes
   intro.html	Introduction	As this is the first section, remove the line from the navigation section: <A HREF="xxxx.html">back</A>
   term.html	Volcano Terminology
   usa.html	Volcanic Places in the USA
   mars.html	Volcanic Places on Mars
   proj.html	Research Project	As this is the last section, remove the line from the navigation section: <A HREF="xxxx.html">next</A>

4. Now, open the old index.html file (that we re-named old.html) in your text editor. For each of the new files, you will have to copy the HTML that was underneath that section's <h2>...</h2> header and paste it into the new files you created in the previous step. Note that Volcanic Places in the US and Research Projects both include sub-sections that have <h3>...</h3> headers.
5. Finally, you will have to modify the link in msh.html file. Previously, it returned to a named anchor in the main lesson (the section for Volcanic Places in the US) where now it should link to the usa.html file. Open msh.html file in your text editor and edit the line to read:

     <a href="usa.html"> 
     <img src="../pictures/left.gif" alt="** "> 
     Return to
     <i>Volcano Web</i></a>

   Just to be consistent, you should also make the footer look like:

   <HR>
   <ADDRESS>
   <B><A HREF="index.html">
   Volcano Web</A> : <A HREF="usa.html">
   Volcanic Places in the USA</A> : 
   Mount St. Helens</B> <p>
   
   created by Lorrie Lava, 
   <A HREF="mailto:lava@pele.bigu.edu">
   lava@pele.bigu.edu</A><br>
   Volcanic Studies, 
   <A HREF="http://www.bigu.edu/">
   Big University</A><p>
   <TT>last modified: April 1, 1995</TT>
   </ADDRESS>
   <p>
   <tt>URL: http://www.bigu.edu/web/msh.html</tt>
   
   </body>
   </html>

Check Your Work

Review

1. What are some advantages of short, multiple web pages over a single, long web page?
2. What would have happened if we did not modify the hypertext link in the msh.html file?
3. What were the navigational features we added to our lesson?

More Information

In the spring of 1980, most people living in the vicinity of Mount St. Helens took heed of the scientists' warning about an impending volcanic eruption. However, several were insistent on staying in their homes and sadly perished in the May 18 event. In that same year, measured increases in seismic recording devices caused scientists to warn of a possible event in Long Valley, California, and order a large evacuation of the Mammoth resort area. However, no such event occurred, and residents were angrily resentful for what they perceived as a false warning that caused great economic loss.

In the spring of 1980, most people living in the vicinity of Mount St. Helens took heed of the scientists' warning about an impending volcanic eruption. (Click here to see a picture of Mount St. Helens) However, several were insistent on staying in their homes and sadly perished in the May 18 event. In that same year, measured increases in seismic recording devices caused scientists to warn of a possible event in Long Valley, California, and order a large evacuation of the Mammoth resort area. (Click here to see a seismometer) However, no such event occurred, and residents were angrily resentful for what they perceived as a false warning that caused great economic loss.

Independent Practice

Now ask some friends/colleagues to view your pages. Do they prefer the "split" pages or the "lumped" one? Could they easily negotiate their way through your information?

Coming Next....

GO TO.... | Lesson Index | back: "Blockquotes" | next: "Standard and Enhanced HTML" |

URL: http://www.mcli.dist.maricopa.edu/tut/tut14.html