WebDwarf Tutorials banner
WebDwarf logo
Bookmarks

This tutorial gives a step-by-step guide to making bookmarks. Before tackling this one, we suggest you first go over the Text tutorial. Topics we cover here are:

Why use bookmarks?
Parts of a bookmark
Anchor summary
Placing an anchor in your text
Making an invisible independent anchor
Making the anchor readable
Linking from within the page
Linking to an anchor on another page
Hover to see the URL
Bookmarks are case sensitive
Avoid strange characters
Page renaming
Link tangles
Watch for hidden Links
Back button
If the bookmark doesn't work
Top 
Why use bookmarks?

A bookmark is useful for navigation within a page. It takes you directly to any part of the page. Often it will be to a paragraph heading, or perhaps an image. Bookmarks are particularly useful where a single page extends over two or more screens. We have used bookmarks extensively in these tutorials.

A common bookmark takes you back to near the top of the current page -- there is one marked
"Top" in red at the head of this page -- just so you can see where it is. Normally it would be invisible.

Parts of a bookmark

A bookmark consists of two parts:
Anchor
Link
Anchor summary

As we'll explain below, there are two ways to make anchors:
Placing an anchor in your text
Normally you will bookmark a paragraph. So bookmarks are often just ahead of the paragraph heading or the opening word of the paragraph.

While inside the Text Editor, start as you would if you were making a page link. There are a number of ways to do this. One way is to place the cursor just ahead of the anchor point and press Ctrl+I (Insert Link). The Link Editor window should appear -- see the image below. Then:
Text Editor button
OK button
Text Editor Save and Close
 
Anchor
Making an invisible independent anchor

Instead of making an anchor inside a normal visible text object as above, you can make one inside an invisible text object -- we'll do that here. Let's use a small text object that will bookmark whatever place you drag-and-drop it to. (For this example, let's bookmark the image just above.) This anchor needs to meet these requirements:
A text object of just two spaces seems to fit the bill. Two spaces rather than none or one keeps Opera happy. You may find something different that suits you better -- like white text on a white background. But for this example, we'll use a text object consisting of two spaces as the base for the anchor.

To make the anchor, take the following steps:
The image below shows the Link Editor settings.






Move the text object to the left and top of the object you want to bookmark. Because the "visible" part of the text object consists of just spaces, it will be invisible when you preview or publish the page.



Making the anchor readable

If you have a number of independent anchors, it can be hard to remember the name you used for each one. In the Text Editor we set a small 8pt font in red and selected Make HTML links Visible. Such anchors are still of course invisible on your published page. But sizing the anchor so that, when in workpage view,  you can see the name makes it easier when you later want to make links to that anchor.

Our independent anchor, Image is visible back up this workpage in the left-hand margin, and has this extra treatment.


Linking from within the page

Now we have an anchor -- something to link to. Let's make a link to the independent anchor which simply says "Top of Page".

Start a new text object which says "Top of Page". There is one just below. From within the Text Editor Link Editor set:
Link Type:  leave blank
Link URL  : #Top
The image below shows the result.
Naming an anchor
Link to an anchor
Link
Up arrow
Top of page
Notice the hash (#) ahead of the anchor name. All links to anchor names must have this prefix.  The resulting "Top of Page" text link is positioned just to the right of the image. In preview, click on it and you should go -- guess where?

In much the same way, you can set the same link on a image. The picture below shows the Quick Editor view of the one on the up-arrow.

We filled out the Title: field here too. That is not essential, but it is recommended practice for images.
Quick Editor button
Quick Editor link to an anchor
Linking to an anchor on another page
Linking to an anchor or bookmark on another page is almost the same, except that this time you also have to specify a page name.
Link Type: leave blank
URL        : MyPage.html#Anchor
In the example below, the page name is Text.html and the anchor name is Hyperlink.




    


Naming an anchor
Link to a bookmark on another page
Double link
Up arrow
The image shows a working example to another tutorial page. Again, the link is to the right. In preview, click it to see the result.

Hover to see the URL
As with any link, hover your mouse over the link and look at your browser status bar to see what the browser thinks it leads to. This is a very useful thing to do if the link to your anchor is not working.



Bookmarks are case sensitive

The IE8 browser thinks that anchors called Top and top are the same, but other browsers think they are different. For this reason, we suggest you avoid tempting fate and always use a consistent style -- e.g. always use lower-case anchor names.

However, you can adopt any style you like, so long as you can apply it consistently to both the anchor name and the link URL. In these tutorials, we have opted to use CamelCapitals, because they are a little easier to read.



Avoid strange characters
Avoid punctuation and spaces in bookmarks -- see naming suggestions.



Page renaming
Renaming pages does not affect links to bookmarks, provided the link is in the same page as the bookmark. A link like #MyAnchor will survive any page renaming.
 
Links to bookmarks on other pages are not updated if you rename the page containing the bookmark. So if you rename MyPage.html, you will also need to manually update any bookmark links containing the page name MyPage.html.



Link tangles
Sometimes you can get into a tangle with links. If that happens, select the main menu  Options > Expand Hyperlinks or the toolbar button "Make HTML links Visible" This will make everything visible so that you can easily delete any junk.

When expanded, a valid anchor (bookmark) will look like below.
 <a name="Top"></a>

A valid link to a bookmark will look like this:
 <a href="#Top">Top of page</a>


 


 
 

Text Editor expand hyperlink
Top of page
Watch for hidden links

Check that your link is not hidden behind other text objects. This is easy to do -- the background of text objects is usually set to "no color" -- transparent. If you have a link under the transparent background, it will look normal. But while it will work in some browsers, it won't work in others. You can hover your mouse over the link, but you will not get the cursor symbol that denotes an active link (usually a hand).

There are three fixes -- either move something, or bring the link to the top. If that does not work, try redoing the link again from the beginning. 

To demonstrate, here is a "Top of page" link placed deliberately under some blank lines at the end of this text object. It will work in IE8 and Opera, but not in Firefox/Netscape or Chrome.

Active link: hand
Back button
When testing bookmarks, the Back button on your browser is very useful. Back will return you to where you were at the time you clicked on the link.



If the bookmark doesn't work
If you find that your bookmark doesn't work, here are some points to double check:
See also
Text tutorial
Links tutorial


Top of page
< Tutorials Home
Naming an anchor
Top
Naming an anchor
Image
Virtual Mechanics Logo
WebDwarf
®

Tutorials