Joe2Torials.com

HTML : The Basics PT.2

Creating links

A stands for Anchor, this begins the link to another page and HREF stands for Hypertext REFerence. That's short way of saying to the browser, "This is where the link is going to go." Next you give the URL (Website Address) in quotes, like this "http://www.google.com/". You must remember to close the anchor tag. E.G.

<a href="http://www.google.com"></a>

Like the above example, of course, you need text to be displayed for the link otherwise you will see nothing at all. When you create links always remember to make the text for the link meaningful, click here or next will not allow the user to know what he/she is click on, remember to keep it meaningful E.G. Google Search Engine or Joe2Torials.com. The text for the link is entered as shown below:

<a href="http://www.google.com">TEXT FOR LINK</a>

Now this would create the following results: Click here for Google.

By using my CSS tutorials you will learn how to change the colour of links so they will match the rest of your site and not look the default colour and style of link. Your probably wondering how that link opened up in a new window when default links just open up in the same window, well I will tell you how it is done. There is an attribute that tell links where to go, the HREF tells the browser where to go and then the target="" tells the browser where you want the link opened.

target="_blank" - This will make the browser open up in a new window. 
<a href="http://www.google.com" target="_blank">Click here for Google</a>

Creating a Mailto link

What this means is, when the user clicks the link the default mail program will be opened and they will be able to send an e-mail to you. Take a look at the following example, Mailto example. Click the link and your mail program will open with the email address specified already in the To: box.

<a href="mailto:somebody@somewhere.com">Mailto example</a>

You will never have to use the target attribute when it comes to e-mail links. When the e-mail program opens up you will see that the TO: address has the address in it, but what about if you wanted to add a subject as well, well this is just one easy bit of code that goes after the email address.

<a href="mailto:somebody@somewhere.com?subject=subject title">Mailto example with Subject</a>

When you click the link now you can see that the subject box is now filled in. Try it out, click the link: Mailto example with Subject.

Horizontal rule

This is as easy to use as the <br> tag. Insert <hr> in-between the text you wish to separate and you will see that now you have a line across the page.

TEXT TEXT TEXT TEXT TEXT TEXT

TEXT TEXT TEXT TEXT TEXT TEXT

Your text will now be separated like the example above, you can control the widths of HR's which can be handy sometimes. You do this by using the width=" percentage / amount of pixels " attribute.

<hr width="50%">

<hr width="100px">

And this is the end of the second part of my basic HTML tutorial, I hope you've learnt a thing or two.