情報処理 第6回講義資料
今回の目的
- HTML文法についてもう少し詳しく学ぶ。
- 情報発信のための自分のホームページを作成する。
- 演習：ドキュメントルートの概念を学ぶ、ウェブサイトの一般的な構築方法を学ぶ
- レポート課題2
講義内容
- はじめに
- ファイルシステム
- URLとドキュメントルート
- 絶対URLと相対URL
- HTML文法（Revisited）
はじめに
- 前回の講義の復習（HTMLの基礎、漢字コード、テキストエディタ）
- 次回（第７回）は休講です。
ファイルシステム (File System)
ここでは、ごく簡単にファイルシステムの概念を説明します。詳しくは第９回の講義で扱います。
- ファイルシステムとは、ファイル（オペレーティングシステムが扱うひとまとまりのデータ）を、フォルダ（ディレクトリ）と呼ばれる容れ物で、階層構造（木構造）を作ることにより管理するシステムのことです。
- このような階層構造は、会社の組織図や書物の管理などでも使われています。
URLとドキュメントルート(Document Root)
- URL (Uniform Resource Locator) （第2回の復習）
- URL: ウェブページなどのリソースのアクセス方法を表す文字列で、ウェブブラウザーでそのウェブページをアドレス（指定）するときに用います。
- URLのフォーマットは3つの部分（scheme（プロトコル）、authority（ウェブサーバの名前）、path（ウェブサーバー内のウェブページの位置）
）で構成されています。
- URLは実はURI (Uniform Resource
Identifier)の一部で、URIのうちリソースをアドレスする方法を記述する目的のものを特にURLと呼んでいます。
(例） http://www.ietf.org/rfc/rfc3986.txt
(scheme: http, authority: www.ietf.org, path:
/rfc/rfc3986.txt)
- URLのauthority で指定される部分は、ウェブサーバですが、場所を表すと言う意味でウェブサイトとも呼ばれます。
- ドキュメントルート (DocumentRoot）
- URLのauthority
の部分は、ウェブサーバのドメイン名（＋ホスト名）に対応しています。例えば、上記のURLの例で言うと、www.ietf.org
はウェブサーバを表しています。
- URLのpath の部分は、ウェブサーバ内のドキュメントルートからの相対的な位置を示しています。（通常はこの部分はサーバ上のファイルシステムに対応していて，
URL が指している情報は、pathの部分で表されたディレクトリ（あるいはフォルダ）の階層構造中にファイルとして保存されています
(注意：そうでない場合もあります)。ファイルシステムについては次回の講義で扱います。
- ドキュメントルートは、ウェブサーバで公開されるファイルシステムの階層のうち、一番階層が上の場所です。
（例） 上記の例のURLの場合、ドキュメントルートからの相対位置/rfc/rfc3986.txt にこのURLが指している情報があるということになります。
-
ドキュメントルートは、ブラウザでページを閲覧しているユーザからは見えません。ただし、ドキュメントルート以下は、パーミッション（権限）が設定されていない限り、ユーザーが自由にアクセスできます。
- URLにはホームディレクトリを表す ~(ユーザ名）という表現が使われる場合があります。
(例）
例えば、教育用計算機システムの場合、以下のようなURLを使います。
http://user.ecc.u-tokyo.ac.jp/~g999999/index.html (scheme:
http, authority: user.ecc.u-tokyo.ac.jp, path:
/~g999999/index.html)
ドキュメントルート以下、/~g999999/index.html
で指定されるファイルが、このURLが指し示す情報ですが、この/~g999999は、ftp
でログインしたときのディレクトリ（フォルダ）の .public_html
というディレクトリ（フォルダ）を指しています。つまり、.public_html 以下の階層構造が、ウェブサイトの階層構造として、公開されるわけです。
演習6-1
ウェブサイトを構築する一般的な方法（まるごとコピー）で階層構造を付け加えてみる
-
ウェブサイトを公開する時の一般的な方法は、まずローカルコンピュータにウェブサイトを構築し、それをリモートコンピュータにコピーするという手法です。ここでは、この方法を用いて、今現在あるウェブサイトに新たな階層構造を付け加えてみましょう。
- 目の前にあるコンピュータ（ローカルコンピュータ）のホームディレクトリに、前回の講義の演習で作成した
リモートコンピュータ(user.ecc.u-tokyo.ac.jp)にあるウェブサイトのコピーを作ります。ncftpget
を使って、ウェブサイト全体をローカルコンピュータのホームディレクトリにコピーします。例えば、自分のユーザ名がg999999の場合は、ターミナルで以下のコマンドをタイプします。
-
ローカルコンピュータのホームの .public_html ディレクトリに、サブディレクトリ old
を作り、そこにindex.htmlをコピーします。ここで用いるコマンドは、次回（第8回）の講義で詳しく学びますが、それぞれの意味は以下に示した通りです。
- ここまでで、ローカルコンピュータに作成したウェブサイトのコピーに、新たな階層構造を作ったことになります。
これを再びncftpputを用いて、リモートコンピュータにコピーします。
- Safariを起動し、http://user.ecc.u-tokyo.ac.jp/~g99999/old/index.html
というURLで、index.html の内容が閲覧できることを確認します。
絶対URLと相対URL
ウェブサイトを構築する際、ハイパーリンクを指定することが多くあります。ハイパーリンクはアンカータグ、a要素およびそのhref属性を用いてリンク先を指定することは前回の講義で学びました。
（例） <a href="http://www.google.com">
google へのハイパーリンクです。</a>
ここでは、ハイパーリンクを指定する以下の二つの方法を見てみましょう。
- 絶対URL
-
絶対URLは、これまで学んだURLのフォーマットのことで、3つの部分（scheme（プロトコル）、authority（ウェブサーバの名前）、path（ウェブサーバー内のウェブページの位置）
）で構成されます。
- 以下に述べる相対URLを区別するために絶対URLと呼びます。
- 相対URL
- 相対URL は、リンク元文書から見たときのリンク先文書の位置を指定する方法です。
- 同じディレクトリにあるファイルは、単にファイル名だけで指定できます。
- （例1） <a href="hobby.html">趣味について</a>
（リンク元文書と同じ階層にあるリンク先hobby.html）
- （例2) <a href="./hobby.html">趣味について</a> （例１と同じ）
- （例3） <a href="./old/hobby.html">以前の趣味について</a>
（リンク元文書からみて一つ下の階層old にあるリンク先hobby.html）
- 階層構造のトップ（ウェブサーバで言うとドキュメントルート）からの位置を指定することもできます。
- (例4) <a href="/~g987654/">g987654さんのページ</a>（最初の'/'
がドキュメントルートを指します。）
- 相対URLを使うことの利点
- 簡潔に書ける。
- 文書を置くサーバを変えても
リンクを変更しないでそのまま使える。
- 演習１のように、ウェブサイトをまるごとコピーした際、同じ文書をローカルコンピュータ上で見ることができる。
演習6-2
演習6-1で作った old/index.html に、トップレベルの階層（ドキュメントルート）にある index.html
からハイパーリンクを作成しましょう。（相対URLと絶対URLの両方試してみましょう)。
HTML文法（Revisited)
ここでは、より高度なタグの使い方を学びます。詳しくはTAの竹内さんが作成してくれたこちらのページを参照してください。
HTML文法を詳説したウェブサイトがたくさんありますが、本当はW3CにあるHTML4.01の仕様書を見るのが正攻法です。
レポート課題2
-
締め切り：6月7日(火曜クラス) 6月８日(水曜クラス) 23時59分59秒まで。
- 課題は講義中にこちらに公開します。
情報処理の講義のトップページへ戻る
はいぱーわーくぶっく(HWB)へのリンク
