よりよいHTML文書を書くための約束
「HTML文書」について、忘れずに是非書いておきたい、「約束」を紹介します。
◆ ドキュメントタイプ宣言.<!DOCTYPE HTML PUBLIC〜って？
タグを使って文書を作る「マークアップ言語」には、HTML以外にも色々ありますが、<!DOCTYPE
……> は「タグ」ではありません。
これは SGMLの「マーク宣言(markup declaration)」です。
「この HTML 文書が何の仕様に沿って作られた文書情報」を最初に宣言するのがドキュメントタイプ「DOCTYPE」宣言です。
下記の３種類の DTD （Document Type Definition.）を、宣言します。
ダブルクォーテーション(" ")の中に DTD HTML 4.01 〜と、ありますネ！
他にも複数のバージョンがあります。正確には、W3C のHTMLまたは、ISOの[ISO8879] をご覧下さい。
HTMLでホームページを作る場合、HTML文書のいちばん最初に（<HTML>タグの前に）以下の1行を書き込みます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strict//EN">
W3C の DTD に基づいて、不適切 (deprecated) な要素・属性が無いときに、宣言します。
この中では、一番厳密で厳格バージョンです。もちろんフレームは使えません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
DTD に基づいて非推奨 (deprecated) 要素・属性も使用しすべての要素・属性から成り立っていて自由の利く宣言です。
（フレームは、使えません。）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
これは、Transitional. にフレーム(Frameset)を加えたものです。
フレームとは、色々なホームページを訪問すると、よく見かけますがブラウザの画面の中が、スクロール・バーや仕切りで幾つかに区切られています、無い場合もありますが。上・下・左・右に境が出来たりしてる物があると思いますが、そんな状態をフレーム仕様と言います。
◆ “日本語”の宣言.<HTML LANG="ja">
<HTML>タグに「LANG」属性をつけ ja と言う情報をつける「<HTML LANG="ja">」と記述することで「この文書は日本語（Japaneseの略）で記述されている」ことを意味します。
また、文章中で一部に他の国の綴りを使用するときにもLANG="略式国名"を使用する場合もあります。（米語＝"en-US"、USAインディアン＝"i-navajo"、英語＝"en"、ロンドン＝"en-cockney"、仏語＝"fr"、独語＝"de"、ギリシャ＝"el"、露語＝"ru"、伊語＝"it"、オランダ＝"nl"、スペイン＝"es"、ポルトガル＝"pt"、アラビア＝"ar"、ヘブライ＝"he"、中国＝"zh"、韓国＝"ko"、ヒンディー＝"hi"、ウルドゥ語＝"ur"、サンスクリット＝"sa" 等の言語名、後は、The XML Cover Pages. で調べて下さい。）
日本語OS(Operating System.)を使っている私達は、日本語のHTML文書を当然なように読むことができます。
しかし、英語などの他国環境からそのHTML文書を見た人は、文字が文字化けし何語で書かれているのかさえも分かりません。
こんなとき、ソースを見て「LANG="ja"」という記述があれば外国語環境の人も「これは日本語で書かれている」と簡単に理解でき、もしも読む必要があるのなら日本語環境をインストールすれば良いことが一目瞭然でわかります。
◆ <META>で文書に付加情報を設定
<META 〜>は、文書に付加情報を付け、WWWサーバーを通じて見ているブラウザに、html
（ページ）の内容と一緒に情報を送ります。
<META>にも色々ありますが、ページ作りで最低入力して欲しいものを挙げました。
・ 文字コードの宣言.
<META http-equv="Content-Type" content="text/html;charset=ISO-2022-JP">
普段は、意識することなく、私達がコンピュータで日本語の文書を入力するときには、おもに3種類の「文字コード」が存在します。
「文字コード」とは日本語を数字にしか解釈しないコンピュータに理解させ作動させるための変換ルールのようなもので、とある文字コードでは「あ」なのが、別のコードでは「う」だったりします。
Webブラウザでは、日本語のページにあたったときに自動的に文字コード（エンコード）を判別していますが、ときどき判別を間違え、「文字化け」の原因となってしまうことがあります。 このようなトラブルを避けるため、「META」要素を使って文字コードの宣言を行います。（指定がないと、欧文・英文の文字コードが指定される可能性があります。）
WindowsやMacintoshで使われる一般的な日本語文字コードは「シフトJIS」と呼ばれるもので、ヘッダ内に次のタグを記述することで宣言されます。
逆に文字コードの指定を間違えてしまうと、Webブラウザ側で文字コードを設定しても文字化けが解消されないといった、より深刻な問題になってしまうので、注意が必要です。
ですので、貴方が利用（作業）しているOSがWinやMacであれば「シフトJIS」を使うべきでしょう。
日本語、文字コードの種類
文字符号づけの大文字・小文字は問いません。例えば、「SHIFT_JIS」、「Shift_JIS」および「shift_jis」は同じです。
- ・Shift_JIS（シフトJIS）
- MacOSやWindows で利用されている日本語エンコーディング。
- ・ISO-2022-JP（JISコード）
- インターネット標準の日本語エンコーディング。
- ・euc-jp（日本語EUC）
- UNIX系OSで利用されている日本語エンコーディング。
- ・ユニコード（UNICODE.国際規格、ISO/IEC10646)
- 種類があり utf-8｜utf-16｜ucs-2｜ucs-4 等がありますが比較的に使われているのは、utf-8です。
後で、スタイルシートも使いますので、 CSS 宣言し設置箇所も作りましよう。
<meta http-equv="Content-Type" content="text/html;charset=Shift_JIS"> <meta http-equv="Content-Style-Type" content="text/css"> <style type="text/css"><!-- --></style>
◆ LINKの定義.<LINK>
ページ（ドキュメント）間の関係、リンクを定義します。外部スタイルシートを呼び込むときにも使用します。
<LINK REL="***" 、REL属性は、現在のドキュメントからhref属性によって指定されたアンカーまで関係について記述します。
<LINK REV="***" 、REV属性は、現在のドキュメントへのhref属性によって指定されたアンカーからの逆のリンクについて記述するために使用されます。
<LINK REL="start" HREF="start.html"> <!--最初のページ-->
<LINK REL="index" HREF="../index.html"> <!--indexページとの関係--> <LINK REL="next" HREF="next.html"> <!--次のページ--> <LINK REL="prev" HREF="prev.html"> <!--前のページ--> <LINK REV="next" HREF="REV.html"> <!--この前ページ--> と言う感じです。
| REL,REVの属性値 |
|---|
| Alternate = メディア用バージョン Stylesheet = 外部スタイル・シート Start = ドキュメントの出発点 Next = 次のページ Prev = 前のページ Contents = 目次 Index = 索引（インデックス） Glossary = 用語辞典 Copyright = 著作権情報 Chapter = コレクション（テーマ）中の章 Section = コレクション（テーマ）中の節，段落 Subsection = コレクション（テーマ）中の項，小部，小分，細別，分課 Appendix = コレクション（テーマ）中の付録，コラム Help = ヘルプ（より多くの情報、他の情報などへのリンク） Bookmark = ブックマーク（拡張ドキュメント内の重要なエントリー・ポイントへのリンク） |
外部スタイルシートの読み込みは、
<LINK rel="stylesheet" href="ファイル名.css" type="text/css">
で利用します。
◆ 見えないコメント文字<!--コメント-->
上記に、何やら…「<!--□□□-->」と言うヘンなタグが出てきました？！
★テキスト（コメントタグ）と言います。作る途中で「これなんだ？」の覚え書きに良いものです。
ソースの修正に<!--これは、**テーマのABC--> と記入すれば一目瞭然！！
この<!--コメント-->を、使えば画面には、表示されないので便利です。
右側の矢印の先に<!--便利でしょう！-->書いてます、見えますか？→見えないでしょう。
しかし、この<!--コメント-->が、表示してしまうブラウザも存在します。<BODY>〜〜〜</BODY>内のタグであれば、このコメントの代わりに良い方法があります。
例えば、<!--コメント-->を<DIV TITLE="コメント">のように属性のタイトルを使えば良いでしょう。ただし、「TITLE="コメント"」使用する場合はポップアップウィンドウが出現してしまいます。（カーソルをしばらくこの段落に当ててみてください。）
最低限、三つの約束ごとを踏まえると、HTML文書の書き出し（土台）は以下のようになります。
★ さあ、ホントに、これでプロっぽい、基本の「 HTML 宣言文書」の出来上がりです。
次からは、<BODY>の、中身を作りましょう。
◆ ソースを見てみたい！
少しずつタグもわかってきたし、そろそろ「他のページがどのようなタグで構成しているか見たい」と思いませんか？
実は、どのようなホームページも簡単に観ることが出来るのですよ。(スケベェとかエッチとか言わないで校外学習です。）
NNなら「表示」→「ページのソース」で、
I.Eなら「表示(V)」→「ソース(C)」で簡単に観ることが出来ます。
もう一つの方法がありますが、右クリック禁止の場合は観れません。
ソースを観るブラウザで表示されている画面に対し、それを実現しているものをHTMLソースと言います。様々なWebページのソースを観ることで、多くのことを学ぶことが出来ます。但し、著作権などの関係上、そのまま流用することは許されませんし、またソース自体の文法が間違っているものもあるので注意が必要です。従って、参考までにした方が良いでしょう。基本的なソースの一例も用意しました。
また、ソースを見るとインデント（字下げ）されているのが解ります。これは、どの要素が何処のテキストを包まれているのか、製作者本人が解りやすくするためで一般的にプログラムを作る時の方法です。詳しくは、ソースの整理をご覧下さい。
保存方法も書いておきましょう。（そのまま使用しなければ、泥棒ではないですよ！研究です。）
■ ＩＥでのソースの見方
ブラウザ画面の中で、「右クリック」→「ソースの表示(V)」を選択ぶ→「左クリック」で、ソースを観ることが出来ます。ＩＥでは、自動的にメモ帳が開きます。（注：大きいファイルだと、ワードパットで開かれることもあります。）
保存は、ソースを開いたウインドゥの「ファイル(F)」→「名前を付けて保存(A)」で、任意の名前を付けて「保存(S)」をします。
■ ＮＮでのソースの見方
ブラウザ画面の中で、「 Viewをクリック」→「Document Sourceをクリック」で、ソースを見ることが出来ます。
しかし、ＩＥのようにコピー＆ペースト（貼付）が使えませね〜・・・。
そこで、「ファイル」→「名前を付けて保存」で、任意の名前を付けて「保存」をし、Simple
Textなどのエディターソフトで、保存したファイルを開いてコピー＆ペーストを使います。
■ Operaでのソースの見方
「表示(V)」をクリック→「ページのソースを表示(U)」をクリックするとテキストウインドゥが開きます。
因みに、「フレームのソースを表示(F)」は、閲覧ページがフレーム仕様の時にFramesetのHTMLを表示させる機能です。
この、他にも保存方法はありますが、これ以上は本当に泥棒になりますのでやめておきます。
タグ解説DOCTYPE＝説明済┃HTML LANG="ja"＝説明済┃META┃LINK＝説明済┃<!--Comment-->＝説明済META一般情報、METAデータ： HTML タグでは、定義できない付加情報に使います。例えば、文字コード情報や、作者の情報、検索エンジン用のキーワードなど、さまざまな情報をHTML文書内に埋めこむために使います。
|
STYLESTYLE：この要素を使ってカスケーティング・スタイル・シートを直接ＨＥＡＤ内に記述します。 <style type="text/css"><!-- セレクタ｛プロパティ宣言；｝ --></style> |
【←BACK ┃NEXT→】