nanmaida.com⇒ ＨＴＭＬ手習⇒ 初心者だけのＨＴＭＬ⇒ 本編

[初心者だけのＨＴＭＬ]  ○（ＴＹ:■まで飛ばして良い）こんにちは、私は初心者に毛が生えたものです、ここでは「私」と呼びます。 私は３年前までコンピュータのプログラムに触れた経験なく、今も計算機と関係ない業務に従事しています。理系の大学を卒業しましたが少年時代はマイコン、計算機に興味なく、大学生になって研究室に遊びに行き、ワープロで原稿を入力する手伝いをしながらキーの位置を学んだのでした。自分の金でコンピューターを買ったのは２６歳のときでした。当時パソコンを買うと分厚い本がついてきたもので、BASIC某と書いてありましたのできっとプログラムに関する本だったと思いますが、もちろん読まず使わずでした。ワープロ（一太郎⇒ワード）、絵描きソフト（花子⇒フォトショップ）、それから画像提示ソフト（パースエージョン⇒パワーポイント）のように時代に流されてその時のソフトを使うだけ、それはプログラムなんて時間の無駄だと考えていたからでありました。今でも時間の無駄とは思っています。 そんな私が３年前に放課後に趣味としてプログラミングの勉強を始めました。まずＨＴＭＬファイルを書けるようになりたいというのがスタートだったのですが、そのきっかけはKindlePaperWhiteという電子書籍用の表示器具に自分の文書を表示させたいと思ったことでした。本当はＨＴＭＬなど勉強しなくてもそれはできると比較的最近知りました。それでは本題に入ります。■（ＹＤ）と脱線から本線に戻るところには■印をつけ着色を施しました。○（ＴＹ）（ＹＤ⇒よみどころ）


■（ＹＤ）さてここで文章の行が変わりました。それは文章の終わりに<br/>を３つ書いたからです。 ○（ＴＹ）「いや、<br/>など見えないだろ。」そうです。
どのように表示するのかを伝える部分は見えない、それがＨＴＭＬです。
■（ＹＤ）<br/>１つで下に一行下りる、そうなっています。○（ＴＹ）え？この<br/>は見えているし下りていないじゃないかと？じつはそこは &ｌｔ;br/&ｇｔ;と書いていたのです。&ｌｔ;は < で&ｇｔ;は > です。ん？それでは&ｌｔ;と&ｇｔ;はどうしてそのまま表示されたのか？それはltとgtを全角で書いたのです。特別な文字には特別な役割があるため、そのまま表示させたければそのまま書いてはだめなのです。これまでの要点は

■（ＹＤ）原則１ ＨＴＭＬは表示される部分と表示されない部分でできています。

■（ＹＤ）原則２ < と > と / は特別な記号です。しかも半角で書かないとだめです。

まず書かれた文と見える文がべつものだと理解していただきました。書かれた文（ソース）を見るには画面（ウインドウ）上でマウスを右クリックすると「ソースを表示」みたいなのが現れます。そこに矢印をもっていってクリックするとソースのウインドウが現れます。
○（ＴＹ）ところがこれをみて多くの人がやめてしまうかもしれません。「たった数文字を表示するためにこんなに英語みたいな記号を打つのか」と。しかしそういう人間業を超えたことなどやっているはずがないという憶測を共有していただけたら次にすすめます。
■（ＹＤ）ソースは本当によみにくいです。ところでソースの改行が全く反映されていないはずですがどうでしょう。改行、空白それらは無視されます。○（ＴＹ）空白をつくる場合はどうするのか……「ＨＴＭＬ、スペース」でネット検索すればいっぱい出てきます。
ただそれよりも私が注意させるべきなのはソースの始まりかたです。

■（ＹＤ）ＨＴＭＬでは最初に「ＤＯＣＴＹＰＥ宣言文」と呼ばれるものが次のように書かれています。
<!DOCTYPE HTML>

「!DOCTYPE」と「HTML」の間に半角のスペースが一つ入ります。○（ＴＹ）宣言文とはなんともなおおげさな言い方ですが、約束事（ルール）を伝える伝達文・通信文です。何の約束事かというと「ドキュメントタイプの」ということです。ドキュメントタイプとはこれ以降の読み方（使用された文法）のことで、それをコンピュータに伝える部分がこの「ＤＯＣＴＹＰＥ宣言文」で、英語では「Document Type Definition」（DTD）と表現されます。外国語と日本語をちゃんぽんで使用している会話を聞くと、「あ、今、日本語入った。あ、今度英語にもどった」などいわれなくても気づくものですが、コンピュータもファイル名から使われた言語をおよそ察しながらも丁寧に伝えてほしがっていて、それを丁寧に伝えてあげるのがこの文頭の「ＤＯＣＴＹＰＥ宣言文」です。文法、約束事といえば先ほどの二つの原則もこのＨＴＭＬという書き方に独特な約束事です。
それではこれを書かないとだめかというと、装飾がほとんどないこういうページを日本語仕様のパソコンで見れば問題なく表示されますので、結果的には必須とは言えません。しかし数日以内に高級な装飾を施す方法を会得して、そのようなデータを国外でもみられるようにページを作るあなたですから、結局必要になるはずです。
これまでインターネットはいろいろなブラウザ（ネットを閲覧するソフトのこと、例 IE、Chrome、Opera、Safari）が流行の波を受けて隆盛と衰退を繰り返してきましたし、普及しているコンピュータがぐんぐん高性能になってきたため、可能な仕事の幅が広がりＨＴＭＬの書き方（文法）が変わり続けてきました。しかしその中で変わらないのは

・書き手でだけではなく、読み手の多数派がどのブラウザを使用しているかで使われる文法が決まることだからです。したがって

・最新の文法が最も普及しているわけではないので、

それも考慮しましょう。いろいろなバージョンのＨＴＭＬが存在し、それをコンピュータに判別させるために使用する文法をページの先頭に書く必要があるのです。
現在は最新のＨＴＭＬバージョン５よりも一つ前のＨＴＭＬバージョン４．０１（ＨＴＭＬ４．０）で書かれたＨＴＭＬが多数派となっています。例えば次のような書き方です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

しばらくはこの書き方がたくさん見られると思いますし、ＨＴＭＬ４．０で記入する方法を指南するテキストもたくさんありますのでもう少し深く掘り下げてみます。
ＨＴＭＬ４．０が最新型だった時代にはそれまで使用されていた幾つかの記号が非推奨（将来は使わないことにしましょうという意味）となりました。その記号を使用する・しない、それぞれの場合がＨＴＭＬ４．０では許されましたが、そのかわりＤＯＣＴＹＰＥ宣言文でそれを明らかにしなければなりませんでした。
■（ＹＤ）もし今後”どうしても”思った通りのスタイルに表示されなかったときはこの場所に戻ってこなければならないこともあるということを覚えておいてください。

あとは興味があれば囲みの中のような具体的な決まりがＨＴＭＬ４．０がありますが、私たちはあくまでもＨＴＭＬ５で書く勉強をしますのでこれはこのままにしておきます。

本編へ

ＨＴＭＬ４．０

ＨＴＭＬ４．０をＤＯＣＴＹＰＥ宣言文で分けると、Strict、Transitional、Flamesetの３つの型に分けられます。
非推奨要素と非推奨属性についてはHTML 4.01 と非推奨要素またはHTML 4.01 と非推奨属性のセットでネット検索すれば間違いなく現れます。
ヒットしなくなったときはＨＴＭＬ４．０を使用する人が少ないということでしょう。

1.Strict DTD

非推奨要素と非推奨属性が使用できません。フレームも使用できません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2.Transitional DTD

非推奨要素と非推奨属性は使用できますが、フレームは使用できません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

3.Frameset DTD

全て使用可能です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 4.0移行の非推奨要素は下記のものになります。
applet要素、basefont要素、center要素、dir要素、font要素、isindex要素、menu要素、s要素、strike要素、u要素、iframe要素


このページは私とともに放課後業務を行うスタッフが片手間に短期間でＨＴＭＬとＣＳＳで表現することを習得するために書いております。
ご自由にお読みください。
2016年10月25日