Alana,
Although I didn't write it, I intended to indicate that the rest of the head should stay as it is. It identifies the style sheet location and has a style section where additional style elements just for this page could be inserted.
Continuing, in your old code you have placed google analytics and pageTracker codes between the head and body sections. Google instructions call for putting its code inside the body, at the bottom, just before the closing tag </body>. I do not know about pageTracker. If you intend to keep these I would copy them now and place them in the new template, but in the recommended location (at the very bottom).
</div>
[PLACE GOOGLE ANALYTICS AND PAGETRACKER CODE HERRE]
</body>
</html>
Now we are ready to begin work in the body of your page. Look at the first part of the code:
<body>
<div id="container">
<div id="header"><span class="style1">
</span>
</p>
</div>
The "container" div includes everything in the body, really, and the id is a code allowing the css to give styling instructions for everything in it. For example, width and margins are set now. We can adjust them after we get the content on the page.
Notice the header div. Again the "id" along with the "class" in the span are references in the css style sheet. Every page in your site will reference this same style sheet so you can change the header for your whole site by changing the style sheet. Includes can also be used to make changes on the whole site, but often you can do the same easier with css alone. We will look at your header when we get to the style sheet.
You are going to see that your whole html page is much simpler than before. For example, you can adjust spacing between paragraphs, size and color of fonts, etc. in the css. One command can change the size of paragraph fonts, for example, for the whole site. So you will only need to copy some parts from your old site into the html.
The next section to work on is the navigation.
<div id="leftnav">
<ul id="navlist">
<li><a href="http://www.thisisyourhomepage.com">Home</a></li>
<li><a href="http://www.yahoo.com">Links</a></li>
<li><a href="http://www.yahoo.com">Links</a></li>
<li><a href="http://www.yahoo.com">Links</a></li>
<li><a href="http://www.yahoo.com">Links</a></li>
<li><a href="http://www.yahoo.com">Links</a></li>
</ul>
You simply need to put in the link location and what you want the link to say. Since you have many more pages to link to, just copy more of the lines first, then change these two parts.
Notice that the tags used are for an unordered list <ul> and each line is a list item <li>. This is the best way to do the navigation. Later we can make whatever adjustments we want (mostly css) to make it look as you want with color, spacing, effects, etc.
Note: it is best not to mix htm and html file extensions. Either will work. Since most of yours are html I would change all to that. The problem is that you should then put a redirect for each one you change into your .htaccess file so anyone who has saved a link can find it. For that reason I will not change them now.
Also, your GIFTGUIDE.htm file is in caps. It is best to keep your files in all small letters. I would not change that either right now on the one you have but just follow a consistent pattern in the future.
Your new code for the menu will look like this:
<div id="leftnav">
<ul id="navlist">
<li><a href="index.html">home</a></li>
<li><a href="birthdaywishes.html">birthday wishes</a></li>
<li><a href="partyideas.html">party themes</a></li>
<li><a href="childrenscostumes.html">children’s costumes</a></li>
<li><a href="christmas.html">everything christmas</a></li>
<li><a href="toptwentytoys.html">top 20 gift ideas</a></li>
<li><a href="partysupplies.html">party supplies</a></li>
<li><a href="partyplannerrecipes.html">party receipes</a></li>
<li><a href="nobakerecipes.html">no bake kid’s recipes</a></li>
<li><a href="yourrecipes.html">your recipes</a></li>
<li><a href="partymenu.html">party menu</a></li>
<li><a href="decorations.html">decorations</a></li>
<li><a href="partygames.html">party games</a></li>
<li><a href="GIFTGUIDE.htm">gift shops</a></li>
<li><a href="partyessentials.html">party essentials</a></li>
<li><a href="partychecklist.html">party checklist</a></li>
<li><a href="mybooks.html">my bookshelf</a></li>
<li><a href="links.html">links</a></li>
</ul>
Your links will now have the default style of the template, including underlines. We can easily adjust these in many ways (spacing, color, size, underline, etc.) through the css.
The next few lines in the template just explain that you can use css to style the menu. We will delete this to get it out of the way.
Select the following and delete it from the template:
<p>The entire left column layout and color is controlled by the "leftnav" section on the style sheet. </p>
<p>The nav links above are controlled by the a leftnav, a leftnav, leftnav a:hover and leftnav ul section.</p>
<p>Play around with different attributes to see different results.</p>
This is a good place to close this post. Next we will work on the main content.