Links From One Page To Another

There must be some text between the two <A> </A> tags or the viewer would have nothing to click on. The text will be underlined and blue in color in most cases. The example above has the file "pagetwo.htm" located in the same directory as the current page. If you need to jump to a different directory you would type in the appropriate location. We talked about this in the lesson on placing images. As a reminder, here is one more example. If the page is located in the directory above the current one, you would type in -

To link to a page on a different web server, you must type in the entire URL (address). Example:

This is called an absolute URL because it is an entire address. When the file you want to jump to is on your own server, it is best to use relative URLs. A relative URL is always in relation to the directory structure of your hard drive and where one file is in relation to the file you want to go to. When using relative URLs for all files located on your server, you can move your whole web site as a unit to another server and the links won't have to be re-typed.

Many web site developers suggest you NOT use the words "Click Here" for a link label. Instead, use keywords that already exist in your text to identify the link. By the way, a link label is the word or words underlined and in blue (usually) that you click on. Example:

Bad Way

Good Way

Jumping to a new web page is not always done by clicking on blue underlined text. Sometimes you click on an image - like an icon, clip art or photo. The tags for creating this type of link are simple. Just put a graphic tag where the text link label would go. Here is an example:

<A HREF="pagetwo.htm"> <IMG SCR="dino.gif"> </A>

When you click on the clip art of the dinosaur, you will go to the file - pagetwo.htm.

Between the link tags

<A HREF=" "> </A>

you put an image tab rather than text. Sooooooo simple.

As a reminder, our HTML code would be better written like this:

<A HREF="pagetwo.htm"> <IMG SCR="dino.gif" ALT="Picture of a Dinosaur"> </A>

Let's say our section heading in size 2. Therefore, to create an anchor right in front of it we would type this:

The tag for making an anchor is

<A Name="name of anchor">

Creating the anchor is step one in a two step procedure. You must now create your link to the anchor - step 2.

Go to the word or words (or image) that will be the link label. Put link tags around it. However, instead of using a file name or URL absolute address, put in a # sign followed by your anchor name.

The link on Images As Links looks like this:

The above example would be on the page I'm jumping from. My link would be the word "Malaysia". If someone clicked on Malaysia they would go to the file called pagetwo.htm, but not to the top of the page. They would go to the anchor I created (called Malaysia) just before the section on Malaysia. Don't forget you must have defined an anchor name in which to jump too.

You can create links to other places besides web pages. You could go to an FTP site, a Gopher site, a newsgroup, a telnet site, or an email address. Linking to an email address is used quite often. I've never really linked to any of the other places. I'd have to pull out my HTML manual and look at the appropriate code. If you ever have the occasion of linking to one of the above places, pull out your HTML book.

However, I will equip you with the knowledge to make an email link. You knew I would, since I made an anchor to this section from the HyperJump. It's easy:

Need I say more?

Comments are used to insert information into your source code that will be ignored by a browser. It is used primarily for helping explain what your source code is all about. It can also be used to put in information such as who wrote the code for the web page, etc. Any time your source code is so difficult that you may forget what you were doing, or what is where, it is a good idea to include some comments. When you welcome others to go over your source code to see how you did something, it is common courtesy to include comments to help explain the method of your madness.

I think comments are very useful when you have a page that is often up-dated. They help you quickly find various parts of your code, make the changes and get on with your life. I think I will have you include comments to describe who created the page, what class you are in, and what grade. We'll start this with Assignment 2 of this lesson. Here's how to make a comment:

<!--This is the comment.-->

Don't ask me why I've waited until now to introduce background attributes. I guess I didn't want to talk about formatting an entire page with formatting of text. Page layout can get a little sticky, but background attributes are easy enough. I'm saving the other parts of page layout for a time when we talk about more advanced HTML.

For our purposes, there are two things you can do. You can make your page appear with a certain color background, or you can place a GIF or JPG on your background. Here we go.

In order to change your background, you need to make a change to your <BODY> tag. Actually, Background is just an attribute to the BODY. We talked about hexadecimal colors when we talked about font colors. The same colors apply here. Choose your color, find the hexadecimal number representing the color, and add it to your BODY tag like this:

<BODY BGCOLOR="#FF0000">

<BODY BGCOLOR="#000000">

I like black backgrounds because I find it easier on my eyes. Either that or I'm obsessed with black from having read too many Harry Potter books. The drawback to black is the limited number of contrasting colors to use for text.

So, changing the color of your background is one way to dress things up a bit. The other is to load a GIF or JPG file to the background. Not every graphic file creates a nice background. There's a little more too it than that. You can actually purchase computer programs that help you create background files.

A background graphic is usually a small square or rectangle that is reproduced over and over across your screen. Their colors are usually lightened so they don't interfere with text. If you choose a background that is so busy you can't type easily visible text on it, you haven't chosen a very good background.

If your background file has not been created properly, your little blocks of graphic will show seams or borders. The idea is to create a block of graphic that fits so well when they are tiled that you can't tell where one begins and the other ends.

Have you ever seen a background that has a graphic running down the left border and the rest of the screen is a solid color? This background file is a long rectangle that is tiled one above the other, but not tiled from side to side. The picture or design on the left side is repeated over and over down the left side of your screen for as long as your web page extends. Sometimes the picture down the left side doesn't look like a small picture that is repeated over and over. Certain designs come out this way.

<BODY BACKGROUND="image.gif">

I don't think I need to show you any examples of a red or blue background. However, I think I'll show you two different styles of background files.

1. Create a new html file and make a background color of #FFE7C6
2. Center and place this image at the top of the page. It is 200 X 200 and the ALT is Captain James Cook
3. Professor Nibble wants you to practice your touch typing. Type in the entire biography from hard copy. (If you are taking this course from afar, please email Professor Nibble for a copy of the text data.) Spell Check. (If you are using NotePad, copy and paste the data into a full word processor like Microsoft Word and do your spell checking there.) Each heading should be size 2. Be sure to set off each paragraph. The quote at the very top of the biography data should be centered under the photo of Cook.
4. At the very end there is a 1998 copyright message from Nate Kerl. Turn the words "Nate Kerl" into an email link to this address: cuculus@hotmail.com
5. When all the data has been typed, create a Table of Contents after the quote under Cook's picture and before the first section of the biography. Do not center it.
6. Create anchor links from each topic in the Table of Contents to the section headings. At the end of each section write the word TOP and link it back to the Table of Contents.
7. Save your work as cook.htm. Show your finished work to your teacher. He/She will take a look at your source code to evaluate it. Due to the length of this assignment we will not print out the source code. Let's save a tree!

1. The first page you create will be considered your home page. Give it an appropriate background color other than white. Remember you must have good contrast between your text and background. Entitle this page FAVORITE DOG BREEDS. Under the title include these breeds in a type of Table of Contents: Dachshund, Border Terrier, Shetland Sheepdog, Beagle. Use the unordered list tags to do this. Save and name this home page dogtoc.htm.
2. Create four other web pages. Including your home page there will be a total of five. Each page must have a background other than white. Use a solid color on the home page and two other pages. Here are two backgrounds. Use each one on the other two pages. Name the pages dog1.htm, dog2.htm, dog3.htm and dog4.htm.
3. Do a search on the internet for the dog breeds listed above. Find a good picture of each breed and save them to your folder. Keep track of the URLs you use. On each of the four pages include a name and picture of the breed. Under that, give at least two paragraphs about this particular breed of dog. At the end of your page include an absolute link to where you got the picture and information. If the info is from one site, you only need one absolute link. If your picture and information came from two different sites, include two absolute links to those sites. Preface these links with something like "The above information was obtained from these web pages." On each page include a link back to your home page and to the next page in your web site of 5 pages. Make these links from text.
4. Now go back to your home page and create links from the names of the four dog breeds in your unordered list to each appropriate page. Make a little space under this list and use these images. Each image should also link to an appropriate page. Center these 4 thumbnail photos with a little space between them.
5. When you are finished, ask your teacher to view your dog web site. Print the source code of the 5 pages and staple together to hand in to the teacher.