CHAPTER 8
Following the Recipe TOC

one wing of fly
not very dry
three mantis eyes
rare though they seem
baked on summer eves
Oh, I left out grape leaves

Why Use Templates?TOC




Oftentimes, the best way to learn is by example. This notion applies well to the use of computers and technology. It is, in fact, one reason for the phenomenal growth of the Internet. Perhaps you wish to use your computer in a way that is not covered in your computer manual. Configuring the computer in the exact style you wish can be very time consuming. Now instead of spending your time aimlessly, you ask a friend who knows more about computers. If you use an internet bulletin board, your chances of finding someone who knows the answer to your questionb is multiplied a hundredfold. Likewise, using templates is akin to using a recipe and tasting the dish before you cook it.

Using templates can be a real time saver requiring much les time to achieve the desired results. When you make use of templates you can choose the final form of your webpage before you actually create it.

On the other hand, using templates may give you a false sense of security. While a great deal can be learned quickly, nice results can also be obtained without learning much. Still, I beleive that using templates with students will give them an understanding of the basic principals of HTML document writing. Once you and your students become comfortable with HTML, you can then read reference guides with greater understanding and confidence.

What Exactly is a Template? TOC




The word template derives from the latin word "templum" meaning temple or "space marked out." In carpentry and sewing it refers to a fixed pattern or design, usually cut from a wooden plate or cloth, and used for marking replicas.

Templates are examples. Using templates will allow you to learn a great deal quickly. After you have discovered some of the methods for designing webpages, reading about HTML tags and tag attributes will be more rewarding and helpful.


A Note on Using TemplatesTOC

    If reading about tags and attributes gives you a headache, then start out by using templates and simply modifying them. This will give you an intuition concerning the structure of HTML. You will find that you grow more confident each time you modify a page. Eventually, you will want to return to the definitions of tags and attributes in order to use them more effectively



The procedure adopted in this book is based on the use of ever more advanced webpage templates. Each template contains instruction by way of comments to help the individual modify the template to their liking.

I have included several template examples in the proceeding projects. We will review some of these examples with a eye toward combining parts, or modules, of many different templates into a single document.

Template WorksheetTOC




The idea of using templates is to use a predesigned form and to modify that form to your own individual needs. When you use templates, I suggest that you consider using the following procedures:


  • Always make a backup copy of the original webpage file. Then if the file becomes corrupted, you can start over with a working file.

  • Make small changes in the file. After each such change save the file and test your changes by reloading the file on your World-Wide Web browser. Some editing systems will automatically allow you to view your changes. But if you are using a windowing system you only need to have your browser running in a separate window and "hit" the reload button. You will not see the changes you have made to the file unless you "Save" your file each time you try to view it.

  • Each time you view the webpage and feel that you have made a significant improvement, make a backup copy of the file. A good name for the backup copy is

    • *.bak,

    where the asterisk represents the name of the webpage.

  • If your changes make the webpage unviewable or too messy to fix, "Open" the backup copy and "Save As"

    • *.htm,

    where the asterisk represents your webpage name.



How Can I Move Inside the Page?TOC




Sometimes it is convenient and fun to build a long list on a single page. At the same time it is no fun to go searching on the page. You can use the browsers "find" command in the pull down menu, but it is more convenient especially if many people will be using the page to include a table of contents at the top. Consider the following case:

A Listing of ListsTOC


In this section we consider a strand of webpages as a listing device.


  • alist.html




    An Anchored List of all Lists

    Self-Made Bullets

    Different Icons

    Ordered Lists

    Unordered Lists

    Mixed Lists



    In this case I have constructed a list of anchors, but instead of giving a URL address to another document I have given each of my lists a name. The list of "Self-Made Bullets" I have referred to as

  • #list1

    The # is necessary but the actual name of the list is:

  • list1

    Now notice that you may read the basic code by using the anchor link

  • alist.html
    above or using the copy in the Projects folder. To create this kind of list I have inserted an anchor-type with a NAME attribute instead of the usual HREF attribute. The NAME attribute is given the value list1 and consequently the browser "knows" where to find the first list. The use of the word "list1" is unimportant. You may use any word you like but the word you use in the index for the HREF attribute must correspond to the word you use for the NAME attribute below.


    Column SystemsTOC


    It is not difficult to create documents with columns using HTML. The basic idea is to create a series of data tables lined up in a row. If you want two columns then you need two data tables of equal width. If you want a margin that supplements your main column you need two data tables with the margin table roughly half the width of the main column.

    In this case, I will let the browser demonstrate :


  • twocol.html

    It is easy and sometimes convenient to use columns in your documents. To do so often adds a style and polish that can be obtained in no other way. The easiest way to do this is by using a

    table row and two table-data elements. You may want to try using this approach. There is a sample document at
    • Templates\twocol.html
    to be used as a template.




    The above table is in two column format. The table below is in margin format :


  • marg.html


    Using a margin is an effective way to highlight material for your students. I like to keep my documents under a total width of 650. This makes them easy to view on most systems.

    • Use a smaller font in the margin
    • Experiment with table sizes
    • Try using a simple background which highlights the margin.
    You will find this webpage at:
    • Templates\marg.html
    Use it as a template.




    To use these templates simply "Save As" to a file of your choosing. Delete my writing and add your own. If you want the tables to read like pages, then end the writing when you have filled your screen and create a second table down below by making a copy of your first table. Now edit the second table. I have created a two column template at

  • Webbing\Templates\ twocol.htm

    but the results will vary from system to system. My version may not look so great on your system. Adapt the style to suite your needs. If you prefer the margin style the template can be found at

  • Webbing\ Templates\ marg.htm


    List SystemsTOC




    The following list systems have been placed on the Templates directory.

    • alists.htm

    • lists.htm

    • listing.htm

    • list*.htm

    where the last entry stands for a set of numbered list documents. Use them as templates and copy the parts into your own HTML documents adapting them to your list requirement's. I rarely start from scratch when writing a new webpage. In fact, I can not ever remember beginning a document without copying another working HTML document as my starter. It is like baking sourdough bread. You might start from scratch, but it will take a lot longer than using a starter dough.


    Picture GalleriesTOC




    I have constructed a picture gallery with thumbnail-type In-line images
  • galry.html




    which gives the table an interesting look. You may construct tables like this for calendars or almost anything. The template is found at

  • Webbing\Template\galry.htm

    You can create interesting graphics without using In-line images. For instance, you can use tables to create calendars. You can find a calendar for January 1997 at:

  • cal.html


    January 1997
    SunMonTueWed ThrFriSat
    . . . 1 2 3 4
    5 6 7 8 9 10 11
    12 13 14 15 16 17 18
    19 20 21 22 23 24 25
    26 27 28 29 30 31 .



    You can modify the template to create a calendar for any month. Be creative and anchor each day in the calendar to a special website. I have done this for the date January 1, 1997.



    What is a Decision Tree?TOC



    As a final example, in this chapter, I have constructed a stain glass project. This project can be modified by changing the graphics files associated to the background and the border. The entire project is intended for the students as a game. The purpose of the game and this section is to introduce the students to the notion of descision trees and how they are related to family trees. The project at the end of the chapter will allow the student to create their own stain glass window by using a color enabled browser. If you do not have a color enabled browser simply have the students modify the existing graphics for the creating new graphics files or modifying the existing graphics files.

    A decision tree is like a family tree. Instead of listing parents and children the decision tree lists choices. An example of a decision tree is given by the following problem: Build a webpage that allows a student to construct a stain glass window. The project will have the following characteristics:

    • Five choices for the background.

    • Three choices for the border

    • Two choices for a center design color.

    The following decision tree represents the first two decision's:

    Tree Diagram

    Stained Glass Project Steps 1 and 2



    The project begins with a homepage called

  • stain.html

    in the directory

  • Sgp

    In the first step there are five backgrounds to choose from. This is represented in the decision tree by the family tree with five children. In the project there are five pages labeled

  • step2.html

    and each such page is in a different child/subdirectory. Then the projects decision tree is related to the directory tree. The directory, Sgp, is the parent to five children/subdirectories.

  • back1

  • back2

  • back3

  • back4

  • back5

    This is so that the computer can distinguish between the different copies of the step2 pages.


    Stained Glass

    Opening Window of Stained Glass Project


    In the second step there are exactly three choices. These choices are hyperlinked to files in the children/subdirectories named

  • border1

  • border2

  • border3

    There are fifteen such subdirectories each with a files named

  • step3.html

  • fin1.html

  • fin2.html

    If I count carefully, and I sometimes do, I would calculate that 65 HTML documents are needed to create the stain glass project.


    ReferencesTOC




    		•