Editing the menu

Let’s edit the menu so we can have more than just the homepage.

First of all you can safely delete the following:

<h2>Archives</h2>
<ul>
<li><a href="#">January 2007</a></li> 
<li><a href="#">February 2007</a></li> 
<li><a href="#">March 2007</a></li> 
<li><a href="#">April 2007</a></li>
<li><a href="#">May 2007</a></li> 
<li><a href="#">June 2007</a></li> 
<li><a href="#">July 2007</a></li> 
<li><a href="#">August 2007</a></li> 
<li><a href="#">September 2007</a></li>
<li><a href="#">October 2007</a></li>
<li><a href="#">November 2007</a></li>
<li><a href="#">December 2007</a></li>
</ul>

The “Archives” section is for a blog, but since we are making a personal website this isn’t necessary. Save and view changes.

Now look for the following.

<h2>Categories :</h2>
<ul>
<li><a href="#">World Politics</a></li> 
<li><a href="#">Europe Sport</a></li> 
<li><a href="#">Networking</a></li> 
<li><a href="#">Nature - Africa</a></li>
<li><a href="#">SuperCool</a></li> 
<li><a href="#">Last Category</a></li>
</ul>

I made the following changes.

<h2>Menu :</h2>
<ul>
<li><a href="index.html">Home</a></li> 
<li><a href="contact.html">Contact Me</a></li>
<li><a href="bio.html">Biography</a></li> 
<li><a href="projects.html">Projects</a></li> 
</ul>

I made a link to the Homepage (which is the current page), Contact Me, Biography, and Projects page.

What are the ul and li tags?

The <ul> </ul> and <li> </li> tags

The <ul> </ul> tags create an unordered list.

The <li> </li create items within the list.

Save and view changes. If you notice you can’t go to Contact Me, Biography, or Projects. Why? Well, because the only file that is currently created is index.html. So how do we create the rest?

Creating the additional pages

The simplest way is to go to your text editor. Have the index.html open and Save As “contact.html” in the current directory. Then do it again and Save As “bio.html”. Finally do it one last time and Save As “projects.html”. Now let’s see what happened to our site.

Or you can simply copy and paste index.html. Then rename the copies.

If you did it correctly, you can navigate your website even though all pages contain the same content. Why did we edit the header and the links section but not the content section? Well, we made sure all pages would have the same menu, and that we would have the same header on all pages.

Editing the content section

Now you can edit the content section to your hearts content. The best way to learn is to make and view changes. If something breaks, simply press undo! If you don’t understand a tag, try taking it out and see what it does.

Congratulations, you made a website!

Well, wasn’t that easy? If you want to try and use a different template go ahead. Remember, a great way to learn how to create web pages is to start with a template and playing around with that.

If you enjoyed this tutorial, please leave a comment and possibly a link to your site. If you need further help or feel something should be clarified, please mention it in the comments as well.