更新

HTMLタグで作るWeb教材

弘前大学教育学部　小山智史
目次

1. はじめに
2. Webページの作成と公開
3. さまざまな拡張
4. フレーム
5. HTML記法と代表的なHTMLタグ

1. はじめに

　ホームページのデザインはHTMLタグを用いて表わされています。HTMLはHyper Text Markup Languageの略で、Webのページ記述言語のことです。

　HTMLファイル(例えばindex.htm)はWebサーバに置かれています(下図)。パソコンのブラウザ画面でリンクの箇所をクリックするなどすると、パソコンからサーバに該当するファイルの内容を送るよう要求信号が送られます(図中(1))。これを受けて、サーバはその内容(HTMLソース)をパソコンに送ります(図中(2))。パソコンのブラウザソフトは、これを受け取り、タグを解釈し、表示画面を作り出します(図中(3))。

　同じHTMLファイルでも、ブラウザによって作り出される画面は多少異なります。しかし、このテキストで扱っている範囲では、その違いが問題になることはありません。また、タグの表記法は、ここでは一部簡略化したものを用いており、厳密なものではないことをお断りしておきます。HTMLの厳密な仕様はW3Cという組織によって決められています(現在はHTML4.01)。

　多くの方は、ここで示したようなHTMLタグを使ってホームページを作成することは無いかもしれません。しかし、日頃見ているホームページがこのように表わされているということを理解することは、さまざまな場面で生かされると思います。

2. Webページの作成と公開

　弘前大学の教育用システムでは、 WドライブにHTMLファイル(○○.htm)を置くと、自動的にWebサーバから公開されるようになっています(通常はWebサーバにファイルを転送する操作が必要)。公開の範囲は学内に制限されています。このテキストでは、Wドライブに直接HTMLファイルを作成するので、作成と同時に公開されるということを覚えておいてください。

2.1 Webページの作成と更新

　それでは、早速ホームページを作り始めることにしましょう。まず「メモ帳」を起動し、次の内容を入力し、W:￥index.htmとして保存します。メモ帳で保存する場合は、[ファイル][名前を付けて保存]操作の後、「保存する場所」をWドライブ とし、ファイルの種類を「すべてのファイル」とし、ファイル名をindex.htmとします。メモ帳のウィンドウは開いたままにします。

　ブラウザを起動し、ドラッグ＆ドロップまたはメニューの[ファイル][開く]の操作でこのホームページを表示します。「私のホームページ」が表示されます。メモ帳とブラウザのウィンドウの表示位置や大きさを調整して、下図のように両方のウィンドウが見れるように配置してください。

　ブラウザに「何も表示されない」と思うかもしれませんが、タイトルバーを見ると「私のホームページ」と表示されているのがわかります。これが、今のところこのホームページのすべてです。このように、

　このタイトル文字は、単にタイトルバーの表示に使われるだけでなく、このページを見た人が気に入ってブックマーク(またはお気に入り)に登録する時には、見出し文字として使われます。ですから、実は「私のホームページ」というのは適切な表現ではないのです。

　<title>や</title>はブラウザに指示を与えるための、予め決められた命令語で、これがHTMLタグです。

(練習) 「私」の部分を自分の名前に変えて、ブラウザの表示を確認しなさい。ページの内容を改訂するには、(1)メモ帳でHTMLファイルを修正し、(2)上書き保存し、(3)ブラウザで再読み込みします。

(練習) このページをブックマーク(またはお気に入り)に登録し、一覧中の見出し文字がどうなっているか確認しなさい。また、このように登録しておけば、次回からこのページを簡単に呼び出すことができます。

2.2 見出し

　ページの先頭に見出しを表示してみます。2行目を以下のように追加します。

上書き保存し、ブラウザで再読み込みすると、見出し文字の表示を確認できます。

このように、

見出し文字の大きさは 1〜6で指定でき、h1 が最も大きく、 h6 が最も小さくなります。

(練習) 見出し文字の「私」を自分の名前に変えて、ブラウザの表示を確認しなさい。同様に、見出しの大きさを「h1」〜「h6」に順次変更し、表示を確認しなさい。この時、<h1>〜</h1>のように対で変更してください。

2.3 改行と段落

　文章など、単純な文字表示について見てみましょう。3行目を以下のように追加してみます。

上書き保存し、ブラウザで再読み込みすると、次のようになっています。

　ここで、メモ帳で「ようこそ」の後を「改行」し、上書き保存して、ブラウザで再読み込みしてみてください。ブラウザの表示に変化はありません。HTMLテキスト中で改行しても、ブラウザ画面では改行は起こりません。

　次のように、<br>タグを挿入してみましょう。

　以下のようになります。

少し長い文章が続くような場合には、各段落を<p>と</p>で囲みます。段落と段落の間は改行され、行間が少し広く表示されます。

(練習) 改行の位置を「ようこそ」の後から「ようこそ私のページへ」の後に変更しなさい。

(練習) メモ帳で、「ようこそ」と「私のページへ」の間に半角スペースを入れて、ブラウザの表示を確認しなさい。同様に、全角スペースを入れて、ブラウザの表示を確認しなさい。半角スペースは改行と同様にブラウザの表示に影響を与えません。全角スペースは日本語文字のひとつであるため、「空白」として表示されます。

2.4 画像の表示

　ページ中に画像を表示してみます。以下のように追加します。また、ここで使用する画像ファイルは P:￥literacy￥sample.gif にあるので、HTMLファイルと同じ場所(Wドライブ)にコピーしておきます。他の画像ファイルを用いても構いません。

　上書き保存し、ブラウザで再読み込みすると、画像の表示を確認できます。

　このように

　Webページで用いる画像は、JPEGファイル(○○.jpg)またはGIFファイル(○○.gif)を用意します。ペイントで作成したBMPファイル(○○.bmp)などは、これらの画像ファイルに変換してから利用します。また、画像の大きさは必要最小限にします(目安は数十キロバイト)。PhotoEditorやPictBearなどのソフトを使うと、画像の大きさを変えたり、JPEG形式やGIF形式に変換して保存することができます。

　さて、ブラウザで表示した画像の上にマウスポインタを置くと、「サンプル画像」のように「alt=」の箇所に記載した説明文字が一時的に表示されることに気付きます。視覚障害者は画像を見ることができないので、この説明文字を合成音声で読み上げて、これを手掛かりに情報を得ています。従って、ここに記載する説明文字は的確な表現となるように吟味することが重要です。

　「画像に代替文字を付ける」ことは、障害者にも利用できる情報提供を心掛ける際の重要事項のひとつです。このようなWebアクセシビリティに関して2004年にはJIS規格が制定されています。

(練習) sample.gifの代わりに、デジタルカメラで撮影した画像(通常JPEGファイル)やペイント・ドローのソフトで描いた図(BMPファイルはJPEGやGIFに変換)をホームページに貼りつけてみなさい。altの記載も適切な表現に変更しなさい。なお、この画像ファイルを含め公開するすべてのファイルの名前は日本語を使わずに英数字にしてください。

(練習) 表示画像のサイズを<img src=... alt=... width=240>のようにタグの中のオプションで調整してみなさい。この「240」の部分の単位はピクセルです。「width=80%」のように、ブラウザの幅に対するパーセントで指定することもできます。なお、巨大な画像をこの方法でサイズ調整することは好ましくありません。巨大なデータはそのまま転送されるからです。適切なサイズ(例えば幅が320〜640ピクセル程度)でファイルを用意し、ネットワークへの負荷を極力軽減すべきです。

2.5 センタリング(中央揃え)

　特に指示をしない限り、通常はブラウザ画面に「左寄せ」で表示されます。画像を中央揃えにしたい場合は、次のようにします。

　このように

(練習) 画像に加えて「ようこそ私のページへ」の表示もセンタリングしてみなさい。

(練習) 「右寄せ」で表示したい場合は、その部分を<div align=right>と</div>で囲みます。試してみなさい。

2.6 箇条書き

　箇条書きの部分を次のように追加してみましょう。

　表示は以下のようになります。

　このように

　<ul>〜</ul>の代わりに<ol>〜</ol>とすると「番号付きの箇条書き」となります。

　ここで、メモ帳に入力する際に「<ul>」と「</ul>」の行頭を揃え、「<li>」の箇所は字下げ(段づけ)していることに注目してください。改行や半角スペースやタブはブラウザの表示に影響しないので、これはHTMLソースを見易くするための工夫のひとつです。このような字下げ(段づけ)はプログラム作成時にも用いられ、インデントと呼ばれます。これにより、「<ul>」の対となる「</ul」の書き忘れを防止できますし、以下に示す入れ子構造の場合は「<li>」がどのレベルの項目かの見通しが非常によくなります。

　次のように入れ子構造の箇条書きにすることもできます。

(練習) 「趣味:」の箇所に「番号付き箇条書き」で複数の項目を記入してみなさい(入れ子構造に注意)。インデントは、半角スペースでもよいのですが、ここでは「タブ」を使ってみなさい。

2.7 Webページの公開

　W:￥index.htmは、パソコンから見ればローカルファイルの位置付けですが、Webサーバによってインターネット上に自動的に公開される仕組みになっています。このページのURLは、

です。「h99p9999」の箇所は各自のユーザ名です(「~」を忘れないこと)。

　ブラウザ画面上部の「場所(アドレス)」の欄にこのURLをキー入力すれば、そのページを表示することができます。友達にこのURLを教え、見てもらいなさい。また、友達のページも見てみなさい。「公開」されていることが実感できます。このページ(index.htm)はこの授業専用のものではありません。自分のトップページとして各自の責任において自由に作成してください。

　このように、Webサーバに置かれたページは不特定の人が閲覧することになり、通常であれば世界中どこからでも見ることができます。したがって、

などには十分注意してください。

　Webページは公開する著作物ですから、「誰が責任を持って作ったのか」を明示することも重要です。その意味では、作者の名前や連絡先(例えばメールアドレス)を記載することが望ましいのですが、最近はメールアドレスを公開するとさまざまないたずらメールが届く原因ともなり、困った問題となっています。

　また、ここに記載した情報がどの程度新鮮かを示すために、必ず更新日を掲載するようにします。

　ここでは、以下のように更新日と連絡先(メールアドレス)をページ末尾に掲載してみます。ページを更新した時には「更新日の更新」も忘れずに行ってください。

　ここで、

　画面表示は次のようになります。

2.8 ページのリンク

　Webページの最大の特徴は、ページとページのリンクにあります。互いにリンクされたテキストはハイパーテキストと呼ばれます。

　ページの末尾に、次のように「他のページへのリンク」を作ってみます。

　「弘前大学のページへ」の箇所には「http://www.hirosaki-u.ac.jp/」というアドレス(URL)へのリンクが設定されます。この例のように、アドレスの末尾が「/」で終了する場合は「index.htm」や「index.html」というファイル名が仮定されます(サーバによって別のファイル名が仮定される場合もあります)。

　「練習のページへ」の箇所には「literacy.htm」というファイルへのリンクが設定されます。この例のように、同じ場所にあるファイルのアドレスはファイル名だけで構いません。

　下図のように、リンク箇所をクリックするとリンク先のページが表示されるようになります。literacy.htmはまだないので、「練習のページへ」をクリックすると「Page Not Found」の表示が現れるかもしれません。

　このように、

　以下にURLの例を示します。弘前大学内には複数のWebサーバがあり、大学のWebサーバ、教育用システムのWebサーバ、各学部のWebサーバがそれぞれ別途設置されています。

　最後に、3人で分担してページ群を作り、互いにリンクしてひとつの作品(きのこのページ)を作る例を示します。次のように分担するものとします。

これらのファイルは分担者各自の Wドライブに置きます。各自のページ(index.htmやliteracy.htm)の中では のように各自のページにリンクさせ、XXXさんのkinoko.htmの中では のようにリンクします。下図に、各ページの関係とリンクの方法を示します。

(練習) 各自のホームページに所属学部や学科へのリンクを加えなさい。

(練習) 友達のページや、興味を持った国内および海外のページに、各自のホームページからリンクを張って簡単な紹介文をつけなさい。

3. さまざまな拡張

3.1 練習用ページの増設

　Wドライブに、練習用ページとして以下のようにliteracy.htmを作りなさい(更新日や名前やメールアドレスはそれなりに変更)。

　このファイルが用意されれば、先程のindex.htmの「練習のページへ」の箇所をクリックすることによりこのページが表示されるようになります。

(練習) literacy.htm の内容とブラウザの表示を見比べながら、HTMLタグの役割を復習しなさい。また、「私のホームページへ」「友達のページへ」「教育用システムのページへ」「弘前大学のページへ」の箇所にそれぞれ適切にリンクを設定しなさい。

3.2 文字の色と大きさ

　表示色は、black, blue, red, yellow, maggenta, green, white, orange, lime, pink, ... などさまざまな色を指定できます。

　文字サイズは1が最少で7が最大です。

　入れ子構造にすればより大きな(または小さな)文字サイズにすることができます。

　なお、意味も無く文字の色や大きさを変えても、良い印象を与えません。

(練習) 「これは赤」と「これは黄色」の箇所がそれぞれの色で表示されるようにしなさい。

(練習) 「サイズは5」の箇所がその大きさで表示されるようにしなさい。

(練習) 「もっと大きく」と「もっと小さく」の箇所がそれぞれ適切な表示となるようにしなさい。

3.3 音声や音楽のリンクと埋め込み

(WAVEファイルの作成) ... 音声を録音するには、Audacityなどのソフトを使います。ここではモノラルマイクで録音しますから、画面右上の「2(Stereo)Input」を「1(Mono)Input」に変更しておきます。上手に録音するコツは、「波形がクリップしない程度になるべく録音レベルを上げる」ことです。

録音した波形を見ると、録音開始と終了の箇所に、雑音や無音区間があると思います。この不要な部分は、マウスのドラッグ操作で範囲指定し、[編集][切り取り](またはCtrl+X)で削除できます。次に、[エフェクト][正規化]の操作で、適切な音量に加工します。

　このまま保存すると「CD並みの品質」となり、ファイルサイズが大きくなってしまうので、画面左下の「プロジェクトのサンプリング周波数(Hz)」の箇所を[44100]から[8000]に変更した後、[ファイル] [書き出し]を選び、「ファイルの種類」を「WAV(Microsoft)16bit PCM 符号あり」にして「hello.wav」の名前で保存します。

(音声ファイルへのリンク)... 練習ページliteracy.htmからこの音声ファイルにリンクするには次のようにします。

「声でご挨拶」をクリックすると音声が再生されます。

(Webページへの音声の埋め込み)

　リンクではなくページ中に音声を埋め込みたい場合は、次の内容をページのどこかに書き加えます。

「hidden=true」は「操作パネルは見えないようにする」という指示で、省略すると操作パネルが表示されます。この方法では、このページを表示した時に毎回音が再生されるので、煩わしく感じられることも少なくありません。

(音楽ファイルのリンクと埋め込み)... 音楽はMIDIファイル(○○.mid)で用意します。MIDIファイルはサクラ(フリーソフト)などの音楽用ソフトで作ることができます(このソフトは「ドレミードレミー...」のように楽譜情報を文字で入力します)。リンクや埋め込みの方法は音声ファイルの場合と同様です。

(練習) 以下のように、「画像と音だけのページ」をいくつか作り、互いにリンクしてみなさい。

3.4 動画のリンクと埋め込み

　まず、動画ファイル(MPG形式)をliteracy.htmと同じ場所に用意します。ここでは、「hello.mpg」という名前のファイルとします。

(動画ファイルへのリンク)... 練習ページliteracy.htmからこの動画ファイルにリンクするには次のようにします。

「動画の表示」をクリックすると動画が再生されます。

(動画の埋め込み)... リンクではなく、ページ中に動画をページ中に埋め込む場合は、表示したい箇所に次のように書いておきます。

4. フレーム

　Wドライブに、次のHTMLファイルmomo.htmを作りなさい。

　これは、「別途用意したフレーム記述ファイルmenu.htm, chap1.htmを、20%対80%の比率に分割(縦割り)した2つのフレームに表示しなさい」ということを指示したファイルです。右側に表示される2つ目のフレームには、後にその箇所を特定するために「rf」という名前を付けています。横割りに分割する場合はcolsの代わりにrowsとします。

　各ファイルは次のように用意します。

　ファイルを用意したら、ブラウザで確認しなさい。左側のフレームmenu.htmの「第2章」の箇所をクリックすると、targetで指定したrf(右側のフレーム)にchap2.htmが表示されます。

(練習) 「ももたろう」の第3章,第4章,...を追加しなさい。また、各章に画像や音声を貼り付けて、「マルチメディア絵本」を作ってみなさい(例)。

(練習) 「ももたろう」を参考に、オリジナルの「マルチメディア絵本」を作ってみなさい(例)。

5. HTML記法と代表的なHTMLタグ

HTML文書の構造 
<html>
  <head>
    <title>...</title>など
  </head>
  <body ...>
    HTML文書の本体
  </body>
</html>
このテキストでは、 
<html></html>, <head></head>, <body></body>
を省略した簡略な書き方を用い、「<title>...</title>」と「HTML文書の本体」のみとしている。
文字サイズと行揃え 
<hn> 〜 </hn>
〜を見出し文字(大文字)で表示(nは1から6で1が最大)
<center> 〜 </center>
中央揃え
<div align=right> 〜 </div>
右揃え
<big> 〜 </big>
<small> 〜 </small>
〜を相対的に大きい(小さい)文字サイズで表示
箇条書き 
<ul>
  <li> 〜
  <li> 〜
</ul>
  • 〜
  • 〜
のように箇条書き
<ol>
  <li> 〜
  <li> 〜
</ol>
  1. 〜
  2. 〜
のように番号付きの箇条書き
<dl>
  <dt>□□<dd> 〜 </dd>
  <dt>○○<dd> 〜 </dd>
</dl>
□□
〜
○○
〜
のように用語説明などに用いる見出し付きの箇条書き
改行や段落など 
<br>
改行
<p> 〜 </p>
段落
<hr>
横線
<pre> 〜 </pre>

<xmp> 〜 </xmp>
〜を改行も含めてそのまま表示(xmpタグでは「<」や「>」などの記号もそのまま表示)
リンク 
<a href=url>〜</a>
〜のクリックでurlのページを表示
<a href=HTMLファイル>〜</a>
〜のクリックで同じ場所にあるHTMLファイルを表示
画像や音声のリンクと埋め込み 
<a href=画像ファイル>〜</a>
〜のクリックで画像を表示
<img src=画像ファイル alt=〜>
画像の埋め込み(視覚障害者は〜を音声で読み上げ)
<a href=音声ファイル>〜</a>
〜のクリックで音声を再生(音楽ファイルも同様)
<embed src=音声ファイル hidden=true>
音声の埋め込み(音楽ファイルも同様)
<embed src=動画ファイル hidden=true>
動画の埋め込み
文字修飾 
<font ...> 〜 </font>
color(色)やsize(文字サイズ1〜7)を指定可
<b> 〜 </b>
〜を太文字で表示
<em>〜 </em>
〜を強調表示
<i> 〜 </i>
〜を斜字体で表示
<u> 〜 </u>
〜に下線
表組み 
<table>
  <tr><th>〜</th>...<th>〜</th></tr>
  <tr><td>〜</td>...<td>〜</td></tr>
  <tr><td>〜</td>...<td>〜</td></tr>
  ...
</table>
<th>〜</th>の箇所は見出し、<td>〜</td>の箇所はセルデータ
フレーム 
<frameset option>
  <frame src=file1>
  <frame src=file2>
  ...
</frameset>
optionでcolsやrowsでフレームの分割比を指定し、第1フレームファイルfile1, 第2フレームファイルfile2を指定
フォーム入力 
<form> 
<input type=text ...>TEXT入力で、sizeやvalue(初期値)を指定可(type=textは省略可)
<input type=button ...>button入力で、value(ボタンの表示文字列)やonclick(イベントハンドラ)を指定可
<textarea ...></textarea>複数行のtext入力で、rows(行数)やcols(幅)やvalue(初期値)を指定可
</form> 
JavaScript 
<script>
  JavaScriptプログラム
</script>
HTMLファイルにJavaScriptプログラムを埋めこむ
<script src=〜></script>
〜の外部ファイル(拡張子はjs)を実行