・WWWによる情報交流（HTML言語の基礎、情報収集と発信、著作権）

ホームページの書き方
     HTML言語の基礎

HTML言語（Hyper Text Markup Language）
　 テキスト形式ファイル
　　*.THML   *.html    *.THM   *.htm

ブラウザ（ホームページを見るソフト）
　主なソフト
　Netscape Navigator(Netscape Communicator),  Microsoft Internet Explorer

簡単なホームページの作り方

ホームページ作成のポイント
１．まず文章だけで書いてみる。（写真やリンクは後から加える）
２．装飾記号を覚える。（太字、斜体、文字の大きさ、文字の色など）
３．写真、図を貼り込んでみる。（すっかり楽しいページになる）
４．複数のページ間をわたるためのリンクの張り方を覚える。



ホームページの全体構成
１．＜ｈｔｍｌ＞タグで始まり、＜／ｈｔｍｌ＞タグで終わる。
　ｈｔｍｌリストの先頭に＜ｈｔｍｌ＞タグを書き、最後に＜／ｈｔｍｌ＞タグを書く。
２．本文の前にヘッダ部分をおく。ヘッダ部分は＜ｈｅａｄ＞タグで始まり、＜／ｈｅａｄ＞タグで終わる。
３．本文を書く。本文は＜ｂｏｄｙ＞タグで始まり、＜／ｂｏｄｙ＞タグで終わる。
　以下に簡単な例を示す。
　＜ｈｔｍｌ＞
　＜ｈｅａｄ＞
　＜ｔｉｔｌｅ＞Ｈｏｍｅ　Ｐａｇｅ　Ｍａｋｉｎｇ＜／ｔｉｔｌｅ＞
　＜／ｈｅａｄ＞
　＜ｂｏｄｙ　ｂｇｃｏｌｏｒ＝”＃ｆｆｆｆｆｆ”＞　　
　＜ｈ２＞Ｅｘａｍｐｌｅ＜／ｈ２＞
　＜ｈ４＞冬が寒くて大雪なら、豊作だ＜／ｈ４＞
　＜／ｂｏｄｙ＞
　＜／ｈｔｍｌ＞
　 　　　これを実行したときの表示画面

以下に主なコマンドを紹介する。
実際はコマンドは半角文字なのだが、ここに半角文字で記載すると
コマンド命令が実行されてしまうので、全角文字で記載する。
また、コマンド文字は（ＭＳ−ＤＯＳでは）大文字でも小文字でもよいのだが、小文字で統一する。

＜ｂｏｄｙ　ｂｇｃｏｌｏｒ＝”＃ｆｆｆｆｆｆ”　ｔｅｘｔ＝”＃００００００”　ｌｉｎｋ＝”＃ｆｆ００００”　ｖｌｉｎｋ＝”＃００００ｆｆ”＞
　背景の色（ｂｇｃｏｌｏｒ）を白に、テキストの色（ｔｅｘｔ）を黒に、ハイパーリンクの色（ｌｉｎｋ）を赤に、すでに訪れたリンクの色（ｖｌｉｎｋ）を青に設定する。
＜ｂｒ＞  改行コマンド  
＜ｐ＞または＜ｐ＞・・・＜／ｐ＞ 　改行２つ間をあけるコマンド
＜ｈｒ＞    罫線を引くコマンド
＜ｂ＞[文字列]＜／ｂ＞ ボールド（太字）コマンド
＜ｉ＞[文字列]＜／ｉ＞ イタリック（斜体）コマンド
＜ｈ？＞[文字列]＜／ｈ？＞  ?は1〜6までの整数  見出しの文字をつくるコマンド
　　　　＜ｈ１＞ 中国料理研究 ＜／ｈ１＞
＜ｏｌ＞＜ｌｉ＞[文字列]〜＜／ｏｌ＞　〜は＜ｌｉ＞[文字列]　数字のついた箇条書きコマンド
　　　　＜ｏｌ＞
　　　　＜ｌｉ＞北京料理
　　　　＜ｌｉ＞上海料理
　　　　＜ｌｉ＞四川料理
　　　　＜ｌｉ＞広東料理
        ＜／ｏｌ＞
　 　　　これを実行したときの表示画面

画像ファイル
＜ｉｍｇ　ｓｒｃ＝”[画像ファイル名]”＞
　　　　＜ｉｍｇ　ｓｒｃ＝”ｊａｌ．ｇｉｆ”＞
画像ファイルにはgif形式（拡張子.gif 拡張子.GIF）と
jpeg形式（拡張子.jpg 拡張子.jpeg 拡張子.JPG 拡張子.JPEG）のものがある。
gif形式は最大256色という制限があるが、画像データは小さくてすむ。
jpeg形式は写真などの色数が多く複雑な画像でもあつかえるが、一部のブラウ
ザには対応できないものがある。

絶対ジャンプ
＜ａ　ｈｒｅｆ＝”[urlアドレス指定]”＞（リンクキー）＜／ａ＞
　（例）＜ａ　ｈｒｅｆ＝”ｈｔｔｐ：／／ｔａｋｕｂｏｋｕ．ｃｃ．ｉｗａｔｅ−ｕ．ａｃ．ｊｐ／ｉｎｄｅｘ−ｊ．ｈｔｍｌ”＞岩手大学のホームページ＜／ａ＞
相対パス（相対ジャンプ）の作り方の要点
　相対パスの構造

注意！　ＵＮＩＸの世界では、大文字と小文字とは区別される。
（ＭＳ−ＤＯＳでは区別されない）
したがってＰＣでTHML言語で書かれたホームページの原稿の中で、大文字と
小文字を混同して使用してはいけない。
    例）ここを<ａ　ｈｒｅｆ＝”ｓｔｒｃ．ｈｔｍ”＞クリック＜／ａ＞すると
　　　構造工学学習のページに飛ぶ。
   かんじんのジャンプ先のファイル名が"strc.htm"ではなくて"STRC.HTM"として
作られていたら、ジャンプは失敗してしまう。

簡単なホームページ例（自己紹介その１）
＜ｈｔｍｌ＞
＜ｈｅａｄ＞
＜ｔｉｔｌｅ＞self-introduction Example 1＜／ｔｉｔｌｅ＞
＜／ｈｅａｄ＞
＜ｂｏｄｙ ｂｇｃｏｌｏｒ＝”＃ｆｆｆｆｆｆ”＞  
＜ｈｒ＞
＜ｄｉｖ ａｌｉｇｎ＝”ｃｅｎｔｅｒ”＞
＜ｈ1＞末広良子　の　頁＜／ｈ1＞＜／ａ＞
＜／ｄｉｖ＞
＜ｈ4＞簡単な自己紹介
＜ｐ＞末広　良子　　ＳＵＥＨＩＲＯ　Ｒｙｏｋｏ＜／ｈ4＞
＜／ｂｏｄｙ＞
＜／ｈｔｍｌ＞
　 　　　これを実行したときの表示画面

簡単なホームページ例（自己紹介その２）
＜ｈｔｍｌ＞
＜ｈｅａｄ＞
＜ｔｉｔｌｅ＞self-introduction Example 2＜／ｔｉｔｌｅ＞
＜／ｈｅａｄ＞
＜ｂｏｄｙ ｂｇｃｏｌｏｒ＝”＃ｆｆｆｆｆｆ”＞  
＜ｈｒ＞
＜ｄｉｖ ａｌｉｇｎ＝”ｃｅｎｔｅｒ”＞
＜ｈ1＞末広良子　の　頁＜／ｈ1＞＜／ａ＞
＜／ｄｉｖ＞
＜ｈ4＞簡単な自己紹介
＜ｐ＞末広　良子　　ＳＵＥＨＩＲＯ　Ｒｙｏｋｏ＜／ｈ4＞
＜ｂｒ＞＜ｆｏｎｔ ｃｏｌｏｒ＝”ｆｆ00ｆｆ”＞（プロフィール）＜／ｆｏｎｔ＞
＜ｐ＞就職先　株式会社エコロジー設計
＜ｈｒ＞
＜／ｂｏｄｙ＞
＜／ｈｔｍｌ＞
　 　　　これを実行したときの表示画面

簡単なホームページ例（自己紹介その３）
＜ｈｔｍｌ＞
＜ｈｅａｄ＞
＜ｔｉｔｌｅ＞self-introduction Example 3＜／ｔｉｔｌｅ＞
＜／ｈｅａｄ＞
＜ｂｏｄｙ ｂｇｃｏｌｏｒ＝”＃ｆｆｆｆｆｆ”＞  
＜ｈｒ＞
＜ｄｉｖ ａｌｉｇｎ＝”ｃｅｎｔｅｒ”＞
＜ｈ1＞末広良子　の　頁＜／ｈ1＞＜／ａ＞
＜／ｄｉｖ＞
＜ｈ4＞簡単な自己紹介
＜ｐ＞末広　良子　　ＳＵＥＨＩＲＯ　Ｒｙｏｋｏ＜／ｈ4＞
＜ｂｒ＞＜ｆｏｎｔ ｃｏｌｏｒ＝”ｆｆ00ｆｆ”＞（プロフィール）＜／ｆｏｎｔ＞
＜ｐ＞就職先　株式会社エコロジー設計
＜ｐ＞趣味　水泳、登山、バードウォッチング
＜ｐ＞一言　私の趣味は野外を歩くこと。
＜ｂｒ＞　　　東北の自然はすばらしい。
＜ｂｒ＞　　　インターネット勉強中！　　　
＜ｈｒ＞
＜／ｂｏｄｙ＞
＜／ｈｔｍｌ＞
　 　　　これを実行したときの表示画面

ホームページの見方
ホームページはHTML言語（Hyper Text Markup Language）で書かれた
文字や画像からなる本と考えてもよい。この電子の本をＰＣ（パソコン）で見ることができる。
ホームページを見るにはブラウザというソフトを使う。
ブラウザを起動したら、すぐにスタートページ（ホームページ）が読み込まれる。
そこから自分の見たいページを探して移動するわけであるが、一般には見たい先の
ページもホームページと呼ばれている。ここでは、各ユーザが作ったHTML言語で
書かれたページ（サイトという）をホームページと呼ぶ。
自分の見たいホームページのアドレスURL(Uniform Resource Locator)
を指定すれば見ることができる。
たとえば、岩手大学のURLは、http://www.iwate-u.ac.jp/index-j.html　である。

自分の見たいサイトを探すには、電話帳のような各種サイトについての市販の情報誌
があるから、それを利用することができる。
あるいは、WWW上で検索エンジンというソフトを使って探すことができる。
有名な検索エンジンはいくつかあるので、知っている人からそのアドレス（URL）を
聞くとよい。

このようにして、インターネットを利用すれば、自分の知りたいことなどが手軽に
知ることができる。しかし、インターネットですべての知識が得られるわけではないから、
自分で必要に応じて参考書を読んだり、自分で考えることが大事である。
そうでないと、車やエレベータに乗ってばかりいると足腰が弱くなるように
（ワープロを使っていると漢字が書けなくなるように）、インターネットを使ってばかりで
自分で考えることをしないでいると、思わぬ落とし穴に落ちることになる。
また、著作権の問題にも注意を払わないといけない。
たとえば、他人のホームページの画像をコピーして無断で自分のホームページに
使うことは著作権法に抵触することになる。