The structure of the website

The site will normally consist of several pages to begin, eventually growing to several dozen or hundreds of pages.

The first few pages are fairly standard: the Home page (index.html), a Contact page giving your email address and telling people how to send you comments and suggestions, a Site map which just lists all the pages in the website and then the Contents pages.

The contents pages don't have to be identical to the Home page. They can be built from a simplified version of the template. Usually the navigation between contents pages will be different than that between the Home page and the rest of the site.

Once you've found or created the content, you must distribute it through the different pages. What you do is divide the site into sections with a common theme. For example, a section on 'Product reviews' with a page for each product, a section on 'History of the product', etc.

Each section will have a link in the main pages and in the menu bar in each page, if you have one.

The following illustrates what the Homepage should look like:




Creating LINKS

We're going to look at the 3 main types of link that you will probably use in your web page. There are several others, such as links to FTP sites that we won't look at now.

The 3 types of interest are:

No. 1:
To link to another page in the same site (an internal link) you create an anchor tag and you specify the path and the filename of the web page.

If it's in the same directory, only the filename is required:

          <a href="nextpage.html"> Next page </a>

If the page is in another directory, the path is required. For example, if the directory is on the same level, I have to go back one level and then down the other directory:

          <a href="../direc2/nextpage.html"> Next page </a>

Note that the stuff that's displayed, between the <a> and the </a> can also be a picture.
Instead of "Next page" I could display an arrow:

          <a href="nextpage.html"><img src = "../pictures/right_arrow.gif" /></a>

with the .gif file containing the arrow picture that I want.

No. 2:

When you link to another web site (external link) you put a URL in the anchor:

          <a href="http://www.profsr.com" target="top">Free programming tutorials</a>

Note the addition of the attribute: target="top". When you link to another site without target that page opens in your current browser window. If you start to surf from there you may never come back here. But I want you to come back, because I like you! So, by adding target="top", the other site will open in a new browser window. When you're done surfing there and you close the window you'll be right back on my page.

No. 3:

To create a link that's an email address, use the mailto: attribute.

           <a href="mailto:ml@profsr.com">Professor Mike</a>

When you click on that link the browser will automatically open your default email application in compose mode and will insert the email address in the To: field.

Navigating between pages

In order to maximize the visibility of your web pages with the search engines, there is a simple rule that you should usually follow: use internal links to navigate down and external links to navigate up in your website.

For example, when going from the homepage to the subject page, I would create the link like this:

           <a href="./visualbasic/vbintro.htm">VB programming tutorial</a>

That's an internal link.

But, to get back to the homepage from the subject page, I would use an external link:

           <a href="http://www.profsr.com">All kinds of great tutorials</a>

The reason for doing this is that Google attaches importance to the number of sites linking to your page. The link that you give yourself counts like a link from outside. If every page of content has a link back to the homepage, in addition to the other normal links for navigation between the pages, you get a lot of credit with the search engines.

However, at all costs avoid broken links! A broken link is a link that leads nowhere. It can happen because you misspelled a word or because you changed something in your structure. Always check all the links in your pages to make sure they are valid.

In the Previous lesson section I mentioned briefly that you can create a mailto: link. You will definitely have a Contact page with a mailto: link and you may have one in several other pages as well.

Encourage your customers to contact you if they spot problems with navigation or the design of the site. Be open to suggestions. They won't all be valid but, when you've got thousands of pairs of eyes evaluating your site, you'll get some good critiques.





Top