Today we are going to add links to our code! After all, where would the web be without links?! They are the most important (I think) part of HTML!
A link looks like this:
<a href="LOCATION">LINK NAME</a>I'm sorry but I don't know why they start with an "a", lol. I think it just stands for "anchor". However, I am pretty sure that the "href" stands for "Hypertext Reference" but don't quote me on that...
Now besides the actual code there are two parts to the link - the "LOCATION" and the "LINK NAME". Most links are references to pages on the same site, so the location would look like this:
<a href="page2.html">Page 2</a>The other type is a link to a different site:
<a href="http://www.code2design.com">Code2Design</a>Please notice that you must include the FULL url in the "LOCATION" area. The same applies to the first link - you have to type the full file name!
<a href="page2">Page 2</a>
or
<a href="code2design.com">Code2Design</a>Probably won't work. ;]
Now the first type of link is called a "relative" link, because it is relative to your site. Your computer knows that if you click on a link pointing to "page2.html" it should look for a page on your site called "page2.html". Like wise, the computer knows that it should look for a HTTP://site on the internet.
Now lets suppose you have a site like code2design. As you travel around here look at the URL bar in your browser. You should see that I have different directories on my site. For instance if you visit my blog you will see this in the URL:
Or if you visit the forums you might see:
These represent different directories on this site. Think about it, if you had 100 pages would you want to just stick them all on your server or would you want to group them into relative groups? like:
/tutorials/
/pictures/
/forums/
/memberspages/
etc...Just like you store your files in "My Documents" under different folders like "Music" you need to store all of your contact pages under something like a "/contact/" directory on your web server.
Now obviously, if you only have 7 pages on you site there is no point. :)
Here is what a relative link might look like if it were pointing to a different directory:
<a href="/music/musicpage3.html">Music Page 3</a>While this is what a outside link might look like:
<a href="http://www.code2design.com/blogs/david/">Visit David's Blog!</a>One thing to note is that all directories start with a "/" and end with a "/". That is how the computer tells it is a directory.
So lets type a file now and put our links to work.
<html>
<head>
<title>HTML Link Test</title>
</head>
<body>
<center>
<a href="http://www.ebay.com">Lets go Shopping!</a>
<!-- Add a line break so that the next link is on its own line -->
<br>
<a href="htmllesson2.html">This is the page we made in lesson 2!</a>
<!-- Add a line break so that the next link is on its own line -->
<br>
<a href="http://www.code2design.com">The Coolest Site</a>
</center>
</body>
</html>Now just save it and put it in the same place as the htmllesson2.html file. (I put both of mine on my desktop) Then go to the file and double click it to open it in your browser and then test the links!
Now you try making a document with the links to your favorite places!
