インターネット活用研究会
インターネットの応用的使い方
〜World Wide Webで情報発信を始めましょう〜
日本電気ソフトウェア株式会社
唐澤 清彦
− 目次 −
0.見て見て！私のHomePage
1.WordtoWebで楽々HomePage制作
2.HTMLの構文とWordtoWebの操作
3.Word文書からHTMLへ
4.MosaicViewで見てみましょう
5.サーバへのHTML文書の置き方
6.GIF/JPEGデータの作り方
7.HTMLの高度な機能
8.ホームページデザイン
9.これからのWWW
10.インターネットツールの応用
0.見て見て！私のHomePage
・インターネットブーム
・ビジュアルな情報発信
・あなたはもうHomePageを作ったことがありますか？
1. WordtoWebで楽々HomePage制作
1.1 ＨＴＭＬとは
テキストの中にタグと呼ばれる書式を示す記号
（＜＞で囲まれた文字列）を埋め込んだテキストファイル
例えばこのテキストファイルを…
↓
サンプルです
------------------------------------------------------------
別の文書をリンクします
下線の部分をクリックして下さい次のページ
------------------------------------------------------------
ＨＴＭＬにするとこんな感じ…
↓
<HTML>
<TITLE>サンプル</TITLE>
<BODY>
<H1>サンプルです</H1>
<HR>
別の文書をリンクします<P>
下線の部分をクリックして下さい<A REF "next-pg.htm"> 次のページ </A><BR>
<HR>
</BODY>
</HTML>
1.2 WordtoWebとは
・ワープロ(MS-Word)でHTML文書を自動作成
・作成したHTML文書のWWWサーバへの登録支援
・クリッカブルマップ・エディタ
・既存の文書をHTML化する
1.[ファイル(F)]-[テンプレート(T)]-[添付(A)]で、
ファイル名「wtoweb.dot」を選択する。
2.[文書スタイルを自動的に更新(U)]を選択して[OK]ボタンを押す
・新規にHTML文書を作成する
1.[ファイル(F)]-[新規作成(N)]で<新規作成>のダイアログを開く
2.[使用するテンプレート(T)]でwtoweb.dotを選択して[OK]ボタンを押す
2.HTMLの構文とWordtoWebの操作
2.1 基本タグ
●タイトル <TITLE></TITLE>
WordtoWebでは、ツールバーの［タイトル］をクリックして入力して下さい
●見出し <H1..6></H1..6>
６種類の大きさの見出しが使えます
<H1>見出し１</H1> 見出し１
<H2>見出し２</H2> 見出し２
<H3>見出し３</H3> 見出し３
●改行と段落
<BR> 改行
WordtoWebでは、[SHIFT]+[RETURN] で入力します。
<P> 段落
WordtoWebでは、[RETURN] で入力します。
<BR>より、前の行との間隔が開きます。
2.2 マークアップタグ
●箇条書き（リスト）
箇条書きと番号付きの２種類が選べます。
入れ子も可能です。
・番号付きリスト
<OL>
<LI>あめふらし
1.あめふらし
<LI>しまうま
2.しまうま
</OL>
・番号無しリスト
<UL>
<LI>あめふらし
・あめふらし
<LI>しまうま
・しまうま
</UL>
●プレフォーマットテキスト <PRE> </PRE>
・HTMLでは、タグで明示されない改行や、半角スペースは無視されます。
・<PRE></PRE>タグで囲むと、その範囲のテキストはエディタで表示されるように改行やスペースが有効になります。
●アドレス <ADDRESS> </ADDRESS>
htmlconv@mmj.mt.nec.co.jp
ここでいうアドレスは、ホームページの末尾に自分の署名をするときなどに使うもの。
いわゆるmailtoタグ（その相手にメールを出す機能）のことではありません。
2.3 文字の修飾
●文字の種類
タイプ,TT
ブリンク,BLINK
引用,CITE
強調,EM
強調２,STRONG
太字、イタリック、アンダーライン
→ ツールバーのボタンで指定
●区切り線 <HR>
Horizontal Rule
2.4 画像を組み込む
●インライン画像
・GIF(JPEG)ファイルを用意する
・ツールバーの［画像］をクリックしてファイルを選ぶ
2.5 リンクを張る
●ローカルなリンク
・リンク元の 文字列／画像 を指定
・ツールバーの［リンク］をクリックする
・ファイルの種類を指定してファイルを選ぶ
ＨＴＭＬファイル
画像
音声
動画
●ＵＲＬ（他のサーバのページ）の指定
・リンク元の 文字列／画像 を指定
・ツールバーの［ＵＲＬ］をクリックする
・ＵＲＬを記述する
例：ＣＥＣのホームページのＵＲＬ を指定する
http://WWW.cec.or.jp/CEC/
インライン画像をダブルクリックすることで、説明文の位置を指定する、画像名をつける、クリッカブルマップ作成支援ツールを起動するなどの操作が出来ます。
3.Word文書からHTMLへ
・作成した文書は一旦セーブする
・ツールバーの［ＨＴＭＬ変換］をクリックする
→ 文書名.htm というファイルが作成されます
4.MosaicViewで見てみましょう
5.サーバへのHTML文書の置き方
5.1 WordtWebの作成文書転送機能
・ツールバーの［サーバ登録］をクリック
・ＷＷＷサーバ名
・そのサーバでのユーザ名パスワード
・ＰＣ側の文書ディレクトリ設定
・ＷＷＷサーバのドキュメントルートの設定
5.2 文書ディレクトリとデフォルト文書の検索順序
・ＷＷＷの文書を登録する場所
→ /etc/httpd.conf の「Pass」で指定
・デフォルト文書と優先順位
１．Welcome.html
２．welcome.html
３．index.html
5.3 個人のホームページ
各ユーザのサーバでのホームディレクトリの下に public_html というディレクトリを作成すると、その下に個人の html を自由に置くことが出来る。
nakasoneさんの場合なら
cd ~nakasone
mkdir public_html
この場合には、以下のようにＵＲＬを指定する
http://WWW.cec.or.jp/~nakasone
6.GIF/JPEGデータの作り方
ＧＩＦ／ＪＰＥＧフォーマットを扱えるソフトの一例
●Windowsでは
・Photo Shop（市販）
GIF : “インデックスカラー”モードで編集・保存する必要があります
JPEG : “ＲＧＢカラー”モードで編集・保存する必要があります
・LViewPro（シェアウェア）
GIF の 89a をサポートしているので、背景の透明化や
NetScape で粗→細の段階表示ができます。
・イメージビュー（Ａｉｒシリーズの画像ビュワー）
・PaintShopPro（シェアウェア）
・GraphicWorkshop（シェアウェア）
… etc.
●Macintoshでは、
・Photo Shop（市販）
・GraphicConverter
・Transparency（GIF の画像の透明化）
・GIFConverter
… etc.
著作権は大切に…
7.HTMLの高度な機能
●クリッカブルイメージ
表示されているインラインイメージをクリックすることで、対応するURLを呼び出す
WordtoWebはマップファイルを作成するためのMapEditorを持っています。
●フォーム機能（ＣＧＩ）
ユーザーからの入力を受け付ける機能
・チェックボックス
・ラジオボタン
・セレクトボックス
・テキスト入力
入力されたデータは、一般にperlなどで書いたプログラムで処理します。
（perlはUNIXでよく使われるテキスト処理言語です）
●ＨＴＭＬの拡張機能
HTML+/3.0による拡張と、Netscape拡張
・文字の点滅
・表
・バックグラウンドカラー
・テクスチャー（壁紙）
・インターレスＧＩＦ(GIF89a)
・透明化ＧＩＦ(GIF89a)
・インラインＪＰＥＧ
8.ホームページデザイン
8.1 ＷＷＷに付いて学ぶ
インターネットの情報はインターネットで手に入れましょう
例：World Wide Web Manuals
http://www.sfc.keio.ac.jp/Manual/
8.2 ＨＴＭＬの作り方を学ぶ
ＨＴＭＬで書かれたＨＭＴＬの作り方
●初心者向きHTMLガイド http://www.ntt.jp/docs/html-jman/ncsa-j.html
●HTML入門（ドラフト） http://www.lab.kdd.co.jp/technotes/html-primer.html
●もっと楽しくHTMLを http://www.sanpo.t.u-tokyo.ac.jp/people/kiki/docs/HotToFun.html
その他、雑誌の付録CD-ROMに収録されているものなど
市販本「ホームページデザイン」もおすすめ
8.3 Tips
・What's New を書きましょう
・大きすぎる画像／動画／音声には気をつけましょう
LANは10Mbps、インターネットは28,800〜64Kbps
… 64Kbpsで1Mbyteのファイルを送ると約２分かかります
→ 色数、動画サイズ、サンプリング周波数を考えましょう
→ 画像作品はアイコンを作り、クリックするとフルサイズでロードされるなど
・絵を見なくても分かる工夫→文字による十分な説明/ALT文
例： <IMG SRC="welcome.gif" ALT="ようこそ">
・長すぎるページはＮＧ
→ ページは適当な大きさに分割しましょう
・文字の大きさで強弱をつけましょう <H1..6> </H1..6>
・規模が大きくなったらツリー構造のインデックスを用意しましょう
・作者のメールアドレスを書きましょう
9.これからのWWW
●HotJavaとJava言語
・HotJavaは次世代のWWWブラウザ
・音やアニメーションを実現するアプレットを実行
→Java言語インタプリタ
・自己拡張可能なWWWブラウザ
→ヘルパーアプリケーションが不要
（HotJavaを見てみましょう。→ http://java.sun.com/）
このURLを指定すると、HotJavaのページが有ります。
現在は、Solalis2.4とWindows95/NTのための
HotJava(α版)をダウンロードすることが出来ます。
・Java言語とは
・Ｃ＋＋に良く似た言語
・HotJavaの動く環境なら機種を選ばない
・セキュリティーと安全性を重視
・JavaとNetscape
Netscape Navigator Ver2.0 はアプレット機能をサポート
10.インターネットツールの応用
10.1 自分で作るメーリングリスト
(1) 宛先ファイルを作る
メーリングリストのメンバーのアドレスを列記します
(2) (/usr/ucblib/) aliases にメーリングリスト名を書く
aliasesの最後に次の指定を書き込みます
メーリングリスト名: :include:宛先ファイル名
(3) (/usr/ucb/) newaliases コマンドを実行する
10.2 フリーソフトを探す
・WWWで使うArchie
例：http://www.wg.omron.co.jp/AA.html
●メーリングリスト作成の実際
ナカソネさんが管理する架空のメーリングリストstuffを作ってみましょう。
(1) 宛先ファイルを作る
任意のディレクトリに、任意の名前のファイルを開きます。
ここでは、ナカソネさんのホームデレクトリに宛先ファイルを作ります
cd ~nakasone ナカソネさんのホームティレクトリに移ります
vi stuff viエディタで宛先ファイル stuff を編集します
nakasone@cec.or.jp
k-kara@pub.nes.nec.co.jp
ABC112230@pcvan.or.jp
（ … 以下同様にスタッフのアドレスを列挙します）
すべて書き終わったら書き込み終了して下さい
(2) (/usr/ucblib/) aliases にメーリングリスト名を書く
スーパーユーザー(root)でログインします
エディタで、aliasesを開きの最後に次の指定を書き込みます
メーリングリスト名: :include:宛先ファイル名
cd /usr/ucblib
vi aliases
stuff: :include:~nakasone/stuff
(3) (/usr/ucb/) newaliases コマンドを実行する
newaliases