W3C勧告HTML4.01 についての入門マニュアルです。 市販のHTML本では満足出来ないあなたに送る、HTML講座。CSSについても補足していきます。

この入門編の目指す所 (はじめに)

世の中には様々なHTML解説本が存在しますが、誠に残念ながらW3C勧告を読んだ事が無いのではないかと言うような本が多数を占め、私ですら間違いに気づく説明が多数含まれている本もあります。

そうした誤ったHTMLの氾濫している状況に危惧し、このマニュアルの策定を手がける事にしました。

この入門編の目指す第一段階は、
  1. 正しいW3C勧告HTML4.01を理解する
  2. ブラウザに合わせたHTMLとの違いを理解する
  3. HTML4.01に親しむ
  4. W3C勧告やDTD等、上級書を理解する基礎を身に付ける
以上4点を皆さんに伝える事です。

3月23日時点で、HTML4.01の全属性説明を終了しました。
要素説明と冗長している部分、並びに要素説明との書式の食い違いについて、今後修正を加えていき、整合性並びに視認性を高めたいと考えています。また、DTDの読み方についての基礎知識に関するコラムを幾つか取り上げたいです。

それらが終了すれば、第二段階として、
  • ホームページ作成講座(※TIPSや事例を含めて、より判りやすく)
  • XHTML1.0/1.1
  • スタイルシート言語 CSS1/2
  • スクリプト言語 JavaScript
など、第二段階・第三段階と続けて執筆していきたいと考えています。
始まったばかりの当ブログですが、今後とも宜しくお願い致します。

なお、ここで記述するHTMLは、HTML4.01を基準としています。HTML2や、HTML3.2、またはHTML+など、他の版では「正しい」とされる説明でも、HTML4.01で「誤り」とされる場合、このマニュアルでも「誤り」として記述します。

それらについて、判る物については注釈をつけますが、原則としてHTML4.01以外のHTMLについては、私は全く不勉強ですので、充分な説明が無かったり、誤った説明があるかも知れません。ご了承ください。

Posted at 2005年02月23日(水) 22:16 / この入門編の目指す所コメント(1)
参考サイト様 (はじめに)
このマニュアルを策定するにあたり、

W3C勧告 HTML4.01 英語版原文 1999年12月24日版
http://www.w3.org/TR/1999/REC-html401-19991224

同 私的日本語訳 HTML 4仕様書邦訳計画補完委員会 2001年2月11日版
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html

Another HTML-lint gateway k16さん 2005年2月2日版
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

とほほのWWW入門 杜甫々さん 2002年3月24日版
http://www.tohoho-web.com/www.htm

などを参考にさせて頂きます。
Posted at 2005年02月23日(水) 22:35 / 参考サイト様コメント(0)
HTMLとは。 (はじめに)
World Wide Web の出版用言語である HyperText Markup Language である。

また、HTML4とは、文書記述言語 国際標準 ISO 8879 に適合するSGMLStandard Generalized Markup Languageアプリケーションの1つである。

ここで説明していくHTML4.01は、過去のHTMLを継承し、テキスト、マルチメディア、ハイパーリンク機構、スクリプト言語、スタイルシート、印刷機能、ハンディキャップを持つ人々へのアクセス性など、様々な機能を提供する。
(W3C勧告 HTML4.01 英語版原文−概要を参考に致しました)

HTMLの文書型定義は、DTDとして定められている。
(HTMLのバージョンによってDTDがそれぞれ存在する。)
Posted at 2005年02月23日(水) 22:40 / HTMLとは。コメント(0)
タグと要素と要素名、属性と属性値。 (はじめに)
開始タグ・内容・終了タグの全てを含めて「要素」と呼びます。
・開始タグに記されるのは、「要素名 と属性名、属性値」です。

要素名は大文字で表記し、属性名は小文字で表記します。
これはW3Cの記述例に併せた物ですが、HTMLでは大文字でも小文字でも問題は有りません。視認性を高める為だけの理由です。


なお属性値は、原則としてダブルクォート"" またはクオート'' で囲む必要が有ります。
例外的に、[ A-Z a-z 0-9 - . _ : ] だけしか含まない場合には、囲まなくても良い事になっていますが、その場合でも囲む事が推奨されます。
Posted at 2005年02月23日(水) 22:47 / タグと要素と要素名、属性と属性値。コメント(0)
色と色名 (色見本)
色は、通常は16進数で表記するが、次の16色は色名が許可されている。
Black = "#000000" Green = "#008000" Silver = "#C0C0C0" Lime = "#00FF00" Gray = "#808080" Olive = "#808000" White = "#FFFFFF" Yellow = "#FFFF00" Maroon = "#800000" Navy = "#000080" Red = "#FF0000" Blue = "#0000FF" Purple = "#800080" Teal = "#008080" Fuchsia = "#FF00FF" Aqua = "#00FFFF"
この16色以外の色は、HTML4.01では 16進数(#ffffff)で書く事となっている。
なお、背景画像や背景色を指定する場合は、テキストなどへの色指定も行う事と指針で定められている。
Posted at 2005年02月24日(木) 00:32 / 色と色名コメント(0)
色見本:ブラウザ依存色(1) (色見本)
ブラウザによっては、これらの色名も判断してくれます。但し、HTML4.01基準色名では有りませんので、避けるべきです。
#696969 dimgray #006400 darkgreen #A9A9A9 darkgray #00FA9A mediumspringgreen #D3D3D3 lightgrey #00FF7F springgreen #DCDCDC gainsboro #20B2AA lightseagreen #F5F5F5 whitesmoke #228B22 forestgreen #8B0000 darkred #2E8B57 seagreen #8B008B darkmagenta #32CD32 limegreen #8B4513 saddlebrown #3CB371 mediumseagreen #A0522D sienna #40E0D0 turquoise #A52A2A brown #48D1CC mediumturquoise #B22222 firebrick #556B2F darkolivegreen #B8860B darkgoldenrod #66CDAA mediumaquamarine #BC8F8F rosybrown #6B8E23 olivedrab #BDB76B darkkhaki #7CFC00 lawngreen #C71585 mediumvioletred #7FFF00 chartreuse #CD5C5C indianred #7FFFD4 aquamarine #CD853F peru #8FBC8F darkseagreen #D2691E chocolate #90EE90 lightgreen #D2B48C tan #98FB98 palegreen #D8BFD8 thistle #9ACD32 yellowgreen
Posted at 2005年02月24日(木) 00:52 / 色見本:ブラウザ依存色(1)コメント(0)
色見本:ブラウザ依存色(2) (色見本)
#DA70D6 orchid #ADFF2F greenyellow #DAA520 goldenrod #F0FFF0 honeydew #DB7093 palevioletred #F5F5DC beige #DC143C crimson #F5FFFA mintcream #DDA0DD plum #FAFAD2 lightgoldenrodyellow #DEB887 burlywood #FFFFE0 lightyellow #E9967A darksalmon #FFFFF0 ivory #EE82EE violet #00008B darkblue #EEE8AA palegoldenrod #0000CD mediumblue #F08080 lightcoral #008B8B darkcyan #F0E68C khaki #00BFFF deepskyblue #F4A460 sandybrown #00CED1 darkturquoise #F5DEB3 wheat #00FFFF cyan #FA8072 salmon #191970 midnightblue #FAEBD7 antiquewhite #1E90FF dodgerblue #FAF0E6 linen #2F4F4F darkslategray #FDF5E6 oldlace #4169E1 royalblue #FF00FF magenta #4682B4 steelblue #FF1493 deeppink #483D8B darkslateblue #FF4500 orangered #4B0082 indigo #FF6347 tomato #5F9EA0 cadetblue
Posted at 2005年02月24日(木) 01:01 / 色見本:ブラウザ依存色(2)コメント(0)
色見本:ブラウザ依存色(3) (色見本)
#FF69B4 hotpink #6495ED cornflowerblue #FF7F50 coral #6A5ACD slateblue #FF8C00 darkorange #708090 slategray #FFA07A lightsalmon #778899 lightslategray #FFA500 orange #7B68EE mediumslateblue #FFB6C1 lightpink #87CEEB skyblue #FFC0CB pink #87CEFA lightskyblue #FFD700 gold #8A2BE2 blueviolet #FFDAB9 peachpuff #9370DB mediumpurple #FFDEAD navajowhite #9400D3 darkviolet #FFE4B5 moccasin #9932CC darkorchid #FFE4C4 bisque #ADD8E6 lightblue #FFE4E1 mistyrose #AFEEEE paleturquoise #FFEBCD blanchedalmond #B0C4DE lightsteelblue #FFEFD5 papayawhip #B0E0E6 powderblue #FFF0F5 lavenderblush #BA55D3 mediumorchid #FFF5EE seashell #E0FFFF lightcyan #FFF8DC cornsilk #E6E6FA lavender #FFFACD lemonchiffon #F0F8FF aliceblue #FFFAF0 floralwhite #F0FFFF azure #FFFAFA snow #F8F8FF ghostwhite
Posted at 2005年02月24日(木) 01:02 / 色見本:ブラウザ依存色(3)コメント(0)
<!-- 〜 --> (タグ説明)

親要素
HTMLファイル全体
タグ
これはタグではない。
内容
テキスト
ハイフン'-'を2つ以上連続してはならない

終端の'-->'は、'>'の前に半角空白文字を挿入しても良い。

<!-- 例 -- >
Posted at 2005年02月24日(木) 01:16 / <!-- 〜 -->コメント(0)
<!DOCTYPE> (タグ説明)

親要素
HTML4.01において必ずファイルの先頭
※空白や改行、コメントなどは先に現れて良い。
タグ
これはタグではない。
HTML4.01 において必須である。
内容
含まない。

HTML4〜4.01においてはこの文書型宣言は必須となっているが、文書型宣言にそぐわないタグを利用する事は出来ない為、ブラウザ独自タグを利用するなど、HTML4.01に沿っていない書き方をする場合、この宣言はしない方がマシであると言える。

但し、CSSを利用する際は、宣言した方が良い
● HTML 4.01厳密型DTD − 推奨しない要素や属性を含まない。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

● HTML 4.01移行型DTD − 推奨しない要素や属性も含む。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

● HTML 4.01 フレーム設定型DTD − フレームセットも含まれる。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

最初にあらわれるHTML は、これが「HTML」である事を示す。
PUBLIC は、これが公開された一般的な仕様である事を示す。
最初の"" で囲まれた部分は、どのタイプのHTMLであるかを意味している。
 なお、最後のEN は、DTDが英語を基準に書かれている事を意味する。
最後のURIは、URIにDTD原文が保存されている事を意味する。


Mac 版のIEや、Mac・Winに関わらず各種のGekkoエンジン搭載ブラウザ(FirefoxやNetscapeなど)を利用しているユーザーには影響が少ないが、Windows版InternetExploler 6.0以降を利用しているユーザーにとっては、非常に重要となる。

Windows版IEの場合、Ver6.0以前までは、CSSへの対応状況は残念ながらバグが多かった。そして、Ver6.0以降では改善された機能が多数あるのだが、なんとWin版IE6.0以降では、古いVerとの互換性を保つ為に、わざとバグをそのまま継承している互換モードで動作する。

これを、バグフィックスされたモードである「CSS標準モード」で起動する為には、HTML4以降に準拠し、Doctype宣言を正しく行う必要があるのだ。

但し、勿論Ver6.0より前のVerでは、Doctype宣言を正しく行ってもバグが発生したままで有る事には注意して欲しい。

なお、xml文章では、CSS標準モードで普通に起動できるが、今度は逆に?xml?宣言を行うとバグが発生するのはIE6の固有のバグである。

Posted at 2005年02月24日(木) 01:23 / <!DOCTYPE>コメント(0)
| 次へ
Global Media Online INC.