- ブラウザの起動
- 「編集」メニューの「設定」を選択
- 「Navigator」の三角をクリックしてメニューを展開
- 「アプリケーション」を選択
- 「新規」ボタンをクリック
- 図1に示すように入力
説明：Portable Document Format
MIMEタイプ：application/pdf
拡張子：pdf,\
アプリケーション：/usr/local/Acrobat5/bin/acroread %s
図1 PDF閲覧用設定内容
この授業では初回からweb版のテキストを使用しているので，ブラウザの起動や 使用法についてはすでに習得していることと思います．現状ではMozillaの安定 度がいまいちですので，Netscapeの方が使いやすいかもしれません．また， Netscapeを起動している状態でMozillaを起動すると，プロファイルの問題で正 常に利用できない場合もあるようです．注意して下さい．
また，ターミナルから利用できるテキストベースのブラウザと言うものも存在し ています．何かの情報をちょっと見るだけ，と言う状況ではこの方が早くて便利 です．例えば，ターミナルで
$ w3m www.ecs.shimane-u.ac.jp/~nawate/lecture.html
のように入力すると，ターミナルで利用できるブラウザが起動します．リンクを タブで移動する，スクロールは上下矢印キー，終了するには，Qを押す，などの基本的な知識があれば利用で きます．
ページにアクセスするためにそのページのアドレスを指定するものがURLです． WWWを利用してさまざまな情報を入手することが出来ますので，お互いに情報を やりとりするための約束事(プロトコル)もいくつかあります．代表的なものが Hyper Text Transfer Protocol (HTTP) です．URLではプロトコル名に続いてペー ジの所在を入力することになっていますので，このテキストであれば，
http://www.ecs.shimane-u.ac.jp/~nawate/lecture/seminar03/5-23/5-23.html
となります． :// についてはおまじないだと思って下さい．最初のス ラッシュまでがサーバの名前になります．そこからはサーバのディレクトリ構造 を反映したパスが続いています．ホームディレクトリを意味するチルダを経由し て，各ユーザのWWWページ用ディレクトリに行くと，後は通常のUNIX表記の階層 構造になっています．
ブラウザでアクセスする手段はHTTPが基本ですので，その部分は省略可能です． ブラウザのURL入力欄に単に，
www.ecs.shimane-u.ac.jp/~nawate/lecture.html
のように入力すれば，プロトコルはHTTPを利用するようになります．他に使用す る頻度が高いものに File Transfer Protocol (FTP) があります．URL入力欄に，
と入力すると，ファイル転送用のプロトコルでページを開きます．もう一つがパ ソコン上の「ローカル」なファイルにアクセスする手段で，例えば，先週の小テ ストで作成したSylpheedの画像ファイルにアクセスするには，それがホームディ レクトリにあるとすると，
file:///virtual/home/b03**/folder-s0340**.jpg
をURL入力欄に入力します．スラッシュが一本多いことに注意して下さい．情報 科学概論で作成したスクリプトも表示できます．その際には，
file:///virtual/home/b03**/script/hoge.rb
のようになります．
教科書にあるように，履歴機能，ブックマーク機能などがありますので，必要に 応じて利用して下さい．Netscapeの履歴は「ジャンプ」メニューにより呼び出せ ますが，一度終了すると消えてしまうのでちょっと不便です．Mozillaの方は左 側の「Sidebar」にある履歴タグをクリックすると古いものも呼び出せます．
複数のページを同時に開いて比較や参照をしたい場合には，ウィンドウを他に作 れば可能です．教科書の10.2.3を参考にしてください．
設定の変更により動作を変えることが出来ますが，現状では余り変化させない方 が無難でしょう．起動時に特定のページを読み込みに行ったり，開いたりするの が欝陶しいならば，空白ページを最初に表示するようにしておくことで回避でき ます．常時接続ではないパソコンを利用している場合には必ず空白ページにして おきましょう．
最近ではWWWページの中にPDF形式のファイルがあることが多くなっています． PDFとは Portable Document Format のことで，Adobe社が PostScipt を元に作 成したページ記述形式です．利用者の環境に依存しないで作者の意図どおりに表示される ので，最近多く利用されるようになって来ました．教室の環境でも，Adobe社の Acrobat Reader を使用してPDFファイルの閲覧がMozillaでは最初から可能です． Netscapeでは以下の設定が必要です．また，ページ内で の表示は出来ません．
Acrobat Reader をWWWブラウザから利用するための，Netscapeでの設定以 下のようになります．参考にしてください．
WWWページはテキストデータ以外の画像や音声，動画まで扱えるために近年爆発 的に普及しました．ここでは，ページを記述するための言語であるHTML (Hyper Text Markup Language) について，学習します．
- 大まかな内容
ブラウザは表示しているページのHTMLで記述された「ソースファイル」を閲覧す る機能も持っています．「表示」メニューの「ページのソース」により表示でき ます．このページのソースを見てみましょう．
テキスト情報の中に< >で囲まれた記号がたくさんあります．こ のように，文章中に制御のためのコードを埋め込む記述法を「マークアップ」と 言います．リンク機能，すなわち，ハイパーテキスト機能を持つマークアップ言 語であるので，HTMLと呼ばれます．このページのソースでは分かりにくいところ もありますので，学習用に作ったページの方を見てみましょう．
http://www.mag.shimane-u.ac.jp/~nawate/demo.html
を見ると，簡単な紹介があります．このページのソースを表示して眺めてみましょ う．
各端末はwebサーバ機能を有していますので，自分の作成したページをブラウザ で表示させることも可能です．そのための準備をしていきます．まずは，ディレ クトリの作成です．一般的にUNIXサーバではホームディレクトリに public_html と言う名前のディレクトリを用意して，そこに， index.html という名前のファイルを置いておくと，参照でき るようになっています．そこで，先ずはディレクトリを用意しましょう． ターミナルで次のコマンドを実行します．
$ mkdir ~/public_html
作成が終わったら，次にindexファイルの作成です．ディレクトリを移動しましょ う．
$ cd ~/public_html
そこまで終わったら，テキストエディタを起動して実際にファイルの作成を行な います．gEditを起動しましょう．
$ gedit &
エディタにとりあえず以下の内容程度を入力します．
<html> <head> <title> Test page </title> </head> <body> Test index page </body> </html> |
このファイルを index.html という名前で保存します．保存するディ レクトリが先ほど作成した public_html であることを確認してくださ い．
今度はブラウザで表示させます．URL欄に以下のように入力しましょう．
|
localhost/~b03**/
|
結果はどうなったでしょうか．
先ほど作成したページは，次のように分解して考えると中身が分かって来ます．
|
ページの記述は「ヘッダ」と「ボディ」にわかれ，それぞれタグにより示されて います．開始タグに対して終了タグはスラッシュが加わっている点が異なります． また，終了タグが不要なケースもありますが、HTMLブラウザは基本的に厳密な動 作よりも多少の曖昧さを許容してくれるように動作するので，不完全なタグでも ページの表示自体はだいたいできるようになっています．
文字の見た目を指定する方法はいくつかありますが，まずは，基本的な <font></font>タグを利用してみましょう．基本的な使用法は開始と終了のタグ で変化させたい文字列を囲みます．そして，開始タグの中に属性を埋め込みま す．たとえば，size, color などがあります．
<font size=+2>Large </font> character<br> <font color="red">Red </font> character<br> <font size=+3 color="red">Red LARGE </font>character<br> |
また，<font></font>タグは「入れ子」にもできます．
<font size=+3><font color="red">Red characters</font> in large characters</font><br> |
なお，文字の色は上のような名前以外にRGB値で指定することも可能です．RGBと は赤緑青の光の三原色の頭文字で，その各要素の光の強さを0-255までの階調で 指定しますが，一般的に16進数が利用されます． 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,fの16の数字と記号により表現します．たとえ ば，黒は#000000で，白は#ffffffのようになり，赤ならば， #ff0000，青は#0000ffというよう になります．中間の値を自分で指定するとどのような 色かが分かります．色の指定では#で始めてください．
エディタ中で文章を改行してもブラウザには無視されます．HTMLのタグとして改 行を入れる必要がありますが，単なる改行と段落を利用したものの2種類が利用 可能です．
単なる改行であれば<br>タグにより実現できます．タグを入れ る度に改行が行われます．また，本来は段落指定で利用する<p> も空行を含む改行を入れることが可能です．ただし，<p>は2つ 以上続けても一つ分の段落改行しか入りません．
文字をウィンドウの中央や右にそろえる機能があります．中央にそろえるのは簡 単な<center></center>により可能です．また，このタグ は画像なども中央にそろえることが可能です．しかし，右や左は段落ごとに行う ことになります．段落を指定するのは<p></p>タグで，そ の属性として文字揃えを行います．
<center>Align characters at center of the page</center> <p align="right">Text goes to right by this tags</p> <p align="left">This is default alignment</p> |
ページにアクセントをつけたり区切りを明示するための横線を引くことができま す．属性に，画面上の線の横幅，厚み，色(Netscapeでは対応していません)などが指定できます．横幅や厚みの指 定は整数値で行いますが，その値は画面のピクセル値になります．目で見るのは なかなか難しいですが，画面の色を形成する一つの塊がピクセルで，通常の表示 では1インチ (2.54cm) 内に72個の画素があります．このような場合を72dpiとい います．
<hr> <hr width=300 size=5> <hr width=80% color=#eeaaff align="right"> |
<hr>だけだと，デフォルトの値で画面の横幅いっぱいの線を引きます．
HTMLの最大の特徴はハイパーリンクです．ページ上の特定の部分をクリックする だけで，リンク先のページ内容が表示されます．
<a href="http://www.ecs.shimane-u.ac.jp">Link to ECS page</a> |
ページ全体の背景や文字の色をコントロールするには<body>タ グの属性として指定します．
<body bgcolor="white"> Black text on the white page<br> </body> |
文字の色については，通常の文字を text 属性で，リンク部分を link で，既に訪れたリンクは vlink ，クリックした瞬間の色を alink 属性で指定します．しかし，よっぽ ど慎重に設定しないと非常に見づらいページになりま す．
<body bgcolor="white" text=#333333 link=#006666 vlink=#553366 alink=#888822> Grey text on the white page<br> </body> |
背景に画像を利用する方法については，このテキストのソースを表示してみれば 分かるように，<body background="hoge.jpeg">のように画像ファイ ルを背景として指定します．
このテキストのように箇条書きを利用すると論理構成がはっきりして見やすくな る場合があります．箇条書きにはいくつか種類がありますが，代表的なものを示 しておきます．
<ol> <li>List index with Number <li>Next index </ol> <ul> <li>List index with symbol <li>Next index </ul> |
見出しの数字や記号は属性指定により変更可能です．たとえば，以下のようなも のがあります．
<ol type="i"> <li>List index with Number <li>Next index </ol> <ul type="square"> <li>List index with symbol <li>Next index </ul> |
<ol>タグの type として指定できるのは，1 A a I i の5種類でデフォルトは 1 です．また，<ul>タグではdisc circle square が利用できます．また，リスト形式は入れ子にもできます．
<ol> <li>The first layer index with Number <li>Next index <ul type="square"> <li>The second layer index with symbol <li>Next index <ol type="a"> <li>The third layer of index </ol> <li>The end of the second layer </ul> </ol> |
文字を太くしたり，斜体にしたり，下線を引いたりすることも可能です．それぞ れ，以下のタグで囲むことにより実現できます．
<b>Thick text</b><br> <i>Italic text</i><br> <u>Text with underline</u><br> |
AクラスとBクラス 別に小テストを行いますので，アナウンスに注意して下さい．
AクラスとBクラス 別に宿題を出しますので，アナウンスに注意して下さい．