In my ongoing series of Clubhouse posts, I’ve decided to turn really good questions I’ve been asked into blog entries. Recently, a member of one of my Windows Live Groups asked the group’s experts to explain hyperlinks in a way that makes sense to newbies. It seems that she had been having trouble getting her links to work (very common), so I decided to lay it out for her (and anyone else who’s interested in reading).
First a little background. Hyperlinks are a mainstay of creating connections on the web. Every resource, whether it’s a page, picture, sound, or video, has a unique address that can be expressed as
and that address is referred to as a URL, or uniform resource locator (or URI, which can actually be a little different). So when you see an address in your browser like
it’s telling your web browser to use the HTTP protocol (language) to go to the www (worldwide web) host computer on the microsoft.com network (on the commercial or "com" domain), look in a folder on that host called "windows," retrieve a file called "default.aspx” (which is in this case a dynamic active server page, or "asp"), and display its contents. Some hyperlinks are a lot more complex, but that covers the basics.
To create a link on a web page, you use an anchor, which is typically a string of text or a picture that the page’s reader can click to activate the link. Since you may not want the final destination to be quite so obvious as the link above, your anchor text does not need to match the URL (known as the hyperlink reference, or "href").
In HTML (the standard language used to write web pages), the code for an anchor looks like this:
<a href="target URL" target="target window" title="title text">anchor text</a>
The important attributes (in blue) are described below:
Target URL. This is where you want the link to point. The quotes are helpful to accommodate spaces in the path.
Target window.This indicates how the link should open. The most common option is "_blank" to open a new window (mind the initial underscore), otherwise you can leave the entire attribute out of the code altogether.
Title. This displays an optional tooltip when the page’s reader hovers the mouse over the anchor. Again, the quotes are necessary to accommodate spaces.
The anchor text (in red) is the actual text you want to display on the page. It can say anything you like, and optionally, an image or other type of resource could be used instead of text. So, to create a link the Microsoft Windows home page that opens in a new browser window, I’d use the code:
<a href="http://www.microsoft.com/windows/default.aspx" target="_blank" title="Go to the Microsoft Windows home page">Click Here</a>
and it would look like this on the page:
Thankfully, the editor used by WL Spaces and WL Groups doesn’t require you to know a lot about the internal mechanics of hyperlinks. You have three options for creating a link, depending on how fancy you want the anchor to be.
The first option is to type or paste anything that looks like a URL into the editor, and it’ll create the necessary code to convert the URL to a functional anchor. You don’t have to be fancy; simply typing a basic URL www.live.com will do the trick. Unfortunately, this happens to be an IE-only trick at the moment. Firefox (and probably others) doesn’t seem to be able to translate the pasted links into anything functional. Check out the next option for more information.
The second option is to click the Insert Link button on the editor’s toolbar. You’ll see a pop-up window that asks for the title (anchor text), link (hyperlink reference URL), whether to open the link in a new window, and whether to prevent search engines from indexing the link. Just fill out the form (again you can paste a copied URL here), click Insert, and you’re good to go.
Finally, if you’ve already typed your anchor text, then you can highlight it can press Ctrl + K to open the Hyperlink window (another IE-specific feature of the editor, so no dice in Firefox or others). In this window, you can select the appropriate protocol, type (or paste) the hyperlink reference URL, and click OK to finalize the link.
If you really want to tweak the code that the WL editor writes for you, then you can click the HTML button on the editor’s toolbar to see your entire post as raw code. However, if you’re comfortable using this option, then you probably didn’t need to read this overview.
When you click the Publish button at the bottom of the editor, the hyperlink should be fully functional. Happy linking!