コンピュータネットワーク基礎
2005.07.01
電子メールで出席確認をします.宛先など以下の情報を用いてメールを作成し, 出席申告してください.なお,キーワードは授業中に紹介します.
提出形式
宛先 | justice@mag.shimane-u.ac.jp | |
件名 | AttendA_07-01_net_s0340** | Aクラス |
AttendB_07-01_net_s0340** | Bクラス | |
本文 |
学生番号 氏名 キーワード |
(改行) (改行) キーワードは授業中に紹介 |
注意 | 「件名」の**をそのままにしないで,必ず自分の学生番号 に修正して下さい.また,ABクラス別は指示にしたがって下さい. |
今回は,ページを記述するための言語であるHTML (Hyper Text Markup Language) について,学習します.1年生のときに「コンピュータ セミナー」を受講した人は,簡単な内容については一通り学習しているはずです. 今日の内容はその復習のようなものですが,自習の動的なページ作成では,基礎 となる通常のHTMLが記述できないと理解が難しくなりますので,注意して下さい.
ブラウザは表示しているページのHTMLで記述された「ソースファイル」を閲覧す る機能も持っています.「表示」メニューの「ページのソース」により表示でき ます.このページのソースを見てみましょう.
テキスト情報の中に< >で囲まれた記号がたくさんあります.こ のように,文章中に制御のためのコードを埋め込む記述法を「マークアップ」と 言います.リンク機能,すなわち,ハイパーテキスト機能を持つマークアップ言 語であるので,HTMLと呼ばれます.教科書の表11.1に基本的な説明がありますが, 本日のテキストでさらに補足しておきます.
各端末は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**/
|
結果はどうなったでしょうか.
もし,403エラーが出た場合には,先週の保護モード変更作業の影響で適切なモー ドになっていない可能性があります.もう一度確認してみて下さい.また,404 エラーですと,index.html ファイルを作成したディレクトリが間違っている可能性がありま す.こちらもチェックしてみて下さい.
先ほど作成したページは,次のように分解して考えると中身が分かって来ます.
|
ページの記述は「ヘッダ」と「ボディ」にわかれ,それぞれタグにより示されて います.開始タグに対して終了タグはスラッシュが加わっている点が異なります. また,終了タグが不要なケースもありますが、HTMLブラウザは基本的に厳密な動 作よりも多少の曖昧さを許容してくれるように動作するので,不完全なタグでも ページの表示自体はだいたいできるようになっています.
教室の環境で,Netscapeを利用して自分のページに含まれる日本語の文章を表示 させるためには,ヘッダ部分で文字コードを指定する必要があるようです.(ちな みに,Mozillaでは不要です.)これを行う方法は,ヘッダ部分に次のようなメタ タグを用意します.
文字の見た目を指定する方法はいくつかありますが,まずは,基本的な <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とはRed,Green,Blueの光の三原色のことで,それぞれの色の強度を256階調で 制御することにより,256×256×256で約1677万色の色を表現することが可能です.256階調を二 桁の数で表せるように16進数が使われます.表1のような感じで分かるでしょう か.
16進 | 10進 |
00 | 0 |
01 | 1 |
0F | 15 |
10 | 16 |
11 | 17 |
7F | 127 |
80 | 128 |
FE | 254 |
FF | 255 |
実際の色は二桁の16進数を3色,すなわち3回記述して全部で6桁になります.ま た,できる色は,絵の具を混ぜて色を作った経験があれば分かるように,おおよ そ表2のようになります.
元の色1 | 元の色2 | できる色 |
---|---|---|
赤 | 緑 | 黄 |
赤 | 青 | 紫 |
緑 | 青 | 青緑 |
教科書の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>のようにすると枠が太くなります が,組み合わせると以下のような例も可能です.
|
この例はNetscapeで見ると立体的に表示されますが,Mozillaの枠線表示では変 哲の無い見栄えです.複数行にわたるデータがある場合
a11 | b11 | c11 |
c12 | ||
b12 | c13 | |
a21 | b21 | c21 |
複数列にわたるデータがある場合
a11 | b11 | c11 | ||
a21 | b21 | b22 | c21 | |
a31 | b31 | b32 | b33 | c31 |
行単位で文字を中央揃えする場合
a11 | b11 | c11 | ||
a21 | b21 | b22 | c21 | a31 | b31 | b32 | b33 | c31 |
特定のセルの背景色を変更する(table属性を指定すると全体の色の指定も可能)
a11 | b11 | c11 | ||
a21 | b21 | b22 | c21 | a31 | b31 | b32 | b33 | c31 |
セルの横幅を指定する場合
a11 | b11 | c11 |
c12 | ||
b12 | c13 | |
a21 | b21 | c21 |
自分で実際にページを作る作業をしてみますが,今日のポイントは,
授業の終了20分前くらいに小テストを実施します.アナウ ンスに注意してください.また,提出は電子メールにより行いますので,メール の送信準備は忘れないでいて下さい.
Aクラス小テスト |
Bクラス小テスト |
授業の終りに宿題の説明をしますので,アナウンスに注意してください.
Aクラス宿題 |
Bクラス宿題 |