tom's code
steal this code
notesthis is beginner's level coding
the 2005 code described here was XHTML and in 2023 I'm rewriting in html5
there's not much difference except the new version is notably simpler

so the idea here is to make these content sections that open up selectively
HTML to set up the structure and content, or pointers to the content, of each page
CSS to define the appearance of the page
and javascript to program the actions
the page code
an xhtml page is made up of text
and instructions for your browser enclosed in tags
like <this>
this is the code for template.htm

the first section is a document type declaration
which is copied from the site
it tells your browser what kind of document this is

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> <html xmlns="" lang="en" xml:lang="en">

next the header of the document including it's title
and the links that connect in the stylesheet and the javascript files

<meta name="description" content="made interesting by hand">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="clearwood.js">
<link rel="stylesheet" href="clearweb.css">

this is where the body of the page starts
as soon as it is loaded into the browser it calls the javascript function "indexload()" which hides those parts of the page called block1 block2 etc

<body onload="indexload()">

next is the division that contains the picture and heading for the page

<div class="pop">
<a href="howsitdone.htm">
<img src=


alt="back" /></a><br /><br />

the rest of the page consists of seven divisions into which I can place page content
each is accessed by it's heading link which runs the "onclick" javascript to open up the previously hidden content

<div class="first"><a href="javascript:;" onclick='indexload(); var
*first header
</a><span id="block1"><br />
**first block!

<div class="second"><a href="javascript:;" onclick='indexload(); var
*second header
</a><span id="block2"><br />
**second block!

<div class="third"><a href="javascript:;" onclick='indexload(); var
**third header!
</a> <span id="block3"><br />
**third block!

<div class="fourth"><a href="javascript:;" onclick='indexload(); var
*fourth header
</a><span id="block4"><br />
**fourth block!

<div class="fifth"><a href="javascript:;" onclick='indexload(); var
*fifth header
</a><span id="block5"><br />
**fifth block!

<div class="sixth"><a href="javascript:;" onclick='indexload(); var
*sixth header
</a><span id="block6"><br />
**sixth block!

<div class="seventh"><a href="javascript:;" onclick='indexload(); var
*seventh header
</a><span id="block7"><br />
**seventh block!


the style sheet
a style sheet is a list of tags
and of formats to be applied to those tags
a {
color: #440;

a:hover, a:active {
color: #420;

body {
vertical-align: top;
letter-spacing: 1px;
word-spacing: 8px;
line-height: 100%;
font-size: 120%;
font-weight: bold;
font-family: sans-serif;
text-align: left;
background-color: #088;

.pop {
font-size: 150%;
line-height: 80%;
font-weight: bold;
color: black;
background-color: #6fc;

img {
vertical-align: center;
padding: 0px;
border: 2px black solid;

div.first {background-color: #6fc;}
div.second {background-color: #8eb;}
div.third {background-color: #ada;}
div.fourth { background-color: #cd8;}
div.fifth {background-color: #dc6;}
div.sixth {background-color: #ec4;}
div.seventh {background-color: #fb2;}

div {
text-align: right;
left: 60px;
width: 555px;
color: #440;
background-color: gray;
padding: 5px;
border-top: 2px black solid;
border-right: 2px black solid;
border-bottom: 2px black solid;
border-left: 2px black solid;

the javascript
this scrap of code closes up the blocks in the divisions of my page
it's a javascript function that gets called whenever the page is loaded
or one of those opener links gets clicked
function indexload(){
var hen=document.getElementById("block1"); "none"
var hen=document.getElementById("block2"); "none"
var hen=document.getElementById("block3"); "none"
var hen=document.getElementById("block4"); "none"
var hen=document.getElementById("block5"); "none"
var hen=document.getElementById("block6"); "none"
var hen=document.getElementById("block7"); "none"


Valid XHTML 1.0! Valid CSS!