HTML: A Guide to Hard-Coding
Links in the Same Site
Linking to another page within your site is just as easy, if you have a good filing system. For example, all the pages I've made to make this site about Hard-coding HTML have been in the same directory (HTML) on my site. Therefore, all the pages regarding HTML are on the same level. When files are on the same level they are easy to link because you don't have to worry about changing levels.
Your filing system should look something like this:
If you decided that you wanted to have many pages in your site you would need to create new files and then link them together. For example, say you wanted to have a page with pictures of your friends, a page for family, a page for your resume and a page that talks about your hobbies. You would create four new files:
- friends.html
- family.html
- resume.html
- hobbies.html
What you name them doesn't matter, but you should use a descriptive name.
To link between these files is easy. The code is:
<A HREF="family.html">My family</A>
That's all you need to link files that are on the same level.
What happens if the files are not on the same level?
You should notice that we have a folder named "images." Back when we were talking about inserting images into your page, I said that the code would be <img src="images/name.gif"> We had to use "images/" because we were looking in a different folder. So, if we had an HTML document in the images folder (I don't know why you would, but for the sake of example. . . . ), the code would be:
<A HREF="images/name.html">
What if I need to link back to the main index? If my HTML document is in the images folder, I somehow have to tell the browser where to find the document called "index." To go back up a level, you need to use, "../" Therefore, if I am linking back to the main index from a file in the images folder, by code would be:
<A HREF="../index">Back to my main page</A>
The thing to remember is that the browser doesn't know where your files are; you have to tell it where to look for them.
