Creating Your Index Page & Linking Between Pages

by Vashti

Today we are going to finish our HTML lessons. We'll learn how to create an index page for your site, what we need to call it, and how to link our index page to our content page.

1. Setting Up the Skeleton of Our Index Page

We are going to set up the skeleton of our index page very quickly, as we did in our first tutorial. This time we're going to set it up to include the correct html compliance code at the beginning. Once you've set the code up, you may even wish to save yourself a blank copy of this code, called something like blank.html, and save it somewhere safe to reuse every time you create a new page.

First, open up a brand new file in Notepad. Into that file, copy the introductory W3C code I mentioned in the last tutorial:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

Then hit enter and type:

</html>

Right after your opening <html> code hit enter again and type <head>and then</head> (the head tag).

Hit enter one more time and type <body>and</body> (the body tag).

Then place your cursor after your <head> tag, hit enter, and then type <title> and your closing </title> (the title tag). Then hit enter one more time.

When you're finished the page should look as pictured below:

2. How Does a Browser Know It's My Index Page and What Do I Call It?

This is one of the more important things you will learn about web sites. Index pages are called "index.html". When the browser looks up your address it looks for that page and that's the page the browser displays first.

You can call your other pages any name you like. As long as you name your index page correctly, a browser will be able to find your page and display it on someone else's computer.

Save your new page as index.html, remembering to change your file type to all files when you save your document:

3. Fill Your Page Out With Content

Now we need to give our index page a title to be displayed in the browser bar. Right after our <title> code and before our </title> code, type My Sims 2 Page.

We are also going to put some text in to remind us where our image is going to go, so right after our <body> tag, type title.

Hit enter and then type <br /> twice. Now hit enter one more time. Then type My Sims Content Page.

Finally, right after the <body> tag, type <center> and right before the </body> tag, type</center>

4. Adding Your Title Image

Now we are going to take the word "title" out and replace it with our title graphic. I've prepared a basic title graphic that you can use. Right click on the graphic and save it to your "images" folder where you have been storing all of the images for your project.

Again, as with the other items I've provided, it's fine to replace them with your own. This graphic has only been provided for those who want to focus on learning html.

5. Adding the Image Coding for the Title

Where we have written "title" right after our <center> tag, take out the word "title" and replace it with:

<img src="images/title.jpg">

6. Adding Your Link to Your Content Page

Now we are going to link our main page directly to our content page. We do this exactly the same way that we link to a zip file!

Hit enter after the second <br/> tag, then type <a href=”simscontentpage.html”>. Hit enter after your My Sims Content Page text. Then type </a>.

This page is essentially finished. Save your index page and open up your simscontent.html page.

7. Linking Your Content Page Back to Your Main Page

In your simscontent.html page, right after the </table> code and before the </center> code, hit enter and type <br/> twice. Hit enter again, then type Main Page. The reason why we do this is so that our link back to our main page is outside our table but still inside the code that centers our html page.

Now place your cursor before where you have written Main Page and type <a href=”index.html”>. Finally, place your cursor after your text and type </a>.

Save your page. We are now going to preview our work in our browser and test the links between each page.

8. Preview Your index.html Page.

You should be looking at a page something like the one below:

Click on your linked text "My Sims Content Page" and it should lead you to your content page. Then click on your "Main Page" link on your simscontent.html page. It should lead you back to your main page. If your main page link leads to your content page and vice versa, you've set up your links correctly.

Congratulations! You now know most of the basics involved in setting up web pages!

In the next tutorial we are going to be learning CSS or Cascading Style Sheets, which is the correct way to format your page and make it look pretty!

Enjoy!

Vashti