No.3 How the Web Works

File System

Before learning  how to write the “path” of a URL (an example of a url is , we need to  learn how a computer manages files.  A file system on a computer controls how to store and retrieve data from a disk.

Exercise 03-0(☆)

“Treasure hunting game”, refer to page 32 of the slides below

(Download PPT)

Making the file Accessible from the Internet

The pages we have made in class were only visible by yourself.  Depending on the privilege, some people might be able to access to the file but even that is restricted to people logged in on CNS.

Let’s try making the file accessible through the internet from all over the world. We will learn about its mechanism in Fundamentals of Information Technology 2.

On SFC-CNS, we can make a file accessible by placing it in a particular directory.

  • The absolute path of the directory is /home/(login ID)/public_html.
  • On the iMac, it can be found under Desktop→CNS_HOMEDIR→public_html.

When accessing the file from a browser, the address is ID)/(filename)

Exercise 03-1(☆☆)
  1. Make ex03-1.html and fill in the following.

  2. Change “foo bar” to a word that you like.
  3. Move this file under public_html.
  4. Access ID)/ex03-1.html via a browser.
  5. Access your neighbour’s page.

The access authorisation of a file must be set when making a file.  Files made by an editor on CNS will be set so that it can be accessed by anyone.  But in some cases, such as files that have been transferred or compressed, the access authorisation may be changed to another set so that only you can access it.  We will learn about the details of access authorisation on the 10th lesson.

When making a directory under public_html, the URL path will be the same as the relative path from public_html. For instance, if you were to make a directory hobby under public_html, and place a file music.html under hobby, the URL should be ID)/hobby/music.html


Exercise 03-2(☆☆)
  1. Make a directory info1 under public_html.
  2. Place ex03-1.html inside info1.
  3. Did the URL of ex03-1.html change?  Try accessing the file with a browser.  Try accessing your neighbour’s as well.

When publishing a webpage, you (of course) must obey copyrights and other laws, but you must also be careful about the by laws of SFC-CNS, which prohibits you from actions that may hurt the honour of Keio University.



HTML stands for HyperText Markup Language, but, what is Hypertext?  Hypertext is a text that contains links(hyperlinks) and can jump to other linked texts.

Exercise 03-3(☆☆☆)
  1. See how to write hyperlinks from the Reference.
  2. Search and link the homepage of your elementary, junior high, and high school to the self introduction page you made on Exercise 02-4.
    • If the homepage does not exist, add Keio University to the list and link SFC’s homepage.

Are there any problems to link pages without authorisation?  According to the Copyright Law, it is interpreted that there are no problems, but if there are any specifications you should morally respect them.

Specifying an URL

URL stands for Uniform Resource Locator and it is like an address of a webpage.  For example, the URL of SFC’s homepage is

A normal URL looks like the following.


  • The “scheme”(protocol) specifies how a browser should fetch the source.  Normal webpages use “http:“, but in the case of fetching an encrypted page(like net banking) we use “https:“.  When opening a file, we use “file:“, which means that the browser will fetch the file without connecting to the internet.
  • The host is the name of each computer, and specifies in which computer should receive the source from.  If the scheme is “file:”, then the host is always local so there is no need to write the host.
  • The path specifies which file in the computer is supposed to be fetched.

We will learn about in details about scheme in Fundamentals of Information Technology 2.

Absolute URL and Relative URL

Because an URL is like an address, we can specify the one webpage from pages all over the world, but inevitably the address itself gets longer and longer.  When specifying a house in the neighbourhood, we can say, “two houses next door from my house”, instead of “… Shonandai, Fujisawa-shi, Kanagawa”.  The same goes for URL, and there are ways to access a webpage without typing in the full address.

Exercise 03-4(☆☆)
  1. Access
  2. Display the source of the page by using Chrome’s  Source Viewer, and see how “Students who entered 2014 or after” is linked.
  3. Click on “Students who entered 2014 or after” and examine the URL. is an “absolute url” which can be accessed from anywhere, and new.html is a “relative url” which can only be accessed when linked from

Positive Points about an Absolute URL
It can specify any webpage in the world.
The same URL can be used to be linked from any other pages.
Positive Points about a Relative URL
It is shorter than an absolute URL.
As long as the relationship between each file doesn’t change, even if the website itself is relocated, there is no need to relink each file.

Note that the format of the relative URL is consistent with the directory structure, which you have studied in  “File System” part above.

You can access from or too, but this happens because you are relocated from a different page, and the actual URL is 

 Relationship of File system and URL

  • When the protocol is file:,  the absolute URL is file:// followed by the absolute path. For example, the absolute URL of /xxx/yyy.html is file:///xxx/yyy.html.  Because there is no host name, remember to write three slashes after file:.
  • When the protocol is http:, the absolute URL of a file depends on the setting of the web server.  On a general web server, relative paths under a certain directory are used. The case of SFC-SFS will be explained later.
  • With a relative URL, there is no need to type the protocol nor the host name.  The relative path of the file system itself is the relative URL.
Exercise 03-5(☆☆☆)
  1. Make a file link.html in the same directory as introduction.html(Exercise 02-4).
  2. Inside the body element, make a link to your self introduction page using a relative path.
  3. Open link.html via browser, click on the link, and confirm that you can jump to your self introduction page.
  4. Make a new directory dirA under the directory we have been working with.
  5. Move link.html under dirA.
  6. Edit link.html so that it to correctly jumps.
  7. Make a new directory dirB in the same directory as dirA and your self introduction page.
  8. Move your self introduction page under dirB.
  9. Edit link.html so that it correctly jumps.
Exercise 03-6(☆☆☆☆)
  1. Let’s make a web version of the “treasure hunting game” introduced on the slides (‘File System” section above).  The plan is to make a file map.html under each directory and connect them with hyperlinks.
  2. Let’s move the treasure hunting game to your own directory.  Enter the following command on Terminal.

    • mkdir is a command to create a new directory.
    • The /home//public_html/ is the special directory for publishing on the internet.  .
    • cp is a command which copies files or directories.  For the arguments, we write Copy From and Copy To.
    • -R is an option which specifies to copy every file in the directory.
  3. Confirm that there is islands inside the info1 directory.
  4.  Make a file map.html (with  content below) inside the directory islands 

  5. Make another map.html file inside island-a (which is inside “islands”) , and fill in the following.
    • A header “Map of Avalon”.
    • A link that jumps back to starting point(map.html inside the directory islands).
  6. Make another file map.html inside islandsisland-aport-a, and fill in the following
    • A link to file empty, which shows the text that depicts a  “Treasure Box”.
    • A link returning to “Map of Avalon”.
  7. Make pages for other islands and ports in the same way explained above. Try to make a shortcut from one port to another port in another island.

Files empty and garbage are not HTML file, and they run in different ways depending on the browser.  Firefox will show the containing text, and Safari will open the file with Finder.


You must always keep in mind of copyrights when exposing a webpage.

(Download PPT)

Exercise 03-7(☆)(Optional)

We are sorry that the video is only available in Japanese (licence related).

If you understand Japanese, “情報倫理デジタルビデオ小品集3” can be played on the iMac(Desktop→→ Watch the following parts and summarise the content.

If you understand Japanese, “情報倫理デジタルビデオ小品集3” can be played on the iMac(Desktop→Share_zmacindex.html).  Watch the following parts and summarise the content.

  • 12. アップしたビデオが著作権侵害!
  • 27. Web貼りつけレポートはNG
  • 29. ブログでメール紹介したらダメ?
  • 30. Webカメラは肖像権を侵害?

(Due to license issues, the video can only be played on the iMacs in the Computer Room.)

Compulsory: (Watch in your own time) An English Video with similar contents is available here Information Ethics in the Digital Age

Exercise 03-8(☆☆)

There are webpages that offer free pictures, BGM’s, illustration and etc. for creating a webpage.  Search those sites and read the Terms of Use.

There are free sites that contain virus or spyware. It is important to keep in mind not to download from suspicious websites, and always operate the security software with the latest version.

Points to Check
  • What is the difference between a HyperText and a normal text?
  • What is the difference between an absolute URL and relative URL?
  • Why is the structure of files and directories called “Tree Structure”?
  • What does “..” represent in a relative path?
  • Which directory on SFC-CNS is published on the internet?
  • What kind of rules are there in Copyright Law?
  • Are there any exceptions in Copyright Law?