Tutorials.

+ HTML

+ CSS

+ XHTML

+ JavaScript

NAVIGATION




Creating links
Links (also known as hyperlinks) help navigate your visitors around various pages on your website. The basic HTML code is really simple :) but of course there's lots you can do to customise your links the way you want.

<a href="your_webpage.html">your webpage</a>


back to top

Link targets
You can also specify the 'target' of the link, meaning where you would want the webpage to open.

<a href="your_webpage.html" target="VALUE">Your Webpage</a>


Here is what you can insert as the VALUE of the target:
_new or _blank opens the webpage in a new window
_self opens the webpage in the same window



You can also target your links to a specific frame, like an iframe. Here's an example:

If the code for my iframe is as follows:

<IFRAME name="myiframe" src="page_1.html" width="350" height="270" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="auto" style="position:absolute;top:0;left:0;FILTER:chroma(color=white); allowtransparency:true"></IFRAME>


and I want to create a link that opens a specified page (called "page_2.html") in that iframe (called 'myiframe'), here's what to do:

<a href="page_2.html" target="myiframe">Page 2</a>


Note that the name of your iframe (in this example, 'myiframe') must correspond for your link to work correctly.


back to top

Page Anchors
Page anchors are links you click that causes the page to jump to a particular section. An example will be the 'back to top' (pink up arrow icons) links you see on this page. Clicking on any of the 'back to top' icons will bring you to the quick links at the top of the page. Hence, page anchors are really useful whenever you have a long page with lots of content. It is pretty easy to get lost in a page with tonnes of content, so including page anchors like 'back to top' buttons can help your visitors to get back to the top without having to scroll all the way up. This will improve the user's experience navigating around your site :)

The code below is the link to click on to get to a particular section called AAA:

<a href="#AAA">Section AAA</a>


And the code below is the paragraph called AAA that the link you've created will bring you to:

<p>
<a name="AAA"></a>
Your content goes here.
</p>


back to top

Getting stuck in frames
Sometimes, a visitor might get stuck in the frames of your site. Here's a simple link you can put on your site for such visitors to be able to break out of frames:

<a href="your_webpage.html" target="_top">Break Free!</a>


back to top

Using images as links
Besides creating text links as above, you can also have image links! Basically, instead of clicking on a text to open a particular webpage, visitors click on an image. Here's how you can do it:

<a href="your_webpage.html" target="_new"><img src="your_image_file.jpg" border="0" alt="this will appear when your cursor hovers over image."></a>


In the above code, I've specified "0" border for a borderless image link, and the target to be in a new window. Also, there's a text that will appear when you hover your cursor over the image. You can edit that as the value for alt=" ". Below's an example of how your image link looks like:

mindSKETCH | draw your world.


back to top

Email links
To create a direct emailing link, you will need to insert the 'mailto' code:

<a href="mailto:your_email_address@whatever.com">Email Me!</a>


For example, my email link will look like this » Email Me!

Do note that the Email you send from will be based on your Email settings under your browser's Internet Options. This could be Microsoft Office Outlook, Outlook Express, Hotmail, or MSN Explorer, depending on what you have set.

If you're using Internet Explorer, to change your settings, go to
'Tools' » 'Internet Options...' » 'Programs' Tab » E-mail.


back to top



HTML Tutorials    Navigation    Links    Targets    Breaking Frames