<< .. Go to : : Home : : Exercise 4 : : Demo 4A : : Demo 4B : : Demo 4C : : Demo 4D : : Demo 4E : : TAGS : : All Class Demos .. >>

Exercise 4 Demo: Part C : Jump Links or Document Links

This will be a very long page to show off a different kind of link.

Document References or Jump Links

Internal Jump Links | External Jump Links | Bottom of the Page | Jump to Some Chocolate
These are examples of Internal Links - or Jump Links

Internal Document Links or Jump Links

We have learned about using links to go to other pages within our web site. We can link to pages in other external web sites. We have learned how to use images for the links. But what if we have one really long page of text and we don't want our visitors to have to scroll to find the information they are looking for...

When you have a long page of text you may want to offer the reader the option of jumping down the page to a specific section of text. You can create an anchor at the destination that you want them to jump to and then make a link which refers to that anchor.

You can see I have a table of contents with three categories listed at the top of my page under the heading. Since we are talking about 'Internal Document Links' first, we don't need to offer a link to it. The visitor can see that information. However it might be a while before we get to the topic of 'External Document Links' so we can offer the visitor the option of 'Jumping' down to that section without having to scroll to find it. You can see that 'External Document Links' is blue and underlined. I have made it a link. I have also added a tiny bit about chocolate on this page because it might be more fun to jump down to. It also is underlined at the top of the page and the target area for it is way down towards the bottom of the page.

The code for that link is:

<a href="#external">External Document Jump Links</a>

The hash or number symbol # tells the browser that the href is referring to an 'anchor point' on a page. Once we get down to the section about External Document Links, I will show you the code to make this the destination point. I chose "external" as my identifying name, because it relates to the section I am jumping down to - External Document Links. I could have named it "fred", but that might not make sense to me later.

Now we will talk about jumping back up the page...

Say the reader has jumped down below and want to go back to the top of the page. Instead of making them scroll back up (you know how lazy users can be) you offer them a "Back to Top" link.

I do not really want to have the word TOP displayed at the top of my page - so I add the word top in the code that only the browser can read. I choose the highest point on my page and add an id to it - and I make it "top". Again, I chose the name "top" because it makes sense to use it. The code for the target destination on this page looks like this:

<h3 id="top">Document References or Jump Links</h3>

We use the 'ID' attribute to identify sections that only occur ONCE per page. We can reference the ID with hyperlinks or styles sheets. It gives a unique name to a section. IDs must always begin with a letter. And it is best to use words that make sense in relation to what you are naming.

Before we go to the External Document Link section lets go ahead and put in that Back to Top link. Here is what the code would look like:

<a href="#top">Back to Top</a>

Back to Top

When you try it out, the page jumps back up so you can see the headline at thetop of the page. As you can see I aligned my "Back to Top" links to the right so it is not too distracting.

We have made it down the page so we need to add our target destination code to the External link. The code would look like this:

<h4 id="external">External Document Jump Links</h4>

External Document Jump Links or Jump Links to Other Pages

So we now know that 'Internal Document Links' or 'Jump Links' will move us up or down a page. But what if we have a specific location we want to jump to in a separate page? We need to have access to the HTML of the target document, or it must already have a target location specified. Then we just alter how we use the <a href> tag by adding the new page information to it. We will link back to the Demo 4B page. I can link to a specific spot on another page within MY website with this information

My code will look like this:

<a href="http://www.claudiafaulkdesign.com/MAT125/demos/demo4c.html#color" target="_blank">Styles: Link Colors</a>

Link Colors

If you look at my source code on that demo page you will see that I added the 'id' and 'name' to the h4 tag to make it a target location.

<h4 name="color" id="color">Link Colors</h4>

If you want to target a specific spot in an External web page, you will need to have access to the specific page to add the target information or know that the location already has the target specified. I know the target information on this page so we will make a link to it. Here is the code:

<a href="http://door13design.com/portfolio/portfolio.html#e-portfolio" target="_blank">

It links partway down a page about some pieces in my portfolio.

The line of code on the portfolio page looks like this:

<h1 class="title" id="e-portfolio">my e-portfolio</h1>

You can also use the ID attribute in many other tags (check the text). It might look like this:


<p id="chocolate">Chocolate</p>

Here is some info about Chocolate - It is one of my favorite things. I like coffee with chocolate -- we are jumping here from the top of the page.

As you can see this type of linking makes navigation more complicated. Be sure to give your plan serious thought before you use these linking structures.

Back to Top   BOTTOM of the Page

Use CSS to change Link colors! Go to Part D of Demo 4 to find out how.

Go Back to Part B of Demo 4.

To go back to Part A of Demo 4.

Go back to the Exercise 4 page.

© Claudia Faulk. Created in 2008. Updated 1.15