この文書は、平成14年（2002年）9月26日（木）に富山医科薬科大学で行われた、 第11回（平成14年度）富山地区国立学校技術職員研修 C コースにおいて使用したものです。
現在 Web ページを作成する言語は HTML (HyperText Markup Language) から XHTML (eXtensible HyperText Markup Language) に移行しつつある。 先端を走る人たちはもうとっくに移行済みである。 ワードプロセッサが吐き出す Web ページ用のソースもいつのまにか XHTML になってしまっている。 にもかかわらず、なぜ HTML なのか。
現実にまわりを見渡せば、HTML で作成されている Web ページが圧倒的に多い。 １世代前の HTML 3.2 で作られていると思われるページもかなりの数である。 XHTML に移行しようと思っても、書き直すには少々敷居が高いかもしれない。 というのは、XHTML は HTML 3.2 から見ると格段に書式（文法）が厳格になっているからである。 私のように、HTML 3.2 に慣れてしまった頭ではつらい。 その点、HTML 4.01 は、HTML 3.2 に比べれば少しは厳格に書かなければいけないが、XHTML ほどではない。 XHTML へのつなぎとして、あるいは HTML 4.01 のままでも当分は閲覧不能という事態には陥らないので、 先端を走りたいと思う人以外には、充分と思われる。
HTML の規格はバージョン 3.2 までは Web ページを閲覧するブラウザの開発競争に左右されてきた側面もあり、 本来の文書構造を記述するという目的からはいささか逸脱したところもあった。 それを本来の目的に戻すという意味でバージョン 4.0 が策定されたのである。 4.01 はそれを少々手直ししたものである。 4.0 になってから、Web ページの見栄えを良くするのには、少々手の込んだことをしなければならなくなった。 今回の実習では、HTML 3.2 から HTML 4.01 への「見栄え」の移行方法も含んでいる。 初めて HTML を書くという方にはその部分を読み飛ばして頂いても結構である。
もう一つ、私が取り上げたかったテーマが、W3C (World Wide Web Consortium) の勧告に厳密に基づいた HTML を書いてみよう、 というものである。W3C の勧告は、HTML の書式を標準化しようというものであり、 この勧告に基づいた HTML を書けば、ほぼ全ての Web ブラウザで問題なく閲覧できると思ってもらっても良い。
「W3C の勧告なんて関係ない。Web ページなんて見られさえすればいいんだ。」 という考えも間違っているとは言えないし、否定するつもりもない。 しかし、少し想像力をたくましくすると、視覚に訴えるページは必要なく、 聴覚に頼ってそのページを読もうとする人も存在することに気がつく。 そのような人にとっては、「見られさえすればよい」ページはどのように聞こえるのか。 普通に聞くことができるかもしれないし、読んでくれても意味不明だったりするのかもしれない。 聴覚だけに頼る人のことも配慮して Web ページを作るのに、 手っ取り早いのは W3C の勧告に厳密に基づいた HTML を書くことである。
実習テキストは、基本的な必要最小限の項目にまとめたつもりである。この程度のことは調べれば判るものばかりである。 このようなつたない実習でも、各講座等の情報発信の一助になれば幸いである。
HTML (HyperText Markup Language) は、 SGML (Standard Generalized Markup Language) という文書内容の構造を記述するための言語を元にして、Web ページ作成用として作られたものです。 SGML と同様に HTML も文書内容の構造を記述するための言語です。
では、この規格はどこで作られているかというと、W3C (World Wide Web Consortium) という組織です。
URI は、http://www.w3.org/ です。
作られているといっても、誰かが勝手に作っている訳ではなく、W3C の メンバーが案を持ち寄って議論の末に決定されます。 ちなみに、メンバーには、 Adobe Systems Inc.、 Apple Computer, Inc.、 Honda Motor Co., Ltd、 Japan Broadcasting Corporation (NHK)、 Keio University や Sony Corporation 等 463 の企業、団体および学校が入っています。
現在の HTML の規格の最新のものは、HTML 4.01 です。4.01という数字はバージョン（版）を表しています。 この 4.01 が1999年12月24日に勧告され、事実上の最終バージョンになっています。
次の URIで原文および邦訳版が読めます。
http://www.w3.org/TR/html401/ (英語原文)
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html (邦訳版)
では、見た目を決めるのは何かというと、NetscapeNavigator や InternetExplorer などの Web ブラウザです。 ブラウザが HTML の情報を読み込み、テキストやイメージを整形し、画面上に表示します。 例えば、ブラウザはウィンドウの大きさに合わせてテキストの表示幅を自動的に調節したりします。
異なるブラウザだと、各要素に対する対応付けが違っていることがあります。 ですから、システムやブラウザが違うとページの中身やリンクは同じなのですが、 画面での見え方や表現方法は違うことがあります。
例えば、<h1> という見出し用のタグがあります。一般的なブラウザでは文字を大きく太く表示しますが、 音声によって読み上げるブラウザも存在し、その場合は文字を大きく表示することは必要無く、 重要なのは <h1> という見出し用のタグが付いていること自体なのです。
あなたが作った Web ページが HTML の規格に沿っているかどうか、調べてみましょう。 作ったことが無い人は、普段見ているページでもいいですから、その URI をメモ（思い出）して下さい。
URI が思いつかない方は、以下のページなどはいかがでしょう。
ここは、W3C が公式に運用している HTML 等が正しいかどうかを確認するための Web ページです。
ページが表示されましたら、Validate by URI という項目の Address: 欄に先の URI を入力し、
Validate this page ボタンを押して下さい。
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
ここは、個人が無償で運用している HTML の文法をチェックする日本語の Web ページです。
ページが表示されましたら、 URL というラジオボタンが黒くなっていることを確認し、
入力欄に先の URI を入力しチェックボタンを押して下さい。
いかかでしたでしょうか。エラーが表示されましたか?
そのエラーが出ないような HTML を書きましょうというのが、今回の実習の目的です。
インターネット上の Web ページは広く一般に公開されるということを認識しておかなくていけません。 広く一般（不特定多数）ということは、OS（オペレーティングシステム）や Web ブラウザを特定することは出来ないということです。
機種依存文字とは、パソコン等で日本語を表示するために使われる文字コードのうち、共通の物以外で、 一部の機種や OS 独自に割り当てた文字のことです。
良く見かける例として、ローマ数字の I, II, III 等があります。Windows マシンで正しく表示されても、 Macintosh では、（特）、（監）、（企）などの文字として表示されます。 また、Macintosh でのローマ数字も Windows では ・・・として表示されますので、やはり使うのはやめた方が良いでしょう。
その他の機種依存文字については、以下の URI を参照してみて下さい。
機種依存文字劇場 http://apex.wind.co.jp/tetsuro/izonmoji/
Web ブラウザは現在 InternetExplorer と NetscapeNavigator が主と思われますが、 どちらかのブラウザでしか動作しない機能は使わないようにしましょう。
例えば、<brink> というタグはブラウザでは文字を点滅させますが、NetscapeNavigator でしか点滅しません。 見る人に注目してもらいたいという意図は NetscapeNavigator で見ている人以外には通じないことになります。
OS 付属のテキストエディタと呼ばれるアプリケーションプログラムでとりあえずは充分です。 具体的には、MacOS だと SympleText、Windows だとメモ帳です。 とりあえずというのは、MacOS の SympleText は 32KB（キロバイト）、Windows のメモ帳は 64KB までしか扱えないからです。 32KB というのは、日本語で 16,000文字分ですからとりあえずは充分だと思います。ちなみに、今ブラウザでご覧になっている このファイルは約 40KB ですので、これより少し小さいのものまでは作成できるということです。 もちろん使い慣れているテキストエディタ等があればそれが良いと思います。
あと、オフライン（ネットワークに接続していない状態）で、 閉じタグ忘れや入れ子の不整合などの単純な間違いをチェックするアプリケーションがあると便利かもしれません。 私はもっぱら JChecker を使っています。
それでは、MacOS の方は SympleText を Windows の方はメモ帳を起動して下さい。
HTML の要素 (element)とは、段落や見出しなどを HTML で表現する上での部品とも言えます。部品にはそれぞれ要素名という名前が付けられていて、たとえば、段落には p という要素名が付けられています。
要素名を"<"と">"で囲んだものをタグ (tag) と言います。タグはテキスト等に目印をつける、 つまりマークアップするための記号です。タグは必ず、1バイト文字（いわゆる半角文字）で書かなければいけません。
タグは、一部の例外を除いて <html>〜</html> というふうに/（スラッシュ）無しで始まり / 有りで閉じるようにペアで使います。マークアップは、始まりタグから終了タグまでの間が有効です。
つまり、こんな形式になっています。
<要素名>タグの対象</要素名>
HTML を書き始める前に、今から書くHTML がどんな種類なのかを <html> タグの前に書いておく必要があります。
無いと、ブラウザは HTML 2.0 で書かれたものと解釈します。表示に関しては、全然問題なく表示される場合もあります。 しかし、それは HTML の仕様的には「正しい」とは言えないので書くようにしまょう。
HTML 4.01 には 3種類ありますが、後半の URI が書かれている部分が有るのと無いのでブラウザ側での意味が違いますので、 合計6種類ということになります。 これは、IE6, Netscape6, Mac版 IE5 からブラウザに追加された機能で、「標準モード」と「互換モード」 という表示の仕方の違いによるものです。タグの下のそれぞれの説明は、ブラウザに対しての指示です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
HTML 4.01 を厳密に守っていますが、厳密に表示するかどうかブラウザが決めて下さい。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 を厳密に守っています。ブラウザは strict.dtd に沿った厳密な表示をして下さい。「標準モード」
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
HTML 4.01 に移行中です。ブラウザは以前と同じように表示して下さい。「互換モード」
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 に移行中ですが、ブラウザは loose.dtd に沿った厳密な表示をして下さい。「標準モード」
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
HTML 4.01 に移行中でフレームを使っています。ブラウザは以前と同じように表示をして下さい。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
HTML 4.01 に移行中でフレームを使っていますが、ブラウザは frameset.dtd に沿った厳密な表示をして下さい
※ Frameset に関しては、記述してある文書を見つけることが出来なかったので、類推しました。間違いかもしれません。
［類推］strict.dtd に frame の仕様が無い。→ Frameset は厳密な HTML 4.01 ではない。→移行中。
DTD というのは、使える要素（タグ）・属性等をどのように使用するかを規定してある辞書のようなものです。 各 URI の 各 dtd 文書がそれにあたります。
今回の実習では、W3C 勧告に厳密に基づいた HTML を書くことを目的としていますので、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
を使います。今から書き始める HTML 書類の１番最初に、このとおりに記述して下さい。 この実習テキストをブラウザで見ている方はコピー & ペーストしてもかまいません。
HTML 4.01 になって、それまで使っていた HTML 3.2 の element（要素）が deprecated （非推奨）となりました。 原文には以下のように記述してあります。
"The following elements are deprecated: APPLET, BASEFONT, CENTER, DIR, FONT, ISINDEX, MENU, S, STRIKE, and U."
原文: Changes between HTML 3.2 and HTML 4.0 (18 December 1997)
日本語訳の主な要素の説明とスタイルシートへの書き換え方が下記 URI にあります。
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/graphics.html
HTML 3.2 で使用してきた要素・属性で、HTML 4.01 では推奨しない具体的な例を上げると、以下のようなものがあります。
HTML の基本構造はこのようになっています。
例では、入れ子の深さに応じてインデントをとっていますが、インデント無しでもかまいませんし、 改行さえ無くて１行で記述してもかまいません。 ただし、後で編集することを考えてある程度は見やすく書いておいたほうが良いと思います。 入れ子の深さに応じてインデントをとるのは、編集時に入れ子になるタグのペアを見失うのを防ぐためです。 機能面には全く影響しません。
<html> は HTML 文書の１番大元となるタグです。ここでは、この HTML 文書が日本語であることを指定します。 以下のように記述します。
<html lang="ja">
英語ならば ja の代わりに en を指定します。
HTML ファイルには、HTML 文書だということをブラウザに認識させるために .html という拡張子がファイル名の後に続けて必要です。3文字しか拡張子が付けられない場合は .htm でも結構です。
ここで一度、ここまで書いた HTML 文書を保存しておきましょう。ファイルメニューから「名前を付けて保存」を選んで、 適当な名前と拡張子を付けて、とりあえずデスクトップに保存します。
HTML のヘッダ情報を記述します。最低限必要なのは、ページに使用する日本語文字コードの指定です。 以下のように記述します。
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
最後の shift_jis がパソコン等で最も使われている日本語文字コードの「シフトJIS」を表します。 MacOS や Windows で作った HTML 書類をそのまま使うのでしたら、この shift_jis を使います。 他に、iso-2022-jp（JIS）や UNIX系マシンで使われる euc-jp（EUC）があります。
今回はスタイルシートを使いますので、スタイルシート(CSS)を使うことを宣言しておきましょう。 以下の行をヘッダ部に追加して下さい。
<meta http-equiv="content-style-type" content="text/css">
著者を明記しておきましょう。無くても構いません。私の名前のところをあなたの名前に替えてください。 名前の書き方は自由です。
<meta name="auther" content="中山八州男 (NAKAYAMA Yasuo)">
は、タイトルで、普通はブラウザ上部のタイトルバーに表示されます。 また、ブックマークに登録するときの見出しにもなります。
<title>タイトル</title>
本文が入る部分です。
<body style="color: #000000; background-color: #ffffff">
この例では、スタイルシートを使っていますが、文字色を黒色に、バックグラウンド（背景）の色を白色に指定しています。
以降、説明する要素（タグ）はスタイルシートを除いて、全てこの <body> </body> の中に入ります。
色の指定は様々な所で使いますが方法は全て同じで、主に16進数6桁で表す場合と、英語で指定する場合が有ります。 どちらでも書きやすい方で書いてかまいませんが、 英語の方は基本の16色以外はブラウザが対応していない場合もありますので注意が必要です。
基本の16色だけ書いておきます。
| 実際の色 | 英語 | 16進数6桁 |
|---|---|---|
| black | black | #000000 |
| naby | naby | #000080 |
| blue | blue | #0000ff |
| green | green | #008000 |
| teal | teal | #008080 |
| lime | lime | #00ff00 |
| aqua | aqua | #00ffff |
| maroon | maroon | #800000 |
| purple | purple | #800080 |
| olive | olive | #808000 |
| gray | gray | #808080 |
| silver | silver | #c0c0c0 |
| red | red | #ff0000 |
| fuchsia | fuchsia | #ff00ff |
| yellow | yellow | #ffff00 |
| white | white | #ffffff |
ちなみに、16進数6桁での指定は、6桁を2桁づつ3つのグループに分けて、左側から光の三原色の R (red), G (green), B (blue) の色の明るさを指定しており、それぞれ 00 から ff まで256段階あります。 見る側の画面での表示制限があることを考えると、あまり細かい指定は避けたほうが無難です。 それぞれの色の 00, 33, 66, 99, cc, ff が Web safe color といって、使っても安全だと言われています。
ここで、いままで書いた HTML 書類をブラウザで表示してみましよう。 NetscapeNavigator でも InternetExproler でもお好きなブラウザを起動させて下さい。 すでにこのテキストをブラウザで見ている方は、新たにウインドウを１つ開いて下さい。 ブラウザのウインドウに、デスクトップにある、あなたが作った HTML 書類をドラッグ & ドロップしてください。 いかがですか、今指定したバックグラウンドの色だけのウィンドウになったと思います。 変更する場合は、HTML 書類で変更し、それを保存してから、ブラウザの再読み込みボタンを押して下さい。
これからは、この繰り返しで、確認しながら作成してゆきます。 次のタグから順に記述して、実際にどう表示されるか確認してみて下さい。
１番大きい見出しとして表現される <h1> </h1> から １番小さい見出しとして表現される <h6> </h6> まで6段階あります。 記述の仕方と実際にどう表現されるかを並べてあります。
見出しタグを、単に文字を大きく見せるために使っているページが散見されますが、はっきり言って間違いです。
ブロックレベル要素というのは、ひとつのまとまった単位として表現される要素（タグ）のことで、今回取り上げた要素の中では、h, p, div, ul, ol, table, hr がそれにあたります。
このように入れ子にもできます。入れ子にする場合は、<li> </li> の中で入れ子にします。
HTML 3.2 では属性の指定によってリストの先頭に付くマークを選べたのですが、非推奨となりました。 スタイルシートでは可能ですが、今のところ Netscape 6 でしか機能しないようですので省略します。
番号無しリスト同様、入れ子にもできます。入れ子にする場合は、<li> </li> の中で入れ子にします。
HTML 3.2 では属性の指定によってリストの先頭に付く番号の種類や開始番号を選べたのですが、非推奨となりました。 スタイルシートでは可能ですが、今のところ Netscape 6 でしか機能しないようですので省略します。
リストは、以下のように番号無しリストと番号付きリストを組み合わせることもできます。
<p>段落等の文章の中で強制的に改行させたい場合に使います。<br>閉じタグは必要ありません。</p>
は、こうなります。
段落等の文章の中で強制的に改行させたい場合に使います。
閉じタグは必要ありません。
このように横ラインを引きます。閉じタグは必要ありません。
属性の align, size, width が非推奨となりました。例えば、<hr width="50%" align="center"> などは使えません。
例えば、見出しを含めて、3行3列、概要が Table Sample 、枠の太さが2ピクセル、セル内容とセル枠の間隔が5ピクセル、の表を作る場合は以下のように記述します。
| 見出し1 | 見出し2 | 見出し3 |
|---|---|---|
| データ1-1 | データ1-2 | データ1-3 |
| データ2-1 | データ2-2 | データ2-3 |
文字を上付きにします。
y = x<sup>2</sup>
y = x2
文字を下付きにします。
H<sub>2</sub>O
H2O
アンカーの属性は、とりあえず<a href="URI"> だけ説明しておきます。これは、指定した URI へ移動します。
移動先が Web ページの場合は、<a href="http://〜"> どこそこ</a> というように使います。
また、<a href="http://〜" target=""> というように、 別ウインドウでリンク先を表示させることは非推奨となりました。これは、別ウィンドウにするか同じウインドウにするかは、 ユーザーのブラウザ操作によって選ばせる方が良いということだと思います。
指定する URI には絶対 URI と相対パスがあります。絶対パスもあるのですが、話がややこしくなりますので省略します。
例えば、アンカーで富山医科薬科大学のホームページへ移動させたい場合、
<a href="http://www.toyama-mpu.ac.jp/index-j.html"> 富山医科薬科大学</a>
と記述すると、こうなります。
相対パスは、同一サーバ（コンピュータ）内で今読み込んでいるファイルから見ての位置を指定します。
同じディレクトリ内のファイル指定でしたら、<a href="./filename.html"> です。
今回は取り上げませんでしたが、画像を配置する場合などは、 <img src="./image.png" alt="image"> のように指定します。
スタイルシートは、レイアウトや体裁などを本文の文書構造とは切り離して定義します。 そうすることによって、本文の文書構造を HTML で書くときに、そのつど見栄えを考慮して書く必要が少なくなります。
今回の実習では、使用頻度が多いと思われる代表的な物だけになっています。また、1つの HTML ファイルでとりあえず済ませようと思いますので、ヘッダ部にまとめる方法と個別に指定する方法を使います。
多数の Web ページを作成する作業の効率性から言えば、スタイル定義を HTML 文書内に書かずに別のファイルとして作成し、同じスタイル定義を複数の HTML 文書で共有するのが良いと思われます。 HTML 文書内にはその HTML 文書でしか使わないスタイル定義のみを記述するということです。 それによって、管理しなければならない多数のWeb ページのデザインを統一することも可能です。
ヘッダ内に以下のように記述し外部ファイルを指定します。
<link rel="stylesheet" type="text/css" href="./filename.css">
filename.css というファイルがスタイル定義ファイルで、中身としては純粋にスタイル定義のみ記述します。
例えば、ボディ部の文字色を黒に、バックグラウンドを白色にする場合は、
body { color: #000000; background-color: #ffffff }
とだけ書いたテキストファイルに名前と、拡張子 .css を付けて保存するだけです。
ヘッダ部に上記のように <style type="text/css"> </style> で囲んだ中に、 指定したい要素名のあとに続けて、{ } の中にスタイル指定を ; で続けて書きます。
<!-- 〜 --> はコメント行と言って、ブラウザに表示させたくない文字を記述する場合に使います。 無くてもヘッダ部にあるので表示さないはずなのですが、 一部の古いブラウザでは表示される場合がありますので念のためコメント行とします。
とりあえずすぐに使えそうな主なものは以下のとおりです。
指定したい部分の要素名に続けて、style= の後の " " の中にスタイル指定を ; で続けて書きます。
<p style="color: green; background-color: #ffffff; font-style: italic">要素ごと、一時的にスタイルを変える</p>
要素ごと、一時的にスタイルを変える
これは、例えば１つの段落の中で特定の単語だけなどにスタイルを指定する場合です。
指定したい部分に <span style= の後の " " の中にスタイル指定を ; で続けて書きます。 指定を解除させるタグ </span> が解除部分に必要です。
<p>元のスタイル<span style="color: red; background-color: #ffffff; font-size: 1.5em">スタイルを変えるテキスト</span>元のスタイル</p>
元のスタイルスタイルを変えるテキスト元のスタイル
とりあえずすぐに使えそうな主なものは以下のとおりです。
スタイルシートは、このほかにも多くのスタイルの指定が有りますが、 中には特定のブラウザでしか機能しないスタイルも有りますので、使用には注意が必要です。
ここまで、HTML の基本的なタグの使い方を実習してきました。実際の Web ページにするには、それらのタグの組み合わせで、 HTML 書類の最初に書いたものから順にブラウザで表現されます。良い Web ページを作るのにはいくらかの試行錯誤も必要です。 この実習で覚えた文法等を使って、実際に Web ページを作って頂けると幸いです。
最後になりましたが、今回の実習に際しコーディネイトして頂いた森腰正弘総括技術官はじめ、準備に関わって頂いた全ての方に感謝致します。