コンピュータネットワーク基礎
2004.7.9

Back to index page

  1. 本日の作業内容



  2. 小テスト

    授業の最初に AクラスBクラス 別の小テストを実施します.

  3. HTML

    今回は,ページを記述するための言語であるHTML (Hyper Text Markup Language) について,学習します.1年生のときに「コンピュータ セミナー」を受講した人は,2002年日韓共催ワールドカップの星取表を作成した 経験が有るので,覚えている人も多いでしょう.今日の内容はその復習のような ものです.

    • はじめに

      • ソースの閲覧

        ブラウザは表示しているページの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 &

      • indexページの作成

        エディタにとりあえず以下の内容程度を入力します.

        <html>
        <head>
        <title>
        Test page
        </title>
        </head>
        <body>
        Test index page
        </body>
        </html>
        

        このファイルを index.html という名前で保存します.保存するディ レクトリが先ほど作成した public_html であることを確認してくださ い.

        今度はブラウザで表示させます.URL欄に以下のように入力しましょう.

        localhost/~b03**/

        結果はどうなったでしょうか.

        もし,403エラーが出た場合には,先週の保護モード変更作業の影響で適切なモー ドになっていない可能性があります.もう一度確認してみて下さい.また,404 エラーですと,index.html ファイルを作成したディレクトリが間違っている可能性がありま す.こちらもチェックしてみて下さい.

    • 概略

      • ページの内容

        先ほど作成したページは,次のように分解して考えると中身が分かって来ます.

        ページの内容補足説明
        <html>HTMLファイル開始の宣言
        <head>ヘッダ部分開始の宣言
        <title>Test page</title>上部枠に現れるペー ジタイトル
        </head>ヘッダ部分終了の宣言
        <body>本文の開始宣言
        Test index page ページの内容
        </body>本文の終了宣言
        </html>HTMLファイルの終了宣言

        ページの記述は「ヘッダ」と「ボディ」にわかれ,それぞれタグにより示されて います.開始タグに対して終了タグはスラッシュが加わっている点が異なります. また,終了タグが不要なケースもありますが、HTMLブラウザは基本的に厳密な動 作よりも多少の曖昧さを許容してくれるように動作するので,不完全なタグでも ページの表示自体はだいたいできるようになっています.

      • 文字コードの指定

        教室の環境で,Netscapeを利用して自分のページに含まれる日本語の文章を表示 させるためには,ヘッダ部分で文字コードを指定する必要があるようです.(ちな みに,Mozillaでは不要です.)これを行う方法は,ヘッダ部分に次のようなメタ タグを用意します.

        <meta http-equiv="Content-Type" content="text/html;charset=EUC-JP">

      • 文字の大きさや種類

        文字の見た目を指定する方法はいくつかありますが,まずは,基本的な <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というよう になります.中間の値を自分で指定するとどのような 色かが分かります.色の指定では#で始めてください.

        教科書のp.125,表11.1には見出しの文字の大きさを変更するタグとして <H1></H1>から<H6></H6>まで方法が紹介されています が,これは見出し用のタグなので,一般的には上で紹介した <font></font>を使います.

      • 改行

        エディタ中で文章を改行してもブラウザには無視されます.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>
        

      • 表の基本

        表は<table></table>により行います.表は英語でtable ですので,そのままです.また,行のことをrow,列のことをcolumnと言います ので,それにちなんだ属性の名前がでてきます.行を制御するタグは <tr></tr>で,個々のセルは <td></td>で記述します.セル独自の属性変更は <td>で行い,行に関するものは<tr>に 加えます.<table>に記述すると表全体に反映します.加えられる属性は背景色や文字色,行揃えなどほとんどのも のが可能になります.

        枠線についても細かい指定が可能です.しかし,今は枠線の有無と太さだけ説明 しておきます.また,全体にわたる属性指定の場合に限定しておきます.枠線は <table>タグの属性として border としておく と表示されます.また,border=5 のようにすると,枠線の太 さを指定できます.次に挙げるのは最も基本的な表組みの例です.

        
        <table border>
        <tr><td>a11</td><td>a12</td><td>a13</td></tr>
        <tr><td>a21</td><td>a22</td><td>a23</td></tr>
        <tr><td>a31</td><td>a32</td><td>a33</td></tr>
        <tr><td>a41</td><td>a42</td><td>a43</td></tr>
        </table>
        

        表示結果は自分で確かめてみてください.

      • 表における終了タグの省略

        表に関連するタグでは終了タグを省略できるものもあります.たとえば, <td>タグは終了タグを省略しても通常の場合は動作しま す.また,特殊な例では,<tr>タグを省略して, </tr>タグの代わりに<tr>タグを利用す ることも可能です.終了タグを省略するとソースが短くなり,編集中に 見やすくなりますが,論理構成をしっかり確認しないと間違いの元にな りますので注意してください.

      • 様々な表の例

        以下に少し構成の変った表の例を示します.タグの組み方については自分でソー スを表示させて確認してください.

        複数の表を組み合わせて視角効果を持たせる

        罫線を入れた場合には罫線の太さを変えることにより印象が異なります.擬似的 にボタンのように見せることも可能です.<table border=10></table>のようにすると枠が太くなります が,組み合わせると以下のような例も可能です.

        Pyramid?

        この例はNetscapeで見ると立体的に表示されますが,Mozillaの枠線表示では変 哲の無い見栄えです.

        複数行にわたるデータがある場合

        a11b11c11
        c12
        b12c13
        a21b21c21

        複数列にわたるデータがある場合

        a11b11c11
        a21b21b22c21
        a31b31b32b33c31

        行単位で文字を中央揃えする場合

        a11b11c11
        a21b21b22c21
        a31b31b32b33c31

        特定のセルの背景色を変更する(table属性を指定すると全体の色の指定も可能)

        a11b11c11
        a21b21b22c21
        a31b31b32b33c31

        セルの横幅を指定する場合

        a11b11 c11
        c12
        b12c13
        a21b21c21

  4. 実習作業

    自分で実際にページを作る作業をしてみますが,今日のポイントは,

    • 背景
    • 文字の色
    • 箇条書

    です.自分できちんと確認しておくようにしましょう.

  5. 宿題

    授業の終りに宿題( AクラスBクラス )の説明をしますので,アナウンスに注意してください.


目次ページへ戻る