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.

From the RSA Animate Channel on YouTube. “This animate was adapted from a talk given at the RSA by Sir Ken Robinson, world-renowned education and creativity expert and recipient of the RSA’s Benjamin Franklin award.”

Outstanding lecture and supporting animation by the UK group Cognitive Media. Enjoy. Discuss.

A great post by  Ron Harris on the history of drawing the comic masculine mouth. As a cartoonist, this is one of the trickiest parts of the anatomy to get right. Great article. http://smurfswacker.blogspot.com/2009/11/technique-talk.html

Most of my students that are new to coding are thrown off by the dot slash (./) notation used in filepath values in the href attributes in HTML. I was first exposed to using dots and dot dots back in the late 1980s when I first got my hands on a MS-DOS machine (prior to Windows). The way you created directories (folders) and files, moved around directory structures and generally got things done was through keying in the commands from the shell prompt.

In 1989  I began working for the Intergraph Corporation where I taught a 3-D MicroStation-based engineering product (Project Engineer Pipe). In the early days of the program you opened the program by having to type in the program name from a shell prompt. The system was Unix based and moving from directory to another required the use of dot slash notation. In general MS-DOS, Unix, Linux, Amiga-DOS, OSX and any other command line interface to the hardware operating system uses a dot slash notation to move around the file and folder structure (or backslashes in the case of early MS-DOS). Graphic User Interfaces (GUI), use the dot slash notation behind the scenes to help you navigate the computer.

HTML

HTML is a collection of marked up text in a plain text file with a .htm or .html extension. HTML files reside on a computer designated as a web server. To specify to the browser where a particular file is located, you have to use the dot slash notation.

In a nutshell, it works like this…

For example, let’s say we have the following code in a navigation bar…

<a href=”…/index.htm”>home</a>

In this statement the anchor tag is creating a link. The hypertexted word is “home”. The href attribute indicates which file will be opened when the home link is clicked. Because the filepath is …/index.htm, the file that is being opened is the index.htm file that is located two directories up from the current file, i.e.  the html file containing the code where the link is.

<a href=”index.htm”>home</a> index.htm file resides in current folder
<a href=”./index.htm”>home</a> index.htm file resides in current folder
<a href=”../index.htm”>home</a> index.htm file resides in parent  folder
<a href=”…/index.htm”>home</a> index.htm file resides two folders up.

As reported in Information Week, Google is making it easier for organizations to tap into the Youtube API (Application Program Interface) to provide YouTube functionality on their web sites. For example, the Huffington Post can solicit user generated video (citizen journalism) and use that content in their stories. Since most everyone is familiar with the YouTube name and interface, then enables the Huffington Post to piggyback on that familiarity and not have to reinvent the wheel. Nothing wrong with that.