⟡⟡Coolest Moment --- HP Guide for Beginners (タグ解説(テキスト系))⟡⟡

PC・タブレットなどでブラウザーの横幅が大体960px以上の時：一部のリンクは、クリックすると画面左下に"タグ解説ページ"が"別窓で並行表示"されます

横幅が960px未満の時：一部のリンクは、クリックすると"タグ解説ページ"が新規ウインドウで表示されます

"tags (P.2)"

"Text TAG"
"BODY & IMAGE TAG"
"HEAD & Form TAG"

〔"Text TAG"〕

行変えのタグ。

段落変えを行うタグ(本来は～(～：任意のテキスト)ですが、は省略可)で、自動的に一行スペースが入ります。
( は書いた数だけ行間が空きますが、はいくつ書いても一行しか空きません)

このタグに挟まれた部分は改行されません。(IEでは、このタグを使うと下が一行空いてしまったり、タグ自体が働かないことがあります)

"内"でも、このタグを書いたところだけは改行します。
(テキストがウインドウ内に収まってしまうときは機能しません。また、これもIEでは無効のこともあります)

<HR>

罫線(横線)を表示するタグ。このタグの前後は、自動的に改行されます。

(デフォルト：太さ2ピクセル・中央揃え・長さ100%、オプションとして "SIZE"・"WIDTH"・"ALIGN"・"NOSHADE")

<HR SIZE="＊">
(＊：ピクセル数)

罫線の太さを変えます。
(NN6(以降)のバージョンによっては、<HR SIZE="1">と指定してもデフォルトと同じになります)

<HR WIDTH="＊">
(＊：ピクセル数)

罫線の長さを変えます。(％でもOKですが、ウインドウの幅によって長さが変わります)

罫線を左寄せ(p＝LEFT)または右寄せ(p＝RIGHT)にします。

罫線の影を表示しないようにします。

<H＊>～</H＊>
(＊：1～6)

見出しを作るタグ。文字は太字となり、自動的に改行されます。大きさは6段階で、数字が小さいほど大きく表示されます。
(NetscapeとIEでは大きさが異なります)

～
(＊：1～7)

フォントサイズを(部分的に)変更します。大きさは7段階で、数字が大きいほど大きく表示されます。
(これもNetscapeとIEで大きさが異なります)

<BASEFONT SIZE="＊">
(＊：1～7)

ページ全体のフォントサイズを指定します。
(デフォルト："＊"=3； <BODY>タグの直後に記述して下さい)

(Note：
(フォントサイズによっては(特にネットスケープの場合、小さくすると)見づらくなることがあるので、注意して使用して下さい。
また、<TABLE>内は無効です)

～または～
(＊：1～7； +＊, -＊：基本フォントサイズとの差)

(<BASEFONT SIZE="＊">を指定している場合)文中でフォントサイズを変えたい時に使用します。

または
(x：0～9またはa～f "color name": 任意の色)

フォントカラーを部分的に変更します。
(色の指定は、"BODY BGCOLOR""BODY BGCOLOR"と全く同じです)

(xxx：任意のフォントタイプ名)

フォントタイプを部分的に変更します。
(一部を除いてIE、NN6以上のみ有効)

(フォントタイプは３つまで指定できます(書いた順に優先で表示：例えば、1番目に指定したフォントがHPを見ている人のPCにインストールされていない場合、2番目に指定したフォントで表示されます)。
その場合、フォントとフォントの間は、 , (半角カンマ)で区切って下さい。

(ネットスケープでは、指定通りに表示されないこともあります)
また、"Times New Roman"など半角スペースが入るフォント名の場合、 ' (半角コーテーション)で括って下さい)

(フォントの選択によっては、Macで見ている場合文字が表示されなくなる可能性があるので、指定の際には"Osaka"などの「Mac専用フォント」も加えておいて下さい)

ex)
A Happy New Year!

↓

A Happy New Year!

(ソースはこちらをご覧下さい)

<BASEFONT FACE="xxx">
(xxx：任意のフォントタイプ名)

ページ全体のフォントタイプを指定します。

(IEのみ有効・フォントタイプの指定は"FONT FACE"と全く同じ)

(<BODY>タグの直後に記述して下さい)

テキストやイメージを中央揃えで表示するタグ。
(このタグの前後は、自動的に改行されます)

テキスト位置を左寄せ(p=LEFT)、右寄せ(p=RIGHT)、または中央揃え(p=center)にします。

記述したテキスト通りに表示します。(このタグの前後は、それぞれ一行ずつ空きます)
(IEでは、フォントの大きさによっては表示がずれることもあります)

(Note：
<PRE>タグ内には、 やは入れないようにして下さい(入れると、行間が余分に開いてしまうなど、
レイアウトが崩れてしまうことがあります))
また、<PRE>タグを使用しても、特殊文字特殊文字だけは<PRE>タグ無しの場合と同様に"記号"として処理されてしまうので、こちらの書き方こちらの書き方で記述して下さい)

(IE5以上では、 , , <HR>, </center>, </DIV>の直前に全角スペースを記述しても無視されます)

～

文字を太字で表示します。

～

文字を斜体で表示します。

～

文字を強調表示します。(ネットスケープ、IEでは～と同じに見えます)

～

文字を斜体で強調表示します。(ネットスケープ、IEでは～と同じに見えます)

(Note:
～は"強調"、～は"より強調"という意味合いがあるので、
～のような書き方は誤りです。
・・・ネットスケープ、IEで太字＆斜体で表示し、且つそれ以外のブラウザーでも強調表示したい場合には、～と書いておくと無難でしょう)

また、～や～をテーブルやフレーム内で使用した場合(及びテーブルで<TH>を使用した場合)、
NN6では、テーブルの枠の右側に文字がかかってしまったり、スクロールの後ろに文字の一部がかかってしまうことがあります。
(これはNN6(以降)のバグと思われるので、修正バージョンアップ版が出るのを待つしかないようです)

～

文字にアンダーラインを付けます。

文字を大きく表示します。
(複数使用可で、タグの数が多いほど文字が大きくなります。
(ネットスケープ、IE共、4つ以降は記述しても変わらなくなるようです))

～

文字を小さく表示します。
(複数使用可で、タグの数が多いほど文字が小さくなります。
(ネットスケープ、IE共、4つ以降は記述しても変わらなくなるようです))

文字に抹消線を引きます。

～

上付き文字で表示します。

～

下付き文字で表示します。

(～: 任意のテキスト)

更新日付などをHTMLファイル内に"メモ書き"したい時に使うタグ。
(ブラウザーには表示されません)

(スタイルシートやJava Scriptを書く際には必要不可欠ですが、ここでは解説は省略します)

〔"LINK TAG"〕

同一ディレクトリ内のファイルにリンクします。
(異なるディレクトリ間リンクの書き方はこちら異なるディレクトリ間リンクの書き方はこちら)

他のURL(ホームページアドレス)のファイルにリンクします。

<A HREF="file name#xxx">～</A>
(xxx：任意の名前)

同一ディレクトリ内のファイルの特定部位にリンクします。
(リンク先ファイルのリンクしたい部位に"xxx"を指定して下さい(<A NAME="xxx">～</A>))

<A HREF="URL#xxx">～</A>
(xxx：任意の名前)

他のURL(ホームページアドレス)の特定部位にリンクします。
(リンク先ファイルに"xxx"が指定されていることが条件(<A NAME="xxx">～</A>))

イメージをリンクボタンにします。(同一ディレクトリ内へのリンク)

イメージをリンクボタンにします。(他のURL(ホームページアドレス)へのリンク)

<A HREF="#xxx">～</A>
(xxx：任意の名前)

(同一)ページ内の特定部位にリンクします。
(リンクしたい部位に"xxx"を指定して下さい(<A NAME="xxx">～</A>))

<A HREF="#xxx"><IMG SRC="file name'"></A>
(xxx：任意の名前)

イメージをリンクボタンにします。((同一)ページ内の特定部位へのリンク)

<A HREF="file name" TITLE="name">～</A>
(name：任意のテキスト)

リンク文字上にマウスポインタをもっていくと、"吹き出し"でテキストが表示されます。
(IE4以上, NN6以上有効)

(ネットスケープの場合、テキストが長いと、途中で(または文頭の方が)切れてしまうことがあります)

あらかじめ指定したメールアドレスの入ったメールウインドウが開かれます。(リンクボタン(文字)をクリックした後も、色は変わりません)

<A HREF="mailto:e-mail address%20?subject=xxx">～</A>
(xxx：任意の名前)

(メールアドレスに加えて)あらかじめ指定したSubjectの入ったメールウインドウが開かれます。

ex) sample

<A HREF="mailto:abc@xxx.aaa.ne.jp%20?subject='BODY'タグは、1ページに一つだけ！">sample</A>

〔"LIST TAG"〕

<UL><LI>～</UL>
(～: 任意のテキスト)

順序を指定しないリストを作成するタグで、デフォルトでは行の先頭に黒丸が付きます。
("<LI>～"はいくつでも指定可)

<UL><LI TYPE="xxx">～</UL>
(xxx: disc(デフォルト), circle または square)

行の先頭に付くマークの種類を指定します。
(circle＝白丸、square＝四角(黒) ですが、NN3, IE3は一部サポートしてないようです)

ex)
[海外旅行に持っていくもの]
<UL>
<LI TYPE="disc">パスポ－ト
<LI TYPE="disc">トラベラーズチェック(T/C)
<LI TYPE="circle">海外旅行傷害保険証
<LI TYPE="circle">クレジットカード(VISAがベスト？)
<LI TYPE="square">国際免許証
<LI TYPE="square">英語辞典(小さいもの)
</UL>

↓

[海外旅行に持っていくもの]

パスポ－ト
トラベラーズチェック(T/C)

海外旅行傷害保険証
クレジットカード(VISAがベスト？)

国際免許証
英語辞典(小さいもの)

<OL><LI>～</OL>
(～：任意のテキスト)

順序を指定したリストを作成するタグで、デフォルトでは数字で表示されます。
("<LI>～"はいくつでも指定可)

<OL TYPE="n">～<LI></UL>
(n：1 (デフォルト)、A、a、I (大文字のローマ数字)
または i (小文字のローマ数字)

(行の先頭に付く)数字(または記号)の種類を指定します。

<OL START="n">～<LI></UL>
(n：整数)

(行の先頭に付く)開始番号を指定します。("OL TYPE"と同時に指定可)

ex)
[(私の)ブラウザーの使用頻度]
<OL TYPE="I">
<LI>NN7(デスクトップ)
<LI>IE6(デスクトップ)
</OL>
(ここまでが、私がふだん使っているブラウザー)
<OL START="3" TYPE="I">
<LI>IE5.5(デスクトップ)
<LI>NC6.2.3(ノート)
<LI>IE5.01(ノート)
</OL>

↓

[(私の)ブラウザーの使用頻度]

NN7(デスクトップ)
IE6(デスクトップ)

(ここまでが、私がふだん使っているブラウザー)

IE5.5(デスクトップ)
NC6.2.3(ノート)
IE5.01(ノート)

<DL><DT>～<DD>～</DL>
(～: 任意のテキスト)

定義リスト(用語とその解説)を作成するタグで、"<DD>～"は、テキストの左側にインデント(字下げ)を付けて表示されます。

<DL COMPACT><DT>～<DD>～</DL>
(～: 任意のテキスト)

("<DD>～"の上に1行スペースが入ることがありますが)行間を詰めてスペースが入らないようにします。

ex)
<DL COMPACT>
<DT>
[ブラウザーの強制終了]
<DD>
ネットスケープは(9x系では)IEに比べてリソースの消費が少ないのが利点ですが、突然原因不明の強制終了してしまうことがある欠点があります。
(IEでは、強制終了の経験はほとんどありません・・・でもこれは、単に、使用頻度の違い？)
</DL>

↓

[ブラウザーの強制終了]
ネットスケープは(9x系では)IEに比べてリソースの消費が少ないのが利点ですが、突然原因不明の強制終了してしまうことがある欠点があります。(IEでは、強制終了の経験はほとんどありません・・・でもこれは、単に、使用頻度の違い？)

引用を示すタグ。(通常、左右が全角文字で約３字分インデント("字下げ")され、前後がそれぞれ一行ずつ空きます)

〔"TAGS FOR NETSCAPE"〕＊

<BLINK>～</BLINK> (NN3～NN6、NN7有効(NN6.1～NN7PR1無効))

文字が点滅します。

<SPACER TYPE="horizontal" SIZE="＊"> (NN3, NC4のみ有効)
(＊：ピクセル数)

水平(横)方向にスペースを作るタグ。

<SPACER TYPE="vertical" SIZE="＊"> (NN3, NC4のみ有効)
(＊：ピクセル数)

垂直(縦)方向にスペースを作るタグ。

<SPACER TYPE="block" WIDTH="＊" HEIGHT="＊">
(Netscape3.0～Netscape7PR1有効)
(＊：ピクセル数)

四角形の(水平(横)方向・垂直(縦)方向同時に)スペースを作るタグ。

〔"TAGS FOR IE"〕〔"TAGS FOR IE"〕＊ (IE2.0以上有効)

(＊:
上記のとおり、"SPACER TYPEタグ"はネットスケープのみ有効ですが、IEでもイメージを効果的に使用すれば、ピクセル単位でフォントやイメージの位置をずらすことができます。

(方法)

グラフィックソフトで 1×1 ピクセル(ドット)の透過gifファイルを作り、
"IMGタグ"のWIDTHとHEIGHTで好みの大きさに拡大して貼り付ける

・・・これだけです。(簡単でしょう？)

(・・・描くのは面倒、という人は、私の作ったイメージを使って下さい。
(下図の額縁内側のどの部分をマウス右クリック→「画像の保存」しても、 1×1 ピクセルの透過gifダウンロードが可能です)

("sample")

ex) <center><H3>'賢い<BLINK>フォーム</BLINK>の記入法'</H3></center>
<HR SIZE="5" WIDTH="300" ALIGN="RIGHT">
・・・Formに記入しなければならない、でもキーボード入力は苦手、早く書かないと接続料と電話代が・・・あせると、ますますキーボードが打てなくなってしまう・・・そういう方は多いと思います(私もそう)。・・・そこで、効果的な<BIG>課金節約法</BIG>をお教えします。 
(なお、この方法は、<S>IE2</S> IE3ではうまくいかないようですが、一度試してみて下さい)
<SPACER TYPE="horizontal" SIZE="10">1) フォーム記入のページがブラウズされたら、(ブラウザーは閉じずに)いったん接続を切る <SPACER TYPE="vertical" SIZE="3">
<SPACER TYPE="horizontal" SIZE="10">2) フォームに記入する
<SPACER TYPE="horizontal" SIZE="10">3) 記入し終わったら、再び接続し、「送信」ボタンを押す

↓

'賢いフォームの記入法'

・・・Form に記入しなければならない、でもキーボード入力は苦手、早く書かないと接続料と電話代が・・・あせると、ますますキーボードが打てなくなってしまう・・・そういう方は多いと思います(私もそう)。・・・そこで、効果的な課金節約法をお教えします。
(なお、この方法は、IE2 IE3ではうまくいかないこともあるようですが、一度試してみて下さい)

1) フォーム記入のページがブラウズされたら、(ブラウザーは閉じずに)いったん接続を切る
2) フォームに記入する
3) 記入し終わったら、再び接続し、「送信」ボタンを押す