a Links

NB: For those who get this via email, I'm not sure how my formatting is going to hold up when it gets to you. If you are having trouble making heads or tails of this post, please link back to it on the web.

Got a quick request yesterday from someone who needed a reminder for how to create text links in html. I quickly typed out: <a href="URL">text</a>. I went back later to check on his links, and the text was gone... invisible. Confused, I dug into his code to see what he had typed. Instead of copying my code, he had created:

<a herf="URL"><text></a>

I got rid of the "greater than" and "less than" symbols around the text, and now the link showed up. But they still didn't work. I looked at the code again and realized he had typed "herf" instead of "href". Fixed that, and everything was working again... well, except for the links which took me to sites which froze my browser, but that's a totally different issue.

This post is about text links. And I'm going to walk you through them bit by bit so you can make sure you get it right every time.


a Links

HTML code recognizes the "greater than" and "less than" symbols (< >) as the start and end of an action. So, we start with the opening of an action < Then we put down an "anchor", which is basically a flag that points to something on the web (a picture, a website, etc): <a Then we had the Hypertext Reference: <a href=" Add the URL (where this thing is on the net): <a href="http://production-now.com" Now we need to tell the computer that we are done with telling it where we're going, so we add the greater than sign to close it all off: <a href="http://production-now.com"> Then we add the text we want the link to be: <a href="http://production-now.com">What a great media production resource! Then, since we "opened" an anchor (said we were going to start a link) we need to tell the computer to stop, so we add a "/a" to the end inside of the greater than/less than symbols to make the action work: <a href="http://production-now.com">What a great media production resource!</a> This will work and look like so: What a great media production resource!

Hope that helps shed a little light on the process of making text links. The last little tip I would suggest is that whenever you post something, especially if you're starting out, check your work after you've posted it. Do the links work? If something doesn't work right, look back over your code and see if you can find where you mistyped something.

~Luke Holzmann
Your Media Production Mentor