The a or anchor tag
Hyperlinks, or links, are how you move around the web. An a or anchor tag is how you make hyperlinks in HTML.
The a or anchor tag is an elegantly simple and powerful tool – with an utterly counterintuitive name.
While he could have done with a dictionary, whoever thought it up was brilliant. He made the internet possible.
When you click on a link your computer (the client) asks another computer (the server) to send it a file. When all is said and done that's all that is really going on. How all that works is complicated, but what happens – what is actually going on – is not.
Always keep in mind the fact that everything on the net is stored as files on computers connected to the internet. There are "local" files, or files on your computer, and then there are billions of files on servers all over the planet.
For you to get to this page you clicked a link on some other page and sent out a request to go to a computer (my server) named "html-5-tutorial.com" * to send you the file named "a-tag.htm".
Your computer knows that the file "a-tag.htm" is a webpage because it has an ".htm" extension (.html works the same) and opens it in your browser for your viewing pleasure.
The code for the link (a-tag) to this page looks like this:
<a href="http://www.html-5-tutorial.com/a-tag.htm">a tag</a>
It includes the unique URL** of this page:
http://www.html-5-tutorial.com/a-tag.htm
Which is what you see in the address bar at the top of this page.
As you are not changing domains (ie. changing servers) you can shorten the link to just include the file name***:
<a href="a-tag.htm">a tag</a>
If no file name is included in the URL it is assumed to be the index or home page.
<a href="http://www.html-5-tutorial.com/">XYZ</a>
Any text or image (we'll get into that later), can go where I wrote "XYZ". The "XYZ" – what is inside the a tag – has no effect on where the link will take you. It does however tell visitors where they will go if they click the link.
It also affects SEO as search engines want pertinent content. If you are selling doohickies make a page named "doohickies.htm" and links that look like:
<a href="doohickies.htm">We sell doohickies!</a>
Now we are going to put your newfound skills into action.
At this point you have made two pages: my-first-webpage.html and my-second-webpage.html. Ideally you have saved them both in same place and somewhere you will be able to find them again. If not, you can find them in this page's source code.
Go to your desktop and create a folder named "my-webpages" then move both of your webpages to that folder.
Now open up my-first-webpage.html in a text editor (not MS Word) and after <p>My first webpage</p> add:
<p><a href="my-second-webpage.htm">My Second Webpage</a></p>
While you are at it change <p>My first webpage</p> to <h1>My first webpage</h1>.
Save my-first-webpage.html and open it in your browser. To do that on a PC go to your desktop, click on the folder "my-webpages" and click on the file "my-first-webpage.html". Click on the link "My Second Webpage" and it should open in your browser.
Now open "my-second-webpage.html" and add a link to "my-first-webpage.html". Open (or refresh) my-second-webpage.html in your browser and now you can toggle back and forth between your two pages. I have an example of each below:
my-first-webpage.html
my-second-webpage.html
I have added a bit of code: target="_blank" to have the page open in a separate tab. Close that tab to get back here.
If you are having problems make sure you saved them as .html (not .txt or something else), make sure they are in the same folder and last but not least use a text editor – NOT MS Word.
You will notice I have all the links on this site in an unordered list. As an exercise change your links to be in <ul> tags rather than <p> tags as they are right now.
Finally make a third page with links to the previous two pages. Add links from all three pages to all three andVoila!, you have the beginnings of your first web site. Basic they may be, but you are defiantly on your way!
