Chapter 1

HTML構造

ＨＴＭＬの基本構造を覚えましょう。
そのまえにHTMLは全て半角英数字で書かなくてはいけないことを覚えておいてください。

<HTML>

<HEAD>

<TITLE>
タイトル
</TITLE>

</HEAD>

<BODY>
本文です。実際に表示されるのはここの部分。
</BODY>

</HTML>

このような構成になってます。このようにまず、書かなくてはいけないのが、この文章がＨＴＭＬだということを宣言するタグです。これは必ず必要です。タグというのは、< >であらわします。
ほとんどのタグは<HTML>～</HTML>のように対になっていて、その中に必要なことを書いていきます。
<HEAD>～</HEAD>というのは、特徴やタイトルを入力する場所です。
一般的にはこの中に<TITLE>～</TITLE>ではさんだタイトル名などをいれます。
ここまでは、まだブラウザには表示されません。
（タイトルは、プラウザの画面のところではなく、一番上に表示されます。）
<BODY>～</BODY>の中に実際に表示したい文章や、ロゴ、画像などをいれていきます。

基本的なタグ

<HTML>～</HTML>

HTML文書の最初と最後につけます。これは絶対必要です。

<HEAD>～</HEAD>

<TITLE>～</TITLE>

これらは、上に書いたので省略します。

<BODY>～</BODY>

この中に本文を書いていきます。

<BODY BACKGROUND="ファイル名">～</BODY>

背景に画像を使う場合、このようにファイル名を指定します。この際に必要なのはファイル名.gifのように必ず拡張子もつけて下さい。

<BODY BGCOLOR="背景色">～</BODY>

背景の色を指定します。色の指定の仕方はかなり面倒です。
0～9の数字ととアルファベットのA～Fを組み合わせた6桁の記号のようなもので指定します。その6桁は2桁ごとにそれぞれ赤、緑、青の成分を16進数であらわしたものです。
000000が黒、FFFFFFが白になります。これらの前に＃をつけて" "ではさみます。
White・Black・Red・Green・Blue・Yellow・Purple・Aqua
Maroon・Navy・Olive・Teal・Gray・Silver・Lime・Fuchsiaは
BGCOLOR=Whiteのように色名で指定もできます。

<BODY TEXT="文字の色">～</BODY>

普通の文字の色を指定します。指定しないとデフォルトの黒で表示されます。

<BODY LINK="文字の色">～</BODY>

未アクセスリンクの文字の色を指定します。指定しないとデフォルトの青で表示されます。

<BODY VLINK="文字の色">～</BODY>

アクセス済のリンクの文字の色を指定します。指定しないとデフォルトの紫で表示されます。

<BODY ALINK="文字の色">～</BODY>

リンクの部分をクリックした瞬間の色を指定します。指定しないとデフォルトの赤で表示されます。
ただし、これはブラウザによっては表示されないこともあります。

さて、実際にこれらを指定する時はは次のように書きます。
<BODY BACKGROUND="back.gif" TEXT="#000000" LINK="#002200" VLINK="##008000">
または
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#002200" VLINK="##008000">

さて、ここまでわかれば一応文章を書いて表示させることはできます。何か書いてみましょう。

つぎに本文(<BODY>～</BODY>) に書く文字の修飾や改行の仕方、区切り線の入れ方など説明していきたいと思います。

～

フォント（文字）に関するタグです。通常は必要ありませんが、文字の大きさや色ををかえたりする時に下記のように指定します。

～

文字の大きさを指定します。1～7までの数字が入り、数字が大きいほど文字も大きくなります。

～

文字の色を指定します。色の指定法はLESSON.1のBGCOLORの項目を参照してください。

これらは～のように書きます。

これで、文字の大きさや色をかえることができます。大切なのは、変えたいところの文字が終わったら必ずで閉じて下さい。特に～タグを使わなくても下記の修飾は、それだけでも使えます。
（もちろん～ タグと併用しても使えます。）

～

ボールド（太字）にします。

～

イタリック（斜体）にします。

<TT>～</TT>

タイプライター文字にします。タイプライター文字とは等幅フォントのことです。

<BLINK>～</BLINK>

文字を点滅させます。でもこれはどうもネットスケープでしか表示できなくてエクスプローラーだと普通の文字のようです。

次に文字の体裁をととのえるタグを説明します。

<CENTER>～</CENTER>

はさんだ部分をセンタリングします。指定しない場合は通常左寄せになっています。
これは文字だけでなく画像のファイルや、区切り線、後のLESSONで説明する表組みなどにも使えます。

 

強制改行します。このタグを使わない場合ブラウザの幅まで表示され、そこで改行されますが タグと違って前の文から一行はあきません。これははつける必要はありません。

<HR>

みぞのような区切り線をつけます。これも</HR>はつける必要はありません。
これには、次のように線の太さや長さなどの指定ができます。

<HR SIZE=線の太さ>

線の太さを指定します。数字で指定します。大きいほど線が太くなります。
指定しないと2を入れたのと同じになります。

<HR WIDTH=線の長さ>

線の長さを指定します。ピクセル単位で数字を入れる方法と％で指定する方法があります。
指定しないと１００％で表示されます。

これらの書き方は<HR SIZE=5 WIDTH=50%>です。

～

段落をつけます。これを使うと、このタグの前の文から強制的に改行され一行あいたようになります。
これもは省略できますが、～ではさまれた段落をセンタリングしたい場合などはを省略してはいけません。
その場合は次のように書きます。
～

もどる