コンピュータセミナー
2002.5.24


  1. 本日の作業内容

  2. 出席確認

    最初の説明が終わったら出席確認です．パソコンの時計が合っているかを確認したら出席のメールを出してください．今 回の件名は

    seminar 5-24 attend s0240**

    です．それ以外は前回と同じです．

    なお，入力ミスがあると出席として認 められないことになりますので，慎重に行ってください．文 字はすべて1バイト文字 (半角英数字) です．途中に入るスペースは一度に一個だけと してください．スペースは全部で3個です．また，**の部分は自分の学生番号の下二桁 です．他学科の人はそれなりに修正して下さい．

  3. WWW

    今日の「インターネット」の普及はWWW (World Wide Web) によるところが大きいでしょう．それま で、電子メールやFTP，また，Gopherなどが使用されていましたが、テキストに 埋め込まれた「ハイパーリンク」の機能により参照先に自由に移動でき、画像も 扱うことができる機能により，WWWは多くの人の注目を集め、またたくまにネッ ト利用の中心を担うようになってきました．今では、音声や動画像も扱うことが でき、CGIによりインタラクティブな利用法も可能です．現在も，次々と新しい 技術が開発されており、今後も発展を続けていくことでしょう．

  4. HTML

    http://www.ecs.shimane-u.ac.jp/~nawate/linux/HTML.html

    http://www.ecs.shimane-u.ac.jp/~nawate/lecture/html/home.html

    上記のページは過去にWWWページ作成のために用意したものです．適宜参照して ください．

    • 準備

      ここでは，WWW閲覧用のページ記述言語であるHTML (Hyper Text Markup Language) についてその基本的な部分を学習し，ページ作成の実習を行うことと します．ページを作成し，Netscape の「ファイル」メニューから「ページを開 く」を選択すると，すぐに閲覧することが可能になりますが，この教室のサーバ は学科LANの中ならばページを公開するような設定が行われていますので，実際 に模擬的にサーバにアクセスしたのと同じ方法で閲覧が可能です．ただし，ペー ジを閲覧する模擬実験を行うためには、以下の手順が必要になりますので，まず はその作業から始めます．コマンド操作により行いますが，使用するコマンドは mkdir (「基礎講座」教科書p.47)と chmod (「基 礎講座」教科書p.88) です．

      
$ mkdir public_html
$ chmod 755 public_html

      上記のように public_html ディレクトリを作成し、保護モードを誰で も閲覧可能なようにしておきましょう．あとで実際に作業しますが，そこにHTMLで記述したページを index.html という名前で保存します．そうすると，Netscapeの場所入力欄 に、

      172.16.1.3/~b02**/

      と入力してアクセスできます．試しに次のようなページをエディタで作成し、表示させてみ てください．

      ページの内容補足説明
      <html>HTMLファイル開始の宣言
      <head>ヘッダ部分開始の宣言
      <title>Hoge hoge</title>上部枠に現れるペー ジタイトル
      </head>ヘッダ部分終了の宣言
      <body>本文の開始宣言
      This is a test page.<br>
      Contents is now under construction.<br>      		 ページの内容
      </body>本文の終了宣言
      </html>HTMLファイルの終了宣言

      ページの記述は「ヘッダ」と「ボディ」にわかれ，それぞれタグにより示されて います．開始タグに対して終了タグはスラッシュが加わっている点が異なります． また，終了タグが不要なケースもありますが、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>

      背景に画像を利用する方法については，グラフィックアプリケーションを練習し てからまた行うことにします．

    • 箇条書き

      このテキストのように箇条書きを利用すると論理構成がはっきりして見やすくな る場合があります．箇条書きにはいくつか種類がありますが，代表的なものを示 しておきます．

      
<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>

    • ページのソース表示

      HTMLを勉強する方法として多くの人から推奨されているのは，自分の気に入った ページをみつけて，そのタグの使い方をまねすることです．Netscapeでは，「表 示」メニューの中に「ページのソース」という項目があります．それを選択する と，現在表示しているページのソースを見ることができます．試してみてくださ い．

  5. XEmacs

    「デスクトップツール」教科書 p.116

    今後，HTMLやTeXで文書を書くようになるとgEditよりも機能が豊富なXEmacsが便 利です．しかし，XEmacsは操作体系がかなり特殊であり，また，機能が豊富すぎ てなじむまでに結構時間がかかります．それでも，少しずつ使い始めてみましょ う．

    • 起動

      ターミナルから

      $ xemacs &

      として起動します．不便だと思ったらタスクバーに登録しましょう．方法は，別 ページにあります．

    • ウィンドウサイズ

      XEmacsは図1に示す画面下部のモードラインとミニバッファに重要な情報が表示されます． そのため，デフォルトで起動する画面サイズでは下が切れた状態になってしまっ て問題があります．手動で直せば良いのですが，毎回行うのは面倒です．そこで， 設定ファイルを修正しておきましょう．まずは，設定ファイルの入手です．以下 のコマンドを実行してください．

      図1 XEmacsの画面

      $ cp /etc/skel/.emacs* ~
      $ cp /etc/skel/.xemacs.el ~

      次に，起動しているXEmacsで .xemacs.el というファイルを開きます． メニューボタンにある「Open」をクリックして現れるダイアローグの中で， .xemacs.el ファイルを選択したら，「Enter」キーを押します． 「OK」ボタンを押すのではないことに注意しましょう．ファイルが開い たら次の赤字の部分のようにウィンドウの高さを修正します．

      
(setq default-frame-alist (append (list '(cursol-color . "darkred")
                                        '(width . 80)
                                        '(height . 35))
                                   default-frame-alist))

    • 選択領域の削除方法

      デフォルトのXEmacsでは，マウスによるドラッグで領域を選択して「BkSp」キー や「DEL」キーを押しても領域が消 去されません．Ctrl + w という操作で消えるのですが，慣れ ないうちは不便です．そこで，先ほ どの .xemacs.el にさら に次の設定を追加しておきましょう． 場所は一番最後で構いません． 
      
(require 'pc-select)
  (pc-select-mode)

(defun delete-key-mysetting ()
  (interactive)
  (if (region-exists-p) ;; region-exists-p is XEmacs only
      (progn
	(delete-region (point) (mark)))
    (progn
      (delete-char 1))
  )
)

(global-set-key [delete] 'delete-key-mysetting)

      この修正は，最近 Linux ユーザのメーリングリストで紹介されたものです．

      以上の修正が終わったら，保存して一度XEmacsを終了させます．次に起動したと きには，これまでの修正が反映されています．

    • 日本語モード

      XEmacsで日本語モードに切り替えるときは，これまでの，Shift + Space ではなく，Ctrl + \ により行ってく ださい．XEmacsではkinput2を経由しないで日本語入 力を行えます．

    • YaHtmlモード

      XEmacsで拡張子が .html のファイルを読み込むと自動的に yahtml モードになります．このモードではタグによる色分けやカッコの整 合などを見やすく表示してくれますが，入力中に改行すると意図しないところに 字下げが来てしまうことがあります．あきらめて使ってください．

  6. 本日の実習

    エディタでHTMLファイルの練習を行ってください．

  7. 宿題

    授業の終りに宿題の案内（AクラスとBクラス別々）を出しますので，アナウンスがあれば指示に従ってくだ さい．

目次ページへ戻る