WWW の仕組みと HTML ファイル
１．WWW（World Wide Web）の仕組みと基礎用語
通常 Web ページを閲覧する際には、Web ブラウザと呼ばれるアプリケーションを使用し、閲覧したい HTML1ファイルの送信を、そのファイルを持つWeb サーバ（WWW サーバ）に依頼する（図１①）。Web サー
バは、依頼元に該当するファイルを送信し（図１②）、Web ブラウザは受信したファイルの HTML タグを解 析して表示する（図１③）。ブラウザとサーバのやりとりは、HTTP2というプロトコル（通信の決まりごと）
を用いて行われる場合が多い。どういうプロトコルを用いて、どこのWeb サーバに、どのファイルの送信を 依頼するかは、URL（Uniform Resource Locator）と呼ばれる書式を用いて指定する。これは、ブラウザ上の「ア ドレス」とか「場所」という欄に記述する。例えば、麗澤大学においてtaro というログイン名を有する学生 が作成したトップページ（通常、index.html というファイル名を使用する3）のURL は、以下のように表記 される。 ファイル名 Web サーバ上のディレクトリ名 Web サーバ名（ドメイン名） プロトコル
http://www.cs.reitaku-u.ac.jp/
~taro/index.html
プロトコルとWeb サーバ名（ドメイン名）の間は「://」（コロン,スラッシュ,スラッシュ）で区切る。Web サーバ名とディレクトリ名、ディレクトリとファイル名の間は「/」で区切る。ドメイン名とは、インターネ ッ ト 上 で の マ シ ン や サ ー ビ ス 提 供 者 を 一 意 に 識 別 す る も の で 、 学 生 が 使 用 す る マ シ ン に は 「www.cs.reitaku-u.ac.jp」という名前が付与されている。なお、「~taro」という表記は、本学の Web サーバの設定によって、「taro さんのホームディレクトリの下にある、www というディレクトリ」を指している。 ~taro の「~」は「チルダ」と読む。 The Internet 世界のどこかの端末 Web サーバ ブラウザ HTML ファイル ①HTML ファイル要求 ②HTML ファイル転送 ③HTML タグを解析して表示 仮想端末 学内の PC 学内 LAN 図１ WWW の動作の仕組み ２．Web ページの外部公開制限について Web ページを作成した場合、通常はインターネットからそのページにアクセス できるようになる。しかし、本学では、授業で作成する Web ページは外部（学外） 非公開となっている。外部に公開するWeb ページを作成したい場合は、個人的に外 部の商用プロバイダを利用することが原則となる。
1 HTML: Hyper Text Markup Language 2 HTTP: Hyper Text Transfer Protocol
3 index.html というファイル名は省略可能である。一般的に、URL の最後をディレクトリ名で終了した場合には、
３．HTML とは
HTML とは、Hyper Text Markup Language のことである。ハイパーテキスト（Hyper Text）とは、文 書間にリンクを張り、リンク先にジャンプすることができる文書を示す。また、マークアップ言語（Markup Language）とは、文書を修飾（色をつける・罫線を引くなど）したり、構造を表現（タイトルや段落の指定） したりするための言語を示す。Web ページを構成する HTML は、これら 2 つの機能を併せ持つものである。 HTML ファイルに用いる文字には、ブラウザ上に表示する文字と、それらの表示方法等を指定する文字（タ グ，< >で囲まれた命令文字列）がある。このタグを使用して、画像等の取込みや文書間のリンクを指定する。 タグには多くの種類があり、HTML のバージョンが進んで新しいタグが追加されることもあるので、色々な タグを使用して凝ったWeb ページを作成したい場合は、自ら適切な参考書を探して調べなければならない。 基本的なタグは、授業教材「はじめての HTML 改定版」にまとめられている。 http://www.cs.reitaku-u.ac.jp/infosci/netwk/html-v12.html 【コラム】 近年では blog や SNS、Twitter など、簡単に情報発信できる場が整備されつつあることから、個人で Web サイトをゼロから自作する機会は徐々になくなりつつある。しかし、Web ページがどのようにしてブ ラウザの画面上に表示されるのかという詳しい知識を身に付けておけば、Web インタフェースに存在するバ グをずっと簡単に見つけられるようになるだけでなく、blog 上で HTML ベースでの編集も可能になる（例 えば、アメブロではタグ編集エディタがブラウザ上に装備されている）。 いずれにしても、Web ページがどのような構造を持ち、どのように表示されているのかを覚えておくこと は決して損ではない。 ４．Web ページ作成の流れ まずは、自分の X ドライブ（ローカル）に HTML ファイルを作成することから始めてみよう。HTML ファ イルは（Web ページ）はテキストファイルであり、メモ帳を含む一般的なテキストエディタで作成、編集が 可能である。それではプログラムにある EmEditor を起動させて、次のような内容を入力する。 <html> <head> <title>SE をめざして｜千葉太郎</title> </head> <body> <p>私の自己紹介<br> SE をめざして</p> <hr> </body> </html> ※情報科学 A で作成する Web サイトは、プレゼンテーションの回で作成したコンテンツと同じものにする。例えば、地元の紹介、 趣味、休日の過ごし方の 3 つに関する自己紹介のプレゼンテーションを作成した学生であれば、その内容を Web ページの演習で も使いまわすことを推奨する（ただし、必ずそうしなければならないというわけではない）。
タグ 説 明 <html>～</html> Web ページ全体を現すタグです。
<head>～</head> Web ページ上では見えない効果などを記入する場所です。（例：CSS、javascript） <title>～</title> 表示しているウィンドウの一番左上部分に表示される Web ページタイトルです。 <body>～</body> Web ページで実際表示されるメインの場所です。ここに文字を入力したり、画像の配置 やデザインをしていきます。 <p>～</p> 段落をあらわすタグです。 <br> 改行を行うタグです。 <hr> ラインを表示させるタグです。 EmEditor に入力したら、X ドライブに半角で「www」という名前でフォルダを作成し保存する。その際、 ファイル名は「index.html」とし、ファイルの種類に「すべてのファイル(*.*)」と指定する。この指定を怠る と、ブラウザで閲覧できないので、気をつけること！ ※このとき、EmEditor は開いたままにしておくこと。 保存したフォルダを開き、作った Web ページを閲覧する。 ※title タグで囲んだ文字、body タグの中に入力した文字がどのように表示されているかを確認する。
プレゼンテーションの内容に基づいて、もう少しコンテンツを追加してみよう。<hr>の下に次の内容を追 加する。入力が終わったら上書き保存をして、ブラウザに戻り F5 キーを押して内容を更新する。 <p>麗澤大学経済学部の千葉太郎です。SE を目指しています。</p> <p>ん？ SE ってシステムエンジニアのことかって。</p> <p>そう･･･だよ！</p> <p>ん？ 文系でなれるのかって？</p> <p>バカだな，文系だからなるんじゃないか</p> <p>ん？･･･ナンデかって？</p> <p>金融，流通，マーケティングなど，情報システムの役割がわかってるからサ</p> ※左側に EmEditor、右側にブラウザを表示しておき、ファイルを書き換えたらブラウザで更新し、内容を確認できるようにしておく と良い。 次に異なるページ同士にリンクを張って、相互に行き来するために他のページを作成する。EmEditor の新 規ページを作成して、次の内容を入力する。なお、index.html ファイルの内容をコピー＆ペーストしてから、 作成すると良い。 <html> <head> <title>SE をめざして｜千葉太郎 ＞ 地元紹介</title> </head> <body> <p>私の地元紹介<br> 出身地:金沢で食べる</p> <hr> <p>金沢ってどこ？</p> <p>食べるなら･･･ 近江町市場「海鮮どん屋」！</p> </body>
作成し終えたら、先ほどと同様に「jimoto.html」と名前をつけて www フォルダに保存する。
次に以下の内容のリンクを設定する。入力を終えたら、上書き保存をして、ブラウザで確かめてみること！ ① 「はじめての HTML」を参考に、自分の「index.html」と「jimoto.html」を相互にリンクするタグを各々
のファイルに記述しなさい（はじめての HTML のページの一番下にリンクの説明がある）。 （例えば、jimoto.html へのリンクは <a href="./jimoto.html">地元紹介</a> となる）
② 同様に、「index.html」中に、麗澤大学のトップページへのリンク、情報システムセンタートップページ へのリンクを作成しなさい。
（例えば、麗澤大学へのリンクは <a href="http://www.reitaku-u.ac.jp/">麗澤大学</a> となる） ③ 「index.html」中に、友人の Web ページ（index.html）へのリンクを作成しなさい。友人と相談し、相互
にリンクを記述するとよい（現段階だとまだ友人のページを見ることはできない）。
出来上がりは前ページのようになる。点線以下のリンクは他のサイトへのリンクであり、リスト表示のタ グを利用している。リスト表示のタグ（ul タグ）については、「はじめての HTML」を参考にすること。 このままだと味気ないので、次に色を変えたりするなどデザインを変更してみよう。Web ページのデザイ ンは今ではほとんどスタイルシートと呼ばれるもので管理されている。スタイルシートでは、HTML タグで は表現できない効果や、複数の効果を簡単にまとめるなどの細かい設定ができる。 ここでは次のスタイルを作成し、作成したスタイルは各自好きなところに設定する。 → 文字の大きさと色 、 背景の色 、 段落内の文字の配置と色 、 リンクの色 具体的には、index.html ファイルのヘッダ内に次のように入力する。 <head> <title>SE をめざして｜千葉太郎</title> <style type="text/css">
.titlemoji {font-size:18px; color:#0000ff} .kyoutyoumoji {font-size:14px;}
a:link {color:#0000ff;} a:visited {color:#0000ff;}
a:hover {color:#ffffff; background-color:#0000ff;} body {font-size:12px; background-color:#eeeeee;} </style>
</head>
■class でスタイルシートを呼び出す場合
haed 内のスタイルシートは「.abc」という風に書く（○○は任意の英数字）。名前の後の { } 内にスタイル シートを書いていき、複数指定する場合は ; で区切る。（例） .abc { font-size:14px; color:#ffaaaa; }
そして、実際にスタイルシートに反映するときは、タグなどに class="指定した名前"とする。 （例） <p class="abc">ほげほげほげ</p> ただし、body と a:XXX の 2 つについては既にタグとして定義されているので、上記のような設定は必要な い。記述した段階で、ボディ全体とリンクについてはデザインが自動的に変更される。 なお、リンクのスタイルについての意味は次のようになっている。 「a:link」 まだ訪れていないリンク。 「a:visited」 一度訪れたことがあるリンク。 「a:hover」 カーソルがリンクの上にあるとき。 試しに、index.html ファイルの本文に対して、次のようにスタイルを設定してみよう。 <p class="titlemoji">私の自己紹介<br> SE をめざして</p> ： ： <p>ん？ 文系でなれるのかって？</p> <p class="kyoutyoumoji">バカだな，文系だからなるんじゃないか</p> 色の前には必ず＃が入る。 色は 3 原色をそれぞれ 16 進数で指定している。 • font-size は文字の大きさ • color は文字の色 • background-color は背景の色 • px は大きさの単位で、ここでは文字サイズ を px で指定している。 • 半角のセミコロン「；」はスタイル内の区 切りを意味している。
※その他のスタイルについては「スタイルシート」と検索すると解説のページが出てくるので、興味のある学生は自分で調べて 色々なスタイルを設定すると良い。 画像の貼り込み 現在文字だけの Web ページとなっているので、画像を表示させたい。以下の手順で、jimoto.html の中に画 像を表示するようにしなさい。その際、画像ファイルの種類（拡張子）については最大限注意する必要がある。 ファイル名が同じであっても画像の種類（拡張子）が異なれば Web ページ内に表示することはできない。な お、Word のようにファイルの中に画像を貼り付けるというものではなく、他に存在する画像ファイルを Web ページ内に表示させていることに注意すること。 ① 「/kadai/Info-Sci/情報科学 A/」以下にある「kanazawa.jpg」と 「kaisendon.jpg」を、各自の www フォルダにコピーする。 ② 「はじめての HTML」を参考に、画像ファイルを表示できるよ うにする。必要なタグは「jimoto.html」中に記述して右図のよう に表示されれば OK！。 <p>金沢ってどこ？</p> <p><img src="./kanazawa.jpg"></p> <p>食べるなら･･･近江町市場「海鮮どん屋」！</p> <p><img src="./kaisendon.jpg"></p> スタイルを設定した段落の文字が変わ っていることを確認すること。 • body 全体 • リンク箇所 • タイトル文字列 • 「バカだな～～」の文章 ※ パワーポイントのファイルから画像だけを抜き出した保存する方法 ① スライド内の画像を右クリックして、図として保存をクリックする。 ② ファイル形式を JPEG 形式として、X ドライブの www フォルダに半角
Web ページの公開 これまでは X ドライブ内に HTML ファイルを作成しただけであり、ユーザー自身以外見ることはできな い（この段階を経ると友人のページを見ることができる）。そこで、FFFTP というソフトを利用して、作成し た Web ページを学内限定で公開する4。FFFTP は、GUI ベースのアプリケーションである。FFFTP はフリーソ フトで、インターネット上などで公開されている。 注意！：FFFTP からサーバ側のファイル操作ができるので、間違ってファイルを削除しないようにすること。 UNIX の環境ファイル（.login, .cshrc 等）を削除するとログインできなくなる。メール用のディレクトリ （.Maildir）を削除するとメールを失う。PC ディレクトリを削除すると X ドライブの内容を失う。失ったフ ァイルは復活できない。
※必ず、教員の指示に従って操作を行うこと。先走って色々とやったりはしない！！
■FFFTP の利用（起動と接続、切断） ・「スタート」→「FFFTP」にて、FFFTP を起動する。 ・「接続ボタン」を押すと以下のような画面が出る。接続する Web サーバの名前が表示されているので、 「www.cs.reitaku-u.ac.jp」を選択して[接続(S)]ボタンを押す。次のウィンドウに、コンピュータにログイン するためのユーザ名とパスワードをそれぞれ入力して、Web サーバにログインする。 ・接続されると、右側に自分のホームディレクトリ上のファイル・ディレクトリが表示される（リモート側）。 左側が、自分のパソコン（ローカル側）のファイル・ディレクトリである。 ・切断するには、「切断ボタン」 を押し、画面の指示に従う。 ■FFFTP の利用（ファイルの転送） 画面左側で転送したいファイルのある場所（X:¥）へ移動する。移動すると、X ドライブの中身が表示される。 「www」フォルダを右側（サーバ側）にドラッグする。 2.Web サーバに接続する。ブラウザを起動して、次の URL をアドレスバーに入れて[Enter]キーを押して移動する。自分が作成したペー ジが表示されれば OK である！ また、友人へのリンクを押すと友人のページに移動できることも確認する。
http://www.cs.reitaku-u.ac.jp/~foo/
※なお、「~」はチルダと呼び、「foo」の箇所には自分のユーザーID が入る。 →終わったら、接続を切断し、FFFTP を終了する。 Web ページの更新 Web サーバにアップロードしたファイルを更新したい場合は、先ほどと同じ作業を繰り返す。サーバ側に は既に「www」ディレクトリが存在しており、『上書きしても良いか』と FFFTP に聞かれるが無視して、次 のダイアログボックスにおいて「以降全て(A)」を選択する。 注意！：www フォルダを Web サーバにドラッグする作業以外は決して行わないこと！！Web ページ課題の内容 前提条件： （1） ホームページ（トップページ）が存在していること(index.html)。 →http://www.cs.reitaku-u.ac.jp/~自分のユーザー名/ でアクセスできること。 トップページ作成における条件と注意点： （1） トップページには、最低限、次のものが記載されていること。 （2） 誰のホームページであるのか、ということ。 （3） 最終更新日。 （4） 自分が作成した他のページに対するリンク。 （5） 麗澤大学のホームページ（http://www.reitaku-u.ac.jp/）に対するリンク。 その他のページ作成における条件と注意点： （1） トップページ以外に、最低 2 ページ、オリジナルなページが存在すること。 （2） ページ作成者について紹介したページが、１ページ以上存在していること。 ただし、顔写真、住所・電話番号など、プライバシーに関わる情報を開示しないように注意。 （3） 自分が作成した各ページには、必ず、自分のトップページに対するリンク（「ホームページに 戻る」など）が存在していること。 （4） 必ず、写真や図、イラストなどの画像が入ってこと。 ただし、著作権や肖像権に注意する。漫画・アニメのキャラクター、アイドルや芸能人の写 真などは、出典を明記しても使用できないと考えたほうがよい。 画像サイズにも注意をはらう。 評価のポイント： （1） 適切に自己紹介されているか。 （2） ページに記載されている情報が有用で充実しているか。 （3） 著作権や肖像権などに配慮し、ネチケットが守られているか（出典の明記等）。 （4） プライバシーの開示など危険なことをしていないか。 （5） 画像ファイルに適切な修正が成されているか（サイズやファイル形式など）。 （6） その他（デザインなど。ただし主ではない）。
