4.2 ホームページ作成方法

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

 インターネットでWWW(World Wide Web)を使うことが盛んである.もはや インターネットとは,WWWで各種のホームページを見て情報収集をしたり, 逆に自分の手作りのホームページから情報発信することをさす場合が多い. つまり,情報収集や情報発信をまとめた情報交流が,これから情報処理教育の 大きなテーマとなるにちがいない.  ここでは,ホームページを作る上で最低限必要なHTML言語の基礎を説明する. そして情報社会に生きるために望ましい倫理観(プライバシー保護や著作権のこと など)や自分を守るセキュリティについてもふれる.  情報収集や情報発信をするためには,ホームページを見るソフト(プログラム)と, ホームページを作るソフト(プログラム)が必要である.  ホームページを見るソフトはブラウザと言われるが,主なソフトとしては Netscape Navigator(Netscape Communicator)と Microsoft Internet Explorerがある.  ホームページを作るソフトについては,市販のソフトがたくさん販売されているが, ここではそれらを使わず,最低限のエディター機能をもつソフトで作る方法について 説明する.エディターというのはテキスト文章を書いたり直したりするワープロソフトのごく簡単なものと考えてよい.  また,Wordや一太郎のような市販のワープロソフトで文章や表などを作って,それを ホームページ用のファイルに変換する方法もある.このときは,作った文章や表などを ホームページ用のファイルに変換して保存すればよいのである. ホームページを書くには,HTML言語(Hyper Text Markup Language)を使って 書くことになる.HTML言語で書かれた文書ファイルはテキスト形式ファイルとなる. つまり拡張子として次のような拡張子がつくことになる.それらのどれで作ってもよい が統一しておいた方が見たときに混乱しない.   *.THML *.html *.THM *.htm 簡単なホームページの作り方 ホームページ作成のポイント 1.まず文章だけで書いてみる.(写真やリンクは後から加える) 2.装飾記号を覚える.(太字,斜体,文字の大きさ,文字の色など) 3.写真,図を貼り込んでみる.(すっかり楽しいページになる) 4.複数のページ間をわたるためのリンクの張り方を覚える. ホームページの全体構成 1.<html>タグで始まり,</html>タグで終わる.  htmlリストの先頭に<html>タグを書き,最後に</html>タグを書く. 2.本文の前にヘッダ部分をおく.ヘッダ部分は<head>タグで始まり,</head>タグで終わる. 3.本文を書く.本文は<body>タグで始まり,</body>タグで終わる.  以下に簡単な例を示す.  <html>  <head>  <title>Home Page Making,Example 1</title>  </head>  <body bgcolor=”#ffffff”>  <h2>Example 1</h2>  <h3>岩手じまん</h3>  <h4>・岩手の民謡</h4>  <h4>・岩手の山</h4>  <h4>・岩手の川</h4>  </body>  </html>      これを実行したときの表示画面 なお 説明のために必要最小限の HTML言語の主なコマンドを紹介する. 実際はコマンドは半角文字なのだが,ここに半角文字で記載すると コマンド命令が実行されてしまうので,全角文字で記載する. また,コマンド文字は大文字でも小文字でもよいのだが, ここでは小文字で統一しておく. <body bgcolor=”#ffffff” text=”#000000” link=”#ff0000” vlink=”#0000ff”>  背景の色(bgcolor)を白に,テキストの色(text)を黒に, ハイパーリンクの色(link)を赤に,すでに訪れたリンクの色(vlink)を青に設定する. <br> 改行コマンド <p>または<p>・・・</p>  改行2つ間をあけるコマンド <hr> 罫線を引くコマンド <b>[文字列]</b> ボールド(太字)コマンド <i>[文字列]</i> イタリック(斜体)コマンド <h?>[文字列]</h?> ?は1〜6までの整数 見出しの文字をつくるコマンド <ol><li>[文字列]〜</ol> 〜は<li>[文字列] 数字のついた箇条書きコマンド  <html>  <head>  <title>Home Page Making,Example 2</title>  </head>  <body bgcolor=”#ffffff”>  <h2>Example 2</h2>  <h3>岩手の民謡</h3>  </div>     <ol>     <li>南部牛追唄     <li>外山節     <li>沢内甚句 </ol>  </body>  </html>      これを実行したときの表示画面 画像ファイル <img src=”[画像ファイル名]”>     <img src=”jal.gif”> 画像ファイルにはgif形式(拡張子.gif 拡張子.GIF)と jpeg形式(拡張子.jpg 拡張子.jpeg 拡張子.JPG 拡張子.JPEG)のものがある. gif形式は最大256色という制限があり,ボタンやアイコンの画像データによく使われる. jpeg形式は写真などの色数が多く複雑な画像でもあつかえるが,一部のブラウザには 対応できないものがある. 簡単なホームページ例  <html>  <head>  <title>Home Page Making,Example 3</title>  <body bgcolor=”#ffffff”>  <h2>Example 3</h2>  <h3>岩手の山</h3>     <ol>     <li>早池峰山     <li>岩手山     <li>栗駒山 </ol> <img src=”./iwateberg.jpg”>  </body>  </html>      これを実行したときの表示画面 ここでは,山の画像が見られるが,相対パス形式で画像データを 指定している.相対パスについては後に述べる. 簡単なホームページ例 <html> <head> <title>Home Page Making,Example 4</title> </head> <body bgcolor=”#ffffff”>  <h2>Example 4</h2> <hr>  <font color=”0000ff”><h3> 岩手の川</h3>     <ol>     <li>北上川     <li>馬淵川     <li>米代川 </ol></font> <hr> </body> </html>      これを実行したときの表示画面 すわなち,岩手に源流を持つこれらの河川は,それぞれ宮城県,青森県,秋田県の 代表的河川となって海にそそいでいる.これらの河川を表にまとめると次のようになる. なお,この表はワープロソフトで作り,ホームページ用のファイルに変換して作ったものである.      これらの河川をまとめた表の表示画面 絶対ジャンプ(絶対パス) <a href=”[urlアドレス指定]”>(リンクキー)</a>  (例)<a href=”http://takuboku.cc.iwate−u.ac.jp/index−j.html”>岩手大学のホームページ</a> 相対ジャンプ(相対パス)の作り方の要点 これは以下のようになる. 相対パスの構造 ここで注意することは,UNIXの世界では大文字と小文字とは区別されることである. したがってWS(ワークステーション)などではTHML言語で書かれたホームページの 原稿の中で,大文字と小文字を混同して使用してはいけない. PC(パソコン)の場合はそういう問題はないが, THML言語で書かれたホームページの文書ファイルをWSに移植するとき問題が起きて 見られるなくなることがある. 例)ここを<a href=”flower.htm”>クリック</a>すると    花のページに飛ぶ. この場合 かんじんのジャンプ先のファイル名が"flower.htm"ではなくて"FLOWER.HTM" として作られていたら,ジャンプは失敗してしまう. 簡単なホームページ例  <html>  <head>  <title>Home Page Making,Example 5</title>  </head>  <body bgcolor=”#ffffff”>    <h2>Example 5</h2>  <h2>Example 1にリンク機能を追加した</h2>  <hr>  <h3>岩手じまん</h3>  <h4><a href=”./exam2iwate.htm”>・岩手の民謡</a></h4>  <h4><a href=”./exam3iwate.htm”>・岩手の山</a></h4>  <h4><a href=”./exam4iwate.htm”>・岩手の川</a></h4>  <h4> <a href=”./exampliver.htm”>岩手の川の表</a></h4>  </body>  </html>      これを実行したときの表示画面 ブログのこと 「ブログ(blog)」とは,ホームページの形式の一種で,日記ホームページに似ている. たとえれば,さるさる日記と画像掲示板を一緒にして発展させたような感じのサイト. 「ブログ(blog)」とは「ウェブログ(weblog)」を略した言葉で,「Web上に残される記録」というような意味である. どうやら,作者がデザインなどをいちいち考えないで,時系列的に メモ記事を書いていく感じのホームページみたいだ. 使いやすい簡単なホームページ的な存在で,HTMLなどを知らない初心者でも簡単にホームページが作ることができる. fftpで転送しないですむのも楽である. ブログでは最初のページのいちばん上に新しい記事を表示するから,非常に読みやすい. また検索機能や「最近の記事」のリストが標準でついているから,バックナンバーを探すことも簡単である. ユーザのために用意されたアプリケーションの進化形態と言えるかもしれない. どこからどこまでが,ホームページでBBSでブログか?という境目が見えにくい. しかし,現代のところ発展途上にあり,多数のユーザが使用すると応答が遅くなるし, より高度なサービスを求めると有料になりそうである.ブログでもHTML言語を知っていたほうが便利である. したがって,きちんとHTML言語の主なコマンド(タグ)を学び,相対ジャンプ(相対パス) のもとになるファィルの階層構造を理解しておくことは,基礎知識としてこれからも重要であろう. ホームページの見方 ホームページはHTML言語(Hyper Text Markup Language)で書かれた 文字や画像からなる本と考えてもよい.この電子の本をPC(パソコン)で見ることができる. ホームページを見るにはブラウザというソフトを使う. ブラウザを起動したら,すぐに先頭のスタートページ(ホームページ)が読み込まれる. そこから自分の見たいページを探して移動するわけであるが,一般には見たい先の ページもホームページと呼ばれている.ここでは,各ユーザが作ったHTML言語で 書かれたページ(サイトという)をホームページと呼ぶ. 自分の見たいホームページのアドレスURL(Uniform Resource Locator) を指定すれば,そこを見ることができる. たとえば,岩手大学のURLは http://takuboku.cc.iwate-u.ac.jp/index-j.html である. 岩手大学の教員の中には教材としてホームページを作り,学生の参考にしている場合がある. たとえば下記のページは橋の写真集である.  http://structure.cande.iwate-u.ac.jp/miyamoto/bridge/bridges.htm この他にもいくつかのポームページを紹介する. 自分の見たいサイトを探すには,電話帳のような各種サイトについての市販の情報誌 があるから,それを利用することができる. あるいは,WWW上で検索エンジンというソフトを使って探すことができる. 有名な検索エンジンはいくつかあるので,知っている人からそのアドレス(URL)を 聞くとよい.この場合,キーワードを何に選ぶかで,検索する効率が変わってくる. 上手に検索する人のコツを聞くと,3個くらいの適切なキーワードを選んで, それについて検索することだという.それには調べたい事項について,より適切な キーワードを思いつくことのできる能力,つまり調べたい対象についての予備知識が 必要である. インターネットの世界でも関連知識を多くもつ人ほど,自分の知りたい情報を 早くキャッチすることができ,インターネットをさらに効率よく利用できるのである. このようにして,インターネットを利用すれば,自分の知りたいことなどが手軽に 知ることができる.しかし,インターネットですべての知識が得られるわけではないから, 自分で必要に応じて参考書を読んだり,自分で考えることが大事である. そうでないと,車やエレベータに乗ってばかりいると足腰が弱くなるように (ワープロを使っていると漢字が書けなくなるように),インターネットを使ってばかりで 自分で考えることをしないでいると,思わぬ落とし穴に落ちることになる. また,著作権の問題にも注意を払わないといけない. たとえば,他人のホームページの画像をコピーして無断で自分のホームページに 使うことは著作権法に抵触することになる. 自分のホームページに書いた日記の中に,仲のよい友人のことを書いたとして, ついプライバシーのことも書いてしまうと,あとで本人が迷惑することもあるから, ホームページを作るときは気をつけたい.日本語のホームページだとしても世界中の 人から見られていて,しかも誰が見ているかわからないこともあるから. そういうわけで,ホームページに住所や電話番号を載せることは気をつけたい. また,ホームページにはウィルスが入り込んできたり,クラッカーの襲撃を受けて ダウンすることもあるから,日頃からセキュリティ対策を怠らないようにすることが 必要である.そのためには毎月ホームページの内容をCDやDVDやMOやHD などにバックアップをとっておいたほうが安全である. 最後にホームページの情報発信性を正しく使うようにしたい. 特に大学生として学問に志す身では,特定の宗教や政治の宣伝に使ったり, 金儲けの手段として使うことは避けるべきであろう. いわゆる公序良俗に反することをしてはいけない.