Anchors (Targets)
Module 21

There are times when  you might want to create a link that would jump to a location that is not the beginning of a web page.  One case of this might be a long web page where you can list the contents of the page at the beginning and allow the user to make a choice that links to a location  farther down the page.  This option was used in Module 20 to jump over one part of a web page and continue to a point farther down the page.  Another case might be one page that links to a location somewhere in the middle of another page.

The location that the page jumps to is set by inserting an "anchor."  Another word that you may see used is a "target."  You would place the insertion point at the target location.  Then you insert the anchor (or target).  Now you can use that point to jump to, either from within the page or from another page.  We'll test out both.

1.  Open one of the pages you have already created.  FILE>Open>Page in Composer.

2.  Select page2.html from an earlier module.

3.  Click at the end of the web page.

4.  Type a few words, then press RETURN (or ENTER) 3 times.

5.  Type a few more words and press RETURN  3 more times.

6.  Continue this until you have web page that is several screens long.

7.  A few lines from the end, type:

This will be the landing spot!

9.  Now click on the Target tool (or pull down INSERT>Target)

10.  Give the target a name.  Enter in:

MyAnchor

The anchor you just inserted is visible only when you are editing a page.  It will be invisible when you browse the page.

11.  SAVE the results.

12.  Now scroll back to the top and click somewhere near the beginning of the page.

13.  Type the following line:

Click here to see where I jump to

15.  Click the link tool (or INSERT>Link...)

16.  In the bottom portion of the window, you should see the target you created.  Now  select the target and click OK.

17.  SAVE your Page and Preview the page in Navigator.

18.  Click on the word here and notice how the page jumps down the screen to the target or anchor.

19.  Now open your first page, OPEN>Page in Composer and select page1.html (or you can browse to it and FILE>Edit  Page)

20.  Click towards the bottom of the page and type in:

This link will show you a place on my second page.

22.  In the next screen, click Choose File and navigate to page2.html

23.  In the bottom of the screen, click Show targets in: Selected Page.

24.  You should now see the target on that page and can link to the target as you did earlier.

25.  SAVE your work and Preview in Navigator.  Now test out your link to see if it jumps to from page2 to the desired locaton on page2.
 
 

You can rename a target by double-clicking it.  Be careful when doing this, as if you change the name, any links to it may or may not work correctly.  Targets can be deleted by clicking on them and deleting or by backspacing over them.  You can select a target and move it by EDIT>Cut and then EDIT>Paste   or you can use the same target multiple times by EDIT>Copy and then EDIT>Paste  as many times as desired.  This would be useful when you are within a page and want to have many opportunities to "Return to Top of this Page."

Programs other than Composer may handle targets differently.  Targets may be named by random numbers, rather than names.  Links to targets may be created differently, but the basic concepts remain the same.  Targets or anchors are identified by the "#" in front of the target name.  This is one reason why the special characters can't be used for filenames for web pages.