Wednesday, October 11, 2006

Putting Anchors, and HTML, In Your Posts

Blogger blogs are coded in HTML.

This post is displayed in two sections.
If you want to include something besides plain text in your post, you code it in HTML. The HTML is displayed as ("rendered into") whatever you code (when you get it right). One very useful feature of HTML is Anchor Tags, which you can find described in my Anchor Tags tutorial, below.

This works great, when you want to display something interesting. Occasionally, though, you will want to instruct someone else how to display something interesting. My tutorial on using images in your blog, Image Test (OK, I know it's a lame name), is me trying to show you how to code HTML. So I have to show you both the HTML, and what the HTML produces.

Look at the Hyperlink example in the tutorial.
<a href="http://blogging.nitecruzr.net/
2006/07/image-test.html#Picture">
Check This Out</a>

How did I display the HTML here, rather than the link itself?
Check This Out


Well, wouldn't you like to know?
No, Chuck, don't be a jerk.

OK, I will be nice here. It's a simple enough process, anyway. HTML is nothing but a lot of special code, enclosed in "<" and ">" characters (see my Hyperlink example, for instance).

1. This is the code used ...
&lt;a href="http://blogging.nitecruzr.net/
2006/07/image-test.html#Picture"&gt;
Check This Out&lt;/a&gt;

2. ... to display this. And this is the code used ...
<a href="http://blogging.nitecruzr.net/
2006/07/image-test.html#Picture">
Check This Out</a>

3. ... to display this
Check This Out

If I want to instruct how to code #3, I display #2, by putting #1 into the post editor window.

If you want more information about using "&" code, see (among many articles on the web) HTML Goodies So, You Want An "& Command", Huh?.

I'll leave it to you to figure out how I typed "&lt;" and "&gt;", without getting "<" and ">".

Anchor Tags
Anchors are an entirely different feature. In order to show how you use anchors, though, I included the subject of Anchors with my tutorial on posting HTML.

To explain how I display the code below, I'll refer you to the HTML Display tutorial, above. And that's basically why I put both subjects into one post.

If you have a long post, with multiple sections, like this article, you can carve the post into logical sections. You can link to the various sections, just as you link to individual posts. From here, we can jump (back) to the HTML Display tutorial. Click it and see.

So, how did I do that? Well, this trick is in two parts.
  • The anchor.
  • The link to the anchor.
I'll show two examples here.
  • At the top of this article, we have an invisible ("blind") anchor. You don't see it, though it's there.
    <a name="HTMLTutorial"></a>

  • And here, we have a plain old hyperlink, but one pointing to that anchor.
    From here, we can jump (back) to the <a href="#HTMLTutorial">HTML Display tutorial</a>. Click it and see.

  • This section of this article is headed by a visible ("sighted") anchor.
    <a name="AnchorTagsTutorial"><span style="font-weight:bold;">Anchor Tags</span></a>

  • And, we can likewise jump (back) to the top of this section, the Anchor Tags tutorial. Click it and see.
Of course, the whole idea of anchors is to allow you to jump straight to sections of a long post, from outside the post. So we will again look at Image Test, within which you find my Hyperlink example anchor.
<a name="Hyperlink"><span style="font-weight:bold;">A Hyperlink</span></a>
Please go there, and see for yourself. And, in the immediately above example,
So we will again look at <a href="http://blogging.nitecruzr.net/ 2006/07/image-test.html">Image Test</a>, within which you find my <a href="http://blogging.nitecruzr.net/ 2006/07/image-test.html#Hyperlink">Hyperlink example anchor</a>.

After you add anchor links to your post, don't move between "Edit HTML" and "Compose" modes, when editing your post. Learn to stick in one mode - or you will regret your editing.

Of course, you can always examine the code for any specific page element, if you're using Firefox. Or check out the W3 Schools tutorials, that tell you all about each HTML tag, as used above.


>> Top

8 comments:

gordon said...

Hi,

I would like to test a hyperlink that I learned to use here Thanks if it works.

thekatsmeow said...

Hi, do you know why it works when you create the blog post but if I go back into the post to edit in any way, the links automatically change from #whatever to http://www.(the url of my edit page)#whatever ?

Thanks!

Chuck said...

Meow,

No, I don't know. And that has always intrigued me.

meowsqueak said...

That reversion to the edit URL is really, really annoying.

Chuck said...

That reversion to the edit URL is really, really annoying.

Many things Blogger does are really, really annoying. Why not tell us more about what you need to do - sometimes, there's a workaround for the annoyances.

Dreaming Gardener said...

so what i am trying to do is rather than have the anchor on the same page of my blog, lets say from home with all my posts, i would like to go to an anchor on the about me page. is this possible and please let me know how it may be done.
thanks,
dg

PipSqueak42 said...

Thank you so much for this post! This really helped me figure out what I needed to do, and helped me make my page work the way I wanted it to. So excited it finally worked!!!

tommy said...

Hey,
Thanks for the info. I didn't understood the thing with the anchors, but I viewed your source code and I got it now :D
Thanks again