For new HTML students, understanding how to work with folders can be a challenge. A student of mine with minimal computer experience came to me having a hard time understanding how to reference a file in the same directory with a href attribute. I could tell she did not have a strong grasp of working with folders on a computer. So I tried an analogy that worked pretty well.
[note: Names have been changed to protect anyone from embarrassment]
Here is the situation. A folder setup as follows:
paradise (folder)
|
| -- index.htm
| -- spa (folder)
|
| -- index.htm
| -- hands.htm
| -- wraps.htm
| -- salon.htm
In the salon.htm file is a navigation bar with the text: Day Spa. The instructions were to create a link for Day Spa that open the index.htm file in the spa folder. The code she wrote was <a href=”../index.htm>Day Spa</a>. She couldn’t understand why it was opening the paradise/ index.htm file.
We were sitting in the C-108 classroom with several other students. Bert, another student, was sitting by working on his assignment.
I said, “Lisa, let’s say I want Bert to hand you a note. Would I say, ‘Bert, go to room C-108 and hand this note to Lisa?'”
She said, “No.”
“Why not”, I asked.
“Because he is sitting in the same room”, she responded.
Exactly, you don’t have to specify the room number because both people are in the same room. It’s implied in the request. It works the same way with folders and HTML. If two files are sitting in the same folder, you do not have to specify a folder name. The browser will assume it is in the same folder (room).
If salon.htm and index.htm are both in the same folder and the Day Spa text should be a link that opens up index.htm in the same folder, the code would be: <a href=”index.htm”>Day Spa</a>. The dot-slash notation of ../ is not needed because that would take you up to the parent folder (another room) to look for the file.
She got it.