tom's code

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 w3.org site
it tells your browser what kind of document this is


<!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" 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


<head>

<title>clearwood.co.uk</title>

<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">

</script>

<link rel="stylesheet" href="clearweb.css">

</head>

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=



"photos/weebowling.jpg"



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

clearwood.co.uk

</div>

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
duck=document.getElementById("block1"); duck.style.display="block";'>

*first header

</a><span id="block1"><br />

**first block!

</span>

</div>



<div class="second"><a href="javascript:;"  onclick='indexload(); var
duck=document.getElementById("block2"); duck.style.display="block";'>

*second header

</a><span id="block2"><br />

**second block!

 
</span></div>



<div class="third"><a href="javascript:;"  onclick='indexload(); var
duck=document.getElementById("block3"); duck.style.display="block";'>

**third header!

</a> <span id="block3"><br />

**third block!

</span></div>



<div class="fourth"><a href="javascript:;"  onclick='indexload(); var
duck=document.getElementById("block4"); duck.style.display="block";'>

*fourth header

</a><span id="block4"><br />

**fourth block!

</span>

</div>



<div class="fifth"><a href="javascript:;"  onclick='indexload(); var
duck=document.getElementById("block5"); duck.style.display="block";'>

*fifth header

</a><span id="block5"><br />

**fifth block!

</span>

</div>



<div class="sixth"><a href="javascript:;"  onclick='indexload(); var
duck=document.getElementById("block6"); duck.style.display="block";'>

*sixth header

</a><span id="block6"><br />

**sixth block!

</span>

</div>



<div class="seventh"><a href="javascript:;"  onclick='indexload(); var
duck=document.getElementById("block7"); duck.style.display="block";'>

*seventh header

</a><span id="block7"><br />

**seventh block!

</span>

</div>



</body>

</html>

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;

  position:relative;

  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"); hen.style.display= "none"

var hen=document.getElementById("block2"); hen.style.display= "none"

var hen=document.getElementById("block3"); hen.style.display= "none"

var hen=document.getElementById("block4"); hen.style.display= "none"

var hen=document.getElementById("block5"); hen.style.display= "none"

var hen=document.getElementById("block6"); hen.style.display= "none"

var hen=document.getElementById("block7"); hen.style.display= "none"



}