Using HTML

Links

There are two main types of links

  1. Absolute Links
  2. 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.