Basic concepts: Files and Folders, CSS, and Web Servers

You may be surprised that this course begins with an essay about files and folders but there is a very good reason for this particular starting point: It is impossible to be a competent web developer if you do not understand basic file and folder structure.

Ever since I started teaching this course way back in 2006, I have been surprised by how many of my students have unnecessary struggles because they DO NOT UNDERSTAND how documents are stored and organized on computers.

Back in the dark ages, say from 1980 to 1990, it was impossible to accomplish much with a computer unless you understood how things are stored.  Anyone born after approximately 1995, however, came of age in a magical digital environment where web browsers, apps, and computer interfaces made it very easy to consume and interact with internet and computer-based content with little understanding of how it is created and stored. That knowledge gap is fine as long as you are a digital CONSUMER, but now that you aspire to become a PRODUCER, it is imperative that you understand these basic concepts. PLEASE give this document and the next two lessons your most thoughtful attention. I promise that the effort you invest now will save you from a lot of confusion and even greater effort later on.

NOTE:  If you an need additional incentive, be aware that you will soon be taking a five point quiz over this content. READ this and pay attention. It’s important.

Documents and Folders

Before computers, documents were usually stored  inside of a folder inside of a file cabinet, similar to this one: 


To find a document you had to know where to look, as in which drawer and folder. Complex filing systems often placed folders inside of folders inside of folders… You get the picture.

This filing process was such a part of life prior to the 1980’s that classified ads had a special section for ‘file clerks,’ the lowly employees whose job it was to store and retrieve files.

The file clerk job description disappeared once offices had computers, but the metaphor of files and folders still lives on.  Today, the term file usually applies to electronic documents, which are stored in electronic folders. The screen capture below shows an example of a photo named ana.jpg which is inside of a folder named 2009, which is inside of another folder named pictures.

If you asked one of those out of work file clerks from the 80s (these guys knew nothing about search tools 🙂 to retrieve Ana’s picture and told him to look for a picture named ana.jpg inside of the 2009 folder inside of the pictures folder, he probably would find it. This leads us to concept 1, web pages are digital file clerks, which is explained below.


Concept 1: Web pages are digital file clerks.

Although they may look like large impressive documents, web pages are nothing more than text files that tie other files together. The result is the webpage that appears in your web browser.

In addition to the text that you read when you view a web page, the hidden text that actually makes the web page function is known as source code. Source code tells your web browser (Internet Explorer, Safari, Firefox or whatever) how to display the page, where to find pictures, video, and other media files that may make up the webpage. The pictures and media files are totally separate from the web page itself and are stored in folders. This concept can feel a little strange at first but for you to become a competent web developer you must understand and come to terms with it.

For example, a web page that displays the ana.jpg picture that we just looked at, would need to take the file name, ana.jpg, and two folders, pictures and 2009, into account, with source code  like this:

<img src="pictures/2009/ana.jpg" />

If, for some reason, you rename the ana.jpg file or move it into a different folder, your browser file clerk will continue to look for ana.jpg in the pictures/2009 folder, and it will not appear on the web page. This file clerk NEVER takes the initiative to look anywhere other than where you tell him to, so make sure that your instructions are correct! 

The same concept of files and folders works for links as well. Most webpages have links that point to other webpages. These links have to take the file name and folder structure into account, in order to function. To illustrate this concept, imagine that the 09 folder has an html file (otherwise known as a webpage) named ana.html that is stored right beside ana.jpg.  In order for another webpage to have a clickable link to ana.html, the file name and folder structure must be taken into account. 

A webpage in the pictures folder, for example, would need a link like this one

<a href="09/ana.html" />Ana </a>

that includes the 09 folder, to connect to ana.html.

A webpage in 09, the SAME folder as ana.html, would simply link to ana.html as in

<a href="ana.html" />Ana </a> 

In this case there is no need to link to the folder.

This screen capture illustrates yet another example:


In this case, a webpage named index.html is linked to ana.html. In this case, index.html is one level above pictures so the link would have to include both the pictures and the 2009 folder as in

 <a href="pictures/09/ana.html" />Ana </a>. 

By the way, a link from ana.html to index.html would look like this:

<a href="../../index.html" />index </a>

In this case, ana.html would be linking ‘upward’ two levels.

The ../ expresses the navigation for moving up a level.  If index.html was in the pictures folder, the link would be

 <a href="../index.html 

with only one ../ .

While we are on this topic, let’s imagine one more scenario.  In this case, ana.html is linked to davis.html. As shown at here, ana.html is inside of 2009, davis.html is inside of 2008:


Both folders, 2008 and 2009, are inside of pictures.  In this case the link from ana.html to davis.html would be

<a href="../2008/davis.html" />Davis</a>

As you can see, the link moving up one level with ../ and then downward into the 2008 folder in order to reach davis.html.

Image paths work the same way. For davis.html to display ana.jpg the code would have to traverse a path upward one level and then downward into the 2009 folder as in:

 <img src="../2009/ana.jpg" />

Enough! Let’s move on and revisit this stuff later on your quiz!

Concept 2: CSS (Cascading Style Sheets) control the structure and look of a modern website or web page. 

CSS was invented several years after people began to build websites but has become the de-facto standard for controlling things such as the color, width, and link styles of your site.

For example, every webpage has a body tag that serves as a container for everything else that appears on the bag. A CSS rule that reads:

body { background-color: #000000; } 

would cause the entire webpage to have a black background.

One of the great things about CSS is that it makes it possible to change literally thousands of pages at once (if you happen to have that big of a website 🙂 just by altering a few letters in a CSS file. 

Concept 3: The web server is not your computer.

Conventional web development takes place on a desktop or notebook computer. Once a webpage or website is complete, it is transferred (uploaded) to another computer somewhere else that ‘serves’ the computer to the world wide web, so that any browser connected to the Internet can view it. 

As a student who is taking this course in the 21st century, you live in an era when most computers are always connected to the Internet. Being constantly connected can blur the distinction between a local and a remote computer, and students often do not understand the difference between html files, images, etc. stored on their computer and duplicates of the same files that are stored on a web server. 

Almost everything that you produce in this course should ultimately make its way to the Internet where it will be accessible through a website that you will create. It is important to understand that the webserver that shares your website with the world and the computer that you use to develop your website are not the same machine. In this class you will develop web pages and ultimately websites on the computer in front of you. Once you have developed a web page or site that you are ready to share with the world, you will move the content to another computer known as a web server that may literally be anywhere in the world. To read my short essay on Web Servers, click here

Here is how it works.

First, you create files and folders on the local computer that is inches away from you and link them together into a local “website” that ONLY exists on  YOUR computer. 

Once everything works well on your local computer you use a type of program known as an FTP client to move the files and folders to another computer that functions as a web server, that will make all of your work available to the wide wide world. 


Having everything on the web makes it convenient for me to assess your work and you end up with a portfolio that you can use to show your work to other people, including prospective employers.

Next: Lesson 1: Reconstructing a Webpage