Anchors: a tutorial from a novice

I updated my favourites a while back to include some anchors at the top.

The work was prompted by a question about anchors.  So I thought I would do a little tutorial.  It is a little nerdy.  I am not really a technical person.  You may not need it.  I do.  Without these notes I would have forgotten when I did.  Maybe it might help any other anchor novices.

What are anchors?  I checked Wikipedia for help but it seemed too much information.  So here is my explanation.  An anchor is a link within a page that takes you to another part of a page, either the one you are on or another page.  Sometimes people can't be bothered scrolling down to the information.  They want to get there fast.  We help with an anchor to leap across lots of text and land at the anchor.

This is an anchor - http://gggiraffe.blogspot.com/2012/01/anchors-tutorial-from-novice.html#the_end - because it will take to a place at the end of this page.

This is an anchor on another page - http://gggiraffe.blogspot.com.au/p/recipe-index.html#Novelty_Birthday_Cakes because it will take you to a place far down another page

This is not an anchor - http://gggiraffe.blogspot.com/p/blog-index-complete.html - because it will take you to the start of another page.

How do you attach anchors?  You either have a little anchor icon on your Content management system (CMS) or you need to edit your HTML.  If it is already an icon on your CMS you just need to click on it, type it in the pop up window and add it to the url as below.  To edit your HTML is a bit more tricky but not too hard.

On Blogger there is an Edit HTML tab.  Once in your HTML, you need to add HTML code to two places.  One - the "Anchor" or the place where you want people to land when they click on the link to the Anchor.  Two - the link to the Anchor.  I find it easier to add the information in this order.

Let's call the anchor "My dinner".  Remember that the anchor is a link (or url).  First rule with links is that there are no spaces.  If you leave a space the system fills it in with ugly text (eg %20).

You will have typed My Dinner on the page, usually down the page.  Replace it with code in the HTML so that the text in the "" will be the url link and the text in the >< will be the text that appears on your website as the name of the anchor (ie My Dinner).

<a name="my_dinner">My Dinner</a>
(See note June 2013)

When you go back to this after editing other part of the page, more HTML code will appear but I ignore it.  I prefer to put in something simple and for Blogger (or your CMS) to add the rest of the code.

Now you add the hash (#) and the anchor name that you have added in the quotation marks (my_dinner) to the url for the page (http://yourblog.blogspot.com/2011/10/page-of-anchors.html).  Below is an example of the url you will make.  You can now link to this from another part of the page, from any other page on your blog or from any other website using the link or url that you have created:

http://yourblog.blogspot.com/2012/01/page-of-anchors.html#my_dinner

To add the link on your page using the html, place your cursor at the place (often towards the top of the page) where you want to place a link that will help your reader jump to your anchor.  At this place type the link.  Remember that HTML is case sensitive.  For Example:

The end
Once it is done you should test it.  Check it works.  If it does, you can bake a cake to celebrate.  If not, check your HTML or just curse me for giving you false hope and then search the internet for someone who knows what they are talking about.

One last note - I have noticed that the anchor takes you as close to the bottom of the page as it can get - ie if the anchor is really close to the bottom of the page you may not arrive precisely at the anchor.

Any questions?

Update March 2013 - just updated the anchor link as I tried it today and found it was just not quite right.

Update June 2013 - I have been finding that the code I have been using is not inserting the full code as it was earlier.  So I have had to insert the BlogID and the PageID or Post ID (depending on if I am editing a page or a post).  To find these numbers you need to go into the edit page for a post and look at the url - the numbers are clearly labelled there.  So instead of <a name="my_dinner">My Dinner</a> my anchor code looks like this:

<a href="http://www.blogger.com/page-edit.do?blogID=1234567891234567891&pageID=9876543219876543219" name="my_dinner">My Dinner<a>

where blogID is 1234567891234567891 and pageID (or use postID if on a post rather than a page) is 9876543219876543219