Creating a Menu and Completing Your Web Site

At this stage, the pages of your Web site are ready. A page stands on its own, independently. In order for it to be a Web site it must have a menu, which is really a navigation mechanism, to connect and link the pages together.

In this chapter you will:

Create a menu for your Web site
Learn how to display the menu on each of the Web pages that you built.

At the end of this chapter your Web pages will look as follows:

A menu

So far you have designed the following pages of your personal Web site: homePage.html, about.html, books.html, links.html and friends.html. Every page stands alone and the time has now come to place them all into the structure of a complete Web site.

Every Web site has a structure, that can be seen in the menu (toolbar of links) that is located either at the top or on one side (left or right) of the page. The figure below illustrates the structure of a site with the menu at the top as follows:

Content

Your menu will contain links to the pages on your site: homePage.html, about.html, books.html, links.html and friends.html.

You will create a new HTML page that will be named menu.html. It will contain five links (a link to each Web page you have) and will look like this:

Figure 9.1: The menu

Creating a menu

Create a new HTML page - menu.html file

Create a new page named menu.html with links to your Web pages.

Open Windows Explorer.
Go to the folder you created named justin.
In the right pane (where all your HTML files are) right click. From the shortcut menu select New and then select Text Document.
Make sure that the new document, which is now called New Text Document.txt, is highlighted. If not, highlight it.
Change the name of the document to menu.html (pay attention to the change in the file name extension from .txt to .html). A dialog box will open asking whether you wish to change the file name extension. Click Yes.
Double click on the menu.html file (double or single click depending on your Windows definitions). The browser will open with the file (which is still empty)inside it, but you will see nothing because the menu.html file is still empty.
Return to Windows Explorer, highlight the file menu.html, right-click with the mouse and choose Open With, and then choose Notepad.

In Notepad, type the following:

<html>
<head>
<meta http-equiv="content-type"
content="text/html;charset=iso-8859-1" />
<title>menu</title>
</head>
<body bgcolor="#FBE995">
<a href="homePage.html" title="Home Page for
justin's Web site" target="_top">
Home Page
</a>&nbsp;&nbsp;&nbsp;
<a href="about.html" title="Read more about me"
target="_top">
About
</a>&nbsp;&nbsp;&nbsp;
<a href="books.html" title="The books I read"
target="_top">
Books
</a>   
<a href="friends.html" title="These are my best
friends" target="_top">
Friends
</a>&nbsp;&nbsp;&nbsp;
<a href="links.html" title="Links to Web sites of
special interest to me" target="_top">
Links
</a>
</body>
</html>

Save the menu.html file in Notepad.
Display the menu.html file on the browser.

Please note that the value of the target attribute of the <a> tag must be _top. This is essential for what you are going to do next.

Thinking

Click on the Books link.

Please notice that the menu disappears and the books.html page appears instead of it. That's fine, but it is not possible to navigate your Web site if the menu disappears from the screen.

So I have an idea. Instead of writing a menu page by the name of menu.html, I will write the menu (links) on each of the pages of the Web site. A great idea! Yes, that's it - the menu should be part of every single page on your personal Web site.

Let us suppose (don't actually do anything yet, apart from thinking) that every single page on your Web site has links to every other page on the site. What will happen when you add a new page to your Web site? You will still want every other page on the site to have a link to the new page, right? You will have to go into every individual Web page and add the link - that's a lot of detailed work with a good chance of making a mistake somewhere.

So let's think some more (still without doing anything, only thinking). What will happen if one day you decide to change the name of the books.html page to myBooks.html? Then you would have to go into every individual page on your Web site and change the link from books.html to myBooks.html. Again, a lot of work with a big chance of making a mistake.

What should you do? Very soon you are going to embed the menu page menu.html in every one of the Web pages of your Web site. This means that you will have ONE menu page by the name of menu.html (that you have already created), but it will also be a part of every page on your Web site.

Now you are probably thinking: "Wow! That's really cool! Every change I want to create to the menu (menu.html Web page) will be made on every other page too! But how will the other pages be updated?"

Embedding HTML pages

You do not copy the menu (the links) onto every one of the pages on your Web site, but instead you "embed" it. There is no menu on every Web page, but there is a kind of "room" or "space" in every page for the menu page (menu.html).

As soon as the browser activates (loads) any page, it "absorbs" the content of the menu page into the activated page and displays it as one page.

Below is an illustration of what will happen:

Figure 9.2: Embedding an HTML page in another HTML page.

Embedding an HTML page in another HTML page

View the homePage.html Web page in the browser.
View the source code of the homePage.html page in Notepad.
Position the cursor before the <h2> tag, and press Enter. Place the cursor at the beginning of the new line that you created and type the following code:
```
<iframe src="menu.html"
width="100%" height="50" align="center"
frameborder="0"
marginheight="0" marginwidth="0" scrolling="no">
</iframe>
```
Save the homePage.html Web page.
Go to the browser and click Refresh\Reload to view the changes you made in the homePage.html file.

Figure 9.3: The menu embeded in the Home page
Close the browser window displaying the homePage.html Web page.
Close the Notepad window displaying the homePage.html content.

Note - You can create a "room"or "space"for the menu.html Web page in any other page by using the <iframe>...</iframe> tag.

Applying the menu for each page

Repeat items 1 to 7 for each of the other Web pages you created: about.html, books.html, friends.html, links.html.

Verifying your Web site menu

View the homePage.html file in the browser.
Click on the Books link in the menu.
Click on the Friends link in the menu.
Click on the About link in the menu.
Click on the Links link in the menu.
Click on the Home Page link in the menu.

Congratulations - you built a Web site!!

Before you rush to call your Mom to show-off and share, here are some additional tiny improvements you can make.

Some minor improvements

Web site header

Add justin's site as a heading at the top of all the Web pages.

Cut the heading justin's site (from the <h2> tag to the </h2> tag) from the homePage.html page and paste it onto the menu.html page immediately following the <body> tag. Save the two Web pages.
View the homePage.html page in the browser.
You can see the heading justin's site on the page, but where are the links to the other pages? You can't see the links because there is not enough room (height) on the homePage.html page for the menu.html page.

To adjust the height of the <iframe> tag that contains the menu:

View the source code of the homePage.html page in Notepad.
In the <iframe> tag, change the value of the height attribute from 50 to 100 (if 100 is not good enough, you can give it some other value).
Go to the browser and click Refresh\Reload to view the changes you made in the homePage.html page.

Figure 9.4: The menu with the header
Repeat items 1 to 3 for each of the other pages: about.html, books.html, friends.html, links.html.

Web site header as a link

To link the name of the site (justin's site)to the home page:

Open the menu.html page in the browser.
View the source code of the menu.html page in Notepad.

Link the heading justin's site to the homePage.html page as follows:

<h2><a href="homePage.html" title="Home Page"
target="_top"><font color="navy">justin's site
</font></a></h2>

Save the menu.html document in Notepad.
Go to the browser and click on Refresh\Reload to view the changes you made.
Click Books, and then click justin's site.

Link without underline

The name of the site (justin's site) is a text link. A link is displayed with an underline. Usually the name of the site, which also serves as a link, is displayed without an underline. So how do you create a link without it being displayed as a link?

Go to the Notepad window with the content of the menu.html Web page.
Add the style attribute to the <a> tag that links the name of the site.
```
<h2><a href="homePage.html" title="Home Page"
target="_top" style="text-decoration:none;">
<font color="navy">justin's site</font></a></h2>
```
Note - Pay attention that the first symbol of the style attribute is : (colon) and the second is ; (semicolon)
Save the menu.html document in Notepad.
Go to the browser and click Refresh\Reload to view the changes you made.

Figure 9.5: Your Web site is READY!
Close the Notepad window displaying the menu.html content.

Now... run and call your Mom!

Part I

Part II