Lesson 4: Adding Links

PREVIOUS LESSON : LESSON 3

READING TIME : 5 MINUTES 

1) Great! We have a functional page of text! Are you satisfied? No? Well, me either. Ok, let's expand our page by adding some links to other web pages on it!

2) The ability to link to other web pages is exactly what makes HTML hypertext. Hyper means outside of, and when you link to another web page, you link outside of your own page.

3) Linking to another page is easy. In fact, you only need to use one tag! This tag is the <A>, or anchor tag. The <A> tag uses the HREF argument to specify the site to link to. So it looks like this <A HREF="http://mylink.com">This is my link!</A>. Note the This is my link! part in between the <A> and </A>. This is the part where you enter the text that'll show up in the browser. This text is underlined in some browsers. When Joe Surfer click on this text it'll take you to the link in <A HREF>, which is http://www.mylink.com in this case.

4) But wait, sometimes it's easier still! Sometimes you might want to do relative linking. This is when one page on your site links to another page on the same site. So if you're in http://mysite.com/index.html and want to link to http://mysite.com/page2.html you'd simply add a relative link. The format in this case would be

 <A HREF="page2.html">Go to page2</A>. The browser will then look in the current directory for that page.

5) If you want to get a page one directory up from the current one, you simply insert a ../ before the filename of the page. For example, if you're in http://mysite.com/newstuff/main.html and need to link to http://mysite.com/index.html, this is what you'd do:

<A HREF="../index.html">Go to the index</A>. You can add as many ../'s as you want to get to progressively higher directories.
If you want a link that people can click on to send email to, you just add mailto: before your email address. So it would look like this:

<A HREF="mailto:mymail@mailaddress.com">Mail me!</A> Kapish? 

Ok great! Let's move on to the next lesson!