ホームページを作るときにはHTML(Hyper Text Markup Language)という言語を使います。そこでは< >で囲まれた中に命令を書いて、それによっていろいろ表示させるわけです。これをタグといいますが、この言葉はたびたび出てくるので覚えておいてください。
タグは「命令」ではありません。開始タグから終了タグまでの間のテキストがいかなる意味を持つかを示すものです。
まず何でもいいから書いてみましょう。Windowsの｛アクセサリ｝にある｛メモ帳｝など、簡易テキストエディタで十分です。とりあえずはサンプルの通り書いてみてください。
例によつて、「丸寫し」を強制します。
<HTML>
<HEAD>
<TITLE>sample1</TITLE>
</HEAD>
<BODY>
ここには好きなことを書いてみましょう。ずーっと続けて書いてもいいし、途中で改行してもいいですよ。
</BODY>
</HTML>
お定まりの「お作法」です。
「注意」には、「良くわかつてゐないのに解説をしてゐる」事がありありとわかる記述が散見せられます。
- <HTML>は「それがHTMLファイルであることを指すタグ」とでも言うのでしょうか．．．。とにかく絶対必要なタグです。
- <HEAD>タグで挟まれた部分のデータは、一番最初に読み込まれます。<TITLE>や<FRAME>，<SCRIPT>などのタグをここで使います。
- <TITLE>にはそのページのタイトルを付けます。タイトルはブラウザのタイトルバーに表示されます。
- <BODY>にはページに表示させたい本文を記述します。
htmlもheadもbodyも「絶対必要なタグ」ではありません。記述されてゐなくとも「あるもの」とされます。本當に記述が「絶対必要なタグ」はtitleだけです。※XHTMLでは確かに「絶対必要なタグ」ではある。
それから、HTML文書は順次讀込まれて行くので、最初の方に記述されたheadがbodyよりも先に讀込まれるのは當り前です。また、scriptはbodyの中に記述出來ます。
lynxでは、titleは表示領域右上に表示されます。「ブラウザのタイトルバーに表示され」るとは限りません。
こんなところでしょうか。自分で改行させたりするタグは［テキスト］の頁で説明するのでとりあえずはこれでいいです。書けたら適当な名前を付けて保存しておいてください。ただし拡張子はhtmlまたはhtm（好きな名前.html）としてください。
擴張子は、何度も言ふやうに不定であり、「htmlまたはhtm」でなければならないと云ふ決りはありません。サーヴァがhttpヘッダに「Content-type:text/html」を附けて送信した文書は全てHTML文書となります。擴張子*.html/htmの文書をHTML文書として取扱ふのは、單にWindowsの側の都合でしかありません。
また、body直下にテキストを記述するのは、HTML 4.01 Strictでは文法違反です。bodyの下には基本的にブロック要素しか記述出來ません。そして、ブロック要素はその前後で改行されます。わざわざ自分で改行させたりするタグ
であるbrをHTML文書で使ふ必要はありません。
突然勝手にブラウザが文書をリロードします。心臟に惡い演出です。(リロードしないブラウザもあります)
次いで、意味もなくいきなりmeta要素の解説が出現します。
要するに「このページを読み込んだ後何秒経ったらどこそこのページを読み込みなさい。」と指定するタグなんですね。
metaタグの屬性HTTP-EQUIVの値にRefreshが設定されてゐるので、對應するUser Agentが先方の文書を呼出してゐるだけです。タグの指定ではありません。これは飽くまでタグに屬性を設定する事で實現してゐる機能です。筆者はかう云ふ記述のある文書を「ダイナミック・ドキュメント」と呼んでゐますけれども、私にとつてそんな用語は初耳です。DHTMLと云ふ言葉はきいた事があります。DHTMLは、Java/JavaScript/VBScript/ActiveX/Flashその他を利用した「樂しげ〜」な「ホームページ」の事です。たかがmetaタグを使つた位の文書を「ダイナミック・ドキュメント」なんて大仰に呼ぶのは、JavaScript並の「詐欺」的な呼び方です。
hrを「ヘアライン」と呼んでゐます。hrはhorizontal-ruleの略です。hair-lineを略したらhlになります。大體なぜ罫線を髪の毛に例へねばならないのですか。小一時間問詰めたい。
妙に太いhrを表示させる人も屡々ゐますよ。
これで挟まれた部分はページ上には表示されません。ドキュメント・ソースを見たときにわかります。
「視覺系User Agent/ブラウザ上では表示されません」とやつて欲しい所です。そもそも「ページ」ッて、何を指して言つてゐるのでせうか。
普通ブラウザは背景はWindow色、文字は黒といったように至って地味なものです。次の機能を使ってこれらの色を変えれば、自分で絵を書いたりグラフィックソフトを用意する必要もないし、ちょっとしたアクセントにはなるでしょう。
「ブラウザ」のどこを指して言つてゐるのか、よくわからない。視覺系User Agentのデフォルトのスタイルシートは屡々「地味」ではありますが。
ここで注意するのは，この壁紙は、Windowsの壁紙を「並べて表示」したものと同じだ、ということです。つまり背景が全部埋まるまでイメージを並べて表示するのです。だから貼るイメージはよく考えないと「元はかっこイイが壁紙にして並べると何か不自然」ということになってしまいます。特に風景写真などはそうでしょうね。イメージの大きさをうまく調節して背景の大きさにピッタリ合わせれば１枚で済みますが、それでは読み込むデータが大きくなり見に来てくれた人の待ち時間が長くなってしまうのでそのあたりは気を付けましょう。
スタイルシートで指定すれば、背景のリピート表示を抑制出來ます。
h?に關する解説。
見出しの文字のサイズを指定するタグです。そのためこのタグの前後は自動的に改行されます。数字が大きくなれば文字も大きくなります。サイズを指定しなかったときは<H4>と同じです。
見出しのレヴェルを指定するのがh?です。「文字のサイズ」は決つてゐません。「前後で自動的に改行され」るのは、そもそもh?がブロック要素だからです。なほ、h?の?の數字は省略出來ません。<h>なるタグはHTMLには存在しません。
fontタグの解説。
こちらの場合はタグの前後で改行はされないので文中でも使えます。ここで注意すべきなのは上の<Hn>タグとは数字とサイズの対応が逆、ということです。サイズを指定しなかった場合は<FONT SIZE=3>と同じです。
fontはインライン要素なので、ブロック要素の中でしか使へません。大體、見出しのレヴェルとフォントのサイズを比較して、「数字とサイズの対応が逆」などと言ふのは意味がありません。葡萄の粒の數と、蜜柑の房の數を比較するやうなものです──と云ふ比喩は自分でもよく譯がわかりませんが、h?の?の數字とfontの屬性sizeの値を比較するのはそれくらゐ無意味な行爲です。
インライン要素basefontとfontの屬性sizeでの相對指定のやり方。なぜその兩者をまとめて説明せねばならないのか不明。
bigとsmallの解説。
物理マークアップ。
論理マークアップ。
cite/code/kbd/sampはインライン要素。addressはブロック要素。なほ、xmpは「sampと同じ」ではない。問題がある要素なので、マーク附けに用ゐるべきではありません。HTML 2.0時代から「非推奬」です。
フォントフェイス（書体）を指定するタグです。nameの所には"Times New Roman"とか"Century"などと入力するわけです。が、私たち日本人はNetscape Navigatorでは{Option}の{Document Encoding}を{Japanese}にしていますね。この場合nameで英文フォントを指定しても無視されてしまいます。(IEだと大丈夫）ですから海外の方にも見てもらおうと英語ヴァージョンのホームページを作る以外はあまり役に立たないですね。ただし｛ＭＰ Ｐゴシック｝や｛ＭＳ 明朝｝などは使えます。このときＭＳ Ｐの部分は全角で書いてください。
fontの屬性で書體を指定出來る、と云ふ言ひ方の方が正しいと思ふが如何。
それから、日本語文字コードのHTML文書でフォントを指定しても無視されるのは、Navigator 4.xの不具合です。何だか妙な解説をして納得してゐますが、不具合を好意的に解釋して納得しても仕方がありません。Netscape 6.xでは改善されてゐます。
[ページ]の色指定のときと要領は同じです。［ページ］でも文字の色は指定できましたが、あれはページの文字全部に対してです。こちらは、強調したい部分だけ色を変える、といったようなときに使います。上の１６進数の方と下の色の名前の方、どちらでもいいです。
「強調」を目的に、fontで文字列に色を直接指定するのは止めて下さい。そもそも「色を附ける=強調」と云ふ發想自體が間違つてゐます。
強調を明示する際にはemでマーク附けします。
タグで使われる記号などを文として書くときは、キーワードやアスキーコードで書かないとブラウザには表示されません。
ブラウザに表示され
る、されないの問題ではないと思ひますが。タグをそのまま記述したら「ブラウザ」にタグとして認識されてしまひます。ソースに直接記述するとまづい文字は、實體參照を用ゐてUser Agentにタグや制御コードとして認識されないやうにする譯です。
また、實體參照は、タグを記述するための「エスケープ」ではありません。
インライン要素のbrを教へねばならないと思つてゐるのは、ブロック要素の概念を知らないからです。
nobrやwbrは、普通のHTMLには存在しません。獨自仕樣ですので、この解説は「ただしInternet ExplorerやNetscape Navigator独自のタグについては記載していません。」と云ふ「前置き」に反すると思はれます。
<P>
<P ALIGN="option">...</P>
<DIV ALIGN="option">...</DIV>
<Hn ALIGN="option">...</Hn>
ここは出たら目な解説のオンパレードです。
<P>タグは段落の変更を表わします。この後は１行分空いて改行されます。<BR>タグよりも間を空けて改行したいときに使うといいでしょう。
pはブロック要素で、<p>〜</p>は「段落(Paragraph)」を意味します。そもそも、１行分空いて改行
を意味するのならば、なぜpには終了タグが存在するのでせうか。奇ッ怪なのは、さう云ふ矛盾もものともせず、筆者が平然と<P ALIGN="option">...</P>
なるサンプルを提示してゐる事です。筆者の解説によれば、このサンプルは「段落の變更」を右揃へにするものでなければをかしいではないですか。
Hnだけはフォントサイズも一緒に指定できる、という以外は３つとも同じと思って構いません。
フォントサイズは全然指定されてゐません。何度も言ひますが、h?は「見出しレヴェル」を意味するのであり、フォントのサイズは決つてゐません。
もちろん、この3つの例は、全て意味が異つてゐます。pは段落、divは未定義(idやclassを設定しないと無意味)のブロック要素、h?は見出しです。こんな出たら目な解説があるから、見出しだらけで本文のない謎文書を書く人が大量に出現するのです。
<UL>タグの間ではマーク付きリストの範囲を指定します。本文でもたまに行頭に黒点の付いた文が出て来ますね？ あれのことです。
例によつて、絶妙に妙な日本語の文章です。タグの間で範圍を指定? 開始タグと終了タグで範圍を指定、ならば解りますが。
ちなみに、ulは「順不同リスト」(Unordered List)です。一般にこの手のリストは「箇条書き」と呼ぶのではないですか。
で、<LI>がリストの１項目を意味しています（つまり<LI>は<UL>の中で使うのです）。<LI>を付けていれば文の後で改行されて、また頭から表示するので<BR>タグはいりません。<UL>タグは入れ子にすることもできます。段落をふむということですか。
段落をふむ
なる意味不明な文言或は出來の良くないジョークがあるのを除き、無難な記述です。もつとも、liの中でbrを使ふ事は可能ですし、olの中でliを使ふ事もあるので、必ずしも正確な解説とは言へません。
と言ふか、段落と云ふ概念を筆者は理解してゐないのではないでせうか。
「順序つきリスト」(Ordered List)。リスト關係の記述は、まあまあ無難です。
サンプルが妙にユーモラスであるのはどうでも良いのですが、割と無難な記述です。しかし、なんでいきなり「DL COMPACT」を説明しますか。ulとolの屬性にもcompactは存在しますよ。それあ、IEとNNが對應してゐるのはdlだけですが。
menuとdirは、HTML 4.01非推奬の要素です。「<UL>タグと同じように表示される」から「使用頻度が低い」譯ではありません。「<UL>タグと同じように表示される」のはIEとNNの實裝が手拔きだからです。
このタグに挟まれたテキストは等幅フォントで表わされます。また｛メモ帳｝などで作ったテキスト内での改行やスペースがそのままブラウザに反映されます。面倒ですが自分の思った通りのレイアウトに出来るという利点はありますね。こだわり派タグでしょうか。
鳩丸のHTMLリファレンスには、preの用途として、以下のやうな例が擧げられてゐます。
- プログラムや HTML のソースコードを表現する。
- 整形された定型詩を表現する。
自分の思った通りのレイアウトに
したいからと言つてこだわり派タグ
のpreを使ふ位ならば、スタイルシートを使ふべきでせう。
blinkの解説。Navigator(Mozilla Classic)の獨自仕樣ですので、この解説はただしInternet ExplorerやNetscape Navigator独自のタグについては記載していません。
と云ふ「前置き」に反します。
個人的に「blinkは點滅させる事で文字列を讀みにくくするためのタグ」だと認識してゐます。もともと意味を明示してゐない要素ですから、閲覽者がその要素をどのやうに解釋するかは勝手ですね。
blockquoteはブロック要素。citeはインライン要素(出典の明示)です。なほ、インラインでの引用はq要素で示します。
<IMG SRC="file name">
必須のalt屬性が拔けてゐます。減點。
file nameには自分の貼りたいイメージのファイル名を書きます。ここで注意をすべきなのは、イメージファイルの拡張子はgifかjpegでなければならない！ということです。PlugInなどを使えば今は様々なフォーマットのファイルを表示させることができますが、ここでは一応そうしておきます。さてgifとjpegの違いですが、gifは256色表示でjpegはTrue Color表示です。gifはタイトルなどの絵に、jpegは写真などに、というような使われ方をするようですが、jpegではファイルのサイズが大きくなるので見ている人が遅くてイライラするかもしれません。jpegとgifのファイルサイズと画質比較については[NEXT Step]で書いていますのでそちらをご覧ください。
拡張子がgifかjpg
ならば大丈夫かと云ふと、さうではありません。Windowsビットマップファイルの擴張子をjpgに變へても、正常なJPEGファイルだと認識するUser Agentは存在しません。「畫像を用ゐる際にはファイルフォーマットをGIFかJPEGにする」と云ふ記述ならまだ増しです。實際には、IE4/NN4がpngに對應してゐるので、gifかjpg
しか使へないかのやうな記述は不正確と言はざるを得ません。プラグインなしで表示可能です。
GIFとJPEGの違ひに關する解説も、かなり好い加減です。GIFは可逆壓縮で最高256色まで使用可能、JPEGは非可逆壓縮でフルカラーに對應してゐる、と言つた方が、より増しな解説になるのではないですか。GIFの壓縮アルゴリズムは、セル畫塗の畫像のやうに連續して同じ色が出現する畫像を壓縮するのに向いてゐます。JPEGの壓縮アルゴリズムは寫眞のやうなランダムに色が出現する畫像ファイルを壓縮するのに向いてゐます。何よりフルカラーに對應してゐるので、屡々寫眞を壓縮するのに使はれます。
JPEGにしろGIFにしろ、うまく壓縮しないと、ファイルサイズは巨大になります。特に、寫眞のやうな素材は壓縮しづらいので、JPEGでもGIFでも、ファイルは大きめになります。JPEGだからファイルのサイズが大きくなる
と云ふのは、濡れ衣です。バナーをJPEGで作成しても、うまく壓縮がかかつて、GIFよりもファイルサイズが小さくなる、と云ふ事はあり得ます。
イメージは基本的には（というのは、あとで説明するオプションを使うとそうではないということ）１行のテキストとしか並べて表示できません。
imgがインライン要素である事を理解してゐれば、かう云ふ「良くわかつてゐない」解説は書かなかつたのではないかと思はれます。
align屬性の話なのだから、前の項目で一緒に説明した方が良いのでは。
これも。
heightとwidthの屬性は、「イメージのサイズを変え」る爲のものではなくて、この解説の後半に出てくる「見てくれる人への心配り」の爲のものだと私は認識してゐるのだが。
なぜお終ひの方にalt屬性の解説を囘しますか。alt屬性の重要性を、筆者は全然理解してゐません。
これには２つの理由が考えられます。１つは「ブラウザが<IMG>タグをサポートしていないのでイメージを見ることができない」。もう１つは「見ている人が，イメージが表示されている前に読み込みをストップしてしまった」場合です。
素人考へには時々はつとさせられる記述があるもので、確かにこの後者の事例はあり得る。
一般には、畫像を見る事の出來ない閲覽者の爲にalt屬性を記述する事、とされてゐます。視覺系User Agentが畫像を表示しない/出來ない場合、閲覽者が畫像を見る事が出來ない場合(音聲ブラウザを使用してゐるなど)のいづれの場合にも、この代替テキストが使はれます。
ここの記述は全うです。
何でハイパーテキストの講座で、リンクの解説を後囘しにしますか。
a要素のhref屬性の解説。またこのタグに挟まれた文字には下線が、イメージには枠が付きます
と云ふMosaic系User Agent依存の記述がありますが、（設定にもよりますが、基本的には）
と云ふ註釋で救はれてゐます。
base要素の解説もありますが、このタグは<HEAD>タグの間で使ってください。
、と云ふ説明では不充分です。「base要素を用ゐる場合は、それ以前にURIを記述してはならない。URIが出現する以前にbase要素を記述しなければならない。」と云ふ注意書が必要です。
a要素のname屬性の解説。無難と云へば無難な記述になつてゐますが、要らないと言へば要らない記述です。
「Client Side Image Map」。なぜ「イメージ」を省略したのかは不明。
「http://www.tky.3web.ne.jp/~shadow/index.htmlのやうに、代替アンカーが存在しない場合、クライアントサイドイメージマップに對應してゐないUser Agentはそこから先に進めなくなる。かならず代替のアンカーを用意しておく事。」と云ふやうな記述がない。もちろん、さう云ふ記述をした上で、http://www.tky.3web.ne.jp/~shadow/index.htmlみたいなHTML文書を書いてゐるのだつたら、たちが惡すぎ。
しかしまあ、クライアントサイドイメージマップなんて、專用のツールで作つた方が早いと思ひますが。
これはimgの枠についての解説です。「リンクの枠」についての解説ではありません。
<TABLE BORDER>のときは表の罫線が表示されます。
鳩丸のHTMLリファレンスには、以下の記述があります。
現在では、TABLE border は TABLE frame="border" の略記とみなされます。
はつきり言つて、tableについては、面倒なので一々記述を點檢しません。大體、tableなんてツールで作るものだらうし。
このフレーム機能はNetscape Navigator 2.0から使えるようになった機能です。これによりNetscape Navigatorの需要は爆発的に伸びたようですが、入門者にとっては最初で最後の（？）難関といえるかもしれません。もう少し簡単な手続きでできるようにと検討もされていますが，とりあえずは現行での仕組みを理解しましょう。一応丁寧に説明したつもりではありますが、自分でも色々試行錯誤しながらやってみてください。
frameは、NN2から「使えるようになった機能」と云ふよりは、NNが勝手に作つて勝手に實裝した獨自仕樣です。HTML 3.2ですら認められず、HTML 4.01でやつと追認されましたが、XHTMLの將來ヴァージョンで廢止されさうな雰圍氣です。HTML 4.01にはFramesetと云ふ特殊なDTDが用意されてはゐます。しかしそれはHTMLの繼子です。frameをHTML初心者は覺える必要がありません。いや、さう言切つて良いものかどうかは問題があるでせうが──個人的な見解としては、frameはおぼえない方が幸せでゐられると思ひます。
どつちみち、frameもツール任せにしてしまつた方が良いと思ひます。おぼえておけば良いのは、noframes(noframeに非ず)を必ず記述すると云ふ事だけです。
感心な事に、noframesの解説があります。もつとも、こんな事を書いてしまつては臺無しですが。
このドキュメントは一応Netscape Navigator 3.0、Internet Explorer 4.0以降を前提にしていますし、たいていの方がこの２つのブラウザ以上と思うので、私の場合はこれを使っていませんが（そのかわりに"ことわり書き"を書いています），フレーム非対応ブラウザの方にも見てもらおうと思う場合は、必要でしょう。
lynxユーザを平氣で門前拂ひにするのはやめませう。そもそも、入口には何の「ことわり書き」も無かつたやうに記憶してゐますが。と云ふか「閲覽おことわり」なんて書くのは、閲覽者に對して非常に失禮ではないですか。
どーですか？ 結構面倒なもんだったでしょう？ でもファイルを分けることによって各々のフレームで違う背景の色を使うなどということもできるし、何より見栄えする（笑）のでがんばってみてください。
そもそも、見榮えの爲にframeを使ふべきではありません。さう云ふ理由でframeの使用を推奬するのは止めて下さい。
何を基準にリファレンスを書くか、ということは考えました。HTML規格はW3Cによって決められているわけですが、それによって推奨されているタグのみで記述するとInternet ExplorerやNetscape Navigatorがせっかく持っている描画能力を制限してしまうことにもなり兼ねません。ユーザー人口を考えるとこの2つのブラウザのどちらかを使っている人が世の大半を占めることは明らかですので、最終的にはこの2つでの動作環境を前提としてリファレンスを作ることにしたのです。
個人的には、IEやNNの「描画能力」に依存して、HTMLがせつかく持つてゐる論理マークアップの能力を制限してしまふ事こそ危惧すべきだと思ひますが。或は、最近は、HTMLで論理構造を明示し、スタイルをスタイルシートで記述する事で、レガシーなHTMLの記法よりも美しい見榮えを實現しつつ、過去のブラウザでも必要な情報を提供する、と云ふ便利な事ができるのですが。
まあ、立場を闡明にしてゐるのは良い事ですね。見榮えに拘はりたいと云ふ立場を闡明にしてゐる以上、どうぞ存分に拘はつて下さい。しかし、見榮えに拘はりたいのに、「HTMLタグ」は必ず書くべしとか、見榮えと關係のない事に拘はるのは、止めていただきたいものです。