Playing with Web Design

Web Page Essentials

Now that you know the basic sections that most web sites have, we can talk about individual pages. Certain elements should be included on every page in your web site. Let's list the true essentials first:

Title

Every page on your web site should have a title. To include the title, use the <title> tag inside the <head> section, like this:
 

<title>Tangled Web - Tutorials</title>

It's usually a good idea to include an abbreviated version of your site's name in the title because this is the text that people will see in their Bookmarks or Favorites list. It's sure a lot easier to get back to Playing with Web Design when the bookmark says Playing with Web Design than when there's a blank line in the list, isn't it?

On this website, the title tags all include the name of the site. However, because Google abbreviates long titles and adds an ellipsis, you should put the page title first. So, the pattern used here is: 

<title>Web Page Essentials - Playing with Web Design<title>

Even if your site uses graphic buttons for navigation, you should also include a list of text links somewhere on each page as well. For one thing, as I said earlier, there are people who surf the 'net with graphics turned off. For another, it makes a nice compact way to list the major sections at the top or bottom of the page. You'll notice that every single page here at Playing with Web Design has navigation buttons for the major sections at the top of each page and a list of text links to related pages at the bottom.

Top of Page

If any of the pages in your site are long, it's a nice feature to add an id to the title or some other element near the the top of the page, and then sprinkle links to this anchor through the page. This means that at the end of a very long page full of text, the user can click once and return to the top of the page almost instantly, instead of having to scroll upwards slowly. An anchor looks like this:

<p id="PageTop"></p>

You can put anything you like or nothing at all between the opening and closing tag pair. It doesn't matter. To create a link to the anchor, simply use the following tag:

<p class="code">Back to the <a href="#PageTop">Top of the Page</a></p>

If you combine this tip with the next one, you can easily create a simple table of contents for long pages.

Section Anchors

If your page is long enough to require links back to the top of the page, you should probably create anchors for each of the pages sub-headings. All anchors are made the same way as the top of page anchor in the previous tip, and all links to anchors are also made the same way. An added advantage of creating link destinations within a page with anchors is that you can link to the anchors from other pages in your site as well. For example, if I had an anchor called "LinkwareGraphics" on my links page, I could link to it from any other page, like this:

<p>Check out these <a href="links.html">links to other graphics sites.</a></p>

And, just to show you that it really works (you can return by clicking your browsers "Back" button) try this one: Web Site Resources

Once again with feeling! Every single page on your web site needs to have a valid e-mail link! Not one, not two, every page. I can't stress this enough. You need to give your visitors a way to contact you. You don't absolutely have to have a guestbook or a feedback form, but you MUST have a way for visitors to reach you. In fact, some of the places that give free web space make this one of the requirements you need to fulfill in order to keep your free space! Frankly, I can't see any reason for an honest web master to keep his e-mail a secret. If the thought of too much spam scares you off, create an e-mail account somewhere that you use only for your web site. Most of the free e-mail services allow you to impose spam controls, so you can quickly skim the good stuff and throw the junk away. It may take time to set that up, but it's worth it. Even if the only messages you get tell you about typos, at least you know someone is reading your pages.

Copyright Notice

Think this isn't important? Want to donate your work to the public domain? Fine. Even so, a notice that you have donated your work to the public domain is in order. Copyright notices may not stop thieves, but they do make it easier for honest people to give credit where it is due, that is, to YOU! In addition, it's much easier to prosecute copyright infringement when your work is marked with a copyright notice.

Graphics Credits

Who made your graphics?

You?

That's great, then you should add this information to your copyright notice. If not, make sure you give credit where credit is due and place a link to the artist's home page (if they have one) on the page where you use the graphics. If you got your graphics from a clip art collection, say so. Once again, you're not going to stop thieves, but you'll make life much easier for honest people.

There's probably more I could add to this list. In fact, I will add anything I should think of as time goes on. If I make any significant changes to this tutorial, I'll mention it on my "What's New" page.