Putting Anchors, and HTML, In Your Posts

Blogger blogs are coded in HTML.

This post is displayed in two sections.

• At the top, we have my HTML Display Tutorial.
• At the bottom, we have my Anchor Tags Tutorial.

If you want to include something besides plain text in your post, you code it in HTML.

Displaying 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 ...

<a href="http://blogging.nitecruzr.net/
2006/07/image-test.html#Picture">
Check This Out</a>

2. ... to display this.

<a href="http://blogging.nitecruzr.net/
2006/07/image-test.html#Picture">
Check This Out</a>

And that is the code used ...

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.