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
protocol:host.server.domain/folder/file.extension
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!
– Greg
gregsedwards 
I love all this stuff. People never think about the code that has to be written to "do" things on a computer. That was the initial beauty of a GUI: "Click and watch/wait".This is a great page, Greg. It made fascinating reading.
LikeLike
I just read your post, Jamie, and I’d encourage everyone to do the same. Great stuff.
LikeLike
I read it too, just now. It helps to understand the more technical stuff. Must go now and finish my radio prog for tomorrow night. In the meantime, keep writing these wonderful articles. Ta, ta!
LikeLike
Yeah Dave, that’s a MUCH simpler explanation for newbies to understand. While we’re at it, let’s give em a lesson on how dotted decimal notation translates to binary. While very interesting to you and me, the role of DNS is not germaine to the discussion of how to create a simple hyperlink in Windows Live, so I decided to keep my explanation (somewhat) focused on what folks absolutely need to know. Nice plug for personal DNS, though, I’ll go check it out now.
LikeLike
Well, actually it’s been proved many times that people are better at taking these things in if they know what they are for! It’s like saying you can learn to drive without any concept of ‘road’ or ‘corner’. This is basic necessary stuff for learning the internet, and no one ever teaches it! It’s a simple concept, your computer connects to one other down a long piece of wire, and you have to tell it what to do and how to do it! It would be more useful to explain WHY the www is there, and why it is sometimes www2, tel, bbbs ,ang, or any of the other things it might be. This would stop people totally freaking when they upload their first proper webpage and finding a dirty great big menacing ftp standing in the way! You make the basic teaching mistake of assuming that lack of knowledge = stupidity. Anyone can understand anything, as long as the whole process is described in terms they can relate to. You tend to skip whole chunks of information because you assume it is ‘too hard’ for the ordinary person to grasp, and the result is that there is a bewildering jump in the middle where magic happens, and you end up somewhere else. If everyone understood these concepts, then otherwise intelligent people wouldn’t write huge articles on ‘why can’t my url be shorter’, because they would Know!But ok, here is a simpler explination – You type in an address, and Wanda the internet fairy does some magic (www = Wanda Waves her Wand), and the website opens. This is simpler than your explination, an essentialy, just as accurate!
LikeLike
Funny. I thought adding the whole description of how hyperlinks work in a simple how-to post work would be regarded as overkill. I always get nicked for being too thorough and long-winded; I think I’ve met my match! It kind of reminds me of that Dilbert toon, where the pointy-haired manager asks Dilbert to explain a tech concept to him, and not to "dumb it down" for him. Dilbert replies, "You see, early civilizations had no concept of zero…"
LikeLike
I think we just approach things in different ways! you tend to explain simple things using big words, I explain more complicated things in simple words. But for something so authorative, your post does contain some glaring innaccuracies. For example,’To create a link on a web page, you use an anchor’. Very few of the links in live posts are anchors. An anchor, as it’s name implies, is a fixed point on a webpage where something happens, which could be a simple hyperlink, but usually isn’t. (these days it usually marks an iframe, or an embedded object)In your last post, the top blue bit (Greg Edwards) IS an anchor, because it has a fixd point, but the other links are NOT anchors, because they float in the text. The highly technical name for these links is ‘links’. So not only have you introduced another bit of jargonese, but you have put it in a context where it makes no sense! (why the hell is it called an anchor???????) If you know it’s because it’s a fixed point, the name suddenly makes sense. Most of the internet is like that, in context, the technical term makes sense, and everything becomes easier to remember. An example of this is……’URL, or uniform resource locator’. Well, I suppose it mght mean that in the states (you do things differently there!), but to the rest of the world, it sounds more like a fancy missile guidance system. URL stands for ‘unique reference label’, (see, MUCH easier to grasp!), and the first url’s on the planet started appearing in the 1880’s, in the British Museum Library.So keep it simple, and if you must introduce jargon, at least get it right.BTW tinyurl etc DON’T shorten the url, you just go to another site, and that site looks up the original. Better off using a referring address, which does the same thing, but this post could be ‘gregspost.us.pn’. Again, much simpler :-)
LikeLike
With all due respect, Dave, you’ve gone off the deep end this time. Of course a hyperlink is technically called an anchor; why do you think the HTML for one is <a>? There happen to be 2 applications of the <a> element in HTML. The one referenced in my post creates an anchor point for a hyperlink reference. The other type, <a name="x">, creates those fixed anchor points within a page, which other links can reference using "url#x" notation.And, yes, services like TinyURL, et. al., do functionally shorten long URLs, regardless of their mechanism for doing so. The final result is a short(er) URL that you can use to refer to your resource. Sure there are lots of other ways to do it, but TinyURL is easy for most folks to use. It’s like Scotty said, in his distinctive brogue: "Aye, an’ if my gran’mother had wheels, she’d be a wagon." ‘Nuff said.It seems to me that you have a tendancy to debate just for the sake of debate, and to throw around your knowledge just to show everyone that you understand it, even if they don’t. It’s the (how did you put it?) "basic teaching mistake" we call "spray and pray." You just throw everything you know at the audience, and pray that either they get something from it or they’re too baffled to question what you’ve said. Regardless, a more effective approach would be to tailor your detail to the needs of your audience.
LikeLike
Greg,I’ve spotted Mr Howes in various places around the web and all the guy ever does is moan and whinge. Ignore him and don’t rise to him.-Jamie
LikeLike
We have a saying her in the UK when it comes to this: Which is better- Short words or complicated words? Theres only one way to find out….FIGHT!! (where upon two people dressed up as representations of the two things run on and start fighting)
LikeLike
Ah, what your creating there is the dreaded ‘floating anchor’!I thought you wanted to be w3c compliant! (personally, I couldn’t care less about w3c validation, so more power to you!)Most blogs and other ‘type it in yourself’ systems create floating anchors as a matter of course for web addresses (although the good ones stick in a pair of div tags), but it is technically bad html, it just happens to work!You have to decide whose side your on when it comes to html, either st. Microsoft and all his angels, or the rest of us, who just do funky things that work! You can’t be both!My point about referring addresses is that they can be called something sensible! Getting one is exactly the same as tinyurl, so not difficult!
LikeLike
@ Jamie – No worries. Dave and I are Network mates. We’re sort of the yin/yang of WL. I think deep down, we both really love it, but he’s a little more vocal in his criticisms, which I totally appreciate. A good vocal minority helps any platform get stronger. In this case, though, he’s just bent on giving me the proverbial business. :)
LikeLike
@ Jamie, I continue to post all over the place simply because, if I stop, I’m overrun with messages asking me to start again, Including some from Greg! We have very different viewpoints, and that is a good thing. Microsoft have to cater for ALL users, and I reckon we represent the opposite ends of the spectrum!! I am starting a forum ‘slightly outside’ of live and (although I haven’t got round to asking him yet!) I hope Greg will participate, simply because his views are so different. I personally don’t want a bunch of yes men at my blogs, I want debate!
LikeLike
MY GOD, WE’VE AGREED ON SOMETHING!I need to go and lie down…………………………… :-)
LikeLike
Also@ Jamie – I see your from London. I’m originally from Brixton, so you have to imagne that ‘south of the river’ cheeky grin, and a tendance to verbal dihoreha! :-)
LikeLike
well on that basis….I’ll retract my earlier comment for a kindred spirit.
LikeLike
Great post Greg, Hi dave!
LikeLike