Putting Anchors, and HTML, In Your Posts

Blogger blogs are coded in HTML. If you want to include something besides plain text in your post, you code it in HTML, and the HTML is rendered into whatever you code (when you get it right). One very useful feature of HTML is Anchor Tags, which you can find described 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://bloggerstatusforreal.blogspot.com/
2006/07/image-test.html#Picture”>
Check This Out</a>

How did I produce that here, rather than the rendered version

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. If I insert into my tutorial, in Post Edit, this code

&lt;a href=”http://bloggerstatusforreal.blogspot.com/
2006/07/image-test.html#Picture”&gt;
Check This Out&lt;/a&gt;

2. You see displayed in the blog post (as in the example, above)

<a href=”http://bloggerstatusforreal.blogspot.com/
2006/07/image-test.html#Picture”>
Check This Out</a>

3. If I insert into my tutorial, in Post Edit, the code from #2,

Check This Out

Is what you see displayed in the blog post.

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 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 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 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://bloggerstatusforreal.blogspot.com/
2006/07/image-test.html”>Image Test</a>, within which you find my <a href=”http://bloggerstatusforreal.blogspot.com/
2006/07/image-test.html#Hyperlink”>Hyperlink example anchor</a>.

Wasn’t that fun? Want to see how it works, on your own?

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: