第1章 HTML文書の基本中の基本

1:普通のHTML文書

ここではHTML文書の基本中の基本を教えます。
だいたいどんな文書も、以下の用な物が基本になっています。
実際には見えませんが、ソースを見てみるとほとんどのページに下のような部分があります。
ソースの表示方法は、右クリックで「ソースの表示」等を選べば表示されます。


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

<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
</HEAD>
<BODY>
-本文-
</BODY>
</HTML>


さて、さっそく上の文をメモ帳などで打ち込んで下さい。
そして拡張子を「.html」にして保存すれば、なんとこれだけでページの基本は完成です!
ブラウザで開いてみて下さい。普通のテキストに見えますが、ちゃんとしたHTMLファイルになっています。
あとはこれに本文をうじゃうじゃ付け足していけば立派なページができあがります!

では、以下に説明をしていきます。
つまり、ヘッダーを少しいじってから、本体部分を書いていけばいいわけです。
では本体部分の主な設定を説明します。

BODY
HTML文書の本体部分を示します。
本体内の文などの設定をすることも可能です。
ところが最近はスタイルシートと言うものができたので、そっちを使った方が便利です。

▲使用例▲

<BODY background="背景画像" bgcolor="背景色" text="文字色"
      link="リンク色" alink="選択中リンク色" vlink="選択済みリンク色">

〜本文を書きます〜
</BODY;>

2:ヘッダー内部

さて、ヘッダーの中にはいろいろなそのページについての情報を書き記します。
そのためには以下の要素(タグとは実際に書いたそのものを指します)を使います。
では、実際に解説していきます。

TITLE
そのページのタイトルを指定します。
指定したタイトルはブラウザのタイトルバーに表示されたり、
ブックマークの名称として使用されます。
絶対ではないですが指定するべきです。

BASE
そのページの基準となるURIを指定します。URIと言うのはURLよりも広い範囲の事を言うそうです。
基準となるURIと言うのは、相対パスで指定したときに付け加えられるURIです。
たとえば基準URIを[http://www.freak.ne.jp/HEPOPO/html2/]と指定して、相対パス(リンク等の)を[index.html]とすると、
相対パスは現在のURIに関係なく[http://www.freak.ne.jp/HEPOPO/html2/index.html]という風に変換されます。
ちなみにこれを指定しないと、現在のURI(そのページのURI)が基準となります。

LINK
そのページと、別のページの繋がりを指定します。
具体的な例では、ストーリー物などの次のページ、前のページを指定したりします。
その他、目次ページ、ヘルプページ、索引ページ等々いろいろ指定できます。

META
META要素は、ページの様々な情報を記します。
情報は主に「ページの著者」「ページの著作権」「ページの発行日」「検索エンジンでのキーワード」「使われている文字コード」
等々、大量に記すことができます。
特殊な使い方としては、3秒後に別のページへ移動する。なんて事もできます。

STYLE
HTML文書を修飾する、スタイルシートを書き込みます。
スタイルシートはHTMLによる修飾の代わりになる物で、これから飾り付けのメインになるかもしれません( ;^^)ヘ..
スタイルシートの詳しいことについては別の専門ページを参照して下さい。

▲使用例▲

<HEAD>
<TITLE>ほーむぺーじのたいとる</TITLE>
<BASE href="基準となるURI">
<LINK href="Index" rel="インデックスページ">
<LINK href="Next" rel="次のページ">
<LINK href="Prev" rel="前のページ">
<META name="Author" content="著者の名前">
<META name="keywords" lang="jp" content="検索時のキーワード">
<META http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"><!--シフトJISを指定-->
<META http-equiv="Content-Script-Type" content="text/javascript"><!--JavaScriptを使うことを指定-->
<META http-equiv="refresh" content="3,next.html"><!--3秒後にnext.htmlへ移動-->
<STYLE>
</STYLE>
</HEAD>

3:コメント&特殊文字&色名

HTMLにはコメントと言う物が存在します。
コメントに指定した部分は実際には表示されません。
つまりHTML文書の部分ごとの説明を書いておいたり、隠しメッセージなどを書くことが出来ます。

特殊文字は、HTMLのタグに使用される記号などを書くために使われます。
主な物は「<」「>」「&」「"」「 」等があります。
どんなものがあるかは、「文字参照一覧表」を参照して下さい。

また、色は#000000等の16進数で表示することの他に、
色名を使って指定することが出来ます。「色名一覧表」を参照して下さい。

▲使用例▲

<BODY bgcolor="AliceBlue">
<!--ここは表示されません-->
<COMMENT>IEだとここもコメントになるんです</COMMENT>
<!--本体部分-->
&lt;開始タグ&gt; &nbsp;&nbsp; &lt;/終了タグ&gt;
<!--<開始タグ>  </終了タグ> と表示されます-->
</BODY>


Copyright(C) 風浪へぽぽ
★INDEX★