Now that you know the basics, it's time to get a little more complex. Right now you have a web page - a single document on the web. Let's add a little to that! In this exercise, you will create a "Credits" page, and a "What's New?" page. Both are important for any site to have! Later on, you will design and create the rest of your site.

If you're not already logged in, open a window to code in like you did in the last lesson. Set up a basic webpage, with the <HTML>, <HEAD>, <TITLE>, and <BODY> tags. The title/heading should be something like "Credits" or "Credits for my Website." When you start using images from sites giving .gifs and .jpgs away, you'll use this page to say where you got the various images. For now, it might be nice to mention your teacher, who's helping you learn HTML. When you learn to make links below, it would be polite to link to the index page of this course (it's here).

When you're done, save your work, and follow a similar procedure to create a "What's New?" page, with whatsnew.html as its filename. This page will be a running log of the modifications to your site, so that regular visitors will know what has changed since the last time they visited. The first entry should look something like this:

<P><B><I>(Today's Date)</I></B> -- Set up my Credits and What's New? pages.</p>

Now you have your two other pages. You need to connect them to your home page. After saving the "What's New?" page, select the index.html file to edit. You should put the link to your "What's New?" page up near the top, maybe under the heading of the home page. That way it'll be easy to find. The tags for a link are:

<A HREF="filename.html">(name of page)</A>

Whatever is between those tags will appear in the color you set in the <BODY> tag. Once a visitor has clicked the link and visited that page, the link will change to the vlink color. Anything can be used between the link tags, from a picture to words. For your "What's New?" page, type What's New? betwen the link tags, and put whatsnew.html in for filename.html. In general, link text is easier to read if you make it bold. Unless you've already set your text to SIZE=+1, put the tags to make it bold on either side of the link tags. Now you should have the following code under your home page's heading, and above the text paragraphs:

<B><A HREF="whatsnew.html">What's New?</A></B>

Use the same sort of code at the bottom of your page to link to your Credits page (don't forget to use credits.html as the filename, and to change the link text!). When you're done, save your page and upload it (if necessary), go to it with the Location box, and make sure all the links work by clicking on them.

Another kind of link is one which creates an email message. You can see an example of this at the bottom of this page, where it says " Problems? Questions? Send us Email!" Clicking on the word "Email" will open a new email message. Try it!

The tag for this kind of link is:

<A HREF="mailto:name@blah.com"> </A>
Use your own email address in place of name@blah.com, of course. Add an email link on your own homepage and test it to make sure it works.

There is another sort of link which is remarkably useful - rather than linking from one page to another, you can link from one place in a page to another place within the same page, or from one page to a specific place in another page. This is done useing the <a href=> tag, but with a few modifications.

To link from one place in a page to another place in the same page is the easiest. First you must define the place to be linked to. This is done with the following tag, which has no ending tag:

<a name=>

You then set name equal to something you will remember, like top if you're placing it at the top of a document. Then, when you are creating the link, instead of inserting an entire URL, you only need to put the following:

<a href=#name> Linked text </a>

...with, of course, the appropriate name in place. When coded properly, the link will act as it does the one in the example below:

Click here to go to the top of this document.

To link from one page to a specific place in another page, you have only to add #name (with, of course, the proper name in place) after the URL, like this:

<a href=http://www.blah.com/main.html#name>

See how that works? Although you don't have long enough pages to need this tag yet, keep it in mind - it may come in handy later.

When you're sure that all of the links you've added so far work properly, have your instructor view it and initial your completion form.

You're ready to move on!

Problems? Questions? Send us