第6章 ワールドワイドウェッブ

テキスト:第六章

WWWの章です。本章には二つの目的があります。一つはすでに存在するウェッブページを閲覧し、情報を得て、上手に利用 できるようになることです。もう一つは自分でウェッブページを作れるようになることです。そんなに凝ったものを作る必要はありませんが、皆さんが見ている このページぐらいのものが作れればWWWがより身近なものになりますし、利用範囲も大きくなります。

自分のWWWページを作るにはサーバースペースを持っていなければなりません。インターネットサービスプロバイダ (ISP)の中には契約するとWWWサーバーのスペースをくれるものもあります。また、WWWサーバーは別の料金設定になっているものもあります。大学や 会社などの組織は自分のサーバーを持っていて、そこから割り当て分をもらえることもあります。さらに、無料サーバーを提供している会社もあります。このよ うな会社はサーバーを無料で作らせてくれる代わりに、WWWページの中に自動的に広告が挿入されます。会社はその広告収入で営業しています。したがって、 広告が気にならなければ、自分のWWWページは無料で構築できます。その例として、http://geocities.yahoo.co.jp/が あります。

教科書ではWWWページを作る道具としてNetScape Composerを使用していましたが、古くなってしまったので、KompoZerという別の無料WWWエディタを使ってみましょう。Dream WeaverやFront PageといったWWWエディタをすでに使っている人はそのまま使ってもらってかまいません。ただし、それぞれのソフトの使い方に関する細かい質問までは 対応しきれない可能性があります。

KompoZer 0.8b1(2009-10-11)の日本語バージョンをダウンロードしてみてください。KompoZerにはWindows用とMac用の両方がありま す。
http://kompozer.net/download.php

 

ムービーヘルプ(KompoZer)

ムービーヘルプの中で使っているファイル:chibi7.jpg, mypage1_k.html, mypage2_k.html

1. 画像の出し方の基本 WMV形式 MOV形式

HTMLでは、画像は独立した別のファイルとして存在します。HTML言語は「mypicture.jpgというファイルを開けてここにこの大 きさで表示 しなさい」という命令を出して、それを見つけてブラウザで表示します。ですから、写真が10ある場はファイルも10個アップロードしなければなりません。 ファイルの場所が正確に記述されていないと画像ファイルをみつけることができなくなり、画像が表示されません。

2. 複数のファイルをリンクを使ってつなげる WMV形式 MOV形式

3. テーブルを作るときの設定の仕方 WMV形式 MOV形式

4. ファイルのアップロード ffftpの場合 (WMV形式 MOV形式) WS_FTPの場合 (WMV形式 MOV形式) Fetchの場合(MOV形式)(教科書の図6.12の部分です。)

 

ダウンロード: call_small.gif, Ch6Example1.htm, Ch6Example2.htm, cook_small.gif, ushioni.jpg

Fetchのダウンロード:Macintosh OS XをユーザはFetchもOS X用のものを入手してください。(現在は15日間は無料なのですが、連続して使用する場合は購入しなければなりません。)Fetch Soft

追加説明

NetScape Composer

NetScape Composerはユーザーがワープロソフト感覚で作ったページを保存するときに、そのページの構成をHTMLというコンピュータ言語に翻訳して保存しま す。ブラウザはこのHTML言語を解釈して、テキストや画像を画面に表示します。リンクもHTML言語の一部です。NetScape Composeで作ったファイル(つまり、HTML言語を含んだファイル)をNotePad(Windows)、Simple Text(Macintosh)、TextEdit(Macintosh)などのテキストエディタで開けると、HTML言語がどのようになっているか見る ことができます。(これはNotePadなどはHTML言語を解釈しないからです。)

HTMLファイルをWordで開けると、WWWのページが出てきて、HTML言語は出てきません。これはWordがブラウザのようにHTMLを 解釈してい るからです。実は、Wordはファイルを保存する時にHTMLで保存することもできます。ですから、この意味では、WordもNetScape Composerと同じことができるのです。しかし、Wordは少しよけいなことをし過ぎる傾向があることと、画像ファイルの扱い方が初心者には分かりづ らいので、講習では使わないことにしました。 下の「どうしてワードでウェッブページの編集をしないのですか?」参照。

HTMLでは、画像は別のファイルとして存在します。例えば、下のHTML言語の記述は「monitor.jpgというファイルを見つけて、幅 132ピク セル,高さ99ピクセルで表示しなさい」という意味です。

<img src="monitor.jpg" width="132" height="99">

画像ファイルが表示できないのですが?

リンクの問題や画像ファイルが表示されないといった問題は、ホームページ作りを始めると必ず起きる問題です。まず、ローカルファイルとサーバー 上にあるファイルをしっかり区別出来るようにしてください。ローカルファイルというのは自分のコンピュータのハード ディスクのどこかにあるファイルです。これはもちろんインターネットを通して見ることはできません。でも、IEで開けて、表示することはできますから、注 意していないとあたかもインターネット上でも見えると錯覚するかも知れません。確かめ方は、IEのアドレス (URL)のボックスの中身がhttp:で始まっていたら、インターネット上のファイルを見ていて、file:で始まっていたら、ローカルファイルです。

Composerで絵を挿入するときに、画像の挿入を選んだ後、「ファイル選択」で画像を探して選ぶと、そのURLはローカルファイルになって しまっています。ですから、それをそのままアップロードすると、画像ファイルをアップロードしているにも拘わらず、画像が表示されないことになってしまい ます。ですから、「ファイル選択」は使わずにURLの欄にファイルの名前だけをタイプしてください。そして、画像ファイルとHTMLファイルが同じフォル ダの中にあれば、それで表示されるはずです。そして、二つのファイルをアップロードします。

また、Composerの画像の挿入のページにある「URLはページの場所に相対的です」という項目を チェックしても、同様に設定されます。この場合は「ファイル選択」をつかっても大丈夫です。

いずれにしても、大切なのはホームページを作る場合、ローカルファイルとサーバー 上に同一のファイル群が二セット存在しているということを理解し、その二つがしっかりと区別できることです。編集するのはローカルファイルですから、その 時点でサーバー上のファイルとずれが生じます。次に、ローカルファイルをアップロードすると、サーバー上のファイルが新しいローカルファイルの内容に書き 換えられますから、ずれが解消されます。

どうしてワードでウェッブページの編集をしないのですか?

ワードにもHTMLファイルを編集する機能が確かについています。ファイルメニューの「ウェッブページとして保存」というのを使うと、HTML ファイルをつくり、XXXX.htmというファイルを生成します。そして、ページの中に絵や写真が入っているとXXXX_picturesというフォルダ も同時に作り、そのなかに絵や写真のファイルを入れます。でも、この時、ファイルの名前は恣意的なものになり、内容がわからなくなってしまいます。この辺 の不透明さが私は好きではないので講習では使わないことにしました。

どうしてhttp://wwwsoc.nii.ac.jp/nkg/だけでホームページが出てくるのですか?

http://wwwsoc.nii.ac.jp/nkg/というURLには最後にXXXXX.htmというようにファイルを指定する部分があ りません。これはウェッブを使いやすくするために特定の名前のHTMLファイルは省略してもそのファイルを自動的に探してくれるようになっているからなの です。特別な名前はindex.htmやdefault.htmなどがあります。ですから、http: //wwwsoc.nii.ac.jp/nkg/index.htmのindex.htmが省略されていると思って下さい。しかし、サイトには index.htmというファイルがなければなりません。皆さんが作っているサイトでもメインページのファイルの名前をindex.htmにすると他の人 にURLを教える時に少し短くてすみます。

WWWページでの文字種やスタイルの使い方のガイドライン

1 文字色は三色まで。
2 ブリンキング(文字がペカペカついたり消えたりする)は極力使わない。(これはとても強い視覚的な効果を持っているので、ほかの部分を読むことができなく なる)
3 下線は使わない。(青色で下線がついている文字はそこにリンクがついていることを示していることが多いのが理由。)
4 壁紙は全面の文字が読みにくくならないものを選ぶ。
5 アニメーション効果も注意して使う。


WWWページで音を出せるようにしたいのですが。

基本的には画像ファイルを表示するのと同じで、音声ファイルを別に作ってそのファイルに対するリンクをつけるのが、一番簡単な方法です。音声 ファイルはWAV形式が便利でしょう。Windowsのアクセサリーにsound recorderというアプリケーションが入っています。マイクさえあれば録音して、ファイルを保存するだけでWAVファイルができます。ごく簡単な例を 作っておきましたので、参照して下さい。
http://tell.fll.purdue.edu/hatasa/kurosio/soundexample/animals.htm