==============================
HTML書式の簡易解説。Ver0.99
==============================
0 はじめに。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
この参考書ならぬ参考ドキュメントは、不特定多数をターゲット
にしたホームページの用途よりは、ワークステーションとしての個
人のローカルハードディスクやフロアの見渡しが聞く範囲での局所
的な部署内での情報共有の目的のために作成されたものです。
このアーカイブパッケージはフリーウェアです。配布には特別な
条件はありません。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
ここから技術解説文書です。
1 HTML形式の宣言。
HTML文書のファイルの形式は通常のテキストファイルです。
普通のテキストファイルの拡張子txtを「HTM」と変更する事
によって、ブラウザー(インターネットエクスプローラ、ネットス
ケープナビゲータ)で読み込む(ダブルクリックで)ことが出来る
ようになります。
最近のバージョンの高いブラウザでは、このままのタグなしの状
態でも、ファイルの中身を表示する事が出来ますが、その内容は何
ら機能のない素の表示となります。
ここでは過去の遺産として「ここからHTML形式を開始します」
というタグを説明します。
内容
過去のブラウザではこの囲みの中だけが表示されました。
HTMLはもともとUNIX環境の中で発案されたもので、その
文法の言い回しにUNIX記述言語であるC言語の影響を受けてい
ます。
「タグの区切り」が正しく宣言されていれば、タグの位置はその
機能に影響しないという約束がその一つです。
たとえば各タグを記述するたびに改行しても良いし、できるだけ
まとめて一行ごとに記述してもかまいません。
逆に、その機能がかえってHTML文書中ではすべての改行を無
視してしまい、素のテキスト文書をHTML化した場合、すべての
行が連結されて表示されて戸惑う場合があります。
この場合はツールを使って強制改行タグを各行ごとに各行ごとに
各行ごとに宣言するか、
あるいは出来るだけ元のテキスト文書の形式を尊重するタグを書
くしかありません。
その手段に対しては後述します。
1 基本型式。
基本的にHTML文書の最低条件というものは次の二つにまとめ
られます。
(1) 拡張子はHTMである(UNIXやマッキントッシュは
HTML)であらわせられるテキスト形式の文書。
(2) 最低
内容文書という形式で
記述されていること。
これ以外の機能タグはすべて「オプション」と考えたほうが懸命
です。
2 「改行処理」をどう扱うか。
HTML対応のワープロソフトやツールを使って文書をHTML
形式であらためて保存すれば必ず文書の各行の最後に強制改行タグ
が挿入されます。。
テキスト文書からエディタ(メモ帳)をつかってHTML文書を
作るとき、手動でいちいち各行の後ろに強制改行タグを書いてもい
いのですが、できれば次に挙げるのタグを一組だけ文書の最初と最
後に宣言してやれば元の文書のすべての改行を保持する形式として
表示されます。。改行無視はしません。
文書内容
これはプレフォーマットタグとよばれ、「古い文書形式で表示す
る」という意味です。
ただし、この形式を宣言すると後期のHTMLで取りいれられた
ネオンサインのような機能は使えなくなります。(普通の画像表示、
リンクなどの機能は問題ありません。)
HTML文書を戦略的な文書整理のために、用いると重宝する命
令です。
(ちなみに、HTMLはアメリカ国防総省で戦略的コンピュータシ
ステムの一部として考案されたSGMLというフォーマットをその
基本としています。その機能としての戦略的有用性をその本文と考
えれば、装飾過剰になった重くて複雑なHTMLスクリプトは文化
としては袋小路に入ったものなのかもしれません)。
プレフォーマットタグを宣言した形式は次のようになります。
文書内容
どうしても文書中で後期バージョンの新命令を使いたい場合は次
のようにしてください。
文書の前半
機能させたい新命令を含んだ文書部分(各行文末にに
タグの宣言が必要)。
文書の後半
これで、機能させたい部分に一時的にプリフォーマットタグの宣
言を取り消します。
(付記)色彩と文字の大きさ。−−−−−−−−−−−−−−−−
これは普通に白紙に印刷するイメージで考えてください。
ブラウザによっては文書内容をデフォルトの灰色で表示する設定
になっているものがあります。
このようなブラウザに、白紙背景の扱いで表示させるには以下の
ようにします。
.....
bgcolor変数は、ここでは表示背景の色彩をフルカラー1677万
色のうちの純粋白色で表示する設定として扱われます。
文字の大きさは以下のように指定します。
.....
これで、タグの内側では文字の大きさが第三グレードで表示され
ます。h1が最大の大きさになります。
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
3 リンク機能。
これがHTML機能の本貫機能です。
これは次の二つに分けられます。
3−1 他文書へのリンク。
これはアンカータグといわれ、概念は次のようになります。
<アンカータグの開始>青で表示されるクリックされる文字列<アンカータグの終わり>
具体的にはHTML文書の任意の場所で、
ここをクリックしてください。
(プレフォーマット形式でないならば
の記述)。
となります。同じディレクトリ(フォルダ)にあいてさきの"tar
get.htm"が存在していれば、そのファイルの内容が表示されます。
(ちなみにhrefとは、「ハイパーテキスト参照」:hypertext refe
rences の略です。)
異なるディレクトリやインターネット上のほかのマシンを指定す
るときは上のダブルクォーテーションで括ったところに場所の情報
を書き込まなければなりません。
たとえば、
=自分のマシンのなかを記述する場合(WINDOWS)。==
・ ひとつ上のディレクトリ"..target.htm"
・ 自分のディレクトリよりも下のディレクトリ
".\自分から数えて目的ディレクトリへのフルパスtarget.htm"
あるいは
"自分から数えて目的ディレクトリへのフルパスtarget.htm"
・ もちろんc:\windows......のようにフルパスで書いてもかまいません。
=WINDOWSのネットワーク。=
・マシンaaaaaの共有資産bbbbbの下にあるHTML文書。
"\\aaaaa\bbbbb\target.htm"
=インターネットのサイト。たとえばホームページのhttpサーバー。===
"http://www.hokanosite.com/~jibunnnodirectry/target.htm"
もし、/~jibunnnodirectry以下にさらにディレクトリがあり、そ
の中の文書を指定したい場合も出来ればフルパスで記述したほうが
懸命です。(相対場所しての文法もあるのでしょうが)。
またほかのサイト(たいていUNIXマシン)では、ディレクト
リ表記が\ではなく/になっています。。
また波線はチルダと呼ばれ、英語モードでは上直線として表示さ
れたりもします。キーの割り当てはshiftキー+「々^へ」の
キー(キーボードの右上)です。
またファイル名は小文字で記述するのが普通ですが、サイトによ
って必ずしも小文字でアクセスできるとは限りません。
ファイル名の記述はすべて大文字にするとうまくいくこともあり
ます。
=画像などほかのファイルの表示。=
アンカータグはHTM文書でないほかのファイルでも指示できます。
TXT、HTM、JPG、GIF、EXE、ZIP、LZHなど
が良く見られます。
基本的にすべてのファイルに対してリンクが記述できます。
画像ファイルを指定した場合、その相手先の画像がブラウザ上に
最大表示モードで表示されます。
ただしペイントの形式BMPは、WINDOWS同士のネットワ
ークならば表示できますが、途中にUNIXマシンが挟まると表示
されないようです。
基本的に、
・ブラウザが表示可能なものならばブラウザ上に表示する。
・WINDOWSマシン上でファイルの拡張子とアプリケーショ
ンの関連づけがなされていればそのアプリケーションを呼び出す。
・表示できるファイルではなく、対応するアプリケーションが端
末マシン側にない場合、ダウンロードしようとする(WINDOW
Sの場合はデスクトップがデフォルト。)
という振る舞いをします。
またアプリケーションのデータファイルの形式(DOC:MSワ
ード、、XLS:MSエクセル)でもリンクは脹れます。この場合は
端末WINDOWSマシンで、ファイルの拡張子形式とアプリケー
ションの関連付けなされていれば、ブラウザ上のダブルクリックだ
けで目的のアプリケーションが呼び出されます。(ただし、公衆回
線上でリモートで数メガもあるEXECLの文書を編集するのは、
あまりに遅くていらいらするかもしれませんが。)
同じ要領でWEB上の音楽データもリモートで再生できます。(
ただし高速回線が必要です。)
3ー2 自分の中に対する目次形式のリンク。
ほかのファイルを呼び出すのではなく、自分の中に埋め込まれて
いる要素に対しての参照アンカーです。
基本はシャープ「#」を使って自分の中に対する参照
であることを宣言します。
第1章
このように記述し、同じテキスト文書の後方にある
「第一章」の内容の直前にこのように記述します。
第1章
こうすると呼び出し側の「第一章」をクリックすると、
後ろの本文の見出しにジャンプするように出来ます。
参考ファイル、action5.htm/txtが同梱されています。
試してみてください。
4 直接画像を表示。
専用の画像表示タグです。
これを宣言すると文書中のその場所に画像ファイルが埋め込まれ
ます。表示の大きさは変更する事が出来ます。
自分のマシンの内部だけでならBMP形式でもかまいませんが、
出来ればJPGにして破壊圧縮を掛けて256色にしたほうがディ
スクスペースを節約できます。(別途フルカラー画像が必要ならば
要領の余裕のある別の場所にリンクをはるのがが良いでしょう)。
大きさを変える場合には次のように記述します。
ピクセル数は任意の数値を入れながら調整してください。
(普通、画像フォーマットはたて:よこ=1対(2の平方根)の
黄金分割の比率になっています。)
ピクセル数はたて横それぞれ指定すると、画像を自在に伸縮させ
ることが出来ます。たて、あるいは横だけ指定すると、たて横の比
率は保持したまま、相対的に縮小されて表示されます。
4−1 クリックするとリンクする形式の表示画像。
画像の任意の場所をクリックするとリンクする形式の文法です。
クリックしてください。
と言う素の形式の発展です。
表示させたい画像がgazou.jpgであるとすれば、
と言う表現になります。もちろん画像表示のオプションとして拡大
縮小の機能も使用できます。
5 表を表示する。
インターネットブラウザーは表示に自動プロポーショナル機能を
用いていますので、メモ帳などで整然としていた表示が表示したと
ころ微妙に崩れてしまうことがあります。これは「1」や「i」な
ど横幅が狭い文字を自動で詰め寄せて表示してしまうためです。
この機能は数値の表などを表示させるときに表を読み間違える危
険があります。
<表記述の実際>
エクスプローラではバージョン3から表の表示をサポートしまし
た。ネットスケープについてはバージョンに関する情報が個人的に
ありません。(もちろん最新版なら表示できます)。
HTMLでは表のことをテーブルと言います。
表はテーブルタグによって宣言します。
これでタグに挟まれた内部が表として宣言されます。
PREフォーマットタグの内側でも動作します。
table命令はそのままでは枠線を表示しません。
修飾変数としてborder(ボーダ・ライン)が必要です。
書式
これで幅1ピクセルの枠線で囲まれます。。。
基本概念は以下の3つです。
テーブルタグ 表領域の宣言。
テーブルリターンタグ .....
表の行領域の宣言。
テーブルデータタグ ..... | 表のデータタグ。
総体記述論理は以下のようになります。
<表の開始
内容 | 内容 | 内容 | 内容 |
<行頭宣言 表の各内容 行尾宣言
.....
<上に同じ
<テーブルの終わり
たとえば
1,2,3,4,5
6,7,8,9,0
という2行の表を表示させるときは次のようにします。
これはEXECLからカンマ区切りCSV形式テキストとして出
力したデータを想定しています。
まず、文頭と文尾にもカンマを追加します(作業が楽になります)。
,1,2,3,4,5,
,6,7,8,9,0,
メモ帳などの検索・置換機能でこの「,」を
「」(テー・デー)と置換します。
そうすると
| 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 0 |
となります。(この部分を別ファイルにして「一括置換」をして
もかまいません。)
このままでは行頭と行尾のタグがそれぞれ一個ずつ余計です。
またそれぞれの行に「行の始まりと終わり」を宣言しなくてはな
りません。
余計な行頭と行尾のタグを、「表の改行(テーブルリターン:ta
ble return)」タグ「tr」に変更します。
| 1 | 2 | 3 | 4 | 5 |
6 | 7 | 8 | 9 | 0 |
この行論理をテーブルタグの論理で挟ん
で完成、
これをHTMLファイルの好きなところにコピーし、表示させま
す。かなり面倒なことをしているようですが、PERLやSEDの
様なUNIX由来のスクリプト言語を使用すれば、比較的簡単に自
動化できます。コンピュータは基本的に逐次バッチ処理のような目
的に設計されているので、マクロやバッチのような概念になれてお
くと後々かなり楽になるでしょう。
表にはほかにも表示を細かく出来るタグがありますが、あまり複
雑な機能を使いすぎると、ソースファイルから元の表のデータを復
元できなくなってしまいます。
重要な情報は出来るだけシンプルな形式で記述するのがいいでし
ょう。
なお、各表の桝目の中からそれぞれ別途にリンクを宣言すること
が出来ます。
たとえばある桝目に
桝目の内容 |
となっていたとします。
このTLタグの組みの内側にアンカーHREFタグを宣言してや
れば良いことになります。
具体的には桝目の内容 |
となります。
更に桝目の中に画像を表示することも出来ます。
|
これは桝目の中に画像が表示され、なおかつその画像をクリック
すると「targent.htm」というリンク先を表示する書式です。
画像データベースなどで、容量を圧縮して作成した小さなサムネ
イル画像をクリックすると原本の大きな画像を呼び出すときになど
使われるテクニックです。
6 ブラウザーのタスクバーにファイルのタイトルを表示する。
これは特に難しいことではありません。
タグとタグの間にヘッダ情報を書き込みます。
HTML文書の解説。/titde>
これでタスクバーにタイトルが表示されます。
−−−−−−−−−−−
<各章のおわり。>
−−−−−−−−−−−
ここまでで解説したHTMLタグ。
HTML 文書形式の宣言
BODY 文書本体の宣言
BR 強制改行
PRE テキストの改行コードを保存
Hn 文字の大きさ
A HREF リンク先の宣言
A NAME 同一ファイルでのリンク受けの宣言
IMG SRC 画像を文書中に埋め込み宣言
TABLE TR,TD表枠の表示宣言
HEAD ヘッド領域の宣言
TITLE ブラウザのタスクバーに表示するタイトル文字記述領域の宣言
以上11個(種類)のタグを解説しました。
−−−−−−−−−−−−
参考文献。
なつめ社 HTMLリファレンス。
ソフトバンク HTMLハンドブック(絶版??)。
ともに2、3000円程度。
(解説書は、古本屋で初期のものを一冊、新品を一冊
買うのがテクニックです。
前者で基本機能、後者で拡張応用が分かります。)
−−−−−−−−−−−
作者 miyama.
メールアドレス :kaz_kimijima@livedoor.com
(多忙につき、基本的に返信は出来ません。)
作品登録場所 :http://kimijima.tripod.co.jp/
2001年 August6th.
−−−−−−−−−−−−−
文書の終わり。
−−−−−−−−−−−−