Monday, September 18, 2006

How To: Make and Edit Hyperlinks

Okay folks -- now that I did an entry on the difference between Text view and HTML view, the stage is now set for my entry on how to create and edit text hyperlinks in your Journal entries.

I've been having a hard time with this entry, since there are a bunch of different ways you can add clickable text hyperlinks to your Journal entries and I'm trying not to overcomplicate things.

However, no matter which method you use, when you make a hyperlink, you're doing two things:

1. You're giving the Web address (or URL) the link will go to.
2. You're saying what the label of the link -- the blue underlined text -- should read.

Depending which method you use, these may both be done for you automatically. What they all have in common, though, is that you can edit all the hyperlinks in Text view, just like you would any other text; as long as it stays blue underlined text, it's still a clickable hyperlink.

Let me back up a step.

Say you're creating a new blog entry, and you want to include a hyperlink to my entry on how to fold a dollar bill into a ring, because it's just that cool.

Method 1: Favorite Place Heart
The easiest thing to do is drag the Favorite Place heart from my dollar bill blog entry, and drop it in the Journal entry you're writing:

Drag a Favorite Place Heart into Your Journal

When you do this, it will automatically grab the address, and use the title of the Web page as the text of the link. In this case, the link text is "Make a Bling Ring Out of a Dollar Bill (Plus, the AOL Pictures Beta)."

If you want to change the link text, you can edit it just like you would edit any other text.

Method 2: Copy and Paste a Hyperlink
This one is pretty straightforward: If you find a clickable hyperlink in a Web page, IM or e-mail (
like this), you can just copy and paste it into the blog entry you're writing, then edit it as needed. Easy peasy -- just make sure the link you're copying goes where you expect it to go.

Method 3: Copy and Paste a Web Address
Or, say you just have the Web address of a page you want to link to. Just copy and paste the URL into a new entry of yours. Because you're in Text view by default, if you're using the AOL software or the standalone Microsoft Internet Explorer browser, it will recognize it as a Web address and automatically make it a clickable hyperink -- you don't have to do anything else:

Journals automatically turns an URL into a clickable hyperlink

But gee, that's a pretty long hyperlink. In fact, with long Web addresses that don't have hyphens in there, they might be so long that they stretch out your page and make it too wide.

The good news is that since you're in Text editing view, you can edit the hyperlink text just like you would any other text:

In text view, edit the hyperlink like you would any other text.

There's just one thing to be careful with -- when you're editing a hyperlink this way, make sure you replace the whole link address; otherwise, it will think you're just trying to fix a part of the link address, and it will change the linking address for you, and what you end up won't work.

I'm not explaining this very well -- you'll have to try it out.

Method 4: The Insert Link Button
You can also just use the Insert Link button, which is the little button on the formatting toolbar with the globe on it. (Globe = World = World Wide Web. I think the next revision of the toolbar will use a little chain-link icon -- it seems to be more widely recognized.)

When you're creating an entry, type some words that you want as the clickable link text:

Insert Link Button
I can use "This is stupid" as my link text since it's my link and my entry.

Then, click and drag with your mouse to highlight the words you want as your link text, then click the Insert Link globe button:

Insert Link Button - Step 2

This will cause a box to pop up. Paste the Web address you want the link to go to in the box:

Insert Link Button - Step 3

You've just created a clickable hyperlink, which you can then edit normally.

Tip: You can also hyperlink photos this way -- in the editing view, highlight it with your mouse, then click the Insert Link button and paste the link address into the box.

Method 5: Hand-Coding the Links
Lastly, you can hand-code your hyperlinks. It's the most tedious method, but it gives you the most control over your links.

First, making sure you're in HTML view, type:

<a href="http://journals.aol.com/journalseditor/magicsmoke">This is a link to Magic Smoke</a>

What's all that mean?
  • The <a href=" bit says "This is the start of a hyperlink"
  • http://journals.aol.com/journalseditor/magicsmoke is the address the link will go to
  • The "> says we're done with the address (which was between the 2 quotes)
  • This is a link to Magic Smoke is the part that is going to show up as the blue, underlined clickable text.
  • </a> says "Whew, we're done with this link."
When you save your entry, the link will look like this:

This is a link to Magic Smoke

Anyway, I think that about covers it. I hope I didn't confuse anyone.

Since I usually work in HTML view except for formatting tweaks, I usually hand code my links, but you should feel free to use whatever method you like.

One tip: Be kind to your readers -- test your links after you publish your entries to make sure they work. (You can right-click to have the link "Open in New Window" -- that can save time if you're checking a lot of links.)

Another tip: The Undo command (Control+Z) works when you're editing your Journal. Trust me on this one.

Thanks -- Joe

3 comments:

Anonymous said...

Speaking of checking links, umm...  the example you made doesn't work, Joe (you misspelled your name).  

Other than that, is there a way to create links so they will open in a new window?  

I've always been a little curious about that.

-Dan
http://journals.aol.com/dpoem/TheWisdomofaDistractedMind/

Anonymous said...

Dan -- I fixed that one as I was following my own tip ("Test your links").

Regarding opening links in new window, you can use target="_blank" (see http://www.w3schools.com/html/html_links.asp for more info or search for more HTML resources.)

You do want to be careful with popping new windows; some folks don't like it, and visitors can always just right-click to open in new window.

Thanks -- Joe (posted & mailed)

Anonymous said...

I use the target="_blank" trick to open links in a new window at CarnivAOL ( http://journals.aol.ca/plittle/CarnivAOL/ ) only because there are multiple links to other blogs, and I assume readers will want to easily find their way back. I don't use them in any of my other journals, mainly because it's kinda a blogging convention.
-Paul
http://journals.aol.ca/plittle/AuroraWalkingVacation/