宮本分原稿 ＷＷＷ
chapter ８
ＷＷＷによる情報交流
８．１ ホームページの書き方
(1) HTML言語の基礎
HTML言語（Hyper Text Markup Language）は、テキスト形式ファイルで記述されており、
*.THML *.html *.THM *.htmの拡張子を用いる。
(2) ブラウザ
ブラウザとは、ホームページを閲覧するためのソフトのことであり、主だった一般的なソフトしては、
Netscape Navigator(Netscape Communicator), Microsoft Internet Explorerが有名である。
(3) 簡単なホームページの作り方
ホームページ作成の流れのポイントをあげると、つぎのようになる。
１．まず文章だけで書いてみる（写真やリンクは後から加える）。
２．装飾記号を覚える（太字、斜体、文字の大きさ、文字の色など）。
３．写真、図を貼り込んでみる（すっかり楽しいページになる）。
４．複数のページ間をわたるためのリンクの張り方を覚える。
(4) ホームページ（ＨＴＭＬファイル）の全体構成
１．<html>タグで始まり、</html>タグで終わる。
HTML文書の先頭に<html>タグを書き、最後に</html>タグを書く。
２．本文の前にヘッダ部分をおく。ヘッダ部分は<head>タグで始まり、</head>タグで終わる。
３．本文を書く。本文は<body>タグで始まり、</body>タグで終わる。
以下に簡単な例を示す。
<html>
<head>
<title>Home Page Making, Example 1</title>
</head>
<body bgcolor="#ffffff">
<h2>Exanple 1</h2>
<h4>冬が寒くて大雪なら、豊作だ</h4>
<h4>地球温暖化でこの法則は成り立つだろうか</h4>
</body>
</html>
これを実行するとつぎのような表示画面になる。
これを実行したときの表示画面
以下に主なコマンドを紹介する。なお、コマンドは大文字でも小文字でもよいのだが、小文字で統一しておく。
<body bcolor="#ffffff" text="#000000" link="#ff0000" vlink="#0000ff">:
背景の色（bgcolor）を白に、テキストの色（text）を黒に、ハイパーリンクの色（link）を赤に、
すでに訪れたリンクの色（vlink）を青に設定するコマンド。
<br>: 改行コマンド。
<p>または<p>・・・</p>: 改行２つ間をあけるコマンド。
<hr>: 罫線を引くコマンド。
<b>[文字列]</b>: ボールド（太字）コマンド。
<i>[文字列]</i>: イタリック（斜体）コマンド。
<h?>[文字列]</h?>: ?は1〜6までの整数 見出しの文字をつくるコマンド（数字が小さいと文字が大きい）。
<h2>麺類大好き
<ol><li>[文字列]〜</ol>: 〜は<li>[文字列]、数字のついた箇条書きコマンド。
<ol>
<li>うどん
<li>そば
<li>ラーメン
<li>冷麺
<li>じゃじゃ麺
</ol>
</h2>
これを実行するとつぎのような表示画面になる。
これを実行したときの表示画面
(5) 画像ファイル
ホームページへの画像貼り付けコマンドは、以下のようなものを用いる。
<img src="[画像ファイル名]">
例）<img src="flower.jpg">
現在ブラウザで利用できる画像ファイルにはGIF形式（拡張子*.gif または*.GIF），
JPEG形式（拡張子*.jpg または*.jpeg *.JPG *.JPEG）とpng形式（拡張子*.png または*.PNG）
の三種類のものがある。
gif形式は最大256色という制限があり、ボタンやアイコンの画像データによく使われて
いたが、圧縮に使われているLZW法が米UNISYS社の特許となっており、使用するには高額な
ロイヤリティを支払うことが必要なことから最近は敬遠されようになってきている。
jpeg形式は写真などの色数が多く複雑な画像に向いた形式であり、デジタルカメラの画像など
に広く一般的に使われている。
png形式はフリーで使えることから，gif形式に替わる形式として、最近利用が拡大している。
しかし、ブラウザによっては全ての形式に対応できていないものがあるので注意が必要である。
(6) 絶対ジャンプ（絶対パス）と相対ジャンプ（相対パス）
他のページへのジャンプコマンドは以下のようなものを用いる。
<a href="[urlアドレス指定]">（リンクキー）</a>
（例）<a href="http://http://www.iwate-u.ac.jp/index-j.html">岩手大学のホームページ</a>
また、同一のサーバ上にあるファイルを指定する場合に、有効なのが「相対パス（相対ジャンプ）」である。
この相対パスの構造と作り方を以下に示す。
*******************************************************
B:\ (index.htm)
|
+--- michinoku (travel.htm)
|
+--- akita (yokote.htm*, tazawako.htm)
| |
| +--- image (kamakura.jpg, tatsuko.jpg)
|
+--- aomori (hachinohe.htm)
B:\ に index.htm という HTML ファイル、
フォルダ michinokuに travel.htm というHTML ファイル、
フォルダ aomori に hachinohe.htmというHTML ファイル、
フォルダ akita に yokote.htm と tazawako.htmというHTML ファイル、そして image というフォルダがあり、
フォルダimage には kamakura.jpg や tatsuko.jpg という画像ファイルがあるとする。
（HTMLのファイルの拡張子は *.htmlでも *.htmでもよいので、ここでは *.htmにしている）
*******************************************************
さて，* の B:\michinoku\akita\yokote.htm。
これは ./michinoku/akita/yokote.htm に相当する。
(以下、サーバ名は省略)
この * の HTMLファイルにおいて、以下の５つのことを実現してみる
(ここでは * のHTMLファイルを基準にしていることに注意)。
(つまりB:\michinoku\akita\yokote.htmから下記の５カ所にそれぞれジャンプする)。
1) B:\index.htm へのリンク
2) B:\michinoku\travel.htm へのリンク
3) B:\michinoku\akita\tazawako.htm へのリンク
4) B:\michinoku\aomori\hachinohe.htm へのリンク
5) B:\michinoku\akita\image\kamakura.jpg 画像へのリンク
まず 1)．
絶対パスで書くと、
<a href="./index.htm">
相対パスで書くと、
<a href="../../index.htm">
次 2)．
絶対パスで書くと、
<a href="./michinoku/travel.htm">
相対パスで書くと、
<a href="../travel.htm">
次 3)．
絶対パスで書くと、
<a href="./michinoku/akita/tazawako.htm">
相対パスで書くと、
<a href="./tazawako.htm">
次 4)．
絶対パスで書くと、
<a href="./michinoku/aomori/hachinohe.htm">
相対パスで書くと、
<a href="../aomori/hachinohe.htm">
最後 5)．
絶対パスで書くと、
<img src="./michinoku/akita/image/kamakura.jpg">
相対パスで書くと、
<imf src="./image/kamakura.jpg">
すなわち、
基準としているファイルのあるフォルダをカレントフォルダとするならば、
階層が１つ「上」のフォルダは .. (←コンマ２つ)、
カレントフォルダと同一階層ならば . (←コンマ１つ)
と表す。
したがって、２階層上のフォルダは、 ../../ と表され、
5) のように１階層下にある image というフォルダの場合は
カレントフォルダの下の image フォルダということで
./image/ と表される。
ここで注意することは、UNIXの世界では大文字と小文字とは区別されることである。
（WindowsやMacintoshでは区別されない）
したがって、パソコン上で HTML言語で書かれたホームページの原稿の中では、
大文字と小文字を混同して使用しない方がよい。
例）ここを<a href="flower.htm">クリック</a>すると
花のページに飛ぶ。
ここで、肝心のジャンプ先のファイル名が"flower.htm"ではなくて"FLOWER.HTM"
として作られていたら、ジャンプは失敗してしまう。
２ ホームページをつくってみよう
（１）簡単なホームページ例（自己紹介その１）
簡単なホームページを書いてみよう。
<html>
<head>
<title>self-introduction Example 1</title>
</head>
<body bgcolor="#ffffff">
<div align="center"hr>
<h1>イチローのページ</h1>
</div>
<h2>プロフィール
<p>鈴木 一朗 SUZUKI Ichiro </h2>
</body>
</html>
これを実行したときの表示画面
（２）簡単なホームページ例（自己紹介その２）
<html>
<head>
<title>self-introduction Example 2</title>
</head>
<body bgcolor="#ffffff">
<hr>
<div align="center"hr>
<h1>イチローのページ</h1>
</div>
<h2>プロフィール
<p>鈴木 一朗 SUZUKI Ichiro
<p>所属 シアトル・マリナーズ </h2>
<hr>
</body>
</html>
これを実行したときの表示画面
（３）簡単なホームページ例（自己紹介その３）
<html>
<head>
<title>self-introduction Example 3</title>
</head>
<body bgcolor="#ffffff">
<hr>
<div align="center"hr>
<h1>イチローのページ</h1>
</div>
<h2>プロフィール
<p>鈴木 一朗 SUZUKI Ichiro
<p>所属 シアトル・マリナーズ
<p>生年月日：1973年10月22日
<p>身長 １８０cm
<p>体重 ７５kg
<p>メジャーリーグで盗塁・安打・得点などの記録をぬりかえて活躍する世界的な日本人打者である。</h2>
<hr>
</body>
</html>
これを実行したときの表示画面
３ ホームページの見方
ホームページはHTML言語（Hyper Text Markup Language）で書かれた
文字や画像からなる本と考えてもよい。この電子の本をパソコンで見ることができるのである。
ホームページを見るにはブラウザというソフトを使う。
ブラウザを起動したら、すぐにスタートページ（ホームページ）が読み込まれる。
そこから自分の見たいページを探して移動するわけであるが、一般には見たい先の
ページもホームページと呼ばれている。ここでは、各ユーザが作ったHTML言語で
書かれたページ（サイトという）をホームページと呼ぶ。
自分の見たいホームページのアドレスURL(Uniform Resource Locator)
を指定すれば見ることができる。
たとえば、岩手大学のURLは、http://www.iwate-u.ac.jp/index-j.html である。
自分の見たいサイトを探すには、電話帳のような各種サイトについての市販の情報誌
があるので、それを利用するとよい。
あるいは、WWW上で検索エンジンというソフトを使って探すことができる。
有名な検索エンジンはいくつかあるので、知っている人からそのアドレス（URL）を
聞くとよい。
検索するときのテクニックとして、上手にキーワードを選択することが必要であるが、
探したいことがらに関する予備知識もあったほうがよいので、経験を積むと上手になる。
このようにして、インターネットを利用すれば、自分の知りたいことなどが手軽に
知ることができる。しかし、インターネットですべての知識が得られるわけではないから、
自分で必要に応じて参考書を読んだり、自分で考えることが大事である。
そうでないと、車やエレベータに乗ってばかりいると足腰が弱くなるように
（ワープロを使っていると漢字が書けなくなるように）、インターネットを使ってばかりで
自分で考えることをしないでいると、思わぬ落とし穴に落ちることになる。
また、著作権の問題にも注意を払わないといけない。
たとえば、他人のホームページの画像をコピーして無断で自分のホームページに
使うことは著作権法に抵触することになる。