The Dynamic Duo

Well, boys and girls, you are in luck. My dearest UltraMommy tried and failed (some advanced linking there) to insert a link in her blog post using the automated tools in w.bloggar.

Looking at the source code of her post, I can see exactly why:
<a href="http://www.hearstcastle.com/" title="Hearst Castle"></a>

Unless you are familiar with HTML (HyperText Markup Language) you probably don’t yet see the problem but you soon will. Let’s start with the html tag that we use to make a link: the ‘a’ (anchor) tag. This let’s you drop an anchor into your text that will jump the reader to another point in this or another document.

To get started we need to familiarize ourselves with the anatomy of an html tag. html tags that encompass text or some other content begin with an opening tag, <p> for example to start a paragraph, and end with a closing tag like </p> for example. Notice the ’/’ in the closing tag. There are a few special tags, like the img (image) tag for example, that ARE the content instead of enclosing content:
<img src="img/puppies.jpg" alt="Cute Puppies" />

As you can see in a tag like this delightful picture of the cutest puppies you’ve ever seen, these single tags are closed by putting a slash inside the tag after all the attributes. “The attributes? What attributes,” you ask confusedly. Be patient grasshopper, you’ve just seen them, but I’ll explain them to you now:

Many html tags need more information than can be provided by a simple opening and closing tag set like <p>Your paragraph here</p> The img tag you saw above is one such example, and another is our beloved anchor tag. Attributes to html tags take the form parameter="attribute". There are two attributes I’ll talk about for the anchor tag though there are actually more that could be used, and coincidentally they are both in my mother’s nice, albeit invisible link:

<a href="http://www.hearstcastle.com/" title="Hearst Castle"></a>

That’s right, the two attributes I’m talking about are href and title and the ones in mom’s link are fine specimens.

Let’s start with href because this is the only one we really can’t live without in our link. Let’s have a look at the href attribute in UM’s link: href="http://www.hearstcastle.com/". href stands for hypertext reference, and contains the URI (Uniform Resource Identifier) of the page you are trying to link to. Without this handy dandy attribute, the viewer’s web browser wouldn’t know where to go when you clicked the link.

Next is the title attribute. This isn’t absolutely necessary, but is helpful for a few different reasons, most of them related to helping both humans and search engines know what is at the other end of a link. You see, the clickable text in a link may have nothing to do, with what is at the other end of the link, especially of it is not in the context of the linking page. How many times have you seen a link like this: Click here for more information. “here” doesn’t tell you much about what you’ll be seeing when you get to the other side of the link, but try something for me. Put your mouse pointer on the link, and then hold the mouse still (don’t click just stop moving the mouse pointer and let it hover over the link). In most browsers you’ll see a tooltip pop up with the information in the title attribute in it. This can be one additional clue for users, and a great assist to search engines, and all it costs is a few extra keystrokes.

So let’s have a look at the link we were just dealing with, next to Mom’s:

Mine: <a href="http://www.akatombo.com" title="Akatombo Media">here</a>
UltraMom’s: <a href="http://www.hearstcastle.com/" title="Hearst Castle"></a>

Do you see the difference? If not, think back to the ‘M’ in HTML, HTML is a markup language, which means it needs to be marking something up. What Mom probably wanted the link to look like is:

In html code: <a href="http://www.hearstcastle.com/" title="Hearst Castle">Hearst Castle</a>

which would output: Hearst Castle

In the context of w.bloggar it probably means that the way to make the link work like you want it to is (1 is probably what you’ve missed so far):

1. Type the text that you want to appear in the link (‘here’ in my earlier example)
2. click the link icon in the toolbar
3. enter the title and url when prompted, and click OK or whatever you need to click to accept it
4. Admire your shiny new link
5. muse that on second look it isn’t really all that shiny, but it sure is a beauty nonetheless

I hope this was helpful. Let me know if there was anything in there that was confusing, or if you want to know more about something in particular.

Up next: How to create image links in movable type that are viewable even to those without gigantic monitors.