HTMLデータの基本

HTMLはタグで作られる

WWWにおけるWebページは HTML というフォーマットのテキストファイルとして作られる。
以前は簡単な機能しか無かったが、最近のバージョン(HTML4.0)では相当複雑なレイアウトなどができるようになってきた。
ホームページを制作するためのソフトウエアは色々あるが、 そのようなソフトを使っていても、どうしてもうまく行かないことがある。 そういう時に、HTMLの文法を知っていると、どこが良くないかを見つけることができるので覚えておいて損は無い。
さて基本的に HTML はマークアップという方法で、データを作ってゆく。
具体的には、タグというラベル( < から > まで)をテキストファイルに追加して行く。

上のフォーマットによって、テキストの部分が大文字になったり、リストになったり、 他のデータへのリンクになったりする。

HTMLの構造

HTMLのファイルは次のような形になっている。 

<DTD>       < - HTMLの種類を決める 
<HTML>      < - HTMLデータの始まり
<HEAD>      < - HEADデータの始まり
タイトル、スタイルシートやプログラムなど各種情報
</HEAD>     < - HEADデータの終り
<BODY>      < - BODYデータの始まり
HTMLの本文
</BODY>     < - BODYデータの終り
</HTML>     < - HTMLデータの終り

注意

<TITLE> ... </TITLE> の部分は、HTMLのファイルを作る時には、 必ず<HEAD></HEAD>に書いておくこと。
この部分に、そのHTMLのタイトルを適当に決めて書いておくわけだが、 これがないと、ブラウザはそのファイルをHTMLの文書だと思ってくれない。

また、実際には一番上にあるDTDの部分は無くてもブラウザに表示できるが、 正式なWebページには必要なものなので、きちんとDTDは書いておくべきである。

簡単なHTMLデータ

文法的なことは後で覚えることとして、とりあえず簡単な例をやってみよう。 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE> Simple HTML data 1 </TITLE>
</HEAD>
<BODY>
<H1>見出し </H1>
<P>
一つ目の段落 
</P>
<P>
二つ目の段落
</P>
</BODY>
</HTML>

上のデータを、viなどのテキストエディタを使用してtest.htmlという名前で作っておいて、 Netscapeで表示してみる。
UNIXであれば、コマンドラインから次のコマンドを打ち込む。 

# netscape test.html

するとNetscapeのウインドウの中に以下のように表示される。

<TITLE> から </TITLE> まででかこまれたSimple HTML data 1 はウインドウの上にあるDocument Title:の部分に表示さる。

改行の方法

HTMLでは、文章の中に普通に改行を入れただけでは、本当に改行されない。
改行したい場所に <BR> というタグを入れる必要がある。
ついでに言っておくと、スペースも無視されるので注意するように。 

これは     改行を
入れた
文章です。

と打ち込んでも

これは改行を 入れた 文章です。

となってしまう。 

これは改行を<BR> 
入れた<BR>
文章です。

で始めて

これは改行を
入れた
文章です。

のように改行が入る。

段落

HTMLでは <P></P> によって囲んだ部分が1段落になる。 

<P>これが第一段落。</P>
<P>これが第二段落。</P>
<P>これが第三段落。</P>

というデータは

これが第一段落。

これが第二段落。

これが第三段落。

となる。
この<P>の場合もデフォールトでは1行分空行があくからと言って 空行をあけるために使用してはならない。

見出しを表すタグ

HTMLで、見出しの文字を表示するには、以下のタグを使用する。

このタグを使用する時に、注意しなければならないのは、 たとえば <H1> で始めたら必ず </H1> を最後につけなければならないということである。

見出しを表すタグの例 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE> Simple HTML data 2</TITLE>
</HEAD>
<BODY>
<H1>これがH1の見出し</H1>

<H2>これがH2の見出し</H2>

<H3>これがH3の見出し</H3>

<H4>これがH4の見出し</H4>

<H5>これがH5の見出し</H5>

<H6>これがH6の見出し</H6>
</BODY>
</HTML>

HTMLを書く際の注意

HTMLのタグには全体の構造を表すタグと、 見栄え(デザイン・レイアウト)を決めるカスケードスタイルシート(CSS)がある。
この2つをちゃんと使い分けるべきである。
たとえば、見出しのタグ(<H1>, <H2>など)によって文字の大きさが変わるからといって、 これらを文字の大きさを変えるために使用してはならない。

参考

Prev
index | home
abe@injapan.net