HTML stands for HyperText Markup Language, so what is Hypertext? Hypertext is a text that contains links(hyperlinks) and can jump to other texts.
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.
http://itclass.sfc.keio.ac.jp/guide/index.html 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.
itclass. sfc. keio. ac. jp/ guide/ index. html
itclass. sfc. keio. ac. jp/
http://too, but this happens because you are relocated from a different page, and the actuall URL is
itclass. sfc. keio. ac. jp/ guide/
itclass. sfc. keio. ac. jp/ guide/ index. html
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.
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.
- Make a file “link.html” in the same directory as introduction.html(Exercise 02-4).
XHTML12345678910111213<!DOCTYPE html><html><head><meta charset="utf-8"><title>Practicing Links</title></head><body><!-- Link your self introduction page here! --></body></html>
- Inside the body element, make a link to your self introduction page using a relative path.
- Open link.html via browser, click on the link, and confirm that you can jump to your self introduction page.
- Make a new directory “dirA” under the directory we have been working with.
- Move link.html under dirA.
Edit link.html to correctly jump.
- Make a new directory “dirB” in the same directory as dirA and your self introduction page.
- Move your self introduction page under dirB.
- Edit link.html to correctly jump.
- 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.
- Let’s move the treasure hunting game to your own directory. Enter the following command on Terminal.
Shell12mkdir ~/Desktop/info1cp -R /pub/sfc/ipl/ictf/exercise/islands ~/Desktop/info1
mkdiris a command to create a new directory.
~/Desktop/info1is the directory we made with the exercise on the slides. The “~” represents your home directory.
cpis a commpand which copies files or directories. For the arguments, we write Copy From and Copy To.
-Ris an option which specifies to copy every file in the directory.
- Confirm that there is “islands” inside the “info1” directory.
- Make a file “map.html” inside “islands”, and fill in the following.
XHTML12345678910111213141516171819<!DOCTYPE html><html><head><meta charset="utf-8"><title>Treasure Hunt</title></head><body><h1>Treasure Map</h1><p>Which island do you want to go?？</p><ul><li><a href="island-a/map.html">Avalon</a></li><li><a href="island-b/map.html">Lilliput</a></li><li><a href="island-c/map.html">Island of Dr. Moreau</a></li></ul></body></html>
- 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”).
- 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”.
- Make pages for ohter islands and ports in the same way explained above.
- Try to make a shortcut from one port to another port in another island.
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
- Make “
ex03-5.html"and fill in the following.
XHTML1234567891011121314<!DOCTYPE html><html><head><meta charset="utf-8"><title>Exercise 03-5</title></head><body><h1>Exposing to the Internet</h1><p>foo bar</p></body></html>
- Change “foo bar” to a word of your choice.
- Move this file under “public_html”.
http://web.sfc.keio.ac.jp/~(login ID)/ex03-5.htmlwith a browser.
- Access your neighbor’s page.
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
- Make a directory “info1” under “public_html”.
- Place “ex03-5.html” inside “info1”.
Did the URL of “ex03-5.html” change? Try accessing the file with a browser. Try accessing your neighbor’s as well.
You must always keep in mind of copyrights when exposing a webpage.
We are sorry that this exercise is only available in Japanese.
If you uderstand Japanese, “情報倫理デジタルビデオ小品集３” can be played on the iMac(Desktop→
index.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.)
- 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?