Links
There are two main types of links
- Absolute Links
- Relative Links
Absolute Links
Absolute links are the links you generally make to other sites. They look
like this:
<A HREF=http://www.ilikecake.net>visit ilikecake's website</A>
or this
<a href="http://www.ilikecake.net">visit ilikecake's website</a>
- The link tag is the <A> part. The A means 'anchor'.
- HREF is an attribute of <A> and means 'hypertext reference'. Attributes are not tags themselves. They are found inside tags. They help define the qualities of a tag such as where it links to. There are many kinds of attributes, more of which we will see later.
- The HTTP:// is necessary, it won't work without it. It means 'hyper-text transfer protocol' and is how the browser knows what to do with the link. There are other types of transfer protocol, but more of this later.
- The text between <A> and </A>, in this case 'visit ilikecake's website' is what becomes the link.
Exercise
HTML
<HTML>
<HEAD>
<TITLE>Absolute Links</TITLE>
</HEAD>
<BODY>
Try clicking your mouse on this nice link to go
to
<A HREF=http://www.ilikecake.net>visit ilikecake's website</A>
</BODY>
</HTML>
XHTML
<html>
<head>
<title>Absolute Links</title>
</head>
<body>
Try clicking your mouse on this nice link to go
to
<a href="http://www.ilikecake.net">visit ilikecake's website</a>
</body>
</html>
Notice that in XHTML you must put quotation marks (") around the URL (website address), whereas in HTML this is not required.
Also notice that in XHTML the attributes must be in lower case.
Save and refresh in the browser. 'visit ilikecake's website' should be a blue underlined hyperlink. Try altering the link to any other address on the Web. Obviously, the external link won’t work unless you are online.
Relative Links
Linking to page in same folder
Relative links are the links you normally make to other pages on your site. They look like this:
HTML
<HTML>
<HEAD>
<TITLE>Relative Links</TITLE>
</HEAD>
<BODY>
<A HREF=mypage.htm>My First Page</A>
</BODY>
</HTML>
XHTML
<html>
<head>
<title>Relative Links</title>
</head>
<body>
<a href="mypage.htm">My First Page</a>
</body>
</html>
The only difference is that there is no HTTP:// bit. The link assumes that mypage.htm is in the same folder as the page you are linking from.
Linking to page in subfolder
<A HREF='morepages/mypage.htm'>My
First Page </A>
assumes that the page you are linking to is in a subfolder called 'morepages'
Linking backwards
If you want to go up one level, you need to put in a ../ at the start of
the link
<A HREF='../mypage.htm'>My First Page
</A>
This assumes that you are in a subfolder already, and are linking to a page
in the level above you.
If you need to go back 2 levels, just put in 2 ../
<A HREF='../../mypage.htm'>My First
Page </A>
The next thing to learn is how to insert images.
created & designed by Vivienne Trulock for ilikecake.net
.
.