No.3 How the Web Works



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

Exercise 03-1(☆☆☆)
  1. See how to write links from the Reference.
  2. Search and link the homepage of your elementry, junior high, and highschool 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 authorization?  According to the Copyright Law, it is interpreted that there are no problems, but if there are any specifications you should respect them.

Specifying an URL

An URL 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 a encrypted page(like netbanking) we use “https:”.  When opening a file we use “file:”, and the browser will fetch the file without connecting to the internet.
  • The host is the name of each computer, and specifies which computer to 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 the details of 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 an house in the neighborhood, we can say, “two houses next door from here”, 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-2(☆☆)
  1. Access
  2. Display the source of the page by using inspector, 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

Good Poins of an Absolute URL
Can specify any webpage in the world.
The same URL can be used to be linked from any other page.
Good Points of a Reletive URL
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.

You will understand the rules of URL better after you study the next “File System” part.

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

File System

To learn how to write the “path” of a URL, we must learn how a computer manages files.  A file system on a computer controls how to store and retreive data from inside a disk.

(Download PPT)

The relationship between an URL and a file system is explained below.

  • 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 abosolute 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.
  • 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-3(☆☆☆)
  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 to correctly jump.
  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 to correctly jump.
Exercise 03-4(☆☆☆☆)
  1. Let’s make a web version of the “treasure hunting game” introduced on the slides.  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 ~/Desktop/info1 is the directory we made with the exercise on the slides.  The “~” represents your home directory.
    • cp is a commpand 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” inside “islands”, and fill in the following.
  5. Make another “map.html” file inside “island-a” (which is inside “islands”) , and fill in the following.
    • A header “Map of Avalon”.
    • Links to three harbors, “port-a”, “port-b” and “port-c”.
    • A link that jumps back to starting point(“map.html” inside the directory “islands”).
  6. Make yet another file “map.html” inside islands→island-a→port-a, and fill in the following
    • A link to file “empty”, which shows the text “Treasure Box”.
    • A link returning to “Map of Avalon”.
  7. Make pages for ohter islands and ports in the same way explained above.
  8. Try to make a shortcut from one port to another port in another island.

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

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 may be able to access 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 CNS, we can make a file accessible by placing a file 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)

Excercise 03-5(☆☆)
  1. Make “ex03-5.html" and fill in the following.
  2. Change “foo bar” to a word of your choice.
  3. Move this file under “public_html”.
  4. Access ID)/ex03-5.html with a browser.
  5. Access your neighbor’s page.

The access authorization 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 transfered or compressed, the access authorization may be set so that only you can access it.  We will learn about the details of access authorization 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” under hobby, the URL you should access is ID)/hobby/music.html


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

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


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

(Download PPT)

Exercise 03-7(☆)

We are sorry that this exercise is only available in Japanese.

If you uderstand Japanese, “情報倫理デジタルビデオ小品集3” can be played on the iMac(Desktop→Share_zmacindex.html).  Watch the following parts and summarize 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.)

Excersise 03-8(☆☆)

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

Points to Check
  • What is the difference between a HyperText and a normal text?
  • What is the difference between a 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 exposed to the internet?
  • What kind of rules are there to the Copyright Law?
  • Are there any exceptions in the Copyright Law?