01 HTMLタグの復習


 「タグの基礎知識」を終了して、一応、ホームページを作ることが出来たわけですが、どうも貧弱だなあとお思いでしょうね。この「初心者講座」ではホームページを格好良くする方法を勉強しましょう。

 その前に、タグについて復習をしておきましょう。既にお気づきと思いますが、タグはほとんどが対になっていますね。前のタグが「これから後ろの文字や画像は命令に従え」と言っています。頭に / (スラッシュ)が付いた相棒の方は「命令はここで終わりだよ」と言っているのです。

<HTML> これは HTML 文書には必ず書かなければならない「構造タグ」です。<HTML> と </HTML> に囲まれた記述はHTML文書ですということです。
<HEAD> これも構造タグのひとつで、<HEAD> と </HEAD> に囲まれた部分にはタイトルや JAVA SCRIPT などの本文以外の情報を記述する場所です。
<TITLE> これは <HEAD> と </HEAD> の間に記述され、<TITLE> と </TITLE> に囲まれた文字はブラウザのタイトルバーに表示されます。
<BODY> これも構造タグです。BODY に囲まれた部分は本文を記述する場所です。BODY の後ろに属性を記述して、背景色・背景画像・全体の文字色・リンクスポット色・マージンなどを指定します。
BGCOLOR<BODY BGCOLOR="#0000FF"> のように BODY の後ろに記述し、背景色の指定をします。
BACKGROUND <BODY BACKGROUND="bg.gif"> のように BODY の後ろに記述し、壁紙に用いる画像ファイルを指定します。
BGPROPERTIES <BODY BACKGROUND="bg.gif" BGPROPERTIES=FIXED> のように BACKGROUND="bg.gif" の後ろに記述し、壁紙に用いる画像ファイルを固定します。
TEXT<BODY TEXT="#0000FF"> のように BODY の後ろに記述し、ページ全体の文字の色を指定をします。
LINK<BODY LINK="#0000FF"> のように BODY の後ろに記述し、リンクスポットの文字の色を指定をします。
ALINK<BODY ALINK="#0000FF"> のように BODY の後ろに記述し、リンクスポットをクリックした直後からジャンプするまでのリンクスポットの文字の色を指定をします。
VLINK<BODY VLINK="#0000FF"> のように BODY の後ろに記述し、ジャンプした後のリンクスポットの文字の色を指定をします。
<FONT> <FONT の後ろに半角空けて属性を記述し <FONT> と </FONT> に囲まれた文字のサイズ・書体・色を指定します。
SIZE <FONT SIZE="3"> のように FONT の後ろに半角空けて記述し、文字の大きさを指定します。1 が最小、7 が最大、指定しなければ標準の 3 です。
FACE <FONT FACE="TIMES"> のように FONT の後ろに記述し、文字の書体を指定します。
COLOR <FONT COLOR="#FF0000"> のように FONT の後ろに記述し、文字の色を指定します。
<I> <I> と </I> で囲った文字のスタイルを斜体(Italic)で表示します。
<B> <B> と </B>で囲った文字のスタイルを太字(Boid)で表示します。
<U> <U> と </U>で囲った文字のスタイルを下線付き(Underline)で表示します。
<S> <S> と </S>で囲った文字のスタイルを取り消し線付き(Strike)で表示します。
(ここでご注意!!)
属性は対にはなっていません。
属性の目的は " (ダブルクウォーテーション)で囲みます。これを忘れるとエラーになります。
COLOR="#FF0000" のように16進数色の前には # を付けます。
COLOR="red" のように英語のカラーネームでも可です。この場合は # は不要です。
属性は半角空けて記述する。属性が複数並ぶときも同じく半角空けます。
ファイル名は大文字・小文字の区別を確実に。
他にも対になっていないタグがあります。
<P> 文字や画像の後ろに記述して「改行+1行空ける」を指定します。複数連ねて使うことは出来ません。
<BR> 文字や画像の後ろに記述して「改行」を指定します。複数行空ける場合はこれを複数連ねて使います。
<HR> 横罫線(仕切り線)を入れるタグです。上下に1行空きます。属性を指定しない場合は横幅は画面いっぱい、太さは2、影付きとなります。
NOSHADE <HR NOSHADE> のように記述すると影無しになります。
SIZE <HR SIZE="5"> のように記述して罫線の太さを指定します。1から100まで指定できます。
<DD> <DD> の後に記述した文字がインデント(字下げ)されます。
<IMG> 画像( gif や jpeg ) を貼り込む タグです。 <IMG SRC="dog.jpeg"> のように必ず SRC の属性を伴います。
ALIGN <IMG SRC="dog.jpeg" ALIGN="left"> のように記述し、画像を表示する位置を指定します。
ALIGN を使った場合は横に複数行の文字が回り込みます。
これを解除するには <BR CLEAR="all"> と記述します。
画像に文字が回り込んだ場合、その画像と文字の横方向の間隔を空けるには <IMG SRC="dog.jpeg" ALIGN="left" HSPACE="5"> のようにピクセル単位で数値を入れます。
ALT <IMG SRC="dog.jpeg" ALIGN="left" ALT="犬の写真"> のように記述し、画像が表示されるまでの間、または画像が表示されない場合に表示する文字を指定します。
<CENTER> <CENTER> と </CENTER> に囲まれた文字や画像は画面の横方向の中央に表示されます。
<BGSOUND> <BGSOUND SRC="uta.mid"> のように <IMG> と同じく、SRC を伴います。BGMの曲ファイルを指定をします。<BODY> と </BODY> の間ならどこに記述しても構いません。
LOOP <BGSOUND SRC="uta.mid" LOOP="3"> のように記述します。LOOP= で、BGMを何回再生するかを数字で指定します。INFINITE と入れればエンドレスの指定です。
<BLOCKQUOTE> <BLOCKQUOTE> と <BLOCKQUOTE> の間は画面の左右に等幅でスペースが設けられます。複数並べて使うことができます。上下に1行空きます。
<BASEFONT> <BASEFONT SIZE="3"> のように基準の文字サイズを指定します。ここから </FONT> までの間で文字のサイズを変える場合は <FONT SIZE="+2"> サイズ5を指定 </FONT> のように、基準に対する相対値で指定します。
<A> アンカータグといい、HREF などを伴ってジャンプする先を指定します。

同じフォルダ内にある他のページにジャンプする場合は
<A HREF="link.html">リンクのページへ</A> のように記述します。
<A> と </A> に囲まれた文字が画面に表示され、これをクリックすると HREF= で指定したページへジャンプします。

同じページの他の個所へジャンプする場合は
<A HREF="#1">1へジャンプ</A> と記述し、ジャンプ先のアンカー部分を <A NAME="1">アンカー部分</A> のように囲みます。

階層が一つ上の他のフォルダ内にあるページへジャンプする場合は
<A HREF="../homepage1/lesson1.html">LESSON1へ</A> のように、../ で一つ上の階層へ上がり、他のフォルダ名を指定して、その中のジャンプ先のページファイル名を指定します。

同じ階層のフォルダ内にあるページへジャンプする場合は
<A HREF="sample/sample1.html> のように記述します。sample は同じ階層にあるフォルダ名、sample1.html はその中にあるジャンプ先のページのファイル名です。

以上の例のように、現在のページとジャンプ先のページの位置関係で記述したものを「相対パス」といいます。

他所のホームページへリンクする場合は次のように記述します。
<A HREF="http://plaza10.mbn.or.jp/~nishikubo/"><IMG SRC="salty.gif" BORDER="0"></A>
<IMG SRC="salty.gif" BORDER="0"> は画面に表示するリンクバナー(画像)の指定です。
このように文字の代りにバナーやボタンなどを使う場合は BORDER="0" を入れてください。
これを書いておかないと、クリックしたときに画像に枠が付いて見栄えが悪くなります。

このようにURLを全て記述したものを「絶対パス」といいます。絶対パスは上記の全ての場合に使えます。

<!-- --> <!-- と --> の間の記述はブラウザに認識されません。コメントタグといい、ブラウズに表示させずにメモを残すのに使います。
HTMLタグと誤解釈されるのを防ぐために下記の4個の記号を画面に表示させる場合は"name entity"という記述形式で表現します。