If you understand a little of how the Internet works, then I am sure you have been biting at the bit to get to this part. There are a lot of things involved in linking, but I am going to cover the basics in a very plain and simple manner.
Here is the mark-up:
<a href=""></a>
The "a" right at the beginning tells you that it's an anchor. Don't worry about it, just remember it.
The second part is the href, it is the "hypertext reference" This is telling it, if you press this anchor, take me (or rather, load in my browser) this page.
What page? Okay, we didn't put anything in there yet. There can be three main links from our point of view:
1. Links to other sites.
2. Links to other files within your site
3. Links within a page...basically just jumps down long pages.
The first two are basically exactly the same, it's only how much of the URL you need to write that changes. Okay, lets say you are creating a website that lists great, easy to follow HTML tutorials, and you think this one is just grand. Here is how you link to it:
<a href="http://nonnerd.blogspot.com/"></a>
For the time being we have an anchor, but nothing for the website's user to click on. Basically anything you put between the opening and closing anchor tags becomes a "hyperlink" So, let's put something in there:
<a href="http://nonnerd.blogspot.com/">A simple and comprehensive HTML tutorial</a>
Great, now the user knows where it is going to take him. Now,if you have used the Internet much, you would know that often if you click over a link (or hyperlink) you get a little text that pops up telling you a little about this link. You add this with the "title" attribut in the hyperlink tag. Here's how:
<a href="http://nonnerd.blogspot.com/" title="Non Nerd Hacking HTML tutorial">A simple and comprehensive HTML tutorial</a>
If you want the link to open in a new tab (or new window if your user is using a really old browser) then use the target attribute, like this:
<a href="http://nonnerd.blogspot.com/" target="_blank" title="Non Nerd Hacking HTML tutorial">A simple and comprehensive HTML tutorial</a>
PLEASE, for the sake of web surfers the world over, don't do to much of that. Use it only were really appropriate.
Now, if you are simply navigating your own site, it depends if you put the file in different folders. If it's all in the same place, you simply need the file name:
<a href="index.html" title="Home">Your Website's Home Page</a>
And, lastly, if you want to move within the same page, do it like so:
1. Name the area you would like to 'jump' to:
<a name="#comeHere">The info which we are going to</a>
2. Create a link to go there, further up the page (or down, such as a "back to the top of the page" type link):
<a href="#comeHere">Where we go from</a>
So note that in the first part, "name" replaced "href"
By the way, just to give credit where it is due, I use this last technique so seldom that I had to look it up in another tutorial:
<a href="http://www.w3schools.com/html/html_links.asp" title="HTML Links">www.w3schools.com html links page"</a>
Links are usually blue and underlined. We'll get to styling links when we get to CSS.
About Links
Alright, you may have noticed that I keep asking for links to this page. Links are really what the whole world wide WEB is all about, it's the fabric of the web. One page, loaded on a random server, can only be accessed by those whole know the exact URL if they were not able to go there through a link. Can you imagine a website getting hundreds, thousands or even millions of page views if there was no link. No way.
Links build authority. The more links a site has to it, so long as those links themselves are from good, legitimate website, the greater the perceived value of the website being linked to. If you get into web development you will hear about SEO (Search Engine Optimization). It involves all sorts of things, but basically links to your site builds authority with search engines, and that way your site floats to the top in their results.
There is another side to it. There is this mad "link Building" that goes on, with different blogs and websites looking for their place in the sun by collecting a lot of links pointing to their site. It all gets a bit crazy. Be careful with this right from the start. Write good stuff, ask for some links, but don't go to link farms and exchange your links with everyone.
If you stick around for a while, we will one day get to web development and touch on SEO over there. I just wanted to give you an initial 'head's up' about something that is a little crazy on the WWW.
In the next tutorial we are going to start to stick some images into our pages. Fun, fun, fun.
