Hyper Links
Hyper links are one of the most important features you can learn about and will become one of the most used elements in your web sites. You can link to just about anything, other web sites on the net, different pages on your site, a particular place on a page of your site or to an enlarged image etc.
When inserting a link there are two components, the source of the page your link is pointing at and the link text which is seen by user's on your site.
<body>
<a href="http://www.google.com">
Link To Google</a>
</body>
Here you can see that the anchor tag has been opened and closed, <a></a>, and inside the opening anchor there is the href="" which points to the page we want to link to. In between the closing > and finishing </a> you can see the text that will appear as the link, "Link to Google".
Adding a Title
You can also add the title attribute to the anchor tag, the title value appears when you hover your mouse over the links text.
<body>
<a href="http://www.google.com" title="This link will take you to the google homepage">Link to Google</a>
</body>
Different Targets
After you have spent hours designing your site the last thing you want is all your links taking your much deserved visitors away to other sites. The target attribute is not strict (X)HTML but validates ok in transitional and still works in nearly all browsers. To open the link in a new windows the code is as follows:
<body>
<a href="http://www.google.com" target="_blank">Link to Google </a>
</body>
There are 4 different values you can use with the target attribute, go ahead and try them all out:
- _blank
- _self
- _parent
- _top
Specific Links
If you have built a web site that contains a lot of content and you don't want your users to have to scroll through the whole page then you can link to specific places on a page using the anchor tags. First of all decide where you would like the link to go and create an anchor at this place like so:
<body>
<a name="middle">Any text you may want in your anchor</a>
</body>
Then we create our link as normal adding a # followed by our anchor name onto the url:
<body>
<a href="www.examplesite.com/home.html#middle">This links to out middle anchor </a>
</body>
Absolute Vs Relative links
In all the examples above we have used absolute url's, these type's of links are where we specify the complete url to a web page, but if we are linking to our own site then there is no real need to type in the full address of the page. This is where relative links come in. Here i create a link to another page in the same directory as the page the link is on:
<body>
<a href="information.html">This links to a page called information in the same directory as the file this link is on</a>
</body>
If you wanted to link to a file in another directory like the pages folder then you could just type the address like:
<a href="pages/information.html">This links to a page called information in the pages directory</a>
Sometime's you will need to go back a directory then specify the page name here is a link from the information pages in the pages directory to the home page.
<a href="../home.html">This goes back one directory then links to the homepage</a>
Links.
Web Hosting
Security
Spyware & Adware
Pop-up Blockers!