advertisement
STEP BY STEP GUIDE
TO HTML - PART 4
CREATING LINKSOkay so you've created a great looking page full of wonderful text and colour, but it's static you can't go to another page iin your site or to another site on the internet. What you need to do now is create a hyperlink to another webpage Coding for links is not difficult in HTML. The key tag is <a>. As always follow the method of setting up a page as described earlier We'll begin by looking at links to other pages in your site. Next we'll see how anchors allow you to link to set places on a page. Then we'll look at how to link to other other websites. Before looking at setting up email links and other special links
To link to other pages (within your web folder) is easy.
The <a> tag is the key component.
It defines the area of the hyperlink on the current page (between the <a> and </a> tags) and by using the href attribute it tells your browser where to go to (bit like the src attribute with images). Lets try out an example.
Create these 2 webpages (page1.htm and page2.htm make sure you get the file names right page1.htm<html>
<head>
<title>page 1</title>
</head>
<body>
This is page 1.
<br>I can make a hyperlink to <a href = "page2.htm" >page 2 </a>which is groovy
</body>
</html> page2.htm<html>
<head>
<title>page 2</title>
</head>
<body>
Welcome to page 2.<br>
To go back to page 1<a href = "page1.htm" >click here </a>if you want
</body>
</html> open page1.htm in your browser (click here to see it) something like this should appear Welcome to page 1
I can make a hyperlink to page 2 which is groovy The "page 2" is the area on page defined by the <a> tag to be a hyperlink. Note how the link is in a different colour and underlined. The href="page2.htm" tells your browser to page2.htm. You define the area to be used as a hyperlink. It can also be used to define an image (on it's own or with text).
This page uses a image (file name top.gif) to take you back to the top of the page. Essentially we cheat slightly by creating a hyperlink to take us to the page anew as coded below
<a href = "creating.htm" ><img scr = "top.gif" alt="back to the top"></a>
Now if you just left it as that you'd get an image with a border around it like this one
 This blue border appears to mark the image as a hyperlink. You can turn this off by adding border=0 to your <img> tag Like so <a href = "creating.htm" ><img scr = "top.gif" border=0 alt="back to the top"></a>
Sometimes you want to provide a hyperlink to a certain spot on a document (e.g. clicking here will take you up to the top of the last section). This can be useful for setting up menues on long documents
To do so you must first create an anchor point to which theses links will jump to. To do this you can simply use the <a> tag but with the name attribute instead of href e.g.
<a name = "heading"><h2>This heading is an anchor </h2></a>
This heading is an anchor This makes the heading become an anchor known as "heading" To link to in the same document a link like below should be created <a href = "#heading"> to go to heading </a> to go to heading (try it out) This tells the browser to jump to the anchor (#) labelled "heading" You can create links to anchors on other webpages. The target becomes the page name followed by anchor e.g.
another page called home.htm has an anchor called "start"
<a href = "home.htm#start"> click here</a>
You'll eventually not just want links to your own pages but to other peoples web sites (note its good practice to check its OK with them to use them as a link). This isn't that much different to what you've done already Lets set up a page with a link to Basic web resource site <a href="http://www.fluffbucket.com/">Click to go to basic web resource site</a> View your page as before. Now click on the link (appears as Click to go to basic web resource site) You'll jump to our site The http://www.fluffbucket.com/ is the location or URL (universal resource locator) for our site on the internet.
You are probably use to web address appearing as www.fluffbucket.com (you normally type them into your browser as such). We've added as good practice the http://. This describes the protocol how info is transferred. It is the way information is passed over the Internet . There are other useful protocols which we'll discuss later Note how it doesn't end with a distinct file name. This link takes you as default to the index.htm page on the site (our main or index page (sometimes mistakenly called homepage)). You can link to distinct pages on a site if you want. Look up at the browser bar you'll see it reads as http://www.fluffucket.com/html/creating.htm This is the URL of this actual page. If you know of an anchor on someone elses page you can link to this
Remember our anchor called "heading", well try this out <a href="http://www.fluffbucket.com/html/creating.htm#heading">
Click to go to heading anchor</a> Click to go to heading anchor
As mentioned above http:// is one protocol. There are several others that you can use Perhaps the most important is mailto which instructs the browser to create a new e-mail to a specified address. It provides a useful way of putting a method of contacting you on your web site e.g.
To contact me you can send
<a href = "mailto:webmaster@fluffbucket.com">email </a> creates an email link like this To contact me you can send email
obviously replace email address with your own or target address Another useful protoco is FTP (File Transfer Protocol). If you know the address of a download file server and a particular file you can arrange for it to be downloaded
e.g.
(This to download the fictional program supersludge from a made up server)
<body>
get supersludge version 4
<a href ="ftp://downloadserver.domain/directory/superslug.prog"> There are many more protocols that can be used but these should be the main ones you use when getting started
| 
NEXT