Great! We have a functional page of text! Are you satisfied? No? Well, i’m not either. Let’s expand our
page by adding some links to other web pages on it!
The ability to link to other web pages is what makes HTML hypertext. Hyper means outside
of, and when you link to another web page, you link outside of your own page.
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. 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 clickable text that’ll show up in the browser. This link text is shown blue and
underlined in most browsers. When Joe Surfer clicks on this text the browser will take him to the link in the href argument -
http://www.mylink.com in this case.
Sometimes you might want to do what is called relative linking. This is when
one page on your site links to another page on the same site. If you’re coding page
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>
When the link is clicked the browser will display page2.html if it is in the same folder as page1.html. Lazy people like me love having this option!
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. The format is like this:
<A HREF="mailto:myemailaddress@mymailhost.com">Mail me!</A>
For example, a link to my email looks like this:
<A HREF="mailto:justin@iswapyou.com">Mail me!</A>
Kapish? Ok great! See you at the next lesson!
If you enjoyed this post, make sure you subscribe to my RSS feed!Tags: free education, free tech tips, html tutorial, lesson, little_v
