Creating our web.
Links are an important part of the world wide web. They allow us to easily jump from page to page and navigate the absolute mountain of information that is out there. Linking effectively between pages on your own site, and other sites is an important thing to consider as a website developer.
A link is created using an a tag. It stands for anchor. Within the anchor we have an attribute which defines what the anchor links to.
<a href="location">link</a>
Anything contained within the opening and closing a tags becomes a link to the location specified by the href (hypertext reference) attribute.
todolistme.net is a pretty good, simple todo list manager.
A link can be created around, text, images and just about anything that you can display within the browser.
The link is actually something called a URL (Uniform Resource Locator). The link may be global or relative.
A global (or absolute) link specifies the absolute location of a resource. These always begin with a protocol (typically http or https), followed by the website domain and optionally the path from the base of the domain to the specific resource. If you don't include the path component (as is the case with the example link above) then it will default to the main page for the domain.
A global url may be placed anywhere on any page and it will always point to the same location.
Relative links are a little more complex. They are based upon where we currently are. Here are a few examples:
Here is an example of 3 different ways to link to the next page in this tutorial.
Absolute link to the next section.
Relative link to the next section from the base of the domain.
Relative link to the next section from our current location.
Relative link to the next section leaving out the ./.
If you hover your mouse over each of the links above you will see that the browser identifies each of them as going to the same location.
If your relative links aren't working properly, the best way to troubleshoot them is to load the page in a browser and hover your mouse over the link. Identify where the browser wants to go from the link and compare this to where you think it should go. This will help you identify how you need to change it to make it correct.
From the point of view of the end user it doesn't matter which you use. As long as the link is correct it will get to the right location regardless of whether it is relative or absolute. From a developer point of view however, the choice can be quite important.
If you are linking to a location on another domain then the choice is easy, it has to be an absolute URL.
If you are linking to a page within your current domain then it is usually better to use a relative url. This allows you flexibility.
Let's say I was using absolute URL's for all the links on my site to other pages within my site. One day I decided that Walter was a much better name and switched my name accordingly. Then I bought the domain walterstutorials.net. Now I would have to go through the whole site and update all my links to the new domain. But with relative URL's I would not need to do this.
Another scenario is that I have a testserver. I maintain a copy of my site there and test any changes there first before deploying them on my live site. If I had absolute links then on my test site whenever I clicked a link it would take me back to the live site. With relative links however they automatically point to the right location.
As well as linking to pages, we may also link to specific parts within a page. We may do this by either creating a named anchor or placing an id attribute on a tag that is at the place on the page we would like the link to take us.
<a name='anchorname'> </a>
or
<tagname id='anchorname'> </tagname>
Whether you use names or id's they should all be unique. That is, no two names or id's on a particular page should be the same. (It is ok for them to be the same on different pages however).
We then link to that part of the page by including an #anchorname to the end of the URL for the particular page.
In the example above, when you click on the links it will put the identified section at the top of the page (unfortunately that is behind the top bar of the site but there is nothing we can do about that).
In general it is preferred to use id's as opposed to names. The code is cleaner and id's can also be used for other purposes in CSS and Javascript.
It is also possible to specify an email address as your URL. As long as your browser is set up correctly is should result in your email client being opened up and an email being started to the given address. We use the following format:
<a href="mailto:email@address.com"> </a>
Email me click the link to send email to an address that doesn't exist.
It is also possible to specify a default email subject and body in the link.
Keep in mind that although you can provide a default for the subject and body of the email, you cannot prevent the user from changing that in their email.
Be weary about including email addresses on pages that are publicly visible. Spammers use tools which seek out these links and include those email addresses in their spam email lists.
It is quite easy to add a title to a link. A title is a little message that pops up when a user hovers their mouse over the link. To do so we add an attribute which is title (not to be confused with the title tag in the head of the document).
<a href="location" title="link title">link</a>
This can be useful for giving the user a little more information once they have shown interest in the link.
todolistme.net is a pretty good, simple todo list manager.
Hover your mouse over the link in the example above.
The title attribute is not just confined to links. You may in fact add it to any tag and it will work.
Now let's make our content a little more interesting.
As we work through this tutorial, each section will add new tags allowing you to do more interesting things. My suggestion would be that you pick a topic or subject of interest to you and create a page about that. As you work through each section, add to and improve the page with the new tags you have learnt.