• Links
  • The code for a link
  • Path to the destination file
  • Web site hierarchy and links
  • Links to a subdirectory
  • Links to a higher directory
  • Open a new window
  • Email link
  • Link to a specific place on a web page
  • Non-page links

You do not have to create a sample page for Lesson Seven. I suggest you try to edit your page05.html with what you learn in this lesson. You can create a link to another of your sample pages for instance.

On Tutorial Table of Contents web page, you used your mouse to click on the type ("Lesson 7") which brought you here to this lesson, that type was a Link to this page. I suppose the World Wide Web would really be One Big Nothing without links since they are what connect files together to make it a world wide web of files. Without links, the "information super highway" would be like reaching the end of your driveway and finding no road. To see what that is like, click here.

Didn't get very far did you? What you clicked on was a link to this page. It just brought you right back to the top. You really didn't go anywhere, which is my point. Links usually take us to other files.

You probably know links as the blue type (often underlined) that you click on to go from one page to another, one web site to another, and so on. Of course if you have been following this tutorial from the beginning, one lesson at a time, you also know that links do not have to be blue type nor do they need to be underlined. To prove my point - click here. (No they don't have to be bold either.)

Still didn't get very far, just back to the top of the page (I didn't want to lose you), but at least you see that was a link, not blue and not underlined. Links do not have to be clickable text, but we'll get to that. Links may take you to another page, a specific place on a page, to an image, to email someone, or to download a file... we'll get to all of that too.

Just a reminder... the sample pages you create from the lessons are saved on your computer's hard drive. The folder(s) (directory) you have them saved in is acting like a real web site - except only you can access it. This is how you test pages to make sure they appear correctly and to make sure they link together as you want them to. I have a complete duplicate of the entire Small Expressions web sites on my hard drive* which I work with and test before transferring (uploading) them to my server where you access them. (*and backed-up on multiple CD's)

When you create web pages you want others to access, you will test them on your hard drive first, then upload them to wherever your web site will be hosted so everyone else can access them.

section 1

Now lets look at the code for a link to a web page:

That link code has two parts:

The destination - where you will go when you click on the link.
A label - what the visitor sees and clicks on.

In the example above, lesson07.html is the destination.
The label is click here.

As you may have guessed, this is the code I used to create the links above which kept you on this page when you clicked on them. They just brought you to the top of the page, which is the default location for most page links.

The default on most browsers is to show a link as blue underlined type. This standard makes it easy to spot a link on a web page. However you may override that default by adding the Font, Bold, Underline, or Italic tags around the link label. Why would you want to do that? Well, if a blue link is on a blue background, you would not see it - that's one good reason.

section 2

You probably realize most web site addresses look like this:

http://www.pinetreedomains.com   Just a domain name.

and thus it stands to reason the address for this lesson page is:

http://www.pinetreedomains.com⁄lesson07.html

So why doesn't the link above for this page look like:

<A HREF="http://www.pinetreedomains.com⁄lesson07.html">click here</A>

It could look like that but it was not necessary. Since you are already here, at pinetreedomains.com, I did not have to tell your browser to go here. I did not specify a domain name in my example link (as repeated below) so your browser assumed the link was on this site and in the same directory as this page which contains the link.

If the link is on another web site (another domain) then it would be necessary to include the domain name of the other site so your browser will know where to go to find that specific page.

section 3

If I organized this web site so all of the lessons were in a subdirectory of pinetreedomains.com (lets call it "tutorial"), the link to get to one of them from a page above that subdirectory, such as the home page, might look like this:

Lets assume I have set up the hierarchy of this site that way (which I have not, in case you are looking at the address bar of your browser window). We will use the example I have illustrated below. When you create real web pages and upload them to your web space, you may organize them any way you choose.

You connect to the Internet from your computer, then through a network until you reach our server (our computer) and the directory (folder) which contains the entire web site. That directory contains the files and subdirectories with more files, that make up the entire web site. When you go to a web site just by using a domain name (pinetreedomains.com) you end up at the default page for that site which is usually index.html (occasionally default.html).

Because browsers know the index.html file is the default file, you do not have to add it to the address (example pinetreedomains.com/index.html) and this is what we all refer to as the home page. It is the first page you get to, by default, when you go to a web site using just the domain name.

Try relating to it this way...

When you drive to someone's house, you have an address (123 Main Street). That address takes you to their front door, not to a specific room in the house. It is assumed you will enter by the front door. That is why their address is not given as 123MainStreet/frontdoor. Although if they really wanted you to enter into a particular room without coming in the front door, the address might be 123MainStreet/sidewindow instead.

section 4

Looking at the illustration, if you are on the Pine Tree Domains home page (index.html) and click on a link to go to this lesson, that link would have to tell your browser to look for the file for lesson 7 (lesson07.html) in the lower directory called tutorial That link from the home page would look like this:

<A HREF="tutorial/lesson07.html">click here</A>

However, once you are in the tutorial directory, to link from one file to another file within that same directory, a link on any of the lessons to another lesson would look like this:

section 5

Now lets say you are in the subdirectory tutorial, and you want to link out of that subdirectory back to the home page in the parent directory. To do that you need to tell the browser to back up out of the subdirectory tutorial, and then to access the index.html file again. That link would look like this:

<A HREF="../index.html">click here</A>

By adding ../ before the file name, you are telling your browser to go back out of the directory you are currently in, and to look for the file you want there.

You could have used the full address (shown below) to go to the home page, but that would be like telling your browser to leave the room by the window, and to walk around the outside of the house, and back in through to the front door again. What if it is raining?

The destination in the link shown above is exactly how you would code a link on a page from another web site to this one. Naturally you could change the label (what your visitor sees on your page) to anything you want.

section 6

What if you are still on a page in the tutorial directory, and you want to link to a page in another directory... lets say, the Frequently Asked Questions page (faq.html) which is in the directory called info. To do that you need to tell the browser to back up out of tutorial, then go into the directory called info to find the file faq.html (see illustration).

That link on a lesson page would look like this:

If you wanted to go further, still from a lesson page, to the page jenny.html in the people directory, the code would look like this:

section 7

Now that your visitors have found their way to jenny.html, what link code do you have to use to get them from jenny.html all the way to page01.html in the samples directory? You have to back out of the people directory which is in the info directory, over to the tutorial directory because that's where the samples directory is located. Each ../ backs up one level (directory) so the link would have to be coded as follows:

<A HREF="../../tutorial/samples/page01.html">See Page 1</A>

section 8

There may be times when you want your visitor's browser to open a new window when they click on a link to display a new web page. It might be an optional page of additional information, that not all your visitors may be interested in. Or you may simply want to make sure your visitor's attention goes back to the page with the link, when they close the newly opened window. For an example, click here.

To make your visitor's browser open a new window to display the destination page they link to, you include the target attribute to the link. This attribute tells the browser where to open the destination file. (Without this attribute, the default location is the same window the link is in.) There are many possible values for the target attribute. In this lesson, I will only mention the attribute which opens a new browser window. The others involve Frames (split screens) which I have not discussed yet.

The _blank value causes the destination file to be displayed in a new window. The new browser window opens automatically when a link containing a target attribute using this value is clicked on. This is what the code looks like:

You must use the quotes and underscore exactly as shown above and this attribute must always be lower case.

section 9

You can add a link to your web page so when a visitor clicks on it, their email program opens with a blank email addressed to you. Naturally the visitor has to have some kind of software set up on their computer to send email. Chances are, if they are viewing your web site, they can also write and send email. To make such a link, you write this code:

Of course you would change yourname@yourdomain.com in the above example to whatever email address you want your visitor to send to. I highly suggest you do not use your primary email address for such a link. This is a good way to get on junk email lists. There are programs you can use to get around that, but the easiest way for you as a beginner is simply to use a free yahoo.com or hotmail.com account which you can change at any time.

section 10

There may be times when you not only want to send your visitor to another page, but also to a specific place on a page. To do that you first need to create an anchor on the destination page at the exact place you want your visitor to go to when they click on the link. To create the anchor, you add this code to that exact place (in the html file for the page) you want your visitor to go to:

<a name="word"></a>

Change word, in the example above, to whatever you want to call the anchor. I have added such an anchor, that I called, example, next to the link for Lesson 8 on the Tutorial Table Of Contents (ptdttoc.html), so when you click on the link in Section 12 of this lesson, you will automatically go back to that spot, not to the top of that page.

<a name="example"></a>

The code for the link in Section 12, to go to that anchor on the table of contents page (ptdttoc.html) looks like this:

You simply add # and the anchor name, after the file name in the link code - no spaces.

You may also create a link to a specific spot on the same page as the link. For instance, I have added the following anchor after the text, Section 10, above:

The code for the link below looks like this:

<A HREF="#ten">Click here</A> to go up.

Click here to go up.   (Go ahead and click on it.)

Have a nice trip? Notice the code for the link did not contain a file name. It was not needed since you were not linking to another page - just to the anchor on this page.

Note: You can not create an anchor on someone else's web page - unless you are writing the code for them.

section 11

As I mentioned at the beginning of this lesson, you may also create links to an image or to download a file. Such links may look like these examples:

<A HREF="flower.vip">Click here</A> to download an embroidery file of a flower for your sewing machine.

section 12

Since this is the end of Lesson 7, you can test how an anchor works (on another page) by going back to the Table Of Contents, to the exact spot where you can choose Lesson 8, by clicking here.