Article
About the Author
James Ussher-Smith
James is a student and freelance Web developer, specialising in database driven Websites. He is also developing a powerful link directory script, SideLinks.
Beginners' HTML - Part 2
In this, the second part of the tutorial series, we'll find out how to create links to other Web pages, as well as links to other parts of our own pages. Our main page is beginning to look a little cluttered now, so we are going to make a brand new Web page that will contain some links to a few of our favorite Websites.
Basic Linking
To begin, open up a new blank page in your text editor, then fill in the basic starting shell that we saw in the first part. Set a title for the page:
<html>
<head>
<title>My Favorite Web Sites</title>
</head>
<body>
content
</body>
</html>
Next, let's add in a little formatting and a few links:
<html>
<head>
<title>My Favorite Web Sites</title>
</head>
<body>
<font size="+2">
My Favorite Web Sites
</font>
<p>
SitePoint - http://www.sitepoint.com <br>
Google - http://www.google.com <br>
AltaVista - http://www.altavista.com <br>
Slashdot - http://www.slashdot.com
</p>
</body>
</html>
Now, this page is all well and good, but if a user wants to visit one of the sites you've listed, they'll have to either retype the address into their browser or cut and paste the URL. There is a much better way to do this, which uses the <a> tag. The syntax for the <a> tag is as follows:
<a href="URL">TEXT TO DISPLAY</a>
You'll need to replace "URL" above with the full address to the site, including the http://, and then replace "TEXT TO DISPLAY" with the text you'd like the user to click on in order to go to the URL. once we add this code to our page, it'll look like:
<html>
<head>
<title>My Favorite Web Sites</title>
</head>
<body>
<font size="+2">
My Favorite Web Sites
</font>
<p>
<a href="http://www.sitepoint.com">SitePoint</a><br>
<a href="http://www.google.com">Google</a> <br>
<a href="http://www.altavista.com">AltaVista</a> <br>
<a href="http://www.slashdot.com">SlashDot</a>
</p>
</body>
</html>
Now all a user has to do is click on the title of the site (e.g. SitePoint), to be instantly transported to that site.