If you're wanting to add a navigation menu to your own site, link to your favourite sites or the pages of your friends then this is the place for you. We'll briefly cover how to create a text link, an image link and how the browser will open it..
Text Link....
A text link is the most common one you'll find.. the majority of this site uses text links for navigation and for linking to sites/pages off our own... purely because it's so easy to create and kind on bandwidth as it doesn't require an image. The basic html for a link is...
<a href="http://www.wackyb.co.nz">[WackyB]</a>
which creates this... [WackyB] an active link. If you click on the link it will take you to our homepage (use your back button on your browser to return to this page) and you're on your merry way being transported around the net... easy aye ;-)
The example shown above can be broken down into two sections..
<a href="/http://www.wackyb.co.nz">[WackyB]</a>
the url (domain name) of the site you want to link to http://www.wackyb.co.nz
and the text that is visible to the visitor [WackyB]
so lets say you want to link to your best friends site, all you need to do is edit the url
http://www.BeckysSite.com and pop in a description for it, like... Becky's Site
so it now looks like...
<a href="/http://www.BeckysSite.com">Becky's Site</a>
now if you want to link to a particular part of her site rather than the whole thing (as shown above) then simply extend the domain name to include the page in question...
<a href="http://www.BeckysSite.com/photos.html">Photos of Becky and I</a>
quick recap...
the example below links to a site...
<a href="http://www.BeckysSite.com">Becky's Site</a>
and this one links to a particular page...
<a href="http://www.BeckysSite.com/photos.html">Photos of Becky and I</a>
When you've mastered the above it's time to add to our existing links...
Giving your Link a Title...
Sometimes you'll come across a link that simply states [Click Here].. but where is here and do I want to go there? This is where the title tag comes in handy. Hover your mouse over [This Link]
and you should see a wee text box appear stating "This Page" dinky aye ;-)
the standard text link is...
<a href="http://www.wackyb.co.nz/websiteurl.html">[Click Here]</a>
which creates this --> [Click Here]
now with the addition of the title tag (title="abc")...
<a href="http://www.wackyb.co.nz/websiteurl.html" title="This Page">[This Link]</a>
which creates --> [This Link]
you can add anything you like to the title section, so if you're link description (This Link) isn't that informative give some thought to using the tite tag so that visitors know where they'll be going if they click on the link :-)
Target...
target="_blank" is very handy addition to the string if you're linking to a page off your own site as it allows your visitors to travel to other sites of interest yet still have the chance to poke around yours.
If you click on [THIS] you'll find it opens in the same browser window and you'll find yourself back at this page... but if you click [THIS LINK INSTEAD] you'll find that your browser has opened a new window with a copy of this page in it.
back to our standard link....
<a href="http://www.wackyb.co.nz/websiteurl.html">[THIS]</a>
now with the addition of the target tag (target="_blank")...
<a href="http://www.wackyb.co.nz/websiteurl.html" target="_blank">[THIS]</a>
Email Address....
everyone likes to get mail that isn't spam.. well most do anyway ;-) so popping your email address in a link on your site is a great way for visitors to get in touch with you. If you click on this link
This e-mail address is being protected from spambots. You need JavaScript enabled to view it
you should find your default email program has popped up with our address
This e-mail address is being protected from spambots. You need JavaScript enabled to view it
already filled out in the to field. Very simply to put in place on your page, simply insert the following....
<a href="mailto:
This e-mail address is being protected from spambots. You need JavaScript enabled to view it
">email us</a>
Linking Images....
if you've got your head around all the above linking images will be a breeze :-)
lets go back and grab the picture and the tag we used in the tutorial [Inserting Pictures]
one picture...
one image tag...
<img src="/images/smilie_home.gif" width="115" height="55">
and we're going to add that to our std link in place of the text description...
<a href="http://www.wackyb.co.nz">[WackyB]</a>
so it now becomes...
<a href="http://www.wackyb.co.nz">
<img src="/images/smilie_home.gif" width="115" height="55"></a>
which when you break it down is...
<a href="http://www.wackyb.co.nz"> <--- the url you're linking to
<img src="/images/smilie_home.gif" width="115" height="55"> <-- the image
</a> <-- closes the active link
all together it creates an linked image (will take you back to our home page) ...
the blue border can be handy if you want people to know its an active link.. but if you want to remove this (as most of us do) simply add border="0" to your image tag...
<a href="http://www.wackyb.co.nz">
<img src="/images/smilie_home.gif" width="115" height="55" border="0"></a>
If you like you can also throw in your Alt tag.. this allows you enter a description. Hover your mouse over the linked graphic below and you'll see "Back to our Home Page"
to do this with your own simply add alt="Back to our Home Page" to the image tag...
<img src="/images/smilie_home.gif" width="115" height="55" border="0" alt="Back to our Home Page">
If you need a helping hand the pop along to our [Forum] and scroll down until you shit website woes
Thought for the Day...
<a href="is what starts the link... and this </a>
tells the browser where to it stops, so don't forget to add your closing tag </a>
or your entire page will be one great big fat link ;-)
| < Prev | Next > |
|---|